fix: make profile button reactive

fix: dont show following when not available

Author: ThaUnknown

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui",
-	"version": "6.4.354",
+	"version": "6.4.355",
 	"license": "BUSL-1.1",
 	"private": true,
 	"packageManager": "pnpm@10.28.0",

src/lib/components/EpisodesList.svelte

@@ -13,7 +13,7 @@
 
   import Logo from '$lib/components/icons/Logo.svelte'
   import { episodes as _episodes, client, notes, type Media } from '$lib/modules/anilist'
-  import { authAggregator, list, progress } from '$lib/modules/auth'
+  import { list, progress } from '$lib/modules/auth'
   import { makeEpisodeList } from '$lib/modules/extensions'
   import { click, dragScroll } from '$lib/modules/navigate'
   import { settings, SUPPORTS } from '$lib/modules/settings'
@@ -44,7 +44,9 @@
 
   export let following = client.following(media.id)
 
-  $: followerEntries = $following?.data?.following?.mediaList?.filter(e => e?.user?.id !== authAggregator.id()) ?? []
+  const viewer = client.client.viewer
+
+  $: followerEntries = ($viewer?.viewer?.id && $following?.data?.following?.mediaList?.filter(e => e?.user?.id !== $viewer.viewer?.id)) || []
 
   $: watchProgress = liveAnimeProgress(media.id)
 </script>

src/lib/components/ui/banner/full-banner.svelte

@@ -10,7 +10,7 @@
   import { goto } from '$app/navigation'
   import { client, desc, duration, format, getTextColorForRating, season, status, title, type Media } from '$lib/modules/anilist'
   import { episodesCached } from '$lib/modules/anizip'
-  import { authAggregator, of } from '$lib/modules/auth'
+  import { of } from '$lib/modules/auth'
   import { click } from '$lib/modules/navigate'
   import { colors } from '$lib/utils'
   export let mediaList: Array<Media | null>
@@ -66,7 +66,9 @@
   const ids = mediaList.map(m => m?.id).filter(e => e) as number[]
   const following = client.followingMany(ids, 'cache-first')
 
-  $: filtered = $following?.data?.Page?.mediaList?.filter(ml => ml?.user?.id !== authAggregator.id()) ?? []
+  const viewer = client.client.viewer
+
+  $: filtered = ($viewer?.viewer?.id && $following?.data?.Page?.mediaList?.filter(ml => ml?.user?.id !== $viewer.viewer?.id)) || []
 
   $: usersForCurrent = filtered.filter((f): f is NonNullable<typeof f> => f?.media?.id === current?.id && !!f?.user).map(({ user }) => user!)
 </script>

src/lib/components/ui/sidebar/sidebarlist.svelte

@@ -20,10 +20,6 @@
   import { SUPPORTS } from '$lib/modules/settings'
   import { cn, highEntropyValues } from '$lib/utils'
 
-  const auth = client.hasAuth
-
-  $: hasAuth = $auth
-
   let visibilityState: DocumentVisibilityState
 
   $: active = ($lockedState === 'locked' || visibilityState === 'hidden' || ($idleState === 'active' && $activityState === 'active')) && $page.route.id !== '/app/player' && !SUPPORTS.isUnderPowered
@@ -44,6 +40,8 @@
   function manualUpdate () {
     native.openURL('https://hayase.watch/download/')
   }
+
+  const viewer = client.viewer
 </script>
 
 <svelte:document bind:visibilityState />
@@ -133,11 +131,10 @@
 </SidebarButton>
 <SidebarButton href='/app/profile/'>
   <!-- <SidebarButton href='/app/profile/' class='hidden md:flex py-0 animated-icon'> -->
-  {#if hasAuth}
-    {@const viewer = client.profile()}
+  {#if $viewer}
     <Avatar.Root class='size-6 rounded-md'>
-      <Avatar.Image src={viewer?.avatar?.large ?? ''} alt={viewer?.name} />
-      <Avatar.Fallback>{viewer?.name}</Avatar.Fallback>
+      <Avatar.Image src={$viewer.avatar?.large ?? ''} alt={$viewer.name} />
+      <Avatar.Fallback>{$viewer.name}</Avatar.Fallback>
     </Avatar.Root>
   {:else}
     <LogIn size={18} />

src/lib/modules/anilist/client.ts

@@ -228,11 +228,13 @@ class AnilistClient {
 
   following (animeID: number) {
     debug('following: fetching following for anime with ID', animeID)
+    if (!this.client.viewer.value?.viewer?.id) return
     return queryStore({ client: this.client, query: Following, variables: { id: animeID } })
   }
 
   followingMany (animeIDs: number[], requestPolicy: RequestPolicy = 'cache-and-network') {
     debug('followingMany: fetching following for anime with IDs', animeIDs)
+    if (!this.client.viewer.value?.viewer?.id) return
     return queryStore({ client: this.client, query: FollowingMany, variables: { ids: animeIDs }, context: { requestPolicy } })
   }
 

src/lib/modules/anilist/queries.ts

@@ -590,7 +590,7 @@ export const AnimePage = gql(`
         }
       }
     },
-    threads: Page(page: 1, perPage: 16) {
+    threads: Page(perPage: 16) {
       pageInfo {
         hasNextPage,
         total

src/lib/modules/auth/client.ts

@@ -1,5 +1,5 @@
 import { readable } from 'simple-store-svelte'
-import { get } from 'svelte/store'
+import { derived, get } from 'svelte/store'
 import { persisted } from 'svelte-persisted-store'
 
 import { client, episodes, type Media } from '../anilist'
@@ -25,6 +25,13 @@ export default new class AuthAggregator {
     return () => unsub.forEach(fn => fn())
   })
 
+  viewer = derived([client.client.viewer, kitsu.viewer, mal.viewer], ([$anilistViewer, $kitsuViewer, $malViewer]) => {
+    if ($anilistViewer?.viewer?.id) return $anilistViewer.viewer
+    if ($kitsuViewer?.id) return $kitsuViewer
+    if ($malViewer?.id) return $malViewer
+    return null
+  })
+
   syncSettings = persisted('syncSettings', { al: true, local: true, kitsu: true, mal: true })
   // AUTH
 

src/routes/app/anime/[id]/+layout.svelte

@@ -17,8 +17,8 @@
   import * as Dialog from '$lib/components/ui/dialog'
   import { Load } from '$lib/components/ui/img'
   import { Profile } from '$lib/components/ui/profile'
-  import { cover, desc, duration, format, season, status, title, getBGColorForRating } from '$lib/modules/anilist'
-  import { authAggregator, list, of } from '$lib/modules/auth'
+  import { cover, desc, duration, format, season, status, title, getBGColorForRating, client } from '$lib/modules/anilist'
+  import { list, of } from '$lib/modules/auth'
   import native from '$lib/modules/native'
   import { dragScroll } from '$lib/modules/navigate'
   import { settings, SUPPORTS } from '$lib/modules/settings'
@@ -46,8 +46,10 @@
     hideBanner.value = target.scrollTop > 100
   }
 
+  const viewer = client.client.viewer
+
   $: info = data.info
-  $: followerEntries = $info?.data?.following?.mediaList?.filter(e => e?.user?.id !== authAggregator.id()) ?? []
+  $: followerEntries = ($viewer?.viewer?.id && $info.data?.following?.mediaList?.filter(e => e?.user?.id !== $viewer.viewer?.id)) || []
 
   $: nativeTitle = media.title?.native ?? media.title?.romaji ?? ''
   $: romajiTitle = media.title?.romaji ?? media.title?.native ?? ''