major refactors

src/components/LeftSidebar/SongCard.vue

@@ -1,39 +1,30 @@
 <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="title ellip">{{ props.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 class="artists ellip" v-if="props.track.artists[0] !== ''">
+          <span
+            v-for="artist in putCommas(props.track.artists)"
+            :key="artist"
+            >{{ artist }}</span
+          >
         </div>
         <div class="artists" v-else>
-          <span>{{ track.albumartist }}</span>
+          <span>{{ props.track.albumartist }}</span>
         </div>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import perks from "../../composables/perks";
-import state from "../../composables/state";
-
-const track = state.current;
-const props = defineProps({
-  collapsed: {
-    type: Boolean,
-    default: false,
-  },
-});
+import { Track } from "../../interfaces";
 const putCommas = perks.putCommas;
-</script>
+
+const props = defineProps<{
+  track: Track;
+}>();
+</script>