From cc79b3d9ec6ff412f69ab04d24af77f9285e738d Mon Sep 17 00:00:00 2001
From: Luca <102960244+Luca-Timo@users.noreply.github.com>
Date: Thu, 2 Jul 2026 20:37:35 +0200
Subject: [PATCH] refactor(backup): move .picpeak download to the Dashboard tab

Downloading a portable backup is a "make a backup" action, so it belongs
next to "Run Backup Now" on the Dashboard, not under Restore. Split the
combined card into PicpeakExportCard (Dashboard) and PicpeakRestoreCard
(Restore). The manifest stays bundled inside the .picpeak, so there is no
separate manifest-only download for the portable format.
---
 .../components/admin/PicpeakBackupCard.tsx    | 199 +++++++++---------
 frontend/src/pages/admin/BackupManagement.tsx |  19 +-
 2 files changed, 115 insertions(+), 103 deletions(-)

diff --git a/frontend/src/components/admin/PicpeakBackupCard.tsx b/frontend/src/components/admin/PicpeakBackupCard.tsx
index de8072f3..10ae1e60 100644
--- a/frontend/src/components/admin/PicpeakBackupCard.tsx
+++ b/frontend/src/components/admin/PicpeakBackupCard.tsx
@@ -6,23 +6,23 @@ import { useTranslation } from 'react-i18next';
 import { Button, Card } from '../common';
 import { api } from '../../config/api';
 
+// Portable ".picpeak" roundtrip, split across two Backup Manager tabs:
+//   - PicpeakExportCard  → Dashboard (making a backup)
+//   - PicpeakRestoreCard → Restore   (restoring a backup)
+// The manifest is bundled inside the .picpeak, so there is no separate
+// "manifest only" download here.
+
 interface RestoreResult {
   tables: number;
   filesRestored: number;
   usesExternalMedia: boolean;
 }
 
-// Portable ".picpeak" roundtrip: download a self-contained backup here, upload
-// it on another instance to clone this one. Restore is a FULL OVERRIDE (all data
-// replaced) that keeps only the current account — hence the explicit confirm.
-export const PicpeakBackupCard: React.FC = () => {
+// ── Download half (Dashboard) ────────────────────────────────────────────────
+export const PicpeakExportCard: React.FC = () => {
   const { t } = useTranslation();
-  const fileRef = useRef<HTMLInputElement>(null);
   const [includePhotos, setIncludePhotos] = useState(false);
   const [downloading, setDownloading] = useState(false);
-  const [pendingFile, setPendingFile] = useState<File | null>(null);
-  const [restoring, setRestoring] = useState(false);
-  const [result, setResult] = useState<RestoreResult | null>(null);
 
   const handleDownload = async () => {
     setDownloading(true);
@@ -49,6 +49,55 @@ export const PicpeakBackupCard: React.FC = () => {
     }
   };
 
+  return (
+    <Card padding="lg">
+      <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+        {t('backup.picpeak.title', 'Portable backup (.picpeak)')}
+      </h3>
+      <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
+        {t('backup.picpeak.intro', 'Download a single self-contained file, then upload it on another instance to clone this one — all through the browser.')}
+      </p>
+
+      <div className="mt-6">
+        <label className="flex items-center gap-2 text-sm text-neutral-700 dark:text-neutral-300">
+          <input
+            type="checkbox"
+            className="h-4 w-4 rounded border-neutral-300"
+            checked={includePhotos}
+            onChange={(e) => setIncludePhotos(e.target.checked)}
+          />
+          {t('backup.picpeak.includePhotos', 'Include original gallery photos (larger file)')}
+        </label>
+        <div className="mt-3 flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900/50 dark:bg-amber-900/20">
+          <ShieldAlert className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400" />
+          <p className="text-xs text-amber-800 dark:text-amber-200">
+            {t('backup.picpeak.secretsWarning', 'This file contains secrets in plain text (email password, admin credentials, API keys). Store it securely and only transfer it over trusted channels.')}
+          </p>
+        </div>
+        <Button
+          variant="outline"
+          className="mt-3"
+          isLoading={downloading}
+          onClick={handleDownload}
+          leftIcon={<Download className="h-4 w-4" />}
+        >
+          {t('backup.picpeak.download', 'Download .picpeak')}
+        </Button>
+      </div>
+    </Card>
+  );
+};
+
+PicpeakExportCard.displayName = 'PicpeakExportCard';
+
+// ── Restore half (Restore tab) ───────────────────────────────────────────────
+export const PicpeakRestoreCard: React.FC = () => {
+  const { t } = useTranslation();
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [restoring, setRestoring] = useState(false);
+  const [result, setResult] = useState<RestoreResult | null>(null);
+
   const onFilePick = (e: React.ChangeEvent<HTMLInputElement>) => {
     const f = e.target.files?.[0];
     if (f) setPendingFile(f);
@@ -77,99 +126,59 @@ export const PicpeakBackupCard: React.FC = () => {
   return (
     <Card padding="lg">
       <h3 className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-        {t('backup.picpeak.title', 'Portable backup (.picpeak)')}
+        {t('backup.picpeak.restoreTitle', 'Restore from a .picpeak')}
       </h3>
       <p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
-        {t('backup.picpeak.intro', 'Download a single self-contained file, then upload it on another instance to clone this one — all through the browser.')}
+        {t('backup.picpeak.restoreIntro', 'Upload a .picpeak taken from this or another instance. Same database engine only.')}
       </p>
+      <input ref={fileRef} type="file" accept=".picpeak,application/zip" className="hidden" onChange={onFilePick} />
+      <Button
+        variant="outline"
+        className="mt-4"
+        onClick={() => fileRef.current?.click()}
+        leftIcon={<Upload className="h-4 w-4" />}
+      >
+        {t('backup.picpeak.chooseFile', 'Choose .picpeak file…')}
+      </Button>
 
-      {/* Download */}
-      <div className="mt-6">
-        <label className="flex items-center gap-2 text-sm text-neutral-700 dark:text-neutral-300">
-          <input
-            type="checkbox"
-            className="h-4 w-4 rounded border-neutral-300"
-            checked={includePhotos}
-            onChange={(e) => setIncludePhotos(e.target.checked)}
-          />
-          {t('backup.picpeak.includePhotos', 'Include original gallery photos (larger file)')}
-        </label>
-        <div className="mt-3 flex items-start gap-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900/50 dark:bg-amber-900/20">
-          <ShieldAlert className="mt-0.5 h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400" />
-          <p className="text-xs text-amber-800 dark:text-amber-200">
-            {t('backup.picpeak.secretsWarning', 'This file contains secrets in plain text (email password, admin credentials, API keys). Store it securely and only transfer it over trusted channels.')}
-          </p>
-        </div>
-        <Button
-          variant="outline"
-          className="mt-3"
-          isLoading={downloading}
-          onClick={handleDownload}
-          leftIcon={<Download className="h-4 w-4" />}
-        >
-          {t('backup.picpeak.download', 'Download .picpeak')}
-        </Button>
-      </div>
-
-      <hr className="my-6 border-neutral-200 dark:border-neutral-700" />
-
-      {/* Restore */}
-      <div>
-        <h4 className="text-sm font-semibold text-neutral-800 dark:text-neutral-200">
-          {t('backup.picpeak.restoreTitle', 'Restore from a .picpeak')}
-        </h4>
-        <p className="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
-          {t('backup.picpeak.restoreIntro', 'Upload a .picpeak taken from this or another instance. Same database engine only.')}
-        </p>
-        <input ref={fileRef} type="file" accept=".picpeak,application/zip" className="hidden" onChange={onFilePick} />
-        <Button
-          variant="outline"
-          className="mt-3"
-          onClick={() => fileRef.current?.click()}
-          leftIcon={<Upload className="h-4 w-4" />}
-        >
-          {t('backup.picpeak.chooseFile', 'Choose .picpeak file…')}
-        </Button>
-
-        {result && (
-          <div className="mt-4 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-900/50 dark:bg-green-900/20">
-            <div className="flex items-start gap-2">
-              <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-400" />
-              <div className="min-w-0">
-                <p className="text-sm font-medium text-green-800 dark:text-green-200">
-                  {t('backup.picpeak.restoreDone', 'Backup restored.')}
+      {result && (
+        <div className="mt-4 rounded-lg border border-green-200 bg-green-50 p-4 dark:border-green-900/50 dark:bg-green-900/20">
+          <div className="flex items-start gap-2">
+            <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-600 dark:text-green-400" />
+            <div className="min-w-0">
+              <p className="text-sm font-medium text-green-800 dark:text-green-200">
+                {t('backup.picpeak.restoreDone', 'Backup restored.')}
+              </p>
+              <p className="mt-0.5 text-xs text-green-700 dark:text-green-300">
+                {t('backup.picpeak.restoreSummary', '{{tables}} tables and {{files}} files restored.', {
+                  tables: result.tables,
+                  files: result.filesRestored,
+                })}
+              </p>
+              {result.usesExternalMedia && (
+                <p className="mt-2 flex items-start gap-1 text-xs text-amber-800 dark:text-amber-300">
+                  <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+                  <span>
+                    {t('backup.picpeak.externalMediaNote', 'This backup references an external-media library. Make sure external-media routing is configured on this instance.')}{' '}
+                    <a
+                      href="https://github.com/PicPeak/picpeak/blob/main/README.md"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-0.5 underline"
+                    >
+                      {t('backup.picpeak.externalMediaLink', 'Setup guide')}
+                      <ExternalLink className="h-3 w-3" />
+                    </a>
+                  </span>
                 </p>
-                <p className="mt-0.5 text-xs text-green-700 dark:text-green-300">
-                  {t('backup.picpeak.restoreSummary', '{{tables}} tables and {{files}} files restored.', {
-                    tables: result.tables,
-                    files: result.filesRestored,
-                  })}
-                </p>
-                {result.usesExternalMedia && (
-                  <p className="mt-2 flex items-start gap-1 text-xs text-amber-800 dark:text-amber-300">
-                    <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
-                    <span>
-                      {t('backup.picpeak.externalMediaNote', 'This backup references an external-media library. Make sure external-media routing is configured on this instance.')}{' '}
-                      <a
-                        href="https://github.com/PicPeak/picpeak/blob/main/README.md"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-0.5 underline"
-                      >
-                        {t('backup.picpeak.externalMediaLink', 'Setup guide')}
-                        <ExternalLink className="h-3 w-3" />
-                      </a>
-                    </span>
-                  </p>
-                )}
-                <Button variant="primary" size="sm" className="mt-3" onClick={() => window.location.reload()}>
-                  {t('backup.picpeak.reload', 'Reload app')}
-                </Button>
-              </div>
+              )}
+              <Button variant="primary" size="sm" className="mt-3" onClick={() => window.location.reload()}>
+                {t('backup.picpeak.reload', 'Reload app')}
+              </Button>
             </div>
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       {/* Destructive confirmation */}
       {pendingFile && (
@@ -207,4 +216,4 @@ export const PicpeakBackupCard: React.FC = () => {
   );
 };
 
-PicpeakBackupCard.displayName = 'PicpeakBackupCard';
+PicpeakRestoreCard.displayName = 'PicpeakRestoreCard';
diff --git a/frontend/src/pages/admin/BackupManagement.tsx b/frontend/src/pages/admin/BackupManagement.tsx
index d0d74586..b72d3acd 100644
--- a/frontend/src/pages/admin/BackupManagement.tsx
+++ b/frontend/src/pages/admin/BackupManagement.tsx
@@ -23,7 +23,7 @@ import { BackupDashboard } from '../../components/admin/BackupDashboard';
 import { BackupConfiguration } from '../../components/admin/BackupConfiguration';
 import { BackupHistory } from '../../components/admin/BackupHistory';
 import { RestoreWizard } from '../../components/admin/RestoreWizard';
-import { PicpeakBackupCard } from '../../components/admin/PicpeakBackupCard';
+import { PicpeakExportCard, PicpeakRestoreCard } from '../../components/admin/PicpeakBackupCard';
 import { BackupIntegrityCard } from '../../components/admin/BackupIntegrityCard';
 import { BackupCoverageCard } from '../../components/admin/BackupCoverageCard';
 import { api } from '../../config/api';
@@ -205,12 +205,15 @@ export const BackupManagement: React.FC = () => {
       {/* Tab Content */}
       <div className="mt-6">
         {activeTab === 'dashboard' && (
-          <BackupDashboard
-            status={backupStatus}
-            config={backupConfig}
-            onRunBackup={() => manualBackupMutation.mutate()}
-            isBackupRunning={backupStatus?.isRunning || manualBackupMutation.isPending}
-          />
+          <div className="space-y-6">
+            <BackupDashboard
+              status={backupStatus}
+              config={backupConfig}
+              onRunBackup={() => manualBackupMutation.mutate()}
+              isBackupRunning={backupStatus?.isRunning || manualBackupMutation.isPending}
+            />
+            <PicpeakExportCard />
+          </div>
         )}
 
         {activeTab === 'configuration' && (
@@ -227,7 +230,7 @@ export const BackupManagement: React.FC = () => {
 
         {activeTab === 'restore' && (
           <div className="space-y-6">
-            <PicpeakBackupCard />
+            <PicpeakRestoreCard />
             <RestoreWizard onVerifyIntegrity={() => setActiveTab('integrity')} />
           </div>
         )}