From a4dc89575d18a4953649d6510d9f24c3c3391b5c Mon Sep 17 00:00:00 2001
From: Pandipipas <pablocg182000@gmail.com>
Date: Fri, 15 May 2026 02:14:03 +0200
Subject: [PATCH] feat: add preview functionality to BracketPanel and i18n
 support for preview text

---
 .../scoreko-dev/components/BracketPanel.vue   | 53 ++++++++++++++++++-
 src/dashboard/scoreko-dev/i18n.ts             |  3 ++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/src/dashboard/scoreko-dev/components/BracketPanel.vue b/src/dashboard/scoreko-dev/components/BracketPanel.vue
index a6e6a5a..d352ae6 100644
--- a/src/dashboard/scoreko-dev/components/BracketPanel.vue
+++ b/src/dashboard/scoreko-dev/components/BracketPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { t } from '../i18n';
 import { useScoreboardStore } from '../stores/scoreboard';
 
@@ -34,6 +34,14 @@ const customActive = ref(false);
 const customText = ref('');
 const hasChanges = ref(false);
 
+const previewText = computed(() => {
+  if (customActive.value) {
+    return customText.value.trim() || '—';
+  }
+  const prefix = bracketSide.value ? `${bracketSide.value} ` : '';
+  return `${prefix}${stage.value}`.trim() || '—';
+});
+
 const parseInitialRound = () => {
   const round = scoreboardStore.scoreboard.round.trim();
   if (!round) {
@@ -138,6 +146,17 @@ onMounted(() => {
           class="bracket-panel-custom-toggle"
         />
       </div>
+
+      <!-- Preview -->
+      <div class="bracket-panel__preview">
+        <span class="bracket-panel__preview-label">{{ t('bracketPreview') }}</span>
+        <span
+          class="bracket-panel__preview-text"
+          :class="{ 'bracket-panel__preview-text--custom': customActive }"
+        >
+          {{ previewText }}
+        </span>
+      </div>
     </div>
   </div>
 </template>
@@ -183,4 +202,36 @@ onMounted(() => {
 .bracket-panel__field :deep(.q-field__label) {
   color: rgba(255, 255, 255, 0.92);
 }
+
+.bracket-panel__preview {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.bracket-panel__preview-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: rgba(255, 255, 255, 0.45);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.bracket-panel__preview-text {
+  font-size: 1rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.92);
+  letter-spacing: 0.02em;
+  word-break: break-word;
+  transition: color 0.2s ease;
+}
+
+.bracket-panel__preview-text--custom {
+  color: var(--q-secondary, #26a69a);
+}
 </style>
diff --git a/src/dashboard/scoreko-dev/i18n.ts b/src/dashboard/scoreko-dev/i18n.ts
index 29b5c37..7da7e7f 100644
--- a/src/dashboard/scoreko-dev/i18n.ts
+++ b/src/dashboard/scoreko-dev/i18n.ts
@@ -69,6 +69,7 @@ type Translations = {
   bracketStage: string;
   bracketSide: string;
   bracketCustomProgress: string;
+  bracketPreview: string;
   playersLabelTeam: string;
   playersLabelCountry: string;
   playersLabelActions: string;
@@ -156,6 +157,7 @@ const messages: Record<Locale, Translations> = {
     bracketStage: 'Stage',
     bracketSide: 'Bracket side',
     bracketCustomProgress: 'Custom progress',
+    bracketPreview: 'Preview',
     playersLabelTeam: 'Team',
     playersLabelCountry: 'Country',
     playersLabelActions: 'Actions',
@@ -239,6 +241,7 @@ const messages: Record<Locale, Translations> = {
     bracketStage: 'Etapa',
     bracketSide: 'Lado del bracket',
     bracketCustomProgress: 'Progreso personalizado',
+    bracketPreview: 'Vista previa',
     playersLabelTeam: 'Equipo',
     playersLabelCountry: 'País',
     playersLabelActions: 'Acciones',