@stapel/listings-react 0.4.0 → 0.7.0

package/src/default/MyListingsPane.tsx

@@ -24,34 +24,48 @@
  * 3. **An empty tab says which emptiness it is.** "No drafts" and "nothing
  *    sold yet" are different sentences and one generic "nothing here" is
  *    neither.
+ *
+ * ── The row, rebuilt for a 390px screen ────────────────────────────────────
+ *
+ * The visual pass measured the old one and it failed on a phone in four ways
+ * at once: `Edit ¦ Mark sold ¦ Archive ¦ Delete` in antd's `List.Item`
+ * `actions` slot overflowed the viewport and clipped "Delete"; the title and
+ * the status shared one line with no `min-width: 0`, so the word "Draft" split
+ * into "Draf/t"; the status itself was drawn three different ways down one
+ * list; and every "why is this off" sentence lived in a `Tooltip`, which a
+ * touch device cannot open and a disabled antd button never fires anyway.
+ *
+ * So: the row is a two-column flex (thumbnail, then a `min-width: 0` column
+ * that owns the title, the status and the actions), the actions WRAP instead
+ * of overflowing, each one is a shared `<GatedButton>` with its reason as
+ * ordinary text beside it, and the status is one `<ListingStatusBlock>`.
+ * Delete asks first, through the shared `<SkinConfirm>` — a bottom sheet on a
+ * phone. It used to fire the mutation on the first click.
  */
+import { useState } from "react";
 import type { ReactElement } from "react";
+import { Flex, List, Tabs, Typography } from "antd";
 import {
-  Alert,
-  Badge,
-  Button,
-  Empty,
-  Flex,
-  List,
-  Space,
-  Spin,
-  Tabs,
-  Tooltip,
-  Typography,
-} from "antd";
-import { matchList, matchLoad, useDescribeFlowError, useT } from "@stapel/core";
-import type { ActionAvailability } from "@stapel/core";
+  ErrorAlert,
+  EmptyState,
+  GatedButton,
+  SkinConfirm,
+  SkinTheme,
+} from "@stapel/tokens-antd/skin";
+import { matchList, matchLoad, useT, useTPlural } from "@stapel/core";
+import type { 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, showsDraft } from "../model/mine.js";
+import { myListingTitle } 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";
-import { ErrorAlert } from "./ErrorAlert.js";
+import { ListingPhoto } from "./ListingPhoto.js";
+import { SignInLink } from "./SignInLink.js";
 import { ListingStatusBlock } from "./StatusTags.js";
-import { ListingsSkinTheme } from "./theme.js";
 import type { ThemeModeProp } from "./types.js";
 
 const TAB_LABEL: Readonly<Record<MyListingsTab, string>> = {
@@ -67,54 +81,22 @@ const TAB_EMPTY: Readonly<Record<MyListingsTab, string>> = {
   archived: LISTINGS_I18N_KEYS.mineEmptyArchived,
 };
 
-/** A control plus the sentence that explains it when it is off. Written once
- * here because this pane has six of them and a grey button with no reason is
- * the one shape `ActionAvailability` exists to make impossible. */
-function GatedButton(props: {
-  gate: ActionAvailability;
-  label: string;
-  testId: string;
-  onClick: () => void;
-  danger?: boolean;
-  /** The call sites mark themselves `data-analytics="none"` with a
-   * `passthrough` reason (the convention `stapel/clickable-needs-event`
-   * documents for a forwarding component); the real click point is the antd
-   * button below, which declares its own outcome. */
-  "data-analytics"?: string;
-  "data-analytics-reason"?: string;
-}): ReactElement {
-  const t = useT();
-  return (
-    <Tooltip
-      title={
-        props.gate.available
-          ? props.label
-          : t(props.gate.block.code, props.gate.block.params)
-      }
-    >
-      <span>
-        <Button
-          size="small"
-          danger={props.danger === true}
-          disabled={!props.gate.available}
-          data-testid={props.testId}
-          data-analytics="none"
-          data-analytics-reason="business action — host app wraps with its own tracked()"
-          onClick={props.onClick}
-        >
-          {props.label}
-        </Button>
-      </span>
-    </Tooltip>
-  );
-}
+/** The thumbnail column. A photo marketplace whose seller dashboard is a
+ * column of text is missing the one thing that identifies a row at a glance;
+ * a fixed measure because the column must not reflow per row. */
+const THUMB_WIDTH = "4.5rem";
+
+/** How wide a dashboard row may get. A 1280px window gave the four wrapped
+ * action buttons ~560px of empty space to split across, stranding the reason
+ * text between them. */
+const MINE_MEASURE = "60rem";
 
 function MyListingRow(props: {
   listing: MyListingCard;
-  onEdit?: (id: number) => void;
+  onEdit?: ((id: number) => void) | undefined;
+  onAskRemove: (id: number) => void;
 }): ReactElement {
   const t = useT();
-  const describe = useDescribeFlowError();
   const actions = useListingActions(props.listing.id, props.listing.status);
   // Both axes, both real: `MyListingCardSerializer` puts `moderation_status`
   // on the owner's card, so the row no longer has to pass "approved" as a
@@ -128,119 +110,173 @@ function MyListingRow(props: {
           props.listing.moderation_status ?? "approved"
         );
   const heading = myListingTitle(props.listing);
+  const onEdit = props.onEdit;
+  // A control that offers something meaningless in the current state is the
+  // one shape §83 forbids: with no `onEdit` — which is exactly how the
+  // scripted scaffold mounts this pane — the button used to be enabled,
+  // clickable and inert. It is now switched off WITH the reason.
+  //
+  // "This app has no editing screen" is a fact about the BUILD, not about the
+  // row, so with six rows it printed six identical refusals down one column.
+  // A build-wide refusal is stated once, by the pane, and the button it
+  // refuses is not drawn at all.
+  const editGate = actions.editGate(true);
+  const hasEditor = onEdit !== undefined;
+  const cover = props.listing.images?.[0] ?? props.listing.images_draft?.[0];
 
   return (
     <List.Item
       data-testid="listings-mine-row"
       data-listing-id={props.listing.id}
-      actions={[
-        <GatedButton
-          key="edit"
-          data-analytics="none"
-          data-analytics-reason="passthrough — GatedButton owns the real click point"
-          gate={{ available: true }}
-          label={t(LISTINGS_I18N_KEYS.mineEdit)}
-          testId="listings-mine-edit"
-          onClick={() => {
-            props.onEdit?.(props.listing.id);
-          }}
-        />,
-        <GatedButton
-          key="complete"
-          data-analytics="none"
-          data-analytics-reason="passthrough — GatedButton owns the real click point"
-          gate={actions.complete}
-          label={t(LISTINGS_I18N_KEYS.mineComplete)}
-          testId="listings-mine-complete"
-          onClick={actions.doComplete}
-        />,
-        <GatedButton
-          key="archive"
-          data-analytics="none"
-          data-analytics-reason="passthrough — GatedButton owns the real click point"
-          gate={actions.archive}
-          label={t(LISTINGS_I18N_KEYS.mineArchive)}
-          testId="listings-mine-archive"
-          onClick={actions.doArchive}
-        />,
-        <GatedButton
-          key="delete"
-          data-analytics="none"
-          data-analytics-reason="passthrough — GatedButton owns the real click point"
-          danger
-          gate={actions.remove}
-          label={t(LISTINGS_I18N_KEYS.mineDelete)}
-          testId="listings-mine-delete"
-          onClick={actions.doRemove}
-        />,
-      ]}
+      style={{ alignItems: "flex-start" }}
     >
-      <List.Item.Meta
-        title={
-          <Space size={6}>
+      <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)}`}
+          />
+        </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)}`}
-            {/* A heading that came off the draft twin is something nobody
-                else can read yet. Saying so is the difference between a
-                dashboard and a shop window that happens to be yours. */}
-            {showsDraft(props.listing) ? (
-              <Typography.Text type="secondary" data-testid="listings-mine-draft-title">
-                {t(LISTINGS_I18N_KEYS.statusDraft)}
-              </Typography.Text>
-            ) : null}
-          </Space>
-        }
-        description={
-          <Flex vertical gap={4}>
-            {status !== undefined ? <ListingStatusBlock status={status} /> : null}
-            {actions.error !== undefined && actions.error !== null ? (
-              <ErrorAlert
-                testId="listings-mine-action-error"
-                error={describe({
-                  code: LISTINGS_I18N_KEYS.unknownError,
-                  params: {},
-                  status: 0,
-                  message: undefined,
-                  language: undefined,
-                })}
-              />
+          </Typography.Text>
+
+          {/* ONE status treatment. The word "Draft" beside the title was a
+              second, redundant rendering of what this tag already says. */}
+          {status !== undefined ? <ListingStatusBlock status={status} /> : null}
+
+          {actions.error !== undefined && actions.error !== null ? (
+            <ErrorAlert
+              testId="listings-mine-action-error"
+              thrown={actions.error}
+              variant="inline"
+            />
+          ) : null}
+
+          {/* Wrap, never overflow: four actions do not fit across 390px and a
+              clipped "Delete" is a control that is not there. */}
+          <Flex wrap gap={spacing[2]} align="flex-start">
+            {hasEditor ? (
+              <GatedButton
+                gate={editGate}
+                size="small"
+                testId="listings-mine-edit"
+                data-analytics="none"
+                data-analytics-reason="business action — host app wraps with its own tracked()"
+                onClick={() => {
+                  onEdit?.(props.listing.id);
+                }}
+              >
+                {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>
+            <GatedButton
+              gate={actions.remove}
+              size="small"
+              danger
+              testId="listings-mine-delete"
+              data-analytics="none"
+              data-analytics-reason="opens the delete confirmation"
+              onClick={() => {
+                props.onAskRemove(props.listing.id);
+              }}
+            >
+              {t(LISTINGS_I18N_KEYS.mineDelete)}
+            </GatedButton>
           </Flex>
-        }
-      />
+        </Flex>
+      </Flex>
     </List.Item>
   );
 }
 
-export interface MyListingsPaneProps extends ThemeModeProp {
+export interface MyListingsPaneProps extends ThemeModeProp, SignInCtaProp {
   /** How the host gets the caller's own rows. Absent: the contract's own
    * `GET my/listings/`, which is what a storefront wants. */
   readonly source?: MyListingsSource;
+  /**
+   * Open the composer on one of these listings. ABSENT IS A REAL ANSWER: the
+   * Edit button then states that this app has no editing screen instead of
+   * offering a click that does nothing.
+   */
   readonly onEdit?: (id: number) => void;
 }
 
 export function MyListingsPane(props: MyListingsPaneProps): ReactElement {
   const t = useT();
-  const describe = useDescribeFlowError();
+  const tPlural = useTPlural();
   const bag = useMyListings(
     props.source !== undefined ? { source: props.source } : {}
   );
+  // ONE confirmation for the whole list, keyed by the row that asked — not one
+  // mounted dialog per row.
+  const [removingId, setRemovingId] = useState<number | null>(null);
+  const removal = useListingActions(
+    removingId ?? 0,
+    bag.rows.status === "ready"
+      ? bag.rows.data.find((row) => row.id === removingId)?.status
+      : undefined
+  );
+
+  const paged = bag.prevPage.available || bag.nextPage.available;
+
+  const renderRow = (row: MyListingCard): ReactElement => (
+    <MyListingRow
+      listing={row}
+      onEdit={props.onEdit}
+      onAskRemove={setRemovingId}
+    />
+  );
 
   return (
-    <ListingsSkinTheme {...(props.mode !== undefined ? { mode: props.mode } : {})}>
-      <Flex vertical gap={16} data-testid="listings-mine">
+    <SkinTheme
+      surface="base"
+      style={{ padding: spacing[4], maxWidth: MINE_MEASURE }}
+      {...(props.mode !== undefined ? { mode: props.mode } : {})}
+    >
+      <Flex vertical gap={spacing[4]} data-testid="listings-mine">
         <Typography.Title level={3}>
           {t(LISTINGS_I18N_KEYS.mineTitle)}
         </Typography.Title>
 
+
         {!bag.gate.available ? (
-          <Alert
-            type="info"
-            showIcon
-            data-testid="listings-mine-blocked"
-            message={t(bag.gate.block.code, bag.gate.block.params)}
+          // A refused pane is ONE state, not a banner above a live-looking
+          // dashboard: the tabs still advertised "Active 2 · Drafts 3" to a
+          // visitor who could not read a single row.
+          <EmptyState
+            testId="listings-mine-blocked"
+            title={t(bag.gate.block.code, bag.gate.block.params)}
+            action={
+              <SignInLink cta={props.signIn} testId="listings-mine-sign-in" />
+            }
           />
-        ) : null}
-
+        ) : (
+          <>
         {/* The rows no tab folds in — see the header, point 2. Rendered
             only when there are some: an empty takedown section is a scare,
             and a failure to CHECK is not the same as "none", so it says so. */}
@@ -256,28 +292,18 @@ export function MyListingsPane(props: MyListingsPaneProps): ReactElement {
           ),
           empty: () => null,
           ready: (rows) => (
-            <Alert
-              type="error"
-              showIcon
-              data-testid="listings-mine-takedowns"
-              message={t(LISTINGS_I18N_KEYS.mineBlockedTitle, {
-                count: rows.length,
-              })}
-              description={
-                <List
-                  dataSource={[...rows]}
-                  rowKey={(row) => row.id}
-                  renderItem={(row) => (
-                    <MyListingRow
-                      listing={row}
-                      {...(props.onEdit !== undefined
-                        ? { onEdit: props.onEdit }
-                        : {})}
-                    />
-                  )}
-                />
-              }
-            />
+            <Flex vertical gap={spacing[2]} data-testid="listings-mine-takedowns">
+              <Typography.Text type="warning" strong>
+                {tPlural(LISTINGS_I18N_KEYS.mineBlockedTitle, {
+                  count: rows.length,
+                })}
+              </Typography.Text>
+              <List
+                dataSource={[...rows]}
+                rowKey={(row) => row.id}
+                renderItem={renderRow}
+              />
+            </Flex>
           ),
         })}
 
@@ -290,108 +316,140 @@ export function MyListingsPane(props: MyListingsPaneProps): ReactElement {
           items={bag.tabs.map((tab) => ({
             key: tab,
             label: (
-              <Space size={6}>
+              <>
                 {t(TAB_LABEL[tab])}
                 {matchLoad(bag.counters, {
                   loading: () => null,
-                  // A count we could not fetch is not zero. The badge is
+                  // A count we could not fetch is not zero. The number is
                   // simply absent and the failure is stated once, below.
                   failed: () => null,
+                  // A plain secondary number, not a red antd Badge: red is the
+                  // danger token and "Active 2" is not a warning. It also
+                  // keeps the tab short enough that three of them fit on a
+                  // phone instead of collapsing into an overflow menu.
                   ready: (counters) => (
-                    <Badge
-                      count={counters[tab]}
-                      showZero
+                    <Typography.Text
+                      type="secondary"
                       data-testid={`listings-mine-count-${tab}`}
-                    />
+                    >
+                      {` ${String(counters[tab])}`}
+                    </Typography.Text>
                   ),
                 })}
-              </Space>
+              </>
             ),
           }))}
         />
 
         {matchLoad(bag.counters, {
           loading: () => null,
+          // One failure, one treatment: the rows' failure is an ErrorAlert, so
+          // the counters' is one too — inline, because it costs a number, not
+          // the screen.
           failed: () => (
-            <Typography.Text type="secondary" data-testid="listings-mine-counters-failed">
-              {t(LISTINGS_I18N_KEYS.mineCountersFailed)}
-            </Typography.Text>
+            <ErrorAlert
+              variant="inline"
+              testId="listings-mine-counters-failed"
+              message={t(LISTINGS_I18N_KEYS.mineCountersFailed)}
+            />
           ),
           ready: () => null,
         })}
 
+        {/* A build-wide refusal, said once. It used to be printed beside a
+            switched-off Edit button on every row. */}
+        {props.onEdit === undefined ? (
+          <Typography.Text type="secondary" data-testid="listings-mine-no-editor">
+            {t(LISTINGS_I18N_KEYS.blockedNoEditor)}
+          </Typography.Text>
+        ) : null}
+
         {matchList(bag.rows, {
           loading: () => (
-            <Flex justify="center" data-testid="listings-mine-loading">
-              <Spin aria-label={t(LISTINGS_I18N_KEYS.mineLoading)} />
-            </Flex>
+            <div
+              role="status"
+              aria-busy="true"
+              aria-label={t(LISTINGS_I18N_KEYS.mineLoading)}
+              data-testid="listings-mine-loading"
+              data-stapel-load-state="loading"
+            />
           ),
-          failed: () => (
+          failed: (error) => (
             <ErrorAlert
               testId="listings-mine-error"
-              error={describe({
-                code: LISTINGS_I18N_KEYS.mineLoadFailed,
-                params: {},
-                status: 0,
-                message: undefined,
-                language: undefined,
-              })}
-              action={
-                <Button
-                  size="small"
-                  data-analytics="none"
-                  data-analytics-reason="retrying a read the person already asked for; not a business action"
-                  onClick={bag.refetch}
-                >
-                  {t(LISTINGS_I18N_KEYS.mineRetry)}
-                </Button>
-              }
+              thrown={error}
+              message={t(LISTINGS_I18N_KEYS.mineLoadFailed)}
+              onRetry={bag.refetch}
+              retryLabel={t(LISTINGS_I18N_KEYS.mineRetry)}
             />
           ),
           empty: () => (
-            <Empty
-              data-testid="listings-mine-empty"
-              data-empty-tab={bag.tab}
-              description={t(TAB_EMPTY[bag.tab])}
-            />
+            // The tab is stamped on the wrapper, not only spoken in the copy:
+            // "no drafts" and "nothing sold yet" are different emptinesses and
+            // a test has to be able to tell which one is on screen.
+            <div data-testid="listings-mine-empty" data-empty-tab={bag.tab}>
+              <EmptyState title={t(TAB_EMPTY[bag.tab])} />
+            </div>
           ),
           ready: (rows) => (
             <List
               dataSource={[...rows]}
               rowKey={(row) => row.id}
-              renderItem={(row) => (
-                <MyListingRow
-                  listing={row}
-                  {...(props.onEdit !== undefined ? { onEdit: props.onEdit } : {})}
-                />
-              )}
+              renderItem={renderRow}
             />
           ),
         })}
 
-        <Space>
-          <Button
-            size="small"
-            disabled={!bag.prevPage.available}
-            data-testid="listings-mine-prev"
-            data-analytics="none"
-            data-analytics-reason="paging a list the person is already reading; not a business action"
-            onClick={bag.goPrev}
-          >
-            {t(LISTINGS_I18N_KEYS.pagePrev)}
-          </Button>
-          <Button
-            size="small"
-            disabled={!bag.nextPage.available}
-            data-testid="listings-mine-next"
-            data-analytics="none"
-            data-analytics-reason="paging a list the person is already reading; not a business action"
-            onClick={bag.goNext}
-          >
-            {t(LISTINGS_I18N_KEYS.pageNext)}
-          </Button>
-        </Space>
+        {/* A pager over a list with one page is two controls that mean
+            nothing. It renders when there is somewhere to go, and not
+            before. */}
+        {paged ? (
+          <Flex gap={spacing[2]} wrap>
+            <GatedButton
+              gate={bag.prevPage}
+              size="small"
+              layout="inline"
+              testId="listings-mine-prev"
+              data-analytics="none"
+              data-analytics-reason="paging a list the person is already reading; not a business action"
+              onClick={bag.goPrev}
+            >
+              {t(LISTINGS_I18N_KEYS.pagePrev)}
+            </GatedButton>
+            <GatedButton
+              gate={bag.nextPage}
+              size="small"
+              layout="inline"
+              testId="listings-mine-next"
+              data-analytics="none"
+              data-analytics-reason="paging a list the person is already reading; not a business action"
+              onClick={bag.goNext}
+            >
+              {t(LISTINGS_I18N_KEYS.pageNext)}
+            </GatedButton>
+          </Flex>
+        ) : null}
+
+          </>
+        )}
+
+        <SkinConfirm
+          open={removingId !== null}
+          danger
+          title={t(LISTINGS_I18N_KEYS.mineDeleteConfirmTitle)}
+          body={t(LISTINGS_I18N_KEYS.mineDeleteConfirmBody)}
+          confirmLabel={t(LISTINGS_I18N_KEYS.mineDelete)}
+          confirming={removal.inFlight}
+          data-testid="listings-mine-delete-confirm"
+          onConfirm={() => {
+            removal.doRemove();
+            setRemovingId(null);
+          }}
+          onCancel={() => {
+            setRemovingId(null);
+          }}
+        />
       </Flex>
-    </ListingsSkinTheme>
+    </SkinTheme>
   );
 }

package/src/default/SignInLink.tsx

@@ -33,12 +33,12 @@ export function SignInLink(props: SignInLinkProps): ReactElement | null {
   const t = useT();
   const { cta } = props;
   if (cta === undefined) return null;
-  // The separating space belongs HERE, not at the call site: a reason with no
-  // door must render as exactly its own sentence, and a `{" "}` left behind by
-  // an absent link is a trailing space in every caller's assertion.
+  // No separating space: since the shared `<GatedControl>` prints the reason
+  // as its own paragraph, the door is a standalone element rather than the
+  // tail of a sentence, and a leading `{" "}` would be a stray space in every
+  // caller's assertion.
   return (
     <>
-      {" "}
       <Typography.Link
         data-testid={props.testId}
         data-analytics="none"