From 301f07bda5c84376b9406a16df9dcbf03d6f1832 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 10 May 2022 13:20:22 +0300
Subject: [PATCH] some UI refactors

---
 src/assets/css/global.scss                     |  7 +++++--
 src/components/Notification.vue                |  6 +++---
 src/components/RightSideBar/Search.vue         |  2 +-
 src/components/RightSideBar/SearchInput.vue    |  2 +-
 src/components/RightSideBar/Tabs.vue           |  2 +-
 .../RightSideBar/queue/playingFrom.vue         |  2 +-
 src/components/Search/AlbumGrid.vue            |  3 +--
 src/components/Search/ArtistGrid.vue           |  3 +--
 src/components/Search/Options.vue              |  2 --
 src/components/Search/TracksGrid.vue           |  3 +--
 src/components/modals/NewPlaylist.vue          |  2 +-
 src/components/shared/AlbumCard.vue            |  7 +++----
 src/contexts/track_context.ts                  |  2 +-
 src/stores/queue.ts                            | 18 ++++++++++++++++--
 14 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index a29af901..37ce93f5 100644
--- a/src/assets/css/global.scss
+++ b/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 {
diff --git a/src/components/Notification.vue b/src/components/Notification.vue
index e56c8fc7..0551f7af 100644
--- a/src/components/Notification.vue
+++ b/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>
diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue
index 3eca7b5d..ead15982 100644
--- a/src/components/RightSideBar/Search.vue
+++ b/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"
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 4cab8f85..b7a8d52f 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/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;
diff --git a/src/components/RightSideBar/Tabs.vue b/src/components/RightSideBar/Tabs.vue
index a66beb16..9f88aee7 100644
--- a/src/components/RightSideBar/Tabs.vue
+++ b/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%;
diff --git a/src/components/RightSideBar/queue/playingFrom.vue b/src/components/RightSideBar/queue/playingFrom.vue
index 8ba6dcf2..f8917f56 100644
--- a/src/components/RightSideBar/queue/playingFrom.vue
+++ b/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;
diff --git a/src/components/Search/AlbumGrid.vue b/src/components/Search/AlbumGrid.vue
index a7477997..35a8974d 100644
--- a/src/components/Search/AlbumGrid.vue
+++ b/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;
diff --git a/src/components/Search/ArtistGrid.vue b/src/components/Search/ArtistGrid.vue
index a8fc93d9..e13597f4 100644
--- a/src/components/Search/ArtistGrid.vue
+++ b/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;
diff --git a/src/components/Search/Options.vue b/src/components/Search/Options.vue
index 2d50ffde..92819fbf 100644
--- a/src/components/Search/Options.vue
+++ b/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;
diff --git a/src/components/Search/TracksGrid.vue b/src/components/Search/TracksGrid.vue
index e4b8f023..0eddae54 100644
--- a/src/components/Search/TracksGrid.vue
+++ b/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 {
diff --git a/src/components/modals/NewPlaylist.vue b/src/components/modals/NewPlaylist.vue
index 187a3cab..e2e90e2a 100644
--- a/src/components/modals/NewPlaylist.vue
+++ b/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
     );
   }
diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue
index 9268ada9..20646af3 100644
--- a/src/components/shared/AlbumCard.vue
+++ b/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 {
diff --git a/src/contexts/track_context.ts b/src/contexts/track_context.ts
index 89112bcc..99a35a0f 100644
--- a/src/contexts/track_context.ts
+++ b/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,
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index 5a9bab41..c02ba872 100644
--- a/src/stores/queue.ts
+++ b/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);
     },
   },