eS v1

app/pages/index.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="w-full flex flex-col items-center">
-    <logo />
+    <div @click="uiStore.closeBox()" class="cursor-pointer">
+      <logo />
+    </div>
     <main>
-      <compilations />
+      <boxes />
       <player />
     </main>
   </div>
 </template>
+
+<script setup>
+import { useUiStore } from '~/store/ui'
+const uiStore = useUiStore()
+</script>
+
 <style>
 .logo {
   filter: drop-shadow(2px 2px 0 rgb(0 0 0 / 0.8));

app/pages/studio.vue

@@ -3,22 +3,22 @@
     <div class="bg-page-dark-bg text-white">
       <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
         <div class="mt-8 flex flex-wrap justify-center">
-          <!-- <box :compilation="compilation" /> -->
+          <!-- <box :box="box" /> -->
           <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
             <!-- <button @click="currentPosition = boxPositions.side">side</button>
             <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="compilation.color1">
-              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color2">
+              <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, ${compilation.color1}, ${compilation.color2})`
+                background: `linear-gradient(to top, ${box.color1}, ${box.color2})`
               }">
               </div>
-              <label class="block">
+              <!-- <label class="block">
                 size: {{ size }}
                 <input v-model.number="size" type="range" step="1" min="1" max="14">
-              </label>
+              </label> -->
             </div>
             <!-- <div>
               <label class="block">
@@ -43,9 +43,9 @@
 </template>
 
 <script setup lang="ts">
-import type { BoxPosition, Compilation, Track } from '~~/types/types'
+import type { Box, Track } from '~~/types/types'
 
-const compilation = ref<Compilation>({
+const box = ref<Box>({
   id: 'ES00A',
   name: 'zero',
   duration: 2794,
@@ -53,11 +53,12 @@ const compilation = ref<Compilation>({
   color1: '#ffffff',
   color2: '#48959d',
   color3: '#00ff00',
+  type: 'compilation'
 })
 
 const track = ref<Track>({
   id: 1,
-  compilationId: 'ES00A',
+  boxId: 'ES00A',
   title: 'The grinding wheel',
   artist: {
     id: 0,
@@ -68,6 +69,7 @@ const track = ref<Track>({
   start: 0,
   url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
   coverId: 'a3236746052',
+  type: 'compilation',
 })
 
 //from-slate-800 to-zinc-900