@stapel/listings-react 0.25.10 → 0.26.0

package/src/default/cardGallery.ts

@@ -46,9 +46,12 @@
  */
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { PointerEvent as ReactPointerEvent, RefObject } from "react";
+import { fontSize, radii, spacing } from "@stapel/tokens";
 
 /** The class the gallery's own box carries — see {@link cardGalleryCss}. */
 export const CARD_GALLERY_CLASS = "stapel-listing-gallery";
+/** The class the "3 of 16" pill carries — see {@link cardGalleryCss}. */
+export const CARD_GALLERY_COUNTER_CLASS = "stapel-listing-gallery-count";
 /** The `href` the hoisted gallery stylesheet is deduplicated by. */
 export const CARD_GALLERY_STYLE_HREF = "stapel-listings-card-gallery";
 
@@ -338,7 +341,35 @@ export function useCardGallery(count: number): CardGallery {
  */
 export function cardGalleryCss(): string {
   const box = `.${CARD_GALLERY_CLASS}`;
+  const counter = `.${CARD_GALLERY_COUNTER_CLASS}`;
   return [
+    // The counter is placed against this box, so the box has to be the
+    // containing block. Nothing else about the gallery changes: a `relative`
+    // with no offsets moves no pixel of what is already in it.
+    `${box}{position:relative}`,
+    // "3 of 16", bottom-TRAILING corner — the dots own the bottom centre
+    // (`SkinCarousel`: `inset-inline:0; justify-content:center`) and two
+    // indicators fighting for one spot is worse than neither.
+    //
+    // `pointer-events:none` is load-bearing rather than tidy: this box owns
+    // the hover-scrub and the swipe, and an element that swallowed a pointer
+    // would make one corner of every card's photograph dead to both gestures.
+    //
+    // A FIXED scrim and white text, not a theme role, and this is the one
+    // place in the package where that is the right answer: the pill sits on
+    // an arbitrary PHOTOGRAPH, which is neither light nor dark, so a value
+    // that followed the page's theme would be unreadable on half the photos
+    // in either one.
+    `${counter}{position:absolute;inset-block-end:${String(spacing[2])}px;` +
+      `inset-inline-end:${String(spacing[2])}px;z-index:1;pointer-events:none;` +
+      `padding:${String(spacing[1] / 2)}px ${String(spacing[2])}px;` +
+      `border-radius:${String(radii.full)}px;` +
+      `background:rgba(0,0,0,0.55);color:#fff;` +
+      `font-size:${String(fontSize.xs.fontSize)}px;` +
+      `line-height:${String(fontSize.xs.lineHeight)}px;` +
+      // A counter whose digits change width makes the pill twitch on every
+      // swipe.
+      `font-variant-numeric:tabular-nums}`,
     // THE VERTICAL AXIS IS THE BROWSER'S, and is not negotiable: a card is a
     // small box in a long feed, and the one unacceptable outcome of a gallery
     // gesture is a page that will not scroll. `pan-y` says so at the platform

package/src/default/favorite.tsx

@@ -35,6 +35,8 @@ import { useFavoriteToggle } from "../headless/Favorites.js";
 import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { GateReasonPopover } from "./GateReasonPopover.js";
 import { HeartIcon } from "./icons.js";
+import { useNotice } from "./notice.js";
+import { LISTING_ACTIONS_STYLE_HREF, actionRowCss } from "./actionRow.js";
 
 export interface FavoriteHeartProps {
   readonly listingId: number;
@@ -83,6 +85,31 @@ export interface FavoriteHeartProps {
    * its reason, which is all a surface with no sign-in route can offer.
    */
   readonly signIn?: SignInCta;
+  /**
+   * The hit-target class this surface wants — `LISTING_CARD_ACTION_CLASS` on
+   * a card (36px with a cursor, 44px with a thumb),
+   * `LISTING_ACTION_CLASS` on the listing page (44px everywhere).
+   *
+   * A CLASS rather than a size prop: the tiers are a media query, and a
+   * component that took a number would have to be told the viewport — which
+   * is the thing a leaf must never ask. See `actionRow.ts`.
+   */
+  readonly className?: string;
+  /**
+   * SAY THE OUTCOME OUT LOUD — a short toast on each successful press.
+   *
+   * Off by default and ON for the listing page: one heart on a screen the
+   * person came to act on earns a sentence, forty hearts on a grid do not.
+   * The icon fill remains the state in both cases; this is the acknowledgement
+   * that the press was received, which is the half a small glyph pinned to
+   * the corner of a photograph cannot carry on its own.
+   *
+   * It is raised on the GESTURE, from the predicted next state, for the same
+   * reason `useFavoriteToggle` draws that state optimistically: the toast has
+   * to arrive with the press. A write that then fails rolls the icon back and
+   * states the failure through the heart's own `ErrorAlert`.
+   */
+  readonly announce?: boolean;
   readonly style?: CSSProperties;
 }
 
@@ -134,6 +161,7 @@ export interface FavoriteHeartProps {
  */
 export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
   const t = useT();
+  const notice = useNotice();
   const { token } = antdTheme.useToken();
   const favorite = useFavoriteToggle(props.listingId, props.favorited);
   const label = t(
@@ -154,6 +182,22 @@ export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
   // place a blocked reason becomes words in this fleet.
   const gate = useActionGate(favorite.gate);
   const reason = gate.reason;
+  // The press, plus the sentence the surface asked for. The next state is the
+  // one the icon is about to draw, so the toast and the fill say the same
+  // thing at the same moment — see `announce`.
+  const announce = props.announce === true;
+  const press = (): void => {
+    const next = !favorite.favorited;
+    favorite.toggle();
+    if (!announce || !favorite.gate.available) return;
+    notice(
+      t(
+        next
+          ? LISTINGS_I18N_KEYS.favoriteAdded
+          : LISTINGS_I18N_KEYS.favoriteRemoved
+      )
+    );
+  };
   // D431. A blocked gate plus a door the surface handed in: the press is not
   // refused, it is ROUTED — through the door, keeping whatever `?next=` the
   // container put in the href. With no door there is nothing better for the
@@ -175,9 +219,10 @@ export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
         ...doorPress,
         ...(door?.href !== undefined ? {} : { "aria-pressed": favorite.favorited }),
       }
-    : { "aria-pressed": favorite.favorited, onClick: favorite.toggle };
+    : { "aria-pressed": favorite.favorited, onClick: press };
   // A failed save, stated where the heart is. The rollback already put the
   // icon back; this says why it went back.
+  // (see `press` above for the toast that rides the successful half)
   const failure = (
     <ErrorAlert
       testId={`${props.testId}-error`}
@@ -185,8 +230,20 @@ export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
       variant="inline"
     />
   );
+  // The hit-target rules the surfaces address by class. Hoisted here rather
+  // than by each card, because the heart is what carries the class and a
+  // stylesheet that arrived only on the surfaces that remembered it is a
+  // 32px target on the one that forgot.
+  const sheet = (
+    <style href={LISTING_ACTIONS_STYLE_HREF} precedence="default">
+      {actionRowCss()}
+    </style>
+  );
+
   if (props.blockedReason === "popover" && reason !== undefined) {
     return (
+      <>
+      {sheet}
       <GateReasonPopover
         reason={reason}
         cta={props.signIn}
@@ -201,6 +258,9 @@ export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
             // control, and the disclosure stays as the hint beside it.
             {...(opensDoor ? {} : { "aria-disabled": true })}
             {...bind}
+            {...(props.className !== undefined
+              ? { className: props.className }
+              : {})}
             aria-label={label}
             data-testid={props.testId}
             data-favorited={String(favorite.favorited)}
@@ -212,9 +272,12 @@ export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
           />
         )}
       </GateReasonPopover>
+      </>
     );
   }
   return (
+    <>
+    {sheet}
     <GatedControl
       gate={favorite.gate}
       testId={props.gateTestId ?? `${props.testId}-gate`}
@@ -233,6 +296,9 @@ export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
             shape="circle"
             // See `<ListingCard>`: the substrate's binding, spread whole.
             {...bind}
+            {...(props.className !== undefined
+              ? { className: props.className }
+              : {})}
             aria-label={label}
             data-testid={props.testId}
             data-favorited={String(favorite.favorited)}
@@ -245,5 +311,6 @@ export function FavoriteHeart(props: FavoriteHeartProps): ReactElement {
         </>
       )}
     </GatedControl>
+    </>
   );
 }

package/src/default/icons.tsx

@@ -50,6 +50,66 @@ export function HeartIcon(props: HeartIconProps): ReactElement {
   );
 }
 
+/**
+ * The share glyph — three nodes and two edges, the platform-neutral shape
+ * both Android and the web draw for "send this somewhere else".
+ *
+ * `aria-hidden`, like the heart: the control it sits in carries the verb as
+ * its accessible name in every arm, including the phone arm where the word
+ * itself is not painted, and a glyph announced beside its own label reads the
+ * action twice.
+ *
+ * Deliberately not the iOS "box with an arrow": that shape means "share" to
+ * an iPhone user and "upload" or "export" to everybody else, and this control
+ * is drawn on a browser, not inside an app the platform styled.
+ */
+export function ShareIcon(): ReactElement {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-hidden="true"
+    >
+      <circle cx="18" cy="5" r="3" />
+      <circle cx="6" cy="12" r="3" />
+      <circle cx="18" cy="19" r="3" />
+      <path d="M8.6 10.5 15.4 6.6" />
+      <path d="M8.6 13.5 15.4 17.4" />
+    </svg>
+  );
+}
+
+/**
+ * A chain link — the copy row's glyph, and the one thing on the menu that is
+ * not a network's own brand.
+ */
+export function LinkIcon(): ReactElement {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      role="img"
+      aria-hidden="true"
+    >
+      <path d="M10 13a5 5 0 0 0 7.5.6l3-3a5 5 0 0 0-7-7l-1.7 1.7" />
+      <path d="M14 11a5 5 0 0 0-7.5-.6l-3 3a5 5 0 0 0 7 7l1.7-1.7" />
+    </svg>
+  );
+}
+
 /**
  * Which way the asking price moved — an arrow, and a NAME for it.
  *

package/src/default/index.ts

@@ -71,6 +71,7 @@ export {
   DETAIL_SPLIT_MEASURE,
   DETAIL_SPLIT_ASIDE,
   DETAIL_PHOTO_MIN,
+  DETAIL_GALLERY_GUTTER,
 } from "./ListingDetailPane.js";
 export type { ListingDetailPaneProps } from "./ListingDetailPane.js";
 export {
@@ -126,6 +127,28 @@ export {
   useCardGallery,
 } from "./cardGallery.js";
 export type { CardGallery } from "./cardGallery.js";
+// ── the reader's two actions: save it, or send it to somebody ───────────────
+export { ListingActions } from "./ListingActions.js";
+export type {
+  ListingActionsConfig,
+  ListingActionsProps,
+} from "./ListingActions.js";
+export { ShareAction } from "./ShareAction.js";
+export type { ShareActionProps } from "./ShareAction.js";
+export {
+  LISTING_ACTIONS_CLASS,
+  LISTING_ACTIONS_OVERLAY_CLASS,
+  LISTING_ACTIONS_STYLE_HREF,
+  LISTING_ACTION_CLASS,
+  LISTING_ACTION_HIT,
+  LISTING_ACTION_LABEL_CLASS,
+  LISTING_CARD_ACTION_CLASS,
+  LISTING_CARD_ACTION_HIT,
+  actionRowCss,
+} from "./actionRow.js";
+export { NOTICE_SECONDS, useNotice } from "./notice.js";
+export type { Notice } from "./notice.js";
+
 export { SignInLink } from "./SignInLink.js";
 export type { SignInLinkProps } from "./SignInLink.js";
 export type { CategoryFeaturesProp, ThemeModeProp } from "./types.js";

package/src/default/notice.ts

@@ -0,0 +1,68 @@
+/**
+ * A one-line confirmation, spoken once — the message seam this skin uses and
+ * the reason it is not a new dependency.
+ *
+ * ── There is no fleet-wide toast primitive, and this does not invent one ──
+ *
+ * `@stapel/tokens-antd/skin` carries `ErrorAlert`, `EmptyState`,
+ * `GatedControl`, `SkinDialog` and `SkinConfirm` — every way a pair states a
+ * REFUSAL or asks a question — and nothing at all for "that worked". So the
+ * seam here is antd's own, which this package already renders through:
+ *
+ *   1. `App.useApp().message` when the host mounts antd's `<App>`, which is
+ *      the arrangement antd itself asks for — the notice then inherits the
+ *      host's `ConfigProvider` theme, its locale and its container;
+ *   2. antd's STATIC `message` otherwise, so a host that never mounted `<App>`
+ *      still gets the confirmation instead of silence.
+ *
+ * Outside an `<App>`, `App.useApp()` returns `{message: {}, …}` — antd's own
+ * default context — which is why the arm is chosen by asking whether the
+ * function is there rather than by asking whether a provider is. A version
+ * that assumed the context would have been a confirmation that worked in
+ * every test and on no deployment.
+ *
+ * ── And a toast is never the ONLY copy of a confirmation ──────────────────
+ *
+ * A toast is transient by construction: it appears for three seconds
+ * somewhere the person may not be looking, and on a phone it can land under a
+ * thumb. So every caller here also paints the same sentence where the gesture
+ * happened — `<ShareAction>` states "Link copied" inside the open menu, and
+ * the heart's state is on the heart. This is the AMPLIFIER, never the record.
+ * A future `SkinNotice` in the substrate replaces the body of this function
+ * and nothing else; the callers already speak in resolved sentences.
+ */
+import { useCallback } from "react";
+import { App, message as staticMessage } from "antd";
+
+/** Say one short sentence. Resolved copy — this is the skin, not a bag. */
+export type Notice = (text: string) => void;
+
+/**
+ * How long a confirmation stands, in seconds.
+ *
+ * Two, not antd's default three. Every notice this package raises confirms
+ * something the person can already SEE — a filled heart, a sentence standing
+ * in the open share menu — so it is an acknowledgement, not information, and
+ * an acknowledgement that outstays the gesture is a strip of chrome sitting
+ * over the page a thumb was about to press next.
+ */
+export const NOTICE_SECONDS = 2;
+
+export function useNotice(): Notice {
+  const app = App.useApp();
+  const contextual = app.message.success;
+  return useCallback(
+    (text: string): void => {
+      if (typeof contextual === "function") {
+        contextual(text, NOTICE_SECONDS);
+        return;
+      }
+      // No `<App>` above us. antd's static entry renders its own holder into
+      // the document, which is exactly right for a host that never opted in,
+      // and is a no-op on a server where there is no document to render into.
+      if (typeof document === "undefined") return;
+      staticMessage.success(text, NOTICE_SECONDS);
+    },
+    [contextual]
+  );
+}

package/src/headless/MyListings.tsx

@@ -20,8 +20,13 @@ import type { MyListingsSource } from "../model/mineSource.js";
 import { useListingsApi } from "../model/context.js";
 import { useMyCounters } from "../model/queries.js";
 import { listingsQueryKeys, pageKey } from "../model/queryKeys.js";
-import { MY_LISTINGS_TABS, MY_LISTINGS_UNTABBED_STATUSES } from "../model/status.js";
-import type { MyListingsTab } from "../model/status.js";
+import {
+  MY_LISTINGS_COUNTED_TABS,
+  MY_LISTINGS_REMOVED_TAB,
+  MY_LISTINGS_TABS,
+  MY_LISTINGS_UNTABBED_STATUSES,
+} from "../model/status.js";
+import type { MyListingsCountedTab, MyListingsTab } from "../model/status.js";
 import { browserAddress, tabFromSearch } from "../model/tabAddress.js";
 import type { MyListingsAddress } from "../model/tabAddress.js";
 import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
@@ -37,45 +42,66 @@ import { useMandateGate } from "./useMandateGate.js";
  * keeps the argument and the seam that came out of it.
  *
  * TWO reads, not one, and the second one is the point of this file's shape:
- * the three tabs are the SERVER's status groupings, and `blocked` — a
+ * the three counted tabs are the SERVER's status groupings, and `blocked` — a
  * moderation takedown — is in none of them, because `my/counters` counts it
  * in none of them. A dashboard that only ever asked for a tab's statuses
  * would hide exactly the listing whose owner most needs to know. So
  * `blockedRows` is fetched beside them, off the same route, narrowed to
  * whatever `MY_LISTINGS_UNTABBED_STATUSES` derives.
+ *
+ * That second read is also the fourth tab's COUNT (D407). `my/counters` has
+ * three integers and no fourth, so the removed tab is counted from the rows it
+ * holds — which is honest exactly because that read is unpaged and runs
+ * whichever tab is open. The one thing it cannot describe is a page cap: a
+ * seller with more takedowns than one page of `my/listings` would see the page
+ * count and not the total, and there is no counter on the wire to check it
+ * against (see `MyListingsBag.tabCounts`).
  */
 
 export interface MyListingsBag {
   readonly tab: MyListingsTab;
+  /**
+   * The tabs to DRAW, in order.
+   *
+   * The server's three always; the removed one only where there is something
+   * in it or the person asked for it by address. An empty "Taken down" tab is
+   * a scare, and the seller it would scare is the one it has nothing to tell.
+   */
   readonly tabs: readonly MyListingsTab[];
   setTab(tab: MyListingsTab): void;
   /** The three real counts, as the server reports them. */
   readonly counters: LoadState<MyCounters>;
   /**
    * The number to DRAW on each tab — the server's counter, raised to what is
-   * actually on screen.
+   * actually on screen, plus the fourth tab's own.
    *
-   * D407: a moderator-rejected listing was on the Drafts tab under a badge
-   * reading `0`. The two sets are grouped in two places — `my/counters`
-   * aggregates server-side, `MY_LISTINGS_TAB_STATUSES` decides which statuses
-   * a tab ASKS for — and any disagreement between them (a deployment running
-   * an older counter, a status added upstream, a grouping changed on one side)
-   * lands as a badge contradicting the rows underneath it.
+   * D407, twice over. The first half: a moderator-rejected listing was on the
+   * Drafts tab under a badge reading `0`. The two sets are grouped in two
+   * places — `my/counters` aggregates server-side, `MY_LISTINGS_TAB_STATUSES`
+   * decides which statuses a tab ASKS for — and any disagreement between them
+   * (a deployment running an older counter, a status added upstream, a
+   * grouping changed on one side) lands as a badge contradicting the rows
+   * underneath it. A count smaller than what a person can see is not a count,
+   * so the loaded rows are treated as evidence: for the OPEN tab the number is
+   * never below `rows.length`. It is a floor and not a replacement — the rows
+   * are one keyset page and the counter is the whole set, so the counter still
+   * wins whenever it is the larger of the two.
    *
-   * A count smaller than what a person can see is not a count, so the loaded
-   * rows are treated as evidence: for the OPEN tab the number is never below
-   * `rows.length`. It is a floor and not a replacement — the rows are one
-   * keyset page and the counter is the whole set, so the counter still wins
-   * whenever it is the larger of the two.
+   * The second half: a takedown was in no tab and therefore in no number, so
+   * a cabinet holding one read "Active 0 · Drafts 0 · Archived 0" over it.
+   * `removed` is counted from `blockedRows` — there is no server counter to
+   * read, and the rows are the only evidence on the wire.
    */
   readonly tabCounts: LoadState<Readonly<Record<MyListingsTab, number>>>;
-  /** The rows for the current tab. */
+  /** The rows for the current tab — {@link MyListingsBag.blockedRows} while
+   * the removed tab is open, and the tab's own keyset page otherwise. */
   readonly rows: LoadState<readonly MyListingCard[]>;
   /**
-   * The rows no tab folds in — a moderation takedown, today. Empty for
-   * almost every seller; when it is not, it is the most important thing on
-   * the screen. Never `failed` in a way that hides the tabs: this read is
-   * independent of `rows` and a skin renders it beside them.
+   * The rows the server's own counter folds into no tab — a moderation
+   * takedown, today; the removed tab's whole contents and its count. Empty
+   * for almost every seller; when it is not, it is the most important thing
+   * on the screen. Never `failed` in a way that hides the tabs: this read is
+   * independent of the tab's own and a skin renders it beside them.
    */
   readonly blockedRows: LoadState<readonly MyListingCard[]>;
   readonly page: MyListingsParams;
@@ -136,11 +162,18 @@ export function useMyListings(
     [injected, api]
   );
   const ready = sessionReady && gate.available;
+  // The fourth tab is served by `blockedQuery` below, not by the host's
+  // source: `MyListingsSource` is typed for the three counted tabs and a host
+  // that implemented it before D407 has no answer for a fourth.
+  const removed = tab === MY_LISTINGS_REMOVED_TAB;
+  const countedTab: MyListingsCountedTab = removed
+    ? MY_LISTINGS_COUNTED_TABS[0]
+    : (tab as MyListingsCountedTab);
 
   const rowsQuery = useQuery({
-    queryKey: listingsQueryKeys.mine(tab, pageKey(page)),
-    queryFn: ({ signal }) => source({ tab, page, signal }),
-    enabled: ready,
+    queryKey: listingsQueryKeys.mine(countedTab, pageKey(page)),
+    queryFn: ({ signal }) => source({ tab: countedTab, page, signal }),
+    enabled: ready && !removed,
     retry: false,
   });
 
@@ -155,12 +188,6 @@ export function useMyListings(
     retry: false,
   });
 
-  const rows: LoadState<readonly MyListingCard[]> = useMemo(() => {
-    if (rowsQuery.status === "error") return loadFailed(rowsQuery.error);
-    if (rowsQuery.data !== undefined) return loadReady(rowsQuery.data.items);
-    return loadLoading();
-  }, [rowsQuery.status, rowsQuery.error, rowsQuery.data]);
-
   const blockedRows: LoadState<readonly MyListingCard[]> = useMemo(() => {
     if (MY_LISTINGS_UNTABBED_STATUSES.length === 0) return loadReady([]);
     if (blockedQuery.status === "error") return loadFailed(blockedQuery.error);
@@ -168,9 +195,26 @@ export function useMyListings(
     return loadLoading();
   }, [blockedQuery.status, blockedQuery.error, blockedQuery.data]);
 
-  const envelope = rowsQuery.data;
+  const tabRows: LoadState<readonly MyListingCard[]> = useMemo(() => {
+    if (rowsQuery.status === "error") return loadFailed(rowsQuery.error);
+    if (rowsQuery.data !== undefined) return loadReady(rowsQuery.data.items);
+    return loadLoading();
+  }, [rowsQuery.status, rowsQuery.error, rowsQuery.data]);
 
-  // D407, the floor: never a number smaller than the rows on screen. See
+  const rows = removed ? blockedRows : tabRows;
+
+  // The takedown count, when it is known. Not a `0` while the read is in
+  // flight: the tab strip is drawn off this number and a tab that appeared a
+  // beat after the page settled would move the three beside it.
+  const blockedCount =
+    blockedRows.status === "ready" ? blockedRows.data.length : undefined;
+
+  // Paging belongs to the tab's own keyset read. The takedowns are fetched
+  // unpaged on purpose, so the removed tab has nowhere to go and says so.
+  const envelope = removed ? undefined : rowsQuery.data;
+
+  // D407, the floor: never a number smaller than the rows on screen — and a
+  // number for the fourth tab, which the server counts nowhere. See
   // `MyListingsBag.tabCounts`.
   const tabCounts: LoadState<Readonly<Record<MyListingsTab, number>>> =
     useMemo(() => {
@@ -178,19 +222,26 @@ export function useMyListings(
       if (counters.data === undefined) return loadLoading();
       const server = counters.data;
       const visible = rows.status === "ready" ? rows.data.length : 0;
-      return loadReady(
-        Object.fromEntries(
-          MY_LISTINGS_TABS.map((one) => [
+      return loadReady({
+        ...(Object.fromEntries(
+          MY_LISTINGS_COUNTED_TABS.map((one) => [
             one,
             one === tab ? Math.max(server[one], visible) : server[one],
           ])
-        ) as Readonly<Record<MyListingsTab, number>>
-      );
-    }, [counters.status, counters.error, counters.data, rows, tab]);
+        ) as Readonly<Record<MyListingsCountedTab, number>>),
+        [MY_LISTINGS_REMOVED_TAB]: blockedCount ?? 0,
+      });
+    }, [counters.status, counters.error, counters.data, rows, tab, blockedCount]);
+
+  // The removed tab is drawn where it has something to say — or where the
+  // address named it, so `?tab=removed` opens a real (if empty) tab rather
+  // than an activeKey pointing at nothing.
+  const tabs: readonly MyListingsTab[] =
+    removed || (blockedCount ?? 0) > 0 ? MY_LISTINGS_TABS : MY_LISTINGS_COUNTED_TABS;
 
   return {
     tab,
-    tabs: MY_LISTINGS_TABS,
+    tabs,
     setTab: (next) => {
       // A cursor belongs to ONE ordered candidate set. Carried across a tab
       // change it either bounces or honestly returns page four of a