add menu button on songlist item

src/assets/css/_variables.scss

@@ -46,6 +46,11 @@ $danger: $red;
 $track-hover: $gray4;
 $context: $gray5;
 
+// SVG COLORS
+$default: $accent;
+$track-btn-svg: $red;
+$side-nav-svg: $red;
+
 // media query mixins
 @mixin phone-only {
   @media (max-width: 599px) {

src/components/LeftSidebar/Navigation.vue

@@ -77,7 +77,7 @@ const menus = [
   }
 
   svg > path {
-    fill: $red !important;
+    fill: $side-nav-svg;
   }
 }
 </style>

src/components/shared/SongItem.vue

@@ -52,7 +52,10 @@
       </div>
     </router-link>
     <div class="song-duration">
-      {{ formatSeconds(props.song.length) }}
+      <div class="text">{{ formatSeconds(props.song.length) }}</div>
+      <div class="options-icon circular">
+        <OptionSvg />
+      </div>
     </div>
   </div>
 </template>
@@ -63,6 +66,7 @@ import useContextStore from "../../stores/context";
 import useModalStore from "../../stores/modal";
 import useQueueStore from "../../stores/queue";
 import { ContextSrc } from "../../composables/enums";
+import OptionSvg from "../../assets/icons/more.svg";
 
 import { ref } from "vue";
 import trackContext from "../../contexts/track_context";
@@ -127,6 +131,10 @@ function emitUpdate(track: Track) {
 
   &:hover {
     background-color: $gray4;
+
+    .options-icon {
+      opacity: 1 !important;
+    }
   }
 
   .song-duration {
@@ -137,6 +145,7 @@ function emitUpdate(track: Track) {
 
   .song-album {
     word-break: break-all;
+    text-transform: capitalize;
 
     .album {
       cursor: pointer;
@@ -174,6 +183,34 @@ function emitUpdate(track: Track) {
   .song-duration {
     font-size: 0.9rem;
     width: 5rem !important;
+    display: flex;
+    align-items: center;
+    gap: $smaller;
+    opacity: 1;
+    transition: all 0.2s ease-in;
+
+    svg {
+      transition: all 0.2s ease-in;
+      transform: rotate(90deg);
+      stroke: $track-btn-svg;
+
+      circle {
+        fill: $track-btn-svg;
+      }
+    }
+
+    .options-icon {
+      opacity: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      aspect-ratio: 1;
+
+      &:hover {
+        background-color: $gray5;
+      }
+    }
   }
 
   .flex {

todo

@@ -18,20 +18,7 @@
 
 ### Notes
 
-- Maybe first process tags and store them to the database, then process albums from these tags.
-
-Like,this:
-1. Tag files
-2. Insert all into the database
-3. Fetch all albums
-4. Fetch all tracks
-5. Create prealbums
-6. Pop all processed albums
-7. Use the following procedure to process single album image:
-    7.1. Get a single album track, pop it from memory
-    7.2. Try ripping image,
-        (i). if successful: hurray! we won't have to go further.
-        (ii). if failed, try getting another track from the same album, try ripping image.
-        (iii). If failed, repeat (ii) until success, or until you run out of tracks. In that case, set album image to fallback.
 
 
+
+- Resolve album page using albumhash instead of album title and artist