GitHub-style mobile issue rows: status left column, hide priority, unread dot right
- Move status icon to left column on mobile across issues list, inbox, and dashboard - Hide priority icon on mobile (only show on desktop) - Move unread indicator dot to right side vertically centered on mobile inbox - Stale work section: show status icon instead of clock on mobile - Desktop layout unchanged Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
@@ -591,39 +591,50 @@ export function IssuesList({
|
|||||||
<Link
|
<Link
|
||||||
key={issue.id}
|
key={issue.id}
|
||||||
to={`/issues/${issue.identifier ?? issue.id}`}
|
to={`/issues/${issue.identifier ?? issue.id}`}
|
||||||
className="flex flex-col gap-1 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:flex-row sm:items-center sm:gap-2 sm:py-2 sm:pl-1"
|
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"
|
||||||
>
|
>
|
||||||
{/* Title line - first on mobile, middle on desktop */}
|
{/* Status icon - left column on mobile, inline on desktop */}
|
||||||
<span className="line-clamp-2 text-sm pl-1 sm:order-2 sm:flex-1 sm:min-w-0 sm:pl-0 sm:line-clamp-none sm:truncate">
|
<span className="shrink-0 pt-0.5 sm:hidden" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
|
||||||
{issue.title}
|
<StatusIcon
|
||||||
|
status={issue.status}
|
||||||
|
onChange={(s) => onUpdateIssue(issue.id, { status: s })}
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{/* Metadata line - second on mobile, first on desktop */}
|
{/* Right column on mobile: title + metadata stacked */}
|
||||||
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
<span className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
|
||||||
{/* Spacer matching caret width so status icon aligns with group title (hidden on mobile) */}
|
{/* Title line */}
|
||||||
<span className="w-3.5 shrink-0 hidden sm:block" />
|
<span className="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">
|
||||||
<PriorityIcon priority={issue.priority} />
|
{issue.title}
|
||||||
<span className="shrink-0" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
|
|
||||||
<StatusIcon
|
|
||||||
status={issue.status}
|
|
||||||
onChange={(s) => onUpdateIssue(issue.id, { status: s })}
|
|
||||||
/>
|
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs text-muted-foreground font-mono shrink-0">
|
|
||||||
{issue.identifier ?? issue.id.slice(0, 8)}
|
{/* Metadata line */}
|
||||||
</span>
|
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
||||||
{liveIssueIds?.has(issue.id) && (
|
{/* Spacer matching caret width so status icon aligns with group title (hidden on mobile) */}
|
||||||
<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="w-3.5 shrink-0 hidden sm:block" />
|
||||||
<span className="relative flex h-2 w-2">
|
<span className="hidden sm:inline-flex"><PriorityIcon priority={issue.priority} /></span>
|
||||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
|
<span className="hidden shrink-0 sm:inline-flex" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
|
||||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
|
<StatusIcon
|
||||||
</span>
|
status={issue.status}
|
||||||
<span className="text-[11px] font-medium text-blue-600 dark:text-blue-400 hidden sm:inline">Live</span>
|
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-ping 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">·</span>
|
||||||
|
<span className="text-xs text-muted-foreground sm:hidden">
|
||||||
|
{timeAgo(issue.updatedAt)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
|
||||||
<span className="text-xs text-muted-foreground sm:hidden">·</span>
|
|
||||||
<span className="text-xs text-muted-foreground sm:hidden">
|
|
||||||
{timeAgo(issue.updatedAt)}
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|||||||
@@ -315,25 +315,33 @@ export function Dashboard() {
|
|||||||
to={`/issues/${issue.identifier ?? issue.id}`}
|
to={`/issues/${issue.identifier ?? issue.id}`}
|
||||||
className="px-4 py-3 text-sm cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit block"
|
className="px-4 py-3 text-sm cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit block"
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
|
<div className="flex items-start gap-2 sm:items-center sm:gap-3">
|
||||||
<span className="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">
|
{/* Status icon - left column on mobile */}
|
||||||
{issue.title}
|
<span className="shrink-0 pt-0.5 sm:hidden">
|
||||||
</span>
|
|
||||||
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
|
||||||
<PriorityIcon priority={issue.priority} />
|
|
||||||
<StatusIcon status={issue.status} />
|
<StatusIcon status={issue.status} />
|
||||||
<span className="text-xs font-mono text-muted-foreground">
|
</span>
|
||||||
{issue.identifier ?? issue.id.slice(0, 8)}
|
|
||||||
|
{/* Right column on mobile: title + metadata stacked */}
|
||||||
|
<span className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
|
||||||
|
<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>
|
</span>
|
||||||
{issue.assigneeAgentId && (() => {
|
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
||||||
const name = agentName(issue.assigneeAgentId);
|
<span className="hidden sm:inline-flex"><PriorityIcon priority={issue.priority} /></span>
|
||||||
return name
|
<span className="hidden sm:inline-flex"><StatusIcon status={issue.status} /></span>
|
||||||
? <span className="hidden sm:inline-flex"><Identity name={name} size="sm" /></span>
|
<span className="text-xs font-mono text-muted-foreground">
|
||||||
: null;
|
{issue.identifier ?? issue.id.slice(0, 8)}
|
||||||
})()}
|
</span>
|
||||||
<span className="text-xs text-muted-foreground sm:hidden">·</span>
|
{issue.assigneeAgentId && (() => {
|
||||||
<span className="text-xs text-muted-foreground shrink-0 sm:order-last">
|
const name = agentName(issue.assigneeAgentId);
|
||||||
{timeAgo(issue.updatedAt)}
|
return name
|
||||||
|
? <span className="hidden sm:inline-flex"><Identity name={name} size="sm" /></span>
|
||||||
|
: null;
|
||||||
|
})()}
|
||||||
|
<span className="text-xs text-muted-foreground sm:hidden">·</span>
|
||||||
|
<span className="text-xs text-muted-foreground shrink-0 sm:order-last">
|
||||||
|
{timeAgo(issue.updatedAt)}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -841,9 +841,14 @@ export function Inbox() {
|
|||||||
{staleIssues.map((issue) => (
|
{staleIssues.map((issue) => (
|
||||||
<div
|
<div
|
||||||
key={issue.id}
|
key={issue.id}
|
||||||
className="group/stale relative flex items-start gap-3 overflow-hidden px-4 py-3 transition-colors hover:bg-accent/50"
|
className="group/stale relative flex items-start gap-2 overflow-hidden px-3 py-3 transition-colors hover:bg-accent/50 sm:items-center sm:gap-3 sm:px-4"
|
||||||
>
|
>
|
||||||
<Clock className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground sm:mt-0" />
|
{/* Status icon - left column on mobile; Clock icon on desktop */}
|
||||||
|
<span className="shrink-0 pt-0.5 sm:hidden">
|
||||||
|
<StatusIcon status={issue.status} />
|
||||||
|
</span>
|
||||||
|
<Clock className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground hidden sm:block sm:mt-0" />
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
to={`/issues/${issue.identifier ?? issue.id}`}
|
to={`/issues/${issue.identifier ?? issue.id}`}
|
||||||
className="flex min-w-0 flex-1 cursor-pointer flex-col gap-1 no-underline text-inherit sm:flex-row sm:items-center sm:gap-3"
|
className="flex min-w-0 flex-1 cursor-pointer flex-col gap-1 no-underline text-inherit sm:flex-row sm:items-center sm:gap-3"
|
||||||
@@ -852,8 +857,8 @@ export function Inbox() {
|
|||||||
{issue.title}
|
{issue.title}
|
||||||
</span>
|
</span>
|
||||||
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
||||||
<PriorityIcon priority={issue.priority} />
|
<span className="hidden sm:inline-flex"><PriorityIcon priority={issue.priority} /></span>
|
||||||
<StatusIcon status={issue.status} />
|
<span className="hidden sm:inline-flex"><StatusIcon status={issue.status} /></span>
|
||||||
<span className="shrink-0 text-xs font-mono text-muted-foreground">
|
<span className="shrink-0 text-xs font-mono text-muted-foreground">
|
||||||
{issue.identifier ?? issue.id.slice(0, 8)}
|
{issue.identifier ?? issue.id.slice(0, 8)}
|
||||||
</span>
|
</span>
|
||||||
@@ -900,54 +905,90 @@ export function Inbox() {
|
|||||||
<Link
|
<Link
|
||||||
key={issue.id}
|
key={issue.id}
|
||||||
to={`/issues/${issue.identifier ?? issue.id}`}
|
to={`/issues/${issue.identifier ?? issue.id}`}
|
||||||
className="flex min-w-0 cursor-pointer flex-col gap-1 px-3 py-3 no-underline text-inherit transition-colors hover:bg-accent/50 sm:flex-row sm:items-center sm:gap-3 sm:px-4"
|
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="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">
|
{/* Status icon - left column on mobile, inline on desktop */}
|
||||||
{issue.title}
|
<span className="shrink-0 pt-0.5 sm:hidden">
|
||||||
|
<StatusIcon status={issue.status} />
|
||||||
</span>
|
</span>
|
||||||
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
|
||||||
{(isUnread || isFading) ? (
|
{/* Right column on mobile: title + metadata stacked */}
|
||||||
<span
|
<span className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
|
||||||
role="button"
|
<span className="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">
|
||||||
tabIndex={0}
|
{issue.title}
|
||||||
onClick={(e) => {
|
</span>
|
||||||
e.preventDefault();
|
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
|
||||||
e.stopPropagation();
|
{(isUnread || isFading) ? (
|
||||||
markReadMutation.mutate(issue.id);
|
<span
|
||||||
}}
|
role="button"
|
||||||
onKeyDown={(e) => {
|
tabIndex={0}
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
onClick={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
markReadMutation.mutate(issue.id);
|
markReadMutation.mutate(issue.id);
|
||||||
}
|
}}
|
||||||
}}
|
onKeyDown={(e) => {
|
||||||
className="inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
aria-label="Mark as read"
|
e.preventDefault();
|
||||||
>
|
e.stopPropagation();
|
||||||
<span
|
markReadMutation.mutate(issue.id);
|
||||||
className={`h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400 transition-opacity duration-300 ${
|
}
|
||||||
isFading ? "opacity-0" : "opacity-100"
|
}}
|
||||||
}`}
|
className="hidden sm:inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
|
||||||
/>
|
aria-label="Mark as read"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`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="hidden sm:inline-flex h-4 w-4 shrink-0" />
|
||||||
|
)}
|
||||||
|
<span className="hidden sm:inline-flex"><PriorityIcon priority={issue.priority} /></span>
|
||||||
|
<span className="hidden sm:inline-flex"><StatusIcon status={issue.status} /></span>
|
||||||
|
<span className="text-xs font-mono text-muted-foreground">
|
||||||
|
{issue.identifier ?? issue.id.slice(0, 8)}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground sm:hidden">
|
||||||
|
·
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground sm:order-last">
|
||||||
|
{issue.lastExternalCommentAt
|
||||||
|
? `commented ${timeAgo(issue.lastExternalCommentAt)}`
|
||||||
|
: `updated ${timeAgo(issue.updatedAt)}`}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
|
||||||
<span className="inline-flex h-4 w-4 shrink-0" />
|
|
||||||
)}
|
|
||||||
<PriorityIcon priority={issue.priority} />
|
|
||||||
<StatusIcon status={issue.status} />
|
|
||||||
<span className="text-xs font-mono text-muted-foreground">
|
|
||||||
{issue.identifier ?? issue.id.slice(0, 8)}
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-muted-foreground sm:hidden">
|
|
||||||
·
|
|
||||||
</span>
|
|
||||||
<span className="text-xs text-muted-foreground sm:order-last">
|
|
||||||
{issue.lastExternalCommentAt
|
|
||||||
? `commented ${timeAgo(issue.lastExternalCommentAt)}`
|
|
||||||
: `updated ${timeAgo(issue.updatedAt)}`}
|
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
{/* Unread dot - right side, vertically centered (mobile only; desktop keeps inline) */}
|
||||||
|
{(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="shrink-0 self-center cursor-pointer sm:hidden"
|
||||||
|
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>
|
||||||
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
Reference in New Issue
Block a user