From 3a7ba689ed0d2436c2cc63886a90aa2912b3bc96 Mon Sep 17 00:00:00 2001
From: twotalesanimation <80506065+twotalesanimation@users.noreply.github.com>
Date: Sat, 17 Oct 2026 09:08:35 +0200
Subject: [PATCH] feat(shot-status): show new-comment count on section headers

Episode, scene and group headers carry an orange "!" with the number of
their shots that have new comments, so a collapsed section still shows
there is something to read.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../shot-status/ShotStatusClient.tsx          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/app/(dashboard)/shot-status/ShotStatusClient.tsx b/app/(dashboard)/shot-status/ShotStatusClient.tsx
index d102162..e40840e 100644
--- a/app/(dashboard)/shot-status/ShotStatusClient.tsx
+++ b/app/(dashboard)/shot-status/ShotStatusClient.tsx
@@ -909,6 +909,23 @@ function DeliveryCell({ delivery, shotVersion }: { delivery: ShotDeliverySummary
   );
 }
 
+/** On a section header: how many of its shots have new comments, so a
+ *  collapsed episode, scene or group still shows there is something to read. */
+function SectionUnreadBadge({ shots }: { shots: ShotRow[] }) {
+  const flagged = shots.filter((s) => s.unreadComments).length;
+  if (!flagged) return null;
+  const label = `${flagged} shot${flagged !== 1 ? "s" : ""} with new comments`;
+  return (
+    <span
+      title={label}
+      aria-label={label}
+      className="flex items-center gap-0.5 rounded-full bg-orange-500 px-1.5 h-4 text-[10px] font-bold leading-none text-white shrink-0"
+    >
+      !<span className="font-medium">{flagged}</span>
+    </span>
+  );
+}
+
 function ShotTable({
   shots,
   canManage,
@@ -1680,6 +1697,7 @@ export function ShotStatusClient({
                           <span className="text-xs text-zinc-500 font-normal">
                             {episodeShots.length} shot{episodeShots.length !== 1 ? "s" : ""}
                           </span>
+                          <SectionUnreadBadge shots={episodeShots} />
                           {epDueDate && (
                             <span className={cn(
                               "flex items-center gap-1 text-xs",
@@ -1739,6 +1757,7 @@ export function ShotStatusClient({
                           <span className="text-xs text-zinc-500 font-normal">
                             {sceneShots.length} shot{sceneShots.length !== 1 ? "s" : ""}
                           </span>
+                          <SectionUnreadBadge shots={sceneShots} />
                         </button>
                       </div>
                       {!collapsed && (
@@ -1789,6 +1808,7 @@ export function ShotStatusClient({
                           <span className="text-xs text-zinc-500 font-normal">
                             {groupShots.length} shot{groupShots.length !== 1 ? "s" : ""}
                           </span>
+                          <SectionUnreadBadge shots={groupShots} />
                         </button>
                       </div>
                       {!collapsed && (