102 lines
5.6 KiB
Markdown
102 lines
5.6 KiB
Markdown
# Phase 11: UI Enhancements - Context
|
|
|
|
**Gathered:** 2026-04-15
|
|
**Status:** Ready for planning
|
|
|
|
<domain>
|
|
## 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.
|
|
|
|
</domain>
|
|
|
|
<decisions>
|
|
## 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-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 `<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)
|
|
|
|
</decisions>
|
|
|
|
<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>
|
|
|
|
<specifics>
|
|
## 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
|
|
|
|
</specifics>
|
|
|
|
<deferred>
|
|
## Deferred Ideas
|
|
|
|
None — discussion stayed within phase scope.
|
|
|
|
</deferred>
|
|
|
|
---
|
|
|
|
*Phase: 11-ui-enhancements*
|
|
*Context gathered: 2026-04-15*
|