fixing layout issues

net/web/src/session/Session.jsx

@@ -54,8 +54,6 @@ export function Session() {
     actions.closeAccount();
   }
 
-console.log(state);
-
   return (
     <SessionWrapper>
       { (state.display === 'xlarge') && (

net/web/src/session/bottomNav/BottomNav.jsx

@@ -16,6 +16,7 @@ export function BottomNav({ state, actions }) {
   const setChannels = () => {
     actions.closeDetails();
     actions.closeCards();
+    actions.closeListing();
     actions.closeContact();
     actions.closeProfile();
     actions.closeAccount();
@@ -25,6 +26,7 @@ export function BottomNav({ state, actions }) {
   const setProfile = () => {
     actions.closeDetails();
     actions.closeCards();
+    actions.closeListing();
     actions.closeContact();
     actions.openProfile();
     actions.closeConversation();

net/web/src/session/cards/Cards.styled.js

@@ -59,6 +59,26 @@ export const CardsWrapper = styled.div`
       flex-direction: row;
       align-items: center;
       justify-content: center;
+
+      .add {
+        display: flex;
+        flex-direction: row;
+        color: ${Colors.white};
+        background-color: ${Colors.primary};
+        align-items: center;
+        justify-content: center;
+        padding-left: 16px;
+        padding-right: 16px;
+        border-radius: 4px;
+        font-size: 14px;
+        cursor: pointer;
+        height: 100%;
+        flex-shrink: 0;
+
+        .label {
+          padding-left: 8px;
+        }
+      }
     }
 
     .dismiss {
@@ -81,23 +101,24 @@ export const CardsWrapper = styled.div`
     padding-bottom: 12px;
     padding-top: 12px;
     position: relative;
-  }
 
-  .add {
+    .add {
-    display: flex;
+      display: flex;
-    flex-direction: row;
+      flex-direction: row;
-    color: ${Colors.primary};
+      color: ${Colors.primary};
-    align-items: center;
+      align-items: center;
-    justify-content: center;
+      justify-content: center;
-    padding-left: 16px;
+      padding-left: 16px;
-    padding-right: 16px;
+      padding-right: 16px;
-    border-radius: 4px;
+      border-radius: 4px;
-    font-size: 14px;
+      font-size: 14px;
-    cursor: pointer;
+      cursor: pointer;
-    height: 100%;
+      height: 100%;
+      flex-shrink: 0;
 
-    .label {
+      .label {
-      padding-left: 8px;
+        padding-left: 8px;
+      }
     }
   }
 `;

net/web/src/session/cards/cardItem/CardItem.jsx

@@ -20,6 +20,11 @@ export function CardItem({ item, open }) {
     return profile?.handle;
   }
 
+  const resync = (e) => {
+    e.stopPropagation();
+    actions.resync();
+  };
+
   return (
     <CardItemWrapper onClick={() => open(profile.guid)}>
       <Logo url={state.logo} width={32} height={32} radius={8} />
@@ -30,7 +35,7 @@ export function CardItem({ item, open }) {
       <div class="markup">
         { !state.resync && item.error && (
           <Tooltip placement="left" title="sync error">
-            <StatusError onClick={actions.resync}>
+            <StatusError onClick={resync}>
               <ExclamationCircleOutlined />
             </StatusError>
           </Tooltip>

net/web/src/session/cards/useCards.hook.js

@@ -44,7 +44,12 @@ export function useCards() {
 
     if (state.sorted) {
       filtered.sort((a, b) => {
-        if (a?.data?.cardProfile?.name < b?.data?.cardProfile?.name) {
+        let aName = a?.data?.cardProfile?.name;
+        let bName = b?.data?.cardProfile?.name;
+        if (aName == bName) {
+          return 0;
+        }
+        if (!aName || (aName < bName)) {
           return -1;
         }
         return 1;
@@ -54,8 +59,10 @@ export function useCards() {
       filtered.sort((a, b) => {
         const aUpdated = a?.data?.cardDetail?.statusUpdated;
         const bUpdated = b?.data?.cardDetail?.statusUpdated;
-
+        if (aUpdated == bUpdated) {
-        if ((aUpdated && !bUpdated) || (aUpdated && bUpdated && aUpdated > bUpdated)) {
+          return 0;
+        }
+        if (!aUpdated || (aUpdated < bUpdated)) {
           return -1;
         }
         return 1;

net/web/src/session/channels/Channels.styled.js

@@ -15,10 +15,14 @@ export const ChannelsWrapper = styled.div`
   }
  
   .search {
-    padding: 8px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 16px;
+    padding-right: 16px;
     border-bottom: 1px solid ${Colors.divider};
     display: flex;
     flex-direction: row;
+    height: 48px;
 
     .filter {
       border: 1px solid ${Colors.divider};

net/web/src/session/contact/Contact.jsx

@@ -1,7 +1,7 @@
 import { ContactWrapper } from './Contact.styled';
 import { useContact } from './useContact.hook';
 import { Logo } from 'logo/Logo';
-import { RightOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
+import { DatabaseOutlined, CloseOutlined, RightOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
 
 export function Contact({ close, guid, listing }) {
 
@@ -18,6 +18,12 @@ export function Contact({ close, guid, listing }) {
       <div class="name">
         <div class="data">{ state.name }</div>
       </div>
+      { state.node && (
+        <div class="location">
+          <DatabaseOutlined />
+          <div class="data">{ state.node }</div>
+        </div>
+      )}
       <div class="location">
         <EnvironmentOutlined />
         <div class="data">{ state.location }</div>
@@ -49,12 +55,19 @@ export function Contact({ close, guid, listing }) {
       )}
       { state.init && state.display !== 'xlarge' && (
         <div class="view">
-          <div class="title">{ state.handle }</div>
+          <div class="title">
-          <div class="section">Contact Profile</div>
+            { state.display === 'small' && (
-          <div class="controls">
+              <div class="close"></div>
-            { Image }
+            )}
-            { Details }
+            <div class="handle">{ state.handle }</div>
+            { state.display === 'small' && (
+              <div class="close" onClick={close}>
+                <CloseOutlined />
+              </div>
+            )}
           </div>
+          { Image }
+          { Details }
         </div>
       )}
     </ContactWrapper>

net/web/src/session/contact/Contact.styled.js

@@ -27,7 +27,7 @@ export const ContactWrapper = styled.div`
     }
 
     .close {
-      font-size: 16px;
+      font-size: 18px;
       color: ${Colors.primary};
       cursor: pointer;
       padding-right: 16px;
@@ -48,6 +48,45 @@ export const ContactWrapper = styled.div`
       width: 20vw;
       margin-right: 32px;
     }
+
+    .details {
+      display: flex;
+      flex-direction: column;
+
+      .name {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+   
+        .data {
+          padding-right: 8px;
+          font-size: 24px;
+          font-weight: bold;
+        }
+      }
+
+      .location {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+    
+        .data {
+          padding-left: 8px;
+        }
+      }
+
+      .description {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+
+        .data {
+          padding-left: 8px;
+        }
+      } 
+    }
   }
 
   .view {
@@ -59,63 +98,75 @@ export const ContactWrapper = styled.div`
     align-items: center;
 
     .title {
+      display: flex;
+      width: 100%;
+      flex-direction: row;
       font-size: 18px;
-      font-weight: bold;
+      padding-top: 8px;
+      padding-bottom: 32px;
+
+      .handle {
+        flex-grow: 1;
+        font-weight: bold;
+        display: flex;
+        justify-content: center;
+      }
+
+      .close {
+        color: ${Colors.primary};
+        cursor: pointer;
+        width: 64px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
 
     .logo {
       position: relative;
-      width: 80%;
+      width: 50%;
       margin-bottom: 16px;
     }
 
-    .section {
+    .details {
-      width: 100%;
-      color: ${Colors.grey};
-      padding-top: 16px;
-      font-size: 12px;
       display: flex;
-      justify-content: center;
+      flex-direction: column;
-    }
-  }
-
-  .details {
-    display: flex;
-    flex-direction: column;
-
-    .name {
-      display: flex;
-      flex-direction: row;
       align-items: center;
- 
+
-      .data {
+      .name {
-        padding-right: 8px;
+        display: flex;
-        font-size: 24px;
+        flex-direction: row;
-        font-weight: bold;
+        align-items: center;
+   
+        .data {
+          padding-right: 8px;
+          font-size: 24px;
+          font-weight: bold;
+        }
       }
+
+      .location {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+    
+        .data {
+          padding-left: 8px;
+        }
+      }
+
+      .description {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+
+        .data {
+          padding-left: 8px;
+        }
+      } 
     }
-
-    .location {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding-bottom: 8px;
-  
-      .data {
-        padding-left: 8px;
-      }
-    }
-
-    .description {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding-bottom: 8px;
-
-      .data {
-        padding-left: 8px;
-      }
-    } 
   }
 `
 

net/web/src/session/contact/useContact.hook.js

@@ -12,6 +12,7 @@ export function useContact(guid, listing) {
     location: null,
     description: null,
     handle: null,
+    node: null,
     removed: false,
     init: false,
   });
@@ -25,28 +26,20 @@ export function useContact(guid, listing) {
   }
 
   useEffect(() => {
-    let logo, name, location, description, handle;
+    let logo, name, location, description, handle, node;
     let contact = card.actions.getCardByGuid(guid);
     if (contact) {
       let cardProfile = contact?.data?.cardProfile;
-      if (cardProfile.node != profile.state.profile.node) {
+      handle = cardProfile.handle;
-        handle = cardProfile.handle + '@' + cardProfile.node;
+      node = cardProfile.node;
-      }
-      else {
-        handle = cardProfile.handle;
-      }
       logo = card.actions.getImageUrl(contact.id);
       name = cardProfile.name;
       location = cardProfile.location;
       description = cardProfile.description;
     }
     else if (listing) {
-      if (listing.node != profile.state.profile.node) {
+      handle = listing.handle;
-        handle = listing.handle + '@' + listing.node;
+      node = listing.node;
-      }
-      else {
-        handle = listing.handle;
-      }
       logo = listing.imageSet ? getListingImageUrl(listing.node, listing.guid) : null;
       name = listing.name;
       location = listing.location;
@@ -55,7 +48,7 @@ export function useContact(guid, listing) {
     else {
       updateState({ removed: true });
     }
-    updateState({ init: true, logo, name, location, description, handle });
+    updateState({ init: true, logo, name, location, description, handle, node });
   }, [card, guid, listing]); 
 
   useEffect(() => {

net/web/src/session/profile/Profile.jsx

@@ -2,7 +2,7 @@ import { Checkbox } from 'antd';
 import { ProfileWrapper } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import { Logo } from 'logo/Logo';
-import { LockOutlined, RightOutlined, EditOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
+import { DatabaseOutlined, LockOutlined, RightOutlined, EditOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
 
 export function Profile({ closeProfile }) {
 
@@ -23,6 +23,12 @@ export function Profile({ closeProfile }) {
         <div class="data">{ state.name }</div>
         <EditOutlined />
       </div>
+      { state.node && (
+        <div class="location">
+          <DatabaseOutlined />
+          <div class="data">{ state.node }</div>
+        </div>
+      )}
       <div class="location">
         <EnvironmentOutlined />
         <div class="data">{ state.location }</div>

net/web/src/session/profile/Profile.styled.js

@@ -62,6 +62,45 @@ export const ProfileWrapper = styled.div`
         cursor: pointer;
       }
     }
+
+    .details {
+      display: flex;
+      flex-direction: column;
+
+      .name {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+   
+        .data {
+          padding-right: 8px;
+          font-size: 24px;
+          font-weight: bold;
+        }
+      }
+
+      .location {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+    
+        .data {
+          padding-left: 8px;
+        }
+      }
+
+      .description {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+
+        .data {
+          padding-left: 8px;
+        }
+      } 
+    }
   }
 
   .view {
@@ -98,10 +137,50 @@ export const ProfileWrapper = styled.div`
       }
     }
 
+    .details {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .name {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+   
+        .data {
+          padding-right: 8px;
+          font-size: 24px;
+          font-weight: bold;
+        }
+      }
+
+      .location {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+    
+        .data {
+          padding-left: 8px;
+        }
+      }
+
+      .description {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-bottom: 8px;
+
+        .data {
+          padding-left: 8px;
+        }
+      } 
+    }
+
     .section {
       width: 100%;
       color: ${Colors.grey};
-      padding-top: 16px;
+      padding-top: 32px;
       font-size: 12px;
       display: flex;
       justify-content: center;
@@ -112,7 +191,7 @@ export const ProfileWrapper = styled.div`
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      border: 1px solid ${Colors.divider};
+      border-top: 1px solid ${Colors.divider};
       border-radius: 4px;
       padding: 8px;
       width: 75%;
@@ -131,43 +210,4 @@ export const ProfileWrapper = styled.div`
       }
     }
   }
-
-  .details {
-    display: flex;
-    flex-direction: column;
-
-    .name {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
- 
-      .data {
-        padding-right: 8px;
-        font-size: 24px;
-        font-weight: bold;
-      }
-    }
-
-    .location {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding-bottom: 8px;
-  
-      .data {
-        padding-left: 8px;
-      }
-    }
-
-    .description {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding-bottom: 8px;
-
-      .data {
-        padding-left: 8px;
-      }
-    } 
-  }
 `

net/web/src/session/profile/useProfile.hook.js

@@ -19,9 +19,9 @@ export function useProfile() {
 
   useEffect(() => {
     if (profile.state.init) {
-      const { name, handle, location, description, image } = profile.state.profile;
+      const { node, name, handle, location, description, image } = profile.state.profile;
       let url = !image ? null : profile.actions.profileImageUrl();
-      updateState({ init: true, name, handle, url, location, description });
+      updateState({ init: true, name, node, handle, url, location, description });
     }
   }, [profile]);