enh: emoji folder icon

src/lib/components/layout/Sidebar.svelte

@@ -695,7 +695,7 @@
 			? `ml-[4.5rem] md:ml-0 `
 			: ' transition-all duration-300 '} shrink-0 text-gray-900 dark:text-gray-200 text-sm fixed top-0 left-0 overflow-x-hidden
         "
-		transition:slide={{ duration: 200, axis: 'x' }}
+		transition:slide={{ duration: 250, axis: 'x' }}
 		data-state={$showSidebar}
 	>
 		<div

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

@@ -38,6 +38,7 @@
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import FolderModal from './Folders/FolderModal.svelte';
 	import { goto } from '$app/navigation';
+	import Emoji from '$lib/components/common/Emoji.svelte';
 
 	export let open = false;
 
@@ -444,15 +445,31 @@
 				}}
 			>
 				<button
-					class="text-gray-300 dark:text-gray-600"
+					class="text-gray-300 dark:text-gray-600 transition-all"
 					on:click={(e) => {
 						e.stopPropagation();
 					}}
 				>
-					{#if open}
-						<ChevronDown className=" size-3" strokeWidth="2.5" />
+					{#if folders[folderId]?.meta?.icon}
+						<div class="flex group-hover:hidden transition-all">
+							<Emoji className="size-4" shortCode={folders[folderId].meta.icon} />
+						</div>
+
+						<div class="hidden group-hover:flex transition-all p-[1px]">
+							{#if open}
+								<ChevronDown className=" size-3.5" strokeWidth="2.5" />
+							{:else}
+								<ChevronRight className=" size-3.5" strokeWidth="2.5" />
+							{/if}
+						</div>
 					{:else}
-						<ChevronRight className=" size-3" strokeWidth="2.5" />
+						<div class="p-[1px]">
+							{#if open}
+								<ChevronDown className=" size-3.5" strokeWidth="2.5" />
+							{:else}
+								<ChevronRight className=" size-3.5" strokeWidth="2.5" />
+							{/if}
+						</div>
 					{/if}
 				</button>