FEAT: side A/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 {