use count_documents to get folder count

- map filenames with db data

src/components/LeftSidebar/nowPlaying.vue

@@ -102,6 +102,7 @@ const queue = useQStore();
 
   .title {
     font-weight: 900;
+    word-break: break-all;
   }
 
   .artists {

src/components/shared/ArtistCard.vue

@@ -63,6 +63,7 @@ defineProps<{
     font-size: 0.9rem;
     font-weight: 510;
     max-width: 7rem;
+    text-transform: capitalize;
   }
 }
 

src/components/shared/SongItem.vue

@@ -117,15 +117,6 @@ function emitUpdate(track: Track) {
   user-select: none;
   -moz-user-select: none;
 
-  .context {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 45px;
-    width: 45px;
-    background-color: red;
-  }
-
   @include tablet-landscape {
     grid-template-columns: 1.5rem 1.5fr 1fr 1.5fr;
   }
@@ -145,6 +136,8 @@ function emitUpdate(track: Track) {
   }
 
   .song-album {
+    word-break: break-all;
+
     .album {
       cursor: pointer;
       max-width: max-content;
@@ -156,6 +149,8 @@ function emitUpdate(track: Track) {
   }
 
   .song-artists {
+    word-break: break-all;
+
     .artist {
       cursor: pointer;
     }
@@ -199,6 +194,7 @@ function emitUpdate(track: Track) {
 
     .title {
       cursor: pointer;
+      word-break: break-all;
     }
   }
 

src/components/shared/TrackItem.vue

@@ -122,7 +122,13 @@ const playThis = (track: Track) => {
     margin: 0 0.5rem 0 0;
     background-image: url(../../assets/images/null.webp);
   }
+
+  .title {
+    word-break: break-all;
+  }
+
   .artist {
+    word-break: break-all;
     font-size: small;
     color: rgba(255, 255, 255, 0.637);
   }