🎨 style: overall UI improvements (#3576)

* stlye: new dialogs

* style: DashGroupItem

* style: bookmarks update

client/src/components/Nav/Bookmarks/BookmarkNav.tsx

@@ -15,6 +15,7 @@ type BookmarkNavProps = {
   tags: string[];
   setTags: (tags: string[]) => void;
 };
+
 const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps) => {
   const localize = useLocalize();
   const location = useLocation();
@@ -33,38 +34,26 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
     conversation = activeConvo;
   }
 
-  // Hide the button if there are no tags
-  if (!data || !data.some((tag) => tag.count > 0)) {
-    return null;
-  }
-
   return (
     <Root open={open} onOpenChange={setIsOpen}>
       <Trigger asChild>
         <button
           className={cn(
-            'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm flex h-auto w-full items-center gap-2 rounded-lg p-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-800',
-            open ? 'bg-gray-100 dark:bg-gray-800' : '',
+            'relative mt-1 flex h-10 w-full cursor-pointer items-center gap-1 rounded-lg border-white bg-gray-50 px-1 py-2 text-black transition-colors duration-200 focus-within:bg-gray-200 hover:bg-gray-200 dark:bg-gray-850 dark:text-white dark:focus-within:bg-gray-800 dark:hover:bg-gray-800',
+            open ? 'bg-gray-200 dark:bg-gray-800' : '',
           )}
           id="presets-button"
           data-testid="presets-button"
           title={localize('com_endpoint_examples')}
         >
-          <div className="-ml-0.9 -mt-0.8 h-8 w-8 flex-shrink-0">
-            <div className="relative flex">
-              <div className="relative flex h-8 w-8 items-center justify-center rounded-full p-1 dark:text-white">
-                {tags.length > 0 ? (
-                  <BookmarkFilledIcon className="h-6 w-6" />
-                ) : (
-                  <BookmarkIcon className="h-6 w-6" />
-                )}
-              </div>
-            </div>
+          <div className="relative flex h-8 w-8 items-center justify-center rounded-full p-1 dark:text-white">
+            {tags.length > 0 ? (
+              <BookmarkFilledIcon className="h-5 w-5" />
+            ) : (
+              <BookmarkIcon className="h-5 w-5" />
+            )}
           </div>
-          <div
-            className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-gray-100"
-            style={{ marginTop: '0', marginLeft: '0' }}
-          >
+          <div className="grow overflow-hidden whitespace-nowrap text-left text-sm text-black dark:text-gray-100">
             {tags.length > 0 ? tags.join(',') : localize('com_ui_bookmarks')}
           </div>
         </button>
@@ -76,7 +65,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
             align="start"
             className="mt-2 max-h-96 min-w-[240px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white lg:max-h-96"
           >
-            {data && conversation && data.some((tag) => tag.count > 0) && (
+            {data && conversation && (
               // Display bookmarks and highlight the selected tag
               <BookmarkContext.Provider value={{ bookmarks: data.filter((tag) => tag.count > 0) }}>
                 <BookmarkNavItems

client/src/components/Nav/Bookmarks/BookmarkNavItems.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState, type FC } from 'react';
 import { CrossCircledIcon } from '@radix-ui/react-icons';
 import type { TConversation } from 'librechat-data-provider';
+import { useBookmarkContext } from '~/Providers/BookmarkContext';
 import { BookmarkItems, BookmarkItem } from '~/components/Bookmarks';
+import { useLocalize } from '~/hooks';
 
 const BookmarkNavItems: FC<{
   conversation: TConversation;
@@ -9,6 +11,8 @@ const BookmarkNavItems: FC<{
   setTags: (tags: string[]) => void;
 }> = ({ conversation, tags, setTags }) => {
   const [currentConversation, setCurrentConversation] = useState<TConversation>();
+  const { bookmarks } = useBookmarkContext();
+  const localize = useLocalize();
 
   useEffect(() => {
     if (!currentConversation) {
@@ -35,8 +39,24 @@ const BookmarkNavItems: FC<{
     return Promise.resolve();
   };
 
+  console.log('bookmarks', bookmarks);
+
+  if (bookmarks.length === 0) {
+    return (
+      <div className="flex flex-col">
+        <BookmarkItem
+          tag={localize('com_ui_no_bookmarks')}
+          data-testid="bookmark-item-clear"
+          handleSubmit={() => Promise.resolve()}
+          selected={false}
+          icon={'🤔'}
+        />
+      </div>
+    );
+  }
+
   return (
-    <>
+    <div className="flex flex-col">
       <BookmarkItems
         tags={tags}
         handleSubmit={handleSubmit}
@@ -51,7 +71,7 @@ const BookmarkNavItems: FC<{
           />
         }
       />
-    </>
+    </div>
   );
 };
 

client/src/components/Nav/Nav.tsx

@@ -157,7 +157,12 @@ const Nav = ({ navVisible, setNavVisible }) => {
                     >
                       <NewChat
                         toggleNav={itemToggleNav}
-                        subHeaders={isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
+                        subHeaders={
+                          <>
+                           {isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
+                            <BookmarkNav tags={tags} setTags={setTags} />
+                          </>
+                        }
                       />
                       <Conversations
                         conversations={conversations}
@@ -170,7 +175,6 @@ const Nav = ({ navVisible, setNavVisible }) => {
                         />
                       )}
                     </div>
-                    <BookmarkNav tags={tags} setTags={setTags} />
                     <NavLinks />
                   </nav>
                 </div>