From 1f308b43428646c273864641bbce130d3c1a637f 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:25:17 +0200
Subject: [PATCH] =?UTF-8?q?redesign:=20triage=20panel=20=E2=80=94=20compac?=
 =?UTF-8?q?t,=20visual,=20actionable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Colored status dot with glow ring in header (at-a-glance)
- Status change via colored dots (click circles, not text pills)
- Subject + ID + queue + owner in one compact line
- Open full view is now a subtle chevron button, not a giant CTA
- Take it button appears inline when unassigned
- Activity feed as a timeline with connecting line and dots
- Shorter transaction labels with inline values

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/app/page.tsx | 165 +++++++++++++++++++++----------------------
 1 file changed, 80 insertions(+), 85 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 0c208ce..dbb1021 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1071,113 +1071,109 @@ function TicketWorkbenchContent() {
           </div>
         )}
 
-        <aside className="hidden min-h-0 border-l border-border bg-card/76 backdrop-blur xl:flex xl:flex-col">
+        <aside className="hidden min-h-0 border-l border-border bg-card/82 xl:flex xl:flex-col">
           {selectedTicket ? (
             <>
-              <div className="border-b border-border bg-card/82 p-4">
-                <div className="flex items-start justify-between gap-2">
-                  <div className="min-w-0">
-                    <p className="font-mono text-[11px] font-semibold text-muted-foreground">
-                      {formatTicketId(selectedTicket.id)}
-                    </p>
-                    <h2 className="mt-1 text-sm font-semibold leading-snug text-foreground line-clamp-2">
+              {/* Compact header */}
+              <div className="border-b border-border px-4 py-3">
+                <div className="flex items-center gap-2.5">
+                  <span
+                    className="h-3 w-3 shrink-0 rounded-full ring-2 ring-offset-1 ring-offset-card"
+                    style={{
+                      backgroundColor: STATUS_META[selectedTicket.status]?.color ?? "#71717a",
+                      boxShadow: `0 0 0 2px color-mix(in srgb, ${STATUS_META[selectedTicket.status]?.color ?? "#71717a"} 20%, transparent)`,
+                    }}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-xs font-semibold leading-tight text-foreground line-clamp-2">
                       {selectedTicket.subject}
-                    </h2>
-                    <p className="mt-1 text-xs text-muted-foreground">
-                      {queueName(queues, selectedTicket.queue_id)} · {selectedTicket.owner_id ? users.find((u) => u.id === selectedTicket.owner_id)?.username ?? "assigned" : "unassigned"}
+                    </p>
+                    <p className="mt-0.5 flex items-center gap-1 text-[10px] text-muted-foreground">
+                      <span className="font-mono">{formatTicketId(selectedTicket.id)}</span>
+                      <span>·</span>
+                      <span>{queueName(queues, selectedTicket.queue_id)}</span>
+                      {selectedTicket.owner_id && (
+                        <>
+                          <span>·</span>
+                          <span>{users.find((u) => u.id === selectedTicket.owner_id)?.username}</span>
+                        </>
+                      )}
                     </p>
                   </div>
-                  <TicketStatusBadge status={selectedTicket.status} />
+                  <button
+                    onClick={() => router.push(`/tickets/${selectedTicket.id}`)}
+                    className="shrink-0 rounded p-1 text-muted-foreground/50 hover:bg-accent hover:text-foreground"
+                    title="Open full view"
+                  >
+                    <ChevronRightIcon className="h-4 w-4" />
+                  </button>
                 </div>
 
-                <div className="mt-3 flex flex-wrap gap-1">
-                  {statusOptions.filter((s) => s.key !== "all").slice(0, 4).map((s) => {
-                    const allowed = selectedTicket.status !== s.key;
+                {/* Status dots — visual, clickable */}
+                <div className="mt-3 flex items-center gap-1.5">
+                  {["new", "open", "in_progress", "resolved", "closed"].map((s) => {
+                    const isCurrent = selectedTicket.status === s;
+                    const color = STATUS_META[s]?.color ?? "#71717a";
                     return (
                       <button
-                        key={s.key}
+                        key={s}
                         type="button"
-                        disabled={!allowed}
-                        onClick={() => handleQuickStatus(selectedTicket.id, s.key)}
+                        disabled={isCurrent}
+                        onClick={() => handleQuickStatus(selectedTicket.id, s)}
+                        title={statusLabel(s)}
                         className={cn(
-                          "rounded px-2 py-1 text-[11px] font-semibold transition-colors",
-                          selectedTicket.status === s.key
-                            ? "bg-primary/10 text-primary"
-                            : allowed
-                              ? "bg-muted/60 text-muted-foreground hover:bg-accent hover:text-foreground"
-                              : "cursor-default text-muted-foreground/40"
+                          "h-3.5 w-3.5 rounded-full transition-all",
+                          isCurrent
+                            ? "ring-2 ring-offset-1 ring-offset-card scale-125"
+                            : "opacity-40 hover:opacity-80 hover:scale-110",
                         )}
-                      >
-                        {s.label}
-                      </button>
+                        style={{ backgroundColor: color }}
+                      />
                     );
                   })}
-                </div>
-
-                <div className="mt-2 flex gap-2">
-                  <Button
-                    onClick={() => router.push(`/tickets/${selectedTicket.id}`)}
-                    className="h-7 flex-1 bg-primary text-xs"
-                    size="sm"
-                  >
-                    Open full view
-                    <ChevronRightIcon className="ml-1 h-3.5 w-3.5" />
-                  </Button>
                   {!selectedTicket.owner_id && (
-                    <Button
-                      variant="outline"
-                      size="sm"
+                    <button
                       onClick={() => handleQuickAssign(selectedTicket.id)}
-                      className="h-7 text-xs"
+                      className="ml-auto rounded border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
                     >
-                      Assign to me
-                    </Button>
+                      Take it
+                    </button>
                   )}
                 </div>
               </div>
 
+              {/* Activity feed — compact timeline */}
               <div className="flex-1 overflow-auto">
                 {selectedTxs.length === 0 ? (
-                  <div className="p-4 text-center text-xs text-muted-foreground">
-                    No activity yet.
-                  </div>
+                  <div className="p-4 text-center text-xs text-muted-foreground">No activity</div>
                 ) : (
-                  <div className="divide-y divide-border/50">
-                    {selectedTxs.slice(0, 8).map((tx) => (
-                      <div key={tx.id} className="px-4 py-2.5">
-                        <div className="flex items-center gap-2">
-                          <span className="text-[11px] font-semibold text-foreground">
-                            {tx.transaction_type === "Create" ? "Created" :
-                             tx.transaction_type === "StatusChange" ? "Status changed" :
-                             tx.transaction_type === "SetOwner" ? "Owner changed" :
-                             tx.transaction_type === "Comment" ? "Comment" :
-                             tx.transaction_type === "Correspond" ? "Reply" :
-                             tx.transaction_type === "SetTeam" ? "Team changed" :
-                             tx.transaction_type === "CustomFieldChange" ? `${tx.field} set` :
-                             tx.transaction_type}
-                          </span>
-                          {tx.transaction_type === "StatusChange" && tx.new_value && (
-                            <span className={cn(
-                              "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-semibold",
-                              STATUS_META[tx.new_value]?.tone ?? "bg-muted text-muted-foreground"
-                            )}>
-                              {statusLabel(tx.new_value)}
-                            </span>
-                          )}
-                          {tx.old_value && tx.new_value && tx.transaction_type !== "StatusChange" && (
-                            <span className="text-[10px] text-muted-foreground">
-                              {tx.old_value} → {tx.new_value}
-                            </span>
-                          )}
+                  <div className="py-1">
+                    {selectedTxs.slice(0, 6).map((tx) => (
+                      <div key={tx.id} className="flex gap-3 px-4 py-2">
+                        <div className="relative flex flex-col items-center pt-0.5">
+                          <div className="h-1.5 w-1.5 rounded-full bg-border" />
+                          <div className="mt-1 flex-1 w-px bg-border/30" />
                         </div>
-                        {tx.data && (tx.data as any).body && (
-                          <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
-                            {(tx.data as any).body}
+                        <div className="min-w-0 flex-1 pb-1">
+                          <p className="text-xs text-foreground/90">
+                            {tx.transaction_type === "Create" ? "Created" :
+                             tx.transaction_type === "StatusChange" ? `Status → ${tx.new_value ? statusLabel(tx.new_value) : "?"}` :
+                             tx.transaction_type === "SetOwner" ? `Owner → ${tx.new_value ? users.find((u) => u.id === tx.new_value)?.username ?? "assigned" : "unassigned"}` :
+                             tx.transaction_type === "Correspond" ? "Reply" :
+                             tx.transaction_type === "Comment" ? "Internal note" :
+                             tx.transaction_type === "SetTeam" ? `Team changed` :
+                             tx.transaction_type === "CustomFieldChange" ? `${tx.field} → ${tx.new_value}` :
+                             tx.transaction_type}
                           </p>
-                        )}
-                        <p className="mt-0.5 text-[10px] text-muted-foreground/60">
-                          {formatDistanceToNow(new Date(tx.created_at), { addSuffix: true })}
-                        </p>
+                          {tx.data && (tx.data as any).body && (
+                            <p className="mt-0.5 line-clamp-2 text-[11px] leading-relaxed text-muted-foreground">
+                              {(tx.data as any).body}
+                            </p>
+                          )}
+                          <p className="mt-0.5 text-[10px] text-muted-foreground/50">
+                            {formatDistanceToNow(new Date(tx.created_at), { addSuffix: true })}
+                          </p>
+                        </div>
                       </div>
                     ))}
                   </div>
@@ -1186,11 +1182,10 @@ function TicketWorkbenchContent() {
             </>
           ) : (
             <div className="flex flex-1 flex-col items-center justify-center gap-2 p-6 text-center">
-              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted/50">
-                <ChevronRightIcon className="h-5 w-5 text-muted-foreground/40" />
+              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted/30">
+                <ChevronRightIcon className="h-5 w-5 text-muted-foreground/30" />
               </div>
-              <p className="text-sm text-muted-foreground">Select a ticket</p>
-              <p className="text-xs text-muted-foreground/60">Quick actions and activity will appear here</p>
+              <p className="text-xs text-muted-foreground">Select a ticket to triage</p>
             </div>
           )}
         </aside>