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
This commit is contained in:
Jakub Zych
2026-09-27 17:26:44 +02:00
parent f4e97cccad
commit 445404e394
24 changed files with 1056 additions and 77 deletions

View File

@@ -0,0 +1,71 @@
// Sidebar collapsed state (design: Navigation shell, Collapsed / tablet;
// D-06, D-10). The section panel hides below about 1100px or when the admin
// collapses it. The viewport only forces the collapse and never overwrites
// the admin's own choice, which persists in localStorage as a boolean under
// SIDEBAR_KEY. Nothing else is ever written to browser storage (T-10-22).
import { computed, readonly, ref } from 'vue'
export const SIDEBAR_KEY = 'summer-admin.sidebar'
export const NARROW_QUERY = '(max-width: 1099px)'
const manual = ref(false)
const narrow = ref(false)
/** The panel is hidden: forced by the viewport or chosen by the admin. */
export const sidebarCollapsed = computed(() => narrow.value || manual.value)
function storage(): Storage | null {
try {
return typeof window === 'undefined' ? null : window.localStorage
} catch {
return null
}
}
function readPreference(): boolean {
try {
return storage()?.getItem(SIDEBAR_KEY) === 'true'
} catch {
return false
}
}
/** Records the admin's choice; only 'true' or 'false' is stored. */
export function setCollapsed(value: boolean): void {
manual.value = value
try {
storage()?.setItem(SIDEBAR_KEY, value ? 'true' : 'false')
} catch {
// Storage may be full or disabled; the choice still holds for the session.
}
}
/**
* Reads the stored preference and follows the viewport breakpoint. Returns
* the unsubscribe function; the shell calls it when it unmounts.
*/
export function watchViewport(): () => void {
manual.value = readPreference()
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
narrow.value = false
return () => undefined
}
const query = window.matchMedia(NARROW_QUERY)
narrow.value = query.matches
const onChange = (event: MediaQueryListEvent): void => {
narrow.value = event.matches
}
query.addEventListener('change', onChange)
return () => query.removeEventListener('change', onChange)
}
export function useSidebar() {
return {
collapsed: sidebarCollapsed,
/** The viewport is below the breakpoint; expanding is not possible. */
narrow: readonly(narrow),
manual: readonly(manual),
setCollapsed,
watchViewport,
}
}