minor refactoring

src/App.vue

@@ -20,7 +20,7 @@
     </div>
     <RightSideBar />
     <div class="bottom-bar">
-      <BottomBar />
+      <BottomBar :collapsed="collapsed"/>
     </div>
   </div>
 </template>

src/components/BottomBar/BottomBar.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="b-bar border card-dark">
     <div class="grid">
-      <SongCard/>
+      <SongCard :collapsed="props.collapsed" />
       <div class="controlsx border rounded">
         <div class="controls controls-bottom">
           <HotKeys />
         </div>
         <div class="progress progress-bottom">
-          <span class="durationx">{{formatSeconds(current_pos)}}</span>
+          <span class="durationx">{{ formatSeconds(current_pos) }}</span>
           <Progress />
-          <span class="durationx">{{ formatSeconds(state.current.value.length) }}</span>
+          <span class="durationx">{{
+            formatSeconds(state.current.value.length)
+          }}</span>
         </div>
         <div class="r-group">
           <div class="heart image"></div>
@@ -24,7 +26,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
 import "../../assets/css/BottomBar/BottomBar.scss";
 import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
@@ -33,6 +35,13 @@ import state from "../../composables/state";
 import perks from "../../composables/perks";
 import playAudio from "../../composables/playAudio";
 
-const current_pos = ref(playAudio.current_time);
+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,6 +1,7 @@
 <template>
   <div class="info">
     <div
+      v-if="props.collapsed"
       class="image art"
       :style="{
         backgroundImage: `url(&quot;${track.image}&quot;)`,
@@ -24,11 +25,15 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
 import perks from "../../composables/perks";
 import state from "../../composables/state";
 
-const track = ref(state.current);
-
+const track = state.current;
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
 const putCommas = perks.putCommas;
 </script>

src/components/FolderView/SongList.vue

@@ -33,7 +33,6 @@
 </template>
 
 <script setup>
-import { ref } from "@vue/reactivity";
 import { onMounted } from "@vue/runtime-core";
 import { useRoute } from "vue-router";
 
@@ -46,13 +45,13 @@ import state from "@/composables/state.js";
 const props = defineProps({
   songs: {
     type: Array,
-    required: true
-  }
+    required: true,
+  },
 });
 
 let route;
 
-const search_query = ref(state.search_query);
+const search_query = state.search_query;
 
 onMounted(() => {
   route = useRoute().name;
@@ -86,13 +85,6 @@ function loadAlbum(title, albumartist) {
   justify-content: center;
   flex-direction: column;
   padding: 1rem;
-
-  // .icon {
-  //   height: 10rem;
-  //   width: 15rem;
-  //   border: solid;
-  //   background-image: url("../../assets/images/sokka.webp");
-  // }
 }
 
 .table {

src/components/LeftSidebar/Navigation.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="side-nav-container" :class="{ collapsed: collapsed }">
-    <router-link v-for="menu in menus" :key="menu.name" :to="{ name: menu.route_name, params: {path: 'home'} }" >
+  <div class="side-nav-container" :class="{ collapsed: props.collapsed }">
+    <router-link
+      v-for="menu in menus"
+      :key="menu.name"
+      :to="{ name: menu.route_name, params: { path: 'home' } }"
+    >
       <div class="nav-button" id="home-button">
         <div class="in">
           <div class="nav-icon image" :id="`${menu.name}-icon`"></div>
@@ -42,7 +46,12 @@ const menus = [
   },
 ];
 
-const collapsed = ref(false);
+const props = defineProps({
+  collapsed: {
+    type: Boolean,
+    default: false,
+  },
+});
 </script>
 
 <style lang="scss">

src/components/shared/AlbumCard.vue

@@ -32,7 +32,6 @@ export default {
   border-radius: $small;
   text-align: left !important;
   width: 9rem;
-  // border: solid 1px red !important;
 
   .album-art {
     height: 7rem;