feat: Redesigned identity switcher

[sea-snake]

Redesigned identity switcher

Changes

• Added "xs" size to Avatar component.
• Remove padding from Dialog if rendered by Popover.
• Update Popover component to remove default padding
• Update Dialog touch scroll logic to support scrolling inner scrollable elements.
• Rewrite IdentitySwitcher component to match updated design.
• Remove ! syntax from Select padding styling since it's no longer needed.
• Add namespaceIds method to name space all IDS inside SVG string to fix the Google logo when rendered multiple times on the page.
• Add color-scheme to root css to make sure scrollbars are colored correctly according to the system color scheme.
• Update authorization layout to automatically authorize with a dapp when selecting another identity from the identity switcher.
• Render avatar together with identity name on the top right on all pages the identity switcher is used.
• Replace ButtonCard on mobile to match updated design (button used to open the identity switcher on the mobile manage pages).
• Remove 3 identities limit, render all past used identities instead.

Tests

Various e2e tests have been updated to match the redesigned identity switcher labels and behavior.

[Copilot]

Pull request overview

This PR updates the “identity switcher” UI and related flows to match a redesigned UX, including showing more identity context (avatar + auth method), removing the previous 3-identity display cap, and updating layouts and E2E tests to the new labels/behavior.

Changes:

• Redesign IdentitySwitcher UI/behavior and update consuming layouts (manage/authorize/index) to match the new design and auto-authorize on identity switch in the authorize flow.
• Adjust shared UI components (Avatar, Popover, Dialog, Select) to support the new styling/interaction requirements.
• Update OpenID logo handling to avoid SVG ID collisions, and update Playwright E2E tests for new button labels.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/frontend/tests/e2e-playwright/utils.ts	Updates identity-switcher button label used by helpers.
src/frontend/tests/e2e-playwright/routes/manage/migration.spec.ts	Updates identity-switcher label in manage migration test.
src/frontend/tests/e2e-playwright/routes/index.spec.ts	Updates flows to match redesigned identity switcher actions/labels.
src/frontend/tests/e2e-playwright/routes/authorize/continue.spec.ts	Updates authorize tests to match new switcher behavior (auto-continue).
src/frontend/tests/e2e-playwright/fixtures/identity.ts	Updates identity wizard expected buttons list.
src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.svelte	Redesigns mobile identity trigger and removes 3-identity cap in derived list.
src/frontend/src/routes/(new-styling)/+page.svelte	Updates top-right identity button styling (avatar + name) and removes 3-identity cap.
src/frontend/src/routes/(new-styling)/(channel)/authorize/+layout.svelte	Auto-authorizes when switching identity from the switcher; updates identity button UI.
src/frontend/src/lib/utils/openID.ts	Namespaces SVG IDs in OpenID logos to prevent DOM collisions.
src/frontend/src/lib/components/ui/Select.svelte	Removes ! padding override now that Popover/Dialog padding behavior changed.
src/frontend/src/lib/components/ui/Popover.svelte	Removes default padding and ensures Dialog-rendered popovers can be paddingless.
src/frontend/src/lib/components/ui/IdentitySwitcher.svelte	Full redesign: selected identity card, list UI, “Add another identity”, manage action.
src/frontend/src/lib/components/ui/Dialog.svelte	Adds contentClass and improves touch scrolling to support inner scrollables.
src/frontend/src/lib/components/ui/Avatar.svelte	Adds xs size for new header identity button design.
src/frontend/src/lib/app.css	Sets color-scheme: light dark to improve scrollbar theming.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.