rename bg-black to bg-primary

+ rename BottomBar to NowPlayingRight

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

@@ -0,0 +1,94 @@
+<template>
+  <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"
+        alt=""
+        class="rounded shadow-lg"
+      />
+      <div class="tags">
+        <div class="np-artist ellip">
+          <span
+            v-for="artist in putCommas(
+              queue.currenttrack?.artists || ['Artist']
+            )"
+          >
+            {{ artist }}
+          </span>
+        </div>
+        <div class="np-title ellip">
+          {{ queue.currenttrack?.title || "Track title" }}
+        </div>
+      </div>
+    </div>
+    <Progress />
+    <div class="time">
+      <span class="current">{{ formatSeconds(queue.duration.current) }}</span>
+      <HotKeys />
+      <span class="full">{{ formatSeconds(queue.currenttrack.length) }}</span>
+    </div>
+  </div>
+</template>
+
+<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 { paths } from "@/config";
+import useQStore from "@/stores/queue";
+
+const queue = useQStore();
+const settings = useSettingsStore();
+</script>
+
+<style lang="scss">
+.b-bar {
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  gap: 1rem;
+  padding: 1rem;
+  padding-bottom: 1rem;
+  position: relative;
+
+  .time {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+
+    .full {
+      text-align: end;
+    }
+  }
+
+  .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;
+      gap: $smaller;
+
+      .np-title {
+        font-size: 1.15rem;
+        font-weight: bold;
+      }
+
+      .np-artist {
+        opacity: 0.75;
+        font-size: 0.9rem;
+      }
+    }
+  }
+}
+</style>

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