Add underlined game selector with typed filtering in preview center

src/dashboard/example/components/ScoreboardPanel.vue

@@ -26,8 +26,9 @@ const rightCountryOptions = ref(countryOptions);
 
 const leftCharacterInput = ref('');
 const rightCharacterInput = ref('');
+const gameInput = ref('');
 
-const fightingGameOptions = [
+const allFightingGameOptions = [
   'Street Fighter 6',
   'TEKKEN 8',
   'Guilty Gear -Strive-',
@@ -40,6 +41,8 @@ const fightingGameOptions = [
   value: game,
 }));
 
+const fightingGameOptions = ref(allFightingGameOptions);
+
 const characterOptions = computed(() => getCharactersByGame(scoreboardStore.scoreboard.game));
 type CharacterOption = ReturnType<typeof getCharactersByGame>[number];
 const leftCharacterOptions = ref<CharacterOption[]>([]);
@@ -120,6 +123,17 @@ const onRightCharacterFilter = (value: string, update: (callback: () => void) =>
   filterCharacters(value, update, rightCharacterOptions);
 };
 
+const onGameFilter = (value: string, update: (callback: () => void) => void) => {
+  update(() => {
+    const needle = value.toLowerCase().trim();
+    if (!needle) {
+      fightingGameOptions.value = allFightingGameOptions;
+      return;
+    }
+    fightingGameOptions.value = allFightingGameOptions.filter((game) => game.label.toLowerCase().includes(needle));
+  });
+};
+
 const playerOptions = computed(() => {
   const base = [{ label: '(Sin asignar)', value: '' }];
   const entries = Object.entries(playersStore.players) as [string, Schemas.Players[string]][];
@@ -621,6 +635,16 @@ watchEffect(() => {
   }
 });
 
+
+watch(
+  () => scoreboardStore.scoreboard.game,
+  (value) => {
+    const match = allFightingGameOptions.find((option) => option.value === value);
+    gameInput.value = match?.label ?? '';
+  },
+  { immediate: true },
+);
+
 watch(
   () => scoreboardStore.scoreboard.game,
   () => {
@@ -797,6 +821,22 @@ watch(
       </div>
 
       <div class="scoreboard-preview__center">
+        <QSelect
+          v-model="scoreboardStore.scoreboard.game"
+          v-model:input-value="gameInput"
+          :options="fightingGameOptions"
+          label="Juego"
+          dense
+          emit-value
+          map-options
+          use-input
+          input-debounce="0"
+          hide-selected
+          fill-input
+          class="scoreboard-preview__field scoreboard-preview__game-field"
+          @filter="onGameFilter"
+        />
+
         <div class="scoreboard-preview__score-controls">
           <div class="scoreboard-preview__score-side">
             <QBtn
@@ -1412,6 +1452,10 @@ watch(
   gap: 10px;
 }
 
+.scoreboard-preview__game-field {
+  width: min(100%, 240px);
+}
+
 .scoreboard-preview__score-controls {
   display: flex;
   align-items: center;