From 572bfcee6ce343c6bf9d69262576de4e57c01500 Mon Sep 17 00:00:00 2001 From: Vendicated Date: Tue, 27 Sep 2022 16:57:46 +0200 Subject: [PATCH] Fix Settings UI --- src/components/ErrorBoundary.tsx | 6 ++--- src/components/Flex.tsx | 17 +++++++++++++ src/components/Settings.tsx | 35 ++++++++++++--------------- src/patcher.ts | 2 +- src/webpack/{common.ts => common.tsx} | 29 +++++++++++----------- src/webpack/webpack.ts | 10 +++++++- 6 files changed, 61 insertions(+), 38 deletions(-) create mode 100644 src/components/Flex.tsx rename src/webpack/{common.ts => common.tsx} (50%) diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index e90394741..2b754b27a 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -1,5 +1,5 @@ import Logger from "../utils/logger"; -import { Card, React } from "../webpack/common"; +import { React } from "../webpack/common"; interface Props { fallback?: React.ComponentType>; @@ -49,7 +49,7 @@ export default class ErrorBoundary extends React.Component; return ( - {this.state.error} - + ); } } diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx new file mode 100644 index 000000000..c36976724 --- /dev/null +++ b/src/components/Flex.tsx @@ -0,0 +1,17 @@ +import { PropsWithChildren } from "react"; +import type { React } from '../webpack/common'; + +export function Flex(props: React.PropsWithChildren<{ + flexDirection?: React.CSSProperties["flexDirection"]; + style?: React.CSSProperties; +}>) { + props.style ??= {}; + props.style.flexDirection ||= props.flexDirection; + props.style.gap ??= "1em"; + props.style.display = "flex"; + return ( +
+ {props.children} +
+ ); +} diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index d5b655bb0..1950d7a05 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -3,10 +3,11 @@ import Plugins from 'plugins'; import { useSettings } from "../api/settings"; import IpcEvents from "../utils/IpcEvents"; -import { Button, ButtonProps, Flex, Switch, Forms, React } from "../webpack/common"; +import { Button, Switch, Forms, React } from "../webpack/common"; import ErrorBoundary from "./ErrorBoundary"; import { startPlugin } from "../plugins"; import { stopPlugin } from '../plugins/index'; +import { Flex } from './Flex'; export default ErrorBoundary.wrap(function Settings(props) { const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke(IpcEvents.GET_SETTINGS_DIR), "Loading..."); @@ -32,24 +33,20 @@ export default ErrorBoundary.wrap(function Settings(props) { SettingsDir: {settingsDir} - - - - - - + + Settings { // Remove CSP electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, url }, cb) => { if (responseHeaders) { - delete responseHeaders["content-security-policy-report-only"]; + delete responseHeaders["content-security-policy-reportgnly"]; delete responseHeaders["content-security-policy"]; // Fix hosts that don't properly set the content type, such as diff --git a/src/webpack/common.ts b/src/webpack/common.tsx similarity index 50% rename from src/webpack/common.ts rename to src/webpack/common.tsx index 525a678e4..f3cb01843 100644 --- a/src/webpack/common.ts +++ b/src/webpack/common.tsx @@ -1,5 +1,5 @@ import { startAll } from "../plugins"; -import { waitFor, filters } from './webpack'; +import { waitFor, filters, findByProps } from './webpack'; import type Components from "discord-types/components"; import type Stores from "discord-types/stores"; import type Other from "discord-types/other"; @@ -7,12 +7,9 @@ import type Other from "discord-types/other"; export let FluxDispatcher: Other.FluxDispatcher; export let React: typeof import("react"); export let UserStore: Stores.UserStore; -export let Forms: any; +export let Forms: any = {}; export let Button: any; -export let ButtonProps: any; export let Switch: any; -export let Flex: Components.Flex; -export let Card: Components.Card; export let Tooltip: Components.Tooltip; waitFor("useState", m => React = m); @@ -25,12 +22,16 @@ waitFor(["dispatch", "subscribe"], m => { m.subscribe("CONNECTION_OPEN", cb); }); waitFor(["getCurrentUser", "initialize"], m => UserStore = m); -waitFor("FormSection", m => Forms = m); -waitFor(["ButtonLooks", "default"], m => { - Button = m.default; - ButtonProps = m; -}); -waitFor(filters.byDisplayName("SwitchItem"), m => Switch = m.default); -waitFor(filters.byDisplayName("Flex"), m => Flex = m.default); -waitFor(filters.byDisplayName("Card"), m => Card = m.default); -waitFor(filters.byDisplayName("Tooltip"), m => Tooltip = m.default); +waitFor(["Hovers", "Looks", "Sizes"], m => Button = m); +waitFor(filters.byCode("helpdeskArticleId"), m => Switch = m); +waitFor(["Positions", "Colors"], m => Tooltip = m); + +waitFor(m => m.Tags && filters.byCode("errorSeparator")(m), m => Forms.FormTitle = m); +waitFor(m => m.Tags && filters.byCode("titleClassName", "sectionTitle")(m), m => Forms.FormSection = m); +waitFor(m => m.Types?.INPUT_PLACEHOLDER, m => Forms.FormText = m); + +waitFor(m => { + if (typeof m !== "function") return false; + const s = m.toString(); + return s.length < 200 && s.includes("divider"); +}, m => Forms.FormDivider = m); diff --git a/src/webpack/webpack.ts b/src/webpack/webpack.ts index a1fd2fb2a..b8f10e433 100644 --- a/src/webpack/webpack.ts +++ b/src/webpack/webpack.ts @@ -10,7 +10,15 @@ export const filters = { props.length === 1 ? m => m[props[0]] !== void 0 : m => props.every(p => m[p] !== void 0), - byDisplayName: (deezNuts: string): FilterFn => m => m.default?.displayName === deezNuts + byDisplayName: (deezNuts: string): FilterFn => m => m.default?.displayName === deezNuts, + byCode: (...code: string[]): FilterFn => m => { + if (typeof m !== "function") return false; + const s = Function.prototype.toString.call(m); + for (const c of code) { + if (!s.includes(c)) return false; + } + return true; + } }; export const subscriptions = new Map();