compose elt v0.1

app/components/deck/Playlist.vue

@@ -1,29 +1,30 @@
 <template>
-  <div class="deck-playlist">
-    <div class="flex flex-col fixed right-0 top-0 z-50">
-      <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
-        class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
-        close
-      </button>
-      <Bucket v-model="bucketCards" @card-dropped="onCardDropped" />
-    </div>
-    <div class="controls flex justify-center z-50 relative">
-      <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors" @click="toggleAllCards">
-        {{ allCardsRevealed ? 'Hide All' : 'Reveal All' }}
-      </button>
-      <SearchInput @search="onSearch" />
-      <SelectCardRank @change="onRankChange" />
-      <SelectCardSuit @change="onSuitChange" />
-    </div>
-    <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
-      <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
-        :is-face-up="isCardRevealed(track.id)" />
-    </div>
+  <div class="flex flex-col fixed right-0 top-0 z-50">
+    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
+      class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
+      close
+    </button>
+  </div>
+  <div class="controls flex justify-center z-50 relative">
+    <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors" @click="toggleAllCards">
+      {{ allCardsRevealed ? 'Hide All' : 'Reveal All' }}
+    </button>
+    <SearchInput @search="onSearch" />
+    <SelectCardRank @change="onRankChange" />
+    <SelectCardSuit @change="onSuitChange" />
+  </div>
+  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+    <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
+      :is-face-up="isCardRevealed(track.id)" />
+  </div>
+  <div class="dock">
+    <Bucket @card-dropped="onCardDropped" />
+    <Platine />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
@@ -45,7 +46,6 @@ const uiStore = useUiStore()
 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
 const filteredTracks = ref(tracks.value)
-const bucketCards = ref([])
 
 // Variables réactives pour les filtres
 const selectedSuit = ref('')