some UI refactors

src/assets/css/global.scss

@@ -38,7 +38,9 @@ a {
 }
 
 .border {
-  border: solid 1px $gray3;
+  // border: solid 1px $gray5;
+  background-color: $black;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
 }
 
 .separator {
@@ -98,7 +100,8 @@ a {
   width: 15rem;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
-  border-right: solid 1px $gray3;
+  // border-right: solid 1px $gray3;
+  background-color: $black;
 }
 
 .bottom-bar {

src/components/Notification.vue

@@ -37,7 +37,7 @@ const notifStore = useNotifStore();
   height: 3.5rem;
   bottom: 2rem;
   padding: $small;
-  background-color: $green;
+  background: linear-gradient(to top right, #021b79, #0575e6);
   display: grid;
   place-items: center;
   align-items: center;
@@ -50,10 +50,10 @@ const notifStore = useNotifStore();
 }
 
 .notif-error {
-  background-color: $red;
+  background: linear-gradient(to top right, #cf0b25, #e60518);
 }
 
 .notif-info {
-  background-color: $gray2;
+  background: linear-gradient(to top right, $gray4, $gray3);
 }
 </style>

src/components/RightSideBar/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="right-search">
     <Options />
-    <div class="scrollable" ref="search_thing">
+    <div class="scrollable rounded" ref="search_thing">
       <TracksGrid
         v-if="tracks.tracks.length"
         :more="tracks.more"

src/components/RightSideBar/SearchInput.vue

@@ -66,7 +66,7 @@ function removeLastFilter() {
       width: 100%;
       border: none;
       line-height: 2.25rem;
-      background-color: $gray5;
+      background-color: $black;
       color: inherit;
       font-size: 1rem;
       padding-left: 0.75rem;

src/components/RightSideBar/Tabs.vue

@@ -26,7 +26,7 @@ const tabs = useTabStore();
   height: 4.25rem;
 
   .cont {
-    background-color: $primary;
+    background-color: $black;
     display: flex;
     gap: $small;
     height: 100%;

src/components/RightSideBar/queue/playingFrom.vue

@@ -109,7 +109,7 @@ function goTo() {
   cursor: pointer;
   position: relative;
   transition: all .2s ease;
-  background-color: $accent;
+  background-color: $black;
 
   &:hover {
     background-position: -4rem;

src/components/Search/AlbumGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results">
+  <div class="albums-results border">
     <div class="heading">Albums</div>
     <div class="grid">
       <AlbumCard v-for="album in albums" :key="album" :album="album" />
@@ -39,7 +39,6 @@ export default {
   margin-top: $small;
   padding: $small;
   overflow-x: hidden;
-  border: solid 1px $gray3;
 
   .result-item:hover {
     background-color: $gray4;

src/components/Search/ArtistGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="artists-results">
+  <div class="artists-results border">
     <div class="heading">Artists</div>
     <div class="grid">
       <ArtistCard v-for="artist in artists" :key="artist" :artist="artist" />
@@ -38,7 +38,6 @@ export default {
   border-radius: 0.5rem;
   padding: $small;
   margin-bottom: $small;
-  border: solid 1px $gray3;
 
   .xartist {
     background-color: $gray;

src/components/Search/Options.vue

@@ -48,8 +48,6 @@ const options = [
 .right-search .options {
   display: flex;
   margin-bottom: $small;
-    border: solid 1px $gray3;
-  // background: $gray3;
 
   .item {
     margin: $small;

src/components/Search/TracksGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tracks-results" v-if="tracks">
+  <div class="tracks-results border" v-if="tracks">
     <div class="heading">Tracks</div>
     <TransitionGroup class="items" name="list">
       <TrackItem
@@ -49,7 +49,6 @@ function updateQueue(track: Track) {
 .right-search .tracks-results {
   border-radius: 0.5rem;
   padding: $small;
-  border: 1px solid $gray3;
 
   .list-enter-active,
   .list-leave-active {

src/components/modals/NewPlaylist.vue

@@ -46,7 +46,7 @@ function create(e: Event) {
     });
   } else {
     new Notification(
-      "A Playlist name can not be empty",
+      "Playlist name can't be empty",
       NotifType.Error
     );
   }

src/components/shared/AlbumCard.vue

@@ -6,7 +6,7 @@
     }"
     class="result-item"
   >
-    <div class="_idk">
+    <div class="img">
       <div
         class="album-art image"
         :style="{
@@ -38,12 +38,11 @@ defineProps<{
   padding: $small;
   border-radius: 0.75rem;
   text-align: left !important;
-  background-color: $gray;
+  background-color: $gray4;
   color: #ffffffde !important;
   transition: all 0.5s ease;
-  // border: solid 1px $gray3;
 
-  ._idk {
+  .img {
     position: relative;
 
     &:hover {

src/contexts/track_context.ts

@@ -135,8 +135,8 @@ export default async (
 
   const options: Option[] = [
     add_to_playlist,
-    add_to_q,
     play_next,
+    add_to_q,
     add_to_fav,
     separator,
     go_to_folder,

src/stores/queue.ts

@@ -1,5 +1,7 @@
 import { defineStore } from "pinia";
 import state from "../composables/state";
+import { useNotifStore, NotifType } from "./notification";
+
 import {
   Track,
   fromFolder,
@@ -202,11 +204,23 @@ export default defineStore("Queue", {
       addQToLocalStorage(this.from, this.tracks);
     },
     playTrackNext(track: Track) {
-      const current = this.tracks.findIndex(
+      const Toast = useNotifStore();
+      const currentid = this.tracks.findIndex(
         (t: Track) => t.trackid === this.current.trackid
       );
 
-      this.tracks.splice(current + 1, 0, track);
+      const next: Track = this.tracks[currentid + 1];
+
+      if (next.trackid === track.trackid) {
+        Toast.showNotification("Track is already queued", NotifType.Info);
+        return;
+      }
+
+      this.tracks.splice(currentid + 1, 0, track);
+      Toast.showNotification(
+        `Added ${track.title} to queue`,
+        NotifType.Success
+      );
       addQToLocalStorage(this.from, this.tracks);
     },
   },