rendering channel item

net/web/src/session/channels/channelItem/ChannelItem.jsx

@@ -13,14 +13,22 @@ console.log(item.contacts);
           <div class="logo">
             <SolutionOutlined />
           </div>
+          <div class="details">
             <div class="subject">{ item.subject }</div>
+            <div class="message">{ item.message }</div>
+          </div>
         </div>
       )}
       { item.contacts.length === 1 && (
         <div class="item">
           <Logo url={item.logo} width={32} height={32} radius={8} />
+          <div class="details">
             <div class="subject">{ item.subject }</div>
+            <div class="message">{ item.message }</div>
+          </div>
+          { item.updated && (
             <div class="markup"></div>
+          )}
         </div>
       )}
       { item.contacts.length > 1 && (
@@ -28,8 +36,13 @@ console.log(item.contacts);
           <div class="logo">
             <AppstoreFilled />
           </div>
+          <div class="details">
             <div class="subject">{ item.subject }</div>
+            <div class="message">{ item.message }</div>
+          </div>
+          { item.updated && (
             <div class="markup"></div>
+          )}
         </div>
       )}
     </ChannelItemWrapper>

net/web/src/session/channels/channelItem/ChannelItem.styled.js

@@ -19,6 +19,7 @@ export const ChannelItemWrapper = styled.div`
     display: flex;
     flex-direction: row;
     align-items: center;
+    min-width: 0;
 
     .logo {
       display: flex;
@@ -29,14 +30,39 @@ export const ChannelItemWrapper = styled.div`
       height: 32px;
       border-radius: 8px;
       font-size: 18px;
+      flex-shrink: 0;
     }
 
-    .subject {
-      padding-left: 16px;
+    .details {
       flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      padding-left: 16px;
+      justify-content: center;
+      min-width: 0;
+
+      .subject {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .message {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: ${Colors.disabled};
+      }
     }
 
     .markup {
+      position: absolute;
+      right: 0;
+      border-radius: 8px;
+      background-color: ${Colors.background};
+      width: 8px;
+      height: 8px;
+      margin-right: 16px;
     }
   }
 `;

net/web/src/session/channels/useChannels.hook.js

@@ -86,6 +86,20 @@ export function useChannels() {
     chan.subject = subject;  
   }
 
+  const setMessage = (chan) => {
+    let message = "";
+    if (chan.data.channelSummary?.lastTopic?.dataType === 'superbasictopic') {
+      try {
+        message = JSON.parse(chan.data.channelSummary.lastTopic.data).text;
+      }
+      catch (err) {
+        console.log(err);
+      }
+    }
+
+    chan.message = message;
+  } 
+
   useEffect(() => {
     let merged = [];
     card.state.cards.forEach((value, key, map) => {
@@ -104,6 +118,7 @@ export function useChannels() {
       setUpdated(chan);
       setContacts(chan);
       setSubject(chan);
+      setMessage(chan);
     }); 
 
     const filtered = merged.filter((chan) => {

net/web/src/session/identity/Identity.styled.js

@@ -9,7 +9,7 @@ export const IdentityWrapper = styled.div`
   align-items: center;
   padding-left: 16px;
   padding-right: 16px;
-  border-bottom: 1px solid ${Colors.divider};
+  border-bottom: 3px solid ${Colors.divider};
   background-color: ${Colors.formBackground};
 
   &:hover {