Restore save locally and backups list

Author: blackcoffeexbt

nixos/admin-app/static/css/admin.css

@@ -1898,6 +1898,58 @@ input:focus {
     padding: 0.9rem 1rem;
 }
 
+.recovery-subsection {
+    margin-bottom: 0;
+    border: 1px solid rgb(var(--ln-border));
+    border-radius: 0.9rem;
+    background: rgb(var(--ln-card) / 0.65);
+    overflow: hidden;
+}
+
+.recovery-subsection-summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    cursor: pointer;
+    padding: 0.9rem 1rem;
+}
+
+.recovery-subsection-summary::-webkit-details-marker {
+    display: none;
+}
+
+.recovery-subsection-summary::after {
+    content: "+";
+    color: rgb(var(--ln-muted));
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.recovery-subsection[open] .recovery-subsection-summary {
+    border-bottom: 1px solid rgb(var(--ln-border));
+}
+
+.recovery-subsection[open] .recovery-subsection-summary::after {
+    content: "-";
+    color: rgb(var(--ln-pink));
+}
+
+.recovery-subsection-meta {
+    margin-left: auto;
+    color: rgb(var(--ln-muted));
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.74rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.recovery-subsection-body {
+    padding: 0.9rem 1rem;
+}
+
 .recovery-saved-list {
     display: grid;
     gap: 0.7rem;

nixos/admin-app/static/js/dashboard-db.js

@@ -49,9 +49,18 @@
     D.renderSavedBackups = function (backups) {
         const container = el('recovery-saved-backups');
         const localSelect = el('restore-local-backup');
+        const countLabel = el('recovery-saved-backups-count');
+        const section = el('recovery-saved-backups-section');
         if (container) {
             container.innerHTML = '';
         }
+        if (countLabel) {
+            const total = backups && backups.length ? backups.length : 0;
+            countLabel.textContent = total === 1 ? '1 backup' : total + ' backups';
+        }
+        if (section && backups && backups.length) {
+            section.open = false;
+        }
         if (localSelect) {
             localSelect.innerHTML = '<option value="">Choose a saved backup</option>';
         }

nixos/admin-app/templates/partials/cards/recovery_center.html

@@ -69,6 +69,10 @@
                            placeholder="Required for every backup">
                 </label>
 
+                <p class="recovery-helper-text mb-3" id="recovery-destination-note">
+                    Save a protected backup on this box for later restores, or download one now to keep elsewhere.
+                </p>
+
                 <div class="recovery-callout">
                     <div class="recovery-callout-title">What is included?</div>
                     <p class="recovery-helper-text mb-0">
@@ -81,7 +85,23 @@
                             class="bg-ln-pink hover:bg-ln-pink-dim text-white font-mono text-sm py-2 px-4 rounded-lg transition-colors">
                         Download Backup
                     </button>
+                    <button id="recovery-save-btn"
+                            class="text-ln-muted hover:text-ln-pink text-xs font-mono uppercase tracking-wider transition-colors px-3 py-2 border border-ln-border rounded-lg hover:border-ln-pink/30">
+                        Save on This Box
+                    </button>
                 </div>
+
+                <details class="recovery-subsection mt-4" id="recovery-saved-backups-section">
+                    <summary class="recovery-subsection-summary">
+                        <span class="recovery-callout-title">Saved Backups On This Box</span>
+                        <span class="recovery-subsection-meta" id="recovery-saved-backups-count">0 backups</span>
+                    </summary>
+                    <div class="recovery-subsection-body">
+                        <div id="recovery-saved-backups" class="recovery-saved-list">
+                            <div class="recovery-helper-text">No saved backups yet.</div>
+                        </div>
+                    </div>
+                </details>
             </div>
         </section>