feat: Add SearchBar component to Nav (#760)

* feat: Add SearchBar component to Nav

This commit adds the SearchBar component to the navigation bar in order to enable search functionality. Now users can easily search for specific items within the navigation.

* Refactor Nav and SearchBar components

The commit refactors the Nav component by moving the SearchBar component within the Nav component. This change ensures that the SearchBar is rendered only when the isSearchEnabled condition is true.

In addition, the commit also modifies the styling of the SearchBar component by adding rounded corners and border to enhance the visual appearance.

* Update gitignore

* C

Refactor search bar styles

This commit refactors the styles of the search bar component in the Nav component. The border color and hover background color have been modified to improve the visual appearance.

* Fix margin

* Rename Logout.jsx to Logout.tsx and update import statements accordingly.
Replace the use of Recoil and store with useLocalize hook for localization.
Update the usage of localize function by removing the lang parameter.

.gitignore

@@ -71,6 +71,7 @@ junit.xml
 
 # meilisearch
 meilisearch
+meilisearch.exe
 data.ms/*
 auth.json
 

client/src/components/Nav/Logout.tsx

@@ -1,13 +1,11 @@
 import { forwardRef } from 'react';
 import { LogOutIcon } from '../svg';
 import { useAuthContext } from '~/hooks/AuthContext';
-import { useRecoilValue } from 'recoil';
+import { useLocalize } from '~/hooks';
-import store from '~/store';
-import { localize } from '~/localization/Translation';
 
 const Logout = forwardRef(() => {
-  const { user, logout } = useAuthContext();
+  const { logout } = useAuthContext();
-  const lang = useRecoilValue(store.lang);
+  const localize = useLocalize();
 
   const handleLogout = () => {
     logout();
@@ -20,8 +18,7 @@ const Logout = forwardRef(() => {
       onClick={handleLogout}
     >
       <LogOutIcon />
-      {user?.username || localize(lang, 'com_nav_user')}
+      {localize('com_nav_log_out')}
-      <small>{localize(lang, 'com_nav_log_out')}</small>
     </button>
   );
 });

client/src/components/Nav/Nav.tsx

@@ -7,6 +7,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import NewChat from './NewChat';
+import SearchBar from './SearchBar';
 import NavLinks from './NavLinks';
 import { Panel, Spinner } from '~/components';
 import { Conversations, Pages } from '../Conversations';
@@ -166,7 +167,7 @@ export default function Nav({ navVisible, setNavVisible }) {
           <div className="flex h-full min-h-0 flex-col ">
             <div className="scrollbar-trigger relative flex h-full w-full flex-1 items-start border-white/20">
               <nav className="relative flex h-full flex-1 flex-col space-y-1 p-2">
-                <div className="mb-2 flex h-11 flex-row">
+                <div className="mb-1 flex h-11 flex-row">
                   <NewChat />
                   <button
                     type="button"
@@ -179,6 +180,7 @@ export default function Nav({ navVisible, setNavVisible }) {
                     <Panel open={false} />
                   </button>
                 </div>
+                {isSearchEnabled && <SearchBar clearSearch={clearSearch} />}
                 <div
                   className={`flex-1 flex-col overflow-y-auto ${
                     isHovering ? '' : 'scrollbar-transparent'
@@ -202,7 +204,7 @@ export default function Nav({ navVisible, setNavVisible }) {
                     />
                   </div>
                 </div>
-                <NavLinks clearSearch={clearSearch} isSearchEnabled={isSearchEnabled} />
+                <NavLinks />
               </nav>
             </div>
           </div>

client/src/components/Nav/NavLinks.jsx

@@ -2,20 +2,19 @@ import { Download } from 'lucide-react';
 import { useRecoilValue } from 'recoil';
 import { Fragment, useState } from 'react';
 import { Menu, Transition } from '@headlessui/react';
-import SearchBar from './SearchBar';
 import ClearConvos from './ClearConvos';
 import Settings from './Settings';
 import NavLink from './NavLink';
 import Logout from './Logout';
 import { ExportModel } from './ExportConversation';
-import { LinkIcon, DotsIcon, GearIcon, TrashIcon } from '~/components';
+import { LinkIcon, DotsIcon, GearIcon } from '~/components';
 import { localize } from '~/localization/Translation';
 import { useAuthContext } from '~/hooks/AuthContext';
 import { cn } from '~/utils/';
 
 import store from '~/store';
 
-export default function NavLinks({ clearSearch, isSearchEnabled }) {
+export default function NavLinks() {
   const [showExports, setShowExports] = useState(false);
   const [showClearConvos, setShowClearConvos] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
@@ -76,11 +75,6 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
-                {isSearchEnabled && (
-                  <Menu.Item>
-                    <SearchBar clearSearch={clearSearch} />
-                  </Menu.Item>
-                )}
                 <Menu.Item as="div">
                   <NavLink
                     className={cn(
@@ -93,14 +87,6 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
                   />
                 </Menu.Item>
                 <div className="my-1.5 h-px bg-white/20" role="none" />
-                <Menu.Item as="div">
-                  <NavLink
-                    className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
-                    svg={() => <TrashIcon />}
-                    text={localize(lang, 'com_nav_clear_conversation')}
-                    clickHandler={() => setShowClearConvos(true)}
-                  />
-                </Menu.Item>
                 <Menu.Item as="div">
                   <NavLink
                     className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"

client/src/components/Nav/NewChat.jsx

@@ -16,7 +16,7 @@ export default function NewChat() {
   return (
     <a
       onClick={clickHandler}
-      className="mb-2 flex h-11 flex-shrink-0 flex-grow cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
+      className="flex h-11 flex-shrink-0 flex-grow cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
     >
       <svg
         stroke="currentColor"

client/src/components/Nav/SearchBar.jsx

@@ -35,7 +35,7 @@ const SearchBar = forwardRef((props, ref) => {
   return (
     <div
       ref={ref}
-      className="relative flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
+      className="relative flex w-full cursor-pointer items-center gap-3 rounded-md border border-white/20 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10"
     >
       {<Search className="absolute left-3 h-4 w-4" />}
       <input