rename to favorites instead of library

add tracks stack item

components/Favorites/component.tsx

@@ -1,24 +1,25 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import React from "react";
 import { StackParamList } from "../types";
-import LibraryScreen from "./screens";
+import FavoritesScreen from "./screens";
 import { ArtistScreen } from "../Artist/screens";
 import { AlbumScreen } from "../Album/screens";
 import { PlaylistScreen } from "../Playlist/screens";
 import ArtistsScreen from "../Artists/screen";
 import AlbumsScreen from "../Albums/screen";
+import TracksScreen from "../Tracks/screen";
 
 const LibraryStack = createNativeStackNavigator<StackParamList>();
 
 export default function Library(): React.JSX.Element {
     return (
         <LibraryStack.Navigator
-            id="Library"
-            initialRouteName="Library"
+            id="Favorites"
+            initialRouteName="Favorites"
         >
             <LibraryStack.Screen
-                name="Library"
-                component={LibraryScreen}
+                name="Favorites"
+                component={FavoritesScreen}
                 options={{
                     headerLargeTitle: true,
                     headerLargeTitleStyle: {
@@ -70,6 +71,17 @@ export default function Library(): React.JSX.Element {
                 }}
             />
 
+            <LibraryStack.Screen
+                name="Tracks"
+                component={TracksScreen}
+                options={{
+                    headerLargeTitle: true,
+                    headerLargeTitleStyle: {
+                        fontFamily: 'Aileron-Bold'
+                    }
+                }}
+            />
+
             <LibraryStack.Screen
                 name="Playlist"
                 component={PlaylistScreen}

components/Favorites/screens/index.tsx

@@ -6,11 +6,11 @@ import { StackParamList } from "@/components/types";
 import { RouteProp } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 
-export default function LibraryScreen({ 
+export default function FavoritesScreen({ 
     route, 
     navigation 
 } : {
-    route: RouteProp<StackParamList, "Library">,
+    route: RouteProp<StackParamList, "Favorites">,
     navigation: NativeStackNavigationProp<StackParamList>
 }): React.JSX.Element {
 

components/Tracks/component.tsx

@@ -0,0 +1,41 @@
+import { useFavoriteTracks } from "@/api/queries/favorites";
+import { useApiClientContext } from "../jellyfin-api-provider";
+import { TracksProps } from "../types";
+import { SafeAreaView, useSafeAreaFrame } from "react-native-safe-area-context";
+import { FlatList, RefreshControl } from "react-native";
+import Track from "../Global/components/track";
+
+export default function Tracks({ navigation }: TracksProps) : React.JSX.Element {
+    const { apiClient, library } = useApiClientContext();
+    const { data: tracks, refetch, isPending } = useFavoriteTracks(apiClient!, library!.musicLibraryId);
+
+    const { width } = useSafeAreaFrame();
+
+    return (
+        <SafeAreaView edges={["right", "left"]}>
+            <FlatList
+                contentInsetAdjustmentBehavior="automatic"
+                numColumns={1}
+                data={tracks}
+                refreshControl={
+                    <RefreshControl
+                        refreshing={isPending}
+                        onRefresh={refetch}
+                    />
+                }
+                renderItem={({ index, item: track}) => {
+                    return (
+                        <Track
+                            showArtwork
+                            track={track}
+                            tracklist={tracks ?? []}
+                            index={index}
+                            queueName="Favorite Tracks"
+                        />
+
+                    )
+                }}
+            />
+        </SafeAreaView>
+    )
+}

components/Tracks/screen.tsx

@@ -0,0 +1,17 @@
+import { RouteProp } from "@react-navigation/native";
+import { StackParamList } from "../types";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import React from "react";
+import Tracks from "./component";
+
+export default function TracksScreen({
+    route,
+    navigation
+} : {
+    route: RouteProp<StackParamList, "Tracks">,
+    navigation: NativeStackNavigationProp<StackParamList, "Tracks", undefined>
+}) : React.JSX.Element {
+    return (
+        <Tracks route={route} navigation={navigation} />
+    )
+}

components/tabs.tsx

@@ -5,7 +5,7 @@ import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityI
 import { useColorScheme } from "react-native";
 import { Colors } from "../enums/colors";
 import Search from "./Search/component";
-import Library from "./Library/component";
+import Favorites from "./Favorites/component";
 import Settings from "./Settings/component";
 import { Discover } from "./Discover/component";
 import { Miniplayer } from "./Player/mini-player";
@@ -51,8 +51,8 @@ export function Tabs() : React.JSX.Element {
                 />
 
                 <Tab.Screen
-                    name="Library"
-                    component={Library}
+                    name="Favorites"
+                    component={Favorites}
                     options={{
                         headerShown: false,
                         tabBarIcon: ({color, size }) => (

components/types.tsx

@@ -5,7 +5,7 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 export type StackParamList = {
     Home: undefined;
     Discover: undefined;
-    Library: undefined,
+    Favorites: undefined,
     Artists: undefined,
     Albums: undefined,
     Tracks: undefined,
@@ -44,7 +44,7 @@ export type HomePlaylistProps = NativeStackScreenProps<StackParamList, "Playlist
 
 export type QueueProps = NativeStackScreenProps<StackParamList, "Queue">;
 
-export type LibraryProps = NativeStackScreenProps<StackParamList, "Library">;
+export type LibraryProps = NativeStackScreenProps<StackParamList, "Favorites">;
 
 export type ArtistsProps = NativeStackScreenProps<StackParamList, "Artists">;