frontend: refactor build viewer a bit more

frontend/components/build/Viewer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { deepClone } from '~/utils/helpers'
-import { trimBuilds, trimLateGameItems, getHighestPickrateBuildIndex, getFirstCoreItems } from '~/utils/buildHelpers'
+import { getHighestPickrateBuildIndex, getFirstCoreItems } from '~/utils/buildHelpers'
+import { MOCK_SUMMONER_SPELLS, BOOTS_RUSH_THRESHOLD } from '~/utils/mockData'
 import BuildVariantSelector from '~/components/build/BuildVariantSelector.vue'
 import SummonerSpells from '~/components/build/SummonerSpells.vue'
 import CompactRuneSelector from '~/components/build/CompactRuneSelector.vue'
@@ -28,43 +28,25 @@ const { summonerSpellMap } = useSummonerSpellMap()
 // Use composable for rune styles
 const { perks, primaryStyles, secondaryStyles, keystoneIds } = useRuneStyles(toRef(props, 'runes'))
 
-// Mock summoner spells data if not provided by API
-const mockSummonerSpells = computed(() => {
-  if (props.summonerSpells && props.summonerSpells.length > 0) {
-    return props.summonerSpells
-  }
-  // Default mock data based on common summoner spells
-  return [
-    { id: 4, count: 1000, pickrate: 0.45 }, // Flash
-    { id: 7, count: 800, pickrate: 0.35 }, // Heal
-    { id: 14, count: 600, pickrate: 0.15 }, // Ignite
-    { id: 3, count: 200, pickrate: 0.05 } // Exhaust
-  ]
-})
+// Use composable for builds management
+const { builds } = useBuilds(toRef(props, 'builds'))
 
-// Builds management
-const builds = ref<Builds>(deepClone(props.builds))
-
-watch(
-  () => props.builds,
-  (newBuilds) => {
-    builds.value = deepClone(newBuilds)
-    trimBuilds(builds.value)
-    trimLateGameItems(builds.value)
-  },
-  { deep: true }
+// Summoner spells data - use提供的 or fall back to mock
+const displaySummonerSpells = computed(() => 
+  (props.summonerSpells && props.summonerSpells.length > 0) 
+    ? props.summonerSpells 
+    : MOCK_SUMMONER_SPELLS
 )
 
-onMounted(() => {
-  trimBuilds(builds.value)
-  trimLateGameItems(builds.value)
-})
-
 // Computed properties using utility functions
 const firstCoreItems = computed(() => getFirstCoreItems(props.runes, builds.value))
 
 const highestPickrateBuildIndex = computed(() => getHighestPickrateBuildIndex(props.runes))
 
+const bootsLabel = computed(() =>
+  builds.value.bootsFirst > BOOTS_RUSH_THRESHOLD ? 'Boots Rush' : 'Boots'
+)
+
 // Reset selected build when runes change
 watch(
   () => props.runes,
@@ -94,7 +76,7 @@ function selectRune(index: number): void {
       <!-- Left Column: Summoner Spells + Runes -->
       <div class="build-left-column">
         <!-- Summoner Spells -->
-        <SummonerSpells :spells="mockSummonerSpells" :summoner-spell-map="summonerSpellMap" />
+        <SummonerSpells :spells="displaySummonerSpells" :summoner-spell-map="summonerSpellMap" />
 
         <!-- Rune Page -->
         <div class="rune-section">