undo tabs in dettings, do bare clients issue fix differently

src/pages/settings.tsx

@@ -1,32 +1,20 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+// import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import ProxySettings from "./settings/proxy";
 import CloakSettings from "./settings/cloak";
 import SearchSettings from "./settings/search";
 
 export default function Settings() {
 	return (
-		<div>
-			<span className="mb-4 inline-block w-full text-center text-3xl font-bold text-foreground">
-				Settings
-			</span>
-			<div className="flex flex-col items-center justify-center">
-				<Tabs
-					defaultValue="general"
-					className="flex h-full flex-col items-center justify-center"
-				>
-					<TabsList className="grid w-96 grid-cols-2">
-						<TabsTrigger value="general">General</TabsTrigger>
-						<TabsTrigger value="appearance">Appearance</TabsTrigger>
-					</TabsList>
-					<TabsContent
-						value="general"
-						className="flex flex-grow flex-col items-center justify-center gap-8 px-4 xl:flex-row xl:gap-x-4 xl:gap-y-0 xl:px-0"
-					>
-						<ProxySettings />
-						<CloakSettings />
-						<SearchSettings />
-					</TabsContent>
-				</Tabs>
+		<div className="h-full">
+			<div className="flex h-[calc(100%_-_5rem)] flex-col">
+				<span className="mb-4 inline-block w-full text-center text-3xl font-bold text-foreground">
+					Settings
+				</span>
+				<div className="flex flex-grow flex-col items-center justify-center gap-8 px-4 xl:flex-row xl:gap-x-4 xl:gap-y-0 xl:px-0">
+					<ProxySettings />
+					<CloakSettings />
+					<SearchSettings />
+				</div>
 			</div>
 		</div>
 	);

src/pages/settings/cloak.tsx

@@ -123,6 +123,10 @@ export default function CloakSettings() {
 							ref={cloakTitleRef}
 							type="text"
 							placeholder="Set how the tab title looks"
+							onChange={(e) => {
+								config && (config.title = e.target.value);
+								document.title = e.target.value;
+							}}
 						/>
 						<Label htmlFor="page-favicon">Page Favicon</Label>
 						<Input
@@ -131,6 +135,9 @@ export default function CloakSettings() {
 							type="text"
 							spellCheck={false}
 							placeholder="Set the favicon"
+							onChange={(e) => {
+								config && (config.favicon = e.target.value);
+							}}
 						/>
 					</CardContent>
 					<CardFooter className="justify-between space-x-2">

src/pages/settings/search.tsx

@@ -26,9 +26,8 @@ export default function SearchSettings() {
 	const customSearchRef = useRef<HTMLInputElement>(null);
 	const [config, reset, loading] = useConfig("search");
 	const searchEngines = {
-		Google: "https://google.com/search?q=%s",
-		DuckDuckGo: "https://duckduckgo.com/?q=%s",
-		Bing: "https://bing.com/search?q=%s",
+		Google: "https://google.com/search?q=",
+		DuckDuckGo: "https://duckduckgo.com/?q=",
 	};
 
 	useEffect(() => {
@@ -53,7 +52,6 @@ export default function SearchSettings() {
 			title: "Search Settings Reset",
 			description: "Search settings have been reset",
 		});
-		setTimeout(window.location.reload.bind(window.location), 1000);
 	};
 
 	return (

src/routes.tsx

@@ -55,16 +55,18 @@ export default function AppRoutes() {
 	const [config] = useConfig("proxy");
 	useEffect(() => {
 		if ("serviceWorker" in navigator) {
+			navigator.serviceWorker.ready.then((registration) => {
+				BareMux.registerRemoteListener(registration.active);
+				BareMux.SetTransport(transports[config.transport], {
+					wisp: config.wispServer,
+				});
+			});
 			navigator.serviceWorker
 				.register("/sw.js")
 				.then(() => {
 					console.log(
 						"\x1b[34;49;1m[Ephemeral] \x1B[32mINFO: Service workers registered",
 					);
-					BareMux.registerRemoteListener(navigator.serviceWorker.controller);
-					BareMux.SetTransport(transports[config.transport], {
-						wisp: config.wispServer,
-					});
 				})
 				.catch((err) => {
 					console.error(