enh: ability to sort folder chats

This commit is contained in:
Timothy Jaeryang Baek 2025-08-04 17:37:33 +04:00
parent ae2de6b09c
commit 3f3a69568f

View file

@ -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