From b1ee92206681d709aa108ac025d0de7e2ee4fa01 Mon Sep 17 00:00:00 2001
From: Patrick Fic <patrick@imexsystems.ca>
Date: Thu, 23 Oct 2025 13:58:33 -0700
Subject: [PATCH] Refactor settings to use stack to allow dark theme. Move
 theme to app reducer to allow persistence.

---
 app/settings.tsx                             |  5 ----
 app/settings/_layout.tsx                     | 27 ++++++++++++++++++++
 app/settings/index.tsx                       |  5 ++++
 components/jobs-list/job-list-item.jsx       |  2 +-
 components/jobs-list/jobs-list.jsx           | 12 ++++++---
 components/theme-selector/theme-selector.tsx |  4 +--
 hooks/useTheme.ts                            |  2 +-
 redux/app/app.actions.js                     |  5 ++++
 redux/app/app.reducer.js                     |  3 +++
 redux/app/app.selectors.js                   |  5 ++++
 redux/app/app.types.js                       |  1 +
 redux/user/user.actions.js                   |  4 ---
 redux/user/user.reducer.js                   |  3 +--
 redux/user/user.selectors.js                 |  4 ---
 redux/user/user.types.js                     |  1 -
 15 files changed, 60 insertions(+), 23 deletions(-)
 delete mode 100644 app/settings.tsx
 create mode 100644 app/settings/_layout.tsx
 create mode 100644 app/settings/index.tsx

diff --git a/app/settings.tsx b/app/settings.tsx
deleted file mode 100644
index 82f07b0..0000000
--- a/app/settings.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import Settings from "../components/settings/settings";
-
-export default function Tab() {
-  return <Settings />;
-}
diff --git a/app/settings/_layout.tsx b/app/settings/_layout.tsx
new file mode 100644
index 0000000..309f6fa
--- /dev/null
+++ b/app/settings/_layout.tsx
@@ -0,0 +1,27 @@
+import { Stack, useRouter } from "expo-router";
+
+export default function SettingsLayout() {
+  const router = useRouter();
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          title: "Settings",
+          headerShown: false,
+          //   headerSearchBarOptions: {
+          //     placement: "automatic",
+          //     placeholder: "Search",
+          //     autoFocus: true,
+          //     shouldShowHintSearchIcon: true,
+          //     onChangeText: (event) => {
+          //       router.setParams({
+          //         globalSearch: event?.nativeEvent?.text,
+          //       });
+          //     },
+          //   },
+        }}
+      />
+    </Stack>
+  );
+}
diff --git a/app/settings/index.tsx b/app/settings/index.tsx
new file mode 100644
index 0000000..c48c23e
--- /dev/null
+++ b/app/settings/index.tsx
@@ -0,0 +1,5 @@
+import Settings from "../../components/settings/settings";
+
+export default function Tab() {
+  return <Settings />;
+}
diff --git a/components/jobs-list/job-list-item.jsx b/components/jobs-list/job-list-item.jsx
index 58ec802..0859a4a 100644
--- a/components/jobs-list/job-list-item.jsx
+++ b/components/jobs-list/job-list-item.jsx
@@ -107,7 +107,7 @@ function JobListItemComponent({ openImagePicker, item }) {
 
 const styles = StyleSheet.create({
   pressable: {
-    marginHorizontal: 12,
+    // marginHorizontal: 12,
     marginVertical: 6,
   },
   outerShadow: {
diff --git a/components/jobs-list/jobs-list.jsx b/components/jobs-list/jobs-list.jsx
index a9f7119..2f52fa7 100644
--- a/components/jobs-list/jobs-list.jsx
+++ b/components/jobs-list/jobs-list.jsx
@@ -1,8 +1,8 @@
 import { useQuery } from "@apollo/client";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { FlatList, RefreshControl, Text, View } from "react-native";
-import { ActivityIndicator, Button } from "react-native-paper";
+import { FlatList, RefreshControl, View } from "react-native";
+import { ActivityIndicator, Button, Text } from "react-native-paper";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -48,7 +48,13 @@ export function JobListComponent({ bodyshop }) {
   const jobs = data ? [...(data?.jobs || []), { id: "footer-spacer" }] : [];
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, marginHorizontal: 12 }}>
+      <Text
+        variant="headlineMedium"
+        style={{ marginBottom: 12, fontWeight: "600" }}
+      >
+        Jobs
+      </Text>
       <UploadProgress />
       <FlatList
         refreshControl={
diff --git a/components/theme-selector/theme-selector.tsx b/components/theme-selector/theme-selector.tsx
index da1d5b4..00aa7e5 100644
--- a/components/theme-selector/theme-selector.tsx
+++ b/components/theme-selector/theme-selector.tsx
@@ -1,5 +1,5 @@
-import { setTheme } from "@/redux/user/user.actions";
-import { selectTheme } from "@/redux/user/user.selectors";
+import { setTheme } from "@/redux/app/app.actions";
+import { selectTheme } from "@/redux/app/app.selectors";
 import React from "react";
 import { SegmentedButtons } from "react-native-paper";
 import { useDispatch, useSelector } from "react-redux";
diff --git a/hooks/useTheme.ts b/hooks/useTheme.ts
index af1e28f..7849671 100644
--- a/hooks/useTheme.ts
+++ b/hooks/useTheme.ts
@@ -1,4 +1,4 @@
-import { selectTheme } from "@/redux/user/user.selectors";
+import { selectTheme } from "@/redux/app/app.selectors";
 import { darkTheme, lightTheme } from "@/util/theme";
 import { useColorScheme } from "react-native";
 import { useSelector } from "react-redux";
diff --git a/redux/app/app.actions.js b/redux/app/app.actions.js
index 1aeb536..ca7ddb3 100644
--- a/redux/app/app.actions.js
+++ b/redux/app/app.actions.js
@@ -27,3 +27,8 @@ export const documentUploadFailure = (error) => ({
 export const toggleDeleteAfterUpload = () => ({
   type: AppActionTypes.TOGGLE_DLETE_AFTER_UPLOAD,
 });
+
+export const setTheme = (theme) => ({
+  type: AppActionTypes.SET_THEME,
+  payload: theme,
+});
diff --git a/redux/app/app.reducer.js b/redux/app/app.reducer.js
index aa15d0c..888449b 100644
--- a/redux/app/app.reducer.js
+++ b/redux/app/app.reducer.js
@@ -6,6 +6,7 @@ const INITIAL_STATE = {
   documentUploadInProgress: null,
   documentUploadError: null,
   deleteAfterUpload: false,
+  theme: "system",
 };
 
 const appReducer = (state = INITIAL_STATE, action) => {
@@ -43,6 +44,8 @@ const appReducer = (state = INITIAL_STATE, action) => {
         ...state,
         deleteAfterUpload: !state.deleteAfterUpload,
       };
+    case AppActionTypes.SET_THEME:
+      return { ...state, theme: action.payload };
     default:
       return state;
   }
diff --git a/redux/app/app.selectors.js b/redux/app/app.selectors.js
index 1d0d272..a473e7a 100644
--- a/redux/app/app.selectors.js
+++ b/redux/app/app.selectors.js
@@ -26,3 +26,8 @@ export const selectDeleteAfterUpload = createSelector(
   [selectApp],
   (app) => app.deleteAfterUpload
 );
+
+export const selectTheme = createSelector(
+  [selectApp],
+  (app) => app.theme
+);
\ No newline at end of file
diff --git a/redux/app/app.types.js b/redux/app/app.types.js
index 029d8e0..e03c993 100644
--- a/redux/app/app.types.js
+++ b/redux/app/app.types.js
@@ -5,5 +5,6 @@ const AppActionTypes = {
   DOCUMENT_UPLOAD_SUCCESS: "DOCUMENT_UPLOAD_SUCCESS",
   DOCUMENT_UPLOAD_FAILURE: "DOCUMENT_UPLOAD_FAILURE",
   TOGGLE_DLETE_AFTER_UPLOAD: "TOGGLE_DLETE_AFTER_UPLOAD",
+  SET_THEME: "SET_THEME",
 };
 export default AppActionTypes;
diff --git a/redux/user/user.actions.js b/redux/user/user.actions.js
index b0b6e50..ddd7c0f 100644
--- a/redux/user/user.actions.js
+++ b/redux/user/user.actions.js
@@ -98,7 +98,3 @@ export const validatePasswordResetFailure = (error) => ({
   type: UserActionTypes.VALIDATE_PASSWORD_RESET_FAILURE,
   payload: error,
 });
-export const setTheme = (theme) => ({
-  type: UserActionTypes.SET_THEME,
-  payload: theme,
-});
diff --git a/redux/user/user.reducer.js b/redux/user/user.reducer.js
index 7c38c7b..ba71563 100644
--- a/redux/user/user.reducer.js
+++ b/redux/user/user.reducer.js
@@ -49,8 +49,7 @@ const userReducer = (state = INITIAL_STATE, action) => {
 
     case UserActionTypes.SET_SHOP_DETAILS:
       return { ...state, bodyshop: action.payload };
-    case UserActionTypes.SET_THEME:
-      return { ...state, theme: action.payload };
+
     case UserActionTypes.SIGN_IN_FAILURE:
     case UserActionTypes.SIGN_OUT_FAILURE:
     case UserActionTypes.EMAIL_SIGN_UP_FAILURE:
diff --git a/redux/user/user.selectors.js b/redux/user/user.selectors.js
index fa7a705..dc97168 100644
--- a/redux/user/user.selectors.js
+++ b/redux/user/user.selectors.js
@@ -32,7 +32,3 @@ export const selectSigningIn = createSelector(
   (user) => user.signingIn
 );
 
-export const selectTheme = createSelector(
-  [selectUser],
-  (user) => user.theme
-);
\ No newline at end of file
diff --git a/redux/user/user.types.js b/redux/user/user.types.js
index fa46823..0f5773c 100644
--- a/redux/user/user.types.js
+++ b/redux/user/user.types.js
@@ -26,6 +26,5 @@ const UserActionTypes = {
   VALIDATE_PASSWORD_RESET_START: "VALIDATE_PASSWORD_RESET_START",
   VALIDATE_PASSWORD_RESET_SUCCESS: "VALIDATE_PASSWORD_RESET_SUCCESS",
   VALIDATE_PASSWORD_RESET_FAILURE: "VALIDATE_PASSWORD_RESET_FAILURE",
-  SET_THEME: "SET_THEME",
 };
 export default UserActionTypes;