Revert "Merge pull request #247 from NebulaServices/revert-245-main"

This reverts commit cb9b15fccc, reversing
changes made to 0073a1121f.

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "concurrently \"vite\" \"bare-server-node --port 8080\"",
+    "dev": "concurrently \"vite\" \"tsx server.ts\"",
     "build": "vite build",
     "bstart": "npm run build && tsx server.ts",
     "start": "tsx server.ts",

public/themes/catppuccinFrappe.css

@@ -1,30 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
-:root {
-  --background-primary: #303446 !important;
-  --background-lighter: #292c3c !important;
-  --navbar-color: #292c3c !important;
-  --navbar-height: 60px !important;
-  --navbar-text-color: #c6d0f5 !important;
-  --navbar-link-color: #8caaee !important;
-  --navbar-link-hover-color: #ca9ee6 !important;
-  --navbar-font: "Roboto" !important;
-  --input-text-color: #c6d0f5 !important;
-  --input-placeholder-color: #a5adce !important;
-  --input-background-color: #232634 !important;
-  --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important;
-  --input-border-size: 1.3px !important;
-  --navbar-logo-filter: none !important;
-  --dropdown-option-hover-color: #232634 !important;
-  --tab-color: #414559 !important;
-  --active-color: #ca9ee6 !important;
-}
-
-.font-inter {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-}
-
-.font-roboto {
-  font-family: "Roboto";
-}

public/themes/catppuccinLatte.css

@@ -1,30 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
-:root {
-  --background-primary: #eff1f5 !important;
-  --background-lighter: #e6e9ef !important;
-  --navbar-color: #e6e9ef !important;
-  --navbar-height: 60px !important;
-  --navbar-text-color: #4c4f69 !important;
-  --navbar-link-color: #1e66f5 !important;
-  --navbar-link-hover-color: #8839ef !important;
-  --navbar-font: "Roboto" !important;
-  --input-text-color: #4c4f69 !important;
-  --input-placeholder-color: #6c6f85 !important;
-  --input-background-color: #dce0e8 !important;
-  --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important;
-  --input-border-size: 1.3px !important;
-  --navbar-logo-filter: none !important;
-  --dropdown-option-hover-color: #dce0e8 !important;
-  --tab-color: #ccd0da !important;
-  --active-color: #8839ef !important;
-}
-
-.font-inter {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-}
-
-.font-roboto {
-  font-family: "Roboto";
-}

public/themes/catppuccinMacchiato.css

@@ -1,30 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
-:root {
-  --background-primary: #24273a !important;
-  --background-lighter: #1e2030 !important;
-  --navbar-color: #1e2030 !important;
-  --navbar-height: 60px !important;
-  --navbar-text-color: #cad3f5 !important;
-  --navbar-link-color: #8aadf4 !important;
-  --navbar-link-hover-color: #c6a0f6 !important;
-  --navbar-font: "Roboto" !important;
-  --input-text-color: #cad3f5 !important;
-  --input-placeholder-color: #a5adcb !important;
-  --input-background-color: #181926 !important;
-  --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important;
-  --input-border-size: 1.3px !important;
-  --navbar-logo-filter: none !important;
-  --dropdown-option-hover-color: #181926 !important;
-  --tab-color: #363a4f !important;
-  --active-color: #c6a0f6 !important;
-}
-
-.font-inter {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-}
-
-.font-roboto {
-  font-family: "Roboto";
-}

public/themes/catppuccinMocha.css

@@ -1,30 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
-:root {
-  --background-primary: #1e1e2e !important;
-  --background-lighter: #181825 !important;
-  --navbar-color: #181825 !important;
-  --navbar-height: 60px !important;
-  --navbar-text-color: #cdd6f4 !important;
-  --navbar-link-color: #89b4fa !important;
-  --navbar-link-hover-color: #cba6f7 !important;
-  --navbar-font: "Roboto" !important;
-  --input-text-color: #cdd6f4 !important;
-  --input-placeholder-color: #a6adc8 !important;
-  --input-background-color: #11111b !important;
-  --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important;
-  --input-border-size: 1.3px !important;
-  --navbar-logo-filter: none !important;
-  --dropdown-option-hover-color: #11111b !important;
-  --tab-color: #313244 !important;
-  --active-color: #cba6f7 !important;
-}
-
-.font-inter {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-}
-
-.font-roboto {
-  font-family: "Roboto";
-}

public/themes/hacker.css

@@ -1,30 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
-:root {
-  --background-primary: #000 !important;
-  --background-lighter: #000 !important;
-  --navbar-color: #000 !important;
-  --navbar-height: 60px !important;
-  --navbar-text-color: greenyellow !important;
-  --navbar-link-color: greenyellow !important;
-  --navbar-link-hover-color: green !important;
-  --navbar-font: "Roboto" !important;
-  --input-text-color: greenyellow !important;
-  --input-placeholder-color: white !important;
-  --input-background-color: #000 !important;
-  --input-border-color: greenyellow !important;
-  --input-border-size: 1.3px !important;
-  --navbar-logo-filter: none !important;
-  --dropdown-option-hover-color: #312a49 !important;
-  --tab-color: var(--black) !important;
-  --border-color: greenyellow !important;
-}
-
-.font-inter {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-}
-
-.font-roboto {
-  font-family: "Roboto";
-}

public/themes/main.css

@@ -1,30 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
-
-:root {
-  --background-primary: #191724;
-  --background-lighter: #16121f;
-  --navbar-color: #26233a;
-  --navbar-height: 60px;
-  --navbar-text-color: #7967dd;
-  --navbar-link-color: #e0def4;
-  --navbar-link-hover-color: gray;
-  --navbar-font: "Roboto";
-  --input-text-color: #e0def4;
-  --input-placeholder-color: white;
-  --input-background-color: #1f1d2e;
-  --input-border-color: #eb6f92;
-  --input-border-size: 1.3px;
-  --navbar-logo-filter: none;
-  --dropdown-option-hover-color: #312a49;
-  --tab-color: var(--black);
-  --border-color: #16121f;
-}
-
-.font-inter {
-  font-family: "Inter", sans-serif;
-  font-weight: 300;
-}
-
-.font-roboto {
-  font-family: "Roboto";
-}

src/components/ThemeProvider.tsx

@@ -0,0 +1,90 @@
+import { createContext } from "preact";
+import { useContext, useEffect, useState } from "preact/hooks";
+type Theme =
+  | "main"
+  | "hacker"
+  | "catppuccin-mocha"
+  | "catppuccin-macchiato"
+  | "catppuccin-frappe"
+  | "catppuccin-latte";
+const themes: Theme[] = [
+  "main",
+  "hacker",
+  "catppuccin-mocha",
+  "catppuccin-macchiato",
+  "catppuccin-frappe",
+  "catppuccin-latte"
+];
+type ThemeProviderProps = {
+  children: React.ReactNode;
+};
+type ThemeProviderState = {
+  themes: Theme[];
+  theme: Theme;
+  background: string;
+  setTheme: (theme: Theme) => void;
+  setBackground: (background: string) => void;
+};
+
+const initialState: ThemeProviderState = {
+  themes: themes,
+  theme: "main",
+  background: "",
+  setTheme: () => null,
+  setBackground: () => null
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  const defaultTheme = "main";
+  const storageKey = "theme";
+  const bgKey = "background";
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+  const [background, setBackground] = useState<string>(() =>
+    localStorage.getItem(bgKey)
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    themes.forEach((theme) => {
+      root.classList.remove(theme);
+    });
+    root.classList.add(theme);
+    document.documentElement.style.setProperty(
+      "--background-image",
+      `url(${background})`
+    );
+  }, [theme, themes, background]);
+
+  const value = {
+    theme,
+    themes,
+    background,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+    setBackground: (background: string) => {
+      localStorage.setItem(bgKey, background);
+      setBackground(background);
+    }
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

src/index.tsx

@@ -1,21 +1,20 @@
 import { render } from "preact";
 import { Suspense, lazy } from "preact/compat";
 import { LoadSuspense } from "./LoadSuspense";
-import { Helmet } from "react-helmet";
 import Meta from "./components/Meta";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 
 import { useEffect, useState } from "preact/compat";
+import { ThemeProvider, useTheme } from "./components/ThemeProvider";
 
 const Routes = lazy(() => import("./routes"));
 
-const theme = localStorage.getItem("theme") || "main";
 const particlesUrl = localStorage.getItem("particles") || "none";
 
 export default function App() {
   const [init, setInit] = useState(false);
-
+  const {background} = useTheme();
   // this should be run only once per application lifetime
   useEffect(() => {
     initParticlesEngine(async (engine) => {
@@ -30,23 +29,15 @@ export default function App() {
       setInit(true);
     });
   }, []);
-
   const particlesLoaded = (container) => {
     console.log(container);
   };
-
   return (
-    <div class="w-srceen h-screen">
+    <div className={!background && "bg-primary"}>
       {window.location.origin === "https://nebulaproxy.io" && <Meta />}
       {/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
-      <Helmet>
-        <link rel="stylesheet" href={"/themes/" + theme + ".css"}></link>
-        <link rel="stylesheet" href="/themes/main.css"></link>
-      </Helmet>
       <Suspense fallback={<LoadSuspense />}>
-        <div className="absolute z-20 h-full w-full">
+        <Routes />
-          <Routes />
-        </div>
         <div className="z-10 h-full w-full bg-primary">
           {init && particlesUrl !== "none" && (
             <Particles
@@ -62,4 +53,9 @@ export default function App() {
   );
 }
 
-render(<App />, document.getElementById("app"));
+render(
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>,
+  document.getElementById("app")
+);

src/locales/en.json

@@ -72,7 +72,10 @@
       "select": "Select",
       "particles": "Particles",
       "particlesDesc": "Choose a particles wallpaper",
-      "particlesNone": "None"
+      "particlesNone": "None",
+      "background": "Background",
+      "backgroundDesc": "Choose a background image",
+      "backgroundNone": "None"
     },
     "httpProxy": {
       "title": "(Advanced) HTTP Proxy",
@@ -94,10 +97,10 @@
     "main": "Main",
     "hacker": "Hacker",
     "crismas": "Crismas🐴🎄",
-    "catppuccinMocha": "Catppuccin Mocha",
+    "catppuccin-mocha": "Catppuccin Mocha",
-    "catppuccinMacchiato": "Catppuccin Macchiato",
+    "catppuccin-macchiato": "Catppuccin Macchiato",
-    "catppuccinFrappe": "Catppuccin Frappe",
+    "catppuccin-frappe": "Catppuccin Frappe",
-    "catppuccinLatte": "Catppuccin Latte"
+    "catppuccin-latte": "Catppuccin Latte"
   },
   "clipboard": "URL copied to clipboard!",
   "bareError": "That didn't quite work. Double check that the bare server exists and isn't blocked.",

src/locales/es.json

@@ -69,9 +69,13 @@
     "theme": {
       "title": "Mirar",
       "subtitle": "Elige una mirada para que tus ojos no nos odienn",
+      "select": "Seleccionar",
       "particles": "Partículas",
       "particlesDesc": "Elige un fondo de pantalla de partículas",
-      "particlesNone": "Ninguna"
+      "particlesNone": "Ninguna",
+      "background": "Fondo",
+      "backgroundDesc": "Elige una imagen de fondo",
+      "backgroundNone": "Ninguna"
     },
     "httpProxy": {
       "title": "Proxy HTTP (avanzado)",
@@ -93,10 +97,10 @@
     "main": "Por defecto",
     "hacker": "Hacker",
     "crismas": "Naidad🐴🎄",
-    "catppuccinMocha": "Catppuccin Mocha",
+    "catppuccin-mocha": "Catppuccin Mocha",
-    "catppuccinMacchiato": "Catppuccin Macchiato",
+    "catppuccin-macchiato": "Catppuccin Macchiato",
-    "catppuccinFrappe": "Catppuccin Frappe",
+    "catppuccin-frappe": "Catppuccin Frappe",
-    "catppuccinLatte": "Catppuccin Latte"
+    "catppuccin-latte": "Catppuccin Latte"
   },
   "clipboard": "¡URL copiada al portapapeles!",
   "bareError": "Esto no es funcional. Vuelva a verificar que el servidor bare exista y no esté bloqueado.",

src/locales/ja.json

@@ -69,9 +69,13 @@
     "theme": {
       "title": "壁紙",
       "subtitle": "お好みの壁紙を選択してください",
+      "select": "選択する",
       "particles": "パーティクル",
       "particlesDesc": "パーティクルの種類を選択してください",
-      "particlesNone": "なし"
+      "particlesNone": "なし",
+      "background": "背景",
+      "backgroundDesc": "背景画像を選択してください",
+      "backgroundNone": "なし"
     },
     "httpProxy": {
       "title": "HTTPプロキシ (上級者向け)",
@@ -93,10 +97,10 @@
     "main": "標準",
     "hacker": "Hacker",
     "crismas": "Crismas🐴🎄",
-    "catppuccinMocha": "Catppuccin Mocha",
+    "catppuccin-mocha": "Catppuccin Mocha",
-    "catppuccinMacchiato": "Catppuccin Macchiato",
+    "catppuccin-macchiato": "Catppuccin Macchiato",
-    "catppuccinFrappe": "Catppuccin Frappe",
+    "catppuccin-frappe": "Catppuccin Frappe",
-    "catppuccinLatte": "Catppuccin Latte"
+    "catppuccin-latte": "Catppuccin Latte"
   },
   "clipboard": "コピーしました!",
   "bareError": "処理を実行できませんでした　Bareサーバーが存在し、そしてアクセスが拒否されていない事も確認してから、再度お試してください",

src/pages/Settings/Customization.tsx

@@ -1,20 +1,15 @@
+import { useRef } from "preact/hooks";
+import { useTheme } from "../../components/ThemeProvider";
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import { useTranslation } from "react-i18next";
 import Dropdown from "./Dropdown";
+import ThemeDropdown from "./ThemeDropdown";
 
 function Customization({ id, active }) {
+  const bgInput = useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
-
+  const { background, setBackground } = useTheme();
-  const themes = [
-    { id: "main", label: t("themes.main") },
-    { id: "hacker", label: t("themes.hacker") },
-    { id: "catppuccinMocha", label: t("themes.catppuccinMocha") },
-    { id: "catppuccinMacchiato", label: t("themes.catppuccinMacchiato") },
-    { id: "catppuccinFrappe", label: t("themes.catppuccinFrappe") },
-    { id: "catppuccinLatte", label: t("themes.catppuccinLatte") }
-  ];
-
   const particles = [
     { id: "none", label: t("settings.theme.particlesNone") },
     { id: "/crismas.json", label: t("themes.crismas") }
@@ -40,7 +35,7 @@ function Customization({ id, active }) {
           <div className="text-md p-4 font-bold text-input-text">
             {t("settings.theme.subtitle")}
           </div>
-          <Dropdown storageKey="theme" options={themes} refresh={true} />
+          <ThemeDropdown />
         </div>
         <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
           <div className="p-2 text-3xl font-bold text-input-text">
@@ -51,6 +46,26 @@ function Customization({ id, active }) {
           </div>
           <Dropdown storageKey="particles" options={particles} refresh={true} />
         </div>
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
+          <div className="p-2 text-3xl font-bold text-input-text">
+            {t("settings.theme.background")}
+          </div>
+          <div className="text-md p-4 font-bold text-input-text">
+            {t("settings.theme.backgroundDesc")}
+          </div>
+          <input
+            ref={bgInput}
+            className="font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text"
+            defaultValue={background}
+            placeholder={t("settings.theme.backgroundNone")}
+          />
+          <button
+            onClick={() => setBackground(bgInput.current.value)}
+            className="font-roboto mt-2 flex h-4 w-36 cursor-pointer flex-row items-center justify-center rounded-xl border border-input-border-color bg-input p-5 text-center text-lg text-input-text"
+          >
+            {t("settings.theme.select")}
+          </button>
+        </div>
       </motion.div>
     </motion.div>
   );

src/pages/Settings/PersonCard.tsx

@@ -6,7 +6,7 @@ interface props {
 
 export const PersonCard = (props) => {
   return (
-    <div class="flex flex-row mr-8">
+    <div class="mr-8 flex flex-row">
       <p className="text-lg">
         <a href={props.url} class="underline">
           <img src={props.profile} className="h-12 w-12 rounded-md" />

src/pages/Settings/ThemeDropdown.tsx

@@ -0,0 +1,53 @@
+import { useState } from "preact/hooks";
+import { FaAngleDown } from "react-icons/fa";
+import { useTheme } from "../../components/ThemeProvider";
+import { useTranslation } from "react-i18next";
+
+const ThemeDropdown = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation();
+  const { theme, setTheme, themes } = useTheme();
+  const options = themes.map((theme) => {
+    return { id: theme, label: t(`themes.${theme}`) };
+  });
+  return (
+    <div className="relative text-center">
+      <div
+        className={`font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center border border-input-border-color bg-input text-center text-xl ${
+          isOpen ? "rounded-t-2xl" : "rounded-2xl"
+        }`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <div className="flex h-full w-full select-none flex-row items-center">
+          <div className="h-full w-1/4"></div>
+          <div className="flex w-2/4 flex-row items-center justify-center text-input-text">
+            {options.find((o) => o.id === theme)?.label}
+          </div>
+          <div className="flex w-1/4 flex-col items-center text-input-text">
+            <FaAngleDown />
+          </div>
+        </div>
+        {isOpen && (
+          <div className="absolute top-full w-full">
+            {options.map((option, index) => (
+              <div
+                key={option.id}
+                className={`flex flex-row justify-center border border-input-border-color bg-input p-2 text-input-text hover:bg-dropdown-option-hover-color ${
+                  index === options.length - 1 ? "rounded-b-2xl" : ""
+                }`}
+                onClick={() => {
+                  setIsOpen(false);
+                  setTheme(option.id);
+                }}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ThemeDropdown;

src/routes.tsx

@@ -7,8 +7,8 @@ import { Radon } from "./pages/Radon";
 import { Settings } from "./pages/Settings/";
 import { AboutBlank } from "./AboutBlank";
 import { Faq } from "./pages/Faq";
-import { registerRemoteListener } from "@mercuryworkshop/bare-mux";
+// import { registerRemoteListener } from "@mercuryworkshop/bare-mux";
-import { setTransport } from './util/transports';
+import { setTransport } from "./util/transports";
 import "./style.css";
 import "./i18n";
 
@@ -19,15 +19,13 @@ export default function Routes() {
     "/wisp/"; // @TODO Japan - US ping
 
   if ("serviceWorker" in navigator) {
-    console.log("am bout to bus");
+    navigator.serviceWorker.ready.then(async () => {
-    navigator.serviceWorker.ready.then(async (sw) => {
+      //await registerRemoteListener(sw.active!)
-        //await registerRemoteListener(sw.active!)
+      setTransport();
-        setTransport();
+    });
+    navigator.serviceWorker.register("/sw.js", {
+      scope: "/~/"
     });
-    navigator.serviceWorker
-      .register("/sw.js", {
-        scope: "/~/"
-      })
   }
   return (
     <LocationProvider>

src/style.css

@@ -1,9 +1,138 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap");
-
+@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@layer base {
-body {
+  :root,
-  background-color: var(--background-primary) !important;
+  .main {
+    --background-primary: #191724;
+    --background-lighter: #16121f;
+    --navbar-color: #26233a;
+    --navbar-height: 60px;
+    --navbar-text-color: #7967dd;
+    --navbar-link-color: #e0def4;
+    --navbar-link-hover-color: gray;
+    --navbar-font: "Roboto";
+    --input-text-color: #e0def4;
+    --input-placeholder-color: white;
+    --input-background-color: #1f1d2e;
+    --input-border-color: #eb6f92;
+    --input-border-size: 1.3px;
+    --navbar-logo-filter: none;
+    --dropdown-option-hover-color: #312a49;
+    --tab-color: var(--black);
+    --border-color: #16121f;
+  }
+  .hacker {
+    --background-primary: #000 !important;
+    --background-lighter: #000 !important;
+    --navbar-color: #000 !important;
+    --navbar-height: 60px !important;
+    --navbar-text-color: greenyellow !important;
+    --navbar-link-color: greenyellow !important;
+    --navbar-link-hover-color: green !important;
+    --navbar-font: "Roboto" !important;
+    --input-text-color: greenyellow !important;
+    --input-placeholder-color: white !important;
+    --input-background-color: #000 !important;
+    --input-border-color: greenyellow !important;
+    --input-border-size: 1.3px !important;
+    --navbar-logo-filter: none !important;
+    --dropdown-option-hover-color: #312a49 !important;
+    --tab-color: var(--black) !important;
+    --border-color: greenyellow !important;
+  }
+  .catppuccin-mocha {
+    --background-primary: #1e1e2e !important;
+    --background-lighter: #181825 !important;
+    --navbar-color: #181825 !important;
+    --navbar-height: 60px !important;
+    --navbar-text-color: #cdd6f4 !important;
+    --navbar-link-color: #89b4fa !important;
+    --navbar-link-hover-color: #cba6f7 !important;
+    --navbar-font: "Roboto" !important;
+    --input-text-color: #cdd6f4 !important;
+    --input-placeholder-color: #a6adc8 !important;
+    --input-background-color: #11111b !important;
+    --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important;
+    --input-border-size: 1.3px !important;
+    --navbar-logo-filter: none !important;
+    --dropdown-option-hover-color: #11111b !important;
+    --tab-color: #313244 !important;
+    --active-color: #cba6f7 !important;
+  }
+  .catppuccin-macchiato {
+    --background-primary: #24273a !important;
+    --background-lighter: #1e2030 !important;
+    --navbar-color: #1e2030 !important;
+    --navbar-height: 60px !important;
+    --navbar-text-color: #cad3f5 !important;
+    --navbar-link-color: #8aadf4 !important;
+    --navbar-link-hover-color: #c6a0f6 !important;
+    --navbar-font: "Roboto" !important;
+    --input-text-color: #cad3f5 !important;
+    --input-placeholder-color: #a5adcb !important;
+    --input-background-color: #181926 !important;
+    --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important;
+    --input-border-size: 1.3px !important;
+    --navbar-logo-filter: none !important;
+    --dropdown-option-hover-color: #181926 !important;
+    --tab-color: #363a4f !important;
+    --active-color: #c6a0f6 !important;
+  }
+  .catppuccin-frappe {
+    --background-primary: #303446 !important;
+    --background-lighter: #292c3c !important;
+    --navbar-color: #292c3c !important;
+    --navbar-height: 60px !important;
+    --navbar-text-color: #c6d0f5 !important;
+    --navbar-link-color: #8caaee !important;
+    --navbar-link-hover-color: #ca9ee6 !important;
+    --navbar-font: "Roboto" !important;
+    --input-text-color: #c6d0f5 !important;
+    --input-placeholder-color: #a5adce !important;
+    --input-background-color: #232634 !important;
+    --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important;
+    --input-border-size: 1.3px !important;
+    --navbar-logo-filter: none !important;
+    --dropdown-option-hover-color: #232634 !important;
+    --tab-color: #414559 !important;
+    --active-color: #ca9ee6 !important;
+  }
+  .catppuccin-latte {
+    --background-primary: #eff1f5 !important;
+    --background-lighter: #e6e9ef !important;
+    --navbar-color: #e6e9ef !important;
+    --navbar-height: 60px !important;
+    --navbar-text-color: #4c4f69 !important;
+    --navbar-link-color: #1e66f5 !important;
+    --navbar-link-hover-color: #8839ef !important;
+    --navbar-font: "Roboto" !important;
+    --input-text-color: #4c4f69 !important;
+    --input-placeholder-color: #6c6f85 !important;
+    --input-background-color: #dce0e8 !important;
+    --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important;
+    --input-border-size: 1.3px !important;
+    --navbar-logo-filter: none !important;
+    --dropdown-option-hover-color: #dce0e8 !important;
+    --tab-color: #ccd0da !important;
+    --active-color: #8839ef !important;
+  }
+}
+body {
+  @apply bg-primary;
+  background-image: var(--background-image);
+  background-position: center;
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+.font-inter {
+  font-family: "Inter", sans-serif;
+  font-weight: 300;
+}
+
+.font-roboto {
+  font-family: "Roboto";
 }

vite.config.ts

@@ -59,10 +59,15 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/bare\//, "")
       },
       "/wisp/": {
-        target: "http://localhost:3000/",
+        target: "http://localhost:8080/wisp/",
         changeOrigin: true,
         ws: true,
         rewrite: (path) => path.replace(/^\/wisp\//, "")
+      },
+      "/search": {
+        target: "http://localhost:8080/search",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/search/, "")
       }
     }
   }