Open locked accounts handed to you, beside your own mail

When the server hands a locked account to the reader (urn:inbuxa:jmap
delegation), the account popover offers it. Only mail follows the switch;
the reader's own settings, push and notifications stay theirs. A red bar,
a red wordmark with a padlock and the tab title say which account is in
view. Read delegates can't change anything, organize delegates can't
delete, and writing needs send-as. A delegation taken away drops back to
the reader's own mail.

14 new strings in all nine catalogs, unreviewed (inbuxa AL-7, AL-8).

web/src/views/DelegatedBar.tsx

@@ -0,0 +1,50 @@
+import { Lock } from "lucide-react";
+import { useLocation } from "wouter";
+import { useSession, useViewingDelegation } from "@/store/session";
+import { t } from "@/lib/i18n";
+import type { DelegationAccess } from "@/lib/delegation";
+
+export function accessText(access: DelegationAccess): string {
+  switch (access) {
+    case "read":
+      return t("Read only");
+    case "organize":
+      return t("Read and organize");
+    case "full":
+      return t("Full access");
+  }
+}
+
+/**
+ * inbuxa AL-7: while a locked account's mail is in view, a red bar across
+ * the whole app says so, with the way back. Red, not the palette's accent: a
+ * fixed color that reads the same in every palette and in dark mode, so it
+ * can't be mistaken for part of a theme.
+ */
+export function DelegatedBar() {
+  const viewing = useSession((s) => s.viewing);
+  const name = useSession((s) => (s.viewing ? s.session?.accounts[s.viewing]?.name : undefined));
+  const delegation = useViewingDelegation();
+  const [, navigate] = useLocation();
+  if (!viewing || !delegation) return null;
+  return (
+    <div className="delegated-bar" role="status">
+      <Lock size={15} aria-hidden />
+      <span className="grow truncate">
+        {t("Locked account:")} <strong className="notranslate" translate="no">{name}</strong>
+        {" · "}
+        {accessText(delegation.access)}
+        {delegation.sendAs ? ` · ${t("You can send as this account")}` : ""}
+      </span>
+      <button
+        type="button"
+        onClick={() => {
+          useSession.getState().view(null);
+          navigate("/mail");
+        }}
+      >
+        {t("Back to my mail")}
+      </button>
+    </div>
+  );
+}