(feat): big methanium/ui migration

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

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>
+  );
 }