Updated settings screen.

components/settings/settings.jsx

@@ -1,11 +1,14 @@
 import SignOutButton from "@/components-old/sign-out-button/sign-out-button.component";
-import { toggleDeleteAfterUpload } from "@/redux/app/app.actions";
 import { selectDeleteAfterUpload } from "@/redux/app/app.selectors";
-import { selectBodyshop } from "@/redux/user/user.selectors";
+import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
 import { formatBytes } from "@/util/uploadUtils";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { StyleSheet, View } from "react-native";
-import { Button, Divider, Text } from "react-native-paper";
+import * as Application from "expo-application";
+import Constants from "expo-constants";
+import { useTranslation } from "react-i18next";
+import { Alert, ScrollView, StyleSheet, View } from "react-native";
+import { Button, Card, Divider, List, Text } from "react-native-paper";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import UploadDeleteSwitch from "./upload-delete-switch";
@@ -13,44 +16,148 @@ import UploadDeleteSwitch from "./upload-delete-switch";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   deleteAfterUpload: selectDeleteAfterUpload,
+  currentUser: selectCurrentUser,
 });
 
-const mapDispatchToProps = (dispatch) => ({
-  toggleDeleteAfterUpload: () => dispatch(toggleDeleteAfterUpload()),
-});
+const mapDispatchToProps = (dispatch) => ({});
 export default connect(mapStateToProps, mapDispatchToProps)(Tab);
 
-function Tab({ bodyshop, deleteAfterUpload, toggleDeleteAfterUpload }) {
+function Tab({ bodyshop, currentUser }) {
+  const { t } = useTranslation();
+  const handleClearStorage = () => {
+    Alert.alert(
+      "Clear Local Cache",
+      "This will remove persisted Redux state. Media already uploaded won't be affected. Continue?",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Clear",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await AsyncStorage.removeItem("persist:root");
+              Alert.alert("Cleared", "Local cache cleared.");
+            } catch (_e) {
+              Alert.alert("Error", "Unable to clear local cache.");
+            }
+          },
+        },
+      ]
+    );
+  };
+
   return (
-    <View style={styles.container}>
-      <Text variant="titleLarge">Settings</Text>
-      <Text>
-        Media Storage:{" "}
-        {bodyshop?.uselocalmediaserver
-          ? bodyshop.localmediaserverhttp
-          : "Cloud"}
-      </Text>
-      {!bodyshop?.uselocalmediaserver && (
-        <Text>Job Size Limit: {formatBytes(bodyshop?.jobsizelimit)}</Text>
-      )}
-      <UploadDeleteSwitch />
-      <Button
-        onPress={() => {
-          AsyncStorage.removeItem("persist:root");
-        }}
-      >
-        Clear Storage
-      </Button>
-      <Divider />
-      <SignOutButton />
-    </View>
+    <SafeAreaView>
+      <ScrollView contentContainerStyle={styles.container}>
+        <Text variant="headlineMedium" style={styles.title}>
+          Settings
+        </Text>
+
+        <Card style={styles.section}>
+          <Card.Title title="Storage" />
+          <Card.Content>
+            <List.Section>
+              <View style={styles.inlineRow}>
+                <Text style={styles.switchLabel}>
+                  {" "}
+                  {t("mediabrowser.labels.deleteafterupload")}
+                </Text>
+                <UploadDeleteSwitch />
+              </View>
+              <List.Item
+                title="Media Storage"
+                description={
+                  bodyshop?.uselocalmediaserver
+                    ? bodyshop.localmediaserverhttp
+                    : "Cloud"
+                }
+                left={(props) => <List.Icon {...props} icon="database" />}
+              />
+              {!bodyshop?.uselocalmediaserver && (
+                <List.Item
+                  title="Job Size Limit"
+                  description={
+                    bodyshop?.jobsizelimit
+                      ? formatBytes(bodyshop.jobsizelimit)
+                      : "Not specified"
+                  }
+                  left={(props) => <List.Icon {...props} icon="harddisk" />}
+                />
+              )}
+            </List.Section>
+          </Card.Content>
+          <Card.Actions>
+            <Button
+              onPress={handleClearStorage}
+              mode="contained-tonal"
+              icon="delete-outline"
+            >
+              Clear Cache
+            </Button>
+          </Card.Actions>
+        </Card>
+
+        <Card style={styles.section}>
+          <Card.Content>
+            <Text style={styles.paragraph}>
+              Signed in to bodyshop:{" "}
+              {bodyshop?.shopname || bodyshop?.id || "Unknown"}
+            </Text>
+            <Text style={styles.paragraph}>
+              Signed in to as: {currentUser?.email || "Unknown"}
+            </Text>
+          </Card.Content>
+          <Card.Actions style={styles.actionsRow}>
+            <SignOutButton />
+          </Card.Actions>
+        </Card>
+
+        <Divider style={styles.divider} />
+        <Text style={styles.footerNote} variant="bodySmall">
+          {t("settings.labels.version", {
+            number: `${Constants.expoConfig.version}(${Application.nativeBuildVersion} - ${Constants.expoConfig.extra.expover})`,
+          })}
+        </Text>
+      </ScrollView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: "center",
+    paddingVertical: 24,
+    paddingHorizontal: 20,
+  },
+  title: {
+    marginBottom: 12,
+    fontWeight: "600",
+  },
+  section: {
+    marginBottom: 20,
+  },
+  inlineRow: {
+    flexDirection: "row",
     alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+  switchLabel: {
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  paragraph: {
+    marginBottom: 8,
+  },
+  actionsRow: {
+    justifyContent: "flex-end",
+  },
+  divider: {
+    marginTop: 8,
+  },
+  footerNote: {
+    textAlign: "center",
+    // color: "#666",
+    marginTop: 16,
   },
 });

components/settings/upload-delete-switch.jsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { StyleSheet, Text, View } from "react-native";
 import { Switch } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -19,35 +17,14 @@ export function UploadDeleteSwitch({
   deleteAfterUpload,
   toggleDeleteAfterUpload,
 }) {
-
-  const { t } = useTranslation();
   return (
-    <View style={styles.container}>
-      <Text style={styles.text}>
-        {t("mediabrowser.labels.deleteafterupload")}
-      </Text>
-      <Switch
-        // trackColor={{ false: '#767577', true: '#81b0ff' }}
-        // thumbColor={deleteAfterUpload ? 'tomato' : '#f4f3f4'}
-        //ios_backgroundColor="#3e3e3e"
-        onValueChange={() => {
-          toggleDeleteAfterUpload();
-        }}
-        value={deleteAfterUpload}
-      />
-    </View>
+    <Switch
+      onValueChange={() => {
+        toggleDeleteAfterUpload();
+      }}
+      value={deleteAfterUpload}
+    />
   );
 }
-const styles = StyleSheet.create({
-  container: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    margin: 10,
-  },
 
-  text: {
-    flex: 1,
-  },
-});
 export default connect(mapStateToProps, mapDispatchToProps)(UploadDeleteSwitch);