Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added toggle button to sort chats by title, creation date, or recently updated. #1932

Closed
wants to merge 4 commits into from
Closed

Added toggle button to sort chats by title, creation date, or recently updated. #1932

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cc9335c
Sort chats by title, creation, or recent
albertso May 2, 2024
7593687
Moved sorting button into user menu
albertso May 4, 2024
bf144eb
Moved list sort button into search box
albertso May 4, 2024
6884757
Better aria label, shifted enum order, whitespace correction
albertso May 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
41 changes: 40 additions & 1 deletion src/lib/components/layout/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
let chatTitleEditId = null;
let chatTitle = '';

enum ChatListSortBy { Updated, Created, Title }
let chatListSortBy = ChatListSortBy.Updated

let showArchivedChatsModal = false;
let showShareChatModal = false;
let showDropdown = false;
Expand Down Expand Up @@ -379,13 +382,45 @@
</div>

<input
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm dark:text-gray-300 dark:bg-gray-950 outline-none"
class="w-full rounded-r-xl py-1.5 pl-2.5 text-sm dark:text-gray-300 dark:bg-gray-950 outline-none"
placeholder={$i18n.t('Search')}
bind:value={search}
on:focus={() => {
enrichChatsWithContent($chats);
}}
/>
{#if chatListSortBy !== undefined }
{@const sortLabel =
chatListSortBy === ChatListSortBy.Created ? $i18n.t("Sort by Creation") :
chatListSortBy === ChatListSortBy.Updated ? $i18n.t("Sort by Update") :
$i18n.t("Sort Alphabetically")
}
{@const sortIcon =
chatListSortBy === ChatListSortBy.Created ? // calendar
"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
: chatListSortBy === ChatListSortBy.Updated ? // clock
"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
: // arrows-up-down
"M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
}
<button
aria-label="{sortLabel}"
class="self-center dark:hover:text-white transition p-2 mr-2"
on:click={()=>chatListSortBy= // cycle through enum values
(chatListSortBy.valueOf()+1) % (Object.keys(ChatListSortBy).length/2)
}>
<Tooltip placement="top" content={sortLabel} touch={false}>
<div class="self-center opacity-50 flex flex-row">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" class="w-4 h-4"
fill="none" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d={sortIcon} />
</svg>
</div>
</Tooltip>
</button>
{/if}
</div>
</div>

Expand Down Expand Up @@ -436,6 +471,10 @@

return title.includes(query) || contentMatches;
}
}).sort((a,b)=>{ return (
chatListSortBy === ChatListSortBy.Title ? a.title.localeCompare(b.title) :
chatListSortBy === ChatListSortBy.Created ? a.created_at - b.created_at :
1 ) // unaltered
}) as chat, i}
<div class=" w-full pr-2 relative group">
{#if chatTitleEditId === chat.id}
Expand Down