eS v1

app/components/boxes.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-col-reverse mt-16">
+    <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'"
+        class="relative z-40 rounded-full size-24 bottom-1/2 text-4xl tex-bold backdrop-blur-sm bg-black/25">
+        {{ !playerStore.isPaused && playerStore.currentTrack?.boxId === box.id ? 'I I' : '▶' }}
+      </button>
+      <deck :box="box" class="box-page" v-if="box.state === 'box-selected'" @click.stop />
+    </box>
+  </div>
+</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'
+import { useUiStore } from '~/store/ui'
+
+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 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 () => {
+  const dataStore = await useDataStore()
+  await dataStore.loadData()
+
+  window.addEventListener('keydown', KeyboardAction)
+})
+</script>