render disconnected indicator

app/mobile/src/dashboard/Dashboard.styled.js

@@ -208,6 +208,7 @@ export const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     marginTop: 8,
+    alignItems: 'center',
   },
   tokenLabel: {
     fontSize: 16,

app/mobile/src/session/Session.jsx

@@ -22,6 +22,7 @@ import { ChannelsTitle, ChannelsBody, Channels } from './channels/Channels';
 import { useChannels } from './channels/useChannels.hook';
 import { CommonActions } from '@react-navigation/native';
 import { ConversationContext } from 'context/ConversationContext';
+import { ProfileIcon } from './profileIcon/ProfileIcon';
 
 const ConversationStack = createStackNavigator();
 const ProfileStack = createStackNavigator();
@@ -196,8 +197,8 @@ export function Session() {
         <SafeAreaView edges={['top', 'bottom']} style={styles.sidebar}>
           <SafeAreaView edges={['left']} style={styles.options}>
             <TouchableOpacity style={styles.option} onPress={openProfile}>
-              <Ionicons style={styles.icon} name={'user'} size={20} />
-              <Text>Profile</Text>
+              <ProfileIcon color={Colors.text} size={20} />
+              <Text style={styles.profileLabel}>Profile</Text>
             </TouchableOpacity>
             <TouchableOpacity style={styles.option} onPress={openCards}>
               <Ionicons style={styles.icon} name={'contacts'} size={20} />
@@ -353,7 +354,7 @@ export function Session() {
             headerShown: false,
             tabBarIcon: ({ focused, color, size }) => {
               if (route.name === 'Profile') {
-                return <Ionicons name={'user'} size={size} color={color} />;
+                return <ProfileIcon size={size} color={color} />
               }
               if (route.name === 'Conversation') {
                 return <Ionicons name={'message1'} size={size} color={color} />;

app/mobile/src/session/Session.styled.js

@@ -56,5 +56,17 @@ export const styles = StyleSheet.create({
   tabframe: {
     width: '100%',
     height: '100%',
-  }
+  },
+  disconnected: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.alert,
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+  },
+  profileLabel: {
+    paddingLeft: 8,
+  },
 });

app/mobile/src/session/profile/Profile.jsx

@@ -112,6 +112,14 @@ export function Profile() {
             <Ionicons name="picture" size={14} color={Colors.white} />
           </TouchableOpacity>
         </View>
+        { state.disconnected && (
+          <View style={styles.alert}>
+            <Text style={styles.disconnected}>Disconnected</Text>
+          </View>
+        )}
+        { !state.disconnected && (
+          <View style={styles.alert} />
+        )}
         <TouchableOpacity style={styles.detail} onPress={actions.showDetailEdit}>
           <View style={styles.attribute}>
             <Text style={styles.nametext}>{ state.name }</Text>

app/mobile/src/session/profile/Profile.styled.js

@@ -60,8 +60,10 @@ export const styles = StyleSheet.create({
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
   },
+  alert: {
+    height: 32,
+  },
   detail: {
-    paddingTop: 32,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
@@ -212,6 +214,9 @@ export const styles = StyleSheet.create({
   },
   saveText: {
     color: Colors.white,
-  }
+  },
+  disconnected: {
+    color: Colors.alert,
+  },
 })
 

app/mobile/src/session/profile/useProfile.hook.js

@@ -31,6 +31,7 @@ export function useProfile() {
     blockedChannels: false,
     blockedCards: false,
     tabbed: null,
+    disconnected: false,
   });
 
   const app = useContext(AppContext);
@@ -64,6 +65,11 @@ export function useProfile() {
     updateState({ searchable: account.state.status.searchable });
   }, [account]);
 
+  useEffect(() => {
+    const { disconnected } = app.state;
+    updateState({ disconnected });
+  }, [app]);
+
   const actions = {
     logout: () => {
       app.actions.logout();

app/mobile/src/session/profileIcon/ProfileIcon.jsx

@@ -0,0 +1,19 @@
+import { View } from 'react-native';
+import { useProfileIcon } from './useProfileIcon.hook';
+import { styles } from './ProfileIcon.styled';
+import Ionicons from '@expo/vector-icons/AntDesign';
+
+export function ProfileIcon({ size, color }) {
+
+  const { state, actions } = useProfileIcon();
+
+  return (
+    <View>
+      <Ionicons name={'user'} size={size} color={color} />
+      { state.disconnected && (
+        <View style={styles.disconnected} />
+      )}
+    </View>
+  );
+}
+

app/mobile/src/session/profileIcon/ProfileIcon.styled.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  disconnected: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.alert,
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+  },
+});

app/mobile/src/session/profileIcon/useProfileIcon.hook.js

@@ -0,0 +1,25 @@
+import { useState, useEffect, useContext } from 'react';
+import { AppContext } from 'context/AppContext';
+
+export function useProfileIcon() {
+
+  const [state, setState] = useState({
+    disconnected: false,
+  });
+
+  const app = useContext(AppContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    const { disconnected } = app.state
+    updateState({ disconnected });
+  }, [app]);
+
+  const actions = {};
+
+  return { state, actions };
+}
+