play/pause works

app/components/compilations.vue

@@ -4,7 +4,9 @@
       :BoxState="boxStates[compilation.id]" @click="() => openCompilation(compilation.id)"
       :class="boxStates[compilation.id]" class="text-center">
       <button @click="playerStore.playCompilation(compilation.id)" v-if="boxStates[compilation.id] === 'selected'"
-        class="relative z-40 rounded-full size-24 bottom-1/2 text-2xl">▶</button>
+        class="relative z-40 rounded-full size-24 bottom-1/2 text-2xl">
+        {{ !playerStore.isPaused && playerStore.currentTrack?.compilationId === compilation.id ? 'II' : '▶' }}
+      </button>
       <deck :compilation="compilation" class="box-page" v-if="boxStates[compilation.id] === 'selected'" />
     </box>
   </div>
@@ -30,6 +32,7 @@ function openCompilation(id: string) {
       behavior: 'smooth'
     });
 
+    navigateTo(`/box/${id}`)
   }
 }