added confirmation on remove/delete

net/web/src/User/Contact/Contact.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { CloseOutlined, UserOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, CloseOutlined, UserOutlined } from '@ant-design/icons';
 import { useContact } from './useContact.hook';
 import { Button, Checkbox, Modal } from 'antd'
 import { ContactWrapper, ProfileButton, CloseButton, ContactSpin } from './Contact.styled';
@@ -39,23 +39,53 @@ export function Contact() {
     return <span>{ state.description }</span>
   }
 
+  const showDisconnect = () => {
+    Modal.confirm({
+      title: 'Do you want to disconnect from this contact?',
+      icon: <ExclamationCircleOutlined />,
+      okText: 'Yes, Disconnect',
+      cancelText: 'No, Cancel',
+      onOk() { actions.disconnect() },
+    });
+  };
+
   const Disconnect = () => {
     if (state.showButtons.disconnect) {
-      return <ProfileButton ghost onClick={() => actions.disconnect()}>Disconnect</ProfileButton>
+      return <ProfileButton ghost onClick={() => showDisconnect()}>Disconnect</ProfileButton>
     }
     return <></>
   }
 
+  const showDisconnectRemove = () => {
+    Modal.confirm({
+      title: 'Do you want to remove this contact?',
+      icon: <ExclamationCircleOutlined />,
+      okText: 'Yes, Remove',
+      cancelText: 'No, Cancel',
+      onOk() { actions.disconnectRemove() },
+    });
+  };
+
   const DisconnectRemove = () => {
     if (state.showButtons.disconnectRemove) {
-      return <ProfileButton ghost onClick={() => actions.disconnectRemove()}>Remove Contact</ProfileButton>
+      return <ProfileButton ghost onClick={() => showDisconnectRemove()}>Remove Contact</ProfileButton>
     }
     return <></>
   }
 
+  const showRemove = () => {
+    Modal.confirm({
+      title: 'Do you want to remove this contact??',
+      icon: <ExclamationCircleOutlined />,
+      okText: 'Yes, Remove',
+      cancelText: 'No, Cancel',
+      onOk() { actions.remove() },
+    });
+  };
+
   const Remove = () => {
     if (state.showButtons.remove) {
-      return <ProfileButton ghost onClick={() => actions.remove()}>Remove Contact</ProfileButton>
+      return <ProfileButton ghost onClick={() => showRemove()}>Remove Contact</ProfileButton>
     }
     return <></>
   }

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { CloseOutlined, UserOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, CloseOutlined, UserOutlined } from '@ant-design/icons';
 import { useConversation } from './useConversation.hook';
 import { Button, Input, Checkbox, Modal, Spin } from 'antd'
 import { ConversationWrapper, ConversationButton, EditButton, CloseButton, ListItem, BusySpin } from './Conversation.styled';
@@ -61,6 +61,16 @@ export function Conversation() {
     )
   }
 
+  const showDelete = () => {
+    Modal.confirm({
+      title: 'Do you want to delete this conversation?',
+      icon: <ExclamationCircleOutlined />,
+      okText: 'Yes, Delete',
+      cancelText: 'No, Cancel',
+      onOk() { actions.remove() },
+    });
+  };
+
   return (
     <ConversationWrapper>
       <div class="header">
@@ -72,7 +82,7 @@ export function Conversation() {
         <div class="control">       
           <div class="buttons">
             <ConversationButton ghost onClick={() => onMembers()}>Members</ConversationButton>
-            <ConversationButton ghost onClick={() => actions.remove()}>Delete</ConversationButton>
+            <ConversationButton ghost onClick={() => showDelete()}>Delete</ConversationButton>
           </div>
           <CloseButton type="text" class="close" size={'large'}
               onClick={() => actions.close()} icon={<CloseOutlined />} />

net/web/src/User/Conversation/Members/MemberItem/MemberItem.styled.js

@@ -4,7 +4,6 @@ import { CheckSquareOutlined, BorderOutlined } from '@ant-design/icons';
 export const MemberItemWrapper = styled.div`
   display: flex;
   width: 100%;
-  background-color: #f6f5ed;
   flex-direction: row;
   overflow: hidden;
   padding-left: 16px;

net/web/src/User/Conversation/Members/MemberItem/useMemberItem.hook.js

@@ -1,5 +1,6 @@
 import { useContext, useState, useEffect, useRef } from 'react';
 import { CardContext } from 'context/CardContext';
+import { ProfileContext } from 'context/ProfileContext';
 import { ConversationContext } from 'context/ConversationContext';
 
 export function useMemberItem({ item }) {  
@@ -12,15 +13,20 @@ export function useMemberItem({ item }) {
   });
 
   const card = useContext(CardContext);
+  const profile = useContext(ProfileContext);
   const conversation = useContext(ConversationContext);
 
   useEffect(() => {
+    let handle = item.card?.data.cardProfile.handle;
+    if (item.card?.data.cardProfile.node != profile.state?.profile.node) {
+      handle += '@' + item.card?.data.cardProfile.node;
+    }
     updateState({ 
       imageUrl: card.actions.getImageUrl(item.card?.id),
       name: item.card?.data.cardProfile.name, 
-      handle: item.card?.data.cardProfile.handle,
+      handle,
     });
-  }, [item, card]);
+  }, [item, card, profile]);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));

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

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 export const MembersWrapper = styled.div`
   width: 100%;
   max-height: 240px;
-  background-color: #f6f5ed;
   overflow: auto;
 `;
 

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

@@ -64,8 +64,8 @@ export function Cards({ showRegistry }) {
                   imageSet={cardProfile(item).imageSet} />
               </div>
               <div class="username">
-                <span class="handle">{ cardHandle(item) }</span>
                 <span class="name">{ cardProfile(item).name }</span>
+                <span class="handle">{ cardHandle(item) }</span>
               </div>
             </div>
           </CardItem>

net/web/src/User/SideBar/Contacts/Channels/AddChannel/AddChannel.jsx

@@ -11,7 +11,11 @@ export function AddChannel({ state, actions }) {
     let contacts = [];
     let cards = actions.getCards();
     for (let card of cards) {
-      contacts.push({ value: card.id, label: card.data.cardProfile.handle });
+      let handle = card.data.cardProfile.handle;
+      if (state.node != card.data.cardProfile.node) {
+        handle += '@' + card.data.cardProfile.node;
+      }
+      contacts.push({ value: card.id, label: handle });
     }
     setOptions(contacts);
   }, [actions]);

net/web/src/User/SideBar/Contacts/Channels/useChannels.hook.js

@@ -1,6 +1,7 @@
 import { useContext, useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CardContext } from 'context/CardContext';
+import { ProfileContext } from 'context/ProfileContext';
 import { ChannelContext } from 'context/ChannelContext';
 
 export function useChannels() {
@@ -10,6 +11,7 @@ export function useChannels() {
     startCards: [],
     startSubject: '',
     startDescription: '',
+    node: null,
     busy: false,
   });
 
@@ -22,6 +24,7 @@ export function useChannels() {
 
   const navigate = useNavigate();
   const card = useContext(CardContext);
+  const profile = useContext(ProfileContext);
   const channel = useContext(ChannelContext);
 
   const actions = {
@@ -78,6 +81,10 @@ export function useChannels() {
     updateState({ channels: merged });
   }, [channel])
 
+  useEffect(() => {
+    updateState({ node: profile.state.profile.node });
+  }, [profile])
+
   return { state, actions };
 }
 

net/web/src/User/SideBar/Identity/Identity.jsx

@@ -1,7 +1,7 @@
 import { Avatar, Space, Image, Modal, Form, Input, Button } from 'antd';
 import React, { useState } from 'react'
 import { IdentityWrapper, IdentityDropdown, MenuWrapper } from './Identity.styled';
-import { RightOutlined, EditOutlined, UserOutlined, LockOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined, RightOutlined, EditOutlined, UserOutlined, LockOutlined } from '@ant-design/icons';
 import { useIdentity } from './useIdentity.hook';
 import { Menu, Dropdown } from 'antd';
 import { Logo } from '../../../Logo/Logo';
@@ -10,6 +10,16 @@ export function Identity() {
 
   const { state, actions } = useIdentity()
 
+  const showLogout = () => {
+    Modal.confirm({
+      title: 'Do you want to logout?',
+      icon: <ExclamationCircleOutlined />,
+      okText: 'Yes, Logout',
+      cancelText: 'No, Cancel',
+      onOk() { actions.logout() },
+    });
+  };
+
   const menu = (
     <MenuWrapper>
       <Menu.Item key="0">
@@ -19,7 +29,7 @@ export function Identity() {
         <div onClick={() => actions.setShowLogin(true)}>Change Login</div>
       </Menu.Item>
       <Menu.Item key="2">
-        <div onClick={() => actions.logout()}>Sign Out</div>
+        <div onClick={() => showLogout()}>Sign Out</div>
       </Menu.Item>
     </MenuWrapper>
   );

net/web/src/User/SideBar/Identity/useIdentity.hook.js

@@ -21,7 +21,7 @@ export function useIdentity() {
     confirm: null,
     confirmStatus: null,
     busy: false,
-    showLogin: false,  
+    showLogin: false,
   });
 
   const navigate = useNavigate();
@@ -39,9 +39,6 @@ export function useIdentity() {
       app.actions.logout();
       navigate('/');
     },
-    editLabels: () => {
-      console.log("EDIT LABELS");
-    },
     editProfile: () => {
       navigate('/user/profile');
     },