Progress update cleanup and UI improvements.

components/settings/settings.jsx

@@ -0,0 +1,56 @@
+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 { 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 { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import UploadDeleteSwitch from "./upload-delete-switch";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+  deleteAfterUpload: selectDeleteAfterUpload,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleDeleteAfterUpload: () => dispatch(toggleDeleteAfterUpload()),
+});
+export default connect(mapStateToProps, mapDispatchToProps)(Tab);
+
+function Tab({ bodyshop, deleteAfterUpload, toggleDeleteAfterUpload }) {
+  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>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

components/settings/upload-delete-switch.jsx

@@ -0,0 +1,53 @@
+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";
+import { toggleDeleteAfterUpload } from "../../redux/app/app.actions";
+import { selectDeleteAfterUpload } from "../../redux/app/app.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  deleteAfterUpload: selectDeleteAfterUpload,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleDeleteAfterUpload: () => dispatch(toggleDeleteAfterUpload()),
+});
+
+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>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    margin: 10,
+  },
+
+  text: {
+    flex: 1,
+  },
+});
+export default connect(mapStateToProps, mapDispatchToProps)(UploadDeleteSwitch);