ADd playlists to home screen

lots of backend player adjustments to get lastfm scrobbling

components/Home/component.tsx

@@ -11,6 +11,7 @@ import { HomeArtistScreen } from "./screens/artist";
 import { SafeAreaView } from "react-native-safe-area-context";
 import Avatar from "../Global/avatar";
 import { HomeAlbumScreen } from "./screens/album";
+import Playlists from "./helpers/playlists";
 
 export const HomeStack = createNativeStackNavigator<StackParamList>();
 
@@ -80,11 +81,18 @@ function ProvidedHome({ route, navigation }: ProvidedHomeProps): React.JSX.Eleme
                         <YStack />
                         <Avatar maxHeight={30} itemId={user!.id} />
                     </XStack>
+
                     <Separator marginVertical={15} />
+
                     <RecentArtists route={route} navigation={navigation} />
+
                     <Separator marginVertical={15} />
+
                     <RecentlyPlayed />
+
                     <Separator marginVertical={15} />
+                    
+                    <Playlists />
                 </YStack>
             </ScrollView>
         </SafeAreaView>

components/Home/helpers/playlists.tsx

@@ -0,0 +1,32 @@
+import { useUserPlaylists } from "@/api/queries/playlist";
+import { Card } from "@/components/Global/card";
+import { H2 } from "@/components/Global/text";
+import { useApiClientContext } from "@/components/jellyfin-api-provider";
+import React from "react";
+import { FlatList } from "react-native";
+import { ScrollView, View } from "tamagui";
+
+export default function Playlists() : React.JSX.Element {
+
+    const { apiClient, user, library } = useApiClientContext();
+
+    const { data: playlists } = useUserPlaylists(apiClient!, user!.id, library!.playlistLibraryId);
+
+    return (
+        <View>
+            <H2>Your Playlists</H2>
+            <FlatList horizontal
+                data={playlists}
+                renderItem={({ item: playlist }) => {
+                    return (
+                        <Card
+                            itemId={playlist.Id!}
+                            caption={playlist.Name ?? "Untitled Playlist"}
+                            onPress={() => {
+
+                            }} />
+                    )
+                }} />
+        </View>
+    )
+}

components/Home/helpers/recently-played.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
-import { H5, ScrollView, View } from "tamagui";
+import { ScrollView, View } from "tamagui";
 import { useHomeContext } from "../provider";
-import { H2, Text } from "../../Global/text";
+import { H2 } from "../../Global/text";
 import { Card } from "../../Global/card";
 import { mapDtoToTrack } from "../../../helpers/mappings";
 import { useApiClientContext } from "../../jellyfin-api-provider";