display full node if different

net/web/src/User/SideBar/Contacts/Cards/Cards.jsx

@@ -9,9 +9,6 @@ export function Cards({ showRegistry }) {
 
   const { state, actions } = useCards();
 
-  useEffect(() => {
-  }, [showRegistry]);
-
   const onSelect = (item) => {
     actions.select(item);
   }
@@ -30,6 +27,17 @@ export function Cards({ showRegistry }) {
     return null
   }
 
+  const cardHandle = (item) => {
+    const profile = item.data?.cardProfile
+    if (profile) {
+      if (profile.node == state.node) {
+        return profile.handle;
+      }
+      return profile.handle + '@' + profile.node;
+    }
+    return null; 
+  }
+
   return (
     <CardsWrapper>
       <Drawer
@@ -56,7 +64,7 @@ export function Cards({ showRegistry }) {
                   imageSet={cardProfile(item).imageSet} />
               </div>
               <div class="username">
-                <span class="handle">{ cardProfile(item).handle }</span>
+                <span class="handle">{ cardHandle(item) }</span>
                 <span class="name">{ cardProfile(item).name }</span>
               </div>
             </div>

net/web/src/User/SideBar/Contacts/Cards/Cards.styled.js

@@ -46,7 +46,7 @@ export const CardItem = styled(List.Item)`
   }
 
   .handle {
-    font-size: 0.9em;
+    font-size: 0.7em;
     font-weight: bold;
   }
 `;

net/web/src/User/SideBar/Contacts/Cards/useCards.hook.js

@@ -1,15 +1,18 @@
 import { useContext, useState, useEffect } from 'react';
 import { CardContext } from 'context/CardContext';
+import { ProfileContext } from 'context/ProfileContext';
 import { useNavigate } from 'react-router-dom';
 
 export function useCards() {
   
   const [state, setState] = useState({
     cards: [],
+    node: null,
   });
 
   const navigate = useNavigate();
   const card = useContext(CardContext);
+  const profile = useContext(ProfileContext);
 
   const actions = {
     getImageUrl: card.actions.getImageUrl,
@@ -45,5 +48,9 @@ export function useCards() {
     })});
   }, [card])
 
+  useEffect(() => {
+    updateState({ node: profile.state?.profile?.node });
+  }, [profile])
+
   return { state, actions };
 }