WIP: add TODO and small fixies

app/components/Boxes.vue

@@ -1,29 +1,17 @@
 <template>
-  <div class="boxes">
-    <button
-      @click="uiStore.closeBox"
-      v-if="uiStore.isBoxSelected"
+  <div class="boxes" :class="{ 'box-selected': uiStore.isBoxSelected }">
+    <button @click="uiStore.closeBox" v-if="uiStore.isBoxSelected"
       class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
-      aria-label="close the box"
-    >
+      aria-label="close the box">
       close
     </button>
-    <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"
-    >
-      <playButton
-        @click.stop="playSelectedBox(box)"
-        :objectToPlay="box"
-        class="relative z-40 m-auto"
-      />
-      <deck :box="box" class="box-page" v-if="box.state === 'box-selected'" @click.stop />
+    <box v-for="(box, i) in dataStore.boxes.slice()" :key="box.id" :tabindex="dataStore.boxes.length - i" :box="box"
+      @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
+      <playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
+      <template v-if="box.state === 'box-selected'">
+        <deckCompilation :box="box" class="box-page" v-if="box.type === 'compilation'" @click.stop />
+        <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
+      </template>
     </box>
   </div>
 </template>
@@ -38,29 +26,38 @@ const dataStore = useDataStore()
 const playerStore = usePlayerStore()
 const uiStore = useUiStore()
 
-function openBox(id: string) {
-  uiStore.selectBox(id)
-  // Scroll to the top smoothly
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth'
-  })
-}
-
-function onBoxClick(b: Box) {
-  if (b.state !== 'box-selected') {
-    openBox(b.id)
+function openBox(box: Box) {
+  if (box.state !== 'box-selected') {
+    uiStore.selectBox(box.id)
+    // Scroll to the top smoothly
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth'
+    })
   }
 }
 
-function playSelectedBox(b: Box) {
-  playerStore.playBox(b)
+function playSelectedBox(box: Box) {
+  playerStore.playBox(box)
 }
 </script>
 
 <style lang="scss" scoped>
 .boxes {
-  @apply flex flex-col;
+  @apply flex flex-col items-center justify-center text-center w-full;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: 250px;
+  transition: margin-top .5s ease;
+
+  &.box-selected {
+    margin-top: 0;
+
+    .box {
+      @apply w-full;
+    }
+  }
 
   .box {
     .play-button {
@@ -68,7 +65,7 @@ function playSelectedBox(b: Box) {
     }
 
     &.box-selected .play-button {
-      @apply opacity-100;
+      @apply opacity-100 z-20;
       bottom: 20%;
       transition:
         bottom 0.7s ease,