update keyword notify

src/plugins/keywordNotify/index.tsx

@@ -16,35 +16,81 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { TextArea, useState, Forms } from "@webpack/common";
-import { definePluginSettings } from "@api/Settings";
 import { DataStore } from "@api/index";
+import { definePluginSettings } from "@api/Settings";
+import { DeleteIcon } from "@components/Icons";
+import { Devs } from "@utils/constants";
+import { Flex } from "@components/Flex";
+import { TextInput, useState, Forms, Button } from "@webpack/common";
+import { useForceUpdater } from "@utils/react";
+import "./style.css";
 
 let regexes = [];
 
-async function setRegexes(regs: string) {
-    regexes = regs.split("\n");
+async function setRegexes(idx: number, reg: string) {
+    regexes[idx] = reg;
     await DataStore.set("KeywordNotify_rules", regexes);
 }
 
+async function removeRegex(idx: number, updater: () => void) {
+    regexes.splice(idx, 1);
+    await DataStore.set("KeywordNotify_rules", regexes);
+    updater();
+}
+
+async function addRegex(updater: () => void) {
+    regexes.push("");
+    await DataStore.set("KeywordNotify_rules", regexes);
+    updater();
+}
+
 const settings = definePluginSettings({
     replace: {
         type: OptionType.COMPONENT,
         description: "",
         component: () => {
-            const [value, setValue] = useState(regexes.join("\n"));
+            const update = useForceUpdater();
+            const [values, setValues] = useState(regexes);
+
+            const elements = regexes.map((a, i) => {
+                const setValue = (v: string) => {
+                    let valuesCopy = [...values];
+                    valuesCopy[i] = v;
+                    setValues(valuesCopy);
+                }
+
+                return (
+                    <>
+                        <Forms.FormTitle tag="h4">Keyword Regex {i + 1}</Forms.FormTitle>
+
+                        <Flex flexDirection="row">
+                            <div style={{flexGrow: 1}}>
+                                <TextInput
+                                    placeholder={"example|regex"}
+                                    spellCheck={false}
+                                    value={values[i]}
+                                    onChange={setValue}
+                                    onBlur={() => setRegexes(i, values[i])}
+                                />
+                            </div>
+
+                            <Button
+                                onClick={() => removeRegex(i, update)}
+                                look={Button.Looks.BLANK}
+                                size={Button.Sizes.ICON}
+                                className="keywordnotify-delete">
+                                <DeleteIcon />
+                            </Button>
+                        </Flex>
+                    </>
+                )
+            });
+
             return (
                 <>
-                    <Forms.FormTitle tag="h4">Keyword Regexes (newline-separated)</Forms.FormTitle>
-                    <TextArea
-                        placeholder={"example|regex\n\\d+"}
-                        spellCheck={false}
-                        value={value}
-                        onChange={setValue}
-                        onBlur={() => setRegexes(value)}
-                    />
+                    {elements}
+                    <div><Button onClick={() => addRegex(update)}>Add Regex</Button></div>
                 </>
             );
         }
@@ -69,7 +115,6 @@ export default definePlugin({
     },
 
     contains(e) {
-        //console.log("message: ", e);
-        return regexes.some(a => e.rawMessage.content.match(new RegExp(a)));
+        return regexes.some(a => a != "" && e.rawMessage.content.match(new RegExp(a)));
     }
 });

src/plugins/keywordNotify/style.css

@@ -0,0 +1,9 @@
+.keywordnotify-delete:hover {
+    color: var(--status-danger);
+}
+
+.keywordnotify-delete {
+    padding: 0px,
+    color: var(--primary-400);
+    transition: color 0.2s ease-in-out;
+}