modify spacing in grids

src/components/FolderView/FolderList.vue

@@ -23,6 +23,6 @@ defineProps<{
 #f-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  gap: $medium;
+  gap: 1.5rem;
 }
 </style>

src/components/PlaylistsList/PlaylistCard.vue

@@ -30,12 +30,18 @@ const props = defineProps<{
 
 <style lang="scss">
 .p-card {
-  background-color: $playlist-card-bg;
+  background-color: $gray5;
   display: grid;
   grid-template-rows: 1fr max-content;
   padding: 1rem;
   gap: $small;
 
+  &:hover {
+    transition: all .25s ease;
+    background-color: $darkestblue;
+    background-blend-mode: screen;
+  }
+
   img {
     width: 100%;
     aspect-ratio: 1;

src/components/RightSideBar/Main.vue

@@ -1,11 +1,12 @@
 <template>
   <div
-    class="r-sidebar rounded border"
+    class="r-sidebar border"
     :style="{
       marginBottom: !settings.show_alt_np ? '-1rem' : '',
     }"
   >
-    <div class="r-content">
+  <SearchInput />
+    <div class="r-content noscroll">
       <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
         <DashBoard />
       </div>
@@ -25,6 +26,7 @@ import Queue from "./Queue.vue";
 import DashBoard from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
 import useSettingsStore from "@/stores/settings";
+import SearchInput from "./SearchInput.vue";
 
 const tabs = useTabStore();
 const settings = useSettingsStore();
@@ -34,10 +36,26 @@ const settings = useSettingsStore();
 .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;
+
+  .gsearch-input {
+    height: 42px;
+    margin: $small;
+    margin-bottom: 1rem;
+  }
 
   .r-content {
     width: 100%;
     height: 100%;
+    background-color: $gray;
 
     .r-search {
       height: 100%;

src/components/RightSideBar/NowPlayingRight.vue

@@ -9,13 +9,13 @@
             :to="{
               name: Routes.album,
               params: {
-                hash: queue.currenttrack.albumhash,
+                hash: queue.currenttrack?.albumhash || ' ',
               },
             }"
           >
             <img
               class="rounded-sm"
-              :src="paths.images.thumb.small + queue.currenttrack.image"
+              :src="paths.images.thumb.small + queue.currenttrack?.image"
               alt=""
             />
           </RouterLink>
@@ -26,16 +26,16 @@
           <div class="with-title">
             <div class="time time-current">
               <span>
-                {{ formatSeconds(queue.duration.current) }}
+                {{ formatSeconds(queue.duration?.current) }}
               </span>
             </div>
             <div class="tags">
               <div class="title ellip">
-                {{ queue.currenttrack.title }}
+                {{ queue.currenttrack?.title || 'Hello there' }}
               </div>
               <ArtistName
-                :artists="queue.currenttrack.artist"
-                :albumartist="queue.currenttrack.albumartist"
+                :artists="queue.currenttrack?.artist || []"
+                :albumartist="queue.currenttrack?.albumartist || 'Welcome to alice'"
                 class="artist"
               />
             </div>

src/components/RightSideBar/SearchInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="gsearch-input">
+  <div class="gsearch-input">
     <div id="ginner" tabindex="0" class="bg-primary">
       <button
         :title="
@@ -72,7 +72,7 @@ function removeFocusedClass() {
 </script>
 
 <style lang="scss">
-#gsearch-input {
+.gsearch-input {
   display: grid;
   grid-template-columns: 1fr max-content;
   border-radius: 3rem;