fix artist and album page is_favorite reactivity

+ remove nav components for playlist and album page

src/components/AlbumView/Header.vue

@@ -50,7 +50,7 @@
           </div>
           <div class="buttons">
             <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
-            <HeartSvg :state="is_fav" @handleFav="handleFav"/>
+            <HeartSvg :state="album.is_favorite" @handleFav="handleFav" />
           </div>
         </div>
       </div>
@@ -92,14 +92,18 @@ import HeartSvg from "../shared/HeartSvg.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import favoriteHandler from "@/composables/favoriteHandler";
+import { storeToRefs } from "pinia";
 
-const props = defineProps<{
-  album: Album;
-}>();
+// const props = defineProps<{
+//   album: Album;
+// }>();
 
 const albumheaderthing = ref<any>(null);
 const imguri = paths.images;
 const nav = useNavStore();
+const store = useAlbumStore();
+
+const { info: album } = storeToRefs(store);
 
 defineEmits<{
   (event: "playThis"): void;
@@ -117,10 +121,16 @@ function handleVisibilityState(state: boolean) {
 
 useVisibility(albumheaderthing, handleVisibilityState);
 
-const is_fav = ref(props.album.is_favorite);
+// const is_fav = ref(props.album.is_favorite);
 
 function handleFav() {
-  favoriteHandler(is_fav, favType.album, props.album.albumhash);
+  favoriteHandler(
+    album.value.is_favorite,
+    favType.album,
+    album.value.albumhash,
+    store.makeFavorite,
+    store.removeFavorite
+  );
 }
 </script>
 

src/components/ArtistView/Header.vue

@@ -31,7 +31,7 @@
       </section>
       <div class="buttons">
         <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
-        <HeartSvg @handleFav="handleFav" :state="is_fav" />
+        <HeartSvg @handleFav="handleFav" :state="artist.info.is_favorite" />
       </div>
     </div>
     <div class="artist-img no-select">
@@ -51,8 +51,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
 import { paths } from "@/config";
 import useArtistPageStore from "@/stores/pages/artist";
 import formatSeconds from "@/utils/useFormatSeconds";
@@ -64,10 +62,15 @@ import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import HeartSvg from "@/components/shared/HeartSvg.vue";
 
 const artist = useArtistPageStore();
-const is_fav = ref(artist.info.is_favorite);
 
 function handleFav() {
-  favoriteHandler(is_fav, favType.artist, artist.info.artisthash);
+  favoriteHandler(
+    artist.info.is_favorite,
+    favType.artist,
+    artist.info.artisthash,
+    artist.makeFavorite,
+    artist.removeFavorite
+  );
 }
 </script>
 

src/components/PlaylistView/ArtistsList.vue

@@ -28,6 +28,8 @@ defineProps<{
     display: flex;
     justify-content: space-between;
     padding-left: $medium;
+    align-items: center;
+    margin-bottom: $small;
 
     .see-all {
       font-size: $medium;

src/components/nav/NavBar.vue

@@ -4,10 +4,6 @@
       <NavButtons />
 
       <div class="info">
-        <APTitle
-          v-if="$route.name == Routes.album || $route.name == Routes.playlist"
-          :header_shown="nav.h_visible"
-        />
         <SettingsTitle
           v-if="$route.name == Routes.settings"
           :text="'Settings'"
@@ -31,12 +27,10 @@ import { useRoute } from "vue-router";
 
 import { subPath } from "@/interfaces";
 import { Routes } from "@/router/routes";
-import useNavStore from "@/stores/nav";
 import { createSubPaths } from "@/utils";
 
 import NavButtons from "./NavButtons.vue";
 
-import APTitle from "./Titles/APTitle.vue";
 import FolderTitle from "./Titles/Folder.vue";
 import PlaylistsTitle from "./Titles/PlaylistsTitle.vue";
 import QueueTitle from "./Titles/QueueTitle.vue";
@@ -46,7 +40,6 @@ import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
 import ArtistTracksTitle from "./Titles/ArtistTracksTitle.vue";
 
 const route = useRoute();
-const nav = useNavStore();
 
 const subPaths = ref<subPath[]>([]);
 

src/components/nav/Titles/APTitle.vue

@@ -1,86 +0,0 @@
-<template>
-  <div
-    class="title grid albumnavtitle"
-    :class="{
-      hide_play: header_shown,
-    }"
-    v-if="album.info.albumhash"
-  >
-    <div class="first grid">
-      <PlayBtn :source="things.source" :store="things.store" />
-      <div class="ellip">
-        {{ things.text }}
-      </div>
-    </div>
-    <Input :page="($route.name as string)" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "@vue/reactivity";
-import { useRoute } from "vue-router";
-
-import Input from "@/components/shared/NavSearchInput.vue";
-import PlayBtn from "@/components/shared/PlayBtn.vue";
-import { playSources } from "@/composables/enums";
-import useAlbumStore from "@/stores/pages/album";
-import usePStore from "@/stores/pages/playlist";
-import { Routes } from "@/router/routes";
-
-defineProps<{
-  header_shown: boolean;
-}>();
-
-const album = useAlbumStore();
-const playlist = usePStore();
-
-const things = computed(() => {
-  const route = useRoute();
-  let thing = {
-    text: "",
-    store: null as any,
-    source: playSources.album,
-  };
-
-  switch (route.name) {
-    case Routes.album:
-      thing = {
-        source: playSources.album,
-        text: useAlbumStore().info.title,
-        store: useAlbumStore,
-      };
-      break;
-    case Routes.playlist:
-      thing = {
-        source: playSources.playlist,
-        text: usePStore().info.name,
-        store: usePStore,
-      };
-      break;
-  }
-
-  return thing;
-});
-</script>
-
-<style lang="scss">
-.albumnavtitle {
-  grid-template-columns: max-content 1fr;
-  align-items: center;
-  justify-content: space-between;
-  gap: $small;
-  height: 100%;
-
-  .first {
-    grid-template-columns: max-content 1fr;
-    gap: $small;
-    align-items: center;
-  }
-}
-
-.albumnavtitle.hide_play {
-  .first {
-    visibility: hidden;
-  }
-}
-</style>