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

This reverts commit cb9b15fccc, reversing changes made to 0073a1121f.
2025-05-17 05:20:01 -04:00 · 2024-04-16 21:22:01 -05:00 · 2024-04-16 21:22:01 -05:00 · 06ce2d0177
commit 06ce2d0177
parent cb9b15fccc
18 changed files with 354 additions and 237 deletions
--- a/package.json
+++ b/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",
--- a/public/themes/catppuccinFrappe.css
+++ b/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";
-}
--- a/public/themes/catppuccinLatte.css
+++ b/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";
-}
--- a/public/themes/catppuccinMacchiato.css
+++ b/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";
-}
--- a/public/themes/catppuccinMocha.css
+++ b/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";
-}
--- a/public/themes/hacker.css
+++ b/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";
-}
--- a/public/themes/main.css
+++ b/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";
-}
--- a/src/components/ThemeProvider.tsx
+++ b/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;
+};
--- a/src/index.tsx
+++ b/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 />
-        </div>
+        <Routes />
        <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")
+);
--- a/src/locales/en.json
+++ b/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",
-    "catppuccinMacchiato": "Catppuccin Macchiato",
-    "catppuccinFrappe": "Catppuccin Frappe",
-    "catppuccinLatte": "Catppuccin Latte"
+    "catppuccin-mocha": "Catppuccin Mocha",
+    "catppuccin-macchiato": "Catppuccin Macchiato",
+    "catppuccin-frappe": "Catppuccin Frappe",
+    "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.",
--- a/src/locales/es.json
+++ b/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",
-    "catppuccinMacchiato": "Catppuccin Macchiato",
-    "catppuccinFrappe": "Catppuccin Frappe",
-    "catppuccinLatte": "Catppuccin Latte"
+    "catppuccin-mocha": "Catppuccin Mocha",
+    "catppuccin-macchiato": "Catppuccin Macchiato",
+    "catppuccin-frappe": "Catppuccin Frappe",
+    "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.",
--- a/src/locales/ja.json
+++ b/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",
-    "catppuccinMacchiato": "Catppuccin Macchiato",
-    "catppuccinFrappe": "Catppuccin Frappe",
-    "catppuccinLatte": "Catppuccin Latte"
+    "catppuccin-mocha": "Catppuccin Mocha",
+    "catppuccin-macchiato": "Catppuccin Macchiato",
+    "catppuccin-frappe": "Catppuccin Frappe",
+    "catppuccin-latte": "Catppuccin Latte"
  },
  "clipboard": "コピーしました!",
  "bareError": "処理を実行できませんでした　Bareサーバーが存在し、そしてアクセスが拒否されていない事も確認してから、再度お試してください",
--- a/src/pages/Settings/Customization.tsx
+++ b/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 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 { background, setBackground } = useTheme();
  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>
  );
--- a/src/pages/Settings/PersonCard.tsx
+++ b/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" />
--- a/src/pages/Settings/ThemeDropdown.tsx
+++ b/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;
--- a/src/routes.tsx
+++ b/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 { setTransport } from './util/transports';
+// import { registerRemoteListener } from "@mercuryworkshop/bare-mux";
+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 (sw) => {
-        //await registerRemoteListener(sw.active!)
-        setTransport();
+    navigator.serviceWorker.ready.then(async () => {
+      //await registerRemoteListener(sw.active!)
+      setTransport();
+    });
+    navigator.serviceWorker.register("/sw.js", {
+      scope: "/~/"
    });
-    navigator.serviceWorker
-      .register("/sw.js", {
-        scope: "/~/"
-      })
  }
  return (
    <LocationProvider>
--- a/src/style.css
+++ b/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;
-
-body {
-  background-color: var(--background-primary) !important;
+@layer base {
+  :root,
+  .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";
 }
--- a/vite.config.ts
+++ b/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/, "")
      }
    }
  }