From 90e153fdd1bec6a095b38c73555538e3277d8bda Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Mon, 23 Dec 2024 12:11:14 -0800
Subject: [PATCH] handle blocked cards

---
 app/client/web/src/content/useContent.hook.ts |  3 ++-
 app/client/web/src/details/Details.module.css | 17 +++++++++++++++++
 app/client/web/src/details/Details.tsx        | 13 ++++++++++---
 app/client/web/src/details/useDetails.hook.ts |  3 ++-
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/app/client/web/src/content/useContent.hook.ts b/app/client/web/src/content/useContent.hook.ts
index b2bf09a1..27d1604e 100644
--- a/app/client/web/src/content/useContent.hook.ts
+++ b/app/client/web/src/content/useContent.hook.ts
@@ -185,7 +185,8 @@ export function useContent() {
       updateState({ guid })
     }
     const setCards = (cards: Card[]) => {
-      const sorted = cards.sort(compare)
+      const filtered = cards.filter(card => !card.blocked);
+      const sorted = filtered.sort(compare)
       const connected = [] as Card[]
       const sealable = [] as Card[]
       sorted.forEach((card) => {
diff --git a/app/client/web/src/details/Details.module.css b/app/client/web/src/details/Details.module.css
index efc697cd..5c81c0af 100644
--- a/app/client/web/src/details/Details.module.css
+++ b/app/client/web/src/details/Details.module.css
@@ -161,6 +161,13 @@
       }
     }
   }
+
+  .unknown {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 8px;
+  }
 }
 
 .card {
@@ -189,6 +196,16 @@
     overflow: auto;
   }
 
+  .noContacts {
+    width: 100%;
+    height: 128px;
+    border: 1px solid var(--mantine-color-text-8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: 1px solid var(--mantine-color-text-8);
+  }
+
   .controls {
     width: 100%;
     display: flex;
diff --git a/app/client/web/src/details/Details.tsx b/app/client/web/src/details/Details.tsx
index 7d834bfa..f772fb76 100644
--- a/app/client/web/src/details/Details.tsx
+++ b/app/client/web/src/details/Details.tsx
@@ -326,9 +326,16 @@ export function Details({ showClose, close }: { showClose: boolean, close: () =>
       )}
       <Modal title={state.strings.editMembership} opened={showModal} onClose={() => setShowModal(false)} overlayProps={{ backgroundOpacity: 0.65, blur: 3 }} centered>
         <div className={classes.modalContainer}>
-          <div className={classes.cardMembers}>
-            { members }
-          </div>
+          { members.length > 0 && (
+            <div className={classes.cardMembers}>
+              { members }
+            </div>
+          )}
+          { members.length === 0 && (
+            <div className={classes.noContacts}>
+              <Text>{ state.strings.noContacts }</Text>
+            </div>
+          )}
           <div className={classes.controls}>
             <Button variant="default" onClick={() => setShowModal(false)}>
               {state.strings.close}
diff --git a/app/client/web/src/details/useDetails.hook.ts b/app/client/web/src/details/useDetails.hook.ts
index 2b12a120..a92f6d07 100644
--- a/app/client/web/src/details/useDetails.hook.ts
+++ b/app/client/web/src/details/useDetails.hook.ts
@@ -82,7 +82,8 @@ export function useDetails() {
     const { contact, identity } = app.state.session || { };
     if (focus && contact && identity) {
       const setCards = (cards: Card[]) => {
-        const sorted = cards.sort((a, b) => {
+        const filtered = cards.filter(card => !card.blocked);
+        const sorted = filtered.sort((a, b) => {
           if (a.handle > b.handle) {
             return 1;
           } else if (a.handle < b.handle) {