move nav folder-paths into a new component (#66)

* move folder-paths into a new component

* move nav playlist title into new components

server/app/functions.py

@@ -6,18 +6,14 @@ import time
 from io import BytesIO
 
 import requests
-from tqdm import tqdm
 from app import api
 from app import helpers
 from app import settings
 from app.lib import watchdoge
 from app.lib.populate import Populate
 from PIL import Image
-from progress.bar import Bar
 from concurrent.futures import ThreadPoolExecutor
 
-from app.lib.trackslib import create_all_tracks
-
 
 @helpers.background
 def reindex_tracks():
@@ -44,9 +40,9 @@ def populate():
     pop = Populate()
     pop.run()
 
-    tracks = create_all_tracks()
+    # tracks = create_all_tracks()
-    api.TRACKS.clear()
+    # api.TRACKS.clear()
-    api.TRACKS.extend(tracks)
+    # api.TRACKS.extend(tracks)
 
 
 class getArtistImage:

server/app/lib/folderslib.py

@@ -123,9 +123,7 @@ class getFnF:
                 dirs.append(Dir(**dir))
             elif entry.is_file() and entry.name.endswith((".mp3", ".flac")):
                 files.append(entry.path)
-        s = time()
         tracks = self.get_tracks(files)
-        print(f"{time() - s} seconds to get tracks")
 
         folders = [create_folder(dir) for dir in dirs]
         folders = filter(lambda f: f.trackcount > 0, folders)

src/components/nav/NavBar.vue

@@ -6,51 +6,8 @@
       </div>
 
       <div class="info">
-        <div
+        <Playlists v-show="$route.name == Routes.playlists" />
-          class="title"
+        <Folder v-show="$route.name == Routes.folder" :subPaths="subPaths" />
-          v-show="$route.name == 'Playlists'"
-          v-motion
-          :initial="{
-            opacity: 0,
-            x: -20,
-          }"
-          :visible="{
-            opacity: 1,
-            x: 0,
-            transition: {
-              delay: 100,
-            },
-          }"
-        >
-          Playlists
-        </div>
-        <div
-          class="folder"
-          v-show="$route.name == 'FolderView'"
-          v-motion
-          :initial="{
-            opacity: 0,
-            x: -20,
-          }"
-          :visible="{
-            opacity: 1,
-            x: 0,
-            transition: {
-              delay: 100,
-            },
-          }"
-        >
-          <div class="fname">
-            <div class="icon image"></div>
-            <div class="paths">
-              <!-- {{ $route.params.path.split("/").splice(-1)[0] }} -->
-              <!-- {{ $route.params.path }} -->
-              <div class="path" v-for="path in subPaths" :key="path.path">
-                <span class="text">{{ path.name }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
 
@@ -73,10 +30,12 @@ import { onMounted, ref, watch } from "vue";
 import { Routes } from "@/composables/enums";
 import createSubPaths from "@/composables/createSubPaths";
 import { subPath } from "@/interfaces";
+import Folder from "./Titles/Folder.vue";
+import Playlists from "./Titles/Playlists.vue";
 
 const route = useRoute();
 
-const subPaths = ref<subPath[]>();
+const subPaths = ref<subPath[]>([]);
 
 function useSubRoutes() {
   watch(
@@ -129,90 +88,6 @@ onMounted(() => {
         font-size: 1.5rem;
         font-weight: bold;
       }
-
-      .folder {
-        display: flex;
-        gap: $small;
-
-        .playbtnrect {
-          height: 2.25rem;
-        }
-
-        .drop-btn {
-          width: 2.25rem;
-
-          .drop-icon {
-            height: 2.25rem;
-            width: 2.25rem;
-          }
-        }
-
-        .fname {
-          background-color: $gray4;
-          border-radius: $small;
-          height: 2.25rem;
-          display: flex;
-          align-items: center;
-          margin-left: $smaller;
-          overflow: auto;
-
-          .icon {
-            height: 2rem;
-            aspect-ratio: 1;
-            background-image: url("../../assets/icons/folder.fill.svg");
-            background-size: 1.5rem;
-            background-position: 75% 50%;
-          }
-
-          .paths {
-            display: flex;
-            gap: $smaller;
-            overflow: auto;
-            height: 100%;
-            scrollbar-width: none;
-
-            &::-webkit-scrollbar {
-              display: none;
-            }
-
-            .path {
-              white-space: nowrap;
-              display: flex;
-              align-items: center;
-              cursor: default;
-
-              .text {
-                padding: $smaller;
-                border-radius: $smaller;
-              }
-
-              &::before {
-                content: "";
-                height: $medium;
-                margin-right: $smaller;
-                border-right: solid 1px $white;
-                transform: rotate(20deg);
-              }
-
-              &:first-child {
-                &::before {
-                  display: none;
-                }
-              }
-
-              &:last-child {
-                padding-right: $small;
-              }
-
-              &:hover {
-                .text {
-                  background-color: $gray;
-                }
-              }
-            }
-          }
-        }
-      }
     }
   }
 

src/components/nav/Titles/Folder.vue

@@ -0,0 +1,127 @@
+<template>
+  <div id="folder-nav-title">
+    <div
+      class="folder"
+      
+      v-motion
+      :initial="{
+        opacity: 0,
+        x: -20,
+      }"
+      :visible="{
+        opacity: 1,
+        x: 0,
+        transition: {
+          delay: 100,
+        },
+      }"
+    >
+      <div class="fname">
+        <div class="icon image"></div>
+        <div class="paths">
+          <div class="path" v-for="path in subPaths" :key="path.path">
+            <span class="text">{{ path.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { subPath } from "@/interfaces";
+
+defineProps<{
+  subPaths: subPath[];
+}>();
+</script>
+
+<style lang="scss">
+#folder-nav-title {
+  .folder {
+    display: flex;
+    gap: $small;
+
+    .playbtnrect {
+      height: 2.25rem;
+    }
+
+    .drop-btn {
+      width: 2.25rem;
+
+      .drop-icon {
+        height: 2.25rem;
+        width: 2.25rem;
+      }
+    }
+
+    .fname {
+      background-color: $gray4;
+      border-radius: $small;
+      height: 2.25rem;
+      display: flex;
+      align-items: center;
+      margin-left: $smaller;
+      overflow: auto;
+      padding-right: $smaller;
+
+      .icon {
+        height: 2rem;
+        aspect-ratio: 1;
+        background-image: url("../../../assets/icons/folder.fill.svg");
+        background-size: 1.5rem;
+        margin-left: $smaller;
+        background-position: 65% 50%;
+      }
+
+      .paths {
+        display: flex;
+        gap: $smaller;
+        overflow: auto;
+        height: 100%;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+
+        .path {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          cursor: default;
+
+          .text {
+            padding: $smaller;
+            border-radius: $smaller;
+          }
+
+          &::before {
+            content: "";
+            height: $medium;
+            margin-right: $smaller;
+            border-right: solid 1px $white;
+            transform: rotate(20deg);
+          }
+
+          &:first-child {
+            &::before {
+              display: none;
+            }
+          }
+
+          &:last-child {
+            padding-right: $smaller;
+          }
+
+          &:hover {
+            .text {
+              background-color: $gray;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/nav/Titles/Playlists.vue

@@ -0,0 +1,20 @@
+<template>
+  <div
+    class="title"
+    v-show="$route.name == 'Playlists'"
+    v-motion
+    :initial="{
+      opacity: 0,
+      x: -20,
+    }"
+    :visible="{
+      opacity: 1,
+      x: 0,
+      transition: {
+        delay: 100,
+      },
+    }"
+  >
+    Playlists
+  </div>
+</template>