handle blocked cards

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) => {

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;

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}

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) {