feat(settings): improve system message channels design

upryzing · Aug 15, 2024 · c1f94a3 · c1f94a3
1 parent 7b3869b
commit c1f94a3
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 11 deletions.
diff --git a/i18n/strings/en.json b/i18n/strings/en.json
@@ -102,6 +102,13 @@
                     "description_placeholder": "Add a description…",
                     "set_description": "Set description",
                     "system_messages": "System messages",
+                    "system_messages_description": "When members join, leave or are kicked or banned, you can receive messages.",
+                    "system_message_channel_types": {
+                        "user_joined": "User joined",
+                        "user_left": "User left",
+                        "user_kicked": "User kicked",
+                        "user_banned": "User banned"
+                    },
                     "errors": {
                         "empty_server_name": "Server names cannot be empty!"
                     }

diff --git a/src/components/common/settings/sections/server/OverviewSettingsSection.tsx b/src/components/common/settings/sections/server/OverviewSettingsSection.tsx
@@ -1,12 +1,15 @@
-import {View} from 'react-native';
+import {Pressable, View} from 'react-native';
 import {useTranslation} from 'react-i18next';
 import {observer} from 'mobx-react-lite';
 
+// import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+
 import {Server} from 'revolt.js';
 
-import {currentTheme} from '@rvmob/Theme';
 import {GapView} from '@rvmob/components/layout';
 import {InputWithButton, Link, Text} from '@rvmob/components/common/atoms';
+import {SYSTEM_MESSAGE_CHANNEL_TYPES} from '@rvmob/lib/consts';
+import {currentTheme, styles} from '@rvmob/Theme';
 
 export const OverviewSettingsSection = observer(
   ({server}: {server: Server}) => {
@@ -87,16 +90,43 @@ export const OverviewSettingsSection = observer(
         <Text type={'h2'}>
           {t('app.servers.settings.overview.system_messages')}
         </Text>
-        <Text>
-          When members join/leave or are kicked/banned, you can receive
-          messages. (not final copy)
-        </Text>
-        <Text>
-          new {server.system_messages?.user_joined} leave{' '}
-          {server.system_messages?.user_left} kick{' '}
-          {server.system_messages?.user_kicked} ban{' '}
-          {server.system_messages?.user_banned}
+        <Text colour={currentTheme.foregroundSecondary}>
+          {t('app.servers.settings.overview.system_messages_description')}
         </Text>
+        {SYSTEM_MESSAGE_CHANNEL_TYPES.map(type => (
+          <Pressable
+            style={styles.settingsEntry}
+            key={`overview-settings-system-channels-${type}`}
+            onPress={() => {}}>
+            <View style={{flex: 1, flexDirection: 'column'}}>
+              <Text
+                key={`overview-settings-system-channels-${type}-name`}
+                style={{fontWeight: 'bold'}}>
+                {t(
+                  `app.servers.settings.overview.system_message_channel_types.${type}`,
+                )}
+              </Text>
+              <Text colour={currentTheme.foregroundSecondary}>
+                {server.system_messages?.[type] ?? 'None'}
+              </Text>
+            </View>
+            <View
+              style={{
+                width: 30,
+                height: 20,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+              {/* <View style={styles.iconContainer}>
+              <MaterialIcon
+                name={'edit'}
+                size={20}
+                color={currentTheme.foregroundPrimary}
+              />
+            </View> */}
+            </View>
+          </Pressable>
+        ))}
       </>
     );
   },

diff --git a/src/lib/consts.ts b/src/lib/consts.ts
@@ -197,6 +197,14 @@ export const STATUSES = [
   'Invisible',
 ] as const;
 
+// System message channel types
+export const SYSTEM_MESSAGE_CHANNEL_TYPES = [
+  'user_joined',
+  'user_left',
+  'user_kicked',
+  'user_banned',
+] as const;
+
 // Emoji regexes
 export const RE_CUSTOM_EMOJI = /:([0123456789ABCDEFGHJKMNPQRSTVWXYZ]{26}):/g;
 // https://github.com/mathiasbynens/emoji-regex/blob/3a5f0fbf4448826eb5ac91283b504e1c68fc928e/index.jss