fix: search dropdown placeholder and input now update correctly

src/pages/settings/CloakSettings.tsx

@@ -70,9 +70,7 @@ export default function CloakSettings() {
             <SelectTrigger aria-label="Presets">
               <SelectValue
                 placeholder={
-                  localStorage.getItem("cloakPreset")
-                    ? localStorage.getItem("cloakPreset")
-                    : "Select a preset"
+                  localStorage.getItem("cloakPreset") || "Select a preset"
                 }
               />
               <SelectContent position="popper">

src/pages/settings/SearchSettings.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import {
   Card,
   CardContent,
@@ -20,7 +20,11 @@ import { Button } from "@/components/ui/button";
 import { useToast } from "@/components/ui/use-toast";
 export default function SearchSettings() {
   const { toast } = useToast();
+  const [searchUrl, setSearchUrl] = useState(
+    localStorage.getItem("searchUrl") || "https://google.com/search?q=",
+  );
   const customSearchRef = useRef<HTMLInputElement>(null);
+  const selectRef = useRef<HTMLSelectElement>(null);
   return (
     <>
       <Card className="h-96 w-96">
@@ -35,31 +39,26 @@ export default function SearchSettings() {
           <Select
             aria-label="Search Engine"
             onValueChange={(value) => {
+              localStorage.setItem("search", value);
               if (value === "Google") {
-                localStorage.setItem("search", "Google");
                 localStorage.setItem(
                   "searchUrl",
                   "https://google.com/search?q=",
                 );
               } else if (value === "DuckDuckGo") {
-                localStorage.setItem("search", "DuckDuckGo");
                 localStorage.setItem("searchUrl", "https://duckduckgo.com/?q=");
               } else if (value === "Bing") {
-                localStorage.setItem("search", "Bing");
                 localStorage.setItem("searchUrl", "https://bing.com/search?q=");
               }
+              setSearchUrl(localStorage.getItem("searchUrl") || "");
               toast({
                 title: "Search Engine Changed",
                 description: "Search Engine has been changed to " + value,
               });
             }}
           >
             <SelectTrigger aria-label="Presets">
-              <SelectValue
-                placeholder={
-                  localStorage.getItem("search") || "Select a search engine"
-                }
-              />
+              <SelectValue placeholder={localStorage.getItem("search") ||"Select a search engine"}  ref={selectRef}/>
             </SelectTrigger>
             <SelectContent position="popper" className=" text-white">
               <SelectItem value="Google">Google</SelectItem>
@@ -75,12 +74,15 @@ export default function SearchSettings() {
             ref={customSearchRef}
             spellCheck={false}
             placeholder="Enter a valid Search Engine URL"
+            value={searchUrl}
+            onChange={(e) => setSearchUrl(e.target.value)}
           />
         </CardContent>
         <CardFooter>
           <Button
             onClick={() => {
               localStorage.setItem("search", "Custom");
+              selectRef.current!.value = "Custom";
               if (customSearchRef.current!.value === "") {
                 localStorage.setItem(
                   "searchUrl",