🖼️ 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/Bookmarks/BookmarkItem.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { MenuItem } from '@headlessui/react';
 import { BookmarkFilledIcon, BookmarkIcon } from '@radix-ui/react-icons';
 import type { FC } from 'react';
 import { Spinner } from '~/components/svg';
@@ -7,25 +8,19 @@ import { cn } from '~/utils';
 type MenuItemProps = {
   tag: string | React.ReactNode;
   selected: boolean;
-  ctx: 'header' | 'nav';
   count?: number;
-  handleSubmit: (tag: string) => Promise<void>;
+  handleSubmit: (tag?: string) => Promise<void>;
   icon?: React.ReactNode;
-  highlightSelected?: boolean;
 };
 
-const BookmarkItem: FC<MenuItemProps> = ({
-  tag,
-  ctx,
-  selected,
-  count,
-  handleSubmit,
-  icon,
-  highlightSelected,
-  ...rest
-}) => {
+const BookmarkItem: FC<MenuItemProps> = ({ tag, selected, handleSubmit, icon, ...rest }) => {
   const [isLoading, setIsLoading] = useState(false);
   const clickHandler = async () => {
+    if (tag === 'New Bookmark') {
+      await handleSubmit();
+      return;
+    }
+
     setIsLoading(true);
     await handleSubmit(tag as string);
     setIsLoading(false);
@@ -49,20 +44,15 @@ const BookmarkItem: FC<MenuItemProps> = ({
     return <BookmarkIcon className="size-4" />;
   };
 
-  const ariaLabel =
-    ctx === 'header' ? `${selected ? 'Remove' : 'Add'} bookmark for ${tag}` : (tag as string);
-
   return (
-    <button
-      aria-label={ariaLabel}
-      role="menuitem"
+    <MenuItem
+      aria-label={tag as string}
       className={cn(
-        'group m-1.5 flex w-[225px] cursor-pointer gap-2 rounded bg-transparent px-2 py-2.5 !pr-3 text-sm !opacity-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50',
-        highlightSelected && selected ? 'bg-surface-secondary' : '',
-        ctx === 'header' ? 'hover:bg-header-hover' : 'hover:bg-surface-hover',
+        'group flex w-full gap-2 rounded-lg p-2.5 text-sm text-text-primary transition-colors duration-200',
+        selected ? 'bg-surface-hover' : 'data-[focus]:bg-surface-hover',
       )}
-      tabIndex={-1}
       {...rest}
+      as="button"
       onClick={clickHandler}
     >
       <div className="flex grow items-center justify-between gap-2">
@@ -70,19 +60,8 @@ const BookmarkItem: FC<MenuItemProps> = ({
           {renderIcon()}
           <div style={breakWordStyle}>{tag}</div>
         </div>
-
-        {count !== undefined && (
-          <div className="flex items-center justify-end">
-            <span
-              className="ml-auto w-7 min-w-max whitespace-nowrap rounded-md bg-surface-secondary px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-text-secondary"
-              aria-hidden="true"
-            >
-              {count}
-            </span>
-          </div>
-        )}
       </div>
-    </button>
+    </MenuItem>
   );
 };