redesign search tab switcher buttons

~ imitate ubuntu-style tabbed buttons

src/components/RightSideBar/Search/AlbumGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results border">
+  <div class="albums-results">
     <div class="grid">
       <AlbumCard
         v-for="album in search.albums.value"
@@ -27,9 +27,8 @@ function loadMore() {
 <style lang="scss">
 .right-search .albums-results {
   border-radius: 0.5rem;
-  margin-top: $small;
-  padding: $small;
   overflow-x: hidden;
+  margin: 0 1rem;
 
   .result-item:hover {
     background-color: $gray4;
@@ -38,6 +37,7 @@ function loadMore() {
   .grid {
     grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
+    justify-content: flex-start;
     gap: 0.75rem;
   }
 }

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="artists-results bg-black">
+  <div class="artists-results" v-if="search.artists.value.length">
     <div class="grid">
       <ArtistCard
         v-for="artist in search.artists.value"
@@ -26,15 +26,22 @@ function loadMore() {
 
 <style lang="scss">
 .right-search .artists-results {
-  border-radius: 0.5rem;
-  padding: $small;
-  margin-bottom: $small;
+  display: grid;
+  margin: 0 1rem;
 
   .xartist {
     background-color: $gray;
+
+    .artist-image {
+      width: 7rem;
+      height: 7rem;
+      aspect-ratio: 1 !important;
+      object-fit: cover;
+    }
   }
 
   .grid {
+    display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 0.75rem;
   }

src/components/RightSideBar/Search/Main.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
+      <Tab name="Top Results">
+        <ArtistGrid />
+      </Tab>
       <Tab name="tracks">
         <TracksGrid />
       </Tab>
@@ -10,6 +13,9 @@
       <Tab name="artists">
         <ArtistGrid />
       </Tab>
+      <Tab name="Playlists">
+        <ArtistGrid />
+      </Tab>
     </TabsWrapper>
   </div>
 </template>

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,16 +1,19 @@
 <template>
-  <div id="right-tabs">
-    <div id="tabheaders">
-      <div
-        class="tab rounded"
-        v-for="slot in $slots.default()"
-        :key="slot.key"
-        @click="s.changeTab(slot.props.name)"
-        :class="{ activetab: slot.props.name === s.currentTab }"
-      >
-        {{ slot.props.name }}
+  <div id="right-tabs" class="bg-black rounded">
+    <div class="tab-buttons-wrapper">
+      <div id="tabheaders" class="rounded noscroll">
+        <div
+          class="tab"
+          v-for="slot in $slots.default()"
+          :key="slot.key"
+          @click="s.changeTab(slot.props.name)"
+          :class="{ activetab: slot.props.name === s.currentTab }"
+        >
+          {{ slot.props.name }}
+        </div>
       </div>
     </div>
+
     <div id="tab-content">
       <slot />
     </div>
@@ -26,30 +29,46 @@ const s = useSearchStore();
 <style lang="scss">
 #right-tabs {
   height: 100%;
-  margin-right: $small;
   display: grid;
   grid-template-rows: min-content 1fr;
 
-  #tabheaders {
+  .tab-buttons-wrapper {
     display: flex;
-    gap: $small;
-    margin: $small 0;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #tabheaders {
+    display: grid;
+    grid-template-columns: repeat(5, max-content);
+    justify-content: space-around;
+    margin: 1rem;
+    width: max-content;
+    background: linear-gradient(37deg, $gray3, $gray4, $gray3);
+    height: 2rem;
+
+    & > * {
+      border-left: solid 1px $gray3;
+    }
 
     .tab {
-      background-color: $gray3;
-      padding: $small;
+      display: flex;
+      align-items: center;
+      justify-content: center;
       text-transform: capitalize;
       cursor: pointer;
-      display: flex;
-      justify-content: center;
       transition: all 0.3s ease;
-      width: 4rem;
+      padding: 0 $small;
+
+      &:first-child {
+        border-left: solid 1px transparent;
+      }
     }
 
     .activetab {
-      background-color: $accent;
-      width: 6rem;
+      background-color: $darkblue;
       transition: all 0.3s ease;
+      border-left: solid 1px transparent;
     }
   }
 
@@ -57,8 +76,8 @@ const s = useSearchStore();
     height: 100%;
     overflow: auto;
     overflow-x: hidden;
-    border-radius: $small;
-    background-color: $gray;
+    padding-bottom: 1rem;
+
     // overflow: hidden;
   }
 }

src/components/RightSideBar/Search/TracksGrid.vue

@@ -19,7 +19,6 @@
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "../../shared/TrackItem.vue";
 import useQStore from "../../../stores/queue";
-import { Track } from "../../../interfaces";
 import useSearchStore from "../../../stores/search";
 
 const queue = useQStore();
@@ -38,8 +37,6 @@ function updateQueue(index: number) {
 
 <style lang="scss">
 .right-search #tracks-results {
-  border-radius: 0.5rem;
-  padding: $small;
   height: 100% !important;
   overflow: hidden;