gjermund/tessera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: clean ticket list with status dot + hover checkbox

Browse Source 
- Colored status dot per row for instant status recognition
- Checkbox appears on hover (group-hover) for batch selection
- No side panel — full width, clean list
- Click row → navigate to ticket detail
- Removed hover status change dots per user feedback

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Gjermund Høsøien Wiggen
2026-06-09 22:40:56 +02:00
parent 667979c4b2
commit 5308ee8653
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/app/page.tsx
View File

@@ -888,7 +888,7 @@ function TicketWorkbenchContent() {
"sticky top-0 z-10 border-b border-border bg-muted/50", "sticky top-0 z-10 border-b border-border bg-muted/50",
density === "compact" ? "min-h-7" : "min-h-8" density === "compact" ? "min-h-7" : "min-h-8"
)} style={{ display: "table-row" }}> )} style={{ display: "table-row" }}>
<div style={{ display: "table-cell", width: 36 }} /> <div style={{ display: "table-cell", width: 48 }} />
{availableColumns.filter((c) => c.visible).map((col, idx, arr) => ( {availableColumns.filter((c) => c.visible).map((col, idx, arr) => (
<div <div
key={col.key} key={col.key}
@@ -925,7 +925,7 @@ function TicketWorkbenchContent() {
onDoubleClick={() => router.push(`/tickets/${ticket.id}`)} onDoubleClick={() => router.push(`/tickets/${ticket.id}`)}
onKeyDown={(e) => { if (e.key === "Enter") router.push(`/tickets/${ticket.id}`); }} onKeyDown={(e) => { if (e.key === "Enter") router.push(`/tickets/${ticket.id}`); }}
className={cn( className={cn(
"cursor-pointer border-b border-border/80", "group cursor-pointer border-b border-border/80",
density === "compact" ? "" : "", density === "compact" ? "" : "",
selected selected
? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]" ? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]"
@@ -933,12 +933,17 @@ function TicketWorkbenchContent() {
)} )}
style={{ display: "table-row" }} style={{ display: "table-row" }}
> >
<div className="flex items-center justify-center" style={{ display: "table-cell", width: 36, verticalAlign: "middle" }} onClick={(e) => e.stopPropagation()}> <div className="flex items-center justify-center gap-1.5" style={{ display: "table-cell", width: 48, verticalAlign: "middle" }} onClick={(e) => e.stopPropagation()}>
<input <input
type="checkbox" type="checkbox"
checked={batchIds.has(ticket.id)} checked={batchIds.has(ticket.id)}
onChange={() => toggleBatchId(ticket.id)} onChange={() => toggleBatchId(ticket.id)}
className="h-3.5 w-3.5 rounded border-border accent-primary" className="h-3 w-3 rounded border-border accent-primary opacity-0 group-hover:opacity-100 transition-opacity"
/>
<span
className="h-2 w-2 rounded-full shrink-0"
style={{ backgroundColor: STATUS_META[ticket.status]?.color ?? "#71717a" }}
title={statusLabel(ticket.status)}
/> />
</div> </div>
{availableColumns.filter((c) => c.visible).map((col) => { {availableColumns.filter((c) => c.visible).map((col) => {
@@ -1014,7 +1019,7 @@ function TicketWorkbenchContent() {
return <div key={col.key} style={cellStyle} />; return <div key={col.key} style={cellStyle} />;
} }
})} })}
<div className="flex justify-end px-2 text-muted-foreground" style={{ display: "table-cell", width: 48, verticalAlign: "middle" }}> <div className="flex items-center justify-end px-2 text-muted-foreground/30" style={{ display: "table-cell", width: 48, verticalAlign: "middle" }}>
<ChevronRightIcon className="h-4 w-4" /> <ChevronRightIcon className="h-4 w-4" />
</div> </div>
</div> </div>