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/AlbumView/Header.vue

@@ -4,7 +4,7 @@
     ref="albumheaderthing"
     :style="{
       backgroundImage: `linear-gradient(
-        37deg, ${props.album.colors[0]}, ${props.album.colors[3]}
+        37deg, ${album.colors[0]}, ${album.colors[3]}
       )`,
     }"
   >

src/components/BottomBar/BottomBar.vue

@@ -1,33 +1,72 @@
 <template>
-  <div class="b-bar">
-    <div class="grid rounded">
-      <div class="controlsx rounded">
-        <div class="controls-bottom">
-          <HotKeys />
+  <div class="b-bar bg-black pad-medium rounded">
+    <div class="info">
+      <img
+        :src="paths.images.thumb + queue.currenttrack?.image"
+        alt=""
+        class="rounded"
+      />
+      <div class="tags">
+        <div class="np-artist ellip">
+          <span v-for="artist in putCommas(queue.currenttrack?.artists || ['Artist'])">
+            {{ artist }}
+          </span>
         </div>
-        <div class="progress progress-bottom">
-          <span class="durationx">{{ formatSeconds(q.track.current_time) }}</span>
-          <Progress />
-          <span class="durationx">{{ formatSeconds(q.length) }}</span>
-        </div>
-        <div class="r-group">
-          <div id="heart" class="image ctrl-btn"></div>
-          <div id="add-to" class="image ctrl-btn"></div>
-          <div id="repeat" class="image ctrl-btn"></div>
+        <div class="np-title ellip">
+          {{ queue.currenttrack?.title || "Track title" }}
         </div>
       </div>
-      <div class="volume-group"></div>
     </div>
+    <Progress />
   </div>
 </template>
 
 <script setup lang="ts">
 import "@/assets/scss/BottomBar/BottomBar.scss";
-import { formatSeconds } from "@/utils";
-import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import { formatSeconds, putCommas } from "@/utils";
 import Progress from "../LeftSidebar/NP/Progress.vue";
 
 import useQStore from "@/stores/queue";
+import { paths } from "@/config";
 
-const q = useQStore();
+const queue = useQStore();
 </script>
+
+<style lang="scss">
+.b-bar {
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  border-radius: 1rem;
+  gap: 1rem;
+  padding: 1rem;
+  padding-bottom: 2rem;
+
+  .info {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    gap: 1rem;
+
+    img {
+      height: 6rem;
+      width: auto;
+    }
+
+    .tags {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      .np-title {
+        font-size: 1.15rem;
+        font-weight: bold;
+        margin-bottom: $small;
+      }
+
+      .np-artist {
+        opacity: 0.75;
+        font-size: 0.9rem;
+      }
+    }
+  }
+}
+</style>

src/components/LeftSidebar/nowPlaying.vue

@@ -141,8 +141,8 @@ const showContextMenu = (e: Event) => {
     font-size: 0.75rem;
     width: max-content;
     padding: 0.2rem 0.35rem;
-    top: 14.25rem;
-    left: 1.5rem;
+    top: 14rem;
+    left: 2rem;
     background-color: $black;
     border-radius: $smaller;
     box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);

src/components/PlaylistView/Header.vue

@@ -12,14 +12,7 @@
     <div class="carddd">
       <div class="info">
         <div class="btns">
-          <PlayBtnRect
-            :source="playSources.playlist"
-            :store="usePStore"
-            :background="{
-              color: '#fff',
-              isDark: true,
-            }"
-          />
+          <PlayBtnRect :source="playSources.playlist" :store="usePStore" />
           <Option @showDropdown="showDropdown" :src="context.src" />
         </div>
         <div class="duration">

src/components/RightSideBar/Queue.vue

@@ -23,7 +23,7 @@
           </TransitionGroup>
         </div>
       </div>
-      <PlayingFrom :from="queue.from" />
+      <!-- <PlayingFrom :from="queue.from" /> -->
     </div>
   </div>
 </template>
@@ -87,8 +87,8 @@ onUpdated(() => {
     height: 100%;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: max-content 1fr max-content;
-    gap: $small;
+    grid-template-rows: max-content 1fr;
+    gap: 1rem;
 
     .scrollable-r {
       height: 100%;

src/components/RightSideBar/Queue/upNext.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="next-track bg-black"
+    class="next-track bg-black rounded"
     :class="{ contexton: context_on }"
     @click="playNext"
     @contextmenu.prevent="showMenu"
   >
     <div class="nextup abs">next up</div>
-    <img :src="paths.images.thumb + track?.image" class="rounded" />
+    <img :src="paths.images.thumb + track?.image" class="rounded-sm" />
     <div class="tags">
       <div class="title ellip">{{ track?.title || "Don't click here" }}</div>
       <div class="artist ellip" v-if="track">
@@ -43,13 +43,12 @@ function showMenu(e: Event) {
 
 <style lang="scss">
 .next-track {
-  border-radius: 0.5rem;
   position: relative;
 
   display: grid;
   grid-template-columns: max-content 1fr;
   gap: 1rem;
-  padding: $small;
+  padding: 1rem;
   width: 100%;
   cursor: pointer;
 

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -49,7 +49,7 @@ defineProps<{
 
 .search-results-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
 }
 </style>

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="right-tabs" class="bg-black rounded">
     <div class="tab-buttons-wrapper">
-      <div id="tabheaders" class="rounded noscroll">
+      <div id="tabheaders" class="rounded-sm noscroll">
         <div
           class="tab"
           v-for="slot in $slots.default()"
@@ -44,7 +44,7 @@ const s = useSearchStore();
     justify-content: space-around;
     margin: 1rem;
     width: max-content;
-    background: linear-gradient(37deg, $gray3, $gray4, $gray3);
+    background: linear-gradient(37deg, $gray1, $gray2, $gray1);
     height: 2rem;
 
     & > * {
@@ -55,6 +55,7 @@ const s = useSearchStore();
       display: flex;
       align-items: center;
       justify-content: center;
+      user-select: none;
 
       cursor: pointer;
       transition: all 0.3s ease;

src/components/RightSideBar/SearchInput.vue

@@ -1,76 +1,55 @@
 <template>
-  <div id="gsearch-input">
+  <div
+    id="gsearch-input"
+    class="bg-black rounded"
+    :class="{ 'search-focused': focused }"
+  >
     <div id="ginner" tabindex="0">
-      <div class="icon image"></div>
+      <SearchSvg />
       <input
         id="globalsearch"
-        class="rounded"
         v-model="search.query"
         placeholder="Search your library"
         type="search"
-        @focus="focusThis()"
-        @blur="unfocusThis()"
+        @focus="focused = true"
+        @blur="focused = false"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { ref } from "vue";
 import useSearchStore from "../../stores/search";
+import SearchSvg from "../../assets/icons/search.svg";
 
 const search = useSearchStore();
-let input: HTMLInputElement;
-
-onMounted(() => {
-  input = document.getElementById("ginner") as HTMLInputElement;
-});
-
-function focusThis() {
-  input.classList.add("focused");
-}
-
-function unfocusThis() {
-  input.classList.remove("focused");
-}
+const focused = ref(false);
 </script>
 
 <style lang="scss">
 #gsearch-input {
-  display: flex;
-  height: max-content;
+  padding: $smaller;
 
   #ginner {
     width: 100%;
-    border-radius: 0.4rem;
-    position: relative;
     display: flex;
-    background-color: $red;
-    background-color: $gray4;
-
-    .icon {
-      width: 2.25rem;
-      aspect-ratio: 1;
-      background-image: url("../../assets/icons/search.svg");
-      background-size: 1.5rem;
-      margin-left: $smaller;
-    }
+    align-items: center;
+    gap: $smaller;
+    margin-left: $small;
 
     input {
-      display: flex;
-      align-items: center;
       width: 100%;
       border: none;
       line-height: 2.25rem;
       color: inherit;
       font-size: 1rem;
       background-color: transparent;
-      outline: 2px solid transparent;
+      outline: none;
     }
   }
-
-  .focused {
-    outline: solid $accent;
-  }
+}
+.search-focused {
+  outline: solid $accent;
 }
 </style>

src/components/modal.vue

@@ -8,13 +8,13 @@
         v-if="modal.component == modal.options.newPlaylist"
         :track="modal.props.track"
         @hideModal="hideModal"
-        @title="title"
+        @setTitle="setTitle"
       />
       <UpdatePlaylist
         :playlist="modal.props"
         v-if="modal.component == modal.options.updatePlaylist"
         @hideModal="hideModal"
-        @title="title"
+        @setTitle="setTitle"
       />
       <WelcomeModal v-if="modal.component == modal.options.welcome" />
     </div>
@@ -33,7 +33,7 @@ const modal = useModalStore();
  * Sets the modal title
  * @param title
  */
-function title(title: string) {
+function setTitle(title: string) {
   console.log(title);
   modal.setTitle(title);
 }

src/components/modals/NewPlaylist.vue

@@ -30,15 +30,15 @@ const route = useRoute();
 const playlistStore = usePlaylistStore();
 
 onMounted(() => {
-  document.getElementById("modal-playlist-name-input").focus();
+  (document.getElementById("modal-playlist-name-input") as HTMLElement).focus();
 });
 
 const emit = defineEmits<{
-  (e: "title", title: string): void;
+  (e: "setTitle", title: string): void;
   (e: "hideModal"): void;
 }>();
 
-emit("title", "New Playlist");
+emit("setTitle", "New Playlist");
 
 /**
  * Create a new playlist. If this modal is called with a track,

src/components/modals/updatePlaylist.vue

@@ -65,15 +65,15 @@ const props = defineProps<{
 }>();
 
 onMounted(() => {
-  document.getElementById("modal-playlist-name-input").focus();
+  (document.getElementById("modal-playlist-name-input") as HTMLElement).focus();
 });
 
 const emit = defineEmits<{
-  (e: "title", title: string): void;
+  (e: "setTitle", title: string): void;
   (e: "hideModal"): void;
 }>();
 
-emit("title", "Update Playlist");
+emit("setTitle", "Update Playlist");
 
 function selectFiles() {
   const input = document.getElementById(

src/components/nav/NavBar.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="topnav">
     <div class="left">
-      <div class="btn">
-        <NavButtons />
-      </div>
-
+      <NavButtons />
       <div class="info">
         <APTitle v-show="showAPTitle" />
         <Playlists v-show="$route.name == Routes.playlists" />
@@ -15,16 +12,12 @@
     <div class="center rounded">
       <Loader />
     </div>
-    <!-- <div class="right">
-      <Search />
-    </div> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import NavButtons from "./NavButtons.vue";
 import Loader from "../shared/Loader.vue";
-// import Search from "./Search.vue";
 import { useRoute } from "vue-router";
 import { ref, watch } from "vue";
 import { Routes } from "@/composables/enums";
@@ -82,13 +75,11 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
-  gap: 1rem;
-  overflow: hidden;
 
   .left {
     display: grid;
     grid-template-columns: max-content 1fr;
-    overflow: hidden;
+    gap: 1rem;
 
     .info {
       overflow: hidden;
@@ -106,11 +97,5 @@ watch(
     place-items: center;
     margin-right: 1rem;
   }
-
-  .right {
-    width: 100%;
-    display: flex;
-    gap: $small;
-  }
 }
 </style>

src/components/nav/NavButtons.vue

@@ -1,40 +1,41 @@
 <template>
-  <div id="back-forward">
-    <div class="back image" @click="$router.back()"></div>
-    <div class="forward image" @click="$router.forward()"></div>
+  <div id="back-forward" class="">
+    <button class="back" @click="$router.back()">
+      <ArrowSvg />
+    </button>
+    <button class="forward" @click="$router.forward()">
+      <ArrowSvg />
+    </button>
   </div>
 </template>
 
+<script setup lang="ts">
+import ArrowSvg from "../../assets/icons/right-arrow.svg";
+</script>
+
 <style lang="scss">
 #back-forward {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
-  padding-right: 1rem;
-  margin-right: $small;
+  padding-right: 1.25rem;
   border-right: 1px solid $gray3;
+  width: 100%;
 
-  & > div {
-    background-color: $gray4;
-    border-radius: $small;
-    height: 2.25rem;
-    width: 2.25rem;
-    cursor: pointer;
-    background-size: 2rem;
-    transition: all .25s ease-in-out;
+  & > * {
+    background-color: $gray3;
+    padding: $small;
+    height: 100%;
+    aspect-ratio: 1;
+    border-radius: $medium;
 
-    &:hover {
-      background-color: $accent;
+    svg {
+      margin: auto;
     }
   }
 
   .back {
-    background-image: url("../../assets/icons/right-arrow.svg");
     transform: rotate(180deg);
   }
-
-  .forward {
-    background-image: url("../../assets/icons/right-arrow.svg");
-  }
 }
 </style>

src/components/nav/Titles/APTitle.vue

@@ -47,5 +47,7 @@ const things = computed(() => {
   display: flex;
   align-items: center;
   gap: $small;
+  outline: solid 1px $gray3;
+  height: 100%;
 }
 </style>

src/components/playlists/NewPlaylistCard.vue

@@ -1,55 +1,28 @@
 <template>
   <div
-    class="p-card rounded"
-    id="new-playlist-card"
+    class="p-card new-playlist-card rounded bg-black"
     @click="Modal.showNewPlaylistModal()"
   >
-    <div class="gradient rounded"></div>
-    <div class="plus image p-image"></div>
-    <div>New Playlist</div>
-    <div></div>
+    <PlusSvg />
   </div>
 </template>
 
 <script setup lang="ts">
 import useModalStore from "../../stores/modal";
+import PlusSvg from "../../assets/icons/plus.svg";
 
 const Modal = useModalStore();
 </script>
 
 <style lang="scss">
-#new-playlist-card {
-  display: grid;
-  place-items: center;
-  position: relative;
+.new-playlist-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
 
-  .gradient {
-    position: absolute;
-    width: calc(100% - 1.5rem);
-    top: 0.75rem;
-    background-image: linear-gradient(37deg, $red, $blue);
-    background-size: 100%;
-    transition: all 0.5s ease-in-out;
-    aspect-ratio: 1;
-  }
-
-  .image {
-    background-image: url("../../assets/icons/plus.svg");
-    background-size: 5rem;
-    z-index: 1;
-    transition: all 0.5s ease-in-out;
-    background-color: transparent;
-    margin-bottom: $small;
-  }
-
-  &:hover {
-    .gradient {
-      background-size: 29rem;
-    }
-    .image {
-      transform: rotate(180deg);
-    }
+  svg {
+    transform: scale(3);
   }
 }
 </style>

src/components/playlists/PlaylistCard.vue

@@ -2,7 +2,7 @@
   <router-link
     :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
     :playlist="props.playlist"
-    class="p-card rounded"
+    class="p-card rounded bg-black"
   >
     <div
       class="image p-image rounded shadow-sm"
@@ -37,10 +37,9 @@ const props = defineProps<{
 <style lang="scss">
 .p-card {
   width: 100%;
-  padding: 0.75rem;
+  padding: 1rem;
   transition: all 0.25s ease;
   position: relative;
-  background-color: #1c1c1e80;
 
   .p-image {
     min-width: 100%;
@@ -72,7 +71,7 @@ const props = defineProps<{
   }
 
   &:hover {
-    background-color: $gray5;
+    background-color: $gray2;
 
     .drop {
       transition-delay: 0.75s;

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"