Add hide sensitive content setting

src/app/components/Content.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {fromNostrURI} from "@welshman/util"
+  import {nthEq} from "@welshman/lib"
   import {
     parse,
     truncate,
@@ -17,6 +18,8 @@
     isNewline,
   } from "@welshman/content"
   import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
   import ContentToken from "@app/components/ContentToken.svelte"
   import ContentCode from "@app/components/ContentCode.svelte"
   import ContentLinkInline from "@app/components/ContentLinkInline.svelte"
@@ -62,6 +65,12 @@
 
   const isNextToBlock = (i: number) => isBlock(i - 1) || isBlock(i + 1)
 
+  const ignoreWarning = () => {
+    warning = null
+  }
+
+  let warning = event.tags.find(nthEq(0, "content-warning"))?.[1]
+
   $: shortContent = showEntire
     ? fullContent
     : truncate(fullContent, {
@@ -74,51 +83,61 @@
 </script>
 
 <div class="relative">
-  <div
-    class="overflow-hidden text-ellipsis"
-    style={ellipsize ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
-    {#each shortContent as parsed, i}
-      {#if isNewline(parsed)}
-        <ContentNewline value={parsed.value.slice(isNextToBlock(i) ? 1 : 0)} />
-      {:else if isTopic(parsed)}
-        <ContentTopic value={parsed.value} />
-      {:else if isCode(parsed)}
-        <ContentCode value={parsed.value} isBlock={isStartAndEnd(i)} />
-      {:else if isCashu(parsed) || isInvoice(parsed)}
-        <ContentToken value={parsed.value} />
-      {:else if isLink(parsed)}
-        {#if isStartOrEnd(i) && !hideMedia}
-          <ContentLinkBlock value={parsed.value} />
-        {:else}
-          <ContentLinkInline value={parsed.value} />
-        {/if}
-      {:else if isProfile(parsed)}
-        <ContentMention value={parsed.value} />
-      {:else if isEvent(parsed) || isAddress(parsed)}
-        {#if isStartOrEnd(i) && depth < 2 && !hideMedia}
-          <ContentQuote value={parsed.value} {depth}>
-            <div slot="note-content" let:event>
-              <svelte:self {hideMedia} {event} depth={depth + 1} />
-            </div>
-          </ContentQuote>
-        {:else}
-          <Link
-            external
-            class="overflow-hidden text-ellipsis whitespace-nowrap underline"
-            href={entityLink(parsed.raw)}>
-            {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
-          </Link>
-        {/if}
-      {:else}
-        {@html renderParsed(parsed)}
-      {/if}
-    {/each}
-  </div>
-  {#if ellipsize}
-    <div class="relative z-feature -m-6 flex justify-center bg-gradient-to-t from-base-100 py-2">
-      <button type="button" class="btn" on:click|stopPropagation|preventDefault={expand}>
-        See more
-      </button>
+  {#if warning}
+    <div class="card2 card2-sm bg-alt row-2">
+      <Icon icon="danger" />
+      <p>
+        This note has been flagged by the author as "{warning}".<br />
+        <Button class="link" on:click={ignoreWarning}>Show anyway</Button>
+      </p>
     </div>
+  {:else}
+    <div
+      class="overflow-hidden text-ellipsis"
+      style={ellipsize ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
+      {#each shortContent as parsed, i}
+        {#if isNewline(parsed)}
+          <ContentNewline value={parsed.value.slice(isNextToBlock(i) ? 1 : 0)} />
+        {:else if isTopic(parsed)}
+          <ContentTopic value={parsed.value} />
+        {:else if isCode(parsed)}
+          <ContentCode value={parsed.value} isBlock={isStartAndEnd(i)} />
+        {:else if isCashu(parsed) || isInvoice(parsed)}
+          <ContentToken value={parsed.value} />
+        {:else if isLink(parsed)}
+          {#if isStartOrEnd(i) && !hideMedia}
+            <ContentLinkBlock value={parsed.value} />
+          {:else}
+            <ContentLinkInline value={parsed.value} />
+          {/if}
+        {:else if isProfile(parsed)}
+          <ContentMention value={parsed.value} />
+        {:else if isEvent(parsed) || isAddress(parsed)}
+          {#if isStartOrEnd(i) && depth < 2 && !hideMedia}
+            <ContentQuote value={parsed.value} {depth}>
+              <div slot="note-content" let:event>
+                <svelte:self {hideMedia} {event} depth={depth + 1} />
+              </div>
+            </ContentQuote>
+          {:else}
+            <Link
+              external
+              class="overflow-hidden text-ellipsis whitespace-nowrap underline"
+              href={entityLink(parsed.raw)}>
+              {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
+            </Link>
+          {/if}
+        {:else}
+          {@html renderParsed(parsed)}
+        {/if}
+      {/each}
+    </div>
+    {#if ellipsize}
+      <div class="relative z-feature -m-6 flex justify-center bg-gradient-to-t from-base-100 py-2">
+        <button type="button" class="btn" on:click|stopPropagation|preventDefault={expand}>
+          See more
+        </button>
+      </div>
+    {/if}
   {/if}
 </div>