From 3b9da0ee95c264aa288aec4d891a3baac93f4792 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 11 Mar 2026 20:51:28 -0500
Subject: [PATCH] Refactor shared issue rows

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueRow.tsx   | 112 +++++++++++++
 ui/src/components/IssuesList.tsx | 270 +++++++++++++++----------------
 ui/src/pages/Inbox.tsx           |  67 ++------
 3 files changed, 249 insertions(+), 200 deletions(-)
 create mode 100644 ui/src/components/IssueRow.tsx

diff --git a/ui/src/components/IssueRow.tsx b/ui/src/components/IssueRow.tsx
new file mode 100644
index 00000000..67e4f654
--- /dev/null
+++ b/ui/src/components/IssueRow.tsx
@@ -0,0 +1,112 @@
+import type { ReactNode } from "react";
+import type { Issue } from "@paperclipai/shared";
+import { Link } from "@/lib/router";
+import { cn } from "../lib/utils";
+import { PriorityIcon } from "./PriorityIcon";
+import { StatusIcon } from "./StatusIcon";
+
+type UnreadState = "hidden" | "visible" | "fading";
+
+interface IssueRowProps {
+  issue: Issue;
+  issueLinkState?: unknown;
+  statusControl?: ReactNode;
+  mobileMeta?: ReactNode;
+  trailingContent?: ReactNode;
+  trailingMeta?: ReactNode;
+  unreadState?: UnreadState | null;
+  onMarkRead?: () => void;
+  className?: string;
+}
+
+export function IssueRow({
+  issue,
+  issueLinkState,
+  statusControl,
+  mobileMeta,
+  trailingContent,
+  trailingMeta,
+  unreadState = null,
+  onMarkRead,
+  className,
+}: IssueRowProps) {
+  const issuePathId = issue.identifier ?? issue.id;
+  const identifier = issue.identifier ?? issue.id.slice(0, 8);
+  const showUnreadSlot = unreadState !== null;
+  const showUnreadDot = unreadState === "visible" || unreadState === "fading";
+
+  return (
+    <Link
+      to={`/issues/${issuePathId}`}
+      state={issueLinkState}
+      className={cn(
+        "flex min-w-0 cursor-pointer items-start gap-2 px-3 py-3 no-underline text-inherit transition-colors hover:bg-accent/50 sm:items-center sm:gap-3 sm:px-4",
+        className,
+      )}
+    >
+      <span className="hidden shrink-0 self-center sm:inline-flex">
+        <PriorityIcon priority={issue.priority} />
+      </span>
+      <span className="inline-flex shrink-0 self-center">
+        {statusControl ?? <StatusIcon status={issue.status} />}
+      </span>
+      <span className="hidden shrink-0 self-center text-xs font-mono text-muted-foreground sm:inline">
+        {identifier}
+      </span>
+      <span className="min-w-0 flex-1 text-sm">
+        <span className="line-clamp-2 min-w-0 sm:line-clamp-1 sm:block sm:truncate">
+          {issue.title}
+        </span>
+        <span className="mt-1 flex items-center gap-2 text-[11px] text-muted-foreground sm:hidden">
+          <span className="font-mono">{identifier}</span>
+          {mobileMeta ? (
+            <>
+              <span aria-hidden="true">&middot;</span>
+              <span>{mobileMeta}</span>
+            </>
+          ) : null}
+        </span>
+      </span>
+      {trailingContent ? (
+        <span className="hidden shrink-0 items-center gap-2 sm:flex">{trailingContent}</span>
+      ) : null}
+      {trailingMeta ? (
+        <span className="hidden shrink-0 self-center text-xs text-muted-foreground sm:block">
+          {trailingMeta}
+        </span>
+      ) : null}
+      {showUnreadSlot ? (
+        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center self-center">
+          {showUnreadDot ? (
+            <button
+              type="button"
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onMarkRead?.();
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  onMarkRead?.();
+                }
+              }}
+              className="inline-flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
+              aria-label="Mark as read"
+            >
+              <span
+                className={cn(
+                  "block h-2 w-2 rounded-full bg-blue-600 transition-opacity duration-300 dark:bg-blue-400",
+                  unreadState === "fading" ? "opacity-0" : "opacity-100",
+                )}
+              />
+            </button>
+          ) : (
+            <span className="inline-flex h-4 w-4" aria-hidden="true" />
+          )}
+        </span>
+      ) : null}
+    </Link>
+  );
+}
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index da1c161d..e28e2fb5 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from "react";
-import { Link } from "@/lib/router";
 import { useQuery } from "@tanstack/react-query";
 import { useDialog } from "../context/DialogContext";
 import { useCompany } from "../context/CompanyContext";
@@ -12,6 +11,7 @@ import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { EmptyState } from "./EmptyState";
 import { Identity } from "./Identity";
+import { IssueRow } from "./IssueRow";
 import { PageSkeleton } from "./PageSkeleton";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -590,162 +590,144 @@ export function IssuesList({
             )}
             <CollapsibleContent>
               {group.items.map((issue) => (
-                <Link
+                <IssueRow
                   key={issue.id}
-                  to={`/issues/${issue.identifier ?? issue.id}`}
-                  state={issueLinkState}
-                  className="flex items-start gap-2 py-2.5 pl-2 pr-3 text-sm border-b border-border last:border-b-0 cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit sm:items-center sm:py-2 sm:pl-1"
-                >
-                  {/* Status icon - left column on mobile, inline on desktop */}
-                  <span className="shrink-0 pt-px sm:hidden" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
-                    <StatusIcon
-                      status={issue.status}
-                      onChange={(s) => onUpdateIssue(issue.id, { status: s })}
-                    />
-                  </span>
-
-                  {/* Right column on mobile: title + metadata stacked */}
-                  <span className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
-                    {/* Title line */}
-                    <span className="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">
-                      {issue.title}
-                    </span>
-
-                    {/* Metadata line */}
-                    <span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
-                      {/* Spacer matching caret width so status icon aligns with group title (hidden on mobile) */}
-                      <span className="w-3.5 shrink-0 hidden sm:block" />
-                      <span className="hidden sm:inline-flex"><PriorityIcon priority={issue.priority} /></span>
-                      <span className="hidden shrink-0 sm:inline-flex" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
-                        <StatusIcon
-                          status={issue.status}
-                          onChange={(s) => onUpdateIssue(issue.id, { status: s })}
-                        />
-                      </span>
-                      <span className="text-xs text-muted-foreground font-mono shrink-0">
-                        {issue.identifier ?? issue.id.slice(0, 8)}
-                      </span>
-                      {liveIssueIds?.has(issue.id) && (
-                        <span className="inline-flex items-center gap-1 sm:gap-1.5 px-1.5 sm:px-2 py-0.5 rounded-full bg-blue-500/10">
-                          <span className="relative flex h-2 w-2">
-                            <span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
-                            <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
-                          </span>
-                          <span className="text-[11px] font-medium text-blue-600 dark:text-blue-400 hidden sm:inline">Live</span>
-                        </span>
-                      )}
-                      <span className="text-xs text-muted-foreground sm:hidden">&middot;</span>
-                      <span className="text-xs text-muted-foreground sm:hidden">
-                        {timeAgo(issue.updatedAt)}
-                      </span>
-                    </span>
-                  </span>
-
-                  {/* Desktop-only trailing content */}
-                  <span className="hidden sm:flex sm:order-3 items-center gap-2 sm:gap-3 shrink-0 ml-auto">
-                    {(issue.labels ?? []).length > 0 && (
-                      <span className="hidden md:flex items-center gap-1 max-w-[240px] overflow-hidden">
-                        {(issue.labels ?? []).slice(0, 3).map((label) => (
-                          <span
-                            key={label.id}
-                            className="inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium"
-                            style={{
-                              borderColor: label.color,
-                              color: label.color,
-                              backgroundColor: `${label.color}1f`,
-                            }}
-                          >
-                            {label.name}
-                          </span>
-                        ))}
-                        {(issue.labels ?? []).length > 3 && (
-                          <span className="text-[10px] text-muted-foreground">+{(issue.labels ?? []).length - 3}</span>
-                        )}
-                      </span>
-                    )}
-                    <Popover
-                      open={assigneePickerIssueId === issue.id}
-                      onOpenChange={(open) => {
-                        setAssigneePickerIssueId(open ? issue.id : null);
-                        if (!open) setAssigneeSearch("");
+                  issue={issue}
+                  issueLinkState={issueLinkState}
+                  className="border-b border-border last:border-b-0 sm:px-3"
+                  statusControl={(
+                    <span
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
                       }}
                     >
-                      <PopoverTrigger asChild>
-                        <button
-                          className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 hover:bg-accent/50 transition-colors"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                          }}
-                        >
-                          {issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? (
-                            <Identity name={agentName(issue.assigneeAgentId)!} size="sm" />
-                          ) : (
-                            <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-                              <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
-                                <User className="h-3 w-3" />
-                              </span>
-                              Assignee
+                      <StatusIcon
+                        status={issue.status}
+                        onChange={(s) => onUpdateIssue(issue.id, { status: s })}
+                      />
+                    </span>
+                  )}
+                  mobileMeta={timeAgo(issue.updatedAt)}
+                  trailingContent={(
+                    <>
+                      {(issue.labels ?? []).length > 0 && (
+                        <span className="hidden items-center gap-1 overflow-hidden md:flex md:max-w-[240px]">
+                          {(issue.labels ?? []).slice(0, 3).map((label) => (
+                            <span
+                              key={label.id}
+                              className="inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium"
+                              style={{
+                                borderColor: label.color,
+                                color: label.color,
+                                backgroundColor: `${label.color}1f`,
+                              }}
+                            >
+                              {label.name}
+                            </span>
+                          ))}
+                          {(issue.labels ?? []).length > 3 && (
+                            <span className="text-[10px] text-muted-foreground">
+                              +{(issue.labels ?? []).length - 3}
                             </span>
                           )}
-                        </button>
-                      </PopoverTrigger>
-                      <PopoverContent
-                        className="w-56 p-1"
-                        align="end"
-                        onClick={(e) => e.stopPropagation()}
-                        onPointerDownOutside={() => setAssigneeSearch("")}
+                        </span>
+                      )}
+                      {liveIssueIds?.has(issue.id) && (
+                        <span className="inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2 py-0.5">
+                          <span className="relative flex h-2 w-2">
+                            <span className="absolute inline-flex h-full w-full animate-pulse rounded-full bg-blue-400 opacity-75" />
+                            <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500" />
+                          </span>
+                          <span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">
+                            Live
+                          </span>
+                        </span>
+                      )}
+                      <Popover
+                        open={assigneePickerIssueId === issue.id}
+                        onOpenChange={(open) => {
+                          setAssigneePickerIssueId(open ? issue.id : null);
+                          if (!open) setAssigneeSearch("");
+                        }}
                       >
-                        <input
-                          className="w-full px-2 py-1.5 text-xs bg-transparent outline-none border-b border-border mb-1 placeholder:text-muted-foreground/50"
-                          placeholder="Search agents..."
-                          value={assigneeSearch}
-                          onChange={(e) => setAssigneeSearch(e.target.value)}
-                          autoFocus
-                        />
-                        <div className="max-h-48 overflow-y-auto overscroll-contain">
+                        <PopoverTrigger asChild>
                           <button
-                            className={cn(
-                              "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
-                              !issue.assigneeAgentId && "bg-accent"
-                            )}
+                            className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 transition-colors hover:bg-accent/50"
                             onClick={(e) => {
                               e.preventDefault();
                               e.stopPropagation();
-                              assignIssue(issue.id, null);
                             }}
                           >
-                            No assignee
+                            {issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? (
+                              <Identity name={agentName(issue.assigneeAgentId)!} size="sm" />
+                            ) : (
+                              <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                                <span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30">
+                                  <User className="h-3 w-3" />
+                                </span>
+                                Assignee
+                              </span>
+                            )}
                           </button>
-                          {(agents ?? [])
-                            .filter((agent) => {
-                              if (!assigneeSearch.trim()) return true;
-                              return agent.name.toLowerCase().includes(assigneeSearch.toLowerCase());
-                            })
-                            .map((agent) => (
-                              <button
-                                key={agent.id}
-                                className={cn(
-                                  "flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-left",
-                                  issue.assigneeAgentId === agent.id && "bg-accent"
-                                )}
-                                onClick={(e) => {
-                                  e.preventDefault();
-                                  e.stopPropagation();
-                                  assignIssue(issue.id, agent.id);
-                                }}
-                              >
-                                <Identity name={agent.name} size="sm" className="min-w-0" />
-                              </button>
-                            ))}
-                        </div>
-                      </PopoverContent>
-                    </Popover>
-                    <span className="text-xs text-muted-foreground">
-                      {formatDate(issue.createdAt)}
-                    </span>
-                  </span>
-                </Link>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="w-56 p-1"
+                          align="end"
+                          onClick={(e) => e.stopPropagation()}
+                          onPointerDownOutside={() => setAssigneeSearch("")}
+                        >
+                          <input
+                            className="mb-1 w-full border-b border-border bg-transparent px-2 py-1.5 text-xs outline-none placeholder:text-muted-foreground/50"
+                            placeholder="Search agents..."
+                            value={assigneeSearch}
+                            onChange={(e) => setAssigneeSearch(e.target.value)}
+                            autoFocus
+                          />
+                          <div className="max-h-48 overflow-y-auto overscroll-contain">
+                            <button
+                              className={cn(
+                                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent/50",
+                                !issue.assigneeAgentId && "bg-accent",
+                              )}
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                assignIssue(issue.id, null);
+                              }}
+                            >
+                              No assignee
+                            </button>
+                            {(agents ?? [])
+                              .filter((agent) => {
+                                if (!assigneeSearch.trim()) return true;
+                                return agent.name
+                                  .toLowerCase()
+                                  .includes(assigneeSearch.toLowerCase());
+                              })
+                              .map((agent) => (
+                                <button
+                                  key={agent.id}
+                                  className={cn(
+                                    "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs hover:bg-accent/50",
+                                    issue.assigneeAgentId === agent.id && "bg-accent",
+                                  )}
+                                  onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    assignIssue(issue.id, agent.id);
+                                  }}
+                                >
+                                  <Identity name={agent.name} size="sm" className="min-w-0" />
+                                </button>
+                              ))}
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    </>
+                  )}
+                  trailingMeta={formatDate(issue.createdAt)}
+                />
               ))}
             </CollapsibleContent>
           </Collapsible>
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index ec818c0a..8abafab8 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -12,11 +12,10 @@ import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
 import { queryKeys } from "../lib/queryKeys";
 import { createIssueDetailLocationState } from "../lib/issueDetailBreadcrumb";
-import { StatusIcon } from "../components/StatusIcon";
-import { PriorityIcon } from "../components/PriorityIcon";
 import { EmptyState } from "../components/EmptyState";
 import { PageSkeleton } from "../components/PageSkeleton";
 import { ApprovalCard } from "../components/ApprovalCard";
+import { IssueRow } from "../components/IssueRow";
 import { StatusBadge } from "../components/StatusBadge";
 import { timeAgo } from "../lib/timeAgo";
 import { Button } from "@/components/ui/button";
@@ -805,62 +804,18 @@ export function Inbox() {
                 const isUnread = issue.isUnreadForMe && !fadingOutIssues.has(issue.id);
                 const isFading = fadingOutIssues.has(issue.id);
                 return (
-                  <Link
+                  <IssueRow
                     key={issue.id}
-                    to={`/issues/${issue.identifier ?? issue.id}`}
-                    state={issueLinkState}
-                    className="flex min-w-0 cursor-pointer items-start gap-2 px-3 py-3 no-underline text-inherit transition-colors hover:bg-accent/50 sm:items-center sm:gap-3 sm:px-4"
-                  >
-                    <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center self-center">
-                      {(isUnread || isFading) ? (
-                        <span
-                          role="button"
-                          tabIndex={0}
-                          onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            markReadMutation.mutate(issue.id);
-                          }}
-                          onKeyDown={(e) => {
-                            if (e.key === "Enter" || e.key === " ") {
-                              e.preventDefault();
-                              e.stopPropagation();
-                              markReadMutation.mutate(issue.id);
-                            }
-                          }}
-                          className="inline-flex h-4 w-4 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
-                          aria-label="Mark as read"
-                        >
-                          <span
-                            className={`block h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400 transition-opacity duration-300 ${
-                              isFading ? "opacity-0" : "opacity-100"
-                            }`}
-                          />
-                        </span>
-                      ) : (
-                        <span className="inline-flex h-4 w-4" aria-hidden="true" />
-                      )}
-                    </span>
-
-                    <span className="hidden shrink-0 self-center sm:inline-flex"><PriorityIcon priority={issue.priority} /></span>
-                    <span className="inline-flex shrink-0 self-center"><StatusIcon status={issue.status} /></span>
-                    <span className="hidden shrink-0 self-center text-xs font-mono text-muted-foreground sm:inline">
-                      {issue.identifier ?? issue.id.slice(0, 8)}
-                    </span>
-                    <span className="min-w-0 flex-1 text-sm">
-                      <span className="line-clamp-2 min-w-0 sm:line-clamp-1 sm:block sm:truncate">
-                        {issue.title}
-                      </span>
-                      <span className="mt-1 block text-[11px] font-mono text-muted-foreground sm:hidden">
-                        {issue.identifier ?? issue.id.slice(0, 8)}
-                      </span>
-                    </span>
-                    <span className="hidden shrink-0 self-center text-xs text-muted-foreground sm:block">
-                      {issue.lastExternalCommentAt
+                    issue={issue}
+                    issueLinkState={issueLinkState}
+                    unreadState={isUnread ? "visible" : isFading ? "fading" : "hidden"}
+                    onMarkRead={() => markReadMutation.mutate(issue.id)}
+                    trailingMeta={
+                      issue.lastExternalCommentAt
                         ? `commented ${timeAgo(issue.lastExternalCommentAt)}`
-                        : `updated ${timeAgo(issue.updatedAt)}`}
-                    </span>
-                  </Link>
+                        : `updated ${timeAgo(issue.updatedAt)}`
+                    }
+                  />
                 );
               })}
             </div>