Skip to content

Commit

Permalink
🎨 style: bookmarks UI update (#3479)
Browse files Browse the repository at this point in the history
* style: bookmarks update; style(Files): minor update

* style: update conversation bookmarks

* style: fix w TableCell
  • Loading branch information
berry-13 authored Jul 29, 2024
1 parent 3fd2592 commit 2d5f704
Show file tree
Hide file tree
Showing 15 changed files with 223 additions and 235 deletions.
24 changes: 12 additions & 12 deletions client/src/components/Bookmarks/BookmarkEditDialog.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { useRef, useState } from 'react';
import { DialogTrigger } from '@radix-ui/react-dialog';
import { TConversationTag, TConversation } from 'librechat-data-provider';
import DialogTemplate from '~/components/ui/DialogTemplate';
import { Dialog, DialogButton } from '~/components/ui/';
import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
import { OGDialog, OGDialogTrigger, OGDialogClose } from '~/components/ui/';
import BookmarkForm from './BookmarkForm';
import { useLocalize } from '~/hooks';
import { Spinner } from '../svg';
Expand Down Expand Up @@ -33,9 +32,9 @@ const BookmarkEditDialog = ({
};

return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{trigger}</DialogTrigger>
<DialogTemplate
<OGDialog open={open} onOpenChange={setOpen}>
<OGDialogTrigger asChild>{trigger}</OGDialogTrigger>
<OGDialogTemplate
title="Bookmark"
className="w-11/12 sm:w-1/4"
showCloseButton={false}
Expand All @@ -51,18 +50,19 @@ const BookmarkEditDialog = ({
/>
}
buttons={
<div className="mb-6 md:mb-2">
<DialogButton
<OGDialogClose asChild>
<button
type="submit"
disabled={isLoading}
onClick={handleSubmitForm}
className="bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600"
className="btn rounded bg-green-500 font-bold text-white transition-all hover:bg-green-600"
>
{isLoading ? <Spinner /> : localize('com_ui_save')}
</DialogButton>
</div>
</button>
</OGDialogClose>
}
/>
</Dialog>
</OGDialog>
);
};

Expand Down
4 changes: 2 additions & 2 deletions client/src/components/Bookmarks/BookmarkForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const BookmarkForm = ({
aria-invalid={!!errors.tag}
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none border-gray-100 px-3 py-2 dark:border-gray-600',
'flex h-10 max-h-10 w-full resize-none px-3 py-2',
removeFocusOutlines,
)}
placeholder=" "
Expand Down Expand Up @@ -158,7 +158,7 @@ const BookmarkForm = ({
/>
</div>
{conversation && (
<div className="flex w-full items-center">
<div className="mt-2 flex w-full items-center">
<Controller
name="addToConversation"
control={control}
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/Bookmarks/BookmarkItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const BookmarkItem: FC<MenuItemProps> = ({
<div
role="menuitem"
className={cn(
'group m-1.5 flex cursor-pointer gap-2 rounded px-1 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
'group m-1.5 flex cursor-pointer gap-2 rounded px-2 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
'hover:bg-black/5 dark:hover:bg-white/5',
highlightSelected && selected && 'bg-black/5 dark:bg-white/5',
)}
Expand All @@ -58,8 +58,8 @@ const BookmarkItem: FC<MenuItemProps> = ({
<div className="flex items-center justify-end">
<span
className={cn(
'ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200',
'dark:bg-gray-800 dark:text-white dark:ring-gray-100/50',
'ml-auto w-9 min-w-max whitespace-nowrap rounded-md bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600',
'dark:bg-gray-800 dark:text-white',
)}
aria-hidden="true"
>
Expand Down
15 changes: 12 additions & 3 deletions client/src/components/Bookmarks/DeleteBookmarkButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ import { TrashIcon } from '~/components/svg';
import { Label } from '~/components/ui';
import { useLocalize } from '~/hooks';

const DeleteBookmarkButton: FC<{ bookmark: string }> = ({ bookmark }) => {
const DeleteBookmarkButton: FC<{
bookmark: string;
tabIndex?: number;
onFocus?: () => void;
onBlur?: () => void;
}> = ({ bookmark, tabIndex = 0, onFocus, onBlur }) => {
const localize = useLocalize();
const { showToast } = useToastContext();

Expand Down Expand Up @@ -37,13 +42,17 @@ const DeleteBookmarkButton: FC<{ bookmark: string }> = ({ bookmark }) => {
title="Delete Bookmark"
confirmMessage={
<Label htmlFor="bookmark" className="text-left text-sm font-medium">
{localize('com_ui_bookmark_delete_confirm')} : {bookmark}
{localize('com_ui_bookmark_delete_confirm')} {bookmark}
</Label>
}
confirm={confirmDelete}
className="hover:text-gray-300 focus-visible:bg-gray-100 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
className="transition-color flex h-7 w-7 min-w-7 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
icon={<TrashIcon className="size-4" />}
tabIndex={tabIndex}
onFocus={onFocus}
onBlur={onBlur}
/>
);
};

export default DeleteBookmarkButton;
21 changes: 15 additions & 6 deletions client/src/components/Bookmarks/EditBookmarkButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,30 @@ import type { TConversationTag } from 'librechat-data-provider';
import BookmarkEditDialog from './BookmarkEditDialog';
import { EditIcon } from '~/components/svg';
import { useLocalize } from '~/hooks';

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/components/ui';
const EditBookmarkButton: FC<{ bookmark: TConversationTag }> = ({ bookmark }) => {

const EditBookmarkButton: FC<{
bookmark: TConversationTag;
tabIndex?: number;
onFocus?: () => void;
onBlur?: () => void;
}> = ({ bookmark, tabIndex = 0, onFocus, onBlur }) => {
const localize = useLocalize();
return (
<BookmarkEditDialog
bookmark={bookmark}
trigger={
<button className="size-4 hover:text-gray-300 focus-visible:bg-gray-100 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600">
<button
type="button"
className="transition-color flex h-7 w-7 min-w-7 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
tabIndex={tabIndex}
onFocus={onFocus}
onBlur={onBlur}
>
<TooltipProvider delayDuration={250}>
<Tooltip>
<TooltipTrigger asChild>
<span>
<EditIcon />
</span>
<EditIcon />
</TooltipTrigger>
<TooltipContent side="top" sideOffset={0}>
{localize('com_ui_edit')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const BookmarkMenuItems: FC<{
trigger={
<div
role="menuitem"
className="group m-1.5 flex cursor-pointer gap-2 rounded px-1 !pr-3.5 pb-2.5 pt-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
className="group m-1.5 flex cursor-pointer gap-2 rounded px-2 !pr-3.5 pb-2.5 pt-3 text-sm !opacity-100 hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
tabIndex={-1}
>
<div className="flex grow items-center justify-between gap-2">
Expand Down
76 changes: 25 additions & 51 deletions client/src/components/SidePanel/Bookmarks/BookmarkPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,72 +1,46 @@
import { BookmarkPlusIcon } from 'lucide-react';
import type { FC } from 'react';
import { useConversationTagsQuery, useRebuildConversationTagsMutation } from '~/data-provider';
import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui';
import { Button } from '~/components/ui';
import { BookmarkContext } from '~/Providers/BookmarkContext';
import { BookmarkEditDialog } from '~/components/Bookmarks';
import BookmarkTable from './BookmarkTable';
import { Spinner } from '~/components/svg';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils/';
import HoverCardSettings from '~/components/Nav/SettingsTabs/HoverCardSettings';

const BookmarkPanel: FC<{ open: boolean; onOpenChange: (open: boolean) => void }> = ({
open,
onOpenChange,
}) => {
const BookmarkPanel = () => {
const localize = useLocalize();
const { mutate, isLoading } = useRebuildConversationTagsMutation();
const { data } = useConversationTagsQuery();
const rebuildTags = () => {
mutate({});
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent
showCloseButton={true}
className={cn(
'overflow-x-auto shadow-2xl dark:bg-gray-700 dark:text-white md:max-h-[600px] md:min-h-[373px] md:w-[680px]',
)}
>
<DialogHeader>
<DialogTitle className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-200">
{localize('com_ui_bookmarks')}
</DialogTitle>
</DialogHeader>
<BookmarkContext.Provider value={{ bookmarks: data || [] }}>
<div className="p-0 sm:p-6 sm:pt-4">
<BookmarkTable />
<div className="mt-5 sm:mt-4" />
<div className="flex justify-between gap-2 pr-2 sm:pr-0">
<Button variant="outline" onClick={rebuildTags} className="text-sm">
{isLoading ? (
<Spinner />
) : (
<div className="flex gap-2">
{localize('com_ui_bookmarks_rebuild')}
<HoverCardSettings side="bottom" text="com_nav_info_bookmarks_rebuild" />
</div>
)}
</Button>

<div className="h-auto max-w-full overflow-x-hidden">
<BookmarkContext.Provider value={{ bookmarks: data || [] }}>
<BookmarkTable />
<div className="flex justify-between gap-2">
<Button variant="outline" onClick={rebuildTags} className="w-50 text-sm">
{isLoading ? (
<Spinner />
) : (
<div className="flex gap-2">
<BookmarkEditDialog
trigger={
<Button variant="outline" onClick={rebuildTags} className="text-sm">
<BookmarkPlusIcon className="mr-1 size-4" />
<div className="break-all">{localize('com_ui_bookmarks_new')}</div>
</Button>
}
/>
<Button variant="subtle" onClick={() => onOpenChange(!open)} className="text-sm">
{localize('com_ui_close')}
</Button>
{localize('com_ui_bookmarks_rebuild')}
<HoverCardSettings side="top" text="com_nav_info_bookmarks_rebuild" />
</div>
</div>
</div>
</BookmarkContext.Provider>
</DialogContent>
</Dialog>
)}
</Button>
<BookmarkEditDialog
trigger={
<Button variant="outline" onClick={rebuildTags} className="w-full text-sm">
<BookmarkPlusIcon className="mr-1 size-4" />
<div className="break-all">{localize('com_ui_bookmarks_new')}</div>
</Button>
}
/>
</div>
</BookmarkContext.Provider>
</div>
);
};
export default BookmarkPanel;
80 changes: 59 additions & 21 deletions client/src/components/SidePanel/Bookmarks/BookmarkTable.tsx
Original file line number Diff line number Diff line change
@@ -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(() => {
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit 2d5f704

Please sign in to comment.