Fix InvisibleTyping

Strencher · Aug 28, 2024 · 3413d0a · 3413d0a
1 parent 1c3bd3a
commit 3413d0a
Show file tree

Hide file tree

Showing 15 changed files with 349 additions and 201 deletions.
diff --git a/InvisibleTyping/changelog.scss b/InvisibleTyping/changelog.scss
@@ -0,0 +1,55 @@
+.Changelog-Title-Wrapper {
+    font-size: 20px;
+    font-weight: 600;
+    font-family: var(--font-display);
+    color: var(--header-primary);
+    line-height: 1.2;
+
+    div {
+        font-size: 12px;
+        font-weight: 400;
+        font-family: var(--font-primary);
+        color: var(--primary-300);
+        line-height: 1.3333333333333333;
+    }
+}
+
+.Changelog-Banner {
+    width: 405px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+}
+
+.Changelog-Item {
+    color: #c4c9ce;
+
+    .Changelog-Header {
+        display: flex;
+        text-transform: uppercase;
+        font-weight: 700;
+        align-items: center;
+        margin-bottom: 10px;
+
+        &.added { color: #45BA6A; }
+        &.fixed { color: #EC4245; }
+        &.improved { color: #5865F2; }
+
+        &::after {
+            content: "";
+            flex-grow: 1;
+            height: 1px;
+            margin-left: 7px;
+            background: currentColor;
+        }
+    }
+
+    span {
+        display: list-item;
+        list-style: inside;
+        margin-left: 5px;
+
+        &::marker {
+            color: var(--background-accent);
+        }
+    }
+}
diff --git a/InvisibleTyping/components/Settings.tsx b/InvisibleTyping/components/Settings.tsx
diff --git a/InvisibleTyping/components/icons/keyboard.tsx b/InvisibleTyping/components/icons/keyboard.tsx
@@ -1,12 +1,12 @@
 import styles from "../typingButton.scss";
 import React from "react";
 
-export default function Keyboard({disabled, ...props}) {
+export default function Keyboard({ disabled, ...props }) {
     return (
         <svg {...props} width="25" height="25" viewBox="0 0 576 512">
             <path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z"></path>
-            {disabled 
-                ? <rect className={styles.disabledStrokeThrough} x="10" y="10" width="600pt" height="70px" fill="#f04747" /> 
+            {disabled
+                ? <rect className={styles.disabledStrokeThrough} x="10" y="10" width="600pt" height="70px" fill="#f04747" />
                 : null
             }
         </svg>

diff --git a/InvisibleTyping/components/settings.json b/InvisibleTyping/components/settings.json
@@ -0,0 +1,9 @@
+[
+    {
+        "type": "switch",
+        "name": "Automatically enable",
+        "note": "Automatically enables the typing indicator for each channel that isn't manually disabled",
+        "id": "autoEnable",
+        "value": true
+    }
+]
diff --git a/InvisibleTyping/components/settings.jsx b/InvisibleTyping/components/settings.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Webpack } from "@api";
+import Settings from "../modules/settings";
+import { useStateFromStores } from "../modules/shared";
+import SettingsItems from "./settings.json";
+
+const { FormSwitch } = Webpack.getByKeys("FormSwitch");
+
+function SwitchItem(props) {
+    const value = useStateFromStores([Settings], () => Settings.get(props.id, props.value));
+
+    return (
+        <FormSwitch
+            {...props}
+            value={value}
+            children={props.name}
+            onChange={value => {
+                Settings.set(props.id, value);
+            }}
+        />
+    );
+}
+
+function renderItems(items) {
+    return items.map(item => {
+        switch (item.type) {
+            case "switch":
+                return <SwitchItem {...item} />;
+            default:
+                return null;
+        }
+    });
+}
+
+export default function SettingsPanel() {
+    return (
+        <div>
+            {renderItems(SettingsItems)}
+        </div>
+    );
+}
diff --git a/InvisibleTyping/components/settings.scss b/InvisibleTyping/components/settings.scss
diff --git a/InvisibleTyping/components/typingbutton.tsx b/InvisibleTyping/components/typingbutton.tsx
@@ -1,14 +1,9 @@
-import { joinClassNames } from "@discord/utils";
-import { TooltipContainer as Tooltip } from "@discord/components";
-import { Toasts, WebpackModules } from "@zlibrary";
-import React, { useCallback } from "react";
-import Settings from "../settings";
+import React from "react";
+import { Components, ContextMenu, UI } from "@api";
 import Keyboard from "./icons/keyboard";
 import styles from "./typingButton.scss";
-import { useStateFromStores } from "@discord/flux";
-import { openContextMenu, Menu, MenuItem, closeContextMenu } from "@discord/contextmenu";
-
-const TypingModule = WebpackModules.getByProps("startTyping");
+import Settings from "../modules/settings";
+import { buildClassName, TypingModule, useStateFromStores } from "../modules/shared";
 
 const removeItem = function (array: any[], item: any) {
     while (array.includes(item)) {
@@ -18,36 +13,40 @@ const removeItem = function (array: any[], item: any) {
     return array;
 };
 
-function InvisibleTypingContextMenu({ channelId }) {
-    const enabled = useStateFromStores([Settings], () => Settings.get<boolean>("autoEnable", true));
+function InvisibleTypingContextMenu() {
+    const enabled = useStateFromStores([Settings], () => Settings.get("autoEnable", true));
 
     return (
-        <Menu navId="invisible-typing-context-menu" onClose={closeContextMenu}>
-            <MenuItem
+        <ContextMenu.Menu
+            navId="invisible-typing-context-menu"
+            onClose={ContextMenu.close}
+        >
+            <ContextMenu.Item
                 id="globally-disable-or-enable-typing"
                 label={enabled ? "Disable Globally" : "Enable Globally"}
                 action={() => {
                     Settings.set("autoEnable", !enabled);
                 }}
             />
-            <MenuItem
-                color="colorDanger"
+            <ContextMenu.Item
+                color="danger"
                 label="Reset Config"
                 disabled={!Settings.get("exclude", []).length}
                 id="reset-config"
                 action={() => {
                     Settings.set("exclude", []);
-                    Toasts.success("Successfully reset config for all channels.");
+                    UI.showToast("Successfully reset config for all channels.", { type: "success" });
                 }}
             />
-        </Menu>
+
+        </ContextMenu.Menu>
     );
 }
 
 export default function InvisibleTypingButton({ channel, isEmpty }) {
     const enabled = useStateFromStores([Settings], InvisibleTypingButton.getState.bind(this, channel.id));
-    
-    const handleClick = useCallback(() => {
+
+    const handleClick = React.useCallback(() => {
         const excludeList = [...Settings.get<string[]>("exclude", [])];
 
         if (excludeList.includes(channel.id)) {
@@ -61,20 +60,32 @@ export default function InvisibleTypingButton({ channel, isEmpty }) {
         Settings.set("exclude", excludeList);
     }, [enabled]);
 
-    const handleContextMenu = useCallback(event => {
-        openContextMenu(event, () => {
-            return <InvisibleTypingContextMenu channelId={channel.id} />;
+    const handleContextMenu = React.useCallback(event => {
+        ContextMenu.open(event, () => {
+            return <InvisibleTypingContextMenu />;
         })
     }, [enabled]);
-    
+
     return (
-        <Tooltip text={enabled ? "Typing Enabled" : "Typing Disabled"} position="top" className={styles.invisibleTypingTooltip}>
-            <button className={joinClassNames(styles.invisibleTypingButton, {enabled, disabled: !enabled})} onClick={handleClick} onContextMenu={handleContextMenu}>
-                <Keyboard disabled={!enabled}/>
-            </button>
-        </Tooltip>
+        <Components.Tooltip text={enabled ? "Typing Enabled" : "Typing Disabled"}>
+            {props => (
+                <button
+                    {...props}
+                    className={
+                        buildClassName(styles.invisibleTypingButton, {
+                            enabled,
+                            disabled: !enabled
+                        })
+                    }
+                    onClick={handleClick}
+                    onContextMenu={handleContextMenu}
+                >
+                    <Keyboard disabled={!enabled} />
+                </button>
+            )}
+        </Components.Tooltip>
     );
-};
+}
 
 InvisibleTypingButton.getState = function (channelId: string) {
     const isGlobal = Settings.get<boolean>("autoEnable", true);