feat(Demonstration): confirmation modal to remind shortcut (#23)

* feat: plugin information in plugins tab

* feat(equicordCSS): remove if hell and simplify

* feat(Demonstration): notif reminder

* fix(Demonstration): improvement

* add devs

* Updates And Fixes

* Revert "Updates And Fixes"

This reverts commit d84b833bc4.

---------

Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>

src/equicordplugins/demonstration/index.tsx

@@ -5,9 +5,11 @@
  */
 
 import { definePluginSettings } from "@api/Settings";
-import { Devs } from "@utils/constants";
+import { classNameFactory } from "@api/Styles";
+import { Devs, EquicordDevs } from "@utils/constants";
+import { closeModal, ModalCloseButton, ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
-import { Text } from "@webpack/common";
+import { Button, Forms, Switch, Text } from "@webpack/common";
 
 // definitely not stolen from glide :P
 async function injectCSS() {
@@ -32,42 +34,90 @@ const validKeycodes = [
     "NumpadDivide", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12", "NumLock", "ScrollLock"
 ];
 
-const settings = definePluginSettings(
-    {
-        keyBind: {
-            description: "The key to toggle the theme when pressed",
-            type: OptionType.STRING,
-            default: "F6",
-            isValid: (value: string) => {
-                if (validKeycodes.includes(value)) {
-                    return true;
-                }
-                return false;
+const settings = definePluginSettings({
+    keyBind: {
+        description: "The key to toggle the theme when pressed",
+        type: OptionType.STRING,
+        default: "F6",
+        isValid: (value: string) => {
+            if (validKeycodes.includes(value)) {
+                return true;
             }
-        },
-        soundVolume: {
-            description: "How loud the toggle sound is (0 to disable)",
-            type: OptionType.SLIDER,
-            default: 0.5,
-            markers: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
-        },
-    });
+            return false;
+        }
+    },
+    soundVolume: {
+        description: "How loud the toggle sound is (0 to disable)",
+        type: OptionType.SLIDER,
+        default: 0.5,
+        markers: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
+    },
+    showConfirmationModal: {
+        description: "Show modal to remind shortcut",
+        type: OptionType.BOOLEAN,
+        default: true,
+    }
+});
 
-function handleKeydown(event) {
-    if (event.code !== settings.store.keyBind) { return; }
+function ToggleModal() {
+    const value = !settings.use(["showConfirmationModal"]).showConfirmationModal;
+    return (
+        <Switch
+            note="You can re-enable this setting later"
+            value={value}
+            onChange={v => { settings.store.showConfirmationModal = !v; }}>
+            Disable modal?
+        </Switch>
+    );
+}
 
+function handleToggle() {
     const style = document.getElementById("DemonstrationStyle");
     if (style != null) {
         style.remove();
         playSound("https://files.catbox.moe/wp5rpz.wav");
     }
     else {
-        injectCSS();
-        playSound("https://files.catbox.moe/ckz46t.wav");
+        if (settings.store.showConfirmationModal) {
+            const cl = classNameFactory("vc-demonstration-modal");
+
+            const key = openModal(props => (
+                <ModalRoot {...props}>
+                    <ModalHeader className={cl("header")}>
+                        <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }} >Demonstration</Text>
+                        <ModalCloseButton onClick={() => closeModal(key)}></ModalCloseButton>
+                    </ModalHeader>
+                    <ModalContent className={cl("content")}>
+                        <Forms.FormText>
+                            This will censor all text! To disable this, remember the shortcut:
+                        </Forms.FormText>
+                        <Text variant="heading-xl/bold" style={{ textAlign: "center", width: "100%", paddingTop: "20px", paddingBottom: "20px" }}>
+                            {settings.store.keyBind}
+                        </Text>
+                        <ToggleModal />
+                    </ModalContent>
+                    <Button
+                        onClick={() => {
+                            closeModal(key);
+                            injectCSS();
+                            playSound("https://files.catbox.moe/ckz46t.wav");
+                        }}
+                    >Okay!</Button>
+                </ModalRoot>
+            ));
+        } else {
+            injectCSS();
+            playSound("https://files.catbox.moe/ckz46t.wav");
+        }
     }
 }
 
-async function playSound(url) {
+function handleKeydown(event: KeyboardEvent) {
+    if (event.code !== settings.store.keyBind) { return; }
+    handleToggle();
+}
+
+async function playSound(url: string) {
     const audio = new Audio(url);
     audio.volume = settings.store.soundVolume;
     await audio.play().catch(error => {
@@ -76,10 +126,15 @@ async function playSound(url) {
     audio.remove();
 }
 
+
 export default definePlugin({
     name: "Demonstration",
     description: "Plugin for taking theme screenshots - censors identifying images and text.",
-    authors: [Devs.Samwich],
+    authors: [Devs.Samwich, EquicordDevs.Panniku],
+    settings,
+    toolboxActions: {
+        "Toggle Demonstration": (() => handleToggle())
+    },
     settingsAboutComponent: () => {
         return (
             <>
@@ -93,5 +148,5 @@ export default definePlugin({
     stop() {
         document.removeEventListener("keydown", handleKeydown);
     },
-    settings
+
 });