feat: home screen and navigation design

features/dashboard_shell_branding.qa.md

@@ -0,0 +1,65 @@
+# QA: DashboardShell branding (wordmark, sidebar collapse, UserMenu)
+
+## Automated (Vitest + Vue Test Utils, `task test:web`)
+
+Mount DashboardShell (or a verified route rendered inside it) with a resolved session (username
+"marta") and a test router. Mock `useApi`'s `/v1/auth/logout` call per case; no real backend, no
+httptest server. Stub `useColorMode()` so its `preference` can be asserted and set.
+
+1. **Header renders AppLogo and the wordmark** — mount DashboardShell expanded; assert the
+   sidebar's #header slot renders an AppLogo followed by the text "RenewCMS"; assert neither is a
+   link.
+2. **Sidebar collapse trigger toggles the rail and aria-expanded** — mount DashboardShell
+   expanded; activate UDashboardSidebarCollapse; assert the sidebar reaches its
+   :collapsed-size="3.5" state and the trigger's aria-expanded reflects it; activate it again; assert
+   the sidebar returns to :default-size="14" and aria-expanded flips back.
+3. **UserMenu dropdown groups and order** — mount with username "marta" and
+   `useColorMode().preference` set to each of "system", "light", "dark" in turn; open the UserMenu
+   dropdown; assert the avatar shows initials "MA"; assert the trigger shows "marta"; assert the
+   first group is the account label "marta"; assert the second group has System, Light and Dark
+   checkbox items with exactly the current preference's item checked; assert the third, separate
+   group contains only "Log out".
+4. **Selecting a color-mode item updates the preference** — Examples-driven: (system → light),
+   (light → dark), (dark → system). Open the dropdown, activate the target item, assert
+   `useColorMode().preference` is set to the target and its checkbox item is checked while the
+   previous one is not.
+5. **Successful logout clears the session and navigates** — mock `POST /v1/auth/logout` resolving
+   200; open the UserMenu dropdown; activate "Log out"; assert the mock was called; assert the
+   session store's `clear()` is called once it resolves; assert the router navigates to /login.
+6. **Collapsed sidebar hides wordmark/username text but keeps an accessible name** — mount
+   DashboardShell and collapse the sidebar to :collapsed-size="3.5"; assert the AppLogo icon is still
+   present but the "RenewCMS" text node is not rendered (or is visually hidden, e.g. sr-only) while
+   an accessible name for the logo (aria-label or sr-only text reading "RenewCMS") is still present
+   in the accessibility tree; assert the UserMenu trigger still renders the UAvatar but not the
+   visible "marta" text node, while the trigger's accessible name still includes "marta" (via
+   aria-label or a tooltip plus aria-label); activate the collapsed trigger and assert the same
+   dropdown (account label, color-mode group, Log out) opens as in the expanded state.
+
+## Visual (manual verification — desktop and mobile, light and dark)
+
+Reference: `docs/design/components.md`'s DashboardShell section and
+`docs/design/source/RenewCMS Screens Back-office.dc.html`. Run `task visual:check -- <a verified
+screen, e.g. home>` for each state and compare the sidebar header/footer against the board frame.
+
+- [ ] Expanded sidebar: AppLogo plus "RenewCMS" wordmark in the header; UserMenu in the footer
+      shows the avatar and username, matching the board exactly at desktop and mobile.
+- [ ] UserMenu dropdown: opens above the trigger (`side: 'top'`), left-aligned (`align: 'start'`),
+      with the account label, the System/Light/Dark checkbox group and Log out visually separated
+      as in the board.
+- [ ] Color mode selection: choosing Light/Dark/System visibly re-themes the app and moves the
+      checkmark to the selected item.
+- [ ] Collapsed sidebar (icon-only rail): the AppLogo icon and the avatar remain visible; the
+      "RenewCMS" wordmark and the username text are hidden; nothing overflows or clips awkwardly at
+      the :collapsed-size="3.5" width, matching the board's collapsed rail treatment.
+- [ ] Keyboard/focus: Tab reaches UDashboardSidebarCollapse, then the UserMenu trigger; the
+      dropdown opens with Enter/Space, arrow keys move through the checkbox group, and Esc closes
+      it and returns focus to the trigger, in both the expanded and collapsed rail.
+
+## Manual verification
+
+- **Real POST /v1/auth/logout against a running server** — Vitest only mocks `useApi`; confirm the
+  real 200 round-trip against `task dev` with a live SQLite file, since these automated tests
+  never exercise the actual Go handler.
+- **Real useColorMode persistence across reload** — confirm a selected preference survives a full
+  page reload via the plugin's `colorMode: true` storage, since Vitest only asserts the in-memory
+  preference value.