refac: navbar selector styling

jaychuo · May 2, 2024 · 5cf6213 · 5cf6213
1 parent 2bece7b
commit 5cf6213
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/src/lib/components/chat/ModelSelector.svelte b/src/lib/components/chat/ModelSelector.svelte
@@ -40,9 +40,9 @@
 
 <div class="flex flex-col mt-0.5 w-full">
 	{#each selectedModels as selectedModel, selectedModelIdx}
-		<div class="flex w-full">
+		<div class="flex w-full max-w-fit">
 			<div class="overflow-hidden w-full">
-				<div class="mr-0.5 max-w-full">
+				<div class="mr-1 max-w-full">
 					<Selector
 						placeholder={$i18n.t('Select a model')}
 						items={$models
@@ -71,9 +71,9 @@
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
 								viewBox="0 0 24 24"
-								stroke-width="1.5"
+								stroke-width="2"
 								stroke="currentColor"
-								class="w-4 h-4"
+								class="size-3.5"
 							>
 								<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
 							</svg>
@@ -94,9 +94,9 @@
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
 								viewBox="0 0 24 24"
-								stroke-width="1.5"
+								stroke-width="2"
 								stroke="currentColor"
-								class="w-4 h-4"
+								class="size-3.5"
 							>
 								<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
 							</svg>

diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select } from 'bits-ui';
+	import { DropdownMenu } from 'bits-ui';
 
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
@@ -25,6 +25,11 @@
 
 	export let items = [{ value: 'mango', label: 'Mango' }];
 
+	export let className = 'max-w-lg';
+
+	let selectedModel = '';
+	$: selectedModel = items.find((item) => item.value === value) ?? '';
+
 	let searchValue = '';
 	let ollamaVersion = null;
 
@@ -175,27 +180,28 @@
 	};
 </script>
 
-<Select.Root
-	{items}
+<DropdownMenu.Root
 	onOpenChange={async () => {
 		searchValue = '';
 		window.setTimeout(() => document.getElementById('model-search-input')?.focus(), 0);
 	}}
-	selected={items.find((item) => item.value === value) ?? ''}
-	onSelectedChange={(selectedItem) => {
-		value = selectedItem.value;
-	}}
 >
-	<Select.Trigger class="relative w-full" aria-label={placeholder}>
-		<Select.Value
-			class="flex text-left px-0.5 outline-none bg-transparent truncate text-lg font-semibold placeholder-gray-400  focus:outline-none"
-			{placeholder}
-		/>
-		<ChevronDown className="absolute end-2 top-1/2 -translate-y-[45%] size-3.5" strokeWidth="2.5" />
-	</Select.Trigger>
-	<Select.Content
-		class=" z-40 w-full rounded-lg  bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50  outline-none"
+	<DropdownMenu.Trigger class="relative w-full" aria-label={placeholder}>
+		<div
+			class="flex w-full text-left px-0.5 outline-none bg-transparent truncate text-lg font-semibold placeholder-gray-400 focus:outline-none"
+		>
+			{#if selectedModel}
+				{selectedModel.label}
+			{:else}
+				{placeholder}
+			{/if}
+			<ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" />
+		</div>
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content
+		class=" z-40 w-full {className} justify-start rounded-lg  bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50  outline-none "
 		transition={flyAndScale}
+		side={'bottom-start'}
 		sideOffset={4}
 	>
 		<slot>
@@ -214,12 +220,13 @@
 				<hr class="border-gray-100 dark:border-gray-800" />
 			{/if}
 
-			<div class="px-3 my-2 max-h-72 overflow-y-auto">
+			<div class="px-3 my-2 max-h-72 overflow-y-auto scrollbar-none">
 				{#each filteredItems as item}
-					<Select.Item
+					<DropdownMenu.Item
 						class="flex w-full font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm  text-gray-700 dark:text-gray-100  outline-none transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg cursor-pointer data-[highlighted]:bg-muted"
-						value={item.value}
-						label={item.label}
+						on:click={() => {
+							value = item.value;
+						}}
 					>
 						<div class="flex items-center gap-2">
 							<div class="line-clamp-1">
@@ -287,7 +294,7 @@
 								<Check />
 							</div>
 						{/if}
-					</Select.Item>
+					</DropdownMenu.Item>
 				{:else}
 					<div>
 						<div class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-100">
@@ -385,5 +392,16 @@
 				{/each}
 			</div>
 		</slot>
-	</Select.Content>
-</Select.Root>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>
+
+<style>
+	.scrollbar-none:active::-webkit-scrollbar-thumb,
+	.scrollbar-none:focus::-webkit-scrollbar-thumb,
+	.scrollbar-none:hover::-webkit-scrollbar-thumb {
+		visibility: visible;
+	}
+	.scrollbar-none::-webkit-scrollbar-thumb {
+		visibility: hidden;
+	}
+</style>
diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
@@ -37,7 +37,7 @@
 			</div>
 
 			<div class="self-start flex flex-none items-center">
-				<div class="flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" />
+				<div class="md:hidden flex self-center w-[1px] h-5 mx-2 bg-gray-300 dark:bg-stone-700" />
 
 				{#if !shareEnabled}
 					<Tooltip content={$i18n.t('Settings')}>

diff --git a/src/routes/(app)/playground/+page.svelte b/src/routes/(app)/playground/+page.svelte
@@ -316,7 +316,7 @@
 						</div>
 					</div>
 
-					<div class="flex flex-col gap-1 px-1 w-full">
+					<div class="flex flex-col gap-1 w-full">
 						<div class="flex w-full">
 							<div class="overflow-hidden w-full">
 								<div class="max-w-full">
@@ -330,6 +330,7 @@
 												info: model
 											}))}
 										bind:value={selectedModelId}
+										className="max-w-2xl"
 									/>
 								</div>
 							</div>