allow for conversation resync

net/web/src/context/useConversationContext.hook.js

@@ -311,6 +311,7 @@ export function useConversationContext() {
       }
     },
     resync: () => {
+      updateState({ error: false });
       events.current.push({ type: EVENT_RESYNC });
       updateConversation();
     }

net/web/src/session/conversation/Conversation.jsx

@@ -1,11 +1,11 @@
-import { ConversationWrapper } from './Conversation.styled';
-import { SettingOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
+import { ConversationWrapper, StatusError } from './Conversation.styled';
+import { ExclamationCircleOutlined, SettingOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
 import { useConversation } from './useConversation.hook';
 import { Logo } from 'logo/Logo';
 import { AddTopic } from './addTopic/AddTopic';
 import { VirtualList } from './virtualList/VirtualList';
 import { TopicItem } from './topicItem/TopicItem';
-import { Progress, Spin } from 'antd';
+import { Progress, Spin, Tooltip } from 'antd';
 
 export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
 
@@ -23,6 +23,13 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
             <Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
           </div>
           <div class="label">{ state.subject }</div>
+          { state.error && (
+            <Tooltip placement="bottom" title="sync error">
+              <StatusError onClick={actions.resync}>
+                <ExclamationCircleOutlined />
+              </StatusError>
+            </Tooltip>
+          )}
           { state.display !== 'xlarge' && (
             <div class="button" onClick={openDetails}>
               <SettingOutlined />

net/web/src/session/conversation/Conversation.styled.js

@@ -88,3 +88,11 @@ export const ConversationWrapper = styled.div`
     flex-shrink: 0;
   }
 `
+
+export const StatusError = styled.div`
+  color: ${Colors.error};
+  font-size: 14px;
+  padding-left: 8px;
+  cursor: pointer;
+`
+

net/web/src/session/conversation/useConversation.hook.js

@@ -19,6 +19,7 @@ export function useConversation(cardId, channelId) {
     upload: false,
     uploadError: false,
     uploadPercent: 0,
+    error: false,
   });
 
   const viewport = useContext(ViewportContext);  
@@ -119,8 +120,8 @@ export function useConversation(cardId, channelId) {
       }
       return 1;
     });
-    const { loadingInit, loadingMore } = conversation.state;
-    updateState({ topics, loadingInit, loadingMore });
+    const { error, loadingInit, loadingMore } = conversation.state;
+    updateState({ topics, error, loadingInit, loadingMore });
     store.actions.setValue(`${channelId}::${cardId}`, Number(conversation.state.revision));
  
   }, [conversation]);
@@ -129,6 +130,9 @@ export function useConversation(cardId, channelId) {
     more: () => {
       conversation.actions.addHistory();
     },
+    resync: () => {
+      conversation.actions.resync();
+    },
     clearUploadError: () => {
     },
     cancelUpload: () => {

net/web/src/session/conversation/virtualList/VirtualList.jsx

@@ -350,6 +350,17 @@ export function VirtualList({ id, items, itemRenderer, loadMore }) {
         nomore.current = false;
       }, moreDelay);
     }
+
+    if (scrollTop.current > e.target.scrollTop) {
+      const len = containers.current.length;
+      const last = containers.current[len-1];
+      if (len > 0) {
+        if (e.target.scrollTop + state.listHeight < last.top) {
+          actions.unlatch();
+        }
+      }
+    }
+
     scrollTop.current = e.target.scrollTop;
     setScrollPos(e.target.scrollTop);
   }