Muted words: phase 1

packages/app/src/Pages/SettingsPage.tsx

@@ -9,6 +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 "./settings/Moderation";
 
 import messages from "./messages";
 
@@ -56,6 +57,10 @@ export const SettingsRoutes: RouteObject[] = [
         path: "keys",
         element: <ExportKeys />,
       },
+      {
+        path: "moderation",
+        element: <ModerationSettings />,
+      },
       ...ManageHandleRoutes,
       ...WalletSettingsRoutes,
     ],

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

@@ -0,0 +1,44 @@
+import { unixNowMs } from "@snort/shared";
+import useLogin from "Hooks/useLogin";
+import { setAppData } from "Login";
+import { appendDedupe } from "SnortUtils";
+import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+
+export function ModerationSettings() {
+    const login = useLogin();
+    const [muteWord, setMuteWord] = useState("");
+
+    function addMutedWord() {
+        login.appData ??= {
+            item: {
+                mutedWords: []
+            },
+            timestamp: 0
+        };
+        setAppData(login, {
+            ...login.appData.item,
+            mutedWords: appendDedupe(login.appData.item.mutedWords, [muteWord])
+        }, unixNowMs());
+        setMuteWord("");
+    }
+    return <>
+        <h2>
+            <FormattedMessage defaultMessage="Muted Words" />
+        </h2>
+        <div className="flex-column g12">
+            <div className="flex g8">
+                <input type="text" placeholder="eg. crypto" className="w-max" value={muteWord} onChange={e => setMuteWord(e.target.value)} />
+                <button type="button" onClick={addMutedWord}>
+                    <FormattedMessage defaultMessage="Add" />
+                </button>
+            </div>
+            {login.appData.item.mutedWords.map(v => <div className="p br b flex f-space">
+                <div>{v}</div>
+                <button type="button">
+                    <FormattedMessage defaultMessage="Delete" />
+                </button>
+            </div>)}
+        </div>
+    </>
+}

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

@@ -51,6 +51,11 @@ const SettingsIndex = () => {
             <FormattedMessage defaultMessage="Export Keys" />
             <Icon name="arrowFront" size={16} />
           </div>
+          <div className="settings-row" onClick={() => navigate("moderation")}>
+            <Icon name="shield-tick" size={24} />
+            <FormattedMessage defaultMessage="Moderation" />
+            <Icon name="arrowFront" size={16} />
+          </div>
           <div className="settings-row" onClick={() => navigate("handle")}>
             <Icon name="badge" size={24} />
             <FormattedMessage defaultMessage="Nostr Adddress" />