Move checklist numbers beside issue IDs

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/IssueColumns.tsx

@@ -139,12 +139,14 @@ export function InboxIssueMetaLeading({
   showStatus = true,
   showIdentifier = true,
   statusSlot,
+  checklistStepNumber = null,
 }: {
   issue: Issue;
   isLive: boolean;
   showStatus?: boolean;
   showIdentifier?: boolean;
   statusSlot?: ReactNode;
+  checklistStepNumber?: number | string | null;
 }) {
   return (
     <>
@@ -153,6 +155,11 @@ export function InboxIssueMetaLeading({
           {statusSlot ?? <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} />}
         </span>
       ) : null}
+      {checklistStepNumber !== null ? (
+        <span className="shrink-0 font-mono text-xs text-muted-foreground" aria-hidden="true">
+          {checklistStepNumber}.
+        </span>
+      ) : null}
       {showIdentifier ? (
         <span className="shrink-0 font-mono text-xs text-muted-foreground">
           {issue.identifier ?? issue.id.slice(0, 8)}

ui/src/components/IssueRow.test.tsx

@@ -202,6 +202,31 @@ describe("IssueRow", () => {
     });
   });
 
+  it("renders checklist step numbers beside the issue identifier", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <IssueRow
+          issue={createIssue({ identifier: "PAP-42" })}
+          checklistStepNumber="2.1"
+          mobileMeta="updated now"
+        />,
+      );
+    });
+
+    const link = container.querySelector("[data-inbox-issue-link]") as HTMLAnchorElement | null;
+    const metaRow = Array.from(link?.querySelectorAll("span.flex.items-center.gap-2") ?? [])
+      .find((element) => element.textContent?.includes("PAP-42"));
+
+    expect(metaRow).not.toBeUndefined();
+    expect(metaRow?.textContent?.replace(/\s+/g, "")).toContain("2.1.PAP-42");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("renders without error when titleSuffix is omitted", () => {
     const root = createRoot(container);
 

ui/src/components/IssueRow.tsx

@@ -64,6 +64,11 @@ export function IssueRow({
   const selectedStatusClass = selected ? "!text-muted-foreground !border-muted-foreground" : undefined;
   const detailState = withIssueDetailHeaderSeed(issueLinkState, issue);
   const hasChecklistStep = checklistStepNumber !== null;
+  const checklistStep = hasChecklistStep ? (
+    <span className="shrink-0 font-mono text-xs text-muted-foreground" aria-hidden="true">
+      {checklistStepNumber}.
+    </span>
+  ) : null;
 
   return (
     <Link
@@ -82,14 +87,6 @@ export function IssueRow({
         className,
       )}
     >
-      {hasChecklistStep ? (
-        <span
-          className="inline-block w-7 shrink-0 self-center text-right font-mono text-[10px] text-muted-foreground sm:w-10 sm:text-xs"
-          aria-hidden="true"
-        >
-          {checklistStepNumber}.
-        </span>
-      ) : null}
       <span className="shrink-0 pt-px sm:hidden">
         {mobileLeading ?? <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} className={selectedStatusClass} />}
       </span>
@@ -111,6 +108,7 @@ export function IssueRow({
               <span className="hidden shrink-0 sm:inline-flex">
                 <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} className={selectedStatusClass} />
               </span>
+              {checklistStep}
               <span className="shrink-0 font-mono text-xs text-muted-foreground">
                 {identifier}
               </span>

ui/src/components/IssuesList.test.tsx

@@ -494,6 +494,8 @@ describe("IssuesList", () => {
       const rows = Array.from(container.querySelectorAll('[data-testid="issue-row"]'));
       expect(rows).toHaveLength(3);
       expect(rows.map((row) => row.getAttribute("data-step"))).toEqual(["1", "2", "3"]);
+      expect(container.textContent?.replace(/\s+/g, "")).toContain("1.PAP-1");
+      expect(container.textContent?.replace(/\s+/g, "")).toContain("2.PAP-3");
       expect(rows.filter((row) => row.getAttribute("data-current-step") === "true")).toHaveLength(1);
       expect(rows.find((row) => row.textContent?.includes("Active blocker"))?.getAttribute("data-current-step")).toBe("true");
       expect(rows.find((row) => row.textContent?.includes("Done first"))?.getAttribute("data-title-class")).toContain("text-muted-foreground");

ui/src/components/IssuesList.tsx

@@ -1412,6 +1412,7 @@ export function IssuesList({
                               isLive={liveIssueIds?.has(issue.id) === true}
                               showStatus={visibleIssueColumnSet.has("status") && availableIssueColumnSet.has("status")}
                               showIdentifier={visibleIssueColumnSet.has("id") && availableIssueColumnSet.has("id")}
+                              checklistStepNumber={checklistStepNumber}
                               statusSlot={(
                                 <span onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
                                   <StatusIcon status={issue.status} blockerAttention={issue.blockerAttention} onChange={(s) => onUpdateIssue(issue.id, { status: s })} />