break down global.scss into smaller files

+ rename css folder to scss

src/components/RightSideBar/Home/Main.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import Recommendations from "./Recommendation.vue";
-import UpNext from "../queue/upNext.vue";
+import UpNext from "../Queue/upNext.vue";
 import useQStore from "../../../stores/queue";
 const queue = useQStore();
 </script>

src/components/RightSideBar/Home/Recommendation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="r-tracks rounded border">
+  <div class="r-tracks rounded bg-black">
     <div class="heading">Similar tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song.artist">

src/components/RightSideBar/NowPlaying.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="now-playing border shadow-lg">
+  <div class="now-playing bg-black shadow-lg">
     <div class="art-tags">
       <div class="duration">{{ formatSeconds(current.length) }}</div>
       <div
           :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
-          class="album-art image border"
+          class="album-art image bg-black"
       ></div>
       <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
-        <div class="separator no-border"></div>
+        <div class="separator no-bg-black"></div>
         <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
               artist

src/components/RightSideBar/Queue.vue

@@ -2,7 +2,18 @@
   <div class="up-next">
     <div class="r-grid">
       <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
-      <div class="scrollable-r border rounded">
+      <div class="queue-actions rounded bg-black">
+        <div class="left">
+          <button class="clear-queue action">Clear</button>
+          <button class="shuffle-queue action">Shuffle</button>
+          <button class="shuffle-queue action">Shuffle</button>
+          <button class="shuffle-queue action">Go to Mix</button>
+        </div>
+        <div class="right">
+          <button class="shuffle-queue action">Save as Playlist</button>
+        </div>
+      </div>
+      <div class="scrollable-r bg-black rounded">
         <div
           class="inner"
           @mouseenter="setMouseOver(true)"
@@ -25,9 +36,9 @@
 
 <script setup lang="ts">
 import TrackItem from "../shared/TrackItem.vue";
-import useQStore from "../../stores/queue";
-import PlayingFrom from "./queue/playingFrom.vue";
-import UpNext from "./queue/upNext.vue";
+import useQStore from "@/stores/queue";
+import PlayingFrom from "./Queue/playingFrom.vue";
+import UpNext from "./Queue/upNext.vue";
 import { onUpdated, ref } from "vue";
 import { focusElem } from "@/composables/perks";
 
@@ -59,9 +70,24 @@ onUpdated(() => {
     position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: max-content 1fr max-content;
+    grid-template-rows: max-content max-content 1fr max-content;
     gap: $small;
 
+    .queue-actions {
+      display: flex;
+      justify-content: space-between;
+      gap: $small;
+      padding: $small;
+
+      .action {
+        background-color: $accent;
+        padding: $smaller;
+        border-radius: $smaller;
+        font-size: 0.8rem;
+        padding: inherit 1rem;
+      }
+    }
+
     .scrollable-r {
       height: 100%;
       padding: $small 0 $small $small;

src/components/RightSideBar/Queue/playingFrom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="playing-from" class="rounded" @click="goTo">
+  <div id="playing-from" class="bg-black rounded" @click="goTo">
     <div class="h">
       <div class="icon image" :class="from.icon"></div>
       Playing from
@@ -18,8 +18,8 @@ import {
   fromAlbum,
   fromPlaylist,
   fromSearch,
-} from "../../../interfaces";
-import { FromOptions } from "../../../composables/enums";
+} from "@/interfaces";
+import { FromOptions } from "@/composables/enums";
 import { useRouter } from "vue-router";
 import { computed } from "@vue/reactivity";
 

src/components/RightSideBar/Queue/upNext.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main-item border" @click="playNext">
+  <div class="main-item bg-black" @click="playNext">
     <div class="h">Up Next</div>
     <div class="itemx shadow">
       <div
@@ -22,12 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { Track } from "../../../interfaces";
-import {putCommas} from "../../../composables/perks";
-import { paths } from "../../../config";
-const imguri = paths.images.thumb;
+import { putCommas } from "@/composables/perks";
+import { paths } from "@/config";
+import { Track } from "@/interfaces";
 
-const props = defineProps<{
+const imguri = paths.images.thumb;
+defineProps<{
   next: Track;
   playNext: () => void;
 }>();

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="artists-results border">
+  <div class="artists-results bg-black">
     <div class="grid">
       <ArtistCard
         v-for="artist in search.artists.value"
@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import ArtistCard from "../../shared/ArtistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 const search = useSearchStore();
 
 function loadMore() {

src/components/RightSideBar/Search/Main.vue

@@ -15,13 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import TabsWrapper from "./TabsWrapper.vue";
-import Tab from "./Tab.vue";
-import TracksGrid from "./TracksGrid.vue";
 import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
-import "@/assets/css/Search/Search.scss";
-
+import Tab from "./Tab.vue";
+import TabsWrapper from "./TabsWrapper.vue";
+import TracksGrid from "./TracksGrid.vue";
 </script>
 
 <style lang="scss">
@@ -31,21 +29,6 @@ import "@/assets/css/Search/Search.scss";
   width: auto;
   height: 100%;
 
-  .no-res {
-    text-align: center;
-    display: grid;
-    height: calc(100% - $small);
-    place-items: center;
-    font-size: 2rem;
-    transition: all 0.3s ease;
-    line-height: 4rem !important;
-
-    .highlight {
-      padding: $small;
-      background-color: rgb(29, 26, 26);
-    }
-  }
-
   .heading {
     padding: $medium;
     border-radius: $small;

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results border">
+  <div class="albums-results bg-black">
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"
@@ -12,9 +12,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import PCard from "../../playlists/PlaylistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 
 const search = useSearchStore();