From 014cd5891b5b87845d9bfc2c32865ef8212c5c46 Mon Sep 17 00:00:00 2001
From: novaoc <novaoc@users.noreply.github.com>
Date: Sat, 18 Jul 2026 12:12:26 -0600
Subject: [PATCH] feat: route.meta page titles, booth tab mappings, SR-visible
 topbar title

- currentPageTitle now falls back to route.meta.title (fixes missing
  titles for Decks, Meta Decks, Deck Builder, ShelfGuide, designs)
- DeckBuilder title shows the deck's name (from #30, without its
  unrelated SVG mutation)
- TAB_FOR_ROUTE: BoothDisplay/BoothTable map to booth tab; Settings,
  Terms, ShelfGuide mapped (from #48, without its .value-removal
  regression)
- Remove aria-hidden from .topbar-page (from #28): no aria-live
  route announcer exists in the codebase, so no duplicated
  screen-reader output; makes page context available to SR users
---
 src/App.vue | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 61db173..6be9d13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@
         <router-link to="/booth" class="topnav-link" :class="{ active: isTab('booth') }">Booth</router-link>
       </nav>
 
-      <div class="topbar-page" aria-hidden="true">
+      <div class="topbar-page">
         {{ currentPageTitle }}
         <button v-if="currentTour" class="tour-info-btn" @click="replayTour" title="Watch tour video" aria-label="Watch tour video">i</button>
       </div>
@@ -191,6 +191,7 @@
 import { ref, computed, watch, onMounted, onErrorCaptured } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { usePortfolioStore } from './stores/portfolio'
+import { useDeckStore } from './stores/decks'
 import InstallPrompt from './components/InstallPrompt.vue'
 import XFollowPrompt from './components/XFollowPrompt.vue'
 import TourModal from './components/TourModal.vue'
@@ -201,6 +202,7 @@ import { preloadGames } from './services/tcg/cardPreloader.js'
 import { applyTheme, setThemePref, getThemePref, resolvedTheme } from './utils/theme.js'
 
 const store = usePortfolioStore()
+const deckStore = useDeckStore()
 const route = useRoute()
 const router = useRouter()
 
@@ -253,7 +255,8 @@ const TAB_FOR_ROUTE = {
   Browse: 'browse', Sets: 'browse', TcgSets: 'browse',
   Decks: 'decks', MetaDecks: 'decks', DeckBuilder: 'decks',
   TradeLanding: 'trade', TradeAnalyzer: 'trade',
-  Booth: 'booth', BoothEdit: 'booth',
+  Booth: 'booth', BoothEdit: 'booth', BoothDisplay: 'booth', BoothTable: 'booth',
+  Settings: 'settings', Terms: 'terms', ShelfGuide: 'home',
 }
 function isTab(tab) {
   return TAB_FOR_ROUTE[route.name] === tab
@@ -299,21 +302,15 @@ const portfolioColors = [
 ]
 
 const currentPageTitle = computed(() => {
-  if (route.name === 'Dashboard') return 'Dashboard'
-  if (route.name === 'Search') return 'Search Cards'
-  if (route.name === 'Browse') return 'Browse Sets'
-  if (route.name === 'Sets') return 'Pokémon Sets'
-  if (route.name === 'TcgSets') return 'Browse Sets'
-  if (route.name === 'Booth') return 'Card Booth'
-  if (route.name === 'BoothEdit') return 'Edit Booth'
-  if (route.name === 'Settings') return 'Settings'
-  if (route.name === 'Terms') return 'Terms & Conditions'
-  if (route.name === 'TradeAnalyzer' || route.name === 'TradeLanding') return 'Trade Analyzer'
   if (route.name === 'Portfolio') {
     const p = store.portfolios.find(p => p.id === route.params.id)
     return p?.name || 'Shelf'
   }
-  return 'Rarebox'
+  if (route.name === 'DeckBuilder') {
+    const d = deckStore.decks.find(d => d.id === route.params.id)
+    return d?.name || 'Deck Builder'
+  }
+  return route.meta?.title || 'Rarebox'
 })
 
 function hardRefresh() {