Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-17 00:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: focus retained on key press for sorts in archived chat table

Browse source
This commit is contained in:
Dustin Healy 2025-12-15 04:57:58 -08:00
parent 49284dd993
commit b201be41c3
1 changed files with 32 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

67
client/src/components/Nav/SettingsTabs/General/ArchivedChatsTable.tsx
View file

@ -56,14 +56,6 @@ export default function ArchivedChatsTable({
refetchOnMount: false, refetchOnMount: false,
}); });
const handleSort = useCallback((sortField: string, sortOrder: 'asc' | 'desc') => {
setQueryParams((prev) => ({
...prev,
sortBy: sortField as 'title' | 'createdAt',
sortDirection: sortOrder,
}));
}, []);
const handleFilterChange = useCallback((value: string) => { const handleFilterChange = useCallback((value: string) => {
const encodedValue = encodeURIComponent(value.trim()); const encodedValue = encodeURIComponent(value.trim());
setQueryParams((prev) => ({ setQueryParams((prev) => ({
@ -133,25 +125,28 @@ export default function ArchivedChatsTable({
() => [ () => [
{ {
accessorKey: 'title', accessorKey: 'title',
header: () => { header: ({ column }) => {
const isSorted = queryParams.sortBy === 'title'; const sortState = column.getIsSorted();
const sortDirection = queryParams.sortDirection; let SortIcon = ArrowUpDown;
let ariaSort: 'ascending' | 'descending' | 'none' = 'none';
if (sortState === 'desc') {
SortIcon = ArrowDown;
ariaSort = 'descending';
} else if (sortState === 'asc') {
SortIcon = ArrowUp;
ariaSort = 'ascending';
}
return ( return (
<Button <Button
variant="ghost" variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm" className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
onClick={() => aria-sort={ariaSort}
handleSort('title', isSorted && sortDirection === 'asc' ? 'desc' : 'asc') aria-label={localize('com_nav_archive_name_sort')}
} aria-current={sortState ? 'true' : 'false'}
> >
{localize('com_nav_archive_name')} {localize('com_nav_archive_name')}
{isSorted && sortDirection === 'asc' && ( <SortIcon className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
<ArrowUp className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
)}
{isSorted && sortDirection === 'desc' && (
<ArrowDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
)}
{!isSorted && <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />}
</Button> </Button>
); );
}, },
@ -180,26 +175,28 @@ export default function ArchivedChatsTable({
}, },
{ {
accessorKey: 'createdAt', accessorKey: 'createdAt',
header: () => { header: ({ column }) => {
const isSorted = queryParams.sortBy === 'createdAt'; const sortState = column.getIsSorted();
const sortDirection = queryParams.sortDirection; let SortIcon = ArrowUpDown;
let ariaSort: 'ascending' | 'descending' | 'none' = 'none';
if (sortState === 'desc') {
SortIcon = ArrowDown;
ariaSort = 'descending';
} else if (sortState === 'asc') {
SortIcon = ArrowUp;
ariaSort = 'ascending';
}
return ( return (
<Button <Button
variant="ghost" variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm" className="px-2 py-0 text-xs hover:bg-surface-hover sm:px-2 sm:py-2 sm:text-sm"
onClick={() => aria-sort={ariaSort}
handleSort('createdAt', isSorted && sortDirection === 'asc' ? 'desc' : 'asc')
}
aria-label={localize('com_nav_archive_created_at_sort')} aria-label={localize('com_nav_archive_created_at_sort')}
aria-current={sortState ? 'true' : 'false'}
> >
{localize('com_nav_archive_created_at')} {localize('com_nav_archive_created_at')}
{isSorted && sortDirection === 'asc' && ( <SortIcon className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
<ArrowUp className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
)}
{isSorted && sortDirection === 'desc' && (
<ArrowDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />
)}
{!isSorted && <ArrowUpDown className="ml-2 h-3 w-4 sm:h-4 sm:w-4" />}
</Button> </Button>
); );
}, },
@ -270,7 +267,7 @@ export default function ArchivedChatsTable({
}, },
}, },
], ],
[handleSort, isSmallScreen, localize, queryParams, unarchiveMutation], [isSmallScreen, localize, unarchiveMutation],
); );
return ( return (