Refactor team name formatting and update version to 1.8.6

components/HomeSpielplanTeamWidget.vue

@@ -58,7 +58,9 @@
               </p>
             </div>
             <p class="text-sm text-gray-800">
-              {{ game.HeimMannschaft }} vs {{ game.GastMannschaft }}
+              {{ formatMatchTeamName(game.HeimMannschaft, game.HeimMannschaftAltersklasse) }}
+              vs
+              {{ formatMatchTeamName(game.GastMannschaft, game.GastMannschaftAltersklasse) }}
             </p>
           </div>
         </div>
@@ -69,6 +71,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue'
+import { formatTeamDisplayName } from '~/utils/team-display'
 
 const props = defineProps({
   season: {
@@ -91,10 +94,13 @@ const games = ref([])
 
 const widgetTitle = computed(() => {
   if (!props.teamName) return 'Mannschaft'
-  const youth = String(props.teamAgeGroup || '').toLowerCase().includes('jugend')
-  return youth ? `(J) ${props.teamName}` : props.teamName
+  return formatTeamDisplayName(props.teamName, props.teamAgeGroup)
 })
 
+function formatMatchTeamName(teamName, teamAgeGroup) {
+  return formatTeamDisplayName(teamName, teamAgeGroup) || '-'
+}
+
 const seasonLabel = computed(() => {
   const match = String(props.season || '').match(/^(\d{2})--(\d{2})$/)
   if (!match) return props.season || '-'

components/Navigation.vue

@@ -111,10 +111,10 @@
               </NuxtLink>
             </div>
 
-            <div class="hidden lg:flex items-center h-6 border-t border-primary-700/20">
+            <div class="hidden lg:flex items-center h-6 min-w-0 border-t border-primary-700/20">
               <div
                 v-if="currentSubmenu"
-                class="flex items-center space-x-1"
+                :class="currentSubmenu === 'mannschaften' ? 'relative min-w-0 flex-1' : 'flex items-center space-x-1'"
               >
                 <!-- Newsletter Submenu -->
                 <template v-if="currentSubmenu === 'newsletter'">
@@ -188,41 +188,53 @@
 
                 <!-- Mannschaften Submenu -->
                 <template v-if="currentSubmenu === 'mannschaften'">
+                  <div
+                    class="flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap scroll-smooth pr-7 [scrollbar-color:theme(colors.primary.700)_transparent] [scrollbar-width:thin]"
+                    tabindex="0"
+                    aria-label="Mannschaften-Untermenü – horizontal scrollbar"
+                  >
                     <NuxtLink
                       to="/mannschaften"
-                    class="px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
+                      class="shrink-0 px-2.5 py-1 text-xs font-semibold text-white hover:bg-primary-700/50 rounded transition-all"
                       active-class="bg-primary-600"
                     >
                       Übersicht
                     </NuxtLink>
-                  <div class="h-3 w-px bg-primary-700" />
+                    <div class="h-3 w-px shrink-0 bg-primary-700" />
                     <template
                       v-for="mannschaft in mannschaften"
                       :key="mannschaft.slug"
                     >
                       <NuxtLink
                         :to="`/mannschaften/${mannschaft.slug}`"
-                      class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                        class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                         active-class="text-white bg-primary-600"
                       >
                         {{ mannschaft.mannschaft }}
                       </NuxtLink>
                     </template>
-                  <div class="h-3 w-px bg-primary-700" />
+                    <div class="h-3 w-px shrink-0 bg-primary-700" />
                     <NuxtLink
                       to="/mannschaften/spielplaene"
-                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                      class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                       active-class="text-white bg-primary-600"
                     >
                       Spielpläne
                     </NuxtLink>
                     <NuxtLink
                       to="/spielsysteme"
-                    class="px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
+                      class="shrink-0 px-2.5 py-1 text-xs text-gray-300 hover:text-white hover:bg-primary-700/50 rounded transition-all"
                       active-class="text-white bg-primary-600"
                     >
                       Spielsysteme
                     </NuxtLink>
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="pointer-events-none absolute inset-y-0 right-0 flex w-9 items-center justify-end bg-gradient-to-l from-primary-900 via-primary-900/90 to-transparent text-primary-300"
+                  >
+                    ›
+                  </span>
                 </template>
 
                 <!-- Training Submenu -->

components/Spielplan.vue

@@ -220,6 +220,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { formatTeamDisplayName } from '~/utils/team-display'
 
 const spielplanData = ref([])
 const isLoading = ref(false)
@@ -358,14 +359,7 @@ const formatTime = (terminString) => {
 const formatTeamName = (teamName, ageGroup) => {
   if (!teamName) return 'Nicht angegeben'
 
-  // Prüfe ob es Nachwuchs ist
-  const isNachwuchs = ageGroup && (
-    ageGroup.toLowerCase().includes('jugend') || 
-    teamName.toLowerCase().includes('jugend')
-  )
-  
-  // Füge (J) für Nachwuchs hinzu
-  return isNachwuchs ? `(J) ${teamName}` : teamName
+  return formatTeamDisplayName(teamName, ageGroup)
 }
 
 const formatRunde = (runde) => {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "harheimertc-website",
-  "version": "1.8.4",
+  "version": "1.8.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "harheimertc-website",
-      "version": "1.8.4",
+      "version": "1.8.6",
       "hasInstallScript": true,
       "dependencies": {
         "@pinia/nuxt": "^0.11.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "harheimertc-website",
-  "version": "1.8.5",
+  "version": "1.8.6",
   "description": "Moderne Webseite für den Harheimer Tischtennis Club",
   "private": true,
   "type": "module",
@@ -18,7 +18,7 @@
     "test": "vitest run",
     "test:data-rotation": "vitest run tests/data-file-rotation.spec.ts",
     "check-security": "node scripts/verify-no-public-writes.js",
-    "smoke-local": "BASE_URL=http://127.0.0.1:3100 node scripts/smoke-tests.js",
+    "smoke-local": "BASE_URL=http://127.0.0.1:3100 node scripts/smoke-test.js",
     "sync-public-data": "node scripts/sync-public-data.js",
     "data-backups:list": "node scripts/data-backup-restore.js list",
     "data-backups:restore": "node scripts/data-backup-restore.js restore",

server/api/homepage/spielplan-options.get.js

@@ -1,11 +1,8 @@
 import { listSpielplanSeasons, readSpielplanData, validateSeasonSlug } from '../../utils/spielplan-data.js'
+import { formatTeamDisplayName } from '../../../utils/team-display.js'
 
 function teamLabel(teamName, teamAgeGroup) {
-  const name = String(teamName || '').trim()
-  const age = String(teamAgeGroup || '').trim()
-  if (!name) return ''
-  const isYouth = age.toLowerCase().includes('jugend') || name.toLowerCase().includes('jugend')
-  return isYouth ? `(J) ${name}` : name
+  return formatTeamDisplayName(teamName, teamAgeGroup)
 }
 
 function extractHarheimerTeams(rows) {

tests/auth-endpoints.spec.ts

@@ -83,6 +83,7 @@ describe('Auth API Endpoints', () => {
   afterEach(() => {
     delete process.env.NODE_ENV
     delete process.env.APP_ENV
+    delete process.env.DEBUG
     delete process.env.NUXT_PUBLIC_BASE_URL
     delete process.env.PASSWORD_RESET_TTL_MIN
   })
@@ -282,6 +283,7 @@ describe('Auth API Endpoints', () => {
     it('benachrichtigt in Testumgebung nicht die Vorstand-Empfänger', async () => {
       process.env.NODE_ENV = 'production'
       process.env.APP_ENV = 'test'
+      delete process.env.DEBUG
 
       const event = createEvent()
       mockSuccessReadBody({

utils/team-display.js

@@ -0,0 +1,22 @@
+/**
+ * Makes youth teams identifiable while retaining the team name supplied by
+ * click-TT. Age groups occur in a few forms, for example "Jugend 13",
+ * "Jugend 13 1. Kreisklasse", and "J13".
+ */
+export function youthTeamCode(teamAgeGroup, teamName = '') {
+  const ageGroup = String(teamAgeGroup || '').trim()
+  const name = String(teamName || '').trim()
+  const codeMatch = ageGroup.match(/\b(?:jugend\s*|j\s*)(\d{1,2})\b/i)
+
+  if (codeMatch) return `J${codeMatch[1]}`
+  if (/\bjugend\b/i.test(ageGroup) || /\bjugend\b/i.test(name)) return 'J'
+  return ''
+}
+
+export function formatTeamDisplayName(teamName, teamAgeGroup) {
+  const name = String(teamName || '').trim()
+  if (!name) return ''
+
+  const youthCode = youthTeamCode(teamAgeGroup, name)
+  return youthCode ? `(${youthCode}) ${name}` : name
+}