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

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

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 />