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

🎨 style: bookmarks UI update (#3479)

Browse source 
* style: bookmarks update; style(Files): minor update

* style: update conversation bookmarks

* style: fix w TableCell
This commit is contained in:
Marco Beretta 2024-07-29 19:25:36 -04:00 • committed by GitHub
parent 3fd25920d4
commit 2d5f704695
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 223 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,13 +1,16 @@
import React, { useCallback, useEffect, useState } from 'react';
import type { ConversationTagsResponse, TConversationTag } from 'librechat-data-provider';
import { Table, TableHeader, TableBody, TableRow, TableCell, Input, Button } from '~/components/ui';
import { BookmarkContext, useBookmarkContext } from '~/Providers/BookmarkContext';
import BookmarkTableRow from './BookmarkTableRow';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
const BookmarkTable = () => {
const localize = useLocalize();
const [rows, setRows] = useState<ConversationTagsResponse>([]);
const [pageIndex, setPageIndex] = useState(0);
const [searchQuery, setSearchQuery] = useState('');
const pageSize = 10;
const { bookmarks } = useBookmarkContext();
useEffect(() => {
@ -27,30 +30,65 @@ const BookmarkTable = () => {
return <BookmarkTableRow key={row.tag} moveRow={moveRow} row={row} position={position} />;
}, []);
const filteredRows = rows.filter((row) =>
row.tag.toLowerCase().includes(searchQuery.toLowerCase()),
);
const currentRows = filteredRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
return (
<BookmarkContext.Provider value={{ bookmarks }}>
<div
className={cn(
'container',
'relative h-[300px] overflow-auto',
'-mx-4 w-auto ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg',
)}
>
<table className="min-w-full divide-gray-300">
<thead className="sticky top-0 z-10 border-b bg-white">
<tr className="text-left text-sm font-semibold text-gray-900">
<th className="w-96 px-3 py-3.5 pl-6">
<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 dark:border-gray-700"
/>
</div>
<div className="overflow-y-auto rounded-md border border-black/10 dark:border-white/10">
<Table className="table-fixed border-separate border-spacing-0">
<TableHeader>
<TableRow>
<TableCell className="w-full px-3 py-3.5 pl-6 dark:bg-gray-700">
<div>{localize('com_ui_bookmarks_title')}</div>
</th>
<th className="w-28 px-3 py-3.5 sm:pl-6">
</TableCell>
<TableCell className="w-full px-3 py-3.5 dark:bg-gray-700 sm:pl-6">
<div>{localize('com_ui_bookmarks_count')}</div>
</th>
<th className="flex-grow px-3 py-3.5 sm:pl-6"> </th>
</tr>
</thead>
<tbody className="text-sm">{rows.map((row, i) => renderRow(row, i))}</tbody>
</table>
</TableCell>
</TableRow>
</TableHeader>
<TableBody>{currentRows.map((row, i) => renderRow(row, i))}</TableBody>
</Table>
</div>
<div className="flex items-center justify-between py-4">
<div className="pl-1 text-gray-400">
{localize('com_ui_showing')} {pageIndex * pageSize + 1} -{' '}
{Math.min((pageIndex + 1) * pageSize, filteredRows.length)} {localize('com_ui_of')}{' '}
{filteredRows.length}
</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>
</BookmarkContext.Provider>
);