feat(backup): admin and account UI for server backups, import by section

Admin settings: switch, time, retention, list with download and a
"Jetzt sichern" button. Account settings: own server backups with
download and restore (replace or add, for chosen sections, replace needs
a second tap). The MindSift import gets the same section picker.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/settings/AdminSettingsView.tsx

@@ -28,6 +28,7 @@ import { api, setCurrentSharingMode, triggerHaptic } from '../../lib/api';
 import { passwordProblem } from '../../lib/password';
 import { UserAvatar } from '../../components/UserAvatar';
 import { ToggleSwitch } from '../../components/ToggleSwitch';
+import { BackupAdminCard } from './BackupAdminCard';
 import { CountBadge } from '../../components/CountBadge';
 
 interface AdminSettingsViewProps {
@@ -135,6 +136,9 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
           smtpSkipVerify: Boolean(sys.smtpSkipVerify),
           allowPrivateWebhooks: Boolean(sys.allowPrivateWebhooks),
           smtpConfiguredViaEnv: Boolean(sys.smtpConfiguredViaEnv),
+          backupEnabled: Boolean(sys.backupEnabled),
+          backupTime: sys.backupTime || '03:00',
+          backupRetentionDays: sys.backupRetentionDays || 3,
         });
       }
     } catch (err: any) {
@@ -1093,6 +1097,8 @@ export const AdminSettingsView: React.FC<AdminSettingsViewProps> = ({
                   )}
                 </div>
 
+                <BackupAdminCard settings={settings} onSave={(patch) => handleSaveSystemSettings(patch)} />
+
                 {/* Alarm webhooks into the local network (SSRF protection) */}
                 <div className="p-4 bg-canvas border border-border rounded-card flex items-center justify-between gap-4">
                   <div className="pr-4">

frontend/src/features/settings/BackupAdminCard.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react';
+import { Archive, Download, Loader2 } from 'lucide-react';
+import { BackupFile, SystemSettings } from '../../lib/types';
+import { api } from '../../lib/api';
+import { ToggleSwitch } from '../../components/ToggleSwitch';
+import { formatBytes, saveBlob } from '../../lib/download';
+
+interface BackupAdminCardProps {
+  settings: SystemSettings;
+  onSave: (patch: Partial<SystemSettings>) => void;
+}
+
+// Admin: automatic daily backups (whole database + one backup per user), list and manual run
+export const BackupAdminCard: React.FC<BackupAdminCardProps> = ({ settings, onSave }) => {
+  const [files, setFiles] = useState<BackupFile[]>([]);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api.adminListBackups().then(setFiles).catch(() => {});
+  }, []);
+
+  const runNow = async () => {
+    setRunning(true);
+    setError(null);
+    try {
+      setFiles(await api.adminRunBackup());
+    } catch (err: any) {
+      setError(err.message || 'Backup fehlgeschlagen');
+      api.adminListBackups().then(setFiles).catch(() => {});
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const download = async (name: string) => {
+    try {
+      saveBlob(await api.adminDownloadBackup(name), name);
+    } catch (err: any) {
+      setError(err.message || 'Download fehlgeschlagen');
+    }
+  };
+
+  return (
+    <div className="p-4 bg-canvas border border-border rounded-card space-y-3">
+      <div className="flex items-center justify-between gap-4">
+        <div className="pr-4">
+          <p className="font-bold text-main flex items-center gap-1.5">
+            <Archive className="w-3.5 h-3.5 text-accent" />
+            Automatische Backups
+          </p>
+          <p className="text-[11px] text-muted mt-0.5">
+            Täglich ein Abzug der ganzen Datenbank und ein Backup je Benutzer unter <code className="font-mono">backups/</code> im
+            Datenverzeichnis. Das schützt vor Fehlbedienung, nicht vor einer kaputten Platte: den Ordner zusätzlich woanders sichern.
+          </p>
+        </div>
+        <ToggleSwitch
+          checked={Boolean(settings.backupEnabled)}
+          onChange={(backupEnabled) => onSave({ backupEnabled })}
+          title={settings.backupEnabled ? 'Automatische Backups ausschalten' : 'Automatische Backups einschalten'}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-end gap-3">
+        <label className="text-[11px] text-muted">
+          Uhrzeit
+          <input
+            type="time"
+            value={settings.backupTime || '03:00'}
+            onChange={(e) => e.target.value && onSave({ backupTime: e.target.value })}
+            className="block mt-1 h-11 sm:h-8 px-2 input-field text-base sm:text-xs w-28"
+          />
+        </label>
+        <label className="text-[11px] text-muted">
+          Aufbewahren (Tage)
+          <input
+            type="number"
+            min={1}
+            max={365}
+            value={settings.backupRetentionDays || 3}
+            onChange={(e) => {
+              const n = parseInt(e.target.value, 10);
+              if (n >= 1 && n <= 365) onSave({ backupRetentionDays: n });
+            }}
+            className="block mt-1 h-11 sm:h-8 px-2 input-field text-base sm:text-xs w-24"
+          />
+        </label>
+        <button
+          type="button"
+          onClick={runNow}
+          disabled={running}
+          className="btn-action h-11 sm:h-8 px-3 text-xs inline-flex items-center gap-1.5 disabled:opacity-50"
+        >
+          {running ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Archive className="w-3.5 h-3.5 text-accent" />}
+          {running ? 'Sichere…' : 'Jetzt sichern'}
+        </button>
+      </div>
+      {error && <p className="text-[11px] text-status-err">{error}</p>}
+
+      <div className="border border-border divide-y divide-border bg-panel">
+        {files.length === 0 ? (
+          <p className="p-3 text-[11px] text-faint">Noch keine Server-Backups vorhanden.</p>
+        ) : (
+          files.map((f) => (
+            <div key={f.name} className="px-3 py-2 flex items-center justify-between gap-3">
+              <div className="min-w-0">
+                <p className="text-xs font-mono text-main truncate">{f.name}</p>
+                <p className="text-[11px] text-faint">
+                  {new Date(f.createdAt).toLocaleString('de-DE')} · {formatBytes(f.size)}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={() => download(f.name)}
+                className="btn-action h-11 sm:h-7 px-2.5 text-[11px] inline-flex items-center gap-1 shrink-0"
+              >
+                <Download className="w-3.5 h-3.5" />
+                Download
+              </button>
+            </div>
+          ))
+        )}
+      </div>
+      <p className="text-[11px] text-faint">
+        Zurückspielen eines Datenbank-Abzugs: Container stoppen, <code className="font-mono">mindsift.db</code> durch die entpackte Datei
+        ersetzen (<code className="font-mono">gunzip</code>), Container starten. Einzelne Benutzer stellen ihre Daten selbst in den
+        Kontoeinstellungen wieder her.
+      </p>
+    </div>
+  );
+};

frontend/src/features/settings/ImportCard.tsx

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { Upload, Check, AlertCircle, FileArchive } from 'lucide-react';
-import { ImportSummary } from '../../lib/types';
+import { DATA_SECTIONS, DataSection, ImportSummary } from '../../lib/types';
+import { SectionPicker } from './SectionPicker';
 import { api } from '../../lib/api';
 
 interface ImportCardProps {
@@ -18,6 +19,7 @@ const summaryParts = (s: ImportSummary) =>
     s.tasks && `${s.tasks} Aufgabe${s.tasks === 1 ? '' : 'n'}`,
     s.lists && `${s.lists} Liste${s.lists === 1 ? '' : 'n'} mit ${s.listItems} Einträgen`,
     s.inbox && `${s.inbox} Gedanke${s.inbox === 1 ? '' : 'n'} für die Triage`,
+    s.themes && `${s.themes} Theme${s.themes === 1 ? '' : 's'}`,
   ].filter(Boolean) as string[];
 
 // One import path: drop or pick a file, see a preview of what would be created, then import.
@@ -33,6 +35,9 @@ export const ImportCard: React.FC<ImportCardProps> = ({ source, title, descripti
   // MindSift data can replace the current state instead of being added next to it
   const [mode, setMode] = useState<'merge' | 'restore'>('merge');
   const [confirmRestore, setConfirmRestore] = useState(false);
+  // MindSift data: which parts to take from the file
+  const [sections, setSections] = useState<DataSection[]>(DATA_SECTIONS.map((s) => s.id));
+  const sectionParam = source === 'mindsift' ? sections : undefined;
   const restoring = source === 'mindsift' && mode === 'restore';
 
   const reset = () => {
@@ -49,7 +54,7 @@ export const ImportCard: React.FC<ImportCardProps> = ({ source, title, descripti
     setFile(f);
     setBusy(true);
     try {
-      setPreview(await api.importData(source, f, true));
+      setPreview(await api.importData(source, f, true, 'merge', sectionParam));
     } catch (err: any) {
       setError(err.message || 'Datei konnte nicht gelesen werden');
     } finally {
@@ -62,7 +67,7 @@ export const ImportCard: React.FC<ImportCardProps> = ({ source, title, descripti
     setBusy(true);
     setError(null);
     try {
-      setResult(await api.importData(source, file, false, restoring ? 'restore' : 'merge'));
+      setResult(await api.importData(source, file, false, restoring ? 'restore' : 'merge', sectionParam));
       setFile(null);
       setPreview(null);
       setConfirmRestore(false);
@@ -87,7 +92,7 @@ export const ImportCard: React.FC<ImportCardProps> = ({ source, title, descripti
           {(
             [
               ['merge', 'Hinzufügen', 'Bestehende Daten behalten, Backup daneben anlegen.'],
-              ['restore', 'Wiederherstellen', 'Eigene Notizen, Aufgaben und Listen vorher löschen.'],
+              ['restore', 'Wiederherstellen', 'Gewählte Bereiche vorher leeren.'],
             ] as const
           ).map(([value, label, text]) => (
             <button
@@ -114,6 +119,24 @@ export const ImportCard: React.FC<ImportCardProps> = ({ source, title, descripti
         </div>
       )}
 
+      {source === 'mindsift' && (
+        <SectionPicker
+          value={sections}
+          onChange={(next) => {
+            setSections(next);
+            // The preview depends on the sections, so a picked file is read again
+            if (file) {
+              setBusy(true);
+              api
+                .importData(source, file, true, 'merge', next)
+                .then(setPreview)
+                .catch((err) => setError(err.message))
+                .finally(() => setBusy(false));
+            }
+          }}
+        />
+      )}
+
       <div
         onDragOver={(e) => {
           e.preventDefault();
@@ -194,8 +217,9 @@ export const ImportCard: React.FC<ImportCardProps> = ({ source, title, descripti
                 className="mt-0.5 w-4 h-4 shrink-0"
               />
               <span>
-                <strong className="text-status-err">Achtung:</strong> Alle deine bisherigen Notizen, Ordner, Aufgaben, Gedanken und
-                Listen werden vor dem Import unwiderruflich gelöscht und durch das Backup ersetzt. Mit dir geteilte Inhalte anderer
+                <strong className="text-status-err">Achtung:</strong> Deine bisherigen Daten in den gewählten Bereichen
+                ({DATA_SECTIONS.filter((x) => sections.includes(x.id)).map((x) => x.label).join(', ')}) werden vor dem Import
+                unwiderruflich gelöscht und durch das Backup ersetzt. Mit dir geteilte Inhalte anderer
                 bleiben erhalten.
               </span>
             </label>

frontend/src/features/settings/SectionPicker.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Check } from 'lucide-react';
+import { DATA_SECTIONS, DataSection } from '../../lib/types';
+
+interface SectionPickerProps {
+  value: DataSection[];
+  onChange: (sections: DataSection[]) => void;
+  label?: string;
+}
+
+// Which parts of the own data a restore or import covers; at least one stays selected
+export const SectionPicker: React.FC<SectionPickerProps> = ({ value, onChange, label = 'Bereiche' }) => (
+  <div className="flex flex-wrap items-center gap-1.5" role="group" aria-label={label}>
+    <span className="text-[11px] text-muted mr-1">{label}:</span>
+    {DATA_SECTIONS.map((sec) => {
+      const on = value.includes(sec.id);
+      return (
+        <button
+          key={sec.id}
+          type="button"
+          role="checkbox"
+          aria-checked={on}
+          onClick={() => {
+            const next = on ? value.filter((v) => v !== sec.id) : [...value, sec.id];
+            if (next.length > 0) onChange(next);
+          }}
+          className={`h-11 sm:h-7 px-2.5 rounded-btn border text-[11px] inline-flex items-center gap-1 transition-colors ${
+            on ? 'border-accent bg-accent/10 text-main' : 'border-border text-muted hover:text-main'
+          }`}
+        >
+          {on && <Check className="w-3 h-3 text-accent" />}
+          {sec.label}
+        </button>
+      );
+    })}
+  </div>
+);

frontend/src/features/settings/ServerBackupsCard.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from 'react';
+import { Archive, Check, Download, RotateCcw } from 'lucide-react';
+import { BackupFile, DataSection, DATA_SECTIONS, ImportSummary } from '../../lib/types';
+import { api } from '../../lib/api';
+import { formatBytes, saveBlob } from '../../lib/download';
+import { SectionPicker } from './SectionPicker';
+
+// The user's own automatic backups on the server: download or restore (all or some sections)
+export const ServerBackupsCard: React.FC = () => {
+  const [files, setFiles] = useState<BackupFile[]>([]);
+  const [open, setOpen] = useState<string | null>(null); // backup being restored
+  const [mode, setMode] = useState<'merge' | 'restore'>('restore');
+  const [sections, setSections] = useState<DataSection[]>(DATA_SECTIONS.map((s) => s.id));
+  const [confirm, setConfirm] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<ImportSummary | null>(null);
+
+  useEffect(() => {
+    api.listMyBackups().then(setFiles).catch(() => {});
+  }, []);
+
+  const startRestore = (name: string) => {
+    setOpen(open === name ? null : name);
+    setConfirm(false);
+    setError(null);
+    setResult(null);
+  };
+
+  const restore = async () => {
+    if (!open) return;
+    setBusy(true);
+    setError(null);
+    try {
+      setResult(await api.restoreMyBackup(open, mode, sections));
+      setConfirm(false);
+    } catch (err: any) {
+      setError(err.message || 'Wiederherstellen fehlgeschlagen');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const sectionNames = DATA_SECTIONS.filter((s) => sections.includes(s.id))
+    .map((s) => s.label)
+    .join(', ');
+
+  return (
+    <div className="space-y-2">
+      <div>
+        <h3 className="font-bold text-main flex items-center gap-1.5">
+          <Archive className="w-3.5 h-3.5 text-accent" />
+          Server-Backups
+        </h3>
+        <p className="text-muted text-[11px] mt-0.5">
+          Automatische tägliche Sicherungen deiner Daten auf dem Server (falls die Administration sie eingeschaltet hat).
+        </p>
+      </div>
+      <div className="border border-border divide-y divide-border bg-canvas">
+        {files.length === 0 ? (
+          <p className="p-3 text-[11px] text-faint">Noch keine Server-Backups vorhanden.</p>
+        ) : (
+          files.map((f) => (
+            <div key={f.name} className="p-3 space-y-2">
+              <div className="flex flex-wrap items-center justify-between gap-2">
+                <div className="min-w-0">
+                  <p className="text-xs font-semibold text-main">{new Date(f.createdAt).toLocaleString('de-DE')}</p>
+                  <p className="text-[11px] text-faint">{formatBytes(f.size)}</p>
+                </div>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    onClick={async () => saveBlob(await api.downloadMyBackup(f.name), f.name)}
+                    className="btn-action h-11 sm:h-7 px-2.5 text-[11px] inline-flex items-center gap-1"
+                  >
+                    <Download className="w-3.5 h-3.5" />
+                    Download
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => startRestore(f.name)}
+                    aria-expanded={open === f.name}
+                    className="btn-action h-11 sm:h-7 px-2.5 text-[11px] inline-flex items-center gap-1"
+                  >
+                    <RotateCcw className="w-3.5 h-3.5 text-accent" />
+                    Wiederherstellen
+                  </button>
+                </div>
+              </div>
+
+              {open === f.name && (
+                <div className="p-3 rounded-card border border-border bg-panel space-y-2.5">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2" role="radiogroup" aria-label="Art der Wiederherstellung">
+                    {(
+                      [
+                        ['restore', 'Ersetzen', 'Gewählte Bereiche vorher leeren.'],
+                        ['merge', 'Hinzufügen', 'Bestehendes behalten, Backup daneben anlegen.'],
+                      ] as const
+                    ).map(([value, label, text]) => (
+                      <button
+                        key={value}
+                        type="button"
+                        role="radio"
+                        aria-checked={mode === value}
+                        onClick={() => {
+                          setMode(value);
+                          setConfirm(false);
+                        }}
+                        className={`p-2 min-h-[44px] text-left border rounded-card transition-colors ${
+                          mode === value ? (value === 'restore' ? 'border-status-err bg-status-err/10' : 'border-accent bg-accent/10') : 'border-border'
+                        }`}
+                      >
+                        <span className="block text-xs font-semibold text-main">{label}</span>
+                        <span className="block text-[11px] text-muted">{text}</span>
+                      </button>
+                    ))}
+                  </div>
+                  <SectionPicker value={sections} onChange={setSections} />
+                  {result ? (
+                    <p className="text-[11px] text-status-ok flex items-center gap-1">
+                      <Check className="w-3.5 h-3.5" /> Wiederhergestellt: {result.notes} Notizen, {result.tasks} Aufgaben, {result.lists} Listen,{' '}
+                      {result.inbox} Gedanken, {result.themes ?? 0} Themes.
+                    </p>
+                  ) : (
+                    <button
+                      type="button"
+                      disabled={busy}
+                      onClick={() => (mode === 'restore' && !confirm ? setConfirm(true) : restore())}
+                      className={`h-11 sm:h-8 px-4 text-xs font-semibold disabled:opacity-50 ${
+                        mode === 'restore' ? 'btn-action border-status-err text-status-err' : 'btn-primary'
+                      }`}
+                    >
+                      {busy
+                        ? 'Stelle wieder her…'
+                        : mode === 'restore' && confirm
+                        ? `Wirklich ${sectionNames} ersetzen?`
+                        : mode === 'restore'
+                        ? 'Ersetzen'
+                        : 'Hinzufügen'}
+                    </button>
+                  )}
+                  {error && <p className="text-[11px] text-status-err">{error}</p>}
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/features/settings/UserSettingsView.tsx

@@ -19,6 +19,8 @@ import {
 } from 'lucide-react';
 import { AuthStatus, User, UserTheme } from '../../lib/types';
 import { ApiKeysPanel } from './ApiKeysPanel';
+import { ServerBackupsCard } from './ServerBackupsCard';
+import { saveBlob } from '../../lib/download';
 import { api, clearToken, triggerHaptic } from '../../lib/api';
 import { passwordProblem } from '../../lib/password';
 import { customThemeId, ThemeId, ThemeOption } from '../../lib/theme';
@@ -363,16 +365,6 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
 
   // --- Handlers: Export ---
   // Works on mobile browsers too: the link must be in the document and the URL alive until the click ran
-  const saveBlob = (blob: Blob, filename: string) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    a.remove();
-    window.setTimeout(() => URL.revokeObjectURL(url), 10000);
-  };
 
   const [exportingBackup, setExportingBackup] = useState(false);
   const handleExportData = async () => {
@@ -1166,6 +1158,10 @@ export const UserSettingsView: React.FC<UserSettingsViewProps> = ({
 
               <ApiKeysPanel />
 
+              <div className="pt-4 border-t border-border">
+                <ServerBackupsCard />
+              </div>
+
               {/* Full Data Backup */}
               <div className="pt-4 border-t border-border flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                 <div>