Fixed issues and added reset button

src/plugins/betterBanReasons/README.md

@@ -1,8 +1 @@
 ### Create custom reasons to use in the Discord ban modal.
-
-![image](https://github.com/Vendicated/Vencord/assets/119569726/d0c1bd70-00b1-4786-a2f7-7db809f15ab0)
-![image](https://github.com/Vendicated/Vencord/assets/119569726/411411f6-f2b7-4747-b6e7-4615116dcf22)
-
-I do not think that we're **easily** and **non-jankily** able to add the click functionality, so I didn't implement that. If anybody gets it working, shoot me a message on Discord.
-
-[Original plugin request](https://github.com/Vencord/plugin-requests/issues/607)

src/plugins/betterBanReasons/index.tsx

@@ -4,59 +4,69 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./styles.css";
+
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, Forms, TextInput, useEffect, useState } from "@webpack/common";
+import { Button, Forms, TextInput } from "@webpack/common";
+
+const defaultReasons = [
+    "Suspicious or spam account",
+    "Compromised or spam account",
+    "Breaking server rules",
+];
 
 function ReasonsComponent() {
-	const { reasons } = settings.use(["reasons"]);
+    const { reasons } = settings.use(["reasons"]);
 
     return (
         <Forms.FormSection title="Reasons">
-            {reasons.map((reason, index) => (
+            {reasons.map((reason: string, index: number) => (
                 <div
-                    style={{
-                        display: "grid",
-                        padding: 0,
-                        paddingBottom: "0.5rem",
-                        gap: "0.5rem",
-                        gridTemplateColumns: "6fr 1fr",
-                    }}
+                    className="vc-bbr-reason-wrapper"
                 >
                     <TextInput
-                        style={{ flex: 1 }}
                         type="text"
                         key={index}
                         value={reason}
-                        onChange={(value: string) => {
-                            reasons[index] = value;
-                            setReasons([...reasons]);
+                        onChange={(v: string) => {
+                            reasons[index] = v;
+                            settings.store.reasons = [...reasons];
                         }}
                         placeholder="Reason"
                     />
                     <Button
                         color={Button.Colors.RED}
-                        style={{ height: "100%" }}
-                        size={Button.Sizes.MIN}
+                        className="vc-bbr-remove-button"
                         onClick={() => {
                             reasons.splice(index, 1);
-                            setReasons([...reasons]);
+                            settings.store.reasons = [...reasons];
                         }}
                     >
                         Remove
                     </Button>
                 </div>
             ))}
-            <Button
-                size={Button.Sizes.SMALL}
-                onClick={() => {
-                    reasons.push("");
-                    setReasons([...reasons]);
-                }}
+            <div
+                className="vc-bbr-reason-wrapper"
             >
-                Add new
-            </Button>
+                <Button
+                    onClick={() => {
+                        reasons.push("");
+                        settings.store.reasons = [...reasons];
+                    }}
+                >
+                    Add new
+                </Button>
+                <Button
+                    color={Button.Colors.TRANSPARENT}
+                    onClick={() => {
+                        settings.store.reasons = defaultReasons;
+                    }}
+                >
+                    Reset
+                </Button></div>
         </Forms.FormSection>
     );
 }
@@ -65,11 +75,7 @@ const settings = definePluginSettings({
     reasons: {
         description: "Your custom reasons",
         type: OptionType.COMPONENT,
-        default: [
-            "Suspicious or spam account",
-            "Compromised or spam account",
-            "Breaking server rules",
-        ],
+        default: defaultReasons,
         component: ReasonsComponent,
     },
 });
@@ -80,15 +86,15 @@ export default definePlugin({
     authors: [Devs.Inbestigator],
     patches: [
         {
-            find: 'username:"@".concat(_.default.getName',
+            find: "default.Messages.BAN_MULTIPLE_CONFIRM_TITLE",
             replacement: {
-                match: /U=\[([\s\S]*?)\]/,
-                replace: "U=$self.getReasons()",
-            },
-        },
+                match: /=\[([^\\]*?)\]/,
+                replace: "=$self.getReasons()"
+            }
+        }
     ],
     getReasons() {
-    	return settings.store.reasons.map(reason => (
+        return settings.store.reasons.map(reason => (
             { name: reason, value: reason }
         ));
     },

src/plugins/betterBanReasons/styles.css

@@ -0,0 +1,11 @@
+.vc-bbr-reason-wrapper {
+    display: grid;
+    padding: 0;
+    padding-bottom: 0.5rem;
+    gap: 0.5rem;
+    grid-template-columns: 6fr 1fr;
+}
+
+.vc-bbr-remove-button {
+    height: 100%;
+}