displaying converstaion header

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

@@ -264,6 +264,13 @@ export function useCardContext() {
       }
       return getCardImageUrl(access.current, cardId, card.data.profileRevision)
     },
+    getName: (cardId) => {
+      let card = cards.current.get(cardId);
+      if (!card) {
+        return null;
+      }
+      return card.data.cardProfile.name;
+    },
     removeChannel: async (cardId, channelId) => {
       let { cardProfile, cardDetail } = cards.current.get(cardId).data;
       let token = cardProfile.guid + '.' + cardDetail.token;

net/web/src/session/Session.jsx

@@ -80,7 +80,9 @@ export function Session() {
           <div class="center">
             { state.conversation && (
               <div class="reframe">
-                <Conversation openDetails={actions.openDetails} cardId={state.cardId} conversationId={state.conversationId} />
+                <Conversation closeConversation={actions.closeConversation}
+                    openDetails={actions.openDetails}
+                    cardId={state.cardId} channelId={state.channelId} />
               </div>
             )}
             { state.contact && (
@@ -132,7 +134,9 @@ export function Session() {
             <Welcome />
             { state.conversation && (
               <div class="reframe">
-                <Conversation openDetails={actions.openDetails} cardId={state.cardId} conversationId={state.conversationId} />
+                <Conversation closeConversation={actions.closeConversation}
+                    openDetails={actions.openDetails}
+                    cardId={state.cardId} channelId={state.channelId} />
               </div>
             )}
             <Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
@@ -172,7 +176,8 @@ export function Session() {
             </div>
             { state.conversation && (
               <div class="reframe">
-                <Conversation openDetails={actions.openDetails} cardId={state.cardId} conversationId={state.conversationId} />
+                <Conversation closeConversation={actions.closeConversation} openDetails={actions.openDetails}
+                    cardId={state.cardId} channelId={state.channelId} />
               </div>
             )}
             { state.details && (

net/web/src/session/conversation/Conversation.jsx

@@ -1,6 +1,33 @@
 import { ConversationWrapper } from './Conversation.styled';
+import { SettingOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
+import { useConversation } from './useConversation.hook';
+import { Logo } from 'logo/Logo';
 
-export function Conversation({ openDetails }) {
+export function Conversation({ closeConversation, openDetails, cardId, channelId }) {
-  return <ConversationWrapper onClick={openDetails}>CONVERSATION</ConversationWrapper>
+
+  const { state, actions } = useConversation(cardId, channelId);
+
+console.log(state);
+
+  return (
+    <ConversationWrapper>
+      <div class="header">
+        <div class="title">
+          <Logo img={state.image} url={state.logo} width={32} height={32} radius={4} />
+          <div class="label">{ state.subject }</div>
+          { state.display !== 'xlarge' && (
+            <div class="button" onClick={openDetails}>
+              <SettingOutlined />
+            </div>
+          )}
+        </div>
+        { state.display !== 'xlarge' && (
+          <div class="button" onClick={closeConversation}>
+            <CloseOutlined />
+          </div>
+        )}
+      </div>
+    </ConversationWrapper>
+  );
 }
 

net/web/src/session/conversation/Conversation.styled.js

@@ -6,5 +6,38 @@ export const ConversationWrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: ${Colors.statsForm};
+  background-color: ${Colors.profileForm};
+
+  .header {
+    margin-left: 16px;
+    margin-right: 16px;
+    height: 48px;
+    border-bottom: 1px solid ${Colors.profileDivider};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      flex-grow: 1;
+      padding-left: 16px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .label {
+        padding-left: 8px;
+      }
+    }
+
+    .button {
+      font-size: 18px;
+      color: ${Colors.grey};
+      cursor: pointer;
+      padding-right: 16px;
+      padding-left: 16px;
+    }
+  }
 `

net/web/src/session/conversation/useConversation.hook.js

@@ -0,0 +1,68 @@
+import { useContext, useState, useEffect } from 'react';
+import { ViewportContext } from 'context/ViewportContext';
+import { CardContext } from 'context/CardContext';
+import { ChannelContext } from 'context/ChannelContext';
+
+export function useConversation(cardId, channelId) {
+
+  const [state, setState] = useState({
+    display: null,
+    image: null,
+    logo: null,
+    subject: null,
+  });
+
+  const viewport = useContext(ViewportContext);  
+  const card = useContext(CardContext);
+  const channel = useContext(ChannelContext);
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    updateState({ display: viewport.state.display });
+  }, [viewport]);
+
+  useEffect(() => {
+
+    let chan, image, subject, logo; 
+    if (cardId) {
+      const cardChan = card.state.cards.get(cardId);
+      if (cardChan) {
+        chan = cardChan.channels.get(channelId);
+      }
+    }
+    else {
+      chan = channel.state.channels.get(channelId);
+    }
+
+    if (chan) {
+      if (!chan.contacts?.length) {
+        image = 'solution';
+        subject = 'Private';
+      }
+      else if (chan.contacts.length > 1) {
+        image = 'appstore'
+        subject = 'Group';
+      }
+      else {
+        logo = card.actions.getImageUrl(chan.contacts[0]?.id);
+        subject = card.actions.getName(chan.contacts[0]?.id);
+      }
+      const parsed = JSON.parse(chan.data.channelDetail.data);
+      if (parsed.subject) {
+        subject = parsed.subject;
+      }
+    }
+
+    updateState({ image, subject, logo });
+  }, [cardId, channelId, card, channel]);
+
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+

net/web/src/session/details/Details.jsx

@@ -1,6 +1,6 @@
 import { Space, Button, Modal } from 'antd';
 import { DetailsWrapper, ModalFooter } from './Details.styled';
-import { DoubleRightOutlined } from '@ant-design/icons';
+import { DoubleRightOutlined, RightOutlined, CloseOutlined } from '@ant-design/icons';
 import { useDetails } from './useDetails.hook';
 import { Logo } from 'logo/Logo';
 import { EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
@@ -94,9 +94,21 @@ export function Details({ cardId, channelId, closeDetails, closeConversation, op
     <DetailsWrapper>
       <div class="header">
         <div class="label">Channel</div>
-        <div class="dismiss" onClick={closeConversation}>
+        { state.display === 'xlarge' && (
-          <DoubleRightOutlined />
+          <div class="dismiss" onClick={closeConversation}>
-        </div>
+            <DoubleRightOutlined />
+          </div>
+        )}
+        { state.display === 'small' && (
+          <div class="dismiss" onClick={closeDetails}>
+            <CloseOutlined />
+          </div>
+        )}
+        { state.display !== 'small' && state.display !== 'xlarge' && (
+          <div class="dismiss" onClick={closeDetails}>
+            <RightOutlined />
+          </div>
+        )}
       </div>
       <div class="content">
         <div class="description">

net/web/src/session/details/Details.styled.js

@@ -77,6 +77,7 @@ export const DetailsWrapper = styled.div`
       width: 100%;
 
       .logo {
+        height: fit-content;
         flex-shrink: 0;
         width: 40%;
         display: flex;

net/web/src/session/details/useDetails.hook.js

@@ -1,6 +1,7 @@
 import { useContext, useState, useEffect, useRef } from 'react';
 import { CardContext } from 'context/CardContext';
 import { ChannelContext } from 'context/ChannelContext';
+import { ViewportContext } from 'context/ViewportContext';
 
 export function useDetails(cardId, channelId) {
 
@@ -18,15 +19,21 @@ export function useDetails(cardId, channelId) {
     busy: false,
     subjectUpdate: null,
     unknown: 0,
+    display: null,
   });
 
   const card = useContext(CardContext);
   const channel = useContext(ChannelContext);
-  
+  const viewport = useContext(ViewportContext);  
+
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    updateState({ display: viewport.state.display });
+  }, [viewport]);
+
   useEffect(() => {
     let img, subject, subjectUpdate, host, started, contacts
     let chan;