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

Move unread badge inline with metadata row in inbox

Browse Source 
Moves the unread dot from a separate left column into the metadata
line (alongside status/identifier), with an empty placeholder for
read items to keep spacing consistent. Reduces left padding on
mobile inbox rows to reclaim space.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
2026-03-07 20:04:41 -06:00
parent ce8fe38ffc
commit a96556b8f4
1 changed files with 25 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -897,12 +897,16 @@ 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 (
<div <Link
key={issue.id} key={issue.id}
className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-accent/50" 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"
> >
<span className="flex h-5 w-4 shrink-0 items-center justify-center mt-0.5 sm:mt-0"> <span className="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">
{(isUnread || isFading) && ( {issue.title}
</span>
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
{(isUnread || isFading) ? (
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@@ -910,7 +914,7 @@ export function Inbox() {
e.stopPropagation(); e.stopPropagation();
markReadMutation.mutate(issue.id); markReadMutation.mutate(issue.id);
}} }}
className="group/dot flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-blue-500/20" className="group/dot flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
aria-label="Mark as read" aria-label="Mark as read"
> >
<span <span
@@ -919,32 +923,24 @@ export function Inbox() {
}`} }`}
/> />
</button> </button>
) : (
<span className="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">
&middot;
</span>
<span className="text-xs text-muted-foreground sm:order-last">
{issue.lastExternalCommentAt
? `commented ${timeAgo(issue.lastExternalCommentAt)}`
: `updated ${timeAgo(issue.updatedAt)}`}
</span>
</span> </span>
<Link </Link>
to={`/issues/${issue.identifier ?? issue.id}`}
className="flex flex-1 min-w-0 cursor-pointer flex-col gap-1 no-underline text-inherit sm:flex-row 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">
{issue.title}
</span>
<span className="flex items-center gap-2 sm:order-1 sm: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">
&middot;
</span>
<span className="text-xs text-muted-foreground sm:order-last">
{issue.lastExternalCommentAt
? `commented ${timeAgo(issue.lastExternalCommentAt)}`
: `updated ${timeAgo(issue.updatedAt)}`}
</span>
</span>
</Link>
</div>
); );
})} })}
</div> </div>