From 634e5fcd320003836618d9166f5407ad63d62c0b Mon Sep 17 00:00:00 2001
From: wkotheimer <wkotheimer@gmail.com>
Date: Fri, 11 Sep 2026 22:40:05 -0500
Subject: [PATCH] Show which clips are in play in the arrange view too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sidebar there says "Put 2 of 8 on the clipboard" and that highlighted
clips are the ones in play, but its rows showed no highlight: selection had
only ever been drawn in the compact list. Two views of the same spool
disagreeing about what is in play is the thing invariant 6 is against.

The rows now light and recede exactly as the compact list's do. They are not
clickable here — the arrange view exists to reorder, and a click-to-select
would fight the drag handle — so the choice is made in the compact view and
merely seen in this one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/renderer/components/ArrangeList.tsx  | 14 +++++++++++++-
 src/renderer/components/ExpandedView.tsx |  6 +++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ArrangeList.tsx b/src/renderer/components/ArrangeList.tsx
index 825c2c4..aa43e19 100644
--- a/src/renderer/components/ArrangeList.tsx
+++ b/src/renderer/components/ArrangeList.tsx
@@ -30,11 +30,14 @@ import { moveClip, sourceLabel } from '../helpers/ArrangeListHelper'
 export function ArrangeList({
   clips,
   cursorClipId,
+  hasSelection,
   onChange,
   onDelete
 }: {
   clips: readonly ClipView[]
   cursorClipId: string | null
+  /** Whether a subset is in play, so the rows can show it the way the compact list does. */
+  hasSelection: boolean
   onChange: (clipIds: string[]) => void
   onDelete: (clipId: string) => void
 }): JSX.Element {
@@ -75,6 +78,8 @@ export function ArrangeList({
               clip={clip}
               position={index + 1}
               isNext={clip.id === cursorClipId}
+              chosen={hasSelection && clip.isSelected}
+              out={hasSelection && !clip.isSelected}
               onMove={(direction) => onChange(moveClip(ids, index, index + direction))}
               onDelete={() => onDelete(clip.id)}
             />
@@ -89,12 +94,17 @@ function Row({
   clip,
   position,
   isNext,
+  chosen,
+  out,
   onMove,
   onDelete
 }: {
   clip: ClipView
   position: number
   isNext: boolean
+  /** Lit and receded as in the compact list, so the two views never disagree about what is in play. */
+  chosen: boolean
+  out: boolean
   onMove: (direction: -1 | 1) => void
   onDelete: () => void
 }): JSX.Element {
@@ -109,7 +119,9 @@ function Row({
       style={{ transform: CSS.Transform.toString(transform), transition }}
       className={[
         'flex items-center gap-2 rounded border px-2 py-1.5',
-        isNext ? 'border-spool-thread/60 bg-spool-thread/10' : 'border-spool-paper/10',
+        isNext ? 'border-spool-thread/60' : 'border-spool-paper/10',
+        chosen ? 'bg-spool-paper/10' : isNext ? 'bg-spool-thread/10' : '',
+        out ? 'opacity-40' : '',
         isDragging ? 'opacity-60' : ''
       ].join(' ')}
     >
diff --git a/src/renderer/components/ExpandedView.tsx b/src/renderer/components/ExpandedView.tsx
index 50e25d3..77f7ae4 100644
--- a/src/renderer/components/ExpandedView.tsx
+++ b/src/renderer/components/ExpandedView.tsx
@@ -61,7 +61,11 @@ export function ExpandedView({
 
       <div className="flex min-h-0 flex-1">
         <section className="min-h-0 flex-1 overflow-y-auto px-4 py-3">
-          <ArrangeList clips={orderedClips} cursorClipId={spool.cursorClipId} onChange={setDraft}
+          <ArrangeList
+            clips={orderedClips}
+            cursorClipId={spool.cursorClipId}
+            hasSelection={spool.hasSelection}
+            onChange={setDraft}
             onDelete={(clipId) => void window.spool.deleteClip(clipId)}
           />
         </section>