Files

T

2026-04-15 17:57:12 +02:00

6.2 KiB

Raw Permalink Blame History

phase, plan, subsystem, tags, requires, provides, affects, tech-stack, key-files, key-decisions, patterns-established, requirements-completed, duration, completed

phase

plan

subsystem

tags

requires

provides

affects

tech-stack

key-files

key-decisions

patterns-established

requirements-completed

duration

completed

11-ui-enhancements

alpine.js

i18n

theme

localStorage

pico-css

e2e

playwright

phase	provides
11-01	base.html layout foundation with sidebar nav and Alpine.js loaded

Alpine.store('theme') cycling Light/Dark/System with localStorage persistence

Alpine.store('i18n') FR/EN toggle with full static UI translation dictionary

Top-right topbar with theme and language toggle buttons in base.html

4 E2E Playwright tests covering both toggles and localStorage persistence

Any future plan modifying base.html or adding new static UI strings

added

patterns

alpine:init script placed before defer alpine.min.js for store registration timing

Alpine.store() for global reactive state shared across all pages

localStorage keys imptune_theme and imptune_lang for cross-reload persistence

x-data on individual elements to scope Alpine binding where needed

:aria-label binding used as Playwright selector anchor for theme button state

created

modified

tests/e2e/test_theme_toggle.py

tests/e2e/test_i18n_toggle.py

imptune/templates/base.html

imptune/static/app.css

tests/test_static.py

Alpine stores registered via alpine:init event before defer script runs — ensures stores available at hydration

x-data on topbar-controls div (not individual buttons) to scope Alpine scope once for both controls

:aria-label bound to $store.theme.current to track current state — doubles as Playwright E2E selector

Test assertion fixed: class-scoped check for 'class=empty-state>No printers configured' instead of raw string (which now also appears in i18n JS)

i18n pattern: Alpine.store('i18n').t('key') via x-text binding on any element needing translation

Theme pattern: data-theme on <html> driven by Alpine.store('theme').cycle() on button click

UIE-04

UIE-05

4min

2026-04-15

Phase 11 Plan 03: Theme + Language Toggle Summary

Alpine.js stores for Light/Dark/System theme cycling and FR/EN i18n toggle in base.html, both persisted via localStorage, with 4 passing Playwright E2E tests

Performance

Duration: 4 min
Started: 2026-04-15T09:05:49Z
Completed: 2026-04-15T09:10:08Z
Tasks: 2
Files modified: 4 (base.html, app.css, test_static.py, + 2 created E2E test files)

Accomplishments

Alpine.store('theme') registered via alpine:init with Light/Dark/System cycling, localStorage persistence, and :aria-label binding for state tracking
Alpine.store('i18n') with complete FR/EN translation dictionary covering all static UI strings (30+ keys per language)
Top-right topbar added to base.html layout with theme toggle and lang toggle buttons, styled via new .main-wrapper + .topbar CSS classes
4 E2E Playwright tests: theme cycles, theme persists, lang switches nav label, lang persists — all GREEN

Task Commits

Each task was committed atomically:

Task 1: Alpine.js stores + top-right controls in base.html - 3353f45 (feat)
Task 2: E2E tests for theme toggle and language toggle - 4db15d6 (test)

Files Created/Modified

imptune/templates/base.html - Alpine.js stores script (alpine:init), topbar with toggle buttons, x-text nav bindings
imptune/static/app.css - Added .main-wrapper, .topbar, .topbar-controls styles
tests/test_static.py - Added test_theme_toggle_present; fixed test_dashboard_shows_recent_printers assertion
tests/e2e/test_theme_toggle.py - 2 E2E tests: theme cycles on click, theme persists across reload
tests/e2e/test_i18n_toggle.py - 2 E2E tests: lang toggle switches nav label, lang persists across reload

Decisions Made

Alpine stores registered via alpine:init event before the defer alpine.min.js script — inline scripts run synchronously before any deferred scripts, guaranteeing stores are defined before Alpine initializes
x-data placed on the .topbar-controls div wrapper instead of individual buttons — scopes Alpine once for both controls
:aria-label bound to $store.theme.current — provides a reactive state indicator that doubles as a stable Playwright selector (button[aria-label='auto'], button[aria-label='light'], etc.)
Test assertion in test_dashboard_shows_recent_printers updated: raw string "No printers configured yet" now appears in the inline i18n JS, so assertion narrowed to class-qualified check

Deviations from Plan

Auto-fixed Issues

1. [Rule 1 - Bug] Fixed test_dashboard_shows_recent_printers false failure due to i18n string

Found during: Task 1 (base.html stores + controls)
Issue: Adding the i18n translation dictionary inline in base.html embeds the string 'No printers configured yet.' verbatim in the JS. The existing test asserted this string was absent from the response, which now always fails regardless of DB state.
Fix: Narrowed assertion to 'class="empty-state">No printers configured yet' — this checks for the server-rendered HTML element rather than the raw string, which correctly distinguishes actual empty-state rendering from JS dictionary content.
Files modified: tests/test_static.py
Verification: test_dashboard_shows_recent_printers passes; all 6 test_static.py tests GREEN
Committed in: 3353f45 (Task 1 commit)

Total deviations: 1 auto-fixed (Rule 1 - bug in test assertion caused by i18n strings in HTML) Impact on plan: Necessary correctness fix. No scope creep.

Issues Encountered

Two pre-existing failures in tests/test_printer_crud.py (test_client_detail_returns_200, test_client_links_in_printer_list) confirmed pre-existing by git stash check — out of scope, logged for deferred triage.

User Setup Required

None - no external service configuration required.

Next Phase Readiness

UIE-04 (theme toggle) and UIE-05 (i18n FR/EN) complete and verified
base.html now has Alpine.js stores available globally — future plans can use $store.i18n.t() for any new static UI strings
To add new translation keys: extend translations.fr and translations.en objects in the inline script in base.html

Phase: 11-ui-enhancements Completed: 2026-04-15

6.2 KiB Raw Permalink Blame History