Merge divergent design points

assets/locales/en-us.json

@@ -165,7 +165,11 @@
         "isEnabled": "Enabled",
         "listView": "List View",
         "gridView": "Grid View",
+        "enableAll": "Enable All",
+        "disableAll": "Disable All",
+        "enableAllWarning": "Enabling all {{type}} can cause temporary lag and unexpected errors.\n\n(Hold shift while clicking to skip this prompt!)",
         "search": "Search {{type}}",
+        "results": "{{count}} Results",
         "editAddon": "Edit",
         "deleteAddon": "Delete",
         "confirmDelete": "Are you sure you want to delete {{name}}?",
@@ -189,14 +193,7 @@
         "wasUnloaded": "{{name}} was unloaded.",
         "blankSlateHeader": "You don't have any {{type}}s!",
         "blankSlateMessage": "Grab some from [this website]({{link}}) and add them to your {{type}} folder.",
-        "isEnabled": "Enabled",
-        "wasLoaded": "{{name}} v{{version}} was loaded.",
-        "listView": "List View",
-        "gridView": "Grid View",
-        "enableAll": "Enable All",
-        "disableAll": "Disable All",
-        "results": "{{count}} Results",
-        "enableAllWarning": "Enabling all {{type}} can cause temporary lag and unexpected errors.\n\n(Hold shift while clicking to skip this prompt!)"
+        "wasLoaded": "{{name}} v{{version}} was loaded."
     },
     "CustomCSS": {
         "confirmationText": "You have unsaved changes to your Custom CSS. Closing this window will lose all those changes.",
@@ -258,5 +255,8 @@
         "versionAvailable": "Version {{version}} now available!",
         "upToDateBlankslate": "All of your {{type}} seem to be up to date!",
         "updateButton": "Update!"
+    },
+    "Settings": {
+        "customColor": "Custom Color"
     }
 }

renderer/src/builtins/developer/debuglogs.js

@@ -69,6 +69,8 @@ export default new class DebugLogs extends Builtin {
 
     async checkFilesize() {
         try {
+            // Not been created yet, no need to check filesize
+            if (!fs.existsSync(this.logFile)) return;
             const stats = fs.statSync(this.logFile);
             const mb = stats.size / (1024 * 1024);
             if (mb < 100) return; // Under 100MB, all good

renderer/src/builtins/general/contextmenu.js

@@ -32,10 +32,10 @@ export default new class BDContextMenu extends Builtin {
 
     callback(retVal) {
         const items = Settings.collections.map(c => this.buildCollectionMenu(c));
-        items.push({label: Strings.panels.updates, action: () => {this.openCategory("updates");}});
-        if (Settings.get("settings", "customcss", "customcss")) items.push({label: Strings.panels.customcss, action: () => {this.openCategory("customcss");}});
-        items.push(this.buildAddonMenu(Strings.panels.plugins, pluginManager));
-        items.push(this.buildAddonMenu(Strings.panels.themes, themeManager));
+        items.push({label: Strings.Panels.updates, action: () => {this.openCategory("updates");}});
+        if (Settings.get("settings", "customcss", "customcss")) items.push({label: Strings.Panels.customcss, action: () => {this.openCategory("customcss");}});
+        items.push(this.buildAddonMenu(Strings.Panels.plugins, pluginManager));
+        items.push(this.buildAddonMenu(Strings.Panels.themes, themeManager));
         retVal?.props?.children?.props?.children?.[0].push(ContextMenu.buildItem({type: "separator"}));
         retVal?.props?.children?.props?.children?.[0].push(ContextMenu.buildItem({type: "submenu", label: "BetterDiscord", items: items}));
     }

renderer/src/modules/webpackmodules.js

@@ -524,7 +524,7 @@ export default class WebpackModules {
                 catch (error) {
                     Logger.stacktrace("WebpackModules", "Could not patch pushed module", error);
                 }
-                finally{
+                finally {
                 	require.m[moduleId] = originalModule;
                 }
             };

renderer/src/styles/ui/addonlist.css

@@ -17,6 +17,7 @@
 }
 
 .bd-controls,
+.bd-controls-basic,
 .bd-controls-advanced {
     display: flex;
 }

renderer/src/styles/ui/sidebar.css

@@ -21,6 +21,7 @@
 
 .bd-sidebar-header .bd-changelog-button {
     height: 16px;
+    padding: 0;
 }
 
 .bd-sidebar-header .bd-icon {
@@ -28,6 +29,6 @@
     fill: var(--interactive-normal);
 }
 
-.bd-sidebar-header .bd-icon:hover {
+.bd-sidebar-header .bd-changelog-button:hover .bd-icon {
     fill: var(--interactive-hover);
 }

renderer/src/ui/base/button.jsx

@@ -51,7 +51,8 @@ export default function Button({
     look = Looks.FILLED,
     color = Colors.BRAND,
     size = Sizes.MEDIUM,
-    grow = true
+    grow = true,
+    ...others
 }) {
     
     const handleClick = useCallback(event => {
@@ -60,7 +61,7 @@ export default function Button({
         onClick?.(event);
     }, [onClick]);
     
-    return <button className={
+    return <button {...others} className={
         Utilities.className(
             "bd-button",
             className,

renderer/src/ui/base/markdown.jsx

@@ -3,26 +3,30 @@ import WebpackModules from "@modules/webpackmodules";
 import DiscordModules from "@modules/discordmodules";
 
 
-const DiscordMarkdown = WebpackModules.find(m => m?.prototype?.render && m.rules);
-let rules = {};
-if (DiscordMarkdown) {
-    rules = {
-        ...DiscordMarkdown.rules,
-        link: DiscordModules.SimpleMarkdown.defaultRules.link
-    };
+let DiscordMarkdown, rules;
 
-    const originalLink = rules.link.react;
-    rules.link.react = function() {
-        const original = Reflect.apply(originalLink, undefined, arguments);
-        original.props.className = "bd-link";
-        original.props.target = "_blank";
-        original.props.rel = "noopener noreferrer";
-        return original;
-    };
+function setupMarkdown() {
+    DiscordMarkdown = WebpackModules.find(m => m?.prototype?.render && m.rules);
+    rules = {};
+    if (DiscordMarkdown) {
+        rules = {
+            ...DiscordMarkdown.rules,
+            link: DiscordModules.SimpleMarkdown.defaultRules.link
+        };
+
+        const originalLink = rules.link.react;
+        rules.link.react = function() {
+            const original = Reflect.apply(originalLink, undefined, arguments);
+            original.props.className = "bd-link";
+            original.props.target = "_blank";
+            original.props.rel = "noopener noreferrer";
+            return original;
+        };
+    }
 }
 
-
 export default function Markdown({className, children}) {
+    if (!DiscordMarkdown && !rules) setupMarkdown();
     if (!DiscordMarkdown) return <div className="bd-markdown-fallback">{children}</div>;
     
     return <DiscordMarkdown

renderer/src/ui/modals.js

@@ -199,7 +199,7 @@ export default class Modals {
                 onConfirm: onConfirm,
                 onCancel: onCancel,
                 onCloseCallback: () => {
-                    if (props?.transitionState === 1) onClose?.();
+                    if (props?.transitionState === 2) onClose?.();
                 }
             }, props), React.createElement(ErrorBoundary, {}, content)));
         }, {modalKey: key});

renderer/src/ui/modals/confirmation.jsx

@@ -9,17 +9,20 @@ import Content from "./content";
 import Text from "../base/text";
 import Button from "../base/button";
 
-const {useRef, useEffect} = React;
+const {useRef, useEffect, useLayoutEffect} = React;
 
 
-export default function ConfirmationModal({transitionState, onClose, className, size = Root.Sizes.SMALL, header, children, danger = false, onCancel = () => {}, onConfirm = () => {}, cancelText = Strings.Modals.cancel, confirmText = Strings.Modals.okay}) {
+export default function ConfirmationModal({transitionState, onClose, onCloseCallback, className, size = Root.Sizes.SMALL, header, children, danger = false, onCancel = () => {}, onConfirm = () => {}, cancelText = Strings.Modals.cancel, confirmText = Strings.Modals.okay}) {
     
+    const buttonRef = useRef(null);
+
     useEffect(() => {
         setTimeout(() => buttonRef?.current?.focus?.(), 0);
     }, []);
 
-    const buttonRef = useRef(null);
-
+    useLayoutEffect(() => {
+        onCloseCallback?.();
+    }, [onCloseCallback]);
 
     return <Root transitionState={transitionState} size={size} className={className}>
         <Header>

renderer/src/ui/settings/addonlist.jsx

@@ -54,7 +54,7 @@ function blankslate(type, onClick) {
 
 function makeBasicButton(title, children, action) {
     return <DiscordModules.Tooltip color="primary" position="top" text={title}>
-                {(props) => <button {...props} className="bd-button" onClick={action}>{children}</button>}
+                {(props) => <Button {...props} size={Button.Sizes.NONE} look={Button.Looks.BLANK} className="bd-button" onClick={action}>{children}</Button>}
             </DiscordModules.Tooltip>;
 }
 

renderer/src/ui/settings/components/color.jsx

@@ -1,5 +1,6 @@
 import React from "@modules/react";
 import DiscordModules from "@modules/discordmodules";
+import Strings from "@modules/strings";
 
 const {useState, useCallback} = React;
 
@@ -76,7 +77,7 @@ export default function Color({value: initialValue, onChange, colors = defaultCo
                     </div>
                 )}
             </DiscordModules.Tooltip>
-            <DiscordModules.Tooltip text="Custom Color" position="bottom">
+            <DiscordModules.Tooltip text={Strings.Settings.customColor} position="bottom">
                 {props => (
                     <div className="bd-color-picker-custom">
                         <Dropper color={getContrastColor(resolveColor(value, true))} />

renderer/src/ui/settings/components/search.jsx

@@ -1,4 +1,5 @@
 import React from "@modules/react";
+import Button from "@ui/base/button";
 import Close from "@ui/icons/close";
 import SearchIcon from "@ui/icons/search";
 
@@ -23,12 +24,14 @@ export default function Search({onChange, className, onKeyDown, placeholder}) {
     const reset = useCallback(() => {
         onChange?.({target: {value: ""}});
         setValue("");
-    }, [onChange]);
+        if (!input.current) return;
+        input.current.focus();
+    }, [onChange, input]);
 
     return <div className={"bd-search-wrapper" + (className ? ` ${className}` : "")}>
                 <input onChange={change} onKeyDown={onKeyDown} type="text" className="bd-search" placeholder={placeholder} maxLength="50" value={value} ref={input}/>
                 {!value && <SearchIcon />}
-                {value && <button className="bd-button" onClick={reset}><Close size="16px" /></button>}
+                {value && <Button look={Button.Looks.BLANK} color={Button.Colors.TRANSPARENT} size={Button.Sizes.NONE} onClick={reset}><Close size="16px" /></Button>}
             </div>;
 
 }

renderer/src/ui/settings/sidebarheader.jsx

@@ -7,6 +7,7 @@ import Strings from "@modules/strings";
 import HistoryIcon from "@ui/icons/history";
 
 import Modals from "@ui/modals";
+import Button from "@ui/base/button";
 
 
 export default function SettingsTitle() {
@@ -14,9 +15,9 @@ export default function SettingsTitle() {
                 <h2 className="bd-sidebar-header-label">BetterDiscord</h2>
                 <DiscordModules.Tooltip color="primary" position="top" text={Strings.Modals.changelog}>
                     {props =>
-                        <div {...props} className="bd-changelog-button" onClick={() => Modals.showChangelogModal(Changelog)}>
+                        <Button {...props} className="bd-changelog-button" look={Button.Looks.BLANK} color={Button.Colors.TRANSPARENT} size={Button.Sizes.NONE} onClick={() => Modals.showChangelogModal(Changelog)}>
                             <HistoryIcon className="bd-icon" size="16px" />
-                        </div>
+                        </Button>
                     }
                 </DiscordModules.Tooltip>
             </div>;