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