From 3be493f5b0f0c7b1ee099540c2536dcd1ff2d3e3 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 14 Jul 2026 04:53:37 -0400
Subject: [PATCH] refac

---
 src/lib/components/channel/Navbar.svelte      |   4 +-
 .../chat/Settings/ArchivedChats.svelte        | 383 ++++++++++
 .../chat/Settings/DataControls.svelte         |  46 +-
 src/lib/components/chat/SettingsModal.svelte  | 700 ++++++++----------
 src/lib/components/layout/Sidebar.svelte      |  29 +-
 src/lib/stores/index.ts                       |   3 +-
 src/routes/(app)/notes/+layout.svelte         |   2 +-
 7 files changed, 709 insertions(+), 458 deletions(-)
 create mode 100644 src/lib/components/chat/Settings/ArchivedChats.svelte

diff --git a/src/lib/components/channel/Navbar.svelte b/src/lib/components/channel/Navbar.svelte
index 660b2175cc..11927bcb5f 100644
--- a/src/lib/components/channel/Navbar.svelte
+++ b/src/lib/components/channel/Navbar.svelte
@@ -2,7 +2,7 @@
 	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
-	import { mobile, showArchivedChats, showSidebar, user } from '$lib/stores';
+	import { mobile, showSettings, showSidebar, user } from '$lib/stores';
 
 	import { slide } from 'svelte/transition';
 	import { page } from '$app/stores';
@@ -202,7 +202,7 @@
 							help={true}
 							on:show={(e) => {
 								if (e.detail === 'archived-chat') {
-									showArchivedChats.set(true);
+									showSettings.set('archived_chats');
 								}
 							}}
 						>
diff --git a/src/lib/components/chat/Settings/ArchivedChats.svelte b/src/lib/components/chat/Settings/ArchivedChats.svelte
new file mode 100644
index 0000000000..67742adb77
--- /dev/null
+++ b/src/lib/components/chat/Settings/ArchivedChats.svelte
@@ -0,0 +1,383 @@
+<script lang="ts">
+	// @ts-ignore
+	import fileSaver from 'file-saver';
+	const { saveAs } = fileSaver;
+
+	import dayjs from 'dayjs';
+	import calendar from 'dayjs/plugin/calendar';
+	import localizedFormat from 'dayjs/plugin/localizedFormat';
+	import { getContext, onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import { goto } from '$app/navigation';
+	import { toast } from 'svelte-sonner';
+
+	import {
+		archiveChatById,
+		deleteChatById,
+		getAllArchivedChats,
+		getArchivedChatCount,
+		getArchivedChatList,
+		unarchiveAllChats
+	} from '$lib/apis/chats';
+	import { chatId, showSettings } from '$lib/stores';
+	import { refreshChatList } from '$lib/stores/chat-list';
+	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Loader from '$lib/components/common/Loader.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+
+	dayjs.extend(localizedFormat);
+	dayjs.extend(calendar);
+
+	const i18n: Writable<any> = getContext('i18n');
+
+	let loading = false;
+	let chatList: any[] | null = null;
+	let chatCount: number | null = null;
+	let page = 1;
+
+	let query = '';
+	let orderBy = 'updated_at';
+	let direction = 'desc';
+
+	let allChatsLoaded = false;
+	let chatListLoading = false;
+	let searchDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	let selectedChatId: string | null = null;
+	let showDeleteConfirmDialog = false;
+	let showUnarchiveAllConfirmDialog = false;
+
+	const getFilter = () => ({
+		...(query ? { query } : {}),
+		...(orderBy ? { order_by: orderBy } : {}),
+		...(direction ? { direction } : {})
+	});
+
+	const loadChats = async () => {
+		page = 1;
+		chatList = null;
+		chatList = await getArchivedChatList(localStorage.token, page, getFilter());
+		allChatsLoaded = (chatList ?? []).length === 0;
+		chatCount = await getArchivedChatCount(localStorage.token);
+	};
+
+	const searchHandler = () => {
+		if (searchDebounceTimeout) {
+			clearTimeout(searchDebounceTimeout);
+		}
+
+		if (query === '') {
+			loadChats();
+		} else {
+			searchDebounceTimeout = setTimeout(loadChats, 300);
+		}
+	};
+
+	const loadMoreChats = async () => {
+		chatListLoading = true;
+		page += 1;
+
+		const newChatList = await getArchivedChatList(localStorage.token, page, getFilter());
+		allChatsLoaded = newChatList.length === 0;
+
+		if (newChatList.length > 0) {
+			chatList = [...(chatList || []), ...newChatList];
+		}
+
+		chatListLoading = false;
+	};
+
+	const setSortKey = async (key: string) => {
+		if (orderBy === key) {
+			direction = direction === 'asc' ? 'desc' : 'asc';
+		} else {
+			orderBy = key;
+			direction = 'asc';
+		}
+
+		await loadChats();
+	};
+
+	const exportChatsHandler = async () => {
+		const chats = await getAllArchivedChats(localStorage.token);
+		const blob = new Blob([JSON.stringify(chats)], {
+			type: 'application/json'
+		});
+		saveAs(blob, `${$i18n.t('archived-chat-export')}-${Date.now()}.json`);
+	};
+
+	const unarchiveHandler = async (id: string) => {
+		await archiveChatById(localStorage.token, id).catch((error) => {
+			toast.error(`${error}`);
+		});
+
+		chatList = chatList?.filter((chat) => chat.id !== id) ?? null;
+		if (chatCount !== null) chatCount -= 1;
+		await refreshChatList(localStorage.token);
+	};
+
+	const deleteHandler = async () => {
+		if (!selectedChatId) return;
+
+		const id = selectedChatId;
+		await deleteChatById(localStorage.token, id).catch((error) => {
+			toast.error(`${error}`);
+		});
+
+		chatList = chatList?.filter((chat) => chat.id !== id) ?? null;
+		if (chatCount !== null) chatCount -= 1;
+		selectedChatId = null;
+
+		if ($chatId === id) {
+			await goto('/');
+			chatId.set('');
+		}
+
+		await refreshChatList(localStorage.token);
+	};
+
+	const unarchiveAllHandler = async () => {
+		loading = true;
+		try {
+			await unarchiveAllChats(localStorage.token);
+			toast.success($i18n.t('All chats have been unarchived.'));
+			await loadChats();
+			await refreshChatList(localStorage.token);
+		} catch (error) {
+			toast.error(`${error}`);
+		} finally {
+			loading = false;
+		}
+	};
+
+	onMount(loadChats);
+</script>
+
+<ConfirmDialog
+	bind:show={showDeleteConfirmDialog}
+	on:confirm={() => {
+		deleteHandler();
+	}}
+/>
+
+<ConfirmDialog
+	bind:show={showUnarchiveAllConfirmDialog}
+	message={$i18n.t('Are you sure you want to unarchive all archived chats?')}
+	confirmLabel={$i18n.t('Unarchive All')}
+	on:confirm={() => {
+		unarchiveAllHandler();
+	}}
+/>
+
+<div id="tab-archived-chats" class="flex flex-col h-full justify-between text-sm">
+	<div class="space-y-3 overflow-y-scroll max-h-[28rem] md:max-h-full">
+		<div>
+			<div class="flex items-center gap-2 text-base font-normal">
+				{$i18n.t('Archived Chats')}
+				<span class="text-base font-normal text-gray-500 dark:text-gray-500">
+					{chatCount ?? ''}
+				</span>
+			</div>
+
+			<div class="text-xs text-gray-500 mt-0.5">
+				{$i18n.t('Manage conversations you have archived.')}
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2 rounded-xl bg-gray-100 dark:bg-gray-850 px-2">
+			<input
+				class="w-full bg-transparent py-1.5 text-xs outline-hidden placeholder:text-gray-400 dark:placeholder:text-gray-600"
+				bind:value={query}
+				on:input={searchHandler}
+				placeholder={$i18n.t('Search Chats')}
+				maxlength="500"
+			/>
+			{#if query}
+				<button
+					class="rounded-full p-1 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
+					type="button"
+					aria-label={$i18n.t('Clear search')}
+					on:click={() => {
+						query = '';
+						searchHandler();
+					}}
+				>
+					<XMark className="size-3" strokeWidth="2" />
+				</button>
+			{/if}
+		</div>
+
+		{#if chatList === null}
+			<div class="flex min-h-20 items-center justify-center">
+				<Spinner className="size-5" />
+			</div>
+		{:else if chatList.length === 0}
+			<div
+				class="flex min-h-20 items-center justify-center px-4 text-center text-xs text-gray-500 dark:text-gray-400"
+			>
+				{$i18n.t('You have no archived conversations.')}
+			</div>
+		{:else}
+			<div class="flex items-center px-1 text-xs text-gray-500 dark:text-gray-500">
+				<button
+					class="flex flex-1 items-center gap-1 py-1 text-left"
+					type="button"
+					on:click={() => setSortKey('title')}
+				>
+					{$i18n.t('Title')}
+					{#if orderBy === 'title'}
+						{#if direction === 'asc'}
+							<ChevronUp className="size-2" />
+						{:else}
+							<ChevronDown className="size-2" />
+						{/if}
+					{/if}
+				</button>
+				<button
+					class="hidden w-24 items-center justify-end gap-1 py-1 text-right sm:flex"
+					type="button"
+					on:click={() => setSortKey('updated_at')}
+				>
+					{$i18n.t('Updated at')}
+					{#if orderBy === 'updated_at'}
+						{#if direction === 'asc'}
+							<ChevronUp className="size-2" />
+						{:else}
+							<ChevronDown className="size-2" />
+						{/if}
+					{/if}
+				</button>
+			</div>
+
+			<div class="divide-y divide-gray-50 dark:divide-gray-850/80">
+				{#each chatList as chat (chat.id)}
+					<div class="flex items-center gap-2 py-2 text-xs">
+						<a
+							class="min-w-0 flex-1 truncate text-gray-800 hover:text-black dark:text-gray-200 dark:hover:text-white"
+							href={`/c/${chat.id}`}
+							on:click={(event) => {
+								event.preventDefault();
+								showSettings.set(false);
+								goto(`/c/${chat.id}`);
+							}}
+						>
+							{chat?.title}
+						</a>
+						<div class="hidden w-24 shrink-0 justify-end text-gray-500 dark:text-gray-500 sm:flex">
+							{$i18n.t(
+								dayjs(chat?.updated_at * 1000).calendar(null, {
+									sameDay: '[Today]',
+									nextDay: '[Tomorrow]',
+									nextWeek: 'dddd',
+									lastDay: '[Yesterday]',
+									lastWeek: '[Last] dddd',
+									sameElse: 'L'
+								})
+							)}
+						</div>
+						<div class="flex shrink-0 items-center text-gray-600 dark:text-gray-300">
+							<Tooltip content={$i18n.t('Unarchive Chat')}>
+								<button
+									class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
+									type="button"
+									aria-label={$i18n.t('Unarchive Chat')}
+									on:click={() => {
+										unarchiveHandler(chat.id);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15"
+										/>
+									</svg>
+								</button>
+							</Tooltip>
+							<Tooltip content={$i18n.t('Delete Chat')}>
+								<button
+									class="rounded-lg p-1 hover:bg-gray-100 dark:hover:bg-gray-850"
+									type="button"
+									aria-label={$i18n.t('Delete Chat')}
+									on:click={() => {
+										selectedChatId = chat.id;
+										showDeleteConfirmDialog = true;
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										class="size-4"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+										/>
+									</svg>
+								</button>
+							</Tooltip>
+						</div>
+					</div>
+				{/each}
+			</div>
+
+			{#if !allChatsLoaded}
+				<Loader
+					on:visible={() => {
+						if (!chatListLoading) {
+							loadMoreChats();
+						}
+					}}
+				>
+					<div class="flex w-full items-center justify-center gap-2 py-1 text-xs animate-pulse">
+						<Spinner className="size-4" />
+						<div>{$i18n.t('Loading...')}</div>
+					</div>
+				</Loader>
+			{/if}
+		{/if}
+	</div>
+
+	<div class="flex justify-end gap-1.5 pt-3 text-sm font-normal">
+		{#if query === ''}
+			<button
+				class="px-3.5 py-1.5 text-sm font-normal hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-300 dark:outline-gray-800 rounded-full disabled:opacity-50"
+				disabled={loading || chatCount === 0}
+				type="button"
+				on:click={() => {
+					showUnarchiveAllConfirmDialog = true;
+				}}
+			>
+				{#if loading}
+					<Spinner className="size-4" />
+				{:else}
+					{$i18n.t('Unarchive All')}
+				{/if}
+			</button>
+
+			<button
+				class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full disabled:opacity-50"
+				disabled={loading || chatCount === 0}
+				type="button"
+				on:click={exportChatsHandler}
+			>
+				{$i18n.t('Export')}
+			</button>
+		{/if}
+	</div>
+</div>
diff --git a/src/lib/components/chat/Settings/DataControls.svelte b/src/lib/components/chat/Settings/DataControls.svelte
index e71796da24..71b20106cc 100644
--- a/src/lib/components/chat/Settings/DataControls.svelte
+++ b/src/lib/components/chat/Settings/DataControls.svelte
@@ -2,24 +2,14 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import {
-		chatId,
-		user,
-		settings
-	} from '$lib/stores';
+	import { user } from '$lib/stores';
 	import { refreshChatList } from '$lib/stores/chat-list';
 
-	import {
-		archiveAllChats,
-		deleteAllChats,
-		getAllChats,
-		importChats
-	} from '$lib/apis/chats';
+	import { archiveAllChats, deleteAllChats, getAllChats, importChats } from '$lib/apis/chats';
 	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
-	import { onMount, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
-	import ArchivedChatsModal from '$lib/components/layout/ArchivedChatsModal.svelte';
 	import SharedChatsModal from '$lib/components/layout/SharedChatsModal.svelte';
 	import FilesModal from '$lib/components/layout/FilesModal.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
@@ -33,7 +23,6 @@
 
 	let showArchiveConfirmDialog = false;
 	let showDeleteConfirmDialog = false;
-	let showArchivedChatsModal = false;
 	let showSharedChatsModal = false;
 	let showFilesModal = false;
 
@@ -118,22 +107,8 @@
 
 		await refreshChatList(localStorage.token);
 	};
-
-	const handleArchivedChatsChange = async () => {
-		await refreshChatList(localStorage.token);
-	};
 </script>
 
-<ArchivedChatsModal
-	bind:show={showArchivedChatsModal}
-	onUpdate={handleArchivedChatsChange}
-	onDelete={(id) => {
-		if ($chatId === id) {
-			goto('/');
-			chatId.set('');
-		}
-	}}
-/>
 <SharedChatsModal bind:show={showSharedChatsModal} />
 <FilesModal bind:show={showFilesModal} />
 
@@ -205,21 +180,6 @@
 				</div>
 			{/if}
 
-			<div>
-				<div class="py-0.5 flex w-full justify-between">
-					<div class="self-center text-xs">{$i18n.t('Archived Chats')}</div>
-					<button
-						class="p-1 px-3 text-xs flex rounded-sm transition"
-						on:click={() => {
-							showArchivedChatsModal = true;
-						}}
-						type="button"
-					>
-						<span class="self-center">{$i18n.t('Manage')}</span>
-					</button>
-				</div>
-			</div>
-
 			<div>
 				<div class="py-0.5 flex w-full justify-between">
 					<div class="self-center text-xs">{$i18n.t('Shared Chats')}</div>
diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 70f5977483..2ad3ca9683 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { getContext, onMount, tick } from 'svelte';
+	import { getContext, onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
 	import { toast } from 'svelte-sonner';
 	import { config, models, settings, user } from '$lib/stores';
 	import { updateUserSettings } from '$lib/apis/users';
@@ -13,9 +14,9 @@
 	import Interface from './Settings/Interface.svelte';
 	import Audio from './Settings/Audio.svelte';
 	import DataControls from './Settings/DataControls.svelte';
+	import ArchivedChats from './Settings/ArchivedChats.svelte';
 	import Personalization from './Settings/Personalization.svelte';
 	import Search from '../icons/Search.svelte';
-	import XMark from '../icons/XMark.svelte';
 	import Connections from './Settings/Connections.svelte';
 	import Integrations from './Settings/Integrations.svelte';
 	import DatabaseSettings from '../icons/DatabaseSettings.svelte';
@@ -28,8 +29,10 @@
 	import Face from '../icons/Face.svelte';
 	import AppNotification from '../icons/AppNotification.svelte';
 	import UserBadgeCheck from '../icons/UserBadgeCheck.svelte';
+	import ArchiveBox from '../icons/ArchiveBox.svelte';
+	import ChevronLeft from '../icons/ChevronLeft.svelte';
 
-	const i18n = getContext('i18n');
+	const i18n: Writable<any> = getContext('i18n');
 
 	export let show: boolean | string = false;
 
@@ -38,10 +41,8 @@
 			selectedTab = show;
 			show = true;
 		}
-		addScrollListener();
 	} else {
 		selectedTab = 'general';
-		removeScrollListener();
 	}
 
 	interface SettingsTab {
@@ -347,8 +348,6 @@
 				'archive chats',
 				'archiveallchats',
 				'archivechats',
-				'archived chats',
-				'archivedchats',
 				'chat activity',
 				'chat history',
 				'chat settings',
@@ -376,6 +375,25 @@
 				'messagehistory'
 			]
 		},
+		{
+			id: 'archived_chats',
+			title: 'Archived Chats',
+			keywords: [
+				'archive',
+				'archive chat',
+				'archive chats',
+				'archived',
+				'archived chat',
+				'archived chats',
+				'archivedchat',
+				'archivedchats',
+				'conversation archive',
+				'message archive',
+				'unarchive',
+				'unarchive chat',
+				'unarchive chats'
+			]
+		},
 		{
 			id: 'account',
 			title: 'Account',
@@ -476,11 +494,11 @@
 		}
 	];
 
-	let availableSettings = [];
-	let filteredSettings = [];
+	let availableSettings: SettingsTab[] = [];
+	let filteredSettings: string[] = [];
 
 	let search = '';
-	let searchDebounceTimeout;
+	let searchDebounceTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	const getAvailableSettings = () => {
 		return allSettings.filter((tab) => {
@@ -513,10 +531,11 @@
 	const setFilteredSettings = () => {
 		filteredSettings = availableSettings
 			.filter((tab) => {
+				const query = search.toLowerCase().trim();
 				return (
-					search === '' ||
-					tab.title.toLowerCase().includes(search.toLowerCase().trim()) ||
-					tab.keywords.some((keyword) => keyword.includes(search.toLowerCase().trim()))
+					query === '' ||
+					tab.title.toLowerCase().includes(query) ||
+					tab.keywords.some((keyword) => keyword.includes(query))
 				);
 			})
 			.map((tab) => tab.id);
@@ -526,6 +545,20 @@
 		}
 	};
 
+	const saveSettings = async (updated: Record<string, any>) => {
+		console.log(updated);
+		await settings.set({ ...$settings, ...updated });
+		await models.set(await getModels());
+		await updateUserSettings(localStorage.token, { ui: $settings });
+	};
+
+	const getModels = async () => {
+		return await _getModels(
+			localStorage.token,
+			$config?.features?.enable_direct_connections ? ($settings?.directConnections ?? null) : null
+		);
+	};
+
 	const searchDebounceHandler = () => {
 		if (searchDebounceTimeout) {
 			clearTimeout(searchDebounceTimeout);
@@ -536,47 +569,15 @@
 		}, 100);
 	};
 
-	const saveSettings = async (updated) => {
-		console.log(updated);
-		await settings.set({ ...$settings, ...updated });
-		await models.set(await getModels());
-		await updateUserSettings(localStorage.token, { ui: $settings });
-	};
-
-	const getModels = async () => {
-		return await _getModels(
-			localStorage.token,
-			$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
-		);
-	};
+	const tabButtonClass = (active: boolean) =>
+		`flex items-center gap-1.5 h-7 px-2 md:w-full shrink-0 rounded-lg text-xs text-left transition-colors duration-75 ${
+			active
+				? 'font-medium text-gray-900 dark:text-white bg-gray-100 dark:bg-white/6'
+				: 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+		}`;
 
 	let selectedTab = 'general';
 
-	// Function to handle sideways scrolling
-	const scrollHandler = (event) => {
-		const settingsTabsContainer = document.getElementById('settings-tabs-container');
-		if (settingsTabsContainer) {
-			event.preventDefault(); // Prevent default vertical scrolling
-			settingsTabsContainer.scrollLeft += event.deltaY; // Scroll sideways
-		}
-	};
-
-	const addScrollListener = async () => {
-		await tick();
-		const settingsTabsContainer = document.getElementById('settings-tabs-container');
-		if (settingsTabsContainer) {
-			settingsTabsContainer.addEventListener('wheel', scrollHandler);
-		}
-	};
-
-	const removeScrollListener = async () => {
-		await tick();
-		const settingsTabsContainer = document.getElementById('settings-tabs-container');
-		if (settingsTabsContainer) {
-			settingsTabsContainer.removeEventListener('wheel', scrollHandler);
-		}
-	};
-
 	onMount(() => {
 		availableSettings = getAvailableSettings();
 		setFilteredSettings();
@@ -588,356 +589,279 @@
 	});
 </script>
 
-<Modal size="2xl" bind:show>
-	<div class="text-gray-700 dark:text-gray-100 mx-1">
-		<div class=" flex justify-between dark:text-gray-300 px-4 pt-4 pb-1 md:pb-2">
-			<div class=" text-lg font-normal self-center">{$i18n.t('Settings')}</div>
-			<button
-				aria-label={$i18n.t('Close settings modal')}
-				class="self-center"
-				on:click={() => {
-					show = false;
-				}}
-			>
-				<XMark className="w-5 h-5"></XMark>
-			</button>
-		</div>
+<Modal
+	size="full"
+	className="w-full max-w-3xl lg:max-w-4xl xl:max-w-5xl mx-4 md:mx-0 flex flex-col md:flex-row max-h-[85vh] lg:max-h-[90vh] md:h-[35rem] lg:h-[42rem] xl:h-[46rem] bg-white dark:bg-gray-900 rounded-4xl"
+	bind:show
+>
+	<nav
+		id="settings-tabs-container"
+		class="shrink-0 min-w-0 md:min-h-0 flex md:block border-b md:border-b-0 md:border-r border-gray-200 dark:border-white/6 md:w-[15rem]"
+	>
+		<button
+			class="flex items-center gap-1.5 h-7 px-2 m-1 md:mb-0 md:w-[calc(100%-0.5rem)] shrink-0 rounded-lg text-xs text-gray-400 dark:text-gray-600 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-75"
+			type="button"
+			on:click={() => {
+				show = false;
+			}}
+		>
+			<ChevronLeft className="size-3" strokeWidth="2" />
+			<span>{$i18n.t('Back')}</span>
+		</button>
 
-		<div class="flex flex-col md:flex-row w-full pt-1 pb-4">
+		<div
+			class="tabs flex min-w-0 flex-1 overflow-x-auto md:overflow-x-hidden md:overflow-y-auto md:flex-col p-1 pl-0 md:pl-1 gap-px"
+		>
 			<div
-				role="tablist"
-				id="settings-tabs-container"
-				class="tabs flex flex-row overflow-x-auto gap-2 mx-2.5 md:pr-3.5 md:gap-1 md:flex-col flex-1 md:flex-none md:w-47 md:min-h-[min(42rem,calc(100dvh-10rem))] md:max-h-[min(42rem,calc(100dvh-10rem))] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
+				class="hidden md:flex items-center gap-1.5 h-7 px-2 md:w-full shrink-0 rounded-lg text-xs bg-gray-50/70 dark:bg-white/[0.03] mb-2"
 			>
-				<div
-					class="hidden md:flex w-full rounded-xl px-2.5 gap-1.5 bg-gray-100/80 dark:bg-gray-850/80 backdrop-blur-2xl my-0.75 mb-1.25"
-					id="settings-search"
-				>
-					<div class="self-center rounded-l-xl bg-transparent">
-						<Search
-							className="size-3.5"
-							strokeWidth={($settings?.highContrastMode ?? false) ? '3' : '1.5'}
-						/>
-					</div>
-					<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
-					<input
-						class={`w-full py-1 text-sm bg-transparent dark:text-gray-300 outline-hidden
-								${($settings?.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`}
-						bind:value={search}
-						id="search-input-settings-modal"
-						on:input={searchDebounceHandler}
-						placeholder={$i18n.t('Search')}
+				<div class="self-center rounded-l-xl bg-transparent">
+					<Search
+						className="size-3.5"
+						strokeWidth={($settings?.highContrastMode ?? false) ? '3' : '1.5'}
 					/>
 				</div>
-				{#if filteredSettings.length > 0}
-					{#each filteredSettings as tabId (tabId)}
-						{#if tabId === 'general'}
+				<label class="sr-only" for="search-input-settings-modal">{$i18n.t('Search')}</label>
+				<input
+					class={`w-full py-1 text-xs bg-transparent dark:text-gray-300 outline-hidden
+						${($settings?.highContrastMode ?? false) ? 'placeholder-gray-800' : ''}`}
+					bind:value={search}
+					id="search-input-settings-modal"
+					on:input={searchDebounceHandler}
+					placeholder={$i18n.t('Search')}
+				/>
+			</div>
+
+			<span
+				class="hidden md:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mt-1.5 mb-0.5"
+			>
+				{$i18n.t('Personal')}
+			</span>
+
+			{#if filteredSettings.length > 0}
+				{#each filteredSettings as tabId (tabId)}
+					{#if tabId === 'general'}
+						<button
+							role="tab"
+							aria-controls="tab-general"
+							aria-selected={selectedTab === 'general'}
+							class={tabButtonClass(selectedTab === 'general')}
+							on:click={() => {
+								selectedTab = 'general';
+							}}
+						>
+							<SettingsAlt className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('General')}</span>
+						</button>
+					{:else if tabId === 'interface'}
+						<button
+							role="tab"
+							aria-controls="tab-interface"
+							aria-selected={selectedTab === 'interface'}
+							class={tabButtonClass(selectedTab === 'interface')}
+							on:click={() => {
+								selectedTab = 'interface';
+							}}
+						>
+							<AppNotification className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('Interface')}</span>
+						</button>
+					{:else if tabId === 'connections'}
+						{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
 							<button
 								role="tab"
-								aria-controls="tab-general"
-								aria-selected={selectedTab === 'general'}
-								class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'general'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
+								aria-controls="tab-connections"
+								aria-selected={selectedTab === 'connections'}
+								class={tabButtonClass(selectedTab === 'connections')}
 								on:click={() => {
-									selectedTab = 'general';
+									selectedTab = 'connections';
 								}}
 							>
-								<div class=" self-center mr-2">
-									<SettingsAlt strokeWidth="2" />
-								</div>
-								<div class=" self-center">{$i18n.t('General')}</div>
-							</button>
-						{:else if tabId === 'interface'}
-							<button
-								role="tab"
-								aria-controls="tab-interface"
-								aria-selected={selectedTab === 'interface'}
-								class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'interface'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-								on:click={() => {
-									selectedTab = 'interface';
-								}}
-							>
-								<div class=" self-center mr-2">
-									<AppNotification strokeWidth="2" />
-								</div>
-								<div class=" self-center">{$i18n.t('Interface')}</div>
-							</button>
-						{:else if tabId === 'connections'}
-							{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
-								<button
-									role="tab"
-									aria-controls="tab-connections"
-									aria-selected={selectedTab === 'connections'}
-									class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'connections'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-									on:click={() => {
-										selectedTab = 'connections';
-									}}
-								>
-									<div class=" self-center mr-2">
-										<Link strokeWidth="2" />
-									</div>
-									<div class=" self-center">{$i18n.t('Connections')}</div>
-								</button>
-							{/if}
-						{:else if tabId === 'tools'}
-							{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
-								<button
-									role="tab"
-									aria-controls="tab-tools"
-									aria-selected={selectedTab === 'tools'}
-									class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'tools'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-									on:click={() => {
-										selectedTab = 'tools';
-									}}
-								>
-									<div class=" self-center mr-2">
-										<WrenchAlt strokeWidth="2" />
-									</div>
-									<div class=" self-center">{$i18n.t('Integrations')}</div>
-								</button>
-							{/if}
-						{:else if tabId === 'personalization'}
-							<button
-								role="tab"
-								aria-controls="tab-personalization"
-								aria-selected={selectedTab === 'personalization'}
-								class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'personalization'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-								on:click={() => {
-									selectedTab = 'personalization';
-								}}
-							>
-								<div class=" self-center mr-2">
-									<Face strokeWidth="2" />
-								</div>
-								<div class=" self-center">{$i18n.t('Personalization')}</div>
-							</button>
-						{:else if tabId === 'audio'}
-							<button
-								role="tab"
-								aria-controls="tab-audio"
-								aria-selected={selectedTab === 'audio'}
-								class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'audio'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-								on:click={() => {
-									selectedTab = 'audio';
-								}}
-							>
-								<div class=" self-center mr-2">
-									<SoundHigh strokeWidth="2" />
-								</div>
-								<div class=" self-center">{$i18n.t('Audio')}</div>
-							</button>
-						{:else if tabId === 'data_controls'}
-							<button
-								role="tab"
-								aria-controls="tab-data-controls"
-								aria-selected={selectedTab === 'data_controls'}
-								class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'data_controls'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-								on:click={() => {
-									selectedTab = 'data_controls';
-								}}
-							>
-								<div class=" self-center mr-2">
-									<DatabaseSettings strokeWidth="2" />
-								</div>
-								<div class=" self-center">{$i18n.t('Data Controls')}</div>
-							</button>
-						{:else if tabId === 'account'}
-							<button
-								role="tab"
-								aria-controls="tab-account"
-								aria-selected={selectedTab === 'account'}
-								class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'account'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-								on:click={() => {
-									selectedTab = 'account';
-								}}
-							>
-								<div class=" self-center mr-2">
-									<UserCircle strokeWidth="2" />
-								</div>
-								<div class=" self-center">{$i18n.t('Account')}</div>
-							</button>
-						{:else if tabId === 'about'}
-							<button
-								role="tab"
-								aria-controls="tab-about"
-								aria-selected={selectedTab === 'about'}
-								class={`px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none flex text-left transition
-								${
-									selectedTab === 'about'
-										? ($settings?.highContrastMode ?? false)
-											? 'dark:bg-gray-800 bg-gray-200'
-											: ''
-										: ($settings?.highContrastMode ?? false)
-											? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
-								}`}
-								on:click={() => {
-									selectedTab = 'about';
-								}}
-							>
-								<div class=" self-center mr-2">
-									<InfoCircle strokeWidth="2" />
-								</div>
-								<div class=" self-center">{$i18n.t('About')}</div>
+								<Link className="size-3.5" strokeWidth="2" />
+								<span>{$i18n.t('Connections')}</span>
 							</button>
 						{/if}
-					{/each}
-				{:else}
-					<div class="text-center text-gray-500 mt-4">
-						{$i18n.t('No results found')}
-					</div>
-				{/if}
-				{#if $user?.role === 'admin'}
-					<a
-						href="/admin/settings"
-						draggable="false"
-						class="px-0.5 md:px-2.5 py-1 min-w-fit rounded-xl flex-1 md:flex-none md:mt-auto flex select-none text-left transition {$settings?.highContrastMode
-							? 'hover:bg-gray-200 dark:hover:bg-gray-800'
-							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
-						on:click={async (e) => {
-							e.preventDefault();
-							await goto('/admin/settings');
-							show = false;
-						}}
-					>
-						<div class=" self-center mr-2">
-							<UserBadgeCheck strokeWidth="2" />
-						</div>
-						<div class=" self-center">{$i18n.t('Admin Settings')}</div>
-					</a>
-				{/if}
-			</div>
-			<div
-				class="flex-1 px-3.5 md:pl-0 md:pr-4.5 md:min-h-[min(42rem,calc(100dvh-10rem))] max-h-[min(42rem,calc(100dvh-10rem))] overflow-y-auto"
-			>
-				{#if selectedTab === 'general'}
-					<General
-						{getModels}
-						{saveSettings}
-						on:save={() => {
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
-				{:else if selectedTab === 'interface'}
-					<Interface
-						{saveSettings}
-						on:save={() => {
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
-				{:else if selectedTab === 'connections'}
-					<Connections
-						saveSettings={async (updated) => {
-							await saveSettings(updated);
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
-				{:else if selectedTab === 'tools'}
-					<Integrations
-						saveSettings={async (updated) => {
-							await saveSettings(updated);
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
-				{:else if selectedTab === 'personalization'}
-					<Personalization
-						{saveSettings}
-						on:save={() => {
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
-				{:else if selectedTab === 'audio'}
-					<Audio
-						{saveSettings}
-						on:save={() => {
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
-				{:else if selectedTab === 'data_controls'}
-					<DataControls {saveSettings} />
-				{:else if selectedTab === 'account'}
-					<Account
-						{saveSettings}
-						saveHandler={() => {
-							toast.success($i18n.t('Settings saved successfully!'));
-						}}
-					/>
-				{:else if selectedTab === 'about'}
-					<About />
-				{/if}
-			</div>
+					{:else if tabId === 'tools'}
+						{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
+							<button
+								role="tab"
+								aria-controls="tab-tools"
+								aria-selected={selectedTab === 'tools'}
+								class={tabButtonClass(selectedTab === 'tools')}
+								on:click={() => {
+									selectedTab = 'tools';
+								}}
+							>
+								<WrenchAlt className="size-3.5" strokeWidth="2" />
+								<span>{$i18n.t('Integrations')}</span>
+							</button>
+						{/if}
+					{:else if tabId === 'personalization'}
+						<button
+							role="tab"
+							aria-controls="tab-personalization"
+							aria-selected={selectedTab === 'personalization'}
+							class={tabButtonClass(selectedTab === 'personalization')}
+							on:click={() => {
+								selectedTab = 'personalization';
+							}}
+						>
+							<Face className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('Personalization')}</span>
+						</button>
+					{:else if tabId === 'audio'}
+						<button
+							role="tab"
+							aria-controls="tab-audio"
+							aria-selected={selectedTab === 'audio'}
+							class={tabButtonClass(selectedTab === 'audio')}
+							on:click={() => {
+								selectedTab = 'audio';
+							}}
+						>
+							<SoundHigh className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('Audio')}</span>
+						</button>
+					{:else if tabId === 'data_controls'}
+						<button
+							role="tab"
+							aria-controls="tab-data-controls"
+							aria-selected={selectedTab === 'data_controls'}
+							class={tabButtonClass(selectedTab === 'data_controls')}
+							on:click={() => {
+								selectedTab = 'data_controls';
+							}}
+						>
+							<DatabaseSettings className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('Data Controls')}</span>
+						</button>
+					{:else if tabId === 'archived_chats'}
+						<button
+							role="tab"
+							aria-controls="tab-archived-chats"
+							aria-selected={selectedTab === 'archived_chats'}
+							class={tabButtonClass(selectedTab === 'archived_chats')}
+							on:click={() => {
+								selectedTab = 'archived_chats';
+							}}
+						>
+							<ArchiveBox className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('Archived Chats')}</span>
+						</button>
+					{:else if tabId === 'account'}
+						<button
+							role="tab"
+							aria-controls="tab-account"
+							aria-selected={selectedTab === 'account'}
+							class={tabButtonClass(selectedTab === 'account')}
+							on:click={() => {
+								selectedTab = 'account';
+							}}
+						>
+							<UserCircle className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('Account')}</span>
+						</button>
+					{:else if tabId === 'about'}
+						<button
+							role="tab"
+							aria-controls="tab-about"
+							aria-selected={selectedTab === 'about'}
+							class={tabButtonClass(selectedTab === 'about')}
+							on:click={() => {
+								selectedTab = 'about';
+							}}
+						>
+							<InfoCircle className="size-3.5" strokeWidth="2" />
+							<span>{$i18n.t('About')}</span>
+						</button>
+					{/if}
+				{/each}
+			{:else}
+				<div class="text-center text-gray-500 mt-4">
+					{$i18n.t('No results found')}
+				</div>
+			{/if}
+			{#if $user?.role === 'admin'}
+				<span
+					class="hidden md:block text-[0.625rem] text-gray-400 dark:text-gray-600 px-2 mt-2 mb-0.5"
+				>
+					{$i18n.t('Admin')}
+				</span>
+				<a
+					href="/admin/settings"
+					draggable="false"
+					class="flex items-center gap-1.5 h-7 px-2 md:w-full shrink-0 rounded-lg text-xs text-left transition-colors duration-75 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 select-none"
+					on:click={async (e) => {
+						e.preventDefault();
+						await goto('/admin/settings');
+						show = false;
+					}}
+				>
+					<UserBadgeCheck className="size-3.5" strokeWidth="2" />
+					<span>{$i18n.t('Admin Settings')}</span>
+				</a>
+			{/if}
 		</div>
+	</nav>
+
+	<div class="flex-1 overflow-y-auto scrollbar-none min-h-0 p-4 md:px-5">
+		{#if selectedTab === 'general'}
+			<General
+				{getModels}
+				{saveSettings}
+				on:save={() => {
+					toast.success($i18n.t('Settings saved successfully!'));
+				}}
+			/>
+		{:else if selectedTab === 'interface'}
+			<Interface
+				{saveSettings}
+				on:save={() => {
+					toast.success($i18n.t('Settings saved successfully!'));
+				}}
+			/>
+		{:else if selectedTab === 'connections'}
+			<Connections
+				saveSettings={async (updated: Record<string, any>) => {
+					await saveSettings(updated);
+					toast.success($i18n.t('Settings saved successfully!'));
+				}}
+			/>
+		{:else if selectedTab === 'tools'}
+			<Integrations
+				saveSettings={async (updated: Record<string, any>) => {
+					await saveSettings(updated);
+					toast.success($i18n.t('Settings saved successfully!'));
+				}}
+			/>
+		{:else if selectedTab === 'personalization'}
+			<Personalization
+				{saveSettings}
+				on:save={() => {
+					toast.success($i18n.t('Settings saved successfully!'));
+				}}
+			/>
+		{:else if selectedTab === 'audio'}
+			<Audio
+				{saveSettings}
+				on:save={() => {
+					toast.success($i18n.t('Settings saved successfully!'));
+				}}
+			/>
+		{:else if selectedTab === 'data_controls'}
+			<DataControls {saveSettings} />
+		{:else if selectedTab === 'archived_chats'}
+			<ArchivedChats />
+		{:else if selectedTab === 'account'}
+			<Account
+				{saveSettings}
+				saveHandler={() => {
+					toast.success($i18n.t('Settings saved successfully!'));
+				}}
+			/>
+		{:else if selectedTab === 'about'}
+			<About />
+		{/if}
 	</div>
 </Modal>
 
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 3250ce98f3..d44c2edac2 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -15,7 +15,6 @@
 		showSidebar,
 		showSearch,
 		mobile,
-		showArchivedChats,
 		pinnedChats,
 		pinnedNotes,
 		temporaryChatEnabled,
@@ -57,7 +56,6 @@
 	import { createNoteHandler } from '$lib/components/notes/utils';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
-	import ArchivedChatsModal from './ArchivedChatsModal.svelte';
 	import UserMenu from './Sidebar/UserMenu.svelte';
 	import ChatItem from './Sidebar/ChatItem.svelte';
 	import Spinner from '../common/Spinner.svelte';
@@ -704,19 +702,6 @@
 	const isWindows = /Windows/i.test(navigator.userAgent);
 </script>
 
-<ArchivedChatsModal
-	bind:show={$showArchivedChats}
-	onUpdate={async () => {
-		await initChatList();
-	}}
-	onDelete={(id) => {
-		if ($chatId === id) {
-			goto('/');
-			chatId.set('');
-		}
-	}}
-/>
-
 <ChannelModal
 	bind:show={showCreateChannel}
 	onSubmit={async (payload: any) => {
@@ -971,7 +956,7 @@
 							showActiveUsers={false}
 							on:show={(e) => {
 								if (e.detail === 'archived-chat') {
-									showArchivedChats.set(true);
+									showSettings.set('archived_chats');
 								}
 							}}
 						>
@@ -1050,7 +1035,7 @@
 				<a href="/" class="flex flex-1 px-0.5" on:click={newChatHandler}>
 					<div
 						id="sidebar-webui-name"
-						class=" self-center font-normal text-gray-850 dark:text-white "
+						class=" self-center font-normal text-gray-850 dark:text-white"
 					>
 						{$WEBUI_NAME}
 					</div>
@@ -1106,7 +1091,7 @@
 							</div>
 
 							<div class="flex flex-1 self-center translate-y-[0.5px]">
-								<div class=" self-center text-sm ">{$i18n.t('New Chat')}</div>
+								<div class=" self-center text-sm">{$i18n.t('New Chat')}</div>
 							</div>
 
 							<HotkeyHint name="newChat" className=" group-hover:visible invisible" />
@@ -1128,7 +1113,7 @@
 							</div>
 
 							<div class="flex flex-1 self-center translate-y-[0.5px]">
-								<div class=" self-center text-sm ">{$i18n.t('Search')}</div>
+								<div class=" self-center text-sm">{$i18n.t('Search')}</div>
 							</div>
 							<HotkeyHint name="search" className=" group-hover:visible invisible" />
 						</button>
@@ -1204,7 +1189,7 @@
 										</div>
 
 										<div class="flex self-center translate-y-[0.5px]">
-											<div class=" self-center text-sm ">{$i18n.t(meta.label)}</div>
+											<div class=" self-center text-sm">{$i18n.t(meta.label)}</div>
 										</div>
 									</a>
 								</div>
@@ -1585,7 +1570,7 @@
 				<div
 					class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
 				></div>
-				<div class="flex flex-col ">
+				<div class="flex flex-col">
 					{#if $user !== undefined && $user !== null}
 						<UserMenu
 							role={$user?.role}
@@ -1594,7 +1579,7 @@
 							className="w-[calc(var(--sidebar-width)-1rem)]"
 							on:show={(e) => {
 								if (e.detail === 'archived-chat') {
-									showArchivedChats.set(true);
+									showSettings.set('archived_chats');
 								}
 							}}
 						>
diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts
index 18bd5c922d..7ba3fd54b5 100644
--- a/src/lib/stores/index.ts
+++ b/src/lib/stores/index.ts
@@ -91,9 +91,8 @@ export const sidebarWidth = writable(245);
 
 export const showSidebar = writable(false);
 export const showSearch = writable(false);
-export const showSettings = writable(false);
+export const showSettings: Writable<boolean | string> = writable(false);
 export const showShortcuts = writable(false);
-export const showArchivedChats = writable(false);
 export const showChangelog = writable(false);
 
 export const showControls = writable(false);
diff --git a/src/routes/(app)/notes/+layout.svelte b/src/routes/(app)/notes/+layout.svelte
index 2ee8287966..1942b3d576 100644
--- a/src/routes/(app)/notes/+layout.svelte
+++ b/src/routes/(app)/notes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, getContext } from 'svelte';
-	import { WEBUI_NAME, showSidebar, functions, config, user, showArchivedChats } from '$lib/stores';
+	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { goto } from '$app/navigation';
 
 	const i18n = getContext('i18n');