Apply mutes

src/app/components/NoteCard.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
   import {nip19} from "nostr-tools"
   import {ctx} from "@welshman/lib"
-  import {formatTimestamp} from "@welshman/app"
+  import {getListTags, getPubkeyTagValues} from "@welshman/util"
+  import {formatTimestamp, userMutes} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import Profile from "@app/components/Profile.svelte"
   import {entityLink} from "@app/state"
 
@@ -11,16 +14,32 @@
 
   const relays = ctx.app.router.Event(event).getUrls()
   const nevent = nip19.neventEncode({id: event.id, relays})
+
+  const ignoreMute = () => {
+    muted = false
+  }
+
+  let muted = getPubkeyTagValues(getListTags($userMutes)).includes(event.pubkey)
 </script>
 
 <div class="flex flex-col gap-2 {$$props.class}">
-  <div class="flex justify-between gap-2">
+  {#if muted}
-    {#if !hideProfile}
+    <div class="flex justify-between items-center">
-      <Profile pubkey={event.pubkey} />
+      <div class="row-2 relative">
-    {/if}
+        <Icon icon="danger" class="mt-1" />
-    <Link external href={entityLink(nevent)} class="text-sm opacity-75">
+        <p>You have muted this person.<p>
-      {formatTimestamp(event.created_at)}
+      </div>
-    </Link>
+      <Button class="link ml-8" on:click={ignoreMute}>Show anyway</Button>
-  </div>
+    </div>
-  <slot />
+  {:else}
+    <div class="flex justify-between gap-2">
+      {#if !hideProfile}
+        <Profile pubkey={event.pubkey} />
+      {/if}
+      <Link external href={entityLink(nevent)} class="text-sm opacity-75">
+        {formatTimestamp(event.created_at)}
+      </Link>
+    </div>
+    <slot />
+  {/if}
 </div>