major redesign: move to rounded and extra spaceous UI

+ fix `play next` bug
+ add new folder banner image
+ add new now playing component
+ move to gray4 for accent color
+ increase image sizes, for clean UI

src/components/shared/AlbumCard.vue

@@ -29,7 +29,6 @@ defineProps<{
   display: grid;
   gap: $small;
   padding: $small;
-  background-color: $gray4;
   transition: all 0.5s ease;
   border-radius: .7rem;
 

src/components/shared/ArtistCard.vue

@@ -32,16 +32,13 @@ defineProps<{
   border-radius: 0.75rem;
   display: grid;
   justify-content: center;
-  padding: 1rem $small;
   cursor: pointer;
 
   .artist-image {
-    width: 8rem;
-    height: 8rem;
+    width: 100%;
     border-radius: 60%;
     margin-bottom: $small;
     transition: all 0.5s ease-in-out;
-    transition-delay: 0.25s;
     object-fit: cover;
   }
 
@@ -50,27 +47,5 @@ defineProps<{
       border-radius: 20%;
     }
   }
-
-  .artist-name {
-    margin: 0;
-    font-size: 0.9rem;
-    font-weight: 510;
-    max-width: 7rem;
-    text-transform: capitalize;
-  }
-}
-
-._is_on_sidebar {
-  background-color: $gray4 !important;
-
-  .artist-image {
-    width: 7rem;
-    height: 7rem;
-
-    @include for-desktop-down {
-      width: 6rem;
-      height: 6rem;
-    }
-  }
 }
 </style>

src/components/shared/Loader.vue

@@ -2,14 +2,18 @@
   <div
     class="loaderx"
     :class="{ loader: loader.loading, not_loader: !loader.loading }"
+    @click="modal.showSearchModal"
   >
     <div v-if="!loader.loading">🦋</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import useLoaderStore from "../../stores/loader";
+import useLoaderStore from "@/stores/loader";
+import useModalStore from "@/stores/modal";
+
 const loader = useLoaderStore();
+const modal = useModalStore();
 </script>
 
 <style lang="scss">

src/components/shared/Option.vue

@@ -1,21 +1,12 @@
 <template>
-  <div
-    class="drop-btn rounded shadow-sm"
-    id="option-drop"
-    @click="showDropdown"
-  >
-    <div
-      class="image drop-icon"
-      :class="{ clicked: clicked && src == ContextSrc.PHeader }"
-    ></div>
-  </div>
+  <button id="option-drop" @click.stop.prevent="showDropdown">
+    <MoreSvg />
+  </button>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { ContextSrc } from "../../composables/enums";
-
+import { onMounted } from "vue";
+import MoreSvg from "../../assets/icons/more.svg";
 let elem: DOMRect;
-const clicked = ref(false);
 
 defineProps<{
   src?: string;
@@ -26,47 +17,24 @@ const emit = defineEmits<{
 }>();
 
 onMounted(() => {
-  elem = document.getElementById("option-drop").getBoundingClientRect();
+  const el = document.getElementById("option-drop") as HTMLElement;
+  elem = el.getBoundingClientRect();
 });
 
 function showDropdown(e: Event) {
-  e.preventDefault();
-  e.stopImmediatePropagation();
-
   emit("showDropdown", {
-    clientX: elem.left + 45,
+    clientX: elem.left + 35,
     clientY: elem.top,
   });
-
-  clicked.value = true;
 }
 </script>
 <style lang="scss">
-.drop-btn {
-  width: 2.5rem;
-  background-color: $accent;
-  transition: all 0.5s ease-in-out;
-  cursor: pointer;
+#option-drop {
+  display: flex;
+  align-items: center;
 
-  .drop-icon {
-    transition: all 0.25s;
-    padding: $small;
-    height: 2.5rem;
-    width: 2.5rem;
-    background-image: url("../../assets/icons/right-arrow.svg");
-    background-size: 1.75rem;
-    transform: rotate(90deg);
-  }
-
-  .clicked {
-    transform: rotate(0deg);
-  }
-
-  &:hover {
-    background-color: $green;
-    .image {
-      transform: rotate(0deg);
-    }
+  svg {
+    transform: scale(1.25);
   }
 }
 </style>

src/components/shared/PlayBtn.vue

@@ -1,8 +1,10 @@
 <template>
-  <div
-    class="play-btn rounded shadow-sm"
+  <button
+    class="play-btn rounded-md"
     @click="usePlayFrom(source, useQStore, store)"
-  ></div>
+  >
+    <PlaySvg />
+  </button>
 </template>
 
 <script setup lang="ts">
@@ -12,24 +14,19 @@ import usePlaylistStore from "@/stores/pages/playlist";
 import usePlayFrom from "@/composables/usePlayFrom";
 import useQStore from "@/stores/queue";
 
+import PlaySvg from "../../assets/icons/play.svg";
+
 defineProps<{
   source: playSources;
   store: typeof useAlbumStore | typeof usePlaylistStore;
 }>();
 </script>
+
 <style lang="scss">
 .play-btn {
-  height: 2.25rem;
-  background-color: $gray3;
-  background-image: url("../../assets/icons/play.svg");
-  background-size: 1.75rem;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  transition: all 0.25s ease-in-out;
+  height: 100%;
   aspect-ratio: 1;
-
-  &:hover {
-    background-color: $accent;
-  }
+  display: grid;
+  place-items: center;
 }
 </style>

src/components/shared/PlayBtnRect.vue

@@ -1,15 +1,15 @@
 <template>
-  <div
-    class="playbtnrect rounded"
+  <button
+    class="playbtnrect"
     @click="usePlayFrom(source, useQStore, store)"
     :style="{
-      backgroundColor: background.color,
+      background: background?.color,
     }"
-    :class="{ playbtnrectdark: background.isDark }"
+    :class="{ playbtnrectdark: background?.isDark }"
   >
     <playBtnSvg />
     <div class="text">Play</div>
-  </div>
+  </button>
 </template>
 
 <script setup lang="ts">
@@ -40,24 +40,9 @@ defineProps<{
   width: 6rem;
   display: flex;
   align-items: center;
-  height: 2.5rem;
-  padding-left: 0.75rem;
-  cursor: pointer;
-  user-select: none;
-  color: $white;
+  justify-content: center;
   transition: all 0.5s ease-in-out;
-
-  .icon {
-    height: 2rem;
-    width: 2rem;
-    background-image: url("../../assets/icons/play.svg");
-  }
-
-  &:hover {
-    .icon {
-      transform: rotate(120deg);
-    }
-  }
+  color: $white;
 }
 
 .playbtnrectdark {

src/components/shared/SongItem.vue

@@ -19,7 +19,7 @@
           loading="lazy"
           :src="imguri + track.image"
           alt=""
-          class="album-art image rounded"
+          class="album-art image rounded-sm"
         />
         <div
           class="now-playing-track-indicator image"

src/components/shared/TrackItem.vue

@@ -11,7 +11,7 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="album-art">
-      <img :src="paths.images.thumb + track.image" alt="" class="rounded" />
+      <img :src="paths.images.thumb + track.image" alt="" class="rounded-sm" />
       <div
         class="now-playing-track-indicator image"
         v-if="isCurrent"