aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up routine activity tab: remove pill badges, use inline text

Browse Source 
Replace the cluttered rounded-full bordered pills around each activity
detail with clean inline text separated by dot separators. Wrap in a
bordered card container matching the runs tab style.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dotta
2026-03-20 06:39:04 -05:00
parent 4c6e8e6053
commit b72279afe4
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/pages/RoutineDetail.tsx
View File

@@ -1004,20 +1004,24 @@ export function RoutineDetail() {
{(activity ?? []).length === 0 ? ( {(activity ?? []).length === 0 ? (
<p className="text-xs text-muted-foreground">No activity yet.</p> <p className="text-xs text-muted-foreground">No activity yet.</p>
) : ( ) : (
<div className="space-y-1.5"> <div className="border border-border rounded-lg divide-y divide-border">
{(activity ?? []).map((event) => ( {(activity ?? []).map((event) => (
<div key={event.id} className="flex items-center gap-1.5 text-xs text-muted-foreground"> <div key={event.id} className="flex items-center justify-between px-3 py-2 text-xs gap-4">
<span className="font-medium text-foreground/80">{event.action.replaceAll(".", " ")}</span> <div className="flex items-center gap-2 min-w-0">
{event.details && Object.keys(event.details).length > 0 && ( <span className="font-medium text-foreground/90 shrink-0">{event.action.replaceAll(".", " ")}</span>
<> {event.details && Object.keys(event.details).length > 0 && (
{Object.entries(event.details).slice(0, 3).map(([key, value]) => ( <span className="text-muted-foreground truncate">
<span key={key} className="rounded-full border border-border px-1.5 py-0.5"> {Object.entries(event.details).slice(0, 3).map(([key, value], i) => (
{key.replaceAll("_", " ")}: {formatActivityDetailValue(value)} <span key={key}>
</span> {i > 0 && <span className="mx-1 text-border">·</span>}
))} <span className="text-muted-foreground/70">{key.replaceAll("_", " ")}:</span>{" "}
</> {formatActivityDetailValue(value)}
)} </span>
<span className="ml-auto shrink-0">{timeAgo(event.createdAt)}</span> ))}
</span>
)}
</div>
<span className="text-muted-foreground/60 shrink-0">{timeAgo(event.createdAt)}</span>
</div> </div>
))} ))}
</div> </div>