rendering topic options

app/mobile/src/session/Session.jsx

@@ -45,8 +45,8 @@ export function Session() {
   const ConversationStackScreen = () => {
 
     const setConversation = (navigation, cardId, channelId, revision) => {
-      setSelectedConversation({ cardId, channelId, revision });
       navigation.navigate('conversation');
+      setSelectedConversation({ cardId, channelId, revision });
     }
     const clearConversation = (navigation) => {
       navigation.dispatch(

app/mobile/src/session/conversation/Conversation.jsx

@@ -59,7 +59,7 @@ export function ConversationBody() {
          maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } }
          inverted={true}
          renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
-           focus={() => actions.setFocus(item.topicId)} />}
+           focus={() => actions.setFocus(item.topicId)} hosting={state.host == null} />}
         keyExtractor={item => item.topicId}
       />
       <View>

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -16,9 +16,9 @@ import Carousel from 'react-native-snap-carousel';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import avatar from 'images/avatar.png';
 
-export function TopicItem({ item, focused, focus }) {
+export function TopicItem({ item, focused, focus, hosting }) {
 
-  const { state, actions } = useTopicItem(item);
+  const { state, actions } = useTopicItem(item, hosting);
 
   const renderAsset = (asset) => {
     return (
@@ -66,7 +66,19 @@ export function TopicItem({ item, focused, focus }) {
         <Text style={styles.timestamp}>{ state.timestamp }</Text>
         { focused && (
           <View style={styles.focused}>
-            <MatIcons name="cloud-braces" size={24} color={Colors.background} />
+            { state.deletable && (
+              <TouchableOpacity style={styles.icon}>
+                <MatIcons name="delete-outline" size={20} color={Colors.white} />
+              </TouchableOpacity>
+            )}
+            { state.editable && (
+              <TouchableOpacity style={styles.icon}>
+                <MatIcons name="pencil-outline" size={20} color={Colors.white} />
+              </TouchableOpacity>
+            )}
+            <TouchableOpacity style={styles.icon}>
+              <MatIcons name="block-helper" size={18} color={Colors.white} />
+            </TouchableOpacity>
           </View>
         )}
       </View>

app/mobile/src/session/conversation/topicItem/TopicItem.styled.js

@@ -46,7 +46,19 @@ export const styles = StyleSheet.create({
   focused: {
     position: 'absolute',
     top: -16,
-    right: 16,
-  }
+    right: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    paddingTop: 4,
+    paddingBottom: 4,
+    borderRadius: 4,
+    paddingLeft: 8,
+    paddingRight: 8,
+  },
+  icon: {
+    paddingLeft: 4,
+    paddingRight: 4,
+  },
 })
 

app/mobile/src/session/conversation/topicItem/useTopicItem.hook.js

@@ -5,7 +5,7 @@ import moment from 'moment';
 import { useWindowDimensions } from 'react-native';
 import Colors from 'constants/Colors';
 
-export function useTopicItem(item) {
+export function useTopicItem(item, hosting) {
 
   const [state, setState] = useState({
     name: null,
@@ -20,6 +20,8 @@ export function useTopicItem(item) {
     activeId: null,
     fontSize: 14,
     fontColor: Colors.text,
+    editable: false,
+    deletable: false,
   });
 
   const profile = useContext(ProfileContext);
@@ -121,7 +123,10 @@ export function useTopicItem(item) {
       timestamp = moment(date).format('M/DD/YYYY');
     }
 
-    updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets });
+    const editable = detail.guid === identity.guid;
+    const deletable = editable || hosting;
+
+    updateState({ logo, name, known, message, fontSize, fontColor, timestamp, transform, status, assets, deletable, editable });
   }, [card, item]);
 
   const actions = {

app/mobile/src/session/conversation/useConversation.hook.js

@@ -10,6 +10,7 @@ export function useConversation() {
     latched: true,
     momentum: false,
     focus: null,
+    host: null,
   });
 
   const conversation = useContext(ConversationContext);
@@ -19,7 +20,7 @@ export function useConversation() {
   }
 
   useEffect(() => {
-    const { subject, logo, topics } = conversation.state;
+    const { subject, logo, topics, host } = conversation.state;
     const items = Array.from(topics.values());
     const sorted = items.sort((a, b) => {
       const aTimestamp = a?.detail?.created;
@@ -32,7 +33,7 @@ export function useConversation() {
       }
       return -1;
     });
-    updateState({ topics, subject, logo, topics: sorted });
+    updateState({ topics, subject, logo, host, topics: sorted });
   }, [conversation]);
 
   const actions = {

app/mobile/src/session/details/memberItem/MemberItem.jsx

@@ -11,7 +11,9 @@ export function MemberItem({ hostId, editable, members, item }) {
 
   const setMember = async (member) => {
     try {
-      actions.setMember(member);
+      if (editable) {
+        actions.setMember(member);
+      }
     }
     catch (err) {
       console.log(err);

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

@@ -112,7 +112,7 @@ export function Profile() {
             <Ionicons name="picture" size={14} color={Colors.white} />
           </TouchableOpacity>
         </View>
-        { state.disconnected && (
+        { state.disconnected > 3 && (
           <View style={styles.alert}>
             <Text style={styles.disconnected}>Disconnected</Text>
           </View>