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

🎨 feat: enhance UI & accessibility in file handling components (#5086)

Browse source 
* ✨ feat: Add localization for page display and enhance button styles

* ✨ refactor: improve image preview component styles

* ✨ refactor: enhance modal close behavior and prevent refocus on certain elements

* ✨ refactor: enhance file row layout and improve image preview animation
This commit is contained in:
Marco Beretta 2024-12-23 11:14:40 +01:00 • committed by GitHub
parent bdb222d5f4
commit dfe5498301
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 466 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

99
client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
View file

@ -50,56 +50,57 @@ const BookmarkTable = () => {
const currentRows = filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
return (
<BookmarkContext.Provider value={{ bookmarks }}>
<div className="flex items-center gap-4 py-4">
<Input
placeholder={localize('com_ui_bookmarks_filter')}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full border-border-light placeholder:text-text-secondary"
/>
</div>
<div className="overflow-y-auto rounded-md border border-border-light">
<Table className="table-fixed border-separate border-spacing-0">
<TableHeader>
<TableRow>
<TableCell className="w-full bg-header-primary px-3 py-3.5 pl-6">
<div>{localize('com_ui_bookmarks_title')}</div>
</TableCell>
<TableCell className="w-full bg-header-primary px-3 py-3.5 sm:pl-6">
<div>{localize('com_ui_bookmarks_count')}</div>
</TableCell>
</TableRow>
</TableHeader>
<TableBody>{currentRows.map((row) => renderRow(row))}</TableBody>
</Table>
</div>
<div className="flex items-center justify-between py-4">
<div className="pl-1 text-text-secondary">
{localize('com_ui_showing')} {pageIndex * pageSize + 1} -{' '}
{Math.min((pageIndex + 1) * pageSize, filteredRows.length)} {localize('com_ui_of')}{' '}
{filteredRows.length}
<div className=" mt-2 space-y-2">
<div className="flex items-center gap-4">
<Input
aria-label={localize('com_ui_bookmarks_filter')}
placeholder={localize('com_ui_bookmarks_filter')}
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<div className="flex items-center space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
disabled={pageIndex === 0}
>
{localize('com_ui_prev')}
</Button>
<Button
variant="outline"
size="sm"
onClick={() =>
setPageIndex((prev) =>
(prev + 1) * pageSize < filteredRows.length ? prev + 1 : prev,
)
}
disabled={(pageIndex + 1) * pageSize >= filteredRows.length}
>
{localize('com_ui_next')}
</Button>
<div className="overflow-y-auto rounded-md border border-border-light">
<Table className="table-fixed border-separate border-spacing-0">
<TableHeader>
<TableRow>
<TableCell className="w-full bg-header-primary px-3 py-3.5 pl-6">
<div>{localize('com_ui_bookmarks_title')}</div>
</TableCell>
<TableCell className="w-full bg-header-primary px-3 py-3.5 sm:pl-6">
<div>{localize('com_ui_bookmarks_count')}</div>
</TableCell>
</TableRow>
</TableHeader>
<TableBody>{currentRows.map((row) => renderRow(row))}</TableBody>
</Table>
</div>
<div className="flex items-center justify-between py-4">
<div className="pl-1 text-text-secondary">
{localize('com_ui_page')} {pageIndex + 1} {localize('com_ui_of')}{' '}
{Math.ceil(filteredRows.length / pageSize)}
</div>
<div className="flex items-center space-x-2">
<Button
variant="outline"
size="sm"
onClick={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
disabled={pageIndex === 0}
>
{localize('com_ui_prev')}
</Button>
<Button
variant="outline"
size="sm"
onClick={() =>
setPageIndex((prev) =>
(prev + 1) * pageSize < filteredRows.length ? prev + 1 : prev,
)
}
disabled={(pageIndex + 1) * pageSize >= filteredRows.length}
>
{localize('com_ui_next')}
</Button>
</div>
</div>
</div>
</BookmarkContext.Provider>