From 445404e394d21c39b855d7a0a672885e49756a00 Mon Sep 17 00:00:00 2001 From: Jakub Zych Date: Sun, 27 Sep 2026 17:26:44 +0200 Subject: [PATCH] feat(10-04): collapsible panel with flyout, user menu with logout, breadcrumbs and dark mode - useSidebar: collapsed below 1100px (matchMedia) or by the admin's choice, persisted as a boolean under summer-admin.sidebar; the viewport never overwrites the stored choice - SectionPanel collapse and rail expand buttons; SectionFlyout (role menu) opens on hover, focus, Enter or ArrowDown on a rail item, closes on Esc or about 200 ms after leaving and returns focus to the rail item - Breadcrumbs with plugin, controller and record crumbs; UserMenu (Reka DropdownMenu) with initials, name, role and Wyloguj - useAuth.logout POSTs /auth/logout, clears user, navigation and settings and routes to login even when the call fails - applyColorScheme toggles .dark from prefers-color-scheme (no toggle, A6) - newest toast first, 200 ms fade and scale for dialogs and toasts - one relation-manager type constant in the registry - shell smoke tests; tests default to a desktop, light matchMedia --- admin/src/app/theme.ts | 25 ++ admin/src/components/form/FormGrid.vue | 3 +- admin/src/components/form/registry.ts | 9 +- admin/src/components/shell/AppShell.vue | 70 +--- admin/src/components/shell/Breadcrumbs.vue | 69 ++++ admin/src/components/shell/PluginRail.vue | 156 ++++++++- admin/src/components/shell/SectionFlyout.vue | 103 ++++++ admin/src/components/shell/SectionPanel.vue | 29 +- admin/src/components/shell/UserMenu.vue | 107 ++++++ admin/src/components/ui/Toast.vue | 15 +- admin/src/main.ts | 3 + admin/src/state/useAuth.ts | 25 ++ admin/src/state/useBreadcrumbs.ts | 16 + admin/src/state/useSidebar.ts | 71 ++++ admin/src/state/useToasts.ts | 5 +- admin/src/styles/main.css | 54 +++ admin/src/views/FormView.vue | 7 +- admin/tests/setup.ts | 15 + admin/tests/smoke/shell.smoke.test.ts | 339 +++++++++++++++++++ boardwalk/dist/assets/index-BBZKA2Yr.css | 1 + boardwalk/dist/assets/index-BC0qEqbI.js | 3 - boardwalk/dist/assets/index-BQShvn7O.js | 3 + boardwalk/dist/assets/index-wkQq4mI5.css | 1 - boardwalk/dist/index.html | 4 +- 24 files changed, 1056 insertions(+), 77 deletions(-) create mode 100644 admin/src/app/theme.ts create mode 100644 admin/src/components/shell/Breadcrumbs.vue create mode 100644 admin/src/components/shell/SectionFlyout.vue create mode 100644 admin/src/components/shell/UserMenu.vue create mode 100644 admin/src/state/useBreadcrumbs.ts create mode 100644 admin/src/state/useSidebar.ts create mode 100644 admin/tests/smoke/shell.smoke.test.ts create mode 100644 boardwalk/dist/assets/index-BBZKA2Yr.css delete mode 100644 boardwalk/dist/assets/index-BC0qEqbI.js create mode 100644 boardwalk/dist/assets/index-BQShvn7O.js delete mode 100644 boardwalk/dist/assets/index-wkQq4mI5.css diff --git a/admin/src/app/theme.ts b/admin/src/app/theme.ts new file mode 100644 index 0000000..8ba825a --- /dev/null +++ b/admin/src/app/theme.ts @@ -0,0 +1,25 @@ +// Colour scheme (D-06, flagged assumption A6): the admin follows the system +// preference only, with no toggle. The .dark class on the document element +// swaps the design's dark tokens in main.css; the sidebar stays dark in both +// modes and gains its #222b40 right border in dark mode. +export const DARK_QUERY = '(prefers-color-scheme: dark)' + +/** + * Applies the current preference and follows changes. Returns the + * unsubscribe function. + */ +export function applyColorScheme(win: Window = window): () => void { + const root = win.document.documentElement + if (typeof win.matchMedia !== 'function') { + root.classList.remove('dark') + return () => undefined + } + const query = win.matchMedia(DARK_QUERY) + const apply = (dark: boolean): void => { + root.classList.toggle('dark', dark) + } + apply(query.matches) + const onChange = (event: MediaQueryListEvent): void => apply(event.matches) + query.addEventListener('change', onChange) + return () => query.removeEventListener('change', onChange) +} diff --git a/admin/src/components/form/FormGrid.vue b/admin/src/components/form/FormGrid.vue index d889ccc..42b6f5a 100644 --- a/admin/src/components/form/FormGrid.vue +++ b/admin/src/components/form/FormGrid.vue @@ -1,6 +1,7 @@