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/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>