feat: "Enable devtools" checkbox for Desktop

packages/client/components/app/interface/settings/user/Native.tsx

@@ -2,6 +2,7 @@ import { createSignal, onMount } from "solid-js";
 
 import { Trans, useLingui } from "@lingui-solid/solid/macro";
 
+import { useModals } from "@revolt/modal";
 import { CategoryButton, Checkbox, Column } from "@revolt/ui";
 import { Symbol } from "@revolt/ui/components/utils/Symbol";
 
@@ -13,6 +14,7 @@ declare type DesktopConfig = {
   spellchecker: boolean;
   hardwareAcceleration: boolean;
   discordRpc: boolean;
+  enableDevtoolsUntilTimestamp: number;
   windowState: {
     isMaximised: boolean;
   };
@@ -48,6 +50,7 @@ export default function Native() {
   const { t } = useLingui();
   const [autostart, setAutostart] = createSignal(false);
   const [config, setConfig] = createSignal(window.desktopConfig.get());
+  const { openModal } = useModals();
 
   function set(config: Partial<DesktopConfig>) {
     window.desktopConfig.set(config);
@@ -65,13 +68,32 @@ export default function Native() {
     setAutostart(savedValue);
   }
 
+  let solidJsSucks = false;
+
   const toggles: Partial<Record<keyof DesktopConfig, () => void>> = {
     minimiseToTray: () => set({ minimiseToTray: !config().minimiseToTray }),
     startMinimisedToTray: () =>
       set({ startMinimisedToTray: !config().startMinimisedToTray }),
     customFrame: () => set({ customFrame: !config().customFrame }),
     discordRpc: () => set({ discordRpc: !config().discordRpc }),
     spellchecker: () => set({ spellchecker: !config().spellchecker }),
+    enableDevtoolsUntilTimestamp: () => {
+      if (config().enableDevtoolsUntilTimestamp > Date.now()) {
+        set({ enableDevtoolsUntilTimestamp: 0 });
+        return;
+      }
+
+      // When you press the checkbox itself, it makes two modals for some reason?
+      // If you have an actual fix (instead of this), please do tell me!
+      if (solidJsSucks) return;
+      solidJsSucks = true;
+      setTimeout(() => (solidJsSucks = false));
+
+      openModal({
+        type: "enable_devtools",
+        enableDevtools: (until) => set({ enableDevtoolsUntilTimestamp: until }),
+      });
+    },
     hardwareAcceleration: () =>
       set({ hardwareAcceleration: !config().hardwareAcceleration }),
   };
@@ -81,20 +103,17 @@ export default function Native() {
     icon: string,
     label: string,
     description: string,
+    checkedFunc?: (value: DesktopConfig[K]) => boolean,
   ) {
+    let checked: DesktopConfig[K] | boolean = config()[key];
+    if (checkedFunc) {
+      checked = checkedFunc(checked);
+    }
+
     return (
       <CategoryButton
-        action={
-          <Checkbox
-            checked={config()[key]}
-            onClick={(e) => e.stopPropagation()}
-            onChange={(e) => {
-              e.stopPropagation();
-              toggles[key]!();
-            }}
-          />
-        }
-        onClick={toggles[key]}
+        action={<Checkbox checked={!!checked} />}
+        onClick={() => toggles[key]!()}
         icon={<Symbol>{icon}</Symbol>}
         description={description}
       >
@@ -107,13 +126,7 @@ export default function Native() {
     <Column gap="lg">
       <CategoryButton.Group>
         <CategoryButton
-          action={
-            <Checkbox
-              checked={autostart()}
-              onClick={(e) => e.stopPropagation()}
-              onChange={toggleAutostart}
-            />
-          }
+          action={<Checkbox checked={autostart()} onChange={toggleAutostart} />}
           onClick={toggleAutostart}
           icon={<Symbol>exit_to_app</Symbol>}
           description={
@@ -164,6 +177,16 @@ export default function Native() {
         )}
       </CategoryButton.Group>
 
+      <CategoryButton.Group>
+        {CheckboxButton(
+          "enableDevtoolsUntilTimestamp",
+          "warning_amber",
+          t`Temporarily Enable Devtools`,
+          t`Allows you to temporarily use the Chromium Developer Tools.`,
+          (timestamp) => timestamp > Date.now(),
+        )}
+      </CategoryButton.Group>
+
       <CategoryButton.Group>
         <CategoryButton
           icon={<Symbol>desktop_windows</Symbol>}

packages/client/components/modal/modals.tsx

@@ -33,6 +33,7 @@ import { EditEmailModal } from "./modals/EditEmail";
 import { EditPasswordModal } from "./modals/EditPassword";
 import { EditUsernameModal } from "./modals/EditUsername";
 import { EmojiPreviewModal } from "./modals/EmojiPreview";
+import { EnableDevtoolsModal } from "./modals/EnableDevtools";
 import { Error2Modal } from "./modals/Error2";
 import { ImageViewerModal } from "./modals/ImageViewer";
 import { InviteModal } from "./modals/Invite";
@@ -183,6 +184,8 @@ export function RenderModal(props: ActiveModal & { onClose: () => void }) {
       return <ResetBotTokenModal {...modalProps} />;
     case "edit_category":
       return <EditCategoryModal {...modalProps} />;
+    case "enable_devtools":
+      return <EnableDevtoolsModal {...modalProps} />;
 
     default:
       console.error(

packages/client/components/modal/modals/EnableDevtools.tsx

@@ -0,0 +1,44 @@
+import { createSignal } from "solid-js";
+
+import { Trans } from "@lingui-solid/solid/macro";
+
+import { Checkbox, Dialog, DialogProps } from "@revolt/ui";
+
+import MdWarning from "@material-design-icons/svg/outlined/warning.svg?component-solid";
+
+import { Modals } from "../types";
+
+export function EnableDevtoolsModal(
+  props: DialogProps & Modals & { type: "enable_devtools" },
+) {
+  const [confirm, setConfirm] = createSignal(false);
+
+  return (
+    <Dialog
+      icon={<MdWarning fill="var(--md-sys-color-error)" />}
+      show={props.show}
+      onClose={props.onClose}
+      title={<Trans>Temporarily Enable Devtools</Trans>}
+      actions={[
+        { text: <Trans>Close</Trans> },
+        {
+          text: <Trans>Enable</Trans>,
+          isDisabled: !confirm(),
+          onClick() {
+            props.enableDevtools(Date.now() + 24 * 60 * 60 * 1000);
+          },
+        },
+      ]}
+    >
+      <Trans>
+        Click on the items below to learn more about different changes!
+      </Trans>
+      <Checkbox
+        checked={confirm()}
+        onChange={() => setConfirm((checked) => !checked)}
+      >
+        I understand the dangers and accept the risk.
+      </Checkbox>
+    </Dialog>
+  );
+}

packages/client/components/modal/types.ts

@@ -314,4 +314,8 @@ export type Modals =
       type: "edit_category";
       server: Server;
       category: CategoryData;
+    }
+  | {
+      type: "enable_devtools";
+      enableDevtools: (untilTimestamp: number) => void;
     };