From 3b470680a5ab71806f5c7f1fbcbd5e2876ad7351 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Tue, 30 Aug 2022 22:42:15 -0700
Subject: [PATCH] highlight active conversation

---
 net/web/src/constants/Colors.js               |  2 +-
 net/web/src/session/Session.jsx               | 18 +++-
 net/web/src/session/channels/Channels.jsx     |  4 +-
 .../channels/channelItem/ChannelItem.jsx      | 89 ++++++++++---------
 .../channelItem/ChannelItem.styled.js         | 14 ++-
 5 files changed, 78 insertions(+), 49 deletions(-)

diff --git a/net/web/src/constants/Colors.js b/net/web/src/constants/Colors.js
index 0546035b..f7ff2082 100644
--- a/net/web/src/constants/Colors.js
+++ b/net/web/src/constants/Colors.js
@@ -3,7 +3,7 @@ const Colors = {
   primary: '#448866',
   formBackground: '#f2f2f2',
   formFocus: '#f8f8f8',
-  formHover: '#e8e8e8',
+  formHover: '#efefef',
   grey: '#888888',
   white: '#ffffff',
   divider: '#dddddd',
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index 7a8bf4bb..4f607ca0 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -74,7 +74,11 @@ export function Session() {
           <div class="left">
             <Identity openAccount={openAccount} openCards={openCards} cardUpdated={state.cardUpdated} />
             <div class="bottom">
-              <Channels open={openConversation} />
+              <Channels open={openConversation} active={{
+                  set: state.conversation,
+                  card: state.cardId,
+                  channel: state.channelId,
+                }} />
             </div>
             { state.loading && (
               <div class="reframe">
@@ -136,7 +140,11 @@ export function Session() {
           <div class="left">
             <Identity openAccount={actions.openProfile} openCards={actions.openCards} cardUpdated={state.cardUpdated} />
             <div class="bottom">
-              <Channels open={actions.openConversation} />
+              <Channels open={actions.openConversation} active={{
+                  set: state.conversation,
+                  card: state.cardId,
+                  channel: state.channelId,
+                }} />
             </div>
             { state.loading && (
               <div class="reframe">
@@ -190,7 +198,11 @@ export function Session() {
         <div class="mobile-layout noselect">
           <div class="top">
             <div class="reframe">
-              <Channels open={actions.openConversation} />
+              <Channels open={actions.openConversation} active={{ 
+                  set: state.conversation,
+                  card: state.cardId,
+                  channel: state.channelId,
+                }} />
             </div>
             { state.conversation && (
               <div class="reframe">
diff --git a/net/web/src/session/channels/Channels.jsx b/net/web/src/session/channels/Channels.jsx
index cb629ef5..17bb29cc 100644
--- a/net/web/src/session/channels/Channels.jsx
+++ b/net/web/src/session/channels/Channels.jsx
@@ -5,7 +5,7 @@ import { useChannels } from './useChannels.hook';
 import { ChannelItem } from './channelItem/ChannelItem';
 import { AddChannel } from './addChannel/AddChannel';
 
-export function Channels({ open }) {
+export function Channels({ open, active }) {
 
   const { state, actions } = useChannels();
 
@@ -49,7 +49,7 @@ export function Channels({ open }) {
       <div class="view">
         <List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.channels} gutter="0"
           renderItem={item => (
-            <ChannelItem item={item} openChannel={open} />
+            <ChannelItem item={item} openChannel={open} active={active} />
           )}
         />
       </div>
diff --git a/net/web/src/session/channels/channelItem/ChannelItem.jsx b/net/web/src/session/channels/channelItem/ChannelItem.jsx
index e4445505..8fadbcc8 100644
--- a/net/web/src/session/channels/channelItem/ChannelItem.jsx
+++ b/net/web/src/session/channels/channelItem/ChannelItem.jsx
@@ -3,51 +3,60 @@ import { ChannelItemWrapper, Markup } from './ChannelItem.styled';
 import { Logo } from 'logo/Logo';
 import { AppstoreFilled, SolutionOutlined } from '@ant-design/icons';
 
-export function ChannelItem({ item, openChannel }) {
+export function ChannelItem({ item, openChannel, active }) {
+
+  const itemClass = () => {
+    if (active.set && active.channel === item.id && active.card === item.cardId) {
+      return "active"
+    }
+    return "idle"
+  };
 
   return (
     <ChannelItemWrapper onClick={() => openChannel(item.id, item.cardId)}>
-      { item.contacts.length === 0 && (
-        <div class="item">
-          <div class="logo">
-            <SolutionOutlined />
+      <div class={itemClass()}>
+        { item.contacts.length === 0 && (
+          <div class="item">
+            <div class="logo">
+              <SolutionOutlined />
+            </div>
+            <div class="details">
+              <div class="subject">{ item.subject }</div>
+              <div class="message">{ item.message }</div>
+            </div>
           </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">
-          <div class="avatar">
-            <Logo url={item.logo} width={32} height={32} radius={8} />
-          </div>
-          <div class="details">
-            <div class="subject">{ item.subject }</div>
-            <div class="message">{ item.message }</div>
-          </div>
-          { item.updated && (
-            <Markup />
-          )}
-        </div>
-      )}
-      { item.contacts.length > 1 && (
-        <div class="item">
-          <div class="logo">
-            <AppstoreFilled />
-          </div>
-          <div class="details">
-            <div class="subject">{ item.subject }</div>
-            <div class="message">{ item.message }</div>
-          </div>
-          { item.updated && (
-            <Tooltip placement="right" title="new message">
+        )}
+        { item.contacts.length === 1 && (
+          <div class="item">
+            <div class="avatar">
+              <Logo url={item.logo} width={32} height={32} radius={8} />
+            </div>
+            <div class="details">
+              <div class="subject">{ item.subject }</div>
+              <div class="message">{ item.message }</div>
+            </div>
+            { item.updated && (
               <Markup />
-            </Tooltip>
-          )}
-        </div>
-      )}
+            )}
+          </div>
+        )}
+        { item.contacts.length > 1 && (
+          <div class="item">
+            <div class="logo">
+              <AppstoreFilled />
+            </div>
+            <div class="details">
+              <div class="subject">{ item.subject }</div>
+              <div class="message">{ item.message }</div>
+            </div>
+            { item.updated && (
+              <Tooltip placement="right" title="new message">
+                <Markup />
+              </Tooltip>
+            )}
+          </div>
+        )}
+      </div>
     </ChannelItemWrapper>
   )
 }
diff --git a/net/web/src/session/channels/channelItem/ChannelItem.styled.js b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
index 6fa7a487..46aafa06 100644
--- a/net/web/src/session/channels/channelItem/ChannelItem.styled.js
+++ b/net/web/src/session/channels/channelItem/ChannelItem.styled.js
@@ -7,13 +7,19 @@ export const ChannelItemWrapper = styled.div`
   display: flex;
   align-items: center;
   border-bottom: 1px solid ${Colors.itemDivider};
-  padding-left: 16px;
-  padding-right: 16px;
   line-height: 16px;
+  cursor: pointer;
 
   &:hover {
     background-color: ${Colors.formHover};
-    cursor: pointer;
+  }
+
+  .active {
+    background-color: ${Colors.profileForm};
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-item: center;
   }
 
   .item {
@@ -21,6 +27,8 @@ export const ChannelItemWrapper = styled.div`
     flex-direction: row;
     align-items: center;
     min-width: 0;
+    padding-left: 16px;
+    padding-right: 16px;
 
     .avatar{
       display: flex;