support thread latching

app/mobile/src/context/useConversationContext.hook.js

@@ -8,6 +8,7 @@ export function useConversationContext() {
   const [state, setState] = useState({
     subject: null,
     logo: null,
+    revision: null,
     contacts: [],
     topics: new Map(),
   });
@@ -152,7 +153,12 @@ export function useConversationContext() {
             // update revision
             revision.current = channelItem.revision;
             if (curView == setView.current) {
-console.log("update:", topics.current.size);
+              if (cardId) {
+                card.actions.setChannelReadRevision(cardId, channelId, revision.current);
+              }
+              else {
+                channel.actions.setReadRevision(channelId, revision.current);
+              }
               updateState({ topics: topics.current });
             }
 

app/mobile/src/session/Session.jsx

@@ -70,7 +70,9 @@ export function Session() {
     }, [selected]);      
 
     return (
-      <ConversationStack.Navigator screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}>
+      <ConversationStack.Navigator
+          screenOptions={({ route }) => ({ headerShown: true, headerTintColor: Colors.primary })}
+          screenListeners={{ state: (e) => { if (e?.data?.state?.index === 0 && selected) { setSelected(null); }}, }}>
         <ConversationStack.Screen name="channels" options={{
             headerStyle: { backgroundColor: Colors.titleBackground }, 
             headerBackTitleVisible: false, 

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

@@ -1,6 +1,6 @@
 import { TextInput, View, TouchableOpacity, Text, } from 'react-native';
 import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useConversation } from './useConversation.hook';
 import { styles } from './Conversation.styled';
 import { useNavigation } from '@react-navigation/native';
@@ -26,25 +26,47 @@ export function ConversationHeader({ closeConversation, openDetails }) {
         <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
       </View>
       <TouchableOpacity style={styles.action} onPress={setDetails}>
-        <Ionicons name="setting" size={20} color={Colors.primary} />
+        <Ionicons name="setting" size={26} color={Colors.primary} />
       </TouchableOpacity>
     </View>
   );
 }
 
+function show(arg) {
+  console.log(arg);
+}
+
 export function ConversationBody() {
   const { state, actions } = useConversation();
 
+  const ref = useRef();
+
+  const latch = () => {
+    actions.latch();
+    ref.current.scrollToIndex({ animated: true, index: 0 });
+  }
+
   return (
     <View style={styles.topics}>
       <FlatList
+        ref={ref}
         data={state.topics}
-        maintainVisibleContentPosition={{ minIndexForVisibile: 0, }}
+        onScrollBeginDrag={actions.unlatch}
+        maintainVisibleContentPosition={ state.latched ? null : { minIndexForVisibile: 2, } }
         inverted={true}
         renderItem={({item}) => <View><Text>ITEM { item?.detail?.data }</Text></View>}
         keyExtractor={item => item.topicId}
       />
-      <AddTopic />
+      <View>
+        <AddTopic />
+        <View style={styles.latchbar}>
+          { !state.latched && (
+            <TouchableOpacity style={styles.latch} onPress={latch}>
+              <Ionicons name="downcircleo" size={24} color={Colors.primary} />
+            </TouchableOpacity>
+          )} 
+        </View>
+      </View>
     </View>
   );
 }
@@ -57,7 +79,7 @@ export function Conversation({ closeConversation, openDetails }) {
       <SafeAreaView edges={['right']} style={styles.header}>
         <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
         <TouchableOpacity style={styles.action} onPress={openDetails}>
-          <Ionicons name="setting" size={20} color={Colors.primary} />
+          <Ionicons name="setting" size={24} color={Colors.primary} />
         </TouchableOpacity>
         <TouchableOpacity style={styles.close} onPress={closeConversation}>
           <Ionicons name="close" size={20} color={Colors.text} />

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

@@ -73,5 +73,22 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.white,
     maxHeight: 64,
   },
+  addtopic: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  latchbar: {
+    position: 'absolute',
+    top: -16,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  latch: {
+    backgroundColor: Colors.formBackground,
+    borderRadius: 8,
+  },
 })
 

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

@@ -7,6 +7,7 @@ export function useConversation() {
     topics: [],
     subject: null,
     logo: null,
+    latched: true,
   });
 
   const conversation = useContext(ConversationContext);
@@ -33,6 +34,12 @@ export function useConversation() {
   }, [conversation]);
 
   const actions = {
+    latch: () => {
+      updateState({ latched: true });
+    },
+    unlatch: () => {
+      updateState({ latched: false });
+    },
   };
 
   return { state, actions };