feat(webmail): account switcher for the several signed-in accounts

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

services/webmail/messages/en.json

@@ -533,5 +533,13 @@
     "zoom": "Zoom",
     "dragToPosition": "Drag to position",
     "notAnImage": "That file could not be read as an image."
+  },
+  "accounts": {
+    "switchAccount": "Switch account",
+    "addAccount": "Add another account",
+    "signOutOne": "Sign out of {email}",
+    "signOutAll": "Sign out of all accounts",
+    "active": "Active",
+    "settings": "Account settings"
   }
 }

services/webmail/messages/es.json

@@ -533,5 +533,13 @@
     "zoom": "Zoom",
     "dragToPosition": "Arrastre para posicionar",
     "notAnImage": "No se pudo leer ese archivo como imagen."
+  },
+  "accounts": {
+    "switchAccount": "Cambiar de cuenta",
+    "addAccount": "Añadir otra cuenta",
+    "signOutOne": "Cerrar sesión de {email}",
+    "signOutAll": "Cerrar sesión en todas las cuentas",
+    "active": "Activa",
+    "settings": "Ajustes de la cuenta"
   }
 }

services/webmail/messages/pt-BR.json

@@ -533,5 +533,13 @@
     "zoom": "Zoom",
     "dragToPosition": "Arraste para posicionar",
     "notAnImage": "Não foi possível ler esse arquivo como imagem."
+  },
+  "accounts": {
+    "switchAccount": "Trocar de conta",
+    "addAccount": "Adicionar outra conta",
+    "signOutOne": "Sair de {email}",
+    "signOutAll": "Sair de todas as contas",
+    "active": "Ativa",
+    "settings": "Configurações da conta"
   }
 }

services/webmail/src/app/(user)/user/layout.tsx

@@ -27,7 +27,7 @@ import { LanguageSwitcher } from "../../../i18n/LanguageSwitcher";
 import { useAccount, isAdminRole } from "../../../lib/useAccount";
 import { useFolders } from "../../../lib/useFolders";
 import { folderBadge, customFolders } from "../../../lib/mailCounts";
-import { Avatar } from "../../../components/Avatar";
+import { AccountSwitcher } from "../../../components/AccountSwitcher";
 
 export default function UserWebmailLayout({ children }: { children: React.ReactNode }) {
   const t = useTranslations();
@@ -274,36 +274,7 @@ export default function UserWebmailLayout({ children }: { children: React.ReactN
           </div>
         )}
 
-        <Link
-          href="/user/settings"
-          onClick={() => setMobileOpen(false)}
-          className="flex items-center gap-2.5 rounded-xl bg-dark-panel p-2.5 shadow-edge transition-colors hover:bg-dark-card"
-        >
-          <Avatar address={account?.email} size={30} className="bg-indigo-900 text-indigo-300 shadow-[inset_0_0_0_1px_#5d5294]" />
-          <span className="min-w-0 flex-1">
-            <span
-              className="block truncate text-[12.5px] leading-tight"
-              title={account?.email ?? undefined}
-            >
-              {account?.email ?? t("common.loading")}
-            </span>
-            {/* Reports what is actually configured. The old fixed "2FA
-                active" reassured accounts that had no second factor at all. */}
-            <span className="mt-0.5 flex items-center gap-1 text-[10.5px] text-slate-400">
-              {account?.mfa_enrolled ? (
-                <>
-                  <ShieldCheck className="h-3 w-3 flex-none text-indigo-500" />
-                  {t("settings.mfaEnabled")}
-                </>
-              ) : (
-                <>
-                  <ShieldAlert className="h-3 w-3 flex-none text-amber-400" />
-                  {t("settings.mfaDisabled")}
-                </>
-              )}
-            </span>
-          </span>
-        </Link>
+        <AccountSwitcher onNavigate={() => setMobileOpen(false)} />
 
         <div className="flex items-center gap-1.5">
           <LanguageSwitcher />

services/webmail/src/components/AccountSwitcher.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { Check, ChevronsUpDown, LogOut, Plus, Settings } from "lucide-react";
+import { useTranslations } from "../i18n/provider";
+import { Avatar } from "./Avatar";
+
+interface SignedInAccount {
+  id: string;
+  email: string;
+  active: boolean;
+}
+
+/**
+ * The webmail accounts signed in on this browser, and the way to move between
+ * them without signing out. The auth service keeps one session per account;
+ * switching only changes which one is active.
+ */
+export function AccountSwitcher({ onNavigate }: { onNavigate?: () => void }) {
+  const t = useTranslations();
+  const [accounts, setAccounts] = useState<SignedInAccount[]>([]);
+  const [open, setOpen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+
+  const load = useCallback(() => {
+    fetch("/api/v1/auth/accounts")
+      .then((res) => (res.ok ? res.json() : { accounts: [] }))
+      .then((data) => setAccounts(data.accounts ?? []))
+      .catch(() => undefined);
+  }, []);
+
+  useEffect(load, [load]);
+
+  useEffect(() => {
+    if (!open) return;
+    const close = (event: MouseEvent | KeyboardEvent) => {
+      if (event instanceof KeyboardEvent) {
+        if (event.key === "Escape") setOpen(false);
+      } else if (root.current && !root.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", close);
+    document.addEventListener("keydown", close);
+    return () => {
+      document.removeEventListener("mousedown", close);
+      document.removeEventListener("keydown", close);
+    };
+  }, [open]);
+
+  const active = accounts.find((a) => a.active);
+
+  // A reload rather than a client-side update: every screen holds the previous
+  // account's mail in state, and none of it should survive the switch.
+  const switchTo = async (id: string) => {
+    const res = await fetch("/api/v1/auth/switch", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id }),
+    });
+    if (res.ok) window.location.href = "/user/mail/inbox";
+  };
+
+  const signOut = async (all: boolean) => {
+    const res = await fetch("/api/v1/auth/logout", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ all }),
+    }).catch(() => null);
+    const data = res?.ok ? await res.json().catch(() => ({})) : {};
+    window.location.href = data.remaining?.length ? "/user/mail/inbox" : "/user/login";
+  };
+
+  const item =
+    "flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-[13px] transition-colors hover:bg-white/[0.07]";
+
+  return (
+    <div ref={root} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        title={t("accounts.switchAccount")}
+        className="flex w-full items-center gap-2.5 rounded-xl bg-dark-panel p-2.5 text-left shadow-edge transition-colors hover:bg-dark-card"
+      >
+        <Avatar address={active?.email} size={30} className="bg-indigo-900 text-indigo-300 shadow-[inset_0_0_0_1px_#5d5294]" />
+        <span className="min-w-0 flex-1 truncate text-[12.5px]">{active?.email ?? t("common.loading")}</span>
+        <ChevronsUpDown className="h-3.5 w-3.5 flex-none text-slate-400" />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute inset-x-0 bottom-full z-30 mb-2 rounded-xl bg-dark-panel p-1.5 shadow-edge ring-1 ring-white/10"
+        >
+          {accounts.map((account) => (
+            <button
+              key={account.id}
+              role="menuitem"
+              type="button"
+              onClick={() => (account.active ? setOpen(false) : void switchTo(account.id))}
+              className={item}
+            >
+              <Avatar address={account.email} size={24} className="bg-indigo-900 text-indigo-300" />
+              <span className="min-w-0 flex-1 truncate">{account.email}</span>
+              {account.active && <Check className="h-4 w-4 flex-none text-indigo-400" aria-label={t("accounts.active")} />}
+            </button>
+          ))}
+          <Link href="/user/login?add=1" role="menuitem" className={item}>
+            <Plus className="h-4 w-4 flex-none text-slate-400" />
+            {t("accounts.addAccount")}
+          </Link>
+          <div className="my-1 h-px bg-white/10" />
+          <Link href="/user/settings" role="menuitem" onClick={onNavigate} className={item}>
+            <Settings className="h-4 w-4 flex-none text-slate-400" />
+            {t("accounts.settings")}
+          </Link>
+          <button type="button" role="menuitem" onClick={() => void signOut(false)} className={item}>
+            <LogOut className="h-4 w-4 flex-none text-slate-400" />
+            <span className="min-w-0 truncate">{t("accounts.signOutOne", { email: active?.email ?? "" })}</span>
+          </button>
+          {accounts.length > 1 && (
+            <button type="button" role="menuitem" onClick={() => void signOut(true)} className={`${item} text-rose-400`}>
+              <LogOut className="h-4 w-4 flex-none" />
+              {t("accounts.signOutAll")}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}