refactor UI layout

src/components/LeftSidebar/AlbumArt.vue

@@ -1,17 +1,20 @@
 <template>
-  <div class="l_" v-if="!props.collapsed">
+  <div class="l_ rounded" v-if="!props.collapsed">
     <div
-      class="l-image image"
+      class="l-image image rounded"
       :style="{
         backgroundImage: `url(&quot;${current.image}&quot;)`,
       }"
     ></div>
+    <div class="separator no-border"></div>
+    <SongCard />
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import state from "../../composables/state";
+import SongCard from "./SongCard.vue";
 
 const current = ref(state.current);
 const props = defineProps({
@@ -24,10 +27,12 @@ const props = defineProps({
 <style lang="scss">
 .l_ {
   padding: $small;
+  background-color: #e24a01;
+  margin: $small;
 
   .l-image {
-    height: 14rem;
-    width: 14rem;
+    height: 13rem;
+    width: 13rem;
   }
 }
 </style>

src/components/LeftSidebar/SongCard.vue

@@ -0,0 +1,39 @@
+<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>