refactor: update Settings and Navbar components for improved state management and UI integration

src/components/Settings.tsx

@@ -475,7 +475,7 @@ const Choice = (props: {
   );
 };
 
-export default (props: { setShow: Dispatch<boolean> }) => {
+export default (props: {}) => {
   const ctx = useContext(AppContext);
   if (ctx === null) return <></>;
 
@@ -497,13 +497,14 @@ export default (props: { setShow: Dispatch<boolean> }) => {
   const [totalCost, setTotalCost] = useState(getTotalCost());
   // @ts-ignore
   const { langCode, setLangCode } = useContext(langCodeContext);
+  const [open, setOpen] = useState<boolean>(false);
 
   useEffect(() => {
     themeChange(false);
     const handleKeyPress = (event: any) => {
       if (event.keyCode === 27) {
         // keyCode for ESC key is 27
-        props.setShow(false);
+        setOpen(false);
       }
     };
 
@@ -514,7 +515,7 @@ export default (props: { setShow: Dispatch<boolean> }) => {
     };
   }, []); // The empty dependency array ensures that the effect runs only once
   return (
-    <Sheet>
+    <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
         <Button variant="outline" className="flex-grow">
           {Tr("Settings")}

src/components/navbar.tsx

@@ -26,6 +26,8 @@ import {
   WalletIcon,
   ArrowUpDownIcon,
   ScissorsIcon,
+  SearchIcon,
+  CogIcon,
 } from "lucide-react";
 import { AppContext } from "@/pages/App";
 import { models } from "@/types/models";
@@ -33,6 +35,9 @@ import { getTotalCost } from "@/utils/totalCost";
 import { Tr } from "@/translate";
 
 import { useContext } from "react";
+import { Button } from "./ui/button";
+import Search from "@/search";
+import Settings from "./Settings";
 
 const Navbar: React.FC = () => {
   const ctx = useContext(AppContext);
@@ -40,90 +45,100 @@ const Navbar: React.FC = () => {
   const { chatStore, setChatStore } = ctx;
 
   return (
-    <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b z-50">
-      <div className="flex items-center gap-2 px-3">
-        <SidebarTrigger />
-        <Separator orientation="vertical" className="mr-2 h-4" />
-        <h1 className="text-lg font-bold">{chatStore.model}</h1>
-        <div className="flex justify-between items-center gap-2">
-          <div>
-            <div className="dropdown lg:hidden flex items-center gap-2">
-              <Badge variant="outline">
-                {chatStore.totalTokens.toString()}
-              </Badge>
-              <Popover>
-                <PopoverTrigger>
-                  <EllipsisIcon />
-                </PopoverTrigger>
-                <PopoverContent>
-                  <p>
-                    Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
-                  </p>
-                  <p>
-                    Cut(s): {chatStore.postBeginIndex}/
-                    {chatStore.history.filter(({ hide }) => !hide).length}
-                  </p>
-                  <p>
-                    Cost: ${chatStore.cost?.toFixed(4)} / $
-                    {getTotalCost().toFixed(2)}
-                  </p>
-                </PopoverContent>
-              </Popover>
-            </div>
-            <div className="hidden lg:inline-grid">
-              <Menubar>
-                <MenubarMenu>
-                  <MenubarTrigger>
-                    <WholeWordIcon className="w-4 h-4 mr-2" />{" "}
-                    {chatStore.totalTokens}
-                    <CircleDollarSignIcon className="w-4 h-4 mx-2" />
-                    {chatStore.cost?.toFixed(4)}
-                  </MenubarTrigger>
-                  <MenubarContent>
-                    <MenubarItem>
-                      <RulerIcon className="w-4 h-4 mr-2" />
-                      Max Length: {chatStore.maxTokens}
-                    </MenubarItem>
-                    <MenubarItem>
-                      <ReceiptIcon className="w-4 h-4 mr-2" />
-                      Price:{" "}
-                      {models[chatStore.model]?.price?.prompt * 1000 * 1000}$ /
-                      1M input tokens
-                    </MenubarItem>
-                    <MenubarItem>
-                      <WalletIcon className="w-4 h-4 mr-2" />
-                      Total: {getTotalCost().toFixed(2)}$
-                    </MenubarItem>
-                    <MenubarItem>
-                      <ArrowUpDownIcon className="w-4 h-4 mr-2" />
-                      {chatStore.streamMode ? (
-                        <>
-                          <span>{Tr("STREAM")}</span>·
-                          <span style={{ color: "gray" }}>{Tr("FETCH")}</span>
-                        </>
-                      ) : (
-                        <>
-                          <span style={{ color: "gray" }}>{Tr("STREAM")}</span>·
-                          <span>{Tr("FETCH")}</span>
-                        </>
-                      )}
-                    </MenubarItem>
-                    <MenubarItem>
-                      <ScissorsIcon className="w-4 h-4 mr-2" />
-                      {chatStore.postBeginIndex} / {chatStore.history.length}
-                    </MenubarItem>
-                    <MenubarSeparator />
-                    <MenubarItem disabled>Switch to Model (TODO):</MenubarItem>
-                    <MenubarCheckboxItem checked>gpt-4o</MenubarCheckboxItem>
-                    <MenubarCheckboxItem>gpt-o1</MenubarCheckboxItem>
-                    <MenubarCheckboxItem>gpt-o1-mini</MenubarCheckboxItem>
-                    <MenubarCheckboxItem>gpt-o3</MenubarCheckboxItem>
-                  </MenubarContent>
-                </MenubarMenu>
-              </Menubar>
+    <header className="flex sticky top-0 bg-background h-14 shrink-0 items-center border-b z-50">
+      <div className="flex flex-1 items-center gap-2">
+        <div className="flex items-center gap-2 px-3">
+          <SidebarTrigger />
+          <Separator orientation="vertical" className="mr-2 h-4" />
+          <h1 className="text-lg font-bold">{chatStore.model}</h1>
+          <div className="flex justify-between items-center gap-2">
+            <div>
+              <div className="dropdown lg:hidden flex items-center gap-2">
+                <Badge variant="outline">
+                  {chatStore.totalTokens.toString()}
+                </Badge>
+                <Popover>
+                  <PopoverTrigger>
+                    <EllipsisIcon />
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <p>
+                      Tokens: {chatStore.totalTokens}/{chatStore.maxTokens}
+                    </p>
+                    <p>
+                      Cut(s): {chatStore.postBeginIndex}/
+                      {chatStore.history.filter(({ hide }) => !hide).length}
+                    </p>
+                    <p>
+                      Cost: ${chatStore.cost?.toFixed(4)} / $
+                      {getTotalCost().toFixed(2)}
+                    </p>
+                  </PopoverContent>
+                </Popover>
+              </div>
+              <div className="hidden lg:inline-grid">
+                <Menubar>
+                  <MenubarMenu>
+                    <MenubarTrigger>
+                      <WholeWordIcon className="w-4 h-4 mr-2" />{" "}
+                      {chatStore.totalTokens}
+                      <CircleDollarSignIcon className="w-4 h-4 mx-2" />
+                      {chatStore.cost?.toFixed(4)}
+                    </MenubarTrigger>
+                    <MenubarContent>
+                      <MenubarItem>
+                        <RulerIcon className="w-4 h-4 mr-2" />
+                        Max Length: {chatStore.maxTokens}
+                      </MenubarItem>
+                      <MenubarItem>
+                        <ReceiptIcon className="w-4 h-4 mr-2" />
+                        Price:{" "}
+                        {models[chatStore.model]?.price?.prompt * 1000 * 1000}$
+                        / 1M input tokens
+                      </MenubarItem>
+                      <MenubarItem>
+                        <WalletIcon className="w-4 h-4 mr-2" />
+                        Total: {getTotalCost().toFixed(2)}$
+                      </MenubarItem>
+                      <MenubarItem>
+                        <ArrowUpDownIcon className="w-4 h-4 mr-2" />
+                        {chatStore.streamMode ? (
+                          <>
+                            <span>{Tr("STREAM")}</span>·
+                            <span style={{ color: "gray" }}>{Tr("FETCH")}</span>
+                          </>
+                        ) : (
+                          <>
+                            <span style={{ color: "gray" }}>
+                              {Tr("STREAM")}
+                            </span>
+                            ·<span>{Tr("FETCH")}</span>
+                          </>
+                        )}
+                      </MenubarItem>
+                      <MenubarItem>
+                        <ScissorsIcon className="w-4 h-4 mr-2" />
+                        {chatStore.postBeginIndex} / {chatStore.history.length}
+                      </MenubarItem>
+                      <MenubarSeparator />
+                      <MenubarItem disabled>
+                        Switch to Model (TODO):
+                      </MenubarItem>
+                      <MenubarCheckboxItem checked>gpt-4o</MenubarCheckboxItem>
+                      <MenubarCheckboxItem>gpt-o1</MenubarCheckboxItem>
+                      <MenubarCheckboxItem>gpt-o1-mini</MenubarCheckboxItem>
+                      <MenubarCheckboxItem>gpt-o3</MenubarCheckboxItem>
+                    </MenubarContent>
+                  </MenubarMenu>
+                </Menubar>
+              </div>
             </div>
+            <ModeToggle />
           </div>
-          <ModeToggle />
+        </div>
+        <div className="flex ml-auto gap-2 px-3">
+          <Settings />
+          <Search />
         </div>
       </div>
     </header>

src/pages/Chatbox.tsx

@@ -429,18 +429,6 @@ export default function ChatBOX() {
   return (
     <>
       <div className="flex flex-col p-2 gap-2 w-full">
-        <div className="flex items-center gap-2 justify-between">
-          {true && <Settings setShow={setShowSettings} />}
-          <Button
-            variant="outline"
-            size="icon"
-            onClick={() => setShowSearch(true)}
-          >
-            <SearchIcon />
-          </Button>
-        </div>
-        {showSearch && <Search show={showSearch} setShow={setShowSearch} />}
-
         {!chatStore.apiKey && (
           <Alert>
             <KeyIcon className="h-4 w-4" />

src/search.tsx

@@ -25,6 +25,8 @@ import {
 
 import { Input } from "./components/ui/input";
 import { AppContext } from "./pages/App";
+import { Button } from "./components/ui/button";
+import { SearchIcon } from "lucide-react";
 
 interface ChatStoreSearchResult {
   key: IDBValidKey;
@@ -33,10 +35,7 @@ interface ChatStoreSearchResult {
   preview: string;
 }
 
-export default function Search(props: {
-  show: boolean;
-  setShow: (show: boolean) => void;
-}) {
+export default function Search() {
   const ctx = useContext(AppContext);
   if (ctx === null) return <></>;
   const { setSelectedChatIndex, db } = ctx;
@@ -46,9 +45,15 @@ export default function Search(props: {
   const [searchingNow, setSearchingNow] = useState<number>(0);
   const [pageIndex, setPageIndex] = useState<number>(0);
   const searchAbortRef = useRef<AbortController | null>(null);
+  const [open, setOpen] = useState<boolean>(false);
 
   return (
-    <Dialog open={props.show} onOpenChange={props.setShow}>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger>
+        <Button variant="outline" size="icon">
+          <SearchIcon />
+        </Button>
+      </DialogTrigger>
       <DialogContent className="sm:max-w-[80%]">
         <DialogHeader>
           <DialogTitle>Search</DialogTitle>
@@ -160,7 +165,7 @@ export default function Search(props: {
                   key={result.key as number}
                   onClick={() => {
                     setSelectedChatIndex(parseInt(result.key.toString()));
-                    props.setShow(false);
+                    setOpen(false);
                   }}
                 >
                   <div className="m-1 p-1 font-bold">