feat: add new translations for settings and graphics; implement shortcut conflict detection and reset functionality

src/dashboard/scoreko-dev/i18n.ts

@@ -91,6 +91,12 @@ type Translations = {
   commentaryClear: string;
   aboutChangelog : string;
   aboutTechStackTitle : string;
+  settingsShortcutConflictWarning : string;
+  settingsShortcutStartRecording: string;
+  settingsShortcutStopRecording: string;
+  settingsShortcutResetSingle: string;
+  graphicsCopied : string;
+  graphicsOpenBrowser : string;
 };
 
 const STORAGE_KEY = 'scoreko-dev.language';
@@ -185,6 +191,12 @@ const messages: Record<Locale, Translations> = {
     commentaryClear: 'Clear commentary',
     aboutChangelog: 'Changelog',
     aboutTechStackTitle: 'Tech stack',
+    settingsShortcutConflictWarning: 'This shortcut is already assigned to',
+    settingsShortcutStartRecording: 'Start recording shortcut',
+    settingsShortcutStopRecording: 'Stop recording shortcut',
+    settingsShortcutResetSingle: 'Reset single player score shortcut',
+    graphicsCopied: 'URL copied to clipboard',
+    graphicsOpenBrowser: 'Open in browser',
   },
   es: {
     menuDashboard: 'Panel',
@@ -275,6 +287,12 @@ const messages: Record<Locale, Translations> = {
     commentaryClear: 'Limpiar comentario',
     aboutChangelog: 'Changelog',
     aboutTechStackTitle: 'Tech stack',
+    settingsShortcutConflictWarning: 'This shortcut is already assigned to',
+    settingsShortcutStartRecording: 'Start recording shortcut',
+    settingsShortcutStopRecording: 'Stop recording shortcut',
+    settingsShortcutResetSingle: 'Reset single player score shortcut',
+    graphicsCopied: 'URL copiada al portapapeles',
+    graphicsOpenBrowser: 'Abrir en el navegador',
   },
 };
 

src/dashboard/scoreko-dev/stores/shortcut-settings.ts

@@ -175,9 +175,15 @@ export const useShortcutSettingsStore = defineStore('shortcut-settings', () => {
     persistSettings(shortcuts);
   };
 
+  const resetShortcut = (action: ShortcutAction) => {
+    shortcuts[action] = defaultShortcuts[action];
+    persistSettings(shortcuts);
+  };
+
   return {
     shortcuts,
     setShortcut,
     resetShortcuts,
+    resetShortcut,
   };
 });

src/dashboard/scoreko-dev/views/Graphics.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
 import { useHead } from '@unhead/vue';
+import { computed, ref, watch } from 'vue';
 import bundlePackage from '../../../../package.json';
 import { graphicsSettingsReplicant } from '../../../browser_shared/replicants';
 import { t } from '../i18n';
 
 defineOptions({ name: 'GraphicsView' });
 
-useHead(() => ({ title: t('graphicsTitle') }));type GraphicConfig = {
+type GraphicConfig = {
   name?: string;
   title?: string;
   file: string;
@@ -129,19 +129,29 @@ const cards = computed<GraphicCard[]>(() => {
   return result;
 });
 
-const copyUrl = async (graphic: GraphicConfig) => {
+const copiedCardId = ref<string | null>(null);
+
+const copyUrl = async (graphic: GraphicConfig, cardId: string) => {
   const url = buildGraphicUrl(graphic);
   if (navigator.clipboard?.writeText) {
     await navigator.clipboard.writeText(url);
-    return;
+  } else {
-  }
-
     const input = document.createElement('input');
     input.value = url;
     document.body.appendChild(input);
     input.select();
     document.execCommand('copy');
     document.body.removeChild(input);
+  }
+
+  copiedCardId.value = cardId;
+  setTimeout(() => {
+    copiedCardId.value = null;
+  }, 2000);
+};
+
+const openUrl = (graphic: GraphicConfig) => {
+  window.open(buildGraphicUrl(graphic), '_blank');
 };
 
 const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
@@ -225,11 +235,11 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
 
             <div class="row items-center q-gutter-sm">
               <QBtn
-                color="primary"
+                :color="copiedCardId === card.id ? 'positive' : 'primary'"
-                icon="content_copy"
+                :icon="copiedCardId === card.id ? 'check' : 'content_copy'"
                 no-caps
-                :label="t('graphicsCopyUrl')"
+                :label="copiedCardId === card.id ? t('graphicsCopied') : t('graphicsCopyUrl')"
-                @click="copyUrl(card.graphic)"
+                @click="copyUrl(card.graphic, card.id)"
               />
               <QBtn
                 color="secondary"
@@ -239,6 +249,13 @@ const onDragStart = (event: DragEvent, graphic: GraphicConfig) => {
                 :label="t('graphicsDragObs')"
                 @dragstart="onDragStart($event, card.graphic)"
               />
+              <QBtn
+                color="grey-7"
+                icon="open_in_new"
+                no-caps
+                :label="t('graphicsOpenBrowser')"
+                @click="openUrl(card.graphic)"
+              />
             </div>
           </QCardSection>
         </QCard>

src/dashboard/scoreko-dev/views/Players.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import { useHead } from '@unhead/vue';
 import type { QTableColumn } from 'quasar';
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
 import { getCountryLabel, getCountryOptions } from '../../../shared/countries';
 import type { Schemas } from '../../../types';
 import { locale, t } from '../i18n';
@@ -524,6 +524,20 @@ const hasChallongeTokenConfigured = computed(() => Boolean(challongeToken.value.
 
 const challongeConnectionLabel = computed(() => (hasValidatedChallongeToken.value ? t('playersConnected') : 'Token set'));
 
+const playerSource = (id: string): 'startgg' | 'challonge' | null => {
+  if (id in temporaryStartGGPlayers.value) return 'startgg';
+  if (id in temporaryChallongePlayers.value) return 'challonge';
+  return null;
+};
+
+const playerExpiresAt = (id: string): number | null => {
+  const meta = temporaryStartGGPlayers.value[id] ?? temporaryChallongePlayers.value[id] ?? null;
+  return meta ? meta.expiresAt : null;
+};
+
+const formatExpiresAt = (ts: number): string =>
+  new Date(ts * 1000).toLocaleDateString(locale.value, { month: 'short', day: 'numeric', year: 'numeric' });
+
 const filterChallongeTournaments = (value: string, update: (callback: () => void) => void) => {
   update(() => {
     const needle = value.toLowerCase().trim();
@@ -684,6 +698,22 @@ const openSelectedTournamentImportDialog = () => {
   void openStartGGImportDialog(selectedTournamentOption.value);
 };
 
+const toggleAllStartGGPlayers = () => {
+  if (selectedStartGGPlayerIds.value.length === startGGPlayers.value.length) {
+    selectedStartGGPlayerIds.value = [];
+  } else {
+    selectedStartGGPlayerIds.value = startGGPlayers.value.map((p) => p.id);
+  }
+};
+
+const toggleAllChallongePlayers = () => {
+  if (selectedChallongePlayerIds.value.length === challongePlayers.value.length) {
+    selectedChallongePlayerIds.value = [];
+  } else {
+    selectedChallongePlayerIds.value = challongePlayers.value.map((p) => p.id);
+  }
+};
+
 const importSelectedStartGGPlayers = () => {
   const selectedPlayers = startGGPlayers.value.filter((player) =>
     selectedStartGGPlayerIds.value.includes(player.id),
@@ -837,6 +867,7 @@ onBeforeUnmount(() => {
               <QIcon name="search" />
             </template>
           </QInput>
+          <span class="text-caption text-grey-6">{{ rows.length }} players</span>
           <QBtn
             color="secondary"
             outline
@@ -873,6 +904,45 @@ onBeforeUnmount(() => {
           :filter="filter"
           :rows-per-page-options="[10, 20, 50]"
         >
+          <template #body-cell-gamertag="{ row }">
+            <QTd>
+              <div class="row items-center q-gutter-x-sm">
+                <span class="text-weight-medium">{{ row.gamertag }}</span>
+                <QChip
+                  v-if="playerSource(row.id) === 'startgg'"
+                  dense
+                  outline
+                  color="blue-4"
+                  class="q-ma-none"
+                  style="font-size: 10px; height: 18px;"
+                >
+                  start.gg
+                  <QTooltip v-if="playerExpiresAt(row.id)">
+                    Temporary · expires {{ formatExpiresAt(playerExpiresAt(row.id)!) }}
+                  </QTooltip>
+                </QChip>
+                <QChip
+                  v-else-if="playerSource(row.id) === 'challonge'"
+                  dense
+                  outline
+                  color="orange-4"
+                  class="q-ma-none"
+                  style="font-size: 10px; height: 18px;"
+                >
+                  Challonge
+                  <QTooltip v-if="playerExpiresAt(row.id)">
+                    Temporary · expires {{ formatExpiresAt(playerExpiresAt(row.id)!) }}
+                  </QTooltip>
+                </QChip>
+              </div>
+              <div
+                v-if="row.name"
+                class="text-caption text-grey-6"
+              >
+                {{ row.name }}
+              </div>
+            </QTd>
+          </template>
           <template #body-cell-actions="{ row }">
             <QTd align="right">
               <QBtn
@@ -1199,6 +1269,20 @@ onBeforeUnmount(() => {
             <span>Loading participants...</span>
           </div>
           <div v-else>
+            <div class="row q-gutter-sm q-mb-sm">
+              <QBtn
+                flat
+                dense
+                no-caps
+                size="sm"
+                color="primary"
+                :label="selectedStartGGPlayerIds.length === startGGPlayers.length ? 'Deselect all' : 'Select all'"
+                @click="toggleAllStartGGPlayers"
+              />
+              <span class="text-caption text-grey-6 self-center">
+                {{ selectedStartGGPlayerIds.length }} / {{ startGGPlayers.length }} selected
+              </span>
+            </div>
             <QOptionGroup
               v-model="selectedStartGGPlayerIds"
               type="checkbox"
@@ -1246,6 +1330,20 @@ onBeforeUnmount(() => {
             <span>Loading participants...</span>
           </div>
           <div v-else>
+            <div class="row q-gutter-sm q-mb-sm">
+              <QBtn
+                flat
+                dense
+                no-caps
+                size="sm"
+                color="primary"
+                :label="selectedChallongePlayerIds.length === challongePlayers.length ? 'Deselect all' : 'Select all'"
+                @click="toggleAllChallongePlayers"
+              />
+              <span class="text-caption text-grey-6 self-center">
+                {{ selectedChallongePlayerIds.length }} / {{ challongePlayers.length }} selected
+              </span>
+            </div>
             <QOptionGroup
               v-model="selectedChallongePlayerIds"
               type="checkbox"
@@ -1340,6 +1438,8 @@ onBeforeUnmount(() => {
                   dense
                   class="players-underlined-field"
                   autofocus
+                  :rules="[(v) => !!v?.trim() || 'Gamertag is required']"
+                  lazy-rules
                 />
               </div>
               <div class="col-12">

src/dashboard/scoreko-dev/views/Settings.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from 'vue';
 import { useHead } from '@unhead/vue';
+import { computed, onBeforeUnmount, ref } from 'vue';
 import type { Locale } from '../i18n';
 import { locale, setLocale, t } from '../i18n';
 import {
@@ -28,6 +28,9 @@ const selectedLanguage = computed<Locale>({
 const shortcutSettingsStore = useShortcutSettingsStore();
 const recordingAction = ref<ShortcutAction | null>(null);
 
+// Ref para detectar clicks fuera del contenedor de atajos
+const shortcutsContainerRef = ref<HTMLElement | null>(null);
+
 const shortcutFields = computed<{ action: ShortcutAction; label: string; hint: string }[]>(() => [
   { action: 'leftIncrement', label: t('settingsShortcutLeftIncrementLabel'), hint: t('settingsShortcutLeftIncrementHint') },
   { action: 'leftDecrement', label: t('settingsShortcutLeftDecrementLabel'), hint: t('settingsShortcutLeftDecrementHint') },
@@ -35,6 +38,21 @@ const shortcutFields = computed<{ action: ShortcutAction; label: string; hint: s
   { action: 'rightDecrement', label: t('settingsShortcutRightDecrementLabel'), hint: t('settingsShortcutRightDecrementHint') },
 ]);
 
+// Detecta atajos duplicados entre acciones
+const conflictingActions = computed(() => {
+  const seen = new Map<string, ShortcutAction>();
+  const conflicts = new Set<ShortcutAction>();
+  for (const [action, shortcut] of Object.entries(shortcutSettingsStore.shortcuts) as [ShortcutAction, string][]) {
+    if (seen.has(shortcut)) {
+      conflicts.add(action);
+      conflicts.add(seen.get(shortcut)!);
+    } else {
+      seen.set(shortcut, action);
+    }
+  }
+  return conflicts;
+});
+
 const stopRecording = () => {
   recordingAction.value = null;
   if (typeof document !== 'undefined') {
@@ -43,20 +61,34 @@ const stopRecording = () => {
 };
 
 const onRecordKeydown = (event: KeyboardEvent) => {
-  if (!recordingAction.value) {
+  if (!recordingAction.value) return;
+
+  // Escape cancela la grabación sin asignar ningún atajo
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    stopRecording();
     return;
   }
 
   const shortcut = eventToShortcut(event);
-  if (!shortcut) {
+  if (!shortcut) return;
-    return;
-  }
 
   event.preventDefault();
   shortcutSettingsStore.setShortcut(recordingAction.value, shortcut);
   stopRecording();
 };
 
+// Click fuera del área de atajos también cancela la grabación
+const onDocumentMousedown = (event: MouseEvent) => {
+  if (
+    recordingAction.value &&
+    shortcutsContainerRef.value &&
+    !shortcutsContainerRef.value.contains(event.target as Node)
+  ) {
+    stopRecording();
+  }
+};
+
 const startRecording = (action: ShortcutAction) => {
   if (recordingAction.value === action) {
     stopRecording();
@@ -71,11 +103,13 @@ const startRecording = (action: ShortcutAction) => {
 
 if (typeof window !== 'undefined') {
   window.addEventListener('keydown', onRecordKeydown);
+  document.addEventListener('mousedown', onDocumentMousedown);
 }
 
 onBeforeUnmount(() => {
   if (typeof window !== 'undefined') {
     window.removeEventListener('keydown', onRecordKeydown);
+    document.removeEventListener('mousedown', onDocumentMousedown);
   }
   stopRecording();
 });
@@ -99,15 +133,16 @@ onBeforeUnmount(() => {
     >
       <!-- Language -->
       <QCardSection class="q-pa-lg">
-        <div class="text-overline text-grey-6 q-mb-md">
+        <!--
-          {{ t('settingsLanguageLabel') }}
+          Label movido al propio QSelect (más idiomático en Quasar con outlined).
-        </div>
+          Se elimina el text-overline redundante de encima.
-
+        -->
         <QSelect
           v-model="selectedLanguage"
           emit-value
           map-options
           :options="languageOptions"
+          :label="t('settingsLanguageLabel')"
           outlined
           dense
         />
@@ -142,12 +177,39 @@ onBeforeUnmount(() => {
           {{ t('settingsShortcutDescription') }}
         </div>
 
-        <div class="column q-gutter-md">
+        <!-- Aviso de conflicto: se muestra si dos acciones comparten el mismo atajo -->
+        <QBanner
+          v-if="conflictingActions.size > 0"
+          class="bg-warning text-white q-mb-md"
+          rounded
+          dense
+        >
+          <template #avatar>
+            <QIcon name="warning" color="white" />
+          </template>
+          {{ t('settingsShortcutConflictWarning') }}
+        </QBanner>
+
+        <!--
+          ref="shortcutsContainerRef" permite detectar clicks fuera
+          de esta área para cancelar la grabación automáticamente.
+        -->
+        <div
+          ref="shortcutsContainerRef"
+          class="column q-gutter-md"
+        >
           <QInput
             v-for="field in shortcutFields"
             :key="field.action"
             :model-value="shortcutSettingsStore.shortcuts[field.action]"
             :hint="recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint"
+            :color="
+              recordingAction === field.action
+                ? 'negative'
+                : conflictingActions.has(field.action)
+                  ? 'warning'
+                  : 'primary'
+            "
             readonly
             outlined
             dense
@@ -155,14 +217,33 @@ onBeforeUnmount(() => {
             :label="field.label"
           >
             <template #append>
+              <!-- Botón grabar / detener -->
               <QBtn
                 flat
                 round
                 dense
                 :icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
                 :color="recordingAction === field.action ? 'negative' : 'primary'"
+                :aria-label="
+                  recordingAction === field.action
+                    ? t('settingsShortcutStopRecording')
+                    : t('settingsShortcutStartRecording')
+                "
                 @click="startRecording(field.action)"
               />
+
+              <!-- Botón reset individual por atajo -->
+              <QBtn
+                flat
+                round
+                dense
+                icon="restart_alt"
+                color="grey-5"
+                :aria-label="t('settingsShortcutResetSingle')"
+                @click="shortcutSettingsStore.resetShortcut(field.action)"
+              >
+                <QTooltip>{{ t('settingsShortcutResetSingle') }}</QTooltip>
+              </QBtn>
             </template>
           </QInput>
         </div>