fix app grid layout issues

+ fully move now playing to bottom bar
+ add hover state to playlist card
+ handle playing tracks from queue page

src/components/RightSideBar/Main.vue

@@ -35,21 +35,16 @@ const settings = useSettingsStore();
 <style lang="scss">
 .r-sidebar {
   width: 100%;
-  overflow: hidden;
-  // padding: $small;
   display: grid;
   grid-template-rows: max-content 1fr;
-  // gap: 1rem;
-  margin-top: -$small;
-  border-top: none;
-  border-bottom: none;
   background-color: rgb(22, 22, 22);
   padding-bottom: 1rem;
+  border-top: none;
+  border-bottom: none;
 
   .gsearch-input {
-    height: 42px;
-    margin: $small;
-    margin-bottom: 1rem;
+    height: 2.5rem;
+    margin: 1rem;
   }
 
   .r-content {

src/components/RightSideBar/NowPlayingRight.vue

@@ -74,7 +74,7 @@ import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
 
 import HeartSvg from "../../assets/icons/heart.svg";
-import PlusSvg from "../../assets/icons/plus.svg";
+// import PlusSvg from "../../assets/icons/plus.svg";
 
 const queue = useQStore();
 const settings = useSettingsStore();
@@ -82,13 +82,28 @@ const settings = useSettingsStore();
 
 <style lang="scss">
 .b-bar {
-  height: 65px;
+  // height: 100%;
   background-color: rgb(22, 22, 22);
   display: grid;
   align-items: center;
   z-index: 1;
   border-top: solid 1px $gray3;
 
+
+  &:hover {
+    ::-moz-range-thumb {
+      height: 0.8rem;
+    }
+
+    ::-webkit-slider-thumb {
+      height: 0.8rem;
+    }
+
+    ::-ms-thumb {
+      height: 0.8rem;
+    }
+  }
+
   .centered {
     width: 50rem;
     display: grid;
@@ -181,7 +196,6 @@ const settings = useSettingsStore();
     }
 
     .buttons {
-      // width: 10rem;
       height: 3.25rem;
       margin-top: -$smaller;
       background-color: rgba(255, 255, 255, 0.048);