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
+  {#if warning}
-    class="overflow-hidden text-ellipsis"
+    <div class="card2 card2-sm bg-alt row-2">
-    style={ellipsize ? "mask-image: linear-gradient(0deg, transparent 0px, black 100px)" : ""}>
+      <Icon icon="danger" />
-    {#each shortContent as parsed, i}
+      <p>
-      {#if isNewline(parsed)}
+        This note has been flagged by the author as "{warning}".<br />
-        <ContentNewline value={parsed.value.slice(isNextToBlock(i) ? 1 : 0)} />
+        <Button class="link" on:click={ignoreWarning}>Show anyway</Button>
-      {:else if isTopic(parsed)}
+      </p>
-        <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>
+  {: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>

src/lib/components/Field.svelte

@@ -1,9 +1,13 @@
 <div class="flex flex-col gap-2 {$$props.class}">
-  <label class="flex items-center gap-2 font-bold">
+  {#if $$slots.label}
-    <slot name="label" />
+    <label class="flex items-center gap-2 font-bold">
-  </label>
+      <slot name="label" />
+    </label>
+  {/if}
   <slot name="input" />
-  <p class="text-sm">
+  {#if $$slots.info}
-    <slot name="info" />
+    <p class="text-sm">
-  </p>
+      <slot name="info" />
+    </p>
+  {/if}
 </div>

src/lib/components/FieldInline.svelte

@@ -0,0 +1,13 @@
+<div class="flex flex-col gap-2 {$$props.class}">
+  <div class="flex justify-between">
+    <label class="flex items-center gap-2 font-bold">
+      <slot name="label" />
+    </label>
+    <slot name="input" />
+  </div>
+  {#if $$slots.info}
+    <p class="text-sm">
+      <slot name="info" />
+    </p>
+  {/if}
+</div>

src/routes/settings/+page.svelte

@@ -3,6 +3,7 @@
   import {getListTags, createEvent, getPubkeyTagValues, MUTES} from "@welshman/util"
   import {userMutes, tagPubkey, publishThunk} from "@welshman/app"
   import Field from "@lib/components/Field.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {pushToast} from "@app/toast"
@@ -24,13 +25,18 @@
 </script>
 
 <form class="content column gap-4" on:submit|preventDefault={onSubmit}>
-  <div class="card2 bg-alt shadow-xl">
+  <div class="card2 bg-alt shadow-xl col-4">
     <Field>
       <p slot="label">Muted Accounts</p>
       <div slot="input">
         <ProfileMultiSelect bind:value={mutedPubkeys} />
       </div>
     </Field>
+    <FieldInline>
+      <p slot="label">Hide sensitive content?</p>
+      <input slot="input" type="checkbox" class="toggle toggle-primary" checked="checked" />
+      <p slot="info">If content is marked by the author as sensitive, flotilla will hide it by default.</p>
+    </FieldInline>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">
       <Button class="btn btn-neutral" on:click={reset}>Discard Changes</Button>
       <Button type="submit" class="btn btn-primary">Save Changes</Button>