clean player off/on style

app/components/boxes.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col-reverse mt-16">
+  <div class="flex flex-col-reverse mt-16" :class="!!playerStore.currentTrack ? 'mb-36' : 'mb-16'">
     <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'"

app/components/player.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="fixed left-0 z-50 w-full bg-white transition-all -bottom-20 opacity-0 h-0"
+  <div class="player-container fixed left-0 z-50 w-full h-20 bg-white"
-    :class="{ 'bottom-0 opacity-100 h-20': playerStore.currentTrack }">
+    :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" />
@@ -29,3 +29,9 @@ onUnmounted(() => {
   }
 })
 </script>
+
+<style>
+.player-container {
+  transition: all 1s ease-in-out;
+}
+</style>

app/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full flex flex-col items-center mb-96">
+  <div class="w-full flex flex-col items-center">
     <div @click="uiStore.closeBox()" class="cursor-pointer">
       <logo />
     </div>