support blocking contacts

app/client/web/src/contacts/useContacts.hook.ts

@@ -49,7 +49,8 @@ export function useContacts() {
   useEffect(() => {
     const contact = app.state.session?.getContact()
     const setCards = (cards: Card[]) => {
-      updateState({ cards })
+      const filtered = cards.filter(card => !card.blocked);
+      updateState({ cards: filtered })
     }
     contact.addCardListener(setCards)
     return () => {

app/client/web/src/content/useContent.hook.ts

@@ -63,9 +63,10 @@ export function useContent() {
       const contacts = [] as (Card | undefined)[]
       if (cardId) {
         const card = state.cards.find((contact) => contact.cardId === cardId)
-        if (card) {
-          contacts.push(card)
+        if (!card || card.blocked) {
+          return null;
         }
+        contacts.push(card)
       }
       const guests = members.filter((contact) => contact.guid !== state.guid)
       const guestCards = guests
@@ -147,6 +148,9 @@ export function useContent() {
 
     const search = state.filter?.toLowerCase()
     const filtered = channels.filter((item) => {
+      if (!item) {
+        return false
+      }
       if (search) {
         if (item.subject?.find((value) => value?.toLowerCase().includes(search))) {
           return true

app/client/web/src/conversation/Conversation.module.css

@@ -18,6 +18,10 @@
     margin-right: 16px;
   }
 
+  .alert {
+    color: var(--mantine-color-red-6);
+  }
+
   .frame {
     display: flex;
     flex-direction: column-reverse;

app/client/web/src/conversation/Conversation.tsx

@@ -169,7 +169,7 @@ export function Conversation({ openDetails }: { openDetails: ()=>void }) {
             <IconShield size={24} />
           )}
           { state.detailSet && state.access === false && (
-            <IconExclamationCircle size={24} />
+            <IconExclamationCircle className={classes.alert} size={24} />
           )}
         </div>
         <div className={classes.title}> 

app/client/web/src/profile/Profile.tsx

@@ -33,7 +33,7 @@ export type ProfileParams = {
   offsync?: boolean
 }
 
-export function Profile({ params, close }: { params: ProfileParams; close?: () => void }) {
+export function Profile({ params, showClose, close }: { params: ProfileParams; showClose: boolean; close: () => void }) {
   const { state, actions } = useProfile(params)
   const [removing, setRemoving] = useState(false)
   const [blocking, setBlocking] = useState(false)
@@ -142,6 +142,7 @@ export function Profile({ params, close }: { params: ProfileParams; close?: () =
         if (!blocking) {
           setBlocking(true)
           await setAction(actions.block)
+          close();
           setBlocking(false)
         }
       },
@@ -238,9 +239,9 @@ export function Profile({ params, close }: { params: ProfileParams; close?: () =
   return (
     <div className={classes.contact}>
       <div className={classes.header}>
-        {close && <IconX size={28} className={classes.match} />}
+        {showClose && <IconX size={28} className={classes.match} />}
         <Text className={classes.label}>{`${state.handle}${state.node ? '/' + state.node : ''}`}</Text>
-        {close && <IconX size={30} className={classes.close} onClick={close} />}
+        {showClose && <IconX size={30} className={classes.close} onClick={close} />}
       </div>
       <div className={classes.detail}>
         <div className={classes.image}>

app/client/web/src/session/Session.tsx

@@ -87,7 +87,7 @@ export function Session() {
             )}
             {profile && (
               <div className={classes.screen}>
-                <Profile params={profileParams} close={closeProfile} />
+                <Profile params={profileParams} showClose={true} close={closeProfile} />
               </div>
             )}
           </div>
@@ -161,7 +161,7 @@ export function Session() {
           </Drawer>
           <Drawer opened={profile} onClose={closeProfile} withCloseButton={false} size="xs" padding="0" position="right">
             <div style={{ height: '100vh' }}>
-              <Profile params={profileParams} />
+              <Profile params={profileParams} showClose={false} close={closeProfile} />
             </div>
           </Drawer>
           <Drawer opened={details} onClose={closeDetails} withCloseButton={false} size="xs" padding="0" position="right" trapFocus={false}>