some other features

css/main.css

@@ -949,6 +949,9 @@ body .ace_closeButton:active {
   flex-shrink: 0;
   padding: 6px 10px;
   overflow: hidden;
+
+  display: flex;
+    justify-content: space-between;
 }
 .theme-dark #bd-settings-sidebar .ui-tab-bar-header {
   color: #72767d;
@@ -957,6 +960,19 @@ body .ace_closeButton:active {
   color: #b9bbbe;
 }
 
+#bd-settings-sidebar .ui-tab-bar-header .bd-changelog-button {
+    height: 16px;
+}
+
+#bd-settings-sidebar .ui-tab-bar-header .bd-icon {
+    cursor: pointer;
+    fill: #72767d;
+}
+
+#bd-settings-sidebar .ui-tab-bar-header .bd-icon:hover {
+    fill: #fff;
+}
+
 #bd-settings-sidebar .ui-tab-bar-separator {
   height: 1px;
   margin: 8px 10px;

src/0globals.js

@@ -1,15 +1,18 @@
 // var settingsPanel, emoteModule, quickEmoteMenu, voiceMode, pluginModule, themeModule, dMode, publicServersModule, mainCore, BDV2;
+export const minimumDiscordVersion = "0.0.306";
+export const currentDiscordVersion = (window.DiscordNative && window.DiscordNative.remoteApp && window.DiscordNative.remoteApp.getVersion && window.DiscordNative.remoteApp.getVersion()) || "0.0.306";
 export const minSupportedVersion = "0.3.0";
-export const bbdVersion = "0.3.0";
+export const bbdVersion = "0.3.1";
 export const bbdChangelog = {
-    description: "There's some pretty big things in this one, and even bigger things coming.",
+    description: "There's some pretty big things in this one, and even bigger things coming. Most of this information is repeated from the `0.3.0` update just in case people hadn't seen the changelog yet.",
     changes: [
         {
             title: "What's New?",
             items: [
-                "**RepoControls** is now integrated into BD and everyone can enjoy sorting and searching their plugins and themes.",
+                "**RepoControls**-like controls are now integrated into BD and everyone can enjoy sorting and searching their plugins and themes.",
                 "BandagedBD has undergone an internal restructure--it's no longer one messy file but *several*. Users shouldn't see any breaking changes (hopefully).",
-                "**Plugin Developers:** You'll begin (or continue for some) to see deprecation notices for several BD globals. Please take these seriously and update your plugins to use `BdApi`, the globals **_will_** be removed. If you find the API to be missing something that you could do before, please message me in BD2's <#603225817262194699> chat."
+                "**Plugin Developers:** You'll begin (or continue for some) to see deprecation notices for several BD globals. Please take these seriously and update your plugins to use `BdApi`, the globals **_will_** be removed. If you find the API to be missing something that you could do before, please message me in BD2's <#603225817262194699> chat.",
+                "**Also Plugin Developers:** There is now an option to enable React Developer Tools in the Developer Options in settings. Just make sure to have the extension installed in your local Chrome installation."
             ]
         },
         {
@@ -17,7 +20,16 @@ export const bbdChangelog = {
             type: "improved",
             items: [
                 "**BD Blue** is now the default accent color for BBD elements in settings. Themes can customize it easily through some new variables: `--bd-blue`, `--bd-blue-hover`, `--bd-blue-active`",
-                "Some improvements have been made to the plugins and themes pages that should hopefully prevent plugins from causing errors when displaying."
+                "Some improvements have been made to the plugins and themes pages that should hopefully prevent plugins from causing errors when displaying.",
+                "You can now review the changelog after you close it by clicking this button in settings: https://i.imgur.com/I3ZdAxG.png"
+            ]
+        },
+        {
+            title: "Minor Stuff",
+            type: "fixed",
+            items: [
+                "**Quick Emote Menu** works again, sorry about that!",
+                "Fixed an issue with searching plugin/theme lists."
             ]
         }
     ]
@@ -49,6 +61,7 @@ export const settings = {
     /* Developer */
     "Developer Mode":         	  {id: "bda-gs-8",  info: "Developer Mode",                                    implemented: true,  hidden: false, cat: "core", category: "developer settings"},
     "Copy Selector":			  {id: "fork-dm-1", info: "Adds a \"Copy Selector\" option to context menus when developer mode is active", implemented: true,  hidden: false, cat: "core", category: "developer settings"},
+    "React DevTools":			  {id: "reactDevTools", info: "Adds react developer tools to the devtools. Must be installed in Google Chrome on your pc.", implemented: true,  hidden: true, cat: "core", category: "developer settings"},
 
     /* Window Prefs */
     "Enable Transparency":        {id: "fork-wp-1", info: "Enables the main window to be see-through (requires restart)", implemented: true,  hidden: false, cat: "core", category: "window preferences"},
@@ -100,7 +113,8 @@ export const defaultCookie = {
     "fork-es-3": true,
     "fork-wp-1": false,
     "fork-wp-2": false,
-    "fork-beta": true
+    "fork-beta": true,
+    "reactDevTools": false
 };
 
 

src/index.js

@@ -6,7 +6,7 @@ loadingIcon();
 const deprecateGlobal = (key, value) => {
     Object.defineProperty(window, key, {
         get() {
-            Utils.warn("Deprecation Notice", `"${key}" may be removed in future versions. Please only use BdApi.`);
+            Utils.warn("Deprecation Notice", `"${key}" will be removed in future versions. Please only use BdApi.`);
             return value;
         }
     });  
@@ -30,6 +30,7 @@ import DataStore from "./modules/dataStore";
 import emoteModule from "./modules/emoteModule";
 import ContentManager from "./modules/contentManager";
 import ClassNormalizer from "./modules/classNormalizer";
+import quickEmoteMenu from "./modules/quickEmoteMenu";
 
 deprecateGlobal("BDV2", BDV2);
 deprecateGlobal("pluginModule", pluginModule);
@@ -43,16 +44,17 @@ deprecateGlobal("ContentManager", ContentManager);
 deprecateGlobal("ClassNormalizer", ClassNormalizer);
 
 window.BdApi = BdApi;
+window.quickEmoteMenu = quickEmoteMenu;
 
 import Core from "./modules/core";
 export default class CoreWrapper {
     constructor(bdConfig) {
-        this.mainCore = new Core(bdConfig);
+        Core.setConfig(bdConfig);
     }
 
     init() {
         // deprecateGlobal("mainCore", this.mainCore);
-        this.mainCore.init();
+        Core.init();
     }
 }
 

src/modules/bdApi.js

@@ -86,6 +86,7 @@ BdApi.getPlugin = function (name) {
 
 //Get BetterDiscord Core
 BdApi.getCore = function () {
+    Utils.warn("Deprecation Notice", `BdApi.getCore() will be removed in future versions.`);
     return mainCore;
 };
 

src/modules/core.js

@@ -1,4 +1,4 @@
-import {bdConfig, minSupportedVersion, bbdVersion, settingsCookie, bdpluginErrors, bdthemeErrors, bbdChangelog, defaultCookie} from "../0globals";
+import {bdConfig, minSupportedVersion, bbdVersion, settingsCookie, bdpluginErrors, bdthemeErrors, bbdChangelog, defaultCookie, minimumDiscordVersion, currentDiscordVersion} from "../0globals";
 import Utils from "./utils";
 import emoteModule from "./emoteModule";
 import quickEmoteMenu from "./quickEmoteMenu";
@@ -13,12 +13,20 @@ import DataStore from "./dataStore";
 import WebpackModules from "./webpackModules";
 
 import BDLogo from "../ui/bdLogo";
+import TooltipWrap from "../ui/tooltipWrap";
 
-function Core(config) {
+function Core() {}
+
+Core.prototype.setConfig = function(config) {
     Object.assign(bdConfig, config);
-}
+};
 
 Core.prototype.init = async function() {
+    if (currentDiscordVersion < minimumDiscordVersion) {
+        Utils.alert("Not Supported", "BetterDiscord v" + bbdVersion + " does not support this old version (" + currentDiscordVersion + ") of Discord. Please update your Discord installation before proceeding.");
+        return;
+    }
+
     if (bdConfig.version < minSupportedVersion) {
         Utils.alert("Not Supported", "BetterDiscord v" + bdConfig.version + " (your version)" + " is not supported by the latest js (" + bbdVersion + ").<br><br> Please download the latest version from <a href='https://github.com/rauenzi/BetterDiscordApp/releases/latest' target='_blank'>GitHub</a>");
         return;
@@ -95,7 +103,7 @@ Core.prototype.init = async function() {
     const previousVersion = DataStore.getBDData("version");
     if (bbdVersion > previousVersion) {
         if (bbdChangelog) this.showChangelogModal(bbdChangelog);
-        DataStore.setBDData("version", bbdVersion);
+        // DataStore.setBDData("version", bbdVersion);
     }
 
     Utils.suppressErrors(this.patchSocial.bind(this), "BD Social Patch")();
@@ -183,59 +191,7 @@ Core.prototype.initObserver = function () {
 };
 
 Core.prototype.showChangelogModal = function(options = {}) {
-    const ModalStack = WebpackModules.findByProps("push", "update", "pop", "popWithKey");
+    return Utils.showChangelogModal(options);
-    const ChangelogClasses = WebpackModules.findByProps("fixed", "improved");
-    const TextElement = WebpackModules.findByProps("Sizes", "Weights");
-    const FlexChild = WebpackModules.findByProps("Child");
-    const Titles = WebpackModules.findByProps("Tags", "default");
-    const Changelog = WebpackModules.find(m => m.defaultProps && m.defaultProps.selectable == false);
-    const MarkdownParser = WebpackModules.findByProps("defaultRules", "parse");
-    if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return;
-
-    const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BandagedBD", subtitle = `v${bbdVersion}`, footer} = options;
-    const ce = BDV2.React.createElement;
-    const changelogItems = [ce("img", {src: image})];
-    if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
-    for (let c = 0; c < changes.length; c++) {
-        const entry = changes[c];
-        const type = ChangelogClasses[entry.type] ? ChangelogClasses[entry.type] : ChangelogClasses.added;
-        const margin = c == 0 ? ChangelogClasses.marginTop : "";
-        changelogItems.push(ce("h1", {className: `${type} ${margin}`,}, entry.title));
-        const list = ce("ul", null, entry.items.map(i => ce("li", null, MarkdownParser.parse(i))));
-        changelogItems.push(list);
-    }
-    const renderHeader = function() {
-        return ce(FlexChild.Child, {grow: 1, shrink: 1},
-            ce(Titles.default, {tag: Titles.Tags.H4}, title),
-            ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY, className: ChangelogClasses.date}, subtitle)
-        );
-    };
-
-    const renderFooter = () => {
-        const Anchor = WebpackModules.find(m => m.displayName == "Anchor");
-        const AnchorClasses = WebpackModules.findByProps("anchorUnderlineOnHover") || {anchor: "anchor-3Z-8Bb", anchorUnderlineOnHover: "anchorUnderlineOnHover-2ESHQB"};
-        const joinSupportServer = (click) => {
-            click.preventDefault();
-            click.stopPropagation();
-            ModalStack.pop();
-            BDV2.joinBD2();
-        };
-        const supportLink = Anchor ? ce(Anchor, {onClick: joinSupportServer}, "Join our Discord Server.") : ce("a", {className: `${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`, onClick: joinSupportServer}, "Join our Discord Server.");
-        const defaultFooter = ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY}, "Need support? ", supportLink);
-        return ce(FlexChild.Child, {grow: 1, shrink: 1}, footer ? footer : defaultFooter);
-    };
-
-    ModalStack.push(function(props) {
-        return ce(Changelog, Object.assign({
-            className: ChangelogClasses.container,
-            selectable: true,
-            onScroll: _ => _,
-            onClose: _ => _,
-            renderHeader: renderHeader,
-            renderFooter: renderFooter,
-            children: changelogItems
-        }, props));
-    });
 };
 
 Core.prototype.patchSocial = function() {
@@ -251,9 +207,13 @@ Core.prototype.patchSocial = function() {
         const original = children[children.length - 2].type;
         const newOne = function() {
             const returnVal = original(...arguments);
-            returnVal.props.children.push(BDV2.React.createElement(Anchor, {className: "bd-social-link", href: "https://github.com/rauenzi/BetterDiscordApp", title: "BandagedBD", target: "_blank"},
+            returnVal.props.children.push(
-                BDV2.React.createElement(BDLogo, {size: "16px", className: "bd-social-logo"})
+                BDV2.React.createElement(TooltipWrap, {color: "black", side: "top", text: "BandagedBD"},
-            ));
+                    BDV2.React.createElement(Anchor, {className: "bd-social-link", href: "https://github.com/rauenzi/BetterDiscordApp", title: "BandagedBD", target: "_blank"},
+                        BDV2.React.createElement(BDLogo, {size: "16px", className: "bd-social-logo"})
+                    )
+                )
+            );
             return returnVal;
         };
         children[children.length - 2].type = newOne;
@@ -332,4 +292,4 @@ Core.prototype.patchGuildSeparator = function() {
     }});
 };
 
-export default Core;
+export default new Core();

src/modules/reactDevTools.js

@@ -0,0 +1,46 @@
+import Utils from "./utils";
+import {settings} from "../0globals";
+
+const electron = require("electron");
+const fs = require("fs");
+const path = require("path");
+
+const BrowserWindow = electron.remote.BrowserWindow;
+const currentWindow = BrowserWindow.getAllWindows()[0];
+
+
+export default new class reactDevTools {
+    constructor() {
+        let extensionPath = "";
+        if (process.platform === "win32") extensionPath = path.resolve(process.env.LOCALAPPDATA, "Google/Chrome/User Data");
+        if (process.platform === "linux") extensionPath = path.resolve(process.env.HOME, ".config/google-chrome");
+        if (process.platform === "darwin") extensionPath = path.resolve(process.env.HOME, "Library/Application Support/Google/Chrome");
+        extensionPath += "/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/";
+        if (fs.existsSync(extensionPath)) {
+            const versions = fs.readdirSync(extensionPath);
+            extensionPath = path.resolve(extensionPath, versions[versions.length - 1]);
+        }
+        this.extensionPath = extensionPath;
+        this.isExtensionInstalled = fs.existsSync(extensionPath);
+        this.listener = this.listener.bind(this);
+
+        settings["React DevTools"].hidden = !this.isExtensionInstalled;
+    }
+
+    listener() {
+        if (!this.isExtensionInstalled) return;
+        BrowserWindow.removeDevToolsExtension("React Developer Tools");
+        const didInstall = BrowserWindow.addDevToolsExtension(this.extensionPath);
+
+        if (didInstall) Utils.log("React DevTools", "Successfully installed react devtools.");
+        else Utils.err("React DevTools", "Couldn't find react devtools in chrome extensions!");
+    }
+
+    start() {
+        currentWindow.webContents.on("devtools-opened", this.listener);
+    }
+
+    stop() {
+        currentWindow.webContents.removeListener("devtools-opened", this.listener);
+    }
+};  

src/modules/settingsPanel.js

@@ -5,10 +5,9 @@ import Utils from "./utils";
 import BDV2 from "./v2";
 import ContentManager from "./contentManager";
 import BDEvents from "./bdEvents";
-import pluginModule from "./pluginModule";
-import themeModule from "./themeModule";
 import coloredText from "./coloredText";
 import tfHour from "./24hour";
+import reactDevTools from "./reactDevTools";
 
 import publicServersModule from "./publicServers";
 import voiceMode from "./voiceMode";
@@ -18,18 +17,10 @@ import dMode from "./devMode";
 import quickEmoteMenu from "./quickEmoteMenu";
 
 import Tools from "../ui/tools";
-import ReloadIcon from "../ui/reloadIcon";
-import TooltipWrap from "../ui/tooltipWrap";
 import Scroller from "../ui/scroller";
-import List from "../ui/list";
-import PluginCard from "../ui/pluginCard";
-import ThemeCard from "../ui/themeCard";
 import SectionedSettingsPanel from "../ui/sectionedSettingsPanel";
 import SettingsPanel from "../ui/settingsPanel";
 import CssEditor from "../ui/cssEditor";
-import ContentColumn from "../ui/contentColumn";
-import ErrorBoundary from "../ui/errorBoundary";
-
 import CardList from "../ui/addonlist";
 
 export default new class V2_SettingsPanel {
@@ -41,6 +32,7 @@ export default new class V2_SettingsPanel {
         self.updateSettings = this.updateSettings.bind(self);
         self.sidebar = new V2_SettingsPanel_Sidebar(self.sideBarOnClick);
         this.buildPluginProps = this.buildPluginProps.bind(this);
+        this.buildThemeProps = this.buildThemeProps.bind(this);
     }
 
     get root() {
@@ -198,6 +190,11 @@ export default new class V2_SettingsPanel {
             if (settingsCookie["bda-gs-8"]) dMode.enable(enabled);
         }
 
+        if (id === "reactDevTools") {
+            if (enabled) reactDevTools.start();
+            else reactDevTools.stop();
+        }
+
         this.saveSettings();
     }
 
@@ -219,6 +216,7 @@ export default new class V2_SettingsPanel {
         }
 
         if (settingsCookie["bda-gs-8"]) dMode.enable(settingsCookie["fork-dm-1"]);
+        if (settingsCookie.reactDevTools) reactDevTools.start();
 
         this.saveSettings();
     }
@@ -242,25 +240,28 @@ export default new class V2_SettingsPanel {
     }
 
     get coreComponent() {
-        return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [
+        return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true},
             BDV2.react.createElement(SectionedSettingsPanel, {key: "cspanel", onChange: this.onChange, sections: this.coreSettings}),
             BDV2.react.createElement(Tools, {key: "tools"})
-        ]});
+        );
     }
 
     get emoteComponent() {
         return BDV2.react.createElement(Scroller, {
-            contentColumn: true, fade: true, dark: true, children: [
+            contentColumn: true, fade: true, dark: true},
                 BDV2.react.createElement(SettingsPanel, {key: "espanel", title: "Emote Settings", onChange: this.onChange, settings: this.emoteSettings, button: {
                     title: "Clear Emote Cache",
                     onClick: () => { emoteModule.clearEmoteData(); emoteModule.init(); quickEmoteMenu.init(); }
                 }}),
                 BDV2.react.createElement(Tools, {key: "tools"})
-        ]});
+        );
     }
 
     get customCssComponent() {
-        return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true, children: [BDV2.react.createElement(CssEditor, {key: "csseditor"}), BDV2.react.createElement(Tools, {key: "tools"})]});
+        return BDV2.react.createElement(Scroller, {contentColumn: true, fade: true, dark: true},
+            BDV2.react.createElement(CssEditor, {key: "csseditor"}),
+            BDV2.react.createElement(Tools, {key: "tools"})
+        );
     }
 
     contentComponent(type) {
@@ -299,9 +300,9 @@ export default new class V2_SettingsPanel {
         return typeof value == "string" ? value : value.toString();
     }
 
-    buildPluginProps(key) {
+    buildPluginProps(meta) {
-        const plugin = bdplugins[key].plugin;
+        const plugin = meta.plugin;
-        return Object.assign({}, bdplugins[key], {
+        return Object.assign({}, meta, {
             name: this.getString(plugin.getName()),
             author: this.getString(plugin.getAuthor()),
             description: this.getString(plugin.getDescription()),
@@ -310,9 +311,18 @@ export default new class V2_SettingsPanel {
         });
     }
 
+    buildThemeProps(meta) {
+        return Object.assign({}, meta, {
+            name: this.getString(meta.name),
+            author: this.getString(meta.author),
+            description: this.getString(meta.description),
+            version: this.getString(meta.version)
+        });
+    }
+
     getAddonList(type) {
         const isPlugins = type === "plugins";
-        const list = isPlugins ? Object.keys(bdplugins).map(this.buildPluginProps) : Object.values(bdthemes);
+        const list = isPlugins ? Object.values(bdplugins).map(this.buildPluginProps) : Object.values(bdthemes).map(this.buildThemeProps);
         return BDV2.react.createElement(CardList, {type, list});
     }
 

src/modules/settingsPanelSidebar.js

@@ -1,7 +1,10 @@
+import {bbdChangelog} from "../0globals";
 import Utils from "./utils";
 import BDV2 from "./v2";
 
 import SideBar from "../ui/sidebar";
+import History from "../ui/icons/history";
+import TooltipWrap from "../ui/tooltipWrap";
 
 export default class V2_SettingsPanel_Sidebar {
 
@@ -14,7 +17,14 @@ export default class V2_SettingsPanel_Sidebar {
     }
 
     get component() {
-        return BDV2.react.createElement("span", null, BDV2.react.createElement(SideBar, {onClick: this.onClick, headerText: "Bandaged BD", items: this.items}));
+        //<TooltipWrap color="black" side="top" text={title}>
+        
+        const changelogButton = BDV2.react.createElement(TooltipWrap, {color: "black", side: "top", text: "Changelog"}, 
+            BDV2.react.createElement("div", {className: "bd-changelog-button", onClick: () => {Utils.showChangelogModal(bbdChangelog);}},
+                BDV2.react.createElement(History, {className: "bd-icon", size: "16px"})
+            )
+        );
+        return BDV2.react.createElement("span", null, BDV2.react.createElement(SideBar, {onClick: this.onClick, headerText: "Bandaged BD", headerButton: changelogButton, items: this.items}));
     }
 
     get root() {

src/modules/utils.js

@@ -1,3 +1,7 @@
+import {bbdVersion} from "../0globals";
+import WebpackModules from "./webpackModules";
+import BDV2 from "./v2";
+
 export default class Utils {
     /** Document/window width */
     static get screenWidth() { return Math.max(document.documentElement.clientWidth, window.innerWidth || 0); }
@@ -298,4 +302,60 @@ export default class Utils {
         if (pluginErrors.length) modal.find(".tab-bar-item")[0].click();
         else modal.find(".tab-bar-item")[1].click();
     }
+
+    static showChangelogModal(options = {}) {
+        const ModalStack = WebpackModules.findByProps("push", "update", "pop", "popWithKey");
+        const ChangelogClasses = WebpackModules.findByProps("fixed", "improved");
+        const TextElement = WebpackModules.findByProps("Sizes", "Weights");
+        const FlexChild = WebpackModules.findByProps("Child");
+        const Titles = WebpackModules.findByProps("Tags", "default");
+        const Changelog = WebpackModules.find(m => m.defaultProps && m.defaultProps.selectable == false);
+        const MarkdownParser = WebpackModules.findByProps("defaultRules", "parse");
+        if (!Changelog || !ModalStack || !ChangelogClasses || !TextElement || !FlexChild || !Titles || !MarkdownParser) return;
+    
+        const {image = "https://repository-images.githubusercontent.com/105473537/957b5480-7c26-11e9-8401-50fa820cbae5", description = "", changes = [], title = "BandagedBD", subtitle = `v${bbdVersion}`, footer} = options;
+        const ce = BDV2.React.createElement;
+        const changelogItems = [ce("img", {src: image})];
+        if (description) changelogItems.push(ce("p", null, MarkdownParser.parse(description)));
+        for (let c = 0; c < changes.length; c++) {
+            const entry = changes[c];
+            const type = ChangelogClasses[entry.type] ? ChangelogClasses[entry.type] : ChangelogClasses.added;
+            const margin = c == 0 ? ChangelogClasses.marginTop : "";
+            changelogItems.push(ce("h1", {className: `${type} ${margin}`,}, entry.title));
+            const list = ce("ul", null, entry.items.map(i => ce("li", null, MarkdownParser.parse(i))));
+            changelogItems.push(list);
+        }
+        const renderHeader = function() {
+            return ce(FlexChild.Child, {grow: 1, shrink: 1},
+                ce(Titles.default, {tag: Titles.Tags.H4}, title),
+                ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY, className: ChangelogClasses.date}, subtitle)
+            );
+        };
+    
+        const renderFooter = () => {
+            const Anchor = WebpackModules.find(m => m.displayName == "Anchor");
+            const AnchorClasses = WebpackModules.findByProps("anchorUnderlineOnHover") || {anchor: "anchor-3Z-8Bb", anchorUnderlineOnHover: "anchorUnderlineOnHover-2ESHQB"};
+            const joinSupportServer = (click) => {
+                click.preventDefault();
+                click.stopPropagation();
+                ModalStack.pop();
+                BDV2.joinBD2();
+            };
+            const supportLink = Anchor ? ce(Anchor, {onClick: joinSupportServer}, "Join our Discord Server.") : ce("a", {className: `${AnchorClasses.anchor} ${AnchorClasses.anchorUnderlineOnHover}`, onClick: joinSupportServer}, "Join our Discord Server.");
+            const defaultFooter = ce(TextElement,{size: TextElement.Sizes.SMALL, color: TextElement.Colors.PRIMARY}, "Need support? ", supportLink);
+            return ce(FlexChild.Child, {grow: 1, shrink: 1}, footer ? footer : defaultFooter);
+        };
+    
+        ModalStack.push(function(props) {
+            return ce(Changelog, Object.assign({
+                className: ChangelogClasses.container,
+                selectable: true,
+                onScroll: _ => _,
+                onClose: _ => _,
+                renderHeader: renderHeader,
+                renderFooter: renderFooter,
+                children: changelogItems
+            }, props));
+        });
+    }
 }

src/ui/addoncard.jsx

@@ -123,11 +123,6 @@ export default class V2C_PluginCard extends BDV2.reactComponent {
         return <TooltipWrap color="black" side="top" text={title}>
             <div className="bd-addon-button" onClick={action}>{children}</div>
         </TooltipWrap>;
-        // return  <Tooltip color="black" position="top" text={title}>
-        //             {(props) => {
-        //                 return <div {...props} className="bd-icon" onClick={action}>{children}</div>;
-        //             }}
-        //         </Tooltip>;
     }
 
     get links() {

src/ui/addonlist.jsx

@@ -111,10 +111,11 @@ export default class CardList extends BDV2.reactComponent {
         if (!this.state.ascending) sortedAddons.reverse();
         const rendered = sortedAddons.map((addon) => {
             if (this.state.query) {
-                let matches = addon.name.toLocaleLowerCase().includes(this.state.query);
+                let matches = null;
-                matches = matches || addon.author.toLocaleLowerCase().includes(this.state.query);
+                if (addon.name) matches = addon.name.toLocaleLowerCase().includes(this.state.query);
-                matches = matches || addon.description.toLocaleLowerCase().includes(this.state.query);
+                if (addon.author) matches = matches || addon.author.toLocaleLowerCase().includes(this.state.query);
-                matches = matches || addon.version.toLocaleLowerCase().includes(this.state.query);
+                if (addon.description) matches = matches || addon.description.toLocaleLowerCase().includes(this.state.query);
+                if (addon.version) matches = matches || addon.version.toLocaleLowerCase().includes(this.state.query);
                 if (!matches) return null;
             }
             const props = this.getProps(addon);

src/ui/icons/edit.jsx

@@ -5,7 +5,7 @@ const React = BDV2.React;
 export default class Edit extends React.Component {
     render() {
         const size = this.props.size || "24px";
-        return <svg viewBox="0 0 24 24" fill="#FFFFFF" style={{width: size, height: size}} onClick={this.props.onClick}>
+        return <svg className={this.props.className || ""} viewBox="0 0 24 24" fill="#FFFFFF" style={{width: size, height: size}} onClick={this.props.onClick}>
                 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
                 <path d="M0 0h24v24H0z" fill="none" />
                </svg>;

src/ui/icons/history.jsx

@@ -0,0 +1,18 @@
+{/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+</svg> */}
+
+import BDV2 from "../../modules/v2";
+
+const React = BDV2.React;
+
+export default class History extends React.Component {
+    render() {
+        const size = this.props.size || "18px";
+        return <svg viewBox="0 0 24 24" fill="#FFFFFF" className={this.props.className || ""} style={{width: size, height: size}} onClick={this.props.onClick}>
+                <path d="M0 0h24v24H0z" fill="none"/>
+                <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+               </svg>;
+    }
+}

src/ui/sidebar.js

@@ -45,7 +45,7 @@ export default class V2C_SideBar extends BDV2.reactComponent {
             "div",
             null,
             BDV2.react.createElement(TabBarSeparator, null),
-            BDV2.react.createElement(TabBarHeader, {text: headerText}),
+            BDV2.react.createElement(TabBarHeader, {text: headerText, button: this.props.headerButton}),
             items.map(item => {
                 const {id, text} = item;
                 return BDV2.react.createElement(TabBarItem, {key: id, selected: selected === id, text: text, id: id, onClick: self.onClick});

src/ui/tabBarHeader.js

@@ -6,10 +6,6 @@ export default class V2C_TabBarHeader extends BDV2.reactComponent {
     }
 
     render() {
-        return BDV2.react.createElement(
+        return BDV2.react.createElement("div",{className: "ui-tab-bar-header"}, this.props.text, this.props.button);
-            "div",
-            {className: "ui-tab-bar-header"},
-            this.props.text
-        );
     }
 }