building out settings screen more

components/Home/component.tsx

@@ -1,4 +1,4 @@
-import { H3, ScrollView, XStack, YStack } from "tamagui";
+import { H3, ScrollView, Separator, XStack, YStack } from "tamagui";
 import _ from "lodash";
 import RecentlyPlayed from "./helpers/recently-played";
 import { useApiClientContext } from "../jellyfin-api-provider";
@@ -70,8 +70,11 @@ 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} />
                 </YStack>
             </ScrollView>
         </SafeAreaView>

components/Settings/component.tsx

@@ -1,13 +1,23 @@
 import React from "react";
-import { ScrollView } from "tamagui";
-import AccountDetails from "./helpers/account-details";
-import SignOut from "./helpers/sign-out";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import Root from "./screens/root";
+
+export const SettingsStack = createNativeStackNavigator();
 
 export default function Settings(): React.JSX.Element {
     return (
-        <ScrollView>
-            <AccountDetails />
-            <SignOut />
-        </ScrollView>
+        <SettingsStack.Navigator>
+
+            <SettingsStack.Screen 
+                name="Settings" 
+                component={Root} 
+                options={{
+                    headerLargeTitle: true,
+                    headerLargeTitleStyle: {
+                        fontFamily: 'Aileron-Bold'
+                    }
+                }}
+            />
+        </SettingsStack.Navigator>
     )
 }

components/Settings/helpers/account-details.tsx

@@ -1,20 +1,21 @@
 import { XStack } from "@tamagui/stacks";
 import React from "react";
-import { Avatar } from "tamagui";
-import { Colors } from "../../../enums/colors";
 import { useApiClientContext } from "../../jellyfin-api-provider";
+import Avatar from "../../Global/avatar";
+import { Text } from "tamagui";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
 
 export default function AccountDetails(): React.JSX.Element {
 
-    const {  } = useApiClientContext();
+    const { user } = useApiClientContext();
 
     return (
-        <XStack>
-            <Avatar circular>
-                <Avatar.Image src=""/>
 
-                <Avatar.Fallback backgroundColor={Colors.Primary}/>
-            </Avatar>
+        <XStack>
+            <MaterialCommunityIcons name="account-music-outline" />
+            <Text>{user!.name}</Text>
+            <Avatar itemId={user!.id} circular />
         </XStack>
     )
-}
+}
+

components/Settings/screens/root.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { SafeAreaView } from "react-native";
+import { ScrollView, Separator } from "tamagui";
+import AccountDetails from "../helpers/account-details";
+import SignOut from "../helpers/sign-out";
+
+export default function Root() : React.JSX.Element {
+    return (
+        <SafeAreaView>
+            <ScrollView contentInsetAdjustmentBehavior="automatic">
+                <AccountDetails />
+                <Separator marginVertical={15} />
+                <SignOut />
+            </ScrollView>
+        </SafeAreaView>
+    )
+}

components/jellify.tsx

@@ -25,12 +25,12 @@ export default function Jellify(): React.JSX.Element {
 function App(): React.JSX.Element {
 
   // If library hasn't been set, we haven't completed the auth flow
-  const { library } = useApiClientContext();
+  const { server, library } = useApiClientContext();
   
   return (
     <NavigationContainer theme={JellifyTheme}>
       <SafeAreaProvider>
-        { library ? (
+        { server && library ? (
           <PlayerProvider>
             <Navigation />
           </PlayerProvider>