enh: pinned chats support

src/lib/components/layout/Sidebar/ChatItem.svelte

@@ -11,9 +11,10 @@
 		cloneChatById,
 		deleteChatById,
 		getChatList,
+		getChatListByTagName,
 		updateChatById
 	} from '$lib/apis/chats';
-	import { chatId, chats, mobile, showSidebar } from '$lib/stores';
+	import { chatId, chats, mobile, pinnedChats, showSidebar } from '$lib/stores';
 
 	import ChatMenu from './ChatMenu.svelte';
 	import ShareChatModal from '$lib/components/chat/ShareChatModal.svelte';
@@ -40,6 +41,7 @@
 				title: _title
 			});
 			await chats.set(await getChatList(localStorage.token));
+			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
 
@@ -52,12 +54,14 @@
 		if (res) {
 			goto(`/c/${res.id}`);
 			await chats.set(await getChatList(localStorage.token));
+			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
 
 	const archiveChatHandler = async (id) => {
 		await archiveChatById(localStorage.token, id);
 		await chats.set(await getChatList(localStorage.token));
+		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 	};
 
 	const focusEdit = async (node: HTMLInputElement) => {
@@ -233,6 +237,9 @@
 					onClose={() => {
 						dispatch('unselect');
 					}}
+					on:change={async () => {
+						await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
+					}}
 				>
 					<button
 						aria-label="Chat Menu"

src/lib/components/layout/Sidebar/ChatMenu.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
 	import { flyAndScale } from '$lib/utils/transitions';
-	import { getContext } from 'svelte';
+	import { getContext, createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
@@ -11,6 +13,9 @@
 	import Share from '$lib/components/icons/Share.svelte';
 	import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
+	import Bookmark from '$lib/components/icons/Bookmark.svelte';
+	import BookmarkSlash from '$lib/components/icons/BookmarkSlash.svelte';
+	import { addTagById, deleteTagById, getTagsById } from '$lib/apis/chats';
 
 	const i18n = getContext('i18n');
 
@@ -24,6 +29,28 @@
 	export let chatId = '';
 
 	let show = false;
+	let pinned = false;
+
+	const pinHandler = async () => {
+		if (pinned) {
+			await deleteTagById(localStorage.token, chatId, 'pinned');
+		} else {
+			await addTagById(localStorage.token, chatId, 'pinned');
+		}
+		dispatch('change');
+	};
+
+	const checkPinned = async () => {
+		pinned = (
+			await getTagsById(localStorage.token, chatId).catch(async (error) => {
+				return [];
+			})
+		).find((tag) => tag.name === 'pinned');
+	};
+
+	$: if (show) {
+		checkPinned();
+	}
 </script>
 
 <Dropdown
@@ -46,6 +73,21 @@
 			align="start"
 			transition={flyAndScale}
 		>
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+				on:click={() => {
+					pinHandler();
+				}}
+			>
+				{#if pinned}
+					<BookmarkSlash strokeWidth="2" />
+					<div class="flex items-center">{$i18n.t('Unpin')}</div>
+				{:else}
+					<Bookmark strokeWidth="2" />
+					<div class="flex items-center">{$i18n.t('Pin')}</div>
+				{/if}
+			</DropdownMenu.Item>
+
 			<DropdownMenu.Item
 				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
 				on:click={() => {