From 965d6d56e02e8d96ba5a7c40d5264e5a50be441e Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 23 Dec 2024 11:35:51 -0800
Subject: [PATCH] support blocking contacts

---
 app/client/web/src/contacts/useContacts.hook.ts         | 3 ++-
 app/client/web/src/content/useContent.hook.ts           | 8 ++++++--
 app/client/web/src/conversation/Conversation.module.css | 4 ++++
 app/client/web/src/conversation/Conversation.tsx        | 2 +-
 app/client/web/src/profile/Profile.tsx                  | 7 ++++---
 app/client/web/src/session/Session.tsx                  | 4 ++--
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/client/web/src/contacts/useContacts.hook.ts b/app/client/web/src/contacts/useContacts.hook.ts
index acce10e3..bb3e0f26 100644
--- a/app/client/web/src/contacts/useContacts.hook.ts
+++ b/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 () => {
diff --git a/app/client/web/src/content/useContent.hook.ts b/app/client/web/src/content/useContent.hook.ts
index 03be9049..b2bf09a1 100644
--- a/app/client/web/src/content/useContent.hook.ts
+++ b/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
diff --git a/app/client/web/src/conversation/Conversation.module.css b/app/client/web/src/conversation/Conversation.module.css
index 7d147772..76a41e15 100644
--- a/app/client/web/src/conversation/Conversation.module.css
+++ b/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;
diff --git a/app/client/web/src/conversation/Conversation.tsx b/app/client/web/src/conversation/Conversation.tsx
index cb34b5f9..eaa3c344 100644
--- a/app/client/web/src/conversation/Conversation.tsx
+++ b/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}> 
diff --git a/app/client/web/src/profile/Profile.tsx b/app/client/web/src/profile/Profile.tsx
index 196e5bde..c254ef94 100644
--- a/app/client/web/src/profile/Profile.tsx
+++ b/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}>
diff --git a/app/client/web/src/session/Session.tsx b/app/client/web/src/session/Session.tsx
index 46d27a5f..ec26f0f1 100644
--- a/app/client/web/src/session/Session.tsx
+++ b/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}>