Moved sorting button into user menu

Changed design to occupy less space on the sidebar. Update to request #1392
open-webui · May 4, 2024 · 7593687 · 7593687
1 parent cc9335c
commit 7593687
Showing 1 changed file with 25 additions and 29 deletions.
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
@@ -320,35 +320,6 @@
 			</div>
 		{/if}
 
-		{#if chatListSortBy !== undefined }
-			{@const sortLabel =
-				chatListSortBy === ChatListSortBy.Created ?	$i18n.t("Creation") :
-				chatListSortBy === ChatListSortBy.Updated ? $i18n.t("Recent") :
-				$i18n.t("Alphabetical")
-			}
-			<div class="px-2 flex justify-center mb-1">
-				<button
-					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
-					on:click={()=>chatListSortBy= // cycle through enum values
-						(chatListSortBy.valueOf()+1) % (Object.keys(ChatListSortBy).length/2)
-					}>
-					<div class="flex self-center">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 24 24"	class="w-4 h-4"
-							fill="none" stroke-width="1.5" stroke="currentColor">
-							<path stroke-linecap="round" stroke-linejoin="round" d=
-								"M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
-							/>
-						</svg>
-					</div>
-					<div class="flex self-center flex-grow">
-						<div class=" self-center font-medium text-sm">{sortLabel}</div>
-					</div>
-				</button>
-			</div>
-		{/if}
-
 		<div class="relative flex flex-col flex-1 overflow-y-auto">
 			{#if !($settings.saveChatHistory ?? true)}
 				<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center">
@@ -779,6 +750,31 @@
 									<div class=" self-center font-medium">{$i18n.t('Archived Chats')}</div>
 								</button>
 
+								{#if chatListSortBy !== undefined }
+									{@const sortLabel =
+										chatListSortBy === ChatListSortBy.Created ? $i18n.t("Creation") :
+										chatListSortBy === ChatListSortBy.Updated ? $i18n.t("Recent") :
+										$i18n.t("Alphabetical")
+									}
+									<button
+										class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+										on:click={()=>chatListSortBy= // cycle through enum values
+											(chatListSortBy.valueOf()+1) % (Object.keys(ChatListSortBy).length/2)
+										}>
+										<div class=" self-center mr-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												viewBox="0 0 24 24"	class="w-5 h-5"
+												fill="none" stroke-width="1.5" stroke="currentColor">
+												<path stroke-linecap="round" stroke-linejoin="round" d=
+													"M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
+												/>
+											</svg>
+										</div>
+										<div class=" self-center font-medium">{sortLabel}</div>
+									</button>
+								{/if}
+
 								<button
 									class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
 									on:click={async () => {