Release 0.11.0: trust device for 30 days

frontend/src/components/NotificationSettings.jsx

@@ -32,6 +32,9 @@ import {
   getMe,
   setPasscode,
   clearPasscode,
+  listMyDevices,
+  revokeMyDevice,
+  revokeAllMyDevices,
 } from '../api.js'
 import { getConsent, onConsentChange, hydrateFromServer } from '../lib/consent.js'
 
@@ -54,11 +57,126 @@ export default function NotificationSettings({ viewer }) {
       <WatchesSection />
       <MutesSection viewer={viewer} />
       <SignInSection />
+      <DevicesSection />
       <PrivacyCookiesSection />
     </div>
   )
 }
 
+// ── v0.11.0: trusted devices (§6.2, roadmap item #9) ──────────────────────
+//
+// Lists the user's active device-trust rows and lets them revoke any
+// or all. A revoke marks the row dead server-side; the matching
+// device's next visit will be refused and the cookie cleared. The
+// surface intentionally does not single out the row whose cookie the
+// current request carries — every row reads identically, so the user
+// can revoke "this device" alongside any other from a single page.
+
+function DevicesSection() {
+  const [devices, setDevices] = useState(null)
+  const [error, setError] = useState(null)
+  const [busy, setBusy] = useState(false)
+
+  useEffect(() => {
+    refresh()
+  }, [])
+
+  async function refresh() {
+    try {
+      const { items } = await listMyDevices()
+      setDevices(items || [])
+      setError(null)
+    } catch (e) {
+      setError(e.message || 'Could not load trusted devices.')
+    }
+  }
+
+  async function onRevoke(deviceId) {
+    setBusy(true)
+    try {
+      await revokeMyDevice(deviceId)
+      await refresh()
+    } catch (e) {
+      setError(e.message || 'Could not revoke device.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  async function onRevokeAll() {
+    if (!confirm('Revoke trust on every device, including this one? You will be asked to sign in via email next time.')) {
+      return
+    }
+    setBusy(true)
+    try {
+      await revokeAllMyDevices()
+      await refresh()
+    } catch (e) {
+      setError(e.message || 'Could not revoke devices.')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <SectionShell
+      title="Trusted devices"
+      subtitle="Devices where you've checked “Trust this device for 30 days.” Sign-in is automatic on these devices until the trust expires or you revoke it."
+    >
+      {devices === null && <p className="settings-note">Loading…</p>}
+      {devices !== null && devices.length === 0 && (
+        <p className="device-empty">
+          No trusted devices. Sign in and check “Trust this device for 30 days”
+          to add the device you're on now.
+        </p>
+      )}
+      {devices !== null && devices.length > 0 && (
+        <>
+          <ul className="device-list">
+            {devices.map(d => (
+              <li key={d.id} className="device-list-item">
+                <div className="device-meta">
+                  <div className="device-ua">{d.user_agent || 'Unknown device'}</div>
+                  <div className="device-stamps">
+                    Trusted {formatStamp(d.created_at)} · last seen {formatStamp(d.last_seen_at)} · expires {formatStamp(d.expires_at)}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => onRevoke(d.id)}
+                  disabled={busy}
+                  title="Revoke trust on this device"
+                >
+                  Revoke
+                </button>
+              </li>
+            ))}
+          </ul>
+          <button
+            type="button"
+            className="device-revoke-all"
+            onClick={onRevokeAll}
+            disabled={busy}
+          >
+            Revoke all devices
+          </button>
+        </>
+      )}
+      {error && <p className="settings-note warning">{error}</p>}
+    </SectionShell>
+  )
+}
+
+function formatStamp(stamp) {
+  // The server emits SQLite `datetime('now')` strings (UTC, no
+  // timezone marker). Parse defensively; fall back to the raw stamp
+  // if Date can't make sense of it.
+  if (!stamp) return '—'
+  const d = new Date(stamp.replace(' ', 'T') + 'Z')
+  if (Number.isNaN(d.getTime())) return stamp
+  return d.toLocaleString()
+}
+
 // ── §6.2 sign-in (v0.10.0 / roadmap item #8): passcode management ──────────
 
 function SignInSection() {