🖼️ 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/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Ellipsis, Share2, Archive, Pen, Trash } from 'lucide-react';
+import { useGetStartupConfig } from 'librechat-data-provider/react-query';
+import { Button } from '~/components/ui';
+import { useArchiveHandler } from './ArchiveButton';
+import { DropdownPopup } from '~/components/ui';
+import DeleteButton from './DeleteButton';
+import ShareButton from './ShareButton';
+import { useLocalize } from '~/hooks';
+
+export default function ConvoOptions({
+  conversation,
+  retainView,
+  renameHandler,
+  isPopoverActive,
+  setIsPopoverActive,
+  isActiveConvo,
+}) {
+  const localize = useLocalize();
+  const { data: startupConfig } = useGetStartupConfig();
+  const { conversationId, title } = conversation;
+  const [showShareDialog, setShowShareDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const archiveHandler = useArchiveHandler(conversationId, true, retainView);
+
+  const shareHandler = () => {
+    setIsPopoverActive(false);
+    setShowShareDialog(true);
+  };
+
+  const deleteHandler = () => {
+    setIsPopoverActive(false);
+    setShowDeleteDialog(true);
+  };
+
+  const dropdownItems = [
+    {
+      label: localize('com_ui_rename'),
+      onClick: renameHandler,
+      icon: <Pen className="icon-md mr-2 text-text-secondary" />,
+    },
+    {
+      label: localize('com_ui_share'),
+      onClick: shareHandler,
+      icon: <Share2 className="icon-md mr-2 text-text-secondary" />,
+      show: startupConfig && startupConfig.sharedLinksEnabled,
+    },
+    {
+      label: localize('com_ui_archive'),
+      onClick: archiveHandler,
+      icon: <Archive className="icon-md mr-2 text-text-secondary" />,
+    },
+    {
+      label: localize('com_ui_delete'),
+      onClick: deleteHandler,
+      icon: <Trash className="icon-md mr-2 text-text-secondary" />,
+    },
+  ];
+
+  return (
+    <>
+      <DropdownPopup
+        isOpen={isPopoverActive}
+        setIsOpen={setIsPopoverActive}
+        trigger={
+          <Button
+            id="conversation-menu-button"
+            aria-label="conversation-menu-button"
+            variant="link"
+            className="z-10 h-7 w-7 border-none p-0 transition-all duration-200 ease-in-out"
+          >
+            <Ellipsis className="icon-md text-text-secondary" />
+          </Button>
+        }
+        items={dropdownItems}
+        className={`${
+          isActiveConvo === true
+            ? 'opacity-100'
+            : 'opacity-0 focus:opacity-100 group-hover:opacity-100 data-[open]:opacity-100'
+        }`}
+      />
+      {showShareDialog && (
+        <ShareButton
+          conversationId={conversationId}
+          title={title}
+          showShareDialog={showShareDialog}
+          setShowShareDialog={setShowShareDialog}
+        />
+      )}
+      {showDeleteDialog && (
+        <DeleteButton
+          conversationId={conversationId}
+          retainView={retainView}
+          title={title}
+          showDeleteDialog={showDeleteDialog}
+          setShowDeleteDialog={setShowDeleteDialog}
+        />
+      )}
+    </>
+  );
+}