refactor UI layout

src/components/BottomBar/BottomBar.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="b-bar">
-    <div class="grid">
-      <SongCard :collapsed="props.collapsed" />
+  <div class="b-bar ">
+    <div class="grid rounded">
       <div class="controlsx rounded">
         <div class="controls controls-bottom">
           <HotKeys />
@@ -27,7 +26,6 @@
 
 <script setup>
 import "../../assets/css/BottomBar/BottomBar.scss";
-import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
 import HotKeys from "../shared/HotKeys.vue";
 import state from "../../composables/state";
@@ -37,10 +35,4 @@ import playAudio from "../../composables/playAudio";
 const current_pos = playAudio.current_time
 const formatSeconds = perks.formatSeconds;
 
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
 </script>

src/components/BottomBar/SongCard.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="info">
-    <div
-      v-if="props.collapsed"
-      class="image art"
-      :style="{
-        backgroundImage: `url(&quot;${track.image}&quot;)`,
-      }"
-    ></div>
-    <div class="desc">
-      <div>
-        <div class="title ellip">{{ track.title }}</div>
-        <div class="separator no-border"></div>
-        <div class="artists ellip" v-if="track.artists[0] !== ''">
-          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
-            artist
-          }}</span>
-        </div>
-        <div class="artists" v-else>
-          <span>{{ track.albumartist }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import perks from "../../composables/perks";
-import state from "../../composables/state";
-
-const track = state.current;
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
-const putCommas = perks.putCommas;
-</script>