🏷️ fix: Address Statefulness Issues for Bookmarks (#3590)

* refactor: optimize tag methods, remove rebuild

* refactor(tags): add lean db operations, fix updateTagsForConversation, remove rebuild button, only send convoId once

* refactor: Update BookmarkMenu to use Constants.NEW_CONVO constant for comparison

* style: Update BookmarkMenu styles and constants, use theming

* refactor: move tags query from package to client workspace

* refactor: optimize ConversationTag document creation and update logic

* style: Update BookmarkMenuItems to use theming

* refactor: JSDocs + try/catch for conversation tags API routes

* refactor: Update BookmarkNav theming classes and new data provider location

* fix: statefulness of conversation bookmarks
- move non-mutation hook to hooks/Conversation
- remove use of deprecated global convo
- update convo infinite data as well as current convo state upon successful tag add

* refactor: Update BookmarkMenu styles and constants, use theming

* refactor: Add lean option to ConversationTag deletion query

* fix(BookmarkTable): position order rendering esp. when new tag is created

* refactor: Update useBookmarkSucess to useBookmarkSuccess for consistency

* refactor: Update ConversationTag creation logic to increment count only if addToConversation is true

* style: theming

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

@@ -1,36 +1,37 @@
-import { useCallback } from 'react';
+import React, { useCallback } 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 { useLocalize } from '~/hooks';
 
 export const BookmarkMenuItems: FC<{
   conversation: TConversation;
   tags: string[];
-  setTags: (tags: string[]) => void;
-  setConversation: (conversation: TConversation) => void;
-}> = ({ conversation, tags, setTags, setConversation }) => {
+  setTags: React.Dispatch<React.SetStateAction<string[]>>;
+}> = ({ conversation, tags, setTags }) => {
   const { showToast } = useToastContext();
   const localize = useLocalize();
 
-  const { mutateAsync } = useTagConversationMutation(conversation?.conversationId ?? '');
+  const conversationId = conversation?.conversationId ?? '';
+  const onSuccess = useBookmarkSuccess(conversationId);
+
+  const { mutateAsync } = useTagConversationMutation(conversationId);
   const handleSubmit = useCallback(
     async (tag: string): Promise<void> => {
-      if (tags !== undefined && conversation?.conversationId) {
+      if (tags !== undefined && conversationId) {
         const newTags = tags.includes(tag) ? tags.filter((t) => t !== tag) : [...tags, tag];
         await mutateAsync(
           {
-            conversationId: conversation.conversationId,
             tags: newTags,
           },
           {
             onSuccess: (newTags: string[]) => {
               setTags(newTags);
-              setConversation({ ...conversation, tags: newTags });
+              onSuccess(newTags);
             },
             onError: () => {
               showToast({
@@ -42,11 +43,12 @@ export const BookmarkMenuItems: FC<{
         );
       }
     },
-    [tags, conversation],
+    [tags, conversationId, mutateAsync, setTags, onSuccess, showToast],
   );
 
   return (
     <BookmarkItems
+      ctx="header"
       tags={tags}
       handleSubmit={handleSubmit}
       header={
@@ -58,7 +60,7 @@ export const BookmarkMenuItems: FC<{
             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-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
+                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">