add Folder interface

src/components/FolderView/FolderItem.vue

@@ -7,7 +7,7 @@
       <div class="info">
         <div class="f-item-text ellip">{{ props.folder.name }}</div>
         <div class="separator no-border"></div>
-        <div class="f-item-count">{{ props.folder.count }} tracks</div>
+        <div class="f-item-count">{{ props.folder.trackcount }} tracks</div>
       </div>
     </div>
   </router-link>
@@ -30,7 +30,7 @@ const props = defineProps({
   position: relative;
   background-color: $gray4;
   transition: all 0.2s ease;
-  border-radius: .75rem;
+  border-radius: 0.75rem;
 
   @include phone-only {
     height: 4rem;
@@ -59,11 +59,7 @@ const props = defineProps({
 
   &:hover {
     background: #0575e6;
-    background: linear-gradient(
-      to top right,
-      #021b79,
-      #0575e6
-    );
+    background: linear-gradient(to top right, #021b79, #0575e6);
     background-size: 105% 105%;
     background-position-x: -$small;
 

src/components/LeftSidebar/Navigation.vue

@@ -3,7 +3,7 @@
     <router-link
       v-for="menu in menus"
       :key="menu.name"
-      :to="{ name: menu.route_name, params: { path: 'home' } }"
+      :to="{ name: menu.route_name, params: menu.params }"
     >
       <div class="nav-button" id="home-button">
         <div class="in">
@@ -36,6 +36,7 @@ const menus = [
   {
     name: "folders",
     route_name: "FolderView",
+    params: { path: "$home" },
   },
   {
     name: "tags",
@@ -43,7 +44,7 @@ const menus = [
   {
     name: "settings",
     route_name: "SettingsView",
-  }
+  },
 ];
 
 const props = defineProps({
@@ -137,5 +138,4 @@ const props = defineProps({
     }
   }
 }
-
 </style>

src/components/nav/NavBar.vue

@@ -5,7 +5,7 @@
         <PlayBtn />
       </div>
       <div class="info">
-        <div class="title">Alice</div>
+        <div class="title">Legends never die</div>
       </div>
     </div>
     <div class="center rounded"></div>