61 lines
3.3 KiB
Markdown
61 lines
3.3 KiB
Markdown
# 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
|