rename bg-black to bg-primary

+ rename BottomBar to NowPlayingRight

src/components/AlbumView/AlbumBio.vue

@@ -17,8 +17,8 @@
           loading="lazy"
         />
       </div>
-      <div class="bio rounded bg-black" v-html="bio" v-if="bio"></div>
-      <div class="bio rounded bg-black" v-else>No bio found</div>
+      <div class="bio rounded bg-primary" v-html="bio" v-if="bio"></div>
+      <div class="bio rounded bg-primary" v-else>No bio found</div>
     </div>
   </div>
 </template>

src/components/LeftSidebar/Navigation.vue

@@ -3,7 +3,7 @@
     <router-link
       v-for="menu in menus"
       :key="menu.name"
-      :to="{ name: menu.route_name, params: menu.params }"
+      :to="{ name: menu.route_name, params: menu?.params }"
     >
       <div class="nav-button" id="home-button">
         <div class="in">
@@ -19,11 +19,12 @@
 import PlaylistSvg from "../../assets/icons/playlist.svg";
 import FolderSvg from "../../assets/icons/folder.svg";
 import SettingsSvg from "../../assets/icons/settings.svg";
+import { Routes } from "@/composables/enums";
 
 const menus = [
   {
     name: "playlists",
-    route_name: "Playlists",
+    route_name: Routes.playlists,
     icon: PlaylistSvg,
   },
   {
@@ -34,7 +35,7 @@ const menus = [
   },
   {
     name: "settings",
-    route_name: "SettingsView",
+    route_name: Routes.settings,
     icon: SettingsSvg,
   },
 ];

src/components/PlaylistView/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-header image"
+    class="p-header image rounded noscroll"
     ref="playlistheader"
     :style="[
       {
@@ -13,7 +13,10 @@
       <div class="info">
         <div class="btns">
           <PlayBtnRect :source="playSources.playlist" :store="usePStore" />
-          <Option @showDropdown="showDropdown" :src="context.src" />
+          <Option
+            @showDropdown="showDropdown"
+            :src="context?.src || undefined"
+          />
         </div>
         <div class="duration">
           <span v-if="props.info.count == 0">No Tracks</span>
@@ -60,7 +63,7 @@ const imguri = paths.images.playlist;
 const context = useContextStore();
 const modal = useModalStore();
 const nav = useNavStore();
-const playlistheader = ref(null);
+const playlistheader = ref<HTMLElement | null>(null);
 
 useVisibility(playlistheader, nav.toggleShowPlay);
 
@@ -83,7 +86,6 @@ function showDropdown(e: any) {
   grid-template-columns: 1fr;
   height: 100%;
   position: relative;
-  border-radius: 0.75rem;
   color: $white;
   background-color: transparent;
   z-index: 0;
@@ -100,7 +102,6 @@ function showDropdown(e: any) {
       transparent,
       $black 90%
     );
-    border-radius: 0.5rem;
   }
 
   .last-updated {

src/components/PlaylistsList/NewPlaylistCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-card new-playlist-card rounded bg-black"
+    class="p-card new-playlist-card rounded bg-primary"
     @click="Modal.showNewPlaylistModal()"
   >
     <PlusSvg />
@@ -8,8 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import useModalStore from "../../stores/modal";
 import PlusSvg from "../../assets/icons/plus.svg";
+import useModalStore from "../../stores/modal";
 
 const Modal = useModalStore();
 </script>

src/components/PlaylistsList/PlaylistCard.vue

@@ -2,7 +2,7 @@
   <router-link
     :to="{ name: 'PlaylistView', params: { pid: props.playlist.playlistid } }"
     :playlist="props.playlist"
-    class="p-card rounded bg-black"
+    class="p-card rounded bg-primary"
   >
     <div
       class="image p-image rounded shadow-sm"

src/components/RightSideBar/Home/Recommendation.vue

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

src/components/RightSideBar/NowPlayingRight.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar bg-black pad-medium rounded" v-if="settings.use_right_np">
+  <div class="b-bar bg-primary pad-medium rounded" v-if="settings.use_right_np">
     <div class="info">
       <img
         :src="paths.images.thumb + queue.currenttrack?.image"
@@ -32,10 +32,10 @@
 
 <script setup lang="ts">
 import "@/assets/scss/BottomBar/BottomBar.scss";
+import useSettingsStore from "@/stores/settings";
 import { formatSeconds, putCommas } from "@/utils";
 import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
-import useSettingsStore from "@/stores/settings";
 
 import { paths } from "@/config";
 import useQStore from "@/stores/queue";

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <div class="scrollable-r bg-black rounded">
+      <div class="scrollable-r bg-primary rounded">
         <QueueActions />
         <div
           class="inner"

src/components/RightSideBar/Queue/playingFrom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="playing-from" class="bg-black rounded" @click="goTo">
+  <div id="playing-from" class="bg-primary rounded" @click="goTo">
     <div class="h">
       <div class="icon image" :class="from.icon"></div>
       Playing from

src/components/RightSideBar/Queue/upNext.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="next-track bg-black rounded"
+    class="next-track bg-primary rounded"
     :class="{ contexton: context_on }"
     @click="playNext"
     @contextmenu.prevent="showMenu"

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results bg-black">
+  <div class="albums-results bg-primary">
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="right-tabs" class="bg-black rounded">
+  <div id="right-tabs" class="bg-primary rounded">
     <div class="tab-buttons-wrapper">
       <div id="tabheaders" class="rounded-sm noscroll">
         <div

src/components/RightSideBar/SearchInput.vue

@@ -3,7 +3,7 @@
     <div
       id="ginner"
       tabindex="0"
-      class="bg-black rounded"
+      class="bg-primary rounded"
     >
       <input
         id="globalsearch"
@@ -13,7 +13,7 @@
       />
       <SearchSvg />
     </div>
-    <div class="buttons rounded bg-black">
+    <div class="buttons rounded bg-primary">
       <button @click="tabs.switchToQueue"><QueueSvg /></button>
       <button @click="tabs.switchToSearch"><SearchSvg /></button>
     </div>
@@ -21,9 +21,9 @@
 </template>
 
 <script setup lang="ts">
-import useSearchStore from "../../stores/search";
-import SearchSvg from "../../assets/icons/search.svg";
 import QueueSvg from "../../assets/icons/queue.svg";
+import SearchSvg from "../../assets/icons/search.svg";
+import useSearchStore from "../../stores/search";
 import useTabStore from "../../stores/tabs";
 
 const search = useSearchStore();

src/components/SettingsView/Group.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="settingsgroup">
     <div>
-      <h4>{{ group.title }}</h4>
-      <div class="desc">{{ group.desc }}</div>
+      <h4 v-if="group.title">{{ group.title }}</h4>
+      <div class="desc" v-if="group.desc">{{ group.desc }}</div>
     </div>
-    <div class="setting rounded bg-black pad-lg">
+    <div class="setting rounded bg-primary pad-lg">
       <div v-for="(setting, index) in group.settings" :key="index">
         <div class="title">
           {{ setting.title }}

src/components/SettingsView/Nav.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settingsnav">
-    <div class="buttongroup rounded bg-black">
+    <div class="buttongroup rounded bg-primary">
       <button v-for="(group, index) in settingGroups" :key="index">
         {{ group.title }}
       </button>

src/components/modals/NewPlaylist.vue

@@ -22,6 +22,7 @@ import { createNewPlaylist } from "../../composables/fetch/playlists";
 import { Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import usePlaylistStore from "@/stores/pages/playlists";
+import { Routes } from "@/composables/enums";
 
 const props = defineProps<{
   track?: Track;
@@ -47,7 +48,7 @@ emit("setTitle", "New Playlist");
  */
 function create(e: Event) {
   e.preventDefault();
-  const name = (e.target as HTMLFormElement).elements["name"].value;
+  const name = (e.target as any).elements["name"].value;
 
   if (name.trim()) {
     createNewPlaylist(name, props.track).then(({ success, playlist }) => {
@@ -55,7 +56,7 @@ function create(e: Event) {
 
       if (!success) return;
 
-      if (route.name !== "Playlists") return;
+      if (route.name !== Routes.playlists) return;
 
       setTimeout(() => {
         playlistStore.addPlaylist(playlist);