From 0b74166415be673f67275fa729d04038798955f4 Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Fri, 29 Nov 2024 15:36:44 -0600
Subject: [PATCH] building out settings screen more

---
 components/Home/component.tsx                 |  5 +++-
 components/Settings/component.tsx             | 24 +++++++++++++------
 .../Settings/helpers/account-details.tsx      | 19 ++++++++-------
 components/Settings/screens/root.tsx          | 17 +++++++++++++
 components/jellify.tsx                        |  4 ++--
 5 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 components/Settings/screens/root.tsx

diff --git a/components/Home/component.tsx b/components/Home/component.tsx
index 4ae69426..05bfc26f 100644
--- a/components/Home/component.tsx
+++ b/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>
diff --git a/components/Settings/component.tsx b/components/Settings/component.tsx
index 8980124d..b823bd9a 100644
--- a/components/Settings/component.tsx
+++ b/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>
     )
 }
\ No newline at end of file
diff --git a/components/Settings/helpers/account-details.tsx b/components/Settings/helpers/account-details.tsx
index fdfe6206..d641046c 100644
--- a/components/Settings/helpers/account-details.tsx
+++ b/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>
     )
-}
\ No newline at end of file
+}
+
diff --git a/components/Settings/screens/root.tsx b/components/Settings/screens/root.tsx
new file mode 100644
index 00000000..86715c3d
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/components/jellify.tsx b/components/jellify.tsx
index e304704c..df77b7d3 100644
--- a/components/jellify.tsx
+++ b/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>