(feat): big methanium/ui migration

(feat): update message state icons
(qol): update todo
(qol): formatted

packages/cache/src/index.ts

@@ -175,12 +175,7 @@ export function createCache(accountId: string, options: CacheOptions = {}) {
             const userId = Number(key);
             return retained.has(userId)
               ? []
-              : [
-                  deleteDatabaseEntry(
-                    "cache",
-                    storedKey("conversations", key),
-                  ),
-                ];
+              : [deleteDatabaseEntry("cache", storedKey("conversations", key))];
           }),
         );
       },
@@ -210,12 +205,7 @@ export function createCache(accountId: string, options: CacheOptions = {}) {
             const userId = Number(key);
             return retained.has(userId)
               ? []
-              : [
-                  deleteDatabaseEntry(
-                    "cache",
-                    storedKey("conversations", key),
-                  ),
-                ];
+              : [deleteDatabaseEntry("cache", storedKey("conversations", key))];
           }),
         );
       },
@@ -241,12 +231,7 @@ export function createCache(accountId: string, options: CacheOptions = {}) {
           storedEntries.flatMap(([key]) =>
             retained.has(Number(key))
               ? []
-              : [
-                  deleteDatabaseEntry(
-                    "cache",
-                    storedKey("conversations", key),
-                  ),
-                ],
+              : [deleteDatabaseEntry("cache", storedKey("conversations", key))],
           ),
         );
       },

packages/chat/src/components/message.tsx

@@ -1,6 +1,6 @@
 import type { RawMessage } from "../values";
 import Text from "@tensamin/markdown/text";
-import { AlertTriangle, Check, Ellipse, RefreshCw } from "lucide-react";
+import { AlertTriangle, Check, CheckLine, RefreshCw } from "lucide-react";
 import { memo, useCallback, useEffect, useState } from "react";
 import type { User } from "@tensamin/user/context";
 
@@ -289,11 +289,11 @@ function MessageComponent({
                           color="var(--primary-foreground-alt)"
                         />
                       ) : message.MessageState === "received" ? (
-                        <Check size={12} color="var(--muted-foreground)" />
+                        <CheckLine size={12} color="var(--muted-foreground)" />
                       ) : message.MessageState === "sent" ? (
-                        <RefreshCw size={12} color="var(--muted-foreground)" />
+                        <Check size={12} color="var(--muted-foreground)" />
                       ) : message.MessageState === "sending" ? (
-                        <Ellipse size={12} color="var(--muted-foreground)" />
+                        <RefreshCw size={12} color="var(--muted-foreground)" />
                       ) : null}
                       {actuallyFailed && (
                         <AlertTriangle color="var(--destructive)" size={12} />

packages/onboarding/src/index.tsx

@@ -36,6 +36,9 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
   const [showLoading, setShowLoading] = useState(false);
   const [error, setError] = useState("");
   const [errorDescription, setErrorDescription] = useState("");
+  const [onboardingThemeId, setOnboardingThemeId] = useState<string | null>(
+    null,
+  );
 
   useEffect(() => {
     let active = true;
@@ -63,13 +66,19 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
           return;
         }
 
-        const [localDocs, acceptedPP, acceptedTOS, onboardingDone] =
-          await Promise.all([
-            load("legal_docs"),
-            load("accepted_privacy_policy"),
-            load("accepted_terms_of_service"),
-            load("onboarding_done"),
-          ]);
+        const [
+          localDocs,
+          acceptedPP,
+          acceptedTOS,
+          onboardingDone,
+          onboardingStarted,
+        ] = await Promise.all([
+          load("legal_docs"),
+          load("accepted_privacy_policy"),
+          load("accepted_terms_of_service"),
+          load("onboarding_done"),
+          load("onboarding_started"),
+        ]);
 
         if (!active) return;
 
@@ -78,11 +87,15 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
         const currentAcceptedTOS =
           acceptedTOS && localDocs.tos.hash === parsed.data.tos.hash;
         const existingUser = acceptedPP && acceptedTOS;
-        const includeOnboarding = !onboardingDone && !existingUser;
+        const includeOnboarding =
+          !onboardingDone && (!existingUser || onboardingStarted);
 
-        if (!onboardingDone && existingUser) {
+        if (!onboardingDone && existingUser && !onboardingStarted) {
           await save("onboarding_done", true);
           if (!active) return;
+        } else if (includeOnboarding && !onboardingStarted) {
+          await save("onboarding_started", true);
+          if (!active) return;
         }
 
         setState({
@@ -124,7 +137,10 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
 
   const finish = useCallback(async () => {
     if (state?.includeOnboarding) {
-      await save("onboarding_done", true);
+      await Promise.all([
+        save("onboarding_done", true),
+        save("onboarding_started", false),
+      ]);
     }
     setComplete(true);
   }, [save, state?.includeOnboarding]);
@@ -142,6 +158,8 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
   if (state.includeLegal) {
     steps.push({
       id: "legal",
+      title: "Privacy Policy & ToS",
+      description: `${state.docs.pp.version} / ${state.docs.tos.version}`,
       defaultCanContinue: false,
       content: (
         <LegalPage
@@ -154,7 +172,7 @@ export default function OnboardingGate({ children }: { children: ReactNode }) {
     });
   }
   if (state.includeOnboarding) {
-    steps.push(...onboardingSteps);
+    steps.push(...onboardingSteps(onboardingThemeId, setOnboardingThemeId));
   }
 
   if (complete || steps.length === 0) return <>{children}</>;

packages/onboarding/src/pages/legal.tsx

@@ -32,16 +32,7 @@ export default function LegalPage({
   });
 
   return (
-    <div className="mx-auto flex h-full w-full max-w-5xl flex-col gap-10 p-10 py-20 md:p-24">
-      <div>
-        <h1 className="text-3xl font-bold md:text-4xl" tabIndex={-1}>
-          Privacy Policy &amp; ToS
-        </h1>
-        <p className="pt-3 text-xl text-muted-foreground">
-          {docs.pp.version} / {docs.tos.version}
-        </p>
-      </div>
-
+    <div className="mx-auto flex min-h-[calc(100dvh-17rem)] w-full max-w-5xl flex-col gap-10 p-10 py-20 md:min-h-[calc(100dvh-20.5rem)] md:p-24">
       <div className="flex flex-1 items-center justify-center">
         <div className="flex flex-col items-start gap-2">
           <BigCheckbox

packages/onboarding/src/pages/onboarding.tsx

@@ -1,9 +0,0 @@
-export default function OnboardingPage() {
-  return (
-    <div className="flex h-full items-center justify-center p-8">
-      <h1 className="text-3xl font-bold" tabIndex={-1}>
-        Onboarding
-      </h1>
-    </div>
-  );
-}

packages/onboarding/src/steps.tsx

@@ -1,10 +1,15 @@
-import type { OnboardingStep } from "@methanium/ui";
-import OnboardingPage from "./pages/onboarding";
+import { ThemeOnboardingPage, type OnboardingStep } from "@methanium/ui";
 
-// Add future onboarding pages here. Completed users skip this entire manifest.
-export const onboardingSteps: OnboardingStep[] = [
+export const onboardingSteps = (
+  themeId: string | null,
+  setThemeId: (id: string) => void,
+): OnboardingStep[] => [
   {
-    id: "onboarding",
-    content: <OnboardingPage />,
+    id: "theme",
+    title: "Theming",
+    description:
+      "Pick a main theme and after that ... let's just hope you don't get into decision paralysis",
+    defaultCanContinue: false,
+    content: <ThemeOnboardingPage value={themeId} onValueChange={setThemeId} />,
   },
 ];

packages/settings/src/layout.tsx

@@ -27,12 +27,16 @@ export default function SettingsLayout() {
 export function SettingsSidebar() {
   const isMobile = useIsMobile();
   const navigate = useNavigate();
-  const categories = [...new Set(settingsNavigation.map((page) => page.category))];
+  const categories = [
+    ...new Set(settingsNavigation.map((page) => page.category)),
+  ];
 
   return (
     <div
       className={cn(
-        isMobile ? "w-full p-1" : "p-3 rounded-tl-2xl border-r bg-input/15 w-50",
+        isMobile
+          ? "w-full p-1"
+          : "p-3 rounded-tl-2xl border-r bg-input/15 w-50",
         "flex flex-col gap-6",
       )}
     >

packages/settings/src/pages/licenses.tsx

@@ -1,32 +1,144 @@
-import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogContent, DialogTrigger } from "@methanium/ui";
-import { generatedAt, packageCount, packages } from "../../../../licenses/third-party-credits.json";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+} from "@methanium/ui";
+import {
+  generatedAt,
+  packageCount,
+  packages,
+} from "../../../../licenses/third-party-credits.json";
 
-const licenseTexts = import.meta.glob("../../../../licenses/**/*", { eager: true, import: "default", query: "?raw" }) as Record<string, string>;
+const licenseTexts = import.meta.glob("../../../../licenses/**/*", {
+  eager: true,
+  import: "default",
+  query: "?raw",
+}) as Record<string, string>;
 
 function getLicenseFiles(licensePackage: (typeof packages)[number]) {
   return licensePackage.files.map((fileName) => ({
     fileName,
-    text: licenseTexts["../../../../" + licensePackage.licenseFolder + "/" + fileName],
+    text: licenseTexts[
+      "../../../../" + licensePackage.licenseFolder + "/" + fileName
+    ],
   }));
 }
 
 export default function Page() {
-  return <div className="flex h-full min-h-0 flex-col gap-7">
-    <div className="flex flex-col"><p>Last generated: {generatedAt}</p><p>Package Count: {packageCount}</p></div>
-    <div className="min-h-0 flex-1 max-h-[calc(100vh-180px)] overflow-auto pr-2"><div className="flex flex-col gap-5">
-      {packages.map((licensePackage) => <Card key={licensePackage.name + licensePackage.version} id={licensePackage.name + licensePackage.version}>
-        <CardHeader><CardTitle className="flex gap-2 items-center"><Badge>{licensePackage.license}</Badge> {licensePackage.name} {licensePackage.version}</CardTitle></CardHeader>
-        {licensePackage.description && <CardContent><CardDescription>{licensePackage.description}</CardDescription></CardContent>}
-        <CardFooter className="gap-2"><LicenseDialog licensePackage={licensePackage} />
-          {licensePackage.repository ? <a target="_blank" rel="noreferrer" href={licensePackage.repository.replace("git+", "").replace(".git", "")}><Button variant="outline" className="cursor-pointer">Open Repository</Button></a> : <Button disabled variant="outline" className="cursor-pointer">Open Repository</Button>}
-          {licensePackage.homepage ? <a target="_blank" rel="noreferrer" href={licensePackage.homepage}><Button variant="outline" className="cursor-pointer">Open Homepage</Button></a> : <Button disabled variant="outline" className="cursor-pointer">Open Homepage</Button>}
-        </CardFooter>
-      </Card>)}
-    </div></div>
-  </div>;
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-7">
+      <div className="flex flex-col">
+        <p>Last generated: {generatedAt}</p>
+        <p>Package Count: {packageCount}</p>
+      </div>
+      <div className="min-h-0 flex-1 max-h-[calc(100vh-180px)] overflow-auto pr-2">
+        <div className="flex flex-col gap-5">
+          {packages.map((licensePackage) => (
+            <Card
+              className="pb-0!"
+              key={licensePackage.name + licensePackage.version}
+              id={licensePackage.name + licensePackage.version}
+            >
+              <CardHeader>
+                <CardTitle className="flex gap-2 items-center">
+                  <Badge>{licensePackage.license}</Badge> {licensePackage.name}{" "}
+                  {licensePackage.version}
+                </CardTitle>
+              </CardHeader>
+              {licensePackage.description && (
+                <CardContent>
+                  <CardDescription>
+                    {licensePackage.description}
+                  </CardDescription>
+                </CardContent>
+              )}
+              <CardFooter className="gap-2">
+                <LicenseDialog licensePackage={licensePackage} />
+                {licensePackage.repository ? (
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href={licensePackage.repository
+                      .replace("git+", "")
+                      .replace(".git", "")}
+                  >
+                    <Button variant="outline" className="cursor-pointer">
+                      Open Repository
+                    </Button>
+                  </a>
+                ) : (
+                  <Button disabled variant="outline" className="cursor-pointer">
+                    Open Repository
+                  </Button>
+                )}
+                {licensePackage.homepage ? (
+                  <a
+                    target="_blank"
+                    rel="noreferrer"
+                    href={licensePackage.homepage}
+                  >
+                    <Button variant="outline" className="cursor-pointer">
+                      Open Homepage
+                    </Button>
+                  </a>
+                ) : (
+                  <Button disabled variant="outline" className="cursor-pointer">
+                    Open Homepage
+                  </Button>
+                )}
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }
 
-function LicenseDialog({ licensePackage }: { licensePackage: (typeof packages)[number] }) {
+function LicenseDialog({
+  licensePackage,
+}: {
+  licensePackage: (typeof packages)[number];
+}) {
   const licenseFiles = getLicenseFiles(licensePackage);
-  return <Dialog><DialogTrigger render={<Button disabled={!licenseFiles.some(({ text }) => text)} className="cursor-pointer">Open License</Button>} /><DialogContent className="flex max-h-[85vh] min-h-0 flex-col overflow-hidden sm:max-w-3xl"><div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-2">{licenseFiles.map(({ fileName, text }, index) => <section key={fileName} className="border-b last:border-b-0"><h3 className={`border-b pb-2 text-sm font-medium ${index >= 1 && "pt-2"}`}>{fileName}</h3><pre className="pt-2 whitespace-pre-wrap wrap-break-word text-xs leading-relaxed">{text || "License text could not be loaded. Please contact support@tensamin.net"}</pre></section>)}</div></DialogContent></Dialog>;
+  return (
+    <Dialog>
+      <DialogTrigger
+        render={({ onClick }) => (
+          <Button
+            onClick={onClick}
+            disabled={!licenseFiles.some(({ text }) => text)}
+            className="cursor-pointer"
+          >
+            Open License
+          </Button>
+        )}
+      />
+      <DialogContent className="flex max-h-[85vh] min-h-0 flex-col overflow-hidden sm:max-w-3xl">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain pr-2">
+          {licenseFiles.map(({ fileName, text }, index) => (
+            <section key={fileName} className="border-b last:border-b-0">
+              <h3
+                className={`border-b pb-2 text-sm font-medium ${index >= 1 && "pt-2"}`}
+              >
+                {fileName}
+              </h3>
+              <pre className="pt-2 whitespace-pre-wrap wrap-break-word text-xs leading-relaxed">
+                {text ||
+                  "License text could not be loaded. Please contact support@tensamin.net"}
+              </pre>
+            </section>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
 }

packages/settings/src/pages/profile.tsx

@@ -2,21 +2,40 @@ import MDInput from "@tensamin/markdown/input";
 import { useMTP } from "@tensamin/mtp";
 import { mtp } from "@tensamin/shared/data";
 import { useStorage } from "@tensamin/storage/context";
-import { Avatar, AvatarFallback, AvatarImage, Button, cn, Input, useIsMobile } from "@methanium/ui";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  cn,
+  Input,
+  useIsMobile,
+} from "@methanium/ui";
 import { useUser, type User } from "@tensamin/user/context";
 import { Check } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
-async function prepImage(file: File, size = 300, quality = 0.8): Promise<string> {
+async function prepImage(
+  file: File,
+  size = 300,
+  quality = 0.8,
+): Promise<string> {
   const bitmap = await createImageBitmap(file);
   const canvas = document.createElement("canvas");
-  canvas.width = size; canvas.height = size;
+  canvas.width = size;
+  canvas.height = size;
   const context = canvas.getContext("2d");
   if (!context) throw new Error("Could not get canvas context");
   const scale = Math.max(size / bitmap.width, size / bitmap.height);
   const width = bitmap.width * scale;
   const height = bitmap.height * scale;
-  context.drawImage(bitmap, (size - width) / 2, (size - height) / 2, width, height);
+  context.drawImage(
+    bitmap,
+    (size - width) / 2,
+    (size - height) / 2,
+    width,
+    height,
+  );
   return canvas.toDataURL("image/webp", quality);
 }
 
@@ -31,14 +50,22 @@ export default function Page() {
   const [saveSucceeded, setSaveSucceeded] = useState(false);
   const avatarUploadRef = useRef<HTMLInputElement>(null);
   const draftInitializedRef = useRef(false);
-  const effectiveAvatar = draftUser.Avatar === "none" ? undefined : draftUser.Avatar;
-  const updateDraftUser = (updater: (previous: Partial<User>) => Partial<User>) => {
-    setSaveSucceeded(false); setErrorMessage(""); setDraftUser(updater);
+  const effectiveAvatar =
+    draftUser.Avatar === "none" ? undefined : draftUser.Avatar;
+  const updateDraftUser = (
+    updater: (previous: Partial<User>) => Partial<User>,
+  ) => {
+    setSaveSucceeded(false);
+    setErrorMessage("");
+    setDraftUser(updater);
   };
-  useEffect(() => { void (async () => setCurrentUser(await get(await load("user_id"))))(); }, [get, load]);
+  useEffect(() => {
+    void (async () => setCurrentUser(await get(await load("user_id"))))();
+  }, [get, load]);
   useEffect(() => {
     if (!currentUser || draftInitializedRef.current) return;
-    setDraftUser(currentUser); draftInitializedRef.current = true;
+    setDraftUser(currentUser);
+    draftInitializedRef.current = true;
   }, [currentUser]);
   async function handleAvatarUpload(file: File) {
     const avatar = await prepImage(file);
@@ -46,22 +73,128 @@ export default function Page() {
     if (avatarUploadRef.current) avatarUploadRef.current.value = "";
   }
   if (!currentUser) return <p>Loading...</p>;
-  return <>
-    <input ref={avatarUploadRef} hidden onChange={(event) => event.target.files?.[0] && handleAvatarUpload(event.target.files[0])} type="file" />
-    <div className={cn("flex flex-col gap-5", isMobile ? "w-full" : "w-80")}>
-      <div className="flex items-center gap-3"><Avatar className="size-14"><AvatarImage src={effectiveAvatar} /><AvatarFallback className="text-2xl">{draftUser.Display?.slice(0, 2).toUpperCase() || currentUser.Display.slice(0, 2).toUpperCase()}</AvatarFallback></Avatar><div className="flex flex-col gap-1"><p>Avatar</p><div className="flex gap-1"><Button onClick={() => avatarUploadRef.current?.click()}>Upload avatar</Button><Button onClick={() => updateDraftUser((previous) => ({ ...previous, avatar: "none" }))} variant="destructive" disabled={effectiveAvatar === undefined}>Remove</Button></div><p className="text-sm text-muted-foreground">GIFs are supported in decentralised mode or with Tensamin Premium.<br />Maximum file size is 16mb.</p></div></div>
-      <Input className="w-full" onChange={(event) => updateDraftUser((previous) => ({ ...previous, display: event.target.value }))} placeholder="Display Name" value={draftUser.Display || ""} />
-      <Input className="w-full" onChange={(event) => updateDraftUser((previous) => ({ ...previous, username: event.target.value }))} placeholder="Username" value={draftUser.Username || ""} />
-      <MDInput styled paddingY="4px" paddingX="10px" fontSize=".875rem" placeholder="About Me" setValue={(value) => updateDraftUser((previous) => ({ ...previous, about: value }))} value={draftUser.About || ""} />
-      <Button onClick={async () => {
-        const { Avatar, ...draftUsersWithoutAvatar } = draftUser;
-        const payload = { ...draftUsersWithoutAvatar, ...(typeof Avatar === "string" ? { avatar: Avatar.startsWith("data:") ? (Avatar.split(",", 2)[1] ?? "") : Avatar } : {}) };
-        const validation = mtp.ChangeUserData.request.safeParse(payload);
-        if (!validation.success) { setSaveSucceeded(false); setErrorMessage(validation.error.issues[0]?.message ?? "Invalid profile data"); return; }
-        try { await send("ChangeUserData", validation.data); setSaveSucceeded(true); setErrorMessage(""); }
-        catch (error) { setSaveSucceeded(false); setErrorMessage("Failed to update profile: " + error); }
-      }}>{saveSucceeded ? <span className="inline-flex items-center gap-1.5"><Check className="size-4" />Saved</span> : "Save"}</Button>
-      {errorMessage && <p className="text-sm text-destructive">{errorMessage}</p>}
-    </div>
-  </>;
+  return (
+    <>
+      <input
+        ref={avatarUploadRef}
+        hidden
+        onChange={(event) =>
+          event.target.files?.[0] && handleAvatarUpload(event.target.files[0])
+        }
+        type="file"
+      />
+      <div className={cn("flex flex-col gap-5", isMobile ? "w-full" : "w-80")}>
+        <div className="flex items-center gap-3">
+          <Avatar className="size-14">
+            <AvatarImage src={effectiveAvatar} />
+            <AvatarFallback className="text-2xl">
+              {draftUser.Display?.slice(0, 2).toUpperCase() ||
+                currentUser.Display.slice(0, 2).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col gap-1">
+            <p>Avatar</p>
+            <div className="flex gap-1">
+              <Button onClick={() => avatarUploadRef.current?.click()}>
+                Upload avatar
+              </Button>
+              <Button
+                onClick={() =>
+                  updateDraftUser((previous) => ({
+                    ...previous,
+                    avatar: "none",
+                  }))
+                }
+                variant="destructive"
+                disabled={effectiveAvatar === undefined}
+              >
+                Remove
+              </Button>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              GIFs are supported in decentralised mode or with Tensamin Premium.
+              <br />
+              Maximum file size is 16mb.
+            </p>
+          </div>
+        </div>
+        <Input
+          className="w-full"
+          onChange={(event) =>
+            updateDraftUser((previous) => ({
+              ...previous,
+              display: event.target.value,
+            }))
+          }
+          placeholder="Display Name"
+          value={draftUser.Display || ""}
+        />
+        <Input
+          className="w-full"
+          onChange={(event) =>
+            updateDraftUser((previous) => ({
+              ...previous,
+              username: event.target.value,
+            }))
+          }
+          placeholder="Username"
+          value={draftUser.Username || ""}
+        />
+        <MDInput
+          styled
+          paddingY="4px"
+          paddingX="10px"
+          fontSize=".875rem"
+          placeholder="About Me"
+          setValue={(value) =>
+            updateDraftUser((previous) => ({ ...previous, about: value }))
+          }
+          value={draftUser.About || ""}
+        />
+        <Button
+          onClick={async () => {
+            const { Avatar, ...draftUsersWithoutAvatar } = draftUser;
+            const payload = {
+              ...draftUsersWithoutAvatar,
+              ...(typeof Avatar === "string"
+                ? {
+                    avatar: Avatar.startsWith("data:")
+                      ? (Avatar.split(",", 2)[1] ?? "")
+                      : Avatar,
+                  }
+                : {}),
+            };
+            const validation = mtp.ChangeUserData.request.safeParse(payload);
+            if (!validation.success) {
+              setSaveSucceeded(false);
+              setErrorMessage(
+                validation.error.issues[0]?.message ?? "Invalid profile data",
+              );
+              return;
+            }
+            try {
+              await send("ChangeUserData", validation.data);
+              setSaveSucceeded(true);
+              setErrorMessage("");
+            } catch (error) {
+              setSaveSucceeded(false);
+              setErrorMessage("Failed to update profile: " + error);
+            }
+          }}
+        >
+          {saveSucceeded ? (
+            <span className="inline-flex items-center gap-1.5">
+              <Check className="size-4" />
+              Saved
+            </span>
+          ) : (
+            "Save"
+          )}
+        </Button>
+        {errorMessage && (
+          <p className="text-sm text-destructive">{errorMessage}</p>
+        )}
+      </div>
+    </>
+  );
 }

packages/settings/src/pages/security.tsx

@@ -8,18 +8,87 @@ export default function Page() {
   const [currentOmegaUrl, setCurrentOmegaUrl] = useState("");
   const [draftForcedOmikronUrl, setDraftForcedOmikronUrl] = useState("");
   const [currentForcedOmikronUrl, setCurrentForcedOmikronUrl] = useState("");
-  const [draftForcedOmikronPublicKey, setDraftForcedOmikronPublicKey] = useState("");
-  const [currentForcedOmikronPublicKey, setCurrentForcedOmikronPublicKey] = useState("");
+  const [draftForcedOmikronPublicKey, setDraftForcedOmikronPublicKey] =
+    useState("");
+  const [currentForcedOmikronPublicKey, setCurrentForcedOmikronPublicKey] =
+    useState("");
 
   useEffect(() => {
-    load("omega_url").then((value) => { setDraftOmegaUrl(value); setCurrentOmegaUrl(value); });
-    load("forced_omikron_url").then((value) => { setDraftForcedOmikronUrl(value || ""); setCurrentForcedOmikronUrl(value || ""); });
-    load("forced_omikron_public_key").then((value) => { setDraftForcedOmikronPublicKey(value || ""); setCurrentForcedOmikronPublicKey(value || ""); });
+    load("omega_url").then((value) => {
+      setDraftOmegaUrl(value);
+      setCurrentOmegaUrl(value);
+    });
+    load("forced_omikron_url").then((value) => {
+      setDraftForcedOmikronUrl(value || "");
+      setCurrentForcedOmikronUrl(value || "");
+    });
+    load("forced_omikron_public_key").then((value) => {
+      setDraftForcedOmikronPublicKey(value || "");
+      setCurrentForcedOmikronPublicKey(value || "");
+    });
   }, [load]);
 
-  return <div className="flex flex-col gap-8">
-    <p className="text-destructive">It's best not to touch these settings! They can be exploited to gain access to your account!</p>
-    <div className="flex flex-col gap-2"><Label>Omega Url</Label><div className="flex gap-1"><Input value={draftOmegaUrl} onChange={(event) => setDraftOmegaUrl(event.target.value)} /><Button disabled={currentOmegaUrl === draftOmegaUrl} onClick={() => save("omega_url", draftOmegaUrl).then(() => setCurrentOmegaUrl(draftOmegaUrl))}>Save</Button></div></div>
-    <div className="flex flex-col gap-2"><Label>Forced Omikron</Label><div className="flex gap-1"><Input placeholder="URL..." value={draftForcedOmikronUrl} onChange={(event) => setDraftForcedOmikronUrl(event.target.value)} /><Input placeholder="Public Key..." value={draftForcedOmikronPublicKey} onChange={(event) => setDraftForcedOmikronPublicKey(event.target.value)} /><Button disabled={currentForcedOmikronUrl === draftForcedOmikronUrl && currentForcedOmikronPublicKey === draftForcedOmikronPublicKey} onClick={() => { save("forced_omikron_url", draftForcedOmikronUrl).then(() => setCurrentForcedOmikronUrl(draftForcedOmikronUrl)); save("forced_omikron_public_key", draftForcedOmikronPublicKey).then(() => setCurrentForcedOmikronPublicKey(draftForcedOmikronPublicKey)); }}>Save</Button></div></div>
-  </div>;
+  return (
+    <div className="flex flex-col gap-8">
+      <p className="text-destructive">
+        It's best not to touch these settings! They can be exploited to gain
+        access to your account!
+      </p>
+      <div className="flex flex-col gap-2">
+        <Label>Omega Url</Label>
+        <div className="flex gap-1">
+          <Input
+            value={draftOmegaUrl}
+            onChange={(event) => setDraftOmegaUrl(event.target.value)}
+          />
+          <Button
+            disabled={currentOmegaUrl === draftOmegaUrl}
+            onClick={() =>
+              save("omega_url", draftOmegaUrl).then(() =>
+                setCurrentOmegaUrl(draftOmegaUrl),
+              )
+            }
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label>Forced Omikron</Label>
+        <div className="flex gap-1">
+          <Input
+            placeholder="URL..."
+            value={draftForcedOmikronUrl}
+            onChange={(event) => setDraftForcedOmikronUrl(event.target.value)}
+          />
+          <Input
+            placeholder="Public Key..."
+            value={draftForcedOmikronPublicKey}
+            onChange={(event) =>
+              setDraftForcedOmikronPublicKey(event.target.value)
+            }
+          />
+          <Button
+            disabled={
+              currentForcedOmikronUrl === draftForcedOmikronUrl &&
+              currentForcedOmikronPublicKey === draftForcedOmikronPublicKey
+            }
+            onClick={() => {
+              save("forced_omikron_url", draftForcedOmikronUrl).then(() =>
+                setCurrentForcedOmikronUrl(draftForcedOmikronUrl),
+              );
+              save(
+                "forced_omikron_public_key",
+                draftForcedOmikronPublicKey,
+              ).then(() =>
+                setCurrentForcedOmikronPublicKey(draftForcedOmikronPublicKey),
+              );
+            }}
+          >
+            Save
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 }

packages/settings/src/pages/theme.tsx

@@ -1,5 +1,18 @@
-import { StylePicker } from "@methanium/ui";
+import { ThemeCustomizer } from "@methanium/ui";
 
 export default function Page() {
-  return <div className="overflow-y-auto"><StylePicker /><div className="absolute bottom-0 right-0 mb-3 mr-2"><a className="block w-60 text-xs whitespace-pre-wrap" href="https://git.methanium.net/tensamin/client/issues/new" target="_blank" rel="noreferrer">Please open a Git issue to help us improve this feature. We want to get it right.</a></div></div>;
+  return (
+    <div className="h-full overflow-y-auto p-5 md:p-8">
+      <ThemeCustomizer />
+      <a
+        className="mt-8 block max-w-md text-xs text-muted-foreground"
+        href="https://git.methanium.net/tensamin/client/issues/new"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Please open an issue on Git to tell us what you would like to see in
+        here.
+      </a>
+    </div>
+  );
 }

packages/shared/src/data.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import type { ThemeDesign } from "@methanium/ui";
 
 import { legalDocsSchema } from "./features/legal/schema";
 import {
@@ -422,6 +423,7 @@ export interface Storage extends SettingsStorageDefaults {
   user_id: number;
   mtp_keyring: string;
   onboarding_done: boolean;
+  onboarding_started: boolean;
   ppandtos_done: boolean;
   accepted_terms_of_service: boolean;
   accepted_privacy_policy: boolean;
@@ -445,6 +447,8 @@ export interface Storage extends SettingsStorageDefaults {
   theme_tint: "soft" | "hard" | "extreme";
   theme_border_radius: number;
   theme_custom_css: string;
+  theme_parent: string;
+  theme_design: ThemeDesign;
   chat_trusted_domains: string[];
   chat_picker_saved_media: string[];
   chat_picker_last_tab: "gif" | "meme" | "saved";
@@ -460,6 +464,7 @@ export const storageDefaults: Storage = {
   user_id: 0,
   mtp_keyring: "",
   onboarding_done: false,
+  onboarding_started: false,
   ppandtos_done: false,
   accepted_terms_of_service: false,
   accepted_privacy_policy: false,
@@ -498,8 +503,18 @@ export const storageDefaults: Storage = {
   theme_primary_color: "",
   theme_polarity: "system",
   theme_tint: "soft",
-  theme_border_radius: 0.55,
+  theme_border_radius: 0.5,
   theme_custom_css: "",
+  theme_parent: "tensamin",
+  theme_design: {
+    density: 1,
+    borderWidth: 1,
+    shadowStrength: 0,
+    fontScale: 1,
+    headingWeight: 600,
+    motion: 1,
+    fontFamily: "public-sans",
+  },
   chat_trusted_domains: [
     // Other platforms
     "cdn.discordapp.com",