feat(SPA): profile page, display name and the new account menu

features/dashboard_shell_branding.feature

@@ -20,12 +20,14 @@ Feature: DashboardShell wordmark, sidebar collapse and the UserMenu
       to the sidebar's own collapsed state, with items Home, Articles, Users and Integration, 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 a UDropdownMenu :content="{ side: 'top', align: 'start' }" anchored to a
-      ghost UButton block containing a UAvatar and the session's username
-    And the UAvatar's initials are the first two characters of the username, upper-cased (for
-      example "marta" gives "MA"), and the avatar is aria-hidden because the username is shown
-      next to it
-    And UserMenu's dropdown groups, top to bottom, are: an account label (the username); a
+    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),
@@ -53,15 +55,16 @@ Feature: DashboardShell wordmark, sidebar collapse and the UserMenu
     Then the sidebar returns to its :default-size="14" expanded width
     And aria-expanded reflects the expanded state
 
-  Scenario: UserMenu's dropdown lists the account label, color-mode checkboxes, then Log out
-    Given the session's username is "marta"
+  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 dropdown opens with a UAvatar showing initials "MA" and the trigger's own username
-      text "marta"
-    And the first group is the account label showing "marta"
-    And the second group is a checkbox group with items System, Light and Dark, and exactly the
+    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 third and final group contains only "Log out", separated from the color-mode group
+    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
@@ -91,11 +94,11 @@ Feature: DashboardShell wordmark, sidebar collapse and the UserMenu
     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 username text
+    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 username (an aria-label
+    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 dropdown, with the same
-      account label, color-mode checkbox group and Log out item as the expanded state
+    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