FEAT: side A/B

2025-11-15 21:56:37 +01:00
parent 3424d2d6fc
commit 1b8b998622
49 changed files with 563 additions and 822 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,6 @@
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
-  "eslint.useFlatConfig": true
+  "eslint.useFlatConfig": true,
+  "svg.preview.background": "editor"
 }
--- a/app/components/Box.vue
+++ b/app/components/Box.vue
@@ -2,13 +2,15 @@
  <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="" />
-        <div class="size-full flex flex-col justify-center items-center text-7xl" v-html="box.description" v-else />
+        <img v-if="isCompilation" class="cover absolute" :src="`/${box.id}/${box.activeSide}/cover.jpg`" alt="" />
+        <div v-else class="size-full flex flex-col justify-center items-center text-7xl text-black"
+          v-html="box.description" />
      </div>
-      <div class="face back flex flex-col flex-wrap items-start p-4 overflow-hidden" ref="backFace">
+      <div class="face back flex flex-row flex-wrap items-start p-4 overflow-hidden"
+        :class="{ 'overflow-y-scroll': !isCompilation }" 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>
+          v-for="track in dataStore.getTracksByboxId(box.id, box.activeSide)" :key="track.id" :track="track">
+          <span class="text-slate-700" v-if="isNotManifesto"> {{ track.order }}. </span>
          <p class="text-left text-slate-700">
            <i class="text-slate-950">
              {{ track.title }}
@@ -21,14 +23,13 @@
      <div class="face right" ref="rightFace" />
      <div class="face left" ref="leftFace" />
      <div class="face top" ref="topFace">
-        <template v-if="box.type === 'compilation'">
-          <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 v-if="isCompilation">
+          <img class="logo h-full p-3" src="/logo.svg" alt="" />
+          <img class="absolute block h-10" style="left: 5%" :src="`/${box.id}/${box.activeSide}/title.svg`" alt="" />
        </template>
        <template v-if="box.type === 'playlist'">
-          <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 text-black"> ♠♦♣♥</span>
+          <span class="absolute block h-1/2 text-black" style="left: 5%">
            {{ box.name }}
          </span>
        </template>
@@ -55,6 +56,7 @@ const { $isMobile } = useNuxtApp()
 const dataStore = useDataStore()
 const isDraggable = computed(() => !['box-list', 'box-hidden'].includes(props.box.state))
 const isNotManifesto = computed(() => !props.box.id.startsWith('ES00'))
+const isCompilation = computed(() => props.box.type === 'compilation')

 // --- Réfs ---
 const scene = ref<HTMLElement>()
@@ -128,6 +130,20 @@ function applyColor() {
  bottomFace.value.style.background = props.box.color1
 }

+// --- Rotation complète ---
+function rotateBox() {
+  if (!domBox.value) return
+  rotateY.value = rotateY.value === 20 ? 380 : 20
+  applyTransform(0.8)
+}
+
+watch(
+  () => props.box.activeSide,
+  () => {
+    rotateBox()
+  }
+)
+
 // --- Inertie ---
 function tickInertia() {
  if (!enableInertia) return
@@ -296,13 +312,14 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
    font-weight: 600;
    backface-visibility: hidden;
    box-sizing: border-box;
-    border: 1px solid black;
+    // border: 1px solid black;
  }

  .front,
  .back {
    width: 100%;
    height: 100%;
+    filter: brightness(1.1);
  }

  .face.top,
@@ -319,6 +336,7 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
  .face.right {
    width: var(--depth);
    height: var(--height);
+    filter: brightness(0.8);
  }

  .face.front {
--- a/app/components/Boxes.vue
+++ b/app/components/Boxes.vue
@@ -5,18 +5,18 @@
      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="openBox(box)" class="text-center" :class="box.state" :id="box.id">
+    <box v-for="(box, i) in dataStore.boxes" :key="box.id" :tabindex="dataStore.boxes.length - i"
+      :box="getBoxToDisplay(box)" @click="openBox(box)" class="text-center" :class="box.state" :id="box.id">
      <playButton @click.stop="playSelectedBox(box)" :objectToPlay="box" class="relative z-40 m-auto" />
      <template v-if="box.state === 'box-selected'">
-        <deckCompilation :box="box" class="box-page" v-if="box.type === 'compilation'" @click.stop />
+        <deckCompilation :box="getBoxToDisplay(box)" class="box-page" v-if="box.type === 'compilation'" @click.stop />
        <deckPlaylist :box="box" class="box-page" v-if="box.type === 'playlist'" @click.stop />
      </template>
    </box>
  </div>
 </template>

-<script setup lang="ts">
+<script lang="ts" setup>
 import type { Box } from '~~/types/types'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
@@ -26,6 +26,19 @@ const dataStore = useDataStore()
 const playerStore = usePlayerStore()
 const uiStore = useUiStore()

+// Retourne la box avec les propriétés du côté sélectionné si c'est une compilation
+function getBoxToDisplay(box: Box) {
+  if (box.type !== 'compilation' || !('sides' in box)) return box
+
+  const side = box.sides?.[box.activeSide]
+  if (!side) return box
+
+  return {
+    ...box,
+    ...side
+  }
+}
+
 function openBox(box: Box) {
  if (box.state !== 'box-selected') {
    uiStore.selectBox(box.id)
@@ -44,32 +57,36 @@ function playSelectedBox(box: Box) {

 <style lang="scss" scoped>
 .boxes {
-  @apply flex flex-col items-center justify-center text-center w-full;
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin-top: 250px;
-  transition: margin-top .5s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  transition: margin-top 0.5s ease;
+  min-height: 100vh;

  &.box-selected {
-    margin-top: 0;
+    justify-content: flex-start;

    .box {
-      @apply w-full;
+      width: 100%;
    }
  }

  .box {
    .play-button {
-      @apply relative z-40 -bottom-1/2 opacity-0;
+      position: relative;
+      z-index: 40;
+      bottom: -50%;
+      opacity: 0;
    }

    &.box-selected .play-button {
-      @apply opacity-100 z-20;
+      opacity: 1;
+      z-index: 20;
      bottom: 20%;
-      transition:
-        bottom 0.7s ease,
-        opacity 0.7s ease;
+      transition: bottom 0.7s ease, opacity 0.7s ease;
    }
  }
 }
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -6,7 +6,7 @@
    <div class="flip-inner">
      <!-- Face-Up -->
      <main
-        class="face-up backdrop-blur-sm border-2 border-esyellow 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">
+        class="face-up backdrop-blur-sm border-2 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]">
--- a/app/components/Player.vue
+++ b/app/components/Player.vue
@@ -6,7 +6,6 @@
        <img v-if="playerStore.getCurrentCoverUrl" :src="playerStore.getCurrentCoverUrl as string" alt="Current cover"
          class="size-16 object-cover object-center rounded">
      </NuxtLink>
-      <toggleFavorite v-if="playerStore.currentTrack" :track="playerStore.currentTrack" />
      <audio ref="audioRef" class="flex-1" controls />
    </div>
  </div>
--- a/app/components/SearchModal.vue
+++ b/app/components/SearchModal.vue
@@ -1,83 +1,44 @@
 <template>
  <transition name="fade">
-    <div
-      v-if="ui.showSearch"
-      class="fixed inset-0 z-50 flex items-center justify-center transition-all"
-    >
+    <div v-if="ui.showSearch" class="fixed inset-0 z-50 flex items-center justify-center transition-all">
      <div class="absolute inset-0 bg-black/60 backdrop-blur-md" @click="close"></div>
      <div
        class="relative w-full max-w-2xl rounded-xl bg-white shadow-xl ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700"
-        role="dialog"
-        aria-modal="true"
-        @keydown.esc.prevent.stop="close"
-      >
+        role="dialog" aria-modal="true" @keydown.esc.prevent.stop="close">
        <div class="flex items-center gap-2 dark:border-slate-700">
-          <svg
-            class="ml-4 h-7 w-7 text-slate-500"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
+          <svg class="ml-4 h-7 w-7 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.3-4.3" />
          </svg>
-          <input
-            ref="inputRef"
-            v-model="ui.searchQuery"
-            type="text"
-            placeholder="Rechercher boxes, artistes, tracks..."
+          <input ref="inputRef" v-model="ui.searchQuery" type="text" placeholder="Rechercher boxes, artistes, tracks..."
            class="flex-1 bg-transparent px-2 py-2 text-slate-900 text-3xl placeholder-slate-400 outline-none dark:text-slate-100"
-            @keydown.down.prevent="move(1)"
-            @keydown.up.prevent="move(-1)"
-            @keydown.enter.prevent="confirm"
-          />
+            @keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" @keydown.enter.prevent="confirm" />
        </div>

        <div class="max-h-72 overflow-auto results-scroll">
          <template v-if="results.length">
            <ul class="divide-y divide-slate-100 dark:divide-slate-800">
-              <li
-                v-for="(resultItem, idx) in results"
-                :key="resultItem.key"
-                :class="[
-                  'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
-                  idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
-                ]"
-                @mouseenter="activeIndex = idx"
-                @click="selectResult(resultItem)"
-              >
+              <li v-for="(resultItem, idx) in results" :key="resultItem.key" :class="[
+                'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
+                idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
+              ]" @mouseenter="activeIndex = idx" @click="selectResult(resultItem)">
                <div class="flex items-center gap-3">
-                  <img
-                    v-if="coverUrlFor(resultItem)"
-                    :src="coverUrlFor(resultItem)"
-                    alt=""
-                    loading="lazy"
-                    class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700"
-                  />
+                  <img v-if="coverUrlFor(resultItem)" :src="coverUrlFor(resultItem)" alt="" loading="lazy"
+                    class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700" />
                  <span
-                    class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600"
-                    >{{ resultItem.type }}</span
-                  >
+                    class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600">{{
+                      resultItem.type }}</span>
                  <span class="text-slate-900 dark:text-slate-100">{{ resultItem.label }}</span>
                </div>
                <div class="flex items-center gap-2">
-                  <span
-                    v-if="resultItem.sublabel"
-                    class="text-sm text-slate-500 dark:text-slate-400"
-                    >{{ resultItem.sublabel }}</span
-                  >
-                  <toggleFavorite v-if="resultItem.type === 'TRACK'" :track="resultItem.payload" />
+                  <span v-if="resultItem.sublabel" class="text-sm text-slate-500 dark:text-slate-400">{{
+                    resultItem.sublabel }}</span>
                </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>
@@ -91,12 +52,10 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
-import { useFavoritesStore } from '~/store/favorites'

 const ui = useUiStore()
 const data = useDataStore()
 const player = usePlayerStore()
-const fav = useFavoritesStore()
 const inputRef = ref<HTMLInputElement | null>(null)
 const activeIndex = ref(0)

@@ -195,15 +154,10 @@ const selectResult = (ResultItem: ResultItem) => {
    }
  } else if (ResultItem.type === 'TRACK') {
    const track = ResultItem.payload
-    // If the selected track is a favorite, just play it without navigating/selecting its box
-    if (fav.isFavorite(track.id)) {
+    const box = data.getBoxById(track.boxId)
+    if (box) {
+      ui.selectBox(box.id)
      player.playTrack(track)
-    } else {
-      const box = data.getBoxById(track.boxId)
-      if (box) {
-        ui.selectBox(box.id)
-        player.playTrack(track)
-      }
    }
  }
  close()
--- a/app/components/ToggleFavorite.vue
+++ b/app/components/ToggleFavorite.vue
@@ -1,41 +0,0 @@
-<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/deck/DeckCompilation.vue
+++ b/app/components/deck/DeckCompilation.vue
@@ -9,13 +9,20 @@
        <button @click="distribute">distribute</button>
        <button @click="halfOutside">halfOutside</button>
        <button @click="backToBox">backToBox</button>
+        <button @click="selectSide('A')" class="px-4 py-2 text-black"
+          :class="{ 'bg-white text-black': props.box.activeSide === 'A' }">
+          Side A
+        </button>
+        <button @click="selectSide('B')" class="px-4 py-2"
+          :class="{ 'bg-white text-black': props.box.activeSide === 'B' }">
+          Side B
+        </button>
      </li>
    </ul>
  </div>
 </template>

 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
@@ -31,7 +38,7 @@ const playerStore = usePlayerStore()

 const deck = ref()
 const tracks = computed(() =>
-  dataStore.getTracksByboxId(props.box.id).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+  dataStore.getTracksByboxId(props.box.id, props.box.activeSide).sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
 )

 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
@@ -58,6 +65,11 @@ const backToBox = () => {
  })
 }

+// Fonction pour sélectionner un côté (A ou B)
+const selectSide = (side: 'A' | 'B') => {
+  dataStore.setActiveSideByBoxId(props.box.id, side)
+}
+
 </script>

 <style lang="scss" scoped>
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,31 +1,10 @@
 <template>
-  <div class="w-full min-h-screen flex flex-col items-center bg-gray-50">
+  <div class="w-full flex flex-col items-center">
    <!-- Header avec logo -->
-    <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">
-        <a href="/" class="inline-block">
-          <logo />
-        </a>
-      </div>
-    </header>
-
-    <!-- Contenu principal -->
-    <main>
-      <slot />
-    </main>
-
+    <slot />
    <!-- Player de musique fixe en bas -->
    <searchModal />
    <loader />
    <Player class="w-full border-t border-gray-200" />
  </div>
 </template>
-
-<script setup>
-import { useUiStore } from '~/store/ui'
-
-const uiStore = useUiStore()
-</script>
--- a/app/pages/defaultDev.vue
+++ b/app/pages/defaultDev.vue
@@ -1,45 +0,0 @@
-<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
@@ -2,41 +2,20 @@
  <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"
-        />
+      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="{
+      <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)"
-      />
+        }" :is-face-up="track.isFaceUp" @mousedown="startDrag($event, track)" @click="flipCard(track)" />
    </div>
  </div>
 </template>
@@ -59,7 +38,7 @@ definePageMeta({ layout: 'default' })

 onMounted(async () => {
  await dataStore.loadData()
-  tracks.value = dataStore.getTracksByboxId('ES2025').map((t, i) => ({
+  tracks.value = dataStore.getTracksByboxId('ESPLAYLIST').map((t, i) => ({
    ...t,
    x: t.x ?? 50 + i * 20,
    y: t.y ?? 50 + i * 20,
--- a/app/pages/draggable.vue
+++ b/app/pages/draggable.vue
@@ -1,21 +1,9 @@
 <template>
  <div class="deck">
-    <draggable
-      v-model="tracks"
-      item-key="id"
-      class="draggable-container"
-      @start="drag = true"
-      @end="onDragEnd"
-    >
+    <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)"
-        />
+        <card :key="track.id" :track="track" tabindex="0" :is-face-up="track.isFaceUp" class="draggable-item"
+          @click="flipCard(track)" />
      </template>
    </draggable>
  </div>
@@ -35,7 +23,7 @@ definePageMeta({
 onMounted(async () => {
  const dataStore = useDataStore()
  await dataStore.loadData()
-  tracks.value = dataStore.getTracksByboxId('ES2025')
+  tracks.value = dataStore.getTracksByboxId('ESPLAYLIST')
 })

 function flipCard(track) {
--- a/app/pages/track/[id].vue
+++ b/app/pages/track/[id].vue
@@ -2,7 +2,8 @@
  <boxes />
 </template>

-<script setup>
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
 import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
--- a/app/plugins/favorites.client.ts
+++ b/app/plugins/favorites.client.ts
@@ -1,6 +0,0 @@
-import { useFavoritesStore } from '~/store/favorites'
-
-export default defineNuxtPlugin(() => {
-  const fav = useFavoritesStore()
-  fav.load()
-})
--- a/app/store/data.ts
+++ b/app/store/data.ts
@@ -1,9 +1,5 @@
 import type { Box, Artist, Track } from '~/../types/types'
-import { FAVORITES_BOX_ID, useFavoritesStore } from '~/store/favorites'
-
-// stores/data.ts
 import { defineStore } from 'pinia'
-import { useUiStore } from '~/store/ui'

 export const useDataStore = defineStore('data', {
  state: () => ({
@@ -37,7 +33,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: '' }
          }
@@ -47,25 +43,17 @@ export const useDataStore = defineStore('data', {
            artist: artistObj
          }
        })
-        const favBox: Box = {
-          id: FAVORITES_BOX_ID,
-          type: 'playlist',
-          name: 'Favoris',
-          duration: 0,
-          tracks: [],
-          description: '',
-          color1: '#0f172a',
-          color2: '#1e293b',
-          color3: '#334155',
-          state: 'box-list'
-        }
-        if (!this.boxes.find((b) => b.id === FAVORITES_BOX_ID)) {
-          this.boxes = [...this.boxes, favBox]
-        }
        this.isLoaded = true
      } finally {
        this.isLoading = false
      }
+    },
+
+    setActiveSideByBoxId(boxId: string, side: 'A' | 'B') {
+      const box = this.boxes.find((box) => box.id === boxId.replace(/[AB]$/, ''))
+      if (box) {
+        box.activeSide = side
+      }
    }
  },

@@ -76,15 +64,16 @@ export const useDataStore = defineStore('data', {
        return state.boxes.find((box) => box.id === id)
      }
    },
-    // Obtenir toutes les pistes d'une box donnée
-    getTracksByboxId: (state) => (id: string) => {
-      if (id === FAVORITES_BOX_ID) {
-        const fav = useFavoritesStore()
-        return fav.trackIds
-          .map((tid) => state.tracks.find((t) => t.id === tid))
-          .filter((t): t is Track => !!t)
+    getTracksByboxId: (state) => (id: string, side?: 'A' | 'B') => {
+      const box = state.boxes.find((box) => box.id === id)
+      if (box?.type !== 'compilation' || !side) {
+        return state.tracks.filter((track) => track.boxId === id)
      }
-      return state.tracks.filter((track) => track.boxId === id)
+      return state.tracks.filter((track) => track.boxId === id && track.side === side)
+    },
+    getActiveSideByBoxId: (state) => (id: string) => {
+      const box = state.boxes.find((box) => box.id === id)
+      return box?.activeSide
    },
    // Filtrer les artistes selon certains critères
    getArtistById: (state) => (id: number) => state.artists.find((artist) => artist.id === id),
@@ -101,7 +90,7 @@ export const useDataStore = defineStore('data', {
    },
    getFirstTrackOfBox() {
      return (box: Box) => {
-        const tracks = this.getTracksByboxId(box.id)
+        const tracks = this.getTracksByboxId(box.id, box.activeSide)
          .slice()
          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
        return tracks.length > 0 ? tracks[0] : null
@@ -123,7 +112,7 @@ export const useDataStore = defineStore('data', {
      return (track: Track) => {
        // Récupérer toutes les tracks de la même box et les trier par ordre
        const tracksInBox = state.tracks
-          .filter((t) => t.boxId === track.boxId)
+          .filter((t) => t.boxId === track.boxId && t.side === track.side)
          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))

        // Trouver l’index de la track courante
@@ -135,7 +124,7 @@ export const useDataStore = defineStore('data', {
    getPrevTrack: (state) => {
      return (track: Track) => {
        const tracksInBox = state.tracks
-          .filter((t) => t.boxId === track.boxId)
+          .filter((t) => t.boxId === track.boxId && t.side === track.side)
          .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))

        const index = tracksInBox.findIndex((t) => t.id === track.id)
--- a/app/store/favorites.ts
+++ b/app/store/favorites.ts
@@ -1,144 +0,0 @@
-import { defineStore } from 'pinia'
-import type { Track, Box, BoxType, Artist } from '~/../types/types'
-
-export const FAVORITES_BOX_ID = 'FAV'
-const STORAGE_KEY = 'evilspins:favorites:v2' // Version changée pour forcer la mise à jour
-
-export const useFavoritesStore = defineStore('favorites', {
-  state: () => ({
-    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 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)
-      }
-    },
-
-    save() {
-      if (!process.client) return
-      try {
-        localStorage.setItem(
-          STORAGE_KEY,
-          JSON.stringify({
-            version: this.version,
-            playlist: this.favoritesPlaylist
-          })
-        )
-      } catch (error) {
-        console.error('Error saving favorites:', error)
-      }
-    },
-
-    // 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.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) {
-      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()
-        }
-      }
-    },
-
-    // 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
@@ -3,7 +3,6 @@ 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: () => ({
@@ -40,18 +39,8 @@ export const usePlayerStore = defineStore('player', {
        if (!track) return

        const dataStore = useDataStore()
-        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') {
+        if (track.type === 'playlist') {
          const next = dataStore.getNextPlaylistTrack(track)
          if (next && next.boxId === track.boxId) {
            await this.playTrack(next)
@@ -85,16 +74,10 @@ export const usePlayerStore = defineStore('player', {
    },

    async playTrack(track: Track) {
-      // Si c'est une piste de la playlist utilisateur, on utilise directement cette piste
-      if (track.boxId === FAVORITES_BOX_ID) {
-        this.currentTrack = track
-        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)
-      }
+      // 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) {
@@ -214,7 +197,6 @@ export const usePlayerStore = defineStore('player', {

    async togglePlay() {
      if (!this.audio) return
-
      try {
        if (this.audio.paused) {
          await this.audio.play()
@@ -240,11 +222,11 @@ export const usePlayerStore = defineStore('player', {
        this.progressionLast = progression
      }
      // update current track when changing time in compilation
-      const cur = this.currentTrack
-      if (cur && cur.type === 'compilation') {
+      const currentTrack = this.currentTrack
+      if (currentTrack && currentTrack.type === 'compilation') {
        const dataStore = useDataStore()
        const tracks = dataStore
-          .getTracksByboxId(cur.boxId)
+          .getTracksByboxId(currentTrack.boxId, currentTrack.side)
          .slice()
          .filter((t) => t.type === 'compilation')
          .sort((a, b) => (a.start ?? 0) - (b.start ?? 0))
@@ -261,7 +243,7 @@ export const usePlayerStore = defineStore('player', {
              break
            }
          }
-          if (nextTrack && nextTrack.id !== cur.id) {
+          if (nextTrack && nextTrack.id !== currentTrack.id) {
            // only update metadata reference; do not reload audio
            this.currentTrack = nextTrack

--- a/app/store/ui.ts
+++ b/app/store/ui.ts
@@ -35,6 +35,7 @@ export const useUiStore = defineStore('ui', {
    selectBox(id: string) {
      const dataStore = useDataStore()
      dataStore.boxes.forEach((box) => {
+        id = id.replace(/[AB]$/, '')
        box.state = box.id === id ? 'box-selected' : 'box-hidden'
      })
    },
@@ -57,7 +58,7 @@ export const useUiStore = defineStore('ui', {
            // Récupérer la position de l'élément
            const elementRect = boxElement.getBoundingClientRect()
            // Calculer la position de défilement (une boîte plus haut)
-            const offsetPosition = elementRect.top + window.pageYOffset - (elementRect.height * 1.5)
+            const offsetPosition = elementRect.top + window.pageYOffset - elementRect.height * 1.5
            // Faire défiler à la nouvelle position
            window.scrollTo({
              top: offsetPosition,
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,9 +1,20 @@
 import withNuxt from './.nuxt/eslint.config.mjs'

-export default withNuxt()
-  .prepend()
-  .append({
-    rules: {
-      '@typescript-eslint/ban-types': 'off'
-    }
-  })
+export default withNuxt({
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended'
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  rules: {
+    '@typescript-eslint/ban-types': 'off',
+    'vue/multi-word-component-names': 'off',
+    'vue/script-setup-uses-vars': 'error'
+  }
+})
--- a/public/ES00/A/bkg.jpg
+++ b/public/ES00/A/bkg.jpg
--- a/public/ES00/A/cover.jpg
+++ b/public/ES00/A/cover.jpg
--- a/public/ES00/A/name.png
+++ b/public/ES00/A/name.png
--- a/public/ES00/A/object.png
+++ b/public/ES00/A/object.png
--- a/public/ES00/A/title.svg
+++ b/public/ES00/A/title.svg
--- a/public/ES00/B/bkg.jpg
+++ b/public/ES00/B/bkg.jpg
--- a/public/ES00/B/cover.jpg
+++ b/public/ES00/B/cover.jpg
--- a/public/ES00/B/name.png
+++ b/public/ES00/B/name.png
--- a/public/ES00/B/object.png
+++ b/public/ES00/B/object.png
--- a/public/ES00/B/title.svg
+++ b/public/ES00/B/title.svg
--- a/public/ES00A/title.svg
+++ b/public/ES00A/title.svg
--- a/public/ES00B/title.svg
+++ b/public/ES00B/title.svg
--- a/public/ES01/A/bkg.jpg
+++ b/public/ES01/A/bkg.jpg
--- a/public/ES01/A/cover.jpg
+++ b/public/ES01/A/cover.jpg
--- a/public/ES01/A/name.png
+++ b/public/ES01/A/name.png
--- a/public/ES01/A/object.png
+++ b/public/ES01/A/object.png
--- a/public/ES01/A/title.svg
+++ b/public/ES01/A/title.svg
--- a/public/ES01/B/B.jpg
+++ b/public/ES01/B/B.jpg
--- a/public/ES01/B/bkg.jpg
+++ b/public/ES01/B/bkg.jpg
--- a/public/ES01/B/cover.jpg
+++ b/public/ES01/B/cover.jpg
--- a/public/ES01/B/name.png
+++ b/public/ES01/B/name.png
--- a/public/ES01/B/name.svg
+++ b/public/ES01/B/name.svg
--- a/public/ES01/B/object.png
+++ b/public/ES01/B/object.png
--- a/public/ES01/B/title.svg
+++ b/public/ES01/B/title.svg
--- a/public/loader.svg
+++ b/public/loader.svg
@@ -14,7 +14,7 @@
  <defs
     id="defs1">
    <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
-      <feGaussianBlur stdDeviation="1 5" />
+      <feGaussianBlur stdDeviation="1 3" />
    </filter>
  </defs>
  <sodipodi:namedview
--- a/public/logo.svg
+++ b/public/logo.svg
--- a/server/api/boxes.ts
+++ b/server/api/boxes.ts
@@ -1,178 +1,71 @@
 import { eventHandler } from 'h3'
+import type { Box } from '~~/types/types'
+
+const boxes: Box[] = [
+  {
+    id: 'ES01',
+    type: 'compilation',
+    name: '...',
+    description: '...',
+    state: 'box-hidden',
+    duration: 3487 + 3773, // Somme des durées A et B
+    sides: {
+      A: {
+        name: '...',
+        description: '...',
+        duration: 3487,
+        color1: '#c7b3aa',
+        color2: '#000100'
+      },
+      B: {
+        name: '... B',
+        description: '...',
+        duration: 3773,
+        color1: '#f7dd01',
+        color2: '#010103'
+      }
+    },
+    activeSide: 'A'
+  },
+  {
+    id: 'ES00',
+    type: 'compilation',
+    name: 'manifeste',
+    description: 'Zero is for manifesto',
+    state: 'box-hidden',
+    duration: 2794 + 2470, // Somme des durées A et B
+    sides: {
+      A: {
+        name: 'manifeste',
+        description: 'Zero is for manifesto',
+        duration: 2794,
+        color1: '#ffffff',
+        color2: '#48959d'
+      },
+      B: {
+        name: 'manifeste B',
+        description: 'Even Zero has a b-side',
+        duration: 2470,
+        color1: '#0d01b9',
+        color2: '#3b7589'
+      }
+    },
+    activeSide: 'A'
+  },
+  {
+    id: 'ESPLAYLIST',
+    type: 'playlist',
+    name: 'playlists',
+    duration: 0,
+    description: '♠♦♣♥',
+    state: 'box-hidden',
+    activeSide: 'A'
+  }
+]

 export default eventHandler(() => {
-  const boxes = [
-    {
-      id: 'ES01B',
-      type: 'compilation',
-      name: '... B',
-      duration: 3773,
-      description: '...',
-      color1: '#f7dd01',
-      color2: '#010103',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES01A',
-      type: 'compilation',
-      name: '...',
-      duration: 3487,
-      description: '...',
-      color1: '#c7b3aa',
-      color2: '#000100',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES00B',
-      type: 'compilation',
-      name: 'manifeste B',
-      duration: 2470,
-      description: 'Even Zero has a b-side',
-      color1: '#0d01b9',
-      color2: '#3b7589',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES00A',
-      type: 'compilation',
-      name: 'manifeste',
-      duration: 2794,
-      description: 'Zero is for manifesto',
-      color1: '#ffffff',
-      color2: '#48959d',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2025',
-      type: 'playlist',
-      name: '2025',
-      duration: 0,
-      description: '🐍<i class="indice">🌳</i>',
-      color1: '#ffffff',
-      color2: '#32021F',
-      color3: '#00ff00'
-    },
-    {
-      id: 'ES2024',
-      type: 'playlist',
-      name: '2024',
-      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>',
-      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: 'ES2021',
-      type: 'playlist',
-      name: '2021',
-      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: '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)
+  return boxes.map((box) => ({
+    ...box,
+    state: 'box-hidden' as const
+  }))
 })
--- a/server/api/tracks/compilation.ts
+++ b/server/api/tracks/compilation.ts
@@ -4,7 +4,8 @@ export default eventHandler(() => {
  const tracks = [
    {
      order: 1,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'The grinding wheel',
      artist: 0,
      start: 0,
@@ -13,7 +14,8 @@ export default eventHandler(() => {
    },
    {
      order: 2,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Bleach',
      artist: 1,
      start: 392,
@@ -22,7 +24,8 @@ export default eventHandler(() => {
    },
    {
      order: 3,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Televised mind',
      artist: 2,
      start: 896,
@@ -31,7 +34,8 @@ export default eventHandler(() => {
    },
    {
      order: 4,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'In it',
      artist: 3,
      start: 1139,
@@ -40,7 +44,8 @@ export default eventHandler(() => {
    },
    {
      order: 5,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Bad michel',
      artist: 4,
      start: 1245,
@@ -49,7 +54,8 @@ export default eventHandler(() => {
    },
    {
      order: 6,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Overall',
      artist: 5,
      start: 1394,
@@ -58,7 +64,8 @@ export default eventHandler(() => {
    },
    {
      order: 7,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Blowup',
      artist: 6,
      start: 1674,
@@ -67,7 +74,8 @@ export default eventHandler(() => {
    },
    {
      order: 8,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Guitar jet',
      artist: 7,
      start: 1880,
@@ -76,7 +84,8 @@ export default eventHandler(() => {
    },
    {
      order: 9,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Intercontinental radio waves',
      artist: 8,
      start: 2024,
@@ -85,7 +94,8 @@ export default eventHandler(() => {
    },
    {
      order: 10,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Here comes the sun',
      artist: 9,
      start: 2211,
@@ -94,7 +104,8 @@ export default eventHandler(() => {
    },
    {
      order: 11,
-      boxId: 'ES00A',
+      boxId: 'ES00',
+      side: 'A',
      title: 'Like in the movies',
      artist: 10,
      start: 2560,
@@ -103,7 +114,8 @@ export default eventHandler(() => {
    },
    {
      order: 1,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: "Ce que révèle l'éclipse",
      artist: 0,
      start: 0,
@@ -112,7 +124,8 @@ export default eventHandler(() => {
    },
    {
      order: 2,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: "Bleedin' Gums Mushrool",
      artist: 1,
      start: 263,
@@ -121,7 +134,8 @@ export default eventHandler(() => {
    },
    {
      order: 3,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'A lucid dream',
      artist: 2,
      start: 554,
@@ -130,7 +144,8 @@ export default eventHandler(() => {
    },
    {
      order: 4,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'Lights off',
      artist: 3,
      start: 781,
@@ -139,7 +154,8 @@ export default eventHandler(() => {
    },
    {
      order: 5,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: "I'm sentimental",
      artist: 4,
      start: 969,
@@ -148,7 +164,8 @@ export default eventHandler(() => {
    },
    {
      order: 6,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'Thrill or trip',
      artist: 5,
      start: 1128,
@@ -157,7 +174,8 @@ export default eventHandler(() => {
    },
    {
      order: 7,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'Redhead',
      artist: 6,
      start: 1303,
@@ -166,7 +184,8 @@ export default eventHandler(() => {
    },
    {
      order: 8,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'Supersonic twist',
      artist: 7,
      start: 1584,
@@ -175,7 +194,8 @@ export default eventHandler(() => {
    },
    {
      order: 9,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'Flowers',
      artist: 8,
      start: 1749,
@@ -184,7 +204,8 @@ export default eventHandler(() => {
    },
    {
      order: 10,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'The shade',
      artist: 9,
      start: 1924,
@@ -193,7 +214,8 @@ export default eventHandler(() => {
    },
    {
      order: 11,
-      boxId: 'ES00B',
+      boxId: 'ES00',
+      side: 'B',
      title: 'Like in the movies',
      artist: 10,
      start: 2186,
@@ -202,7 +224,8 @@ export default eventHandler(() => {
    },
    {
      order: 1,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'He Walked In',
      artist: 11,
      start: 0,
@@ -211,7 +234,8 @@ export default eventHandler(() => {
    },
    {
      order: 2,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'The Third Wave',
      artist: 12,
      start: 841,
@@ -220,7 +244,8 @@ export default eventHandler(() => {
    },
    {
      order: 3,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'Broadcaster',
      artist: 13,
      start: 1104.5,
@@ -229,7 +254,8 @@ export default eventHandler(() => {
    },
    {
      order: 4,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'Mourn',
      artist: 14,
      start: 1441,
@@ -238,7 +264,8 @@ export default eventHandler(() => {
    },
    {
      order: 5,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'Let it Blow',
      artist: 15,
      start: 1844.8,
@@ -247,7 +274,8 @@ export default eventHandler(() => {
    },
    {
      order: 6,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'Sunday Mourning',
      artist: 16,
      start: 2091.7,
@@ -256,7 +284,8 @@ export default eventHandler(() => {
    },
    {
      order: 7,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: '3030 Instrumental',
      artist: 17,
      start: 2339.3,
@@ -265,7 +294,8 @@ export default eventHandler(() => {
    },
    {
      order: 8,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'Immortality Break',
      artist: 18,
      start: 2530.5,
@@ -274,7 +304,8 @@ export default eventHandler(() => {
    },
    {
      order: 9,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'Lazy Bones',
      artist: 19,
      start: 2718,
@@ -283,7 +314,8 @@ export default eventHandler(() => {
    },
    {
      order: 10,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'On the Train of Aches',
      artist: 20,
      start: 2948,
@@ -292,7 +324,8 @@ export default eventHandler(() => {
    },
    {
      order: 11,
-      boxId: 'ES01A',
+      boxId: 'ES01',
+      side: 'A',
      title: 'Me',
      artist: 21,
      start: 3265,
@@ -301,7 +334,8 @@ export default eventHandler(() => {
    },
    {
      order: 1,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'Lady Hawke Blues',
      artist: 11,
      start: 0,
@@ -310,7 +344,8 @@ export default eventHandler(() => {
    },
    {
      order: 2,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'Dreamscapes',
      artist: 12,
      start: 235,
@@ -319,7 +354,8 @@ export default eventHandler(() => {
    },
    {
      order: 3,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'Crispy Skin',
      artist: 13,
      start: 644.2,
@@ -328,7 +364,8 @@ export default eventHandler(() => {
    },
    {
      order: 4,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'The Boy Who Stood Above The Earth',
      artist: 14,
      start: 1018,
@@ -337,7 +374,8 @@ export default eventHandler(() => {
    },
    {
      order: 5,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'Better Off Alone',
      artist: 15,
      start: 1698,
@@ -346,7 +384,8 @@ export default eventHandler(() => {
    },
    {
      order: 6,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'Celebration #1',
      artist: 16,
      start: 2235,
@@ -355,7 +394,8 @@ export default eventHandler(() => {
    },
    {
      order: 7,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: '3030 Instrumental',
      artist: 17,
      start: 2458.3,
@@ -364,7 +404,8 @@ export default eventHandler(() => {
    },
    {
      order: 8,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'The Emptiness Of Nothingness',
      artist: 18,
      start: 2864.5,
@@ -373,7 +414,8 @@ export default eventHandler(() => {
    },
    {
      order: 9,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'Rising',
      artist: 19,
      start: 3145,
@@ -382,7 +424,8 @@ export default eventHandler(() => {
    },
    {
      order: 10,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'The Last Time',
      artist: 22,
      start: 3447,
@@ -392,7 +435,8 @@ export default eventHandler(() => {
    },
    {
      order: 11,
-      boxId: 'ES01B',
+      boxId: 'ES01',
+      side: 'B',
      title: 'Guajira Con Arpa',
      artist: 23,
      start: 3586,
@@ -404,7 +448,7 @@ export default eventHandler(() => {
  return tracks.map((track, index) => ({
    id: index + 1,
    ...track,
-    url: `https://files.erudi.fr/evilspins/${track.boxId}.mp3`,
+    url: `https://files.erudi.fr/evilspins/${track.boxId}${track.side}.mp3`,
    coverId: `https://f4.bcbits.com/img/${track.coverId}_4.jpg`,
    type: 'compilation'
  }))
--- a/server/api/tracks/playlist.ts
+++ b/server/api/tracks/playlist.ts
@@ -47,7 +47,8 @@ export default eventHandler(async (event) => {

      return {
        id: Number(`${year}${index + 1}`),
-        boxId: `ES${year}`,
+        boxId: `ESPLAYLIST`,
+        year,
        date,
        title: title.trim(),
        artist: artist.trim(),
--- a/types/types.ts
+++ b/types/types.ts
@@ -1,20 +1,27 @@
 // types.ts
 export type BoxType = 'playlist' | 'compilation' | 'userPlaylist'

+export interface BoxSide {
+  duration: number
+  color1: string
+  color2: string
+  name?: string
+  description?: string
+}
+
 export interface Box {
  id: string
  type: BoxType
  name: string
+  description: string
+  state: BoxState
  duration: number
  tracks?: Track[]
-  description: string
-  color2: string
-  color1: string
-  color3: string
-  state: BoxState
-  // Pour les userPlaylist, on peut ajouter des métadonnées spécifiques
-  ownerId?: string
-  isPublic?: boolean
+  sides?: {
+    A: BoxSide
+    B: BoxSide
+  }
+  activeSide: 'A' | 'B'
 }

 export interface Artist {
@@ -25,6 +32,7 @@ export interface Artist {
 }
 export interface Track {
  id: number
+  side?: 'A' | 'B'
  order?: number
  boxId: string
  title: string
@@ -37,6 +45,7 @@ export interface Track {
  card?: { suit: CardSuit; rank: CardRank }
  link?: string
  type: BoxType
+  year?: number
 }

 export interface Playlist {