feat: enhance BracketPanel and CommentaryPanel with Twitter handle validation and preview functionality; update i18n for new translations

src/dashboard/scoreko-dev/components/BracketPanel.vue

@@ -5,6 +5,8 @@ import { useScoreboardStore } from '../stores/scoreboard';
 
 const scoreboardStore = useScoreboardStore();
 
+let customDeactivateTimer: ReturnType<typeof setTimeout> | null = null;
+
 const stageOptions = [
   'pools',
   'top 128',
@@ -25,7 +27,7 @@ const stageOptions = [
 const bracketSideOptions = [
   { label: 'None', value: '' },
   { label: 'Winners', value: 'Winners' },
-  { label: 'Loosers', value: 'Loosers' },
+  { label: 'Losers', value: 'Losers' },
 ];
 
 const stage = ref(stageOptions[0]);
@@ -98,8 +100,14 @@ watch(customActive, (value) => {
 });
 
 watch(customText, (value) => {
+  if (customDeactivateTimer) {
+    clearTimeout(customDeactivateTimer);
+  }
   if (!value.trim()) {
-    customActive.value = false;
+    customDeactivateTimer = setTimeout(() => {
+      customActive.value = false;
+      customDeactivateTimer = null;
+    }, 600);
   }
 });
 
@@ -120,6 +128,7 @@ onMounted(() => {
         v-model="stage"
         :label="t('bracketStage')"
         :options="stageOptions"
+        :disable="customActive"
         dense
         class="bracket-panel__field"
       />
@@ -127,6 +136,7 @@ onMounted(() => {
         v-model="bracketSide"
         :label="t('bracketSide')"
         :options="bracketSideOptions"
+        :disable="customActive"
         dense
         emit-value
         map-options
@@ -137,6 +147,7 @@ onMounted(() => {
           v-model="customText"
           :label="t('bracketCustomProgress')"
           dense
+          clearable
           class="bracket-panel-custom-input bracket-panel__field"
         />
         <QToggle

src/dashboard/scoreko-dev/components/CommentaryPanel.vue

@@ -1,8 +1,65 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { t } from '../i18n';
 import { useCommentaryStore } from '../stores/commentary';
 
 const commentaryStore = useCommentaryStore();
+
+// --- Twitter handle helpers ---
+
+const TWITTER_MAX_LENGTH = 15;
+const TWITTER_VALID_CHARS = /^[A-Za-z0-9_]*$/;
+
+const twitterRules = [
+  (val: string) =>
+    !val || val.length <= TWITTER_MAX_LENGTH || t('commentaryTwitterMaxLength'),
+  (val: string) =>
+    !val || TWITTER_VALID_CHARS.test(val) || t('commentaryTwitterInvalidChars'),
+];
+
+function stripAt(value: string): string {
+  return value.startsWith('@') ? value.slice(1) : value;
+}
+
+function handleLeftTwitterInput(value: string | number | null) {
+  commentaryStore.leftCommentatorTwitter = value ? stripAt(String(value)) : '';
+}
+
+function handleRightTwitterInput(value: string | number | null) {
+  commentaryStore.rightCommentatorTwitter = value ? stripAt(String(value)) : '';
+}
+
+// --- Clear ---
+
+function clearAll() {
+  commentaryStore.leftCommentator = '';
+  commentaryStore.leftCommentatorTwitter = '';
+  commentaryStore.rightCommentator = '';
+  commentaryStore.rightCommentatorTwitter = '';
+}
+
+const isAnythingFilled = computed(() =>
+  !!(
+    commentaryStore.leftCommentator ||
+    commentaryStore.leftCommentatorTwitter ||
+    commentaryStore.rightCommentator ||
+    commentaryStore.rightCommentatorTwitter
+  )
+);
+
+// --- Handle preview ---
+
+const leftHandlePreview = computed(() =>
+  commentaryStore.leftCommentatorTwitter
+    ? `@${commentaryStore.leftCommentatorTwitter}`
+    : ''
+);
+
+const rightHandlePreview = computed(() =>
+  commentaryStore.rightCommentatorTwitter
+    ? `@${commentaryStore.rightCommentatorTwitter}`
+    : ''
+);
 </script>
 
 <template>
@@ -14,7 +71,9 @@ const commentaryStore = useCommentaryStore();
     </div>
 
     <div class="commentary-panel__layout">
+      <!-- Commentator 1 -->
       <div class="commentary-panel__commentator">
+
         <QInput
           v-model="commentaryStore.leftCommentator"
           :label="t('commentaryCommentator1')"
@@ -27,23 +86,58 @@ const commentaryStore = useCommentaryStore();
         </QInput>
 
         <QInput
-          v-model="commentaryStore.leftCommentatorTwitter"
+          :model-value="commentaryStore.leftCommentatorTwitter"
           :label="t('commentaryTwitterText')"
+          :rules="twitterRules"
+          :maxlength="TWITTER_MAX_LENGTH"
           dense
           class="commentary-panel__field"
+          @update:model-value="handleLeftTwitterInput"
         />
+
+        <Transition name="commentary-panel__preview">
+          <div
+            v-if="leftHandlePreview"
+            class="commentary-panel__handle-preview"
+          >
+            {{ leftHandlePreview }}
+          </div>
+        </Transition>
       </div>
 
-      <QBtn
-        flat
-        dense
-        round
-        icon="swap_horiz"
-        class="commentary-panel__swap-btn"
-        @click="commentaryStore.swapCommentators"
-      />
+      <!-- Center controls -->
+      <div class="commentary-panel__center-controls">
+        <QBtn
+          flat
+          dense
+          round
+          icon="swap_horiz"
+          class="commentary-panel__swap-btn"
+          @click="commentaryStore.swapCommentators"
+        >
+          <QTooltip anchor="top middle" self="bottom middle">
+            {{ t('commentarySwap') }}
+          </QTooltip>
+        </QBtn>
 
+        <QBtn
+          flat
+          dense
+          round
+          icon="restart_alt"
+          class="commentary-panel__clear-btn"
+          :disable="!isAnythingFilled"
+          @click="clearAll"
+        >
+          <QTooltip anchor="top middle" self="bottom middle">
+            {{ t('commentaryClear') }}
+          </QTooltip>
+        </QBtn>
+      </div>
+
+      <!-- Commentator 2 -->
       <div class="commentary-panel__commentator">
+
         <QInput
           v-model="commentaryStore.rightCommentator"
           :label="t('commentaryCommentator2')"
@@ -56,11 +150,23 @@ const commentaryStore = useCommentaryStore();
         </QInput>
 
         <QInput
-          v-model="commentaryStore.rightCommentatorTwitter"
+          :model-value="commentaryStore.rightCommentatorTwitter"
           :label="t('commentaryTwitterText')"
+          :rules="twitterRules"
+          :maxlength="TWITTER_MAX_LENGTH"
           dense
           class="commentary-panel__field"
+          @update:model-value="handleRightTwitterInput"
         />
+
+        <Transition name="commentary-panel__preview">
+          <div
+            v-if="rightHandlePreview"
+            class="commentary-panel__handle-preview"
+          >
+            {{ rightHandlePreview }}
+          </div>
+        </Transition>
       </div>
     </div>
   </div>
@@ -89,6 +195,35 @@ const commentaryStore = useCommentaryStore();
   gap: 2px;
 }
 
+/* Center controls column */
+.commentary-panel__center-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.commentary-panel__clear-btn {
+  color: rgba(255, 255, 255, 0.45);
+  transition: color 0.2s ease;
+}
+
+.commentary-panel__clear-btn:not(:disabled):hover {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* Swap button */
+.commentary-panel__swap-btn {
+  color: #fff;
+  opacity: 0.85;
+}
+
+.commentary-panel__swap-btn:hover {
+  opacity: 1;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
+}
+
+/* Fields */
 .commentary-panel__field :deep(.q-field__control) {
   min-height: 28px;
   padding: 0;
@@ -112,14 +247,27 @@ const commentaryStore = useCommentaryStore();
   color: rgba(255, 255, 255, 0.92);
 }
 
-.commentary-panel__swap-btn {
-  color: #fff;
-  opacity: 0.85;
+/* Handle preview */
+.commentary-panel__handle-preview {
+  margin-top: 4px;
+  font-size: 0.72rem;
+  color: rgba(255, 255, 255, 0.45);
+  letter-spacing: 0.02em;
+  padding-left: 2px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.commentary-panel__swap-btn:hover {
-  opacity: 1;
-  text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
+.commentary-panel__preview-enter-active,
+.commentary-panel__preview-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.commentary-panel__preview-enter-from,
+.commentary-panel__preview-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
 }
 
 @media (max-width: 900px) {
@@ -127,8 +275,9 @@ const commentaryStore = useCommentaryStore();
     grid-template-columns: 1fr;
   }
 
-  .commentary-panel__swap-btn {
+  .commentary-panel__center-controls {
     justify-self: center;
+    flex-direction: row;
   }
 }
 </style>

src/dashboard/scoreko-dev/i18n.ts

@@ -85,6 +85,12 @@ type Translations = {
   playersSearchPlaceholder: string;
   playersImport: string;
   playersExport: string;
+  commentaryTwitterMaxLength: string;
+  commentaryTwitterInvalidChars: string;
+  commentarySwap: string;
+  commentaryClear: string;
+  aboutChangelog : string;
+  aboutTechStackTitle : string;
 };
 
 const STORAGE_KEY = 'scoreko-dev.language';
@@ -173,6 +179,12 @@ const messages: Record<Locale, Translations> = {
     playersSearchPlaceholder: 'Search...',
     playersImport: 'Import',
     playersExport: 'Export',
+    commentaryTwitterMaxLength: 'Twitter character limit exceeded',
+    commentaryTwitterInvalidChars: 'Invalid characters in Twitter text',
+    commentarySwap: 'Swap commentators',
+    commentaryClear: 'Clear commentary',
+    aboutChangelog: 'Changelog',
+    aboutTechStackTitle: 'Tech stack',
   },
   es: {
     menuDashboard: 'Panel',
@@ -257,6 +269,12 @@ const messages: Record<Locale, Translations> = {
     playersSearchPlaceholder: 'Buscar...',
     playersImport: 'Importar',
     playersExport: 'Exportar',
+    commentaryTwitterMaxLength: 'Se excedió el límite de caracteres de Twitter',
+    commentaryTwitterInvalidChars: 'Caracteres inválidos en el texto de Twitter',
+    commentarySwap: 'Intercambiar comentaristas',
+    commentaryClear: 'Limpiar comentario',
+    aboutChangelog: 'Changelog',
+    aboutTechStackTitle: 'Tech stack',
   },
 };
 

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

@@ -8,12 +8,14 @@ useHead(() => ({ title: t('aboutTitle') }));
 
 const appName = 'Scoreko-dev';
 const currentVersion = import.meta.env.PACKAGE_VERSION;
+const repoUrl = 'https://github.com/Pandipipas/scoreko-dev';
+const authorUrl = 'https://github.com/Pandipipas';
 
 const collaborators = [
   {
     name: 'Pandipipas',
     role: 'Development and maintenance of Scoreko-dev',
-    url: 'http://10.0.0.10:3002/Pandipipas/scoreko-dev',
+    url: authorUrl,
     icon: 'code',
   },
   {
@@ -29,6 +31,15 @@ const collaborators = [
     icon: 'layers',
   },
 ];
+
+const techStack = [
+  { label: 'Vue 3', icon: 'hub' },
+  { label: 'Quasar', icon: 'style' },
+  { label: 'TypeScript', icon: 'data_object' },
+  { label: 'NodeCG', icon: 'layers' },
+];
+
+const currentYear = new Date().getFullYear();
 </script>
 
 <template>
@@ -57,13 +68,27 @@ const collaborators = [
             <div class="text-h6 text-weight-bold">
               {{ appName }}
             </div>
-            <QBadge
-              outline
-              color="primary"
-              class="q-mt-xs version-badge"
-            >
-              v{{ currentVersion }}
-            </QBadge>
+            <div class="row items-center q-gutter-xs q-mt-xs">
+              <QBadge
+                outline
+                color="primary"
+                class="version-badge"
+              >
+                v{{ currentVersion }}
+              </QBadge>
+              <QBtn
+                :href="`${repoUrl}/releases`"
+                target="_blank"
+                rel="noopener noreferrer"
+                icon="history"
+                :label="t('aboutChangelog')"
+                color="grey-6"
+                flat
+                dense
+                no-caps
+                size="xs"
+              />
+            </div>
           </div>
         </div>
       </QCardSection>
@@ -90,6 +115,27 @@ const collaborators = [
 
       <QSeparator />
 
+      <!-- Tech stack -->
+      <QCardSection class="q-pa-lg">
+        <div class="text-overline text-grey-6 q-mb-sm">
+          {{ t('aboutTechStackTitle') }}
+        </div>
+        <div class="row q-gutter-xs">
+          <QChip
+            v-for="tech in techStack"
+            :key="tech.label"
+            :icon="tech.icon"
+            :label="tech.label"
+            color="primary"
+            text-color="white"
+            size="sm"
+            dense
+          />
+        </div>
+      </QCardSection>
+
+      <QSeparator />
+
       <!-- Collaborators -->
       <QCardSection class="q-pa-lg">
         <div class="text-overline text-grey-6 q-mb-sm">
@@ -137,6 +183,29 @@ const collaborators = [
           </QItem>
         </QList>
       </QCardSection>
+
+      <QSeparator />
+
+      <!-- Footer -->
+      <QCardSection class="q-pa-md">
+        <div class="row items-center justify-between">
+          <span class="text-caption text-grey-5">
+            © {{ currentYear }} Pandipipas · MIT License
+          </span>
+          <QBtn
+            :href="repoUrl"
+            target="_blank"
+            rel="noopener noreferrer"
+            icon="open_in_new"
+            label="GitHub"
+            color="grey-6"
+            flat
+            dense
+            no-caps
+            size="sm"
+          />
+        </div>
+      </QCardSection>
     </QCard>
   </QPage>
 </template>
@@ -172,6 +241,11 @@ const collaborators = [
   background: rgba(0, 0, 0, 0.04);
 }
 
+/* Dark mode hover fix */
+.body--dark .collaborator-item:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
 .collaborator-icon {
   opacity: 0.8;
 }