Merge pull request #5 from kleo-dev/settings-and-small-stuff

Settings and small stuff

README.md

@@ -1,3 +1,16 @@
+## Setup
+### Requirements
+- Node.Js with npm
+- Postgres DB
+
+```python
+DB_USER= # Usually related to the OS username but do your own research
+DB_HOST=localhost
+DB_PASSWORD= # Can be empty
+DB_PORT=5432 # Optional
+```
+
+
 ## Keywords
 
 - Voxa Client: The user-side app which communicates with all below.

package-lock.json

@@ -11,12 +11,15 @@
         "@lexical/react": "^0.34.0",
         "@lexical/rich-text": "^0.34.0",
         "@radix-ui/react-avatar": "^1.1.10",
+        "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@types/axios": "^0.9.36",
         "@types/date-fns": "^2.5.3",
@@ -1069,6 +1072,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1518,6 +1551,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -1559,6 +1635,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
@@ -1696,6 +1802,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",

package.json

@@ -14,12 +14,15 @@
     "@lexical/react": "^0.34.0",
     "@lexical/rich-text": "^0.34.0",
     "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@types/axios": "^0.9.36",
     "@types/date-fns": "^2.5.3",

src/app/api/db.ts

@@ -1,11 +1,12 @@
+import { envEnsure, envNumber } from "@/lib/env";
 import { Pool } from "pg";
 
 const pool = new Pool({
-  user: "klestiselimaj",
+  user: envEnsure("DB_USER"),
-  host: "localhost",
+  host: envEnsure("DB_HOST"),
   database: "postgres",
-  password: "",
+  password: envEnsure("DB_PASSWORD"),
-  port: 5432,
+  port: envNumber("DB_PORT") || 5432,
 });
 
 const createUsersTableQuery = `

src/app/home/page.tsx

@@ -1,28 +1,14 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { Card } from "@/components/ui/card";
-import { useState } from "react";
 import AppSidebar from "@/components/Sidebar";
 import MessageBox from "@/components/MessageBox";
+import useUser from "@/hooks/get-user";
 
 export default function HomePage() {
-  const [messages, setMessages] = useState([
+  const { user, loading } = useUser();
-    { id: 1, user: "Alice", text: "Hey, how are you?" },
-    { id: 2, user: "You", text: "Doing good, just working on the chat app!" },
-  ]);
-
-  const [input, setInput] = useState("");
-
-  function sendMessage() {
-    if (!input.trim()) return;
-    setMessages([...messages, { id: Date.now(), user: "You", text: input }]);
-    setInput("");
-  }
 
   return (
-    <AppSidebar>
+    <AppSidebar user={user}>
       <MessageBox
         channelName="Alice"
         messages={[]}
@@ -33,36 +19,3 @@ export default function HomePage() {
     </AppSidebar>
   );
 }
-
-function ServerButton({
-  label,
-  icon,
-}: {
-  label: string;
-  icon: React.ReactNode;
-}) {
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className="rounded-full h-12 w-12"
-      title={label}
-    >
-      {icon}
-    </Button>
-  );
-}
-
-function DMItem({ name, status }: { name: string; status: string }) {
-  return (
-    <Card className="p-2 flex items-center gap-2 cursor-pointer hover:bg-accent">
-      <Avatar className="h-8 w-8">
-        <AvatarFallback>{name[0]}</AvatarFallback>
-      </Avatar>
-      <div className="flex flex-col">
-        <span className="text-sm font-medium">{name}</span>
-        <span className="text-xs text-muted-foreground">{status}</span>
-      </div>
-    </Card>
-  );
-}

src/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { cookies } from "next/headers";
+import { parseClientSettings } from "@/lib/clientSettings";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -17,15 +19,19 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const cookieStore = await cookies();
+
+  const settings = parseClientSettings(cookieStore.get("settings")?.value);
+
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased ${settings.theme}`}
       >
         {children}
       </body>

src/app/login/page.tsx

@@ -1,85 +1,7 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import Auth from "@/components/auth/Auth";
-import { Input } from "@/components/ui/input";
-import axios from "axios";
-import { useState } from "react";
-import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
-import { Label } from "@/components/ui/label";
-import Link from "next/link";
 
 export default function Login() {
-  const [username, setUsername] = useState("");
+  return <Auth kind="login" />;
-  const [password, setPassword] = useState("");
-  const [feedback, setFeedback] = useState<
-    undefined | { kind: "error" | "info"; message: string }
-  >();
-
-  const router = useRouter();
-
-  const login = async () => {
-    setFeedback(undefined);
-    try {
-      const res = await axios.put("/api/user", { username, password });
-
-      Cookies.set("token", (res.data as any).token);
-      setFeedback({
-        kind: "info",
-        message: "Login successful! Redirecting...",
-      });
-
-      // small delay to show feedback before redirect
-      setTimeout(() => router.push("/home"), 800);
-    } catch (err: any) {
-      setFeedback({
-        kind: "error",
-        message:
-          err.response?.data?.message || "Login failed. Please try again.",
-      });
-    }
-  };
-
-  return (
-    <div className="h-screen flex items-center">
-      <div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900">
-        <h1 className="mx-auto text-3xl">Login</h1>
-        <span>
-          Username or email
-          <Input onChange={(e) => setUsername(e.target.value)} type="email" />
-        </span>
-        <span>
-          Password
-          <Input
-            onChange={(e) => setPassword(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") login();
-            }}
-            type="password"
-          />
-        </span>
-
-        {/* Feedback message */}
-        {feedback && (
-          <div
-            className={`text-sm rounded-md p-2 ${
-              feedback.kind === "error"
-                ? "bg-red-500/20 text-red-400"
-                : "bg-green-500/20 text-green-400"
-            }`}
-          >
-            {feedback.message}
-          </div>
-        )}
-
-        <Label>
-          Don&apos;t have an account? <Link href={"/signup"}>Sign Up</Link>
-        </Label>
-
-        <Button className="mt-2" onClick={login}>
-          Login
-        </Button>
-      </div>
-    </div>
-  );
 }

src/app/server/[id]/page.tsx

@@ -84,6 +84,7 @@ export default function Server() {
 
   return (
     <AppSidebar
+      user={user}
       server={
         {
           channels: [{ id: "general", name: "General", kind: "text" }],

src/app/settings/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useAccountSettings, useClientSettings } from "@/hooks/use-settings";
+import { setClientSettings } from "@/lib/clientSettings";
+import Settings from "./settings";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Card } from "@/components/ui/card";
+import { CardContent } from "@/components/ui/card";
+import { ACCOUNT_SCHEMA, CLIENT_SCHEMA } from "@/types/settings";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { ChevronLeftCircle } from "lucide-react";
+
+export default function SettingsPage() {
+  const [settings, setSettings] = useClientSettings();
+  const [accountSettings, setAccountSettings] = useAccountSettings();
+  const router = useRouter();
+
+  return (
+    <div>
+      <Button
+        variant="outline"
+        className="ml-2 mt-2"
+        onClick={() => router.back()}
+      >
+        <ChevronLeftCircle />
+      </Button>
+      <Tabs className="mx-auto mt-3" defaultValue="client">
+        <TabsList className="mx-auto">
+          <TabsTrigger value="client">Client Settings</TabsTrigger>
+          <TabsTrigger value="account">Account Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="client">
+          <Card className="w-xl mx-auto">
+            <CardContent className="flex flex-col gap-3">
+              <Settings
+                settings={settings}
+                setSettings={setSettings}
+                schema={CLIENT_SCHEMA}
+                onSave={() => {
+                  setClientSettings(settings);
+                  router.refresh();
+                }}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="account">
+          <Card className="w-xl mx-auto">
+            <CardContent className="flex flex-col gap-3">
+              <Settings
+                settings={accountSettings}
+                setSettings={setAccountSettings}
+                schema={ACCOUNT_SCHEMA}
+                onSave={() => {}}
+              />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/app/settings/settings.tsx

@@ -0,0 +1,154 @@
+import { Dispatch, SetStateAction, useState, useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { StringMap } from "@/types/typeUtils";
+import { Button } from "@/components/ui/button";
+
+export class RegexSetting {
+  placeholder: string;
+  pattern: RegExp;
+
+  constructor(placeholder: string, pattern: RegExp) {
+    this.placeholder = placeholder;
+    this.pattern = pattern;
+  }
+}
+
+export type SettingsSchema = StringMap<
+  "boolean" | "string" | "number" | string[] | RegexSetting
+>;
+
+export default function Settings<T>({
+  settings,
+  setSettings,
+  schema,
+  onSave,
+}: {
+  settings: T;
+  setSettings: Dispatch<SetStateAction<T>>;
+  schema: SettingsSchema;
+  onSave: () => void;
+}) {
+  const [feedback, setFeedback] = useState<
+    undefined | { kind: "error" | "info"; message: string }
+  >();
+
+  // Ref to store debounce timer
+  const debounceRef = useRef<NodeJS.Timeout>(undefined);
+
+  const handleChange = (key: string, value: any) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const handleRegexChange = (
+    key: string,
+    regexSetting: RegexSetting,
+    value: string
+  ) => {
+    handleChange(key, value);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      if (!regexSetting.pattern.test(value)) {
+        setFeedback({
+          kind: "error",
+          message: `Value does not match the pattern!`,
+        });
+      } else {
+        setFeedback(undefined);
+      }
+    }, 1500);
+  };
+
+  const renderInput = (key: string, type: any) => {
+    if (Array.isArray(type)) {
+      return (
+        <Select
+          value={(settings as any)[key]}
+          onValueChange={(val) => handleChange(key, val)}
+        >
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder={key} />
+          </SelectTrigger>
+          <SelectContent>
+            {type.map((option) => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    } else if (type === "boolean") {
+      return (
+        <Checkbox
+          checked={(settings as any)[key]}
+          onCheckedChange={(val) => handleChange(key, val)}
+        />
+      );
+    } else if (type === "string") {
+      return (
+        <Input
+          type="text"
+          value={(settings as any)[key]}
+          onChange={(e) => handleChange(key, e.target.value)}
+        />
+      );
+    } else if (type === "number") {
+      return (
+        <Input
+          type="number"
+          value={(settings as any)[key]}
+          onChange={(e) => handleChange(key, Number(e.target.value))}
+        />
+      );
+    } else if (type instanceof RegexSetting) {
+      return (
+        <Input
+          type="text"
+          value={(settings as any)[key] || ""}
+          placeholder={type.placeholder}
+          onChange={(e) => handleRegexChange(key, type, e.target.value)}
+        />
+      );
+    }
+  };
+
+  return (
+    <>
+      {Object.entries(schema).map(([key, type]) => (
+        <div key={key} className="flex items-center justify-between space-x-4">
+          <label className="capitalize">{key}</label>
+          {renderInput(key, type)}
+        </div>
+      ))}
+
+      {feedback && (
+        <div
+          className={`text-sm rounded-md p-2 ${
+            feedback.kind === "error"
+              ? "bg-red-500/20 text-red-400"
+              : "bg-green-500/20 text-green-400"
+          }`}
+        >
+          {feedback.message}
+        </div>
+      )}
+
+      <Button
+        onClick={() => {
+          if (feedback === undefined) onSave();
+        }}
+        variant="outline"
+      >
+        Save
+      </Button>
+    </>
+  );
+}

src/app/signup/page.tsx

@@ -1,150 +1,7 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import Auth from "@/components/auth/Auth";
-import { Input } from "@/components/ui/input";
-import axios from "axios";
-import { useState } from "react";
-import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
-import Link from "next/link";
 
 export default function SignUp() {
-  const [username, setUsername] = useState("");
+  return <Auth kind="create" />;
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [acceptTerms, setAcceptTerms] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [feedback, setFeedback] = useState<
-    undefined | { kind: "error" | "info"; message: string }
-  >();
-
-  const router = useRouter();
-
-  const validateInput = ():
-    | { kind: "error" | "info"; message: string }
-    | undefined => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
-
-    if (!emailRegex.test(email)) {
-      return { kind: "error", message: "Invalid email format." };
-    }
-    if (!usernameRegex.test(username)) {
-      return {
-        kind: "error",
-        message:
-          "Username must be 3–20 characters and only letters, numbers, or underscores.",
-      };
-    }
-    if (password.length < 6) {
-      return {
-        kind: "error",
-        message: "Password must be at least 6 characters long.",
-      };
-    }
-    if (password !== confirmPassword) {
-      return { kind: "error", message: "Passwords do not match." };
-    }
-    if (!acceptTerms) {
-      return {
-        kind: "error",
-        message: "You must accept the terms to sign up.",
-      };
-    }
-    return;
-  };
-
-  const signup = async () => {
-    setFeedback(undefined);
-    const validationError = validateInput();
-    if (validationError) {
-      setFeedback(validationError);
-      return;
-    }
-
-    try {
-      setLoading(true);
-      const res = await axios.post("/api/user", { username, password, email });
-      Cookies.set("token", (res.data as any).token);
-
-      setFeedback({ kind: "info", message: "Account created! Redirecting..." });
-      setTimeout(() => router.push("/home"), 1000);
-    } catch (err: any) {
-      setFeedback({
-        kind: "error",
-        message:
-          err.response?.data?.message ||
-          "Signup failed. Please try again later.",
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="h-screen flex items-center">
-      <div className="w-md mx-auto p-7 rounded-2xl flex flex-col gap-4 bg-neutral-900 shadow-lg">
-        <h1 className="mx-auto text-3xl font-bold">Create an Account</h1>
-        <span>
-          Email
-          <Input
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="[email protected]"
-            type="email"
-          />
-        </span>
-        <span>
-          Username
-          <Input
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="john_doe"
-          />
-        </span>
-        <span>
-          Password
-          <Input
-            onChange={(e) => setPassword(e.target.value)}
-            type="password"
-          />
-        </span>
-        <span>
-          Confirm Password
-          <Input
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") signup();
-            }}
-            type="password"
-          />
-        </span>
-
-        <label className="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            checked={acceptTerms}
-            onChange={(e) => setAcceptTerms(e.target.checked)}
-          />
-          I agree to the <Link className="underline" href="/terms">terms & conditions</Link>
-        </label>
-
-        {/* Feedback message */}
-        {feedback && (
-          <div
-            className={`text-sm rounded-md p-2 ${
-              feedback.kind === "error"
-                ? "bg-red-500/20 text-red-400"
-                : "bg-green-500/20 text-green-400"
-            }`}
-          >
-            {feedback.message}
-          </div>
-        )}
-
-        <Button className="mt-4" onClick={signup} disabled={loading}>
-          {loading ? "Signing Up..." : "Sign Up"}
-        </Button>
-      </div>
-    </div>
-  );
 }

src/components/MessageBox.tsx

@@ -18,6 +18,7 @@ import remarkGfm from "remark-gfm";
 import { NumberMap, StringMap } from "@/types/typeUtils";
 import { User } from "@/hooks/get-user";
 import axios from "axios";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 
 function MessageContainer({
   message,
@@ -40,7 +41,18 @@ function MessageContainer({
   return (
     <div className="flex flex-col gap-3 rounded-lg p-4 hover:bg-accent">
       <div className="flex gap-2">
-        <div className="w-8 h-8 rounded-full bg-gray-400" />
+        {/* <div className="w-8 h-8 rounded-full bg-gray-400" /> */}
+        <Avatar className="h-8 w-8">
+          <AvatarImage
+            src="https://github.com/kleo-dev.png"
+            alt={message.from.toString()}
+          />
+          <AvatarFallback>
+            {userList[message.from]
+              ? userList[message.from].username
+              : message.from}
+          </AvatarFallback>
+        </Avatar>
         <div className="flex flex-col flex-1">
           <span className="font-bold flex gap-1 items-center">
             {userList[message.from]

src/components/Sidebar.tsx

@@ -5,6 +5,7 @@ import {
   MessageCircle,
   Plus,
   Search,
+  SettingsIcon,
   Volume2Icon,
 } from "lucide-react";
 import Server from "@/types/server";
@@ -24,16 +25,21 @@ import { Input } from "./ui/input";
 import { Label } from "./ui/label";
 import { Button } from "./ui/button";
 import { Card } from "./ui/card";
-import { Avatar, AvatarFallback } from "./ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { ScrollArea } from "./ui/scroll-area";
 import { useRouter } from "next/navigation";
 import Channel from "@/types/channel";
+import Link from "next/link";
+import { NumberMap } from "@/types/typeUtils";
+import { User } from "@/hooks/get-user";
 
 export default function AppSidebar({
+  user,
   server,
   children,
 }: Readonly<{
   server?: Server;
+  user: User | null;
   children: React.ReactNode;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
@@ -143,6 +149,12 @@ export default function AppSidebar({
               </DialogFooter>
             </DialogContent>
           </Dialog>
+
+          <footer className="mt-auto">
+            <Link href="/settings">
+              <SettingsIcon />
+            </Link>
+          </footer>
         </div>
 
         {/* Right column */}
@@ -177,6 +189,10 @@ export default function AppSidebar({
               )}
             </div>
           </ScrollArea>
+
+          <footer className="mt-auto pb-3 pl-3 pr-3">
+            <DMItem name={user?.username || "Loading.."} status="online" />
+          </footer>
         </div>
       </div>
 
@@ -189,6 +205,7 @@ function DMItem({ name, status }: { name: string; status: string }) {
   return (
     <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
       <Avatar className="h-8 w-8">
+        <AvatarImage src="https://github.com/kleo-dev.png" alt={name} />
         <AvatarFallback>{name[0]}</AvatarFallback>
       </Avatar>
       <div className="flex flex-col">

src/components/auth/Auth.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Card } from "../ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import CreateAccount from "./CreateAccount";
+import Login from "./Login";
+
+export default function Auth({ kind }: { kind: "login" | "create" }) {
+  return (
+    <div className="h-screen flex items-center">
+      <Tabs defaultValue={kind} className="mx-auto">
+        <TabsList className="mx-auto">
+          <TabsTrigger value="login">Login</TabsTrigger>
+          <TabsTrigger value="create">Create Account</TabsTrigger>
+        </TabsList>
+        <TabsContent value="login">
+          <Card className="w-md">
+            <Login />
+          </Card>
+        </TabsContent>
+        <TabsContent value="create">
+          <Card className="w-md">
+            <CreateAccount />
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/components/auth/CreateAccount.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import { useState } from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Label } from "../ui/label";
+
+export default function CreateAccount() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [acceptTerms, setAcceptTerms] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [feedback, setFeedback] = useState<
+    undefined | { kind: "error" | "info"; message: string }
+  >();
+
+  const router = useRouter();
+
+  const validateInput = ():
+    | { kind: "error" | "info"; message: string }
+    | undefined => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
+
+    if (!emailRegex.test(email)) {
+      return { kind: "error", message: "Invalid email format." };
+    }
+    if (!usernameRegex.test(username)) {
+      return {
+        kind: "error",
+        message:
+          "Username must be 3–20 characters and only letters, numbers, or underscores.",
+      };
+    }
+    if (password.length < 6) {
+      return {
+        kind: "error",
+        message: "Password must be at least 6 characters long.",
+      };
+    }
+    if (password !== confirmPassword) {
+      return { kind: "error", message: "Passwords do not match." };
+    }
+    if (!acceptTerms) {
+      return {
+        kind: "error",
+        message: "You must accept the terms to sign up.",
+      };
+    }
+    return;
+  };
+
+  const signup = async () => {
+    setFeedback(undefined);
+    const validationError = validateInput();
+    if (validationError) {
+      setFeedback(validationError);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const res = await axios.post("/api/user", { username, password, email });
+      Cookies.set("token", (res.data as any).token);
+
+      setFeedback({ kind: "info", message: "Account created! Redirecting..." });
+      setTimeout(() => router.push("/home"), 1000);
+    } catch (err: any) {
+      setFeedback({
+        kind: "error",
+        message:
+          err.response?.data?.message ||
+          "Signup failed. Please try again later.",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle className="text-3xl mx-auto">Create an Account</CardTitle>
+      </CardHeader>
+      <CardContent className="gap-3 flex flex-col">
+        <span>
+          Email
+          <Input
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="[email protected]"
+            type="email"
+          />
+        </span>
+        <span>
+          Username
+          <Input
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="john_doe"
+          />
+        </span>
+        <span>
+          Password
+          <Input
+            onChange={(e) => setPassword(e.target.value)}
+            type="password"
+          />
+        </span>
+        <span>
+          Confirm Password
+          <Input
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") signup();
+            }}
+            type="password"
+          />
+        </span>
+
+        <Label className="flex items-center gap-2 text-sm">
+          <input
+            type="checkbox"
+            checked={acceptTerms}
+            onChange={(e) => setAcceptTerms(e.target.checked)}
+          />
+          I agree to the{" "}
+          <Link className="underline" href="/terms">
+            terms & conditions
+          </Link>
+        </Label>
+
+        {feedback && (
+          <div
+            className={`text-sm rounded-md p-2 ${
+              feedback.kind === "error"
+                ? "bg-red-500/20 text-red-400"
+                : "bg-green-500/20 text-green-400"
+            }`}
+          >
+            {feedback.message}
+          </div>
+        )}
+
+        <Button onClick={signup} disabled={loading}>
+          {loading ? "Signing Up..." : "Sign Up"}
+        </Button>
+      </CardContent>
+    </>
+  );
+}

src/components/auth/Login.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import axios from "axios";
+import { useState } from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import { Label } from "@/components/ui/label";
+import Link from "next/link";
+import {
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+
+export default function Login() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [feedback, setFeedback] = useState<
+    undefined | { kind: "error" | "info"; message: string }
+  >();
+
+  const router = useRouter();
+
+  const login = async () => {
+    setFeedback(undefined);
+    try {
+      const res = await axios.put("/api/user", { username, password });
+
+      Cookies.set("token", (res.data as any).token);
+      setFeedback({
+        kind: "info",
+        message: "Login successful! Redirecting...",
+      });
+
+      // small delay to show feedback before redirect
+      setTimeout(() => router.push("/home"), 800);
+    } catch (err: any) {
+      setFeedback({
+        kind: "error",
+        message:
+          err.response?.data?.message || "Login failed. Please try again.",
+      });
+    }
+  };
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle className="text-3xl mx-auto">Login</CardTitle>
+      </CardHeader>
+      <CardContent className="gap-3 flex flex-col">
+        <span>
+          Username or email
+          <Input onChange={(e) => setUsername(e.target.value)} type="email" />
+        </span>
+        <span>
+          Password
+          <Input
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") login();
+            }}
+            type="password"
+          />
+        </span>
+
+        {feedback && (
+          <div
+            className={`text-sm rounded-md p-2 ${
+              feedback.kind === "error"
+                ? "bg-red-500/20 text-red-400"
+                : "bg-green-500/20 text-green-400"
+            }`}
+          >
+            {feedback.message}
+          </div>
+        )}
+
+        <Button className="mt-2" onClick={login}>
+          Login
+        </Button>
+      </CardContent>
+    </>
+  );
+}

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/select.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/hooks/use-settings.ts

@@ -0,0 +1,29 @@
+"use client";
+
+import { defaultSettings, getClientSettings } from "@/lib/clientSettings";
+import { AccountSettings, ClientSettings } from "@/types/settings";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+export function useClientSettings(): [
+  ClientSettings,
+  Dispatch<SetStateAction<ClientSettings>>
+] {
+  const [settings, setSettings] = useState<ClientSettings>(defaultSettings);
+
+  useEffect(() => {
+    setSettings(getClientSettings());
+  }, []);
+
+  return [settings, setSettings];
+}
+
+export function useAccountSettings(): [
+  AccountSettings,
+  Dispatch<SetStateAction<AccountSettings>>
+] {
+  const [settings, setSettings] = useState<AccountSettings>({
+    node_ip: "node0.voxa.org",
+  });
+
+  return [settings, setSettings];
+}

src/lib/clientSettings.ts

@@ -0,0 +1,31 @@
+import { ClientSettings } from "@/types/settings";
+import Cookies from "js-cookie";
+
+export const defaultSettings: ClientSettings = {
+  theme: "dark",
+};
+
+export function parseClientSettings(s?: string): ClientSettings {
+  let parsed: Partial<ClientSettings> = {};
+
+  if (s) {
+    try {
+      parsed = JSON.parse(s);
+    } catch {
+      parsed = {};
+    }
+  }
+
+  return {
+    ...defaultSettings,
+    ...parsed,
+  };
+}
+
+export function getClientSettings(): ClientSettings {
+  return parseClientSettings(Cookies.get("settings"));
+}
+
+export function setClientSettings(value?: ClientSettings) {
+  Cookies.set("settings", JSON.stringify(value || defaultSettings));
+}

src/lib/env.ts

@@ -0,0 +1,32 @@
+export function env(name: string): string | undefined {
+  return process.env[name];
+}
+
+export function envEnsure(name: string): string {
+  const v = process.env[name];
+
+  if (v === undefined) {
+    throw new Error(
+      `Environment variable '${name}' is required but doesn't exist`
+    );
+  }
+
+  return v;
+}
+
+export function envNumber(name: string): number | undefined {
+  const v = process.env[name];
+  return v ? parseInt(v) : undefined;
+}
+
+export function envNumberEnsure(name: string): number {
+  const v = process.env[name];
+
+  if (v === undefined) {
+    throw new Error(
+      `Environment variable '${name}' is required but doesn't exist`
+    );
+  }
+
+  return parseInt(v);
+}

src/types/settings.ts

@@ -0,0 +1,20 @@
+import { RegexSetting, SettingsSchema } from "@/app/settings/settings";
+
+export interface ClientSettings {
+  theme: "light" | "dark";
+}
+
+export interface AccountSettings {
+  node_ip: string;
+}
+
+export const CLIENT_SCHEMA: SettingsSchema = {
+  theme: ["light", "dark"],
+};
+
+export const ACCOUNT_SCHEMA: SettingsSchema = {
+  node_ip: new RegexSetting(
+    "node2.voxa.org",
+    /^(?:(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}|(?:\d{1,3}\.){3}\d{1,3})$/
+  ),
+};