diff --git a/ui/src/components/IssueRow.tsx b/ui/src/components/IssueRow.tsx index 67e4f654..5de9bf00 100644 --- a/ui/src/components/IssueRow.tsx +++ b/ui/src/components/IssueRow.tsx @@ -10,9 +10,11 @@ type UnreadState = "hidden" | "visible" | "fading"; interface IssueRowProps { issue: Issue; issueLinkState?: unknown; - statusControl?: ReactNode; + mobileLeading?: ReactNode; + desktopMetaLeading?: ReactNode; + desktopLeadingSpacer?: boolean; mobileMeta?: ReactNode; - trailingContent?: ReactNode; + desktopTrailing?: ReactNode; trailingMeta?: ReactNode; unreadState?: UnreadState | null; onMarkRead?: () => void; @@ -22,9 +24,11 @@ interface IssueRowProps { export function IssueRow({ issue, issueLinkState, - statusControl, + mobileLeading, + desktopMetaLeading, + desktopLeadingSpacer = false, mobileMeta, - trailingContent, + desktopTrailing, trailingMeta, unreadState = null, onMarkRead, @@ -40,39 +44,50 @@ export function IssueRow({ 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", + "flex items-start gap-2 border-b border-border py-2.5 pl-2 pr-3 text-sm no-underline text-inherit transition-colors hover:bg-accent/50 last:border-b-0 sm:items-center sm:py-2 sm:pl-1", className, )} > - - + + {mobileLeading ?? } - - {statusControl ?? } - - - {identifier} - - - + + {issue.title} - - {identifier} + + {desktopLeadingSpacer ? ( + + ) : null} + {desktopMetaLeading ?? ( + <> + + + + + + + + {identifier} + + + )} {mobileMeta ? ( <> - - {mobileMeta} + + {mobileMeta} ) : null} - {trailingContent ? ( - {trailingContent} - ) : null} - {trailingMeta ? ( - - {trailingMeta} + {(desktopTrailing || trailingMeta) ? ( + + {desktopTrailing} + {trailingMeta ? ( + {trailingMeta} + ) : null} ) : null} {showUnreadSlot ? ( diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx index e28e2fb5..6899bd5c 100644 --- a/ui/src/components/IssuesList.tsx +++ b/ui/src/components/IssuesList.tsx @@ -594,8 +594,8 @@ export function IssuesList({ key={issue.id} issue={issue} issueLinkState={issueLinkState} - className="border-b border-border last:border-b-0 sm:px-3" - statusControl={( + desktopLeadingSpacer + mobileLeading={( { e.preventDefault(); @@ -608,8 +608,41 @@ export function IssuesList({ /> )} + desktopMetaLeading={( + <> + + + + { + e.preventDefault(); + e.stopPropagation(); + }} + > + onUpdateIssue(issue.id, { status: s })} + /> + + + {issue.identifier ?? issue.id.slice(0, 8)} + + {liveIssueIds?.has(issue.id) && ( + + + + + + + Live + + + )} + + )} mobileMeta={timeAgo(issue.updatedAt)} - trailingContent={( + desktopTrailing={( <> {(issue.labels ?? []).length > 0 && ( @@ -633,17 +666,6 @@ export function IssuesList({ )} )} - {liveIssueIds?.has(issue.id) && ( - - - - - - - Live - - - )} { diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx index 8abafab8..c9ee9b08 100644 --- a/ui/src/pages/Inbox.tsx +++ b/ui/src/pages/Inbox.tsx @@ -799,7 +799,7 @@ export function Inbox() { <> {showSeparatorBefore("issues_i_touched") && }
-
+
{(tab === "unread" ? unreadTouchedIssues : touchedIssues).map((issue) => { const isUnread = issue.isUnreadForMe && !fadingOutIssues.has(issue.id); const isFading = fadingOutIssues.has(issue.id);