setting for showing content warning posts

packages/app/src/Element/Event/NoteInner.tsx

@@ -40,7 +40,7 @@ export function NoteInner(props: NoteProps) {
   const { ref, inView } = useInView({ triggerOnce: true });
   const { reactions, reposts, deletions, zaps } = useEventReactions(NostrLink.fromEvent(ev), related);
   const login = useLogin();
-  const { pinned, bookmarked } = login;
+  const { pinned, bookmarked } = useLogin();
   const { publisher, system } = useEventPublisher();
   const [translated, setTranslated] = useState<NoteTranslation>();
   const [showTranslation, setShowTranslation] = useState(true);
@@ -140,39 +140,45 @@ export function NoteInner(props: NoteProps) {
         </b>
       );
     }
-    const contentWarning = ev.tags.find(a => a[0] === "content-warning");
-    if (contentWarning) {
-      return (
-        <Reveal
-          message={
-            <>
-              <FormattedMessage
-                defaultMessage="The author has marked this note as a <i>sensitive topic</i>"
-                id="StKzTE"
-                values={{
-                  i: c => <i>{c}</i>,
-                }}
-              />
-              {contentWarning[1] && (
-                <>
-                  &nbsp;
-                  <FormattedMessage
-                    defaultMessage="Reason: <i>{reason}</i>"
-                    id="6OSOXl"
-                    values={{
-                      i: c => <i>{c}</i>,
-                      reason: contentWarning[1],
-                    }}
-                  />
-                </>
-              )}
-              &nbsp;
-              <FormattedMessage defaultMessage="Click here to load anyway" id="IoQq+a" />
-            </>
-          }>
-          {innerContent}
-        </Reveal>
-      );
+    if (!login.appData.item.showContentWarningPosts) {
+      const contentWarning = ev.tags.find(a => a[0] === "content-warning");
+      if (contentWarning) {
+        return (
+          <Reveal
+            message={
+              <>
+                <FormattedMessage
+                  defaultMessage="The author has marked this note as a <i>sensitive topic</i>"
+                  id="StKzTE"
+                  values={{
+                    i: c => <i>{c}</i>,
+                  }}
+                />
+                {contentWarning[1] && (
+                  <>
+                    &nbsp;
+                    <FormattedMessage
+                      defaultMessage="Reason: <i>{reason}</i>"
+                      id="6OSOXl"
+                      values={{
+                        i: c => <i>{c}</i>,
+                        reason: contentWarning[1],
+                      }}
+                    />
+                  </>
+                )}
+                . <FormattedMessage defaultMessage="Click here to load anyway" id="IoQq+a" />.{" "}
+                <Link to="/settings/moderation">
+                  <i>
+                    <FormattedMessage defaultMessage="Settings" id="D3idYv" />
+                  </i>
+                </Link>
+              </>
+            }>
+            {innerContent}
+          </Reveal>
+        );
+      }
     }
     return innerContent;
   };

packages/app/src/Login/LoginSession.ts

@@ -20,6 +20,7 @@ export const enum LoginSessionType {
 
 export interface SnortAppData {
   mutedWords: Array<string>;
+  showContentWarningPosts: boolean;
   preferences: UserPreferences;
 }
 

packages/app/src/Pages/SettingsPage.tsx

@@ -9,7 +9,7 @@ import AccountsPage from "@/Pages/settings/Accounts";
 import { WalletSettingsRoutes } from "@/Pages/settings/WalletSettings";
 import { ManageHandleRoutes } from "@/Pages/settings/handle";
 import ExportKeys from "@/Pages/settings/Keys";
-import { ModerationSettings } from "@/Pages/settings/Moderation";
+import ModerationSettings from "@/Pages/settings/Moderation";
 import { CacheSettings } from "./settings/Cache";
 
 import messages from "./messages";

packages/app/src/Pages/settings/Moderation.tsx

@@ -1,30 +1,41 @@
 import { unixNowMs } from "@snort/shared";
 import useLogin from "@/Hooks/useLogin";
-import { updateAppData } from "@/Login";
+import { SnortAppData, updateAppData } from "@/Login";
 import { appendDedupe } from "@/SnortUtils";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-export function ModerationSettings() {
+export default function ModerationSettingsPage() {
   const login = useLogin();
   const [muteWord, setMuteWord] = useState("");
+  const appData = login.appData.item;
 
   function addMutedWord() {
     updateAppData(login.id, ad => ({
       item: {
         ...ad,
-        mutedWords: appendDedupe(login.appData.item.mutedWords, [muteWord]),
+        mutedWords: appendDedupe(appData.mutedWords, [muteWord]),
       },
       timestamp: unixNowMs(),
     }));
     setMuteWord("");
   }
 
+  const handleToggle = (setting: keyof SnortAppData) => {
+    updateAppData(login.id, ad => ({
+      item: {
+        ...ad,
+        [setting]: !appData[setting],
+      },
+      timestamp: unixNowMs(),
+    }));
+  };
+
   function removeMutedWord(word: string) {
     updateAppData(login.id, ad => ({
       item: {
         ...ad,
-        mutedWords: login.appData.item.mutedWords.filter(a => a !== word),
+        mutedWords: appData.mutedWords.filter(a => a !== word),
       },
       timestamp: unixNowMs(),
     }));
@@ -34,8 +45,27 @@ export function ModerationSettings() {
   return (
     <>
       <h2>
-        <FormattedMessage defaultMessage="Muted Words" id="AN0Z7Q" />
+        <FormattedMessage defaultMessage="Moderation" id="wofVHy" />
       </h2>
+
+      <div className="py-4 flex flex-col gap-2">
+        <div className="flex items-center mb-2">
+          <input
+            type="checkbox"
+            checked={appData.showContentWarningPosts}
+            onChange={() => handleToggle("showContentWarningPosts")}
+            className="mr-2"
+            id="showContentWarningPosts"
+          />
+          <label htmlFor="showContentWarningPosts">
+            <FormattedMessage defaultMessage="Show posts that have a content warning tag" id="fQN+tq" />
+          </label>
+        </div>
+      </div>
+
+      <h3>
+        <FormattedMessage defaultMessage="Muted Words" id="AN0Z7Q" />
+      </h3>
       <div className="flex flex-col g12">
         <div className="flex g8">
           <input
@@ -49,7 +79,7 @@ export function ModerationSettings() {
             <FormattedMessage defaultMessage="Add" id="2/2yg+" />
           </button>
         </div>
-        {login.appData.item.mutedWords.map(v => (
+        {appData.mutedWords.map(v => (
           <div className="p br b flex items-center justify-between">
             <div>{v}</div>
             <button type="button" onClick={() => removeMutedWord(v)}>

packages/app/src/lang.json

@@ -1074,6 +1074,9 @@
   "fOksnD": {
     "defaultMessage": "Can't vote because LNURL service does not support zaps"
   },
+  "fQN+tq": {
+    "defaultMessage": "Show posts that have a content warning tag"
+  },
   "fWZYP5": {
     "defaultMessage": "Pinned"
   },
@@ -1485,6 +1488,9 @@
   "wih7iJ": {
     "defaultMessage": "name is blocked"
   },
+  "wofVHy": {
+    "defaultMessage": "Moderation"
+  },
   "wqyN/i": {
     "defaultMessage": "Find out more info about {service} at {link}"
   },

packages/app/src/translations/en.json

@@ -353,6 +353,7 @@
   "fBI91o": "Zap",
   "fBlba3": "Thanks for using {site}, please consider donating if you can.",
   "fOksnD": "Can't vote because LNURL service does not support zaps",
+  "fQN+tq": "Show posts that have a content warning tag",
   "fWZYP5": "Pinned",
   "fX5RYm": "Pick a few topics of interest",
   "filwqD": "Read",
@@ -489,6 +490,7 @@
   "wSZR47": "Submit",
   "wWLwvh": "Anon",
   "wih7iJ": "name is blocked",
+  "wofVHy": "Moderation",
   "wqyN/i": "Find out more info about {service} at {link}",
   "wtLjP6": "Copy ID",
   "x/Fx2P": "Fund the services that you use by splitting a portion of all your zaps into a pool of funds!",