Add favorites icon to artist page

components/Artist/component.tsx

@@ -8,26 +8,41 @@ import { StackParamList } from "../types";
 import { H2 } from "../Global/helpers/text";
 import { useState } from "react";
 import { CachedImage } from "@georstat/react-native-image-cache";
-import { ImageType } from "@jellyfin/sdk/lib/generated-client/models";
+import { BaseItemDto, ImageType } from "@jellyfin/sdk/lib/generated-client/models";
 import { queryConfig } from "@/api/queries/query.config";
 import { getImageApi } from "@jellyfin/sdk/lib/utils/api";
 import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
+import Icon from "../Global/helpers/icon";
+import { Colors } from "@/enums/colors";
 
 interface ArtistProps {
-    artistId: string,
-    artistName: string,
+    artist: BaseItemDto
     navigation: NativeStackNavigationProp<StackParamList>
 }
 
 export default function Artist(props: ArtistProps): React.JSX.Element {
 
+    props.navigation.setOptions({
+        headerRight: () => { 
+            return (
+                <Icon
+                    name={props.artist.UserData?.IsFavorite ?? false ? "heart" : "heart-outline"}
+                    color={Colors.Primary}
+                    onPress={() => {
+                        
+                    }}
+                />
+            )
+        }
+    });
+
     const [columns, setColumns] = useState<number>(2);
 
     const { apiClient } = useApiClientContext();
 
     const { width } = useSafeAreaFrame();
 
-    const { data: albums } = useArtistAlbums(props.artistId, apiClient!);
+    const { data: albums } = useArtistAlbums(props.artist.Id!, apiClient!);
 
     return (
         <SafeAreaView edges={["top", "right", "left"]}>
@@ -37,7 +52,7 @@ export default function Artist(props: ArtistProps): React.JSX.Element {
                 <CachedImage
                     source={getImageApi(apiClient!)
                         .getItemImageUrlById(
-                            props.artistId,
+                            props.artist.Id!,
                             ImageType.Primary,
                             { ...queryConfig.banners})
                         } 

components/Artist/screens/index.tsx

@@ -10,10 +10,10 @@ export function ArtistScreen({
     route: RouteProp<StackParamList, "Artist">, 
     navigation: NativeStackNavigationProp<StackParamList>
 }): React.JSX.Element {
+
     return (
         <Artist 
-            artistId={route.params.artistId}
-            artistName={route.params.artistName}
+            artist={route.params.artist}
             navigation={navigation}
         />
     );

components/Artists/component.tsx

@@ -32,12 +32,7 @@ export default function Artists({ navigation }: ArtistsProps): React.JSX.Element
                             itemId={artist.Id!}
                             caption={artist.Name ?? "Unknown Artist"}
                             onPress={() => {
-                                navigation.navigate("Artist",
-                                    {
-                                        artistId: artist.Id!,
-                                        artistName: artist.Name!
-                                    }
-                                )
+                                navigation.navigate("Artist", { artist })
                             }}
                             width={width / 2.1}
                         />

components/Favorites/component.tsx

@@ -32,7 +32,7 @@ export default function Library(): React.JSX.Element {
                 name="Artist" 
                 component={ArtistScreen} 
                 options={({ route }) => ({
-                    title: route.params.artistName,
+                    title: route.params.artist.Name ?? "Unknown Artist",
                     headerLargeTitle: true,
                     headerLargeTitleStyle: {
                         fontFamily: 'Aileron-Bold'

components/Home/component.tsx

@@ -37,7 +37,7 @@ export default function Home(): React.JSX.Element {
                     name="Artist" 
                     component={ArtistScreen} 
                     options={({ route }) => ({
-                        title: route.params.artistName,
+                        title: route.params.artist.Name ?? "Unknown Artist",
                         headerLargeTitle: true,
                         headerLargeTitleStyle: {
                             fontFamily: 'Aileron-Bold'

components/Home/helpers/recent-artists.tsx

@@ -26,8 +26,7 @@ export default function RecentArtists({ navigation }: ProvidedHomeProps): React.
                             onPress={() => {
                                 navigation.navigate('Artist', 
                                     { 
-                                        artistId: recentArtist.Id!, 
-                                        artistName: recentArtist.Name ?? "Unknown Artist" 
+                                        artist: recentArtist, 
                                     }
                                 )}
                             }>

components/Player/screens/index.tsx

@@ -92,8 +92,7 @@ export default function PlayerScreen({ navigation }: { navigation: NativeStackNa
                                 onPress={() => {
                                     navigation.goBack(); // Dismiss player modal
                                     navigation.push("Artist", {
-                                        artistName: nowPlaying!.item.ArtistItems![0].Name ?? "Untitled",
-                                        artistId: nowPlaying!.item.ArtistItems![0].Id!,
+                                        artist: nowPlaying!.item.ArtistItems![0],
                                     })
                                 }}
                             >

components/types.tsx

@@ -17,8 +17,7 @@ export type StackParamList = {
     Player: undefined,
     Queue: undefined,
     Artist: { 
-        artistId: string,
-        artistName: string
+        artist: BaseItemDto
     };
     Album: {
         album: BaseItemDto