fix watchdoge.py add_track()

src/components/BottomBar/BottomBar.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div class="b-bar">
     <div class="grid rounded">
       <div class="controlsx rounded">
@@ -34,4 +34,4 @@ import playAudio from "../../composables/playAudio";
 
 const current_pos = playAudio.current_time;
 const formatSeconds = perks.formatSeconds;
-</script>
+</script> -->

src/components/FolderView/Header.vue

@@ -117,7 +117,7 @@ export default {
     align-items: center;
 
     border-radius: $small;
-    background-color: rgb(24, 22, 22);
+    background-color: $primary;
     padding: $small $small $small 2.25rem;
 
     .icon {

src/components/LeftSidebar/NP/HotKeys.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import playAudio from "../../composables/playAudio";
+import playAudio from '../../../composables/playAudio';
 
 const playPause = playAudio.playPause;
 const playNext = playAudio.playNext;
@@ -43,19 +43,19 @@ const isPlaying = playAudio.playing;
     }
 
   #previous {
-    background-image: url(../../assets/icons/previous.svg);
+    background-image: url(../../../assets/icons/previous.svg);
   }
 
   .play-pause {
-    background-image: url(../../assets/icons/play.svg);
+    background-image: url(../../../assets/icons/play.svg);
   }
 
   .isPlaying {
-    background-image: url(../../assets/icons/pause.svg);
+    background-image: url(../../../assets/icons/pause.svg);
   }
 
   #next {
-    background-image: url(../../assets/icons/next.svg);
+    background-image: url(../../../assets/icons/next.svg);
   }
 }
 </style>

src/components/LeftSidebar/NP/Progress.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from "vue";
-import playAudio from "../../composables/playAudio";
+import playAudio from "../../../composables/playAudio";
 const pos = ref(playAudio.pos);
 
 const seek = () => {

src/components/LeftSidebar/NP/otherKeys.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="other-keys">
+    <div class="keys rounded playlist image"></div>
+    <div class="keys rounded heart"></div>
+    <div class="keys rounded folder"></div>
+  </div>
+</template>
+
+<style lang="scss">
+.l_ .other-keys {
+//   border: solid;
+  height: 2.5rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .keys {
+    height: 2rem;
+    width: 100%;
+    background-size: 1.5rem;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &:hover {
+      background-color: $red;
+    }
+  }
+  .playlist {
+    background-image: url("../../../assets/icons/plus.svg");
+  }
+}
+</style>

src/components/LeftSidebar/Navigation.vue

@@ -12,7 +12,6 @@
         </div>
       </div>
     </router-link>
-    <hr />
   </div>
 </template>
 
@@ -38,10 +37,13 @@ const menus = [
     name: "folders",
     route_name: "FolderView",
   },
+  {
+    name: "tags",
+  },
   {
     name: "settings",
     route_name: "SettingsView",
-  },
+  }
 ];
 
 const props = defineProps({
@@ -85,34 +87,6 @@ const props = defineProps({
 
     &:hover {
       background-color: $gray;
-
-      #home-icon {
-        background-color: rgba(145, 58, 58, 0.555);
-      }
-
-      #albums-icon {
-        background-color: rgba(113, 58, 145, 0.555);
-      }
-
-      #artists-icon {
-        background-color: rgba(13, 72, 139, 0.555);
-      }
-
-      #playlists-icon {
-        background-color: rgba(206, 13, 132, 0.555);
-      }
-
-      #mixes-icon {
-        background-color: rgba(0, 85, 81, 0.555);
-      }
-
-      #folders-icon {
-        background-color: rgba(90, 89, 3, 0.596);
-      }
-
-      #settings-icon {
-        background-color: rgba(129, 106, 106, 0.596);
-      }
     }
 
     .nav-icon {
@@ -126,16 +100,10 @@ const props = defineProps({
     .in {
       display: flex;
       align-items: center;
-    }
 
-    #home-icon,
-    #albums-icon,
-    #artists-icon,
-    #playlists-icon,
-    #mixes-icon,
-    #folders-icon,
-    #settings-icon {
-      background-size: 1.5rem;
+      & > * {
+        background-size: 1.5rem;
+      }
     }
 
     #home-icon {
@@ -164,10 +132,10 @@ const props = defineProps({
     #settings-icon {
       background-image: url(../../assets/icons/settings.svg);
     }
+    #tags-icon {
+      background-image: url(../../assets/icons/tag.svg);
+    }
   }
 }
 
-.side-nav-container hr {
-  display: none;
-}
 </style>

src/components/LeftSidebar/nowPlaying.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l_ rounded" v-if="!props.collapsed">
     <div class="headin">Now Playing</div>
-    <div class="menu image rounded"></div>
+    <div class="button menu image rounded"></div>
     <div class="separator no-border"></div>
     <div>
       <div class="art">
@@ -24,8 +24,8 @@
 import { ref } from "vue";
 import state from "../../composables/state";
 import SongCard from "./SongCard.vue";
-import HotKeys from "../shared/HotKeys.vue";
-import Progress from "../shared/Progress.vue";
+import HotKeys from "./NP/HotKeys.vue";
+import Progress from "./NP/Progress.vue";
 
 const current = ref(state.current);
 const props = defineProps({
@@ -51,21 +51,24 @@ const props = defineProps({
     font-size: 0.9rem;
   }
 
-  .menu {
+  .button {
     height: 2rem;
     width: 2rem;
-    right: $small;
-    top: $small;
     position: absolute;
-    background-image: url("../../assets/icons/right-arrow.svg");
     background-size: 1.5rem;
-    transform: rotate(90deg);
+    top: $small;
 
     &:hover {
       background-color: $gray2;
     }
   }
 
+  .menu {
+    right: $small;
+    background-image: url("../../assets/icons/right-arrow.svg");
+    transform: rotate(90deg);
+  }
+
   br {
     height: 0rem;
   }