Tune preview action icons and character filter behavior

src/dashboard/example/components/ScoreboardPanel.vue

@@ -41,6 +41,9 @@ const fightingGameOptions = [
 }));
 
 const characterOptions = computed(() => getCharactersByGame(scoreboardStore.scoreboard.game));
+type CharacterOption = ReturnType<typeof getCharactersByGame>[number];
+const leftCharacterOptions = ref<CharacterOption[]>([]);
+const rightCharacterOptions = ref<CharacterOption[]>([]);
 
 const leftCharacterImage = computed(() => {
   const match = characterOptions.value.find((option) => option.value === scoreboardStore.scoreboard.leftCharacter);
@@ -93,6 +96,30 @@ const onRightCountryFilter = (value: string, update: (callback: () => void) => v
   filterCountries(value, update, rightCountryOptions);
 };
 
+
+const filterCharacters = (
+  value: string,
+  update: (callback: () => void) => void,
+  target: Ref<CharacterOption[]>,
+) => {
+  update(() => {
+    const needle = value.toLowerCase().trim();
+    if (!needle) {
+      target.value = characterOptions.value;
+      return;
+    }
+    target.value = characterOptions.value.filter((character) => character.label.toLowerCase().includes(needle));
+  });
+};
+
+const onLeftCharacterFilter = (value: string, update: (callback: () => void) => void) => {
+  filterCharacters(value, update, leftCharacterOptions);
+};
+
+const onRightCharacterFilter = (value: string, update: (callback: () => void) => void) => {
+  filterCharacters(value, update, rightCharacterOptions);
+};
+
 const playerOptions = computed(() => {
   const base = [{ label: '(Sin asignar)', value: '' }];
   const entries = Object.entries(playersStore.players) as [string, Schemas.Players[string]][];
@@ -598,6 +625,8 @@ watch(
   () => scoreboardStore.scoreboard.game,
   () => {
     const options = getCharactersByGame(scoreboardStore.scoreboard.game);
+    leftCharacterOptions.value = options;
+    rightCharacterOptions.value = options;
     const allowed = new Set(options.map((option) => option.value));
 
     if (!allowed.has(scoreboardStore.scoreboard.leftCharacter)) {
@@ -666,7 +695,7 @@ watch(
             <QSelect
               v-model="scoreboardStore.scoreboard.leftCharacter"
               v-model:input-value="leftCharacterInput"
-              :options="characterOptions"
+              :options="leftCharacterOptions"
               option-value="value"
               option-label="label"
               emit-value
@@ -680,6 +709,7 @@ watch(
               clearable
               class="scoreboard-preview__field scoreboard-preview__character-field"
               :disable="!scoreboardStore.scoreboard.game"
+              @filter="onLeftCharacterFilter"
             />
           </div>
           <div class="scoreboard-preview__controls">
@@ -813,17 +843,17 @@ watch(
 
         <div class="scoreboard-preview__actions">
           <QBtn
-            color="secondary"
-            outline
-            round
+            flat
+            dense
             icon="swap_horiz"
+            class="scoreboard-preview__action-btn"
             @click="scoreboardStore.swapPlayers"
           />
           <QBtn
-            color="secondary"
-            outline
-            round
+            flat
+            dense
             icon="restart_alt"
+            class="scoreboard-preview__action-btn"
             @click="scoreboardStore.resetScores"
           />
         </div>
@@ -930,7 +960,7 @@ watch(
             <QSelect
               v-model="scoreboardStore.scoreboard.rightCharacter"
               v-model:input-value="rightCharacterInput"
-              :options="characterOptions"
+              :options="rightCharacterOptions"
               option-value="value"
               option-label="label"
               emit-value
@@ -944,6 +974,7 @@ watch(
               clearable
               class="scoreboard-preview__field scoreboard-preview__character-field"
               :disable="!scoreboardStore.scoreboard.game"
+              @filter="onRightCharacterFilter"
             />
           </div>
         </div>
@@ -1351,6 +1382,10 @@ watch(
   margin: 0;
 }
 
+.scoreboard-preview__character-field {
+  margin-top: 2px;
+}
+
 .scoreboard-preview__field :deep(.q-field__control) {
   min-height: 28px;
   padding: 0;
@@ -1390,6 +1425,16 @@ watch(
   gap: 10px;
 }
 
+.scoreboard-preview__action-btn {
+  color: #fff;
+  opacity: 0.85;
+}
+
+.scoreboard-preview__action-btn:hover {
+  opacity: 1;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
+}
+
 .scoreboard-preview__score-side {
   display: inline-flex;
   flex-direction: column;