feat: device backup/restore + quick wins + username casing

Backup / restore flow:
- deviceBackup.ts: v2 format wrapping userId + deviceId + privateKey in
  an encrypted JSON payload so restore can re-seed localStorage, vault,
  and reattach to the existing server-side device row without provisioning
  a new one (conv-key bundles stay valid, no "awaiting key" state)
- shared/auth: restoreDeviceFromServerRecord — verifies session.user.id
  matches the backup's userId, confirms the server device row still
  exists, then writes the private key into the local secret store
- BackupExportDialog — passphrase + confirm, generates portable string,
  copy + download .txt
- DeviceRestore — textarea + passphrase → seeds vault + writes
  deviceId cache, treats this install as the original device
- DevicePage now has tabs "Neu einrichten" / "Backup wiederherstellen"
- BackupPromptBanner — post-registration nudge, reads sessionStorage
  signal from fresh provisions and persists "never-ask-again" in
  localStorage so it stops nagging
- SettingsPage backup section: uses the new dialog; removes the
  dangerous in-place key import (restore now lives in the device flow)

Username casing:
- Migration 20260420000002 drops lower() from the handle_new_user trigger
  and widens the regex to [A-Za-z0-9_]. profiles.username is citext so
  uniqueness + lookups stay case-insensitive regardless of stored casing
- Shared auth: trim() only, no toLowerCase on signup/lookups/search.
  ilike handles CI anyway and citext makes client normalisation redundant
- AuthPage regex + input preserve case, FriendsPage search preserves case
- i18n (de+en): updated username_hint / username_invalid / ERR_USERNAME_INVALID
  to reflect the new rule

Quick wins:
- React Router v7 future flags (v7_startTransition + v7_relativeSplatPath)
  set on BrowserRouter — silences the upgrade warning
- appUpdates.checkForUpdate: swallow benign network/fetch/"could not
  fetch valid release JSON" cases silently instead of console spam
- osNotify: persist an "asked" marker in localStorage so the permission
  prompt only fires once per install (OS already persists the answer,
  but the plugin re-queries loudly otherwise)

apps/desktop/src/pages/SettingsPage.tsx

@@ -8,11 +8,11 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Avatar } from '../components/Avatar';
+import { BackupExportDialog } from '../components/BackupExportDialog';
 import { LockIcon } from '../components/icons';
 import { useAuth } from '../context/AuthContext';
-import { loadDevicePrivateKey, saveDevicePrivateKey } from '@chat-app/shared/auth';
+import { loadDevicePrivateKey } from '@chat-app/shared/auth';
 import { deleteAvatarObject, uploadAvatar } from '../lib/avatarUpload';
-import { exportDeviceKey, importDeviceKey } from '../lib/deviceBackup';
 import { devLocalSecretStore } from '../lib/secretStore';
 import {
   getPttSettings,
@@ -447,65 +447,32 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {
 function DeviceKeyBackupControls() {
   const { t } = useTranslation(['app']);
   const { profile, device } = useAuth();
-  const [busy, setBusy] = useState(false);
-  const [backupOut, setBackupOut] = useState<string | null>(null);
-  const [exportPass, setExportPass] = useState('');
-  const [importPass, setImportPass] = useState('');
-  const [importBlob, setImportBlob] = useState('');
-  const [msg, setMsg] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null);
-
+  const [open, setOpen] = useState(false);
+  const [privateKey, setPrivateKey] = useState<Uint8Array | null>(null);
+  const [err, setErr] = useState<string | null>(null);
   const canRun = !!profile?.userId && !!device?.id;
 
-  async function handleExport() {
+  async function handleOpen() {
     if (!canRun) return;
-    setMsg(null);
-    setBusy(true);
+    setErr(null);
     try {
       const priv = await loadDevicePrivateKey(devLocalSecretStore, profile.userId, device.id);
-      if (!priv) throw new Error('No device key on this install');
-      const out = await exportDeviceKey(priv, exportPass);
-      setBackupOut(out);
-      setExportPass('');
-      setMsg({
-        kind: 'ok',
-        text: t('app:settings.backup_export_ok', {
-          defaultValue: 'Backup erstellt — kopiere und bewahre es sicher auf.',
-        }),
-      });
-    } catch (err: unknown) {
-      setMsg({
-        kind: 'err',
-        text: err instanceof Error ? err.message : 'export failed',
-      });
-    } finally {
-      setBusy(false);
+      if (!priv) throw new Error(t('app:backup.no_key_here', {
+        defaultValue: 'Kein Geräteschlüssel auf dieser Installation.',
+      }));
+      setPrivateKey(priv);
+      setOpen(true);
+    } catch (e: unknown) {
+      setErr(e instanceof Error ? e.message : 'failed to load key');
     }
   }
 
-  async function handleImport() {
-    if (!canRun) return;
-    setMsg(null);
-    setBusy(true);
-    try {
-      const priv = await importDeviceKey(importBlob.trim(), importPass);
-      await saveDevicePrivateKey(devLocalSecretStore, profile.userId, device.id, priv);
-      setImportBlob('');
-      setImportPass('');
-      setMsg({
-        kind: 'ok',
-        text: t('app:settings.backup_import_ok', {
-          defaultValue:
-            'Schlüssel importiert. Beim nächsten Reload sollten alte Nachrichten lesbar sein.',
-        }),
-      });
-    } catch (err: unknown) {
-      setMsg({
-        kind: 'err',
-        text: err instanceof Error ? err.message : 'import failed',
-      });
-    } finally {
-      setBusy(false);
+  function handleClose() {
+    setOpen(false);
+    if (privateKey) {
+      for (let i = 0; i < privateKey.length; i++) privateKey[i] = 0;
     }
+    setPrivateKey(null);
   }
 
   return (
@@ -514,87 +481,31 @@ function DeviceKeyBackupControls() {
         {t('app:settings.device_key_backup', { defaultValue: 'Geräteschlüssel-Backup' })}
       </div>
       <p className="mt-1 text-xs text-fg-muted">
-        {t('app:settings.device_key_backup_hint', {
+        {t('app:settings.device_key_backup_hint_v2', {
           defaultValue:
-            'Sichere deinen privaten Schlüssel passwortgeschützt, damit du auf neuen Geräten alte Nachrichten weiter lesen kannst.',
+            'Backup deines Geräteschlüssels. Ohne Backup kein Zugriff auf alte Nachrichten wenn Gerät oder Browser-Storage verloren geht. Wiederherstellung passiert im Gerät-Einrichtungsbildschirm.',
         })}
       </p>
+      <button
+        type="button"
+        disabled={!canRun}
+        onClick={() => void handleOpen()}
+        className="mt-3 inline-flex cursor-pointer items-center gap-1.5 rounded-lg bg-accent px-3 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {t('app:backup.export_open', { defaultValue: 'Backup erstellen' })}
+      </button>
+      {err && (
+        <p className="mt-2 text-xs text-rose-600 dark:text-rose-300">{err}</p>
+      )}
 
-      <div className="mt-4 space-y-2">
-        <div className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
-          {t('app:settings.backup_export', { defaultValue: 'Export' })}
-        </div>
-        <div className="flex gap-2">
-          <input
-            type="password"
-            value={exportPass}
-            onChange={(e) => setExportPass(e.target.value)}
-            placeholder={t('app:settings.backup_passphrase', { defaultValue: 'Passphrase (min 8)' })}
-            className="flex-1 rounded-lg border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
-          />
-          <button
-            type="button"
-            disabled={busy || exportPass.length < 8 || !canRun}
-            onClick={() => void handleExport()}
-            className="cursor-pointer rounded-lg bg-accent px-4 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {t('app:settings.backup_create', { defaultValue: 'Erstellen' })}
-          </button>
-        </div>
-        {backupOut && (
-          <textarea
-            readOnly
-            value={backupOut}
-            onClick={(e) => (e.target as HTMLTextAreaElement).select()}
-            rows={3}
-            className="w-full rounded-lg border border-emerald-500/30 bg-emerald-500/5 p-2 font-mono text-[10px] text-emerald-700 dark:text-emerald-200"
-          />
-        )}
-      </div>
-
-      <div className="mt-4 space-y-2 border-t border-line pt-4">
-        <div className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
-          {t('app:settings.backup_import', { defaultValue: 'Import' })}
-        </div>
-        <textarea
-          value={importBlob}
-          onChange={(e) => setImportBlob(e.target.value)}
-          rows={3}
-          placeholder={t('app:settings.backup_blob_placeholder', {
-            defaultValue: 'chatapp-backup-v1.…',
-          })}
-          className="w-full rounded-lg border border-line bg-surface-3 p-2 font-mono text-[11px] text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
+      {open && profile && device && privateKey && (
+        <BackupExportDialog
+          open={open}
+          userId={profile.userId}
+          deviceId={device.id}
+          privateKey={privateKey}
+          onClose={handleClose}
         />
-        <div className="flex gap-2">
-          <input
-            type="password"
-            value={importPass}
-            onChange={(e) => setImportPass(e.target.value)}
-            placeholder={t('app:settings.backup_passphrase', { defaultValue: 'Passphrase' })}
-            className="flex-1 rounded-lg border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
-          />
-          <button
-            type="button"
-            disabled={busy || !importBlob || !importPass || !canRun}
-            onClick={() => void handleImport()}
-            className="cursor-pointer rounded-lg bg-emerald-600 px-4 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
-          >
-            {t('app:settings.backup_restore', { defaultValue: 'Wiederherstellen' })}
-          </button>
-        </div>
-      </div>
-
-      {msg && (
-        <p
-          className={
-            'mt-3 text-xs ' +
-            (msg.kind === 'ok'
-              ? 'text-emerald-600 dark:text-emerald-300'
-              : 'text-rose-600 dark:text-rose-300')
-          }
-        >
-          {msg.text}
-        </p>
       )}
     </div>
   );