From dc447acf57dc2727c0582b4e65f7c09457207ed7 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 14 Aug 2026 14:50:46 +0200
Subject: [PATCH] feat(official-tournaments): enhance tournament workspace with
 tabbed navigation and improved layout

---
 frontend/src/views/OfficialTournaments.vue | 70 ++++++++++++++++------
 1 file changed, 51 insertions(+), 19 deletions(-)

diff --git a/frontend/src/views/OfficialTournaments.vue b/frontend/src/views/OfficialTournaments.vue
index c2c1de36..418c4a9e 100755
--- a/frontend/src/views/OfficialTournaments.vue
+++ b/frontend/src/views/OfficialTournaments.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="official-tournaments">
-    <div class="workspace-admin">
-      <div class="admin-panel tournament-suggestions-panel">
+    <section class="workspace-admin" aria-label="Turnier-Arbeitsbereich">
+      <div class="workspace-tabs" role="toolbar" aria-label="Bereich auswählen">
+        <button type="button" :class="['workspace-tab', workspaceTab === 'suggestions' && 'active']" :aria-pressed="workspaceTab === 'suggestions'" @click="workspaceTab = 'suggestions'">
+          Vorschläge <span v-if="newSuggestions.length" class="workspace-tab-count">{{ newSuggestions.length }}</span>
+        </button>
+        <button type="button" :class="['workspace-tab', workspaceTab === 'import' && 'active']" :aria-pressed="workspaceTab === 'import'" @click="workspaceTab = 'import'">Import</button>
+        <button type="button" :class="['workspace-tab', workspaceTab === 'saved' && 'active']" :aria-pressed="workspaceTab === 'saved'" @click="workspaceTab = 'saved'">
+          Gespeichert <span v-if="list.length" class="workspace-tab-count" title="zukünftige / vergangene Turniere" aria-label="zukünftige / vergangene Turniere">{{ tournamentTimeCounts.current }} / {{ tournamentTimeCounts.past }}</span>
+        </button>
+      </div>
+
+      <section v-if="workspaceTab === 'suggestions'" class="workspace-panel tournament-suggestions-panel" aria-label="Turniervorschläge">
         <div class="panel-header"><h3>Turniervorschläge</h3><p>Turniere aus dem myTischtennis-Kalender prüfen und danach manuell einpflegen.</p></div>
         <div class="panel-toolbar"><button class="btn-primary" :disabled="fetchingSuggestions" @click="fetchSuggestions">{{ fetchingSuggestions ? 'Abruf läuft …' : 'Jetzt abrufen' }}</button><span class="toolbar-meta">{{ newSuggestions.length }} neu</span></div>
         <p v-if="suggestionError" class="suggestion-error">{{ suggestionError }}</p>
@@ -9,8 +19,8 @@
           <li v-for="suggestion in newSuggestions" :key="suggestion.id" class="event-item"><div class="suggestion-main"><strong>{{ suggestion.title }}</strong><span>{{ suggestion.eventDate || 'Termin offen' }}<template v-if="suggestion.location"> · {{ suggestion.location }}</template></span></div><a class="btn-secondary" :href="suggestion.sourceUrl" target="_blank" rel="noopener">Öffnen</a><button class="btn-secondary" @click="updateSuggestionStatus(suggestion, 'reviewed')">Geprüft</button><button class="btn-secondary" @click="updateSuggestionStatus(suggestion, 'dismissed')">Ausblenden</button></li>
         </ul>
         <p v-else class="empty-state compact">Keine neuen Vorschläge. „Jetzt abrufen“ eignet sich zum Testen.</p>
-      </div>
-      <div class="admin-panel">
+      </section>
+      <section v-else-if="workspaceTab === 'import'" class="workspace-panel" aria-label="Turnier importieren">
         <div class="panel-header">
           <h3>Turnier importieren</h3>
           <p>PDF hochladen und als neues offizielles Turnier anlegen.</p>
@@ -19,9 +29,9 @@
           <input type="file" accept="application/pdf" @change="onFile" />
           <button class="btn-primary" :disabled="!selectedFile" @click="upload">{{ $t('officialTournaments.uploadPdf') }}</button>
         </div>
-      </div>
+      </section>
 
-      <div class="admin-panel">
+      <section v-else class="workspace-panel" aria-label="Gespeicherte Veranstaltungen">
         <div class="panel-header">
           <h3>{{ $t('officialTournaments.savedEvents') }}</h3>
           <p>Turnier auswählen, umbenennen oder löschen.</p>
@@ -37,7 +47,7 @@
             <input v-model="showOlderTournaments" type="checkbox" />
             Vergangene anzeigen
           </label>
-          <span class="toolbar-meta">{{ filteredTournamentList.length }} / {{ list.length || 0 }}</span>
+          <span class="toolbar-meta" title="zukünftige / vergangene Turniere" aria-label="zukünftige / vergangene Turniere">{{ tournamentTimeCounts.current }} / {{ tournamentTimeCounts.past }}</span>
         </div>
         <ul v-if="filteredTournamentList.length > 0" class="event-list tournament-list">
           <li
@@ -85,8 +95,8 @@
         <div v-else class="empty-state compact">
           <p>{{ tournamentSearch ? 'Keine passenden Turniere gefunden.' : $t('officialTournaments.noEvents') }}</p>
         </div>
-      </div>
-    </div>
+      </section>
+    </section>
 
     <div class="admin-panel history-panel">
       <div class="history-toggle">
@@ -521,7 +531,7 @@
     <div v-else class="workspace-detail empty-workspace">
       <div class="empty-workspace-card">
         <h3>Kein aktives Turnier ausgewählt</h3>
-        <p>Wähle links ein gespeichertes Turnier aus oder importiere zuerst eine Ausschreibung als PDF.</p>
+        <p>Wähle oben im Bereich „Gespeichert“ ein Turnier aus oder importiere zuerst eine Ausschreibung als PDF.</p>
       </div>
     </div>
 
@@ -630,6 +640,7 @@ export default {
       participationMap: {}, // key: `${competitionId}-${memberId}` => { wants, registered, participated, placement }
       collator: new Intl.Collator('de', { sensitivity: 'base' }),
       activeTab: 'overview',
+      workspaceTab: 'saved',
       participantsFilter: 'all',
       showHistory: false,
       loadingClubParticipations: false,
@@ -663,6 +674,24 @@ export default {
       if (!m) return [];
       return this.competitionsForMember(m);
     },
+    tournamentTimeCounts() {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      const cutoff = new Date(today);
+      cutoff.setDate(cutoff.getDate() - 14);
+
+      const counts = { current: 0, past: 0 };
+      for (const tournament of (Array.isArray(this.list) ? this.list : [])) {
+        const range = this.tournamentDateRange(tournament);
+        const end = range.end || range.start;
+        if (end && end.getTime() < cutoff.getTime()) {
+          counts.past += 1;
+        } else {
+          counts.current += 1;
+        }
+      }
+      return counts;
+    },
     filteredTournamentList() {
       const search = String(this.tournamentSearch || '').trim().toLowerCase();
       const searchDate = this.parseDateFlexible(search);
@@ -2110,8 +2139,15 @@ export default {
 .tactics-header h3,.editor-heading h4 { margin:0; color:#17366d; }.tactics-header p { margin:.3rem 0 0; color:#64748b; max-width:720px; }
 .tactics-workspace { display:grid; grid-template-columns:minmax(205px, .38fr) minmax(0, 1fr); border:1px solid #cbd9e8; background:#fff; min-height:420px; }.tactic-list { padding:.55rem; background:#eef3f8; border-right:1px solid #cbd9e8; display:flex; flex-direction:column; gap:.35rem; }.tactic-list-item { appearance:none; text-align:left; background:#fff; border:1px solid #d5dfe9; padding:.6rem; cursor:pointer; color:#203247; }.tactic-list-item strong,.tactic-list-item span { display:block; }.tactic-list-item span { color:#667789; font-size:.82rem; margin-top:.2rem; }.tactic-list-item.active { border-left:4px solid #d79727; background:#fff9ed; }.tactic-editor { padding:1rem; }.editor-heading,.editor-actions { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.8rem; }.tactic-form-grid,.tactic-notes-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-bottom:.85rem; }.tactic-form-grid label,.tactic-notes-grid label { color:#26394a; font-weight:600; font-size:.88rem; }.tactic-form-grid input,.tactic-form-grid select,.tactic-notes-grid textarea { display:block; box-sizing:border-box; width:100%; margin-top:.28rem; border:1px solid #b9c8d7; padding:.52rem; font:inherit; background:#fff; }.tactic-notes-grid textarea { min-height:82px; resize:vertical; }.own-note textarea { border-left:4px solid #d79727; }.opponent-note textarea { border-left:4px solid #dc7865; }.tactics-error { color:#a43d30; background:#fff0eb; border-left:3px solid #dc7865; padding:.6rem; }.dirty-note { color:#9a6511; font-size:.88rem; }.danger-button { color:#9b3326; }.tactic-list-empty { color:#65758a; font-size:.88rem; padding:.3rem; }.tactic-empty { display:flex; flex-direction:column; gap:.35rem; text-align:left; }
 @media (max-width:760px) { .tactics-header { flex-direction:column; }.tactics-workspace { grid-template-columns:1fr; }.tactic-list { border-right:0; border-bottom:1px solid #cbd9e8; }.tactic-form-grid,.tactic-notes-grid { grid-template-columns:1fr; } }
-.workspace-admin { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 1rem; align-items: start; }
-.workspace-admin > .admin-panel:nth-child(3) { grid-column: 1 / -1; }
+.workspace-admin { background: #fff; border: 1px solid #dbe3f0; border-radius: 12px; box-shadow: 0 4px 18px rgba(15, 35, 95, 0.05); overflow: hidden; }
+.workspace-tabs { display: flex; align-items: end; gap: .1rem; padding: .5rem .65rem 0; background: #f4f7fb; border-bottom: 1px solid #dbe3f0; overflow-x: auto; }
+.workspace-tab { appearance: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: .55rem .8rem .5rem; background: transparent; color: #52657b; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 650; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
+.workspace-tab:hover { color: #17366d; background: rgba(255,255,255,.62); }
+.workspace-tab:focus-visible { outline: 3px solid rgba(50, 114, 203, .35); outline-offset: -2px; }
+.workspace-tab.active { color: #17366d; background: #fff; border-color: #dbe3f0; margin-bottom: -1px; padding-bottom: calc(.5rem + 1px); }
+.workspace-tab-count { display: inline-grid; min-width: 1.2rem; height: 1.2rem; place-items: center; margin-left: .25rem; padding: 0 .25rem; background: #e7effb; border-radius: 999px; color: #2453a6; font-size: .73rem; line-height: 1; }
+.workspace-tab.active .workspace-tab-count { background: #d9e8ff; }
+.workspace-panel { min-height: 8.2rem; padding: .9rem 1rem 1rem; }
 .admin-panel { background: #fff; border: 1px solid #dbe3f0; border-radius: 12px; padding: .9rem 1rem; box-shadow: 0 4px 18px rgba(15, 35, 95, 0.05); }
 .history-panel { margin-top: .25rem; }
 .history-toggle { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .35rem; }
@@ -2372,13 +2408,9 @@ th, td { border-bottom: 1px solid var(--border-color); padding: 0.5rem; text-ali
 }
 
 @media (max-width: 768px) {
-  .workspace-admin {
-    grid-template-columns: 1fr;
-  }
-
-  .workspace-admin > .admin-panel:nth-child(3) {
-    grid-column: auto;
-  }
+  .workspace-tabs { padding-left: .4rem; padding-right: .4rem; }
+  .workspace-tab { padding-left: .65rem; padding-right: .65rem; }
+  .workspace-panel { padding: .8rem; }
 
   .history-toggle {
     flex-direction: column;