From 3bdddf69c6e20dbaa45e9babe3d7d22966926f1c Mon Sep 17 00:00:00 2001
From: Alwin <alwin@morz.de>
Date: Tue, 24 Mar 2026 22:35:56 +0000
Subject: [PATCH] =?UTF-8?q?docs:=20Frontend-Overhaul-Design-Spec=20hinzuge?=
 =?UTF-8?q?f=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../2026-03-24-frontend-overhaul-design.md    | 190 ++++++++++++++++++
 1 file changed, 190 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-03-24-frontend-overhaul-design.md

diff --git a/docs/superpowers/specs/2026-03-24-frontend-overhaul-design.md b/docs/superpowers/specs/2026-03-24-frontend-overhaul-design.md
new file mode 100644
index 0000000..cafbb0d
--- /dev/null
+++ b/docs/superpowers/specs/2026-03-24-frontend-overhaul-design.md
@@ -0,0 +1,190 @@
+# Frontend Overhaul Design — MORZ Infoboard
+
+**Date:** 2026-03-24
+**Status:** Approved
+**Scope:** All server-rendered HTML templates in `server/backend/internal/httpapi/`
+
+---
+
+## Summary
+
+Overhaul the frontend of the MORZ Infoboard management UI to be professional, visually polished, and fun to use — while keeping the Go server-side rendering architecture and Bulma CSS framework intact. The MORZ red accent color anchors the brand identity throughout. Tenant and screen-user views are simplified to be idiot-proof; the admin section targets computer-literate users. The playlist editor becomes more interactive with inline editing and no-reload updates.
+
+---
+
+## 1. Design Tokens & Global Styles
+
+A shared `<style>` block (or inline in each template) provides CSS custom properties overriding Bulma defaults:
+
+| Token | Value | Usage |
+|---|---|---|
+| `--morz-red` | `#E30613` | Primary accent: buttons, active tabs, badges, focus rings |
+| `--morz-red-dark` | `#B8000F` | Hover/active state for red elements |
+| `--bg` | `#F7F8FA` | Page background |
+| `--surface` | `#FFFFFF` | Cards, panels |
+| `--shadow` | `0 1px 4px rgba(0,0,0,.08)` | Card elevation |
+| `--nav-bg` | `#1A1A2E` | Top navbar background |
+| `--radius-card` | `8px` | Card border radius |
+| `--radius-btn` | `6px` | Button border radius |
+
+**Typography:** `system-ui, -apple-system, "Segoe UI", sans-serif` — no web font load, familiar, fast.
+
+**Bulma overrides:** Set `--bulma-primary` to `--morz-red` so all Bulma primary-colored components (buttons, links, focus) automatically pick up the brand color.
+
+---
+
+## 2. Navigation & Layout
+
+### Top Navbar (all views)
+- Background: `#1A1A2E` (charcoal)
+- Left: "**MORZ** Infoboard" wordmark — "MORZ" in MORZ red, "Infoboard" in white
+- Right: role-dependent links (admin: "Diagnose" link) + logout button (outlined white, small)
+- Mobile: hamburger collapse
+
+### Admin layout
+- Max-width container: `960px`, generous padding
+- Tab navigation: underline style (red 3px underline on active tab, not Bulma boxed tabs)
+
+### Tenant/Screen-user layout
+- Same navbar without Diagnose link
+- Single-focus pages — no tabs where avoidable
+
+### Responsive
+- Cards go single-column below 768px
+- Manage page: two-column layout stacks vertically on mobile
+
+---
+
+## 3. Login Page
+
+- Full-height centered layout, off-white background
+- Card: white, `box-shadow`, `border-radius: 8px`, **4px top border in MORZ red**
+- Above form: "**MORZ** Infoboard" heading — "MORZ" in red
+- Fields: clean, red focus ring (`outline: 2px solid var(--morz-red)`)
+- Submit button: solid MORZ red, full-width, `border-radius: 6px`
+- Error: soft red background banner inside the card (no separate notification)
+- Password toggle: eye icon preserved
+
+---
+
+## 4. Admin Dashboard
+
+### Screens Tab
+- Replaces plain striped table with a responsive card grid (3-col desktop, 2-col tablet, 1-col mobile)
+- Each screen card contains:
+  - Name (bold, `1rem`)
+  - Slug (monospace, muted gray)
+  - Orientation badge (pill: "Querformat" / "Hochformat")
+  - Online status dot (green/yellow/red)
+  - Action buttons: "Playlist" (primary red, small) + "Löschen" (danger outline, small)
+- Header row above grid: "Neuer Bildschirm" button (red) + "Provisionieren" button (outlined)
+
+### Users Tab
+- Stays table-based (dense data, admin-appropriate)
+- Better spacing, clear "Neuer Benutzer" button top-right
+- Per-screen user modal: visually cleaned up, same functionality
+
+### Modals
+- Existing delete-confirmation and screen-users modals retained, visual polish only
+- Cards use `--radius-card`, header uses charcoal background
+
+### Toast Notifications
+- Existing JS toast system retained
+- Style update: rounded pill (`border-radius: 24px`), subtle shadow, slides in from top-right with CSS transition
+
+---
+
+## 5. Manage / Playlist Editor
+
+The primary daily-use screen. Two-column desktop layout, stacked on mobile.
+
+### Left Panel — Playlist (~60% width)
+- Header: screen name + orientation icon, back-link (← Dashboard or ← Admin), screen-switcher dropdown if user has multiple screens
+- Each playlist item is a draggable card:
+  - Left: drag handle (⠿ icon, cursor grab)
+  - Type icon (from existing `typeIcon` template func)
+  - **Title**: click to edit inline (contenteditable or small input, saves on blur via fetch POST)
+  - **Duration**: click to edit inline (number input, saves on blur)
+  - **Enabled toggle**: pill switch (green=on, gray=off), instant toggle via fetch POST
+  - **Validity dates**: collapsed by default, expand with a chevron; date inputs shown when expanded
+  - Delete button: appears on card hover (right side, red icon)
+- Disabled items: 50% opacity
+- Drag-reorder: SortableJS (already bundled at `/static/Sortable.min.js`), sends reorder fetch on drop
+- Inline save confirmation: subtle green checkmark icon fades in/out next to the field
+
+### Right Panel — Media Library (~40% width)
+- Upload section: collapsed by default, expand with "+ Medium hinzufügen" button; contains drag-and-drop zone (dashed border) + file picker fallback + URL input for web type
+- Asset grid: cards with thumbnail (image/video) or type icon (PDF/web), title, type badge
+- Per-card CTA: "Hinzufügen" (red button) → becomes "✓ Hinzugefügt" (gray, disabled) if already in playlist
+- Delete asset: small trash icon on card hover
+
+### Interactions (no page reloads)
+- Toggle enabled → `fetch POST /manage/{slug}/items/{id}/update`
+- Inline title/duration edit → `fetch POST` on blur
+- Reorder → `fetch POST /manage/{slug}/reorder`
+- Add to playlist → standard form POST (redirect back, which reloads — acceptable)
+- All other destructive actions retain redirect-based flow for safety
+
+---
+
+## 6. Tenant Dashboard
+
+- Replaces two-tab layout with a single-page card-first design
+- **Screens section**: large, touch-friendly cards — screen icon, name, status dot, single CTA "Playlist bearbeiten →" (red)
+- **Media section**: below screens, or accessible via a simple toggle — drag-and-drop upload zone (dashed border), asset grid below
+- No dense tables anywhere
+- Status dots live-updated via `setInterval` fetch to player status API
+
+---
+
+## 7. Screen Overview (screen_users with multiple screens)
+
+- Full-page grid of large tappable screen cards
+- Each card: orientation icon (large), screen name, status dot
+- One tap → direct link to `/manage/{slug}`
+- No other UI elements — maximum simplicity
+
+---
+
+## 8. Provision Wizard
+
+Visual polish only, no functional changes:
+- Step numbers: circles in MORZ red
+- Code blocks: dark terminal style (already present, refine padding/font)
+- Copy buttons: icon-only with tooltip, confirmation checkmark on click
+- Completion card: prominent green checkmark, "Playlist befüllen →" CTA in red
+
+---
+
+## 9. Status Indicators
+
+Live status dots used across all views (Tenant dashboard, Screen overview, Admin screen cards):
+- Green: online (last heartbeat < 2 min)
+- Yellow: stale (< 10 min)
+- Red: offline (> 10 min or never seen)
+- Implementation: small `setInterval` (30s) fetches `/api/player-status/{slug}` per visible screen and updates dot color
+
+---
+
+## Architecture Notes
+
+- All templates remain in Go `const` string variables in their respective `templates.go` files
+- No new build step, no npm, no bundler
+- Bulma CDN link replaced with local `/static/bulma.min.css` (already present)
+- Bulma variable overrides via CSS custom properties in each template's `<style>` block
+- SortableJS already available at `/static/Sortable.min.js`
+- Inline JS kept minimal and vanilla — no new JS libraries introduced
+- CSRF tokens flow unchanged through all form POST operations
+- All existing URL routes and redirect flows preserved exactly
+
+---
+
+## Files to Modify
+
+| File | Changes |
+|---|---|
+| `internal/httpapi/manage/templates.go` | `loginTmpl`, `adminTmpl`, `manageTmpl`, `screenOverviewTmpl`, `provisionTmpl` |
+| `internal/httpapi/tenant/templates.go` | `tenantDashTmpl` |
+| `internal/httpapi/manage/ui.go` | Inline JS fetch handlers for playlist inline editing (no new Go handlers needed — existing endpoints are sufficient) |
+
+No database changes. No new API endpoints needed for the visual overhaul (existing update/reorder endpoints cover the inline editing interactions).