default to qeueu tab in right sidebar

- fix progress bar issue on chrome
- fix image not showing on media notification

src/assets/css/ProgressBar.scss

@@ -10,33 +10,27 @@ input[type="range"] {
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
 
-    height: 0.9rem;
-    width: 0.9rem;
-    border-radius: 0 50% 50% 0;
+    height: 0;
+    width: 0.8rem;
+    border-radius: 50%;
     background: $accent;
   }
 
   &::-moz-range-thumb {
     -webkit-appearance: none;
-    height: 0rem;
+
+    height: 0;
     border-radius: 50%;
     background: $accent;
     border: none;
   }
 
-  &:hover {
-    &::-moz-range-thumb {
-      height: .8rem;
-    }
-  }
-
   &::-ms-thumb {
     -webkit-appearance: none;
-    display: none;
 
-    height: 0.9rem;
-    width: 0.9rem;
-    border-radius: 0 50% 50% 0;
+    height: 0;
+    width: 0.8rem;
+    border-radius: 50%;
     background: $accent;
     border: none;
   }

src/assets/css/global.scss

@@ -17,6 +17,7 @@ body {
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   overflow: hidden;
+  image-rendering: -webkit-optimize-contrast;
 }
 
 .heading {
@@ -61,7 +62,6 @@ a {
   display: none;
 }
 
-
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
@@ -85,8 +85,6 @@ a {
   }
 }
 
-
-
 .gsearch-input {
   grid-area: search-input;
   border-left: solid 1px $gray3;
@@ -164,7 +162,7 @@ a {
 }
 
 .shadow-sm {
-  box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.452);
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
 }
 
 .shadow-md {

src/components/LeftSidebar/nowPlaying.vue

@@ -35,6 +35,20 @@ const queue = useQStore();
   position: relative;
   text-transform: capitalize;
 
+  &:hover {
+    ::-moz-range-thumb {
+      height: 0.8rem;
+    }
+
+    ::-webkit-slider-thumb {
+      height: 0.8rem;
+    }
+
+    ::-ms-thumb {
+      height: 0.8rem;
+    }
+  }
+
   .headin {
     font-weight: bold;
     font-size: 0.9rem;
@@ -84,7 +98,7 @@ const queue = useQStore();
     position: absolute;
     font-size: 0.75rem;
     width: max-content;
-    padding: 0.2rem .35rem;
+    padding: 0.2rem 0.35rem;
     top: 13.25rem;
     left: 1.5rem;
     background-color: $black;

src/components/RightSideBar/Queue.vue

@@ -53,6 +53,7 @@ function playThis(track: Track) {
       height: 100%;
       padding: $small;
       overflow: auto;
+      overflow-x: hidden;
       scrollbar-color: grey transparent;
     }
   }

src/components/RightSideBar/queue/upNext.vue

@@ -40,7 +40,6 @@ const props = defineProps<{
 
   &:hover {
     background-color: $accent;
-    border: 1px solid transparent;
 
     .h {
       background-color: $black;

src/components/contextMenu.vue

@@ -90,12 +90,12 @@ const context = useContextStore();
       right: -13rem;
       width: 13rem;
       top: -0.5rem;
-      max-height: 21.25rem;
+      height: 23.5rem;
 
       padding: $small !important;
       background-color: $context;
       transform: scale(0);
-      transform-origin: left;
+      transform-origin: top left;
     }
 
     .icon {
@@ -177,14 +177,14 @@ const context = useContextStore();
 .context-normalizedY {
   .context-item > .children {
     transform-origin: bottom right;
+      top: -.5rem;
   }
 }
 
 .context-many-kids {
   .context-item > .children {
-    top: -0.5rem;
+    // top: -0.5rem;
     overflow-y: auto;
-    scrollbar-width: none;
   }
 }
 </style>

src/components/shared/SongItem.vue

@@ -116,6 +116,7 @@ function emitUpdate(track: Track) {
   height: 3.75rem;
   text-align: left;
   gap: $small;
+  user-select: none;
 
   .context {
     position: fixed;

src/composables/mediaNotification.ts

@@ -1,5 +1,5 @@
 import { Track } from "../interfaces.js";
-import perks from "./perks.js";
+import { paths } from "../config";
 
 export default (
   track: Track,
@@ -13,32 +13,32 @@ export default (
       artist: track.artists.join(", "),
       artwork: [
         {
-          src: track.image,
+          src: paths.images.thumb + track.image,
           sizes: "96x96",
           type: "image/jpeg",
         },
         {
-          src: track.image,
+          src: paths.images.thumb + track.image,
           sizes: "128x128",
           type: "image/webp",
         },
         {
-          src: track.image,
+          src: paths.images.thumb + track.image,
           sizes: "192x192",
           type: "image/webp",
         },
         {
-          src: track.image,
+          src: paths.images.thumb + track.image,
           sizes: "256x256",
           type: "image/webp",
         },
         {
-          src: track.image,
+          src: paths.images.thumb + track.image,
           sizes: "384x384",
           type: "image/webp",
         },
         {
-          src: track.image,
+          src: paths.images.thumb + track.image,
           sizes: "512x512",
           type: "image/webp",
         },

src/stores/tabs.ts

@@ -10,7 +10,7 @@ const tablist = {
 export default defineStore("tabs", {
   state: () => ({
     tabs: tablist,
-    current: tablist.home,
+    current: tablist.queue,
   }),
   actions: {
     changeTab(tab: string) {

v1-pre-alpha.release.md

@@ -0,0 +1,3 @@
+### Features required in the first release
+
+- [ ]