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",
density === "compact" ? "min-h-7" : "min-h-8"
)} 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) => (
<div
key={col.key}
@@ -925,7 +925,7 @@ function TicketWorkbenchContent() {
onDoubleClick={() => router.push(`/tickets/${ticket.id}`)}
onKeyDown={(e) => { if (e.key === "Enter") router.push(`/tickets/${ticket.id}`); }}
className={cn(
"cursor-pointer border-b border-border/80",
"group cursor-pointer border-b border-border/80",
density === "compact" ? "" : "",
selected
? "bg-accent/80 shadow-[inset_3px_0_0_var(--primary)]"
@@ -933,12 +933,17 @@ function TicketWorkbenchContent() {
)}
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
type="checkbox"
checked={batchIds.has(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>
{availableColumns.filter((c) => c.visible).map((col) => {
@@ -1014,7 +1019,7 @@ function TicketWorkbenchContent() {
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" />
</div>
</div>