🖼️ style: Conversation Menu and Dialogs update (#3601)

* feat: new dropdown

* fix: maintain popover active when open

* fix: update DeleteButton and ShareButton component to use useState for managing dialog state

* BREAKING: style improvement of base Button component

* style: update export button

* a11y: ExportAndShareButton

* add border

* quick style fix

* fix: flick issue on convo

* fix: DropDown opens when renaming

* chore: update radix-ui/react-dropdown-menu to latest

* small fix

* style: bookmarks update

* reorder export modal

* feat: imporved dropdowns

* style: a lot of changes; header, bookmarks, export, nav, convo, convoOptions

* fix: small style issues

* fix: button

* fix: bookmarks header menu

* fix: dropdown close glitch

* feat: Improve accessibility and keyboard navigation in ModelSpec component

* fix: Nav related type issues

* style: ConvoOptions theming and focus ring

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Chat/Menus/Bookmarks/BookmarkMenuItems.tsx

@@ -1,78 +1,34 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { BookmarkPlusIcon } from 'lucide-react';
 import type { FC } from 'react';
-import type { TConversation } from 'librechat-data-provider';
-import { BookmarkItems, BookmarkEditDialog } from '~/components/Bookmarks';
-import { useTagConversationMutation } from '~/data-provider';
-import { useLocalize, useBookmarkSuccess } from '~/hooks';
-import { NotificationSeverity } from '~/common';
-import { useToastContext } from '~/Providers';
+import { BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
+import { useLocalize } from '~/hooks';
 
 export const BookmarkMenuItems: FC<{
-  conversation: TConversation;
   tags: string[];
-  setTags: React.Dispatch<React.SetStateAction<string[]>>;
-}> = ({ conversation, tags, setTags }) => {
-  const { showToast } = useToastContext();
+  handleToggleOpen?: () => Promise<void>;
+  handleSubmit: (tag?: string) => Promise<void>;
+}> = ({
+  tags,
+  handleSubmit,
+  handleToggleOpen = async () => {
+    ('');
+  },
+}) => {
   const localize = useLocalize();
 
-  const conversationId = conversation?.conversationId ?? '';
-  const onSuccess = useBookmarkSuccess(conversationId);
-
-  const { mutateAsync } = useTagConversationMutation(conversationId);
-  const handleSubmit = useCallback(
-    async (tag: string): Promise<void> => {
-      if (tags !== undefined && conversationId) {
-        const newTags = tags.includes(tag) ? tags.filter((t) => t !== tag) : [...tags, tag];
-        await mutateAsync(
-          {
-            tags: newTags,
-          },
-          {
-            onSuccess: (newTags: string[]) => {
-              setTags(newTags);
-              onSuccess(newTags);
-            },
-            onError: () => {
-              showToast({
-                message: 'Error adding bookmark',
-                severity: NotificationSeverity.ERROR,
-              });
-            },
-          },
-        );
-      }
-    },
-    [tags, conversationId, mutateAsync, setTags, onSuccess, showToast],
-  );
-
   return (
     <BookmarkItems
-      ctx="header"
       tags={tags}
       handleSubmit={handleSubmit}
       header={
-        <div>
-          <BookmarkEditDialog
-            conversation={conversation}
-            tags={tags}
-            setTags={setTags}
-            trigger={
-              <div
-                role="menuitem"
-                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-header-hover focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50"
-                tabIndex={-1}
-              >
-                <div className="flex grow items-center justify-between gap-2">
-                  <div className="flex items-center gap-2">
-                    <BookmarkPlusIcon className="size-4" />
-                    <div className="break-all">{localize('com_ui_bookmarks_new')}</div>
-                  </div>
-                </div>
-              </div>
-            }
-          />
-        </div>
+        <BookmarkItem
+          tag={localize('com_ui_bookmarks_new')}
+          data-testid="bookmark-item-new"
+          handleSubmit={handleToggleOpen}
+          selected={false}
+          icon={<BookmarkPlusIcon className="size-4" aria-label="Add Bookmark" />}
+        />
       }
     />
   );