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/AppShell.tsx

@@ -1,13 +1,16 @@
 import { lazy, Suspense, useEffect, useRef, useState, type ReactNode } from "react";
 import { Link, useLocation } from "wouter";
-import { Calendar, ChevronsUpDown, FolderOpen, Globe, HelpCircle, LogOut, Mail, Menu as MenuIcon, Moon, PenSquare, Plus, RefreshCw, Settings, ShieldCheck, Sun, Upload, Users, X } from "lucide-react";
+import { Calendar, Check, ChevronsUpDown, FolderOpen, Globe, HelpCircle, Lock, LogOut, Mail, Menu as MenuIcon, Moon, PenSquare, Plus, RefreshCw, Settings, ShieldCheck, Sun, Upload, Users, X } from "lucide-react";
 import { useSession } from "@/store/session";
 import { DEFAULT_APP_NAME, brandImage } from "@/lib/brand";
 import { InbuxaWordmark } from "@/ui/InbuxaWordmark";
 import { useEffectiveTheme, useSettings } from "@/store/settings";
 import { toggleTarget } from "@/lib/palette";
 import { useMail } from "@/store/mail";
-import { draftFromMailto, useCompose } from "@/store/compose";
+import { composeBlocked, draftFromMailto, useCompose } from "@/store/compose";
+import { delegatedAccounts } from "@/lib/delegation";
+import { toast } from "@/ui/toast";
+import { DelegatedBar } from "./DelegatedBar";
 import { Avatar, useIsMobile } from "@/ui/misc";
 import { MenuItem, MenuSep, Popover, useMenu } from "@/ui/popover";
 import { Splitter } from "@/ui/Splitter";
@@ -130,24 +133,45 @@ export function AppShell({ children }: { children: ReactNode }) {
   }, [openShare, navigate]);
 
   /*
-   * There is no account switcher any more.
+   * There is no general account switcher.
    *
    * It existed to reach what other people shared, and was the wrong door: it
    * moved the whole app to somebody else's account, and Stalwart advertises
    * every capability on a shared account, so mail, calendar and contacts went
    * with it and were refused. Shares are listed where they belong now -- in
-   * Files and in Contacts, beside the reader's own -- and found without anyone
-   * having to know an account switch was involved.
+   * Files and in Contacts, beside the reader's own.
+   *
+   * inbuxa AL-7 brings back one narrow door: a locked account an administrator
+   * handed to the reader. Only its mail is shown, in place of the reader's
+   * own; calendars, contacts, files and settings stay theirs. It is offered
+   * only when the session marks such an account, and only then is there
+   * anything to switch.
    */
+  const viewing = useSession((s) => s.viewing);
+  const delegated = delegatedAccounts(session);
+  const switchTo = (id: string | null) => {
+    acctMenu.close();
+    if (id === viewing) return;
+    // A message being written belongs to the account it was started in
+    if (useCompose.getState().drafts.length) {
+      toast.show(t("Send or close the message you're writing first."));
+      return;
+    }
+    useSession.getState().view(id);
+    navigate("/mail");
+  };
+  const composeOff = section !== "files" && section !== "calendar" && section !== "contacts" && composeBlocked() !== null;
 
   return (
-    <div className="app">
+    <div className={`app ${viewing ? "delegated" : ""}`}>
+      <DelegatedBar />
       <header className="topbar">
         <button className="icon-btn" aria-label={t("Menu")} onClick={() => (isMobile ? setDrawer((d) => !d) : update({ sidebarCollapsed: !collapsed }))}>
           <MenuIcon size={22} />
         </button>
-        <Link href="/mail" className="brand">
+        <Link href="/mail" className={`brand ${viewing ? "locked" : ""}`}>
           <img src={brandImage(appName === DEFAULT_APP_NAME ? "/img/inbuxa-mark.png" : "/img/logo.png")} alt="" />
+          {viewing && <Lock size={18} className="brand-lock" aria-label={t("Locked account")} />}
           {/* A product name, not a word: translated it is a different product.
               Read from the session rather than written here, so a deployment
               that set APP_NAME is called what it calls itself -- the document
@@ -186,6 +210,27 @@ export function AppShell({ children }: { children: ReactNode }) {
               </div>
             </div>
             <MenuSep />
+            {delegated.length > 0 && (
+              <>
+                <div className="hint" style={{ padding: "4px 10px" }}>{t("Mail to show")}</div>
+                <MenuItem
+                  icon={viewing ? <Mail size={16} /> : <Check size={16} />}
+                  label={t("My mail")}
+                  active={!viewing}
+                  onClick={() => switchTo(null)}
+                />
+                {delegated.map((account) => (
+                  <MenuItem
+                    key={account.id}
+                    icon={viewing === account.id ? <Check size={16} /> : <Lock size={16} />}
+                    label={<span className="notranslate" translate="no">{account.name}</span>}
+                    active={viewing === account.id}
+                    onClick={() => switchTo(account.id)}
+                  />
+                ))}
+                <MenuSep />
+              </>
+            )}
             {/* The project site. It is linked from the login screen footer, which
                 is a page a signed-in user never sees again -- so from inside the
                 app there was no way back to it.
@@ -249,6 +294,7 @@ export function AppShell({ children }: { children: ReactNode }) {
               from the file manager and was the one thing nobody wanted there. */}
           <button
             className="compose-btn"
+            hidden={composeOff}
             onClick={() => {
               if (section === "calendar") window.dispatchEvent(new CustomEvent("ihm:new-event"));
               else if (section === "contacts") window.dispatchEvent(new CustomEvent("ihm:new-contact"));

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>
+  );
+}

web/src/views/mail/MailView.tsx

@@ -16,6 +16,7 @@ import { LabelPicker } from "./LabelPicker";
 import type { Id } from "@/jmap/types";
 import { confirmDialog } from "@/ui/dialog";
 import { toast } from "@/ui/toast";
+import { viewingDelegation } from "@/store/session";
 import { isUnknownMailbox } from "@/lib/mailbox/mailboxRoute";
 import { scheduledMailboxIdFrom, useScheduled } from "@/store/scheduled";
 import { plural, t as translate, tNode } from "@/lib/i18n";
@@ -284,15 +285,36 @@ export function MailView({ mailboxId, threadId, search }: { mailboxId?: string;
     [threadId, currentRowIndex, settings.autoAdvance, ids, rowThreadId, openThread, setFocusId],
   );
 
+  /*
+   * inbuxa AL-6: in a locked account handed to the reader, what their level
+   * doesn't allow says so instead of trying. Read changes nothing; organize
+   * moves and flags but never deletes, so Trash and Junk are out of reach.
+   */
+  const refused = (destroys: boolean): boolean => {
+    const delegation = viewingDelegation();
+    if (!delegation) return false;
+    if (delegation.access === "read") {
+      toast.show(translate("This account was handed to you to read. Nothing in it can be changed."));
+      return true;
+    }
+    if (destroys && delegation.access === "organize") {
+      toast.show(translate("You can file and move mail in this account, but not delete it."));
+      return true;
+    }
+    return false;
+  };
+
   const actions = useMemo(
     () => ({
       archive: async (rows?: Id[]) => {
+        if (refused(false)) return;
         const t = await targetIds(rows);
         if (!t.length) return;
         await useMail.getState().archive(t);
         afterAction(true);
       },
       trash: async (rows?: Id[]) => {
+        if (refused(true)) return;
         const t = await targetIds(rows);
         if (!t.length) return;
         const mail = useMail.getState();
@@ -315,6 +337,7 @@ export function MailView({ mailboxId, threadId, search }: { mailboxId?: string;
         afterAction(true);
       },
       spam: async (rows?: Id[]) => {
+        if (refused(true)) return;
         const t = await targetIds(rows);
         if (!t.length) return;
         const mail = useMail.getState();
@@ -324,23 +347,28 @@ export function MailView({ mailboxId, threadId, search }: { mailboxId?: string;
         afterAction(true);
       },
       read: async (read: boolean, rows?: Id[]) => {
+        if (refused(false)) return;
         const t = await targetIds(rows);
         if (t.length) await useMail.getState().markRead(t, read);
         useMail.getState().clearSelection();
       },
       star: async (on: boolean, rows?: Id[]) => {
+        if (refused(false)) return;
         const t = await targetIds(rows);
         if (t.length) await useMail.getState().star(t, on);
       },
       move: async (rows?: Id[]) => {
+        if (refused(false)) return;
         const t = await targetIds(rows);
         if (t.length) setMovePicker({ ids: t });
       },
       label: async (rows: Id[] | undefined, anchor: { x: number; y: number }) => {
+        if (refused(false)) return;
         const t = await targetIds(rows);
         if (t.length) setLabelPicker({ ids: t, anchor });
       },
       moveTo: async (ids: Id[], mailboxId: Id) => {
+        if (refused(false)) return;
         await useMail.getState().move(ids, mailboxId);
         afterAction(true);
       },

web/src/views/mail/MessageView.tsx

@@ -35,7 +35,7 @@ import type { ListActions } from "./MessageList";
 import { InviteCard } from "./InviteCard";
 import { VCardCard } from "./VCardCard";
 import { AddressList, useAddressMenu } from "./AddressMenu";
-import { useSession } from "@/store/session";
+import { useSession, useViewingDelegation } from "@/store/session";
 import { useScheduled } from "@/store/scheduled";
 import { formatScheduleTime } from "@/lib/schedule";
 import { mdnDecision, refusalText } from "@/lib/mdn";
@@ -134,6 +134,8 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
   const imageProxy = useSession((s) => s.session?.ihasmail?.imageProxy ?? true);
   const scheduled = useScheduled((s) => s.pending[e.id]);
   const receipt = useMemo(() => mdnDecision(e), [e]);
+  // inbuxa AL-4: a locked account sends no read receipts, not even by a delegate
+  const lockedInView = useViewingDelegation() !== null;
   const [receiptDone, setReceiptDone] = useState<"sending" | "dismissed" | null>(null);
   const cancelScheduled = useScheduled((s) => s.cancel);
 
@@ -384,7 +386,7 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
               {receiptRequested && <><dt>{translate("Receipt")}</dt><dd>{receipt.offer ? translate("Requested, to {address}. Never sent automatically.", { address: receipt.to!.email }) : translate(refusalText(receipt.refusal!))}</dd></>}
             </dl>
           )}
-          {receipt.offer && settings.readReceiptPolicy !== "never" && receiptDone !== "dismissed" && (
+          {receipt.offer && settings.readReceiptPolicy !== "never" && receiptDone !== "dismissed" && !lockedInView && (
             <div className="receipt-banner" style={{ margin: "0 16px 8px" }}>
               <CheckCheck size={16} />
               <span className="grow">

web/src/views/mail/ThreadView.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useViewingDelegation } from "@/store/session";
 import { AlertOctagon, Archive, ArrowLeft, ChevronDown, ChevronUp, FolderInput, Forward, Mail, MailOpen, MailPlus, MoreVertical, Printer, Reply, ReplyAll, ShieldCheck, Star, Tag, Trash2, Download , Paperclip} from "lucide-react";
 import { useMail } from "@/store/mail";
 import { visibleMessages } from "@/lib/openMessage";
@@ -131,8 +132,11 @@ export function ThreadView({ threadId, mailboxId, onBack, actions, onNavigate, h
   );
 
   // Mark as read after delay
+  // inbuxa AL-6: never in a locked account handed over to read: reading it
+  // changes nothing there, not even $seen
+  const readOnly = useViewingDelegation()?.access === "read";
   useEffect(() => {
-    if (!messages.length) return;
+    if (!messages.length || readOnly) return;
     const unread = messages.filter((e) => !e.keywords.$seen && isExpanded(e)).map((e) => e.id);
     if (!unread.length || settings.markReadDelay < 0) return;
     if (markTimer.current) window.clearTimeout(markTimer.current);
@@ -141,7 +145,7 @@ export function ThreadView({ threadId, mailboxId, onBack, actions, onNavigate, h
       if (markTimer.current) window.clearTimeout(markTimer.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [messages.map((m) => m.id + (m.keywords.$seen ? "1" : "0")).join(","), settings.markReadDelay]);
+  }, [messages.map((m) => m.id + (m.keywords.$seen ? "1" : "0")).join(","), settings.markReadDelay, readOnly]);
 
   /*
    * Open on the first unread message rather than the newest one (#87).