jpmschweitzer/tatlock-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat(front-hall): implement three-mode layout with quick links panel

Browse Source 
Phase 2 of Organizr Migration - Front Hall restructure:

- Add FrontHallState provider with three modes (dashboard, iframe, settings)
- Create QuickLinksPanel widget with categorized links and overflow menus
- Add IframeView with platform-aware implementation (web iframe, mobile fallback)
- Extract DashboardContent from FrontHallPage
- Add QuickLinkSettingsContent placeholder for Phase 4 link editor
- Implement QuickLink entity and data layer with Core API datasource
- Add default quick links fallback when API unavailable
- Update UI_LAYOUT.md with Front Hall panel configurations

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeroen Schweitzer
2026-01-02 22:24:20 +01:00
co-authored by Claude Opus 4.5
parent 4f8d0f521f
commit 40db92d9d5
13 changed files with 1693 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/UI_LAYOUT.md
+72 -4
View File
@@ -191,13 +191,81 @@ The NavPanel widget receives items and auto-generates section headers based on u
## Panel Configurations by Room
### Front Hall
Front Hall uses a **three-mode content system** with a persistent QuickLinks panel:
| Mode | QuickLinks Panel | Content Area |
|------|------------------|--------------|
| **Dashboard** | Normal navigation | Dashboard widgets (stats, weather) |
| **Iframe** | Normal navigation | Embedded iframe content |
| **Settings** | Edit mode (back button, add new, overflow menus) | QuickLinkPage (EntityPageScaffold) |
#### Dashboard Mode (default)
```
┌────────────────────────────────────────────────────────────────┬────────────┐
│ PRIMARY CONTENT (no nav panel) │ CHAT DOCK │
│ Dashboard cards, activity feed │ (expanded) │
└────────────────────────────────────────────────────────────────┴────────────┘
┌──────────────┬─────────────────────────────────────────────────┬────────────┐
│ QUICK LINKS │ PRIMARY CONTENT │ CHAT DOCK │
│ │ │ (expanded) │
│ ▌HOME │ SYSTEM STATS │ │
│ Jellyfin │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │
│ WebUI │ │ CPU │ │ MEM │ │ DISK │ │ NET │ │ │
│ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │
│ ▌AMP │ │ │
│ AMP Home │ WEATHER AIR QUALITY │ │
│ │ ┌────────────────┐ ┌────────────────┐ │ │
│ ▌INFRA │ │ 72°F Sunny │ │ AQI: 42 Good │ │ │
│ Netdata │ └────────────────┘ └────────────────┘ │ │
│ │ │ │
│ [⚙ Settings] │ │ │
└──────────────┴─────────────────────────────────────────────────┴────────────┘
```
#### Iframe Mode
```
┌──────────────┬─────────────────────────────────────────────────┬────────────┐
│ QUICK LINKS │ ┌─────────────────────────────────────────────┐ │ CHAT DOCK │
│ │ │ Jellyfin [↗] [⟳] [✕] │ │ (collapsed)│
│ ▌HOME │ ├─────────────────────────────────────────────┤ │ │
│ ▸Jellyfin │ │ │ │ │
│ WebUI │ │ <iframe src="jellyfin.url"> │ │ │
│ │ │ │ │ │
│ ▌AMP │ │ │ │ │
│ AMP Home │ │ │ │ │
│ │ │ │ │ │
│ ▌INFRA │ │ │ │ │
│ Netdata │ │ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ [⚙ Settings] │ │ │
└──────────────┴─────────────────────────────────────────────────┴────────────┘
```
#### Settings Mode
```
┌──────────────┬─────────────────────────────────────────────────┬────────────┐
│ [←] Links │ ┌─────────────────────────────────────────────┐ │ CHAT DOCK │
│ │ │ ← Back Edit Quick Link [Save] │ │ (collapsed)│
│ [+ Add New] │ ├─────────────────────────────────────────────┤ │ │
├──────────────┤ │ │ │ │
│ ▌HOME │ │ Name: [Jellyfin_________________] │ │ │
│ ▸Jellyfin ⋮ │ │ │ │ │
│ WebUI ⋮ │ │ URL: [https://jellyfin.schweitz...] │ │ │
│ │ │ │ │ │
│ ▌AMP │ │ Category: [Home ▼] │ │ │
│ AMP Home ⋮ │ │ │ │ │
│ │ │ Type: ◉ Iframe ○ New Tab │ │ │
│ ▌INFRA │ │ │ │ │
│ Netdata ⋮ │ │ Icon: [🎬 Pick...] │ │ │
│ Portainer⋮ │ │ │ │ │
│ │ │ Active: [✓] │ │ │
└──────────────┴─────────────────────────────────────────────────┴────────────┘
```
**Settings mode panel behavior:**
- Back button in header (exits settings mode → dashboard)
- "+ Add New Link" button at top
- Each item has overflow menu (Edit, Delete, Move Up/Down)
- Clicking item selects it for editing in content area
- Uses EntityPageScaffold pattern (no modals)
### Control Room
```
┌───────────┬──────────────────────────────────────────────────────┬──────────┐