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 <dialog> 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 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 <html> 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 <dialog> close is triggered (close button, backdrop click, or both)

<code_context>

Existing Code Insights

Reusable Assets

imptune/templates/base.html: <html lang="en" data-theme="auto"> — 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 <dialog> 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

</code_context>

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

5.6 KiB Raw Blame History