# 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*