enh: ability to sort folder chats

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

@@ -5,6 +5,8 @@
 	import dayjs from 'dayjs';
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
 	import { getTimeRange } from '$lib/utils';
+	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
+	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 
 	dayjs.extend(localizedFormat);
 
@@ -20,15 +22,86 @@
 				...chat,
 				time_range: getTimeRange(chat.updated_at)
 			}));
+
+			chatList.sort((a, b) => {
+				if (direction === 'asc') {
+					return a[orderBy] > b[orderBy] ? 1 : -1;
+				} else {
+					return a[orderBy] < b[orderBy] ? 1 : -1;
+				}
+			});
+		}
+	};
+
+	const setSortKey = (key) => {
+		if (orderBy === key) {
+			direction = direction === 'asc' ? 'desc' : 'asc';
+		} else {
+			orderBy = key;
+			direction = 'asc';
 		}
+
+		init();
 	};
 
+	let orderBy = 'updated_at';
+	let direction = 'desc'; // 'asc' or 'desc'
+
 	$: if (chats) {
 		init();
 	}
 </script>
 
 {#if chatList}
+	{#if chatList.length > 0}
+		<div class="flex text-xs font-medium mb-1 items-center -mr-0.5">
+			<button
+				class="px-1.5 py-1 cursor-pointer select-none basis-3/5"
+				on:click={() => setSortKey('title')}
+			>
+				<div class="flex gap-1.5 items-center">
+					{$i18n.t('Title')}
+
+					{#if orderBy === 'title'}
+						<span class="font-normal"
+							>{#if direction === 'asc'}
+								<ChevronUp className="size-2" />
+							{:else}
+								<ChevronDown className="size-2" />
+							{/if}
+						</span>
+					{:else}
+						<span class="invisible">
+							<ChevronUp className="size-2" />
+						</span>
+					{/if}
+				</div>
+			</button>
+			<button
+				class="px-1.5 py-1 cursor-pointer select-none hidden sm:flex sm:basis-2/5 justify-end"
+				on:click={() => setSortKey('updated_at')}
+			>
+				<div class="flex gap-1.5 items-center">
+					{$i18n.t('Updated at')}
+
+					{#if orderBy === 'updated_at'}
+						<span class="font-normal"
+							>{#if direction === 'asc'}
+								<ChevronUp className="size-2" />
+							{:else}
+								<ChevronDown className="size-2" />
+							{/if}
+						</span>
+					{:else}
+						<span class="invisible">
+							<ChevronUp className="size-2" />
+						</span>
+					{/if}
+				</div>
+			</button>
+		</div>
+	{/if}
+
 	<div class="text-left text-sm w-full mb-3">
 		{#if chatList.length === 0}
 			<div