fixing layout issues with list

net/web/src/carousel/Carousel.jsx

@@ -134,12 +134,14 @@ export function Carousel({ pad, ready, error, items, itemRenderer, itemRemove })
         </div>
       )}
       { ready && !error && (
+        <>
           <div class="carousel" style={{ paddingLeft: pad + 32 }} ref={onRefSet}>
             {slots}
           </div>
-      )}
           <div class="left-arrow" onClick={onRight} style={{ marginLeft: pad, visibility: scrollRight }}><LeftOutlined /></div>
           <div class="right-arrow" onClick={onLeft} style={{ visibility: scrollLeft }}><RightOutlined /></div>
+        </>
+      )}
     </CarouselWrapper>
   );
 }

net/web/src/carousel/Carousel.styled.js

@@ -27,6 +27,7 @@ export const CarouselWrapper = styled.div`
     justify-content: center; 
     color: #888888;
     background-color: #eeeeee;
+    margin-left: 72px;
   }
 
   .carousel::-webkit-scrollbar {

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

@@ -310,6 +310,13 @@ export function useCardContext() {
       else {
         await addContactChannelTopic(node, token, channelId, message, files);
       }
+      try {
+        resync.current.push(cardId);
+        await setCards(null);
+      }
+      catch (err) {
+        console.log(err);
+      }
     },
     getChannel: (cardId, channelId) => {
       let card = cards.current.get(cardId);

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

@@ -68,9 +68,14 @@ export function useChannelContext() {
   }
 
   const setChannels = async (rev) => {
+    let force = false;
+    if (rev == null) {
+      force = true;
+      rev = revision.current;
+    }
     if (next.current == null) {
       next.current = rev;
-      if (revision.current !== rev) {
+      if (force || revision.current !== rev) {
         await updateChannels();
         updateState({ init: true, channels: channels.current });
         revision.current = rev;
@@ -138,6 +143,12 @@ export function useChannelContext() {
       else {
         await addChannelTopic(access.current, channelId, message, files);
       }
+      try {
+        await setChannels(null);
+      }
+      catch (err) {
+        console.log(err);
+      }
     },
     getChannel: (channelId) => {
       return channels.current.get(channelId);

net/web/src/session/conversation/addTopic/AddTopic.jsx

@@ -24,6 +24,7 @@ export function AddTopic({ cardId, channelId }) {
   }
 
   const addTopic = async () => {
+    if (state.messageText || state.assets.length) {
       try {
         await actions.addTopic();
       }
@@ -34,6 +35,7 @@ export function AddTopic({ cardId, channelId }) {
           content: 'Please try again.',
         });
       }
+    }
   };
 
   const onSelectImage = (e) => {

net/web/src/session/conversation/topicItem/TopicItem.jsx

@@ -96,26 +96,6 @@ export function TopicItem({ host, topic }) {
     return <div style={{ color: state.textColor, fontSize: state.textSize }}>{ state.message?.text }</div>
   }
 
-  if (!state.confirmed) {
-    return (
-      <TopicItemWrapper>
-        <div class="avatar">
-          <Logo width={32} height={32} radius={4} url={state.imageUrl} />
-        </div>
-        <div class="topic">
-          <div class="info">
-            <div class={nameClass}>{ name }</div>
-            <div>{ getTime(offset) }</div>
-          </div>
-          <Skeleton size={'small'} active={true} />
-          <div class="options">
-            <Options />
-          </div>
-        </div>
-      </TopicItemWrapper>
-    )
-  }
-
   return (
     <TopicItemWrapper>
       <div class="topic-header">
@@ -127,6 +107,18 @@ export function TopicItem({ host, topic }) {
           <div>{ getTime(offset) }</div>
         </div>
       </div>
+      { !state.confirmed && (
+        <div>
+          <div class="message">
+            <Skeleton size={'small'} active={true} />
+          </div>
+          <div class="options">
+            <Options />
+          </div>
+        </div>
+      )}
+      { state.confirmed && (
+        <div>
           { state.assets.length > 0 && (
             <div class="topic-assets">
               <Carousel pad={40} ready={state.ready} error={state.error} items={state.assets} itemRenderer={renderAsset} />
@@ -138,6 +130,8 @@ export function TopicItem({ host, topic }) {
           <div class="options">
             <Options />
           </div>
+        </div>
+      )}
     </TopicItemWrapper>
   )
 }