rendering header

net/web/src/User/Conversation/Conversation.jsx

@@ -7,6 +7,7 @@ import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from 'react-virtuali
 import { AddTopic } from './AddTopic/AddTopic';
 import { VirtualList } from '../../VirtualList/VirtualList';
 import { TopicItem } from './TopicItem/TopicItem';
+import { HomeOutlined, DatabaseOutlined } from '@ant-design/icons';
 
 export function Conversation() {
 
@@ -16,15 +17,32 @@ export function Conversation() {
     return (<TopicItem topic={topic} />)
   }
 
+  const onEdit = () => {
+    console.log("EDIT CONVERSATION");
+  }
+
+  const Icon = () => {
+    if (state.cardId) {
+      return <DatabaseOutlined />
+    }
+    return <HomeOutlined />
+  }
+
   return (
     <ConversationWrapper>
       <div class="header">
-        <div class="title"></div>
+        <div class="title">
-        <div class="buttons">
+          <Icon />
-          <ConversationButton ghost onClick={() => actions.remove()}>Remove Conversation</ConversationButton>
+          <div class="subject">{ state.subject }</div>  
+        </div>
+        <div class="control">       
+          <div class="buttons">
+            <ConversationButton ghost onClick={() => onEdit()}>Members</ConversationButton>
+            <ConversationButton ghost onClick={() => actions.remove()}>Delete</ConversationButton>
+          </div>
+          <CloseButton type="text" class="close" size={'large'}
+              onClick={() => actions.close()} icon={<CloseOutlined />} />
         </div>
-        <CloseButton type="text" class="close" size={'large'}
-            onClick={() => actions.close()} icon={<CloseOutlined />} />
       </div>
       <div class="thread">
         <VirtualList id={state.channelId + state.cardId} 

net/web/src/User/Conversation/Conversation.styled.jsx

@@ -11,6 +11,7 @@ export const ConversationWrapper = styled.div`
   overflow: hidden;
 
   .header {
+    flex-grow: 1;
     display: flex;
     width: 100%;
     flex-direction: row;
@@ -22,16 +23,29 @@ export const ConversationWrapper = styled.div`
   }
 
   .title {
-    height: 64px;
-    flex-grow: 1;
-    text-align: center;
-    font-size: 2em;
-    font-weight: bold;
     display: flex;
+    flex-direction: row;
+    flex-shrink: 1;
+    jsutify-content: flex-begin;
+    height: 64px;
     align-items: center;
-    justify-content: flex-begin;
     color: white;
+    font-size: 1.5em;
+    min-width: 0;
+  }
+
+  .control {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+
+  .subject {
     padding-left: 16px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   .buttons {

net/web/src/User/Conversation/useConversation.hook.js

@@ -10,6 +10,7 @@ export function useConversation() {
     init: true,
     cardId: null,
     channelId: null,
+    subject: null,
     topics: [],
   });
 
@@ -38,6 +39,7 @@ export function useConversation() {
   useEffect(() => {
     updateState({
       init: conversation.state.init,
+      subject: conversation.state.subject,
       cardId: conversation.state.cardId,
       channelId: conversation.state.channelId,
       topics: Array.from(conversation.state.topics.values()),

net/web/src/User/User.styled.js

@@ -6,6 +6,7 @@ export const UserWrapper = styled.div`
   flex-direction: row;
   width: 100%;
   height: 100%;
+  overflow: hidden;
   background-color: #f6f5ed;
   webkit-touch-callout: none; 
     -webkit-user-select: none; 
@@ -22,6 +23,7 @@ export const UserWrapper = styled.div`
     background-color: #8fbea7;
     align-items: center;
     justify-content: center;
+    min-width: 0;
   }
 
   .connect {

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

@@ -220,6 +220,11 @@ export function useCardContext() {
       let node = cardProfile.node;
       await addContactChannelTopic(node, token, channelId, message, assets);
     },
+    getChannel: (cardId, channelId) => {
+      let card = cards.current.get(cardId);
+      let channel = card.channels.get(channelId);
+      return channel;
+    },
     getChannelRevision: (cardId, channelId) => {
       let card = cards.current.get(cardId);
       let channel = card.channels.get(channelId);

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

@@ -95,6 +95,9 @@ export function useChannelContext() {
     addChannelTopic: async (channelId, message, assets) => {
       await addChannelTopic(access.current, channelId, message, assets);
     },
+    getChannel: (channelId) => {
+      return channels.current.get(channelId);
+    },
     getChannelRevision: (channelId) => {
       let channel = channels.current.get(channelId);
       return channel?.revision;

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

@@ -8,6 +8,7 @@ export function useConversationContext() {
     init: false,
     cardId: null,
     channelId: null,
+    subject: null,
     topics: new Map(),
   });
 
@@ -24,6 +25,29 @@ export function useConversationContext() {
     setState((s) => ({ ...s, ...value }));
   }  
 
+  const getSubject = (conversation) => {
+    try {
+      let subject = JSON.parse(conversation.data.channelDetail.data).subject;
+      if (subject) {
+        return subject;
+      }
+    }
+    catch (err) {
+      console.log(err);
+    }
+    let members = [];
+    if (conversation.guid) {
+      members.push(card.actions.getCardByGuid(conversation.guid)?.data?.cardProfile?.handle);
+    }
+    for (let member of conversation.data.channelDetail.members) {
+      let contact = card.actions.getCardByGuid(member)
+      if(contact?.data?.cardProfile?.handle) {
+        members.push(contact?.data?.cardProfile?.handle);
+      }
+    }
+    return members.join(', ');
+  }
+
   const setTopics = async () => {
     const { cardId, channelId } = conversationId.current;
     const curRevision = revision.current;
@@ -37,6 +61,8 @@ export function useConversationContext() {
         return;
       }
       if (curRevision != deltaRevision) {
+        let conversation = card.actions.getChannel(cardId, channelId);
+        let subject = getSubject(conversation);
         let delta = await card.actions.getChannelTopics(cardId, channelId, curRevision);
         for (let topic of delta) {
           if (topic.data == null) {
@@ -65,6 +91,7 @@ export function useConversationContext() {
         if (curView == view.current) {
           updateState({
             init: true,
+            subject,
             topics: topics.current,
           });
           revision.current = deltaRevision;
@@ -77,6 +104,8 @@ export function useConversationContext() {
     else {
       let deltaRevision = channel.actions.getChannelRevision(channelId);
       if (curRevision != deltaRevision) {
+        let conversation = channel.actions.getChannel(channelId);
+        let subject = getSubject(conversation);
         let delta = await channel.actions.getChannelTopics(channelId, curRevision);
         for (let topic of delta) {
           if (topic.data == null) {
@@ -105,6 +134,7 @@ export function useConversationContext() {
         if (curView == view.current) {
           updateState({
             init: true,
+            subject,
             topics: topics.current,
           });
           revision.current = deltaRevision;
@@ -159,7 +189,7 @@ export function useConversationContext() {
       revision.current = null;
       gone.current = false;
       topics.current = new Map();
-      updateState({ init: false, cardId, channelId, topics: topics.current });
+      updateState({ init: false, subject: null, cardId, channelId, topics: topics.current });
       updateConversation();
     },
     getAssetUrl: (topicId, assetId) => {