diff --git a/net/web/src/context/useUploadContext.hook.js b/net/web/src/context/useUploadContext.hook.js
index 3f38d671..cb012212 100644
--- a/net/web/src/context/useUploadContext.hook.js
+++ b/net/web/src/context/useUploadContext.hook.js
@@ -111,6 +111,19 @@ export function useUploadContext() {
cancelContactTopic: (cardId, channelId, topicId) => {
abort(`${cardId}:${channelId}`, topicId);
},
+ clearErrors: (cardId, channelId) => {
+ const key = cardId ? `${cardId}:${channelId}` : `:${channelId}`;
+ const topics = channels.current.get(key);
+ if (topics) {
+ topics.forEach((topic, topicId) => {
+ if (topic.error) {
+ topic.cancel.abort();
+ topics.delete(topicId);
+ updateProgress();
+ }
+ });
+ }
+ },
clear: () => {
channels.current.forEach((topics, channelId) => {
topics.forEach((assets, topicId) => {
diff --git a/net/web/src/session/conversation/Conversation.jsx b/net/web/src/session/conversation/Conversation.jsx
index 7c2d16f6..e7f230f1 100644
--- a/net/web/src/session/conversation/Conversation.jsx
+++ b/net/web/src/session/conversation/Conversation.jsx
@@ -58,7 +58,10 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
- { state.upload && (
+ { state.uploadError && (
+
+ )}
+ { state.upload && !state.uploadError && (
)}
{ !state.upload && (
@@ -67,6 +70,17 @@ export function Conversation({ closeConversation, openDetails, cardId, channelId
+ { state.uploadError && (
+
+
+
+ actions.clearUploadErrors(cardId, channelId)}>
+
+
+
+
+
+ )}
);
diff --git a/net/web/src/session/conversation/Conversation.styled.js b/net/web/src/session/conversation/Conversation.styled.js
index d41d67c0..1c1ff574 100644
--- a/net/web/src/session/conversation/Conversation.styled.js
+++ b/net/web/src/session/conversation/Conversation.styled.js
@@ -77,15 +77,34 @@ export const ConversationWrapper = styled.div`
.progress-idle {
border-top: 1px solid ${Colors.divider};
+ height: 1px;
}
.progress-active {
border-top: 1px solid ${Colors.primary};
+ height: 1px;
+ }
+
+ .progress-error {
+ border-top: 1px solid ${Colors.alert};
+ width: 100%;
+ height: 1px;
+ display: flex;
+ justify-content: flex-end;
}
}
.topic {
flex-shrink: 0;
+ position: relative;
+
+ .upload-error {
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin-right: 16px;
+ cursor-pointer;
+ }
}
`
diff --git a/net/web/src/session/conversation/useConversation.hook.js b/net/web/src/session/conversation/useConversation.hook.js
index 814454eb..9bc0aa70 100644
--- a/net/web/src/session/conversation/useConversation.hook.js
+++ b/net/web/src/session/conversation/useConversation.hook.js
@@ -133,7 +133,8 @@ export function useConversation(cardId, channelId) {
resync: () => {
conversation.actions.resync();
},
- clearUploadError: () => {
+ clearUploadErrors: (cardId, channelId) => {
+ upload.actions.clearErrors(cardId, channelId);
},
cancelUpload: () => {
},