Merge pull request #98 from LINUXexpert-org/shared-address-books

Put address books in the left pane, other people's included

KNOWN-ISSUES.md

@@ -23,7 +23,7 @@ works the same way — and dropped where 0.15 was the whole subject. Support for
 
 - **Delete all spam destroys, and does not pass through Deleted Items** — this is the point of the feature and the thing worth checking on a real server, since a folder that empties into another folder has solved nothing. `Email/set destroy`, walked a page at a time so it survives `maxObjectsInSet` the way emptying Deleted Items already had to. **Confirmed live on 0.16.19 (2026-08-26)**: Junk Mail emptied and Deleted Items stayed empty afterwards. There is no undo, which is why all three entry points share one dialog that says so. Only Deleted Items and Junk Mail can be emptied this way, enforced in the store rather than only hidden in the menus.
 - **Sharing a mail folder is accepted and does nothing.** `Mailbox/set` with a `shareWith` map is applied, `Mailbox/get` reads it back, and the folder never appears for the account it was shared with — **confirmed live on 0.16.19 (2026-08-27)** with a folder shared read-only to another account on the same server, which never saw it. Stalwart's own sharing documentation lists calendars, address books and file storage; mail folders are not among them. Nothing reports a failure at any point, which is the whole problem: the share is stored, so a client that trusts what it reads back shows it as live for ever. The entry point is withdrawn. A folder that is *already* shared still offers **Stop sharing**, because a share nobody can see is exactly the one you want to be able to clear, and there is no other way to. File sharing is unaffected and works end to end.
-- **Address book sharing is withdrawn without being disproved.** It was taken out alongside mail folders on 2026-08-27, on a report that it behaved the same way, and that report has not been reproduced: there was no shared address book left on the account by the time anyone looked. Stalwart documents address books as shareable, so the expectation is that this one *does* work and the entry point should come back — it is out because offering a share nobody can verify was worse than the gap. Testing it needs two accounts and someone to confirm the book arrives. **Stop sharing** remains for a book already shared.
+- **Address book sharing works, and was briefly withdrawn by mistake.** It was taken out alongside mail folders on 2026-08-27 on a report that it behaved the same way; the report was mistaken and the feature was put back the same day. Nothing was ever shown to be wrong with it, and Stalwart documents address books as shareable. Recorded because the withdrawal is in the history and would otherwise read as a finding. Shared books now appear in the Contacts pane under "Shared with me" rather than behind an account switch, and their contacts are offered when addressing a message.
 - **Read receipts are built here, not by the server** — JMAP has an extension for them, [RFC 9007](https://www.rfc-editor.org/rfc/rfc9007.html)'s `MDN/send`, and Stalwart does not implement it: `urn:ietf:params:jmap:mdn` is not among its capabilities. So ihasmail assembles the `multipart/report` itself and sends it the long way round — raw MIME uploaded as a blob, `Email/import`, then `EmailSubmission` — which is also why the receipt lands in Sent, where it honestly belongs. Non-ASCII parts are base64 rather than `8bit`, so nothing depends on 8BITMIME surviving every hop. There is deliberately no "always send" setting: a receipt confirms to whoever asked that the address is live and when it was read, to an address of the sender's choosing, so each one is a decision. Verified against the mock end to end (upload, import, submit, `$mdnsent`), and **confirmed live on 0.16.19 (2026-08-26)**: a receipt asked for by a real sender was assembled, uploaded, imported and submitted, landed in Sent, and set `$mdnsent` so a second look does not offer to send another.
 - **Where 0.16 advertises `urn:stalwart:jmap`** — not where a JMAP client would look, and this now decides whether a sign-in is allowed at all. Stalwart builds the session-level `capabilities` from a fixed list (`Session::new`, plus WebSocket) that has never contained this capability, in any 0.16.x from 0.16.0 to 0.16.19. It hands it out per-account instead, so it appears in `primaryAccounts` and in each account's `accountCapabilities`. ihasmail tested for it in `capabilities` alone, which made every real 0.16 server read as older than 0.16 — and that one check drove three things: self-service credentials fell back to `POST /api/account/auth`, which 0.16 removed, so password changes, 2FA and app passwords all failed with "this mail server does not offer self-service credential management"; About reported the wrong generation; and Files took the older code path. It now looks in all three places, and is covered by tests on each. Worth restating plainly, because the stakes went up when 0.15 support was dropped: there is no longer a fallback path for this check to be wrong *into*. Getting it wrong now refuses every sign-in against a perfectly good server — a loud failure rather than a quiet misrouting, which is the trade the removal was making.
 - **HTML signatures** — Stalwart caps a signature at 2047 **bytes** (`value.len() < 2048` on a Rust string, so UTF-8 bytes, not characters). ihasmail compacts pasted HTML, moves images to Files and, if still too large, keeps the full signature in Files behind a short marker; other clients see a text fallback. Confirmed live on 0.15.5 (2026-08-24): oversized, non-ASCII and inline-image signatures all save, and a test message arrived intact at Gmail with the logo inline.

ROADMAP.md

@@ -6,7 +6,7 @@ rest is here because the answer is "no", not "not yet".
 
 See [KNOWN-ISSUES.md](KNOWN-ISSUES.md) for what is built but worth knowing about.
 
-- **Sharing a mail folder.** Stalwart stores the share and never delivers it; see [KNOWN-ISSUES.md](KNOWN-ISSUES.md). Withdrawn until the server does something with it. **Address book sharing** is withdrawn with it on a report that has not been reproduced, and is expected back — Stalwart documents it as supported. Sharing files and calendars is unaffected.
+- **Sharing a mail folder.** Stalwart stores the share and never delivers it; see [KNOWN-ISSUES.md](KNOWN-ISSUES.md). Withdrawn until the server does something with it. Sharing files, calendars and address books is unaffected and works.
 - Snooze (nothing in JMAP or Stalwart supports it, and ihasmail never stores a password, so nothing could act on a mailbox while you are away)
 - Translations (strings are English-only for now)
 - **Two-factor sign-in.** Today an account with 2FA must use an app password (see [Quick start](README.md#quick-start-docker)), and Settings › Security offers no way to switch 2FA *on* — only off, for an account that already has it. Supporting a TOTP code directly means implementing OAuth: Stalwart offers the authorization-code and device flows and no password grant, so ihasmail would hand sign-in to Stalwart's own login and come back with a token. That is a better security posture than the sealed password it holds now — a refresh token rather than a credential — but it replaces ihasmail's own sign-in page for those users and may need an OAuth client registered. Reported as [#75](https://github.com/LINUXexpert-org/ihasmail/issues/75)

server/src/mock/index.ts

@@ -193,7 +193,17 @@ const events: Obj[] = [];
   events.push({ id: "ev4", calendarIds: { c1: true }, "@type": "Event", uid: "ev4", title: "Lunch with Grace", start: local(d(2, 12)), timeZone: tz, duration: "PT1H", showWithoutTime: false, color: "#db2777" });
 }
 const participantIdentities: Obj[] = [{ id: "pi1", name: "Demo User", calendarAddress: `mailto:${USER}`, sendTo: { imip: `mailto:${USER}` }, isDefault: true }];
-const addressBooks: Obj[] = [{ id: "ab1", name: "Personal", description: null, sortOrder: 0, isDefault: true, isSubscribed: true, shareWith: null, myRights: { mayRead: true, mayWrite: true, mayShare: true, mayDelete: true } }];
+const abRights = (write = true) => ({ mayRead: true, mayWrite: write, mayShare: write, mayDelete: write });
+const addressBooks: Obj[] = [{ id: "ab1", name: "Personal", description: null, sortOrder: 0, isDefault: true, isSubscribed: true, shareWith: {}, myRights: abRights() }];
+/* A book in the shared account, so "Shared with me" and addressing a message
+   from somebody else's contacts can be exercised at all. Read-only, which is
+   what a share usually is. */
+const sharedAddressBooks: Obj[] = [{ id: "ab9", name: "Team contacts", description: null, sortOrder: 0, isDefault: true, isSubscribed: true, shareWith: {}, myRights: abRights(false) }];
+const sharedCards: Obj[] = [
+  { id: "sc1", addressBookIds: { ab9: true }, name: { full: "Katherine Johnson" }, emails: { e1: { address: "[email protected]", contexts: {} } }, phones: {}, organizations: {}, nicknames: {}, addresses: {}, notes: {}, updated: new Date().toISOString() },
+  { id: "sc2", addressBookIds: { ab9: true }, name: { full: "Dorothy Vaughan" }, emails: { e1: { address: "[email protected]", contexts: {} } }, phones: {}, organizations: {}, nicknames: {}, addresses: {}, notes: {}, updated: new Date().toISOString() },
+];
+const booksFor = (accountId: unknown): Obj[] => (accountId === SHARED_ACCOUNT ? sharedAddressBooks : addressBooks);
 const cards: Obj[] = people.slice(0, 6).map((p, i) => {
   const [given, surname] = p[0]!.split(" ");
   return { id: `cc${i}`, addressBookIds: { ab1: true }, "@type": "Card", version: "1.0", uid: `uid-cc${i}`, kind: "individual", name: { components: [{ kind: "given", value: given }, { kind: "surname", value: surname ?? "" }], isOrdered: true }, emails: { e1: { address: p[1], contexts: { work: true } } }, phones: i % 2 ? { p1: { number: `+1 555 010${i}`, features: { mobile: true } } } : undefined, organizations: i % 3 ? { o1: { name: "Example Corp" } } : undefined };
@@ -731,10 +741,10 @@ const handlers: Record<string, Handler> = {
   "Principal/query": () => ({ accountId: ACCOUNT, queryState: "1", canCalculateChanges: false, position: 0, ids: principals.map((p) => p.id) }),
   "Principal/get": genericGet(principals),
   "Principal/getAvailability": (a) => ({ accountId: ACCOUNT, list: [{ utcStart: String(a.utcStart).slice(0, 11) + "13:00:00Z", utcEnd: String(a.utcStart).slice(0, 11) + "14:30:00Z", busyStatus: "confirmed", event: null }] }),
-  "AddressBook/get": genericGet(addressBooks),
+  "AddressBook/get": (a) => genericGet(booksFor(a.accountId))(a),
   "AddressBook/set": genericSet(addressBooks, "ab", (o) => Object.assign(o, { description: null, sortOrder: 0, isDefault: false, isSubscribed: true, shareWith: null, myRights: { mayRead: true, mayWrite: true, mayShare: true, mayDelete: true }, ...o })),
-  "ContactCard/query": () => ({ accountId: ACCOUNT, queryState: "1", canCalculateChanges: false, position: 0, ids: cards.map((c) => c.id), total: cards.length }),
-  "ContactCard/get": genericGet(cards),
+  "ContactCard/query": (a) => { const list = a.accountId === SHARED_ACCOUNT ? sharedCards : cards; return { accountId: a.accountId ?? ACCOUNT, queryState: "1", canCalculateChanges: false, position: 0, ids: list.map((c) => c.id), total: list.length }; },
+  "ContactCard/get": (a) => genericGet(a.accountId === SHARED_ACCOUNT ? sharedCards : cards)(a),
   "ContactCard/set": genericSet(cards, "cc"),
   "ContactCard/parse": (a) => { const parsed: Obj = {}; for (const b of a.blobIds as string[]) { const t = blobs.get(b)?.data.toString() ?? ""; const fn = /^FN:(.*)$/m.exec(t)?.[1]?.trim() ?? "Imported"; const em = /^EMAIL[^:]*:(.*)$/m.exec(t)?.[1]?.trim(); parsed[b] = [{ "@type": "Card", version: "1.0", uid: randomUUID(), kind: "individual", name: { full: fn }, emails: em ? { e1: { address: em } } : undefined }]; } return { accountId: ACCOUNT, parsed, notParsable: [] }; },
   "FileNode/query": (a) => {

web/src/store/contacts.ts

@@ -13,6 +13,22 @@ export interface Suggestion {
   photo?: string | null;
 }
 
+/** A book somebody else shared, and the account it lives in. */
+export interface SharedBook {
+  accountId: Id;
+  accountName: string;
+  book: AddressBook;
+}
+
+/** Which book the contact list is showing. `accountId` null means the reader's. */
+export interface BookSelection {
+  accountId: Id | null;
+  bookId: Id | "all";
+}
+
+/** Cards from shared accounts are keyed by account too: ids collide across them. */
+export const sharedKey = (accountId: Id, id: Id): string => `${accountId}:${id}`;
+
 interface ContactsState {
   accountId: Id | null;
   available: boolean;
@@ -24,12 +40,25 @@ interface ContactsState {
   principals: Principal[];
   principalsLoaded: boolean;
   recent: EmailAddress[];
+  /** Address books shared with the reader, from every non-personal account. */
+  sharedBooks: SharedBook[];
+  /** Their cards, keyed by account and id. See `sharedKey`. */
+  sharedCards: Record<string, ContactCard>;
+  sharedLoaded: boolean;
+  selection: BookSelection;
 
   init(): Promise<void>;
   loadBooks(): Promise<void>;
   loadAll(): Promise<void>;
+  /** Books and cards from accounts that shared with the reader. */
+  loadShared(): Promise<void>;
+  select(selection: BookSelection): void;
+  /** The account a card belongs to, null for the reader's own. */
+  accountOfCard(id: Id): Id | null;
   getCard(id: Id): Promise<ContactCard | null>;
   search(text: string): ContactCard[];
+  /** The search filter itself, so a shared book can be filtered the same way. */
+  filterCards(cards: ContactCard[], text: string): ContactCard[];
   createCard(card: Partial<ContactCard>, addressBookId: Id): Promise<Id>;
   updateCard(id: Id, patch: Record<string, unknown>): Promise<void>;
   destroyCards(ids: Id[]): Promise<void>;
@@ -57,14 +86,76 @@ export const useContacts = create<ContactsState>((set, get) => ({
   principals: [],
   principalsLoaded: false,
   recent: [],
+  sharedBooks: [],
+  sharedCards: {},
+  sharedLoaded: false,
+  selection: { accountId: null, bookId: "all" },
 
   async init() {
-    const accountId = useSession.getState().accountFor(CAP.contacts);
+    // The reader's own, not whichever account is selected: a shared address
+    // book is shown beside theirs rather than instead of it, so nothing here
+    // should move when the switcher does.
+    const accountId = useSession.getState().ownAccountFor(CAP.contacts);
     const available = Boolean(accountId && client.hasCapability(CAP.contacts));
-    if (accountId !== get().accountId) set({ accountId, books: {}, cards: {}, loaded: false });
+    if (accountId !== get().accountId) set({ accountId, books: {}, cards: {}, loaded: false, selection: { accountId: null, bookId: "all" } });
     set({ available });
     if (!available) return;
     await get().loadBooks();
+    void get().loadShared();
+  },
+
+  /*
+   * Books and cards from accounts that shared with the reader.
+   *
+   * These are held apart from the reader's own rather than merged into them,
+   * because ids are only unique within an account: two accounts each having a
+   * book "ab1" is ordinary, and a flat map keyed on the bare id would have one
+   * quietly replace the other. `sharedKey` keeps them apart.
+   *
+   * Loaded eagerly, unlike the shared folders in Files, because these are not
+   * only browsed -- they have to answer when someone types a name into a To
+   * field, which cannot wait for a folder to be opened first.
+   */
+  async loadShared() {
+    const session = useSession.getState();
+    const own = session.ownAccountFor(CAP.contacts);
+    const s = session.session;
+    const accounts = Object.entries(s?.accounts ?? {}).filter(([id, a]) => a.isPersonal === false && id !== own);
+    if (!accounts.length) {
+      set({ sharedBooks: [], sharedCards: {}, sharedLoaded: true });
+      return;
+    }
+    const books: SharedBook[] = [];
+    const cards: Record<string, ContactCard> = {};
+    for (const [accountId, account] of accounts) {
+      try {
+        const res = await client.call<GetResponse<AddressBook>>("AddressBook/get", { accountId, ids: null });
+        for (const book of res.list) books.push({ accountId, accountName: account.name, book });
+        // One page. A shared book is a colleague's contacts, not an archive,
+        // and the alternative is holding the reader's own list hostage to it.
+        const cardsRes = await client.chain([
+          ["ContactCard/query", { accountId, limit: 500 }, "q"],
+          ["ContactCard/get", { accountId, "#ids": { resultOf: "q", name: "ContactCard/query", path: "/ids" } }, "g"],
+        ]);
+        const g = cardsRes.get("g")?.[0] as unknown as GetResponse<ContactCard>;
+        for (const c of g.list) cards[sharedKey(accountId, c.id)] = c;
+      } catch {
+        // An account that refuses is one that shared nothing here. Not an
+        // error to show: the reader did not ask for it and cannot act on it.
+        continue;
+      }
+    }
+    set({ sharedBooks: books, sharedCards: cards, sharedLoaded: true });
+  },
+
+  select(selection) {
+    set({ selection });
+  },
+
+  accountOfCard(id) {
+    if (get().cards[id]) return null;
+    const hit = Object.entries(get().sharedCards).find(([key]) => key.endsWith(`:${id}`));
+    return hit ? hit[0].slice(0, hit[0].length - id.length - 1) : null;
   },
 
   async loadBooks() {
@@ -114,20 +205,23 @@ export const useContacts = create<ContactsState>((set, get) => ({
     return c ?? null;
   },
 
-  search(text) {
+  filterCards(cards, text) {
     const q = text.trim().toLowerCase();
-    const all = Object.values(get().cards);
     const filtered = q
-      ? all.filter((c) => {
+      ? cards.filter((c) => {
           const hay = [contactDisplayName(c), ...Object.values(c.emails ?? {}).map((e) => e.address), ...Object.values(c.phones ?? {}).map((p) => p.number), ...Object.values(c.organizations ?? {}).map((o) => o.name ?? ""), ...Object.values(c.nicknames ?? {}).map((n) => n.name)]
             .join(" ")
             .toLowerCase();
           return hay.includes(q);
         })
-      : all;
+      : cards;
     return filtered.sort((a, b) => sortKey(a).localeCompare(sortKey(b)));
   },
 
+  search(text) {
+    return get().filterCards(Object.values(get().cards), text);
+  },
+
   async createCard(card, addressBookId) {
     const accountId = get().accountId!;
     const obj = { "@type": "Card", version: "1.0", uid: crypto.randomUUID(), kind: "individual", ...card, addressBookIds: { [addressBookId]: true } };
@@ -244,10 +338,15 @@ export const useContacts = create<ContactsState>((set, get) => ({
       return 99;
     };
     const candidates: Array<Suggestion & { score: number }> = [];
-    for (const c of Object.values(st.cards)) {
+    // A shared address book is only useful if it answers when you are writing
+    // to someone in it, so its cards are offered alongside the reader's own.
+    // They rank a shade lower, so a name in both wins from your own book.
+    const own = Object.values(st.cards).map((c) => ({ c, penalty: 0 }));
+    const shared = Object.values(st.sharedCards).map((c) => ({ c, penalty: 0.5 }));
+    for (const { c, penalty } of [...own, ...shared]) {
       for (const a of contactEmails(c)) {
         const sc = score(a.name, a.email);
-        if (sc < 99) candidates.push({ name: a.name, email: a.email, source: "contact", contactId: c.id, score: sc });
+        if (sc < 99) candidates.push({ name: a.name, email: a.email, source: "contact", contactId: c.id, score: sc + penalty });
       }
     }
     for (const p of st.principals) {
@@ -280,11 +379,14 @@ export const useContacts = create<ContactsState>((set, get) => ({
 
   lookupByEmail(email) {
     const e = email.toLowerCase();
-    return Object.values(get().cards).find((c) => Object.values(c.emails ?? {}).some((x) => x.address.toLowerCase() === e));
+    const match = (c: ContactCard) => Object.values(c.emails ?? {}).some((x) => x.address.toLowerCase() === e);
+    // The reader's own books first: a card they wrote themselves should win
+    // over a colleague's version of the same person.
+    return Object.values(get().cards).find(match) ?? Object.values(get().sharedCards).find(match);
   },
 
   applyChanges(types) {
-    if (types.has("AddressBook")) void get().loadBooks();
+    if (types.has("AddressBook")) { void get().loadBooks(); void get().loadShared(); }
     if (types.has("ContactCard") && get().loaded) void get().loadAll();
   },
 }));

web/src/views/AppShell.tsx

@@ -10,6 +10,7 @@ import { MenuItem, MenuSep, MenuTitle, Popover, useMenu } from "@/ui/popover";
 import { SearchBar } from "./SearchBar";
 import { MailboxTree } from "./mail/MailboxTree";
 import { FilesTree } from "./files/FilesTree";
+import { ContactsSidebar } from "./contacts/ContactsSidebar";
 import { CalendarSidebar } from "./calendar/CalendarSidebar";
 import { ShortcutsDialog, useGlobalShortcuts } from "./Shortcuts";
 import { formatSize } from "@/lib/format";
@@ -131,7 +132,7 @@ export function AppShell({ children }: { children: ReactNode }) {
           <div className="sidebar-scroll">
             {(section === "mail" || section === "search") && <MailboxTree />}
             {section === "calendar" && <CalendarSidebar />}
-            {section === "contacts" && <div className="nav-section"><span>Contacts</span></div>}
+            {section === "contacts" && <ContactsSidebar />}
             {section === "files" && <FilesTree />}
             {section === "settings" && <div className="nav-section"><span>Settings</span></div>}
           </div>

web/src/views/contacts/ContactsSidebar.tsx

@@ -0,0 +1,178 @@
+import { useEffect, useState } from "react";
+import { Book, BookOpen, Download, Pencil, Plus, RefreshCw, Share2, Trash2, Upload, Users } from "lucide-react";
+import { useContacts } from "@/store/contacts";
+import { useSession } from "@/store/session";
+import type { AddressBook } from "@/jmap/types";
+import { MenuItem, MenuSep, Popover, useMenu } from "@/ui/popover";
+import { confirmDialog, promptDialog } from "@/ui/dialog";
+import { toast } from "@/ui/toast";
+import { ShareDialog } from "../settings/ShareDialog";
+
+/**
+ * Re-read the session so newly shared books appear without a sign-in.
+ *
+ * Shared accounts arrive in the JMAP session, which is otherwise fetched once
+ * and refreshed only when a state change is pushed to this tab. Opening
+ * Contacts is when the answer matters, so that is when it is asked for --
+ * throttled, since this is navigated to often and usually says nothing new.
+ */
+let lastRefresh = 0;
+async function refreshShares(force = false): Promise<void> {
+  const now = Date.now();
+  if (!force && now - lastRefresh < 30_000) return;
+  lastRefresh = now;
+  try {
+    await useSession.getState().refresh();
+  } catch {
+    return;
+  }
+  await useContacts.getState().init();
+}
+
+/**
+ * Address books in the app's own left pane, the reader's above and other
+ * people's below.
+ *
+ * The two are kept plainly apart rather than merged into one list: a book that
+ * belongs to somebody else behaves differently -- you cannot add to it, and
+ * what you do see depends on what they granted -- and a list that hid that
+ * distinction would be lying about whose contacts these are.
+ */
+export function ContactsSidebar() {
+  /* Import and export act on the list the view is showing, so they are asked
+     for by event rather than reaching across into it. */
+  const onImport = (file: File) => window.dispatchEvent(new CustomEvent("ihm:contacts-import", { detail: file }));
+  const onExport = () => window.dispatchEvent(new CustomEvent("ihm:contacts-export"));
+  const contacts = useContacts();
+  const [menuBook, setMenuBook] = useState<AddressBook | null>(null);
+  const [share, setShare] = useState<AddressBook | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const menu = useMenu();
+
+  useEffect(() => {
+    void refreshShares();
+  }, []);
+
+  if (!contacts.available) return null;
+
+  const own = Object.values(contacts.books).sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name));
+  const sel = contacts.selection;
+  const isOn = (accountId: string | null, bookId: string) => sel.accountId === accountId && sel.bookId === bookId;
+
+  return (
+    <>
+      <div className="nav-section"><span>Contacts</span></div>
+      <div className={`nav-item ${isOn(null, "all") ? "active" : ""}`} onClick={() => contacts.select({ accountId: null, bookId: "all" })}>
+        <Users size={17} />
+        <span className="grow truncate">All contacts</span>
+      </div>
+
+      <div className="nav-section">
+        <span>My address books</span>
+        <button
+          className="icon-btn sm"
+          title="New address book"
+          aria-label="New address book"
+          onClick={async () => {
+            const name = await promptDialog({ title: "New address book", placeholder: "Name" });
+            if (!name?.trim()) return;
+            try {
+              await contacts.createBook(name.trim());
+            } catch (err) {
+              toast.error((err as Error).message);
+            }
+          }}
+        >
+          <Plus size={14} />
+        </button>
+      </div>
+      {own.map((b) => (
+        <div
+          key={b.id}
+          className={`nav-item ${isOn(null, b.id) ? "active" : ""}`}
+          onClick={() => contacts.select({ accountId: null, bookId: b.id })}
+          onContextMenu={(e) => { e.preventDefault(); setMenuBook(b); menu.openAt(e.clientX, e.clientY); }}
+        >
+          <Book size={17} />
+          <span className="grow truncate">{b.name}</span>
+          {Object.keys(b.shareWith ?? {}).length > 0 && <Share2 size={12} className="faint" aria-label="Shared" />}
+        </div>
+      ))}
+
+      <div className="nav-section">
+        <span>Shared with me</span>
+        <button
+          className="icon-btn sm"
+          title="Check for new shares"
+          aria-label="Check for new shares"
+          onClick={async () => { setRefreshing(true); await refreshShares(true); setRefreshing(false); }}
+        >
+          <RefreshCw size={14} className={refreshing ? "spin" : ""} />
+        </button>
+      </div>
+      {contacts.sharedBooks.map(({ accountId, accountName, book }) => (
+        <div
+          key={`${accountId}:${book.id}`}
+          className={`nav-item ${isOn(accountId, book.id) ? "active" : ""}`}
+          onClick={() => contacts.select({ accountId, bookId: book.id })}
+          title={`${book.name} — shared by ${accountName}`}
+        >
+          <BookOpen size={17} />
+          <span className="grow truncate">{book.name}</span>
+        </div>
+      ))}
+      {!contacts.sharedBooks.length && (
+        <p className="hint" style={{ padding: "4px 12px" }}>
+          {contacts.sharedLoaded ? "Nothing is shared with you." : "Looking…"}
+        </p>
+      )}
+
+      {/* Import and export lived in the pane this replaced. */}
+      <div style={{ padding: "12px 8px" }} className="col gap-8">
+        <label className="btn btn-sm btn-block">
+          <Upload size={14} /> Import vCard
+          <input type="file" accept=".vcf,text/vcard" hidden onChange={(e) => { const f = e.target.files?.[0]; if (f) onImport(f); e.target.value = ""; }} />
+        </label>
+        <button className="btn btn-sm btn-block" onClick={onExport}><Download size={14} /> Export {sel.bookId === "all" ? "all" : "book"}</button>
+      </div>
+
+      <Popover anchor={menu.anchor} onClose={menu.close} width={210}>
+        {menuBook && (
+          <>
+            <MenuItem
+              icon={<Pencil size={16} />}
+              label="Rename"
+              onClick={async () => {
+                const name = await promptDialog({ title: "Rename address book", defaultValue: menuBook.name });
+                if (!name?.trim() || name === menuBook.name) return;
+                try {
+                  await contacts.updateBook(menuBook.id, { name: name.trim() });
+                } catch (err) {
+                  toast.error((err as Error).message);
+                }
+              }}
+            />
+            <MenuItem icon={<Share2 size={16} />} label="Share…" disabled={!menuBook.myRights?.mayShare} onClick={() => setShare(menuBook)} />
+            <MenuSep />
+            <MenuItem
+              danger
+              icon={<Trash2 size={16} />}
+              label="Delete"
+              disabled={menuBook.isDefault}
+              onClick={async () => {
+                if (!(await confirmDialog({ title: `Delete “${menuBook.name}”?`, message: "The contacts in it go too.", confirmLabel: "Delete", danger: true }))) return;
+                try {
+                  await contacts.destroyBook(menuBook.id);
+                  if (sel.bookId === menuBook.id) contacts.select({ accountId: null, bookId: "all" });
+                } catch (err) {
+                  toast.error((err as Error).message);
+                }
+              }}
+            />
+          </>
+        )}
+      </Popover>
+      {share && <ShareDialog kind="AddressBook" id={share.id} name={share.name} shareWith={share.shareWith} onClose={() => setShare(null)} />}
+    </>
+  );
+}

web/src/views/contacts/ContactsView.tsx

@@ -1,17 +1,15 @@
 import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "wouter";
-import { ArrowLeft, Book, Download, Mail, MoreVertical, Pencil, Plus, Search, Share2, Trash2, Upload, Users, Phone, MapPin, Building2, Cake, StickyNote, Globe, Calendar as CalIcon, Star, Pin } from "lucide-react";
+import { ArrowLeft, Building2, Cake, Calendar as CalIcon, Download, Globe, Mail, MapPin, Pencil, Phone, Pin, Plus, Search, StickyNote, Trash2, Users } from "lucide-react";
 import { useContacts } from "@/store/contacts";
 import { useCompose } from "@/store/compose";
-import type { AddressBook, ContactCard } from "@/jmap/types";
+import type { ContactCard } from "@/jmap/types";
 import { contactDisplayName, contactEmails, contactPhoto, formatAddressLines, sortKey, toVCard } from "@/lib/contacts";
 import { formatDate, formatDateLong } from "@/lib/datetime";
 import { Avatar, Empty, Spinner, useIsNarrow } from "@/ui/misc";
-import { MenuItem, MenuSep, Popover, useMenu } from "@/ui/popover";
-import { confirmDialog, promptDialog } from "@/ui/dialog";
+import { confirmDialog } from "@/ui/dialog";
 import { toast } from "@/ui/toast";
 import { ContactEditor } from "./ContactEditor";
-import { ShareDialog } from "../settings/ShareDialog";
 import { avatarColor } from "@/lib/address";
 
 export function ContactsView({ id }: { id?: string }) {
@@ -19,11 +17,11 @@ export function ContactsView({ id }: { id?: string }) {
   const contacts = useContacts();
   const narrow = useIsNarrow();
   const [q, setQ] = useState("");
-  const [bookId, setBookId] = useState<string | "all">("all");
+  /* The book being shown lives in the store, because the list that chooses it
+     is the app's own sidebar rather than anything this view owns. */
+  const sel = contacts.selection;
+  const bookId = sel.bookId;
   const [editing, setEditing] = useState<Partial<ContactCard> | null>(null);
-  const [share, setShare] = useState<AddressBook | null>(null);
-  const bookMenu = useMenu();
-  const [menuBook, setMenuBook] = useState<AddressBook | null>(null);
   const openCompose = useCompose((s) => s.open);
 
   useEffect(() => {
@@ -33,16 +31,38 @@ export function ContactsView({ id }: { id?: string }) {
 
   useEffect(() => {
     const onNew = () => setEditing({});
+    const onImport = (ev: Event) => { const f = (ev as CustomEvent<File>).detail; if (f) void importFile(f); };
+    const onExport = () => exportAll();
     window.addEventListener("ihm:new-contact", onNew);
-    return () => window.removeEventListener("ihm:new-contact", onNew);
-  }, []);
+    window.addEventListener("ihm:contacts-import", onImport);
+    window.addEventListener("ihm:contacts-export", onExport);
+    return () => {
+      window.removeEventListener("ihm:new-contact", onNew);
+      window.removeEventListener("ihm:contacts-import", onImport);
+      window.removeEventListener("ihm:contacts-export", onExport);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  });
 
   const list = useMemo(() => {
+    // A shared book lists that account's cards; anything else lists the
+    // reader's own. They are never mixed: whose contacts you are looking at is
+    // the one thing this view must not be vague about.
+    if (sel.accountId) {
+      const prefix = `${sel.accountId}:`;
+      const theirs = Object.entries(contacts.sharedCards)
+        .filter(([key]) => key.startsWith(prefix))
+        .map(([, c]) => c)
+        .filter((c) => bookId === "all" || c.addressBookIds?.[bookId]);
+      return contacts.filterCards(theirs, q);
+    }
     const all = contacts.search(q);
     return bookId === "all" ? all : all.filter((c) => c.addressBookIds?.[bookId]);
-  }, [contacts, q, bookId]);
+  }, [contacts, q, bookId, sel.accountId]);
 
-  const selected = id ? contacts.cards[id] : undefined;
+  const selected = id
+    ? contacts.cards[id] ?? Object.entries(contacts.sharedCards).find(([key]) => key.endsWith(`:${id}`))?.[1]
+    : undefined;
   const books = Object.values(contacts.books).sort((a, b) => a.sortOrder - b.sortOrder || a.name.localeCompare(b.name));
   const groups = useMemo(() => {
     const out: Array<{ letter: string; items: ContactCard[] }> = [];
@@ -84,42 +104,6 @@ export function ContactsView({ id }: { id?: string }) {
 
   return (
     <div className={`contacts-layout ${selected || editing ? "detail" : ""}`}>
-      <aside className="contacts-books">
-        <button className={`nav-item ${bookId === "all" ? "active" : ""}`} style={{ width: "100%" }} onClick={() => setBookId("all")}>
-          <Users size={18} /><span className="nav-label">All contacts</span><span className="nav-count">{Object.keys(contacts.cards).length}</span>
-        </button>
-        <div className="nav-section"><span>Address books</span>
-          <button className="icon-btn" title="New address book" onClick={async () => { const n = await promptDialog({ title: "New address book", placeholder: "Name" }); if (n?.trim()) { try { await contacts.createBook(n.trim()); } catch (err) { toast.error((err as Error).message); } } }}><Plus size={16} /></button>
-        </div>
-        {books.map((b) => (
-          <button key={b.id} className={`nav-item ${bookId === b.id ? "active" : ""}`} style={{ width: "100%" }} onClick={() => setBookId(b.id)} onContextMenu={(e) => { e.preventDefault(); setMenuBook(b); bookMenu.openAt(e.clientX, e.clientY); }}>
-            <Book size={18} /><span className="nav-label">{b.name}</span>
-            <span className="icon-btn nav-more" onClick={(e) => { e.stopPropagation(); setMenuBook(b); bookMenu.open(e); }}><MoreVertical size={16} /></span>
-          </button>
-        ))}
-        <div style={{ padding: "12px 8px" }} className="col gap-8">
-          <label className="btn btn-sm btn-block"><Upload size={14} /> Import vCard<input type="file" accept=".vcf,text/vcard" hidden onChange={(e) => { const f = e.target.files?.[0]; if (f) void importFile(f); e.target.value = ""; }} /></label>
-          <button className="btn btn-sm btn-block" onClick={exportAll}><Download size={14} /> Export {bookId === "all" ? "all" : "book"}</button>
-        </div>
-        <Popover anchor={bookMenu.anchor} onClose={bookMenu.close} width={220}>
-          {menuBook && (
-            <>
-              <MenuItem icon={<Pencil size={16} />} label="Rename" onClick={async () => { const n = await promptDialog({ title: "Rename address book", defaultValue: menuBook.name }); if (n?.trim()) void contacts.updateBook(menuBook.id, { name: n.trim() }).catch((err) => toast.error((err as Error).message)); }} />
-              {/* Withdrawn alongside mail folder sharing, on a report that it
-                  behaved the same way -- which was never reproduced, and which
-                  Stalwart's own docs contradict, since address books are listed
-                  as shareable. Expected back once two accounts have confirmed a
-                  book actually arrives. Clearing one still works. */}
-              {Object.keys(menuBook.shareWith ?? {}).length > 0 && (
-                <MenuItem icon={<Share2 size={16} />} label="Stop sharing" onClick={() => setShare(menuBook)} />
-              )}
-              <MenuItem icon={<Star size={16} />} label={menuBook.isDefault ? "Default book" : "Make default"} disabled={menuBook.isDefault} onClick={() => void contacts.updateBook(menuBook.id, { isDefault: true } as Partial<AddressBook>).catch((err) => toast.error((err as Error).message))} />
-              <MenuSep />
-              <MenuItem danger icon={<Trash2 size={16} />} label="Delete" disabled={!menuBook.myRights.mayDelete} onClick={async () => { if (await confirmDialog({ title: `Delete “${menuBook.name}”?`, message: "All contacts in it will be deleted.", confirmLabel: "Delete", danger: true })) void contacts.destroyBook(menuBook.id).catch((err) => toast.error((err as Error).message)); }} />
-            </>
-          )}
-        </Popover>
-      </aside>
 
       <section className="contacts-list">
         <div className="list-search row">
@@ -161,7 +145,6 @@ export function ContactsView({ id }: { id?: string }) {
         )}
       </section>
       {editing && <ContactEditor card={editing} defaultBookId={bookId !== "all" ? bookId : (books.find((b) => b.isDefault)?.id ?? books[0]?.id ?? null)} onClose={() => setEditing(null)} onSaved={(cid) => { setEditing(null); navigate(`/contacts/${cid}`); }} />}
-      {share && <ShareDialog kind="AddressBook" id={share.id} name={share.name} shareWith={share.shareWith} onClose={() => setShare(null)} />}
     </div>
   );
 }