major changes:

- introduce flask cache
- use replaceAll together with encodeURI component on client
- many more

src/components/FolderView/FolderList.vue

@@ -21,10 +21,7 @@
 
 <script>
 export default {
-  props: ["folders"],
-  setup() {
-    console.log("props.folders");
-  },
+  props: ["folders"]
 };
 </script>
 

src/components/LeftSidebar/Navigation.vue

@@ -45,7 +45,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '$home' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="folders-icon"></div>
@@ -54,7 +54,7 @@
       </div>
     </router-link>
     <hr />
-    <router-link :to="{ name: 'FolderView', params: { path: ' ' } }">
+    <router-link :to="{ name: 'FolderView', params: { path: '$home' } }">
       <div class="nav-button" id="folders-button">
         <div class="in">
           <div class="nav-icon image" id="settings-icon"></div>

src/composables/getFiles.js

@@ -6,11 +6,13 @@ const getData = async (path, last_id) => {
   let url;
   const songs = ref(null);
   const folders = ref(null);
+  
+  path = encodeURIComponent(path.replaceAll("/", "|"));
 
   if (last_id) {
-    url = `${folders_uri}/?f=${path}&last_id=${last_id}`;
+    url = `${folders_uri}/f/${path}::${last_id}`;
   } else {
-    url = url = `${folders_uri}/?f=${path}`;
+    url = url = `${folders_uri}/f/${path}`;
   }
 
   const res = await fetch(url);

src/views/FolderView.vue

@@ -59,7 +59,7 @@ export default {
 
       watch(route, (new_route) => {
         path.value = new_route.params.path;
-        getPathFolders(encodeURI(path.value));
+          getPathFolders(path.value);
       });
 
       scrollable.value.onscroll = () => {