evilSpins v1

app/components/Box.vue

@@ -2,19 +2,19 @@
   <article class="box box-scene z-10" ref="scene">
     <div ref="domBox" class="box-object" :class="{ 'is-draggable': isDraggable }">
       <div class="face front relative" ref="frontFace">
-        <img v-if="box.duration" class="cover absolute" :src="`/${box.id}/cover.jpg`" alt="">
+        <img v-if="box.duration" class="cover absolute" :src="`/${box.id}/cover.jpg`" alt="" />
         <div class="size-full flex flex-col justify-center items-center text-7xl" v-html="box.description" v-else />
       </div>
       <div class="face back flex flex-col flex-wrap items-start p-4 overflow-hidden" ref="backFace">
         <li class="list-none text-xxs w-1/2 flex flex-row"
           v-for="track in dataStore.getTracksByboxId(box.id).slice(0, -1)" :key="track.id" :track="track">
-          <span class="" v-if="isNotManifesto">
-            {{ track.order }}.
-          </span>
+          <span class="" v-if="isNotManifesto"> {{ track.order }}. </span>
           <p class="text-left text-slate-700">
             <i class="text-slate-950">
               {{ track.title }}
-            </i> <br /> {{ track.artist.name }}
+            </i>
+            <br />
+            {{ track.artist.name }}
           </p>
         </li>
       </div>
@@ -22,15 +22,13 @@
       <div class="face left" ref="leftFace" />
       <div class="face top" ref="topFace">
         <template v-if="box.duration !== 0">
-          <img class="logo h-full p-1" src="/logo.svg" alt="">
-          <img class="absolute block h-1/2" style="left:5%;" :src="`/${box.id}/title.svg`" alt="">
+          <img class="logo h-full p-1" src="/logo.svg" alt="" />
+          <img class="absolute block h-9" style="left: 5%" :src="`/${box.id}/title.svg`" alt="" />
         </template>
         <template v-else>
-          <span class="absolute block h-1/2 right-6">
-            playlist
-          </span>
-          <img class="logo h-full p-1" src="/favicon.svg" alt="">
-          <span class="absolute block h-1/2" style="left:5%;">
+          <span class="absolute block h-1/2 right-6"> playlist </span>
+          <img class="logo h-full p-1" src="/favicon.svg" alt="" />
+          <span class="absolute block h-1/2" style="left: 5%">
             {{ box.name }}
           </span>
         </template>
@@ -43,12 +41,14 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
-import type { Box, BoxState } from '~~/types/types'
+import type { Box } from '~~/types/types'
 import { useDataStore } from '~/store/data'
 
-const props = defineProps<{
+interface Props {
   box: Box
-}>();
+}
+
+const props = withDefaults(defineProps<Props>(), {})
 
 const { $isMobile } = useNuxtApp()
 
@@ -117,7 +117,8 @@ function applyBoxState() {
 
 // --- Couleurs ---
 function applyColor() {
-  if (!frontFace.value || !backFace.value || !leftFace.value || !topFace.value || !bottomFace.value) return
+  if (!frontFace.value || !backFace.value || !leftFace.value || !topFace.value || !bottomFace.value)
+    return
 
   frontFace.value.style.background = props.box.color2
   backFace.value.style.background = `linear-gradient(to top, ${props.box.color1}, ${props.box.color2})`
@@ -156,7 +157,10 @@ const down = (ev: PointerEvent) => {
   domBox.value?.setPointerCapture(ev.pointerId)
   lastPointer = { x: ev.clientX, y: ev.clientY, time: performance.now() }
   velocity = { x: 0, y: 0 }
-  if (raf) { cancelAnimationFrame(raf); raf = null }
+  if (raf) {
+    cancelAnimationFrame(raf)
+    raf = null
+  }
 }
 
 const move = (ev: PointerEvent) => {
@@ -181,7 +185,9 @@ const move = (ev: PointerEvent) => {
 const end = (ev: PointerEvent) => {
   if (!dragging) return
   dragging = false
-  try { domBox.value?.releasePointerCapture(ev.pointerId) } catch { }
+  try {
+    domBox.value?.releasePointerCapture(ev.pointerId)
+  } catch { }
   if (enableInertia && (Math.abs(velocity.x) > minVelocity || Math.abs(velocity.y) > minVelocity)) {
     if (!raf) raf = requestAnimationFrame(tickInertia)
   }
@@ -219,29 +225,38 @@ onBeforeUnmount(() => {
 })
 
 // --- Watchers ---
-watch(() => props.box.state, () => applyBoxState())
-watch(() => props.box, () => applyColor(), { deep: true })
+watch(
+  () => props.box.state,
+  () => applyBoxState()
+)
+watch(
+  () => props.box,
+  () => applyColor(),
+  { deep: true }
+)
 watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
-
 </script>
 
 <style lang="scss" scoped>
 .box {
-  --size: 6px;
+  --size: 7px;
   --height: calc(var(--size) * (100 / 3));
   --width: calc(var(--size) * 50);
   --depth: calc(var(--size) * 10);
-  transition: height .5s ease, opacity .5s ease;
+  transition:
+    height 0.5s ease,
+    opacity 0.5s ease;
 
   &.box-list {
     height: calc(var(--size) * 20);
     @apply hover:scale-105;
-    transition: all .5s ease;
+    transition: all 0.5s ease;
     will-change: transform;
   }
 
   &.box-selected {
     height: calc(var(--size) * 34);
+    padding-top: 80px;
   }
 
   &-scene {
@@ -270,7 +285,6 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
       cursor: grab;
     }
 
-
     &:active {
       cursor: grabbing;
     }
@@ -316,16 +330,16 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
   }
 
   .face.right {
-    transform: rotateY(90deg) translateX(calc(var(--depth)*-1)) translateY(0px) translateZ(var(--width));
+    transform: rotateY(90deg) translateX(calc(var(--depth) * -1)) translateY(0px) translateZ(var(--width));
     transform-origin: top left;
   }
 
   .face.left {
-    transform: rotateY(-90deg) translateX(calc(var(--depth)/2)) translateY(0) translateZ(calc(var(--depth)/2));
+    transform: rotateY(-90deg) translateX(calc(var(--depth) / 2)) translateY(0) translateZ(calc(var(--depth) / 2));
   }
 
   .face.top {
-    transform: rotateX(90deg) translateX(0px) translateY(calc(var(--depth)/2)) translateZ(calc(var(--depth)/2));
+    transform: rotateX(90deg) translateX(0px) translateY(calc(var(--depth) / 2)) translateZ(calc(var(--depth) / 2));
   }
 
   .face.top>* {
@@ -333,7 +347,7 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
   }
 
   .face.bottom {
-    transform: rotateX(-90deg) translateX(0px) translateY(calc(var(--depth)* -0.5)) translateZ(calc(var(--height) - var(--depth)/2));
+    transform: rotateX(-90deg) translateX(0px) translateY(calc(var(--depth) * -0.5)) translateZ(calc(var(--height) - var(--depth) / 2));
   }
 
   .cover {
@@ -345,7 +359,7 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
   /* Deck fade in/out purely in CSS */
   .box-page {
     opacity: 0;
-    transition: opacity .25s ease;
+    transition: opacity 0.25s ease;
     pointer-events: none;
   }
 

app/components/Boxes.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="boxes">
+    <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"
+    >
+      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>
+  </div>
+</template>
+
+<script setup lang="ts">
+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)
+}
+</script>
+
+<style lang="scss" scoped>
+.boxes {
+  @apply flex flex-col;
+
+  .box {
+    .play-button {
+      @apply relative z-40 -bottom-1/2 opacity-0;
+    }
+
+    &.box-selected .play-button {
+      @apply opacity-100;
+      bottom: 20%;
+      transition:
+        bottom 0.7s ease,
+        opacity 0.7s ease;
+    }
+  }
+}
+</style>

app/components/Card.vue

@@ -1,12 +1,24 @@
 <template>
-  <article class="card isplaying w-56 h-80" :class="isFaceUp ? 'face-up' : 'face-down'">
+  <article
+    class="card w-56 h-80"
+    :class="[
+      isFaceUp ? 'face-up' : 'face-down',
+      { 'current-track': playerStore.currentTrack?.id === track.id }
+    ]"
+  >
     <div class="flip-inner">
       <!-- Face-Up -->
       <main
-        class="face-up backdrop-blur-sm border-1 z-10 card w-56 h-80 p-3 bg-opacity-40 hover:bg-opacity-80 hover:shadow-xl transition-all bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
-        <div class="flex items-center justify-center size-7 absolute top-7 right-7" v-if="isPlaylistTrack">
-          <div class="suit text-7xl absolute"
-            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
+        class="face-up backdrop-blur-sm border-1 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden"
+      >
+        <div
+          class="flex items-center justify-center size-7 absolute top-7 right-7"
+          v-if="isPlaylistTrack"
+        >
+          <div
+            class="suit text-7xl absolute"
+            :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]"
+          >
             <img :src="`/${props.track.card?.suit}.svg`" />
           </div>
           <div class="rank text-white font-bold absolute -mt-1">
@@ -14,10 +26,17 @@
           </div>
         </div>
         <!-- Cover -->
-        <figure class="flex-1 overflow-hidden rounded-t-xl cursor-pointer">
-          <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
+        <figure
+          class="pochette flex-1 flex justify-center items-center overflow-hidden rounded-t-xl cursor-pointer"
+          @click="playerStore.playTrack(track)"
+        >
+          <playButton :objectToPlay="track" />
+          <img
+            :src="coverUrl"
+            alt="Pochette de l'album"
+            class="w-full h-full object-cover object-center"
+          />
         </figure>
-
         <!-- Body -->
         <div class="p-3 text-center bg-white rounded-b-xl">
           <div class="label" v-if="isOrder">
@@ -36,32 +55,35 @@
 
       <!-- Face-Down -->
       <footer
-        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
-        <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
-          <img src="/favicon.svg" />
-          <div class="label label--id" v-if="isOrder">
-            {{ props.track.order }}
-          </div>
-        </div>
+        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden"
+      >
+        <figure
+          @click.stop="playerStore.playTrack(track)"
+          class="h-full flex text-center bg-slate-800 rounded-xl justify-center cursor-pointer"
+        >
+          <playButton :objectToPlay="track" />
+          <img src="/face-down.svg" />
+        </figure>
       </footer>
     </div>
   </article>
-
 </template>
 
 <script setup lang="ts">
 import type { Track } from '~~/types/types'
+import { usePlayerStore } from '~/store/player'
 
 const props = withDefaults(defineProps<{ track: Track; isFaceUp?: boolean }>(), {
   isFaceUp: false
 })
+const playerStore = usePlayerStore()
 const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
 const isPlaylistTrack = computed(() => props.track.type === 'playlist')
 const isRedCard = computed(() => props.track.card?.suit === '♥' || props.track.card?.suit === '♦')
 const coverUrl = props.track.coverId.startsWith('http')
   ? props.track.coverId
-  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`;
+  : `https://f4.bcbits.com/img/${props.track.coverId}_4.jpg`
 </script>
 
 <style lang="scss">
@@ -71,9 +93,17 @@ const coverUrl = props.track.coverId.startsWith('http')
   text-align: center;
 }
 
+.♠,
+.♣,
+.♦,
+.♥ {
+  @apply text-5xl size-14;
+}
+
 /* Flip effect */
 .card {
   perspective: 1000px;
+  @apply transition-all scale-100;
 
   .flip-inner {
     position: relative;
@@ -81,14 +111,6 @@ const coverUrl = props.track.coverId.startsWith('http')
     height: 100%;
     transition: transform 0.6s;
     transform-style: preserve-3d;
-
-    .face-down & {
-      transform: rotateY(180deg);
-    }
-
-    .face-up & {
-      transform: rotateY(0deg);
-    }
   }
 
   .face-down,
@@ -98,21 +120,73 @@ const coverUrl = props.track.coverId.startsWith('http')
     height: 100%;
     backface-visibility: hidden;
     will-change: transform;
+    background-color: rgba(255, 255, 255, 0.5);
   }
 
   .face-up {
     transform: rotateY(0deg);
+    transition: box-shadow 0.6s;
   }
 
   .face-down {
+    transform: rotateY(-180deg);
+  }
+
+  &.face-down .flip-inner {
     transform: rotateY(180deg);
   }
 
-  .♠,
-  .♣,
-  .♦,
-  .♥ {
-    @apply text-5xl size-14;
+  &.face-up .flip-inner {
+    transform: rotateY(0deg);
+  }
+
+  &.face-down:hover {
+    .play-button {
+      opacity: 1;
+    }
+
+    .flip-inner {
+      transform: rotateY(170deg);
+    }
+  }
+
+  &.current-track,
+  &:focus {
+    @apply z-50;
+
+    .face-up {
+      @apply shadow-2xl-custom;
+      transition:
+        box-shadow 0.6s,
+        transform 0.6s;
+    }
+
+    @apply scale-110;
+  }
+
+  .play-button {
+    opacity: 0;
+  }
+
+  .face-up:hover {
+    .play-button {
+      opacity: 1;
+    }
+
+    .flip-inner {
+      transform: rotateY(-170deg);
+    }
+  }
+
+  .play-button {
+    @apply absolute bottom-1/2 top-24 opacity-0 hover:opacity-100;
+  }
+
+  .pochette:active,
+  .face-down:active {
+    .play-button {
+      @apply scale-90;
+    }
   }
 }
-</style>
+</style>

app/components/Deck.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="relative w-full">
+    <div
+      ref="deck"
+      class="deck flex flex-wrap justify-center gap-4"
+      :class="{ 'px-16 pb-36': playerStore.currentTrack }"
+    >
+      <card
+        v-for="(track, i) in tracks"
+        :key="track.id"
+        :track="track"
+        tabindex="i"
+        :tab-index="i"
+        :is-face-up="isCardRevealed(track.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { useDataStore } from '~/store/data'
+import { useCardStore } from '~/store/card'
+import { usePlayerStore } from '~/store/player'
+import { useUiStore } from '~/store/ui'
+import type { Box } from '~~/types/types'
+
+const props = defineProps<{
+  box: Box
+}>()
+
+const cardStore = useCardStore()
+const dataStore = useDataStore()
+const playerStore = usePlayerStore()
+const uiStore = useUiStore()
+
+const deck = ref<HTMLElement | null>(null)
+const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
+
+const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
+
+const handleClickOutside = (event: MouseEvent) => {
+  // Vérifier si le clic provient d'un bouton de lecture
+  const target = event.target as HTMLElement
+  const isPlayButton = target.closest('.play-button')
+
+  // Ne pas fermer si le clic provient d'un bouton de lecture
+  if (isPlayButton) return
+
+  // Vérifier si le clic est en dehors du deck
+  if (deck.value && !deck.value.contains(target)) {
+    uiStore.closeBox()
+  }
+}
+
+onMounted(() => {
+  // Ajouter le gestionnaire de clic à l'extérieur
+  document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+  // Nettoyer le gestionnaire d'événement
+  document.removeEventListener('mousedown', handleClickOutside)
+})
+</script>

app/components/Loader.vue

@@ -1,8 +1,8 @@
 <template>
   <transition name="fade">
     <div v-if="data.isLoading" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
-      <img src="/loader.svg" alt="Loading" class="relative h-40 w-40" />
+      <div class="absolute inset-0 bg-black/60 backdrop-blur-md"/>
+      <img src="/loader.svg" alt="Loading" class="relative h-40 w-40" >
     </div>
   </transition>
 </template>

app/components/Logo.vue

@@ -0,0 +1,6 @@
+<template>
+  <header class="py-4">
+    <img class="logo w-80" src="/logo.svg" alt="" >
+    <h1 class="text-center">mix-tapes</h1>
+  </header>
+</template>

app/components/Newsletter.vue

@@ -0,0 +1,11 @@
+<template>
+  <form
+    class="h-screen flex justify-center items-center flex-col absolute top-0 left-1/2 -translate-x-1/2"
+  >
+    <label for="email" class="block text-xl"> be notify when's evilSpins open : </label>
+    <div>
+      <input id="email" type="email" name="" placeholder="email" >
+      <button>ok</button>
+    </div>
+  </form>
+</template>

app/components/PlayButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <button
+    class="play-button rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
+    :class="{ loading: isLoading }"
+    :disabled="isLoading"
+  >
+    <template v-if="isLoading">
+      <img src="/loader.svg" alt="Chargement" class="size-16" />
+    </template>
+    <template v-else>
+      {{ isPlaying ? 'I I' : '▶' }}
+    </template>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { usePlayerStore } from '~/store/player'
+import type { Box, Track } from '~/../types/types'
+
+const playerStore = usePlayerStore()
+const props = defineProps<{ objectToPlay: Box | Track }>()
+
+const isPlaying = computed(() => {
+  if (!playerStore.currentTrack) return false
+  return (
+    playerStore.isPlaying &&
+    (playerStore.currentTrack?.boxId === props.objectToPlay.id ||
+      playerStore.currentTrack?.id === props.objectToPlay.id)
+  )
+})
+
+const isLoading = computed(() => {
+  if (!playerStore.currentTrack || !playerStore.isLoading) return false
+  return (
+    playerStore.currentTrack.boxId === props.objectToPlay.id ||
+    playerStore.currentTrack.id === props.objectToPlay.id
+  )
+})
+</script>
+
+<style>
+.loading {
+  opacity: 1 !important;
+}
+</style>

app/components/Player.vue

@@ -1,9 +1,16 @@
 <template>
-  <div class="player-container fixed left-0 z-50 w-full h-20 bg-white"
-    :class="playerStore.currentTrack ? '-bottom-0 opacity-100' : '-bottom-32 opacity-0'">
+  <div
+    class="player fixed left-0 z-50 w-full h-20"
+    :class="playerStore.currentTrack ? '-bottom-0 opacity-100' : '-bottom-32 opacity-0'"
+  >
     <div class="flex items-center gap-3 p-2">
-      <img v-if="playerStore.getCurrentCoverUrl" :src="playerStore.getCurrentCoverUrl as string" alt="Current cover"
-        class="size-16 object-cover object-center rounded" />
+      <img
+        v-if="playerStore.getCurrentCoverUrl"
+        :src="playerStore.getCurrentCoverUrl as string"
+        alt="Current cover"
+        class="size-16 object-cover object-center rounded"
+      >
+      <toggleFavorite v-if="playerStore.currentTrack" :track="playerStore.currentTrack" />
       <audio ref="audioRef" class="flex-1" controls />
     </div>
   </div>
@@ -19,19 +26,20 @@ const audioRef = ref<HTMLAudioElement | null>(null)
 onMounted(() => {
   if (audioRef.value) {
     playerStore.attachAudio(audioRef.value)
-    audioRef.value.addEventListener("timeupdate", playerStore.updateTime)
+    audioRef.value.addEventListener('timeupdate', playerStore.updateTime)
   }
 })
 
 onUnmounted(() => {
   if (audioRef.value) {
-    audioRef.value.removeEventListener("timeupdate", playerStore.updateTime)
+    audioRef.value.removeEventListener('timeupdate', playerStore.updateTime)
   }
 })
 </script>
 
 <style>
-.player-container {
+.player {
   transition: all 1s ease-in-out;
+  background-color: rgba(255, 255, 255, 0.5);
 }
-</style>
+</style>

app/components/SearchModal.vue

@@ -1,58 +1,83 @@
 <template>
   <transition name="fade">
-    <div v-if="ui.showSearch" class="fixed inset-0 z-50 flex items-center justify-center transition-all">
+    <div
+      v-if="ui.showSearch"
+      class="fixed inset-0 z-50 flex items-center justify-center transition-all"
+    >
       <div class="absolute inset-0 bg-black/60 backdrop-blur-md" @click="close"></div>
       <div
         class="relative w-full max-w-2xl rounded-xl bg-white shadow-xl ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700"
-        role="dialog" aria-modal="true" @keydown.esc.prevent.stop="close">
+        role="dialog"
+        aria-modal="true"
+        @keydown.esc.prevent.stop="close"
+      >
         <div class="flex items-center gap-2 dark:border-slate-700">
-          <svg class="ml-4 h-7 w-7 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <svg
+            class="ml-4 h-7 w-7 text-slate-500"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
             <circle cx="11" cy="11" r="8" />
             <path d="m21 21-4.3-4.3" />
           </svg>
-          <input ref="inputRef" v-model="ui.searchQuery" type="text" placeholder="Rechercher boxes, artistes, tracks..."
+          <input
+            ref="inputRef"
+            v-model="ui.searchQuery"
+            type="text"
+            placeholder="Rechercher boxes, artistes, tracks..."
             class="flex-1 bg-transparent px-2 py-2 text-slate-900 text-3xl placeholder-slate-400 outline-none dark:text-slate-100"
-            @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" @keydown.enter.prevent="confirm" />
+            @keydown.down.prevent="move(1)"
+            @keydown.up.prevent="move(-1)"
+            @keydown.enter.prevent="confirm"
+          />
         </div>
 
         <div class="max-h-72 overflow-auto results-scroll">
           <template v-if="results.length">
             <ul class="divide-y divide-slate-100 dark:divide-slate-800">
-              <li v-for="(resultItem, idx) in results" :key="resultItem.key" :class="[
-                'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
-                idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
-              ]" @mouseenter="activeIndex = idx" @click="selectResult(resultItem)">
+              <li
+                v-for="(resultItem, idx) in results"
+                :key="resultItem.key"
+                :class="[
+                  'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
+                  idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
+                ]"
+                @mouseenter="activeIndex = idx"
+                @click="selectResult(resultItem)"
+              >
                 <div class="flex items-center gap-3">
-                  <img v-if="coverUrlFor(resultItem)" :src="coverUrlFor(resultItem)" alt="" loading="lazy"
-                    class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700" />
+                  <img
+                    v-if="coverUrlFor(resultItem)"
+                    :src="coverUrlFor(resultItem)"
+                    alt=""
+                    loading="lazy"
+                    class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700"
+                  />
                   <span
-                    class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600">{{
-                      resultItem.type }}</span>
+                    class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600"
+                    >{{ resultItem.type }}</span
+                  >
                   <span class="text-slate-900 dark:text-slate-100">{{ resultItem.label }}</span>
                 </div>
                 <div class="flex items-center gap-2">
-                  <span v-if="resultItem.sublabel" class="text-sm text-slate-500 dark:text-slate-400">{{
-                    resultItem.sublabel }}</span>
-                  <button v-if="resultItem.type === 'TRACK'"
-                    class="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800" aria-label="Toggle favorite"
-                    @click.stop="fav.toggle(resultItem.payload)">
-                    <svg v-if="fav.isFavorite(resultItem.payload.id)" class="h-5 w-5 text-rose-500" viewBox="0 0 24 24"
-                      fill="currentColor">
-                      <path
-                        d="M12 21s-6.716-4.35-9.428-7.062C.86 12.226.5 10.64.5 9.5.5 6.462 2.962 4 6 4c1.657 0 3.157.806 4 2.09C10.843 4.806 12.343 4 14 4c3.038 0 5.5 2.462 5.5 5.5 0 1.14-.36 2.726-2.072 4.438C18.716 16.65 12 21 12 21z" />
-                    </svg>
-                    <svg v-else class="h-5 w-5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                      stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <path
-                        d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z" />
-                    </svg>
-                  </button>
+                  <span
+                    v-if="resultItem.sublabel"
+                    class="text-sm text-slate-500 dark:text-slate-400"
+                    >{{ resultItem.sublabel }}</span
+                  >
+                  <toggleFavorite v-if="resultItem.type === 'TRACK'" :track="resultItem.payload" />
                 </div>
               </li>
             </ul>
           </template>
-          <div v-else-if="ui.searchQuery" class="px-2 py-6 text-center text-slate-500 dark:text-slate-400">
+          <div
+            v-else-if="ui.searchQuery"
+            class="px-2 py-6 text-center text-slate-500 dark:text-slate-400"
+          >
             Aucun résultat
           </div>
         </div>
@@ -77,7 +102,11 @@ const activeIndex = ref(0)
 
 const close = () => ui.closeSearch()
 
-const normalized = (s: string) => s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase()
+const normalized = (s: string) =>
+  s
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .toLowerCase()
 
 type ResultItem = {
   key: string
@@ -110,7 +139,10 @@ const results = computed<ResultItem[]>(() => {
     }
   }
   for (const track of data.tracks) {
-    const artistName = typeof track.artist === 'object' && track.artist ? (track.artist as any).name ?? '' : String(track.artist)
+    const artistName =
+      typeof track.artist === 'object' && track.artist
+        ? ((track.artist as any).name ?? '')
+        : String(track.artist)
     const label = track.title
     const sub = artistName
     if (normalized(label).includes(q) || normalized(sub).includes(q)) {

app/components/ToggleFavorite.vue

@@ -0,0 +1,41 @@
+<template>
+  <button
+    class="p-1 rounded hover:bg-slate-100 transition-colors duration-300"
+    aria-label="Toggle favorite"
+    @click.stop="fav.toggle(props.track)"
+  >
+    <svg
+      v-if="fav.isFavorite(props.track.id)"
+      class="h-5 w-5 text-amber-400 hover:text-amber-300"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+    <svg
+      v-else
+      class="h-5 w-5 text-slate-400"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path
+        d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+      />
+    </svg>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useFavoritesStore } from '~/store/favorites'
+import type { Track } from '~/../types/types'
+
+const fav = useFavoritesStore()
+
+const props = defineProps<{ track: Track }>()
+</script>

app/components/boxes.vue

@@ -1,48 +0,0 @@
-<template>
-  <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'"
-        class="relative z-40 rounded-full size-24 bottom-1/2 text-4xl tex-bold text-esyellow 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 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)
-}
-</script>
-
-<style lang="scss">
-.boxes {
-  @apply flex flex-col-reverse;
-}
-</style>

app/components/deck.vue

@@ -1,55 +0,0 @@
-<template>
-  <div>
-    <div class="deck-order">
-      <button @click="orderDeck('pile')">pile</button>
-      <button @click="orderDeck('plateau')">plateau</button>
-      <button @click="orderDeck('holdem')">holdem</button>
-    </div>
-    <div ref="deck" class="deck flex flex-wrap justify-center gap-4">
-      <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
-        @click="() => playerStore.playTrack(track).catch(err => console.error(err))" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useDataStore } from '~/store/data'
-import type { Box } from '~~/types/types'
-import { usePlayerStore } from '~/store/player'
-
-const props = defineProps<{
-  box: Box
-}>()
-const dataStore = useDataStore()
-const deck = ref()
-const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
-const playerStore = usePlayerStore()
-
-function orderDeck(order: string) {
-  deck.value.classList.remove('pile', 'plateau', 'holdem')
-  deck.value.classList.add(order)
-}
-</script>
-
-<style lang="scss">
-.deck {
-  @apply transition-all;
-
-  &.pile {
-    @apply relative;
-
-    .card {
-      @apply absolute top-0;
-    }
-  }
-
-  &.plateau {
-    @apply mt-8 p-8 w-full flex flex-wrap justify-around;
-  }
-
-  &.holdem {
-    /* style holdem */
-  }
-}
-</style>

app/components/deck/BlackJack.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    ref="deck"
+    class="deck flex flex-wrap justify-center gap-4"
+    :class="{ 'pb-36': playerStore.currentTrack }"
+  >
+    <card
+      v-for="(track, i) in tracks"
+      :key="track.id"
+      :track="track"
+      tabindex="i"
+      :is-face-up="isCardRevealed(track.id)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDataStore } from '~/store/data'
+import { useCardStore } from '~/store/card'
+import { usePlayerStore } from '~/store/player'
+import type { Box } from '~~/types/types'
+
+const props = defineProps<{
+  box: Box
+}>()
+
+const cardStore = useCardStore()
+const dataStore = useDataStore()
+const playerStore = usePlayerStore()
+
+const deck = ref()
+const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
+
+const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
+</script>

app/components/logo.vue

@@ -1,8 +0,0 @@
-<template>
-  <header class="py-4">
-    <img class="logo w-80" src="/logo.svg" alt="">
-    <h1 class="text-center">
-      mix-tapes
-    </h1>
-  </header>
-</template>

app/components/newsletter.vue

@@ -1,11 +0,0 @@
-<template>
-  <form class="h-screen flex justify-center items-center flex-col absolute top-0 left-1/2 -translate-x-1/2">
-    <label for="email" class="block text-xl">
-      be notify when's evilSpins open :
-    </label>
-    <div>
-      <input type="email" name="" id="email" placeholder="email">
-      <button>ok</button>
-    </div>
-  </form>
-</template>