hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor shared issue rows

Browse Source 
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
2026-03-11 20:51:28 -05:00
parent 33c6d093ab
commit 3b9da0ee95
3 changed files with 249 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
ui/src/components/IssueRow.tsx Normal file
View File

@@ -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>
);
}

270
ui/src/components/IssuesList.tsx
View File

@@ -1,5 +1,4 @@
import { useEffect, useMemo, useState, useCallback, useRef } from "react"; import { useEffect, useMemo, useState, useCallback, useRef } from "react";
import { Link } from "@/lib/router";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useDialog } from "../context/DialogContext"; import { useDialog } from "../context/DialogContext";
import { useCompany } from "../context/CompanyContext"; import { useCompany } from "../context/CompanyContext";
@@ -12,6 +11,7 @@ import { StatusIcon } from "./StatusIcon";
import { PriorityIcon } from "./PriorityIcon"; import { PriorityIcon } from "./PriorityIcon";
import { EmptyState } from "./EmptyState"; import { EmptyState } from "./EmptyState";
import { Identity } from "./Identity"; import { Identity } from "./Identity";
import { IssueRow } from "./IssueRow";
import { PageSkeleton } from "./PageSkeleton"; import { PageSkeleton } from "./PageSkeleton";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@@ -590,162 +590,144 @@ export function IssuesList({
)} )}
<CollapsibleContent> <CollapsibleContent>
{group.items.map((issue) => ( {group.items.map((issue) => (
<Link <IssueRow
key={issue.id} key={issue.id}
to={`/issues/${issue.identifier ?? issue.id}`} issue={issue}
state={issueLinkState} issueLinkState={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" className="border-b border-border last:border-b-0 sm:px-3"
> statusControl={(
{/* Status icon - left column on mobile, inline on desktop */} <span
<span className="shrink-0 pt-px sm:hidden" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}> onClick={(e) => {
<StatusIcon e.preventDefault();
status={issue.status} e.stopPropagation();
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("");
}} }}
> >
<PopoverTrigger asChild> <StatusIcon
<button status={issue.status}
className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 hover:bg-accent/50 transition-colors" onChange={(s) => onUpdateIssue(issue.id, { status: s })}
onClick={(e) => { />
e.preventDefault(); </span>
e.stopPropagation(); )}
}} mobileMeta={timeAgo(issue.updatedAt)}
> trailingContent={(
{issue.assigneeAgentId && agentName(issue.assigneeAgentId) ? ( <>
<Identity name={agentName(issue.assigneeAgentId)!} size="sm" /> {(issue.labels ?? []).length > 0 && (
) : ( <span className="hidden items-center gap-1 overflow-hidden md:flex md:max-w-[240px]">
<span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground"> {(issue.labels ?? []).slice(0, 3).map((label) => (
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-muted-foreground/35 bg-muted/30"> <span
<User className="h-3 w-3" /> key={label.id}
</span> className="inline-flex items-center rounded-full border px-1.5 py-0.5 text-[10px] font-medium"
Assignee 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>
)} )}
</button> </span>
</PopoverTrigger> )}
<PopoverContent {liveIssueIds?.has(issue.id) && (
className="w-56 p-1" <span className="inline-flex items-center gap-1.5 rounded-full bg-blue-500/10 px-2 py-0.5">
align="end" <span className="relative flex h-2 w-2">
onClick={(e) => e.stopPropagation()} <span className="absolute inline-flex h-full w-full animate-pulse rounded-full bg-blue-400 opacity-75" />
onPointerDownOutside={() => setAssigneeSearch("")} <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 <PopoverTrigger asChild>
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">
<button <button
className={cn( className="flex w-[180px] shrink-0 items-center rounded-md px-2 py-1 transition-colors hover:bg-accent/50"
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
!issue.assigneeAgentId && "bg-accent"
)}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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> </button>
{(agents ?? []) </PopoverTrigger>
.filter((agent) => { <PopoverContent
if (!assigneeSearch.trim()) return true; className="w-56 p-1"
return agent.name.toLowerCase().includes(assigneeSearch.toLowerCase()); align="end"
}) onClick={(e) => e.stopPropagation()}
.map((agent) => ( onPointerDownOutside={() => setAssigneeSearch("")}
<button >
key={agent.id} <input
className={cn( 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"
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 text-left", placeholder="Search agents..."
issue.assigneeAgentId === agent.id && "bg-accent" value={assigneeSearch}
)} onChange={(e) => setAssigneeSearch(e.target.value)}
onClick={(e) => { autoFocus
e.preventDefault(); />
e.stopPropagation(); <div className="max-h-48 overflow-y-auto overscroll-contain">
assignIssue(issue.id, agent.id); <button
}} className={cn(
> "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent/50",
<Identity name={agent.name} size="sm" className="min-w-0" /> !issue.assigneeAgentId && "bg-accent",
</button> )}
))} onClick={(e) => {
</div> e.preventDefault();
</PopoverContent> e.stopPropagation();
</Popover> assignIssue(issue.id, null);
<span className="text-xs text-muted-foreground"> }}
{formatDate(issue.createdAt)} >
</span> No assignee
</span> </button>
</Link> {(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> </CollapsibleContent>
</Collapsible> </Collapsible>

67
ui/src/pages/Inbox.tsx
View File

@@ -12,11 +12,10 @@ import { useCompany } from "../context/CompanyContext";
import { useBreadcrumbs } from "../context/BreadcrumbContext"; import { useBreadcrumbs } from "../context/BreadcrumbContext";
import { queryKeys } from "../lib/queryKeys"; import { queryKeys } from "../lib/queryKeys";
import { createIssueDetailLocationState } from "../lib/issueDetailBreadcrumb"; import { createIssueDetailLocationState } from "../lib/issueDetailBreadcrumb";
import { StatusIcon } from "../components/StatusIcon";
import { PriorityIcon } from "../components/PriorityIcon";
import { EmptyState } from "../components/EmptyState"; import { EmptyState } from "../components/EmptyState";
import { PageSkeleton } from "../components/PageSkeleton"; import { PageSkeleton } from "../components/PageSkeleton";
import { ApprovalCard } from "../components/ApprovalCard"; import { ApprovalCard } from "../components/ApprovalCard";
import { IssueRow } from "../components/IssueRow";
import { StatusBadge } from "../components/StatusBadge"; import { StatusBadge } from "../components/StatusBadge";
import { timeAgo } from "../lib/timeAgo"; import { timeAgo } from "../lib/timeAgo";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@@ -805,62 +804,18 @@ export function Inbox() {
const isUnread = issue.isUnreadForMe && !fadingOutIssues.has(issue.id); const isUnread = issue.isUnreadForMe && !fadingOutIssues.has(issue.id);
const isFading = fadingOutIssues.has(issue.id); const isFading = fadingOutIssues.has(issue.id);
return ( return (
<Link <IssueRow
key={issue.id} key={issue.id}
to={`/issues/${issue.identifier ?? issue.id}`} issue={issue}
state={issueLinkState} issueLinkState={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" unreadState={isUnread ? "visible" : isFading ? "fading" : "hidden"}
> onMarkRead={() => markReadMutation.mutate(issue.id)}
<span className="inline-flex h-4 w-4 shrink-0 items-center justify-center self-center"> trailingMeta={
{(isUnread || isFading) ? ( issue.lastExternalCommentAt
<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
? `commented ${timeAgo(issue.lastExternalCommentAt)}` ? `commented ${timeAgo(issue.lastExternalCommentAt)}`
: `updated ${timeAgo(issue.updatedAt)}`} : `updated ${timeAgo(issue.updatedAt)}`
</span> }
</Link> />
); );
})} })}
</div> </div>