rename setting to "use alt now playing ..."

+ fix right now playing component gap
+ show emoji if there's no search result
+ abstract now playing component settings into one setting
+ break context menu's context item into a component

src/components/RightSideBar/Main.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="r-sidebar">
+  <div
+    class="r-sidebar"
+    :style="{
+      marginBottom: !settings.use_alt_np ? '-1rem' : '',
+    }"
+  >
     <div class="grid">
       <div class="r-content">
         <div class="r-dash" v-show="tabs.current === tabs.tabs.home">
@@ -21,8 +26,10 @@ import Search from "./Search/Main.vue";
 import Queue from "./Queue.vue";
 import DashBoard from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
+import useSettingsStore from "@/stores/settings";
 
 const tabs = useTabStore();
+const settings = useSettingsStore();
 </script>
 
 <style lang="scss">

src/components/RightSideBar/NowPlayingRight.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar bg-primary pad-medium rounded" v-if="settings.use_right_np">
+  <div class="b-bar bg-primary pad-medium rounded" v-if="settings.use_alt_np">
     <div class="info">
       <img
         :src="paths.images.thumb + queue.currenttrack?.image"

src/components/RightSideBar/Queue/QueueActions.vue

@@ -11,9 +11,7 @@
       </button>
     </div>
     <div class="right">
-      <button class="more-action action">
-        <MoreSvg />
-      </button>
+      <Option />
     </div>
   </div>
 </template>
@@ -23,7 +21,7 @@ import useQueueStore from "../../../stores/queue";
 
 import ClearSvg from "@/assets/icons/delete.svg";
 import ShuffleSvg from "@/assets/icons/shuffle.svg";
-import MoreSvg from "@/assets/icons/more.svg";
+import Option from "@/components/shared/Option.vue";
 
 const queue = useQueueStore();
 </script>
@@ -50,8 +48,9 @@ const queue = useQueueStore();
     }
   }
 
-  .more-action {
+  .btn-more {
     padding-right: $smaller;
+
     svg {
       transform: scale(1.25);
     }

src/components/RightSideBar/Search/AlbumGrid.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="artists-results">
-    <div class="search-results-grid">
-      <AlbumCard
-        v-for="album in search.albums.value"
-        :key="`${album.artist}-${album.title}`"
-        :album="album"
-      />
-    </div>
-    <LoadMore v-if="search.albums.more" @loadMore="loadMore()" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import AlbumCard from "../../shared/AlbumCard.vue";
-import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
-
-const search = useSearchStore();
-
-function loadMore() {
-  search.updateLoadCounter("albums");
-  search.loadAlbums(search.loadCounter.albums);
-}
-</script>

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,9 +1,15 @@
 <template>
   <div class="artists-results">
-    <div class="search-results-grid" v-if="album_grid == true">
+    <div
+      class="search-results-grid"
+      v-if="album_grid == true && search.albums.value.length"
+    >
       <AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
     </div>
-    <div class="search-results-grid" v-else>
+    <div
+      class="search-results-grid"
+      v-else-if="!album_grid && search.artists.value.length"
+    >
       <ArtistCard
         v-for="artist in search.artists.value"
         :key="artist.image"
@@ -11,6 +17,7 @@
         :alt="true"
       />
     </div>
+    <div v-else class="t-center"><h5>🤷</h5></div>
     <LoadMore
       v-if="album_grid && search.albums.more"
       :loader="search.loadAlbums"

src/components/RightSideBar/Search/TracksGrid.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="tracks-results" v-if="search.tracks.value">
-    <TransitionGroup name="list">
+  <div id="tracks-results">
+    <TransitionGroup name="list"  v-if="search.tracks.value.length">
       <TrackItem
         v-for="(track, index) in search.tracks.value"
-        :key="track.trackid"
+        :key="track?.trackid"
         :track="track"
         :isPlaying="queue.playing"
         :isCurrent="queue.currentid == track.trackid"
@@ -11,6 +11,7 @@
         @PlayThis="updateQueue(index)"
       />
     </TransitionGroup>
+    <div v-else class="t-center"><h5>🤷</h5></div>
     <LoadMore v-if="search.tracks.more" :loader="search.loadTracks" />
   </div>
 </template>

src/components/RightSideBar/SearchInput.vue

@@ -1,15 +1,13 @@
 <template>
   <div id="gsearch-input" class="rounded">
-    <div
-      id="ginner"
-      tabindex="0"
-      class="bg-primary rounded"
-    >
+    <div id="ginner" tabindex="0" class="bg-primary rounded">
       <input
         id="globalsearch"
         v-model="search.query"
         placeholder="Search your library"
         type="search"
+        @blur.prevent="removeFocusedClass"
+        @focus.prevent="addFocusedClass"
       />
       <SearchSvg />
     </div>
@@ -21,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
 import QueueSvg from "../../assets/icons/queue.svg";
 import SearchSvg from "../../assets/icons/search.svg";
 import useSearchStore from "../../stores/search";
@@ -28,6 +27,20 @@ import useTabStore from "../../stores/tabs";
 
 const search = useSearchStore();
 const tabs = useTabStore();
+const focused = ref(false);
+let classList: DOMTokenList | undefined;
+
+onMounted(() => {
+  classList = document.getElementById("ginner")?.classList;
+});
+
+function addFocusedClass() {
+  classList?.add("search-focused");
+}
+
+function removeFocusedClass() {
+  classList?.remove("search-focused");
+}
 </script>
 
 <style lang="scss">