diff --git a/.planning/phases/11-ui-enhancements/11-CONTEXT.md b/.planning/phases/11-ui-enhancements/11-CONTEXT.md new file mode 100644 index 0000000..fbb3e30 --- /dev/null +++ b/.planning/phases/11-ui-enhancements/11-CONTEXT.md @@ -0,0 +1,101 @@ +# Phase 11: UI Enhancements - Context + +**Gathered:** 2026-04-15 +**Status:** Ready for planning + + +## Phase Boundary + +Improve daily usability of ImpTune with five targeted UI changes: printer editing via modal, better form/list layout separation, client-scoped navigation, dark/light theme toggle, and bilingual FR/EN support. No new backend capabilities — pure frontend/UX improvements on top of the v1.0 base. + + + + +## Implementation Decisions + +### Printer Edit (UIE-01) +- Edit button added to each row in the Actions column, next to the existing Delete button (small button, labelled "Edit") +- Clicking Edit opens a native HTML `` modal pre-filled with that printer's fields +- Modal contains printer fields only (name, IP, port, driver, duplex, color, paper, collate, client) — no embedded driver upload form +- Submitting the edit form sends HTMX PATCH to `/printers/{id}`, closes the modal, and refreshes the printer list in-place (no page reload) + +### Add-Printer Form Separation (UIE-02) +- `/printers` becomes the Printer Library only — the Add Printer form is removed from this page +- A dedicated `/printers/new` page holds the Add Printer form +- An "Add Printer" button (or link) on `/printers` navigates to `/printers/new` +- After submitting the add form, auto-redirect back to `/printers` +- The driver upload form embedded in the printer form stays on `/printers/new` + +### Client-Filtered Navigation (UIE-03) +- Client names become clickable links everywhere they appear (printer list group headers, client list table) +- Links navigate to `/clients/{id}` — a dedicated page per client +- `/clients/{id}` shows: client name as page title + filtered printer list for that client only +- Edit and Delete actions on `/clients/{id}` work identically to `/printers` (same modal, same HTMX routes) + +### Theme Toggle (UIE-04) +- Icon button in the top-right corner of the page (in the main layout, visible on all pages) +- Cycles through: Light → Dark → System on each click; shows current mode icon (sun / moon / auto) +- Alpine.js sets `data-theme` attribute on `` element + persists choice in localStorage +- Pico CSS already supports `data-theme="light"`, `data-theme="dark"`, `data-theme="auto"` natively — no CSS changes needed for basic theming + +### Language Toggle (UIE-05) +- FR/EN toggle in the top-right corner alongside the theme icon +- Implemented with Alpine.js translation object: all UI strings stored in a JS translation dictionary keyed by `fr` / `en` +- Switching language updates instantly with no page reload; choice persists in localStorage +- Alpine.js `$store` or top-level x-data used to make the language reactive across all components +- All labels, buttons, headings, and messages must be translated (no hardcoded English strings left in templates) + +### Claude's Discretion +- Exact icon choices for the theme cycle button (emoji vs SVG vs Unicode symbols) +- Exact layout/styling of the top-right controls area (spacing, grouping of theme + language) +- Translation string file organisation (inline in base.html JS block vs separate translations.js file) +- How `` close is triggered (close button, backdrop click, or both) + + + + +## Existing Code Insights + +### Reusable Assets +- `imptune/templates/base.html`: `` — Pico CSS theme support already wired; just toggle the attribute value +- `imptune/templates/partials/printer_form.html`: HTMX + Alpine.js form with all printer fields — reuse this markup for the edit modal (change form action to PATCH `/printers/{id}`) +- `imptune/templates/partials/printer_list.html`: Actions column already exists with Delete button — Edit button slots in alongside it +- `imptune/static/pico.min.css`: Native `` styling included in Pico CSS; no extra modal library needed +- `imptune/static/app.css`: CSS variables via Pico tokens (`--pico-primary`, `--pico-muted-border-color`) — theme toggle inherits correctly without extra CSS + +### Established Patterns +- HTMX for server interactions: targets, swaps, and OOB responses — edit PATCH should follow the same pattern as Delete (refresh `#printer-list` on success) +- Alpine.js for client-side reactivity: `x-data`, `x-model`, `@input` — translation store fits naturally as a global Alpine store +- Jinja2 `{% include %}` for partials — edit modal can be a new partial included in the pages that need it +- No page reloads for list mutations — maintain this pattern for edit (HTMX in-place update) + +### Integration Points +- `/printers` route (GET): currently renders form + list — remove form, render list only + "Add Printer" button +- `/printers/new` route (GET): new route, renders the add-printer form page +- `/printers` route (POST): unchanged — still handles printer creation, but now redirects to `/printers` after success +- `/printers/{id}` route (PATCH): new route — handles edit form submission, returns updated printer list HTML +- `/clients/{id}` route (GET): new route — renders client page with filtered printer list +- `base.html`: add top-right controls area (theme icon + language toggle) visible on all pages + + + + +## Specific Ideas + +- Top-right corner should have both theme icon and FR/EN toggle together as a small control group +- The Add Printer button on `/printers` should feel prominent enough that it's not missed when the form is gone from the page +- Edit modal should feel lightweight — just the fields, a Save button, and a way to close/cancel + + + + +## Deferred Ideas + +None — discussion stayed within phase scope. + + + +--- + +*Phase: 11-ui-enhancements* +*Context gathered: 2026-04-15*