enh: emoji folder icon

src/lib/components/chat/Placeholder/FolderTitle.svelte

@@ -21,6 +21,8 @@
 	import FolderMenu from '$lib/components/layout/Sidebar/Folders/FolderMenu.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Emoji from '$lib/components/common/Emoji.svelte';
+	import EmojiPicker from '$lib/components/common/EmojiPicker.svelte';
 
 	export let folder = null;
 
@@ -63,6 +65,25 @@
 		}
 	};
 
+	const updateIconHandler = async (iconName) => {
+		const res = await updateFolderById(localStorage.token, folder.id, {
+			meta: {
+				icon: iconName
+			}
+		}).catch((error) => {
+			toast.error(`${error}`);
+			return null;
+		});
+
+		if (res) {
+			folder.meta = { ...folder.meta, icon: iconName };
+
+			toast.success($i18n.t('Folder updated successfully'));
+			selectedFolder.set(folder);
+			onUpdate(folder);
+		}
+	};
+
 	const deleteHandler = async () => {
 		const res = await deleteFolderById(localStorage.token, folder.id).catch((error) => {
 			toast.error(`${error}`);
@@ -116,9 +137,23 @@
 
 	<div class="mb-3 px-6 @md:max-w-3xl justify-between w-full flex relative group items-center">
 		<div class="text-center flex gap-3.5 items-center">
-			<div class=" rounded-full bg-gray-50 dark:bg-gray-800 p-3 w-fit">
-				<Folder className="size-4.5" strokeWidth="2" />
-			</div>
+			<EmojiPicker
+				onClose={() => {}}
+				onSubmit={(name) => {
+					console.log(name);
+					updateIconHandler(name);
+				}}
+			>
+				<button
+					class=" rounded-full bg-gray-50 dark:bg-gray-800 size-11 flex justify-center items-center"
+				>
+					{#if folder?.meta?.icon}
+						<Emoji className="size-6" shortCode={folder.meta.icon} />
+					{:else}
+						<Folder className="size-4.5" strokeWidth="2" />
+					{/if}
+				</button>
+			</EmojiPicker>
 
 			<div class="text-3xl">
 				{folder.name}