@remit/web-client 0.0.161 → 0.0.163

package/src/components/mail/conversation-reply-reach.render.test.ts

@@ -1,15 +1,13 @@
 /**
  * Reading a message and answering it, on a desktop pane.
  *
- * The inline reply was held below the conversation rather than inside it. It
- * took whatever height the message left over, which on a normal-length one is
- * nothing: the recipient rows and the verbs stayed, the writing area went down
- * to a couple of lines, and scrolling the message could not reach it because
- * the thing to reach was already on screen and squeezed.
+ * The reply leads the pane and the thread reads newest first under it, so what
+ * is being written and the turn it answers are the two things at the top. Both
+ * live in the pane's own scrolling region: the reply has no height of its own
+ * and no scroller of its own, which is what kept a second scrollbar — with the
+ * caret in the inner one — out of a single column.
  *
- * The reply belongs to the conversation and scrolls with it, and the chevron
- * beside the sender is the control that puts a message away — reclaiming the
- * space is what a reader reaches for it to do.
+ * The chevron beside the sender is the control that puts a message away.
  */
 
 import assert from "node:assert/strict";
@@ -41,6 +39,24 @@ const MESSAGE_ID = "msg-1";
 
 const account = makeAccount({ accountId: ACCOUNT_ID });
 
+const OPENING_SENT = 1_767_139_200_000;
+const LATEST_SENT = 1_767_225_600_000;
+
+// The turn that opened the conversation, and the one that answered it. The API
+// hands them over oldest first (#81), which is the order this mock serves them
+// in — the pane is what decides which end of that goes at the top.
+const openingMessage: RemitImapThreadMessageResponse = makeThreadMessage({
+	messageId: "msg-0",
+	threadId: THREAD_ID,
+	mailboxId: MAILBOX_ID,
+	accountId: ACCOUNT_ID,
+	subject: "Lunch Thursday?",
+	fromName: "Grace Hopper",
+	fromEmail: "grace@example.com",
+	sentDate: OPENING_SENT,
+	isRead: true,
+});
+
 const threadMessage: RemitImapThreadMessageResponse = makeThreadMessage({
 	messageId: MESSAGE_ID,
 	threadId: THREAD_ID,
@@ -49,6 +65,7 @@ const threadMessage: RemitImapThreadMessageResponse = makeThreadMessage({
 	subject: "Lunch Thursday?",
 	fromName: "Ada Lovelace",
 	fromEmail: "ada@example.com",
+	sentDate: LATEST_SENT,
 	// Already read: marking one read on open is a mutation this test has no
 	// business driving.
 	isRead: true,
@@ -141,7 +158,7 @@ const mount = async (): Promise<DomHarness> => {
 	http = mockFetch((call) => {
 		if (call.path.endsWith("/config")) return { accounts: [account] };
 		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
-			return { items: [threadMessage] };
+			return { items: [openingMessage, threadMessage] };
 		}
 		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) return describeMessage;
 		return { items: [] };
@@ -176,6 +193,35 @@ const pressReply = async (mounted: DomHarness): Promise<void> => {
 const paneRegionHolding = (pane: Element, node: Node): Element | null =>
 	[...pane.children].find((child) => child.contains(node)) ?? null;
 
+/**
+ * The utilities that make an element scroll vertically. A horizontal one — the
+ * formatting toolbar's strip of buttons — is a different thing and is not
+ * counted: it holds a row that would otherwise be cut off, not a column of
+ * content the reader moves through.
+ */
+const SCROLLS_VERTICALLY = /(^|\s)overflow-(auto|scroll|y-auto|y-scroll)(\s|$)/;
+
+/** The inset ring `MessageCard` draws on the row the keyboard is sitting on. */
+const FOCUS_RING = /ring-accent\//;
+
+/** The turn the keyboard has, read off the ring rather than off the index. */
+const focusedTurn = (mounted: DomHarness): string => {
+	const thread = mounted.query('[data-testid="conversation-messages"]');
+	assert.ok(thread, "the thread is on screen");
+	const focused = [...thread.children].filter((card) =>
+		[...card.querySelectorAll("*")].some((node) =>
+			FOCUS_RING.test(node.getAttribute("class") ?? ""),
+		),
+	);
+	assert.equal(focused.length, 1, "one turn carries the keyboard focus");
+	return focused[0]?.textContent ?? "";
+};
+
+const verticalScrollers = (root: Element): Element[] =>
+	[root, ...root.querySelectorAll("*")].filter((node) =>
+		SCROLLS_VERTICALLY.test(node.getAttribute("class") ?? ""),
+	);
+
 describe("answering the message that is open", () => {
 	it("puts the reply in the same scrolling region as the message", async () => {
 		const mounted = await mount();
@@ -199,6 +245,94 @@ describe("answering the message that is open", () => {
 		);
 	});
 
+	it("leads the pane with the reply, above the thread it answers", async () => {
+		const mounted = await mount();
+
+		await pressReply(mounted);
+
+		const compose = mounted.query('[data-testid="compose-body-area"]');
+		assert.ok(compose, "the reply opened");
+
+		const thread = mounted.query('[data-testid="conversation-messages"]');
+		assert.ok(thread, "the thread is on screen");
+
+		const following = mounted.window.Node.DOCUMENT_POSITION_FOLLOWING;
+		assert.ok(
+			(compose.compareDocumentPosition(thread) & following) === following,
+			"the reply comes before the messages, not after the last of them",
+		);
+	});
+
+	it("reads the thread newest first", async () => {
+		const mounted = await mount();
+
+		const thread = mounted.query('[data-testid="conversation-messages"]');
+		assert.ok(thread, "the thread is on screen");
+
+		const cards = [...thread.children].map((card) => card.textContent ?? "");
+		assert.equal(cards.length, 2, "both turns are on screen");
+		assert.ok(
+			cards[0]?.includes("Ada Lovelace"),
+			"the turn that answered the conversation is at the top",
+		);
+		assert.ok(
+			cards[1]?.includes("Grace Hopper"),
+			"the turn that opened it is below",
+		);
+	});
+
+	it("walks the thread with j and k in the order it is displayed in", async () => {
+		const mounted = await mount();
+
+		assert.ok(
+			focusedTurn(mounted).includes("Ada Lovelace"),
+			"the keyboard starts on the turn at the top, which is the latest one",
+		);
+
+		const press = async (key: string): Promise<void> => {
+			mounted.dispatch(
+				mounted.window,
+				new mounted.window.KeyboardEvent("keydown", { key, bubbles: true }),
+			);
+			await mounted.flush();
+		};
+
+		// Down the pane is back in time now that the thread reads newest first.
+		// A reorder that left the handlers alone would invert this silently, and
+		// the help overlay describes the same direction this asserts.
+		await press("j");
+		assert.ok(
+			focusedTurn(mounted).includes("Grace Hopper"),
+			"j moves to the turn below, which is the older one",
+		);
+
+		await press("k");
+		assert.ok(
+			focusedTurn(mounted).includes("Ada Lovelace"),
+			"k moves to the turn above, which is the newer one",
+		);
+	});
+
+	it("gives the pane one scrollbar, reply open or not", async () => {
+		const mounted = await mount();
+
+		const pane = mounted.query("article");
+		assert.ok(pane, "the conversation pane is mounted");
+		assert.equal(
+			verticalScrollers(pane).length,
+			1,
+			"reading a thread scrolls one thing",
+		);
+
+		await pressReply(mounted);
+
+		assert.equal(
+			verticalScrollers(pane).length,
+			1,
+			"the reply is a block of the pane, not a box with a scrollbar of its own next to the editor",
+		);
+	});
+
 	it("collapses the message from the chevron beside the sender", async () => {
 		const mounted = await mount();
 
@@ -215,9 +349,10 @@ describe("answering the message that is open", () => {
 			mounted.query('[aria-label="Collapse message"]') === null,
 			"the chevron collapsed the message it belongs to",
 		);
-		assert.ok(
-			mounted.query('[role="button"][aria-expanded="false"]'),
-			"the message is back to a collapsed row",
+		assert.equal(
+			mounted.queryAll('[role="button"][aria-expanded="false"]').length,
+			2,
+			"the message is back to a collapsed row, beside the one that was already collapsed",
 		);
 	});
 });

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -22,6 +22,8 @@ export const KeyboardShortcutsModal = ({
 		(event: KeyboardEvent) => {
 			if (event.key === "Escape") {
 				event.preventDefault();
+				event.stopPropagation();
+				event.stopImmediatePropagation();
 				onClose();
 			}
 		},
@@ -30,8 +32,11 @@ export const KeyboardShortcutsModal = ({
 
 	useEffect(() => {
 		if (!isOpen) return;
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
+		// Capture phase, as `ConfirmDialog` does: the sheet is the topmost surface,
+		// so Escape dismisses it and nothing else. Shared with the list's own
+		// Escape, the one keystroke also closed the conversation underneath.
+		window.addEventListener("keydown", handleKeyDown, true);
+		return () => window.removeEventListener("keydown", handleKeyDown, true);
 	}, [isOpen, handleKeyDown]);
 
 	if (!isOpen) return null;

package/src/hooks/search-mirror-detail.render.test.ts

@@ -65,7 +65,6 @@ const mailContext = (
 	onSearchClearQuery: () => {},
 	intelligenceOpen: false,
 	onToggleIntelligence: () => {},
-	onSetIntelligenceOpen: () => {},
 });
 
 type ListPath = "/mail/brief" | "/mail/flagged";

package/src/hooks/useSearchMirror.ts

@@ -71,16 +71,24 @@ export function useSearchMirror(target: SearchMirrorTarget): void {
 			...prev,
 			q: committedQuery || undefined,
 		});
+		// A query is a mode of the view the reader is already in, so the panels
+		// they have up are not ones they navigated away from.
 		if (!queryGoesActive) {
-			navigate({ to: ".", search, replace: true });
+			navigate({ to: ".", search, hash: true, replace: true });
 			return;
 		}
 		if (to === "/mail/$mailboxId") {
 			if (!mailboxId) return;
-			navigate({ to, params: { mailboxId }, search, replace: true });
+			navigate({
+				to,
+				params: { mailboxId },
+				search,
+				hash: true,
+				replace: true,
+			});
 			return;
 		}
-		navigate({ to, search, replace: true });
+		navigate({ to, search, hash: true, replace: true });
 	}, [
 		searchInput,
 		committedQuery,

package/src/lib/intelligence-pref.test.ts

@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { afterEach, beforeEach, describe, it } from "node:test";
 import {
 	readIntelligencePref,
+	resolveRailOpen,
 	writeIntelligencePref,
 } from "./intelligence-pref.js";
 
@@ -55,3 +56,79 @@ describe("intelligence-pref (#782)", () => {
 		assert.doesNotThrow(() => writeIntelligencePref(false));
 	});
 });
+
+describe("resolveRailOpen (#722)", () => {
+	const withThread = { hasThread: true, isDesktop: true };
+
+	it("opens the rail with the thread where the address says nothing", () => {
+		assert.equal(
+			resolveRailOpen({ ...withThread, panels: [], prefersOpen: true }),
+			true,
+		);
+	});
+
+	it("leaves the rail down where the address says nothing and the reader collapsed it", () => {
+		assert.equal(
+			resolveRailOpen({ ...withThread, panels: [], prefersOpen: false }),
+			false,
+		);
+	});
+
+	it("never seeds the rail below the tier that has one", () => {
+		assert.equal(
+			resolveRailOpen({
+				panels: [],
+				prefersOpen: true,
+				isDesktop: false,
+				hasThread: true,
+			}),
+			false,
+		);
+	});
+
+	// Otherwise the address claims a pane the shell has nothing to put in it.
+	it("never seeds the rail with no conversation open", () => {
+		assert.equal(
+			resolveRailOpen({
+				panels: [],
+				prefersOpen: true,
+				isDesktop: true,
+				hasThread: false,
+			}),
+			false,
+		);
+	});
+
+	// A shared link naming another panel is an address that has spoken: the
+	// recipient's own preference does not get to add the rail to it.
+	it("hands a shared link's panels to the reader who opened it", () => {
+		assert.equal(
+			resolveRailOpen({
+				...withThread,
+				panels: ["shortcuts"],
+				prefersOpen: true,
+			}),
+			false,
+		);
+		assert.equal(
+			resolveRailOpen({
+				...withThread,
+				panels: ["intelligence", "shortcuts"],
+				prefersOpen: false,
+			}),
+			true,
+		);
+	});
+
+	it("opens the rail from an address on any tier", () => {
+		assert.equal(
+			resolveRailOpen({
+				panels: ["intelligence"],
+				prefersOpen: false,
+				isDesktop: false,
+				hasThread: true,
+			}),
+			true,
+		);
+	});
+});

package/src/lib/intelligence-pref.ts

@@ -1,10 +1,12 @@
 /**
- * Persistence for the intelligence-pane open/closed preference (#782).
+ * Persistence for the intelligence-pane open/closed preference (#782), and the
+ * precedence between it and the address (#722).
  *
  * The pane opens with the thread by default; a manual collapse sticks across
  * sessions. Storage failures (private mode / quota) fall back to the default
  * (open) rather than crashing.
  */
+import type { PanelFragment } from "@/routing";
 
 export const INTELLIGENCE_PREF_KEY = "remit:intelligence-open";
 
@@ -23,3 +25,33 @@ export function writeIntelligencePref(open: boolean): void {
 		// Storage unavailable — the in-memory default stands.
 	}
 }
+
+export interface RailVisibility {
+	/** The panels the address names. */
+	panels: readonly PanelFragment[];
+	prefersOpen: boolean;
+	/** The rail is a pane of the desktop shell; narrower tiers have a drawer. */
+	isDesktop: boolean;
+	/** The rail reads a conversation, so with none open there is nothing to be up. */
+	hasThread: boolean;
+}
+
+/**
+ * Whether the rail is up.
+ *
+ * An address that names any panel is the only owner of what is open, so a
+ * shared link showing the shortcuts sheet is not overwritten by the recipient's
+ * own preference. The preference speaks only where the address is silent, and
+ * only with a conversation open on the tier that has a rail — it opens with the
+ * thread there (#782), while a phone would get a full-screen drawer over a
+ * message nobody asked to cover.
+ */
+export function resolveRailOpen({
+	panels,
+	prefersOpen,
+	isDesktop,
+	hasThread,
+}: RailVisibility): boolean {
+	if (panels.length > 0) return panels.includes("intelligence");
+	return isDesktop && hasThread && prefersOpen;
+}

package/src/lib/mail-context.ts

@@ -47,13 +47,14 @@ export interface MailContextValue {
 	onSearchClear: () => void;
 	/** Query-only clear (Esc): drops the query, keeps the thread open (#489). */
 	onSearchClearQuery: () => void;
-	/** Pane 4 (intelligence) visibility. The shared toggle starts closed; the
-	 *  desktop route opens it by default with the thread, honouring the stored
-	 *  preference (#782). */
+	/**
+	 * Whether pane 4 (intelligence) is up. Resolved once by the `/mail` layout
+	 * from the address and this device's preference (`resolveRailOpen`), and
+	 * handed down as the answer — a consumer re-deriving it from the fragment
+	 * alone would lose the preference and disagree with the shell.
+	 */
 	intelligenceOpen: boolean;
 	onToggleIntelligence: () => void;
-	/** Set the pane open/closed and persist the choice (desktop default-open). */
-	onSetIntelligenceOpen: (open: boolean) => void;
 }
 
 export const MailContext = createContext<MailContextValue | null>(null);
@@ -77,7 +78,6 @@ export const useMailContext = (): MailContextValue => {
 			onSearchClearQuery: () => {},
 			intelligenceOpen: false,
 			onToggleIntelligence: () => {},
-			onSetIntelligenceOpen: () => {},
 		}
 	);
 };

package/src/routes/mail.tsx

@@ -27,13 +27,24 @@ import { useMailboxNameIndex } from "@/hooks/useMailboxNameIndex";
 import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
 import { useStaleAccountSync } from "@/hooks/useStaleAccountSync";
 import { hostsComposeSurface } from "@/lib/compose-routes";
-import { writeIntelligencePref } from "@/lib/intelligence-pref";
+import {
+	readIntelligencePref,
+	resolveRailOpen,
+	writeIntelligencePref,
+} from "@/lib/intelligence-pref";
 import { MailContext } from "@/lib/mail-context";
 import { MailFreshnessProvider } from "@/lib/mail-freshness";
 import { mailViewKey } from "@/lib/mail-route";
 import { buildAccountNameIndex } from "@/lib/search-token-index";
 import { committedSearchQuery, searchInputForView } from "@/lib/search-view";
 import { wizardEntryValue, wizardStepValue } from "@/lib/wizard-history";
+import {
+	isOverlayPanel,
+	type OverlayPanel,
+	useOpenPanels,
+	useOpenThreadPath,
+	useSetOpenPanels,
+} from "@/routing";
 import "@/lib/client";
 
 // `MailContext` / `useMailContext` live in `@/lib/mail-context` so the provider
@@ -79,19 +90,56 @@ function MailLayout() {
 	// tablet with no compose surface (compose lives in the reading pane, which
 	// tablet doesn't mount) — the "c" shortcut / FAB opened nothing.
 	const isSinglePane = isSinglePaneTier(tier);
-	const [showShortcuts, setShowShortcuts] = useState(false);
-	const [drawerOpen, setDrawerOpen] = useState(false);
-	// Pane 4 / the mobile details drawer share this toggle. It starts closed so
-	// the phone never slams a full-screen intelligence drawer over a freshly
-	// opened thread; the DESKTOP route opens it by default with the thread (the
-	// intelligence rail is the product's core value) and honours the persisted
-	// collapse preference there (#782). DKIM-mismatch auto-open still fires on
-	// every tier. Explicit toggles persist the user's choice.
-	const [intelligenceOpen, setIntelligenceOpen] = useState(false);
-	const handleSetIntelligenceOpen = useCallback((open: boolean) => {
-		setIntelligenceOpen(open);
-		writeIntelligencePref(open);
-	}, []);
+	// The panels the address carries (#722): the intelligence rail, the nav
+	// slide-over and the shortcuts sheet. The rail is a pane and the other two
+	// cover it, so the address holds a pane and an overlay at once — a sheet
+	// opening never takes the rail down — while two overlays cannot both be up.
+	const openPanels = useOpenPanels();
+	const setOpenPanels = useSetOpenPanels();
+	const openOverlay = openPanels.find(isOverlayPanel);
+	const showShortcuts = openOverlay === "shortcuts";
+	const drawerOpen = openOverlay === "nav";
+	// Pane 4 on desktop, the details drawer below it. `resolveRailOpen` is the
+	// one place the address and the stored preference meet: the address decides
+	// whenever it says anything at all, and the preference opens the rail with
+	// the thread where it is silent (#782).
+	const openThread = useOpenThreadPath();
+	// Held in state, not read back from storage each render: closing the rail
+	// where the address is silent changes nothing about the address, and the
+	// answer has to move anyway.
+	const [prefersRail, setPrefersRail] = useState(readIntelligencePref);
+	const intelligenceOpen = resolveRailOpen({
+		panels: openPanels,
+		prefersOpen: prefersRail,
+		isDesktop: tier === "desktop",
+		hasThread: openThread !== undefined,
+	});
+	// Every write states the whole set, because it is composed from what is
+	// showing rather than from what the address happens to spell: the rail open
+	// by preference alone is still open, and an overlay must not close it.
+	const showPanels = useCallback(
+		(rail: boolean, overlay: OverlayPanel | undefined) => {
+			setOpenPanels([
+				...(rail ? (["intelligence"] as const) : []),
+				...(overlay ? [overlay] : []),
+			]);
+		},
+		[setOpenPanels],
+	);
+	const handleSetIntelligenceOpen = useCallback(
+		(open: boolean) => {
+			writeIntelligencePref(open);
+			setPrefersRail(open);
+			showPanels(open, openOverlay);
+		},
+		[openOverlay, showPanels],
+	);
+	const showOverlay = useCallback(
+		(overlay: OverlayPanel | undefined) => {
+			showPanels(intelligenceOpen, overlay);
+		},
+		[intelligenceOpen, showPanels],
+	);
 
 	// Within one view, URL `q` seeds the input and is a one-directional write
 	// target: the debounced local value drives the search API and is mirrored
@@ -157,7 +205,7 @@ function MailLayout() {
 		bindings: [
 			{
 				key: "?",
-				handler: () => setShowShortcuts(true),
+				handler: () => showOverlay("shortcuts"),
 				noModifiers: false, // Allow shift+/
 				preventDefault: true,
 			},
@@ -193,12 +241,8 @@ function MailLayout() {
 	}, []);
 
 	const handleToggleIntelligence = useCallback(() => {
-		setIntelligenceOpen((open) => {
-			const next = !open;
-			writeIntelligencePref(next);
-			return next;
-		});
-	}, []);
+		handleSetIntelligenceOpen(!intelligenceOpen);
+	}, [handleSetIntelligenceOpen, intelligenceOpen]);
 
 	const accounts = config?.accounts ?? [];
 	const accountIds = useMemo(
@@ -218,11 +262,12 @@ function MailLayout() {
 	useStaleAccountSync(accounts);
 
 	const handleMailboxSelect = useCallback(() => {
-		// Auto-collapse the mobile drawer after the user picks an inbox
-		// from the sidebar (#199). Desktop sidebar isn't a drawer so the
-		// noop is fine there.
-		setDrawerOpen(false);
-	}, []);
+		// Auto-collapse the mobile drawer after the user picks an inbox from the
+		// sidebar (#199). Above the slide-over the sidebar is a pane, and there is
+		// no overlay of its own to take down.
+		if (openOverlay !== "nav") return;
+		showOverlay(undefined);
+	}, [openOverlay, showOverlay]);
 
 	const mailContextValue = {
 		accounts,
@@ -239,7 +284,6 @@ function MailLayout() {
 		onSearchClearQuery: handleSearchClearQuery,
 		intelligenceOpen,
 		onToggleIntelligence: handleToggleIntelligence,
-		onSetIntelligenceOpen: handleSetIntelligenceOpen,
 	};
 
 	// Single nav node: the kit renders it as a pane (≥1024px) or inside its
@@ -259,8 +303,8 @@ function MailLayout() {
 		// top bar owns compose.
 		overlay: isSinglePane ? <ComposeFab /> : undefined,
 		navOpen: drawerOpen,
-		onOpenNav: () => setDrawerOpen(true),
-		onCloseNav: () => setDrawerOpen(false),
+		onOpenNav: () => showOverlay("nav"),
+		onCloseNav: () => showOverlay(undefined),
 	};
 
 	return (
@@ -284,7 +328,7 @@ function MailLayout() {
 				)}
 				<KeyboardShortcutsModal
 					isOpen={showShortcuts}
-					onClose={() => setShowShortcuts(false)}
+					onClose={() => showOverlay(undefined)}
 				/>
 			</MailFreshnessProvider>
 		</MailContext.Provider>

package/src/routing/fragment.test.ts

@@ -0,0 +1,68 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	formatOpenPanels,
+	panelFragments,
+	parseOpenPanels,
+	retainOpenPanels,
+} from "./fragment.js";
+
+describe("parseOpenPanels", () => {
+	it("reads every panel the union names", () => {
+		for (const panel of panelFragments) {
+			assert.deepEqual(parseOpenPanels(panel), [panel]);
+		}
+	});
+
+	it("reads a pane and an overlay together", () => {
+		assert.deepEqual(parseOpenPanels("intelligence,shortcuts"), [
+			"intelligence",
+			"shortcuts",
+		]);
+	});
+
+	it("spells one set of panels one way", () => {
+		assert.deepEqual(parseOpenPanels("shortcuts,intelligence,shortcuts"), [
+			"intelligence",
+			"shortcuts",
+		]);
+	});
+
+	it("reads an empty, unknown or mis-cased fragment as no panel", () => {
+		assert.deepEqual(parseOpenPanels(""), []);
+		assert.deepEqual(parseOpenPanels("confirm-delete"), []);
+		assert.deepEqual(parseOpenPanels("Intelligence"), []);
+		assert.deepEqual(parseOpenPanels("form:input:to"), []);
+	});
+
+	it("keeps the panels it recognises out of a fragment carrying junk", () => {
+		assert.deepEqual(parseOpenPanels("filters,intelligence"), ["intelligence"]);
+	});
+});
+
+describe("formatOpenPanels", () => {
+	it("writes the address a set of panels is read back from", () => {
+		assert.equal(
+			formatOpenPanels(["shortcuts", "intelligence"]),
+			"intelligence,shortcuts",
+		);
+		assert.equal(formatOpenPanels([]), "");
+	});
+});
+
+describe("retainOpenPanels", () => {
+	it("carries a pane across a navigation", () => {
+		assert.equal(retainOpenPanels("intelligence"), "intelligence");
+	});
+
+	it("leaves the overlays behind, and keeps the pane under them", () => {
+		assert.equal(retainOpenPanels("nav"), "");
+		assert.equal(retainOpenPanels("shortcuts"), "");
+		assert.equal(retainOpenPanels("intelligence,shortcuts"), "intelligence");
+	});
+
+	it("drops a fragment it does not recognise rather than passing it on", () => {
+		assert.equal(retainOpenPanels(), "");
+		assert.equal(retainOpenPanels("confirm-delete"), "");
+	});
+});