WIP: add TODO and small fixies

app/components/Box.vue

@@ -21,11 +21,11 @@
       <div class="face right" ref="rightFace" />
       <div class="face left" ref="leftFace" />
       <div class="face top" ref="topFace">
-        <template v-if="box.duration !== 0">
+        <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>
-        <template v-else>
+        <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%">
@@ -249,7 +249,7 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
 
   &.box-list {
     height: calc(var(--size) * 20);
-    @apply hover:scale-105;
+    @apply hover:scale-105 hover:z-20 focus-visible:scale-105 focus-visible:z-20 focus-visible:outline-none;
     transition: all 0.5s ease;
     will-change: transform;
   }
@@ -368,16 +368,6 @@ watch(isDraggable, (enabled) => (enabled ? addListeners() : removeListeners()))
     pointer-events: auto;
   }
 
-  /* for tabindex */
-  &:focus-visible {
-    outline: 0;
-    @apply scale-105 outline-none;
-
-    .face {
-      // border: 4px solid rgba(0, 0, 0, 0.5);
-    }
-  }
-
   :deep(.indice) {
     @apply text-xl p-2 relative bg-black/50 rounded-full backdrop-blur-md;
   }