(feat): add cache package

(feat): improve local storage security
(feat): move settings to dedicated settings package

packages/settings/src/pages/cache.tsx

@@ -0,0 +1,101 @@
+import { createCache } from "@tensamin/cache";
+import { storageDefaults } from "@tensamin/shared/data";
+import { useStorage } from "@tensamin/storage/context";
+import { secureValueCodec } from "@tensamin/storage/secure";
+import { Button, Input, Label } from "@tensamin/ui";
+import { useEffect, useState } from "react";
+
+const validLimit = (value: number) => Number.isSafeInteger(value) && value >= 0;
+
+export default function Page() {
+  const { load, save } = useStorage();
+  const [contacts, setContacts] = useState(storageDefaults.cache_contacts);
+  const [messagesPerChat, setMessagesPerChat] = useState(
+    storageDefaults.cache_messages_per_chat,
+  );
+  const [savedContacts, setSavedContacts] = useState(contacts);
+  const [savedMessagesPerChat, setSavedMessagesPerChat] =
+    useState(messagesPerChat);
+  const [saving, setSaving] = useState(false);
+  useEffect(() => {
+    void Promise.all([
+      load("cache_contacts"),
+      load("cache_messages_per_chat"),
+    ]).then(([nextContacts, nextMessages]) => {
+      setContacts(nextContacts);
+      setSavedContacts(nextContacts);
+      setMessagesPerChat(nextMessages);
+      setSavedMessagesPerChat(nextMessages);
+    });
+  }, [load]);
+  const valid = validLimit(contacts) && validLimit(messagesPerChat);
+  const changed =
+    contacts !== savedContacts || messagesPerChat !== savedMessagesPerChat;
+  async function persist() {
+    if (!valid || saving) return;
+    setSaving(true);
+    try {
+      await Promise.all([
+        save("cache_contacts", contacts),
+        save("cache_messages_per_chat", messagesPerChat),
+      ]);
+      const accountId = await load("user_id");
+      if (accountId)
+        await createCache(String(accountId), {
+          codec: secureValueCodec,
+        }).conversations.prune();
+      setSavedContacts(contacts);
+      setSavedMessagesPerChat(messagesPerChat);
+    } finally {
+      setSaving(false);
+    }
+  }
+  return (
+    <div className="flex max-w-xl flex-col gap-6">
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="cache-contacts">Contacts</Label>
+        <Input
+          id="cache-contacts"
+          type="number"
+          min={0}
+          step={1}
+          value={Number.isNaN(contacts) ? "" : contacts}
+          onChange={(event) => setContacts(event.currentTarget.valueAsNumber)}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="cache-messages">Messages per chat</Label>
+        <Input
+          id="cache-messages"
+          type="number"
+          min={0}
+          step={1}
+          value={Number.isNaN(messagesPerChat) ? "" : messagesPerChat}
+          onChange={(event) =>
+            setMessagesPerChat(event.currentTarget.valueAsNumber)
+          }
+        />
+      </div>
+      {!valid && (
+        <p className="text-sm text-destructive">
+          Cache limits must be whole numbers greater than or equal to 0.
+        </p>
+      )}
+      <div className="flex gap-2">
+        <Button disabled={!valid || !changed || saving} onClick={persist}>
+          Save
+        </Button>
+        <Button
+          variant="outline"
+          disabled={saving}
+          onClick={() => {
+            setContacts(storageDefaults.cache_contacts);
+            setMessagesPerChat(storageDefaults.cache_messages_per_chat);
+          }}
+        >
+          Reset
+        </Button>
+      </div>
+    </div>
+  );
+}

packages/settings/src/pages/chat.tsx

@@ -0,0 +1,46 @@
+import { storageDefaults } from "@tensamin/shared/data";
+import { useStorage } from "@tensamin/storage/context";
+import { Button, Kbd } from "@tensamin/ui";
+import { List, Switch } from "../components";
+
+export default function Page() {
+  const { save } = useStorage();
+  return (
+    <div className="flex flex-col gap-2">
+      <Switch
+        label={
+          <p>
+            Change <Kbd>Enter</Kbd> behavior to <Kbd>Shift</Kbd> +{" "}
+            <Kbd>Enter</Kbd>
+          </p>
+        }
+        id="settings.reverse_enter_behavior"
+      />
+      <Switch
+        label="Enable read confirmations"
+        id="settings.read_confirmations"
+      />
+      <Switch
+        label="Enable receive confirmations"
+        id="settings.receive_confirmations"
+      />
+      <Switch
+        label="Sidebar message preview"
+        id="settings.show_start_of_last_message_in_sidebar"
+      />
+      <p className="text-destructive pt-6">
+        Trusted embed domains can get your IP-Address! Only add domains if you
+        really trust them!
+      </p>
+      <div>
+        <Button
+          variant="outline"
+          onClick={() => void save("reactions", storageDefaults.reactions)}
+        >
+          Reset Emoji Ranks
+        </Button>
+      </div>
+      <List label="Trusted embed domains" id="chat_trusted_domains" />
+    </div>
+  );
+}

packages/settings/src/pages/index.tsx

@@ -0,0 +1,7 @@
+import { useIsMobile } from "@tensamin/ui";
+import { SettingsSidebar } from "../layout";
+
+export default function Page() {
+  const isMobile = useIsMobile();
+  return isMobile && <SettingsSidebar />;
+}

packages/settings/src/pages/licenses.tsx

@@ -0,0 +1,32 @@
+import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogContent, DialogTrigger } from "@tensamin/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>;
+
+function getLicenseFiles(licensePackage: (typeof packages)[number]) {
+  return licensePackage.files.map((fileName) => ({
+    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>;
+}
+
+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>;
+}

packages/settings/src/pages/profile.tsx

@@ -0,0 +1,67 @@
+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 "@tensamin/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> {
+  const bitmap = await createImageBitmap(file);
+  const canvas = document.createElement("canvas");
+  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);
+  return canvas.toDataURL("image/webp", quality);
+}
+
+export default function Page() {
+  const { get } = useUser();
+  const { load } = useStorage();
+  const { send } = useMTP();
+  const isMobile = useIsMobile();
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+  const [draftUser, setDraftUser] = useState<Partial<User>>({});
+  const [errorMessage, setErrorMessage] = useState("");
+  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);
+  };
+  useEffect(() => { void (async () => setCurrentUser(await get(await load("user_id"))))(); }, [get, load]);
+  useEffect(() => {
+    if (!currentUser || draftInitializedRef.current) return;
+    setDraftUser(currentUser); draftInitializedRef.current = true;
+  }, [currentUser]);
+  async function handleAvatarUpload(file: File) {
+    const avatar = await prepImage(file);
+    updateDraftUser((previous) => ({ ...previous, avatar }));
+    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>
+  </>;
+}

packages/settings/src/pages/security.tsx

@@ -0,0 +1,25 @@
+import { useStorage } from "@tensamin/storage/context";
+import { Button, Input, Label } from "@tensamin/ui";
+import { useEffect, useState } from "react";
+
+export default function Page() {
+  const { save, load } = useStorage();
+  const [draftOmegaUrl, setDraftOmegaUrl] = useState("");
+  const [currentOmegaUrl, setCurrentOmegaUrl] = useState("");
+  const [draftForcedOmikronUrl, setDraftForcedOmikronUrl] = useState("");
+  const [currentForcedOmikronUrl, setCurrentForcedOmikronUrl] = 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]);
+
+  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

@@ -0,0 +1,5 @@
+import { StylePicker } from "@tensamin/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>;
+}