From 946f68e4ef2bd16638363da59f4f7052803b6a86 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 25 Mar 2018 18:31:17 +0100
Subject: [PATCH 01/42] Fix theme edit button

---
 client/src/ui/components/bd/ThemeCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index 83c67d1a..6d6f2c64 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -33,7 +33,7 @@
         methods: {
             editTheme() {
                 try {
-                    shell.openItem(this.theme.themePath);
+                    shell.openItem(this.theme.contentPath);
                 } catch (err) {
                     Logger.err('ThemeCard', [`Error opening theme directory ${this.theme.contentPath}:`, err]);
                 }

From 10fd25607d085c6120a04550a4271b7efc498d3b Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Thu, 29 Mar 2018 20:04:01 +0100
Subject: [PATCH 02/42] Remove installer from release build script

---
 client/src/modules/pluginapi.js | 5 +++--
 package.json                    | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index dbdc74ce..eb0499e8 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -416,12 +416,13 @@ export default class PluginApi {
             instead: this.patchInstead.bind(this),
             pushChildPatch: this.pushChildPatch.bind(this),
             unpatchAll: this.unpatchAll.bind(this),
+            monkeyPatch: this.monkeyPatch.bind(this)
         }, 'patches', {
             get: () => this.patches
         });
     }
-    get monkeyPatch() {
-        return module => MonkeyPatch(this.plugin.id, module);
+    monkeyPatch(module) {
+        return MonkeyPatch(this.plugin.id, module);
     }
 
 }
diff --git a/package.json b/package.json
index 7d86c9fd..62a2312d 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "lint": "eslint -f unix client/src core/src csseditor/src",
     "test": "npm run build && npm run lint",
     "build_node-sass": "node scripts/build-node-sass.js",
-    "build_release": "npm run release --prefix client && npm run build --prefix core && npm run release --prefix csseditor && npm run build --prefix installer",
+    "build_release": "npm run release --prefix client && npm run build --prefix core && npm run release --prefix csseditor",
     "release": "npm run lint && npm run build_release && gulp release"
   }
 }

From 4634266e1451c44f7424c9cd9d93091ac5c03942 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Thu, 29 Mar 2018 20:16:06 +0100
Subject: [PATCH 03/42] Make the button look more built in

---
 client/src/styles/partials/bdsettings/button.scss           | 2 --
 client/src/styles/partials/bdsettings/sidebarview.scss      | 6 +++---
 client/src/styles/partials/discordoverrides.scss            | 5 +++++
 client/src/styles/partials/generic/forms/colourpickers.scss | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss
index 635b17da..0069c3a4 100644
--- a/client/src/styles/partials/bdsettings/button.scss
+++ b/client/src/styles/partials/bdsettings/button.scss
@@ -5,7 +5,6 @@
     width: 70px;
     height: 48px;
     left: 0;
-    background: #202225;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.06);
     opacity: 1;
 
@@ -24,7 +23,6 @@
         background-position: center;
         width: 100%;
         height: 100%;
-        z-index: 3001;
         cursor: pointer;
         filter: grayscale(100%);
         opacity: 0.5;
diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss
index 0e7f175c..fd0155db 100644
--- a/client/src/styles/partials/bdsettings/sidebarview.scss
+++ b/client/src/styles/partials/bdsettings/sidebarview.scss
@@ -60,7 +60,7 @@
             background-color: hsla(218,5%,47%,.3);
 
             .bd-material-design-icon {
-                fill: #FFF;
+                fill: #fff;
             }
         }
     }
@@ -94,7 +94,7 @@
 
             &:hover {
                 .bd-material-design-icon {
-                    fill: #FFF;
+                    fill: #fff;
                 }
             }
         }
@@ -103,7 +103,7 @@
             fill: #414245;
 
             &:hover {
-                fill: #FFF;
+                fill: #fff;
             }
         }
     }
diff --git a/client/src/styles/partials/discordoverrides.scss b/client/src/styles/partials/discordoverrides.scss
index 61950dd1..43c0f3b2 100644
--- a/client/src/styles/partials/discordoverrides.scss
+++ b/client/src/styles/partials/discordoverrides.scss
@@ -17,3 +17,8 @@
         top: 50px;
     }
 }
+
+// Any layers need to be above the main layer (where the BD button is placed)
+.layer-kosS71 + .layer-kosS71 {
+    z-index: 900;
+}
diff --git a/client/src/styles/partials/generic/forms/colourpickers.scss b/client/src/styles/partials/generic/forms/colourpickers.scss
index 968b6461..100ba885 100644
--- a/client/src/styles/partials/generic/forms/colourpickers.scss
+++ b/client/src/styles/partials/generic/forms/colourpickers.scss
@@ -21,7 +21,7 @@
             .vc-chrome-fields-wrap {
                 .vc-input__input {
                     background: #1e2124;
-                    color: #FFF;
+                    color: #fff;
                     box-shadow: inset 0 0 0 1px #000;
                 }
 
@@ -30,7 +30,7 @@
                 }
 
                 .vc-chrome-toggle-btn svg path {
-                    fill: #FFF;
+                    fill: #fff;
                 }
             }
         }

From 441e80e0e8b21be14585ea808f2ac8faa0190502 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Thu, 29 Mar 2018 21:23:15 +0100
Subject: [PATCH 04/42] Tweak colour picker and add animation

---
 .../partials/generic/forms/colourpickers.scss | 16 ++++-
 .../src/ui/components/bd/setting/Colour.vue   | 59 +++++++++----------
 .../src/ui/components/bd/setting/Setting.vue  |  2 +-
 3 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/client/src/styles/partials/generic/forms/colourpickers.scss b/client/src/styles/partials/generic/forms/colourpickers.scss
index 100ba885..7ae9837c 100644
--- a/client/src/styles/partials/generic/forms/colourpickers.scss
+++ b/client/src/styles/partials/generic/forms/colourpickers.scss
@@ -10,7 +10,7 @@
 
     .vc-chrome {
         position: absolute;
-        right: 60px;
+        right: 0;
         top: 35px;
         border-radius: 3px;
         z-index: 9001;
@@ -34,5 +34,19 @@
                 }
             }
         }
+
+        &:not(.bd-hide) {
+            animation: bd-colourpicker-slidein 0.1s ease-in;
+        }
+    }
+}
+
+@keyframes bd-colourpicker-slidein {
+    0% {
+        right: 20px;
+    }
+
+    100% {
+        right: 0;
     }
 }
diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index 698ebe2c..99718f29 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -9,74 +9,67 @@
 */
 
 <template>
-    <div ref="root" class="bd-form-colourpicker">
+    <div class="bd-form-colourpicker">
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-colourpicker-wrapper">
-                <button class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="show"/>
+                <button ref="swatch" class="bd-colourpicker-swatch" :style="{backgroundColor: rgbaString}" @click="open = !open" />
             </div>
         </div>
-        <Picker ref="picker" v-model="colors" @input="pick" :class="{'bd-hidden': !open}" :style="{top: topOffset}"/>
+        <Picker ref="picker" v-model="colours" @input="pick" :class="{'bd-hide': !open}" :style="{top: topOffset}" />
         <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
 <script>
     import { Chrome as Picker } from 'vue-color';
+
     export default {
         data() {
             return {
                 open: false,
-                colors: '#FFF',
+                colours: '#fff',
                 topOffset: '35px'
             }
         },
         components: {
             Picker
         },
-        props: ['setting', 'change'],
+        props: ['setting'],
         computed: {
             hex() {
-                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
                 return this.$refs.picker.val.hex;
             },
             rgba() {
-                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
                 return this.$refs.picker.val.rgba;
             },
             hsva() {
-                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
                 return this.$refs.picker.val.hsv;
             },
             hsla() {
-                if (!this.$refs.picker || !this.$refs.picker.val) return this.colors;
+                if (!this.$refs.picker || !this.$refs.picker.val) return this.colours;
                 return this.$refs.picker.val.hsl;
             },
             rgbaString() {
-                if ('string' === typeof this.colors) return this.colors;
-                const { rgba } = this.colors;
-                return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+                if (typeof this.colours === 'string') return this.colours;
+                const { r, g, b, a } = this.colours.rgba;
+                return `rgba(${r}, ${g}, ${b}, ${a})`;
             }
         },
         methods: {
-            show() {
-                const offset = window.innerHeight - this.$refs.root.getBoundingClientRect().top - 340;
-                if (offset >= 0) {
-                    this.topOffset = '35px';
-                } else {
-                    this.topOffset = 35 + offset > 35 ? '35px' : `${35 + offset}px`;
-                }
-                this.open = true;
-            },
             pick(c) {
-                this.change(this.rgbaString);
+                this.setting.value = this.rgbaString;
             },
             closePopup(e) {
-                if (!this.$refs.root.contains(e.target)) this.open = false;
+                if (!this.$refs.swatch.contains(e.target) && !this.$refs.picker.$el.contains(e.target))
+                    this.open = false;
             }
         },
         beforeMount() {
-            this.colors = this.setting.value;
-            window.addEventListener('click', this.closePopup);  
+            this.colours = this.setting.value;
+            window.addEventListener('click', this.closePopup);
         },
         destroyed() {
             window.removeEventListener('click', this.closePopup);
@@ -84,14 +77,18 @@
         watch: {
             setting(newVal, oldVal) {
                 if (newVal.value === oldVal.value) return;
-                this.colors = newVal.value;
+                this.colours = newVal.value;
                 this.open = false;
+            },
+            open(open) {
+                if (!open) return;
+                const offset = window.innerHeight - this.$el.getBoundingClientRect().top - 340;
+                if (offset >= 0) {
+                    this.topOffset = '35px';
+                } else {
+                    this.topOffset = 35 + offset > 35 ? '35px' : `${35 + offset}px`;
+                }
             }
         }
     }
 </script>
-<style>
-    .bd-hidden {
-        display: none;
-    }
-</style>
diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index cc1250c5..eec9c892 100644
--- a/client/src/ui/components/bd/setting/Setting.vue
+++ b/client/src/ui/components/bd/setting/Setting.vue
@@ -17,7 +17,7 @@
         <StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" :change="change" />
         <MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" />
         <SliderSetting v-if="setting.type === 'slider'" :setting="setting" :change="change" />
-        <ColourSetting v-if="setting.type === 'colour'" :setting="setting" :change="change" />
+        <ColourSetting v-if="setting.type === 'colour'" :setting="setting" />
         <KeybindSetting v-if="setting.type === 'keybind'" :setting="setting" />
         <FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change" />
         <GuildSetting v-if="setting.type === 'guild'" :setting="setting" />

From 9b1dd771ad980582a411b41a19701cf5da2d00c6 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Thu, 29 Mar 2018 21:46:33 +0100
Subject: [PATCH 05/42] Use v-model/events instead of a change function

Custom settings still work the same
---
 client/src/styles/partials/generic/forms.scss |  2 --
 client/src/ui/components/BdSettings.vue       |  1 +
 .../src/ui/components/BdSettingsWrapper.vue   |  1 +
 client/src/ui/components/bd/PluginCard.vue    |  2 +-
 client/src/ui/components/bd/ThemeCard.vue     |  2 +-
 client/src/ui/components/bd/setting/Array.vue |  2 +-
 client/src/ui/components/bd/setting/Bool.vue  |  5 ++--
 .../src/ui/components/bd/setting/Colour.vue   |  1 +
 .../src/ui/components/bd/setting/Custom.vue   |  9 ++++++-
 .../src/ui/components/bd/setting/Dropdown.vue |  7 +++---
 client/src/ui/components/bd/setting/File.vue  | 11 ++++----
 .../src/ui/components/bd/setting/Keybind.vue  |  2 +-
 .../ui/components/bd/setting/Multiline.vue    |  1 +
 .../src/ui/components/bd/setting/Number.vue   | 17 +++++++------
 client/src/ui/components/bd/setting/Radio.vue |  5 ++--
 .../src/ui/components/bd/setting/Setting.vue  | 25 ++++++++-----------
 .../src/ui/components/bd/setting/Slider.vue   | 17 +++++--------
 .../src/ui/components/bd/setting/String.vue   | 10 +++-----
 client/src/ui/components/common/Dropdown.vue  | 10 +++++---
 .../src/ui/components/common/RadioGroup.vue   | 11 +++++---
 .../ui/components/common/SettingSwitch.vue    |  7 +++---
 21 files changed, 78 insertions(+), 70 deletions(-)

diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
index a417627c..747acb7c 100644
--- a/client/src/styles/partials/generic/forms.scss
+++ b/client/src/styles/partials/generic/forms.scss
@@ -43,8 +43,6 @@
     font-size: 12px;
 }
 
-
-
 .bd-form-divider {
     height: 1px;
     margin: 15px 0;
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index f2bc4afc..38522ed8 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -55,6 +55,7 @@
         </SidebarView>
     </div>
 </template>
+
 <script>
     // Imports
     import { shell } from 'electron';
diff --git a/client/src/ui/components/BdSettingsWrapper.vue b/client/src/ui/components/BdSettingsWrapper.vue
index 49b273ec..605a2763 100644
--- a/client/src/ui/components/BdSettingsWrapper.vue
+++ b/client/src/ui/components/BdSettingsWrapper.vue
@@ -18,6 +18,7 @@
         <BdSettings ref="settings" :active="active" :close="hideSettings" />
     </div>
 </template>
+
 <script>
     // Imports
     import { Events, Settings } from 'modules';
diff --git a/client/src/ui/components/bd/PluginCard.vue b/client/src/ui/components/bd/PluginCard.vue
index 9438fd36..5f38a8d8 100644
--- a/client/src/ui/components/bd/PluginCard.vue
+++ b/client/src/ui/components/bd/PluginCard.vue
@@ -10,7 +10,7 @@
 
 <template>
     <Card :item="plugin">
-        <SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :checked="plugin.enabled" :change="togglePlugin" />
+        <SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="togglePlugin" />
         <ButtonGroup slot="controls">
             <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
             <Button v-tooltip="'Reload'" :onClick="reloadPlugin"><MiRefresh size="18" /></Button>
diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index 6d6f2c64..1b251d09 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -10,7 +10,7 @@
 
 <template>
     <Card :item="theme">
-        <SettingSwitch slot="toggle" :checked="theme.enabled" :change="toggleTheme" />
+        <SettingSwitch slot="toggle" :value="theme.enabled" @input="toggleTheme" />
         <ButtonGroup slot="controls">
             <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
             <Button v-tooltip="'Recompile (shift + click to reload)'" :onClick="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>
diff --git a/client/src/ui/components/bd/setting/Array.vue b/client/src/ui/components/bd/setting/Array.vue
index 3386f203..e222317a 100644
--- a/client/src/ui/components/bd/setting/Array.vue
+++ b/client/src/ui/components/bd/setting/Array.vue
@@ -43,7 +43,7 @@
     import SettingsPanel from '../SettingsPanel.vue';
 
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         components: {
             MiSettings, MiOpenInNew, MiMinus
         },
diff --git a/client/src/ui/components/bd/setting/Bool.vue b/client/src/ui/components/bd/setting/Bool.vue
index 27d8256a..22868e32 100644
--- a/client/src/ui/components/bd/setting/Bool.vue
+++ b/client/src/ui/components/bd/setting/Bool.vue
@@ -12,16 +12,17 @@
     <div class="bd-setting-switch">
         <div class="bd-title">
             <h3>{{setting.text}}</h3>
-            <SettingSwitch :checked="setting.value" :change="change" />
+            <SettingSwitch v-model="setting.value" />
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
+
 <script>
     import SettingSwitch from '../../common/SettingSwitch.vue';
 
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         components: {
             SettingSwitch
         }
diff --git a/client/src/ui/components/bd/setting/Colour.vue b/client/src/ui/components/bd/setting/Colour.vue
index 99718f29..79504d3c 100644
--- a/client/src/ui/components/bd/setting/Colour.vue
+++ b/client/src/ui/components/bd/setting/Colour.vue
@@ -20,6 +20,7 @@
         <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
+
 <script>
     import { Chrome as Picker } from 'vue-color';
 
diff --git a/client/src/ui/components/bd/setting/Custom.vue b/client/src/ui/components/bd/setting/Custom.vue
index 7fee204f..70b1b66a 100644
--- a/client/src/ui/components/bd/setting/Custom.vue
+++ b/client/src/ui/components/bd/setting/Custom.vue
@@ -24,7 +24,7 @@
     import path from 'path';
 
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         components: {
             Drawer
         },
@@ -34,6 +34,7 @@
                     const component = window.require(path.join(this.setting.path, this.setting.file));
                     return this.setting.component ? component[this.setting.component] : component.default ? component.default : component;
                 }
+
                 if (typeof this.setting.function === 'string') {
                     const plugin = PluginManager.getPluginByPath(this.setting.path);
                     if (!plugin) return;
@@ -42,12 +43,14 @@
                         return this.componentFromHTMLElement(component, this.setting, this.change);
                     return component;
                 }
+
                 if (typeof this.setting.component === 'string') {
                     const plugin = PluginManager.getPluginByPath(this.setting.path);
                     if (!plugin) return;
                     const component = plugin[this.setting.component];
                     return component;
                 }
+
                 if (typeof this.setting.component === 'object') {
                     return this.setting.component;
                 }
@@ -62,6 +65,10 @@
                         this.$el.appendChild(htmlelement);
                     }
                 };
+            },
+            change(value, ignore_disabled) {
+                if (this.disabled && !ignore_disabled) return;
+                this.setting = value;
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/Dropdown.vue b/client/src/ui/components/bd/setting/Dropdown.vue
index 034bee3a..0704727c 100644
--- a/client/src/ui/components/bd/setting/Dropdown.vue
+++ b/client/src/ui/components/bd/setting/Dropdown.vue
@@ -12,17 +12,18 @@
     <div class="bd-form-dropdown">
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
-            <Dropdown v-if="!setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
+            <Dropdown v-if="!setting.fullwidth" :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
-        <Dropdown v-if="setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
+        <Dropdown v-if="setting.fullwidth" :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
     </div>
 </template>
+
 <script>
     import Dropdown from '../../common/Dropdown.vue';
 
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         components: {
             Dropdown
         }
diff --git a/client/src/ui/components/bd/setting/File.vue b/client/src/ui/components/bd/setting/File.vue
index 31e8b9d4..b0217971 100644
--- a/client/src/ui/components/bd/setting/File.vue
+++ b/client/src/ui/components/bd/setting/File.vue
@@ -16,12 +16,12 @@
         </div>
         <div class="bd-hint">{{ setting.hint }}</div>
         <div class="bd-selected-files">
-            <div class="bd-selected-file" v-for="file_path in this.setting.value">
+            <div class="bd-selected-file" v-for="file_path in setting.value">
                 <!-- Maybe add a preview here later? -->
                 <!-- For now just show the selected file path -->
                 <span class="bd-file-path">{{ file_path }}</span>
                 <span class="bd-file-open" @click="() => openItem(file_path)"><MiOpenInNew /></span>
-                <span class="bd-file-remove" @click="() => removeItem(file_path)"><MiMinus /></span>
+                <span class="bd-file-remove" :class="{'bd-disabled': setting.disabled}" @click="() => removeItem(file_path)"><MiMinus /></span>
             </div>
         </div>
     </div>
@@ -34,7 +34,7 @@
     import path from 'path';
 
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         components: {
             MiOpenInNew, MiMinus
         },
@@ -44,13 +44,14 @@
 
                 const filenames = await ClientIPC.send('bd-native-open', this.setting.dialogOptions);
                 if (filenames)
-                    this.change(filenames);
+                    this.setting.value = filenames;
             },
             openItem(file_path) {
                 shell.openItem(path.resolve(this.setting.path, file_path));
             },
             removeItem(file_path) {
-                this.change(this.setting.value.filter(f => f !== file_path));
+                if (this.setting.disabled) return;
+                this.setting = this.setting.value.filter(f => f !== file_path);
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/Keybind.vue b/client/src/ui/components/bd/setting/Keybind.vue
index 53498084..990574b7 100644
--- a/client/src/ui/components/bd/setting/Keybind.vue
+++ b/client/src/ui/components/bd/setting/Keybind.vue
@@ -27,13 +27,13 @@
     import { KeybindSetting } from 'structs';
     import { ClientIPC, ClientLogger as Logger } from 'common';
     import { shell } from 'electron';
+    import process from 'process';
     import Combokeys from 'combokeys';
     import CombokeysRecord from 'combokeys/plugins/record';
 
     const combokeys = new Combokeys(document);
     CombokeysRecord(combokeys);
 
-    const process = window.require('process');
     const modifierKey = process.platform === 'darwin' ? 'meta' : 'ctrl';
 
     export default {
diff --git a/client/src/ui/components/bd/setting/Multiline.vue b/client/src/ui/components/bd/setting/Multiline.vue
index 567a3ff5..2b82d898 100644
--- a/client/src/ui/components/bd/setting/Multiline.vue
+++ b/client/src/ui/components/bd/setting/Multiline.vue
@@ -19,6 +19,7 @@
         <textarea class="bd-textarea" ref="textarea" @keyup.stop v-model="setting.value" :disabled="setting.disabled"></textarea>
     </div>
 </template>
+
 <script>
     export default {
         props: ['setting'],
diff --git a/client/src/ui/components/bd/setting/Number.vue b/client/src/ui/components/bd/setting/Number.vue
index d9860e44..dd0e1543 100644
--- a/client/src/ui/components/bd/setting/Number.vue
+++ b/client/src/ui/components/bd/setting/Number.vue
@@ -13,29 +13,30 @@
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-number">
-                <input type="number" :value="setting.value / setting.multi" :min="setting.min" :max="setting.max" :step="setting.step" @keyup.stop @input="input"/>
+                <input type="number" :value="setting.value / setting.multi" :min="setting.min" :max="setting.max" :step="setting.step" @keyup.stop @input="input" />
                 <div class="bd-number-spinner bd-flex bd-flex-col">
-                    <div class="bd-arrow" @click="changeBy(true)"><div class="bd-up-arrow"></div></div>
-                    <div class="bd-arrow" @click="changeBy(false)"><div class="bd-down-arrow"></div></div>
+                    <div class="bd-arrow" @click="changeBy(1)"><div class="bd-up-arrow"></div></div>
+                    <div class="bd-arrow" @click="changeBy(-1)"><div class="bd-down-arrow"></div></div>
                 </div>
             </div>
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
+
 <script>
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         methods: {
             input(e) {
                 let number = parseFloat(e.target.value)
                 if (Number.isNaN(number)) return;
 
-                this.change(number * this.setting.multi);
+                this.setting.value = number * this.setting.multi;
             },
-            changeBy(positive) {
-                let step = this.setting.step == undefined ? 1 : this.settings.step;
-                this.change((this.setting.value + (positive ? step : -step)) * this.setting.multi);
+            changeBy(change) {
+                let step = this.setting.step === undefined ? 1 : this.settings.step;
+                this.setting.value = (this.setting.value + (change * step)) * this.setting.multi;
             },
             handleWheel() {} // No idea why this works but it does
         },
diff --git a/client/src/ui/components/bd/setting/Radio.vue b/client/src/ui/components/bd/setting/Radio.vue
index 7523e854..eacdfd85 100644
--- a/client/src/ui/components/bd/setting/Radio.vue
+++ b/client/src/ui/components/bd/setting/Radio.vue
@@ -16,14 +16,15 @@
             </div>
             <div class="bd-hint">{{setting.hint}}</div>
         </div>
-        <RadioGroup :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
+        <RadioGroup :options="setting.options" v-model="setting.value" :disabled="setting.disabled" />
     </div>
 </template>
+
 <script>
     import RadioGroup from '../../common/RadioGroup.vue';
 
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         components: {
             RadioGroup
         }
diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index eec9c892..e17045a2 100644
--- a/client/src/ui/components/bd/setting/Setting.vue
+++ b/client/src/ui/components/bd/setting/Setting.vue
@@ -10,22 +10,23 @@
 
 <template>
     <div class="bd-form-item" :class="{'bd-form-item-changed': setting.changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
-        <BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change" />
-        <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change" />
-        <NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change" />
-        <RadioSetting v-if="setting.type === 'radio'" :setting="setting" :change="change" />
-        <StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" :change="change" />
+        <BoolSetting v-if="setting.type === 'bool'" :setting="setting" />
+        <StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" />
         <MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" />
-        <SliderSetting v-if="setting.type === 'slider'" :setting="setting" :change="change" />
+        <NumberSetting v-if="setting.type === 'number'" :setting="setting" />
+        <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" />
+        <RadioSetting v-if="setting.type === 'radio'" :setting="setting" />
+        <SliderSetting v-if="setting.type === 'slider'" :setting="setting" />
         <ColourSetting v-if="setting.type === 'colour'" :setting="setting" />
         <KeybindSetting v-if="setting.type === 'keybind'" :setting="setting" />
-        <FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change" />
+        <FileSetting v-if="setting.type === 'file'" :setting="setting" />
         <GuildSetting v-if="setting.type === 'guild'" :setting="setting" />
-        <ArraySetting v-if="setting.type === 'array'" :setting="setting" :change="change" />
-        <CustomSetting v-if="setting.type === 'custom'" :setting="setting" :change="change" />
+        <ArraySetting v-if="setting.type === 'array'" :setting="setting" />
+        <CustomSetting v-if="setting.type === 'custom'" :setting="setting" />
         <div class="bd-form-divider"></div>
     </div>
 </template>
+
 <script>
     // Imports
     import BoolSetting from './Bool.vue';
@@ -68,12 +69,6 @@
             disabled() {
                 return this.setting.disabled || false;
             }
-        },
-        methods: {
-            change(value) {
-                if (this.disabled) return;
-                this.setting.value = value;
-            }
         }
     }
 </script>
diff --git a/client/src/ui/components/bd/setting/Slider.vue b/client/src/ui/components/bd/setting/Slider.vue
index 9609cb87..97171b5c 100644
--- a/client/src/ui/components/bd/setting/Slider.vue
+++ b/client/src/ui/components/bd/setting/Slider.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div class="bd-form-slider" @mouseenter="showTooltip" @mouseleave="hideTooltip">
+    <div class="bd-form-slider" @mouseenter="tooltip = true" @mouseleave="tooltip = false">
         <div class="bd-title">
             <h3>{{ setting.text }}</h3>
             <div class="bd-slider">
@@ -21,7 +21,7 @@
                         <div class="bd-slider-bar-filled" :style="{width: `${getPointPosition() * 100}%`}"></div>
                     </div>
                     <div class="bd-slider-thumb-wrap">
-                        <div class="bd-slider-thumb" v-tooltip="{content: (value || '0') + setting.unit, show: toolTip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
+                        <div class="bd-slider-thumb" v-tooltip="{content: (value || '0') + setting.unit, show: tooltip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
                     </div>
                     <input type="range" :value="value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
                 </div>
@@ -30,13 +30,14 @@
         <div class="bd-hint">{{ setting.hint }}</div>
     </div>
 </template>
+
 <script>
     export default {
-        props: ['setting', 'change'],
+        props: ['setting'],
         data() {
             return {
                 fillpercentage: 0,
-                toolTip: false
+                tooltip: false
             };
         },
         computed: {
@@ -48,16 +49,10 @@
             input(e) {
                 let number = parseFloat(e.target.value);
                 if (Number.isNaN(number)) return;
-                this.change(number * this.setting.multi);
+                this.setting.value = number * this.setting.multi;
             },
             getPointPosition(value) {
                 return ((value || this.value) - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0));
-            },
-            showTooltip() {
-                this.toolTip = true;
-            },
-            hideTooltip() {
-                this.toolTip = false;
             }
         }
     }
diff --git a/client/src/ui/components/bd/setting/String.vue b/client/src/ui/components/bd/setting/String.vue
index 62b8e452..e1460441 100644
--- a/client/src/ui/components/bd/setting/String.vue
+++ b/client/src/ui/components/bd/setting/String.vue
@@ -13,19 +13,15 @@
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
             <div class="bd-textinput-wrapper">
-                <input type="text" :value="setting.value" @keyup.stop @input="input"/>
+                <input type="text" v-model="setting.value" @keyup.stop />
             </div>
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
+
 <script>
     export default {
-        props: ['setting', 'change'],
-        methods: {
-            input(e) {
-                this.change(e.target.value);
-            }
-        }
+        props: ['setting']
     }
 </script>
diff --git a/client/src/ui/components/common/Dropdown.vue b/client/src/ui/components/common/Dropdown.vue
index c0cb984d..5f14d3b1 100644
--- a/client/src/ui/components/common/Dropdown.vue
+++ b/client/src/ui/components/common/Dropdown.vue
@@ -17,13 +17,13 @@
             </span>
         </div>
         <div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
-            <div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': selected === option.value}" @click="change(option.value); active = false">{{ option.text }}</div>
+            <div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': selected === option.value}" @click="select(option)">{{ option.text }}</div>
         </div>
     </div>
 </template>
 <script>
     export default {
-        props: ['options', 'selected', 'disabled', 'change'],
+        props: ['options', 'value', 'disabled'],
         data() {
             return {
                 active: false
@@ -33,10 +33,14 @@
             getSelectedText() {
                 const selected_option = this.options.find(option => option.value === this.selected);
                 return selected_option ? selected_option.text : this.selected;
+            },
+            select(option) {
+                this.$emit('input', option.value);
+                this.active = false;
             }
         },
         mounted() {
-            document.addEventListener("click", e => {
+            document.addEventListener('click', e => {
                 let options = this.$refs.options;
                 if (options && !options.contains(e.target) && options !== e.target) {
                     this.active = false;
diff --git a/client/src/ui/components/common/RadioGroup.vue b/client/src/ui/components/common/RadioGroup.vue
index efe31a23..0be86883 100644
--- a/client/src/ui/components/common/RadioGroup.vue
+++ b/client/src/ui/components/common/RadioGroup.vue
@@ -10,16 +10,19 @@
 
 <template>
     <div class="bd-radio-group" :class="{'bd-disabled': disabled}">
-        <label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': selected === option.value}" @click="change(option.value)">
+        <label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': value === option.value}" @click="$emit('input', option.value)">
             <div class="bd-radio-control-wrap">
-                <svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g></svg>
+                <svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+                    <g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g>
+                </svg>
             </div>
-            <div class="bd-radio-text">{{option.text}}</div>
+            <div class="bd-radio-text">{{ option.text }}</div>
         </label>
     </div>
 </template>
+
 <script>
     export default {
-        props: ['options', 'selected', 'disabled', 'change']
+        props: ['options', 'value', 'disabled']
     }
 </script>
diff --git a/client/src/ui/components/common/SettingSwitch.vue b/client/src/ui/components/common/SettingSwitch.vue
index 5fe1ddf1..69b0e32d 100644
--- a/client/src/ui/components/common/SettingSwitch.vue
+++ b/client/src/ui/components/common/SettingSwitch.vue
@@ -9,13 +9,14 @@
 */
 
 <template>
-    <label class="bd-switch-wrapper" @click="() => change(!checked)">
+    <label class="bd-switch-wrapper" @click="$emit('input', !value)">
         <input type="checkbox" class="bd-switch-checkbox" />
-        <div class="bd-switch" :class="{'bd-checked': checked}" />
+        <div class="bd-switch" :class="{'bd-checked': value}" />
     </label>
 </template>
+
 <script>
     export default {
-        props: ['checked', 'change']
+        props: ['value']
     }
 </script>

From fd3b0a92ce601fac30a7b27fb7b32646776afd9e Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 00:57:01 +0100
Subject: [PATCH 06/42] Use events on modal close button click

---
 .../ui/components/bd/modals/BasicModal.vue    |  2 +-
 .../ui/components/bd/modals/ConfirmModal.vue  |  2 +-
 .../ui/components/bd/modals/ErrorModal.vue    |  2 +-
 .../components/bd/modals/PermissionModal.vue  |  2 +-
 .../ui/components/bd/modals/SettingsModal.vue |  9 +++---
 .../src/ui/components/common/ErrorModal.vue   | 30 -------------------
 client/src/ui/components/common/Modal.vue     | 11 ++++---
 7 files changed, 13 insertions(+), 45 deletions(-)
 delete mode 100644 client/src/ui/components/common/ErrorModal.vue

diff --git a/client/src/ui/components/bd/modals/BasicModal.vue b/client/src/ui/components/bd/modals/BasicModal.vue
index 850d7dda..2660c353 100644
--- a/client/src/ui/components/bd/modals/BasicModal.vue
+++ b/client/src/ui/components/bd/modals/BasicModal.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" :close="modal.close">
+    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
         <div slot="body" class="bd-modal-basic-body">{{ modal.text }}</div>
         <div slot="footer" class="bd-modal-controls">
             <div class="bd-flex-grow"></div>
diff --git a/client/src/ui/components/bd/modals/ConfirmModal.vue b/client/src/ui/components/bd/modals/ConfirmModal.vue
index e4cedcd0..080ab293 100644
--- a/client/src/ui/components/bd/modals/ConfirmModal.vue
+++ b/client/src/ui/components/bd/modals/ConfirmModal.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" :close="modal.close">
+    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
         <div slot="body" class="bd-modal-basic-body">{{ modal.text }}</div>
         <div slot="footer" class="bd-modal-controls">
             <div class="bd-flex-grow"></div>
diff --git a/client/src/ui/components/bd/modals/ErrorModal.vue b/client/src/ui/components/bd/modals/ErrorModal.vue
index dec525ea..d43a5139 100644
--- a/client/src/ui/components/bd/modals/ErrorModal.vue
+++ b/client/src/ui/components/bd/modals/ErrorModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <Modal :headerText="modal.event.header" :close="modal.close"
+    <Modal :headerText="modal.event.header" @close="modal.close"
            :class="[{'bd-err': modal.event.type && modal.event.type === 'err'}, {'bd-modal-out': modal.closing}]">
         <MiError v-if="modal.event.type === 'err'" slot="icon" size="20"/>
         <div slot="body">
diff --git a/client/src/ui/components/bd/modals/PermissionModal.vue b/client/src/ui/components/bd/modals/PermissionModal.vue
index d67b34c2..805cde48 100644
--- a/client/src/ui/components/bd/modals/PermissionModal.vue
+++ b/client/src/ui/components/bd/modals/PermissionModal.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" :close="modal.close">
+    <Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
         <div slot="body" class="bd-modal-basic-body">
             <div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-perm-scope">
                 <div class="bd-perm-allow">
diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index e319d853..3d6c3e81 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settings-modal" :class="{'bd-edited': changed}">
-        <Modal :headerText="modal.headertext" :close="modal.close" :class="{'bd-modal-out': modal.closing}">
+        <Modal :class="{'bd-modal-out': modal.closing}" :headerText="modal.headertext" @close="modal.close">
             <SettingsPanel :settings="settings" :schemes="modal.schemes" slot="body" class="bd-settings-modal-body" />
             <div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed || saving, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
                 <div class="bd-footer-alert-text">Unsaved changes</div>
@@ -23,9 +23,9 @@
         </Modal>
     </div>
 </template>
+
 <script>
     // Imports
-    import Vue from 'vue';
     import { Modal } from '../../common';
     import SettingsPanel from '../SettingsPanel.vue';
     import { Utils, ClientLogger as Logger } from 'common';
@@ -54,10 +54,9 @@
                 if (this.saving) return;
                 this.saving = true;
                 try {
-                    if (this.modal.saveSettings) await this.modal.saveSettings(this.settings);
-                    else await this.modal.settings.merge(this.settings);
+                    await this.modal.saveSettings ? this.modal.saveSettings(this.settings) : this.modal.settings.merge(this.settings);
                 } catch (err) {
-                    // TODO Display error that settings failed to save
+                    // TODO: display error that settings failed to save
                     Logger.err('SettingsModal', ['Failed to save settings:', err]);
                 }
                 this.saving = false;
diff --git a/client/src/ui/components/common/ErrorModal.vue b/client/src/ui/components/common/ErrorModal.vue
deleted file mode 100644
index 8c28581d..00000000
--- a/client/src/ui/components/common/ErrorModal.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * BetterDiscord Error Modal Component
- * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
- * All rights reserved.
- * https://betterdiscord.net
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
-*/
-
-<template>
-    <div class="bd-modal-error" :class="{'bd-open': content.showStack}">
-        <div class="bd-modal-error-title bd-flex">
-            <span class="bd-modal-title-text bd-flex-grow">{{content.message}}</span>
-            <span class="bd-modal-titlelink" v-if="content.showStack" @click="hideStack(content)">Hide Stacktrace</span>
-            <span class="bd-modal-titlelink" v-else @click="showStack(content)">Show Stacktrace</span>
-        </div>
-        <div class="bd-scroller-wrap">
-            <div class="bd-scroller">
-                <div class="bd-modal-error-body"><span>{{content.err.message}}</span>
-                {{content.stackTrace}}</div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-    export default {
-        props: ['content', 'hideStack', 'showStack']
-    }
-</script>
diff --git a/client/src/ui/components/common/Modal.vue b/client/src/ui/components/common/Modal.vue
index 0fe83c87..52b720bb 100644
--- a/client/src/ui/components/common/Modal.vue
+++ b/client/src/ui/components/common/Modal.vue
@@ -15,8 +15,8 @@
                 <div class="bd-modal-icon">
                     <slot name="icon" />
                 </div>
-                <span class="bd-modal-headertext">{{headerText}}</span>
-                <div class="bd-modal-x" @click="e => close(e.shiftKey, e)">
+                <span class="bd-modal-headertext">{{ headerText }}</span>
+                <div class="bd-modal-x" @click="$emit('close', $event.shiftKey, $event)">
                     <MiClose size="18" />
                 </div>
             </div>
@@ -39,7 +39,7 @@
     import { MiClose } from './MaterialIcon';
 
     export default {
-        props: ['headerText', 'close'],
+        props: ['headerText'],
         components: {
             MiClose
         },
@@ -56,9 +56,8 @@
         },
         methods: {
             keyupListener(e) {
-                if (e.which === 27) {
-                    this.close();
-                }
+                if (e.which === 27)
+                    this.$emit('close', false, e);
             }
         }
     }

From 1714a0225e3f3ed2081dca2573734dce1299b431 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:03:04 +0100
Subject: [PATCH 07/42] Change autocomplete class names

---
 client/src/builtin/Autocomplete.vue           | 33 -------------------
 .../styles/partials/generic/autocomplete.scss |  8 ++---
 .../src/ui/components/common/Autocomplete.vue | 15 +++++----
 3 files changed, 12 insertions(+), 44 deletions(-)
 delete mode 100644 client/src/builtin/Autocomplete.vue

diff --git a/client/src/builtin/Autocomplete.vue b/client/src/builtin/Autocomplete.vue
deleted file mode 100644
index b779341c..00000000
--- a/client/src/builtin/Autocomplete.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * BetterDiscord Autocomplete Component
- * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
- * All rights reserved.
- * https://betterdiscord.net
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
-*/
-
-<template>
-    <div class="bd-autocomplete">
-        <div class="bd-autocomplete-inner">
-            <div class="bd-autocompleteRow">
-                <div class="bd-autocompleteSelector">
-                    <div class="bd-autocompleteTitle">
-                        Emotes Matching:
-                        <strong>Kappa</strong>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-    import EmoteModule from '../../../builtin/Emotemodule.js';
-    export default {
-        props: ['title', 'emotes'],
-        beforeMount() {
-            console.log(EmoteModule);
-        }
-    }
-</script>
diff --git a/client/src/styles/partials/generic/autocomplete.scss b/client/src/styles/partials/generic/autocomplete.scss
index 000f33b8..bfc8ebd5 100644
--- a/client/src/styles/partials/generic/autocomplete.scss
+++ b/client/src/styles/partials/generic/autocomplete.scss
@@ -14,12 +14,12 @@
         padding-bottom: 8px;
         white-space: nowrap;
 
-        .bd-autocompleteRow {
+        .bd-autocomplete-row {
             padding: 0 8px;
             font-size: 14px;
             line-height: 16px;
 
-            .bd-autocompleteSelector {
+            .bd-autocomplete-selector {
                 border-radius: 3px;
                 padding: 8px;
 
@@ -31,7 +31,7 @@
                     background-color: #36393f;
                 }
 
-                .bd-autocompleteTitle {
+                .bd-autocomplete-title {
                     color: #72767d;
                     padding: 4px 0;
                     text-transform: uppercase;
@@ -46,7 +46,7 @@
                     }
                 }
 
-                .bd-autocompleteField {
+                .bd-autocomplete-field {
                     display: flex;
                     flex: 1 1 auto;
                     color: #f6f6f7;
diff --git a/client/src/ui/components/common/Autocomplete.vue b/client/src/ui/components/common/Autocomplete.vue
index 627f5262..26323803 100644
--- a/client/src/ui/components/common/Autocomplete.vue
+++ b/client/src/ui/components/common/Autocomplete.vue
@@ -1,5 +1,5 @@
 /**
- * BetterDiscord Autocomplete Component
+ * BetterDiscord Emote Autocomplete Component
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net
@@ -11,17 +11,17 @@
 <template>
     <div class="bd-autocomplete">
         <div v-if="emotes && emotes.length" class="bd-autocomplete-inner">
-            <div class="bd-autocompleteRow">
-                <div class="bd-autocompleteSelector">
-                    <div class="bd-autocompleteTitle">
+            <div class="bd-autocomplete-row">
+                <div class="bd-autocomplete-selector">
+                    <div class="bd-autocomplete-title">
                         Emotes Matching:
                         <strong>{{title}}</strong>
                     </div>
                 </div>
             </div>
-            <div v-for="(emote, index) in emotes" class="bd-autocompleteRow" :key="index">
-                <div class="bd-autocompleteSelector bd-selectable" :class="{'bd-selected': index === selectedIndex}" @mouseover="() => { selected = emote.id }" @click="() => inject(emote)">
-                    <div class="bd-autocompleteField">
+            <div v-for="(emote, index) in emotes" class="bd-autocomplete-row" :key="index">
+                <div class="bd-autocomplete-selector bd-selectable" :class="{'bd-selected': index === selectedIndex}" @mouseover="() => { selected = emote.id }" @click="() => inject(emote)">
+                    <div class="bd-autocomplete-field">
                         <img :src="getEmoteSrc(emote)"/>
                         <div>{{emote.id}}</div>
                     </div>
@@ -30,6 +30,7 @@
         </div>
     </div>
 </template>
+
 <script>
     import { EmoteModule } from 'builtin';
     import { Events } from 'modules';

From d32329216237c105e0c33c88938e201fa80e1835 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:04:58 +0100
Subject: [PATCH 08/42] =?UTF-8?q?Add=20textarea=20for=20updating=20custom?=
 =?UTF-8?q?=20setting=E2=80=99s=20values=20in=20debug=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/styles/partials/generic/forms/main.scss | 13 ++++++++++++-
 client/src/ui/components/bd/setting/Custom.vue  | 17 ++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/client/src/styles/partials/generic/forms/main.scss b/client/src/styles/partials/generic/forms/main.scss
index 10c63018..fd593f85 100644
--- a/client/src/styles/partials/generic/forms/main.scss
+++ b/client/src/styles/partials/generic/forms/main.scss
@@ -45,7 +45,18 @@
         margin-top: 0;
     }
 
-    > .bd-drawer {
+    > .bd-form-customsetting-value {
         margin-bottom: 0;
+
+        .bd-form-textarea-details {
+            margin-top: 15px;
+        }
+
+        .bd-button {
+            margin-top: 10px;
+            padding: 5px 8px;
+            border-radius: 2px;
+            font-size: 14px;
+        }
     }
 }
diff --git a/client/src/ui/components/bd/setting/Custom.vue b/client/src/ui/components/bd/setting/Custom.vue
index 70b1b66a..1d827f45 100644
--- a/client/src/ui/components/bd/setting/Custom.vue
+++ b/client/src/ui/components/bd/setting/Custom.vue
@@ -11,8 +11,17 @@
 <template>
     <div class="bd-form-customsetting" :class="{'bd-form-customsetting-debug': setting.debug}">
         <component :is="component" :setting="setting" :change="change"></component>
-        <Drawer class="bd-form-customsetting-value" label="Custom setting data" v-if="setting.debug">
+        <Drawer class="bd-form-customsetting-value bd-form-textarea" label="Custom setting data" v-if="setting.debug">
             <pre class="bd-pre-wrap"><div class="bd-pre">{{ JSON.stringify(setting, null, 4) }}</div></pre>
+
+            <div class="bd-form-textarea-details">
+                <div class="bd-title">
+                    <h3>Set value</h3>
+                </div>
+                <div class="bd-hint">Enter a JSON string to update the setting.</div>
+            </div>
+            <textarea ref="set_value_input" class="bd-textarea" @keyup.stop :value="JSON.stringify(setting.value, null, 4)"></textarea>
+            <Button @click="setting.value = JSON.parse($refs.set_value_input.value)">Update</Button>
         </Drawer>
     </div>
 </template>
@@ -21,12 +30,14 @@
     import { PluginManager } from 'modules';
     import SettingsPanel from '../SettingsPanel.vue';
     import Drawer from '../../common/Drawer.vue';
+    import Button from '../../common/Button.vue';
     import path from 'path';
 
     export default {
         props: ['setting'],
         components: {
-            Drawer
+            Drawer,
+            Button
         },
         computed: {
             component() {
@@ -68,7 +79,7 @@
             },
             change(value, ignore_disabled) {
                 if (this.disabled && !ignore_disabled) return;
-                this.setting = value;
+                this.setting.value = value;
             }
         }
     }

From 8983256adead580eb7922e3f1bbf2c8f7e470e91 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:05:10 +0100
Subject: [PATCH 09/42] Use Logger

---
 client/src/modules/reactcomponents.js | 11 ++++++-----
 client/src/ui/automanip.js            |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/modules/reactcomponents.js b/client/src/modules/reactcomponents.js
index 4ba8137b..48ad1611 100644
--- a/client/src/modules/reactcomponents.js
+++ b/client/src/modules/reactcomponents.js
@@ -9,11 +9,12 @@
  * LICENSE file in the root directory of this source tree.
 */
 
+import { EmoteModule } from 'builtin';
+import { Reflection } from 'ui';
+import { ClientLogger as Logger } from 'common';
 import { MonkeyPatch, Patcher } from './patcher';
 import { WebpackModules, Filters } from './webpackmodules';
 import DiscordApi from './discordapi';
-import { EmoteModule } from 'builtin';
-import { Reflection } from 'ui';
 
 class Helpers {
     static get plannedActions() {
@@ -209,7 +210,7 @@ export class ReactComponents {
         if (important) {
             const importantInterval = setInterval(() => {
                 if (this.components.find(c => c.id === name)) {
-                    console.info(`Important component ${name} already found`);
+                    Logger.info('ReactComponents', `Important component ${name} already found`);
                     clearInterval(importantInterval);
                     return;
                 }
@@ -218,11 +219,11 @@ export class ReactComponents {
                 const reflect = Reflection(select);
                 if (!reflect.component) {
                     clearInterval(importantInterval);
-                    console.error(`FAILED TO GET IMPORTANT COMPONENT ${name} WITH REFLECTION FROM`, select);
+                    Logger.error('ReactComponents', [`FAILED TO GET IMPORTANT COMPONENT ${name} WITH REFLECTION FROM`, select]);
                     return;
                 }
                 if (!reflect.component.displayName) reflect.component.displayName = name;
-                console.info(`Found important component ${name} with reflection.`);
+                Logger.info('ReactComponents', `Found important component ${name} with reflection`);
                 this.push(reflect.component);
                 clearInterval(importantInterval);
             }, 50);
diff --git a/client/src/ui/automanip.js b/client/src/ui/automanip.js
index 88f19651..be4617df 100644
--- a/client/src/ui/automanip.js
+++ b/client/src/ui/automanip.js
@@ -47,7 +47,7 @@ export default class extends EventListener {
             this.setIds();
             this.makeMutable();
         } catch (err) {
-            console.log(err);
+            Logger.err('AutoManip', err);
         }
     }
 

From 8c09112cffb29b6153e0c2e6ad80d1e04b7073c9 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:07:56 +0100
Subject: [PATCH 10/42] Use events

---
 client/src/ui/components/BdSettings.vue            | 2 +-
 client/src/ui/components/bd/BdBadge.vue            | 9 +++++----
 client/src/ui/components/bd/BdMessageBadge.vue     | 8 ++++----
 client/src/ui/components/bd/Card.vue               | 1 +
 client/src/ui/components/bd/CssEditor.vue          | 9 +++------
 client/src/ui/components/bd/PluginCard.vue         | 9 +++++----
 client/src/ui/components/bd/PluginsView.vue        | 4 ++--
 client/src/ui/components/bd/SettingsWrapper.vue    | 1 +
 client/src/ui/components/bd/ThemeCard.vue          | 8 ++++----
 client/src/ui/components/bd/ThemesView.vue         | 4 ++--
 client/src/ui/components/common/Button.vue         | 5 +++--
 client/src/ui/components/common/ButtonGroup.vue    | 4 ++--
 client/src/ui/components/common/Dropdown.vue       | 1 +
 client/src/ui/components/common/FormButton.vue     | 5 +++--
 client/src/ui/components/common/RefreshBtn.vue     | 7 ++++---
 client/src/ui/components/common/ScrollerWrap.vue   | 3 ++-
 client/src/ui/components/sidebar/Button.vue        | 5 +++--
 client/src/ui/components/sidebar/ContentColumn.vue | 1 +
 client/src/ui/components/sidebar/Header.vue        | 1 +
 client/src/ui/components/sidebar/Item.vue          | 5 +++--
 client/src/ui/components/sidebar/Sidebar.vue       | 5 ++---
 client/src/ui/components/sidebar/View.vue          | 1 +
 22 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index 38522ed8..b4f6aafe 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -18,7 +18,7 @@
                 </div>
                 <template v-for="(category, text) in sidebar">
                     <SidebarItem :item="{text, type: 'header'}" />
-                    <SidebarItem v-for="item in category" :item="item" :key="item.id" :onClick="itemOnClick" />
+                    <SidebarItem v-for="item in category" :item="item" :key="item.id" @click="itemOnClick(item.id)" />
                 </template>
             </Sidebar>
             <div slot="sidebarfooter" class="bd-info">
diff --git a/client/src/ui/components/bd/BdBadge.vue b/client/src/ui/components/bd/BdBadge.vue
index 969f8692..0ee34989 100644
--- a/client/src/ui/components/bd/BdBadge.vue
+++ b/client/src/ui/components/bd/BdBadge.vue
@@ -11,12 +11,13 @@
 <template>
     <div :class="{'bd-profile-badges-wrap': !hasBadges}">
         <div class="bd-profile-badges">
-            <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="onClick"></div>
-            <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="onClick"></div>
-            <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="onClick"></div>
+            <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
+            <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
+            <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="click"></div>
         </div>
     </div>
 </template>
+
 <script>
     // Imports
     import { shell } from 'electron';
@@ -24,7 +25,7 @@
     export default {
         props: ['webdev', 'developer', 'contributor', 'hasBadges'],
         methods: {
-            onClick() {
+            click() {
                 if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
                 if (this.webdev) return shell.openExternal('https://betterdiscord.net');
                 if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors');
diff --git a/client/src/ui/components/bd/BdMessageBadge.vue b/client/src/ui/components/bd/BdMessageBadge.vue
index 29e88adc..9c241190 100644
--- a/client/src/ui/components/bd/BdMessageBadge.vue
+++ b/client/src/ui/components/bd/BdMessageBadge.vue
@@ -10,9 +10,9 @@
 
 <template>
     <div class="bd-message-badges-wrap">
-        <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-message-badge bd-message-badge-developer" @click="onClick"></div>
-        <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-message-badge bd-message-badge-developer" @click="onClick"></div>
-        <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-message-badge bd-message-badge-contributor" @click="onClick"></div>
+        <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-message-badge bd-message-badge-developer" @click="click"></div>
+        <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-message-badge bd-message-badge-developer" @click="click"></div>
+        <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-message-badge bd-message-badge-contributor" @click="click"></div>
     </div>
 </template>
 <script>
@@ -22,7 +22,7 @@
     export default {
         props: ['webdev', 'developer', 'contributor', 'hasBadges'],
         methods: {
-            onClick() {
+            click() {
                 if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
                 if (this.webdev) return shell.openExternal('https://betterdiscord.net');
                 if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors');
diff --git a/client/src/ui/components/bd/Card.vue b/client/src/ui/components/bd/Card.vue
index 5bd3341a..08cb9000 100644
--- a/client/src/ui/components/bd/Card.vue
+++ b/client/src/ui/components/bd/Card.vue
@@ -29,6 +29,7 @@
         </div>
     </div>
 </template>
+
 <script>
     // Imports
     import { MiExtension } from '../common';
diff --git a/client/src/ui/components/bd/CssEditor.vue b/client/src/ui/components/bd/CssEditor.vue
index 90e9c6dd..5fd7cf04 100644
--- a/client/src/ui/components/bd/CssEditor.vue
+++ b/client/src/ui/components/bd/CssEditor.vue
@@ -19,7 +19,7 @@
 
             <div class="bd-form-item">
                 <h5>Custom Editor</h5>
-                <FormButton v-if="internalEditorIsInstalled" :onClick="openInternalEditor">Open</FormButton>
+                <FormButton v-if="internalEditorIsInstalled" @click="openInternalEditor">Open</FormButton>
                 <template v-else>
                     <div class="bd-form-warning">
                         <div class="bd-text">Custom Editor is not installed!</div>
@@ -32,7 +32,7 @@
 
             <div class="bd-form-item">
                 <h5>System Editor</h5>
-                <FormButton :onClick="openSystemEditor">Open</FormButton>
+                <FormButton @click="openSystemEditor">Open</FormButton>
                 <p class="bd-hint">This will open {{ systemEditorPath }} in your system's default editor.</p>
             </div>
             <div class="bd-form-divider"></div>
@@ -42,10 +42,7 @@
             </div>
             <SettingsPanel :settings="settingsset" />
 
-            <!-- <Setting :setting="liveUpdateSetting" />
-            <Setting :setting="watchFilesSetting" /> -->
-
-            <FormButton :onClick="recompile" :loading="compiling">Recompile</FormButton>
+            <FormButton @click="recompile" :loading="compiling">Recompile</FormButton>
         </div>
     </SettingsWrapper>
 </template>
diff --git a/client/src/ui/components/bd/PluginCard.vue b/client/src/ui/components/bd/PluginCard.vue
index 5f38a8d8..5c60f896 100644
--- a/client/src/ui/components/bd/PluginCard.vue
+++ b/client/src/ui/components/bd/PluginCard.vue
@@ -12,13 +12,14 @@
     <Card :item="plugin">
         <SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="togglePlugin" />
         <ButtonGroup slot="controls">
-            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
-            <Button v-tooltip="'Reload'" :onClick="reloadPlugin"><MiRefresh size="18" /></Button>
-            <Button v-tooltip="'Edit'" :onClick="editPlugin"><MiPencil size="18" /></Button>
-            <Button v-tooltip="'Uninstall (shift + click to unload)'" :onClick="e => deletePlugin(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
+            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" @click="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
+            <Button v-tooltip="'Reload'" @click="reloadPlugin"><MiRefresh size="18" /></Button>
+            <Button v-tooltip="'Edit'" @click="editPlugin"><MiPencil size="18" /></Button>
+            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="e => deletePlugin(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
         </ButtonGroup>
     </Card>
 </template>
+
 <script>
     // Imports
     import { ClientLogger as Logger } from 'common';
diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index 09809efd..1390b8b1 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -13,11 +13,11 @@
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
-                <RefreshBtn v-if="local" :onClick="refreshLocal" />
+                <RefreshBtn v-if="local" @click="refreshLocal" />
             </div>
             <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                 <h3>Browse</h3>
-                <RefreshBtn v-if="!local" :onClick="refreshOnline" />
+                <RefreshBtn v-if="!local" @click="refreshOnline" />
             </div>
         </div>
 
diff --git a/client/src/ui/components/bd/SettingsWrapper.vue b/client/src/ui/components/bd/SettingsWrapper.vue
index c13a2bff..08b24488 100644
--- a/client/src/ui/components/bd/SettingsWrapper.vue
+++ b/client/src/ui/components/bd/SettingsWrapper.vue
@@ -21,6 +21,7 @@
         </ScrollerWrap>
     </div>
 </template>
+
 <script>
     // Imports
     import { ScrollerWrap } from '../common';
diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index 1b251d09..a39a6059 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -12,10 +12,10 @@
     <Card :item="theme">
         <SettingSwitch slot="toggle" :value="theme.enabled" @input="toggleTheme" />
         <ButtonGroup slot="controls">
-            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
-            <Button v-tooltip="'Recompile (shift + click to reload)'" :onClick="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>
-            <Button v-tooltip="'Edit'" :onClick="editTheme"><MiPencil size="18" /></Button>
-            <Button v-tooltip="'Uninstall (shift + click to unload)'" :onClick="e => deleteTheme(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
+            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" @click="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
+            <Button v-tooltip="'Recompile (shift + click to reload)'" @click="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>
+            <Button v-tooltip="'Edit'" @click="editTheme"><MiPencil size="18" /></Button>
+            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="e => deleteTheme(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
         </ButtonGroup>
     </Card>
 </template>
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 7d10b9f1..d08fbe21 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -13,11 +13,11 @@
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
-                <RefreshBtn v-if="local" :onClick="refreshLocal"/>
+                <RefreshBtn v-if="local" @click="refreshLocal"/>
             </div>
             <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                 <h3>Browse</h3>
-                <RefreshBtn v-if="!local" :onClick="refreshOnline" />
+                <RefreshBtn v-if="!local" @click="refreshOnline" />
             </div>
         </div>
 
diff --git a/client/src/ui/components/common/Button.vue b/client/src/ui/components/common/Button.vue
index 917f74e3..afe841f3 100644
--- a/client/src/ui/components/common/Button.vue
+++ b/client/src/ui/components/common/Button.vue
@@ -9,13 +9,14 @@
 */
 
 <template>
-    <div class="bd-button" :class="[{'bd-disabled': disabled}, {'bd-err': type === 'err'}]" @click="!disabled && !loading ? onClick($event) : null">
+    <div class="bd-button" :class="[{'bd-disabled': disabled}, {'bd-err': type === 'err'}]" @click="!disabled && !loading ? $emit('click', $event) : null">
         <div v-if="loading" class="bd-spinner-7"></div>
         <slot v-else />
     </div>
 </template>
+
 <script>
     export default {
-        props: ['loading', 'disabled', 'type', 'onClick', 'type']
+        props: ['loading', 'disabled', 'type']
     }
 </script>
diff --git a/client/src/ui/components/common/ButtonGroup.vue b/client/src/ui/components/common/ButtonGroup.vue
index 0af93fd9..28cc1480 100644
--- a/client/src/ui/components/common/ButtonGroup.vue
+++ b/client/src/ui/components/common/ButtonGroup.vue
@@ -13,7 +13,7 @@
         <slot />
     </div>
 </template>
+
 <script>
-    export default {
-    }
+    export default {}
 </script>
diff --git a/client/src/ui/components/common/Dropdown.vue b/client/src/ui/components/common/Dropdown.vue
index 5f14d3b1..64b74b24 100644
--- a/client/src/ui/components/common/Dropdown.vue
+++ b/client/src/ui/components/common/Dropdown.vue
@@ -21,6 +21,7 @@
         </div>
     </div>
 </template>
+
 <script>
     export default {
         props: ['options', 'value', 'disabled'],
diff --git a/client/src/ui/components/common/FormButton.vue b/client/src/ui/components/common/FormButton.vue
index 86baf6c7..f14aa995 100644
--- a/client/src/ui/components/common/FormButton.vue
+++ b/client/src/ui/components/common/FormButton.vue
@@ -9,13 +9,14 @@
 */
 
 <template>
-    <div class="bd-form-button bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? onClick() : null">
+    <div class="bd-form-button bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? $emit('click', $event) : null">
         <div v-if="loading" class="bd-spinner-7"></div>
         <slot v-else />
     </div>
 </template>
+
 <script>
     export default {
-        props: ['loading', 'disabled', 'type', 'onClick']
+        props: ['loading', 'disabled', 'type']
     }
 </script>
diff --git a/client/src/ui/components/common/RefreshBtn.vue b/client/src/ui/components/common/RefreshBtn.vue
index 6ce789da..0ecad7f0 100644
--- a/client/src/ui/components/common/RefreshBtn.vue
+++ b/client/src/ui/components/common/RefreshBtn.vue
@@ -1,11 +1,11 @@
 /**
- * BetterDiscord RefreshBtn
+ * BetterDiscord Refresh Button
  * Copyright (c) 2018 Lilian Tedone http://beard-design.com/
  * All rights reserved.
 */
 
 <template>
-    <div class="bd-refresh-button" :class="{'bd-refreshed': state === 'refreshed', 'bd-refreshing': state === 'refreshing'}" @click="onClick">
+    <div class="bd-refresh-button" :class="{'bd-refreshed': state === 'refreshed', 'bd-refreshing': state === 'refreshing'}" @click="$emit('click')">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <g class="bd-svg-refresh">
                 <g class="bd-svg-circle">
@@ -24,8 +24,9 @@
         </svg>
     </div>
 </template>
+
 <script>
     export default {
-        props: ['state', 'onClick']
+        props: ['state']
     }
 </script>
diff --git a/client/src/ui/components/common/ScrollerWrap.vue b/client/src/ui/components/common/ScrollerWrap.vue
index 102a92e2..5dad05b2 100644
--- a/client/src/ui/components/common/ScrollerWrap.vue
+++ b/client/src/ui/components/common/ScrollerWrap.vue
@@ -15,8 +15,9 @@
         </div>
     </div>
 </template>
+
 <script>
     export default {
         props: ['dark']
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/ui/components/sidebar/Button.vue b/client/src/ui/components/sidebar/Button.vue
index ba50e5ea..5ec3c34b 100644
--- a/client/src/ui/components/sidebar/Button.vue
+++ b/client/src/ui/components/sidebar/Button.vue
@@ -9,12 +9,13 @@
 */
 
 <template>
-    <div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">
+    <div class="bd-item" :class="{active: item.active}" @click="$emit('click', item.id)">
         {{item.text}}
     </div>
 </template>
+
 <script>
     export default {
-        props: ['item', 'onClick']
+        props: ['item']
     }
 </script>
diff --git a/client/src/ui/components/sidebar/ContentColumn.vue b/client/src/ui/components/sidebar/ContentColumn.vue
index 6a69283d..3268aad0 100644
--- a/client/src/ui/components/sidebar/ContentColumn.vue
+++ b/client/src/ui/components/sidebar/ContentColumn.vue
@@ -13,6 +13,7 @@
         <slot/>
     </div>
 </template>
+
 <script>
     export default {}
 </script>
diff --git a/client/src/ui/components/sidebar/Header.vue b/client/src/ui/components/sidebar/Header.vue
index fbc31834..624cd62b 100644
--- a/client/src/ui/components/sidebar/Header.vue
+++ b/client/src/ui/components/sidebar/Header.vue
@@ -13,6 +13,7 @@
         {{item.text}}
     </div>
 </template>
+
 <script>
     export default {
         props: ['item']
diff --git a/client/src/ui/components/sidebar/Item.vue b/client/src/ui/components/sidebar/Item.vue
index 95b3aaa0..64d3a170 100644
--- a/client/src/ui/components/sidebar/Item.vue
+++ b/client/src/ui/components/sidebar/Item.vue
@@ -9,15 +9,16 @@
 */
 
 <template>
-    <SidebarButton v-if="item._type === 'button'" :item="item" :onClick="onClick"/>
+    <SidebarButton v-if="item._type === 'button'" :item="item" @click="$emit('click', $event)" />
     <SidebarHeader v-else :item="item" />
 </template>
+
 <script>
     // Imports
     import { SidebarHeader, SidebarButton } from './';
 
     export default {
-        props: ['item', 'onClick'],
+        props: ['item'],
         components: {
             SidebarHeader,
             SidebarButton
diff --git a/client/src/ui/components/sidebar/Sidebar.vue b/client/src/ui/components/sidebar/Sidebar.vue
index 4f646599..da53d52d 100644
--- a/client/src/ui/components/sidebar/Sidebar.vue
+++ b/client/src/ui/components/sidebar/Sidebar.vue
@@ -13,8 +13,7 @@
         <slot/>
     </div>
 </template>
-<script>
-    export default {
 
-    }
+<script>
+    export default {}
 </script>
diff --git a/client/src/ui/components/sidebar/View.vue b/client/src/ui/components/sidebar/View.vue
index e2653b2f..51851b6d 100644
--- a/client/src/ui/components/sidebar/View.vue
+++ b/client/src/ui/components/sidebar/View.vue
@@ -23,6 +23,7 @@
         </div>
     </div>
 </template>
+
 <script>
     // Imports
     import { ScrollerWrap } from '../common';

From 81f35194083632e56632bed14d7b6ee5f500a30f Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:17:02 +0100
Subject: [PATCH 11/42] Use events in the settings menu

---
 client/src/builtin/EditedTimeStamp.vue         |  8 --------
 client/src/builtin/EmoteComponent.vue          |  2 +-
 client/src/ui/components/BdSettings.vue        |  8 ++++----
 client/src/ui/components/BdSettingsWrapper.vue | 17 +++++++----------
 4 files changed, 12 insertions(+), 23 deletions(-)
 delete mode 100644 client/src/builtin/EditedTimeStamp.vue

diff --git a/client/src/builtin/EditedTimeStamp.vue b/client/src/builtin/EditedTimeStamp.vue
deleted file mode 100644
index 723cea85..00000000
--- a/client/src/builtin/EditedTimeStamp.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <span class="edited" v-tooltip="ets">(edited)</span>
-</template>
-<script>
-    export default {
-        props: ['ets']
-    }
-</script>
diff --git a/client/src/builtin/EmoteComponent.vue b/client/src/builtin/EmoteComponent.vue
index 98cd63a1..60b4d6bf 100644
--- a/client/src/builtin/EmoteComponent.vue
+++ b/client/src/builtin/EmoteComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <span class="bd-emotewrapper" v-tooltip="name">
-        <img class="bd-emote" :src="src" :alt="`;${name};`"/>
+        <img class="bd-emote" :src="src" :alt="`;${name};`" />
     </span>
 </template>
 
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index b4f6aafe..c1e297fd 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -9,10 +9,10 @@
 */
 
 <template>
-    <div class="bd-settings" :class="{active: active, 'bd-settings-out': activeIndex === -1 && lastActiveIndex >= 0}" @keyup="close">
+    <div class="bd-settings" :class="{active: active, 'bd-settings-out': activeIndex === -1 && lastActiveIndex >= 0}" @keyup="$emit('close')">
         <SidebarView :contentVisible="this.activeIndex >= 0 || this.lastActiveIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
             <Sidebar slot="sidebar">
-                <div class="bd-settings-x" @click="close">
+                <div class="bd-settings-x" @click="$emit('close')">
                     <MiClose size="17"/>
                     <span class="bd-x-text">ESC</span>
                 </div>
@@ -76,9 +76,9 @@
                 Settings,
                 timeout: null,
                 SettingsWrapper
-            }
+            };
         },
-        props: ['active', 'close'],
+        props: ['active'],
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
             SettingsWrapper, SettingsPanel, CssEditorView, PluginsView, ThemesView, UpdaterView,
diff --git a/client/src/ui/components/BdSettingsWrapper.vue b/client/src/ui/components/BdSettingsWrapper.vue
index 605a2763..f050d886 100644
--- a/client/src/ui/components/BdSettingsWrapper.vue
+++ b/client/src/ui/components/BdSettingsWrapper.vue
@@ -10,12 +10,12 @@
 
 <template>
     <div class="bd-settings-wrapper" :class="[{active: active}, 'platform-' + this.platform]">
-        <div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating}" @click="showSettings">
+        <div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating}" @click="active = true">
             <div v-if="updating === 0" v-tooltip.right="'Checking for updates'" class="bd-settings-button-btn bd-loading"></div>
             <div v-else-if="updating === 2" v-tooltip.right="'Updates available!'" class="bd-settings-button-btn bd-updates"></div>
             <div v-else class="bd-settings-button-btn" :class="[{'bd-loading': !loaded}]"></div>
         </div>
-        <BdSettings ref="settings" :active="active" :close="hideSettings" />
+        <BdSettings ref="settings" :active="active" @close="active = false" />
     </div>
 </template>
 
@@ -34,27 +34,24 @@
                 animating: false,
                 timeout: null,
                 platform: global.process.platform
-            }
+            };
         },
         components: {
             BdSettings
         },
         methods: {
-            showSettings() {
-                if (!this.loaded) return;
-                this.active = true;
-            },
-            hideSettings() { this.active = false },
-            toggleSettings() { this.active = !this.active },
             keyupListener(e) {
                 if (Modals.stack.length || !this.active || e.which !== 27) return;
                 if (this.$refs.settings.activeIndex !== -1) this.$refs.settings.closeContent();
-                else this.hideSettings();
+                else this.active = false;
                 e.stopImmediatePropagation();
             }
         },
         watch: {
             active(active) {
+                if (active && !this.loaded)
+                    return this.active = false;
+
                 this.animating = true;
                 if (this.timeout) clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {

From da4b592e5452fc428e54ad570b2c61b01c774948 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:34:37 +0100
Subject: [PATCH 12/42] Extend AsyncEventEmitter

---
 client/src/modules/content.js      | 47 ++++--------------------------
 tests/ext/plugins/Example/index.js |  4 +--
 2 files changed, 7 insertions(+), 44 deletions(-)

diff --git a/client/src/modules/content.js b/client/src/modules/content.js
index ebd85c33..13b49b90 100644
--- a/client/src/modules/content.js
+++ b/client/src/modules/content.js
@@ -12,16 +12,18 @@ import { Utils, FileUtils, ClientLogger as Logger, AsyncEventEmitter } from 'com
 import { Modals } from 'ui';
 import Database from './database';
 
-export default class Content {
+export default class Content extends AsyncEventEmitter {
 
     constructor(internals) {
+        super();
+
         Utils.deepfreeze(internals.info);
         Object.freeze(internals.paths);
 
         this.__internals = internals;
 
-        this.settings.on('setting-updated', event => this.events.emit('setting-updated', event));
-        this.settings.on('settings-updated', event => this.events.emit('settings-updated', event));
+        this.settings.on('setting-updated', event => this.emit('setting-updated', event));
+        this.settings.on('settings-updated', event => this.emit('settings-updated', event));
         this.settings.on('settings-updated', event => this.__settingsUpdated(event));
 
         // Add hooks
@@ -55,7 +57,6 @@ export default class Content {
     get settings() { return this.userConfig.config }
     get config() { return this.settings.categories }
     get data() { return this.userConfig.data || (this.userConfig.data = {}) }
-    get events() { return this.EventEmitter || (this.EventEmitter = new AsyncEventEmitter()) }
 
     /**
      * Opens a settings modal for this content.
@@ -128,44 +129,6 @@ export default class Content {
         if (save) await this.saveConfiguration();
     }
 
-    /**
-     * Adds an event listener.
-     * @param {String} event The event to add the listener to
-     * @param {Function} callback The function to call when the event is emitted
-     */
-    on(...args) {
-        return this.events.on(...args);
-    }
-
-    /**
-     * Adds an event listener that removes itself when called, therefore only being called once.
-     * @param {String} event The event to add the listener to
-     * @param {Function} callback The function to call when the event is emitted
-     * @return {Promise|undefined}
-     */
-    once(...args) {
-        return this.events.once(...args);
-    }
-
-    /**
-     * Removes an event listener.
-     * @param {String} event The event to remove the listener from
-     * @param {Function} callback The bound callback (optional)
-     */
-    off(...args) {
-        return this.events.removeListener(...args);
-    }
-
-    /**
-     * Emits an event.
-     * @param {String} event The event to emit
-     * @param {Any} data Data to be passed to listeners
-     * @return {Promise|undefined}
-     */
-    emit(...args) {
-        return this.events.emit(...args);
-    }
-
 }
 
 Object.freeze(Content.prototype);
diff --git a/tests/ext/plugins/Example/index.js b/tests/ext/plugins/Example/index.js
index 38583eba..dc1fc018 100644
--- a/tests/ext/plugins/Example/index.js
+++ b/tests/ext/plugins/Example/index.js
@@ -15,10 +15,10 @@ module.exports = (Plugin, Api, Vendor, Dependencies) => {
             Logger.log('onStart');
 
             Logger.log(`Plugin setting "default-0" value: ${this.settings.get('default-0')}`);
-            this.events.on('setting-updated', event => {
+            this.on('setting-updated', event => {
                 console.log('Received plugin setting update:', event);
             });
-            this.events.on('settings-updated', event => {
+            this.on('settings-updated', event => {
                 console.log('Received plugin settings update:', event);
             });
 

From 009d6be057faee69b240d9ab3155c78394155ee9 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:38:36 +0100
Subject: [PATCH 13/42] All clicking through the transparent area when the menu
 is open but nothing is selected

---
 .../styles/partials/bdsettings/button.scss    |  2 +-
 .../partials/bdsettings/sidebarview.scss      | 65 ++++++++++---------
 .../src/styles/partials/sidebarview/main.scss |  2 +
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss
index 0069c3a4..9ab8ae99 100644
--- a/client/src/styles/partials/bdsettings/button.scss
+++ b/client/src/styles/partials/bdsettings/button.scss
@@ -55,7 +55,7 @@
             opacity: 1;
             width: 130px;
             height: 43px;
-            margin: 18px 0 17px 20px;
+            margin: 18px 0 17px 25px;
             cursor: default;
         }
     }
diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss
index fd0155db..bdb1ae84 100644
--- a/client/src/styles/partials/bdsettings/sidebarview.scss
+++ b/client/src/styles/partials/bdsettings/sidebarview.scss
@@ -8,6 +8,7 @@
     transform: translateX(-100%) translateY(-100%);
     opacity: 0;
     transition: all .4s ease-in-out;
+    pointer-events: none;
 
     &.active {
         width: 900px;
@@ -15,20 +16,10 @@
         opacity: 1;
     }
 
-    .bd-sidebar-view::after {
-        content: "";
-        height: 100%;
-        width: 310px;
-        background-color: #202225;
-        top: 100%;
-        display: block;
-        position: absolute;
-    }
-
     .bd-settings-x {
         position: absolute;
         top: 18px;
-        left: 250px;
+        left: 255px;
         border: 2px solid #6e6e6e;
         border-radius: 50%;
         width: 25px;
@@ -39,7 +30,7 @@
         cursor: pointer;
 
         .platform-darwin & {
-            top: 40px;
+            top: 43px;
         }
 
         .bd-x-text {
@@ -65,10 +56,6 @@
         }
     }
 
-    .bd-sidebar-region .bd-scroller {
-        padding-top: 0;
-    }
-
     .bd-info {
         display: flex;
         align-items: flex-end;
@@ -108,6 +95,38 @@
         }
     }
 
+    .bd-sidebar-view {
+        &::after {
+            content: "";
+            height: 100%;
+            width: 310px;
+            background-color: #202225;
+            top: 100%;
+            display: block;
+            position: absolute;
+        }
+
+        .bd-sidebar-region .bd-scroller {
+            padding-top: 0;
+        }
+
+        .bd-content-region {
+            width: 590px;
+        }
+
+        &.active {
+            .bd-content-region {
+                transition: transform 0.4s ease-in-out, opacity 0.2s ease;
+                transform: none;
+                opacity: 1;
+            }
+        }
+
+        &.bd-stop .bd-content-region {
+            z-index: 3003;
+        }
+    }
+
     .platform-darwin & {
         top: 0px;
 
@@ -120,19 +139,7 @@
         top: 0;
     }
 
-    .bd-sidebar-view.bd-stop .bd-content-region {
-        z-index: 3003;
-    }
-
-    .bd-sidebar-view.active {
-        .bd-content-region {
-            transition: transform 0.4s ease-in-out, opacity 0.2s ease;
-            transform: none;
-            opacity: 1;
-        }
-    }
-
-    &:not(.active) .bd-sidebar-view.active,
+    &:not(.active) > .bd-sidebar-view.active,
     &.bd-settings-out .bd-sidebar-view.active {
         .bd-content-region {
             transform: translate(-600px, 0%);
diff --git a/client/src/styles/partials/sidebarview/main.scss b/client/src/styles/partials/sidebarview/main.scss
index 15e0a437..4cbdf8c6 100644
--- a/client/src/styles/partials/sidebarview/main.scss
+++ b/client/src/styles/partials/sidebarview/main.scss
@@ -19,6 +19,7 @@
         z-index: 5;
         max-width: 310px;
         min-width: 310px;
+        pointer-events: all;
 
         .bd-scroller {
             padding: 10px 10px 0 0;
@@ -32,6 +33,7 @@
         box-shadow: 0 0 4px #202225;
         backface-visibility: hidden;
         transition: transform 0.6s ease;
+        pointer-events: all;
     }
 
     &.bd-stop {

From 069b1ff689901e912228c707308c3da76fbd0f0b Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 02:49:36 +0100
Subject: [PATCH 14/42] Extend AsyncEventEmitter and allow changing of some
 properties

---
 .../src/structs/settings/settingscategory.js  | 28 ++++++++++++----
 client/src/structs/settings/settingsset.js    | 29 ++++++++---------
 .../src/structs/settings/types/basesetting.js | 32 +++++++++++++++----
 common/modules/async-eventemitter.js          |  7 ++++
 4 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/client/src/structs/settings/settingscategory.js b/client/src/structs/settings/settingscategory.js
index e9ecb7fa..cf1c9453 100644
--- a/client/src/structs/settings/settingscategory.js
+++ b/client/src/structs/settings/settingscategory.js
@@ -13,11 +13,18 @@ import BaseSetting from './types/basesetting';
 import { ClientLogger as Logger, AsyncEventEmitter } from 'common';
 import { SettingUpdatedEvent, SettingsUpdatedEvent } from 'structs';
 
-export default class SettingsCategory {
+export default class SettingsCategory extends AsyncEventEmitter {
 
     constructor(args, ...merge) {
-        this.emitter = new AsyncEventEmitter();
-        this.args = args.args || args;
+        super();
+
+        if (typeof args === 'string')
+            args = {id: args};
+        this.args = args.args || args || {};
+
+        this.args.id = this.args.id || this.args.category || 'default';
+        this.args.name = this.args.name || this.args.category_name || this.id;
+        this.type = this.args.type;
 
         this.args.settings = this.settings.map(setting => new Setting(setting));
 
@@ -56,6 +63,10 @@ export default class SettingsCategory {
         return this.name;
     }
 
+    set name(value) {
+        this.args.name = value;
+    }
+
     /**
      * Category type
      * Currently either "drawer", "static", or undefined.
@@ -64,6 +75,13 @@ export default class SettingsCategory {
         return this.args.type;
     }
 
+    set type(value) {
+        if (!value) this.args.type = undefined;
+        else if (value === 'drawer' || value === 'static')
+            this.args.type = value;
+        else throw {message: `Invalid category type ${value}`};
+    }
+
     /**
      * An array of settings in this category.
      */
@@ -276,8 +294,4 @@ export default class SettingsCategory {
         }, ...merge);
     }
 
-    on(...args) { return this.emitter.on(...args); }
-    off(...args) { return this.emitter.removeListener(...args); }
-    emit(...args) { return this.emitter.emit(...args); }
-
 }
diff --git a/client/src/structs/settings/settingsset.js b/client/src/structs/settings/settingsset.js
index bb87fac9..e0ed5065 100644
--- a/client/src/structs/settings/settingsset.js
+++ b/client/src/structs/settings/settingsset.js
@@ -14,11 +14,18 @@ import { ClientLogger as Logger, AsyncEventEmitter } from 'common';
 import { SettingUpdatedEvent, SettingsUpdatedEvent } from 'structs';
 import { Modals } from 'ui';
 
-export default class SettingsSet {
+export default class SettingsSet extends AsyncEventEmitter {
 
     constructor(args, ...merge) {
-        this.emitter = new AsyncEventEmitter();
-        this.args = args.args || args;
+        super();
+
+        if (typeof args === 'string')
+            args = {id: args};
+        this.args = args.args || args || {};
+
+        this.args.id = this.args.id || undefined;
+        this.args.text = this.args.text || undefined;
+        this.args.headertext = this.args.headertext || undefined;
 
         this.args.categories = this.categories.map(category => new SettingsCategory(category));
         this.args.schemes = this.schemes.map(scheme => new SettingsScheme(scheme));
@@ -54,6 +61,10 @@ export default class SettingsSet {
         return this.args.text;
     }
 
+    set text(value) {
+        this.args.text = value;
+    }
+
     /**
      * Text to be displayed with the set.
      */
@@ -65,14 +76,6 @@ export default class SettingsSet {
         this.args.headertext = headertext;
     }
 
-    /**
-     * Whether this set should be displayed.
-     * Currently only used in the settings menu.
-     */
-    get hidden() {
-        return this.args.hidden || false;
-    }
-
     /**
      * An array of SettingsCategory objects in this set.
      */
@@ -450,8 +453,4 @@ export default class SettingsSet {
         }, ...merge);
     }
 
-    on(...args) { return this.emitter.on(...args); }
-    off(...args) { return this.emitter.removeListener(...args); }
-    emit(...args) { return this.emitter.emit(...args); }
-
 }
diff --git a/client/src/structs/settings/types/basesetting.js b/client/src/structs/settings/types/basesetting.js
index b174bcea..117f8e25 100644
--- a/client/src/structs/settings/types/basesetting.js
+++ b/client/src/structs/settings/types/basesetting.js
@@ -12,11 +12,19 @@ import { ThemeManager } from 'modules';
 import { Utils, AsyncEventEmitter } from 'common';
 import { SettingUpdatedEvent, SettingsUpdatedEvent } from 'structs';
 
-export default class Setting {
+export default class Setting extends AsyncEventEmitter {
 
     constructor(args, ...merge) {
+        super();
         this.args = args.args || args;
 
+        this.args.id = this.args.id || 'default';
+        this.args.text = this.args.text || undefined;
+        this.args.hint = this.args.hint || undefined;
+        this.args.path = this.args.path || undefined;
+        this.args.disabled = !!this.args.disabled;
+        this.args.fullwidth = !!this.args.fullwidth;
+
         if (!this.args.hasOwnProperty('value'))
             this.args.value = this.defaultValue;
         if (!this.args.hasOwnProperty('saved_value'))
@@ -26,7 +34,6 @@ export default class Setting {
             this._merge(newSetting);
         }
 
-        this.emitter = new AsyncEventEmitter();
         this.changed = !Utils.compare(this.args.value, this.args.saved_value);
     }
 
@@ -70,6 +77,10 @@ export default class Setting {
         return this.args.text;
     }
 
+    set text(value) {
+        this.args.text = value;
+    }
+
     /**
      * Text to be displayed with the setting.
      */
@@ -77,9 +88,14 @@ export default class Setting {
         return this.args.hint;
     }
 
+    set hint(value) {
+        this.args.hint = value;
+    }
+
     /**
      * The path of the plugin/theme this setting is part of.
      * Used by settings of type "array", "custom" and "file".
+     * Use set/category/setting.setContentPath to change.
      */
     get path() {
         return this.args.path;
@@ -93,6 +109,10 @@ export default class Setting {
         return this.args.disabled || false;
     }
 
+    set disabled(value) {
+        this.args.disabled = !!value;
+    }
+
     /**
      * Whether the setting should take the full width of the settings panel.
      * This is only customisable in some setting types.
@@ -101,6 +121,10 @@ export default class Setting {
         return this.args.fullwidth || false;
     }
 
+    set fullwidth(value) {
+        this.args.fullwidth = !!value;
+    }
+
     /**
      * Merges a setting into this setting without emitting events (and therefore synchronously).
      * This only exists for use by the constructor and SettingsCategory.
@@ -234,8 +258,4 @@ export default class Setting {
         }
     }
 
-    on(...args) { return this.emitter.on(...args); }
-    off(...args) { return this.emitter.removeListener(...args); }
-    emit(...args) { return this.emitter.emit(...args); }
-
 }
diff --git a/common/modules/async-eventemitter.js b/common/modules/async-eventemitter.js
index 170f4dd9..be173698 100644
--- a/common/modules/async-eventemitter.js
+++ b/common/modules/async-eventemitter.js
@@ -58,4 +58,11 @@ export default class AsyncEventEmitter extends EventEmitter {
         });
     }
 
+    /**
+     * Unbinds an event listener.
+     */
+    off(event, callback) {
+        this.removeListener(event, callback);
+    }
+
 }

From 5331afb763b7f0d545956c78f6edc51099297ef5 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 00:45:14 +0100
Subject: [PATCH 15/42] Tweak card styles and use events

---
 client/src/modules/patcher.js                   |  2 +-
 client/src/styles/partials/bdsettings/card.scss | 17 +++++++----------
 .../styles/partials/bdsettings/contentview.scss |  1 +
 client/src/ui/components/bd/PluginCard.vue      | 13 +++++++------
 client/src/ui/components/bd/PluginsView.vue     |  2 +-
 client/src/ui/components/bd/ThemeCard.vue       | 14 ++++++++------
 client/src/ui/components/bd/ThemesView.vue      |  2 +-
 .../ui/components/bd/modals/SettingsModal.vue   |  4 ++--
 8 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/client/src/modules/patcher.js b/client/src/modules/patcher.js
index ac4d19b7..b4891842 100644
--- a/client/src/modules/patcher.js
+++ b/client/src/modules/patcher.js
@@ -45,7 +45,7 @@ export class Patcher {
 
     static overrideFn(patch) {
         return function () {
-            let retVal = null;
+            let retVal = undefined;
             if (!patch.children) return patch.originalFunction.apply(this, arguments);
             for (const superPatch of patch.children.filter(c => c.type === 'before')) {
                 try {
diff --git a/client/src/styles/partials/bdsettings/card.scss b/client/src/styles/partials/bdsettings/card.scss
index ce2982c8..3a1e7b3e 100644
--- a/client/src/styles/partials/bdsettings/card.scss
+++ b/client/src/styles/partials/bdsettings/card.scss
@@ -4,13 +4,13 @@
     flex-grow: 1;
     background: transparent;
     border-bottom: 1px solid rgba(114, 118, 126, 0.3);
-    padding: 10px 5px;
     min-height: 150px;
     color: #b9bbbe;
-    margin-top: 10px;
+    margin-top: 20px;
+    padding-bottom: 20px;
 
     .bd-card-header {
-        padding-bottom: 5px;
+        margin-bottom: 15px;
         display: flex;
         flex-grow: 0;
         font-weight: 700;
@@ -37,20 +37,15 @@
 
         .bd-card-description {
             flex-grow: 1;
-            overflow-y: auto;
-            max-height: 60px;
             min-height: 60px;
             color: #8a8c90;
             font-size: 12px;
             font-weight: 600;
-            padding: 5px;
-            border-radius: 8px;
-            margin-top: 5px;
+            margin-bottom: 5px;
         }
 
         .bd-card-footer {
             display: flex;
-            flex-grow: 1;
             align-items: flex-end;
 
             .bd-card-extra {
@@ -61,9 +56,11 @@
             }
 
             .bd-controls {
+                margin-left: 15px;
+
                 .bd-button-group {
                     .bd-button {
-                        fill: #FFF;
+                        fill: #fff;
                         width: 30px;
                         height: 30px;
                     }
diff --git a/client/src/styles/partials/bdsettings/contentview.scss b/client/src/styles/partials/bdsettings/contentview.scss
index 090c9966..6035a105 100644
--- a/client/src/styles/partials/bdsettings/contentview.scss
+++ b/client/src/styles/partials/bdsettings/contentview.scss
@@ -3,6 +3,7 @@
     .bd-online-ph {
         display: flex;
         flex-direction: column;
+        margin: 10% 0;
 
         h3 {
             color: #fff;
diff --git a/client/src/ui/components/bd/PluginCard.vue b/client/src/ui/components/bd/PluginCard.vue
index 5c60f896..d36691db 100644
--- a/client/src/ui/components/bd/PluginCard.vue
+++ b/client/src/ui/components/bd/PluginCard.vue
@@ -10,12 +10,12 @@
 
 <template>
     <Card :item="plugin">
-        <SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="togglePlugin" />
+        <SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="$emit('toggle-plugin')" />
         <ButtonGroup slot="controls">
-            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" @click="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
-            <Button v-tooltip="'Reload'" @click="reloadPlugin"><MiRefresh size="18" /></Button>
+            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" @click="$emit('show-settings', $event.shiftKey)"><MiSettings size="18" /></Button>
+            <Button v-tooltip="'Reload'" @click="$emit('reload-plugin')"><MiRefresh size="18" /></Button>
             <Button v-tooltip="'Edit'" @click="editPlugin"><MiPencil size="18" /></Button>
-            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="e => deletePlugin(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
+            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="$emit('delete-plugin', $event.shiftKey)" type="err"><MiDelete size="18" /></Button>
         </ButtonGroup>
     </Card>
 </template>
@@ -28,9 +28,10 @@
     import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
 
     export default {
-        props: ['plugin', 'togglePlugin', 'reloadPlugin', 'deletePlugin', 'showSettings'],
+        props: ['plugin'],
         components: {
-            Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+            Card, Button, ButtonGroup, SettingSwitch,
+            MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
         },
         methods: {
             editPlugin() {
diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index 1390b8b1..4ca5d23a 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -23,7 +23,7 @@
 
         <div class="bd-flex bd-flex-col bd-pluginsview">
             <div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-plugins-container bd-local-plugins">
-                <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :togglePlugin="() => togglePlugin(plugin)" :reloadPlugin="() => reloadPlugin(plugin)" :deletePlugin="unload => deletePlugin(plugin, unload)" :showSettings="dont_clone => showSettings(plugin, dont_clone)" />
+                <PluginCard v-for="plugin in localPlugins" :plugin="plugin" :key="plugin.id" :data-plugin-id="plugin.id" @toggle-plugin="togglePlugin(plugin)" @reload-plugin="reloadPlugin(plugin)" @delete-plugin="unload => deletePlugin(plugin, unload)" @show-settings="dont_clone => showSettings(plugin, dont_clone)" />
             </div>
             <div v-if="!local" class="bd-online-ph">
                 <h3>Coming Soon</h3>
diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index a39a6059..3e2c0d19 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -10,15 +10,16 @@
 
 <template>
     <Card :item="theme">
-        <SettingSwitch slot="toggle" :value="theme.enabled" @input="toggleTheme" />
+        <SettingSwitch slot="toggle" :value="theme.enabled" @input="$emit('toggle-theme')" />
         <ButtonGroup slot="controls">
-            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" @click="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
-            <Button v-tooltip="'Recompile (shift + click to reload)'" @click="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>
+            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" @click="$emit('show-settings', $event.shiftKey)"><MiSettings size="18" /></Button>
+            <Button v-tooltip="'Recompile (shift + click to reload)'" @click="$emit('reload-theme', $event.shiftKey)"><MiRefresh size="18" /></Button>
             <Button v-tooltip="'Edit'" @click="editTheme"><MiPencil size="18" /></Button>
-            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="e => deleteTheme(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
+            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="$emit('delete-theme', $event.shiftKey)" type="err"><MiDelete size="18" /></Button>
         </ButtonGroup>
     </Card>
 </template>
+
 <script>
     // Imports
     import { shell } from 'electron';
@@ -26,9 +27,10 @@
     import { Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension } from '../common';
 
     export default {
-        props: ['theme', 'toggleTheme', 'reloadTheme', 'deleteTheme', 'showSettings'],
+        props: ['theme'],
         components: {
-            Card, Button, ButtonGroup, SettingSwitch, MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
+            Card, Button, ButtonGroup, SettingSwitch,
+            MiSettings, MiRefresh, MiPencil, MiDelete, MiExtension
         },
         methods: {
             editTheme() {
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index d08fbe21..db3726bd 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -23,7 +23,7 @@
 
         <div class="bd-flex bd-flex-col bd-themesview">
             <div v-if="local" class="bd-flex bd-flex-grow bd-flex-col bd-themes-container bd-local-themes">
-                <ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :toggleTheme="() => toggleTheme(theme)" :reloadTheme="reload => reloadTheme(theme, reload)" :showSettings="dont_clone => showSettings(theme, dont_clone)" :deleteTheme="unload => deleteTheme(theme, unload)" />
+                <ThemeCard v-for="theme in localThemes" :theme="theme" :key="theme.id" :data-theme-id="theme.id" @toggle-theme="toggleTheme(theme)" @reload-theme="reload => reloadTheme(theme, reload)" @show-settings="dont_clone => showSettings(theme, dont_clone)" @delete-theme="unload => deleteTheme(theme, unload)" />
             </div>
             <div v-if="!local" class="bd-online-ph">
                 <h3>Coming Soon</h3>
diff --git a/client/src/ui/components/bd/modals/SettingsModal.vue b/client/src/ui/components/bd/modals/SettingsModal.vue
index 3d6c3e81..24e89da8 100644
--- a/client/src/ui/components/bd/modals/SettingsModal.vue
+++ b/client/src/ui/components/bd/modals/SettingsModal.vue
@@ -70,13 +70,13 @@
             }
         },
         created() {
-            this.modal.beforeClose = force => {
+            this.modal.on('close', force => {
                 if (this.changed && !force) {
                     this.warnclose = true;
                     setTimeout(() => this.warnclose = false, 400);
                     throw {message: 'Settings have been changed'};
                 }
-            };
+            });
 
             this.modal.settings.on('settings-updated', this.cloneSettings);
             this.cloneSettings();

From 68af931128da69218efdf649f60e355800304d8b Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 00:46:05 +0100
Subject: [PATCH 16/42] Record plugin/theme load/start/stop timestamp

---
 client/src/modules/content.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client/src/modules/content.js b/client/src/modules/content.js
index 13b49b90..854761a6 100644
--- a/client/src/modules/content.js
+++ b/client/src/modules/content.js
@@ -17,6 +17,10 @@ export default class Content extends AsyncEventEmitter {
     constructor(internals) {
         super();
 
+        internals.loaded = Date.now();
+        internals.started = undefined;
+        internals.stopped = undefined;
+
         Utils.deepfreeze(internals.info);
         Object.freeze(internals.paths);
 
@@ -51,6 +55,9 @@ export default class Content extends AsyncEventEmitter {
     get description() { return this.info.description }
     get authors() { return this.info.authors }
     get version() { return this.info.version }
+    get loadedTimestamp() { return this.__internals.loaded }
+    get startedTimestamp() { return this.__internals.started }
+    get stoppedTimestamp() { return this.__internals.stopped }
     get contentPath() { return this.paths.contentPath }
     get dirName() { return this.paths.dirName }
     get enabled() { return this.userConfig.enabled }
@@ -111,6 +118,8 @@ export default class Content extends AsyncEventEmitter {
         await this.emit('enable');
         await this.emit('start');
 
+        this.__internals.started = Date.now();
+        this.__internals.stopped = undefined;
         this.userConfig.enabled = true;
         if (save) await this.saveConfiguration();
     }
@@ -125,6 +134,8 @@ export default class Content extends AsyncEventEmitter {
         await this.emit('stop');
         await this.emit('disable');
 
+        this.__internals.started = undefined;
+        this.__internals.stopped = Date.now();
         this.userConfig.enabled = false;
         if (save) await this.saveConfiguration();
     }

From 74d78f4bca4a4e46e996c8a07e2c398c392431e8 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 00:47:25 +0100
Subject: [PATCH 17/42] Remove old monkey patch

---
 client/src/modules/pluginapi.js |   7 +-
 common/modules/monkeypatch.js   | 169 --------------------------------
 common/modules/utils.js         |  85 ----------------
 3 files changed, 3 insertions(+), 258 deletions(-)
 delete mode 100644 common/modules/monkeypatch.js

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index eb0499e8..f8745b96 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -83,14 +83,13 @@ export default class PluginApi {
     get Utils() {
         return {
             overload: () => Utils.overload.apply(Utils, arguments),
-            monkeyPatch: () => Utils.monkeyPatch.apply(Utils, arguments),
-            monkeyPatchOnce: () => Utils.monkeyPatchOnce.apply(Utils, arguments),
-            compatibleMonkeyPatch: () => Utils.monkeyPatchOnce.apply(Utils, arguments),
             tryParseJson: () => Utils.tryParseJson.apply(Utils, arguments),
             toCamelCase: () => Utils.toCamelCase.apply(Utils, arguments),
             compare: () => Utils.compare.apply(Utils, arguments),
             deepclone: () => Utils.deepclone.apply(Utils, arguments),
-            deepfreeze: () => Utils.deepfreeze.apply(Utils, arguments)
+            deepfreeze: () => Utils.deepfreeze.apply(Utils, arguments),
+            removeFromArray: () => Utils.removeFromArray.apply(Utils, arguments),
+            defineSoftGetter: () => Utils.defineSoftGetter.apply(Utils, arguments)
         };
     }
 
diff --git a/common/modules/monkeypatch.js b/common/modules/monkeypatch.js
deleted file mode 100644
index a7fe0da0..00000000
--- a/common/modules/monkeypatch.js
+++ /dev/null
@@ -1,169 +0,0 @@
-/**
- * BetterDiscord Monkeypatch
- * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
- * All rights reserved.
- * https://betterdiscord.net
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
-*/
-
-import { ClientLogger as Logger } from './logger';
-
-const patchedFunctions = new WeakMap();
-
-export class PatchedFunction {
-    constructor(object, methodName, replaceOriginal = true) {
-        if (patchedFunctions.has(object[methodName])) {
-            const patchedFunction = patchedFunctions.get(object[methodName]);
-            if (replaceOriginal) patchedFunction.replaceOriginal();
-            return patchedFunction;
-        }
-
-        this.object = object;
-        this.methodName = methodName;
-        this.patches = [];
-        this.originalMethod = object[methodName];
-        this.replaced = false;
-
-        const patchedFunction = this;
-        this.replace = function(...args) {
-            patchedFunction.call(this, arguments);
-        };
-
-        patchedFunctions.set(object[methodName], this);
-        patchedFunctions.set(this.replace, this);
-
-        if (replaceOriginal)
-            this.replaceOriginal();
-    }
-
-    addPatch(patch) {
-        if (!this.patches.includes(patch))
-            this.patches.push(patch);
-    }
-
-    removePatch(patch, restoreOriginal = true) {
-        let i = 0;
-        while (this.patches[i]) {
-            if (this.patches[i] !== patch) i++;
-            else this.patches.splice(i, 1);
-        }
-
-        if (!this.patches.length && restoreOriginal)
-            this.restoreOriginal();
-    }
-
-    replaceOriginal() {
-        if (this.replaced) return;
-        this.object[this.methodName] = Object.assign(this.replace, this.object[this.methodName]);
-        this.replaced = true;
-    }
-
-    restoreOriginal() {
-        if (!this.replaced) return;
-        this.object[this.methodName] = Object.assign(this.object[this.methodName], this.replace);
-        this.replaced = false;
-    }
-
-    call(_this, args) {
-        const data = {
-            this: _this,
-            arguments: args,
-            return: undefined,
-            originalMethod: this.originalMethod,
-            callOriginalMethod: () => {
-                Logger.log('MonkeyPatch', [`Calling original method`, this, data]);
-                data.return = this.originalMethod.apply(data.this, data.arguments);
-            }
-        };
-
-        // Work through the patches calling each patch's hooks as if each patch had overridden the previous patch
-        for (let patch of this.patches) {
-            let callOriginalMethod = data.callOriginalMethod;
-            data.callOriginalMethod = () => {
-                const patch_data = Object.assign({}, data, {
-                    callOriginalMethod, patch
-                });
-                patch.call(patch_data);
-                data.arguments = patch_data.arguments;
-                data.return = patch_data.return;
-            };
-        }
-
-        data.callOriginalMethod();
-        return data.return;
-    }
-}
-
-export class Patch {
-    constructor(patchedFunction, options, f) {
-        this.patchedFunction = patchedFunction;
-
-        if (options instanceof Function) {
-            f = options;
-            options = {
-                instead: data => {
-                    f.call(this, data, ...data.arguments);
-                }
-            };
-        } else if (options === 'before') {
-            options = {
-                before: data => {
-                    f.call(this, data, ...data.arguments);
-                }
-            };
-        } else if (options === 'after') {
-            options = {
-                after: data => {
-                    f.call(this, data, ...data.arguments);
-                }
-            };
-        }
-
-        this.before = options.before || undefined;
-        this.instead = options.instead || undefined;
-        this.after = options.after || undefined;
-        this.once = options.once || false;
-        this.silent = options.silent || false;
-        this.suppressErrors = typeof options.suppressErrors === 'boolean' ? options.suppressErrors : true;
-    }
-
-    call(data) {
-        if (this.once)
-            this.cancel();
-
-        this.callBefore(data);
-        this.callInstead(data);
-        this.callAfter(data);
-    }
-
-    callBefore(data) {
-        if (this.before)
-            this.callHook('before', this.before, data);
-    }
-
-    callInstead(data) {
-        if (this.instead)
-            this.callHook('instead', this.instead, data);
-        else data.callOriginalMethod();
-    }
-
-    callAfter(data) {
-        if (this.after)
-            this.callHook('after', this.after, data);
-    }
-
-    callHook(hook, f, data) {
-        try {
-            f.call(this, data, ...data.arguments);
-        } catch (err) {
-            Logger.log('MonkeyPatch', [`Error thrown in ${hook} hook of`, this, '- :', err]);
-            if (!this.suppressErrors) throw err;
-        }
-    }
-
-    cancel() {
-        this.patchedFunction.removePatch(this);
-    }
-}
diff --git a/common/modules/utils.js b/common/modules/utils.js
index 07b46bbf..9e639b9f 100644
--- a/common/modules/utils.js
+++ b/common/modules/utils.js
@@ -8,7 +8,6 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { PatchedFunction, Patch } from './monkeypatch';
 import path from 'path';
 import fs from 'fs';
 import _ from 'lodash';
@@ -23,90 +22,6 @@ export class Utils {
         }
     }
 
-    /**
-     * Monkey-patches an object's method.
-     * @param {Object} object The object containing the function to monkey patch
-     * @param {String} methodName The name of the method to monkey patch
-     * @param {Object|String|Function} options Options to pass to the Patch constructor
-     * @param {Function} function If {options} is either "before" or "after", this function will be used as that hook
-     */
-    static monkeyPatch(object, methodName, options, f) {
-        const patchedFunction = new PatchedFunction(object, methodName);
-        const patch = new Patch(patchedFunction, options, f);
-        patchedFunction.addPatch(patch);
-        return patch;
-    }
-
-    /**
-     * Monkey-patches an object's method and returns a promise that will be resolved with the data object when the method is called.
-     * This can only be used to get the arguments and return data. If you want to change anything, call Utils.monkeyPatch with the once option set to true.
-     */
-    static monkeyPatchOnce(object, methodName) {
-        return new Promise((resolve, reject) => {
-            this.monkeyPatch(object, methodName, 'after', data => {
-                data.patch.cancel();
-                resolve(data);
-            });
-        });
-    }
-
-    /**
-     * Monkey-patches an object's method and returns a promise that will be resolved with the data object when the method is called.
-     * You will have to call data.callOriginalMethod() if you wants the original method to be called.
-     */
-    static monkeyPatchAsync(object, methodName, callback) {
-        return new Promise((resolve, reject) => {
-            this.monkeyPatch(object, methodName, data => {
-                data.patch.cancel();
-
-                data.promise = data.return = callback ? Promise.all(callback.call(global, data, ...data.arguments)) : new Promise((resolve, reject) => {
-                    data.resolve = resolve;
-                    data.reject = reject;
-                });
-
-                resolve(data);
-            });
-        });
-    }
-
-    /**
-     * Monkeypatch function that is compatible with samogot's Lib Discord Internals.
-     * Don't use this for writing new plugins as it will eventually be removed!
-     */
-    static compatibleMonkeyPatch(what, methodName, options) {
-        const { before, instead, after, once = false, silent = false } = options;
-        const cancelPatch = () => patch.cancel();
-
-        const compatible_function = _function => data => {
-            const compatible_data = {
-                thisObject: data.this,
-                methodArguments: data.arguments,
-                returnValue: data.return,
-                cancelPatch,
-                originalMethod: data.originalMethod,
-                callOriginalMethod: () => data.callOriginalMethod()
-            };
-            try {
-                _function(compatible_data);
-                data.arguments = compatible_data.methodArguments;
-                data.return = compatible_data.returnValue;
-            } catch (err) {
-                data.arguments = compatible_data.methodArguments;
-                data.return = compatible_data.returnValue;
-                throw err;
-            }
-        };
-
-        const patch = this.monkeyPatch(what, methodName, {
-            before: !instead && before ? compatible_function(before) : undefined,
-            instead: instead ? compatible_function(instead) : undefined,
-            after: !instead && after ? compatible_function(after) : undefined,
-            once
-        });
-
-        return cancelPatch;
-    }
-
     /**
      * Attempts to parse a string as JSON.
      * @param {String} json The string to parse

From d2cbbd309bb95de5e264f16d673c71f7eff98007 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 00:50:03 +0100
Subject: [PATCH 18/42] Fix plugin/themes view not updating after reloading
 content

---
 client/src/modules/contentmanager.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/modules/contentmanager.js b/client/src/modules/contentmanager.js
index 88771d21..2cbdd863 100644
--- a/client/src/modules/contentmanager.js
+++ b/client/src/modules/contentmanager.js
@@ -245,10 +245,9 @@ export default class {
             if (!reload && this.getContentById(content.id))
                 throw {message: `A ${this.contentType} with the ID ${content.id} already exists.`};
 
-            if (reload) this.localContent[index] = content;
+            if (reload) this.localContent.splice(index, 1, content);
             else this.localContent.push(content);
             return content;
-
         } catch (err) {
             throw err;
         }

From f28525129e9381d243e5c18e8c920fadc25a7fd7 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 01:03:13 +0100
Subject: [PATCH 19/42] Add menu API

---
 client/src/index.js                            |  4 ++--
 client/src/modules/pluginapi.js                | 15 +++++++++------
 client/src/ui/bdmenu.js                        | 18 ++++++++++++++++--
 client/src/ui/bdui.js                          |  6 +++---
 client/src/ui/components/BdSettings.vue        |  7 +++++--
 client/src/ui/components/BdSettingsWrapper.vue |  2 ++
 client/src/ui/ui.js                            |  2 +-
 7 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/client/src/index.js b/client/src/index.js
index 759ed8ce..e5867217 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { DOM, BdUI, Modals, Reflection } from 'ui';
+import { DOM, BdUI, BdMenu, Modals, Reflection } from 'ui';
 import BdCss from './styles/index.scss';
 import { Events, CssEditor, Globals, Settings, Database, Updater, ModuleManager, PluginManager, ThemeManager, ExtModuleManager, Vendor, WebpackModules, Patcher, MonkeyPatch, ReactComponents, ReactAutoPatcher, DiscordApi } from 'modules';
 import { ClientLogger as Logger, ClientIPC, Utils } from 'common';
@@ -26,7 +26,7 @@ class BetterDiscord {
         Logger.log('main', 'BetterDiscord starting');
 
         this._bd = {
-            DOM, BdUI, Modals, Reflection,
+            DOM, BdUI, BdMenu, Modals, Reflection,
 
             Events, CssEditor, Globals, Settings, Database, Updater,
             ModuleManager, PluginManager, ThemeManager, ExtModuleManager,
diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index f8745b96..d01288ad 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -17,7 +17,7 @@ import Events from './events';
 import EventsWrapper from './eventswrapper';
 import { WebpackModules } from './webpackmodules';
 import { SettingsSet, SettingsCategory, Setting, SettingsScheme } from 'structs';
-import { BdMenuItems, Modals, DOM, Reflection } from 'ui';
+import { BdMenu, Modals, DOM, Reflection } from 'ui';
 import DiscordApi from './discordapi';
 import { ReactComponents } from './reactcomponents';
 import { Patcher, MonkeyPatch } from './patcher';
@@ -137,6 +137,9 @@ export default class PluginApi {
 
     get BdMenu() {
         return {
+            open: BdMenu.open.bind(BdMenu),
+            close: BdMenu.close.bind(BdMenu),
+            items: this.BdMenuItems,
             BdMenuItems: this.BdMenuItems
         };
     }
@@ -149,23 +152,23 @@ export default class PluginApi {
         return this._menuItems || (this._menuItems = []);
     }
     addMenuItem(item) {
-        return BdMenuItems.add(item);
+        return BdMenu.items.add(item);
     }
     addMenuSettingsSet(category, set, text) {
-        const item = BdMenuItems.addSettingsSet(category, set, text);
+        const item = BdMenu.items.addSettingsSet(category, set, text);
         return this.menuItems.push(item);
     }
     addMenuVueComponent(category, text, component) {
-        const item = BdMenuItems.addVueComponent(category, text, component);
+        const item = BdMenu.items.addVueComponent(category, text, component);
         return this.menuItems.push(item);
     }
     removeMenuItem(item) {
-        BdMenuItems.remove(item);
+        BdMenu.items.remove(item);
         Utils.removeFromArray(this.menuItems, item);
     }
     removeAllMenuItems() {
         for (let item of this.menuItems)
-            BdMenuItems.remove(item);
+            BdMenu.items.remove(item);
     }
     get BdMenuItems() {
         return Object.defineProperty({
diff --git a/client/src/ui/bdmenu.js b/client/src/ui/bdmenu.js
index 6ee898e4..01bee667 100644
--- a/client/src/ui/bdmenu.js
+++ b/client/src/ui/bdmenu.js
@@ -11,10 +11,25 @@
 import { Events } from 'modules';
 import { Utils } from 'common';
 
+export default new class {
+
+    open(item) {
+        Events.emit('bd-open-menu', item);
+    }
+
+    close() {
+        Events.emit('bd-close-menu');
+    }
+
+    get items() {
+        return BdMenuItems;
+    }
+
+}
+
 let items = 0;
 
 export const BdMenuItems = new class {
-
     constructor() {
         window.bdmenu = this;
 
@@ -85,5 +100,4 @@ export const BdMenuItems = new class {
     remove(item) {
         Utils.removeFromArray(this.items, item);
     }
-
 };
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index 458fcf12..47e3667f 100644
--- a/client/src/ui/bdui.js
+++ b/client/src/ui/bdui.js
@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { Events, WebpackModules, DiscordApi } from 'modules';
+import { Events, WebpackModules, DiscordApi, MonkeyPatch } from 'modules';
 import { Utils } from 'common';
 import { remote } from 'electron';
 import DOM from './dom';
@@ -30,10 +30,10 @@ export default class {
             if (!this.profilePopupModule) return;
             clearInterval(defer);
 
-            /*Utils.monkeyPatch(this.profilePopupModule, 'open', 'after', (data, userid) => Events.emit('ui-event', {
+            MonkeyPatch('BdUI', this.profilePopupModule).after('open', (context, [userid]) => Events.emit('ui-event', {
                 event: 'profile-popup-open',
                 data: { userid }
-            }));*/
+            }));
         }, 100);
 
         const ehookInterval = setInterval(() => {
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index c1e297fd..5f09d7d6 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -58,9 +58,9 @@
 
 <script>
     // Imports
-    import { shell } from 'electron';
-    import { Settings } from 'modules';
+    import { Events, Settings } from 'modules';
     import { BdMenuItems } from 'ui';
+    import { shell } from 'electron';
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
     import { SettingsWrapper, SettingsPanel, CssEditorView, PluginsView, ThemesView, UpdaterView } from './bd';
     import { SvgX, MiGithubCircle, MiWeb, MiClose, MiTwitterCircle } from './common';
@@ -151,6 +151,9 @@
                 if (active) return;
                 this.closeContent();
             }
+        },
+        created() {
+            Events.on('bd-open-menu', item => item && this.itemOnClick(this.sidebarItems.find(i => i === item || i.id === item || i.contentid === item || i.set === item).id));
         }
     }
 </script>
diff --git a/client/src/ui/components/BdSettingsWrapper.vue b/client/src/ui/components/BdSettingsWrapper.vue
index f050d886..323acdfc 100644
--- a/client/src/ui/components/BdSettingsWrapper.vue
+++ b/client/src/ui/components/BdSettingsWrapper.vue
@@ -62,6 +62,8 @@
         },
         created() {
             Events.on('ready', e => this.loaded = true);
+            Events.on('bd-open-menu', item => this.active = true);
+            Events.on('bd-close-menu', () => this.active = false);
             Events.on('update-check-start', e => this.updating = 0);
             Events.on('update-check-end', e => this.updating = 1);
             Events.on('updates-available', e => this.updating = 2);
diff --git a/client/src/ui/ui.js b/client/src/ui/ui.js
index 8c2b0283..3fa0513b 100644
--- a/client/src/ui/ui.js
+++ b/client/src/ui/ui.js
@@ -1,7 +1,7 @@
 export { default as DOM } from './dom';
 export { default as BdUI } from './bdui';
 export { default as VueInjector } from './vueinjector';
-export * from './bdmenu';
+export { default as BdMenu, BdMenuItems } from './bdmenu';
 export { default as Modals } from './modals';
 export { default as ProfileBadges } from './profilebadges';
 export { default as Reflection } from './reflection';

From f8a380fd5909e01f91ee1bee48456f8d01ed0b71 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 01:10:33 +0100
Subject: [PATCH 20/42] Add more advanced content authors (links to Discord
 profile, GitHub, Twitter, etc)

---
 .../src/styles/partials/bdsettings/card.scss  | 19 ++++++
 .../styles/partials/bdsettings/tooltips.scss  | 41 +++++++++--
 client/src/styles/partials/layouts.scss       |  4 ++
 client/src/ui/components/bd/Card.vue          | 11 ++-
 client/src/ui/components/bd/ContentAuthor.vue | 68 +++++++++++++++++++
 .../src/ui/components/common/MaterialIcon.js  |  1 +
 .../common/materialicons/Discord.vue          | 28 ++++++++
 client/src/ui/vue.js                          | 10 ++-
 tests/ext/plugins/Example 2/config.json       | 19 +++---
 tests/ext/plugins/Example 3/config.json       | 18 ++++-
 tests/ext/plugins/Example 4/config.json       |  8 ++-
 tests/ext/plugins/Example/config.json         | 36 +++++++---
 tests/ext/plugins/Patcher Test/config.json    | 13 ++--
 tests/ext/plugins/Permission Test/config.json | 13 ++--
 14 files changed, 249 insertions(+), 40 deletions(-)
 create mode 100644 client/src/ui/components/bd/ContentAuthor.vue
 create mode 100644 client/src/ui/components/common/materialicons/Discord.vue

diff --git a/client/src/styles/partials/bdsettings/card.scss b/client/src/styles/partials/bdsettings/card.scss
index 3a1e7b3e..43a9c15a 100644
--- a/client/src/styles/partials/bdsettings/card.scss
+++ b/client/src/styles/partials/bdsettings/card.scss
@@ -79,3 +79,22 @@
         }
     }
 }
+
+.bd-content-author {
+    .bd-content-author-link {
+        cursor: pointer;
+
+        &:hover {
+            color: $coldimwhite;
+        }
+    }
+}
+
+.bd-content-author-links {
+    padding: 3px 5px;
+
+    .bd-popover-inner > :first-child {
+        display: flex;
+        flex-direction: row;
+    }
+}
diff --git a/client/src/styles/partials/bdsettings/tooltips.scss b/client/src/styles/partials/bdsettings/tooltips.scss
index f8db8cd2..241cc455 100644
--- a/client/src/styles/partials/bdsettings/tooltips.scss
+++ b/client/src/styles/partials/bdsettings/tooltips.scss
@@ -6,7 +6,8 @@ bd-tooltips {
     z-index: 9001;
 }
 
-.bd-tooltip {
+.bd-tooltip,
+.bd-popover {
     background-color: #000;
     border-radius: 5px;
     box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
@@ -20,9 +21,13 @@ bd-tooltips {
     word-wrap: break-word;
     z-index: 9001;
 
-    .bd-tooltip-arrow {
+    &::after {
+        content: none;
+    }
+
+    .bd-tooltip-arrow,
+    .bd-popover-arrow {
         border: 5px solid transparent;
-        content: " ";
         height: 0;
         pointer-events: none;
         width: 0;
@@ -32,7 +37,8 @@ bd-tooltips {
     &[x-placement^="top"] {
         margin-bottom: 10px;
 
-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
             margin-left: -5px;
             border-top-color: #000;
             bottom: -10px;
@@ -42,7 +48,8 @@ bd-tooltips {
     &[x-placement^="bottom"] {
         margin-top: 10px;
 
-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
             border-width: 0 5px 5px 5px;
             top: -5px;
             border-bottom-color: #000;
@@ -52,7 +59,8 @@ bd-tooltips {
     &[x-placement^="right"] {
         margin-left: 10px;
 
-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
             border-width: 5px 5px 5px 0;
             left: -5px;
             border-right-color: #000;
@@ -62,10 +70,29 @@ bd-tooltips {
     &[x-placement^="left"] {
         margin-right: 10px;
 
-        .bd-tooltip-arrow {
+        .bd-tooltip-arrow,
+        .bd-popover-arrow {
             border-width: 5px 0 5px 5px;
             right: -5px;
             border-left-color: #000;
         }
     }
+
+    .bd-material-button {
+        cursor: pointer;
+
+        &:hover {
+            .bd-material-design-icon {
+                fill: #fff;
+            }
+        }
+    }
+
+    .bd-material-design-icon {
+        fill: #414245;
+
+        &:hover {
+            fill: #fff;
+        }
+    }
 }
diff --git a/client/src/styles/partials/layouts.scss b/client/src/styles/partials/layouts.scss
index 6165c0c9..f98edb6b 100644
--- a/client/src/styles/partials/layouts.scss
+++ b/client/src/styles/partials/layouts.scss
@@ -21,3 +21,7 @@
 .bd-hide {
     display: none;
 }
+
+.bd-inline {
+    display: inline;
+}
diff --git a/client/src/ui/components/bd/Card.vue b/client/src/ui/components/bd/Card.vue
index 08cb9000..5fbe7ede 100644
--- a/client/src/ui/components/bd/Card.vue
+++ b/client/src/ui/components/bd/Card.vue
@@ -21,9 +21,14 @@
         <div class="bd-card-body">
             <div class="bd-card-description">{{item.description}}</div>
             <div class="bd-card-footer">
-                <div class="bd-card-extra">v{{item.version}} by {{item.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
+                <div class="bd-card-extra">
+                    v{{item.version}} by
+                    <template v-for="(author, i) in item.authors">
+                        <ContentAuthor :author="author" :after="i === item.authors.length - 1 ? '' : i === item.authors.length - 2 ? ' and' : ','" />
+                    </template>
+                </div>
                 <div class="bd-controls">
-                    <slot name="controls"/>
+                    <slot name="controls" />
                 </div>
             </div>
         </div>
@@ -33,10 +38,12 @@
 <script>
     // Imports
     import { MiExtension } from '../common';
+    import ContentAuthor from './ContentAuthor.vue';
 
     export default {
         props: ['item'],
         components: {
+            ContentAuthor,
             MiExtension
         }
     }
diff --git a/client/src/ui/components/bd/ContentAuthor.vue b/client/src/ui/components/bd/ContentAuthor.vue
new file mode 100644
index 00000000..639e520c
--- /dev/null
+++ b/client/src/ui/components/bd/ContentAuthor.vue
@@ -0,0 +1,68 @@
+/**
+ * BetterDiscord Content Author Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <v-popover class="bd-content-author bd-inline" popoverClass="bd-popover bd-content-author-links" trigger="click" placement="top" :disabled="!hasLinks">
+        <!-- <template v-if="typeof author === 'string'">{{ author }}</template>
+        <a v-else-if="author.url" :href="author.url" @click="openLink">{{ author.name }}</a>
+        <a v-else-if="author.github_username" :href="'https://github.com/' + author.github_username" @click="openLink">{{ author.name }}</a>
+        <span v-else-if="author.discord_id" @click="openUserProfileModal(author.discord_id)">{{ author.name }}</span>
+        <template v-else>{{ author.name }}</template> -->
+
+        <span :class="{'bd-content-author-link': hasLinks}">{{ author.name || author }}</span><span v-text="after" @click.stop></span>
+
+        <template slot="popover">
+            <div v-if="author.discord_id" @click="openUserProfileModal(author.discord_id)" v-tooltip="author.discord_username || author.name" class="bd-material-button"><MiDiscord size="16" /></div>
+            <div v-if="author.github_username" @click="openGitHub" v-tooltip="author.github_username" class="bd-material-button"><MiGithubCircle size="16" /></div>
+            <div v-if="author.twitter_username" @click="openTwitter" v-tooltip="'@' + author.twitter_username" class="bd-material-button"><MiTwitterCircle size="16" /></div>
+            <div v-if="author.url" @click="openWebsite" v-tooltip="author.url" class="bd-material-button"><MiWeb size="16" /></div>
+        </template>
+    </v-popover>
+</template>
+
+<script>
+    // Imports
+    import { WebpackModules } from 'modules';
+    import { BdMenu } from 'ui';
+    import { shell } from 'electron';
+    import { MiGithubCircle, MiWeb, MiTwitterCircle, MiDiscord } from '../common';
+
+    export default {
+        props: ['author', 'after'],
+        components: {
+            MiGithubCircle, MiWeb, MiTwitterCircle, MiDiscord
+        },
+        computed: {
+            hasLinks() {
+                return this.author.discord_id || this.author.github_username || this.author.twitter_username || this.author.url;
+            }
+        },
+        methods: {
+            openLink(e) {
+                shell.openExternal(e.target.href);
+                e.preventDefault();
+            },
+            openUserProfileModal(discord_id) {
+                const UserProfileModal = WebpackModules.getModuleByProps(['fetchMutualFriends', 'setSection']);
+                UserProfileModal.open(discord_id);
+                BdMenu.close();
+            },
+            openGitHub() {
+                shell.openExternal(`https://github.com/${this.author.github_username}`);
+            },
+            openWebsite() {
+                shell.openExternal(this.author.url);
+            },
+            openTwitter() {
+                shell.openExternal(`https://twitter.com/${this.author.twitter_username}`);
+            }
+        }
+    }
+</script>
diff --git a/client/src/ui/components/common/MaterialIcon.js b/client/src/ui/components/common/MaterialIcon.js
index b68aea77..658cde63 100644
--- a/client/src/ui/components/common/MaterialIcon.js
+++ b/client/src/ui/components/common/MaterialIcon.js
@@ -12,3 +12,4 @@ export { default as MiPlus } from './materialicons/Plus.vue';
 export { default as MiChevronDown } from './materialicons/ChevronDown.vue';
 export { default as MiExtension } from './materialicons/Extension.vue';
 export { default as MiError } from './materialicons/Error.vue';
+export { default as MiDiscord } from './materialicons/Discord.vue';
diff --git a/client/src/ui/components/common/materialicons/Discord.vue b/client/src/ui/components/common/materialicons/Discord.vue
new file mode 100644
index 00000000..71d79a36
--- /dev/null
+++ b/client/src/ui/components/common/materialicons/Discord.vue
@@ -0,0 +1,28 @@
+/**
+ * BetterDiscord Material Design Icon
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+	        <path d="M 22,24L 16.75,19L 17.375,21L 4.5,21C 3.11929,21 2,19.8807 2,18.5L 2,3.5C 2,2.11929 3.11929,1 4.5,1L 19.5,1C 20.8807,1 22,2.11929 22,3.5L 22,24 Z M 12,6.8C 9.31508,6.8 7.4401,7.95052 7.4401,7.95052C 8.47135,7.02864 10.2682,6.48177 10.2682,6.48177L 10.0964,6.32552C 8.40885,6.35677 6.8776,7.52864 6.8776,7.52864C 5.15885,11.1224 5.26823,14.2161 5.26823,14.2161C 6.67448,16.0286 8.7526,15.9036 8.7526,15.9036L 9.45573,14.9974C 8.20572,14.7318 7.42448,13.6224 7.42448,13.6224C 7.42448,13.6224 9.29946,14.9 12,14.9C 14.7005,14.9 16.5755,13.6224 16.5755,13.6224C 16.5755,13.6224 15.7943,14.7318 14.5443,14.9974L 15.2474,15.9036C 15.2474,15.9036 17.3255,16.0286 18.7318,14.2161C 18.7318,14.2161 18.8411,11.1224 17.1224,7.52865C 17.1224,7.52865 15.5911,6.35677 13.9036,6.32552L 13.7318,6.48177C 13.7318,6.48177 15.5286,7.02865 16.5599,7.95052C 16.5599,7.95052 14.6849,6.80001 12,6.8 Z M 9.93143,10.5886C 10.5829,10.5886 11.1086,11.16 11.0971,11.8571C 11.0971,12.5543 10.5829,13.1257 9.93143,13.1257C 9.29143,13.1257 8.76571,12.5543 8.76571,11.8571C 8.76571,11.16 9.28,10.5886 9.93143,10.5886 Z M 14.1028,10.5886C 14.7543,10.5886 15.2686,11.16 15.2686,11.8572C 15.2686,12.5543 14.7543,13.1257 14.1028,13.1257C 13.4628,13.1257 12.9371,12.5543 12.9371,11.8572C 12.9371,11.16 13.4514,10.5886 14.1028,10.5886 Z " />
+        </svg>
+    </span>
+</template>
+
+<script>
+    export default {
+        props: ['size']
+    }
+</script>
diff --git a/client/src/ui/vue.js b/client/src/ui/vue.js
index 0ad489cb..571dec48 100644
--- a/client/src/ui/vue.js
+++ b/client/src/ui/vue.js
@@ -19,7 +19,15 @@ Vue.use(VTooltip, {
     defaultArrowSelector: '.bd-tooltip-arrow',
     defaultInnerSelector: '.bd-tooltip-inner',
     defaultTemplate: '<div class="bd-tooltip"><div class="bd-tooltip-arrow"></div><span class="bd-tooltip-inner"></span></div>',
-    defaultBoundariesElement: DOM.getElement('#app-mount')
+    defaultBoundariesElement: DOM.getElement('#app-mount'),
+    popover: {
+        defaultContainer: 'bd-tooltips',
+        defaultClass: 'bd-popover',
+        defaultWrapperClass: 'bd-popover-wrapper',
+        defaultInnerClass: 'bd-popover-inner',
+        defaultArrowClass: 'bd-popover-arrow',
+        defaultBoundariesElement: DOM.getElement('#app-mount')
+    }
 });
 
 export default Vue;
diff --git a/tests/ext/plugins/Example 2/config.json b/tests/ext/plugins/Example 2/config.json
index b3d27f90..7dafbd76 100644
--- a/tests/ext/plugins/Example 2/config.json	
+++ b/tests/ext/plugins/Example 2/config.json	
@@ -1,11 +1,10 @@
 {
-  "info": {
-    "name": "Example Plugin 2",
-    "authors": ["Jiiks"],
-    "version": 1.0,
-    "description": "Example Plugin 2 Description"
-  },
-    "main": "index.js",
-    "type": "plugin",
-    "defaultConfig": []
-}
\ No newline at end of file
+    "info": {
+        "name": "Example Plugin 2",
+        "authors": [
+            "Jiiks"
+        ],
+        "version": 1.0,
+        "description": "Example Plugin 2 Description"
+    }
+}
diff --git a/tests/ext/plugins/Example 3/config.json b/tests/ext/plugins/Example 3/config.json
index 6565e926..196b38e6 100644
--- a/tests/ext/plugins/Example 3/config.json	
+++ b/tests/ext/plugins/Example 3/config.json	
@@ -2,9 +2,23 @@
     "info": {
         "id": "example-plugin-3",
         "name": "Example Plugin 3",
-        "authors": [ "Samuel Elliott" ],
+        "authors": [
+            {
+                "name": "Samuel Elliott",
+                "url": "https://samuelelliott.ml",
+                "discord_id": "284056145272766465",
+                "github_username": "samuelthomas2774",
+                "twitter_username": "_samuelelliott"
+            },
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            }
+        ],
         "version": 1.0,
-        "description": "A plugin for testing BetterDiscord plugin exports"
+        "description": "A plugin for testing BetterDiscord plugin bridge."
     },
     "main": "index.js"
 }
diff --git a/tests/ext/plugins/Example 4/config.json b/tests/ext/plugins/Example 4/config.json
index 3f26c3aa..6c54c7f2 100644
--- a/tests/ext/plugins/Example 4/config.json	
+++ b/tests/ext/plugins/Example 4/config.json	
@@ -3,7 +3,13 @@
         "id": "example-plugin-4",
         "name": "Example Plugin 4",
         "authors": [
-            "Samuel Elliott"
+            {
+                "name": "Samuel Elliott",
+                "url": "https://samuelelliott.ml",
+                "discord_id": "284056145272766465",
+                "github_username": "samuelthomas2774",
+                "twitter_username": "_samuelelliott"
+            }
         ],
         "version": 1.0,
         "description": "Plugin for testing array setting events as the first example plugin has a lot of stuff in it now."
diff --git a/tests/ext/plugins/Example/config.json b/tests/ext/plugins/Example/config.json
index 92f6730c..88174af6 100644
--- a/tests/ext/plugins/Example/config.json
+++ b/tests/ext/plugins/Example/config.json
@@ -2,20 +2,38 @@
     "info": {
         "id": "example-plugin",
         "name": "Example Plugin",
-        "authors": [ "Jiiks" ],
+        "authors": [
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            },
+            {
+                "name": "Samuel Elliott",
+                "url": "https://samuelelliott.ml",
+                "discord_id": "284056145272766465",
+                "github_username": "samuelthomas2774",
+                "twitter_username": "_samuelelliott"
+            },
+            {
+                "name": "Mioni",
+                "discord_id": "418494039050944513"
+            },
+            "Just a string"
+        ],
         "version": 1.0,
         "description": "Example Plugin Description",
         "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg=="
     },
     "main": "index.js",
-    "type": "plugin",
     "dependencies": {
         "Example Module": "1.0"
     },
     "defaultConfig": [
         {
             "category_default_comment": "default category has no header and is always displayed first",
-            "category": "default",
+            "id": "default",
             "settings": [
                 {
                     "id": "array-1",
@@ -196,8 +214,8 @@
             ]
         },
         {
-            "category": "custom-settings",
-            "category_name": "Custom settings",
+            "id": "custom-settings",
+            "name": "Custom settings",
             "type": "drawer",
             "settings": [
                 {
@@ -249,8 +267,8 @@
         },
         {
             "category_header_comment": "Setting a category other than default has a header with category name as the text",
-            "category": "test-category",
-            "category_name": "Test Category",
+            "id": "test-category",
+            "name": "Test Category",
             "drawer_type_comment": "// Drawer type will create an expandable drawer for the settings",
             "type": "drawer",
             "settings": [
@@ -278,8 +296,8 @@
             ]
         },
         {
-            "category": "test-category-2",
-            "category_name": "Test Category 2 (static with header)",
+            "id": "test-category-2",
+            "name": "Test Category 2 (static with header)",
             "static_type_comment": "Static type will behave like default but will have a header",
             "type": "static",
             "settings": [
diff --git a/tests/ext/plugins/Patcher Test/config.json b/tests/ext/plugins/Patcher Test/config.json
index 3c8cc3a9..bcf5e5fd 100644
--- a/tests/ext/plugins/Patcher Test/config.json	
+++ b/tests/ext/plugins/Patcher Test/config.json	
@@ -2,11 +2,16 @@
     "info": {
         "id": "patcher-test",
         "name": "Patcher Test",
-        "authors": [ "Jiiks" ],
+        "authors": [
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            }
+        ],
         "version": 1.0,
         "description": "Patcher Test Description"
     },
-    "main": "index.js",
-    "type": "plugin",
-    "defaultConfig": []
+    "main": "index.js"
 }
diff --git a/tests/ext/plugins/Permission Test/config.json b/tests/ext/plugins/Permission Test/config.json
index 38ca802a..1de44cd1 100644
--- a/tests/ext/plugins/Permission Test/config.json	
+++ b/tests/ext/plugins/Permission Test/config.json	
@@ -2,15 +2,20 @@
     "info": {
         "id": "permission-test",
         "name": "Permission Test",
-        "authors": [ "Jiiks" ],
+        "authors": [
+            {
+                "name": "Jiiks",
+                "discord_id": "81388395867156480",
+                "github_username": "Jiiks",
+                "twitter_username": "Jiiksi"
+            }
+        ],
         "version": 1.0,
         "description": "Permission Test Description"
     },
     "main": "index.js",
-    "type": "plugin",
     "permissions": [
         "READ_MESSAGES",
         "SEND_MESSAGES"
-    ],
-    "defaultConfig": []
+    ]
 }

From 3f3898c774a61ae1711be1bd3373dd81abd3d25a Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 01:17:42 +0100
Subject: [PATCH 21/42] Add favourite emotes (no UI yet)

---
 client/src/builtin/EmoteComponent.vue | 27 +++++---
 client/src/builtin/EmoteModule.js     | 91 +++++++++++++++++++--------
 client/src/modules/settings.js        |  9 ++-
 3 files changed, 91 insertions(+), 36 deletions(-)

diff --git a/client/src/builtin/EmoteComponent.vue b/client/src/builtin/EmoteComponent.vue
index 60b4d6bf..1a98e763 100644
--- a/client/src/builtin/EmoteComponent.vue
+++ b/client/src/builtin/EmoteComponent.vue
@@ -1,20 +1,33 @@
 <template>
-    <span class="bd-emotewrapper" v-tooltip="name">
-        <img class="bd-emote" :src="src" :alt="`;${name};`" />
+    <span class="bd-emotewrapper" :class="{'bd-emote-favourite': favourite, 'bd-emote-no-wrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
+        <img class="bd-emote" :src="src" :alt="`;${name};`" @click="toggleFavourite" />
+
+        <span v-if="favourite" style="font-size: 12px;"> (favourite)</span>
     </span>
 </template>
 
 <script>
+    import { ClientLogger as Logger } from 'common';
+    import EmoteModule from './EmoteModule';
+
     export default {
         data() {
             return {
-                favourite: false
+                EmoteModule
             };
         },
-        props: ['src', 'name'],
-        methods: {},
-        beforeMount() {
-            // Check favourite state
+        props: ['src', 'name', 'hasWrapper'],
+        computed: {
+            favourite() {
+                return EmoteModule.isFavourite(this.name);
+            }
+        },
+        methods: {
+            async toggleFavourite() {
+                await EmoteModule.setFavourite(this.name, !this.favourite);
+                Logger.log('EmoteComponent', `Set emote ${this.name} as ${this.favourite ? '' : 'un'}favourite`);
+                this.$forceUpdate();
+            }
         }
     }
 </script>
diff --git a/client/src/builtin/EmoteModule.js b/client/src/builtin/EmoteModule.js
index 6de5693b..95b43241 100644
--- a/client/src/builtin/EmoteModule.js
+++ b/client/src/builtin/EmoteModule.js
@@ -8,42 +8,76 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { Events, Globals, WebpackModules, ReactComponents, MonkeyPatch } from 'modules';
+import { Events, Settings, Globals, WebpackModules, ReactComponents, MonkeyPatch } from 'modules';
 import { DOM, VueInjector, Reflection } from 'ui';
-import { FileUtils, ClientLogger as Logger } from 'common';
+import { Utils, FileUtils, ClientLogger as Logger } from 'common';
 import path from 'path';
 import EmoteComponent from './EmoteComponent.vue';
 
 let emotes = null;
 const emotesEnabled = true;
+const enforceWrapperFrom = (new Date('2018-05-01')).valueOf();
 
-export default class {
+export default new class EmoteModule {
 
-    static get searchCache() {
+    constructor() {
+        this.favourite_emotes = [];
+    }
+
+    /**
+     * Sets an emote as favourite.
+     * @param {String} emote The name of the emote
+     * @param {Boolean} favourite The new favourite state
+     * @param {Boolean} save Whether to save settings
+     * @return {Promise}
+     */
+    setFavourite(emote, favourite, save = true) {
+        if (favourite && !this.favourite_emotes.includes(emote)) this.favourite_emotes.push(emote);
+        if (!favourite) Utils.removeFromArray(this.favourite_emotes, emote);
+        if (save) return Settings.saveSettings();
+    }
+
+    addFavourite(emote, save = true) {
+        return this.setFavourite(emote, true, save);
+    }
+
+    removeFavourite(emote, save = true) {
+        return this.setFavourite(emote, false, save);
+    }
+
+    isFavourite(emote) {
+        return this.favourite_emotes.includes(emote);
+    }
+
+    get searchCache() {
         return this._searchCache || (this._searchCache = {});
     }
 
-    static get emoteDb() {
+    get emoteDb() {
         return emotes;
     }
 
-    static get React() {
+    get React() {
         return WebpackModules.getModuleByName('React');
     }
 
-    static get ReactDOM() {
+    get ReactDOM() {
         return WebpackModules.getModuleByName('ReactDOM');
     }
 
-    static processMarkup(markup) {
+    processMarkup(markup, timestamp) {
         if (!emotesEnabled) return markup; // TODO Get it from setttings
+
+        timestamp = timestamp.valueOf();
+        const allowNoWrapper = timestamp < enforceWrapperFrom;
+
         const newMarkup = [];
         for (const child of markup) {
-            if ('string' !== typeof child) {
+            if (typeof child !== 'string') {
                 newMarkup.push(child);
                 continue;
             }
-            if (!this.testWord(child)) {
+            if (!this.testWord(child) && !allowNoWrapper) {
                 newMarkup.push(child);
                 continue;
             }
@@ -57,7 +91,12 @@ export default class {
                         newMarkup.push(text);
                         text = null;
                     }
-                    newMarkup.push(this.React.createElement('span', { className: 'bd-emote-outer', 'data-bdemote-name': isEmote.name, 'data-bdemote-src': isEmote.src }));
+                    newMarkup.push(this.React.createElement('span', {
+                        className: 'bd-emote-outer',
+                        'data-bdemote-name': isEmote.name,
+                        'data-bdemote-src': isEmote.src,
+                        'data-has-wrapper': /;[\w]+;/gmi.test(word)
+                    }));
                     continue;
                 }
                 if (text === null) {
@@ -73,12 +112,11 @@ export default class {
         return newMarkup;
     }
 
-    static testWord(word) {
-        if (!/;[\w]+;/gmi.test(word)) return false;
-        return true;
+    testWord(word) {
+        return !/;[\w]+;/gmi.test(word);
     }
 
-    static injectAll() {
+    injectAll() {
         if (!emotesEnabled) return;
         const all = document.getElementsByClassName('bd-emote-outer');
         for (const ec of all) {
@@ -87,7 +125,7 @@ export default class {
         }
     }
 
-    static findByProp(obj, what, value) {
+    findByProp(obj, what, value) {
         if (obj.hasOwnProperty(what) && obj[what] === value) return obj;
         if (obj.props && !obj.children) return this.findByProp(obj.props, what, value);
         if (!obj.children || !obj.children.length) return null;
@@ -99,7 +137,7 @@ export default class {
         return null;
     }
 
-    static async observe() {
+    async observe() {
         const dataPath = Globals.getPath('data');
         try {
             emotes = await FileUtils.readJsonFromFile(path.join(dataPath, 'emotes.json'));
@@ -115,7 +153,8 @@ export default class {
                     // First child has all the actual text content, second is the edited timestamp
                     const markup = this.findByProp(retVal, 'className', 'markup');
                     if (!markup) return;
-                    markup.children[0] = this.processMarkup(markup.children[0]);
+                    Logger.log('EmoteModule', ['Message :', retVal, component]);
+                    markup.children[0] = this.processMarkup(markup.children[0], component.props.message.editedTimestamp || component.props.message.timestamp);
                 } catch (err) {
                     Logger.err('EmoteModule', err);
                 }
@@ -139,27 +178,27 @@ export default class {
         }
     }
 
-    static injectEmote(root) {
+    injectEmote(root) {
         if (!emotesEnabled) return;
         while (root.firstChild) {
             root.removeChild(root.firstChild);
         }
-        const { bdemoteName, bdemoteSrc } = root.dataset;
+        const { bdemoteName, bdemoteSrc, hasWrapper } = root.dataset;
         if (!bdemoteName || !bdemoteSrc) return;
         VueInjector.inject(root, {
             components: { EmoteComponent },
-            data: { src: bdemoteSrc, name: bdemoteName },
-            template: '<EmoteComponent :src="src" :name="name" />'
+            data: { src: bdemoteSrc, name: bdemoteName, hasWrapper },
+            template: '<EmoteComponent :src="src" :name="name" :hasWrapper="hasWrapper" />'
         }, DOM.createElement('span'));
         root.classList.add('bd-is-emote');
     }
 
-    static injectEmotes(element) {
+    injectEmotes(element) {
         if (!emotesEnabled || !element) return;
         for (const beo of element.getElementsByClassName('bd-emote-outer')) this.injectEmote(beo);
     }
 
-    static isEmote(word) {
+    isEmote(word) {
         if (!emotes) return null;
         const name = word.replace(/;/g, '');
         const emote = emotes.find(emote => emote.id === name);
@@ -170,13 +209,13 @@ export default class {
         return { name, src: uri.replace(':id', value) };
     }
 
-    static filterTest() {
+    filterTest() {
         const re = new RegExp('Kappa', 'i');
         const filtered = emotes.filter(emote => re.test(emote.id));
         return filtered.slice(0, 10);
     }
 
-    static filter(regex, limit, start = 0) {
+    filter(regex, limit, start = 0) {
         const key = `${regex}:${limit}:${start}`;
         if (this.searchCache.hasOwnProperty(key)) return this.searchCache[key];
         let index = 0;
diff --git a/client/src/modules/settings.js b/client/src/modules/settings.js
index 88d4269c..dc0e2e33 100644
--- a/client/src/modules/settings.js
+++ b/client/src/modules/settings.js
@@ -8,8 +8,9 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { Utils, FileUtils, ClientLogger as Logger } from 'common';
+import { EmoteModule } from 'builtin';
 import { SettingsSet, SettingUpdatedEvent } from 'structs';
+import { Utils, FileUtils, ClientLogger as Logger } from 'common';
 import path from 'path';
 import Globals from './globals';
 import CssEditor from './csseditor';
@@ -47,7 +48,7 @@ export default new class Settings {
 
             const settingsPath = path.resolve(this.dataPath, 'user.settings.json');
             const user_config = await FileUtils.readJsonFromFile(settingsPath);
-            const { settings, scss, css, css_editor_files, scss_error, css_editor_bounds } = user_config;
+            const { settings, scss, css, css_editor_files, scss_error, css_editor_bounds, favourite_emotes } = user_config;
 
             for (let set of this.settings) {
                 const newSet = settings.find(s => s.id === set.id);
@@ -58,6 +59,7 @@ export default new class Settings {
 
             CssEditor.setState(scss, css, css_editor_files, scss_error);
             CssEditor.editor_bounds = css_editor_bounds || {};
+            EmoteModule.favourite_emotes = favourite_emotes;
         } catch (err) {
             // There was an error loading settings
             // This probably means that the user doesn't have any settings yet
@@ -79,7 +81,8 @@ export default new class Settings {
                 css: CssEditor.css,
                 css_editor_files: CssEditor.files,
                 scss_error: CssEditor.error,
-                css_editor_bounds: CssEditor.editor_bounds
+                css_editor_bounds: CssEditor.editor_bounds,
+                favourite_emotes: EmoteModule.favourite_emotes
             });
 
             for (let set of this.settings) {

From 06cca44376f0881cc8729ffc743746e06262d25b Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 01:19:05 +0100
Subject: [PATCH 22/42] Make plugin/theme descriptions preformatted

---
 client/src/styles/partials/bdsettings/card.scss | 1 +
 tests/ext/plugins/Example/config.json           | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/styles/partials/bdsettings/card.scss b/client/src/styles/partials/bdsettings/card.scss
index 43a9c15a..e997aa5f 100644
--- a/client/src/styles/partials/bdsettings/card.scss
+++ b/client/src/styles/partials/bdsettings/card.scss
@@ -42,6 +42,7 @@
             font-size: 12px;
             font-weight: 600;
             margin-bottom: 5px;
+            white-space: pre-wrap;
         }
 
         .bd-card-footer {
diff --git a/tests/ext/plugins/Example/config.json b/tests/ext/plugins/Example/config.json
index 88174af6..ad85c4bd 100644
--- a/tests/ext/plugins/Example/config.json
+++ b/tests/ext/plugins/Example/config.json
@@ -23,7 +23,7 @@
             "Just a string"
         ],
         "version": 1.0,
-        "description": "Example Plugin Description",
+        "description": "Example Plugin Description.\n\nDescriptions are preformatted (you can use newlines).",
         "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg=="
     },
     "main": "index.js",

From e83c6f92cb617808ef488aee381c372a37820a61 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 03:22:44 +0100
Subject: [PATCH 23/42] Add emote favourite button

---
 client/src/builtin/EmoteComponent.vue         | 11 ++--
 client/src/styles/partials/emote.scss         | 20 -------
 client/src/styles/partials/emotes.scss        | 52 +++++++++++++++++++
 client/src/styles/partials/index.scss         |  2 +-
 .../src/ui/components/common/MaterialIcon.js  |  1 +
 .../components/common/materialicons/Star.vue  | 28 ++++++++++
 6 files changed, 90 insertions(+), 24 deletions(-)
 delete mode 100644 client/src/styles/partials/emote.scss
 create mode 100644 client/src/styles/partials/emotes.scss
 create mode 100644 client/src/ui/components/common/materialicons/Star.vue

diff --git a/client/src/builtin/EmoteComponent.vue b/client/src/builtin/EmoteComponent.vue
index 1a98e763..24f73792 100644
--- a/client/src/builtin/EmoteComponent.vue
+++ b/client/src/builtin/EmoteComponent.vue
@@ -2,21 +2,27 @@
     <span class="bd-emotewrapper" :class="{'bd-emote-favourite': favourite, 'bd-emote-no-wrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
         <img class="bd-emote" :src="src" :alt="`;${name};`" @click="toggleFavourite" />
 
-        <span v-if="favourite" style="font-size: 12px;"> (favourite)</span>
+        <div class="bd-emote-favourite-button" :class="{'bd-active': favourite}" @click="toggleFavourite">
+            <MiStar :size="16" />
+        </div>
     </span>
 </template>
 
 <script>
     import { ClientLogger as Logger } from 'common';
     import EmoteModule from './EmoteModule';
+    import { MiStar } from '../ui/components/common';
 
     export default {
+        components: {
+            MiStar
+        },
+        props: ['src', 'name', 'hasWrapper'],
         data() {
             return {
                 EmoteModule
             };
         },
-        props: ['src', 'name', 'hasWrapper'],
         computed: {
             favourite() {
                 return EmoteModule.isFavourite(this.name);
@@ -26,7 +32,6 @@
             async toggleFavourite() {
                 await EmoteModule.setFavourite(this.name, !this.favourite);
                 Logger.log('EmoteComponent', `Set emote ${this.name} as ${this.favourite ? '' : 'un'}favourite`);
-                this.$forceUpdate();
             }
         }
     }
diff --git a/client/src/styles/partials/emote.scss b/client/src/styles/partials/emote.scss
deleted file mode 100644
index b8b9fcec..00000000
--- a/client/src/styles/partials/emote.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.bd-emote-outer {
-    display: inline-block;
-    height: 32px;
-}
-.bd-emote-outer.bd-is-emote {
-    font-size: 0;
-}
-.bd-emotewrapper {
-    display: flex;
-    max-height: 32px;
-    img {
-        height: 32px;
-        margin: 0 .05em 0 .1em !important;
-        min-height: 22px;
-        min-width: 22px;
-        object-fit: contain;
-        vertical-align: -.4em;
-        max-height: 32px;
-    }
-}
diff --git a/client/src/styles/partials/emotes.scss b/client/src/styles/partials/emotes.scss
new file mode 100644
index 00000000..778e4cee
--- /dev/null
+++ b/client/src/styles/partials/emotes.scss
@@ -0,0 +1,52 @@
+.bd-emote-outer {
+    display: inline-block;
+    height: 32px;
+    user-select: none;
+
+    .bd-is-emote {
+        font-size: 0;
+    }
+}
+
+.bd-emotewrapper {
+    display: flex;
+    max-height: 32px;
+
+    img {
+        height: 32px;
+        margin: 0 .05em 0 .1em !important;
+        min-height: 22px;
+        min-width: 22px;
+        object-fit: contain;
+        vertical-align: -.4em;
+        max-height: 32px;
+    }
+
+    .bd-emote-favourite-button {
+        display: none;
+        width: 16px;
+        height: 16px;
+        margin-left: -17px;
+        margin-right: 1px;
+        cursor: pointer;
+        opacity: .7;
+        transition: opacity .1s ease;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        svg {
+            fill: $coldimwhite;
+            transition: fill .1s ease;
+        }
+
+        &.bd-active svg {
+            fill: #fff;
+        }
+    }
+
+    &:hover .bd-emote-favourite-button {
+        display: block;
+    }
+}
diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss
index 671cece8..0adc254d 100644
--- a/client/src/styles/partials/index.scss
+++ b/client/src/styles/partials/index.scss
@@ -12,4 +12,4 @@
 @import './discordoverrides.scss';
 @import './helpers.scss';
 @import './misc.scss';
-@import './emote.scss';
+@import './emotes.scss';
diff --git a/client/src/ui/components/common/MaterialIcon.js b/client/src/ui/components/common/MaterialIcon.js
index 658cde63..94c2c27c 100644
--- a/client/src/ui/components/common/MaterialIcon.js
+++ b/client/src/ui/components/common/MaterialIcon.js
@@ -13,3 +13,4 @@ export { default as MiChevronDown } from './materialicons/ChevronDown.vue';
 export { default as MiExtension } from './materialicons/Extension.vue';
 export { default as MiError } from './materialicons/Error.vue';
 export { default as MiDiscord } from './materialicons/Discord.vue';
+export { default as MiStar } from './materialicons/Star.vue';
diff --git a/client/src/ui/components/common/materialicons/Star.vue b/client/src/ui/components/common/materialicons/Star.vue
new file mode 100644
index 00000000..541adfe2
--- /dev/null
+++ b/client/src/ui/components/common/materialicons/Star.vue
@@ -0,0 +1,28 @@
+/**
+ * BetterDiscord Material Design Icon
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Material Design Icons
+ * Copyright (c) 2014 Google
+ * Apache 2.0 LICENSE
+ * https://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+
+<template>
+    <span class="bd-material-design-icon">
+        <svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
+        	<path d="M 11.9994,17.2708L 18.1794,20.9978L 16.5444,13.9688L 21.9994,9.24277L 14.8084,8.62477L 11.9994,1.99777L 9.1904,8.62477L 1.9994,9.24277L 7.4544,13.9688L 5.8194,20.9978L 11.9994,17.2708 Z " />
+        </svg>
+    </span>
+</template>
+
+<script>
+    export default {
+        props: ['size']
+    }
+</script>

From 1bde3b4ec973e484921b652d05ce92e2ce0eef2a Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 03:26:42 +0100
Subject: [PATCH 24/42] Add setting to enable/disable emotes

---
 client/src/builtin/EmoteModule.js          | 14 ++++++++++-
 client/src/data/user.settings.default.json | 28 +++++++++++++++-------
 client/src/index.js                        |  2 +-
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/client/src/builtin/EmoteModule.js b/client/src/builtin/EmoteModule.js
index 95b43241..d193ea30 100644
--- a/client/src/builtin/EmoteModule.js
+++ b/client/src/builtin/EmoteModule.js
@@ -24,6 +24,18 @@ export default new class EmoteModule {
         this.favourite_emotes = [];
     }
 
+    init() {
+        this.enabledSetting = Settings.getSetting('emotes', 'default', 'enable');
+        this.enabledSetting.on('setting-updated', event => {
+            // Rerender all messages (or if we're disabling emotes, those that have emotes)
+            for (const message of document.querySelectorAll(event.value ? '.message' : '.bd-emote-outer')) {
+                Reflection(event.value ? message : message.closest('.message')).forceUpdate();
+            }
+        });
+
+        return this.observe();
+    }
+
     /**
      * Sets an emote as favourite.
      * @param {String} emote The name of the emote
@@ -66,7 +78,7 @@ export default new class EmoteModule {
     }
 
     processMarkup(markup, timestamp) {
-        if (!emotesEnabled) return markup; // TODO Get it from setttings
+        if (!this.enabledSetting.value) return markup;
 
         timestamp = timestamp.valueOf();
         const allowNoWrapper = timestamp < enforceWrapperFrom;
diff --git a/client/src/data/user.settings.default.json b/client/src/data/user.settings.default.json
index 3cf0ddda..7038d652 100644
--- a/client/src/data/user.settings.default.json
+++ b/client/src/data/user.settings.default.json
@@ -5,7 +5,7 @@
         "headertext": "Core Settings",
         "settings": [
             {
-                "category": "default",
+                "id": "default",
                 "settings": [
                     {
                         "id": "test-setting",
@@ -40,8 +40,8 @@
                 ]
             },
             {
-                "category": "advanced",
-                "category_name": "Advanced",
+                "id": "advanced",
+                "name": "Advanced",
                 "type": "drawer",
                 "settings": [
                     {
@@ -74,7 +74,7 @@
         "headertext": "UI Settings",
         "settings": [
             {
-                "category": "default",
+                "id": "default",
                 "settings": [
                     {
                         "id": "hide-button",
@@ -92,14 +92,26 @@
         "id": "emotes",
         "text": "Emotes",
         "headertext": "Emote Settings",
-        "settings": []
+        "settings": [
+            {
+                "id": "default",
+                "settings": [
+                    {
+                        "id": "enable",
+                        "type": "bool",
+                        "text": "Enable emotes",
+                        "value": true
+                    }
+                ]
+            }
+        ]
     },
     {
         "id": "css",
         "text": "CSS Editor",
         "settings": [
             {
-                "category": "default",
+                "id": "default",
                 "settings": [
                     {
                         "id": "live-update",
@@ -123,8 +135,6 @@
         "id": "security",
         "text": "Security",
         "headertext": "Security Settings",
-        "settings": [
-
-        ]
+        "settings": []
     }
 ]
diff --git a/client/src/index.js b/client/src/index.js
index e5867217..77ad5d24 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -76,7 +76,7 @@ class BetterDiscord {
 
             Events.emit('ready');
             Events.emit('discord-ready');
-            EmoteModule.observe();
+            EmoteModule.init();
         } catch (err) {
             Logger.err('main', ['FAILED TO LOAD!', err]);
         }

From b3442ee1085870d4948b18fa6bfab755264ca34b Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 04:37:26 +0100
Subject: [PATCH 25/42] Store emote database in a map

---
 client/src/builtin/EmoteModule.js             | 135 +++++++++---------
 .../styles/partials/generic/autocomplete.scss |  10 +-
 2 files changed, 72 insertions(+), 73 deletions(-)

diff --git a/client/src/builtin/EmoteModule.js b/client/src/builtin/EmoteModule.js
index d193ea30..4b80d718 100644
--- a/client/src/builtin/EmoteModule.js
+++ b/client/src/builtin/EmoteModule.js
@@ -14,17 +14,16 @@ import { Utils, FileUtils, ClientLogger as Logger } from 'common';
 import path from 'path';
 import EmoteComponent from './EmoteComponent.vue';
 
-let emotes = null;
-const emotesEnabled = true;
 const enforceWrapperFrom = (new Date('2018-05-01')).valueOf();
 
 export default new class EmoteModule {
 
     constructor() {
+        this.emotes = new Map();
         this.favourite_emotes = [];
     }
 
-    init() {
+    async init() {
         this.enabledSetting = Settings.getSetting('emotes', 'default', 'enable');
         this.enabledSetting.on('setting-updated', event => {
             // Rerender all messages (or if we're disabling emotes, those that have emotes)
@@ -33,7 +32,25 @@ export default new class EmoteModule {
             }
         });
 
-        return this.observe();
+        const dataPath = Globals.getPath('data');
+        try {
+            const emotes = await FileUtils.readJsonFromFile(path.join(dataPath, 'emotes.json'));
+            for (let emote of emotes) {
+                const uri = emote.type === 2 ? 'https://cdn.betterttv.net/emote/:id/1x' : emote.type === 1 ? 'https://cdn.frankerfacez.com/emoticon/:id/1' : 'https://static-cdn.jtvnw.net/emoticons/v1/:id/1.0';
+                emote.name = emote.id;
+                emote.src = uri.replace(':id', emote.value.id || emote.value);
+                this.emotes.set(emote.id, emote);
+            }
+        } catch (err) {
+            Logger.err('EmoteModule', [`Failed to load emote data. Make sure you've downloaded the emote data and placed it in ${dataPath}:`, err]);
+            return;
+        }
+
+        try {
+            await this.observe();
+        } catch (err) {
+            Logger.err('EmoteModule', ['Error patching Message', err]);
+        }
     }
 
     /**
@@ -65,10 +82,6 @@ export default new class EmoteModule {
         return this._searchCache || (this._searchCache = {});
     }
 
-    get emoteDb() {
-        return emotes;
-    }
-
     get React() {
         return WebpackModules.getModuleByName('React');
     }
@@ -97,16 +110,16 @@ export default new class EmoteModule {
             if (!words) continue;
             let text = null;
             for (const [wordIndex, word] of words.entries()) {
-                const isEmote = this.isEmote(word);
-                if (isEmote) {
+                const emote = this.getEmote(word);
+                if (emote) {
                     if (text !== null) {
                         newMarkup.push(text);
                         text = null;
                     }
                     newMarkup.push(this.React.createElement('span', {
                         className: 'bd-emote-outer',
-                        'data-bdemote-name': isEmote.name,
-                        'data-bdemote-src': isEmote.src,
+                        'data-bdemote-name': emote.name,
+                        'data-bdemote-src': emote.src,
                         'data-has-wrapper': /;[\w]+;/gmi.test(word)
                     }));
                     continue;
@@ -129,7 +142,8 @@ export default new class EmoteModule {
     }
 
     injectAll() {
-        if (!emotesEnabled) return;
+        if (!this.enabledSetting.value) return;
+
         const all = document.getElementsByClassName('bd-emote-outer');
         for (const ec of all) {
             if (ec.children.length) continue;
@@ -150,48 +164,36 @@ export default new class EmoteModule {
     }
 
     async observe() {
-        const dataPath = Globals.getPath('data');
-        try {
-            emotes = await FileUtils.readJsonFromFile(path.join(dataPath, 'emotes.json'));
-        } catch (err) {
-            Logger.err('EmoteModule', [`Failed to load emote data. Make sure you've downloaded the emote data and placed it in ${dataPath}:`, err]);
-            return;
-        }
-
-        try {
-            const Message = await ReactComponents.getComponent('Message');
-            this.unpatchRender = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('render', (component, args, retVal) => {
-                try {
-                    // First child has all the actual text content, second is the edited timestamp
-                    const markup = this.findByProp(retVal, 'className', 'markup');
-                    if (!markup) return;
-                    Logger.log('EmoteModule', ['Message :', retVal, component]);
-                    markup.children[0] = this.processMarkup(markup.children[0], component.props.message.editedTimestamp || component.props.message.timestamp);
-                } catch (err) {
-                    Logger.err('EmoteModule', err);
-                }
-            });
-            for (const message of document.querySelectorAll('.message')) {
-                Reflection(message).forceUpdate();
+        const Message = await ReactComponents.getComponent('Message');
+        this.unpatchRender = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('render', (component, args, retVal) => {
+            try {
+                // First child has all the actual text content, second is the edited timestamp
+                const markup = this.findByProp(retVal, 'className', 'markup');
+                if (!markup) return;
+                markup.children[0] = this.processMarkup(markup.children[0], component.props.message.editedTimestamp || component.props.message.timestamp);
+            } catch (err) {
+                Logger.err('EmoteModule', err);
             }
-            this.injectAll();
-            this.unpatchMount = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidMount', component => {
-                const element = this.ReactDOM.findDOMNode(component);
-                if (!element) return;
-                this.injectEmotes(element);
-            });
-            this.unpatchUpdate = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidUpdate', component => {
-                const element = this.ReactDOM.findDOMNode(component);
-                if (!element) return;
-                this.injectEmotes(element);
-            });
-        } catch (err) {
-            Logger.err('EmoteModule', err);
+        });
+        for (const message of document.querySelectorAll('.message')) {
+            Reflection(message).forceUpdate();
         }
+        this.injectAll();
+        this.unpatchMount = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidMount', component => {
+            const element = this.ReactDOM.findDOMNode(component);
+            if (!element) return;
+            this.injectEmotes(element);
+        });
+        this.unpatchUpdate = MonkeyPatch('BD:EmoteModule', Message.component.prototype).after('componentDidUpdate', component => {
+            const element = this.ReactDOM.findDOMNode(component);
+            if (!element) return;
+            this.injectEmotes(element);
+        });
     }
 
     injectEmote(root) {
-        if (!emotesEnabled) return;
+        if (!this.enabledSetting.value) return;
+
         while (root.firstChild) {
             root.removeChild(root.firstChild);
         }
@@ -206,25 +208,14 @@ export default new class EmoteModule {
     }
 
     injectEmotes(element) {
-        if (!emotesEnabled || !element) return;
+        if (!this.enabledSetting.value || !element) return;
+
         for (const beo of element.getElementsByClassName('bd-emote-outer')) this.injectEmote(beo);
     }
 
-    isEmote(word) {
-        if (!emotes) return null;
+    getEmote(word) {
         const name = word.replace(/;/g, '');
-        const emote = emotes.find(emote => emote.id === name);
-        if (!emote) return null;
-        let { id, value } = emote;
-        if (value.id) value = value.id;
-        const uri = emote.type === 2 ? 'https://cdn.betterttv.net/emote/:id/1x' : emote.type === 1 ? 'https://cdn.frankerfacez.com/emoticon/:id/1' : 'https://static-cdn.jtvnw.net/emoticons/v1/:id/1.0';
-        return { name, src: uri.replace(':id', value) };
-    }
-
-    filterTest() {
-        const re = new RegExp('Kappa', 'i');
-        const filtered = emotes.filter(emote => re.test(emote.id));
-        return filtered.slice(0, 10);
+        return this.emotes.get(name);
     }
 
     filter(regex, limit, start = 0) {
@@ -232,17 +223,21 @@ export default new class EmoteModule {
         if (this.searchCache.hasOwnProperty(key)) return this.searchCache[key];
         let index = 0;
         let startIndex = 0;
-        return this.searchCache[key] = emotes.filter(emote => {
-            if (index >= limit) return false;
+
+        const matching = this.searchCache[key] = [];
+        for (let emote of this.emotes.values()) {
+            if (index >= limit) break;
             if (regex.test(emote.id)) {
                 if (startIndex < start) {
                     startIndex++;
-                    return false;
+                    continue;
                 }
                 index++;
-                return true;
+                matching.push(emote);
             }
-        });
+        }
+
+        return matching;
     }
 
 }
diff --git a/client/src/styles/partials/generic/autocomplete.scss b/client/src/styles/partials/generic/autocomplete.scss
index bfc8ebd5..75312e1e 100644
--- a/client/src/styles/partials/generic/autocomplete.scss
+++ b/client/src/styles/partials/generic/autocomplete.scss
@@ -25,10 +25,14 @@
 
                 &.bd-selectable {
                     cursor: pointer;
-                }
 
-                &.bd-selected {
-                    background-color: #36393f;
+                    &:hover {
+                        background-color: darken(#36393f, 5%);
+                    }
+
+                    &.bd-selected {
+                        background-color: #36393f;
+                    }
                 }
 
                 .bd-autocomplete-title {

From c701a2b5f959aa1041b6f29957b7fc1573a2c42f Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 16:51:14 +0100
Subject: [PATCH 26/42] Add emotes to the plugin API

---
 client/src/modules/pluginapi.js | 51 +++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index d01288ad..f76dbfd2 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -8,6 +8,9 @@
  * LICENSE file in the root directory of this source tree.
 */
 
+import { EmoteModule } from 'builtin';
+import { SettingsSet, SettingsCategory, Setting, SettingsScheme } from 'structs';
+import { BdMenu, Modals, DOM, Reflection } from 'ui';
 import { Utils, ClientLogger as Logger, ClientIPC, AsyncEventEmitter } from 'common';
 import Settings from './settings';
 import ExtModuleManager from './extmodulemanager';
@@ -16,8 +19,6 @@ import ThemeManager from './thememanager';
 import Events from './events';
 import EventsWrapper from './eventswrapper';
 import { WebpackModules } from './webpackmodules';
-import { SettingsSet, SettingsCategory, Setting, SettingsScheme } from 'structs';
-import { BdMenu, Modals, DOM, Reflection } from 'ui';
 import DiscordApi from './discordapi';
 import { ReactComponents } from './reactcomponents';
 import { Patcher, MonkeyPatch } from './patcher';
@@ -290,6 +291,52 @@ export default class PluginApi {
         });
     }
 
+    /**
+     * Emotes
+     */
+
+    get emotes() {
+        return EmoteModule.emotes;
+    }
+    get favourite_emotes() {
+        return EmoteModule.favourite_emotes;
+    }
+    setFavouriteEmote(emote, favourite) {
+        return EmoteModule.setFavourite(emote, favourite);
+    }
+    addFavouriteEmote(emote) {
+        return EmoteModule.addFavourite(emote);
+    }
+    removeFavouriteEmote(emote) {
+        return EmoteModule.addFavourite(emote);
+    }
+    isFavouriteEmote(emote) {
+        return EmoteModule.isFavourite(emote);
+    }
+    getEmote(emote) {
+        return EmoteModule.getEmote(emote);
+    }
+    filterEmotes(regex, limit, start = 0) {
+        return EmoteModule.filterEmotes(regex, limit, start);
+    }
+    get Emotes() {
+        return Object.defineProperties({
+            setFavourite: this.setFavouriteEmote.bind(this),
+            addFavourite: this.addFavouriteEmote.bind(this),
+            removeFavourite: this.removeFavouriteEmote.bind(this),
+            isFavourite: this.isFavouriteEmote.bind(this),
+            getEmote: this.getEmote.bind(this),
+            filter: this.filterEmotes.bind(this)
+        }, {
+            emotes: {
+                get: () => this.emotes
+            },
+            favourite_emotes: {
+                get: () => this.favourite_emotes
+            }
+        });
+    }
+
     /**
      * Plugins
      */

From 0e14d167dcc14534a67096b77a669dfa120e1994 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 17:38:11 +0100
Subject: [PATCH 27/42] Fix event callbacks not being passed any arguments

---
 client/src/modules/eventswrapper.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/modules/eventswrapper.js b/client/src/modules/eventswrapper.js
index 8196e561..bd8ece2b 100644
--- a/client/src/modules/eventswrapper.js
+++ b/client/src/modules/eventswrapper.js
@@ -23,14 +23,14 @@ export default class EventsWrapper {
     get on() { return this.subscribe }
     subscribe(event, callback) {
         if (this.eventSubs.find(e => e.event === event && e.callback === callback)) return;
-        const boundCallback = () => callback.apply(this.bind, arguments);
+        const boundCallback = (...args) => callback.apply(this.bind, args);
         this.eventSubs.push({ event, callback, boundCallback });
         eventemitters.get(this).on(event, boundCallback);
     }
 
     once(event, callback) {
         if (this.eventSubs.find(e => e.event === event && e.callback === callback)) return;
-        const boundCallback = () => this.off(event, callback) && callback.apply(this.bind, arguments);
+        const boundCallback = (...args) => this.off(event, callback) && callback.apply(this.bind, args);
         this.eventSubs.push({ event, callback, boundCallback });
         eventemitters.get(this).on(event, boundCallback);
     }
@@ -50,4 +50,5 @@ export default class EventsWrapper {
         }
         this.eventSubs.splice(0, this.eventSubs.length);
     }
+
 }

From 3eb1782a645eea90ca7048b15f66741e46d9b059 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 22:44:24 +0100
Subject: [PATCH 28/42] Fix for Discord Canary

---
 core/src/main.js                 | 24 ++++++++++++--
 core/src/patch-browser-window.js | 57 ++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+), 2 deletions(-)
 create mode 100644 core/src/patch-browser-window.js

diff --git a/core/src/main.js b/core/src/main.js
index d66c5465..f721eb73 100644
--- a/core/src/main.js
+++ b/core/src/main.js
@@ -52,8 +52,19 @@ const globals = {
     paths
 };
 
-class Comms {
+class PatchedBrowserWindow extends BrowserWindow {
+    constructor(originalOptions) {
+        const options = Object.assign({}, originalOptions);
+        options.webPreferences = Object.assign({}, options.webPreferences);
 
+        options.webPreferences.nodeIntegration = true;
+
+        console.log('Creating new BrowserWindow with options', options, originalOptions);
+        return new BrowserWindow(options);
+    }
+}
+
+class Comms {
     constructor(bd) {
         this.bd = bd;
         this.initListeners();
@@ -101,7 +112,6 @@ class Comms {
     async sendToCssEditor(channel, message) {
         return this.bd.csseditor.send(channel, message);
     }
-
 }
 
 class BetterDiscord {
@@ -201,8 +211,18 @@ class BetterDiscord {
         return this.windowUtils.injectScript(this.config.getPath('cs'));
     }
 
+    static patchBrowserWindow() {
+        const electron_path = require.resolve('electron');
+        const browser_window_path = require.resolve(path.resolve(electron_path, '..', '..', 'browser-window.js'));
+        const browser_window_module = require.cache[browser_window_path];
+
+        browser_window_module.exports = PatchedBrowserWindow;
+    }
+
 }
 
+BetterDiscord.patchBrowserWindow();
+
 module.exports = {
     BetterDiscord
 };
diff --git a/core/src/patch-browser-window.js b/core/src/patch-browser-window.js
new file mode 100644
index 00000000..b8378daf
--- /dev/null
+++ b/core/src/patch-browser-window.js
@@ -0,0 +1,57 @@
+
+
+const electron = require('electron');
+const path = require('path');
+
+const _BrowserWindow = electron.BrowserWindow;
+
+console.log('Open windows:', _BrowserWindow.getAllWindows());
+console.log('Open window URLs:', _BrowserWindow.getAllWindows().map(w => w.getURL()));
+
+console.log('Patching BrowserWindow');
+
+class PatchedBrowserWindow extends _BrowserWindow {
+    constructor(originalOptions) {
+        const options = Object.assign({}, originalOptions);
+        options.webPreferences = Object.assign({}, options.webPreferences);
+
+        options.webPreferences.nodeIntegration = true;
+
+        console.log('Creating new BrowserWindow with options', options, originalOptions);
+        return new _BrowserWindow(options);
+    }
+};
+
+// Can't just do this because electron.BrowserWindow is a getter
+// electron.BrowserWindow = PatchedBrowserWindow;
+
+// Can't do this either because it's not configurable because ^^
+// Object.defineProperty(electron, 'BrowserWindow', {
+//     get: () => PatchedBrowserWindow
+// });
+
+console.log('Electron:', electron);
+
+console.log('Electron BrowserWindow getter:', electron.__lookupGetter__('BrowserWindow'));
+console.log('Electron BrowserWindow setter:', electron.__lookupSetter__('BrowserWindow'));
+
+const electron_path = require.resolve('electron');
+const electron_module = require.cache[electron_path];
+console.log('Electron module path:', electron_path);
+console.log('Electron module:', electron_module);
+
+const browser_window_path = require.resolve(path.resolve(electron_path, '..', '..', 'browser-window.js'));
+const browser_window_module = require.cache[browser_window_path];
+console.log('BrowserWindow module path:', browser_window_path);
+console.log('BrowserWindow module:', browser_window_module);
+
+browser_window_module.exports = PatchedBrowserWindow;
+
+try {
+    new (require("../../../../BetterDiscord")).BetterDiscord();
+} catch (err) {
+    console.err('Error loading BetterDiscord:', err);
+}
+
+// Main window is created here
+module.exports = require('./core');

From 858fdcec59adf33f64a4b37cd61d055cad789b30 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 22:49:00 +0100
Subject: [PATCH 29/42] Clean up and comment

---
 core/src/main.js                 |  7 +++-
 core/src/patch-browser-window.js | 57 --------------------------------
 2 files changed, 6 insertions(+), 58 deletions(-)
 delete mode 100644 core/src/patch-browser-window.js

diff --git a/core/src/main.js b/core/src/main.js
index f721eb73..ecc6eea6 100644
--- a/core/src/main.js
+++ b/core/src/main.js
@@ -57,9 +57,9 @@ class PatchedBrowserWindow extends BrowserWindow {
         const options = Object.assign({}, originalOptions);
         options.webPreferences = Object.assign({}, options.webPreferences);
 
+        // Make sure Node integration is enabled
         options.webPreferences.nodeIntegration = true;
 
-        console.log('Creating new BrowserWindow with options', options, originalOptions);
         return new BrowserWindow(options);
     }
 }
@@ -211,6 +211,11 @@ class BetterDiscord {
         return this.windowUtils.injectScript(this.config.getPath('cs'));
     }
 
+    /**
+     * Patches Electron's BrowserWindow so all windows have Node integration enabled.
+     * This needs to be called only once before the main window is created (or BrowserWindow is put in a variable).
+     * Basically BetterDiscord needs to load before discord_desktop_core.
+     */
     static patchBrowserWindow() {
         const electron_path = require.resolve('electron');
         const browser_window_path = require.resolve(path.resolve(electron_path, '..', '..', 'browser-window.js'));
diff --git a/core/src/patch-browser-window.js b/core/src/patch-browser-window.js
deleted file mode 100644
index b8378daf..00000000
--- a/core/src/patch-browser-window.js
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-const electron = require('electron');
-const path = require('path');
-
-const _BrowserWindow = electron.BrowserWindow;
-
-console.log('Open windows:', _BrowserWindow.getAllWindows());
-console.log('Open window URLs:', _BrowserWindow.getAllWindows().map(w => w.getURL()));
-
-console.log('Patching BrowserWindow');
-
-class PatchedBrowserWindow extends _BrowserWindow {
-    constructor(originalOptions) {
-        const options = Object.assign({}, originalOptions);
-        options.webPreferences = Object.assign({}, options.webPreferences);
-
-        options.webPreferences.nodeIntegration = true;
-
-        console.log('Creating new BrowserWindow with options', options, originalOptions);
-        return new _BrowserWindow(options);
-    }
-};
-
-// Can't just do this because electron.BrowserWindow is a getter
-// electron.BrowserWindow = PatchedBrowserWindow;
-
-// Can't do this either because it's not configurable because ^^
-// Object.defineProperty(electron, 'BrowserWindow', {
-//     get: () => PatchedBrowserWindow
-// });
-
-console.log('Electron:', electron);
-
-console.log('Electron BrowserWindow getter:', electron.__lookupGetter__('BrowserWindow'));
-console.log('Electron BrowserWindow setter:', electron.__lookupSetter__('BrowserWindow'));
-
-const electron_path = require.resolve('electron');
-const electron_module = require.cache[electron_path];
-console.log('Electron module path:', electron_path);
-console.log('Electron module:', electron_module);
-
-const browser_window_path = require.resolve(path.resolve(electron_path, '..', '..', 'browser-window.js'));
-const browser_window_module = require.cache[browser_window_path];
-console.log('BrowserWindow module path:', browser_window_path);
-console.log('BrowserWindow module:', browser_window_module);
-
-browser_window_module.exports = PatchedBrowserWindow;
-
-try {
-    new (require("../../../../BetterDiscord")).BetterDiscord();
-} catch (err) {
-    console.err('Error loading BetterDiscord:', err);
-}
-
-// Main window is created here
-module.exports = require('./core');

From 2f9af2e2d012e2c3746a768bee6a0092785e6125 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sat, 31 Mar 2018 23:06:24 +0100
Subject: [PATCH 30/42] Use correct Electron version

---
 package-lock.json | 24 ++++++++++++------------
 package.json      |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 429ea27f..2d6c521a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,9 +5,9 @@
   "requires": true,
   "dependencies": {
     "@types/node": {
-      "version": "8.9.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-8.9.4.tgz",
-      "integrity": "sha1-39MnWCoGwRTrbgRB+j1vqzXtrUg=",
+      "version": "7.0.58",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.58.tgz",
+      "integrity": "sha512-4LwjraUddrN+sJ2cL7v64w9fEWQ0zUlDdB8yqmFrWlavHkXxjxBSnZ4ofeW5SbHLpUE0Ve3XvijT/eQmylzasg==",
       "dev": true
     },
     "abbrev": {
@@ -2820,12 +2820,12 @@
       }
     },
     "electron": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-1.8.2.tgz",
-      "integrity": "sha1-qBfNczwpcrPHzE93fK9uQkuIAU0=",
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-1.6.15.tgz",
+      "integrity": "sha1-w07FRIa39Jpm21jG8koJKEFPrqc=",
       "dev": true,
       "requires": {
-        "@types/node": "8.9.4",
+        "@types/node": "7.0.58",
         "electron-download": "3.3.0",
         "extract-zip": "1.6.6"
       }
@@ -2842,7 +2842,7 @@
         "minimist": "1.2.0",
         "nugget": "2.0.1",
         "path-exists": "2.1.0",
-        "rc": "1.2.5",
+        "rc": "1.2.6",
         "semver": "5.5.0",
         "sumchecker": "1.3.1"
       },
@@ -3048,7 +3048,7 @@
     "es6-promise": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
-      "integrity": "sha1-3EIhwrFlGHYL2MOaUtjzVvwA7Sk=",
+      "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==",
       "dev": true
     },
     "es6-set": {
@@ -9671,9 +9671,9 @@
       }
     },
     "rc": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.5.tgz",
-      "integrity": "sha1-J1zWh/bjs2zHVrqibf7oCnkDAf0=",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.6.tgz",
+      "integrity": "sha1-6xiYnG1PTxYsOZ953dKfODVWgJI=",
       "dev": true,
       "requires": {
         "deep-extend": "0.4.2",
diff --git a/package.json b/package.json
index 62a2312d..13f0ccec 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "combokeys": "^3.0.0",
     "css-loader": "^0.28.9",
     "del": "^3.0.0",
-    "electron": "^1.6.15",
+    "electron": "1.6.15",
     "electron-rebuild": "^1.7.3",
     "eslint": "^4.16.0",
     "eslint-plugin-vue": "^4.3.0",

From 60a82a3ad9d0ef5c2fdf80dd5dd23fdf006c03dc Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 00:18:05 +0100
Subject: [PATCH 31/42] =?UTF-8?q?Add=20package=20script=20and=20fix=20rele?=
 =?UTF-8?q?ase=20script=20not=20working=20when=20the=20release=20directory?=
 =?UTF-8?q?=20doesn=E2=80=99t=20already=20exist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gulpfile.js                |   2 +
 package-lock.json          | 428 ++++++++++++++++++++++++++++++++++++-
 package.json               |   5 +-
 scripts/package-release.js |  65 ++++++
 4 files changed, 498 insertions(+), 2 deletions(-)
 create mode 100644 scripts/package-release.js

diff --git a/gulpfile.js b/gulpfile.js
index a6d5a2d2..42b2e812 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,5 +1,6 @@
 const
     fs = require('fs'),
+    mkdirp = require('mkdirp'),
     gulp = require('gulp'),
     del = require('del'),
     pump = require('pump'),
@@ -18,6 +19,7 @@ const releasepkg = function() {
     delete mainpkg.main;
     delete mainpkg.devDependencies;
     delete mainpkg.scripts;
+    mkdirp.sync('./release');
     return fs.writeFileSync('./release/package.json', JSON.stringify(mainpkg, null, 2));
 };
 
diff --git a/package-lock.json b/package-lock.json
index 2d6c521a..1ce9b485 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -269,6 +269,112 @@
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
       "integrity": "sha1-aALmJk79GMeQobDVF/DyYnvyyUo="
     },
+    "archiver": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-2.1.1.tgz",
+      "integrity": "sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=",
+      "dev": true,
+      "requires": {
+        "archiver-utils": "1.3.0",
+        "async": "2.6.0",
+        "buffer-crc32": "0.2.13",
+        "glob": "7.1.2",
+        "lodash": "4.17.5",
+        "readable-stream": "2.3.5",
+        "tar-stream": "1.5.5",
+        "zip-stream": "1.2.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
+    "archiver-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-1.3.0.tgz",
+      "integrity": "sha1-5QtMCccL89aA4y/xt5lOn52JUXQ=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.2",
+        "graceful-fs": "4.1.11",
+        "lazystream": "1.0.0",
+        "lodash": "4.17.5",
+        "normalize-path": "2.1.1",
+        "readable-stream": "2.3.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
     "archy": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
@@ -1311,6 +1417,54 @@
         "underscore": "1.4.4"
       }
     },
+    "bl": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz",
+      "integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.5",
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
     "block-stream": {
       "version": "0.0.9",
       "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@@ -1479,6 +1633,12 @@
         }
       }
     },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
+      "dev": true
+    },
     "buffer-xor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
@@ -2092,6 +2252,56 @@
       "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
       "dev": true
     },
+    "compress-commons": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-1.2.2.tgz",
+      "integrity": "sha1-UkqfEJA/OoEzibAiXSfEi7dRiQ8=",
+      "dev": true,
+      "requires": {
+        "buffer-crc32": "0.2.13",
+        "crc32-stream": "2.0.0",
+        "normalize-path": "2.1.1",
+        "readable-stream": "2.3.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2235,6 +2445,60 @@
         }
       }
     },
+    "crc": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/crc/-/crc-3.5.0.tgz",
+      "integrity": "sha1-mLi6fUiWZbo5efWbITgTdBAaGWQ=",
+      "dev": true
+    },
+    "crc32-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-2.0.0.tgz",
+      "integrity": "sha1-483TtN8xaN10494/u8t7KX/pCPQ=",
+      "dev": true,
+      "requires": {
+        "crc": "3.5.0",
+        "readable-stream": "2.3.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
     "create-ecdh": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.0.tgz",
@@ -3048,7 +3312,7 @@
     "es6-promise": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
-      "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ==",
+      "integrity": "sha1-3EIhwrFlGHYL2MOaUtjzVvwA7Sk=",
       "dev": true
     },
     "es6-set": {
@@ -6898,6 +7162,53 @@
         "set-getter": "0.1.0"
       }
     },
+    "lazystream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
+      "integrity": "sha1-9plf4PggOS9hOWvolGJAe7dxaOQ=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
     "lcid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
@@ -11164,6 +11475,71 @@
         "inherits": "2.0.3"
       }
     },
+    "tar-stream": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.5.5.tgz",
+      "integrity": "sha512-mQdgLPc/Vjfr3VWqWbfxW8yQNiJCbAZ+Gf6GDu1Cy0bdb33ofyiNGBtAY96jHFhDuivCwgW1H9DgTON+INiXgg==",
+      "dev": true,
+      "requires": {
+        "bl": "1.2.2",
+        "end-of-stream": "1.4.1",
+        "readable-stream": "2.3.5",
+        "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "end-of-stream": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
+          "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+          "dev": true,
+          "requires": {
+            "once": "1.4.0"
+          }
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        },
+        "xtend": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+          "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+          "dev": true
+        }
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -12592,6 +12968,56 @@
       "requires": {
         "fd-slicer": "1.0.1"
       }
+    },
+    "zip-stream": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-1.2.0.tgz",
+      "integrity": "sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=",
+      "dev": true,
+      "requires": {
+        "archiver-utils": "1.3.0",
+        "compress-commons": "1.2.2",
+        "lodash": "4.17.5",
+        "readable-stream": "2.3.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.5",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.5.tgz",
+          "integrity": "sha512-tK0yDhrkygt/knjowCUiWP9YdV7c5R+8cR0r/kt9ZhBU906Fs6RpQJCEilamRJj1Nx2rWI6LkW9gKqjTkshhEw==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "2.0.0",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 13f0ccec..df59798e 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "nedb": "^1.8.0"
   },
   "devDependencies": {
+    "archiver": "^2.1.1",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-env": "^1.6.1",
@@ -47,6 +48,7 @@
     "html-webpack-plugin": "^3.0.6",
     "jquery": "^3.2.1",
     "lodash": "^4.17.4",
+    "mkdirp": "^0.5.1",
     "node-gyp": "^3.6.2",
     "pump": "^2.0.0",
     "sass-loader": "^6.0.6",
@@ -74,6 +76,7 @@
     "test": "npm run build && npm run lint",
     "build_node-sass": "node scripts/build-node-sass.js",
     "build_release": "npm run release --prefix client && npm run build --prefix core && npm run release --prefix csseditor",
-    "release": "npm run lint && npm run build_release && gulp release"
+    "package_release": "node scripts/package-release.js",
+    "release": "npm run lint && npm run build_release && gulp release && npm run package_release"
   }
 }
diff --git a/scripts/package-release.js b/scripts/package-release.js
new file mode 100644
index 00000000..443e3b2e
--- /dev/null
+++ b/scripts/package-release.js
@@ -0,0 +1,65 @@
+const fs = require('fs');
+const path = require('path');
+const archiver = require('archiver');
+
+const releasepkg = require('../release/package.json');
+const mainpkg = require('../package.json');
+const corepkg = require('../core/package.json');
+const clientpkg = require('../client/package.json');
+const editorpkg = require('../csseditor/package.json');
+
+// core.zip
+const core = new Promise((resolve, reject) => {
+    const core_zip = archiver('zip');
+    core_zip.file('./release/package.json', {name: 'package.json'});
+    core_zip.file('./release/index.js', {name: 'index.js'});
+    core_zip.file(`./release/core.${corepkg.version}.js`, {name: `core.${corepkg.version}.js`});
+    core_zip.file('./release/sparkplug.js', {name: 'sparkplug.js'});
+    core_zip.directory('./release/modules', 'modules');
+    core_zip.directory('./release/node_modules', 'node_modules');
+
+    const core_zip_stream = fs.createWriteStream('./release/core.zip');
+    core_zip.pipe(core_zip_stream);
+
+    core_zip.on('end', resolve);
+    core_zip.on('error', reject);
+    core_zip.finalize();
+});
+
+// client.zip
+const client = new Promise((resolve, reject) => {
+    const client_zip = archiver('zip');
+    client_zip.file(`./release/client.${clientpkg.version}.js`, {name: `client.${clientpkg.version}.js`});
+
+    const client_zip_stream = fs.createWriteStream('./release/client.zip');
+    client_zip.pipe(client_zip_stream);
+
+    client_zip.on('end', resolve);
+    client_zip.on('error', reject);
+    client_zip.finalize();
+});
+
+// csseditor.zip
+const csseditor = new Promise((resolve, reject) => {
+    const csseditor_zip = archiver('zip');
+    csseditor_zip.directory('./release/csseditor', 'csseditor');
+
+    const csseditor_zip_stream = fs.createWriteStream('./release/csseditor.zip');
+    csseditor_zip.pipe(csseditor_zip_stream);
+
+    csseditor_zip.on('end', resolve);
+    csseditor_zip.on('error', reject);
+    csseditor_zip.finalize();
+});
+
+// full.zip
+Promise.all([core, client, csseditor]).then(() => {
+    const full_zip = archiver('zip');
+    full_zip.file('./release/core.zip', {name: 'core.zip'});
+    full_zip.file('./release/client.zip', {name: 'client.zip'});
+    full_zip.file('./release/csseditor.zip', {name: 'csseditor.zip'});
+
+    const full_zip_stream = fs.createWriteStream('./release/full.zip');
+    full_zip.pipe(full_zip_stream);
+    full_zip.finalize();
+});

From c95d60ab0f456853cb50909c80f56dc20cab4500 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 02:39:58 +0100
Subject: [PATCH 32/42] =?UTF-8?q?Don=E2=80=99t=20toggle=20favourite=20when?=
 =?UTF-8?q?=20the=20emote=20itself=20is=20clicked?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/builtin/EmoteComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/builtin/EmoteComponent.vue b/client/src/builtin/EmoteComponent.vue
index 24f73792..0eda75d6 100644
--- a/client/src/builtin/EmoteComponent.vue
+++ b/client/src/builtin/EmoteComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <span class="bd-emotewrapper" :class="{'bd-emote-favourite': favourite, 'bd-emote-no-wrapper': !hasWrapper}" v-tooltip="name" :data-emote-name="name">
-        <img class="bd-emote" :src="src" :alt="`;${name};`" @click="toggleFavourite" />
+        <img class="bd-emote" :src="src" :alt="`;${name};`" />
 
         <div class="bd-emote-favourite-button" :class="{'bd-active': favourite}" @click="toggleFavourite">
             <MiStar :size="16" />

From 7f5fa44fd31a2d3e253cb052de34dc0480ad6a51 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 13:57:02 +0100
Subject: [PATCH 33/42] Refactor ChannelMember badges

---
 client/src/modules/modules.js         |   2 +-
 client/src/modules/reactcomponents.js |  15 ++--
 client/src/ui/automanip.js            |   2 +-
 client/src/ui/profilebadges.js        | 107 ++++++++++++++++++++++----
 4 files changed, 102 insertions(+), 24 deletions(-)

diff --git a/client/src/modules/modules.js b/client/src/modules/modules.js
index f885fcdb..cd2fa566 100644
--- a/client/src/modules/modules.js
+++ b/client/src/modules/modules.js
@@ -16,7 +16,7 @@ export { default as Vendor } from './vendor';
 
 export * from './webpackmodules';
 export * from './patcher';
-export * from './reactcomponents';
+export { ReactComponents, ReactAutoPatcher, Helpers as ReactComponentHelpers } from './reactcomponents';
 export { default as EventListener } from './eventlistener';
 export { default as SocketProxy } from './socketproxy';
 export { default as EventHook } from './eventhook';
diff --git a/client/src/modules/reactcomponents.js b/client/src/modules/reactcomponents.js
index 48ad1611..2164bf91 100644
--- a/client/src/modules/reactcomponents.js
+++ b/client/src/modules/reactcomponents.js
@@ -16,7 +16,7 @@ import { MonkeyPatch, Patcher } from './patcher';
 import { WebpackModules, Filters } from './webpackmodules';
 import DiscordApi from './discordapi';
 
-class Helpers {
+export class Helpers {
     static get plannedActions() {
         return this._plannedActions || (this._plannedActions = new Map());
     }
@@ -154,6 +154,10 @@ class Helpers {
         return null;
     }
 
+    static get React() {
+        return WebpackModules.getModuleByName('React');
+    }
+
     static get ReactDOM() {
         return WebpackModules.getModuleByName('ReactDOM');
     }
@@ -223,7 +227,7 @@ export class ReactComponents {
                     return;
                 }
                 if (!reflect.component.displayName) reflect.component.displayName = name;
-                Logger.info('ReactComponents', `Found important component ${name} with reflection`);
+                Logger.info('ReactComponents', [`Found important component ${name} with reflection`, reflect.component, reflect]);
                 this.push(reflect.component);
                 clearInterval(importantInterval);
             }, 50);
@@ -320,9 +324,10 @@ export class ReactAutoPatcher {
     }
 
     static async patchChannelMember() {
-        this.ChannelMember = await ReactComponents.getComponent('ChannelMember', { selector: '.member.member-status' });
+        this.ChannelMember = await ReactComponents.getComponent('ChannelMember', { selector: '.member-2FrNV0' });
         this.unpatchChannelMemberRender = MonkeyPatch('BD:ReactComponents', this.ChannelMember.component.prototype).after('render', (component, args, retVal) => {
-            if (!retVal.props || !retVal.props.children || !retVal.props.children.length) return;
+            // Logger.log('ReactComponents', ['Rendering ChannelMember', component, args, retVal]);
+            if (!retVal.props || !retVal.props.children) return;
             const user = Helpers.findProp(component, 'user');
             if (!user) return;
             retVal.props['data-user-id'] = user.id;
@@ -360,7 +365,7 @@ export class ReactAutoPatcher {
     }
 
     static forceUpdate() {
-        for (const e of document.querySelectorAll('.message,.message-group,.guild,.containerDefault-7RImuF,.channel-members .member')) {
+        for (const e of document.querySelectorAll('.message, .message-group, .guild, .containerDefault-7RImuF, .channel-members .member-2FrNV0')) {
             Reflection(e).forceUpdate();
         }
     }
diff --git a/client/src/ui/automanip.js b/client/src/ui/automanip.js
index be4617df..5c8e72dd 100644
--- a/client/src/ui/automanip.js
+++ b/client/src/ui/automanip.js
@@ -125,7 +125,7 @@ export default class extends EventListener {
     }
 
     setUserIds() {
-        for (let user of document.querySelectorAll('.channel-members-wrap .member')) {
+        for (let user of document.querySelectorAll('.channel-members-wrap .member, .channel-members-wrap .member-2FrNV0')) {
             this.setUserId(user);
         }
     }
diff --git a/client/src/ui/profilebadges.js b/client/src/ui/profilebadges.js
index 41905b79..49b6a496 100644
--- a/client/src/ui/profilebadges.js
+++ b/client/src/ui/profilebadges.js
@@ -8,7 +8,8 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { EventListener } from 'modules';
+import { EventListener, ReactComponents, ReactComponentHelpers as Helpers, MonkeyPatch } from 'modules';
+import { ClientLogger as Logger } from 'common';
 import DOM from './dom';
 import { BdBadge, BdMessageBadge } from './components/bd';
 import VueInjector from './vueinjector';
@@ -16,11 +17,15 @@ import contributors from '../data/contributors';
 
 export default class extends EventListener {
 
+    init() {
+        this.patchChannelMember();
+        this.patchNameTag();
+    }
+
     bindings() {
         this.uiEvent = this.uiEvent.bind(this);
         this.messageBadge = this.messageBadge.bind(this);
         this.badges = this.badges.bind(this);
-        this.userlistBadge = this.userlistBadge.bind(this);
     }
 
     get eventBindings() {
@@ -30,7 +35,6 @@ export default class extends EventListener {
             { id: 'server-switch', callback: this.badges },
             { id: 'channel-switch', callback: this.badges },
             { id: 'ui:loadedmore', callback: this.badges },
-            { id: 'ui:useridset', callback: this.userlistBadge },
             { id: 'ui-event', callback: this.uiEvent }
         ];
     }
@@ -71,20 +75,6 @@ export default class extends EventListener {
         });
     }
 
-    userlistBadge(e) {
-        const c = contributors.find(c => c.id === e.dataset.userId);
-        if (!c) return;
-        const memberUsername = e.querySelector('.member-username');
-        if (!memberUsername) return;
-        const root = document.createElement('span');
-        memberUsername.append(root);
-        VueInjector.inject(root, {
-            components: { BdMessageBadge },
-            data: { c },
-            template: '<BdMessageBadge :developer="c.developer" :webdev="c.webdev" :contributor="c.contributor" />'
-        });
-    }
-
     inject(userid) {
         const c = contributors.find(c => c.id === userid);
         if (!c) return;
@@ -110,4 +100,87 @@ export default class extends EventListener {
         return contributors;
     }
 
+    /**
+     * Patches ChannelMember to use the extended NameTag.
+     * This is because NameTag is also used in places we don't really want any badges.
+     */
+    async patchChannelMember() {
+        const ChannelMember = await ReactComponents.getComponent('ChannelMember');
+
+        this.unpatchChannelMemberRender = MonkeyPatch('ProfileBadges', ChannelMember.component.prototype).after('render', (component, args, retVal) => {
+            if (!retVal.props || !retVal.props.children) return;
+
+            const user = Helpers.findProp(component, 'user');
+            if (!user) return;
+            const c = contributors.find(c => c.id === user.id);
+            if (!c) return;
+
+            const nameTag = retVal.props.children.props.children[1].props.children[0];
+            nameTag.type = this.PatchedNameTag || nameTag.type;
+        });
+    }
+
+    /**
+     * Creates an extended NameTag component that renders message badges.
+     */
+    async patchNameTag() {
+        if (this.PatchedNameTag) return this.PatchedNameTag;
+
+        const ProfileBadges = this;
+        const NameTag = await ReactComponents.getComponent('NameTag', {selector: '.nameTag-26T3kW'});
+
+        return this.PatchedNameTag = class extends NameTag.component {
+            render() {
+                const retVal = NameTag.component.prototype.render.call(this, arguments);
+                try {
+                    if (!retVal.props || !retVal.props.children) return;
+
+                    const user = Helpers.findProp(this, 'user');
+                    if (!user) return;
+                    const c = contributors.find(c => c.id === user.id);
+                    if (!c) return;
+
+                    retVal.props.children.push(ReactHelpers.React.createElement('span', {
+                        className: 'bd-badge-outer',
+                        'data-userid': user.id
+                    }));
+                } catch (err) {
+                    Logger.err('ProfileBadges', ['Error thrown while rendering a NameTag', err]);
+                }
+                return retVal;
+            }
+
+            componentDidMount() {
+                const element = Helpers.ReactDOM.findDOMNode(this);
+                if (!element) return;
+                ProfileBadges.injectMessageBadges(element);
+            }
+
+            componentDidUpdate() {
+                const element = Helpers.ReactDOM.findDOMNode(this);
+                if (!element) return;
+                // ProfileBadges.injectMessageBadges(element);
+            }
+        };
+    }
+
+    injectMessageBadges(element) {
+        for (const beo of element.getElementsByClassName('bd-badge-outer')) this.injectNameTagBadge(beo);
+    }
+
+    injectMessageBadge(root) {
+        const { userid } = root.dataset;
+        if (!userid) return;
+
+        const c = contributors.find(c => c.id === userid);
+        if (!c) return;
+
+        VueInjector.inject(root, {
+            components: { BdMessageBadge },
+            data: { c },
+            template: '<BdMessageBadge :developer="c.developer" :webdev="c.webdev" :contributor="c.contributor" />'
+        }, DOM.createElement('span'));
+        root.classList.add('bd-has-badge');
+    }
+
 }

From 554b8d195bb9ffc6ad97e13120519d335864655c Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 15:16:30 +0100
Subject: [PATCH 34/42] Rename ReactComponentHelpers to ReactHelpers

---
 client/src/modules/modules.js         |  2 +-
 client/src/modules/reactcomponents.js |  4 +++-
 client/src/ui/profilebadges.js        | 18 +++++++++++-------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/src/modules/modules.js b/client/src/modules/modules.js
index cd2fa566..f885fcdb 100644
--- a/client/src/modules/modules.js
+++ b/client/src/modules/modules.js
@@ -16,7 +16,7 @@ export { default as Vendor } from './vendor';
 
 export * from './webpackmodules';
 export * from './patcher';
-export { ReactComponents, ReactAutoPatcher, Helpers as ReactComponentHelpers } from './reactcomponents';
+export * from './reactcomponents';
 export { default as EventListener } from './eventlistener';
 export { default as SocketProxy } from './socketproxy';
 export { default as EventHook } from './eventhook';
diff --git a/client/src/modules/reactcomponents.js b/client/src/modules/reactcomponents.js
index 2164bf91..1b6e460f 100644
--- a/client/src/modules/reactcomponents.js
+++ b/client/src/modules/reactcomponents.js
@@ -16,7 +16,7 @@ import { MonkeyPatch, Patcher } from './patcher';
 import { WebpackModules, Filters } from './webpackmodules';
 import DiscordApi from './discordapi';
 
-export class Helpers {
+class Helpers {
     static get plannedActions() {
         return this._plannedActions || (this._plannedActions = new Map());
     }
@@ -163,6 +163,8 @@ export class Helpers {
     }
 }
 
+export { Helpers as ReactHelpers };
+
 class ReactComponent {
     constructor(id, component, retVal) {
         this._id = id;
diff --git a/client/src/ui/profilebadges.js b/client/src/ui/profilebadges.js
index 49b6a496..316a8953 100644
--- a/client/src/ui/profilebadges.js
+++ b/client/src/ui/profilebadges.js
@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { EventListener, ReactComponents, ReactComponentHelpers as Helpers, MonkeyPatch } from 'modules';
+import { EventListener, ReactComponents, ReactHelpers, MonkeyPatch } from 'modules';
 import { ClientLogger as Logger } from 'common';
 import DOM from './dom';
 import { BdBadge, BdMessageBadge } from './components/bd';
@@ -110,7 +110,7 @@ export default class extends EventListener {
         this.unpatchChannelMemberRender = MonkeyPatch('ProfileBadges', ChannelMember.component.prototype).after('render', (component, args, retVal) => {
             if (!retVal.props || !retVal.props.children) return;
 
-            const user = Helpers.findProp(component, 'user');
+            const user = ReactHelpers.findProp(component, 'user');
             if (!user) return;
             const c = contributors.find(c => c.id === user.id);
             if (!c) return;
@@ -135,7 +135,7 @@ export default class extends EventListener {
                 try {
                     if (!retVal.props || !retVal.props.children) return;
 
-                    const user = Helpers.findProp(this, 'user');
+                    const user = ReactHelpers.findProp(this, 'user');
                     if (!user) return;
                     const c = contributors.find(c => c.id === user.id);
                     if (!c) return;
@@ -151,24 +151,28 @@ export default class extends EventListener {
             }
 
             componentDidMount() {
-                const element = Helpers.ReactDOM.findDOMNode(this);
+                const element = ReactHelpers.ReactDOM.findDOMNode(this);
                 if (!element) return;
                 ProfileBadges.injectMessageBadges(element);
             }
 
             componentDidUpdate() {
-                const element = Helpers.ReactDOM.findDOMNode(this);
+                const element = ReactHelpers.ReactDOM.findDOMNode(this);
                 if (!element) return;
-                // ProfileBadges.injectMessageBadges(element);
+                ProfileBadges.injectMessageBadges(element);
             }
         };
     }
 
     injectMessageBadges(element) {
-        for (const beo of element.getElementsByClassName('bd-badge-outer')) this.injectNameTagBadge(beo);
+        for (const beo of element.getElementsByClassName('bd-badge-outer')) this.injectMessageBadge(beo);
     }
 
     injectMessageBadge(root) {
+        while (root.firstChild) {
+            root.removeChild(root.firstChild);
+        }
+
         const { userid } = root.dataset;
         if (!userid) return;
 

From 3f8928694666f2629fe4b7b0964f724a231cd0dd Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 15:17:33 +0100
Subject: [PATCH 35/42] Refactor message badges

---
 client/src/ui/profilebadges.js | 79 +++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 34 deletions(-)

diff --git a/client/src/ui/profilebadges.js b/client/src/ui/profilebadges.js
index 316a8953..a0ca366d 100644
--- a/client/src/ui/profilebadges.js
+++ b/client/src/ui/profilebadges.js
@@ -18,23 +18,24 @@ import contributors from '../data/contributors';
 export default class extends EventListener {
 
     init() {
+        this.patchMessage();
         this.patchChannelMember();
         this.patchNameTag();
     }
 
     bindings() {
         this.uiEvent = this.uiEvent.bind(this);
-        this.messageBadge = this.messageBadge.bind(this);
-        this.badges = this.badges.bind(this);
+        // this.messageBadge = this.messageBadge.bind(this);
+        // this.badges = this.badges.bind(this);
     }
 
     get eventBindings() {
         return [
-            { id: 'discord:MESSAGE_CREATE', callback: this.messageBadge },
-            { id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge },
-            { id: 'server-switch', callback: this.badges },
-            { id: 'channel-switch', callback: this.badges },
-            { id: 'ui:loadedmore', callback: this.badges },
+            // { id: 'discord:MESSAGE_CREATE', callback: this.messageBadge },
+            // { id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge },
+            // { id: 'server-switch', callback: this.badges },
+            // { id: 'channel-switch', callback: this.badges },
+            // { id: 'ui:loadedmore', callback: this.badges },
             { id: 'ui-event', callback: this.uiEvent }
         ];
     }
@@ -48,33 +49,6 @@ export default class extends EventListener {
         this.inject(userid);
     }
 
-    badges() {
-        for (const messageGroup of document.querySelectorAll('.message-group')) {
-            this.messageBadge({ element: messageGroup });
-        }
-    }
-
-    messageBadge(e) {
-        if (!e.element) return;
-        const msgGroup = e.element.closest('.message-group');
-        if (msgGroup.dataset.hasBadges) return;
-        msgGroup.setAttribute('data-has-badges', true);
-        if (!msgGroup.dataset.authorId) return;
-        const c = contributors.find(c => c.id === msgGroup.dataset.authorId);
-        if (!c) return;
-        const root = document.createElement('span');
-        const usernameWrapper = msgGroup.querySelector('.username-wrapper');
-        if (!usernameWrapper) return;
-        const wrapperParent = usernameWrapper.parentElement;
-        if (!wrapperParent || wrapperParent.children.length < 2) return;
-        wrapperParent.insertBefore(root, wrapperParent.children[1]);
-        VueInjector.inject(root, {
-            components: { BdMessageBadge },
-            data: { c },
-            template: '<BdMessageBadge :developer="c.developer" :webdev="c.webdev" :contributor="c.contributor" />'
-        });
-    }
-
     inject(userid) {
         const c = contributors.find(c => c.id === userid);
         if (!c) return;
@@ -100,6 +74,43 @@ export default class extends EventListener {
         return contributors;
     }
 
+    /**
+     * Patches Message to use the extended NameTag.
+     * This is because NameTag is also used in places we don't really want any badges.
+     */
+    async patchMessage() {
+        const Message = await ReactComponents.getComponent('Message');
+
+        this.unpatchMessageRender = MonkeyPatch('ProfileBadges', Message.component.prototype).after('render', (component, args, retVal) => {
+            if (!retVal.props || !retVal.props.children) return;
+
+            const message = ReactHelpers.findProp(component, 'message');
+            if (!message || !message.author) return;
+            const user = message.author;
+            const c = contributors.find(c => c.id === user.id);
+            if (!c) return;
+
+            const username = ReactHelpers.findByProp(retVal, 'type', 'h2');
+            if (!username) return;
+            username.props.children.splice(1, 0, ReactHelpers.React.createElement('span', {
+                className: 'bd-badge-outer',
+                'data-userid': user.id
+            }));
+        });
+
+        this.unpatchMessageMount = MonkeyPatch('ProfileBadges', Message.component.prototype).after('componentDidMount', component => {
+            const element = ReactHelpers.ReactDOM.findDOMNode(component);
+            if (!element) return;
+            this.injectMessageBadges(element);
+        });
+
+        this.unpatchMessageUpdate = MonkeyPatch('ProfileBadges', Message.component.prototype).after('componentDidUpdate', component => {
+            const element = ReactHelpers.ReactDOM.findDOMNode(component);
+            if (!element) return;
+            this.injectMessageBadges(element);
+        });
+    }
+
     /**
      * Patches ChannelMember to use the extended NameTag.
      * This is because NameTag is also used in places we don't really want any badges.

From 85d390e18d8d7efdacb3e4f70f341b7927af8cfe Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 15:22:36 +0100
Subject: [PATCH 36/42] Rerender messages and channel members after patching

---
 client/src/ui/profilebadges.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/client/src/ui/profilebadges.js b/client/src/ui/profilebadges.js
index a0ca366d..ef9e4566 100644
--- a/client/src/ui/profilebadges.js
+++ b/client/src/ui/profilebadges.js
@@ -9,6 +9,7 @@
 */
 
 import { EventListener, ReactComponents, ReactHelpers, MonkeyPatch } from 'modules';
+import { Reflection } from 'ui';
 import { ClientLogger as Logger } from 'common';
 import DOM from './dom';
 import { BdBadge, BdMessageBadge } from './components/bd';
@@ -25,17 +26,10 @@ export default class extends EventListener {
 
     bindings() {
         this.uiEvent = this.uiEvent.bind(this);
-        // this.messageBadge = this.messageBadge.bind(this);
-        // this.badges = this.badges.bind(this);
     }
 
     get eventBindings() {
         return [
-            // { id: 'discord:MESSAGE_CREATE', callback: this.messageBadge },
-            // { id: 'discord:MESSAGE_UPDATE', callback: this.messageBadge },
-            // { id: 'server-switch', callback: this.badges },
-            // { id: 'channel-switch', callback: this.badges },
-            // { id: 'ui:loadedmore', callback: this.badges },
             { id: 'ui-event', callback: this.uiEvent }
         ];
     }
@@ -109,6 +103,11 @@ export default class extends EventListener {
             if (!element) return;
             this.injectMessageBadges(element);
         });
+
+        // Rerender all messages
+        for (const message of document.querySelectorAll('.message')) {
+            Reflection(message).forceUpdate();
+        }
     }
 
     /**
@@ -140,7 +139,7 @@ export default class extends EventListener {
         const ProfileBadges = this;
         const NameTag = await ReactComponents.getComponent('NameTag', {selector: '.nameTag-26T3kW'});
 
-        return this.PatchedNameTag = class extends NameTag.component {
+        this.PatchedNameTag = class extends NameTag.component {
             render() {
                 const retVal = NameTag.component.prototype.render.call(this, arguments);
                 try {
@@ -173,6 +172,13 @@ export default class extends EventListener {
                 ProfileBadges.injectMessageBadges(element);
             }
         };
+
+        // Rerender all channel members
+        for (const channelMember of document.querySelectorAll('.member-2FrNV0')) {
+            Reflection(channelMember).forceUpdate();
+        }
+
+        return this.PatchedNameTag;
     }
 
     injectMessageBadges(element) {

From 4b59b9f65ddbb29f9e4b63914401ba7fcf07a0c6 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 17:35:09 +0100
Subject: [PATCH 37/42] Prevent opening the popout when the badge is clicked

---
 client/src/ui/components/bd/BdMessageBadge.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/ui/components/bd/BdMessageBadge.vue b/client/src/ui/components/bd/BdMessageBadge.vue
index 9c241190..1344529b 100644
--- a/client/src/ui/components/bd/BdMessageBadge.vue
+++ b/client/src/ui/components/bd/BdMessageBadge.vue
@@ -9,12 +9,13 @@
 */
 
 <template>
-    <div class="bd-message-badges-wrap">
+    <div class="bd-message-badges-wrap" @click.stop>
         <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-message-badge bd-message-badge-developer" @click="click"></div>
         <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-message-badge bd-message-badge-developer" @click="click"></div>
         <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-message-badge bd-message-badge-contributor" @click="click"></div>
     </div>
 </template>
+
 <script>
     // Imports
     import { shell } from 'electron';

From 68beee12d3a4336e860390df6d757686a27e6e9c Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 17:39:46 +0100
Subject: [PATCH 38/42] Add the BD badge before the server owner icon

---
 client/src/ui/profilebadges.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/ui/profilebadges.js b/client/src/ui/profilebadges.js
index ef9e4566..fc709ae6 100644
--- a/client/src/ui/profilebadges.js
+++ b/client/src/ui/profilebadges.js
@@ -150,7 +150,7 @@ export default class extends EventListener {
                     const c = contributors.find(c => c.id === user.id);
                     if (!c) return;
 
-                    retVal.props.children.push(ReactHelpers.React.createElement('span', {
+                    retVal.props.children.splice(1, 0, ReactHelpers.React.createElement('span', {
                         className: 'bd-badge-outer',
                         'data-userid': user.id
                     }));

From d98f1520098b7fcb20b7cc22bf3da9fe8c78891e Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 22:44:01 +0100
Subject: [PATCH 39/42] Refactor UserProfileModals badges

---
 client/src/modules/modules.js           |  1 +
 client/src/modules/reactcomponents.js   |  4 +-
 client/src/styles/partials/badges.scss  |  6 +-
 client/src/ui/bdui.js                   | 28 +++------
 client/src/ui/components/bd/BdBadge.vue |  4 +-
 client/src/ui/profilebadges.js          | 80 +++++++++++--------------
 common/modules/utils.js                 | 11 ++++
 7 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/client/src/modules/modules.js b/client/src/modules/modules.js
index f885fcdb..c305d11a 100644
--- a/client/src/modules/modules.js
+++ b/client/src/modules/modules.js
@@ -17,6 +17,7 @@ export { default as Vendor } from './vendor';
 export * from './webpackmodules';
 export * from './patcher';
 export * from './reactcomponents';
+export { default as Module } from './module';
 export { default as EventListener } from './eventlistener';
 export { default as SocketProxy } from './socketproxy';
 export { default as EventHook } from './eventhook';
diff --git a/client/src/modules/reactcomponents.js b/client/src/modules/reactcomponents.js
index 1b6e460f..55f0c040 100644
--- a/client/src/modules/reactcomponents.js
+++ b/client/src/modules/reactcomponents.js
@@ -229,7 +229,7 @@ export class ReactComponents {
                     return;
                 }
                 if (!reflect.component.displayName) reflect.component.displayName = name;
-                Logger.info('ReactComponents', [`Found important component ${name} with reflection`, reflect.component, reflect]);
+                Logger.info('ReactComponents', [`Found important component ${name} with reflection`, reflect]);
                 this.push(reflect.component);
                 clearInterval(importantInterval);
             }, 50);
@@ -240,7 +240,7 @@ export class ReactComponents {
             listeners: []
         });
         return new Promise(resolve => {
-            this.listeners.find(l => l.id === name).listeners.push(c => resolve(c));
+            this.listeners.find(l => l.id === name).listeners.push(resolve);
         });
     }
 
diff --git a/client/src/styles/partials/badges.scss b/client/src/styles/partials/badges.scss
index fb5656df..585fef64 100644
--- a/client/src/styles/partials/badges.scss
+++ b/client/src/styles/partials/badges.scss
@@ -1,7 +1,11 @@
 .bd-profile-badges-wrap {
-    display: flex;
+    display: inline-flex;
     margin-top: 8px;
     flex: 1 1 auto;
+
+    + [class*="profileBadges"] {
+        display: inline-flex;
+    }
 }
 
 .bd-profile-badges {
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index 47e3667f..df3ff80a 100644
--- a/client/src/ui/bdui.js
+++ b/client/src/ui/bdui.js
@@ -24,49 +24,39 @@ export default class {
             server: DiscordApi.currentGuild,
             channel: DiscordApi.currentChannel
         };
+
         window.addEventListener('keyup', e => Events.emit('gkh:keyup', e));
         this.autoManip = new AutoManip();
-        const defer = setInterval(() => {
-            if (!this.profilePopupModule) return;
-            clearInterval(defer);
-
-            MonkeyPatch('BdUI', this.profilePopupModule).after('open', (context, [userid]) => Events.emit('ui-event', {
-                event: 'profile-popup-open',
-                data: { userid }
-            }));
-        }, 100);
 
         const ehookInterval = setInterval(() => {
             if (!remote.BrowserWindow.getFocusedWindow()) return;
             clearInterval(ehookInterval);
             remote.BrowserWindow.getFocusedWindow().webContents.on('did-navigate-in-page', (e, url, isMainFrame) => {
                 const { currentGuild, currentChannel } = DiscordApi;
+
                 if (!this.pathCache.server) {
                     Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
                     this.pathCache.server = currentGuild;
                     this.pathCache.channel = currentChannel;
                     return;
                 }
+
                 if (!this.pathCache.channel) {
                     Events.emit('channel-switch', currentChannel);
                     this.pathCache.server = currentGuild;
                     this.pathCache.channel = currentChannel;
                     return;
                 }
-                if (currentGuild &&
-                    currentGuild.id &&
-                    this.pathCache.server &&
-                    this.pathCache.server.id !== currentGuild.id) {
+
+                if (currentGuild && currentGuild.id && this.pathCache.server && this.pathCache.server.id !== currentGuild.id) {
                     Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
                     this.pathCache.server = currentGuild;
                     this.pathCache.channel = currentChannel;
                     return;
                 }
-                if (currentChannel &&
-                    currentChannel.id &&
-                    this.pathCache.channel &&
-                    this.pathCache.channel.id !== currentChannel.id) Events.emit('channel-switch', currentChannel);
 
+                if (currentChannel && currentChannel.id && this.pathCache.channel && this.pathCache.channel.id !== currentChannel.id)
+                    Events.emit('channel-switch', currentChannel);
 
                 this.pathCache.server = currentGuild;
                 this.pathCache.channel = currentChannel;
@@ -74,10 +64,6 @@ export default class {
         }, 100);
     }
 
-    static get profilePopupModule() {
-        return WebpackModules.getModuleByProps(['fetchMutualFriends', 'setSection']);
-    }
-
     static injectUi() {
         DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
         DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
diff --git a/client/src/ui/components/bd/BdBadge.vue b/client/src/ui/components/bd/BdBadge.vue
index 0ee34989..1d71284f 100644
--- a/client/src/ui/components/bd/BdBadge.vue
+++ b/client/src/ui/components/bd/BdBadge.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div :class="{'bd-profile-badges-wrap': !hasBadges}">
+    <div class="bd-profile-badges-wrap">
         <div class="bd-profile-badges">
             <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
             <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
@@ -23,7 +23,7 @@
     import { shell } from 'electron';
 
     export default {
-        props: ['webdev', 'developer', 'contributor', 'hasBadges'],
+        props: ['webdev', 'developer', 'contributor'],
         methods: {
             click() {
                 if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
diff --git a/client/src/ui/profilebadges.js b/client/src/ui/profilebadges.js
index fc709ae6..da50b68d 100644
--- a/client/src/ui/profilebadges.js
+++ b/client/src/ui/profilebadges.js
@@ -8,60 +8,21 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { EventListener, ReactComponents, ReactHelpers, MonkeyPatch } from 'modules';
+import { Module, ReactComponents, ReactHelpers, MonkeyPatch, WebpackModules } from 'modules';
 import { Reflection } from 'ui';
-import { ClientLogger as Logger } from 'common';
+import { Utils, ClientLogger as Logger } from 'common';
 import DOM from './dom';
 import { BdBadge, BdMessageBadge } from './components/bd';
 import VueInjector from './vueinjector';
 import contributors from '../data/contributors';
 
-export default class extends EventListener {
+export default class extends Module {
 
     init() {
         this.patchMessage();
         this.patchChannelMember();
         this.patchNameTag();
-    }
-
-    bindings() {
-        this.uiEvent = this.uiEvent.bind(this);
-    }
-
-    get eventBindings() {
-        return [
-            { id: 'ui-event', callback: this.uiEvent }
-        ];
-    }
-
-    uiEvent(e) {
-        const { event, data } = e;
-        if (event !== 'profile-popup-open') return;
-        const { userid } = data;
-        if (!userid) return;
-
-        this.inject(userid);
-    }
-
-    inject(userid) {
-        const c = contributors.find(c => c.id === userid);
-        if (!c) return;
-
-        setTimeout(() => {
-            let hasBadges = false;
-            let root = document.querySelector('[class*="profileBadges"]');
-            if (root) {
-                hasBadges = true;
-            } else {
-                root = document.querySelector('[class*="headerInfo"]');
-            }
-
-            VueInjector.inject(root, {
-                components: { BdBadge },
-                data: { hasBadges, c },
-                template: '<BdBadge :hasBadges="hasBadges" :developer="c.developer" :webdev="c.webdev" :contributor="c.contributor" />',
-            }, DOM.createElement('div', null, 'bdprofilebadges'));
-        }, 400);
+        this.patchUserProfileModals();
     }
 
     get contributors() {
@@ -182,7 +143,8 @@ export default class extends EventListener {
     }
 
     injectMessageBadges(element) {
-        for (const beo of element.getElementsByClassName('bd-badge-outer')) this.injectMessageBadge(beo);
+        for (const beo of element.getElementsByClassName('bd-badge-outer'))
+            this.injectMessageBadge(beo);
     }
 
     injectMessageBadge(root) {
@@ -204,4 +166,34 @@ export default class extends EventListener {
         root.classList.add('bd-has-badge');
     }
 
+    /**
+     * Patches UserProfileModals to inject profile badges into the modal once opened.
+     * TODO: just patch the modal component
+     */
+    async patchUserProfileModals() {
+        const UserProfileModals = WebpackModules.getModuleByName('UserProfileModals');
+
+        MonkeyPatch('BdUI', UserProfileModals).after('open', async (context, [userid]) => {
+            const c = contributors.find(c => c.id === userid);
+            if (!c) return;
+
+            const root = await Utils.until(() => document.querySelector('[class*="headerInfo"]'));
+            const el = DOM.createElement('div', null, 'bdprofilebadges');
+            root.insertBefore(el.element, root.firstChild.nextSibling);
+
+            this.injectProfileBadge(userid, el.element);
+        });
+    }
+
+    injectProfileBadge(userid, root) {
+        const c = contributors.find(c => c.id === userid);
+        if (!c) return;
+
+        VueInjector.inject(root, {
+            components: { BdBadge },
+            data: { c },
+            template: '<BdBadge :developer="c.developer" :webdev="c.webdev" :contributor="c.contributor" />',
+        });
+    }
+
 }
diff --git a/common/modules/utils.js b/common/modules/utils.js
index 9e639b9f..15e8666c 100644
--- a/common/modules/utils.js
+++ b/common/modules/utils.js
@@ -159,6 +159,17 @@ export class Utils {
             enumerable: true
         });
     }
+
+    static async until(check, time = 0) {
+        let value, i;
+        do {
+            // Wait for the next tick
+            await new Promise(resolve => setTimeout(resolve, time));
+            value = check(i);
+            i++;
+        } while (!value);
+        return value;
+    }
 }
 
 export class FileUtils {

From a3038c46fd53675b618193c3ed2f9abc83455f45 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 23:02:02 +0100
Subject: [PATCH 40/42] Undo
 https://github.com/samuelthomas2774/BetterDiscordApp/commit/10fd25607d085c6120a04550a4271b7efc498d3b#diff-e0997702acb90b93fb46357f7576ab03L423

---
 client/src/modules/pluginapi.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index f76dbfd2..a961dd03 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -470,8 +470,8 @@ export default class PluginApi {
             get: () => this.patches
         });
     }
-    monkeyPatch(module) {
-        return MonkeyPatch(this.plugin.id, module);
+    get monkeyPatch() {
+        return m => MonkeyPatch(this.plugin.id, m);
     }
 
 }

From a0f60dddb2201ca42576331b1dfe97bc273a9566 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 23:12:23 +0100
Subject: [PATCH 41/42] Update plugin API (fix Utils not being passed
 arguments)

---
 client/src/modules/pluginapi.js | 34 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index a961dd03..82681401 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -62,18 +62,15 @@ export default class PluginApi {
      * Logger
      */
 
-    loggerLog(...message) { Logger.log(this.plugin.name, message) }
-    loggerErr(...message) { Logger.err(this.plugin.name, message) }
-    loggerWarn(...message) { Logger.warn(this.plugin.name, message) }
-    loggerInfo(...message) { Logger.info(this.plugin.name, message) }
-    loggerDbg(...message) { Logger.dbg(this.plugin.name, message) }
     get Logger() {
         return {
-            log: this.loggerLog.bind(this),
-            err: this.loggerErr.bind(this),
-            warn: this.loggerWarn.bind(this),
-            info: this.loggerInfo.bind(this),
-            dbg: this.loggerDbg.bind(this)
+            log: (...message) => Logger.log(this.plugin.name, message),
+            error: (...message) => Logger.err(this.plugin.name, message),
+            err: (...message) => Logger.err(this.plugin.name, message),
+            warn: (...message) => Logger.warn(this.plugin.name, message),
+            info: (...message) => Logger.info(this.plugin.name, message),
+            debug: (...message) => Logger.dbg(this.plugin.name, message),
+            dbg: (...message) => Logger.dbg(this.plugin.name, message)
         };
     }
 
@@ -83,14 +80,15 @@ export default class PluginApi {
 
     get Utils() {
         return {
-            overload: () => Utils.overload.apply(Utils, arguments),
-            tryParseJson: () => Utils.tryParseJson.apply(Utils, arguments),
-            toCamelCase: () => Utils.toCamelCase.apply(Utils, arguments),
-            compare: () => Utils.compare.apply(Utils, arguments),
-            deepclone: () => Utils.deepclone.apply(Utils, arguments),
-            deepfreeze: () => Utils.deepfreeze.apply(Utils, arguments),
-            removeFromArray: () => Utils.removeFromArray.apply(Utils, arguments),
-            defineSoftGetter: () => Utils.defineSoftGetter.apply(Utils, arguments)
+            overload: (...args) => Utils.overload.apply(Utils, args),
+            tryParseJson: (...args) => Utils.tryParseJson.apply(Utils, args),
+            toCamelCase: (...args) => Utils.toCamelCase.apply(Utils, args),
+            compare: (...args) => Utils.compare.apply(Utils, args),
+            deepclone: (...args) => Utils.deepclone.apply(Utils, args),
+            deepfreeze: (...args) => Utils.deepfreeze.apply(Utils, args),
+            removeFromArray: (...args) => Utils.removeFromArray.apply(Utils, args),
+            defineSoftGetter: (...args) => Utils.defineSoftGetter.apply(Utils, args),
+            until: (...args) => Utils.until.apply(Utils, args)
         };
     }
 

From 027ca8d639ce26bae3a1e2a8aeb5a4387185c6fc Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 1 Apr 2018 23:17:33 +0100
Subject: [PATCH 42/42] Change plugin API WebpackModules
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

getModule[…] returns a module (first = true)
getModules[…] returns an array (first = false)
---
 client/src/modules/pluginapi.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/client/src/modules/pluginapi.js b/client/src/modules/pluginapi.js
index 82681401..1b09342f 100644
--- a/client/src/modules/pluginapi.js
+++ b/client/src/modules/pluginapi.js
@@ -402,14 +402,23 @@ export default class PluginApi {
     getWebpackModuleByName(name, fallback) {
         return WebpackModules.getModuleByName(name, fallback);
     }
-    getWebpackModuleByRegex(regex, first = true) {
-        return WebpackModules.getModuleByRegex(regex, first);
+    getWebpackModuleByRegex(regex) {
+        return WebpackModules.getModuleByRegex(regex, true);
     }
-    getWebpackModuleByProperties(props, first = true) {
-        return WebpackModules.getModuleByProps(props, first);
+    getWebpackModulesByRegex(regex) {
+        return WebpackModules.getModuleByRegex(regex, false);
     }
-    getWebpackModuleByPrototypeFields(props, first = true) {
-        return WebpackModules.getModuleByPrototypes(props, first);
+    getWebpackModuleByProperties(...props) {
+        return WebpackModules.getModuleByProps(props, true);
+    }
+    getWebpackModuleByPrototypeFields(...props) {
+        return WebpackModules.getModuleByPrototypes(props, true);
+    }
+    getWebpackModulesByProperties(...props) {
+        return WebpackModules.getModuleByProps(props, false);
+    }
+    getWebpackModulesByPrototypeFields(...props) {
+        return WebpackModules.getModuleByPrototypes(props, false);
     }
     get WebpackModules() {
         return Object.defineProperty({
@@ -417,8 +426,11 @@ export default class PluginApi {
             getModuleByName: this.getWebpackModuleByName.bind(this),
             getModuleByDisplayName: this.getWebpackModuleByName.bind(this),
             getModuleByRegex: this.getWebpackModuleByRegex.bind(this),
+            getModulesByRegex: this.getWebpackModulesByRegex.bind(this),
             getModuleByProperties: this.getWebpackModuleByProperties.bind(this),
-            getModuleByPrototypeFields: this.getWebpackModuleByPrototypeFields.bind(this)
+            getModuleByPrototypeFields: this.getWebpackModuleByPrototypeFields.bind(this),
+            getModulesByProperties: this.getWebpackModulesByProperties.bind(this),
+            getModulesByPrototypeFields: this.getWebpackModulesByPrototypeFields.bind(this)
         }, 'require', {
             get: () => this.webpackRequire
         });