feat(11-03): Alpine.js theme + i18n stores in base.html with top-right controls

- Add Alpine.store('theme') for Light/Dark/System cycling with localStorage persistence
- Add Alpine.store('i18n') with FR/EN translations for all static UI strings
- Add topbar with theme toggle button (:aria-label, @click cycle) and lang button
- Wrap main content in .main-wrapper + .topbar for layout structure
- Add .main-wrapper, .topbar, .topbar-controls styles to app.css
- Add test_theme_toggle_present integration test
- Fix test_dashboard_shows_recent_printers assertion (string now in i18n JS too)
This commit is contained in:
2026-04-15 11:08:52 +02:00
parent 4b212b6da9
commit 3353f4546c
3 changed files with 185 additions and 9 deletions
+30
View File
@@ -91,6 +91,36 @@ nav.sidebar li {
border-left-color: var(--pico-primary, #1a73e8);
}
/* Main wrapper: fills remaining space beside sidebar, stacks topbar + content */
.main-wrapper {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
/* Topbar: holds top-right controls */
.topbar {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 0.5rem 1rem;
border-bottom: 1px solid var(--pico-muted-border-color, #e0e0e0);
gap: 0.5rem;
}
.topbar-controls {
display: flex;
gap: 0.5rem;
align-items: center;
}
.topbar-controls button {
padding: 0.3rem 0.6rem;
font-size: 0.85rem;
min-width: 2.2rem;
}
/* Main content */
.main-content {
flex: 1 1 auto;