From 50badaef2bd1ad08cbb12975280ad0a63768ab2b Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 9 Aug 2018 17:20:06 +0300
Subject: [PATCH 01/17] add collection and make kvp functional

---
 client/src/data/user.settings.default.json    | 17 ++++++++---
 client/src/structs/settings/setting.js        |  3 +-
 .../src/structs/settings/types/collection.js  | 29 +++++++++++++++++++
 client/src/structs/settings/types/index.js    |  1 +
 client/src/structs/settings/types/kvp.js      |  2 +-
 .../ui/components/bd/setting/Collection.vue   | 28 ++++++++++++++++++
 .../ui/components/bd/setting/KeyValuePair.vue | 15 ++++++----
 .../src/ui/components/bd/setting/Setting.vue  |  5 +++-
 8 files changed, 88 insertions(+), 12 deletions(-)
 create mode 100644 client/src/structs/settings/types/collection.js
 create mode 100644 client/src/ui/components/bd/setting/Collection.vue

diff --git a/client/src/data/user.settings.default.json b/client/src/data/user.settings.default.json
index 3a57d7c8..0698f71f 100644
--- a/client/src/data/user.settings.default.json
+++ b/client/src/data/user.settings.default.json
@@ -171,10 +171,19 @@
                 "type": "drawer",
                 "settings": [
                     {
-                        "id": "kvp0",
-                        "type": "kvp",
-                        "text": "",
-                        "value": { "key": "kvpKey", "value":  "kvpValue" }
+                        "id": "e2ekvps",
+                        "type": ["kvp"],
+                        "value": [
+                            {
+                                "id": "kvp0",
+                                "type": "kvp",
+                                "text": "",
+                                "value": {
+                                    "key": "kvpKey",
+                                    "value": "kvpValue"
+                                }
+                            }
+                        ]
                     }
                 ]
             }
diff --git a/client/src/structs/settings/setting.js b/client/src/structs/settings/setting.js
index 82ba7ba1..3eec79b9 100644
--- a/client/src/structs/settings/setting.js
+++ b/client/src/structs/settings/setting.js
@@ -19,6 +19,7 @@ import KeybindSetting from './types/keybind';
 import FileSetting from './types/file';
 import GuildSetting from './types/guild';
 import ArraySetting from './types/array';
+import CollectionSetting from './types/collection';
 import KvpSetting from './types/kvp';
 import CustomSetting from './types/custom';
 
@@ -26,7 +27,7 @@ export default class Setting {
 
     constructor(args, ...merge) {
         args = args.args || args;
-
+        if (args.type instanceof Array) return new CollectionSetting(args, ...merge);
         if (args.type === 'color') args.type = 'colour';
 
         if (args.type === 'bool') return new BoolSetting(args, ...merge);
diff --git a/client/src/structs/settings/types/collection.js b/client/src/structs/settings/types/collection.js
new file mode 100644
index 00000000..011a1eb1
--- /dev/null
+++ b/client/src/structs/settings/types/collection.js
@@ -0,0 +1,29 @@
+/**
+ * BetterDiscord Collection Setting Struct
+ * 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 BaseSetting from './basesetting';
+import Setting from '../setting';
+
+export default class CollectionSetting extends BaseSetting {
+
+    constructor(args) {
+        super(args);
+        this.subtype = args.type[0];
+        args.type = 'collection';
+        this.sub = new Setting({ type: this.subtype });
+    }
+
+    /**
+     * The value to use when the setting doesn't have a value.
+     */
+    get defaultValue() {
+        return [];
+    }
+}
diff --git a/client/src/structs/settings/types/index.js b/client/src/structs/settings/types/index.js
index 16f60e1e..3ad64c51 100644
--- a/client/src/structs/settings/types/index.js
+++ b/client/src/structs/settings/types/index.js
@@ -10,4 +10,5 @@ export { default as FileSetting } from './file';
 export { default as GuildSetting } from './guild';
 export { default as ArraySetting } from './array';
 export { default as KvpSetting } from './kvp';
+export { default as CollectionSetting } from './kvp';
 export { default as CustomSetting } from './custom';
diff --git a/client/src/structs/settings/types/kvp.js b/client/src/structs/settings/types/kvp.js
index 52c4a04a..466b0094 100644
--- a/client/src/structs/settings/types/kvp.js
+++ b/client/src/structs/settings/types/kvp.js
@@ -16,6 +16,6 @@ export default class KvpSetting extends Setting {
      * The value to use when the setting doesn't have a value.
      */
     get defaultValue() {
-        return { key: 'Channel ID', value: 'Encryption Key' };
+        return { key: 'Key', value: 'Value' };
     }
 }
diff --git a/client/src/ui/components/bd/setting/Collection.vue b/client/src/ui/components/bd/setting/Collection.vue
new file mode 100644
index 00000000..0a61edf2
--- /dev/null
+++ b/client/src/ui/components/bd/setting/Collection.vue
@@ -0,0 +1,28 @@
+/**
+ * BetterDiscord Setting Bool 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-formCollection">
+        <template v-for="s in setting.value">
+            <KeyValuePair v-if="setting.subtype === 'kvp'" :setting="s" :key="s.id" />
+            <Bool v-else-if="setting.subtype === 'bool'" :setting="s" :key="s.id" />
+        </template>
+    </div>
+</template>
+
+<script>
+    import KeyValuePair from './KeyValuePair.vue';
+    import Bool from './Bool.vue';
+    export default {
+        props: ['setting'],
+        components: { KeyValuePair, Bool },
+        mounted() { console.log('collection', this.setting) }
+    }
+</script>
diff --git a/client/src/ui/components/bd/setting/KeyValuePair.vue b/client/src/ui/components/bd/setting/KeyValuePair.vue
index e946c72a..b0e2cade 100644
--- a/client/src/ui/components/bd/setting/KeyValuePair.vue
+++ b/client/src/ui/components/bd/setting/KeyValuePair.vue
@@ -12,12 +12,11 @@
     <div class="bd-formKvp">
         <div class="bd-formKvpDetails">
             <div class="bd-inputWrapper">
-                <input type="text" class="bd-textInput" :value="setting.value.key" />
+                <input type="text" class="bd-textInput" :value="setting.value.key" @keyup.stop @input="keyChange"/>
             </div>
             <div class="bd-inputWrapper">
-                <input type="text" class="bd-textInput" :value="setting.value.value" />
+                <input type="text" class="bd-textInput" :value="setting.value.value" @keyup.stop @input="valueChange"/>
             </div>
-                <!-- using a text field is temporary -->
         </div>
     </div>
 </template>
@@ -25,7 +24,13 @@
 <script>
     export default {
         props: ['setting'],
-        methods: {},
-        mounted() {console.log('setting', this.setting)}
+        methods: {
+            keyChange(e) {
+                this.setting.value.key = e.target.value;
+            },
+            valueChange(e) {
+                this.setting.value.value = e.target.value;
+            }
+        }
     }
 </script>
diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index 481e4ea0..3fb42e2f 100644
--- a/client/src/ui/components/bd/setting/Setting.vue
+++ b/client/src/ui/components/bd/setting/Setting.vue
@@ -22,7 +22,8 @@
         <FileSetting v-if="setting.type === 'file'" :setting="setting" />
         <GuildSetting v-if="setting.type === 'guild'" :setting="setting" />
         <ArraySetting v-if="setting.type === 'array'" :setting="setting" />
-        <KeyValuePair v-if="setting.type === 'kvp'" :setting="setting"/>
+        <Collection v-if="setting.type === 'collection'" :setting="setting" />
+        <KeyValuePair v-if="setting.type === 'kvp'" :setting="setting" />
         <CustomSetting v-if="setting.type === 'custom'" :setting="setting" />
         <div class="bd-form-divider"></div>
     </div>
@@ -42,6 +43,7 @@
     import FileSetting from './File.vue';
     import GuildSetting from './Guild.vue';
     import ArraySetting from './Array.vue';
+    import Collection from './Collection.vue';
     import KeyValuePair from './KeyValuePair.vue';
     import CustomSetting from './Custom.vue';
 
@@ -62,6 +64,7 @@
             FileSetting,
             GuildSetting,
             ArraySetting,
+            Collection,
             KeyValuePair,
             CustomSetting
         },

From 5af8a2168d5cbe43461affac1427041ed268811c Mon Sep 17 00:00:00 2001
From: Zack Rauen <rauenzi@outlook.com>
Date: Thu, 9 Aug 2018 11:31:11 -0400
Subject: [PATCH 02/17] fix class search

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

diff --git a/client/src/ui/classnormaliser.js b/client/src/ui/classnormaliser.js
index f8509bf4..52cf0bf7 100644
--- a/client/src/ui/classnormaliser.js
+++ b/client/src/ui/classnormaliser.js
@@ -29,8 +29,8 @@ export default class ClassNormaliser extends Module {
     shouldIgnore(value) {
         if (!isNaN(value)) return true;
         if (value.endsWith('px') || value.endsWith('ch') || value.endsWith('em') || value.endsWith('ms')) return true;
-        if (value.startsWith('rgba')) return true;
-        if (value.includes('calc(')) return true;
+        if (value.startsWith('#') && (value.length == 7 || value.length == 4)) return true;
+        if (value.includes('calc(') || value.includes('rgba')) return true;
         return false;
     }
 

From 883f7602928003d1eafa927a27bad1bd575e9e27 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Thu, 9 Aug 2018 18:22:15 +0100
Subject: [PATCH 03/17] Extend ArraySetting for collections

---
 client/src/structs/settings/setting.js        |  6 ++-
 .../src/structs/settings/types/collection.js  | 40 ++++++++++++++-----
 .../ui/components/bd/setting/Collection.vue   | 21 ++++++----
 3 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/client/src/structs/settings/setting.js b/client/src/structs/settings/setting.js
index 3eec79b9..618596ce 100644
--- a/client/src/structs/settings/setting.js
+++ b/client/src/structs/settings/setting.js
@@ -27,7 +27,8 @@ export default class Setting {
 
     constructor(args, ...merge) {
         args = args.args || args;
-        if (args.type instanceof Array) return new CollectionSetting(args, ...merge);
+
+        if (args.type instanceof Array) args.subtype = args.type[0], args.type = 'collection';
         if (args.type === 'color') args.type = 'colour';
 
         if (args.type === 'bool') return new BoolSetting(args, ...merge);
@@ -41,8 +42,9 @@ export default class Setting {
         else if (args.type === 'file') return new FileSetting(args, ...merge);
         else if (args.type === 'guild') return new GuildSetting(args, ...merge);
         else if (args.type === 'array') return new ArraySetting(args, ...merge);
-        else if (args.type === 'custom') return new CustomSetting(args, ...merge);
+        else if (args.type === 'collection') return new CollectionSetting(args, ...merge);
         else if (args.type === 'kvp') return new KvpSetting(args, ...merge);
+        else if (args.type === 'custom') return new CustomSetting(args, ...merge);
         else throw {message: `Setting type ${args.type} unknown`};
     }
 
diff --git a/client/src/structs/settings/types/collection.js b/client/src/structs/settings/types/collection.js
index 011a1eb1..2390f489 100644
--- a/client/src/structs/settings/types/collection.js
+++ b/client/src/structs/settings/types/collection.js
@@ -8,22 +8,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BaseSetting from './basesetting';
+import { Utils } from 'common';
+import ArraySetting from './array';
 import Setting from '../setting';
 
-export default class CollectionSetting extends BaseSetting {
+export default class CollectionSetting extends ArraySetting {
 
-    constructor(args) {
-        super(args);
-        this.subtype = args.type[0];
-        args.type = 'collection';
-        this.sub = new Setting({ type: this.subtype });
+    constructor(args, ...merge) {
+        // The ArraySetting constructor will call createItem which requires this to be set
+        if (!(args.setting instanceof Setting)) args.setting = new Setting(args.setting || {type: args.subtype});
+
+        super(args, ...merge);
+    }
+
+    get setting() {
+        return this.args.setting;
     }
 
     /**
-     * The value to use when the setting doesn't have a value.
+     * Creates a new setting for this collection setting.
+     * @param {Setting} item Values to merge into the new setting (optional)
+     * @return {Setting} The new set
      */
-    get defaultValue() {
-        return [];
+    createItem(item) {
+        if (item instanceof Setting)
+            return item;
+
+        const merge = [...arguments].filter(a => a);
+        const setting = this.setting.clone(...merge);
+        setting.args.id = item ? item.args ? item.args.id : item.id : Math.random();
+
+        setting.setSaved();
+        setting.on('settings-updated', async event => {
+            await this.emit('item-updated', { item: setting, event, updatedSettings: event.updatedSettings });
+            if (event.args.updating_array !== this) await this.updateValue();
+        });
+        return setting;
     }
+
 }
diff --git a/client/src/ui/components/bd/setting/Collection.vue b/client/src/ui/components/bd/setting/Collection.vue
index 0a61edf2..87c582bd 100644
--- a/client/src/ui/components/bd/setting/Collection.vue
+++ b/client/src/ui/components/bd/setting/Collection.vue
@@ -1,5 +1,5 @@
 /**
- * BetterDiscord Setting Bool Component
+ * BetterDiscord Collection Setting Component
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net
@@ -10,19 +10,24 @@
 
 <template>
     <div class="bd-formCollection">
-        <template v-for="s in setting.value">
-            <KeyValuePair v-if="setting.subtype === 'kvp'" :setting="s" :key="s.id" />
-            <Bool v-else-if="setting.subtype === 'bool'" :setting="s" :key="s.id" />
+        <template v-for="s in setting.items">
+            <Setting :setting="s" :key="s.id" />
         </template>
     </div>
 </template>
 
 <script>
-    import KeyValuePair from './KeyValuePair.vue';
-    import Bool from './Bool.vue';
+    import Setting from './Setting.vue';
+
     export default {
         props: ['setting'],
-        components: { KeyValuePair, Bool },
-        mounted() { console.log('collection', this.setting) }
+        components: {},
+        beforeCreate() {
+            // https://vuejs.org/v2/guide/components.html#Circular-References-Between-Components
+            this.$options.components.Setting = Setting;
+        },
+        mounted() {
+            console.log('collection', this.setting);
+        }
     }
 </script>

From 263fcbe00162d2687397cf91ad808ed250723da0 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 9 Aug 2018 20:22:48 +0300
Subject: [PATCH 04/17] Collection fix

---
 client/src/data/user.settings.default.json    |  3 --
 .../src/structs/settings/types/collection.js  | 20 ++++---
 .../partials/bdsettings/collection.scss       | 53 +++++++++++++++++++
 .../src/styles/partials/bdsettings/index.scss |  1 +
 .../ui/components/bd/setting/Collection.vue   | 24 +++++++--
 .../ui/components/bd/setting/KeyValuePair.vue |  4 +-
 6 files changed, 89 insertions(+), 16 deletions(-)
 create mode 100644 client/src/styles/partials/bdsettings/collection.scss

diff --git a/client/src/data/user.settings.default.json b/client/src/data/user.settings.default.json
index 0698f71f..5f1bc19d 100644
--- a/client/src/data/user.settings.default.json
+++ b/client/src/data/user.settings.default.json
@@ -175,9 +175,6 @@
                         "type": ["kvp"],
                         "value": [
                             {
-                                "id": "kvp0",
-                                "type": "kvp",
-                                "text": "",
                                 "value": {
                                     "key": "kvpKey",
                                     "value": "kvpValue"
diff --git a/client/src/structs/settings/types/collection.js b/client/src/structs/settings/types/collection.js
index 011a1eb1..6abc3e2e 100644
--- a/client/src/structs/settings/types/collection.js
+++ b/client/src/structs/settings/types/collection.js
@@ -8,16 +8,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BaseSetting from './basesetting';
 import Setting from '../setting';
+import Base from './basesetting';
+import SettingsSet from '../settingsset';
+import SettingsCategory from '../settingscategory';
+import SettingsScheme from '../settingsscheme';
 
-export default class CollectionSetting extends BaseSetting {
+export default class CollectionSetting extends Base {
 
-    constructor(args) {
-        super(args);
+    constructor(args, ...merge) {
+        super(args, ...merge);
         this.subtype = args.type[0];
-        args.type = 'collection';
-        this.sub = new Setting({ type: this.subtype });
+        this.args.type = 'collection';
+        this.items = this.value.map(item => this.create(item));
+    }
+
+    create(item) {
+        item.type = this.subtype;
+        return new Setting(item);
     }
 
     /**
diff --git a/client/src/styles/partials/bdsettings/collection.scss b/client/src/styles/partials/bdsettings/collection.scss
new file mode 100644
index 00000000..81ade0b9
--- /dev/null
+++ b/client/src/styles/partials/bdsettings/collection.scss
@@ -0,0 +1,53 @@
+.bd-formCollection {
+    display: flex;
+    flex-direction: column;
+
+    div:first-child {
+        flex: 1 1 auto;
+    }
+
+    .bd-collectionItem {
+        display: flex;
+        flex-grow: 1;
+        margin-top: 5px;
+
+        .bd-removeCollectionItem {
+            width: 20px;
+            flex: 0 1 auto;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+
+            &:hover {
+                svg {
+                    fill: #FFF;
+                }
+            }
+
+            svg {
+                width: 16px;
+                height: 16px;
+                fill: #ccc;
+            }
+        }
+    }
+
+    .bd-newCollectionItem {
+        font-weight: 500;
+        color: #ccc;
+        font-size: 26px;
+        width: 20px;
+        height: 20px;
+        margin-top: 5px;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+
+        &:hover {
+            color: #FFF;
+        }
+    }
+}
diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss
index 56081af4..fbadb580 100644
--- a/client/src/styles/partials/bdsettings/index.scss
+++ b/client/src/styles/partials/bdsettings/index.scss
@@ -8,3 +8,4 @@
 @import './updater.scss';
 @import './window-preferences';
 @import './kvp';
+@import './collection';
diff --git a/client/src/ui/components/bd/setting/Collection.vue b/client/src/ui/components/bd/setting/Collection.vue
index 0a61edf2..c5755140 100644
--- a/client/src/ui/components/bd/setting/Collection.vue
+++ b/client/src/ui/components/bd/setting/Collection.vue
@@ -10,19 +10,33 @@
 
 <template>
     <div class="bd-formCollection">
-        <template v-for="s in setting.value">
-            <KeyValuePair v-if="setting.subtype === 'kvp'" :setting="s" :key="s.id" />
+        <div v-for="(s, index) in setting.items" class="bd-collectionItem">
+            <KeyValuePair v-if="setting.subtype === 'kvp'" :setting="s" :key="s.id"/>
             <Bool v-else-if="setting.subtype === 'bool'" :setting="s" :key="s.id" />
-        </template>
+            <div class="bd-removeCollectionItem" @click="() => removeItem(index)"><MiMinus/></div>
+        </div>
+        <div class="bd-newCollectionItem" @click="addItem">+</div>
     </div>
 </template>
 
 <script>
+    import { Settings } from 'modules';
+    import { Setting } from 'structs';
     import KeyValuePair from './KeyValuePair.vue';
     import Bool from './Bool.vue';
+
+    import { MiMinus } from '../../common';
     export default {
         props: ['setting'],
-        components: { KeyValuePair, Bool },
-        mounted() { console.log('collection', this.setting) }
+        components: { KeyValuePair, Bool, MiMinus },
+        methods: {
+            removeItem(index) {
+                this.setting.value = this.setting.items.splice(index, 1);
+            },
+            addItem() {
+                const add = new Setting({ type: this.setting.subtype });
+                this.setting.items = this.setting.value = [...this.setting.items, add];
+            }
+        }
     }
 </script>
diff --git a/client/src/ui/components/bd/setting/KeyValuePair.vue b/client/src/ui/components/bd/setting/KeyValuePair.vue
index b0e2cade..67806e98 100644
--- a/client/src/ui/components/bd/setting/KeyValuePair.vue
+++ b/client/src/ui/components/bd/setting/KeyValuePair.vue
@@ -26,10 +26,10 @@
         props: ['setting'],
         methods: {
             keyChange(e) {
-                this.setting.value.key = e.target.value;
+                this.setting.value = { key: e.target.value, value: this.setting.value.value }
             },
             valueChange(e) {
-                this.setting.value.value = e.target.value;
+                this.setting.value = { key: this.setting.value.key, value: e.target.value }
             }
         }
     }

From 4ed301f531c8ae4bd014ec3faccd08a71d867b57 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 9 Aug 2018 20:26:37 +0300
Subject: [PATCH 05/17] Styling

---
 client/src/styles/partials/bdsettings/collection.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/collection.scss b/client/src/styles/partials/bdsettings/collection.scss
index 81ade0b9..3cedba4e 100644
--- a/client/src/styles/partials/bdsettings/collection.scss
+++ b/client/src/styles/partials/bdsettings/collection.scss
@@ -34,9 +34,8 @@
     }
 
     .bd-newCollectionItem {
-        font-weight: 500;
         color: #ccc;
-        font-size: 26px;
+        font-size: 24px;
         width: 20px;
         height: 20px;
         margin-top: 5px;
@@ -44,6 +43,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        align-self: flex-end;
         cursor: pointer;
 
         &:hover {

From d14a06528c040771de7597a76a028955aafaa642 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 9 Aug 2018 23:07:53 +0300
Subject: [PATCH 06/17] else

---
 .../src/ui/components/bd/setting/Setting.vue  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index 3fb42e2f..af430c9e 100644
--- a/client/src/ui/components/bd/setting/Setting.vue
+++ b/client/src/ui/components/bd/setting/Setting.vue
@@ -11,20 +11,20 @@
 <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" />
-        <StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" />
-        <MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" />
-        <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" />
-        <GuildSetting v-if="setting.type === 'guild'" :setting="setting" />
-        <ArraySetting v-if="setting.type === 'array'" :setting="setting" />
-        <Collection v-if="setting.type === 'collection'" :setting="setting" />
-        <KeyValuePair v-if="setting.type === 'kvp'" :setting="setting" />
-        <CustomSetting v-if="setting.type === 'custom'" :setting="setting" />
+        <StringSetting v-else-if="setting.type === 'text' && !setting.multiline" :setting="setting" />
+        <MultilineTextSetting v-else-if="setting.type === 'text' && setting.multiline" :setting="setting" />
+        <NumberSetting v-else-if="setting.type === 'number'" :setting="setting" />
+        <DropdownSetting v-else-if="setting.type === 'dropdown'" :setting="setting" />
+        <RadioSetting v-else-if="setting.type === 'radio'" :setting="setting" />
+        <SliderSetting v-else-if="setting.type === 'slider'" :setting="setting" />
+        <ColourSetting v-else-if="setting.type === 'colour'" :setting="setting" />
+        <KeybindSetting v-else-if="setting.type === 'keybind'" :setting="setting" />
+        <FileSetting v-else-if="setting.type === 'file'" :setting="setting" />
+        <GuildSetting v-else-if="setting.type === 'guild'" :setting="setting" />
+        <ArraySetting v-else-if="setting.type === 'array'" :setting="setting" />
+        <Collection v-else-if="setting.type === 'collection'" :setting="setting" />
+        <KeyValuePair v-else-if="setting.type === 'kvp'" :setting="setting" />
+        <CustomSetting v-else-if="setting.type === 'custom'" :setting="setting" />
         <div class="bd-form-divider"></div>
     </div>
 </template>

From fcfba41805a30e2be234755b3132b3bae9d2c89d Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 9 Aug 2018 23:13:38 +0300
Subject: [PATCH 07/17] Styling and remove default from E2EE

---
 client/src/data/user.settings.default.json            | 9 +--------
 client/src/styles/partials/bdsettings/collection.scss | 1 +
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/client/src/data/user.settings.default.json b/client/src/data/user.settings.default.json
index 5f1bc19d..29137e6d 100644
--- a/client/src/data/user.settings.default.json
+++ b/client/src/data/user.settings.default.json
@@ -173,14 +173,7 @@
                     {
                         "id": "e2ekvps",
                         "type": ["kvp"],
-                        "value": [
-                            {
-                                "value": {
-                                    "key": "kvpKey",
-                                    "value": "kvpValue"
-                                }
-                            }
-                        ]
+                        "value": []
                     }
                 ]
             }
diff --git a/client/src/styles/partials/bdsettings/collection.scss b/client/src/styles/partials/bdsettings/collection.scss
index 3cedba4e..689607d2 100644
--- a/client/src/styles/partials/bdsettings/collection.scss
+++ b/client/src/styles/partials/bdsettings/collection.scss
@@ -18,6 +18,7 @@
             justify-content: center;
             align-items: center;
             cursor: pointer;
+            margin-bottom: 30px;
 
             &:hover {
                 svg {

From 2b4a804934dd5e57640913a3b60d2ac1fdf6eeef Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 9 Aug 2018 23:21:57 +0300
Subject: [PATCH 08/17] Use material icon

---
 .../partials/bdsettings/collection.scss       | 21 +++++++++++--------
 .../ui/components/bd/setting/Collection.vue   |  6 +++---
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/collection.scss b/client/src/styles/partials/bdsettings/collection.scss
index 689607d2..3f086070 100644
--- a/client/src/styles/partials/bdsettings/collection.scss
+++ b/client/src/styles/partials/bdsettings/collection.scss
@@ -35,20 +35,23 @@
     }
 
     .bd-newCollectionItem {
-        color: #ccc;
-        font-size: 24px;
-        width: 20px;
-        height: 20px;
-        margin-top: 5px;
-        text-align: center;
         display: flex;
+        cursor: pointer;
+        align-self: flex-end;
         justify-content: center;
         align-items: center;
-        align-self: flex-end;
-        cursor: pointer;
+        margin-right: 2px;
+
+        svg {
+            width: 16px;
+            height: 16px;
+            fill: #ccc;
+        }
 
         &:hover {
-            color: #FFF;
+            svg {
+                fill: #FFF;
+            }
         }
     }
 }
diff --git a/client/src/ui/components/bd/setting/Collection.vue b/client/src/ui/components/bd/setting/Collection.vue
index d31116c9..5fa5ebf7 100644
--- a/client/src/ui/components/bd/setting/Collection.vue
+++ b/client/src/ui/components/bd/setting/Collection.vue
@@ -14,18 +14,18 @@
             <Setting :setting="s" :key="s.id" />
             <div class="bd-removeCollectionItem" @click="removeItem(s)"><MiMinus/></div>
         </div>
-        <div class="bd-newCollectionItem" @click="addItem">+</div>
+        <div class="bd-newCollectionItem" @click="addItem"><MiPlus/></div>
     </div>
 </template>
 
 <script>
     import Setting from './Setting.vue';
-    import { MiMinus } from '../../common';
+    import { MiMinus, MiPlus } from '../../common';
 
     export default {
         props: ['setting'],
         components: {
-            MiMinus
+            MiMinus, MiPlus
         },
         methods: {
             removeItem(item) {

From fdb3b308e1ae3d6465c4d17d59f1ce26ec784c46 Mon Sep 17 00:00:00 2001
From: Zack Rauen <rauenzi@outlook.com>
Date: Thu, 9 Aug 2018 16:33:31 -0400
Subject: [PATCH 09/17] add bd file check for upload drop area

---
 client/src/modules/reactcomponents.js | 28 ++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/client/src/modules/reactcomponents.js b/client/src/modules/reactcomponents.js
index 0b9e5bbe..e8d97cef 100644
--- a/client/src/modules/reactcomponents.js
+++ b/client/src/modules/reactcomponents.js
@@ -10,7 +10,7 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-import { DOM, Reflection } from 'ui';
+import { DOM, Reflection, Modals } from 'ui';
 import { Utils, Filters, ClientLogger as Logger } from 'common';
 import { MonkeyPatch } from './patcher';
 import { WebpackModules } from './webpackmodules';
@@ -501,4 +501,30 @@ export class ReactAutoPatcher {
 
         this.UserPopout.forceUpdateAll();
     }
+
+    static async patchUploadArea() {
+        const selector = '.' + WebpackModules.getClassName('uploadArea');
+        this.UploadArea = await ReactComponents.getComponent('UploadArea', {selector});
+
+        const reflect = Reflection(selector);
+        const stateNode = reflect.getComponentStateNode(this.UploadArea);
+        const callback = function(e) {
+            if (!e.dataTransfer.files.length || !e.dataTransfer.files[0].name.endsWith('.bd')) return;
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            stateNode.clearDragging();
+            Modals.confirm("Function not ready", `You tried to install "${e.dataTransfer.files[0].path}", but installing .bd files isn't ready yet.`)
+            // Possibly something like Events.emit('install-file', e.dataTransfer.files[0]);
+        };
+
+        // Remove their handler, add ours, then readd theirs to give ours priority to stop theirs when we get a .bd file.
+        reflect.element.removeEventListener('drop', stateNode.handleDrop);
+        reflect.element.addEventListener('drop', callback);
+        reflect.element.addEventListener('drop', stateNode.handleDrop);
+
+        this.unpatchUploadArea = function() {
+            reflect.element.removeEventListener('drop', callback);
+        };
+    }
 }

From 387227cc1ff050fcc02afbb23b2ee26e24a5b7a3 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Thu, 9 Aug 2018 22:50:14 +0100
Subject: [PATCH 10/17] =?UTF-8?q?Use=20Vue=E2=80=99s=20transition=20elemen?=
 =?UTF-8?q?t=20to=20transition=20between=20menu=20panels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../partials/bdsettings/sidebarview.scss      |  3 +
 .../styles/partials/sidebarview/content.scss  | 37 ++++----
 client/src/ui/bdui.js                         | 18 ++--
 client/src/ui/components/BdSettings.vue       | 94 ++++++-------------
 client/src/ui/components/sidebar/Button.vue   |  4 +-
 client/src/ui/components/sidebar/Item.vue     |  4 +-
 client/src/ui/components/sidebar/index.js     |  2 +-
 7 files changed, 63 insertions(+), 99 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/sidebarview.scss b/client/src/styles/partials/bdsettings/sidebarview.scss
index bdb1ae84..50a5e949 100644
--- a/client/src/styles/partials/bdsettings/sidebarview.scss
+++ b/client/src/styles/partials/bdsettings/sidebarview.scss
@@ -122,6 +122,9 @@
             }
         }
 
+        &.bd-stop .bd-sidebar-region {
+            z-index: 3004;
+        }
         &.bd-stop .bd-content-region {
             z-index: 3003;
         }
diff --git a/client/src/styles/partials/sidebarview/content.scss b/client/src/styles/partials/sidebarview/content.scss
index 626230dc..949742fc 100644
--- a/client/src/styles/partials/sidebarview/content.scss
+++ b/client/src/styles/partials/sidebarview/content.scss
@@ -5,27 +5,28 @@
     flex-grow: 1;
     backface-visibility: hidden;
 
-    > div {
+    > * {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-    }
 
-    > div:not(.active) {
-        opacity: 0;
-        position: absolute;
-        left: 310px;
-        right: 0;
-        // width: 100%;
-        height: 100%;
-        pointer-events: none;
-    }
-}
-
-.bd-content {
-    animation: bd-fade-in .4s forwards;
-
-    .animating {
-        animation: bd-fade-out .4s forwards;
+        &.bd-contentcolumn-enter-active,
+        &.bd-contentcolumn-leave-active {
+            transition: opacity 0.4s ease;
+        }
+
+        &.bd-contentcolumn-enter-to {
+            opacity: 1;
+        }
+
+        &.bd-contentcolumn-leave-to {
+            opacity: 0;
+        }
+
+        &.bd-contentcolumn-leave-active {
+            position: absolute;
+            width: 590px;
+            pointer-events: none;
+        }
     }
 }
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index 4cf25833..82004844 100644
--- a/client/src/ui/bdui.js
+++ b/client/src/ui/bdui.js
@@ -46,22 +46,16 @@ export default class {
         DOM.createElement('div', null, 'bd-toasts').appendTo(DOM.bdToasts);
         DOM.createElement('bd-tooltips').appendTo(DOM.bdBody);
 
-        this.toasts = new Vue({
-            el: '#bd-toasts',
-            components: { BdToasts },
-            template: '<BdToasts />'
+        this.toasts = new (Vue.extend(BdToasts))({
+            el: '#bd-toasts'
         });
 
-        this.modals = new Vue({
-            el: '#bd-modals',
-            components: { BdModals },
-            template: '<BdModals />'
+        this.modals = new (Vue.extend(BdModals))({
+            el: '#bd-modals'
         });
 
-        this.vueInstance = new Vue({
-            el: '#bd-settings',
-            components: { BdSettingsWrapper },
-            template: '<BdSettingsWrapper />'
+        this.vueInstance = new (Vue.extend(BdSettingsWrapper))({
+            el: '#bd-settings'
         });
 
         return this.vueInstance;
diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index ab77f5b3..6ef44176 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -9,8 +9,8 @@
 */
 
 <template>
-    <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}">
+    <div class="bd-settings" :class="{active, 'bd-settings-out': !item && animating}" @keyup="$emit('close')">
+        <SidebarView :contentVisible="item" :animating="animating" :class="{'bd-stop': item}">
             <Sidebar slot="sidebar">
                 <div class="bd-settings-x" @click="$emit('close')">
                     <MiClose size="17"/>
@@ -18,9 +18,10 @@
                 </div>
                 <template v-for="(category, text) in sidebar">
                     <SidebarItem :item="{text, type: 'header'}" />
-                    <SidebarItem v-for="item in category" :item="item" :key="item.id" @click="itemOnClick(item.id)" />
+                    <SidebarItem v-for="i in category" :key="i.id" :item="i" :active="item && i.id === item.id" @click="itemOnClick(i.id)" />
                 </template>
             </Sidebar>
+
             <div slot="sidebarfooter" class="bd-info">
                 <span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
                 <div @click="openGithub" v-tooltip="'GitHub'" class="bd-material-button">
@@ -33,25 +34,28 @@
                     <MiWeb size="16" />
                 </div>
             </div>
+
             <ContentColumn slot="content">
-                <div v-for="item in sidebarItems" v-if="activeContent(item.contentid) || animatingContent(item.contentid)" :class="{active: activeContent(item.contentid), animating: animatingContent(item.contentid)}">
-                    <template v-if="item.component">
-                        <component :is="item.component" :SettingsWrapper="SettingsWrapper" />
-                    </template>
+                <transition name="bd-contentcolumn" @before-enter="animating++" @after-enter="animating--" @enter-cancelled="animating--" @before-leave="animating++" @after-leave="animating--" @leave-cancelled="animating--">
+                    <div v-if="item" :key="item.id">
+                        <template v-if="item.component">
+                            <component :is="item.component" :SettingsWrapper="SettingsWrapper" />
+                        </template>
 
-                    <SettingsWrapper v-if="typeof item.set === 'string'" :headertext="Settings.getSet(item.set).headertext">
-                        <SettingsPanel :settings="Settings.getSet(item.set)" :schemes="Settings.getSet(item.set).schemes" />
-                    </SettingsWrapper>
-                    <SettingsWrapper v-else-if="item.set" :headertext="item.set.headertext">
-                        <SettingsPanel :settings="item.set" :schemes="item.set.schemes" />
-                    </SettingsWrapper>
+                        <SettingsWrapper v-else-if="typeof item.set === 'string'" :headertext="Settings.getSet(item.set).headertext">
+                            <SettingsPanel :settings="Settings.getSet(item.set)" :schemes="Settings.getSet(item.set).schemes" />
+                        </SettingsWrapper>
+                        <SettingsWrapper v-else-if="item.set" :headertext="item.set.headertext">
+                            <SettingsPanel :settings="item.set" :schemes="item.set.schemes" />
+                        </SettingsWrapper>
 
-                    <ConnectivityView v-if="item.contentid === 'connectivity'"/>
-                    <CssEditorView v-if="item.contentid === 'css'" />
-                    <PluginsView v-if="item.contentid === 'plugins'" />
-                    <ThemesView v-if="item.contentid === 'themes'" />
-                    <UpdaterView v-if="item.contentid === 'updater'" />
-                </div>
+                        <ConnectivityView v-else-if="item.contentid === 'connectivity'" />
+                        <CssEditorView v-else-if="item.contentid === 'css'" />
+                        <PluginsView v-else-if="item.contentid === 'plugins'" />
+                        <ThemesView v-else-if="item.contentid === 'themes'" />
+                        <UpdaterView v-else-if="item.contentid === 'updater'" />
+                    </div>
+                </transition>
             </ContentColumn>
         </SidebarView>
     </div>
@@ -69,13 +73,10 @@
     export default {
         data() {
             return {
-                BdMenuItems,
-                activeIndex: -1,
-                lastActiveIndex: -1,
-                animating: false,
-                first: true,
+                animating: 0,
+                item: null,
+                items: BdMenuItems.items,
                 Settings,
-                timeout: null,
                 SettingsWrapper,
                 openMenuHandler: null
             };
@@ -87,12 +88,9 @@
             MiGithubCircle, MiWeb, MiClose, MiTwitterCircle
         },
         computed: {
-            sidebarItems() {
-                return this.BdMenuItems.items;
-            },
             sidebar() {
                 const categories = {};
-                for (let item of this.sidebarItems) {
+                for (let item of this.items) {
                     if (item.hidden) continue;
                     const category = categories[item.category] || (categories[item.category] = []);
                     category.push(item);
@@ -102,42 +100,10 @@
         },
         methods: {
             itemOnClick(id) {
-                if (this.animating || id === this.activeIndex) return;
-                const activeItem = this.sidebarItems.find(item => item.id === this.activeIndex);
-                if (activeItem) activeItem.active = false;
-                this.sidebarItems.find(item => item.id === id).active = true;
-                this.animating = true;
-                this.lastActiveIndex = this.activeIndex;
-                this.activeIndex = id;
-
-                if (this.timeout) clearTimeout(this.timeout);
-                this.timeout = setTimeout(() => {
-                    this.first = false;
-                    this.animating = false;
-                    this.lastActiveIndex = -1;
-                    this.timeout = null;
-                }, 400);
-            },
-            activeContent(s) {
-                const item = this.sidebarItems.find(item => item.contentid === s);
-                return item && item.id === this.activeIndex;
-            },
-            animatingContent(s) {
-                const item = this.sidebarItems.find(item => item.contentid === s);
-                return item && item.id === this.lastActiveIndex;
+                this.item = this.items.find(item => item.id === id);
             },
             closeContent() {
-                if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
-                this.first = true;
-                this.lastActiveIndex = this.activeIndex;
-                this.activeIndex = -1;
-
-                if (this.timeout) clearTimeout(this.timeout);
-                this.timeout = setTimeout(() => {
-                    this.animating = false;
-                    this.lastActiveIndex = -1;
-                    this.timeout = null;
-                }, 400);
+                this.item = null;
             },
             openGithub() {
                 shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
@@ -156,7 +122,7 @@
             }
         },
         created() {
-            Events.on('bd-open-menu', this.openMenuHandler = item => item && this.itemOnClick(this.sidebarItems.find(i => i === item || i.id === item || i.contentid === item || i.set === item).id));
+            Events.on('bd-open-menu', this.openMenuHandler = item => item && this.itemOnClick(this.items.find(i => i === item || i.id === item || i.contentid === item || i.set === item).id));
         },
         destroyed() {
             if (this.openMenuHandler) Events.off('bd-open-menu', this.openMenuHandler);
diff --git a/client/src/ui/components/sidebar/Button.vue b/client/src/ui/components/sidebar/Button.vue
index 5ec3c34b..0817a6de 100644
--- a/client/src/ui/components/sidebar/Button.vue
+++ b/client/src/ui/components/sidebar/Button.vue
@@ -9,13 +9,13 @@
 */
 
 <template>
-    <div class="bd-item" :class="{active: item.active}" @click="$emit('click', item.id)">
+    <div class="bd-item" :class="{active}" @click="$emit('click', item.id)">
         {{item.text}}
     </div>
 </template>
 
 <script>
     export default {
-        props: ['item']
+        props: ['item', 'active']
     }
 </script>
diff --git a/client/src/ui/components/sidebar/Item.vue b/client/src/ui/components/sidebar/Item.vue
index 64d3a170..df2d94d0 100644
--- a/client/src/ui/components/sidebar/Item.vue
+++ b/client/src/ui/components/sidebar/Item.vue
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <SidebarButton v-if="item._type === 'button'" :item="item" @click="$emit('click', $event)" />
+    <SidebarButton v-if="item._type === 'button'" :item="item" :active="active" @click="$emit('click', $event)" />
     <SidebarHeader v-else :item="item" />
 </template>
 
@@ -18,7 +18,7 @@
     import { SidebarHeader, SidebarButton } from './';
 
     export default {
-        props: ['item'],
+        props: ['item', 'active'],
         components: {
             SidebarHeader,
             SidebarButton
diff --git a/client/src/ui/components/sidebar/index.js b/client/src/ui/components/sidebar/index.js
index cedb40f2..4a9b1685 100644
--- a/client/src/ui/components/sidebar/index.js
+++ b/client/src/ui/components/sidebar/index.js
@@ -3,4 +3,4 @@ export { default as Sidebar } from './Sidebar.vue';
 export { default as SidebarHeader } from './Header.vue';
 export { default as SidebarButton } from './Button.vue';
 export { default as SidebarItem } from './Item.vue';
-export { default as ContentColumn } from './ContentColumn.vue';
\ No newline at end of file
+export { default as ContentColumn } from './ContentColumn.vue';

From 89a5bfba20625e69313abf14e6ed4f95e0a674bd Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Thu, 9 Aug 2018 23:49:10 +0100
Subject: [PATCH 11/17] Make the hide button setting functional

---
 .../styles/partials/bdsettings/button.scss    | 15 ++++++++++-
 .../src/styles/partials/discordoverrides.scss | 26 ++++++++++---------
 client/src/ui/bdui.js                         |  9 ++++++-
 .../src/ui/components/BdSettingsWrapper.vue   | 19 +++++++++++---
 4 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/client/src/styles/partials/bdsettings/button.scss b/client/src/styles/partials/bdsettings/button.scss
index 9ab8ae99..e2fc7fb3 100644
--- a/client/src/styles/partials/bdsettings/button.scss
+++ b/client/src/styles/partials/bdsettings/button.scss
@@ -43,9 +43,22 @@
         }
     }
 
+    &.bd-hide-button {
+        transition: opacity 0.4s ease-out;
+        opacity: 0;
+
+        &.bd-active {
+            transition-timing-function: ease-in;
+        }
+    }
+
     &.bd-active {
-        background: transparent;
         opacity: 1;
+    }
+
+    &.bd-active,
+    &.bd-hide-button {
+        background: transparent;
         box-shadow: none;
 
         .bd-settings-button-btn {
diff --git a/client/src/styles/partials/discordoverrides.scss b/client/src/styles/partials/discordoverrides.scss
index 6d051e20..42d668a9 100644
--- a/client/src/styles/partials/discordoverrides.scss
+++ b/client/src/styles/partials/discordoverrides.scss
@@ -1,20 +1,22 @@
-[class*="guildsWrapper-"] {
-    padding-top: 49px !important;
+body:not(.bd-hide-button) {
+    [class*="guildsWrapper-"] {
+        padding-top: 49px !important;
 
-    .platform-osx & {
-        margin-top: 26px;
+        .platform-osx & {
+            margin-top: 26px;
+        }
     }
-}
 
-[class*="guildsWrapper-"] + [class*="flex"] {
-    border-radius: 0 0 0 5px;
-}
+    [class*="guildsWrapper-"] + [class*="flex"] {
+        border-radius: 0 0 0 5px;
+    }
 
-[class*="unreadMentionsIndicatorTop-"] {
-    top: 49px;
+    [class*="unreadMentionsIndicatorTop-"] {
+        top: 49px;
 
-    .platform-osx & {
-        top: 50px;
+        .platform-osx & {
+            top: 50px;
+        }
     }
 }
 
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index 4cf25833..4d4e5261 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, DiscordApi } from 'modules';
+import { Events, DiscordApi, Settings } from 'modules';
 import { remote } from 'electron';
 import DOM from './dom';
 import Vue from './vue';
@@ -17,6 +17,13 @@ import { BdSettingsWrapper, BdModals, BdToasts } from './components';
 export default class {
 
     static initUiEvents() {
+        const hideButtonSetting = Settings.getSetting('ui', 'default', 'hide-button');
+        hideButtonSetting.on('setting-updated', event => {
+            if (event.value) document.body.classList.add('bd-hide-button');
+            else document.body.classList.remove('bd-hide-button');
+        });
+        if (hideButtonSetting.value) document.body.classList.add('bd-hide-button');
+
         this.pathCache = {
             isDm: null,
             server: DiscordApi.currentGuild,
diff --git a/client/src/ui/components/BdSettingsWrapper.vue b/client/src/ui/components/BdSettingsWrapper.vue
index 196639a4..96c34a7b 100644
--- a/client/src/ui/components/BdSettingsWrapper.vue
+++ b/client/src/ui/components/BdSettingsWrapper.vue
@@ -9,8 +9,8 @@
 */
 
 <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="active = true">
+    <div class="bd-settings-wrapper" :class="[{active}, 'platform-' + this.platform]">
+        <div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating, 'bd-hide-button': hideButton}" @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>
@@ -36,7 +36,9 @@
                 timeout: null,
                 platform: process.platform,
                 eventHandlers: {},
-                keybindHandler: null
+                keybindHandler: null,
+                hideButton: false,
+                hideButtonToggleHandler: null
             };
         },
         components: {
@@ -80,6 +82,10 @@
 
             const menuKeybind = Settings.getSetting('core', 'default', 'menu-keybind');
             menuKeybind.on('keybind-activated', this.keybindHandler = () => this.active = !this.active);
+
+            const hideButtonSetting = Settings.getSetting('ui', 'default', 'hide-button');
+            hideButtonSetting.on('setting-updated', this.hideButtonToggleHandler = event => this.hideButton = event.value);
+            this.hideButton = hideButtonSetting.value;
         },
         destroyed() {
             for (let event in this.eventHandlers) Events.off(event, this.eventHandlers[event]);
@@ -89,7 +95,12 @@
 
             if (this.keybindHandler) {
                 const menuKeybind = Settings.getSetting('core', 'default', 'menu-keybind');
-                menuKeybind.removeListener('keybind-activated', this.keybindHandler = () => this.active = !this.active);
+                menuKeybind.removeListener('keybind-activated', this.keybindHandler);
+            }
+
+            if (this.hideButtonToggleHandler) {
+                const hideButtonSetting = Settings.getSetting('ui', 'default', 'hide-button');
+                hideButtonSetting.removeListener('setting-updated', this.hideButtonToggleHandler);
             }
         }
     }

From cb01d32e197a58c8f3a4761c5797f723b8383b19 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuel@fancy.org.uk>
Date: Fri, 10 Aug 2018 00:00:01 +0100
Subject: [PATCH 12/17] Fix position on macOS

---
 client/src/styles/partials/discordoverrides.scss | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/src/styles/partials/discordoverrides.scss b/client/src/styles/partials/discordoverrides.scss
index 42d668a9..84a697a3 100644
--- a/client/src/styles/partials/discordoverrides.scss
+++ b/client/src/styles/partials/discordoverrides.scss
@@ -1,10 +1,9 @@
 body:not(.bd-hide-button) {
     [class*="guildsWrapper-"] {
         padding-top: 49px !important;
-
-        .platform-osx & {
-            margin-top: 26px;
-        }
+    }
+    .platform-osx [class*="guildsWrapper-"] {
+        margin-top: 26px;
     }
 
     [class*="guildsWrapper-"] + [class*="flex"] {
@@ -13,10 +12,9 @@ body:not(.bd-hide-button) {
 
     [class*="unreadMentionsIndicatorTop-"] {
         top: 49px;
-
-        .platform-osx & {
-            top: 50px;
-        }
+    }
+    .platform-osx [class*="unreadMentionsIndicatorTop-"] {
+        top: 50px;
     }
 }
 

From 0c04c045902feb321eadd5787bbf23f6d6eb349f Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 10 Aug 2018 12:48:56 +0300
Subject: [PATCH 13/17] Secure kvp

---
 client/src/data/user.settings.default.json    |  2 +-
 client/src/structs/settings/setting.js        |  2 +
 .../src/structs/settings/types/securekvp.js   | 26 +++++++++
 .../bd/setting/SecureKeyValuePair.vue         | 58 +++++++++++++++++++
 .../src/ui/components/bd/setting/Setting.vue  |  3 +
 package-lock.json                             |  9 ++-
 package.json                                  |  1 +
 7 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 client/src/structs/settings/types/securekvp.js
 create mode 100644 client/src/ui/components/bd/setting/SecureKeyValuePair.vue

diff --git a/client/src/data/user.settings.default.json b/client/src/data/user.settings.default.json
index 29137e6d..2ca31ad6 100644
--- a/client/src/data/user.settings.default.json
+++ b/client/src/data/user.settings.default.json
@@ -172,7 +172,7 @@
                 "settings": [
                     {
                         "id": "e2ekvps",
-                        "type": ["kvp"],
+                        "type": [ "securekvp" ],
                         "value": []
                     }
                 ]
diff --git a/client/src/structs/settings/setting.js b/client/src/structs/settings/setting.js
index 618596ce..fe2b4e5a 100644
--- a/client/src/structs/settings/setting.js
+++ b/client/src/structs/settings/setting.js
@@ -21,6 +21,7 @@ import GuildSetting from './types/guild';
 import ArraySetting from './types/array';
 import CollectionSetting from './types/collection';
 import KvpSetting from './types/kvp';
+import SecureKvpSetting from './types/securekvp';
 import CustomSetting from './types/custom';
 
 export default class Setting {
@@ -44,6 +45,7 @@ export default class Setting {
         else if (args.type === 'array') return new ArraySetting(args, ...merge);
         else if (args.type === 'collection') return new CollectionSetting(args, ...merge);
         else if (args.type === 'kvp') return new KvpSetting(args, ...merge);
+        else if (args.type === 'securekvp') return new SecureKvpSetting(args, ...merge);
         else if (args.type === 'custom') return new CustomSetting(args, ...merge);
         else throw {message: `Setting type ${args.type} unknown`};
     }
diff --git a/client/src/structs/settings/types/securekvp.js b/client/src/structs/settings/types/securekvp.js
new file mode 100644
index 00000000..bb6c4990
--- /dev/null
+++ b/client/src/structs/settings/types/securekvp.js
@@ -0,0 +1,26 @@
+/**
+ * BetterDiscord Secure Key Value Pair Setting Struct
+ * 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 Kvp from './kvp';
+
+export default class SecureKvpSetting extends Kvp {
+
+    constructor(args, ...merge) {
+        super(args, ...merge);
+        window.skvp = this;
+    }
+
+    /**
+     * The value to use when the setting doesn't have a value.
+     */
+    get defaultValue() {
+        return { key: 'Key', value: '**********' };
+    }
+}
diff --git a/client/src/ui/components/bd/setting/SecureKeyValuePair.vue b/client/src/ui/components/bd/setting/SecureKeyValuePair.vue
new file mode 100644
index 00000000..cb5f3249
--- /dev/null
+++ b/client/src/ui/components/bd/setting/SecureKeyValuePair.vue
@@ -0,0 +1,58 @@
+/**
+ * BetterDiscord Setting Secure Key Value Pair 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-formKvp">
+        <div class="bd-formKvpDetails">
+            <div class="bd-inputWrapper">
+                <input type="text" class="bd-textInput" :value="setting.value.key" @keyup.stop="keyUpKey" @input="keyChange" />
+            </div>
+            <div class="bd-inputWrapper">
+                <input type="password" class="bd-textInput" :value="setting.value.value" @keyup.stop="keyUpValue" @blur="valueBlur" @input="valueChange" ref="valueInput" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import aes256 from 'aes256';
+    export default {
+        data() {
+            return {
+                masterKey: 'temporarymasterkey',
+                valueChanged: false
+            }
+        },
+        props: ['setting'],
+        methods: {
+            keyChange(e) {
+                this.setting.value = { key: e.target.value, value: this.setting.value.value }
+            },
+            valueChange(e) {
+                this.valueChanged = true;
+            },
+            valueBlur(e) {
+                if (!this.valueChanged) return;
+                const encrypted = aes256.encrypt(this.masterKey, e.target.value);
+                if (encrypted === this.setting.value.value) return;
+                this.setting.value = { key: this.setting.value.key, value: encrypted }
+                this.valueChanged = false;
+            },
+            keyUpKey(e) {
+                if (e.key !== 'Enter') return;
+                this.$refs.valueInput.focus();
+            },
+            keyUpValue(e) {
+                if (e.key !== 'Enter') return;
+                e.target.blur();
+            }
+        }
+    }
+</script>
diff --git a/client/src/ui/components/bd/setting/Setting.vue b/client/src/ui/components/bd/setting/Setting.vue
index af430c9e..107e6ee6 100644
--- a/client/src/ui/components/bd/setting/Setting.vue
+++ b/client/src/ui/components/bd/setting/Setting.vue
@@ -24,6 +24,7 @@
         <ArraySetting v-else-if="setting.type === 'array'" :setting="setting" />
         <Collection v-else-if="setting.type === 'collection'" :setting="setting" />
         <KeyValuePair v-else-if="setting.type === 'kvp'" :setting="setting" />
+        <SecureKeyValuePair v-else-if="setting.type === 'securekvp'" :setting="setting" />
         <CustomSetting v-else-if="setting.type === 'custom'" :setting="setting" />
         <div class="bd-form-divider"></div>
     </div>
@@ -45,6 +46,7 @@
     import ArraySetting from './Array.vue';
     import Collection from './Collection.vue';
     import KeyValuePair from './KeyValuePair.vue';
+    import SecureKeyValuePair from './SecureKeyValuePair.vue';
     import CustomSetting from './Custom.vue';
 
     export default {
@@ -66,6 +68,7 @@
             ArraySetting,
             Collection,
             KeyValuePair,
+            SecureKeyValuePair,
             CustomSetting
         },
         computed: {
diff --git a/package-lock.json b/package-lock.json
index b78a6481..9e8ed106 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,12 @@
         }
       }
     },
+    "aes256": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/aes256/-/aes256-1.0.4.tgz",
+      "integrity": "sha512-yuaKOdoKebChkP+uRsQovWsJYm6qf58cQTvXBu6MM0BMnrXZ9SXEiXREBuU513ZRr+Uo2qX/Ci6EODLUu/qiHA==",
+      "dev": true
+    },
     "ajv": {
       "version": "5.5.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
@@ -2733,9 +2739,6 @@
         "randomfill": "1.0.4"
       }
     },
-    "csp-parse": {
-      "version": "github:macropodhq/csp-parse#db7d5f954b420b527d7fb452a93bb6e2fa302c5a"
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
diff --git a/package.json b/package.json
index b3b47fe0..03531f04 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "node-sass": "^4.9.2"
   },
   "devDependencies": {
+    "aes256": "^1.0.4",
     "archiver": "^2.1.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",

From c4dfc7b11da6d2c3463fba7afdac074305bf6eb8 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 10 Aug 2018 12:50:37 +0300
Subject: [PATCH 14/17] Remove debugs

---
 client/src/structs/settings/types/securekvp.js             | 6 ------
 client/src/ui/components/bd/setting/SecureKeyValuePair.vue | 5 ++---
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/client/src/structs/settings/types/securekvp.js b/client/src/structs/settings/types/securekvp.js
index bb6c4990..d11a90d3 100644
--- a/client/src/structs/settings/types/securekvp.js
+++ b/client/src/structs/settings/types/securekvp.js
@@ -11,12 +11,6 @@
 import Kvp from './kvp';
 
 export default class SecureKvpSetting extends Kvp {
-
-    constructor(args, ...merge) {
-        super(args, ...merge);
-        window.skvp = this;
-    }
-
     /**
      * The value to use when the setting doesn't have a value.
      */
diff --git a/client/src/ui/components/bd/setting/SecureKeyValuePair.vue b/client/src/ui/components/bd/setting/SecureKeyValuePair.vue
index cb5f3249..40d145d6 100644
--- a/client/src/ui/components/bd/setting/SecureKeyValuePair.vue
+++ b/client/src/ui/components/bd/setting/SecureKeyValuePair.vue
@@ -40,9 +40,8 @@
             },
             valueBlur(e) {
                 if (!this.valueChanged) return;
-                const encrypted = aes256.encrypt(this.masterKey, e.target.value);
-                if (encrypted === this.setting.value.value) return;
-                this.setting.value = { key: this.setting.value.key, value: encrypted }
+                const value = aes256.encrypt(this.masterKey, e.target.value);
+                this.setting.value = { key: this.setting.value.key, value }
                 this.valueChanged = false;
             },
             keyUpKey(e) {

From e518d4c117a2063fd558de3b7a643bc3bd33c62e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 10 Aug 2018 14:18:08 +0300
Subject: [PATCH 15/17] package-lock

---
 package-lock.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 9e8ed106..c939e1e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2739,6 +2739,9 @@
         "randomfill": "1.0.4"
       }
     },
+    "csp-parse": {
+      "version": "github:macropodhq/csp-parse#db7d5f954b420b527d7fb452a93bb6e2fa302c5a"
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",

From 2a101919260e1a80774dba59ca6d961ff716a22e Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 10 Aug 2018 15:08:21 +0300
Subject: [PATCH 16/17] E2EE patches

---
 client/src/builtin/E2EE.js    | 27 ++++++++++++++++++++++++---
 client/src/builtin/Manager.js |  2 ++
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/client/src/builtin/E2EE.js b/client/src/builtin/E2EE.js
index c22f29a8..8efeb151 100644
--- a/client/src/builtin/E2EE.js
+++ b/client/src/builtin/E2EE.js
@@ -9,6 +9,10 @@
 */
 
 import BuiltinModule from './BuiltinModule';
+import { WebpackModules, ReactComponents, MonkeyPatch, Patcher } from 'modules';
+import { VueInjector, Reflection } from 'ui';
+import EmoteComponent from './EmoteComponent.vue';
+import aes256 from 'aes256';
 
 export default new class E2EE extends BuiltinModule {
 
@@ -16,12 +20,29 @@ export default new class E2EE extends BuiltinModule {
         return ['security', 'default', 'e2ee'];
     }
 
-    enabled(e) {
-        
+    async enabled(e) {
+        const ctaComponent = await ReactComponents.getComponent('ChannelTextArea');
+        MonkeyPatch('BD:E2EE', ctaComponent.component.prototype).after('render', this.render);
+        MonkeyPatch('BD:E2EE', ctaComponent.component.prototype).before('handleSubmit', this.handleSubmit);
+    }
+
+    render(component, args, retVal) {
+        if (!(retVal.props.children instanceof Array)) retVal.props.children = [retVal.props.children];
+        const inner = retVal.props.children.find(child => child.props.className && child.props.className.includes('inner'));
+
+        inner.props.children.splice(0, 0, VueInjector.createReactElement(EmoteComponent, {
+            src: 'https://static-cdn.jtvnw.net/emoticons/v1/354/1.0',
+            name: '4Head',
+            hasWrapper: false
+        }, true));
+    }
+
+    handleSubmit(component, args, retVal) {
+        component.props.value = aes256.encrypt('randomkey', component.props.value);
     }
 
     disabled(e) {
-
+        for (const patch of Patcher.getPatchesByCaller('BD:E2EE')) patch.unpatch();
     }
 
 }
diff --git a/client/src/builtin/Manager.js b/client/src/builtin/Manager.js
index 4d941a03..4d769966 100644
--- a/client/src/builtin/Manager.js
+++ b/client/src/builtin/Manager.js
@@ -2,6 +2,7 @@ import { default as EmoteModule } from './EmoteModule';
 import { default as ReactDevtoolsModule } from './ReactDevtoolsModule';
 import { default as VueDevtoolsModule } from './VueDevToolsModule';
 import { default as TrackingProtection } from './TrackingProtection';
+import { default as E2EE } from './E2EE';
 
 export default class {
     static initAll() {
@@ -9,5 +10,6 @@ export default class {
         ReactDevtoolsModule.init();
         VueDevtoolsModule.init();
         TrackingProtection.init();
+        E2EE.init();
     }
 }

From 17f1b60a9bf5780e0a71aaaf8f2b105c346816e7 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Fri, 10 Aug 2018 15:30:24 +0300
Subject: [PATCH 17/17] E2EE component and material lock icon

---
 client/src/builtin/E2EE.js                    |  8 ++---
 client/src/builtin/E2EEComponent.vue          | 29 +++++++++++++++++++
 .../src/styles/partials/bdsettings/e2ee.scss  | 24 +++++++++++++++
 .../src/styles/partials/bdsettings/index.scss |  1 +
 .../src/ui/components/common/MaterialIcon.js  |  1 +
 .../components/common/materialicons/Lock.vue  | 27 +++++++++++++++++
 6 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 client/src/builtin/E2EEComponent.vue
 create mode 100644 client/src/styles/partials/bdsettings/e2ee.scss
 create mode 100644 client/src/ui/components/common/materialicons/Lock.vue

diff --git a/client/src/builtin/E2EE.js b/client/src/builtin/E2EE.js
index 8efeb151..a56d58e0 100644
--- a/client/src/builtin/E2EE.js
+++ b/client/src/builtin/E2EE.js
@@ -11,7 +11,7 @@
 import BuiltinModule from './BuiltinModule';
 import { WebpackModules, ReactComponents, MonkeyPatch, Patcher } from 'modules';
 import { VueInjector, Reflection } from 'ui';
-import EmoteComponent from './EmoteComponent.vue';
+import E2EEComponent from './E2EEComponent.vue';
 import aes256 from 'aes256';
 
 export default new class E2EE extends BuiltinModule {
@@ -30,11 +30,7 @@ export default new class E2EE extends BuiltinModule {
         if (!(retVal.props.children instanceof Array)) retVal.props.children = [retVal.props.children];
         const inner = retVal.props.children.find(child => child.props.className && child.props.className.includes('inner'));
 
-        inner.props.children.splice(0, 0, VueInjector.createReactElement(EmoteComponent, {
-            src: 'https://static-cdn.jtvnw.net/emoticons/v1/354/1.0',
-            name: '4Head',
-            hasWrapper: false
-        }, true));
+        inner.props.children.splice(0, 0, VueInjector.createReactElement(E2EEComponent, {}, true));
     }
 
     handleSubmit(component, args, retVal) {
diff --git a/client/src/builtin/E2EEComponent.vue b/client/src/builtin/E2EEComponent.vue
new file mode 100644
index 00000000..21660241
--- /dev/null
+++ b/client/src/builtin/E2EEComponent.vue
@@ -0,0 +1,29 @@
+/**
+ * BetterDiscord E2EE 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-e2eeTaContainer">
+        <div class="bd-e2eeTaBtn bd-e2eeLock">
+            <MiLock v-tooltip="'E2EE'" />
+        </div>
+        <div class="bd-taDivider"></div>
+    </div>
+</template>
+
+<script>
+    import { MiLock } from '../ui/components/common/MaterialIcon';
+    export default {
+        components: { MiLock },
+        data() {
+            return {};
+        },
+        methods: {}
+    }
+</script>
diff --git a/client/src/styles/partials/bdsettings/e2ee.scss b/client/src/styles/partials/bdsettings/e2ee.scss
new file mode 100644
index 00000000..3fd121fe
--- /dev/null
+++ b/client/src/styles/partials/bdsettings/e2ee.scss
@@ -0,0 +1,24 @@
+.bd-e2eeTaContainer {
+    display: flex;
+
+    .bd-e2eeTaBtn {
+        padding: 10px;
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: row;
+        cursor: pointer;
+
+        &.bd-e2eeLock {
+            fill: #cc3e3e;
+        }
+    }
+
+    .bd-taDivider {
+        background-color: hsla(0,0%,100%,.1);
+        box-sizing: border-box;
+        height: 80%;
+        position: relative;
+        top: 10%;
+        width: 1px;
+    }
+}
diff --git a/client/src/styles/partials/bdsettings/index.scss b/client/src/styles/partials/bdsettings/index.scss
index fbadb580..69a04481 100644
--- a/client/src/styles/partials/bdsettings/index.scss
+++ b/client/src/styles/partials/bdsettings/index.scss
@@ -9,3 +9,4 @@
 @import './window-preferences';
 @import './kvp';
 @import './collection';
+@import './e2ee';
diff --git a/client/src/ui/components/common/MaterialIcon.js b/client/src/ui/components/common/MaterialIcon.js
index c47eb91f..9840b262 100644
--- a/client/src/ui/components/common/MaterialIcon.js
+++ b/client/src/ui/components/common/MaterialIcon.js
@@ -18,3 +18,4 @@ export { default as MiInfo } from './materialicons/Info.vue';
 export { default as MiWarning } from './materialicons/Warning.vue';
 export { default as MiSuccess } from './materialicons/Success.vue';
 export { default as AccountCircle } from './materialicons/AccountCircle.vue';
+export { default as MiLock } from './materialicons/Lock.vue';
diff --git a/client/src/ui/components/common/materialicons/Lock.vue b/client/src/ui/components/common/materialicons/Lock.vue
new file mode 100644
index 00000000..18ed6711
--- /dev/null
+++ b/client/src/ui/components/common/materialicons/Lock.vue
@@ -0,0 +1,27 @@
+/**
+ * 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 fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 11.9994,16.998C 13.1044,16.998 13.9994,16.1021 13.9994,14.998C 13.9994,13.894 13.1044,12.998 11.9994,12.998C 10.8954,12.998 9.9994,13.894 9.9994,14.998C 9.9994,16.1021 10.8954,16.998 11.9994,16.998 Z M 17.9994,7.99813C 19.1034,7.99813 19.9994,8.89413 19.9994,9.99813L 19.9994,19.9981C 19.9994,21.1021 19.1034,21.9981 17.9994,21.9981L 5.99938,21.9981C 4.89539,21.9981 3.99938,21.1021 3.99938,19.9981L 3.99938,9.99813C 3.99938,8.89413 4.89539,7.99813 5.99938,7.99813L 6.99938,7.99813L 6.99938,5.99813C 6.99938,3.23714 9.23838,0.998133 11.9994,0.998133C 14.7604,0.998133 16.9994,3.23714 16.9994,5.99813L 16.9994,7.99813L 17.9994,7.99813 Z M 12,3C 10.3431,3 9,4.34315 9,6L 9,8L 15,8L 15,6C 15,4.34315 13.6569,3 12,3 Z " />
+        </svg>
+    </span>
+</template>
+<script>
+    export default {
+        props: ['size']
+    }
+</script>