recovery center improvements

Author: blackcoffeexbt

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

@@ -1666,9 +1666,10 @@ input:focus {
 }
 
 .recovery-header-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.85rem;
+    align-items: start;
     padding: 1rem 1.05rem;
     border-radius: 1rem;
     border: 1px solid rgb(var(--ln-border));
@@ -1684,6 +1685,31 @@ input:focus {
     transform: translateY(-1px);
 }
 
+.recovery-header-card-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.4rem;
+    height: 2.4rem;
+    border-radius: 0.85rem;
+    border: 1px solid rgb(var(--ln-pink) / 0.22);
+    background: rgb(var(--ln-pink) / 0.1);
+    color: rgb(var(--ln-pink));
+    flex-shrink: 0;
+}
+
+.recovery-header-card-icon svg {
+    width: 1rem;
+    height: 1rem;
+}
+
+.recovery-header-card-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    min-width: 0;
+}
+
 .recovery-header-card-label {
     color: rgb(var(--ln-text));
     font-family: 'JetBrains Mono', monospace;
@@ -1872,58 +1898,6 @@ 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;
@@ -1961,6 +1935,10 @@ input:focus {
         grid-template-columns: 1fr;
     }
 
+    .recovery-header-card {
+        grid-template-columns: auto 1fr;
+    }
+
     .recovery-accordion-summary {
         flex-direction: column;
     }

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

@@ -49,18 +49,9 @@
     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

@@ -1,3 +1,9 @@
+<div class="recovery-footer-note mb-4">
+    <div class="recovery-callout-title">Important</div>
+    <p class="recovery-helper-text mb-0">
+        Recovery archives can restore LNbits data, device settings, remote-access state, and Spark-sidecar files. Your Spark seed phrase is still the main secret for recovering wallet access and funds.
+    </p>
+</div>
 <div class="bg-ln-card border border-ln-border rounded-xl p-4 sm:p-6 transition-all duration-500 recovery-center" id="recovery-card">
     <div class="recovery-status-strip">
         <div class="recovery-status-pill">
@@ -56,10 +62,6 @@
                         <option value="quick">Quick backup</option>
                     </select>
                 </label>
-                <p class="recovery-helper-text mb-3" id="recovery-destination-note">
-                    Saved on this box in the local recovery folder. You can download saved backups below at any time.
-                </p>
-
                 <label class="block mb-3">
                     <span class="text-ln-muted text-xs font-mono uppercase tracking-wider block mb-1.5">Backup Password</span>
                     <input type="password" id="recovery-passphrase" autocomplete="new-password"
@@ -79,23 +81,7 @@
                             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>
 
@@ -166,44 +152,5 @@
                 </button>
             </div>
         </section>
-
-        <section class="recovery-accordion" id="recovery-restore">
-            <div class="recovery-accordion-summary">
-                <div class="recovery-step-heading">
-                    <div class="recovery-step-icon" aria-hidden="true">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-                            <path d="M3 12a9 9 0 1 0 3-6.7"></path>
-                            <path d="M3 3v6h6"></path>
-                            <path d="M12 8v4l2.5 2.5"></path>
-                        </svg>
-                    </div>
-                    <div class="recovery-step-text">
-                        <div class="recovery-step-label">Restore</div>
-                        <div class="recovery-step-title">Inspect And Recover From An Existing Archive</div>
-                        <p class="recovery-step-copy">Validate the backup first, then choose only the parts you want to restore onto this box.</p>
-                    </div>
-                </div>
-                <span class="recovery-accordion-badge">Restore</span>
-            </div>
-            <div class="recovery-accordion-body">
-                <div class="recovery-callout mb-4">
-                    <div class="recovery-callout-title">Safe restore flow</div>
-                    <p class="recovery-helper-text mb-0">
-                        LNbitsBox can restore from a backup file you upload or from one already saved on this box. It checks the backup before making changes.
-                    </p>
-                </div>
-                <button id="recovery-restore-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">
-                    Open Restore Tool
-                </button>
-            </div>
-        </section>
-    </div>
-
-    <div class="recovery-footer-note">
-        <div class="recovery-callout-title">Important</div>
-        <p class="recovery-helper-text mb-0">
-            Recovery archives can restore LNbits data, device settings, remote-access state, and Spark-sidecar files. Your Spark seed phrase is still the main secret for recovering wallet access and funds.
-        </p>
     </div>
 </div>

nixos/admin-app/templates/recovery.html

@@ -8,16 +8,45 @@
     </div>
     <div class="admin-page-actions recovery-header-actions">
         <a href="#recovery-manual-backup" class="recovery-header-card">
-            <span class="recovery-header-card-label">Manual Backup</span>
-            <span class="recovery-header-card-copy">Create and download an encrypted backup right now.</span>
+            <span class="recovery-header-card-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 3l7 3v5c0 5-3.4 8.3-7 10-3.6-1.7-7-5-7-10V6l7-3z"></path>
+                    <path d="M12 8v8"></path>
+                    <path d="M8.5 12H15.5"></path>
+                </svg>
+            </span>
+            <span class="recovery-header-card-text">
+                <span class="recovery-header-card-label">Manual Backup</span>
+                <span class="recovery-header-card-copy">Create and download an encrypted backup right now.</span>
+            </span>
         </a>
         <a href="#recovery-scheduled-backups" class="recovery-header-card">
-            <span class="recovery-header-card-label">Scheduled Backups</span>
-            <span class="recovery-header-card-copy">Set recurring protected backups for this box.</span>
+            <span class="recovery-header-card-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3.5" y="5" width="17" height="15" rx="2"></rect>
+                    <path d="M8 3v4"></path>
+                    <path d="M16 3v4"></path>
+                    <path d="M3.5 10.5h17"></path>
+                    <path d="M8.5 14h3"></path>
+                </svg>
+            </span>
+            <span class="recovery-header-card-text">
+                <span class="recovery-header-card-label">Scheduled Backups</span>
+                <span class="recovery-header-card-copy">Set recurring protected backups for this box.</span>
+            </span>
         </a>
-        <a href="#recovery-restore" class="recovery-header-card">
-            <span class="recovery-header-card-label">Restore</span>
-            <span class="recovery-header-card-copy">Validate a backup and restore only what you need.</span>
+        <a href="#recovery-restore" class="recovery-header-card" data-open-restore="true">
+            <span class="recovery-header-card-icon" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M3 12a9 9 0 1 0 3-6.7"></path>
+                    <path d="M3 3v6h6"></path>
+                    <path d="M12 8v4l2.5 2.5"></path>
+                </svg>
+            </span>
+            <span class="recovery-header-card-text">
+                <span class="recovery-header-card-label">Restore</span>
+                <span class="recovery-header-card-copy">Validate a backup and restore only what you need.</span>
+            </span>
         </a>
     </div>
 </div>
@@ -42,6 +71,15 @@
         section.scrollIntoView({ behavior: 'smooth', block: 'start' });
     }
 
+    document.querySelectorAll('[data-open-restore="true"]').forEach(function (link) {
+        link.addEventListener('click', function (event) {
+            event.preventDefault();
+            if (window.LNbitsBoxDashboard && typeof window.LNbitsBoxDashboard.openRestoreModal === 'function') {
+                window.LNbitsBoxDashboard.openRestoreModal();
+            }
+        });
+    });
+
     window.addEventListener('hashchange', scrollRecoverySectionFromHash);
     scrollRecoverySectionFromHash();
 })();