evilSpins v1

2025-11-04 22:41:41 +01:00
parent deb15b3ea1
commit 34d22b3b17
49 changed files with 5791 additions and 2447 deletions
--- a/.env
+++ b/.env
@@ -1,3 +0,0 @@
-DOMAIN="evilspins.com"
-PORT="7901"
-PORT_EXPOSED="3000"
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,5 +3,6 @@
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
-  }
+  },
+  "eslint.useFlatConfig": true
 }
--- a/app/app.vue
+++ b/app/app.vue
@@ -14,7 +14,6 @@ import { watch, computed } from 'vue'

 const ui = useUiStore()
 const player = usePlayerStore()
-const { $isMobile } = useNuxtApp()
 useHead({
  bodyAttrs: {
    class: 'bg-slate-100'
@@ -45,7 +44,7 @@ const selectedBoxId = computed(() => ui.getSelectedBox?.id)
 watch(
  () => selectedBoxId.value,
  (id) => {
-    if (process.client) {
+    if (import.meta.client) {
      if (!id) {
        // Back to root path without navigation to preserve UI state/animations
        if (location.pathname.startsWith('/box/')) {
@@ -53,7 +52,9 @@ watch(
        }
        return
      }
-      const currentId = location.pathname.startsWith('/box/') ? location.pathname.split('/').pop() : null
+      const currentId = location.pathname.startsWith('/box/')
+        ? location.pathname.split('/').pop()
+        : null
      if (currentId === id) return
      requestAnimationFrame(() => {
        history.replaceState(null, '', `/box/${id}`)
@@ -67,14 +68,23 @@ watch(
 <style>
 button,
 input {
-  @apply px-4 py-2 m-4 rounded-md text-center font-bold
+  @apply px-4 py-2 m-4 rounded-md text-center font-bold;
 }

 button {
-  @apply bg-esyellow text-slate-700;
+  /* @apply bg-esyellow text-slate-700; */
 }

-input[type="email"] {
+input[type='email'] {
  @apply bg-slate-900 text-esyellow;
 }
+
+* {
+  user-select: none;
+}
+
+img {
+  user-drag: none;
+  user-select: none;
+}
 </style>
--- a/app/components/Box.vue
+++ b/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;
  }

--- a/app/components/Boxes.vue
+++ b/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>
--- a/app/components/Card.vue
+++ b/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>
--- a/app/components/Deck.vue
+++ b/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>
--- a/app/components/Loader.vue
+++ b/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>
--- a/app/components/Logo.vue
+++ b/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>
--- a/app/components/Newsletter.vue
+++ b/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>
--- a/app/components/PlayButton.vue
+++ b/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>
--- a/app/components/Player.vue
+++ b/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>
--- a/app/components/SearchModal.vue
+++ b/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="[
+              <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)">
+                ]"
+                @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)) {
--- a/app/components/ToggleFavorite.vue
+++ b/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>
--- a/app/components/boxes.vue
+++ b/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>
--- a/app/components/deck.vue
+++ b/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>
--- a/app/components/deck/BlackJack.vue
+++ b/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>
--- a/app/components/logo.vue
+++ b/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>
--- a/app/components/newsletter.vue
+++ b/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>
--- a/app/error.vue
+++ b/app/error.vue
@@ -1,6 +1,8 @@
 <template>
  <div>
-    <h1 class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow">
+    <h1
+      class="text-white pt-6 text-lg md:text-xl lg:text-2xl text-center font-bold tracking-widest text-shadow"
+    >
      {{ error?.statusCode }}
    </h1>
    <NuxtLink to="/">Go back home</NuxtLink>
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,32 +1,31 @@
 <template>
  <div class="w-full min-h-screen flex flex-col items-center bg-gray-50">
    <!-- Header avec logo -->
-    <header class="w-full py-4 px-6 bg-white shadow-sm">
+    <header
+      class="w-full bg-white shadow-sm overflow-hidden transition-all duration-300 ease-in-out"
+      :class="{ 'h-0 py-0': uiStore.getSelectedBox, 'py-4 h-auto': !uiStore.getSelectedBox }"
+    >
      <div class="max-w-7xl mx-auto w-full flex justify-center">
-        <div @click="navigateToHome" class="cursor-pointer inline-block">
+        <a href="/" class="inline-block">
          <logo />
-        </div>
+        </a>
      </div>
    </header>

    <!-- Contenu principal -->
-    <main class="w-full max-w-7xl flex-1 p-6">
+    <main>
      <slot />
    </main>

    <!-- Player de musique fixe en bas -->
-    <SearchModal />
-    <Loader />
+    <searchModal />
+    <loader />
    <Player class="w-full border-t border-gray-200" />
  </div>
 </template>

 <script setup>
-import { useRouter } from 'vue-router'
+import { useUiStore } from '~/store/ui'

-const router = useRouter()
-
-const navigateToHome = () => {
-  router.push('/')
-}
+const uiStore = useUiStore()
 </script>
--- a/app/pages/box/[id].vue
+++ b/app/pages/box/[id].vue
@@ -3,11 +3,9 @@
 </template>

 <script setup lang="ts">
-import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
-import { usePlayerStore } from '~/store/player'

 // Configuration du layout
 definePageMeta({
@@ -23,13 +21,8 @@ onMounted(async () => {
  const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
  if (typeof idParam === 'string' && idParam.length > 0) {
    uiStore.selectBox(idParam)
-
-    // Lire automatiquement la box si on est sur la page d'une box
-    const box = dataStore.boxes.find(b => b.id === idParam)
-    if (box) {
-      const player = usePlayerStore()
-      player.playBox(box).catch(console.error)
-    }
+    //   player.playBox(box).catch(console.error)
+    // }
  }
 })
 </script>
--- a/app/pages/defaultDev.vue
+++ b/app/pages/defaultDev.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="deck">
+    <card
+      v-for="track in tracks"
+      :key="track.id"
+      :track="track"
+      :is-face-up="track.isFaceUp"
+      @click="flipCard(track)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useDataStore } from '~/store/data'
+const tracks = ref([])
+definePageMeta({
+  layout: 'default'
+})
+
+onMounted(async () => {
+  const dataStore = useDataStore()
+  await dataStore.loadData()
+  tracks.value = dataStore.getTracksByboxId('ES2025')
+})
+
+function flipCard(track) {
+  track.isFaceUp = !track.isFaceUp
+}
+</script>
+
+<style lang="scss" scoped>
+.logo {
+  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
+}
+
+.deck {
+  position: relative;
+  height: 80vh;
+
+  .card {
+    z-index: 10;
+    position: relative;
+  }
+}
+</style>
--- a/app/pages/dev.vue
+++ b/app/pages/dev.vue
@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <button
+      class="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-lg z-50 transition-colors"
+      title="Ranger les cartes"
+      @click="arrangeCards"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="h-6 w-6"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M4 6h16M4 12h16m-7 6h7"
+        />
+      </svg>
+    </button>
+
+    <div ref="deck" class="deck">
+      <card
+        v-for="track in tracks"
+        :key="track.id"
+        :track="track"
+        :class="['card', 'id-' + track.id, { dragging: dragging === track }]"
+        :style="{
+          top: track.y + 'px',
+          left: track.x + 'px',
+          zIndex: track.zIndex || 1,
+          transform: `rotate(${track.rotation || 0}deg)`
+        }"
+        :is-face-up="track.isFaceUp"
+        @mousedown="startDrag($event, track)"
+        @click="flipCard(track)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useDataStore } from '~/store/data'
+
+const tracks = ref([])
+const deck = ref(null)
+let zIndexCounter = 1
+
+let dragging = null
+let offset = { x: 0, y: 0 }
+let velocity = { x: 0, y: 0 }
+let lastTime = 0
+
+const dataStore = useDataStore()
+
+definePageMeta({ layout: 'default' })
+
+onMounted(async () => {
+  await dataStore.loadData()
+  tracks.value = dataStore.getTracksByboxId('ES2025').map((t, i) => ({
+    ...t,
+    x: t.x ?? 50 + i * 20,
+    y: t.y ?? 50 + i * 20,
+    zIndex: t.zIndex ?? i + 1,
+    rotation: 0,
+    isFaceUp: t.isFaceUp ?? false
+  }))
+
+  window.addEventListener('mousemove', onDrag)
+  window.addEventListener('mouseup', stopDrag)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('mousemove', onDrag)
+  window.removeEventListener('mouseup', stopDrag)
+})
+
+function startDrag(e, track) {
+  dragging = track
+  const rect = deck.value.getBoundingClientRect()
+  offset.x = e.clientX - rect.left - track.x
+  offset.y = e.clientY - rect.top - track.y
+  lastTime = performance.now()
+  velocity = { x: 0, y: 0 }
+
+  zIndexCounter += 1
+  track.zIndex = zIndexCounter
+}
+
+function onDrag(e) {
+  if (!dragging) return
+
+  const rect = deck.value.getBoundingClientRect()
+  const newX = e.clientX - rect.left - offset.x
+  const newY = e.clientY - rect.top - offset.y
+
+  const now = performance.now()
+  const dt = now - lastTime
+  velocity.x = (newX - dragging.x) / dt
+  velocity.y = (newY - dragging.y) / dt
+  lastTime = now
+
+  dragging.x = newX
+  dragging.y = newY
+
+  // Rotation dynamique selon la position horizontale
+  const centerX = rect.width / 2
+  const dx = dragging.x - centerX
+  dragging.rotation = dx * 0.05
+}
+
+function stopDrag() {
+  if (!dragging) return
+  const track = dragging
+  dragging = null
+
+  // Inertie douce
+  const decay = 0.95
+  function animateInertia() {
+    if (Math.abs(velocity.x) < 0.02 && Math.abs(velocity.y) < 0.02) return
+    track.x += velocity.x * 16
+    track.y += velocity.y * 16
+    velocity.x *= decay
+    velocity.y *= decay
+    requestAnimationFrame(animateInertia)
+  }
+  animateInertia()
+}
+
+function flipCard(track) {
+  track.isFaceUp = true
+}
+
+function arrangeCards() {
+  const deckRect = deck.value.getBoundingClientRect()
+  const cardWidth = 224
+  const cardHeight = 320
+  const padding = 20
+  const cardsPerRow = Math.max(
+    1,
+    Math.floor((deckRect.width - padding * 2) / (cardWidth + padding))
+  )
+
+  tracks.value.forEach((track, index) => {
+    const row = Math.floor(index / cardsPerRow)
+    const col = index % cardsPerRow
+
+    track.x = padding + col * (cardWidth + padding)
+    track.y = padding + row * (cardHeight / 3)
+    track.zIndex = index + 1
+    track.rotation = 0
+
+    zIndexCounter = Math.max(zIndexCounter, track.zIndex)
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.deck {
+  position: relative;
+  width: 100%;
+  min-height: 80vh;
+  height: 100%;
+  overflow-y: auto;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.card {
+  position: absolute;
+  cursor: grab;
+  transition:
+    transform 0.1s ease,
+    box-shadow 0.2s ease;
+}
+
+.card:active {
+  cursor: grabbing;
+}
+
+.card.dragging {
+  z-index: 999;
+  cursor: grabbing;
+  transform: scale(1.05) rotate(0deg);
+  /* rotation sera remplacée dynamiquement */
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
+}
+</style>
--- a/app/pages/draggable.vue
+++ b/app/pages/draggable.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="deck">
+    <draggable
+      v-model="tracks"
+      item-key="id"
+      class="draggable-container"
+      @start="drag = true"
+      @end="onDragEnd"
+    >
+      <template #item="{ element: track }">
+        <card
+          :key="track.id"
+          :track="track"
+          tabindex="0"
+          :is-face-up="track.isFaceUp"
+          class="draggable-item"
+          @click="flipCard(track)"
+        />
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<script setup>
+import { useDataStore } from '~/store/data'
+import draggable from 'vuedraggable'
+
+const drag = ref(false)
+const tracks = ref([])
+// Configuration du layout
+definePageMeta({
+  layout: 'default'
+})
+
+onMounted(async () => {
+  const dataStore = useDataStore()
+  await dataStore.loadData()
+  tracks.value = dataStore.getTracksByboxId('ES2025')
+})
+
+function flipCard(track) {
+  track.isFaceUp = !track.isFaceUp
+}
+
+function onDragEnd() {
+  drag.value = false
+  // Ici vous pouvez ajouter une logique supplémentaire après le drop si nécessaire
+}
+</script>
+
+<style lang="scss" scoped>
+.logo {
+  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
+}
+
+.deck {
+  position: relative;
+  height: 80vh;
+
+  .draggable-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 1rem;
+    min-height: 100%;
+  }
+
+  .draggable-item {
+    cursor: grab;
+    transition: transform 0.2s;
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &.sortable-ghost {
+      opacity: 0.5;
+      background: #c8ebfb;
+      border-radius: 1rem;
+    }
+
+    &.sortable-drag {
+      transform: rotate(2deg);
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .card {
+    z-index: 10;
+    position: relative;
+  }
+
+  /* noise tools */
+  $size: 130px;
+  $scale: 1.05;
+  $border-radius: calc($size / 2);
+  $grad-position: 100% 0;
+  $grad-start: 25%;
+  $grad-stop: 65%;
+  $duration: 3.5s;
+  $noise: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAMAAAC5KTl3AAAAgVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtFS1lAAAAK3RSTlMWi3QSa1uQOKBWCTwcb6V4gWInTWYOqQSGfa6XLyszmyABlFFJXySxQ0BGn2PQBgAAC4NJREFUWMMV1kWO5UAQRdFk5kwzs/33v8Cunr7ZUehKAdaRUAse99ozDjF5BqswrPKm7btzJ2tRziN3rMYXC236humIV5Our7nHWnVdFOBojW2XVnkeu1IZHNJH5OPHj9TjgVxBGBwAAmp60WoA1gBBvg3XMFhxUQ4KuLqx0CritYZPPXinsOqB7I76+OHaZlPzLEcftrqOlOwjeXvuEuH6t6emkaofgVUDIb4fEZB6CmRAeFCTq11lxbAgUyx4rXkqlH9I4bTUDRRVD1xjbqb9HyUBn7rhtr1x+x9Y0e3BdX31/loYvZaLxqnjbRuokz+pPG7WebnSNKE3yE6Tka4aDEDMVYr6Neq126c+ZR2nzzm3yyiC7PGWG/1uueqZudrVGYNdsgOMDvt1cI8CXu63QIcPvYNY8z870WwYazTS7DqpDEknZqS0AFXObWUxTaw0q5pnHlq4oQImakpLfJkmErdvAfhsc7lod0DVT4tuob25C0tQjzdiFObCz7U7eaKGP3s6yQVgQ/y+q+nY6K5dfV75iXzcNlGIP38aj22sVwtWWKMRb7B5HoHPaBvI1Ve5TSXATi66vV6utxsV+aZNFu+93VvlrG/oj8Wp67YT8l+Oq6PjwdGatFm7SEAP13kE0y9CEcf9qhtEWCMIq5AGq71moEAI9vrmFcmO8+7ZyDnmRN/VUaFkM2ce8KuBGFzDMmY6myLfQGra2ofgHhbJRXuRDZ4H+HmliWBHXQ0ysLGfv6FetbxtxzRgIZWjIsGVFl5imPXeyvVyayNek+dSWzjXd4t310YBdaF8sXeKs481PjsXbAtIru2+wHbv3GVh3sQY6Dnu6pF3pZ714VYdDi9A5GkXR/6xgaZN/tpQ8wVV3zeBuB+njoBNE4wjc+uA523ysXGd/P2sntmOb3OdHNWP5OVrxD3eJHdtH8QVkEIAqCor3hReR96yqt6PkTQfenllooQ447h6tOrnnuzwA8fMpq+jqg1oW8fTYYIncAYpVeTvkEFr/khQSbjoE8ykx9049OkE5MQEO9lC24tT7DwThQgf4Fhf8nGgAo3GYaON3crODpOr2pu5dBABz69t7F5yJBBo+r6QJdeLDWEoO7r1tceR3haA7gc7eZrCvpxSXXeKpo4P+hRixo9DeOFbqQVjKyWfBg9pnrEZKzK7R437YTTwhfoySG/YOCt3fs4aXlU3FjKortqQ6XyXaD0+Y/8VoqpyU9TRW45eN4oBxAH8Y/jLnNXfELJW+/p/MgO9Z+mBli2qqAP7dV/Arc2+YZRZwtBW8/p32y5ZsEuCS4O5AAgfR7Dde7zhiGfgvurQkfAXIrUG61rmxc2EZo18ph4vaWZI+QM0JdsbNlBJlPlwf9uguujQJy0j7TgTHdtRnjybTg55Hkk9S6l2rpYahumSewKHVosa1bh2Y6r9JGkdKvIDN/eeAwScrfjoLkCxWJuFZQ53FNP5w9XbQd1HhgHcVB/0fATG3sUUid1RTfc2+7pZVKldFSsaEK0v4k90tapQOk2HIbMhaJQtrUEL5+3sDanh8sOpbYRoQoqXWu6SQcUTQL9jzOrXNPWCJwXge4U7tlU1hkF012cAmvp8llQxf1IEMcw14pURxVOWATz4ITnYQjuF+vDXg5hgoiqXzO6mS91FQUBheURHIJxUeU1i3P0WOMpsm7vFYk0JJi/Ev+X3FwYD69cARPuP5GIc0PxoAFjcLRbNur0iMTrQmBBNYJ2ngU4x7SWfdTRl52Bqv7LmYW3C1CyTCPTHeWWIAM/Whm32COHsaj+2UQ739XB9t6NV0o9E9b7CW3XNiXzi9e0KiE+3rntukdIDBWrU2jsfQWuyFJRANxq8StHVv1JPy2C3Byco7qdNbASrnNXZ8G0L/Wp/pif4Ai9aEZ9Bb+TRx+REBdGlkF/s0dUdMSMr+6YCbuGxqPWdzcdqutvqkBzCksFcwAtjf55TeuH79M6AQa7r5PLeXxMFIlQKrXP9VJ275WGX+ptpf+tvTDBsecPnYQAlAWrVbRVJ7K2pRHwIjtSpbX96Y/lbKk6ZWXlBmh15r8yAWQsYxXgBOXYMAfHnUXF+rDqnB8bXDRtAn7bCziIqetSboK3NexMePvsCRLvmsoREA+kH8j4HWFpnNEaWgOmR7xyXHfTaz3slHc/YA6H6tl/L8d5tPcIwwD0tjvRaq3Y5BmYBSDClpv0VIX4s8D0XK3sPdpAb94HjPLkgboEz9EdZATW6ZdcmQvtKUwoWw+nAVKA7IcdY1UHnvNnIBplKci+knzewLz5/GGnzkGuuGky+0LTjtGBGR85EQICDqKChnm5pH3Z44nnWAk1YRdyu3g7QoFZ0h8jkr2ffjKmi+Qvsp+9GvNGZHmgW+YQAGUw7PPt8IPKbdy432vhKtRJjKWcSqq7helj81o3nfmaxVZ7Sqie8OOBk9WsyTD/ab7fQ5aWwQeJvnH6+ayo4IdIkOSBJjzXkgr+1TPhAx1AXDsxtCCj3TzQTLA1p782f7a8vdgPfwwrXmZxxbqo2h+6Zlo6mcMY4V7cFBOLm17VCvx9Qa2tAnkxEB+KYyQgbgAAnmNDOdOO6y2Cb+lke1MWQc9o+EMdQf7ubIG3Ek8GZ4k1PtGjbhwgOMPp5Em59JMVk/jU8/aF73Xcrd3UBNZyueQu0/xz2aGtZT8CRziOax2BWFXaeDzgZNV7oRtUzFoijoETf3xkAFFk3OMb7SgPh5wxU1+MygDIp9gZChH2qEcpgLh8pBIK90PXT1ZSU+ZExFK4Vm4GL/J7+K13lS5dQkW4HQwl6GX4yLqu8GhGWS2k75yel5IZIfFNdAL0NpKr2N5dQesBnxa42DLgJd6agS1jJsp1mO1dip7PU4P6diLLoTsZ4m3Q0QweiqeFfIGPLgF6v6mSVv6xe85VBD/1Mpe3AurRbcJ9SEo8NszNVy8rOCEexyIFcJRvYAlI/wk2I7r3p60FFLQXoH2q9xri/m41svRPbW0/EnPn2DWsmk0IiPpB60aa3+hiFfWuC8ZvWKEd9LxAk3HcOof6d77RewPaPsGw5lQAHcZN2vx1448u9pLfMLGQ3BSRRjBzRhKt7HcCw/7aqjtCDs5q76b4ZGphxN2th1WeXYlfnozX3ebKtX4Te11hf1tZP1diiGjIDAB1cR4Sb9rcFPC/nBARjlgDxd+tCBb1t91j71xJcgGjT3g/dUFnXXNiDrxkyoHANPk58ACPUa42hj8tgGrhiXOCmygxFZBiT2wyAJTDJ4wJEPmp6JIrDaSWYNqv4xH2wwdSTGYb3E0pXnS39nmLUsqoVZxzSoegqzd0o06wdbTXsaHGL+IF4JtIcXddTcD/dCd8hVf+fWPSV553kjMmMEULLS8HcgmptDO955dLGX78PjiDA6IsTHPm5IA6bc5ha0gaGkoEttXuxU11B2dOJ65/Q08tEF1+Y9cr2Nh/VECfQ33GyvR/gsdN1LuIeLpKMCAF2yRr769g9/4aJLZNRI71m2S91+Kp+Q0zubTcxoG2/6gm1Q79wkMj2XNO2ui7nWw8ULtu27CCvqTGX2PffD+xcwgh/TrOKvGZMM5jRFGDTn4NO/lwnDR/GY/waDZtkWDUPI0O8ztcFVqp6r2ZW+2bvkJ3raptYagFqu95VdIaml2CIp6CKets34x+fH2C+zH4cVFO7vj+6k2FU39PtRhWluYeZ3gDz1TLB9K2v7SD9gJU1qDxoRDrAWcrFGLyndhdtd0505+gEP79adK8fmFCWNYC+ahzVNcRH79E8dA1iqX/N0qq22xcOc20ALxLDspEj4QCFBQMgaIwoKbxr0Bd7Sbws6GiRK6tqoPfpiCle23axejRLyO1I+ahsEpWrzT5ZsCyS5RcY9jMfENFxSnhKsrfW8JHH6/rdQUMfmQPT3Uz9gY0C/pu1yuCnrPUvio0a1qMEosA/EwIzzid7cqsAAAAASUVORK5CYII=');
+
+  @mixin dithered-gradient($position, $start, $stop, $color) {
+    background: radial-gradient(circle at $position, transparent $start, $color $stop);
+    mask: $noise, radial-gradient(circle at $position, transparent $start, #000 ($stop + 10%));
+  }
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &::before {
+    @include dithered-gradient(50%, 30%, 60%, #6cc8ff);
+  }
+
+  &::after {
+    mask-image:
+      $noise, linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
+    background: linear-gradient(45deg, #6d6dff 10%, transparent 25%, transparent 75%, #6af789 90%);
+  }
+}
+</style>
--- a/app/pages/studio.vue
+++ b/app/pages/studio.vue
@@ -9,12 +9,14 @@
            <button @click="currentPosition = boxPositions.front">front</button>
            <button @click="currentPosition = boxPositions.back">back</button> -->
            <div class="w-full block">
-              <input class="w-1/2" type="color" name="color1" id="color1" v-model="box.color1">
-              <input class="w-1/2" type="color" name="color1" id="color1" v-model="box.color2">
-              <div class="block w-full h-32" :style="{
+              <input class="w-1/2" type="color" name="color1" id="color1" v-model="box.color1" />
+              <input class="w-1/2" type="color" name="color1" id="color1" v-model="box.color2" />
+              <div
+                class="block w-full h-32"
+                :style="{
                  background: `linear-gradient(to top, ${box.color1}, ${box.color2})`
-              }">
-              </div>
+                }"
+              ></div>
              <!-- <label class="block">
                size: {{ size }}
                <input v-model.number="size" type="range" step="1" min="1" max="14">
@@ -62,14 +64,14 @@ const track = ref<Track>({
  title: 'The grinding wheel',
  artist: {
    id: 0,
-    name: 'L\'Efondras',
+    name: "L'Efondras",
    url: '',
-    coverId: '0024705317',
+    coverId: '0024705317'
  },
  start: 0,
  url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
  coverId: 'a3236746052',
-  type: 'compilation',
+  type: 'compilation'
 })

 //from-slate-800 to-zinc-900
--- a/app/pages/track/[id].vue
+++ b/app/pages/track/[id].vue
@@ -26,7 +26,7 @@ onMounted(async () => {
    if (track) {
      // Open the box containing this track without changing global UI flow/animations
      uiStore.selectBox(track.boxId)
-      playerStore.playTrack(track)
+      playerStore.loadTrack(track)
    }
  }
 })
--- a/app/plugins/card.store.ts
+++ b/app/plugins/card.store.ts
@@ -0,0 +1,14 @@
+import { defineNuxtPlugin } from '#app'
+import { useCardStore } from '~/store/card'
+
+export default defineNuxtPlugin(() => {
+  // Le code s'exécute uniquement côté client
+  const cardStore = useCardStore()
+  cardStore.initialize()
+
+  return {
+    provide: {
+      cardStore
+    }
+  }
+})
--- a/app/plugins/shortcut.client.ts
+++ b/app/plugins/shortcut.client.ts
@@ -1,8 +1,5 @@
 import { useUiStore } from '~/store/ui'
 import { usePlayerStore } from '~/store/player'
-import { onBeforeUnmount, onUnmounted, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { useDataStore } from '~/store/data'

 export default defineNuxtPlugin((nuxtApp) => {
  // Ne s'exécuter que côté client
@@ -10,8 +7,6 @@ export default defineNuxtPlugin((nuxtApp) => {

  const ui = useUiStore()
  const player = usePlayerStore()
-  const route = useRoute()
-  const dataStore = useDataStore()

  function isInputElement(target: EventTarget | null): boolean {
    return (
@@ -23,11 +18,10 @@ export default defineNuxtPlugin((nuxtApp) => {
  }

  function handleKeyDown(e: KeyboardEvent) {
-    console.log('Key pressed:', e.code, 'Key:', e.key, 'Target:', e.target)
+    // console.log('Key pressed:', e.code, 'Key:', e.key, 'Target:', e.target)

    // Ne pas interférer avec les champs de formulaire
    if (isInputElement(e.target as HTMLElement)) {
-      console.log('Input element, ignoring key')
      return
    }

@@ -48,14 +42,16 @@ export default defineNuxtPlugin((nuxtApp) => {
    switch (e.code) {
      // Gestion de la barre d'espace pour play/pause
      case 'Space':
-        console.log('Space pressed, toggling play/pause')
        e.preventDefault()
        e.stopPropagation()
-        if (player.currentTrack) {
-          console.log('Toggling play state')
+
+        const selectedBox = ui.getSelectedBox
+        // Si une box est sélectionnée et qu'aucune piste n'est en cours de lecture
+        if (selectedBox && !player.currentTrack) {
+          player.playBox(selectedBox)
+        } else if (player.currentTrack) {
+          // Comportement normal si une piste est déjà chargée
          player.togglePlay()
-        } else {
-          console.log('No current track to play/pause')
        }
        return false

@@ -86,21 +82,4 @@ export default defineNuxtPlugin((nuxtApp) => {

  // Ajout de l'écouteur d'événements avec capture pour intercepter l'événement plus tôt
  window.addEventListener('keydown', handleKeyDown, { capture: true, passive: false })
-  console.log('Keyboard event listener added')
-
-  // Nettoyage lors de la destruction
-  const stop = () => {
-    window.removeEventListener('keydown', handleKeyDown)
-  }
-
-  // Nettoyage quand le composant est démonté
-  onUnmounted(stop)
-
-  // Nettoyage quand la page est déchargée
-  if (process.client) {
-    window.addEventListener('unload', stop)
-    onBeforeUnmount(() => {
-      window.removeEventListener('unload', stop)
-    })
-  }
 })
--- a/app/store/card.ts
+++ b/app/store/card.ts
@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia'
+import type { Track } from '~/../types/types'
+
+interface CardPosition {
+  x: number
+  y: number
+}
+
+type CardPositions = Record<string, Record<number, CardPosition>>
+
+export const useCardStore = defineStore('card', {
+  state: () => ({
+    // Stocke les IDs des cartes déjà révélées
+    revealedCards: new Set<number>(),
+    // Stocke les positions personnalisées des cartes par box
+    // Format: { [boxId]: { [trackId]: { x: number, y: number } } }
+    cardPositions: {} as CardPositions
+  }),
+
+  actions: {
+    // Marquer une carte comme révélée
+    revealCard(trackId: number) {
+      this.revealedCards.add(trackId)
+      this.saveToLocalStorage()
+    },
+
+    // Vérifier si une carte est révélée
+    isCardRevealed(trackId: number): boolean {
+      return this.revealedCards.has(trackId)
+    },
+
+    // Définir la position d'une carte dans une box
+    setCardPosition(boxId: string, trackId: number, position: { x: number; y: number }) {
+      if (!this.cardPositions[boxId]) {
+        this.cardPositions[boxId] = {}
+      }
+      this.cardPositions[boxId][trackId] = position
+      this.saveToLocalStorage()
+    },
+
+    // Obtenir la position d'une carte dans une box
+    getCardPosition(boxId: string, trackId: number): { x: number; y: number } | undefined {
+      return this.cardPositions[boxId]?.[trackId]
+    },
+
+    // Sauvegarder l'état dans le localStorage
+    saveToLocalStorage() {
+      if (typeof window !== 'undefined') {
+        try {
+          localStorage.setItem(
+            'cardStore',
+            JSON.stringify({
+              revealedCards: Array.from(this.revealedCards),
+              cardPositions: this.cardPositions
+            })
+          )
+        } catch (e) {
+          console.error('Failed to save card store to localStorage', e)
+        }
+      }
+    },
+
+    // Charger l'état depuis le localStorage
+    loadFromLocalStorage() {
+      if (typeof window !== 'undefined') {
+        try {
+          const saved = localStorage.getItem('cardStore')
+          if (saved) {
+            const { revealedCards, cardPositions } = JSON.parse(saved)
+            if (Array.isArray(revealedCards)) {
+              this.revealedCards = new Set(
+                revealedCards.filter((id): id is number => typeof id === 'number')
+              )
+            }
+            if (cardPositions && typeof cardPositions === 'object') {
+              this.cardPositions = cardPositions
+            }
+          }
+        } catch (e) {
+          console.error('Failed to load card store from localStorage', e)
+        }
+      }
+    },
+
+    // Initialiser le store
+    initialize() {
+      this.loadFromLocalStorage()
+    }
+  },
+
+  getters: {
+    // Getter pour la réactivité dans les templates
+    isRevealed: (state) => (trackId: number) => {
+      return state.revealedCards.has(trackId)
+    },
+
+    // Obtenir toutes les positions des cartes d'une box
+    getBoxCardPositions: (state) => (boxId: string) => {
+      return state.cardPositions[boxId] || {}
+    }
+  }
+})
--- a/app/store/data.ts
+++ b/app/store/data.ts
@@ -37,7 +37,7 @@ export const useDataStore = defineStore('data', {
            artistObj = { id: 0, name: a, url: '', coverId: '' }
          } else if (a && typeof a === 'object' && 'id' in (a as any)) {
            const idVal = (a as any).id as number | undefined
-            artistObj = idVal != null ? artistMap.get(idVal) ?? (a as Artist) : (a as Artist)
+            artistObj = idVal != null ? (artistMap.get(idVal) ?? (a as Artist)) : (a as Artist)
          } else {
            artistObj = { id: 0, name: '', url: '', coverId: '' }
          }
@@ -60,7 +60,7 @@ export const useDataStore = defineStore('data', {
          state: 'box-list'
        }
        if (!this.boxes.find((b) => b.id === FAVORITES_BOX_ID)) {
-          this.boxes = [favBox, ...this.boxes]
+          this.boxes = [...this.boxes, favBox]
        }
        this.isLoaded = true
      } finally {
--- a/app/store/favorites.ts
+++ b/app/store/favorites.ts
@@ -1,52 +1,144 @@
 import { defineStore } from 'pinia'
-import type { Track } from '~/../types/types'
+import type { Track, Box, BoxType, Artist } from '~/../types/types'

 export const FAVORITES_BOX_ID = 'FAV'
-const STORAGE_KEY = 'evilspins:favorites:v1'
+const STORAGE_KEY = 'evilspins:favorites:v2' // Version changée pour forcer la mise à jour

 export const useFavoritesStore = defineStore('favorites', {
  state: () => ({
-    trackIds: [] as number[]
+    favoritesPlaylist: {
+      id: FAVORITES_BOX_ID,
+      type: 'userPlaylist' as BoxType,
+      name: 'Favoris',
+      description: 'Vos titres favoris',
+      color1: '#FFD700',
+      color2: '#FFA500',
+      color3: '#FF8C00',
+      duration: 0,
+      state: 'box-hidden',
+      tracks: [] as Track[],
+      isPublic: false
+    } as Box,
+    version: 1
  }),
+  getters: {
+    trackIds: (state) => state.favoritesPlaylist.tracks?.map((t) => t.id) || [],
+    tracks: (state) => state.favoritesPlaylist.tracks || [],
+    isFavorite: (state) => (trackId: number) =>
+      state.favoritesPlaylist.tracks?.some((t) => t.id === trackId) || false
+  },
+
  actions: {
    load() {
      if (!process.client) return
      try {
        const raw = localStorage.getItem(STORAGE_KEY)
        if (raw) {
-          const arr = JSON.parse(raw)
-          if (Array.isArray(arr)) this.trackIds = arr.filter((x) => typeof x === 'number')
+          const data = JSON.parse(raw)
+          if (data.version === this.version && data.playlist) {
+            this.favoritesPlaylist = { ...this.favoritesPlaylist, ...data.playlist }
+          } else if (Array.isArray(data)) {
+            // Migration depuis l'ancienne version
+            this.favoritesPlaylist.tracks = data
+              .filter((x) => typeof x === 'number')
+              .map((id) => ({ id }) as unknown as Track) // On ne stocke que l'ID, les infos seront complétées par le dataStore
+          }
+        }
+      } catch (error) {
+        console.error('Error loading favorites:', error)
      }
-      } catch {}
    },
+
    save() {
      if (!process.client) return
      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(this.trackIds))
-      } catch {}
+        localStorage.setItem(
+          STORAGE_KEY,
+          JSON.stringify({
+            version: this.version,
+            playlist: this.favoritesPlaylist
+          })
+        )
+      } catch (error) {
+        console.error('Error saving favorites:', error)
+      }
    },
-    toggle(track: Track) {
-      const id = track.id
-      const idx = this.trackIds.indexOf(id)
-      if (idx >= 0) this.trackIds.splice(idx, 1)
-      else this.trackIds.unshift(id)
-      this.save()
+
+    // Crée une copie virtuelle d'une piste pour les favoris
+    createVirtualTrack(originalTrack: Track): Track {
+      // Crée une copie profonde de la piste
+      const virtualTrack = JSON.parse(JSON.stringify(originalTrack)) as Track
+
+      // Marque la piste comme provenant d'une playlist utilisateur
+      virtualTrack.source = 'userPlaylist'
+      virtualTrack.originalTrackId = originalTrack.id
+      virtualTrack.boxId = FAVORITES_BOX_ID
+
+      // Si la piste a un artiste sous forme d'objet, on le convertit en chaîne pour éviter les problèmes de référence
+      if (virtualTrack.artist && typeof virtualTrack.artist === 'object') {
+        virtualTrack.artist = (virtualTrack.artist as Artist).name
+      }
+
+      return virtualTrack
    },
+
+    // Ajoute une piste aux favoris si elle n'y est pas déjà
    add(track: Track) {
-      if (!this.trackIds.includes(track.id)) {
-        this.trackIds.unshift(track.id)
+      if (!this.isFavorite(track.id)) {
+        // Crée une copie virtuelle de la piste
+        const virtualTrack = this.createVirtualTrack(track)
+
+        if (!this.favoritesPlaylist.tracks) {
+          this.favoritesPlaylist.tracks = []
+        }
+
+        // Ajoute la piste virtuelle au début de la liste
+        this.favoritesPlaylist.tracks.unshift(virtualTrack)
+        this.updateDuration()
        this.save()
      }
    },
+
+    // Supprime une piste des favoris
    remove(trackId: number) {
-      const idx = this.trackIds.indexOf(trackId)
-      if (idx >= 0) {
-        this.trackIds.splice(idx, 1)
+      if (this.favoritesPlaylist.tracks) {
+        const index = this.favoritesPlaylist.tracks.findIndex((t) => t.id === trackId)
+        if (index >= 0) {
+          this.favoritesPlaylist.tracks.splice(index, 1)
+          this.updateDuration()
          this.save()
        }
+      }
    },
-    isFavorite(trackId: number) {
-      return this.trackIds.includes(trackId)
+
+    // Bascule l'état favori d'une piste
+    toggle(track: Track) {
+      if (this.isFavorite(track.id)) {
+        this.remove(track.id)
+      } else {
+        this.add(track)
+      }
+    },
+
+    // Met à jour la durée totale de la playlist
+    updateDuration() {
+      if (this.favoritesPlaylist.tracks) {
+        this.favoritesPlaylist.duration = this.favoritesPlaylist.tracks.reduce(
+          (total, track) => total + (track.duration || 0),
+          0
+        )
+      }
+    },
+
+    // Récupère la piste suivante dans les favoris
+    getNextTrack(currentTrackId: number): Track | null {
+      if (!this.favoritesPlaylist.tracks) return null
+      const currentIndex = this.favoritesPlaylist.tracks.findIndex((t) => t.id === currentTrackId)
+      if (currentIndex >= 0 && currentIndex < this.favoritesPlaylist.tracks.length - 1) {
+        const nextTrack = this.favoritesPlaylist.tracks[currentIndex + 1]
+        return nextTrack ? { ...nextTrack } : null
+      }
+      return null
    }
  }
 })
--- a/app/store/player.ts
+++ b/app/store/player.ts
@@ -2,14 +2,17 @@
 import { defineStore } from 'pinia'
 import type { Track, Box } from '~/../types/types'
 import { useDataStore } from '~/store/data'
+import { useCardStore } from '~/store/card'
+import { useFavoritesStore, FAVORITES_BOX_ID } from '~/store/favorites'

 export const usePlayerStore = defineStore('player', {
  state: () => ({
    currentTrack: null as Track | null,
    position: 0,
    audio: null as HTMLAudioElement | null,
-    isPaused: true,
-    progressionLast: 0
+    progressionLast: 0,
+    isPlaying: false,
+    isLoading: false
  }),

  actions: {
@@ -17,109 +20,209 @@ export const usePlayerStore = defineStore('player', {
      this.audio = el
      // attach listeners if not already attached (idempotent enough for our use)
      this.audio.addEventListener('play', () => {
-        this.isPaused = false
+        this.isPlaying = true
+        // Révéler la carte quand la lecture commence
+        if (this.currentTrack) {
+          const cardStore = useCardStore()
+          if (!cardStore.isCardRevealed(this.currentTrack.id)) {
+            requestAnimationFrame(() => {
+              cardStore.revealCard(this.currentTrack!.id)
            })
-      this.audio.addEventListener('playing', () => {
-        this.isPaused = false
+          }
+        }
      })
+      this.audio.addEventListener('playing', () => {})
      this.audio.addEventListener('pause', () => {
-        this.isPaused = true
+        this.isPlaying = false
      })
-      this.audio.addEventListener('ended', () => {
-        this.isPaused = true
+      this.audio.addEventListener('ended', async () => {
        const track = this.currentTrack
        if (!track) return
+
        const dataStore = useDataStore()
-        if (track.type === 'playlist') {
+        const favoritesStore = useFavoritesStore()
+
+        // Vérifier si on est dans la playlist des favoris
+        if (track.boxId === FAVORITES_BOX_ID) {
+          const nextTrack = favoritesStore.getNextTrack(track.id)
+          if (nextTrack) {
+            await this.playTrack(nextTrack)
+            return
+          }
+        }
+        // Comportement par défaut pour les playlists standards
+        else if (track.type === 'playlist') {
          const next = dataStore.getNextPlaylistTrack(track)
          if (next && next.boxId === track.boxId) {
-            this.playTrack(next)
+            await this.playTrack(next)
+            return
          }
-        } else {
-          console.log('ended')
+        }
+
+        // Si on arrive ici, c'est qu'il n'y a pas de piste suivante
        this.currentTrack = null
-        }
+        this.isPlaying = false
      })
    },
+
    async playBox(box: Box) {
+      // Si c'est la même box, on toggle simplement la lecture
      if (this.currentTrack?.boxId === box.id) {
        this.togglePlay()
-      } else {
-        const dataStore = useDataStore()
-        const first = dataStore.getFirstTrackOfBox(box)
-        if (first) {
-          await this.playTrack(first)
+        return
      }
+
+      // Sinon, on charge la première piste de la box
+      try {
+        const dataStore = useDataStore()
+        const firstTrack = dataStore.getFirstTrackOfBox(box)
+        if (firstTrack) {
+          await this.playTrack(firstTrack)
+        }
+      } catch (error) {
+        console.error('Error playing box:', error)
      }
    },
+
    async playTrack(track: Track) {
-      // mettre à jour la piste courante uniquement après avoir géré le toggle
-      if (this.currentTrack && this.currentTrack?.id === track.id) {
-        this.togglePlay()
-      } else {
+      // Si c'est une piste de la playlist utilisateur, on utilise directement cette piste
+      if (track.boxId === FAVORITES_BOX_ID) {
        this.currentTrack = track
-        if (!this.audio) {
-          // fallback: create an audio element and attach listeners
-          this.attachAudio(new Audio())
+        await this.loadAndPlayTrack(track)
+      } else {
+        // Pour les autres types de pistes, on utilise la logique existante
+        this.isCompilationTrack(track)
+          ? await this.playCompilationTrack(track)
+          : await this.playPlaylistTrack(track)
+      }
+    },
+
+    async playCompilationTrack(track: Track) {
+      // Si c'est la même piste, on toggle simplement la lecture
+      if (this.currentTrack?.id === track.id) {
+        // Si la lecture est en cours, on met en pause
+        if (this.isPlaying) {
+          this.togglePlay()
+          return
        }

-        // Interrompre toute lecture en cours avant de charger une nouvelle source
+        // Si c'est une compilation, on vérifie si on est dans la plage de la piste
+        if (track.type === 'compilation' && track.start !== undefined) {
+          const dataStore = useDataStore()
+          const nextTrack = dataStore.getNextTrack(track)
+
+          // Si on a une piste suivante et qu'on est dans la plage de la piste courante
+          if (nextTrack?.start && this.position >= track.start && this.position < nextTrack.start) {
+            this.togglePlay()
+            return
+          }
+          // Si c'est la dernière piste de la compilation
+          else if (!nextTrack && this.position >= track.start) {
+            this.togglePlay()
+            return
+          }
+        }
+      }
+
+      // Sinon, on charge et on lit la piste
+      this.currentTrack = track
+      await this.loadAndPlayTrack(track)
+    },
+
+    async playPlaylistTrack(track: Track) {
+      // Toggle simple si c'est la même piste
+      if (this.currentTrack?.id === track.id) {
+        this.togglePlay()
+        return
+      }
+
+      // Sinon, on charge et on lit la piste
+      this.currentTrack = track
+      await this.loadAndPlayTrack(track)
+    },
+
+    async loadTrack(track: Track) {
+      if (!this.audio) return
+
+      return new Promise<void>((resolve) => {
+        this.currentTrack = track
        const audio = this.audio as HTMLAudioElement
-        try {
-          audio.pause()
-        } catch (_) {}

-        // on entre en phase de chargement
-        this.isPaused = true
-        audio.src = track.url
-        audio.load()
-
-        // lancer la lecture (seek si nécessaire une fois les metadata chargées)
-        try {
-          const wantedStart = track.start ?? 0
-
-          // Attendre que les metadata soient prêtes pour pouvoir positionner currentTime
-          await new Promise<void>((resolve) => {
-            if (audio.readyState >= 1) return resolve()
-            const onLoaded = () => resolve()
-            audio.addEventListener('loadedmetadata', onLoaded, { once: true })
-          })
-          // Appliquer le temps de départ
-          audio.currentTime = wantedStart > 0 ? wantedStart : 0
-          await new Promise<void>((resolve) => {
-            const onCanPlay = () => {
-              if (wantedStart > 0 && audio.currentTime < wantedStart - 0.05) {
-                audio.currentTime = wantedStart
+        // Si c'est la même source, on ne fait rien
+        if (audio.src === track.url) {
+          resolve()
+          return
        }
+
+        // Nouvelle source
+        audio.src = track.url
+
+        // Une fois que suffisamment de données sont chargées
+        const onCanPlay = () => {
+          audio.removeEventListener('canplay', onCanPlay)
          resolve()
        }
-            if (audio.readyState >= 3) return resolve()
-            audio.addEventListener('canplay', onCanPlay, { once: true })
+        audio.addEventListener('canplay', onCanPlay)
+
+        // Timeout de sécurité
+        setTimeout(resolve, 1000)
      })
-          this.isPaused = false
-          await audio.play()
-        } catch (err: any) {
-          // Ignorer les AbortError (arrivent lorsqu'une nouvelle source est chargée rapidement)
-          if (err && err.name === 'AbortError') return
-          this.isPaused = true
-          console.error('Impossible de lire la piste :', err)
+    },
+
+    async loadAndPlayTrack(track: Track) {
+      if (!this.audio) {
+        const newAudio = new Audio()
+        this.attachAudio(newAudio)
      }
+
+      const audio = this.audio as HTMLAudioElement
+
+      try {
+        this.isLoading = true
+        // Mettre en pause
+        audio.pause()
+
+        // Pour les compilations, on utilise l'URL de la piste avec le point de départ
+        if (track.type === 'compilation' && track.start !== undefined) {
+          audio.src = track.url
+          audio.currentTime = track.start
+        } else {
+          // Pour les playlists, on charge la piste individuelle
+          audio.currentTime = 0
+          await this.loadTrack(track)
+        }
+
+        // Attendre que les métadonnées soient chargées
+        await new Promise<void>((resolve) => {
+          const onCanPlay = () => {
+            audio.removeEventListener('canplay', onCanPlay)
+            resolve()
+          }
+          audio.addEventListener('canplay', onCanPlay)
+          // Timeout de sécurité
+          setTimeout(resolve, 1000)
+        })
+
+        // Lancer la lecture
+        await audio.play()
+        this.isLoading = false
+      } catch (error) {
+        console.error('Error loading/playing track:', error)
+        this.isLoading = false
      }
    },

-    togglePlay() {
+    async togglePlay() {
      if (!this.audio) return
+
+      try {
        if (this.audio.paused) {
-        this.isPaused = false
-        this.audio
-          .play()
-          .then(() => {
-            this.isPaused = false
-          })
-          .catch((err) => console.error(err))
+          await this.audio.play()
        } else {
          this.audio.pause()
-        this.isPaused = true
+        }
+      } catch (error) {
+        console.error('Error toggling play state:', error)
      }
    },

@@ -149,18 +252,27 @@ export const usePlayerStore = defineStore('player', {
        if (tracks.length > 0) {
          const now = audio.currentTime
          // find the last track whose start <= now (fallback to first track)
-          let found = tracks[0]
+          let nextTrack = tracks[0]
          for (const t of tracks) {
            const s = t.start ?? 0
            if (s <= now) {
-              found = t
+              nextTrack = t
            } else {
              break
            }
          }
-          if (found && found.id !== cur.id) {
+          if (nextTrack && nextTrack.id !== cur.id) {
            // only update metadata reference; do not reload audio
-            this.currentTrack = found
+            this.currentTrack = nextTrack
+
+            // Révéler la carte avec une animation fluide
+            const cardStore = useCardStore()
+            if (nextTrack.id && !cardStore.isCardRevealed(nextTrack.id)) {
+              // Utiliser requestAnimationFrame pour une meilleure synchronisation avec le rendu
+              requestAnimationFrame(() => {
+                cardStore.revealCard(nextTrack.id!)
+              })
+            }
          }
        }
      }
@@ -178,6 +290,16 @@ export const usePlayerStore = defineStore('player', {
      }
    },

+    isCompilationTrack: () => {
+      return (track: Track) => {
+        return track.type === 'compilation'
+      }
+    },
+
+    isPaused: (state) => {
+      return state.audio?.paused ?? true
+    },
+
    getCurrentTrack: (state) => state.currentTrack,

    getCurrentBox: (state) => {
--- a/app/store/ui.ts
+++ b/app/store/ui.ts
@@ -62,6 +62,10 @@ export const useUiStore = defineStore('ui', {
  },

  getters: {
+    isBoxSelected: () => {
+      const dataStore = useDataStore()
+      return dataStore.boxes.some((box) => box.state === 'box-selected')
+    },
    getSelectedBox: () => {
      const dataStore = useDataStore()
      return (dataStore.boxes as Box[]).find((box) => box.state === 'box-selected') || null
--- a/assets/scss/z-index.scss
+++ b/assets/scss/z-index.scss
@@ -0,0 +1,3 @@
+body {
+  background-color: red !important;
+}
--- a/env.sh
+++ b/env.sh
@@ -0,0 +1,3 @@
+export DOMAIN="evilspins.com"
+export PORT="7901"
+export PORT_EXPOSED="3000"
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,23 +1,9 @@
-// @ts-check
-import withNuxt from "./.nuxt/eslint.config.mjs";
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import withNuxt from './.nuxt/eslint.config.mjs'

-export default withNuxt([eslintPluginPrettierRecommended])
-export default withNuxt({
+export default withNuxt()
+  .prepend()
+  .append({
    rules: {
-    // Garde l'ordre correct : class avant @click
-    "vue/attributes-order": "error",
-
-    // Contrôle du nombre d'attributs par ligne
-    "vue/max-attributes-per-line": [
-      "error",
-      {
-        singleline: 3, // autorise jusqu’à 3 attributs sur une ligne
-        multiline: {
-          max: 1, // si retour à la ligne, 1 attr par ligne
-          allowFirstLine: false,
-        },
-      },
-    ],
-  },
-});
+      '@typescript-eslint/ban-types': 'off'
+    }
+  })
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,10 +1,15 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+import tsconfigPaths from 'vite-tsconfig-paths'
+
 const isProd = process.env.NODE_ENV === 'production'

 export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/eslint', '@nuxtjs/tailwindcss', '@pinia/nuxt'],
+  vite: {
+    plugins: [tsconfigPaths()]
+  },
  app: {
    head: {
      link: [
@@ -23,9 +28,7 @@ export default defineNuxtConfig({
            }
          ]
        : [],
-      meta: [
-        { name: 'apple-mobile-web-app-title', content: 'evilSpins' }
-      ]
+      meta: [{ name: 'apple-mobile-web-app-title', content: 'evilSpins' }]
    }
  }
 })
--- a/package.json
+++ b/package.json
@@ -10,25 +10,39 @@
    "postinstall": "nuxt prepare",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
-    "format": "prettier --check .",
-    "format:fix": "prettier --write ."
+    "format": "prettier --check \"**/*.{js,ts,vue,json,md,html}\"",
+    "format:fix": "prettier --write \"**/*.{js,ts,vue,json,md,html}\""
  },
  "dependencies": {
    "@nuxt/eslint": "1.9.0",
    "@nuxtjs/tailwindcss": "6.14.0",
    "@pinia/nuxt": "0.11.2",
    "atropos": "^2.0.2",
-    "eslint": "^9.33.0",
-    "nuxt": "^4.0.3",
+    "gsap": "^3.13.0",
+    "nuxt": "^4.2.0",
    "pinia": "^3.0.3",
    "vue": "^3.5.18",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vuedraggable": "^4.1.0"
  },
  "engines": {
    "pnpm": ">=10 <11"
  },
  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
  "devDependencies": {
-    "sass-embedded": "^1.93.2"
+    "@eslint/compat": "^1.4.1",
+    "@eslint/js": "^9.39.1",
+    "@nuxt/eslint-config": "^1.10.0",
+    "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@typescript-eslint/parser": "^8.46.3",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-vue": "9.3.0",
+    "espree": "^10.4.0",
+    "globals": "^16.5.0",
+    "sass-embedded": "^1.93.2",
+    "vite-tsconfig-paths": "^5.1.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/face-down.svg
+++ b/public/face-down.svg
--- a/server/api/artists.ts
+++ b/server/api/artists.ts
@@ -5,146 +5,147 @@ export default eventHandler(() => {
    {
      id: 0,
      name: "L'efondras",
-      url: "https://leffondras.bandcamp.com/music",
-      coverId: "0024705317"
+      url: 'https://leffondras.bandcamp.com/music',
+      coverId: '0024705317'
    },
    {
      id: 1,
-      name: "The kundalini genie",
-      url: "https://the-kundalini-genie.bandcamp.com",
-      coverId: "0012045550"
+      name: 'The kundalini genie',
+      url: 'https://the-kundalini-genie.bandcamp.com',
+      coverId: '0012045550'
    },
    {
      id: 2,
-      name: "Fontaines D.C.",
-      url: "https://fontainesdc.bandcamp.com",
-      coverId: "0027327090"
+      name: 'Fontaines D.C.',
+      url: 'https://fontainesdc.bandcamp.com',
+      coverId: '0027327090'
    },
    {
      id: 3,
-      name: "Fontanarosa",
-      url: "https://fontanarosa.bandcamp.com",
-      coverId: "0035380235",
+      name: 'Fontanarosa',
+      url: 'https://fontanarosa.bandcamp.com',
+      coverId: '0035380235'
    },
    {
      id: 4,
-      name: "Johnny mafia",
-      url: "https://johnnymafia.bandcamp.com",
-      coverId: "0035009392",
+      name: 'Johnny mafia',
+      url: 'https://johnnymafia.bandcamp.com',
+      coverId: '0035009392'
    },
    {
      id: 5,
-      name: "New candys",
-      url: "https://newcandys.bandcamp.com",
-      coverId: "0039963261",
+      name: 'New candys',
+      url: 'https://newcandys.bandcamp.com',
+      coverId: '0039963261'
    },
    {
      id: 6,
-      name: "Magic shoppe",
-      url: "https://magicshoppe.bandcamp.com",
-      coverId: "0030748374"
+      name: 'Magic shoppe',
+      url: 'https://magicshoppe.bandcamp.com',
+      coverId: '0030748374'
    },
    {
      id: 7,
-      name: "Les jaguars",
-      url: "https://radiomartiko.bandcamp.com/album/surf-qu-b-cois",
-      coverId: "0016551336",
+      name: 'Les jaguars',
+      url: 'https://radiomartiko.bandcamp.com/album/surf-qu-b-cois',
+      coverId: '0016551336'
    },
    {
      id: 8,
-      name: "TRAAMS",
-      url: "https://traams.bandcamp.com",
-      coverId: "0028348410",
+      name: 'TRAAMS',
+      url: 'https://traams.bandcamp.com',
+      coverId: '0028348410'
    },
    {
      id: 9,
-      name: "Blue orchid",
-      url: "https://blue-orchid.bandcamp.com",
-      coverId: "0034796193",
+      name: 'Blue orchid',
+      url: 'https://blue-orchid.bandcamp.com',
+      coverId: '0034796193'
    },
    {
      id: 10,
-      name: "I love UFO",
-      url: "https://bruitblanc.bandcamp.com",
-      coverId: "a2203158939",
+      name: 'I love UFO',
+      url: 'https://bruitblanc.bandcamp.com',
+      coverId: 'a2203158939'
    },
    {
      id: 11,
-      name: "Kid Congo & The Pink Monkey Birds",
-      url: "https://kidcongothepinkmonkeybirds.bandcamp.com/",
-      coverId: "0017196290",
+      name: 'Kid Congo & The Pink Monkey Birds',
+      url: 'https://kidcongothepinkmonkeybirds.bandcamp.com/',
+      coverId: '0017196290'
    },
    {
      id: 12,
-      name: "Firefriend",
-      url: "https://firefriend.bandcamp.com/",
-      coverId: "0031072203",
+      name: 'Firefriend',
+      url: 'https://firefriend.bandcamp.com/',
+      coverId: '0031072203'
    },
    {
      id: 13,
-      name: "Squid",
-      url: "https://squiduk.bandcamp.com/",
-      coverId: "0037649385",
+      name: 'Squid',
+      url: 'https://squiduk.bandcamp.com/',
+      coverId: '0037649385'
    },
    {
      id: 14,
-      name: "Lysistrata",
-      url: "https://lysistrata.bandcamp.com/",
-      coverId: "0033900158",
+      name: 'Lysistrata',
+      url: 'https://lysistrata.bandcamp.com/',
+      coverId: '0033900158'
    },
    {
      id: 15,
-      name: "Pablo X Broadcasting Services",
-      url: "https://pabloxbroadcastingservices.bandcamp.com/",
-      coverId: "0036956486",
+      name: 'Pablo X Broadcasting Services',
+      url: 'https://pabloxbroadcastingservices.bandcamp.com/',
+      coverId: '0036956486'
    },
    {
      id: 16,
-      name: "Night Beats",
-      url: "https://nightbeats.bandcamp.com/",
-      coverId: "0036987720",
+      name: 'Night Beats',
+      url: 'https://nightbeats.bandcamp.com/',
+      coverId: '0036987720'
    },
    {
      id: 17,
-      name: "Deltron 3030",
-      url: "https://delthefunkyhomosapien.bandcamp.com/",
-      coverId: "0005254781",
+      name: 'Deltron 3030',
+      url: 'https://delthefunkyhomosapien.bandcamp.com/',
+      coverId: '0005254781'
    },
    {
      id: 18,
-      name: "The Amorphous Androgynous",
-      url: "https://theaa.bandcamp.com/",
-      coverId: "0022226700",
+      name: 'The Amorphous Androgynous',
+      url: 'https://theaa.bandcamp.com/',
+      coverId: '0022226700'
    },
    {
      id: 19,
-      name: "Wooden Shjips",
-      url: "https://woodenshjips.bandcamp.com/",
-      coverId: "0012406678",
+      name: 'Wooden Shjips',
+      url: 'https://woodenshjips.bandcamp.com/',
+      coverId: '0012406678'
    },
    {
      id: 20,
-      name: "Silas J. Dirge",
-      url: "https://silasjdirge.bandcamp.com/",
-      coverId: "0035751570",
+      name: 'Silas J. Dirge',
+      url: 'https://silasjdirge.bandcamp.com/',
+      coverId: '0035751570'
    },
    {
      id: 21,
-      name: "Secret Colours",
-      url: "https://secretcolours.bandcamp.com/",
-      coverId: "0010661379",
+      name: 'Secret Colours',
+      url: 'https://secretcolours.bandcamp.com/',
+      coverId: '0010661379'
    },
    {
      id: 22,
-      name: "Larry McNeil And The Blue Knights",
-      url: "https://www.discogs.com/artist/6528940-Larry-McNeil-And-The-Blue-Knights",
-      coverId: "https://i.discogs.com/Yr05_neEXwzPwKlDeV7dimmTG34atkAMgpxbMBhHBkI/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTEyMTEw/ODE1LTE1Mjg1NjU1/NzQtMjcyOC5qcGVn.jpeg",
+      name: 'Larry McNeil And The Blue Knights',
+      url: 'https://www.discogs.com/artist/6528940-Larry-McNeil-And-The-Blue-Knights',
+      coverId:
+        'https://i.discogs.com/Yr05_neEXwzPwKlDeV7dimmTG34atkAMgpxbMBhHBkI/rs:fit/g:sm/q:90/h:600/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTEyMTEw/ODE1LTE1Mjg1NjU1/NzQtMjcyOC5qcGVn.jpeg'
    },
    {
      id: 23,
-      name: "Hugo Blanco",
-      url: "https://elpalmasmusic.bandcamp.com/album/color-de-tr-pico-compiled-by-el-dr-gon-criollo-el-palmas",
-      coverId: "0016886708",
-    },
+      name: 'Hugo Blanco',
+      url: 'https://elpalmasmusic.bandcamp.com/album/color-de-tr-pico-compiled-by-el-dr-gon-criollo-el-palmas',
+      coverId: '0016886708'
+    }
  ]
 })
--- a/server/api/boxes.ts
+++ b/server/api/boxes.ts
@@ -3,111 +3,51 @@ import { eventHandler } from 'h3'
 export default eventHandler(() => {
  const boxes = [
    {
-      id: 'ES2012',
-      type: 'playlist',
-      name: '2012',
-      duration: 0,
-      description: '🐉<i class="indice">💧</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
+      id: 'ES01B',
+      type: 'compilation',
+      name: '... B',
+      duration: 3773,
+      description: '...',
+      color1: '#f7dd01',
+      color2: '#010103',
      color3: '#00ff00'
    },
    {
-      id: 'ES2013',
-      type: 'playlist',
-      name: '2013',
-      duration: 0,
-      description: '🐍<i class="indice">💧</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
+      id: 'ES01A',
+      type: 'compilation',
+      name: '...',
+      duration: 3487,
+      description: '...',
+      color1: '#c7b3aa',
+      color2: '#000100',
      color3: '#00ff00'
    },
    {
-      id: 'ES2015',
-      type: 'playlist',
-      name: '2015',
-      duration: 0,
-      description: '🐐<i class="indice">🌳</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
+      id: 'ES00B',
+      type: 'compilation',
+      name: 'manifeste B',
+      duration: 2470,
+      description: 'Even Zero has a b-side',
+      color1: '#0d01b9',
+      color2: '#3b7589',
      color3: '#00ff00'
    },
    {
-      id: 'ES2016',
-      type: 'playlist',
-      name: '2016',
-      duration: 0,
-      description: '🐒<i class="indice">🔥</i>',
+      id: 'ES00A',
+      type: 'compilation',
+      name: 'manifeste',
+      duration: 2794,
+      description: 'Zero is for manifesto',
      color1: '#ffffff',
-      color2: '#32021F',
+      color2: '#48959d',
      color3: '#00ff00'
    },
    {
-      id: 'ES2017',
+      id: 'ES2025',
      type: 'playlist',
-      name: '2017',
+      name: '2025',
      duration: 0,
-      description: '🐓<i class="indice">🔥</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2018',
-      type: 'playlist',
-      name: '2018',
-      duration: 0,
-      description: '🐕<i class="indice">🌱</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2019',
-      type: 'playlist',
-      name: '2019',
-      duration: 0,
-      description: '🐖<i class="indice">🌱</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2020',
-      type: 'playlist',
-      name: '2020',
-      duration: 0,
-      description: '🐀<i class="indice">🪙</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2021',
-      type: 'playlist',
-      name: '2021',
-      duration: 0,
-      description: '🐃<i class="indice">🪙</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2022',
-      type: 'playlist',
-      name: '2022',
-      duration: 0,
-      description: '🐅<i class="indice">💧</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2023',
-      type: 'playlist',
-      name: '2023',
-      duration: 0,
-      description: '🐇<i class="indice">💧</i>',
+      description: '🐍<i class="indice">🌳</i>',
      color1: '#ffffff',
      color2: '#32021F',
      color3: '#00ff00'
@@ -123,55 +63,116 @@ export default eventHandler(() => {
      color3: '#00ff00'
    },
    {
-      id: 'ES2025',
+      id: 'ES2023',
      type: 'playlist',
-      name: '2025',
+      name: '2023',
      duration: 0,
-      description: '🐍<i class="indice">🌳</i>',
+      description: '🐇<i class="indice">💧</i>',
      color1: '#ffffff',
      color2: '#32021F',
      color3: '#00ff00'
    },
    {
-      id: 'ES00A',
-      type: 'compilation',
-      name: 'manifeste',
-      duration: 2794,
-      description: 'Zero is for manifesto',
+      id: 'ES2022',
+      type: 'playlist',
+      name: '2022',
+      duration: 0,
+      description: '🐅<i class="indice">💧</i>',
      color1: '#ffffff',
-      color2: '#48959d',
+      color2: '#32021F',
      color3: '#00ff00'
    },
    {
-      id: 'ES00B',
-      type: 'compilation',
-      name: 'manifeste B',
-      duration: 2470,
-      description: 'Even Zero has a b-side',
-      color1: '#0d01b9',
-      color2: '#3b7589',
+      id: 'ES2021',
+      type: 'playlist',
+      name: '2021',
+      duration: 0,
+      description: '🐃<i class="indice">🪙</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
      color3: '#00ff00'
    },
    {
-      id: 'ES01A',
-      type: 'compilation',
-      name: '...',
-      duration: 3487,
-      description: '...',
-      color1: '#c7b3aa',
-      color2: '#000100',
+      id: 'ES2020',
+      type: 'playlist',
+      name: '2020',
+      duration: 0,
+      description: '🐀<i class="indice">🪙</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
      color3: '#00ff00'
    },
    {
-      id: 'ES01B',
-      type: 'compilation',
-      name: '... B',
-      duration: 3773,
-      description: '...',
-      color1: '#f7dd01',
-      color2: '#010103',
+      id: 'ES2019',
+      type: 'playlist',
+      name: '2019',
+      duration: 0,
+      description: '🐖<i class="indice">🌱</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2018',
+      type: 'playlist',
+      name: '2018',
+      duration: 0,
+      description: '🐕<i class="indice">🌱</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2017',
+      type: 'playlist',
+      name: '2017',
+      duration: 0,
+      description: '🐓<i class="indice">🔥</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2016',
+      type: 'playlist',
+      name: '2016',
+      duration: 0,
+      description: '🐒<i class="indice">🔥</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2015',
+      type: 'playlist',
+      name: '2015',
+      duration: 0,
+      description: '🐐<i class="indice">🌳</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2013',
+      type: 'playlist',
+      name: '2013',
+      duration: 0,
+      description: '🐍<i class="indice">💧</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
+      color3: '#00ff00'
+    },
+    {
+      id: 'ES2012',
+      type: 'playlist',
+      name: '2012',
+      duration: 0,
+      description: '🐉<i class="indice">💧</i>',
+      color1: '#ffffff',
+      color2: '#32021F',
      color3: '#00ff00'
    }
  ]
+
  return boxes.map((b) => ({ ...b, state: 'box-hidden' })) // boxes are first hidden to allow the animation to work (hidden -> list -> selected)
 })
--- a/server/api/tracks/compilation.ts
+++ b/server/api/tracks/compilation.ts
@@ -406,6 +406,6 @@ export default eventHandler(() => {
    ...track,
    url: `https://files.erudi.fr/evilspins/${track.boxId}.mp3`,
    coverId: `https://f4.bcbits.com/img/${track.coverId}_4.jpg`,
-    type: 'compilation',
+    type: 'compilation'
  }))
 })
--- a/server/api/tracks/playlist.ts
+++ b/server/api/tracks/playlist.ts
@@ -55,7 +55,7 @@ export default eventHandler(async (event) => {
        coverId,
        card,
        order: 0,
-        type: 'playlist',
+        type: 'playlist'
      }
    })

--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,10 @@ module.exports = {
  ],
  theme: {
    extend: {
+      boxShadow: {
+        '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.5)',
+        '2xl-custom': '0 0 60px 50px rgba(0, 0, 0, 0.25)'
+      },
      colors: {
        esyellow: '#fdec50ff'
      },
@@ -18,6 +22,9 @@ module.exports = {
      },
      screens: {
        '2sm': '320px'
+      },
+      transitionDuration: {
+        2000: '2000ms'
      }
    }
  },
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,29 @@
+{
+  "extends": "./node_modules/nuxt/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable", "WebWorker"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "#app": ["./node_modules/nuxt/dist/app"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.tsx",
+    "**/*.vue",
+    ".nuxt/**/*.ts",
+    "./types/**/*.d.ts"
+  ],
+  "exclude": ["node_modules", ".output", "dist"]
+}
--- a/types/types.ts
+++ b/types/types.ts
@@ -1,7 +1,9 @@
 // types.ts
+export type BoxType = 'playlist' | 'compilation' | 'userPlaylist'
+
 export interface Box {
  id: string
-  type: 'playlist' | 'compilation'
+  type: BoxType
  name: string
  duration: number
  tracks?: Track[]
@@ -10,6 +12,9 @@ export interface Box {
  color1: string
  color3: string
  state: BoxState
+  // Pour les userPlaylist, on peut ajouter des métadonnées spécifiques
+  ownerId?: string
+  isPublic?: boolean
 }

 export interface Artist {
@@ -25,12 +30,13 @@ export interface Track {
  title: string
  artist?: Artist | number | string
  start?: number
+  duration?: number
  url: string
  coverId?: string
  date?: Date
  card?: { suit: CardSuit; rank: CardRank }
  link?: string
-  type: 'playlist' | 'compilation'
+  type: BoxType
 }

 export interface Playlist {