feat(backups): wire up routes, nav, dashboard widget, and docs
- Add /backups route and navigation tab in App.tsx - Add BackupDashboardWidget to Dashboard page - Document backup monitoring feature in REQUIREMENTS.md
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
<h2>UI Redesign Exploration</h2>
|
||||
<p class="subtitle">Let's figure out the direction for your complete UI redesign</p>
|
||||
|
||||
<div class="section">
|
||||
<h3>Current App Overview</h3>
|
||||
<p>Manage is a media operations dashboard with these main areas:</p>
|
||||
<ul>
|
||||
<li><strong>Dashboard</strong> — Jellyfin activity, monitoring overview, shortcuts</li>
|
||||
<li><strong>Monitoring</strong> — Per-machine CPU/RAM/IO charts, collector controls</li>
|
||||
<li><strong>Applications</strong> — Jellyfin media library browsing</li>
|
||||
<li><strong>Users</strong> — Jellyfin user list with Jellyseerr enrichment</li>
|
||||
<li><strong>Actions</strong> — Saved server tasks and job execution</li>
|
||||
<li><strong>Files</strong> — Remote SSH file browser with ffprobe</li>
|
||||
<li><strong>Settings</strong> — Machine definitions, SSH keys, configuration</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Current Design Characteristics</h3>
|
||||
<ul>
|
||||
<li>Material UI (MUI) with custom theme</li>
|
||||
<li>Two-row header with logo + navigation tabs</li>
|
||||
<li>Card-based layout with section containers</li>
|
||||
<li>Dark mode support (auto-detects system preference)</li>
|
||||
<li>Compact admin-console styling</li>
|
||||
<li>AG Grid for data tables</li>
|
||||
<li>D3 charts for monitoring</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mockup">
|
||||
<div class="mockup-header">Current App Shell</div>
|
||||
<div class="mockup-body">
|
||||
<div class="mock-nav">Logo "Manage" | version chips | user | logout</div>
|
||||
<div style="display: flex; border-top: 1px solid #ccc;">
|
||||
<div style="padding: 8px 16px; background: #e3f2fd;">Dashboard</div>
|
||||
<div style="padding: 8px 16px;">Monitoring</div>
|
||||
<div style="padding: 8px 16px;">Applications</div>
|
||||
<div style="padding: 8px 16px;">Users</div>
|
||||
<div style="padding: 8px 16px;">Actions</div>
|
||||
<div style="padding: 8px 16px;">Files</div>
|
||||
<div style="padding: 8px 16px;">Settings</div>
|
||||
</div>
|
||||
<div class="placeholder" style="height: 200px; margin-top: 16px;">
|
||||
Page content area (cards, tables, charts)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle">Ready to start exploring redesign options. Answer the questions in your terminal!</p>
|
||||
@@ -0,0 +1,38 @@
|
||||
<h2>Visual Direction</h2>
|
||||
<p class="subtitle">What aesthetic feel do you want for the new design?</p>
|
||||
|
||||
<div class="options">
|
||||
<div class="option" data-choice="minimal" onclick="toggleSelect(this)">
|
||||
<div class="letter">A</div>
|
||||
<div class="content">
|
||||
<h3>Minimal & Clean</h3>
|
||||
<p>Lots of whitespace, subtle borders, muted colors, content-first. Think Linear, Notion, or modern SaaS dashboards.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="bold" onclick="toggleSelect(this)">
|
||||
<div class="letter">B</div>
|
||||
<div class="content">
|
||||
<h3>Bold & Expressive</h3>
|
||||
<p>Strong colors, distinct visual personality, custom illustrations or iconography. Think Vercel, Stripe, or gaming dashboards.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="professional" onclick="toggleSelect(this)">
|
||||
<div class="letter">C</div>
|
||||
<div class="content">
|
||||
<h3>Professional & Enterprise</h3>
|
||||
<p>Polished but conservative, clear hierarchy, familiar patterns. Think AWS console, Datadog, or enterprise admin tools.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option" data-choice="dark-dramatic" onclick="toggleSelect(this)">
|
||||
<div class="letter">D</div>
|
||||
<div class="content">
|
||||
<h3>Dark & Dramatic</h3>
|
||||
<p>Deep dark backgrounds, neon accents, high contrast. Think cyberpunk, developer tools, or media center aesthetics.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="subtitle">Click your preferred style in the browser, or tell me in the terminal if you want something else entirely.</p>
|
||||
@@ -0,0 +1,3 @@
|
||||
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
|
||||
<p class="subtitle">Continuing in terminal...</p>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
{"type":"server-started","port":52977,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:52977","screen_dir":"/home/alex/projects/media_library_viewer/.superpowers/brainstorm/435525-1778528804/content","state_dir":"/home/alex/projects/media_library_viewer/.superpowers/brainstorm/435525-1778528804/state"}
|
||||
@@ -0,0 +1 @@
|
||||
435537
|
||||
Reference in New Issue
Block a user