FEAT: side A/B

app/pages/defaultDev.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="deck">
-    <card
-      v-for="track in tracks"
-      :key="track.id"
-      :track="track"
-      :is-face-up="track.isFaceUp"
-      @click="flipCard(track)"
-    />
-  </div>
-</template>
-
-<script setup>
-import { useDataStore } from '~/store/data'
-const tracks = ref([])
-definePageMeta({
-  layout: 'default'
-})
-
-onMounted(async () => {
-  const dataStore = useDataStore()
-  await dataStore.loadData()
-  tracks.value = dataStore.getTracksByboxId('ES2025')
-})
-
-function flipCard(track) {
-  track.isFaceUp = !track.isFaceUp
-}
-</script>
-
-<style lang="scss" scoped>
-.logo {
-  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
-}
-
-.deck {
-  position: relative;
-  height: 80vh;
-
-  .card {
-    z-index: 10;
-    position: relative;
-  }
-}
-</style>

app/pages/dev.vue

@@ -2,41 +2,20 @@
   <div>
     <button
       class="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg z-50 transition-colors"
-      title="Ranger les cartes"
-      @click="arrangeCards"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M4 6h16M4 12h16m-7 6h7"
-        />
+      title="Ranger les cartes" @click="arrangeCards">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
       </svg>
     </button>
 
     <div ref="deck" class="deck">
-      <card
-        v-for="track in tracks"
-        :key="track.id"
-        :track="track"
-        :class="['card', 'id-' + track.id, { dragging: dragging === track }]"
-        :style="{
+      <card v-for="track in tracks" :key="track.id" :track="track"
+        :class="['card', 'id-' + track.id, { dragging: dragging === track }]" :style="{
           top: track.y + 'px',
           left: track.x + 'px',
           zIndex: track.zIndex || 1,
           transform: `rotate(${track.rotation || 0}deg)`
-        }"
-        :is-face-up="track.isFaceUp"
-        @mousedown="startDrag($event, track)"
-        @click="flipCard(track)"
-      />
+        }" :is-face-up="track.isFaceUp" @mousedown="startDrag($event, track)" @click="flipCard(track)" />
     </div>
   </div>
 </template>
@@ -59,7 +38,7 @@ definePageMeta({ layout: 'default' })
 
 onMounted(async () => {
   await dataStore.loadData()
-  tracks.value = dataStore.getTracksByboxId('ES2025').map((t, i) => ({
+  tracks.value = dataStore.getTracksByboxId('ESPLAYLIST').map((t, i) => ({
     ...t,
     x: t.x ?? 50 + i * 20,
     y: t.y ?? 50 + i * 20,

app/pages/draggable.vue

@@ -1,21 +1,9 @@
 <template>
   <div class="deck">
-    <draggable
-      v-model="tracks"
-      item-key="id"
-      class="draggable-container"
-      @start="drag = true"
-      @end="onDragEnd"
-    >
+    <draggable v-model="tracks" item-key="id" class="draggable-container" @start="drag = true" @end="onDragEnd">
       <template #item="{ element: track }">
-        <card
-          :key="track.id"
-          :track="track"
-          tabindex="0"
-          :is-face-up="track.isFaceUp"
-          class="draggable-item"
-          @click="flipCard(track)"
-        />
+        <card :key="track.id" :track="track" tabindex="0" :is-face-up="track.isFaceUp" class="draggable-item"
+          @click="flipCard(track)" />
       </template>
     </draggable>
   </div>
@@ -35,7 +23,7 @@ definePageMeta({
 onMounted(async () => {
   const dataStore = useDataStore()
   await dataStore.loadData()
-  tracks.value = dataStore.getTracksByboxId('ES2025')
+  tracks.value = dataStore.getTracksByboxId('ESPLAYLIST')
 })
 
 function flipCard(track) {

app/pages/track/[id].vue

@@ -2,7 +2,8 @@
   <boxes />
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
 import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'