Feature: DashboardShell wordmark, sidebar collapse and the UserMenu

  As the maintainer of RenewCMS
  I want DashboardShell built from the exact primitives docs/design/components.md specifies —
    AppLogo plus the "RenewCMS" wordmark in the sidebar header, and a UserMenu (UDropdownMenu on a
    ghost UButton with a UAvatar) in the sidebar footer, with a collapsed rail that hides text but
    never drops an accessible name
  So that every verified route's sidebar matches the visual spec of record and stays usable when
    collapsed, instead of the current plain-text "RenewCMS" header and "Log out" footer

  Background:
    Given DashboardShell is the layout for every verified route, per docs/design/routes.md
    And DashboardShell composes a UDashboardGroup storage="local" with a UDashboardSidebar
      collapsible :resizable="false" :default-size="14" :collapsed-size="3.5", per
      docs/design/components.md's DashboardShell section
    And the sidebar's #header slot renders AppLogo (the same reusable inline-SVG brand mark
      AuthShell uses) followed by the "RenewCMS" wordmark text, not the plain
      <span class="font-semibold">RenewCMS</span> the shell renders today
    And the sidebar's #default slot is a UNavigationMenu orientation="vertical" :collapsed bound
      to the sidebar's own collapsed state, with items Home, Articles, Users, Integration and Settings, in that order
    And the sidebar's #footer slot renders a UserMenu component, not the plain
      <span>Log out</span> text the shell renders today
    And UserMenu is the account menu specified in features/profile_page.feature, anchored to a
      ghost UButton block containing a UAvatar and the session's name (the display name when not
      empty, else the username)
    And the UAvatar's initials follow features/profile_page.feature (the first letters of the
      first two words of a display name, the first two characters of a single word or of a
      username, upper-cased; for example "marta" gives "MA"), and the avatar is aria-hidden
      because the name is shown next to it
    And UserMenu's groups, top to bottom, are: a header (the name and the email); Profile; a
      checkbox group of System, Light and Dark bound to useColorMode().preference, with the
      current preference's item checked; then Log out, in its own trailing group
    And Log out calls POST /v1/auth/logout inside a try/finally with a loading flag (no catch),
      then calls session.clear() and navigates to /login — the exact same shape PendingView.vue
      and VerifyView.vue already use for their own log-out actions, not a new resilience pattern
    And per docs/design/components.md's DashboardShell a11y note, in the collapsed rail the
      UNavigationMenu's items show tooltips and keep their aria-label; the wordmark and UserMenu
      apply that same spirit when the sidebar collapses to :collapsed-size="3.5"

  Scenario: The sidebar header renders AppLogo and the "RenewCMS" wordmark
    Given the user is on any verified route with the sidebar expanded
    When DashboardShell mounts
    Then the sidebar's #header slot renders an AppLogo before the text "RenewCMS"
    And the wordmark text "RenewCMS" is visible next to the logo
    And neither the logo nor the wordmark is a link, since there is nothing to navigate to from
      the shell itself

  Scenario: The sidebar collapse trigger toggles the rail and exposes aria-expanded
    Given the user is on any verified route with the sidebar expanded
    When the user activates UDashboardSidebarCollapse in the navbar's leading slot
    Then the sidebar transitions to its :collapsed-size="3.5" icon-only rail
    And UDashboardSidebarCollapse carries aria-expanded, reflecting the sidebar's new collapsed
      state
    When the user activates UDashboardSidebarCollapse again
    Then the sidebar returns to its :default-size="14" expanded width
    And aria-expanded reflects the expanded state

  Scenario: UserMenu lists the header, Profile, color-mode checkboxes, then Log out
    Given the session's username is "marta" and its email is "marta@renew.example"
    When the user activates the UserMenu trigger in the sidebar footer
    Then the menu opens with a UAvatar showing initials "MA" and the trigger's own name text
      "marta"
    And the first group is the header showing "marta" and "marta@renew.example"
    And the next item is "Profile"
    And the following group is a checkbox group with items System, Light and Dark, and exactly the
      item matching the current useColorMode().preference is checked
    And the final group contains only "Log out", separated from the color-mode group

  Scenario Outline: Selecting a color-mode item updates the preference and its checked state
    Given the user has opened the UserMenu dropdown
    And the current useColorMode().preference is "<from>"
    When the user activates the "<to>" checkbox item
    Then useColorMode().preference is set to "<to>"
    And the "<to>" item is checked and the "<from>" item is no longer checked

    Examples:
      | from   | to     |
      | system | light  |
      | light  | dark   |
      | dark   | system |

  Scenario: A successful logout clears the session and navigates to /login
    Given the user has opened the UserMenu dropdown
    When the user activates "Log out"
    Then a POST request is made to /v1/auth/logout
    And once it resolves, the local session is cleared
    And the user is navigated to /login

  Scenario: Collapsed sidebar hides the wordmark and username text but keeps an icon-only rail
    Given the user is on any verified route
    When the sidebar is collapsed to its :collapsed-size="3.5" icon-only rail
    Then the AppLogo icon in the sidebar header remains visible, but the "RenewCMS" wordmark text
      is hidden, not merely visually truncated
    And the header keeps an accessible name for the brand mark (an aria-label or sr-only text
      reading "RenewCMS" on the logo or its wrapper), so collapsing the rail is not a pure a11y
      regression
    And the UserMenu trigger in the sidebar footer still shows the UAvatar, but the name text
      next to it is hidden
    And the UserMenu trigger keeps an accessible name that includes the name (an aria-label
      such as "marta — account menu", or a tooltip plus aria-label), matching the same
      tooltip/aria-label spirit the collapsed rail's UNavigationMenu items already use per
      docs/design/components.md's DashboardShell a11y note
    And activating the collapsed UserMenu trigger still opens the same menu, with the same
      header, Profile, color-mode checkbox group and Log out item as the expanded state