allow blocking another person's content from this user (with iViewContent contact field)

src/views/DIDView.vue

@@ -77,6 +77,7 @@
                 @click="confirmSetVisibility(contactFromDid, false)"
               >
                 <font-awesome icon="eye" class="fa-fw" />
+                <font-awesome icon="arrow-up" class="fa-fw" />
               </button>
               <button
                 v-else-if="
@@ -87,6 +88,32 @@
                 @click="confirmSetVisibility(contactFromDid, true)"
               >
                 <font-awesome icon="eye-slash" class="fa-fw" />
+                <font-awesome icon="arrow-up" class="fa-fw" />
+              </button>
+
+              <button
+                v-if="
+                  contactFromDid?.iViewContent &&
+                  contactFromDid.did !== activeDid
+                "
+                class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
+                title="I view their content"
+                @click="confirmViewContent(contactFromDid, false)"
+              >
+                <font-awesome icon="eye" class="fa-fw" />
+                <font-awesome icon="arrow-down" class="fa-fw" />
+              </button>
+              <button
+                v-else-if="
+                  !contactFromDid?.iViewContent &&
+                  contactFromDid?.did !== activeDid
+                "
+                class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
+                title="I do not view their content"
+                @click="confirmViewContent(contactFromDid, true)"
+              >
+                <font-awesome icon="eye-slash" class="fa-fw" />
+                <font-awesome icon="arrow-down" class="fa-fw" />
               </button>
 
               <button
@@ -825,9 +852,9 @@ export default class DIDView extends Vue {
             title: "Visibility Refreshed",
             text:
               libsUtil.nameForContact(contact, true) +
-              " can " +
-              (visibility ? "" : "not ") +
-              "see your activity.",
+              " can" +
+              (visibility ? "" : " not") +
+              " see your activity.",
           },
           3000,
         );
@@ -857,6 +884,64 @@ export default class DIDView extends Vue {
       );
     }
   }
+
+  /**
+   * Confirm whether the user want to see/hide the other's content, then execute it
+   *
+   * @param contact Contact content to show/hide from user
+   * @param view whether user wants to view this contact
+   */
+  async confirmViewContent(contact: Contact, view: boolean) {
+    const contentVisibilityPrompt = view
+      ? "Are you sure you want to see their content?"
+      : "Are you sure you want to hide their content from you?";
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Set Content Visibility",
+        text: contentVisibilityPrompt,
+        onYes: async () => {
+          const success = await this.setViewContent(contact, view);
+          if (success) {
+            contact.iViewContent = view; // see visibility note about not working inside setVisibility
+          }
+        },
+      },
+      -1,
+    );
+  }
+
+  /**
+   * Updates contact content visibility for this device
+   *
+   * @param contact - Contact to update content visibility for
+   * @param visibility - New content visibility state
+   * @returns Boolean indicating success
+   */
+  async setViewContent(contact: Contact, visibility: boolean) {
+    const platformService = PlatformServiceFactory.getInstance();
+    await platformService.dbExec(
+      "UPDATE contacts SET iViewContent = ? WHERE did = ?",
+      [visibility, contact.did],
+    );
+    if (USE_DEXIE_DB) {
+      db.contacts.update(contact.did, { iViewContent: visibility });
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "success",
+        title: "Visibility Set",
+        text:
+          "You will" +
+          (visibility ? "" : " not") +
+          ` see ${contact.name}'s activity.`,
+      },
+      3000,
+    );
+    return true;
+  }
 }
 </script>