major redesign: move to rounded and extra spaceous UI

+ fix `play next` bug
+ add new folder banner image
+ add new now playing component
+ move to gray4 for accent color
+ increase image sizes, for clean UI

src/components/RightSideBar/Queue.vue

@@ -23,7 +23,7 @@
           </TransitionGroup>
         </div>
       </div>
-      <PlayingFrom :from="queue.from" />
+      <!-- <PlayingFrom :from="queue.from" /> -->
     </div>
   </div>
 </template>
@@ -87,8 +87,8 @@ onUpdated(() => {
     height: 100%;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: max-content 1fr max-content;
-    gap: $small;
+    grid-template-rows: max-content 1fr;
+    gap: 1rem;
 
     .scrollable-r {
       height: 100%;

src/components/RightSideBar/Queue/upNext.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="next-track bg-black"
+    class="next-track bg-black rounded"
     :class="{ contexton: context_on }"
     @click="playNext"
     @contextmenu.prevent="showMenu"
   >
     <div class="nextup abs">next up</div>
-    <img :src="paths.images.thumb + track?.image" class="rounded" />
+    <img :src="paths.images.thumb + track?.image" class="rounded-sm" />
     <div class="tags">
       <div class="title ellip">{{ track?.title || "Don't click here" }}</div>
       <div class="artist ellip" v-if="track">
@@ -43,13 +43,12 @@ function showMenu(e: Event) {
 
 <style lang="scss">
 .next-track {
-  border-radius: 0.5rem;
   position: relative;
 
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: 1rem;
-  padding: $small;
+  padding: 1rem;
   width: 100%;
   cursor: pointer;
 

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -49,7 +49,7 @@ defineProps<{
 
 .search-results-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
 }
 </style>

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="right-tabs" class="bg-black rounded">
     <div class="tab-buttons-wrapper">
-      <div id="tabheaders" class="rounded noscroll">
+      <div id="tabheaders" class="rounded-sm noscroll">
         <div
           class="tab"
           v-for="slot in $slots.default()"
@@ -44,7 +44,7 @@ const s = useSearchStore();
     justify-content: space-around;
     margin: 1rem;
     width: max-content;
-    background: linear-gradient(37deg, $gray3, $gray4, $gray3);
+    background: linear-gradient(37deg, $gray1, $gray2, $gray1);
     height: 2rem;
 
     & > * {
@@ -55,6 +55,7 @@ const s = useSearchStore();
       display: flex;
       align-items: center;
       justify-content: center;
+      user-select: none;
 
       cursor: pointer;
       transition: all 0.3s ease;

src/components/RightSideBar/SearchInput.vue

@@ -1,76 +1,55 @@
 <template>
-  <div id="gsearch-input">
+  <div
+    id="gsearch-input"
+    class="bg-black rounded"
+    :class="{ 'search-focused': focused }"
+  >
     <div id="ginner" tabindex="0">
-      <div class="icon image"></div>
+      <SearchSvg />
       <input
         id="globalsearch"
-        class="rounded"
         v-model="search.query"
         placeholder="Search your library"
         type="search"
-        @focus="focusThis()"
-        @blur="unfocusThis()"
+        @focus="focused = true"
+        @blur="focused = false"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { ref } from "vue";
 import useSearchStore from "../../stores/search";
+import SearchSvg from "../../assets/icons/search.svg";
 
 const search = useSearchStore();
-let input: HTMLInputElement;
-
-onMounted(() => {
-  input = document.getElementById("ginner") as HTMLInputElement;
-});
-
-function focusThis() {
-  input.classList.add("focused");
-}
-
-function unfocusThis() {
-  input.classList.remove("focused");
-}
+const focused = ref(false);
 </script>
 
 <style lang="scss">
 #gsearch-input {
-  display: flex;
-  height: max-content;
+  padding: $smaller;
 
   #ginner {
     width: 100%;
-    border-radius: 0.4rem;
-    position: relative;
     display: flex;
-    background-color: $red;
-    background-color: $gray4;
-
-    .icon {
-      width: 2.25rem;
-      aspect-ratio: 1;
-      background-image: url("../../assets/icons/search.svg");
-      background-size: 1.5rem;
-      margin-left: $smaller;
-    }
+    align-items: center;
+    gap: $smaller;
+    margin-left: $small;
 
     input {
-      display: flex;
-      align-items: center;
       width: 100%;
       border: none;
       line-height: 2.25rem;
       color: inherit;
       font-size: 1rem;
       background-color: transparent;
-      outline: 2px solid transparent;
+      outline: none;
     }
   }
-
-  .focused {
-    outline: solid $accent;
-  }
+}
+.search-focused {
+  outline: solid $accent;
 }
 </style>