Clean up, reimplement native paper, and sign in screen.

app/_layout.tsx

@@ -1,29 +1,93 @@
+import { checkUserSession } from "@/redux/user/user.actions";
+import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
 import { ApolloProvider } from "@apollo/client";
+import { Stack } from "expo-router";
 import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Provider } from "react-redux";
+import { ActivityIndicator, View } from "react-native";
+import { MD3LightTheme, Provider as PaperProvider } from "react-native-paper";
+import { connect, Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
+import { createStructuredSelector } from "reselect";
 import { client } from "../graphql/client";
 import { persistor, store } from "../redux/store";
 import "../translations/i18n";
 
-export default function TabLayout() {
+function AuthenticatedLayout() {
   const { t } = useTranslation();
+  return (
+    <NativeTabs>
+      <NativeTabs.Trigger name="jobs">
+        <Label>{t("joblist.labels.activejobs")}</Label>
+        <Icon sf="checklist" drawable="custom_android_drawable" />
+      </NativeTabs.Trigger>
+      <NativeTabs.Trigger name="settings">
+        <Icon sf="gear" drawable="custom_settings_drawable" />
+        <Label>{t("settings.titles.settings")}</Label>
+      </NativeTabs.Trigger>
+    </NativeTabs>
+  );
+}
 
+function UnauthenticatedLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="sign-in" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
+
+function LoadingLayout() {
+  return (
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <ActivityIndicator size="large" />
+    </View>
+  );
+}
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
+});
+const mapDispatchToProps = (dispatch) => ({
+  checkUserSession: () => dispatch(checkUserSession()),
+});
+function AppContent({ currentUser, checkUserSession, bodyshop }) {
+  useEffect(() => {
+    checkUserSession();
+  }, []);
+
+  if (currentUser.authorized === null) {
+    return <LoadingLayout />;
+  }
+  if (currentUser.authorized) {
+    return <AuthenticatedLayout />;
+  }
+  return <UnauthenticatedLayout />;
+}
+const ConnectedAppContent = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AppContent);
+
+const theme = {
+  ...MD3LightTheme,
+  colors: {
+    ...MD3LightTheme.colors,
+    primary: "#1890ff",
+    accent: "tomato",
+  },
+};
+
+export default function AppLayout() {
   return (
     <Provider store={store}>
       <PersistGate persistor={persistor}>
         <ApolloProvider client={client}>
-          <NativeTabs>
-            <NativeTabs.Trigger name="jobs">
-              <Label>{t("joblist.labels.activejobs")}</Label>
-              <Icon sf="checklist" drawable="custom_android_drawable" />
-            </NativeTabs.Trigger>
-            <NativeTabs.Trigger name="settings">
-              <Icon sf="gear" drawable="custom_settings_drawable" />
-              <Label>{t("settings.titles.settings")}</Label>
-            </NativeTabs.Trigger>
-          </NativeTabs>
+          <PaperProvider theme={theme}>
+            <ConnectedAppContent />
+          </PaperProvider>
         </ApolloProvider>
       </PersistGate>
     </Provider>

app/index.tsx

@@ -1,5 +1,17 @@
+import { selectCurrentUser } from "@/redux/user/user.selectors";
 import { Redirect } from "expo-router";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 
-export default function Index() {
-  return <Redirect href={`/jobs`} />;
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+});
+
+function Index({ currentUser }) {
+  if (currentUser.authorized) {
+    return <Redirect href="/" />;
+  }
+
+  return <Redirect href="/sign-in" />;
 }
+export default connect(mapStateToProps, null)(Index);

app/settings.tsx

@@ -1,9 +1,10 @@
-import { StyleSheet, Text, View } from 'react-native';
-
+import SignOutButton from "@/components-old/sign-out-button/sign-out-button.component";
+import { StyleSheet, Text, View } from "react-native";
 export default function Tab() {
   return (
     <View style={styles.container}>
       <Text>Tab [Home|Settings]</Text>
+      <SignOutButton />
     </View>
   );
 }
@@ -11,7 +12,7 @@ export default function Tab() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    justifyContent: "center",
+    alignItems: "center",
   },
 });

app/sign-in.tsx

@@ -0,0 +1,4 @@
+import SignIn from "@/components/sign-in/sign-in";
+export default function SignInScreen() {
+  return <SignIn />;
+}