Split admin / recovery center into its own page

Author: blackcoffeexbt

nixos/admin-app/app.py

@@ -1230,17 +1230,24 @@ def system_page():
     )
 
 
-@app.route("/box/maintenance")
+@app.route("/box/recovery")
 @login_required
-def maintenance_page():
+def recovery_page():
     return _render_admin_page(
-        "maintenance.html",
-        page_key="maintenance",
-        page_title="Maintenance",
+        "recovery.html",
+        page_key="recovery",
+        page_title="Recovery Center",
+        page_eyebrow="Safety And Recovery",
         page_intro="Create encrypted recovery archives, validate restores before applying them, and schedule protected backups to local or attached storage.",
     )
 
 
+@app.route("/box/maintenance")
+@login_required
+def maintenance_page():
+    return redirect(url_for("system_page"))
+
+
 @app.route("/box/advanced")
 @login_required
 def advanced_page():
@@ -1258,6 +1265,7 @@ def _render_admin_page(
     *,
     page_key: str,
     page_title: str,
+    page_eyebrow: str = "",
     page_intro: str = "",
     include_tunnel_status: bool = False,
     **context,
@@ -1272,6 +1280,7 @@ def _render_admin_page(
         dev_mode=DEV_MODE,
         active_page=page_key,
         page_title=page_title,
+        page_eyebrow=page_eyebrow,
         page_intro=page_intro,
         version=get_current_version(),
         initial_tunnel_status=initial_tunnel_status,
@@ -1646,7 +1655,7 @@ def api_db_info():
 @login_required
 def api_db_backup():
     return _json_error(
-        "Database-only backups were replaced by encrypted Recovery Center backups. Use /box/maintenance.",
+        "Database-only backups were replaced by encrypted Recovery Center backups. Use /box/recovery.",
         410,
     )
 
@@ -1655,7 +1664,7 @@ def api_db_backup():
 @login_required
 def api_db_restore():
     return _json_error(
-        "Database-only restore was replaced by encrypted Recovery Center restore. Use /box/maintenance.",
+        "Database-only restore was replaced by encrypted Recovery Center restore. Use /box/recovery.",
         410,
     )
 

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

@@ -1610,93 +1610,99 @@ input:focus {
     padding: 1.25rem;
 }
 
+.admin-page-eyebrow {
+    color: rgb(var(--ln-muted));
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.24em;
+    margin-bottom: 0.65rem;
+}
+
 .admin-page-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     margin-top: 1rem;
 }
 
-.recovery-center {
-    background:
-        radial-gradient(circle at top right, rgb(var(--ln-pink) / 0.06), transparent 28%),
-        linear-gradient(180deg, rgb(var(--ln-card)) 0%, rgb(var(--ln-surface)) 100%);
-}
-
-.recovery-hero {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    padding-bottom: 1.25rem;
-    margin-bottom: 1.25rem;
-    border-bottom: 1px solid rgb(var(--ln-border));
-}
-
-.recovery-hero-main {
-    display: flex;
-    align-items: flex-start;
+.recovery-page-header-grid {
+    display: grid;
     gap: 1rem;
-    min-width: 0;
+    margin-top: 1rem;
 }
 
-.recovery-hero-icon {
+.recovery-page-meta {
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 3rem;
-    height: 3rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    padding: 0.9rem 1rem;
     border-radius: 1rem;
-    background: rgb(var(--ln-pink) / 0.12);
-    border: 1px solid rgb(var(--ln-pink) / 0.2);
-    color: rgb(var(--ln-pink));
-    flex-shrink: 0;
+    border: 1px solid rgb(var(--ln-border));
+    background: rgb(var(--ln-surface));
+    max-width: 14rem;
 }
 
-.recovery-hero-icon svg {
-    width: 1.4rem;
-    height: 1.4rem;
+.recovery-page-meta-label {
+    color: rgb(var(--ln-muted));
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
 }
 
-.recovery-hero-title {
-    font-family: 'Sora', sans-serif;
-    font-size: 1.45rem;
-    font-weight: 700;
+.recovery-page-meta-value {
     color: rgb(var(--ln-text));
-    margin: 0 0 0.35rem;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.92rem;
+    line-height: 1.5;
 }
 
-.recovery-hero-copy {
-    margin: 0;
-    max-width: 44rem;
-    color: rgb(var(--ln-muted));
-    font-size: 0.96rem;
+.recovery-header-actions {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.85rem;
 }
 
-.recovery-hero-meta {
+.recovery-header-card {
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
-    gap: 0.2rem;
-    padding: 0.8rem 0.95rem;
-    border-radius: 0.95rem;
+    gap: 0.4rem;
+    padding: 1rem 1.05rem;
+    border-radius: 1rem;
     border: 1px solid rgb(var(--ln-border));
-    background: rgb(var(--ln-card) / 0.9);
-    min-width: 10rem;
+    background:
+        radial-gradient(circle at top right, rgb(var(--ln-pink) / 0.08), transparent 38%),
+        rgb(var(--ln-surface));
+    transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
 }
 
-.recovery-hero-meta-label {
-    color: rgb(var(--ln-muted));
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 0.68rem;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
+.recovery-header-card:hover {
+    border-color: rgb(var(--ln-pink) / 0.35);
+    color: rgb(var(--ln-pink));
+    transform: translateY(-1px);
 }
 
-.recovery-hero-meta-value {
+.recovery-header-card-label {
     color: rgb(var(--ln-text));
     font-family: 'JetBrains Mono', monospace;
-    font-size: 0.84rem;
+    font-size: 0.82rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+.recovery-header-card-copy {
+    color: rgb(var(--ln-muted));
+    font-size: 0.86rem;
+    line-height: 1.5;
+}
+
+.recovery-center {
+    background:
+        radial-gradient(circle at top right, rgb(var(--ln-pink) / 0.06), transparent 28%),
+        linear-gradient(180deg, rgb(var(--ln-card)) 0%, rgb(var(--ln-surface)) 100%);
 }
 
 .recovery-status-strip {
@@ -1765,42 +1771,51 @@ input:focus {
 }
 
 .recovery-accordion-summary {
-    list-style: none;
-    cursor: pointer;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 1rem;
     padding: 1.1rem 1.15rem;
+    border-bottom: 1px solid rgb(var(--ln-border));
 }
 
-.recovery-accordion-summary::-webkit-details-marker {
-    display: none;
+.recovery-step-heading {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 0.9rem;
+    align-items: start;
+    min-width: 0;
+    flex: 1 1 auto;
 }
 
-.recovery-accordion-summary::after {
-    content: "+";
-    margin-left: auto;
-    color: rgb(var(--ln-muted));
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 1.1rem;
-    line-height: 1;
+.recovery-step-text {
+    min-width: 0;
 }
 
-.recovery-accordion[open] .recovery-accordion-summary {
-    border-bottom: 1px solid rgb(var(--ln-border));
+.recovery-step-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 0.95rem;
+    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-accordion[open] .recovery-accordion-summary::after {
-    content: "-";
-    color: rgb(var(--ln-pink));
+.recovery-step-icon svg {
+    width: 1.2rem;
+    height: 1.2rem;
 }
 
 .recovery-step-title {
     color: rgb(var(--ln-text));
-    font-size: 1rem;
-    font-weight: 600;
-    margin-top: 0.2rem;
+    font-size: 1.08rem;
+    font-weight: 700;
+    line-height: 1.3;
+    margin-top: 0.22rem;
 }
 
 .recovery-step-copy {
@@ -1815,6 +1830,7 @@ input:focus {
     align-items: center;
     gap: 0.6rem;
     padding-right: 1.25rem;
+    flex-shrink: 0;
 }
 
 .recovery-accordion-badge {
@@ -1856,10 +1872,61 @@ 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;
-    margin-top: 0.85rem;
 }
 
 .recovery-saved-row {
@@ -1885,15 +1952,21 @@ input:focus {
 }
 
 @media (max-width: 959px) {
-    .recovery-hero,
+    .recovery-page-meta {
+        max-width: none;
+        width: 100%;
+    }
+
+    .recovery-header-actions {
+        grid-template-columns: 1fr;
+    }
+
     .recovery-accordion-summary {
         flex-direction: column;
     }
 
-    .recovery-hero-meta {
-        align-items: flex-start;
-        width: 100%;
-        min-width: 0;
+    .recovery-step-heading {
+        grid-template-columns: 1fr;
     }
 
     .recovery-status-strip,