From 2711b579ba6982cf7dee9805bc80506703bc943f Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Fri, 15 Sep 2023 14:28:01 -0700
Subject: [PATCH] added remaining options to profile settings screen

---
 app/mobile/src/session/profile/Profile.jsx    | 17 ++--
 .../src/session/profile/Profile.styled.js     |  9 ++
 app/mobile/src/session/settings/Settings.jsx  | 90 ++++++++++++++++++-
 .../src/session/settings/Settings.styled.js   | 13 +++
 .../src/session/settings/useSettings.hook.js  |  1 +
 app/mobile/src/utils/Prompt.jsx               |  2 +-
 app/mobile/src/utils/Prompt.styled.js         | 10 +++
 7 files changed, 134 insertions(+), 8 deletions(-)

diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx
index 9e711dbc..c562b9fe 100644
--- a/app/mobile/src/session/profile/Profile.jsx
+++ b/app/mobile/src/session/profile/Profile.jsx
@@ -77,10 +77,10 @@ export function Profile({ drawer }) {
           <Text style={styles.drawerHeader} adjustsFontSizeToFit={true}>{ state.username }</Text>
           <View style={styles.drawerFrame}>
             <Image source={state.imageSource} style={styles.drawerLogo} resizeMode={'contain'} />
-            <View style={styles.drawerLogoEdit}>
+            <TouchableOpacity activeOpacity={1} style={styles.drawerLogoEdit} onPress={onGallery}>
               <Text style={styles.editLabel}>{ state.strings.edit }</Text>
               <MatIcons name="square-edit-outline" size={14} color={Colors.linkText} />
-            </View>
+            </TouchableOpacity>
           </View>
           <View style={styles.drawerEditDivider}>
             <View style={styles.drawerLine} />
@@ -98,7 +98,7 @@ export function Profile({ drawer }) {
             )}
           </View>
           <View style={styles.drawerEntry}>
-            <AntIcons name="enviromento" style={styles.icon} size={20} color={Colors.text} />
+            <AntIcons name="enviromento" style={styles.drawerIcon} size={20} color={Colors.text} />
             { state.location && (
               <Text style={styles.locationSet}>{ state.location }</Text>
             )}
@@ -107,7 +107,7 @@ export function Profile({ drawer }) {
             )}
           </View>
           <View style={styles.drawerEntry}>
-            <MatIcons name="book-open-outline" style={styles.descriptionIcon} size={20} color={Colors.text} />
+            <MatIcons name="book-open-outline" style={styles.drawerDescriptionIcon} size={20} color={Colors.text} />
             { state.description && (
               <Text style={styles.descriptionSet}>{ state.description }</Text>
             )}
@@ -115,7 +115,14 @@ export function Profile({ drawer }) {
               <Text style={styles.descriptionUnset}>Description</Text>
             )}
           </View>
-          <View style={styles.drawerDivider} />
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1}>
+            <MatIcons name="eye-outline" style={styles.drawerIcon} size={20} color={Colors.text} />
+            <TouchableOpacity activeOpacity={1} onPress={() => setVisible(!state.searchable)}>
+              <Text style={styles.visibleLabel}>{ state.strings.visibleRegistry }</Text>
+            </TouchableOpacity>
+            <Switch value={state.searchable} style={Platform.OS==='ios' ? styles.visibleSwitch : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
+                trackColor={styles.track} onValueChange={setVisible} />
+          </TouchableOpacity>
         </View>
       )}
       { !drawer && (
diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js
index a80ececc..b0465068 100644
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@@ -209,10 +209,19 @@ export const styles = StyleSheet.create({
     paddingLeft: 8,
     paddingRight: 16,
   },
+  drawerDescriptionIcon: {
+    alignSelf: 'flex-start',
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
   icon: {
     paddingLeft: 8,
     paddingRight: 16,
   },
+  drawerIcon: {
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
   locationSet: {
     fontSize: 16,
     color: Colors.text,
diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx
index 4e24603a..b8063d06 100644
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@@ -163,7 +163,93 @@ export function Settings({ drawer }) {
   return (
     <>
       { drawer && (
-        <Text>SETTINGS DRAWER</Text>
+        <>
+          <View style={styles.drawerDivider} />
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1}>
+            <View style={styles.icon}>
+              <MatIcons name="bell-outline" size={20} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <TouchableOpacity activeOpacity={1} onPress={() => setNotifications(!state.pushEnabled)}>
+                <Text style={styles.optionText}>{ state.strings.enableNotifications }</Text>
+              </TouchableOpacity>
+              <Switch value={state.pushEnabled} style={Platform.OS==='ios' ? styles.notifications : {}} thumbColor={Colors.sliderGrip} ios_backgroundColor={Colors.disabledIndicator}
+                  trackColor={styles.track} onValueChange={setNotifications} />
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={actions.showEditSeal}>
+            <View style={styles.icon}>
+              <MatIcons name="lock-outline" size={20} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              { state.sealEnabled && (
+                <Text style={styles.optionLink}>{ state.strings.manageTopics }</Text>
+              )}
+              { !state.sealEnabled && (
+                <Text style={styles.optionLink}>{ state.strings.enableTopics }</Text>
+              )}
+            </View>
+          </TouchableOpacity>
+          <View style={styles.drawerDivider} />
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={actions.promptLogout}>
+            <View style={styles.icon}>
+              <MatIcons name="logout" size={20} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionLink}>{ state.strings.logout }</Text>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={actions.showLogin}>
+            <View style={styles.icon}>
+              <MatIcons name="login" size={20} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionLink}>{ state.strings.changeLogin }</Text>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={actions.showDelete}>
+            <View style={styles.icon}>
+              <MatIcons name="trash-can-outline" size={20} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <Text style={styles.dangerLink}>{ state.strings.deleteAccount }</Text>
+            </View>
+          </TouchableOpacity>
+          <View style={styles.drawerDivider} />
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={actions.showBlockedContacts}>
+            <View style={styles.icon}>
+              <MatIcons name="account-multiple-outline" size={24} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionLink}>{ state.strings.blockedContacts }</Text>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={actions.showBlockedTopics}>
+            <View style={styles.icon}>
+              <MatIcons name="book-open-outline" size={20} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionLink}>{ state.strings.blockedTopics }</Text>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={actions.showBlockedMessages}>
+            <View style={styles.icon}>
+              <MatIcons name="comment-text-multiple-outline" size={20} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionLink}>{ state.strings.blockedMessages }</Text>
+            </View>
+          </TouchableOpacity>
+          <View style={styles.drawerDivider} />
+          <TouchableOpacity style={styles.drawerEntry} activeOpacity={1} onPress={() => Linking.openURL('https://github.com/balzack/databag/discussions')}>
+            <View style={styles.icon}>
+              <MatIcons name="help-network-outline" size={24} color={Colors.text} />
+            </View>
+            <View style={styles.optionControl}>
+              <Text style={styles.optionLink}>{ state.strings.support }</Text>
+            </View>
+          </TouchableOpacity>
+        </>
       )}
       { !drawer && (
         <ScrollView style={styles.content}>
@@ -254,7 +340,7 @@ export function Settings({ drawer }) {
                   </TouchableOpacity>
                 </View>
               </TouchableOpacity>
-     
+           
             </View>
 
             <Text style={styles.label}>{ state.strings.account }</Text>
diff --git a/app/mobile/src/session/settings/Settings.styled.js b/app/mobile/src/session/settings/Settings.styled.js
index 6423d027..e6351546 100644
--- a/app/mobile/src/session/settings/Settings.styled.js
+++ b/app/mobile/src/session/settings/Settings.styled.js
@@ -2,6 +2,19 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
+  drawerDivider: {
+    width: '80%',
+    borderWidth: 1,
+    borderColor: Colors.areaBase,
+    marginTop: 16,
+  },
+  drawerEntry: {
+    width: '80%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'row',
+    padding: 8,
+  },
   content: {
     width: '100%',
     height: '100%',
diff --git a/app/mobile/src/session/settings/useSettings.hook.js b/app/mobile/src/session/settings/useSettings.hook.js
index 4e6293d9..c701ebda 100644
--- a/app/mobile/src/session/settings/useSettings.hook.js
+++ b/app/mobile/src/session/settings/useSettings.hook.js
@@ -289,6 +289,7 @@ export function useSettings() {
     promptLogout: () => {
       display.actions.showPrompt({
         title: state.strings.loggingOut,
+        centerButtons: true,
         ok: { label: state.strings.confirmLogout, action: app.actions.logout, failed: () => {
           Alert.alert(
             state.strings.error,
diff --git a/app/mobile/src/utils/Prompt.jsx b/app/mobile/src/utils/Prompt.jsx
index 6ad74bb8..69a54ed7 100644
--- a/app/mobile/src/utils/Prompt.jsx
+++ b/app/mobile/src/utils/Prompt.jsx
@@ -45,7 +45,7 @@ export function Prompt() {
           <View style={styles.modalBase}>
             <View style={styles.modalContainer}>
               <Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text>
-              <View style={styles.modalButtons}>
+              <View style={display.state.prompt?.centerButtons ? styles.centerModalButtons : styles.modalButtons}>
                 { display.state.prompt?.cancel && (
                   <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
                     <Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
diff --git a/app/mobile/src/utils/Prompt.styled.js b/app/mobile/src/utils/Prompt.styled.js
index 85921a8a..b0588a9a 100644
--- a/app/mobile/src/utils/Prompt.styled.js
+++ b/app/mobile/src/utils/Prompt.styled.js
@@ -98,5 +98,15 @@ export const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     flexDirection: 'row',
   },
+  centerModalButtons: {
+    width: '100%',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 16,
+    display: 'flex',
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    flexDirection: 'row',
+  },
 });