feat(frontend): redesign profile popover (SECRT-2360) (#13138)

### Why / What / How

**Why:** The profile popover (top-right user menu) was visually
inconsistent with the rest of the design system — nested white cards on
a grey backdrop, uneven spacing, mixed icon weights, and a Log-out
button styled like a primary CTA. See
[SECRT-2360](https://linear.app/autogpt/issue/SECRT-2360).

**What:** Redesigns the popover into a single rounded card with a header
(avatar + display name + real email), a flat list of menu rows with
consistent Phosphor icons matching the Settings sidebar, a tinted hover
state with a left-bar indicator, and Sign-out demoted to a
destructive-text style. Adds a navigation spinner per row and a
violet-initial avatar fallback.

**How:**
- Replaced legacy `__legacy__/ui/popover` with the design-system
`molecules/Popover`.
- Lifted the header (`InitialAvatar` + name + email) into the rounded
container so it shares the same border/shadow.
- Wired `userEmail` to `user.email` from Supabase and `userName` to
`profile.name` (falls back to `profile.username`) in `Navbar.tsx`, so
the popover shows the actual email under the display name.
- Built a shared `AccountMenuRow` primitive with `link / button / div`
variants, group hover (violet fill + violet left bar), destructive
variant (red fill + red bar) and CSS-only transitions.
- Pending-link spinner via Next.js `useLinkStatus()` — same pattern as
`SettingsSidebar/SettingsNavItem.tsx`. Spinner appears on the row while
navigating and disappears when the destination renders.
- Renamed `Edit profile` → `Account` (label only; route unchanged) so it
matches `/settings/profile` page semantics.
- Updated Playwright `NavBar.clickProfileLink()` to target the new
label.
- Added Storybook stories (`Default`, `AdminUser`, `Loading`,
`LongValues`).

Admin-only gating in `getAccountMenuItems(userRole)` is preserved —
Admin row still only renders for `userRole === "admin"`.


https://github.com/user-attachments/assets/3ad0f57f-52aa-421b-ba58-4b7bf2183d23


### Changes 🏗️

- `components/layout/Navbar/components/AccountMenu/AccountMenu.tsx` —
full rewrite of the popover (header + flat row list, design-system
Popover, violet ring-free avatar).
-
`components/layout/Navbar/components/AccountMenu/components/AccountMenuRow.tsx`
*(new)* — shared row primitive (link/button/div) with hover/focus
indicator, destructive variant, and `useLinkStatus()` spinner for link
rows.
-
`components/layout/Navbar/components/AccountMenu/components/InitialAvatar.tsx`
*(new)* — violet fallback avatar showing the first letter of the display
name when no `avatarSrc` is available.
-
`components/layout/Navbar/components/AccountMenu/components/AccountLogoutOption.tsx`
— re-rendered via `AccountMenuRow` with the destructive variant +
Phosphor `SignOutIcon`.
- `components/layout/Navbar/components/AccountMenu/helpers.tsx` *(new)*
— Phosphor icon map for the popover (UserIcon, ChartLineUpIcon,
UploadSimpleIcon, SlidersHorizontalIcon, GearIcon, SignOutIcon) —
matches the Settings sidebar palette.
-
`components/layout/Navbar/components/AccountMenu/AccountMenu.stories.tsx`
*(new)* — Storybook coverage.
- `components/layout/Navbar/helpers.tsx` — renamed `Edit profile` →
`Account` in `getAccountMenuItems`. `MobileNavbar` still consumes
`getAccountMenuOptionIcon` from this file (untouched, out of scope).
- `components/layout/Navbar/Navbar.tsx` — re-wired
`userName`/`userEmail` props so the popover shows display name + real
email.
- `playwright/pages/navbar.page.ts` — updated `clickProfileLink` to
target the renamed "Account" link.

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
- [x] Open profile popover from the navbar avatar — verify header shows
display name + email
- [x] Hover each row — verify violet fill + violet left bar appear;
icons inherit color
  - [x] Hover Sign-out — verify red fill + red bar + red text
- [x] Click each menu row (Account, Creator Dashboard, Publish an agent
modal, Settings, Sign out) — verify destinations unchanged
- [x] Click Account/Creator Dashboard/Settings — verify a small spinner
appears in the row until the page mounts
- [x] Log in as an admin — verify the Admin row appears between Creator
Dashboard and Settings
  - [x] Log in as a non-admin — verify Admin row is hidden
- [x] Set avatar to empty — verify violet fallback with first letter of
display name
- [x] Set a very long display name + email — verify both truncate
cleanly
- [x] Mobile viewport (375px) — verify nothing regresses in MobileNavBar
(it consumes the same helpers.tsx menu config)
- [x] Run Playwright `auth-happy-path.spec.ts` and
`settings-happy-path.spec.ts` — both still click the avatar trigger via
testid, and `NavBar.clickProfileLink()` now targets the renamed
"Account" link