From ee662d628a7a41fd5c761dac007375df72c39691 Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Wed, 10 Jun 2026 15:32:24 +0100
Subject: [PATCH] Add hover highlighting to live view cue add buttons

Replicates the :has() CSS pattern from the config cue/script editors to the
live show view. When cue edit mode is active, hovering the add-cue button
applies a faint white overlay to the script row. Applied to the inner content
row (not the root container) to avoid conflicting with the existing .current-line
blue highlight. Updated all four components: standard and compact viewers in
both the Vue 2 and Vue 3 clients.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/show/live/ScriptLineViewer.vue | 11 ++++++++--
 .../show/live/ScriptLineViewerCompact.vue     | 20 +++++++++++++++----
 .../show/live/ScriptLineViewer.vue            | 11 ++++++++--
 .../show/live/ScriptLineViewerCompact.vue     | 14 +++++++++----
 4 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/client-v3/src/components/show/live/ScriptLineViewer.vue b/client-v3/src/components/show/live/ScriptLineViewer.vue
index 3c8a10ea..063772a3 100644
--- a/client-v3/src/components/show/live/ScriptLineViewer.vue
+++ b/client-v3/src/components/show/live/ScriptLineViewer.vue
@@ -64,6 +64,7 @@
         </template>
       </BRow>
       <BRow
+        class="line-row"
         :class="{
           'stage-direction': line.line_type === LINE_TYPES.STAGE_DIRECTION,
           'heading-padding': line.line_type === LINE_TYPES.DIALOGUE && needsHeadingsAll,
@@ -144,7 +145,7 @@
             <BButton
               v-if="cueAddMode"
               variant="success"
-              class="cue-button ms-1"
+              class="cue-button add-cue-btn ms-1"
               :disabled="isLineCut"
               @click.stop="addNewCue"
             >
@@ -170,7 +171,7 @@
             <BButton
               v-if="cueAddMode"
               variant="success"
-              class="cue-button ms-1"
+              class="cue-button add-cue-btn ms-1"
               :disabled="isLineCut"
               @click.stop="addNewCue"
             >
@@ -439,6 +440,12 @@ onUnmounted(() => {
   padding: 0.2rem;
 }
 
+.line-row:has(.add-cue-btn:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
 .stage-direction {
   margin-top: 1rem;
   margin-bottom: 1rem;
diff --git a/client-v3/src/components/show/live/ScriptLineViewerCompact.vue b/client-v3/src/components/show/live/ScriptLineViewerCompact.vue
index a5d35085..bb088382 100644
--- a/client-v3/src/components/show/live/ScriptLineViewerCompact.vue
+++ b/client-v3/src/components/show/live/ScriptLineViewerCompact.vue
@@ -56,7 +56,7 @@
         </BCol>
         <BCol v-if="cueAddMode" cols="1" class="cue-add-column" />
       </BRow>
-      <BRow>
+      <BRow class="line-row">
         <template v-if="line.line_type === LINE_TYPES.DIALOGUE">
           <template v-for="(part, index) in line.line_parts" :key="`part_${lineIndex}_${index}`">
             <BCol
@@ -88,7 +88,9 @@
             cols="1"
             class="cue-add-column d-flex align-items-center justify-content-center"
           >
-            <BButton variant="success" size="sm" @click.stop="addNewCue"><IMdiPlusBox /></BButton>
+            <BButton variant="success" size="sm" class="add-cue-btn" @click.stop="addNewCue"
+              ><IMdiPlusBox
+            /></BButton>
           </BCol>
         </template>
         <template v-else-if="line.line_type === LINE_TYPES.STAGE_DIRECTION">
@@ -113,7 +115,9 @@
             cols="1"
             class="cue-add-column d-flex align-items-center justify-content-center"
           >
-            <BButton variant="success" size="sm" @click.stop="addNewCue"><IMdiPlusBox /></BButton>
+            <BButton variant="success" size="sm" class="add-cue-btn" @click.stop="addNewCue"
+              ><IMdiPlusBox
+            /></BButton>
           </BCol>
         </template>
         <template v-else-if="line.line_type === LINE_TYPES.CUE_LINE">
@@ -124,7 +128,9 @@
             cols="1"
             class="cue-add-column d-flex align-items-center justify-content-center"
           >
-            <BButton variant="success" size="sm" @click.stop="addNewCue"><IMdiPlusBox /></BButton>
+            <BButton variant="success" size="sm" class="add-cue-btn" @click.stop="addNewCue"
+              ><IMdiPlusBox
+            /></BButton>
           </BCol>
         </template>
       </BRow>
@@ -337,4 +343,10 @@ onUnmounted(() => {
 .cue-add-column {
   border-left: 0.1rem solid #3498db;
 }
+
+.line-row:has(.add-cue-btn:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
 </style>
diff --git a/client/src/vue_components/show/live/ScriptLineViewer.vue b/client/src/vue_components/show/live/ScriptLineViewer.vue
index a0342197..0996c6ee 100644
--- a/client/src/vue_components/show/live/ScriptLineViewer.vue
+++ b/client/src/vue_components/show/live/ScriptLineViewer.vue
@@ -66,6 +66,7 @@
       </template>
     </b-row>
     <b-row
+      class="line-row"
       :class="{
         'stage-direction': line.line_type === LINE_TYPES.STAGE_DIRECTION,
         'heading-padding': line.line_type === LINE_TYPES.DIALOGUE && needsHeadingsAll,
@@ -150,7 +151,7 @@
             </b-button>
             <b-button
               v-if="cueAddMode"
-              class="cue-button"
+              class="cue-button add-cue-btn"
               :disabled="isWholeLineCut(line)"
               @click.stop="addNewCue"
             >
@@ -175,7 +176,7 @@
             </b-button>
             <b-button
               v-if="cueAddMode"
-              class="cue-button"
+              class="cue-button add-cue-btn"
               :disabled="isWholeLineCut(line)"
               @click.stop="addNewCue"
             >
@@ -393,6 +394,12 @@ export default defineComponent({
   padding: 0.2rem;
 }
 
+.line-row:has(.add-cue-btn:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
+
 .stage-direction {
   margin-top: 1rem;
   margin-bottom: 1rem;
diff --git a/client/src/vue_components/show/live/ScriptLineViewerCompact.vue b/client/src/vue_components/show/live/ScriptLineViewerCompact.vue
index c447b9b7..81f198df 100644
--- a/client/src/vue_components/show/live/ScriptLineViewerCompact.vue
+++ b/client/src/vue_components/show/live/ScriptLineViewerCompact.vue
@@ -70,7 +70,7 @@
         <b-col v-if="cueAddMode" cols="1" class="cue-add-column" />
       </b-row>
     </template>
-    <b-row>
+    <b-row class="line-row">
       <template v-if="line.line_type === LINE_TYPES.DIALOGUE">
         <template v-for="(part, index) in line.line_parts">
           <b-col
@@ -106,7 +106,7 @@
           cols="1"
           class="cue-add-column d-flex align-items-center justify-content-center"
         >
-          <b-button variant="success" size="sm" @click.stop="addNewCue">
+          <b-button variant="success" size="sm" class="add-cue-btn" @click.stop="addNewCue">
             <b-icon-plus-square-fill />
           </b-button>
         </b-col>
@@ -141,7 +141,7 @@
           cols="1"
           class="cue-add-column d-flex align-items-center justify-content-center"
         >
-          <b-button variant="success" size="sm" @click.stop="addNewCue">
+          <b-button variant="success" size="sm" class="add-cue-btn" @click.stop="addNewCue">
             <b-icon-plus-square-fill />
           </b-button>
         </b-col>
@@ -158,7 +158,7 @@
           cols="1"
           class="cue-add-column d-flex align-items-center justify-content-center"
         >
-          <b-button variant="success" size="sm" @click.stop="addNewCue">
+          <b-button variant="success" size="sm" class="add-cue-btn" @click.stop="addNewCue">
             <b-icon-plus-square-fill />
           </b-button>
         </b-col>
@@ -327,4 +327,10 @@ export default defineComponent({
 .cue-add-column {
   border-left: 0.1rem solid #3498db;
 }
+
+.line-row:has(.add-cue-btn:hover) {
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+}
 </style>