rename bg-black to bg-primary

+ rename BottomBar to NowPlayingRight

src/App.vue

@@ -8,7 +8,7 @@
     <div id="acontent" class="rounded">
       <router-view />
     </div>
-    <BottomBar />
+    <NowPlayingRight />
     <SearchInput />
     <RightSideBar />
     <!-- <Tabs /> -->
@@ -33,7 +33,7 @@ import Notification from "@/components/Notification.vue";
 
 import RightSideBar from "@/components/RightSideBar/Main.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
-import BottomBar from "@/components/BottomBar/BottomBar.vue";
+import NowPlayingRight from "@/components/RightSideBar/NowPlayingRight.vue";
 import LeftSidebar from "./components/LeftSidebar/index.vue";
 
 import { readLocalStorage, writeLocalStorage } from "@/utils";

src/assets/scss/Global/basic.scss

@@ -43,7 +43,7 @@
   display: flex;
 }
 
-.bg-black {
+.bg-primary {
   background-color: $gray4;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.425)
 }

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);

src/composables/enums.ts

@@ -28,7 +28,7 @@ export enum ContextSrc {
 export enum Routes {
   home = "Home",
   folder = "FolderView",
-  playlists = "Playlists",
+  playlists = "PlaylistList",
   playlist = "PlaylistView",
   albums = "AlbumsView",
   album = "AlbumView",

src/router/index.ts

@@ -8,7 +8,7 @@ import AlbumView from "@/views/album/index.vue";
 import ArtistsExplorer from "@/views/ArtistsExplorer.vue";
 import FolderView from "@/views/FolderView.vue";
 import Home from "@/views/Home.vue";
-import Playlists from "@/views/Playlists.vue";
+import PlaylistList from "@/views/PlaylistList.vue";
 import PlaylistView from "@/views/playlist/index.vue";
 import SettingsView from "@/views/SettingsView.vue";
 import { createRouter, createWebHashHistory } from "vue-router";
@@ -24,7 +24,7 @@ const routes = [
     path: "/folder/:path",
     name: "FolderView",
     component: FolderView,
-    beforeEnter: async (to) => {
+    beforeEnter: async (to: any) => {
       state.loading.value = true;
       await useFStore()
         .fetchAll(to.params.path)
@@ -39,8 +39,8 @@ const routes = [
   },
   {
     path: "/playlists",
-    name: "Playlists",
-    component: Playlists,
+    name: "PlaylistList",
+    component: PlaylistList,
     beforeEnter: async () => {
       state.loading.value = true;
       await usePStore()
@@ -54,7 +54,7 @@ const routes = [
     path: "/playlist/:pid",
     name: "PlaylistView",
     component: PlaylistView,
-    beforeEnter: async (to) => {
+    beforeEnter: async (to: any) => {
       state.loading.value = true;
       await usePTrackStore()
         .fetchAll(to.params.pid)
@@ -72,7 +72,7 @@ const routes = [
     path: "/albums/:hash",
     name: "AlbumView",
     component: AlbumView,
-    beforeEnter: async (to) => {
+    beforeEnter: async (to: any) => {
       state.loading.value = true;
       const store = useAStore();
 

src/settings/general/now-playing.ts

@@ -4,16 +4,16 @@ import useSettingsStore from "@/stores/settings";
 const settings = useSettingsStore;
 
 export default [
-  {
-    title: "Use left now playing card",
-    type: SettingType.switch,
-    source: () => settings().use_side_np,
-    action: () => settings().toggleUseSideNP(),
-  },
   {
     title: "Use right bottom now playing card",
     type: SettingType.switch,
     source: () => settings().use_right_np,
     action: () => settings().toggleUseRightNP(),
   },
+  {
+    title: "Use left now playing card",
+    type: SettingType.switch,
+    source: () => settings().use_side_np,
+    action: () => settings().toggleUseSideNP(),
+  },
 ];

src/utils/useVisibility.ts

@@ -3,7 +3,7 @@ import { useIntersectionObserver } from "@vueuse/core";
 import { Ref, watch } from "vue";
 
 export default function useVisibility(
-  elem: Ref<HTMLElement>,
+  elem: Ref<HTMLElement | null>,
   callback: (state: boolean) => void
 ) {
   const visible = ref(false);

src/views/PlaylistList.vue

@@ -12,9 +12,9 @@
 </template>
 
 <script setup lang="ts">
-import PlaylistCard from "@/components/playlists/PlaylistCard.vue";
+import PlaylistCard from "@/components/PlaylistsList/PlaylistCard.vue";
 
-import NewPlaylistCard from "@/components/playlists/NewPlaylistCard.vue";
+import NewPlaylistCard from "@/components/PlaylistsList/NewPlaylistCard.vue";
 import usePStore from "@/stores/pages/playlists";
 const pStore = usePStore();
 </script>

src/views/SettingsView.vue

@@ -23,11 +23,6 @@ import Content from "../components/SettingsView/Content.vue";
 
   .scrollable {
     overflow: auto;
-    margin-top: 1rem;
-
-    @include for-desktop-down {
-      margin-top: 0;
-    }
   }
 }
 </style>