more web channel list refactor

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

@@ -10,7 +10,7 @@ export function ChannelItem({ item, openChannel, active }) {
       <div class={active ? 'active' : 'idle'}>
         <div class="item">
           <div class="avatar">
-            <Logo url={item.logo} img={item.img} width={32} height={32} radius={8} />
+            <Logo url={item.logo} img={item.img} width={32} height={32} radius={4} />
           </div>
           <div class="details">
             <div class="subject">

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

@@ -23,6 +23,10 @@ export const ChannelItemWrapper = styled.div`
     align-item: center;
   }
 
+  .idle {
+    width: 100%;
+  }
+
   .item {
     display: flex;
     flex-direction: row;
@@ -35,7 +39,6 @@ export const ChannelItemWrapper = styled.div`
       display: flex;
       align-items: center;
       justify-content: center;
-      border: 1px solid ${Colors.grey};
       border-radius: 8px;
       font-size: 18px;
       flex-shrink: 0;
@@ -48,7 +51,7 @@ export const ChannelItemWrapper = styled.div`
       border: 1px solid ${Colors.grey};
       width: 32px;
       height: 32px;
-      border-radius: 8px;
+      border-radius: 4px;
       font-size: 18px;
       flex-shrink: 0;
     }
@@ -84,5 +87,5 @@ export const Markup = styled.div`
   background-color: ${Colors.background};
   width: 8px;
   height: 8px;
-  margin-right: 16px;
+  margin-right: 8px;
 `;

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

@@ -6,7 +6,7 @@ import { AccountContext } from 'context/AccountContext';
 import { ViewportContext } from 'context/ViewportContext';
 import { ProfileContext } from 'context/ProfileContext';
 import { getCardByGuid } from 'context/cardUtil';
-import { isUnsealed, getChannelSeals, getContentKey, decryptChannelSubject } from 'context/sealUtil';
+import { isUnsealed, getChannelSeals, getContentKey, decryptChannelSubject, decryptTopicSubject } from 'context/sealUtil';
 
 export function useChannels() {
 
@@ -111,6 +111,7 @@ export function useChannels() {
         else {
           item.unlocked = false;
           item.contentKey = null;
+          item.subject = null;
         }
       }
       catch(err) {
@@ -127,6 +128,7 @@ export function useChannels() {
       }
       catch(err) {
         console.log(err);
+        item.subject = null;
       }
     }
     if (item.subject == null) {
@@ -138,7 +140,33 @@ export function useChannels() {
   }
 
   const syncChannelSummary = (item, channelValue) => {
-    item.updated = channelValue.data?.channelSummary?.lastTopic?.created;
+
+    const topic = channelValue.data?.channelSummary?.lastTopic;
+    item.updated = topic?.created;
+    if (topic?.dataType === 'superbasictopic') {
+      try {
+        const data = JSON.parse(topic.data);
+        item.message = data.text;
+      }
+      catch (err) {
+        console.log(err);
+      }
+    }
+    else if (topic?.dataType === 'sealedtopic') {
+      try {
+        if (item.contentKey) {
+          const unsealed = decryptTopicSubject(topic.data, item.contentKey);
+          item.message = unsealed?.message?.text;
+        }
+        else {
+          item.message = null;
+        }
+      }
+      catch(err) {
+        console.log(err);
+        item.message = null;
+      }
+    }
 
     // set updated revision
     item.topicRevision = channelValue.data.topicRevision;
@@ -176,7 +204,6 @@ export function useChannels() {
         }
         item.sealKey = sealKey;
         const revision = store.state[key];
-console.log("> ", channelValue.id, topicRevision, revision);
         if (login && item.updated && item.updated > login && topicRevision !== revision) {
           item.updatedFlag = true;
         }
@@ -203,7 +230,6 @@ console.log("> ", channelValue.id, topicRevision, revision);
       }
       item.sealKey = sealKey;
       const revision = store.state[key];
-console.log("> ", channelValue.id, topicRevision, revision);
       if (login && item.updated && item.updated > login && topicRevision !== revision) {
         item.updatedFlag = true;
       }
@@ -228,8 +254,18 @@ console.log("> ", channelValue.id, topicRevision, revision);
     });
 
     const filtered = merged.filter((item) => {
-      const subject = item.subject?.toUpperCase();
-      return !filter || subject?.includes(filter);    
+      if (filter) {
+        const subject = item.subject?.toUpperCase();
+        if (subject) {
+          return subject.includes(filter);
+        }
+        else {
+          return false;
+        }
+      }
+      else {
+        return true;
+      }
     });
 
     updateState({ channels: filtered });
@@ -287,7 +323,7 @@ console.log("> ", channelValue.id, topicRevision, revision);
       }
     },
     onFilter: (value) => {
-      updateState({ filter: value.toUpperCase() });
+      setFilter(value?.toUpperCase());
     },
     setShowAdd: () => {
       updateState({ showAdd: true, seal: false, members: new Set(), subject: null });