setting topic focused state

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

@@ -33,14 +33,6 @@ export function ConversationHeader({ closeConversation, openDetails }) {
   );
 }
 
-const RenderItem = memo((props: { item: number }) => {
-  return (<TopicItem item={props.item} />)
-});
-
-const renderItemHandler = ({ item }: { item: number }) => {
-  return <RenderItem item={item} />
-}
-
 export function ConversationBody() {
   const { state, actions } = useConversation();
 
@@ -58,14 +50,16 @@ export function ConversationBody() {
   return (
     <KeyboardAvoidingView style={styles.thread} behavior="padding" keyboardVerticalOffset="100"
         enabled={Platform.OS === 'ios' ? true : false}>
-      <FlatList style={styles.topics}
-        ref={ref}
-        data={state.topics}
-        onMomentumScrollEnd={ Platform.OS === 'ios' ? noop : actions.unlatch }
-        onScrollBeginDrag={ Platform.OS !== 'ios' ? noop : actions.unlatch }
-        maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } }
-        inverted={true}
-        renderItem={renderItemHandler}
+      <FlatList style={styles.conversation}
+         contentContainerStyle={styles.topics}
+         ref={ref}
+         data={state.topics}
+         onMomentumScrollEnd={ Platform.OS === 'ios' ? noop : actions.unlatch }
+         onScrollBeginDrag={ Platform.OS !== 'ios' ? noop : actions.unlatch }
+         maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } }
+         inverted={true}
+         renderItem={({item}) => <TopicItem item={item} focused={item.topicId === state.focus} 
+           focus={() => actions.setFocus(item.topicId)} />}
         keyExtractor={item => item.topicId}
       />
       <View>

app/mobile/src/session/conversation/Conversation.styled.js

@@ -49,6 +49,9 @@ export const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   topics: {
+    paddingBottom: 32,
+  },
+  conversation: {
     flexShrink: 1,
     flexGrow: 1,
     minHeight: 0,

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

@@ -1,4 +1,5 @@
-import { FlatList, View, Text, TouchableOpacity, Modal, Image } from 'react-native';
+import { FlatList, View, Text, Modal, Image } from 'react-native';
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useTopicItem } from './useTopicItem.hook';
 import { styles } from './TopicItem.styled';
 import { Logo } from 'utils/Logo';
@@ -15,7 +16,7 @@ import Carousel from 'react-native-snap-carousel';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import avatar from 'images/avatar.png';
 
-export function TopicItem({ item }) {
+export function TopicItem({ item, focused, focus }) {
 
   const { state, actions } = useTopicItem(item);
 
@@ -53,7 +54,7 @@ export function TopicItem({ item }) {
   }
 
   return (
-    <View style={styles.item}>
+    <TouchableOpacity activeOpacity={1} style={styles.item} onPress={focus}>
       <View style={styles.header}>
         { state.logo && (
           <Image source={{ uri: state.logo }} style={{ width: 28, height: 28, borderRadius: 6 }} />
@@ -63,6 +64,11 @@ export function TopicItem({ item }) {
         )}
         <Text style={styles.name}>{ state.name }</Text>
         <Text style={styles.timestamp}>{ state.timestamp }</Text>
+        { focused && (
+          <View style={styles.focused}>
+            <MatIcons name="cloud-braces" size={24} color={Colors.background} />
+          </View>
+        )}
       </View>
       { state.status === 'confirmed' && (
         <>
@@ -113,7 +119,7 @@ export function TopicItem({ item }) {
           </GestureRecognizer>
         </View>
       </Modal> 
-    </View>
+    </TouchableOpacity>
   );
 }
 

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

@@ -7,6 +7,7 @@ export const styles = StyleSheet.create({
     borderColor: Colors.white,
     paddingTop: 8,
     paddingBottom: 8,
+    paddingRight: 16,
   },
   header: {
     display: 'flex',
@@ -42,5 +43,10 @@ export const styles = StyleSheet.create({
   status: {
     paddingLeft: 52,
   },
+  focused: {
+    position: 'absolute',
+    top: -16,
+    right: 16,
+  }
 })
 

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

@@ -9,6 +9,7 @@ export function useConversation() {
     logo: null,
     latched: true,
     momentum: false,
+    focus: null,
   });
 
   const conversation = useContext(ConversationContext);
@@ -47,6 +48,9 @@ export function useConversation() {
     clearMomentum: () => {
       updateState({ momentum: false });
     },
+    setFocus: (focus) => {
+      updateState({ focus });
+    },
   };
 
   return { state, actions };