@stapel/listings-react 0.21.0 → 0.22.1

package/src/default/MyListingsPane.tsx

@@ -43,23 +43,24 @@
  * phone. It used to fire the mutation on the first click.
  */
 import { useState } from "react";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 import { Flex, List, Tabs, Typography } from "antd";
 import {
   ErrorAlert,
   EmptyState,
   GatedButton,
+  PaneGate,
   SkinConfirm,
   SkinTheme,
 } from "@stapel/tokens-antd/skin";
-import { matchList, matchLoad, useT, useTPlural } from "@stapel/core";
-import type { SignInCtaProp } from "@stapel/core";
+import { actionAvailable, matchList, matchLoad, useT, useTPlural } from "@stapel/core";
+import type { LinkComponent, SignInCtaProp } from "@stapel/core";
 import { spacing } from "@stapel/tokens";
 import type { MyListingCard } from "../api/types.js";
 import { useMyListings } from "../headless/MyListings.js";
 import type { MyListingsSource } from "../model/mineSource.js";
 import { useListingActions } from "../headless/ListingActions.js";
-import { myListingTitle } from "../model/mine.js";
+import { myListingTitle, neverSubmitted } from "../model/mine.js";
 import { listingStatusView } from "../model/status.js";
 import type { MyListingsTab } from "../model/status.js";
 import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
@@ -91,13 +92,95 @@ const THUMB_WIDTH = "4.5rem";
  * text between them. */
 const MINE_MEASURE = "60rem";
 
+/** The class a row's link to its own listing carries. */
+const MINE_LINK_CLASS = "stapel-listings-mine-link";
+
+/** The `href` the hoisted dashboard stylesheet is deduplicated by. */
+const MINE_STYLE_HREF = "stapel-listings-mine";
+
+/**
+ * The two rules an inline style cannot state: the focus ring
+ * (`:focus-visible`) and the fact that a row link is a HIT AREA rather than a
+ * link's look.
+ *
+ * `color: inherit` / `text-decoration: none`: the title is already a title and
+ * the thumbnail is already a picture — painting either link-blue would make a
+ * dashboard read as a list of hyperlinks instead of a list of listings. The
+ * ring is what keeps that honest for a keyboard: a target with no chrome must
+ * still say when it has focus.
+ */
+function myListingsCss(): string {
+  const link = `.${MINE_LINK_CLASS}`;
+  return [
+    `${link}{display:block;color:inherit;text-decoration:none;min-inline-size:0}`,
+    `${link}:hover{text-decoration:underline}`,
+    `${link}:focus-visible{outline:2px solid var(--stapel-focus-ring);` +
+      `outline-offset:2px;border-radius:4px}`,
+  ].join("");
+}
+
+/**
+ * The row's title and thumbnail, as a link to the listing's own page when the
+ * host has one.
+ *
+ * The gap this closes (D183): a live cabinet held ZERO `a[href^="/l/"]`. The
+ * title was bold text and the thumbnail was an image, so a seller could see
+ * their listing in the list and had no way at all to open it — the one
+ * natural move after publishing ("did that come out right?") had to be made
+ * by typing a URL. `<ListingCard>` has had this seam since it existed; the
+ * dashboard simply never took it.
+ *
+ * A row NOBODY HAS EVER PUBLISHED gets no link, and that is not a
+ * limitation. `title`/`price`/`images` are the PUBLISHED fields, so such a
+ * row's page is a blank one — a link to nothing is worse than the absence of
+ * a link, and Edit is the move that row actually wants. The predicate is the
+ * server's own (`neverSubmitted`: DRAFT and NOT_SUBMITTED), not "is this row
+ * showing its draft twin": the second answers `false` for a draft with no
+ * title at all, and a row reading "#623 · Draft" was handed a link to a
+ * page that does not exist.
+ */
+function RowLink(props: {
+  listing: MyListingCard;
+  href: ((id: number) => string) | undefined;
+  linkComponent: LinkComponent | undefined;
+  children: ReactNode;
+  testId: string;
+  label?: string | undefined;
+}): ReactElement {
+  const { href, listing } = props;
+  if (href === undefined || neverSubmitted(listing)) return <>{props.children}</>;
+  const target = href(listing.id);
+  const Link = props.linkComponent;
+  const shared = {
+    href: target,
+    className: MINE_LINK_CLASS,
+    "data-testid": props.testId,
+    "data-analytics": "none",
+    "data-analytics-reason":
+      "navigation to the listing's own page — the host app wraps this with its own tracked()",
+    ...(props.label !== undefined ? { "aria-label": props.label } : {}),
+  };
+  return Link !== undefined ? (
+    <Link {...shared}>{props.children}</Link>
+  ) : (
+    <a {...shared}>{props.children}</a>
+  );
+}
+
 function MyListingRow(props: {
   listing: MyListingCard;
   onEdit?: ((id: number) => void) | undefined;
   onAskRemove: (id: number) => void;
+  listingHref?: ((id: number) => string) | undefined;
+  linkComponent?: LinkComponent | undefined;
 }): ReactElement {
   const t = useT();
-  const actions = useListingActions(props.listing.id, props.listing.status);
+  const actions = useListingActions(props.listing.id, props.listing.status, {
+    // THE answer to "what can I do with this row", from the module that owns
+    // the state machine. Absent (a row read before stapel-listings 0.20.0),
+    // `ownerMoves` falls back to the mirror rather than to nothing.
+    available: props.listing.available_transitions,
+  });
   // Both axes, both real: `MyListingCardSerializer` puts `moderation_status`
   // on the owner's card, so the row no longer has to pass "approved" as a
   // stand-in and lose the one combination that matters — a LIVE listing whose
@@ -130,20 +213,38 @@ function MyListingRow(props: {
       data-listing-id={props.listing.id}
       style={{ alignItems: "flex-start" }}
     >
+      <style href={MINE_STYLE_HREF} precedence="default">
+        {myListingsCss()}
+      </style>
       <Flex gap={spacing[3]} style={{ width: "100%", minWidth: 0 }}>
         <div style={{ flex: `0 0 ${THUMB_WIDTH}`, width: THUMB_WIDTH }}>
-          <ListingPhoto
-            imageRef={cover}
-            alt={heading ?? `#${String(props.listing.id)}`}
-          />
+          <RowLink
+            listing={props.listing}
+            href={props.listingHref}
+            linkComponent={props.linkComponent}
+            testId="listings-mine-thumb-link"
+            label={heading ?? `#${String(props.listing.id)}`}
+          >
+            <ListingPhoto
+              imageRef={cover}
+              alt={heading ?? `#${String(props.listing.id)}`}
+            />
+          </RowLink>
         </div>
 
         {/* `min-width: 0` is what stops a long title from pushing the status
             out of the row and splitting a word across two lines. */}
         <Flex vertical gap={spacing[2]} style={{ flex: "1 1 auto", minWidth: 0 }}>
-          <Typography.Text strong ellipsis data-testid="listings-mine-title">
-            {heading ?? `#${String(props.listing.id)}`}
-          </Typography.Text>
+          <RowLink
+            listing={props.listing}
+            href={props.listingHref}
+            linkComponent={props.linkComponent}
+            testId="listings-mine-open"
+          >
+            <Typography.Text strong ellipsis data-testid="listings-mine-title">
+              {heading ?? `#${String(props.listing.id)}`}
+            </Typography.Text>
+          </RowLink>
 
           {/* ONE status treatment. The word "Draft" beside the title was a
               second, redundant rendering of what this tag already says. */}
@@ -157,13 +258,23 @@ function MyListingRow(props: {
             />
           ) : null}
 
-          {/* Wrap, never overflow: four actions do not fit across 390px and a
-              clipped "Delete" is a control that is not there. */}
+          {/* Wrap, never overflow: the actions do not fit across 390px and a
+              clipped "Delete" is a control that is not there.
+
+              `layout="inline"` on every one of them, and it is worth a line
+              (D168). A `<GatedControl>` defaults to `display: flex` — a
+              BLOCK — so each button became a full-width row of its own and a
+              published listing's action set stacked into a column: one
+              cabinet row measured 331px of an 844px phone, five listings to a
+              screen and a half. Inline makes them what they look like, a row
+              of small buttons that wraps, and puts each refusal beside its
+              control rather than under it. */}
           <Flex wrap gap={spacing[2]} align="flex-start">
             {hasEditor ? (
               <GatedButton
                 gate={editGate}
                 size="small"
+                layout="inline"
                 testId="listings-mine-edit"
                 data-analytics="none"
                 data-analytics-reason="business action — host app wraps with its own tracked()"
@@ -174,29 +285,45 @@ function MyListingRow(props: {
                 {t(LISTINGS_I18N_KEYS.mineEdit)}
               </GatedButton>
             ) : null}
-            <GatedButton
-              gate={actions.complete}
-              size="small"
-              testId="listings-mine-complete"
-              data-analytics="none"
-              data-analytics-reason="business action — host app wraps with its own tracked()"
-              onClick={actions.doComplete}
-            >
-              {t(LISTINGS_I18N_KEYS.mineComplete)}
-            </GatedButton>
-            <GatedButton
-              gate={actions.archive}
-              size="small"
-              testId="listings-mine-archive"
-              data-analytics="none"
-              data-analytics-reason="business action — host app wraps with its own tracked()"
-              onClick={actions.doArchive}
-            >
-              {t(LISTINGS_I18N_KEYS.mineArchive)}
-            </GatedButton>
+            {/* The moves the SERVER says this row has, and only those.
+                `available_transitions` is on the owner's card since
+                stapel-listings 0.20.0, so the set drawn here and the set
+                `POST {id}/transition/` accepts are one object.
+
+                It used to be a fixed pair — "Mark sold" and "Archive" — on
+                every row in every status, gated against a local copy of the
+                table that answers "yes" to a same-status move. So an ARCHIVED
+                row offered "Archive" and a SOLD row offered "Mark sold": two
+                of its four controls enabled, clickable and inert. And the
+                edges that would have UNDONE either of those — SOLD back to
+                PUBLISHED, ARCHIVED back to DRAFT — were in the state machine
+                the whole time with no button and no route, which is what made
+                a misclick on "Mark sold" cost a seller the listing. */}
+            {actions.moves.map((move) => (
+              <GatedButton
+                key={move.to}
+                gate={move.gate}
+                size="small"
+                layout="inline"
+                testId={move.testId}
+                data-listing-move={move.to}
+                data-analytics="none"
+                data-analytics-reason="business action — host app wraps with its own tracked()"
+                onClick={move.run}
+              >
+                {t(move.labelKey)}
+              </GatedButton>
+            ))}
             <GatedButton
               gate={actions.remove}
               size="small"
+              // STACK, alone among the row's actions, and measured: this is
+              // the one control that carries a STANDING sentence ("archive it
+              // first — a listing on sale cannot be deleted"), and inline a
+              // button plus sixty characters is one flex item too wide for a
+              // 390px row, so it wrapped inside itself and took four lines.
+              // Under the button the same sentence takes two.
+              layout="stack"
               danger
               testId="listings-mine-delete"
               data-analytics="none"
@@ -224,6 +351,24 @@ export interface MyListingsPaneProps extends ThemeModeProp, SignInCtaProp {
    * offering a click that does nothing.
    */
   readonly onEdit?: (id: number) => void;
+  /**
+   * Where a listing's own page lives, given its id — `(id) => \`/l/${id}\``
+   * for a storefront.
+   *
+   * Absent, the row's title and thumbnail are plain text and a picture, which
+   * is what this pane shipped: a live cabinet held zero links to a listing,
+   * so "publish it, then look at it" was a move a seller could only make by
+   * typing a URL. Absent is still a real answer — a deployment whose listings
+   * have no public page has nothing to link TO — but it is now a decision the
+   * host makes rather than one this file made for everyone.
+   */
+  readonly listingHref?: (id: number) => string;
+  /**
+   * The router's link, so those two targets are client-side navigations. A
+   * plain `<a href>` otherwise — right-clickable and correct, just a full page
+   * load.
+   */
+  readonly linkComponent?: LinkComponent;
 }
 
 export function MyListingsPane(props: MyListingsPaneProps): ReactElement {
@@ -249,6 +394,8 @@ export function MyListingsPane(props: MyListingsPaneProps): ReactElement {
       listing={row}
       onEdit={props.onEdit}
       onAskRemove={setRemovingId}
+      listingHref={props.listingHref}
+      linkComponent={props.linkComponent}
     />
   );
 
@@ -392,11 +539,30 @@ export function MyListingsPane(props: MyListingsPaneProps): ReactElement {
             </div>
           ),
           ready: (rows) => (
-            <List
-              dataSource={[...rows]}
-              rowKey={(row) => row.id}
-              renderItem={renderRow}
-            />
+            // ONE COPY OF EACH REFUSAL FOR THE WHOLE LIST.
+            //
+            // `<PaneGate>` pools what `<GatedControl>` would otherwise print
+            // per control: a seller with six published listings read
+            // "archive it first — a listing on sale cannot be deleted" six
+            // times down one column, and on a 390px phone that paragraph is
+            // 63px of every row. Each control keeps its
+            // `aria-describedby` pointing at the pooled sentence, so a
+            // screen reader still reads the reason WITH the control it
+            // belongs to — the sentence moves, it does not disappear, which
+            // is the difference between pooling and hiding.
+            //
+            // The gate itself is open: this pane's own refusal is `bag.gate`
+            // and it is answered far above, as one state.
+            <PaneGate
+              gate={actionAvailable()}
+              testId="listings-mine-reasons"
+            >
+              <List
+                dataSource={[...rows]}
+                rowKey={(row) => row.id}
+                renderItem={renderRow}
+              />
+            </PaneGate>
           ),
         })}
 

package/src/headless/ListingActions.tsx

@@ -4,32 +4,81 @@ import {
   firstBlock,
 } from "@stapel/core";
 import type { ActionAvailability } from "@stapel/core";
-import type { ListingLifecycleStatus } from "../api/types.js";
+import type {
+  ListingLifecycleStatus,
+  ListingOwnerTransition,
+} from "../api/types.js";
 import {
   useArchiveListing,
   useCompleteListing,
   useDeleteListing,
+  useTransitionListing,
 } from "../model/mutations.js";
-import { canDelete, canTransition } from "../model/transitions.js";
+import { canDelete, canTransition, ownerMoves } from "../model/transitions.js";
 import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
 import { useMandateGate } from "./useMandateGate.js";
 
 /**
- * The three lifecycle moves an owner can actually request, each behind a gate
- * that states its reason.
+ * The lifecycle moves an owner can actually request, each behind a gate that
+ * states its reason.
+ *
+ * ── The server says what is offerable; nothing here re-derives it ──────────
+ *
+ * `MyListingCard.available_transitions` (stapel-listings 0.20.0) is the
+ * seller's half of the state machine, reported for ONE row by the module that
+ * owns the machine — and it is the same list `POST {id}/transition/`
+ * validates against, so the set a person is offered and the set the server
+ * takes are one object rather than two that agree today.
+ *
+ * Before it, this hook offered a FIXED three (archive, complete, delete) and
+ * gated them against a local copy of the table. That shipped two defects at
+ * once, and both were live:
+ *
+ *  - **Buttons that did nothing.** `canTransition(from, to)` answers true for
+ *    `from === to` — correctly, since the server returns early on a
+ *    same-status move — so a SOLD row's "Mark sold" and an ARCHIVED row's
+ *    "Archive" were enabled, clickable and inert. Two of four controls on
+ *    every archived row.
+ *  - **No way back.** The whole vocabulary was `archive` and `complete`, and
+ *    both are EXITS. A seller who marked something sold by a misclick could
+ *    not un-sell it: `SOLD → PUBLISHED` was in the machine and had no route,
+ *    so the honest answer the cabinet had left was Delete and start again.
+ *
+ * {@link ListingActionsBag.moves} is now the whole answer for a dashboard:
+ * whatever it holds is drawn, and a control that would be a no-op is not in
+ * it. `ownerMoves` supplies the fallback for a surface that holds a bare
+ * `status` (a detail pane, a row read before 0.20.0) — never as a second
+ * opinion where the card carries the field.
  *
  * ── The mirror is UX, the 409 is the verdict ───────────────────────────────
  *
- * `LISTING_TRANSITIONS` (`model/transitions.ts`) is a copy of the server's
- * whitelist, and it exists so a control can be switched off WITH a sentence:
- * "a listing that is sold cannot be archived that way" beats a toast after
- * the click. The server still decides — `transition_to` raises and the view
- * answers 409 `error.409.invalid_listing_transition` with
- * `params.from_status` — and that refusal is rendered as the named thing it
- * is. The mirror may never block what the server would allow, which is why it
- * is a copy of the table and not a summary of it.
+ * The server still decides — `transition_to` raises and the view answers 409
+ * `error.409.invalid_listing_transition` with `params.from_status` — and that
+ * refusal is rendered as the named thing it is.
  */
+
+/** One move a seller may make from where the listing is now. */
+export interface ListingMove {
+  /** Where it lands. The vocabulary `available_transitions` speaks. */
+  readonly to: ListingOwnerTransition;
+  /** The caption's i18n KEY — never a literal; this is a headless hook. */
+  readonly labelKey: string;
+  /** Mandate and in-flight only: the move itself is offered, or it would not
+   * be in this list. */
+  readonly gate: ActionAvailability;
+  /** A stable hook for a skin's `data-testid`, so a test names the MOVE
+   * rather than the position of a button in a wrapping row. */
+  readonly testId: string;
+  run(): void;
+}
+
 export interface ListingActionsBag {
+  /**
+   * Every move this listing's owner may make, in drawing order, and NOTHING
+   * else. Empty is a real answer (a row mid-load, a status with no owner
+   * edges) and a skin draws no action row for it.
+   */
+  readonly moves: readonly ListingMove[];
   readonly archive: ActionAvailability;
   readonly complete: ActionAvailability;
   readonly remove: ActionAvailability;
@@ -49,20 +98,73 @@ export interface ListingActionsBag {
   doComplete(): void;
   doRemove(): void;
   readonly inFlight: boolean;
-  /** The last refusal from any of the three, in the one error dialect. */
+  /** The last refusal from any of them, in the one error dialect. */
   readonly error: unknown;
 }
 
+/** What a caption says, keyed by where the move lands. */
+const MOVE_LABEL: Readonly<Record<ListingOwnerTransition, string>> = {
+  published: LISTINGS_I18N_KEYS.moveToPublished,
+  pending: LISTINGS_I18N_KEYS.moveToPending,
+  paused: LISTINGS_I18N_KEYS.moveToPaused,
+  draft: LISTINGS_I18N_KEYS.moveToDraft,
+  // These two edges have had buttons since this pane existed. They keep their
+  // captions: renaming them now would be a change of wording dressed as a
+  // change of capability.
+  sold: LISTINGS_I18N_KEYS.mineComplete,
+  archived: LISTINGS_I18N_KEYS.mineArchive,
+  // In the vocabulary because the enum is the whole lifecycle; not in any
+  // seller's offered set (`rejected` and `blocked` are moderation's verdicts,
+  // `expired` is the clock's). Named anyway rather than left to a lookup that
+  // could return undefined.
+  rejected: LISTINGS_I18N_KEYS.statusRejected,
+  blocked: LISTINGS_I18N_KEYS.statusBlocked,
+  expired: LISTINGS_I18N_KEYS.statusExpired,
+};
+
+/**
+ * The caption for moving from *from* to *to*.
+ *
+ * One edge earns a second sentence: `EXPIRED → PENDING` is the same move as
+ * "send for review" asked at a different moment — nothing is wrong with the
+ * listing, its time simply ran out — and "Renew" is what a person came to the
+ * dashboard to do.
+ */
+function moveLabelKey(
+  from: ListingLifecycleStatus,
+  to: ListingOwnerTransition
+): string {
+  if (from === "expired" && to === "pending") {
+    return LISTINGS_I18N_KEYS.moveRenew;
+  }
+  return MOVE_LABEL[to];
+}
+
+export interface UseListingActionsOptions {
+  /**
+   * The row's own `available_transitions`, when the caller has a
+   * {@link MyListingCard} rather than a bare status. THE answer where it is
+   * present; see this file's header.
+   */
+  readonly available?: readonly ListingOwnerTransition[] | undefined;
+}
+
 export function useListingActions(
   id: number,
-  status: ListingLifecycleStatus | undefined
+  status: ListingLifecycleStatus | undefined,
+  options: UseListingActionsOptions = {}
 ): ListingActionsBag {
   const mandate = useMandateGate();
   const archive = useArchiveListing();
   const complete = useCompleteListing();
   const remove = useDeleteListing();
+  const move = useTransitionListing();
 
-  const inFlight = archive.isPending || complete.isPending || remove.isPending;
+  const inFlight =
+    archive.isPending ||
+    complete.isPending ||
+    remove.isPending ||
+    move.isPending;
   const busy: ActionAvailability = inFlight
     ? actionBlocked(LISTINGS_I18N_KEYS.blockedInFlight)
     : actionAvailable();
@@ -94,7 +196,26 @@ export function useListingActions(
       : actionAvailable()
   );
 
+  // Mandate and in-flight, and nothing else: a move that is IN this list is
+  // one the server has said it will take, so there is no third gate to
+  // consult. The whole point of `available_transitions` is that "may I?" was
+  // answered before the button was drawn.
+  const moveGate = firstBlock(mandate, busy);
+  const moves: readonly ListingMove[] =
+    status === undefined
+      ? []
+      : ownerMoves(status, options.available).map((to) => ({
+          to,
+          labelKey: moveLabelKey(status, to),
+          gate: moveGate,
+          testId: `listings-mine-move-${to}`,
+          run: () => {
+            if (moveGate.available) move.mutate({ id, to });
+          },
+        }));
+
   return {
+    moves,
     archive: archiveGate,
     complete: completeGate,
     remove: removeGate,
@@ -115,6 +236,6 @@ export function useListingActions(
       if (removeGate.available) remove.mutate(id);
     },
     inFlight,
-    error: archive.error ?? complete.error ?? remove.error,
+    error: archive.error ?? complete.error ?? move.error ?? remove.error,
   };
 }

package/src/i18n/es.ts

@@ -38,7 +38,7 @@ export const listingsI18nBundleEs: I18nDictionary = {
   "error.404.listing_not_found": "No se encontró el anuncio",
   "error.409.already_favorited": "El anuncio ya está en favoritos",
   "error.409.invalid_listing_transition":
-    "Un anuncio en estado «{from_status}» no se puede mover así",
+    "Desde su estado actual, el anuncio no se puede mover así",
   "error.409.listing_cannot_delete_active":
     "Archívalo primero — un anuncio a la venta no se puede borrar",
 
@@ -194,6 +194,12 @@ export const listingsI18nBundleEs: I18nDictionary = {
   "listings.mine.archive": "Archivar",
   "listings.mine.complete": "Marcar como vendido",
   "listings.mine.delete": "Borrar",
+  "listings.mine.move.published": "Publicar de nuevo",
+  "listings.mine.move.pending": "Enviar a revisión",
+  "listings.mine.move.paused": "Pausar",
+  "listings.mine.move.draft": "Volver a borradores",
+  "listings.mine.move.renew": "Renovar",
+  "listings.mine.view": "Ver",
   "listings.mine.delete_confirm_title": "¿Borrar este anuncio?",
   "listings.mine.delete_confirm_body":
     "Desaparece de tu panel y no se puede recuperar. Archivarlo lo conserva.",
@@ -219,7 +225,7 @@ export const listingsI18nBundleEs: I18nDictionary = {
   "listings.blocked.mandate_unknown":
     "No pudimos comprobar tu cuenta, así que no adivinamos si puedes hacerlo",
   "listings.blocked.transition":
-    "Un anuncio en estado «{from_status}» no se puede mover así",
+    "Desde su estado actual, el anuncio no se puede mover así",
   "listings.blocked.delete_active":
     "Archívalo primero — un anuncio a la venta no se puede borrar",
   "listings.blocked.in_flight": "Un momento — eso ya está en marcha",

package/src/i18n/keys.ts

@@ -211,6 +211,26 @@ export const LISTINGS_I18N_KEYS = {
   mineArchive: "listings.mine.archive",
   mineComplete: "listings.mine.complete",
   mineDelete: "listings.mine.delete",
+  /**
+   * One caption per MOVE the seller may make, keyed by where the move lands
+   * — the vocabulary `available_transitions` speaks.
+   *
+   * `archived` and `sold` reuse the two captions above, because those two
+   * edges have had buttons since this pane existed and renaming them now
+   * would be a change of wording pretending to be a change of capability.
+   * The rest are the way BACK, which had no route until stapel-listings
+   * 0.20.0 and therefore no caption: a seller who marked something sold by
+   * mistake could only start again.
+   */
+  moveToPublished: "listings.mine.move.published",
+  moveToPending: "listings.mine.move.pending",
+  moveToPaused: "listings.mine.move.paused",
+  moveToDraft: "listings.mine.move.draft",
+  /** EXPIRED → PENDING is the same edge as "submit", asked at a different
+   * moment: nothing is wrong with the listing, its time simply ran out. */
+  moveRenew: "listings.mine.move.renew",
+  /** Open this listing the way a buyer sees it. */
+  mineView: "listings.mine.view",
   /** Deleting is irreversible, so it asks — through the shared SkinConfirm,
    * which is a bottom sheet on a phone. */
   mineDeleteConfirmTitle: "listings.mine.delete_confirm_title",
@@ -423,6 +443,12 @@ export const listingsI18nBundleEn: Record<string, string> = {
   "listings.mine.archive": "Archive",
   "listings.mine.complete": "Mark sold",
   "listings.mine.delete": "Delete",
+  "listings.mine.move.published": "Publish again",
+  "listings.mine.move.pending": "Send for review",
+  "listings.mine.move.paused": "Pause",
+  "listings.mine.move.draft": "Move back to drafts",
+  "listings.mine.move.renew": "Renew",
+  "listings.mine.view": "View",
   "listings.mine.delete_confirm_title": "Delete this listing?",
   "listings.mine.delete_confirm_body":
     "It disappears from your dashboard and cannot be brought back. Archiving keeps it.",
@@ -441,8 +467,33 @@ export const listingsI18nBundleEn: Record<string, string> = {
     "Your account cannot do this yet — finish setting it up first",
   "listings.blocked.mandate_unknown":
     "We could not check your account, so we are not guessing whether you may do this",
+  /**
+   * THE REFUSAL DOES NOT QUOTE THE STATE'S CODE NAME.
+   *
+   * Both sentences below used to carry `{from_status}`, and what landed in
+   * that slot was the wire value: a live cabinet told a seller, in Russian,
+   * that "a listing in status 'draft' cannot be moved that way" — and then
+   * the same sentence with 'archived' — while the row's own status tag, two
+   * lines above, said "Draft" and "Archived" in the reader's own words.
+   * The translation existed; it simply was not the thing being interpolated.
+   *
+   * The placeholder is gone rather than fed a translated value, because it
+   * was never adding information the screen did not already carry: the status
+   * is named, in words, beside every control this refusal appears under. What
+   * the reader needs is which MOVE is impossible, and that is the control
+   * they are looking at.
+   *
+   * The SERVER's own 409 (`error.409.invalid_listing_transition`) carries the
+   * same placeholder and is reworded in the ru and es bundles beside this
+   * one, where a real reader met it. It is deliberately NOT overridden in the
+   * English bundle: that bundle spreads the generated backend texts whole,
+   * and a hand-written entry for one error code makes this pair's catalogue
+   * claim a namespace it does not own — `stapel/i18n-locale-parity` says so
+   * and is right. The refusal is in any case now close to unreachable: the
+   * dashboard offers only the moves the server declared.
+   */
   "listings.blocked.transition":
-    "A listing that is {from_status} cannot be moved that way",
+    "This listing cannot be moved that way from where it is",
   "listings.blocked.delete_active":
     "Archive it first — a listing that is on sale cannot be deleted",
   "listings.blocked.in_flight": "One moment — that is already under way",