{!selectedMailbox || queryStates.mailboxes.isLoading ? :
diff --git a/src/frontend/src/features/layouts/components/mailbox-selector/_index.scss b/src/frontend/src/features/layouts/components/mailbox-selector/_index.scss
new file mode 100644
index 00000000..76239a48
--- /dev/null
+++ b/src/frontend/src/features/layouts/components/mailbox-selector/_index.scss
@@ -0,0 +1,99 @@
+.mailbox-selector {
+ // Make the dropdown trigger wrapper span the full available width so the
+ // card aligns with the surrounding sidebar/header content.
+ & > .c__dropdown-menu-trigger {
+ justify-content: flex-start;
+ width: 100%;
+ }
+
+ // Card shared by the switchable (button) and the static (single-mailbox)
+ // variants: avatar on the left, bold name and the address underneath, with
+ // the unfold chevron pushed to the trailing edge.
+ .mailbox-selector__trigger {
+ display: flex;
+ align-items: center;
+ gap: var(--c--globals--spacings--xs);
+ width: 100%;
+ height: inherit;
+ padding-block: var(--c--globals--spacings--base) var(--c--globals--spacings--sm);
+ padding-inline: var(--c--globals--spacings--base);
+ .c__button__icon {
+ transition: transform 0.25s ease;
+ backface-visibility: visible;
+ }
+ }
+
+ .mailbox-selector__trigger[aria-expanded="true"] {
+ .c__button__icon {
+ transform: rotateX(-180deg);
+ }
+ }
+
+ .mailbox-selector__trigger--static {
+ // Nothing to unfold for a single mailbox: drop the interactive cursor.
+ cursor: default;
+ }
+
+ // Shared (non-identity) mailboxes get a rounded-square avatar to set them
+ // apart from the circular personal one.
+ .mailbox-selector__avatar[data-shared="true"] .c__avatar {
+ border-radius: 8px;
+ }
+
+ .mailbox-selector__text {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-align: left;
+ }
+
+ .mailbox-selector__name {
+ font-size: var(--c--globals--font--sizes--sm);
+ line-height: 1.2;
+ font-weight: 700;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .mailbox-selector__email {
+ font-size: var(--c--globals--font--sizes--xs);
+ opacity: 0.8;
+ font-weight: 500;
+ line-height: 1.2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
+
+// Same rounded-square treatment for shared mailboxes in the dropdown options.
+// The popover renders in a portal outside `.mailbox-selector`, so this rule is
+// intentionally global rather than nested under it.
+.mailbox-selector__option-avatar {
+ // Layout-transparent wrapper: the avatar sits exactly where the dropdown
+ // expects its icon, we only need the element as a styling hook.
+ display: contents;
+
+ &[data-shared="true"] .c__avatar {
+ border-radius: 8px;
+ }
+}
+
+// The dropdown caps its width at 320px, so a long mailbox name would otherwise
+// wrap onto several lines. Truncate it with an ellipsis instead. Scoped to our
+// items (which carry the avatar hook) since the popover lives in a portal.
+.c__dropdown-menu-item:has(.mailbox-selector__option-avatar) {
+ .c__dropdown-menu-item__label-container {
+ min-width: 0;
+ }
+
+ .c__dropdown-menu-item__label,
+ .c__dropdown-menu-item__label-subtext {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
diff --git a/src/frontend/src/features/layouts/components/mailbox-selector/index.tsx b/src/frontend/src/features/layouts/components/mailbox-selector/index.tsx
new file mode 100644
index 00000000..0e729dba
--- /dev/null
+++ b/src/frontend/src/features/layouts/components/mailbox-selector/index.tsx
@@ -0,0 +1,113 @@
+import { DropdownMenu, UserAvatar } from "@gouvfr-lasuite/ui-kit";
+import { ChevronDown } from "@gouvfr-lasuite/ui-kit/icons";
+import { Button } from "@gouvfr-lasuite/cunningham-react";
+import { useState } from "react";
+import { Mailbox } from "@/features/api/gen";
+import MailboxHelper from "@/features/utils/mailbox-helper";
+
+/** Display name of a mailbox, falling back to its address when no contact name
+ * is set (a mailbox may legitimately have a null/blank name). */
+const getMailboxLabel = (mailbox: Mailbox) => mailbox.name?.trim() || mailbox.email;
+
+type MailboxSelectorProps = {
+ /** Mailboxes the user can switch to (already the eligible subset). */
+ mailboxes: readonly Mailbox[];
+ /** Currently displayed mailbox. */
+ selectedMailbox: Mailbox;
+ /** Called with the picked mailbox id; never fired for the current one. */
+ onSelect: (mailboxId: string) => void | Promise;
+};
+
+/**
+ * Mailbox switcher shared by the sidebar header and the settings modal: an
+ * avatar + bold name + address card that unfolds a dropdown of the eligible
+ * mailboxes. When the user owns a single mailbox there is nothing to switch to,
+ * so the card renders as static content (not a disabled button) to keep the
+ * name/address legible and avoid exposing a bogus "button, unavailable" control.
+ */
+export const MailboxSelector = ({
+ mailboxes,
+ selectedMailbox,
+ onSelect,
+}: MailboxSelectorProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const label = getMailboxLabel(selectedMailbox);
+ const sublabel = selectedMailbox.name?.trim() ? selectedMailbox.email : null;
+ const canSwitch = mailboxes.length > 1;
+
+ // Avatar is decorative: the name it encodes is already shown next to it as
+ // text, so hide it from assistive tech to avoid a duplicate announcement.
+ const content = (
+ <>
+
+
+
+
+ {label}
+ {sublabel && {sublabel}}
+
+
+ );
+
+ if (!canSwitch) {
+ return (
+