redesign search tab switcher buttons

~ imitate ubuntu-style tabbed buttons

src/assets/scss/Global/app-grid.scss

@@ -18,7 +18,7 @@
 #acontent {
   grid-area: content;
   max-width: 1955px;
-  overflow: hidden auto;
+  overflow: hidden scroll;
   margin-top: -$small;
 
   .nav {

src/assets/scss/Global/index.scss

@@ -1,11 +1,5 @@
-@import
-"./app-grid.scss",
-"./controls.scss",
-"./inputs.scss",
-"./scrollbars.scss",
-"./state.scss",
-"./variants.scss",
-"./basic.scss";
+@import "./app-grid.scss", "./controls.scss", "./inputs.scss",
+  "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss";
 
 :root {
   --separator: #ffffff46;
@@ -22,6 +16,7 @@ body {
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "SF Compact Display" !important;
   font-size: 1rem;
   overflow: hidden;
   image-rendering: -webkit-optimize-contrast;

src/assets/scss/index.scss

@@ -1,4 +1,4 @@
-@import
+@import 
 "./mixins.scss",
 "./variables",
 "./moz.scss",
@@ -6,3 +6,9 @@
 "./BottomBar/BottomBar.scss",
 "./Global"
 ;
+
+
+@font-face {
+    font-family: "SF Compact Display";
+    src: url("../sf-compact.woff") format("woff");
+}

src/components/RightSideBar/Home/Recommendation.vue

@@ -3,7 +3,7 @@
     <div class="heading">Similar tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song.artist">
-        <img src="../../../assets/images/null.webp" class="rounded" />
+        <img src="" class="rounded" />
         <div class="tags">
           <div class="title">{{ song.title }}</div>
           <div class="artist">{{ song.artist }}</div>

src/components/RightSideBar/Queue.vue

@@ -71,20 +71,15 @@ onUpdated(() => {
 
     .scrollable-r {
       height: 100%;
-      padding: $small;
       overflow: hidden;
       display: grid;
       grid-template-rows: max-content 1fr;
-      gap: $medium;
 
       .inner {
-        height: 100%;
-        margin-right: -$small;
         overflow: scroll;
-        margin-top: 1rem;
-        padding-right: $small;
         overflow-x: hidden;
         scrollbar-color: grey transparent;
+        margin: 1rem 0;
       }
     }
   }

src/components/RightSideBar/Queue/QueueActions.vue

@@ -33,8 +33,8 @@ const queue = useQueueStore();
   display: flex;
   justify-content: space-between;
   gap: $small;
-  margin-bottom: -1.25rem;
-  margin-top: $small;
+  margin: 1rem;
+  margin-bottom: 0;
 
   .action {
     padding: $smaller;

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;
 

src/components/shared/ArtistCard.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="xartist" :class="{ _is_on_sidebar: alt }">
-    <div
-      class="artist-image image bg-black-sm"
-      :style="{ backgroundImage: `url('${imguri + artist.image}')` }"
-    ></div>
+    <img class="artist-image shadow-sm" :src="imguri + artist.image" alt="" />
     <div>
       <p class="artist-name t-center ellipsis">{{ artist.name }}</p>
     </div>
@@ -38,22 +35,18 @@ defineProps<{
   cursor: pointer;
 
   .artist-image {
-    width: 8em;
-    height: 8em;
+    width: 8rem;
+    height: 8rem;
     border-radius: 60%;
     margin-bottom: $small;
-    background-size: 8rem 8rem;
-    background-position: center;
-    background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;
     transition-delay: 0.25s;
+    object-fit: cover;
   }
 
   &:hover {
     .artist-image {
-      background-position: 50% 20%;
       border-radius: 20%;
-      background-size: 10rem 10rem;
     }
   }
 

src/components/shared/TrackItem.vue

@@ -36,15 +36,15 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { ContextSrc } from "../../composables/enums";
-import { putCommas } from "../../composables/perks";
-import trackContext from "../../contexts/track_context";
-import { Track } from "../../interfaces";
+import { ContextSrc } from "@/composables/enums";
+import { putCommas } from "@/composables/perks";
+import trackContext from "@/contexts/track_context";
+import { Track } from "@/interfaces";
 
-import { paths } from "../../config";
-import useContextStore from "../../stores/context";
-import useModalStore from "../../stores/modal";
-import useQueueStore from "../../stores/queue";
+import { paths } from "@/config";
+import useContextStore from "@/stores/context";
+import useModalStore from "@/stores/modal";
+import useQueueStore from "@/stores/queue";
 
 const contextStore = useContextStore();
 const imguri = paths.images.thumb;
@@ -84,7 +84,7 @@ const playThis = (track: Track) => {
 
 <style lang="scss">
 .currentInQueue {
-  background-color: $gray3;
+  background: linear-gradient(37deg, $gray4, $gray3, $gray3);
 }
 
 .contexton {
@@ -93,17 +93,15 @@ const playThis = (track: Track) => {
 }
 
 .track-item {
-  display: flex;
+  display: grid;
+  grid-template-columns: min-content 1fr;
   align-items: center;
-  border-radius: 0.5rem;
-  position: relative;
-  height: 4rem;
-  padding: 0.5rem 0.5rem 0.5rem 4rem;
-  text-transform: capitalize;
+  padding: $small 1rem;
+  // text-transform: capitalize;
 
   &:hover {
     cursor: pointer;
-    background-color: $gray4 !important;
+    background: linear-gradient(37deg, $gray4, $gray3, $gray3);
   }
 
   hr {
@@ -111,9 +109,11 @@ const playThis = (track: Track) => {
     margin: 0.1rem;
   }
 
+  // .tags {
+  //   border: solid 1px;
+  // }
+
   .album-art {
-    position: absolute;
-    left: $small;
     display: flex;
     align-items: center;
     justify-content: center;

src/main.js

@@ -1,5 +1,4 @@
 import "./assets/scss/index.scss";
-import "./registerServiceWorker";
 
 import { createPinia } from "pinia";
 import { createApp } from "vue";

src/registerServiceWorker.js

@@ -1,32 +0,0 @@
-/* eslint-disable no-console */
-
-import { register } from 'register-service-worker'
-
-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated () {
-      console.log('New content is available; please refresh.')
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
-}