add to playlist build out, making favorite button more powerful

components/Global/components/favorite-button.tsx

@@ -8,6 +8,8 @@ import { useUserData } from "../../../api/queries/favorites";
 import { getTokens, Spinner } from "tamagui";
 import Client from "../../../api/client";
 import { usePlayerContext } from "../../..//player/provider";
+import { queryClient } from "../../../constants/query-client";
+import { QueryKeys } from "@/enums/query-keys";
 
 interface SetFavoriteMutation {
     item: BaseItemDto,
@@ -37,6 +39,22 @@ export default function FavoriteButton({
         onSuccess: () => {
             setIsFavorite(true);
             onToggle ? onToggle() : {};
+
+            // Force refresh of track user data
+            queryClient.invalidateQueries({
+                queryKey: [QueryKeys.UserData, item.Id],
+                exact: true
+            });
+
+            if (item.Type === 'Audio') {
+                queryClient.invalidateQueries({
+                    queryKey: [QueryKeys.AlbumTracks]
+                });
+
+                queryClient.invalidateQueries({
+                    queryKey: [QueryKeys.Playlist]
+                });
+            }
         }
     })
     

components/ItemDetail/helpers/TrackOptions.tsx

@@ -3,22 +3,32 @@ import { useItem } from "../../../api/queries/item";
 import { StackParamList } from "../../../components/types";
 import { BaseItemDto } from "@jellyfin/sdk/lib/generated-client/models";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import { Spacer, XStack, YStack } from "tamagui";
+import { Spacer, Spinner, XStack, YGroup, YStack } from "tamagui";
 import { QueuingType } from "../../../enums/queuing-type";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 import IconButton from "../../../components/Global/helpers/icon-button";
+import { Text } from "../../../components/Global/helpers/text";
+import { useUserPlaylists } from "../../../api/queries/playlist";
+
+interface TrackOptionsProps {
+    item: BaseItemDto;
+    navigation: NativeStackNavigationProp<StackParamList>;
+    
+    /**
+     * Whether this is nested in the player modal
+     */
+    isNested: boolean | undefined;
+}
 
 export default function TrackOptions({ 
     item, 
     navigation,
     isNested
-} : { 
-    item: BaseItemDto, 
-    navigation: NativeStackNavigationProp<StackParamList>,
-    isNested: boolean | undefined// Whether this is nested in the player modal
-}) : React.JSX.Element {
+} : TrackOptionsProps) : React.JSX.Element {
 
-    const { data: album, isSuccess } = useItem(item.AlbumId ?? "");
+    const { data: album, isSuccess: albumFetchSuccess } = useItem(item.AlbumId ?? "");
+
+    const { data: playlists, isPending : playlistsFetchPending, isSuccess: playlistsFetchSuccess } = useUserPlaylists();
 
     const { useAddToQueue } = usePlayerContext();
 
@@ -28,7 +38,7 @@ export default function TrackOptions({
         <YStack width={width}>
 
             <XStack justifyContent="space-evenly">
-                { isSuccess ? (
+                { albumFetchSuccess ? (
                     <IconButton 
                         name="music-box"
                         title="Go to Album"
@@ -73,6 +83,15 @@ export default function TrackOptions({
                     size={width / 5}
                 />
             </XStack>
+
+            { playlistsFetchPending && (
+                <Spinner />
+            )}
+            <Text bold>Add to Playlist</Text>
+
+            <YGroup>
+                { playlists?.map}
+            </YGroup>
         </YStack>
     )
 }

components/Search/component.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useState } from "react";
 import Input from "../Global/helpers/input";
-import { debounce } from "lodash";
 import Item from "../Global/components/item";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { StackParamList } from "../types";
@@ -8,6 +7,7 @@ import { QueryKeys } from "../../enums/query-keys";
 import { fetchSearchResults } from "../../api/queries/functions/search";
 import { useQuery } from "@tanstack/react-query";
 import { FlatList, useColorScheme } from "react-native";
+import { Text } from "../Global/helpers/text";
 
 export default function Search({ 
     navigation
@@ -42,7 +42,6 @@ export default function Search({
         <FlatList
             contentInsetAdjustmentBehavior="automatic"
             progressViewOffset={10}
-            indicatorStyle={isDarkMode ? 'white' : 'default'}
             ListHeaderComponent={(
                 <Input
                     placeholder="Seek and ye shall find..."
@@ -50,6 +49,9 @@ export default function Search({
                     value={searchString}
                 />
             )}
+            ListEmptyComponent={(
+                <Text>No results found</Text>
+            )}
             data={items}
             refreshing={isFetching}
             renderItem={({ index, item }) => {