🎨 style: bookmarks UI update (#3479)

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

* style: update conversation bookmarks

* style: fix w TableCell

client/src/components/Bookmarks/BookmarkEditDialog.tsx

@@ -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';
@@ -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}
@@ -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>
   );
 };
 

client/src/components/Bookmarks/BookmarkForm.tsx

@@ -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=" "
@@ -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}

client/src/components/Bookmarks/BookmarkItem.tsx

@@ -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',
       )}
@@ -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"
             >

client/src/components/Bookmarks/DeleteBookmarkButton.tsx

@@ -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();
 
@@ -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;

client/src/components/Bookmarks/EditBookmarkButton.tsx

@@ -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')}