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>

src/composables/favoriteHandler.ts

@@ -1,31 +1,25 @@
-import { Ref } from "vue";
 import { favType } from "./enums";
 import { addFavorite, removeFavorite } from "./fetch/favorite";
 
 /**
  * Handles the favorite state of an item.
- * @param flag The ref to track the is_favorite state
+ * @param setter The ref to track the is_favorite state
  * @param type The type of item
  * @param itemhash The hash of the item
  */
 export default async function favoriteHandler(
-  flag: Ref<boolean | undefined>,
+  flag: boolean | undefined,
   type: favType,
-  itemhash: string
+  itemhash: string,
+  setter: () => void,
+  remover: () => void
 ) {
-  if (flag.value) {
+  if (flag) {
     const removed = await removeFavorite(type, itemhash);
-
-    if (removed) {
-      flag.value = false;
-    }
-
+    if (removed) remover();
     return;
   }
 
   const added = await addFavorite(type, itemhash);
-
-  if (added) {
-    flag.value = true;
-  }
+  if (added) setter();
 }

src/stores/pages/album.ts

@@ -64,7 +64,6 @@ export default defineStore("album", {
 
       this.srcTracks.forEach((t, index) => {
         t.master_index = index;
-        console.log(t.disc, t.track);
       });
     },
     async fetchArtistAlbums() {
@@ -84,6 +83,12 @@ export default defineStore("album", {
     resetAlbumArtists() {
       this.albumArtists = [];
     },
+    makeFavorite() {
+      this.info.is_favorite = true;
+    },
+    removeFavorite() {
+      this.info.is_favorite = false;
+    },
   },
   getters: {
     discs(): Disc {

src/stores/pages/artist.ts

@@ -50,5 +50,11 @@ export default defineStore("artistPage", {
       this.eps = [];
       this.singles = [];
     },
+    makeFavorite() {
+      this.info.is_favorite = true;
+    },
+    removeFavorite() {
+      this.info.is_favorite = false;
+    },
   },
 });

src/views/AlbumView/index.vue

@@ -94,6 +94,7 @@ function getArtistAlbumComponents(): ScrollerItem[] {
         albums: ar.albums,
         title: `More from ${artistname}`,
         albumType: discographyAlbumTypes.all,
+        route: `/artists/${artisthash}/discography`
       },
       size: 20 * 16,
     };
@@ -104,9 +105,6 @@ const scrollerItems = computed(() => {
   const header: ScrollerItem = {
     id: "album-header",
     component: Header,
-    props: {
-      album: album.info,
-    },
     size: 19 * 16,
   };