alex
322b3d1a3b
- Add /backups route and navigation tab in App.tsx - Add BackupDashboardWidget to Dashboard page - Document backup monitoring feature in REQUIREMENTS.md
51 lines
2.1 KiB
HTML
51 lines
2.1 KiB
HTML
<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>
|