refac: styling

src/lib/components/chat/Overview/Node.svelte

@@ -18,7 +18,7 @@
 				className={'size-5 -translate-y-[1px]'}
 			/>
 			<div class="ml-2">
-				<div class="text-xs font-medium">{data.user.name}</div>
+				<div class="text-xs text-black dark:text-white font-medium">{data.user.name}</div>
 				<div class="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div>
 			</div>
 		</div>
@@ -30,7 +30,7 @@
 			/>
 
 			<div class="ml-2">
-				<div class="text-xs font-medium">{data.model.name}</div>
+				<div class="text-xs text-black dark:text-white font-medium">{data.model.name}</div>
 				<div class="text-gray-500 line-clamp-2 text-xs mt-0.5">{data.message.content}</div>
 			</div>
 		</div>

src/lib/components/layout/Navbar/Menu.svelte

@@ -8,7 +8,7 @@
 	import { downloadChatAsPDF } from '$lib/apis/utils';
 	import { copyToClipboard } from '$lib/utils';
 
-	import { showOverview, showControls } from '$lib/stores';
+	import { showOverview, showControls, mobile } from '$lib/stores';
 	import { flyAndScale } from '$lib/utils/transitions';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
@@ -127,16 +127,18 @@
 				<div class="flex items-center">{$i18n.t('Settings')}</div>
 			</DropdownMenu.Item> -->
 
-			<DropdownMenu.Item
-				class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
-				id="chat-controls-button"
-				on:click={async () => {
-					await showControls.set(true);
-				}}
-			>
-				<AdjustmentsHorizontal className=" size-4" strokeWidth="0.5" />
-				<div class="flex items-center">{$i18n.t('Controls')}</div>
-			</DropdownMenu.Item>
+			{#if $mobile}
+				<DropdownMenu.Item
+					class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+					id="chat-controls-button"
+					on:click={async () => {
+						await showControls.set(true);
+					}}
+				>
+					<AdjustmentsHorizontal className=" size-4" strokeWidth="0.5" />
+					<div class="flex items-center">{$i18n.t('Controls')}</div>
+				</DropdownMenu.Item>
+			{/if}
 
 			<DropdownMenu.Item
 				class="flex gap-2 items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"

src/lib/components/layout/Sidebar.svelte

@@ -424,8 +424,8 @@
 				<div class="px-3.5 mb-1 flex gap-0.5 flex-wrap">
 					<button
 						class="px-2.5 py-[1px] text-xs transition {selectedTagName === null
-							? 'bg-gray-900'
-							: ' '} rounded-md"
+							? 'bg-gray-100 dark:bg-gray-900'
+							: ' '} rounded-md font-medium"
 						on:click={async () => {
 							selectedTagName = null;
 							await enablePagination();
@@ -436,8 +436,8 @@
 					{#each $tags.filter((t) => t.name !== 'pinned') as tag}
 						<button
 							class="px-2.5 py-[1px] text-xs transition {selectedTagName === tag.name
-								? 'bg-gray-900'
-								: ''}  rounded-md"
+								? 'bg-gray-100 dark:bg-gray-900'
+								: ''}  rounded-md font-medium"
 							on:click={async () => {
 								selectedTagName = tag.name;
 								scrollPaginationEnabled.set(false);