From 661673921497ed65ad706605adb02527b0f9aa3b Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Fri, 13 Feb 2026 00:46:47 +0100
Subject: [PATCH] Reposition preview fields and restore edit/save behavior

---
 .../example/components/ScoreboardPanel.vue    | 321 ++++++++++++------
 1 file changed, 212 insertions(+), 109 deletions(-)

diff --git a/src/dashboard/example/components/ScoreboardPanel.vue b/src/dashboard/example/components/ScoreboardPanel.vue
index cc4cba1..5e1ae49 100644
--- a/src/dashboard/example/components/ScoreboardPanel.vue
+++ b/src/dashboard/example/components/ScoreboardPanel.vue
@@ -647,55 +647,102 @@ watch(
       class="scoreboard-preview"
     >
       <div class="scoreboard-preview__side">
-        <div class="scoreboard-preview__image-wrap">
-          <img
-            v-if="leftPanelImage"
-            :src="leftPanelImage"
-            :alt="`${leftDisplayName || 'Left'} preview`"
-            class="scoreboard-preview__image"
-          >
-          <div
-            v-else
-            class="scoreboard-preview__empty"
-          >
-            Left image
+        <div class="scoreboard-preview__side-inner">
+          <div class="scoreboard-preview__image-wrap">
+            <img
+              v-if="leftPanelImage"
+              :src="leftPanelImage"
+              :alt="`${leftDisplayName || 'Left'} preview`"
+              class="scoreboard-preview__image"
+            >
+            <div
+              v-else
+              class="scoreboard-preview__empty"
+            >
+              Left image
+            </div>
+          </div>
+          <div class="scoreboard-preview__controls">
+            <QSelect
+              v-model="scoreboardStore.scoreboard.leftPlayerId"
+              v-model:input-value="leftInput"
+              :options="leftPlayerOptions"
+              label="Player"
+              dense
+              emit-value
+              map-options
+              use-input
+              input-debounce="0"
+              hide-selected
+              fill-input
+              options-dense
+              class="scoreboard-preview__field"
+              @filter="onLeftFilter"
+              @focus="onLeftFocus"
+              @blur="onLeftBlur"
+              @update:model-value="onLeftSelect"
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftShowsNameSave"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="onLeftNameSave"
+                />
+              </template>
+            </QSelect>
+            <QInput
+              v-model="scoreboardStore.scoreboard.leftTeamOverride"
+              label="Team"
+              dense
+              class="scoreboard-preview__field"
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftTeamChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveLeftTeamChange"
+                />
+              </template>
+            </QInput>
+            <QSelect
+              v-model="scoreboardStore.scoreboard.leftCountryOverride"
+              v-model:input-value="leftCountryInput"
+              :options="leftCountryOptions"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+              use-input
+              input-debounce="0"
+              hide-selected
+              fill-input
+              clearable
+              label="Country"
+              dense
+              class="scoreboard-preview__field"
+              @filter="onLeftCountryFilter"
+            >
+              <template #append>
+                <QBtn
+                  v-if="leftCountryChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveLeftCountryChange"
+                />
+              </template>
+            </QSelect>
           </div>
-        </div>
-        <div class="scoreboard-preview__controls">
-          <QSelect
-            v-model="scoreboardStore.scoreboard.leftPlayerId"
-            :options="leftPlayerOptions"
-            label="Player"
-            dense
-            emit-value
-            map-options
-            options-dense
-            class="scoreboard-preview__field"
-            @update:model-value="onLeftSelect"
-          />
-          <QInput
-            v-model="scoreboardStore.scoreboard.leftTeamOverride"
-            label="Team"
-            dense
-            class="scoreboard-preview__field"
-          />
-          <QSelect
-            v-model="scoreboardStore.scoreboard.leftCountryOverride"
-            :options="leftCountryOptions"
-            option-value="value"
-            option-label="label"
-            emit-value
-            map-options
-            use-input
-            input-debounce="0"
-            hide-selected
-            fill-input
-            clearable
-            label="Country"
-            dense
-            class="scoreboard-preview__field"
-            @filter="onLeftCountryFilter"
-          />
         </div>
       </div>
 
@@ -744,55 +791,102 @@ watch(
       </div>
 
       <div class="scoreboard-preview__side scoreboard-preview__side--right">
-        <div class="scoreboard-preview__image-wrap">
-          <img
-            v-if="rightPanelImage"
-            :src="rightPanelImage"
-            :alt="`${rightDisplayName || 'Right'} preview`"
-            class="scoreboard-preview__image"
-          >
-          <div
-            v-else
-            class="scoreboard-preview__empty"
-          >
-            Right image
+        <div class="scoreboard-preview__side-inner">
+          <div class="scoreboard-preview__controls">
+            <QSelect
+              v-model="scoreboardStore.scoreboard.rightPlayerId"
+              v-model:input-value="rightInput"
+              :options="rightPlayerOptions"
+              label="Player"
+              dense
+              emit-value
+              map-options
+              use-input
+              input-debounce="0"
+              hide-selected
+              fill-input
+              options-dense
+              class="scoreboard-preview__field"
+              @filter="onRightFilter"
+              @focus="onRightFocus"
+              @blur="onRightBlur"
+              @update:model-value="onRightSelect"
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightShowsNameSave"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="onRightNameSave"
+                />
+              </template>
+            </QSelect>
+            <QInput
+              v-model="scoreboardStore.scoreboard.rightTeamOverride"
+              label="Team"
+              dense
+              class="scoreboard-preview__field"
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightTeamChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveRightTeamChange"
+                />
+              </template>
+            </QInput>
+            <QSelect
+              v-model="scoreboardStore.scoreboard.rightCountryOverride"
+              v-model:input-value="rightCountryInput"
+              :options="rightCountryOptions"
+              option-value="value"
+              option-label="label"
+              emit-value
+              map-options
+              use-input
+              input-debounce="0"
+              hide-selected
+              fill-input
+              clearable
+              label="Country"
+              dense
+              class="scoreboard-preview__field"
+              @filter="onRightCountryFilter"
+            >
+              <template #append>
+                <QBtn
+                  v-if="rightCountryChanged"
+                  flat
+                  round
+                  dense
+                  icon="save"
+                  color="primary"
+                  @click.stop="saveRightCountryChange"
+                />
+              </template>
+            </QSelect>
+          </div>
+          <div class="scoreboard-preview__image-wrap">
+            <img
+              v-if="rightPanelImage"
+              :src="rightPanelImage"
+              :alt="`${rightDisplayName || 'Right'} preview`"
+              class="scoreboard-preview__image"
+            >
+            <div
+              v-else
+              class="scoreboard-preview__empty"
+            >
+              Right image
+            </div>
           </div>
-        </div>
-        <div class="scoreboard-preview__controls">
-          <QSelect
-            v-model="scoreboardStore.scoreboard.rightPlayerId"
-            :options="rightPlayerOptions"
-            label="Player"
-            dense
-            emit-value
-            map-options
-            options-dense
-            class="scoreboard-preview__field"
-            @update:model-value="onRightSelect"
-          />
-          <QInput
-            v-model="scoreboardStore.scoreboard.rightTeamOverride"
-            label="Team"
-            dense
-            class="scoreboard-preview__field"
-          />
-          <QSelect
-            v-model="scoreboardStore.scoreboard.rightCountryOverride"
-            :options="rightCountryOptions"
-            option-value="value"
-            option-label="label"
-            emit-value
-            map-options
-            use-input
-            input-debounce="0"
-            hide-selected
-            fill-input
-            clearable
-            label="Country"
-            dense
-            class="scoreboard-preview__field"
-            @filter="onRightCountryFilter"
-          />
         </div>
       </div>
     </QCard>
@@ -1123,14 +1217,22 @@ watch(
 
 .scoreboard-preview__side {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: flex-start;
+  align-items: center;
+}
+
+.scoreboard-preview__side-inner {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .scoreboard-preview__side--right {
   text-align: right;
-  align-items: flex-end;
+}
+
+.scoreboard-preview__side--right .scoreboard-preview__side-inner {
+  justify-content: flex-end;
 }
 
 .scoreboard-preview__image-wrap {
@@ -1161,15 +1263,8 @@ watch(
   font-weight: 600;
 }
 
-.scoreboard-preview__name {
-  font-size: 1.1rem;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-
 .scoreboard-preview__controls {
-  width: min(100%, 320px);
+  width: min(100%, 260px);
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -1268,9 +1363,17 @@ watch(
     width: min(100%, 280px);
   }
 
+  .scoreboard-preview__side-inner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   .scoreboard-preview__side--right {
     text-align: left;
-    align-items: flex-start;
+  }
+
+  .scoreboard-preview__side--right .scoreboard-preview__side-inner {
+    justify-content: flex-start;
   }
 }