3.3 KiB
3.3 KiB
Library Cluster Feature - UI Mockups
🎨 User Interface Design Mockups
This document provides ASCII mockups and descriptions of all UI components for the Library Cluster feature.
1. Settings Page - Cluster Management Section
Location: /app/settings/page.tsx
┌────────────────────────────────────────────────────────────────────────┐
│ Settings │
│ Configure your media libraries and system preferences │
└────────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────────────┐
│ 🗂️ Library Clusters [+ New Cluster]│
│ ──────────────────────────────────────────────────────────────────── │
│ Organize your libraries into logical groups │
│ │
│ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ 🎬 Movies [Edit] [🗑️] │ │
│ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │
│ │ Color: Blue │ │
│ │ Description: All movie collections across NAS drives │ │
│ │ 📊 3 libraries • 1,234 videos • 2.5 TB │ │
│ └──────────────────────────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────────────────┘
Features Shown:
- ✓ Cluster cards with color-coded headers
- ✓ Statistics display (libraries, media count, size)
- ✓ Edit and delete buttons
- ✓ Add new cluster button
Design Principles
1. Consistency
- Use existing UI components from the project
- Match current color scheme (zinc-950 background)
2. Clarity
- Color-coded clusters for easy identification
- Clear hierarchy of information
3. Efficiency
- Quick actions accessible
- Minimal clicks to achieve goals
Document Version: 1.0
Last Updated: 2025-10-11