@remit/ui 0.0.91 → 0.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.91",
+  "version": "0.0.93",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell-types.ts

@@ -104,6 +104,21 @@ export interface MessageListKeyboard {
 	ref: (element: HTMLElement | null) => void;
 }
 
+/**
+ * Whether a layer answers the cursor keys, and so walks the rows itself. A list
+ * under one stands its own roving-focus group down: both own the arrows, and
+ * the group stops the press before the layer above hears it.
+ */
+export function keyboardWalksRows(
+	keyboard: MessageListKeyboard | undefined,
+): keyboard is MessageListKeyboard {
+	if (keyboard === undefined) return false;
+	return (
+		keyboard.handlers.focusNext !== undefined &&
+		keyboard.handlers.focusPrevious !== undefined
+	);
+}
+
 /**
  * Measures an element's OWN width via ResizeObserver — a container query, not a
  * viewport one. The shell reflows by the space it actually occupies (so it works

package/src/components/auto-moved-badge.stories.tsx

@@ -36,6 +36,19 @@ export const FilterMoveWithManageLink: Story = {
 	},
 };
 
+/**
+ * A user-reported spam message (issue #648). Independent of the classifier/
+ * filter-move shapes above: the badge follows the message wherever it now
+ * lives, including a report that never moved the message at all (it was
+ * already in Junk).
+ */
+export const ReportedAsSpam: Story = {
+	args: {
+		label: "Reported as spam",
+		onUndo: () => alert("Undo"),
+	},
+};
+
 export const SideBySide: Story = {
 	render: () => (
 		<div className="flex flex-col items-start gap-3">

package/src/components/brief-sections.keyboard.test.ts

@@ -5,9 +5,13 @@
 import assert from "node:assert/strict";
 import { after, afterEach, before, beforeEach, describe, it } from "node:test";
 import type { JSDOM } from "jsdom";
-import { act, createElement } from "react";
+import { act, createElement, useMemo } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { LIST_ROW_SELECTOR } from "../lib/roving-focus.js";
+import {
+	type ListKeyboard,
+	useListKeyboard,
+} from "../lib/use-list-keyboard.js";
 import type { ThreadSection } from "./app-shell-types.js";
 import { BriefSections } from "./brief-sections.js";
 import { ComfortableRow } from "./message-row.js";
@@ -99,9 +103,9 @@ afterEach(() => {
 	});
 });
 
-function pressKey(target: Element, key: string) {
+function pressKey(target: Element, key: string, shiftKey = false) {
 	target.dispatchEvent(
-		new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
+		new dom.window.KeyboardEvent("keydown", { key, bubbles: true, shiftKey }),
 	);
 }
 
@@ -173,3 +177,87 @@ describe("BriefSections arrow-key traversal", () => {
 		assert.equal(dom.window.document.activeElement, items[2]);
 	});
 });
+
+const orderedIds = sections.flatMap((section) =>
+	section.threads.map((thread) => thread.id),
+);
+
+let list: ListKeyboard | undefined;
+
+function BriefUnderLayer() {
+	const ids = useMemo(() => orderedIds, []);
+	const keyboard = useListKeyboard({
+		orderedIds: ids,
+		isDesktop: true,
+		initialFocusedId: "t1",
+	});
+	list = keyboard;
+	return createElement(
+		"div",
+		{ ref: keyboard.keyboard.ref, tabIndex: -1 },
+		createElement(BriefSections, {
+			sections,
+			Row: ComfortableRow,
+			keyboard: keyboard.keyboard,
+			onSelectThread: () => undefined,
+			onSelectBriefCategory: () => undefined,
+		}),
+	);
+}
+
+function mountUnderLayer() {
+	act(() => {
+		root.render(createElement(BriefUnderLayer));
+	});
+}
+
+function selectedIds(): string[] {
+	return Array.from(list?.selection.selectedIds ?? []).sort();
+}
+
+describe("BriefSections under a keyboard layer", () => {
+	it("Shift+ArrowDown extends the selection down the rows", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown", true));
+		act(() => pressKey(items[0] as Element, "ArrowDown", true));
+
+		assert.deepEqual(selectedIds(), ["t2", "t3"]);
+	});
+
+	it("Shift+ArrowUp extends the selection back up the rows", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown"));
+		act(() => pressKey(items[0] as Element, "ArrowDown"));
+		act(() => pressKey(items[0] as Element, "ArrowUp", true));
+		act(() => pressKey(items[0] as Element, "ArrowUp", true));
+
+		assert.deepEqual(selectedIds(), ["t1", "t2"]);
+	});
+
+	it("Shift+ArrowDown selects the rows Shift+J does", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "j", true));
+		act(() => pressKey(items[0] as Element, "j", true));
+
+		assert.deepEqual(selectedIds(), ["t2", "t3"]);
+	});
+
+	it("hands the bare arrows to the layer instead of walking the rows itself", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown"));
+
+		assert.equal(list?.cursor.focusedMessageId, "t2");
+	});
+});

package/src/components/brief-sections.tsx

@@ -2,10 +2,15 @@ import { useRef, useState } from "react";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import type {
 	BriefCategoryFilter,
+	MessageListKeyboard,
 	ThreadRowData,
 	ThreadSection,
 } from "./app-shell-types.js";
-import { briefCategories, categoryTone } from "./app-shell-types.js";
+import {
+	briefCategories,
+	categoryTone,
+	keyboardWalksRows,
+} from "./app-shell-types.js";
 import { BriefSection } from "./brief-section.js";
 import {
 	FilterSheet,
@@ -135,6 +140,13 @@ interface BriefSectionsBaseProps
 	sections: ThreadSection[];
 	selectedThreadId?: string;
 	Row: BriefRowComponent;
+	/**
+	 * The keyboard layer walking the rows, when the caller mounts one. The rows
+	 * hand it the cursor keys rather than traversing with a roving group of their
+	 * own, so the ring and the cursor name one row and a Shift+arrow range
+	 * reaches the layer that extends it.
+	 */
+	keyboard?: MessageListKeyboard;
 	onSelectThread?: (id: string) => void;
 	/**
 	 * Drop the filter row and its panel, keeping the rows where they are. See
@@ -160,6 +172,7 @@ export function BriefSections({
 	briefCategory = "all",
 	selectedThreadId,
 	Row,
+	keyboard,
 	onSelectThread,
 	onSelectBriefCategory,
 	sources,
@@ -179,6 +192,7 @@ export function BriefSections({
 	useRovingFocus({
 		containerRef: listRef,
 		itemSelector: LIST_ROW_SELECTOR,
+		enabled: !keyboardWalksRows(keyboard),
 	});
 
 	const active = activeFilters ?? ownFilters;

package/src/components/intelligence-panel.stories.tsx

@@ -198,31 +198,70 @@ export const WithSimilarMessages: Story = {
 };
 
 /**
- * The spam quick actions are symmetric and mutually exclusive, decided by the
- * mailbox the message is in. A message sitting in Junk is offered the way out.
+ * The spam quick actions are a contextual pair, decided by whether the message
+ * carries a spam report — never by the mailbox it happens to sit in, since a
+ * report on a message already in Junk (the provider's own filter put it there)
+ * is a real, no-op-move case (issue #648). A reportable message offers
+ * "Report spam".
  */
-export const InJunk: Story = {
+export const Reportable: Story = {
 	args: {
 		data: base,
-		actions: { onNotSpam: () => {} },
+		actions: { onReportSpam: () => {} },
 	},
 };
 
-/** The inverse, for a message anywhere else. */
-export const OutsideJunk: Story = {
+/**
+ * Already reported: "Not spam" (the undo) is offered instead of "Report
+ * spam", and the panel names the message as reported. Driven by
+ * `actions.onNotSpam` being present, not by `flags.blocked` — a sender can be
+ * blocked manually, with no report on this particular message, and that must
+ * not read as "you reported this" (issue #648 review).
+ */
+export const Reported: Story = {
 	args: {
 		data: base,
-		actions: { onMarkSpam: () => {} },
+		actions: { onNotSpam: () => {} },
 	},
 };
 
 /**
- * The move has been made. Neither action is offered: pressing the one that just
- * ran would ask the mail server to move the message to where it already is.
+ * Neither action is offered. The panel hides the pair rather than disabling
+ * it — unlike VIP/Mute/Unsubscribe, which always render and go visibly
+ * unavailable with no handler (issue #51). The host's own wiring never
+ * actually reaches this: `resolveSpamAction` always returns one of the two,
+ * since every message either carries a spam report or doesn't. Kept as a
+ * defensive state for a host that doesn't wire the pair at all.
  */
-export const SpamActionSpent: Story = {
+export const SpamActionUnavailable: Story = {
 	args: {
 		data: base,
 		actions: {},
 	},
 };
+
+/**
+ * A "Report spam" press in flight. There's no optimistic update for this
+ * action (a report against a message already in Junk is a real no-op-move,
+ * issue #648), so without a pending label the button gives no visible
+ * response at all until the request lands — the dead-button failure the
+ * coding standards call the worst outcome. The button stays clickable
+ * throughout, same as the undo direction's `isUndoing`: the operation is
+ * idempotent, so a second press is safe, never a queued duplicate.
+ */
+export const ReportSpamPending: Story = {
+	args: {
+		data: base,
+		actions: { onReportSpam: () => {} },
+		reportSpamPending: true,
+	},
+};
+
+/** The undo direction's equivalent — "Undoing…" while `notSpam` is in flight. */
+export const NotSpamPending: Story = {
+	args: {
+		data: base,
+		actions: { onNotSpam: () => {} },
+		notSpamPending: true,
+	},
+};

package/src/components/intelligence-panel.tsx

@@ -1,5 +1,4 @@
 import {
-	Ban,
 	BellOff,
 	MailCheck,
 	MailX,
@@ -112,6 +111,16 @@ export type SimilarMessageLinkComponent = (
 export interface SenderFlagsIntel {
 	vip?: boolean;
 	muted?: boolean;
+	/**
+	 * True once the sender is blocked — via a spam report on some message from
+	 * them, or a manual block in Settings → Senders, which is the only durable
+	 * manage-and-undo surface for it now that this panel has no `Block` action
+	 * of its own. Not used to decide the quick-actions pair below: it's a
+	 * sender-wide flag, and a manual block with no report on THIS message would
+	 * make "You reported this sender" false (issue #648 review). The pair and
+	 * that line key off `actions.onNotSpam`/`onReportSpam` instead, which the
+	 * host derives from this specific message's `Message.spamReport`.
+	 */
 	blocked?: boolean;
 	unsubscribed?: boolean;
 }
@@ -127,20 +136,21 @@ export interface IntelligenceData {
 export interface IntelligenceQuickActions {
 	onToggleVip?: () => void;
 	onToggleMute?: () => void;
-	/** Block navigates through a confirm dialog — the callback fires post-confirm. */
-	onToggleBlock?: () => void;
 	onToggleUnsubscribe?: () => void;
 	onReclassify?: () => void;
 	/**
-	 * "Not spam": move the message out of Junk and promote the sender to
-	 * Wellknown (issue #594). Wired only when the message is currently in Junk.
+	 * "Not spam": undo a spam report — clears the sender block and moves the
+	 * message back where it came from (issue #648). Wired only when the
+	 * message currently carries a spam report.
 	 */
 	onNotSpam?: () => void;
 	/**
-	 * "Mark spam": move the message into Junk and strip the sender's trust
-	 * (the inverse of "Not spam"). Wired only when the message is not in Junk.
+	 * "Report spam": move the message into Junk and block the sender (the
+	 * inverse of "Not spam", issue #648). Wired only when the message has not
+	 * been reported yet. Replaces the former separate `Block` and `Mark spam`
+	 * actions with one contextual control.
 	 */
-	onMarkSpam?: () => void;
+	onReportSpam?: () => void;
 }
 
 /**
@@ -173,6 +183,19 @@ export interface IntelligencePanelProps {
 	 * Drawer header), so there is exactly one way back (#874).
 	 */
 	hideCloseButton?: boolean;
+	/**
+	 * True while a "Report spam" press is in flight. There is no optimistic
+	 * update for this action (issue #648: the client can't predict whether a
+	 * report against a message already in Junk is a no-op), so without this
+	 * the button gives no visible response at all until the request lands — a
+	 * dead button is the worst outcome. Swaps the label to "Reporting…"; the
+	 * handler stays wired throughout (same as `AutoMovedBadge`'s `isUndoing`)
+	 * because the operation is idempotent, so a second press mid-flight is
+	 * safe rather than a queued duplicate.
+	 */
+	reportSpamPending?: boolean;
+	/** True while a "Not spam" (undo) press is in flight. Same treatment as `reportSpamPending`. */
+	notSpamPending?: boolean;
 }
 
 const trustLabel: Record<
@@ -362,6 +385,8 @@ export function IntelligencePanel({
 	similarLinkComponent,
 	className,
 	hideCloseButton = false,
+	reportSpamPending = false,
+	notSpamPending = false,
 }: IntelligencePanelProps) {
 	const { sender, authenticity, category, flags = {}, similar } = data;
 	const suspicious = authenticity.verdict === "mismatch";
@@ -434,35 +459,34 @@ export function IntelligencePanel({
 						active={flags.muted}
 						onClick={actions?.onToggleMute}
 					/>
-					<QuickAction
-						icon={<Ban className="size-3.5" />}
-						label="Block"
-						active={flags.blocked}
-						danger
-						onClick={actions?.onToggleBlock}
-					/>
-					<QuickAction
-						icon={<MailX className="size-3.5" />}
-						label="Unsubscribe"
-						active={flags.unsubscribed}
-						onClick={actions?.onToggleUnsubscribe}
-					/>
 					{actions?.onNotSpam && (
 						<QuickAction
 							icon={<MailCheck className="size-3.5" />}
-							label="Not spam"
+							label={notSpamPending ? "Undoing…" : "Not spam"}
+							active
 							onClick={actions.onNotSpam}
 						/>
 					)}
-					{actions?.onMarkSpam && (
+					{actions?.onReportSpam && (
 						<QuickAction
 							icon={<ShieldX className="size-3.5" />}
-							label="Mark spam"
+							label={reportSpamPending ? "Reporting…" : "Report spam"}
 							danger
-							onClick={actions.onMarkSpam}
+							onClick={actions.onReportSpam}
 						/>
 					)}
+					<QuickAction
+						icon={<MailX className="size-3.5" />}
+						label="Unsubscribe"
+						active={flags.unsubscribed}
+						onClick={actions?.onToggleUnsubscribe}
+					/>
 				</div>
+				{actions?.onNotSpam && (
+					<p className="mt-1.5 text-2xs text-fg-subtle">
+						You reported this message as spam
+					</p>
+				)}
 			</Section>
 
 			{(similarState !== "ready" || similar.length > 0) && (

package/src/components/message-list-pane.tsx

@@ -4,11 +4,12 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { defaultKeyboardHints, keyboardHintsFor } from "../lib/keymap.js";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import { deriveIsMultiSelectMode, modifiersOf } from "../lib/use-selection.js";
-import type {
-	AppShellProps,
-	MessageListKeyboard,
-	MessageListSelection,
-	TouchSeed,
+import {
+	type AppShellProps,
+	keyboardWalksRows,
+	type MessageListKeyboard,
+	type MessageListSelection,
+	type TouchSeed,
 } from "./app-shell-types.js";
 import { type BriefFilterSurface, BriefSections } from "./brief-sections.js";
 import { Button } from "./button.js";
@@ -149,10 +150,7 @@ export function MessageListPane({
 	// The layer answers the arrows only if it registered them. Anything else it
 	// hands over — a layer with no cursor keys, or no layer at all — leaves the
 	// rows their own traversal and their own single tab stop.
-	const walksRows =
-		keyboard !== undefined &&
-		keyboard.handlers.focusNext !== undefined &&
-		keyboard.handlers.focusPrevious !== undefined;
+	const walksRows = keyboardWalksRows(keyboard);
 	useRovingFocus({
 		containerRef: flatListRef,
 		itemSelector: LIST_ROW_SELECTOR,
@@ -327,6 +325,7 @@ export function MessageListPane({
 					sections={sections}
 					selectedThreadId={selectedThreadId}
 					Row={BriefRow}
+					keyboard={keyboard}
 					onSelectThread={onSelectThread}
 				/>
 			) : listBody != null ? (

package/src/lib/roving-focus.test.ts

@@ -93,9 +93,9 @@ afterEach(() => {
 	});
 });
 
-function pressKey(target: Element, key: string) {
+function pressKey(target: Element, key: string, shiftKey = false) {
 	target.dispatchEvent(
-		new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
+		new dom.window.KeyboardEvent("keydown", { key, bubbles: true, shiftKey }),
 	);
 }
 
@@ -222,6 +222,23 @@ describe("useRovingFocus", () => {
 		assert.equal(dom.window.document.activeElement, rows()[0]);
 	});
 
+	it("leaves Shift+Arrow to the layer above instead of moving the cursor", () => {
+		mount({ count: 3 });
+		let seen = 0;
+		const spy = () => {
+			seen += 1;
+		};
+		dom.window.addEventListener("keydown", spy);
+		const items = rows();
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown", true));
+		act(() => pressKey(items[0] as Element, "ArrowUp", true));
+		dom.window.removeEventListener("keydown", spy);
+
+		assert.equal(dom.window.document.activeElement, items[0]);
+		assert.equal(seen, 2);
+	});
+
 	it("keeps a handled key from reaching a window-level listener", () => {
 		mount({ count: 3 });
 		let seen = 0;

package/src/lib/roving-focus.ts

@@ -69,7 +69,8 @@ function rovingItems(
  * consumer-supplied row component, so neither has a flat array to index into.
  *
  * A handled key stops propagating, so a window-level keyboard layer above the
- * group does not act on the same press.
+ * group does not act on the same press. Only the bare keys are handled — a
+ * modified arrow is a different binding, and it belongs to that layer.
  */
 export function useRovingFocus({
 	containerRef,
@@ -95,6 +96,11 @@ export function useRovingFocus({
 		};
 
 		const onKeyDown = (event: KeyboardEvent) => {
+			// Shift+Arrow extends a selection; the group traverses on the bare key
+			// and leaves every modified stroke to the layer that binds it.
+			if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
+				return;
+			}
 			const items = rovingItems(container, itemSelector);
 			const currentIndex = items.indexOf(document.activeElement as HTMLElement);
 			const nextIndex = rovingNextIndex(