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(
+    background: linear-gradient(to top right, #021b79, #0575e6);
-      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>

src/composables/getFiles.js

@@ -1,24 +0,0 @@
-let base_uri = "http://127.0.0.1:9876/";
-
-const getTracksAndDirs = async (path) => {
-    let url;
-
-    const encoded_path = encodeURIComponent(path.replaceAll("/", "|"));
-    url = url = `${base_uri}/f/${encoded_path}`;
-
-    const res = await fetch(url);
-
-    if (!res.ok) {
-        const message = `An error has occurred: ${res.status}`;
-        throw new Error(message);
-    }
-
-    const data = await res.json();
-
-    const songs = data.files;
-    const folders = data.folders;
-
-    return {songs, folders};
-};
-
-export default getTracksAndDirs;

src/interfaces.ts

@@ -14,6 +14,13 @@ interface Track {
   discnumber?: number;
 }
 
+interface Folder {
+  name: string;
+  path: string;
+  trackscount: number;
+  subdircount: number;
+}
+
 interface AlbumInfo {
   album: string;
   artist: string;
@@ -38,4 +45,4 @@ interface Option {
   critical?: Boolean;
 }
 
-export { Track, AlbumInfo, Artist, Option };
+export { Track, Folder, AlbumInfo, Artist, Option };

src/views/FolderView.vue

@@ -19,7 +19,7 @@ import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import Header from "@/components/FolderView/Header.vue";
 
-import getTracksAndDirs from "../composables/getFiles.js";
+import getTracksAndDirs from "../composables/getFilesAndFolders";
 import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state";
 
@@ -87,8 +87,9 @@ export default {
           .then((data) => {
             scrollable.value.scrollTop = 0;
 
-            state.folder_song_list.value = data.songs;
+            state.folder_song_list.value = data.tracks;
             state.folder_list.value = data.folders;
+            console.log(data);
 
             state.loading.value = false;
           })