refacto card / box / deck ajout du template default

app/components/boxes.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col-reverse mt-16" :class="!!playerStore.currentTrack ? 'mb-36' : 'mb-16'">
+  <div class="boxes">
     <box v-for="(box, i) in dataStore.boxes.slice()" :key="box.id" :tabindex="dataStore.boxes.length - i" :box="box"
       @click="onBoxClick(box)" class="text-center" :class="box.state" :id="box.id">
       <button @click.stop="playSelectedBox(box)" v-if="box.state === 'box-selected'"
@@ -12,7 +12,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import type { Box } from '~~/types/types'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
@@ -40,32 +39,10 @@ function onBoxClick(b: Box) {
 function playSelectedBox(b: Box) {
   playerStore.playBox(b)
 }
-
-function KeyboardAction(e: KeyboardEvent) {
-  switch (e.key) {
-    case 'Escape':
-      uiStore.closeBox()
-      break;
-    case 'ArrowUp':
-      break;
-
-    case 'Enter':
-      if (document.activeElement?.id) {
-        openBox(document.activeElement.id)
-      }
-      break;
-    case 'ArrowDown':
-      break;
-    case 'ArrowLeft':
-      break;
-    case 'ArrowRight':
-      break;
-    default:
-      break;
-  }
-}
-
-onMounted(async () => {
-  window.addEventListener('keydown', KeyboardAction)
-})
 </script>
+
+<style lang="scss">
+.boxes {
+  @apply flex flex-col-reverse;
+}
+</style>