From 5308ee8653f6fdf698100efabd862da73655efaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gjermund=20H=C3=B8s=C3=B8ien=20Wiggen?=
 <gjermund.wiggen@sikt.no>
Date: Tue, 9 Jun 2026 22:40:56 +0200
Subject: [PATCH] redesign: clean ticket list with status dot + hover checkbox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 web/src/app/page.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 978431a..1acde3f 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -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>