rendering upload progress

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

@@ -31,6 +31,7 @@ export function useUploadContext() {
           upload: entry.index,
           topicId: topic,
           active: entry.active,
+          uploaded: entry.assets.length,
           index: entry.assets.length + active,
           count: entry.assets.length + entry.files.length + active,
           error: entry.error,

net/web/src/session/account/Account.styled.js

@@ -35,7 +35,7 @@ export const AccountWrapper = styled.div`
   .content {
     min-height: 0;
     width: 100%;
-    overflow: scroll;
+    overflow: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;

net/web/src/session/cards/Cards.styled.js

@@ -10,7 +10,7 @@ export const CardsWrapper = styled.div`
 
   .view {
     min-height: 0;
-    overflow: scroll;
+    overflow: auto;
     flex-grow: 1;
   }
   

net/web/src/session/channels/Channels.styled.js

@@ -10,7 +10,7 @@ export const ChannelsWrapper = styled.div`
 
   .view {
     min-height: 0;
-    overflow: scroll;
+    overflow: auto;
     flex-grow: 1;
   }
  

net/web/src/session/channels/addChannel/AddChannel.styled.js

@@ -18,7 +18,7 @@ export const AddChannelWrapper = styled.div`
     width: 100%;
     min-height: 100px;
     max-height: 200px;
-    overflow: scroll;
+    overflow: auto;
     border: 1px solid ${Colors.divider};
   }
 `;

net/web/src/session/contact/Contact.styled.js

@@ -37,7 +37,7 @@ export const ContactWrapper = styled.div`
   .content {
     min-height: 0;
     width: 100%;
-    overflow: scroll;
+    overflow: auto;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -92,7 +92,7 @@ export const ContactWrapper = styled.div`
   .view {
     width: 100%;
     height: 100%;
-    overflow: scroll;
+    overflow: auto;
     display: flex;
     flex-direction: column;
     align-items: center;

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

@@ -5,6 +5,7 @@ import { Logo } from 'logo/Logo';
 import { AddTopic } from './addTopic/AddTopic';
 import { VirtualList } from './virtualList/VirtualList';
 import { TopicItem } from './topicItem/TopicItem';
+import { Progress } from 'antd';
 
 export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
 
@@ -40,6 +41,12 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
       </div>
       <div class="divider">
         <div class="line" />
+        { state.upload && (
+          <div class="progress-active" style={{ width: state.uploadPercent + '%' }} />
+        )}
+        { !state.upload && (
+          <div class="progress-idle" />
+        )}
       </div>
       <div class="topic">
         <AddTopic cardId={cardId} channelId={channelId} />

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

@@ -62,6 +62,14 @@ export const ConversationWrapper = styled.div`
     .line {
       border-top: 1px solid ${Colors.divider};
     }
+
+    .progress-idle {
+      border-top: 1px solid ${Colors.divider};
+    }
+
+    .progress-active {
+      border-top: 1px solid ${Colors.primary};
+    }
   }
 
   .topic {

net/web/src/session/conversation/topicItem/TopicItem.styled.js

@@ -5,6 +5,10 @@ export const TopicItemWrapper = styled.div`
   flex-direction: column;
   width: 100%;
 
+  &:hover .options {
+    visibility: visible;
+  }
+
   .topic-header {
     display: flex;
     flex-direction: row;

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

@@ -3,6 +3,7 @@ import { ViewportContext } from 'context/ViewportContext';
 import { CardContext } from 'context/CardContext';
 import { ChannelContext } from 'context/ChannelContext';
 import { ConversationContext } from 'context/ConversationContext';
+import { UploadContext } from 'context/UploadContext';
 
 export function useConversation(cardId, channelId) {
 
@@ -12,12 +13,16 @@ export function useConversation(cardId, channelId) {
     logo: null,
     subject: null,
     topics: [],
+    upload: false,
+    uploadError: false,
+    uploadPercent: 0,
   });
 
   const viewport = useContext(ViewportContext);  
   const card = useContext(CardContext);
   const channel = useContext(ChannelContext);
   const conversation = useContext(ConversationContext);
+  const upload = useContext(UploadContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
@@ -27,6 +32,38 @@ export function useConversation(cardId, channelId) {
     updateState({ display: viewport.state.display });
   }, [viewport]);
 
+  useEffect(() => {
+    let active = false;
+    let uploadError = false;
+    let uploadPercent = 0;
+    let uploadIndex = 0;
+    let uploadCount = 0;
+    let uploadActive = { loaded: 0, total: 0 };
+    let uploadActiveCount = 0;
+
+    const progress = upload.state.progress.get(`${cardId ? cardId : ''}:${channelId}`);
+
+    if (progress) {
+      progress.forEach((entry) => {
+        active = true;
+        if (entry.error) {
+          uploadError = true;
+        }
+        uploadIndex += entry.uploaded;
+        uploadCount += entry.count;
+        if (entry.active) {
+          uploadActiveCount += 1;
+          uploadActive.loaded += entry.active.loaded;
+          uploadActive.total += entry.active.total;
+        }
+      });
+      uploadPercent = (uploadIndex + (uploadActiveCount * (uploadActive.loaded / uploadActive.total)) / uploadCount);
+      uploadPercent = Math.floor(uploadPercent * 100);
+    }
+
+    updateState({ upload: active, uploadError, uploadPercent });
+  }, [cardId, channelId, upload]);
+
   useEffect(() => {
 
     let chan, image, subject, logo; 
@@ -85,6 +122,10 @@ export function useConversation(cardId, channelId) {
     more: () => {
       conversation.actions.addHistory();
     },
+    clearUploadError: () => {
+    },
+    cancelUpload: () => {
+    },
   };
 
   return { state, actions };

net/web/src/session/details/Details.styled.js

@@ -35,7 +35,7 @@ export const DetailsWrapper = styled.div`
   .content {
     min-height: 0;
     width: 100%;
-    overflow: scroll;
+    overflow: auto;
     display: flex;
     flex-direction: column;
     padding-top: 32px;
@@ -43,7 +43,6 @@ export const DetailsWrapper = styled.div`
     flex-grow: 1;
     position: relative;
     min-height: 0;
-    overflow: scroll;
 
     .label {
       padding-top: 16px;

net/web/src/session/details/editMembers/EditMembers.styled.js

@@ -11,7 +11,7 @@ export const EditMembersWrapper = styled.div`
     width: 100%;
     min-height: 100px;
     max-height: 200px;
-    overflow: scroll;
+    overflow: auto;
     border: 1px solid ${Colors.divider};
   }
 

net/web/src/session/listing/Listing.styled.js

@@ -10,7 +10,7 @@ export const ListingWrapper = styled.div`
 
   .view {
     min-height: 0;
-    overflow: scroll;
+    overflow: auto;
     flex-grow: 1;
   }
   

net/web/src/session/profile/Profile.styled.js

@@ -36,7 +36,7 @@ export const ProfileWrapper = styled.div`
   .content {
     min-height: 0;
     width: 100%;
-    overflow: scroll;
+    overflow: auto;
     display: flex;
     flex-direction: row;
     justify-content: center;
@@ -125,7 +125,7 @@ export const ProfileWrapper = styled.div`
   .view {
     width: 100%;
     height: 100%;
-    overflow: scroll;
+    overflow: auto;
     display: flex;
     flex-direction: column;
     align-items: center;