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
2026-05-11 21:54:50 +02:00
parent a7a66ff370
commit 322b3d1a3b
10 changed files with 156 additions and 8 deletions
@@ -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>