Merge pull request #12364 from silentoplayz/archive-chats-option

feat: Added Archived Chats option in Chats settings section

src/lib/components/chat/Settings/Chats.svelte

@@ -16,6 +16,7 @@
 	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
+	import ArchivedChatsModal from '$lib/components/layout/Sidebar/ArchivedChatsModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -26,6 +27,7 @@
 
 	let showArchiveConfirm = false;
 	let showDeleteConfirm = false;
+	let showArchivedChatsModal = false;
 
 	let chatImportInputElement: HTMLInputElement;
 
@@ -95,8 +97,16 @@
 		await chats.set(await getChatList(localStorage.token, $currentChatPage));
 		scrollPaginationEnabled.set(true);
 	};
+	
+	const handleArchivedChatsChange = async () => {
+		currentChatPage.set(1);
+		await chats.set(await getChatList(localStorage.token, $currentChatPage));
+		scrollPaginationEnabled.set(true);
+	};
 </script>
 
+<ArchivedChatsModal bind:show={showArchivedChatsModal} on:change={handleArchivedChatsChange} />
+
 <div class="flex flex-col h-full justify-between space-y-3 text-sm">
 	<div class=" space-y-2 overflow-y-scroll max-h-[28rem] lg:max-h-full">
 		<div class="flex flex-col">
@@ -157,6 +167,32 @@
 		<hr class=" border-gray-100 dark:border-gray-850" />
 
 		<div class="flex flex-col">
+			<button
+				class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
+				on:click={() => {
+					showArchivedChatsModal = true;
+				}}
+			>
+				<div class=" self-center mr-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 24 24"
+						fill="currentColor"
+						class="size-4"
+					>
+						<path
+							d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375Z"
+						/>
+						<path
+							fill-rule="evenodd"
+							d="m3.087 9 .54 9.176A3 3 0 0 0 6.62 21h10.757a3 3 0 0 0 2.995-2.824L20.913 9H3.087ZM12 10.5a.75.75 0 0 1 .75.75v4.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72v-4.94a.75.75 0 0 1 .75-.75Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Archived Chats')}</div>
+			</button>
+
 			{#if showArchiveConfirm}
 				<div class="flex justify-between rounded-md items-center py-2 px-3.5 w-full transition">
 					<div class="flex items-center space-x-3">