feat(mobile): chats on the phone, PIN lock and release 0.14.0

Cargo.toml

@@ -4,7 +4,7 @@ members = ["crates/botloft-core", "crates/botloft-store", "crates/botloft-cloud"
 default-members = ["crates/botloft-core", "crates/botloft-store", "crates/botloft-cloud", "crates/botloftd"]
 
 [workspace.package]
-version = "0.13.0"
+version = "0.14.0"
 edition = "2024"
 license = "FSL-1.1-ALv2"
 repository = "https://github.com/httpsphl/botloft"

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "botloft-app",
   "private": true,
-  "version": "0.13.0",
+  "version": "0.14.0",
   "license": "FSL-1.1-ALv2",
   "type": "module",
   "packageManager": "pnpm@12.4.1",

app/src/features/account/AccountArea.tsx

@@ -18,7 +18,6 @@ import { useApp, useHost } from "../../store/context";
 import { POPOVER, POPOVER_ITEM } from "../../ui/surface";
 import { attempt } from "../../ui/toast";
 import { useDismiss } from "../../ui/useDismiss";
-import { SettingsDialog } from "./SettingsDialog";
 import { UsageDialog } from "./UsageDialog";
 
 const RELEASES = "https://github.com/httpsphl/botloft/releases";
@@ -35,7 +34,8 @@ export function AccountArea() {
   const account = useApp((state) => state.system?.account ?? null);
   const signedOut = useApp((state) => state.system?.claudeSignedIn === false);
   const [open, setOpen] = useState(false);
-  const [dialog, setDialog] = useState<"usage" | "settings" | null>(null);
+  const [dialog, setDialog] = useState<"usage" | null>(null);
+  const openPage = useApp((state) => state.openPage);
   const root = useRef<HTMLDivElement>(null);
 
   useDismiss(
@@ -48,7 +48,11 @@ export function AccountArea() {
   const detail = describe(account?.claude ?? null, signedOut, a);
   const show = (which: "usage" | "settings") => {
     setOpen(false);
-    setDialog(which);
+    if (which === "settings") {
+      openPage("settings");
+    } else {
+      setDialog(which);
+    }
   };
 
   return (
@@ -79,7 +83,6 @@ export function AccountArea() {
         </span>
       </button>
       {dialog === "usage" && <UsageDialog onClose={() => setDialog(null)} />}
-      {dialog === "settings" && <SettingsDialog onClose={() => setDialog(null)} />}
     </div>
   );
 }

app/src/features/account/AccountSettings.tsx

@@ -0,0 +1,19 @@
+// Settings, "Account and phone": the account that keeps the copies and
+// connects the phone (spec 27.6), and the phones connected to it (spec 28.7).
+
+import { useT } from "../../i18n";
+import { CloudAccount } from "./CloudAccount";
+import { MobilePhones } from "./MobilePhones";
+import { Section } from "./settingsParts";
+
+export function AccountSettings() {
+  const cloud = useT().account.cloud;
+  return (
+    <>
+      <Section title={cloud.title}>
+        <CloudAccount />
+      </Section>
+      <MobilePhones />
+    </>
+  );
+}

app/src/features/account/BackupSettings.tsx

@@ -12,22 +12,17 @@ import { Button } from "../../ui/Button";
 import { Callout } from "../../ui/Callout";
 import { BackupRestore } from "./BackupRestore";
 import { backupError } from "./backupError";
-import { CloudAccount } from "./CloudAccount";
-import { MobilePhones } from "./MobilePhones";
+import { CloudBackup } from "./CloudBackup";
 import { PassphraseFields, usePassphrase } from "./PassphraseFields";
 import { Section } from "./settingsParts";
 
 type Outcome = { saved: string } | { notSaved: true } | { failed: string } | null;
 
-export function BackupSettings() {
+export function BackupSettings({ goToAccount }: { goToAccount(): void }) {
   const b = useT().account.backup;
-  const cloud = useT().account.cloud;
   return (
     <>
-      <Section title={cloud.title}>
-        <CloudAccount />
-      </Section>
-      <MobilePhones />
+      <CloudBackup goToAccount={goToAccount} />
       <Section title={b.exportTitle}>
         <p className="text-ink-soft text-sm leading-relaxed">{b.exportIntro}</p>
         <ExportCopy />

app/src/features/account/CloudBackup.tsx

@@ -0,0 +1,45 @@
+// Settings, "Backup": the copies in the cloud (spec 27): send one, keep them
+// up to date by themselves, bring one back. They need the account, which
+// is in "Account and phone".
+
+import { useState } from "react";
+import { useT } from "../../i18n";
+import { Button } from "../../ui/Button";
+import { CloudAuto } from "./CloudAuto";
+import { CloudCopies } from "./CloudCopies";
+import { CloudUpload } from "./CloudUpload";
+import { Section } from "./settingsParts";
+import { useCloud } from "./useCloud";
+
+export function CloudBackup({ goToAccount }: { goToAccount(): void }) {
+  const s = useT().account.settings;
+  const { status, refresh } = useCloud();
+  const [version, setVersion] = useState(0);
+  // No cloud set up in this Botloft: the Account page says so.
+  if (!status?.url) {
+    return null;
+  }
+  return (
+    <Section title={s.copiesTitle}>
+      {status.signedIn ? (
+        <>
+          <CloudUpload
+            onSent={() => {
+              setVersion((current) => current + 1);
+              void refresh();
+            }}
+          />
+          <CloudAuto />
+          <CloudCopies version={version} onChanged={refresh} />
+        </>
+      ) : (
+        <>
+          <p className="text-ink-soft text-sm">{s.backupNeedsAccount}</p>
+          <Button className="self-start" onClick={goToAccount}>
+            {s.goToAccount}
+          </Button>
+        </>
+      )}
+    </Section>
+  );
+}

app/src/features/account/CloudSignedIn.tsx

@@ -1,5 +1,5 @@
 // The account when this computer is in (spec 27.6): who, how much is used,
-// the copies, and the way out.
+// and the way out. The copies are in Backup (CloudBackup.tsx).
 
 import { useState } from "react";
 import { useT } from "../../i18n";
@@ -10,9 +10,6 @@ import { Button } from "../../ui/Button";
 import { Callout } from "../../ui/Callout";
 import { Confirm } from "../../ui/Confirm";
 import { backupError } from "./backupError";
-import { CloudAuto } from "./CloudAuto";
-import { CloudCopies } from "./CloudCopies";
-import { CloudUpload } from "./CloudUpload";
 
 export function CloudSignedIn({
   status,
@@ -23,7 +20,6 @@ export function CloudSignedIn({
 }) {
   const t = useT().account.cloud;
   const api = useApi();
-  const [version, setVersion] = useState(0);
   const [removing, setRemoving] = useState(false);
   const [asked, setAsked] = useState(false);
   const [problem, setProblem] = useState<string | null>(null);
@@ -59,15 +55,6 @@ export function CloudSignedIn({
         </Button>
       </div>
 
-      <CloudUpload
-        onSent={() => {
-          setVersion((current) => current + 1);
-          void refresh();
-        }}
-      />
-      <CloudAuto />
-      <CloudCopies version={version} onChanged={refresh} />
-
       <div className="flex flex-col gap-2 border-line border-t pt-3">
         {asked ? (
           <p role="status" className="text-ink-soft text-sm">