building out refactored contact screen

app/mobile/src/constants/Strings.js

@@ -85,6 +85,24 @@ const Strings = [
     // contacts page
     add: 'Add',
     back: 'Back',
+
+    confirmed: 'Saved',
+    pending: 'Unknown Contact',
+    connecting: 'Request Sent',
+    connected: 'Connected',
+    requested: 'Request Received',
+    unsaved: 'Unsaved Contact',
+    offsync: 'Offsync',
+
+    saveContact: 'Save Contact',
+    requestConnection: 'Request Connection',
+    deleteContact: 'Delete Contact',
+    blockContact: 'Block Contact',
+    reportContact: 'Report Contact',
+    cancelRequest: 'Cancel Request',
+    acceptConnection: 'Accept Connection',
+    ignoreContact: 'Ignore Contact',
+    resyncContact: 'Resync Contact',
   },
   {
     visibleRegistry: 'Visible dans le Registre',

app/mobile/src/session/contact/Contact.jsx

@@ -327,7 +327,21 @@ export function Contact({ contact, drawer, back }) {
               { !state.name && (
                 <Text style={styles.nameUnset}>{ state.strings.name }</Text>
               )}
+              <View style={styles.usernameStatus}>
                 <Text style={styles.username} numberOfLines={1}>{ state.username }</Text>
+                <View style={styles.status}>
+                  { state.status === 'connected' && (
+                    <View style={styles.statusConnected}>
+                      <Text style={styles.statusLabel}>Connected</Text>
+                    </View>
+                  )}
+                  { state.status !== 'connected' && (
+                    <View style={styles.statusConnected}>
+                      <Text style={styles.statusLabel}>Connected</Text>
+                    </View>
+                  )}
+                </View>
+              </View>
               <View style={styles.attributes}>
                 <View style={styles.entry}>
                   <AntIcons name="enviromento" style={styles.icon} size={20} color={Colors.text} />

app/mobile/src/session/contact/Contact.styled.js

@@ -83,6 +83,28 @@ export const styles = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
   },
+  usernameStatus: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  status: {
+    display: 'flex',
+    flexGrow: 1,
+    paddingRight: 32,
+    alignItems: 'flex-end',
+  },
+  statusConnected: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+    borderRadius: 8,
+    backgroundColor: 'yellow',
+  },
+  statusLabel: {
+    color: Colors.text,
+  },
   attributes: {
     marginLeft: 16,
     marginRight: 16,