style: remove DeleteBookmarkButton and EditBookmarkButton components; update translations for bookmark deletion confirmation

client/src/components/Bookmarks/DeleteBookmarkButton.tsx

@@ -1,87 +0,0 @@
-import { useCallback, useState } from 'react';
-import {
-  Button,
-  TrashIcon,
-  Label,
-  OGDialog,
-  OGDialogTrigger,
-  TooltipAnchor,
-  OGDialogTemplate,
-  useToastContext,
-} from '@librechat/client';
-import type { FC } from 'react';
-import { useDeleteConversationTagMutation } from '~/data-provider';
-import { NotificationSeverity } from '~/common';
-import { useLocalize } from '~/hooks';
-
-const DeleteBookmarkButton: FC<{
-  bookmark: string;
-  tabIndex?: number;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}> = ({ bookmark, tabIndex = 0, onFocus, onBlur }) => {
-  const localize = useLocalize();
-  const { showToast } = useToastContext();
-  const [open, setOpen] = useState(false);
-
-  const deleteBookmarkMutation = useDeleteConversationTagMutation({
-    onSuccess: () => {
-      showToast({
-        message: localize('com_ui_bookmarks_delete_success'),
-      });
-    },
-    onError: () => {
-      showToast({
-        message: localize('com_ui_bookmarks_delete_error'),
-        severity: NotificationSeverity.ERROR,
-      });
-    },
-  });
-
-  const confirmDelete = useCallback(async () => {
-    await deleteBookmarkMutation.mutateAsync(bookmark);
-  }, [bookmark, deleteBookmarkMutation]);
-
-  return (
-    <>
-      <OGDialog open={open} onOpenChange={setOpen}>
-        <OGDialogTrigger asChild>
-          <TooltipAnchor
-            description={localize('com_ui_delete')}
-            render={
-              <Button
-                variant="ghost"
-                aria-label={localize('com_ui_bookmarks_delete')}
-                tabIndex={tabIndex}
-                onFocus={onFocus}
-                onBlur={onBlur}
-                onClick={() => setOpen(!open)}
-                className="h-8 w-8 p-0"
-              >
-                <TrashIcon />
-              </Button>
-            }
-          />
-        </OGDialogTrigger>
-        <OGDialogTemplate
-          showCloseButton={false}
-          title={localize('com_ui_bookmarks_delete')}
-          className="w-11/12 max-w-lg"
-          main={
-            <Label className="text-left text-sm font-medium">
-              {localize('com_ui_bookmark_delete_confirm')} {bookmark}
-            </Label>
-          }
-          selection={{
-            selectHandler: confirmDelete,
-            selectClasses:
-              'bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-800 text-white',
-            selectText: localize('com_ui_delete'),
-          }}
-        />
-      </OGDialog>
-    </>
-  );
-};
-
-export default DeleteBookmarkButton;

client/src/components/Bookmarks/EditBookmarkButton.tsx

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import { TooltipAnchor, OGDialogTrigger, EditIcon, Button } from '@librechat/client';
-import type { TConversationTag } from 'librechat-data-provider';
-import type { FC } from 'react';
-import BookmarkEditDialog from './BookmarkEditDialog';
-import { useLocalize } from '~/hooks';
-
-const EditBookmarkButton: FC<{
-  bookmark: TConversationTag;
-  tabIndex?: number;
-  onFocus?: () => void;
-  onBlur?: () => void;
-}> = ({ bookmark, tabIndex = 0, onFocus, onBlur }) => {
-  const localize = useLocalize();
-  const [open, setOpen] = useState(false);
-
-  return (
-    <BookmarkEditDialog
-      context="EditBookmarkButton"
-      bookmark={bookmark}
-      open={open}
-      setOpen={setOpen}
-    >
-      <OGDialogTrigger asChild>
-        <TooltipAnchor
-          description={localize('com_ui_edit')}
-          render={
-            <Button
-              variant="ghost"
-              aria-label={localize('com_ui_bookmarks_edit')}
-              tabIndex={tabIndex}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              onClick={() => setOpen(!open)}
-              className="h-8 w-8 p-0"
-            >
-              <EditIcon />
-            </Button>
-          }
-        />
-      </OGDialogTrigger>
-    </BookmarkEditDialog>
-  );
-};
-
-export default EditBookmarkButton;

client/src/components/Bookmarks/index.ts

@@ -1,6 +1,4 @@
-export { default as DeleteBookmarkButton } from './DeleteBookmarkButton';
-export { default as EditBookmarkButton } from './EditBookmarkButton';
-export { default as BookmarkEditDialog } from './BookmarkEditDialog';
-export { default as BookmarkItems } from './BookmarkItems';
 export { default as BookmarkItem } from './BookmarkItem';
 export { default as BookmarkForm } from './BookmarkForm';
+export { default as BookmarkItems } from './BookmarkItems';
+export { default as BookmarkEditDialog } from './BookmarkEditDialog';

client/src/components/SidePanel/Bookmarks/BookmarkCardActions.tsx

@@ -1,14 +1,15 @@
 import { useState, useRef, useCallback } from 'react';
 import { Pencil, Trash2 } from 'lucide-react';
-import type { TConversationTag } from 'librechat-data-provider';
 import {
   Button,
+  Spinner,
   OGDialog,
+  TooltipAnchor,
   OGDialogTrigger,
   OGDialogTemplate,
-  TooltipAnchor,
   useToastContext,
 } from '@librechat/client';
+import type { TConversationTag } from 'librechat-data-provider';
 import { useDeleteConversationTagMutation } from '~/data-provider';
 import { BookmarkEditDialog } from '~/components/Bookmarks';
 import { NotificationSeverity } from '~/common';
@@ -42,7 +43,9 @@ export default function BookmarkCardActions({ bookmark }: BookmarkCardActionsPro
     },
   });
 
-  const confirmDelete = useCallback(async () => {
+  const isDeleting = deleteBookmarkMutation.isLoading;
+
+  const handleDelete = useCallback(async () => {
     await deleteBookmarkMutation.mutateAsync(bookmark.tag);
   }, [bookmark.tag, deleteBookmarkMutation]);
 
@@ -97,20 +100,14 @@ export default function BookmarkCardActions({ bookmark }: BookmarkCardActionsPro
           />
         </OGDialogTrigger>
         <OGDialogTemplate
-          showCloseButton={false}
           title={localize('com_ui_bookmarks_delete')}
-          className="max-w-[450px]"
-          main={
-            <p className="text-left text-sm text-text-secondary">
-              {localize('com_ui_bookmark_delete_confirm')} <strong>{bookmark.tag}</strong>
-            </p>
+          className="w-11/12 max-w-md"
+          description={localize('com_ui_bookmark_delete_confirm', { 0: bookmark.tag })}
+          selection={
+            <Button onClick={handleDelete} variant="destructive">
+              {isDeleting ? <Spinner /> : localize('com_ui_delete')}
+            </Button>
           }
-          selection={{
-            selectHandler: confirmDelete,
-            selectClasses:
-              'bg-destructive text-white transition-all duration-200 hover:bg-destructive/80',
-            selectText: localize('com_ui_delete'),
-          }}
         />
       </OGDialog>
     </div>

client/src/locales/en/translation.json

@@ -754,7 +754,7 @@
   "com_ui_basic_auth_header": "Basic authorization header",
   "com_ui_bearer": "Bearer",
   "com_ui_beta": "Beta",
-  "com_ui_bookmark_delete_confirm": "Are you sure you want to delete this bookmark?",
+  "com_ui_bookmark_delete_confirm": "Are you sure you want to delete the '{{0}}' bookmark?",
   "com_ui_bookmarks": "Bookmarks",
   "com_ui_bookmarks_add": "Add Bookmarks",
   "com_ui_bookmarks_add_to_conversation": "Add to current conversation",
@@ -762,7 +762,7 @@
   "com_ui_bookmarks_create_error": "There was an error creating the bookmark",
   "com_ui_bookmarks_create_exists": "This bookmark already exists",
   "com_ui_bookmarks_create_success": "Bookmark created successfully",
-  "com_ui_bookmarks_delete": "Delete Bookmark",
+  "com_ui_bookmarks_delete": "Delete Bookmark?",
   "com_ui_bookmarks_delete_error": "There was an error deleting the bookmark",
   "com_ui_bookmarks_delete_success": "Bookmark deleted successfully",
   "com_ui_bookmarks_description": "Description",