From 7efe3debf404668487b8f0dda3d92b9ad27a2412 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Fri, 1 May 2020 17:40:24 -0500
Subject: [PATCH 001/223] Settings panel with ignored users list

---
 src/app/App.vue                           | 12 +++
 src/app/components/Panes/SettingsPane.vue | 95 +++++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 src/app/components/Panes/SettingsPane.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 6e420799..a123a57e 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -18,6 +18,11 @@
             :name="`Online(${userCount})`"
             @input="activeTab = messageTabs.length"
           />
+          <TabButton
+            :selected="settingsPaneSelected"
+            :name="`Settings`"
+            @input="activeTab = messageTabs.length + 1"
+          />
         </div>
         <div class="chat-content">
           <MessagePane
@@ -29,6 +34,7 @@
             @postMessage="postMessage($event, channel.name)"
           />
           <UserPane :visibility="userPaneSelected" v-show="userPaneSelected"/>
+          <SettingsPane :visibility="settingsPaneSelected" v-show="settingsPaneSelected" />
         </div>
         <ConnectingPopup/>
         <ReportDialog ref="reportDialog"/>
@@ -48,6 +54,7 @@
   import ReportDialog from '@/components/ReportDialog.vue';
   import MessagePane from '@/components/Panes/MessagePane.vue';
   import UserPane from '@/components/Panes/UserPane.vue';
+  import SettingsPane from '@/components/Panes/SettingsPane.vue';
 
   @Component({
     components: {
@@ -57,6 +64,7 @@
       ConnectingPopup,
       MessagePane,
       UserPane,
+      SettingsPane,
     },
   })
   export default class App extends Vue {
@@ -89,6 +97,10 @@
       return Object.keys(this.$vxm.chat.connectedUsers).length;
     }
 
+    get settingsPaneSelected() {
+      return this.activeTab === (this.messageTabs.length + 1);
+    }
+
     postMessage(rawMessage: string, channel: string) {
       this.$vxm.chat.sendMessage({ rawMessage, channel });
     }
diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Panes/SettingsPane.vue
new file mode 100644
index 00000000..a608afa3
--- /dev/null
+++ b/src/app/components/Panes/SettingsPane.vue
@@ -0,0 +1,95 @@
+<template>
+  <Pane ref="pane" :visibility="visibility">
+    <h1>Text Size</h1>
+    <input v-model="message" type=range min=10 max=22>
+    <span id='font-size-p'>{{text}}</span>
+    <p id='preview-p' :style='{ fontSize: fontSize + "px" }'>Preview</p>
+    <h1>Ignored Users</h1>
+    <ul>
+      <li v-for="user in ignoredUsers" :key="user.Username">
+        {{ user }}
+      </li>
+    </ul>
+    <template v-slot:footer>
+      <ConnectButton
+        v-if="!connectionData.firstConnection &&
+        !connectionData.connected"
+        class="connect-button"
+      />
+    </template>
+  </Pane>
+</template>
+
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import Pane from './Pane.vue';
+  import Username from '@/components/Messages/Username.vue';
+  import ConnectButton from '@/components/Connection/ConnectButton.vue';
+
+  @Component({
+    components: {
+      Username,
+      Pane,
+      ConnectButton,
+    },
+  })
+  export default class SettingsPane extends Vue {
+    @Prop({ required: true })
+    visibility!: boolean;
+
+    $refs!: {
+      pane: Pane;
+    };
+
+    @Prop({ required: true })
+    message!: '14';
+
+    get text() {
+      if (parseInt(this.message, 10) === 14) {
+        const newMessage = this.message.concat(' (default)');
+        return newMessage;
+      }
+      return this.message;
+    }
+
+    get fontSize() {
+      return this.message;
+    }
+
+    get connectedUsers() {
+      return this.$vxm.chat.connectedUsers;
+    }
+
+    get connectionData() {
+      return this.$vxm.chat.connectionData;
+    }
+
+    get ignoredUsers() {
+      return this.$vxm.chat.ignoredUsers;
+    }
+
+    @Watch('connectedUsers')
+    onContentChanged() {
+      this.$refs.pane.onContentChanged();
+    }
+
+    @Watch('connectionData.connected')
+    updateFooterHeight() {
+      this.$nextTick(this.$refs.pane.updateFooterHeight);
+    }
+  }
+</script>
+<style scoped>
+#font-size-p {
+  vertical-align: super;
+  margin-left:2px;
+}
+h1 {
+  margin:2px;
+}
+input {
+  margin:2px;
+}
+</style>

From 8c73025dfa87431677be2ae9333268e761b85c38 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Fri, 1 May 2020 18:09:04 -0500
Subject: [PATCH 002/223] Put unignore buttons on settings tab for each ignored
 user. Also put an unignore all button that unignores everyone and disappears
 when no one is ignored

---
 src/app/components/Panes/SettingsPane.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Panes/SettingsPane.vue
index a608afa3..44a30bea 100644
--- a/src/app/components/Panes/SettingsPane.vue
+++ b/src/app/components/Panes/SettingsPane.vue
@@ -8,7 +8,10 @@
     <ul>
       <li v-for="user in ignoredUsers" :key="user.Username">
         {{ user }}
+        <button class='unignore-user' v-on:click="unign(user)">Unignore</button>
       </li>
+      <button class='unignore-user' v-on:click="unign('*')" v-show="anyIgnoredUsers" >
+        Unignore All</button>
     </ul>
     <template v-slot:footer>
       <ConnectButton
@@ -70,6 +73,10 @@
       return this.$vxm.chat.ignoredUsers;
     }
 
+    get anyIgnoredUsers() {
+      return Boolean(this.ignoredUsers.length > 0);
+    }
+
     @Watch('connectedUsers')
     onContentChanged() {
       this.$refs.pane.onContentChanged();
@@ -79,6 +86,10 @@
     updateFooterHeight() {
       this.$nextTick(this.$refs.pane.updateFooterHeight);
     }
+
+    unign(user:string) {
+      this.$vxm.chat.unignoreUser(user);
+    }
   }
 </script>
 <style scoped>
@@ -92,4 +103,8 @@ h1 {
 input {
   margin:2px;
 }
+.unignore-user {
+  padding:2px;
+  padding-bottom:3px;
+}
 </style>

From 25191b7fc18e5e91cde21a88256c1d28000e0c53 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 09:02:12 -0500
Subject: [PATCH 003/223] Font size actually changes. Also changed input type
 from range to number because it's cleaner

---
 src/app/App.vue                           |  6 ++++++
 src/app/components/Panes/SettingsPane.vue | 23 +++++++++++++----------
 src/app/store/chat.vuex.ts                |  7 +++++++
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index a123a57e..824eaedf 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -32,6 +32,7 @@
             v-show="index === activeTab"
             :visibility="index === activeTab"
             @postMessage="postMessage($event, channel.name)"
+            :style='{ fontSize: fontSize + "px" }'
           />
           <UserPane :visibility="userPaneSelected" v-show="userPaneSelected"/>
           <SettingsPane :visibility="settingsPaneSelected" v-show="settingsPaneSelected" />
@@ -85,6 +86,11 @@
       reportDialog: ReportDialog;
     };
 
+    get fontSize() {
+      return this.$vxm.chat.fontSize.toString();
+      // return 29;
+    }
+
     get messageTabs() {
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Panes/SettingsPane.vue
index 44a30bea..b31c24a8 100644
--- a/src/app/components/Panes/SettingsPane.vue
+++ b/src/app/components/Panes/SettingsPane.vue
@@ -1,9 +1,8 @@
 <template>
   <Pane ref="pane" :visibility="visibility">
     <h1>Text Size</h1>
-    <input v-model="message" type=range min=10 max=22>
-    <span id='font-size-p'>{{text}}</span>
-    <p id='preview-p' :style='{ fontSize: fontSize + "px" }'>Preview</p>
+    <input v-model="message" type=number min=10 max=22 value=24>
+    <span id='font-size-p'>{{text}} Default is 14</span>
     <h1>Ignored Users</h1>
     <ul>
       <li v-for="user in ignoredUsers" :key="user.Username">
@@ -47,18 +46,17 @@
     };
 
     @Prop({ required: true })
-    message!: '14';
+    message:string = '14';
 
     get text() {
-      if (parseInt(this.message, 10) === 14) {
-        const newMessage = this.message.concat(' (default)');
-        return newMessage;
+      if (this.message.toString()) {
+        return '';
       }
-      return this.message;
+      return '';
     }
 
     get fontSize() {
-      return this.message;
+      return parseInt(this.message, 10) === 14 ? 14 : 50;
     }
 
     get connectedUsers() {
@@ -87,6 +85,11 @@
       this.$nextTick(this.$refs.pane.updateFooterHeight);
     }
 
+    @Watch('message')
+    updateFontSize() {
+      this.$vxm.chat.changeFontSize(parseInt(this.message, 10));
+    }
+
     unign(user:string) {
       this.$vxm.chat.unignoreUser(user);
     }
@@ -94,7 +97,7 @@
 </script>
 <style scoped>
 #font-size-p {
-  vertical-align: super;
+  vertical-align: mid;
   margin-left:2px;
 }
 h1 {
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 7b355f83..01ac94e3 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,6 +72,8 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
+  fontSize: Number = 18;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -84,6 +86,11 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @mutation
+  changeFontSize(to:Number) {
+    this.fontSize = to;
+  }
+
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {

From 89ea1b26d65f144842e437b290d4ab8edc860537 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 09:06:27 -0500
Subject: [PATCH 004/223] Readded 'you have not ignored any users' thing

---
 src/app/components/Panes/SettingsPane.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Panes/SettingsPane.vue
index b31c24a8..1dae503b 100644
--- a/src/app/components/Panes/SettingsPane.vue
+++ b/src/app/components/Panes/SettingsPane.vue
@@ -9,6 +9,7 @@
         {{ user }}
         <button class='unignore-user' v-on:click="unign(user)">Unignore</button>
       </li>
+      <li v-show="!anyIgnoredUsers">You have not ignored any users</li>
       <button class='unignore-user' v-on:click="unign('*')" v-show="anyIgnoredUsers" >
         Unignore All</button>
     </ul>
@@ -55,10 +56,6 @@
       return '';
     }
 
-    get fontSize() {
-      return parseInt(this.message, 10) === 14 ? 14 : 50;
-    }
-
     get connectedUsers() {
       return this.$vxm.chat.connectedUsers;
     }

From 9c502d558877b91b702d602a7c51b328305d1f75 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 09:53:49 -0500
Subject: [PATCH 005/223] remove settings tab stuff because it isn't emoticons;
 can be merged alter

---
 src/app/App.vue                           |  18 ----
 src/app/components/Panes/SettingsPane.vue | 110 ----------------------
 src/app/store/chat.vuex.ts                |   7 --
 3 files changed, 135 deletions(-)
 delete mode 100644 src/app/components/Panes/SettingsPane.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 824eaedf..6e420799 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -18,11 +18,6 @@
             :name="`Online(${userCount})`"
             @input="activeTab = messageTabs.length"
           />
-          <TabButton
-            :selected="settingsPaneSelected"
-            :name="`Settings`"
-            @input="activeTab = messageTabs.length + 1"
-          />
         </div>
         <div class="chat-content">
           <MessagePane
@@ -32,10 +27,8 @@
             v-show="index === activeTab"
             :visibility="index === activeTab"
             @postMessage="postMessage($event, channel.name)"
-            :style='{ fontSize: fontSize + "px" }'
           />
           <UserPane :visibility="userPaneSelected" v-show="userPaneSelected"/>
-          <SettingsPane :visibility="settingsPaneSelected" v-show="settingsPaneSelected" />
         </div>
         <ConnectingPopup/>
         <ReportDialog ref="reportDialog"/>
@@ -55,7 +48,6 @@
   import ReportDialog from '@/components/ReportDialog.vue';
   import MessagePane from '@/components/Panes/MessagePane.vue';
   import UserPane from '@/components/Panes/UserPane.vue';
-  import SettingsPane from '@/components/Panes/SettingsPane.vue';
 
   @Component({
     components: {
@@ -65,7 +57,6 @@
       ConnectingPopup,
       MessagePane,
       UserPane,
-      SettingsPane,
     },
   })
   export default class App extends Vue {
@@ -86,11 +77,6 @@
       reportDialog: ReportDialog;
     };
 
-    get fontSize() {
-      return this.$vxm.chat.fontSize.toString();
-      // return 29;
-    }
-
     get messageTabs() {
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
@@ -103,10 +89,6 @@
       return Object.keys(this.$vxm.chat.connectedUsers).length;
     }
 
-    get settingsPaneSelected() {
-      return this.activeTab === (this.messageTabs.length + 1);
-    }
-
     postMessage(rawMessage: string, channel: string) {
       this.$vxm.chat.sendMessage({ rawMessage, channel });
     }
diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Panes/SettingsPane.vue
deleted file mode 100644
index 1dae503b..00000000
--- a/src/app/components/Panes/SettingsPane.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <Pane ref="pane" :visibility="visibility">
-    <h1>Text Size</h1>
-    <input v-model="message" type=number min=10 max=22 value=24>
-    <span id='font-size-p'>{{text}} Default is 14</span>
-    <h1>Ignored Users</h1>
-    <ul>
-      <li v-for="user in ignoredUsers" :key="user.Username">
-        {{ user }}
-        <button class='unignore-user' v-on:click="unign(user)">Unignore</button>
-      </li>
-      <li v-show="!anyIgnoredUsers">You have not ignored any users</li>
-      <button class='unignore-user' v-on:click="unign('*')" v-show="anyIgnoredUsers" >
-        Unignore All</button>
-    </ul>
-    <template v-slot:footer>
-      <ConnectButton
-        v-if="!connectionData.firstConnection &&
-        !connectionData.connected"
-        class="connect-button"
-      />
-    </template>
-  </Pane>
-</template>
-
-<script lang="ts">
-  import {
-    Component, Watch, Prop, Vue,
-  } from 'vue-property-decorator';
-  import Pane from './Pane.vue';
-  import Username from '@/components/Messages/Username.vue';
-  import ConnectButton from '@/components/Connection/ConnectButton.vue';
-
-  @Component({
-    components: {
-      Username,
-      Pane,
-      ConnectButton,
-    },
-  })
-  export default class SettingsPane extends Vue {
-    @Prop({ required: true })
-    visibility!: boolean;
-
-    $refs!: {
-      pane: Pane;
-    };
-
-    @Prop({ required: true })
-    message:string = '14';
-
-    get text() {
-      if (this.message.toString()) {
-        return '';
-      }
-      return '';
-    }
-
-    get connectedUsers() {
-      return this.$vxm.chat.connectedUsers;
-    }
-
-    get connectionData() {
-      return this.$vxm.chat.connectionData;
-    }
-
-    get ignoredUsers() {
-      return this.$vxm.chat.ignoredUsers;
-    }
-
-    get anyIgnoredUsers() {
-      return Boolean(this.ignoredUsers.length > 0);
-    }
-
-    @Watch('connectedUsers')
-    onContentChanged() {
-      this.$refs.pane.onContentChanged();
-    }
-
-    @Watch('connectionData.connected')
-    updateFooterHeight() {
-      this.$nextTick(this.$refs.pane.updateFooterHeight);
-    }
-
-    @Watch('message')
-    updateFontSize() {
-      this.$vxm.chat.changeFontSize(parseInt(this.message, 10));
-    }
-
-    unign(user:string) {
-      this.$vxm.chat.unignoreUser(user);
-    }
-  }
-</script>
-<style scoped>
-#font-size-p {
-  vertical-align: mid;
-  margin-left:2px;
-}
-h1 {
-  margin:2px;
-}
-input {
-  margin:2px;
-}
-.unignore-user {
-  padding:2px;
-  padding-bottom:3px;
-}
-</style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 01ac94e3..7b355f83 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,8 +72,6 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
-  fontSize: Number = 18;
-
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -86,11 +84,6 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  @mutation
-  changeFontSize(to:Number) {
-    this.fontSize = to;
-  }
-
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {

From 799a15910ff8011b506be3dd092730da2cb67555 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 12:05:51 -0500
Subject: [PATCH 006/223] 1 emoticon button working somewhat. Really messy
 workaround

---
 src/app/components/EmoticonButton.vue    | 35 ++++++++++++++++++++++++
 src/app/components/Panes/MessagePane.vue | 15 ++++++++++
 src/app/components/ScalableInput.vue     |  7 ++---
 src/app/store/chat.vuex.ts               | 11 ++++++++
 4 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 src/app/components/EmoticonButton.vue

diff --git a/src/app/components/EmoticonButton.vue b/src/app/components/EmoticonButton.vue
new file mode 100644
index 00000000..a3bfe35c
--- /dev/null
+++ b/src/app/components/EmoticonButton.vue
@@ -0,0 +1,35 @@
+<template>
+<button class='emoticon-button' v-on:click="add()">
+  {{emote}}
+</button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component({
+  })
+  export default class EmoticonButton extends Vue {
+    @Prop({ required: true })
+    emoticon!: string;
+
+    get emote() {
+      return this.emoticon;
+    }
+
+    add() {
+      this.$vxm.chat.addString(this.emote);
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+button {
+  position: absolute;
+  bottom: 0px;
+  right:0px;
+  padding:4px;
+  margin:5px;
+}
+</style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index bbf32754..094f966c 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -16,6 +16,9 @@
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput"
       />
+      <EmoticonButton
+        emoticon = '😃'
+      />
       <ConnectButton
         v-show="!showInput"
       />
@@ -32,6 +35,7 @@
   import Pane from './Pane.vue';
   import ConnectingMessage from '../Connection/ConnectingMessage.vue';
   import ScalableInput from '@/components/ScalableInput.vue';
+  import EmoticonButton from '@/components/EmoticonButton.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
   import BanStatus from '@/types/BanStatus';
   import Message from '@/types/message';
@@ -43,6 +47,7 @@
       UserMessage,
       Pane,
       ScalableInput,
+      EmoticonButton,
       ConnectButton,
     },
   })
@@ -68,6 +73,10 @@
           || this.connectionData.firstConnection;
     }
 
+    get strsNeed() {
+      return this.$vxm.chat.stringToAdd;
+    }
+
     $refs!: {
       pane: Pane;
     };
@@ -89,5 +98,11 @@
     updateFooterHeight() {
       this.$nextTick(this.$refs.pane.updateFooterHeight);
     }
+
+    @Watch('strsNeed')
+    newStrs() {
+      this.newMessage += this.strsNeed;
+      this.$vxm.chat.clearString();
+    }
   }
 </script>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 6570e044..3a91e3bb 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -16,9 +16,8 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
-
-
-  @Component({})
+  @Component({
+  })
   export default class ScalableInput extends Vue {
     height = 0;
 
@@ -71,7 +70,7 @@
 
   .scalable-input,
   .scalable-input-hidden {
-    width: calc(100% - 2px); //100% - border
+    width: calc(100% - 37px); //100% - border
     min-height: 19px;
   }
 
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 7b355f83..65cea6ed 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,6 +72,8 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
+  stringToAdd : string = '';
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -84,6 +86,15 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @mutation
+  addString(str:string) {
+    this.stringToAdd += str;
+  }
+
+  @mutation clearString() {
+    this.stringToAdd = '';
+  }
+
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {

From 106f1b6f028ecf3e29db60de74068db43f525293 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 12:21:04 -0500
Subject: [PATCH 007/223] Buttons are now working component

---
 src/app/components/EmoticonButton.vue    | 14 ++++++++++++--
 src/app/components/Panes/MessagePane.vue |  9 ++++++++-
 src/app/components/ScalableInput.vue     |  2 +-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components/EmoticonButton.vue b/src/app/components/EmoticonButton.vue
index a3bfe35c..4dfb4da7 100644
--- a/src/app/components/EmoticonButton.vue
+++ b/src/app/components/EmoticonButton.vue
@@ -1,5 +1,5 @@
 <template>
-<button class='emoticon-button' v-on:click="add()">
+<button class='emoticon-button' v-on:click="add()" :style="{ right: rightAmount + 'px'}">
   {{emote}}
 </button>
 </template>
@@ -14,10 +14,17 @@
     @Prop({ required: true })
     emoticon!: string;
 
+    @Prop({ required: true })
+    position!: Number;
+
     get emote() {
       return this.emoticon;
     }
 
+    get rightAmount() {
+      return ((Number(this.position) - 1) * 20).toString();
+    }
+
     add() {
       this.$vxm.chat.addString(this.emote);
     }
@@ -29,7 +36,10 @@ button {
   position: absolute;
   bottom: 0px;
   right:0px;
-  padding:4px;
+  padding:3px;
   margin:5px;
+  border: solid 1px white;
+  border-radius:10%;
+  background-color:white;
 }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 094f966c..c56e5260 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -17,7 +17,14 @@
         v-show="showInput"
       />
       <EmoticonButton
-        emoticon = '😃'
+        emoticon='😃'
+        position=1
+        v-show="showInput"
+      />
+      <EmoticonButton
+        emoticon='😢'
+        position=2
+        v-show="showInput"
       />
       <ConnectButton
         v-show="!showInput"
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 3a91e3bb..1e76a214 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -70,7 +70,7 @@
 
   .scalable-input,
   .scalable-input-hidden {
-    width: calc(100% - 37px); //100% - border
+    width: calc(100% - 57px); //100% - border
     min-height: 19px;
   }
 

From f6d338f7e826fa2908e857671630a58238b7e5c2 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 12:29:05 -0500
Subject: [PATCH 008/223] ExpandButton toggles display of EmoticonButtons with
 v-if="expansion"

---
 src/app/components/ExpandButton.vue      | 44 ++++++++++++++++++++++++
 src/app/components/Panes/MessagePane.vue |  7 ++++
 src/app/store/chat.vuex.ts               | 10 +++++-
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/ExpandButton.vue

diff --git a/src/app/components/ExpandButton.vue b/src/app/components/ExpandButton.vue
new file mode 100644
index 00000000..71dfd6bc
--- /dev/null
+++ b/src/app/components/ExpandButton.vue
@@ -0,0 +1,44 @@
+<template>
+<button class='plus-emoticon-button' v-on:click="toggle()" :style="{ right: rightAmount + 'px'}">
+  {{emote}}
+</button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component({
+  })
+  export default class EmoticonButton extends Vue {
+    emoticon = '➕';
+
+    @Prop({ required: true })
+    position!: Number;
+
+    get emote() {
+      return this.emoticon;
+    }
+
+    get rightAmount() {
+      return ((Number(this.position) - 1) * 20).toString();
+    }
+
+    toggle() {
+      this.$vxm.chat.toggleExpansion();
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+button {
+  position: absolute;
+  bottom: 0px;
+  right:0px;
+  padding:3px;
+  margin:5px;
+  border: solid 1px white;
+  border-radius:10%;
+  background-color:white;
+}
+</style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index c56e5260..3ac9ec8d 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -26,6 +26,7 @@
         position=2
         v-show="showInput"
       />
+      <ExpandButton position=3 />
       <ConnectButton
         v-show="!showInput"
       />
@@ -43,6 +44,7 @@
   import ConnectingMessage from '../Connection/ConnectingMessage.vue';
   import ScalableInput from '@/components/ScalableInput.vue';
   import EmoticonButton from '@/components/EmoticonButton.vue';
+  import ExpandButton from '@/components/ExpandButton.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
   import BanStatus from '@/types/BanStatus';
   import Message from '@/types/message';
@@ -55,6 +57,7 @@
       Pane,
       ScalableInput,
       EmoticonButton,
+      ExpandButton,
       ConnectButton,
     },
   })
@@ -84,6 +87,10 @@
       return this.$vxm.chat.stringToAdd;
     }
 
+    get expansion() {
+      return this.$vxm.chat.expandedButtons;
+    }
+
     $refs!: {
       pane: Pane;
     };
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 65cea6ed..689387c7 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -74,6 +74,8 @@ export default class ChatModule extends VuexModule {
 
   stringToAdd : string = '';
 
+  expandedButtons : boolean = false;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -91,10 +93,16 @@ export default class ChatModule extends VuexModule {
     this.stringToAdd += str;
   }
 
-  @mutation clearString() {
+  @mutation
+  clearString() {
     this.stringToAdd = '';
   }
 
+  @mutation
+  toggleExpansion() {
+    this.expandedButtons = this.expandedButtons ? false : true;
+  }
+
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {

From f240fd9a88a4e1c3741cec8ae7872ed8201a1d67 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 13:28:29 -0500
Subject: [PATCH 009/223] Expanded bar and made it work for everything

---
 src/app/components/EmoticonButton.vue    |  2 +-
 src/app/components/ExpandButton.vue      |  8 +--
 src/app/components/Panes/MessagePane.vue | 69 ++++++++++++++++++++++--
 src/app/components/ScalableInput.vue     |  9 +++-
 src/app/store/chat.vuex.ts               |  7 +++
 5 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/src/app/components/EmoticonButton.vue b/src/app/components/EmoticonButton.vue
index 4dfb4da7..c6b06360 100644
--- a/src/app/components/EmoticonButton.vue
+++ b/src/app/components/EmoticonButton.vue
@@ -36,7 +36,7 @@ button {
   position: absolute;
   bottom: 0px;
   right:0px;
-  padding:3px;
+  padding:4px;
   margin:5px;
   border: solid 1px white;
   border-radius:10%;
diff --git a/src/app/components/ExpandButton.vue b/src/app/components/ExpandButton.vue
index 71dfd6bc..fb669eb1 100644
--- a/src/app/components/ExpandButton.vue
+++ b/src/app/components/ExpandButton.vue
@@ -1,5 +1,5 @@
 <template>
-<button class='plus-emoticon-button' v-on:click="toggle()" :style="{ right: rightAmount + 'px'}">
+<button class='plus-emoticon-button' v-on:click="toggle()">
   {{emote}}
 </button>
 </template>
@@ -20,10 +20,6 @@
       return this.emoticon;
     }
 
-    get rightAmount() {
-      return ((Number(this.position) - 1) * 20).toString();
-    }
-
     toggle() {
       this.$vxm.chat.toggleExpansion();
     }
@@ -34,8 +30,8 @@
 button {
   position: absolute;
   bottom: 0px;
+  padding:4px;
   right:0px;
-  padding:3px;
   margin:5px;
   border: solid 1px white;
   border-radius:10%;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 3ac9ec8d..a2d1fb4e 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -14,19 +14,74 @@
         @keypress.native="onKeyPress"
         :disabled="!connectionData.connected || isBanned"
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
-        v-show="showInput"
+        v-show="showInput && (!sizeSmall || !expansion)"
+        v-bind:class="{'smaller': expansion, 'bigger': !expansion}"
+      />
+      <EmoticonButton
+        emoticon='😀'
+        position=2
+        v-show="showInput && !sizeSmall"
       />
       <EmoticonButton
-        emoticon='😃'
-        position=1
+        emoticon='👍'
+        position=3
+        v-show="showInput && !sizeSmall"
+      />
+      <ExpandButton />
+      <EmoticonButton
+        emoticon='👎'
+        position=4
         v-show="showInput"
+        v-if="expansion"
       />
       <EmoticonButton
         emoticon='😢'
+        position=5
+        v-show="showInput"
+        v-if="expansion"
+      />
+      <EmoticonButton
+        emoticon='😠'
+        position=6
+        v-show="showInput"
+        v-if="expansion"
+      />
+      <EmoticonButton
+        emoticon='😀'
+        position=3
+        v-show="showInput && expansion && sizeSmall"
+         v-if="expansion"
+      />
+      <EmoticonButton
+        emoticon='👍'
         position=2
+        v-show="showInput && expansion && sizeSmall"
+        v-if="expansion"
+      />
+      <EmoticonButton
+        emoticon='😮'
+        position=7
         v-show="showInput"
+        v-if="expansion"
+      />
+      <EmoticonButton
+        emoticon='😮'
+        position=8
+        v-show="showInput"
+        v-if="expansion"
+      />
+      <EmoticonButton
+        emoticon='😂'
+        position=9
+        v-show="showInput"
+        v-if="expansion"
+      />
+      <EmoticonButton
+        emoticon='😎'
+        position=10
+        v-show="showInput"
+        v-if="expansion"
       />
-      <ExpandButton position=3 />
       <ConnectButton
         v-show="!showInput"
       />
@@ -91,6 +146,12 @@
       return this.$vxm.chat.expandedButtons;
     }
 
+    get sizeSmall() {
+      const val = (window.innerWidth < 300);
+      this.$vxm.chat.changeScreenSmall(val);
+      return (window.innerWidth < 300);
+    }
+
     $refs!: {
       pane: Pane;
     };
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 1e76a214..5649ac43 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -3,7 +3,7 @@
     <textarea
       :value="value"
       :style="{height: `${height}px`}"
-      class="scalable-input"
+      class="scalable-input bigger"
       :disabled="disabled"
       @input="$emit('input', $event.target.value)"
     />
@@ -67,10 +67,15 @@
     top: 0px;
     padding: 0;
   }
+  .smaller {
+    width: calc(100% - 197px); //100% - border
+  }
+  .bigger {
+    width: calc(100% - 37px); //100% - border
+  }
 
   .scalable-input,
   .scalable-input-hidden {
-    width: calc(100% - 57px); //100% - border
     min-height: 19px;
   }
 
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 689387c7..4f32039d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -76,6 +76,8 @@ export default class ChatModule extends VuexModule {
 
   expandedButtons : boolean = false;
 
+  screenSmall !: boolean;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -88,6 +90,11 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @mutation
+  changeScreenSmall(to:boolean) {
+    this.screenSmall = to;
+  }
+
   @mutation
   addString(str:string) {
     this.stringToAdd += str;

From 5e17cada82772572f821235dd98ee1c6b0f12cfb Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 13:50:30 -0500
Subject: [PATCH 010/223] Expanded emoticons, made sure everything worked for
 all configurations, minor style edits

---
 src/app/components/EmoticonButton.vue    | 7 +++++--
 src/app/components/ExpandButton.vue      | 7 +++++--
 src/app/components/Panes/MessagePane.vue | 4 +++-
 src/app/components/ScalableInput.vue     | 7 +++++--
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/components/EmoticonButton.vue b/src/app/components/EmoticonButton.vue
index c6b06360..55a51205 100644
--- a/src/app/components/EmoticonButton.vue
+++ b/src/app/components/EmoticonButton.vue
@@ -36,10 +36,13 @@ button {
   position: absolute;
   bottom: 0px;
   right:0px;
-  padding:4px;
+  padding-right:3px;
+  padding-left:3px;
+  padding-bottom:1px;
+  padding-top:1px;
   margin:5px;
   border: solid 1px white;
-  border-radius:10%;
+  border-radius:8%;
   background-color:white;
 }
 </style>
diff --git a/src/app/components/ExpandButton.vue b/src/app/components/ExpandButton.vue
index fb669eb1..5141a6d1 100644
--- a/src/app/components/ExpandButton.vue
+++ b/src/app/components/ExpandButton.vue
@@ -30,11 +30,14 @@
 button {
   position: absolute;
   bottom: 0px;
-  padding:4px;
+  padding-right:3px;
+  padding-left:3px;
+  padding-bottom:1px;
+  padding-top:1px;
   right:0px;
   margin:5px;
   border: solid 1px white;
-  border-radius:10%;
+  border-radius:8%;
   background-color:white;
 }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index a2d1fb4e..ff02a42d 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -15,7 +15,9 @@
         :disabled="!connectionData.connected || isBanned"
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput && (!sizeSmall || !expansion)"
-        v-bind:class="{'smaller': expansion, 'bigger': !expansion}"
+        v-bind:class="{'smaller': expansion && !sizeSmall,
+        'bigger': !expansion && sizeSmall,
+        'biggest': !expansion && !sizeSmall}"
       />
       <EmoticonButton
         emoticon='😀'
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 5649ac43..f868ba69 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -68,10 +68,13 @@
     padding: 0;
   }
   .smaller {
-    width: calc(100% - 197px); //100% - border
+    width: calc(100% - 195px); //100% - border
   }
   .bigger {
-    width: calc(100% - 37px); //100% - border
+    width: calc(100% - 15px); //100% - border
+  }
+  .biggest {
+    width: calc(100% - 55px);
   }
 
   .scalable-input,

From 6d3d8bd5f98cbc2e548b838df4ac14fdd2ecfe36 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 13:51:01 -0500
Subject: [PATCH 011/223] Shortened code

---
 src/app/store/chat.vuex.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 4f32039d..14784b20 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -107,7 +107,7 @@ export default class ChatModule extends VuexModule {
 
   @mutation
   toggleExpansion() {
-    this.expandedButtons = this.expandedButtons ? false : true;
+    this.expandedButtons = !this.expandedButtons;
   }
 
   @mutation

From 648ba09c9d66d1d1b37f9c1c0b3b714ba38dcceb Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 16:13:52 -0500
Subject: [PATCH 012/223] Basic layout for slideout

---
 src/app/App.vue                               |  41 ++----
 src/app/components/ExpandButton.vue           |   5 +-
 src/app/components/Slideout/Slideout.vue      | 124 ++++++++++++++++++
 .../components/Slideout/SlideoutButton.vue    |  50 +++++++
 src/app/components/Slideout/SlideoutChats.vue |  95 ++++++++++++++
 src/app/components/TabButton.vue              |   1 +
 src/app/store/chat.vuex.ts                    |  14 ++
 7 files changed, 298 insertions(+), 32 deletions(-)
 create mode 100644 src/app/components/Slideout/Slideout.vue
 create mode 100644 src/app/components/Slideout/SlideoutButton.vue
 create mode 100644 src/app/components/Slideout/SlideoutChats.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 6e420799..8ea39d97 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -4,32 +4,17 @@
     style="height:100%; overflow-y:hidden;"
   >
     <transition name="fade">
-      <div style="height: 100%;" v-show="!minimized">
-        <div style="position:relative;">
-          <TabButton
-            v-for="({name}, index) in messageTabs"
-            :key="name"
-            :selected="activeTab === index"
-            :name="name.substr(1)"
-            @input="activeTab = index"
-          />
-          <TabButton
-            :selected="userPaneSelected"
-            :name="`Online(${userCount})`"
-            @input="activeTab = messageTabs.length"
-          />
-        </div>
-        <div class="chat-content">
-          <MessagePane
-            v-for="(channel, index) in messageTabs"
-            :key="channel.name"
-            :data="channel"
-            v-show="index === activeTab"
-            :visibility="index === activeTab"
-            @postMessage="postMessage($event, channel.name)"
-          />
-          <UserPane :visibility="userPaneSelected" v-show="userPaneSelected"/>
-        </div>
+      <slideout></slideout>
+      <div class="chat-content">
+        <MessagePane
+          v-for="(channel, index) in messageTabs"
+          :key="channel.name"
+          :data="channel"
+          v-show="index === activeTab"
+          :visibility="index === activeTab"
+          @postMessage="postMessage($event, channel.name)"
+        />
+        <UserPane :visibility="userPaneSelected" v-show="userPaneSelected"/>
         <ConnectingPopup/>
         <ReportDialog ref="reportDialog"/>
       </div>
@@ -43,7 +28,7 @@
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
   import MinimizationTriangle from './components/MinimizationTriangle.vue';
-  import TabButton from './components/TabButton.vue';
+  import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
   import MessagePane from '@/components/Panes/MessagePane.vue';
@@ -52,7 +37,7 @@
   @Component({
     components: {
       MinimizationTriangle,
-      TabButton,
+      Slideout,
       ReportDialog,
       ConnectingPopup,
       MessagePane,
diff --git a/src/app/components/ExpandButton.vue b/src/app/components/ExpandButton.vue
index 5141a6d1..2fefa44f 100644
--- a/src/app/components/ExpandButton.vue
+++ b/src/app/components/ExpandButton.vue
@@ -10,12 +10,9 @@
 
   @Component({
   })
-  export default class EmoticonButton extends Vue {
+  export default class ExpandButton extends Vue {
     emoticon = '➕';
 
-    @Prop({ required: true })
-    position!: Number;
-
     get emote() {
       return this.emoticon;
     }
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
new file mode 100644
index 00000000..6da000f6
--- /dev/null
+++ b/src/app/components/Slideout/Slideout.vue
@@ -0,0 +1,124 @@
+<template>
+  <div style="height: 100%;" v-show="!minimized">
+    <div style="position:relative;">
+      <SlideoutButton
+        :selected="chatSelected"
+        :name="`Chat`"
+        @input="activeTab = 0"
+      />
+      <SlideoutButton
+       :selected="userSelected"
+        :name="`Users`"
+        @input="activeTab = 1"
+      />
+      <SlideoutButton
+        :selected="settingsSelected"
+        :name="`Settings`"
+        @input="activeTab = 2"
+      />
+    </div>
+    <SlideoutChats
+      v-if="chatSelected"
+    />
+    <SlideoutUser>
+      v-if="userSelected"
+    />
+    <SlideoutSettings>
+      v-if="settingsSelected"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    Vue, Component, Prop, Watch,
+  } from 'vue-property-decorator';
+  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
+  import TabButton from '@/components/TabButton.vue';
+  import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
+  import ReportDialog from '@/components/ReportDialog.vue';
+  import SlideoutChats from '@/components/Slideout/SlideoutChats.vue';
+  import SlideoutButton from '@/components/Slideout/SlideoutButton.vue';
+  import UserPane from '@/components/Panes/UserPane.vue';
+
+  @Component({
+    components: {
+      MinimizationTriangle,
+      TabButton,
+      SlideoutChats,
+      UserPane,
+      SlideoutButton,
+    },
+  })
+  export default class Slideout extends Vue {
+    activeTab = 0;
+
+    get chatSelected() {
+        return this.activeTab === 0;
+    }
+
+    get userSelected() {
+      return this.activeTab === 1;
+    }
+
+    get settingsSelected() {
+      return this.activeTab === 2;
+    }
+
+    @Watch('activeTab')
+    tabChanged() {
+        this.$vxm.chat.changeTab2(this.activeTab);
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import '~vue-context/src/sass/vue-context';
+  textarea {
+    border-radius: 2px;
+    font-family: "Open Sans", "Helvetica Neue", Arial, Gulim;
+    font-size: 0.85rem;
+    border: 1px solid rgb(169, 169, 169);
+    width: calc(100% - 10px);
+    font-size: 14px !important;
+  }
+</style>
+
+<style lang="scss" scoped>
+  #eterna-chat {
+    min-width: 0;
+    font-family: "Helvetica Neue", "Open Sans", Arial, Gulim;
+    font-size: 14px;
+    font-weight: 300;
+  }
+
+  .minimization-triangle {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+
+  .tabs {
+    position: relative;
+    height: 25px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 200ms;
+  }
+
+  .fade-enter, .fade-leave-to
+  {
+    opacity: 0;
+  }
+
+  .chat-content {
+    border: rgba(255, 255, 255, 0.2) solid 2px;
+    height: calc(100% - 29px);
+    position: relative;
+    color: #c0dce7;
+  }
+</style>
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
new file mode 100644
index 00000000..73aaf046
--- /dev/null
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -0,0 +1,50 @@
+<template>
+  <Button
+    :class="{active: selected}"
+    @click="$emit('input')"
+  >
+    {{ name }}
+    <slot />
+  </Button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component
+  export default class SlideoutButton extends Vue {
+    @Prop()
+    name!: string;
+
+    @Prop({ required: true })
+    selected!: string;
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  /* Style the buttons that are used to open the tab content */
+  button {
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 0.4em 1.25em;
+    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.07);
+    text-transform: capitalize;
+  }
+
+  /* Change background color of buttons on hover */
+  button:hover:not(.active) {
+    background-color: rgba(255, 255, 255, 0.13);
+  }
+
+  button.active {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+</style>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
new file mode 100644
index 00000000..480d465c
--- /dev/null
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -0,0 +1,95 @@
+<template>
+  <div
+    id="eterna-chat"
+    style="height:100%; overflow-y:hidden;"
+  >
+    <div style="height: 100%;" v-show="!minimized">
+      <div style="position:relative;">
+        <TabButton
+          v-for="({name}, index) in messageTabs"
+          :key="name"
+          :selected="activeTab === index"
+          :name="name.substr(1)"
+          @input="activeTab = index"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import {
+    Vue, Component, Prop, Watch,
+  } from 'vue-property-decorator';
+  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
+  import TabButton from '@/components/TabButton.vue';
+
+  @Component({
+    components: {
+      MinimizationTriangle,
+      TabButton,
+    },
+  })
+  export default class SlideoutChats extends Vue {
+    activeTab = 0;
+
+    get messageTabs() {
+      return Object.values(this.$vxm.chat.channels).map(channel => channel!);
+    }
+
+    @Watch('activeTab')
+    tabChanged() {
+        this.$vxm.chat.changeTab2(this.activeTab);
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import '~vue-context/src/sass/vue-context';
+  textarea {
+    border-radius: 2px;
+    font-family: "Open Sans", "Helvetica Neue", Arial, Gulim;
+    font-size: 0.85rem;
+    border: 1px solid rgb(169, 169, 169);
+    width: calc(100% - 10px);
+    font-size: 14px !important;
+  }
+</style>
+
+<style lang="scss" scoped>
+  #eterna-chat {
+    min-width: 0;
+    font-family: "Helvetica Neue", "Open Sans", Arial, Gulim;
+    font-size: 14px;
+    font-weight: 300;
+  }
+
+  .minimization-triangle {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+
+  .tabs {
+    position: relative;
+    height: 25px;
+    margin: 0;
+    padding: 0;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 200ms;
+  }
+
+  .fade-enter, .fade-leave-to
+  {
+    opacity: 0;
+  }
+
+  .chat-content {
+    border: rgba(255, 255, 255, 0.2) solid 2px;
+    height: calc(100% - 29px);
+    position: relative;
+    color: #c0dce7;
+  }
+</style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index a157e78e..a53c95b9 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -37,6 +37,7 @@
     color: #fff;
     background-color: rgba(255, 255, 255, 0.07);
     text-transform: capitalize;
+    display:block;
   }
 
   /* Change background color of buttons on hover */
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 14784b20..e7c1f020 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -78,6 +78,10 @@ export default class ChatModule extends VuexModule {
 
   screenSmall !: boolean;
 
+  tab1 !: Number;
+
+  tab2 !: Number;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -90,6 +94,16 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @mutation
+  changeTab1(to:Number) {
+    this.tab1 = to;
+  }
+
+  @mutation
+  changeTab2(to:Number) {
+    this.tab2 = to;
+  }
+
   @mutation
   changeScreenSmall(to:boolean) {
     this.screenSmall = to;

From 9cd3f34f6051f99f2091171c778b2a1606d51115 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sat, 2 May 2020 16:20:54 -0500
Subject: [PATCH 013/223] Fixed bug

---
 src/app/components/Slideout/Slideout.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 6da000f6..0f74df9d 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -20,12 +20,6 @@
     <SlideoutChats
       v-if="chatSelected"
     />
-    <SlideoutUser>
-      v-if="userSelected"
-    />
-    <SlideoutSettings>
-      v-if="settingsSelected"
-    />
   </div>
 </template>
 
@@ -51,6 +45,9 @@
     },
   })
   export default class Slideout extends Vue {
+    @Prop({ required: true })
+    active!:boolean;
+
     activeTab = 0;
 
     get chatSelected() {

From 7f8b4f38508f714ee3a8ff6aa635b6d81c035bb5 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sun, 3 May 2020 14:11:15 -0500
Subject: [PATCH 014/223] Delete EmoticonButton.vue

---
 src/app/components/EmoticonButton.vue | 48 ---------------------------
 1 file changed, 48 deletions(-)
 delete mode 100644 src/app/components/EmoticonButton.vue

diff --git a/src/app/components/EmoticonButton.vue b/src/app/components/EmoticonButton.vue
deleted file mode 100644
index 55a51205..00000000
--- a/src/app/components/EmoticonButton.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-<button class='emoticon-button' v-on:click="add()" :style="{ right: rightAmount + 'px'}">
-  {{emote}}
-</button>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-
-
-  @Component({
-  })
-  export default class EmoticonButton extends Vue {
-    @Prop({ required: true })
-    emoticon!: string;
-
-    @Prop({ required: true })
-    position!: Number;
-
-    get emote() {
-      return this.emoticon;
-    }
-
-    get rightAmount() {
-      return ((Number(this.position) - 1) * 20).toString();
-    }
-
-    add() {
-      this.$vxm.chat.addString(this.emote);
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-button {
-  position: absolute;
-  bottom: 0px;
-  right:0px;
-  padding-right:3px;
-  padding-left:3px;
-  padding-bottom:1px;
-  padding-top:1px;
-  margin:5px;
-  border: solid 1px white;
-  border-radius:8%;
-  background-color:white;
-}
-</style>

From 5f0a222bd6b9a08bae1c36499f42c53c213e1524 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sun, 3 May 2020 14:11:55 -0500
Subject: [PATCH 015/223] Delete ExpandButton.vue

---
 src/app/components/ExpandButton.vue | 40 -----------------------------
 1 file changed, 40 deletions(-)
 delete mode 100644 src/app/components/ExpandButton.vue

diff --git a/src/app/components/ExpandButton.vue b/src/app/components/ExpandButton.vue
deleted file mode 100644
index 2fefa44f..00000000
--- a/src/app/components/ExpandButton.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-<button class='plus-emoticon-button' v-on:click="toggle()">
-  {{emote}}
-</button>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-
-
-  @Component({
-  })
-  export default class ExpandButton extends Vue {
-    emoticon = '➕';
-
-    get emote() {
-      return this.emoticon;
-    }
-
-    toggle() {
-      this.$vxm.chat.toggleExpansion();
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-button {
-  position: absolute;
-  bottom: 0px;
-  padding-right:3px;
-  padding-left:3px;
-  padding-bottom:1px;
-  padding-top:1px;
-  right:0px;
-  margin:5px;
-  border: solid 1px white;
-  border-radius:8%;
-  background-color:white;
-}
-</style>

From 25608cd999d97e7dd409763fa15943b45564881a Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Sun, 3 May 2020 14:16:35 -0500
Subject: [PATCH 016/223] Cleanup

---
 src/app/components/Panes/MessagePane.vue | 92 ------------------------
 src/app/store/chat.vuex.ts               | 26 -------
 2 files changed, 118 deletions(-)

diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index ff02a42d..330d0f0e 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -15,74 +15,6 @@
         :disabled="!connectionData.connected || isBanned"
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput && (!sizeSmall || !expansion)"
-        v-bind:class="{'smaller': expansion && !sizeSmall,
-        'bigger': !expansion && sizeSmall,
-        'biggest': !expansion && !sizeSmall}"
-      />
-      <EmoticonButton
-        emoticon='😀'
-        position=2
-        v-show="showInput && !sizeSmall"
-      />
-      <EmoticonButton
-        emoticon='👍'
-        position=3
-        v-show="showInput && !sizeSmall"
-      />
-      <ExpandButton />
-      <EmoticonButton
-        emoticon='👎'
-        position=4
-        v-show="showInput"
-        v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='😢'
-        position=5
-        v-show="showInput"
-        v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='😠'
-        position=6
-        v-show="showInput"
-        v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='😀'
-        position=3
-        v-show="showInput && expansion && sizeSmall"
-         v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='👍'
-        position=2
-        v-show="showInput && expansion && sizeSmall"
-        v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='😮'
-        position=7
-        v-show="showInput"
-        v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='😮'
-        position=8
-        v-show="showInput"
-        v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='😂'
-        position=9
-        v-show="showInput"
-        v-if="expansion"
-      />
-      <EmoticonButton
-        emoticon='😎'
-        position=10
-        v-show="showInput"
-        v-if="expansion"
       />
       <ConnectButton
         v-show="!showInput"
@@ -100,8 +32,6 @@
   import Pane from './Pane.vue';
   import ConnectingMessage from '../Connection/ConnectingMessage.vue';
   import ScalableInput from '@/components/ScalableInput.vue';
-  import EmoticonButton from '@/components/EmoticonButton.vue';
-  import ExpandButton from '@/components/ExpandButton.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
   import BanStatus from '@/types/BanStatus';
   import Message from '@/types/message';
@@ -113,8 +43,6 @@
       UserMessage,
       Pane,
       ScalableInput,
-      EmoticonButton,
-      ExpandButton,
       ConnectButton,
     },
   })
@@ -140,20 +68,6 @@
           || this.connectionData.firstConnection;
     }
 
-    get strsNeed() {
-      return this.$vxm.chat.stringToAdd;
-    }
-
-    get expansion() {
-      return this.$vxm.chat.expandedButtons;
-    }
-
-    get sizeSmall() {
-      const val = (window.innerWidth < 300);
-      this.$vxm.chat.changeScreenSmall(val);
-      return (window.innerWidth < 300);
-    }
-
     $refs!: {
       pane: Pane;
     };
@@ -175,11 +89,5 @@
     updateFooterHeight() {
       this.$nextTick(this.$refs.pane.updateFooterHeight);
     }
-
-    @Watch('strsNeed')
-    newStrs() {
-      this.newMessage += this.strsNeed;
-      this.$vxm.chat.clearString();
-    }
   }
 </script>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index e7c1f020..c525ef20 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,12 +72,6 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
-  stringToAdd : string = '';
-
-  expandedButtons : boolean = false;
-
-  screenSmall !: boolean;
-
   tab1 !: Number;
 
   tab2 !: Number;
@@ -104,26 +98,6 @@ export default class ChatModule extends VuexModule {
     this.tab2 = to;
   }
 
-  @mutation
-  changeScreenSmall(to:boolean) {
-    this.screenSmall = to;
-  }
-
-  @mutation
-  addString(str:string) {
-    this.stringToAdd += str;
-  }
-
-  @mutation
-  clearString() {
-    this.stringToAdd = '';
-  }
-
-  @mutation
-  toggleExpansion() {
-    this.expandedButtons = !this.expandedButtons;
-  }
-
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {

From 898d0bc42c147ab88b06368faf2915ebe1754843 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Mon, 4 May 2020 11:53:21 -0500
Subject: [PATCH 017/223] Got it working

---
 src/app/App.vue                               |  24 ++--
 src/app/components/Slideout/Slideout.vue      | 109 +++++-------------
 src/app/components/Slideout/SlideoutChats.vue |  76 ++----------
 src/app/store/chat.vuex.ts                    |   4 +-
 4 files changed, 59 insertions(+), 154 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 8ea39d97..0a3c4cd1 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -3,18 +3,18 @@
     id="eterna-chat"
     style="height:100%; overflow-y:hidden;"
   >
+    <slideout style="z-index:1;"></slideout>
     <transition name="fade">
-      <slideout></slideout>
-      <div class="chat-content">
+      <div class="chat-content" style="position:absolute;top:0px;left:0px;height:100%;width:100px;">
         <MessagePane
           v-for="(channel, index) in messageTabs"
           :key="channel.name"
           :data="channel"
-          v-show="index === activeTab"
-          :visibility="index === activeTab"
+          v-show="index === activeTab2 && chatPaneSelected"
+          :visibility="index === activeTab2 && chatPaneSelected"
           @postMessage="postMessage($event, channel.name)"
         />
-        <UserPane :visibility="userPaneSelected" v-show="userPaneSelected"/>
+        <UserPane :visibility="userPaneSelected" v-show="userPaneSelected" />
         <ConnectingPopup/>
         <ReportDialog ref="reportDialog"/>
       </div>
@@ -56,7 +56,13 @@
 
     minimized = false;
 
-    activeTab = 0;
+    get activeTab() {
+      return this.$vxm.chat.tab1;
+    }
+
+    get activeTab2() {
+      return this.$vxm.chat.tab2;
+    }
 
     $refs!: {
       reportDialog: ReportDialog;
@@ -67,7 +73,11 @@
     }
 
     get userPaneSelected() {
-      return this.activeTab === this.messageTabs.length;
+      return this.activeTab === 1;
+    }
+
+    get chatPaneSelected() {
+      return this.activeTab === 0;
     }
 
     get userCount() {
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 0f74df9d..0da82ff4 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,24 +1,27 @@
 <template>
-  <div style="height: 100%;" v-show="!minimized">
-    <div style="position:relative;">
-      <SlideoutButton
-        :selected="chatSelected"
-        :name="`Chat`"
-        @input="activeTab = 0"
-      />
-      <SlideoutButton
-       :selected="userSelected"
-        :name="`Users`"
-        @input="activeTab = 1"
-      />
-      <SlideoutButton
-        :selected="settingsSelected"
-        :name="`Settings`"
-        @input="activeTab = 2"
-      />
-    </div>
+  <div style="position:relative; background-color:darkblue;">
+    <input type="checkbox" class="checkbox" v-model="checked">
+    <SlideoutButton
+      :selected="chatSelected"
+      :name="`Chat`"
+      @input="activeTab = 0"
+      v-show="!checked"
+    />
+    <SlideoutButton
+      :selected="userSelected"
+      :name="`Users`"
+      @input="activeTab = 1"
+      v-show="!checked"
+    />
+    <SlideoutButton
+      :selected="settingsSelected"
+      :name="`Settings`"
+      @input="activeTab = 2"
+      v-show="!checked"
+    />
     <SlideoutChats
       v-if="chatSelected"
+      v-show="!checked"
     />
   </div>
 </template>
@@ -27,29 +30,20 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
-  import TabButton from '@/components/TabButton.vue';
-  import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
-  import ReportDialog from '@/components/ReportDialog.vue';
   import SlideoutChats from '@/components/Slideout/SlideoutChats.vue';
   import SlideoutButton from '@/components/Slideout/SlideoutButton.vue';
-  import UserPane from '@/components/Panes/UserPane.vue';
 
   @Component({
     components: {
-      MinimizationTriangle,
-      TabButton,
       SlideoutChats,
-      UserPane,
       SlideoutButton,
     },
   })
   export default class Slideout extends Vue {
-    @Prop({ required: true })
-    active!:boolean;
-
     activeTab = 0;
 
+    checked = false;
+
     get chatSelected() {
         return this.activeTab === 0;
     }
@@ -64,58 +58,15 @@
 
     @Watch('activeTab')
     tabChanged() {
-        this.$vxm.chat.changeTab2(this.activeTab);
+      this.$vxm.chat.changeTab1(this.activeTab);
     }
   }
 </script>
 
-<style lang="scss">
-  @import '~vue-context/src/sass/vue-context';
-  textarea {
-    border-radius: 2px;
-    font-family: "Open Sans", "Helvetica Neue", Arial, Gulim;
-    font-size: 0.85rem;
-    border: 1px solid rgb(169, 169, 169);
-    width: calc(100% - 10px);
-    font-size: 14px !important;
-  }
-</style>
-
-<style lang="scss" scoped>
-  #eterna-chat {
-    min-width: 0;
-    font-family: "Helvetica Neue", "Open Sans", Arial, Gulim;
-    font-size: 14px;
-    font-weight: 300;
-  }
-
-  .minimization-triangle {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-  }
-
-  .tabs {
-    position: relative;
-    height: 25px;
-    margin: 0;
-    padding: 0;
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 200ms;
-  }
-
-  .fade-enter, .fade-leave-to
-  {
-    opacity: 0;
-  }
-
-  .chat-content {
-    border: rgba(255, 255, 255, 0.2) solid 2px;
-    height: calc(100% - 29px);
-    position: relative;
-    color: #c0dce7;
-  }
+<style scoped>
+.checkbox {
+  width:fit-content;
+  margin:5px;
+  vertical-align:middle;
+}
 </style>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 480d465c..b8ab56e1 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -1,18 +1,13 @@
 <template>
-  <div
-    id="eterna-chat"
-    style="height:100%; overflow-y:hidden;"
-  >
-    <div style="height: 100%;" v-show="!minimized">
-      <div style="position:relative;">
-        <TabButton
-          v-for="({name}, index) in messageTabs"
-          :key="name"
-          :selected="activeTab === index"
-          :name="name.substr(1)"
-          @input="activeTab = index"
-        />
-      </div>
+  <div>
+    <div style="position:relative;">
+      <TabButton
+        v-for="({name}, index) in messageTabs"
+        :key="name"
+        :selected="activeTab === index"
+        :name="name.substr(1)"
+        @input="activeTab = index"
+      />
     </div>
   </div>
 </template>
@@ -38,58 +33,7 @@
 
     @Watch('activeTab')
     tabChanged() {
-        this.$vxm.chat.changeTab2(this.activeTab);
+      this.$vxm.chat.changeTab2(this.activeTab);
     }
   }
 </script>
-
-<style lang="scss">
-  @import '~vue-context/src/sass/vue-context';
-  textarea {
-    border-radius: 2px;
-    font-family: "Open Sans", "Helvetica Neue", Arial, Gulim;
-    font-size: 0.85rem;
-    border: 1px solid rgb(169, 169, 169);
-    width: calc(100% - 10px);
-    font-size: 14px !important;
-  }
-</style>
-
-<style lang="scss" scoped>
-  #eterna-chat {
-    min-width: 0;
-    font-family: "Helvetica Neue", "Open Sans", Arial, Gulim;
-    font-size: 14px;
-    font-weight: 300;
-  }
-
-  .minimization-triangle {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-  }
-
-  .tabs {
-    position: relative;
-    height: 25px;
-    margin: 0;
-    padding: 0;
-  }
-
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 200ms;
-  }
-
-  .fade-enter, .fade-leave-to
-  {
-    opacity: 0;
-  }
-
-  .chat-content {
-    border: rgba(255, 255, 255, 0.2) solid 2px;
-    height: calc(100% - 29px);
-    position: relative;
-    color: #c0dce7;
-  }
-</style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index c525ef20..0bf5d887 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,9 +72,9 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
-  tab1 !: Number;
+  tab1: Number = 0;
 
-  tab2 !: Number;
+  tab2: Number = 0;
 
   constructor() {
     super();

From b5f2ce3fc61af5b46ad6bba8e47efb17d33ec020 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Mon, 4 May 2020 12:31:10 -0500
Subject: [PATCH 018/223] Works better

---
 src/app/App.vue                               | 12 ++--
 src/app/components/Slideout/Slideout.vue      | 57 ++++++++++++-------
 src/app/components/Slideout/SlideoutChats.vue |  2 +
 3 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 0a3c4cd1..36488bec 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -5,7 +5,7 @@
   >
     <slideout style="z-index:1;"></slideout>
     <transition name="fade">
-      <div class="chat-content" style="position:absolute;top:0px;left:0px;height:100%;width:100px;">
+      <div class="chat-content">
         <MessagePane
           v-for="(channel, index) in messageTabs"
           :key="channel.name"
@@ -19,7 +19,6 @@
         <ReportDialog ref="reportDialog"/>
       </div>
     </transition>
-    <MinimizationTriangle class="minimization-triangle" v-model="minimized"/>
   </div>
 </template>
 
@@ -27,7 +26,6 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import MinimizationTriangle from './components/MinimizationTriangle.vue';
   import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
@@ -36,7 +34,6 @@
 
   @Component({
     components: {
-      MinimizationTriangle,
       Slideout,
       ReportDialog,
       ConnectingPopup,
@@ -145,8 +142,11 @@
 
   .chat-content {
     border: rgba(255, 255, 255, 0.2) solid 2px;
-    height: calc(100% - 29px);
-    position: relative;
+    height: calc(100% - 29px); //Account for top bar and border
+    position: absolute;
+    top:23px;
+    left:0px;
+    width:calc(100% - 4px); //Account for border
     color: #c0dce7;
   }
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 0da82ff4..8688ca70 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,24 +1,29 @@
 <template>
   <div style="position:relative; background-color:darkblue;">
     <input type="checkbox" class="checkbox" v-model="checked">
-    <SlideoutButton
-      :selected="chatSelected"
-      :name="`Chat`"
-      @input="activeTab = 0"
-      v-show="!checked"
-    />
-    <SlideoutButton
-      :selected="userSelected"
-      :name="`Users`"
-      @input="activeTab = 1"
-      v-show="!checked"
-    />
-    <SlideoutButton
-      :selected="settingsSelected"
-      :name="`Settings`"
-      @input="activeTab = 2"
-      v-show="!checked"
-    />
+    <span>
+      <SlideoutButton
+        :selected="chatSelected"
+        :name="`Chat`"
+        @input="activeTab = 0"
+        :class="{ 'big' : checked && activeTab === 0}"
+        v-show="!checked || activeTab === 0"
+      />
+      <SlideoutButton
+        :selected="userSelected"
+        :name="`Users`"
+        @input="activeTab = 1"
+        :class="{ 'big' : checked && activeTab === 1 }"
+        v-show="!checked || activeTab === 1"
+      />
+      <SlideoutButton
+        :selected="settingsSelected"
+        :name="`Settings`"
+        @input="activeTab = 2"
+        :class="{ 'big' : checked && activeTab === 2 }"
+        v-show="!checked || activeTab === 2"
+      />
+    </span>
     <SlideoutChats
       v-if="chatSelected"
       v-show="!checked"
@@ -42,7 +47,7 @@
   export default class Slideout extends Vue {
     activeTab = 0;
 
-    checked = false;
+    checked = true;
 
     get chatSelected() {
         return this.activeTab === 0;
@@ -56,8 +61,18 @@
       return this.activeTab === 2;
     }
 
+    get centeredValue() {
+      if (!this.checked && this.activeTab === 2) {
+        return ('calc(100% - 23px;');
+      }
+      return '24.59px';
+    }
+
     @Watch('activeTab')
     tabChanged() {
+      if (this.activeTab !== 0) {
+        this.checked = true;
+      }
       this.$vxm.chat.changeTab1(this.activeTab);
     }
   }
@@ -69,4 +84,8 @@
   margin:5px;
   vertical-align:middle;
 }
+.big {
+  width: Calc(100% - 23px);
+  float:right;
+}
 </style>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index b8ab56e1..c9fd9fa5 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -17,6 +17,7 @@
   } from 'vue-property-decorator';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import TabButton from '@/components/TabButton.vue';
+  import Slideout from './Slideout.vue';
 
   @Component({
     components: {
@@ -33,6 +34,7 @@
 
     @Watch('activeTab')
     tabChanged() {
+      (this.$parent as Slideout).checked = true;
       this.$vxm.chat.changeTab2(this.activeTab);
     }
   }

From f9329d7461d8231e800582757641ca537e98253b Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Mon, 4 May 2020 16:42:29 -0500
Subject: [PATCH 019/223] Slideout set up, style changes

---
 src/app/App.vue                               | 16 +++-
 src/app/components/MinimizationTriangle.vue   | 14 ++++
 src/app/components/Slideout/Slideout.vue      | 82 +++++++++++++------
 .../components/Slideout/SlideoutButton.vue    |  1 +
 src/app/components/Slideout/SlideoutChats.vue | 10 ++-
 src/app/components/TabButton.vue              | 18 +++-
 src/app/store/chat.vuex.ts                    | 14 ++++
 7 files changed, 125 insertions(+), 30 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 36488bec..0a061280 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -5,7 +5,7 @@
   >
     <slideout style="z-index:1;"></slideout>
     <transition name="fade">
-      <div class="chat-content">
+      <div class="chat-content" v-if="!minimized">
         <MessagePane
           v-for="(channel, index) in messageTabs"
           :key="channel.name"
@@ -19,6 +19,7 @@
         <ReportDialog ref="reportDialog"/>
       </div>
     </transition>
+    <MinimizationTriangle v-model="minimization" />
   </div>
 </template>
 
@@ -31,6 +32,7 @@
   import ReportDialog from '@/components/ReportDialog.vue';
   import MessagePane from '@/components/Panes/MessagePane.vue';
   import UserPane from '@/components/Panes/UserPane.vue';
+  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
 
   @Component({
     components: {
@@ -39,6 +41,7 @@
       ConnectingPopup,
       MessagePane,
       UserPane,
+      MinimizationTriangle,
     },
   })
   export default class App extends Vue {
@@ -51,7 +54,7 @@
     @Prop()
     uid!: string;
 
-    minimized = false;
+    minimization = false;
 
     get activeTab() {
       return this.$vxm.chat.tab1;
@@ -81,6 +84,10 @@
       return Object.keys(this.$vxm.chat.connectedUsers).length;
     }
 
+    get minimized() {
+      return this.minimization;
+    }
+
     postMessage(rawMessage: string, channel: string) {
       this.$vxm.chat.sendMessage({ rawMessage, channel });
     }
@@ -149,4 +156,9 @@
     width:calc(100% - 4px); //Account for border
     color: #c0dce7;
   }
+  .minimizationTriangle {
+  position:absolute;
+  top:0px;
+  right:0px;
+}
 </style>
diff --git a/src/app/components/MinimizationTriangle.vue b/src/app/components/MinimizationTriangle.vue
index 6ed572b0..71c640aa 100644
--- a/src/app/components/MinimizationTriangle.vue
+++ b/src/app/components/MinimizationTriangle.vue
@@ -29,10 +29,24 @@
     width: 25px;
     transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
+    animation-name: minimization-triangle-rotation-from;
+    animation-duration: 0.2s;
+  }
+
+  @keyframes minimization-triangle-rotation-to {
+    from {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
+    to {transform: rotate(270deg); -webkit-transform: rotate(270deg);}
+  }
+
+  @keyframes minimization-triangle-rotation-from {
+    to {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
+    from {transform: rotate(270deg); -webkit-transform: rotate(270deg);}
   }
 
   .minimization-triangle.flipped {
     transform: rotate(270deg);
     -webkit-transform: rotate(270deg);
+    animation-name: minimization-triangle-rotation-to;
+    animation-duration: 0.2s;
   }
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 8688ca70..88c99fbe 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,33 +1,32 @@
 <template>
-  <div style="position:relative; background-color:darkblue;">
-    <input type="checkbox" class="checkbox" v-model="checked">
-    <span>
+  <div
+  style="position:relative; width:151px"
+  :class="{ slideoutContainerHidden: !checked, tall:checked}"
+  >
+    <div class="slideout-container" :class="{ slideoutContainerHidden: !checked }">
+      <input type="checkbox" class="checkbox" v-model="checked" v-show="true">
+      <span v-if="checked" id="slideout-content">
       <SlideoutButton
         :selected="chatSelected"
-        :name="`Chat`"
+        :name="`#`"
         @input="activeTab = 0"
-        :class="{ 'big' : checked && activeTab === 0}"
-        v-show="!checked || activeTab === 0"
       />
       <SlideoutButton
         :selected="userSelected"
-        :name="`Users`"
+        :name="`👤`"
         @input="activeTab = 1"
-        :class="{ 'big' : checked && activeTab === 1 }"
-        v-show="!checked || activeTab === 1"
       />
       <SlideoutButton
         :selected="settingsSelected"
-        :name="`Settings`"
+        :name="`⚙️`"
         @input="activeTab = 2"
-        :class="{ 'big' : checked && activeTab === 2 }"
-        v-show="!checked || activeTab === 2"
       />
-    </span>
-    <SlideoutChats
-      v-if="chatSelected"
-      v-show="!checked"
-    />
+      <SlideoutChats
+        v-if="chatSelected"
+      />
+      </span>
+    </div>
+    <div id="current-tab">{{currentTab}}</div>
   </div>
 </template>
 
@@ -37,11 +36,13 @@
   } from 'vue-property-decorator';
   import SlideoutChats from '@/components/Slideout/SlideoutChats.vue';
   import SlideoutButton from '@/components/Slideout/SlideoutButton.vue';
+  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
 
   @Component({
     components: {
       SlideoutChats,
       SlideoutButton,
+      MinimizationTriangle,
     },
   })
   export default class Slideout extends Vue {
@@ -49,6 +50,8 @@
 
     checked = true;
 
+    minimizedValue = false;
+
     get chatSelected() {
         return this.activeTab === 0;
     }
@@ -61,17 +64,19 @@
       return this.activeTab === 2;
     }
 
-    get centeredValue() {
-      if (!this.checked && this.activeTab === 2) {
-        return ('calc(100% - 23px;');
-      }
-      return '24.59px';
+    get messageTabs() {
+        return Object.values(this.$vxm.chat.channels).map(channel => channel!);
+    }
+
+    get currentTab() {
+        return this.$vxm.chat.chatChannel;
     }
 
     @Watch('activeTab')
     tabChanged() {
       if (this.activeTab !== 0) {
-        this.checked = true;
+        this.checked = false;
+        this.$vxm.chat.changeChannel(this.activeTab === 1 ? '👤' : '⚙️');
       }
       this.$vxm.chat.changeTab1(this.activeTab);
     }
@@ -81,11 +86,36 @@
 <style scoped>
 .checkbox {
   width:fit-content;
+  position: relative;
+  vertical-align: middle;
   margin:5px;
-  vertical-align:middle;
+  background: none;
+}
+.slideout-container {
+  width:fit-content;
+  background-color:black;
+  color:white;
+  height:100%;
+  position:absolute;
+  top:0px;
+  left:0px;
+  z-index: 2;
+}
+.slideoutContainerHidden {
+  height:0px;
+}
+.tall {
+  height:100%
 }
-.big {
-  width: Calc(100% - 23px);
+#current-tab {
+  position:absolute;
+  right:25px;
+  padding-top:1px;
+  font-size:16px;
+  top:0px;
+  width:calc(100% - 48px);
   float:right;
+  text-align: left;
+  z-index: 0;
 }
 </style>
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 73aaf046..821909f9 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -37,6 +37,7 @@
     color: #fff;
     background-color: rgba(255, 255, 255, 0.07);
     text-transform: capitalize;
+    height:30px;;
   }
 
   /* Change background color of buttons on hover */
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index c9fd9fa5..b05f4a8f 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -6,6 +6,7 @@
         :key="name"
         :selected="activeTab === index"
         :name="name.substr(1)"
+        :description="channelDescriptions[name]"
         @input="activeTab = index"
       />
     </div>
@@ -28,13 +29,20 @@
   export default class SlideoutChats extends Vue {
     activeTab = 0;
 
+    channelDescriptions = {
+    '#general': 'General chat',
+    '#test': 'Testing chat 1',
+    '#test2': 'Testing chat 2',
+    };
+
     get messageTabs() {
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
 
     @Watch('activeTab')
     tabChanged() {
-      (this.$parent as Slideout).checked = true;
+      (this.$parent as Slideout).checked = false;
+      this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
       this.$vxm.chat.changeTab2(this.activeTab);
     }
   }
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index a53c95b9..cc76115f 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -3,7 +3,9 @@
     :class="{active: selected}"
     @click="$emit('input')"
   >
-    {{ name }}
+    <p class='channel-name'>{{ name }}</p><br>
+    <p class='channel-description'>{{ description }}</p>
+    <div class='selected-indicator' v-show="selected" />
     <slot />
   </Button>
 </template>
@@ -17,6 +19,9 @@
     @Prop()
     name!: string;
 
+    @Prop()
+    description!: string;
+
     @Prop({ required: true })
     selected!: string;
   }
@@ -38,6 +43,8 @@
     background-color: rgba(255, 255, 255, 0.07);
     text-transform: capitalize;
     display:block;
+    width:100%;
+    height:min-content;
   }
 
   /* Change background color of buttons on hover */
@@ -47,5 +54,14 @@
 
   button.active {
     background-color: rgba(255, 255, 255, 0.2);
+    border-left: solid blue 10px;
+  }
+
+  .channel-name {
+    font-size: 20px;
+  }
+
+  .channel-description {
+    font-size: 12px;
   }
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 0bf5d887..b709330d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -76,6 +76,10 @@ export default class ChatModule extends VuexModule {
 
   tab2: Number = 0;
 
+  minimized: boolean = false;
+
+  chatChannel : string = 'General';
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -88,6 +92,16 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @mutation
+  changeChannel(to:string) {
+    this.chatChannel = to;
+  }
+
+  @mutation
+  toggleMinimized(to:boolean) {
+    this.minimized = to;
+  }
+
   @mutation
   changeTab1(to:Number) {
     this.tab1 = to;

From 61dfb67d99b5199ee229b7aa172001e7110b345f Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Mon, 4 May 2020 17:30:45 -0500
Subject: [PATCH 020/223] Further cleanup

---
 src/app/App.vue                               | 21 ++++++++-----------
 src/app/components/Slideout/Slideout.vue      | 16 ++++++++++----
 .../components/Slideout/SlideoutButton.vue    |  2 +-
 src/app/components/TabButton.vue              |  3 +--
 4 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 0a061280..7d13e350 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -19,7 +19,7 @@
         <ReportDialog ref="reportDialog"/>
       </div>
     </transition>
-    <MinimizationTriangle v-model="minimization" />
+    <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
   </div>
 </template>
 
@@ -80,10 +80,6 @@
       return this.activeTab === 0;
     }
 
-    get userCount() {
-      return Object.keys(this.$vxm.chat.connectedUsers).length;
-    }
-
     get minimized() {
       return this.minimization;
     }
@@ -119,7 +115,7 @@
 <style lang="scss" scoped>
   #eterna-chat {
     min-width: 0;
-    font-family: "Helvetica Neue", "Open Sans", Arial, Gulim;
+    font-family: "Open Sans", "Open Sans", Arial, Gulim;
     font-size: 14px;
     font-weight: 300;
   }
@@ -149,16 +145,17 @@
 
   .chat-content {
     border: rgba(255, 255, 255, 0.2) solid 2px;
-    height: calc(100% - 29px); //Account for top bar and border
+    height: calc(100% - 34px); //Account for top bar and border
     position: absolute;
-    top:23px;
+    top:30px;
     left:0px;
     width:calc(100% - 4px); //Account for border
     color: #c0dce7;
   }
   .minimizationTriangle {
-  position:absolute;
-  top:0px;
-  right:0px;
-}
+    position:absolute;
+    top:0px;
+    margin-top:2.5px;
+    right:30px;
+  }
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 88c99fbe..0ca88651 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -72,11 +72,16 @@
         return this.$vxm.chat.chatChannel;
     }
 
+    get userCount() {
+      return Object.keys(this.$vxm.chat.connectedUsers).length;
+    }
+
     @Watch('activeTab')
     tabChanged() {
       if (this.activeTab !== 0) {
         this.checked = false;
-        this.$vxm.chat.changeChannel(this.activeTab === 1 ? '👤' : '⚙️');
+        const userString = `Users (${this.userCount})`;
+        this.$vxm.chat.changeChannel(this.activeTab === 1 ? userString : 'Settings');
       }
       this.$vxm.chat.changeTab1(this.activeTab);
     }
@@ -87,8 +92,10 @@
 .checkbox {
   width:fit-content;
   position: relative;
+  height:30px;
   vertical-align: middle;
-  margin:5px;
+  margin-left:5px;
+  margin-right:5px;
   background: none;
 }
 .slideout-container {
@@ -110,12 +117,13 @@
 #current-tab {
   position:absolute;
   right:25px;
-  padding-top:1px;
-  font-size:16px;
+  padding-top:0px;
+  font-size:20px;
   top:0px;
   width:calc(100% - 48px);
   float:right;
   text-align: left;
   z-index: 0;
+  height: 30px;
 }
 </style>
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 821909f9..2d7d7e83 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -37,7 +37,7 @@
     color: #fff;
     background-color: rgba(255, 255, 255, 0.07);
     text-transform: capitalize;
-    height:30px;;
+    height:30px;
   }
 
   /* Change background color of buttons on hover */
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index cc76115f..0ea5c26f 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -43,8 +43,7 @@
     background-color: rgba(255, 255, 255, 0.07);
     text-transform: capitalize;
     display:block;
-    width:100%;
-    height:min-content;
+    width: 100%;
   }
 
   /* Change background color of buttons on hover */

From 744c52ca3dd59353dd800c72b212c6ff1d7ff971 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Mon, 4 May 2020 22:19:31 -0500
Subject: [PATCH 021/223] Made it look better

---
 src/app/App.vue                               | 11 +++++++++-
 src/app/components/Panes/MessagePane.vue      | 20 +++++++++++++++++++
 src/app/components/ScalableInput.vue          | 12 +++--------
 src/app/components/Slideout/SlideoutChats.vue | 13 +++++++++---
 src/app/components/TabButton.vue              | 17 +++++++++++-----
 src/app/store/chat.vuex.ts                    |  4 ++--
 6 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 7d13e350..133aa064 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -20,6 +20,7 @@
       </div>
     </transition>
     <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
+    <a class="open-window" href="full_window_link_here">↗️</a>
   </div>
 </template>
 
@@ -156,6 +157,14 @@
     position:absolute;
     top:0px;
     margin-top:2.5px;
-    right:30px;
+    right:0px;
+  }
+  .open-window {
+    position:absolute;
+    top:0px;
+    margin-top:5.5px;
+    right:35px;
+    text-decoration: none;
+    vertical-align: middle;
   }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 330d0f0e..b1a0a668 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -16,6 +16,7 @@
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput && (!sizeSmall || !expansion)"
       />
+      <button id="send-button" v-on:click="sendMessage" v-show="showInput">▶️</button>
       <ConnectButton
         v-show="!showInput"
       />
@@ -80,6 +81,11 @@
       }
     }
 
+    sendMessage() {
+      this.$emit('postMessage', this.newMessage);
+      this.newMessage = '';
+    }
+
     @Watch('messages')
     onContentChanged() {
       this.$refs.pane.onContentChanged();
@@ -91,3 +97,17 @@
     }
   }
 </script>
+<style scoped>
+button {
+  position:absolute;
+  right:10px;
+  bottom:9px;
+  padding:0px;
+  width:15px;
+  height:15px;
+  background-color:white;
+  border: white 1px solid;
+  border-radius: 50%;
+  color:black;
+}
+</style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index f868ba69..05cb453f 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -66,15 +66,9 @@
     position: absolute;
     top: 0px;
     padding: 0;
-  }
-  .smaller {
-    width: calc(100% - 195px); //100% - border
-  }
-  .bigger {
-    width: calc(100% - 15px); //100% - border
-  }
-  .biggest {
-    width: calc(100% - 55px);
+    width:calc(100% - 2px);
+    background-color:navy;
+    border:gray 0.5px solid;
   }
 
   .scalable-input,
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index b05f4a8f..9811fecc 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -8,6 +8,7 @@
         :name="name.substr(1)"
         :description="channelDescriptions[name]"
         @input="activeTab = index"
+        v-on:click="update"
       />
     </div>
   </div>
@@ -27,12 +28,12 @@
     },
   })
   export default class SlideoutChats extends Vue {
-    activeTab = 0;
+    activeTab = 4;
 
     channelDescriptions = {
     '#general': 'General chat',
-    '#test': 'Testing chat 1',
-    '#test2': 'Testing chat 2',
+    '#off-topic': 'For off-topic conversations',
+    '#help': 'Help requests',
     };
 
     get messageTabs() {
@@ -45,5 +46,11 @@
       this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
       this.$vxm.chat.changeTab2(this.activeTab);
     }
+
+    update() {
+      (this.$parent as Slideout).checked = false;
+      this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
+      this.$vxm.chat.changeTab2(this.activeTab);
+    }
   }
 </script>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index 0ea5c26f..ed013f6d 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -1,17 +1,20 @@
 <template>
   <Button
-    :class="{active: selected}"
-    @click="$emit('input')"
+    :class="{active: isActive}"
+    @click="$emit('input');"
   >
     <p class='channel-name'>{{ name }}</p><br>
     <p class='channel-description'>{{ description }}</p>
-    <div class='selected-indicator' v-show="selected" />
     <slot />
   </Button>
 </template>
 
 <script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
+  import chat from '@/store/chat.vuex';
+  import SlideoutChats from './Slideout/SlideoutChats.vue';
 
 
   @Component
@@ -22,8 +25,12 @@
     @Prop()
     description!: string;
 
-    @Prop({ required: true })
+    @Prop()
     selected!: string;
+
+    get isActive() {
+      return this.$vxm.chat.chatChannel.includes(this.name);
+    }
   }
 </script>
 
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index b709330d..449ceb42 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -45,7 +45,7 @@ class ConnectionData {
   }
 }
 
-const channelNames = ['#general', '#test', '#test2'] as const;
+const channelNames = ['#general', '#off-topic', '#help'] as const;
 
 export default class ChatModule extends VuexModule {
   toBePosted: Message[] = [];
@@ -78,7 +78,7 @@ export default class ChatModule extends VuexModule {
 
   minimized: boolean = false;
 
-  chatChannel : string = 'General';
+  chatChannel : string = '#general';
 
   constructor() {
     super();

From 5126e5918903136894653d81dffc1f7692d0e709 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Mon, 4 May 2020 22:45:34 -0500
Subject: [PATCH 022/223] Added settings tab

---
 src/app/App.vue                           |   7 ++
 src/app/components/Panes/SettingsPane.vue | 109 ++++++++++++++++++++++
 src/app/store/chat.vuex.ts                |   7 ++
 3 files changed, 123 insertions(+)
 create mode 100644 src/app/components/Panes/SettingsPane.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 133aa064..1e8f5727 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -15,6 +15,7 @@
           @postMessage="postMessage($event, channel.name)"
         />
         <UserPane :visibility="userPaneSelected" v-show="userPaneSelected" />
+        <SettingsPane :visibility="settingsPaneSelected" v-show="settingsPaneSelected" />
         <ConnectingPopup/>
         <ReportDialog ref="reportDialog"/>
       </div>
@@ -33,6 +34,7 @@
   import ReportDialog from '@/components/ReportDialog.vue';
   import MessagePane from '@/components/Panes/MessagePane.vue';
   import UserPane from '@/components/Panes/UserPane.vue';
+  import SettingsPane from '@/components/Panes/SettingsPane.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
 
   @Component({
@@ -42,6 +44,7 @@
       ConnectingPopup,
       MessagePane,
       UserPane,
+      SettingsPane,
       MinimizationTriangle,
     },
   })
@@ -81,6 +84,10 @@
       return this.activeTab === 0;
     }
 
+    get settingsPaneSelected() {
+      return this.activeTab === 2;
+    }
+
     get minimized() {
       return this.minimization;
     }
diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Panes/SettingsPane.vue
new file mode 100644
index 00000000..e86bd1db
--- /dev/null
+++ b/src/app/components/Panes/SettingsPane.vue
@@ -0,0 +1,109 @@
+<template>
+  <Pane ref="pane" :visibility="visibility">
+    <h1>Text Size</h1>
+    <input v-model="message" type=number min=10 max=22 value=24>
+    <span id='font-size-p'>{{text}} Default is 14</span>
+    <h1>Ignored Users</h1>
+    <ul>
+      <li v-for="user in ignoredUsers" :key="user.Username">
+        {{ user }}
+        <button class='unignore-user' v-on:click="unign(user)">Unignore</button>
+      </li>
+      <li v-show="!anyIgnoredUsers">You have not ignored any users</li>
+      <button class='unignore-user' v-on:click="unign('*')" v-show="anyIgnoredUsers" >
+        Unignore All</button>
+    </ul>
+    <template v-slot:footer>
+      <ConnectButton
+        v-if="!connectionData.firstConnection &&
+        !connectionData.connected"
+        class="connect-button"
+      />
+    </template>
+  </Pane>
+</template>
+
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import Pane from './Pane.vue';
+  import Username from '@/components/Messages/Username.vue';
+  import ConnectButton from '@/components/Connection/ConnectButton.vue';
+  @Component({
+    components: {
+      Username,
+      Pane,
+      ConnectButton,
+    },
+  })
+  export default class SettingsPane extends Vue {
+    @Prop({ required: true })
+    visibility!: boolean;
+
+    $refs!: {
+      pane: Pane;
+    };
+
+    @Prop({ required: true })
+    message:string = '14';
+
+    get text() {
+      if (this.message.toString()) {
+        return '';
+      }
+      return '';
+    }
+
+    get connectedUsers() {
+      return this.$vxm.chat.connectedUsers;
+    }
+
+    get connectionData() {
+      return this.$vxm.chat.connectionData;
+    }
+
+    get ignoredUsers() {
+      return this.$vxm.chat.ignoredUsers;
+    }
+
+    get anyIgnoredUsers() {
+      return Boolean(this.ignoredUsers.length > 0);
+    }
+
+    @Watch('connectedUsers')
+    onContentChanged() {
+      this.$refs.pane.onContentChanged();
+    }
+
+    @Watch('connectionData.connected')
+    updateFooterHeight() {
+      this.$nextTick(this.$refs.pane.updateFooterHeight);
+    }
+
+    @Watch('message')
+    updateFontSize() {
+      this.$vxm.chat.changeFontSize(parseInt(this.message, 10));
+    }
+
+    unign(user:string) {
+      this.$vxm.chat.unignoreUser(user);
+    }
+  }
+</script>
+<style scoped>
+#font-size-p {
+  vertical-align: mid;
+  margin-left:2px;
+}
+h1 {
+  margin:2px;
+}
+input {
+  margin:2px;
+}
+.unignore-user {
+  padding:2px;
+  padding-bottom:3px;
+}
+</style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 449ceb42..e0899110 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -80,6 +80,8 @@ export default class ChatModule extends VuexModule {
 
   chatChannel : string = '#general';
 
+  fontSize: Number = 18;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -92,6 +94,11 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @mutation
+  changeFontSize(to:Number) {
+    this.fontSize = to;
+  }
+
   @mutation
   changeChannel(to:string) {
     this.chatChannel = to;

From e6adc860a402579b162126d73a1a84493ff7786a Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 00:24:00 -0500
Subject: [PATCH 023/223] Animations!

---
 src/app/App.vue                          | 17 ++++++
 src/app/components/Slideout/Slideout.vue | 76 +++++++++++-------------
 2 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 1e8f5727..b72db155 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -20,6 +20,7 @@
         <ReportDialog ref="reportDialog"/>
       </div>
     </transition>
+    <div id="current-tab">{{currentTab}}</div>
     <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
     <a class="open-window" href="full_window_link_here">↗️</a>
   </div>
@@ -64,6 +65,10 @@
       return this.$vxm.chat.tab1;
     }
 
+    get currentTab() {
+        return this.$vxm.chat.chatChannel;
+    }
+
     get activeTab2() {
       return this.$vxm.chat.tab2;
     }
@@ -174,4 +179,16 @@
     text-decoration: none;
     vertical-align: middle;
   }
+  #current-tab {
+  position:absolute;
+  right:25px;
+  padding-top:0px;
+  font-size:20px;
+  top:0px;
+  width:calc(100% - 48px);
+  float:right;
+  text-align: left;
+  z-index: 0;
+  height: 30px;
+}
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 0ca88651..8d00e053 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -3,30 +3,29 @@
   style="position:relative; width:151px"
   :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
-    <div class="slideout-container" :class="{ slideoutContainerHidden: !checked }">
+      <div class="slideout-container" :class="{ slideoutContainerHidden: !checked }">
       <input type="checkbox" class="checkbox" v-model="checked" v-show="true">
-      <span v-if="checked" id="slideout-content">
-      <SlideoutButton
-        :selected="chatSelected"
-        :name="`#`"
-        @input="activeTab = 0"
-      />
-      <SlideoutButton
-        :selected="userSelected"
-        :name="`👤`"
-        @input="activeTab = 1"
-      />
-      <SlideoutButton
-        :selected="settingsSelected"
-        :name="`⚙️`"
-        @input="activeTab = 2"
-      />
-      <SlideoutChats
-        v-if="chatSelected"
-      />
-      </span>
-    </div>
-    <div id="current-tab">{{currentTab}}</div>
+        <span :class="{slideoutContent: !checked }" >
+          <SlideoutButton
+            :selected="chatSelected"
+            :name="`#`"
+            @input="activeTab = 0"
+          />
+          <SlideoutButton
+            :selected="userSelected"
+            :name="`👤`"
+            @input="activeTab = 1"
+          />
+          <SlideoutButton
+            :selected="settingsSelected"
+            :name="`⚙️`"
+            @input="activeTab = 2"
+          />
+          <SlideoutChats
+           v-if="chatSelected"
+          />
+        </span>
+      </div>
   </div>
 </template>
 
@@ -68,10 +67,6 @@
         return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
 
-    get currentTab() {
-        return this.$vxm.chat.chatChannel;
-    }
-
     get userCount() {
       return Object.keys(this.$vxm.chat.connectedUsers).length;
     }
@@ -110,20 +105,21 @@
 }
 .slideoutContainerHidden {
   height:0px;
+  animation: slideBack 0.25s;
 }
-.tall {
-  height:100%
+.slideoutContent {
+  visibility: hidden;
 }
-#current-tab {
-  position:absolute;
-  right:25px;
-  padding-top:0px;
-  font-size:20px;
-  top:0px;
-  width:calc(100% - 48px);
-  float:right;
-  text-align: left;
-  z-index: 0;
-  height: 30px;
+@keyframes slide {
+  from {left: -151px;}
+  to {left:0px;}
+}
+@keyframes slideBack {
+  to {height:100%; width:0px;}
+  from {height:100%;width:151px;}
+}
+.tall {
+  height:100%;
+  animation: slide 0.25s;
 }
 </style>

From bfef8ef21cfc598aa34c42bc2daec5f8c69d8a9a Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 11:59:03 -0500
Subject: [PATCH 024/223] Icons!

---
 src/app/App.vue                               |  16 ++---
 src/app/assets/chat-icon-green.png            | Bin 0 -> 699 bytes
 src/app/assets/chat-icon-white.png            | Bin 0 -> 506 bytes
 src/app/assets/hamburger.png                  | Bin 0 -> 190 bytes
 src/app/assets/minimization-triangle.png      | Bin 162 -> 640 bytes
 src/app/assets/open-window.png                | Bin 0 -> 918 bytes
 src/app/assets/selected-rectangle.png         | Bin 0 -> 380 bytes
 src/app/assets/send-button.png                | Bin 0 -> 1159 bytes
 src/app/assets/settings-icon-green.png        | Bin 0 -> 649 bytes
 src/app/assets/settings-icon-white.png        | Bin 0 -> 491 bytes
 src/app/assets/user-icon-green.png            | Bin 0 -> 826 bytes
 src/app/assets/user-icon-white.png            | Bin 0 -> 629 bytes
 src/app/components/HamburgerMenuButton.vue    |  26 ++++++++
 src/app/components/MinimizationTriangle.vue   |  16 ++---
 src/app/components/OpenWindowButton.vue       |  29 +++++++++
 src/app/components/Panes/MessagePane.vue      |  30 +++++----
 src/app/components/SendButton.vue             |  32 ++++++++++
 src/app/components/Slideout/Slideout.vue      |  32 +++++-----
 src/app/components/SlideoutButtonChat.vue     |  57 ++++++++++++++++++
 src/app/components/SlideoutButtonSettings.vue |  57 ++++++++++++++++++
 src/app/components/SlideoutButtonUsers.vue    |  56 +++++++++++++++++
 src/app/store/chat.vuex.ts                    |   7 +++
 22 files changed, 312 insertions(+), 46 deletions(-)
 create mode 100644 src/app/assets/chat-icon-green.png
 create mode 100644 src/app/assets/chat-icon-white.png
 create mode 100644 src/app/assets/hamburger.png
 create mode 100644 src/app/assets/open-window.png
 create mode 100644 src/app/assets/selected-rectangle.png
 create mode 100644 src/app/assets/send-button.png
 create mode 100644 src/app/assets/settings-icon-green.png
 create mode 100644 src/app/assets/settings-icon-white.png
 create mode 100644 src/app/assets/user-icon-green.png
 create mode 100644 src/app/assets/user-icon-white.png
 create mode 100644 src/app/components/HamburgerMenuButton.vue
 create mode 100644 src/app/components/OpenWindowButton.vue
 create mode 100644 src/app/components/SendButton.vue
 create mode 100644 src/app/components/SlideoutButtonChat.vue
 create mode 100644 src/app/components/SlideoutButtonSettings.vue
 create mode 100644 src/app/components/SlideoutButtonUsers.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index b72db155..a0e3076a 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -22,7 +22,7 @@
     </transition>
     <div id="current-tab">{{currentTab}}</div>
     <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
-    <a class="open-window" href="full_window_link_here">↗️</a>
+    <OpenWindowButton />
   </div>
 </template>
 
@@ -37,6 +37,7 @@
   import UserPane from '@/components/Panes/UserPane.vue';
   import SettingsPane from '@/components/Panes/SettingsPane.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
+  import OpenWindowButton from '@/components/OpenWindowButton.vue';
 
   @Component({
     components: {
@@ -47,6 +48,7 @@
       UserPane,
       SettingsPane,
       MinimizationTriangle,
+      OpenWindowButton,
     },
   })
   export default class App extends Vue {
@@ -133,12 +135,6 @@
     font-weight: 300;
   }
 
-  .minimization-triangle {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-  }
-
   .tabs {
     position: relative;
     height: 25px;
@@ -174,10 +170,8 @@
   .open-window {
     position:absolute;
     top:0px;
-    margin-top:5.5px;
-    right:35px;
-    text-decoration: none;
-    vertical-align: middle;
+    margin-top:2.5px;
+    right:24px;
   }
   #current-tab {
   position:absolute;
diff --git a/src/app/assets/chat-icon-green.png b/src/app/assets/chat-icon-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..31fff0d1de2e9c09f42ee542539ae820ef25f258
GIT binary patch
literal 699
zcmeAS@N?(olHy`uVBq!ia0vp^{6H+r!3HEtPng{TQjEnx?oJHr&dIz4ax79KJkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?4L1x#=e{sqi%wk$}}?w;*Mpb|q*7sn6_!MDNtvqKyO
z=H2|>_kxu(LvX{V?Fp%wN8FMQ?JX|~=U~5fD=JelB1`#}H_LxU=dKw~=BjIC=HxIr
z28h(hB<r|L&}MpeukZeweYJP2gCinSyXMZ!|2BK(+`Fo`CjU2Qytg)F^=zFD9~RDe
zyZGvppQlgXJ?5kGOl{(c^?z@NU)Nv9KUKVc@?@Qv3?HowC0`tuGEdPvuwTjLKGVg=
z$vMHs$EU0)aQSkw)zz=cSAMSEwEbGMWBf9GJlZlg#=j|+c*EcNe#+_q#+<;`7uh$J
zCa*sev+@mFTjLqGL(gM`mZ=Gze^3)2@ubtB<;A*V4YsV?GI{sMXQp_sd)u+Y@yvEN
zYlep!8>;oH1sm=%UNf9FjiJ&g=wE~Ix#C0oKHEGh8nS{lY<nd+mc75#ws+}IH{r`Q
z`E^C}d)a!vgr$_JzTKCVep2==1M9ETnPo1Xj#|vK1?<+k@IE{AZ&t^-75!NU!>@C0
zuX-u-^c@eE%YtiH1r|1DrL0Qs{PL=xC->+))te#)ofCsN*+pcg7V^j*RS5ZZ)H>|m
zwT^X~g3@^jmfW9vJ9HMja-8$1(O--I;#uqT#j9SOI&dp;*TWM^-=|-G_qJ?(<-9d}
zuJs<4l8@iL<y+)ig{h4X_3n5(MV04X`?b8wYX58d*MA+jcByQSJ0t6Md$LqQ^4;25
z9~3`0idlD8DzL^*N|pHiz59fp+|T0&-dI2U#K=1DvZ`eJ_x+sVQ%pC%Ke{fqK3Mhe
eywC52e=zfH-LpRX;0aGqBJy<gb6Mw<&;$Uh9WLDf

literal 0
HcmV?d00001

diff --git a/src/app/assets/chat-icon-white.png b/src/app/assets/chat-icon-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..0385a7e4d2c5a3af8a7592fe1ff3ee2ecf9a5696
GIT binary patch
literal 506
zcmeAS@N?(olHy`uVBq!ia0vp^{6H+r!3HEtPng{TQjEnx?oJHr&dIz4ax79KJkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?4L1x#=e{sqi%wk$}}?w;*MpyC2g7sn6_!MBt4dO14^
zw7xfOauqn}wt?qg!_?N+D6LyRB(6;ht88?rX|!qn=$ezm;>vl%Y0Czq8ySzj&Yo>N
z`>uqb_G})Rb7yYOym@oJ&g@(E_Z<R7bT6>|Hsji}_=n8AzlAnp&kr!nkX`koL_(~;
z@S%^)iS-B9l`mP__5P@8Wzd?nnlBFXe~R7REvzp3Tko#T`L&HRvrnFT`p~jJ_DtE#
zX{qjyxT<9B*-u~Ew&d=mAB(OC%zB`IZJX2nZ{juf=ehRDKIi;$fGL8B^~1(oUDIvr
zn*4h=q_6%_di1VI^%s?O>mT2cJo{&+SzBU<s8fk8!}>$B%M6Rw>c3UKbc*-Q8BqiK
zEb%>sXN!c-wqzHqnIv2x9MdEg!Qz`x#+G;H;mkLmf|A#0_ukkb`X~0N+g6j`zgvI$
ze@g$H|I=?_{nZP~HU3t&^;cyby?=RjsYI#3swXW;N&Z`weoUJ0lIq;mU3)}sw~hAc
jt(`|bmuG(X&0E7bd+UFnb6cX{fa1W@)z4*}Q$iB}MRwB+

literal 0
HcmV?d00001

diff --git a/src/app/assets/hamburger.png b/src/app/assets/hamburger.png
new file mode 100644
index 0000000000000000000000000000000000000000..85a475933eb3930946fa7f95fe26ffd4a5cb59cc
GIT binary patch
literal 190
zcmeAS@N?(olHy`uVBq!ia0vp^q9Dw{1|(OCFP#RY7>k44ofy`glX(f`SfoaHruq6Z
zXaU(A42<oW3@jieKr98s3=B*QnBXF!3z!jXkfioy0}~)+;_2cTVj-CPho6Nfgv}?!
zj6dfNhxrsSN2``IDKfsxL;7`RJ<(XTyC_4_VwT@Z`FIo0<qS`r^9X!9uu&Lfj;E`i
J%Q~loCIAAkDAoV~

literal 0
HcmV?d00001

diff --git a/src/app/assets/minimization-triangle.png b/src/app/assets/minimization-triangle.png
index abbc67f1e514d800e468d39010a0b912a46293c7..f732970c6ed3b6d696a05376b0c9f84c06259558 100644
GIT binary patch
literal 640
zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ev!3HGXOtkk0QjEnx?oJHr&dIz4ax79KJkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?4L1x#=eg$2xTwg^b__WQVgpyF?yE{-7{yj#Np{g@ni
za;G2R7ZS1eo$`XSMR><QP5Ub5hiq>=-TW2enEp<d?l2E9`4~LKMOZlKcUb$}#@K|w
zXX&@kZF%o|duHUK`-M5b-tKy7zGh!n{#~2!*U$fYo0l;>y<xL$#><`=df~224~{I3
zZq44IV!;-YFkO_>)H-nK+nfIus62=%JG8}mt(URDq6>!qI&{>^X3aX0e}X~%Zi=qS
z`cyZMEB1Pg;_+-Mt%v=#-2HsUa*FcjP0}B(%TC;0+;G1>K=X~;?B*E^Nm`xjCRu!V
ztnbgXTl>@QYjak|`LN4;+rg<=6ZBH#jDouJ%<RWcbdN83a6mGh!Rw93;dN2p7pgn6
z$#2@%K1Fp~i6(c9%e|IstIRK6YkqBcj-iLaA@`C|V~Ns^*EX8xnbNgdCO`P_o#TK(
zvrDO5rxNe&$)?B8G0wYsCYVKs^Xat)<1Z-%YMgUabnkj@3Y%TaXK}5{_JNhN+h@++
zFC`z^?A2}Gb~@h{etA5?R%J!%+dId+&o<0$F}^f?UgyGtyK)NdEc^U^!c55xE}M)L
zRrr1OWMA*yZ@KPMD~G~|iIrT;VtXT=^~gNvFxkwacg1(h<*ScxmgEK(`4#-o_hIOM
zEN;}?!V$0Yxk)dENnk_rCr<H&t6#6UwBd8*K5s#W2Gx(^A8cHLum3xK|FXIGzMor9
SR-FN*ECx?kKbLh*2~7Zw-U#gg

literal 162
zcmeAS@N?(olHy`uVBq!ia0vp^JV4CG!3HG1zpHNqagw~<T^Rm@;DWu&Cj&(|3p^r=
z85sBugD~Uq{1qucLG}_)Usv`=T-+Rjsxs=DX+R-;PZ!4!iOb0e2blgjGn!et<#Yv#
z7#JBny3%ktM8&tKMPzYyl8T$*CN;MtQJ`T0HqyVIEPY)8)XL!L>gTe~DWM4f-K#Ce

diff --git a/src/app/assets/open-window.png b/src/app/assets/open-window.png
new file mode 100644
index 0000000000000000000000000000000000000000..cbe0ccbe4e380b422579efb56e23ab5c0f7d4f59
GIT binary patch
literal 918
zcmV;H18Mw;P)<h;3K|Lk000e1NJLTq001Ze001Wl1^@s6eW(h!00001b5ch_0Itp)
z=>Px#IAvH#W=%~1DgXcg2mk?xX#fNO00031000^Q000000-yo_1ONa40RR91D4+uX
z1ONa40RR91CjbBd0NZ}kM*si=3`s;mR9Fe^m|boYF%W=fmMWsCKzKwdfg_|R=<?R&
zh2DVe3CP|cJ;AmoAe?~klJ<>of`${&v`BrVjZmp7b%z-*Azo)U`{xEB#ZnvFW6yj$
z{u>)%38@vFA0X1Zyru}~l*rjT_FoL0yq(InYX##@5je4ffUg`3KT7`I0TG}shKeUt
z{nnB?wuA3YaPGF5zm)RpaN}_3Kf4s&A=G+Ex9mlHnq(`hE(W+0oV)DWfYmmE_}hW9
z`X|aC;bfNuTOvI6pP%jo7p(7g*YqZ9&jc3=mD<6X$AkZVTCV&{&ep)+9Hr@L1!p}(
zc$+4d`a!3G%7eDyi0JC5BHR?*af2UqK;mJwlZfC8fg?kln9@8aAC=T$Z5<{aFYJ0u
zNbr>xh_`5nV(oJl(%^Wivpwvx8nw0P>UfAT_O<dQzu<{GU4?q%D)~il*YMbV2tS*c
zuqYj#sM~SFPH)+8i|oy9)Cl2a9JpF3%X5q1#PS?qHJo_wG&osEGOSr}qAj*j$JJLW
zEr9!Q<TpH1`weW2)@gF}_ry^P=bk)R6i#5pn+OkFB0L15eetl=TlZiYI02FLXItw;
zrRcxaIamfx4hj{V=u}$X8ekbX2~Ie$_y!oBv=7E7>QvL<Bx?n*44fF}jk!BJ#jqKj
zY9g7X%78LFNl^)JC5fwbW}4BAL&6Nlq-|wDf;(3?D)~HcW}mdO1;AQgk3?+333O#Z
ziI@p$95K^ApY?l5n{b+U^3+?|2L+Oib@Lc3+NQDxiyAE2eg#<6V`lr62ThL@Ew4OS
z)MIA*|G<MpW1X51ja!~BwU?Jr%hW~ya~C#;0Ec=*jwoF96rxvJ&P&`EJyOLLbI3o8
z*KouWy=c*AQ@}CF2+--z*H^3Iz@pA^pf`&HBYkqy<8$0KwX?$j*kgT;9^aV4WtKz2
z*Yf0R+Ej~#Z%`gbBK$t`j}k{gNpM1=0OiW3u6YEXmWin1NQN8ujb55vHN?75=A_IK
s{&P7df2qrC<z>F{9PjfZRpvX;Z!O9{mR2z<iU0rr07*qoM6N<$f^mYF-v9sr

literal 0
HcmV?d00001

diff --git a/src/app/assets/selected-rectangle.png b/src/app/assets/selected-rectangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..4df5ffaead536b3a7dd65ffc9ea7cb64382e6d9f
GIT binary patch
literal 380
zcmeAS@N?(olHy`uVBq!ia0vp^B0%iU!3HGRC#Q!1DaPU;cPEB*=VV?2ITooAo@u_m
z3|c@o2Loe!CIbsd2@p#GF#`kB0w%bK$O2|K+Z`nNZdv*rAoa=9#W5s;^X-g{yoVeF
zSl;hrT)~j!qN<?ds4n2hDF7rDRx}6+7=|QhS-kV?i2FQ^<9ui8`!}~{eF*(COKzUA
z@y!*dB3yp|jQyLsw*39QyK&PFZ}$7Pey6?6YxYx1`1L2PSaaIr_>t|CX7pNJJGCQU
zHT3P&&OFb1UU#*8jw@IzDalMyJa<@;T*jmSd}rVI#;-m5dD{GfSBtkb%*p@Bx%`d5
z8rB-^*zo4b9j5<woA2Mg^{)JM|IYn))$(f@M30)*p0=sq3JL{JS3j3^P6<r_GvkG3

literal 0
HcmV?d00001

diff --git a/src/app/assets/send-button.png b/src/app/assets/send-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb82092647e3f39e8345b0ff0fa47a196dc7ef79
GIT binary patch
literal 1159
zcmV;21bF+2P)<h;3K|Lk000e1NJLTq001li001lq1^@s69)wx}00001b5ch_0Itp)
z=>Px#IAvH#W=%~1DgXcg2mk?xX#fNO00031000^Q000000-yo_1ONa40RR91ET97b
z1ONa40RR91EC2ui0N<v?nE(I-{YgYYR9FesnN3#PFc8NzPFmQN8x-Cv**0z1V@^<R
zK(cAcE;k@O0dy7UhHwLVf|@<F?l$Rrq$g-t(k52t??icuQEbZ}d9PkXmNXjuJRXgu
z35gt6{qlaR`Z(DaB<ey6cdkm6O0yT<knmW>pKMfb{MOD`b=sC>I{@-~=fihWh$as{
z%ragI*(X8Qx5v9*Y{y#xH!gl22^n;GvTfUmO!5pq66AF6KD@dz^_$vK0oQx?+f|xe
zvI5tnq<}VWBC9RGy)#PE<s=Eb?G2h0ntW$DH%T@}zl%9ASCWocVD{Bhhv<@D!&Z`_
zy#1I1bM0LWPvUf~bcx3KfI+DlH@K`mEXup%TFa#0XyL~B&odiXju;Ptlr0Wh2Yhe6
z@}ppwd#^X_M%z(;Vqy3ZUX4lE)CSn8BVGS}%~$=6-k?uJN2;E+gb}{AYkhtE5-_3x
zoSz$0`K$?6DK7$=^^d2r`bLi)OD=)XRRk=c@7lGdl=4bFK$a3L^KiNtz5t$w6nD{+
zctd^N4NT%iK(k&~4|fY-B5`7xbY+_iQn^hL&^lWP%%9vt+s`c)mHy-_AB;QlLW2#A
zm}6#PDVwO+UWg{^f)+s#0@Hkp_}dm%mp6qUy<fl28a={@u~FS|Du1S~t}x5}IxLNd
z0ak|sS<eC)9kUi_W`z&C(aE#c%Z8SGvY9Qqtb~SfWkQqW9Ubo`_6_sqYAOqwE&RH0
z3#%u!fu3$Y>!@*YB^F+3z;P4j=_?J`CN@_d|DL9K2#&=M4sW_|(g@qg*udJHY<SW6
zg<H5RSQv~K-59_gDn(pn!h$cfuyn}(A7JN<o-=)3@$v$fZCUVP!A&-+zJtUZS2CY;
z*8v+ERLX0x&K4a}KWw!8SsN^K@g_cG<d4VfYV?L9K8n0l^`sI9Oq?W=<j`*ux=i{w
zvGRixE8(tk5!Se|YZ6}BM$UL;pVpBV7OJEaXG-P5!f4=Zi<fpY#C|{K1j<3&$+-wv
zeAsT=yRHIWSQrfxQEg&1s?N9)8<9#tU+bR-;j4<u76A(uFzLFNfRSNg-|XlDardjB
zi-5(vV9~QaXj^g#G~fyoaTa+BxQ8I>I3!0wAUdq{aHc88uM{8I6}nLkMqmhKJ>5np
z$Wo7sKua#6D-V+&f<EbOYq@93#)Zq37FKXblyH`Z^TpzYYAd6}0)x*+)2q?B5`i%w
z{8L6u`e{R6bdtn6hb}~e=mIm1O9iY3hSnC;wfQ2dv8Iwg2*2>bO0udx)(Th+3=?z6
zbrEqA(au%EIL{jy><u^ycuHs5G83>;j=UVwN5~!_$$`AV6Sv{ljgta4-`IO&JDcaP
Z+kXp`?*O_~O#A=<002ovPDHLkV1iJ5{V@Ol

literal 0
HcmV?d00001

diff --git a/src/app/assets/settings-icon-green.png b/src/app/assets/settings-icon-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..804a74321b2e6ecdd298497feb78a0707d04712b
GIT binary patch
literal 649
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VV{wqX6T`Z5GB1G~i_{3uG+$o^
zEg+kNfw4W4fd!-lh^2s-fq`iO6I?`O0W*RPlAI`d={QjFe@_?35DUSnA$J2GJMc`C
zkt^CWfv<ply3iSJXB*}vEdd9gTAc_j*vYqm$tdyIGu;c0FAkIx)b0Gxw12YM#j3X!
z25)-Om-^qz-}=k&GJE!%c$Ebisd^0arf1HZac`@;qD7o)^XVKDzKsECkAyGt|EzK<
zJ@BkT)bM`1?K1l>53DOPSn|@PR?T;joBcj@o}ZI^*wGUnd{^8=SmZd&Rv1qG_Oa{5
zv&1QPS6y}evG3<Jlap7De6))+mlJ#@H6=>+q4O+#tq04Q;^Q@T9zXf$&CB)kzFLZ0
zvh0YP)uQp$(&y^TI)yu?Z(T$)wppCN*0y<Dn~MCTGls_gXBBp8?cCq_Htq0I?qxwc
z?k^M0;9d8OLEQG3cKq{|EZg=Ua@oE%ymHqxhJD)$6@NXQf5+_G3awiaYY*FRJhttU
z<DqTI&g@5dZ3C2Km;X)j*wm@sIA470%G9K&^R7D|YpRIe-kSYx>z8{g6N6U1{G{|d
zdDm<Km+y~^O?*CYlSwtc-0!ns`#*;#!t1*aEcjWfw)m)urL)ddnXWZ;b%qx@uDRZ@
zt@?Lnxzi27bsBdUf7k3UpRi)tG7Bg3DkDL*tl-yc=N_FT$gA#FyXfEkBj<i?ySTq~
z(hkmvH$!5z%#Dw~?F(`*u{@<-ws2DG<tIfFa+hjmHTOLY|9_)&YWW(sZNc2R+`9$N
dw4QAL_J8Y-m$R4_wMK!Ggr}>Y%Q~loCIA~G7q<Wa

literal 0
HcmV?d00001

diff --git a/src/app/assets/settings-icon-white.png b/src/app/assets/settings-icon-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..531987d935068596022086e64e22a32ef20372bc
GIT binary patch
literal 491
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VV{wqX6T`Z5GB1G~i_{3uG+$o^
zEg+kNfw4W4fd!-lh^2s-fq`iO6I?`O0W*RPlAI`d={QhvqNj^vh=t(P$$tZz9R!Yc
zPX51?#mYc6fJxSaePK&Pqv{Mkor4jLK<K!E>5uIpqw434C(rG<y?*<9J$Jp+VL1|Q
zLKW6)FC4!%SKVM{^Qr5Le%$+1zf<@jv;OUDf%`p?J2EaaNo?Qdo8}*^qAbw&?P%4$
zmV>iawJ*A`I^oH;CFv^j{Z}+N74JT0p|~+tA&s-wOh|Mm+tZfhE8(|p?D-Ss@`vF|
zseHpte#ebBbE>o-_<xB0vw5{`koDy92iD4wo1~mBNp#eAX38}EPc*sfy3@b()RMKF
zYV6CBHeQ+X!1{-ez$+Ku@Q{G-<+`)pMO(@4kT@b!QYJb1esui2D8@(Z1s~>E&O5Pk
zx?-dF2ezQU*CUTGby&sjF<!cQt=Za(#$mCxv(*0mef1&h_}k@sN=><?n-;596n=Wp
zGVQ{I6-UZeJ=A`%wtvUzq&|!HZ9y-ucK9EQ{&ahX;NH7^|0X}yh~F9?EYE&WV0LUj
PD9}A!{an^LB{Ts5^9#l?

literal 0
HcmV?d00001

diff --git a/src/app/assets/user-icon-green.png b/src/app/assets/user-icon-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc319aa1b6e781350671340f1d24243b47c2107e
GIT binary patch
literal 826
zcmV-A1I7G_P)<h;3K|Lk000e1NJLTq001KZ000yS1^@s62d0Ef00001b5ch_0Itp)
z=>Px#IAvH#W=%~1DgXcg2mk?xX#fNO00031000^Q000000-yo_1ONa40RR91BcKBS
z1ONa40RR916aWAK0El%33jhEDut`KgR7efQR#9%+KoFf-sD$~VH*jyj4Pt((8Y#s$
zC^<ps36kD`o*?7|g+v0>ALtFp4LCyh!BmQOI%8*@HLSr!l{z2n?Aw{y@$Q>h5YCin
z5wvvd-5_892yGx(5$fSXIKMwLB!@XeBoT_6i!_Nt|Is9zULC@xk%MHS*(YCv`jWZo
zwd+eiPs1T1UYCW}09TLUbY!omC%J2015pc*R<5{(WTKzlHobs+aVrnR$B*8&Gwv*(
z4c41=$>^?;7bg$lG%{;d<0|7IBPH~skcfcH2j<4Ds3H<L(~kVg*IQC0u9)Y^@bv_|
zvkwkol3wKSyX`vHD=1m==(|i2p=aZHGB)VY-y2M>i->-ixohNW8oO`@mdBN~JehGg
zU-Ct591cK8y!Ixlj)PKLfTzdqY-p^<AE&EwTU;7D8S`XhqCqy<7uu*sT)<@mtYN?>
z@MK#P(7kGG0~-@v6ZH2nNl<|<#4S{lI0$z*sXjL`pQkJ3#kY1PiH$AN3V7~AW4AhL
z$HdnO4XVbq_xLY*ell_*lr}pG@~V;+542QB-<eZulc6-Q<ahG|NuB{}aaFVlvinyx
zm}ERL)&Q6DZcl0IOPe@|?Zw~BiKfY1&boaj&)u85t<eU7+LDavqMXFwpdZ;TKx^j7
zS0?gU;G^*gp0N&{l!vb;vM9u|CJ4GCm3HDivOEfE{!SfzLL?z?`$6$LRA96nimPRk
zl{|Al_U^J{wk=NTeK{4el0qmeaXIB=*Nhb3Q=torqY-XyBhk|?iWnLEZ$<@lBlc;t
zJkkuA3PGXI>~B)@;-z5vg~@lepl{wYLvm**ZY6c$gmaNW!*W)+3eJ}#N&Q!^e=A01
zk?MvMWd{EOXDawr;?%1crEgK9TUBgbHk{1bh3{j309Ax7RAmF0#sB~S07*qoM6N<$
Ef~xppGynhq

literal 0
HcmV?d00001

diff --git a/src/app/assets/user-icon-white.png b/src/app/assets/user-icon-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b06b92b1bb87016f4f1c3c426296e4344e835ef
GIT binary patch
literal 629
zcmeAS@N?(olHy`uVBq!ia0vp^%0Mi_!3HGRm$mo+DaPU;cPEB*=VV?2ITooAo@u_m
z3|c@o2Loe!CIbsd2@p#GF#`kB0w%bK@&aZ!TLdK8QOe2<RQ%f0#WBQ#_h?wR?_mQG
zp8$3a>57&dhnWp|4l^1A1%w6EGG;VvXq?%QGa<*pOrv~l?%o~$rf_slURPJQue`EM
zdbR6Dq4vWInc@%VPk2zV|59G9q}(aD9AOUe8|zE;{yN>zdh&*E`6iwFOtZvxy4&kN
z<6rUm$exD$R?BP)KE?Qz>5ja0%|bSeQWhtUdfc%#WXjO{G}Tl`O8MDZQK`orXO?cg
zTI^C*qJ8?n&!F<7{7kcS*;v~OlqXH@*sNHS-4Wtaq5gTD<V>C;*Uj4BSGoPkd_Hkw
z|C7I4K7SRju=@N-<nEfuN$<=S$}X8!=p>yl<;we_nK!JFeZ#_o!sUW*&s{F`ihufB
z@0mc3<E*R=tmmaBvPOg}WEbs{n$=zV)cBvO-rL}v)<^cdvCx_z;lR7^QM+}b&7nC=
z_cusA=`6US@R3pXwakL&(U%*pXiiw*)_nfiQU?x)I}L_A-itMH)iC|-7F@~dcBV}I
z`x^VbH=ew#i@Y(%f1BHJw+iY1Y}MC<G_r(Sb5<-`;otFV^3{uPY!`a#nl6*fOY`H9
zHk*9t;|j$U!Hdq^(lEQCx+V4<+qGjWHnwTI9X&h4YVL|~X`Oq=SRRGvolUwFGw<u4
z+ZPg5nr}EPXx6Tu9WwpK&T2JPv*R&KO=g<@^PFuo>k)hF)!Ww(+>KQNMZc%3pUXO@
GgeCy0r2f+Y

literal 0
HcmV?d00001

diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/HamburgerMenuButton.vue
new file mode 100644
index 00000000..d3d4fa0d
--- /dev/null
+++ b/src/app/components/HamburgerMenuButton.vue
@@ -0,0 +1,26 @@
+<template>
+  <span
+    class="hamburger"
+    @click="$emit('input', !value)"
+  />
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component
+  export default class HamburgerMenuButton extends Vue {
+    @Prop()
+    value!: boolean;
+  }
+</script>
+<style scoped>
+.hamburger {
+  background-image: url("../assets/hamburger.png");
+  background-repeat: no-repeat;
+  background-size: 60% 60%;
+  background-position: center;
+  display:inline-block;
+}
+</style>
diff --git a/src/app/components/MinimizationTriangle.vue b/src/app/components/MinimizationTriangle.vue
index 71c640aa..708e97d4 100644
--- a/src/app/components/MinimizationTriangle.vue
+++ b/src/app/components/MinimizationTriangle.vue
@@ -27,25 +27,25 @@
     background-position: center;
     height: 24px;
     width: 25px;
-    transform: rotate(180deg);
-    -webkit-transform: rotate(180deg);
+    transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
     animation-name: minimization-triangle-rotation-from;
     animation-duration: 0.2s;
   }
 
   @keyframes minimization-triangle-rotation-to {
-    from {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
-    to {transform: rotate(270deg); -webkit-transform: rotate(270deg);}
+    from {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
+    to {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
   }
 
   @keyframes minimization-triangle-rotation-from {
-    to {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
-    from {transform: rotate(270deg); -webkit-transform: rotate(270deg);}
+    to {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
+    from {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
   }
 
   .minimization-triangle.flipped {
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
+    transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
     animation-name: minimization-triangle-rotation-to;
     animation-duration: 0.2s;
   }
diff --git a/src/app/components/OpenWindowButton.vue b/src/app/components/OpenWindowButton.vue
new file mode 100644
index 00000000..e762bde7
--- /dev/null
+++ b/src/app/components/OpenWindowButton.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="open-window"
+    style="float: right;"
+  >
+    <a href="window-link"></a>
+  </div>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component
+  export default class OpenWindowButton extends Vue {
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  .open-window {
+    background-image: url("../assets/open-window.png");
+    background-repeat: no-repeat;
+    background-size: 60% 60%;
+    background-position: center;
+    height: 24px;
+    width: 25px;
+  }
+</style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index b1a0a668..7ffda9af 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -16,7 +16,7 @@
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput && (!sizeSmall || !expansion)"
       />
-      <button id="send-button" v-on:click="sendMessage" v-show="showInput">▶️</button>
+      <SendButton v-on:click="sendMessage" v-show="showInput" v-model="button" />
       <ConnectButton
         v-show="!showInput"
       />
@@ -37,6 +37,7 @@
   import BanStatus from '@/types/BanStatus';
   import Message from '@/types/message';
   import { Channel } from '@/store/chat.vuex';
+  import SendButton from '@/components/SendButton.vue';
 
   @Component({
     components: {
@@ -45,6 +46,7 @@
       Pane,
       ScalableInput,
       ConnectButton,
+      SendButton,
     },
   })
   export default class MessagesPane extends Vue {
@@ -73,6 +75,10 @@
       pane: Pane;
     };
 
+    get messageSending() {
+      return this.$vxm.chat.messageToBeSent;
+    }
+
     onKeyPress(e: KeyboardEvent) {
       if (e.code === 'Enter' || e.code === 'NumpadEnter') {
         this.$emit('postMessage', this.newMessage);
@@ -81,9 +87,13 @@
       }
     }
 
+    @Watch('messageSending')
     sendMessage() {
-      this.$emit('postMessage', this.newMessage);
-      this.newMessage = '';
+      if (this.messageSending) {
+        this.$emit('postMessage', this.newMessage);
+        this.newMessage = '';
+        this.$vxm.chat.changeMessageToBeSent(false);
+      }
     }
 
     @Watch('messages')
@@ -98,16 +108,12 @@
   }
 </script>
 <style scoped>
-button {
+.send-button {
   position:absolute;
-  right:10px;
-  bottom:9px;
+  right:6px;
+  bottom:6px;
   padding:0px;
-  width:15px;
-  height:15px;
-  background-color:white;
-  border: white 1px solid;
-  border-radius: 50%;
-  color:black;
+  width:20px;
+  height:20px;
 }
 </style>
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
new file mode 100644
index 00000000..e7871b46
--- /dev/null
+++ b/src/app/components/SendButton.vue
@@ -0,0 +1,32 @@
+<template>
+  <button
+    class="send-button"
+    v-on:click="sendMSG"
+  >
+  </button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component
+  export default class SendButton extends Vue {
+    sendMSG() {
+      this.$vxm.chat.changeMessageToBeSent(true);
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .send-button {
+    background-color:rgba(0,0,0,0);
+    border:none;
+    background-image: url("../assets/send-button.png");
+    background-repeat: no-repeat;
+    background-size: 60% 60%;
+    background-position: center;
+    height: 30px;
+    width: 25px;
+  }
+</style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 8d00e053..7ed79ede 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -4,21 +4,18 @@
   :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
       <div class="slideout-container" :class="{ slideoutContainerHidden: !checked }">
-      <input type="checkbox" class="checkbox" v-model="checked" v-show="true">
-        <span :class="{slideoutContent: !checked }" >
-          <SlideoutButton
+        <HamburgerMenuButton v-model="checked" class="checkbox"/>
+        <span :class="{slideoutContent: !checked }" v-show="checked">
+          <SlideoutButtonChat
             :selected="chatSelected"
-            :name="`#`"
             @input="activeTab = 0"
           />
-          <SlideoutButton
+          <SlideoutButtonUsers
             :selected="userSelected"
-            :name="`👤`"
             @input="activeTab = 1"
           />
-          <SlideoutButton
+          <SlideoutButtonSettings
             :selected="settingsSelected"
-            :name="`⚙️`"
             @input="activeTab = 2"
           />
           <SlideoutChats
@@ -35,13 +32,21 @@
   } from 'vue-property-decorator';
   import SlideoutChats from '@/components/Slideout/SlideoutChats.vue';
   import SlideoutButton from '@/components/Slideout/SlideoutButton.vue';
+  import SlideoutButtonUsers from '@/components/SlideoutButtonUsers.vue';
+  import SlideoutButtonChat from '@/components/SlideoutButtonChat.vue';
+  import SlideoutButtonSettings from '@/components/SlideoutButtonSettings.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
+  import HamburgerMenuButton from '@/components/HamburgerMenuButton.vue';
 
   @Component({
     components: {
       SlideoutChats,
       SlideoutButton,
+      SlideoutButtonSettings,
+      SlideoutButtonChat,
+      SlideoutButtonUsers,
       MinimizationTriangle,
+      HamburgerMenuButton,
     },
   })
   export default class Slideout extends Vue {
@@ -85,13 +90,10 @@
 
 <style scoped>
 .checkbox {
-  width:fit-content;
+  width: 25px;
   position: relative;
   height:30px;
-  vertical-align: middle;
-  margin-left:5px;
-  margin-right:5px;
-  background: none;
+  vertical-align: top;
 }
 .slideout-container {
   width:fit-content;
@@ -115,8 +117,8 @@
   to {left:0px;}
 }
 @keyframes slideBack {
-  to {height:100%; width:0px;}
-  from {height:100%;width:151px;}
+  to {height:100%; width:0px}
+  from {height:100%;width:151px}
 }
 .tall {
   height:100%;
diff --git a/src/app/components/SlideoutButtonChat.vue b/src/app/components/SlideoutButtonChat.vue
new file mode 100644
index 00000000..b1e1d088
--- /dev/null
+++ b/src/app/components/SlideoutButtonChat.vue
@@ -0,0 +1,57 @@
+<template>
+  <Button
+    :class="{active: selected}"
+    @click="$emit('input')"
+  >
+    <slot />
+  </Button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import SlideoutButton from './Slideout/SlideoutButton.vue';
+
+
+  @Component
+  export default class SlideoutButtonChat extends SlideoutButton {
+    @Prop()
+    name:string = 'Chat';
+
+    @Prop({ required: true })
+    selected!: string;
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  /* Style the buttons that are used to open the tab content */
+  button {
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 0.4em 1.25em;
+    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.07);
+    text-transform: capitalize;
+    height:30px;
+    background-image: url("../assets/chat-icon-white.png");
+    background-repeat: no-repeat;
+    background-size: 40% 60%;
+    background-position: center;
+    width: 30px;
+  }
+
+  /* Change background color of buttons on hover */
+  button:hover:not(.active) {
+    background-color: rgba(255, 255, 255, 0.13);
+  }
+
+  button.active {
+    background-color: rgba(255, 255, 255, 0.2);
+    background-image: url("../assets/chat-icon-green.png");
+  }
+</style>
diff --git a/src/app/components/SlideoutButtonSettings.vue b/src/app/components/SlideoutButtonSettings.vue
new file mode 100644
index 00000000..87442009
--- /dev/null
+++ b/src/app/components/SlideoutButtonSettings.vue
@@ -0,0 +1,57 @@
+<template>
+  <Button
+    :class="{active: selected}"
+    @click="$emit('input')"
+  >
+    <slot />
+  </Button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import SlideoutButton from './Slideout/SlideoutButton.vue';
+
+
+  @Component
+  export default class SlideoutButtonSettings extends SlideoutButton {
+    @Prop()
+    name:string = 'Settings';
+
+    @Prop({ required: true })
+    selected!: string;
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  /* Style the buttons that are used to open the tab content */
+  button {
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 0.4em 1.25em;
+    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.07);
+    text-transform: capitalize;
+    height:30px;
+    background-image: url("../assets/settings-icon-white.png");
+    background-repeat: no-repeat;
+    background-size: 60% 60%;
+    background-position: center;
+    width: 30px;
+  }
+
+  /* Change background color of buttons on hover */
+  button:hover:not(.active) {
+    background-color: rgba(255, 255, 255, 0.13);
+  }
+
+  button.active {
+    background-color: rgba(255, 255, 255, 0.2);
+    background-image: url("../assets/settings-icon-green.png");
+  }
+</style>
diff --git a/src/app/components/SlideoutButtonUsers.vue b/src/app/components/SlideoutButtonUsers.vue
new file mode 100644
index 00000000..ce5d1d9e
--- /dev/null
+++ b/src/app/components/SlideoutButtonUsers.vue
@@ -0,0 +1,56 @@
+<template>
+  <Button
+    :class="{active: selected}"
+    @click="$emit('input')"
+  >
+    <slot />
+  </Button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import SlideoutButton from './Slideout/SlideoutButton.vue';
+
+
+  @Component
+  export default class SlideoutButtonUsers extends SlideoutButton {
+    @Prop()
+    name:string = 'Users';
+
+    @Prop({ required: true })
+    selected!: string;
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  /* Style the buttons that are used to open the tab content */
+  button {
+    border: none;
+    outline: none;
+    cursor: pointer;
+    transition: 0.3s;
+    padding: 0.4em 1.25em;
+    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.07);
+    text-transform: capitalize;
+    height:30px;
+    background-image: url("../assets/user-icon-white.png");
+    background-repeat: no-repeat;
+    background-size: 60% 40%;
+    background-position: center;
+    width: 30px;
+  }
+
+  /* Change background color of buttons on hover */
+  button:hover:not(.active) {
+    background-color: rgba(255, 255, 255, 0.13);
+  }
+
+  button.active {
+    background-image: url("../assets/user-icon-green.png");
+  }
+</style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index e0899110..ccc7394d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -82,6 +82,8 @@ export default class ChatModule extends VuexModule {
 
   fontSize: Number = 18;
 
+  messageToBeSent = false;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -94,6 +96,11 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @mutation
+  changeMessageToBeSent(to:boolean) {
+    this.messageToBeSent = to;
+  }
+
   @mutation
   changeFontSize(to:Number) {
     this.fontSize = to;

From 67e9bf9c8d24fc90823e3a9310109484eb157964 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 12:03:38 -0500
Subject: [PATCH 025/223] Fixed bug

---
 src/app/components/OpenWindowButton.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/OpenWindowButton.vue b/src/app/components/OpenWindowButton.vue
index e762bde7..f4ccb6dd 100644
--- a/src/app/components/OpenWindowButton.vue
+++ b/src/app/components/OpenWindowButton.vue
@@ -1,10 +1,10 @@
 <template>
-  <div
+  <a
     class="open-window"
     style="float: right;"
+    href="link-to-full-window"
   >
-    <a href="window-link"></a>
-  </div>
+  </a>
 </template>
 
 <script lang="ts">

From 34548815ff986bcb4bc9cc746550541402c76bd9 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 12:57:02 -0500
Subject: [PATCH 026/223] Further minor changes

---
 src/app/App.vue                               |  3 ++-
 src/app/components/Panes/Pane.vue             |  4 ++-
 src/app/components/Panes/UserPane.vue         |  6 ++++-
 src/app/components/ScalableInput.vue          |  2 ++
 src/app/components/Slideout/SlideoutChats.vue | 12 ++++++++-
 src/app/components/SlideoutButtonChat.vue     |  8 +-----
 src/app/components/SlideoutButtonSettings.vue | 10 ++-----
 src/app/components/SlideoutButtonUsers.vue    |  7 +----
 src/app/components/Splitter.vue               | 27 +++++++++++++++++++
 src/app/components/TabButton.vue              | 14 +++++-----
 10 files changed, 62 insertions(+), 31 deletions(-)
 create mode 100644 src/app/components/Splitter.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index a0e3076a..f614aba5 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -175,7 +175,8 @@
   }
   #current-tab {
   position:absolute;
-  right:25px;
+  right:20px;
+  font-family:'Open Sans','Century Gothic','Didact Gothic','Arial',sans-serif;
   padding-top:0px;
   font-size:20px;
   top:0px;
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index a5f06460..e855320d 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -1,5 +1,7 @@
 <template>
-  <div style="height: 100%">
+  <div
+  style="height: 100%; font-family:'Open Sans','Century Gothic','Didact Gothic,'Arial',sans-serif"
+  >
     <div
       ref="scrollDiv"
       style="padding: 5.6px 7px;"
diff --git a/src/app/components/Panes/UserPane.vue b/src/app/components/Panes/UserPane.vue
index c7cf2c2a..ca37a2c9 100644
--- a/src/app/components/Panes/UserPane.vue
+++ b/src/app/components/Panes/UserPane.vue
@@ -1,5 +1,9 @@
 <template>
-  <Pane ref="pane" :visibility="visibility">
+  <Pane
+    ref="pane"
+    :visibility="visibility"
+    style= "font-family:'Open Sans','Century Gothic','Didact Gothic,'Arial',sans-serif"
+    >
     <ul>
       <li v-for="user in connectedUsers" :key="user.username">
         <Username :user="user" />
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 05cb453f..93af4422 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -66,9 +66,11 @@
     position: absolute;
     top: 0px;
     padding: 0;
+    color:white;
     width:calc(100% - 2px);
     background-color:navy;
     border:gray 0.5px solid;
+    outline: none;
   }
 
   .scalable-input,
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 9811fecc..f2267bf3 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -9,7 +9,9 @@
         :description="channelDescriptions[name]"
         @input="activeTab = index"
         v-on:click="update"
-      />
+      >
+        <Splitter />
+      </TabButton>
     </div>
   </div>
 </template>
@@ -20,11 +22,13 @@
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import TabButton from '@/components/TabButton.vue';
   import Slideout from './Slideout.vue';
+  import Splitter from '../Splitter.vue';
 
   @Component({
     components: {
       MinimizationTriangle,
       TabButton,
+      Splitter,
     },
   })
   export default class SlideoutChats extends Vue {
@@ -52,5 +56,11 @@
       this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
       this.$vxm.chat.changeTab2(this.activeTab);
     }
+
+    isSelected(of:Number) {
+      return of === this.activeTab;
+    }
   }
 </script>
+<style scoped>
+</style>
diff --git a/src/app/components/SlideoutButtonChat.vue b/src/app/components/SlideoutButtonChat.vue
index b1e1d088..24b201df 100644
--- a/src/app/components/SlideoutButtonChat.vue
+++ b/src/app/components/SlideoutButtonChat.vue
@@ -31,12 +31,7 @@
     cursor: pointer;
     transition: 0.3s;
     padding: 0.4em 1.25em;
-    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
-    font-size: 12px;
-    font-weight: bold;
-    color: #fff;
-    background-color: rgba(255, 255, 255, 0.07);
-    text-transform: capitalize;
+    background-color: black;
     height:30px;
     background-image: url("../assets/chat-icon-white.png");
     background-repeat: no-repeat;
@@ -51,7 +46,6 @@
   }
 
   button.active {
-    background-color: rgba(255, 255, 255, 0.2);
     background-image: url("../assets/chat-icon-green.png");
   }
 </style>
diff --git a/src/app/components/SlideoutButtonSettings.vue b/src/app/components/SlideoutButtonSettings.vue
index 87442009..f94e3c09 100644
--- a/src/app/components/SlideoutButtonSettings.vue
+++ b/src/app/components/SlideoutButtonSettings.vue
@@ -31,16 +31,11 @@
     cursor: pointer;
     transition: 0.3s;
     padding: 0.4em 1.25em;
-    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
-    font-size: 12px;
-    font-weight: bold;
-    color: #fff;
-    background-color: rgba(255, 255, 255, 0.07);
-    text-transform: capitalize;
+    background-color: black;
     height:30px;
     background-image: url("../assets/settings-icon-white.png");
     background-repeat: no-repeat;
-    background-size: 60% 60%;
+    background-size: 50% 50%;
     background-position: center;
     width: 30px;
   }
@@ -51,7 +46,6 @@
   }
 
   button.active {
-    background-color: rgba(255, 255, 255, 0.2);
     background-image: url("../assets/settings-icon-green.png");
   }
 </style>
diff --git a/src/app/components/SlideoutButtonUsers.vue b/src/app/components/SlideoutButtonUsers.vue
index ce5d1d9e..f360c349 100644
--- a/src/app/components/SlideoutButtonUsers.vue
+++ b/src/app/components/SlideoutButtonUsers.vue
@@ -31,12 +31,7 @@
     cursor: pointer;
     transition: 0.3s;
     padding: 0.4em 1.25em;
-    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
-    font-size: 12px;
-    font-weight: bold;
-    color: #fff;
-    background-color: rgba(255, 255, 255, 0.07);
-    text-transform: capitalize;
+    background-color: black;
     height:30px;
     background-image: url("../assets/user-icon-white.png");
     background-repeat: no-repeat;
diff --git a/src/app/components/Splitter.vue b/src/app/components/Splitter.vue
new file mode 100644
index 00000000..3d52e2d0
--- /dev/null
+++ b/src/app/components/Splitter.vue
@@ -0,0 +1,27 @@
+<template>
+  <div id="splitter"></div>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component
+  export default class Splitter extends Vue {
+  }
+</script>
+
+<style lang="scss" scoped>
+  #splitter {
+    height:1px;
+    width:90%;
+    padding:0px;
+    padding-right:5px;
+    padding-left:5px;
+    background-color:gray;
+    position:relative;
+    margin:0px;
+    margin-bottom:10px;
+    top:15px;
+  }
+</style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index ed013f6d..97d4ba4f 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -3,7 +3,7 @@
     :class="{active: isActive}"
     @click="$emit('input');"
   >
-    <p class='channel-name'>{{ name }}</p><br>
+    <p class='channel-name'>#{{ name }}</p><br>
     <p class='channel-description'>{{ description }}</p>
     <slot />
   </Button>
@@ -43,12 +43,12 @@
     cursor: pointer;
     transition: 0.3s;
     padding: 0.4em 1.25em;
-    font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
+    font-family: "Open Sans","Century Gothic", "Didact Gothic", Arial, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.07);
-    text-transform: capitalize;
+    background-color: black;
+    text-transform: none;
     display:block;
     width: 100%;
   }
@@ -59,11 +59,13 @@
   }
 
   button.active {
-    background-color: rgba(255, 255, 255, 0.2);
-    border-left: solid blue 10px;
+    border-left: solid #4A90E2 10px;
+    border-top-left-radius: 5%;
+    border-bottom-left-radius: 5%;
   }
 
   .channel-name {
+    margin-top:15px;
     font-size: 20px;
   }
 

From 45b79e5843880ffe0f979e74ca5de5c37c2dfcbe Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 13:15:25 -0500
Subject: [PATCH 027/223] Fixed settings

---
 src/app/App.vue                           | 2 +-
 src/app/components/Panes/MessagePane.vue  | 5 +++++
 src/app/components/Panes/SettingsPane.vue | 9 ++++++++-
 src/app/store/chat.vuex.ts                | 2 +-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index f614aba5..07c0b764 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -15,7 +15,7 @@
           @postMessage="postMessage($event, channel.name)"
         />
         <UserPane :visibility="userPaneSelected" v-show="userPaneSelected" />
-        <SettingsPane :visibility="settingsPaneSelected" v-show="settingsPaneSelected" />
+        <SettingsPane :visibility="settingsPaneSelected" v-if="settingsPaneSelected" />
         <ConnectingPopup/>
         <ReportDialog ref="reportDialog"/>
       </div>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 7ffda9af..3878c44f 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -5,6 +5,7 @@
         v-for="(message, i) in data.postedMessages"
         :key="i"
         :message="message"
+        :style="{fontSize:fontSize}"
       />
       <ConnectingMessage />
     </ul>
@@ -71,6 +72,10 @@
           || this.connectionData.firstConnection;
     }
 
+    get fontSize() {
+      return this.$vxm.chat.fontSize.toString().concat('px');
+    }
+
     $refs!: {
       pane: Pane;
     };
diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Panes/SettingsPane.vue
index e86bd1db..af870621 100644
--- a/src/app/components/Panes/SettingsPane.vue
+++ b/src/app/components/Panes/SettingsPane.vue
@@ -2,7 +2,7 @@
   <Pane ref="pane" :visibility="visibility">
     <h1>Text Size</h1>
     <input v-model="message" type=number min=10 max=22 value=24>
-    <span id='font-size-p'>{{text}} Default is 14</span>
+    <p id='font-size-p'>{{text}} Default is 14</p>
     <h1>Ignored Users</h1>
     <ul>
       <li v-for="user in ignoredUsers" :key="user.Username">
@@ -81,6 +81,11 @@
       this.$nextTick(this.$refs.pane.updateFooterHeight);
     }
 
+    @Watch('ignoredUsers')
+    usersChanged() {
+      this.$refs.pane.onContentChanged();
+    }
+
     @Watch('message')
     updateFontSize() {
       this.$vxm.chat.changeFontSize(parseInt(this.message, 10));
@@ -88,6 +93,7 @@
 
     unign(user:string) {
       this.$vxm.chat.unignoreUser(user);
+      this.$refs.pane.onContentChanged();
     }
   }
 </script>
@@ -105,5 +111,6 @@ input {
 .unignore-user {
   padding:2px;
   padding-bottom:3px;
+  background-color:white;
 }
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index ccc7394d..35805c46 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -80,7 +80,7 @@ export default class ChatModule extends VuexModule {
 
   chatChannel : string = '#general';
 
-  fontSize: Number = 18;
+  fontSize: Number = 14;
 
   messageToBeSent = false;
 

From 25a74d617dfd671963e0eea069e90ae093e296dd Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 20:41:42 -0500
Subject: [PATCH 028/223] Design update

---
 src/app/App.vue                               | 26 ++++++++++---------
 src/app/components/HamburgerMenuButton.vue    |  2 ++
 src/app/components/MinimizationTriangle.vue   |  4 +--
 src/app/components/OpenWindowButton.vue       |  4 +--
 src/app/components/Panes/MessagePane.vue      |  9 ++++---
 src/app/components/ScalableInput.vue          | 11 +++++---
 src/app/components/Slideout/Slideout.vue      |  8 +++---
 src/app/components/Slideout/SlideoutChats.vue |  2 +-
 src/app/components/SlideoutButtonChat.vue     |  4 +--
 src/app/components/SlideoutButtonSettings.vue |  4 +--
 src/app/components/SlideoutButtonUsers.vue    |  4 +--
 src/app/components/Splitter.vue               |  2 +-
 src/app/components/TabButton.vue              |  5 +++-
 13 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 07c0b764..2c651d9a 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -144,42 +144,44 @@
 
   .fade-enter-active,
   .fade-leave-active {
-    transition: opacity 200ms;
+    transition: 200ms;
   }
 
   .fade-enter, .fade-leave-to
   {
-    opacity: 0;
+    transform: translateY(-50%) scaleY(0);
   }
 
   .chat-content {
-    border: rgba(255, 255, 255, 0.2) solid 2px;
-    height: calc(100% - 34px); //Account for top bar and border
+    border: solid #05224b 2px;
+    border-radius:5%;
+    height: calc(100% - 54px); //Account for top bar and border
     position: absolute;
-    top:30px;
-    left:0px;
-    width:calc(100% - 4px); //Account for border
+    top:40px;
+    left:8px;
+    width:calc(100% - 20px); //Account for border
     color: #c0dce7;
+    background-color:#05224b;
   }
   .minimizationTriangle {
     position:absolute;
     top:0px;
     margin-top:2.5px;
-    right:0px;
+    right:5px;
   }
   .open-window {
     position:absolute;
     top:0px;
     margin-top:2.5px;
-    right:24px;
+    right:39px;
   }
   #current-tab {
   position:absolute;
-  right:20px;
+  right:5px;
   font-family:'Open Sans','Century Gothic','Didact Gothic','Arial',sans-serif;
   padding-top:0px;
-  font-size:20px;
-  top:0px;
+  font-size:24px;
+  top:1px;
   width:calc(100% - 48px);
   float:right;
   text-align: left;
diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/HamburgerMenuButton.vue
index d3d4fa0d..47fe5902 100644
--- a/src/app/components/HamburgerMenuButton.vue
+++ b/src/app/components/HamburgerMenuButton.vue
@@ -22,5 +22,7 @@
   background-size: 60% 60%;
   background-position: center;
   display:inline-block;
+  width:40px;
+  height:40px;
 }
 </style>
diff --git a/src/app/components/MinimizationTriangle.vue b/src/app/components/MinimizationTriangle.vue
index 708e97d4..90bb8229 100644
--- a/src/app/components/MinimizationTriangle.vue
+++ b/src/app/components/MinimizationTriangle.vue
@@ -25,8 +25,8 @@
     background-repeat: no-repeat;
     background-size: 60% 40%;
     background-position: center;
-    height: 24px;
-    width: 25px;
+    height: 34px;
+    width: 35px;
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     animation-name: minimization-triangle-rotation-from;
diff --git a/src/app/components/OpenWindowButton.vue b/src/app/components/OpenWindowButton.vue
index f4ccb6dd..f58375ea 100644
--- a/src/app/components/OpenWindowButton.vue
+++ b/src/app/components/OpenWindowButton.vue
@@ -23,7 +23,7 @@
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
-    height: 24px;
-    width: 25px;
+    height: 34px;
+    width: 35px;
   }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 3878c44f..9d36af67 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -12,6 +12,7 @@
     <template v-slot:footer>
       <ScalableInput
         v-model="newMessage"
+        id="input"
         @keypress.native="onKeyPress"
         :disabled="!connectionData.connected || isBanned"
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
@@ -115,10 +116,10 @@
 <style scoped>
 .send-button {
   position:absolute;
-  right:6px;
-  bottom:6px;
+  right:4px;
+  bottom:4px;
   padding:0px;
-  width:20px;
-  height:20px;
+  width:29px;
+  height:29px;
 }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 93af4422..b6b9991d 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -68,14 +68,19 @@
     padding: 0;
     color:white;
     width:calc(100% - 2px);
-    background-color:navy;
-    border:gray 0.5px solid;
+    background-color:#05224b;
+    border:#343a40 1px solid;
+    border-radius:8px;
     outline: none;
   }
 
+  .scalable-input:focus {
+    border-color: #7b8a8b;
+  }
+
   .scalable-input,
   .scalable-input-hidden {
-    min-height: 19px;
+    min-height: 24px;
   }
 
   /* To determine input size */
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 7ed79ede..b0898cad 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-  style="position:relative; width:151px"
+  style="position:relative; width:75%"
   :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
       <div class="slideout-container" :class="{ slideoutContainerHidden: !checked }">
@@ -52,7 +52,7 @@
   export default class Slideout extends Vue {
     activeTab = 0;
 
-    checked = true;
+    checked = false;
 
     minimizedValue = false;
 
@@ -90,9 +90,7 @@
 
 <style scoped>
 .checkbox {
-  width: 25px;
   position: relative;
-  height:30px;
   vertical-align: top;
 }
 .slideout-container {
@@ -118,7 +116,7 @@
 }
 @keyframes slideBack {
   to {height:100%; width:0px}
-  from {height:100%;width:151px}
+  from {height:100%;width:75%}
 }
 .tall {
   height:100%;
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index f2267bf3..c8984f22 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -36,7 +36,7 @@
 
     channelDescriptions = {
     '#general': 'General chat',
-    '#off-topic': 'For off-topic conversations',
+    '#off-topic': 'Off-topic conversations',
     '#help': 'Help requests',
     };
 
diff --git a/src/app/components/SlideoutButtonChat.vue b/src/app/components/SlideoutButtonChat.vue
index 24b201df..3185a542 100644
--- a/src/app/components/SlideoutButtonChat.vue
+++ b/src/app/components/SlideoutButtonChat.vue
@@ -32,12 +32,12 @@
     transition: 0.3s;
     padding: 0.4em 1.25em;
     background-color: black;
-    height:30px;
+    height:40px;
     background-image: url("../assets/chat-icon-white.png");
     background-repeat: no-repeat;
     background-size: 40% 60%;
     background-position: center;
-    width: 30px;
+    width: 40px;
   }
 
   /* Change background color of buttons on hover */
diff --git a/src/app/components/SlideoutButtonSettings.vue b/src/app/components/SlideoutButtonSettings.vue
index f94e3c09..c4072569 100644
--- a/src/app/components/SlideoutButtonSettings.vue
+++ b/src/app/components/SlideoutButtonSettings.vue
@@ -32,12 +32,12 @@
     transition: 0.3s;
     padding: 0.4em 1.25em;
     background-color: black;
-    height:30px;
+    height:40px;
     background-image: url("../assets/settings-icon-white.png");
     background-repeat: no-repeat;
     background-size: 50% 50%;
     background-position: center;
-    width: 30px;
+    width: 40px;
   }
 
   /* Change background color of buttons on hover */
diff --git a/src/app/components/SlideoutButtonUsers.vue b/src/app/components/SlideoutButtonUsers.vue
index f360c349..ac2cd05e 100644
--- a/src/app/components/SlideoutButtonUsers.vue
+++ b/src/app/components/SlideoutButtonUsers.vue
@@ -32,12 +32,12 @@
     transition: 0.3s;
     padding: 0.4em 1.25em;
     background-color: black;
-    height:30px;
+    height:40px;
     background-image: url("../assets/user-icon-white.png");
     background-repeat: no-repeat;
     background-size: 60% 40%;
     background-position: center;
-    width: 30px;
+    width: 40px;
   }
 
   /* Change background color of buttons on hover */
diff --git a/src/app/components/Splitter.vue b/src/app/components/Splitter.vue
index 3d52e2d0..e56d4000 100644
--- a/src/app/components/Splitter.vue
+++ b/src/app/components/Splitter.vue
@@ -21,7 +21,7 @@
     background-color:gray;
     position:relative;
     margin:0px;
-    margin-bottom:10px;
+    margin-bottom:0px;
     top:15px;
   }
 </style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index 97d4ba4f..6a57dd07 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -3,7 +3,7 @@
     :class="{active: isActive}"
     @click="$emit('input');"
   >
-    <p class='channel-name'>#{{ name }}</p><br>
+    <p class='channel-name'>#{{ name }}</p>
     <p class='channel-description'>{{ description }}</p>
     <slot />
   </Button>
@@ -67,9 +67,12 @@
   .channel-name {
     margin-top:15px;
     font-size: 20px;
+    text-align: justify;
+    text-justify:auto;
   }
 
   .channel-description {
     font-size: 12px;
+    text-align:justify;
   }
 </style>

From fc8e6094c6d9112a96b62a621d4fc4b67643efb2 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 20:43:36 -0500
Subject: [PATCH 029/223] Hamburger updates

---
 src/app/assets/hamburger.png               | Bin 190 -> 182 bytes
 src/app/components/HamburgerMenuButton.vue |   2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/assets/hamburger.png b/src/app/assets/hamburger.png
index 85a475933eb3930946fa7f95fe26ffd4a5cb59cc..0a3c8f155541c512a8bb60c53dc0e7b5e26a67d4 100644
GIT binary patch
delta 98
zcmdnTxQ%gwIF}Fy8v_Hw7NMzn6BRvtg@9~^nV;XN04W_$7sn6_!Q?;uEIc7>J|SlO
zId?7?P7&KD@04cLr?yg2B-;7V%Eg{tzb>*cT<+lEGW4k~1L^m4^>bP0l+XkKJ?9;D

delta 106
zcmdnSxQ}syIF~2~8v_HwO7W%BCMtS_iUQdT+LsMXfRu@+i(`m|VDcY+7M>6`pAa+t
zoI4!mQ^XvtTF#`%_%09W*PZo5W7Y1W3`vVwek<kUO+1$~JbBI|@a@1xVURhVu6{1-
HoD!M<62Ks&

diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/HamburgerMenuButton.vue
index 47fe5902..f8f7aa39 100644
--- a/src/app/components/HamburgerMenuButton.vue
+++ b/src/app/components/HamburgerMenuButton.vue
@@ -19,7 +19,7 @@
 .hamburger {
   background-image: url("../assets/hamburger.png");
   background-repeat: no-repeat;
-  background-size: 60% 60%;
+  background-size: 40% 40%;
   background-position: center;
   display:inline-block;
   width:40px;

From ed7c1effe98e4dca5e99da6e6256e90bbe39e6e5 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 5 May 2020 21:03:37 -0500
Subject: [PATCH 030/223] fixed border-radius

---
 src/app/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 2c651d9a..bc1d7b25 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -154,7 +154,7 @@
 
   .chat-content {
     border: solid #05224b 2px;
-    border-radius:5%;
+    border-radius:15px;
     height: calc(100% - 54px); //Account for top bar and border
     position: absolute;
     top:40px;

From 3d32701e51330c2059efc010b686d4c437528863 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 08:22:56 -0500
Subject: [PATCH 031/223] Minor fixes

---
 src/app/App.vue                               | 48 +++++---------
 src/app/components/Panes/MessagePane.vue      |  4 +-
 src/app/components/Panes/UserPane.vue         | 64 -------------------
 src/app/components/Slideout/Slideout.vue      | 13 ++--
 .../SlideoutSettings.vue}                     | 57 +++--------------
 src/app/components/Slideout/SlideoutUser.vue  | 46 +++++++++++++
 src/app/components/SlideoutButtonChat.vue     |  3 -
 src/app/components/SlideoutButtonSettings.vue |  3 -
 src/app/components/SlideoutButtonUsers.vue    |  3 -
 src/app/components/TabButton.vue              |  2 +-
 10 files changed, 82 insertions(+), 161 deletions(-)
 delete mode 100644 src/app/components/Panes/UserPane.vue
 rename src/app/components/{Panes/SettingsPane.vue => Slideout/SlideoutSettings.vue} (57%)
 create mode 100644 src/app/components/Slideout/SlideoutUser.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index bc1d7b25..2ce08f69 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="eterna-chat"
-    style="height:100%; overflow-y:hidden;"
+    style="height:100%; width:100%; overflow-y:hidden;"
   >
     <slideout style="z-index:1;"></slideout>
     <transition name="fade">
@@ -10,19 +10,18 @@
           v-for="(channel, index) in messageTabs"
           :key="channel.name"
           :data="channel"
-          v-show="index === activeTab2 && chatPaneSelected"
-          :visibility="index === activeTab2 && chatPaneSelected"
+          v-show="index === activeTab2"
+          :visibility="index === activeTab2"
           @postMessage="postMessage($event, channel.name)"
         />
-        <UserPane :visibility="userPaneSelected" v-show="userPaneSelected" />
-        <SettingsPane :visibility="settingsPaneSelected" v-if="settingsPaneSelected" />
         <ConnectingPopup/>
         <ReportDialog ref="reportDialog"/>
       </div>
     </transition>
-    <div id="current-tab">{{currentTab}}</div>
+    <div id="current-tab">{{currentTab}}
+    </div>
     <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
-    <OpenWindowButton />
+    <OpenWindowButton/>
   </div>
 </template>
 
@@ -34,8 +33,6 @@
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
   import MessagePane from '@/components/Panes/MessagePane.vue';
-  import UserPane from '@/components/Panes/UserPane.vue';
-  import SettingsPane from '@/components/Panes/SettingsPane.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
 
@@ -45,8 +42,6 @@
       ReportDialog,
       ConnectingPopup,
       MessagePane,
-      UserPane,
-      SettingsPane,
       MinimizationTriangle,
       OpenWindowButton,
     },
@@ -63,10 +58,6 @@
 
     minimization = false;
 
-    get activeTab() {
-      return this.$vxm.chat.tab1;
-    }
-
     get currentTab() {
         return this.$vxm.chat.chatChannel;
     }
@@ -83,18 +74,6 @@
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
 
-    get userPaneSelected() {
-      return this.activeTab === 1;
-    }
-
-    get chatPaneSelected() {
-      return this.activeTab === 0;
-    }
-
-    get settingsPaneSelected() {
-      return this.activeTab === 2;
-    }
-
     get minimized() {
       return this.minimization;
     }
@@ -129,10 +108,15 @@
 
 <style lang="scss" scoped>
   #eterna-chat {
-    min-width: 0;
+    width:100%;
+    height:100%;
     font-family: "Open Sans", "Open Sans", Arial, Gulim;
     font-size: 14px;
     font-weight: 300;
+    background-color:#05224b;
+    position:relative;
+    top:0px;
+    left:0px;
   }
 
   .tabs {
@@ -153,15 +137,15 @@
   }
 
   .chat-content {
-    border: solid #05224b 2px;
+    border: solid #043468 2px;
     border-radius:15px;
     height: calc(100% - 54px); //Account for top bar and border
-    position: absolute;
+    position: relative;
     top:40px;
     left:8px;
     width:calc(100% - 20px); //Account for border
     color: #c0dce7;
-    background-color:#05224b;
+    background-color:#043468;
   }
   .minimizationTriangle {
     position:absolute;
@@ -176,7 +160,7 @@
     right:39px;
   }
   #current-tab {
-  position:absolute;
+  position: absolute;
   right:5px;
   font-family:'Open Sans','Century Gothic','Didact Gothic','Arial',sans-serif;
   padding-top:0px;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 9d36af67..606171a4 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -16,9 +16,9 @@
         @keypress.native="onKeyPress"
         :disabled="!connectionData.connected || isBanned"
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
-        v-show="showInput && (!sizeSmall || !expansion)"
+        v-show="showInput"
       />
-      <SendButton v-on:click="sendMessage" v-show="showInput" v-model="button" />
+      <SendButton v-on:click="sendMessage" v-show="showInput"/>
       <ConnectButton
         v-show="!showInput"
       />
diff --git a/src/app/components/Panes/UserPane.vue b/src/app/components/Panes/UserPane.vue
deleted file mode 100644
index ca37a2c9..00000000
--- a/src/app/components/Panes/UserPane.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <Pane
-    ref="pane"
-    :visibility="visibility"
-    style= "font-family:'Open Sans','Century Gothic','Didact Gothic,'Arial',sans-serif"
-    >
-    <ul>
-      <li v-for="user in connectedUsers" :key="user.username">
-        <Username :user="user" />
-      </li>
-    </ul>
-    <template v-slot:footer>
-      <ConnectButton
-        v-if="!connectionData.firstConnection &&
-        !connectionData.connected"
-        class="connect-button"
-      />
-    </template>
-  </Pane>
-</template>
-
-<script lang="ts">
-  import {
-    Component, Watch, Prop, Vue,
-  } from 'vue-property-decorator';
-  import Pane from './Pane.vue';
-  import Username from '@/components/Messages/Username.vue';
-  import ConnectButton from '@/components/Connection/ConnectButton.vue';
-
-
-  @Component({
-    components: {
-      Username,
-      Pane,
-      ConnectButton,
-    },
-  })
-  export default class OnlinePane extends Vue {
-    @Prop({ required: true })
-    visibility!: boolean;
-
-    $refs!: {
-      pane: Pane;
-    };
-
-    get connectedUsers() {
-      return this.$vxm.chat.connectedUsers;
-    }
-
-    get connectionData() {
-      return this.$vxm.chat.connectionData;
-    }
-
-    @Watch('connectedUsers')
-    onContentChanged() {
-      this.$refs.pane.onContentChanged();
-    }
-
-    @Watch('connectionData.connected')
-    updateFooterHeight() {
-      this.$nextTick(this.$refs.pane.updateFooterHeight);
-    }
-  }
-</script>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index b0898cad..81ba7298 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -21,6 +21,8 @@
           <SlideoutChats
            v-if="chatSelected"
           />
+          <SlideoutUser v-if="userSelected"/>
+          <SlideoutSettings v-if="settingsSelected" message=14 />
         </span>
       </div>
   </div>
@@ -31,6 +33,8 @@
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
   import SlideoutChats from '@/components/Slideout/SlideoutChats.vue';
+  import SlideoutUser from '@/components/Slideout/SlideoutUser.vue';
+  import SlideoutSettings from '@/components/Slideout/SlideoutSettings.vue';
   import SlideoutButton from '@/components/Slideout/SlideoutButton.vue';
   import SlideoutButtonUsers from '@/components/SlideoutButtonUsers.vue';
   import SlideoutButtonChat from '@/components/SlideoutButtonChat.vue';
@@ -41,6 +45,8 @@
   @Component({
     components: {
       SlideoutChats,
+      SlideoutUser,
+      SlideoutSettings,
       SlideoutButton,
       SlideoutButtonSettings,
       SlideoutButtonChat,
@@ -78,11 +84,6 @@
 
     @Watch('activeTab')
     tabChanged() {
-      if (this.activeTab !== 0) {
-        this.checked = false;
-        const userString = `Users (${this.userCount})`;
-        this.$vxm.chat.changeChannel(this.activeTab === 1 ? userString : 'Settings');
-      }
       this.$vxm.chat.changeTab1(this.activeTab);
     }
   }
@@ -116,7 +117,7 @@
 }
 @keyframes slideBack {
   to {height:100%; width:0px}
-  from {height:100%;width:75%}
+  from {height:100%; width:160px}
 }
 .tall {
   height:100%;
diff --git a/src/app/components/Panes/SettingsPane.vue b/src/app/components/Slideout/SlideoutSettings.vue
similarity index 57%
rename from src/app/components/Panes/SettingsPane.vue
rename to src/app/components/Slideout/SlideoutSettings.vue
index af870621..2797b9e4 100644
--- a/src/app/components/Panes/SettingsPane.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,60 +1,36 @@
 <template>
-  <Pane ref="pane" :visibility="visibility">
-    <h1>Text Size</h1>
+  <div id="settings-wrapper">
+    <h2>Text Size</h2>
     <input v-model="message" type=number min=10 max=22 value=24>
-    <p id='font-size-p'>{{text}} Default is 14</p>
-    <h1>Ignored Users</h1>
+    <p id='font-size-p'>Default is 14</p>
+    <h2>Ignored Users</h2>
     <ul>
       <li v-for="user in ignoredUsers" :key="user.Username">
         {{ user }}
         <button class='unignore-user' v-on:click="unign(user)">Unignore</button>
       </li>
-      <li v-show="!anyIgnoredUsers">You have not ignored any users</li>
+      <li v-show="!anyIgnoredUsers">No users ignored</li>
       <button class='unignore-user' v-on:click="unign('*')" v-show="anyIgnoredUsers" >
         Unignore All</button>
     </ul>
-    <template v-slot:footer>
-      <ConnectButton
-        v-if="!connectionData.firstConnection &&
-        !connectionData.connected"
-        class="connect-button"
-      />
-    </template>
-  </Pane>
+  </div>
 </template>
-
 <script lang="ts">
   import {
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
-  import Pane from './Pane.vue';
   import Username from '@/components/Messages/Username.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
   @Component({
     components: {
       Username,
-      Pane,
       ConnectButton,
     },
   })
-  export default class SettingsPane extends Vue {
-    @Prop({ required: true })
-    visibility!: boolean;
-
-    $refs!: {
-      pane: Pane;
-    };
-
+  export default class SlideoutSettings extends Vue {
     @Prop({ required: true })
     message:string = '14';
 
-    get text() {
-      if (this.message.toString()) {
-        return '';
-      }
-      return '';
-    }
-
     get connectedUsers() {
       return this.$vxm.chat.connectedUsers;
     }
@@ -71,21 +47,6 @@
       return Boolean(this.ignoredUsers.length > 0);
     }
 
-    @Watch('connectedUsers')
-    onContentChanged() {
-      this.$refs.pane.onContentChanged();
-    }
-
-    @Watch('connectionData.connected')
-    updateFooterHeight() {
-      this.$nextTick(this.$refs.pane.updateFooterHeight);
-    }
-
-    @Watch('ignoredUsers')
-    usersChanged() {
-      this.$refs.pane.onContentChanged();
-    }
-
     @Watch('message')
     updateFontSize() {
       this.$vxm.chat.changeFontSize(parseInt(this.message, 10));
@@ -93,7 +54,6 @@
 
     unign(user:string) {
       this.$vxm.chat.unignoreUser(user);
-      this.$refs.pane.onContentChanged();
     }
   }
 </script>
@@ -113,4 +73,7 @@ input {
   padding-bottom:3px;
   background-color:white;
 }
+#settings-wrapper {
+  padding:5px;
+}
 </style>
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
new file mode 100644
index 00000000..36ea0ff5
--- /dev/null
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -0,0 +1,46 @@
+<template>
+  <div id="user-wrapper">
+    <h2>Online ({{userCount}})</h2>
+    <ul>
+      <li v-for="user in connectedUsers" :key="user.username">
+        <Username :user="user" />
+      </li>
+    </ul>
+      <ConnectButton
+        v-if="!connectionData.firstConnection &&
+        !connectionData.connected"
+        class="connect-button"
+      />
+  </div>
+</template>
+<script lang="ts">
+  import {
+    Vue, Component, Prop, Watch,
+  } from 'vue-property-decorator';
+  import Slideout from './Slideout.vue';
+  import Username from '../Messages/Username.vue';
+
+  @Component({
+    components: {
+      Username,
+    },
+  })
+  export default class SlideoutUser extends Vue {
+    get connectedUsers() {
+      return this.$vxm.chat.connectedUsers;
+    }
+
+    get userCount() {
+      return Object.keys(this.$vxm.chat.connectedUsers).length;
+    }
+
+    get connectionData() {
+      return this.$vxm.chat.connectionData;
+    }
+  }
+</script>
+<style scoped>
+#user-wrapper {
+  padding:5px;
+}
+</style>
diff --git a/src/app/components/SlideoutButtonChat.vue b/src/app/components/SlideoutButtonChat.vue
index 3185a542..69ce2e7f 100644
--- a/src/app/components/SlideoutButtonChat.vue
+++ b/src/app/components/SlideoutButtonChat.vue
@@ -14,9 +14,6 @@
 
   @Component
   export default class SlideoutButtonChat extends SlideoutButton {
-    @Prop()
-    name:string = 'Chat';
-
     @Prop({ required: true })
     selected!: string;
   }
diff --git a/src/app/components/SlideoutButtonSettings.vue b/src/app/components/SlideoutButtonSettings.vue
index c4072569..05d3c524 100644
--- a/src/app/components/SlideoutButtonSettings.vue
+++ b/src/app/components/SlideoutButtonSettings.vue
@@ -14,9 +14,6 @@
 
   @Component
   export default class SlideoutButtonSettings extends SlideoutButton {
-    @Prop()
-    name:string = 'Settings';
-
     @Prop({ required: true })
     selected!: string;
   }
diff --git a/src/app/components/SlideoutButtonUsers.vue b/src/app/components/SlideoutButtonUsers.vue
index ac2cd05e..3841673c 100644
--- a/src/app/components/SlideoutButtonUsers.vue
+++ b/src/app/components/SlideoutButtonUsers.vue
@@ -14,9 +14,6 @@
 
   @Component
   export default class SlideoutButtonUsers extends SlideoutButton {
-    @Prop()
-    name:string = 'Users';
-
     @Prop({ required: true })
     selected!: string;
   }
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index 6a57dd07..bc1d8f9b 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -72,7 +72,7 @@
   }
 
   .channel-description {
-    font-size: 12px;
+    font-size: 11px;
     text-align:justify;
   }
 </style>

From 220cb3e81aa88cb038a5c415a2ee31473c6f8b78 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 08:25:29 -0500
Subject: [PATCH 032/223] chat-content doesn't disappear on slideout open

---
 src/app/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 2ce08f69..0c61b14b 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -140,7 +140,7 @@
     border: solid #043468 2px;
     border-radius:15px;
     height: calc(100% - 54px); //Account for top bar and border
-    position: relative;
+    position: absolute;
     top:40px;
     left:8px;
     width:calc(100% - 20px); //Account for border

From c11bc6219b90d96e2f469c3b36530e1e30bf1c14 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 08:59:59 -0500
Subject: [PATCH 033/223] Changed size of divider between chats

---
 src/app/components/Slideout/SlideoutChats.vue | 13 ++++++++++++-
 src/app/components/Splitter.vue               |  6 +++---
 src/app/components/TabButton.vue              |  2 ++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index c8984f22..11f0ec3a 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -10,7 +10,7 @@
         @input="activeTab = index"
         v-on:click="update"
       >
-        <Splitter />
+        <Splitter :class="{extraBig:size(index)}"/>
       </TabButton>
     </div>
   </div>
@@ -44,6 +44,13 @@
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
 
+    size(of:Number) {
+      if (of === this.activeTab) {
+        return true;
+      }
+      return false;
+    }
+
     @Watch('activeTab')
     tabChanged() {
       (this.$parent as Slideout).checked = false;
@@ -63,4 +70,8 @@
   }
 </script>
 <style scoped>
+.extraBig {
+    left:-10px;
+    width:95%;
+}
 </style>
diff --git a/src/app/components/Splitter.vue b/src/app/components/Splitter.vue
index e56d4000..5a03397c 100644
--- a/src/app/components/Splitter.vue
+++ b/src/app/components/Splitter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="splitter"></div>
+  <div class="splitter"></div>
 </template>
 
 <script lang="ts">
@@ -12,7 +12,7 @@
 </script>
 
 <style lang="scss" scoped>
-  #splitter {
+  .splitter {
     height:1px;
     width:90%;
     padding:0px;
@@ -21,7 +21,7 @@
     background-color:gray;
     position:relative;
     margin:0px;
-    margin-bottom:0px;
+    margin-bottom:10px;
     top:15px;
   }
 </style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index bc1d8f9b..88171f02 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -51,6 +51,8 @@
     text-transform: none;
     display:block;
     width: 100%;
+    height:min-content;
+    margin:0px;
   }
 
   /* Change background color of buttons on hover */

From 66f4652e8d561cf2289b596aeeb42b13b861b642 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 11:17:52 -0500
Subject: [PATCH 034/223] Text size now updates like it should

---
 src/app/components/Slideout/SlideoutSettings.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 2797b9e4..68079f0c 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="settings-wrapper">
     <h2>Text Size</h2>
-    <input v-model="message" type=number min=10 max=22 value=24>
+    <input v-model="message" type=number min=10 max=22>
     <p id='font-size-p'>Default is 14</p>
     <h2>Ignored Users</h2>
     <ul>
@@ -29,7 +29,7 @@
   })
   export default class SlideoutSettings extends Vue {
     @Prop({ required: true })
-    message:string = '14';
+    message!:string;
 
     get connectedUsers() {
       return this.$vxm.chat.connectedUsers;
@@ -47,6 +47,14 @@
       return Boolean(this.ignoredUsers.length > 0);
     }
 
+    created() {
+      this.message = this.$vxm.chat.fontSize.toString();
+    }
+
+    get msg() {
+      return this.message;
+    }
+
     @Watch('message')
     updateFontSize() {
       this.$vxm.chat.changeFontSize(parseInt(this.message, 10));

From e5eff5314a406a69adaaba7844bd4217c1616d7c Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 11:27:03 -0500
Subject: [PATCH 035/223] Changed size of settings button in slideout

---
 src/app/components/SlideoutButtonSettings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/SlideoutButtonSettings.vue b/src/app/components/SlideoutButtonSettings.vue
index 05d3c524..eae84602 100644
--- a/src/app/components/SlideoutButtonSettings.vue
+++ b/src/app/components/SlideoutButtonSettings.vue
@@ -32,7 +32,7 @@
     height:40px;
     background-image: url("../assets/settings-icon-white.png");
     background-repeat: no-repeat;
-    background-size: 50% 50%;
+    background-size: 40% 40%;
     background-position: center;
     width: 40px;
   }

From 977adad263828a31c48743658d07d5811162a08e Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 11:28:27 -0500
Subject: [PATCH 036/223] Bug fix

---
 src/app/components/Slideout/SlideoutUser.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
index 36ea0ff5..4a2c3f1e 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -6,11 +6,6 @@
         <Username :user="user" />
       </li>
     </ul>
-      <ConnectButton
-        v-if="!connectionData.firstConnection &&
-        !connectionData.connected"
-        class="connect-button"
-      />
   </div>
 </template>
 <script lang="ts">

From 083e5496cae43294229e9900da7238b256a8b4e2 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 11:36:45 -0500
Subject: [PATCH 037/223] cleanup

---
 src/app/components/Panes/MessagePane.vue | 2 +-
 src/app/components/SendButton.vue        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 606171a4..04d36ebe 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -18,7 +18,7 @@
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput"
       />
-      <SendButton v-on:click="sendMessage" v-show="showInput"/>
+      <SendButton v-show="showInput"/>
       <ConnectButton
         v-show="!showInput"
       />
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index e7871b46..e928361a 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="send-button"
-    v-on:click="sendMSG"
+    v-on:click="sendMsg"
   >
   </button>
 </template>
@@ -12,7 +12,7 @@
 
   @Component
   export default class SendButton extends Vue {
-    sendMSG() {
+    sendMsg() {
       this.$vxm.chat.changeMessageToBeSent(true);
     }
   }

From 057168349ed045263111b74bfdfd1487001695d6 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 12:50:49 -0500
Subject: [PATCH 038/223] Send message button works

---
 src/app/components/Panes/MessagePane.vue | 25 ++++++++++++------------
 src/app/components/ScalableInput.vue     |  6 +++++-
 src/app/components/SendButton.vue        |  6 +++---
 src/app/store/chat.vuex.ts               |  7 -------
 4 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 04d36ebe..1e7c5125 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -18,7 +18,7 @@
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput"
       />
-      <SendButton v-show="showInput"/>
+      <SendButton @input="send" v-show="showInput" />
       <ConnectButton
         v-show="!showInput"
       />
@@ -77,14 +77,15 @@
       return this.$vxm.chat.fontSize.toString().concat('px');
     }
 
+    send() {
+      this.$emit('postMessage', this.newMessage);
+      this.newMessage = '';
+    }
+
     $refs!: {
       pane: Pane;
     };
 
-    get messageSending() {
-      return this.$vxm.chat.messageToBeSent;
-    }
-
     onKeyPress(e: KeyboardEvent) {
       if (e.code === 'Enter' || e.code === 'NumpadEnter') {
         this.$emit('postMessage', this.newMessage);
@@ -93,13 +94,11 @@
       }
     }
 
-    @Watch('messageSending')
     sendMessage() {
-      if (this.messageSending) {
-        this.$emit('postMessage', this.newMessage);
-        this.newMessage = '';
-        this.$vxm.chat.changeMessageToBeSent(false);
-      }
+      const e = new KeyboardEvent('send', { code: 'Enter' });
+      this.onKeyPress(e);
+      // eslint-disable-next-line no-alert
+      alert(2);
     }
 
     @Watch('messages')
@@ -115,9 +114,9 @@
 </script>
 <style scoped>
 .send-button {
-  position:absolute;
-  right:4px;
+  position: absolute;;
   bottom:4px;
+  right:4px;
   padding:0px;
   width:29px;
   height:29px;
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index b6b9991d..0cdaf4e0 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -3,7 +3,7 @@
     <textarea
       :value="value"
       :style="{height: `${height}px`}"
-      class="scalable-input bigger"
+      class="scalable-input"
       :disabled="disabled"
       @input="$emit('input', $event.target.value)"
     />
@@ -16,7 +16,11 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
+  import SendButton from '@/components/SendButton.vue';
   @Component({
+    components: {
+      SendButton,
+    },
   })
   export default class ScalableInput extends Vue {
     height = 0;
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index e928361a..e146cdea 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="send-button"
-    v-on:click="sendMsg"
+    @click="sendMessage"
   >
   </button>
 </template>
@@ -12,8 +12,8 @@
 
   @Component
   export default class SendButton extends Vue {
-    sendMsg() {
-      this.$vxm.chat.changeMessageToBeSent(true);
+    sendMessage() {
+      this.$emit('input', this);
     }
   }
 </script>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 35805c46..2033be56 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -82,8 +82,6 @@ export default class ChatModule extends VuexModule {
 
   fontSize: Number = 14;
 
-  messageToBeSent = false;
-
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -96,11 +94,6 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  @mutation
-  changeMessageToBeSent(to:boolean) {
-    this.messageToBeSent = to;
-  }
-
   @mutation
   changeFontSize(to:Number) {
     this.fontSize = to;

From 8bcf5a75ffcd07ff20de3b44c5e3606a1487b5eb Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 13:29:06 -0500
Subject: [PATCH 039/223] Cleanup and settings bug fix

---
 src/app/App.vue                               | 12 +++++------
 src/app/components/Panes/MessagePane.vue      |  2 +-
 src/app/components/SendButton.vue             |  2 +-
 src/app/components/Slideout/Slideout.vue      |  7 +------
 .../components/Slideout/SlideoutSettings.vue  |  6 ++++++
 src/app/store/chat.vuex.ts                    | 20 +++----------------
 6 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 0c61b14b..9eaf5ff8 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -3,15 +3,15 @@
     id="eterna-chat"
     style="height:100%; width:100%; overflow-y:hidden;"
   >
-    <slideout style="z-index:1;"></slideout>
+    <slideout style="z-index:1;" @change="alert(2)"></slideout>
     <transition name="fade">
       <div class="chat-content" v-if="!minimized">
         <MessagePane
           v-for="(channel, index) in messageTabs"
           :key="channel.name"
           :data="channel"
-          v-show="index === activeTab2"
-          :visibility="index === activeTab2"
+          v-show="index === activeTab"
+          :visibility="index === activeTab"
           @postMessage="postMessage($event, channel.name)"
         />
         <ConnectingPopup/>
@@ -59,11 +59,11 @@
     minimization = false;
 
     get currentTab() {
-        return this.$vxm.chat.chatChannel;
+      return this.$vxm.chat.chatChannel;
     }
 
-    get activeTab2() {
-      return this.$vxm.chat.tab2;
+    get activeTab() {
+      return this.$vxm.chat.tab;
     }
 
     $refs!: {
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 1e7c5125..9296d6ab 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -18,7 +18,7 @@
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         v-show="showInput"
       />
-      <SendButton @input="send" v-show="showInput" />
+      <SendButton @send="send" v-show="showInput" />
       <ConnectButton
         v-show="!showInput"
       />
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index e146cdea..616d649d 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -13,7 +13,7 @@
   @Component
   export default class SendButton extends Vue {
     sendMessage() {
-      this.$emit('input', this);
+      this.$emit('send');
     }
   }
 </script>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 81ba7298..ca4e656f 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -5,7 +5,7 @@
   >
       <div class="slideout-container" :class="{ slideoutContainerHidden: !checked }">
         <HamburgerMenuButton v-model="checked" class="checkbox"/>
-        <span :class="{slideoutContent: !checked }" v-show="checked">
+        <span :class="{slideoutContent: !checked }" v-if="checked">
           <SlideoutButtonChat
             :selected="chatSelected"
             @input="activeTab = 0"
@@ -81,11 +81,6 @@
     get userCount() {
       return Object.keys(this.$vxm.chat.connectedUsers).length;
     }
-
-    @Watch('activeTab')
-    tabChanged() {
-      this.$vxm.chat.changeTab1(this.activeTab);
-    }
   }
 </script>
 
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 68079f0c..333f07b0 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -21,6 +21,8 @@
   } from 'vue-property-decorator';
   import Username from '@/components/Messages/Username.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
+  import SlideoutButton from './SlideoutButton.vue';
+  import Slideout from './Slideout.vue';
   @Component({
     components: {
       Username,
@@ -47,6 +49,10 @@
       return Boolean(this.ignoredUsers.length > 0);
     }
 
+    get visible() {
+      return (this.$parent as Slideout).checked;
+    }
+
     created() {
       this.message = this.$vxm.chat.fontSize.toString();
     }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 2033be56..716bad49 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,11 +72,7 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
-  tab1: Number = 0;
-
-  tab2: Number = 0;
-
-  minimized: boolean = false;
+  tab: Number = 0;
 
   chatChannel : string = '#general';
 
@@ -105,18 +101,8 @@ export default class ChatModule extends VuexModule {
   }
 
   @mutation
-  toggleMinimized(to:boolean) {
-    this.minimized = to;
-  }
-
-  @mutation
-  changeTab1(to:Number) {
-    this.tab1 = to;
-  }
-
-  @mutation
-  changeTab2(to:Number) {
-    this.tab2 = to;
+  changeTab(to:Number) {
+    this.tab = to;
   }
 
   @mutation

From fab5d006a9004ea9ec88a43bde927553fa291df4 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 14:15:49 -0500
Subject: [PATCH 040/223] Small fixes

---
 src/app/App.vue                                  | 13 +++----------
 src/app/components/Panes/MessagePane.vue         |  2 +-
 src/app/components/ScalableInput.vue             |  6 +++---
 src/app/components/Slideout/Slideout.vue         |  1 -
 src/app/components/Slideout/SlideoutChats.vue    |  4 ++--
 src/app/components/Slideout/SlideoutSettings.vue | 12 ++++++------
 6 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 9eaf5ff8..73a632f9 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -113,19 +113,12 @@
     font-family: "Open Sans", "Open Sans", Arial, Gulim;
     font-size: 14px;
     font-weight: 300;
-    background-color:#05224b;
+    background-color:#043468;
     position:relative;
     top:0px;
     left:0px;
   }
 
-  .tabs {
-    position: relative;
-    height: 25px;
-    margin: 0;
-    padding: 0;
-  }
-
   .fade-enter-active,
   .fade-leave-active {
     transition: 200ms;
@@ -137,7 +130,7 @@
   }
 
   .chat-content {
-    border: solid #043468 2px;
+    border: solid #0405224b 2px;
     border-radius:15px;
     height: calc(100% - 54px); //Account for top bar and border
     position: absolute;
@@ -145,7 +138,7 @@
     left:8px;
     width:calc(100% - 20px); //Account for border
     color: #c0dce7;
-    background-color:#043468;
+    background-color:#05224b;
   }
   .minimizationTriangle {
     position:absolute;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 9296d6ab..d3a0280e 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -114,7 +114,7 @@
 </script>
 <style scoped>
 .send-button {
-  position: absolute;;
+  position: absolute;
   bottom:4px;
   right:4px;
   padding:0px;
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 0cdaf4e0..ef5acb3a 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -67,12 +67,12 @@
   .scalable-input {
     resize: none;
     overflow: hidden;
-    position: absolute;
+    position: relative;
     top: 0px;
     padding: 0;
-    color:white;
+    color:black;
     width:calc(100% - 2px);
-    background-color:#05224b;
+    background-color:white;
     border:#343a40 1px solid;
     border-radius:8px;
     outline: none;
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index ca4e656f..1c69beb2 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -94,7 +94,6 @@
   background-color:black;
   color:white;
   height:100%;
-  position:absolute;
   top:0px;
   left:0px;
   z-index: 2;
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 11f0ec3a..0fe43965 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -55,13 +55,13 @@
     tabChanged() {
       (this.$parent as Slideout).checked = false;
       this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
-      this.$vxm.chat.changeTab2(this.activeTab);
+      this.$vxm.chat.changeTab(this.activeTab);
     }
 
     update() {
       (this.$parent as Slideout).checked = false;
       this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
-      this.$vxm.chat.changeTab2(this.activeTab);
+      this.$vxm.chat.changeTab(this.activeTab);
     }
 
     isSelected(of:Number) {
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 333f07b0..ba04b970 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="settings-wrapper">
     <h2>Text Size</h2>
-    <input v-model="message" type=number min=10 max=22>
+    <input v-model="size" type=number min=10 max=22>
     <p id='font-size-p'>Default is 14</p>
     <h2>Ignored Users</h2>
     <ul>
@@ -31,7 +31,7 @@
   })
   export default class SlideoutSettings extends Vue {
     @Prop({ required: true })
-    message!:string;
+    size!:string;
 
     get connectedUsers() {
       return this.$vxm.chat.connectedUsers;
@@ -54,16 +54,16 @@
     }
 
     created() {
-      this.message = this.$vxm.chat.fontSize.toString();
+      this.size = this.$vxm.chat.fontSize.toString();
     }
 
     get msg() {
-      return this.message;
+      return this.size;
     }
 
-    @Watch('message')
+    @Watch('size')
     updateFontSize() {
-      this.$vxm.chat.changeFontSize(parseInt(this.message, 10));
+      this.$vxm.chat.changeFontSize(parseInt(this.size, 10));
     }
 
     unign(user:string) {

From 3b184dd8ce76347cca5ff0508d009fd345ca1efc Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 15:40:33 -0500
Subject: [PATCH 041/223] Styling

---
 src/app/components/ScalableInput.vue          |  2 +-
 src/app/components/Slideout/SlideoutChats.vue | 17 +++----------
 .../components/Slideout/SlideoutSettings.vue  | 25 ++++++++++++++++---
 src/app/components/Slideout/SlideoutUser.vue  | 21 +++++++++++++++-
 src/app/components/TabButton.vue              |  8 ++++--
 5 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index ef5acb3a..e5f920e5 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -67,7 +67,7 @@
   .scalable-input {
     resize: none;
     overflow: hidden;
-    position: relative;
+    position: absolute;
     top: 0px;
     padding: 0;
     color:black;
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 0fe43965..b2cf2e69 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -4,13 +4,13 @@
       <TabButton
         v-for="({name}, index) in messageTabs"
         :key="name"
-        :selected="activeTab === index"
+        :isActive="activeTab === index"
         :name="name.substr(1)"
         :description="channelDescriptions[name]"
         @input="activeTab = index"
         v-on:click="update"
       >
-        <Splitter :class="{extraBig:size(index)}"/>
+        <Splitter />
       </TabButton>
     </div>
   </div>
@@ -36,7 +36,7 @@
 
     channelDescriptions = {
     '#general': 'General chat',
-    '#off-topic': 'Off-topic conversations',
+    '#off-topic': 'Off-topic chat',
     '#help': 'Help requests',
     };
 
@@ -44,13 +44,6 @@
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
 
-    size(of:Number) {
-      if (of === this.activeTab) {
-        return true;
-      }
-      return false;
-    }
-
     @Watch('activeTab')
     tabChanged() {
       (this.$parent as Slideout).checked = false;
@@ -70,8 +63,4 @@
   }
 </script>
 <style scoped>
-.extraBig {
-    left:-10px;
-    width:95%;
-}
 </style>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index ba04b970..9f1912c4 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="settings-wrapper">
-    <h2>Text Size</h2>
+    <h3>Text Size</h3>
     <input v-model="size" type=number min=10 max=22>
     <p id='font-size-p'>Default is 14</p>
-    <h2>Ignored Users</h2>
+    <h3>Ignored List</h3>
     <ul>
       <li v-for="user in ignoredUsers" :key="user.Username">
         {{ user }}
@@ -75,12 +75,15 @@
 #font-size-p {
   vertical-align: mid;
   margin-left:2px;
+  margin-bottom:15px;
 }
-h1 {
-  margin:2px;
+h3 {
+  width:102px;
+  text-align:justify;
 }
 input {
   margin:2px;
+  width:102px;
 }
 .unignore-user {
   padding:2px;
@@ -89,5 +92,19 @@ input {
 }
 #settings-wrapper {
   padding:5px;
+  padding-left:20px;
+  height:calc(100% - 50px);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color:#343a40;
+  border-radius:5px;
+}
+li {
+  list-style-type: none;
 }
 </style>
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
index 4a2c3f1e..182c4d98 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="user-wrapper">
-    <h2>Online ({{userCount}})</h2>
+    <h3>Online ({{userCount}})</h3>
     <ul>
       <li v-for="user in connectedUsers" :key="user.username">
         <Username :user="user" />
@@ -37,5 +37,24 @@
 <style scoped>
 #user-wrapper {
   padding:5px;
+  padding-left:20px;
+  overflow: auto;
+  height:calc(100% - 50px);
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color:#343a40;
+  border-radius:5px;
+}
+
+li {
+  list-style-type: none;
+}
+h3 {
+  margin-bottom:2px;
 }
 </style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index 88171f02..c0486511 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -64,17 +64,21 @@
     border-left: solid #4A90E2 10px;
     border-top-left-radius: 5%;
     border-bottom-left-radius: 5%;
+    padding-left:5px;
   }
 
   .channel-name {
-    margin-top:15px;
+    margin-top:2px;
     font-size: 20px;
     text-align: justify;
     text-justify:auto;
+    margin-left:5px;
+    margin-bottom:10px;
   }
 
   .channel-description {
-    font-size: 11px;
+    font-size: 12px;
     text-align:justify;
+    margin-left:5px;
   }
 </style>

From e7ff7942d65287f4d59b530a83e24efe6dba70ef Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 17:27:35 -0500
Subject: [PATCH 042/223] heavy cleanup, minor style

---
 src/app/App.vue                               |  6 +-
 src/app/components/Panes/MessagePane.vue      |  9 +--
 src/app/components/Slideout/Slideout.vue      | 78 +++++++++----------
 src/app/components/Slideout/SlideoutChats.vue | 11 +--
 .../components/Slideout/SlideoutSettings.vue  | 14 ++--
 src/app/components/Slideout/SlideoutUser.vue  | 12 +--
 src/app/components/Splitter.vue               |  4 +-
 src/app/components/TabButton.vue              | 10 +--
 src/app/store/chat.vuex.ts                    |  4 +-
 9 files changed, 68 insertions(+), 80 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 73a632f9..98515759 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -3,7 +3,11 @@
     id="eterna-chat"
     style="height:100%; width:100%; overflow-y:hidden;"
   >
-    <slideout style="z-index:1;" @change="alert(2)"></slideout>
+    <slideout
+      style="z-index:1;"
+      :minimizedValue="!minimized"
+    >
+    </slideout>
     <transition name="fade">
       <div class="chat-content" v-if="!minimized">
         <MessagePane
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index d3a0280e..84c4b1da 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -74,7 +74,7 @@
     }
 
     get fontSize() {
-      return this.$vxm.chat.fontSize.toString().concat('px');
+      return `${this.$vxm.chat.fontSize.toString()}px`;
     }
 
     send() {
@@ -94,13 +94,6 @@
       }
     }
 
-    sendMessage() {
-      const e = new KeyboardEvent('send', { code: 'Enter' });
-      this.onKeyPress(e);
-      // eslint-disable-next-line no-alert
-      alert(2);
-    }
-
     @Watch('messages')
     onContentChanged() {
       this.$refs.pane.onContentChanged();
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 1c69beb2..090e1f39 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,30 +1,29 @@
 <template>
   <div
-  style="position:relative; width:75%"
-  :class="{ slideoutContainerHidden: !checked, tall:checked}"
+    style="position:relative; width:75%"
+    class="slideout-container"
+    :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
-      <div class="slideout-container" :class="{ slideoutContainerHidden: !checked }">
-        <HamburgerMenuButton v-model="checked" class="checkbox"/>
-        <span :class="{slideoutContent: !checked }" v-if="checked">
-          <SlideoutButtonChat
-            :selected="chatSelected"
-            @input="activeTab = 0"
-          />
-          <SlideoutButtonUsers
-            :selected="userSelected"
-            @input="activeTab = 1"
-          />
-          <SlideoutButtonSettings
-            :selected="settingsSelected"
-            @input="activeTab = 2"
-          />
-          <SlideoutChats
-           v-if="chatSelected"
-          />
-          <SlideoutUser v-if="userSelected"/>
-          <SlideoutSettings v-if="settingsSelected" message=14 />
-        </span>
-      </div>
+    <HamburgerMenuButton v-model="checked"/>
+    <span :class="{slideoutContent: !checked }" v-if="checked">
+      <SlideoutButtonChat
+        :selected="chatSelected"
+        @input="activeTab = 0"
+      />
+      <SlideoutButtonUsers
+        :selected="userSelected"
+        @input="activeTab = 1"
+      />
+      <SlideoutButtonSettings
+        :selected="settingsSelected"
+        @input="activeTab = 2"
+      />
+      <SlideoutChats
+        v-if="chatSelected"
+      />
+      <SlideoutUser v-if="userSelected"/>
+      <SlideoutSettings v-if="settingsSelected" size=14 />
+    </span>
   </div>
 </template>
 
@@ -32,13 +31,13 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import SlideoutChats from '@/components/Slideout/SlideoutChats.vue';
-  import SlideoutUser from '@/components/Slideout/SlideoutUser.vue';
-  import SlideoutSettings from '@/components/Slideout/SlideoutSettings.vue';
-  import SlideoutButton from '@/components/Slideout/SlideoutButton.vue';
-  import SlideoutButtonUsers from '@/components/SlideoutButtonUsers.vue';
-  import SlideoutButtonChat from '@/components/SlideoutButtonChat.vue';
-  import SlideoutButtonSettings from '@/components/SlideoutButtonSettings.vue';
+  import SlideoutChats from './SlideoutChats.vue';
+  import SlideoutUser from './SlideoutUser.vue';
+  import SlideoutSettings from './SlideoutSettings.vue';
+  import SlideoutButton from './SlideoutButton.vue';
+  import SlideoutButtonUsers from '../SlideoutButtonUsers.vue';
+  import SlideoutButtonChat from '../SlideoutButtonChat.vue';
+  import SlideoutButtonSettings from '../SlideoutButtonSettings.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import HamburgerMenuButton from '@/components/HamburgerMenuButton.vue';
 
@@ -60,7 +59,8 @@
 
     checked = false;
 
-    minimizedValue = false;
+    @Prop()
+    minimizedValue !: boolean;
 
     get chatSelected() {
         return this.activeTab === 0;
@@ -74,18 +74,18 @@
       return this.activeTab === 2;
     }
 
-    get messageTabs() {
-        return Object.values(this.$vxm.chat.channels).map(channel => channel!);
-    }
-
-    get userCount() {
-      return Object.keys(this.$vxm.chat.connectedUsers).length;
+    // Slideout slides back when minimized
+    @Watch('minimizedValue')
+    minimzationChanged() {
+      if (!this.minimizedValue) {
+        this.checked = false;
+      }
     }
   }
 </script>
 
 <style scoped>
-.checkbox {
+.hamburger {
   position: relative;
   vertical-align: top;
 }
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index b2cf2e69..9de6a46d 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -32,7 +32,7 @@
     },
   })
   export default class SlideoutChats extends Vue {
-    activeTab = 4;
+    activeTab = 4; // If 1-3, causes weird bug. This fixes it
 
     channelDescriptions = {
     '#general': 'General chat',
@@ -44,10 +44,11 @@
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
 
-    @Watch('activeTab')
+    @Watch('activeTab') // When tab changed
     tabChanged() {
-      (this.$parent as Slideout).checked = false;
-      this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
+      (this.$parent as Slideout).checked = false; // Close slideout
+      const channelName = this.messageTabs[this.activeTab].name;
+      this.$vxm.chat.changeChannel(channelName); // Change channel name displayed at top
       this.$vxm.chat.changeTab(this.activeTab);
     }
 
@@ -57,7 +58,7 @@
       this.$vxm.chat.changeTab(this.activeTab);
     }
 
-    isSelected(of:Number) {
+    isSelected(of:Number) { // If given tab selected
       return of === this.activeTab;
     }
   }
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 9f1912c4..76699a9a 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -7,10 +7,10 @@
     <ul>
       <li v-for="user in ignoredUsers" :key="user.Username">
         {{ user }}
-        <button class='unignore-user' v-on:click="unign(user)">Unignore</button>
+        <button class='unignore-user' v-on:click="unignore(user)">Unignore</button>
       </li>
       <li v-show="!anyIgnoredUsers">No users ignored</li>
-      <button class='unignore-user' v-on:click="unign('*')" v-show="anyIgnoredUsers" >
+      <button class='unignore-user' v-on:click="unignore('*')" v-show="anyIgnoredUsers" >
         Unignore All</button>
     </ul>
   </div>
@@ -31,7 +31,7 @@
   })
   export default class SlideoutSettings extends Vue {
     @Prop({ required: true })
-    size!:string;
+    size!:string; // font size
 
     get connectedUsers() {
       return this.$vxm.chat.connectedUsers;
@@ -53,20 +53,18 @@
       return (this.$parent as Slideout).checked;
     }
 
+    // When tab opened, display stored value if there is one
     created() {
       this.size = this.$vxm.chat.fontSize.toString();
     }
 
-    get msg() {
-      return this.size;
-    }
-
+    // Updates global font size when input changes
     @Watch('size')
     updateFontSize() {
       this.$vxm.chat.changeFontSize(parseInt(this.size, 10));
     }
 
-    unign(user:string) {
+    unignore(user:string) {
       this.$vxm.chat.unignoreUser(user);
     }
   }
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
index 182c4d98..6b6e20a5 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -28,10 +28,6 @@
     get userCount() {
       return Object.keys(this.$vxm.chat.connectedUsers).length;
     }
-
-    get connectionData() {
-      return this.$vxm.chat.connectionData;
-    }
   }
 </script>
 <style scoped>
@@ -39,7 +35,7 @@
   padding:5px;
   padding-left:20px;
   overflow: auto;
-  height:calc(100% - 50px);
+  height:calc(100% - 50px); /* Fills slideout and accounts for top bar */
 }
 
 ::-webkit-scrollbar {
@@ -47,14 +43,14 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color:#343a40;
+  background-color:#343a40; /* Make scrollbar visible */
   border-radius:5px;
 }
 
 li {
-  list-style-type: none;
+  list-style-type: none; /* Remove bullet points */
 }
 h3 {
-  margin-bottom:2px;
+  margin-bottom:2px; /* Title */
 }
 </style>
diff --git a/src/app/components/Splitter.vue b/src/app/components/Splitter.vue
index 5a03397c..952ad111 100644
--- a/src/app/components/Splitter.vue
+++ b/src/app/components/Splitter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="splitter"></div>
+  <div class="splitter"></div> <!--- Just a filled-in div --->
 </template>
 
 <script lang="ts">
@@ -18,7 +18,7 @@
     padding:0px;
     padding-right:5px;
     padding-left:5px;
-    background-color:gray;
+    background-color:#7b8a8b;
     position:relative;
     margin:0px;
     margin-bottom:10px;
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index c0486511..b3f4c0d1 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -25,9 +25,6 @@
     @Prop()
     description!: string;
 
-    @Prop()
-    selected!: string;
-
     get isActive() {
       return this.$vxm.chat.chatChannel.includes(this.name);
     }
@@ -61,9 +58,9 @@
   }
 
   button.active {
-    border-left: solid #4A90E2 10px;
-    border-top-left-radius: 5%;
-    border-bottom-left-radius: 5%;
+    border-left: solid #4A90E2 10px; //Selected rectangle to the side is jsut left border
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
     padding-left:5px;
   }
 
@@ -71,7 +68,6 @@
     margin-top:2px;
     font-size: 20px;
     text-align: justify;
-    text-justify:auto;
     margin-left:5px;
     margin-bottom:10px;
   }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 716bad49..5de44f98 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,9 +72,9 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
-  tab: Number = 0;
+  tab: Number = 0; // Selected tab. One of the chat channels
 
-  chatChannel : string = '#general';
+  chatChannel : string = '#general'; // Name of channel display in top bar
 
   fontSize: Number = 14;
 

From 0ae327ccbee122f0382feefa65fd164e141cea71 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Wed, 6 May 2020 21:24:51 -0500
Subject: [PATCH 043/223] Cleanup and commenting

---
 src/app/App.vue                               | 36 ++++++++++---------
 src/app/components/MinimizationTriangle.vue   |  8 ++---
 src/app/components/Panes/MessagePane.vue      |  3 +-
 src/app/components/Slideout/Slideout.vue      | 19 +++++-----
 .../components/Slideout/SlideoutButton.vue    |  9 -----
 src/app/components/Slideout/SlideoutChats.vue |  8 ++---
 .../components/Slideout/SlideoutSettings.vue  | 33 ++++++++---------
 src/app/components/SlideoutButtonChat.vue     |  8 +----
 src/app/components/SlideoutButtonSettings.vue |  8 +----
 src/app/components/SlideoutButtonUsers.vue    |  8 +----
 src/app/components/TabButton.vue              |  4 +--
 src/app/store/chat.vuex.ts                    | 15 --------
 12 files changed, 58 insertions(+), 101 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 98515759..37c97409 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -62,10 +62,12 @@
 
     minimization = false;
 
+    // For text in top bar
     get currentTab() {
       return this.$vxm.chat.chatChannel;
     }
 
+    // Gets current chat tab
     get activeTab() {
       return this.$vxm.chat.tab;
     }
@@ -118,7 +120,7 @@
     font-size: 14px;
     font-weight: 300;
     background-color:#043468;
-    position:relative;
+    position:relative; /* Makes sure everything is placed with respect to it, not to its parent */
     top:0px;
     left:0px;
   }
@@ -130,7 +132,7 @@
 
   .fade-enter, .fade-leave-to
   {
-    transform: translateY(-50%) scaleY(0);
+    transform: translateY(-50%) scaleY(0); //Moves everything up without interfering with top bar.
   }
 
   .chat-content {
@@ -144,29 +146,29 @@
     color: #c0dce7;
     background-color:#05224b;
   }
-  .minimizationTriangle {
+  .minimizationTriangle { // Minimization button
     position:absolute;
     top:0px;
     margin-top:2.5px;
     right:5px;
   }
-  .open-window {
+  .open-window { //Link that opens chat in new window
     position:absolute;
     top:0px;
     margin-top:2.5px;
     right:39px;
   }
-  #current-tab {
-  position: absolute;
-  right:5px;
-  font-family:'Open Sans','Century Gothic','Didact Gothic','Arial',sans-serif;
-  padding-top:0px;
-  font-size:24px;
-  top:1px;
-  width:calc(100% - 48px);
-  float:right;
-  text-align: left;
-  z-index: 0;
-  height: 30px;
-}
+  #current-tab { //Text on the top bar that says which chat channel the user is in
+    position: absolute;
+    right:5px;
+    font-family:'Open Sans','Century Gothic','Didact Gothic','Arial',sans-serif;
+    padding-top:0px;
+    font-size:24px;
+    top:1px;
+    width:calc(100% - 48px);
+    float:right;
+    text-align: left;
+    z-index: 0; // Covered by slideout
+    height: 30px;
+  }
 </style>
diff --git a/src/app/components/MinimizationTriangle.vue b/src/app/components/MinimizationTriangle.vue
index 90bb8229..41d115c9 100644
--- a/src/app/components/MinimizationTriangle.vue
+++ b/src/app/components/MinimizationTriangle.vue
@@ -20,7 +20,7 @@
 
 
 <style lang="scss" scoped>
-  .minimization-triangle {
+  .minimization-triangle { /* Normal state */
     background-image: url("../assets/minimization-triangle.png");
     background-repeat: no-repeat;
     background-size: 60% 40%;
@@ -33,17 +33,17 @@
     animation-duration: 0.2s;
   }
 
-  @keyframes minimization-triangle-rotation-to {
+  @keyframes minimization-triangle-rotation-to { /* Animates the rotation to minimized state */
     from {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
     to {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
   }
 
-  @keyframes minimization-triangle-rotation-from {
+  @keyframes minimization-triangle-rotation-from { /* Animates rotation to uniminimized state */
     to {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
     from {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
   }
 
-  .minimization-triangle.flipped {
+  .minimization-triangle.flipped { /* Button in minimized state */
     transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
     animation-name: minimization-triangle-rotation-to;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 84c4b1da..7b8d8951 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -73,6 +73,7 @@
           || this.connectionData.firstConnection;
     }
 
+    // Updates font size
     get fontSize() {
       return `${this.$vxm.chat.fontSize.toString()}px`;
     }
@@ -106,7 +107,7 @@
   }
 </script>
 <style scoped>
-.send-button {
+.send-button { /* Send message button */
   position: absolute;
   bottom:4px;
   right:4px;
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 090e1f39..6ef99307 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -5,7 +5,7 @@
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
     <HamburgerMenuButton v-model="checked"/>
-    <span :class="{slideoutContent: !checked }" v-if="checked">
+    <span v-if="checked">
       <SlideoutButtonChat
         :selected="chatSelected"
         @input="activeTab = 0"
@@ -57,11 +57,13 @@
   export default class Slideout extends Vue {
     activeTab = 0;
 
+    // For hamburger
     checked = false;
 
     @Prop()
     minimizedValue !: boolean;
 
+    // Each of the functions below tells whether a given tab is selected
     get chatSelected() {
         return this.activeTab === 0;
     }
@@ -85,11 +87,11 @@
 </script>
 
 <style scoped>
-.hamburger {
+.hamburger { /* Hamburger button */
   position: relative;
   vertical-align: top;
 }
-.slideout-container {
+.slideout-container { /* Container for slideout */
   width:fit-content;
   background-color:black;
   color:white;
@@ -98,22 +100,19 @@
   left:0px;
   z-index: 2;
 }
-.slideoutContainerHidden {
+.slideoutContainerHidden { /* When slideout is closed */
   height:0px;
   animation: slideBack 0.25s;
 }
-.slideoutContent {
-  visibility: hidden;
-}
-@keyframes slide {
+@keyframes slide { /* Opens slideout */
   from {left: -151px;}
   to {left:0px;}
 }
-@keyframes slideBack {
+@keyframes slideBack { /* Closes slideout */
   to {height:100%; width:0px}
   from {height:100%; width:160px}
 }
-.tall {
+.tall { /* When slideout is open */
   height:100%;
   animation: slide 0.25s;
 }
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 2d7d7e83..4020c39b 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -39,13 +39,4 @@
     text-transform: capitalize;
     height:30px;
   }
-
-  /* Change background color of buttons on hover */
-  button:hover:not(.active) {
-    background-color: rgba(255, 255, 255, 0.13);
-  }
-
-  button.active {
-    background-color: rgba(255, 255, 255, 0.2);
-  }
 </style>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 9de6a46d..e359acc5 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -48,14 +48,14 @@
     tabChanged() {
       (this.$parent as Slideout).checked = false; // Close slideout
       const channelName = this.messageTabs[this.activeTab].name;
-      this.$vxm.chat.changeChannel(channelName); // Change channel name displayed at top
-      this.$vxm.chat.changeTab(this.activeTab);
+      this.$vxm.chat.chatChannel = channelName; // Change channel name displayed at top
+      this.$vxm.chat.tab = this.activeTab;
     }
 
     update() {
       (this.$parent as Slideout).checked = false;
-      this.$vxm.chat.changeChannel(this.messageTabs[this.activeTab].name);
-      this.$vxm.chat.changeTab(this.activeTab);
+      this.$vxm.chat.chatChannel = this.messageTabs[this.activeTab].name;
+      this.$vxm.chat.tab = this.activeTab;
     }
 
     isSelected(of:Number) { // If given tab selected
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 76699a9a..8c7b85e4 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -33,22 +33,17 @@
     @Prop({ required: true })
     size!:string; // font size
 
-    get connectedUsers() {
-      return this.$vxm.chat.connectedUsers;
-    }
-
-    get connectionData() {
-      return this.$vxm.chat.connectionData;
-    }
-
+    // Gets a list of ignored users
     get ignoredUsers() {
       return this.$vxm.chat.ignoredUsers;
     }
 
+    // If any users are ignored. Uses ignoredUsers.length
     get anyIgnoredUsers() {
-      return Boolean(this.ignoredUsers.length > 0);
+      return this.ignoredUsers.length > 0;
     }
 
+    // Whether it is visible. Determined by whether slideout is opened
     get visible() {
       return (this.$parent as Slideout).checked;
     }
@@ -61,48 +56,50 @@
     // Updates global font size when input changes
     @Watch('size')
     updateFontSize() {
-      this.$vxm.chat.changeFontSize(parseInt(this.size, 10));
+      this.$vxm.chat.fontSize = parseInt(this.size, 10);
     }
 
+    // Unignore user on list
     unignore(user:string) {
       this.$vxm.chat.unignoreUser(user);
     }
   }
 </script>
 <style scoped>
-#font-size-p {
+#font-size-p { /* 'Default is 14' text */
   vertical-align: mid;
   margin-left:2px;
   margin-bottom:15px;
 }
 h3 {
-  width:102px;
+  width:calc(100% - 23px); /* Accounts for padding on both sides */
   text-align:justify;
 }
 input {
   margin:2px;
-  width:102px;
+  width:calc(100% - 23px); /* Accounts for padding on both sides */
+  max-width:150px; /* Big screens don't have arbitrarily large input */
 }
-.unignore-user {
+.unignore-user { /* Unignore user button */
   padding:2px;
   padding-bottom:3px;
   background-color:white;
 }
-#settings-wrapper {
+#settings-wrapper { /* Wrapper div */
   padding:5px;
   padding-left:20px;
   height:calc(100% - 50px);
 }
 
-::-webkit-scrollbar {
+::-webkit-scrollbar { /* Scrollbar track */
     width: 10px;
 }
 
-::-webkit-scrollbar-thumb {
+::-webkit-scrollbar-thumb { /* Scrollbar bar */
   background-color:#343a40;
   border-radius:5px;
 }
-li {
+li { /* Remove bullets */
   list-style-type: none;
 }
 </style>
diff --git a/src/app/components/SlideoutButtonChat.vue b/src/app/components/SlideoutButtonChat.vue
index 69ce2e7f..e8d2896c 100644
--- a/src/app/components/SlideoutButtonChat.vue
+++ b/src/app/components/SlideoutButtonChat.vue
@@ -36,13 +36,7 @@
     background-position: center;
     width: 40px;
   }
-
-  /* Change background color of buttons on hover */
-  button:hover:not(.active) {
-    background-color: rgba(255, 255, 255, 0.13);
-  }
-
-  button.active {
+  button.active { /* When button is selected, use green icon */
     background-image: url("../assets/chat-icon-green.png");
   }
 </style>
diff --git a/src/app/components/SlideoutButtonSettings.vue b/src/app/components/SlideoutButtonSettings.vue
index eae84602..d6c2aaff 100644
--- a/src/app/components/SlideoutButtonSettings.vue
+++ b/src/app/components/SlideoutButtonSettings.vue
@@ -36,13 +36,7 @@
     background-position: center;
     width: 40px;
   }
-
-  /* Change background color of buttons on hover */
-  button:hover:not(.active) {
-    background-color: rgba(255, 255, 255, 0.13);
-  }
-
-  button.active {
+  button.active { /* When button is selected, use green icon */
     background-image: url("../assets/settings-icon-green.png");
   }
 </style>
diff --git a/src/app/components/SlideoutButtonUsers.vue b/src/app/components/SlideoutButtonUsers.vue
index 3841673c..c302ba9b 100644
--- a/src/app/components/SlideoutButtonUsers.vue
+++ b/src/app/components/SlideoutButtonUsers.vue
@@ -36,13 +36,7 @@
     background-position: center;
     width: 40px;
   }
-
-  /* Change background color of buttons on hover */
-  button:hover:not(.active) {
-    background-color: rgba(255, 255, 255, 0.13);
-  }
-
-  button.active {
+  button.active { /* When button is selected, use green icon */
     background-image: url("../assets/user-icon-green.png");
   }
 </style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index b3f4c0d1..367472da 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -64,7 +64,7 @@
     padding-left:5px;
   }
 
-  .channel-name {
+  .channel-name { /* Name of chat channel */
     margin-top:2px;
     font-size: 20px;
     text-align: justify;
@@ -72,7 +72,7 @@
     margin-bottom:10px;
   }
 
-  .channel-description {
+  .channel-description { /* Description of chat channel */
     font-size: 12px;
     text-align:justify;
     margin-left:5px;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 5de44f98..386c043d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -90,21 +90,6 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  @mutation
-  changeFontSize(to:Number) {
-    this.fontSize = to;
-  }
-
-  @mutation
-  changeChannel(to:string) {
-    this.chatChannel = to;
-  }
-
-  @mutation
-  changeTab(to:Number) {
-    this.tab = to;
-  }
-
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {

From 39a1e1d7b0c81af62d76ce73a8ef48ee75eb924c Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Thu, 7 May 2020 10:33:13 -0500
Subject: [PATCH 044/223] Fixed animations

---
 src/app/components/Slideout/Slideout.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 6ef99307..5fff9c03 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -105,12 +105,12 @@
   animation: slideBack 0.25s;
 }
 @keyframes slide { /* Opens slideout */
-  from {left: -151px;}
-  to {left:0px;}
+  from {height:100%; width: 0;}
+  to {height:100%; width:75%}
 }
 @keyframes slideBack { /* Closes slideout */
-  to {height:100%; width:0px}
-  from {height:100%; width:160px}
+  to {height:100%; width:0}
+  from {height:100%; width:75%}
 }
 .tall { /* When slideout is open */
   height:100%;

From b4cbe213ef9e94e3aade34e4482e547c2b3a184f Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Thu, 7 May 2020 11:14:56 -0500
Subject: [PATCH 045/223] Minimization animation looks better

---
 src/app/App.vue                          | 7 +++++--
 src/app/components/SendButton.vue        | 8 ++++++++
 src/app/components/Slideout/Slideout.vue | 1 +
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 37c97409..70fab6b8 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -127,12 +127,14 @@
 
   .fade-enter-active,
   .fade-leave-active {
-    transition: 200ms;
+    transform-origin: top center;
+    transition: 1000ms;
   }
 
   .fade-enter, .fade-leave-to
   {
-    transform: translateY(-50%) scaleY(0); //Moves everything up without interfering with top bar.
+    transform: rotateX(90deg);
+    //Moves everything up without interfering with top bar.
   }
 
   .chat-content {
@@ -145,6 +147,7 @@
     width:calc(100% - 20px); //Account for border
     color: #c0dce7;
     background-color:#05224b;
+    list-style-type: none;
   }
   .minimizationTriangle { // Minimization button
     position:absolute;
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index 616d649d..aa223773 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -1,6 +1,7 @@
 <template>
   <button
     class="send-button"
+    :class="{animated: animationValue}"
     @click="sendMessage"
   >
   </button>
@@ -12,7 +13,10 @@
 
   @Component
   export default class SendButton extends Vue {
+    animationValue = false;
+
     sendMessage() {
+      this.animationValue = true;
       this.$emit('send');
     }
   }
@@ -28,5 +32,9 @@
     background-position: center;
     height: 30px;
     width: 25px;
+    transition: transform 0.5s;
+  }
+  .send-button:active {
+    transform:translate3d(5px,0,100px) rotateY(90deg);
   }
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 5fff9c03..8b72d537 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -108,6 +108,7 @@
   from {height:100%; width: 0;}
   to {height:100%; width:75%}
 }
+/* Height does need to be there for the slideout to work. Otherwise it doesn't animate */
 @keyframes slideBack { /* Closes slideout */
   to {height:100%; width:0}
   from {height:100%; width:75%}

From d2c9d0e7d72a101e9040d7d9990ca5e8dd9baf99 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Thu, 7 May 2020 11:36:37 -0500
Subject: [PATCH 046/223] Fixed bug where connecting message has bullet point

---
 src/app/App.vue                                     | 9 +++++----
 src/app/components/Connection/ConnectingMessage.vue | 1 +
 src/app/components/Panes/MessagePane.vue            | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 70fab6b8..896621a2 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -18,7 +18,7 @@
           :visibility="index === activeTab"
           @postMessage="postMessage($event, channel.name)"
         />
-        <ConnectingPopup/>
+        <ConnectingPopup />
         <ReportDialog ref="reportDialog"/>
       </div>
     </transition>
@@ -128,12 +128,13 @@
   .fade-enter-active,
   .fade-leave-active {
     transform-origin: top center;
-    transition: 1000ms;
+    transition: 200ms;
   }
 
   .fade-enter, .fade-leave-to
   {
-    transform: rotateX(90deg);
+    transform-origin: top center;
+    transform: scaleY(0);
     //Moves everything up without interfering with top bar.
   }
 
@@ -147,7 +148,7 @@
     width:calc(100% - 20px); //Account for border
     color: #c0dce7;
     background-color:#05224b;
-    list-style-type: none;
+    transform-origin: top center;
   }
   .minimizationTriangle { // Minimization button
     position:absolute;
diff --git a/src/app/components/Connection/ConnectingMessage.vue b/src/app/components/Connection/ConnectingMessage.vue
index 439d7b7f..c3c72e6c 100644
--- a/src/app/components/Connection/ConnectingMessage.vue
+++ b/src/app/components/Connection/ConnectingMessage.vue
@@ -2,6 +2,7 @@
   <li
     v-if="!connectionData.connected && !connectionData.firstConnection"
     id="chat-loading"
+    style="list-style-type: none"
   >
     <img
       src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 7b8d8951..02a0cfd7 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -7,7 +7,7 @@
         :message="message"
         :style="{fontSize:fontSize}"
       />
-      <ConnectingMessage />
+      <ConnectingMessage/>
     </ul>
     <template v-slot:footer>
       <ScalableInput

From 6a030bcc11e833025599f37282e2dd5780db8226 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Thu, 7 May 2020 12:18:26 -0500
Subject: [PATCH 047/223] Animation for send button

---
 src/app/components/SendButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index aa223773..0b7eff93 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -35,6 +35,6 @@
     transition: transform 0.5s;
   }
   .send-button:active {
-    transform:translate3d(5px,0,100px) rotateY(90deg);
+    transform:translateX(3px);
   }
 </style>

From 49862887a18b7286dce7ce9c574799b19074ba3c Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Thu, 7 May 2020 12:24:18 -0500
Subject: [PATCH 048/223] Bug fix animation

---
 src/app/components/Slideout/Slideout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 8b72d537..a924f35f 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -105,8 +105,8 @@
   animation: slideBack 0.25s;
 }
 @keyframes slide { /* Opens slideout */
-  from {height:100%; width: 0;}
-  to {height:100%; width:75%}
+  from { left:-75%}
+  to { left:0}
 }
 /* Height does need to be there for the slideout to work. Otherwise it doesn't animate */
 @keyframes slideBack { /* Closes slideout */

From 492d3e242171978df394646a3983707f151e88bc Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Thu, 7 May 2020 15:50:25 -0500
Subject: [PATCH 049/223] Changed favicon

---
 public/favicon.ico      | Bin 1150 -> 15406 bytes
 src/app/assets/logo.png | Bin 6849 -> 13892 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/public/favicon.ico b/public/favicon.ico
index c7b9a43c8cd16d0b434adaf513fcacb340809a11..a26a19079e9f552dd48acf26fcdfbde377645a63 100644
GIT binary patch
literal 15406
zcmeHO2~-rv)^49MYFy&NOjY*`47i)9iLwYThzPi$F-BtYM--zXE~ua^vcyq#5s-Zq
z5JVI;8kK!j7C{jeQ9&RINOz-xtZo73zm3uG5>WK<dwBn$&Z*NiwcNV*)~)L5``sak
zK15$)*f0W~vV_4W1ffI_gskkV-xG!tL@?BS{q>*i;|L;)M-UUB4-A13uj=9PUzKEw
z8#YOoG)($Xre)IW&1Ev`{e)Q!bK29;*VpeS7K=e+Z%<<*7~iwjTCt;|AA1pE$-mn5
z?gM2mcap@=H>$7DrN(KwdFTN_K&>}F$qw-|_mAcVpyJ^5ys~3D9StV+=;fp~eH~9@
z@~~Xh0fBY33je%VA78MJLs>2nDBm*+-wg>t_m8dr`*_~wg2B`#`WikHxQHKX`7I)=
zBG6z~9mN@^Acb;EYAaoV^Zi3d7Ws3g@sA`heITT^G3QZXU=q%<W%vSSCvOO&hvRp}
z@|LA7L<{I`_?F*!soVbKKL$gEl+&Xj<Tj=h8Q*ooTd#`oXeLj6%<0jZ{%f@GMR6R;
zbxy|lK5N^JeWOExFRM<uFuSN-bOfoxZpU*N>y6s>i^BC3PX?}@;Ssi0(W>3Je-tTy
zdIIVCz=E`-6<#;~YBc*7?fqxANS~@JJ-KamnB=W%_IlJ`&uB|^)nDzG9ubGy1;$v-
zJ^WWo*GsAPS`!lOG#01rpC6chKuf;sBmb>upUb}5KV9)zF#g|ad&m#Ym}DWVLFUe<
z-qfps?$Chjy@r)?WlbKU`%TljgWmhn5EV3d$`w8zFL$@e`hCZCM}O&@CI!*uh5}J;
z<1S%t<K!{LlK$O6x2rUGQ4a^pB-LM$Nvo$t8TCb?OAXhB+0VyzHXh!o!?^cqR8&-7
zcn<BXUsvm;Pt;n-{`w^0ocF3du}<3C<dSP`MJe^MghcY@z0sZ)H!u8dYx}d@zWKe&
z!r<Dtd4B1}(Ux;xz`Nv`j^~ldGH2?mhyux{?@jCj1_<11yk*=U9}M51Y!<4kU?e(J
z{hctp_8Ji-;pF^BqG*39d^gOLUly^NNPYMH<{tz&-RXdAYWD^ZgrqNjf9+_>zWR58
zL-k4OKy{$dy_%uCYnF`277xW4;zj&SyH&g^E>j5!ci(|~O<~{>R2;evmml-ymmOQ(
z0sT&^@K4Ma_**85)MTo$GV>HqV(#!ov@x~0QkoLiY^LmLOt541mng|Z8>d=Sz<r__
zW!b;Pmz|r@wSx)hw$Bb+bf}7796B1^k6gzuKfbHe$^O<rZlo2+HOwROJLVbIV$Na}
z+85@(g=N`R#IK4Vh}5>bB0qNf6r5;M5A$D?O0t`a51&)w=eio;YwmTpz(<0L4khB!
zuxM0%ECLq?!wtL(Nk`I`G-PwAwM;GfJ*`Sa>Gb8+PF7Yj0Er$3B3@Ms9{liojuML5
z;g1tc*^!4`1>_timfA?a5bUQ9qkQiTxWKO!^si1xUfF*aW^U_(c9l<}wlmG7KJ9>R
zc*>z{hf6ql_dOJA^uy;ewZk!=eT;@Mzj1V-?h;BgIgLJN<<MC6CHV~_p?1?vyo8fu
z;a>QHcPD5~SLc1*51GTgZwD>Gn;0E*C(r?3cbCB3Q-YJsO9`>~Q;eBB{!liTAjJQ|
zaYpAs|Cfn{#r@H6_8eAZo?~6+kkm~-1$^7DnO_v}?Q6PSeF`nArclOAGiAW+LuE$|
z@!jB7eC;5|!-dZ$=MTpuTZM+P=Qw&O-uP#nXxfa@tTqt(x&4MrcrbEkT+j%7(<=_-
zuM$=Sjp*vUZ~6fpYA1ai=C9^&zCVNa`;jf^cAzc)eDEkVj`74owv|7!O1G_l6zC(#
z{3K4ZYQ`Bh=_toB0$+74$2Yv5qMLpz-_UGV(9r>V>LgJIXer9JQkvXF$5NXZ38~98
zkjvNzJdZg5y1k0OU|O+E)ro~;V)_TJoHjA|$EkDdx6B$xrdaEv44Xup<Cu%Cx`v}0
zUei07qSI>9k6teDpz|nO`YL5cw@_P{bEGbvNG@j@Nlp3%smzq4$+VS$mY9E7Pw`af
zYK7;as}yS?KMm1U@bK4{?+5nL{+q1RxjJf~{6J=(%JIX^N<XJ|GsQxqih*$E^^sco
zXvpB%#XLe@(vKT=RA0p}a)WYF*w0D|3wKBHg4fQ{j#xLnI%1vD){f|QwNB{Ac#%G|
z9c5R!g|ud3I+7(-Pi?@-Z8NK*HqTf=IX*TNcvLq@N7jW#Zl1L#YLiNiSWJAd{8CPZ
zLnzNmQ_8V&FHigscf|K^rZb29W}@13#$@JfVfd3@WuogOqDzfs$IP@0PaDs^74;U|
z>WJR^)^YO1SgEDQSgS=&Ia@qU_IiWA^3}qhqAk=epEsZ5|GxA-q<^gSJjFyCjVj1_
zkb@KUY1~cNJMU$*cpi9JK2Az?SRk9`sJS=UK{F)TUc({9QL8G&Ni&%Hw){98{54Ci
zzkI*+gA31H+&_O>y6gOi_x+~+i_(XcqTv0Q?W27%+jsHKZ12V1A4cUr8<p>~czCYA
z_N**d6*x0`Q?CZPrU7oVf{T{WgWT&U0VVXNUJdkW;Qy@#z;8#&l{Fa3l{Z<--m9O`
znct>oDnQalRMfaruB6FMw(RLPx!)U)Q?%r>p2=&+T*=;O62qO@K;~BCJW*j|60blq
zxZ|EZvlje~6T$ZxEt}g=C(3KG5#-d51Rv;7B307nkLj6Qx8n-@l!A;pWl=_BnJBCN
zzRacivohHY$7HWG8p&lo5%u)_FeawBzc8-eR3@RW5&Xck=wf}WD82r=D6^qXCbJ<*
zF1r!6leW{Mk&)3r@CVC6{uh_`?Aas3)pa_cn;L{C8>h&et}79ptxdKF_gNh8v3!M(
z&!#DIsdZMO)Vdn!v_|8utO3Wfp`qa$-#h&Nl&k9|HajH)-`v}Ukx$B&2gj^Pb<(<)
zXsh`=+G=iwUP#DTnV7n>(lPbfV`4roCeSIf9W)36p12BwYOYy2+kSJ_Y|c~gp-WC|
zo>8~oL~pFjsV5%Nr|W1GFB#Oq&>m4G?On53=vh-S-o0dQ<VF>*Fg>M$kX7<7Q#@`6
z!4DrTJX)8@?U8pf3*W3GijN4<y|C&0io;W&{2yZ@@0=4lVAtv|!Eb*Ha>AE(cjm9z
z<{<x-!}X~`&&Liz{~AURT)T<$d9~5{)9*}lVAs660bfJR!Ff~?mI6M~Oz>~pcDoGv
zl72k3hl8bNJ{p3iuwWD5a~BtUO4?Pg2MmG{*jLj6$Lf56b4`iRwYm<lh(Li?{YZ4f
zc@Qt%Y5|$C*PfqY=ZA9~_TaqzbH>E{xnJQ7Mt1^SQBiOpz84}(mLFF|6~{7BMbzZ3
z=<uz5Kvz7yhZt~+)p#)zN2)WA@C>F7%QF@Di>ebymi>kr$N5;RXHeqmAj+mDU0_#p
zmU60IC-Ay6lAp9&1*Psz#A(*gar)j?oMqR7vz=OT?t$m%n%jAF%Tt|yGhhZT3@8C?
zLrfIM^vCxiWl`Dj6sfYP4~->wB@)E5@K--jAy+Zc<O=2)xtM7sHP}DM8O#gdzq!r#
zJF2P{QEVXR?}zx8PY4e<YhX>lMm`~vOcvlI(?Y-sTEHJ&jxX*#2|jaA@JXM+xh^dD
z&|C2h&l*(V%i_YIX0V?ETpBJ$Wyb<>#qsD74^9c+s@r!oVgp8&TF+c0SA*|fhj~dZ
zVbVwq+K8M<FGupU74Ux(k7ir3fPI0as-h_Bue+O6+zyhA+nETy{1%*Saak(Gdd>)s
zBSLIlq)3Kcn27S+=aJXli-3O#zU3>yg@JLXBy<}tJraWNA9Il^iI68=VU6$LvXf@e
zJ>JGRQyT$yS;I8p?-|Eo%bpBt+k0*M4{UZc%ZK=xP~iU=8p$@}p;en<ufD?BqK&n2
zoN*IQG<%E^EtPqS_r4|<v#EgLJQe)HlnC8G2YFueaK0CdZ~3>PqJRx;oN#-*6YR7T
zPCKl|=Aio>3=Nn?3;8o0z|$!hJR;jkNM01L!bxUZsMwveh+O@CBZZFzh^mSQ{#(%y
zHb?5S`)zSUIC}ej9JjLt$D15RTJeMUV;D!Q40zHCz>|z<3FSl=2x4M{_@>WEj(>h(
zkmGBNu|tO5vl5#z-&00lH=CJ<NS~cf<sOhixd)EG{;LC9eu@)JN>TK7Z4Ltk`!~cq
z<|*(`^9NSV<kkpqut*%gvl*~3b40L%kQ5t)$FnV@24E<9AcG}cBXuZ`LN~qL0hemw
z7aj8dKs>fX$ta6TL&}(zkXymVVIS~r`>BGi8t_$@SJ+vqr37S1A^<PqQ&r0lkA1=)
zT2+HStNaECayXtl=)V;wnRpRush^+$57%MLK7yFD7IG>53~ywDKTnSs4z?eLZ-f2Z
zJ>*76+OYKw`FY<;ayPvZFt1i>D_hLl_;4(*Bzys!Z_n{fZwZ_o5}aux!D*IPg;7QW
zLH|Dh23ZFf++*Hn%tCH14x5CSv}a&z_s9!Y6QzhpL+~&-gC{U9SdH09>CiGG3l1ux
z0-w9U|4Z1vE8dsKxAn&s%v{QZeoh$zPQ8&?!K(oL^WKqLAcF+wgA7-k|G-%``-Cc4
z1NkzHBSP#SXn57{Xb{`>&LN|BieP<m0LyE^DVA|mhShjN2lP7z?h-l$pN_ohHWA<O
zNP#tN#<v4<hFx>x!Z^DvN&O7ik1618hD<A^&t9XpSB^)&M=eFA;mP<;P#(VF?Tq4m
z`Jm4^cobU#7-%c(;nPBb!^j}PIRa<TYMgA&!hUJN7xxtLGi@CCm+Uv8To-qg=T?dH
zJzIePGXCuVjdw9FhWqrp`ux2eFw5N#tJq9!gnhS$xqyDG{1Kbo`jQ`<GzxuFI+>KO
zGQgAA8}JTj!Gfv^9`E7o_B4c9MgwuGxgPL;1!4)Fqb!>il<oKjtX&Jvb9+JNdu2kb
zq7G5)@$UOwd%~TTC4DIWdMV^wF`cxbCz7Ug7`20Kfp>s}S_3kyWNH9UzfEcZ?yAZZ
zV+FPWPX_#T49g&C_6IfCr~a$t$)J_;Izd0mZw~x%+A2?d`3W*f=A&@N-ZkiwT_E7G
zC(spVKXlFYe}?BCl<BrJN1XZz>09xwz>6+~c!M%(U*%)K{afIyZlny@5;*hj1OJV{
ze=|8B&Jb0&KPWNvcnXt?#<44Zo@qKHOjkiSR9CSG@Y|Oms}x@4pA@P?bmbjFbQE#h
z`OdvlyW#!x_azW`Js2nOqpt)1{@96`i}wNUX-PMbyO=O!z)qr8S58GME7#*?j1!tq
zyCGHDhMZ38l2d7sSWj<2<a*_89OfIoR;es}tzzKe)k<bzx=OBx*C^c%Tch+WTyMH}
zh~C%Tx<}i~09d&y#JAoTct7Ca17d`@dMIgGnNONMFn$x4%-tK{?BHS}2>D#Vu3z2j
zBMeoPA`NDgM(V4uM-7y}_xNey(9z-&zNTpcb$FfX)T0}wUyoR?TyuPb%KY|oc4t}O
z_uwnge-Yr_7L-f1G{hV%p{(h0cn>Up&1XmRarkf4R+a5hTW3Byv1Ml9Lc=3NDZ9sJ
z0;ifsLSOg}h<x&G_@<dlk8M(EJZ_*I@PCCxj`1k&4{NZU@}UbTS2~k&pl@R_<3WjO
zsgC%5U6%_n3TKRFIh;0{{qm&I%r(M;HB*FMHNQ)TK9NYDs+E9GCCkHl<yV05--DbI
zrSrvmpM$UGde@Va0r|3%up6^b=)@>-HuSDB9KL_fRCUi;(>Z_qW~RDbI*gqp9aUQ@
z6AN(wne`IzEnW)Pw^H%U&e_ZvquJ-%Vlv)E^dq)QAZ97nLhXkb3$@y4E47PZHac>$
z$#pxxr+8DYurX)Kjr-r7x13{l&P?rjw3({;M`W$bQ$Y*{6}v}0K3=T;G;Xg(*l%`A
zHH{)YW;=&iE{WMY-!|?S^(WvHx_M^z>@T`Z^dolU_GFy(+%J=CHFFYeHC`myXfTiq
zA(o;%!A9eG{9cWg1o1rgRIwVw9QNFlY^yFv-LK`4=BRZw#X++u#X+k8;xR5K+iTUO
z*lT7dJ8CUSvYUrEo9n4kNZ{TU@2mxXLs1`{;G{{VJIoq>@xX$(3(i`ZY0mSHUpz4X
z=mi%o>7L5}-}wSr24#6Hx{`5lktQcshTDQu8SV=fLBAfm2JK}?4N)7A?Xx)Ul8?4Q
zy7z)vS>B7%GQAe5w(rx^%U1#xYvlMW4$AS>j=18Zy@gwop3ZZ7{v>d3N_AT{EZ2XD
X6c^jnzOA?1tASn(^lIS0O#}Z67a?ph

literal 1150
zcmchVOGsN$5QZm2NTI$erQpKHrdQX(jn+pVxKN`Ng)RzW5+8_2Xb@Y)Dkd6tq9V8u
z3WAh^C@KZ1kA;tohzs}b3NC_*QmUXr$oP*rH(2mdT{z*(KX=aj=bX$9kqMvFRKj;Q
zwI&d~A);J>5-PDega~WT5us%#Dc(Y}C4WpP?+fS;FaZ*z_CFzgiW=w{I02=q_TUz(
z?=^H2uwoIK1n%|Ay21~QgjV1emYtWttJdz^L#=DjJ@Ex*9UPc*7<=rZo*_NAh4PxA
zqkso~Ioa1y$e+3kIkXi29YNLi&lW}vY6C}ut4{8ou(7w=$_=$v{yJ$h?y!&bJfq*(
zL_NQRF37$6e>%9erGV?p^lRFD?|5J_eupXaS;QluyrOmBT>PJhirMYb*<GPW1y7aE
zons}&9sZ*4{SBXZ)4`5-`(_;6T$j)8a`;{PI@prD#aqC^`S>i?(4Tf=j~?VvnUlY_
zDCVuuk3E&T9aP~Cr-0i-MaKUjf_|U!=R&t}_CfD=d${p~HH`BPaqb9aXT}UI$iGRg
z>0^GlZ`vM4?;$*LhfI(RG|XK4GF+@-W*W}YJT5&2N_ZyZuaM_Ry=%PWx>r0P(Rc?>
jRc4}SfGA>*agjwN{7E7DEm(*)%rSx{B0<6wBoglxJAy|R

diff --git a/src/app/assets/logo.png b/src/app/assets/logo.png
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..d6958cdd3bdede6a7d4a1363eaf01628e50f73b3 100644
GIT binary patch
literal 13892
zcmYLPbx<G8&%ZD34#nNw-QC^YwK$aG?heIWin|tfTHM{;3KVzv@yz?jyR)Cm+|5lU
zo7`oSY$BBvr4Zq8;Q#<Yl#v!!{iFf^0R{>HKutU<2A?;uPSQHA0058vA3#86HZ}mj
zDcOjLDJxq$x;eU9J30}|h=~z9xj0(de6;|8@2fd#R_baeSOO25x1w?p0YBs%RWV_R
zRYju%FcK+gNnlZABS;EXFje|cB_ts5{^Uo1$HfK2V5-m~M8PdX?~@e91s6p`jlS%7
z7uhX#J{(TGH!leuRo&z?PC@s=Af!sOsc-}!l#3FgZU_G!9NyVy6b^(VcLGpg8qG;u
z-^f6~qaQy%9ceFgHvsxR2M+`EDrEIC<A;ABpNeMag91W8y>5xzaxeiHfUsAbXbB)J
z2@1$br&I&-ApqksGt)glnE^1S@;{sd0&*TRyg`884-!mJej-4OZV@34Sn~l@Q<_l{
zfHpILVJSDr11vKD%raV*(m-7+&^w6&-vGcM0L&^8p)>%5H(>mSjO;rQk^x{yUTg7R
z(bb?F(SB+wqk+GToJS&14~D@RT1$(Oka|+)3mpch37AQyFk`=G1`cZ=JM#9;H~{1)
zVt%gn=I#3=QqANfXIu-C5yNQ@)CZ}l>E8RnRHc(J0PMK=&AihyHR1;FK?T^q7gAh6
zSR2CUyFWx*HXsW(1NkSbS~pJr=|-X;p>1X5V1IvEc2HE$WK_%d-KyWHSL^NTlOO-<
z!`*iGE_ooUL7)`G<97e}t^7~?sU+AC)Ahr6sn=Hck5_^@(m@&1Hf>srJry+PIPuJw
z8`htsk)la7Llm<g=DS<;FW`b(96+6|AjmtBq0GPx{9cX<Mcb`+_W=N|I~@DwsbRna
ztb=!^JU%Xk-lXy=fB;LGBxe9H6enj?A8i!+4Fdq;`GK@`B6zob*z~<n_<fM;eekcw
zoFSs*gZ-i?qHyK`_%6mYRY9WEVH0%(w8l*H!UXKSD%N4iPDqUX8o!VPoRFVQU~>DY
zI|E@MME<~_n~<zVfJ~#b$>LzXWQ0DF^hraYMUxYcL|~|p$|Z70v#3U?6KhBlTno5>
z@r3J3wkPua0a$}x!#br{egrnC2+Siii?x+;;f6>S!cUvKv1G<$<!4R1G~o)wa26a*
zS6U;l#tVx5X6`-4hGrZ5%FH-CAX?8&51VW@R!>@mP&tfSr&$Hw5qW1eRqp|T7AVmR
z%L(BjN^C+XBCRd2t+*^*MvPC+j=BoV1q&Xc(oaR2Tqf5<*^c@&h;7Qs60R*xPqv5_
zkIsbR9U(TzMUECJ#!A(e047sktUil2D>>_+N_IkDp2aSWOO`ycYHrs6&GUnvnC?&L
ze$M{DKHEOtKFPHnT#l)*bMd3vF16~Ytt`#~$^rWUltntLh(=MS>PA_CIx0uJu4r{Z
zi)yV(co{modnV6BFqVwm&+5XIIb7>6)(<wd$8PPY8!3c}Y13M>V<%F_X~*EV9tenG
zn8Cjztf+Cau%WT7a6GVU)8$KW=Av<at21-4oTVRSAZIvgXw$aP`d}uG!llTjP^RF~
zGO3qWlvHe1z-!!SjH$<$8>;!%NNTXD?UlpMr&elI<S3u1;i*}b^Oc2HSd}@d3l;n6
zyhTFk49E{Ci508l*BkA14im$h;WU1yC$U4U408|U7^JM9Sn>Hr+mZf8&=D<AQC`3!
z#wN?A)u?*&!%_%(FWvbu+f5Pnh`KcG#xH6U<C12V2Csx&zKz8~->xDxEmgZxx>BW5
z>a2^i=Dakgq)Vbh=OqwH<hLx9K9!VJ{3K+~k=lydMk!n=mVyB9T@7P}-A}xN4snkj
zhtiAm+-}2wTzSXRP0y~QXMA6#H}yCB=h8bV1Z}8B1ahb~gh_1vAr5CpegdZ7YgZ~_
z1_Q!kKTT3h(sn`;+h+KS79?XOkz;Iz_4mm4?1$}#izuNeNhswMP8BXPRTbJwXiE6x
z`Q(33j87C!EM{<I39u}&9%UV6EoE)B8tZ=7rEe)~`DG!~u&-O9bJ5c25UR_g^HW<x
z*Pv0dI;Waqv7@@96t%QXF<G%PchPE~?y6;^rMwlV?qC^et)|7k#n;5j^ov#NP|d(a
za#yl%yKn5905oFw3Q{G3E`gtGlM4o~ChunEWcG!S@6c`P36quf6w1^x+g=O$7|ozf
zj#}27l+_ojHrL>ri0DYUpfScYLB=e+;f+6C`?79#&IUVPvv)aJjamKYWoxw;oEJ71
z;p=(h?0Gb~I&7}f1AoM}RSsr^;PX<L?Y64?l*E(*t(uR>n9P_GwW^ouT7P;}JeXX5
z5xf_4$=eg$<LBCB-PAD}=jv_!(>kU!;FxO^x+UgM_F?|v^)UmK22g;kz#{`i0`<UN
z9=&`>dg6q5*DUTER?bCY^4ml(MdE|1gAV$tNv!|;O{gY$I7**PoU}m-RrWhxoQ5_z
zG>IPYL!b%`57i12igSw4#+_kF<M5bS7jxYbe-=*_-^{XNQR1m(kmaBitYEa|U*&3N
zZx<S7wA2}2(9Y48`6`Fc!$@1h>F~9C>-GF5d^cwoe$V?$I@2EmC(nY({@c(}ta3&)
zdfrrF`3ObsAOA#9Xv?r-D6Y{xDB|Ee`w9B3NSS6hXCjux^l1qducc`fypsMVc5--<
z53&8EKWGb~Do^N?N0i^l;?2d%{6=igD!|*t5}cHn;4E4}qLAETb!v5J`E9JqBDCRs
z$RWCwi7*9v#I7-+3Q~swu0^!uSY4NTi59xS%0kPsXCiWxC$%z{ZsL5rada(#EBi9<
z;~cFYZ6~SaXPBH81A+EoSCuVK1HZH98r&WxBwd&$R2BcPs1{oL1*OV!t+X1yE=n&2
zyFkOf(V)I&klh))2HZiY@7em&xq*^4lg?JN$#Yl^o*-sqR1L=3mo!ZOW$N|s2YBI*
zqdghxKbp!b2iwf2EN3lG4mTNc^^j64(hk#*91vGln-I4&o6hg<CDxeICaBjsf?LGe
zihB5eby}2;Oiu6#sTZr?sz0l9Ud(PZn=Cy#%v|7kciyxAU0BoWe0UQa>0Z+SX(%jM
zE?B(Cyfi)t)kIdDJf^<b8&oUWJD>jsp9Oz|CPQjjYMWmmm=#c0jbEfYlS2AU)cu}w
z>A`@=iKr2qJ-kciB<{I?@&LQ_K#0h@`Yp!0Y6p6b=o^6*0h6t0=5?lImRjbEo~d5D
z(zxKv;_0T>tJE41ayC1^j;HL6`iRZyNzh!f)%8?NPD+liALG-y@mgVv_mSD;mMya5
zWjl)7&aA{o^bubt-=zNaFSqN4wF7jmUs{>9yhiq?Zm0b3$#Y7-JF+`6Yufbf+Ah4h
zn!PO_PVjQMCO2-oJg=}m78i1P1U9;Eyc{2f9`3fVHvC+u-X_O7Ry?RKsymfBjc$d{
zMOMT%!WV?}-q)8e*ZpmKJ@Rj6)}<bxLW8H?6Yt`Y#USG|;>W@e!_IQK1$lUOg<RfF
zUQ5NM%%>=Gzq}W|kJWs^V)A=jI9r;WNuMc5yG~2)vG@7;cG`P}Q@b|YKTOy?@|}&v
z@K*EXyw79ZgW$4g3t4I3huEL`!}_WIPHnpMB^f6<`2zwx{pQt-jbZIG-Xu1YR#gB1
zFN)7NG#CJ$K0fIQ0Jt*)z^O3+@TLR67sn){AxQwBbCeMmQUAVLoXjH)u7V+PiPwY%
z(YLEKYfWaILM$rW2N6qb(}XrR2st<$N(13s$sQ3?77<mZZ9{>@7#k*UF)KYw!^voT
z$VFQ(O>)|pm_Cy(-uW-eKYF02^993l*k7_wC<O{-rgl#+uFmmfJm=&MFi-ZN-2bN-
z{z#G0f2G`&cmut1dz~G1zTm#+)|qiFDP6U)5lOSw4VfTc&~y-|@5>k03Fv)v1#0#F
zZLVLbXgEQ^*E!E$on(lsdD-hLb2^Iu7slz%CIWqfz`-b!3NN^IUQl1Rt&+x`x*K!@
z`V5zLZr(<*dC@Lx;>jBo|K*F#4*$e71uY+<nSZO`Um+f;LW}YE!SGznf{TVwx~mfr
z$!KYObVxTD&rsGu2@3F{DF0r3eBwMg*+(gZ7x?h6PR)UB`$|i?D4(N+N^9DSMGqE0
zze@u0YjtrUAGW9Y0+M@|-AhVsaM=~)T3M)s>*=WNJDYz<FS#GLBU!e9H5lm1OmO%<
zysICG-hN8>@nMRKdjR5;|LXZ~tJ!_ZzfeB_37?j;XUpJV{MRI1XkU%no_`YJ<K0OX
z8TjX@-2opqBI-f?*4L<b5_a^Y`jHnd^X~6J_vF7Z`FcaCa)S{=c9<)~LYL$eNv`qU
z6u83#J`i~EfiU*`!N&Y*Va(k~e-fys%F)T5=@%Mty*;D{6?Wu^gN^;pj3KH@4L$(R
zc=a)bUi|(+g$?D8jZJ!rL*Tt`#LW6?c5G#AZ2UOY+e>_PPEoWUWEHb4FU%tBa?d6?
zGBJhB{5k3@nc=(b)84nv-h=8d@&}(LlhHmJ-AQ!34#+~ZoQA=Y$@jdse)}R2X^y-*
zHu#%pJG_GtChWMtaH4ltb&@rWC+gs8$f&3!>PSib_P4aO1cQ=h!MWxU<nOhMRUyo#
zWn!{=eR*JdzYdW4c!&Jj7Jqv1smM=FHl?aatC?W@{;(234r1Tx_AX^FBJ`ndDqu3<
zfov9!fC-T}%nyPIIzJ?b8>~W@MF`d}=1w9Efhz=qcS(idVf`5dCZe^|Wu%mqiKQqY
zu$)3d?WzYoIrb*l{c_}U^pfL0$}i2Q#2Fp>Sal!%Yn5nMoH?llEmOsLuUX*!4B51?
zCmDR#vZ$#(PY&<p-1#;`KRtH<-U#+5x$wi9wqs-cW^v6}uj!PTVR|kyGP_0?S<VW+
zZ~8#rVKAO4(-j<ZzO7n_MDM>c0l;{kTBJzU#H^<uV4n92F=e~CC-q>`LNJO>73zp8
zM1SDnWXsEH0Pe;yKmn^&=vXRNzce(T5lXMui4S5$h6!0{Jz)H<Z(ohej<`d?nso|<
z8B&&>l-*~!R<0GD&b<2w%!2rY;O%Aw^0~@lD1=XDPBy>vaY;dNA;M}3j)Dzt52Drb
zRz0T$)pApCV9B`<LB<&r_qjeL0pji5QPM67zaq*`z9=2YT=Q!B0f4sTv_6{^6!0e}
zXhp;rIwgH8!$d(gV70`G#>1V}7K8J0iyDRA19q4dZt!+$!NIXQ!EGmHn{Pw7HGanX
zJI*-~#7&PU2DVYT=qt9&BMz-ERK`PXj4aw-Qp=(vPV5%?$>?D!t4tcQbbFJMs#qfV
zl%b53ha7JXRV2<LbaD{L{AVaQRu*J9?<Uk(EiyBp-LNDye0H~+yd^=_YQXL@hPl9w
zm|60ZvRC&e_!-WCB7Sr|xRLDs)jnlwDKy?De92N4?6AMh{gX*X=vH<{+&^vI&J#&N
zUwg~1c`)Yt^2(&%A8Yi|TCWsSr>3j41OINkN()jPa3|wMGrmy1x8RyYJJ_%tuE&i0
zll15l-AJu_gmx7PwZNdFPg<!-k`OBlO_Vn)Y#5AAEU3)1k5bf*8KwY-Tg{z<hr%;=
z;?BPDn#sE}HGs8{-W^JFoqTu@^xW#)df>m*@$@lX5vVH!=(+H8RgtyBaGt!Bc<d2#
zc0R}<N*um(wn{9|BTCh@!KbG499XFaX?CvtE^)|j-4yG(%N^0X2#kF<<a7rw#pRqW
zABH<!GZH!cyMApE$io-zn3Y#RCotr5Cl9M+<knD*H-q@1=wt}&5|#IT?-;!jqy3GC
zxume0^BpOJnMsE^oIbsMCgpVMH+b`CC5!5294bA6`9naUJ4fD=Ru?Ln-Td`tn|sW-
zPSMDG>|v)E3UYbwqsS04-Bq>5h+?&>rG4`FsxA!-U?t=eD8FG%d*gnSx+B)taBBAT
z6w2@K^2HQ<fGRp!x>FEpAf&Z729y~DR>IfjRd86{1)>^KH7?Q;hhOp=Wv^{^(9PK?
zaBI(w`WyP(3|n|->PUlR+r=uq40+Si?~-I~Mkw^cWw0nm@jd$jA18`lURq{5ftTc#
z!w>;;eMS_5&sl?>79bq}J7=rarRgkb@caw8g8-Grm_HmCc)y`~R$tV>c*KRjs<Lke
zF@R*5zZbtw+)!Eo`G>$cPcS^P+^+W)fmtBf$(CLtbj6$1WItc(N7P#MYo^|A`|m+=
zfa%B`iCjx*BA?X;e~vAp_;=OWP5KNtKwU^l9rC@azm}hr^oc+mEB^_@@5yB5Mzbv+
zt2Q4w7t?U(hrZ0-PaN)65HJQ&tUJ7I3PR`yYdSi(<y;k0#qI^@h1>6y*jF~PGl}!&
zBBHm|PEF_iL}c0eFLwTBBw_~muwR4?1se-jCg{+mVaM2N2eA8fO=7N-z5>(Vc?$?S
zavS@@{S#+>Zug?mw5m}P@yZLcJp$LO+YV~klU~@9{L#oi7^QL1+27+v_o`{*drGel
z9yA=*$f*gELI}@%CMe1dMG{9uWz+Uq+kLbNNbo4NxCX87vRFv@6cl}2rlg~_#IqLR
zZMCVax6u33>IZ$lN}F27n5%wBfD_~KXe|ukD|Nj?)^50G6LfrhOUTJyIlSyNLb&*)
zG#yP5lsX7*uJl(;*@p`*>QeTrX;D=>bK_4p6T{Uyrxzo)19KMtck6{jCa%ANE_dN*
zEslg8IwlqLcW5vWD4!E9^jiJ*H?Wnu*suEywL}vX@-J*3OU!JCM@L_fjct2J)P;Yx
zT+gVk?WtTgz$dT$g`g#0VnC&YR~@zsJBjlS_f8eXspYr1?}7No)M1IYHt#-s^)V3c
z8^GNd*nDIdK6J5IuF=7ekv|<9G%#BSnhPphj7!;x>2F7xNl<{t`C*KfInBUAgQ2X&
z0m5y!Wh$uFWT9RTPN7hcn3Ykl)J5YPc*vE7zn2c+p1f;Bepq!sj)Gx=WfGW8^r`lq
z>N@hDy20Pr`oM7&bQ-&f)boQiTmsXFt!?`{*;rJ4<;}M`n{Cy1-*OyuUOh90a~7r#
zlH?B@SMnhfgfSyF={XV2w|331w{{Jf>*DN{Xbvxu<lo_dLZhzW8JFM)zqwDFaQXW&
zMBk44&{>ju^0TQw7Wx{l63NA6K}2yFebbyDRc;tvaNsWqS#BL3_#qrNF7~=hzNzAo
zLNWyWV%I0HaNa6dtj@OXh<ARwwhoKUs8KB<U6rTR*}Qf`I?r_z1WNo*k<9s3c)cgi
z7|a+0TIO`B>|Gl)FU_kLM^+^l+%xJotcN_9l?9k!0Le5|4n<tbO}-3qRXNFEC8h`*
zaM(Nw(W`X0{Bt+f04#Tlkog9fay!xx^7dvp_d()$Y-zVlM}Ov6n3#+GRQ4_QQ0jU#
zqo1fsz1Y&*UNE37$WC$y!l&5H)n{ctTUEBy%LANv4##x;pVhfdoTBJ*N{MDeG@0II
zl<dAbY^9TYEqf-ob|8G|Le(2SowdK_)v^}M`qE%t<)hE&v}a@Li)qwVLREE!Rds?&
zCSB9?5ObyQi#L#G4-o*+B={j_`?g`qDrQpVvYJGh+fp1^Dro!7%!%4~5ZYug9N(Tv
zP_`&Bi;*_q`8#=uAS#Kwd&vAXOu3Rxv8K%r%is|NMeBFQdT~0Sh$fiMdp`|g3?E&w
z`O;AK+&fkEg^;QF@@kfk$>JU@v(-l-{IYEO)GWwO7gFe^WxL%2;w2v5uSJbL?u0R4
zqbzoSa?*)<f|sD&OsX#M&EJ0e_-u{)-|wUEX|s$no?5DKY(XHNrw{aYBLa*~j&O)t
zL>Q>;24X!J1R`)fR>o_=2c<qfr3h4LQym?h%@oIA1SX2P$IKs+4EHZ}+kqnDFH-}X
z{)ESDGA_mgs5c}j4;F$+i&4hHs}4l>|14f4xY%$RX7Sg!*Q%5~PxWREoO{-l{qpqR
z#>y=ThAa4GzM}p)+CqQr?_u0XEUT@(>?8#>HCOm9ueIvJ<vrwpKeN3&nT)um;UMw<
z)s<7%g0mD7km3b|XV3k3Wa|7{ndvOCXsSNsW5IeyYcmpNR9Tp9N%9?LO*86iKg92V
zUNaAwQz2-hu=s%Y8<_WR4p4{|5Ul-{MyHolAEf%PENbt|YQJJ-bwWd5KxGh`#!I>G
z?Xw78^ezC!&L3$9kZ(O2WWe=_%fNF+QUyHuTZy#lfRD~+VnNr>xDmt_ihd-hn~qy+
z(v4t&a9Pexe*IbWb`mBLR#3<dSSu4Zz=XB;U0T<u>aW@^gUg?{W3kARlqR)gu<GcZ
zroHe|Ht}uge@5tg=7KnTfP*5-M8cDd<i44qYT^3usQ$%?%(n;$arv)EohLu}I!Q6g
zi0p0&)yuP@e%@c7nT;O@zV~MLB`8Y}rL$D--)6$LmKQ|NEZKEUBw#~gIE_E*kYn5n
zlKe}mXO;{jht^I$Lzng5XvlC;t<LA=t9ViE^6l2a1q)nwLtkc!pE@!youf^5OQmnY
z5w_+je0#z^2uGTt(^u%D!ltJ<<Ytq`W`rOKt3y5+?a{61rNR$^#(&yuRB)r9(?q9D
zih-$IE$KR!{Hnla;dU|IZ<ZUcIU)9&3fB6MPy_R#)VVd6$J={+sDM>Rx!)yVjc~Qs
zphmRXT|b$FISPxv5GN?Q&aEe_oPNaLAHw@L*BSIv4PHkO|LUrn7|HT=afFXZrmGVc
zJW-wDZ}F&{G4UF17%ZQ@ybo%WTJMgku}?}ya45A^&A0qzl%epDeZESw_$%dr<3+Be
zYT5jn?vIolJKM4tl07n0MPtN#UY$LXo1yeR0-oNYb()=p6qSV7=gisfZ}djm(^iu(
zOc(bG%abe{H;*~Dg@*+>g+FT1fci(0Z1nicv;UVHaHd;GDGlJI(Ep2%p9!)G=g#<+
zi|1vR(DC=Dvv~G<g0X|{MSV)V1OY1fmE3<3>n%!^a$VX)=%DA#$%!*NrJe)jdvKG{
zTpY?Zt^xBbRLV8qof)H-A`0OT*tGD5vH?y8`Id5$!mlnl=Puq(IZbwq!ixe0#1@G!
zU*of;?tf(nhQGpkxIsI@fND}dIQ?X`tY3dHHh3K^;68-iLpo%jJjw^0b-u;tRL0v^
zw(s^-GE7laqj$*P3gGE_S3IVpEC-hm)S-QWIX5m!EOB>>S%n;o8pahPiJ2WPQC^*)
zJV_7m#ps~Hplxc7u<g~w{eo@uGYWML1p$}KxM!?sxP)ld`t@Rk=#p&eiJBaes<>@7
zh5qG9Aa9H3A=|Zf>M~{tI)*9G85jm(LmT4<1h&+XDHED07xYsSjHXBKY@VIjfW%=@
zBs}OdMuaiQMRqFv9x~60b-+Z?mz~F|G=cxF?3f%0lweedfciXh?b87>FmCXXBxn8k
z&Pnobu&7TONk=4)YD20d!SMEKzr~dOuYO%ip$LDpOmFR?Qg1DnsT#$uw4I|PG79&W
zCJBm$g}bDG8?(~rFS&wS5~aR6MtfbRAmX{0HSYWU8BZch8nk}5tyM1jP9to04!a6d
zRG~)t<;g0McjR<-$q}Boifd#cRDsQj0o~bhO^W+nhvuTae|<UQv#A;ZnF6_lN-(u8
z%*M^qJqsjYQy9t)qJ{e#H-!k+yQ5XwOys#HCG~z@T4eBU-=Q@Toj}R@?5=yh4A#r+
zSYRUpQ1kmr2LDm3KBiPQ3_zNBEh2gxD2J}OKhq>-_FiFYCPNawKy{RI2u^cB_M-9V
zvC@W=ZM^(WNz4vX!B}oQ47UOD9c&96zz$#wvxu)DRPrUh)k)7uVgW_UtiX+swJ3M1
z>9Isoab(cRdG+_a(sNQJlnt;SRL8~<F)8rau7kiIfm4n%x8U3``kVC(3u1B*@zQaI
z(2wxWb^SaR$o9uHrEt*pd`H8bISf<#osPSN)_x&{o<Xq=Rsy~Zd^$3aOQA!DcvtmD
z0zpoj*Nu+ZH=r(cro0{>J$ytdFKLV5DFVkkurmX>^Z8%U__1pcFCey=6IloY2Ogrs
zWnZ5<(|R#sq1eTj1q#UE;?HeuGMe8#aGLxLP7DULg?Huv33})52fKu<0QE{vIeZG#
z-EX*ZAyw&|$^=|h=`QUPWvko8lg{^WyE%0XnOO*N6)^>KwgqucHHBZ*U6kvR96Owa
zg-$rDOr2ND?)9jUy*JTc(S&gWm|7?0fNM@Gm^)46axQOaL~j`3=r^_jRWM?=vZImW
zT!t55JN9=?bVMN**KTJUxh+F!Y3X2jS5}Qjk^J6`ZD=rx6L>^03N#4}FwXe3d^&hS
z@gi;D^K8>z<*VZwDJ47V(wvdWbNIeqywvh1s&E4rYDb#wwi4`!)?bEbySvedwskTY
zzNcE4<sPi0Q{~Eu5gXESXVkWW!-(`Eib9A(-r$yK#Zvr|YAO8P%@A$&lB+*{>j}R0
zFpr1|XeTBO)Tf#2-g#sIP05C^t23QSC5Qy90=F#=3S=h`rFS#mbUkG)MvdmZEW$HY
zzm-E;#Am7-9yy@AQecrf>BEh0bXb7he!~$Dz7IV1c_e7_-3Nev&g3a-ds`Hs<=aT)
z#EZr1W3D{%huBA;Ec6sMmWj;3h8ooCRV<%(Wsf~m(ljg{4PP8!OY~N{uJR3V851z+
zc%s8|^%HyaQ9|9xCEQLIwDZ3yQK5NfWWs(Qcs1;~{k8(%h076wP~92Qc<|-wj{%$K
z-#8q8w-?B4P#qc>6vX@E#kAK__Af}3)K!Hol+6XTkTY%Me>zOSV->V^o0NyobvS>R
zAnji^TZKmGK7u>}C$iKq;&{Ni8MI({L4i_NZUYY7VxV$sLdaS&!9+ikEAtxVyF~qL
zJ9c%6M$DS`C2`34aDMpF>6I#fN&#1XlL7$iUV`zn5j=gf)2W~UGYO2iyO~Z{aV6y0
zV81P&=xO6_zin2BP+>t6xV{nnbckNqd^iHz`NF@=nM?LQN)FU?K-Ch+5FCh}+PC2Y
z?pOHZrJzBzLd-3FJuE*#icl_KPOQho%*xFgz+23@U5yLav@LqS=(`qZQjjhc?$b(o
zQP<@SQ@QjbA1}qs`R*BJX!=fIsrTM}PCIghVrDT_6B2T>J7<`5^*ZkYle=jyEr%|X
znMcm|(+lg2=2Y~$(mjcsjw`>${yb*W>s0uH$H)r6p%e^#h6UgHLxvEik2u`}UDnxC
zl(=@?FIO+uG-({*?Fj&4|8X{_1~;PffktvX8s}lafj=wl3t%BOX+WAF9PSl6%Y<Kk
zGzPlE&xlb-Jm5Yc%lq;7O3%Ny^<e}G9mwx2gi;w=PmkcHBtF)u@Ce*YU{pw#U({X;
zZ#avbEI5K3;KRU#xnF@;sBpzpJ)$l)tV-Y&qfC!MTyuBXN$z_#3IFOq+(}Atlx3J?
zFj}H7Vly(t|FA!Mc0bxY@nVikoMx@m>8R`)a8HH&r>Xhuk)T8g8#s7qbL-*%c<ktp
zdClvCMVN5)jDoq}WBLMq{m@N1_f|X7Bw0Gvv?gjLgb!2pk&(v+r~oz91}=Xq8v#I;
zHBF_ZY+TkA8ma(*>d8JxJ^WbPm%)$mJl^gy<o%wv#7n5>K@p!G&g^>+{zggzJTM%&
zKpn5Sg0V)IoXMT6+N_VGW{zI>1YBEjl<-%w9zdqh(4^4RR>*rsvmFpj{&@JMw^=*4
zi!|I78C=;pNRAa23_=57cP`uwPaPHmwY_<iYH|l~o>><WC23#^!icR}b8Ds2vw8;R
zB#oU@nBWl1@b%9XdIOos17xHd;X=|wP+aQ}@DZHqoZb`X80@q)#>}o(vT^W8zb(;E
zUR3Q|tTEwF@3n$C**^<&JyEe?wYBe0E%ZfIj)`SB6OX&?1Senqfudp>E1}#<RZuW|
zuFsQ!VGVac9B6w`IQmzXn960p$%GCv0Zt&*JYCeag&!Q190Lad=rQ>?%Q-ejpF*?Y
zyR74&Jcr^-#>eC_-<#hyl=TR%%or`%GpyNG^n%eZUlf+~_!w`UTa0Ou<1#6F$wM;0
zjgiC|?R~y=t83sSRM3%VXce07LI~(92tyzNNaI3@R&TFs{A|xY0o}uW_z0@*7Qz*|
zFs_>FTDZg~d2BWavxn*6G9`9g^*0w|rmF4~#k3n>#TBvw<~#`j5X{h=zB4a=gcc6O
ztLqWKw(g_K{B+IboK<O9p53ny4Q{1KO>U*D%ebjn!c`82aq>emq_B$in&tG*?;s#V
zlN+EUakf61pJcFlBfpvVga;45mp=;$fp8<5;ay+L`?hN1Yqp*NOtQbEw=^~VxMgMF
z0~WO0CG1(YpkddvAzN5r1xvuuJq+E5d4G7XjwHm!##SMVT)*9&E%i7ik%pj9bg7Ry
zg4&sujbY#^Ng$!+L`<EJ#=*yRT=V~y7-<4XJv`OuXu8BK*zz+8H~sQ|JVh)AA(-%h
za6X^&1noYaJ-`g9IR15PDN==fG!bTj7yPqICC|%+ZXVaCrxHIwv29#l^z!BjaC`OU
zNexBj?D(Do>Fix>A&#W(O=C*N(n{H@IM2GkKMR)|+NotD$A4jBMUh<ki_F}*zqx@u
zAO@Tnsh1m|x_K1xULxF3Pr2yvwaS$Jnb2D`BuFKjJj1ugKM&Ct6p@{;td70L;ku9*
zO?gbv2hADuMVz=)H8+ZZmsabl<QijXys0J>d?1K&J2@?OkGsf_!iI^*%KMTQ7Sqze
zX7cHR=xE>hx{Mh{G}E!V%Q}l);nDBK``p#9$8U;Ac~^;AhXx|G3L+pW1yF840~BYv
z>1-1(T@(yDwpiTH-xuj^lmE>(ziey`z0gPmxSFdOu3KeY?{@D)`Zoh85a*{qv8HQe
zua!KVi4;9e^0Z|^64qs9Aa!+NiP*1M8VW5F72oW$G#DJRG|pEzD_4VHhbp&_E;|m|
zJVMccC}aRPR7o`Q$Xj2b%vpmfggfmA5e1M<riQtYLSCQQ>BXez=N0dNJ?A|*qI79f
z;pwG>fH_nv6>xaIc@|6o=o4!;(jJ%TU{=-YU}CT>6{mnqW=8{Xgo`{?z0teL^I|8h
zcQr8=N@;BcY#&;={-*QgzS>-TzkIr0Vf>2J)o7fY+L}dGZT+C6I}?|z*|b-Da2^r0
zT5$99sO(y%w9t)|UpP$3xE9Mhp;2uJe%#txnVWN?Z+^u8Wrb(UVufdl!tl=rmjq%!
z7On@6gY7z|m_}?l>_QHumGsSz@~D=^IX3}XZ2a7-^!IgX8x%Ltax5Yr->rdzX7V5g
zE{_C0=1&mjP=no$`2Qi%xuCFpJ_KzRNGf5O4Ma(=v+gK@2)J3Mq~9bIlW;aq_y<tV
z!_Zb(v}&8JoL8cHyx8sn!0(T*uJ|8W3j9~02K+NNUzFTd2s(x`jlBoVtv(S1`*Wz*
zsZ1gP$)u07;FH~S2&7|6g$!7sIPG|A6I0vD=KKCcx#q=k+zx@jxkee`0Mh5S&k-m1
zSA^)DfKSoK<TrZGJpc$BpHvfa6fBn8cx932gHZtH>9=~73SNt}(o@=yCp4AB)lHc_
zS=|QZ6XR>?$|S$OM(w1wJwD5UV~d4*sYA|}zc7~sd8wP#tHqNV<A?4Mt?7b*`>O2K
zuul<{g~&0mAFL}ojKGC;?e664s;RrIC8nuCU;qjb0+gX7<9hzUeN1n9yj{M3SHa^d
zRrvEQDO1_S%atRHlVfB9d(6oT3ws_rbM6NCiS8OLq1OWu(6mT<yq>g*G<~sa4*+~0
z)<1wCbd*(9ac`LFS+Mu2EzEz5r>n+<RIp}NACoAt|FFH1nqt4JZ#}U<aFpQo2C&F)
zwdW}RHp5jP!91-+C1(3*{)a5i@H(K9=r3+2vVSBY_8MfJGntXHzf>o4^H|dO7O1R}
z)tC)YRt6PUT@YQ=R{&oG;a#T~YeJ3)1;G(U5@WWpZS*a%PpyL#0L(1ADJx(ll-bq>
zLvTGGp4Qf6IRK3A#^eW?s~Bk@zhB2OZ}aKA=evqZu#Ru1{rH=n)2(9*w#z+os;s?`
zHt9+@V_Z@}ywpfSn+mJ>J!+}NVIn6GaQec@Bl)p*m@Y^^YYAG7Dw+&kHv%Of`F^hZ
z<_TU<X8(+BHe|T+n%ZC1Q>|tX|C)(gq&o$De<Yh&X&=H9%tIFNay-vr<S1a@zrBh&
zt?l+e*WBu0(HAf?^Sz6S<+(i2oeEpE6Tkyo^5P_>wUvr`)~9Nblt4V!<C?gBZ@0Pf
zg9rR9=V9}=jzW#0Filk(F@G*B)-{ddCZy`9=q5>2!j)5_q!JyzU4wU0Z%svC`*u=y
zJZXCJhF=@tk9s&!e?-aU_LN4;+PnYZIxglfq8TNl8CAqhs2#O{TWxj7{N=d8E=H7R
z%A#1tsiBgkE`b=|ZY2=cex!l#-rAz9qNkz)InKQ^S0s&(Ug6r~@1^qhl}!=!I$j2k
zLa!rl+k(MizJ<}~ApGxVs-l)bf?vz!5;{Oa{PCmk)eP4xO-(F)Ys;n8%71J_T%k;n
zqX0@nj496nbFR%mCfrLRGQaRU(pRTsaJ=<YaJ&mxk;E081>m*HI@_Q5^uS6A_A(aD
z&*8_vo5Bzy6pB~V$bX1vJ9rdeFa`9JeRHn2T!F-I={P8_<C2L6wh;Y&u@}>Qu?|ap
zv4k#8YD9K72rf>akk-2o&a!GEHxgTyv&-|zdQR&U8;HGB)xRekI=Hlp(X6~z^Em~E
z7NBVaT_d0}1@rIhc)JZMw%|R`BK}DdDayG9kgx+F_y_0=C&xb_Yn12?9rC|&+5_GQ
zKOc-is5c$U8(fVqjgz+Av&9WB*ZHr*DmAJ7?g!4bF^YeEN0tDrB_Ozf<<H_w5aegy
zEkOMGHDcG5NY&?ks#MZM(+x;Cyx|m>|FYUeLTtRlITGTnfYr8ipzhqvBOiKaq}=y`
zgK7B0elG1m6zvL~{>QhMemz`1+2aop#dyAGIwB5b_M~@iYjpe3Wl01;0MnKOe^?MP
z_NoH9>H3E{^yNd8Z_!VF;tdR#MeoFs#_}#i1sErpc-pi$N*&J&<EjnVTYe_*4i8``
zQ4&vA)+TqM_+5xaO%Pyc5wVAPT$mk_&@O{W47VL2m$yx}uwf71BY6qeWXuA#r;cRa
zq!@s0eQr%NS8pE#vYSer3=amf_*l~rKwFuNF~;oT5)9ym5&rwLXSU=W1(bQ)i9o)_
z0`Yg9mxiNcV^!iUVmh&SS8ye(Pdw)jvBe_c4U=d1@L<<Tj<}E+>M=Y7?JW&ByA`zi
zSx)#$-5f`EKZ<SB<{(#`CzjC^99FQaWW!^&opz%KMB_XkP9XhhHv;o~&np)$wF5x>
z>*mle!16+<So%7P0hN{<!^uDA;8wJFo>!^y$s7!!BZAP<S-H<n9=iNl)EM)rD8Pfy
zowyj3)a+^y%Xp|yTK8FREK)a4QxWM-g1c^RyBq!rZRh!DD=AzmJz0af=qvgr0SlbK
z`feu+-S#9tt<NJ(m6%LH!;mq5^%VX>v;5gm3@2IPb4Me((E!^fp7Zx*;I+yHyTJsb
z01QkU1p0*y#+(pxQ2zPHx=>GTBifu6RHmZ?q@Kcueg|`GTB6*SKrd4YDP+YBK1rcB
zqgCIhd1QDW&giZD4FK#e*nfu#^P#+P{95)x*OVMZoN|8{{{_)Gu+HkTVOyGQ5rsLi
z{4ya1m4zTgc^9&Eoo#6a8F}$b`PL*n1}az45T|=kRkZ1vv-uDIrSdMIa6F!h1uF;v
zOXX-ioEVD7h~Ra8_BVpM;onMBE4TTObjjrb)^U)+@WWnWF6+?%DAd+@^NASVtFNTT
zyEPznZMFP|))7L%Qs6qyIJb=q=R_f(iwm^*DK&pa!1jnC%splPPcBeRNfwUhz2@O~
z64ms#W2aLtMNAfSz_WQ}alIn+kss6Beli(4iCZ15H!w6O?+yDhR<gl^*YsUT+YQ*(
zlCdY3`VKz}EjHJd&d=}=U^SzSh3aTL@o6(%KQdPVj>tAmCCl7Hy=ys&y0Nm16&q~g
zqGR^^6NcMMBhH5_O}*>KK7RkSdf}pvu}o(acComdW{d#vSQTKD*xljZdiZ=`dWox&
zO@a-!J>#kf%0mpf<%l$nR4c99pH^3vr!@WZlkS#RblN{cB`m}!b5kVO2OpMRuVaD~
z6<LlZx#oYSaF2fxZ7J|!HI=R@TriD~5g0>2iGr((uBRgb#>A1mfYTMSB&?8H@~#i3
z_}Lv6+ofgCWz;Ky<V;LZ8%I+5>5MDIqpB9-NUJlo(vEU>2K*R0PY-`!W!i7oARhs$
zKSkwwgc4c%s7+$snT4;e3bygbu3`L;#`r*X)6tk(m)Y-(oCg*IvOz2;Yhx8=aF{jo
z#5G#IUmrhU9<s$BQ<A>DvvAoS5k*0PfLtE&vn-+fh<v)u{XFR2b|ve_6s7XD|2)rI
z_VbdzqVs@BR8~I*mlU<bNpXF(!F*5i*;*cPZewLo+m~XPR?UXvRk|xj?$`R0olY8e
zjH<hnJL4bRlODzx&;h)w6ZGu&7RNuRG`Sid*^)B|09-gH6*vGzuQR;xSK2V{W?{8b
zx5Ch{M_Jvi04=?LUc1)cB8AHPIj3u77$B2*U@ihutvl8_k10Qo10WW6^DO=)nC${C
z{MGIYqJNe!_fcA?YppcNB$LjsJJy*{o;|DYVCjO=V0FsF^tb*o=W8d+r?`}Y21S)v
zrhPa)I!tK33EhT$$iQ9M6mH$+WSIz)>|Xj>!1s&p?8K8amY1IQgtm(Yma*DOgeck;
zbKW*$kTEcTrL%9C#;|^A(ce4*fpU6#1|Q@bKwM1pJ`V!Hzh$H1T84aMNhFjxnsrF5
zJ;!=-YW-v85v(zHreivEAxZa*soC^_^^>%kKETm^t8EI47qsA*C$6Mqof?f?{YunJ
z?C_&CK<W=<*}DY<NWYOFhTn&S4B2o<A6b87Fhj^}_f5zmb^HPX6qM^f$>ino+lkUr
zGNup^Mj~z*v0wkTGIsvMVBNtW{+J=d>2f4wZ3@OC0+n$vdtGXL;4P)uIS)I!^g^<-
ztz%|&X2V*7nylKGlry%1NHuz2kJ2=lb=J#mg5vw_iX1|R-BT=m_gAnRdUuuvapV1w
zs~8jon8}}fOwB0yNI>?dlQ+MRmORuSi1>8AOMLL~U2lg}@`L+NkOA8t^gYb`b~#~j
z<mx{FZuB!lo9a;3h(K6;oXJ>p^m)V_A_}o1iIHjl_#~3}lP~_0k)Ko&Ha#NkhZz5!
z2Y!7TW8d;v8b<bHBv)O8BR)K1cWz|#FzZ$1S^6(y1au;ziPb}m#<_1uB*sd#$zZ~B
zm3eCVAEEUq5Yi)bq1`eB$8OTi(O`g779(l|tZpRZY!S^5)XM}Om9Ye#na>z6aqhKw
zY5ggRd-py~;;7b8c7iaB|9kPubuTLXk6<pE+oD=wpMjrou2=7u9YI5vT|p}#;tVuW
z9SLz55Wfe4kbq6uJ32^ydk!NriG-k2%#z3k3c%)j@gP_dc;rphK(c12#NVdF<L=es
z{8t#KGN<RX&+ad~z0SHP%|;U*7PAB}_wfic=3S9tJ-kLlKIl*W^)Q<Jb4$d^Ix+dj
zfb;OxeW4t-@J<d$a6yq~oyr38vqJ#jGoK;Jgwo(vwbclwBUbAkV=pWGHvU%oQ_PnK
zf+Iu7V6rkBMtNV893U1kCB=!Gv%Dzj!z2kFfHp$NxVEqerpy029Uwh?wk{bXVO9qb
z08a+_osG_y8hWc<2%&b1<tVJBA$p9VL<Br&m|7WRk%Bqlttn68o!8C)223}){*sng
z&SQjvMM3AG>l7+2^z~?8{r;rc0}6PG`#?%`*_Fi#d}eguz5l)QYsAm{tp!@LW7EeP
z;c4%0y?KWR{tAl+|7Q+(00|t!sz(Y0(n6qL;Y10e|AN|B#^L=<G<44(Q2Nmv80>fk
zhx9J-g@n?22J=){3BEh`p7t-Sx`|R9ocF!D$<!w8U(ZT7@68%f=0K*#e`J)_IP5ja
z2)Ik0i~ato^G1hJw^z$2{Lq@Uh8sOVLX!xG0U<Tj<~RuD#1$1lhZV(f)`&YHPbuOP
zn2xVH2L3I)XgH|m)>k%9_Ud^WP|Xm?yG_Wd@>C?N$HgR!CZcK`{E<d^F2IBYx_QlA
zecY$9UQQDb`@~<B6~_})kQ1V%VPrM40q*z23Hj0d;2*&m>Ae~}q@uJrsH!IsD9nKb
zO@WHrkNzw66dqql04PJ8$kNrG=!g|&qF>T#N0bK;(mEq6L;Nre=;)E?=uNrD4Q4KV
z55&M$F!w7uH&aU}8HI<x9KgL*JVjf9B=reB+At!@c6s~526cTeZa2ZMEma6=9aw;Z
t4wP?B0sQ#?5{0ZLnD9t9{L2Rj5IF1#Ze}WD|7=tQWF!>DYebEM{s*5vKK1|r

literal 6849
zcmaKRcUV(fvo}bjDT-7nLI_nlK}sT_69H+`qzVWDA|yaU?}j417wLi^B1KB1SLsC&
zL0ag7$U(XW5YR7p&Ux?s<Na=)C)s<=p5LrlQ`Vj}i8j!?Lr2R_OGZXUr=_WGNV*Q3
zf2k=+zm;ZH`J@Y*r-qrQk(;BZj~xa<rsClC5CPOe**PH$5q1uK9)k!4GBOHYq_LT&
znXV4h-VG&gcg`d3i*hHS$;cFxeBJHrT@aqYhX^Mm8V1^F=>P$d4lvMt8C^+TcQu4F
zQqv!UF!I+kw)c0jhd6+g6oCr9P?7)?!qX1ui*iL{p}sKCAGuJ{{W)0z1pLF|=>h}&
zt(2Lr0Z`2ig8<5i%Zk}cO5Fm=LByqGWaS`oqChZdEFmc`0hSb#gg|Aap^{+WKOYcj
zHjINK)KDG%&s?Mt4CL(T=?;~U@bU2x_mLKN!#GJuK_CzbNw5SMEJorG!}_5;?R>@1
zSl)jns3WlU7^J%=(hUtfmuUCU&C3%8B5C^f5>W2Cy8jW3#{Od{lF1}|?c61##3dzA
zsPlFG;l_FzBK}8>|H_Ru_H#!_7$UH4UKo3lKOA}g1(R&|e@}GINYVzX?q=_WLZCgh
z)L|eJMce`D0EIwgRaNETDsr+?vQknSGAi=7H00r`QnI%oQnFxm`G2umXso9l+8*&Q
z7WqF|$p49js$mdzo^BXpH#gURy=UO;=IMrYc5?@+sR4y_?d*~0^YP7d+y0{}0)zBM
zIKVM(DBvICK#~7N0a+PY6)7;u=dutmNqK3AlsrUU9U`d;msiucB_|8|2kY=(7XA;G
zwDA8AR)VCA#JOkxm#6<Fk;3Qv_CIk;8vG~n5ol7lV@Ppr$`vO}M#g$eOI^j-clMjL
zOPuv5uLtX1JFT#MwySH_RJ4r>oHNS^YVuOU;8p$N)2{`;oF|rQ?B~K$%rHDxXs+_G
zF5|-uqHZvSzq}L;5Kcy_P+x0${33}Ofb6+TX&=y;;PkEOpz%<lxjl%Ocl~M2y2lP|
zbFM`Z-*dEp9W{5_I?FqgKOqcjrGzul_KvvA0B9o^)C&!8LQLB95vnvr20|)KwER)3
zg@AiPX~4f9{zIy9K63eeK%_eUy<Xj$!il}`M9Aai_i>+_bCw_<t<K-?r^}*l>{<&~
zeLV|!bP%l1qxywfVr9Z9JI+++EO^x>ZuCK);=$VIG1`kxK8F2M8AdC$iOe3cj<EWM
zKtfCf^Zg1tRdj=Xm)|^7J1pa)+-CDvXj&R?416f(tgg8|WBR8cdxDx?*Yn+_9!KKY
zYfc;GQgX!L+9q}en#aZ8FKqby@Ji7SuT!4)GFKidFyC9wMywvB3c%^>1fo(ce4l-9
z7*zKy3={MixvUk=enQE;ED~7tv%qh&3lR<0m??@w{ILF|e#QOyPkFYK!&Up7xWNtL
zOW%1QMC<3o;G9_S1;NkPB6bqbCOjeztEc6TsBM<(q9((JKiH{01+Ud=uw9B@{;(JJ
z-DxI2*{pMq`q1RQc;V8@gYAY44Z!%#W~M9pRxI(R?SJ7<UU2Y^EpY^fzuq-h_rtLL
zw8{`NN~<)$oMx`|^gGr>sy7em=Z5DbuDlr@*q|25V)($-f}9c#?D%dU^RS<(wz?{P
zFFHtCab*!rl(~j@0(Nadvwg8q|4!}L^>d?0al6}Rrv9$0M#^&@zjbfJy_n!%mVHK4
z6pLRIQ^Uq~dnyy$`ay51Us6WaP%&O;@49m&{G3z7xV3dLtt1VTOMYl3UW~Rm{Eq4m
zF?Zl_v;?7EFx1_+#WFUXxcK78IV)FO>42@cm@}2I%pVbZqQ}3;p;sDIm&knay03a^
zn$5}Q$G!@fTwD$e(x-~aWP0h+4N<q|;xEwzsU+0W)#|>Rz$Kln<bW)%U3n>O_H2c<
z(XX#lPuW_%H#Q+c&(nRyX1-Ia<yTsbNAz3PBfuh9@JU{>dKR-%$4FYC0fsCmL9ky3
zKpxyjd^JFR+vg2!=HWf}2Z?@Td`0EG`kU?{8zKrvtsm)|7>pPk9nu@2^z96aU2<#`
z2QhvH5w&V;wER?mopu+nqu*n8p~(%Q<o-E#HMmv_6Lr(S<y?zXl02$twV54+g=p_C
zbPW!;qljHcIPw~aX95_u!itzF%xKBH?y!MCRe^`1V@8<G!;_`~Q-@-mUm7r`3Jc*<
zW|jM!A9`X|osT!srEU-27h+^5j<OqNPj-EFHPokG&HB5WAG01lt!13`S9niUI^dz+
zrPE=GX-SXL@wqVGe*HT?V{#O~&~?uH#PoV2h;Vj@x`#d8)T&F})!(j^f1!z+l?Jjx
zylKosI<}}<nHbsk7I?v<<vXs6tPoozmJ}avD&{J7$vR$!Ni~Q@;tH>kwSs&*0eJwa
zMXR05`OSFpfyRb!<VB&Y0bEEVE$hSNXH(0mbzS-;?|O<AG)<R8gmLSuf>Y_+H@O%Y
z0=K^y6B8Gcbl?SA)qMP3Z+=C(?8zL@=74R=EVnE?vY!1BQy2@q*RUgRx4yJ$k}MnL
zs!?74QciNb-LcG*&o<9=DSL>1n}ZNd)w1z3-0Pd^4ED1{qd=9|!!N?xnXjM!EuylY
z5=!H>&hSofh8V?Jofyd!h`xDI1fYAuV(sZwwN~{$a}MX^=+0TH*SFp$vyxmUv7C*W
zv^3Gl0+eTFgBi3FVD;$nhcp)ka*4gSskYIqQ&+M}xP9yLAkWzBI^I%zR^l1e?bW_6
zIn{mo{dD=)9@V?s^fa55jh78rP*Ze<3`tRCN4*mpO$@7a^*2B*7N_|A(Ve2VB|)_o
z$=#_=aBkhe(ifX}MLT()@5?<tMQW)|T904`EDIN{(*~?7PZ%vrUEuUf@Om1Lh8V<U
zqvVYpe+tw_sKHyj#O-VCO5S%E1lshLO74De`Gk2E(7WE#<PpDtbvmnFnSOqG1oI3d
zYC<jZo_G~2KIE6{8;7bJFfC?E4zS>OV+~7cXC3r!%{QJxriXo9I%*3q4KT4Xxzyd{
z9;_%=W%q!Vw$Z7F3lUnY+1HZ*lO;4;VR2+i4+D(m#01OYq|L_fbnT;KN<^dkkCwtd
zF7n+O7KvAw8c`JUh6LmeIrk4`F3o|AagKSMK3))_5Cv~y2Bb2!Ibg9BO7Vkz?pAYX
zoI=B}+$R22&IL`NCYUYjrdhwjnM<dIpta11b@>x_v=-Qcx-jmtN>!Zqf|n1^SWrHy
zK|MwJ?Z#^>)rfT5YSY{qjZ&`Fjd;^vv&gF-Yj6$9-Dy$<6zeP4s+78gS2|t%Z309b
z0^fp~ue_}i`U9j!<|qF92_3oB09NqgAoehQ`)<)dSfKoJl_A6Ec#*Mx9Cpd-p#$Ez
z={AM*r-bQs6*z$!*V<pNyBZpFi*F}aPuOZk!oD1sov}{rrxFZa@)!5H(|DKR-T0B*
zk=XmkSgqtSP+yWN@0aMgOdP>A4|QE7bf@-4vb?Q+pPKLkY2{yKsw{&udv_2v8{Dbd
zm~8VAv!G~s)`O3|Q6vFUV%8%+?ZSVUa(;fhPNg#vab@J*9XE4#D%)$UU-T5`fwjz!
z6&gA^`OGu6aUk{l*h9eB?opVdrHK>Q@U>&JQ_2pR%}TyOXGq_6s56_`U(WoOaAb+K
zXQr#6H}>a-GYs9^bG<C4b$CvneP46N2fi^kmcJjoTXRGgd^g1b&uQ5spV5+b#%y`#
zrU;H~D)utn!YWIi=j;?C-zcJ^D5xZF+#(?rMdp;)?KT1xBnMkmoV;zh&S;rXW6QQx
zWTQ2K14`6wG0eo+=1oSxjIHJc9Zkw+()XT69~5<`ZtDM}Z2bxUwYy3m%<I&~-0+^1
zYtu2vJf--MIxlG~PPDn;z8t5-=$6>P2Y&hSP5gEtW+GVC4=wy0wQk=~%CSXj=GH6q
z-T#s!BV`xZVxm{~jr_ezYRpqqIcXC=Oq`b{lu`Rt(IYr4B91hhVC?yg{ol4WUr3v9
zOAk2LG>CIECZ-WIs0$N}F#eoIUEtZudc7DPYIjzGqDLWk_A4#(<oDDN)6%Ctygl~O
zyPZcr9YCj-jDP7@YK23SJG!MDFZ1)E9`{R$R<J$u)%oUM9#k)$atlYczfhesFXL-4
zvsoG-9l@uTA8QI2Z$HsSvPZlMpB!@DV{4Bs(b)t!a<<4O@H~uuN{fO$vY>LgacooD
z2K4IWs@N`Bddm-{%oy}!k0^i6Yh)uJ1S*90>|bm3TOZxcV|ywHUb(+CeX-o1|LTZM
zwU>dY3R&U)T(}5#Neh?-CWT~@{6Ke@sI)uSuzoah8COy)w)B)aslJmp`WUcjdia-0
zl2Y}&L~XfA`uYQboAJ1;J{XLhYjH){cObH3FDva+^8ioOQy%Z=xyjGLmWMrzfFoH;
zEi3AG`_v+%)&lDJE;iJWJDI@-X9K5O)LD~j*PBe(wu+|%ar~C+LK1+-+lK<ll>=t#
z+Xc+J7qp~5q=B~rD!x78)?1+KUIbYr^5rcl&tB-cTtj+e%{gpZZ4G~6r15+d|J(ky
zjg@@UzMW0k9@S#W(1H{u;Nq(7llJbq;;4t$awM;l&(2s+$l!Ay9^Ge|34CVhr7|BG
z?dAR83smef^frq9V(OH+a+ki#q&-7TkWfFM=5bsGbU(8mC;>QTCWL5ydz9s6k@?+V
zcjiH`VI=59P-(-DWXZ~5DH>B^_H~;4$)KUhnmGo*G!Tq8^LjfUDO)lASN*=#AY_yS
zqW9UX(VOCO&p@kHdUUgsBO0KhXxn1sprK5h8}+>IhX(nSXZKwlNsjk^M|RAaqmCZB
zHBol<PMLlw!1W2AX{4`0(aI-^)x1d_zq-0U*e!X=g^kk>OHYBas@&{PT=R+?d8pZu
zUHfyucQ`(umXSW7o?HQ3H21M`ZJal+%*)SH1B1j6rxTlG3hx1IGJN^M7{$j(9V;MZ
zRKybgVuxKo#XVM+?*yTy{W+XHaU5Jbt-UG33x{u(N-2wmw;zzPH&4DE103HV@ER86
z|FZEmQb|&1s5#`$4!Cm}&`^{(4V}OP$bk`}v6q6rm;P!H)W|2i^e{7lTk2W@jo_9q
z*aw|U7#+g59Fv(5qI`#O-qPj#@_P>PC#I(GSp3DLv7x-dmYK=C7lPF8a)bxb=@)B1
zUZ`EqpXV2dR}B&r`uM}N(TS99ZT0UB%IN|0H%DcVO#T%L_chrgn#m6%x4KE*IMfjX
zJ%4veCEqbXZ`H`F_+fELMC@wuy_ch%t*+Z+1I}wN#C+dRrf2X{1C8=yZ_%Pt6wL_~
zZ2NN-hXOT4P4n$QFO7yYHS-4wF1Xfr-meG9Pn;uK51?hfel`d38k{W)F*|gJLT2#T
z<~>spMu4(mul-8Q3*pf=N4DcI)zzjqAgbE2eOT7~&f1W3VsdD44Ffe;3mJp-V@8UC
z)|qnPc12o~$X-+U@L_lWqv-RtvB~%hLF($%Ew5w>^NR82qC_0F<zVqs?Raxz=2A>B
z)=hP1-OEx?lLi#jnLzH}a;Nvr@JDO-zQWd}#k^an$Kwml;MrD&)sC5b`s0ZkVyPkb
zt}-jOq^%_9>YZe7Y}PhW{a)c39G`kg(P4@kxjcYfgB4XOOcmezdUI7j-!gs7oAo2o
zx(Ph{G+YZ`a%~kzK!HTAA5NXE-7vOFRr5oqY$rH>WI6SFvWmahFav!CfRMM3%8J&c
z*p+%|-fNS_@QrFr(at!JY9jCg9F-%5{nb5Bo~z@Y9m&SHYV`49GAJjA5h~h4(G!Se
zZmK{Bo7ivCfvl}@A-ptkFGcWXAzj3xfl{evi-OG(TaCn1FAHxRc{}B|x+Ua1D=I6M
z!C^ZIvK6aS_c&(=OQDZfm>O`Nxsw{ta&yiYPA~@e#c%N>>#rq)k6Aru-qD4(D^v)y
z*>Rs;YUbD1S8^D(ps6Jbj0K3wJw>L4m)0e(6Pee3Y?gy9i0^bZO?$*sv+xKV?WBlh
zAp*;v6w!a8;A7sLB*g-^<$Z4L7|5jXxxP1}hQZ<55f9<^KJ>^mKlWSGaLcO0=$jem
zWyZkRwe~u{{tU63DlCaS9$Y4CP4f?+wwa(&1ou)b>72yd<aYLC-(YWFHR=3p2C;o@
zP>rFvm`R<qZaNijJ?9e0Ao@J0FQbg1c%wi*X&vhQIV{0-tqBevRs?R)1sbxUT&}HJ
z*KdKSzTFX7&Aa4>j-0`kBJgK@nd(*Eh!(NC{F-@=FnF&Y!q`7){YsLLHf0_B6aHc#
z>WIuHTyJwIH{BJ4)2RtEauC7Yq7Cytc|S<m;S)8!_N`GikUqEGHdRcGU-QPEbp3se
zE7LrqZLNv81NNuz!tDCc*XEM9tD}O}AA<wr-O|Mp0pzPgSb{6jitn>)4^*t8Va3HR
zg=~sN^tp9re@w=GTx$;zOWMjcg-7X3Wk^N$n;&Kf1RgVG2}2L-(0o)54C509C&77i
zrjSi{X*WV=%C17((N^6R4Ya*4#6s_L99RtQ>m(%#nQ#wrRC8Y%yxkH;d!MdY+Tw@r
zjpSnK`;C-U{ATcgaxoEpP0Gf+tx);buOM<s@Z}LbUcXA@TIG=Q@myo%l9hl^&h34x
zu6;dv<5;?t)>lK=01D|J+ROu37qc*rD(w`#O=3*O*w9?biwNoq3WN1`&Wp8TvKj3C
z3HR9ssH7a&Vr<6waJrU<Uz3;wi7<=4xfd1VLN$2P7x}BBS2io@ltlrnmzyIDtt<yX
zAPcqxp4#$=Z%yky_m)4l_cnk`*u)Ahtuv8K{6vhAKMH6ow@c&kpm#&qGLE(Nu?A^>
zdLg!ieYz%U^bmpn%;(V%%ugMk92&?_XX1K@mwnVSE6!&%P%Wdi7_h`CpScvspMx?N
zQUR>oadnG17#hNc$pkTp+9<O}Jes}mOYA)lX@8ntoYG-_HA4-;x|^l1dmnFbnH;3A
zo7RmzjAt!StB&)wt}}Vz$Tx7{+QOd#U@!|=V-Oy>lW+MBKHRZ~7<Tp{OpB;sNJVcO
zP9gJmH&Z2nt++Wk^~d|9`p`s~@#e4h2h+!@-1=fBDgb_osGReiQgZ>4XWUryd)4yd
zj98$%XmIL4(9OnoeO5Fnyn&fpQ9b0h4e6EHHw*l68j;>(ya`g^S&y2{O8U>1*>4zR
zq*WSI_2o$CHQ?x0!wl9bpx|Cm2+kFMR)oMud1%n2=qn5nE&t@Fgr#=Zv2?}wtEz^T
z9rrj=?I<GKR}2`GsAAn<o<uOC`pid<%}8(c`p&zgnk&0rnZ{7Rb)^0-DfYcASTQ0s
zKO0S&yqP5xyM1crewennx~2nl$+FH?k$&4izqT?3*7J(SmJOw`dZb5FYs=|K5XN*~
z@!QVYGRE&)UH{eRL^>H*qI5{G@Rn&}^Z{+TW}mQe<Ew(X_9Cg%_)${IZP(Sf(i}}#
zbP^Uyd)|N;rJ4rvPkN0$CN?X?Bu3o`sBkNx9e)Hk<|kZoor>b9=8b<_a`&Cm#n%n~
zU47MvCBsdXFB1+adOO)03+nczfWa#vwk<X*p?NEOGFg@VXR_YfNi3ZWGup*ZMYLrd
zivdVFWx1f#$rH$D0S;+?%}dLVO}~LftMC3)E?;ORtVD#gO@_oLGdOsk#uT@)CP$RI
z#-#zp;&|vD_rYnvw~2N0Wp+nQ+xVJ$IH9kk(&N_Uad`)ORc-o<^o9v_z)$2HD4jGQ
zI}WMPN93Rji|(>#r{o{dF)QWya9v2nv43Zp3%Ps}($lA02*_g25t;|T{A5snSY?3A
zrRQ~(Ygh_ebltHo1VC<XI}!-0hb>bJb*eOAr;4cnlXLvI>*$-#AVsGg6B1r7@;g^L
zFlJ_th0vxO7;-opU@WA<a+$A0VKV&CD~?Y9W`bM2k~*P|j8E*2CoV8)Cu!IV5;k=`
zm0lA9424u4MQ;9hkajM?rCu<5Nio0ru*d*6!O7wLB^>Fe;<}?!2q?RBrFK5U{<mA*
z;WN^+Hz{=MA9j{=Q!Qyy7=i0XTx(4nT94X=`8CIvSzRT*3@ox%j?(gLc30~Knc##R
z`(0eGu62$+sd#-(+!IS_v$FsA^Q8gK0r%Y15^&Pc`)3fzUE9X{;k8eN8;R}9b;E)`
zT8R>*ai@NLKZ^};Ul}beukveh?TQn;$%9=R+DX07m82gP$=}Uo_%&ngV`}Hyv8g{u
z3SWzTGV|cwQuFIs7ZDOqO_fGf8Q`8MwL}eUp>q?4eqCmOTcwQuXtQckPy|4F1on8l
zP*h>d+cH#XQf|+6c|S{7SF(Lg>bR~l(0uY?O{OEVlaxa5@e%T&xju=o1`=OD#qc16
zSvyH*my(dcp6~VqR;o(#@m44Lug@~_qw+HA=mS#Z^<V!az}@c{ARa+_X}NO~a$=9p
za)_Ly?(LOnFWV{rQbS?1K7hP~fC?!$z}<pP%6*k1O(nj^MX2}V?0EMJUI;+4&As(@
zxYB>4reBy8iV?H~I;{LQWk3aKK8$bLRyt$g?-<xQqj`npk`D=fcL`B%EgjfC99(LE
z!z(C4-ap+uQYSIckaE<2uA^ag^t_eaYn_Jfq@U?vzOdv%t*)||aVad7PZ((`gpV!x
rZ$0M!)qwuD?ff?h#CY04MnNVFTnmG)-+p%fr;?V2o_dw4E$;sThR3J6


From 9c3f251d3653691631a40fd9aba40921e87123ff Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 8 May 2020 17:07:20 -0500
Subject: [PATCH 050/223] Open window button works

---
 src/app/App.vue                         | 65 +++++++++++++++++++++++--
 src/app/components/OpenWindowButton.vue |  8 +--
 2 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 896621a2..20e49f9c 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     id="eterna-chat"
-    style="height:100%; width:100%; overflow-y:hidden;"
+    style="overflow-y:hidden;"
+    :class="{ eternaChatFull:fullSized, eternaChatNormal:!fullSized, minimizedChat:minimized}"
   >
     <slideout
       style="z-index:1;"
@@ -25,7 +26,7 @@
     <div id="current-tab">{{currentTab}}
     </div>
     <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
-    <OpenWindowButton/>
+    <OpenWindowButton v-model="fullSize"/>
   </div>
 </template>
 
@@ -62,6 +63,8 @@
 
     minimization = false;
 
+    fullSize = false;
+
     // For text in top bar
     get currentTab() {
       return this.$vxm.chat.chatChannel;
@@ -84,6 +87,10 @@
       return this.minimization;
     }
 
+    get fullSized() {
+      return this.fullSize;
+    }
+
     postMessage(rawMessage: string, channel: string) {
       this.$vxm.chat.sendMessage({ rawMessage, channel });
     }
@@ -97,6 +104,11 @@
         this.$refs.reportDialog.open(payload);
       });
     }
+
+    @Watch('minimized')
+    minimizedChanged() {
+      this.fullSize = false;
+    }
   }
 </script>
 
@@ -114,8 +126,6 @@
 
 <style lang="scss" scoped>
   #eterna-chat {
-    width:100%;
-    height:100%;
     font-family: "Open Sans", "Open Sans", Arial, Gulim;
     font-size: 14px;
     font-weight: 300;
@@ -123,6 +133,13 @@
     position:relative; /* Makes sure everything is placed with respect to it, not to its parent */
     top:0px;
     left:0px;
+    transition:height 200ms;
+  }
+
+  .eternaChatNormal {
+    width:100%;
+    height:100%;
+    animation: growNormal 1s;
   }
 
   .fade-enter-active,
@@ -175,4 +192,44 @@
     z-index: 0; // Covered by slideout
     height: 30px;
   }
+  @keyframes growFull {
+    from {
+      width:100%;
+      height:100%;
+      margin:0
+    }
+    to {
+      width:90vw;
+      height:90vh;
+      margin-right: 5vw;
+      margin-left: 5vw;
+      margin-top: 5vh;
+      margin-bottom: 5vh;
+    }
+  }
+  @keyframes growNormal {
+    to {
+      width:100%;
+      height:100%;
+      margin:0
+    }
+    from {
+      width:90vw;
+      height:90vh;
+      margin-right: 5vw;
+      margin-left: 5vw;
+      margin-top: 5vh;
+      margin-bottom: 5vh;
+    }
+  }
+  .eternaChatFull {
+    width:90vw;
+    height:90vh;
+    margin-right: 5vw;
+    margin-left: 5vw;
+    margin-top: 5vh;
+    margin-bottom: 5vh;
+    box-shadow: 0 0 2vw 20vw rgba(4,52,104,0.5);
+    animation: growFull 1s;
+  }
 </style>
diff --git a/src/app/components/OpenWindowButton.vue b/src/app/components/OpenWindowButton.vue
index f58375ea..52efb3d3 100644
--- a/src/app/components/OpenWindowButton.vue
+++ b/src/app/components/OpenWindowButton.vue
@@ -1,10 +1,10 @@
 <template>
-  <a
+  <div
     class="open-window"
     style="float: right;"
-    href="link-to-full-window"
+    @click="$emit('input', !value)"
   >
-  </a>
+  </div>
 </template>
 
 <script lang="ts">
@@ -13,6 +13,8 @@
 
   @Component
   export default class OpenWindowButton extends Vue {
+    @Prop()
+    value!: boolean;
   }
 </script>
 

From ac9b323b0fe5e71de1bdc3fed48693f83e352ec2 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 8 May 2020 17:31:05 -0500
Subject: [PATCH 051/223] Put handler for description if not defined

---
 src/app/components/Slideout/SlideoutChats.vue | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index e359acc5..e58fa028 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -6,7 +6,7 @@
         :key="name"
         :isActive="activeTab === index"
         :name="name.substr(1)"
-        :description="channelDescriptions[name]"
+        :description="channelDescription(name)"
         @input="activeTab = index"
         v-on:click="update"
       >
@@ -34,8 +34,8 @@
   export default class SlideoutChats extends Vue {
     activeTab = 4; // If 1-3, causes weird bug. This fixes it
 
-    channelDescriptions = {
-    '#general': 'General chat',
+    channelDescriptions: {[channel:string]:string} = {
+    '#General': 'General chat',
     '#off-topic': 'Off-topic chat',
     '#help': 'Help requests',
     };
@@ -53,14 +53,28 @@
     }
 
     update() {
-      (this.$parent as Slideout).checked = false;
+      (this.$parent as Slideout).checked = false; // Hide slideout
+       // Set current tab name in top bar as this tab's name
       this.$vxm.chat.chatChannel = this.messageTabs[this.activeTab].name;
-      this.$vxm.chat.tab = this.activeTab;
+      this.$vxm.chat.tab = this.activeTab; // Set self as active tab
     }
 
     isSelected(of:Number) { // If given tab selected
       return of === this.activeTab;
     }
+
+    // Gives channel description given name
+    channelDescription(name:string) {
+      // Gets description for channel, if there is one, from object defined above
+      const description = this.channelDescriptions[name];
+      if (description) { // If description exists, return it
+        return description;
+      }
+      // Remove hashtag
+      const trimmedName = name.substr(1);
+      // Return channel name with first letter capitalized + ' channel'
+      return `${trimmedName.charAt(0).toUpperCase()}${trimmedName.substr(1)} channel`;
+    }
   }
 </script>
 <style scoped>

From e5139d8f9852eb3e9a24203f187aacfbc4713790 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 9 May 2020 03:12:29 -0500
Subject: [PATCH 052/223] Basic notification structure

---
 package-lock.json                             | 8391 +++++++++++------
 package.json                                  |   61 +-
 src/app/App.vue                               |   26 +
 src/app/assets/hamburger-notification.png     |  Bin 0 -> 295 bytes
 src/app/assets/hamburger.png                  |  Bin 182 -> 182 bytes
 src/app/components/HamburgerMenuButton.vue    |   18 +-
 src/app/components/Slideout/Slideout.vue      |   29 +-
 src/app/components/Slideout/SlideoutChats.vue |    9 +
 src/app/components/TabButton.vue              |    3 +
 src/app/store/chat.vuex.ts                    |   15 +-
 10 files changed, 5470 insertions(+), 3082 deletions(-)
 create mode 100644 src/app/assets/hamburger-notification.png

diff --git a/package-lock.json b/package-lock.json
index f4dfa537..c913e3b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,12 +14,12 @@
       }
     },
     "@apollo/federation": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@apollo/federation/-/federation-0.11.2.tgz",
-      "integrity": "sha512-MSMBGOS9lAE0K4VmV/3mkd2qfLQTGt2OcsryRNbGMXr9gUVZDtM9quD5JUQoENkz9YFwcOY9jI+i/X5J+Fcw6A==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@apollo/federation/-/federation-0.15.0.tgz",
+      "integrity": "sha512-L6n41obKc0fLQdZ0uSHhHRJNCIAxZ5uDeqQON+Q+ewiUfS3XetCCf/cGpiiL50TIY/n8Bvh5ZPWLMTtP0tyw5g==",
       "dev": true,
       "requires": {
-        "apollo-graphql": "^0.3.4",
+        "apollo-graphql": "^0.4.0",
         "apollo-server-env": "^2.4.3",
         "core-js": "^3.4.0",
         "lodash.xorby": "^4.7.0"
@@ -47,20 +47,20 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "10.17.13",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.13.tgz",
-          "integrity": "sha512-pMCcqU2zT4TjqYFrWtYHKal7Sl30Ims6ulZ4UFXxI4xbtQqK/qqKwkDoBFCfooRqqmRu9vY3xaJRwxSh673aYg==",
+          "version": "10.17.21",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.21.tgz",
+          "integrity": "sha512-PQKsydPxYxF1DsAFWmunaxd3sOi3iMt6Zmx/tgaagHYmwJ/9cRH91hQkeJZaUGWbvn0K5HlSVEXkn5U/llWPpQ==",
           "dev": true
         }
       }
     },
     "@apollographql/apollo-tools": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@apollographql/apollo-tools/-/apollo-tools-0.4.3.tgz",
-      "integrity": "sha512-CtC1bmohB1owdGMT2ZZKacI94LcPAZDN2WvCe+4ZXT5d7xO5PHOAb70EP/LcFbvnS8QI+pkYRSCGFQnUcv9efg==",
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@apollographql/apollo-tools/-/apollo-tools-0.4.8.tgz",
+      "integrity": "sha512-W2+HB8Y7ifowcf3YyPHgDI05izyRtOeZ4MqIr7LbTArtmJ0ZHULWpn84SGMW7NAvTV1tFExpHlveHhnXuJfuGA==",
       "dev": true,
       "requires": {
-        "apollo-env": "^0.6.1"
+        "apollo-env": "^0.6.5"
       }
     },
     "@apollographql/graphql-language-service-interface": {
@@ -114,16 +114,46 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.8.1.tgz",
-      "integrity": "sha512-Z+6ZOXvyOWYxJ50BwxzdhRnRsGST8Y3jaZgxYig575lTjVSs3KtJnmESwZegg6e2Dn0td1eDhoWlp1wI4BTCPw==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.9.6.tgz",
+      "integrity": "sha512-5QPTrNen2bm7RBc7dsOmcA5hbrS4O2Vhmk5XOL4zWW/zD/hV0iinpefDlkm+tBBy8kDtFaaeEvmAqt+nURAV2g==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.8.2",
+        "browserslist": "^4.11.1",
         "invariant": "^2.2.4",
         "semver": "^5.5.0"
       },
       "dependencies": {
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001054",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
+          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.432",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
+          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.55",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
+          "dev": true
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -133,49 +163,47 @@
       }
     },
     "@babel/core": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.8.0.tgz",
-      "integrity": "sha512-3rqPi/bv/Xfu2YzHvBz4XqMI1fKVwnhntPA1/fjoECrSjrhbOCxlTrbVu5gUtr8zkxW+RpkDOa/HCW93gzS2Dw==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.0",
-        "@babel/generator": "^7.8.0",
-        "@babel/helpers": "^7.8.0",
-        "@babel/parser": "^7.8.0",
-        "@babel/template": "^7.8.0",
-        "@babel/traverse": "^7.8.0",
-        "@babel/types": "^7.8.0",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.6.tgz",
+      "integrity": "sha512-nD3deLvbsApbHAHttzIssYqgb883yU/d9roe4RZymBCDaZryMJDbptVpEpeQuRh4BJ+SYI8le9YGxKvFEvl1Wg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.8.3",
+        "@babel/generator": "^7.9.6",
+        "@babel/helper-module-transforms": "^7.9.0",
+        "@babel/helpers": "^7.9.6",
+        "@babel/parser": "^7.9.6",
+        "@babel/template": "^7.8.6",
+        "@babel/traverse": "^7.9.6",
+        "@babel/types": "^7.9.6",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.1",
-        "json5": "^2.1.0",
+        "json5": "^2.1.2",
         "lodash": "^4.17.13",
         "resolve": "^1.3.2",
         "semver": "^5.4.1",
         "source-map": "^0.5.0"
       },
       "dependencies": {
-        "@babel/generator": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.0.tgz",
-          "integrity": "sha512-2Lp2e02CV2C7j/H4n4D9YvsvdhPVVg9GDIamr6Tu4tU35mL3mzOrzl1lZ8ZJtysfZXh+y+AGORc2rPS7yHxBUg==",
+        "@babel/code-frame": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.8.0",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
+            "@babel/highlight": "^7.8.3"
           }
         },
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
+        "@babel/highlight": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
+          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
           "dev": true,
           "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
+            "@babel/helper-validator-identifier": "^7.9.0",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
           }
         },
         "semver": {
@@ -187,99 +215,79 @@
       }
     },
     "@babel/generator": {
-      "version": "7.7.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.7.tgz",
-      "integrity": "sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.9.6.tgz",
+      "integrity": "sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.7.4",
+        "@babel/types": "^7.9.6",
         "jsesc": "^2.5.1",
         "lodash": "^4.17.13",
         "source-map": "^0.5.0"
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.0.tgz",
-      "integrity": "sha512-WWj+1amBdowU2g18p3/KUc1Y5kWnaNm1paohq2tT4/RreeMNssYkv6ul9wkE2iIqjwLBwNMZGH4pTGlMSUqMMg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz",
+      "integrity": "sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.0.tgz",
-      "integrity": "sha512-KbBloNiBHM3ZyHg1ViDRs4QcnAunwMJ+rLpAEA8l3cWb3Z1xof7ag1iHvX16EwhUfaTG3+YSvTRPv4xHIrseUQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-call-delegate": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-call-delegate/-/helper-call-delegate-7.8.0.tgz",
-      "integrity": "sha512-Vi8K1LScr8ZgLicfuCNSE7JWUPG/H/9Bw9zn+3vQyy4vA54FEGTCuUTOXCFwmBM93OD6jHfjrQ6ZnivM5U+bHg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz",
+      "integrity": "sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==",
       "dev": true,
       "requires": {
-        "@babel/helper-hoist-variables": "^7.8.0",
-        "@babel/traverse": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/helper-explode-assignable-expression": "^7.8.3",
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.1.tgz",
-      "integrity": "sha512-Fsrljg8DHSdnKSzC0YFopX7lseRpVfWMYuC1Dnvf7tw972E2KDjZ4XEaqjO9aJL0sLcG4KNRXxowDxHYIcZ+Cw==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.9.6.tgz",
+      "integrity": "sha512-x2Nvu0igO0ejXzx09B/1fGBxY9NXQlBW2kZsSxCJft+KHN8t9XWzIvFxtPHnBOAXpVsdxZKZFbRUC8TsNKajMw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.8.1",
-        "browserslist": "^4.8.2",
+        "@babel/compat-data": "^7.9.6",
+        "browserslist": "^4.11.1",
         "invariant": "^2.2.4",
-        "levenary": "^1.1.0",
+        "levenary": "^1.1.1",
         "semver": "^5.5.0"
       },
       "dependencies": {
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001054",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
+          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.432",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
+          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.55",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
+          "dev": true
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -289,395 +297,208 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.0.tgz",
-      "integrity": "sha512-ctCvqYBTlwEl2uF4hCxE0cd/sSw71Zfag0jKa39y4HDLh0BQ4PVBX1384Ye8GqrEZ69xgLp9fwPbv3GgIDDF2Q==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.6.tgz",
+      "integrity": "sha512-6N9IeuyHvMBRyjNYOMJHrhwtu4WJMrYf8hVbEHD3pbbbmNOk1kmXSQs7bA4dYDUaIx4ZEzdnvo6NwC3WHd/Qow==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.8.0",
-        "@babel/helper-member-expression-to-functions": "^7.8.0",
-        "@babel/helper-optimise-call-expression": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/helper-replace-supers": "^7.8.0",
-        "@babel/helper-split-export-declaration": "^7.8.0"
+        "@babel/helper-function-name": "^7.9.5",
+        "@babel/helper-member-expression-to-functions": "^7.8.3",
+        "@babel/helper-optimise-call-expression": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-replace-supers": "^7.9.6",
+        "@babel/helper-split-export-declaration": "^7.8.3"
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.0.tgz",
-      "integrity": "sha512-vJj2hPbxxLUWJEV86iZiac5curAnC3ZVc+rFmFeWZigUOcuCPpbF+KxoEmxrkmuCGylHFF9t4lkpcDUcxnhQ5g==",
+      "version": "7.8.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz",
+      "integrity": "sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==",
       "dev": true,
       "requires": {
-        "@babel/helper-regex": "^7.8.0",
-        "regexpu-core": "^4.6.0"
+        "@babel/helper-annotate-as-pure": "^7.8.3",
+        "@babel/helper-regex": "^7.8.3",
+        "regexpu-core": "^4.7.0"
       }
     },
     "@babel/helper-define-map": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.8.0.tgz",
-      "integrity": "sha512-Go06lUlZ4YImNEmdyAH5iO38yh5mbpOPSwA2PtV1vyczFhTZfX0OtzkiIL2pACo6AOYf89pLh42nhhDrqgzC3A==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz",
+      "integrity": "sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.8.0",
-        "@babel/types": "^7.8.0",
+        "@babel/helper-function-name": "^7.8.3",
+        "@babel/types": "^7.8.3",
         "lodash": "^4.17.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-explode-assignable-expression": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.0.tgz",
-      "integrity": "sha512-w4mRQqKAh4M7BSLwvDMm8jYFroEzpqMCtXDhFHP+kNjMIQWpbC6b0Q/RUQsJNSf54rIx6XMdci1Stf60DWw+og==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz",
+      "integrity": "sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==",
       "dev": true,
       "requires": {
-        "@babel/traverse": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/traverse": "^7.8.3",
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.8.0.tgz",
-      "integrity": "sha512-x9psucuU0Xalw+0Vpr2FYJMLB7/KnPSLZhlkUyOGbYAWRDfmtZBrguYpJYiaNCRV7vGkYjO/gF6/J6yMvdWTDw==",
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz",
+      "integrity": "sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==",
       "dev": true,
       "requires": {
-        "@babel/helper-get-function-arity": "^7.8.0",
-        "@babel/template": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/helper-get-function-arity": "^7.8.3",
+        "@babel/template": "^7.8.3",
+        "@babel/types": "^7.9.5"
       }
     },
     "@babel/helper-get-function-arity": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.0.tgz",
-      "integrity": "sha512-eUP5grliToMapQiTaYS2AAO/WwaCG7cuJztR1v/a1aPzUzUeGt+AaI9OvLATc/AfFkF8SLJ10d5ugGt/AQ9d6w==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz",
+      "integrity": "sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.0.tgz",
-      "integrity": "sha512-jDl66KvuklTXUADcoXDMur1jDtAZUZZkzLIaQ54+z38ih8C0V0hC56hMaoVoyoxN60MwQmmrHctBwcLqP0c/Lw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz",
+      "integrity": "sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.0.tgz",
-      "integrity": "sha512-0m1QabGrdXuoxX/g+KOAGndoHwskC70WweqHRQyCsaO67KOEELYh4ECcGw6ZGKjDKa5Y7SW4Qbhw6ly4Fah/jQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
+      "integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.0.tgz",
-      "integrity": "sha512-ylY9J6ZxEcjmJaJ4P6aVs/fZdrZVctCGnxxfYXwCnSMapqd544zT8lWK2qI/vBPjE5gS0o2jILnH+AkpsPauEQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
+      "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.8.0.tgz",
-      "integrity": "sha512-fvGhX4FY7YwRdWW/zfddNaKpYl8TaA8hvwONIYhv1/a1ZbgxbTrjsmH6IGWUgUNki7QzbpZ27OEh88sZdft3YA==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
+      "integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.8.0",
-        "@babel/helper-simple-access": "^7.8.0",
-        "@babel/helper-split-export-declaration": "^7.8.0",
-        "@babel/template": "^7.8.0",
-        "@babel/types": "^7.8.0",
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/helper-replace-supers": "^7.8.6",
+        "@babel/helper-simple-access": "^7.8.3",
+        "@babel/helper-split-export-declaration": "^7.8.3",
+        "@babel/template": "^7.8.6",
+        "@babel/types": "^7.9.0",
         "lodash": "^4.17.13"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.0.tgz",
-      "integrity": "sha512-aiJt1m+K57y0n10fTw+QXcCXzmpkG+o+NoQmAZqlZPstkTE0PZT+Z27QSd/6Gf00nuXJQO4NiJ0/YagSW5kC2A==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
+      "integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.0.tgz",
-      "integrity": "sha512-+hAlRGdf8fHQAyNnDBqTHQhwdLURLdrCROoWaEQYiQhk2sV9Rhs+GoFZZfMJExTq9HG8o2NX3uN2G90bFtmFdA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz",
+      "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==",
       "dev": true
     },
     "@babel/helper-regex": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.8.0.tgz",
-      "integrity": "sha512-haD8fRsPtyFZkbtxBIaGBBHRtbn0YsyecdYrxNgO0Bl6SlGokJPQX9M2tDuVbeQBYHZVLUPMSwGQn4obHevsMQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.8.3.tgz",
+      "integrity": "sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.13"
       }
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.0.tgz",
-      "integrity": "sha512-+aKyBd4oHAaIZgOLq/uLjkUz7ExZ0ppdNBc8Qr72BmtKNAy3A6EJa/ifjj0//CIzQtUDPs3E6HjKM2cV6bnXsQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz",
+      "integrity": "sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.0",
-        "@babel/helper-wrap-function": "^7.8.0",
-        "@babel/template": "^7.8.0",
-        "@babel/traverse": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/helper-annotate-as-pure": "^7.8.3",
+        "@babel/helper-wrap-function": "^7.8.3",
+        "@babel/template": "^7.8.3",
+        "@babel/traverse": "^7.8.3",
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.8.0.tgz",
-      "integrity": "sha512-R2CyorW4tcO3YzdkClLpt6MS84G+tPkOi0MmiCn1bvYVnmDpdl9R15XOi3NQW2mhOAEeBnuQ4g1Bh7pT2sX8fg==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.9.6.tgz",
+      "integrity": "sha512-qX+chbxkbArLyCImk3bWV+jB5gTNU/rsze+JlcF6Nf8tVTigPJSI1o1oBow/9Resa1yehUO9lIipsmu9oG4RzA==",
       "dev": true,
       "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.8.0",
-        "@babel/helper-optimise-call-expression": "^7.8.0",
-        "@babel/traverse": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/helper-member-expression-to-functions": "^7.8.3",
+        "@babel/helper-optimise-call-expression": "^7.8.3",
+        "@babel/traverse": "^7.9.6",
+        "@babel/types": "^7.9.6"
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.0.tgz",
-      "integrity": "sha512-I+7yKZJnxp7VIC2UFzXfVjLiJuU16rYFF59x27c+boINkO/pLETgZcoesCryg9jmU4jxEa0foFueW+2wjc9Gsw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz",
+      "integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/template": "^7.8.3",
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.0.tgz",
-      "integrity": "sha512-YhYFhH4T6DlbT6CPtVgLfC1Jp2gbCawU/ml7WJvUpBg01bCrXSzTYMZZXbbIGjq/kHmK8YUATxTppcRGzj31pA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz",
+      "integrity": "sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/types": "^7.8.3"
       }
     },
+    "@babel/helper-validator-identifier": {
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz",
+      "integrity": "sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==",
+      "dev": true
+    },
     "@babel/helper-wrap-function": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.8.0.tgz",
-      "integrity": "sha512-2j6idN2jt8Y+8nJ4UPN/6AZa53DAkcETMVmroJQh50qZc59PuQKVjgOIIqmrLoQf6Ia9bs90MHRcID1OW5tfag==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz",
+      "integrity": "sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.8.0",
-        "@babel/template": "^7.8.0",
-        "@babel/traverse": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/helper-function-name": "^7.8.3",
+        "@babel/template": "^7.8.3",
+        "@babel/traverse": "^7.8.3",
+        "@babel/types": "^7.8.3"
       }
     },
     "@babel/helpers": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.8.0.tgz",
-      "integrity": "sha512-srWKpjAFbiut5JoCReZJ098hLqoZ9HufOnKZPggc7j74XaPuQ+9b3RYPV1M/HfjL63lCNd8uI1O487qIWxAFNA==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.6.tgz",
+      "integrity": "sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.8.0",
-        "@babel/traverse": "^7.8.0",
-        "@babel/types": "^7.8.0"
-      },
-      "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
+        "@babel/template": "^7.8.3",
+        "@babel/traverse": "^7.9.6",
+        "@babel/types": "^7.9.6"
       }
     },
     "@babel/highlight": {
@@ -692,489 +513,508 @@
       }
     },
     "@babel/parser": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.8.0.tgz",
-      "integrity": "sha512-VVtsnUYbd1+2A2vOVhm4P2qNXQE8L/W859GpUHfUcdhX8d3pEKThZuIr6fztocWx9HbK+00/CR0tXnhAggJ4CA==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.6.tgz",
+      "integrity": "sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==",
       "dev": true
     },
     "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.0.tgz",
-      "integrity": "sha512-8vIQf8JYced7gCeKDsGETNGKE+zdD/JmP1LBlRn+w3UXc1aSpZv2Y330bB/fnOEbUgPbuFv+IEi+gopg+Fu0kQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz",
+      "integrity": "sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/helper-remap-async-to-generator": "^7.8.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-remap-async-to-generator": "^7.8.3",
         "@babel/plugin-syntax-async-generators": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-class-properties": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.0.tgz",
-      "integrity": "sha512-eVGj5NauhKCwABQjKIYncMQh9HtFsBrIcdsxImbTdUIaGnjymsVsBGmDQaDuPL/WCjYn6vPL4d+yvI6zy+VkrQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz",
+      "integrity": "sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-create-class-features-plugin": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-decorators": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.8.0.tgz",
-      "integrity": "sha512-HKltBhhrRigrHYkDrO/9rg+ZerXSAtZjepm8URUrNxgzTzEfuOb06fUU311chMkahZHSfASNUxWVwRzIwGt/uw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.8.3.tgz",
+      "integrity": "sha512-e3RvdvS4qPJVTe288DlXjwKflpfy1hr0j5dz5WpIYYeP7vQZg2WfAEIp8k5/Lwis/m5REXEteIz6rrcDtXXG7w==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/plugin-syntax-decorators": "^7.8.0"
+        "@babel/helper-create-class-features-plugin": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-syntax-decorators": "^7.8.3"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.0.tgz",
-      "integrity": "sha512-YzMq0AqeTR4Mh2pz3GrCWqhcEV38HgUMMR/56/YR5GPc4Y2p1KJ4Le6j92vMnW8TJqVj+qJz/KDNglpMeww9Yg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-json-strings": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.0.tgz",
-      "integrity": "sha512-pSpuhwn926vtNeUH2FHx1OzIXaUMgklG0MzlFZJVEg37fB904gOxN572NgBae+KDwFyZDpkLMyEkVA011lBJrQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz",
+      "integrity": "sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-syntax-json-strings": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.0.tgz",
-      "integrity": "sha512-cQMI+RQdcK2IyMm13NKKFCYfOSBUtFxEeRBOdFCi2Pubv/CpkrCubc/ikdeKMT6Lu+uQ+lNSDEJvDCOQZkUy0g==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
       }
     },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz",
+      "integrity": "sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3"
+      }
+    },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.8.0.tgz",
-      "integrity": "sha512-SjJ2ZXCylpWC+5DTES0/pbpNmw/FnjU/3dF068xF0DU9aN+oOKah+3MCSFcb4pnZ9IwmxfOy4KnbGJSQR+hAZA==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.6.tgz",
+      "integrity": "sha512-Ga6/fhGqA9Hj+y6whNpPv8psyaK5xzrQwSPsGPloVkvmH+PqW1ixdnfJ9uIO06OjQNYol3PMnfmJ8vfZtkzF+A==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-transform-parameters": "^7.9.5"
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.0.tgz",
-      "integrity": "sha512-tHP3eez6TrpPJYttBZ/6uItRbIuXUIDpQ9xwvzKwR+RboWGMJ7WzFC5dDJ3vjLuCx0/DG1tM0MVkmgcBybth9w==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.0.tgz",
-      "integrity": "sha512-PNBHxPHE91m+LLOdGwlvyGicWfrMgiVwng5WdB3CMjd61+vn3vPw0GbgECIAUCZnyi7Jqs5htUIZRztGuV8/5g==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
+      "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.0.tgz",
-      "integrity": "sha512-3oK0Qt5w4arb+es3rWBribDbtc0TYJP7dFZ1dXcYul3cXderqfIOoSx9YUC1oD208nJwJO/++fvrgLmkYSbe8A==",
+      "version": "7.8.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz",
+      "integrity": "sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.8.8",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-syntax-async-generators": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.0.tgz",
-      "integrity": "sha512-a8w8k7pK8nYhem07rXdAq03T+DlTX8LFojUptrh9JEx80AgLqGiuoFIyQOGTWif39kFnDOQqbzl1s6KQqrfV+A==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
     "@babel/plugin-syntax-decorators": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.0.tgz",
-      "integrity": "sha512-Qz68qh9jJqQePGWqbNW9PA7vkE2gvnWkYtx32jgPOszpE7u+xObPkRGm3B80oXAjQlBdTa4ktqjkOIRiKRuapw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz",
+      "integrity": "sha512-8Hg4dNNT9/LcA1zQlfwuKR8BUc/if7Q7NkTam9sGTcJphLwpf2g4S42uhspQrIrR+dpzE0dtTqBVFoHl8GtnnQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.0.tgz",
-      "integrity": "sha512-Mx2RzpCHJaBfmFdA2abXDKRHVJdzJ6R0Wqwb6TxCgM7NRR5wcC4cyiAsRL7Ga+lwG8GG1cKvb+4ENjic8y15jA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
     "@babel/plugin-syntax-flow": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.8.0.tgz",
-      "integrity": "sha512-MDK9WdjDccrxzz+4sthpSDnqdf5McJwTtfBYGitOweC/j0Zg6e8wHmP4RGLTeyGYe/IySoRgKC5hvSm6ddrNRw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.8.3.tgz",
+      "integrity": "sha512-innAx3bUbA0KSYj2E2MNFSn9hiCeowOFLxlsuhXzw8hMQnzkDomUr9QCD7E9VF60NmnG1sNTuuv6Qf4f8INYsg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-syntax-json-strings": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.0.tgz",
-      "integrity": "sha512-LPykaAbH86L5NnDfCRSpNxtEHZk+6GaFzXfWEFU/6R4v69EXQr6GOp7hwH+Uw0QlYVN++s6TukTJ3flFcspahA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.0.tgz",
-      "integrity": "sha512-zLDUckAuKeOtxJhfNE0TlR7iEApb2u7EYRlh5cxKzq6A5VzUbYEdyJGJlug41jDbjRbHTtsLKZUnUcy/8V3xZw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz",
+      "integrity": "sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.0.tgz",
-      "integrity": "sha512-Rv2hnBToN6rbA9hO2a4vtwXZLzNa+TWkoSIMMvUezFz5+D9NPeX7SFrArwtFzzbwndmWiqboTr5rNpzAz0MPpA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz",
+      "integrity": "sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
+    },
     "@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.0.tgz",
-      "integrity": "sha512-dt89fDlkfkTrQcy5KavMQPyF2A6tR0kYp8HAnIoQv5hO34iAUffHghP/hMGd7Gf/+uYTmLQO0ar7peX1SUWyIA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
     "@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.0.tgz",
-      "integrity": "sha512-EIgJVy+u1RvR2gJfX4ReLwAupO/twllUue1wPrRxhu18+eC3bGTEcOSXLQdaE9ya9NG1rE0eQs0GSiloUGFEwg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
     "@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.0.tgz",
-      "integrity": "sha512-LV1c+TTAO8Vawe3t+WXBHYWbS7endP8MSlqKPKEZOyWPEJX2akl3jfvFG828/OE7RpyoC3JXfLJDFj/jN7A8hg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
       "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
     "@babel/plugin-syntax-top-level-await": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.0.tgz",
-      "integrity": "sha512-iXR/Cw32fMfWlD1sK2zD/nXtuLStkalRv+xee6VrX84CFrn2LKwb/EOs/4UaDNUpUsws8YZYKeQjPagacFquug==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz",
+      "integrity": "sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.0.tgz",
-      "integrity": "sha512-LrvVrabb993Ve5fzXsyEkfYCuhpXBwsUFjlvgD8UmXXg3r/8/ceooSdRvjdmtPXXz+lHaqZHZooV1jMWer2qkA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz",
+      "integrity": "sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.0.tgz",
-      "integrity": "sha512-9KfteDp9d8cF388dxFMOh3Dum41qpOVUPVjQhXGd1kPyQBE05FJgYndiAriML2yhMIbZ2bjgweh2nnvBXDH2MQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz",
+      "integrity": "sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.0.tgz",
-      "integrity": "sha512-9dvBvJnEdsDWYMrykoMyLNVRPGoub6SFlARtsYgSQ1riTjnyBjhctihSME4XsSku86F59PDeFpC9PCU+9I154w==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz",
+      "integrity": "sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/helper-remap-async-to-generator": "^7.8.0"
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-remap-async-to-generator": "^7.8.3"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.0.tgz",
-      "integrity": "sha512-bim6gUfHq2kPN+aQst33ZEMeglpaUXAo6PWTZvOA8BOnWpNKgZcUzBvpZhh2ofL6YhZgzGoRwVVfzwynDEf47g==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz",
+      "integrity": "sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.0.tgz",
-      "integrity": "sha512-FKTK4hzg7W950Yu9iqMl12WBixCmusMc5HBt3/ErvpFLnvr3/6mu/EBTZoCEJ0mw/lQUDfU01vTcZY9oEahlMg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz",
+      "integrity": "sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
         "lodash": "^4.17.13"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.8.0.tgz",
-      "integrity": "sha512-18RLDwKtGXCLLbf5V03GojebPH7dKYCmIBqQGhgfZDoYsyEzR9kMZ6IxlJP72K5ROC9ADa4KPI6ywuh7NfQOgQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.0",
-        "@babel/helper-define-map": "^7.8.0",
-        "@babel/helper-function-name": "^7.8.0",
-        "@babel/helper-optimise-call-expression": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/helper-replace-supers": "^7.8.0",
-        "@babel/helper-split-export-declaration": "^7.8.0",
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.5.tgz",
+      "integrity": "sha512-x2kZoIuLC//O5iA7PEvecB105o7TLzZo8ofBVhP79N+DO3jaX+KYfww9TQcfBEZD0nikNyYcGB1IKtRq36rdmg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.8.3",
+        "@babel/helper-define-map": "^7.8.3",
+        "@babel/helper-function-name": "^7.9.5",
+        "@babel/helper-optimise-call-expression": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-replace-supers": "^7.8.6",
+        "@babel/helper-split-export-declaration": "^7.8.3",
         "globals": "^11.1.0"
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.0.tgz",
-      "integrity": "sha512-FaODHuQRdnWFVwxLPlTN85Lk/aitfvQBHTXahf58FnatCynfhkeNUO8ID+AqAxY4IJsZjeH6OnKDzcGfgKJcVw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz",
+      "integrity": "sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.8.0.tgz",
-      "integrity": "sha512-D+69HT//cE86aBTLULzSBFLC5A7HcPQzJPiny6P4SLHkDF750MylRKO3iWvdgvb+OSp5dOrOxwXajvaxk1ZfYA==",
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.9.5.tgz",
+      "integrity": "sha512-j3OEsGel8nHL/iusv/mRd5fYZ3DrOxWC82x0ogmdN/vHfAP4MYw+AFKYanzWlktNwikKvlzUV//afBW5FTp17Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.0.tgz",
-      "integrity": "sha512-pq/XLkDB4MPvTe9ktHJInfWksalXogrIGRZJUG7RiDXhEfdNrlducoMPbACZQuCFtelVgVpD0VyreiY0l38G7g==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz",
+      "integrity": "sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.0.tgz",
-      "integrity": "sha512-REtYWvpP4TDw4oVeP01vQJcAeewjgk8/i7tPFP11vUjvarUGGyxJLeq79WEnIdnKPQJirZaoDRT4kEWEdSWkDw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz",
+      "integrity": "sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.0.tgz",
-      "integrity": "sha512-vaDgF3gPLzVcoe3UZqnra6FA7O797sZc+UCHPd9eQTI34cPtpCA270LzopIXS3Fhc3UmFrijLmre9mHTmUKVgg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz",
+      "integrity": "sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-flow-strip-types": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.8.0.tgz",
-      "integrity": "sha512-yKcww1yWfAHWk4R7OeU0YnrWEIrSodFr1TibfkrP8t0RDXSyGIDnahz8lzXagNT/XlZC3sWpsYXhty9xAU3ULQ==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.9.0.tgz",
+      "integrity": "sha512-7Qfg0lKQhEHs93FChxVLAvhBshOPQDtJUTVHr/ZwQNRccCm4O9D79r9tVSoV8iNwjP1YgfD+e/fgHcPkN1qEQg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/plugin-syntax-flow": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-syntax-flow": "^7.8.3"
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.8.0.tgz",
-      "integrity": "sha512-9j9g0qViCAo8E5qCBSaQdghymn7A9bRXSfS9jU7oLpYccYFZg9A+1KO8X+HV7fhJYH6mZ+e7MRg4p3sLo+RG6Q==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz",
+      "integrity": "sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.0.tgz",
-      "integrity": "sha512-YL8Ol54UKeIyY1uUGfry+B9ppXAB3aVBB1gG9gxqhg/OBCPpV2QUNswmjvfmyXEdaWv8qODssBgX7on792h44w==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz",
+      "integrity": "sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-function-name": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.0.tgz",
-      "integrity": "sha512-7UDPKG+uVltsZt98Hw+rMbLg772r8fQC6YJ2fNDckcpAXgIWqQbMCmCpfYo0hBNhdhqocM73auk4P/zziQshQw==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz",
+      "integrity": "sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.0.tgz",
-      "integrity": "sha512-lJSdaWR56wmrosCiyqKFRVnLrFYoVAk2mtZAyegt7akeJky/gguv0Rukx9GV3XwHGuM1ZPE06cZMjNlcLp8LrQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz",
+      "integrity": "sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.8.0.tgz",
-      "integrity": "sha512-mFr1O3TaDL4XozM3AzNPz9AsxzzjTxwn4aOShYP5TlO+4rufvjagV2KKDTPMZTQm1ZA/C/PxJDsDekEnnUGz5A==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.6.tgz",
+      "integrity": "sha512-zoT0kgC3EixAyIAU+9vfaUVKTv9IxBDSabgHoUCBP6FqEJ+iNiN7ip7NBKcYqbfUDfuC2mFCbM7vbu4qJgOnDw==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "babel-plugin-dynamic-import-node": "^2.3.0"
+        "@babel/helper-module-transforms": "^7.9.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.8.0.tgz",
-      "integrity": "sha512-w2g8tmL7NgBYt6alc8YawMcmPiYqnVvvI0kLB++VOUOssqdJMAkfQOMGV+2M8H5uhJYDaAghAVMUYps3s+jMrw==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.6.tgz",
+      "integrity": "sha512-7H25fSlLcn+iYimmsNe3uK1at79IE6SKW9q0/QeEHTMC9MdOZ+4bA+T1VFB5fgOqBWoqlifXRzYD0JPdmIrgSQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/helper-simple-access": "^7.8.0",
-        "babel-plugin-dynamic-import-node": "^2.3.0"
+        "@babel/helper-module-transforms": "^7.9.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-simple-access": "^7.8.3",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.8.0.tgz",
-      "integrity": "sha512-tKF9KLiIsiKyWTVU0yo+NcNAylGn7euggYwXw63/tMxGtDTPsB9Y7Ecqv4EoXEwtoJOJ0Lewf17oaWQtindxIA==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.6.tgz",
+      "integrity": "sha512-NW5XQuW3N2tTHim8e1b7qGy7s0kZ2OH3m5octc49K1SdAKGxYxeIx7hiIz05kS1R2R+hOWcsr1eYwcGhrdHsrg==",
       "dev": true,
       "requires": {
-        "@babel/helper-hoist-variables": "^7.8.0",
-        "@babel/helper-module-transforms": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "babel-plugin-dynamic-import-node": "^2.3.0"
+        "@babel/helper-hoist-variables": "^7.8.3",
+        "@babel/helper-module-transforms": "^7.9.0",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.8.0.tgz",
-      "integrity": "sha512-lAwNfXwmfTy7fl2XOyoVpMXnLkJANgH0vdSYNFcS4RuJPBtHfunGA+Y0L7wsHmfPzyVYt8sUglLjaWtdZMNJNg==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz",
+      "integrity": "sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-module-transforms": "^7.9.0",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.0.tgz",
-      "integrity": "sha512-kq1rxQ1HviCP13SMGZ4WjBBpdogTGK7yn/g/+p+g1AQledgHOWKVeMY1DwKYGlGJ/grDGTOqpJLF1v3Sb7ghKA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz",
+      "integrity": "sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.8.3"
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.0.tgz",
-      "integrity": "sha512-hH1Afz9Xy/wkcxhoI0vYw48kTBJqYUhMmhp3SLI1p817iByM6ItH4LS8tZatDAIKmAQAXj8d3Ups1BgVJECDrA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz",
+      "integrity": "sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.0.tgz",
-      "integrity": "sha512-2DYqQ811nRlFVlni6iqfxBVVGqkBgfvEv/lcvmdNu2CaG+EA7zSP1hqYUsqamR+uCdDbsrV7uY6/0rkXbJo5YQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz",
+      "integrity": "sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/helper-replace-supers": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-replace-supers": "^7.8.3"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.8.0.tgz",
-      "integrity": "sha512-9R2yykk7H92rntETO0fq52vJ4OFaTcDA49K9s8bQPyoD4o3/SkWEklukArCsQC6fowEuraPkH/umopr9uO539g==",
+      "version": "7.9.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.5.tgz",
+      "integrity": "sha512-0+1FhHnMfj6lIIhVvS4KGQJeuhe1GI//h5uptK4PvLt+BGBxsoUJbd3/IW002yk//6sZPlFgsG1hY6OHLcy6kA==",
       "dev": true,
       "requires": {
-        "@babel/helper-call-delegate": "^7.8.0",
-        "@babel/helper-get-function-arity": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-get-function-arity": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.0.tgz",
-      "integrity": "sha512-vjZaQlojnZIahu5ofEW+hPJfDI5A6r2Sbi5C0RuCaAOFj7viDIR5kOR7ul3Fz5US8V1sVk5Zd2yuPaz7iBeysg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz",
+      "integrity": "sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.0.tgz",
-      "integrity": "sha512-n88GT8PZuOHWxqxCJORW3g1QaYzQhHu5sEslxYeQkHVoewfnfuWN37t7YGaRLaNUdaZUlRPXhDcLGT7zBa/u0g==",
+      "version": "7.8.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz",
+      "integrity": "sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==",
       "dev": true,
       "requires": {
-        "regenerator-transform": "^0.14.0"
+        "regenerator-transform": "^0.14.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.0.tgz",
-      "integrity": "sha512-DnshRyDTXZhmAgO2c1QKZI4CfZjoP2t3fSwRsnbCP9P/FSBpf9I7ovnAELswklw5OeY+/D/JIiaGLoUt2II3LA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz",
+      "integrity": "sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-runtime": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.0.tgz",
-      "integrity": "sha512-7AvNIKcpzx/0L9FYIJ3Rs231P3pwWrZ4XW3xt56Cejy1q0Ix+PbgCE17r12jUY8ygl5p4QhfANC0ZqLd8bz8aA==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.6.tgz",
+      "integrity": "sha512-qcmiECD0mYOjOIt8YHNsAP1SxPooC/rDmfmiSK9BNY72EitdSc7l44WTEklaWuFtbOEBjNhWWyph/kOImbNJ4w==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3",
         "resolve": "^1.8.1",
         "semver": "^5.5.1"
       },
@@ -1188,149 +1028,171 @@
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.0.tgz",
-      "integrity": "sha512-sExhzq63Gl2PMbl7ETpN7Z1A38rLD6GeCT6EEEIIKjTVt9u6dRqJ6nHhaquL7QgR3egj/8fcvq23UvzfPqGAYA==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz",
+      "integrity": "sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.0.tgz",
-      "integrity": "sha512-6Zjl0pv6x10YmFVRI0VhwJ/rE++geVHNJ9xwd+UIt3ON2VMRO7qI2lPsyLnzidR5HYNd/JXj47kdU9Rrn4YcnQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz",
+      "integrity": "sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.0.tgz",
-      "integrity": "sha512-uksok0Bqox8YeIRFhr6RRtlBXeGpN1ogiEVjEd7A7rVLPZBXKGbL7kODpE7MQ+avjDLv5EEKtDCeYuWZK7FF7g==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz",
+      "integrity": "sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/helper-regex": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-regex": "^7.8.3"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.0.tgz",
-      "integrity": "sha512-EF7Q7LEgeMpogHcvmHMNXBWdLWG1tpA1ErXH3i8zTu3+UEKo6aBn+FldPAJ16UbbbOwSCUCiDP6oZxvVRPhwnQ==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz",
+      "integrity": "sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-annotate-as-pure": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.0.tgz",
-      "integrity": "sha512-rEUBEFzsA9mCS2r7EtXFlM/6GqtzgLdC4WVYM9fIgJX+HcSJ8oMmj8LinfKhbo0ipRauvUM2teE2iNDNqDwO1g==",
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz",
+      "integrity": "sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.8.0.tgz",
-      "integrity": "sha512-RhMZnNWcyvX+rM6mk888MaeoVl5pGfmYP3as709n4+0d15SRedz4r+LPRg2a9s4z+t+DM+gy8uz/rmM3Cb8JBw==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.6.tgz",
+      "integrity": "sha512-8OvsRdvpt3Iesf2qsAn+YdlwAJD7zJ+vhFZmDCa4b8dTp7MmHtKk5FF2mCsGxjZwuwsy/yIIay/nLmxST1ctVQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/plugin-syntax-typescript": "^7.8.0"
+        "@babel/helper-create-class-features-plugin": "^7.9.6",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-syntax-typescript": "^7.8.3"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.0.tgz",
-      "integrity": "sha512-qDg8wsnE47B/Sj8ZtOndPHrGBxJMssZJ71SzXrItum9n++iVFN7kYuJO+OHhjom7+/or0zzYqvJNzCkUjyNKqg==",
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz",
+      "integrity": "sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3"
       }
     },
     "@babel/preset-env": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.8.2.tgz",
-      "integrity": "sha512-AF2YUl2bGsLWTtFL68upTTB7nDo05aEcKjHmXJE+aXRvsx5K+9yRsHQP3MjnTrLOWe/eFyUr93dfILROsKC4eg==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.8.0",
-        "@babel/helper-compilation-targets": "^7.8.0",
-        "@babel/helper-module-imports": "^7.8.0",
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/plugin-proposal-async-generator-functions": "^7.8.0",
-        "@babel/plugin-proposal-dynamic-import": "^7.8.0",
-        "@babel/plugin-proposal-json-strings": "^7.8.0",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.8.0",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.8.0",
-        "@babel/plugin-proposal-optional-chaining": "^7.8.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.8.0",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.9.6.tgz",
+      "integrity": "sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.9.6",
+        "@babel/helper-compilation-targets": "^7.9.6",
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
+        "@babel/plugin-proposal-dynamic-import": "^7.8.3",
+        "@babel/plugin-proposal-json-strings": "^7.8.3",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-proposal-numeric-separator": "^7.8.3",
+        "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.8.3",
         "@babel/plugin-syntax-async-generators": "^7.8.0",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0",
         "@babel/plugin-syntax-json-strings": "^7.8.0",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.0",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0",
-        "@babel/plugin-syntax-top-level-await": "^7.8.0",
-        "@babel/plugin-transform-arrow-functions": "^7.8.0",
-        "@babel/plugin-transform-async-to-generator": "^7.8.0",
-        "@babel/plugin-transform-block-scoped-functions": "^7.8.0",
-        "@babel/plugin-transform-block-scoping": "^7.8.0",
-        "@babel/plugin-transform-classes": "^7.8.0",
-        "@babel/plugin-transform-computed-properties": "^7.8.0",
-        "@babel/plugin-transform-destructuring": "^7.8.0",
-        "@babel/plugin-transform-dotall-regex": "^7.8.0",
-        "@babel/plugin-transform-duplicate-keys": "^7.8.0",
-        "@babel/plugin-transform-exponentiation-operator": "^7.8.0",
-        "@babel/plugin-transform-for-of": "^7.8.0",
-        "@babel/plugin-transform-function-name": "^7.8.0",
-        "@babel/plugin-transform-literals": "^7.8.0",
-        "@babel/plugin-transform-member-expression-literals": "^7.8.0",
-        "@babel/plugin-transform-modules-amd": "^7.8.0",
-        "@babel/plugin-transform-modules-commonjs": "^7.8.0",
-        "@babel/plugin-transform-modules-systemjs": "^7.8.0",
-        "@babel/plugin-transform-modules-umd": "^7.8.0",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.0",
-        "@babel/plugin-transform-new-target": "^7.8.0",
-        "@babel/plugin-transform-object-super": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.8.0",
-        "@babel/plugin-transform-property-literals": "^7.8.0",
-        "@babel/plugin-transform-regenerator": "^7.8.0",
-        "@babel/plugin-transform-reserved-words": "^7.8.0",
-        "@babel/plugin-transform-shorthand-properties": "^7.8.0",
-        "@babel/plugin-transform-spread": "^7.8.0",
-        "@babel/plugin-transform-sticky-regex": "^7.8.0",
-        "@babel/plugin-transform-template-literals": "^7.8.0",
-        "@babel/plugin-transform-typeof-symbol": "^7.8.0",
-        "@babel/plugin-transform-unicode-regex": "^7.8.0",
-        "@babel/types": "^7.8.0",
-        "browserslist": "^4.8.2",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3",
+        "@babel/plugin-transform-arrow-functions": "^7.8.3",
+        "@babel/plugin-transform-async-to-generator": "^7.8.3",
+        "@babel/plugin-transform-block-scoped-functions": "^7.8.3",
+        "@babel/plugin-transform-block-scoping": "^7.8.3",
+        "@babel/plugin-transform-classes": "^7.9.5",
+        "@babel/plugin-transform-computed-properties": "^7.8.3",
+        "@babel/plugin-transform-destructuring": "^7.9.5",
+        "@babel/plugin-transform-dotall-regex": "^7.8.3",
+        "@babel/plugin-transform-duplicate-keys": "^7.8.3",
+        "@babel/plugin-transform-exponentiation-operator": "^7.8.3",
+        "@babel/plugin-transform-for-of": "^7.9.0",
+        "@babel/plugin-transform-function-name": "^7.8.3",
+        "@babel/plugin-transform-literals": "^7.8.3",
+        "@babel/plugin-transform-member-expression-literals": "^7.8.3",
+        "@babel/plugin-transform-modules-amd": "^7.9.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.9.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.9.6",
+        "@babel/plugin-transform-modules-umd": "^7.9.0",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
+        "@babel/plugin-transform-new-target": "^7.8.3",
+        "@babel/plugin-transform-object-super": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.9.5",
+        "@babel/plugin-transform-property-literals": "^7.8.3",
+        "@babel/plugin-transform-regenerator": "^7.8.7",
+        "@babel/plugin-transform-reserved-words": "^7.8.3",
+        "@babel/plugin-transform-shorthand-properties": "^7.8.3",
+        "@babel/plugin-transform-spread": "^7.8.3",
+        "@babel/plugin-transform-sticky-regex": "^7.8.3",
+        "@babel/plugin-transform-template-literals": "^7.8.3",
+        "@babel/plugin-transform-typeof-symbol": "^7.8.4",
+        "@babel/plugin-transform-unicode-regex": "^7.8.3",
+        "@babel/preset-modules": "^0.1.3",
+        "@babel/types": "^7.9.6",
+        "browserslist": "^4.11.1",
         "core-js-compat": "^3.6.2",
         "invariant": "^2.2.2",
-        "levenary": "^1.1.0",
+        "levenary": "^1.1.1",
         "semver": "^5.5.0"
       },
       "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
           "dev": true,
           "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
           }
         },
+        "caniuse-lite": {
+          "version": "1.0.30001054",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
+          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.432",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
+          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.55",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
+          "dev": true
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -1340,29 +1202,42 @@
       }
     },
     "@babel/preset-flow": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.8.0.tgz",
-      "integrity": "sha512-z10t7ggJjoqdvcOrnXA16PeDhykL+FeJHg8nYg3D+QuKyMyI433o8oNJO+jFrfLa1aQ9ps2eG2QA5I7FWlJlOA==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.9.0.tgz",
+      "integrity": "sha512-88uSmlshIrlmPkNkEcx3UpSZ6b8n0UGBq0/0ZMZCF/uxAW0XIAUuDHBhIOAh0pvweafH4RxOwi/H3rWhtqOYPA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-transform-flow-strip-types": "^7.9.0"
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.3.tgz",
+      "integrity": "sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/plugin-transform-flow-strip-types": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
       }
     },
     "@babel/preset-typescript": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.8.0.tgz",
-      "integrity": "sha512-mvu4OmrLK6qRPiXlOkE4yOeOszHzk9itwe6aiMN0RL9Bc5uAwAotVTy4kKl17evLMd1WsvWT1O3mZltynuqxXg==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz",
+      "integrity": "sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0",
-        "@babel/plugin-transform-typescript": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/plugin-transform-typescript": "^7.9.0"
       }
     },
     "@babel/register": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.8.0.tgz",
-      "integrity": "sha512-i7CPQBzb/uALrZZozm6jXpSoieZvcTSOqonKA9UX4OLEvAYc4Y2VqgW67ZkSz6xfaNP6m1g1oBy0/zMA7YcdJA==",
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.9.0.tgz",
+      "integrity": "sha512-Tv8Zyi2J2VRR8g7pC5gTeIN8Ihultbmk0ocyNz8H2nEZbmhp1N6q0A1UGsQbDvGP/sNinQKUHf3SqXwqjtFv4Q==",
       "dev": true,
       "requires": {
         "find-cache-dir": "^2.0.0",
@@ -1397,87 +1272,93 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.0.tgz",
-      "integrity": "sha512-Z7ti+HB0puCcLmFE3x90kzaVgbx6TRrYIReaygW6EkBEnJh1ajS4/inhF7CypzWeDV3NFl1AfWj0eMtdihojxw==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
+      "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
       "dev": true,
       "requires": {
-        "regenerator-runtime": "^0.13.2"
+        "regenerator-runtime": "^0.13.4"
       }
     },
     "@babel/template": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.0.tgz",
-      "integrity": "sha512-0NNMDsY2t3ltAVVK1WHNiaePo3tXPUeJpCX4I3xSKFoEl852wJHG8mrgHVADf8Lz1y+8al9cF7cSSfzSnFSYiw==",
+      "version": "7.8.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
+      "integrity": "sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.8.0",
-        "@babel/parser": "^7.8.0",
-        "@babel/types": "^7.8.0"
+        "@babel/code-frame": "^7.8.3",
+        "@babel/parser": "^7.8.6",
+        "@babel/types": "^7.8.6"
       },
       "dependencies": {
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
+        "@babel/code-frame": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.8.3"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
+          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
           "dev": true,
           "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
+            "@babel/helper-validator-identifier": "^7.9.0",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
           }
         }
       }
     },
     "@babel/traverse": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.8.0.tgz",
-      "integrity": "sha512-d/6sPXFLGlJHZO/zWDtgFaKyalCOHLedzxpVJn6el1cw+f2TZa7xZEszeXdOw6EUemqRFBAn106BWBvtSck9Qw==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.9.6.tgz",
+      "integrity": "sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.8.0",
-        "@babel/generator": "^7.8.0",
-        "@babel/helper-function-name": "^7.8.0",
-        "@babel/helper-split-export-declaration": "^7.8.0",
-        "@babel/parser": "^7.8.0",
-        "@babel/types": "^7.8.0",
+        "@babel/code-frame": "^7.8.3",
+        "@babel/generator": "^7.9.6",
+        "@babel/helper-function-name": "^7.9.5",
+        "@babel/helper-split-export-declaration": "^7.8.3",
+        "@babel/parser": "^7.9.6",
+        "@babel/types": "^7.9.6",
         "debug": "^4.1.0",
         "globals": "^11.1.0",
         "lodash": "^4.17.13"
       },
       "dependencies": {
-        "@babel/generator": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.8.0.tgz",
-          "integrity": "sha512-2Lp2e02CV2C7j/H4n4D9YvsvdhPVVg9GDIamr6Tu4tU35mL3mzOrzl1lZ8ZJtysfZXh+y+AGORc2rPS7yHxBUg==",
+        "@babel/code-frame": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
+          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.8.0",
-            "jsesc": "^2.5.1",
-            "lodash": "^4.17.13",
-            "source-map": "^0.5.0"
+            "@babel/highlight": "^7.8.3"
           }
         },
-        "@babel/types": {
-          "version": "7.8.0",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.8.0.tgz",
-          "integrity": "sha512-1RF84ehyx9HH09dMMwGWl3UTWlVoCPtqqJPjGuC4JzMe1ZIVDJ2DT8mv3cPv/A7veLD6sgR7vi95lJqm+ZayIg==",
+        "@babel/highlight": {
+          "version": "7.9.0",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
+          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
           "dev": true,
           "requires": {
-            "esutils": "^2.0.2",
-            "lodash": "^4.17.13",
-            "to-fast-properties": "^2.0.0"
+            "@babel/helper-validator-identifier": "^7.9.0",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
           }
         }
       }
     },
     "@babel/types": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz",
-      "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==",
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.9.6.tgz",
+      "integrity": "sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==",
       "dev": true,
       "requires": {
-        "esutils": "^2.0.2",
+        "@babel/helper-validator-identifier": "^7.9.5",
         "lodash": "^4.17.13",
         "to-fast-properties": "^2.0.0"
       }
@@ -1507,9 +1388,9 @@
       "dev": true
     },
     "@hapi/hoek": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
-      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw==",
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
+      "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==",
       "dev": true
     },
     "@hapi/joi": {
@@ -1599,6 +1480,26 @@
         "strip-ansi": "^5.0.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -1626,6 +1527,28 @@
         "@jest/transform": "^24.9.0",
         "@jest/types": "^24.9.0",
         "jest-mock": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "@jest/fake-timers": {
@@ -1637,6 +1560,28 @@
         "@jest/types": "^24.9.0",
         "jest-message-util": "^24.9.0",
         "jest-mock": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "@jest/reporters": {
@@ -1668,6 +1613,45 @@
         "string-length": "^2.0.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "node-notifier": {
+          "version": "5.4.3",
+          "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.3.tgz",
+          "integrity": "sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==",
+          "dev": true,
+          "requires": {
+            "growly": "^1.3.0",
+            "is-wsl": "^1.1.0",
+            "semver": "^5.5.0",
+            "shellwords": "^0.1.1",
+            "which": "^1.3.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -1716,6 +1700,28 @@
         "@jest/console": "^24.9.0",
         "@jest/types": "^24.9.0",
         "@types/istanbul-lib-coverage": "^2.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "@jest/test-sequencer": {
@@ -1754,6 +1760,26 @@
         "write-file-atomic": "2.4.1"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -1780,14 +1806,67 @@
       }
     },
     "@jest/types": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
-      "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
+      "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "^2.0.0",
         "@types/istanbul-reports": "^1.1.1",
-        "@types/yargs": "^13.0.0"
+        "@types/yargs": "^15.0.0",
+        "chalk": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "@mrmlnc/readdir-enhanced": {
@@ -1800,40 +1879,12 @@
         "glob-to-regexp": "^0.3.0"
       }
     },
-    "@nodelib/fs.scandir": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
-      "integrity": "sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "2.0.3",
-        "run-parallel": "^1.1.9"
-      },
-      "dependencies": {
-        "@nodelib/fs.stat": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
-          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
-          "dev": true
-        }
-      }
-    },
     "@nodelib/fs.stat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
-    "@nodelib/fs.walk": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz",
-      "integrity": "sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.scandir": "2.1.3",
-        "fastq": "^1.6.0"
-      }
-    },
     "@nuxt/opencollective": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
@@ -1856,33 +1907,71 @@
       }
     },
     "@oclif/command": {
-      "version": "1.5.19",
-      "resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.5.19.tgz",
-      "integrity": "sha512-6+iaCMh/JXJaB2QWikqvGE9//wLEVYYwZd5sud8aLoLKog1Q75naZh2vlGVtg5Mq/NqpqGQvdIjJb3Bm+64AUQ==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.6.0.tgz",
+      "integrity": "sha512-jHLlsi8WzCNTlbSWFBkpNkYdhg7tOV7aV4Kfig+2hbFxuwgf8HTRVzVKBLDmhySWdbzjg1Z7yOpne8rU4hVc8g==",
       "dev": true,
       "requires": {
-        "@oclif/config": "^1",
+        "@oclif/config": "^1.15.1",
         "@oclif/errors": "^1.2.2",
         "@oclif/parser": "^3.8.3",
-        "@oclif/plugin-help": "^2",
+        "@oclif/plugin-help": "^3",
         "debug": "^4.1.1",
         "semver": "^5.6.0"
       },
       "dependencies": {
+        "@oclif/plugin-help": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-3.0.0.tgz",
+          "integrity": "sha512-mrV1O1VXy+ssW0kmIvFYkuEEPYZWKpyqydyHbKa316esAHatsZlrw6cRItf3TuKHTAqeGuXPctPV4mO2e21F9w==",
+          "dev": true,
+          "requires": {
+            "@oclif/command": "^1.5.20",
+            "@oclif/config": "^1.15.1",
+            "chalk": "^2.4.1",
+            "indent-string": "^4.0.0",
+            "lodash.template": "^4.4.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0",
+            "widest-line": "^2.0.1",
+            "wrap-ansi": "^4.0.0"
+          }
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
         }
       }
     },
     "@oclif/config": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/@oclif/config/-/config-1.13.3.tgz",
-      "integrity": "sha512-qs5XvGRw+1M41abOKCjd0uoeHCgsMxa2MurD2g2K8CtQlzlMXl0rW5idVeimIg5208LLuxkfzQo8TKAhhRCWLg==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@oclif/config/-/config-1.15.1.tgz",
+      "integrity": "sha512-GdyHpEZuWlfU8GSaZoiywtfVBsPcfYn1KuSLT1JTfvZGpPG6vShcGr24YZ3HG2jXUFlIuAqDcYlTzOrqOdTPNQ==",
       "dev": true,
       "requires": {
+        "@oclif/errors": "^1.0.0",
         "@oclif/parser": "^3.8.0",
         "debug": "^4.1.1",
         "tslib": "^1.9.3"
@@ -1956,6 +2045,48 @@
         "moment": "^2.22.1"
       },
       "dependencies": {
+        "cli-ux": {
+          "version": "4.9.3",
+          "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-4.9.3.tgz",
+          "integrity": "sha512-/1owvF0SZ5Gn54cgrikJ0QskgTzeg30HGjkmjFoaHDJzAqFpuX1DBpFR8aLvsE1J5s9MgeYRENQK4BFwOag5VA==",
+          "dev": true,
+          "requires": {
+            "@oclif/errors": "^1.2.2",
+            "@oclif/linewrap": "^1.0.0",
+            "@oclif/screen": "^1.0.3",
+            "ansi-escapes": "^3.1.0",
+            "ansi-styles": "^3.2.1",
+            "cardinal": "^2.1.1",
+            "chalk": "^2.4.1",
+            "clean-stack": "^2.0.0",
+            "extract-stack": "^1.0.0",
+            "fs-extra": "^7.0.0",
+            "hyperlinker": "^1.0.0",
+            "indent-string": "^3.2.0",
+            "is-wsl": "^1.1.0",
+            "lodash": "^4.17.11",
+            "password-prompt": "^1.0.7",
+            "semver": "^5.6.0",
+            "strip-ansi": "^5.0.0",
+            "supports-color": "^5.5.0",
+            "supports-hyperlinks": "^1.0.1",
+            "treeify": "^1.1.0",
+            "tslib": "^1.9.3"
+          },
+          "dependencies": {
+            "fs-extra": {
+              "version": "7.0.1",
+              "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+              "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+              "dev": true,
+              "requires": {
+                "graceful-fs": "^4.1.2",
+                "jsonfile": "^4.0.0",
+                "universalify": "^0.1.0"
+              }
+            }
+          }
+        },
         "debug": {
           "version": "3.2.6",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
@@ -1976,11 +2107,32 @@
             "universalify": "^0.1.0"
           }
         },
+        "indent-string": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
+          "dev": true
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
         }
       }
     },
@@ -2033,36 +2185,15 @@
         "cli-ux": "^4.9.0",
         "fast-levenshtein": "^2.0.6",
         "lodash": "^4.17.13"
-      }
-    },
-    "@oclif/plugin-plugins": {
-      "version": "1.7.9",
-      "resolved": "https://registry.npmjs.org/@oclif/plugin-plugins/-/plugin-plugins-1.7.9.tgz",
-      "integrity": "sha512-o7qfmiUGl+NUyA2lM18/Ch5sasGGYPIINR3cZ/AjwtdQ3ooINnF00pUDcUOtbjW97gRmk6/j79tcyTo8i7rHZg==",
-      "dev": true,
-      "requires": {
-        "@oclif/color": "^0.0.0",
-        "@oclif/command": "^1.5.12",
-        "chalk": "^2.4.2",
-        "cli-ux": "^5.2.1",
-        "debug": "^4.1.0",
-        "fs-extra": "^7.0.1",
-        "http-call": "^5.2.2",
-        "load-json-file": "^5.2.0",
-        "npm-run-path": "^3.0.0",
-        "semver": "^5.6.0",
-        "tslib": "^1.9.3",
-        "yarn": "^1.21.1"
       },
       "dependencies": {
         "cli-ux": {
-          "version": "5.4.1",
-          "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-5.4.1.tgz",
-          "integrity": "sha512-x5CJXJPKBrEo6o8Uy/Upajb9OWYMhTzOpRvKZyZ68kkHysiGd9phGP71WyHZfLUkhwdvpNUFkY2tsDr0ogyocg==",
+          "version": "4.9.3",
+          "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-4.9.3.tgz",
+          "integrity": "sha512-/1owvF0SZ5Gn54cgrikJ0QskgTzeg30HGjkmjFoaHDJzAqFpuX1DBpFR8aLvsE1J5s9MgeYRENQK4BFwOag5VA==",
           "dev": true,
           "requires": {
-            "@oclif/command": "^1.5.1",
-            "@oclif/errors": "^1.2.1",
+            "@oclif/errors": "^1.2.2",
             "@oclif/linewrap": "^1.0.0",
             "@oclif/screen": "^1.0.3",
             "ansi-escapes": "^3.1.0",
@@ -2070,25 +2201,64 @@
             "cardinal": "^2.1.1",
             "chalk": "^2.4.1",
             "clean-stack": "^2.0.0",
-            "cli-progress": "^3.4.0",
             "extract-stack": "^1.0.0",
-            "fs-extra": "^7.0.1",
+            "fs-extra": "^7.0.0",
             "hyperlinker": "^1.0.0",
-            "indent-string": "^4.0.0",
+            "indent-string": "^3.2.0",
             "is-wsl": "^1.1.0",
-            "js-yaml": "^3.13.1",
             "lodash": "^4.17.11",
-            "natural-orderby": "^2.0.1",
-            "password-prompt": "^1.1.2",
+            "password-prompt": "^1.0.7",
             "semver": "^5.6.0",
-            "string-width": "^3.1.0",
-            "strip-ansi": "^5.1.0",
+            "strip-ansi": "^5.0.0",
             "supports-color": "^5.5.0",
             "supports-hyperlinks": "^1.0.1",
             "treeify": "^1.1.0",
             "tslib": "^1.9.3"
           }
         },
+        "indent-string": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
+          "dev": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
+      }
+    },
+    "@oclif/plugin-plugins": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/@oclif/plugin-plugins/-/plugin-plugins-1.7.9.tgz",
+      "integrity": "sha512-o7qfmiUGl+NUyA2lM18/Ch5sasGGYPIINR3cZ/AjwtdQ3ooINnF00pUDcUOtbjW97gRmk6/j79tcyTo8i7rHZg==",
+      "dev": true,
+      "requires": {
+        "@oclif/color": "^0.0.0",
+        "@oclif/command": "^1.5.12",
+        "chalk": "^2.4.2",
+        "cli-ux": "^5.2.1",
+        "debug": "^4.1.0",
+        "fs-extra": "^7.0.1",
+        "http-call": "^5.2.2",
+        "load-json-file": "^5.2.0",
+        "npm-run-path": "^3.0.0",
+        "semver": "^5.6.0",
+        "tslib": "^1.9.3",
+        "yarn": "^1.21.1"
+      },
+      "dependencies": {
         "npm-run-path": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
@@ -2109,26 +2279,6 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
         }
       }
     },
@@ -2294,6 +2444,12 @@
         }
       }
     },
+    "@soda/get-current-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@soda/get-current-script/-/get-current-script-1.0.0.tgz",
+      "integrity": "sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg==",
+      "dev": true
+    },
     "@types/accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
@@ -2304,9 +2460,9 @@
       }
     },
     "@types/babel__core": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.3.tgz",
-      "integrity": "sha512-8fBo0UR2CcwWxeX7WIIgJ7lXjasFxoYgRnFHUj+hRvKkpiBJbxhdAPTCY6/ZKM0uxANFVzt4yObSLuTiTnazDA==",
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.7.tgz",
+      "integrity": "sha512-RL62NqSFPCDK2FM1pSDH0scHpJvsXtZNiYlMB73DgPBaG1E38ZYVL+ei5EkWRbr+KC4YNiAUNBnRj+bgwpgjMw==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.1.0",
@@ -2336,18 +2492,18 @@
       }
     },
     "@types/babel__traverse": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.8.tgz",
-      "integrity": "sha512-yGeB2dHEdvxjP0y4UbRtQaSkXJ9649fYCmIdRoul5kfAoGCwxuCbMhag0k3RPfnuh9kPGm8x89btcfDEXdVWGw==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.11.tgz",
+      "integrity": "sha512-ddHK5icION5U6q11+tV2f9Mo6CZVuT8GJKld2q9LqHSZbvLbH34Kcu2yFGckZut453+eQU6btIA3RihmnRgI+Q==",
       "dev": true,
       "requires": {
         "@babel/types": "^7.3.0"
       }
     },
     "@types/body-parser": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.17.1.tgz",
-      "integrity": "sha512-RoX2EZjMiFMjZh9lmYrwgoP9RTpAjSHiJxdp4oidAQVO02T7HER3xj9UKue5534ULWeqVEkujhWcyvUce+d68w==",
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
       "dev": true,
       "requires": {
         "@types/connect": "*",
@@ -2369,6 +2525,12 @@
         "@types/node": "*"
       }
     },
+    "@types/content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-P1bffQfhD3O4LW0ioENXUhZ9OIa0Zn+P7M+pWgkCKaT53wVLSq0mrKksCID/FGHpFhRSxRGhgrQmfhRuzwtKdg==",
+      "dev": true
+    },
     "@types/cookies": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.4.tgz",
@@ -2403,23 +2565,25 @@
       "dev": true
     },
     "@types/express": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.2.tgz",
-      "integrity": "sha512-5mHFNyavtLoJmnusB8OKJ5bshSzw+qkMIBAobLrIM48HJvunFva9mOa6aBwh64lBFyNwBbs0xiEFuj4eU/NjCA==",
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.4.tgz",
+      "integrity": "sha512-DO1L53rGqIDUEvOjJKmbMEQ5Z+BM2cIEPy/eV3En+s166Gz+FeuzRerxcab757u/U4v4XF4RYrZPmqKa+aY/2w==",
       "dev": true,
       "requires": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "*",
+        "@types/qs": "*",
         "@types/serve-static": "*"
       }
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.1.tgz",
-      "integrity": "sha512-9e7jj549ZI+RxY21Cl0t8uBnWyb22HzILupyHZjYEVK//5TT/1bZodU+yUbLnPdoYViBBnNWbxp4zYjGV0zUGw==",
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.7.tgz",
+      "integrity": "sha512-EMgTj/DF9qpgLXyc+Btimg+XoH7A2liE8uKul8qSmMTHCeNYzydDKFdsJskDvw42UsesCnhO63dO0Grbj8J4Dw==",
       "dev": true,
       "requires": {
         "@types/node": "*",
+        "@types/qs": "*",
         "@types/range-parser": "*"
       }
     },
@@ -2476,9 +2640,9 @@
       "dev": true
     },
     "@types/istanbul-lib-report": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz",
-      "integrity": "sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "*"
@@ -2495,12 +2659,13 @@
       }
     },
     "@types/jest": {
-      "version": "24.0.25",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.0.25.tgz",
-      "integrity": "sha512-hnP1WpjN4KbGEK4dLayul6lgtys6FPz0UfxMeMQCv0M+sTnzN3ConfiO72jHgLxl119guHgI8gLqDOrRLsyp2g==",
+      "version": "25.2.1",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.1.tgz",
+      "integrity": "sha512-msra1bCaAeEdkSyA0CZ6gW1ukMIvZ5YoJkdXw/qhQdsuuDlFTcEUrUw8CLCPt2rVRUfXlClVvK2gvPs9IokZaA==",
       "dev": true,
       "requires": {
-        "jest-diff": "^24.3.0"
+        "jest-diff": "^25.2.1",
+        "pretty-format": "^25.2.1"
       }
     },
     "@types/json-schema": {
@@ -2516,12 +2681,13 @@
       "dev": true
     },
     "@types/koa": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/@types/koa/-/koa-2.11.0.tgz",
-      "integrity": "sha512-Hgx/1/rVlJvqYBrdeCsS7PDiR2qbxlMt1RnmNWD4Uxi5FF9nwkYqIldo7urjc+dfNpk+2NRGcnAYd4L5xEhCcQ==",
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/@types/koa/-/koa-2.11.3.tgz",
+      "integrity": "sha512-ABxVkrNWa4O/Jp24EYI/hRNqEVRlhB9g09p48neQp4m3xL1TJtdWk2NyNQSMCU45ejeELMQZBYyfstyVvO2H3Q==",
       "dev": true,
       "requires": {
         "@types/accepts": "*",
+        "@types/content-disposition": "*",
         "@types/cookies": "*",
         "@types/http-assert": "*",
         "@types/keygrip": "*",
@@ -2545,20 +2711,27 @@
       "dev": true
     },
     "@types/long": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.0.tgz",
-      "integrity": "sha512-1w52Nyx4Gq47uuu0EVcsHBxZFJgurQ+rTKS3qMHxR1GY2T8c2AJYd6vZoZ9q1rupaDjU0yT+Jc2XTyXkjeMA+Q==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w==",
       "dev": true
     },
     "@types/markdown-it": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-0.0.9.tgz",
-      "integrity": "sha512-IFSepyZXbF4dgSvsk8EsgaQ/8Msv1I5eTL0BZ0X3iGO9jw6tCVtPG8HchIPm3wrkmGdqZOD42kE0zplVi1gYDA==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-10.0.1.tgz",
+      "integrity": "sha512-L1ibTdA5IUe/cRBlf3N3syAOBQSN1WCMGtAWir6mKxibiRl4LmpZM4jLz+7zAqiMnhQuAP1sqZOF9wXgn2kpEg==",
       "dev": true,
       "requires": {
-        "@types/linkify-it": "*"
+        "@types/linkify-it": "*",
+        "@types/mdurl": "*"
       }
     },
+    "@types/mdurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.2.tgz",
+      "integrity": "sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==",
+      "dev": true
+    },
     "@types/mime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.1.tgz",
@@ -2572,17 +2745,31 @@
       "dev": true
     },
     "@types/node": {
-      "version": "13.1.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.6.tgz",
-      "integrity": "sha512-Jg1F+bmxcpENHP23sVKkNuU3uaxPnsBMW0cLjleiikFKomJQbsn0Cqk2yDvQArqzZN6ABfBkZ0To7pQ8sLdWDg=="
+      "version": "13.13.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.5.tgz",
+      "integrity": "sha512-3ySmiBYJPqgjiHA7oEaIo2Rzz0HrOZ7yrNO5HWyaE5q0lQ3BppDZ3N53Miz8bw2I7gh1/zir2MGVZBvpb1zq9g=="
     },
     "@types/node-fetch": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.5.4.tgz",
-      "integrity": "sha512-Oz6id++2qAOFuOlE1j0ouk1dzl3mmI1+qINPNBhi9nt/gVOz0G+13Ao6qjhdF0Ys+eOkhu6JnFmt38bR3H0POQ==",
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.5.7.tgz",
+      "integrity": "sha512-o2WVNf5UhWRkxlf6eq+jMZDu7kjgpgJfl4xVNlvryc95O/6F2ld8ztKX+qu+Rjyet93WAWm5LjeX9H5FGkODvw==",
       "dev": true,
       "requires": {
-        "@types/node": "*"
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
       }
     },
     "@types/normalize-package-data": {
@@ -2591,12 +2778,29 @@
       "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
       "dev": true
     },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
+    "@types/punycode": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/punycode/-/punycode-2.1.0.tgz",
+      "integrity": "sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g=="
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/qs": {
+      "version": "6.9.2",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.2.tgz",
+      "integrity": "sha512-a9bDi4Z3zCZf4Lv1X/vwnvbbDYSNz59h3i3KdyuYYN+YrLjSeJD0dnphdULDfySvUv6Exy/O0K6wX/kQpnPQ+A==",
+      "dev": true
+    },
     "@types/range-parser": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
@@ -2632,33 +2836,33 @@
       "dev": true
     },
     "@types/webpack-env": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.15.0.tgz",
-      "integrity": "sha512-TfcyNecCz8Z9/s90gBOBniyzZrTru8u2Vp0VZODq4KEBaQu8bfXvu7o/KUOecMpzjbFPUA7aqgSq628Iue5BQg==",
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.15.2.tgz",
+      "integrity": "sha512-67ZgZpAlhIICIdfQrB5fnDvaKFcDxpKibxznfYRVAT4mQE41Dido/3Ty+E3xGBmTogc5+0Qb8tWhna+5B8z1iQ==",
       "dev": true
     },
     "@types/ws": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-6.0.4.tgz",
-      "integrity": "sha512-PpPrX7SZW9re6+Ha8ojZG4Se8AZXgf0GK6zmfqEuCsY49LFDNXO3SByp44X3dFEqtB73lkCDAdUazhAjVPiNwg==",
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.2.4.tgz",
+      "integrity": "sha512-9S6Ask71vujkVyeEXKxjBSUV8ZUB0mjL5la4IncBoheu04bDaYyUKErh1BQcY9+WzOUOiKqz/OnpJHYckbMfNg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
       }
     },
     "@types/yargs": {
-      "version": "13.0.5",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.5.tgz",
-      "integrity": "sha512-CF/+sxTO7FOwbIRL4wMv0ZYLCRfMid2HQpzDRyViH7kSpfoAFiMdGqKIxb1PxWfjtQXQhnQuD33lvRHNwr809Q==",
+      "version": "15.0.4",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.4.tgz",
+      "integrity": "sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==",
       "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
       }
     },
     "@types/yargs-parser": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-13.1.0.tgz",
-      "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
+      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
       "dev": true
     },
     "@types/zen-observable": {
@@ -2668,24 +2872,17 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.15.0.tgz",
-      "integrity": "sha512-XRJFznI5v4K1WvIrWmjFjBAdQWaUTz4xJEdqR7+wAFsv6Q9dP3mOlE6BMNT3pdlp9eF1+bC5m5LZTmLMqffCVw==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.31.0.tgz",
+      "integrity": "sha512-iIC0Pb8qDaoit+m80Ln/aaeu9zKQdOLF4SHcGLarSeY1gurW6aU4JsOPMjKQwXlw70MvWKZQc6S2NamA8SJ/gg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "2.15.0",
-        "eslint-utils": "^1.4.3",
+        "@typescript-eslint/experimental-utils": "2.31.0",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
         "tsutils": "^3.17.1"
       },
       "dependencies": {
-        "regexpp": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.0.0.tgz",
-          "integrity": "sha512-Z+hNr7RAVWxznLPuA7DIh8UNX1j9CDrUQxskw9IrBE1Dxue2lyXT+shqEIeLUjrokxIP8CMy1WkjgG3rTsd5/g==",
-          "dev": true
-        },
         "tsutils": {
           "version": "3.17.1",
           "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
@@ -2698,14 +2895,15 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.15.0.tgz",
-      "integrity": "sha512-Qkxu5zndY5hqlcQkmA88gfLvqQulMpX/TN91XC7OuXsRf4XG5xLGie0sbpX97o/oeccjeZYRMipIsjKk/tjDHA==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.31.0.tgz",
+      "integrity": "sha512-MI6IWkutLYQYTQgZ48IVnRXmLR/0Q6oAyJgiOror74arUMh7EWjJkADfirZhRsUMHeLJ85U2iySDwHTSnNi9vA==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "2.15.0",
-        "eslint-scope": "^5.0.0"
+        "@typescript-eslint/typescript-estree": "2.31.0",
+        "eslint-scope": "^5.0.0",
+        "eslint-utils": "^2.0.0"
       },
       "dependencies": {
         "eslint-scope": {
@@ -2721,28 +2919,28 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.15.0.tgz",
-      "integrity": "sha512-6iSgQsqAYTaHw59t0tdjzZJluRAjswdGltzKEdLtcJOxR2UVTPHYvZRqkAVGCkaMVb6Fpa60NnuozNCvsSpA9g==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.31.0.tgz",
+      "integrity": "sha512-uph+w6xUOlyV2DLSC6o+fBDzZ5i7+3/TxAsH4h3eC64tlga57oMb96vVlXoMwjR/nN+xyWlsnxtbDkB46M2EPQ==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "2.15.0",
-        "@typescript-eslint/typescript-estree": "2.15.0",
+        "@typescript-eslint/experimental-utils": "2.31.0",
+        "@typescript-eslint/typescript-estree": "2.31.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "2.15.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.15.0.tgz",
-      "integrity": "sha512-L6Pog+w3VZzXkAdyqA0VlwybF8WcwZX+mufso86CMxSdWmcizJ38lgBdpqTbc9bo92iyi0rOvmATKiwl+amjxg==",
+      "version": "2.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.31.0.tgz",
+      "integrity": "sha512-vxW149bXFXXuBrAak0eKHOzbcu9cvi6iNcJDzEtOkRwGHxJG15chiAQAwhLOsk+86p9GTr/TziYvw+H9kMaIgA==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
         "eslint-visitor-keys": "^1.1.0",
         "glob": "^7.1.6",
         "is-glob": "^4.0.1",
-        "lodash.unescape": "4.0.1",
+        "lodash": "^4.17.15",
         "semver": "^6.3.0",
         "tsutils": "^3.17.1"
       },
@@ -2779,24 +2977,25 @@
       }
     },
     "@vue/babel-preset-app": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.1.2.tgz",
-      "integrity": "sha512-M2vodPy1Wh0ZIlBf2MA3mhHvxuFp6dwx5nHxBSd4VpBdrgq4Jb0ECbGnNcH9RI2yNPfkoyiHmqOGDQoFGt+FUg==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.7.4",
-        "@babel/helper-module-imports": "^7.7.4",
-        "@babel/plugin-proposal-class-properties": "^7.7.4",
-        "@babel/plugin-proposal-decorators": "^7.7.4",
-        "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-        "@babel/plugin-syntax-jsx": "^7.7.4",
-        "@babel/plugin-transform-runtime": "^7.7.4",
-        "@babel/preset-env": "^7.7.4",
-        "@babel/runtime": "^7.7.4",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.3.1.tgz",
+      "integrity": "sha512-iNkySkbRWXGUA+Cvzj+/gEP0Y0uVAwwzfn21S7hkggSeIg9LJyZ+QzdxgKO0wgi01yTdb2mYWgeLQAfHZ65aew==",
+      "dev": true,
+      "requires": {
+        "@babel/core": "^7.9.0",
+        "@babel/helper-compilation-targets": "^7.8.7",
+        "@babel/helper-module-imports": "^7.8.3",
+        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-proposal-decorators": "^7.8.3",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-jsx": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.9.0",
+        "@babel/preset-env": "^7.9.0",
+        "@babel/runtime": "^7.9.2",
         "@vue/babel-preset-jsx": "^1.1.2",
-        "babel-plugin-dynamic-import-node": "^2.2.0",
-        "core-js": "^3.4.4",
-        "core-js-compat": "^3.4.4"
+        "babel-plugin-dynamic-import-node": "^2.3.0",
+        "core-js": "^3.6.4",
+        "core-js-compat": "^3.6.4"
       }
     },
     "@vue/babel-preset-jsx": {
@@ -2873,132 +3072,327 @@
       }
     },
     "@vue/cli": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli/-/cli-4.1.2.tgz",
-      "integrity": "sha512-CGBcPFvnWnZMV+7Q4FI8yBWkQKECXYQ2Sf8YWoqn5ZG3ZRODG8dXSejg1O0VktKtPl7IVYYXOOqvyerV11fYmw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli/-/cli-4.3.1.tgz",
+      "integrity": "sha512-K4oxL3/RLKrS53r9hr7mvtDDURCnuiMIaoOPa65TU8kVmEXohdebMAKUmHebk/yENPtBIdpQ9YankV/TWjRMhQ==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.1.2",
-        "@vue/cli-ui": "^4.1.2",
-        "@vue/cli-ui-addon-webpack": "^4.1.2",
-        "@vue/cli-ui-addon-widgets": "^4.1.2",
+        "@vue/cli-shared-utils": "^4.3.1",
+        "@vue/cli-ui": "^4.3.1",
+        "@vue/cli-ui-addon-webpack": "^4.3.1",
+        "@vue/cli-ui-addon-widgets": "^4.3.1",
         "boxen": "^4.1.0",
         "cmd-shim": "^3.0.3",
         "commander": "^2.20.0",
         "debug": "^4.1.0",
-        "deepmerge": "^3.2.0",
-        "didyoumean": "^1.2.1",
-        "download-git-repo": "^1.0.2",
+        "deepmerge": "^4.2.2",
+        "download-git-repo": "^3.0.2",
         "ejs": "^2.7.1",
         "envinfo": "^7.5.0",
         "fs-extra": "^7.0.1",
         "globby": "^9.2.0",
         "import-global": "^0.1.0",
-        "inquirer": "^6.3.1",
-        "isbinaryfile": "^4.0.0",
+        "inquirer": "^7.1.0",
+        "isbinaryfile": "^4.0.5",
         "javascript-stringify": "^1.6.0",
         "js-yaml": "^3.13.1",
-        "jscodeshift": "^0.6.4",
+        "jscodeshift": "^0.7.0",
+        "leven": "^3.1.0",
         "lodash.clonedeep": "^4.5.0",
         "lru-cache": "^5.1.1",
-        "minimist": "^1.2.0",
-        "recast": "^0.18.1",
-        "resolve": "^1.13.1",
+        "minimist": "^1.2.5",
+        "recast": "^0.18.8",
+        "resolve": "^1.15.1",
         "shortid": "^2.2.15",
         "slash": "^3.0.0",
         "validate-npm-package-name": "^3.0.0",
+        "vue": "^2.6.11",
         "vue-jscodeshift-adapter": "^2.0.2",
         "yaml-front-matter": "^3.4.1"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.17.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        }
       }
     },
     "@vue/cli-overlay": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.1.2.tgz",
-      "integrity": "sha512-d+joLTtthj6l1JnCeFyJRKoISBQeqKZQY0EIYnJBcPPR3/dEKctMRkh5Sy1MR0H1JQQIko9CPrFjT/NHFW48Mg==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.3.1.tgz",
+      "integrity": "sha512-UA399aWHhre2VHrQFQSJhFLrFMqOYQ8ly+Ni6T+cpCjOwssjiaqaqrG5YiZBAqDwQvjrtYori4lU66qrY5DVhA==",
       "dev": true
     },
     "@vue/cli-plugin-babel": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.1.2.tgz",
-      "integrity": "sha512-/j998Q16h8gbYcYf2sE+CYobCpIzDYtOJ76JuhJZnCfy5H8gh4g+x5fepbLs0gOW/cZ2OQxJFx7Jd/yT2/G/qQ==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.3.1.tgz",
+      "integrity": "sha512-tBqu0v1l4LfWX8xuJmofpp+8xQzKddFNxdLmeVDOX/omDBQX0qaVDeMUtRxxSTazI06SKr605SnUQoa35qwbvw==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.7.4",
-        "@vue/babel-preset-app": "^4.1.2",
-        "@vue/cli-shared-utils": "^4.1.2",
-        "babel-loader": "^8.0.6",
+        "@babel/core": "^7.9.0",
+        "@vue/babel-preset-app": "^4.3.1",
+        "@vue/cli-shared-utils": "^4.3.1",
+        "babel-loader": "^8.1.0",
         "cache-loader": "^4.1.0",
         "thread-loader": "^2.1.3",
         "webpack": "^4.0.0"
       }
     },
     "@vue/cli-plugin-e2e-nightwatch": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-nightwatch/-/cli-plugin-e2e-nightwatch-4.1.2.tgz",
-      "integrity": "sha512-zZVNg4jxeN3ln7lYJT/M3w4M2XHCkHr94mj2WEDPCjRaFv2bnNOyCR4tmHdeyhMHacPTb7R6bN7z45TNNDgKuw==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-nightwatch/-/cli-plugin-e2e-nightwatch-4.3.1.tgz",
+      "integrity": "sha512-5g46AV2z+8etx89O+FQLQuKkuEx75e9Y5v49iQgnbMMuDYT4bizilk4RyO/R3Tq/ePUHfyq10b0trROmG40JvQ==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.1.2",
-        "deepmerge": "^3.2.0",
-        "nightwatch": "^1.3.1"
+        "@vue/cli-shared-utils": "^4.3.1",
+        "deepmerge": "^4.2.2",
+        "nightwatch": "^1.3.4"
       }
     },
     "@vue/cli-plugin-eslint": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.1.2.tgz",
-      "integrity": "sha512-j6Z6tyhas7AFBwSvQ8JdKPLfaakZbwmK0+Xk8H6BK1/GrEpSCsb8pzBV8faStbKCPUO9vlKEuO319kHypUTJ1g==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.3.1.tgz",
+      "integrity": "sha512-5UEP93b8C/JQs9Rnuldsu8jMz0XO4wNXG0lL/GdChYBEheKCyXJXzan7qzEbIuvUwG3I+qlUkGsiyNokIgXejg==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.1.2",
-        "eslint-loader": "^2.1.2",
+        "@vue/cli-shared-utils": "^4.3.1",
+        "eslint-loader": "^2.2.1",
         "globby": "^9.2.0",
+        "inquirer": "^7.1.0",
         "webpack": "^4.0.0",
         "yorkie": "^2.0.0"
       }
     },
     "@vue/cli-plugin-router": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.1.2.tgz",
-      "integrity": "sha512-P1OwZfskUzs8KoQDozT+TfSKREMB8NpJ34raor8CiXtM80pdaNU+mO1HLOvl9ckaOWbAgNrxFmANiSBvHzSo+w==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.3.1.tgz",
+      "integrity": "sha512-m0ntr5R6q62oNMODgoyHAVAd/sDtsH15GdBrScZsPNeyHxmzmNBDlsNM38yYGGY064zDRRWif15d1yaTREybrA==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.1.2"
+        "@vue/cli-shared-utils": "^4.3.1"
+      },
+      "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
+          "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
+          "dev": true,
+          "requires": {
+            "@hapi/joi": "^15.0.1",
+            "chalk": "^2.4.2",
+            "execa": "^1.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^5.1.1",
+            "node-ipc": "^9.1.1",
+            "open": "^6.3.0",
+            "ora": "^3.4.0",
+            "read-pkg": "^5.1.1",
+            "request": "^2.88.2",
+            "request-promise-native": "^1.0.8",
+            "semver": "^6.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "read-pkg": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+          "dev": true,
+          "requires": {
+            "@types/normalize-package-data": "^2.4.0",
+            "normalize-package-data": "^2.5.0",
+            "parse-json": "^5.0.0",
+            "type-fest": "^0.6.0"
+          }
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.5.0",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        },
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
       }
     },
     "@vue/cli-plugin-typescript": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.1.2.tgz",
-      "integrity": "sha512-oHLzVG2tPlkHNMuTkqm4PuYMgkhoHCPQYuoWIAaFZ0cNR8VhcrNPX4xAxvuGh0bvOaHnBWgZVK1LBUkm9H4Gpg==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.3.1.tgz",
+      "integrity": "sha512-Uos7MTqG0btNMMhZdgLTPx24fqiiHhqz0Bow2rTeNa0piDeSjiQdyq0vgVKqJOLUu8zkvmG2jKUr15QQ0+yobQ==",
       "dev": true,
       "requires": {
-        "@types/webpack-env": "^1.13.9",
-        "@vue/cli-shared-utils": "^4.1.2",
+        "@types/webpack-env": "^1.15.1",
+        "@vue/cli-shared-utils": "^4.3.1",
         "cache-loader": "^4.1.0",
-        "fork-ts-checker-webpack-plugin": "^1.5.1",
+        "fork-ts-checker-webpack-plugin": "^3.1.1",
         "globby": "^9.2.0",
         "thread-loader": "^2.1.3",
-        "ts-loader": "^6.2.1",
+        "ts-loader": "^6.2.2",
         "tslint": "^5.20.1",
         "webpack": "^4.0.0",
         "yorkie": "^2.0.0"
+      },
+      "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
+          "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
+          "dev": true,
+          "requires": {
+            "@hapi/joi": "^15.0.1",
+            "chalk": "^2.4.2",
+            "execa": "^1.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^5.1.1",
+            "node-ipc": "^9.1.1",
+            "open": "^6.3.0",
+            "ora": "^3.4.0",
+            "read-pkg": "^5.1.1",
+            "request": "^2.88.2",
+            "request-promise-native": "^1.0.8",
+            "semver": "^6.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "read-pkg": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+          "dev": true,
+          "requires": {
+            "@types/normalize-package-data": "^2.4.0",
+            "normalize-package-data": "^2.5.0",
+            "parse-json": "^5.0.0",
+            "type-fest": "^0.6.0"
+          }
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.5.0",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        },
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
       }
     },
     "@vue/cli-plugin-unit-jest": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.1.2.tgz",
-      "integrity": "sha512-9DbN/JA37RmZgEczowDJE2pZjS/6nqMoP21hiT2ZgGq0rcfbqtH7/gDjzqkNX/1URaaPPT0PYSNS6lMMur6eAA==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.3.1.tgz",
+      "integrity": "sha512-mhIqwW6UGsPEOlw+rHBQjhlCjSxD9fKuVVVtkl989/bFZA17ZsdDrj/BfMTwX8mvoY5x6pPXb+Ti/opkkAOD7w==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.7.4",
-        "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+        "@babel/core": "^7.9.0",
+        "@babel/plugin-transform-modules-commonjs": "^7.9.0",
         "@types/jest": "^24.0.19",
-        "@vue/cli-shared-utils": "^4.1.2",
+        "@vue/cli-shared-utils": "^4.3.1",
         "babel-core": "^7.0.0-bridge.0",
         "babel-jest": "^24.9.0",
         "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-        "deepmerge": "^4.0.0",
+        "deepmerge": "^4.2.2",
         "jest": "^24.9.0",
-        "jest-environment-jsdom-fifteen": "^1.0.0",
+        "jest-environment-jsdom-fifteen": "^1.0.2",
         "jest-serializer-vue": "^2.0.2",
         "jest-transform-stub": "^2.0.0",
         "jest-watch-typeahead": "^0.4.2",
@@ -3006,49 +3400,141 @@
         "vue-jest": "^3.0.5"
       },
       "dependencies": {
-        "deepmerge": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/jest": {
+          "version": "24.9.1",
+          "resolved": "https://registry.npmjs.org/@types/jest/-/jest-24.9.1.tgz",
+          "integrity": "sha512-Fb38HkXSVA4L8fGKEZ6le5bB8r6MRWlOCZbVuWZcmOMSCd2wCYOwN1ibj8daIoV9naq7aaOZjrLCoCMptKU/4Q==",
+          "dev": true,
+          "requires": {
+            "jest-diff": "^24.3.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "diff-sequences": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
+          "integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
           "dev": true
-        }
-      }
-    },
-    "@vue/cli-plugin-vuex": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.1.2.tgz",
-      "integrity": "sha512-qsf8sfUUtTuFf24iB6vbdapvCTCt4FqLj7r66POutGWmBCTlPHsMaAXMaD2ZD53/hqr8QHd/557IUensSwj5wA==",
-      "dev": true
-    },
-    "@vue/cli-service": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.1.2.tgz",
-      "integrity": "sha512-ljJ3qoR5NNHuG0HPqQyfO3xa4Ti5zCSmHp0tDYxgiVz1vMDvzPXBhGBGsc2Y1HH71BUyx3Ei+H7mWdML/+Bm9Q==",
-      "dev": true,
-      "requires": {
-        "@intervolga/optimize-cssnano-plugin": "^1.0.5",
-        "@soda/friendly-errors-webpack-plugin": "^1.7.1",
-        "@vue/cli-overlay": "^4.1.2",
-        "@vue/cli-plugin-router": "^4.1.2",
-        "@vue/cli-plugin-vuex": "^4.1.2",
-        "@vue/cli-shared-utils": "^4.1.2",
-        "@vue/component-compiler-utils": "^3.0.2",
-        "@vue/preload-webpack-plugin": "^1.1.0",
-        "@vue/web-component-wrapper": "^1.2.0",
-        "acorn": "^6.1.1",
-        "acorn-walk": "^6.1.1",
+        },
+        "jest-diff": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.9.0.tgz",
+          "integrity": "sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "diff-sequences": "^24.9.0",
+            "jest-get-type": "^24.9.0",
+            "pretty-format": "^24.9.0"
+          }
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "ts-jest": {
+          "version": "24.3.0",
+          "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-24.3.0.tgz",
+          "integrity": "sha512-Hb94C/+QRIgjVZlJyiWwouYUF+siNJHJHknyspaOcZ+OQAIdFG/UrdQVXw/0B8Z3No34xkUXZJpOTy9alOWdVQ==",
+          "dev": true,
+          "requires": {
+            "bs-logger": "0.x",
+            "buffer-from": "1.x",
+            "fast-json-stable-stringify": "2.x",
+            "json5": "2.x",
+            "lodash.memoize": "4.x",
+            "make-error": "1.x",
+            "mkdirp": "0.x",
+            "resolve": "1.x",
+            "semver": "^5.5",
+            "yargs-parser": "10.x"
+          }
+        },
+        "yargs-parser": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
+          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^4.1.0"
+          }
+        }
+      }
+    },
+    "@vue/cli-plugin-vuex": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.3.1.tgz",
+      "integrity": "sha512-mukwOlhZGBJhkqO2b3wHFFHjK5aP00b1WUHdrOfLR7M18euhaTyb4kA5nwZwEOmU3EzZx6kHzSFCRy/XaMkLug==",
+      "dev": true
+    },
+    "@vue/cli-service": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.3.1.tgz",
+      "integrity": "sha512-CsNGfHe+9oKZdRwJmweQ0KsMYM27ssg1eNQqRKL/t+IgDLO3Tu86uaOOCLn4ZAaU5oxxpq4aSFvz+A0YxQRSWw==",
+      "dev": true,
+      "requires": {
+        "@intervolga/optimize-cssnano-plugin": "^1.0.5",
+        "@soda/friendly-errors-webpack-plugin": "^1.7.1",
+        "@soda/get-current-script": "^1.0.0",
+        "@vue/cli-overlay": "^4.3.1",
+        "@vue/cli-plugin-router": "^4.3.1",
+        "@vue/cli-plugin-vuex": "^4.3.1",
+        "@vue/cli-shared-utils": "^4.3.1",
+        "@vue/component-compiler-utils": "^3.0.2",
+        "@vue/preload-webpack-plugin": "^1.1.0",
+        "@vue/web-component-wrapper": "^1.2.0",
+        "acorn": "^7.1.0",
+        "acorn-walk": "^7.1.1",
         "address": "^1.1.2",
-        "autoprefixer": "^9.7.2",
-        "browserslist": "^4.7.3",
+        "autoprefixer": "^9.7.5",
+        "browserslist": "^4.11.1",
         "cache-loader": "^4.1.0",
-        "case-sensitive-paths-webpack-plugin": "^2.2.0",
+        "case-sensitive-paths-webpack-plugin": "^2.3.0",
         "cli-highlight": "^2.1.4",
-        "clipboardy": "^2.0.0",
-        "cliui": "^5.0.0",
-        "copy-webpack-plugin": "^5.0.5",
-        "css-loader": "^3.1.0",
+        "clipboardy": "^2.3.0",
+        "cliui": "^6.0.0",
+        "copy-webpack-plugin": "^5.1.1",
+        "css-loader": "^3.4.2",
         "cssnano": "^4.1.10",
-        "current-script-polyfill": "^1.0.0",
         "debug": "^4.1.1",
         "default-gateway": "^5.0.5",
         "dotenv": "^8.2.0",
@@ -3056,30 +3542,97 @@
         "file-loader": "^4.2.0",
         "fs-extra": "^7.0.1",
         "globby": "^9.2.0",
-        "hash-sum": "^1.0.2",
+        "hash-sum": "^2.0.0",
         "html-webpack-plugin": "^3.2.0",
         "launch-editor-middleware": "^2.2.1",
         "lodash.defaultsdeep": "^4.6.1",
         "lodash.mapvalues": "^4.6.0",
         "lodash.transform": "^4.6.0",
-        "mini-css-extract-plugin": "^0.8.0",
-        "minimist": "^1.2.0",
+        "mini-css-extract-plugin": "^0.9.0",
+        "minimist": "^1.2.5",
+        "pnp-webpack-plugin": "^1.6.4",
         "portfinder": "^1.0.25",
         "postcss-loader": "^3.0.0",
-        "read-pkg": "^5.1.1",
         "ssri": "^7.1.0",
-        "terser-webpack-plugin": "^2.2.1",
+        "terser-webpack-plugin": "^2.3.5",
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
-        "vue-loader": "^15.7.2",
-        "vue-style-loader": "^4.1.0",
+        "vue-loader": "^15.9.1",
+        "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
-        "webpack-bundle-analyzer": "^3.6.0",
-        "webpack-chain": "^6.0.0",
-        "webpack-dev-server": "^3.9.0",
+        "webpack-bundle-analyzer": "^3.6.1",
+        "webpack-chain": "^6.4.0",
+        "webpack-dev-server": "^3.10.3",
         "webpack-merge": "^4.2.2"
       },
       "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
+          "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
+          "dev": true,
+          "requires": {
+            "@hapi/joi": "^15.0.1",
+            "chalk": "^2.4.2",
+            "execa": "^1.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^5.1.1",
+            "node-ipc": "^9.1.1",
+            "open": "^6.3.0",
+            "ora": "^3.4.0",
+            "read-pkg": "^5.1.1",
+            "request": "^2.88.2",
+            "request-promise-native": "^1.0.8",
+            "semver": "^6.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "acorn": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.1.1.tgz",
+          "integrity": "sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==",
+          "dev": true
+        },
+        "ajv": {
+          "version": "6.12.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
+          "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
+          }
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -3106,14 +3659,64 @@
             "unique-filename": "^1.1.1"
           }
         },
+        "caniuse-lite": {
+          "version": "1.0.30001054",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
+          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
+          "dev": true
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.432",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
+          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "dev": true
+        },
         "find-cache-dir": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.2.0.tgz",
-          "integrity": "sha512-1JKclkYYsf1q9WIJKLZa9S9muC+08RIjzAlLrK4QcYLJMS6mk9yombQ9qf+zJ7H9LS800k0s44L4sDq9VYzqyg==",
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
+          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
           "dev": true,
           "requires": {
             "commondir": "^1.0.1",
-            "make-dir": "^3.0.0",
+            "make-dir": "^3.0.2",
             "pkg-dir": "^4.1.0"
           }
         },
@@ -3127,6 +3730,28 @@
             "path-exists": "^4.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "jest-worker": {
+          "version": "25.5.0",
+          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.5.0.tgz",
+          "integrity": "sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==",
+          "dev": true,
+          "requires": {
+            "merge-stream": "^2.0.0",
+            "supports-color": "^7.0.0"
+          }
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3137,14 +3762,29 @@
           }
         },
         "make-dir": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.0.tgz",
-          "integrity": "sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
           "dev": true,
           "requires": {
             "semver": "^6.0.0"
           }
         },
+        "node-releases": {
+          "version": "1.1.55",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
+          "dev": true
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
         "p-locate": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
@@ -3202,6 +3842,50 @@
             "type-fest": "^0.6.0"
           }
         },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.5.0",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
+        "schema-utils": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
+          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
+        },
+        "serialize-javascript": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
+          "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3218,34 +3902,76 @@
             "minipass": "^3.1.1"
           }
         },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.2.tgz",
-          "integrity": "sha512-SmvB/6gtEPv+CJ88MH5zDOsZdKXPS/Uzv2//e90+wM1IHFUhsguPKEILgzqrM1nQ4acRXN/SV4Obr55SXC+0oA==",
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.6.tgz",
+          "integrity": "sha512-I8IDsQwZrqjdmOicNeE8L/MhwatAap3mUrtcAKJuilsemUNcX+Hier/eAzwStVqhlCxq0aG3ni9bK/0BESXkTg==",
           "dev": true,
           "requires": {
             "cacache": "^13.0.1",
-            "find-cache-dir": "^3.2.0",
-            "jest-worker": "^24.9.0",
-            "schema-utils": "^2.6.1",
-            "serialize-javascript": "^2.1.2",
+            "find-cache-dir": "^3.3.1",
+            "jest-worker": "^25.4.0",
+            "p-limit": "^2.3.0",
+            "schema-utils": "^2.6.6",
+            "serialize-javascript": "^3.0.0",
             "source-map": "^0.6.1",
-            "terser": "^4.4.3",
+            "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
         },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        },
         "type-fest": {
           "version": "0.6.0",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
           "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
           "dev": true
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
         }
       }
     },
     "@vue/cli-shared-utils": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.1.2.tgz",
-      "integrity": "sha512-uQAVqxCWdL5ipZ0TPu6SVsdokQp4yHt8SzzpUGhq8TkW4vwalGddJAAJrqZHMl91ZTIJ4p4ixofmCaaJo5rSRA==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
+      "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
       "dev": true,
       "requires": {
         "@hapi/joi": "^15.0.1",
@@ -3256,29 +3982,72 @@
         "node-ipc": "^9.1.1",
         "open": "^6.3.0",
         "ora": "^3.4.0",
-        "request": "^2.87.0",
+        "read-pkg": "^5.1.1",
+        "request": "^2.88.2",
         "request-promise-native": "^1.0.8",
         "semver": "^6.1.0",
         "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.5.0",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
+        }
       }
     },
     "@vue/cli-ui": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui/-/cli-ui-4.1.2.tgz",
-      "integrity": "sha512-fA9z8yDQqhD8QcHlWt6wX0t+7EVKFVRRzxPnZ8dEoYaoo+Y5wLAE0fJyyxjpzlwEStqBSDs6A7X+1wQq/FBICQ==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui/-/cli-ui-4.3.1.tgz",
+      "integrity": "sha512-fHsVO62rCCmIFnufDzy9JeQXZ6ylyNFpGrjP4UJ8vkWTDLrmKRgS7LHLn5DAIhr1e1/34GsXBntqwIWneJW8mg==",
       "dev": true,
       "requires": {
         "@akryum/winattr": "^3.0.0",
-        "@vue/cli-shared-utils": "^4.1.2",
+        "@vue/cli-shared-utils": "^4.3.1",
+        "apollo-server-express": "^2.11.0",
         "clone": "^2.1.1",
-        "deepmerge": "^3.2.0",
+        "deepmerge": "^4.2.2",
+        "express": "^4.17.1",
         "express-history-api-fallback": "^2.2.1",
         "fkill": "^6.1.0",
         "fs-extra": "^7.0.1",
         "globby": "^9.2.0",
-        "graphql": "^14.3.1",
+        "graphql": "^14.6.0",
         "graphql-subscriptions": "^1.1.0",
-        "graphql-tag": "^2.9.2",
+        "graphql-tag": "^2.10.3",
         "graphql-type-json": "^0.3.1",
         "javascript-stringify": "^1.6.0",
         "js-yaml": "^3.13.1",
@@ -3286,13 +4055,13 @@
         "lowdb": "^1.0.0",
         "lru-cache": "^5.1.1",
         "node-ipc": "^9.1.1",
-        "node-notifier": "^5.4.0",
+        "node-notifier": "^6.0.0",
         "parse-git-config": "^2.0.2",
         "portfinder": "^1.0.25",
-        "prismjs": "^1.16.0",
-        "rss-parser": "^3.7.3",
+        "prismjs": "^1.19.0",
+        "rss-parser": "^3.7.6",
         "shortid": "^2.2.15",
-        "typescript": "^3.4.5",
+        "typescript": "~3.8.3",
         "vue-cli-plugin-apollo": "^0.21.3",
         "watch": "^1.0.2"
       },
@@ -3306,21 +4075,21 @@
       }
     },
     "@vue/cli-ui-addon-webpack": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-webpack/-/cli-ui-addon-webpack-4.1.2.tgz",
-      "integrity": "sha512-zmb8cYHCxqEzrpQvlV5R8zMcDWJMo6KRTIn13i5FxBdezZkkni1tJunaoiDRjEFyuu01Lg8jcb8TNxuIaH5TKg==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-webpack/-/cli-ui-addon-webpack-4.3.1.tgz",
+      "integrity": "sha512-Mrm4q5xxRmCos+nvRiZOwWvCnq6gWa2vsYVvb3mSA+hZhtRbLMASYsSAdsXTBySiaBQxvbKHLlnu3XV0bLlD3A==",
       "dev": true
     },
     "@vue/cli-ui-addon-widgets": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-widgets/-/cli-ui-addon-widgets-4.1.2.tgz",
-      "integrity": "sha512-Y6/MLtfaiEfoEToSoSSbFi/EshpLmsBMfK7m98NbCTZgpnhJ7iSaHYkYsF4gg0D52C6Oa2cy0iLoJtaFA8zQbQ==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-widgets/-/cli-ui-addon-widgets-4.3.1.tgz",
+      "integrity": "sha512-0j6rUukhGGSRddSG5Ijol1uhTlDPx1/nU9gYeH1DKqoX9wR4Zfziqxfm2AulLNTbdFWZn4W0K0QaA2WZfkyRzw==",
       "dev": true
     },
     "@vue/component-compiler-utils": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.1.tgz",
-      "integrity": "sha512-+lN3nsfJJDGMNz7fCpcoYIORrXo0K3OTsdr8jCM7FuqdI4+70TY6gxY6viJ2Xi1clqyPg7LpeOWwjF31vSMmUw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz",
+      "integrity": "sha512-QLq9z8m79mCinpaEeSURhnNCN6djxpHw0lpP/bodMlt5kALfONpryMthvnrQOlTcIKoF+VoPi+lPHUYeDFPXug==",
       "dev": true,
       "requires": {
         "consolidate": "^0.15.1",
@@ -3334,10 +4103,10 @@
         "vue-template-es2015-compiler": "^1.9.0"
       },
       "dependencies": {
-        "cssesc": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
           "dev": true
         },
         "lru-cache": {
@@ -3350,17 +4119,6 @@
             "yallist": "^2.1.2"
           }
         },
-        "postcss-selector-parser": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
-          "dev": true,
-          "requires": {
-            "cssesc": "^3.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3388,10 +4146,13 @@
       }
     },
     "@vue/eslint-config-typescript": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-5.0.1.tgz",
-      "integrity": "sha512-gpP8zQA0rJ93ROkAW5fbOJB3EG7p6U70Jb0/CVOjhs5zuEXf1WgLk4gP+zUZGwiRpLoXBa5oIRH4hLQDbS1/eg==",
-      "dev": true
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-5.0.2.tgz",
+      "integrity": "sha512-GEZOHKOnelgQf5npA+6VNuhJZu9xEJaics3SYUyRjaSay+2SCpEINHhEpt6fXoNy/aIFt8CkDlt9CaEb+QPIcg==",
+      "dev": true,
+      "requires": {
+        "vue-eslint-parser": "^7.0.0"
+      }
     },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.1",
@@ -3400,13 +4161,14 @@
       "dev": true
     },
     "@vue/test-utils": {
-      "version": "1.0.0-beta.29",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.0-beta.29.tgz",
-      "integrity": "sha512-yX4sxEIHh4M9yAbLA/ikpEnGKMNBCnoX98xE1RwxfhQVcn0MaXNSj1Qmac+ZydTj6VBSEVukchBogXBTwc+9iA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.2.tgz",
+      "integrity": "sha512-pnRWJbb0cLqjSJIKRpqoSISeYtufEn8D16VmhlCrDWIVt4iAY4Og4JpOPmFytvtQVz96p6n7T6ERI55ue6n0Ew==",
       "dev": true,
       "requires": {
         "dom-event-types": "^1.0.0",
-        "lodash": "^4.17.4"
+        "lodash": "^4.17.15",
+        "pretty": "^2.0.0"
       }
     },
     "@vue/web-component-wrapper": {
@@ -3416,178 +4178,177 @@
       "dev": true
     },
     "@webassemblyjs/ast": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz",
-      "integrity": "sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/helper-module-context": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/wast-parser": "1.8.5"
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
       }
     },
     "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz",
-      "integrity": "sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==",
       "dev": true
     },
     "@webassemblyjs/helper-api-error": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz",
-      "integrity": "sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==",
       "dev": true
     },
     "@webassemblyjs/helper-buffer": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz",
-      "integrity": "sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==",
       "dev": true
     },
     "@webassemblyjs/helper-code-frame": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz",
-      "integrity": "sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/wast-printer": "1.8.5"
+        "@webassemblyjs/wast-printer": "1.9.0"
       }
     },
     "@webassemblyjs/helper-fsm": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz",
-      "integrity": "sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==",
       "dev": true
     },
     "@webassemblyjs/helper-module-context": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz",
-      "integrity": "sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "mamacro": "^0.0.3"
+        "@webassemblyjs/ast": "1.9.0"
       }
     },
     "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz",
-      "integrity": "sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==",
       "dev": true
     },
     "@webassemblyjs/helper-wasm-section": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz",
-      "integrity": "sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0"
       }
     },
     "@webassemblyjs/ieee754": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz",
-      "integrity": "sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
       "dev": true,
       "requires": {
         "@xtuc/ieee754": "^1.2.0"
       }
     },
     "@webassemblyjs/leb128": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.8.5.tgz",
-      "integrity": "sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
       "dev": true,
       "requires": {
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/utf8": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.8.5.tgz",
-      "integrity": "sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==",
       "dev": true
     },
     "@webassemblyjs/wasm-edit": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz",
-      "integrity": "sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/helper-wasm-section": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5",
-        "@webassemblyjs/wasm-opt": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5",
-        "@webassemblyjs/wast-printer": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/helper-wasm-section": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-opt": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "@webassemblyjs/wast-printer": "1.9.0"
       }
     },
     "@webassemblyjs/wasm-gen": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz",
-      "integrity": "sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/ieee754": "1.8.5",
-        "@webassemblyjs/leb128": "1.8.5",
-        "@webassemblyjs/utf8": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
       }
     },
     "@webassemblyjs/wasm-opt": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz",
-      "integrity": "sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-buffer": "1.8.5",
-        "@webassemblyjs/wasm-gen": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-buffer": "1.9.0",
+        "@webassemblyjs/wasm-gen": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0"
       }
     },
     "@webassemblyjs/wasm-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz",
-      "integrity": "sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-api-error": "1.8.5",
-        "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
-        "@webassemblyjs/ieee754": "1.8.5",
-        "@webassemblyjs/leb128": "1.8.5",
-        "@webassemblyjs/utf8": "1.8.5"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/ieee754": "1.9.0",
+        "@webassemblyjs/leb128": "1.9.0",
+        "@webassemblyjs/utf8": "1.9.0"
       }
     },
     "@webassemblyjs/wast-parser": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz",
-      "integrity": "sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/floating-point-hex-parser": "1.8.5",
-        "@webassemblyjs/helper-api-error": "1.8.5",
-        "@webassemblyjs/helper-code-frame": "1.8.5",
-        "@webassemblyjs/helper-fsm": "1.8.5",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/floating-point-hex-parser": "1.9.0",
+        "@webassemblyjs/helper-api-error": "1.9.0",
+        "@webassemblyjs/helper-code-frame": "1.9.0",
+        "@webassemblyjs/helper-fsm": "1.9.0",
         "@xtuc/long": "4.2.2"
       }
     },
     "@webassemblyjs/wast-printer": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz",
-      "integrity": "sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/wast-parser": "1.8.5",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
         "@xtuc/long": "4.2.2"
       }
     },
@@ -3602,9 +4363,9 @@
       }
     },
     "@wry/equality": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.9.tgz",
-      "integrity": "sha512-mB6ceGjpMGz1ZTza8HYnrPGos2mC6So4NhS1PtZ8s4Qt0K7fBiIGhpSxUbQmhwcSWE3no+bYxmI2OL6KuXYmoQ==",
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz",
+      "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==",
       "dev": true,
       "requires": {
         "tslib": "^1.9.3"
@@ -3645,9 +4406,9 @@
       }
     },
     "acorn": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz",
-      "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==",
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
       "dev": true
     },
     "acorn-globals": {
@@ -3658,6 +4419,14 @@
       "requires": {
         "acorn": "^6.0.1",
         "acorn-walk": "^6.0.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "dev": true
+        }
       }
     },
     "acorn-jsx": {
@@ -3814,39 +4583,41 @@
       }
     },
     "apollo": {
-      "version": "2.21.3",
-      "resolved": "https://registry.npmjs.org/apollo/-/apollo-2.21.3.tgz",
-      "integrity": "sha512-f7G9RTcCqmsLCeL9Rem4/tGC9Ar/nQrECxtp1oN+lR+ImV+5ZqpmSLLHUzxxngxlrYEQors6E7imPhdkEl6hRg==",
+      "version": "2.27.4",
+      "resolved": "https://registry.npmjs.org/apollo/-/apollo-2.27.4.tgz",
+      "integrity": "sha512-cLSN3Kc32O/zAtSwZ71SspE5RUQ3pcaSpQTgA5K1m9KUzhwPbDAkUppMMjNr0vk1dx9X8ZHSe0w5NK43kuiqcw==",
       "dev": true,
       "requires": {
-        "@apollographql/apollo-tools": "^0.4.3",
-        "@oclif/command": "1.5.19",
-        "@oclif/config": "1.13.3",
+        "@apollographql/apollo-tools": "^0.4.8",
+        "@oclif/command": "1.6.0",
+        "@oclif/config": "1.15.1",
         "@oclif/errors": "1.2.2",
         "@oclif/plugin-autocomplete": "0.1.5",
         "@oclif/plugin-help": "2.2.3",
         "@oclif/plugin-not-found": "1.2.3",
         "@oclif/plugin-plugins": "1.7.9",
         "@oclif/plugin-warn-if-update-available": "1.7.0",
-        "apollo-codegen-core": "^0.35.10",
-        "apollo-codegen-flow": "^0.33.35",
-        "apollo-codegen-scala": "^0.34.35",
-        "apollo-codegen-swift": "^0.35.15",
-        "apollo-codegen-typescript": "^0.35.10",
-        "apollo-env": "^0.6.1",
-        "apollo-graphql": "^0.3.7",
-        "apollo-language-server": "^1.18.0",
+        "apollo-codegen-core": "^0.36.9",
+        "apollo-codegen-flow": "^0.34.9",
+        "apollo-codegen-scala": "^0.35.9",
+        "apollo-codegen-swift": "^0.36.9",
+        "apollo-codegen-typescript": "^0.36.9",
+        "apollo-env": "^0.6.5",
+        "apollo-graphql": "^0.4.4",
+        "apollo-language-server": "^1.21.4",
         "chalk": "2.4.2",
+        "cli-ux": "5.4.5",
         "env-ci": "3.2.2",
         "gaze": "1.1.3",
-        "git-parse": "1.0.3",
-        "git-rev-sync": "1.12.0",
+        "git-parse": "1.0.4",
+        "git-rev-sync": "2.0.0",
         "glob": "7.1.5",
         "graphql": "14.0.2 - 14.2.0 || ^14.3.1",
-        "graphql-tag": "2.10.1",
+        "graphql-tag": "2.10.3",
         "listr": "0.14.3",
         "lodash.identity": "3.0.0",
         "lodash.pickby": "4.6.0",
+        "mkdirp": "0.5.5",
         "moment": "2.24.0",
         "strip-ansi": "5.2.0",
         "table": "5.4.6",
@@ -3890,13 +4661,13 @@
       }
     },
     "apollo-cache-control": {
-      "version": "0.8.11",
-      "resolved": "https://registry.npmjs.org/apollo-cache-control/-/apollo-cache-control-0.8.11.tgz",
-      "integrity": "sha512-8yz4qbRBIFDWRHdT8uPh0HHh+VbQXxoFGJQRAG8hyMRvR+EuURXX1ltXYkn5J3YJ3MKEqgsvwGaq60dFZq63UQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/apollo-cache-control/-/apollo-cache-control-0.10.0.tgz",
+      "integrity": "sha512-UIcPlrPdRTOKrF7kc5/WD5i6EVkGEEqgOK/fMj92fnnxR1KnQDiN82lqaxu02eZJvWjFJjik0JVJNXKOJXVrpQ==",
       "dev": true,
       "requires": {
         "apollo-server-env": "^2.4.3",
-        "graphql-extensions": "^0.10.10"
+        "graphql-extensions": "^0.12.0"
       }
     },
     "apollo-cache-inmemory": {
@@ -3929,77 +4700,97 @@
       }
     },
     "apollo-codegen-core": {
-      "version": "0.35.10",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-core/-/apollo-codegen-core-0.35.10.tgz",
-      "integrity": "sha512-L/eZdX1mXXRQlLEXi9QThZpQVHHWLzV3VXOQJ1e1l+zR/hm7XzR4hVjfiGVdwrxcbZCd7mA8Eku81SIEsnK38w==",
+      "version": "0.36.9",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-core/-/apollo-codegen-core-0.36.9.tgz",
+      "integrity": "sha512-gP+sNPM/vQLVjG/YacI8FPBqPTYTAgwJ8Qld0aQ0dj4icFlDFywtm95GtVXzOjiv8vJ0myepsO/Mvqiu4PeGkQ==",
       "dev": true,
       "requires": {
-        "@babel/generator": "7.7.7",
+        "@babel/generator": "7.9.6",
         "@babel/parser": "^7.1.3",
-        "@babel/types": "7.7.4",
-        "apollo-env": "^0.6.1",
-        "apollo-language-server": "^1.18.0",
+        "@babel/types": "7.9.6",
+        "apollo-env": "^0.6.5",
+        "apollo-language-server": "^1.21.4",
         "ast-types": "^0.13.0",
         "common-tags": "^1.5.1",
-        "recast": "^0.18.0"
+        "recast": "^0.19.0"
+      },
+      "dependencies": {
+        "recast": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/recast/-/recast-0.19.1.tgz",
+          "integrity": "sha512-8FCjrBxjeEU2O6I+2hyHyBFH1siJbMBLwIRvVr1T3FD2cL754sOaJDsJ/8h3xYltasbJ8jqWRIhMuDGBSiSbjw==",
+          "dev": true,
+          "requires": {
+            "ast-types": "0.13.3",
+            "esprima": "~4.0.0",
+            "private": "^0.1.8",
+            "source-map": "~0.6.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
       }
     },
     "apollo-codegen-flow": {
-      "version": "0.33.35",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-flow/-/apollo-codegen-flow-0.33.35.tgz",
-      "integrity": "sha512-MNRVO3MrWZPvCwMdf2VL2SjupTaz6EMQk6mbwtVBU6vYXJFTpVJNIjdGk6RyMDX1r203jCQYCT7LyWlKdIbiwA==",
+      "version": "0.34.9",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-flow/-/apollo-codegen-flow-0.34.9.tgz",
+      "integrity": "sha512-FSIUEkWf7XO/JUxR0F2QFKNY7vCxEnYcazBbp6pGSqueDqWsaitw+0zvvmMFQQ6qRZ7J/yBkh8GwJ9Vg5JvOyA==",
       "dev": true,
       "requires": {
-        "@babel/generator": "7.7.7",
-        "@babel/types": "7.7.4",
-        "apollo-codegen-core": "^0.35.10",
+        "@babel/generator": "7.9.6",
+        "@babel/types": "7.9.6",
+        "apollo-codegen-core": "^0.36.9",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-scala": {
-      "version": "0.34.35",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-scala/-/apollo-codegen-scala-0.34.35.tgz",
-      "integrity": "sha512-dOUXIHDBTiKaczaKpNrclDDrjdv7ht1CiYLmQQ0/MIzrxzYUJOXveveLn1o0U74bqZCKQiVat7IZJkQXsSEeKQ==",
+      "version": "0.35.9",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-scala/-/apollo-codegen-scala-0.35.9.tgz",
+      "integrity": "sha512-sRyzWtnRAaG5d6laxu4Nie4XqM/CmldPpkNm2plY/oYkeEh8FLTaSJQsM/ODQqM9U7zTfj7T9xRgT7t5p6dzeQ==",
       "dev": true,
       "requires": {
-        "apollo-codegen-core": "^0.35.10",
+        "apollo-codegen-core": "^0.36.9",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-swift": {
-      "version": "0.35.15",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-swift/-/apollo-codegen-swift-0.35.15.tgz",
-      "integrity": "sha512-gpJyH3iRR1qQTGxruy7NnYvOWTgC4wCUIcq/L3VdkGxLk6su/LZCJT5iKt0XJCbxdor7xAlysGkQPJbW2PCFuA==",
+      "version": "0.36.9",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-swift/-/apollo-codegen-swift-0.36.9.tgz",
+      "integrity": "sha512-k0PLh5w41FEsiSupmbOiXhsy7+7aCH1ZvvMt/nnoLtTehYNkdl66ENvDEbFVMo25AJdCZLZ3PKwhac41lLCxzA==",
       "dev": true,
       "requires": {
-        "apollo-codegen-core": "^0.35.10",
+        "apollo-codegen-core": "^0.36.9",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-typescript": {
-      "version": "0.35.10",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-typescript/-/apollo-codegen-typescript-0.35.10.tgz",
-      "integrity": "sha512-53NczfGhwmRTAZhhrwsLM4o2s2H0iGJIDABJ1KnSKgcwCfBmXqQ8esnq8sHW+O9Qjvff961Sm8gTQRXf3PU5Jg==",
+      "version": "0.36.9",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-typescript/-/apollo-codegen-typescript-0.36.9.tgz",
+      "integrity": "sha512-H89IfRQgM1Nvrfujn+cPowpoWizQwlHHCczrcv31gB1Lpnp2XFdnW3hOoS5m5DC380Wawe1s9MaGXvxlgQwmgA==",
       "dev": true,
       "requires": {
-        "@babel/generator": "7.7.7",
-        "@babel/types": "7.7.4",
-        "apollo-codegen-core": "^0.35.10",
+        "@babel/generator": "7.9.6",
+        "@babel/types": "7.9.6",
+        "apollo-codegen-core": "^0.36.9",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-datasource": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/apollo-datasource/-/apollo-datasource-0.6.4.tgz",
-      "integrity": "sha512-u4eu6Q94q6KuZacZfdo4vCevA81F4QWeTYEXUvoksQMJpiacPHHe0DJrofKVKvxngUp5kCi1RnPXSc6kBY+/oA==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/apollo-datasource/-/apollo-datasource-0.7.0.tgz",
+      "integrity": "sha512-Yja12BgNQhzuFGG/5Nw2MQe0hkuQy2+9er09HxeEyAf2rUDIPnhPrn1MDoZTB8MU7UGfjwITC+1ofzKkkrZobA==",
       "dev": true,
       "requires": {
         "apollo-server-caching": "^0.5.1",
@@ -4007,65 +4798,65 @@
       }
     },
     "apollo-engine-reporting": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-1.4.14.tgz",
-      "integrity": "sha512-cCG9qDOPwbh87ZjQGHgmnP3oPqhqjIZcNmm/lNtWkWXGTlxV/jmUEqpVi+wsDbE5gR7d1OFk6GqSy2ZQh+S+Bw==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-1.8.0.tgz",
+      "integrity": "sha512-VPVpIGW6lbYXga6sqq/fG8ZaPR70bFuxvCov6X0npuVQPXwgZrzBp50cHx9uIaBVxDDxD3leeznsQbmF37RAww==",
       "dev": true,
       "requires": {
-        "apollo-engine-reporting-protobuf": "^0.4.4",
-        "apollo-graphql": "^0.3.7",
+        "apollo-engine-reporting-protobuf": "^0.5.0",
+        "apollo-graphql": "^0.4.0",
         "apollo-server-caching": "^0.5.1",
         "apollo-server-env": "^2.4.3",
-        "apollo-server-errors": "^2.3.4",
-        "apollo-server-types": "^0.2.10",
+        "apollo-server-errors": "^2.4.1",
+        "apollo-server-types": "^0.4.0",
         "async-retry": "^1.2.1",
-        "graphql-extensions": "^0.10.10"
+        "graphql-extensions": "^0.12.0"
       }
     },
     "apollo-engine-reporting-protobuf": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/apollo-engine-reporting-protobuf/-/apollo-engine-reporting-protobuf-0.4.4.tgz",
-      "integrity": "sha512-SGrIkUR7Q/VjU8YG98xcvo340C4DaNUhg/TXOtGsMlfiJDzHwVau/Bv6zifAzBafp2lj0XND6Daj5kyT/eSI/w==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/apollo-engine-reporting-protobuf/-/apollo-engine-reporting-protobuf-0.5.0.tgz",
+      "integrity": "sha512-OgMwtLcuL+YAaO2xgkPbnRJnISLDSNE5F11p7oq+1ws+ws71CPfHAthDCxSObCPSALdhsLAGD0v3u3soBuNmMg==",
       "dev": true,
       "requires": {
         "@apollo/protobufjs": "^1.0.3"
       }
     },
     "apollo-env": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/apollo-env/-/apollo-env-0.6.1.tgz",
-      "integrity": "sha512-B9BgpQGR1ndeDtb4Gtor0J4CITQ+OPACZrVW6lgStnljKEe9ZB76DZ1dAd3OCeizAswW6Lo9uvfK8jhVS5nBhQ==",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/apollo-env/-/apollo-env-0.6.5.tgz",
+      "integrity": "sha512-jeBUVsGymeTHYWp3me0R2CZRZrFeuSZeICZHCeRflHTfnQtlmbSXdy5E0pOyRM9CU4JfQkKDC98S1YglQj7Bzg==",
       "dev": true,
       "requires": {
-        "@types/node-fetch": "2.5.4",
+        "@types/node-fetch": "2.5.7",
         "core-js": "^3.0.1",
         "node-fetch": "^2.2.0",
         "sha.js": "^2.4.11"
       }
     },
     "apollo-graphql": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/apollo-graphql/-/apollo-graphql-0.3.7.tgz",
-      "integrity": "sha512-ghW16xx9tRcyL38Pw6G5OidMnYn+CNUGZWmvqQgEO2nRy4T0ONPZZBOvGrIMtJQ70oEykNMKGm0zm6PdHdxd8Q==",
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/apollo-graphql/-/apollo-graphql-0.4.4.tgz",
+      "integrity": "sha512-i012iRKT5nfsOaNMx4MTwHw2jrlyaF1zikpejxsGHsKIf3OngGvGh3pyw20bEmwj413OrNQpRxvvIz5A7W/8xw==",
       "dev": true,
       "requires": {
-        "apollo-env": "^0.6.1",
+        "apollo-env": "^0.6.5",
         "lodash.sortby": "^4.7.0"
       }
     },
     "apollo-language-server": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/apollo-language-server/-/apollo-language-server-1.18.0.tgz",
-      "integrity": "sha512-4hWOaC7eVJnLgfssFQ+deLTssoHFL/bUnDBSf5UrxfouRpKExNjelWdsLgZulhKKUFdA4sEhhxR//opK95+9aQ==",
+      "version": "1.21.4",
+      "resolved": "https://registry.npmjs.org/apollo-language-server/-/apollo-language-server-1.21.4.tgz",
+      "integrity": "sha512-U4E3llrJs7M3CPzdQPU/VMii9zsZEm2JUaMojpjlC9E8KeGDZs3ZYBRhZhmKhyLDEzIxu1V/c0Q9Yc7Z8+ZNvw==",
       "dev": true,
       "requires": {
-        "@apollo/federation": "0.11.2",
-        "@apollographql/apollo-tools": "^0.4.3",
+        "@apollo/federation": "0.15.0",
+        "@apollographql/apollo-tools": "^0.4.8",
         "@apollographql/graphql-language-service-interface": "^2.0.2",
         "@endemolshinegroup/cosmiconfig-typescript-loader": "^1.0.0",
-        "apollo-datasource": "^0.6.0",
-        "apollo-env": "^0.6.1",
-        "apollo-graphql": "^0.3.7",
+        "apollo-datasource": "^0.7.0",
+        "apollo-env": "^0.6.5",
+        "apollo-graphql": "^0.4.4",
         "apollo-link": "^1.2.3",
         "apollo-link-context": "^1.0.9",
         "apollo-link-error": "^1.1.1",
@@ -4081,62 +4872,62 @@
         "lodash.debounce": "^4.0.8",
         "lodash.merge": "^4.6.1",
         "minimatch": "^3.0.4",
-        "moment": "^2.24.0",
+        "moment": "2.24.0",
         "vscode-languageserver": "^5.1.0",
         "vscode-uri": "1.0.6"
       }
     },
     "apollo-link": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.13.tgz",
-      "integrity": "sha512-+iBMcYeevMm1JpYgwDEIDt/y0BB7VWyvlm/7x+TIPNLHCTCMgcEgDuW5kH86iQZWo0I7mNwQiTOz+/3ShPFmBw==",
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.14.tgz",
+      "integrity": "sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==",
       "dev": true,
       "requires": {
         "apollo-utilities": "^1.3.0",
         "ts-invariant": "^0.4.0",
         "tslib": "^1.9.3",
-        "zen-observable-ts": "^0.8.20"
+        "zen-observable-ts": "^0.8.21"
       }
     },
     "apollo-link-context": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/apollo-link-context/-/apollo-link-context-1.0.19.tgz",
-      "integrity": "sha512-TUi5TyufU84hEiGkpt+5gdH5HkB3Gx46npNfoxR4of3DKBCMuItGERt36RCaryGcU/C3u2zsICU3tJ+Z9LjFoQ==",
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/apollo-link-context/-/apollo-link-context-1.0.20.tgz",
+      "integrity": "sha512-MLLPYvhzNb8AglNsk2NcL9AvhO/Vc9hn2ZZuegbhRHGet3oGr0YH9s30NS9+ieoM0sGT11p7oZ6oAILM/kiRBA==",
       "dev": true,
       "requires": {
-        "apollo-link": "^1.2.13",
+        "apollo-link": "^1.2.14",
         "tslib": "^1.9.3"
       }
     },
     "apollo-link-error": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.12.tgz",
-      "integrity": "sha512-psNmHyuy3valGikt/XHJfe0pKJnRX19tLLs6P6EHRxg+6q6JMXNVLYPaQBkL0FkwdTCB0cbFJAGRYCBviG8TDA==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/apollo-link-error/-/apollo-link-error-1.1.13.tgz",
+      "integrity": "sha512-jAZOOahJU6bwSqb2ZyskEK1XdgUY9nkmeclCrW7Gddh1uasHVqmoYc4CKdb0/H0Y1J9lvaXKle2Wsw/Zx1AyUg==",
       "dev": true,
       "requires": {
-        "apollo-link": "^1.2.13",
-        "apollo-link-http-common": "^0.2.15",
+        "apollo-link": "^1.2.14",
+        "apollo-link-http-common": "^0.2.16",
         "tslib": "^1.9.3"
       }
     },
     "apollo-link-http": {
-      "version": "1.5.16",
-      "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.16.tgz",
-      "integrity": "sha512-IA3xA/OcrOzINRZEECI6IdhRp/Twom5X5L9jMehfzEo2AXdeRwAMlH5LuvTZHgKD8V1MBnXdM6YXawXkTDSmJw==",
+      "version": "1.5.17",
+      "resolved": "https://registry.npmjs.org/apollo-link-http/-/apollo-link-http-1.5.17.tgz",
+      "integrity": "sha512-uWcqAotbwDEU/9+Dm9e1/clO7hTB2kQ/94JYcGouBVLjoKmTeJTUPQKcJGpPwUjZcSqgYicbFqQSoJIW0yrFvg==",
       "dev": true,
       "requires": {
-        "apollo-link": "^1.2.13",
-        "apollo-link-http-common": "^0.2.15",
+        "apollo-link": "^1.2.14",
+        "apollo-link-http-common": "^0.2.16",
         "tslib": "^1.9.3"
       }
     },
     "apollo-link-http-common": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.15.tgz",
-      "integrity": "sha512-+Heey4S2IPsPyTf8Ag3PugUupASJMW894iVps6hXbvwtg1aHSNMXUYO5VG7iRHkPzqpuzT4HMBanCTXPjtGzxg==",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz",
+      "integrity": "sha512-2tIhOIrnaF4UbQHf7kjeQA/EmSorB7+HyJIIrUjJOKBgnXwuexi8aMecRlqTIDWcyVXCeqLhUnztMa6bOH/jTg==",
       "dev": true,
       "requires": {
-        "apollo-link": "^1.2.13",
+        "apollo-link": "^1.2.14",
         "ts-invariant": "^0.4.0",
         "tslib": "^1.9.3"
       }
@@ -4162,12 +4953,12 @@
       }
     },
     "apollo-link-ws": {
-      "version": "1.0.19",
-      "resolved": "https://registry.npmjs.org/apollo-link-ws/-/apollo-link-ws-1.0.19.tgz",
-      "integrity": "sha512-mRXmeUkc55ixOdYRtfq5rq3o9sboKghKABKroDVhJnkdS56zthBEWMAD+phajujOUbqByxjok0te8ABqByBdeQ==",
+      "version": "1.0.20",
+      "resolved": "https://registry.npmjs.org/apollo-link-ws/-/apollo-link-ws-1.0.20.tgz",
+      "integrity": "sha512-mjSFPlQxmoLArpHBeUb2Xj+2HDYeTaJqFGOqQ+I8NVJxgL9lJe84PDWcPah/yMLv3rB7QgBDSuZ0xoRFBPlySw==",
       "dev": true,
       "requires": {
-        "apollo-link": "^1.2.13",
+        "apollo-link": "^1.2.14",
         "tslib": "^1.9.3"
       }
     },
@@ -4181,29 +4972,30 @@
       }
     },
     "apollo-server-core": {
-      "version": "2.9.16",
-      "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.9.16.tgz",
-      "integrity": "sha512-4ftdjSfs/3aEare9QNTVSF0yUvXETxiohuDLZ7gmMIQxNnZhUjVXiZL1rYKuIZ12uH7xLvh/DwkXRt6nLG/lZA==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.13.0.tgz",
+      "integrity": "sha512-PqfsexbyObaQYb2jODs8v/XzrJcn+5mh0jA8ZfQCg5GENlua/CjeTZbRm2X0p3qpwc2E5jFAXSshrIWvhQAGZQ==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.3",
         "@apollographql/graphql-playground-html": "1.6.24",
         "@types/graphql-upload": "^8.0.0",
-        "@types/ws": "^6.0.0",
-        "apollo-cache-control": "^0.8.11",
-        "apollo-datasource": "^0.6.4",
-        "apollo-engine-reporting": "^1.4.14",
+        "@types/ws": "^7.0.0",
+        "apollo-cache-control": "^0.10.0",
+        "apollo-datasource": "^0.7.0",
+        "apollo-engine-reporting": "^1.8.0",
         "apollo-server-caching": "^0.5.1",
         "apollo-server-env": "^2.4.3",
-        "apollo-server-errors": "^2.3.4",
-        "apollo-server-plugin-base": "^0.6.10",
-        "apollo-server-types": "^0.2.10",
-        "apollo-tracing": "^0.8.11",
+        "apollo-server-errors": "^2.4.1",
+        "apollo-server-plugin-base": "^0.8.0",
+        "apollo-server-types": "^0.4.0",
+        "apollo-tracing": "^0.10.0",
         "fast-json-stable-stringify": "^2.0.0",
-        "graphql-extensions": "^0.10.10",
+        "graphql-extensions": "^0.12.0",
         "graphql-tag": "^2.9.2",
         "graphql-tools": "^4.0.0",
         "graphql-upload": "^8.0.2",
+        "loglevel": "^1.6.7",
         "sha.js": "^2.4.11",
         "subscriptions-transport-ws": "^0.9.11",
         "ws": "^6.0.0"
@@ -4220,25 +5012,25 @@
       }
     },
     "apollo-server-errors": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/apollo-server-errors/-/apollo-server-errors-2.3.4.tgz",
-      "integrity": "sha512-Y0PKQvkrb2Kd18d1NPlHdSqmlr8TgqJ7JQcNIfhNDgdb45CnqZlxL1abuIRhr8tiw8OhVOcFxz2KyglBi8TKdA==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/apollo-server-errors/-/apollo-server-errors-2.4.1.tgz",
+      "integrity": "sha512-7oEd6pUxqyWYUbQ9TA8tM0NU/3aGtXSEibo6+txUkuHe7QaxfZ2wHRp+pfT1LC1K3RXYjKj61/C2xEO19s3Kdg==",
       "dev": true
     },
     "apollo-server-express": {
-      "version": "2.9.16",
-      "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.9.16.tgz",
-      "integrity": "sha512-ZDc7GP+piUm67alJ0DIE9f36tHcCiNm3PHMLIVJlVE/rcGwzRjV5rardRqeslljQiO2J+1IwXKwJ0/kRrZ4JvQ==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.13.0.tgz",
+      "integrity": "sha512-xDc+kRqWCXs4MeRjls37G45V6PmKYwo7OlpWCXyWDSPGgY9UD4E5A6rUBCyIhoNr7RnVYMkNuySOOqzX1QJ7EA==",
       "dev": true,
       "requires": {
         "@apollographql/graphql-playground-html": "1.6.24",
         "@types/accepts": "^1.3.5",
-        "@types/body-parser": "1.17.1",
+        "@types/body-parser": "1.19.0",
         "@types/cors": "^2.8.4",
-        "@types/express": "4.17.2",
+        "@types/express": "4.17.4",
         "accepts": "^1.3.5",
-        "apollo-server-core": "^2.9.16",
-        "apollo-server-types": "^0.2.10",
+        "apollo-server-core": "^2.13.0",
+        "apollo-server-types": "^0.4.0",
         "body-parser": "^1.18.3",
         "cors": "^2.8.4",
         "express": "^4.17.1",
@@ -4250,33 +5042,33 @@
       }
     },
     "apollo-server-plugin-base": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/apollo-server-plugin-base/-/apollo-server-plugin-base-0.6.10.tgz",
-      "integrity": "sha512-/xT7UT/tbCDIoTQ4lcEQsJ0ACh7h7QG0BDmeSlDXjwDuENRI50bQ2QoluCMPitZXGe+FCQfLhvzFgzbsZGT0IA==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-plugin-base/-/apollo-server-plugin-base-0.8.0.tgz",
+      "integrity": "sha512-H8sJlOVJrF0IhYIFMv7NOgB6BFgqobXSZrj1y9ju6dq13OotsqcZC4fJOYc9oWzb/+/mqg/odtVioE71mj68yg==",
       "dev": true,
       "requires": {
-        "apollo-server-types": "^0.2.10"
+        "apollo-server-types": "^0.4.0"
       }
     },
     "apollo-server-types": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/apollo-server-types/-/apollo-server-types-0.2.10.tgz",
-      "integrity": "sha512-ke9ViPEWfW+2XLe66CaKGVZdS7duSLbamSKSprmmeMBd8s6tmjf0FumUVxV7X4quxPZi0OPo8x0LoLU7GWsmaA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-types/-/apollo-server-types-0.4.0.tgz",
+      "integrity": "sha512-U+6qKCdrucVSMEVvLSqSwxIGr3VI6vcfbhpD86sdb8MgHHGH6egjNAcLrPVRk1AyXs8RV0Ysus+vlj8rpouBzA==",
       "dev": true,
       "requires": {
-        "apollo-engine-reporting-protobuf": "^0.4.4",
+        "apollo-engine-reporting-protobuf": "^0.5.0",
         "apollo-server-caching": "^0.5.1",
         "apollo-server-env": "^2.4.3"
       }
     },
     "apollo-tracing": {
-      "version": "0.8.11",
-      "resolved": "https://registry.npmjs.org/apollo-tracing/-/apollo-tracing-0.8.11.tgz",
-      "integrity": "sha512-Z0wDZ5QOBmpGoajB74ZKGTM7GzG6rqZRzAph4kxud6axcyNqUDKiKZ3Eere+NSLwvvt8M3qnPW4UJSUy/wwOXg==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/apollo-tracing/-/apollo-tracing-0.10.0.tgz",
+      "integrity": "sha512-yuqA1KT0FQUfzVK3ZIk0hRIE8eUKx9Oklq83AGQxLtS/oafBj/VOCZAtJNJkyEqMJxXQT9uIBtbfO1789Gczkw==",
       "dev": true,
       "requires": {
         "apollo-server-env": "^2.4.3",
-        "graphql-extensions": "^0.10.10"
+        "graphql-extensions": "^0.12.0"
       }
     },
     "apollo-upload-client": {
@@ -4315,6 +5107,23 @@
       "integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==",
       "dev": true
     },
+    "archive-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz",
+      "integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=",
+      "dev": true,
+      "requires": {
+        "file-type": "^4.2.0"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz",
+          "integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=",
+          "dev": true
+        }
+      }
+    },
     "are-we-there-yet": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
@@ -4326,9 +5135,9 @@
       }
     },
     "arg": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.2.tgz",
-      "integrity": "sha512-+ytCkGcBtHZ3V2r2Z06AncYO8jz46UEamcspGoU8lHcEbpn6J77QK0vdWvChsclg/tM5XIJC5tnjmPp7Eq6Obg==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
       "dev": true
     },
     "argparse": {
@@ -4495,9 +5304,9 @@
       "dev": true
     },
     "ast-types": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.2.tgz",
-      "integrity": "sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA==",
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.3.tgz",
+      "integrity": "sha512-XTZ7xGML849LkQP86sWdQzfhwbt3YwIO6MqbX9mUNYY98VKaaVZP7YNNm70IpwecbkkxmfC5IYAzOQ/2p29zRA==",
       "dev": true
     },
     "astral-regex": {
@@ -4555,24 +5364,48 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.3.tgz",
-      "integrity": "sha512-8T5Y1C5Iyj6PgkPSFd0ODvK9DIleuPKUPYniNxybS47g2k2wFgLZ46lGQHlBuGKIAEV8fbCDfKCCRS1tvOgc3Q==",
+      "version": "9.7.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
+      "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.8.0",
-        "caniuse-lite": "^1.0.30001012",
+        "browserslist": "^4.11.1",
+        "caniuse-lite": "^1.0.30001039",
         "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.23",
-        "postcss-value-parser": "^4.0.2"
+        "postcss": "^7.0.27",
+        "postcss-value-parser": "^4.0.3"
       },
       "dependencies": {
-        "postcss-value-parser": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
-          "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001054",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
+          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.432",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
+          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.55",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
           "dev": true
         }
       }
@@ -4661,15 +5494,15 @@
       "dev": true
     },
     "babel-eslint": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.0.3.tgz",
-      "integrity": "sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
+      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@babel/types": "^7.0.0",
+        "@babel/parser": "^7.7.0",
+        "@babel/traverse": "^7.7.0",
+        "@babel/types": "^7.7.0",
         "eslint-visitor-keys": "^1.0.0",
         "resolve": "^1.12.0"
       }
@@ -4689,6 +5522,26 @@
         "slash": "^2.0.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -4698,22 +5551,77 @@
       }
     },
     "babel-loader": {
-      "version": "8.0.6",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
-      "integrity": "sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
+      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
       "dev": true,
       "requires": {
-        "find-cache-dir": "^2.0.0",
-        "loader-utils": "^1.0.2",
-        "mkdirp": "^0.5.1",
-        "pify": "^4.0.1"
+        "find-cache-dir": "^2.1.0",
+        "loader-utils": "^1.4.0",
+        "mkdirp": "^0.5.3",
+        "pify": "^4.0.1",
+        "schema-utils": "^2.6.5"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
+          "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "emojis-list": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+          "dev": true
+        },
+        "fast-deep-equal": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
         "pify": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
           "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
           "dev": true
+        },
+        "schema-utils": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
+          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
         }
       }
     },
@@ -4727,9 +5635,9 @@
       }
     },
     "babel-plugin-dynamic-import-node": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz",
-      "integrity": "sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
       "dev": true,
       "requires": {
         "object.assign": "^4.1.0"
@@ -4778,31 +5686,6 @@
         "babel-types": "^6.24.1"
       }
     },
-    "babel-polyfill": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
-      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "regenerator-runtime": "^0.10.5"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.11",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
-          "dev": true
-        },
-        "regenerator-runtime": {
-          "version": "0.10.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
-          "dev": true
-        }
-      }
-    },
     "babel-preset-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -5144,13 +6027,13 @@
       "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
     },
     "bootstrap-vue": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.2.0.tgz",
-      "integrity": "sha512-Y/n6wxMga0Be/RKb1tkAZfCXfSN9vPS66TRuva/MlJ+MqyxW9+htbsTOQj13Yq0oBw0aY5r6cVBlqoCEpZb7tQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.13.1.tgz",
+      "integrity": "sha512-FF1GLRvvj+TgpLkMG/A8+tCMQfWnfKpsPqt7s097VTX2lZv2/YmyhehRC1qraPHYqT7qQVy48TCxSw1H8hNh3Q==",
       "requires": {
         "@nuxt/opencollective": "^0.3.0",
         "bootstrap": ">=4.4.1 <5.0.0",
-        "popper.js": "^1.16.0",
+        "popper.js": "^1.16.1",
         "portal-vue": "^2.1.7",
         "vue-functional-data-merge": "^3.1.0"
       }
@@ -5305,9 +6188,9 @@
           }
         },
         "term-size": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.1.1.tgz",
-          "integrity": "sha512-UqvQSch04R+69g4RDhrslmGvGL3ucDRX/U+snYW0Mab4uCAyKSndUksaoqlJ81QKSpRnIsuOYQCbC2ZWx2896A==",
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.0.tgz",
+          "integrity": "sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==",
           "dev": true
         },
         "type-fest": {
@@ -5372,9 +6255,9 @@
       "dev": true
     },
     "browser-process-hrtime": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz",
-      "integrity": "sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
       "dev": true
     },
     "browser-resolve": {
@@ -5502,9 +6385,9 @@
       }
     },
     "buffer": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",
-      "integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz",
+      "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==",
       "dev": true,
       "requires": {
         "base64-js": "^1.0.2",
@@ -5603,9 +6486,9 @@
       "dev": true
     },
     "cacache": {
-      "version": "12.0.3",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.3.tgz",
-      "integrity": "sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==",
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+      "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
       "dev": true,
       "requires": {
         "bluebird": "^3.5.5",
@@ -5850,9 +6733,9 @@
       }
     },
     "case-sensitive-paths-webpack-plugin": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz",
-      "integrity": "sha512-u5ElzokS8A1pm9vM3/iDgTcI3xqHxuCao94Oz8etI3cf0Tio0p8izkDYbTIn09uP3yUUr6+veaE6IkjnTYS46g==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz",
+      "integrity": "sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==",
       "dev": true
     },
     "caseless": {
@@ -5982,9 +6865,9 @@
       }
     },
     "chownr": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.3.tgz",
-      "integrity": "sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
       "dev": true
     },
     "chrome-trace-event": {
@@ -6036,9 +6919,9 @@
       }
     },
     "clean-css": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
-      "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
+      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
       "dev": true,
       "requires": {
         "source-map": "~0.6.0"
@@ -6229,9 +7112,9 @@
           }
         },
         "yargs": {
-          "version": "15.1.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.1.0.tgz",
-          "integrity": "sha512-T39FNN1b6hCW4SOIk1XyTOWxtXdcen0t+XYrysQmChzSipvhBO8Bj0nK1ozAasdk24dNWuMZvr4k24nz+8HHLg==",
+          "version": "15.3.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.3.1.tgz",
+          "integrity": "sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA==",
           "dev": true,
           "requires": {
             "cliui": "^6.0.0",
@@ -6244,13 +7127,13 @@
             "string-width": "^4.2.0",
             "which-module": "^2.0.0",
             "y18n": "^4.0.0",
-            "yargs-parser": "^16.1.0"
+            "yargs-parser": "^18.1.1"
           }
         },
         "yargs-parser": {
-          "version": "16.1.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-16.1.0.tgz",
-          "integrity": "sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==",
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -6260,13 +7143,38 @@
       }
     },
     "cli-progress": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.5.0.tgz",
-      "integrity": "sha512-S1wR4xfcfLWbVBH6RwYat1nMCm2UsuygxNoiRYVAXQsuWKjCRgWRZVohXLmsWfiuAK0FFf7t9OyZ2JBmDWaQGA==",
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.8.2.tgz",
+      "integrity": "sha512-qRwBxLldMSfxB+YGFgNRaj5vyyHe1yMpVeDL79c+7puGujdKJHQHydgqXDcrkvQgJ5U/d3lpf6vffSoVVUftVQ==",
       "dev": true,
       "requires": {
         "colors": "^1.1.2",
-        "string-width": "^2.1.1"
+        "string-width": "^4.2.0"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        }
       }
     },
     "cli-spinners": {
@@ -6323,12 +7231,13 @@
       }
     },
     "cli-ux": {
-      "version": "4.9.3",
-      "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-4.9.3.tgz",
-      "integrity": "sha512-/1owvF0SZ5Gn54cgrikJ0QskgTzeg30HGjkmjFoaHDJzAqFpuX1DBpFR8aLvsE1J5s9MgeYRENQK4BFwOag5VA==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-5.4.5.tgz",
+      "integrity": "sha512-5A6FuU0wPUlfCWUjtizUvNIbXElp6jN9QUJsDibs6F9cVX1kTgaMR3m6KT0R3iriEXpMrmPKV6yYS8XICNuQ6Q==",
       "dev": true,
       "requires": {
-        "@oclif/errors": "^1.2.2",
+        "@oclif/command": "^1.5.1",
+        "@oclif/errors": "^1.2.1",
         "@oclif/linewrap": "^1.0.0",
         "@oclif/screen": "^1.0.3",
         "ansi-escapes": "^3.1.0",
@@ -6336,33 +7245,42 @@
         "cardinal": "^2.1.1",
         "chalk": "^2.4.1",
         "clean-stack": "^2.0.0",
+        "cli-progress": "^3.4.0",
         "extract-stack": "^1.0.0",
-        "fs-extra": "^7.0.0",
+        "fs-extra": "^7.0.1",
         "hyperlinker": "^1.0.0",
-        "indent-string": "^3.2.0",
+        "indent-string": "^4.0.0",
         "is-wsl": "^1.1.0",
+        "js-yaml": "^3.13.1",
         "lodash": "^4.17.11",
-        "password-prompt": "^1.0.7",
+        "natural-orderby": "^2.0.1",
+        "password-prompt": "^1.1.2",
         "semver": "^5.6.0",
-        "strip-ansi": "^5.0.0",
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.1.0",
         "supports-color": "^5.5.0",
         "supports-hyperlinks": "^1.0.1",
         "treeify": "^1.1.0",
         "tslib": "^1.9.3"
       },
       "dependencies": {
-        "indent-string": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
-          "dev": true
-        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
         },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
         "strip-ansi": {
           "version": "5.2.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
@@ -6375,15 +7293,15 @@
       }
     },
     "cli-width": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
-      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
+      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
       "dev": true
     },
     "clipboard": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
-      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -6393,13 +7311,25 @@
       }
     },
     "clipboardy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.1.0.tgz",
-      "integrity": "sha512-2pzOUxWcLlXWtn+Jd6js3o12TysNOOVes/aQfg+MT/35vrxWzedHlLwyoJpXjsFKWm95BTNEcMGD9+a7mKzZkQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
+      "integrity": "sha512-mKhiIL2DrQIsuXMgBgnfEHOZOryC7kY7YO//TN6c63wlEm3NG5tz+YgY5rVi29KCmq/QQjKYvM7a19+MDOTHOQ==",
       "dev": true,
       "requires": {
         "arch": "^2.1.1",
-        "execa": "^1.0.0"
+        "execa": "^1.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "dependencies": {
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "dev": true,
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
+        }
       }
     },
     "cliui": {
@@ -6712,9 +7642,9 @@
       "dev": true
     },
     "consola": {
-      "version": "2.11.3",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-2.11.3.tgz",
-      "integrity": "sha512-aoW0YIIAmeftGR8GSpw6CGQluNdkWMWh3yEFjH/hmynTYnMtibXszii3lxCXmk8YxJtI3FAK5aTiquA5VH68Gw=="
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.12.1.tgz",
+      "integrity": "sha512-aEkkju9ZcEa9y2MhzNhfmTUws/CEZZ0LKu0FxftSU3HygPfVMMIMSYyYct+xBN6XNRhsaDZjw2HAv3m2ammXSA=="
     },
     "console-browserify": {
       "version": "1.2.0",
@@ -6875,20 +7805,50 @@
       }
     },
     "core-js": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.3.tgz",
-      "integrity": "sha512-DOO9b18YHR+Wk5kJ/c5YFbXuUETreD4TrvXb6edzqZE3aAEd0eJIAWghZ9HttMuiON8SVCnU3fqA4rPxRDD1HQ=="
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
+      "integrity": "sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA=="
     },
     "core-js-compat": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.3.tgz",
-      "integrity": "sha512-Y3YNGU3bU1yrnzVodop23ghArbKv4IqkZg9MMOWv/h7KT6NRk1/SzHhWDDlubg2+tlcUzAqgj1/GyeJ9fUKMeg==",
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",
+      "integrity": "sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.8.3",
+        "browserslist": "^4.8.5",
         "semver": "7.0.0"
       },
       "dependencies": {
+        "browserslist": {
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001043",
+            "electron-to-chromium": "^1.3.413",
+            "node-releases": "^1.1.53",
+            "pkg-up": "^2.0.0"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001054",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
+          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.432",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
+          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.55",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
+          "dev": true
+        },
         "semver": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
@@ -7053,9 +8013,9 @@
       }
     },
     "css-loader": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
-      "integrity": "sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.3.tgz",
+      "integrity": "sha512-UEr9NH5Lmi7+dguAm+/JSPovNjYbm2k3TK58EiwQHzOHH5Jfq1Y+XoP2bQO6TMn7PptMd0opxxedAWcaSTRKHw==",
       "dev": true,
       "requires": {
         "camelcase": "^5.3.1",
@@ -7063,32 +8023,49 @@
         "icss-utils": "^4.1.1",
         "loader-utils": "^1.2.3",
         "normalize-path": "^3.0.0",
-        "postcss": "^7.0.23",
+        "postcss": "^7.0.27",
         "postcss-modules-extract-imports": "^2.0.0",
         "postcss-modules-local-by-default": "^3.0.2",
-        "postcss-modules-scope": "^2.1.1",
+        "postcss-modules-scope": "^2.2.0",
         "postcss-modules-values": "^3.0.0",
-        "postcss-value-parser": "^4.0.2",
-        "schema-utils": "^2.6.0"
+        "postcss-value-parser": "^4.0.3",
+        "schema-utils": "^2.6.6",
+        "semver": "^6.3.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
+          "integrity": "sha512-k+V+hzjm5q/Mr8ef/1Y9goCmlsK4I6Sm74teeyGvFk1XrOsbsKLjEdrvny42CZ+a8sXbk8KWpY/bDwS+FLL2UQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
           "dev": true
         },
-        "cssesc": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+        "fast-deep-equal": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
+          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
           "dev": true
         },
-        "postcss-value-parser": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
-          "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
-          "dev": true
+        "schema-utils": {
+          "version": "2.6.6",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
+          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.12.0",
+            "ajv-keywords": "^3.4.1"
+          }
         }
       }
     },
@@ -7128,12 +8105,6 @@
         }
       }
     },
-    "css-unit-converter": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.1.tgz",
-      "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=",
-      "dev": true
-    },
     "css-what": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -7141,9 +8112,9 @@
       "dev": true
     },
     "cssesc": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
-      "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
     "cssnano": {
@@ -7224,13 +8195,37 @@
       "dev": true
     },
     "csso": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.2.tgz",
-      "integrity": "sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.0.3.tgz",
+      "integrity": "sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==",
       "dev": true,
       "requires": {
-        "css-tree": "1.0.0-alpha.37"
-      }
+        "css-tree": "1.0.0-alpha.39"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.0.0-alpha.39",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.39.tgz",
+          "integrity": "sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.6",
+            "source-map": "^0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.6.tgz",
+          "integrity": "sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
     },
     "cssom": {
       "version": "0.3.8",
@@ -7262,12 +8257,6 @@
         "ndjson": "^1.4.0"
       }
     },
-    "current-script-polyfill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz",
-      "integrity": "sha1-8xz35PPiGLBybnOMqSoC00iO9hU=",
-      "dev": true
-    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -7363,9 +8352,9 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
     },
     "decompress": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.0.tgz",
-      "integrity": "sha1-eu3YVCflqS2s/lVnSnxQXpbQH50=",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz",
+      "integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==",
       "dev": true,
       "requires": {
         "decompress-tar": "^4.0.0",
@@ -7403,6 +8392,14 @@
         "file-type": "^5.2.0",
         "is-stream": "^1.1.0",
         "tar-stream": "^1.5.2"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
+          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
+          "dev": true
+        }
       }
     },
     "decompress-tarbz2": {
@@ -7435,6 +8432,14 @@
         "decompress-tar": "^4.1.1",
         "file-type": "^5.2.0",
         "is-stream": "^1.1.0"
+      },
+      "dependencies": {
+        "file-type": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
+          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
+          "dev": true
+        }
       }
     },
     "decompress-unzip": {
@@ -7515,9 +8520,9 @@
       "dev": true
     },
     "deepmerge": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-3.3.0.tgz",
-      "integrity": "sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==",
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
       "dev": true
     },
     "default-gateway": {
@@ -7530,9 +8535,9 @@
       },
       "dependencies": {
         "cross-spawn": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
-          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
+          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -7830,12 +8835,6 @@
         "streamsearch": "0.1.2"
       }
     },
-    "didyoumean": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
-      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
-      "dev": true
-    },
     "diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -7843,9 +8842,9 @@
       "dev": true
     },
     "diff-sequences": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
-      "integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
+      "version": "25.2.6",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-25.2.6.tgz",
+      "integrity": "sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==",
       "dev": true
     },
     "diffie-hellman": {
@@ -8007,71 +9006,45 @@
       "dev": true
     },
     "download": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/download/-/download-5.0.3.tgz",
-      "integrity": "sha1-Y1N/l3+ZJmow64oqL70fILgAD3o=",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
+      "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
       "dev": true,
       "requires": {
-        "caw": "^2.0.0",
-        "decompress": "^4.0.0",
+        "archive-type": "^4.0.0",
+        "caw": "^2.0.1",
+        "content-disposition": "^0.5.2",
+        "decompress": "^4.2.0",
+        "ext-name": "^5.0.0",
+        "file-type": "^8.1.0",
         "filenamify": "^2.0.0",
         "get-stream": "^3.0.0",
-        "got": "^6.3.0",
-        "mkdirp": "^0.5.1",
-        "pify": "^2.3.0"
-      },
-      "dependencies": {
-        "got": {
-          "version": "6.7.1",
-          "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
-          "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
-          "dev": true,
-          "requires": {
-            "create-error-class": "^3.0.0",
-            "duplexer3": "^0.1.4",
-            "get-stream": "^3.0.0",
-            "is-redirect": "^1.0.0",
-            "is-retry-allowed": "^1.0.0",
-            "is-stream": "^1.0.0",
-            "lowercase-keys": "^1.0.0",
-            "safe-buffer": "^5.0.1",
-            "timed-out": "^4.0.0",
-            "unzip-response": "^2.0.1",
-            "url-parse-lax": "^1.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        },
-        "prepend-http": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
-          "dev": true
-        },
-        "url-parse-lax": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-          "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
-          "dev": true,
-          "requires": {
-            "prepend-http": "^1.0.1"
-          }
-        }
+        "got": "^8.3.1",
+        "make-dir": "^1.2.0",
+        "p-event": "^2.1.0",
+        "pify": "^3.0.0"
       }
     },
     "download-git-repo": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/download-git-repo/-/download-git-repo-1.1.0.tgz",
-      "integrity": "sha512-yXcCvhkPKmq5M2cQXss6Qbig+LZnzRIT40XCYm/QCRnJaPG867StB1qnsBLxOGrPH1YEIRWW2gJq7LLMyw+NmA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/download-git-repo/-/download-git-repo-3.0.2.tgz",
+      "integrity": "sha512-N8hWXD4hXqmEcNoR8TBYFntaOcYvEQ7Bz90mgm3bZRTuteGQqwT32VDMnTyD0KTEvb8BWrMc1tVmzuV9u/WrAg==",
       "dev": true,
       "requires": {
-        "download": "^5.0.3",
+        "download": "^7.1.0",
         "git-clone": "^0.1.0",
-        "rimraf": "^2.6.1"
+        "rimraf": "^3.0.0"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
       }
     },
     "duplexer": {
@@ -8229,18 +9202,15 @@
         "graceful-fs": "^4.1.2",
         "memory-fs": "^0.5.0",
         "tapable": "^1.0.0"
-      },
-      "dependencies": {
-        "memory-fs": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
-          "dev": true,
-          "requires": {
-            "errno": "^0.1.3",
-            "readable-stream": "^2.0.1"
-          }
-        }
+      }
+    },
+    "enquirer": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.5.tgz",
+      "integrity": "sha512-BNT1C08P9XD0vNg3J475yIUG+mVdp9T6towYFHUv897X0KoHBjB1shyrNmhmtHWKP17iSWgo7Gqh7BBuzLZMSA==",
+      "dev": true,
+      "requires": {
+        "ansi-colors": "^3.2.1"
       }
     },
     "entities": {
@@ -8259,9 +9229,9 @@
       }
     },
     "envinfo": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.5.0.tgz",
-      "integrity": "sha512-jDgnJaF/Btomk+m3PZDTTCb5XIIIX3zYItnCRfF73zVgvinLoRomuhi75Y4su0PtQxWz4v66XnLLckyvyJTOIQ==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.5.1.tgz",
+      "integrity": "sha512-hQBkDf2iO4Nv0CNHpCuSBeaSrveU6nThVxFGTrq/eDlV716UQk09zChaJae4mZRsos1x4YLY2TaH3LHUae3ZmQ==",
       "dev": true
     },
     "errno": {
@@ -8346,24 +9316,18 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.12.1.tgz",
-      "integrity": "sha512-Q8t2YZ+0e0pc7NRVj3B4tSQ9rim1oi4Fh46k2xhJ2qOiEwhQfdjyEQddWdj7ZFaKmU+5104vn1qrcjEPWq+bgQ==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.1.tgz",
+      "integrity": "sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==",
       "dev": true,
       "requires": {
-        "esprima": "^3.1.3",
+        "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
         "optionator": "^0.8.1",
         "source-map": "~0.6.1"
       },
       "dependencies": {
-        "esprima": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
-          "dev": true
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -8374,22 +9338,22 @@
       }
     },
     "eslint": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
-      "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.0.0.tgz",
+      "integrity": "sha512-qY1cwdOxMONHJfGqw52UOpZDeqXy8xmD0u8CT6jIstil72jkhURC704W8CFyTPDPllz4z4lu0Ql1+07PG/XdIg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "ajv": "^6.10.0",
-        "chalk": "^2.1.0",
-        "cross-spawn": "^6.0.5",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
         "debug": "^4.0.1",
         "doctrine": "^3.0.0",
         "eslint-scope": "^5.0.0",
-        "eslint-utils": "^1.4.3",
+        "eslint-utils": "^2.0.0",
         "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.1.2",
-        "esquery": "^1.0.1",
+        "espree": "^7.0.0",
+        "esquery": "^1.2.0",
         "esutils": "^2.0.2",
         "file-entry-cache": "^5.0.1",
         "functional-red-black-tree": "^1.0.1",
@@ -8402,44 +9366,77 @@
         "is-glob": "^4.0.0",
         "js-yaml": "^3.13.1",
         "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.3.0",
+        "levn": "^0.4.1",
         "lodash": "^4.17.14",
         "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.8.3",
+        "optionator": "^0.9.1",
         "progress": "^2.0.0",
-        "regexpp": "^2.0.1",
-        "semver": "^6.1.2",
-        "strip-ansi": "^5.2.0",
-        "strip-json-comments": "^3.0.1",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
         "table": "^5.2.3",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
-        "ansi-escapes": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz",
-          "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==",
+        "acorn": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+          "dev": true
+        },
+        "acorn-jsx": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
+          "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
           "dev": true,
           "requires": {
-            "type-fest": "^0.8.1"
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
           }
         },
-        "ansi-regex": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+        "chalk": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
-        "cli-cursor": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-          "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+        "cross-spawn": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
+          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
           "dev": true,
           "requires": {
-            "restore-cursor": "^3.1.0"
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
           }
         },
         "doctrine": {
@@ -8451,12 +9448,6 @@
             "esutils": "^2.0.2"
           }
         },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-          "dev": true
-        },
         "eslint-scope": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
@@ -8467,33 +9458,58 @@
             "estraverse": "^4.1.1"
           }
         },
-        "figures": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz",
-          "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==",
+        "espree": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.0.0.tgz",
+          "integrity": "sha512-/r2XEx5Mw4pgKdyb7GNLQNsu++asx/dltf/CI8RFi9oGHxmQFgvLbc5Op4U6i8Oaj+kdslhJtVlEZeAqH5qOTw==",
           "dev": true,
           "requires": {
-            "escape-string-regexp": "^1.0.5"
+            "acorn": "^7.1.1",
+            "acorn-jsx": "^5.2.0",
+            "eslint-visitor-keys": "^1.1.0"
+          }
+        },
+        "esquery": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
+          "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
+          "dev": true,
+          "requires": {
+            "estraverse": "^5.1.0"
+          },
+          "dependencies": {
+            "estraverse": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
+              "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==",
+              "dev": true
+            }
           }
         },
         "glob-parent": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
           "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
         },
         "globals": {
-          "version": "12.3.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.3.0.tgz",
-          "integrity": "sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==",
+          "version": "12.4.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
+          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
           "dev": true,
           "requires": {
             "type-fest": "^0.8.1"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
         "import-fresh": {
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
@@ -8504,120 +9520,107 @@
             "resolve-from": "^4.0.0"
           }
         },
-        "inquirer": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.3.tgz",
-          "integrity": "sha512-+OiOVeVydu4hnCGLCSX+wedovR/Yzskv9BFqUNNKq9uU2qg7LCcCo3R86S2E7WLo0y/x2pnEZfZe1CoYnORUAw==",
+        "levn": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+          "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
           "dev": true,
           "requires": {
-            "ansi-escapes": "^4.2.1",
-            "chalk": "^2.4.2",
-            "cli-cursor": "^3.1.0",
-            "cli-width": "^2.0.0",
-            "external-editor": "^3.0.3",
-            "figures": "^3.0.0",
-            "lodash": "^4.17.15",
-            "mute-stream": "0.0.8",
-            "run-async": "^2.2.0",
-            "rxjs": "^6.5.3",
-            "string-width": "^4.1.0",
-            "strip-ansi": "^5.1.0",
-            "through": "^2.3.6"
+            "prelude-ls": "^1.2.1",
+            "type-check": "~0.4.0"
           }
         },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "dev": true
+        "optionator": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+          "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+          "dev": true,
+          "requires": {
+            "deep-is": "^0.1.3",
+            "fast-levenshtein": "^2.0.6",
+            "levn": "^0.4.1",
+            "prelude-ls": "^1.2.1",
+            "type-check": "^0.4.0",
+            "word-wrap": "^1.2.3"
+          }
         },
-        "mimic-fn": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
           "dev": true
         },
-        "mute-stream": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-          "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+        "prelude-ls": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+          "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
           "dev": true
         },
-        "onetime": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
-          "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
-          "dev": true,
-          "requires": {
-            "mimic-fn": "^2.1.0"
-          }
-        },
         "resolve-from": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
           "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
           "dev": true
         },
-        "restore-cursor": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-          "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
           "dev": true,
           "requires": {
-            "onetime": "^5.1.0",
-            "signal-exit": "^3.0.2"
+            "shebang-regex": "^3.0.0"
           }
         },
-        "string-width": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
-          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.0"
-          },
-          "dependencies": {
-            "strip-ansi": {
-              "version": "6.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-              "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^5.0.0"
-              }
-            }
-          }
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
         },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+        "strip-json-comments": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.0.tgz",
+          "integrity": "sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^4.1.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "4.1.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-              "dev": true
-            }
+            "has-flag": "^4.0.0"
           }
         },
-        "strip-json-comments": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz",
-          "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==",
-          "dev": true
+        "type-check": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+          "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+          "dev": true,
+          "requires": {
+            "prelude-ls": "^1.2.1"
+          }
         },
         "type-fest": {
           "version": "0.8.1",
           "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
           "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
           "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
         }
       }
     },
@@ -8929,11 +9932,12 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.1.2.tgz",
-      "integrity": "sha512-M75oAB+2a/LNkLKRbeEaS07EjzjIUaV7/hYoHAfRFeeF8ZMmCbahUn8nQLsLP85mkar24+zDU3QW2iT1JRsACw==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-6.2.2.tgz",
+      "integrity": "sha512-Nhc+oVAHm0uz/PkJAWscwIT4ijTrK5fqNqz9QB1D35SbbuMG1uB6Yr5AJpvPSWg+WOw7nYNswerYh0kOk64gqQ==",
       "dev": true,
       "requires": {
+        "natural-compare": "^1.4.0",
         "semver": "^5.6.0",
         "vue-eslint-parser": "^7.0.0"
       },
@@ -8957,9 +9961,9 @@
       }
     },
     "eslint-utils": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
-      "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.0.0.tgz",
+      "integrity": "sha512-0HCPuJv+7Wv1bACm8y5/ECVfYdfsAm9xmVb7saeFlxjPYALefjhbYoCkBjPdPzGH8wWyTpAez82Fh3VKYEZ8OA==",
       "dev": true,
       "requires": {
         "eslint-visitor-keys": "^1.1.0"
@@ -8989,9 +9993,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
-          "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==",
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
           "dev": true
         }
       }
@@ -9180,6 +10184,34 @@
         "jest-matcher-utils": "^24.9.0",
         "jest-message-util": "^24.9.0",
         "jest-regex-util": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        }
       }
     },
     "express": {
@@ -9243,6 +10275,25 @@
       "integrity": "sha1-OirSf3vryQ/FM9EQ18bYMJe80Fc=",
       "dev": true
     },
+    "ext-list": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
+      "integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
+      "dev": true,
+      "requires": {
+        "mime-db": "^1.28.0"
+      }
+    },
+    "ext-name": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ext-name/-/ext-name-5.0.0.tgz",
+      "integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
+      "dev": true,
+      "requires": {
+        "ext-list": "^2.0.0",
+        "sort-keys-length": "^1.0.0"
+      }
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -9406,18 +10457,9 @@
       "dev": true
     },
     "fast-text-encoding": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.0.tgz",
-      "integrity": "sha512-R9bHCvweUxxwkDwhjav5vxpFvdPGlVngtqmx4pIZfSUhM/Q4NiIUHB456BAf+Q1Nwu3HEZYONtu+Rya+af4jiQ=="
-    },
-    "fastq": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
-      "integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
-      "dev": true,
-      "requires": {
-        "reusify": "^1.0.0"
-      }
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.2.tgz",
+      "integrity": "sha512-5rQdinSsycpzvAoHga2EDn+LRX1d5xLFsuNG0Kg61JrAT/tASXcLL0nf/33v+sAxlQcfYmWbTURa1mmAf55jGw=="
     },
     "faye-websocket": {
       "version": "0.10.0",
@@ -9447,9 +10489,9 @@
       }
     },
     "figgy-pudding": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
-      "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
       "dev": true
     },
     "figures": {
@@ -9482,9 +10524,9 @@
       }
     },
     "file-type": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-      "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
+      "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==",
       "dev": true
     },
     "file-uri-to-path": {
@@ -9689,15 +10731,15 @@
       }
     },
     "flatted": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.1.tgz",
-      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
+      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
       "dev": true
     },
     "flow-parser": {
-      "version": "0.116.0",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.116.0.tgz",
-      "integrity": "sha512-sHiUjYI9U7H94diCN8BdzwYFJIkyCy2GN73UDFbKHTIuLdfROfZZwD6jAv2qWMl7lcPrBK9YAVeArLLbekxVeg==",
+      "version": "0.124.0",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.124.0.tgz",
+      "integrity": "sha512-ftEG23+ieFYxpBnwJXLZiSmAjrtVU7J2NmEqv7OZbwPWgqsqKsSD73RwBxdEFhUdyfvceDRZ7GbQrYZJ0YKuFg==",
       "dev": true
     },
     "flush-write-stream": {
@@ -9711,9 +10753,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.9.0.tgz",
-      "integrity": "sha512-CRcPzsSIbXyVDl0QI01muNDu69S8trU4jArW9LpOt2WtC6LyUJetcIrmfHsRBx7/Jb6GHJUiuqyYxPooFfNt6A==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
+      "integrity": "sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==",
       "dev": true,
       "requires": {
         "debug": "^3.0.0"
@@ -9749,14 +10791,14 @@
       "dev": true
     },
     "fork-ts-checker-webpack-plugin": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.6.0.tgz",
-      "integrity": "sha512-vqOY5gakcoon2s12V7MMe01OPwfgqulUWFzm+geQaPPOBKjW1I7aqqoBVlU0ECn97liMB0ECs16pRdIGe9qdRw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-3.1.1.tgz",
+      "integrity": "sha512-DuVkPNrM12jR41KM2e+N+styka0EgLkTnXmNcXdgOM37vtGeY+oCBK/Jx0hzSeEU6memFCtWb4htrHPMDfwwUQ==",
       "dev": true,
       "requires": {
         "babel-code-frame": "^6.22.0",
         "chalk": "^2.4.1",
-        "chokidar": "^2.0.4",
+        "chokidar": "^3.3.0",
         "micromatch": "^3.1.10",
         "minimatch": "^3.0.4",
         "semver": "^5.6.0",
@@ -9764,11 +10806,110 @@
         "worker-rpc": "^0.1.0"
       },
       "dependencies": {
+        "anymatch": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+          "dev": true,
+          "requires": {
+            "normalize-path": "^3.0.0",
+            "picomatch": "^2.0.4"
+          }
+        },
+        "binary-extensions": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+          "dev": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
+          "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
+          "dev": true,
+          "requires": {
+            "anymatch": "~3.1.1",
+            "braces": "~3.0.2",
+            "fsevents": "~2.1.2",
+            "glob-parent": "~5.1.0",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.4.0"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "fsevents": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+          "dev": true,
+          "optional": true
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "readdirp": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+          "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+          "dev": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
         }
       }
     },
@@ -9843,9 +10984,9 @@
       }
     },
     "fs-minipass": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.0.0.tgz",
-      "integrity": "sha512-40Qz+LFXmd9tzYVnnBmZvFfvAADfUA14TXPK1s7IfElJTIZ97rA8w4Kin7Wt5JBrC3ShnnFJO/5vPjPEeJIq9A==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "dev": true,
       "requires": {
         "minipass": "^3.0.0"
@@ -10675,31 +11816,63 @@
       }
     },
     "git-parse": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/git-parse/-/git-parse-1.0.3.tgz",
-      "integrity": "sha512-LlGDePBQ9Lr/jsL3ULrnV8SQL8sk3cdScyc+vAk6jVLkHBOxdIj3JosNWemH2o9pNnGtcqukl+ym1Nl6k5jw0Q==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/git-parse/-/git-parse-1.0.4.tgz",
+      "integrity": "sha512-NSC71SqG6jN0XYPbib8t/mgguVLddw+xvkkLv2EsCFvHfsZjO+ZqMcGoGHHMqfhZllCDDAkOwZESkZEmICj9ZA==",
       "dev": true,
       "requires": {
-        "babel-polyfill": "6.26.0",
         "byline": "5.0.0",
-        "util.promisify": "1.0.0"
+        "util.promisify": "1.0.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.5",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
+          "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.1.5",
+            "is-regex": "^1.0.5",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimleft": "^2.1.1",
+            "string.prototype.trimright": "^2.1.1"
+          }
+        },
+        "util.promisify": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+          "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
+          "dev": true,
+          "requires": {
+            "define-properties": "^1.1.3",
+            "es-abstract": "^1.17.2",
+            "has-symbols": "^1.0.1",
+            "object.getownpropertydescriptors": "^2.1.0"
+          }
+        }
       }
     },
     "git-rev-sync": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/git-rev-sync/-/git-rev-sync-1.12.0.tgz",
-      "integrity": "sha1-RGhAbH5sO6TPRYeZnhrbKNnRr1U=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/git-rev-sync/-/git-rev-sync-2.0.0.tgz",
+      "integrity": "sha512-vnHFv2eocTmt/wHqZm3ksxtVshK4vptT0cEoumk6hAYRFx3do6Qo7xHBTBCv29+r3ZZCQOQ1i328MUCsYF7AUw==",
       "dev": true,
       "requires": {
         "escape-string-regexp": "1.0.5",
-        "graceful-fs": "4.1.11",
+        "graceful-fs": "4.1.15",
         "shelljs": "0.7.7"
       },
       "dependencies": {
         "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "version": "4.1.15",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
+          "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
           "dev": true
         }
       }
@@ -10852,9 +12025,9 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
     "graphql": {
-      "version": "14.5.8",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.5.8.tgz",
-      "integrity": "sha512-MMwmi0zlVLQKLdGiMfWkgQD7dY/TUKt4L+zgJ/aR0Howebod3aNgP5JkgvAULiR2HPVZaP2VEElqtdidHweLkg==",
+      "version": "14.6.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.6.0.tgz",
+      "integrity": "sha512-VKzfvHEKybTKjQVpTFrA5yUq2S9ihcZvfJAtsDBBCuV6wauPu1xl/f9ehgVf0FcEJJs4vz6ysb/ZMkGigQZseg==",
       "dev": true,
       "requires": {
         "iterall": "^1.2.2"
@@ -10883,14 +12056,14 @@
       }
     },
     "graphql-extensions": {
-      "version": "0.10.10",
-      "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.10.10.tgz",
-      "integrity": "sha512-pNb1DmUk6vsGtCjCRecpKoXadKNMyKxyLyE9IX65N9aKSmLL+AF7dJOOc4MWhdaAXlzxaDDhe54GpaOfoH7AOw==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.12.0.tgz",
+      "integrity": "sha512-kBRLtNeknrFl0W/UQQYebj6qnvb1E1RpQ2+C7Y8pwMc6yV8+9pWFx5RP0HzfeEuScCmK93i3H5sdPedoQWwENw==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.3",
         "apollo-server-env": "^2.4.3",
-        "apollo-server-types": "^0.2.10"
+        "apollo-server-types": "^0.4.0"
       }
     },
     "graphql-subscriptions": {
@@ -10903,18 +12076,18 @@
       }
     },
     "graphql-tag": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.1.tgz",
-      "integrity": "sha512-jApXqWBzNXQ8jYa/HLkZJaVw9jgwNqZkywa2zfFn16Iv1Zb7ELNHkJaXHR7Quvd5SIGsy6Ny7SUKATgnu05uEg==",
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.10.3.tgz",
+      "integrity": "sha512-4FOv3ZKfA4WdOKJeHdz6B3F/vxBLSgmBcGeAFPf4n1F64ltJUvOOerNj0rsJxONQGdhUMynQIvd6LzB+1J5oKA==",
       "dev": true
     },
     "graphql-tools": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-4.0.6.tgz",
-      "integrity": "sha512-jHLQw8x3xmSNRBCsaZqelXXsFfUSUSktSCUP8KYHiX1Z9qEuwcMpAf+FkdBzk8aTAFqOlPdNZ3OI4DKKqGKUqg==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-4.0.8.tgz",
+      "integrity": "sha512-MW+ioleBrwhRjalKjYaLQbr+920pHBgy9vM/n47sswtns8+96sRn5M/G+J1eu7IMeKWiN/9p6tmwCHU7552VJg==",
       "dev": true,
       "requires": {
-        "apollo-link": "^1.2.3",
+        "apollo-link": "^1.2.14",
         "apollo-utilities": "^1.0.1",
         "deprecated-decorator": "^0.1.6",
         "iterall": "^1.1.3",
@@ -10971,31 +12144,11 @@
       }
     },
     "handle-thing": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
-      "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "dev": true
     },
-    "handlebars": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.1.tgz",
-      "integrity": "sha512-2dd6soo60cwKNJ90VewNLIzdZPR/E2YhszOTgHpN9V0YuwZk7x33/iZoIBnASwDFVHMY7iJ6NPL8d9f/DWYCTA==",
-      "dev": true,
-      "requires": {
-        "neo-async": "^2.6.0",
-        "optimist": "^0.6.1",
-        "source-map": "^0.6.1",
-        "uglify-js": "^3.1.4"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -11109,9 +12262,9 @@
       }
     },
     "hash-sum": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-      "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-2.0.0.tgz",
+      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
     "hash.js": {
@@ -11147,13 +12300,10 @@
       "dev": true
     },
     "highlight.js": {
-      "version": "9.17.1",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.17.1.tgz",
-      "integrity": "sha512-TA2/doAur5Ol8+iM3Ov7qy3jYcr/QiJ2eDTdRF4dfbjG7AaaB99J5G+zSl11ljbl6cIcahgPY6SKb3sC3EJ0fw==",
-      "dev": true,
-      "requires": {
-        "handlebars": "^4.5.3"
-      }
+      "version": "9.18.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.18.1.tgz",
+      "integrity": "sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==",
+      "dev": true
     },
     "hmac-drbg": {
       "version": "1.0.1",
@@ -11227,15 +12377,15 @@
       }
     },
     "html-entities": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
-      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz",
+      "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==",
       "dev": true
     },
     "html-escaper": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.0.tgz",
-      "integrity": "sha512-a4u9BeERWGu/S8JiWEAQcdrg9v4QArtP9keViQjGMdff20fBdd8waotXaNmODqBe6uZ3Nafi7K/ho4gCQHV3Ig==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
     "html-minifier": {
@@ -11258,30 +12408,6 @@
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
           "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "uglify-js": {
-          "version": "3.4.10",
-          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
-          "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
-          "dev": true,
-          "requires": {
-            "commander": "~2.19.0",
-            "source-map": "~0.6.1"
-          },
-          "dependencies": {
-            "commander": {
-              "version": "2.19.0",
-              "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
-              "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
-              "dev": true
-            }
-          }
         }
       }
     },
@@ -11419,12 +12545,6 @@
         }
       }
     },
-    "http-parser-js": {
-      "version": "0.4.10",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
-      "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=",
-      "dev": true
-    },
     "http-proxy": {
       "version": "1.18.0",
       "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
@@ -11626,9 +12746,9 @@
       "dev": true
     },
     "in-publish": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
       "dev": true
     },
     "indent-string": {
@@ -11676,46 +12796,159 @@
       "dev": true
     },
     "inquirer": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-6.5.2.tgz",
-      "integrity": "sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.1.0.tgz",
+      "integrity": "sha512-5fJMWEmikSYu0nv/flMc475MhGbB7TSPd/2IpFV4I4rMklboCH2rQjYY5kKiYGHqUF9gvaambupcJFFG9dvReg==",
       "dev": true,
       "requires": {
-        "ansi-escapes": "^3.2.0",
-        "chalk": "^2.4.2",
-        "cli-cursor": "^2.1.0",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^3.0.0",
+        "cli-cursor": "^3.1.0",
         "cli-width": "^2.0.0",
         "external-editor": "^3.0.3",
-        "figures": "^2.0.0",
-        "lodash": "^4.17.12",
-        "mute-stream": "0.0.7",
-        "run-async": "^2.2.0",
-        "rxjs": "^6.4.0",
-        "string-width": "^2.1.0",
-        "strip-ansi": "^5.1.0",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.15",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.5.3",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
         "through": "^2.3.6"
       },
       "dependencies": {
-        "figures": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-          "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+        "ansi-escapes": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
           "dev": true,
           "requires": {
-            "escape-string-regexp": "^1.0.5"
+            "type-fest": "^0.11.0"
           }
         },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^4.1.0"
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
           }
-        }
-      }
-    },
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "cli-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+          "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+          "dev": true,
+          "requires": {
+            "restore-cursor": "^3.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "figures": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+          "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+          "dev": true,
+          "requires": {
+            "escape-string-regexp": "^1.0.5"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "dev": true
+        },
+        "onetime": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+          "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "^2.1.0"
+          }
+        },
+        "restore-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+          "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
+          "dev": true,
+          "requires": {
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2"
+          }
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
+          "dev": true
+        }
+      }
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -11768,12 +13001,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "invert-kv": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz",
-      "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==",
-      "dev": true
-    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -11792,9 +13019,9 @@
       "integrity": "sha1-J6nKN/FI0hArDvGRzL8sUajwJcY="
     },
     "irc-framework": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/irc-framework/-/irc-framework-4.6.0.tgz",
-      "integrity": "sha512-I/5QLe5BfK/4bgDRAaVec9l+8VYVEHOPYvjcNV5SshgCPssrFwjgCJ48oDYFf8J3HMAIbGTjqV+aOXCM/3r30A==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/irc-framework/-/irc-framework-4.8.1.tgz",
+      "integrity": "sha512-p/o58T25CSlnLFlpyBit2SN765HuvekICebiKlOeIsGLteRl8eqCHaWwk+zJxfoqSfbImKFye2dK/CPlPhME5g==",
       "requires": {
         "core-js": "^3.0.1",
         "eventemitter3": "^2.0.2",
@@ -11945,6 +13172,12 @@
       "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
       "dev": true
     },
+    "is-docker": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.0.0.tgz",
+      "integrity": "sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==",
+      "dev": true
+    },
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -11958,13 +13191,10 @@
       "dev": true
     },
     "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "dev": true,
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "2.0.0",
@@ -12114,9 +13344,9 @@
       }
     },
     "is-promise": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
-      "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "dev": true
     },
     "is-property": {
@@ -12230,9 +13460,9 @@
       "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "isbinaryfile": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.4.tgz",
-      "integrity": "sha512-pEutbN134CzcjlLS1myKX/uxNjwU5eBVSprvkpv3+3dqhBHUZLIWJQowC40w5c0Zf19vBY8mrZl88y5J4RAPbQ==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.6.tgz",
+      "integrity": "sha512-ORrEy+SNVqUhrCaal4hA4fBzhggQQ+BaLntyPOdoEiwlKZW9BZiJXjg3RMiruE4tPEI3pyVPpySHQF/dKWperg==",
       "dev": true
     },
     "isexe": {
@@ -12415,6 +13645,26 @@
         "jest-cli": "^24.9.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "ci-info": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
@@ -12462,6 +13712,28 @@
         "@jest/types": "^24.9.0",
         "execa": "^1.0.0",
         "throat": "^4.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "jest-config": {
@@ -12487,18 +13759,110 @@
         "micromatch": "^3.1.10",
         "pretty-format": "^24.9.0",
         "realpath-native": "^1.1.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
+        }
       }
     },
     "jest-diff": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.9.0.tgz",
-      "integrity": "sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==",
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-25.5.0.tgz",
+      "integrity": "sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==",
       "dev": true,
       "requires": {
-        "chalk": "^2.0.1",
-        "diff-sequences": "^24.9.0",
-        "jest-get-type": "^24.9.0",
-        "pretty-format": "^24.9.0"
+        "chalk": "^3.0.0",
+        "diff-sequences": "^25.2.6",
+        "jest-get-type": "^25.2.6",
+        "pretty-format": "^25.5.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
     "jest-docblock": {
@@ -12521,6 +13885,46 @@
         "jest-get-type": "^24.9.0",
         "jest-util": "^24.9.0",
         "pretty-format": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
+        }
       }
     },
     "jest-environment-jsdom": {
@@ -12535,26 +13939,68 @@
         "jest-mock": "^24.9.0",
         "jest-util": "^24.9.0",
         "jsdom": "^11.5.1"
-      }
-    },
-    "jest-environment-jsdom-fifteen": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.2.tgz",
-      "integrity": "sha512-nfrnAfwklE1872LIB31HcjM65cWTh1wzvMSp10IYtPJjLDUbTTvDpajZgIxUnhRmzGvogdHDayCIlerLK0OBBg==",
-      "dev": true,
-      "requires": {
-        "@jest/environment": "^24.3.0",
-        "@jest/fake-timers": "^24.3.0",
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
+      }
+    },
+    "jest-environment-jsdom-fifteen": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom-fifteen/-/jest-environment-jsdom-fifteen-1.0.2.tgz",
+      "integrity": "sha512-nfrnAfwklE1872LIB31HcjM65cWTh1wzvMSp10IYtPJjLDUbTTvDpajZgIxUnhRmzGvogdHDayCIlerLK0OBBg==",
+      "dev": true,
+      "requires": {
+        "@jest/environment": "^24.3.0",
+        "@jest/fake-timers": "^24.3.0",
         "@jest/types": "^24.3.0",
         "jest-mock": "^24.0.0",
         "jest-util": "^24.0.0",
         "jsdom": "^15.2.1"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "acorn": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
-          "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==",
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
           "dev": true
         },
         "cssom": {
@@ -12564,9 +14010,9 @@
           "dev": true
         },
         "cssstyle": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.0.0.tgz",
-          "integrity": "sha512-QXSAu2WBsSRXCPjvI43Y40m6fMevvyRm8JVAuF9ksQz5jha4pWP1wpaK7Yu5oLFc6+XAY+hj8YhefyXcBB53gg==",
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+          "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
           "dev": true,
           "requires": {
             "cssom": "~0.3.6"
@@ -12643,9 +14089,9 @@
           }
         },
         "ws": {
-          "version": "7.2.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.1.tgz",
-          "integrity": "sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A==",
+          "version": "7.2.5",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.5.tgz",
+          "integrity": "sha512-C34cIU4+DB2vMyAbmEKossWq2ZQDr6QEyuuCzWrM9zfw1sGc0mYiJ0UnG9zzNykt49C2Fi34hvr2vssFQRS6EA==",
           "dev": true
         }
       }
@@ -12661,12 +14107,34 @@
         "@jest/types": "^24.9.0",
         "jest-mock": "^24.9.0",
         "jest-util": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "jest-get-type": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
-      "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+      "version": "25.2.6",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-25.2.6.tgz",
+      "integrity": "sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==",
       "dev": true
     },
     "jest-haste-map": {
@@ -12687,6 +14155,28 @@
         "micromatch": "^3.1.10",
         "sane": "^4.0.3",
         "walker": "^1.0.7"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "jest-jasmine2": {
@@ -12711,6 +14201,40 @@
         "jest-util": "^24.9.0",
         "pretty-format": "^24.9.0",
         "throat": "^4.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
+        }
       }
     },
     "jest-leak-detector": {
@@ -12721,6 +14245,46 @@
       "requires": {
         "jest-get-type": "^24.9.0",
         "pretty-format": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
+        }
       }
     },
     "jest-matcher-utils": {
@@ -12733,6 +14297,64 @@
         "jest-diff": "^24.9.0",
         "jest-get-type": "^24.9.0",
         "pretty-format": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "diff-sequences": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
+          "integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
+          "dev": true
+        },
+        "jest-diff": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.9.0.tgz",
+          "integrity": "sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "diff-sequences": "^24.9.0",
+            "jest-get-type": "^24.9.0",
+            "pretty-format": "^24.9.0"
+          }
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
+        }
       }
     },
     "jest-message-util": {
@@ -12751,6 +14373,26 @@
         "stack-utils": "^1.0.1"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -12766,6 +14408,28 @@
       "dev": true,
       "requires": {
         "@jest/types": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "jest-pnp-resolver": {
@@ -12791,6 +14455,28 @@
         "chalk": "^2.0.1",
         "jest-pnp-resolver": "^1.2.1",
         "realpath-native": "^1.1.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "jest-resolve-dependencies": {
@@ -12802,6 +14488,28 @@
         "@jest/types": "^24.9.0",
         "jest-regex-util": "^24.3.0",
         "jest-snapshot": "^24.9.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "jest-runner": {
@@ -12829,6 +14537,28 @@
         "jest-worker": "^24.6.0",
         "source-map-support": "^0.5.6",
         "throat": "^4.0.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
       }
     },
     "jest-runtime": {
@@ -12862,6 +14592,26 @@
         "yargs": "^13.3.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -12904,6 +14654,64 @@
         "natural-compare": "^1.4.0",
         "pretty-format": "^24.9.0",
         "semver": "^6.2.0"
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
+        "diff-sequences": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
+          "integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
+          "dev": true
+        },
+        "jest-diff": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.9.0.tgz",
+          "integrity": "sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.0.1",
+            "diff-sequences": "^24.9.0",
+            "jest-get-type": "^24.9.0",
+            "pretty-format": "^24.9.0"
+          }
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
+        }
       }
     },
     "jest-transform-stub": {
@@ -12932,6 +14740,26 @@
         "source-map": "^0.6.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "callsites": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -12981,11 +14809,49 @@
         "pretty-format": "^24.9.0"
       },
       "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        },
         "camelcase": {
           "version": "5.3.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
           "dev": true
+        },
+        "jest-get-type": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
+          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
+          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+          "dev": true,
+          "requires": {
+            "@jest/types": "^24.9.0",
+            "ansi-regex": "^4.0.0",
+            "ansi-styles": "^3.2.0",
+            "react-is": "^16.8.4"
+          }
         }
       }
     },
@@ -13005,12 +14871,12 @@
       },
       "dependencies": {
         "ansi-escapes": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz",
-          "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==",
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
           "dev": true,
           "requires": {
-            "type-fest": "^0.8.1"
+            "type-fest": "^0.11.0"
           }
         },
         "string-length": {
@@ -13033,9 +14899,9 @@
           }
         },
         "type-fest": {
-          "version": "0.8.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
           "dev": true
         }
       }
@@ -13053,12 +14919,34 @@
         "chalk": "^2.0.1",
         "jest-util": "^24.9.0",
         "string-length": "^2.0.0"
-      }
-    },
-    "jest-worker": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
-      "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
+      },
+      "dependencies": {
+        "@jest/types": {
+          "version": "24.9.0",
+          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
+          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
+          "dev": true,
+          "requires": {
+            "@types/istanbul-lib-coverage": "^2.0.0",
+            "@types/istanbul-reports": "^1.1.1",
+            "@types/yargs": "^13.0.0"
+          }
+        },
+        "@types/yargs": {
+          "version": "13.0.8",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
+          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "dev": true,
+          "requires": {
+            "@types/yargs-parser": "*"
+          }
+        }
+      }
+    },
+    "jest-worker": {
+      "version": "24.9.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
+      "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
       "dev": true,
       "requires": {
         "merge-stream": "^2.0.0",
@@ -13077,28 +14965,34 @@
       }
     },
     "js-base64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
-      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
+      "integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==",
       "dev": true
     },
     "js-beautify": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.2.tgz",
-      "integrity": "sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.11.0.tgz",
+      "integrity": "sha512-a26B+Cx7USQGSWnz9YxgJNMmML/QG2nqIaL7VVYPCXbqiKz8PN0waSNvroMtvAK6tY7g/wPdNWGEP+JTNIBr6A==",
       "dev": true,
       "requires": {
         "config-chain": "^1.1.12",
         "editorconfig": "^0.15.3",
         "glob": "^7.1.3",
-        "mkdirp": "~0.5.1",
-        "nopt": "~4.0.1"
+        "mkdirp": "~1.0.3",
+        "nopt": "^4.0.3"
       },
       "dependencies": {
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
         "nopt": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
-          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+          "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
           "dev": true,
           "requires": {
             "abbrev": "1",
@@ -13144,9 +15038,9 @@
       "dev": true
     },
     "jscodeshift": {
-      "version": "0.6.4",
-      "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.6.4.tgz",
-      "integrity": "sha512-+NF/tlNbc2WEhXUuc4WEJLsJumF84tnaMUZW2hyJw3jThKKRvsPX4sPJVgO1lPE28z0gNL+gwniLG9d8mYvQCQ==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.7.1.tgz",
+      "integrity": "sha512-YMkZSyoc8zg5woZL23cmWlnFLPH/mHilonGA7Qbzs7H6M4v4PH0Qsn4jeDyw+CHhVoAnm9UxQyB0Yw1OT+mktA==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.1.6",
@@ -13164,35 +15058,9 @@
         "micromatch": "^3.1.10",
         "neo-async": "^2.5.0",
         "node-dir": "^0.1.17",
-        "recast": "^0.16.1",
+        "recast": "^0.18.1",
         "temp": "^0.8.1",
         "write-file-atomic": "^2.3.0"
-      },
-      "dependencies": {
-        "ast-types": {
-          "version": "0.11.7",
-          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.7.tgz",
-          "integrity": "sha512-2mP3TwtkY/aTv5X3ZsMpNAbOnyoC/aMJwJSoaELPkHId0nSQgFcnU4dRW3isxiz7+zBexk0ym3WNVjMiQBnJSw==",
-          "dev": true
-        },
-        "recast": {
-          "version": "0.16.2",
-          "resolved": "https://registry.npmjs.org/recast/-/recast-0.16.2.tgz",
-          "integrity": "sha512-O/7qXi51DPjRVdbrpNzoBQH5dnAPQNbfoOFyRiUwreTMJfIHYOEBzwuH+c0+/BTSJ3CQyKs6ILSWXhESH6Op3A==",
-          "dev": true,
-          "requires": {
-            "ast-types": "0.11.7",
-            "esprima": "~4.0.0",
-            "private": "~0.1.5",
-            "source-map": "~0.6.1"
-          }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
       }
     },
     "jsdom": {
@@ -13229,12 +15097,6 @@
         "xml-name-validator": "^3.0.0"
       },
       "dependencies": {
-        "acorn": {
-          "version": "5.7.3",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
-          "integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
-          "dev": true
-        },
         "parse5": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
@@ -13300,12 +15162,12 @@
       "dev": true
     },
     "json5": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.1.tgz",
-      "integrity": "sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+      "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
       "dev": true,
       "requires": {
-        "minimist": "^1.2.0"
+        "minimist": "^1.2.5"
       }
     },
     "jsonfile": {
@@ -13344,9 +15206,9 @@
       "dev": true
     },
     "kind-of": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz",
-      "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
     "kleur": {
@@ -13383,15 +15245,6 @@
         "launch-editor": "^2.2.1"
       }
     },
-    "lcid": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
-      "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==",
-      "dev": true,
-      "requires": {
-        "invert-kv": "^2.0.0"
-      }
-    },
     "left-pad": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
@@ -13405,9 +15258,9 @@
       "dev": true
     },
     "levenary": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.0.tgz",
-      "integrity": "sha512-VHcwhO0UTpUW7rLPN2/OiWJdgA1e9BqEDALhrgCe/F+uUJnep6CoUsTzMeP8Rh0NGr9uKquXxqe7lwLZo509nQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.1.tgz",
+      "integrity": "sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==",
       "dev": true,
       "requires": {
         "leven": "^3.1.0"
@@ -13438,38 +15291,35 @@
       }
     },
     "lint-staged": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-9.5.0.tgz",
-      "integrity": "sha512-nawMob9cb/G1J98nb8v3VC/E8rcX1rryUYXVZ69aT9kde6YWX+uvNOEHY5yf2gcWcTJGiD0kqXmCnS3oD75GIA==",
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.2.tgz",
+      "integrity": "sha512-78kNqNdDeKrnqWsexAmkOU3Z5wi+1CsQmUmfCuYgMTE8E4rAIX8RHW7xgxwAZ+LAayb7Cca4uYX4P3LlevzjVg==",
       "dev": true,
       "requires": {
-        "chalk": "^2.4.2",
-        "commander": "^2.20.0",
-        "cosmiconfig": "^5.2.1",
+        "chalk": "^4.0.0",
+        "commander": "^5.0.0",
+        "cosmiconfig": "^6.0.0",
         "debug": "^4.1.1",
         "dedent": "^0.7.0",
-        "del": "^5.0.0",
-        "execa": "^2.0.3",
-        "listr": "^0.14.3",
+        "execa": "^4.0.0",
+        "listr2": "1.3.8",
         "log-symbols": "^3.0.0",
         "micromatch": "^4.0.2",
         "normalize-path": "^3.0.0",
-        "please-upgrade-node": "^3.1.1",
-        "string-argv": "^0.3.0",
+        "please-upgrade-node": "^3.2.0",
+        "string-argv": "0.3.1",
         "stringify-object": "^3.3.0"
       },
       "dependencies": {
-        "@nodelib/fs.stat": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz",
-          "integrity": "sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==",
-          "dev": true
-        },
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
         },
         "braces": {
           "version": "3.0.2",
@@ -13480,72 +15330,78 @@
             "fill-range": "^7.0.1"
           }
         },
-        "cross-spawn": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
-          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+        "chalk": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
           "dev": true,
           "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
           }
         },
-        "del": {
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "commander": {
           "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/del/-/del-5.1.0.tgz",
-          "integrity": "sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
           "dev": true,
           "requires": {
-            "globby": "^10.0.1",
-            "graceful-fs": "^4.2.2",
-            "is-glob": "^4.0.1",
-            "is-path-cwd": "^2.2.0",
-            "is-path-inside": "^3.0.1",
-            "p-map": "^3.0.0",
-            "rimraf": "^3.0.0",
-            "slash": "^3.0.0"
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
           }
         },
-        "dir-glob": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-          "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+        "cross-spawn": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
+          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
           "dev": true,
           "requires": {
-            "path-type": "^4.0.0"
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
           }
         },
         "execa": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-2.1.0.tgz",
-          "integrity": "sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.1.tgz",
+          "integrity": "sha512-SCjM/zlBdOK8Q5TIjOn6iEHZaPHFsMoTxXQ2nvUvtPnuohz3H2dIozSg+etNR98dGoYUp2ENSKLL/XaMmbxVgw==",
           "dev": true,
           "requires": {
             "cross-spawn": "^7.0.0",
             "get-stream": "^5.0.0",
+            "human-signals": "^1.1.1",
             "is-stream": "^2.0.0",
             "merge-stream": "^2.0.0",
-            "npm-run-path": "^3.0.0",
+            "npm-run-path": "^4.0.0",
             "onetime": "^5.1.0",
-            "p-finally": "^2.0.0",
             "signal-exit": "^3.0.2",
             "strip-final-newline": "^2.0.0"
           }
         },
-        "fast-glob": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
-          "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
-          "dev": true,
-          "requires": {
-            "@nodelib/fs.stat": "^2.0.2",
-            "@nodelib/fs.walk": "^1.2.3",
-            "glob-parent": "^5.1.0",
-            "merge2": "^1.3.0",
-            "micromatch": "^4.0.2"
-          }
-        },
         "fill-range": {
           "version": "7.0.1",
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -13564,49 +15420,28 @@
             "pump": "^3.0.0"
           }
         },
-        "glob-parent": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
         },
-        "globby": {
-          "version": "10.0.2",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
-          "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
+        "import-fresh": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
+          "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
           "dev": true,
           "requires": {
-            "@types/glob": "^7.1.1",
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.0.3",
-            "glob": "^7.1.3",
-            "ignore": "^5.1.1",
-            "merge2": "^1.2.3",
-            "slash": "^3.0.0"
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
           }
         },
-        "ignore": {
-          "version": "5.1.4",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
-          "dev": true
-        },
         "is-number": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
           "dev": true
         },
-        "is-path-inside": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz",
-          "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==",
-          "dev": true
-        },
         "is-stream": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
@@ -13620,6 +15455,58 @@
           "dev": true,
           "requires": {
             "chalk": "^2.4.2"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "3.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^1.9.0"
+              }
+            },
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              }
+            },
+            "color-convert": {
+              "version": "1.9.3",
+              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+              "dev": true,
+              "requires": {
+                "color-name": "1.1.3"
+              }
+            },
+            "color-name": {
+              "version": "1.1.3",
+              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+              "dev": true
+            },
+            "has-flag": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+              "dev": true
+            },
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
           }
         },
         "micromatch": {
@@ -13639,9 +15526,9 @@
           "dev": true
         },
         "npm-run-path": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
-          "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
           "dev": true,
           "requires": {
             "path-key": "^3.0.0"
@@ -13656,19 +15543,16 @@
             "mimic-fn": "^2.1.0"
           }
         },
-        "p-finally": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
-          "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
-          "dev": true
-        },
-        "p-map": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz",
-          "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==",
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
           "dev": true,
           "requires": {
-            "aggregate-error": "^3.0.0"
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
           }
         },
         "path-key": {
@@ -13683,14 +15567,11 @@
           "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
           "dev": true
         },
-        "rimraf": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.0.tgz",
-          "integrity": "sha512-NDGVxTsjqfunkds7CqsOiEnxln4Bo7Nddl3XhS4pXg5OzwkLqJ971ZVAAnB+DDLnF76N+VnDEiBHaVV8I06SUg==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+          "dev": true
         },
         "shebang-command": {
           "version": "2.0.0",
@@ -13707,6 +15588,15 @@
           "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
           "dev": true
         },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -13772,76 +15662,315 @@
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "indent-string": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
+          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
+          "dev": true
+        },
+        "log-symbols": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
+          "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
+          "dev": true,
+          "requires": {
+            "chalk": "^1.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
+    "listr-verbose-renderer": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
+      "integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.4.1",
+        "cli-cursor": "^2.1.0",
+        "date-fns": "^1.27.2",
+        "figures": "^2.0.0"
+      },
+      "dependencies": {
+        "figures": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+          "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+          "dev": true,
+          "requires": {
+            "escape-string-regexp": "^1.0.5"
+          }
+        }
+      }
+    },
+    "listr2": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-1.3.8.tgz",
+      "integrity": "sha512-iRDRVTgSDz44tBeBBg/35TQz4W+EZBWsDUq7hPpqeUHm7yLPNll0rkwW3lIX9cPAK7l+x95mGWLpxjqxftNfZA==",
+      "dev": true,
+      "requires": {
+        "@samverschueren/stream-to-observable": "^0.3.0",
+        "chalk": "^3.0.0",
+        "cli-cursor": "^3.1.0",
+        "cli-truncate": "^2.1.0",
+        "elegant-spinner": "^2.0.0",
+        "enquirer": "^2.3.4",
+        "figures": "^3.2.0",
+        "indent-string": "^4.0.0",
+        "log-update": "^4.0.0",
+        "p-map": "^4.0.0",
+        "pad": "^3.2.0",
+        "rxjs": "^6.3.3",
+        "through": "^2.3.8",
+        "uuid": "^7.0.2"
+      },
+      "dependencies": {
+        "ansi-escapes": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.11.0"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "astral-regex": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+          "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "cli-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
+          "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
+          "dev": true,
+          "requires": {
+            "restore-cursor": "^3.1.0"
+          }
+        },
+        "cli-truncate": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+          "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+          "dev": true,
+          "requires": {
+            "slice-ansi": "^3.0.0",
+            "string-width": "^4.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "elegant-spinner": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-2.0.0.tgz",
+          "integrity": "sha512-5YRYHhvhYzV/FC4AiMdeSIg3jAYGq9xFvbhZMpPlJoBsfYgrw2DSCYeXfat6tYBu45PWiyRr3+flaCPPmviPaA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "figures": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
+          "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
+          "dev": true,
+          "requires": {
+            "escape-string-regexp": "^1.0.5"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "log-update": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz",
+          "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==",
+          "dev": true,
+          "requires": {
+            "ansi-escapes": "^4.3.0",
+            "cli-cursor": "^3.1.0",
+            "slice-ansi": "^4.0.0",
+            "wrap-ansi": "^6.2.0"
+          },
+          "dependencies": {
+            "slice-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+              "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^4.0.0",
+                "astral-regex": "^2.0.0",
+                "is-fullwidth-code-point": "^3.0.0"
+              }
+            }
+          }
+        },
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
           "dev": true
         },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+        "onetime": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
+          "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==",
           "dev": true,
           "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
+            "mimic-fn": "^2.1.0"
           }
         },
-        "indent-string": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
-          "dev": true
+        "p-map": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+          "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+          "dev": true,
+          "requires": {
+            "aggregate-error": "^3.0.0"
+          }
         },
-        "log-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz",
-          "integrity": "sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=",
+        "restore-cursor": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
+          "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
           "dev": true,
           "requires": {
-            "chalk": "^1.0.0"
+            "onetime": "^5.1.0",
+            "signal-exit": "^3.0.2"
           }
         },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+        "slice-ansi": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+          "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
           "dev": true,
           "requires": {
-            "ansi-regex": "^2.0.0"
+            "ansi-styles": "^4.0.0",
+            "astral-regex": "^2.0.0",
+            "is-fullwidth-code-point": "^3.0.0"
+          }
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
           }
         },
         "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
           "dev": true
-        }
-      }
-    },
-    "listr-verbose-renderer": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz",
-      "integrity": "sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.1",
-        "cli-cursor": "^2.1.0",
-        "date-fns": "^1.27.2",
-        "figures": "^2.0.0"
-      },
-      "dependencies": {
-        "figures": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
-          "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+        },
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
+          "dev": true
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
           "dev": true,
           "requires": {
-            "escape-string-regexp": "^1.0.5"
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
           }
         }
       }
@@ -13864,17 +15993,23 @@
           "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
           "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
           "dev": true
+        },
+        "type-fest": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
+          "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+          "dev": true
         }
       }
     },
     "loader-fs-cache": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz",
-      "integrity": "sha512-70IzT/0/L+M20jUlEqZhZyArTU6VKLRTYRDAYN26g4jfzpJqjipLL3/hgYpySqI9PwsVRHHFja0LfEmsx9X2Cw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
+      "integrity": "sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==",
       "dev": true,
       "requires": {
         "find-cache-dir": "^0.1.1",
-        "mkdirp": "0.5.1"
+        "mkdirp": "^0.5.1"
       },
       "dependencies": {
         "find-cache-dir": {
@@ -14158,12 +16293,6 @@
       "integrity": "sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=",
       "dev": true
     },
-    "lodash.unescape": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
-      "integrity": "sha1-vyJJiGzlFM2hEvrpIYzcBlIR/Jw=",
-      "dev": true
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -14224,9 +16353,9 @@
       }
     },
     "loglevel": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.6.tgz",
-      "integrity": "sha512-Sgr5lbboAUBo3eXCSPL4/KoVz3ROKquOjcctxmHIt+vol2DrqTQe3SwkKKuYhEiWB5kYa13YyopJ69deJ1irzQ==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",
+      "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==",
       "dev": true
     },
     "long": {
@@ -14305,9 +16434,9 @@
       }
     },
     "make-error": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz",
-      "integrity": "sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==",
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
     "makeerror": {
@@ -14319,21 +16448,6 @@
         "tmpl": "1.0.x"
       }
     },
-    "mamacro": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/mamacro/-/mamacro-0.0.3.tgz",
-      "integrity": "sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==",
-      "dev": true
-    },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
-    },
     "map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -14395,35 +16509,10 @@
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
-    "mem": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
-      "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==",
-      "dev": true,
-      "requires": {
-        "map-age-cleaner": "^0.1.1",
-        "mimic-fn": "^2.0.0",
-        "p-is-promise": "^2.0.0"
-      },
-      "dependencies": {
-        "mimic-fn": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-          "dev": true
-        },
-        "p-is-promise": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz",
-          "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==",
-          "dev": true
-        }
-      }
-    },
     "memory-fs": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+      "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
       "dev": true,
       "requires": {
         "errno": "^0.1.3",
@@ -14660,9 +16749,9 @@
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
     },
     "mini-css-extract-plugin": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.2.tgz",
-      "integrity": "sha512-a3Y4of27Wz+mqK3qrcd3VhYz6cU0iW5x3Sgvqzbj+XmlrSizmvu8QQMl5oMYJjgHOC4iyt+w7l4umP+dQeW3bw==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
+      "integrity": "sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==",
       "dev": true,
       "requires": {
         "loader-utils": "^1.1.0",
@@ -14742,9 +16831,9 @@
       }
     },
     "minimist": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
     "minipass": {
@@ -14831,20 +16920,12 @@
       }
     },
     "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "dev": true,
       "requires": {
-        "minimist": "0.0.8"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
+        "minimist": "^1.2.5"
       }
     },
     "mkpath": {
@@ -14854,9 +16935,9 @@
       "dev": true
     },
     "mocha": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.2.tgz",
-      "integrity": "sha512-FgDS9Re79yU1xz5d+C4rv1G7QagNGHZ+iXF81hO8zY35YZZcLEsJVfFolfsqKFWunATEvNzMK0r/CwWd/szO9A==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-6.2.3.tgz",
+      "integrity": "sha512-0R/3FvjIGH3eEuG17ccFPk117XL2rWxatr81a57D+r/x2uTYZRbdZ4oVidEUMh2W2TJDa7MdAb12Lm2/qrKajg==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -14872,7 +16953,7 @@
         "js-yaml": "3.13.1",
         "log-symbols": "2.2.0",
         "minimatch": "3.0.4",
-        "mkdirp": "0.5.1",
+        "mkdirp": "0.5.4",
         "ms": "2.1.1",
         "node-environment-flags": "1.0.5",
         "object.assign": "4.1.0",
@@ -14880,8 +16961,8 @@
         "supports-color": "6.0.0",
         "which": "1.3.1",
         "wide-align": "1.1.3",
-        "yargs": "13.3.0",
-        "yargs-parser": "13.1.1",
+        "yargs": "13.3.2",
+        "yargs-parser": "13.1.2",
         "yargs-unparser": "1.6.0"
       },
       "dependencies": {
@@ -14917,6 +16998,16 @@
             "path-is-absolute": "^1.0.0"
           }
         },
+        "mkdirp": {
+          "version": "0.5.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
+          "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
         "ms": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
@@ -14979,9 +17070,9 @@
       "dev": true
     },
     "mute-stream": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
-      "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
     "mz": {
@@ -15002,9 +17093,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.9.tgz",
-      "integrity": "sha512-J2X7aUpdmTlkAuSe9WaQ5DsTZZPW1r/zmEWKsGhbADO6Gm9FMd2ZzJ8NhsmP4OtA9oFhXfxNqPlreHEDOGB4sg==",
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
+      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==",
       "dev": true
     },
     "nanomatch": {
@@ -15107,27 +17198,28 @@
       "dev": true
     },
     "nightwatch": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/nightwatch/-/nightwatch-1.3.2.tgz",
-      "integrity": "sha512-1Lcte2Su/JrzET62va4oVLbSXwZkZaTmxTdjShylio3U+woY6U250iNuQz/bOkL+Qvuw+9Vfp+5T13yT0YfsKg==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/nightwatch/-/nightwatch-1.3.5.tgz",
+      "integrity": "sha512-Wb1oLwIhF/44B4NcpDzjNnXu4YIs51AgfMYHsjUssg+n5qZLqty4Wg3uF7G4jT9g4S5IAEYw1D7/Yt+XFxdQtg==",
       "dev": true,
       "requires": {
         "assertion-error": "^1.1.0",
         "chai-nightwatch": "^0.4.0",
+        "ci-info": "^2.0.0",
         "dotenv": "7.0.0",
-        "ejs": "^2.5.9",
-        "is-ci": "^2.0.0",
+        "ejs": "^2.7.4",
+        "envinfo": "^7.5.1",
         "lodash.clone": "3.0.3",
         "lodash.defaultsdeep": "^4.6.1",
         "lodash.merge": "^4.6.2",
         "minimatch": "3.0.4",
+        "minimist": "^1.2.5",
         "mkpath": "1.0.0",
         "mocha": "^6.2.2",
-        "optimist": "^0.6.1",
-        "ora": "^4.0.2",
+        "ora": "^4.0.3",
         "proxy-agent": "^3.1.1",
-        "request": "^2.88.0",
-        "request-promise": "^4.2.4",
+        "request": "^2.88.2",
+        "request-promise": "^4.2.5",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -15193,15 +17285,6 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
-        "is-ci": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-          "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-          "dev": true,
-          "requires": {
-            "ci-info": "^2.0.0"
-          }
-        },
         "log-symbols": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
@@ -15269,12 +17352,6 @@
           "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
           "dev": true
         },
-        "mute-stream": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-          "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
-          "dev": true
-        },
         "onetime": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz",
@@ -15285,9 +17362,9 @@
           }
         },
         "ora": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/ora/-/ora-4.0.3.tgz",
-          "integrity": "sha512-fnDebVFyz309A73cqCipVL1fBZewq4vwgSHfxh43vVy31mbyoQ8sCH3Oeaog/owYOs/lLlGVPCISQonTneg6Pg==",
+          "version": "4.0.4",
+          "resolved": "https://registry.npmjs.org/ora/-/ora-4.0.4.tgz",
+          "integrity": "sha512-77iGeVU1cIdRhgFzCK8aw1fbtT1B/iZAvWjS+l/o1x0RShMgxHUZaD2yDpWsNCPwXg9z1ZA78Kbdvr8kBmG/Ww==",
           "dev": true,
           "requires": {
             "chalk": "^3.0.0",
@@ -15300,6 +17377,34 @@
             "wcwidth": "^1.0.1"
           }
         },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "~0.7.0",
+            "aws4": "^1.8.0",
+            "caseless": "~0.12.0",
+            "combined-stream": "~1.0.6",
+            "extend": "~3.0.2",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.3.2",
+            "har-validator": "~5.1.3",
+            "http-signature": "~1.2.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.19",
+            "oauth-sign": "~0.9.0",
+            "performance-now": "^2.1.0",
+            "qs": "~6.5.2",
+            "safe-buffer": "^5.1.2",
+            "tough-cookie": "~2.5.0",
+            "tunnel-agent": "^0.6.0",
+            "uuid": "^3.3.2"
+          }
+        },
         "restore-cursor": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
@@ -15318,6 +17423,16 @@
           "requires": {
             "has-flag": "^4.0.0"
           }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "^1.1.28",
+            "punycode": "^2.1.1"
+          }
         }
       }
     },
@@ -15499,23 +17614,26 @@
       "dev": true
     },
     "node-notifier": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.3.tgz",
-      "integrity": "sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-6.0.0.tgz",
+      "integrity": "sha512-SVfQ/wMw+DesunOm5cKqr6yDcvUTDl/yc97ybGHMrteNEY6oekXpNpS3lZwgLlwz0FLgHoiW28ZpmBHUDg37cw==",
       "dev": true,
       "requires": {
         "growly": "^1.3.0",
-        "is-wsl": "^1.1.0",
-        "semver": "^5.5.0",
+        "is-wsl": "^2.1.1",
+        "semver": "^6.3.0",
         "shellwords": "^0.1.1",
-        "which": "^1.3.0"
+        "which": "^1.3.1"
       },
       "dependencies": {
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
+        "is-wsl": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+          "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+          "dev": true,
+          "requires": {
+            "is-docker": "^2.0.0"
+          }
         }
       }
     },
@@ -15529,9 +17647,9 @@
       }
     },
     "node-sass": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
-      "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
       "dev": true,
       "requires": {
         "async-foreach": "^0.1.3",
@@ -15548,7 +17666,7 @@
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
+        "sass-graph": "2.2.5",
         "stdout-stream": "^1.4.0",
         "true-case-path": "^1.0.2"
       },
@@ -15825,10 +17943,35 @@
       "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw=="
     },
     "object-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.2.tgz",
-      "integrity": "sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==",
-      "dev": true
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
+      "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.5",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
+          "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.1.5",
+            "is-regex": "^1.0.5",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimleft": "^2.1.1",
+            "string.prototype.trimright": "^2.1.1"
+          }
+        }
+      }
     },
     "object-keys": {
       "version": "1.1.1",
@@ -15974,24 +18117,6 @@
         "@wry/context": "^0.4.0"
       }
     },
-    "optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "dev": true,
-      "requires": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
-          "dev": true
-        }
-      }
-    },
     "optionator": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -16052,17 +18177,6 @@
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
-    "os-locale": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz",
-      "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==",
-      "dev": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "lcid": "^2.0.0",
-        "mem": "^4.0.0"
-      }
-    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -16084,12 +18198,6 @@
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
       "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ=="
     },
-    "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
-    },
     "p-each-series": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-1.0.0.tgz",
@@ -16099,6 +18207,15 @@
         "p-reduce": "^1.0.0"
       }
     },
+    "p-event": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz",
+      "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==",
+      "dev": true,
+      "requires": {
+        "p-timeout": "^2.0.1"
+      }
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -16245,6 +18362,15 @@
         }
       }
     },
+    "pad": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/pad/-/pad-3.2.0.tgz",
+      "integrity": "sha512-2u0TrjcGbOjBTJpyewEl4hBO3OeX5wWue7eIFPzQTg6wFSvoaHcBTTUY5m+n0hd04gmTCPuY0kCpVIVuw5etwg==",
+      "dev": true,
+      "requires": {
+        "wcwidth": "^1.0.1"
+      }
+    },
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
@@ -16574,6 +18700,60 @@
         "find-up": "^3.0.0"
       }
     },
+    "pkg-up": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz",
+      "integrity": "sha1-yBmscoBZpGHKscOImivjxJoATX8=",
+      "dev": true,
+      "requires": {
+        "find-up": "^2.1.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+          "dev": true,
+          "requires": {
+            "locate-path": "^2.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        }
+      }
+    },
     "please-upgrade-node": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
@@ -16589,10 +18769,19 @@
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
       "dev": true
     },
+    "pnp-webpack-plugin": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
+      "integrity": "sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==",
+      "dev": true,
+      "requires": {
+        "ts-pnp": "^1.1.6"
+      }
+    },
     "popper.js": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz",
-      "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw=="
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
     },
     "portal-vue": {
       "version": "2.1.7",
@@ -16600,9 +18789,9 @@
       "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
     },
     "portfinder": {
-      "version": "1.0.25",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
-      "integrity": "sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==",
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
+      "integrity": "sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==",
       "dev": true,
       "requires": {
         "async": "^2.6.2",
@@ -16634,9 +18823,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.26",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.26.tgz",
-      "integrity": "sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==",
+      "version": "7.0.29",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.29.tgz",
+      "integrity": "sha512-ba0ApvR3LxGvRMMiUa9n0WR4HjzcYm7tS+ht4/2Nd0NLtHpPIH77fuB9Xh1/yJVz9O/E/95Y/dn8ygWsyffXtw==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -16662,15 +18851,14 @@
       }
     },
     "postcss-calc": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
-      "integrity": "sha512-oXqx0m6tb4N3JGdmeMSc/i91KppbYsFZKdH0xMOqK8V1rJlzrKlTdokz8ozUXLVejydRN6u2IddxpcijRj2FqQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.2.tgz",
+      "integrity": "sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==",
       "dev": true,
       "requires": {
-        "css-unit-converter": "^1.1.1",
-        "postcss": "^7.0.5",
-        "postcss-selector-parser": "^5.0.0-rc.4",
-        "postcss-value-parser": "^3.3.1"
+        "postcss": "^7.0.27",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.0.2"
       }
     },
     "postcss-colormin": {
@@ -16684,6 +18872,14 @@
         "has": "^1.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-convert-values": {
@@ -16694,6 +18890,14 @@
       "requires": {
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-discard-comments": {
@@ -16777,6 +18981,14 @@
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0",
         "stylehacks": "^4.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-merge-rules": {
@@ -16793,13 +19005,28 @@
         "vendors": "^1.0.0"
       },
       "dependencies": {
+        "dot-prop": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
+          "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
+          "dev": true,
+          "requires": {
+            "is-obj": "^2.0.0"
+          }
+        },
+        "is-obj": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+          "dev": true
+        },
         "postcss-selector-parser": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
-          "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
           "dev": true,
           "requires": {
-            "dot-prop": "^4.1.1",
+            "dot-prop": "^5.2.0",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
@@ -16814,6 +19041,14 @@
       "requires": {
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-minify-gradients": {
@@ -16826,6 +19061,14 @@
         "is-color-stop": "^1.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-minify-params": {
@@ -16840,6 +19083,14 @@
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0",
         "uniqs": "^2.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-minify-selectors": {
@@ -16854,13 +19105,28 @@
         "postcss-selector-parser": "^3.0.0"
       },
       "dependencies": {
+        "dot-prop": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
+          "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
+          "dev": true,
+          "requires": {
+            "is-obj": "^2.0.0"
+          }
+        },
+        "is-obj": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+          "dev": true
+        },
         "postcss-selector-parser": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
-          "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
           "dev": true,
           "requires": {
-            "dot-prop": "^4.1.1",
+            "dot-prop": "^5.2.0",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
@@ -16886,60 +19152,16 @@
         "postcss": "^7.0.16",
         "postcss-selector-parser": "^6.0.2",
         "postcss-value-parser": "^4.0.0"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-          "dev": true
-        },
-        "postcss-selector-parser": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
-          "dev": true,
-          "requires": {
-            "cssesc": "^3.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        },
-        "postcss-value-parser": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
-          "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==",
-          "dev": true
-        }
       }
     },
     "postcss-modules-scope": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.1.1.tgz",
-      "integrity": "sha512-OXRUPecnHCg8b9xWvldG/jUpRIGPNRka0r4D4j0ESUU2/5IOnpsjfPPmDprM3Ih8CgZ8FXjWqaniK5v4rWt3oQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz",
+      "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.6",
         "postcss-selector-parser": "^6.0.0"
-      },
-      "dependencies": {
-        "cssesc": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-          "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-          "dev": true
-        },
-        "postcss-selector-parser": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
-          "dev": true,
-          "requires": {
-            "cssesc": "^3.0.0",
-            "indexes-of": "^1.0.1",
-            "uniq": "^1.0.1"
-          }
-        }
       }
     },
     "postcss-modules-values": {
@@ -16970,6 +19192,14 @@
         "cssnano-util-get-match": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-normalize-positions": {
@@ -16982,6 +19212,14 @@
         "has": "^1.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-normalize-repeat-style": {
@@ -16994,6 +19232,14 @@
         "cssnano-util-get-match": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-normalize-string": {
@@ -17005,6 +19251,14 @@
         "has": "^1.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-normalize-timing-functions": {
@@ -17016,6 +19270,14 @@
         "cssnano-util-get-match": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-normalize-unicode": {
@@ -17027,6 +19289,14 @@
         "browserslist": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-normalize-url": {
@@ -17046,6 +19316,12 @@
           "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
           "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
           "dev": true
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
         }
       }
     },
@@ -17057,6 +19333,14 @@
       "requires": {
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-ordered-values": {
@@ -17068,6 +19352,14 @@
         "cssnano-util-get-arguments": "^4.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-reduce-initial": {
@@ -17092,15 +19384,23 @@
         "has": "^1.0.0",
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-selector-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
-      "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
       "dev": true,
       "requires": {
-        "cssesc": "^2.0.0",
+        "cssesc": "^3.0.0",
         "indexes-of": "^1.0.1",
         "uniq": "^1.0.1"
       }
@@ -17115,6 +19415,14 @@
         "postcss": "^7.0.0",
         "postcss-value-parser": "^3.0.0",
         "svgo": "^1.0.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
       }
     },
     "postcss-unique-selectors": {
@@ -17129,9 +19437,9 @@
       }
     },
     "postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
     "prelude-ls": {
@@ -17149,7 +19457,8 @@
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
       "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "pretty": {
       "version": "2.0.0",
@@ -17184,21 +19493,54 @@
       }
     },
     "pretty-format": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
-      "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
+      "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
       "dev": true,
       "requires": {
-        "@jest/types": "^24.9.0",
-        "ansi-regex": "^4.0.0",
-        "ansi-styles": "^3.2.0",
-        "react-is": "^16.8.4"
+        "@jest/types": "^25.5.0",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^16.12.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
       }
     },
     "prismjs": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.19.0.tgz",
-      "integrity": "sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
+      "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==",
       "dev": true,
       "requires": {
         "clipboard": "^2.0.0"
@@ -17243,13 +19585,13 @@
       "dev": true
     },
     "prompts": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.0.tgz",
-      "integrity": "sha512-NfbbPPg/74fT7wk2XYQ7hAIp9zJyZp5Fu19iRbORqqy1BhtrkZ0fPafBU+7bmn8ie69DpT0R6QpJIN2oisYjJg==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz",
+      "integrity": "sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==",
       "dev": true,
       "requires": {
         "kleur": "^3.0.3",
-        "sisteransi": "^1.0.3"
+        "sisteransi": "^1.0.4"
       }
     },
     "proto-list": {
@@ -17293,9 +19635,9 @@
       }
     },
     "proxy-from-env": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
-      "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "dev": true
     },
     "prr": {
@@ -17489,21 +19831,46 @@
         "strip-json-comments": "~2.0.1"
       }
     },
-    "react-is": {
-      "version": "16.12.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
-      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
-      "dev": true
-    },
-    "read-pkg": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-      "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "requires": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1",
+            "lines-and-columns": "^1.1.6"
+          }
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
+      "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
       "dev": true,
       "requires": {
-        "load-json-file": "^4.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^3.0.0"
+        "find-up": "^3.0.0",
+        "read-pkg": "^3.0.0"
       },
       "dependencies": {
         "load-json-file": {
@@ -17517,19 +19884,20 @@
             "pify": "^3.0.0",
             "strip-bom": "^3.0.0"
           }
+        },
+        "read-pkg": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
+          "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
+          "dev": true,
+          "requires": {
+            "load-json-file": "^4.0.0",
+            "normalize-package-data": "^2.3.2",
+            "path-type": "^3.0.0"
+          }
         }
       }
     },
-    "read-pkg-up": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
-      "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
-      "dev": true,
-      "requires": {
-        "find-up": "^3.0.0",
-        "read-pkg": "^3.0.0"
-      }
-    },
     "readable-stream": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
@@ -17565,12 +19933,12 @@
       }
     },
     "recast": {
-      "version": "0.18.5",
-      "resolved": "https://registry.npmjs.org/recast/-/recast-0.18.5.tgz",
-      "integrity": "sha512-sD1WJrpLQAkXGyQZyGzTM75WJvyAd98II5CHdK3IYbt/cZlU0UzCRVU11nUFNXX9fBVEt4E9ajkMjBlUlG+Oog==",
+      "version": "0.18.10",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.18.10.tgz",
+      "integrity": "sha512-XNvYvkfdAN9QewbrxeTOjgINkdY/odTgTS56ZNEWL9Ml0weT4T3sFtvnTuF+Gxyu46ANcRm1ntrF6F5LAJPAaQ==",
       "dev": true,
       "requires": {
-        "ast-types": "0.13.2",
+        "ast-types": "0.13.3",
         "esprima": "~4.0.0",
         "private": "^0.1.8",
         "source-map": "~0.6.1"
@@ -17639,26 +20007,27 @@
       "dev": true
     },
     "regenerate-unicode-properties": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz",
-      "integrity": "sha512-LGZzkgtLY79GeXLm8Dp0BVLdQlWICzBnJz/ipWUgo59qBaZ+BHtq51P2q1uVZlppMuUAT37SDk39qUbjTWB7bA==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
       "dev": true,
       "requires": {
         "regenerate": "^1.4.0"
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.2",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
     },
     "regenerator-transform": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.1.tgz",
-      "integrity": "sha512-flVuee02C3FKRISbxhXl9mGzdbWUVHubl1SMaknjxkFB1/iqpJhArQUvRxOOPEc/9tAiX0BaQ28FJH10E4isSQ==",
+      "version": "0.14.4",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.4.tgz",
+      "integrity": "sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==",
       "dev": true,
       "requires": {
-        "private": "^0.1.6"
+        "@babel/runtime": "^7.8.4",
+        "private": "^0.1.8"
       }
     },
     "regex-not": {
@@ -17682,23 +20051,23 @@
       }
     },
     "regexpp": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-      "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
+      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
       "dev": true
     },
     "regexpu-core": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.6.0.tgz",
-      "integrity": "sha512-YlVaefl8P5BnFYOITTNzDvan1ulLOiXJzCNZxduTIosN17b87h3bvG9yHMoHaRuo88H4mQ06Aodj5VtYGGGiTg==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
+      "integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
       "dev": true,
       "requires": {
         "regenerate": "^1.4.0",
-        "regenerate-unicode-properties": "^8.1.0",
-        "regjsgen": "^0.5.0",
-        "regjsparser": "^0.6.0",
+        "regenerate-unicode-properties": "^8.2.0",
+        "regjsgen": "^0.5.1",
+        "regjsparser": "^0.6.4",
         "unicode-match-property-ecmascript": "^1.0.4",
-        "unicode-match-property-value-ecmascript": "^1.1.0"
+        "unicode-match-property-value-ecmascript": "^1.2.0"
       }
     },
     "registry-auth-token": {
@@ -17727,9 +20096,9 @@
       "dev": true
     },
     "regjsparser": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.2.tgz",
-      "integrity": "sha512-E9ghzUtoLwDekPT0DYCp+c4h+bvuUpe6rRHCTYn6eGoqj1LgKXxT6I0Il4WbjhQkOghzi/V+y03bPKvbllL93Q==",
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
+      "integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
       "dev": true,
       "requires": {
         "jsesc": "~0.5.0"
@@ -17944,12 +20313,6 @@
       "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=",
       "dev": true
     },
-    "reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
-    },
     "rgb-regex": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
@@ -17981,9 +20344,9 @@
       }
     },
     "rss-parser": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.7.3.tgz",
-      "integrity": "sha512-Ys+fC5wHqWkfR+jNEL7QvC0crUCAcygxHel3ab9QQzHjmH7fNz379lrp984CuCPUf3WzxHEa73lL86W7yc9qjQ==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.8.0.tgz",
+      "integrity": "sha512-EvjM0r3IymXnk+SCUawLhdH36D2WQCwpEfIyvu4hpPswYuMSk/jlCLOcg24OvXwVdcJcEocAlTZVjGNjOOSJXg==",
       "dev": true,
       "requires": {
         "entities": "^1.1.1",
@@ -18005,18 +20368,9 @@
       "dev": true
     },
     "run-async": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
-      "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
-      "dev": true,
-      "requires": {
-        "is-promise": "^2.1.0"
-      }
-    },
-    "run-parallel": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
-      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
       "dev": true
     },
     "run-queue": {
@@ -18029,9 +20383,9 @@
       }
     },
     "rxjs": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz",
-      "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==",
+      "version": "6.5.5",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.5.tgz",
+      "integrity": "sha512-WfQI+1gohdf0Dai/Bbmk5L5ItH5tYqm3ki2c5GdWhKjalzjg93N3avFjVStyZZz+A2Em+ZxKH5bNghw9UeylGQ==",
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
@@ -18074,9 +20428,9 @@
       },
       "dependencies": {
         "@cnakazawa/watch": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.3.tgz",
-          "integrity": "sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA==",
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
+          "integrity": "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==",
           "dev": true,
           "requires": {
             "exec-sh": "^0.3.2",
@@ -18092,243 +20446,69 @@
       }
     },
     "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
         "lodash": "^4.0.0",
         "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "yargs": "^13.3.2"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
-        },
         "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
-          "dev": true
-        },
-        "cliui": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
-          "dev": true,
-          "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wrap-ansi": "^2.0.0"
-          }
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "dev": true,
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "get-caller-file": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
-          "dev": true
-        },
-        "invert-kv": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-          "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "lcid": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-          "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-          "dev": true,
-          "requires": {
-            "invert-kv": "^1.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0",
-            "strip-bom": "^2.0.0"
-          }
-        },
-        "os-locale": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-          "dev": true,
-          "requires": {
-            "lcid": "^1.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "dev": true,
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-          "dev": true,
-          "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-          "dev": true,
-          "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
-          }
-        },
-        "require-main-filename": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
           "dev": true
         },
         "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
           "dev": true,
           "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
           }
         },
         "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "dev": true,
-          "requires": {
-            "is-utf8": "^0.2.0"
-          }
-        },
-        "which-module": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
-          "dev": true
-        },
-        "wrap-ansi": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-          "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
           "dev": true,
           "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1"
+            "ansi-regex": "^4.1.0"
           }
         },
-        "y18n": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
-          "dev": true
-        },
         "yargs": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
           "dev": true,
           "requires": {
-            "camelcase": "^3.0.0",
-            "cliui": "^3.2.0",
-            "decamelize": "^1.1.1",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^1.4.0",
-            "read-pkg-up": "^1.0.1",
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
+            "require-main-filename": "^2.0.0",
             "set-blocking": "^2.0.0",
-            "string-width": "^1.0.2",
-            "which-module": "^1.0.0",
-            "y18n": "^3.2.1",
-            "yargs-parser": "^5.0.0"
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
           }
         },
         "yargs-parser": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "dev": true,
           "requires": {
-            "camelcase": "^3.0.0"
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
           }
         }
       }
@@ -18724,9 +20904,9 @@
       }
     },
     "sisteransi": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.4.tgz",
-      "integrity": "sha512-/ekMoM4NJ59ivGSfKapeG+FWtrmWvA1p6FBZwXrqojw90vJu8lBmrTxCMuBCydKtkaUe2zt4PlxeTKpjwMbyig==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "dev": true
     },
     "slash": {
@@ -18873,13 +21053,22 @@
       }
     },
     "sockjs": {
-      "version": "0.3.19",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
-      "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
+      "integrity": "sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==",
       "dev": true,
       "requires": {
         "faye-websocket": "^0.10.0",
-        "uuid": "^3.0.1"
+        "uuid": "^3.4.0",
+        "websocket-driver": "0.6.5"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "sockjs-client": {
@@ -18969,6 +21158,26 @@
         "is-plain-obj": "^1.0.0"
       }
     },
+    "sort-keys-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sort-keys-length/-/sort-keys-length-1.0.1.tgz",
+      "integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
+      "dev": true,
+      "requires": {
+        "sort-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "sort-keys": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+          "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+          "dev": true,
+          "requires": {
+            "is-plain-obj": "^1.0.0"
+          }
+        }
+      }
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -19051,9 +21260,9 @@
       "dev": true
     },
     "spdy": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.1.tgz",
-      "integrity": "sha512-HeZS3PBdMA+sZSu0qwpCxl3DeALD5ASx8pAX0jZdKXSpPWbQ6SYGnlg3BBmYLx5LtiZrmkAZfErCm2oECBcioA==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
       "dev": true,
       "requires": {
         "debug": "^4.1.0",
@@ -19078,9 +21287,9 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
-          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.3",
@@ -19439,13 +21648,28 @@
         "postcss-selector-parser": "^3.0.0"
       },
       "dependencies": {
+        "dot-prop": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.2.0.tgz",
+          "integrity": "sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==",
+          "dev": true,
+          "requires": {
+            "is-obj": "^2.0.0"
+          }
+        },
+        "is-obj": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+          "dev": true
+        },
         "postcss-selector-parser": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
-          "integrity": "sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=",
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
           "dev": true,
           "requires": {
-            "dot-prop": "^4.1.1",
+            "dot-prop": "^5.2.0",
             "indexes-of": "^1.0.1",
             "uniq": "^1.0.1"
           }
@@ -19675,9 +21899,9 @@
       },
       "dependencies": {
         "cross-spawn": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
-          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
+          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -19873,9 +22097,9 @@
       }
     },
     "terser": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.2.tgz",
-      "integrity": "sha512-6FUjJdY2i3WZAtYBtnV06OOcOfzl+4hSKYE9wgac8rkLRBToPDDrBB2AcHwQD/OKDxbnvhVy2YgOPWO2SsKWqg==",
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.13.tgz",
+      "integrity": "sha512-wMvqukYgVpQlymbnNbabVZbtM6PN63AzqexpwJL8tbh/mRT9LE5o+ruVduAGL7D6Fpjl+Q+06U5I9Ul82odAhw==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
@@ -20219,9 +22443,9 @@
       }
     },
     "ts-jest": {
-      "version": "24.3.0",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-24.3.0.tgz",
-      "integrity": "sha512-Hb94C/+QRIgjVZlJyiWwouYUF+siNJHJHknyspaOcZ+OQAIdFG/UrdQVXw/0B8Z3No34xkUXZJpOTy9alOWdVQ==",
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-25.5.0.tgz",
+      "integrity": "sha512-govrjbOk1UEzcJ5cX5k8X8IUtFuP3lp3mrF3ZuKtCdAOQzdeCM7qualhb/U8s8SWFwEDutOqfF5PLkJ+oaYD4w==",
       "dev": true,
       "requires": {
         "bs-logger": "0.x",
@@ -20230,33 +22454,77 @@
         "json5": "2.x",
         "lodash.memoize": "4.x",
         "make-error": "1.x",
+        "micromatch": "4.x",
         "mkdirp": "0.x",
-        "resolve": "1.x",
-        "semver": "^5.5",
-        "yargs-parser": "10.x"
+        "semver": "6.x",
+        "yargs-parser": "18.x"
       },
       "dependencies": {
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "dev": true
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
           "dev": true
         },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        },
         "yargs-parser": {
-          "version": "10.1.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-10.1.0.tgz",
-          "integrity": "sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==",
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
           "dev": true,
           "requires": {
-            "camelcase": "^4.1.0"
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
           }
         }
       }
     },
     "ts-loader": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.1.tgz",
-      "integrity": "sha512-Dd9FekWuABGgjE1g0TlQJ+4dFUfYGbYcs52/HQObE0ZmUNjQlmLAS7xXsSzy23AMaMwipsx5sNHvoEpT2CZq1g==",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-6.2.2.tgz",
+      "integrity": "sha512-HDo5kXZCBml3EUPcc7RlZOV/JGlLHwppTLEHb3SHnr5V7NXD4klMEkrhJe5wgRbaWsSXi+Y1SIBN/K9B6zWGWQ==",
       "dev": true,
       "requires": {
         "chalk": "^2.3.0",
@@ -20312,18 +22580,42 @@
       }
     },
     "ts-node": {
-      "version": "8.6.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.6.1.tgz",
-      "integrity": "sha512-KqPbO7/UuOPE4ANAOV9geZjk6tet6rK2K+DFeEJq6kIXUi0nLkrOMksozGkIlFopOorkStlwar3DdWYrdl7zCw==",
+      "version": "8.10.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.1.tgz",
+      "integrity": "sha512-bdNz1L4ekHiJul6SHtZWs1ujEKERJnHs4HxN7rjTyyVOFf3HaJ6sLqe6aPG62XTzAB/63pKRh5jTSWL0D7bsvw==",
       "dev": true,
       "requires": {
         "arg": "^4.1.0",
         "diff": "^4.0.1",
         "make-error": "^1.1.1",
-        "source-map-support": "^0.5.6",
-        "yn": "^4.0.0"
+        "source-map-support": "^0.5.17",
+        "yn": "3.1.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "^1.0.0",
+            "source-map": "^0.6.0"
+          }
+        }
       }
     },
+    "ts-pnp": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
+      "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
+      "dev": true
+    },
     "tsconfig": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-7.0.0.tgz",
@@ -20337,9 +22629,9 @@
       }
     },
     "tslib": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.2.tgz",
+      "integrity": "sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg=="
     },
     "tslint": {
       "version": "5.20.1",
@@ -20422,9 +22714,9 @@
       "dev": true
     },
     "type-fest": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
-      "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
       "dev": true
     },
     "type-is": {
@@ -20444,9 +22736,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.4.tgz",
-      "integrity": "sha512-A25xv5XCtarLwXpcDNZzCGvW2D1S3/bACratYBx2sax8PefsFhlYmkQicKHvpYflFS8if4zne5zT5kpJ7pzuvw==",
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
       "dev": true
     },
     "uc.micro": {
@@ -20455,29 +22747,33 @@
       "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
     },
     "uglify-js": {
-      "version": "3.7.5",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.7.5.tgz",
-      "integrity": "sha512-GFZ3EXRptKGvb/C1Sq6nO1iI7AGcjyqmIyOw0DrD0675e+NNbGO72xmMM2iEBdFbxaTLo70NbjM/Wy54uZIlsg==",
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
+      "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
       "dev": true,
-      "optional": true,
       "requires": {
-        "commander": "~2.20.3",
+        "commander": "~2.19.0",
         "source-map": "~0.6.1"
       },
       "dependencies": {
+        "commander": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
+          "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
     "unbzip2-stream": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz",
-      "integrity": "sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.2.tgz",
+      "integrity": "sha512-pZMVAofMrrHX6Ik39hCk470kulCbmZ2SWfQLPmTWqfJV/oUm0gn1CblvHdUu4+54Je6Jq34x8kY6XjTy6dMkOg==",
       "dev": true,
       "requires": {
         "buffer": "^5.2.1",
@@ -20485,9 +22781,9 @@
       }
     },
     "undefsafe": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz",
-      "integrity": "sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY=",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
+      "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==",
       "dev": true,
       "requires": {
         "debug": "^2.2.0"
@@ -20521,15 +22817,15 @@
       }
     },
     "unicode-match-property-value-ecmascript": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz",
-      "integrity": "sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
       "dev": true
     },
     "unicode-property-aliases-ecmascript": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz",
-      "integrity": "sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
       "dev": true
     },
     "union-value": {
@@ -20748,9 +23044,9 @@
       },
       "dependencies": {
         "mime": {
-          "version": "2.4.4",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
-          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
+          "version": "2.4.5",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.5.tgz",
+          "integrity": "sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==",
           "dev": true
         }
       }
@@ -20858,9 +23154,9 @@
       "dev": true
     },
     "vendors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.3.tgz",
-      "integrity": "sha512-fOi47nsJP5Wqefa43kyWSg80qF+Q3XA6MUkgi7Hp1HQaKDQW4cQrK2D0P7mmbFtsV1N89am55Yru/nyEwRubcw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
+      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
       "dev": true
     },
     "verror": {
@@ -20924,9 +23220,9 @@
       "integrity": "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
     },
     "vue-class-component": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.2.tgz",
-      "integrity": "sha512-QjVfjRffux0rUBNtxr1hvUxDrfifDvk9q/OSdB/sKIlfxAudDF2E1YTeiEC+qOYIOOBGWkgSKQSnast6H+S38w=="
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.3.tgz",
+      "integrity": "sha512-oEqYpXKaFN+TaXU+mRLEx8dX0ah85aAJEe61mpdoUrq0Bhe/6sWhyZX1JjMQLhVsHAkncyhedhmCdDVSasUtDw=="
     },
     "vue-cli-plugin-apollo": {
       "version": "0.21.3",
@@ -20964,9 +23260,9 @@
       },
       "dependencies": {
         "cross-spawn": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.1.tgz",
-          "integrity": "sha512-u7v4o84SwFpD32Z8IIcPZ6z1/ie24O6RU3RbtL5Y316l3KuHVPx9ItBgWQ6VlfAFnRnTtMUrsQ9MUUTuEZjogg==",
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
+          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -20974,12 +23270,6 @@
             "which": "^2.0.1"
           }
         },
-        "deepmerge": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-          "dev": true
-        },
         "execa": {
           "version": "3.4.0",
           "resolved": "https://registry.npmjs.org/execa/-/execa-3.4.0.tgz",
@@ -21095,9 +23385,9 @@
       }
     },
     "vue-context": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vue-context/-/vue-context-5.0.0.tgz",
-      "integrity": "sha512-clXrOGmFguQp5F5ri8lqCBZTvBhizwLYEkbY2sreUdCpmP5Z/yUfx/W/x9K4Kh5q0pRQ+TDZlGJCLutFuihxcA==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vue-context/-/vue-context-5.1.0.tgz",
+      "integrity": "sha512-PcKbc9mjiUt4fswRR/oA/IJc5oXHjpnKIcATWZcBTDk7CzTvLznkIjq6pGFI8vUtGzABxVMvPq93dpBSRfinxg==",
       "requires": {
         "vue-clickaway": "^2.2.2"
       }
@@ -21163,9 +23453,9 @@
       }
     },
     "vue-js-modal": {
-      "version": "1.3.31",
-      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-1.3.31.tgz",
-      "integrity": "sha512-gwt2904sWbMUuUcHwKQ510IEs4G7S3bqVWLYeTOc2eEyWMmmnT9UmojDsXIexFnPVM7cZTua37z3Jm/h0i0y8Q=="
+      "version": "1.3.35",
+      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-1.3.35.tgz",
+      "integrity": "sha512-DKtxUCW/oprM/ndn9h/cnVgsmqjQ/ARy5rH4q/11Pas04og2td+sltl91H/rlwXTwJIqWyt+lJizK5o4ErjWIQ=="
     },
     "vue-jscodeshift-adapter": {
       "version": "2.0.3",
@@ -21181,9 +23471,9 @@
       }
     },
     "vue-loader": {
-      "version": "15.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.8.3.tgz",
-      "integrity": "sha512-yFksTFbhp+lxlm92DrKdpVIWMpranXnTEuGSc0oW+Gk43M9LWaAmBTnfj5+FCdve715mTHvo78IdaXf5TbiTJg==",
+      "version": "15.9.2",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.2.tgz",
+      "integrity": "sha512-oXBubaY//CYEISBlHX+c2YPJbmOH68xXPXjFv4MAgPqQvUsnjrBAjCJi8HXZ/r/yfn0tPL5VZj1Zcp8mJPI8VA==",
       "dev": true,
       "requires": {
         "@vue/component-compiler-utils": "^3.1.0",
@@ -21191,6 +23481,14 @@
         "loader-utils": "^1.1.0",
         "vue-hot-reload-api": "^2.3.0",
         "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+          "dev": true
+        }
       }
     },
     "vue-perfect-scrollbar": {
@@ -21199,9 +23497,9 @@
       "integrity": "sha512-45rOonNrZaKX0mu0N9v422+c3Ngm8iTnVAP0N2iUwPfWZJds4S6eRGdmiNbrVFqmUc8IfRNI0Dpa3Zk8ntjaZQ=="
     },
     "vue-property-decorator": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.3.0.tgz",
-      "integrity": "sha512-77YtTbZHd5CNiPzbqv51kEgL48yvD2dUDfF28vEyw3MbQ9bBAb/tDyFzskcqjNRbWyXk1vq4oM2CK/LfhxuIBg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.4.2.tgz",
+      "integrity": "sha512-IqbARlvgPE2pzKfbecKxsu2yEH0Wv7hfHR6m4eZA3LTnNw9hveAX77vDfLFyTeMISS5N7Kucp/xRSHjcQ6bAfQ==",
       "requires": {
         "vue-class-component": "^7.1.0"
       }
@@ -21239,6 +23537,14 @@
       "requires": {
         "hash-sum": "^1.0.2",
         "loader-utils": "^1.0.2"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
+          "dev": true
+        }
       }
     },
     "vue-template-compiler": {
@@ -21263,26 +23569,26 @@
       "integrity": "sha512-Pq72X10Yl5QyQPcX4hR8KdhA2o+qpqzOdwkoIHUnAJfXWLODBKJhUPAnWvKvBcgst0HuHASLDrcFBSQz98gd9g=="
     },
     "vuex": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
-      "integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.3.0.tgz",
+      "integrity": "sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q=="
     },
     "vuex-class-component": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/vuex-class-component/-/vuex-class-component-2.2.1.tgz",
-      "integrity": "sha512-ViHL2BVWPoqmPdZbzqQV/6Txa28nLNf9j9W9w4y7bTDh/noR2TPxPppRYC9FmZBmi+Q0OwJaSy2Ue23fi6/iCg==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/vuex-class-component/-/vuex-class-component-2.3.2.tgz",
+      "integrity": "sha512-Xai4E4oQavo9QpWMeuU9n/HBG+IxTc9Do7E9Lae3KOoWhYAPA2H/lb1201t1ALg2hvJpro4sfntrVFGrQMQ0bA==",
       "requires": {
         "object.getownpropertydescriptors": "^2.0.3",
         "rimraf": "^2.6.3"
       }
     },
     "w3c-hr-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz",
-      "integrity": "sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
       "dev": true,
       "requires": {
-        "browser-process-hrtime": "^0.1.2"
+        "browser-process-hrtime": "^1.0.0"
       }
     },
     "w3c-xmlserializer": {
@@ -21316,12 +23622,12 @@
       }
     },
     "watchpack": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
-      "integrity": "sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
+      "integrity": "sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==",
       "dev": true,
       "requires": {
-        "chokidar": "^2.0.2",
+        "chokidar": "^2.1.8",
         "graceful-fs": "^4.1.2",
         "neo-async": "^2.5.0"
       }
@@ -21351,16 +23657,16 @@
       "dev": true
     },
     "webpack": {
-      "version": "4.41.5",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.41.5.tgz",
-      "integrity": "sha512-wp0Co4vpyumnp3KlkmpM5LWuzvZYayDwM2n17EHFr4qxBBbRokC7DJawPJC7TfSFZ9HZ6GsdH40EBj4UV0nmpw==",
+      "version": "4.43.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.43.0.tgz",
+      "integrity": "sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==",
       "dev": true,
       "requires": {
-        "@webassemblyjs/ast": "1.8.5",
-        "@webassemblyjs/helper-module-context": "1.8.5",
-        "@webassemblyjs/wasm-edit": "1.8.5",
-        "@webassemblyjs/wasm-parser": "1.8.5",
-        "acorn": "^6.2.1",
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/wasm-edit": "1.9.0",
+        "@webassemblyjs/wasm-parser": "1.9.0",
+        "acorn": "^6.4.1",
         "ajv": "^6.10.2",
         "ajv-keywords": "^3.4.1",
         "chrome-trace-event": "^1.0.2",
@@ -21371,16 +23677,32 @@
         "loader-utils": "^1.2.3",
         "memory-fs": "^0.4.1",
         "micromatch": "^3.1.10",
-        "mkdirp": "^0.5.1",
+        "mkdirp": "^0.5.3",
         "neo-async": "^2.6.1",
         "node-libs-browser": "^2.2.1",
         "schema-utils": "^1.0.0",
         "tapable": "^1.1.3",
         "terser-webpack-plugin": "^1.4.3",
-        "watchpack": "^1.6.0",
+        "watchpack": "^1.6.1",
         "webpack-sources": "^1.4.1"
       },
       "dependencies": {
+        "acorn": {
+          "version": "6.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
+          "dev": true
+        },
+        "memory-fs": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+          "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        },
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -21395,13 +23717,13 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.6.0.tgz",
-      "integrity": "sha512-orUfvVYEfBMDXgEKAKVvab5iQ2wXneIEorGNsyuOyVYpjYrI7CUOhhXNDd3huMwQ3vNNWWlGP+hzflMFYNzi2g==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.7.0.tgz",
+      "integrity": "sha512-mETdjZ30a3Yf+NTB/wqTgACK7rAYQl5uxKK0WVTNmF0sM3Uv8s3R58YZMW7Rhu0Lk2Rmuhdj5dcH5Q76zCDVdA==",
       "dev": true,
       "requires": {
-        "acorn": "^6.0.7",
-        "acorn-walk": "^6.1.1",
+        "acorn": "^7.1.1",
+        "acorn-walk": "^7.1.1",
         "bfj": "^6.1.1",
         "chalk": "^2.4.1",
         "commander": "^2.18.0",
@@ -21413,12 +23735,26 @@
         "mkdirp": "^0.5.1",
         "opener": "^1.5.1",
         "ws": "^6.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
+          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.1.1.tgz",
+          "integrity": "sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==",
+          "dev": true
+        }
       }
     },
     "webpack-chain": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/webpack-chain/-/webpack-chain-6.3.0.tgz",
-      "integrity": "sha512-Kri8p/JrfcQtBRghyxKN8r9E1mbxzywQPAnQbyvXN+rtSa8au1Qb7JOoyAGfEBFkOvU3XH4JeGd57CHa0QXfMQ==",
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/webpack-chain/-/webpack-chain-6.4.0.tgz",
+      "integrity": "sha512-f97PYqxU+9/u0IUqp/ekAHRhBD1IQwhBv3wlJo2nvyELpr2vNnUqO3XQEk+qneg0uWGP54iciotszpjfnEExFA==",
       "dev": true,
       "requires": {
         "deepmerge": "^1.5.2",
@@ -21452,18 +23788,28 @@
         "webpack-log": "^2.0.0"
       },
       "dependencies": {
+        "memory-fs": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+          "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        },
         "mime": {
-          "version": "2.4.4",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz",
-          "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==",
+          "version": "2.4.5",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.5.tgz",
+          "integrity": "sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==",
           "dev": true
         }
       }
     },
     "webpack-dev-server": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.1.tgz",
-      "integrity": "sha512-AGG4+XrrXn4rbZUueyNrQgO4KGnol+0wm3MPdqGLmmA+NofZl3blZQKxZ9BND6RDNuvAK9OMYClhjOSnxpWRoA==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz",
+      "integrity": "sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==",
       "dev": true,
       "requires": {
         "ansi-html": "0.0.7",
@@ -21474,31 +23820,31 @@
         "debug": "^4.1.1",
         "del": "^4.1.1",
         "express": "^4.17.1",
-        "html-entities": "^1.2.1",
+        "html-entities": "^1.3.1",
         "http-proxy-middleware": "0.19.1",
         "import-local": "^2.0.0",
         "internal-ip": "^4.3.0",
         "ip": "^1.1.5",
         "is-absolute-url": "^3.0.3",
         "killable": "^1.0.1",
-        "loglevel": "^1.6.6",
+        "loglevel": "^1.6.8",
         "opn": "^5.5.0",
         "p-retry": "^3.0.1",
-        "portfinder": "^1.0.25",
+        "portfinder": "^1.0.26",
         "schema-utils": "^1.0.0",
         "selfsigned": "^1.10.7",
         "semver": "^6.3.0",
         "serve-index": "^1.9.1",
-        "sockjs": "0.3.19",
+        "sockjs": "0.3.20",
         "sockjs-client": "1.4.0",
-        "spdy": "^4.0.1",
+        "spdy": "^4.0.2",
         "strip-ansi": "^3.0.1",
         "supports-color": "^6.1.0",
         "url": "^0.11.0",
         "webpack-dev-middleware": "^3.7.2",
         "webpack-log": "^2.0.0",
         "ws": "^6.2.1",
-        "yargs": "12.0.5"
+        "yargs": "^13.3.2"
       },
       "dependencies": {
         "ansi-regex": {
@@ -21513,61 +23859,12 @@
           "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
           "dev": true
         },
-        "cliui": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
-          "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==",
-          "dev": true,
-          "requires": {
-            "string-width": "^2.1.1",
-            "strip-ansi": "^4.0.0",
-            "wrap-ansi": "^2.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        },
-        "get-caller-file": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
-          "dev": true
-        },
         "is-absolute-url": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
           "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
           "dev": true
         },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "require-main-filename": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
-          "dev": true
-        },
         "schema-utils": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
@@ -21579,6 +23876,34 @@
             "ajv-keywords": "^3.1.0"
           }
         },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          },
+          "dependencies": {
+            "ansi-regex": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+              "dev": true
+            },
+            "strip-ansi": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^4.1.0"
+              }
+            }
+          }
+        },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -21597,53 +23922,28 @@
             "has-flag": "^3.0.0"
           }
         },
-        "wrap-ansi": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-          "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
-          "dev": true,
-          "requires": {
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1"
-          },
-          "dependencies": {
-            "string-width": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-              "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-              "dev": true,
-              "requires": {
-                "code-point-at": "^1.0.0",
-                "is-fullwidth-code-point": "^1.0.0",
-                "strip-ansi": "^3.0.0"
-              }
-            }
-          }
-        },
         "yargs": {
-          "version": "12.0.5",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz",
-          "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==",
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
           "dev": true,
           "requires": {
-            "cliui": "^4.0.0",
-            "decamelize": "^1.2.0",
+            "cliui": "^5.0.0",
             "find-up": "^3.0.0",
-            "get-caller-file": "^1.0.1",
-            "os-locale": "^3.0.0",
+            "get-caller-file": "^2.0.1",
             "require-directory": "^2.1.1",
-            "require-main-filename": "^1.0.1",
+            "require-main-filename": "^2.0.0",
             "set-blocking": "^2.0.0",
-            "string-width": "^2.0.0",
+            "string-width": "^3.0.0",
             "which-module": "^2.0.0",
-            "y18n": "^3.2.1 || ^4.0.0",
-            "yargs-parser": "^11.1.1"
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
           }
         },
         "yargs-parser": {
-          "version": "11.1.1",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz",
-          "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==",
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
           "dev": true,
           "requires": {
             "camelcase": "^5.0.0",
@@ -21690,13 +23990,11 @@
       }
     },
     "websocket-driver": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
-      "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
+      "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
       "dev": true,
       "requires": {
-        "http-parser-js": ">=0.4.0 <0.4.11",
-        "safe-buffer": ">=5.1.0",
         "websocket-extensions": ">=0.1.1"
       }
     },
@@ -21771,12 +24069,6 @@
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
       "dev": true
     },
-    "wordwrap": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
-      "dev": true
-    },
     "worker-farm": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
@@ -21915,6 +24207,15 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "yaml": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.9.2.tgz",
+      "integrity": "sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "yaml-front-matter": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/yaml-front-matter/-/yaml-front-matter-3.4.1.tgz",
@@ -21934,9 +24235,9 @@
       }
     },
     "yargs": {
-      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz",
-      "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==",
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
       "dev": true,
       "requires": {
         "cliui": "^5.0.0",
@@ -21948,7 +24249,7 @@
         "string-width": "^3.0.0",
         "which-module": "^2.0.0",
         "y18n": "^4.0.0",
-        "yargs-parser": "^13.1.1"
+        "yargs-parser": "^13.1.2"
       },
       "dependencies": {
         "string-width": {
@@ -21974,9 +24275,9 @@
       }
     },
     "yargs-parser": {
-      "version": "13.1.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz",
-      "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==",
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
       "dev": true,
       "requires": {
         "camelcase": "^5.0.0",
@@ -22004,9 +24305,9 @@
       }
     },
     "yarn": {
-      "version": "1.21.1",
-      "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.21.1.tgz",
-      "integrity": "sha512-dQgmJv676X/NQczpbiDtc2hsE/pppGDJAzwlRiADMTvFzYbdxPj2WO4PcNyriSt2c4jsCMpt8UFRKHUozt21GQ==",
+      "version": "1.22.4",
+      "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.4.tgz",
+      "integrity": "sha512-oYM7hi/lIWm9bCoDMEWgffW8aiNZXCWeZ1/tGy0DWrN6vmzjCXIKu2Y21o8DYVBUtiktwKcNoxyGl/2iKLUNGA==",
       "dev": true
     },
     "yauzl": {
@@ -22020,9 +24321,9 @@
       }
     },
     "yn": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yn/-/yn-4.0.0.tgz",
-      "integrity": "sha512-huWiiCS4TxKc4SfgmTwW1K7JmXPPAmuXWYy4j9qjQo4+27Kni8mGhAAi1cloRWmBe2EqcLgt3IGqQoRL/MtPgg==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
       "dev": true
     },
     "yorkie": {
@@ -22094,9 +24395,9 @@
       "dev": true
     },
     "zen-observable-ts": {
-      "version": "0.8.20",
-      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.20.tgz",
-      "integrity": "sha512-2rkjiPALhOtRaDX6pWyNqK1fnP5KkJJybYebopNSn6wDG1lxBoFs2+nwwXKoA6glHIrtwrfBBy6da0stkKtTAA==",
+      "version": "0.8.21",
+      "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz",
+      "integrity": "sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==",
       "dev": true,
       "requires": {
         "tslib": "^1.9.3",
diff --git a/package.json b/package.json
index 3e550d29..aaf32963 100644
--- a/package.json
+++ b/package.json
@@ -12,52 +12,53 @@
   },
   "dependencies": {
     "@types/irc": "^0.3.33",
-    "@types/node": "^13.1.6",
+    "@types/node": "^13.13.5",
+    "@types/punycode": "^2.1.0",
     "bootstrap": "^4.4.1",
-    "bootstrap-vue": "^2.2.0",
+    "bootstrap-vue": "^2.13.1",
     "eventemitter3": "^4.0.0",
-    "irc-framework": "^4.6.0",
+    "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
     "markdown-it": "^10.0.0",
     "stream": "0.0.2",
     "to-bool": "0.0.1",
-    "tslib": "^1.10.0",
+    "tslib": "^1.11.2",
     "vue": "^2.6.11",
-    "vue-class-component": "^7.2.2",
-    "vue-context": "^5.0.0",
+    "vue-class-component": "^7.2.3",
+    "vue-context": "^5.1.0",
     "vue-context-menu": "^2.0.6",
-    "vue-js-modal": "^1.3.31",
+    "vue-js-modal": "^1.3.35",
     "vue-perfect-scrollbar": "^0.2.1",
-    "vue-property-decorator": "^8.3.0",
+    "vue-property-decorator": "^8.4.2",
     "vue-resource": "^1.5.1",
     "vuebar": "0.0.20",
-    "vuex": "^3.1.2",
-    "vuex-class-component": "^2.2.1"
+    "vuex": "^3.3.0",
+    "vuex-class-component": "^2.3.2"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.25",
-    "@types/markdown-it": "0.0.9",
-    "@typescript-eslint/parser": "^2.15.0",
-    "@typescript-eslint/eslint-plugin": "^2.15.0",
-    "@vue/cli": "^4.1.2",
-    "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-e2e-nightwatch": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.2",
-    "@vue/cli-plugin-typescript": "^4.1.2",
-    "@vue/cli-plugin-unit-jest": "^4.1.2",
-    "@vue/cli-service": "^4.1.2",
+    "@types/jest": "^25.2.1",
+    "@types/markdown-it": "10.0.1",
+    "@typescript-eslint/eslint-plugin": "^2.31.0",
+    "@typescript-eslint/parser": "^2.31.0",
+    "@vue/cli": "^4.3.1",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-e2e-nightwatch": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-typescript": "^4.3.1",
+    "@vue/cli-plugin-unit-jest": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-airbnb": "^5.0.2",
-    "@vue/eslint-config-typescript": "^5.0.1",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/test-utils": "^1.0.2",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.1.2",
-    "lint-staged": "^9.5.0",
-    "node-sass": "^4.13.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^10.2.2",
+    "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "ts-jest": "^24.3.0",
-    "typescript": "^3.7.4",
+    "ts-jest": "^25.5.0",
+    "typescript": "^3.8.3",
     "vue-eslint-parser": "^7.0.0",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/app/App.vue b/src/app/App.vue
index 20e49f9c..a8fd60b0 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -7,6 +7,8 @@
     <slideout
       style="z-index:1;"
       :minimizedValue="!minimized"
+      ref="slideout"
+      @input="slideoutChanged"
     >
     </slideout>
     <transition name="fade">
@@ -65,6 +67,8 @@
 
     fullSize = false;
 
+    broadcast: BroadcastChannel = new BroadcastChannel('eterna');
+
     // For text in top bar
     get currentTab() {
       return this.$vxm.chat.chatChannel;
@@ -77,8 +81,17 @@
 
     $refs!: {
       reportDialog: ReportDialog;
+      slideout: Slideout;
     };
 
+    slideoutChanged(e:string) { // When slideout changed
+      const slideoutActive = !e;
+      if (!slideoutActive) {
+         // Dismiss notifications in currently visible chat tab as they have been read
+        this.broadcast.postMessage(this.currentTab);
+      }
+    }
+
     get messageTabs() {
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
@@ -91,8 +104,20 @@
       return this.fullSize;
     }
 
+    setRead(channel:string) {
+      console.log(channel);
+      this.$vxm.chat.notificationChannels[channel] = false;
+      this.$refs.slideout.notificationsToggle = true;
+    }
+
+    handler(ev:MessageEvent) {
+      console.log(`received message to ignore ${ev.data}. notification data: general - ${this.$vxm.chat.notificationChannels['#general']}, off-topic - ${this.$vxm.chat.notificationChannels['#off-topic']}, help - ${this.$vxm.chat.notificationChannels['#help']}`);
+      this.setRead(ev.data);
+    }
+
     postMessage(rawMessage: string, channel: string) {
       this.$vxm.chat.sendMessage({ rawMessage, channel });
+      this.broadcast.postMessage(channel);
     }
 
     mounted() {
@@ -103,6 +128,7 @@
       this.$vxm.chat.$subscribe('openReportModal', payload => {
         this.$refs.reportDialog.open(payload);
       });
+      this.broadcast.onmessage = this.handler;
     }
 
     @Watch('minimized')
diff --git a/src/app/assets/hamburger-notification.png b/src/app/assets/hamburger-notification.png
new file mode 100644
index 0000000000000000000000000000000000000000..b687c6db110fdf726bb4b34dbe1baa081db8a283
GIT binary patch
literal 295
zcmeAS@N?(olHy`uVBq!ia0vp^l0YoR!3HEv_nU76QjEnx?oJHr&dIz4ax79KJkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?4L1x#=e$py@CwirnAXSUK-AT`(1#WBQ#_igZL-Ub5>
z-DB16S?&dw`x4v>gzqva-de)m<*Op+<LSY1;roxPmdcLL#V$=PQ9pXS&+S7?g`mNP
zC1x%x^Q2jPW*uB4s}@kuC+Rt*WuL%`t%t6(f0`iLG;PDhWjrdXnGcVO=X&h$Q{!U1
z_?zk6ae=L3?mlxEK3E(*!L2^w%K2Qs9d06T{!idI%Nt(J^tk2rW<jO-e<lm}lswc6
S-fwFFa<HeXpUXO@geCy&23&Li

literal 0
HcmV?d00001

diff --git a/src/app/assets/hamburger.png b/src/app/assets/hamburger.png
index 0a3c8f155541c512a8bb60c53dc0e7b5e26a67d4..79e0c11c01d871f066260501716f9e9b9317ba42 100644
GIT binary patch
delta 131
zcmdnSxQ$V<Gr-TCmrII^fq{Y7)59eQNQ(fm5C<EOjK1(sV4|W;q{sqh1{NTn5hMe|
z4056B=|D=y)5S5wLNNIcKMPL?i%*CNcg~du<`Zt&$uT`M>{FYqDB#_Eu5<Cpwoe+2
Y42RTsxK2xdTL{wc>FVdQ&MBb@0OTAXkpKVy

delta 131
zcmdnSxQ$V<Gr-TCmrII^fq{Y7)59eQNQ(lo5C<EO+#)npZ=#}2r04=>1{NTn5hMe|
z3^PB!Q2|mqo-U3d7J|ut_*r;D*nC3F_;c=DFq|T`Pu?lbs84OBqDZv!p_Pk0yMA3{
YVYuAE!)54GT?W$c>FVdQ&MBb@0Q^TFi~s-t

diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/HamburgerMenuButton.vue
index f8f7aa39..8b12d5ea 100644
--- a/src/app/components/HamburgerMenuButton.vue
+++ b/src/app/components/HamburgerMenuButton.vue
@@ -2,6 +2,7 @@
   <span
     class="hamburger"
     @click="$emit('input', !value)"
+    :class="{notified:notification}"
   />
 </template>
 
@@ -13,16 +14,25 @@
   export default class HamburgerMenuButton extends Vue {
     @Prop()
     value!: boolean;
+
+    @Prop()
+    notification!: boolean;
   }
 </script>
 <style scoped>
 .hamburger {
-  background-image: url("../assets/hamburger.png");
-  background-repeat: no-repeat;
-  background-size: 40% 40%;
-  background-position: center;
   display:inline-block;
   width:40px;
   height:40px;
+  background-image: url("../assets/hamburger.png");
+  background-repeat: no-repeat;
+  background-size: 50% 45%;
+  background-position: bottom 10px left 11px;
+  transition: background-image background-size 1s;
+}
+.notified {
+  background-image: url("../assets/hamburger-notification.png");
+  background-size: 62.5% 55%;
+  background-position:bottom 10px left 11px;
 }
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index a924f35f..af4c8b21 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -4,7 +4,7 @@
     class="slideout-container"
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
-    <HamburgerMenuButton v-model="checked"/>
+    <HamburgerMenuButton v-model="checked" :notification="notifications"/>
     <span v-if="checked">
       <SlideoutButtonChat
         :selected="chatSelected"
@@ -20,6 +20,7 @@
       />
       <SlideoutChats
         v-if="chatSelected"
+        ref="chat"
       />
       <SlideoutUser v-if="userSelected"/>
       <SlideoutSettings v-if="settingsSelected" size=14 />
@@ -63,6 +64,10 @@
     @Prop()
     minimizedValue !: boolean;
 
+    $refs!: {
+      chat:SlideoutChats,
+    };
+
     // Each of the functions below tells whether a given tab is selected
     get chatSelected() {
         return this.activeTab === 0;
@@ -76,6 +81,23 @@
       return this.activeTab === 2;
     }
 
+    get currentTab() {
+      return this.$vxm.chat.chatChannel;
+    }
+
+    get notifications() {
+      const { notificationChannels } = this.$vxm.chat; // Gets object that stores notification info
+      // Values for each channel
+      const anyNotifications = Object.values(notificationChannels).some(item => item);
+      if (!anyNotifications) { return false; } // If no notifications, don't display any
+       // If notification in current channel, only display if slideout is visible
+      if (notificationChannels[this.currentTab]) {
+        return this.checked;
+      }
+       // If neither of the above were true (there are notifications not in this tab) return true
+      return true;
+    }
+
     // Slideout slides back when minimized
     @Watch('minimizedValue')
     minimzationChanged() {
@@ -83,6 +105,11 @@
         this.checked = false;
       }
     }
+
+    @Watch('checked') // Slideout checked
+    checkedChanged() {
+      this.$emit('input', this.checked);
+    }
   }
 </script>
 
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index e58fa028..35ca4f9f 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -9,6 +9,7 @@
         :description="channelDescription(name)"
         @input="activeTab = index"
         v-on:click="update"
+        :class="{notified:isNotified(name)}"
       >
         <Splitter />
       </TabButton>
@@ -75,6 +76,14 @@
       // Return channel name with first letter capitalized + ' channel'
       return `${trimmedName.charAt(0).toUpperCase()}${trimmedName.substr(1)} channel`;
     }
+
+    isNotified(name:string) {
+      const { notificationChannels } = this.$vxm.chat; // Gets object that stores notification info
+      if (notificationChannels[name]) {
+        return true;
+      }
+      return false;
+    }
   }
 </script>
 <style scoped>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index 367472da..d3c0d7e7 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -77,4 +77,7 @@
     text-align:justify;
     margin-left:5px;
   }
+  .notified {
+    color:#e74c3c;
+  }
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 386c043d..a9eee745 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -72,12 +72,22 @@ export default class ChatModule extends VuexModule {
 
   usersByNick: { [nick: string]: User } = {};
 
-  tab: Number = 0; // Selected tab. One of the chat channels
+  tab: Number = 1; // Selected tab. One of the chat channels
 
-  chatChannel : string = '#general'; // Name of channel display in top bar
+  chatChannel : string = '#off-topic'; // Name of channel display in top bar
 
   fontSize: Number = 14;
 
+  ignoredChannels = [];
+
+  notificationChannels : {[channel:string]:boolean} = {
+    '#general': false,
+    '#off-topic': false,
+    '#help': false,
+  };
+
+  presentTabs = [];
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -416,6 +426,7 @@ export default class ChatModule extends VuexModule {
   }: Irc.MessageEventArgs) {
     const channel = this.channels[target];
     if (!channel) return;
+    this.notificationChannels[channel.name] = true;
     const username = User.parseUsername(nick);
     const messageObject = new Message(message, target, this.connectedUsers[username], type === 'action', time);
     if (time) {

From 72c5c3204856ed67d9703bd1d2afc4418f2082d0 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 11 May 2020 16:44:41 -0500
Subject: [PATCH 053/223] Bug fix

---
 src/app/App.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index a8fd60b0..3b36e110 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -42,7 +42,6 @@
   import MessagePane from '@/components/Panes/MessagePane.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
-
   @Component({
     components: {
       Slideout,
@@ -107,7 +106,6 @@
     setRead(channel:string) {
       console.log(channel);
       this.$vxm.chat.notificationChannels[channel] = false;
-      this.$refs.slideout.notificationsToggle = true;
     }
 
     handler(ev:MessageEvent) {

From b67daf61a533f737687b5ceb4dcfe560ed912409 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 12 May 2020 17:50:39 -0500
Subject: [PATCH 054/223] Massive cleanup

---
 src/app/App.vue                               | 22 +++----------
 src/app/components/Slideout/Slideout.vue      | 12 ++-----
 src/app/components/Slideout/SlideoutChats.vue |  8 ++---
 src/app/store/chat.vuex.ts                    | 32 ++++++++++++++-----
 4 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 3b36e110..12d1b2c7 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -66,8 +66,6 @@
 
     fullSize = false;
 
-    broadcast: BroadcastChannel = new BroadcastChannel('eterna');
-
     // For text in top bar
     get currentTab() {
       return this.$vxm.chat.chatChannel;
@@ -84,10 +82,10 @@
     };
 
     slideoutChanged(e:string) { // When slideout changed
-      const slideoutActive = !e;
-      if (!slideoutActive) {
-         // Dismiss notifications in currently visible chat tab as they have been read
-        this.broadcast.postMessage(this.currentTab);
+      this.$vxm.chat.slideoutOpen = Boolean(e);
+      if (!e) { // If slideout is closing
+       // Set current tab (what user is looking at) to read
+        this.$vxm.chat.readChannel(this.currentTab);
       }
     }
 
@@ -103,19 +101,8 @@
       return this.fullSize;
     }
 
-    setRead(channel:string) {
-      console.log(channel);
-      this.$vxm.chat.notificationChannels[channel] = false;
-    }
-
-    handler(ev:MessageEvent) {
-      console.log(`received message to ignore ${ev.data}. notification data: general - ${this.$vxm.chat.notificationChannels['#general']}, off-topic - ${this.$vxm.chat.notificationChannels['#off-topic']}, help - ${this.$vxm.chat.notificationChannels['#help']}`);
-      this.setRead(ev.data);
-    }
-
     postMessage(rawMessage: string, channel: string) {
       this.$vxm.chat.sendMessage({ rawMessage, channel });
-      this.broadcast.postMessage(channel);
     }
 
     mounted() {
@@ -126,7 +113,6 @@
       this.$vxm.chat.$subscribe('openReportModal', payload => {
         this.$refs.reportDialog.open(payload);
       });
-      this.broadcast.onmessage = this.handler;
     }
 
     @Watch('minimized')
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index af4c8b21..4582452b 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -41,6 +41,7 @@
   import SlideoutButtonSettings from '../SlideoutButtonSettings.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import HamburgerMenuButton from '@/components/HamburgerMenuButton.vue';
+  import { Channel } from '../../store/chat.vuex';
 
   @Component({
     components: {
@@ -86,16 +87,7 @@
     }
 
     get notifications() {
-      const { notificationChannels } = this.$vxm.chat; // Gets object that stores notification info
-      // Values for each channel
-      const anyNotifications = Object.values(notificationChannels).some(item => item);
-      if (!anyNotifications) { return false; } // If no notifications, don't display any
-       // If notification in current channel, only display if slideout is visible
-      if (notificationChannels[this.currentTab]) {
-        return this.checked;
-      }
-       // If neither of the above were true (there are notifications not in this tab) return true
-      return true;
+      return Object.values(this.$vxm.chat.channels).some(item => item?.notifications);
     }
 
     // Slideout slides back when minimized
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 35ca4f9f..023294d2 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -9,7 +9,7 @@
         :description="channelDescription(name)"
         @input="activeTab = index"
         v-on:click="update"
-        :class="{notified:isNotified(name)}"
+        :class="{ notified:isNotified(name) }"
       >
         <Splitter />
       </TabButton>
@@ -78,9 +78,9 @@
     }
 
     isNotified(name:string) {
-      const { notificationChannels } = this.$vxm.chat; // Gets object that stores notification info
-      if (notificationChannels[name]) {
-        return true;
+      const trueChannel = this.$vxm.chat.channels[name];
+      if (trueChannel) {
+        return trueChannel.notifications;
       }
       return false;
     }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index a9eee745..a71a6eff 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -18,7 +18,8 @@ interface Channel {
   postedMessages: Message[],
   name: string,
   banned: BanStatus,
-  maxHistoryMessages: number
+  maxHistoryMessages: number,
+  notifications: boolean
 }
 
 class ConnectionData {
@@ -80,13 +81,9 @@ export default class ChatModule extends VuexModule {
 
   ignoredChannels = [];
 
-  notificationChannels : {[channel:string]:boolean} = {
-    '#general': false,
-    '#off-topic': false,
-    '#help': false,
-  };
+  notificationsIgnored = false;
 
-  presentTabs = [];
+  slideoutOpen = false;
 
   constructor() {
     super();
@@ -96,10 +93,27 @@ export default class ChatModule extends VuexModule {
         postedMessages: [],
         maxHistoryMessages: 50,
         name: channelName,
+        notifications: false,
       };
     });
   }
 
+  @mutation
+  readChannel(channel:string) {
+    const trueChannel = this.channels[channel];
+    if (trueChannel) {
+      trueChannel.notifications = false;
+    }
+  }
+
+  @mutation
+  notify(channel:string) {
+    const trueChannel = this.channels[channel];
+    if (trueChannel) {
+      trueChannel.notifications = true;
+    }
+  }
+
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {
@@ -426,7 +440,9 @@ export default class ChatModule extends VuexModule {
   }: Irc.MessageEventArgs) {
     const channel = this.channels[target];
     if (!channel) return;
-    this.notificationChannels[channel.name] = true;
+    if (this.slideoutOpen || channel.name !== this.chatChannel) {
+      this.notify(channel.name);
+    }
     const username = User.parseUsername(nick);
     const messageObject = new Message(message, target, this.connectedUsers[username], type === 'action', time);
     if (time) {

From 5f0fe64fd27439e6012af7a4cfb8e53f7210bad6 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 13 May 2020 13:24:35 -0500
Subject: [PATCH 055/223] Settings menu + everything actually works

---
 package-lock.json                             | 99 +++++++++++++++++--
 package.json                                  |  4 +
 src/app/App.vue                               |  5 +-
 src/app/components/Slideout/Slideout.vue      |  5 +-
 src/app/components/Slideout/SlideoutChats.vue |  5 +-
 .../components/Slideout/SlideoutSettings.vue  | 82 ++++++++++++++-
 src/app/store/chat.vuex.ts                    | 36 ++++++-
 7 files changed, 220 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c913e3b3..fd69f5dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1275,7 +1275,6 @@
       "version": "7.9.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
       "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -5686,6 +5685,28 @@
         "babel-types": "^6.24.1"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
     "babel-preset-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
@@ -5700,7 +5721,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -5709,14 +5729,12 @@
         "core-js": {
           "version": "2.6.11",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
-          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==",
-          "dev": true
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
         },
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-          "dev": true
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
         }
       }
     },
@@ -5892,6 +5910,11 @@
         "tryer": "^1.0.1"
       }
     },
+    "big-integer": {
+      "version": "1.6.48",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.48.tgz",
+      "integrity": "sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w=="
+    },
     "big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -6248,6 +6271,35 @@
         }
       }
     },
+    "broadcast-channel": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.1.0.tgz",
+      "integrity": "sha512-zrjTunJRva1aFW9UlLtoMnB05tu8hbb7qbv3PxXXGnxp3t9VA/KcTIwcC0+u7oLBdlXSnv0yy7pB+UemLjANyQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.0.4",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      },
+      "dependencies": {
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "broadcastchannel-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/broadcastchannel-polyfill/-/broadcastchannel-polyfill-1.0.1.tgz",
+      "integrity": "sha512-iooPAN913j4xfrIu5o+mDaks9UUDOBfgjn8SsuzysfXr/X+f8m9y5t8c5rAbW6P0LdUXBJx33zwN4Cs6b9BGRw=="
+    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -8823,8 +8875,7 @@
     "detect-node": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
-      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
-      "dev": true
+      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
     },
     "dicer": {
       "version": "0.3.0",
@@ -15016,6 +15067,11 @@
         "easy-stack": "^1.0.0"
       }
     },
+    "js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -16701,6 +16757,11 @@
         "to-regex": "^3.0.2"
       }
     },
+    "microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "middleware-handler": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/middleware-handler/-/middleware-handler-0.2.0.tgz",
@@ -17092,6 +17153,14 @@
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
       "dev": true
     },
+    "nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha1-sFVPaa2J4i0JB/ehKwmTpdlhN+8=",
+      "requires": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "nanoid": {
       "version": "2.1.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
@@ -21811,6 +21880,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "sysend": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/sysend/-/sysend-1.3.3.tgz",
+      "integrity": "sha512-6U/soi3Ul/xKZ2AwM1Q7YngqwAoMx0PUVle131REgiuu/+VUQEvSZyc6L37nTaqZv4Jagcvcz8WT4IVugVUj8w=="
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -22885,6 +22959,15 @@
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true
     },
+    "unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index aaf32963..9543493f 100644
--- a/package.json
+++ b/package.json
@@ -14,13 +14,17 @@
     "@types/irc": "^0.3.33",
     "@types/node": "^13.13.5",
     "@types/punycode": "^2.1.0",
+    "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.4.1",
     "bootstrap-vue": "^2.13.1",
+    "broadcast-channel": "^3.1.0",
+    "broadcastchannel-polyfill": "^1.0.1",
     "eventemitter3": "^4.0.0",
     "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
     "markdown-it": "^10.0.0",
     "stream": "0.0.2",
+    "sysend": "^1.3.3",
     "to-bool": "0.0.1",
     "tslib": "^1.11.2",
     "vue": "^2.6.11",
diff --git a/src/app/App.vue b/src/app/App.vue
index 12d1b2c7..45164c90 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -42,6 +42,7 @@
   import MessagePane from '@/components/Panes/MessagePane.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
+
   @Component({
     components: {
       Slideout,
@@ -84,7 +85,7 @@
     slideoutChanged(e:string) { // When slideout changed
       this.$vxm.chat.slideoutOpen = Boolean(e);
       if (!e) { // If slideout is closing
-       // Set current tab (what user is looking at) to read
+        // Set current tab (what user is looking at) to read
         this.$vxm.chat.readChannel(this.currentTab);
       }
     }
@@ -103,6 +104,8 @@
 
     postMessage(rawMessage: string, channel: string) {
       this.$vxm.chat.sendMessage({ rawMessage, channel });
+       // When user sends a message, make sure it doesn't notify itself
+      this.$vxm.chat.readChannel(channel);
     }
 
     mounted() {
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 4582452b..f1a4c010 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -87,7 +87,10 @@
     }
 
     get notifications() {
-      return Object.values(this.$vxm.chat.channels).some(item => item?.notifications);
+      // If any channels have notifications
+      // eslint-disable-next-line max-len
+      const anyNotifications = Object.values(this.$vxm.chat.channels).some(item => item?.notifications);
+      return anyNotifications;
     }
 
     // Slideout slides back when minimized
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 023294d2..012454de 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -77,11 +77,14 @@
       return `${trimmedName.charAt(0).toUpperCase()}${trimmedName.substr(1)} channel`;
     }
 
-    isNotified(name:string) {
+    isNotified(name:string) { // If given tab is notified
+      // Make sure name returns a real channel
       const trueChannel = this.$vxm.chat.channels[name];
       if (trueChannel) {
+        // If it exists, return whether or not it has notifications
         return trueChannel.notifications;
       }
+      // If it doesn't exist, return false (default)
       return false;
     }
   }
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 8c7b85e4..3850d388 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -2,9 +2,9 @@
   <div id="settings-wrapper">
     <h3>Text Size</h3>
     <input v-model="size" type=number min=10 max=22>
-    <p id='font-size-p'>Default is 14</p>
+    <p id='font-size-p' class='bottom-section'>Default is 14</p>
     <h3>Ignored List</h3>
-    <ul>
+    <ul class='bottom-section'>
       <li v-for="user in ignoredUsers" :key="user.Username">
         {{ user }}
         <button class='unignore-user' v-on:click="unignore(user)">Unignore</button>
@@ -13,6 +13,36 @@
       <button class='unignore-user' v-on:click="unignore('*')" v-show="anyIgnoredUsers" >
         Unignore All</button>
     </ul>
+    <h3>Notifications</h3>
+    <table>
+      <tr v-for="channel in channels" :key="channel.name">
+        <td>{{channel.name}}</td>
+        <td>
+          <button style="width:calc(100% - 6px)" @click="toggleNotificationsEnabled(channel.name)">
+            {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td class='footer'>
+          <button style="width:width:calc(100% - 6px)"
+            :disabled="anyNotificationsDisabled"
+            @click="toggleAll"
+          >
+            Enable all
+          </button>
+        </td>
+        <td class='footer'>
+          <button
+            style="width:width:calc(100% - 6px)"
+              :disabled="anyNotificationsEnabled"
+              @click="toggleAll"
+          >
+            Disable all
+          </button>
+        </td>
+    </tr>
+    </table>
   </div>
 </template>
 <script lang="ts">
@@ -23,6 +53,7 @@
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
   import SlideoutButton from './SlideoutButton.vue';
   import Slideout from './Slideout.vue';
+  import { Channel } from '../../store/chat.vuex';
   @Component({
     components: {
       Username,
@@ -63,12 +94,48 @@
     unignore(user:string) {
       this.$vxm.chat.unignoreUser(user);
     }
+
+    get channels() {
+      return this.$vxm.chat.channels;
+    }
+
+    toggleNotificationsEnabled(channel:string) {
+      const trueChannel = this.$vxm.chat.channels[channel];
+      if (trueChannel) {
+        trueChannel.notificationsEnabled = !trueChannel.notificationsEnabled;
+        if (!trueChannel.notificationsEnabled) {
+          trueChannel.notifications = false;
+        }
+      }
+    }
+
+    get anyNotificationsEnabled() {
+      return Object.values(this.channels).some(item => {
+        const { notificationsEnabled } = item as Channel;
+        return notificationsEnabled;
+      });
+    }
+
+    get anyNotificationsDisabled() {
+      return Object.values(this.channels).some(item => {
+        const { notificationsEnabled } = item as Channel;
+        return !notificationsEnabled;
+      });
+    }
+
+    toggleAll() {
+      Object.values(this.channels).forEach(item => {
+       this.toggleNotificationsEnabled((item as Channel).name);
+      });
+    }
   }
 </script>
 <style scoped>
 #font-size-p { /* 'Default is 14' text */
   vertical-align: mid;
   margin-left:2px;
+}
+.bottom-section {
   margin-bottom:15px;
 }
 h3 {
@@ -80,10 +147,11 @@ input {
   width:calc(100% - 23px); /* Accounts for padding on both sides */
   max-width:150px; /* Big screens don't have arbitrarily large input */
 }
-.unignore-user { /* Unignore user button */
+button { /* Unignore user button */
   padding:2px;
   padding-bottom:3px;
   background-color:white;
+  margin-left:2px;
 }
 #settings-wrapper { /* Wrapper div */
   padding:5px;
@@ -102,4 +170,12 @@ input {
 li { /* Remove bullets */
   list-style-type: none;
 }
+td {
+  border:solid white 1px;
+  padding:4px;
+  width:max-content;
+}
+.footer {
+  border:none;
+}
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index a71a6eff..dc114e73 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -5,11 +5,17 @@ import {
 } from 'vuex-class-component';
 import toBool from 'to-bool';
 import Vue from 'vue';
+import { BroadcastChannel } from 'broadcast-channel';
 import Message from '../types/message';
 import Connection from '@/tools/websocket';
 import BanStatus from '@/types/BanStatus';
 import User from '@/types/user';
 
+// For polyfill
+declare type BroadcastMessage = {
+  message: string;
+};
+
 const VuexModule = createModule({
   strict: false,
 });
@@ -19,7 +25,8 @@ interface Channel {
   name: string,
   banned: BanStatus,
   maxHistoryMessages: number,
-  notifications: boolean
+  notifications: boolean,
+  notificationsEnabled: boolean,
 }
 
 class ConnectionData {
@@ -85,6 +92,8 @@ export default class ChatModule extends VuexModule {
 
   slideoutOpen = false;
 
+  broadcast: BroadcastChannel<BroadcastMessage>;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -94,22 +103,41 @@ export default class ChatModule extends VuexModule {
         maxHistoryMessages: 50,
         name: channelName,
         notifications: false,
+        notificationsEnabled: true,
       };
     });
+    // Creates channel through which everything is sent
+    this.broadcast = new BroadcastChannel('eterna');
+    // Message handler
+    this.broadcast.onmessage = (ev) => {
+      /* The only messages sent between tabs are channel names.
+      When a tab receives a message, it unignores the channel. */
+      this.readChannel(ev.message);
+    };
+  }
+
+  channelWithName(name:string) {
+    return this.channels[name];
   }
 
   @mutation
   readChannel(channel:string) {
+    // Makes sure channel name corresponds to a channel
     const trueChannel = this.channels[channel];
     if (trueChannel) {
+      // Set notifications for that channel to false
       trueChannel.notifications = false;
     }
+    // When a channel is read, notify other tabs so they update
+    this.broadcast.postMessage(new Message(channel));
   }
 
   @mutation
   notify(channel:string) {
+    // Again, making sure there is an actual channel with the name
     const trueChannel = this.channels[channel];
     if (trueChannel) {
+      // Turning on notifications for that channel
       trueChannel.notifications = true;
     }
   }
@@ -440,8 +468,12 @@ export default class ChatModule extends VuexModule {
   }: Irc.MessageEventArgs) {
     const channel = this.channels[target];
     if (!channel) return;
-    if (this.slideoutOpen || channel.name !== this.chatChannel) {
+    // Notifications should come in if slideout is open, user is in a different channel, or both
+    if ((this.slideoutOpen || channel.name !== this.chatChannel) && channel.notificationsEnabled) {
+      // Notify the channel
       this.notify(channel.name);
+    } else { // If the user is in the channel and the slideout is closed
+      this.readChannel(channel.name); // Set the channel to read
     }
     const username = User.parseUsername(nick);
     const messageObject = new Message(message, target, this.connectedUsers[username], type === 'action', time);

From cbd136722a175674fe117cfd05cbd87e1d006a88 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 13 May 2020 15:27:33 -0500
Subject: [PATCH 056/223] Styling, cleanup, title change

---
 src/app/App.vue                               |  11 --
 src/app/components/Slideout/Slideout.vue      |  22 +--
 .../components/Slideout/SlideoutSettings.vue  | 132 +++++++++++-------
 src/app/store/chat.vuex.ts                    |   8 +-
 4 files changed, 99 insertions(+), 74 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 45164c90..ddbd777e 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -7,8 +7,6 @@
     <slideout
       style="z-index:1;"
       :minimizedValue="!minimized"
-      ref="slideout"
-      @input="slideoutChanged"
     >
     </slideout>
     <transition name="fade">
@@ -79,17 +77,8 @@
 
     $refs!: {
       reportDialog: ReportDialog;
-      slideout: Slideout;
     };
 
-    slideoutChanged(e:string) { // When slideout changed
-      this.$vxm.chat.slideoutOpen = Boolean(e);
-      if (!e) { // If slideout is closing
-        // Set current tab (what user is looking at) to read
-        this.$vxm.chat.readChannel(this.currentTab);
-      }
-    }
-
     get messageTabs() {
       return Object.values(this.$vxm.chat.channels).map(channel => channel!);
     }
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index f1a4c010..5dd36fea 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -20,7 +20,6 @@
       />
       <SlideoutChats
         v-if="chatSelected"
-        ref="chat"
       />
       <SlideoutUser v-if="userSelected"/>
       <SlideoutSettings v-if="settingsSelected" size=14 />
@@ -39,7 +38,6 @@
   import SlideoutButtonUsers from '../SlideoutButtonUsers.vue';
   import SlideoutButtonChat from '../SlideoutButtonChat.vue';
   import SlideoutButtonSettings from '../SlideoutButtonSettings.vue';
-  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import HamburgerMenuButton from '@/components/HamburgerMenuButton.vue';
   import { Channel } from '../../store/chat.vuex';
 
@@ -52,7 +50,6 @@
       SlideoutButtonSettings,
       SlideoutButtonChat,
       SlideoutButtonUsers,
-      MinimizationTriangle,
       HamburgerMenuButton,
     },
   })
@@ -65,10 +62,6 @@
     @Prop()
     minimizedValue !: boolean;
 
-    $refs!: {
-      chat:SlideoutChats,
-    };
-
     // Each of the functions below tells whether a given tab is selected
     get chatSelected() {
         return this.activeTab === 0;
@@ -93,6 +86,15 @@
       return anyNotifications;
     }
 
+    @Watch('notifications')
+    notificationsChanged() {
+      if (this.notifications) {
+        document.title += '(!)';
+      } else {
+        document.title = document.title.slice(0, document.title.length - 3);
+      }
+    }
+
     // Slideout slides back when minimized
     @Watch('minimizedValue')
     minimzationChanged() {
@@ -103,7 +105,11 @@
 
     @Watch('checked') // Slideout checked
     checkedChanged() {
-      this.$emit('input', this.checked);
+      this.$vxm.chat.slideoutOpen = Boolean(this.checked);
+      if (!this.checked) { // If slideout is closing
+        // Set current tab (what user is looking at) to read
+        this.$vxm.chat.readChannel(this.currentTab);
+      }
     }
   }
 </script>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 3850d388..fcf3db91 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,48 +1,58 @@
 <template>
   <div id="settings-wrapper">
-    <h3>Text Size</h3>
-    <input v-model="size" type=number min=10 max=22>
-    <p id='font-size-p' class='bottom-section'>Default is 14</p>
-    <h3>Ignored List</h3>
-    <ul class='bottom-section'>
-      <li v-for="user in ignoredUsers" :key="user.Username">
-        {{ user }}
-        <button class='unignore-user' v-on:click="unignore(user)">Unignore</button>
-      </li>
-      <li v-show="!anyIgnoredUsers">No users ignored</li>
-      <button class='unignore-user' v-on:click="unignore('*')" v-show="anyIgnoredUsers" >
-        Unignore All</button>
-    </ul>
-    <h3>Notifications</h3>
-    <table>
-      <tr v-for="channel in channels" :key="channel.name">
-        <td>{{channel.name}}</td>
-        <td>
-          <button style="width:calc(100% - 6px)" @click="toggleNotificationsEnabled(channel.name)">
-            {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
-          </button>
-        </td>
-      </tr>
-      <tr>
-        <td class='footer'>
-          <button style="width:width:calc(100% - 6px)"
-            :disabled="anyNotificationsDisabled"
-            @click="toggleAll"
-          >
-            Enable all
-          </button>
-        </td>
-        <td class='footer'>
-          <button
-            style="width:width:calc(100% - 6px)"
+    <section>
+      <h3>Text Size</h3>
+      <input v-model="size" type=number min=10 max=22>
+      <p id='font-size-p'>Default is 14</p>
+    </section>
+    <section>
+      <h3>Ignored List</h3>
+      <ul>
+        <li v-for="user in ignoredUsers" :key="user.Username">
+          {{ user }}
+          <button class='unignore-user' v-on:click="unignore(user)">Unignore</button>
+        </li>
+        <li v-show="!anyIgnoredUsers">No users ignored</li>
+        <button class='unignore-user' v-on:click="unignore('*')" v-show="anyIgnoredUsers" >
+          Unignore All
+        </button>
+      </ul>
+    </section>
+    <section>
+      <h3>Notifications</h3>
+      <table>
+        <tr v-for="channel in channels" :key="channel.name">
+          <td>{{channel.name}}</td>
+          <td>
+            <button
+              style="width:calc(100% - 6px)"
+              @click="toggleNotificationsEnabled(channel.name)"
+            >
+              {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class='footer'>
+            <button style="width:width:calc(100% - 6px)"
+              :disabled="anyNotificationsDisabled"
+              @click="enableAll"
+            >
+              Enable all
+            </button>
+          </td>
+          <td class='footer'>
+            <button
+              style="width:width:calc(100% - 6px)"
               :disabled="anyNotificationsEnabled"
-              @click="toggleAll"
-          >
-            Disable all
-          </button>
-        </td>
-    </tr>
-    </table>
+              @click="disableAll"
+            >
+              Disable all
+            </button>
+          </td>
+        </tr>
+      </table>
+    </section>
   </div>
 </template>
 <script lang="ts">
@@ -95,10 +105,12 @@
       this.$vxm.chat.unignoreUser(user);
     }
 
+    // Return list of channels
     get channels() {
       return this.$vxm.chat.channels;
     }
 
+    // Toggle whether notifications are enabled for a specific channel
     toggleNotificationsEnabled(channel:string) {
       const trueChannel = this.$vxm.chat.channels[channel];
       if (trueChannel) {
@@ -109,23 +121,45 @@
       }
     }
 
+    // If any notifications are enabled
     get anyNotificationsEnabled() {
-      return Object.values(this.channels).some(item => {
+      // Iterates through each channel and checks if notifications are enabled
+      return !Object.values(this.channels).some(item => {
+        // Making sure nothing is undefined and gets value from channel
         const { notificationsEnabled } = item as Channel;
         return notificationsEnabled;
       });
     }
 
+    // If any notifications are disabled
     get anyNotificationsDisabled() {
-      return Object.values(this.channels).some(item => {
+      // Again, iterating through each channel
+      return !Object.values(this.channels).some(item => {
+        // Making sure nothing is undefined and gets value from channel
         const { notificationsEnabled } = item as Channel;
         return !notificationsEnabled;
       });
     }
 
-    toggleAll() {
+    // Enables notificaitons for all channels
+    enableAll() {
+      // For each channel
       Object.values(this.channels).forEach(item => {
-       this.toggleNotificationsEnabled((item as Channel).name);
+        // If notifications aren't enabled, toggle their value. If they are, leave them alone
+        if (!(item as Channel).notificationsEnabled) {
+          this.toggleNotificationsEnabled((item as Channel).name);
+        }
+      });
+    }
+
+    // Disables notifications for all channels
+    disableAll() {
+      // For each channel
+      Object.values(this.channels).forEach(item => {
+        // If notifications are enabled, toggle their value. If they aren't, leave them alone
+        if ((item as Channel).notificationsEnabled) {
+          this.toggleNotificationsEnabled((item as Channel).name);
+        }
       });
     }
   }
@@ -135,7 +169,7 @@
   vertical-align: mid;
   margin-left:2px;
 }
-.bottom-section {
+section { /* 'Block' of settings */
   margin-bottom:15px;
 }
 h3 {
@@ -170,12 +204,12 @@ button { /* Unignore user button */
 li { /* Remove bullets */
   list-style-type: none;
 }
-td {
+td { /* Table cell in notifications settings section */
   border:solid white 1px;
   padding:4px;
   width:max-content;
 }
-.footer {
+.footer { /* Enable and disable notifications buttons */
   border:none;
 }
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index dc114e73..1b821717 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -86,13 +86,9 @@ export default class ChatModule extends VuexModule {
 
   fontSize: Number = 14;
 
-  ignoredChannels = [];
+  slideoutOpen = false; // Whether slideout is open. Updated by App.vue
 
-  notificationsIgnored = false;
-
-  slideoutOpen = false;
-
-  broadcast: BroadcastChannel<BroadcastMessage>;
+  broadcast: BroadcastChannel<BroadcastMessage>; // For communication between tabs/windows
 
   constructor() {
     super();

From 9aa8cc8b02ee814f42d15b012b222c82396154e5 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 13 May 2020 15:52:39 -0500
Subject: [PATCH 057/223] Commented code and made it easier to change indicator

---
 src/app/components/Slideout/Slideout.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 5dd36fea..6681627f 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -88,10 +88,13 @@
 
     @Watch('notifications')
     notificationsChanged() {
-      if (this.notifications) {
-        document.title += '(!)';
-      } else {
-        document.title = document.title.slice(0, document.title.length - 3);
+      // Notifications indicator in the page title that shows if there are unread messages
+      const notificationIndicator = '(!)';
+      const currentTitle = document.title; // Current title of the page
+      if (this.notifications) { // If notifications were just changed to true
+        document.title += notificationIndicator; // Append indicator to title
+      } else { // If notifications just read
+        document.title = currentTitle.replace('(!)', ''); // Remove the indicator
       }
     }
 

From 26946a4c225ec58ad4ee61f527c618e874d3903f Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 13 May 2020 16:54:09 -0500
Subject: [PATCH 058/223] Notification indicators, values stored in
 localStorage

---
 src/app/components/Slideout/Slideout.vue      | 10 ++--
 .../components/Slideout/SlideoutSettings.vue  | 34 +++++++++++++-
 src/app/store/chat.vuex.ts                    | 46 +++++++++++++++++--
 3 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 6681627f..cf1defc7 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -22,7 +22,7 @@
         v-if="chatSelected"
       />
       <SlideoutUser v-if="userSelected"/>
-      <SlideoutSettings v-if="settingsSelected" size=14 />
+      <SlideoutSettings v-if="settingsSelected" size=14 indicator="(!)" />
     </span>
   </div>
 </template>
@@ -89,12 +89,14 @@
     @Watch('notifications')
     notificationsChanged() {
       // Notifications indicator in the page title that shows if there are unread messages
-      const notificationIndicator = '(!)';
+      const notificationIndicator: String = ` ${this.$vxm.chat.indicator}` || ' (!)';
       const currentTitle = document.title; // Current title of the page
-      if (this.notifications) { // If notifications were just changed to true
+      const hasIndicator = currentTitle.endsWith(notificationIndicator.toString());
+      if (this.notifications && !hasIndicator) { // If notifications were just changed to true
         document.title += notificationIndicator; // Append indicator to title
       } else { // If notifications just read
-        document.title = currentTitle.replace('(!)', ''); // Remove the indicator
+        const amountToSlice = currentTitle.length - notificationIndicator.length;
+        document.title = currentTitle.slice(0, amountToSlice); // Remove the indicator
       }
     }
 
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index fcf3db91..7e3cd2fc 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -20,6 +20,7 @@
     </section>
     <section>
       <h3>Notifications</h3>
+      <h4>Ignored</h4>
       <table>
         <tr v-for="channel in channels" :key="channel.name">
           <td>{{channel.name}}</td>
@@ -52,6 +53,9 @@
           </td>
         </tr>
       </table>
+      <h4>Indicator</h4>
+      <p>This is the indicator that will appear in the page title if you have notifications</p>
+      <input type=text v-model="indicator">
     </section>
   </div>
 </template>
@@ -71,9 +75,12 @@
     },
   })
   export default class SlideoutSettings extends Vue {
-    @Prop({ required: true })
+    @Prop()
     size!:string; // font size
 
+    @Prop()
+    indicator!:String;
+
     // Gets a list of ignored users
     get ignoredUsers() {
       return this.$vxm.chat.ignoredUsers;
@@ -91,13 +98,23 @@
 
     // When tab opened, display stored value if there is one
     created() {
-      this.size = this.$vxm.chat.fontSize.toString();
+      if (localStorage.fontSize) {
+        this.size = String(Number(JSON.parse(localStorage.fontSize)));
+      } else {
+        this.size = this.$vxm.chat.fontSize.toString();
+      }
+      /* if (localStorage.indicator) {
+        this.indicator = JSON.parse(localStorage.indicator);
+      } else {
+        this.indicator = this.$vxm.chat.indicator;
+      } */
     }
 
     // Updates global font size when input changes
     @Watch('size')
     updateFontSize() {
       this.$vxm.chat.fontSize = parseInt(this.size, 10);
+      localStorage.fontSize = JSON.stringify(this.size);
     }
 
     // Unignore user on list
@@ -119,6 +136,10 @@
           trueChannel.notifications = false;
         }
       }
+      this.$vxm.chat.ignoredChannels[channel] = (trueChannel as Channel).notificationsEnabled;
+      if (localStorage && this.$vxm.chat.ignoredChannels) {
+        localStorage.ignoredChannels = JSON.stringify(this.$vxm.chat.ignoredChannels);
+      }
     }
 
     // If any notifications are enabled
@@ -162,6 +183,14 @@
         }
       });
     }
+
+    @Watch('indicator')
+    indicatorChanged() {
+      if (localStorage) {
+        localStorage.indicator = JSON.stringify(this.indicator);
+      }
+      this.$vxm.chat.indicator = this.indicator;
+    }
   }
 </script>
 <style scoped>
@@ -191,6 +220,7 @@ button { /* Unignore user button */
   padding:5px;
   padding-left:20px;
   height:calc(100% - 50px);
+  overflow-y:auto;
 }
 
 ::-webkit-scrollbar { /* Scrollbar track */
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 1b821717..8395f923 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -90,6 +90,10 @@ export default class ChatModule extends VuexModule {
 
   broadcast: BroadcastChannel<BroadcastMessage>; // For communication between tabs/windows
 
+  ignoredChannels: {[channel:string]:boolean};
+
+  indicator!: String;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -110,6 +114,11 @@ export default class ChatModule extends VuexModule {
       When a tab receives a message, it unignores the channel. */
       this.readChannel(ev.message);
     };
+    this.ignoredChannels = {};
+    channelNames.forEach(e => {
+      const channel = this.channels[e];
+      this.ignoredChannels[e] = (channel as Channel)?.notificationsEnabled;
+    });
   }
 
   channelWithName(name:string) {
@@ -196,11 +205,38 @@ export default class ChatModule extends VuexModule {
     this.currentUser = new User(username, uid);
     this.workbranch = workbranch;
 
-    if (localStorage && localStorage.ignoredUsers) {
-      try {
-        this.ignoredUsers = JSON.parse(localStorage.ignoredUsers);
-      } catch {
-        console.error('Encountered an error while parsing the local data of ignored users');
+    if (localStorage) {
+      if (localStorage.ignoredUsers) {
+        try {
+          this.ignoredUsers = JSON.parse(localStorage.ignoredUsers);
+        } catch {
+          console.error('Encountered an error while parsing the local data of ignored users');
+        }
+      }
+      if (localStorage.fontSize) {
+        try {
+          this.fontSize = Number(localStorage.fontSize);
+        } catch {
+          console.error('Encountered an error while converting the local data of font size');
+        }
+      }
+      if (localStorage.ignoredChannels) {
+        try {
+          const ignored = JSON.parse(localStorage.ignoredChannels);
+          Object.values(this.channels).forEach(e => {
+            const eAsChannel = e as Channel;
+            eAsChannel.notificationsEnabled = ignored[eAsChannel.name];
+          });
+        } catch {
+          console.error('Encountered an error while parsing the local data of notifications settings');
+        }
+      }
+      if (localStorage.indicator) {
+        try {
+          this.indicator = JSON.parse(localStorage.indicator);
+        } catch {
+          console.error('Encountered an error while parsing the local data of indicator text');
+        }
       }
     }
 

From 93857b2c08b7631eacb4b08c232d5d33a1b55902 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 14 May 2020 10:19:01 -0500
Subject: [PATCH 059/223] Fixed mutating props error and uncommented code that
 was necessary

---
 src/app/App.vue                                  |  3 +--
 src/app/components/Slideout/Slideout.vue         |  2 +-
 src/app/components/Slideout/SlideoutSettings.vue | 10 ++++------
 src/app/store/chat.vuex.ts                       |  2 +-
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index ddbd777e..12bad06c 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -23,8 +23,7 @@
         <ReportDialog ref="reportDialog"/>
       </div>
     </transition>
-    <div id="current-tab">{{currentTab}}
-    </div>
+    <div id="current-tab">{{currentTab}} </div>
     <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
     <OpenWindowButton v-model="fullSize"/>
   </div>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index cf1defc7..29e7c3bd 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -22,7 +22,7 @@
         v-if="chatSelected"
       />
       <SlideoutUser v-if="userSelected"/>
-      <SlideoutSettings v-if="settingsSelected" size=14 indicator="(!)" />
+      <SlideoutSettings v-if="settingsSelected" />
     </span>
   </div>
 </template>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 7e3cd2fc..44437c91 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -75,11 +75,9 @@
     },
   })
   export default class SlideoutSettings extends Vue {
-    @Prop()
-    size!:string; // font size
+    size:string = '14'; // font size
 
-    @Prop()
-    indicator!:String;
+    indicator:string = '(!)';
 
     // Gets a list of ignored users
     get ignoredUsers() {
@@ -103,11 +101,11 @@
       } else {
         this.size = this.$vxm.chat.fontSize.toString();
       }
-      /* if (localStorage.indicator) {
+      if (localStorage.indicator) {
         this.indicator = JSON.parse(localStorage.indicator);
       } else {
         this.indicator = this.$vxm.chat.indicator;
-      } */
+      }
     }
 
     // Updates global font size when input changes
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 8395f923..959f6eb0 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -92,7 +92,7 @@ export default class ChatModule extends VuexModule {
 
   ignoredChannels: {[channel:string]:boolean};
 
-  indicator!: String;
+  indicator!: string;
 
   constructor() {
     super();

From 0fb0a7bbe709db046ac0ac0d51e7e671df9cdb8d Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 14 May 2020 10:30:11 -0500
Subject: [PATCH 060/223] Minor stylign

---
 src/app/components/Slideout/SlideoutSettings.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 44437c91..78b23e4d 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -240,4 +240,7 @@ td { /* Table cell in notifications settings section */
 .footer { /* Enable and disable notifications buttons */
   border:none;
 }
+table {
+  margin-top:2px;
+}
 </style>

From acb9228b079610dd0271383d5b9d3e9ac90963c9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 15 May 2020 15:36:31 -0500
Subject: [PATCH 061/223] Username colors

---
 src/app/App.vue                               | 347 +++++++++---------
 src/app/components/ColorPicker.vue            | 211 +++++++++++
 .../components/Slideout/SlideoutSettings.vue  |   6 +
 src/app/store/chat.vuex.ts                    | 155 ++++----
 4 files changed, 470 insertions(+), 249 deletions(-)
 create mode 100644 src/app/components/ColorPicker.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 12bad06c..3f2b866b 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,14 +1,10 @@
 <template>
   <div
     id="eterna-chat"
-    style="overflow-y:hidden;"
-    :class="{ eternaChatFull:fullSized, eternaChatNormal:!fullSized, minimizedChat:minimized}"
+    style="overflow-y: hidden;"
+    :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
   >
-    <slideout
-      style="z-index:1;"
-      :minimizedValue="!minimized"
-    >
-    </slideout>
+    <slideout style="z-index: 1;" :minimizedValue="!minimized"></slideout>
     <transition name="fade">
       <div class="chat-content" v-if="!minimized">
         <MessagePane
@@ -20,12 +16,12 @@
           @postMessage="postMessage($event, channel.name)"
         />
         <ConnectingPopup />
-        <ReportDialog ref="reportDialog"/>
+        <ReportDialog ref="reportDialog" />
       </div>
     </transition>
-    <div id="current-tab">{{currentTab}} </div>
+    <div id="current-tab">{{ currentTab }}</div>
     <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
-    <OpenWindowButton v-model="fullSize"/>
+    <OpenWindowButton v-model="fullSize" />
   </div>
 </template>
 
@@ -40,197 +36,204 @@
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
 
-  @Component({
-    components: {
-      Slideout,
-      ReportDialog,
-      ConnectingPopup,
-      MessagePane,
-      MinimizationTriangle,
-      OpenWindowButton,
-    },
-  })
+@Component({
+  components: {
+    Slideout,
+    ReportDialog,
+    ConnectingPopup,
+    MessagePane,
+    MinimizationTriangle,
+    OpenWindowButton,
+  },
+})
   export default class App extends Vue {
-    @Prop()
-    username!: string;
+  @Prop()
+  username!: string;
 
-    @Prop()
-    workbranch!: string;
+  @Prop()
+  workbranch!: string;
 
-    @Prop()
-    uid!: string;
+  @Prop()
+  uid!: string;
 
-    minimization = false;
+  minimization = false;
 
-    fullSize = false;
+  fullSize = false;
 
-    // For text in top bar
-    get currentTab() {
-      return this.$vxm.chat.chatChannel;
-    }
-
-    // Gets current chat tab
-    get activeTab() {
-      return this.$vxm.chat.tab;
-    }
-
-    $refs!: {
-      reportDialog: ReportDialog;
-    };
-
-    get messageTabs() {
-      return Object.values(this.$vxm.chat.channels).map(channel => channel!);
-    }
-
-    get minimized() {
-      return this.minimization;
-    }
-
-    get fullSized() {
-      return this.fullSize;
-    }
-
-    postMessage(rawMessage: string, channel: string) {
-      this.$vxm.chat.sendMessage({ rawMessage, channel });
-       // When user sends a message, make sure it doesn't notify itself
-      this.$vxm.chat.readChannel(channel);
-    }
+  // For text in top bar
+  get currentTab() {
+    return this.$vxm.chat.chatChannel;
+  }
 
-    mounted() {
-      this.$vxm.chat.init({ username: this.username, workbranch: this.workbranch, uid: this.uid });
-    }
+  // Gets current chat tab
+  get activeTab() {
+    return this.$vxm.chat.tab;
+  }
 
-    created() {
-      this.$vxm.chat.$subscribe('openReportModal', payload => {
-        this.$refs.reportDialog.open(payload);
-      });
-    }
+  $refs!: {
+    reportDialog: ReportDialog;
+  };
 
-    @Watch('minimized')
-    minimizedChanged() {
-      this.fullSize = false;
-    }
+  get messageTabs() {
+    return Object.values(this.$vxm.chat.channels).map((channel) => channel!);
   }
-</script>
 
-<style lang="scss">
-  @import '~vue-context/src/sass/vue-context';
-  textarea {
-    border-radius: 2px;
-    font-family: "Open Sans", "Helvetica Neue", Arial, Gulim;
-    font-size: 0.85rem;
-    border: 1px solid rgb(169, 169, 169);
-    width: calc(100% - 10px);
-    font-size: 14px !important;
+  get minimized() {
+    return this.minimization;
   }
-</style>
 
-<style lang="scss" scoped>
-  #eterna-chat {
-    font-family: "Open Sans", "Open Sans", Arial, Gulim;
-    font-size: 14px;
-    font-weight: 300;
-    background-color:#043468;
-    position:relative; /* Makes sure everything is placed with respect to it, not to its parent */
-    top:0px;
-    left:0px;
-    transition:height 200ms;
+  get fullSized() {
+    return this.fullSize;
   }
 
-  .eternaChatNormal {
-    width:100%;
-    height:100%;
-    animation: growNormal 1s;
+  postMessage(rawMessage: string, channel: string) {
+    this.$vxm.chat.sendMessage({ rawMessage, channel });
+    // When user sends a message, make sure it doesn't notify itself
+    this.$vxm.chat.readChannel(channel);
   }
 
-  .fade-enter-active,
-  .fade-leave-active {
-    transform-origin: top center;
-    transition: 200ms;
+  mounted() {
+    this.$vxm.chat.init({
+      username: this.username,
+      workbranch: this.workbranch,
+      uid: this.uid,
+    });
   }
 
-  .fade-enter, .fade-leave-to
-  {
-    transform-origin: top center;
-    transform: scaleY(0);
-    //Moves everything up without interfering with top bar.
+  created() {
+    this.$vxm.chat.$subscribe('openReportModal', (payload) => {
+      this.$refs.reportDialog.open(payload);
+    });
   }
 
-  .chat-content {
-    border: solid #0405224b 2px;
-    border-radius:15px;
-    height: calc(100% - 54px); //Account for top bar and border
-    position: absolute;
-    top:40px;
-    left:8px;
-    width:calc(100% - 20px); //Account for border
-    color: #c0dce7;
-    background-color:#05224b;
-    transform-origin: top center;
+  @Watch('minimized')
+  minimizedChanged() {
+    this.fullSize = false;
   }
-  .minimizationTriangle { // Minimization button
-    position:absolute;
-    top:0px;
-    margin-top:2.5px;
-    right:5px;
   }
-  .open-window { //Link that opens chat in new window
-    position:absolute;
-    top:0px;
-    margin-top:2.5px;
-    right:39px;
-  }
-  #current-tab { //Text on the top bar that says which chat channel the user is in
-    position: absolute;
-    right:5px;
-    font-family:'Open Sans','Century Gothic','Didact Gothic','Arial',sans-serif;
-    padding-top:0px;
-    font-size:24px;
-    top:1px;
-    width:calc(100% - 48px);
-    float:right;
-    text-align: left;
-    z-index: 0; // Covered by slideout
-    height: 30px;
+</script>
+
+<style lang="scss">
+@import "~vue-context/src/sass/vue-context";
+textarea {
+  border-radius: 2px;
+  font-family: "Open Sans", "Helvetica Neue", Arial, Gulim;
+  font-size: 0.85rem;
+  border: 1px solid rgb(169, 169, 169);
+  width: calc(100% - 10px);
+  font-size: 14px !important;
+}
+</style>
+
+<style lang="scss" scoped>
+#eterna-chat {
+  font-family: "Open Sans", "Open Sans", Arial, Gulim;
+  font-size: 14px;
+  font-weight: 300;
+  background-color: #043468;
+  position: relative; /* Makes sure everything is placed with respect to it, not to its parent */
+  top: 0px;
+  left: 0px;
+  transition: height 200ms;
+}
+
+.eternaChatNormal {
+  width: 100%;
+  height: 100%;
+  animation: growNormal 1s;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transform-origin: top center;
+  transition: 200ms;
+}
+
+.fade-enter,
+.fade-leave-to {
+  transform-origin: top center;
+  transform: scaleY(0);
+  //Moves everything up without interfering with top bar.
+}
+
+.chat-content {
+  border: solid #0405224b 2px;
+  border-radius: 15px;
+  height: calc(100% - 54px); //Account for top bar and border
+  position: absolute;
+  top: 40px;
+  left: 8px;
+  width: calc(100% - 20px); //Account for border
+  color: #c0dce7;
+  background-color: #05224b;
+  transform-origin: top center;
+}
+.minimizationTriangle {
+  // Minimization button
+  position: absolute;
+  top: 0px;
+  margin-top: 2.5px;
+  right: 5px;
+}
+.open-window {
+  //Link that opens chat in new window
+  position: absolute;
+  top: 0px;
+  margin-top: 2.5px;
+  right: 39px;
+}
+#current-tab {
+  //Text on the top bar that says which chat channel the user is in
+  position: absolute;
+  right: 5px;
+  font-family: "Open Sans", "Century Gothic", "Didact Gothic", "Arial", sans-serif;
+  padding-top: 0px;
+  font-size: 24px;
+  top: 1px;
+  width: calc(100% - 48px);
+  float: right;
+  text-align: left;
+  z-index: 0; // Covered by slideout
+  height: 30px;
+}
+@keyframes growFull {
+  from {
+    width: 100%;
+    height: 100%;
+    margin: 0;
   }
-  @keyframes growFull {
-    from {
-      width:100%;
-      height:100%;
-      margin:0
-    }
-    to {
-      width:90vw;
-      height:90vh;
-      margin-right: 5vw;
-      margin-left: 5vw;
-      margin-top: 5vh;
-      margin-bottom: 5vh;
-    }
+  to {
+    width: 90vw;
+    height: 90vh;
+    margin-right: 5vw;
+    margin-left: 5vw;
+    margin-top: 5vh;
+    margin-bottom: 5vh;
   }
-  @keyframes growNormal {
-    to {
-      width:100%;
-      height:100%;
-      margin:0
-    }
-    from {
-      width:90vw;
-      height:90vh;
-      margin-right: 5vw;
-      margin-left: 5vw;
-      margin-top: 5vh;
-      margin-bottom: 5vh;
-    }
+}
+@keyframes growNormal {
+  to {
+    width: 100%;
+    height: 100%;
+    margin: 0;
   }
-  .eternaChatFull {
-    width:90vw;
-    height:90vh;
+  from {
+    width: 90vw;
+    height: 90vh;
     margin-right: 5vw;
     margin-left: 5vw;
     margin-top: 5vh;
     margin-bottom: 5vh;
-    box-shadow: 0 0 2vw 20vw rgba(4,52,104,0.5);
-    animation: growFull 1s;
   }
+}
+.eternaChatFull {
+  width: 90vw;
+  height: 90vh;
+  margin-right: 5vw;
+  margin-left: 5vw;
+  margin-top: 5vh;
+  margin-bottom: 5vh;
+  box-shadow: 0 0 2vw 20vw rgba(4, 52, 104, 0.5);
+  animation: growFull 1s;
+}
 </style>
diff --git a/src/app/components/ColorPicker.vue b/src/app/components/ColorPicker.vue
new file mode 100644
index 00000000..0b581464
--- /dev/null
+++ b/src/app/components/ColorPicker.vue
@@ -0,0 +1,211 @@
+<template>
+  <div id='picker'>
+    <input id='red' class="slider" v-model="red" type=range min=0 max=255>
+      <p
+        id='red-thumb'
+        class='value-thumb'
+        :style="{ left:`${(red)/5 - 93}px` }"
+      >
+        {{ red }}
+      </p> <br>
+      <input
+        id='green'
+        class="slider"
+        v-model="green"
+        type=range
+        min=0
+        max=255
+        >
+        <p
+            id='green-thumb'
+            class='value-thumb'
+            :style="{ left:`${(green)/5 - 93}px` }"
+        >
+            {{ green }}
+        </p> <br>
+        <input
+            id='blue'
+            class="slider"
+            v-model="blue"
+            type=range
+            min=0
+            max=255
+        >
+        <p id='blue-thumb'
+            class='value-thumb'
+            :style="{ left:`${(blue)/5 - 93}px` }"
+        >
+            {{ blue }}
+        </p> <br>
+        <div id='swatch-container'>
+          <div
+            v-for="color in defaultColors"
+            :key="color"
+            class="swatch"
+            :style="{ backgroundColor:color }"
+            @click="setColor(color)"
+          >
+          </div>
+        </div>
+        <p id='preview' style='background-color:#05224b;' :style="{ color: color }">Preview</p>
+        <p v-show='!validColor' id='warning'>Not enough contrast</p>
+    </div>
+</template>
+<script lang='ts'>
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+
+  @Component
+  export default class ColorPicker extends Vue {
+      red: string = '127';
+
+      blue: string = '127';
+
+      green: string = '127';
+
+      // Colors that appear in the swatches
+      defaultColors = ['#f3a891', '#f3c491', '#f3df91', '#e2f391', '#bef391', '#91f3bc', '#f391ba', '#f39196'];
+
+      // For preview
+      get color() {
+        // If color contrasts well enough with background
+        if (this.validColor) {
+          // Update vuex
+          this.$vxm.chat.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
+            // Set value to localStorage if available
+            if (localStorage) {
+              localStorage.usernameColor = this.$vxm.chat.usernameColor;
+            }
+        }
+        // Sets color of preview test
+        return `rgb(${this.red}, ${this.green}, ${this.blue})`;
+      }
+
+      // Converts an rgb value (number, 0-255) to a hexadecimal
+      colorToHexValue(value:string) {
+        return this.int(value).toString(16).padStart(2, '0');
+      }
+
+      // Convenience function to help avoid 100+ character in line errors
+      int(from:string) {
+        return parseInt(from, 10);
+      }
+
+      // Gets brightness of a color. Used in contrast calculation
+      brightness(r:number, g:number, b:number) {
+        return (299 * r + 587 * g + 114 * b) / 1000;
+      }
+
+      // Determines whether color contrasts well with background
+      get validColor() {
+        const backgroundValue = this.brightness(4, 52, 104);
+        const colorValue = this.brightness(this.redInt, this.greenInt, this.blueInt);
+        return (backgroundValue - colorValue) < 0;
+      }
+
+      // Value of this.red as an interger. Another convenience function
+      get redInt() {
+        return this.int(this.red);
+      }
+
+      get greenInt() {
+        return this.int(this.green);
+      }
+
+      get blueInt() {
+        return this.int(this.blue);
+      }
+
+      // Sets color to a hex string. Used by color swatches.
+      setColor(hex:string) {
+        this.red = parseInt(hex.substring(1, 3), 16).toString();
+        this.green = parseInt(hex.substring(3, 5), 16).toString();
+        this.blue = parseInt(hex.substring(5, 7), 16).toString();
+      }
+
+      // Gets value from localStorage or vuex when created
+      created() {
+        let color;
+        if (localStorage.usernameColor) {
+          color = localStorage.usernameColor;
+        } else {
+          color = this.$vxm.chat.usernameColor;
+        }
+        // Converting hex to decimal
+        this.red = parseInt(color.substring(1, 3), 16).toString();
+        this.green = parseInt(color.substring(3, 5), 16).toString();
+        this.blue = parseInt(color.substring(5, 7), 16).toString();
+    }
+  }
+</script>
+<style>
+  #preview { /* Preview text */
+    width: fit-content;
+    padding:2px;
+    margin-top:5px;
+  }
+  #warning { /* Not enough contrast text */
+    color:#f39c12;
+  }
+  .slider { /* Sliders for color values */
+    -webkit-appearance: none;
+    appearance: none;
+    outline: none;
+    border: none;
+    border-radius:2px;
+    height:15px;
+    margin:2px;
+    margin-left:0px;
+    width:90px;
+  }
+  .slider::-webkit-slider-thumb { /* Draggable part of slider */
+    -webkit-appearance: none;
+    appearance: none;
+    background-color:#7b8a8b;
+    width:40px;
+    height:15px;
+  }
+  .slider::-moz-range-thumb { /* Draggable part of slider (for firefox compatibility) */
+    background-color:#7b8a8b;
+    width:10px;
+    height:15px;
+  }
+  .slider:focus { /* Avoids unwanted outlines */
+    outline:none;
+    border:none;
+  }
+  #red { /* Sets gradient for red slider */
+    background:-webkit-linear-gradient(left,#200,#a00);
+  }
+  #green { /* Sets gradient for green slider */
+    background:-webkit-linear-gradient(left,#020,#0a0);
+  }
+  #blue { /* Sets gradient for blue slider */
+    background:-webkit-linear-gradient(left,#002,#00a);
+  }
+  /* Overlays that show the value of the slider on top of the draggable part of the slider */
+  .value-thumb {
+    position:relative;
+    /* Disables clicks or highlights to the text, so they 'pass through' to the slider */
+    pointer-events:none;
+    vertical-align:top;
+    overflow-x:hidden;
+    text-align:center;
+    margin-right:0px;
+    width:40px;
+    border-radius:2px;
+    display:inline-block;
+  }
+  .swatch { /* Swatch colors */
+    width:25px;
+    height:15px;
+    margin:5px;
+  }
+  #swatch-container { /* Container for swatches */
+    display: grid;
+    grid-template-columns: 35px 35px 35px 35px;
+    grid-template-rows: 25px 25px;
+    margin-left:-5px;
+  }
+</style>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 78b23e4d..7879de25 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -57,6 +57,10 @@
       <p>This is the indicator that will appear in the page title if you have notifications</p>
       <input type=text v-model="indicator">
     </section>
+    <section>
+      <h3>Username Color</h3>
+      <ColorPicker />
+    </section>
   </div>
 </template>
 <script lang="ts">
@@ -68,10 +72,12 @@
   import SlideoutButton from './SlideoutButton.vue';
   import Slideout from './Slideout.vue';
   import { Channel } from '../../store/chat.vuex';
+  import ColorPicker from '../ColorPicker.vue';
   @Component({
     components: {
       Username,
       ConnectButton,
+      ColorPicker,
     },
   })
   export default class SlideoutSettings extends Vue {
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 959f6eb0..1c2adf60 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -21,12 +21,12 @@ const VuexModule = createModule({
 });
 
 interface Channel {
-  postedMessages: Message[],
-  name: string,
-  banned: BanStatus,
-  maxHistoryMessages: number,
-  notifications: boolean,
-  notificationsEnabled: boolean,
+  postedMessages: Message[];
+  name: string;
+  banned: BanStatus;
+  maxHistoryMessages: number;
+  notifications: boolean;
+  notificationsEnabled: boolean;
 }
 
 class ConnectionData {
@@ -74,7 +74,7 @@ export default class ChatModule extends VuexModule {
 
   channels: {
     [channelName: string]: Channel | undefined;
-   } = {};
+  } = {};
 
   ignoredUsers: string[] = [];
 
@@ -82,7 +82,7 @@ export default class ChatModule extends VuexModule {
 
   tab: Number = 1; // Selected tab. One of the chat channels
 
-  chatChannel : string = '#off-topic'; // Name of channel display in top bar
+  chatChannel: string = '#off-topic'; // Name of channel display in top bar
 
   fontSize: Number = 14;
 
@@ -90,10 +90,12 @@ export default class ChatModule extends VuexModule {
 
   broadcast: BroadcastChannel<BroadcastMessage>; // For communication between tabs/windows
 
-  ignoredChannels: {[channel:string]:boolean};
+  ignoredChannels: { [channel: string]: boolean };
 
   indicator!: string;
 
+  usernameColor: string = ''; // Color of username
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -115,18 +117,18 @@ export default class ChatModule extends VuexModule {
       this.readChannel(ev.message);
     };
     this.ignoredChannels = {};
-    channelNames.forEach(e => {
+    channelNames.forEach((e) => {
       const channel = this.channels[e];
       this.ignoredChannels[e] = (channel as Channel)?.notificationsEnabled;
     });
   }
 
-  channelWithName(name:string) {
+  channelWithName(name: string) {
     return this.channels[name];
   }
 
   @mutation
-  readChannel(channel:string) {
+  readChannel(channel: string) {
     // Makes sure channel name corresponds to a channel
     const trueChannel = this.channels[channel];
     if (trueChannel) {
@@ -138,7 +140,7 @@ export default class ChatModule extends VuexModule {
   }
 
   @mutation
-  notify(channel:string) {
+  notify(channel: string) {
     // Again, making sure there is an actual channel with the name
     const trueChannel = this.channels[channel];
     if (trueChannel) {
@@ -159,7 +161,7 @@ export default class ChatModule extends VuexModule {
   }
 
   @mutation
-  addUser({ nick, uid }: { nick: string, uid: string }) {
+  addUser({ nick, uid }: { nick: string; uid: string }) {
     const username = User.parseUsername(nick);
     if (!(username in this.connectedUsers)) {
       Vue.set(this.connectedUsers, username, new User(username, uid));
@@ -186,8 +188,13 @@ export default class ChatModule extends VuexModule {
   }
 
   @mutation
-  openReportModal({ message, defaults }:
-                  { message: Message, defaults: {ignore: boolean, report: boolean} }) {
+  openReportModal({
+    message,
+    defaults,
+  }: {
+    message: Message;
+    defaults: { ignore: boolean; report: boolean };
+  }) {
     // Subscribed to in the report modal file
   }
 
@@ -201,7 +208,7 @@ export default class ChatModule extends VuexModule {
   }
 
   @action()
-  async init({ username, workbranch, uid }: { username: string, workbranch: string, uid: string}) {
+  async init({ username, workbranch, uid }: { username: string; workbranch: string; uid: string }) {
     this.currentUser = new User(username, uid);
     this.workbranch = workbranch;
 
@@ -213,29 +220,17 @@ export default class ChatModule extends VuexModule {
           console.error('Encountered an error while parsing the local data of ignored users');
         }
       }
-      if (localStorage.fontSize) {
-        try {
-          this.fontSize = Number(localStorage.fontSize);
-        } catch {
-          console.error('Encountered an error while converting the local data of font size');
-        }
-      }
       if (localStorage.ignoredChannels) {
         try {
           const ignored = JSON.parse(localStorage.ignoredChannels);
-          Object.values(this.channels).forEach(e => {
+          Object.values(this.channels).forEach((e) => {
             const eAsChannel = e as Channel;
             eAsChannel.notificationsEnabled = ignored[eAsChannel.name];
           });
         } catch {
-          console.error('Encountered an error while parsing the local data of notifications settings');
-        }
-      }
-      if (localStorage.indicator) {
-        try {
-          this.indicator = JSON.parse(localStorage.indicator);
-        } catch {
-          console.error('Encountered an error while parsing the local data of indicator text');
+          console.error(
+            'Encountered an error while parsing the local data of notifications settings',
+          );
         }
       }
     }
@@ -264,18 +259,19 @@ export default class ChatModule extends VuexModule {
       transport: Connection,
       ssl: this.connectionData.ssl,
     });
-    client.on('registered', (e) => {
-      Object.values(this.channels).forEach(c => {
-        const channel = client.channel(c!.name);
-        channel.join();
-
-        channel.updateUsers(() => {
-          channel.users.forEach(user => this.addUser({ nick: user.nick, uid: user.ident }));
+    client
+      .on('registered', (e) => {
+        Object.values(this.channels).forEach((c) => {
+          const channel = client.channel(c!.name);
+          channel.join();
+
+          channel.updateUsers(() => {
+            channel.users.forEach((user) => this.addUser({ nick: user.nick, uid: user.ident }));
+          });
         });
-      });
-      this.connectionData.failedAttempts = 0;
-      this.connectionData.connected = true;
-    })
+        this.connectionData.failedAttempts = 0;
+        this.connectionData.connected = true;
+      })
       .on('join', (e) => this.addUser({ nick: e.nick, uid: e.ident }))
       .on('quit', (e) => this.removeUser(e.nick)) // TODO: Change the param
       .on('part', (e) => this.removeUser(e.nick)) // TODO: Change the param
@@ -317,7 +313,7 @@ export default class ChatModule extends VuexModule {
   }
 
   @action()
-  async sendMessage({ rawMessage, channel }: { rawMessage: string, channel: string }) {
+  async sendMessage({ rawMessage, channel }: { rawMessage: string; channel: string }) {
     const postMessage = (
       message: string,
       { user = User.annonymous, isHistory = false, isAction = false } = {},
@@ -382,7 +378,9 @@ export default class ChatModule extends VuexModule {
             this.onDisconnect();
             break;
           case 'spam':
-            for (let i = 0; i < 100; i++) { postMessage(`Spam ${i}`); }
+            for (let i = 0; i < 100; i++) {
+              postMessage(`Spam ${i}`);
+            }
             break;
           case 'me':
             if (!params) {
@@ -429,7 +427,7 @@ export default class ChatModule extends VuexModule {
           } else {
             this.client!.say(channel, message);
           }
-          this.postMessage(new Message(message, channel, this.currentUser, isAction));
+          this.postMessage(new Message(message, channel, this.currentUser, isAction, { 'username-color': this.usernameColor }));
         } else {
           this.postMessage(new Message("Can't send messages because you are banned"));
         } // TODO
@@ -438,7 +436,7 @@ export default class ChatModule extends VuexModule {
   }
 
   @action()
-  async ignoreUser({ username, channel }: {username: string, channel?: string}) {
+  async ignoreUser({ username, channel }: { username: string; channel?: string }) {
     if (!this.ignoredUsers.includes(username)) {
       this.ignoredUsers.push(username);
       localStorage.ignoredUsers = JSON.stringify(this.ignoredUsers);
@@ -454,27 +452,24 @@ export default class ChatModule extends VuexModule {
   }
 
   @action()
-  async reportUser({ userToReport, message, reportComments }:
-    {userToReport: User, message: Message | null, reportComments: string}) {
+  async reportUser({
+    userToReport,
+    message,
+    reportComments,
+  }: {
+    userToReport: User;
+    message: Message | null;
+    reportComments: string;
+  }) {
     const client = this.client!;
     client.say(
       '#ops-notifications',
-      `[REPORT] Reporting ${userToReport.username} (${
-        userToReport.uid
-      }) by ${this.currentUser.username} (${
-        this.currentUser.uid
-      }).\r\n`,
+      `[REPORT] Reporting ${userToReport.username} (${userToReport.uid}) by ${this.currentUser.username} (${this.currentUser.uid}).\r\n`,
     );
     if (message) {
-      client.say(
-        '#ops-notifications',
-        `[REPORTED MESSAGE] ${message.message}\r\n`,
-      );
+      client.say('#ops-notifications', `[REPORTED MESSAGE] ${message.message}\r\n`);
     }
-    client.say(
-      '#ops-notifications',
-      `[REPORT REASON] ${reportComments}\r\n`,
-    );
+    client.say('#ops-notifications', `[REPORT REASON] ${reportComments}\r\n`);
   }
 
   @action()
@@ -484,9 +479,7 @@ export default class ChatModule extends VuexModule {
       const channel = this.channels[params.channel];
       if (channel) channel.banned = BanStatus.BAN_STATUS_BANNED;
       this.postMessage(
-        new Message(
-          `You have been kicked from chat${params.message ? ` - ${params.message}` : ''}`,
-        ),
+        new Message(`You have been kicked from chat${params.message ? ` - ${params.message}` : ''}`),
       );
     } else {
       this.removeUser(username);
@@ -504,19 +497,28 @@ export default class ChatModule extends VuexModule {
     if ((this.slideoutOpen || channel.name !== this.chatChannel) && channel.notificationsEnabled) {
       // Notify the channel
       this.notify(channel.name);
-    } else { // If the user is in the channel and the slideout is closed
+    } else {
+      // If the user is in the channel and the slideout is closed
       this.readChannel(channel.name); // Set the channel to read
     }
     const username = User.parseUsername(nick);
-    const messageObject = new Message(message, target, this.connectedUsers[username], type === 'action', time);
+    const messageObject = new Message(
+      message,
+      target,
+      this.connectedUsers[username],
+      type === 'action',
+      time,
+    );
     if (time) {
       const { postedMessages } = channel;
       // +1 in case the messages arrive out of order
       const maxMessages = Math.min(channel.maxHistoryMessages + 1, postedMessages.length);
       for (let i = 0; i < maxMessages; i++) {
         const historyMessage = postedMessages[postedMessages.length - 1 - i];
-        if (historyMessage.message === message
-              && historyMessage.time.getTime() - messageObject.time.getTime() < 1000) {
+        if (
+          historyMessage.message === message
+          && historyMessage.time.getTime() - messageObject.time.getTime() < 1000
+        ) {
           return;
         }
       }
@@ -542,7 +544,11 @@ export default class ChatModule extends VuexModule {
       if (mode.mode === '+b') {
         const maskUser = mode.param.match(/(.+)!.+/)![1];
         if (this.nick.match(new RegExp(maskUser.replace('*', '.+').replace('^', '\\^')))) {
-          if (mute) { this.onMuted(event.target); } else { this.onBanned(event.target); }
+          if (mute) {
+            this.onMuted(event.target);
+          } else {
+            this.onBanned(event.target);
+          }
         }
       } else if (mode.mode === '-b') {
         const maskUser = mode.param.match(/(.+)!.+/)![1];
@@ -553,7 +559,6 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-
   @action()
   async onIrcError(error: Irc.IrcErrorEventArgs) {
     console.error('IRC Error:', error);
@@ -564,7 +569,6 @@ export default class ChatModule extends VuexModule {
     }
   }
 
-
   @action()
   async onBanned(channelName: string) {
     const channel = this.channels[channelName];
@@ -573,12 +577,11 @@ export default class ChatModule extends VuexModule {
       this.postMessage(new Message('You have been banned', channelName));
     }
     channel.banned = BanStatus.BAN_STATUS_BANNED;
-    Object.values(this.channels).forEach(c => {
+    Object.values(this.channels).forEach((c) => {
       if (c) c.banned = BanStatus.BAN_STATUS_BANNED;
     });
   }
 
-
   @action()
   async onMuted(channelName: string) {
     const channel = this.channels[channelName];
@@ -589,7 +592,6 @@ export default class ChatModule extends VuexModule {
     channel.banned = BanStatus.BAN_STATUS_QUIET;
   }
 
-
   @action()
   async onUnbanned(channelName: string) {
     const channel = this.channels[channelName];
@@ -598,7 +600,6 @@ export default class ChatModule extends VuexModule {
     this.postMessage(new Message('You are now allowed to post in chat', channelName));
   }
 
-
   @action()
   async onDisconnect() {
     const data = this.connectionData;

From 6217bcf9a30aacd7369688307471c7f736ab84b9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 16 May 2020 21:57:50 -0500
Subject: [PATCH 062/223] New settings vuex module. Holds all settings except
 notifications

---
 src/app/components/ColorPicker.vue             |  6 +++---
 src/app/components/Panes/MessagePane.vue       |  2 +-
 .../components/Slideout/SlideoutSettings.vue   |  8 ++++----
 src/app/plugin/plugin.ts                       |  3 +++
 src/app/store/chat.vuex.ts                     |  9 ++-------
 src/app/store/settings.vuex.ts                 | 18 ++++++++++++++++++
 src/app/types/vue.d.ts                         |  3 +++
 7 files changed, 34 insertions(+), 15 deletions(-)
 create mode 100644 src/app/store/settings.vuex.ts

diff --git a/src/app/components/ColorPicker.vue b/src/app/components/ColorPicker.vue
index 0b581464..c5507827 100644
--- a/src/app/components/ColorPicker.vue
+++ b/src/app/components/ColorPicker.vue
@@ -72,10 +72,10 @@
         // If color contrasts well enough with background
         if (this.validColor) {
           // Update vuex
-          this.$vxm.chat.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
+          this.$vxm.settings.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
             // Set value to localStorage if available
             if (localStorage) {
-              localStorage.usernameColor = this.$vxm.chat.usernameColor;
+              localStorage.usernameColor = this.$vxm.settings.usernameColor;
             }
         }
         // Sets color of preview test
@@ -130,7 +130,7 @@
         if (localStorage.usernameColor) {
           color = localStorage.usernameColor;
         } else {
-          color = this.$vxm.chat.usernameColor;
+          color = this.$vxm.settings.usernameColor;
         }
         // Converting hex to decimal
         this.red = parseInt(color.substring(1, 3), 16).toString();
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 02a0cfd7..3ca10c4c 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -75,7 +75,7 @@
 
     // Updates font size
     get fontSize() {
-      return `${this.$vxm.chat.fontSize.toString()}px`;
+      return `${this.$vxm.settings.fontSize.toString()}px`;
     }
 
     send() {
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 7879de25..e7001a01 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -105,19 +105,19 @@
       if (localStorage.fontSize) {
         this.size = String(Number(JSON.parse(localStorage.fontSize)));
       } else {
-        this.size = this.$vxm.chat.fontSize.toString();
+        this.size = this.$vxm.settings.fontSize.toString();
       }
       if (localStorage.indicator) {
         this.indicator = JSON.parse(localStorage.indicator);
       } else {
-        this.indicator = this.$vxm.chat.indicator;
+        this.indicator = this.$vxm.settings.indicator;
       }
     }
 
     // Updates global font size when input changes
     @Watch('size')
     updateFontSize() {
-      this.$vxm.chat.fontSize = parseInt(this.size, 10);
+      this.$vxm.settings.fontSize = parseInt(this.size, 10);
       localStorage.fontSize = JSON.stringify(this.size);
     }
 
@@ -193,7 +193,7 @@
       if (localStorage) {
         localStorage.indicator = JSON.stringify(this.indicator);
       }
-      this.$vxm.chat.indicator = this.indicator;
+      this.$vxm.settings.indicator = this.indicator;
     }
   }
 </script>
diff --git a/src/app/plugin/plugin.ts b/src/app/plugin/plugin.ts
index ef22dca4..26774890 100644
--- a/src/app/plugin/plugin.ts
+++ b/src/app/plugin/plugin.ts
@@ -3,6 +3,7 @@ import { extractVuexModule, createProxy } from 'vuex-class-component';
 import V from 'vue';
 import Chat from '@/main';
 import ChatStore from '../store/chat.vuex';
+import SettingsStore from '../store/settings.vuex';
 
 export default {
   install(Vue: any, options: {store: Store<any> }) {
@@ -10,10 +11,12 @@ export default {
       throw new Error('Please provide vuex store.');
     }
     options.store.registerModule('$_chat', extractVuexModule(ChatStore).chatModule);
+    options.store.registerModule('$_settings', extractVuexModule(SettingsStore).settingsModule);
     Vue.component('eterna-chat', Chat);
     V.prototype.$vxm = {
       ...V.prototype.$vxm,
       chat: createProxy(options.store, ChatStore),
+      settings: createProxy(options.store, SettingsStore),
     };
   },
 };
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 1c2adf60..884cc335 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -10,6 +10,7 @@ import Message from '../types/message';
 import Connection from '@/tools/websocket';
 import BanStatus from '@/types/BanStatus';
 import User from '@/types/user';
+import SettingsModule from './settings.vuex';
 
 // For polyfill
 declare type BroadcastMessage = {
@@ -84,18 +85,12 @@ export default class ChatModule extends VuexModule {
 
   chatChannel: string = '#off-topic'; // Name of channel display in top bar
 
-  fontSize: Number = 14;
-
   slideoutOpen = false; // Whether slideout is open. Updated by App.vue
 
   broadcast: BroadcastChannel<BroadcastMessage>; // For communication between tabs/windows
 
   ignoredChannels: { [channel: string]: boolean };
 
-  indicator!: string;
-
-  usernameColor: string = ''; // Color of username
-
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -427,7 +422,7 @@ export default class ChatModule extends VuexModule {
           } else {
             this.client!.say(channel, message);
           }
-          this.postMessage(new Message(message, channel, this.currentUser, isAction, { 'username-color': this.usernameColor }));
+          this.postMessage(new Message(message, channel, this.currentUser, isAction, { 'username-color': this.$store.state.settingsModule.usernameColor }));
         } else {
           this.postMessage(new Message("Can't send messages because you are banned"));
         } // TODO
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
new file mode 100644
index 00000000..7795e43e
--- /dev/null
+++ b/src/app/store/settings.vuex.ts
@@ -0,0 +1,18 @@
+import { ActionTree, MutationTree, CommitOptions } from 'vuex';
+import * as Irc from 'irc-framework';
+import {
+  createModule, mutation, action, extractVuexModule,
+} from 'vuex-class-component';
+import toBool from 'to-bool';
+import Vue from 'vue';
+
+const VuexModule = createModule({
+  strict: false,
+});
+export default class SettingsModule extends VuexModule {
+  fontSize: Number = 14;
+
+  indicator!: string;
+
+  usernameColor: string = '';
+}
diff --git a/src/app/types/vue.d.ts b/src/app/types/vue.d.ts
index 278a4111..04ed03d4 100644
--- a/src/app/types/vue.d.ts
+++ b/src/app/types/vue.d.ts
@@ -1,16 +1,19 @@
 import { ProxyWatchers } from 'vuex-class-component/dist/interfaces';
 import ChatStore from '../store/chat.vuex';
+import SettingsStore from '../store/settings.vuex';
 
 declare module 'vue/types/vue' {
   interface Vue {
     $vxm: {
       chat: ProxyWatchers & ChatStore,
+      settings: ProxyWatchers & SettingsStore,
     }
   }
 
   interface VueConstructor {
     $vxm: {
       chat: ProxyWatchers & ChatStore,
+      settings: ProxyWatchers & SettingsStore,
     }
   }
 }

From 1cddeeed5527ab71fc86d7fce769236b73a6a698 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 16 May 2020 22:03:22 -0500
Subject: [PATCH 063/223] Fixed indicator bug

---
 package-lock.json                        | 386 +++++++++++++++++++----
 package.json                             |  24 +-
 src/app/components/Slideout/Slideout.vue |   4 +-
 src/app/store/settings.vuex.ts           |   2 +-
 4 files changed, 333 insertions(+), 83 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fd69f5dc..221f208a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1372,6 +1372,14 @@
         "make-error": "^1",
         "ts-node": "^8",
         "tslib": "^1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "@hapi/address": {
@@ -1903,6 +1911,14 @@
         "ansi-styles": "^3.2.1",
         "supports-color": "^5.4.0",
         "tslib": "^1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "@oclif/command": {
@@ -1974,6 +1990,14 @@
         "@oclif/parser": "^3.8.0",
         "debug": "^4.1.1",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "@oclif/errors": {
@@ -2027,6 +2051,14 @@
         "@oclif/linewrap": "^1.0.0",
         "chalk": "^2.4.2",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "@oclif/plugin-autocomplete": {
@@ -2083,6 +2115,12 @@
                 "jsonfile": "^4.0.0",
                 "universalify": "^0.1.0"
               }
+            },
+            "tslib": {
+              "version": "1.13.0",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+              "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+              "dev": true
             }
           }
         },
@@ -2213,6 +2251,14 @@
             "supports-hyperlinks": "^1.0.1",
             "treeify": "^1.1.0",
             "tslib": "^1.9.3"
+          },
+          "dependencies": {
+            "tslib": {
+              "version": "1.13.0",
+              "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+              "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+              "dev": true
+            }
           }
         },
         "indent-string": {
@@ -2278,6 +2324,12 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
         }
       }
     },
@@ -2658,9 +2710,9 @@
       }
     },
     "@types/jest": {
-      "version": "25.2.1",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.1.tgz",
-      "integrity": "sha512-msra1bCaAeEdkSyA0CZ6gW1ukMIvZ5YoJkdXw/qhQdsuuDlFTcEUrUw8CLCPt2rVRUfXlClVvK2gvPs9IokZaA==",
+      "version": "25.2.2",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.2.tgz",
+      "integrity": "sha512-aRctFbG8Pb7DSLzUt/fEtL3q/GKb9mretFuYhRub2J0q6NhzBYbx9HTQzHrWgBNIxYOlxGNVe6Z54cpbUt+Few==",
       "dev": true,
       "requires": {
         "jest-diff": "^25.2.1",
@@ -2744,9 +2796,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "13.13.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.5.tgz",
-      "integrity": "sha512-3ySmiBYJPqgjiHA7oEaIo2Rzz0HrOZ7yrNO5HWyaE5q0lQ3BppDZ3N53Miz8bw2I7gh1/zir2MGVZBvpb1zq9g=="
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.1.tgz",
+      "integrity": "sha512-FAYBGwC+W6F9+huFIDtn43cpy7+SzG+atzRiTfdp3inUKL2hXnd4rG8hylJLIh4+hqrQy1P17kvJByE/z825hA=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -2850,9 +2902,9 @@
       }
     },
     "@types/yargs": {
-      "version": "15.0.4",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.4.tgz",
-      "integrity": "sha512-9T1auFmbPZoxHz0enUFlUuKRy3it01R+hlggyVUMtnCTQRunsQYifnSGb8hET4Xo8yiC0o0r1paW3ud5+rbURg==",
+      "version": "15.0.5",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
+      "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
       "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
@@ -2871,17 +2923,23 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.31.0.tgz",
-      "integrity": "sha512-iIC0Pb8qDaoit+m80Ln/aaeu9zKQdOLF4SHcGLarSeY1gurW6aU4JsOPMjKQwXlw70MvWKZQc6S2NamA8SJ/gg==",
+      "version": "2.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.33.0.tgz",
+      "integrity": "sha512-QV6P32Btu1sCI/kTqjTNI/8OpCYyvlGjW5vD8MpTIg+HGE5S88HtT1G+880M4bXlvXj/NjsJJG0aGcVh0DdbeQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "2.31.0",
+        "@typescript-eslint/experimental-utils": "2.33.0",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
         "tsutils": "^3.17.1"
       },
       "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        },
         "tsutils": {
           "version": "3.17.1",
           "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
@@ -2894,13 +2952,13 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.31.0.tgz",
-      "integrity": "sha512-MI6IWkutLYQYTQgZ48IVnRXmLR/0Q6oAyJgiOror74arUMh7EWjJkADfirZhRsUMHeLJ85U2iySDwHTSnNi9vA==",
+      "version": "2.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.33.0.tgz",
+      "integrity": "sha512-qzPM2AuxtMrRq78LwyZa8Qn6gcY8obkIrBs1ehqmQADwkYzTE1Pb4y2W+U3rE/iFkSWcWHG2LS6MJfj6SmHApg==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "2.31.0",
+        "@typescript-eslint/typescript-estree": "2.33.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       },
@@ -2918,21 +2976,21 @@
       }
     },
     "@typescript-eslint/parser": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.31.0.tgz",
-      "integrity": "sha512-uph+w6xUOlyV2DLSC6o+fBDzZ5i7+3/TxAsH4h3eC64tlga57oMb96vVlXoMwjR/nN+xyWlsnxtbDkB46M2EPQ==",
+      "version": "2.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.33.0.tgz",
+      "integrity": "sha512-AUtmwUUhJoH6yrtxZMHbRUEMsC2G6z5NSxg9KsROOGqNXasM71I8P2NihtumlWTUCRld70vqIZ6Pm4E5PAziEA==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "2.31.0",
-        "@typescript-eslint/typescript-estree": "2.31.0",
+        "@typescript-eslint/experimental-utils": "2.33.0",
+        "@typescript-eslint/typescript-estree": "2.33.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.31.0.tgz",
-      "integrity": "sha512-vxW149bXFXXuBrAak0eKHOzbcu9cvi6iNcJDzEtOkRwGHxJG15chiAQAwhLOsk+86p9GTr/TziYvw+H9kMaIgA==",
+      "version": "2.33.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.33.0.tgz",
+      "integrity": "sha512-d8rY6/yUxb0+mEwTShCQF2zYQdLlqihukNfG9IUlLYz5y1CH6G/9XYbrxQLq3Z14RNvkCC6oe+OcFlyUpwUbkg==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -2940,10 +2998,22 @@
         "glob": "^7.1.6",
         "is-glob": "^4.0.1",
         "lodash": "^4.17.15",
-        "semver": "^6.3.0",
+        "semver": "^7.3.2",
         "tsutils": "^3.17.1"
       },
       "dependencies": {
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        },
         "tsutils": {
           "version": "3.17.1",
           "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
@@ -4070,6 +4140,12 @@
           "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
           "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
           "dev": true
+        },
+        "typescript": {
+          "version": "3.8.3",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+          "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+          "dev": true
         }
       }
     },
@@ -4359,6 +4435,14 @@
       "requires": {
         "@types/node": ">=6",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "@wry/equality": {
@@ -4368,6 +4452,14 @@
       "dev": true,
       "requires": {
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "@xtuc/ieee754": {
@@ -4429,9 +4521,9 @@
       }
     },
     "acorn-jsx": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz",
-      "integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
+      "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
       "dev": true
     },
     "acorn-walk": {
@@ -4657,6 +4749,14 @@
       "requires": {
         "apollo-utilities": "^1.3.3",
         "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-cache-control": {
@@ -4680,6 +4780,14 @@
         "optimism": "^0.10.0",
         "ts-invariant": "^0.4.0",
         "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-client": {
@@ -4696,6 +4804,14 @@
         "ts-invariant": "^0.4.0",
         "tslib": "^1.10.0",
         "zen-observable": "^0.8.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-codegen-core": {
@@ -4886,6 +5002,14 @@
         "ts-invariant": "^0.4.0",
         "tslib": "^1.9.3",
         "zen-observable-ts": "^0.8.21"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-link-context": {
@@ -4896,6 +5020,14 @@
       "requires": {
         "apollo-link": "^1.2.14",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-link-error": {
@@ -4907,6 +5039,14 @@
         "apollo-link": "^1.2.14",
         "apollo-link-http-common": "^0.2.16",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-link-http": {
@@ -4918,6 +5058,14 @@
         "apollo-link": "^1.2.14",
         "apollo-link-http-common": "^0.2.16",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-link-http-common": {
@@ -4929,6 +5077,14 @@
         "apollo-link": "^1.2.14",
         "ts-invariant": "^0.4.0",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-link-persisted-queries": {
@@ -4959,6 +5115,14 @@
       "requires": {
         "apollo-link": "^1.2.14",
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "apollo-server-caching": {
@@ -5092,6 +5256,14 @@
         "fast-json-stable-stringify": "^2.0.0",
         "ts-invariant": "^0.4.0",
         "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "aproba": {
@@ -6045,14 +6217,14 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
-      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
     },
     "bootstrap-vue": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.13.1.tgz",
-      "integrity": "sha512-FF1GLRvvj+TgpLkMG/A8+tCMQfWnfKpsPqt7s097VTX2lZv2/YmyhehRC1qraPHYqT7qQVy48TCxSw1H8hNh3Q==",
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.14.0.tgz",
+      "integrity": "sha512-sqbS7iHYCZEj/dDx4Yaze99HcX6bZjO4bSWZ0xSgJwtWQlbfB2VDJ9Qjzjp9XI8TT32wYNGAMpnXpYjQvv5qyQ==",
       "requires": {
         "@nuxt/opencollective": "^0.3.0",
         "bootstrap": ">=4.4.1 <5.0.0",
@@ -6929,6 +7101,14 @@
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "ci-info": {
@@ -7341,6 +7521,12 @@
           "requires": {
             "ansi-regex": "^4.1.0"
           }
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
         }
       }
     },
@@ -10033,20 +10219,20 @@
       "dev": true
     },
     "espree": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz",
-      "integrity": "sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
+      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
       "dev": true,
       "requires": {
-        "acorn": "^7.1.0",
-        "acorn-jsx": "^5.1.0",
+        "acorn": "^7.1.1",
+        "acorn-jsx": "^5.2.0",
         "eslint-visitor-keys": "^1.1.0"
       },
       "dependencies": {
         "acorn": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
+          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
           "dev": true
         }
       }
@@ -10058,12 +10244,20 @@
       "dev": true
     },
     "esquery": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.0.1.tgz",
-      "integrity": "sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
+      "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
       "dev": true,
       "requires": {
-        "estraverse": "^4.0.0"
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
+          "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==",
+          "dev": true
+        }
       }
     },
     "esrecurse": {
@@ -10100,9 +10294,9 @@
       "dev": true
     },
     "eventemitter3": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
-      "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg=="
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
+      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ=="
     },
     "events": {
       "version": "3.1.0",
@@ -12103,6 +12297,12 @@
           "requires": {
             "tslib": "^1.9.3"
           }
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
         }
       }
     },
@@ -20458,6 +20658,14 @@
       "dev": true,
       "requires": {
         "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "safe-buffer": {
@@ -22514,12 +22722,20 @@
       "dev": true,
       "requires": {
         "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "ts-jest": {
-      "version": "25.5.0",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-25.5.0.tgz",
-      "integrity": "sha512-govrjbOk1UEzcJ5cX5k8X8IUtFuP3lp3mrF3ZuKtCdAOQzdeCM7qualhb/U8s8SWFwEDutOqfF5PLkJ+oaYD4w==",
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.0.0.tgz",
+      "integrity": "sha512-eBpWH65mGgzobuw7UZy+uPP9lwu+tPp60o324ASRX4Ijg8UC5dl2zcge4kkmqr2Zeuk9FwIjvCTOPuNMEyGWWw==",
       "dev": true,
       "requires": {
         "bs-logger": "0.x",
@@ -22529,8 +22745,8 @@
         "lodash.memoize": "4.x",
         "make-error": "1.x",
         "micromatch": "4.x",
-        "mkdirp": "0.x",
-        "semver": "6.x",
+        "mkdirp": "1.x",
+        "semver": "7.x",
         "yargs-parser": "18.x"
       },
       "dependencies": {
@@ -22574,6 +22790,18 @@
             "picomatch": "^2.0.5"
           }
         },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+          "dev": true
+        },
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -22703,9 +22931,9 @@
       }
     },
     "tslib": {
-      "version": "1.11.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.2.tgz",
-      "integrity": "sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.0.tgz",
+      "integrity": "sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g=="
     },
     "tslint": {
       "version": "5.20.1",
@@ -22733,6 +22961,12 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
           "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
           "dev": true
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
         }
       }
     },
@@ -22743,6 +22977,14 @@
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     },
     "tty": {
@@ -22810,9 +23052,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.2.tgz",
+      "integrity": "sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==",
       "dev": true
     },
     "uc.micro": {
@@ -23481,15 +23723,15 @@
       "integrity": "sha512-wTyyjWbrGq/Rc1iivHl9ryI0IcsodRgg46CAGCm6knADDsTj5qJzo2pPDfi6y2nQreg8llJC2lGGts88tMX1sQ=="
     },
     "vue-eslint-parser": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz",
-      "integrity": "sha512-yR0dLxsTT7JfD2YQo9BhnQ6bUTLsZouuzt9SKRP7XNaZJV459gvlsJo4vT2nhZ/2dH9j3c53bIx9dnqU2prM9g==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
+      "integrity": "sha512-Kr21uPfthDc63nDl27AGQEhtt9VrZ9nkYk/NTftJ2ws9XiJwzJJCnCr3AITQ2jpRMA0XPGDECxYH8E027qMK9Q==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
         "eslint-scope": "^5.0.0",
         "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.1.2",
+        "espree": "^6.2.1",
         "esquery": "^1.0.1",
         "lodash": "^4.17.15"
       },
@@ -23652,9 +23894,9 @@
       "integrity": "sha512-Pq72X10Yl5QyQPcX4hR8KdhA2o+qpqzOdwkoIHUnAJfXWLODBKJhUPAnWvKvBcgst0HuHASLDrcFBSQz98gd9g=="
     },
     "vuex": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.3.0.tgz",
-      "integrity": "sha512-1MfcBt+YFd20DPwKe0ThhYm1UEXZya4gVKUvCy7AtS11YAOUR+9a6u4fsv1Rr6ePZCDNxW/M1zuIaswp6nNv8Q=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",
+      "integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
     },
     "vuex-class-component": {
       "version": "2.3.2",
@@ -24485,6 +24727,14 @@
       "requires": {
         "tslib": "^1.9.3",
         "zen-observable": "^0.8.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
       }
     }
   }
diff --git a/package.json b/package.json
index 9543493f..08cc7cfe 100644
--- a/package.json
+++ b/package.json
@@ -12,21 +12,21 @@
   },
   "dependencies": {
     "@types/irc": "^0.3.33",
-    "@types/node": "^13.13.5",
+    "@types/node": "^14.0.1",
     "@types/punycode": "^2.1.0",
     "babel-polyfill": "^6.26.0",
-    "bootstrap": "^4.4.1",
-    "bootstrap-vue": "^2.13.1",
+    "bootstrap": "^4.5.0",
+    "bootstrap-vue": "^2.14.0",
     "broadcast-channel": "^3.1.0",
     "broadcastchannel-polyfill": "^1.0.1",
-    "eventemitter3": "^4.0.0",
+    "eventemitter3": "^4.0.4",
     "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
     "markdown-it": "^10.0.0",
     "stream": "0.0.2",
     "sysend": "^1.3.3",
     "to-bool": "0.0.1",
-    "tslib": "^1.11.2",
+    "tslib": "^2.0.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-context": "^5.1.0",
@@ -36,14 +36,14 @@
     "vue-property-decorator": "^8.4.2",
     "vue-resource": "^1.5.1",
     "vuebar": "0.0.20",
-    "vuex": "^3.3.0",
+    "vuex": "^3.4.0",
     "vuex-class-component": "^2.3.2"
   },
   "devDependencies": {
-    "@types/jest": "^25.2.1",
+    "@types/jest": "^25.2.2",
     "@types/markdown-it": "10.0.1",
-    "@typescript-eslint/eslint-plugin": "^2.31.0",
-    "@typescript-eslint/parser": "^2.31.0",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli": "^4.3.1",
     "@vue/cli-plugin-babel": "^4.3.1",
     "@vue/cli-plugin-e2e-nightwatch": "^4.3.1",
@@ -61,9 +61,9 @@
     "lint-staged": "^10.2.2",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "ts-jest": "^25.5.0",
-    "typescript": "^3.8.3",
-    "vue-eslint-parser": "^7.0.0",
+    "ts-jest": "^26.0.0",
+    "typescript": "^3.9.2",
+    "vue-eslint-parser": "^7.1.0",
     "vue-template-compiler": "^2.6.11"
   },
   "gitHooks": {
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 29e7c3bd..0305a052 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -89,14 +89,14 @@
     @Watch('notifications')
     notificationsChanged() {
       // Notifications indicator in the page title that shows if there are unread messages
-      const notificationIndicator: String = ` ${this.$vxm.chat.indicator}` || ' (!)';
+      const notificationIndicator: string = ` ${this.$vxm.settings.indicator}`;
       const currentTitle = document.title; // Current title of the page
       const hasIndicator = currentTitle.endsWith(notificationIndicator.toString());
       if (this.notifications && !hasIndicator) { // If notifications were just changed to true
         document.title += notificationIndicator; // Append indicator to title
       } else { // If notifications just read
         const amountToSlice = currentTitle.length - notificationIndicator.length;
-        document.title = currentTitle.slice(0, amountToSlice); // Remove the indicator
+        document.title = currentTitle.replace(notificationIndicator, ''); // Remove the indicator
       }
     }
 
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index 7795e43e..5d4871da 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -12,7 +12,7 @@ const VuexModule = createModule({
 export default class SettingsModule extends VuexModule {
   fontSize: Number = 14;
 
-  indicator!: string;
+  indicator: string = ' (!)';
 
   usernameColor: string = '';
 }

From d612f05c0fdf25993ea38aab870ab68df707121a Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 17 May 2020 13:25:51 -0500
Subject: [PATCH 064/223] Split ColorPicker into a folder with two files

---
 package-lock.json                             | 132 ++++++++++-
 src/app/components/ColorPicker.vue            | 211 ------------------
 .../Slideout/ColorPicker/ColorPicker.vue      | 162 ++++++++++++++
 .../Slideout/ColorPicker/ColorSlider.vue      | 110 +++++++++
 src/app/components/Slideout/Slideout.vue      |   9 +-
 .../components/Slideout/SlideoutSettings.vue  |   3 +-
 src/app/store/chat.vuex.ts                    |  10 +-
 7 files changed, 412 insertions(+), 225 deletions(-)
 delete mode 100644 src/app/components/ColorPicker.vue
 create mode 100644 src/app/components/Slideout/ColorPicker/ColorPicker.vue
 create mode 100644 src/app/components/Slideout/ColorPicker/ColorSlider.vue

diff --git a/package-lock.json b/package-lock.json
index 221f208a..e7417eb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23947,14 +23947,136 @@
       }
     },
     "watchpack": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
-      "integrity": "sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.2.tgz",
+      "integrity": "sha512-ymVbbQP40MFTp+cNMvpyBpBtygHnPzPkHqoIwRRj/0B8KhqQwV8LaKjtbaxF2lK4vl8zN9wCxS46IFCU5K4W0g==",
       "dev": true,
       "requires": {
-        "chokidar": "^2.1.8",
+        "chokidar": "^3.4.0",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.0"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "normalize-path": "^3.0.0",
+            "picomatch": "^2.0.4"
+          }
+        },
+        "binary-extensions": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+          "dev": true,
+          "optional": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
+          "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "anymatch": "~3.1.1",
+            "braces": "~3.0.2",
+            "fsevents": "~2.1.2",
+            "glob-parent": "~5.1.0",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.4.0"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "fsevents": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+          "dev": true,
+          "optional": true
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true,
+          "optional": true
+        },
+        "readdirp": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+          "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
+    "watchpack-chokidar2": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz",
+      "integrity": "sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chokidar": "^2.1.8"
       }
     },
     "wbuf": {
diff --git a/src/app/components/ColorPicker.vue b/src/app/components/ColorPicker.vue
deleted file mode 100644
index c5507827..00000000
--- a/src/app/components/ColorPicker.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-  <div id='picker'>
-    <input id='red' class="slider" v-model="red" type=range min=0 max=255>
-      <p
-        id='red-thumb'
-        class='value-thumb'
-        :style="{ left:`${(red)/5 - 93}px` }"
-      >
-        {{ red }}
-      </p> <br>
-      <input
-        id='green'
-        class="slider"
-        v-model="green"
-        type=range
-        min=0
-        max=255
-        >
-        <p
-            id='green-thumb'
-            class='value-thumb'
-            :style="{ left:`${(green)/5 - 93}px` }"
-        >
-            {{ green }}
-        </p> <br>
-        <input
-            id='blue'
-            class="slider"
-            v-model="blue"
-            type=range
-            min=0
-            max=255
-        >
-        <p id='blue-thumb'
-            class='value-thumb'
-            :style="{ left:`${(blue)/5 - 93}px` }"
-        >
-            {{ blue }}
-        </p> <br>
-        <div id='swatch-container'>
-          <div
-            v-for="color in defaultColors"
-            :key="color"
-            class="swatch"
-            :style="{ backgroundColor:color }"
-            @click="setColor(color)"
-          >
-          </div>
-        </div>
-        <p id='preview' style='background-color:#05224b;' :style="{ color: color }">Preview</p>
-        <p v-show='!validColor' id='warning'>Not enough contrast</p>
-    </div>
-</template>
-<script lang='ts'>
-  import {
-    Component, Watch, Prop, Vue,
-  } from 'vue-property-decorator';
-
-  @Component
-  export default class ColorPicker extends Vue {
-      red: string = '127';
-
-      blue: string = '127';
-
-      green: string = '127';
-
-      // Colors that appear in the swatches
-      defaultColors = ['#f3a891', '#f3c491', '#f3df91', '#e2f391', '#bef391', '#91f3bc', '#f391ba', '#f39196'];
-
-      // For preview
-      get color() {
-        // If color contrasts well enough with background
-        if (this.validColor) {
-          // Update vuex
-          this.$vxm.settings.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
-            // Set value to localStorage if available
-            if (localStorage) {
-              localStorage.usernameColor = this.$vxm.settings.usernameColor;
-            }
-        }
-        // Sets color of preview test
-        return `rgb(${this.red}, ${this.green}, ${this.blue})`;
-      }
-
-      // Converts an rgb value (number, 0-255) to a hexadecimal
-      colorToHexValue(value:string) {
-        return this.int(value).toString(16).padStart(2, '0');
-      }
-
-      // Convenience function to help avoid 100+ character in line errors
-      int(from:string) {
-        return parseInt(from, 10);
-      }
-
-      // Gets brightness of a color. Used in contrast calculation
-      brightness(r:number, g:number, b:number) {
-        return (299 * r + 587 * g + 114 * b) / 1000;
-      }
-
-      // Determines whether color contrasts well with background
-      get validColor() {
-        const backgroundValue = this.brightness(4, 52, 104);
-        const colorValue = this.brightness(this.redInt, this.greenInt, this.blueInt);
-        return (backgroundValue - colorValue) < 0;
-      }
-
-      // Value of this.red as an interger. Another convenience function
-      get redInt() {
-        return this.int(this.red);
-      }
-
-      get greenInt() {
-        return this.int(this.green);
-      }
-
-      get blueInt() {
-        return this.int(this.blue);
-      }
-
-      // Sets color to a hex string. Used by color swatches.
-      setColor(hex:string) {
-        this.red = parseInt(hex.substring(1, 3), 16).toString();
-        this.green = parseInt(hex.substring(3, 5), 16).toString();
-        this.blue = parseInt(hex.substring(5, 7), 16).toString();
-      }
-
-      // Gets value from localStorage or vuex when created
-      created() {
-        let color;
-        if (localStorage.usernameColor) {
-          color = localStorage.usernameColor;
-        } else {
-          color = this.$vxm.settings.usernameColor;
-        }
-        // Converting hex to decimal
-        this.red = parseInt(color.substring(1, 3), 16).toString();
-        this.green = parseInt(color.substring(3, 5), 16).toString();
-        this.blue = parseInt(color.substring(5, 7), 16).toString();
-    }
-  }
-</script>
-<style>
-  #preview { /* Preview text */
-    width: fit-content;
-    padding:2px;
-    margin-top:5px;
-  }
-  #warning { /* Not enough contrast text */
-    color:#f39c12;
-  }
-  .slider { /* Sliders for color values */
-    -webkit-appearance: none;
-    appearance: none;
-    outline: none;
-    border: none;
-    border-radius:2px;
-    height:15px;
-    margin:2px;
-    margin-left:0px;
-    width:90px;
-  }
-  .slider::-webkit-slider-thumb { /* Draggable part of slider */
-    -webkit-appearance: none;
-    appearance: none;
-    background-color:#7b8a8b;
-    width:40px;
-    height:15px;
-  }
-  .slider::-moz-range-thumb { /* Draggable part of slider (for firefox compatibility) */
-    background-color:#7b8a8b;
-    width:10px;
-    height:15px;
-  }
-  .slider:focus { /* Avoids unwanted outlines */
-    outline:none;
-    border:none;
-  }
-  #red { /* Sets gradient for red slider */
-    background:-webkit-linear-gradient(left,#200,#a00);
-  }
-  #green { /* Sets gradient for green slider */
-    background:-webkit-linear-gradient(left,#020,#0a0);
-  }
-  #blue { /* Sets gradient for blue slider */
-    background:-webkit-linear-gradient(left,#002,#00a);
-  }
-  /* Overlays that show the value of the slider on top of the draggable part of the slider */
-  .value-thumb {
-    position:relative;
-    /* Disables clicks or highlights to the text, so they 'pass through' to the slider */
-    pointer-events:none;
-    vertical-align:top;
-    overflow-x:hidden;
-    text-align:center;
-    margin-right:0px;
-    width:40px;
-    border-radius:2px;
-    display:inline-block;
-  }
-  .swatch { /* Swatch colors */
-    width:25px;
-    height:15px;
-    margin:5px;
-  }
-  #swatch-container { /* Container for swatches */
-    display: grid;
-    grid-template-columns: 35px 35px 35px 35px;
-    grid-template-rows: 25px 25px;
-    margin-left:-5px;
-  }
-</style>
diff --git a/src/app/components/Slideout/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
new file mode 100644
index 00000000..2a989a5d
--- /dev/null
+++ b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
@@ -0,0 +1,162 @@
+<template>
+  <div id='picker' style="font-size:20px !important">
+    <ColorSlider
+      id='red'
+      gradientStart="#200"
+      gradientEnd="#a00"
+      @sliderChanged="redChanged"
+      colorID="red"
+      ref="red" />
+    <ColorSlider
+      id='green'
+      gradientStart='#020'
+      gradientEnd='#0a0'
+      @sliderChanged="greenChanged"
+      colorID="green"
+      ref="green" />
+    <ColorSlider
+      id='blue'
+      gradientStart='#002'
+      gradientEnd='#00a'
+      @sliderChanged="blueChanged"
+      colorID="blue"
+      ref="blue" />
+      <div id='swatch-container'>
+        <div
+          v-for="color in defaultColors"
+          :key="color"
+          class="swatch"
+          :style="{ backgroundColor:color }"
+          @click="setColor(color)" />
+      </div>
+    <p id='preview' style='background-color:#05224b;' :style="{ color: color }">Preview</p>
+    <p v-show='!validColor' id='warning'>Not enough contrast</p>
+  </div>
+</template>
+<script lang='ts'>
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import ColorSlider from './ColorSlider.vue';
+
+  @Component({
+    components: {
+      ColorSlider,
+    },
+  })
+  export default class ColorPicker extends Vue {
+    $refs!: {
+      red: ColorSlider,
+      green: ColorSlider,
+      blue: ColorSlider,
+    };
+
+    red: string = '127';
+
+    blue: string = '127';
+
+    green: string = '127';
+
+    // Colors that appear in the swatches
+    defaultColors = ['#f3a891', '#f3c491', '#f3df91', '#e2f391', '#bef391', '#91f3bc', '#f391ba', '#f39196'];
+
+    // For preview
+    get color() {
+      // If color contrasts well enough with background
+      if (this.validColor) {
+        // Update vuex
+        this.$vxm.settings.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
+          // Set value to localStorage if available
+          if (localStorage) {
+            localStorage.usernameColor = this.$vxm.settings.usernameColor;
+          }
+        }
+      // Sets color of preview test
+      return `rgb(${this.red}, ${this.green}, ${this.blue})`;
+    }
+
+    // Converts an rgb value (number, 0-255) to a hexadecimal
+    colorToHexValue(value:string) {
+      return this.int(value).toString(16).padStart(2, '0');
+    }
+
+    // Convenience function to help avoid 100+ character in line errors
+    int(from:string) {
+      return parseInt(from, 10);
+    }
+
+    // Gets brightness of a color. Used in contrast calculation
+    brightness(r:number, g:number, b:number) {
+      return (299 * r + 587 * g + 114 * b) / 1000;
+    }
+
+    // Determines whether color contrasts well with background
+    get validColor() {
+      const backgroundValue = this.brightness(4, 52, 104);
+      const colorValue = this.brightness(
+        parseInt(this.red, 10),
+        parseInt(this.green, 10),
+        parseInt(this.blue, 10),
+      );
+      return (backgroundValue - colorValue) < 0;
+    }
+
+    // Sets color to a hex string. Used by color swatches.
+    setColor(hex:string) {
+      this.red = parseInt(hex.substring(1, 3), 16).toString();
+      this.$refs.red.sliderValue = parseInt(hex.substring(1, 3), 16);
+      this.green = parseInt(hex.substring(3, 5), 16).toString();
+      this.$refs.green.sliderValue = parseInt(hex.substring(3, 5), 16);
+      this.blue = parseInt(hex.substring(5, 7), 16).toString();
+      this.$refs.blue.sliderValue = parseInt(hex.substring(5, 7), 16);
+    }
+
+    redChanged(e:string) {
+      this.red = e;
+    }
+
+    greenChanged(e:string) {
+      this.green = e;
+    }
+
+    blueChanged(e:string) {
+      this.blue = e;
+    }
+
+    // Gets value from localStorage or vuex when created
+    created() {
+      let color;
+      if (localStorage.usernameColor) {
+        color = localStorage.usernameColor;
+      } else {
+        color = this.$vxm.settings.usernameColor;
+      }
+      // Converting hex to decimal
+      this.red = parseInt(color.substring(1, 3), 16).toString();
+      this.green = parseInt(color.substring(3, 5), 16).toString();
+      this.blue = parseInt(color.substring(5, 7), 16).toString();
+    }
+  }
+</script>
+<style>
+  #preview { /* Preview text */
+    width: fit-content;
+    padding:2px;
+    margin-top:5px;
+    transition:color 200ms;
+  }
+  #warning { /* Not enough contrast text */
+    color:#f39c12;
+  }
+  .swatch { /* Swatch colors */
+    width:25px;
+    height:15px;
+    margin:5px;
+  }
+  #swatch-container { /* Container for swatches */
+    display: grid;
+    grid-template-columns: 35px 35px 35px 35px;
+    grid-template-rows: 25px 25px;
+    margin-left:-5px;
+  }
+</style>
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
new file mode 100644
index 00000000..dea4e307
--- /dev/null
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class='color-slider-container'>
+    <input
+      class="slider"
+      v-model="sliderValue"
+      type=range min=0 max=255
+      :style='{ background:getGradient()}'>
+    <p
+      class='value-thumb'
+      :style="{ left:calculateOffset() }"
+    >
+      {{ sliderValue }}
+    </p> <br>
+  </div>
+</template>
+<script lang='ts'>
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+
+  @Component
+  export default class ColorSlider extends Vue {
+    sliderValue = 127;
+
+    @Prop() // Starting color for slider gradient
+    gradientStart !: string;
+
+    @Prop() // Ending color for slider gradient
+    gradientEnd !: string;
+
+    @Prop() // Red, green, or blue. Used to fetch value from localStorage/vuex
+    colorID !: string;
+
+    calculateOffset() { // Position of text on slider thumb
+      return `${this.sliderValue / 5 - 93}px`;
+    }
+
+    @Watch('sliderValue') // Updates parent, ColorPicker
+    sliderChanged() {
+      this.$emit('sliderChanged', this.sliderValue);
+    }
+
+    getGradient() {
+      return `-webkit-linear-gradient(left,${this.gradientStart},${this.gradientEnd})`;
+    }
+
+    // Gets value from localStorage or vuex when created
+    created() {
+        let color;
+        if (localStorage.usernameColor) {
+          color = localStorage.usernameColor;
+        } else {
+          color = this.$vxm.settings.usernameColor;
+        }
+        switch (this.colorID) {
+          case 'red':
+            this.sliderValue = parseInt(color.substring(1, 3), 16);
+            break;
+          case 'green':
+            this.sliderValue = parseInt(color.substring(3, 5), 16);
+            break;
+          case 'blue':
+            this.sliderValue = parseInt(color.substring(5, 7), 16);
+            break;
+          default: break;
+        }
+      }
+  }
+</script>
+<style scoped>
+.slider { /* Sliders for color values */
+    -webkit-appearance: none;
+    appearance: none;
+    outline: none;
+    border: none;
+    border-radius:2px;
+    height:15px;
+    margin:2px;
+    margin-left:0px;
+    width:90px;
+  }
+  .slider::-webkit-slider-thumb { /* Draggable part of slider */
+    -webkit-appearance: none;
+    appearance: none;
+    background-color:#7b8a8b;
+    width:40px;
+    height:15px;
+  }
+  .slider::-moz-range-thumb { /* Draggable part of slider (for firefox compatibility) */
+    background-color:#7b8a8b;
+    width:40px;
+    height:15px;
+  }
+  .slider:focus { /* Avoids unwanted outlines */
+    outline:none;
+    border:none;
+  }
+  /* Overlays that show the value of the slider on top of the draggable part of the slider */
+  .value-thumb {
+    position:relative;
+    /* Disables clicks or highlights to the text, so they 'pass through' to the slider */
+    pointer-events:none;
+    vertical-align:top;
+    overflow-x:hidden;
+    text-align:center;
+    width:40px;
+    display:inline-block;
+    margin:0px;
+  }
+</style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 0305a052..e217dd5b 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -90,13 +90,10 @@
     notificationsChanged() {
       // Notifications indicator in the page title that shows if there are unread messages
       const notificationIndicator: string = ` ${this.$vxm.settings.indicator}`;
-      const currentTitle = document.title; // Current title of the page
-      const hasIndicator = currentTitle.endsWith(notificationIndicator.toString());
-      if (this.notifications && !hasIndicator) { // If notifications were just changed to true
-        document.title += notificationIndicator; // Append indicator to title
+      if (this.notifications) { // If notifications were just changed to true
+        document.title = `html-chat${notificationIndicator}`;
       } else { // If notifications just read
-        const amountToSlice = currentTitle.length - notificationIndicator.length;
-        document.title = currentTitle.replace(notificationIndicator, ''); // Remove the indicator
+        document.title = 'html-chat';
       }
     }
 
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index e7001a01..7514cc10 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -72,7 +72,7 @@
   import SlideoutButton from './SlideoutButton.vue';
   import Slideout from './Slideout.vue';
   import { Channel } from '../../store/chat.vuex';
-  import ColorPicker from '../ColorPicker.vue';
+  import ColorPicker from './ColorPicker/ColorPicker.vue';
   @Component({
     components: {
       Username,
@@ -239,7 +239,6 @@ li { /* Remove bullets */
   list-style-type: none;
 }
 td { /* Table cell in notifications settings section */
-  border:solid white 1px;
   padding:4px;
   width:max-content;
 }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 884cc335..ff7c9933 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -286,6 +286,10 @@ export default class ChatModule extends VuexModule {
     this.connect();
   }
 
+  async authenticate(password:string) {
+    this.client?.raw(`OPER ${this.client.user.nick} ${password}`);
+  }
+
   @action()
   async connect() {
     this.client!.connect();
@@ -422,7 +426,11 @@ export default class ChatModule extends VuexModule {
           } else {
             this.client!.say(channel, message);
           }
-          this.postMessage(new Message(message, channel, this.currentUser, isAction, { 'username-color': this.$store.state.settingsModule.usernameColor }));
+          const msg = new Message(message, channel, this.currentUser, isAction);
+          if (this.$store.state.SettingsModule !== undefined) {
+            msg.tags = { 'username-color': this.$store.state.SettingsModule.usernameColor };
+          }
+          this.postMessage(msg);
         } else {
           this.postMessage(new Message("Can't send messages because you are banned"));
         } // TODO

From 0cb66af97daab90bb7e91b0658c508eefe7211b4 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 17 May 2020 13:56:45 -0500
Subject: [PATCH 065/223] Font size applies to settings

---
 src/app/components/HamburgerMenuButton.vue    |  1 -
 .../Slideout/ColorPicker/ColorPicker.vue      | 15 +++++++++---
 .../Slideout/ColorPicker/ColorSlider.vue      |  2 +-
 .../components/Slideout/SlideoutSettings.vue  | 23 +++++++++++++++----
 src/app/components/Slideout/SlideoutUser.vue  |  6 ++++-
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/HamburgerMenuButton.vue
index 8b12d5ea..e3c210da 100644
--- a/src/app/components/HamburgerMenuButton.vue
+++ b/src/app/components/HamburgerMenuButton.vue
@@ -28,7 +28,6 @@
   background-repeat: no-repeat;
   background-size: 50% 45%;
   background-position: bottom 10px left 11px;
-  transition: background-image background-size 1s;
 }
 .notified {
   background-image: url("../assets/hamburger-notification.png");
diff --git a/src/app/components/Slideout/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
index 2a989a5d..e7448680 100644
--- a/src/app/components/Slideout/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id='picker' style="font-size:20px !important">
+  <div id='picker'>
     <ColorSlider
       id='red'
       gradientStart="#200"
@@ -29,8 +29,13 @@
           :style="{ backgroundColor:color }"
           @click="setColor(color)" />
       </div>
-    <p id='preview' style='background-color:#05224b;' :style="{ color: color }">Preview</p>
-    <p v-show='!validColor' id='warning'>Not enough contrast</p>
+    <p
+      id='preview'
+      style='background-color:#05224b;'
+      :style="{ color: color, fontSize:fontSize }" >
+        Preview
+    </p>
+    <p v-show='!validColor' id='warning' :style="{ fontSize:fontSize }">Not enough contrast</p>
   </div>
 </template>
 <script lang='ts'>
@@ -136,6 +141,10 @@
       this.green = parseInt(color.substring(3, 5), 16).toString();
       this.blue = parseInt(color.substring(5, 7), 16).toString();
     }
+
+    get fontSize() {
+      return `${this.$vxm.settings.fontSize}px`;
+    }
   }
 </script>
 <style>
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
index dea4e307..b527169e 100644
--- a/src/app/components/Slideout/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -100,11 +100,11 @@
     position:relative;
     /* Disables clicks or highlights to the text, so they 'pass through' to the slider */
     pointer-events:none;
-    vertical-align:top;
     overflow-x:hidden;
     text-align:center;
     width:40px;
     display:inline-block;
     margin:0px;
+    font-size: 14px !important;
   }
 </style>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 7514cc10..404e0721 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="settings-wrapper">
+  <div id="settings-wrapper" :style="{ fontSize:`${size}px` }">
     <section>
       <h3>Text Size</h3>
       <input v-model="size" type=number min=10 max=22>
@@ -10,10 +10,20 @@
       <ul>
         <li v-for="user in ignoredUsers" :key="user.Username">
           {{ user }}
-          <button class='unignore-user' v-on:click="unignore(user)">Unignore</button>
+          <button
+            :style="{ fontSize:`${size * 11 / 14}px` }"
+            class='unignore-user'
+            v-on:click="unignore(user)" >
+            Unignore
+          </button>
         </li>
         <li v-show="!anyIgnoredUsers">No users ignored</li>
-        <button class='unignore-user' v-on:click="unignore('*')" v-show="anyIgnoredUsers" >
+        <button
+          :style="{ fontSize:`${size * 11 / 14}px` }"
+          class='unignore-user'
+          v-on:click="unignore('*')"
+          v-show="anyIgnoredUsers"
+        >
           Unignore All
         </button>
       </ul>
@@ -28,6 +38,7 @@
             <button
               style="width:calc(100% - 6px)"
               @click="toggleNotificationsEnabled(channel.name)"
+              :style="{ fontSize:`${size * 11 / 14}px` }"
             >
               {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
             </button>
@@ -38,6 +49,7 @@
             <button style="width:width:calc(100% - 6px)"
               :disabled="anyNotificationsDisabled"
               @click="enableAll"
+              :style="{ fontSize:`${size * 11 / 14}px` }"
             >
               Enable all
             </button>
@@ -47,6 +59,7 @@
               style="width:width:calc(100% - 6px)"
               :disabled="anyNotificationsEnabled"
               @click="disableAll"
+              :style="{ fontSize:`${size * 11 / 14}px` }"
             >
               Disable all
             </button>
@@ -54,7 +67,9 @@
         </tr>
       </table>
       <h4>Indicator</h4>
-      <p>This is the indicator that will appear in the page title if you have notifications</p>
+      <p>
+        This is the indicator that will appear in the page title if you have notifications
+      </p>
       <input type=text v-model="indicator">
     </section>
     <section>
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
index 6b6e20a5..2f56b61a 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="user-wrapper">
+  <div id="user-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <h3>Online ({{userCount}})</h3>
     <ul>
       <li v-for="user in connectedUsers" :key="user.username">
@@ -28,6 +28,10 @@
     get userCount() {
       return Object.keys(this.$vxm.chat.connectedUsers).length;
     }
+
+    get fontSize() {
+      return this.$vxm.settings.fontSize;
+    }
   }
 </script>
 <style scoped>

From a7195ff40f0c522bb6666588e79e4bff061fc1c9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 17 May 2020 14:15:14 -0500
Subject: [PATCH 066/223] Font size restraints improved

---
 .../components/Slideout/SlideoutSettings.vue  | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 404e0721..3f2f4b84 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,9 +1,14 @@
 <template>
-  <div id="settings-wrapper" :style="{ fontSize:`${size}px` }">
+  <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <section>
       <h3>Text Size</h3>
       <input v-model="size" type=number min=10 max=22>
       <p id='font-size-p'>Default is 14</p>
+      <p
+        id='font-warning'
+        v-show="size < 10 || size > 22" >
+        Font size must be a number, greater than 10, and less than 22
+      </p>
     </section>
     <section>
       <h3>Ignored List</h3>
@@ -11,7 +16,7 @@
         <li v-for="user in ignoredUsers" :key="user.Username">
           {{ user }}
           <button
-            :style="{ fontSize:`${size * 11 / 14}px` }"
+            :style="{ fontSize:`${fontSize * 11 / 14}px` }"
             class='unignore-user'
             v-on:click="unignore(user)" >
             Unignore
@@ -19,7 +24,7 @@
         </li>
         <li v-show="!anyIgnoredUsers">No users ignored</li>
         <button
-          :style="{ fontSize:`${size * 11 / 14}px` }"
+          :style="{ fontSize:`${fontSize * 11 / 14}px` }"
           class='unignore-user'
           v-on:click="unignore('*')"
           v-show="anyIgnoredUsers"
@@ -38,7 +43,7 @@
             <button
               style="width:calc(100% - 6px)"
               @click="toggleNotificationsEnabled(channel.name)"
-              :style="{ fontSize:`${size * 11 / 14}px` }"
+              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
             >
               {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
             </button>
@@ -49,7 +54,7 @@
             <button style="width:width:calc(100% - 6px)"
               :disabled="anyNotificationsDisabled"
               @click="enableAll"
-              :style="{ fontSize:`${size * 11 / 14}px` }"
+              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
             >
               Enable all
             </button>
@@ -59,7 +64,7 @@
               style="width:width:calc(100% - 6px)"
               :disabled="anyNotificationsEnabled"
               @click="disableAll"
-              :style="{ fontSize:`${size * 11 / 14}px` }"
+              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
             >
               Disable all
             </button>
@@ -132,8 +137,25 @@
     // Updates global font size when input changes
     @Watch('size')
     updateFontSize() {
-      this.$vxm.settings.fontSize = parseInt(this.size, 10);
-      localStorage.fontSize = JSON.stringify(this.size);
+       // Only update if valid font size
+      if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 22) {
+        this.$vxm.settings.fontSize = parseInt(this.size, 10);
+        localStorage.fontSize = JSON.stringify(this.size);
+      }
+    }
+
+    get fontSize() {
+      const numSize = parseInt(this.size, 10); // Font size as an int
+      if (numSize >= 10 && numSize <= 22) {
+        return numSize;
+      }
+      if (numSize >= 22) {
+        return 22; // If font size greater than 22, set to maximum of 22
+      }
+      if (numSize <= 10) {
+        return 10; // If font size less than 10, set to minimum of 10
+      }
+      return 14; // If nothing else works, make it the default, 14
     }
 
     // Unignore user on list
@@ -217,6 +239,9 @@
   vertical-align: mid;
   margin-left:2px;
 }
+#font-warning {
+  color:#f39c12;
+}
 section { /* 'Block' of settings */
   margin-bottom:15px;
 }

From 84d5dd07b361d49db9134b4c794b817f56017d3a Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 17 May 2020 15:02:01 -0500
Subject: [PATCH 067/223] Buttons are styled

---
 src/app/App.vue                               | 84 +++++++++++++++++++
 .../components/Slideout/SlideoutSettings.vue  | 10 ++-
 src/app/components/SlideoutButtonChat.vue     |  1 +
 3 files changed, 92 insertions(+), 3 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 3f2b866b..cfc8a39c 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -124,7 +124,91 @@ textarea {
   font-size: 14px !important;
 }
 </style>
+<style lang="scss">
+.green-button {
+  margin-bottom: 5px !important;
+  padding: 4px 7px !important;
+}
+
+.green-button,
+.green-button-interactive,
+.green-button-interactive2D {
+    background-color: #4FB748;
+    font-weight: normal;
+    position: relative;
+    text-align: center;
+    font-size: 12px;
+    padding: 0px;
+    text-transform: capitalized;
+    font-family: 'Open Sans', 'Century Gothic', 'Didact Gothic', Arial, sans-serif;
+}
+
+.green-button-bg {
+    position: absolute;
+}
+
+.green-button-interactive {
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    text-decoration: none;
+    box-shadow: 5px 5px #2C6628;
+}
+
+.green-button-interactive:hover,
+.green-button-interactive.hover {
+    background-color: #48A641;
+    box-shadow: 4px 4px #2C6628;
+    -webkit-transform: translate(1px, 1px);
+    -moz-transform: translate(1px, 1px);
+    transform: translate(1px, 1px);
+}
 
+.green-button-interactive:active,
+.green-button-interactive.active {
+    background-color: #48A641;
+    box-shadow: 2px 2px #2C6628;
+    -webkit-transform: translate(3px, 3px);
+    -moz-transform: translate(3px, 3px);
+    transform: translate(3px, 3px);
+}
+
+.green-button,
+.green-button-interactive2D {
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    text-decoration: none;
+    box-shadow: 0px 5px #2C6628;
+    margin: 0px 2.5px;
+}
+
+.green-button:hover,
+.green-button.hover,
+.green-button-interactive2D:hover,
+.green-button-interactive2D.hover {
+    background-color: #48A641;
+    box-shadow: 0px 4px #2C6628;
+    -webkit-transform: translate(0px, 1px);
+    -moz-transform: translate(0px, 1px);
+    transform: translate(0px, 1px);
+}
+
+.green-button:active,
+.green-button.active,
+.green-button-interactive2D:active,
+.green-button-interactive2D.active {
+    background-color: #48A641;
+    box-shadow: 0px 2px #2C6628;
+    -webkit-transform: translate(0px, 3px);
+    -moz-transform: translate(0px, 3px);
+    transform: translate(0px, 3px);
+}
+.green-button:disabled {
+  background-color:darken($color: (#48A641), $amount: 10%);
+  color:darken($color: (#fff), $amount: 20%);
+}
+</style>
 <style lang="scss" scoped>
 #eterna-chat {
   font-family: "Open Sans", "Open Sans", Arial, Gulim;
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 3f2f4b84..a34ebb46 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -17,7 +17,7 @@
           {{ user }}
           <button
             :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-            class='unignore-user'
+            class='unignore-user green-button'
             v-on:click="unignore(user)" >
             Unignore
           </button>
@@ -25,7 +25,7 @@
         <li v-show="!anyIgnoredUsers">No users ignored</li>
         <button
           :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-          class='unignore-user'
+          class='unignore-user green-button'
           v-on:click="unignore('*')"
           v-show="anyIgnoredUsers"
         >
@@ -44,6 +44,7 @@
               style="width:calc(100% - 6px)"
               @click="toggleNotificationsEnabled(channel.name)"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+              class="green-button"
             >
               {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
             </button>
@@ -55,6 +56,7 @@
               :disabled="anyNotificationsDisabled"
               @click="enableAll"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+              class="green-button"
             >
               Enable all
             </button>
@@ -65,6 +67,7 @@
               :disabled="anyNotificationsEnabled"
               @click="disableAll"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+              class="green-button"
             >
               Disable all
             </button>
@@ -257,8 +260,9 @@ input {
 button { /* Unignore user button */
   padding:2px;
   padding-bottom:3px;
-  background-color:white;
   margin-left:2px;
+  color:white;
+  border:none;
 }
 #settings-wrapper { /* Wrapper div */
   padding:5px;
diff --git a/src/app/components/SlideoutButtonChat.vue b/src/app/components/SlideoutButtonChat.vue
index e8d2896c..7cf14944 100644
--- a/src/app/components/SlideoutButtonChat.vue
+++ b/src/app/components/SlideoutButtonChat.vue
@@ -1,6 +1,7 @@
 <template>
   <Button
     :class="{active: selected}"
+    class="slideout-button"
     @click="$emit('input')"
   >
     <slot />

From 0f2e4cf2c68544240dcfe51524319efc965b8dc5 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 19 May 2020 09:11:59 -0500
Subject: [PATCH 068/223] Fixed bug when no username color was in localStorage

---
 src/app/components/Slideout/ColorPicker/ColorPicker.vue | 7 ++++++-
 src/app/components/Slideout/ColorPicker/ColorSlider.vue | 9 +++++++--
 src/app/store/chat.vuex.ts                              | 4 ----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Slideout/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
index e7448680..dd5791a0 100644
--- a/src/app/components/Slideout/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
@@ -43,6 +43,7 @@
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
   import ColorSlider from './ColorSlider.vue';
+  import User from '@/types/user';
 
   @Component({
     components: {
@@ -131,10 +132,14 @@
     // Gets value from localStorage or vuex when created
     created() {
       let color;
+      // If value saved in localStorage, use that
       if (localStorage.usernameColor) {
         color = localStorage.usernameColor;
-      } else {
+      } else if (this.$vxm.settings.usernameColor !== '' && this.$vxm.settings.usernameColor !== undefined) {
+        // If value not in localStorage, check vuex
         color = this.$vxm.settings.usernameColor;
+      } else { // If not, make it a random color from the defaults. Then, it saves in localStorage
+        color = this.defaultColors[Math.ceil(Math.random() * 8)];
       }
       // Converting hex to decimal
       this.red = parseInt(color.substring(1, 3), 16).toString();
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
index b527169e..a3a47be4 100644
--- a/src/app/components/Slideout/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -17,6 +17,7 @@
   import {
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
+  import ColorPicker from './ColorPicker.vue';
 
   @Component
   export default class ColorSlider extends Vue {
@@ -31,6 +32,8 @@
     @Prop() // Red, green, or blue. Used to fetch value from localStorage/vuex
     colorID !: string;
 
+    defaultColors = ['#f3a891', '#f3c491', '#f3df91', '#e2f391', '#bef391', '#91f3bc', '#f391ba', '#f39196'];
+
     calculateOffset() { // Position of text on slider thumb
       return `${this.sliderValue / 5 - 93}px`;
     }
@@ -44,13 +47,15 @@
       return `-webkit-linear-gradient(left,${this.gradientStart},${this.gradientEnd})`;
     }
 
-    // Gets value from localStorage or vuex when created
+    // Gets value from localStorage, parent, or vuex when created
     created() {
         let color;
         if (localStorage.usernameColor) {
           color = localStorage.usernameColor;
-        } else {
+        } else if (this.$vxm.settings.usernameColor !== '' && this.$vxm.settings.usernameColor !== undefined) {
           color = this.$vxm.settings.usernameColor;
+        } else {
+          color = (this.$parent as ColorPicker).color;
         }
         switch (this.colorID) {
           case 'red':
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index ff7c9933..efdfbf93 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -286,10 +286,6 @@ export default class ChatModule extends VuexModule {
     this.connect();
   }
 
-  async authenticate(password:string) {
-    this.client?.raw(`OPER ${this.client.user.nick} ${password}`);
-  }
-
   @action()
   async connect() {
     this.client!.connect();

From 916a7b759894a4f2cf88494b0107ed5bd32af5c9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 19 May 2020 10:20:23 -0500
Subject: [PATCH 069/223] Draggable chat

---
 package-lock.json                   | 27 ++++++++-
 package.json                        |  2 +
 src/app/App.vue                     | 94 ++++++++++++++++++++---------
 src/app/components/DraggableDiv.vue | 88 +++++++++++++++++++++++++++
 4 files changed, 178 insertions(+), 33 deletions(-)
 create mode 100644 src/app/components/DraggableDiv.vue

diff --git a/package-lock.json b/package-lock.json
index e7417eb7..525afb1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2886,6 +2886,14 @@
       "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
       "dev": true
     },
+    "@types/vuedraggable": {
+      "version": "2.23.1",
+      "resolved": "https://registry.npmjs.org/@types/vuedraggable/-/vuedraggable-2.23.1.tgz",
+      "integrity": "sha512-icDSUwIc1xqtMBxYlaO76ywpzxBumcGV3gC7WVtRl37A+TNuNFg3bMwPpi3M5KZWrIYChBmM9uwMNB7C8hvWWQ==",
+      "requires": {
+        "vue": ">=2.0.0"
+      }
+    },
     "@types/webpack-env": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.15.2.tgz",
@@ -12797,9 +12805,9 @@
       }
     },
     "http-proxy": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "dev": true,
       "requires": {
         "eventemitter3": "^4.0.0",
@@ -21455,6 +21463,11 @@
         }
       }
     },
+    "sortablejs": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+      "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -23893,6 +23906,14 @@
       "resolved": "https://registry.npmjs.org/vuebar/-/vuebar-0.0.20.tgz",
       "integrity": "sha512-Pq72X10Yl5QyQPcX4hR8KdhA2o+qpqzOdwkoIHUnAJfXWLODBKJhUPAnWvKvBcgst0HuHASLDrcFBSQz98gd9g=="
     },
+    "vuedraggable": {
+      "version": "2.23.2",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
+      "integrity": "sha512-PgHCjUpxEAEZJq36ys49HfQmXglattf/7ofOzUrW2/rRdG7tu6fK84ir14t1jYv4kdXewTEa2ieKEAhhEMdwkQ==",
+      "requires": {
+        "sortablejs": "^1.10.1"
+      }
+    },
     "vuex": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.4.0.tgz",
diff --git a/package.json b/package.json
index 08cc7cfe..8f990a7a 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@types/irc": "^0.3.33",
     "@types/node": "^14.0.1",
     "@types/punycode": "^2.1.0",
+    "@types/vuedraggable": "^2.23.1",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.14.0",
@@ -36,6 +37,7 @@
     "vue-property-decorator": "^8.4.2",
     "vue-resource": "^1.5.1",
     "vuebar": "0.0.20",
+    "vuedraggable": "^2.23.2",
     "vuex": "^3.4.0",
     "vuex-class-component": "^2.3.2"
   },
diff --git a/src/app/App.vue b/src/app/App.vue
index cfc8a39c..1672794f 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,28 +1,33 @@
 <template>
-  <div
+  <DraggableDiv
     id="eterna-chat"
     style="overflow-y: hidden;"
     :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
+    :enabled="!fullSize"
   >
-    <slideout style="z-index: 1;" :minimizedValue="!minimized"></slideout>
-    <transition name="fade">
-      <div class="chat-content" v-if="!minimized">
-        <MessagePane
-          v-for="(channel, index) in messageTabs"
-          :key="channel.name"
-          :data="channel"
-          v-show="index === activeTab"
-          :visibility="index === activeTab"
-          @postMessage="postMessage($event, channel.name)"
-        />
-        <ConnectingPopup />
-        <ReportDialog ref="reportDialog" />
-      </div>
-    </transition>
-    <div id="current-tab">{{ currentTab }}</div>
-    <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
-    <OpenWindowButton v-model="fullSize" />
-  </div>
+    <template slot="main">
+      <slideout style="z-index: 1;" :minimizedValue="!minimized"></slideout>
+      <transition name="fade">
+        <div class="chat-content" v-if="!minimized">
+          <MessagePane
+            v-for="(channel, index) in messageTabs"
+            :key="channel.name"
+            :data="channel"
+            v-show="index === activeTab"
+            :visibility="index === activeTab"
+            @postMessage="postMessage($event, channel.name)"
+          />
+          <ConnectingPopup />
+          <ReportDialog ref="reportDialog" />
+        </div>
+      </transition>
+    </template>
+    <template slot="header">
+      <div id="current-tab">{{ currentTab }}</div>
+      <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
+      <OpenWindowButton v-model="fullSize" />
+    </template>
+  </DraggableDiv>
 </template>
 
 <script lang="ts">
@@ -35,9 +40,11 @@
   import MessagePane from '@/components/Panes/MessagePane.vue';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
+  import DraggableDiv from '@/components/DraggableDiv.vue';
 
 @Component({
   components: {
+    DraggableDiv,
     Slideout,
     ReportDialog,
     ConnectingPopup,
@@ -74,6 +81,10 @@
     reportDialog: ReportDialog;
   };
 
+  get slideoutOpen() {
+    return this.$vxm.chat.slideoutOpen;
+  }
+
   get messageTabs() {
     return Object.values(this.$vxm.chat.channels).map((channel) => channel!);
   }
@@ -110,6 +121,20 @@
   minimizedChanged() {
     this.fullSize = false;
   }
+
+  @Watch('fullSize')
+  sizeChanged() {
+    if (this.fullSize && this.minimized) {
+      this.fullSize = false;
+    }
+  }
+
+  @Watch('slideoutOpen')
+  slideoutChanged() {
+    if (this.slideoutOpen) {
+      this.minimization = false;
+    }
+  }
   }
 </script>
 
@@ -222,8 +247,8 @@ textarea {
 }
 
 .eternaChatNormal {
-  width: 100%;
-  height: 100%;
+  width: 300px; // Fill in with normal size
+  height: 500px;
   animation: growNormal 1s;
 }
 
@@ -282,8 +307,8 @@ textarea {
 }
 @keyframes growFull {
   from {
-    width: 100%;
-    height: 100%;
+    width: 300px; // Fill in with default size
+    height: 500px;
     margin: 0;
   }
   to {
@@ -293,12 +318,14 @@ textarea {
     margin-left: 5vw;
     margin-top: 5vh;
     margin-bottom: 5vh;
+    left: 0px !important;
+    top: 0px !important;
   }
 }
 @keyframes growNormal {
   to {
-    width: 100%;
-    height: 100%;
+    width: 300px; //Fill in with default size
+    height: 500px;
     margin: 0;
   }
   from {
@@ -308,16 +335,23 @@ textarea {
     margin-left: 5vw;
     margin-top: 5vh;
     margin-bottom: 5vh;
+    left: 0px !important;
+    top: 0px !important;
   }
 }
-.eternaChatFull {
-  width: 90vw;
+.eternaChatFull { /* Full size chat */
+  width: 90vw; /* Takes up 90% of the viewport*/
   height: 90vh;
-  margin-right: 5vw;
+  margin-right: 5vw; /* Margins take up the rest*/
   margin-left: 5vw;
   margin-top: 5vh;
   margin-bottom: 5vh;
-  box-shadow: 0 0 2vw 20vw rgba(4, 52, 104, 0.5);
+  box-shadow: 0 0 2vw 20vw rgba(4, 52, 104, 0.5); /* Creates blur effect */
   animation: growFull 1s;
+  left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
+  top:0px !important;
+}
+.minimizedChat { /* Removes light blue background when chat is minimzed and only shows top bar */
+  height:40px;
 }
 </style>
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
new file mode 100644
index 00000000..4e7848e0
--- /dev/null
+++ b/src/app/components/DraggableDiv.vue
@@ -0,0 +1,88 @@
+<!-- Code taken from https://dev.to/mandrewcito/vue-js-draggable-div-3mee and modified so draggability can be turned on or off -->
+<template>
+  <div ref="draggableContainer" id="draggable-container">
+    <div id="draggable-header" @mousedown="dragMouseDown">
+      <slot name="header"></slot>
+    </div>
+    <slot name="main"></slot>
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'DraggableDiv',
+    data() {
+      return {
+        positions: {
+          clientX: undefined,
+          clientY: undefined,
+          movementX: 0,
+          movementY: 0,
+        },
+      };
+    },
+    props: {
+      enabled: Boolean,
+    },
+    computed: {
+      disabled: function disabled() {
+        return !this.enabled;
+      },
+    },
+    watch: {
+      enabled: {
+        handler: function changed() {
+          if (!this.enabled) {
+            // this.$refs.draggableContainer.style.top = '0px';
+            // this.$refs.draggableContainer.style.left = '0px';
+          }
+        },
+      },
+    },
+    methods: {
+      dragMouseDown(event) {
+        if (!this.disabled) {
+          event.preventDefault();
+          // get the mouse cursor position at startup:
+          this.positions.clientX = event.clientX;
+          this.positions.clientY = event.clientY;
+          document.onmousemove = this.elementDrag;
+          document.onmouseup = this.closeDragElement;
+          console.log('enabled');
+        } else {
+          console.log('disabled');
+        }
+      },
+      elementDrag(event) {
+        if (!this.disabled) {
+          event.preventDefault();
+          this.positions.movementX = this.positions.clientX - event.clientX;
+          this.positions.movementY = this.positions.clientY - event.clientY;
+          this.positions.clientX = event.clientX;
+          this.positions.clientY = event.clientY;
+          // set the element's new position:
+          this.$refs.draggableContainer.style.top = `${this.$refs.draggableContainer.offsetTop - this.positions.movementY}px`;
+          this.$refs.draggableContainer.style.left = `${this.$refs.draggableContainer.offsetLeft - this.positions.movementX}px`;
+          console.log('enabled');
+        } else {
+          console.log('disabled');
+        }
+      },
+      closeDragElement() {
+        document.onmouseup = null;
+        document.onmousemove = null;
+      },
+    },
+  };
+</script>
+
+<style>
+#draggable-container {
+  position: absolute;
+  z-index: 9;
+}
+#draggable-header {
+  z-index: 10;
+}
+</style>

From ca06fffc7b57b670cf51b8fdc91bcf14f3588d01 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 19 May 2020 10:23:55 -0500
Subject: [PATCH 070/223] Removed console.logs

---
 src/app/components/DraggableDiv.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 4e7848e0..de7f1e5d 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -49,9 +49,6 @@
           this.positions.clientY = event.clientY;
           document.onmousemove = this.elementDrag;
           document.onmouseup = this.closeDragElement;
-          console.log('enabled');
-        } else {
-          console.log('disabled');
         }
       },
       elementDrag(event) {
@@ -64,9 +61,6 @@
           // set the element's new position:
           this.$refs.draggableContainer.style.top = `${this.$refs.draggableContainer.offsetTop - this.positions.movementY}px`;
           this.$refs.draggableContainer.style.left = `${this.$refs.draggableContainer.offsetLeft - this.positions.movementX}px`;
-          console.log('enabled');
-        } else {
-          console.log('disabled');
         }
       },
       closeDragElement() {

From 7496dc9f714fc11edb1894700c6ee6aaf4448353 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 19 May 2020 11:38:18 -0500
Subject: [PATCH 071/223] Sass/bootstrap for some colors, fixes

---
 package-lock.json                             | 29 +++++++++++++++++--
 package.json                                  |  1 +
 src/app/App.vue                               | 16 ++++++----
 src/app/components/DraggableDiv.vue           |  4 +--
 .../Slideout/ColorPicker/ColorPicker.vue      |  8 ++---
 .../Slideout/ColorPicker/ColorSlider.vue      |  4 +--
 .../components/Slideout/SlideoutSettings.vue  |  4 +++
 src/app/components/Slideout/SlideoutUser.vue  |  6 ++++
 src/app/store/chat.vuex.ts                    |  6 ++--
 src/app/store/settings.vuex.ts                |  2 --
 10 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 525afb1e..dc0a3ed9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5607,6 +5607,32 @@
       "integrity": "sha512-Uvq6hVe90D0B2WEnUqtdgY1bATGz3mw33nH9Y+dmA+w5DHvUmBgkr5rM/KCHpCsiFNRUfokW/szpPPgMK2hm4A==",
       "dev": true
     },
+    "axios": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
+      "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
+      "requires": {
+        "follow-redirects": "1.5.10"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "follow-redirects": {
+          "version": "1.5.10",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
+          "requires": {
+            "debug": "=3.1.0"
+          }
+        }
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -17319,8 +17345,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
       "version": "6.2.3",
diff --git a/package.json b/package.json
index 8f990a7a..cec5d4de 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/node": "^14.0.1",
     "@types/punycode": "^2.1.0",
     "@types/vuedraggable": "^2.23.1",
+    "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.5.0",
     "bootstrap-vue": "^2.14.0",
diff --git a/src/app/App.vue b/src/app/App.vue
index 1672794f..27cd2f98 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -34,6 +34,7 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
+  import BootstrapVue from 'bootstrap-vue';
   import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
@@ -42,6 +43,8 @@
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
   import DraggableDiv from '@/components/DraggableDiv.vue';
 
+  Vue.use(BootstrapVue);
+
 @Component({
   components: {
     DraggableDiv,
@@ -235,11 +238,14 @@ textarea {
 }
 </style>
 <style lang="scss" scoped>
+@import "node_modules/bootstrap-vue/src/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
 #eterna-chat {
   font-family: "Open Sans", "Open Sans", Arial, Gulim;
   font-size: 14px;
   font-weight: 300;
-  background-color: #043468;
+  background-color: $med-dark-blue;
   position: relative; /* Makes sure everything is placed with respect to it, not to its parent */
   top: 0px;
   left: 0px;
@@ -247,8 +253,8 @@ textarea {
 }
 
 .eternaChatNormal {
-  width: 300px; // Fill in with normal size
-  height: 500px;
+  width: $container-width; // Fill in with normal size
+  height: $container-height;
   animation: growNormal 1s;
 }
 
@@ -274,7 +280,7 @@ textarea {
   left: 8px;
   width: calc(100% - 20px); //Account for border
   color: #c0dce7;
-  background-color: #05224b;
+  background-color: $dark-blue;
   transform-origin: top center;
 }
 .minimizationTriangle {
@@ -346,7 +352,7 @@ textarea {
   margin-left: 5vw;
   margin-top: 5vh;
   margin-bottom: 5vh;
-  box-shadow: 0 0 2vw 20vw rgba(4, 52, 104, 0.5); /* Creates blur effect */
+  box-shadow: 0 0 2vw 20vw $dark-blue-transparent; /* Creates blur effect */
   animation: growFull 1s;
   left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
   top:0px !important;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index de7f1e5d..7bb3453f 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -34,8 +34,8 @@
       enabled: {
         handler: function changed() {
           if (!this.enabled) {
-            // this.$refs.draggableContainer.style.top = '0px';
-            // this.$refs.draggableContainer.style.left = '0px';
+            this.$refs.draggableContainer.style.top = '0px';
+            this.$refs.draggableContainer.style.left = '0px';
           }
         },
       },
diff --git a/src/app/components/Slideout/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
index dd5791a0..d3e78908 100644
--- a/src/app/components/Slideout/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
@@ -71,10 +71,10 @@
       // If color contrasts well enough with background
       if (this.validColor) {
         // Update vuex
-        this.$vxm.settings.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
+        this.$vxm.chat.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
           // Set value to localStorage if available
           if (localStorage) {
-            localStorage.usernameColor = this.$vxm.settings.usernameColor;
+            localStorage.usernameColor = this.$vxm.chat.usernameColor;
           }
         }
       // Sets color of preview test
@@ -135,9 +135,9 @@
       // If value saved in localStorage, use that
       if (localStorage.usernameColor) {
         color = localStorage.usernameColor;
-      } else if (this.$vxm.settings.usernameColor !== '' && this.$vxm.settings.usernameColor !== undefined) {
+      } else if (this.$vxm.chat.usernameColor !== '' && this.$vxm.chat.usernameColor !== undefined) {
         // If value not in localStorage, check vuex
-        color = this.$vxm.settings.usernameColor;
+        color = this.$vxm.chat.usernameColor;
       } else { // If not, make it a random color from the defaults. Then, it saves in localStorage
         color = this.defaultColors[Math.ceil(Math.random() * 8)];
       }
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
index a3a47be4..36c0e356 100644
--- a/src/app/components/Slideout/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -52,8 +52,8 @@
         let color;
         if (localStorage.usernameColor) {
           color = localStorage.usernameColor;
-        } else if (this.$vxm.settings.usernameColor !== '' && this.$vxm.settings.usernameColor !== undefined) {
-          color = this.$vxm.settings.usernameColor;
+        } else if (this.$vxm.chat.usernameColor !== '' && this.$vxm.chat.usernameColor !== undefined) {
+          color = this.$vxm.chat.usernameColor;
         } else {
           color = (this.$parent as ColorPicker).color;
         }
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index a34ebb46..3e6358bd 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -275,6 +275,10 @@ button { /* Unignore user button */
     width: 10px;
 }
 
+::-webkit-scrollbar-corner {
+  background-color:black;
+}
+
 ::-webkit-scrollbar-thumb { /* Scrollbar bar */
   background-color:#343a40;
   border-radius:5px;
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
index 2f56b61a..bbd119fb 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -44,6 +44,7 @@
 
 ::-webkit-scrollbar {
     width: 10px;
+    height:10px;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -51,6 +52,11 @@
   border-radius:5px;
 }
 
+::-webkit-scrollbar-corner {
+  background-color:#343a40;
+  border-radius:5px;
+}
+
 li {
   list-style-type: none; /* Remove bullet points */
 }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index efdfbf93..5d5988e3 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -91,6 +91,8 @@ export default class ChatModule extends VuexModule {
 
   ignoredChannels: { [channel: string]: boolean };
 
+  usernameColor: string = '';
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -423,8 +425,8 @@ export default class ChatModule extends VuexModule {
             this.client!.say(channel, message);
           }
           const msg = new Message(message, channel, this.currentUser, isAction);
-          if (this.$store.state.SettingsModule !== undefined) {
-            msg.tags = { 'username-color': this.$store.state.SettingsModule.usernameColor };
+          if (this.usernameColor !== undefined && this.usernameColor !== '') {
+            msg.tags = { 'username-color': this.usernameColor };
           }
           this.postMessage(msg);
         } else {
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index 5d4871da..bfed99c6 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -13,6 +13,4 @@ export default class SettingsModule extends VuexModule {
   fontSize: Number = 14;
 
   indicator: string = ' (!)';
-
-  usernameColor: string = '';
 }

From 0579bb38d33d84c0e9959bc2d3fbd05813e90a35 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 20 May 2020 15:42:46 -0500
Subject: [PATCH 072/223] Fixed SASS/Bootstrap bug and fixed chat input text
 overflow into icon bug

---
 src/app/App.vue                      |  6 +--
 src/app/assets/_custom.scss          | 69 ++++++++++++++++++++++++++++
 src/app/components/DraggableDiv.vue  |  4 +-
 src/app/components/ScalableInput.vue |  4 +-
 4 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 src/app/assets/_custom.scss

diff --git a/src/app/App.vue b/src/app/App.vue
index 27cd2f98..b29b6ff2 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -238,7 +238,7 @@ textarea {
 }
 </style>
 <style lang="scss" scoped>
-@import "node_modules/bootstrap-vue/src/_custom.scss";
+@import "./assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
 #eterna-chat {
@@ -341,8 +341,8 @@ textarea {
     margin-left: 5vw;
     margin-top: 5vh;
     margin-bottom: 5vh;
-    left: 0px !important;
-    top: 0px !important;
+    left:0px !important;
+    top:0px !important;
   }
 }
 .eternaChatFull { /* Full size chat */
diff --git a/src/app/assets/_custom.scss b/src/app/assets/_custom.scss
new file mode 100644
index 00000000..68888a0b
--- /dev/null
+++ b/src/app/assets/_custom.scss
@@ -0,0 +1,69 @@
+// Eterna theme
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ecf0f1 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #b4bcc2 !default;
+$gray-600: #95a5a6 !default;
+$gray-700: #7b8a8b !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue: #21508c !default;
+$dark-blue: #05224b !default;
+$light-blue: #50b2dc !default;
+$med-blue: #2f94d1 !default;
+$med-dark-blue: #043468 !default;
+$dark-blue-transparent: #05224680;
+$green: #53b64e !default;
+$dark-green: #3d8e39 !default;
+$light-green: #97cc93 !default;
+$red: #d73832 !default;
+$orange: #fd7e14 !default;
+$yellow: #fac244 !default;
+$white: #fff !default;
+$gray: #95a5a6 !default;
+$gray-dark: #343a40 !default;
+$primary: $blue !default;
+$secondary: $light-blue !default;
+$success: $green !default;
+$info: $med-blue !default;
+$warning: #f39c12 !default;
+$danger: #e74c3c !default;
+$light: #ecf0f1 !default;
+$dark: #7b8a8b !default;
+
+$colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "dark-blue":     $dark-blue,
+    "light-blue":     $light-blue,
+    "med-blue":       $med-blue,
+    "med-dark-blue":       $med-dark-blue,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "dark-green":       $dark-green,
+    "light-green":       $light-green,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+// Default size
+
+$container-width:300px !default;
+$container-height:500px !default;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 7bb3453f..83ab7c06 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -34,8 +34,8 @@
       enabled: {
         handler: function changed() {
           if (!this.enabled) {
-            this.$refs.draggableContainer.style.top = '0px';
-            this.$refs.draggableContainer.style.left = '0px';
+            this.$refs.draggableContainer.style.top = `${this.clientY}px`;
+            this.$refs.draggableContainer.style.left = `${this.clientX}px`;
           }
         },
       },
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index e5f920e5..b25b91b0 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -71,11 +71,12 @@
     top: 0px;
     padding: 0;
     color:black;
-    width:calc(100% - 2px);
     background-color:white;
     border:#343a40 1px solid;
     border-radius:8px;
     outline: none;
+    padding-right:25px;
+    width:calc(100% - 27px) !important;
   }
 
   .scalable-input:focus {
@@ -94,5 +95,6 @@
     white-space: pre-wrap;
     word-wrap: break-word;
     border: 1px solid;
+    padding-right:25px;
   }
 </style>

From f96e1f2e3333c587ed89f444e5b72855fff6a309 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 26 May 2020 15:59:31 -0500
Subject: [PATCH 073/223] Emoticons + markdown tools

---
 src/app/components/Emoticons/EmoticonBar.vue  |  80 ++++++++++++
 .../components/Emoticons/EmoticonButton.vue   |  36 ++++++
 src/app/components/Emoticons/ExpandButton.vue |  31 +++++
 .../Emoticons/MarkdownWrapButton.vue          |  86 ++++++++++++
 src/app/components/Panes/MessagePane.vue      |  44 ++++++-
 src/app/components/ScalableInput.vue          | 122 ++++++++++++++++--
 src/app/components/SendButton.vue             |   3 +-
 src/app/store/chat.vuex.ts                    |  12 +-
 8 files changed, 393 insertions(+), 21 deletions(-)
 create mode 100644 src/app/components/Emoticons/EmoticonBar.vue
 create mode 100644 src/app/components/Emoticons/EmoticonButton.vue
 create mode 100644 src/app/components/Emoticons/ExpandButton.vue
 create mode 100644 src/app/components/Emoticons/MarkdownWrapButton.vue

diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
new file mode 100644
index 00000000..2dbd6760
--- /dev/null
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -0,0 +1,80 @@
+<template>
+  <div id='emoticon-bar-container'>
+    <ExpandButton @expand="expand" class="border-left" />
+    <EmoticonButton emoticon="👍" class="border-left" @emote='add'/>
+    <EmoticonButton emoticon="👎" class="border-left" @emote='add'/>
+    <EmoticonButton emoticon="🙂" class="border-left" @emote='add'/>
+    <EmoticonButton
+      v-for="emoticon in emotesList"
+      :key="emoticon"
+      :emoticon='emoticon'
+      class="border-left"
+      v-show="value"
+      @emote='add' />
+    <MarkdownWrapButton name="B" bold=true class="border-left" @md="format"/>
+    <MarkdownWrapButton name="I" italics=true class="border-left" @md="format"/>
+    <MarkdownWrapButton name="S" id="strike" strikethrough=true class="border-left" @md="format"/>
+    <MarkdownWrapButton name="C" code=true class="border-left" @md="format"/>
+    <MarkdownWrapButton name="L" link=true class="border-left" @md="format"/>
+  </div>
+</template>
+<script lang='ts'>
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
+  import EmoticonButton from './EmoticonButton.vue';
+  import ExpandButton from './ExpandButton.vue';
+  import SendButton from '../SendButton.vue';
+  import MarkdownWrapButton from './MarkdownWrapButton.vue';
+  @Component({
+    components: {
+      SendButton,
+      EmoticonButton,
+      ExpandButton,
+      MarkdownWrapButton,
+    },
+  })
+  export default class EmoticonBar extends Vue {
+    value = false;
+
+    emotesList = ['🙁', '😡'];
+
+    expand(val:boolean) {
+      this.$emit('expanded', val);
+      this.value = val;
+    }
+
+    add(emote:string) {
+      this.$emit('emote', emote);
+    }
+
+    format(options:string) {
+      this.$emit('md', options);
+    }
+  }
+</script>
+<style scoped>
+#emoticon-bar-container {
+  position: sticky;
+  right:0px;
+  top:0px;
+  background-color:white;
+  width:calc(100% - 2px);
+  border-radius:8px;
+  height:25px;
+  margin-bottom:5px;
+  overflow-x:hidden;
+}
+.border-left {
+  border-left: 1px solid black;
+}
+.border-right {
+  border-right: 1px solid black;
+}
+#strike {
+  padding:2px;
+  padding-right:2px;
+  overflow-x:hidden;
+  text-align:center;
+}
+</style>
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
new file mode 100644
index 00000000..625e12e6
--- /dev/null
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -0,0 +1,36 @@
+<template>
+  <div id='emoticon-button-container' class='emoticon-button' @click="clicked">
+    <p id='emoticon-text-container'>{{emoticon}}</p>
+  </div>
+</template>
+<script lang='ts'>
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  @Component
+  export default class EmoticonButton extends Vue {
+    @Prop()
+    emoticon !: string;
+
+    clicked() {
+      this.$emit('emote', this.emoticon);
+    }
+  }
+</script>
+<style scoped>
+  .emoticon-button {
+    border:none;
+    float:right;
+    position: relative;
+    width:20px;
+    height:25px;
+    padding-right:2.5px;
+    padding-top:1px;
+    text-align:center;
+  }
+  #emoticon-text-container {
+    vertical-align: middle;
+    height:100%;
+    font-size:14px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+</style>
diff --git a/src/app/components/Emoticons/ExpandButton.vue b/src/app/components/Emoticons/ExpandButton.vue
new file mode 100644
index 00000000..2c4e35fb
--- /dev/null
+++ b/src/app/components/Emoticons/ExpandButton.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class='emoticon-button' @click="value=!value; $emit('expand', !value)">
+    <p id='expand-text-container'>➕</p>
+  </div>
+</template>
+<script lang='ts'>
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  @Component
+  export default class ExpandButton extends Vue {
+    value : boolean = true;
+  }
+</script>
+<style scoped>
+  .emoticon-button {
+    border:none;
+    float:right;
+    position: relative;
+    width:20px;
+    height:25px;
+    padding-right:2.5px;
+    padding-top:1px;
+    text-align:center;
+  }
+  #expand-text-container {
+    vertical-align: middle;
+    height:100%;
+    font-size:14px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+</style>
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
new file mode 100644
index 00000000..558f1755
--- /dev/null
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -0,0 +1,86 @@
+<template>
+  <div id='md-wrap-button-container' class='md-button' @click="clicked">
+    <strong class="text" v-if="b">B</strong>
+    <em class="text" v-if="i">I</em>
+    <div class="text" id="s" v-if="s">S</div>
+    <code class="text" v-if="c">C</code>
+    <u class="text" v-if="l">L</u>
+  </div>
+</template>
+<script lang='ts'>
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  @Component
+  export default class MarkdownWrapButton extends Vue {
+    @Prop()
+    name !: string;
+
+    @Prop()
+    italics !: boolean;
+
+    @Prop()
+    bold !: boolean;
+
+    @Prop()
+    strikethrough !: boolean;
+
+    @Prop()
+    code !: boolean;
+
+    @Prop()
+    link !: boolean;
+
+    get c() {
+      return this.code;
+    }
+
+    get i() {
+      return this.italics;
+    }
+
+    get b() {
+      return this.bold;
+    }
+
+    get s() {
+      return this.strikethrough;
+    }
+
+    get l() {
+      return this.link;
+    }
+
+    clicked() {
+      this.$emit('md', this.name);
+    }
+  }
+</script>
+<style scoped>
+  .md-button {
+    color:black;
+    border:none;
+    float:right;
+    position: relative;
+    width:20px;
+    height:25px;
+    padding-right:2.5px;
+    padding-top:1px;
+    text-align:center;
+  }
+  .text {
+    vertical-align: middle;
+    height:100%;
+    font-size:16px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+  #s {
+    text-decoration: line-through;
+    font-size:12px;
+    padding-top:2px;
+  }
+
+  #s:before,
+  #s:after {
+    content: "\00a0\00a0";
+  }
+</style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 3ca10c4c..b188b3fa 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -10,17 +10,18 @@
       <ConnectingMessage/>
     </ul>
     <template v-slot:footer>
+      <EmoticonBar @emote="add" @expanded="changeWrap" @md="format"/>
       <ScalableInput
         v-model="newMessage"
         id="input"
         @keypress.native="onKeyPress"
         :disabled="!connectionData.connected || isBanned"
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
-        v-show="showInput"
+        ref="input"
       />
-      <SendButton @send="send" v-show="showInput" />
+      <SendButton @send="send"/>
       <ConnectButton
-        v-show="!showInput"
+        v-show="!input"
       />
     </template>
   </Pane>
@@ -31,6 +32,7 @@
     Component, Prop, Watch, Vue,
   } from 'vue-property-decorator';
   import { mapState } from 'vuex';
+  import EmoticonBar from '@/components/Emoticons/EmoticonBar.vue';
   import UserMessage from '../Messages/UserMessage.vue';
   import Pane from './Pane.vue';
   import ConnectingMessage from '../Connection/ConnectingMessage.vue';
@@ -48,6 +50,7 @@
       Pane,
       ScalableInput,
       ConnectButton,
+      EmoticonBar,
       SendButton,
     },
   })
@@ -60,6 +63,8 @@
 
     newMessage: string = '';
 
+    emoticonsOut: Boolean = false;
+
     get connectionData() {
       return this.$vxm.chat.connectionData;
     }
@@ -68,11 +73,15 @@
       return this.data.banned !== BanStatus.BAN_STATUS_NORMAL;
     }
 
-    get showInput() {
+    get input() {
       return this.connectionData.connected
           || this.connectionData.firstConnection;
     }
 
+    get showInput() {
+      return this.input && !this.emoticonsOut;
+    }
+
     // Updates font size
     get fontSize() {
       return `${this.$vxm.settings.fontSize.toString()}px`;
@@ -81,15 +90,38 @@
     send() {
       this.$emit('postMessage', this.newMessage);
       this.newMessage = '';
+      this.$refs.input.$refs.textarea.value = '';
+    }
+
+    format(options:string) {
+      switch (options) {
+        case 'B': this.$refs.input.wrapOrInsert('**', true); break;
+        case 'I': this.$refs.input.wrapOrInsert('*', true); break;
+        case 'S': this.$refs.input.wrapOrInsert('~~', true); break;
+        case 'C': this.$refs.input.wrapOrInsert('`', true); break;
+        case 'L': this.$refs.input.insertLink(); break;
+        default: break;
+      }
+    }
+
+    add(emote:string) {
+      this.$refs.input.insertCharacter(emote, true);
+      this.newMessage = this.$refs.input.value;
+    }
+
+    changeWrap(large:Boolean) {
+      this.emoticonsOut = large;
     }
 
     $refs!: {
       pane: Pane;
+      input: ScalableInput;
     };
 
     onKeyPress(e: KeyboardEvent) {
       if (e.code === 'Enter' || e.code === 'NumpadEnter') {
         this.$emit('postMessage', this.newMessage);
+        this.$refs.input.$refs.textarea.value = '';
         this.newMessage = '';
         e.preventDefault();
       }
@@ -109,10 +141,10 @@
 <style scoped>
 .send-button { /* Send message button */
   position: absolute;
-  bottom:4px;
+  float:right;
   right:4px;
-  padding:0px;
   width:29px;
   height:29px;
+  bottom:3px;
 }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index b25b91b0..051ab981 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -1,11 +1,14 @@
 <template>
   <div style="overflow: hidden; position: relative;">
     <textarea
-      :value="value"
-      :style="{height: `${height}px`}"
+      v-model="value"
+      :style="{
+        height: `${height}px`,
+      }"
       class="scalable-input"
       :disabled="disabled"
       @input="$emit('input', $event.target.value)"
+      ref="textarea"
     />
     <div
       ref="hiddenDiv"
@@ -15,7 +18,9 @@
 </template>
 
 <script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
   import SendButton from '@/components/SendButton.vue';
   @Component({
     components: {
@@ -25,20 +30,113 @@
   export default class ScalableInput extends Vue {
     height = 0;
 
+    wrap = 25;
+
+    insertCharacter(char:string, keepCursor:Boolean) {
+      // Set focus back on textarea
+      this.$refs.textarea.focus();
+      // Get cursor position
+      const position = this.$refs.textarea.selectionStart;
+      const text = this.$refs.textarea.value;
+      /* Concatenates
+       - Textarea value up to cursor position
+       - Character(s) to be inserted
+       - Textarea value after cursor position
+      Returns 'text_before_cursor+char+text_after_cursor */
+      const newText = `${text.slice(0, position)}${char}${text.slice(position)}`;
+      this.$refs.textarea.value = newText;
+      this.value = this.$refs.textarea.value;
+      if (!keepCursor) {
+        this.$refs.textarea.setSelectionRange(position, position);
+      }
+      this.$emit('input', new KeyboardEvent('keypress', { key: char }));
+    }
+
+    insertLink() {
+      this.$refs.textarea.focus(); // Focus on textarea
+      const startPosition = this.$refs.textarea.selectionStart; // Start and end of selection
+      const endPosition = this.$refs.textarea.selectionEnd;
+      const text = this.$refs.textarea.value; // All text
+      const selection = text.substring(startPosition, endPosition); // Selected text
+      if (this.validURL(text)) { // If the user selected a URL
+        // New text is 'text_before_selection[](selection)text_after_selection
+        const newString = `${text.slice(0, startPosition)}[text](${selection})${text.slice(endPosition)}`;
+        this.$refs.textarea.value = newString;
+        this.value = newString;
+        // Put cursor in other [] field
+        this.$refs.textarea.setSelectionRange(startPosition + 1, startPosition + 5);
+      } else {
+        // New text is 'text_before_selection(selection)[]text_after_selection'
+        const newString = `${text.slice(0, startPosition)}[${selection}](url)${text.slice(endPosition)}`;
+        this.$refs.textarea.value = newString;
+        this.value = newString;
+        this.$refs.textarea.setSelectionRange( // Put cursor in other [] field
+          startPosition + selection.length + 3,
+          startPosition + selection.length + 6,
+        );
+      }
+    }
+
+    validURL(str:string) {
+      const pattern = new RegExp('^(https?:\\/\\/)?' // protocol
+    + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain name
+    + '((\\d{1,3}\\.){3}\\d{1,3}))' // OR ip (v4) address
+    + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' // port and path
+    + '(\\?[;&a-z\\d%_.~+=-]*)?' // query string
+    + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+      return !!pattern.test(str);
+    }
+
+    wrapText(inside:string) {
+      // Place focus back on textarea
+      this.$refs.textarea.focus();
+      // Get bounds of selection
+      const startPosition = this.$refs.textarea.selectionStart;
+      const endPosition = this.$refs.textarea.selectionEnd;
+      const text = this.$refs.textarea.value;
+      /* Concatenates:
+       - Textarea value up to selection
+       - What selection should be wrapped in
+       - Text in selection
+       - What selection should be wrapped in
+       - Textarea value after selection
+
+       Returns 'text_before_selection+char+selection+char+text_after_selection'
+      */
+      const newText = `${text.slice(0, startPosition)}${inside}${text.slice(startPosition, endPosition)}${inside}${text.slice(endPosition)}`;
+      this.$refs.textarea.value = newText;
+      this.$refs.textarea.setSelectionRange( // Moves cursor in between wrapped text
+        startPosition + inside.length / 2,
+        endPosition + inside.length / 2,
+      );
+    }
+
+    wrapOrInsert(str:string, two:Boolean) {
+      const startPosition = this.$refs.textarea.selectionStart; // Gets bounds of selection
+      const endPosition = this.$refs.textarea.selectionEnd;
+      if (startPosition === endPosition) { // If text is not selected, insert at cursor location
+        this.insertCharacter(str, true); // For the first insertion, keep the cursor location
+        if (two) { // If there should be two characters (for markdown when no selection)
+          this.insertCharacter(str, false); // Insert again and move the cursor back
+        }
+      } else { // If text selected, wrap selection
+        this.wrapText(str);
+        // Set cursor in between original selection
+        this.$refs.textarea.setSelectionRange(startPosition - 1, endPosition - 1);
+      }
+      this.$nextTick(() => this.$forceUpdate());
+    }
+
     @Prop()
     disabled!: boolean;
 
-    @Prop()
-    value!: string;
+    value = '';
 
     $refs!: {
       hiddenDiv: HTMLFormElement;
+      textarea: HTMLTextAreaElement;
     };
 
-    onInput(event: any) {
-      this.$emit('input', event.target.value);
-    }
-
     onKeyPress(event: any) {
       this.$emit('keypress', event);
     }
@@ -68,15 +166,15 @@
     resize: none;
     overflow: hidden;
     position: absolute;
-    top: 0px;
+    bottom: 0px;
     padding: 0;
     color:black;
     background-color:white;
     border:#343a40 1px solid;
     border-radius:8px;
     outline: none;
-    padding-right:25px;
-    width:calc(100% - 27px) !important;
+    padding-right:20px;
+    width:calc(100% - 22px) !important;
   }
 
   .scalable-input:focus {
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index 0b7eff93..e9acdb29 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -28,11 +28,12 @@
     border:none;
     background-image: url("../assets/send-button.png");
     background-repeat: no-repeat;
-    background-size: 60% 60%;
+    background-size: 70% 70%;
     background-position: center;
     height: 30px;
     width: 25px;
     transition: transform 0.5s;
+    margin:0;
   }
   .send-button:active {
     transform:translateX(3px);
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 5d5988e3..d6acea21 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -230,6 +230,15 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.usernameColor) {
+        try {
+          this.usernameColor = localStorage.usernameColor;
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of username color',
+          );
+        }
+      }
     }
 
     if (process.env.VUE_APP_SERVER_URL) {
@@ -317,7 +326,6 @@ export default class ChatModule extends VuexModule {
     ) => {
       this.postMessage(new Message(message, channel, user, isAction));
     };
-
     let message = rawMessage.trim();
     let isAction = false;
     // No posting as annon or if nothing has been actually posted
@@ -426,7 +434,7 @@ export default class ChatModule extends VuexModule {
           }
           const msg = new Message(message, channel, this.currentUser, isAction);
           if (this.usernameColor !== undefined && this.usernameColor !== '') {
-            msg.tags = { 'username-color': this.usernameColor };
+            msg.tags['username-color'] = this.usernameColor;
           }
           this.postMessage(msg);
         } else {

From b2b32a64fb184bf4f512ca547f65c4f907f8d9ff Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 27 May 2020 16:21:41 -0500
Subject: [PATCH 074/223] Further functionality and minor fixes

---
 src/app/components/Emoticons/EmoticonBar.vue  |  80 +++++++++--
 .../Emoticons/MarkdownWrapButton.vue          |  23 ++-
 src/app/components/Panes/MessagePane.vue      |  20 ++-
 src/app/components/Panes/Pane.vue             |  13 +-
 src/app/components/ScalableInput.vue          |  40 ++++--
 src/app/components/Slideout/SlideoutChats.vue |   3 +-
 .../components/Slideout/SlideoutSettings.vue  | 135 +++++++++++++++++-
 src/app/store/chat.vuex.ts                    |  76 +++++++---
 src/app/store/settings.vuex.ts                |   6 +
 9 files changed, 345 insertions(+), 51 deletions(-)

diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 2dbd6760..e1b7eb34 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -1,21 +1,59 @@
 <template>
   <div id='emoticon-bar-container'>
-    <ExpandButton @expand="expand" class="border-left" />
-    <EmoticonButton emoticon="👍" class="border-left" @emote='add'/>
-    <EmoticonButton emoticon="👎" class="border-left" @emote='add'/>
-    <EmoticonButton emoticon="🙂" class="border-left" @emote='add'/>
+    <ExpandButton @expand="expand" class="border-left" v-if="emoticonChatFeatures"/>
+    <EmoticonButton emoticon="👍" class="border-left" @emote='add' v-if="emoticonChatFeatures"/>
+    <EmoticonButton emoticon="👎" class="border-left" @emote='add' v-if="emoticonChatFeatures"/>
+    <EmoticonButton emoticon="🙂" class="border-left" @emote='add' v-if="emoticonChatFeatures"/>
     <EmoticonButton
       v-for="emoticon in emotesList"
       :key="emoticon"
       :emoticon='emoticon'
       class="border-left"
-      v-show="value"
+      v-show="value && emoticonChatFeatures"
       @emote='add' />
-    <MarkdownWrapButton name="B" bold=true class="border-left" @md="format"/>
-    <MarkdownWrapButton name="I" italics=true class="border-left" @md="format"/>
-    <MarkdownWrapButton name="S" id="strike" strikethrough=true class="border-left" @md="format"/>
-    <MarkdownWrapButton name="C" code=true class="border-left" @md="format"/>
-    <MarkdownWrapButton name="L" link=true class="border-left" @md="format"/>
+    <MarkdownWrapButton
+      name="B"
+      bold=true
+      class="border-left"
+      @md="format"
+      v-if="markdownChatFeatures" />
+      <MarkdownWrapButton
+      name="T"
+      italics=true
+      class="border-left"
+      @md="format"
+      v-if="markdownChatFeatures" />
+      <MarkdownWrapButton
+      name="S"
+      strikethrough=true
+      id="strike"
+      class="border-left"
+      @md="format"
+      v-if="markdownChatFeatures" />
+      <MarkdownWrapButton
+      name="C"
+      code=true
+      class="border-left"
+      @md="format"
+      v-if="markdownChatFeatures" />
+      <MarkdownWrapButton
+      name="L"
+      link=true
+      class="border-left"
+      @md="format"
+      v-if="markdownChatFeatures" />
+      <MarkdownWrapButton
+      name="A"
+      action=true
+      class="border-left"
+      @md="format"
+      v-if="markdownChatFeatures" />
+      <MarkdownWrapButton
+      name="?"
+      question=true
+      class="border-left"
+      @md="format"
+      v-if="markdownChatFeatures" />
   </div>
 </template>
 <script lang='ts'>
@@ -51,19 +89,33 @@
     format(options:string) {
       this.$emit('md', options);
     }
+
+    get emoticonChatFeatures() {
+      return this.$vxm.settings.emoticonChatFeatures;
+    }
+
+    get markdownChatFeatures() {
+      return this.$vxm.settings.markdownChatFeatures;
+    }
+
+    get allChatFeatures() {
+      if (this.$vxm.settings.allChatFeatures) {
+        return true;
+      }
+      return (this.markdownChatFeatures || this.emoticonChatFeatures);
+    }
   }
 </script>
 <style scoped>
 #emoticon-bar-container {
-  position: sticky;
-  right:0px;
-  top:0px;
+  position: relative;
+  top:0;
   background-color:white;
   width:calc(100% - 2px);
   border-radius:8px;
   height:25px;
   margin-bottom:5px;
-  overflow-x:hidden;
+  overflow:hidden;
 }
 .border-left {
   border-left: 1px solid black;
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index 558f1755..1762feaf 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -1,10 +1,12 @@
 <template>
   <div id='md-wrap-button-container' class='md-button' @click="clicked">
     <strong class="text" v-if="b">B</strong>
-    <em class="text" v-if="i">I</em>
+    <em class="text" v-if="i">T</em>
     <div class="text" id="s" v-if="s">S</div>
     <code class="text" v-if="c">C</code>
     <u class="text" v-if="l">L</u>
+    <strong class="text" id="action" v-if="a"><em>me</em></strong>
+    <p class="text" v-if="q">?</p>
   </div>
 </template>
 <script lang='ts'>
@@ -29,6 +31,12 @@
     @Prop()
     link !: boolean;
 
+    @Prop()
+    action !: boolean;
+
+    @Prop()
+    question !: boolean;
+
     get c() {
       return this.code;
     }
@@ -49,6 +57,14 @@
       return this.link;
     }
 
+    get a() {
+      return this.action;
+    }
+
+    get q() {
+      return this.question;
+    }
+
     clicked() {
       this.$emit('md', this.name);
     }
@@ -83,4 +99,9 @@
   #s:after {
     content: "\00a0\00a0";
   }
+
+  #action {
+    font-size:12px;
+    padding-left:1px;
+  }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index b188b3fa..d2d0d7c1 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -10,7 +10,12 @@
       <ConnectingMessage/>
     </ul>
     <template v-slot:footer>
-      <EmoticonBar @emote="add" @expanded="changeWrap" @md="format"/>
+      <EmoticonBar
+        @emote="add"
+        @expanded="changeWrap"
+        @md="format"
+        v-if="allChatFeatures"
+      />
       <ScalableInput
         v-model="newMessage"
         id="input"
@@ -87,6 +92,17 @@
       return `${this.$vxm.settings.fontSize.toString()}px`;
     }
 
+    get allChatFeatures() {
+      return (this.$vxm.settings.allChatFeatures
+      || this.$vxm.settings.emoticonChatFeatures
+      || this.$vxm.settings.markdownChatFeatures);
+    }
+
+    @Watch('allChatFeatures')
+    chatFeaturesChanged() {
+      this.$nextTick(this.$refs.pane.updateFooterHeight);
+    }
+
     send() {
       this.$emit('postMessage', this.newMessage);
       this.newMessage = '';
@@ -100,6 +116,8 @@
         case 'S': this.$refs.input.wrapOrInsert('~~', true); break;
         case 'C': this.$refs.input.wrapOrInsert('`', true); break;
         case 'L': this.$refs.input.insertLink(); break;
+        case 'A': this.$refs.input.insertString(0, '/me '); break;
+        case '?': this.$refs.input.insertString(0, '/help '); break;
         default: break;
       }
     }
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index e855320d..e8260837 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -14,7 +14,7 @@
       </VuePerfectScrollbar>
     </div>
 
-    <div ref="footer" style="overflow: auto; padding: 5px; 10px;">
+    <div ref="footer" id="footer">
       <slot name="footer"/>
     </div>
   </div>
@@ -96,4 +96,15 @@
   .ps.ps--active-y > .ps__scrollbar-y-rail {
     background-color: transparent !important;
   }
+  #footer {
+    overflow: auto;
+    padding: 5px;
+    position:relative;
+    bottom:0px;
+    position:absolute;
+    width:calc(100% - 10px);
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: fill-available;
+  }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 051ab981..145290a7 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -52,27 +52,45 @@
       this.$emit('input', new KeyboardEvent('keypress', { key: char }));
     }
 
+    insertString(at:number, str:string) {
+      this.$refs.textarea.focus();
+      const text = this.$refs.textarea.value;
+      const newText = `${text.slice(0, at)}${str}${text.slice(at)}`;
+      this.$refs.textarea.value = newText;
+      this.value = newText;
+    }
+
     insertLink() {
       this.$refs.textarea.focus(); // Focus on textarea
       const startPosition = this.$refs.textarea.selectionStart; // Start and end of selection
       const endPosition = this.$refs.textarea.selectionEnd;
       const text = this.$refs.textarea.value; // All text
       const selection = text.substring(startPosition, endPosition); // Selected text
-      if (this.validURL(text)) { // If the user selected a URL
-        // New text is 'text_before_selection[](selection)text_after_selection
-        const newString = `${text.slice(0, startPosition)}[text](${selection})${text.slice(endPosition)}`;
-        this.$refs.textarea.value = newString;
-        this.value = newString;
-        // Put cursor in other [] field
-        this.$refs.textarea.setSelectionRange(startPosition + 1, startPosition + 5);
+      if (startPosition !== endPosition) {
+        if (this.validURL(text)) { // If the user selected a URL
+          // New text is 'text_before_selection[](selection)text_after_selection
+          const newString = `${text.slice(0, startPosition)}[text](${selection})${text.slice(endPosition)}`;
+          this.$refs.textarea.value = newString;
+          this.value = newString;
+          // Put cursor in other [] field
+          this.$refs.textarea.setSelectionRange(startPosition + 1, startPosition + 5);
+        } else {
+          // New text is 'text_before_selection(selection)[]text_after_selection'
+          const newString = `${text.slice(0, startPosition)}[${selection}](url)${text.slice(endPosition)}`;
+          this.$refs.textarea.value = newString;
+          this.value = newString;
+          this.$refs.textarea.setSelectionRange( // Put cursor in other [] field
+            startPosition + selection.length + 3,
+            startPosition + selection.length + 6,
+          );
+        }
       } else {
-        // New text is 'text_before_selection(selection)[]text_after_selection'
-        const newString = `${text.slice(0, startPosition)}[${selection}](url)${text.slice(endPosition)}`;
+        const newString = `${text.slice(0, startPosition)}[text](url)${text.slice(endPosition)}`;
         this.$refs.textarea.value = newString;
         this.value = newString;
         this.$refs.textarea.setSelectionRange( // Put cursor in other [] field
-          startPosition + selection.length + 3,
-          startPosition + selection.length + 6,
+          startPosition + 1,
+          endPosition + 5,
         );
       }
     }
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 012454de..c6a15fd6 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -36,9 +36,10 @@
     activeTab = 4; // If 1-3, causes weird bug. This fixes it
 
     channelDescriptions: {[channel:string]:string} = {
-    '#General': 'General chat',
+    '#general': 'General chat',
     '#off-topic': 'Off-topic chat',
     '#help': 'Help requests',
+    '#labs': 'Discussion related to labs',
     };
 
     get messageTabs() {
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 3e6358bd..8d6a8f07 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -76,7 +76,7 @@
       </table>
       <h4>Indicator</h4>
       <p>
-        This is the indicator that will appear in the page title if you have notifications
+        This will appear in the page title if you have notifications
       </p>
       <input type=text v-model="indicator">
     </section>
@@ -84,6 +84,52 @@
       <h3>Username Color</h3>
       <ColorPicker />
     </section>
+    <section>
+      <h3>Chat Features</h3>
+      <p>
+        These enable you to send emoticons and formatted text.
+      </p>
+      <table>
+        <tr>
+          <td class="feature-button-container left-side">
+            <button
+              @click="toggleMarkdown"
+              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+              class="green-button" >
+              {{markdownChatFeatures ? 'Disable' : 'Enable'}} markdown
+            </button>
+          </td>
+          <td class="feature-button-container">
+            <button
+              @click="toggleEmoticons"
+              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+              class="green-button feature-button" >
+              {{emoticonChatFeatures ? 'Disable' : 'Enable'}} emoticons
+            </button>
+          </td>
+        </tr>
+        <tr>
+          <td class="feature-button-container left-side">
+            <button
+              @click="disableAllChatFeatures"
+              :disabled="!allChatFeatures"
+              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+              class="green-button feature-button" >
+              Disable all
+            </button>
+          </td>
+          <td class="feature-button-container">
+            <button
+              @click="enableAllChatFeatures"
+              :disabled="allChatFeatures"
+              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+              class="green-button feature-button" >
+              Enable all
+           </button>
+          </td>
+        </tr>
+      </table>
+    </section>
   </div>
 </template>
 <script lang="ts">
@@ -108,6 +154,12 @@
 
     indicator:string = '(!)';
 
+    allChatFeatures = true;
+
+    emoticonChatFeatures = true;
+
+    markdownChatFeatures = true;
+
     // Gets a list of ignored users
     get ignoredUsers() {
       return this.$vxm.chat.ignoredUsers;
@@ -135,6 +187,77 @@
       } else {
         this.indicator = this.$vxm.settings.indicator;
       }
+      if (localStorage.allChatFeatures) {
+        this.allChatFeatures = JSON.parse(localStorage.allChatFeatures);
+      } else {
+        this.allChatFeatures = this.$vxm.settings.allChatFeatures;
+      }
+      if (localStorage.emoticonChatFeatures) {
+        this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
+      } else {
+        this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
+      }
+      if (localStorage.markdownChatFeatures) {
+        this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
+      } else {
+        this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
+      }
+    }
+
+    toggleEmoticons() {
+      this.emoticonChatFeatures = !this.emoticonChatFeatures;
+      if (this.emoticonChatFeatures && this.markdownChatFeatures) {
+        this.allChatFeatures = this.emoticonChatFeatures;
+        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+      }
+      if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
+        this.allChatFeatures = this.emoticonChatFeatures;
+        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+      }
+      this.$vxm.settings.emoticonChatFeatures = this.emoticonChatFeatures;
+      localStorage.emoticonChatFeatures = JSON.stringify(this.emoticonChatFeatures);
+    }
+
+    toggleMarkdown() {
+      this.markdownChatFeatures = !this.markdownChatFeatures;
+      if (this.emoticonChatFeatures && this.markdownChatFeatures) {
+        this.allChatFeatures = this.markdownChatFeatures;
+        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+      }
+      if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
+        this.allChatFeatures = this.markdownChatFeatures;
+        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+      }
+      this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
+      localStorage.markdownChatFeatures = JSON.stringify(this.markdownChatFeatures);
+    }
+
+    toggleAllChatFeatures() {
+      this.allChatFeatures = !this.allChatFeatures;
+      this.emoticonChatFeatures = this.allChatFeatures;
+      this.markdownChatFeatures = this.allChatFeatures;
+      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+      this.$vxm.settings.emoticonChatFeatures = this.allChatFeatures;
+      localStorage.emoticonChatFeatures = JSON.stringify(this.allChatFeatures);
+      this.$vxm.settings.markdownChatFeatures = this.allChatFeatures;
+      localStorage.markdownChatFeatures = JSON.stringify(this.allChatFeatures);
+    }
+
+    enableAllChatFeatures() {
+      if (!this.allChatFeatures) {
+        this.toggleAllChatFeatures();
+      }
+    }
+
+    disableAllChatFeatures() {
+      if (this.allChatFeatures) {
+        this.toggleAllChatFeatures();
+      }
     }
 
     // Updates global font size when input changes
@@ -296,4 +419,14 @@ td { /* Table cell in notifications settings section */
 table {
   margin-top:2px;
 }
+.feature-button-container {
+  padding:2px;
+}
+.feature-button {
+  float:left;
+  width:95%;
+}
+.left-side {
+  padding-left:0;
+}
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index d6acea21..9a6542ff 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -54,7 +54,7 @@ class ConnectionData {
   }
 }
 
-const channelNames = ['#general', '#off-topic', '#help'] as const;
+const channelNames = ['#general', '#off-topic', '#help', '#labs'] as const;
 
 export default class ChatModule extends VuexModule {
   toBePosted: Message[] = [];
@@ -342,36 +342,44 @@ export default class ChatModule extends VuexModule {
           case 'help':
             switch (params) {
               case 'me':
-                postMessage('/me: Posts message formatted as an action');
-                postMessage('Usage: /me <message>');
-                postMessage('Example: /me laughs');
+                postMessage('`/me`: Posts message formatted as an action');
+                postMessage('Usage: `/me <message>`');
+                postMessage('Example: `/me laughs`');
                 break;
               case 'ignore':
                 postMessage(
-                  "/ignore: Don't show messages from a particular message. Show currently ignored users with /ignore-list. Unignore message with /unignore.",
+                  "`/ignore`: Don't show messages from a particular message. Show currently ignored users with `/ignore-list`. Unignore message with `/unignore.`",
                 );
-                postMessage('Usage: /ignore <username>');
-                postMessage('Example: /ignore player1');
+                postMessage('Usage: `/ignore <username>`');
+                postMessage('Example: `/ignore player1`');
                 break;
               case 'ignore-list':
                 postMessage(
-                  '/ignore-list: Shows currently ignored users. Ignore a message with /ignore. Unignore message with /unignore.',
+                  '`/ignore-list`: Shows currently ignored users. Ignore a user with `/ignore`. Unignore the user with `/unignore.` or use the settings tab in the slideout',
                 );
-                postMessage('Usage: /ignore-list');
-                postMessage('Example: /ignore-list');
+                postMessage('Usage: `/ignore-list`');
+                postMessage('Example: `/ignore-list`');
                 break;
               case 'unignore':
                 postMessage(
-                  '/unignore: Shows messages from a message after being igored. Unignores all users when username is *. Ignore a message with /ignore. Show currently ignored users with /ignore-list.',
+                  '`/unignore`: Shows messages from a previously ignored user. Unignores all users when argument is *. Ignore a user with `/ignore`. Show currently ignored users with /ignore-list. Alternatively, use the settings tab in the slideout.',
                 );
-                postMessage('Usage: /unignore <username>');
-                postMessage('Example: /unignore player1');
-                postMessage('Example: /unignore *');
+                postMessage('Usage: `/unignore <username>`');
+                postMessage('Example: `/unignore player1`');
+                postMessage('Example: `/unignore *`');
+                break;
+              case 'change':
+                postMessage(
+                  '`/change`: Changes the current channel to the channel specified',
+                );
+                postMessage('Usage: `/change <channel>`');
+                postMessage('Example: `/change general`');
+                postMessage('Example: `/change #general`');
                 break;
               default:
-                postMessage('Available commands: help, me, ignore, ignore-list, unignore');
-                postMessage('Type /help <command> for information on individual commands');
-                postMessage('Example: /help ignore');
+                postMessage('Available commands: help, me, ignore, ignore-list, unignore, change');
+                postMessage('Type `/help <command>` for information on individual commands');
+                postMessage('Example: `/help ignore`');
                 postMessage(
                   'Additional commands available via LinkBot (see the [wiki](http://eternawiki.org/wiki/index.php5/HELP) for more information)',
                 );
@@ -390,7 +398,7 @@ export default class ChatModule extends VuexModule {
           case 'me':
             if (!params) {
               postMessage(
-                'Please include command parameters. Type /help me for usage instructions',
+                'Please include command parameters. Type `/help me` for usage instructions',
               );
               break;
             }
@@ -401,7 +409,7 @@ export default class ChatModule extends VuexModule {
           case 'ignore':
             if (!params) {
               postMessage(
-                'Please include command parameters. Type /help ignore for more usage instructions',
+                'Please include command parameters. Type `/help ignore` for more usage instructions',
               );
               break;
             }
@@ -413,14 +421,40 @@ export default class ChatModule extends VuexModule {
           case 'unignore':
             if (!params) {
               postMessage(
-                'Please include command parameters. Type /help unignore for more usage instructions',
+                'Please include command parameters. Type `/help unignore` for more usage instructions',
               );
               break;
             }
             this.unignoreUser(params);
             break;
+          case 'change':
+            if (!params) {
+              postMessage(
+                'Please include command parameters. Type `/help change` for more usage instructions',
+              );
+              break;
+            }
+            /* There's a lot going on here.
+             - channelNames.slice() returns a copy of the channelNames array
+             - channelNames.slice() as [string] ensures that it can be indexed
+             by any string, not just the specific channel names
+             - `#${params}`.replace('##', '#') makes sure that the channel name has a # in front
+             It adds one and then removes it if there are duplicates
+             - .indexOf() gets the position of params in the array
+             This gets the tab number.
+
+             If the number is -1, the name was invalid. It gives an error message and a channel list
+             If the number was not -1, the name worked. It sets the tab to the channel.
+            */
+            if ((channelNames.slice() as [string]).indexOf(`#${params}`.replace('##', '#')) === -1) {
+              postMessage(`Channel name invalid. Channels are ${channelNames.join(', ')}`);
+            } else {
+              this.tab = (channelNames.slice() as [string]).indexOf(`#${params}`.replace('##', '#'));
+              this.chatChannel = params;
+            }
+            break;
           default:
-            postMessage('Invalid command. Type /help for more available commands');
+            postMessage('Invalid command. Type `/help` for more available commands');
             break;
         }
       }
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index bfed99c6..2927e154 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -13,4 +13,10 @@ export default class SettingsModule extends VuexModule {
   fontSize: Number = 14;
 
   indicator: string = ' (!)';
+
+  allChatFeatures = true;
+
+  emoticonChatFeatures = true;
+
+  markdownChatFeatures = true;
 }

From eda41c58a3346c6aea32ece357fc731e49d2faa0 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 27 May 2020 16:54:54 -0500
Subject: [PATCH 075/223] Bug fixes

---
 src/app/components/Emoticons/EmoticonBar.vue  | 48 ++++---------
 .../Emoticons/MarkdownWrapButton.vue          | 67 +++----------------
 src/app/components/Panes/MessagePane.vue      | 36 ++++------
 src/app/components/Panes/Pane.vue             |  7 +-
 src/app/components/ScalableInput.vue          | 27 +++-----
 5 files changed, 52 insertions(+), 133 deletions(-)

diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index e1b7eb34..6891b147 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -12,45 +12,38 @@
       v-show="value && emoticonChatFeatures"
       @emote='add' />
     <MarkdownWrapButton
-      name="B"
-      bold=true
+      type="bold"
       class="border-left"
       @md="format"
       v-if="markdownChatFeatures" />
       <MarkdownWrapButton
-      name="T"
-      italics=true
+      type="italics"
       class="border-left"
       @md="format"
       v-if="markdownChatFeatures" />
       <MarkdownWrapButton
-      name="S"
-      strikethrough=true
+      type="strikethrough"
       id="strike"
       class="border-left"
       @md="format"
       v-if="markdownChatFeatures" />
       <MarkdownWrapButton
-      name="C"
-      code=true
+      type="code"
       class="border-left"
       @md="format"
       v-if="markdownChatFeatures" />
       <MarkdownWrapButton
-      name="L"
-      link=true
+      type="link"
       class="border-left"
       @md="format"
       v-if="markdownChatFeatures" />
       <MarkdownWrapButton
-      name="A"
-      action=true
+      type="action"
       class="border-left"
       @md="format"
       v-if="markdownChatFeatures" />
       <MarkdownWrapButton
-      name="?"
-      question=true
+      type="question"
       class="border-left"
       @md="format"
       v-if="markdownChatFeatures" />
@@ -75,55 +68,42 @@
   export default class EmoticonBar extends Vue {
     value = false;
 
-    emotesList = ['🙁', '😡'];
+    emotesList = ['🙁', '😡']; // Emotes that appear when expanded
 
     expand(val:boolean) {
-      this.$emit('expanded', val);
       this.value = val;
     }
 
-    add(emote:string) {
+    add(emote:string) { // Emits event to MessagePane
       this.$emit('emote', emote);
     }
 
-    format(options:string) {
+    format(options:string) { // Emits event to MessagePane
       this.$emit('md', options);
     }
 
-    get emoticonChatFeatures() {
+    get emoticonChatFeatures() { // Gets values from settings vuex
       return this.$vxm.settings.emoticonChatFeatures;
     }
 
     get markdownChatFeatures() {
       return this.$vxm.settings.markdownChatFeatures;
     }
-
-    get allChatFeatures() {
-      if (this.$vxm.settings.allChatFeatures) {
-        return true;
-      }
-      return (this.markdownChatFeatures || this.emoticonChatFeatures);
-    }
   }
 </script>
 <style scoped>
 #emoticon-bar-container {
-  position: relative;
-  top:0;
   background-color:white;
-  width:calc(100% - 2px);
+  width:calc(100% - 2px); /* Same width as textarea */
   border-radius:8px;
   height:25px;
   margin-bottom:5px;
-  overflow:hidden;
+  overflow:hidden; /* Prevents awkward scrolling and overflow */
 }
 .border-left {
   border-left: 1px solid black;
 }
-.border-right {
-  border-right: 1px solid black;
-}
-#strike {
+#strike { /* Strikethrough isn't cut off */
   padding:2px;
   padding-right:2px;
   overflow-x:hidden;
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index 1762feaf..e7518315 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -1,12 +1,12 @@
 <template>
   <div id='md-wrap-button-container' class='md-button' @click="clicked">
-    <strong class="text" v-if="b">B</strong>
-    <em class="text" v-if="i">T</em>
-    <div class="text" id="s" v-if="s">S</div>
-    <code class="text" v-if="c">C</code>
-    <u class="text" v-if="l">L</u>
-    <strong class="text" id="action" v-if="a"><em>me</em></strong>
-    <p class="text" v-if="q">?</p>
+    <strong class="text" v-if="typeIs('bold')">B</strong>
+    <em class="text" v-if="typeIs('italics')">T</em>
+    <div class="text" id="s" v-if="typeIs('strikethrough')">S</div>
+    <code class="text" v-if="typeIs('code')">C</code>
+    <u class="text" v-if="typeIs('link')">L</u>
+    <strong class="text" id="action" v-if="typeIs('action')"><em>me</em></strong>
+    <p class="text" v-if="typeIs('question')">?</p>
   </div>
 </template>
 <script lang='ts'>
@@ -14,59 +14,14 @@
   @Component
   export default class MarkdownWrapButton extends Vue {
     @Prop()
-    name !: string;
+    type !: string;
 
-    @Prop()
-    italics !: boolean;
-
-    @Prop()
-    bold !: boolean;
-
-    @Prop()
-    strikethrough !: boolean;
-
-    @Prop()
-    code !: boolean;
-
-    @Prop()
-    link !: boolean;
-
-    @Prop()
-    action !: boolean;
-
-    @Prop()
-    question !: boolean;
-
-    get c() {
-      return this.code;
-    }
-
-    get i() {
-      return this.italics;
-    }
-
-    get b() {
-      return this.bold;
-    }
-
-    get s() {
-      return this.strikethrough;
-    }
-
-    get l() {
-      return this.link;
-    }
-
-    get a() {
-      return this.action;
-    }
-
-    get q() {
-      return this.question;
+    typeIs(type:string) {
+      return this.type === type;
     }
 
     clicked() {
-      this.$emit('md', this.name);
+      this.$emit('md', this.type);
     }
   }
 </script>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index d2d0d7c1..8f23b6a1 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -12,9 +12,8 @@
     <template v-slot:footer>
       <EmoticonBar
         @emote="add"
-        @expanded="changeWrap"
         @md="format"
-        v-if="allChatFeatures"
+        v-if="anyChatFeatures"
       />
       <ScalableInput
         v-model="newMessage"
@@ -68,8 +67,6 @@
 
     newMessage: string = '';
 
-    emoticonsOut: Boolean = false;
-
     get connectionData() {
       return this.$vxm.chat.connectionData;
     }
@@ -83,26 +80,24 @@
           || this.connectionData.firstConnection;
     }
 
-    get showInput() {
-      return this.input && !this.emoticonsOut;
-    }
-
     // Updates font size
     get fontSize() {
       return `${this.$vxm.settings.fontSize.toString()}px`;
     }
 
-    get allChatFeatures() {
+    get anyChatFeatures() { // Checks if any chat features are enabled
       return (this.$vxm.settings.allChatFeatures
       || this.$vxm.settings.emoticonChatFeatures
       || this.$vxm.settings.markdownChatFeatures);
     }
 
-    @Watch('allChatFeatures')
+    // Updates footer height when chat disappears/appears
+    @Watch('anyChatFeatures')
     chatFeaturesChanged() {
       this.$nextTick(this.$refs.pane.updateFooterHeight);
     }
 
+    // For send button
     send() {
       this.$emit('postMessage', this.newMessage);
       this.newMessage = '';
@@ -110,27 +105,24 @@
     }
 
     format(options:string) {
+      // Adds markdown formatting
       switch (options) {
-        case 'B': this.$refs.input.wrapOrInsert('**', true); break;
-        case 'I': this.$refs.input.wrapOrInsert('*', true); break;
-        case 'S': this.$refs.input.wrapOrInsert('~~', true); break;
-        case 'C': this.$refs.input.wrapOrInsert('`', true); break;
-        case 'L': this.$refs.input.insertLink(); break;
-        case 'A': this.$refs.input.insertString(0, '/me '); break;
-        case '?': this.$refs.input.insertString(0, '/help '); break;
+        case 'bold': this.$refs.input.wrapOrInsert('**', true); break;
+        case 'italics': this.$refs.input.wrapOrInsert('*', true); break;
+        case 'strikethrough': this.$refs.input.wrapOrInsert('~~', true); break;
+        case 'code': this.$refs.input.wrapOrInsert('`', true); break;
+        case 'link': this.$refs.input.insertLink(); break;
+        case 'action': this.$refs.input.insertString(0, '/me '); break;
+        case 'question': this.$refs.input.insertString(0, '/help '); break;
         default: break;
       }
     }
 
-    add(emote:string) {
+    add(emote:string) { // Inserts an emote at cursor position
       this.$refs.input.insertCharacter(emote, true);
       this.newMessage = this.$refs.input.value;
     }
 
-    changeWrap(large:Boolean) {
-      this.emoticonsOut = large;
-    }
-
     $refs!: {
       pane: Pane;
       input: ScalableInput;
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index e8260837..5346c70e 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -99,12 +99,11 @@
   #footer {
     overflow: auto;
     padding: 5px;
-    position:relative;
     bottom:0px;
-    position:absolute;
-    width:calc(100% - 10px);
+    position:absolute; /* Necessary to keep it at the bottom */
+    width:calc(100% - 10px); /* Fallback */
     width: -webkit-fill-available;
     width: -moz-available;
-    width: fill-available;
+    width: fill-available; /* Equivalent of what width was with position:relative */
   }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 145290a7..42b4fb5b 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -21,17 +21,10 @@
   import {
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
-  import SendButton from '@/components/SendButton.vue';
-  @Component({
-    components: {
-      SendButton,
-    },
-  })
+  @Component
   export default class ScalableInput extends Vue {
     height = 0;
 
-    wrap = 25;
-
     insertCharacter(char:string, keepCursor:Boolean) {
       // Set focus back on textarea
       this.$refs.textarea.focus();
@@ -52,6 +45,7 @@
       this.$emit('input', new KeyboardEvent('keypress', { key: char }));
     }
 
+    // Puts string at index in another string. Used for /me and /help insertions
     insertString(at:number, str:string) {
       this.$refs.textarea.focus();
       const text = this.$refs.textarea.value;
@@ -66,7 +60,7 @@
       const endPosition = this.$refs.textarea.selectionEnd;
       const text = this.$refs.textarea.value; // All text
       const selection = text.substring(startPosition, endPosition); // Selected text
-      if (startPosition !== endPosition) {
+      if (startPosition !== endPosition) { // If the user selected text
         if (this.validURL(text)) { // If the user selected a URL
           // New text is 'text_before_selection[](selection)text_after_selection
           const newString = `${text.slice(0, startPosition)}[text](${selection})${text.slice(endPosition)}`;
@@ -74,7 +68,7 @@
           this.value = newString;
           // Put cursor in other [] field
           this.$refs.textarea.setSelectionRange(startPosition + 1, startPosition + 5);
-        } else {
+        } else { // If they didn't
           // New text is 'text_before_selection(selection)[]text_after_selection'
           const newString = `${text.slice(0, startPosition)}[${selection}](url)${text.slice(endPosition)}`;
           this.$refs.textarea.value = newString;
@@ -84,7 +78,7 @@
             startPosition + selection.length + 6,
           );
         }
-      } else {
+      } else { // If the user has not selected text
         const newString = `${text.slice(0, startPosition)}[text](url)${text.slice(endPosition)}`;
         this.$refs.textarea.value = newString;
         this.value = newString;
@@ -95,7 +89,7 @@
       }
     }
 
-    validURL(str:string) {
+    validURL(str:string) { // Used for hyperlink detection
       const pattern = new RegExp('^(https?:\\/\\/)?' // protocol
     + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain name
     + '((\\d{1,3}\\.){3}\\d{1,3}))' // OR ip (v4) address
@@ -123,9 +117,10 @@
       */
       const newText = `${text.slice(0, startPosition)}${inside}${text.slice(startPosition, endPosition)}${inside}${text.slice(endPosition)}`;
       this.$refs.textarea.value = newText;
-      this.$refs.textarea.setSelectionRange( // Moves cursor in between wrapped text
-        startPosition + inside.length / 2,
-        endPosition + inside.length / 2,
+      this.value = newText;
+      this.$refs.textarea.setSelectionRange( // Moves cursor after selection
+        endPosition + inside.length / 2 + 1,
+        endPosition + inside.length / 2 + 1,
       );
     }
 
@@ -139,8 +134,6 @@
         }
       } else { // If text selected, wrap selection
         this.wrapText(str);
-        // Set cursor in between original selection
-        this.$refs.textarea.setSelectionRange(startPosition - 1, endPosition - 1);
       }
       this.$nextTick(() => this.$forceUpdate());
     }

From a5e8983ed43d9d15b2ec242177519b4923f8c0bd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 27 May 2020 17:29:02 -0500
Subject: [PATCH 076/223] Bug fix

---
 src/app/components/Panes/MessagePane.vue | 1 +
 src/app/components/ScalableInput.vue     | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 8f23b6a1..4e0238a3 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -130,6 +130,7 @@
 
     onKeyPress(e: KeyboardEvent) {
       if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+        this.newMessage = this.$refs.input.value;
         this.$emit('postMessage', this.newMessage);
         this.$refs.input.$refs.textarea.value = '';
         this.newMessage = '';
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 42b4fb5b..b1a65564 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -42,7 +42,6 @@
       if (!keepCursor) {
         this.$refs.textarea.setSelectionRange(position, position);
       }
-      this.$emit('input', new KeyboardEvent('keypress', { key: char }));
     }
 
     // Puts string at index in another string. Used for /me and /help insertions
@@ -116,8 +115,8 @@
        Returns 'text_before_selection+char+selection+char+text_after_selection'
       */
       const newText = `${text.slice(0, startPosition)}${inside}${text.slice(startPosition, endPosition)}${inside}${text.slice(endPosition)}`;
-      this.$refs.textarea.value = newText;
       this.value = newText;
+      this.$refs.textarea.value = newText;
       this.$refs.textarea.setSelectionRange( // Moves cursor after selection
         endPosition + inside.length / 2 + 1,
         endPosition + inside.length / 2 + 1,
@@ -135,6 +134,7 @@
       } else { // If text selected, wrap selection
         this.wrapText(str);
       }
+      // Update self
       this.$nextTick(() => this.$forceUpdate());
     }
 

From c8fe188d26a088f1494c9fe80701c7c177a31077 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 28 May 2020 00:46:48 -0500
Subject: [PATCH 077/223] Submenu and styling updates (+ more bug fixes, per
 usual)

---
 src/app/App.vue                               |  14 ++
 src/app/components/Emoticons/EmoticonBar.vue  | 179 ++++++++++++------
 .../components/Emoticons/EmoticonButton.vue   |   4 +-
 .../Emoticons/MarkdownWrapButton.vue          |   8 +-
 src/app/components/Emoticons/MenuButton.vue   |  37 ++++
 src/app/components/Panes/MessagePane.vue      |  18 +-
 src/app/components/ScalableInput.vue          |  46 ++++-
 src/app/components/SendButton.vue             |   2 +-
 src/app/store/chat.vuex.ts                    |   2 +
 9 files changed, 231 insertions(+), 79 deletions(-)
 create mode 100644 src/app/components/Emoticons/MenuButton.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index b29b6ff2..24900a23 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -45,6 +45,12 @@
 
   Vue.use(BootstrapVue);
 
+  Vue.component('v-style', {
+    render: function c(createElement) {
+      return createElement('style', this.$slots.default);
+    },
+  });
+
 @Component({
   components: {
     DraggableDiv,
@@ -114,10 +120,18 @@
     });
   }
 
+  key(e:KeyboardEvent) {
+    if (e.code === 'Tab') {
+      this.$vxm.chat.tabbing = true;
+      window.removeEventListener('keydown', this.key);
+    }
+  }
+
   created() {
     this.$vxm.chat.$subscribe('openReportModal', (payload) => {
       this.$refs.reportDialog.open(payload);
     });
+    window.addEventListener('keydown', this.key);
   }
 
   @Watch('minimized')
diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 6891b147..8b31b94e 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -1,52 +1,57 @@
 <template>
-  <div id='emoticon-bar-container'>
-    <ExpandButton @expand="expand" class="border-left" v-if="emoticonChatFeatures"/>
-    <EmoticonButton emoticon="👍" class="border-left" @emote='add' v-if="emoticonChatFeatures"/>
-    <EmoticonButton emoticon="👎" class="border-left" @emote='add' v-if="emoticonChatFeatures"/>
-    <EmoticonButton emoticon="🙂" class="border-left" @emote='add' v-if="emoticonChatFeatures"/>
-    <EmoticonButton
-      v-for="emoticon in emotesList"
-      :key="emoticon"
-      :emoticon='emoticon'
-      class="border-left"
-      v-show="value && emoticonChatFeatures"
-      @emote='add' />
-    <MarkdownWrapButton
-      type="bold"
-      class="border-left"
-      @md="format"
-      v-if="markdownChatFeatures" />
-      <MarkdownWrapButton
-      type="italics"
-      class="border-left"
-      @md="format"
-      v-if="markdownChatFeatures" />
-      <MarkdownWrapButton
-      type="strikethrough"
-      id="strike"
-      class="border-left"
-      @md="format"
-      v-if="markdownChatFeatures" />
-      <MarkdownWrapButton
-      type="code"
-      class="border-left"
-      @md="format"
-      v-if="markdownChatFeatures" />
-      <MarkdownWrapButton
-      type="link"
-      class="border-left"
-      @md="format"
-      v-if="markdownChatFeatures" />
-      <MarkdownWrapButton
-      type="action"
-      class="border-left"
-      @md="format"
-      v-if="markdownChatFeatures" />
-      <MarkdownWrapButton
-      type="question"
-      class="border-left"
-      @md="format"
-      v-if="markdownChatFeatures" />
+  <div id='menu-container'>
+    <div
+      id='emoticon-bar-container'
+      :style="{
+        'border-bottom-right-radius': radius,
+        'border-bottom-left-radius': radius,
+        'border-bottom-width': border,
+      }" >
+      <MenuButton
+        id="emoticonSelect"
+        name="👍"
+        styles=""
+        @button="select(false);"
+      />
+      <MenuButton
+        id="markdownSelect"
+        name="MD"
+        styles="bold italics underline"
+        @button="select(true);"
+      />
+      <MenuButton
+        name="?"
+        class="other-menu-button"
+        styles=""
+        @button="menuButtonClicked"
+      />
+    </div>
+    <div id='submenu' v-show='emoticonsSelected || markdownSelected'>
+      <div id='emoticon-submenu' v-show="emoticonsSelected">
+        <EmoticonButton
+          v-for="emoticon in emotesList"
+          :key="emoticon"
+          :emoticon='emoticon'
+          class="border-right"
+          @emote='add' />
+      </div>
+      <div id='markdown-submenu' v-show="markdownSelected">
+        <MarkdownWrapButton
+          v-for="item in markdownCodes"
+          :key="item"
+          :type="item"
+          class="border-right"
+          @md="format"
+        />
+      </div>
+      <MenuButton
+        id="close"
+        class="other-menu-button"
+        name="X"
+        styles="bold"
+        @button="menuButtonClicked"
+      />
+    </div>
   </div>
 </template>
 <script lang='ts'>
@@ -57,21 +62,64 @@
   import ExpandButton from './ExpandButton.vue';
   import SendButton from '../SendButton.vue';
   import MarkdownWrapButton from './MarkdownWrapButton.vue';
+  import MenuButton from './MenuButton.vue';
   @Component({
     components: {
       SendButton,
       EmoticonButton,
       ExpandButton,
       MarkdownWrapButton,
+      MenuButton,
     },
   })
   export default class EmoticonBar extends Vue {
     value = false;
 
-    emotesList = ['🙁', '😡']; // Emotes that appear when expanded
+    emotesList = ['👍', '👎', '🙂', '🙁', '😡', '😂', '😜', '🤔', '😮']; // Emotes that appear when expanded
 
-    expand(val:boolean) {
-      this.value = val;
+    markdownCodes = ['bold', 'italics', 'italicsbold', 'strikethrough', 'code', 'link', 'action'];
+
+    emoticonsSelected = false;
+
+    markdownSelected = false;
+
+    get radius() {
+      if (!this.emoticonsSelected && !this.markdownSelected) {
+        return '8px';
+      }
+      return '0px';
+    }
+
+    get border() {
+      if (!this.emoticonsSelected && !this.markdownSelected) {
+        return '0px';
+      }
+      return '1px';
+    }
+
+    select(markdown:boolean) {
+      if (markdown) {
+        this.markdownSelected = true;
+        this.emoticonsSelected = false;
+      } else {
+        this.markdownSelected = false;
+        this.emoticonsSelected = true;
+      }
+      this.$emit('update');
+    }
+
+    menuButtonClicked(button:string) {
+      switch (button) {
+        case 'X':
+          this.markdownSelected = false;
+          this.emoticonsSelected = false;
+          break;
+        case '?':
+          this.$emit('md', 'question');
+          break;
+        default: break;
+      }
+      this.$emit('update');
     }
 
     add(emote:string) { // Emits event to MessagePane
@@ -93,15 +141,16 @@
 </script>
 <style scoped>
 #emoticon-bar-container {
-  background-color:white;
+  background-color:#043468;
+  color:white;
   width:calc(100% - 2px); /* Same width as textarea */
-  border-radius:8px;
   height:25px;
-  margin-bottom:5px;
+  border:none;
+  border-bottom:1px solid white;
   overflow:hidden; /* Prevents awkward scrolling and overflow */
 }
-.border-left {
-  border-left: 1px solid black;
+.border-right {
+  border-right: 1px solid white;
 }
 #strike { /* Strikethrough isn't cut off */
   padding:2px;
@@ -109,4 +158,22 @@
   overflow-x:hidden;
   text-align:center;
 }
+#submenu {
+  background-color:#043468;
+  color:white;
+  width:calc(100% - 2px); /* Same width as textarea */
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  height:25px;
+  overflow:hidden; /* Prevents awkward scrolling and overflow */
+}
+.other-menu-button {
+  float:right;
+  border:none;
+  border-left:1px solid white;
+}
+.menu-container {
+  background-color:#043468;
+  color:white;
+}
 </style>
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
index 625e12e6..9f0548c3 100644
--- a/src/app/components/Emoticons/EmoticonButton.vue
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -17,8 +17,10 @@
 </script>
 <style scoped>
   .emoticon-button {
+    background-color:#043468;
+    color:white;
     border:none;
-    float:right;
+    float:left;
     position: relative;
     width:20px;
     height:25px;
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index e7518315..03834cbb 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -7,6 +7,7 @@
     <u class="text" v-if="typeIs('link')">L</u>
     <strong class="text" id="action" v-if="typeIs('action')"><em>me</em></strong>
     <p class="text" v-if="typeIs('question')">?</p>
+    <em class="text" v-if="typeIs('italicsbold')"><strong>E</strong></em>
   </div>
 </template>
 <script lang='ts'>
@@ -27,13 +28,12 @@
 </script>
 <style scoped>
   .md-button {
-    color:black;
+    color:white;
     border:none;
-    float:right;
+    float:left;
     position: relative;
-    width:20px;
+    width:25px;
     height:25px;
-    padding-right:2.5px;
     padding-top:1px;
     text-align:center;
   }
diff --git a/src/app/components/Emoticons/MenuButton.vue b/src/app/components/Emoticons/MenuButton.vue
new file mode 100644
index 00000000..343aa14b
--- /dev/null
+++ b/src/app/components/Emoticons/MenuButton.vue
@@ -0,0 +1,37 @@
+<template>
+  <button
+    class='menu-button'
+    :style="{
+      'font-weight':styles.includes('bold') ? 'bold' : 'normal',
+      'font-style':styles.includes('italics') ? 'italic' : 'normal',
+      'text-decoration':styles.includes('underline') ? 'underline' : 'normal',
+    }"
+    @click="$emit('button', name)"
+  >
+    {{name}}
+  </button>
+</template>
+<script lang='ts'>
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
+  @Component
+  export default class MenuButton extends Vue {
+    @Prop()
+    name!:string;
+
+    @Prop()
+    styles!: string;
+  }
+</script>
+<style scoped>
+.menu-button {
+  height:25px;
+  background-color:#043468;
+  border:none;
+  width:26px; /* Corresponds to a real width of 25px accounting for border */
+  border-right:1px solid white;
+  color:white;
+  float:left;
+}
+</style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 4e0238a3..e0181218 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -10,11 +10,6 @@
       <ConnectingMessage/>
     </ul>
     <template v-slot:footer>
-      <EmoticonBar
-        @emote="add"
-        @md="format"
-        v-if="anyChatFeatures"
-      />
       <ScalableInput
         v-model="newMessage"
         id="input"
@@ -23,6 +18,12 @@
         @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
         ref="input"
       />
+      <EmoticonBar
+        @emote="add"
+        @md="format"
+        v-if="anyChatFeatures"
+        @update="$nextTick($refs.pane.updateFooterHeight)"
+      />
       <SendButton @send="send"/>
       <ConnectButton
         v-show="!input"
@@ -95,6 +96,7 @@
     @Watch('anyChatFeatures')
     chatFeaturesChanged() {
       this.$nextTick(this.$refs.pane.updateFooterHeight);
+      this.$refs.input.alone = this.anyChatFeatures;
     }
 
     // For send button
@@ -109,11 +111,12 @@
       switch (options) {
         case 'bold': this.$refs.input.wrapOrInsert('**', true); break;
         case 'italics': this.$refs.input.wrapOrInsert('*', true); break;
+        case 'italicsbold': this.$refs.input.wrapOrInsert('***', true); break;
         case 'strikethrough': this.$refs.input.wrapOrInsert('~~', true); break;
         case 'code': this.$refs.input.wrapOrInsert('`', true); break;
         case 'link': this.$refs.input.insertLink(); break;
         case 'action': this.$refs.input.insertString(0, '/me '); break;
-        case 'question': this.$refs.input.insertString(0, '/help '); break;
+        case 'question': this.$emit('postMessage', '/help'); break;
         default: break;
       }
     }
@@ -133,6 +136,7 @@
         this.newMessage = this.$refs.input.value;
         this.$emit('postMessage', this.newMessage);
         this.$refs.input.$refs.textarea.value = '';
+        this.$refs.input.value = '';
         this.newMessage = '';
         e.preventDefault();
       }
@@ -156,6 +160,6 @@
   right:4px;
   width:29px;
   height:29px;
-  bottom:3px;
+  top:4px;
 }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index b1a65564..d5bd3a86 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -1,13 +1,20 @@
 <template>
   <div style="overflow: hidden; position: relative;">
+    <v-style>
+      .scalable-input:focus {
+        box-shadow: {{bshadow}};
+      }
+    </v-style>
     <textarea
       v-model="value"
       :style="{
         height: `${height}px`,
+        'border-bottom-right-radius': radius,
+        'border-bottom-left-radius': radius,
       }"
       class="scalable-input"
       :disabled="disabled"
-      @input="$emit('input', $event.target.value)"
+      @input="$emit('input', $event.target.value);"
       ref="textarea"
     />
     <div
@@ -25,6 +32,8 @@
   export default class ScalableInput extends Vue {
     height = 0;
 
+    alone : boolean = true;
+
     insertCharacter(char:string, keepCursor:Boolean) {
       // Set focus back on textarea
       this.$refs.textarea.focus();
@@ -41,7 +50,25 @@
       this.value = this.$refs.textarea.value;
       if (!keepCursor) {
         this.$refs.textarea.setSelectionRange(position, position);
+      } else {
+        this.$refs.textarea.setSelectionRange(position + char.length, position + char.length);
+      }
+    }
+
+    get radius() {
+      if (!this.alone) {
+        return '8px';
       }
+      return '0px';
+    }
+
+    get bshadow() {
+      if (this.$vxm.chat.tabbing) {
+        2;
+      } else {
+        return 'none';
+      }
+      return 'box-shadow: 0px 0px 5px 2px rgba(255,255,255,1);';
     }
 
     // Puts string at index in another string. Used for /me and /help insertions
@@ -179,17 +206,16 @@
     position: absolute;
     bottom: 0px;
     padding: 0;
-    color:black;
-    background-color:white;
-    border:#343a40 1px solid;
-    border-radius:8px;
+    padding-left:2px;
+    color:white;
+    background-color:lighten(#043468, 5%);
+    border:none;
+    border-bottom:1px solid white;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
     outline: none;
     padding-right:20px;
-    width:calc(100% - 22px) !important;
-  }
-
-  .scalable-input:focus {
-    border-color: #7b8a8b;
+    width:calc(100% - 24px) !important;
   }
 
   .scalable-input,
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index e9acdb29..770367c5 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -28,7 +28,7 @@
     border:none;
     background-image: url("../assets/send-button.png");
     background-repeat: no-repeat;
-    background-size: 70% 70%;
+    background-size: 65% 65%;
     background-position: center;
     height: 30px;
     width: 25px;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 9a6542ff..21f5786d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -93,6 +93,8 @@ export default class ChatModule extends VuexModule {
 
   usernameColor: string = '';
 
+  tabbing = false;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {

From f304a8e6f24d8fd1b4fa2857a6b246fd9a73b5af Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 28 May 2020 01:20:30 -0500
Subject: [PATCH 078/223] Fixed bug, minor tweaks

---
 src/app/components/Panes/MessagePane.vue |  2 +-
 src/app/components/ScalableInput.vue     | 10 +++++++++-
 src/app/components/SendButton.vue        |  2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index e0181218..a34e6678 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -160,6 +160,6 @@
   right:4px;
   width:29px;
   height:29px;
-  top:4px;
+  top:5px;
 }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index d5bd3a86..fe3bf5de 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -11,6 +11,7 @@
         height: `${height}px`,
         'border-bottom-right-radius': radius,
         'border-bottom-left-radius': radius,
+        'border-bottom-width': border,
       }"
       class="scalable-input"
       :disabled="disabled"
@@ -62,6 +63,13 @@
       return '0px';
     }
 
+    get border() {
+      if (this.alone) {
+        return '1px';
+      }
+      return '0px';
+    }
+
     get bshadow() {
       if (this.$vxm.chat.tabbing) {
         2;
@@ -210,7 +218,7 @@
     color:white;
     background-color:lighten(#043468, 5%);
     border:none;
-    border-bottom:1px solid white;
+    border-bottom:solid white;
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;
     outline: none;
diff --git a/src/app/components/SendButton.vue b/src/app/components/SendButton.vue
index 770367c5..c62d2bff 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/SendButton.vue
@@ -28,7 +28,7 @@
     border:none;
     background-image: url("../assets/send-button.png");
     background-repeat: no-repeat;
-    background-size: 65% 65%;
+    background-size: 60% 60%;
     background-position: center;
     height: 30px;
     width: 25px;

From 9fea450870a5e1ce309551a5a0071e7d8cc7c7e8 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 28 May 2020 11:28:30 -0500
Subject: [PATCH 079/223] Custom emoticons

---
 src/app/components/Emoticons/EmoticonBar.vue  | 11 +++-
 .../components/Emoticons/EmoticonButton.vue   |  7 ++-
 src/app/components/ScalableInput.vue          |  2 +-
 src/app/store/chat.vuex.ts                    | 53 ++++++++++++++++++-
 4 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 8b31b94e..56926b02 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -27,7 +27,7 @@
       />
     </div>
     <div id='submenu' v-show='emoticonsSelected || markdownSelected'>
-      <div id='emoticon-submenu' v-show="emoticonsSelected">
+      <div id='emoticon-submenu' v-show="emoticonsSelected" >
         <EmoticonButton
           v-for="emoticon in emotesList"
           :key="emoticon"
@@ -75,7 +75,14 @@
   export default class EmoticonBar extends Vue {
     value = false;
 
-    emotesList = ['👍', '👎', '🙂', '🙁', '😡', '😂', '😜', '🤔', '😮']; // Emotes that appear when expanded
+    get emotesList() {
+      const defaultEmotes = ['👍', '👎', '🙂', '🙁', '😂'];
+      return defaultEmotes.concat(this.customEmoticons);
+    }
+
+    get customEmoticons() {
+      return this.$vxm.chat.customEmoticons;
+    }
 
     markdownCodes = ['bold', 'italics', 'italicsbold', 'strikethrough', 'code', 'link', 'action'];
 
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
index 9f0548c3..309560d5 100644
--- a/src/app/components/Emoticons/EmoticonButton.vue
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div id='emoticon-button-container' class='emoticon-button' @click="clicked">
-    <p id='emoticon-text-container'>{{emoticon}}</p>
+    <p id='emoticon-text-container'>{{displayedValue}}</p>
   </div>
 </template>
 <script lang='ts'>
@@ -10,6 +10,10 @@
     @Prop()
     emoticon !: string;
 
+    get displayedValue() {
+      return this.emoticon;
+    }
+
     clicked() {
       this.$emit('emote', this.emoticon);
     }
@@ -25,6 +29,7 @@
     width:20px;
     height:25px;
     padding-right:2.5px;
+    padding-left:2.5px;
     padding-top:1px;
     text-align:center;
   }
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index fe3bf5de..a842e9c8 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -216,7 +216,7 @@
     padding: 0;
     padding-left:2px;
     color:white;
-    background-color:lighten(#043468, 5%);
+    background-color:lighten(#043468, 10%);
     border:none;
     border-bottom:solid white;
     border-top-right-radius: 8px;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 21f5786d..a859b127 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -95,6 +95,8 @@ export default class ChatModule extends VuexModule {
 
   tabbing = false;
 
+  customEmoticons = ['😜', '🤔', '😮'];
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -241,6 +243,15 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.customEmoticons) {
+        try {
+          this.customEmoticons = JSON.parse(localStorage.customEmoticons);
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of custom emoticons',
+          );
+        }
+      }
     }
 
     if (process.env.VUE_APP_SERVER_URL) {
@@ -340,6 +351,8 @@ export default class ChatModule extends VuexModule {
         const command = parts ? parts[1] : '';
         parts = message.match(/^\/\w+ (.+)/);
         const params = parts ? parts[1] : '';
+        const first = params.split(' ')[0];
+        const second = params.split(' ')[1];
         switch (command) {
           case 'help':
             switch (params) {
@@ -378,8 +391,22 @@ export default class ChatModule extends VuexModule {
                 postMessage('Example: `/change general`');
                 postMessage('Example: `/change #general`');
                 break;
+              case 'emoticon':
+                postMessage(
+                  '`/emoticon`: Changes the emoticon in one of the 3 custom emoticon slots. To see the current emoticons, click the emoticon icon the the menu under the text field or use the `/emoticon-list` command',
+                );
+                postMessage('Usage: `/emoticon <emoticon> <slot>`');
+                postMessage('Example: `/emoticon 🐔 1`');
+                break;
+              case 'emoticon-list':
+                postMessage(
+                  '`/emoticon-list`: Lists the emoticons in the 3 custom emoticon slots',
+                );
+                postMessage('Usage: `/emoticon-list`');
+                postMessage('Example: `/emoticon-list`');
+                break;
               default:
-                postMessage('Available commands: help, me, ignore, ignore-list, unignore, change');
+                postMessage('Available commands: help, me, ignore, ignore-list, unignore, change, emoticon');
                 postMessage('Type `/help <command>` for information on individual commands');
                 postMessage('Example: `/help ignore`');
                 postMessage(
@@ -455,6 +482,30 @@ export default class ChatModule extends VuexModule {
               this.chatChannel = params;
             }
             break;
+          case 'emoticon':
+            if (!first || !second) {
+              postMessage(
+                'Please include command parameters. Type `/help emoticon` for more usage instructions',
+              );
+              break;
+            } else if (parseInt(second, 10) > 3 || parseInt(second, 10) < 1) {
+              postMessage('You have three custom emoticon slots. Type `/help emoticon` for more usage instructions');
+              break;
+            } else if (
+              (JSON.parse(localStorage.customEmoticons) as string[]).some(e => e === first)) {
+              postMessage('You already have that emoticon in a custom slot');
+              break;
+            } else if (!first.match(/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/)) {
+              postMessage('You may only add emoticons to custom slots');
+              break;
+            }
+            // Changing the array elements with array[index] = newValue isn't reactive
+            Vue.set(this.customEmoticons, (parseInt(second, 10) - 1), first);
+            localStorage.customEmoticons = JSON.stringify(this.customEmoticons);
+            break;
+          case 'emoticon-list':
+            postMessage(`Your custom emoticons are ${this.customEmoticons[0]} (slot 1), ${this.customEmoticons[1]} (slot 2), and ${this.customEmoticons[2]} (slot 3).`);
+            break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;

From afb1dffb0160c19b91d0c15fc8ddf40687823c84 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 28 May 2020 11:59:12 -0500
Subject: [PATCH 080/223] Hover background, more padding, removed borders

---
 src/app/components/Emoticons/EmoticonBar.vue     |  6 +-----
 src/app/components/Emoticons/EmoticonButton.vue  |  7 ++++---
 .../components/Emoticons/MarkdownWrapButton.vue  | 16 ++++++++++------
 src/app/components/Emoticons/MenuButton.vue      |  6 ++++--
 src/app/components/ScalableInput.vue             |  2 +-
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 56926b02..43d6213e 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -76,7 +76,7 @@
     value = false;
 
     get emotesList() {
-      const defaultEmotes = ['👍', '👎', '🙂', '🙁', '😂'];
+      const defaultEmotes = ['👍', '👎', '🙂', '🙁'];
       return defaultEmotes.concat(this.customEmoticons);
     }
 
@@ -156,9 +156,6 @@
   border-bottom:1px solid white;
   overflow:hidden; /* Prevents awkward scrolling and overflow */
 }
-.border-right {
-  border-right: 1px solid white;
-}
 #strike { /* Strikethrough isn't cut off */
   padding:2px;
   padding-right:2px;
@@ -177,7 +174,6 @@
 .other-menu-button {
   float:right;
   border:none;
-  border-left:1px solid white;
 }
 .menu-container {
   background-color:#043468;
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
index 309560d5..536a877d 100644
--- a/src/app/components/Emoticons/EmoticonButton.vue
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -26,13 +26,14 @@
     border:none;
     float:left;
     position: relative;
-    width:20px;
+    width:30px;
     height:25px;
-    padding-right:2.5px;
-    padding-left:2.5px;
     padding-top:1px;
     text-align:center;
   }
+  #emoticon-button-container :hover {
+    background-color: #00275b;
+  }
   #emoticon-text-container {
     vertical-align: middle;
     height:100%;
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index 03834cbb..7455e5c3 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -1,14 +1,14 @@
 <template>
-  <div id='md-wrap-button-container' class='md-button' @click="clicked">
+  <button id='md-wrap-button-container' class='md-button' @click="clicked">
     <strong class="text" v-if="typeIs('bold')">B</strong>
     <em class="text" v-if="typeIs('italics')">T</em>
-    <div class="text" id="s" v-if="typeIs('strikethrough')">S</div>
+    <span class="text" id="s" v-if="typeIs('strikethrough')">S</span>
     <code class="text" v-if="typeIs('code')">C</code>
     <u class="text" v-if="typeIs('link')">L</u>
     <strong class="text" id="action" v-if="typeIs('action')"><em>me</em></strong>
-    <p class="text" v-if="typeIs('question')">?</p>
+    <span class="text" v-if="typeIs('question')">?</span>
     <em class="text" v-if="typeIs('italicsbold')"><strong>E</strong></em>
-  </div>
+  </button>
 </template>
 <script lang='ts'>
   import { Component, Prop, Vue } from 'vue-property-decorator';
@@ -29,14 +29,18 @@
 <style scoped>
   .md-button {
     color:white;
+    background-color:#043468;
     border:none;
     float:left;
     position: relative;
-    width:25px;
+    width:30px;
     height:25px;
     padding-top:1px;
     text-align:center;
   }
+  .md-button:hover {
+    background-color:#00275b;
+  }
   .text {
     vertical-align: middle;
     height:100%;
@@ -47,7 +51,7 @@
   #s {
     text-decoration: line-through;
     font-size:12px;
-    padding-top:2px;
+    padding-top:5px;
   }
 
   #s:before,
diff --git a/src/app/components/Emoticons/MenuButton.vue b/src/app/components/Emoticons/MenuButton.vue
index 343aa14b..b0b0e57a 100644
--- a/src/app/components/Emoticons/MenuButton.vue
+++ b/src/app/components/Emoticons/MenuButton.vue
@@ -29,9 +29,11 @@
   height:25px;
   background-color:#043468;
   border:none;
-  width:26px; /* Corresponds to a real width of 25px accounting for border */
-  border-right:1px solid white;
+  width:30px; /* Corresponds to a real width of 25px accounting for border */
   color:white;
   float:left;
 }
+.menu-button:hover {
+  background-color:#00275b;
+}
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index a842e9c8..f796c16a 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -216,7 +216,7 @@
     padding: 0;
     padding-left:2px;
     color:white;
-    background-color:lighten(#043468, 10%);
+    background-color:lighten(#043468, 8%);
     border:none;
     border-bottom:solid white;
     border-top-right-radius: 8px;

From 941f77de65e29a107b523f669095c6892e863541 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 28 May 2020 13:37:55 -0500
Subject: [PATCH 081/223] Color slider bug fix and new toolbar layout

---
 src/app/components/Emoticons/EmoticonBar.vue  | 64 ++++++++++---------
 .../components/Emoticons/EmoticonButton.vue   |  2 +-
 .../Emoticons/MarkdownWrapButton.vue          |  2 +-
 src/app/components/Emoticons/MenuButton.vue   |  3 +-
 src/app/components/Panes/MessagePane.vue      | 34 ++++------
 src/app/components/ScalableInput.vue          | 24 ++++++-
 .../Slideout/ColorPicker/ColorSlider.vue      |  3 +
 7 files changed, 76 insertions(+), 56 deletions(-)

diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 43d6213e..9eb33c2b 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -1,32 +1,6 @@
 <template>
   <div id='menu-container'>
-    <div
-      id='emoticon-bar-container'
-      :style="{
-        'border-bottom-right-radius': radius,
-        'border-bottom-left-radius': radius,
-        'border-bottom-width': border,
-      }" >
-      <MenuButton
-        id="emoticonSelect"
-        name="👍"
-        styles=""
-        @button="select(false);"
-      />
-      <MenuButton
-        id="markdownSelect"
-        name="MD"
-        styles="bold italics underline"
-        @button="select(true);"
-      />
-      <MenuButton
-        name="?"
-        class="other-menu-button"
-        styles=""
-        @button="menuButtonClicked"
-      />
-    </div>
-    <div id='submenu' v-show='emoticonsSelected || markdownSelected'>
+    <div id='submenu' v-show='(emoticonsSelected || markdownSelected) && anyChatFeatures'>
       <div id='emoticon-submenu' v-show="emoticonsSelected" >
         <EmoticonButton
           v-for="emoticon in emotesList"
@@ -52,6 +26,31 @@
         @button="menuButtonClicked"
       />
     </div>
+    <div id='input'>
+        <slot name="input"></slot>
+      </div>
+    <div
+      id='emoticon-bar-container'
+      v-if="anyChatFeatures" >
+      <MenuButton
+        id="emoticonSelect"
+        name="👍"
+        styles=""
+        @button="select(false);"
+      />
+      <MenuButton
+        id="markdownSelect"
+        name="A"
+        styles="bold italics underline"
+        @button="select(true);"
+      />
+      <MenuButton
+        name="?"
+        class="other-menu-button"
+        styles=""
+        @button="menuButtonClicked"
+      />
+    </div>
   </div>
 </template>
 <script lang='ts'>
@@ -144,6 +143,10 @@
     get markdownChatFeatures() {
       return this.$vxm.settings.markdownChatFeatures;
     }
+
+    get anyChatFeatures() {
+      return this.emoticonChatFeatures || this.markdownChatFeatures;
+    }
   }
 </script>
 <style scoped>
@@ -153,8 +156,9 @@
   width:calc(100% - 2px); /* Same width as textarea */
   height:25px;
   border:none;
-  border-bottom:1px solid white;
   overflow:hidden; /* Prevents awkward scrolling and overflow */
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
 #strike { /* Strikethrough isn't cut off */
   padding:2px;
@@ -166,10 +170,10 @@
   background-color:#043468;
   color:white;
   width:calc(100% - 2px); /* Same width as textarea */
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
+  border-radius:8px;
   height:25px;
   overflow:hidden; /* Prevents awkward scrolling and overflow */
+  margin-bottom:3px;
 }
 .other-menu-button {
   float:right;
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
index 536a877d..433c90a9 100644
--- a/src/app/components/Emoticons/EmoticonButton.vue
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -32,7 +32,7 @@
     text-align:center;
   }
   #emoticon-button-container :hover {
-    background-color: #00275b;
+    background-color: #21508c;
   }
   #emoticon-text-container {
     vertical-align: middle;
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index 7455e5c3..e6b487a7 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -39,7 +39,7 @@
     text-align:center;
   }
   .md-button:hover {
-    background-color:#00275b;
+    background-color:#21508c;
   }
   .text {
     vertical-align: middle;
diff --git a/src/app/components/Emoticons/MenuButton.vue b/src/app/components/Emoticons/MenuButton.vue
index b0b0e57a..d934bef7 100644
--- a/src/app/components/Emoticons/MenuButton.vue
+++ b/src/app/components/Emoticons/MenuButton.vue
@@ -32,8 +32,9 @@
   width:30px; /* Corresponds to a real width of 25px accounting for border */
   color:white;
   float:left;
+  font-size:14px;
 }
 .menu-button:hover {
-  background-color:#00275b;
+  background-color:#06488f;
 }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index a34e6678..1ce70678 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -10,21 +10,23 @@
       <ConnectingMessage/>
     </ul>
     <template v-slot:footer>
-      <ScalableInput
-        v-model="newMessage"
-        id="input"
-        @keypress.native="onKeyPress"
-        :disabled="!connectionData.connected || isBanned"
-        @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
-        ref="input"
-      />
       <EmoticonBar
         @emote="add"
         @md="format"
-        v-if="anyChatFeatures"
         @update="$nextTick($refs.pane.updateFooterHeight)"
-      />
-      <SendButton @send="send"/>
+      >
+      <template slot="input">
+        <ScalableInput
+          v-model="newMessage"
+          id="input"
+          @postMessage="send"
+          @keypress.native="onKeyPress"
+          :disabled="!connectionData.connected || isBanned"
+          @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
+          ref="input"
+        />
+      </template>
+      </EmoticonBar>
       <ConnectButton
         v-show="!input"
       />
@@ -46,7 +48,6 @@
   import BanStatus from '@/types/BanStatus';
   import Message from '@/types/message';
   import { Channel } from '@/store/chat.vuex';
-  import SendButton from '@/components/SendButton.vue';
 
   @Component({
     components: {
@@ -56,7 +57,6 @@
       ScalableInput,
       ConnectButton,
       EmoticonBar,
-      SendButton,
     },
   })
   export default class MessagesPane extends Vue {
@@ -154,12 +154,4 @@
   }
 </script>
 <style scoped>
-.send-button { /* Send message button */
-  position: absolute;
-  float:right;
-  right:4px;
-  width:29px;
-  height:29px;
-  top:5px;
-}
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index f796c16a..204994da 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -18,6 +18,7 @@
       @input="$emit('input', $event.target.value);"
       ref="textarea"
     />
+    <SendButton @send="send"/>
     <div
       ref="hiddenDiv"
       class="scalable-input-hidden"
@@ -29,7 +30,13 @@
   import {
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
-  @Component
+  import SendButton from '@/components/SendButton.vue';
+
+  @Component({
+    components: {
+      SendButton,
+    },
+  })
   export default class ScalableInput extends Vue {
     height = 0;
 
@@ -56,6 +63,13 @@
       }
     }
 
+    // For send button
+    send() {
+      this.$emit('postMessage');
+      this.value = '';
+      this.$refs.textarea.value = '';
+    }
+
     get radius() {
       if (!this.alone) {
         return '8px';
@@ -218,7 +232,6 @@
     color:white;
     background-color:lighten(#043468, 8%);
     border:none;
-    border-bottom:solid white;
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;
     outline: none;
@@ -240,4 +253,11 @@
     border: 1px solid;
     padding-right:25px;
   }
+  .send-button { /* Send message button */
+    position: absolute;
+    float:right;
+    right:0;
+    width:29px;
+    height:29px;
+  }
 </style>
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
index 36c0e356..6a480798 100644
--- a/src/app/components/Slideout/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -111,5 +111,8 @@
     display:inline-block;
     margin:0px;
     font-size: 14px !important;
+    height:17px;
+    top:-1px;
+    bottom:0;
   }
 </style>

From b3458007a377324f99972bebd8f98cc9aa118c6e Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 28 May 2020 13:48:23 -0500
Subject: [PATCH 082/223] Cleanup

---
 src/app/App.vue                               |  2 +-
 src/app/components/Emoticons/EmoticonBar.vue  | 42 ++++++-------------
 .../components/Emoticons/EmoticonButton.vue   |  6 +--
 src/app/components/Emoticons/MenuButton.vue   |  4 +-
 src/app/components/ScalableInput.vue          |  8 ----
 5 files changed, 17 insertions(+), 45 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 24900a23..e78d7571 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -121,7 +121,7 @@
   }
 
   key(e:KeyboardEvent) {
-    if (e.code === 'Tab') {
+    if (e.code === 'Tab') { /* Watches for tabs. If a tab is detected, outline on input will remain on focus */
       this.$vxm.chat.tabbing = true;
       window.removeEventListener('keydown', this.key);
     }
diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 9eb33c2b..61700334 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -72,14 +72,12 @@
     },
   })
   export default class EmoticonBar extends Vue {
-    value = false;
-
-    get emotesList() {
+    get emotesList() { // List of all emotes from defaults and custom
       const defaultEmotes = ['👍', '👎', '🙂', '🙁'];
       return defaultEmotes.concat(this.customEmoticons);
     }
 
-    get customEmoticons() {
+    get customEmoticons() { // Gets custom emoticons
       return this.$vxm.chat.customEmoticons;
     }
 
@@ -89,20 +87,7 @@
 
     markdownSelected = false;
 
-    get radius() {
-      if (!this.emoticonsSelected && !this.markdownSelected) {
-        return '8px';
-      }
-      return '0px';
-    }
-
-    get border() {
-      if (!this.emoticonsSelected && !this.markdownSelected) {
-        return '0px';
-      }
-      return '1px';
-    }
-
+    /* Opens emoticon or markdown submenu depending on which button was pressed */
     select(markdown:boolean) {
       if (markdown) {
         this.markdownSelected = true;
@@ -114,16 +99,16 @@
       this.$emit('update');
     }
 
-    menuButtonClicked(button:string) {
+    menuButtonClicked(button:string) { // Handles button clicks
       switch (button) {
-        case 'X':
-          this.markdownSelected = false;
-          this.emoticonsSelected = false;
-          break;
-        case '?':
-          this.$emit('md', 'question');
-          break;
-        default: break;
+      case 'X':
+        this.markdownSelected = false;
+        this.emoticonsSelected = false;
+        break;
+      case '?':
+        this.$emit('md', 'question');
+        break;
+      default: break;
       }
       this.$emit('update');
     }
@@ -176,8 +161,7 @@
   margin-bottom:3px;
 }
 .other-menu-button {
-  float:right;
-  border:none;
+  float:right; /* Menu buttons floated to the right */
 }
 .menu-container {
   background-color:#043468;
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
index 433c90a9..fa1e86b7 100644
--- a/src/app/components/Emoticons/EmoticonButton.vue
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div id='emoticon-button-container' class='emoticon-button' @click="clicked">
-    <p id='emoticon-text-container'>{{displayedValue}}</p>
+    <p id='emoticon-text-container'>{{emoticon}}</p>
   </div>
 </template>
 <script lang='ts'>
@@ -10,10 +10,6 @@
     @Prop()
     emoticon !: string;
 
-    get displayedValue() {
-      return this.emoticon;
-    }
-
     clicked() {
       this.$emit('emote', this.emoticon);
     }
diff --git a/src/app/components/Emoticons/MenuButton.vue b/src/app/components/Emoticons/MenuButton.vue
index d934bef7..0d5c0cc1 100644
--- a/src/app/components/Emoticons/MenuButton.vue
+++ b/src/app/components/Emoticons/MenuButton.vue
@@ -2,7 +2,7 @@
   <button
     class='menu-button'
     :style="{
-      'font-weight':styles.includes('bold') ? 'bold' : 'normal',
+      'font-weight':styles.includes('bold') ? 'bold' : 'normal', /* Applies text styling */
       'font-style':styles.includes('italics') ? 'italic' : 'normal',
       'text-decoration':styles.includes('underline') ? 'underline' : 'normal',
     }"
@@ -35,6 +35,6 @@
   font-size:14px;
 }
 .menu-button:hover {
-  background-color:#06488f;
+  background-color:#06488f; /* Lightened version of med-dark-blue. Same as input background */
 }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 204994da..22bc6724 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -11,7 +11,6 @@
         height: `${height}px`,
         'border-bottom-right-radius': radius,
         'border-bottom-left-radius': radius,
-        'border-bottom-width': border,
       }"
       class="scalable-input"
       :disabled="disabled"
@@ -77,13 +76,6 @@
       return '0px';
     }
 
-    get border() {
-      if (this.alone) {
-        return '1px';
-      }
-      return '0px';
-    }
-
     get bshadow() {
       if (this.$vxm.chat.tabbing) {
         2;

From e9f11b83b6c26e18840b18bd762d7427e2a3bc9b Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 28 May 2020 17:18:35 -0500
Subject: [PATCH 083/223] Lightened chevron, theme colors

---
 src/app/assets/send-button.png              | Bin 1159 -> 1123 bytes
 src/app/assets/send-button2.png             | Bin 0 -> 1159 bytes
 src/app/components/Emoticons/MenuButton.vue |   2 +-
 src/app/components/ScalableInput.vue        |   2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 src/app/assets/send-button2.png

diff --git a/src/app/assets/send-button.png b/src/app/assets/send-button.png
index fb82092647e3f39e8345b0ff0fa47a196dc7ef79..3e208d9f298de4459d89d849f296d1a1743928a5 100644
GIT binary patch
delta 1020
zcmV<Y0|Wer3F8Qmb${7OL_t(o3B8#?R@*QTKu31=%?%3gk#*?_Fzdb&a{`<ja0Aj4
zl%62w1UT@zt~o)|HR&TgLDPL4bw-Yi?8vqhTWBLkni+jhMiXhmphFAqUxv)zoN?xz
z0_VZbl<cMDR6H=2GQM5#Z19v^9<Sx3ZO?2KNdEHSdCY-D_<tDE=L1^IfG77Cqq(iF
z74YSJdBp*yz~IPsA+0=z6#`7}$0v8%dCi~^Fn;w%;Ab<`4>UIV7)l}YCm1TLHe+6!
zK=`nXz{`H3T+k-lVLqTW#9A#z8iB)y=dY+g!w?v@*y%o<uQ3ZBf8R72s|^W!TMB`w
zN!j6CoLrntbbt1>9uDWrTNI9T3feIa|8RT)jGtp~z4J9Tqj3H_)r{kpU1_^GBJY|t
zf*trl^67XX74U^)w0tE$cjzbR=~&e-0gG%v8_YCjHL%inFVGy;u=PKx*`pj1l)8F=
zCFo>)5&?%h`2q*^#FD4eLcIXqg+frwv_HgZ80f@%fq%wys;0XF7`<_$TeM-!DAn}>
zt*{B;@NpSpC>%Aw?N8yRQr~=E;B}-kG_nasG?{ytTcog84tkos8T2+kXfZk>VqpI*
zb69`cOFwlM4$dBV#yIw1kOg(dEymq@nlc8mda&iE7GO=H?xB&@!_5{nQCQBog=P$a
z`)>}R`F{|B*;)V0j<N@5A6$4?zQ3`j@w{*?l^T28crJk(*FJR8C9rXB#@_+D*|ax2
z9U?G)YL~Q@Fowln${AXZj8<TL;ljgiV8t7;wTGv))adQZgdD;m04EQ7thm~kG1W@B
zg{5UZNIls2X)S{JgnL-Jj%@}DZ&#S>a?^DWn}0hlA=Z4;F^J8bS(1D!SPTa)7>ipo
zrk53>yf5K2eZUK*xJfk0?B=Xem)0Ktm0XO(sZvdAQ>|?M;JSY5b*4Kk*<!cSV&P#L
zz*<^rd>En|z`#Fmx;gg)%b(D@0r62&Jq(ZysFpxwr}joSfKB!z{Qe@os;WXSu*5=4
zN`ET>iwX;aYh}Lqu?D&qSXvob)T&QDq(KseIL2-?Q~Dtc4~(sAVE&3jMlT%d1uaH7
z|B{SH)2c=(hSkY~Z?~$EL!TQmP$?u-`@7=DH+Aeyo`q+zE?3iPJuKxh9%&=qVm!T*
zV@`V7U=*{J@@jRhR$x-d|CHIp#woA5N_FdJJd<NKsBSQwnh~&66yB!4y=;CFrLw;N
zgTvD{ud1q6z*12Z=JHw>6%p-1CC~E-oeh%Dqg2{7?GFN$#zkF@N?lYv!XgKru!s9$
qLsu}iro*>5d*gAIPF>Q5ZT}yo8;%*&$T`>m0000<MNUMnLSTZ<bL{y5

delta 1057
zcmV++1m64O2!{!fb$|UyL_t(o3DucRR@*QT$2Cq`*p(X;-YeNQZP;T@P;Nl7X~`}(
zAUy$e73hX=1A2m*J+$sN>3gInXjsxFR_E_Td5TeN%O82KUPP8O8vQ&Tjim{R99RAF
zeyjR8*%u`0LJD`TN|j2p7v7NYSjL}hRB!y&&RBKYmSj5s@_&2h!*^1MCJ#Q$GF}SV
zCqdV@$Gcx_$6En6E`A;f8FYEFZQF@V@(ex_<aF;oyt*>=o7z$V*L(NdRhnF~0@tLZ
zfHrR;t1Z91GfL9sBniCj4Vo32d}lc~Nj68ni#ae?l8#tl_SI8|=#pQ<R+6H;{g?xD
z?OhB{;&iQaiGRlVfI+DlH@K`mEXup%TFa#0XyL~B&odiXju;Ptlr0Wh2Yhe6@}ppw
zd#^X_M%z(;Vqy3ZUX4lE)CSn8BVGS}%~$=6-k?uJN2;E+gb}{AYkhtE5-_3xoSz$0
z`K$?6DK7$=^^d2r`bLi)OD=)XRRk=c@7lGdl=4bFK!27JEc0->7`_0WhZJ|wlXydY
z-3?6QML@G&R}Xg!U?Op1nsjBG3{tsG5zsnY2+W_{L)*_S7M1?wD<6zI@<M|RjF@9)
zVJVxa*j|Vx>w*?R5CYSDi}>3XR+l%0AH83{&l)|#h_O-KaVmeNuC6f4{W>g-hyhlI
z0$I-j8GjwK7HDRL54+LHv)0RomVC0AExN3PhH+&=ljI#8?<V#Q^X6(Q3z{wbx^N4t
zC$)i|Za(X%ad9OUUTMH_6X)qG4cI0&S04YKrg;dC#Sac|x^L15+sN3!+MH~7(fNg2
zxGY#0j2GP)z#b|^TxG(7FSM|9$p0T;=Zu~+eSco@@&cD_S@2=OO*X5(gTx$HGM{wU
z0UH`r%4@LB79CMPY_$AY8!U72CO%~3kH_q4^oAooio8_yq!I^AoFtOu&~FpEO!_#n
z@`DpA;jVHK*0`~25?<Lx&Uj^?){z$$s-zTWO69`BXy9y%mv%G6em~{}%0b-8xd>Q%
z*ne)@yRHIWSQrfxQEg&1s?N9)8<9#tU+bR-;j4<u76A(uFzLFNfRSNg-|XlDardjB
zi-5(vV9~QaXj^g#G~fyoaTa+BxQ8I>I3!0wAUdq{aHc88uM{8I6}nLkMqmhKJ>5np
z$Wo7sKua#6D-V+&f<EbOYq@93#)Zq37JpW7NR)7vhx5hag=#CK!~%oQM$@a&xe|df
zApBECO!{d<UUZVgI)^SqgXjV?jY|cr28Pxa)V28{s<Eb$KM23@!Ai2KKGq6Y4Ga@=
z$aN8M64B08!Z^<x8SD)>3V2Fq+A<TcQjWYF(nrW1A<2Qf!4tRP*Nu|`Hs9ELV;Vb~
b=das;3zY8wx>QX300000NkvXXu0mjf^-lAo

diff --git a/src/app/assets/send-button2.png b/src/app/assets/send-button2.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb82092647e3f39e8345b0ff0fa47a196dc7ef79
GIT binary patch
literal 1159
zcmV;21bF+2P)<h;3K|Lk000e1NJLTq001li001lq1^@s69)wx}00001b5ch_0Itp)
z=>Px#IAvH#W=%~1DgXcg2mk?xX#fNO00031000^Q000000-yo_1ONa40RR91ET97b
z1ONa40RR91EC2ui0N<v?nE(I-{YgYYR9FesnN3#PFc8NzPFmQN8x-Cv**0z1V@^<R
zK(cAcE;k@O0dy7UhHwLVf|@<F?l$Rrq$g-t(k52t??icuQEbZ}d9PkXmNXjuJRXgu
z35gt6{qlaR`Z(DaB<ey6cdkm6O0yT<knmW>pKMfb{MOD`b=sC>I{@-~=fihWh$as{
z%ragI*(X8Qx5v9*Y{y#xH!gl22^n;GvTfUmO!5pq66AF6KD@dz^_$vK0oQx?+f|xe
zvI5tnq<}VWBC9RGy)#PE<s=Eb?G2h0ntW$DH%T@}zl%9ASCWocVD{Bhhv<@D!&Z`_
zy#1I1bM0LWPvUf~bcx3KfI+DlH@K`mEXup%TFa#0XyL~B&odiXju;Ptlr0Wh2Yhe6
z@}ppwd#^X_M%z(;Vqy3ZUX4lE)CSn8BVGS}%~$=6-k?uJN2;E+gb}{AYkhtE5-_3x
zoSz$0`K$?6DK7$=^^d2r`bLi)OD=)XRRk=c@7lGdl=4bFK$a3L^KiNtz5t$w6nD{+
zctd^N4NT%iK(k&~4|fY-B5`7xbY+_iQn^hL&^lWP%%9vt+s`c)mHy-_AB;QlLW2#A
zm}6#PDVwO+UWg{^f)+s#0@Hkp_}dm%mp6qUy<fl28a={@u~FS|Du1S~t}x5}IxLNd
z0ak|sS<eC)9kUi_W`z&C(aE#c%Z8SGvY9Qqtb~SfWkQqW9Ubo`_6_sqYAOqwE&RH0
z3#%u!fu3$Y>!@*YB^F+3z;P4j=_?J`CN@_d|DL9K2#&=M4sW_|(g@qg*udJHY<SW6
zg<H5RSQv~K-59_gDn(pn!h$cfuyn}(A7JN<o-=)3@$v$fZCUVP!A&-+zJtUZS2CY;
z*8v+ERLX0x&K4a}KWw!8SsN^K@g_cG<d4VfYV?L9K8n0l^`sI9Oq?W=<j`*ux=i{w
zvGRixE8(tk5!Se|YZ6}BM$UL;pVpBV7OJEaXG-P5!f4=Zi<fpY#C|{K1j<3&$+-wv
zeAsT=yRHIWSQrfxQEg&1s?N9)8<9#tU+bR-;j4<u76A(uFzLFNfRSNg-|XlDardjB
zi-5(vV9~QaXj^g#G~fyoaTa+BxQ8I>I3!0wAUdq{aHc88uM{8I6}nLkMqmhKJ>5np
z$Wo7sKua#6D-V+&f<EbOYq@93#)Zq37FKXblyH`Z^TpzYYAd6}0)x*+)2q?B5`i%w
z{8L6u`e{R6bdtn6hb}~e=mIm1O9iY3hSnC;wfQ2dv8Iwg2*2>bO0udx)(Th+3=?z6
zbrEqA(au%EIL{jy><u^ycuHs5G83>;j=UVwN5~!_$$`AV6Sv{ljgta4-`IO&JDcaP
Z+kXp`?*O_~O#A=<002ovPDHLkV1iJ5{V@Ol

literal 0
HcmV?d00001

diff --git a/src/app/components/Emoticons/MenuButton.vue b/src/app/components/Emoticons/MenuButton.vue
index 0d5c0cc1..4d29d540 100644
--- a/src/app/components/Emoticons/MenuButton.vue
+++ b/src/app/components/Emoticons/MenuButton.vue
@@ -35,6 +35,6 @@
   font-size:14px;
 }
 .menu-button:hover {
-  background-color:#06488f; /* Lightened version of med-dark-blue. Same as input background */
+  background-color:#21508c; /* Lightened version of med-dark-blue. Same as input background */
 }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 22bc6724..74c8eec8 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -222,7 +222,7 @@
     padding: 0;
     padding-left:2px;
     color:white;
-    background-color:lighten(#043468, 8%);
+    background-color:#21508c;
     border:none;
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;

From ffee5cb567d5905875a30040e62fea635c31ad6b Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 3 Jun 2020 18:20:39 -0500
Subject: [PATCH 084/223] Oper functionality

---
 package-lock.json                             | 5411 +++++++++--------
 package.json                                  |   36 +-
 src/app/App.vue                               |   48 +-
 src/app/components/Messages/ActionMenu.vue    |   49 +
 src/app/components/Messages/UserMessage.vue   |   21 +-
 src/app/components/Messages/Username.vue      |   53 +-
 src/app/components/OperLogin.vue              |   85 +
 .../Slideout/ColorPicker/ColorPicker.vue      |    4 +-
 src/app/components/Slideout/Slideout.vue      |    2 +-
 src/app/components/Slideout/SlideoutChats.vue |   16 +-
 .../components/Slideout/SlideoutSettings.vue  |   15 +
 src/app/store/chat.vuex.ts                    |  270 +-
 src/app/types/Ban.ts                          |   10 +
 .../modules/irc-framework/irc-framework.d.ts  |    4 +-
 14 files changed, 3370 insertions(+), 2654 deletions(-)
 create mode 100644 src/app/components/OperLogin.vue
 create mode 100644 src/app/types/Ban.ts

diff --git a/package-lock.json b/package-lock.json
index dc0a3ed9..4d891c82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,21 +14,21 @@
       }
     },
     "@apollo/federation": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/@apollo/federation/-/federation-0.15.0.tgz",
-      "integrity": "sha512-L6n41obKc0fLQdZ0uSHhHRJNCIAxZ5uDeqQON+Q+ewiUfS3XetCCf/cGpiiL50TIY/n8Bvh5ZPWLMTtP0tyw5g==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@apollo/federation/-/federation-0.16.0.tgz",
+      "integrity": "sha512-+UA9QQNA4q896OOmyFHhKTf7iOIFvjL+h/I7ozRkA+Ayv1368pXtd3zyeKrXtUKD21a1vtEkEjCUX9aDGR8cqg==",
       "dev": true,
       "requires": {
         "apollo-graphql": "^0.4.0",
-        "apollo-server-env": "^2.4.3",
+        "apollo-server-env": "^2.4.4-alpha.0",
         "core-js": "^3.4.0",
         "lodash.xorby": "^4.7.0"
       }
     },
     "@apollo/protobufjs": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@apollo/protobufjs/-/protobufjs-1.0.3.tgz",
-      "integrity": "sha512-gqeT810Ect9WIqsrgfUvr+ljSB5m1PyBae9HGdrRyQ3HjHjTcjVvxpsMYXlUk4rUHnrfUqyoGvLSy2yLlRGEOw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@apollo/protobufjs/-/protobufjs-1.0.4.tgz",
+      "integrity": "sha512-EE3zx+/D/wur/JiLp6VCiw1iYdyy1lCJMf8CGPkLeDt5QJrN4N8tKFx33Ah4V30AUQzMk7Uz4IXKZ1LOj124gA==",
       "dev": true,
       "requires": {
         "@protobufjs/aspromise": "^1.1.2",
@@ -47,9 +47,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "10.17.21",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.21.tgz",
-          "integrity": "sha512-PQKsydPxYxF1DsAFWmunaxd3sOi3iMt6Zmx/tgaagHYmwJ/9cRH91hQkeJZaUGWbvn0K5HlSVEXkn5U/llWPpQ==",
+          "version": "10.17.24",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.24.tgz",
+          "integrity": "sha512-5SCfvCxV74kzR3uWgTYiGxrd69TbT1I6+cMx1A5kEly/IVveJBimtAMlXiEyVFn5DvUFewQWxOOiJhlxeQwxgA==",
           "dev": true
         }
       }
@@ -114,46 +114,16 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.9.6.tgz",
-      "integrity": "sha512-5QPTrNen2bm7RBc7dsOmcA5hbrS4O2Vhmk5XOL4zWW/zD/hV0iinpefDlkm+tBBy8kDtFaaeEvmAqt+nURAV2g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.10.1.tgz",
+      "integrity": "sha512-CHvCj7So7iCkGKPRFUfryXIkU2gSBw7VSZFYLsqVhrS47269VK2Hfi9S/YcublPMW8k1u2bQBlbDruoQEm4fgw==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.11.1",
+        "browserslist": "^4.12.0",
         "invariant": "^2.2.4",
         "semver": "^5.5.0"
       },
       "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001054",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
-          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.432",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
-          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.55",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
-          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
-          "dev": true
-        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -163,19 +133,19 @@
       }
     },
     "@babel/core": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.6.tgz",
-      "integrity": "sha512-nD3deLvbsApbHAHttzIssYqgb883yU/d9roe4RZymBCDaZryMJDbptVpEpeQuRh4BJ+SYI8le9YGxKvFEvl1Wg==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@babel/generator": "^7.9.6",
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helpers": "^7.9.6",
-        "@babel/parser": "^7.9.6",
-        "@babel/template": "^7.8.6",
-        "@babel/traverse": "^7.9.6",
-        "@babel/types": "^7.9.6",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.1.tgz",
+      "integrity": "sha512-u8XiZ6sMXW/gPmoP5ijonSUln4unazG291X0XAQ5h0s8qnAFr6BRRZGUEK+jtRWdmB0NTJQt7Uga25q8GetIIg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.1",
+        "@babel/generator": "^7.10.1",
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helpers": "^7.10.1",
+        "@babel/parser": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.1",
@@ -187,25 +157,117 @@
       },
       "dependencies": {
         "@babel/code-frame": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
-          "integrity": "sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==",
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
           "dev": true,
           "requires": {
-            "@babel/highlight": "^7.8.3"
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
+          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
           }
         },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
         "@babel/highlight": {
-          "version": "7.9.0",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.9.0.tgz",
-          "integrity": "sha512-lJZPilxX7Op3Nv/2cvFdnlepPXDxi29wxteT57Q965oc5R9v86ztx0jfxVrTcBk8C2kcPkkDa2Z4T3ZsPPVWsQ==",
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
           "dev": true,
           "requires": {
-            "@babel/helper-validator-identifier": "^7.9.0",
+            "@babel/helper-validator-identifier": "^7.10.1",
             "chalk": "^2.0.0",
             "js-tokens": "^4.0.0"
           }
         },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
+          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/generator": "^7.10.1",
+            "@babel/helper-function-name": "^7.10.1",
+            "@babel/helper-split-export-declaration": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -227,67 +289,75 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz",
-      "integrity": "sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz",
+      "integrity": "sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz",
-      "integrity": "sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.1.tgz",
+      "integrity": "sha512-cQpVq48EkYxUU0xozpGCLla3wlkdRRqLWu1ksFMXA9CM5KQmyyRpSEsYXbao7JUkOw/tAaYKCaYyZq6HOFYtyw==",
       "dev": true,
       "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/helper-explode-assignable-expression": "^7.10.1",
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.9.6.tgz",
-      "integrity": "sha512-x2Nvu0igO0ejXzx09B/1fGBxY9NXQlBW2kZsSxCJft+KHN8t9XWzIvFxtPHnBOAXpVsdxZKZFbRUC8TsNKajMw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.1.tgz",
+      "integrity": "sha512-YuF8IrgSmX/+MV2plPkjEnzlC2wf+gaok8ehMNN0jodF3/sejZauExqpEVGbJua62oaWoNYIXwz4RmAsVcGyHw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.9.6",
-        "browserslist": "^4.11.1",
+        "@babel/compat-data": "^7.10.1",
+        "browserslist": "^4.12.0",
         "invariant": "^2.2.4",
         "levenary": "^1.1.1",
         "semver": "^5.5.0"
       },
       "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001054",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
-          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.432",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
-          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.55",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
-          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
-          "dev": true
-        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -297,49 +367,324 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.6.tgz",
-      "integrity": "sha512-6N9IeuyHvMBRyjNYOMJHrhwtu4WJMrYf8hVbEHD3pbbbmNOk1kmXSQs7bA4dYDUaIx4ZEzdnvo6NwC3WHd/Qow==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.1.tgz",
+      "integrity": "sha512-bwhdehBJZt84HuPUcP1HaTLuc/EywVS8rc3FgsEPDcivg+DCW+SHuLHVkYOmcBA1ZfI+Z/oZjQc/+bPmIO7uAA==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.9.5",
-        "@babel/helper-member-expression-to-functions": "^7.8.3",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.9.6",
-        "@babel/helper-split-export-declaration": "^7.8.3"
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/helper-member-expression-to-functions": "^7.10.1",
+        "@babel/helper-optimise-call-expression": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1",
+        "@babel/helper-split-export-declaration": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.8.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz",
-      "integrity": "sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.1.tgz",
+      "integrity": "sha512-Rx4rHS0pVuJn5pJOqaqcZR4XSgeF9G/pO/79t+4r7380tXFJdzImFnxMU19f83wjSrmKHq6myrM10pFHTGzkUA==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-regex": "^7.8.3",
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-regex": "^7.10.1",
         "regexpu-core": "^4.7.0"
       }
     },
     "@babel/helper-define-map": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz",
-      "integrity": "sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.10.1.tgz",
+      "integrity": "sha512-+5odWpX+OnvkD0Zmq7panrMuAGQBu6aPUgvMzuMGo4R+jUOvealEj2hiqI6WhxgKrTpFoFj0+VdsuA8KDxHBDg==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.8.3",
-        "@babel/types": "^7.8.3",
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/types": "^7.10.1",
         "lodash": "^4.17.13"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-explode-assignable-expression": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz",
-      "integrity": "sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.1.tgz",
+      "integrity": "sha512-vcUJ3cDjLjvkKzt6rHrl767FeE7pMEYfPanq5L16GRtrXIoznc0HykNW2aEYkcnP76P0isoqJ34dDMFZwzEpJg==",
       "dev": true,
       "requires": {
-        "@babel/traverse": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
+          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
+          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/generator": "^7.10.1",
+            "@babel/helper-function-name": "^7.10.1",
+            "@babel/helper-split-export-declaration": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-function-name": {
@@ -363,104 +708,529 @@
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz",
-      "integrity": "sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.1.tgz",
+      "integrity": "sha512-vLm5srkU8rI6X3+aQ1rQJyfjvCBLXP8cAGeuw04zeAM2ItKb1e7pmVmLyHb4sDaAYnLL13RHOZPLEtcGZ5xvjg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz",
-      "integrity": "sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.1.tgz",
+      "integrity": "sha512-u7XLXeM2n50gb6PWJ9hoO5oO7JFPaZtrh35t8RqKLT1jFKj9IWeD1zrcrYp1q1qiZTdEarfDWfTIP8nGsu0h5g==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz",
-      "integrity": "sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.1.tgz",
+      "integrity": "sha512-SFxgwYmZ3HZPyZwJRiVNLRHWuW2OgE5k2nrVs6D9Iv4PPnXVffuEHy83Sfx/l4SqF+5kyJXjAyUmrG7tNm+qVg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.8.3"
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz",
-      "integrity": "sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.1.tgz",
+      "integrity": "sha512-RLHRCAzyJe7Q7sF4oy2cB+kRnU4wDZY/H2xJFGof+M+SJEGhZsb+GFj5j1AD8NiSaVBJ+Pf0/WObiXu/zxWpFg==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.6",
-        "@babel/helper-simple-access": "^7.8.3",
-        "@babel/helper-split-export-declaration": "^7.8.3",
-        "@babel/template": "^7.8.6",
-        "@babel/types": "^7.9.0",
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1",
+        "@babel/helper-simple-access": "^7.10.1",
+        "@babel/helper-split-export-declaration": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/types": "^7.10.1",
         "lodash": "^4.17.13"
-      }
-    },
-    "@babel/helper-optimise-call-expression": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz",
-      "integrity": "sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.8.3"
-      }
-    },
-    "@babel/helper-plugin-utils": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz",
-      "integrity": "sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==",
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.1.tgz",
+      "integrity": "sha512-a0DjNS1prnBsoKx83dP2falChcs7p3i8VMzdrSbfLhuQra/2ENC4sbri34dz/rWmDADsmF1q5GbfaXydh0Jbjg==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz",
+      "integrity": "sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==",
       "dev": true
     },
     "@babel/helper-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.8.3.tgz",
-      "integrity": "sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.10.1.tgz",
+      "integrity": "sha512-7isHr19RsIJWWLLFn21ubFt223PjQyg1HY7CZEMRr820HttHPpVvrsIN3bUOo44DEfFV4kBXO7Abbn9KTUZV7g==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.13"
       }
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz",
-      "integrity": "sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.1.tgz",
+      "integrity": "sha512-RfX1P8HqsfgmJ6CwaXGKMAqbYdlleqglvVtht0HGPMSsy2V6MqLlOJVF/0Qyb/m2ZCi2z3q3+s6Pv7R/dQuZ6A==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-wrap-function": "^7.8.3",
-        "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-wrap-function": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
+          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
+          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/generator": "^7.10.1",
+            "@babel/helper-function-name": "^7.10.1",
+            "@babel/helper-split-export-declaration": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.9.6.tgz",
-      "integrity": "sha512-qX+chbxkbArLyCImk3bWV+jB5gTNU/rsze+JlcF6Nf8tVTigPJSI1o1oBow/9Resa1yehUO9lIipsmu9oG4RzA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.1.tgz",
+      "integrity": "sha512-SOwJzEfpuQwInzzQJGjGaiG578UYmyi2Xw668klPWV5n07B73S0a9btjLk/52Mlcxa+5AdIYqws1KyXRfMoB7A==",
       "dev": true,
       "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.8.3",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/traverse": "^7.9.6",
-        "@babel/types": "^7.9.6"
+        "@babel/helper-member-expression-to-functions": "^7.10.1",
+        "@babel/helper-optimise-call-expression": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
+          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
+          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/generator": "^7.10.1",
+            "@babel/helper-function-name": "^7.10.1",
+            "@babel/helper-split-export-declaration": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz",
-      "integrity": "sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.1.tgz",
+      "integrity": "sha512-VSWpWzRzn9VtgMJBIWTZ+GP107kZdQ4YplJlCmIrjoLVSi/0upixezHCDG8kpPVTBJpKfxTH01wDhh+jS2zKbw==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/template": "^7.10.1",
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-split-export-declaration": {
@@ -479,156 +1249,394 @@
       "dev": true
     },
     "@babel/helper-wrap-function": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz",
-      "integrity": "sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.1.tgz",
+      "integrity": "sha512-C0MzRGteVDn+H32/ZgbAv5r56f2o1fZSA/rj/TYo8JEJNHg+9BdSmKBUND0shxWRztWhjlT2cvHYuynpPsVJwQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.8.3",
-        "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.8.3",
-        "@babel/types": "^7.8.3"
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/template": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
+          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
+          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/generator": "^7.10.1",
+            "@babel/helper-function-name": "^7.10.1",
+            "@babel/helper-split-export-declaration": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helpers": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.9.6.tgz",
-      "integrity": "sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.8.3",
-        "@babel/traverse": "^7.9.6",
-        "@babel/types": "^7.9.6"
-      }
-    },
-    "@babel/highlight": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.0.tgz",
-      "integrity": "sha512-OsdTJbHlPtIk2mmtwXItYrdmalJ8T0zpVzNAbKSkHshuywj7zb29Y09McV/jQsQunc/nEyHiPV2oy9llYMLqxw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.0.0",
-        "esutils": "^2.0.2",
-        "js-tokens": "^4.0.0"
-      }
-    },
-    "@babel/parser": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.6.tgz",
-      "integrity": "sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==",
-      "dev": true
-    },
-    "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz",
-      "integrity": "sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-remap-async-to-generator": "^7.8.3",
-        "@babel/plugin-syntax-async-generators": "^7.8.0"
-      }
-    },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz",
-      "integrity": "sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.1.tgz",
+      "integrity": "sha512-muQNHF+IdU6wGgkaJyhhEmI54MOZBKsFfsXFhboz1ybwJ1Kl7IHlbm2a++4jwrmY5UYsgitt5lfqo1wMFcHmyw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
-      }
-    },
+        "@babel/template": "^7.10.1",
+        "@babel/traverse": "^7.10.1",
+        "@babel/types": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
+          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.1.tgz",
+          "integrity": "sha512-C/cTuXeKt85K+p08jN6vMDz8vSV0vZcI0wmQ36o6mjbuo++kPMdpOYw23W2XH04dbRt9/nMEfA4W3eR21CD+TQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/generator": "^7.10.1",
+            "@babel/helper-function-name": "^7.10.1",
+            "@babel/helper-split-export-declaration": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.13"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.8.0.tgz",
+      "integrity": "sha512-OsdTJbHlPtIk2mmtwXItYrdmalJ8T0zpVzNAbKSkHshuywj7zb29Y09McV/jQsQunc/nEyHiPV2oy9llYMLqxw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^2.0.0",
+        "esutils": "^2.0.2",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.9.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.9.6.tgz",
+      "integrity": "sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==",
+      "dev": true
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.1.tgz",
+      "integrity": "sha512-vzZE12ZTdB336POZjmpblWfNNRpMSua45EYnRigE2XsZxcXcIyly2ixnTJasJE4Zq3U7t2d8rRF7XRUuzHxbOw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-remap-async-to-generator": "^7.10.1",
+        "@babel/plugin-syntax-async-generators": "^7.8.0"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.1.tgz",
+      "integrity": "sha512-sqdGWgoXlnOdgMXU+9MbhzwFRgxVLeiGBqTrnuS7LC2IBU31wSsESbTUreT2O418obpfPdGUR2GbEufZF1bpqw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
+      }
+    },
     "@babel/plugin-proposal-decorators": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.8.3.tgz",
-      "integrity": "sha512-e3RvdvS4qPJVTe288DlXjwKflpfy1hr0j5dz5WpIYYeP7vQZg2WfAEIp8k5/Lwis/m5REXEteIz6rrcDtXXG7w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.10.1.tgz",
+      "integrity": "sha512-xBfteh352MTke2U1NpclzMDmAmCdQ2fBZjhZQQfGTjXw6qcRYMkt528sA1U8o0ThDCSeuETXIj5bOGdxN+5gkw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-decorators": "^7.8.3"
+        "@babel/helper-create-class-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-decorators": "^7.10.1"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.1.tgz",
+      "integrity": "sha512-Cpc2yUVHTEGPlmiQzXj026kqwjEQAD9I4ZC16uzdbgWgitg/UHKHLffKNCQZ5+y8jpIZPJcKcwsr2HwPh+w3XA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz",
-      "integrity": "sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.1.tgz",
+      "integrity": "sha512-m8r5BmV+ZLpWPtMY2mOKN7wre6HIO4gfIiV+eOmsnZABNenrt/kzYBwrh+KOfgumSWpnlGs5F70J8afYMSJMBg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-json-strings": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.1.tgz",
+      "integrity": "sha512-56cI/uHYgL2C8HVuHOuvVowihhX0sxb3nnfVRzUeVHTWmRHTZrKuAh/OBIMggGU/S1g/1D2CRCXqP+3u7vX7iA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz",
-      "integrity": "sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.1.tgz",
+      "integrity": "sha512-jjfym4N9HtCiNfyyLAVD8WqPYeHUrw4ihxuAynWj6zzp2gf9Ey2f7ImhFm6ikB3CLf5Z/zmcJDri6B4+9j9RsA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.1"
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.6.tgz",
-      "integrity": "sha512-Ga6/fhGqA9Hj+y6whNpPv8psyaK5xzrQwSPsGPloVkvmH+PqW1ixdnfJ9uIO06OjQNYol3PMnfmJ8vfZtkzF+A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.1.tgz",
+      "integrity": "sha512-Z+Qri55KiQkHh7Fc4BW6o+QBuTagbOp9txE+4U1i79u9oWlf2npkiDx+Rf3iK3lbcHBuNy9UOkwuR5wOMH3LIQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.9.5"
+        "@babel/plugin-transform-parameters": "^7.10.1"
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.1.tgz",
+      "integrity": "sha512-VqExgeE62YBqI3ogkGoOJp1R6u12DFZjqwJhqtKc2o5m1YTUuUWnos7bZQFBhwkxIFpWYJ7uB75U7VAPPiKETA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz",
-      "integrity": "sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.1.tgz",
+      "integrity": "sha512-dqQj475q8+/avvok72CF3AOSV/SGEcH29zT5hhohqqvvZ2+boQoOr7iGldBG5YXTO2qgCgc2B3WvVLUdbeMlGA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0"
       }
     },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.1.tgz",
+      "integrity": "sha512-RZecFFJjDiQ2z6maFprLgrdnm0OzoC23Mx89xf1CcEsxmHuzuXOdniEuI+S3v7vjQG4F5sa6YtUp+19sZuSxHg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
+      }
+    },
     "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.8.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz",
-      "integrity": "sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.1.tgz",
+      "integrity": "sha512-JjfngYRvwmPwmnbRZyNiPFI8zxCZb8euzbCG/LxyKdeTb59tVciKo9GK9bi6JYKInk1H11Dq9j/zRqIH4KigfQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.8",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-async-generators": {
@@ -640,13 +1648,22 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.1.tgz",
+      "integrity": "sha512-Gf2Yx/iRs1JREDtVZ56OrjjgFHCaldpTnuy9BHla10qyVT3YkIIGEtoDWhyop0ksu1GvNjHIoYRBqm3zoR1jyQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.1"
+      }
+    },
     "@babel/plugin-syntax-decorators": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz",
-      "integrity": "sha512-8Hg4dNNT9/LcA1zQlfwuKR8BUc/if7Q7NkTam9sGTcJphLwpf2g4S42uhspQrIrR+dpzE0dtTqBVFoHl8GtnnQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.10.1.tgz",
+      "integrity": "sha512-a9OAbQhKOwSle1Vr0NJu/ISg1sPfdEkfRKWpgPuzhnWWzForou2gIeUIIwjAMHRekhhpJ7eulZlYs0H14Cbi+g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
@@ -659,12 +1676,12 @@
       }
     },
     "@babel/plugin-syntax-flow": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.8.3.tgz",
-      "integrity": "sha512-innAx3bUbA0KSYj2E2MNFSn9hiCeowOFLxlsuhXzw8hMQnzkDomUr9QCD7E9VF60NmnG1sNTuuv6Qf4f8INYsg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.10.1.tgz",
+      "integrity": "sha512-b3pWVncLBYoPP60UOTc7NMlbtsHQ6ITim78KQejNHK6WJ2mzV5kCcg4mIWpasAfJEgwVTibwo2e+FU7UEIKQUg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-json-strings": {
@@ -677,12 +1694,12 @@
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz",
-      "integrity": "sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz",
+      "integrity": "sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-nullish-coalescing-operator": {
@@ -695,12 +1712,12 @@
       }
     },
     "@babel/plugin-syntax-numeric-separator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz",
-      "integrity": "sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.1.tgz",
+      "integrity": "sha512-uTd0OsHrpe3tH5gRPTxG8Voh99/WCU78vIm5NMRYPAqC8lR4vajt6KkCAknCHrx24vkPdd/05yfdGSB4EIY2mg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-object-rest-spread": {
@@ -731,215 +1748,376 @@
       }
     },
     "@babel/plugin-syntax-top-level-await": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz",
-      "integrity": "sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.1.tgz",
+      "integrity": "sha512-hgA5RYkmZm8FTFT3yu2N9Bx7yVVOKYT6yEdXXo6j2JTm0wNxgqaGeQVaSHRjhfnQbX91DtjFB6McRFSlcJH3xQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz",
-      "integrity": "sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.10.1.tgz",
+      "integrity": "sha512-X/d8glkrAtra7CaQGMiGs/OGa6XgUzqPcBXCIGFCpCqnfGlT0Wfbzo/B89xHhnInTaItPK8LALblVXcUOEh95Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz",
-      "integrity": "sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.1.tgz",
+      "integrity": "sha512-6AZHgFJKP3DJX0eCNJj01RpytUa3SOGawIxweHkNX2L6PYikOZmoh5B0d7hIHaIgveMjX990IAa/xK7jRTN8OA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz",
-      "integrity": "sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.1.tgz",
+      "integrity": "sha512-XCgYjJ8TY2slj6SReBUyamJn3k2JLUIiiR5b6t1mNCMSvv7yx+jJpaewakikp0uWFQSF7ChPPoe3dHmXLpISkg==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-remap-async-to-generator": "^7.8.3"
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-remap-async-to-generator": "^7.10.1"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz",
-      "integrity": "sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.1.tgz",
+      "integrity": "sha512-B7K15Xp8lv0sOJrdVAoukKlxP9N59HS48V1J3U/JGj+Ad+MHq+am6xJVs85AgXrQn4LV8vaYFOB+pr/yIuzW8Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz",
-      "integrity": "sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.1.tgz",
+      "integrity": "sha512-8bpWG6TtF5akdhIm/uWTyjHqENpy13Fx8chg7pFH875aNLwX8JxIxqm08gmAT+Whe6AOmaTeLPe7dpLbXt+xUw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "lodash": "^4.17.13"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.5.tgz",
-      "integrity": "sha512-x2kZoIuLC//O5iA7PEvecB105o7TLzZo8ofBVhP79N+DO3jaX+KYfww9TQcfBEZD0nikNyYcGB1IKtRq36rdmg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-define-map": "^7.8.3",
-        "@babel/helper-function-name": "^7.9.5",
-        "@babel/helper-optimise-call-expression": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.6",
-        "@babel/helper-split-export-declaration": "^7.8.3",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.1.tgz",
+      "integrity": "sha512-P9V0YIh+ln/B3RStPoXpEQ/CoAxQIhRSUn7aXqQ+FZJ2u8+oCtjIXR3+X0vsSD8zv+mb56K7wZW1XiDTDGiDRQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-define-map": "^7.10.1",
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/helper-optimise-call-expression": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1",
+        "@babel/helper-split-export-declaration": "^7.10.1",
         "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.1.tgz",
+          "integrity": "sha512-UQ1LVBPrYdbchNhLwj6fetj46BcFwfS4NllJo/1aJsT+1dLTEnXJL0qHqtY7gPzF8S2fXBJamf1biAXV3X077g==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz",
-      "integrity": "sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.1.tgz",
+      "integrity": "sha512-mqSrGjp3IefMsXIenBfGcPXxJxweQe2hEIwMQvjtiDQ9b1IBvDUjkAtV/HMXX47/vXf14qDNedXsIiNd1FmkaQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.9.5.tgz",
-      "integrity": "sha512-j3OEsGel8nHL/iusv/mRd5fYZ3DrOxWC82x0ogmdN/vHfAP4MYw+AFKYanzWlktNwikKvlzUV//afBW5FTp17Q==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.1.tgz",
+      "integrity": "sha512-V/nUc4yGWG71OhaTH705pU8ZSdM6c1KmmLP8ys59oOYbT7RpMYAR3MsVOt6OHL0WzG7BlTU076va9fjJyYzJMA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz",
-      "integrity": "sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.1.tgz",
+      "integrity": "sha512-19VIMsD1dp02RvduFUmfzj8uknaO3uiHHF0s3E1OHnVsNj8oge8EQ5RzHRbJjGSetRnkEuBYO7TG1M5kKjGLOA==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz",
-      "integrity": "sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.1.tgz",
+      "integrity": "sha512-wIEpkX4QvX8Mo9W6XF3EdGttrIPZWozHfEaDTU0WJD/TDnXMvdDh30mzUl/9qWhnf7naicYartcEfUghTCSNpA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz",
-      "integrity": "sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.1.tgz",
+      "integrity": "sha512-lr/przdAbpEA2BUzRvjXdEDLrArGRRPwbaF9rvayuHRvdQ7lUTTkZnhZrJ4LE2jvgMRFF4f0YuPQ20vhiPYxtA==",
       "dev": true,
       "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-flow-strip-types": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.9.0.tgz",
-      "integrity": "sha512-7Qfg0lKQhEHs93FChxVLAvhBshOPQDtJUTVHr/ZwQNRccCm4O9D79r9tVSoV8iNwjP1YgfD+e/fgHcPkN1qEQg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.10.1.tgz",
+      "integrity": "sha512-i4o0YwiJBIsIx7/liVCZ3Q2WkWr1/Yu39PksBOnh/khW2SwIFsGa5Ze+MSon5KbDfrEHP9NeyefAgvUSXzaEkw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-flow": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-flow": "^7.10.1"
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz",
-      "integrity": "sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.1.tgz",
+      "integrity": "sha512-US8KCuxfQcn0LwSCMWMma8M2R5mAjJGsmoCBVwlMygvmDUMkTCykc84IqN1M7t+agSfOmLYTInLCHJM+RUoz+w==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz",
-      "integrity": "sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.1.tgz",
+      "integrity": "sha512-//bsKsKFBJfGd65qSNNh1exBy5Y9gD9ZN+DvrJ8f7HXr4avE5POW6zB7Rj6VnqHV33+0vXWUwJT0wSHubiAQkw==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-function-name": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz",
+          "integrity": "sha512-IGhtTmpjGbYzcEDOw7DcQtbQSXcG9ftmAXtWTu9V936vDye4xjjekktFAtgZsWpzTj/X01jocB46mTywm/4SZw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.1.tgz",
+          "integrity": "sha512-fcpumwhs3YyZ/ttd5Rz0xn0TpIwVkN7X0V38B9TWNfVF42KEkhkAAuPCQ3oXmtTRtiPJrmZ0TrfS0GKF0eMaRQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.1",
+            "@babel/template": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.1.tgz",
+          "integrity": "sha512-8rMof+gVP8mxYZApLF/JgNDAkdKa+aJt3ZYxF8z6+j/hpeXL7iMsKCPHa2jNMHu/qqBwzQF4OHNoYi8dMA/rYg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
+          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.1.tgz",
+          "integrity": "sha512-OQDg6SqvFSsc9A0ej6SKINWrpJiNonRIniYondK2ViKhB06i3c0s+76XUft71iqBEe9S1OKsHwPAjfHnuvnCig==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.1",
+            "@babel/parser": "^7.10.1",
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz",
-      "integrity": "sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.1.tgz",
+      "integrity": "sha512-qi0+5qgevz1NHLZroObRm5A+8JJtibb7vdcPQF1KQE12+Y/xxl8coJ+TpPW9iRq+Mhw/NKLjm+5SHtAHCC7lAw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz",
-      "integrity": "sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.1.tgz",
+      "integrity": "sha512-UmaWhDokOFT2GcgU6MkHC11i0NQcL63iqeufXWfRy6pUOGYeCGEKhvfFO6Vz70UfYJYHwveg62GS83Rvpxn+NA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.6.tgz",
-      "integrity": "sha512-zoT0kgC3EixAyIAU+9vfaUVKTv9IxBDSabgHoUCBP6FqEJ+iNiN7ip7NBKcYqbfUDfuC2mFCbM7vbu4qJgOnDw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.1.tgz",
+      "integrity": "sha512-31+hnWSFRI4/ACFr1qkboBbrTxoBIzj7qA69qlq8HY8p7+YCzkCT6/TvQ1a4B0z27VeWtAeJd6pr5G04dc1iHw==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.6.tgz",
-      "integrity": "sha512-7H25fSlLcn+iYimmsNe3uK1at79IE6SKW9q0/QeEHTMC9MdOZ+4bA+T1VFB5fgOqBWoqlifXRzYD0JPdmIrgSQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.1.tgz",
+      "integrity": "sha512-AQG4fc3KOah0vdITwt7Gi6hD9BtQP/8bhem7OjbaMoRNCH5Djx42O2vYMfau7QnAzQCa+RJnhJBmFFMGpQEzrg==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-simple-access": "^7.8.3",
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-simple-access": "^7.10.1",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.6.tgz",
-      "integrity": "sha512-NW5XQuW3N2tTHim8e1b7qGy7s0kZ2OH3m5octc49K1SdAKGxYxeIx7hiIz05kS1R2R+hOWcsr1eYwcGhrdHsrg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.1.tgz",
+      "integrity": "sha512-ewNKcj1TQZDL3YnO85qh9zo1YF1CHgmSTlRQgHqe63oTrMI85cthKtZjAiZSsSNjPQ5NCaYo5QkbYqEw1ZBgZA==",
       "dev": true,
       "requires": {
-        "@babel/helper-hoist-variables": "^7.8.3",
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-hoist-variables": "^7.10.1",
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "babel-plugin-dynamic-import-node": "^2.3.3"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz",
-      "integrity": "sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.1.tgz",
+      "integrity": "sha512-EIuiRNMd6GB6ulcYlETnYYfgv4AxqrswghmBRQbWLHZxN4s7mupxzglnHqk9ZiUpDI4eRWewedJJNj67PWOXKA==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-module-transforms": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
@@ -952,69 +2130,97 @@
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz",
-      "integrity": "sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.1.tgz",
+      "integrity": "sha512-MBlzPc1nJvbmO9rPr1fQwXOM2iGut+JC92ku6PbiJMMK7SnQc1rytgpopveE3Evn47gzvGYeCdgfCDbZo0ecUw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz",
-      "integrity": "sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.1.tgz",
+      "integrity": "sha512-WnnStUDN5GL+wGQrJylrnnVlFhFmeArINIR9gjhSeYyvroGhBrSAXYg/RHsnfzmsa+onJrTJrEClPzgNmmQ4Gw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-replace-supers": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-replace-supers": "^7.10.1"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.9.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.5.tgz",
-      "integrity": "sha512-0+1FhHnMfj6lIIhVvS4KGQJeuhe1GI//h5uptK4PvLt+BGBxsoUJbd3/IW002yk//6sZPlFgsG1hY6OHLcy6kA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.1.tgz",
+      "integrity": "sha512-tJ1T0n6g4dXMsL45YsSzzSDZCxiHXAQp/qHrucOq5gEHncTA3xDxnd5+sZcoQp+N1ZbieAaB8r/VUCG0gqseOg==",
       "dev": true,
       "requires": {
-        "@babel/helper-get-function-arity": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-get-function-arity": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
+      },
+      "dependencies": {
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.1.tgz",
+          "integrity": "sha512-F5qdXkYGOQUb0hpRaPoetF9AnsXknKjWMZ+wmsIRsp5ge5sFh4c3h1eH2pRTTuy9KKAA2+TTYomGXAtEL2fQEw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.1"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz",
-      "integrity": "sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.1.tgz",
+      "integrity": "sha512-Kr6+mgag8auNrgEpbfIWzdXYOvqDHZOF0+Bx2xh4H2EDNwcbRb9lY6nkZg8oSjsX+DH9Ebxm9hOqtKW+gRDeNA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.8.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz",
-      "integrity": "sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.1.tgz",
+      "integrity": "sha512-B3+Y2prScgJ2Bh/2l9LJxKbb8C8kRfsG4AdPT+n7ixBHIxJaIG8bi8tgjxUMege1+WqSJ+7gu1YeoMVO3gPWzw==",
       "dev": true,
       "requires": {
         "regenerator-transform": "^0.14.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz",
-      "integrity": "sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.1.tgz",
+      "integrity": "sha512-qN1OMoE2nuqSPmpTqEM7OvJ1FkMEV+BjVeZZm9V9mq/x1JLKQ4pcv8riZJMNN3u2AUGl0ouOMjRr2siecvHqUQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-runtime": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.6.tgz",
-      "integrity": "sha512-qcmiECD0mYOjOIt8YHNsAP1SxPooC/rDmfmiSK9BNY72EitdSc7l44WTEklaWuFtbOEBjNhWWyph/kOImbNJ4w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.10.1.tgz",
+      "integrity": "sha512-4w2tcglDVEwXJ5qxsY++DgWQdNJcCCsPxfT34wCUwIf2E7dI7pMpH8JczkMBbgBTNzBX62SZlNJ9H+De6Zebaw==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
         "resolve": "^1.8.1",
         "semver": "^5.5.1"
       },
@@ -1028,171 +2234,171 @@
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz",
-      "integrity": "sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.1.tgz",
+      "integrity": "sha512-AR0E/lZMfLstScFwztApGeyTHJ5u3JUKMjneqRItWeEqDdHWZwAOKycvQNCasCK/3r5YXsuNG25funcJDu7Y2g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz",
-      "integrity": "sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.1.tgz",
+      "integrity": "sha512-8wTPym6edIrClW8FI2IoaePB91ETOtg36dOkj3bYcNe7aDMN2FXEoUa+WrmPc4xa1u2PQK46fUX2aCb+zo9rfw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz",
-      "integrity": "sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.1.tgz",
+      "integrity": "sha512-j17ojftKjrL7ufX8ajKvwRilwqTok4q+BjkknmQw9VNHnItTyMP5anPFzxFJdCQs7clLcWpCV3ma+6qZWLnGMA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/helper-regex": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/helper-regex": "^7.10.1"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz",
-      "integrity": "sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.1.tgz",
+      "integrity": "sha512-t7B/3MQf5M1T9hPCRG28DNGZUuxAuDqLYS03rJrIk2prj/UV7Z6FOneijhQhnv/Xa039vidXeVbvjK2SK5f7Gg==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-annotate-as-pure": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz",
-      "integrity": "sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.1.tgz",
+      "integrity": "sha512-qX8KZcmbvA23zDi+lk9s6hC1FM7jgLHYIjuLgULgc8QtYnmB3tAVIYkNoKRQ75qWBeyzcoMoK8ZQmogGtC/w0g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.6.tgz",
-      "integrity": "sha512-8OvsRdvpt3Iesf2qsAn+YdlwAJD7zJ+vhFZmDCa4b8dTp7MmHtKk5FF2mCsGxjZwuwsy/yIIay/nLmxST1ctVQ==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.10.1.tgz",
+      "integrity": "sha512-v+QWKlmCnsaimLeqq9vyCsVRMViZG1k2SZTlcZvB+TqyH570Zsij8nvVUZzOASCRiQFUxkLrn9Wg/kH0zgy5OQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.9.6",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-syntax-typescript": "^7.8.3"
+        "@babel/helper-create-class-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-syntax-typescript": "^7.10.1"
       }
     },
-    "@babel/plugin-transform-unicode-regex": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz",
-      "integrity": "sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==",
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.1.tgz",
+      "integrity": "sha512-zZ0Poh/yy1d4jeDWpx/mNwbKJVwUYJX73q+gyh4bwtG0/iUlzdEu0sLMda8yuDFS6LBQlT/ST1SJAR6zYwXWgw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.10.1"
       }
     },
-    "@babel/preset-env": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.9.6.tgz",
-      "integrity": "sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==",
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.1.tgz",
+      "integrity": "sha512-Y/2a2W299k0VIUdbqYm9X2qS6fE0CUBhhiPpimK6byy7OJ/kORLlIX+J6UrjgNu5awvs62k+6RSslxhcvVw2Tw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.9.6",
-        "@babel/helper-compilation-targets": "^7.9.6",
-        "@babel/helper-module-imports": "^7.8.3",
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-proposal-async-generator-functions": "^7.8.3",
-        "@babel/plugin-proposal-dynamic-import": "^7.8.3",
-        "@babel/plugin-proposal-json-strings": "^7.8.3",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-proposal-numeric-separator": "^7.8.3",
-        "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-proposal-optional-chaining": "^7.9.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.8.3",
+        "@babel/helper-create-regexp-features-plugin": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.1.tgz",
+      "integrity": "sha512-bGWNfjfXRLnqbN2T4lB3pMfoic8dkRrmHpVZamSFHzGy5xklyHTobZ28TVUD2grhE5WDnu67tBj8oslIhkiOMQ==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.10.1",
+        "@babel/helper-compilation-targets": "^7.10.1",
+        "@babel/helper-module-imports": "^7.10.1",
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-proposal-async-generator-functions": "^7.10.1",
+        "@babel/plugin-proposal-class-properties": "^7.10.1",
+        "@babel/plugin-proposal-dynamic-import": "^7.10.1",
+        "@babel/plugin-proposal-json-strings": "^7.10.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
+        "@babel/plugin-proposal-numeric-separator": "^7.10.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
+        "@babel/plugin-proposal-optional-catch-binding": "^7.10.1",
+        "@babel/plugin-proposal-optional-chaining": "^7.10.1",
+        "@babel/plugin-proposal-private-methods": "^7.10.1",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.10.1",
         "@babel/plugin-syntax-async-generators": "^7.8.0",
+        "@babel/plugin-syntax-class-properties": "^7.10.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.0",
         "@babel/plugin-syntax-json-strings": "^7.8.0",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.0",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.1",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
         "@babel/plugin-syntax-optional-chaining": "^7.8.0",
-        "@babel/plugin-syntax-top-level-await": "^7.8.3",
-        "@babel/plugin-transform-arrow-functions": "^7.8.3",
-        "@babel/plugin-transform-async-to-generator": "^7.8.3",
-        "@babel/plugin-transform-block-scoped-functions": "^7.8.3",
-        "@babel/plugin-transform-block-scoping": "^7.8.3",
-        "@babel/plugin-transform-classes": "^7.9.5",
-        "@babel/plugin-transform-computed-properties": "^7.8.3",
-        "@babel/plugin-transform-destructuring": "^7.9.5",
-        "@babel/plugin-transform-dotall-regex": "^7.8.3",
-        "@babel/plugin-transform-duplicate-keys": "^7.8.3",
-        "@babel/plugin-transform-exponentiation-operator": "^7.8.3",
-        "@babel/plugin-transform-for-of": "^7.9.0",
-        "@babel/plugin-transform-function-name": "^7.8.3",
-        "@babel/plugin-transform-literals": "^7.8.3",
-        "@babel/plugin-transform-member-expression-literals": "^7.8.3",
-        "@babel/plugin-transform-modules-amd": "^7.9.6",
-        "@babel/plugin-transform-modules-commonjs": "^7.9.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.9.6",
-        "@babel/plugin-transform-modules-umd": "^7.9.0",
+        "@babel/plugin-syntax-top-level-await": "^7.10.1",
+        "@babel/plugin-transform-arrow-functions": "^7.10.1",
+        "@babel/plugin-transform-async-to-generator": "^7.10.1",
+        "@babel/plugin-transform-block-scoped-functions": "^7.10.1",
+        "@babel/plugin-transform-block-scoping": "^7.10.1",
+        "@babel/plugin-transform-classes": "^7.10.1",
+        "@babel/plugin-transform-computed-properties": "^7.10.1",
+        "@babel/plugin-transform-destructuring": "^7.10.1",
+        "@babel/plugin-transform-dotall-regex": "^7.10.1",
+        "@babel/plugin-transform-duplicate-keys": "^7.10.1",
+        "@babel/plugin-transform-exponentiation-operator": "^7.10.1",
+        "@babel/plugin-transform-for-of": "^7.10.1",
+        "@babel/plugin-transform-function-name": "^7.10.1",
+        "@babel/plugin-transform-literals": "^7.10.1",
+        "@babel/plugin-transform-member-expression-literals": "^7.10.1",
+        "@babel/plugin-transform-modules-amd": "^7.10.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.10.1",
+        "@babel/plugin-transform-modules-systemjs": "^7.10.1",
+        "@babel/plugin-transform-modules-umd": "^7.10.1",
         "@babel/plugin-transform-named-capturing-groups-regex": "^7.8.3",
-        "@babel/plugin-transform-new-target": "^7.8.3",
-        "@babel/plugin-transform-object-super": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.9.5",
-        "@babel/plugin-transform-property-literals": "^7.8.3",
-        "@babel/plugin-transform-regenerator": "^7.8.7",
-        "@babel/plugin-transform-reserved-words": "^7.8.3",
-        "@babel/plugin-transform-shorthand-properties": "^7.8.3",
-        "@babel/plugin-transform-spread": "^7.8.3",
-        "@babel/plugin-transform-sticky-regex": "^7.8.3",
-        "@babel/plugin-transform-template-literals": "^7.8.3",
-        "@babel/plugin-transform-typeof-symbol": "^7.8.4",
-        "@babel/plugin-transform-unicode-regex": "^7.8.3",
+        "@babel/plugin-transform-new-target": "^7.10.1",
+        "@babel/plugin-transform-object-super": "^7.10.1",
+        "@babel/plugin-transform-parameters": "^7.10.1",
+        "@babel/plugin-transform-property-literals": "^7.10.1",
+        "@babel/plugin-transform-regenerator": "^7.10.1",
+        "@babel/plugin-transform-reserved-words": "^7.10.1",
+        "@babel/plugin-transform-shorthand-properties": "^7.10.1",
+        "@babel/plugin-transform-spread": "^7.10.1",
+        "@babel/plugin-transform-sticky-regex": "^7.10.1",
+        "@babel/plugin-transform-template-literals": "^7.10.1",
+        "@babel/plugin-transform-typeof-symbol": "^7.10.1",
+        "@babel/plugin-transform-unicode-escapes": "^7.10.1",
+        "@babel/plugin-transform-unicode-regex": "^7.10.1",
         "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.9.6",
-        "browserslist": "^4.11.1",
+        "@babel/types": "^7.10.1",
+        "browserslist": "^4.12.0",
         "core-js-compat": "^3.6.2",
         "invariant": "^2.2.2",
         "levenary": "^1.1.1",
         "semver": "^5.5.0"
       },
       "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
+          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
           "dev": true,
           "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001054",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
-          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.432",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
-          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.55",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
-          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
-          "dev": true
-        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -1202,13 +2408,13 @@
       }
     },
     "@babel/preset-flow": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.9.0.tgz",
-      "integrity": "sha512-88uSmlshIrlmPkNkEcx3UpSZ6b8n0UGBq0/0ZMZCF/uxAW0XIAUuDHBhIOAh0pvweafH4RxOwi/H3rWhtqOYPA==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.10.1.tgz",
+      "integrity": "sha512-FuQsibb5PaX07fF1XUO5gjjxdEZbcJv8+ugPDaeFEsBIvUTib8hCtEJow/c2F0jq9ZUjpHCQ8IQKNHRvKE1kJQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-transform-flow-strip-types": "^7.9.0"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-transform-flow-strip-types": "^7.10.1"
       }
     },
     "@babel/preset-modules": {
@@ -1225,19 +2431,19 @@
       }
     },
     "@babel/preset-typescript": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz",
-      "integrity": "sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.10.1.tgz",
+      "integrity": "sha512-m6GV3y1ShiqxnyQj10600ZVOFrSSAa8HQ3qIUk2r+gcGtHTIRw0dJnFLt1WNXpKjtVw7yw1DAPU/6ma2ZvgJuA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-transform-typescript": "^7.9.0"
+        "@babel/helper-plugin-utils": "^7.10.1",
+        "@babel/plugin-transform-typescript": "^7.10.1"
       }
     },
     "@babel/register": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.9.0.tgz",
-      "integrity": "sha512-Tv8Zyi2J2VRR8g7pC5gTeIN8Ihultbmk0ocyNz8H2nEZbmhp1N6q0A1UGsQbDvGP/sNinQKUHf3SqXwqjtFv4Q==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.10.1.tgz",
+      "integrity": "sha512-sl96+kB3IA2B9EzpwwBmYadOT14vw3KaXOknGDbJaZCOj52GDA4Tivudq9doCJcB+bEIKCEARZYwRgBBsCGXyg==",
       "dev": true,
       "requires": {
         "find-cache-dir": "^2.0.0",
@@ -1499,14 +2705,20 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
           }
         },
+        "ansi-escapes": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+          "dev": true
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -1548,9 +2760,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -1581,9 +2793,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -1632,9 +2844,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -1721,9 +2933,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -1779,9 +2991,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -1903,30 +3115,93 @@
       }
     },
     "@oclif/color": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/@oclif/color/-/color-0.0.0.tgz",
-      "integrity": "sha512-KKd3W7eNwfNF061tr663oUNdt8EMnfuyf5Xv55SGWA1a0rjhWqS/32P7OeB7CbXcJUBdfVrPyR//1afaW12AWw==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@oclif/color/-/color-0.1.2.tgz",
+      "integrity": "sha512-M9o+DOrb8l603qvgz1FogJBUGLqcMFL1aFg2ZEL0FbXJofiNTLOWIeB4faeZTLwE6dt0xH9GpCVpzksMMzGbmA==",
       "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
+        "chalk": "^3.0.0",
+        "strip-ansi": "^5.2.0",
         "supports-color": "^5.4.0",
         "tslib": "^1"
       },
       "dependencies": {
-        "tslib": {
-          "version": "1.13.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
-          "dev": true
-        }
-      }
-    },
-    "@oclif/command": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.6.0.tgz",
-      "integrity": "sha512-jHLlsi8WzCNTlbSWFBkpNkYdhg7tOV7aV4Kfig+2hbFxuwgf8HTRVzVKBLDmhySWdbzjg1Z7yOpne8rU4hVc8g==",
-      "dev": true,
-      "requires": {
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "4.2.1",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+              "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+              "dev": true,
+              "requires": {
+                "@types/color-name": "^1.1.1",
+                "color-convert": "^2.0.1"
+              }
+            },
+            "supports-color": {
+              "version": "7.1.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+              "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^4.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
+        }
+      }
+    },
+    "@oclif/command": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@oclif/command/-/command-1.6.1.tgz",
+      "integrity": "sha512-pvmMmfGn+zm4e4RwVw63mg9sIaqKqmVsFbImQoUrCO/43UmWzoSHWNXKdgEGigOezWrkZfFucaeZcSbp149OWg==",
+      "dev": true,
+      "requires": {
         "@oclif/config": "^1.15.1",
         "@oclif/errors": "^1.2.2",
         "@oclif/parser": "^3.8.3",
@@ -1936,9 +3211,9 @@
       },
       "dependencies": {
         "@oclif/plugin-help": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-3.0.0.tgz",
-          "integrity": "sha512-mrV1O1VXy+ssW0kmIvFYkuEEPYZWKpyqydyHbKa316esAHatsZlrw6cRItf3TuKHTAqeGuXPctPV4mO2e21F9w==",
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-3.0.1.tgz",
+          "integrity": "sha512-Q1OITeUBkkydPf6r5qX75KgE9capr1mNrfHtfD7gkVXmqoTndrbc++z4KfAYNf5nhTCY7N9l52sjbF6BrSGu9w==",
           "dev": true,
           "requires": {
             "@oclif/command": "^1.5.20",
@@ -2043,11 +3318,12 @@
       "dev": true
     },
     "@oclif/parser": {
-      "version": "3.8.4",
-      "resolved": "https://registry.npmjs.org/@oclif/parser/-/parser-3.8.4.tgz",
-      "integrity": "sha512-cyP1at3l42kQHZtqDS3KfTeyMvxITGwXwH1qk9ktBYvqgMp5h4vHT+cOD74ld3RqJUOZY/+Zi9lb4Tbza3BtuA==",
+      "version": "3.8.5",
+      "resolved": "https://registry.npmjs.org/@oclif/parser/-/parser-3.8.5.tgz",
+      "integrity": "sha512-yojzeEfmSxjjkAvMRj0KzspXlMjCfBzNRPkWw8ZwOSoNWoJn+OCS/m/S+yfV6BvAM4u2lTzX9Y5rCbrFIgkJLg==",
       "dev": true,
       "requires": {
+        "@oclif/errors": "^1.2.2",
         "@oclif/linewrap": "^1.0.0",
         "chalk": "^2.4.2",
         "tslib": "^1.9.3"
@@ -2062,115 +3338,18 @@
       }
     },
     "@oclif/plugin-autocomplete": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@oclif/plugin-autocomplete/-/plugin-autocomplete-0.1.5.tgz",
-      "integrity": "sha512-Afchpdd8FNfx9GaU/1D9IzyfiXvjfGybgzQ6G4GTFvPO0/hLdkXX3YyYq+SnxE6/bCrhg4pleiB+GuJACmmkEA==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@oclif/plugin-autocomplete/-/plugin-autocomplete-0.2.0.tgz",
+      "integrity": "sha512-pHbaE2PH7d9lHjCgFrrQ+ZIwvY+7OAQaGoaANqDbicBNDK/Rszt4N4oGj22dJT7sCQ8a/3Eh942rjxYIq9Mi9Q==",
       "dev": true,
       "requires": {
-        "@oclif/command": "^1.4.31",
-        "@oclif/config": "^1.6.22",
+        "@oclif/command": "^1.5.13",
+        "@oclif/config": "^1.13.0",
         "chalk": "^2.4.1",
-        "cli-ux": "^4.4.0",
-        "debug": "^3.1.0",
-        "fs-extra": "^6.0.1",
+        "cli-ux": "^5.2.1",
+        "debug": "^4.0.0",
+        "fs-extra": "^7.0.0",
         "moment": "^2.22.1"
-      },
-      "dependencies": {
-        "cli-ux": {
-          "version": "4.9.3",
-          "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-4.9.3.tgz",
-          "integrity": "sha512-/1owvF0SZ5Gn54cgrikJ0QskgTzeg30HGjkmjFoaHDJzAqFpuX1DBpFR8aLvsE1J5s9MgeYRENQK4BFwOag5VA==",
-          "dev": true,
-          "requires": {
-            "@oclif/errors": "^1.2.2",
-            "@oclif/linewrap": "^1.0.0",
-            "@oclif/screen": "^1.0.3",
-            "ansi-escapes": "^3.1.0",
-            "ansi-styles": "^3.2.1",
-            "cardinal": "^2.1.1",
-            "chalk": "^2.4.1",
-            "clean-stack": "^2.0.0",
-            "extract-stack": "^1.0.0",
-            "fs-extra": "^7.0.0",
-            "hyperlinker": "^1.0.0",
-            "indent-string": "^3.2.0",
-            "is-wsl": "^1.1.0",
-            "lodash": "^4.17.11",
-            "password-prompt": "^1.0.7",
-            "semver": "^5.6.0",
-            "strip-ansi": "^5.0.0",
-            "supports-color": "^5.5.0",
-            "supports-hyperlinks": "^1.0.1",
-            "treeify": "^1.1.0",
-            "tslib": "^1.9.3"
-          },
-          "dependencies": {
-            "fs-extra": {
-              "version": "7.0.1",
-              "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-              "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-              "dev": true,
-              "requires": {
-                "graceful-fs": "^4.1.2",
-                "jsonfile": "^4.0.0",
-                "universalify": "^0.1.0"
-              }
-            },
-            "tslib": {
-              "version": "1.13.0",
-              "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-              "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
-              "dev": true
-            }
-          }
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "fs-extra": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-6.0.1.tgz",
-          "integrity": "sha512-GnyIkKhhzXZUWFCaJzvyDLEEgDkPfb4/TPvJCJVuS8MWZgoSsErf++QpiAlDnKFcqhRlm+tIOcencCjyJE6ZCA==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "indent-string": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-          "integrity": "sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=",
-          "dev": true
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^4.1.0"
-          }
-        }
       }
     },
     "@oclif/plugin-help": {
@@ -2212,18 +3391,24 @@
       }
     },
     "@oclif/plugin-not-found": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@oclif/plugin-not-found/-/plugin-not-found-1.2.3.tgz",
-      "integrity": "sha512-Igbw2T4gLrb/f28Llr730FeMXBSI2PXdky2YvQfsZeQGDsyBZmC4gprJJtmrMWQcjz0B51IInRBnZYERvwfIpw==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@oclif/plugin-not-found/-/plugin-not-found-1.2.4.tgz",
+      "integrity": "sha512-G440PCuMi/OT8b71aWkR+kCWikngGtyRjOR24sPMDbpUFV4+B3r51fz1fcqeUiiEOYqUpr0Uy/sneUe1O/NfBg==",
       "dev": true,
       "requires": {
-        "@oclif/color": "^0.0.0",
-        "@oclif/command": "^1.5.3",
+        "@oclif/color": "^0.x",
+        "@oclif/command": "^1.6.0",
         "cli-ux": "^4.9.0",
         "fast-levenshtein": "^2.0.6",
         "lodash": "^4.17.13"
       },
       "dependencies": {
+        "ansi-escapes": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+          "dev": true
+        },
         "cli-ux": {
           "version": "4.9.3",
           "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-4.9.3.tgz",
@@ -2251,14 +3436,6 @@
             "supports-hyperlinks": "^1.0.1",
             "treeify": "^1.1.0",
             "tslib": "^1.9.3"
-          },
-          "dependencies": {
-            "tslib": {
-              "version": "1.13.0",
-              "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-              "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
-              "dev": true
-            }
           }
         },
         "indent-string": {
@@ -2281,6 +3458,12 @@
           "requires": {
             "ansi-regex": "^4.1.0"
           }
+        },
+        "tslib": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
+          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+          "dev": true
         }
       }
     },
@@ -2304,6 +3487,17 @@
         "yarn": "^1.21.1"
       },
       "dependencies": {
+        "@oclif/color": {
+          "version": "0.0.0",
+          "resolved": "https://registry.npmjs.org/@oclif/color/-/color-0.0.0.tgz",
+          "integrity": "sha512-KKd3W7eNwfNF061tr663oUNdt8EMnfuyf5Xv55SGWA1a0rjhWqS/32P7OeB7CbXcJUBdfVrPyR//1afaW12AWw==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "supports-color": "^5.4.0",
+            "tslib": "^1"
+          }
+        },
         "npm-run-path": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
@@ -2685,9 +3879,9 @@
       }
     },
     "@types/istanbul-lib-coverage": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz",
-      "integrity": "sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.2.tgz",
+      "integrity": "sha512-rsZg7eL+Xcxsxk2XlBt9KcG8nOp9iYdKCOikY9x2RFJCyOdNj4MKPQty0e8oZr29vVAzKXr1BmR+kZauti3o1w==",
       "dev": true
     },
     "@types/istanbul-lib-report": {
@@ -2700,9 +3894,9 @@
       }
     },
     "@types/istanbul-reports": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz",
-      "integrity": "sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
+      "integrity": "sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "*",
@@ -2710,9 +3904,9 @@
       }
     },
     "@types/jest": {
-      "version": "25.2.2",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.2.tgz",
-      "integrity": "sha512-aRctFbG8Pb7DSLzUt/fEtL3q/GKb9mretFuYhRub2J0q6NhzBYbx9HTQzHrWgBNIxYOlxGNVe6Z54cpbUt+Few==",
+      "version": "25.2.3",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz",
+      "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==",
       "dev": true,
       "requires": {
         "jest-diff": "^25.2.1",
@@ -2784,9 +3978,9 @@
       "dev": true
     },
     "@types/mime": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.1.tgz",
-      "integrity": "sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
+      "integrity": "sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q==",
       "dev": true
     },
     "@types/minimatch": {
@@ -2796,9 +3990,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "14.0.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.1.tgz",
-      "integrity": "sha512-FAYBGwC+W6F9+huFIDtn43cpy7+SzG+atzRiTfdp3inUKL2hXnd4rG8hylJLIh4+hqrQy1P17kvJByE/z825hA=="
+      "version": "14.0.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.5.tgz",
+      "integrity": "sha512-90hiq6/VqtQgX8Sp0EzeIsv3r+ellbGj4URKj5j30tLlZvRUpnAe9YbYnjl3pJM93GyXU0tghHhvXHq+5rnCKA=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -2841,15 +4035,15 @@
       "integrity": "sha512-PG5aLpW6PJOeV2fHRslP4IOMWn+G+Uq8CfnyJ+PDS8ndCbU+soO+fB3NKCKo0p/Jh2Y4aPaiQZsrOXFdzpcA6g=="
     },
     "@types/q": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
-      "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
+      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
       "dev": true
     },
     "@types/qs": {
-      "version": "6.9.2",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.2.tgz",
-      "integrity": "sha512-a9bDi4Z3zCZf4Lv1X/vwnvbbDYSNz59h3i3KdyuYYN+YrLjSeJD0dnphdULDfySvUv6Exy/O0K6wX/kQpnPQ+A==",
+      "version": "6.9.3",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.3.tgz",
+      "integrity": "sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==",
       "dev": true
     },
     "@types/range-parser": {
@@ -2859,9 +4053,9 @@
       "dev": true
     },
     "@types/serve-static": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.3.tgz",
-      "integrity": "sha512-oprSwp094zOglVrXdlo/4bAHtKTAxX6VT8FOZlBKrmyLbNvE1zxZyJ6yikMVtHIvwP45+ZQGJn+FdXGKTozq0g==",
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.4.tgz",
+      "integrity": "sha512-jTDt0o/YbpNwZbQmE/+2e+lfjJEJJR0I3OFaKQKPWkASkCoW3i6fsUnqudSMcNAfbtmADGu8f4MV4q+GqULmug==",
       "dev": true,
       "requires": {
         "@types/express-serve-static-core": "*",
@@ -2931,74 +4125,54 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "2.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.33.0.tgz",
-      "integrity": "sha512-QV6P32Btu1sCI/kTqjTNI/8OpCYyvlGjW5vD8MpTIg+HGE5S88HtT1G+880M4bXlvXj/NjsJJG0aGcVh0DdbeQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.0.2.tgz",
+      "integrity": "sha512-ER3bSS/A/pKQT/hjMGCK8UQzlL0yLjuCZ/G8CDFJFVTfl3X65fvq2lNYqOG8JPTfrPa2RULCdwfOyFjZEMNExQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "2.33.0",
+        "@typescript-eslint/experimental-utils": "3.0.2",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
+        "semver": "^7.3.2",
         "tsutils": "^3.17.1"
       },
       "dependencies": {
-        "tslib": {
-          "version": "1.13.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
           "dev": true
-        },
-        "tsutils": {
-          "version": "3.17.1",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
-          "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
         }
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "2.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.33.0.tgz",
-      "integrity": "sha512-qzPM2AuxtMrRq78LwyZa8Qn6gcY8obkIrBs1ehqmQADwkYzTE1Pb4y2W+U3rE/iFkSWcWHG2LS6MJfj6SmHApg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.0.2.tgz",
+      "integrity": "sha512-4Wc4EczvoY183SSEnKgqAfkj1eLtRgBQ04AAeG+m4RhTVyaazxc1uI8IHf0qLmu7xXe9j1nn+UoDJjbmGmuqXQ==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "2.33.0",
+        "@typescript-eslint/typescript-estree": "3.0.2",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "eslint-scope": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
-          "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.1.0",
-            "estraverse": "^4.1.1"
-          }
-        }
       }
     },
     "@typescript-eslint/parser": {
-      "version": "2.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.33.0.tgz",
-      "integrity": "sha512-AUtmwUUhJoH6yrtxZMHbRUEMsC2G6z5NSxg9KsROOGqNXasM71I8P2NihtumlWTUCRld70vqIZ6Pm4E5PAziEA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.0.2.tgz",
+      "integrity": "sha512-80Z7s83e8QXHNUspqVlWwb4t5gdz/1bBBmafElbK1wwAwiD/yvJsFyHRxlEpNrt4rdK6eB3p+2WEFkEDHAKk9w==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "2.33.0",
-        "@typescript-eslint/typescript-estree": "2.33.0",
+        "@typescript-eslint/experimental-utils": "3.0.2",
+        "@typescript-eslint/typescript-estree": "3.0.2",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "2.33.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.33.0.tgz",
-      "integrity": "sha512-d8rY6/yUxb0+mEwTShCQF2zYQdLlqihukNfG9IUlLYz5y1CH6G/9XYbrxQLq3Z14RNvkCC6oe+OcFlyUpwUbkg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.0.2.tgz",
+      "integrity": "sha512-cs84mxgC9zQ6viV8MEcigfIKQmKtBkZNDYf8Gru2M+MhnA6z9q0NFMZm2IEzKqAwN8lY5mFVd1Z8DiHj6zQ3Tw==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -3015,21 +4189,6 @@
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
           "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
           "dev": true
-        },
-        "tslib": {
-          "version": "1.13.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-          "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
-          "dev": true
-        },
-        "tsutils": {
-          "version": "3.17.1",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
-          "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
-          "dev": true,
-          "requires": {
-            "tslib": "^1.8.1"
-          }
         }
       }
     },
@@ -3054,25 +4213,26 @@
       }
     },
     "@vue/babel-preset-app": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.3.1.tgz",
-      "integrity": "sha512-iNkySkbRWXGUA+Cvzj+/gEP0Y0uVAwwzfn21S7hkggSeIg9LJyZ+QzdxgKO0wgi01yTdb2mYWgeLQAfHZ65aew==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.4.1.tgz",
+      "integrity": "sha512-VHVROEBBiW0dnuNuzlFElkncXo+zxh5Px0MZ51Th5da8UPbQodf43mnpotMnFtmCPTXAFL58tzDttu1FgrgfpQ==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.9.0",
-        "@babel/helper-compilation-targets": "^7.8.7",
+        "@babel/core": "^7.9.6",
+        "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
         "@babel/plugin-proposal-decorators": "^7.8.3",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-jsx": "^7.8.3",
-        "@babel/plugin-transform-runtime": "^7.9.0",
-        "@babel/preset-env": "^7.9.0",
-        "@babel/runtime": "^7.9.2",
+        "@babel/plugin-transform-runtime": "^7.9.6",
+        "@babel/preset-env": "^7.9.6",
+        "@babel/runtime": "^7.9.6",
         "@vue/babel-preset-jsx": "^1.1.2",
-        "babel-plugin-dynamic-import-node": "^2.3.0",
-        "core-js": "^3.6.4",
-        "core-js-compat": "^3.6.4"
+        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.6.5",
+        "core-js-compat": "^3.6.5",
+        "semver": "^6.1.0"
       }
     },
     "@vue/babel-preset-jsx": {
@@ -3149,15 +4309,15 @@
       }
     },
     "@vue/cli": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli/-/cli-4.3.1.tgz",
-      "integrity": "sha512-K4oxL3/RLKrS53r9hr7mvtDDURCnuiMIaoOPa65TU8kVmEXohdebMAKUmHebk/yENPtBIdpQ9YankV/TWjRMhQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli/-/cli-4.4.1.tgz",
+      "integrity": "sha512-X9K0EZFipqnckuzaUa2MzCtxPzazy4CwCJN0OTeXwc6I3q8f0M3H/5BuJM7cGPBn9CHDQTsiR1x7b2t3IKw7Vg==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.3.1",
-        "@vue/cli-ui": "^4.3.1",
-        "@vue/cli-ui-addon-webpack": "^4.3.1",
-        "@vue/cli-ui-addon-widgets": "^4.3.1",
+        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/cli-ui": "^4.4.1",
+        "@vue/cli-ui-addon-webpack": "^4.4.1",
+        "@vue/cli-ui-addon-widgets": "^4.4.1",
         "boxen": "^4.1.0",
         "cmd-shim": "^3.0.3",
         "commander": "^2.20.0",
@@ -3165,26 +4325,26 @@
         "deepmerge": "^4.2.2",
         "download-git-repo": "^3.0.2",
         "ejs": "^2.7.1",
-        "envinfo": "^7.5.0",
+        "envinfo": "^7.5.1",
         "fs-extra": "^7.0.1",
         "globby": "^9.2.0",
         "import-global": "^0.1.0",
         "inquirer": "^7.1.0",
-        "isbinaryfile": "^4.0.5",
+        "isbinaryfile": "^4.0.6",
         "javascript-stringify": "^1.6.0",
         "js-yaml": "^3.13.1",
-        "jscodeshift": "^0.7.0",
+        "jscodeshift": "^0.9.0",
         "leven": "^3.1.0",
         "lodash.clonedeep": "^4.5.0",
         "lru-cache": "^5.1.1",
         "minimist": "^1.2.5",
         "recast": "^0.18.8",
-        "resolve": "^1.15.1",
+        "resolve": "^1.17.0",
         "shortid": "^2.2.15",
         "slash": "^3.0.0",
         "validate-npm-package-name": "^3.0.0",
         "vue": "^2.6.11",
-        "vue-jscodeshift-adapter": "^2.0.2",
+        "vue-jscodeshift-adapter": "^2.1.0",
         "yaml-front-matter": "^3.4.1"
       },
       "dependencies": {
@@ -3200,20 +4360,20 @@
       }
     },
     "@vue/cli-overlay": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.3.1.tgz",
-      "integrity": "sha512-UA399aWHhre2VHrQFQSJhFLrFMqOYQ8ly+Ni6T+cpCjOwssjiaqaqrG5YiZBAqDwQvjrtYori4lU66qrY5DVhA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.4.1.tgz",
+      "integrity": "sha512-EQqAVy7O/qqGOfSYIGL073FWlr/s6QFA0wA1wY8pHnTS5WPwAiHT+D+xe+fgXKZ3KeL7v7u/le7YFIEVXFVXOg==",
       "dev": true
     },
     "@vue/cli-plugin-babel": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.3.1.tgz",
-      "integrity": "sha512-tBqu0v1l4LfWX8xuJmofpp+8xQzKddFNxdLmeVDOX/omDBQX0qaVDeMUtRxxSTazI06SKr605SnUQoa35qwbvw==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.4.1.tgz",
+      "integrity": "sha512-dmhymfm2UnZDw13k/zKT6YIj7je53mE37Y+jEJxpRUlCKFmZUDuYkJ8i5HmO0SnaCnEGqNELaBkoIFnY3aE2Gw==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.9.0",
-        "@vue/babel-preset-app": "^4.3.1",
-        "@vue/cli-shared-utils": "^4.3.1",
+        "@babel/core": "^7.9.6",
+        "@vue/babel-preset-app": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.1",
         "babel-loader": "^8.1.0",
         "cache-loader": "^4.1.0",
         "thread-loader": "^2.1.3",
@@ -3221,23 +4381,23 @@
       }
     },
     "@vue/cli-plugin-e2e-nightwatch": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-nightwatch/-/cli-plugin-e2e-nightwatch-4.3.1.tgz",
-      "integrity": "sha512-5g46AV2z+8etx89O+FQLQuKkuEx75e9Y5v49iQgnbMMuDYT4bizilk4RyO/R3Tq/ePUHfyq10b0trROmG40JvQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-nightwatch/-/cli-plugin-e2e-nightwatch-4.4.1.tgz",
+      "integrity": "sha512-6874oYjUVmaoeQPlyNf2IqeG/7hX0hbjvJg+cn1wKn//e8rQu5f2G3rNOAor5N9E8xUsXcKSj5fH7LqrHXgZGg==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.3.1",
+        "@vue/cli-shared-utils": "^4.4.1",
         "deepmerge": "^4.2.2",
-        "nightwatch": "^1.3.4"
+        "nightwatch": "^1.3.5"
       }
     },
     "@vue/cli-plugin-eslint": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.3.1.tgz",
-      "integrity": "sha512-5UEP93b8C/JQs9Rnuldsu8jMz0XO4wNXG0lL/GdChYBEheKCyXJXzan7qzEbIuvUwG3I+qlUkGsiyNokIgXejg==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.4.1.tgz",
+      "integrity": "sha512-T+9+q44iajQEbe59z6Io3otFOsWnPOEVU+/hrDyC6aOToJbQo6P4VacByDDcuGYENAjAd8ENLSt18TaPNSIyRw==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.3.1",
+        "@vue/cli-shared-utils": "^4.4.1",
         "eslint-loader": "^2.2.1",
         "globby": "^9.2.0",
         "inquirer": "^7.1.0",
@@ -3246,113 +4406,22 @@
       }
     },
     "@vue/cli-plugin-router": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.3.1.tgz",
-      "integrity": "sha512-m0ntr5R6q62oNMODgoyHAVAd/sDtsH15GdBrScZsPNeyHxmzmNBDlsNM38yYGGY064zDRRWif15d1yaTREybrA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.4.1.tgz",
+      "integrity": "sha512-kCSsJG7pjDvCJDjGtcCI5l0UjmqwNigOR41RkeGSjSUvzV4ArSniXjFqrOmtpMp36S5xCtwtt9MFm/K4fCubkQ==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.3.1"
-      },
-      "dependencies": {
-        "@vue/cli-shared-utils": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
-          "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
-          "dev": true,
-          "requires": {
-            "@hapi/joi": "^15.0.1",
-            "chalk": "^2.4.2",
-            "execa": "^1.0.0",
-            "launch-editor": "^2.2.1",
-            "lru-cache": "^5.1.1",
-            "node-ipc": "^9.1.1",
-            "open": "^6.3.0",
-            "ora": "^3.4.0",
-            "read-pkg": "^5.1.1",
-            "request": "^2.88.2",
-            "request-promise-native": "^1.0.8",
-            "semver": "^6.1.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
-        "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-          "dev": true,
-          "requires": {
-            "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          }
-        },
-        "request": {
-          "version": "2.88.2",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-          "dev": true,
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.3",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.5.0",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-          }
-        },
-        "tough-cookie": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        },
-        "type-fest": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-          "dev": true
-        }
+        "@vue/cli-shared-utils": "^4.4.1"
       }
     },
     "@vue/cli-plugin-typescript": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.3.1.tgz",
-      "integrity": "sha512-Uos7MTqG0btNMMhZdgLTPx24fqiiHhqz0Bow2rTeNa0piDeSjiQdyq0vgVKqJOLUu8zkvmG2jKUr15QQ0+yobQ==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.4.1.tgz",
+      "integrity": "sha512-WfgaT5N/eUlGXWsucl8vPskB3QYZFw77P1e/0TEwekVsz8yyT5/MEnZaQSH9emufcAagjpWHHL3fNQdIVg70eQ==",
       "dev": true,
       "requires": {
-        "@types/webpack-env": "^1.15.1",
-        "@vue/cli-shared-utils": "^4.3.1",
+        "@types/webpack-env": "^1.15.2",
+        "@vue/cli-shared-utils": "^4.4.1",
         "cache-loader": "^4.1.0",
         "fork-ts-checker-webpack-plugin": "^3.1.1",
         "globby": "^9.2.0",
@@ -3361,109 +4430,18 @@
         "tslint": "^5.20.1",
         "webpack": "^4.0.0",
         "yorkie": "^2.0.0"
-      },
-      "dependencies": {
-        "@vue/cli-shared-utils": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
-          "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
-          "dev": true,
-          "requires": {
-            "@hapi/joi": "^15.0.1",
-            "chalk": "^2.4.2",
-            "execa": "^1.0.0",
-            "launch-editor": "^2.2.1",
-            "lru-cache": "^5.1.1",
-            "node-ipc": "^9.1.1",
-            "open": "^6.3.0",
-            "ora": "^3.4.0",
-            "read-pkg": "^5.1.1",
-            "request": "^2.88.2",
-            "request-promise-native": "^1.0.8",
-            "semver": "^6.1.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
-        "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-          "dev": true,
-          "requires": {
-            "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          }
-        },
-        "request": {
-          "version": "2.88.2",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-          "dev": true,
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.3",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.5.0",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-          }
-        },
-        "tough-cookie": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        },
-        "type-fest": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-          "dev": true
-        }
       }
     },
     "@vue/cli-plugin-unit-jest": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.3.1.tgz",
-      "integrity": "sha512-mhIqwW6UGsPEOlw+rHBQjhlCjSxD9fKuVVVtkl989/bFZA17ZsdDrj/BfMTwX8mvoY5x6pPXb+Ti/opkkAOD7w==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.4.1.tgz",
+      "integrity": "sha512-t9MjdDRBeHe/qlUJka+YtxLZjyvaMImZ5hhEWMGSId2JUS7gfDXa4SxJvUYFsO0aqlgihn5BiaGKklGtbgVp0A==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-transform-modules-commonjs": "^7.9.0",
+        "@babel/core": "^7.9.6",
+        "@babel/plugin-transform-modules-commonjs": "^7.9.6",
         "@types/jest": "^24.0.19",
-        "@vue/cli-shared-utils": "^4.3.1",
+        "@vue/cli-shared-utils": "^4.4.1",
         "babel-core": "^7.0.0-bridge.0",
         "babel-jest": "^24.9.0",
         "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
@@ -3498,9 +4476,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -3578,39 +4556,39 @@
       }
     },
     "@vue/cli-plugin-vuex": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.3.1.tgz",
-      "integrity": "sha512-mukwOlhZGBJhkqO2b3wHFFHjK5aP00b1WUHdrOfLR7M18euhaTyb4kA5nwZwEOmU3EzZx6kHzSFCRy/XaMkLug==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.4.1.tgz",
+      "integrity": "sha512-FtOFsDP0qznwVaCz0BZmTzUm5vhHSJzX2/XD3L5dLTkrNxyDEbZmbKoX0n1OzBcQwZC7dkJZP2tdoCQx0mX//g==",
       "dev": true
     },
     "@vue/cli-service": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.3.1.tgz",
-      "integrity": "sha512-CsNGfHe+9oKZdRwJmweQ0KsMYM27ssg1eNQqRKL/t+IgDLO3Tu86uaOOCLn4ZAaU5oxxpq4aSFvz+A0YxQRSWw==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.4.1.tgz",
+      "integrity": "sha512-DVV0zr5Sw7pzdm3z3PRrfqihLgoJP/d9AgNFcSSQF/J9Gtvjf1t0PTJJFeLANHSL3kDWte+3kjc22sXayu0BJQ==",
       "dev": true,
       "requires": {
         "@intervolga/optimize-cssnano-plugin": "^1.0.5",
         "@soda/friendly-errors-webpack-plugin": "^1.7.1",
         "@soda/get-current-script": "^1.0.0",
-        "@vue/cli-overlay": "^4.3.1",
-        "@vue/cli-plugin-router": "^4.3.1",
-        "@vue/cli-plugin-vuex": "^4.3.1",
-        "@vue/cli-shared-utils": "^4.3.1",
-        "@vue/component-compiler-utils": "^3.0.2",
+        "@vue/cli-overlay": "^4.4.1",
+        "@vue/cli-plugin-router": "^4.4.1",
+        "@vue/cli-plugin-vuex": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/component-compiler-utils": "^3.1.2",
         "@vue/preload-webpack-plugin": "^1.1.0",
         "@vue/web-component-wrapper": "^1.2.0",
-        "acorn": "^7.1.0",
+        "acorn": "^7.2.0",
         "acorn-walk": "^7.1.1",
         "address": "^1.1.2",
-        "autoprefixer": "^9.7.5",
-        "browserslist": "^4.11.1",
+        "autoprefixer": "^9.8.0",
+        "browserslist": "^4.12.0",
         "cache-loader": "^4.1.0",
         "case-sensitive-paths-webpack-plugin": "^2.3.0",
         "cli-highlight": "^2.1.4",
         "clipboardy": "^2.3.0",
         "cliui": "^6.0.0",
         "copy-webpack-plugin": "^5.1.1",
-        "css-loader": "^3.4.2",
+        "css-loader": "^3.5.3",
         "cssnano": "^4.1.10",
         "debug": "^4.1.1",
         "default-gateway": "^5.0.5",
@@ -3628,46 +4606,25 @@
         "mini-css-extract-plugin": "^0.9.0",
         "minimist": "^1.2.5",
         "pnp-webpack-plugin": "^1.6.4",
-        "portfinder": "^1.0.25",
+        "portfinder": "^1.0.26",
         "postcss-loader": "^3.0.0",
         "ssri": "^7.1.0",
-        "terser-webpack-plugin": "^2.3.5",
+        "terser-webpack-plugin": "^2.3.6",
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
-        "vue-loader": "^15.9.1",
+        "vue-loader": "^15.9.2",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
-        "webpack-bundle-analyzer": "^3.6.1",
+        "webpack-bundle-analyzer": "^3.8.0",
         "webpack-chain": "^6.4.0",
-        "webpack-dev-server": "^3.10.3",
+        "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
       },
       "dependencies": {
-        "@vue/cli-shared-utils": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
-          "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
-          "dev": true,
-          "requires": {
-            "@hapi/joi": "^15.0.1",
-            "chalk": "^2.4.2",
-            "execa": "^1.0.0",
-            "launch-editor": "^2.2.1",
-            "lru-cache": "^5.1.1",
-            "node-ipc": "^9.1.1",
-            "open": "^6.3.0",
-            "ora": "^3.4.0",
-            "read-pkg": "^5.1.1",
-            "request": "^2.88.2",
-            "request-promise-native": "^1.0.8",
-            "semver": "^6.1.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
         "acorn": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
+          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
           "dev": true
         },
         "acorn-walk": {
@@ -3698,18 +4655,6 @@
             "color-convert": "^2.0.1"
           }
         },
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -3736,12 +4681,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "caniuse-lite": {
-          "version": "1.0.30001054",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
-          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
-          "dev": true
-        },
         "cliui": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -3768,12 +4707,6 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
-        "electron-to-chromium": {
-          "version": "1.3.432",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
-          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
-          "dev": true
-        },
         "emoji-regex": {
           "version": "8.0.0",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -3847,12 +4780,6 @@
             "semver": "^6.0.0"
           }
         },
-        "node-releases": {
-          "version": "1.1.55",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
-          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
-          "dev": true
-        },
         "p-limit": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -3880,18 +4807,6 @@
             "aggregate-error": "^3.0.0"
           }
         },
-        "parse-json": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
         "path-exists": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3907,46 +4822,6 @@
             "find-up": "^4.0.0"
           }
         },
-        "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-          "dev": true,
-          "requires": {
-            "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          }
-        },
-        "request": {
-          "version": "2.88.2",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-          "dev": true,
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.3",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.5.0",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-          }
-        },
         "schema-utils": {
           "version": "2.6.6",
           "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
@@ -3958,10 +4833,13 @@
           }
         },
         "serialize-javascript": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.0.0.tgz",
-          "integrity": "sha512-skZcHYw2vEX4bw90nAr2iTTsz6x2SrHEnfxgKYmZlvJYBEZrvbKtobJWlQ20zczKb3bsHHXXTYt48zBA7ni9cw==",
-          "dev": true
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+          "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
         },
         "source-map": {
           "version": "0.6.1",
@@ -4016,22 +4894,6 @@
             "webpack-sources": "^1.4.3"
           }
         },
-        "tough-cookie": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        },
-        "type-fest": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-          "dev": true
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -4046,9 +4908,9 @@
       }
     },
     "@vue/cli-shared-utils": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.3.1.tgz",
-      "integrity": "sha512-lcfRalou7Z9jZgIh9PeTIpwDK7RIjr9OxfLGwbdR8czUZYUeUa67zVEMJD0OPYh/CCoREtzNbVfLPb/IYYxWEA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.4.1.tgz",
+      "integrity": "sha512-teevHgI7XUsKVMOncx3M+6iLjO28woGfRwgUG4hR83moVBHQe5x2OCr2i5t/58bwpv269RD5RYXBQCGtIXuxZw==",
       "dev": true,
       "requires": {
         "@hapi/joi": "^15.0.1",
@@ -4107,14 +4969,14 @@
       }
     },
     "@vue/cli-ui": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui/-/cli-ui-4.3.1.tgz",
-      "integrity": "sha512-fHsVO62rCCmIFnufDzy9JeQXZ6ylyNFpGrjP4UJ8vkWTDLrmKRgS7LHLn5DAIhr1e1/34GsXBntqwIWneJW8mg==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui/-/cli-ui-4.4.1.tgz",
+      "integrity": "sha512-UPDvDdYvuacUuq39OQ/WfLsuIrzIJMdL2bkMecpcegDRPi6MEgkInXqSOMEl5v72FX8qStwXYCUSxifoYIIZ/g==",
       "dev": true,
       "requires": {
         "@akryum/winattr": "^3.0.0",
-        "@vue/cli-shared-utils": "^4.3.1",
-        "apollo-server-express": "^2.11.0",
+        "@vue/cli-shared-utils": "^4.4.1",
+        "apollo-server-express": "^2.13.1",
         "clone": "^2.1.1",
         "deepmerge": "^4.2.2",
         "express": "^4.17.1",
@@ -4134,11 +4996,11 @@
         "node-ipc": "^9.1.1",
         "node-notifier": "^6.0.0",
         "parse-git-config": "^2.0.2",
-        "portfinder": "^1.0.25",
-        "prismjs": "^1.19.0",
-        "rss-parser": "^3.7.6",
+        "portfinder": "^1.0.26",
+        "prismjs": "^1.20.0",
+        "rss-parser": "^3.8.0",
         "shortid": "^2.2.15",
-        "typescript": "~3.8.3",
+        "typescript": "~3.9.3",
         "vue-cli-plugin-apollo": "^0.21.3",
         "watch": "^1.0.2"
       },
@@ -4148,25 +5010,19 @@
           "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
           "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
           "dev": true
-        },
-        "typescript": {
-          "version": "3.8.3",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
-          "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
-          "dev": true
         }
       }
     },
     "@vue/cli-ui-addon-webpack": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-webpack/-/cli-ui-addon-webpack-4.3.1.tgz",
-      "integrity": "sha512-Mrm4q5xxRmCos+nvRiZOwWvCnq6gWa2vsYVvb3mSA+hZhtRbLMASYsSAdsXTBySiaBQxvbKHLlnu3XV0bLlD3A==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-webpack/-/cli-ui-addon-webpack-4.4.1.tgz",
+      "integrity": "sha512-UJrv7bCSEJIq+nG3xKSOMjkUnQBbUr+vwk6PjBPsMcjOdbra7p8sQfDIXeRSviCgoDVcnODJDMyD0tqg6OI/sA==",
       "dev": true
     },
     "@vue/cli-ui-addon-widgets": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-widgets/-/cli-ui-addon-widgets-4.3.1.tgz",
-      "integrity": "sha512-0j6rUukhGGSRddSG5Ijol1uhTlDPx1/nU9gYeH1DKqoX9wR4Zfziqxfm2AulLNTbdFWZn4W0K0QaA2WZfkyRzw==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-widgets/-/cli-ui-addon-widgets-4.4.1.tgz",
+      "integrity": "sha512-VaAnCI1X2SEllLNf1TXNz0BARfdb+COMUMzc17PMb5xmdqDswPvVKG5pnFurKODWFgI7zcbk4kBnrYojdLnhNg==",
       "dev": true
     },
     "@vue/component-compiler-utils": {
@@ -4244,9 +5100,9 @@
       "dev": true
     },
     "@vue/test-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.2.tgz",
-      "integrity": "sha512-pnRWJbb0cLqjSJIKRpqoSISeYtufEn8D16VmhlCrDWIVt4iAY4Og4JpOPmFytvtQVz96p6n7T6ERI55ue6n0Ew==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.0.3.tgz",
+      "integrity": "sha512-mmsKXZSGfvd0bH05l4SNuczZ2MqlJH2DWhiul5wJXFxbf/gRRd2UL4QZgozEMQ30mRi9i4/+p4JJat8S4Js64Q==",
       "dev": true,
       "requires": {
         "dom-event-types": "^1.0.0",
@@ -4505,9 +5361,9 @@
       }
     },
     "acorn": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
-      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
+      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
     "acorn-globals": {
@@ -4518,14 +5374,6 @@
       "requires": {
         "acorn": "^6.0.1",
         "acorn-walk": "^6.0.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
-          "dev": true
-        }
       }
     },
     "acorn-jsx": {
@@ -4617,10 +5465,21 @@
       "dev": true
     },
     "ansi-escapes": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-      "dev": true
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+      "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
+      "dev": true,
+      "requires": {
+        "type-fest": "^0.11.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
+          "dev": true
+        }
+      }
     },
     "ansi-html": {
       "version": "0.0.7",
@@ -4682,30 +5541,30 @@
       }
     },
     "apollo": {
-      "version": "2.27.4",
-      "resolved": "https://registry.npmjs.org/apollo/-/apollo-2.27.4.tgz",
-      "integrity": "sha512-cLSN3Kc32O/zAtSwZ71SspE5RUQ3pcaSpQTgA5K1m9KUzhwPbDAkUppMMjNr0vk1dx9X8ZHSe0w5NK43kuiqcw==",
+      "version": "2.28.0",
+      "resolved": "https://registry.npmjs.org/apollo/-/apollo-2.28.0.tgz",
+      "integrity": "sha512-dtgkWQi+x36mUFKq3HSSANrVMycyrpeGR/cJsisogzAkJvqFS7Pk2CWCNlrOV9HU/UmHBi0ecBLC5xOI7izBUw==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.8",
-        "@oclif/command": "1.6.0",
+        "@oclif/command": "1.6.1",
         "@oclif/config": "1.15.1",
         "@oclif/errors": "1.2.2",
-        "@oclif/plugin-autocomplete": "0.1.5",
+        "@oclif/plugin-autocomplete": "0.2.0",
         "@oclif/plugin-help": "2.2.3",
-        "@oclif/plugin-not-found": "1.2.3",
+        "@oclif/plugin-not-found": "1.2.4",
         "@oclif/plugin-plugins": "1.7.9",
         "@oclif/plugin-warn-if-update-available": "1.7.0",
-        "apollo-codegen-core": "^0.36.9",
-        "apollo-codegen-flow": "^0.34.9",
-        "apollo-codegen-scala": "^0.35.9",
-        "apollo-codegen-swift": "^0.36.9",
-        "apollo-codegen-typescript": "^0.36.9",
+        "apollo-codegen-core": "^0.37.0",
+        "apollo-codegen-flow": "^0.35.0",
+        "apollo-codegen-scala": "^0.36.0",
+        "apollo-codegen-swift": "^0.37.0",
+        "apollo-codegen-typescript": "^0.37.0",
         "apollo-env": "^0.6.5",
         "apollo-graphql": "^0.4.4",
-        "apollo-language-server": "^1.21.4",
+        "apollo-language-server": "^1.22.0",
         "chalk": "2.4.2",
-        "cli-ux": "5.4.5",
+        "cli-ux": "5.4.6",
         "env-ci": "3.2.2",
         "gaze": "1.1.3",
         "git-parse": "1.0.4",
@@ -4717,7 +5576,7 @@
         "lodash.identity": "3.0.0",
         "lodash.pickby": "4.6.0",
         "mkdirp": "0.5.5",
-        "moment": "2.24.0",
+        "moment": "2.25.3",
         "strip-ansi": "5.2.0",
         "table": "5.4.6",
         "tty": "1.0.1",
@@ -4750,12 +5609,12 @@
       }
     },
     "apollo-cache": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.4.tgz",
-      "integrity": "sha512-7X5aGbqaOWYG+SSkCzJNHTz2ZKDcyRwtmvW4mGVLRqdQs+HxfXS4dUS2CcwrAj449se6tZ6NLUMnjko4KMt3KA==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.5.tgz",
+      "integrity": "sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==",
       "dev": true,
       "requires": {
-        "apollo-utilities": "^1.3.3",
+        "apollo-utilities": "^1.3.4",
         "tslib": "^1.10.0"
       },
       "dependencies": {
@@ -4768,23 +5627,23 @@
       }
     },
     "apollo-cache-control": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/apollo-cache-control/-/apollo-cache-control-0.10.0.tgz",
-      "integrity": "sha512-UIcPlrPdRTOKrF7kc5/WD5i6EVkGEEqgOK/fMj92fnnxR1KnQDiN82lqaxu02eZJvWjFJjik0JVJNXKOJXVrpQ==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/apollo-cache-control/-/apollo-cache-control-0.11.0.tgz",
+      "integrity": "sha512-dmRnQ9AXGw2SHahVGLzB/p4UW/taFBAJxifxubp8hqY5p9qdlSu4MPRq8zvV2ULMYf50rBtZyC4C+dZLqmHuHQ==",
       "dev": true,
       "requires": {
-        "apollo-server-env": "^2.4.3",
-        "graphql-extensions": "^0.12.0"
+        "apollo-server-env": "^2.4.4",
+        "apollo-server-plugin-base": "^0.9.0"
       }
     },
     "apollo-cache-inmemory": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.5.tgz",
-      "integrity": "sha512-koB76JUDJaycfejHmrXBbWIN9pRKM0Z9CJGQcBzIOtmte1JhEBSuzsOUu7NQgiXKYI4iGoMREcnaWffsosZynA==",
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz",
+      "integrity": "sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==",
       "dev": true,
       "requires": {
-        "apollo-cache": "^1.3.4",
-        "apollo-utilities": "^1.3.3",
+        "apollo-cache": "^1.3.5",
+        "apollo-utilities": "^1.3.4",
         "optimism": "^0.10.0",
         "ts-invariant": "^0.4.0",
         "tslib": "^1.10.0"
@@ -4799,15 +5658,15 @@
       }
     },
     "apollo-client": {
-      "version": "2.6.8",
-      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.8.tgz",
-      "integrity": "sha512-0zvJtAcONiozpa5z5zgou83iEKkBaXhhSSXJebFHRXs100SecDojyUWKjwTtBPn9HbM6o5xrvC5mo9VQ5fgAjw==",
+      "version": "2.6.10",
+      "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.10.tgz",
+      "integrity": "sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==",
       "dev": true,
       "requires": {
         "@types/zen-observable": "^0.8.0",
-        "apollo-cache": "1.3.4",
+        "apollo-cache": "1.3.5",
         "apollo-link": "^1.0.0",
-        "apollo-utilities": "1.3.3",
+        "apollo-utilities": "1.3.4",
         "symbol-observable": "^1.0.2",
         "ts-invariant": "^0.4.0",
         "tslib": "^1.10.0",
@@ -4823,16 +5682,16 @@
       }
     },
     "apollo-codegen-core": {
-      "version": "0.36.9",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-core/-/apollo-codegen-core-0.36.9.tgz",
-      "integrity": "sha512-gP+sNPM/vQLVjG/YacI8FPBqPTYTAgwJ8Qld0aQ0dj4icFlDFywtm95GtVXzOjiv8vJ0myepsO/Mvqiu4PeGkQ==",
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-core/-/apollo-codegen-core-0.37.0.tgz",
+      "integrity": "sha512-9+DXf/Gl+xtkRpkhVyY6l8zPxzp7B8rD4wcw8H+5X3E/3jJcsrbM32b2rP09L48ZYIJ2a8YDmD903vtIGeUtvw==",
       "dev": true,
       "requires": {
         "@babel/generator": "7.9.6",
         "@babel/parser": "^7.1.3",
         "@babel/types": "7.9.6",
         "apollo-env": "^0.6.5",
-        "apollo-language-server": "^1.21.4",
+        "apollo-language-server": "^1.22.0",
         "ast-types": "^0.13.0",
         "common-tags": "^1.5.1",
         "recast": "^0.19.0"
@@ -4859,87 +5718,96 @@
       }
     },
     "apollo-codegen-flow": {
-      "version": "0.34.9",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-flow/-/apollo-codegen-flow-0.34.9.tgz",
-      "integrity": "sha512-FSIUEkWf7XO/JUxR0F2QFKNY7vCxEnYcazBbp6pGSqueDqWsaitw+0zvvmMFQQ6qRZ7J/yBkh8GwJ9Vg5JvOyA==",
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-flow/-/apollo-codegen-flow-0.35.0.tgz",
+      "integrity": "sha512-nMyV2ebsBbqPh4L0Xfrdw3+ndpSZMixt1o2RIW5EGn4sH77ZQsHCKdjBEEodtM5cucVjIhj/E03H9wioQILsXw==",
       "dev": true,
       "requires": {
         "@babel/generator": "7.9.6",
         "@babel/types": "7.9.6",
-        "apollo-codegen-core": "^0.36.9",
+        "apollo-codegen-core": "^0.37.0",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-scala": {
-      "version": "0.35.9",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-scala/-/apollo-codegen-scala-0.35.9.tgz",
-      "integrity": "sha512-sRyzWtnRAaG5d6laxu4Nie4XqM/CmldPpkNm2plY/oYkeEh8FLTaSJQsM/ODQqM9U7zTfj7T9xRgT7t5p6dzeQ==",
+      "version": "0.36.0",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-scala/-/apollo-codegen-scala-0.36.0.tgz",
+      "integrity": "sha512-HwKXQwpGblLKUFyZb5B3Culym+Uo9yE3oFoHzMVClIG4iwxqkrwwctfXyc4aLEVmVXT9wDPAiX8xKo8TQiTnng==",
       "dev": true,
       "requires": {
-        "apollo-codegen-core": "^0.36.9",
+        "apollo-codegen-core": "^0.37.0",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-swift": {
-      "version": "0.36.9",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-swift/-/apollo-codegen-swift-0.36.9.tgz",
-      "integrity": "sha512-k0PLh5w41FEsiSupmbOiXhsy7+7aCH1ZvvMt/nnoLtTehYNkdl66ENvDEbFVMo25AJdCZLZ3PKwhac41lLCxzA==",
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-swift/-/apollo-codegen-swift-0.37.0.tgz",
+      "integrity": "sha512-jaYHiDoQQNGyEF1tHlUk+sjRAX8yBF5hrG4T9GE1OMEwQ8Q57FQx+N1GvkCxNIQlYFbfJFsAzhTjwfp1bPxGnA==",
       "dev": true,
       "requires": {
-        "apollo-codegen-core": "^0.36.9",
+        "apollo-codegen-core": "^0.37.0",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-typescript": {
-      "version": "0.36.9",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-typescript/-/apollo-codegen-typescript-0.36.9.tgz",
-      "integrity": "sha512-H89IfRQgM1Nvrfujn+cPowpoWizQwlHHCczrcv31gB1Lpnp2XFdnW3hOoS5m5DC380Wawe1s9MaGXvxlgQwmgA==",
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-typescript/-/apollo-codegen-typescript-0.37.0.tgz",
+      "integrity": "sha512-gsxjUZ0U7IKnPnSy26PHaDboloClBYM8oMFYDppCHDA9iosmcnyFEgbznxdtbQncflUROJnCjYuSGgV/Ej9ziA==",
       "dev": true,
       "requires": {
         "@babel/generator": "7.9.6",
         "@babel/types": "7.9.6",
-        "apollo-codegen-core": "^0.36.9",
+        "apollo-codegen-core": "^0.37.0",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-datasource": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/apollo-datasource/-/apollo-datasource-0.7.0.tgz",
-      "integrity": "sha512-Yja12BgNQhzuFGG/5Nw2MQe0hkuQy2+9er09HxeEyAf2rUDIPnhPrn1MDoZTB8MU7UGfjwITC+1ofzKkkrZobA==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/apollo-datasource/-/apollo-datasource-0.7.1.tgz",
+      "integrity": "sha512-h++/jQAY7GA+4TBM+7ezvctFmmGNLrAPf51KsagZj+NkT9qvxp585rdsuatynVbSl59toPK2EuVmc6ilmQHf+g==",
       "dev": true,
       "requires": {
         "apollo-server-caching": "^0.5.1",
-        "apollo-server-env": "^2.4.3"
+        "apollo-server-env": "^2.4.4"
       }
     },
     "apollo-engine-reporting": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-1.8.0.tgz",
-      "integrity": "sha512-VPVpIGW6lbYXga6sqq/fG8ZaPR70bFuxvCov6X0npuVQPXwgZrzBp50cHx9uIaBVxDDxD3leeznsQbmF37RAww==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-2.0.0.tgz",
+      "integrity": "sha512-FvNwORsh3nxEfvQqd2xbd468a0q/R3kYar/Bk6YQdBX5qwqUhqmOcOSxLFk8Zb77HpwHij5CPpPWJb53TU1zcA==",
       "dev": true,
       "requires": {
-        "apollo-engine-reporting-protobuf": "^0.5.0",
+        "apollo-engine-reporting-protobuf": "^0.5.1",
         "apollo-graphql": "^0.4.0",
         "apollo-server-caching": "^0.5.1",
-        "apollo-server-env": "^2.4.3",
+        "apollo-server-env": "^2.4.4",
         "apollo-server-errors": "^2.4.1",
-        "apollo-server-types": "^0.4.0",
+        "apollo-server-plugin-base": "^0.9.0",
+        "apollo-server-types": "^0.5.0",
         "async-retry": "^1.2.1",
-        "graphql-extensions": "^0.12.0"
+        "uuid": "^8.0.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.1.0.tgz",
+          "integrity": "sha512-CI18flHDznR0lq54xBycOVmphdCYnQLKn8abKn7PXUiKUGdEd+/l9LWNJmugXel4hXq7S+RMNl34ecyC9TntWg==",
+          "dev": true
+        }
       }
     },
     "apollo-engine-reporting-protobuf": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/apollo-engine-reporting-protobuf/-/apollo-engine-reporting-protobuf-0.5.0.tgz",
-      "integrity": "sha512-OgMwtLcuL+YAaO2xgkPbnRJnISLDSNE5F11p7oq+1ws+ws71CPfHAthDCxSObCPSALdhsLAGD0v3u3soBuNmMg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/apollo-engine-reporting-protobuf/-/apollo-engine-reporting-protobuf-0.5.1.tgz",
+      "integrity": "sha512-TSfr9iAaInV8dhXkesdcmqsthRkVcJkzznmiM+1Ob/GScK7r6hBYCjVDt2613EHAg9SUzTOltIKlGD+N+GJRUw==",
       "dev": true,
       "requires": {
         "@apollo/protobufjs": "^1.0.3"
@@ -4968,12 +5836,12 @@
       }
     },
     "apollo-language-server": {
-      "version": "1.21.4",
-      "resolved": "https://registry.npmjs.org/apollo-language-server/-/apollo-language-server-1.21.4.tgz",
-      "integrity": "sha512-U4E3llrJs7M3CPzdQPU/VMii9zsZEm2JUaMojpjlC9E8KeGDZs3ZYBRhZhmKhyLDEzIxu1V/c0Q9Yc7Z8+ZNvw==",
+      "version": "1.22.0",
+      "resolved": "https://registry.npmjs.org/apollo-language-server/-/apollo-language-server-1.22.0.tgz",
+      "integrity": "sha512-7Ryl48ggPMaP+FQgrZ0Fr22/OGmP1mByM1zUDshSw7o09eC+EQ4CIKy1n5aGwArMI6TCcBF0hE3bcshq7YPjQQ==",
       "dev": true,
       "requires": {
-        "@apollo/federation": "0.15.0",
+        "@apollo/federation": "0.16.0",
         "@apollographql/apollo-tools": "^0.4.8",
         "@apollographql/graphql-language-service-interface": "^2.0.2",
         "@endemolshinegroup/cosmiconfig-typescript-loader": "^1.0.0",
@@ -4995,7 +5863,7 @@
         "lodash.debounce": "^4.0.8",
         "lodash.merge": "^4.6.1",
         "minimatch": "^3.0.4",
-        "moment": "2.24.0",
+        "moment": "2.25.3",
         "vscode-languageserver": "^5.1.0",
         "vscode-uri": "1.0.6"
       }
@@ -5143,26 +6011,26 @@
       }
     },
     "apollo-server-core": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.13.0.tgz",
-      "integrity": "sha512-PqfsexbyObaQYb2jODs8v/XzrJcn+5mh0jA8ZfQCg5GENlua/CjeTZbRm2X0p3qpwc2E5jFAXSshrIWvhQAGZQ==",
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.14.1.tgz",
+      "integrity": "sha512-Uk/jJwLtm+5YvExghNoq9V2ZHJRXPfaVOt4cIyo+mcjWG6YymHhMg5h9pR/auz9HMI8NP7ykmfo/bsTR1qutWQ==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.3",
         "@apollographql/graphql-playground-html": "1.6.24",
         "@types/graphql-upload": "^8.0.0",
         "@types/ws": "^7.0.0",
-        "apollo-cache-control": "^0.10.0",
-        "apollo-datasource": "^0.7.0",
-        "apollo-engine-reporting": "^1.8.0",
+        "apollo-cache-control": "^0.11.0",
+        "apollo-datasource": "^0.7.1",
+        "apollo-engine-reporting": "^2.0.0",
         "apollo-server-caching": "^0.5.1",
-        "apollo-server-env": "^2.4.3",
+        "apollo-server-env": "^2.4.4",
         "apollo-server-errors": "^2.4.1",
-        "apollo-server-plugin-base": "^0.8.0",
-        "apollo-server-types": "^0.4.0",
-        "apollo-tracing": "^0.10.0",
+        "apollo-server-plugin-base": "^0.9.0",
+        "apollo-server-types": "^0.5.0",
+        "apollo-tracing": "^0.11.0",
         "fast-json-stable-stringify": "^2.0.0",
-        "graphql-extensions": "^0.12.0",
+        "graphql-extensions": "^0.12.2",
         "graphql-tag": "^2.9.2",
         "graphql-tools": "^4.0.0",
         "graphql-upload": "^8.0.2",
@@ -5173,9 +6041,9 @@
       }
     },
     "apollo-server-env": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/apollo-server-env/-/apollo-server-env-2.4.3.tgz",
-      "integrity": "sha512-23R5Xo9OMYX0iyTu2/qT0EUb+AULCBriA9w8HDfMoChB8M+lFClqUkYtaTTHDfp6eoARLW8kDBhPOBavsvKAjA==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/apollo-server-env/-/apollo-server-env-2.4.4.tgz",
+      "integrity": "sha512-c2oddDS3lwAl6QNCIKCLEzt/dF9M3/tjjYRVdxOVN20TidybI7rAbnT4QOzf4tORnGXtiznEAvr/Kc9ahhKADg==",
       "dev": true,
       "requires": {
         "node-fetch": "^2.1.2",
@@ -5189,9 +6057,9 @@
       "dev": true
     },
     "apollo-server-express": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.13.0.tgz",
-      "integrity": "sha512-xDc+kRqWCXs4MeRjls37G45V6PmKYwo7OlpWCXyWDSPGgY9UD4E5A6rUBCyIhoNr7RnVYMkNuySOOqzX1QJ7EA==",
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.14.1.tgz",
+      "integrity": "sha512-Ee1Oc+lzKfHh3BkDNRJL4s7Nnx+Nkmz606TBDi0ETSuNjJqXBNDbDM/YLS3LP7zJ5Oa37U7py72x8rrkPiZZNg==",
       "dev": true,
       "requires": {
         "@apollographql/graphql-playground-html": "1.6.24",
@@ -5200,8 +6068,8 @@
         "@types/cors": "^2.8.4",
         "@types/express": "4.17.4",
         "accepts": "^1.3.5",
-        "apollo-server-core": "^2.13.0",
-        "apollo-server-types": "^0.4.0",
+        "apollo-server-core": "^2.14.1",
+        "apollo-server-types": "^0.5.0",
         "body-parser": "^1.18.3",
         "cors": "^2.8.4",
         "express": "^4.17.1",
@@ -5213,33 +6081,33 @@
       }
     },
     "apollo-server-plugin-base": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/apollo-server-plugin-base/-/apollo-server-plugin-base-0.8.0.tgz",
-      "integrity": "sha512-H8sJlOVJrF0IhYIFMv7NOgB6BFgqobXSZrj1y9ju6dq13OotsqcZC4fJOYc9oWzb/+/mqg/odtVioE71mj68yg==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-plugin-base/-/apollo-server-plugin-base-0.9.0.tgz",
+      "integrity": "sha512-LWcPrsy2+xqwlNseh/QaGa/MPNopS8c4qGgh0g0cAn0lZBRrJ9Yab7dq+iQ6vdUBwIhUWYN6s9dwUWCZw2SL8g==",
       "dev": true,
       "requires": {
-        "apollo-server-types": "^0.4.0"
+        "apollo-server-types": "^0.5.0"
       }
     },
     "apollo-server-types": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/apollo-server-types/-/apollo-server-types-0.4.0.tgz",
-      "integrity": "sha512-U+6qKCdrucVSMEVvLSqSwxIGr3VI6vcfbhpD86sdb8MgHHGH6egjNAcLrPVRk1AyXs8RV0Ysus+vlj8rpouBzA==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-types/-/apollo-server-types-0.5.0.tgz",
+      "integrity": "sha512-zhtsqqqfdeoJQAfc41Sy6WnnBVxKNgZ34BKXf/Q+kXmw7rbZ/B5SG3SJMvj1iFsbzZxILmWdUsE9aD20lEr0bg==",
       "dev": true,
       "requires": {
-        "apollo-engine-reporting-protobuf": "^0.5.0",
+        "apollo-engine-reporting-protobuf": "^0.5.1",
         "apollo-server-caching": "^0.5.1",
-        "apollo-server-env": "^2.4.3"
+        "apollo-server-env": "^2.4.4"
       }
     },
     "apollo-tracing": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/apollo-tracing/-/apollo-tracing-0.10.0.tgz",
-      "integrity": "sha512-yuqA1KT0FQUfzVK3ZIk0hRIE8eUKx9Oklq83AGQxLtS/oafBj/VOCZAtJNJkyEqMJxXQT9uIBtbfO1789Gczkw==",
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/apollo-tracing/-/apollo-tracing-0.11.0.tgz",
+      "integrity": "sha512-I9IFb/8lkBW8ZwOAi4LEojfT7dMfUSkpnV8LHQI8Rcj0HtzL9HObQ3woBmzyGHdGHLFuD/6/VHyFD67SesSrJg==",
       "dev": true,
       "requires": {
-        "apollo-server-env": "^2.4.3",
-        "graphql-extensions": "^0.12.0"
+        "apollo-server-env": "^2.4.4",
+        "apollo-server-plugin-base": "^0.9.0"
       }
     },
     "apollo-upload-client": {
@@ -5255,9 +6123,9 @@
       }
     },
     "apollo-utilities": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.3.tgz",
-      "integrity": "sha512-F14aX2R/fKNYMvhuP2t9GD9fggID7zp5I96MF5QeKYWDWTrkRdHRp4+SVfXUVN+cXOaB/IebfvRtzPf25CM0zw==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz",
+      "integrity": "sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==",
       "dev": true,
       "requires": {
         "@wry/equality": "^0.1.2",
@@ -5281,9 +6149,9 @@
       "dev": true
     },
     "arch": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.1.tgz",
-      "integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.2.tgz",
+      "integrity": "sha512-NTBIIbAfkJeIletyABbVtdPgeKfDafR+1mZV/AyyfC1UkVkp9iUjV+wwmqtUgphHYajbI86jejBJp5e+jkGTiQ==",
       "dev": true
     },
     "archive-type": {
@@ -5543,50 +6411,18 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.7.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
-      "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz",
+      "integrity": "sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.11.1",
-        "caniuse-lite": "^1.0.30001039",
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001061",
         "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.27",
-        "postcss-value-parser": "^4.0.3"
-      },
-      "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001054",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
-          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.432",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
-          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.55",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
-          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
-          "dev": true
-        }
+        "postcss": "^7.0.30",
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "await-to-js": {
@@ -5739,9 +6575,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -6256,12 +7092,12 @@
       "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
     },
     "bootstrap-vue": {
-      "version": "2.14.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.14.0.tgz",
-      "integrity": "sha512-sqbS7iHYCZEj/dDx4Yaze99HcX6bZjO4bSWZ0xSgJwtWQlbfB2VDJ9Qjzjp9XI8TT32wYNGAMpnXpYjQvv5qyQ==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.15.0.tgz",
+      "integrity": "sha512-ncxWkDG0mKFVot314wWKJELi+ESO7k6ngV//qvJFs9iVzlFI8Hx3rBVbpcPW2vrJ+0vitH8N2SOwn4fdQ3frMQ==",
       "requires": {
         "@nuxt/opencollective": "^0.3.0",
-        "bootstrap": ">=4.4.1 <5.0.0",
+        "bootstrap": ">=4.5.0 <5.0.0",
         "popper.js": "^1.16.1",
         "portal-vue": "^2.1.7",
         "vue-functional-data-merge": "^3.1.0"
@@ -6614,14 +7450,15 @@
       }
     },
     "browserslist": {
-      "version": "4.8.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.8.3.tgz",
-      "integrity": "sha512-iU43cMMknxG1ClEZ2MDKeonKE1CCrFVkQK2AqO2YWFmvIrx4JWrvQ4w4hQez6EpVI8rHTtqh/ruHHDHSOKxvUg==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
+      "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001017",
-        "electron-to-chromium": "^1.3.322",
-        "node-releases": "^1.1.44"
+        "caniuse-lite": "^1.0.30001043",
+        "electron-to-chromium": "^1.3.413",
+        "node-releases": "^1.1.53",
+        "pkg-up": "^2.0.0"
       }
     },
     "bs-logger": {
@@ -6798,13 +7635,13 @@
       },
       "dependencies": {
         "find-cache-dir": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.2.0.tgz",
-          "integrity": "sha512-1JKclkYYsf1q9WIJKLZa9S9muC+08RIjzAlLrK4QcYLJMS6mk9yombQ9qf+zJ7H9LS800k0s44L4sDq9VYzqyg==",
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
+          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
           "dev": true,
           "requires": {
             "commondir": "^1.0.1",
-            "make-dir": "^3.0.0",
+            "make-dir": "^3.0.2",
             "pkg-dir": "^4.1.0"
           }
         },
@@ -6828,9 +7665,9 @@
           }
         },
         "make-dir": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.0.tgz",
-          "integrity": "sha512-grNJDhb8b1Jm1qeqW5R/O63wUo4UXo2v2HMic6YT9i/HBlF93S8jkMgH7yugvY9ABDShH4VZMn8I+U8+fCNegw==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
           "dev": true,
           "requires": {
             "semver": "^6.0.0"
@@ -6960,9 +7797,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001020",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001020.tgz",
-      "integrity": "sha512-yWIvwA68wRHKanAVS1GjN8vajAv7MBFshullKCeq/eKpK7pJBVDgFFEqvgWTkcP2+wIDeQGYFRXECjKZnLkUjA==",
+      "version": "1.0.30001066",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
+      "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==",
       "dev": true
     },
     "capture-exit": {
@@ -7444,9 +8281,9 @@
       }
     },
     "cli-spinners": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.2.0.tgz",
-      "integrity": "sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.3.0.tgz",
+      "integrity": "sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w==",
       "dev": true
     },
     "cli-truncate": {
@@ -7497,17 +8334,17 @@
       }
     },
     "cli-ux": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-5.4.5.tgz",
-      "integrity": "sha512-5A6FuU0wPUlfCWUjtizUvNIbXElp6jN9QUJsDibs6F9cVX1kTgaMR3m6KT0R3iriEXpMrmPKV6yYS8XICNuQ6Q==",
+      "version": "5.4.6",
+      "resolved": "https://registry.npmjs.org/cli-ux/-/cli-ux-5.4.6.tgz",
+      "integrity": "sha512-EeiS2TzEndRVknCqE+8Ri8g0bsP617a1nq6n+3Trwft1JCDzyUNlX2J1fl7fwTgRPWtmBmiF6xIyueL5YGs65g==",
       "dev": true,
       "requires": {
-        "@oclif/command": "^1.5.1",
+        "@oclif/command": "^1.6.0",
         "@oclif/errors": "^1.2.1",
         "@oclif/linewrap": "^1.0.0",
         "@oclif/screen": "^1.0.3",
-        "ansi-escapes": "^3.1.0",
-        "ansi-styles": "^3.2.1",
+        "ansi-escapes": "^4.3.0",
+        "ansi-styles": "^4.2.0",
         "cardinal": "^2.1.1",
         "chalk": "^2.4.1",
         "clean-stack": "^2.0.0",
@@ -7520,16 +8357,41 @@
         "js-yaml": "^3.13.1",
         "lodash": "^4.17.11",
         "natural-orderby": "^2.0.1",
+        "object-treeify": "^1.1.4",
         "password-prompt": "^1.1.2",
         "semver": "^5.6.0",
         "string-width": "^3.1.0",
         "strip-ansi": "^5.1.0",
         "supports-color": "^5.5.0",
         "supports-hyperlinks": "^1.0.1",
-        "treeify": "^1.1.0",
         "tslib": "^1.9.3"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -7914,9 +8776,9 @@
       "dev": true
     },
     "consola": {
-      "version": "2.12.1",
-      "resolved": "https://registry.npmjs.org/consola/-/consola-2.12.1.tgz",
-      "integrity": "sha512-aEkkju9ZcEa9y2MhzNhfmTUws/CEZZ0LKu0FxftSU3HygPfVMMIMSYyYct+xBN6XNRhsaDZjw2HAv3m2ammXSA=="
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.12.2.tgz",
+      "integrity": "sha512-c9mzemrAk57s3UIjepn8KKkuEH5fauMdot5kFSJUnqHcnApVS9Db8Rbv5AZ1Iz6lXzaGe9z1crQXhJtGX4h/Og=="
     },
     "console-browserify": {
       "version": "1.2.0",
@@ -8091,36 +8953,6 @@
         "semver": "7.0.0"
       },
       "dependencies": {
-        "browserslist": {
-          "version": "4.12.0",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.12.0.tgz",
-          "integrity": "sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001043",
-            "electron-to-chromium": "^1.3.413",
-            "node-releases": "^1.1.53",
-            "pkg-up": "^2.0.0"
-          }
-        },
-        "caniuse-lite": {
-          "version": "1.0.30001054",
-          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001054.tgz",
-          "integrity": "sha512-jiKlTI6Ur8Kjfj8z0muGrV6FscpRvefcQVPSuMuXnvRCfExU7zlVLNjmOz1TnurWgUrAY7MMmjyy+uTgIl1XHw==",
-          "dev": true
-        },
-        "electron-to-chromium": {
-          "version": "1.3.432",
-          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.432.tgz",
-          "integrity": "sha512-/GdNhXyLP5Yl2322CUX/+Xi8NhdHBqL6lD9VJVKjH6CjoPGakvwZ5CpKgj/oOlbzuWWjOvMjDw1bBuAIRCNTlw==",
-          "dev": true
-        },
-        "node-releases": {
-          "version": "1.1.55",
-          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
-          "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
-          "dev": true
-        },
         "semver": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
@@ -8154,6 +8986,18 @@
         "is-directory": "^0.3.1",
         "js-yaml": "^3.13.1",
         "parse-json": "^4.0.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        }
       }
     },
     "create-ecdh": {
@@ -8807,9 +9651,9 @@
       },
       "dependencies": {
         "cross-spawn": {
-          "version": "7.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -9406,9 +10250,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.332",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.332.tgz",
-      "integrity": "sha512-AP2HkLhfSOIxP7gDjlyZ4ywGWIcxRMZoU9+JriuVkQe2pSLDdWBsE6+eI6BQOqun1dohLrUTOPHsQLLhhFA7Eg==",
+      "version": "1.3.453",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
+      "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==",
       "dev": true
     },
     "elegant-spinner": {
@@ -9473,6 +10317,18 @@
         "graceful-fs": "^4.1.2",
         "memory-fs": "^0.5.0",
         "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "memory-fs": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+          "dev": true,
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        }
       }
     },
     "enquirer": {
@@ -9485,9 +10341,9 @@
       }
     },
     "entities": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
-      "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.2.tgz",
+      "integrity": "sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw=="
     },
     "env-ci": {
       "version": "3.2.2",
@@ -9609,9 +10465,9 @@
       }
     },
     "eslint": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.0.0.tgz",
-      "integrity": "sha512-qY1cwdOxMONHJfGqw52UOpZDeqXy8xmD0u8CT6jIstil72jkhURC704W8CFyTPDPllz4z4lu0Ql1+07PG/XdIg==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.1.0.tgz",
+      "integrity": "sha512-DfS3b8iHMK5z/YLSme8K5cge168I8j8o1uiVmFCgnnjxZQbCGyraF8bMl7Ju4yfBmCuxD7shOF7eqGkcuIHfsA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -9653,15 +10509,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
-          "dev": true
-        },
-        "acorn-jsx": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
-          "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
+          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
           "dev": true
         },
         "ansi-styles": {
@@ -9700,9 +10550,9 @@
           "dev": true
         },
         "cross-spawn": {
-          "version": "7.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -9719,16 +10569,6 @@
             "esutils": "^2.0.2"
           }
         },
-        "eslint-scope": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
-          "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
-          "dev": true,
-          "requires": {
-            "esrecurse": "^4.1.0",
-            "estraverse": "^4.1.1"
-          }
-        },
         "espree": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/espree/-/espree-7.0.0.tgz",
@@ -9740,23 +10580,6 @@
             "eslint-visitor-keys": "^1.1.0"
           }
         },
-        "esquery": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.3.1.tgz",
-          "integrity": "sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==",
-          "dev": true,
-          "requires": {
-            "estraverse": "^5.1.0"
-          },
-          "dependencies": {
-            "estraverse": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.1.0.tgz",
-              "integrity": "sha512-FyohXK+R0vE+y1nHLoBM7ZTyqRpqAlhdZHCWIWEviFLiGB8b04H6bQs8G+XTthacvT8VuwvteiP7RJSxMs8UEw==",
-              "dev": true
-            }
-          }
-        },
         "glob-parent": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
@@ -10222,9 +11045,9 @@
       }
     },
     "eslint-scope": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
+      "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
       "dev": true,
       "requires": {
         "esrecurse": "^4.1.0",
@@ -10477,9 +11300,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -11016,9 +11839,9 @@
       "dev": true
     },
     "flow-parser": {
-      "version": "0.124.0",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.124.0.tgz",
-      "integrity": "sha512-ftEG23+ieFYxpBnwJXLZiSmAjrtVU7J2NmEqv7OZbwPWgqsqKsSD73RwBxdEFhUdyfvceDRZ7GbQrYZJ0YKuFg==",
+      "version": "0.125.1",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.125.1.tgz",
+      "integrity": "sha512-vrnK98a85yyaPqcZTQmHlrzb4PAiF/WgkI8xZCmyn5sT6/bAKAFbUB+VQqfzTpnvq2VwZ5SThi/xuz3zMLTFRw==",
       "dev": true
     },
     "flush-write-stream": {
@@ -11215,635 +12038,88 @@
       "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
       "dev": true,
       "requires": {
-        "map-cache": "^0.2.2"
-      }
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
-      "dev": true
-    },
-    "from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "requires": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "fs-capacitor": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/fs-capacitor/-/fs-capacitor-2.0.4.tgz",
-      "integrity": "sha512-8S4f4WsCryNw2mJJchi46YgB6CR5Ze+4L1h8ewl9tEpL4SJ3ZO+c/bS4BWhB8bK+O3TMqhuZarTitd0S0eh2pA==",
-      "dev": true
-    },
-    "fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true
-    },
-    "fs-exists-sync": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
-      "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
-      "dev": true
-    },
-    "fs-extra": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      }
-    },
-    "fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "fs-write-stream-atomic": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "iferr": "^0.1.5",
-        "imurmurhash": "^0.1.4",
-        "readable-stream": "1 || 2"
-      }
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
-    },
-    "fsevents": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.11.tgz",
-      "integrity": "sha512-+ux3lx6peh0BpvY0JebGyZoiR4D+oYzdPZMKJwkZ+sFkNJzpL7tXc/wehS49gUAxg3tmMHPHZkA8JU2rhhgDHw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bindings": "^1.5.0",
-        "nan": "^2.12.1",
-        "node-pre-gyp": "*"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "balanced-match": "^1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.1.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "debug": {
-          "version": "3.2.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "deep-extend": {
-          "version": "0.6.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.7",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.6.0"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.24",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimatch": "^3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
-          }
-        },
-        "inherits": {
-          "version": "2.0.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "minipass": {
-          "version": "2.9.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          }
-        },
-        "minizlib": {
-          "version": "1.3.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "^2.9.0"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "debug": "^3.2.6",
-            "iconv-lite": "^0.4.4",
-            "sax": "^1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.14.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.1",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.2.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4.4.2"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1",
-            "osenv": "^0.1.4"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "npm-normalize-package-bin": "^1.0.1"
-          }
-        },
-        "npm-normalize-package-bin": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.4.7",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "^3.0.1",
-            "npm-bundled": "^1.0.1"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "wrappy": "1"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "^1.0.0",
-            "os-tmpdir": "^1.0.0"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.8",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "^0.6.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.1.1",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.7.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.7.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.13",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chownr": "^1.1.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.8.6",
-            "minizlib": "^1.2.1",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.3"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "string-width": "^1.0.2 || 2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        }
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "dev": true
+    },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "fs-capacitor": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/fs-capacitor/-/fs-capacitor-2.0.4.tgz",
+      "integrity": "sha512-8S4f4WsCryNw2mJJchi46YgB6CR5Ze+4L1h8ewl9tEpL4SJ3ZO+c/bS4BWhB8bK+O3TMqhuZarTitd0S0eh2pA==",
+      "dev": true
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true
+    },
+    "fs-exists-sync": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
+      "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
+      "dev": true
+    },
+    "fs-extra": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
+      "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
+    "fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0"
+      }
+    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
       }
     },
     "fstream": {
@@ -12102,39 +12378,6 @@
       "requires": {
         "byline": "5.0.0",
         "util.promisify": "1.0.1"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.17.5",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
-          "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
-          "dev": true,
-          "requires": {
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.1",
-            "is-callable": "^1.1.5",
-            "is-regex": "^1.0.5",
-            "object-inspect": "^1.7.0",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.0",
-            "string.prototype.trimleft": "^2.1.1",
-            "string.prototype.trimright": "^2.1.1"
-          }
-        },
-        "util.promisify": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
-          "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
-          "dev": true,
-          "requires": {
-            "define-properties": "^1.1.3",
-            "es-abstract": "^1.17.2",
-            "has-symbols": "^1.0.1",
-            "object.getownpropertydescriptors": "^2.1.0"
-          }
-        }
       }
     },
     "git-rev-sync": {
@@ -12313,12 +12556,12 @@
       }
     },
     "graphql-anywhere": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-4.2.6.tgz",
-      "integrity": "sha512-re4fqaii3l0fCsC3qFKQrmwffephI9rinrwXAy+4EnWip2YkGlV8wC4en42eW8KI2nlWBh9lkJPfR/5TZf/l1w==",
+      "version": "4.2.7",
+      "resolved": "https://registry.npmjs.org/graphql-anywhere/-/graphql-anywhere-4.2.7.tgz",
+      "integrity": "sha512-fJHvVywWVWjiHuPIMs16Nfjf4zdQUwSO1LKycwBJCWIPeoeQ8LqXK2BgYoZAHkhKEFktZZeYyzS4o/uIUG0z5A==",
       "dev": true,
       "requires": {
-        "apollo-utilities": "^1.3.3",
+        "apollo-utilities": "^1.3.4",
         "ts-invariant": "^0.3.2",
         "tslib": "^1.10.0"
       },
@@ -12341,14 +12584,14 @@
       }
     },
     "graphql-extensions": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.12.0.tgz",
-      "integrity": "sha512-kBRLtNeknrFl0W/UQQYebj6qnvb1E1RpQ2+C7Y8pwMc6yV8+9pWFx5RP0HzfeEuScCmK93i3H5sdPedoQWwENw==",
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.12.2.tgz",
+      "integrity": "sha512-vFaZua5aLiCOOzxfY5qzHZ6S52BCqW7VVOwzvV52Wb5edRm3dn6u+1MR9yYyEqUHSf8LvdhEojYlOkKiaQ4ghA==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.3",
-        "apollo-server-env": "^2.4.3",
-        "apollo-server-types": "^0.4.0"
+        "apollo-server-env": "^2.4.4",
+        "apollo-server-types": "^0.5.0"
       }
     },
     "graphql-subscriptions": {
@@ -12740,6 +12983,16 @@
             "json5": "^0.5.0",
             "object-assign": "^4.0.1"
           }
+        },
+        "util.promisify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
+          "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+          "dev": true,
+          "requires": {
+            "define-properties": "^1.1.2",
+            "object.getownpropertydescriptors": "^2.0.3"
+          }
         }
       }
     },
@@ -12764,9 +13017,9 @@
           "dev": true
         },
         "readable-stream": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
-          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
           "dev": true,
           "requires": {
             "inherits": "^2.0.3",
@@ -12800,6 +13053,16 @@
           "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
           "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
           "dev": true
+        },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
         }
       }
     },
@@ -13101,15 +13364,6 @@
         "through": "^2.3.6"
       },
       "dependencies": {
-        "ansi-escapes": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
-          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.11.0"
-          }
-        },
         "ansi-styles": {
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
@@ -13225,12 +13479,6 @@
           "requires": {
             "has-flag": "^4.0.0"
           }
-        },
-        "type-fest": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
-          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
-          "dev": true
         }
       }
     },
@@ -13942,9 +14190,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14011,9 +14259,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14058,9 +14306,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14184,9 +14432,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14238,9 +14486,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14274,18 +14522,18 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
           }
         },
         "acorn": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
+          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
           "dev": true
         },
         "cssom": {
@@ -14374,9 +14622,9 @@
           }
         },
         "ws": {
-          "version": "7.2.5",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.5.tgz",
-          "integrity": "sha512-C34cIU4+DB2vMyAbmEKossWq2ZQDr6QEyuuCzWrM9zfw1sGc0mYiJ0UnG9zzNykt49C2Fi34hvr2vssFQRS6EA==",
+          "version": "7.3.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
+          "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w==",
           "dev": true
         }
       }
@@ -14406,9 +14654,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14454,9 +14702,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14500,9 +14748,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14544,9 +14792,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14596,9 +14844,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14670,9 +14918,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14707,9 +14955,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14754,9 +15002,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14787,9 +15035,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14836,9 +15084,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14889,9 +15137,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -14953,9 +15201,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -15037,9 +15285,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -15106,9 +15354,9 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
@@ -15155,15 +15403,6 @@
         "strip-ansi": "^5.0.0"
       },
       "dependencies": {
-        "ansi-escapes": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
-          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.11.0"
-          }
-        },
         "string-length": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/string-length/-/string-length-3.1.0.tgz",
@@ -15182,12 +15421,6 @@
           "requires": {
             "ansi-regex": "^4.1.0"
           }
-        },
-        "type-fest": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
-          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
-          "dev": true
         }
       }
     },
@@ -15218,13 +15451,19 @@
           }
         },
         "@types/yargs": {
-          "version": "13.0.8",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.8.tgz",
-          "integrity": "sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==",
+          "version": "13.0.9",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
+          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
           "dev": true,
           "requires": {
             "@types/yargs-parser": "*"
           }
+        },
+        "ansi-escapes": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+          "dev": true
         }
       }
     },
@@ -15312,9 +15551,9 @@
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "js-yaml": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
+      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
@@ -15328,16 +15567,17 @@
       "dev": true
     },
     "jscodeshift": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.7.1.tgz",
-      "integrity": "sha512-YMkZSyoc8zg5woZL23cmWlnFLPH/mHilonGA7Qbzs7H6M4v4PH0Qsn4jeDyw+CHhVoAnm9UxQyB0Yw1OT+mktA==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/jscodeshift/-/jscodeshift-0.9.0.tgz",
+      "integrity": "sha512-SUeXq8dJzj5LR8uy71axgG3bmiHoC0IdHy7n89SqKzkzBWpAds5F9IIGE+lqUSZX9J0ZfEzN8fXWIqQV0dIp2w==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.1.6",
         "@babel/parser": "^7.1.6",
         "@babel/plugin-proposal-class-properties": "^7.1.0",
-        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-        "@babel/preset-env": "^7.1.6",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.1.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.1.0",
+        "@babel/plugin-transform-modules-commonjs": "^7.1.0",
         "@babel/preset-flow": "^7.0.0",
         "@babel/preset-typescript": "^7.1.0",
         "@babel/register": "^7.0.0",
@@ -15387,6 +15627,12 @@
         "xml-name-validator": "^3.0.0"
       },
       "dependencies": {
+        "acorn": {
+          "version": "5.7.4",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+          "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
+          "dev": true
+        },
         "parse5": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
@@ -15573,27 +15819,28 @@
       "dev": true
     },
     "linkify-it": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
-      "integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz",
+      "integrity": "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==",
       "requires": {
         "uc.micro": "^1.0.1"
       }
     },
     "lint-staged": {
-      "version": "10.2.2",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.2.tgz",
-      "integrity": "sha512-78kNqNdDeKrnqWsexAmkOU3Z5wi+1CsQmUmfCuYgMTE8E4rAIX8RHW7xgxwAZ+LAayb7Cca4uYX4P3LlevzjVg==",
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.6.tgz",
+      "integrity": "sha512-2oEBWyPZHkdyjKcIv2U6ay80Q52ZMlZZrUnfsV0WTVcgzPlt3o2t5UFy2v8ETUTsIDZ0xSJVnffWCgD3LF6xTQ==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
-        "commander": "^5.0.0",
+        "cli-truncate": "2.1.0",
+        "commander": "^5.1.0",
         "cosmiconfig": "^6.0.0",
         "debug": "^4.1.1",
         "dedent": "^0.7.0",
-        "execa": "^4.0.0",
-        "listr2": "1.3.8",
-        "log-symbols": "^3.0.0",
+        "execa": "^4.0.1",
+        "listr2": "^2.0.2",
+        "log-symbols": "^4.0.0",
         "micromatch": "^4.0.2",
         "normalize-path": "^3.0.0",
         "please-upgrade-node": "^3.2.0",
@@ -15611,6 +15858,12 @@
             "color-convert": "^2.0.1"
           }
         },
+        "astral-regex": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+          "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+          "dev": true
+        },
         "braces": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -15630,6 +15883,16 @@
             "supports-color": "^7.1.0"
           }
         },
+        "cli-truncate": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz",
+          "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==",
+          "dev": true,
+          "requires": {
+            "slice-ansi": "^3.0.0",
+            "string-width": "^4.2.0"
+          }
+        },
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -15665,9 +15928,9 @@
           }
         },
         "cross-spawn": {
-          "version": "7.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -15675,10 +15938,16 @@
             "which": "^2.0.1"
           }
         },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
         "execa": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.1.tgz",
-          "integrity": "sha512-SCjM/zlBdOK8Q5TIjOn6iEHZaPHFsMoTxXQ2nvUvtPnuohz3H2dIozSg+etNR98dGoYUp2ENSKLL/XaMmbxVgw==",
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-4.0.2.tgz",
+          "integrity": "sha512-QI2zLa6CjGWdiQsmSkZoGtDx2N+cQIGb3yNolGTdjSQzydzLgYYf8LRuagp7S7fPimjcrzUDSUFd/MgzELMi4Q==",
           "dev": true,
           "requires": {
             "cross-spawn": "^7.0.0",
@@ -15726,6 +15995,12 @@
             "resolve-from": "^4.0.0"
           }
         },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
         "is-number": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -15735,68 +16010,16 @@
         "is-stream": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "log-symbols": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
-          "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.4.2"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "3.2.1",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-              "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-              "dev": true,
-              "requires": {
-                "color-convert": "^1.9.0"
-              }
-            },
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "dev": true,
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              }
-            },
-            "color-convert": {
-              "version": "1.9.3",
-              "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-              "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-              "dev": true,
-              "requires": {
-                "color-name": "1.1.3"
-              }
-            },
-            "color-name": {
-              "version": "1.1.3",
-              "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-              "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-              "dev": true
-            },
-            "has-flag": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-              "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-              "dev": true
-            },
-            "supports-color": {
-              "version": "5.5.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-              "dev": true,
-              "requires": {
-                "has-flag": "^3.0.0"
-              }
-            }
+          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+          "dev": true
+        },
+        "log-symbols": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
+          "integrity": "sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^4.0.0"
           }
         },
         "micromatch": {
@@ -15833,18 +16056,6 @@
             "mimic-fn": "^2.1.0"
           }
         },
-        "parse-json": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
-          }
-        },
         "path-key": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -15878,6 +16089,28 @@
           "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
           "dev": true
         },
+        "slice-ansi": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz",
+          "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "astral-regex": "^2.0.0",
+            "is-fullwidth-code-point": "^3.0.0"
+          }
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
         "supports-color": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
@@ -16027,36 +16260,27 @@
       }
     },
     "listr2": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-1.3.8.tgz",
-      "integrity": "sha512-iRDRVTgSDz44tBeBBg/35TQz4W+EZBWsDUq7hPpqeUHm7yLPNll0rkwW3lIX9cPAK7l+x95mGWLpxjqxftNfZA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-2.0.4.tgz",
+      "integrity": "sha512-oJaAcplPsa72rKW0eg4P4LbEJjhH+UO2I8uqR/I2wzHrVg16ohSfUy0SlcHS21zfYXxtsUpL8YXGHjyfWMR0cg==",
       "dev": true,
       "requires": {
         "@samverschueren/stream-to-observable": "^0.3.0",
-        "chalk": "^3.0.0",
+        "chalk": "^4.0.0",
         "cli-cursor": "^3.1.0",
         "cli-truncate": "^2.1.0",
         "elegant-spinner": "^2.0.0",
-        "enquirer": "^2.3.4",
+        "enquirer": "^2.3.5",
         "figures": "^3.2.0",
         "indent-string": "^4.0.0",
         "log-update": "^4.0.0",
         "p-map": "^4.0.0",
         "pad": "^3.2.0",
-        "rxjs": "^6.3.3",
+        "rxjs": "^6.5.5",
         "through": "^2.3.8",
         "uuid": "^7.0.2"
       },
       "dependencies": {
-        "ansi-escapes": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
-          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.11.0"
-          }
-        },
         "ansi-styles": {
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
@@ -16074,9 +16298,9 @@
           "dev": true
         },
         "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -16240,12 +16464,6 @@
             "has-flag": "^4.0.0"
           }
         },
-        "type-fest": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
-          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
-          "dev": true
-        },
         "uuid": {
           "version": "7.0.3",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
@@ -16278,6 +16496,16 @@
         "type-fest": "^0.3.0"
       },
       "dependencies": {
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
         "pify": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -16615,6 +16843,12 @@
         "wrap-ansi": "^3.0.1"
       },
       "dependencies": {
+        "ansi-escapes": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+          "dev": true
+        },
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
@@ -16760,13 +16994,13 @@
       }
     },
     "markdown-it": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
-      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-11.0.0.tgz",
+      "integrity": "sha512-+CvOnmbSubmQFSA9dKz1BRiaSMV7rhexl3sngKqFyXSagoA3fBdJQ8oZWtRy2knXdpDXaBw44euz37DeJQ9asg==",
       "requires": {
         "argparse": "^1.0.7",
         "entities": "~2.0.0",
-        "linkify-it": "^2.0.0",
+        "linkify-it": "^3.0.1",
         "mdurl": "^1.0.1",
         "uc.micro": "^1.0.5"
       }
@@ -16800,9 +17034,9 @@
       "dev": true
     },
     "memory-fs": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-      "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
       "dev": true,
       "requires": {
         "errno": "^0.1.3",
@@ -17132,9 +17366,9 @@
       "dev": true
     },
     "minipass": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.1.tgz",
-      "integrity": "sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
+      "integrity": "sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==",
       "dev": true,
       "requires": {
         "yallist": "^4.0.0"
@@ -17167,9 +17401,9 @@
       }
     },
     "minipass-pipeline": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz",
-      "integrity": "sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.3.tgz",
+      "integrity": "sha512-cFOknTvng5vqnwOpDsZTWhNll6Jf8o2x+/diplafmxpuIymAjzoOolZG0VvQf3V2HgqzJNhnuKHYp2BqDgz8IQ==",
       "dev": true,
       "requires": {
         "minipass": "^3.0.0"
@@ -17293,6 +17527,17 @@
             "path-is-absolute": "^1.0.0"
           }
         },
+        "js-yaml": {
+          "version": "3.13.1",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "argparse": "^1.0.7",
+            "esprima": "^4.0.0"
+          }
+        },
         "mkdirp": {
           "version": "0.5.4",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz",
@@ -17323,9 +17568,9 @@
       }
     },
     "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "version": "2.25.3",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz",
+      "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==",
       "dev": true
     },
     "move-concurrently": {
@@ -17940,13 +18185,10 @@
       }
     },
     "node-releases": {
-      "version": "1.1.45",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.45.tgz",
-      "integrity": "sha512-cXvGSfhITKI8qsV116u2FTzH5EWZJfgG7d4cpqwF8I8+1tWpD6AsvvGRKq2onR0DNj1jfqsjkXZsm14JMS7Cyg==",
-      "dev": true,
-      "requires": {
-        "semver": "^6.3.0"
-      }
+      "version": "1.1.57",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz",
+      "integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw==",
+      "dev": true
     },
     "node-sass": {
       "version": "4.14.1",
@@ -18286,6 +18528,12 @@
       "integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk=",
       "dev": true
     },
+    "object-treeify": {
+      "version": "1.1.25",
+      "resolved": "https://registry.npmjs.org/object-treeify/-/object-treeify-1.1.25.tgz",
+      "integrity": "sha512-6Abx0xlXDnYd50JkQefvoIly3jWOu8/PqH4lh8p2/aMFEx5TjsUGHt0H9NHfzt+pCwOhpPgNYofD8e2YywIXig==",
+      "dev": true
+    },
     "object-visit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
@@ -18742,13 +18990,15 @@
       }
     },
     "parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
+      "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
       "dev": true,
       "requires": {
+        "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
+        "json-parse-better-errors": "^1.0.1",
+        "lines-and-columns": "^1.1.6"
       }
     },
     "parse-passwd": {
@@ -18813,6 +19063,14 @@
       "requires": {
         "ansi-escapes": "^3.1.0",
         "cross-spawn": "^6.0.5"
+      },
+      "dependencies": {
+        "ansi-escapes": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
+          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
+          "dev": true
+        }
       }
     },
     "path-browserify": {
@@ -19125,9 +19383,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.29.tgz",
-      "integrity": "sha512-ba0ApvR3LxGvRMMiUa9n0WR4HjzcYm7tS+ht4/2Nd0NLtHpPIH77fuB9Xh1/yJVz9O/E/95Y/dn8ygWsyffXtw==",
+      "version": "7.0.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.31.tgz",
+      "integrity": "sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -19903,19 +20161,19 @@
       "dev": true
     },
     "proxy-addr": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
-      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
       "dev": true,
       "requires": {
         "forwarded": "~0.1.2",
-        "ipaddr.js": "1.9.0"
+        "ipaddr.js": "1.9.1"
       },
       "dependencies": {
         "ipaddr.js": {
-          "version": "1.9.0",
-          "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
-          "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==",
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+          "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
           "dev": true
         }
       }
@@ -19971,9 +20229,9 @@
       "dev": true
     },
     "pstree.remy": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.7.tgz",
-      "integrity": "sha512-xsMgrUwRpuGskEzBFkH8NmTimbZ5PcPup0LA8JJkHIm2IMUbQcpo3yeLNWVrufEYjh8YwtSVh0xz6UeWc5Oh5A==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==",
       "dev": true
     },
     "public-encrypt": {
@@ -20149,20 +20407,6 @@
         "normalize-package-data": "^2.5.0",
         "parse-json": "^5.0.0",
         "type-fest": "^0.6.0"
-      },
-      "dependencies": {
-        "parse-json": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-          "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1",
-            "lines-and-columns": "^1.1.6"
-          }
-        }
       }
     },
     "read-pkg-up": {
@@ -20187,6 +20431,16 @@
             "strip-bom": "^3.0.0"
           }
         },
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "dev": true,
+          "requires": {
+            "error-ex": "^1.3.1",
+            "json-parse-better-errors": "^1.0.1"
+          }
+        },
         "read-pkg": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -20392,9 +20646,9 @@
       }
     },
     "regjsgen": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.1.tgz",
-      "integrity": "sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
       "dev": true
     },
     "regjsparser": {
@@ -21519,9 +21773,9 @@
       }
     },
     "source-map-support": {
-      "version": "0.5.16",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz",
-      "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==",
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -22219,9 +22473,9 @@
       },
       "dependencies": {
         "cross-spawn": {
-          "version": "7.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -22417,9 +22671,9 @@
       }
     },
     "terser": {
-      "version": "4.6.13",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.13.tgz",
-      "integrity": "sha512-wMvqukYgVpQlymbnNbabVZbtM6PN63AzqexpwJL8tbh/mRT9LE5o+ruVduAGL7D6Fpjl+Q+06U5I9Ul82odAhw==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.7.0.tgz",
+      "integrity": "sha512-Lfb0RiZcjRDXCC3OSHJpEkxJ9Qeqs6mp2v4jf2MHfy8vGERmVDuvjXdd/EnP5Deme5F2yBRBymKmKHCBg2echw==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
@@ -22920,9 +23174,9 @@
       }
     },
     "ts-node": {
-      "version": "8.10.1",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.1.tgz",
-      "integrity": "sha512-bdNz1L4ekHiJul6SHtZWs1ujEKERJnHs4HxN7rjTyyVOFf3HaJ6sLqe6aPG62XTzAB/63pKRh5jTSWL0D7bsvw==",
+      "version": "8.10.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
+      "integrity": "sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==",
       "dev": true,
       "requires": {
         "arg": "^4.1.0",
@@ -22930,24 +23184,6 @@
         "make-error": "^1.1.1",
         "source-map-support": "^0.5.17",
         "yn": "3.1.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "source-map-support": {
-          "version": "0.5.19",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
-          "dev": true,
-          "requires": {
-            "buffer-from": "^1.0.0",
-            "source-map": "^0.6.0"
-          }
-        }
       }
     },
     "ts-pnp": {
@@ -23005,13 +23241,22 @@
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
           "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
           "dev": true
+        },
+        "tsutils": {
+          "version": "2.29.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+          "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+          "dev": true,
+          "requires": {
+            "tslib": "^1.8.1"
+          }
         }
       }
     },
     "tsutils": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
-      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "version": "3.17.1",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.17.1.tgz",
+      "integrity": "sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==",
       "dev": true,
       "requires": {
         "tslib": "^1.8.1"
@@ -23090,9 +23335,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.9.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.2.tgz",
-      "integrity": "sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==",
+      "version": "3.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz",
+      "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==",
       "dev": true
     },
     "uc.micro": {
@@ -23125,9 +23370,9 @@
       }
     },
     "unbzip2-stream": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.2.tgz",
-      "integrity": "sha512-pZMVAofMrrHX6Ik39hCk470kulCbmZ2SWfQLPmTWqfJV/oUm0gn1CblvHdUu4+54Je6Jq34x8kY6XjTy6dMkOg==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
+      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
       "dev": true,
       "requires": {
         "buffer": "^5.2.1",
@@ -23407,9 +23652,9 @@
       },
       "dependencies": {
         "mime": {
-          "version": "2.4.5",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.5.tgz",
-          "integrity": "sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==",
+          "version": "2.4.6",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+          "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==",
           "dev": true
         }
       }
@@ -23458,13 +23703,36 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
     "util.promisify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
-      "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.2",
-        "object.getownpropertydescriptors": "^2.0.3"
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.2",
+        "has-symbols": "^1.0.1",
+        "object.getownpropertydescriptors": "^2.1.0"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.5",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
+          "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.1.5",
+            "is-regex": "^1.0.5",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimleft": "^2.1.1",
+            "string.prototype.trimright": "^2.1.1"
+          }
+        }
       }
     },
     "utila": {
@@ -23623,9 +23891,9 @@
       },
       "dependencies": {
         "cross-spawn": {
-          "version": "7.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.2.tgz",
-          "integrity": "sha512-PD6G8QG3S4FK/XCGFbEQrDqO2AnMMsy0meR7lerlIOHAAbkuavGU/pOqprrlvfTNjvowivTeBsjebAL0NSoMxw==",
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
           "dev": true,
           "requires": {
             "path-key": "^3.1.0",
@@ -23748,9 +24016,9 @@
       }
     },
     "vue-context": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/vue-context/-/vue-context-5.1.0.tgz",
-      "integrity": "sha512-PcKbc9mjiUt4fswRR/oA/IJc5oXHjpnKIcATWZcBTDk7CzTvLznkIjq6pGFI8vUtGzABxVMvPq93dpBSRfinxg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/vue-context/-/vue-context-5.2.0.tgz",
+      "integrity": "sha512-XH3SwDanAcE7ppzVEkXqpMyzkFKUDp8TDh4vBE9UPbT6OHwLIwtANH6ZAakq8q2iV+hGtDDfwYgX12IbZjyNnw==",
       "requires": {
         "vue-clickaway": "^2.2.2"
       }
@@ -23821,9 +24089,9 @@
       "integrity": "sha512-DKtxUCW/oprM/ndn9h/cnVgsmqjQ/ARy5rH4q/11Pas04og2td+sltl91H/rlwXTwJIqWyt+lJizK5o4ErjWIQ=="
     },
     "vue-jscodeshift-adapter": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/vue-jscodeshift-adapter/-/vue-jscodeshift-adapter-2.0.3.tgz",
-      "integrity": "sha512-RXv0lrDG2CAx3yAQCoD9beU8nAoT3rhh/fgb+xlYM0Qlm+cpkWSLTdfOt1x2j2wHI08uEsi0q7x6rjhn54EbNA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-jscodeshift-adapter/-/vue-jscodeshift-adapter-2.1.0.tgz",
+      "integrity": "sha512-xDn8kpZ0/yG9Z1Z+osrfnd1k1y5AJIdUtqHWNJY2eRz37Gs1tftiZ8BUK89Pab0ddnwhZqh5eNFfOT0SFlZnWQ==",
       "dev": true,
       "requires": {
         "cheerio": "^1.0.0-rc.2",
@@ -24180,20 +24448,14 @@
         "webpack-sources": "^1.4.1"
       },
       "dependencies": {
-        "acorn": {
-          "version": "6.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
-          "dev": true
-        },
-        "memory-fs": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-          "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+        "eslint-scope": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+          "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
           "dev": true,
           "requires": {
-            "errno": "^0.1.3",
-            "readable-stream": "^2.0.1"
+            "esrecurse": "^4.1.0",
+            "estraverse": "^4.1.1"
           }
         },
         "schema-utils": {
@@ -24210,9 +24472,9 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.7.0.tgz",
-      "integrity": "sha512-mETdjZ30a3Yf+NTB/wqTgACK7rAYQl5uxKK0WVTNmF0sM3Uv8s3R58YZMW7Rhu0Lk2Rmuhdj5dcH5Q76zCDVdA==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.8.0.tgz",
+      "integrity": "sha512-PODQhAYVEourCcOuU+NiYI7WdR8QyELZGgPvB1y2tjbUpbmcQOt5Q7jEK+ttd5se0KSBKD9SXHCEozS++Wllmw==",
       "dev": true,
       "requires": {
         "acorn": "^7.1.1",
@@ -24231,9 +24493,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-          "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
+          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
           "dev": true
         },
         "acorn-walk": {
@@ -24281,20 +24543,10 @@
         "webpack-log": "^2.0.0"
       },
       "dependencies": {
-        "memory-fs": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-          "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
-          "dev": true,
-          "requires": {
-            "errno": "^0.1.3",
-            "readable-stream": "^2.0.1"
-          }
-        },
         "mime": {
-          "version": "2.4.5",
-          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.5.tgz",
-          "integrity": "sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==",
+          "version": "2.4.6",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+          "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==",
           "dev": true
         }
       }
@@ -24346,12 +24598,6 @@
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
         "is-absolute-url": {
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
@@ -24369,34 +24615,6 @@
             "ajv-keywords": "^3.1.0"
           }
         },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "4.1.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-              "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-              "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^4.1.0"
-              }
-            }
-          }
-        },
         "strip-ansi": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -24414,34 +24632,6 @@
           "requires": {
             "has-flag": "^3.0.0"
           }
-        },
-        "yargs": {
-          "version": "13.3.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^5.0.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^2.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^3.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^13.1.2"
-          }
-        },
-        "yargs-parser": {
-          "version": "13.1.2",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
         }
       }
     },
@@ -24701,13 +24891,10 @@
       "dev": true
     },
     "yaml": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.9.2.tgz",
-      "integrity": "sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.9.2"
-      }
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+      "dev": true
     },
     "yaml-front-matter": {
       "version": "3.4.1",
diff --git a/package.json b/package.json
index cec5d4de..7b52fbcf 100644
--- a/package.json
+++ b/package.json
@@ -12,26 +12,26 @@
   },
   "dependencies": {
     "@types/irc": "^0.3.33",
-    "@types/node": "^14.0.1",
+    "@types/node": "^14.0.5",
     "@types/punycode": "^2.1.0",
     "@types/vuedraggable": "^2.23.1",
     "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
     "bootstrap": "^4.5.0",
-    "bootstrap-vue": "^2.14.0",
+    "bootstrap-vue": "^2.15.0",
     "broadcast-channel": "^3.1.0",
     "broadcastchannel-polyfill": "^1.0.1",
     "eventemitter3": "^4.0.4",
     "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
-    "markdown-it": "^10.0.0",
+    "markdown-it": "^11.0.0",
     "stream": "0.0.2",
     "sysend": "^1.3.3",
     "to-bool": "0.0.1",
     "tslib": "^2.0.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-context": "^5.1.0",
+    "vue-context": "^5.2.0",
     "vue-context-menu": "^2.0.6",
     "vue-js-modal": "^1.3.35",
     "vue-perfect-scrollbar": "^0.2.1",
@@ -43,29 +43,29 @@
     "vuex-class-component": "^2.3.2"
   },
   "devDependencies": {
-    "@types/jest": "^25.2.2",
+    "@types/jest": "^25.2.3",
     "@types/markdown-it": "10.0.1",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli": "^4.3.1",
-    "@vue/cli-plugin-babel": "^4.3.1",
-    "@vue/cli-plugin-e2e-nightwatch": "^4.3.1",
-    "@vue/cli-plugin-eslint": "^4.3.1",
-    "@vue/cli-plugin-typescript": "^4.3.1",
-    "@vue/cli-plugin-unit-jest": "^4.3.1",
-    "@vue/cli-service": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^3.0.2",
+    "@typescript-eslint/parser": "^3.0.2",
+    "@vue/cli": "^4.4.1",
+    "@vue/cli-plugin-babel": "^4.4.1",
+    "@vue/cli-plugin-e2e-nightwatch": "^4.4.1",
+    "@vue/cli-plugin-eslint": "^4.4.1",
+    "@vue/cli-plugin-typescript": "^4.4.1",
+    "@vue/cli-plugin-unit-jest": "^4.4.1",
+    "@vue/cli-service": "^4.4.1",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@vue/test-utils": "^1.0.2",
+    "@vue/test-utils": "^1.0.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.0.0",
+    "eslint": "^7.1.0",
     "eslint-plugin-vue": "^6.2.2",
-    "lint-staged": "^10.2.2",
+    "lint-staged": "^10.2.6",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "ts-jest": "^26.0.0",
-    "typescript": "^3.9.2",
+    "typescript": "^3.9.3",
     "vue-eslint-parser": "^7.1.0",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/app/App.vue b/src/app/App.vue
index e78d7571..c2df3ca6 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -6,7 +6,7 @@
     :enabled="!fullSize"
   >
     <template slot="main">
-      <slideout style="z-index: 1;" :minimizedValue="!minimized"></slideout>
+      <slideout style="z-index: 1;" :minimizedValue="!minimized" @auth="showAuth = true"></slideout>
       <transition name="fade">
         <div class="chat-content" v-if="!minimized">
           <MessagePane
@@ -21,6 +21,7 @@
           <ReportDialog ref="reportDialog" />
         </div>
       </transition>
+      <OperLogin @login="operAuthenticate" v-if="showAuth" @cancel="showAuth=false" ref="login" />
     </template>
     <template slot="header">
       <div id="current-tab">{{ currentTab }}</div>
@@ -42,6 +43,9 @@
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
   import DraggableDiv from '@/components/DraggableDiv.vue';
+  import Message from '@/types/message';
+  import OperLogin from '@/components/OperLogin.vue';
+  import Ban from '@/types/Ban';
 
   Vue.use(BootstrapVue);
 
@@ -60,6 +64,7 @@
     MessagePane,
     MinimizationTriangle,
     OpenWindowButton,
+    OperLogin,
   },
 })
   export default class App extends Vue {
@@ -76,6 +81,12 @@
 
   fullSize = false;
 
+  showAuth = false;
+
+  get isOper() {
+    return this.$vxm.chat.oper;
+  }
+
   // For text in top bar
   get currentTab() {
     return this.$vxm.chat.chatChannel;
@@ -88,6 +99,7 @@
 
   $refs!: {
     reportDialog: ReportDialog;
+    login: OperLogin,
   };
 
   get slideoutOpen() {
@@ -112,6 +124,36 @@
     this.$vxm.chat.readChannel(channel);
   }
 
+  operAuthenticate({ username, password }: {username: string, password: string}) {
+    this.$vxm.chat.operLoginUser = username; // Sets creds used for authentification by chat.vuex
+    this.$vxm.chat.operLoginPassword = password;
+    this.$vxm.chat.operCommand(); // Set all nicks as opers
+    setTimeout(this.operLoginStatus, 200); // A precaution so messages are received properly
+  }
+
+  operLoginStatus() {
+    if (this.isOper) {
+      this.$refs.login.message = 'Login succeeded'; // Success message
+      this.$refs.login.showsMessage = true; // Modal shows success message
+      this.$vxm.chat.oper = true; // Makes sure it knows user is oper
+    } else {
+      this.$refs.login.authFailed = true; // Sets 'incorrect user/pass' message
+      this.$refs.login.password = ''; // Resets password field
+    }
+  }
+
+  get show() {
+    return this.$vxm.chat.auth;
+  }
+
+  @Watch('show')
+  showAuthentification() {
+    if (this.show) {
+      this.showAuth = true;
+      this.$vxm.chat.auth = false;
+    }
+  }
+
   mounted() {
     this.$vxm.chat.init({
       username: this.username,
@@ -134,6 +176,10 @@
     window.addEventListener('keydown', this.key);
   }
 
+  postScreenshot(url:string, puzzleName:string) {
+    this.postMessage(`[${puzzleName}](${url})`, '#help');
+  }
+
   @Watch('minimized')
   minimizedChanged() {
     this.fullSize = false;
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 4280e3e7..c3e3d8b8 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -19,6 +19,31 @@
         Ignore User
       </a>
     </li>
+    <li v-if="oper">
+      <a @click="ban">
+        Ban User
+      </a>
+    </li>
+    <li v-if="oper">
+      <a @click="unban">
+        Unban User
+      </a>
+    </li>
+    <li v-if="oper">
+      <a @click="kick">
+        Kick User
+      </a>
+    </li>
+    <li v-if="oper">
+      <a @click="quiet">
+        Quiet User
+      </a>
+    </li>
+    <li v-if="oper">
+      <a @click="unquiet">
+        Unquiet User
+      </a>
+    </li>
   </VueContext>
 </template>
 
@@ -46,6 +71,30 @@
       return this.message!.user;
     }
 
+    ban() {
+      this.$vxm.chat.ban(this.user);
+    }
+
+    quiet() {
+      this.$vxm.chat.quiet(this.user);
+    }
+
+    kick() {
+      this.$vxm.chat.kick(this.user);
+    }
+
+    unquiet() {
+      this.$vxm.chat.unquiet(this.user);
+    }
+
+    unban() {
+      this.$vxm.chat.unban(this.user);
+    }
+
+    get oper() {
+      return this.$vxm.chat.oper;
+    }
+
     get profileUrl(): string {
       return `http://${this.$vxm.chat.workbranch}/web/player/${this.user.uid}/`;
     }
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 24fbf2fc..da013068 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -37,6 +37,7 @@
   import { Component, Prop, Vue } from 'vue-property-decorator';
   import Message from '@/types/message';
   import Username from './Username.vue';
+  import User from '@/types/user';
   import ActionMenu from './ActionMenu.vue';
   import md from '@/tools/Markdown';
 
@@ -63,6 +64,11 @@
     }
 
     get formattedMessage(): string {
+      // If there are tags, remove them before the message is seen
+      if (this.messageHasTags(this.message.message)) {
+        const tagsStringPosition = this.message.message.search(/\[(.+,)*.+\]$/);
+        return md.renderInline(this.message.message.substring(0, tagsStringPosition));
+      } // If not, just show the message
       return md.renderInline(this.message.message);
     }
 
@@ -72,8 +78,19 @@
 
     get usernameColor() {
       if (this.isAction) return '#c0dce7';
-      if (this.message.tags) return this.message.tags['username-color'] ?? null;
-      return null;
+      const colorValue: string | null = this.parseMessageTags(this.message.message)[0];
+      return colorValue; // Color value is first message tag
+    }
+
+    parseMessageTags(message:string) { // Gets tags as array from message
+      const tagsStringPosition = message.search(/\[(.+,)*.+\]$/); // Searches for [...,...] at end of message
+      let tagsString = message.substring(tagsStringPosition); // Gets tags as a string
+      tagsString = tagsString.substring(1, tagsString.length - 1); // Removes brackets
+      return tagsString.split(','); // Returns array split by commas
+    }
+
+    messageHasTags(message:string) { // If a message has any tags
+      return message.match(/\[(.+,)*.+\]$/);
     }
 
     $refs!: {
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index d0f09597..ca56facf 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -3,7 +3,7 @@
     v-if="user"
     target="_blank"
     class="username"
-    :style="{ color: color || computedColor }"
+    :style="{ color: displayedColor }"
     :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
   >
     {{ user.username }}<slot/>
@@ -26,13 +26,60 @@
     private defaultColor = '#ffffff';
 
     get computedColor() {
-      const numUid = parseInt(this.user.uid, 10);
-      if (!numUid) return '#ffffff';
+      let numUid = parseInt(this.user.uid, 10);
+      /* Temporary */
+      if (!numUid) { // If uid isn't present, check the end of the username
+        numUid = parseInt(this.user.username.substring(this.user.username.lastIndexOf('_') + 1), 10);
+      }
+      if (!numUid && numUid !== 0) {
+        return '#ffffff';
+      }
 
       const colors = ['#f39191', '#f39691', '#f39b91', '#f39f91', '#f3a491', '#f3a891', '#f3ad91', '#f3b191', '#f3b691', '#f3ba91', '#f3bf91', '#f3c491', '#f3c891', '#f3cd91', '#f3d191', '#f3d691', '#f3da91', '#f3df91', '#f3e491', '#f3e891', '#f3ed91', '#f3f191', '#f0f391', '#ebf391', '#e7f391', '#e2f391', '#ddf391', '#d9f391', '#d4f391', '#d0f391', '#cbf391', '#c7f391', '#c2f391', '#bef391', '#b9f391', '#b4f391', '#b0f391', '#abf391', '#a7f391', '#a2f391', '#9ef391', '#99f391', '#94f391', '#91f393', '#91f398', '#91f39c', '#91f3a1', '#91f3a5', '#91f3aa', '#91f3ae', '#91f3b3', '#91f3b7', '#91f3bc', '#f391ba', '#f391b6', '#f391b1', '#f391ad', '#f391a8', '#f391a4', '#f3919f', '#f3919b', '#f39196'];
       const c = colors[numUid % colors.length];
       return c;
     }
+
+    get displayedColor() {
+      if (this.color?.includes('o')) { // Override for oper
+        return this.color.substring(0, 7);
+      }
+      let red;
+      let green;
+      let blue;
+      if (this.color && this.color.length === 7) { // If valid color (part 1)
+        red = this.color.substring(1, 3);
+        blue = this.color.substring(3, 5);
+        green = this.color.substring(5, 7);
+      } else {
+        return this.computedColor; // If invalid, return computed color
+      }
+      if (!red.match(/^[a-f0-9]{2}$/) || !green.match(/^[a-f0-9]{2}$/) || !blue.match(/^[a-f0-9]{2}$/)) { // If colors aren't valid hex string
+        return this.computedColor; // If invalid, return computed color
+      }
+      if (!this.validColor(red, green, blue)) { // If color doesn't have enough contrast
+        return this.computedColor; // Return computed
+      }
+       // After it's passed all that, return the color; if it somehow fails, return a computed
+      return this.color || this.computedColor;
+    }
+
+    validColor(red:string, green:string, blue:string) {
+      const backgroundValue = this.brightness(4, 52, 104); // Brightness of background
+      const colorValue = this.brightness( // Brightness of input color
+        parseInt(red, 16),
+        parseInt(green, 16),
+        parseInt(blue, 16),
+      );
+      // If it contrasts well enough
+      return Math.abs(colorValue - backgroundValue) > 20;
+      /* Note that the threshold is a little lower than in the color picker
+      to make sure any color from the picker works in the chat */
+    }
+
+    brightness(r:number, g:number, b:number) { // Brightness of a color
+      return (299 * r + 587 * g + 114 * b) / 1000;
+    }
   }
 </script>
 
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
new file mode 100644
index 00000000..577e59d8
--- /dev/null
+++ b/src/app/components/OperLogin.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="login panel">
+    <div class="trans-panel rounded-10" v-show="showsMessage">
+      <p> {{message}}</p>
+      <div
+          class="green-button"
+          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
+          @click="showsMessage = false; $emit('cancel')"
+        >
+        Continue
+      </div>
+    </div>
+    <div class="trans-panel rounded-10" v-show="!showsMessage">
+      <form>
+        <table>
+          <tr>
+            <td><span for="username">User:</span></td>
+            <td><input type="text" id="username" v-model="username"/></td>
+          </tr>
+          <tr>
+            <td><span for="password">Password:</span></td>
+            <td><input type="password" id="password" v-model="password"/></td>
+          </tr>
+        </table>
+        <p v-show="authFailed">Username or password incorrect</p>
+        <div
+          class="green-button"
+          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
+          @click="$emit('login', { password, username })"
+        >
+        Continue
+        </div>
+        <div
+          class="green-button"
+          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px;"
+          @click="$emit('cancel')"
+        >
+          Cancel
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+
+  @Component({
+    components: {},
+  })
+  export default class OperLogin extends Vue {
+    password: string = '';
+
+    username: string = '';
+
+    showsMessage = false;
+
+    message = '';
+
+    authFailed = false;
+  }
+</script>
+
+<style lang="scss">
+  .login {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 10px;
+    background-color:#043468;
+    border-radius:10px;
+    z-index:3;
+  }
+
+  td {
+    padding: 2px;
+  }
+
+  .blue-button,
+  .green-button {
+    padding: 4px 7px !important;
+  }
+</style>
diff --git a/src/app/components/Slideout/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
index d3e78908..aa963fcd 100644
--- a/src/app/components/Slideout/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
@@ -103,8 +103,8 @@
         parseInt(this.red, 10),
         parseInt(this.green, 10),
         parseInt(this.blue, 10),
-      );
-      return (backgroundValue - colorValue) < 0;
+      ) + 20;
+      return Math.abs(colorValue - backgroundValue) > 24;
     }
 
     // Sets color to a hex string. Used by color swatches.
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index e217dd5b..e660e703 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -22,7 +22,7 @@
         v-if="chatSelected"
       />
       <SlideoutUser v-if="userSelected"/>
-      <SlideoutSettings v-if="settingsSelected" />
+      <SlideoutSettings v-if="settingsSelected" @auth="$emit('auth')"/>
     </span>
   </div>
 </template>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index c6a15fd6..67287688 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="position:relative;">
+    <div style="position:relative; overflow-y:auto">
       <TabButton
         v-for="({name}, index) in messageTabs"
         :key="name"
@@ -91,4 +91,18 @@
   }
 </script>
 <style scoped>
+::-webkit-scrollbar {
+    width: 10px;
+    height:10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color:#343a40; /* Make scrollbar visible */
+  border-radius:5px;
+}
+
+::-webkit-scrollbar-corner {
+  background-color:#343a40;
+  border-radius:5px;
+}
 </style>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 8d6a8f07..2d9ea08b 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -130,6 +130,17 @@
         </tr>
       </table>
     </section>
+    <section>
+      <h3>Operator</h3>
+      <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
+      <button
+        @click="$emit('auth')"
+        style="{ fontSize:`${fontSize * 11 / 14}px` }"
+        class="green-button"
+        v-show="!isOper" >
+          Log in as operator
+      </button>
+    </section>
   </div>
 </template>
 <script lang="ts">
@@ -160,6 +171,10 @@
 
     markdownChatFeatures = true;
 
+    get isOper() {
+      return this.$vxm.chat.oper;
+    }
+
     // Gets a list of ignored users
     get ignoredUsers() {
       return this.$vxm.chat.ignoredUsers;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index a859b127..3835fcfe 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -10,7 +10,7 @@ import Message from '../types/message';
 import Connection from '@/tools/websocket';
 import BanStatus from '@/types/BanStatus';
 import User from '@/types/user';
-import SettingsModule from './settings.vuex';
+import Ban from '@/types/Ban';
 
 // For polyfill
 declare type BroadcastMessage = {
@@ -54,7 +54,7 @@ class ConnectionData {
   }
 }
 
-const channelNames = ['#general', '#off-topic', '#help', '#labs'] as const;
+const channelNames = ['#general', '#off-topic', '#help', '#labs', '#global', '#test'] as const;
 
 export default class ChatModule extends VuexModule {
   toBePosted: Message[] = [];
@@ -97,6 +97,19 @@ export default class ChatModule extends VuexModule {
 
   customEmoticons = ['😜', '🤔', '😮'];
 
+  oper = false;
+
+  operLoginUser = '';
+
+  operLoginPassword = '';
+
+  banList: Ban[] = [];
+
+  quietList: Ban[] = [];
+
+  auth = false;
+
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -110,7 +123,7 @@ export default class ChatModule extends VuexModule {
       };
     });
     // Creates channel through which everything is sent
-    this.broadcast = new BroadcastChannel('eterna');
+    this.broadcast = new BroadcastChannel('eterna-chat');
     // Message handler
     this.broadcast.onmessage = (ev) => {
       /* The only messages sent between tabs are channel names.
@@ -305,11 +318,43 @@ export default class ChatModule extends VuexModule {
         this.connectionData.currentTimer = 0;
       })
       .on('nick in use', this.onNickInUse)
-      .on('irc error', this.onIrcError);
+      .on('irc error', this.onIrcError)
+      .on('raw', (e) => {
+        if (e.from_server) {
+          const commandNumber = parseInt(e.line.substring(20, 23), 10);
+          if (e.line.match(/^:irc\.eternagame\.org .+\^\d{3} #*.* /)) {
+            const response = e.line.replace(/^:(\S+\s){3}/, '').split(' ');
+            const chan = response[0];
+            const mask = response[1];
+            switch (commandNumber) {
+              case 482: this.postMessage(new Message("You're not a channel operator/moderator")); break;
+              case 481: this.postMessage(new Message("You're not an IRC operator/moderator")); break;
+              default: break;
+            }
+          }
+        }
+      });
     this.client = client;
     this.connect();
   }
 
+  @action()
+  async setChannelOps() { // Sets +o for all nicks for all channels
+    // This.connectedUsers[this.currentUser.username].nicks returns a list of the user's nicks
+    // Converting the array to a set and then back removes duplicates
+    // Iterates through to make sure each nick for the user has proper permissions
+    Array.from(new Set(this.connectedUsers[this.currentUser.username]?.nicks)).forEach(i => {
+      // Iterates through all channels
+      channelNames.forEach(e => this.client?.raw(`SAMODE ${e} +o ${i}`));
+    });
+  }
+
+  @action()
+  async operCommand() {
+    this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
+    setTimeout(this.setChannelOps, 100);
+  }
+
   @action()
   async connect() {
     this.client!.connect();
@@ -335,13 +380,22 @@ export default class ChatModule extends VuexModule {
   async sendMessage({ rawMessage, channel }: { rawMessage: string; channel: string }) {
     const postMessage = (
       message: string,
-      { user = User.annonymous, isHistory = false, isAction = false } = {},
+      {
+        user = User.annonymous, isHistory = false, isAction = false,
+      } = {},
     ) => {
       this.postMessage(new Message(message, channel, user, isAction));
     };
     let message = rawMessage.trim();
+    const oldMessage = message;
+    message = `${message} [${this.usernameColor}]`; // Message with tags added on
     let isAction = false;
     // No posting as annon or if nothing has been actually posted
+    let notBanned = true;
+    if (this.banList.some(e => e.username.includes(this.currentUser.username))
+      || this.quietList.some(e => e.username.includes(this.currentUser.username))) {
+      notBanned = false;
+    }
     if (this.currentUser.username && message !== '') {
       let post = true;
       // Chat commands
@@ -405,10 +459,35 @@ export default class ChatModule extends VuexModule {
                 postMessage('Usage: `/emoticon-list`');
                 postMessage('Example: `/emoticon-list`');
                 break;
+              case 'ban':
+                postMessage(
+                  '`/ban`: Bans a user from a channel',
+                );
+                postMessage('Usage: `/ban <channel> <username>`');
+                postMessage('Example: `/ban #general Ahalb`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'unban':
+                postMessage(
+                  '`/ban`: Unbans a user from a channel',
+                );
+                postMessage('Usage: `/unban <channel> <username>`');
+                postMessage('Example: `/unban #general Ahalb`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'kick':
+                postMessage(
+                  '`/kick`: Kicks a user from a channel',
+                );
+                postMessage('Usage: `/kick <channel> <username>`');
+                postMessage('Example: `/kick #general Ahalb`');
+                postMessage('You must be an operator to use this command');
+                break;
               default:
                 postMessage('Available commands: help, me, ignore, ignore-list, unignore, change, emoticon');
                 postMessage('Type `/help <command>` for information on individual commands');
                 postMessage('Example: `/help ignore`');
+                postMessage(` You are ${this.oper ? '' : 'not'} logged in as an operator/moderator. Operators may use the \`/ban\`, \`/unban\`, and \`/kick\` commands`);
                 postMessage(
                   'Additional commands available via LinkBot (see the [wiki](http://eternawiki.org/wiki/index.php5/HELP) for more information)',
                 );
@@ -506,24 +585,148 @@ export default class ChatModule extends VuexModule {
           case 'emoticon-list':
             postMessage(`Your custom emoticons are ${this.customEmoticons[0]} (slot 1), ${this.customEmoticons[1]} (slot 2), and ${this.customEmoticons[2]} (slot 3).`);
             break;
+          case 'ban':
+            if (params.split(' ').length < 2) {
+              postMessage('Please include command parameters. Type `/help ban` for more usage instructions');
+              break;
+            }
+            if (this.oper) {
+              if (params.split(' ')[0] === '*') {
+                channelNames.forEach(c => {
+                  this.client?.ban(c, `*!${params.split(' ')[1]}@*`);
+                });
+              } else {
+                this.client?.ban(params.split(' ')[0], `*!${params.split(' ')[1]}@*`);
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to ban users.');
+            }
+            break;
+          case 'unban':
+            if (params.split(' ').length < 2) {
+              postMessage('Please include command parameters. Type `/help unban` for more usage instructions');
+              break;
+            }
+            if (this.oper) {
+              if (params.split(' ')[0] === '*') {
+                channelNames.forEach(c => {
+                  this.client?.unban(c, `*!${params.split(' ')[1]}@*`);
+                });
+              } else {
+                this.client?.unban(params.split(' ')[0], `*!${params.split(' ')[1]}@*`);
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to unban users.');
+            }
+            break;
+          case 'kick':
+            if (params.split(' ').length < 2) {
+              postMessage('Please include command parameters. Type `/help kick` for more usage instructions');
+              break;
+            }
+            if (this.oper) {
+              if (params.split(' ').length >= 2) {
+                this.connectedUsers[params.split(' ')[1]]?.nicks.forEach((e) => {
+                  if (params.split(' ')[0] === '*') {
+                    channelNames.forEach(c => {
+                      this.client?.raw(`KICK ${c} ${e}`);
+                    });
+                  } else {
+                    this.client?.raw(`KICK ${params.split(' ')[0]} ${e}`);
+                  }
+                });
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to kick users');
+            }
+            break;
+          case 'quiet':
+            if (this.oper) {
+              if (params.split(' ').length >= 2) {
+                if (params.split(' ')[0] === '*') {
+                  channelNames.forEach(c => {
+                    this.client?.raw(`MODE ${c} +b m;*!${params.split(' ')[1]}@*`);
+                  });
+                } else {
+                  this.client?.raw(`MODE ${params.split(' ')[0]} +b m;*!${params.split(' ')[1]}@*`);
+                }
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to quiet users');
+            }
+            break;
+          case 'unquiet':
+            if (this.oper) {
+              if (params.split(' ').length >= 2) {
+                if (params.split(' ')[0] === '*') {
+                  channelNames.forEach(c => {
+                    this.client?.raw(`MODE ${c} -b m;*!${params.split(' ')[1]}@*`);
+                  });
+                } else {
+                  this.client?.raw(`MODE ${params.split(' ')[0]} -b m;*!${params.split(' ')[1]}@*`);
+                }
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to unquiet users');
+            }
+            break;
+          case 'banlist':
+            if (this.oper) {
+              this.banList = [];
+              this.quietList = [];
+              channelNames.forEach((c) => {
+                this.client?.channel(c).banlist((e) => {
+                  // eslint-disable-next-line dot-notation
+                  e.bans.forEach((b) => {
+                    const ban = new Ban(b.banned, b.channel);
+                    if (ban.username.includes('m;')) {
+                      this.quietList.push(ban);
+                    } else {
+                      this.banList.push(ban);
+                    }
+                    postMessage(`${ban.username
+                      .replace('*!', '')
+                      .replace('@*', '')
+                      .replace('!*', ' (nick) ')
+                      .replace('m;', '(Quiet) ')} in ${ban.channel}`);
+                  });
+                });
+              });
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to view the ban list');
+            }
+            break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;
         }
       }
-
+      this.client?.channel(channel).banlist(e => {
+        e.bans.forEach(b => {
+          const ban = new Ban(b.banned, b.channel);
+          if (ban.username.startsWith('m;')) {
+            this.quietList.push(ban);
+          } else {
+            this.banList.push(ban);
+          }
+        });
+      });
       if (post && this.channels[channel] !== undefined) {
-        if (!this.channels[channel]!.banned) {
+        if (!this.channels[channel]!.banned && notBanned) {
           if (isAction) {
             this.client!.action(channel, `@test:123 ${message}`);
           } else {
             this.client!.say(channel, message);
           }
-          const msg = new Message(message, channel, this.currentUser, isAction);
-          if (this.usernameColor !== undefined && this.usernameColor !== '') {
-            msg.tags['username-color'] = this.usernameColor;
-          }
-          this.postMessage(msg);
+          this.postMessage(new Message(message, channel, this.currentUser, isAction));
+        } else if (this.quietList.some(e => e.username.includes(this.currentUser.username))) {
+          this.postMessage(new Message("Can't send messages because you are quieted"));
         } else {
           this.postMessage(new Message("Can't send messages because you are banned"));
         } // TODO
@@ -652,9 +855,52 @@ export default class ChatModule extends VuexModule {
           this.onUnbanned(event.target);
         }
       }
+      if (mode.mode === '+o') {
+        if (!this.oper) {
+          console.log(`You are an operator (${mode.param})`);
+          this.oper = true;
+        }
+      }
     });
   }
 
+  @action()
+  async ban(user:User) {
+    if (this.oper) {
+      this.client?.ban(this.chatChannel, `*!${user.username}@*`);
+    }
+  }
+
+  @action()
+  async kick(user:User) {
+    if (this.oper) {
+      this.connectedUsers[user.username]?.nicks.forEach((e) => {
+        this.client?.raw(`KICK ${this.chatChannel} ${e}`);
+      });
+    }
+  }
+
+  @action()
+  async quiet(user:User) {
+    if (this.oper) {
+      this.client?.raw(`MODE ${this.chatChannel} +b m;*!${user.username}@*`);
+    }
+  }
+
+  @action()
+  async unquiet(user:User) {
+    if (this.oper) {
+      this.client?.raw(`MODE ${this.chatChannel} -b m;*!${user.username}@*`);
+    }
+  }
+
+  @action()
+  async unban(user:User) {
+    if (this.oper) {
+      this.client?.unban(this.chatChannel, `*!${user.username}@*`);
+    }
+  }
+
   @action()
   async onIrcError(error: Irc.IrcErrorEventArgs) {
     console.error('IRC Error:', error);
diff --git a/src/app/types/Ban.ts b/src/app/types/Ban.ts
new file mode 100644
index 00000000..c084da98
--- /dev/null
+++ b/src/app/types/Ban.ts
@@ -0,0 +1,10 @@
+export default class Ban {
+  username: string;
+
+  channel: string;
+
+  constructor(user:string, chan:string) {
+    this.username = user;
+    this.channel = chan;
+  }
+}
diff --git a/src/app/types/modules/irc-framework/irc-framework.d.ts b/src/app/types/modules/irc-framework/irc-framework.d.ts
index 1f76fa76..e981f462 100644
--- a/src/app/types/modules/irc-framework/irc-framework.d.ts
+++ b/src/app/types/modules/irc-framework/irc-framework.d.ts
@@ -76,7 +76,7 @@ declare module 'irc-framework' {
 
     removeInvite(channel: string, mask: string): void;
 
-    banlist(channel: string, cb: (e: Event) => any): void;
+    banlist(channel: string, cb: (e: BanlistEventArgs) => any): void;
 
     ban(channel: string, mask: string): void;
 
@@ -292,7 +292,7 @@ declare module 'irc-framework' {
 
     mode(mode: string, extra_args?: string[]): void;
 
-    banlist(cb: (e: Event) => any): void;
+    banlist(cb: (event: BanlistEventArgs) => any): void;
 
     ban(mask: string): void;
 

From 59430b2ba6fecb77334b575874b2c095db1e66e0 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 4 Jun 2020 13:29:30 -0500
Subject: [PATCH 085/223] Private messages

---
 package-lock.json                             |  88 ++++-------
 package.json                                  |  10 +-
 src/app/App.vue                               |  21 ++-
 src/app/components/Messages/ActionMenu.vue    |  10 ++
 .../Messages/PrivateMessageModal.vue          |  93 +++++++++++
 src/app/components/Slideout/SlideoutChats.vue |  33 ++--
 src/app/components/Slideout/SlideoutUser.vue  |  13 +-
 .../components/Slideout/SlideoutUsername.vue  |  73 +++++++++
 src/app/components/TabButton.vue              |   2 +-
 src/app/store/chat.vuex.ts                    | 146 +++++++++++++-----
 10 files changed, 365 insertions(+), 124 deletions(-)
 create mode 100644 src/app/components/Messages/PrivateMessageModal.vue
 create mode 100644 src/app/components/Slideout/SlideoutUsername.vue

diff --git a/package-lock.json b/package-lock.json
index 4d891c82..865b630e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3990,9 +3990,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "14.0.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.5.tgz",
-      "integrity": "sha512-90hiq6/VqtQgX8Sp0EzeIsv3r+ellbGj4URKj5j30tLlZvRUpnAe9YbYnjl3pJM93GyXU0tghHhvXHq+5rnCKA=="
+      "version": "14.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.10.tgz",
+      "integrity": "sha512-Bz23oN/5bi0rniKT24ExLf4cK0JdvN3dH/3k0whYkdN4eI4vS2ZW/2ENNn2uxHCzWcbdHIa/GRuWQytfzCjRYw=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -4125,12 +4125,12 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.0.2.tgz",
-      "integrity": "sha512-ER3bSS/A/pKQT/hjMGCK8UQzlL0yLjuCZ/G8CDFJFVTfl3X65fvq2lNYqOG8JPTfrPa2RULCdwfOyFjZEMNExQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.1.0.tgz",
+      "integrity": "sha512-D52KwdgkjYc+fmTZKW7CZpH5ZBJREJKZXRrveMiRCmlzZ+Rw9wRVJ1JAmHQ9b/+Ehy1ZeaylofDB9wwXUt83wg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "3.0.2",
+        "@typescript-eslint/experimental-utils": "3.1.0",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
         "semver": "^7.3.2",
@@ -4146,33 +4146,33 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.0.2.tgz",
-      "integrity": "sha512-4Wc4EczvoY183SSEnKgqAfkj1eLtRgBQ04AAeG+m4RhTVyaazxc1uI8IHf0qLmu7xXe9j1nn+UoDJjbmGmuqXQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.1.0.tgz",
+      "integrity": "sha512-Zf8JVC2K1svqPIk1CB/ehCiWPaERJBBokbMfNTNRczCbQSlQXaXtO/7OfYz9wZaecNvdSvVADt6/XQuIxhC79w==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "3.0.2",
+        "@typescript-eslint/typescript-estree": "3.1.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.0.2.tgz",
-      "integrity": "sha512-80Z7s83e8QXHNUspqVlWwb4t5gdz/1bBBmafElbK1wwAwiD/yvJsFyHRxlEpNrt4rdK6eB3p+2WEFkEDHAKk9w==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.1.0.tgz",
+      "integrity": "sha512-NcDSJK8qTA2tPfyGiPes9HtVKLbksmuYjlgGAUs7Ld2K0swdWibnCq9IJx9kJN8JJdgUJSorFiGaPHBgH81F/Q==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "3.0.2",
-        "@typescript-eslint/typescript-estree": "3.0.2",
+        "@typescript-eslint/experimental-utils": "3.1.0",
+        "@typescript-eslint/typescript-estree": "3.1.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.0.2.tgz",
-      "integrity": "sha512-cs84mxgC9zQ6viV8MEcigfIKQmKtBkZNDYf8Gru2M+MhnA6z9q0NFMZm2IEzKqAwN8lY5mFVd1Z8DiHj6zQ3Tw==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.1.0.tgz",
+      "integrity": "sha512-+4nfYauqeQvK55PgFrmBWFVYb6IskLyOosYEmhH3mSVhfBp9AIJnjExdgDmKWoOBHRcPM8Ihfm2BFpZf0euUZQ==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -15827,9 +15827,9 @@
       }
     },
     "lint-staged": {
-      "version": "10.2.6",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.6.tgz",
-      "integrity": "sha512-2oEBWyPZHkdyjKcIv2U6ay80Q52ZMlZZrUnfsV0WTVcgzPlt3o2t5UFy2v8ETUTsIDZ0xSJVnffWCgD3LF6xTQ==",
+      "version": "10.2.9",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.9.tgz",
+      "integrity": "sha512-ziRAuXEqvJLSXg43ezBpHxRW8FOJCXISaXU//BWrxRrp5cBdRkIx7g5IsB3OI45xYGE0S6cOacfekSjDyDKF2g==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
@@ -15838,8 +15838,9 @@
         "cosmiconfig": "^6.0.0",
         "debug": "^4.1.1",
         "dedent": "^0.7.0",
+        "enquirer": "^2.3.5",
         "execa": "^4.0.1",
-        "listr2": "^2.0.2",
+        "listr2": "^2.1.0",
         "log-symbols": "^4.0.0",
         "micromatch": "^4.0.2",
         "normalize-path": "^3.0.0",
@@ -16260,25 +16261,19 @@
       }
     },
     "listr2": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-2.0.4.tgz",
-      "integrity": "sha512-oJaAcplPsa72rKW0eg4P4LbEJjhH+UO2I8uqR/I2wzHrVg16ohSfUy0SlcHS21zfYXxtsUpL8YXGHjyfWMR0cg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-2.1.0.tgz",
+      "integrity": "sha512-pWrbMLO+6jxGbgAasTLUzfRYdBaQvv6sNTWDfIX8ENBNmTwt/eafZ/LlJ66/dNaDnEhzCpWricLH4U9cjSAHYg==",
       "dev": true,
       "requires": {
-        "@samverschueren/stream-to-observable": "^0.3.0",
         "chalk": "^4.0.0",
-        "cli-cursor": "^3.1.0",
         "cli-truncate": "^2.1.0",
-        "elegant-spinner": "^2.0.0",
-        "enquirer": "^2.3.5",
         "figures": "^3.2.0",
         "indent-string": "^4.0.0",
         "log-update": "^4.0.0",
         "p-map": "^4.0.0",
-        "pad": "^3.2.0",
         "rxjs": "^6.5.5",
-        "through": "^2.3.8",
-        "uuid": "^7.0.2"
+        "through": "^2.3.8"
       },
       "dependencies": {
         "ansi-styles": {
@@ -16341,12 +16336,6 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
-        "elegant-spinner": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-2.0.0.tgz",
-          "integrity": "sha512-5YRYHhvhYzV/FC4AiMdeSIg3jAYGq9xFvbhZMpPlJoBsfYgrw2DSCYeXfat6tYBu45PWiyRr3+flaCPPmviPaA==",
-          "dev": true
-        },
         "emoji-regex": {
           "version": "8.0.0",
           "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -16464,12 +16453,6 @@
             "has-flag": "^4.0.0"
           }
         },
-        "uuid": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
-          "dev": true
-        },
         "wrap-ansi": {
           "version": "6.2.0",
           "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@@ -18912,15 +18895,6 @@
         }
       }
     },
-    "pad": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/pad/-/pad-3.2.0.tgz",
-      "integrity": "sha512-2u0TrjcGbOjBTJpyewEl4hBO3OeX5wWue7eIFPzQTg6wFSvoaHcBTTUY5m+n0hd04gmTCPuY0kCpVIVuw5etwg==",
-      "dev": true,
-      "requires": {
-        "wcwidth": "^1.0.1"
-      }
-    },
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
@@ -23025,9 +22999,9 @@
       }
     },
     "ts-jest": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.0.0.tgz",
-      "integrity": "sha512-eBpWH65mGgzobuw7UZy+uPP9lwu+tPp60o324ASRX4Ijg8UC5dl2zcge4kkmqr2Zeuk9FwIjvCTOPuNMEyGWWw==",
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.1.0.tgz",
+      "integrity": "sha512-JbhQdyDMYN5nfKXaAwCIyaWLGwevcT2/dbqRPsQeh6NZPUuXjZQZEfeLb75tz0ubCIgEELNm6xAzTe5NXs5Y4Q==",
       "dev": true,
       "requires": {
         "bs-logger": "0.x",
diff --git a/package.json b/package.json
index 7b52fbcf..23ce0025 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@types/irc": "^0.3.33",
-    "@types/node": "^14.0.5",
+    "@types/node": "^14.0.10",
     "@types/punycode": "^2.1.0",
     "@types/vuedraggable": "^2.23.1",
     "axios": "^0.19.2",
@@ -45,8 +45,8 @@
   "devDependencies": {
     "@types/jest": "^25.2.3",
     "@types/markdown-it": "10.0.1",
-    "@typescript-eslint/eslint-plugin": "^3.0.2",
-    "@typescript-eslint/parser": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^3.1.0",
+    "@typescript-eslint/parser": "^3.1.0",
     "@vue/cli": "^4.4.1",
     "@vue/cli-plugin-babel": "^4.4.1",
     "@vue/cli-plugin-e2e-nightwatch": "^4.4.1",
@@ -61,10 +61,10 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^7.1.0",
     "eslint-plugin-vue": "^6.2.2",
-    "lint-staged": "^10.2.6",
+    "lint-staged": "^10.2.9",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "ts-jest": "^26.0.0",
+    "ts-jest": "^26.1.0",
     "typescript": "^3.9.3",
     "vue-eslint-parser": "^7.1.0",
     "vue-template-compiler": "^2.6.11"
diff --git a/src/app/App.vue b/src/app/App.vue
index c2df3ca6..6ccb69cf 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -19,6 +19,7 @@
           />
           <ConnectingPopup />
           <ReportDialog ref="reportDialog" />
+          <PrivateMessageModal ref="privmsgmodal" v-show="showPrivMsgModal"/>
         </div>
       </transition>
       <OperLogin @login="operAuthenticate" v-if="showAuth" @cancel="showAuth=false" ref="login" />
@@ -46,6 +47,7 @@
   import Message from '@/types/message';
   import OperLogin from '@/components/OperLogin.vue';
   import Ban from '@/types/Ban';
+  import PrivateMessageModal from '@/components/Messages/PrivateMessageModal.vue';
 
   Vue.use(BootstrapVue);
 
@@ -65,6 +67,7 @@
     MinimizationTriangle,
     OpenWindowButton,
     OperLogin,
+    PrivateMessageModal,
   },
 })
   export default class App extends Vue {
@@ -83,6 +86,17 @@
 
   showAuth = false;
 
+  get showPrivMsgModal() {
+    return this.$vxm.chat.privMsgModal;
+  }
+
+  @Watch('showPrivMsgModal')
+  triggerStart() {
+    if (this.showPrivMsgModal) {
+      this.$refs.privmsgmodal.onStart();
+    }
+  }
+
   get isOper() {
     return this.$vxm.chat.oper;
   }
@@ -100,6 +114,7 @@
   $refs!: {
     reportDialog: ReportDialog;
     login: OperLogin,
+    privmsgmodal: PrivateMessageModal,
   };
 
   get slideoutOpen() {
@@ -119,7 +134,11 @@
   }
 
   postMessage(rawMessage: string, channel: string) {
-    this.$vxm.chat.sendMessage({ rawMessage, channel });
+    if (!channel.startsWith('#')) { // If it's a PRIVMSG
+      this.$vxm.chat.postToQuery(`${channel}|${rawMessage}`);
+    } else { // Otherwise
+      this.$vxm.chat.sendMessage({ rawMessage, channel });
+    }
     // When user sends a message, make sure it doesn't notify itself
     this.$vxm.chat.readChannel(channel);
   }
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index c3e3d8b8..f7b37e7a 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -44,6 +44,11 @@
         Unquiet User
       </a>
     </li>
+    <li >
+      <a @click="privmsg">
+        Private Message User
+      </a>
+    </li>
   </VueContext>
 </template>
 
@@ -91,6 +96,11 @@
       this.$vxm.chat.unban(this.user);
     }
 
+    privmsg() { // Opens up the private message modal
+      this.$vxm.chat.userToPrivMsg = this.user.username;
+      this.$vxm.chat.privMsgModal = true;
+    }
+
     get oper() {
       return this.$vxm.chat.oper;
     }
diff --git a/src/app/components/Messages/PrivateMessageModal.vue b/src/app/components/Messages/PrivateMessageModal.vue
new file mode 100644
index 00000000..b63e0bf6
--- /dev/null
+++ b/src/app/components/Messages/PrivateMessageModal.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="message panel">
+    <div class="trans-panel rounded-10">
+      <form>
+        <div id="user">To: {{username}}</div>
+        <textarea type="text" id="msg" name="msg" ref="ta" v-model="msg"/>
+        <div
+          class="green-button"
+          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
+          @click="send"
+        >
+        Continue
+        </div>
+        <div
+          class="green-button"
+          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px;"
+          @click="cancel"
+        >
+          Cancel
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  /* Taken from OperLogin and modified */
+  import { Component, Vue } from 'vue-property-decorator';
+  import Message from '@/types/message';
+  import BanStatus from '../../types/BanStatus';
+
+
+  @Component({
+    components: {},
+  })
+  export default class PrivateMessageModal extends Vue {
+    msg = 'Message';
+
+    get username() {
+      return this.$vxm.chat.userToPrivMsg;
+    }
+
+    onStart() {
+      this.$nextTick(() => this.$refs.ta.focus());
+      this.$refs.ta.setSelectionRange(0, this.$refs.ta.value.length);
+    }
+
+    $refs !: {
+      ta: HTMLTextAreaElement,
+    };
+
+    send() {
+      console.log(`Sending message ${this.msg} to username ${this.username} from modal`);
+      Array.from(new Set(this.$vxm.chat.connectedUsers[this.username]?.nicks)).forEach(n => {
+        console.log(`Posting message ${this.msg} to nick ${n} to query`);
+        this.$vxm.chat.postToQuery(`${n}|${this.msg}`);
+      });
+      this.$vxm.chat.privMsgModal = false;
+    }
+
+    cancel() {
+      this.$vxm.chat.privMsgModal = false;
+    }
+  }
+</script>
+
+<style lang="scss">
+  .message {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 10px;
+    background-color:#043468;
+    border-radius:10px;
+    z-index:3;
+  }
+
+  #msg {
+    min-width:150px;
+    min-height:24px;
+    margin:5px;
+  }
+
+  #user {
+    margin-bottom:5px;
+  }
+
+  .blue-button,
+  .green-button {
+    padding: 4px 7px !important;
+  }
+</style>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 67287688..06fa7b55 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -1,19 +1,17 @@
 <template>
-  <div>
-    <div style="position:relative; overflow-y:auto">
-      <TabButton
-        v-for="({name}, index) in messageTabs"
-        :key="name"
-        :isActive="activeTab === index"
-        :name="name.substr(1)"
-        :description="channelDescription(name)"
-        @input="activeTab = index"
-        v-on:click="update"
-        :class="{ notified:isNotified(name) }"
-      >
-        <Splitter />
-      </TabButton>
-    </div>
+  <div style="position:relative; overflow-y:auto; height:calc(100% - 40px)">
+    <TabButton
+      v-for="({name}, index) in messageTabs"
+      :key="name"
+      :isActive="activeTab === index"
+      :name="name"
+      :description="channelDescription(name)"
+      @input="activeTab = index"
+      v-on:click="update"
+      :class="{ notified:isNotified(name) }"
+    >
+      <Splitter />
+    </TabButton>
   </div>
 </template>
 <script lang="ts">
@@ -72,8 +70,11 @@
       if (description) { // If description exists, return it
         return description;
       }
+      if (!name.startsWith('#')) { // If it's a private message, use a custom description
+        return `Direct chat with ${name}`;
+      }
       // Remove hashtag
-      const trimmedName = name.substr(1);
+      const trimmedName = name.replace('#', '');
       // Return channel name with first letter capitalized + ' channel'
       return `${trimmedName.charAt(0).toUpperCase()}${trimmedName.substr(1)} channel`;
     }
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
index bbd119fb..88fbbcbb 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -2,9 +2,10 @@
   <div id="user-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <h3>Online ({{userCount}})</h3>
     <ul>
-      <li v-for="user in connectedUsers" :key="user.username">
-        <Username :user="user" />
-      </li>
+      <SlideoutUsername
+        v-for="user in connectedUsers"
+        :key="user.username"
+        :user="user" />
     </ul>
   </div>
 </template>
@@ -14,10 +15,16 @@
   } from 'vue-property-decorator';
   import Slideout from './Slideout.vue';
   import Username from '../Messages/Username.vue';
+  import ActionMenu from '../Messages/ActionMenu.vue';
+  import Message from '../../types/message';
+  import User from '@/types/user';
+  import SlideoutUsername from './SlideoutUsername.vue';
 
   @Component({
     components: {
       Username,
+      ActionMenu,
+      SlideoutUsername,
     },
   })
   export default class SlideoutUser extends Vue {
diff --git a/src/app/components/Slideout/SlideoutUsername.vue b/src/app/components/Slideout/SlideoutUsername.vue
new file mode 100644
index 00000000..3ff71f80
--- /dev/null
+++ b/src/app/components/Slideout/SlideoutUsername.vue
@@ -0,0 +1,73 @@
+<template>
+  <li
+    @mouseover="hover = true"
+    @mouseleave="hover = false"
+  >
+    <Username :user="user" />
+      <div style="overflow:hidden">
+      <a
+        class="chat-message-options"
+        @click.prevent="openContextMenu"
+        v-show="hover && user.username"
+      >
+        &vellip;
+      </a>
+      <ActionMenu
+        ref="contextMenu"
+        :message="messageFrom(user)"
+      />
+    </div>
+  </li>
+</template>
+<script lang="ts">
+  /* This is essentially a duplicate of UserMessage, just with the message removed */
+  import {
+    Vue, Component, Prop, Watch,
+  } from 'vue-property-decorator';
+  import ActionMenu from '../Messages/ActionMenu.vue';
+  import Message from '../../types/message';
+  import User from '@/types/user';
+  import Username from '../Messages/Username.vue';
+
+  @Component({
+    components: {
+      Username,
+      ActionMenu,
+    },
+  })
+  export default class SlideoutUsername extends Vue {
+    @Prop()
+    user !: User;
+
+    hover = '';
+
+    messageFrom(user:User) {
+      return new Message('Reporting user ', '', user);
+    }
+
+    $refs!: {
+      contextMenu: HTMLFormElement;
+    };
+
+    openContextMenu(e: MouseEvent) {
+      setTimeout(() => this.$refs.contextMenu.open(e));
+    }
+  }
+</script>
+<style scoped>
+  .chat-message-options {
+    user-select: none;
+    position: absolute;
+    top: -4px;
+    right:0px;
+    font-size: 20px;
+    display: block;
+    cursor: pointer;
+    overflow: visible;
+  }
+  li {
+    position:relative;
+    top:0;
+    left:0;
+  }
+</style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index d3c0d7e7..632b4068 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -3,7 +3,7 @@
     :class="{active: isActive}"
     @click="$emit('input');"
   >
-    <p class='channel-name'>#{{ name }}</p>
+    <p class='channel-name'>{{ name }}</p>
     <p class='channel-description'>{{ description }}</p>
     <slot />
   </Button>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 3835fcfe..c1a9c681 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -54,7 +54,8 @@ class ConnectionData {
   }
 }
 
-const channelNames = ['#general', '#off-topic', '#help', '#labs', '#global', '#test'] as const;
+// eslint-disable-next-line prefer-const
+let channelNames = ['#general', '#off-topic', '#help', '#labs', '#global', '#test'];
 
 export default class ChatModule extends VuexModule {
   toBePosted: Message[] = [];
@@ -79,8 +80,6 @@ export default class ChatModule extends VuexModule {
 
   ignoredUsers: string[] = [];
 
-  usersByNick: { [nick: string]: User } = {};
-
   tab: Number = 1; // Selected tab. One of the chat channels
 
   chatChannel: string = '#off-topic'; // Name of channel display in top bar
@@ -109,6 +108,9 @@ export default class ChatModule extends VuexModule {
 
   auth = false;
 
+  userToPrivMsg = '';
+
+  privMsgModal = false;
 
   constructor() {
     super();
@@ -128,7 +130,7 @@ export default class ChatModule extends VuexModule {
     this.broadcast.onmessage = (ev) => {
       /* The only messages sent between tabs are channel names.
       When a tab receives a message, it unignores the channel. */
-      this.readChannel(ev.message);
+      this.readChannel(`!${ev.message}`);
     };
     this.ignoredChannels = {};
     channelNames.forEach((e) => {
@@ -143,14 +145,22 @@ export default class ChatModule extends VuexModule {
 
   @mutation
   readChannel(channel: string) {
-    // Makes sure channel name corresponds to a channel
-    const trueChannel = this.channels[channel];
-    if (trueChannel) {
-      // Set notifications for that channel to false
-      trueChannel.notifications = false;
+    if (channel.startsWith('!')) { // If it came from BroadcastChannel
+      const trueChannel = this.channels[channel.substring(1)];
+      if (trueChannel) {
+        // Set notifications for that channel to false
+        trueChannel.notifications = false;
+      }
+    } else {
+      const trueChannel = this.channels[channel];
+      if (trueChannel) {
+        // Set notifications for that channel to false
+        trueChannel.notifications = false;
+      }
+      /* Only relay the message if it didn't come from BroadcastChannel
+      so there isn't a loop of messages */
+      this.broadcast.postMessage(new Message(channel));
     }
-    // When a channel is read, notify other tabs so they update
-    this.broadcast.postMessage(new Message(channel));
   }
 
   @mutation
@@ -349,10 +359,11 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  // Logs in as oper
   @action()
   async operCommand() {
     this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
-    setTimeout(this.setChannelOps, 100);
+    setTimeout(this.setChannelOps, 100); // Make sure events happen in order
   }
 
   @action()
@@ -562,7 +573,7 @@ export default class ChatModule extends VuexModule {
             }
             break;
           case 'emoticon':
-            if (!first || !second) {
+            if (!first || !second) { // Parameter check
               postMessage(
                 'Please include command parameters. Type `/help emoticon` for more usage instructions',
               );
@@ -591,19 +602,19 @@ export default class ChatModule extends VuexModule {
               break;
             }
             if (this.oper) {
-              if (params.split(' ')[0] === '*') {
-                channelNames.forEach(c => {
-                  this.client?.ban(c, `*!${params.split(' ')[1]}@*`);
+              if (params.split(' ')[0] === '*') { // If ban should be in all channels
+                channelNames.forEach(c => { // For each channel
+                  this.client?.ban(c, `*!${params.split(' ')[1]}@*`); // Ban the user's username
                 });
-              } else {
+              } else { // Otherwise, just ban them from the one channel
                 this.client?.ban(params.split(' ')[0], `*!${params.split(' ')[1]}@*`);
               }
             } else {
-              this.auth = true;
+              this.auth = true; // If not an oper, present the modal to log in
               postMessage('You are not an operator or moderator and do not have permission to ban users.');
             }
             break;
-          case 'unban':
+          case 'unban': // Exact same as ban, just replacing 'ban' with 'unban'
             if (params.split(' ').length < 2) {
               postMessage('Please include command parameters. Type `/help unban` for more usage instructions');
               break;
@@ -628,17 +639,17 @@ export default class ChatModule extends VuexModule {
             }
             if (this.oper) {
               if (params.split(' ').length >= 2) {
-                this.connectedUsers[params.split(' ')[1]]?.nicks.forEach((e) => {
+                this.connectedUsers[params.split(' ')[1]]?.nicks.forEach((e) => { // Kicks each nick
                   if (params.split(' ')[0] === '*') {
-                    channelNames.forEach(c => {
+                    channelNames.forEach(c => { // If user should be kicked from all channels
                       this.client?.raw(`KICK ${c} ${e}`);
                     });
-                  } else {
+                  } else { // Otherwise, kick from the one channel
                     this.client?.raw(`KICK ${params.split(' ')[0]} ${e}`);
                   }
                 });
               }
-            } else {
+            } else { // Same thing for all oper commands
               this.auth = true;
               postMessage('You are not an operator or moderator and do not have permission to kick users');
             }
@@ -647,7 +658,7 @@ export default class ChatModule extends VuexModule {
             if (this.oper) {
               if (params.split(' ').length >= 2) {
                 if (params.split(' ')[0] === '*') {
-                  channelNames.forEach(c => {
+                  channelNames.forEach(c => { // If user should be quieted in all channels
                     this.client?.raw(`MODE ${c} +b m;*!${params.split(' ')[1]}@*`);
                   });
                 } else {
@@ -659,7 +670,7 @@ export default class ChatModule extends VuexModule {
               postMessage('You are not an operator or moderator and do not have permission to quiet users');
             }
             break;
-          case 'unquiet':
+          case 'unquiet': // Same as quiet, but 'quiet' is replaced with 'unquiet' and '+b' with '-b'
             if (this.oper) {
               if (params.split(' ').length >= 2) {
                 if (params.split(' ')[0] === '*') {
@@ -677,23 +688,24 @@ export default class ChatModule extends VuexModule {
             break;
           case 'banlist':
             if (this.oper) {
-              this.banList = [];
+              this.banList = []; // Resets banlist and quietlist to avoid duplicates
               this.quietList = [];
-              channelNames.forEach((c) => {
+              channelNames.forEach((c) => { // For each channel
                 this.client?.channel(c).banlist((e) => {
                   // eslint-disable-next-line dot-notation
                   e.bans.forEach((b) => {
+                    // Type is not actualy IrcUser[]; it's an object. This code works
                     const ban = new Ban(b.banned, b.channel);
-                    if (ban.username.includes('m;')) {
-                      this.quietList.push(ban);
-                    } else {
+                    if (ban.username.includes('m;')) { // If a quiet ban
+                      this.quietList.push(ban); // Add to quiet list
+                    } else { // If not, add to ban list
                       this.banList.push(ban);
                     }
                     postMessage(`${ban.username
-                      .replace('*!', '')
+                      .replace('*!', '') // Remove hostmask formatting
                       .replace('@*', '')
-                      .replace('!*', ' (nick) ')
-                      .replace('m;', '(Quiet) ')} in ${ban.channel}`);
+                      .replace('!*', ' (nick) ') // If !* appears, the nick is banned, not a user
+                      .replace('m;', '(Quiet) ')} in ${ban.channel}`); // If m; appears, it's a quiet ban
                   });
                 });
               });
@@ -707,7 +719,7 @@ export default class ChatModule extends VuexModule {
             break;
         }
       }
-      this.client?.channel(channel).banlist(e => {
+      this.client?.channel(channel).banlist(e => { // Update banlist when message sent
         e.bans.forEach(b => {
           const ban = new Ban(b.banned, b.channel);
           if (ban.username.startsWith('m;')) {
@@ -717,14 +729,20 @@ export default class ChatModule extends VuexModule {
           }
         });
       });
-      if (post && this.channels[channel] !== undefined) {
-        if (!this.channels[channel]!.banned && notBanned) {
+      if (post) {
+        if (!this.channels[channel]?.banned && notBanned) {
           if (isAction) {
-            this.client!.action(channel, `@test:123 ${message}`);
+            this.client!.action(channel, `${message}`);
           } else {
             this.client!.say(channel, message);
           }
-          this.postMessage(new Message(message, channel, this.currentUser, isAction));
+          const name = User.parseUsername(channel);
+          // If it's a private message, send to the username, not the nick
+          if (this.connectedUsers[User.parseUsername(channel)]?.nicks.includes(channel)) {
+            this.postMessage(new Message(message, name, this.currentUser, isAction));
+          } else {
+            this.postMessage(new Message(message, channel, this.currentUser, isAction));
+          }
         } else if (this.quietList.some(e => e.username.includes(this.currentUser.username))) {
           this.postMessage(new Message("Can't send messages because you are quieted"));
         } else {
@@ -785,13 +803,60 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Sends a message to a private channel
+   * @param {string} message - The user and the message to be sent. Takes the form <nick>|<message>
+   */
+
+  @action()
+  async postToQuery(message:string) { /* @action() can only take 1 argument */
+    /* Splits argument into message and channel
+    Will only cause issues if people are putting | in their nick */
+    const chan = message.substring(0, message.indexOf('|'));
+    const msg = message.substring(message.indexOf('|') + 1);
+    if (this.channels[User.parseUsername(chan)] === undefined) {
+      Vue.set(this.channels, User.parseUsername(chan), {
+        name: User.parseUsername(chan),
+        maxHistoryMessages: 50,
+        notifications: false,
+        notificationsEnabled: true,
+        banned: BanStatus.BAN_STATUS_NORMAL,
+        postedMessages: [],
+      });
+    }
+    // Converting from array to set to array removes duplicates
+    Array.from(new Set(this.connectedUsers[User.parseUsername(chan)]?.nicks)).forEach(e => {
+      this.sendMessage({ rawMessage: msg, channel: e }); // Send message to all nicks
+    });
+  }
+
   // TODO: Insert messages based on id order
   @action()
   async onMessageReceived({
     message, nick, tags, time, type, target,
   }: Irc.MessageEventArgs) {
-    const channel = this.channels[target];
-    if (!channel) return;
+    let channel = this.channels[target];
+    // If it's a PRIVMSG
+    if (this.currentUser.username.includes(User.parseUsername(target)) && nick) {
+      if (!this.channels[User.parseUsername(nick)]) { // If the channel doesn't exist yet
+        // Vue.set is reactive
+        Vue.set(this.channels, User.parseUsername(nick), {
+          name: User.parseUsername(nick),
+          maxHistoryMessages: 50,
+          notifications: false,
+          notificationsEnabled: true,
+          postedMessages: [],
+          banned: BanStatus.BAN_STATUS_NORMAL,
+        });
+        channelNames.push(User.parseUsername(nick));
+      }
+      // Add the message
+      this.channels[User.parseUsername(nick)]?.postedMessages.push(new Message(message, this.currentUser.username, new User(User.parseUsername(nick)), type === 'action'));
+      channel = this.channels[User.parseUsername(nick)];
+    }
+    if (!channel) {
+      return;
+    }
     // Notifications should come in if slideout is open, user is in a different channel, or both
     if ((this.slideoutOpen || channel.name !== this.chatChannel) && channel.notificationsEnabled) {
       // Notify the channel
@@ -857,7 +922,6 @@ export default class ChatModule extends VuexModule {
       }
       if (mode.mode === '+o') {
         if (!this.oper) {
-          console.log(`You are an operator (${mode.param})`);
           this.oper = true;
         }
       }

From 13aa2ff7fab86f38ad4fa1084a40a254daba3834 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 4 Jun 2020 13:35:29 -0500
Subject: [PATCH 086/223] Updated comments

---
 src/app/store/chat.vuex.ts | 46 ++++++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index c1a9c681..f8162b3d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -139,10 +139,10 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  channelWithName(name: string) {
-    return this.channels[name];
-  }
-
+  /**
+   * Sets a channel as 'read', clearing notifications and syncing with other tabs
+   * @param channel {string} - The channel to be read
+   */
   @mutation
   readChannel(channel: string) {
     if (channel.startsWith('!')) { // If it came from BroadcastChannel
@@ -163,6 +163,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Turns notifications on for a channel
+   * @param channel {string} - The channel notifications should be turned on for
+   */
   @mutation
   notify(channel: string) {
     // Again, making sure there is an actual channel with the name
@@ -333,9 +337,6 @@ export default class ChatModule extends VuexModule {
         if (e.from_server) {
           const commandNumber = parseInt(e.line.substring(20, 23), 10);
           if (e.line.match(/^:irc\.eternagame\.org .+\^\d{3} #*.* /)) {
-            const response = e.line.replace(/^:(\S+\s){3}/, '').split(' ');
-            const chan = response[0];
-            const mask = response[1];
             switch (commandNumber) {
               case 482: this.postMessage(new Message("You're not a channel operator/moderator")); break;
               case 481: this.postMessage(new Message("You're not an IRC operator/moderator")); break;
@@ -348,8 +349,11 @@ export default class ChatModule extends VuexModule {
     this.connect();
   }
 
+  /**
+   * Sets +o for all nicks for all channels
+   */
   @action()
-  async setChannelOps() { // Sets +o for all nicks for all channels
+  async setChannelOps() {
     // This.connectedUsers[this.currentUser.username].nicks returns a list of the user's nicks
     // Converting the array to a set and then back removes duplicates
     // Iterates through to make sure each nick for the user has proper permissions
@@ -359,7 +363,9 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  // Logs in as oper
+  /**
+   * Sends the OPER command to log the user in as an operator
+   */
   @action()
   async operCommand() {
     this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
@@ -924,10 +930,16 @@ export default class ChatModule extends VuexModule {
         if (!this.oper) {
           this.oper = true;
         }
+      } else if (mode.mode === '-o') {
+        this.oper = false;
       }
     });
   }
 
+  /**
+   * Bans a user
+   * @param user {User} - The user to be banned
+   */
   @action()
   async ban(user:User) {
     if (this.oper) {
@@ -935,6 +947,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Kicks a user
+   * @param user {User} - The user to be kicked
+   */
   @action()
   async kick(user:User) {
     if (this.oper) {
@@ -944,6 +960,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Quiets a user
+   * @param user {User} - The user to be quieted
+   */
   @action()
   async quiet(user:User) {
     if (this.oper) {
@@ -951,6 +971,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Unquiets a user
+   * @param user {User} - The user to be unquieted
+   */
   @action()
   async unquiet(user:User) {
     if (this.oper) {
@@ -958,6 +982,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Unbans a user
+   * @param user {User} - The user to be unbanned
+   */
   @action()
   async unban(user:User) {
     if (this.oper) {

From 21ffaeb5b89d6bf234c0e2d4cb14182d28904e86 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 4 Jun 2020 17:45:31 -0500
Subject: [PATCH 087/223] History

---
 src/app/App.vue            |  2 +-
 src/app/store/chat.vuex.ts | 38 ++++++++++++++++++++++++++++++++++++--
 src/app/tools/Markdown.ts  | 16 +++++++++++++++-
 3 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 6ccb69cf..8c59e7a9 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -196,7 +196,7 @@
   }
 
   postScreenshot(url:string, puzzleName:string) {
-    this.postMessage(`[${puzzleName}](${url})`, '#help');
+    this.postMessage(`${puzzleName} ${url}`, '#help');
   }
 
   @Watch('minimized')
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index f8162b3d..24f05ad5 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -183,7 +183,10 @@ export default class ChatModule extends VuexModule {
       Object.values(this.channels).forEach((channel) => {
         channel?.postedMessages.push(message);
       });
-    } else {
+    // eslint-disable-next-line brace-style
+    } /* else if (message.target === 'notice') {
+      this.channels[this.chatChannel]?.postedMessages.push(message);
+    } */ else {
       this.channels[message.target]?.postedMessages.push(message);
     }
   }
@@ -324,7 +327,7 @@ export default class ChatModule extends VuexModule {
       // TODO: Make it call another function once we implement joining specific channels
       .on('kick', this.userKicked) // TODO;
       .on('message', this.onMessageReceived)
-      .on('notice', this.onMessageReceived)
+      .on('notice', this.onNoticeReceived)
       .on('mode', this.onModeMessageRecieved)
       .on('socket close', this.onDisconnect)
       .on('socket connected', () => {
@@ -343,6 +346,30 @@ export default class ChatModule extends VuexModule {
               default: break;
             }
           }
+          if (e.line.startsWith('@server-time')) { // Indicates a message containing history
+            const str = e.line
+              .substring(13) // Remove '@server-time='
+              .replace(/;batch=.{9}/, '') // Remove batch number
+              .replace(/@\S* /, '') // Removes hostname
+              .replace('PRIVMSG', ''); // Removes PRIVMSG
+            const parts = str.split(' ');
+            const time = parts[0];
+            const userInfo = parts[1];
+            const channel = parts[2];
+            const messageInfo = str.replace(time, '') // Remove time
+              .replace(userInfo, '') // Remove user
+              .replace(channel, '') // Remove channel
+              .trim()
+              .replace(/\u0001/, '') // Remove weird spacing
+              .replace(/^ACTION/, '/me'); // Replace ACTION with the more familiar /me
+            const userName = userInfo.substring(1, userInfo.indexOf('^')); // Gets the user name
+            const uid = userInfo
+              .replace(userName, '') // Removes username
+              .replace(/^:\^\d+!/, ''); // Removes surrounding characters
+            const msg = new Message(messageInfo.replace('/me ', ''), channel, new User(userName, uid), messageInfo.includes('/me'));
+            msg.time = new Date(time); // Sets the time of the message
+            this.postMessage(msg); // Post the message
+          }
         }
       });
     this.client = client;
@@ -836,6 +863,13 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @action()
+  async onNoticeReceived({
+    message,
+  }: Irc.MessageEventArgs) {
+    this.postMessage(new Message(message, 'notice'));
+  }
+
   // TODO: Insert messages based on id order
   @action()
   async onMessageReceived({
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 77e0838f..4868887e 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -2,6 +2,7 @@
 import MarkdownIt from 'markdown-it';
 
 const md = new MarkdownIt({
+  html: true,
   linkify: true,
   typographer: true,
 }).disable('image');
@@ -21,9 +22,22 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
   } else {
     tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
   }
+  let result = '';
+  tokens.forEach((t) => {
+    const { content } = t;
+    // If the link URL is an Eterna screenshot
+    if (content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
+      result = `<br><a target="_blank" href="${content}"><img src="${content}" style="max-width:90%"></a><br>`;
+      t.content = '';
+    }
+  });
+  if (result !== '' && result !== undefined) {
+    return result;
+  }
+  return defaultRender(tokens, idx, options, env, self);
 
   // pass token to default renderer.
-  return defaultRender(tokens, idx, options, env, self);
+  // return defaultRender(tokens, idx, options, env, self);
 };
 
 export default md;

From c729eb054b55cdaef4bf8dc7454be28cc4d78098 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 5 Jun 2020 16:46:45 -0500
Subject: [PATCH 088/223] Remember oper login, markdown, fixes

---
 package-lock.json                             | 17 ++++--
 package.json                                  |  5 +-
 src/app/App.vue                               | 53 +++++++++++++++---
 src/app/components/OperLogin.vue              |  9 ++-
 .../components/Slideout/SlideoutSettings.vue  |  1 +
 src/app/store/chat.vuex.ts                    | 55 +++++++++++--------
 src/app/tools/Markdown.ts                     |  4 +-
 .../modules/irc-framework/irc-framework.d.ts  |  6 +-
 8 files changed, 108 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 865b630e..23de39b8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3990,9 +3990,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "14.0.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.10.tgz",
-      "integrity": "sha512-Bz23oN/5bi0rniKT24ExLf4cK0JdvN3dH/3k0whYkdN4eI4vS2ZW/2ENNn2uxHCzWcbdHIa/GRuWQytfzCjRYw=="
+      "version": "14.0.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.11.tgz",
+      "integrity": "sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -13210,6 +13210,11 @@
         "postcss": "^7.0.14"
       }
     },
+    "idb": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-5.0.4.tgz",
+      "integrity": "sha512-g+CRa0NLB5R+VTd8UQK/J8eEPlZk82iwekJQOYA0bFJsc7TGDKyBywNmLBUdHPUyyazV1wN8DdHhSKzEX9Z9kQ=="
+    },
     "ieee754": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
@@ -23309,9 +23314,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "3.9.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz",
-      "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==",
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz",
+      "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==",
       "dev": true
     },
     "uc.micro": {
diff --git a/package.json b/package.json
index 23ce0025..eabccce7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@types/irc": "^0.3.33",
-    "@types/node": "^14.0.10",
+    "@types/node": "^14.0.11",
     "@types/punycode": "^2.1.0",
     "@types/vuedraggable": "^2.23.1",
     "axios": "^0.19.2",
@@ -22,6 +22,7 @@
     "broadcast-channel": "^3.1.0",
     "broadcastchannel-polyfill": "^1.0.1",
     "eventemitter3": "^4.0.4",
+    "idb": "^5.0.4",
     "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
     "markdown-it": "^11.0.0",
@@ -65,7 +66,7 @@
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "ts-jest": "^26.1.0",
-    "typescript": "^3.9.3",
+    "typescript": "^3.9.5",
     "vue-eslint-parser": "^7.1.0",
     "vue-template-compiler": "^2.6.11"
   },
diff --git a/src/app/App.vue b/src/app/App.vue
index 8c59e7a9..ddafa9bf 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -37,6 +37,9 @@
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
   import BootstrapVue from 'bootstrap-vue';
+  import {
+    openDB, deleteDB, wrap, unwrap,
+  } from 'idb';
   import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
@@ -143,21 +146,37 @@
     this.$vxm.chat.readChannel(channel);
   }
 
-  operAuthenticate({ username, password }: {username: string, password: string}) {
+  async operAuthenticate(
+    { username, password, remember }: {username: string, password: string, remember: boolean},
+  ) {
     this.$vxm.chat.operLoginUser = username; // Sets creds used for authentification by chat.vuex
     this.$vxm.chat.operLoginPassword = password;
+    if (remember) {
+      const database = await openDB('oper', 1, {
+        upgrade(db) {
+          const store = db.createObjectStore('oper');
+          store.createIndex('password', 'password');
+          store.createIndex('user', 'user');
+        },
+      });
+      database.put('oper', username, 'user');
+      database.put('oper', password, 'password');
+    }
     this.$vxm.chat.operCommand(); // Set all nicks as opers
     setTimeout(this.operLoginStatus, 200); // A precaution so messages are received properly
   }
 
   operLoginStatus() {
-    if (this.isOper) {
-      this.$refs.login.message = 'Login succeeded'; // Success message
-      this.$refs.login.showsMessage = true; // Modal shows success message
-      this.$vxm.chat.oper = true; // Makes sure it knows user is oper
+    if (this.$refs.login) {
+      if (this.isOper) {
+        this.$refs.login.message = 'Login succeeded'; // Success message
+        this.$refs.login.showsMessage = true; // Modal shows success message
+      } else {
+        this.$refs.login.authFailed = true; // Sets 'incorrect user/pass' message
+        this.$refs.login.password = ''; // Resets password field
+      }
     } else {
-      this.$refs.login.authFailed = true; // Sets 'incorrect user/pass' message
-      this.$refs.login.password = ''; // Resets password field
+      this.$vxm.chat.oper = this.isOper;
     }
   }
 
@@ -179,6 +198,26 @@
       workbranch: this.workbranch,
       uid: this.uid,
     });
+    setTimeout(this.logInOper, 1000);
+  }
+
+  async logInOper() {
+    const database = await openDB('oper', 1, {
+      upgrade(db) {
+        const store = db.createObjectStore('oper');
+        store.createIndex('password', 'password');
+        store.createIndex('user', 'user');
+      },
+    });
+    const pass = await database.get('oper', 'password');
+    const user = await database.get('oper', 'user');
+    if (user && pass) {
+      this.$vxm.chat.operLoginPassword = pass;
+      this.$vxm.chat.operLoginUser = user;
+      this.$vxm.chat.operCommand();
+      setTimeout(this.operLoginStatus, 150);
+      setTimeout(() => console.log(this.isOper), 200);
+    }
   }
 
   key(e:KeyboardEvent) {
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index 577e59d8..13ba73f2 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -21,12 +21,16 @@
             <td><span for="password">Password:</span></td>
             <td><input type="password" id="password" v-model="password"/></td>
           </tr>
+          <tr>
+            <td><span for="remember">Remember:</span></td>
+            <td><input type="checkbox" id="remember" v-model="remember"/></td>
+          </tr>
         </table>
         <p v-show="authFailed">Username or password incorrect</p>
         <div
           class="green-button"
           style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
-          @click="$emit('login', { password, username })"
+          @click="$emit('login', { password, username, remember })"
         >
         Continue
         </div>
@@ -45,11 +49,12 @@
 <script lang="ts">
   import { Component, Vue } from 'vue-property-decorator';
 
-
   @Component({
     components: {},
   })
   export default class OperLogin extends Vue {
+    remember = false;
+
     password: string = '';
 
     username: string = '';
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 2d9ea08b..3ca93c46 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -153,6 +153,7 @@
   import Slideout from './Slideout.vue';
   import { Channel } from '../../store/chat.vuex';
   import ColorPicker from './ColorPicker/ColorPicker.vue';
+
   @Component({
     components: {
       Username,
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 24f05ad5..e05b059b 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -182,12 +182,14 @@ export default class ChatModule extends VuexModule {
     if (message.target === '*') {
       Object.values(this.channels).forEach((channel) => {
         channel?.postedMessages.push(message);
+        this.channels[message.target]?.postedMessages.slice(0, 50);
       });
     // eslint-disable-next-line brace-style
     } /* else if (message.target === 'notice') {
       this.channels[this.chatChannel]?.postedMessages.push(message);
     } */ else {
       this.channels[message.target]?.postedMessages.push(message);
+      this.channels[message.target]?.postedMessages.slice(0, 50);
     }
   }
 
@@ -347,28 +349,7 @@ export default class ChatModule extends VuexModule {
             }
           }
           if (e.line.startsWith('@server-time')) { // Indicates a message containing history
-            const str = e.line
-              .substring(13) // Remove '@server-time='
-              .replace(/;batch=.{9}/, '') // Remove batch number
-              .replace(/@\S* /, '') // Removes hostname
-              .replace('PRIVMSG', ''); // Removes PRIVMSG
-            const parts = str.split(' ');
-            const time = parts[0];
-            const userInfo = parts[1];
-            const channel = parts[2];
-            const messageInfo = str.replace(time, '') // Remove time
-              .replace(userInfo, '') // Remove user
-              .replace(channel, '') // Remove channel
-              .trim()
-              .replace(/\u0001/, '') // Remove weird spacing
-              .replace(/^ACTION/, '/me'); // Replace ACTION with the more familiar /me
-            const userName = userInfo.substring(1, userInfo.indexOf('^')); // Gets the user name
-            const uid = userInfo
-              .replace(userName, '') // Removes username
-              .replace(/^:\^\d+!/, ''); // Removes surrounding characters
-            const msg = new Message(messageInfo.replace('/me ', ''), channel, new User(userName, uid), messageInfo.includes('/me'));
-            msg.time = new Date(time); // Sets the time of the message
-            this.postMessage(msg); // Post the message
+            setTimeout(() => { this.processAndPost(e.line); }, 0);
           }
         }
       });
@@ -376,6 +357,36 @@ export default class ChatModule extends VuexModule {
     this.connect();
   }
 
+  @action()
+  async processAndPost(raw:string) {
+    console.log(2);
+    const str = raw
+      .substring(13) // Remove '@server-time='
+      .replace(/;batch=.{9}/, '') // Remove batch number
+      .replace(/@\S* /, '') // Removes hostname
+      .replace('PRIVMSG', ''); // Removes PRIVMSG
+    const parts = str.split(' ');
+    const time = parts[0];
+    const userInfo = parts[1];
+    const channel = parts[2];
+    const messageInfo = str.replace(time, '') // Remove time
+      .replace(userInfo, '') // Remove user
+      .replace(channel, '') // Remove channel
+      .replace(/^\s+:/, '') // Remove weird spaces
+      .trim() // ^
+      // eslint-disable-next-line no-control-regex
+      .replace(/\u0001/, '') // ^^
+      .trimStart() // ^^^
+      .replace(/^ACTION/, '/me');
+    const userName = userInfo.substring(1, userInfo.indexOf('^'));
+    const uid = userInfo
+      .replace(userName, '')
+      .replace(/^:\^\d+!/, '');
+    const msg = new Message(messageInfo.replace('/me ', ''), channel, new User(userName, uid), messageInfo.includes('/me'));
+    msg.time = new Date(time);
+    this.postMessage(msg);
+  }
+
   /**
    * Sets +o for all nicks for all channels
    */
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 4868887e..46f82149 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -23,11 +23,11 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
     tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
   }
   let result = '';
-  tokens.forEach((t) => {
+  tokens.forEach((t: { content: any; }) => {
     const { content } = t;
     // If the link URL is an Eterna screenshot
     if (content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
-      result = `<br><a target="_blank" href="${content}"><img src="${content}" style="max-width:90%"></a><br>`;
+      result = `<br><a target="_blank" href="${content}"><img src="${content}" style="max-width:calc(100% - 25px)"></a><br>`;
       t.content = '';
     }
   });
diff --git a/src/app/types/modules/irc-framework/irc-framework.d.ts b/src/app/types/modules/irc-framework/irc-framework.d.ts
index e981f462..71dc3b09 100644
--- a/src/app/types/modules/irc-framework/irc-framework.d.ts
+++ b/src/app/types/modules/irc-framework/irc-framework.d.ts
@@ -336,7 +336,11 @@ declare module 'irc-framework' {
   }
   export interface BanlistEventArgs{
     channel: string;
-    bans: IrcUser[]; // TODO: check type
+    bans: BanlistBanObject[]; // TODO: check type
+  }
+  export interface BanlistBanObject {
+    banned:string;
+    channel:string
   }
   export interface TopicEventArgs{
     channel: string;

From cefa8773149818cd296c8a0bdf2ad009c6079e33 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 7 Jun 2020 22:18:34 -0500
Subject: [PATCH 089/223] History works, bug fixes, styling updates

---
 src/app/App.vue                               | 112 +----
 src/app/assets/_custom.scss                   | 451 +++++++++++++++++-
 src/app/components/Messages/UserMessage.vue   |  15 +-
 src/app/components/Panes/MessagePane.vue      |  25 +
 src/app/components/ScalableInput.vue          |   2 +
 .../Slideout/ColorPicker/ColorPicker.vue      |  12 +-
 .../Slideout/ColorPicker/ColorSlider.vue      |  32 +-
 .../components/Slideout/SlideoutSettings.vue  |  62 ++-
 src/app/store/chat.vuex.ts                    | 181 +++++--
 src/app/types/message.ts                      |   5 +-
 .../modules/irc-framework/irc-framework.d.ts  |   4 +-
 11 files changed, 706 insertions(+), 195 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index ddafa9bf..57cf0eaa 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -109,6 +109,13 @@
     return this.$vxm.chat.chatChannel;
   }
 
+  @Watch('currentTab')
+  loadHistory() {
+    if (this.$vxm.chat.channels[this.currentTab]!.postedMessages.length <= 50) {
+      this.$vxm.chat.loadMessagesForChannel(this.currentTab);
+    }
+  }
+
   // Gets current chat tab
   get activeTab() {
     return this.$vxm.chat.tab;
@@ -223,7 +230,15 @@
   key(e:KeyboardEvent) {
     if (e.code === 'Tab') { /* Watches for tabs. If a tab is detected, outline on input will remain on focus */
       this.$vxm.chat.tabbing = true;
-      window.removeEventListener('keydown', this.key);
+    }
+    if (e.code === 'ArrowUp') {
+      const channelMsgs = this.$vxm.chat.channels[this.currentTab]?.postedMessages;
+      let recent = channelMsgs?.filter(m => m.user.username === this.username).reverse()[0].message;
+      if (recent?.match(/\[#[a-f0-9]{6}\]$/)) {
+        recent = recent.substring(0, recent.length - 10);
+      }
+      this.$vxm.chat.updateMessage = recent || '';
+      this.$vxm.chat.inputUpdate = true;
     }
   }
 
@@ -259,102 +274,7 @@
   }
 </script>
 
-<style lang="scss">
-@import "~vue-context/src/sass/vue-context";
-textarea {
-  border-radius: 2px;
-  font-family: "Open Sans", "Helvetica Neue", Arial, Gulim;
-  font-size: 0.85rem;
-  border: 1px solid rgb(169, 169, 169);
-  width: calc(100% - 10px);
-  font-size: 14px !important;
-}
-</style>
-<style lang="scss">
-.green-button {
-  margin-bottom: 5px !important;
-  padding: 4px 7px !important;
-}
-
-.green-button,
-.green-button-interactive,
-.green-button-interactive2D {
-    background-color: #4FB748;
-    font-weight: normal;
-    position: relative;
-    text-align: center;
-    font-size: 12px;
-    padding: 0px;
-    text-transform: capitalized;
-    font-family: 'Open Sans', 'Century Gothic', 'Didact Gothic', Arial, sans-serif;
-}
 
-.green-button-bg {
-    position: absolute;
-}
-
-.green-button-interactive {
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    text-decoration: none;
-    box-shadow: 5px 5px #2C6628;
-}
-
-.green-button-interactive:hover,
-.green-button-interactive.hover {
-    background-color: #48A641;
-    box-shadow: 4px 4px #2C6628;
-    -webkit-transform: translate(1px, 1px);
-    -moz-transform: translate(1px, 1px);
-    transform: translate(1px, 1px);
-}
-
-.green-button-interactive:active,
-.green-button-interactive.active {
-    background-color: #48A641;
-    box-shadow: 2px 2px #2C6628;
-    -webkit-transform: translate(3px, 3px);
-    -moz-transform: translate(3px, 3px);
-    transform: translate(3px, 3px);
-}
-
-.green-button,
-.green-button-interactive2D {
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    text-decoration: none;
-    box-shadow: 0px 5px #2C6628;
-    margin: 0px 2.5px;
-}
-
-.green-button:hover,
-.green-button.hover,
-.green-button-interactive2D:hover,
-.green-button-interactive2D.hover {
-    background-color: #48A641;
-    box-shadow: 0px 4px #2C6628;
-    -webkit-transform: translate(0px, 1px);
-    -moz-transform: translate(0px, 1px);
-    transform: translate(0px, 1px);
-}
-
-.green-button:active,
-.green-button.active,
-.green-button-interactive2D:active,
-.green-button-interactive2D.active {
-    background-color: #48A641;
-    box-shadow: 0px 2px #2C6628;
-    -webkit-transform: translate(0px, 3px);
-    -moz-transform: translate(0px, 3px);
-    transform: translate(0px, 3px);
-}
-.green-button:disabled {
-  background-color:darken($color: (#48A641), $amount: 10%);
-  color:darken($color: (#fff), $amount: 20%);
-}
-</style>
 <style lang="scss" scoped>
 @import "./assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
diff --git a/src/app/assets/_custom.scss b/src/app/assets/_custom.scss
index 68888a0b..5aad9dea 100644
--- a/src/app/assets/_custom.scss
+++ b/src/app/assets/_custom.scss
@@ -22,7 +22,6 @@ $dark-blue: #05224b !default;
 $light-blue: #50b2dc !default;
 $med-blue: #2f94d1 !default;
 $med-dark-blue: #043468 !default;
-$dark-blue-transparent: #05224680;
 $green: #53b64e !default;
 $dark-green: #3d8e39 !default;
 $light-green: #97cc93 !default;
@@ -63,7 +62,455 @@ $colors: map-merge(
   $colors
 );
 
-// Default size
+
+$yiq-contrasted-threshold:  175 !default;
+
+// Links
+
+$link-color:                $yellow !default;
+
+// Body 
+
+$body-bg:                   $dark-blue !default;
+$body-color:                $white !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Open Sans", sans-serif !default;
+
+$font-size-base:              0.9375rem !default;
+
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                1.5rem !default;
+$h4-font-size:                1rem !default;
+
+// Tables
+
+$table-accent-bg:             $gray-200 !default;
+$table-active-bg:             $gray-300 !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default !default;
+$nav-link-padding-x:                2rem !default;
+$nav-link-disabled-color:           $gray-600 !default !default;
+
+$nav-tabs-border-color:             $gray-200 !default;
+$nav-tabs-link-active-bg:           $white !default;
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $yellow !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               darken($success, 15%) !default;
+$pagination-hover-border-color:     transparent !default;
+
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+
+$pagination-disabled-color:         $gray-200 !default;
+$pagination-disabled-bg:            lighten($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// Progress bars
+
+$progress-height:                   0.825rem !default;
+$progress-font-size:                0.625rem !default;
+
+// List group
+
+$list-group-hover-bg:               $blue !default;
+$list-group-disabled-bg:            $gray-900 !default;
+$list-group-active-bg:              $med-blue !default;
+$list-group-action-active-bg:       $med-dark-blue !default;
+$list-group-action-hover-color:     $white !default;
+
+// Close
+
+$close-color:                       $white !default;
+$close-text-shadow:                 none !default;
+
+$popover-bg:                        $dark !default;
+$popover-header-color:              $light !default;
+
+
+$dark-blue-transparent: #05224680;// Default size
 
 $container-width:300px !default;
 $container-height:500px !default;
+
+// Eterna theme
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic" !default;
+@import url($web-font-path);
+
+// Navbar =======================================================================
+
+.bg-primary {
+  .navbar-nav {
+    .nav-link:focus,
+    .nav-link:hover,
+    .active > .nav-link {
+      color: $yellow !important;
+    }
+  }
+}
+
+.bg-dark {
+  background-color: $med-dark-blue !important;
+  &.navbar-dark .navbar-nav {
+    .nav-link:focus,
+    .nav-link:hover,
+    .active > .nav-link {
+      color: $yellow !important;
+    }
+  }
+}
+
+.bg-light {
+  input {
+    background-color: $white;
+  }
+  color: $dark;
+}
+
+
+
+
+// Buttons =====================================================================
+
+.btn {
+  &-secondary,
+  &-secondary:hover,
+  &-warning,
+  &-warning:hover {
+    color: #fff;
+  }
+}
+
+.btn {
+  &-primary {
+    background-color: $green;
+    border-color: $green;
+  }
+  &-primary:hover {
+    background-color: $dark-green;
+    border-color: $dark-green;
+  }
+  &-outline-primary {
+    border-color: $green;
+    color: $green
+  }
+  &-outline-primary:hover {
+    background-color: $dark-green;
+    border-color: $dark-green;
+  }
+}
+
+.btn-primary.disabled, .btn-primary:disabled, .btn-primary.disabled:hover {
+  background-color: $green;
+  border-color: $green;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
+  background-color: $dark-green;
+  border-color: $dark-green;
+}
+
+// Typography ==================================================================
+
+.title {
+  font-weight: 700;
+  margin-top: 1rem;
+}
+
+.nav-link, .btn {
+  font-weight: 600;
+}
+
+// Tables ======================================================================
+
+.table {
+  &,
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: $white;
+  }
+
+  &-primary {
+    &, > th, > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &, > th, > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-light {
+    &, > th, > td {
+      background-color: $light;
+      color: $dark;
+    }
+  }
+
+  &-dark {
+    &, > th, > td {
+      background-color: $dark;
+    }
+  }
+
+  &-success {
+    &, > th, > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &, > th, > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &, > th, > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &, > th, > td {
+      background-color: $warning;
+    }
+  }
+
+  &-active {
+    &, > th, > td {
+      background-color: $table-active-bg;
+    }
+  }
+
+  &-hover {
+    :hover {
+      &, > th, > td {
+        color: $light;
+      }
+    }
+
+    .table-primary:hover {
+      &, > th, > td {
+        background-color: darken($primary, 5%);
+        color: $light;
+      }
+    }
+
+    .table-secondary:hover {
+      &, > th, > td {
+        background-color: darken($secondary, 5%);
+        color: $light;
+      }
+    }
+
+    .table-light:hover {
+      &, > th, > td {
+        background-color: darken($light, 5%);
+        color: $black;
+      }
+    }
+
+    .table-dark:hover {
+      &, > th, > td {
+        background-color: darken($dark, 5%);
+        color: $light;
+      }
+    }
+
+    .table-success:hover {
+      &, > th, > td {
+        background-color: darken($success, 5%);
+        color: $light;
+      }
+    }
+
+    .table-info:hover {
+      &, > th, > td {
+        background-color: darken($info, 5%);
+        color: $light;
+      }
+    }
+
+    .table-danger:hover {
+      &, > th, > td {
+        background-color: darken($danger, 5%);
+        color: $light;
+      }
+    }
+
+    .table-warning:hover {
+      &, > th, > td {
+        background-color: darken($warning, 5%);
+        color: $light;
+      }
+    }
+
+    .table-active:hover {
+      &, > th, > td {
+        background-color: $table-active-bg;
+        color: $light;
+      }
+    }
+
+  }
+}
+
+// Forms =======================================================================
+
+.form-control {
+  background-color: $dark-blue;
+}
+
+// Navs ========================================================================
+
+.nav-tabs {
+  .nav-link.active,
+  .nav-link.active:focus,
+  .nav-link.active:hover,
+  .nav-item.open .nav-link,
+  .nav-item.open .nav-link:focus,
+  .nav-item.open .nav-link:hover {
+    color: $primary;
+  }
+  .nav-item {
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+  }
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.breadcrumb {
+  background-color: $dark-blue;
+  border: 1px solid $med-blue;
+}
+
+.dropdown-menu {
+  background-color: $med-dark-blue;
+}
+
+.dropdown-item {
+  color: $white;
+}
+
+
+// Indicators ==================================================================
+
+.close {
+  text-decoration: none;
+  opacity: 0.4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.badge {
+  &-secondary,
+  &-warning {
+    color: #fff;
+  }
+}
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  // @each $color, $value in $theme-colors {
+    // &-#{$color} {
+      // @if $enable-gradients {
+        // background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      // } @else {
+        // background-color: $value;
+      // }
+    // }
+  // }
+
+  &-light {
+    &,
+    & a,
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+.modal .close{
+  color: $black;
+
+  &:not(:disabled):not(.disabled):hover,
+  &:not(:disabled):not(.disabled):focus {
+    color: $black;
+  }
+}
+
+.modal-content {
+  background-color: $primary;
+}
+
+.modal-header, .modal-footer {
+  border-color: $dark-blue;
+}
+
+.jumbotron, .list-group-item, .card {
+  background-color: $med-dark-blue;
+}
+
+.card-header {
+  font-weight: 700;
+}
+
+
+.alert-light, .alert-light a, .alert-light .alert-link {
+  color: $dark;
+}
\ No newline at end of file
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index da013068..169577e3 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -4,18 +4,23 @@
     @mouseleave="hover = false"
     @mouseover="hover = true"
   >
-    <div>
+    <div :style="{ textAlign: isNotice ? 'center' : 'left'}">
       <span :class="{'chat-message-action': isAction}">
         <Username
           :user="message.user"
           :color="usernameColor"
           :is-action="isAction"
+          v-if="!isNotice"
         >{{ isAction || !message.user.username ? '': ':' }}
         </Username>
-        &lrm;<span v-html="formattedMessage" />
+        &lrm;<span
+          :style="{
+            fontStyle:isNotice ? 'italic' : '',
+          }"
+          v-html="formattedMessage" />
       </span>
       &lrm;
-      <span class="message-time">[{{formattedTime}}]</span>
+      <span v-if="!isNotice" class="message-time">[{{formattedTime}}]</span>
     </div>
     <div style="overflow:hidden">
       <a
@@ -56,6 +61,10 @@
     @Prop({ default: false })
     private isHistory!: boolean;
 
+    get isNotice() {
+      return this.message.isNotice;
+    }
+
     @Prop()
     private message!: Message;
 
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 1ce70678..7ecc4049 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -24,6 +24,7 @@
           :disabled="!connectionData.connected || isBanned"
           @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
           ref="input"
+          @focused="updateFocus"
         />
       </template>
       </EmoticonBar>
@@ -99,6 +100,30 @@
       this.$refs.input.alone = this.anyChatFeatures;
     }
 
+    get updateMessage() {
+      return this.$vxm.chat.updateMessage;
+    }
+
+    get inputUpdate() {
+      return this.$vxm.chat.inputUpdate;
+    }
+
+    updateFocus(to:boolean) {
+      this.focused = to;
+    }
+
+    focused = false;
+
+    @Watch('inputUpdate')
+    update() {
+      if (this.updateMessage.trim() !== '' && this.inputUpdate && !this.focused) {
+        this.$refs.input.value = this.updateMessage;
+        this.newMessage = this.updateMessage;
+        this.$refs.input.$refs.textarea.value = this.updateMessage;
+        this.$nextTick(() => { this.$vxm.chat.inputUpdate = false; });
+      }
+    }
+
     // For send button
     send() {
       this.$emit('postMessage', this.newMessage);
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 74c8eec8..e125cd89 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -16,6 +16,8 @@
       :disabled="disabled"
       @input="$emit('input', $event.target.value);"
       ref="textarea"
+      @focus="$emit('focused', true)"
+      @blur="$emit('focused', false)"
     />
     <SendButton @send="send"/>
     <div
diff --git a/src/app/components/Slideout/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
index aa963fcd..e9d34dbb 100644
--- a/src/app/components/Slideout/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorPicker.vue
@@ -2,22 +2,22 @@
   <div id='picker'>
     <ColorSlider
       id='red'
-      gradientStart="#200"
-      gradientEnd="#a00"
+      gradientStart="#300"
+      gradientEnd="#c00"
       @sliderChanged="redChanged"
       colorID="red"
       ref="red" />
     <ColorSlider
       id='green'
-      gradientStart='#020'
-      gradientEnd='#0a0'
+      gradientStart='#030'
+      gradientEnd='#0c0'
       @sliderChanged="greenChanged"
       colorID="green"
       ref="green" />
     <ColorSlider
       id='blue'
-      gradientStart='#002'
-      gradientEnd='#00a'
+      gradientStart='#003'
+      gradientEnd='#00c'
       @sliderChanged="blueChanged"
       colorID="blue"
       ref="blue" />
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
index 6a480798..ed7f4508 100644
--- a/src/app/components/Slideout/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -7,7 +7,7 @@
       :style='{ background:getGradient()}'>
     <p
       class='value-thumb'
-      :style="{ left:calculateOffset() }"
+      :style="{ left:calculateOffset }"
     >
       {{ sliderValue }}
     </p> <br>
@@ -34,8 +34,12 @@
 
     defaultColors = ['#f3a891', '#f3c491', '#f3df91', '#e2f391', '#bef391', '#91f3bc', '#f391ba', '#f39196'];
 
-    calculateOffset() { // Position of text on slider thumb
-      return `${this.sliderValue / 5 - 93}px`;
+    get calculateOffset() { // Position of text on slider thumb
+      const percent = this.sliderValue / (255); // Slider value as percent
+      // Slider width - thumb width. Means slider can go from 0 to 80 pixels
+      const range = (120 - 40);
+      const percentPixels = percent * range; //
+      return `${percentPixels + 1}px`;
     }
 
     @Watch('sliderValue') // Updates parent, ColorPicker
@@ -73,7 +77,13 @@
   }
 </script>
 <style scoped>
-.slider { /* Sliders for color values */
+  .color-slider-container {
+    position:relative;
+    height:15px;
+    margin:8px;
+    margin-left:0;
+  }
+  .slider { /* Sliders for color values */
     -webkit-appearance: none;
     appearance: none;
     outline: none;
@@ -82,7 +92,8 @@
     height:15px;
     margin:2px;
     margin-left:0px;
-    width:90px;
+    width:120px;
+    padding:0;
   }
   .slider::-webkit-slider-thumb { /* Draggable part of slider */
     -webkit-appearance: none;
@@ -90,11 +101,14 @@
     background-color:#7b8a8b;
     width:40px;
     height:15px;
+    border-radius:2px;
   }
   .slider::-moz-range-thumb { /* Draggable part of slider (for firefox compatibility) */
     background-color:#7b8a8b;
+    appearance: none;
     width:40px;
-    height:15px;
+    height:px;
+    border-radius:2px;
   }
   .slider:focus { /* Avoids unwanted outlines */
     outline:none;
@@ -102,7 +116,7 @@
   }
   /* Overlays that show the value of the slider on top of the draggable part of the slider */
   .value-thumb {
-    position:relative;
+    position:absolute;
     /* Disables clicks or highlights to the text, so they 'pass through' to the slider */
     pointer-events:none;
     overflow-x:hidden;
@@ -111,8 +125,6 @@
     display:inline-block;
     margin:0px;
     font-size: 14px !important;
-    height:17px;
-    top:-1px;
-    bottom:0;
+    height:15px;
   }
 </style>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 3ca93c46..ae51bb7a 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -2,22 +2,22 @@
   <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <section>
       <h3>Text Size</h3>
-      <input v-model="size" type=number min=10 max=22>
+      <input v-model="size" type=number min=10 max=18>
       <p id='font-size-p'>Default is 14</p>
       <p
         id='font-warning'
-        v-show="size < 10 || size > 22" >
-        Font size must be a number, greater than 10, and less than 22
+        v-show="size < 10 || size > 18" >
+        Font size must be a number, greater than 10, and less than 18
       </p>
     </section>
     <section>
-      <h3>Ignored List</h3>
+      <h3>Ignored</h3>
       <ul>
         <li v-for="user in ignoredUsers" :key="user.Username">
           {{ user }}
           <button
             :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-            class='unignore-user green-button'
+            class='unignore-user btn settings-button'
             v-on:click="unignore(user)" >
             Unignore
           </button>
@@ -25,7 +25,7 @@
         <li v-show="!anyIgnoredUsers">No users ignored</li>
         <button
           :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-          class='unignore-user green-button'
+          class='unignore-user btn settings-button'
           v-on:click="unignore('*')"
           v-show="anyIgnoredUsers"
         >
@@ -41,10 +41,10 @@
           <td>{{channel.name}}</td>
           <td>
             <button
-              style="width:calc(100% - 6px)"
+              style="width:calc(100% - 2px)"
               @click="toggleNotificationsEnabled(channel.name)"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="green-button"
+              class="btn settings-button"
             >
               {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
             </button>
@@ -52,22 +52,23 @@
         </tr>
         <tr>
           <td class='footer'>
-            <button style="width:width:calc(100% - 6px)"
+            <button
+              style="width:calc(100% - 0px)"
               :disabled="anyNotificationsDisabled"
               @click="enableAll"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="green-button"
+              class="btn settings-button"
             >
               Enable all
             </button>
           </td>
           <td class='footer'>
             <button
-              style="width:width:calc(100% - 6px)"
+              style="width:calc(100% - 0px)"
               :disabled="anyNotificationsEnabled"
               @click="disableAll"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="green-button"
+              class="btn settings-button"
             >
               Disable all
             </button>
@@ -78,14 +79,14 @@
       <p>
         This will appear in the page title if you have notifications
       </p>
-      <input type=text v-model="indicator">
+      <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
     </section>
     <section>
       <h3>Username Color</h3>
       <ColorPicker />
     </section>
     <section>
-      <h3>Chat Features</h3>
+      <h3>Toolbar Features</h3>
       <p>
         These enable you to send emoticons and formatted text.
       </p>
@@ -95,7 +96,7 @@
             <button
               @click="toggleMarkdown"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="green-button" >
+              class="btn settings-button" >
               {{markdownChatFeatures ? 'Disable' : 'Enable'}} markdown
             </button>
           </td>
@@ -103,7 +104,7 @@
             <button
               @click="toggleEmoticons"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="green-button feature-button" >
+              class="btn settings-button feature-button" >
               {{emoticonChatFeatures ? 'Disable' : 'Enable'}} emoticons
             </button>
           </td>
@@ -114,7 +115,7 @@
               @click="disableAllChatFeatures"
               :disabled="!allChatFeatures"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="green-button feature-button" >
+              class="btn settings-button feature-button" >
               Disable all
             </button>
           </td>
@@ -123,7 +124,8 @@
               @click="enableAllChatFeatures"
               :disabled="allChatFeatures"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="green-button feature-button" >
+              style="margin-top:1px;"
+              class="btn settings-button feature-button" >
               Enable all
            </button>
           </td>
@@ -135,8 +137,8 @@
       <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
       <button
         @click="$emit('auth')"
-        style="{ fontSize:`${fontSize * 11 / 14}px` }"
-        class="green-button"
+        :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+        class="btn settings-button"
         v-show="!isOper" >
           Log in as operator
       </button>
@@ -147,6 +149,7 @@
   import {
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
+  import BootstrapVue from 'bootstrap-vue';
   import Username from '@/components/Messages/Username.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
   import SlideoutButton from './SlideoutButton.vue';
@@ -154,6 +157,8 @@
   import { Channel } from '../../store/chat.vuex';
   import ColorPicker from './ColorPicker/ColorPicker.vue';
 
+  Vue.use(BootstrapVue);
+
   @Component({
     components: {
       Username,
@@ -280,7 +285,7 @@
     @Watch('size')
     updateFontSize() {
        // Only update if valid font size
-      if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 22) {
+      if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 18) {
         this.$vxm.settings.fontSize = parseInt(this.size, 10);
         localStorage.fontSize = JSON.stringify(this.size);
       }
@@ -288,11 +293,11 @@
 
     get fontSize() {
       const numSize = parseInt(this.size, 10); // Font size as an int
-      if (numSize >= 10 && numSize <= 22) {
+      if (numSize >= 10 && numSize <= 18) {
         return numSize;
       }
-      if (numSize >= 22) {
-        return 22; // If font size greater than 22, set to maximum of 22
+      if (numSize >= 18) {
+        return 18; // If font size greater than 18, set to maximum of 18
       }
       if (numSize <= 10) {
         return 10; // If font size less than 10, set to minimum of 10
@@ -376,7 +381,13 @@
     }
   }
 </script>
-<style scoped>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+.settings-button {
+  background-color:$green;
+}
 #font-size-p { /* 'Default is 14' text */
   vertical-align: mid;
   margin-left:2px;
@@ -434,6 +445,7 @@ td { /* Table cell in notifications settings section */
 }
 table {
   margin-top:2px;
+  margin-bottom:2px;
 }
 .feature-button-container {
   padding:2px;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index e05b059b..a6abedb4 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -5,6 +5,7 @@ import {
 } from 'vuex-class-component';
 import toBool from 'to-bool';
 import Vue from 'vue';
+import { Component, Prop, Watch } from 'vue-property-decorator';
 import { BroadcastChannel } from 'broadcast-channel';
 import Message from '../types/message';
 import Connection from '@/tools/websocket';
@@ -80,9 +81,9 @@ export default class ChatModule extends VuexModule {
 
   ignoredUsers: string[] = [];
 
-  tab: Number = 1; // Selected tab. One of the chat channels
+  tab: Number = 5; // Selected tab. One of the chat channels
 
-  chatChannel: string = '#off-topic'; // Name of channel display in top bar
+  chatChannel: string = '#test'; // Name of channel display in top bar
 
   slideoutOpen = false; // Whether slideout is open. Updated by App.vue
 
@@ -92,13 +93,14 @@ export default class ChatModule extends VuexModule {
 
   usernameColor: string = '';
 
+  // Whether user has clicked the tab key - used for enabling outlines for accesibility
   tabbing = false;
 
   customEmoticons = ['😜', '🤔', '😮'];
 
-  oper = false;
+  oper = false; // Whether user is logged in as oper
 
-  operLoginUser = '';
+  operLoginUser = ''; // Oper login credentials
 
   operLoginPassword = '';
 
@@ -106,11 +108,17 @@ export default class ChatModule extends VuexModule {
 
   quietList: Ban[] = [];
 
-  auth = false;
+  auth = false; // When oper login modal should show
 
-  userToPrivMsg = '';
+  userToPrivMsg = ''; // User being private messaged
 
-  privMsgModal = false;
+  privMsgModal = false; // Whether to show the private message modal
+
+  updateMessage = ''; // The updated message to be put in the input when the user has pressed the up arrow
+
+  inputUpdate = false; // Whether the user has pressed the up arrow and the input should be updated
+
+  rawHistoryMessages: string[] = []; // Stores history messages
 
   constructor() {
     super();
@@ -184,10 +192,7 @@ export default class ChatModule extends VuexModule {
         channel?.postedMessages.push(message);
         this.channels[message.target]?.postedMessages.slice(0, 50);
       });
-    // eslint-disable-next-line brace-style
-    } /* else if (message.target === 'notice') {
-      this.channels[this.chatChannel]?.postedMessages.push(message);
-    } */ else {
+    } else {
       this.channels[message.target]?.postedMessages.push(message);
       this.channels[message.target]?.postedMessages.slice(0, 50);
     }
@@ -338,18 +343,16 @@ export default class ChatModule extends VuexModule {
       })
       .on('nick in use', this.onNickInUse)
       .on('irc error', this.onIrcError)
-      .on('raw', (e) => {
+      .on('raw', async (e) => {
         if (e.from_server) {
           const commandNumber = parseInt(e.line.substring(20, 23), 10);
           if (e.line.match(/^:irc\.eternagame\.org .+\^\d{3} #*.* /)) {
-            switch (commandNumber) {
-              case 482: this.postMessage(new Message("You're not a channel operator/moderator")); break;
-              case 481: this.postMessage(new Message("You're not an IRC operator/moderator")); break;
+            switch (commandNumber) { // Might be useful in the future
               default: break;
             }
           }
           if (e.line.startsWith('@server-time')) { // Indicates a message containing history
-            setTimeout(() => { this.processAndPost(e.line); }, 0);
+            this.rawHistoryMessages.push(e.line); // Add it to the list
           }
         }
       });
@@ -357,33 +360,35 @@ export default class ChatModule extends VuexModule {
     this.connect();
   }
 
+  /**
+   * Loads messages from history for a channel
+   * @param channel {string} - The channel history messages should be loaded for
+   */
+  @action()
+  async loadMessagesForChannel(channel:string) {
+    // For all raw messages for the given channel
+    this.rawHistoryMessages.filter(e => e.split(' ')[3] === channel).forEach(e => {
+      this.processAndPost(e);
+    });
+  }
+
+  /**
+   * Takes in a raw string from the server and parses it into a history message that it posts
+   * @param raw - The raw string to parse and post to the chat
+   */
   @action()
   async processAndPost(raw:string) {
-    console.log(2);
-    const str = raw
-      .substring(13) // Remove '@server-time='
-      .replace(/;batch=.{9}/, '') // Remove batch number
-      .replace(/@\S* /, '') // Removes hostname
-      .replace('PRIVMSG', ''); // Removes PRIVMSG
+    const str = raw;
     const parts = str.split(' ');
-    const time = parts[0];
-    const userInfo = parts[1];
-    const channel = parts[2];
-    const messageInfo = str.replace(time, '') // Remove time
-      .replace(userInfo, '') // Remove user
-      .replace(channel, '') // Remove channel
-      .replace(/^\s+:/, '') // Remove weird spaces
-      .trim() // ^
-      // eslint-disable-next-line no-control-regex
-      .replace(/\u0001/, '') // ^^
-      .trimStart() // ^^^
-      .replace(/^ACTION/, '/me');
-    const userName = userInfo.substring(1, userInfo.indexOf('^'));
-    const uid = userInfo
-      .replace(userName, '')
-      .replace(/^:\^\d+!/, '');
-    const msg = new Message(messageInfo.replace('/me ', ''), channel, new User(userName, uid), messageInfo.includes('/me'));
-    msg.time = new Date(time);
+    const time = parts[0].substring(13, 37);
+    const channel = parts[3];
+    const message = str.substring(str.indexOf(channel) + channel.length + 2);
+    const user = parts[1].substring(1, parts[1].indexOf('@'));
+    const username = user.substring(0, user.lastIndexOf('!'));
+    const uid = user.substring(user.lastIndexOf('!') + 1);
+    const date = new Date(time);
+    const msg = new Message(message.replace('/me ', ''), channel, new User(User.parseUsername(username), uid), message.includes('/me'));
+    msg.time = date;
     this.postMessage(msg);
   }
 
@@ -455,6 +460,7 @@ export default class ChatModule extends VuexModule {
       let post = true;
       // Chat commands
       if (message.startsWith('/')) {
+        message = message.replace(/\[.+\]$/, '');
         post = false;
         let parts = message.match(/^\/([^ ]+)/);
         const command = parts ? parts[1] : '';
@@ -472,7 +478,7 @@ export default class ChatModule extends VuexModule {
                 break;
               case 'ignore':
                 postMessage(
-                  "`/ignore`: Don't show messages from a particular message. Show currently ignored users with `/ignore-list`. Unignore message with `/unignore.`",
+                  "`/ignore`: Don't show messages from a particular user. Show currently ignored users with `/ignore-list`. Unignore user with `/unignore.`",
                 );
                 postMessage('Usage: `/ignore <username>`');
                 postMessage('Example: `/ignore player1`');
@@ -516,33 +522,71 @@ export default class ChatModule extends VuexModule {
                 break;
               case 'ban':
                 postMessage(
-                  '`/ban`: Bans a user from a channel',
+                  '`/ban`: Bans a user from a channel. Bans user from all channels if channel argument is *.',
                 );
                 postMessage('Usage: `/ban <channel> <username>`');
-                postMessage('Example: `/ban #general Ahalb`');
+                postMessage('Example: `/ban #general ProblematicUser`');
+                postMessage('Example: `/ban * ProblematicUser`');
                 postMessage('You must be an operator to use this command');
                 break;
               case 'unban':
                 postMessage(
-                  '`/ban`: Unbans a user from a channel',
+                  '`/ban`: Unbans a user from a channel. Unbans user from all channels if channel argument is *.',
                 );
                 postMessage('Usage: `/unban <channel> <username>`');
-                postMessage('Example: `/unban #general Ahalb`');
+                postMessage('Example: `/unban #general ProblematicUser`');
+                postMessage('Example: `/unban * ProblematicUser`');
                 postMessage('You must be an operator to use this command');
                 break;
               case 'kick':
                 postMessage(
-                  '`/kick`: Kicks a user from a channel',
+                  '`/kick`: Kicks a user from a channel. Kicks user from all channels if channel argument is *.',
                 );
                 postMessage('Usage: `/kick <channel> <username>`');
-                postMessage('Example: `/kick #general Ahalb`');
+                postMessage('Example: `/kick #general ProblematicUser`');
+                postMessage('Example: `/kick * ProblematicUser`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'quiet':
+                postMessage(
+                  '`/quiet`: Quiets a user from a channel. A quieted user can not send messages. Quiets user in all channels if channel argument is *.',
+                );
+                postMessage('Usage: `/quiet <channel> <username>`');
+                postMessage('Example: `/quiet #general ProblematicUser`');
+                postMessage('Example: `/quiet * ProblematicUser`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'unquiet':
+                postMessage(
+                  '`/unquiet`: Unquiets a user from a channel. An unquieted user can send messages. Unquiets user in all channels if channel argument is *.',
+                );
+                postMessage('Usage: `/unquiet <channel> <username>`');
+                postMessage('Example: `/unquiet #general ProblematicUser`');
+                postMessage('Example: `/unquiet * ProblematicUser`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'banlist':
+                postMessage(
+                  '`/banlist`: Displays a list of bans, showing the channel, username and/or nick, and if the ban is quiet.',
+                );
+                postMessage('Usage: `/banlist`');
+                postMessage('Example: `/banlist`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'notice':
+                postMessage(
+                  '`/notice`: Sends a notice to a channel. Sends a notice to all channels if channel argument is *.',
+                );
+                postMessage('Usage: `/notice <channel> <message>`');
+                postMessage('Example: `/notice #general Hello, everyone`');
+                postMessage('Example: `/notice * Hello, everyone`');
                 postMessage('You must be an operator to use this command');
                 break;
               default:
                 postMessage('Available commands: help, me, ignore, ignore-list, unignore, change, emoticon');
                 postMessage('Type `/help <command>` for information on individual commands');
                 postMessage('Example: `/help ignore`');
-                postMessage(` You are ${this.oper ? '' : 'not'} logged in as an operator/moderator. Operators may use the \`/ban\`, \`/unban\`, and \`/kick\` commands`);
+                postMessage(` You are ${this.oper ? '' : 'not'} logged in as an operator/moderator. Operators may use the \`/ban\`, \`/unban\`, \`/quiet\`, \`/unquiet\`, \`/notice\`, and \`/kick\` commands`);
                 postMessage(
                   'Additional commands available via LinkBot (see the [wiki](http://eternawiki.org/wiki/index.php5/HELP) for more information)',
                 );
@@ -708,6 +752,8 @@ export default class ChatModule extends VuexModule {
                 } else {
                   this.client?.raw(`MODE ${params.split(' ')[0]} +b m;*!${params.split(' ')[1]}@*`);
                 }
+              } else {
+                postMessage('Please include command parameters. Type `/help quiet` for more usage instructions');
               }
             } else {
               this.auth = true;
@@ -724,6 +770,8 @@ export default class ChatModule extends VuexModule {
                 } else {
                   this.client?.raw(`MODE ${params.split(' ')[0]} -b m;*!${params.split(' ')[1]}@*`);
                 }
+              } else {
+                postMessage('Please include command parameters. Type `/help unquiet` for more usage instructions');
               }
             } else {
               this.auth = true;
@@ -758,6 +806,36 @@ export default class ChatModule extends VuexModule {
               postMessage('You are not an operator or moderator and do not have permission to view the ban list');
             }
             break;
+          case 'notice':
+            if (this.oper) {
+              if (params.split(' ').length > 1) {
+                if (params.split(' ')[0] === '*') {
+                  channelNames.forEach(c => {
+                    const msg = message
+                      .replace('/notice', '')
+                      .replace(/ \[#[a-f0-9]{6}\]$/, '')
+                      .replace(params.split(' ')[0], '')
+                      .trim();
+                    this.client?.notice(c, msg);
+                    this.postMessage(new Message(msg, c, this.currentUser, false, true));
+                  });
+                } else {
+                  const msg = message
+                    .replace('/notice', '')
+                    .replace(/ \[#[a-f0-9]{6}\]$/, '')
+                    .replace(params.split(' ')[0], '')
+                    .trim();
+                  this.client?.notice(params.split(' ')[0], msg);
+                  this.postMessage(new Message(msg, params.split(' ')[0], this.currentUser, false, true));
+                }
+              } else {
+                postMessage('Please include command parameters. Type `/help notice` for more usage instructions');
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to post messages');
+            }
+            break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;
@@ -876,9 +954,12 @@ export default class ChatModule extends VuexModule {
 
   @action()
   async onNoticeReceived({
-    message,
+    message, target, tags, time, nick, type,
   }: Irc.MessageEventArgs) {
-    this.postMessage(new Message(message, 'notice'));
+    const user = this.connectedUsers[User.parseUsername(nick)];
+    const msg = new Message(message, target, user, false, true);
+    msg.time = time;
+    this.postMessage(msg);
   }
 
   // TODO: Insert messages based on id order
diff --git a/src/app/types/message.ts b/src/app/types/message.ts
index de912f97..e4488e92 100644
--- a/src/app/types/message.ts
+++ b/src/app/types/message.ts
@@ -11,13 +11,16 @@ class Message {
 
   isAction!: boolean;
 
+  isNotice !: boolean;
+
   time!: Date;
 
-  constructor(message: string, target = '*', user: User = User.annonymous, isAction: boolean = false, tags: {[key: string] : string} = {}) {
+  constructor(message: string, target = '*', user: User = User.annonymous, isAction: boolean = false, isNotice: boolean = false, tags: {[key: string] : string} = {}) {
     this.message = message;
     this.target = target;
     this.tags = tags;
     this.isAction = isAction;
+    this.isNotice = isNotice;
     this.user = user;
     this.parseTime();
   }
diff --git a/src/app/types/modules/irc-framework/irc-framework.d.ts b/src/app/types/modules/irc-framework/irc-framework.d.ts
index 71dc3b09..68494b14 100644
--- a/src/app/types/modules/irc-framework/irc-framework.d.ts
+++ b/src/app/types/modules/irc-framework/irc-framework.d.ts
@@ -339,8 +339,8 @@ declare module 'irc-framework' {
     bans: BanlistBanObject[]; // TODO: check type
   }
   export interface BanlistBanObject {
-    banned:string;
-    channel:string
+    banned: string;
+    channel: string;
   }
   export interface TopicEventArgs{
     channel: string;

From f806808ca795d2c3aab72f5cb0e407d50db11738 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 00:47:38 -0500
Subject: [PATCH 090/223] Fixed several history bugs

---
 src/app/App.vue                          | 56 +++++++++++++-----------
 src/app/components/Panes/MessagePane.vue |  4 ++
 src/app/components/Panes/Pane.vue        |  6 +++
 src/app/store/chat.vuex.ts               |  3 ++
 4 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 57cf0eaa..1075c251 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -16,6 +16,7 @@
             v-show="index === activeTab"
             :visibility="index === activeTab"
             @postMessage="postMessage($event, channel.name)"
+            ref="messagepanes"
           />
           <ConnectingPopup />
           <ReportDialog ref="reportDialog" />
@@ -110,9 +111,10 @@
   }
 
   @Watch('currentTab')
-  loadHistory() {
+  loadHistory() { // Load history when tab changed
+    // Don't put duplicates of existing history messages
     if (this.$vxm.chat.channels[this.currentTab]!.postedMessages.length <= 50) {
-      this.$vxm.chat.loadMessagesForChannel(this.currentTab);
+      this.$vxm.chat.loadMessagesForChannel(this.currentTab); // Load messages
     }
   }
 
@@ -125,6 +127,7 @@
     reportDialog: ReportDialog;
     login: OperLogin,
     privmsgmodal: PrivateMessageModal,
+    messagepanes: MessagePane,
   };
 
   get slideoutOpen() {
@@ -158,16 +161,9 @@
   ) {
     this.$vxm.chat.operLoginUser = username; // Sets creds used for authentification by chat.vuex
     this.$vxm.chat.operLoginPassword = password;
-    if (remember) {
-      const database = await openDB('oper', 1, {
-        upgrade(db) {
-          const store = db.createObjectStore('oper');
-          store.createIndex('password', 'password');
-          store.createIndex('user', 'user');
-        },
-      });
-      database.put('oper', username, 'user');
-      database.put('oper', password, 'password');
+    if (remember) { // Store values
+      localStorage.operPass = password;
+      localStorage.operUser = username;
     }
     this.$vxm.chat.operCommand(); // Set all nicks as opers
     setTimeout(this.operLoginStatus, 200); // A precaution so messages are received properly
@@ -191,7 +187,7 @@
     return this.$vxm.chat.auth;
   }
 
-  @Watch('show')
+  @Watch('show') // Show modal
   showAuthentification() {
     if (this.show) {
       this.showAuth = true;
@@ -205,25 +201,35 @@
       workbranch: this.workbranch,
       uid: this.uid,
     });
-    setTimeout(this.logInOper, 1000);
+    const timer = setInterval(() => { // Creates a timer to check for history and connection
+      this.logInOper();
+      if (this.$vxm.chat.rawHistoryMessages.length > 0) {
+        clearInterval(timer); // Once history messages start coming in, stop the timer
+        setTimeout(() => { // Make sure all of them come in, then process them
+          this.$vxm.chat.loadMessagesForChannel('#test');
+          setTimeout(() => {
+            /* This gives an error because it doesn't recognize
+            using ref on a v-for gives an Array of VueComponents.
+            It think's its just a normal MessagePane
+            */
+            this.$refs.messagepanes[5].scrollDown(); // Scroll down
+          }, 100);
+        }, 500);
+      }
+    }, 100);
   }
 
+  /**
+   * Logs the user in as an operator
+   */
   async logInOper() {
-    const database = await openDB('oper', 1, {
-      upgrade(db) {
-        const store = db.createObjectStore('oper');
-        store.createIndex('password', 'password');
-        store.createIndex('user', 'user');
-      },
-    });
-    const pass = await database.get('oper', 'password');
-    const user = await database.get('oper', 'user');
+    const pass = localStorage.operPass;
+    const user = localStorage.operUser;
     if (user && pass) {
-      this.$vxm.chat.operLoginPassword = pass;
+      this.$vxm.chat.operLoginPassword = pass; // Log in
       this.$vxm.chat.operLoginUser = user;
       this.$vxm.chat.operCommand();
       setTimeout(this.operLoginStatus, 150);
-      setTimeout(() => console.log(this.isOper), 200);
     }
   }
 
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 7ecc4049..39eee3b4 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -167,6 +167,10 @@
       }
     }
 
+    scrollDown() {
+      this.$refs.pane.scrollDown();
+    }
+
     @Watch('messages')
     onContentChanged() {
       this.$refs.pane.onContentChanged();
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 5346c70e..7eab50e9 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -1,6 +1,7 @@
 <template>
   <div
   style="height: 100%; font-family:'Open Sans','Century Gothic','Didact Gothic,'Arial',sans-serif"
+  id="cont"
   >
     <div
       ref="scrollDiv"
@@ -63,6 +64,11 @@
       }
     }
 
+    scrollDown() {
+      this.$nextTick(() => { this.container.scrollTop = this.container.scrollHeight; });
+      this.$nextTick(this.updateFooterHeight);
+    }
+
     onContentChanged() {
       if (this.autoScroll) {
         this.$nextTick(() => {
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index a6abedb4..33fb074b 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1019,6 +1019,9 @@ export default class ChatModule extends VuexModule {
         }
       }
     }
+    if (channel.postedMessages.length === 0) {
+      this.loadMessagesForChannel(channel.name);
+    }
     this.postMessage(messageObject);
   }
 

From 07468c8687053ae6943fd54bd4e24864a70db100 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 12:17:17 -0500
Subject: [PATCH 091/223] Styling

---
 src/app/App.vue                               |  6 ++-
 src/app/assets/_custom.scss                   |  3 +-
 src/app/components/Messages/Username.vue      |  5 +--
 src/app/components/OperLogin.vue              | 20 ++++++---
 src/app/components/Panes/MessagePane.vue      |  4 +-
 src/app/components/Panes/Pane.vue             |  5 +--
 src/app/components/ScalableInput.vue          | 16 ++++---
 .../Slideout/ColorPicker/ColorSlider.vue      | 23 +++++-----
 src/app/components/Slideout/SlideoutChats.vue |  4 +-
 .../components/Slideout/SlideoutSettings.vue  | 43 ++++++++++---------
 src/app/components/Slideout/SlideoutUser.vue  |  2 +-
 .../components/{ => Slideout}/Splitter.vue    |  3 +-
 src/app/components/TabButton.vue              |  4 +-
 13 files changed, 75 insertions(+), 63 deletions(-)
 rename src/app/components/{ => Slideout}/Splitter.vue (92%)

diff --git a/src/app/App.vue b/src/app/App.vue
index 1075c251..dd22bee8 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -237,12 +237,14 @@
     if (e.code === 'Tab') { /* Watches for tabs. If a tab is detected, outline on input will remain on focus */
       this.$vxm.chat.tabbing = true;
     }
-    if (e.code === 'ArrowUp') {
+    if (e.code === 'ArrowUp') { // Checks if up arrow has been pressed
+      // Finds the most recent message the user has sent
       const channelMsgs = this.$vxm.chat.channels[this.currentTab]?.postedMessages;
       let recent = channelMsgs?.filter(m => m.user.username === this.username).reverse()[0].message;
-      if (recent?.match(/\[#[a-f0-9]{6}\]$/)) {
+      if (recent?.match(/\[#[a-f0-9]{6}\]$/)) { // Remove the color
         recent = recent.substring(0, recent.length - 10);
       }
+      // Notify the input
       this.$vxm.chat.updateMessage = recent || '';
       this.$vxm.chat.inputUpdate = true;
     }
diff --git a/src/app/assets/_custom.scss b/src/app/assets/_custom.scss
index 5aad9dea..e9e792fa 100644
--- a/src/app/assets/_custom.scss
+++ b/src/app/assets/_custom.scss
@@ -82,8 +82,7 @@ $font-size-base:              0.9375rem !default;
 
 $h1-font-size:                3rem !default;
 $h2-font-size:                2.5rem !default;
-$h3-font-size:                1.5rem !default;
-$h4-font-size:                1rem !default;
+$h3-font-size:                2rem !default;
 
 // Tables
 
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index ca56facf..a7a57c1d 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -27,7 +27,7 @@
 
     get computedColor() {
       let numUid = parseInt(this.user.uid, 10);
-      /* Temporary */
+      /* Temporary, for compatibility with current chat */
       if (!numUid) { // If uid isn't present, check the end of the username
         numUid = parseInt(this.user.username.substring(this.user.username.lastIndexOf('_') + 1), 10);
       }
@@ -41,9 +41,6 @@
     }
 
     get displayedColor() {
-      if (this.color?.includes('o')) { // Override for oper
-        return this.color.substring(0, 7);
-      }
       let red;
       let green;
       let blue;
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index 13ba73f2..ffea8a8c 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -28,15 +28,15 @@
         </table>
         <p v-show="authFailed">Username or password incorrect</p>
         <div
-          class="green-button"
-          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
+          class="btn login-button"
+          style="width: 100%; left: 50%; margin-top:10px"
           @click="$emit('login', { password, username, remember })"
         >
         Continue
         </div>
         <div
-          class="green-button"
-          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px;"
+          class="btn login-button"
+          style="width: 100%; left: 50%; margin-top:10px;"
           @click="$emit('cancel')"
         >
           Cancel
@@ -47,8 +47,11 @@
 </template>
 
 <script lang="ts">
+  import BootstrapVue from 'bootstrap-vue';
   import { Component, Vue } from 'vue-property-decorator';
 
+  Vue.use(BootstrapVue);
+
   @Component({
     components: {},
   })
@@ -68,6 +71,9 @@
 </script>
 
 <style lang="scss">
+@import "../assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
   .login {
     position: absolute;
     left: 50%;
@@ -83,8 +89,8 @@
     padding: 2px;
   }
 
-  .blue-button,
-  .green-button {
-    padding: 4px 7px !important;
+  .login-button {
+    color:white;
+    background-color:$green;
   }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 39eee3b4..000d4a24 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -114,8 +114,10 @@
 
     focused = false;
 
-    @Watch('inputUpdate')
+    @Watch('inputUpdate') // Updates input when up arrow pressed
     update() {
+      /* Makes sure new value is valid and input isn't focused
+      We don't want a user to accidentally replace what they just typed */
       if (this.updateMessage.trim() !== '' && this.inputUpdate && !this.focused) {
         this.$refs.input.value = this.updateMessage;
         this.newMessage = this.updateMessage;
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 7eab50e9..eec8bee0 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -107,9 +107,6 @@
     padding: 5px;
     bottom:0px;
     position:absolute; /* Necessary to keep it at the bottom */
-    width:calc(100% - 10px); /* Fallback */
-    width: -webkit-fill-available;
-    width: -moz-available;
-    width: fill-available; /* Equivalent of what width was with position:relative */
+    width:calc(100% + 2px);
   }
 </style>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index e125cd89..b3929b58 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -11,6 +11,7 @@
         height: `${height}px`,
         'border-bottom-right-radius': radius,
         'border-bottom-left-radius': radius,
+        'font-size': `${fontsize}px`
       }"
       class="scalable-input"
       :disabled="disabled"
@@ -78,6 +79,10 @@
       return '0px';
     }
 
+    get fontsize() {
+      return this.$vxm.settings.fontSize;
+    }
+
     get bshadow() {
       if (this.$vxm.chat.tabbing) {
         2;
@@ -229,8 +234,8 @@
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;
     outline: none;
-    padding-right:20px;
-    width:calc(100% - 24px) !important;
+    padding-right:24px;
+    width:calc(100% - 2px) !important;
   }
 
   .scalable-input,
@@ -245,13 +250,14 @@
     white-space: pre-wrap;
     word-wrap: break-word;
     border: 1px solid;
-    padding-right:25px;
+    padding-right:0px;
   }
   .send-button { /* Send message button */
     position: absolute;
     float:right;
     right:0;
-    width:29px;
-    height:29px;
+    width:30px;
+    height:30px;
+    top:-3px;
   }
 </style>
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
index ed7f4508..0022ecbe 100644
--- a/src/app/components/Slideout/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -4,13 +4,12 @@
       class="slider"
       v-model="sliderValue"
       type=range min=0 max=255
-      :style='{ background:getGradient()}'>
+      :style='{ background:getGradient()}'
+      :name="colorID">
     <p
-      class='value-thumb'
-      :style="{ left:calculateOffset }"
-    >
-      {{ sliderValue }}
-    </p> <br>
+      class="value-thumb"
+      :style="{ left: calculateOffset}"
+    >{{sliderValue}}</p>
   </div>
 </template>
 <script lang='ts'>
@@ -77,11 +76,14 @@
   }
 </script>
 <style scoped>
-  .color-slider-container {
+  .color-slider-container { /* Container */
     position:relative;
-    height:15px;
+    height:20px;
     margin:8px;
     margin-left:0;
+    width:120px;
+    padding:0;
+    overflow:hidden;
   }
   .slider { /* Sliders for color values */
     -webkit-appearance: none;
@@ -95,7 +97,7 @@
     width:120px;
     padding:0;
   }
-  .slider::-webkit-slider-thumb { /* Draggable part of slider */
+  .slider::-webkit-slider-thumb { /* Draggable part of slider (for webkit compatibility) */
     -webkit-appearance: none;
     appearance: none;
     background-color:#7b8a8b;
@@ -125,6 +127,7 @@
     display:inline-block;
     margin:0px;
     font-size: 14px !important;
-    height:15px;
+    height:20px;
+    top: 0px;
   }
 </style>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index 06fa7b55..c95ea5b9 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -21,7 +21,7 @@
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import TabButton from '@/components/TabButton.vue';
   import Slideout from './Slideout.vue';
-  import Splitter from '../Splitter.vue';
+  import Splitter from './Splitter.vue';
 
   @Component({
     components: {
@@ -31,7 +31,7 @@
     },
   })
   export default class SlideoutChats extends Vue {
-    activeTab = 4; // If 1-3, causes weird bug. This fixes it
+    activeTab = 6; // If any real channel index (or unset), causes weird bug. This fixes it
 
     channelDescriptions: {[channel:string]:string} = {
     '#general': 'General chat',
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index ae51bb7a..a858efff 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <section>
-      <h3>Text Size</h3>
+      <h5>Text Size</h5>
       <input v-model="size" type=number min=10 max=18>
       <p id='font-size-p'>Default is 14</p>
       <p
@@ -11,37 +11,38 @@
       </p>
     </section>
     <section>
-      <h3>Ignored</h3>
-      <ul>
-        <li v-for="user in ignoredUsers" :key="user.Username">
-          {{ user }}
+      <h5>Ignored</h5>
+      <table style="width:175px">
+        <tr v-for="user in ignoredUsers" :key="user.Username">
           <button
             :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+            style="right:0; width:150px;"
             class='unignore-user btn settings-button'
             v-on:click="unignore(user)" >
-            Unignore
+            Unignore {{user}}
           </button>
-        </li>
-        <li v-show="!anyIgnoredUsers">No users ignored</li>
-        <button
+        </tr>
+        <tr v-show="!anyIgnoredUsers">No users ignored</tr>
+        <tr><button
           :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+          style="margin-top:5px; width:150px"
           class='unignore-user btn settings-button'
           v-on:click="unignore('*')"
           v-show="anyIgnoredUsers"
         >
           Unignore All
-        </button>
-      </ul>
+        </button></tr>
+      </table>
     </section>
     <section>
-      <h3>Notifications</h3>
-      <h4>Ignored</h4>
+      <h5>Notifications</h5>
+      <h6>Ignored</h6>
       <table>
         <tr v-for="channel in channels" :key="channel.name">
           <td>{{channel.name}}</td>
           <td>
             <button
-              style="width:calc(100% - 2px)"
+              style="width:100%"
               @click="toggleNotificationsEnabled(channel.name)"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
               class="btn settings-button"
@@ -53,7 +54,7 @@
         <tr>
           <td class='footer'>
             <button
-              style="width:calc(100% - 0px)"
+              style="width:100%"
               :disabled="anyNotificationsDisabled"
               @click="enableAll"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
@@ -64,7 +65,7 @@
           </td>
           <td class='footer'>
             <button
-              style="width:calc(100% - 0px)"
+              style="width:100%"
               :disabled="anyNotificationsEnabled"
               @click="disableAll"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
@@ -75,18 +76,18 @@
           </td>
         </tr>
       </table>
-      <h4>Indicator</h4>
+      <h6>Indicator</h6>
       <p>
         This will appear in the page title if you have notifications
       </p>
       <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
     </section>
     <section>
-      <h3>Username Color</h3>
+      <h5>Username Color</h5>
       <ColorPicker />
     </section>
     <section>
-      <h3>Toolbar Features</h3>
+      <h5>Toolbar Features</h5>
       <p>
         These enable you to send emoticons and formatted text.
       </p>
@@ -96,7 +97,7 @@
             <button
               @click="toggleMarkdown"
               :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="btn settings-button" >
+              class="btn settings-button feature-button" >
               {{markdownChatFeatures ? 'Disable' : 'Enable'}} markdown
             </button>
           </td>
@@ -133,7 +134,7 @@
       </table>
     </section>
     <section>
-      <h3>Operator</h3>
+      <h5>Operator</h5>
       <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
       <button
         @click="$emit('auth')"
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/SlideoutUser.vue
index 88fbbcbb..2292b4ff 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/SlideoutUser.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="user-wrapper" :style="{ fontSize:`${fontSize}px` }">
-    <h3>Online ({{userCount}})</h3>
+    <h4>Online ({{userCount}})</h4>
     <ul>
       <SlideoutUsername
         v-for="user in connectedUsers"
diff --git a/src/app/components/Splitter.vue b/src/app/components/Slideout/Splitter.vue
similarity index 92%
rename from src/app/components/Splitter.vue
rename to src/app/components/Slideout/Splitter.vue
index 952ad111..0d118704 100644
--- a/src/app/components/Splitter.vue
+++ b/src/app/components/Slideout/Splitter.vue
@@ -21,7 +21,6 @@
     background-color:#7b8a8b;
     position:relative;
     margin:0px;
-    margin-bottom:10px;
-    top:15px;
+    top:5px;
   }
 </style>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index 632b4068..c71c9143 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -1,4 +1,4 @@
-<template>
+<template> <!-- Repurposed for chat selector buttons -->
   <Button
     :class="{active: isActive}"
     @click="$emit('input');"
@@ -58,7 +58,7 @@
   }
 
   button.active {
-    border-left: solid #4A90E2 10px; //Selected rectangle to the side is jsut left border
+    border-left: solid #4A90E2 10px; //Selected rectangle to the side is just left border
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     padding-left:5px;

From 1342dc2d8a3f67374a6bdd3646c95a4a28bf6720 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 13:32:40 -0500
Subject: [PATCH 092/223] Styling updates, image size fix, history message
 username colors

---
 src/app/App.vue                             | 49 +++++----------------
 src/app/components/DraggableDiv.vue         |  1 +
 src/app/components/Messages/UserMessage.vue | 13 ++++--
 src/app/components/Panes/Pane.vue           |  4 +-
 src/app/tools/Markdown.ts                   |  2 +-
 5 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index dd22bee8..71d75280 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -2,6 +2,7 @@
   <DraggableDiv
     id="eterna-chat"
     style="overflow-y: hidden;"
+    :style="{animation: animation }"
     :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
     :enabled="!fullSize"
   >
@@ -81,6 +82,13 @@
   @Prop()
   workbranch!: string;
 
+  get animation() {
+    if (this.loaded) {
+      return 'none';
+    }
+    return 'growFull 1s';
+  }
+
   @Prop()
   uid!: string;
 
@@ -217,8 +225,11 @@
         }, 500);
       }
     }, 100);
+    this.loaded = false;
   }
 
+  loaded = true;
+
   /**
    * Logs the user in as an operator
    */
@@ -295,13 +306,12 @@
   position: relative; /* Makes sure everything is placed with respect to it, not to its parent */
   top: 0px;
   left: 0px;
-  transition: height 200ms;
+  transition: width 200ms, height 200ms, margin 1s, position 1s;
 }
 
 .eternaChatNormal {
   width: $container-width; // Fill in with normal size
   height: $container-height;
-  animation: growNormal 1s;
 }
 
 .fade-enter-active,
@@ -357,40 +367,6 @@
   z-index: 0; // Covered by slideout
   height: 30px;
 }
-@keyframes growFull {
-  from {
-    width: 300px; // Fill in with default size
-    height: 500px;
-    margin: 0;
-  }
-  to {
-    width: 90vw;
-    height: 90vh;
-    margin-right: 5vw;
-    margin-left: 5vw;
-    margin-top: 5vh;
-    margin-bottom: 5vh;
-    left: 0px !important;
-    top: 0px !important;
-  }
-}
-@keyframes growNormal {
-  to {
-    width: 300px; //Fill in with default size
-    height: 500px;
-    margin: 0;
-  }
-  from {
-    width: 90vw;
-    height: 90vh;
-    margin-right: 5vw;
-    margin-left: 5vw;
-    margin-top: 5vh;
-    margin-bottom: 5vh;
-    left:0px !important;
-    top:0px !important;
-  }
-}
 .eternaChatFull { /* Full size chat */
   width: 90vw; /* Takes up 90% of the viewport*/
   height: 90vh;
@@ -399,7 +375,6 @@
   margin-top: 5vh;
   margin-bottom: 5vh;
   box-shadow: 0 0 2vw 20vw $dark-blue-transparent; /* Creates blur effect */
-  animation: growFull 1s;
   left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
   top:0px !important;
 }
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 83ab7c06..04506966 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -54,6 +54,7 @@
       elementDrag(event) {
         if (!this.disabled) {
           event.preventDefault();
+          this.$refs.draggableContainer.style.transition = 'none !important';
           this.positions.movementX = this.positions.clientX - event.clientX;
           this.positions.movementY = this.positions.clientY - event.clientY;
           this.positions.clientX = event.clientX;
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 169577e3..dcba7b0b 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -75,7 +75,7 @@
     get formattedMessage(): string {
       // If there are tags, remove them before the message is seen
       if (this.messageHasTags(this.message.message)) {
-        const tagsStringPosition = this.message.message.search(/\[(.+,)*.+\]$/);
+        const tagsStringPosition = this.message.message.search(/\[(.+,)*.+\]?\r$/);
         return md.renderInline(this.message.message.substring(0, tagsStringPosition));
       } // If not, just show the message
       return md.renderInline(this.message.message);
@@ -92,14 +92,19 @@
     }
 
     parseMessageTags(message:string) { // Gets tags as array from message
-      const tagsStringPosition = message.search(/\[(.+,)*.+\]$/); // Searches for [...,...] at end of message
+      const tagsStringPosition = message.search(/\[(.+,)*.+\]?\r$/); // Searches for [...,...] at end of message
       let tagsString = message.substring(tagsStringPosition); // Gets tags as a string
-      tagsString = tagsString.substring(1, tagsString.length - 1); // Removes brackets
+      if (tagsString.includes('\r')) { // In history messages, message ends with \r
+        tagsString = tagsString.substring(1, tagsString.length - 2); // Removes bracket
+      } else {
+        tagsString = tagsString.substring(1, tagsString.length - 1); // Removes bracket
+      }
+      console.log(tagsString);
       return tagsString.split(','); // Returns array split by commas
     }
 
     messageHasTags(message:string) { // If a message has any tags
-      return message.match(/\[(.+,)*.+\]$/);
+      return message.match(/\[(.+,)*.+\]?\r$/);
     }
 
     $refs!: {
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index eec8bee0..2a4f8b30 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -6,7 +6,7 @@
     <div
       ref="scrollDiv"
       style="padding: 5.6px 7px;"
-      :style="{height: `calc(100% - ${footerHeight}px - 5.6px * 2)`}"
+      :style="{height: `calc(100% - ${footerHeight}px - 5.6px * 1)`}"
     >
       <VuePerfectScrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHandle">
         <div style="height: 100%; word-wrap: break-word; white-space: normal;">
@@ -79,7 +79,7 @@
 
     @Watch('visibility')
     updateFooterHeight() {
-      this.footerHeight = this.$refs.footer.clientHeight;
+      this.footerHeight = this.$refs.footer.clientHeight - 5.76;
       this.onContentChanged();
     }
 
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 46f82149..52930191 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -27,7 +27,7 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
     const { content } = t;
     // If the link URL is an Eterna screenshot
     if (content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
-      result = `<br><a target="_blank" href="${content}"><img src="${content}" style="max-width:calc(100% - 25px)"></a><br>`;
+      result = `<br><a target="_blank" href="${content}"><img src="${content}" style="width:calc(100% - 25px); max-width:750px"></a><br>`;
       t.content = '';
     }
   });

From 4c9bd1e814d6d6c2eb001130dec58d21c36d88d3 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 13:35:40 -0500
Subject: [PATCH 093/223] /me actions work in history messages

---
 src/app/components/Messages/UserMessage.vue | 1 -
 src/app/store/chat.vuex.ts                  | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index dcba7b0b..a0dcc021 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -99,7 +99,6 @@
       } else {
         tagsString = tagsString.substring(1, tagsString.length - 1); // Removes bracket
       }
-      console.log(tagsString);
       return tagsString.split(','); // Returns array split by commas
     }
 
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 33fb074b..358c2f75 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -387,7 +387,7 @@ export default class ChatModule extends VuexModule {
     const username = user.substring(0, user.lastIndexOf('!'));
     const uid = user.substring(user.lastIndexOf('!') + 1);
     const date = new Date(time);
-    const msg = new Message(message.replace('/me ', ''), channel, new User(User.parseUsername(username), uid), message.includes('/me'));
+    const msg = new Message(message.replace('\u0001ACTION ', ''), channel, new User(User.parseUsername(username), uid), message.includes('\u0001ACTION'));
     msg.time = date;
     this.postMessage(msg);
   }

From d1349901203a9e1b7671938da71a7ffd3890c1dd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 15:46:49 -0500
Subject: [PATCH 094/223] Accessibility, bug fixes

---
 src/app/App.vue                          |  1 +
 src/app/components/Slideout/Slideout.vue | 13 +++++++++++++
 src/app/store/chat.vuex.ts               |  4 ++--
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 71d75280..d562c36b 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -375,6 +375,7 @@
   margin-top: 5vh;
   margin-bottom: 5vh;
   box-shadow: 0 0 2vw 20vw $dark-blue-transparent; /* Creates blur effect */
+  transition: left 1s, top 1s;
   left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
   top:0px !important;
 }
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index e660e703..d4c20822 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -5,18 +5,27 @@
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
     <HamburgerMenuButton v-model="checked" :notification="notifications"/>
+    <v-style>
+      .slideout-button:focus {
+        border: {{tabbing ? 'solid white 1px' : 'none !important'}};
+        outline: {{tabbing ? 'solid white 1px' : 'none !important'}};
+      }
+    </v-style>
     <span v-if="checked">
       <SlideoutButtonChat
         :selected="chatSelected"
         @input="activeTab = 0"
+        class='slideout-button'
       />
       <SlideoutButtonUsers
         :selected="userSelected"
         @input="activeTab = 1"
+        class='slideout-button'
       />
       <SlideoutButtonSettings
         :selected="settingsSelected"
         @input="activeTab = 2"
+        class='slideout-button'
       />
       <SlideoutChats
         v-if="chatSelected"
@@ -62,6 +71,10 @@
     @Prop()
     minimizedValue !: boolean;
 
+    get tabbing() {
+      return this.$vxm.chat.tabbing;
+    }
+
     // Each of the functions below tells whether a given tab is selected
     get chatSelected() {
         return this.activeTab === 0;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 358c2f75..239287d5 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -382,12 +382,12 @@ export default class ChatModule extends VuexModule {
     const parts = str.split(' ');
     const time = parts[0].substring(13, 37);
     const channel = parts[3];
-    const message = str.substring(str.indexOf(channel) + channel.length + 2);
+    const message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
     const user = parts[1].substring(1, parts[1].indexOf('@'));
     const username = user.substring(0, user.lastIndexOf('!'));
     const uid = user.substring(user.lastIndexOf('!') + 1);
     const date = new Date(time);
-    const msg = new Message(message.replace('\u0001ACTION ', ''), channel, new User(User.parseUsername(username), uid), message.includes('\u0001ACTION'));
+    const msg = new Message(message.replace('ACTION ', ''), channel, new User(User.parseUsername(username), uid), message.includes('ACTION'));
     msg.time = date;
     this.postMessage(msg);
   }

From b859b00321a43e787512efa4504c850db74e91d2 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 16:41:39 -0500
Subject: [PATCH 095/223] Action menu fixes

---
 src/app/components/Messages/ActionMenu.vue | 41 ++++++++++++++++++----
 1 file changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index f7b37e7a..38d62c4e 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -1,10 +1,12 @@
 <template>
-  <VueContext ref="menu" style="padding: 0;">
-    <li>
+  <VueContext ref="menu" class="action-menu-container">
+    <li
+      style="border-bottom: 1px solid white"
+    >
       <a
         :href="profileUrl"
         target="_blank"
-        style="border-bottom: 1px solid black;"
+        style="color:white;"
       >
         {{ message ? message.user.username : '' }}
       </a>
@@ -44,7 +46,7 @@
         Unquiet User
       </a>
     </li>
-    <li >
+    <li>
       <a @click="privmsg">
         Private Message User
       </a>
@@ -53,7 +55,9 @@
 </template>
 
 <script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
   import { VueContext } from 'vue-context';
   import Message from '@/types/message';
   import User from '@/types/user';
@@ -120,11 +124,34 @@
 </script>
 
 <style scoped lang="scss">
+@import "../../assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+@import '~vue-context/src/sass/vue-context';
   li {
-    color: black;
+    color: white;
+    padding:0px 5px;
+  }
+
+  li:hover {
+    background-color:$blue !important;
+  }
+
+  .action-menu-container {
+    border-radius:5px;
+    background-color:$med-dark-blue;
+  }
+
+  .action-menu-container:focus {
+    outline:none;
   }
 
-  a {
+  li > a {
     cursor: pointer;
+    color:white !important;
+  }
+
+  a:hover {
+    background: transparent !important;
   }
 </style>

From 5f3314114912ee500657e5994fe86ab0ee5c88b3 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 20:53:53 -0500
Subject: [PATCH 096/223] History messages load username colors correctly

---
 src/app/components/Messages/UserMessage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index a0dcc021..f9547c64 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -75,7 +75,7 @@
     get formattedMessage(): string {
       // If there are tags, remove them before the message is seen
       if (this.messageHasTags(this.message.message)) {
-        const tagsStringPosition = this.message.message.search(/\[(.+,)*.+\]?\r$/);
+        const tagsStringPosition = this.message.message.search(/\[(.+,)*.+\]\r?$/);
         return md.renderInline(this.message.message.substring(0, tagsStringPosition));
       } // If not, just show the message
       return md.renderInline(this.message.message);
@@ -92,7 +92,7 @@
     }
 
     parseMessageTags(message:string) { // Gets tags as array from message
-      const tagsStringPosition = message.search(/\[(.+,)*.+\]?\r$/); // Searches for [...,...] at end of message
+      const tagsStringPosition = message.search(/\[(.+,)*.+\]\r?$/); // Searches for [...,...] at end of message
       let tagsString = message.substring(tagsStringPosition); // Gets tags as a string
       if (tagsString.includes('\r')) { // In history messages, message ends with \r
         tagsString = tagsString.substring(1, tagsString.length - 2); // Removes bracket
@@ -103,7 +103,7 @@
     }
 
     messageHasTags(message:string) { // If a message has any tags
-      return message.match(/\[(.+,)*.+\]?\r$/);
+      return message.match(/\[(.+,)*.+\]\r?$/);
     }
 
     $refs!: {

From 40a70f86eeda1df0c86727682767b843de8b32bd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 8 Jun 2020 21:04:35 -0500
Subject: [PATCH 097/223] Fixed bug where blank messages can be sent, updated
 channel names and default channel

---
 src/app/App.vue            | 4 ++--
 src/app/store/chat.vuex.ts | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index d562c36b..ee2674a0 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -214,13 +214,13 @@
       if (this.$vxm.chat.rawHistoryMessages.length > 0) {
         clearInterval(timer); // Once history messages start coming in, stop the timer
         setTimeout(() => { // Make sure all of them come in, then process them
-          this.$vxm.chat.loadMessagesForChannel('#test');
+          this.$vxm.chat.loadMessagesForChannel('#general');
           setTimeout(() => {
             /* This gives an error because it doesn't recognize
             using ref on a v-for gives an Array of VueComponents.
             It think's its just a normal MessagePane
             */
-            this.$refs.messagepanes[5].scrollDown(); // Scroll down
+            this.$refs.messagepanes[0].scrollDown(); // Scroll down
           }, 100);
         }, 500);
       }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 239287d5..8175ec35 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -56,7 +56,7 @@ class ConnectionData {
 }
 
 // eslint-disable-next-line prefer-const
-let channelNames = ['#general', '#off-topic', '#help', '#labs', '#global', '#test'];
+let channelNames = ['#general', '#off-topic', '#help', '#labs'];
 
 export default class ChatModule extends VuexModule {
   toBePosted: Message[] = [];
@@ -81,9 +81,9 @@ export default class ChatModule extends VuexModule {
 
   ignoredUsers: string[] = [];
 
-  tab: Number = 5; // Selected tab. One of the chat channels
+  tab: Number = 0; // Selected tab. One of the chat channels
 
-  chatChannel: string = '#test'; // Name of channel display in top bar
+  chatChannel: string = '#general'; // Name of channel display in top bar
 
   slideoutOpen = false; // Whether slideout is open. Updated by App.vue
 
@@ -456,7 +456,7 @@ export default class ChatModule extends VuexModule {
       || this.quietList.some(e => e.username.includes(this.currentUser.username))) {
       notBanned = false;
     }
-    if (this.currentUser.username && message !== '') {
+    if (this.currentUser.username && message.replace(/\[.*\]\r?$/, '').trim() !== '') {
       let post = true;
       // Chat commands
       if (message.startsWith('/')) {
@@ -868,6 +868,7 @@ export default class ChatModule extends VuexModule {
         } else if (this.quietList.some(e => e.username.includes(this.currentUser.username))) {
           this.postMessage(new Message("Can't send messages because you are quieted"));
         } else {
+          console.log(message, message.replace(/\[.*\]\r?$/, ''));
           this.postMessage(new Message("Can't send messages because you are banned"));
         } // TODO
       }

From 01d148c6fdcbb6dc5cf006063ef20195114138dc Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 9 Jun 2020 08:47:36 -0500
Subject: [PATCH 098/223] Fixed minor styling issues

---
 src/app/assets/_custom.scss       | 11 ++++++-----
 src/app/components/Panes/Pane.vue |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/app/assets/_custom.scss b/src/app/assets/_custom.scss
index e9e792fa..26d019a1 100644
--- a/src/app/assets/_custom.scss
+++ b/src/app/assets/_custom.scss
@@ -22,6 +22,7 @@ $dark-blue: #05224b !default;
 $light-blue: #50b2dc !default;
 $med-blue: #2f94d1 !default;
 $med-dark-blue: #043468 !default;
+$dark-blue-transparent: #05224680;
 $green: #53b64e !default;
 $dark-green: #3d8e39 !default;
 $light-green: #97cc93 !default;
@@ -62,6 +63,11 @@ $colors: map-merge(
   $colors
 );
 
+// Chat size (normal)
+
+$container-width:            300px !default;
+$container-height:           500px !default;
+
 
 $yiq-contrasted-threshold:  175 !default;
 
@@ -150,11 +156,6 @@ $popover-bg:                        $dark !default;
 $popover-header-color:              $light !default;
 
 
-$dark-blue-transparent: #05224680;// Default size
-
-$container-width:300px !default;
-$container-height:500px !default;
-
 // Eterna theme
 // Bootswatch
 
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 2a4f8b30..d98e31d6 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -6,7 +6,7 @@
     <div
       ref="scrollDiv"
       style="padding: 5.6px 7px;"
-      :style="{height: `calc(100% - ${footerHeight}px - 5.6px * 1)`}"
+      :style="{height: `calc(100% - ${footerHeight}px - 5.6px * 0)`}"
     >
       <VuePerfectScrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHandle">
         <div style="height: 100%; word-wrap: break-word; white-space: normal;">
@@ -79,7 +79,7 @@
 
     @Watch('visibility')
     updateFooterHeight() {
-      this.footerHeight = this.$refs.footer.clientHeight - 5.76;
+      this.footerHeight = this.$refs.footer.clientHeight;
       this.onContentChanged();
     }
 

From 60fc41b77ad817c2b755b21a342d970d710894a0 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 9 Jun 2020 16:57:08 -0500
Subject: [PATCH 099/223] Notifications when user's name is mentioned (1)

---
 src/app/App.vue                               |  2 +-
 src/app/components/Slideout/Slideout.vue      |  9 +++++++-
 src/app/components/Slideout/SlideoutChats.vue | 13 ++++++++++-
 src/app/components/TabButton.vue              |  4 ++++
 src/app/store/chat.vuex.ts                    | 22 +++++++++++++++++++
 5 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index ee2674a0..f9081868 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -33,7 +33,7 @@
     </template>
   </DraggableDiv>
 </template>
-
+<!-- TODO: autoconvert :) to smiley, etc-->
 <script lang="ts">
   import {
     Vue, Component, Prop, Watch,
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index d4c20822..fd1c74d1 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -4,7 +4,7 @@
     class="slideout-container"
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
-    <HamburgerMenuButton v-model="checked" :notification="notifications"/>
+    <HamburgerMenuButton v-model="checked" :notification="notifications" :mentions="mentions"/>
     <v-style>
       .slideout-button:focus {
         border: {{tabbing ? 'solid white 1px' : 'none !important'}};
@@ -99,6 +99,13 @@
       return anyNotifications;
     }
 
+    get mentions() {
+      // If any channels have mentions
+      // eslint-disable-next-line max-len
+      const anyMentions = Object.values(this.$vxm.chat.channels).some(item => item?.mentioned);
+      return anyMentions;
+    }
+
     @Watch('notifications')
     notificationsChanged() {
       // Notifications indicator in the page title that shows if there are unread messages
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index c95ea5b9..d3a1d71f 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -8,7 +8,7 @@
       :description="channelDescription(name)"
       @input="activeTab = index"
       v-on:click="update"
-      :class="{ notified:isNotified(name) }"
+      :class="{ notified:isNotified(name), mentioned:isMentioned(name) }"
     >
       <Splitter />
     </TabButton>
@@ -89,6 +89,17 @@
       // If it doesn't exist, return false (default)
       return false;
     }
+
+    isMentioned(name:string) { // If given tab is notified
+      // Make sure name returns a real channel
+      const trueChannel = this.$vxm.chat.channels[name];
+      if (trueChannel) {
+        // If it exists, return whether or not it has notifications
+        return trueChannel.mentioned;
+      }
+      // If it doesn't exist, return false (default)
+      return false;
+    }
   }
 </script>
 <style scoped>
diff --git a/src/app/components/TabButton.vue b/src/app/components/TabButton.vue
index c71c9143..c0addd84 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/TabButton.vue
@@ -80,4 +80,8 @@
   .notified {
     color:#e74c3c;
   }
+
+  .mentioned {
+    color:orange !important; /* Overrides notification styles */
+  }
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 8175ec35..6d5f630f 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -29,6 +29,7 @@ interface Channel {
   maxHistoryMessages: number;
   notifications: boolean;
   notificationsEnabled: boolean;
+  mentioned: boolean,
 }
 
 class ConnectionData {
@@ -129,6 +130,7 @@ export default class ChatModule extends VuexModule {
         maxHistoryMessages: 50,
         name: channelName,
         notifications: false,
+        mentioned: false,
         notificationsEnabled: true,
       };
     });
@@ -158,12 +160,14 @@ export default class ChatModule extends VuexModule {
       if (trueChannel) {
         // Set notifications for that channel to false
         trueChannel.notifications = false;
+        trueChannel.mentioned = false;
       }
     } else {
       const trueChannel = this.channels[channel];
       if (trueChannel) {
         // Set notifications for that channel to false
         trueChannel.notifications = false;
+        trueChannel.mentioned = false;
       }
       /* Only relay the message if it didn't come from BroadcastChannel
       so there isn't a loop of messages */
@@ -185,6 +189,20 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Sets a channel as mentioned (the user's username is mentioned in an unread message)
+   * @param channel {string} - The channel notifications should be turned on for
+   */
+  @mutation
+  mention(channel: string) {
+    // Again, making sure there is an actual channel with the name
+    const trueChannel = this.channels[channel];
+    if (trueChannel) {
+      // Turning on notifications for that channel
+      trueChannel.mentioned = true;
+    }
+  }
+
   @mutation
   postMessage(message: Message) {
     if (message.target === '*') {
@@ -978,6 +996,7 @@ export default class ChatModule extends VuexModule {
           maxHistoryMessages: 50,
           notifications: false,
           notificationsEnabled: true,
+          mentioned: false,
           postedMessages: [],
           banned: BanStatus.BAN_STATUS_NORMAL,
         });
@@ -994,6 +1013,9 @@ export default class ChatModule extends VuexModule {
     if ((this.slideoutOpen || channel.name !== this.chatChannel) && channel.notificationsEnabled) {
       // Notify the channel
       this.notify(channel.name);
+      if (message.toLowerCase().includes(this.currentUser.username.toLowerCase())) {
+        this.mention(channel.name);
+      }
     } else {
       // If the user is in the channel and the slideout is closed
       this.readChannel(channel.name); // Set the channel to read

From f85adc9cedd10b47d337976743d6ac74eb8f67b0 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 9 Jun 2020 17:10:53 -0500
Subject: [PATCH 100/223] Notifications when user's name is mentioned (2)

---
 src/app/assets/hamburger-mention.png       | Bin 0 -> 275 bytes
 src/app/components/HamburgerMenuButton.vue |   8 +++++++-
 src/app/components/Slideout/Slideout.vue   |   2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 src/app/assets/hamburger-mention.png

diff --git a/src/app/assets/hamburger-mention.png b/src/app/assets/hamburger-mention.png
new file mode 100644
index 0000000000000000000000000000000000000000..670a0c108cae3359f3e988ac381b87494fb5edb5
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^l0YoR!3HEv_nU76QjEnx?oJHr&dIz4a$Hg)JkxxA
z8MJ_G4hF{dOa>N^5+IfWVg?501&j>LK$;OGwtxvPE4hFf&K3hHytSC2A4t`Dx;Tb-
z@Fu4$5c+ZcfWUzbQxa{v3NP~X_3-epH_Rw%xXLtRqd<3p&8L_Dy(JsIJz(?Mv2=y{
z;V<*K8YUFKcr5I+Zb5{c#K$WiJw^H|+SL-fWUV&wB(N+^$f}+x$T8vU62BwLvpZUC
tYjh4i+8L;LN6}zbOJO^&nB=Y}!VKQuBYATFDZT<Z$kWx&Wt~$(697P{P$~cb

literal 0
HcmV?d00001

diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/HamburgerMenuButton.vue
index e3c210da..12803aba 100644
--- a/src/app/components/HamburgerMenuButton.vue
+++ b/src/app/components/HamburgerMenuButton.vue
@@ -2,7 +2,7 @@
   <span
     class="hamburger"
     @click="$emit('input', !value)"
-    :class="{notified:notification}"
+    :class="{notified:notification, mentioned:mention}"
   />
 </template>
 
@@ -17,6 +17,9 @@
 
     @Prop()
     notification!: boolean;
+
+    @Prop()
+    mention!: boolean;
   }
 </script>
 <style scoped>
@@ -34,4 +37,7 @@
   background-size: 62.5% 55%;
   background-position:bottom 10px left 11px;
 }
+.mentioned {
+  background-image: url("../assets/hamburger-mention.png") !important;
+}
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index fd1c74d1..6f9fd6b7 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -4,7 +4,7 @@
     class="slideout-container"
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
-    <HamburgerMenuButton v-model="checked" :notification="notifications" :mentions="mentions"/>
+    <HamburgerMenuButton v-model="checked" :notification="notifications" :mention="mentions"/>
     <v-style>
       .slideout-button:focus {
         border: {{tabbing ? 'solid white 1px' : 'none !important'}};

From 98f69f6078b0cc445e0027c3300748b2719fe0fd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 9 Jun 2020 21:15:00 -0500
Subject: [PATCH 101/223] Convert :) and text emoticons to Unicode emoji

---
 src/app/App.vue            | 1 -
 src/app/store/chat.vuex.ts | 6 +++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index f9081868..4de96cb4 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -33,7 +33,6 @@
     </template>
   </DraggableDiv>
 </template>
-<!-- TODO: autoconvert :) to smiley, etc-->
 <script lang="ts">
   import {
     Vue, Component, Prop, Watch,
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 6d5f630f..b21e4ca3 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -464,7 +464,11 @@ export default class ChatModule extends VuexModule {
     ) => {
       this.postMessage(new Message(message, channel, user, isAction));
     };
-    let message = rawMessage.trim();
+    let message = rawMessage.trim()
+      .replace(':)', '🙂')
+      .replace('(:', '🙂')
+      .replace('):', '🙁')
+      .replace(':(', '🙁');
     const oldMessage = message;
     message = `${message} [${this.usernameColor}]`; // Message with tags added on
     let isAction = false;

From 39bd7f1472ee97fb7705ee0db7ed92ad6801ada7 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 9 Jun 2020 21:26:04 -0500
Subject: [PATCH 102/223] Fixed toolbar alignment

---
 src/app/components/Emoticons/EmoticonButton.vue     | 2 +-
 src/app/components/Emoticons/MarkdownWrapButton.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
index fa1e86b7..d83e9d66 100644
--- a/src/app/components/Emoticons/EmoticonButton.vue
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -24,7 +24,7 @@
     position: relative;
     width:30px;
     height:25px;
-    padding-top:1px;
+    padding-top:2px;
     text-align:center;
   }
   #emoticon-button-container :hover {
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index e6b487a7..d9e9b986 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -62,5 +62,6 @@
   #action {
     font-size:12px;
     padding-left:1px;
+    vertical-align:text-bottom;
   }
 </style>

From bda18c38d6a870d8763ff70b74a68d62c5aa441c Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 10 Jun 2020 13:54:49 -0500
Subject: [PATCH 103/223] Remade the settings menu

---
 src/app/components/MinimizationTriangle.vue   |  27 +-
 .../components/Slideout/SlideoutSettings.vue  | 294 +++++++++++-------
 2 files changed, 198 insertions(+), 123 deletions(-)

diff --git a/src/app/components/MinimizationTriangle.vue b/src/app/components/MinimizationTriangle.vue
index 41d115c9..6a37326a 100644
--- a/src/app/components/MinimizationTriangle.vue
+++ b/src/app/components/MinimizationTriangle.vue
@@ -2,7 +2,9 @@
   <div
     class="minimization-triangle"
     style="float: right;"
-    :class="{'flipped': value}"
+    :class="{'flipped': value && !settings,
+    'settings-flipped': value && settings,
+    'settings':settings}"
     @click="$emit('input', !value)"
   />
 </template>
@@ -15,6 +17,9 @@
   export default class MinimizationTriangle extends Vue {
     @Prop()
     value!: boolean;
+
+    @Prop()
+    settings !: boolean;
   }
 </script>
 
@@ -29,24 +34,24 @@
     width: 35px;
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
-    animation-name: minimization-triangle-rotation-from;
-    animation-duration: 0.2s;
+    transition: transform 0.2s;
   }
 
-  @keyframes minimization-triangle-rotation-to { /* Animates the rotation to minimized state */
-    from {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
-    to {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
+  .minimization-triangle.settings-flipped {
+    transform: rotate(-90deg);
+    -webkit-transform: rotate(-90deg);
+    // animation: minimization-triangle-rotation-from-settings 0.2s !important;
+    transition: transform 0.2s;
   }
 
-  @keyframes minimization-triangle-rotation-from { /* Animates rotation to uniminimized state */
-    to {transform: rotate(0deg); -webkit-transform: rotate(0deg);}
-    from {transform: rotate(90deg); -webkit-transform: rotate(90deg);}
+  .settings {
+    // animation: minimization-triangle-rotation-to-settings 0.2s !important;
+    transition: transform 0.2s;
   }
 
   .minimization-triangle.flipped { /* Button in minimized state */
     transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
-    animation-name: minimization-triangle-rotation-to;
-    animation-duration: 0.2s;
+    transition: transform 0.2s;
   }
 </style>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index a858efff..294a16a3 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -1,18 +1,26 @@
 <template>
   <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <section>
-      <h5>Text Size</h5>
-      <input v-model="size" type=number min=10 max=18>
-      <p id='font-size-p'>Default is 14</p>
-      <p
-        id='font-warning'
-        v-show="size < 10 || size > 18" >
-        Font size must be a number, greater than 10, and less than 18
-      </p>
+      <h5 class="heading" >Text Size</h5>
+      <MinimizationTriangle style="display:inline-block" settings="true" v-model="textSizeOpen" />
+      <transition name="settings-slide">
+      <div v-show="!textSizeOpen" class="settings-content-container">
+        <input v-model="size" type=number min=10 max=18>
+        <p id='font-size-p'>Default is 14</p>
+        <p
+          id='font-warning'
+          v-show="size < 10 || size > 18" >
+          Font size must be a number, greater than 10, and less than 18
+        </p>
+      </div>
+      </transition>
     </section>
     <section>
-      <h5>Ignored</h5>
-      <table style="width:175px">
+      <h5 class="heading" >Ignored</h5>
+      <MinimizationTriangle style="display:inline-block" settings="true" v-model="ignoredOpen" />
+      <transition name="settings-slide">
+      <div v-show="!ignoredOpen" class="settings-content-container">
+      <table style="width:175px" >
         <tr v-for="user in ignoredUsers" :key="user.Username">
           <button
             :style="{ fontSize:`${fontSize * 11 / 14}px` }"
@@ -33,116 +41,139 @@
           Unignore All
         </button></tr>
       </table>
+      </div>
+      </transition>
     </section>
     <section>
-      <h5>Notifications</h5>
-      <h6>Ignored</h6>
-      <table>
-        <tr v-for="channel in channels" :key="channel.name">
-          <td>{{channel.name}}</td>
-          <td>
-            <button
-              style="width:100%"
-              @click="toggleNotificationsEnabled(channel.name)"
-              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="btn settings-button"
-            >
-              {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
-            </button>
-          </td>
-        </tr>
-        <tr>
-          <td class='footer'>
-            <button
-              style="width:100%"
-              :disabled="anyNotificationsDisabled"
-              @click="enableAll"
-              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="btn settings-button"
-            >
-              Enable all
-            </button>
-          </td>
-          <td class='footer'>
-            <button
-              style="width:100%"
-              :disabled="anyNotificationsEnabled"
-              @click="disableAll"
-              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="btn settings-button"
-            >
-              Disable all
-            </button>
-          </td>
-        </tr>
-      </table>
-      <h6>Indicator</h6>
-      <p>
-        This will appear in the page title if you have notifications
-      </p>
-      <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
+      <h5 class="heading" >Notifications</h5>
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        v-model="notificationsOpen" />
+      <transition name="settings-slide">
+      <div v-show="!notificationsOpen" class="settings-content-container">
+        <h6>Ignored</h6>
+        <table>
+          <tr v-for="channel in channels" :key="channel.name">
+            <td>{{channel.name}}</td>
+            <td>
+              <button
+                style="width:100%"
+                @click="toggleNotificationsEnabled(channel.name)"
+                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+                class="btn settings-button"
+              >
+                {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class='footer'>
+              <button
+                style="width:100%"
+                :disabled="anyNotificationsDisabled"
+                @click="enableAll"
+                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+                class="btn settings-button"
+              >
+                Enable all
+              </button>
+            </td>
+            <td class='footer'>
+              <button
+                style="width:100%"
+                :disabled="anyNotificationsEnabled"
+                @click="disableAll"
+                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+                class="btn settings-button"
+              >
+                Disable all
+              </button>
+            </td>
+          </tr>
+        </table>
+        <h6>Indicator</h6>
+        <p>
+          This will appear in the page title if you have notifications
+        </p>
+        <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
+      </div>
+      </transition>
     </section>
     <section>
-      <h5>Username Color</h5>
-      <ColorPicker />
+      <h5 class="heading" >Username Color</h5>
+      <MinimizationTriangle style="display:inline-block" settings="true" v-model="colorOpen" />
+      <transition name="settings-slide">
+      <ColorPicker v-show="!colorOpen" class="settings-content-container" />
+      </transition>
     </section>
     <section>
-      <h5>Toolbar Features</h5>
-      <p>
-        These enable you to send emoticons and formatted text.
-      </p>
-      <table>
-        <tr>
-          <td class="feature-button-container left-side">
-            <button
-              @click="toggleMarkdown"
-              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="btn settings-button feature-button" >
-              {{markdownChatFeatures ? 'Disable' : 'Enable'}} markdown
-            </button>
-          </td>
-          <td class="feature-button-container">
-            <button
-              @click="toggleEmoticons"
-              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="btn settings-button feature-button" >
-              {{emoticonChatFeatures ? 'Disable' : 'Enable'}} emoticons
+      <h5 class="heading" >Toolbar Features</h5>
+      <MinimizationTriangle style="display:inline-block" settings="true" v-model="toolbarOpen" />
+      <transition name="settings-slide">
+      <div v-show="!toolbarOpen" class="settings-content-container">
+        <p>
+          These enable you to send emoticons and formatted text.
+        </p>
+        <table>
+          <tr>
+            <td class="feature-button-container left-side">
+              <button
+                @click="toggleMarkdown"
+                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+                class="btn settings-button feature-button" >
+                {{markdownChatFeatures ? 'Disable' : 'Enable'}} markdown
+              </button>
+            </td>
+            <td class="feature-button-container">
+              <button
+                @click="toggleEmoticons"
+                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+                class="btn settings-button feature-button" >
+                {{emoticonChatFeatures ? 'Disable' : 'Enable'}} emoticons
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class="feature-button-container left-side">
+              <button
+                @click="disableAllChatFeatures"
+                :disabled="!allChatFeatures"
+                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+                class="btn settings-button feature-button" >
+                Disable all
+              </button>
+            </td>
+            <td class="feature-button-container">
+              <button
+                @click="enableAllChatFeatures"
+                :disabled="allChatFeatures"
+                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+                style="margin-top:1px;"
+                class="btn settings-button feature-button" >
+                Enable all
             </button>
-          </td>
-        </tr>
-        <tr>
-          <td class="feature-button-container left-side">
-            <button
-              @click="disableAllChatFeatures"
-              :disabled="!allChatFeatures"
-              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              class="btn settings-button feature-button" >
-              Disable all
-            </button>
-          </td>
-          <td class="feature-button-container">
-            <button
-              @click="enableAllChatFeatures"
-              :disabled="allChatFeatures"
-              :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-              style="margin-top:1px;"
-              class="btn settings-button feature-button" >
-              Enable all
-           </button>
-          </td>
-        </tr>
-      </table>
+            </td>
+          </tr>
+        </table>
+      </div>
+      </transition>
     </section>
     <section>
-      <h5>Operator</h5>
-      <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
-      <button
-        @click="$emit('auth')"
-        :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-        class="btn settings-button"
-        v-show="!isOper" >
-          Log in as operator
-      </button>
+      <h5 class="heading" >Operator</h5>
+      <MinimizationTriangle style="display:inline-block" settings="true" v-model="operOpen" />
+      <transition name="settings-slide">
+      <div v-show="!operOpen" class="settings-content-container">
+        <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
+        <button
+          @click="$emit('auth')"
+          :style="{ fontSize:`${fontSize * 11 / 14}px` }"
+          class="btn settings-button"
+          v-show="!isOper" >
+            Log in as operator
+        </button>
+      </div>
+      </transition>
     </section>
   </div>
 </template>
@@ -157,6 +188,7 @@
   import Slideout from './Slideout.vue';
   import { Channel } from '../../store/chat.vuex';
   import ColorPicker from './ColorPicker/ColorPicker.vue';
+  import MinimizationTriangle from '../MinimizationTriangle.vue';
 
   Vue.use(BootstrapVue);
 
@@ -165,9 +197,24 @@
       Username,
       ConnectButton,
       ColorPicker,
+      MinimizationTriangle,
     },
   })
   export default class SlideoutSettings extends Vue {
+    testOpen = true;
+
+    notificationsOpen = true;
+
+    colorOpen = true;
+
+    operOpen = true;
+
+    toolbarOpen = true;
+
+    textSizeOpen = true;
+
+    ignoredOpen = true;
+
     size:string = '14'; // font size
 
     indicator:string = '(!)';
@@ -397,7 +444,7 @@
   color:#f39c12;
 }
 section { /* 'Block' of settings */
-  margin-bottom:15px;
+  margin-bottom:5px;
 }
 h3 {
   width:calc(100% - 23px); /* Accounts for padding on both sides */
@@ -458,4 +505,27 @@ table {
 .left-side {
   padding-left:0;
 }
+.heading {
+  display:inline-block;
+  margin:4px;
+  margin-left:0;
+}
+.minimization-triangle {
+  height:30px;
+  width:30px;
+}
+.settings-slide-enter-active {
+  transition: max-height 0.2s cubic-bezier(1,0,1,0);
+  max-height:1000px;
+}
+.settings-slide-leave-active {
+  transition: max-height 0.2s cubic-bezier(0,1,0,1);
+  max-height:1000px;
+}
+.settings-slide-enter, .settings-slide-leave-to {
+  max-height:0;
+}
+.settings-content-container {
+  overflow:hidden;
+}
 </style>

From 14241dc48ccfdf29a6974a944d1c5a16970a0c00 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 10 Jun 2020 14:15:16 -0500
Subject: [PATCH 104/223] Bug fix with scrollbar for new settings layout

---
 .../components/Slideout/SlideoutSettings.vue  | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index 294a16a3..a9c2e391 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -160,8 +160,10 @@
       </transition>
     </section>
     <section>
+      <li class="settings-section-header">
       <h5 class="heading" >Operator</h5>
       <MinimizationTriangle style="display:inline-block" settings="true" v-model="operOpen" />
+      </li>
       <transition name="settings-slide">
       <div v-show="!operOpen" class="settings-content-container">
         <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
@@ -445,6 +447,7 @@
 }
 section { /* 'Block' of settings */
   margin-bottom:5px;
+  position: relative;
 }
 h3 {
   width:calc(100% - 23px); /* Accounts for padding on both sides */
@@ -468,19 +471,6 @@ button { /* Unignore user button */
   height:calc(100% - 50px);
   overflow-y:auto;
 }
-
-::-webkit-scrollbar { /* Scrollbar track */
-    width: 10px;
-}
-
-::-webkit-scrollbar-corner {
-  background-color:black;
-}
-
-::-webkit-scrollbar-thumb { /* Scrollbar bar */
-  background-color:#343a40;
-  border-radius:5px;
-}
 li { /* Remove bullets */
   list-style-type: none;
 }
@@ -513,6 +503,9 @@ table {
 .minimization-triangle {
   height:30px;
   width:30px;
+  position:absolute;
+  right:10px;
+  top:0px;
 }
 .settings-slide-enter-active {
   transition: max-height 0.2s cubic-bezier(1,0,1,0);

From 33cec85453457a070eef60c6c1548b10d8b5ffdd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 11 Jun 2020 16:27:34 -0500
Subject: [PATCH 105/223] Tooltips, more chat commands for operators

---
 package-lock.json                           | 108 +++++++++++---------
 package.json                                |  12 +--
 src/app/App.vue                             |   6 +-
 src/app/components/Messages/UserTooltip.vue |  88 ++++++++++++++++
 src/app/components/Messages/Username.vue    |  49 +++++++--
 src/app/components/Panes/MessagePane.vue    |   2 +-
 src/app/store/chat.vuex.ts                  | 100 +++++++++++++++++-
 7 files changed, 295 insertions(+), 70 deletions(-)
 create mode 100644 src/app/components/Messages/UserTooltip.vue

diff --git a/package-lock.json b/package-lock.json
index 23de39b8..684bae0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3904,9 +3904,9 @@
       }
     },
     "@types/jest": {
-      "version": "25.2.3",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-25.2.3.tgz",
-      "integrity": "sha512-JXc1nK/tXHiDhV55dvfzqtmP4S3sy3T3ouV2tkViZgxY/zeUkcpQcQPGRlgF4KmWzWW5oiWYSZwtCB+2RsE4Fw==",
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.0.tgz",
+      "integrity": "sha512-/yeMsH9HQ1RLORlXAwoLXe8S98xxvhNtUz3yrgrwbaxYjT+6SFPZZRksmRKRA6L5vsUtSHeN71viDOTTyYAD+g==",
       "dev": true,
       "requires": {
         "jest-diff": "^25.2.1",
@@ -3914,9 +3914,9 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
-      "integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.5.tgz",
+      "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==",
       "dev": true
     },
     "@types/keygrip": {
@@ -3990,9 +3990,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "14.0.11",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.11.tgz",
-      "integrity": "sha512-lCvvI24L21ZVeIiyIUHZ5Oflv1hhHQ5E1S25IRlKIXaRkVgmXpJMI3wUJkmym2bTbCe+WoIibQnMVAU3FguaOg=="
+      "version": "14.0.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
+      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA=="
     },
     "@types/node-fetch": {
       "version": "2.5.7",
@@ -4125,12 +4125,12 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.1.0.tgz",
-      "integrity": "sha512-D52KwdgkjYc+fmTZKW7CZpH5ZBJREJKZXRrveMiRCmlzZ+Rw9wRVJ1JAmHQ9b/+Ehy1ZeaylofDB9wwXUt83wg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.2.0.tgz",
+      "integrity": "sha512-t9RTk/GyYilIXt6BmZurhBzuMT9kLKw3fQoJtK9ayv0tXTlznXEAnx07sCLXdkN3/tZDep1s1CEV95CWuARYWA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "3.1.0",
+        "@typescript-eslint/experimental-utils": "3.2.0",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
         "semver": "^7.3.2",
@@ -4146,33 +4146,33 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.1.0.tgz",
-      "integrity": "sha512-Zf8JVC2K1svqPIk1CB/ehCiWPaERJBBokbMfNTNRczCbQSlQXaXtO/7OfYz9wZaecNvdSvVADt6/XQuIxhC79w==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.2.0.tgz",
+      "integrity": "sha512-UbJBsk+xO9dIFKtj16+m42EvUvsjZbbgQ2O5xSTSfVT1Z3yGkL90DVu0Hd3029FZ5/uBgl+F3Vo8FAcEcqc6aQ==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "3.1.0",
+        "@typescript-eslint/typescript-estree": "3.2.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.1.0.tgz",
-      "integrity": "sha512-NcDSJK8qTA2tPfyGiPes9HtVKLbksmuYjlgGAUs7Ld2K0swdWibnCq9IJx9kJN8JJdgUJSorFiGaPHBgH81F/Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.2.0.tgz",
+      "integrity": "sha512-Vhu+wwdevDLVDjK1lIcoD6ZbuOa93fzqszkaO3iCnmrScmKwyW/AGkzc2UvfE5TCoCXqq7Jyt6SOXjsIlpqF4A==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "3.1.0",
-        "@typescript-eslint/typescript-estree": "3.1.0",
+        "@typescript-eslint/experimental-utils": "3.2.0",
+        "@typescript-eslint/typescript-estree": "3.2.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.1.0.tgz",
-      "integrity": "sha512-+4nfYauqeQvK55PgFrmBWFVYb6IskLyOosYEmhH3mSVhfBp9AIJnjExdgDmKWoOBHRcPM8Ihfm2BFpZf0euUZQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.2.0.tgz",
+      "integrity": "sha512-uh+Y2QO7dxNrdLw7mVnjUqkwO/InxEqwN0wF+Za6eo3coxls9aH9kQ/5rSvW2GcNanebRTmsT5w1/92lAOb1bA==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -10465,9 +10465,9 @@
       }
     },
     "eslint": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.1.0.tgz",
-      "integrity": "sha512-DfS3b8iHMK5z/YLSme8K5cge168I8j8o1uiVmFCgnnjxZQbCGyraF8bMl7Ju4yfBmCuxD7shOF7eqGkcuIHfsA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.2.0.tgz",
+      "integrity": "sha512-B3BtEyaDKC5MlfDa2Ha8/D6DsS4fju95zs0hjS3HdGazw+LNayai38A25qMppK37wWGWNYSPOR6oYzlz5MHsRQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
@@ -10476,10 +10476,10 @@
         "cross-spawn": "^7.0.2",
         "debug": "^4.0.1",
         "doctrine": "^3.0.0",
-        "eslint-scope": "^5.0.0",
+        "eslint-scope": "^5.1.0",
         "eslint-utils": "^2.0.0",
-        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^7.0.0",
+        "eslint-visitor-keys": "^1.2.0",
+        "espree": "^7.1.0",
         "esquery": "^1.2.0",
         "esutils": "^2.0.2",
         "file-entry-cache": "^5.0.1",
@@ -10509,9 +10509,9 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
-          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
+          "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
           "dev": true
         },
         "ansi-styles": {
@@ -10525,9 +10525,9 @@
           }
         },
         "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -10569,15 +10569,21 @@
             "esutils": "^2.0.2"
           }
         },
+        "eslint-visitor-keys": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.2.0.tgz",
+          "integrity": "sha512-WFb4ihckKil6hu3Dp798xdzSfddwKKU3+nGniKF6HfeW6OLd2OUDEPP7TcHtB5+QXOKg2s6B2DaMPE1Nn/kxKQ==",
+          "dev": true
+        },
         "espree": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/espree/-/espree-7.0.0.tgz",
-          "integrity": "sha512-/r2XEx5Mw4pgKdyb7GNLQNsu++asx/dltf/CI8RFi9oGHxmQFgvLbc5Op4U6i8Oaj+kdslhJtVlEZeAqH5qOTw==",
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.1.0.tgz",
+          "integrity": "sha512-dcorZSyfmm4WTuTnE5Y7MEN1DyoPYy1ZR783QW1FJoenn7RailyWFsq/UL6ZAAA7uXurN9FIpYyUs3OfiIW+Qw==",
           "dev": true,
           "requires": {
-            "acorn": "^7.1.1",
+            "acorn": "^7.2.0",
             "acorn-jsx": "^5.2.0",
-            "eslint-visitor-keys": "^1.1.0"
+            "eslint-visitor-keys": "^1.2.0"
           }
         },
         "glob-parent": {
@@ -11045,9 +11051,9 @@
       }
     },
     "eslint-scope": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz",
-      "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.0.tgz",
+      "integrity": "sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==",
       "dev": true,
       "requires": {
         "esrecurse": "^4.1.0",
@@ -23733,9 +23739,9 @@
       "dev": true
     },
     "v8-compile-cache": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz",
-      "integrity": "sha512-usZBT3PW+LOjM25wbqIlZwPeJV+3OSz3M1k1Ws8snlW39dZyYL9lOGC5FgPVHfk0jKmjiDV8Z0mIbVQPiwFs7g==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz",
+      "integrity": "sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==",
       "dev": true
     },
     "validate-npm-package-license": {
@@ -24192,9 +24198,9 @@
       "integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
     },
     "vuex-class-component": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/vuex-class-component/-/vuex-class-component-2.3.2.tgz",
-      "integrity": "sha512-Xai4E4oQavo9QpWMeuU9n/HBG+IxTc9Do7E9Lae3KOoWhYAPA2H/lb1201t1ALg2hvJpro4sfntrVFGrQMQ0bA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/vuex-class-component/-/vuex-class-component-2.3.3.tgz",
+      "integrity": "sha512-v3rqf4dZo+tw0YOSt4vDuBu7K5FwD/NX7CiXNovAqZ4l4xRxmCbzN60DnLiHiD3Ngh1CqQB8aQ/KyXQrwI0//Q==",
       "requires": {
         "object.getownpropertydescriptors": "^2.0.3",
         "rimraf": "^2.6.3"
diff --git a/package.json b/package.json
index eabccce7..0ddb7ca9 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@types/irc": "^0.3.33",
-    "@types/node": "^14.0.11",
+    "@types/node": "^14.0.13",
     "@types/punycode": "^2.1.0",
     "@types/vuedraggable": "^2.23.1",
     "axios": "^0.19.2",
@@ -41,13 +41,13 @@
     "vuebar": "0.0.20",
     "vuedraggable": "^2.23.2",
     "vuex": "^3.4.0",
-    "vuex-class-component": "^2.3.2"
+    "vuex-class-component": "^2.3.3"
   },
   "devDependencies": {
-    "@types/jest": "^25.2.3",
+    "@types/jest": "^26.0.0",
     "@types/markdown-it": "10.0.1",
-    "@typescript-eslint/eslint-plugin": "^3.1.0",
-    "@typescript-eslint/parser": "^3.1.0",
+    "@typescript-eslint/eslint-plugin": "^3.2.0",
+    "@typescript-eslint/parser": "^3.2.0",
     "@vue/cli": "^4.4.1",
     "@vue/cli-plugin-babel": "^4.4.1",
     "@vue/cli-plugin-e2e-nightwatch": "^4.4.1",
@@ -60,7 +60,7 @@
     "@vue/test-utils": "^1.0.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.1.0",
+    "eslint": "^7.2.0",
     "eslint-plugin-vue": "^6.2.2",
     "lint-staged": "^10.2.9",
     "node-sass": "^4.14.1",
diff --git a/src/app/App.vue b/src/app/App.vue
index 4de96cb4..0b35cc16 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -33,6 +33,9 @@
     </template>
   </DraggableDiv>
 </template>
+<!-- TODO
+- Tooltips with user info
+-->
 <script lang="ts">
   import {
     Vue, Component, Prop, Watch,
@@ -219,7 +222,8 @@
             using ref on a v-for gives an Array of VueComponents.
             It think's its just a normal MessagePane
             */
-            this.$refs.messagepanes[0].scrollDown(); // Scroll down
+            const pane = this.$refs.messagepanes[0];
+            pane.scrollDown(); // Scroll down
           }, 100);
         }, 500);
       }
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
new file mode 100644
index 00000000..8b439054
--- /dev/null
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="user-tooltip-container">
+    <ul>
+      <li class="user-tooltip-user">{{user.username}} <span class="rank">{{rank}}</span></li>
+      <li class="description">{{desc}}</li>
+    </ul>
+  </div>
+</template>
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import User from '@/types/user';
+  @Component
+  export default class UserTooltip extends Vue {
+    @Prop()
+    user!: User;
+
+    desc = '';
+
+    rank = '';
+
+    created() {
+      this.description();
+      this.findRank();
+    }
+
+    description() {
+      this.$vxm.chat.getUserInfo({
+        user: this.user,
+        callback: (d) => {
+          const data = JSON.parse(d);
+          if (d.data !== undefined) {
+            this.desc = d.data.user.profile;
+          } else {
+            this.desc = 'This user has not added a description to their profile';
+          }
+        },
+      });
+    }
+
+    findRank() {
+      this.$vxm.chat.getUserInfo({
+        user: this.user,
+        callback: (d) => {
+          const data = JSON.parse(d);
+          if (d.data !== undefined) {
+            this.rank = `#${d.data.user.rank}`;
+          } else {
+            this.rank = 'Unranked';
+          }
+        },
+      });
+    }
+  }
+</script>
+<style scoped lang="scss">
+  @import "../../assets/_custom.scss";
+  @import "~bootstrap/scss/bootstrap.scss";
+  @import '~bootstrap-vue/dist/bootstrap-vue.css';
+  @import '~vue-context/src/sass/vue-context';
+  .user-tooltip-container {
+    color:white;
+    position:absolute;
+    background-color:$med-dark-blue;
+    min-width:200px;
+    z-index:5;
+    max-width:350px;
+    border-radius:5px;
+  }
+  li {
+    padding:5px;
+    list-style-type: none;
+  }
+  ul {
+    border-radius: 5px;
+  }
+  .user-tooltip-user {
+    border-bottom:1px solid white;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+  }
+  .rank {
+    float:right;
+  }
+  .description {
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+</style>
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index a7a57c1d..5f3acf2f 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -1,21 +1,36 @@
 <template>
-  <a
-    v-if="user"
-    target="_blank"
-    class="username"
-    :style="{ color: displayedColor }"
-    :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
-  >
-    {{ user.username }}<slot/>
-  </a>
+  <span>
+    <a
+      v-if="user"
+      target="_blank"
+      class="username"
+      :style="{ color: displayedColor }"
+      :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
+      @mouseover="hovered = true"
+      @mouseout="hovered = false"
+    >
+      {{ user.username }}<slot/>
+    </a>
+    <transition name="fade">
+      <UserTooltip
+        v-if="hovered"
+        :user="user"
+      />
+    </transition>
+  </span>
 </template>
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
   import User from '@/types/user';
+  import UserTooltip from './UserTooltip.vue';
 
 
-  @Component
+  @Component({
+    components: {
+      UserTooltip,
+    },
+  })
   export default class Username extends Vue {
     @Prop()
     user!: User;
@@ -23,6 +38,8 @@
     @Prop()
     color?: string;
 
+    hovered = false;
+
     private defaultColor = '#ffffff';
 
     get computedColor() {
@@ -85,4 +102,16 @@
     text-decoration: none;
     font-weight: bold;
   }
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter-active {
+    transition-delay: 0.75s;
+  }
+  .fade-leave-active {
+    transition-delay: 0s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 000d4a24..981ee035 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -1,6 +1,6 @@
 <template>
   <Pane ref="pane" :visibility="visibility" :data="data">
-    <ul>
+    <ul style="margin-bottom:0; padding-right:10px">
       <UserMessage
         v-for="(message, i) in data.postedMessages"
         :key="i"
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index b21e4ca3..b3571d8b 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -400,6 +400,7 @@ export default class ChatModule extends VuexModule {
     const parts = str.split(' ');
     const time = parts[0].substring(13, 37);
     const channel = parts[3];
+    // eslint-disable-next-line no-control-regex
     const message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
     const user = parts[1].substring(1, parts[1].indexOf('@'));
     const username = user.substring(0, user.lastIndexOf('!'));
@@ -595,6 +596,39 @@ export default class ChatModule extends VuexModule {
                 postMessage('Example: `/banlist`');
                 postMessage('You must be an operator to use this command');
                 break;
+              case 'banmask':
+                postMessage(
+                  '`/banmask`: Bans a hostmask. Hostmasks are of the form user!nick@host. To get the user or the nick, use the `user` and `nick` commands.',
+                );
+                postMessage('Usage: `/banmask <channel> <mask>`');
+                postMessage('Example: `/banmask #general ProblematicUserNick!*@*`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'unbanmask':
+                postMessage(
+                  '`/unbanmask`: Unbans a hostmask. Hostmasks are of the form user!nick@host. To get the user or the nick, use the `user` and `nick` commands.',
+                );
+                postMessage('Usage: `/unbanmask <channel> <mask>`');
+                postMessage('Example: `/unbanmask #general ProblematicUserNick!*@*`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'user':
+                postMessage(
+                  '`/user`: Gets the username corresponding to a nick',
+                );
+                postMessage('Usage: `/user <nick>`');
+                postMessage('Example: `/user MysteriousNick^293`');
+                postMessage('You must be an operator to use this command');
+                break;
+              case 'nicks':
+                postMessage(
+                  '`/nicks`: Gets the nicks for a user.',
+                );
+                postMessage('Usage: `/nicks <user>`');
+                postMessage('Example: `/nicks MysteriousUser`');
+                postMessage('You must be an operator to use this command');
+                break;
+
               case 'notice':
                 postMessage(
                   '`/notice`: Sends a notice to a channel. Sends a notice to all channels if channel argument is *.',
@@ -608,7 +642,7 @@ export default class ChatModule extends VuexModule {
                 postMessage('Available commands: help, me, ignore, ignore-list, unignore, change, emoticon');
                 postMessage('Type `/help <command>` for information on individual commands');
                 postMessage('Example: `/help ignore`');
-                postMessage(` You are ${this.oper ? '' : 'not'} logged in as an operator/moderator. Operators may use the \`/ban\`, \`/unban\`, \`/quiet\`, \`/unquiet\`, \`/notice\`, and \`/kick\` commands`);
+                postMessage(` You are ${this.oper ? '' : 'not'} logged in as an operator/moderator. Operators may use the \`/ban\`, \`/unban\`, \`/quiet\`, \`/unquiet\`, \`/notice\`, \`/banmask\`, \`/unbanmask\`, \`/user\`, \`/nick\`, and \`/kick\` commands`);
                 postMessage(
                   'Additional commands available via LinkBot (see the [wiki](http://eternawiki.org/wiki/index.php5/HELP) for more information)',
                 );
@@ -858,6 +892,57 @@ export default class ChatModule extends VuexModule {
               postMessage('You are not an operator or moderator and do not have permission to post messages');
             }
             break;
+          case 'banmask':
+            if (this.oper) {
+              if (params.length > 1) {
+                this.client?.ban(params.split(' ')[0], params.split(' ')[1]);
+              } else {
+                postMessage('Please include command parameters. Type `/help banmask` for more usage instructions');
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to ban masks');
+            }
+            break;
+          case 'unbanmask':
+            if (this.oper) {
+              if (params.length > 1) {
+                this.client?.unban(params.split(' ')[0], params.split(' ')[1]);
+              } else {
+                postMessage('Please include command parameters. Type `/help unbanmask` for more usage instructions');
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to unban masks');
+            }
+            break;
+          case 'nicks':
+            if (this.oper) {
+              if (params.length > 0) {
+                const nickslist = this.connectedUsers[params.trim()]?.nicks;
+                const withoutDuplicates = Array.from(new Set(nickslist));
+                postMessage(`Nicks for user ${params.trim()}: ${withoutDuplicates.join(', ')}`);
+              } else {
+                postMessage('Please include command parameters. Type `/help nicks` for more usage instructions');
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to view nicks for a user');
+            }
+            break;
+          case 'user':
+            if (this.oper) {
+              if (params.length > 0) {
+                const users = this.connectedUsers;
+                const userlist = Object.keys(users);
+                const nickslist = userlist.filter(e => users[e]?.nicks.includes(params.trim()));
+                postMessage(`Nick ${params.trim()} belongs to user ${nickslist[0]}`);
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to view the user for a nick');
+            }
+            break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;
@@ -975,6 +1060,19 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @action()
+  async getUserInfo(arg: { user: User, callback: (data: any | undefined) => any}) {
+    const { uid } = arg.user || { uid: 0 };
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+        arg.callback(xmlHttp.responseText);
+      }
+    };
+    xmlHttp.open('GET', `https://eternagame.org/get/?type=my_user&uid=${uid}`, true); // true for asynchronous
+    xmlHttp.send(null);
+  }
+
   @action()
   async onNoticeReceived({
     message, target, tags, time, nick, type,

From 18c86f4f426a32d2a8e3ff1374cd5221bffd8c9a Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 12 Jun 2020 11:56:13 -0500
Subject: [PATCH 106/223] Fixed user being able to send one message before ban
 kicks in

---
 src/app/store/chat.vuex.ts | 68 +++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index b3571d8b..e4c1a1de 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -105,10 +105,6 @@ export default class ChatModule extends VuexModule {
 
   operLoginPassword = '';
 
-  banList: Ban[] = [];
-
-  quietList: Ban[] = [];
-
   auth = false; // When oper login modal should show
 
   userToPrivMsg = ''; // User being private messaged
@@ -465,22 +461,33 @@ export default class ChatModule extends VuexModule {
     ) => {
       this.postMessage(new Message(message, channel, user, isAction));
     };
-    let message = rawMessage.trim()
+    let message = rawMessage.trim() // Replaces text emoticons with Unicode emoji
       .replace(':)', '🙂')
       .replace('(:', '🙂')
       .replace('):', '🙁')
       .replace(':(', '🙁');
-    const oldMessage = message;
     message = `${message} [${this.usernameColor}]`; // Message with tags added on
     let isAction = false;
     // No posting as annon or if nothing has been actually posted
-    let notBanned = true;
-    if (this.banList.some(e => e.username.includes(this.currentUser.username))
-      || this.quietList.some(e => e.username.includes(this.currentUser.username))) {
-      notBanned = false;
-    }
     if (this.currentUser.username && message.replace(/\[.*\]\r?$/, '').trim() !== '') {
       let post = true;
+      let banned = false;
+      let quieted = false;
+      this.client?.banlist(channel, (e) => { // Check if user is banned before sending message
+        const bans = e.bans.map(i => new Ban(i.banned, i.channel)); // Make an array of Ban objects
+        // If the user is banned
+        if (bans.some(b => b.username.includes(this.currentUser.username))) {
+          const userBans = bans.filter(b => b.username.includes(this.currentUser.username));
+          if (userBans.some(b => b.username.includes('m;'))) { // If any bans are quiet bans
+            quieted = true;
+            this.onMuted(channel);
+          }
+          if (userBans.some(b => !b.username.includes('m;'))) { // If any bans are NOT quiet bans
+            banned = true;
+            this.onBanned(channel);
+          }
+        }
+      });
       // Chat commands
       if (message.startsWith('/')) {
         message = message.replace(/\[.+\]$/, '');
@@ -836,19 +843,12 @@ export default class ChatModule extends VuexModule {
             break;
           case 'banlist':
             if (this.oper) {
-              this.banList = []; // Resets banlist and quietlist to avoid duplicates
-              this.quietList = [];
               channelNames.forEach((c) => { // For each channel
                 this.client?.channel(c).banlist((e) => {
                   // eslint-disable-next-line dot-notation
                   e.bans.forEach((b) => {
                     // Type is not actualy IrcUser[]; it's an object. This code works
                     const ban = new Ban(b.banned, b.channel);
-                    if (ban.username.includes('m;')) { // If a quiet ban
-                      this.quietList.push(ban); // Add to quiet list
-                    } else { // If not, add to ban list
-                      this.banList.push(ban);
-                    }
                     postMessage(`${ban.username
                       .replace('*!', '') // Remove hostmask formatting
                       .replace('@*', '')
@@ -948,22 +948,12 @@ export default class ChatModule extends VuexModule {
             break;
         }
       }
-      this.client?.channel(channel).banlist(e => { // Update banlist when message sent
-        e.bans.forEach(b => {
-          const ban = new Ban(b.banned, b.channel);
-          if (ban.username.startsWith('m;')) {
-            this.quietList.push(ban);
-          } else {
-            this.banList.push(ban);
-          }
-        });
-      });
       if (post) {
-        if (!this.channels[channel]?.banned && notBanned) {
+        if (!this.channels[channel]?.banned && !banned && !quieted) {
           if (isAction) {
-            this.client!.action(channel, `${message}`);
+              this.client!.action(channel, `${message}`);
           } else {
-            this.client!.say(channel, message);
+              this.client!.say(channel, message);
           }
           const name = User.parseUsername(channel);
           // If it's a private message, send to the username, not the nick
@@ -972,10 +962,9 @@ export default class ChatModule extends VuexModule {
           } else {
             this.postMessage(new Message(message, channel, this.currentUser, isAction));
           }
-        } else if (this.quietList.some(e => e.username.includes(this.currentUser.username))) {
+        } else if (quieted) {
           this.postMessage(new Message("Can't send messages because you are quieted"));
         } else {
-          console.log(message, message.replace(/\[.*\]\r?$/, ''));
           this.postMessage(new Message("Can't send messages because you are banned"));
         } // TODO
       }
@@ -1060,13 +1049,18 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  /* This code will only work once the chat is put in the website
+  From my observations, the get requests only work coming from eternagame.org
+  Once the chat is moved there, they will go through
+  Until then, it gives an error and anything that relies on it gives a default fallback
+  */
   @action()
   async getUserInfo(arg: { user: User, callback: (data: any | undefined) => any}) {
-    const { uid } = arg.user || { uid: 0 };
+    const { uid } = arg.user || { uid: 0 }; // UID needed for get request
     const xmlHttp = new XMLHttpRequest();
-    xmlHttp.onreadystatechange = function () {
+    xmlHttp.onreadystatechange = function cb() {
       if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
-        arg.callback(xmlHttp.responseText);
+        arg.callback(xmlHttp.responseText); // Calls callback after response
       }
     };
     xmlHttp.open('GET', `https://eternagame.org/get/?type=my_user&uid=${uid}`, true); // true for asynchronous
@@ -1075,7 +1069,7 @@ export default class ChatModule extends VuexModule {
 
   @action()
   async onNoticeReceived({
-    message, target, tags, time, nick, type,
+    message, target, time, nick, type,
   }: Irc.MessageEventArgs) {
     const user = this.connectedUsers[User.parseUsername(nick)];
     const msg = new Message(message, target, user, false, true);

From 3ccb7d68cb8e8d4b61ae306cb2aca02729cfb541 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 12 Jun 2020 14:07:09 -0500
Subject: [PATCH 107/223] Bug fixes, various cleanup, etc.

---
 .../{TabButton.vue => ChatSelectButton.vue}   |  6 +--
 src/app/components/DraggableDiv.vue           |  3 +-
 src/app/components/HamburgerMenuButton.vue    |  6 +--
 src/app/components/Messages/ActionMenu.vue    | 43 ++++++++++++++++---
 src/app/components/Panes/MessagePane.vue      |  4 +-
 src/app/components/ScalableInput.vue          |  5 ++-
 .../Slideout/ColorPicker/ColorSlider.vue      |  4 +-
 src/app/components/Slideout/Slideout.vue      | 16 +++++--
 src/app/components/Slideout/SlideoutChats.vue | 13 ++----
 .../components/Slideout/SlideoutUsername.vue  |  6 +--
 src/app/store/chat.vuex.ts                    | 38 ++++++++++++++++
 11 files changed, 110 insertions(+), 34 deletions(-)
 rename src/app/components/{TabButton.vue => ChatSelectButton.vue} (93%)

diff --git a/src/app/components/TabButton.vue b/src/app/components/ChatSelectButton.vue
similarity index 93%
rename from src/app/components/TabButton.vue
rename to src/app/components/ChatSelectButton.vue
index c0addd84..14ca220b 100644
--- a/src/app/components/TabButton.vue
+++ b/src/app/components/ChatSelectButton.vue
@@ -1,4 +1,4 @@
-<template> <!-- Repurposed for chat selector buttons -->
+<template>
   <Button
     :class="{active: isActive}"
     @click="$emit('input');"
@@ -18,7 +18,7 @@
 
 
   @Component
-  export default class TabButton extends Vue {
+  export default class ChatSelectButton extends Vue {
     @Prop()
     name!: string;
 
@@ -77,7 +77,7 @@
     text-align:justify;
     margin-left:5px;
   }
-  .notified {
+  .notified { /* Text color when notified */
     color:#e74c3c;
   }
 
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 04506966..6d56b4fa 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -52,9 +52,8 @@
         }
       },
       elementDrag(event) {
-        if (!this.disabled) {
+        if (!this.disabled) { // If dragging isn't disabled
           event.preventDefault();
-          this.$refs.draggableContainer.style.transition = 'none !important';
           this.positions.movementX = this.positions.clientX - event.clientX;
           this.positions.movementY = this.positions.clientY - event.clientY;
           this.positions.clientX = event.clientX;
diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/HamburgerMenuButton.vue
index 12803aba..9c739f68 100644
--- a/src/app/components/HamburgerMenuButton.vue
+++ b/src/app/components/HamburgerMenuButton.vue
@@ -23,7 +23,7 @@
   }
 </script>
 <style scoped>
-.hamburger {
+.hamburger { /* Normal hamburger icon */
   display:inline-block;
   width:40px;
   height:40px;
@@ -32,12 +32,12 @@
   background-size: 50% 45%;
   background-position: bottom 10px left 11px;
 }
-.notified {
+.notified { /* Notified hamburger icon */
   background-image: url("../assets/hamburger-notification.png");
   background-size: 62.5% 55%;
   background-position:bottom 10px left 11px;
 }
-.mentioned {
+.mentioned { /* Mentioned hamburger icon */
   background-image: url("../assets/hamburger-mention.png") !important;
 }
 </style>
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 38d62c4e..cec32e8e 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <VueContext ref="menu" class="action-menu-container">
+  <VueContext ref="menu" class="action-menu-container" @open="opened">
     <li
       style="border-bottom: 1px solid white"
     >
@@ -21,12 +21,12 @@
         Ignore User
       </a>
     </li>
-    <li v-if="oper">
+    <li v-if="oper && !banned">
       <a @click="ban">
         Ban User
       </a>
     </li>
-    <li v-if="oper">
+    <li v-if="oper && banned">
       <a @click="unban">
         Unban User
       </a>
@@ -36,12 +36,12 @@
         Kick User
       </a>
     </li>
-    <li v-if="oper">
+    <li v-if="oper && !quieted">
       <a @click="quiet">
         Quiet User
       </a>
     </li>
-    <li v-if="oper">
+    <li v-if="oper && quieted">
       <a @click="unquiet">
         Unquiet User
       </a>
@@ -120,6 +120,39 @@
     openReportModal(defaults: { report: boolean; ignore: boolean }) {
       this.$vxm.chat.openReportModal({ message: this.message, defaults });
     }
+
+    userBanned() { // Gets user is banned; used to show/hide 'ban' and 'unban' buttons
+      this.$vxm.chat.bans({
+        user: this.message.user,
+        channel: this.message.target,
+        cb: (e) => {
+          if (e) {
+            this.banned = e;
+          }
+        },
+      });
+    }
+
+    userQuieted() { // Gets user is quieted; used to show/hide 'quiet' and 'unquiet' buttons
+      this.$vxm.chat.quiets({
+        user: this.message.user,
+        channel: this.message.target,
+        cb: (e) => {
+          if (e) {
+            this.quieted = e;
+          }
+        },
+      });
+    }
+
+    opened() { // Update ban and quiet status when menu is opened
+      this.userBanned();
+      this.userQuieted();
+    }
+
+    quieted = false;
+
+    banned = false;
   }
 </script>
 
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 981ee035..c82dba9e 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -100,11 +100,11 @@
       this.$refs.input.alone = this.anyChatFeatures;
     }
 
-    get updateMessage() {
+    get updateMessage() { // New value of input when up arrow is pressed
       return this.$vxm.chat.updateMessage;
     }
 
-    get inputUpdate() {
+    get inputUpdate() { // Whether input should update to the above value
       return this.$vxm.chat.inputUpdate;
     }
 
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index b3929b58..1c91dc57 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="overflow: hidden; position: relative;">
-    <v-style>
+    <v-style> <!-- Dynamically add focus ring if tab key is pressed -->
       .scalable-input:focus {
         box-shadow: {{bshadow}};
       }
@@ -72,6 +72,7 @@
       this.$refs.textarea.value = '';
     }
 
+    // Adds and removes border radius on the bottom depending on whether the toolbar/menu is visible
     get radius() {
       if (!this.alone) {
         return '8px';
@@ -83,7 +84,7 @@
       return this.$vxm.settings.fontSize;
     }
 
-    get bshadow() {
+    get bshadow() { // Used to conditionally add focus ring if user has pressed the tab key
       if (this.$vxm.chat.tabbing) {
         2;
       } else {
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
index 0022ecbe..ca35f999 100644
--- a/src/app/components/Slideout/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/ColorPicker/ColorSlider.vue
@@ -35,7 +35,7 @@
 
     get calculateOffset() { // Position of text on slider thumb
       const percent = this.sliderValue / (255); // Slider value as percent
-      // Slider width - thumb width. Means slider can go from 0 to 80 pixels
+      // Range = slider width - thumb width. Means slider can go from 0 to 80 pixels
       const range = (120 - 40);
       const percentPixels = percent * range; //
       return `${percentPixels + 1}px`;
@@ -46,7 +46,7 @@
       this.$emit('sliderChanged', this.sliderValue);
     }
 
-    getGradient() {
+    getGradient() { // Applies color gradient
       return `-webkit-linear-gradient(left,${this.gradientStart},${this.gradientEnd})`;
     }
 
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 6f9fd6b7..f087116a 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -30,7 +30,7 @@
       <SlideoutChats
         v-if="chatSelected"
       />
-      <SlideoutUser v-if="userSelected"/>
+      <SlideoutUser v-if="userSelected" />
       <SlideoutSettings v-if="settingsSelected" @auth="$emit('auth')"/>
     </span>
   </div>
@@ -68,10 +68,10 @@
     // For hamburger
     checked = false;
 
-    @Prop()
+    @Prop() // Whether chat is minimized
     minimizedValue !: boolean;
 
-    get tabbing() {
+    get tabbing() { // If the tab key has been pressed - used to conditionally enable focus rings
       return this.$vxm.chat.tabbing;
     }
 
@@ -133,6 +133,16 @@
         this.$vxm.chat.readChannel(this.currentTab);
       }
     }
+
+    created() {
+      /* Prevents all the text from being highlighted
+      if the slideout is opened and closed too quickly */
+      document.addEventListener('mousedown', (e) => {
+        if (e.detail > 1) {
+          e.preventDefault();
+        }
+      }, false);
+    }
   }
 </script>
 
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/SlideoutChats.vue
index d3a1d71f..b4111770 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/SlideoutChats.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="position:relative; overflow-y:auto; height:calc(100% - 40px)">
-    <TabButton
+    <ChatSelectButton
       v-for="({name}, index) in messageTabs"
       :key="name"
       :isActive="activeTab === index"
@@ -11,7 +11,7 @@
       :class="{ notified:isNotified(name), mentioned:isMentioned(name) }"
     >
       <Splitter />
-    </TabButton>
+    </ChatSelectButton>
   </div>
 </template>
 <script lang="ts">
@@ -19,14 +19,14 @@
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
-  import TabButton from '@/components/TabButton.vue';
+  import ChatSelectButton from '@/components/ChatSelectButton.vue';
   import Slideout from './Slideout.vue';
   import Splitter from './Splitter.vue';
 
   @Component({
     components: {
       MinimizationTriangle,
-      TabButton,
+      ChatSelectButton,
       Splitter,
     },
   })
@@ -112,9 +112,4 @@
   background-color:#343a40; /* Make scrollbar visible */
   border-radius:5px;
 }
-
-::-webkit-scrollbar-corner {
-  background-color:#343a40;
-  border-radius:5px;
-}
 </style>
diff --git a/src/app/components/Slideout/SlideoutUsername.vue b/src/app/components/Slideout/SlideoutUsername.vue
index 3ff71f80..bfd65c7c 100644
--- a/src/app/components/Slideout/SlideoutUsername.vue
+++ b/src/app/components/Slideout/SlideoutUsername.vue
@@ -10,7 +10,7 @@
         @click.prevent="openContextMenu"
         v-show="hover && user.username"
       >
-        &vellip;
+        &vellip; <!-- ⋮ -->
       </a>
       <ActionMenu
         ref="contextMenu"
@@ -39,10 +39,10 @@
     @Prop()
     user !: User;
 
-    hover = '';
+    hover = false;
 
     messageFrom(user:User) {
-      return new Message('Reporting user ', '', user);
+      return new Message('Reporting user ', '*', user);
     }
 
     $refs!: {
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index e4c1a1de..3be2dc74 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1300,6 +1300,44 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  @action()
+  async bans(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
+    const { username } = arg.user;
+    const { channel, cb } = arg;
+    if (channel === '*') {
+      channelNames.forEach(c => {
+        this.client?.banlist(c, (e) => {
+          const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+          cb(banmap.some(i => i.username.includes(username) && !i.username.includes('m;')));
+        });
+      });
+    } else {
+      this.client?.banlist(channel, (e) => {
+        const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+        cb(banmap.some(i => i.username.includes(username) && !i.username.includes('m;')));
+      });
+    }
+  }
+
+  @action()
+  async quiets(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
+    const { username } = arg.user;
+    const { channel, cb } = arg;
+    if (channel === '*') {
+      channelNames.forEach(c => {
+        this.client?.banlist(c, (e) => {
+          const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+          cb(banmap.some(i => i.username.includes(username) && i.username.includes('m;')));
+        });
+      });
+    } else {
+      this.client?.banlist(channel, (e) => {
+        const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+        cb(banmap.some(i => i.username.includes(username) && i.username.includes('m;')));
+      });
+    }
+  }
+
   @action()
   async updateTimer() {
     this.connectionData.currentTimer -= 1;

From 8f1ec6e873ec91d1c3cd9729e201b05a48897129 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 12 Jun 2020 15:20:05 -0500
Subject: [PATCH 108/223] Resizable

---
 src/app/App.vue            |  32 ++++++++++++++++++++++++++++++--
 src/app/assets/resizer.png | Bin 0 -> 369 bytes
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/app/assets/resizer.png

diff --git a/src/app/App.vue b/src/app/App.vue
index 0b35cc16..a9f6cdba 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,10 +1,11 @@
 <template>
   <DraggableDiv
     id="eterna-chat"
-    style="overflow-y: hidden;"
+    style="overflow-y: hidden; resize:both"
     :style="{animation: animation }"
     :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
     :enabled="!fullSize"
+    :resize="scroll"
   >
     <template slot="main">
       <slideout style="z-index: 1;" :minimizedValue="!minimized" @auth="showAuth = true"></slideout>
@@ -34,7 +35,7 @@
   </DraggableDiv>
 </template>
 <!-- TODO
-- Tooltips with user info
+- Sizing customization?
 -->
 <script lang="ts">
   import {
@@ -233,6 +234,12 @@
 
   loaded = true;
 
+  scroll() { // When chat is resized, scroll down
+    this.$refs.messagepanes.forEach(i => {
+      i.scrollDown();
+    });
+  }
+
   /**
    * Logs the user in as an operator
    */
@@ -310,6 +317,10 @@
   top: 0px;
   left: 0px;
   transition: width 200ms, height 200ms, margin 1s, position 1s;
+  min-width: 250px; /* Bounds on chat resizing */
+  min-height:400px;
+  max-width: 400px;
+  max-height: 600px;
 }
 
 .eternaChatNormal {
@@ -385,4 +396,21 @@
 .minimizedChat { /* Removes light blue background when chat is minimzed and only shows top bar */
   height:40px;
 }
+::-webkit-resizer { /* Hide the resizer if possible */
+  display:none;
+}
+#eterna-chat::after {
+  background-color:$med-dark-blue; /* Cover up the default icon if there is one */
+  border-top-left-radius: 8px; /* Don't cut into the chat */
+  position:absolute; /* Position over default icon */
+  bottom:5px;
+  right:5px;
+  width:15px;
+  height:15px;
+  content:"";
+  background-image:url("./assets/resizer.png"); /* Show custom resizer */
+  background-repeat:no-repeat;
+  background-size: 100% 100%;
+  pointer-events:none; /* Clicks and drags go down to the resizer */
+}
 </style>
diff --git a/src/app/assets/resizer.png b/src/app/assets/resizer.png
new file mode 100644
index 0000000000000000000000000000000000000000..71261c02655ec8b2e8f07c99e9be95712c15e3b1
GIT binary patch
literal 369
zcmV-%0gnEOP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T70003vNkl<ZSV!&H
zT@HdU3;<vo6AvJ#ffH~mb}cRdr_pzPaAqbZ%f{9pLc17!l+}H9D;>Z|>EpfklBqxv
zB#HS0C0UDOn$KYA4`Oh&J-7wLa3RJFNWqx_sW=m04F>>_URPaW3>PwH2BhH3fK;3b
zkb_ePa&f9a=iFtQrpML|I#esQb&>~Ce=r``_x*KQmRtNC2d8o$jFDWN3NTC(mfJb^
zl&r#`ODqAUF@NCREdFi=_iTJlRz(^7c8GBtyLq1PoC&#O*}$}Y4a3l_>v|ZH1+4Ve
zGXT7}*`bWjPq2kPDQWx^05*mMw8DK_U3SDyGH8iIf!4SxumxNZ*a~hFSgR_@c@C>m
z?0Qxtr2q>YIfGU>63`My0$MLQc@JhsamJ$~RtVL?<h%;o^Y|!5HlM*abO6Zl@WaZ$
P00000NkvXXu0mjf3CEVM

literal 0
HcmV?d00001


From 4dd3741ea8a3e0445eb652d0442a00071eda95ad Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 12 Jun 2020 22:36:58 -0500
Subject: [PATCH 109/223] Operators join #ops-notifications on login

---
 src/app/App.vue            | 3 ++-
 src/app/store/chat.vuex.ts | 6 ++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index a9f6cdba..1d311e6b 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -35,7 +35,8 @@
   </DraggableDiv>
 </template>
 <!-- TODO
-- Sizing customization?
+- Ops automatically join #ops-notifications when they log in
+- Users can choose to join #test or #global
 -->
 <script lang="ts">
   import {
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 3be2dc74..a5b3845b 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -419,6 +419,7 @@ export default class ChatModule extends VuexModule {
       // Iterates through all channels
       channelNames.forEach(e => this.client?.raw(`SAMODE ${e} +o ${i}`));
     });
+    this.joinOpsChannel();
   }
 
   /**
@@ -430,6 +431,11 @@ export default class ChatModule extends VuexModule {
     setTimeout(this.setChannelOps, 100); // Make sure events happen in order
   }
 
+  @action()
+  async joinOpsChannel() {
+    this.client?.join('#ops-notifications');
+  }
+
   @action()
   async connect() {
     this.client!.connect();

From d89af745acb5ad6e4a19fafa13626ecfb50de6dc Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 12 Jun 2020 22:38:19 -0500
Subject: [PATCH 110/223] Removed redundant todos

---
 src/app/App.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 1d311e6b..9c3dae11 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -34,10 +34,6 @@
     </template>
   </DraggableDiv>
 </template>
-<!-- TODO
-- Ops automatically join #ops-notifications when they log in
-- Users can choose to join #test or #global
--->
 <script lang="ts">
   import {
     Vue, Component, Prop, Watch,

From 3abdd90cee2f077f6038270acfdf6f2d54b50fe4 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 13 Jun 2020 11:00:08 -0500
Subject: [PATCH 111/223] Slideout closes when a click is outside the slideout
 and in the chat

---
 package-lock.json                        |  8 ++++++++
 package.json                             |  2 ++
 src/app/App.vue                          | 19 ++++++++++++++++++-
 src/app/components/Slideout/Slideout.vue | 11 +++++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 684bae0e..f4adfa9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4080,6 +4080,14 @@
       "integrity": "sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==",
       "dev": true
     },
+    "@types/vue-clickaway": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@types/vue-clickaway/-/vue-clickaway-2.2.0.tgz",
+      "integrity": "sha512-bPRisDZhtscJ+2PmGIAyEBB7+ep6j/FFrPGr5kpWzAFylRxCcZrw70tlXUwslgZtSYZEU1e6QJkSOPHFw21XXQ==",
+      "requires": {
+        "vue": "^2.0.0"
+      }
+    },
     "@types/vuedraggable": {
       "version": "2.23.1",
       "resolved": "https://registry.npmjs.org/@types/vuedraggable/-/vuedraggable-2.23.1.tgz",
diff --git a/package.json b/package.json
index 0ddb7ca9..8a6db45f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@types/irc": "^0.3.33",
     "@types/node": "^14.0.13",
     "@types/punycode": "^2.1.0",
+    "@types/vue-clickaway": "^2.2.0",
     "@types/vuedraggable": "^2.23.1",
     "axios": "^0.19.2",
     "babel-polyfill": "^6.26.0",
@@ -32,6 +33,7 @@
     "tslib": "^2.0.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
+    "vue-clickaway": "^2.2.2",
     "vue-context": "^5.2.0",
     "vue-context-menu": "^2.0.6",
     "vue-js-modal": "^1.3.35",
diff --git a/src/app/App.vue b/src/app/App.vue
index 9c3dae11..76525d9a 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -8,7 +8,11 @@
     :resize="scroll"
   >
     <template slot="main">
-      <slideout style="z-index: 1;" :minimizedValue="!minimized" @auth="showAuth = true"></slideout>
+      <slideout
+        style="z-index: 1;"
+        minimizedValue="!minimized"
+        ref="slideout"
+        @auth="showAuth = true" />
       <transition name="fade">
         <div class="chat-content" v-if="!minimized">
           <MessagePane
@@ -136,6 +140,7 @@
     login: OperLogin,
     privmsgmodal: PrivateMessageModal,
     messagepanes: MessagePane,
+    slideout: Slideout,
   };
 
   get slideoutOpen() {
@@ -273,6 +278,7 @@
       this.$refs.reportDialog.open(payload);
     });
     window.addEventListener('keydown', this.key);
+    window.addEventListener('click', this.close); // Closes slideout when clicked outside
   }
 
   postScreenshot(url:string, puzzleName:string) {
@@ -297,6 +303,17 @@
       this.minimization = false;
     }
   }
+
+  beforeDestroy() {
+    window.removeEventListener('click', this.close);
+  }
+
+  close(ev: MouseEvent) {
+    if (!this.$refs.slideout.$el.contains(ev.target as Node) // If the click is not in the slideout
+    && this.$el.contains(ev.target as Node)) { // And it is in the chat
+      this.$vxm.chat.slideoutOpen = false; // Close the slideout
+    }
+  }
   }
 </script>
 
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index f087116a..4c702b3c 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -92,6 +92,17 @@
       return this.$vxm.chat.chatChannel;
     }
 
+    get vxmOpen() { // Checks to see if the slideout should be closed (click outside)
+      return this.$vxm.chat.slideoutOpen;
+    }
+
+    @Watch('vxmOpen')
+    close() {
+      if (!this.vxmOpen) { // If it should be closed, do so
+        this.checked = false;
+      }
+    }
+
     get notifications() {
       // If any channels have notifications
       // eslint-disable-next-line max-len

From f73ff87e55844400bad08a2af8868af0907f6c7d Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 15 Jun 2020 16:15:50 -0500
Subject: [PATCH 112/223] Bug fixes, etc

---
 package-lock.json                          | 23 ++++++++-
 package.json                               |  1 +
 src/app/App.vue                            | 55 +++++++++++++++-------
 src/app/components/DraggableDiv.vue        | 16 +++++++
 src/app/components/Messages/ActionMenu.vue |  4 ++
 src/app/store/chat.vuex.ts                 | 41 +++++++++++++++-
 6 files changed, 120 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f4adfa9e..d7b5fc00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9136,6 +9136,11 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-element-queries": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz",
+      "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
+    },
     "css-loader": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.3.tgz",
@@ -13535,6 +13540,11 @@
       "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
       "dev": true
     },
+    "intersection-observer": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.5.1.tgz",
+      "integrity": "sha512-Zd7Plneq82kiXFixs7bX62YnuZ0BMRci9br7io88LwDyF3V43cQMI+G5IiTlTNTt+LsDUppl19J/M2Fp9UkH6g=="
+    },
     "into-stream": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
@@ -16708,8 +16718,7 @@
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
@@ -24128,6 +24137,16 @@
         "vue-class-component": "^7.1.0"
       }
     },
+    "vue-resize-directive": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-resize-directive/-/vue-resize-directive-1.2.0.tgz",
+      "integrity": "sha512-LmpFexQcl1XYyz3DQrTrq3Efgj50MKEON60nR9MMAq1D2ZtXFg1WDcy1wy1T0SeduNtIu9hos2aLTsJUplvjlQ==",
+      "requires": {
+        "css-element-queries": "^1.0.2",
+        "intersection-observer": "^0.5.0",
+        "lodash.debounce": "^4.0.8"
+      }
+    },
     "vue-resource": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.5.1.tgz",
diff --git a/package.json b/package.json
index 8a6db45f..7e75b928 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "vue-js-modal": "^1.3.35",
     "vue-perfect-scrollbar": "^0.2.1",
     "vue-property-decorator": "^8.4.2",
+    "vue-resize-directive": "^1.2.0",
     "vue-resource": "^1.5.1",
     "vuebar": "0.0.20",
     "vuedraggable": "^2.23.2",
diff --git a/src/app/App.vue b/src/app/App.vue
index 76525d9a..de29b471 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -2,10 +2,15 @@
   <DraggableDiv
     id="eterna-chat"
     style="overflow-y: hidden; resize:both"
-    :style="{animation: animation }"
+    :style="{ 'min-height': minimized ? '40px' : '400px',
+    /* Makes sure minimum height is changed to allow for chat to be minimized*/
+    top: `${initialPosition[1]}px`,
+    left:`${initialPosition[0]}px`,
+    width: `${initialSize[0] || 300}px`,
+    height: `${initialSize[1] || 500}px`}"
     :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
-    :enabled="!fullSize"
-    :resize="scroll"
+    :enabled="!fullSize /* Disables dragging when chat is fullsize*/"
+    v-resize:debounce="resized"
   >
     <template slot="main">
       <slideout
@@ -36,6 +41,9 @@
       <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
       <OpenWindowButton v-model="fullSize" />
     </template>
+    <template slot="footer">
+      <div id="resize-handle" v-show="!minimized"/>
+    </template>
   </DraggableDiv>
 </template>
 <script lang="ts">
@@ -46,6 +54,7 @@
   import {
     openDB, deleteDB, wrap, unwrap,
   } from 'idb';
+  import resize from 'vue-resize-directive';
   import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
@@ -78,6 +87,9 @@
     OperLogin,
     PrivateMessageModal,
   },
+  directives: {
+    resize,
+  },
 })
   export default class App extends Vue {
   @Prop()
@@ -143,6 +155,14 @@
     slideout: Slideout,
   };
 
+  get initialPosition() {
+    return this.$vxm.chat.initialPosition;
+  }
+
+  get initialSize() {
+    return this.$vxm.chat.initialSize;
+  }
+
   get slideoutOpen() {
     return this.$vxm.chat.slideoutOpen;
   }
@@ -236,12 +256,6 @@
 
   loaded = true;
 
-  scroll() { // When chat is resized, scroll down
-    this.$refs.messagepanes.forEach(i => {
-      i.scrollDown();
-    });
-  }
-
   /**
    * Logs the user in as an operator
    */
@@ -314,6 +328,14 @@
       this.$vxm.chat.slideoutOpen = false; // Close the slideout
     }
   }
+
+  resized() {
+    const w = this.$el.scrollWidth;
+    const h = this.$el.scrollHeight;
+    if (localStorage && (w !== 300 || h !== 500)) {
+      localStorage.size = JSON.stringify(`${w} ${h}`);
+    }
+  }
   }
 </script>
 
@@ -328,11 +350,8 @@
   font-weight: 300;
   background-color: $med-dark-blue;
   position: relative; /* Makes sure everything is placed with respect to it, not to its parent */
-  top: 0px;
-  left: 0px;
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 250px; /* Bounds on chat resizing */
-  min-height:400px;
   max-width: 400px;
   max-height: 600px;
 }
@@ -396,24 +415,26 @@
   height: 30px;
 }
 .eternaChatFull { /* Full size chat */
-  width: 90vw; /* Takes up 90% of the viewport*/
-  height: 90vh;
+  width: 90vw !important; /* Takes up 90% of the viewport*/
+  height: 90vh !important;
+  max-width: 90vw !important; /* Overrides resize limits */
+  max-height: 90vh !important;
   margin-right: 5vw; /* Margins take up the rest*/
   margin-left: 5vw;
   margin-top: 5vh;
   margin-bottom: 5vh;
   box-shadow: 0 0 2vw 20vw $dark-blue-transparent; /* Creates blur effect */
-  transition: left 1s, top 1s;
+  transition: all 1s;
   left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
   top:0px !important;
 }
 .minimizedChat { /* Removes light blue background when chat is minimzed and only shows top bar */
-  height:40px;
+  height:40px !important;
 }
 ::-webkit-resizer { /* Hide the resizer if possible */
   display:none;
 }
-#eterna-chat::after {
+#resize-handle {
   background-color:$med-dark-blue; /* Cover up the default icon if there is one */
   border-top-left-radius: 8px; /* Don't cut into the chat */
   position:absolute; /* Position over default icon */
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 6d56b4fa..f8508503 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -64,6 +64,22 @@
         }
       },
       closeDragElement() {
+        /* Chat position is stored relative to the center of the page - this is because
+        of how the site is laid out. It means that the chat won't move if the browser resizes. */
+        if (localStorage) {
+          // Sets new chat position in localStorage when drag is ended
+          let x = this.$refs.draggableContainer.style.left; // Gets current X and Y
+          let y = this.$refs.draggableContainer.style.top;
+          x = x.replace('px', '');
+          y = y.replace('px', '');
+          const point = [Number(x), Number(y)];
+          const midpointX = window.innerWidth / 2; // Gets center
+          const midpointY = window.innerHeight / 2;
+          const midpoint = [midpointX, midpointY];
+          // Gets chat's offset from the center
+          const offset = [midpoint[0] - point[0], midpoint[1] - point[1]];
+          localStorage.position = JSON.stringify(`${offset[0]} ${offset[1]}`); // Save to localStorage
+        }
         document.onmouseup = null;
         document.onmousemove = null;
       },
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index cec32e8e..1523781d 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -166,6 +166,10 @@
     padding:0px 5px;
   }
 
+  li > a:focus {
+    background-color: transparent !important;
+  }
+
   li:hover {
     background-color:$blue !important;
   }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index a5b3845b..316decbf 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -57,7 +57,7 @@ class ConnectionData {
 }
 
 // eslint-disable-next-line prefer-const
-let channelNames = ['#general', '#off-topic', '#help', '#labs'];
+let channelNames = ['#general', '#off-topic', '#help', '#labs', '#test'];
 
 export default class ChatModule extends VuexModule {
   toBePosted: Message[] = [];
@@ -117,6 +117,10 @@ export default class ChatModule extends VuexModule {
 
   rawHistoryMessages: string[] = []; // Stores history messages
 
+  initialPosition: [number, number] = [0, 0];
+
+  initialSize: [number, number] = [0, 0];
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -303,6 +307,31 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.position) {
+        try {
+          const data = JSON.parse(localStorage.position);
+          const values = data.split(' '); // Gets X and Y
+          const midpoint = [window.innerWidth / 2, window.innerHeight / 2]; // Gets center
+          const point = [Number(values[0]), Number(values[1])];
+          // Gets position relative to center
+          this.initialPosition = [midpoint[0] - point[0], midpoint[1] - point[1]];
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of chat location',
+          );
+        }
+      }
+      if (localStorage.size) {
+        try {
+          const data = JSON.parse(localStorage.size);
+          const values = data.split(' '); // Gets width and height
+          this.initialSize = [values[0], values[1]];
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of chat size',
+          );
+        }
+      }
     }
 
     if (process.env.VUE_APP_SERVER_URL) {
@@ -949,6 +978,16 @@ export default class ChatModule extends VuexModule {
               postMessage('You are not an operator or moderator and do not have permission to view the user for a nick');
             }
             break;
+          case 'changenick':
+            if (this.oper) {
+              if (params.length > 0) {
+                this.client?.changeNick(params);
+              }
+            } else {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to change your nick');
+            }
+            break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;

From 79cc289d8db659ea002470923e01b2afacb195af Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 16 Jun 2020 15:08:14 -0500
Subject: [PATCH 113/223] Custom nicks for opers

---
 src/app/components/Messages/Username.vue |  7 ++++-
 src/app/store/chat.vuex.ts               | 40 +++++++++++++++++++++---
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 5f3acf2f..ee79cf1d 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -9,7 +9,7 @@
       @mouseover="hovered = true"
       @mouseout="hovered = false"
     >
-      {{ user.username }}<slot/>
+      {{ uniqueNicks[0] || user.username }}<slot/>
     </a>
     <transition name="fade">
       <UserTooltip
@@ -57,6 +57,11 @@
       return c;
     }
 
+    get uniqueNicks() { // Gets custom nick
+      // Returns an array of nicks that aren't in the standard user^connectionid format
+      return this.user.nicks.filter(e => !e.match(/^.+\^\d{3}/));
+    }
+
     get displayedColor() {
       let red;
       let green;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 316decbf..0bc86d0a 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -121,6 +121,8 @@ export default class ChatModule extends VuexModule {
 
   initialSize: [number, number] = [0, 0];
 
+  customNick !: string;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -332,6 +334,15 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.nick) {
+        try {
+          this.customNick = localStorage.nick;
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of custom nick',
+          );
+        }
+      }
     }
 
     if (process.env.VUE_APP_SERVER_URL) {
@@ -386,7 +397,7 @@ export default class ChatModule extends VuexModule {
       })
       .on('nick in use', this.onNickInUse)
       .on('irc error', this.onIrcError)
-      .on('raw', async (e) => {
+      .on('raw', (e) => {
         if (e.from_server) {
           const commandNumber = parseInt(e.line.substring(20, 23), 10);
           if (e.line.match(/^:irc\.eternagame\.org .+\^\d{3} #*.* /)) {
@@ -481,7 +492,10 @@ export default class ChatModule extends VuexModule {
   @action()
   async generateNick() {
     const connectionId = Math.floor(Math.random() * 1000);
-    const nick = `${this.currentUser.username}^${connectionId}`;
+    let nick = `${this.currentUser.username}^${connectionId}`;
+    if (this.customNick) {
+      nick = this.customNick;
+    }
     this.currentUser.nicks.push(nick);
     this.nick = nick;
   }
@@ -530,7 +544,7 @@ export default class ChatModule extends VuexModule {
         let parts = message.match(/^\/([^ ]+)/);
         const command = parts ? parts[1] : '';
         parts = message.match(/^\/\w+ (.+)/);
-        const params = parts ? parts[1] : '';
+        let params = parts ? parts[1] : '';
         const first = params.split(' ')[0];
         const second = params.split(' ')[1];
         switch (command) {
@@ -680,6 +694,14 @@ export default class ChatModule extends VuexModule {
                 postMessage('Example: `/notice * Hello, everyone`');
                 postMessage('You must be an operator to use this command');
                 break;
+              case 'changenick':
+                postMessage(
+                  '`/changenick`: Changes your nickname that others see when you send a message',
+                );
+                postMessage('Usage: `/changenick <newnick>`');
+                postMessage('Example: `/changenick NewNick`');
+                postMessage('You must be an operator to use this command');
+                break;
               default:
                 postMessage('Available commands: help, me, ignore, ignore-list, unignore, change, emoticon');
                 postMessage('Type `/help <command>` for information on individual commands');
@@ -972,6 +994,8 @@ export default class ChatModule extends VuexModule {
                 const userlist = Object.keys(users);
                 const nickslist = userlist.filter(e => users[e]?.nicks.includes(params.trim()));
                 postMessage(`Nick ${params.trim()} belongs to user ${nickslist[0]}`);
+              } else {
+                postMessage('Please include command parameters. Type `/help user` for more usage instructions');
               }
             } else {
               this.auth = true;
@@ -981,7 +1005,15 @@ export default class ChatModule extends VuexModule {
           case 'changenick':
             if (this.oper) {
               if (params.length > 0) {
-                this.client?.changeNick(params);
+                params = params.trim();
+                this.nick = params;
+                this.currentUser.nicks = [params];
+                this.client?.raw(`NICK ${params}`);
+                if (localStorage) {
+                  localStorage.nick = params;
+                }
+              } else {
+                postMessage('Please include command parameters. Type `/help changenick` for more usage instructions');
               }
             } else {
               this.auth = true;

From a95b6726265262d373a746987e3c18d34be8202f Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 16 Jun 2020 15:46:35 -0500
Subject: [PATCH 114/223] Fixed certain nicks being displayed incorrectly

---
 src/app/components/Messages/Username.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index ee79cf1d..fd9baf9b 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -59,7 +59,7 @@
 
     get uniqueNicks() { // Gets custom nick
       // Returns an array of nicks that aren't in the standard user^connectionid format
-      return this.user.nicks.filter(e => !e.match(/^.+\^\d{3}/));
+      return this.user.nicks.filter(e => !e.match(/^.+\^\d+/));
     }
 
     get displayedColor() {

From 17f0f63c75a34084c7ca3dcd43915f16bc65b1bb Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 16 Jun 2020 23:20:03 -0500
Subject: [PATCH 115/223] Away status

---
 src/app/App.vue                               | 29 +++++++++++++++++++
 src/app/components/Messages/UserTooltip.vue   | 14 +++++----
 src/app/components/Messages/Username.vue      | 23 +++++++++++++++
 src/app/store/chat.vuex.ts                    | 24 ++++++++++++++-
 .../modules/irc-framework/irc-framework.d.ts  |  1 +
 5 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index de29b471..febc723c 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -46,6 +46,18 @@
     </template>
   </DraggableDiv>
 </template>
+<!-- TODO
+- Reconnect button
+  - Style to align with theme
+  - Hide input when visible
+- Cleanup
+  - Comment code
+  - Remove unused imports
+  - Group functions and properties
+- Away status
+  - Allow it to be manually set
+  - Automatically set it after a certain amount of time with no interaction
+-->
 <script lang="ts">
   import {
     Vue, Component, Prop, Watch,
@@ -114,6 +126,8 @@
 
   showAuth = false;
 
+  windowFocused = true;
+
   get showPrivMsgModal() {
     return this.$vxm.chat.privMsgModal;
   }
@@ -293,6 +307,21 @@
     });
     window.addEventListener('keydown', this.key);
     window.addEventListener('click', this.close); // Closes slideout when clicked outside
+    window.addEventListener('focus', () => {
+      this.windowFocused = true;
+    });
+    window.addEventListener('blur', () => {
+      this.windowFocused = false;
+    });
+  }
+
+  @Watch('windowFocused')
+  focusChanged() {
+    if (this.windowFocused) {
+      this.$vxm.chat.setUnaway();
+    } else {
+      this.$vxm.chat.setAway();
+    }
   }
 
   postScreenshot(url:string, puzzleName:string) {
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 8b439054..68573f4e 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="user-tooltip-container">
     <ul>
-      <li class="user-tooltip-user">{{user.username}} <span class="rank">{{rank}}</span></li>
+      <li class="user-tooltip-user">{{user.username}}</li>
+      <li class="user-tooltip-rank"><span class="rank">{{rank}}</span></li>
       <li class="description">{{desc}}</li>
     </ul>
   </div>
@@ -35,6 +36,7 @@
           }
         },
       });
+            this.desc = 'This user has not added a description to their profile';
     }
 
     findRank() {
@@ -49,6 +51,7 @@
           }
         },
       });
+      this.rank = 'Unranked';
     }
   }
 </script>
@@ -61,9 +64,8 @@
     color:white;
     position:absolute;
     background-color:$med-dark-blue;
-    min-width:200px;
-    z-index:5;
-    max-width:350px;
+    z-index: 5;
+    width:95%;
     border-radius:5px;
   }
   li {
@@ -78,8 +80,8 @@
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
   }
-  .rank {
-    float:right;
+  .user-tooltip-rank {
+    border-bottom:1px solid white;
   }
   .description {
     border-bottom-right-radius: 5px;
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index fd9baf9b..a6b02b62 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -9,6 +9,11 @@
       @mouseover="hovered = true"
       @mouseout="hovered = false"
     >
+      <span
+        class="away-indicator"
+        :title="`${user.username} is away`" >
+        {{ awayIndicator }}
+      </span>
       {{ uniqueNicks[0] || user.username }}<slot/>
     </a>
     <transition name="fade">
@@ -57,11 +62,22 @@
       return c;
     }
 
+    awayIndicator = '';
+
     get uniqueNicks() { // Gets custom nick
       // Returns an array of nicks that aren't in the standard user^connectionid format
       return this.user.nicks.filter(e => !e.match(/^.+\^\d+/));
     }
 
+    updateIndicator() {
+      this.$vxm.chat.userStatus({
+        user: this.user.username,
+        cb: (b) => {
+          this.awayIndicator = b ? '●' : '';
+        },
+      });
+    }
+
     get displayedColor() {
       let red;
       let green;
@@ -83,6 +99,10 @@
       return this.color || this.computedColor;
     }
 
+    created() {
+      this.updateIndicator();
+    }
+
     validColor(red:string, green:string, blue:string) {
       const backgroundValue = this.brightness(4, 52, 104); // Brightness of background
       const colorValue = this.brightness( // Brightness of input color
@@ -119,4 +139,7 @@
   .fade-enter, .fade-leave-to {
     opacity: 0;
   }
+  .away-indicator {
+    color:yellow;
+  }
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 0bc86d0a..346d0ce1 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -494,7 +494,7 @@ export default class ChatModule extends VuexModule {
     const connectionId = Math.floor(Math.random() * 1000);
     let nick = `${this.currentUser.username}^${connectionId}`;
     if (this.customNick) {
-      nick = this.customNick;
+      nick = `${this.customNick}^${connectionId}`;
     }
     this.currentUser.nicks.push(nick);
     this.nick = nick;
@@ -1415,6 +1415,28 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  @action()
+  async userStatus(arg: {user:string, cb: (away: boolean) => void}) {
+    const n = this.connectedUsers[arg.user]!.nicks[0];
+    if (n === undefined) return;
+    this.client?.who(n, (e) => {
+      console.log(e, e.users[0].away);
+      arg.cb(e.users[0].away);
+    });
+  }
+
+  @action()
+  async setAway() {
+    this.client!.user.away = 'away';
+    this.client?.raw('AWAY User is currently away');
+  }
+
+  @action()
+  async setUnaway() {
+    this.client!.user.away = '';
+    this.client?.raw('AWAY');
+  }
+
   @action()
   async updateTimer() {
     this.connectionData.currentTimer -= 1;
diff --git a/src/app/types/modules/irc-framework/irc-framework.d.ts b/src/app/types/modules/irc-framework/irc-framework.d.ts
index 68494b14..574c2009 100644
--- a/src/app/types/modules/irc-framework/irc-framework.d.ts
+++ b/src/app/types/modules/irc-framework/irc-framework.d.ts
@@ -273,6 +273,7 @@ declare module 'irc-framework' {
     hostname: string;
     ident: string;
     modes: string[]; // any[]
+    away: string;
     nick: string;
   }
   class IrcChannel extends EventEmitter {

From 6e49235468af884569bba0164973b9df950da7fe Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 17 Jun 2020 18:00:20 -0500
Subject: [PATCH 116/223] General fixes and cleanup - see finished list in todo
 section of App.vue for a full list

---
 src/app/App.vue                               |  53 ++++-
 src/app/components/Messages/UserMessage.vue   |  42 +++-
 src/app/components/Messages/UserTooltip.vue   |  42 +++-
 src/app/components/Messages/Username.vue      |  46 ++--
 .../components/Slideout/SlideoutSettings.vue  | 201 +++++++++++++++---
 src/app/store/chat.vuex.ts                    | 117 +++++++---
 src/app/tools/Markdown.ts                     |  32 ++-
 src/app/types/user.ts                         |   3 +
 8 files changed, 440 insertions(+), 96 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index febc723c..e4654c36 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -54,9 +54,29 @@
   - Comment code
   - Remove unused imports
   - Group functions and properties
+  - Move unnecessary stuff out of chat.vuex
+  - Move code in chat commands to functions
+- Bug fixes
+  - Ensure features and styles are consistent across browsers
+FINISHED
+- Notifications
+  - Keywords
+- Settings
+  - Values need to be stored correctly
+  - Add option to change nick for opers
+  - Make sure emoticons can be changed there
+- Cleanup
+  - Markdown
 - Away status
-  - Allow it to be manually set
   - Automatically set it after a certain amount of time with no interaction
+  - Allow it to be manually set
+  - Don't fetch on demand - rather, update every 5 seconds (or so) and fetch values
+- Bug fixes
+  - Operator name change seems to break sometimes
+  - Optimize away/online status loading
+  - Find a way to limit unnecessary GET requests (tooltips)
+- Miscellaneous
+  - Clicking a channel name in a chat message opens the channel
 -->
 <script lang="ts">
   import {
@@ -266,6 +286,7 @@
       }
     }, 100);
     this.loaded = false;
+    this.startTimers();
   }
 
   loaded = true;
@@ -308,7 +329,9 @@
     window.addEventListener('keydown', this.key);
     window.addEventListener('click', this.close); // Closes slideout when clicked outside
     window.addEventListener('focus', () => {
-      this.windowFocused = true;
+      if (this.$vxm.chat.autoUpdateStatus) {
+        this.windowFocused = true;
+      }
     });
     window.addEventListener('blur', () => {
       this.windowFocused = false;
@@ -324,6 +347,32 @@
     }
   }
 
+  timeout = 60000;
+
+  timeoutId !: number;
+
+  onInactive() {
+    this.$vxm.chat.setAway();
+  }
+
+  resetInactiveTimer() {
+    window.clearTimeout(this.timeoutId);
+    this.beginInactiveTimer();
+  }
+
+  beginInactiveTimer() {
+    this.timeoutId = setTimeout(this.onInactive, this.timeout);
+  }
+
+  startTimers() {
+    const chat = document.getElementById('eterna-chat');
+    chat?.addEventListener('mousemove', this.resetInactiveTimer, false);
+    chat?.addEventListener('mousedown', this.resetInactiveTimer, false);
+    chat?.addEventListener('keypress', this.resetInactiveTimer, false);
+    chat?.addEventListener('touchmove', this.resetInactiveTimer, false);
+    this.beginInactiveTimer();
+  }
+
   postScreenshot(url:string, puzzleName:string) {
     this.postMessage(`${puzzleName} ${url}`, '#help');
   }
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index f9547c64..ef13f494 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -14,6 +14,7 @@
         >{{ isAction || !message.user.username ? '': ':' }}
         </Username>
         &lrm;<span
+          ref="msg"
           :style="{
             fontStyle:isNotice ? 'italic' : '',
           }"
@@ -74,11 +75,34 @@
 
     get formattedMessage(): string {
       // If there are tags, remove them before the message is seen
-      if (this.messageHasTags(this.message.message)) {
-        const tagsStringPosition = this.message.message.search(/\[(.+,)*.+\]\r?$/);
-        return md.renderInline(this.message.message.substring(0, tagsStringPosition));
+      const msg = this.message.message;
+      if (this.messageHasTags(msg)) {
+        const tagsStringPosition = msg.search(/\[(.+,)*.+\]\r?$/);
+        return md.renderInline(msg.substring(0, tagsStringPosition));
       } // If not, just show the message
-      return md.renderInline(this.message.message);
+      return md.renderInline(msg);
+    }
+
+    mounted() {
+      // Gets all of the channel links from markdown
+     const channelLinks = this.$refs.msg.getElementsByClassName('channel-link');
+     // Spread operators converts HTMLCollectionOf<Element> to HTMLElement[]
+     // Iterates through each channel link
+     [...channelLinks].forEach(l => {
+       // Adds event listener for click
+       l.addEventListener('click', (ev) => {
+         // When channel link is clicked, change channel
+         const channel = l.innerHTML;
+         // Makes sure channel exists
+         if (Object.keys(this.$vxm.chat.channels).includes(channel)) {
+          this.$vxm.chat.chatChannel = channel; // Change the channel name in the header
+          // Find the tab number and set it
+          this.$vxm.chat.tab = Object.keys(this.$vxm.chat.channels).indexOf(channel);
+         } else {
+           console.log(`No such channel ${channel}`);
+         }
+       });
+     });
     }
 
     get formattedTime() {
@@ -108,6 +132,7 @@
 
     $refs!: {
       contextMenu: HTMLFormElement;
+      msg: HTMLSpanElement;
     };
 
     openContextMenu(e: MouseEvent) {
@@ -117,6 +142,9 @@
 </script>
 
 <style lang="scss">
+@import "../../assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
   a {
     color: #fff;
   }
@@ -174,4 +202,10 @@
     cursor: pointer;
     overflow: visible;
   }
+
+  mark {
+    background-color:darken($dark-blue, 5%) !important;
+    color:#c0dce7;
+    position:relative;
+  }
 </style>
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 68573f4e..11b9840f 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="user-tooltip-container">
+  <div
+    class="user-tooltip-container"
+    ref="container"
+    :style="{
+      top: `${top + 5}px`,
+      left: `${left + 5}px`
+    }">
     <ul>
       <li class="user-tooltip-user">{{user.username}}</li>
       <li class="user-tooltip-rank"><span class="rank">{{rank}}</span></li>
@@ -8,20 +14,36 @@
   </div>
 </template>
 <script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
   import User from '@/types/user';
   @Component
   export default class UserTooltip extends Vue {
     @Prop()
     user!: User;
 
+    @Prop()
+    top!: number;
+
+    @Prop()
+    left!: number;
+
     desc = '';
 
     rank = '';
 
-    created() {
-      this.description();
-      this.findRank();
+    $refs !: {
+      container: HTMLDivElement;
+    };
+
+    get parentTop() {
+      return this.$parent;
+    }
+
+    @Watch('parentTop')
+    parentChanged() {
+      console.log(this.parentTop);
     }
 
     description() {
@@ -62,10 +84,14 @@
   @import '~vue-context/src/sass/vue-context';
   .user-tooltip-container {
     color:white;
-    position:absolute;
+    position: fixed;
     background-color:$med-dark-blue;
-    z-index: 5;
-    width:95%;
+    z-index: 1501;
+    overflow: visible;
+    height:auto;
+    top:0px;
+    left:0px;
+    width:300px;
     border-radius:5px;
   }
   li {
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index a6b02b62..2d81da82 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -6,20 +6,25 @@
       class="username"
       :style="{ color: displayedColor }"
       :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
-      @mouseover="hovered = true"
+      @mouseover="hovered = true /* Shows and hides tooltip */"
       @mouseout="hovered = false"
+      @mousemove="updatecoords"
     >
       <span
         class="away-indicator"
-        :title="`${user.username} is away`" >
-        {{ awayIndicator }}
+        :title="`${user.username} is away`"
+        v-show="away"> <!-- Away indicator -->
+        ●
       </span>
       {{ uniqueNicks[0] || user.username }}<slot/>
     </a>
-    <transition name="fade">
+    <transition name="fade" @after-enter="enter">
       <UserTooltip
+        :top="top"
+        :left="left"
         v-if="hovered"
         :user="user"
+        ref="tooltip"
       />
     </transition>
   </span>
@@ -45,6 +50,15 @@
 
     hovered = false;
 
+    top = 0;
+
+    left = 0;
+
+    updatecoords(e:MouseEvent) {
+      this.top = e.clientY;
+      this.left = e.clientX;
+    }
+
     private defaultColor = '#ffffff';
 
     get computedColor() {
@@ -62,20 +76,22 @@
       return c;
     }
 
-    awayIndicator = '';
-
     get uniqueNicks() { // Gets custom nick
       // Returns an array of nicks that aren't in the standard user^connectionid format
       return this.user.nicks.filter(e => !e.match(/^.+\^\d+/));
     }
 
-    updateIndicator() {
-      this.$vxm.chat.userStatus({
-        user: this.user.username,
-        cb: (b) => {
-          this.awayIndicator = b ? '●' : '';
-        },
-      });
+    enter() {
+      this.$refs.tooltip.findRank();
+      this.$refs.tooltip.description();
+    }
+
+    $refs !: {
+      tooltip:UserTooltip;
+    };
+
+    get away() {
+      return this.user.away;
     }
 
     get displayedColor() {
@@ -99,10 +115,6 @@
       return this.color || this.computedColor;
     }
 
-    created() {
-      this.updateIndicator();
-    }
-
     validColor(red:string, green:string, blue:string) {
       const backgroundValue = this.brightness(4, 52, 104); // Brightness of background
       const colorValue = this.brightness( // Brightness of input color
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/SlideoutSettings.vue
index a9c2e391..6f85a791 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/SlideoutSettings.vue
@@ -2,9 +2,13 @@
   <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <section>
       <h5 class="heading" >Text Size</h5>
-      <MinimizationTriangle style="display:inline-block" settings="true" v-model="textSizeOpen" />
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        @input="menusChanged"
+        v-model="openMenus.textSize" />
       <transition name="settings-slide">
-      <div v-show="!textSizeOpen" class="settings-content-container">
+      <div v-show="!openMenus.textSize" class="settings-content-container">
         <input v-model="size" type=number min=10 max=18>
         <p id='font-size-p'>Default is 14</p>
         <p
@@ -17,9 +21,13 @@
     </section>
     <section>
       <h5 class="heading" >Ignored</h5>
-      <MinimizationTriangle style="display:inline-block" settings="true" v-model="ignoredOpen" />
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        @input="menusChanged"
+        v-model="openMenus.ignored" />
       <transition name="settings-slide">
-      <div v-show="!ignoredOpen" class="settings-content-container">
+      <div v-show="!openMenus.ignored" class="settings-content-container">
       <table style="width:175px" >
         <tr v-for="user in ignoredUsers" :key="user.Username">
           <button
@@ -49,9 +57,10 @@
       <MinimizationTriangle
         style="display:inline-block"
         settings="true"
-        v-model="notificationsOpen" />
+        @input="menusChanged"
+        v-model="openMenus.notifications" />
       <transition name="settings-slide">
-      <div v-show="!notificationsOpen" class="settings-content-container">
+      <div v-show="!openMenus.notifications" class="settings-content-container">
         <h6>Ignored</h6>
         <table>
           <tr v-for="channel in channels" :key="channel.name">
@@ -97,21 +106,38 @@
           This will appear in the page title if you have notifications
         </p>
         <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
+        <h6>Keywords</h6>
+        <p>
+          If these keywords are used in the chat, they will trigger notifications
+        </p>
+        <textarea type=text v-model="keywords" style="font-size:1rem; padding:1px;" />
+        <p>
+          If you have multiple keywords, separate them with commas.
+          Your username is automatically a keyword.
+        </p>
       </div>
       </transition>
     </section>
     <section>
       <h5 class="heading" >Username Color</h5>
-      <MinimizationTriangle style="display:inline-block" settings="true" v-model="colorOpen" />
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        @input="menusChanged"
+        v-model="openMenus.color" />
       <transition name="settings-slide">
-      <ColorPicker v-show="!colorOpen" class="settings-content-container" />
+      <ColorPicker v-show="!openMenus.color" class="settings-content-container" />
       </transition>
     </section>
     <section>
       <h5 class="heading" >Toolbar Features</h5>
-      <MinimizationTriangle style="display:inline-block" settings="true" v-model="toolbarOpen" />
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        @input="menusChanged"
+        v-model="openMenus.toolbar" />
       <transition name="settings-slide">
-      <div v-show="!toolbarOpen" class="settings-content-container">
+      <div v-show="!openMenus.toolbar" class="settings-content-container">
         <p>
           These enable you to send emoticons and formatted text.
         </p>
@@ -156,16 +182,48 @@
             </td>
           </tr>
         </table>
+        <h6>Custom emoticons</h6>
+        <table>
+          <tbody>
+          <tr v-for="(emote, index) in customEmoticons" :key="emote">
+            <td>{{emote}}</td>
+            <td>Change to <input :id="index" @input="update" style="width:1rem"></td>
+          </tr>
+          </tbody>
+          <tfoot><tr><td colspan=2 class="warning">{{emoticonErrorMessage}}</td></tr></tfoot>
+        </table>
+      </div>
+      </transition>
+    </section>
+    <section>
+      <li class="settings-section-header">
+      <h5 class="heading">Status</h5>
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        @input="menusChanged"
+        v-model="openMenus.status" />
+      </li>
+      <transition name="settings-slide">
+      <div v-show="!openMenus.status" class="settings-content-container">
+        <p>You are currently marked as {{userStatus ? 'away' : 'online'}}</p>
+        <button class="btn settings-button" @click="changeStatus(!userStatus)">
+          Toggle
+        </button>
       </div>
       </transition>
     </section>
     <section>
       <li class="settings-section-header">
       <h5 class="heading" >Operator</h5>
-      <MinimizationTriangle style="display:inline-block" settings="true" v-model="operOpen" />
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        @input="menusChanged"
+        v-model="openMenus.oper" />
       </li>
       <transition name="settings-slide">
-      <div v-show="!operOpen" class="settings-content-container">
+      <div v-show="!openMenus.oper" class="settings-content-container">
         <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
         <button
           @click="$emit('auth')"
@@ -174,6 +232,8 @@
           v-show="!isOper" >
             Log in as operator
         </button>
+        <h6>Change nick</h6>
+        <input @input="setNick" :value="opernick">
       </div>
       </transition>
     </section>
@@ -203,34 +263,109 @@
     },
   })
   export default class SlideoutSettings extends Vue {
-    testOpen = true;
+    openMenus = {
+      notifications: true,
+      color: true,
+      oper: true,
+      toolbar: true,
+      textSize: true,
+      ignored: true,
+      status: true,
+    };
+
+    @Watch('openMenus')
+    menusChanged() {
+      console.log(2);
+      if (localStorage) {
+        localStorage.openMenus = JSON.stringify(this.openMenus);
+      }
+    }
+
+    size:string = '14'; // font size
 
-    notificationsOpen = true;
+    indicator:string = '(!)';
 
-    colorOpen = true;
+    allChatFeatures = true;
 
-    operOpen = true;
+    emoticonChatFeatures = true;
 
-    toolbarOpen = true;
+    markdownChatFeatures = true;
 
-    textSizeOpen = true;
+    keywords = '';
 
-    ignoredOpen = true;
+    emoticonErrorMessage = '';
 
-    size:string = '14'; // font size
+    changeStatus(to:boolean) {
+      this.$vxm.chat.autoUpdateStatus = !to;
+      if (!to) {
+        this.$vxm.chat.setUnaway();
+      } else {
+        this.$vxm.chat.setAway();
+      }
+    }
 
-    indicator:string = '(!)';
+    get userStatus() {
+      return this.$vxm.chat.userStatus;
+    }
 
-    allChatFeatures = true;
+    @Watch('keywords')
+    keywordsChanged() {
+      const keywordsArray = this.keywords.split(/, ?/);
+      if (keywordsArray[0] === '') {
+        return;
+      }
+      if (localStorage) {
+        localStorage.notificationsKeywords = JSON.stringify(keywordsArray);
+      }
+    }
 
-    emoticonChatFeatures = true;
+    update(e:Event) {
+      const targ = e.target as HTMLInputElement;
+      const id = Number(targ.id);
+      let { value } = targ;
+      value = value.trim();
+      while ([...value].length > 1) {
+        value = value.substring(0, value.length - 1);
+      }
+      const emoticonRegex = /[^\w\d\p{P}\p{S}]/;
+      if (value.match(emoticonRegex)) {
+        if (this.customEmoticons.some(j => j === value)) {
+          this.emoticonErrorMessage = 'You are using that emoticon in another slot';
+          return;
+        }
+        Vue.set(this.$vxm.chat.customEmoticons, id, value);
+        if (localStorage) {
+          localStorage.customEmoticons = JSON.stringify(this.$vxm.chat.customEmoticons);
+        }
+        this.emoticonErrorMessage = '';
+      } else {
+        this.emoticonErrorMessage = `${value} is not a valid emoticon`;
+      }
+      if (value.trim() === '') {
+        this.emoticonErrorMessage = '';
+      }
+      targ.value = '';
+    }
 
-    markdownChatFeatures = true;
+    validateNick(nick:string) {
+      // eslint-disable-next-line no-useless-escape
+      return nick.match(/^[a-z_\-\[\]\\^{}|`][a-z0-9_\-\[\]\\^{}|`]*$/i);
+    }
+
+    setNick(e:Event) {
+      const { value } = e.target as HTMLInputElement;
+      if (!this.validateNick(value)) return;
+      this.$vxm.chat.changeNick(value);
+    }
 
     get isOper() {
       return this.$vxm.chat.oper;
     }
 
+    get customEmoticons() {
+      return this.$vxm.chat.customEmoticons;
+    }
+
     // Gets a list of ignored users
     get ignoredUsers() {
       return this.$vxm.chat.ignoredUsers;
@@ -246,6 +381,8 @@
       return (this.$parent as Slideout).checked;
     }
 
+    opernick = '';
+
     // When tab opened, display stored value if there is one
     created() {
       if (localStorage.fontSize) {
@@ -273,6 +410,19 @@
       } else {
         this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
       }
+      if (localStorage.notificationsKeywords) {
+        this.keywords = JSON.parse(localStorage.notificationsKeywords).join(', ');
+      } else {
+        this.keywords = this.$vxm.chat.notificationsKeywords.join(', ');
+      }
+      if (localStorage.nick) {
+        this.opernick = localStorage.nick;
+      } else {
+        this.opernick = this.$vxm.chat.customNick;
+      }
+      if (localStorage.openMenus) {
+        this.openMenus = JSON.parse(localStorage.openMenus);
+      }
     }
 
     toggleEmoticons() {
@@ -521,4 +671,7 @@ table {
 .settings-content-container {
   overflow:hidden;
 }
+.warning {
+  color:$warning;
+}
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 346d0ce1..f53c3db7 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -123,6 +123,10 @@ export default class ChatModule extends VuexModule {
 
   customNick !: string;
 
+  notificationsKeywords!: string[];
+
+  autoUpdateStatus = true;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -343,6 +347,15 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.notificationsKeywords) {
+        try {
+          this.notificationsKeywords = JSON.parse(localStorage.notificationsKeywords);
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of notifications keywords',
+          );
+        }
+      }
     }
 
     if (process.env.VUE_APP_SERVER_URL) {
@@ -356,6 +369,7 @@ export default class ChatModule extends VuexModule {
       console.error("VUE_APP_SSL wasn't found in the .env file!");
     }
     this.initClient();
+    setInterval(this.updateUserStatus, 5000);
   }
 
   @action()
@@ -427,7 +441,7 @@ export default class ChatModule extends VuexModule {
   }
 
   /**
-   * Takes in a raw string from the server and parses it into a history message that it posts
+   * Takes in a raw string from the server and parses it into a history message that it then posts
    * @param raw - The raw string to parse and post to the chat
    */
   @action()
@@ -437,7 +451,10 @@ export default class ChatModule extends VuexModule {
     const time = parts[0].substring(13, 37);
     const channel = parts[3];
     // eslint-disable-next-line no-control-regex
-    const message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
+    let message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
+    this.notificationsKeywords.forEach(n => {
+      message = message.replace(n, `<mark>${n}</mark>`);
+    });
     const user = parts[1].substring(1, parts[1].indexOf('@'));
     const username = user.substring(0, user.lastIndexOf('!'));
     const uid = user.substring(user.lastIndexOf('!') + 1);
@@ -544,7 +561,7 @@ export default class ChatModule extends VuexModule {
         let parts = message.match(/^\/([^ ]+)/);
         const command = parts ? parts[1] : '';
         parts = message.match(/^\/\w+ (.+)/);
-        let params = parts ? parts[1] : '';
+        const params = parts ? parts[1] : '';
         const first = params.split(' ')[0];
         const second = params.split(' ')[1];
         switch (command) {
@@ -789,13 +806,21 @@ export default class ChatModule extends VuexModule {
             } else if (parseInt(second, 10) > 3 || parseInt(second, 10) < 1) {
               postMessage('You have three custom emoticon slots. Type `/help emoticon` for more usage instructions');
               break;
-            } else if (
-              (JSON.parse(localStorage.customEmoticons) as string[]).some(e => e === first)) {
-              postMessage('You already have that emoticon in a custom slot');
-              break;
-            } else if (!first.match(/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/)) {
-              postMessage('You may only add emoticons to custom slots');
-              break;
+            } else {
+              let emoticons : string[];
+              if (localStorage.customEmoticons) {
+                emoticons = JSON.parse(localStorage.customEmoticons) as string[];
+              } else {
+                emoticons = this.customEmoticons;
+              }
+              if (emoticons.some(e => e === first)) {
+                postMessage('You already have that emoticon in a custom slot');
+                break;
+              } else if (!first.match(/[^\w\d\p{P}\p{S}]/)) {
+                console.log(first);
+                postMessage('You may only add *emoticons* to custom slots');
+                break;
+              }
             }
             // Changing the array elements with array[index] = newValue isn't reactive
             Vue.set(this.customEmoticons, (parseInt(second, 10) - 1), first);
@@ -1003,22 +1028,16 @@ export default class ChatModule extends VuexModule {
             }
             break;
           case 'changenick':
-            if (this.oper) {
-              if (params.length > 0) {
-                params = params.trim();
-                this.nick = params;
-                this.currentUser.nicks = [params];
-                this.client?.raw(`NICK ${params}`);
-                if (localStorage) {
-                  localStorage.nick = params;
-                }
-              } else {
-                postMessage('Please include command parameters. Type `/help changenick` for more usage instructions');
-              }
-            } else {
+            if (!this.oper) {
               this.auth = true;
               postMessage('You are not an operator or moderator and do not have permission to change your nick');
+              break;
+            }
+            if (params.length < 1) {
+              postMessage('Please include command parameters. Type `/help changenick` for more usage instructions');
+              break;
             }
+            this.changeNick(params);
             break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
@@ -1064,6 +1083,27 @@ export default class ChatModule extends VuexModule {
     } else if (channel) this.postMessage(new Message(`${username} has already been ignored`, channel));
   }
 
+  @action()
+  async changeNick(value:string) {
+    let to = value;
+    if (this.oper) {
+      if (to.length > 0) {
+        to = to.trim();
+        this.nick = to;
+        this.currentUser.nicks = [to];
+        this.client?.raw(`NICK ${to}`);
+        if (localStorage) {
+          localStorage.nick = to;
+        }
+      } else {
+        this.postMessage(new Message('Please include command parameters. Type `/help changenick` for more usage instructions'));
+      }
+    } else {
+      this.auth = true;
+      this.postMessage(new Message('You are not an operator or moderator and do not have permission to change your nick'));
+    }
+  }
+
   @action()
   async reportUser({
     userToReport,
@@ -1189,13 +1229,21 @@ export default class ChatModule extends VuexModule {
       if (message.toLowerCase().includes(this.currentUser.username.toLowerCase())) {
         this.mention(channel.name);
       }
+    } else if (
+      (this.slideoutOpen || channel.name !== this.chatChannel)
+      && this.notificationsKeywords.some(e => message.includes(e))) {
+      this.notify(channel.name);
     } else {
       // If the user is in the channel and the slideout is closed
       this.readChannel(channel.name); // Set the channel to read
     }
     const username = User.parseUsername(nick);
+    let msg = message;
+    this.notificationsKeywords.forEach(n => {
+      msg = msg.replace(n, `<mark>${n}</mark>`);
+    });
     const messageObject = new Message(
-      message,
+      msg,
       target,
       this.connectedUsers[username],
       type === 'action',
@@ -1416,27 +1464,36 @@ export default class ChatModule extends VuexModule {
   }
 
   @action()
-  async userStatus(arg: {user:string, cb: (away: boolean) => void}) {
-    const n = this.connectedUsers[arg.user]!.nicks[0];
-    if (n === undefined) return;
-    this.client?.who(n, (e) => {
-      console.log(e, e.users[0].away);
-      arg.cb(e.users[0].away);
+  async updateUserStatus() {
+    this.client?.who('#general', (e) => { // Everyone should be in this channel
+      (e.users as {nick: string, away:boolean}[]).forEach(u => { // For each user
+        const user = User.parseUsername(u.nick); // Get their username
+        if (!this.connectedUsers[user]) return; // If they don't exist, just don't do anything
+        this.connectedUsers[user]!.away = u.away; // Update their status
+      });
     });
   }
 
   @action()
   async setAway() {
     this.client!.user.away = 'away';
+    this.currentUser.away = true;
+    this.connectedUsers[this.currentUser.username]!.away = true;
     this.client?.raw('AWAY User is currently away');
   }
 
   @action()
   async setUnaway() {
     this.client!.user.away = '';
+    this.currentUser.away = false;
+    this.connectedUsers[this.currentUser.username]!.away = false;
     this.client?.raw('AWAY');
   }
 
+  get userStatus() {
+    return this.connectedUsers[this.currentUser.username]?.away;
+  }
+
   @action()
   async updateTimer() {
     this.connectionData.currentTimer -= 1;
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 52930191..33056b36 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -8,6 +8,7 @@ const md = new MarkdownIt({
 }).disable('image');
 // Via https://github.com/markdown-it/markdown-it/blob/e6f19eab4204122e85e4a342e0c1c8486ff40c2d/docs/architecture.md
 const defaultRender = md.renderer.rules.link_open
+                      || md.renderer.rules.text
                       || function renderToken(tokens: any, idx: any, options: any,
                         env: any, self: any) {
                         return self.renderToken(tokens, idx, options);
@@ -22,22 +23,31 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
   } else {
     tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
   }
-  let result = '';
-  tokens.forEach((t: { content: any; }) => {
-    const { content } = t;
-    // If the link URL is an Eterna screenshot
-    if (content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
-      result = `<br><a target="_blank" href="${content}"><img src="${content}" style="width:calc(100% - 25px); max-width:750px"></a><br>`;
-      t.content = '';
-    }
-  });
-  if (result !== '' && result !== undefined) {
-    return result;
+
+  const { content } = tokens[idx + 1];
+  // If the text it contains is a screenshot, format it as a link to the screenshot
+  if (content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
+    return `<a target="_blank" href="${content}">`;
   }
   return defaultRender(tokens, idx, options, env, self);
 
   // pass token to default renderer.
   // return defaultRender(tokens, idx, options, env, self);
 };
+md.renderer.rules.text = function link(tokens, idx, options, env, self) {
+  // If it's a screenshot, format it as an image instead
+  if (tokens[idx].content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
+    const { content } = tokens[idx];
+    return `<img src="${content}" style="width:calc(100% - 25px); max-width:750px">`;
+  }
+  if (tokens[idx].content.match(/#.+/)) {
+    let { content } = tokens[idx];
+    const channel = tokens[idx].content.match(/#\S+/g);
+    if (!channel) return defaultRender(tokens, idx, options, env, self);
+    content = content.replace(channel[0], `<mark class="channel-link" style="cursor:pointer">${channel[0]}</mark>`);
+    return content;
+  }
+  return defaultRender(tokens, idx, options, env, self);
+};
 
 export default md;
diff --git a/src/app/types/user.ts b/src/app/types/user.ts
index 0e0afcab..6401d022 100644
--- a/src/app/types/user.ts
+++ b/src/app/types/user.ts
@@ -7,6 +7,8 @@ export default class User {
 
   username: string;
 
+  away: boolean;
+
   static parseUsername(nick: string) {
     return nick.substr(0, nick.indexOf('^') === -1 ? nick.length : nick.indexOf('^'));
   }
@@ -15,5 +17,6 @@ export default class User {
     this.nicks = [];
     this.uid = uid;
     this.username = username;
+    this.away = false;
   }
 }

From be5d809c47e4fd44cabb943aec804f7c3ce4900d Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 18 Jun 2020 15:07:48 -0500
Subject: [PATCH 117/223] Reorganized, cleanup, bug fixes (see todo.md)

---
 package-lock.json                             | 1258 ++++++++++-------
 package.json                                  |   23 +-
 src/app/App.vue                               |  334 ++---
 .../components/Connection/ConnectButton.vue   |   53 +-
 .../Connection/ConnectingMessage.vue          |    6 +-
 src/app/components/Emoticons/EmoticonBar.vue  |   12 +
 src/app/components/Messages/ActionMenu.vue    |   12 +
 src/app/components/Panes/MessagePane.vue      |    1 +
 .../{ => Slideout/Chat}/ChatSelectButton.vue  |    2 +-
 .../Chat}/SlideoutButtonChat.vue              |    6 +-
 .../Slideout/{ => Chat}/SlideoutChats.vue     |    6 +-
 .../Slideout/{ => Chat}/Splitter.vue          |    0
 .../{ => Slideout}/HamburgerMenuButton.vue    |    6 +-
 .../Settings}/SlideoutButtonSettings.vue      |    6 +-
 .../{ => Settings}/SlideoutSettings.vue       |  421 +++---
 src/app/components/Slideout/Slideout.vue      |   14 +-
 .../Users}/SlideoutButtonUsers.vue            |    6 +-
 .../Slideout/{ => Users}/SlideoutUser.vue     |    8 +-
 .../Slideout/{ => Users}/SlideoutUsername.vue |    6 +-
 src/app/shims-vue.d.ts                        |    7 +
 src/app/store/chat.vuex.ts                    |   42 +-
 todo.md                                       |   51 +
 22 files changed, 1319 insertions(+), 961 deletions(-)
 rename src/app/components/{ => Slideout/Chat}/ChatSelectButton.vue (96%)
 rename src/app/components/{ => Slideout/Chat}/SlideoutButtonChat.vue (81%)
 rename src/app/components/Slideout/{ => Chat}/SlideoutChats.vue (95%)
 rename src/app/components/Slideout/{ => Chat}/Splitter.vue (100%)
 rename src/app/components/{ => Slideout}/HamburgerMenuButton.vue (80%)
 rename src/app/components/{ => Slideout/Settings}/SlideoutButtonSettings.vue (80%)
 rename src/app/components/Slideout/{ => Settings}/SlideoutSettings.vue (97%)
 rename src/app/components/{ => Slideout/Users}/SlideoutButtonUsers.vue (81%)
 rename src/app/components/Slideout/{ => Users}/SlideoutUser.vue (87%)
 rename src/app/components/Slideout/{ => Users}/SlideoutUsername.vue (90%)
 create mode 100644 todo.md

diff --git a/package-lock.json b/package-lock.json
index d7b5fc00..05380415 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,13 +14,13 @@
       }
     },
     "@apollo/federation": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/@apollo/federation/-/federation-0.16.0.tgz",
-      "integrity": "sha512-+UA9QQNA4q896OOmyFHhKTf7iOIFvjL+h/I7ozRkA+Ayv1368pXtd3zyeKrXtUKD21a1vtEkEjCUX9aDGR8cqg==",
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@apollo/federation/-/federation-0.16.2.tgz",
+      "integrity": "sha512-pjTkcl1KGxLZOPpVyTygZNuLxZJCCMvGVonPJMoFzQYt63/o0DwpwbcNlbvpdryWjjFgvi5diqJxRFGuxndEPA==",
       "dev": true,
       "requires": {
         "apollo-graphql": "^0.4.0",
-        "apollo-server-env": "^2.4.4-alpha.0",
+        "apollo-server-env": "^2.4.4",
         "core-js": "^3.4.0",
         "lodash.xorby": "^4.7.0"
       }
@@ -47,9 +47,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "10.17.24",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.24.tgz",
-          "integrity": "sha512-5SCfvCxV74kzR3uWgTYiGxrd69TbT1I6+cMx1A5kEly/IVveJBimtAMlXiEyVFn5DvUFewQWxOOiJhlxeQwxgA==",
+          "version": "10.17.26",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.26.tgz",
+          "integrity": "sha512-myMwkO2Cr82kirHY8uknNRHEVtn0wV3DTQfkrjx17jmkstDRZ24gNUdl8AHXVyVclTYI/bNjgTPTAWvWLqXqkw==",
           "dev": true
         }
       }
@@ -99,10 +99,13 @@
       }
     },
     "@apollographql/graphql-playground-html": {
-      "version": "1.6.24",
-      "resolved": "https://registry.npmjs.org/@apollographql/graphql-playground-html/-/graphql-playground-html-1.6.24.tgz",
-      "integrity": "sha512-8GqG48m1XqyXh4mIZrtB5xOhUwSsh1WsrrsaZQOEYYql3YN9DEu9OOSg0ILzXHZo/h2Q74777YE4YzlArQzQEQ==",
-      "dev": true
+      "version": "1.6.26",
+      "resolved": "https://registry.npmjs.org/@apollographql/graphql-playground-html/-/graphql-playground-html-1.6.26.tgz",
+      "integrity": "sha512-XAwXOIab51QyhBxnxySdK3nuMEUohhDsHQ5Rbco/V1vjlP75zZ0ZLHD9dTpXTN8uxKxopb2lUvJTq+M4g2Q0HQ==",
+      "dev": true,
+      "requires": {
+        "xss": "^1.0.6"
+      }
     },
     "@babel/code-frame": {
       "version": "7.8.0",
@@ -133,19 +136,19 @@
       }
     },
     "@babel/core": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.1.tgz",
-      "integrity": "sha512-u8XiZ6sMXW/gPmoP5ijonSUln4unazG291X0XAQ5h0s8qnAFr6BRRZGUEK+jtRWdmB0NTJQt7Uga25q8GetIIg==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.2.tgz",
+      "integrity": "sha512-KQmV9yguEjQsXqyOUGKjS4+3K8/DlOCE2pZcq4augdQmtTy5iv5EHtmMSJ7V4c1BIPjuwtZYqYLCq9Ga+hGBRQ==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.1",
-        "@babel/generator": "^7.10.1",
+        "@babel/generator": "^7.10.2",
         "@babel/helper-module-transforms": "^7.10.1",
         "@babel/helpers": "^7.10.1",
-        "@babel/parser": "^7.10.1",
+        "@babel/parser": "^7.10.2",
         "@babel/template": "^7.10.1",
         "@babel/traverse": "^7.10.1",
-        "@babel/types": "^7.10.1",
+        "@babel/types": "^7.10.2",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.1",
@@ -166,12 +169,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
-          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.1",
+            "@babel/types": "^7.10.2",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.13",
             "source-map": "^0.5.0"
@@ -224,9 +227,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -258,9 +261,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -304,9 +307,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -333,9 +336,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -346,9 +349,9 @@
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.1.tgz",
-      "integrity": "sha512-YuF8IrgSmX/+MV2plPkjEnzlC2wf+gaok8ehMNN0jodF3/sejZauExqpEVGbJua62oaWoNYIXwz4RmAsVcGyHw==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.2.tgz",
+      "integrity": "sha512-hYgOhF4To2UTB4LTaZepN/4Pl9LD4gfbJx8A34mqoluT8TLbof1mhUlYuNWTEebONa8+UlCC4X0TEXu7AOUyGA==",
       "dev": true,
       "requires": {
         "@babel/compat-data": "^7.10.1",
@@ -367,9 +370,9 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.1.tgz",
-      "integrity": "sha512-bwhdehBJZt84HuPUcP1HaTLuc/EywVS8rc3FgsEPDcivg+DCW+SHuLHVkYOmcBA1ZfI+Z/oZjQc/+bPmIO7uAA==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.2.tgz",
+      "integrity": "sha512-5C/QhkGFh1vqcziq1vAL6SI9ymzUp8BCYjFpvYVhWP4DlATIb3u5q3iUd35mvlyGs8fO7hckkW7i0tmH+5+bvQ==",
       "dev": true,
       "requires": {
         "@babel/helper-function-name": "^7.10.1",
@@ -436,9 +439,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -453,9 +456,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -534,9 +537,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -551,9 +554,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -583,12 +586,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
-          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.1",
+            "@babel/types": "^7.10.2",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.13",
             "source-map": "^0.5.0"
@@ -641,9 +644,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -675,9 +678,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -723,9 +726,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -751,9 +754,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -779,9 +782,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -842,9 +845,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -859,9 +862,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -887,9 +890,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -937,12 +940,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
-          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.1",
+            "@babel/types": "^7.10.2",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.13",
             "source-map": "^0.5.0"
@@ -995,9 +998,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -1029,9 +1032,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -1063,12 +1066,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
-          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.1",
+            "@babel/types": "^7.10.2",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.13",
             "source-map": "^0.5.0"
@@ -1121,9 +1124,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -1155,9 +1158,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -1204,9 +1207,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -1221,9 +1224,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -1270,12 +1273,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
-          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.1",
+            "@babel/types": "^7.10.2",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.13",
             "source-map": "^0.5.0"
@@ -1328,9 +1331,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -1362,9 +1365,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -1395,12 +1398,12 @@
           }
         },
         "@babel/generator": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.1.tgz",
-          "integrity": "sha512-AT0YPLQw9DI21tliuJIdplVfLHya6mcGa8ctkv7n4Qv+hYacJrKmNWIteAK1P9iyLikFIAkwqJ7HAOqIDLFfgA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
           "dev": true,
           "requires": {
-            "@babel/types": "^7.10.1",
+            "@babel/types": "^7.10.2",
             "jsesc": "^2.5.1",
             "lodash": "^4.17.13",
             "source-map": "^0.5.0"
@@ -1453,9 +1456,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -1487,9 +1490,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -1876,9 +1879,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -1893,9 +1896,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -2028,9 +2031,9 @@
           }
         },
         "@babel/parser": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.1.tgz",
-          "integrity": "sha512-AUTksaz3FqugBkbTZ1i+lDLG5qy8hIzCaAxEtttU6C0BtZZU9pkNZtWSVAht4EW9kl46YBiyTGMp9xTTGqViNg==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.2.tgz",
+          "integrity": "sha512-PApSXlNMJyB4JiGVhCOlzKIif+TKFTvu0aQAhnTvfP/z3vVSN6ZypH5bfUNwFXXjRQtUEBNFd2PtmCmG2Py3qQ==",
           "dev": true
         },
         "@babel/template": {
@@ -2045,9 +2048,9 @@
           }
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -2174,9 +2177,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -2311,13 +2314,13 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.1.tgz",
-      "integrity": "sha512-bGWNfjfXRLnqbN2T4lB3pMfoic8dkRrmHpVZamSFHzGy5xklyHTobZ28TVUD2grhE5WDnu67tBj8oslIhkiOMQ==",
+      "version": "7.10.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.2.tgz",
+      "integrity": "sha512-MjqhX0RZaEgK/KueRzh+3yPSk30oqDKJ5HP5tqTSB1e2gzGS3PLy7K0BIpnp78+0anFuSwOeuCf1zZO7RzRvEA==",
       "dev": true,
       "requires": {
         "@babel/compat-data": "^7.10.1",
-        "@babel/helper-compilation-targets": "^7.10.1",
+        "@babel/helper-compilation-targets": "^7.10.2",
         "@babel/helper-module-imports": "^7.10.1",
         "@babel/helper-plugin-utils": "^7.10.1",
         "@babel/plugin-proposal-async-generator-functions": "^7.10.1",
@@ -2374,7 +2377,7 @@
         "@babel/plugin-transform-unicode-escapes": "^7.10.1",
         "@babel/plugin-transform-unicode-regex": "^7.10.1",
         "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.10.1",
+        "@babel/types": "^7.10.2",
         "browserslist": "^4.12.0",
         "core-js-compat": "^3.6.2",
         "invariant": "^2.2.2",
@@ -2389,9 +2392,9 @@
           "dev": true
         },
         "@babel/types": {
-          "version": "7.10.1",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.1.tgz",
-          "integrity": "sha512-L2yqUOpf3tzlW9GVuipgLEcZxnO+96SzR6fjXMuxxNkIgFJ5+07mHCZ+HkHqaeZu8+3LKnNJJ1bKbjBETQAsrA==",
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
           "dev": true,
           "requires": {
             "@babel/helper-validator-identifier": "^7.10.1",
@@ -2568,6 +2571,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@cloudcmd/clipboard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@cloudcmd/clipboard/-/clipboard-2.0.0.tgz",
+      "integrity": "sha512-HxOZBGA7m+JR+5G/J+ndBgalAeEi+Sf0r6rOB24+U9HIy1015eKgZiaxUxgslFATmKU1/5MGt53kSxZeD2ZYQw=="
+    },
     "@endemolshinegroup/cosmiconfig-typescript-loader": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-1.0.1.tgz",
@@ -3211,9 +3219,9 @@
       },
       "dependencies": {
         "@oclif/plugin-help": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-3.0.1.tgz",
-          "integrity": "sha512-Q1OITeUBkkydPf6r5qX75KgE9capr1mNrfHtfD7gkVXmqoTndrbc++z4KfAYNf5nhTCY7N9l52sjbF6BrSGu9w==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/@oclif/plugin-help/-/plugin-help-3.1.0.tgz",
+          "integrity": "sha512-orSWpXGlJaX16eSjAtI8scA8QhrjQOaCSHodEx52t18JKbIVzG8jcngugyWAOB/V4jhPl0rdiVk9XFsaIIiG2g==",
           "dev": true,
           "requires": {
             "@oclif/command": "^1.5.20",
@@ -3690,9 +3698,9 @@
       }
     },
     "@soda/get-current-script": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@soda/get-current-script/-/get-current-script-1.0.0.tgz",
-      "integrity": "sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@soda/get-current-script/-/get-current-script-1.0.2.tgz",
+      "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
     "@types/accepts": {
@@ -3705,9 +3713,9 @@
       }
     },
     "@types/babel__core": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.7.tgz",
-      "integrity": "sha512-RL62NqSFPCDK2FM1pSDH0scHpJvsXtZNiYlMB73DgPBaG1E38ZYVL+ei5EkWRbr+KC4YNiAUNBnRj+bgwpgjMw==",
+      "version": "7.1.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.8.tgz",
+      "integrity": "sha512-KXBiQG2OXvaPWFPDS1rD8yV9vO0OuWIqAEqLsbfX0oU2REN5KuoMnZ1gClWcBhO5I3n6oTVAmrMufOvRqdmFTQ==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.1.0",
@@ -3737,9 +3745,9 @@
       }
     },
     "@types/babel__traverse": {
-      "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.11.tgz",
-      "integrity": "sha512-ddHK5icION5U6q11+tV2f9Mo6CZVuT8GJKld2q9LqHSZbvLbH34Kcu2yFGckZut453+eQU6btIA3RihmnRgI+Q==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.12.tgz",
+      "integrity": "sha512-t4CoEokHTfcyfb4hUaF9oOHu9RmmNWnm1CP0YmMqOOfClKascOmvlEM736vlqeScuGvBDsHkf8R2INd4DWreQA==",
       "dev": true,
       "requires": {
         "@babel/types": "^7.3.0"
@@ -3803,12 +3811,6 @@
       "integrity": "sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==",
       "dev": true
     },
-    "@types/events": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==",
-      "dev": true
-    },
     "@types/express": {
       "version": "4.17.4",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.4.tgz",
@@ -3842,12 +3844,11 @@
       }
     },
     "@types/glob": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
-      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.2.tgz",
+      "integrity": "sha512-VgNIkxK+j7Nz5P7jvUZlRvhuPSmsEfS03b0alKcq5V/STUKAa3Plemsn5mrQUO7am6OErJ4rhGEGJbACclrtRA==",
       "dev": true,
       "requires": {
-        "@types/events": "*",
         "@types/minimatch": "*",
         "@types/node": "*"
       }
@@ -4103,9 +4104,9 @@
       "dev": true
     },
     "@types/ws": {
-      "version": "7.2.4",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.2.4.tgz",
-      "integrity": "sha512-9S6Ask71vujkVyeEXKxjBSUV8ZUB0mjL5la4IncBoheu04bDaYyUKErh1BQcY9+WzOUOiKqz/OnpJHYckbMfNg==",
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-7.2.5.tgz",
+      "integrity": "sha512-4UEih9BI1nBKii385G9id1oFrSkLcClbwtDfcYj8HJLQqZVAtb/42vXVrYvRWCcufNF/a+rZD3MxNwghA7UmCg==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -4133,12 +4134,12 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.2.0.tgz",
-      "integrity": "sha512-t9RTk/GyYilIXt6BmZurhBzuMT9kLKw3fQoJtK9ayv0tXTlznXEAnx07sCLXdkN3/tZDep1s1CEV95CWuARYWA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-3.3.0.tgz",
+      "integrity": "sha512-Ybx/wU75Tazz6nU2d7nN6ll0B98odoiYLXwcuwS5WSttGzK46t0n7TPRQ4ozwcTv82UY6TQoIvI+sJfTzqK9dQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "3.2.0",
+        "@typescript-eslint/experimental-utils": "3.3.0",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.0.0",
         "semver": "^7.3.2",
@@ -4154,33 +4155,33 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.2.0.tgz",
-      "integrity": "sha512-UbJBsk+xO9dIFKtj16+m42EvUvsjZbbgQ2O5xSTSfVT1Z3yGkL90DVu0Hd3029FZ5/uBgl+F3Vo8FAcEcqc6aQ==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-3.3.0.tgz",
+      "integrity": "sha512-d4pGIAbu/tYsrPrdHCQ5xfadJGvlkUxbeBB56nO/VGmEDi/sKmfa5fGty5t5veL1OyJBrUmSiRn1R1qfVDydrg==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.3",
-        "@typescript-eslint/typescript-estree": "3.2.0",
+        "@typescript-eslint/typescript-estree": "3.3.0",
         "eslint-scope": "^5.0.0",
         "eslint-utils": "^2.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.2.0.tgz",
-      "integrity": "sha512-Vhu+wwdevDLVDjK1lIcoD6ZbuOa93fzqszkaO3iCnmrScmKwyW/AGkzc2UvfE5TCoCXqq7Jyt6SOXjsIlpqF4A==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-3.3.0.tgz",
+      "integrity": "sha512-a7S0Sqn/+RpOOWTcaLw6RD4obsharzxmgMfdK24l364VxuBODXjuJM7ImCkSXEN7oz52aiZbXSbc76+2EsE91w==",
       "dev": true,
       "requires": {
         "@types/eslint-visitor-keys": "^1.0.0",
-        "@typescript-eslint/experimental-utils": "3.2.0",
-        "@typescript-eslint/typescript-estree": "3.2.0",
+        "@typescript-eslint/experimental-utils": "3.3.0",
+        "@typescript-eslint/typescript-estree": "3.3.0",
         "eslint-visitor-keys": "^1.1.0"
       }
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.2.0.tgz",
-      "integrity": "sha512-uh+Y2QO7dxNrdLw7mVnjUqkwO/InxEqwN0wF+Za6eo3coxls9aH9kQ/5rSvW2GcNanebRTmsT5w1/92lAOb1bA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-3.3.0.tgz",
+      "integrity": "sha512-3SqxylENltEvJsjjMSDCUx/edZNSC7wAqifUU1Ywp//0OWEZwMZJfecJud9XxJ/40rAKEbJMKBOQzeOjrLJFzQ==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
@@ -4221,9 +4222,9 @@
       }
     },
     "@vue/babel-preset-app": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.4.1.tgz",
-      "integrity": "sha512-VHVROEBBiW0dnuNuzlFElkncXo+zxh5Px0MZ51Th5da8UPbQodf43mnpotMnFtmCPTXAFL58tzDttu1FgrgfpQ==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/babel-preset-app/-/babel-preset-app-4.4.4.tgz",
+      "integrity": "sha512-9b74d/lz4GEc9zkF3C+vjgEXYqu9ITq1DimUT+IVRJDvhgnV+a3C+pQY4Kl4PZSOyqkTHM7jE6eG2K5DUwKpWg==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.9.6",
@@ -4317,15 +4318,15 @@
       }
     },
     "@vue/cli": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli/-/cli-4.4.1.tgz",
-      "integrity": "sha512-X9K0EZFipqnckuzaUa2MzCtxPzazy4CwCJN0OTeXwc6I3q8f0M3H/5BuJM7cGPBn9CHDQTsiR1x7b2t3IKw7Vg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli/-/cli-4.4.4.tgz",
+      "integrity": "sha512-52pXlikVdBiPlZqEBx+vFQCrTmPrP3aLLxE0Wue00yJacPXt8ph6cb1PhCwYQAY1N9ROQstVJlsrm3GOXpCfyw==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.4.1",
-        "@vue/cli-ui": "^4.4.1",
-        "@vue/cli-ui-addon-webpack": "^4.4.1",
-        "@vue/cli-ui-addon-widgets": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.4",
+        "@vue/cli-ui": "^4.4.4",
+        "@vue/cli-ui-addon-webpack": "^4.4.4",
+        "@vue/cli-ui-addon-widgets": "^4.4.4",
         "boxen": "^4.1.0",
         "cmd-shim": "^3.0.3",
         "commander": "^2.20.0",
@@ -4368,20 +4369,20 @@
       }
     },
     "@vue/cli-overlay": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.4.1.tgz",
-      "integrity": "sha512-EQqAVy7O/qqGOfSYIGL073FWlr/s6QFA0wA1wY8pHnTS5WPwAiHT+D+xe+fgXKZ3KeL7v7u/le7YFIEVXFVXOg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-overlay/-/cli-overlay-4.4.4.tgz",
+      "integrity": "sha512-cTvtifIpsSVF2dPF+ibUoAq+hMkEbg4EYTsf6dUuUrBKi1G2tyZ3Pnx54U2NpqXjJMykqMGX+i+BxpIG5tJCGw==",
       "dev": true
     },
     "@vue/cli-plugin-babel": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.4.1.tgz",
-      "integrity": "sha512-dmhymfm2UnZDw13k/zKT6YIj7je53mE37Y+jEJxpRUlCKFmZUDuYkJ8i5HmO0SnaCnEGqNELaBkoIFnY3aE2Gw==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-babel/-/cli-plugin-babel-4.4.4.tgz",
+      "integrity": "sha512-VctlKy5oEYhI+AiPpzlorjDmuhbpoRQcKXpBdf2bXvq0+uuTQg7UXmPX0RKJejnFTKSJZvuPTihgfCWiyh9C3Q==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.9.6",
-        "@vue/babel-preset-app": "^4.4.1",
-        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/babel-preset-app": "^4.4.4",
+        "@vue/cli-shared-utils": "^4.4.4",
         "babel-loader": "^8.1.0",
         "cache-loader": "^4.1.0",
         "thread-loader": "^2.1.3",
@@ -4389,23 +4390,23 @@
       }
     },
     "@vue/cli-plugin-e2e-nightwatch": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-nightwatch/-/cli-plugin-e2e-nightwatch-4.4.1.tgz",
-      "integrity": "sha512-6874oYjUVmaoeQPlyNf2IqeG/7hX0hbjvJg+cn1wKn//e8rQu5f2G3rNOAor5N9E8xUsXcKSj5fH7LqrHXgZGg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-nightwatch/-/cli-plugin-e2e-nightwatch-4.4.4.tgz",
+      "integrity": "sha512-XQFq+26Cm4QixVwvjLFXoFCZ/aWeS0GpsiP3srfDCRIEjmkI8J2eY7Ngftmeh3rL2BA8K4usEvS6dbNKKrzX/g==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.4",
         "deepmerge": "^4.2.2",
         "nightwatch": "^1.3.5"
       }
     },
     "@vue/cli-plugin-eslint": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.4.1.tgz",
-      "integrity": "sha512-T+9+q44iajQEbe59z6Io3otFOsWnPOEVU+/hrDyC6aOToJbQo6P4VacByDDcuGYENAjAd8ENLSt18TaPNSIyRw==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.4.4.tgz",
+      "integrity": "sha512-B+l3smq3Lyob9qiuywC/IymCCyV2Gm/l1ZtxRzQI98RDTKei1PrRriIi3Hrg/AkK59HirwR7P7wiNhF2Pqg3VA==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.4",
         "eslint-loader": "^2.2.1",
         "globby": "^9.2.0",
         "inquirer": "^7.1.0",
@@ -4414,22 +4415,22 @@
       }
     },
     "@vue/cli-plugin-router": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.4.1.tgz",
-      "integrity": "sha512-kCSsJG7pjDvCJDjGtcCI5l0UjmqwNigOR41RkeGSjSUvzV4ArSniXjFqrOmtpMp36S5xCtwtt9MFm/K4fCubkQ==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-router/-/cli-plugin-router-4.4.4.tgz",
+      "integrity": "sha512-jZTupo+zFz1YHH3Q4WC5nJW5wlNEDqX//m+atwUISPahVEG6/EV8HwJnQDT7EQ9re4v78xI27eOtyNw+qSyiSA==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.4.1"
+        "@vue/cli-shared-utils": "^4.4.4"
       }
     },
     "@vue/cli-plugin-typescript": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.4.1.tgz",
-      "integrity": "sha512-WfgaT5N/eUlGXWsucl8vPskB3QYZFw77P1e/0TEwekVsz8yyT5/MEnZaQSH9emufcAagjpWHHL3fNQdIVg70eQ==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-typescript/-/cli-plugin-typescript-4.4.4.tgz",
+      "integrity": "sha512-7ds7JwrA10YnMAdIYE4PnFltiZzjMclaTl5J6Ibwh0tGwRqAIX+AJ3euX7KqYi2hcPGwFZPx8zhSQhrxtkdrZA==",
       "dev": true,
       "requires": {
         "@types/webpack-env": "^1.15.2",
-        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.4",
         "cache-loader": "^4.1.0",
         "fork-ts-checker-webpack-plugin": "^3.1.1",
         "globby": "^9.2.0",
@@ -4441,15 +4442,15 @@
       }
     },
     "@vue/cli-plugin-unit-jest": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.4.1.tgz",
-      "integrity": "sha512-t9MjdDRBeHe/qlUJka+YtxLZjyvaMImZ5hhEWMGSId2JUS7gfDXa4SxJvUYFsO0aqlgihn5BiaGKklGtbgVp0A==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-4.4.4.tgz",
+      "integrity": "sha512-k549nUwraDFdB86Vbvyvfb/lKab3bl7yHNOMqYqK3Vcq1LBHxzlFvlFBS+1lj5EQl8+VgTRLFHDknRP0QZuhbg==",
       "dev": true,
       "requires": {
         "@babel/core": "^7.9.6",
         "@babel/plugin-transform-modules-commonjs": "^7.9.6",
         "@types/jest": "^24.0.19",
-        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.4",
         "babel-core": "^7.0.0-bridge.0",
         "babel-jest": "^24.9.0",
         "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
@@ -4564,24 +4565,24 @@
       }
     },
     "@vue/cli-plugin-vuex": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.4.1.tgz",
-      "integrity": "sha512-FtOFsDP0qznwVaCz0BZmTzUm5vhHSJzX2/XD3L5dLTkrNxyDEbZmbKoX0n1OzBcQwZC7dkJZP2tdoCQx0mX//g==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.4.4.tgz",
+      "integrity": "sha512-A2SZD0B5yPz60W7go2ZYTIHooQse7bhhNUlinGQrdYeQCuURKUqqUbl/zF8u/8Qqo6nZ4F469fHNH6XWRN9Nnw==",
       "dev": true
     },
     "@vue/cli-service": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.4.1.tgz",
-      "integrity": "sha512-DVV0zr5Sw7pzdm3z3PRrfqihLgoJP/d9AgNFcSSQF/J9Gtvjf1t0PTJJFeLANHSL3kDWte+3kjc22sXayu0BJQ==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-service/-/cli-service-4.4.4.tgz",
+      "integrity": "sha512-AKWpBpBAB+LHJ8JpArM2BJ0I2REy9lG7xIkJn9k3Vw9gadejx+y74P0bJh/J8hY65kDTFltO1BW1Kv3URw/ifQ==",
       "dev": true,
       "requires": {
         "@intervolga/optimize-cssnano-plugin": "^1.0.5",
         "@soda/friendly-errors-webpack-plugin": "^1.7.1",
         "@soda/get-current-script": "^1.0.0",
-        "@vue/cli-overlay": "^4.4.1",
-        "@vue/cli-plugin-router": "^4.4.1",
-        "@vue/cli-plugin-vuex": "^4.4.1",
-        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/cli-overlay": "^4.4.4",
+        "@vue/cli-plugin-router": "^4.4.4",
+        "@vue/cli-plugin-vuex": "^4.4.4",
+        "@vue/cli-shared-utils": "^4.4.4",
         "@vue/component-compiler-utils": "^3.1.2",
         "@vue/preload-webpack-plugin": "^1.1.0",
         "@vue/web-component-wrapper": "^1.2.0",
@@ -4630,15 +4631,15 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
-          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
+          "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
           "dev": true
         },
         "acorn-walk": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.1.1.tgz",
-          "integrity": "sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
           "dev": true
         },
         "ajv": {
@@ -4722,9 +4723,9 @@
           "dev": true
         },
         "fast-deep-equal": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
           "dev": true
         },
         "find-cache-dir": {
@@ -4831,24 +4832,16 @@
           }
         },
         "schema-utils": {
-          "version": "2.6.6",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
-          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
           "dev": true,
           "requires": {
-            "ajv": "^6.12.0",
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
             "ajv-keywords": "^3.4.1"
           }
         },
-        "serialize-javascript": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
-          "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
-          "dev": true,
-          "requires": {
-            "randombytes": "^2.1.0"
-          }
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -4886,9 +4879,9 @@
           }
         },
         "terser-webpack-plugin": {
-          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.6.tgz",
-          "integrity": "sha512-I8IDsQwZrqjdmOicNeE8L/MhwatAap3mUrtcAKJuilsemUNcX+Hier/eAzwStVqhlCxq0aG3ni9bK/0BESXkTg==",
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.7.tgz",
+          "integrity": "sha512-xzYyaHUNhzgaAdBsXxk2Yvo/x1NJdslUaussK3fdpBbvttm1iIwU+c26dj9UxJcwk2c5UWt5F55MUTIA8BE7Dg==",
           "dev": true,
           "requires": {
             "cacache": "^13.0.1",
@@ -4896,7 +4889,7 @@
             "jest-worker": "^25.4.0",
             "p-limit": "^2.3.0",
             "schema-utils": "^2.6.6",
-            "serialize-javascript": "^3.0.0",
+            "serialize-javascript": "^3.1.0",
             "source-map": "^0.6.1",
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
@@ -4916,9 +4909,9 @@
       }
     },
     "@vue/cli-shared-utils": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.4.1.tgz",
-      "integrity": "sha512-teevHgI7XUsKVMOncx3M+6iLjO28woGfRwgUG4hR83moVBHQe5x2OCr2i5t/58bwpv269RD5RYXBQCGtIXuxZw==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.4.4.tgz",
+      "integrity": "sha512-ccMZtTMSutR35V5nrU/eyj+zRMomTRGBTLwJPmaJ2sRiW/93MTggQGXDWC8JRAA8yiU1N8xza8mjBxS0O2wIAA==",
       "dev": true,
       "requires": {
         "@hapi/joi": "^15.0.1",
@@ -4977,13 +4970,13 @@
       }
     },
     "@vue/cli-ui": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui/-/cli-ui-4.4.1.tgz",
-      "integrity": "sha512-UPDvDdYvuacUuq39OQ/WfLsuIrzIJMdL2bkMecpcegDRPi6MEgkInXqSOMEl5v72FX8qStwXYCUSxifoYIIZ/g==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui/-/cli-ui-4.4.4.tgz",
+      "integrity": "sha512-BKzDvUgy6fsZolrMLBvMLlue7s3dFeIJdxWWJtc8/CjD5VvLG+XawAePx8W+24QZwCZpvoZIz4zU38D341IT9A==",
       "dev": true,
       "requires": {
         "@akryum/winattr": "^3.0.0",
-        "@vue/cli-shared-utils": "^4.4.1",
+        "@vue/cli-shared-utils": "^4.4.4",
         "apollo-server-express": "^2.13.1",
         "clone": "^2.1.1",
         "deepmerge": "^4.2.2",
@@ -5022,15 +5015,15 @@
       }
     },
     "@vue/cli-ui-addon-webpack": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-webpack/-/cli-ui-addon-webpack-4.4.1.tgz",
-      "integrity": "sha512-UJrv7bCSEJIq+nG3xKSOMjkUnQBbUr+vwk6PjBPsMcjOdbra7p8sQfDIXeRSviCgoDVcnODJDMyD0tqg6OI/sA==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-webpack/-/cli-ui-addon-webpack-4.4.4.tgz",
+      "integrity": "sha512-qx3MnLxk4JeKpkGK2h5ZihuA8Asgu7sbLDagOOaEbF6GpnHSfkrYioE7es8AHm4QHBgn/MWqnkBts5XDN5r4LA==",
       "dev": true
     },
     "@vue/cli-ui-addon-widgets": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-widgets/-/cli-ui-addon-widgets-4.4.1.tgz",
-      "integrity": "sha512-VaAnCI1X2SEllLNf1TXNz0BARfdb+COMUMzc17PMb5xmdqDswPvVKG5pnFurKODWFgI7zcbk4kBnrYojdLnhNg==",
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@vue/cli-ui-addon-widgets/-/cli-ui-addon-widgets-4.4.4.tgz",
+      "integrity": "sha512-nOe6LOwZsKCiaH+jrAO2/G90qAkzB1RYivcWGnXirQAH7nec1ZysDNQv1HMDIfWbhCkJMWhGICuWcrn+rtb/8Q==",
       "dev": true
     },
     "@vue/component-compiler-utils": {
@@ -5549,9 +5542,9 @@
       }
     },
     "apollo": {
-      "version": "2.28.0",
-      "resolved": "https://registry.npmjs.org/apollo/-/apollo-2.28.0.tgz",
-      "integrity": "sha512-dtgkWQi+x36mUFKq3HSSANrVMycyrpeGR/cJsisogzAkJvqFS7Pk2CWCNlrOV9HU/UmHBi0ecBLC5xOI7izBUw==",
+      "version": "2.28.3",
+      "resolved": "https://registry.npmjs.org/apollo/-/apollo-2.28.3.tgz",
+      "integrity": "sha512-+X1RqODYOz1VPO0a/6tZpZiFQr7K6z0ZSm7H9oT9PmuZ9TMC27mwOh2N0i1p+OP+6JORKh8lHmjMvle+doZ82A==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.8",
@@ -5563,20 +5556,21 @@
         "@oclif/plugin-not-found": "1.2.4",
         "@oclif/plugin-plugins": "1.7.9",
         "@oclif/plugin-warn-if-update-available": "1.7.0",
-        "apollo-codegen-core": "^0.37.0",
-        "apollo-codegen-flow": "^0.35.0",
-        "apollo-codegen-scala": "^0.36.0",
-        "apollo-codegen-swift": "^0.37.0",
-        "apollo-codegen-typescript": "^0.37.0",
+        "apollo-codegen-core": "^0.37.3",
+        "apollo-codegen-flow": "^0.35.3",
+        "apollo-codegen-scala": "^0.36.3",
+        "apollo-codegen-swift": "^0.37.3",
+        "apollo-codegen-typescript": "^0.37.3",
         "apollo-env": "^0.6.5",
-        "apollo-graphql": "^0.4.4",
-        "apollo-language-server": "^1.22.0",
+        "apollo-graphql": "^0.4.5",
+        "apollo-language-server": "^1.22.3",
         "chalk": "2.4.2",
         "cli-ux": "5.4.6",
         "env-ci": "3.2.2",
         "gaze": "1.1.3",
         "git-parse": "1.0.4",
         "git-rev-sync": "2.0.0",
+        "git-url-parse": "^11.1.2",
         "glob": "7.1.5",
         "graphql": "14.0.2 - 14.2.0 || ^14.3.1",
         "graphql-tag": "2.10.3",
@@ -5584,7 +5578,7 @@
         "lodash.identity": "3.0.0",
         "lodash.pickby": "4.6.0",
         "mkdirp": "0.5.5",
-        "moment": "2.25.3",
+        "moment": "2.26.0",
         "strip-ansi": "5.2.0",
         "table": "5.4.6",
         "tty": "1.0.1",
@@ -5690,21 +5684,50 @@
       }
     },
     "apollo-codegen-core": {
-      "version": "0.37.0",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-core/-/apollo-codegen-core-0.37.0.tgz",
-      "integrity": "sha512-9+DXf/Gl+xtkRpkhVyY6l8zPxzp7B8rD4wcw8H+5X3E/3jJcsrbM32b2rP09L48ZYIJ2a8YDmD903vtIGeUtvw==",
+      "version": "0.37.3",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-core/-/apollo-codegen-core-0.37.3.tgz",
+      "integrity": "sha512-/DwAhOOFzl57GdBfRGNnqIAcfZAXpsgFIeWYqlu3I/eIucGBCFWo9CEW1TcNwkZzYGAmSE8tURwPgt7dtnhFpg==",
       "dev": true,
       "requires": {
-        "@babel/generator": "7.9.6",
+        "@babel/generator": "7.10.2",
         "@babel/parser": "^7.1.3",
-        "@babel/types": "7.9.6",
+        "@babel/types": "7.10.2",
         "apollo-env": "^0.6.5",
-        "apollo-language-server": "^1.22.0",
+        "apollo-language-server": "^1.22.3",
         "ast-types": "^0.13.0",
         "common-tags": "^1.5.1",
         "recast": "^0.19.0"
       },
       "dependencies": {
+        "@babel/generator": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.2",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
         "recast": {
           "version": "0.19.1",
           "resolved": "https://registry.npmjs.org/recast/-/recast-0.19.1.tgz",
@@ -5715,66 +5738,130 @@
             "esprima": "~4.0.0",
             "private": "^0.1.8",
             "source-map": "~0.6.1"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.6.1",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+              "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+              "dev": true
+            }
           }
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
         }
       }
     },
     "apollo-codegen-flow": {
-      "version": "0.35.0",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-flow/-/apollo-codegen-flow-0.35.0.tgz",
-      "integrity": "sha512-nMyV2ebsBbqPh4L0Xfrdw3+ndpSZMixt1o2RIW5EGn4sH77ZQsHCKdjBEEodtM5cucVjIhj/E03H9wioQILsXw==",
+      "version": "0.35.3",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-flow/-/apollo-codegen-flow-0.35.3.tgz",
+      "integrity": "sha512-npDt9PEJiw/ygKUsKxaDGHCnjQUANPlg/F9piIbQ71jwBjNNoNSXrRaRiD5632MfcTvEuBvanElEX3AO2sA1gw==",
       "dev": true,
       "requires": {
-        "@babel/generator": "7.9.6",
-        "@babel/types": "7.9.6",
-        "apollo-codegen-core": "^0.37.0",
+        "@babel/generator": "7.10.2",
+        "@babel/types": "7.10.2",
+        "apollo-codegen-core": "^0.37.3",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.2",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "apollo-codegen-scala": {
-      "version": "0.36.0",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-scala/-/apollo-codegen-scala-0.36.0.tgz",
-      "integrity": "sha512-HwKXQwpGblLKUFyZb5B3Culym+Uo9yE3oFoHzMVClIG4iwxqkrwwctfXyc4aLEVmVXT9wDPAiX8xKo8TQiTnng==",
+      "version": "0.36.3",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-scala/-/apollo-codegen-scala-0.36.3.tgz",
+      "integrity": "sha512-KOmcP/0RiqSGY03fXdF87IzQ1RSsApbno3/M8KRVF2yhf+4X3GQXQRpXejHMt4DxnnfPBOn7MqwtP/cDMJIiyw==",
       "dev": true,
       "requires": {
-        "apollo-codegen-core": "^0.37.0",
+        "apollo-codegen-core": "^0.37.3",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-swift": {
-      "version": "0.37.0",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-swift/-/apollo-codegen-swift-0.37.0.tgz",
-      "integrity": "sha512-jaYHiDoQQNGyEF1tHlUk+sjRAX8yBF5hrG4T9GE1OMEwQ8Q57FQx+N1GvkCxNIQlYFbfJFsAzhTjwfp1bPxGnA==",
+      "version": "0.37.3",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-swift/-/apollo-codegen-swift-0.37.3.tgz",
+      "integrity": "sha512-0BpwtSE+IP12C7OdoScsOWUgxbcuThgwVRsxybBNugUcmddF5sCdGiRbdm+oKvX1vErsG+XimwmIuZnBPWv6ew==",
       "dev": true,
       "requires": {
-        "apollo-codegen-core": "^0.37.0",
+        "apollo-codegen-core": "^0.37.3",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
       }
     },
     "apollo-codegen-typescript": {
-      "version": "0.37.0",
-      "resolved": "https://registry.npmjs.org/apollo-codegen-typescript/-/apollo-codegen-typescript-0.37.0.tgz",
-      "integrity": "sha512-gsxjUZ0U7IKnPnSy26PHaDboloClBYM8oMFYDppCHDA9iosmcnyFEgbznxdtbQncflUROJnCjYuSGgV/Ej9ziA==",
+      "version": "0.37.3",
+      "resolved": "https://registry.npmjs.org/apollo-codegen-typescript/-/apollo-codegen-typescript-0.37.3.tgz",
+      "integrity": "sha512-tuf/AQTFcNrngQrT4q4WKRdiuPbglyR1m3L58g/nNevoO0cRmF6koIix4NB5sO05LgF8XJmd2zHvInUI5v33Ig==",
       "dev": true,
       "requires": {
-        "@babel/generator": "7.9.6",
-        "@babel/types": "7.9.6",
-        "apollo-codegen-core": "^0.37.0",
+        "@babel/generator": "7.10.2",
+        "@babel/types": "7.10.2",
+        "apollo-codegen-core": "^0.37.3",
         "change-case": "^3.0.1",
         "common-tags": "^1.5.1",
         "inflected": "^2.0.3"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.2.tgz",
+          "integrity": "sha512-AxfBNHNu99DTMvlUPlt1h2+Hn7knPpH5ayJ8OqDWSeLld+Fi2AYBTC/IejWDM9Edcii4UzZRCsbUt0WlSDsDsA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.2",
+            "jsesc": "^2.5.1",
+            "lodash": "^4.17.13",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.10.1",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.1.tgz",
+          "integrity": "sha512-5vW/JXLALhczRCWP0PnFDMCJAchlBvM7f4uk/jXritBnIa6E1KmqmtrS3yn1LAnxFBypQ3eneLuXjsnfQsgILw==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.2.tgz",
+          "integrity": "sha512-AD3AwWBSz0AWF0AkCN9VPiWrvldXq+/e3cHa4J89vo4ymjz1XwrBFFVZmkJTsQIPNk+ZVomPSXUJqq8yyjZsng==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.1",
+            "lodash": "^4.17.13",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "apollo-datasource": {
@@ -5788,9 +5875,9 @@
       }
     },
     "apollo-engine-reporting": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-2.0.0.tgz",
-      "integrity": "sha512-FvNwORsh3nxEfvQqd2xbd468a0q/R3kYar/Bk6YQdBX5qwqUhqmOcOSxLFk8Zb77HpwHij5CPpPWJb53TU1zcA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/apollo-engine-reporting/-/apollo-engine-reporting-2.2.0.tgz",
+      "integrity": "sha512-FmfWTpyEATO392QHcot3PNMrxNhEJ4Kq+QiYY263vN/OBLZQ5zpkFY25iB6gVuiJoz3NUkByhxq5f/XjarJVvA==",
       "dev": true,
       "requires": {
         "apollo-engine-reporting-protobuf": "^0.5.1",
@@ -5834,9 +5921,9 @@
       }
     },
     "apollo-graphql": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/apollo-graphql/-/apollo-graphql-0.4.4.tgz",
-      "integrity": "sha512-i012iRKT5nfsOaNMx4MTwHw2jrlyaF1zikpejxsGHsKIf3OngGvGh3pyw20bEmwj413OrNQpRxvvIz5A7W/8xw==",
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/apollo-graphql/-/apollo-graphql-0.4.5.tgz",
+      "integrity": "sha512-0qa7UOoq7E71kBYE7idi6mNQhHLVdMEDInWk6TNw3KsSWZE2/I68gARP84Mj+paFTO5NYuw1Dht66PVX76Cc2w==",
       "dev": true,
       "requires": {
         "apollo-env": "^0.6.5",
@@ -5844,18 +5931,18 @@
       }
     },
     "apollo-language-server": {
-      "version": "1.22.0",
-      "resolved": "https://registry.npmjs.org/apollo-language-server/-/apollo-language-server-1.22.0.tgz",
-      "integrity": "sha512-7Ryl48ggPMaP+FQgrZ0Fr22/OGmP1mByM1zUDshSw7o09eC+EQ4CIKy1n5aGwArMI6TCcBF0hE3bcshq7YPjQQ==",
+      "version": "1.22.3",
+      "resolved": "https://registry.npmjs.org/apollo-language-server/-/apollo-language-server-1.22.3.tgz",
+      "integrity": "sha512-RurKlBUNE1RrvY4m93b5WS/DXInUEI47MlzuvholRqZSQovt2rQi81R0RvmS/l3d6y5TBfxbPFpT5RyHbdAntw==",
       "dev": true,
       "requires": {
-        "@apollo/federation": "0.16.0",
+        "@apollo/federation": "0.16.2",
         "@apollographql/apollo-tools": "^0.4.8",
         "@apollographql/graphql-language-service-interface": "^2.0.2",
         "@endemolshinegroup/cosmiconfig-typescript-loader": "^1.0.0",
         "apollo-datasource": "^0.7.0",
         "apollo-env": "^0.6.5",
-        "apollo-graphql": "^0.4.4",
+        "apollo-graphql": "^0.4.5",
         "apollo-link": "^1.2.3",
         "apollo-link-context": "^1.0.9",
         "apollo-link-error": "^1.1.1",
@@ -5871,7 +5958,7 @@
         "lodash.debounce": "^4.0.8",
         "lodash.merge": "^4.6.1",
         "minimatch": "^3.0.4",
-        "moment": "2.25.3",
+        "moment": "2.26.0",
         "vscode-languageserver": "^5.1.0",
         "vscode-uri": "1.0.6"
       }
@@ -6019,18 +6106,18 @@
       }
     },
     "apollo-server-core": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.14.1.tgz",
-      "integrity": "sha512-Uk/jJwLtm+5YvExghNoq9V2ZHJRXPfaVOt4cIyo+mcjWG6YymHhMg5h9pR/auz9HMI8NP7ykmfo/bsTR1qutWQ==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-core/-/apollo-server-core-2.15.0.tgz",
+      "integrity": "sha512-PwNm/G5IXReev7E0ZaRAekQ7pN9BTuXH8c2QVgfMGMno3XiN5Dj+1DXYQthpwNJch0y5zhhLcb/JbClijgSEsA==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.3",
-        "@apollographql/graphql-playground-html": "1.6.24",
+        "@apollographql/graphql-playground-html": "1.6.26",
         "@types/graphql-upload": "^8.0.0",
         "@types/ws": "^7.0.0",
         "apollo-cache-control": "^0.11.0",
         "apollo-datasource": "^0.7.1",
-        "apollo-engine-reporting": "^2.0.0",
+        "apollo-engine-reporting": "^2.2.0",
         "apollo-server-caching": "^0.5.1",
         "apollo-server-env": "^2.4.4",
         "apollo-server-errors": "^2.4.1",
@@ -6038,7 +6125,7 @@
         "apollo-server-types": "^0.5.0",
         "apollo-tracing": "^0.11.0",
         "fast-json-stable-stringify": "^2.0.0",
-        "graphql-extensions": "^0.12.2",
+        "graphql-extensions": "^0.12.3",
         "graphql-tag": "^2.9.2",
         "graphql-tools": "^4.0.0",
         "graphql-upload": "^8.0.2",
@@ -6065,18 +6152,18 @@
       "dev": true
     },
     "apollo-server-express": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.14.1.tgz",
-      "integrity": "sha512-Ee1Oc+lzKfHh3BkDNRJL4s7Nnx+Nkmz606TBDi0ETSuNjJqXBNDbDM/YLS3LP7zJ5Oa37U7py72x8rrkPiZZNg==",
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/apollo-server-express/-/apollo-server-express-2.15.0.tgz",
+      "integrity": "sha512-ECptVIrOVW2cmMWvqtpkZfyZrQL8yTSgbVvP4M8qcPV/3XxDJa6444zy7vxqN7lyYl8IJAsg/IwC0vodoXe//A==",
       "dev": true,
       "requires": {
-        "@apollographql/graphql-playground-html": "1.6.24",
+        "@apollographql/graphql-playground-html": "1.6.26",
         "@types/accepts": "^1.3.5",
         "@types/body-parser": "1.19.0",
         "@types/cors": "^2.8.4",
         "@types/express": "4.17.4",
         "accepts": "^1.3.5",
-        "apollo-server-core": "^2.14.1",
+        "apollo-server-core": "^2.15.0",
         "apollo-server-types": "^0.5.0",
         "body-parser": "^1.18.3",
         "cors": "^2.8.4",
@@ -6631,9 +6718,9 @@
           "dev": true
         },
         "fast-deep-equal": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
           "dev": true
         },
         "json5": {
@@ -6663,12 +6750,13 @@
           "dev": true
         },
         "schema-utils": {
-          "version": "2.6.6",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
-          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
           "dev": true,
           "requires": {
-            "ajv": "^6.12.0",
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
             "ajv-keywords": "^3.4.1"
           }
         }
@@ -7805,9 +7893,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001066",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz",
-      "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==",
+      "version": "1.0.30001084",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001084.tgz",
+      "integrity": "sha512-ftdc5oGmhEbLUuMZ/Qp3mOpzfZLCxPYKcvGv6v2dJJ+8EdqcvZRbAGOiLmkM/PV1QGta/uwBs8/nCl6sokDW6w==",
       "dev": true
     },
     "capture-exit": {
@@ -8938,6 +9026,12 @@
             "ajv-keywords": "^3.1.0"
           }
         },
+        "serialize-javascript": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+          "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
+          "dev": true
+        },
         "slash": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -9142,9 +9236,9 @@
       "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
     },
     "css-loader": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.5.3.tgz",
-      "integrity": "sha512-UEr9NH5Lmi7+dguAm+/JSPovNjYbm2k3TK58EiwQHzOHH5Jfq1Y+XoP2bQO6TMn7PptMd0opxxedAWcaSTRKHw==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz",
+      "integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==",
       "dev": true,
       "requires": {
         "camelcase": "^5.3.1",
@@ -9152,13 +9246,13 @@
         "icss-utils": "^4.1.1",
         "loader-utils": "^1.2.3",
         "normalize-path": "^3.0.0",
-        "postcss": "^7.0.27",
+        "postcss": "^7.0.32",
         "postcss-modules-extract-imports": "^2.0.0",
         "postcss-modules-local-by-default": "^3.0.2",
         "postcss-modules-scope": "^2.2.0",
         "postcss-modules-values": "^3.0.0",
-        "postcss-value-parser": "^4.0.3",
-        "schema-utils": "^2.6.6",
+        "postcss-value-parser": "^4.1.0",
+        "schema-utils": "^2.7.0",
         "semver": "^6.3.0"
       },
       "dependencies": {
@@ -9181,18 +9275,19 @@
           "dev": true
         },
         "fast-deep-equal": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz",
-          "integrity": "sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==",
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
           "dev": true
         },
         "schema-utils": {
-          "version": "2.6.6",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.6.6.tgz",
-          "integrity": "sha512-wHutF/WPSbIi9x6ctjGGk2Hvl0VOz5l3EKEuKbjPlB30mKZUzb9A5k9yEXRX3pwyqVLPvpfZZEllaFq/M718hA==",
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+          "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
           "dev": true,
           "requires": {
-            "ajv": "^6.12.0",
+            "@types/json-schema": "^7.0.4",
+            "ajv": "^6.12.2",
             "ajv-keywords": "^3.4.1"
           }
         }
@@ -9246,6 +9341,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=",
+      "dev": true
+    },
     "cssnano": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
@@ -10263,9 +10364,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.453",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz",
-      "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==",
+      "version": "1.3.477",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.477.tgz",
+      "integrity": "sha512-81p6DZ/XmHDD7O0ITJMa7ESo9bSCfE+v3Fny3MIYR0y77xmhoriu2ShNOLXcPS4eowF6dkxw6d2QqxTkS3DjBg==",
       "dev": true
     },
     "elegant-spinner": {
@@ -10322,9 +10423,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz",
-      "integrity": "sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.2.0.tgz",
+      "integrity": "sha512-S7eiFb/erugyd1rLb6mQ3Vuq+EXHv5cpCkNqqIkYkBgN2QdFnyCZzFBleqwGEx4lgNGYij81BWnCrFNK7vxvjQ==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -10456,9 +10557,9 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.1.tgz",
-      "integrity": "sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==",
+      "version": "1.14.2",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.2.tgz",
+      "integrity": "sha512-InuOIiKk8wwuOFg6x9BQXbzjrQhtyXh46K9bqVTPzSo2FnyMBaYGBMC6PhQy7yxxil9vIedFBweQBMK74/7o8A==",
       "dev": true,
       "requires": {
         "esprima": "^4.0.1",
@@ -11858,9 +11959,9 @@
       "dev": true
     },
     "flow-parser": {
-      "version": "0.125.1",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.125.1.tgz",
-      "integrity": "sha512-vrnK98a85yyaPqcZTQmHlrzb4PAiF/WgkI8xZCmyn5sT6/bAKAFbUB+VQqfzTpnvq2VwZ5SThi/xuz3zMLTFRw==",
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.127.0.tgz",
+      "integrity": "sha512-T4T92hVeVtrkYYvU01L2KFANsA0TJQrgy46efIU/JBxDhVjxIdS7KzaBEsPJu7RPOM44FCR7wcFQg6rWtGGrLQ==",
       "dev": true
     },
     "flush-write-stream": {
@@ -11874,30 +11975,10 @@
       }
     },
     "follow-redirects": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
-      "integrity": "sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.12.0.tgz",
+      "integrity": "sha512-JgawlbfBQKjbKegPn8vUsvJqplE7KHJuhGO4yPcb+ZOIYKSr+xobMVlfRBToZwZUUxy7lFiKBdFNloz9ui368Q==",
+      "dev": true
     },
     "for-in": {
       "version": "1.0.2",
@@ -12418,6 +12499,25 @@
         }
       }
     },
+    "git-up": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/git-up/-/git-up-4.0.1.tgz",
+      "integrity": "sha512-LFTZZrBlrCrGCG07/dm1aCjjpL1z9L3+5aEeI9SBhAqSc+kiA9Or1bgZhQFNppJX6h/f5McrvJt1mQXTFm6Qrw==",
+      "dev": true,
+      "requires": {
+        "is-ssh": "^1.3.0",
+        "parse-url": "^5.0.0"
+      }
+    },
+    "git-url-parse": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/git-url-parse/-/git-url-parse-11.1.2.tgz",
+      "integrity": "sha512-gZeLVGY8QVKMIkckncX+iCq2/L8PlwncvDFKiWkBn9EtCfYDbliRTTp6qzyQ1VMdITUfq7293zDzfpjdiGASSQ==",
+      "dev": true,
+      "requires": {
+        "git-up": "^4.0.0"
+      }
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -12603,9 +12703,9 @@
       }
     },
     "graphql-extensions": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.12.2.tgz",
-      "integrity": "sha512-vFaZua5aLiCOOzxfY5qzHZ6S52BCqW7VVOwzvV52Wb5edRm3dn6u+1MR9yYyEqUHSf8LvdhEojYlOkKiaQ4ghA==",
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/graphql-extensions/-/graphql-extensions-0.12.3.tgz",
+      "integrity": "sha512-W7iT0kzlwTiZU7fXfw9IgWnsqVj7EFLd0/wVcZZRAbR8L3f4+YsGls0oxKdsrvYBnbG347BXKQmIyo6GTEk4XA==",
       "dev": true,
       "requires": {
         "@apollographql/apollo-tools": "^0.4.3",
@@ -12642,9 +12742,9 @@
       }
     },
     "graphql-type-json": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.1.tgz",
-      "integrity": "sha512-1lPkUXQ2L8o+ERLzVAuc3rzc/E6pGF+6HnjihCVTK0VzR0jCuUd92FqNxoHdfILXqOn2L6b4y47TBxiPyieUVA==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz",
+      "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==",
       "dev": true
     },
     "graphql-upload": {
@@ -13948,6 +14048,15 @@
       "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
       "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
     },
+    "is-ssh": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/is-ssh/-/is-ssh-1.3.1.tgz",
+      "integrity": "sha512-0eRIASHZt1E68/ixClI8bp2YK2wmBPVWEismTs6M+M099jKgrzl/3E976zIbImSIob48N2/XGe9y7ZiYdImSlg==",
+      "dev": true,
+      "requires": {
+        "protocols": "^1.1.0"
+      }
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
@@ -14560,9 +14669,9 @@
           }
         },
         "acorn": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
-          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
+          "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
           "dev": true
         },
         "cssom": {
@@ -15856,9 +15965,9 @@
       }
     },
     "lint-staged": {
-      "version": "10.2.9",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.9.tgz",
-      "integrity": "sha512-ziRAuXEqvJLSXg43ezBpHxRW8FOJCXISaXU//BWrxRrp5cBdRkIx7g5IsB3OI45xYGE0S6cOacfekSjDyDKF2g==",
+      "version": "10.2.11",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-10.2.11.tgz",
+      "integrity": "sha512-LRRrSogzbixYaZItE2APaS4l2eJMjjf5MbclRZpLJtcQJShcvUzKXsNeZgsLIZ0H0+fg2tL4B59fU9wHIHtFIA==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
@@ -15904,9 +16013,9 @@
           }
         },
         "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -16290,9 +16399,9 @@
       }
     },
     "listr2": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-2.1.0.tgz",
-      "integrity": "sha512-pWrbMLO+6jxGbgAasTLUzfRYdBaQvv6sNTWDfIX8ENBNmTwt/eafZ/LlJ66/dNaDnEhzCpWricLH4U9cjSAHYg==",
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-2.1.8.tgz",
+      "integrity": "sha512-Op+hheiChfAphkJ5qUxZtHgyjlX9iNnAeFS/S134xw7mVSg0YVrQo1IY4/K+ElY6XgOPg2Ij4z07urUXR+YEew==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
@@ -16322,9 +16431,9 @@
           "dev": true
         },
         "chalk": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
-          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -17198,9 +17307,9 @@
       "dev": true
     },
     "merge2": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.3.0.tgz",
-      "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true
     },
     "methods": {
@@ -17579,9 +17688,9 @@
       }
     },
     "moment": {
-      "version": "2.25.3",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.25.3.tgz",
-      "integrity": "sha512-PuYv0PHxZvzc15Sp8ybUCoQ+xpyPWvjOuK72a5ovzp2LI32rJXOiIfyoFoYvG3s6EwwrdkMyWuRiEHSZRLJNdg==",
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
+      "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==",
       "dev": true
     },
     "move-concurrently": {
@@ -17756,9 +17865,9 @@
       "dev": true
     },
     "nightwatch": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/nightwatch/-/nightwatch-1.3.5.tgz",
-      "integrity": "sha512-Wb1oLwIhF/44B4NcpDzjNnXu4YIs51AgfMYHsjUssg+n5qZLqty4Wg3uF7G4jT9g4S5IAEYw1D7/Yt+XFxdQtg==",
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/nightwatch/-/nightwatch-1.3.6.tgz",
+      "integrity": "sha512-61kz2mw3Ng8Rrs2CDZv6aVB+bW+oNIFXL543L9kOvOqft3zVh2j08W8ww6BxGDzmWZe1HGRXNEI5U8+I4hO4KA==",
       "dev": true,
       "requires": {
         "assertion-error": "^1.1.0",
@@ -17778,7 +17887,8 @@
         "proxy-agent": "^3.1.1",
         "request": "^2.88.2",
         "request-promise": "^4.2.5",
-        "semver": "^6.3.0"
+        "semver": "^6.3.0",
+        "strip-ansi": "^6.0.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -18196,9 +18306,9 @@
       }
     },
     "node-releases": {
-      "version": "1.1.57",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.57.tgz",
-      "integrity": "sha512-ZQmnWS7adi61A9JsllJ2gdj2PauElcjnOwTp2O011iGzoakTxUsDGSe+6vD7wXbKdqhSFymC0OSx35aAMhrSdw==",
+      "version": "1.1.58",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
+      "integrity": "sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==",
       "dev": true
     },
     "node-sass": {
@@ -18508,22 +18618,37 @@
       },
       "dependencies": {
         "es-abstract": {
-          "version": "1.17.5",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
-          "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
+          "version": "1.17.6",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
+          "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
           "dev": true,
           "requires": {
             "es-to-primitive": "^1.2.1",
             "function-bind": "^1.1.1",
             "has": "^1.0.3",
             "has-symbols": "^1.0.1",
-            "is-callable": "^1.1.5",
-            "is-regex": "^1.0.5",
+            "is-callable": "^1.2.0",
+            "is-regex": "^1.1.0",
             "object-inspect": "^1.7.0",
             "object-keys": "^1.1.1",
             "object.assign": "^4.1.0",
-            "string.prototype.trimleft": "^2.1.1",
-            "string.prototype.trimright": "^2.1.1"
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
+          "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
+          "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
+          "dev": true,
+          "requires": {
+            "has-symbols": "^1.0.1"
           }
         }
       }
@@ -19009,6 +19134,36 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-path/-/parse-path-4.0.1.tgz",
+      "integrity": "sha512-d7yhga0Oc+PwNXDvQ0Jv1BuWkLVPXcAoQ/WREgd6vNNoKYaW52KI+RdOFjI63wjkmps9yUE8VS4veP+AgpQ/hA==",
+      "dev": true,
+      "requires": {
+        "is-ssh": "^1.3.0",
+        "protocols": "^1.4.0"
+      }
+    },
+    "parse-url": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-5.0.1.tgz",
+      "integrity": "sha512-flNUPP27r3vJpROi0/R3/2efgKkyXqnXwyP1KQ2U0SfFRgdizOdWfvrrvJg1LuOoxs7GQhmxJlq23IpQ/BkByg==",
+      "dev": true,
+      "requires": {
+        "is-ssh": "^1.3.0",
+        "normalize-url": "^3.3.0",
+        "parse-path": "^4.0.0",
+        "protocols": "^1.4.0"
+      },
+      "dependencies": {
+        "normalize-url": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
+          "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
+          "dev": true
+        }
+      }
+    },
     "parse5": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
@@ -19385,9 +19540,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.31",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.31.tgz",
-      "integrity": "sha512-a937VDHE1ftkjk+8/7nj/mrjtmkn69xxzJgRETXdAUU+IgOYPQNJF17haGWbeDxSyk++HA14UA98FurvPyBJOA==",
+      "version": "7.0.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -20162,6 +20317,12 @@
       "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
       "dev": true
     },
+    "protocols": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/protocols/-/protocols-1.4.7.tgz",
+      "integrity": "sha512-Fx65lf9/YDn3hUX08XUc0J8rSux36rEsyiv21ZGUC1mOyeM3lTRpZLcrm8aAolzS4itwVfm7TAPyxC2E5zd6xg==",
+      "dev": true
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -20559,9 +20720,9 @@
       }
     },
     "regenerate": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
-      "integrity": "sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
+      "integrity": "sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A==",
       "dev": true
     },
     "regenerate-unicode-properties": {
@@ -21272,10 +21433,13 @@
       }
     },
     "serialize-javascript": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
-      "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==",
-      "dev": true
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-3.1.0.tgz",
+      "integrity": "sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
     },
     "serve-index": {
       "version": "1.9.1",
@@ -21932,9 +22096,9 @@
       "dev": true
     },
     "stackframe": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.1.1.tgz",
-      "integrity": "sha512-0PlYhdKh6AfFxRyK/v+6/k+/mMfyiEBbTM5L94D0ZytQnJ166wuwoTYLHFWGbs2dpA8Rgq763KGWmN1EQEYHRQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+      "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
       "dev": true
     },
     "static-extend": {
@@ -22106,6 +22270,52 @@
         }
       }
     },
+    "string.prototype.trimend": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
+      "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.6",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
+          "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.0",
+            "is-regex": "^1.1.0",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
+          "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
+          "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
+          "dev": true,
+          "requires": {
+            "has-symbols": "^1.0.1"
+          }
+        }
+      }
+    },
     "string.prototype.trimleft": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz",
@@ -22124,6 +22334,52 @@
         "function-bind": "^1.1.1"
       }
     },
+    "string.prototype.trimstart": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
+      "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.6",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
+          "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "^1.2.1",
+            "function-bind": "^1.1.1",
+            "has": "^1.0.3",
+            "has-symbols": "^1.0.1",
+            "is-callable": "^1.2.0",
+            "is-regex": "^1.1.0",
+            "object-inspect": "^1.7.0",
+            "object-keys": "^1.1.1",
+            "object.assign": "^4.1.0",
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
+          "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
+          "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
+          "dev": true,
+          "requires": {
+            "has-symbols": "^1.0.1"
+          }
+        }
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -22343,9 +22599,9 @@
           }
         },
         "css-what": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.2.1.tgz",
-          "integrity": "sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==",
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
+          "integrity": "sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==",
           "dev": true
         },
         "domutils": {
@@ -22673,9 +22929,9 @@
       }
     },
     "terser": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.7.0.tgz",
-      "integrity": "sha512-Lfb0RiZcjRDXCC3OSHJpEkxJ9Qeqs6mp2v4jf2MHfy8vGERmVDuvjXdd/EnP5Deme5F2yBRBymKmKHCBg2echw==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
       "dev": true,
       "requires": {
         "commander": "^2.20.0",
@@ -22692,16 +22948,16 @@
       }
     },
     "terser-webpack-plugin": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz",
-      "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==",
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.4.tgz",
+      "integrity": "sha512-U4mACBHIegmfoEe5fdongHESNJWqsGU+W0S/9+BmYGVQDw1+c2Ow05TpMhxjPK1sRb7cuYq1BPl1e5YHJMTCqA==",
       "dev": true,
       "requires": {
         "cacache": "^12.0.2",
         "find-cache-dir": "^2.1.0",
         "is-wsl": "^1.1.0",
         "schema-utils": "^1.0.0",
-        "serialize-javascript": "^2.1.2",
+        "serialize-javascript": "^3.1.0",
         "source-map": "^0.6.1",
         "terser": "^4.1.2",
         "webpack-sources": "^1.4.0",
@@ -22746,9 +23002,9 @@
       "dev": true
     },
     "thenify": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.0.tgz",
-      "integrity": "sha1-5p44obq+lpsBCCB5eLn2K4hgSDk=",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
       "dev": true,
       "requires": {
         "any-promise": "^1.0.0"
@@ -23717,22 +23973,37 @@
       },
       "dependencies": {
         "es-abstract": {
-          "version": "1.17.5",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz",
-          "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==",
+          "version": "1.17.6",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
+          "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
           "dev": true,
           "requires": {
             "es-to-primitive": "^1.2.1",
             "function-bind": "^1.1.1",
             "has": "^1.0.3",
             "has-symbols": "^1.0.1",
-            "is-callable": "^1.1.5",
-            "is-regex": "^1.0.5",
+            "is-callable": "^1.2.0",
+            "is-regex": "^1.1.0",
             "object-inspect": "^1.7.0",
             "object-keys": "^1.1.1",
             "object.assign": "^4.1.0",
-            "string.prototype.trimleft": "^2.1.1",
-            "string.prototype.trimright": "^2.1.1"
+            "string.prototype.trimend": "^1.0.1",
+            "string.prototype.trimstart": "^1.0.1"
+          }
+        },
+        "is-callable": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
+          "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
+          "dev": true
+        },
+        "is-regex": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
+          "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
+          "dev": true,
+          "requires": {
+            "has-symbols": "^1.0.1"
           }
         }
       }
@@ -24130,12 +24401,9 @@
       "integrity": "sha512-45rOonNrZaKX0mu0N9v422+c3Ngm8iTnVAP0N2iUwPfWZJds4S6eRGdmiNbrVFqmUc8IfRNI0Dpa3Zk8ntjaZQ=="
     },
     "vue-property-decorator": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.4.2.tgz",
-      "integrity": "sha512-IqbARlvgPE2pzKfbecKxsu2yEH0Wv7hfHR6m4eZA3LTnNw9hveAX77vDfLFyTeMISS5N7Kucp/xRSHjcQ6bAfQ==",
-      "requires": {
-        "vue-class-component": "^7.1.0"
-      }
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-8.5.0.tgz",
+      "integrity": "sha512-0RueJN/shPWf5gM8GLUD6bYiXr+q7bu+S1tgr7XwgBSng10H5DLQjVYfJ5XHAOPFo7fBfY1nxljBQ95qryAiWg=="
     },
     "vue-resize-directive": {
       "version": "1.2.0",
@@ -24505,15 +24773,15 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
-          "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
+          "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
           "dev": true
         },
         "acorn-walk": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.1.1.tgz",
-          "integrity": "sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==",
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
           "dev": true
         }
       }
@@ -24694,9 +24962,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "whatwg-encoding": {
@@ -24884,6 +25152,16 @@
       "integrity": "sha1-UqY+VsoLhKfzpfPWGHLxJq16WUM=",
       "dev": true
     },
+    "xss": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.7.tgz",
+      "integrity": "sha512-A9v7tblGvxu8TWXQC9rlpW96a+LN1lyw6wyhpTmmGW+FwRMactchBR3ROKSi33UPCUcUHSu8s9YP6F+K3Mw//w==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 7e75b928..17f5de7d 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@cloudcmd/clipboard": "^2.0.0",
     "@types/irc": "^0.3.33",
     "@types/node": "^14.0.13",
     "@types/punycode": "^2.1.0",
@@ -38,7 +39,7 @@
     "vue-context-menu": "^2.0.6",
     "vue-js-modal": "^1.3.35",
     "vue-perfect-scrollbar": "^0.2.1",
-    "vue-property-decorator": "^8.4.2",
+    "vue-property-decorator": "^8.5.0",
     "vue-resize-directive": "^1.2.0",
     "vue-resource": "^1.5.1",
     "vuebar": "0.0.20",
@@ -49,15 +50,15 @@
   "devDependencies": {
     "@types/jest": "^26.0.0",
     "@types/markdown-it": "10.0.1",
-    "@typescript-eslint/eslint-plugin": "^3.2.0",
-    "@typescript-eslint/parser": "^3.2.0",
-    "@vue/cli": "^4.4.1",
-    "@vue/cli-plugin-babel": "^4.4.1",
-    "@vue/cli-plugin-e2e-nightwatch": "^4.4.1",
-    "@vue/cli-plugin-eslint": "^4.4.1",
-    "@vue/cli-plugin-typescript": "^4.4.1",
-    "@vue/cli-plugin-unit-jest": "^4.4.1",
-    "@vue/cli-service": "^4.4.1",
+    "@typescript-eslint/eslint-plugin": "^3.3.0",
+    "@typescript-eslint/parser": "^3.3.0",
+    "@vue/cli": "^4.4.4",
+    "@vue/cli-plugin-babel": "^4.4.4",
+    "@vue/cli-plugin-e2e-nightwatch": "^4.4.4",
+    "@vue/cli-plugin-eslint": "^4.4.4",
+    "@vue/cli-plugin-typescript": "^4.4.4",
+    "@vue/cli-plugin-unit-jest": "^4.4.4",
+    "@vue/cli-service": "^4.4.4",
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^1.0.3",
@@ -65,7 +66,7 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^7.2.0",
     "eslint-plugin-vue": "^6.2.2",
-    "lint-staged": "^10.2.9",
+    "lint-staged": "^10.2.11",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "ts-jest": "^26.1.0",
diff --git a/src/app/App.vue b/src/app/App.vue
index e4654c36..3a5a9800 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -46,47 +46,12 @@
     </template>
   </DraggableDiv>
 </template>
-<!-- TODO
-- Reconnect button
-  - Style to align with theme
-  - Hide input when visible
-- Cleanup
-  - Comment code
-  - Remove unused imports
-  - Group functions and properties
-  - Move unnecessary stuff out of chat.vuex
-  - Move code in chat commands to functions
-- Bug fixes
-  - Ensure features and styles are consistent across browsers
-FINISHED
-- Notifications
-  - Keywords
-- Settings
-  - Values need to be stored correctly
-  - Add option to change nick for opers
-  - Make sure emoticons can be changed there
-- Cleanup
-  - Markdown
-- Away status
-  - Automatically set it after a certain amount of time with no interaction
-  - Allow it to be manually set
-  - Don't fetch on demand - rather, update every 5 seconds (or so) and fetch values
-- Bug fixes
-  - Operator name change seems to break sometimes
-  - Optimize away/online status loading
-  - Find a way to limit unnecessary GET requests (tooltips)
-- Miscellaneous
-  - Clicking a channel name in a chat message opens the channel
--->
 <script lang="ts">
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import BootstrapVue from 'bootstrap-vue';
-  import {
-    openDB, deleteDB, wrap, unwrap,
-  } from 'idb';
   import resize from 'vue-resize-directive';
+  import BootstrapVue from 'bootstrap-vue';
   import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
@@ -124,34 +89,26 @@ FINISHED
   },
 })
   export default class App extends Vue {
-  @Prop()
-  username!: string;
-
-  @Prop()
-  workbranch!: string;
-
-  get animation() {
-    if (this.loaded) {
-      return 'none';
-    }
-    return 'growFull 1s';
-  }
-
-  @Prop()
-  uid!: string;
+  // Minimization
 
   minimization = false;
 
-  fullSize = false;
+  @Watch('minimized')
+  minimizedChanged() {
+    this.fullSize = false;
+  }
 
-  showAuth = false;
+  get minimized() {
+    return this.minimization;
+  }
 
-  windowFocused = true;
+  // Private messages
 
   get showPrivMsgModal() {
     return this.$vxm.chat.privMsgModal;
   }
 
+
   @Watch('showPrivMsgModal')
   triggerStart() {
     if (this.showPrivMsgModal) {
@@ -159,8 +116,26 @@ FINISHED
     }
   }
 
-  get isOper() {
-    return this.$vxm.chat.oper;
+  // Full size
+
+  fullSize = false;
+
+  get fullSized() {
+    return this.fullSize;
+  }
+
+
+  @Watch('fullSize')
+  sizeChanged() {
+    if (this.fullSize && this.minimized) {
+      this.fullSize = false;
+    }
+  }
+
+  // Tabs
+
+  get messageTabs() {
+    return Object.values(this.$vxm.chat.channels).map((channel) => channel!);
   }
 
   // For text in top bar
@@ -181,47 +156,13 @@ FINISHED
     return this.$vxm.chat.tab;
   }
 
-  $refs!: {
-    reportDialog: ReportDialog;
-    login: OperLogin,
-    privmsgmodal: PrivateMessageModal,
-    messagepanes: MessagePane,
-    slideout: Slideout,
-  };
+  // Oper
 
-  get initialPosition() {
-    return this.$vxm.chat.initialPosition;
-  }
-
-  get initialSize() {
-    return this.$vxm.chat.initialSize;
-  }
-
-  get slideoutOpen() {
-    return this.$vxm.chat.slideoutOpen;
-  }
-
-  get messageTabs() {
-    return Object.values(this.$vxm.chat.channels).map((channel) => channel!);
-  }
-
-  get minimized() {
-    return this.minimization;
-  }
-
-  get fullSized() {
-    return this.fullSize;
+  get isOper() {
+    return this.$vxm.chat.oper;
   }
 
-  postMessage(rawMessage: string, channel: string) {
-    if (!channel.startsWith('#')) { // If it's a PRIVMSG
-      this.$vxm.chat.postToQuery(`${channel}|${rawMessage}`);
-    } else { // Otherwise
-      this.$vxm.chat.sendMessage({ rawMessage, channel });
-    }
-    // When user sends a message, make sure it doesn't notify itself
-    this.$vxm.chat.readChannel(channel);
-  }
+  showAuth = false;
 
   async operAuthenticate(
     { username, password, remember }: {username: string, password: string, remember: boolean},
@@ -262,6 +203,102 @@ FINISHED
     }
   }
 
+  /**
+   * Logs the user in as an operator
+   */
+  async logInOper() {
+    const pass = localStorage.operPass;
+    const user = localStorage.operUser;
+    if (user && pass) {
+      this.$vxm.chat.operLoginPassword = pass; // Log in
+      this.$vxm.chat.operLoginUser = user;
+      this.$vxm.chat.operCommand();
+      setTimeout(this.operLoginStatus, 150);
+    }
+  }
+
+  // Drag and resize
+
+  get initialPosition() {
+    return this.$vxm.chat.initialPosition;
+  }
+
+  get initialSize() {
+    return this.$vxm.chat.initialSize;
+  }
+
+  resized() {
+    const w = this.$el.scrollWidth;
+    const h = this.$el.scrollHeight;
+    if (localStorage && (w !== 300 || h !== 500)) {
+      localStorage.size = JSON.stringify(`${w} ${h}`);
+    }
+  }
+
+  // Slideout
+
+  get slideoutOpen() {
+    return this.$vxm.chat.slideoutOpen;
+  }
+
+  @Watch('slideoutOpen')
+  slideoutChanged() {
+    if (this.slideoutOpen) {
+      this.minimization = false;
+    }
+  }
+
+  close(ev: MouseEvent) {
+    if (!this.$refs.slideout || !this.$refs.slideout.$el) return;
+    if (!this.$refs.slideout.$el.contains(ev.target as Node) // If the click is not in the slideout
+    && this.$el.contains(ev.target as Node)) { // And it is in the chat
+      this.$vxm.chat.slideoutOpen = false; // Close the slideout
+    }
+  }
+
+  // Status
+
+  windowFocused = true;
+
+
+  @Watch('windowFocused')
+  focusChanged() {
+    if (this.windowFocused) {
+      this.$vxm.chat.setUnaway();
+    } else {
+      this.$vxm.chat.setAway();
+    }
+  }
+
+  // Other
+
+  @Prop()
+  username!: string;
+
+  @Prop()
+  workbranch!: string;
+
+  @Prop()
+  uid!: string;
+
+  $refs!: {
+    reportDialog: ReportDialog;
+    login: OperLogin,
+    privmsgmodal: PrivateMessageModal,
+    messagepanes: MessagePane,
+    slideout: Slideout,
+  };
+
+  postMessage(rawMessage: string, channel: string) {
+    if (!channel.startsWith('#')) { // If it's a PRIVMSG
+      this.$vxm.chat.postToQuery(`${channel}|${rawMessage}`);
+    } else { // Otherwise
+      this.$vxm.chat.sendMessage({ rawMessage, channel });
+    }
+    // When user sends a message, make sure it doesn't notify itself
+    this.$vxm.chat.readChannel(channel);
+  }
+
   mounted() {
     this.$vxm.chat.init({
       username: this.username,
@@ -285,26 +322,9 @@ FINISHED
         }, 500);
       }
     }, 100);
-    this.loaded = false;
     this.startTimers();
   }
 
-  loaded = true;
-
-  /**
-   * Logs the user in as an operator
-   */
-  async logInOper() {
-    const pass = localStorage.operPass;
-    const user = localStorage.operUser;
-    if (user && pass) {
-      this.$vxm.chat.operLoginPassword = pass; // Log in
-      this.$vxm.chat.operLoginUser = user;
-      this.$vxm.chat.operCommand();
-      setTimeout(this.operLoginStatus, 150);
-    }
-  }
-
   key(e:KeyboardEvent) {
     if (e.code === 'Tab') { /* Watches for tabs. If a tab is detected, outline on input will remain on focus */
       this.$vxm.chat.tabbing = true;
@@ -338,14 +358,7 @@ FINISHED
     });
   }
 
-  @Watch('windowFocused')
-  focusChanged() {
-    if (this.windowFocused) {
-      this.$vxm.chat.setUnaway();
-    } else {
-      this.$vxm.chat.setAway();
-    }
-  }
+  // Inactivity timer
 
   timeout = 60000;
 
@@ -373,47 +386,11 @@ FINISHED
     this.beginInactiveTimer();
   }
 
+  // Hooks
+
   postScreenshot(url:string, puzzleName:string) {
     this.postMessage(`${puzzleName} ${url}`, '#help');
   }
-
-  @Watch('minimized')
-  minimizedChanged() {
-    this.fullSize = false;
-  }
-
-  @Watch('fullSize')
-  sizeChanged() {
-    if (this.fullSize && this.minimized) {
-      this.fullSize = false;
-    }
-  }
-
-  @Watch('slideoutOpen')
-  slideoutChanged() {
-    if (this.slideoutOpen) {
-      this.minimization = false;
-    }
-  }
-
-  beforeDestroy() {
-    window.removeEventListener('click', this.close);
-  }
-
-  close(ev: MouseEvent) {
-    if (!this.$refs.slideout.$el.contains(ev.target as Node) // If the click is not in the slideout
-    && this.$el.contains(ev.target as Node)) { // And it is in the chat
-      this.$vxm.chat.slideoutOpen = false; // Close the slideout
-    }
-  }
-
-  resized() {
-    const w = this.$el.scrollWidth;
-    const h = this.$el.scrollHeight;
-    if (localStorage && (w !== 300 || h !== 500)) {
-      localStorage.size = JSON.stringify(`${w} ${h}`);
-    }
-  }
   }
 </script>
 
@@ -422,6 +399,7 @@ FINISHED
 @import "./assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
+/*** Chat container ***/
 #eterna-chat {
   font-family: "Open Sans", "Open Sans", Arial, Gulim;
   font-size: 14px;
@@ -433,25 +411,38 @@ FINISHED
   max-width: 400px;
   max-height: 600px;
 }
-
 .eternaChatNormal {
   width: $container-width; // Fill in with normal size
   height: $container-height;
 }
-
+.eternaChatFull { /* Full size chat */
+  width: 90vw !important; /* Takes up 90% of the viewport*/
+  height: 90vh !important;
+  max-width: 90vw !important; /* Overrides resize limits */
+  max-height: 90vh !important;
+  margin-right: 5vw; /* Margins take up the rest*/
+  margin-left: 5vw;
+  margin-top: 5vh;
+  margin-bottom: 5vh;
+  box-shadow: 0 0 2vw 20vw $dark-blue-transparent; /* Creates blur effect */
+  transition: all 1s;
+  left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
+  top:0px !important;
+}
+.minimizedChat { /* Removes light blue background when chat is minimzed and only shows top bar */
+  height:40px !important;
+}
 .fade-enter-active,
 .fade-leave-active {
   transform-origin: top center;
   transition: 200ms;
 }
-
 .fade-enter,
 .fade-leave-to {
   transform-origin: top center;
   transform: scaleY(0);
   //Moves everything up without interfering with top bar.
 }
-
 .chat-content {
   border: solid #0405224b 2px;
   border-radius: 15px;
@@ -464,6 +455,8 @@ FINISHED
   background-color: $dark-blue;
   transform-origin: top center;
 }
+
+/*** Header ***/
 .minimizationTriangle {
   // Minimization button
   position: absolute;
@@ -492,23 +485,8 @@ FINISHED
   z-index: 0; // Covered by slideout
   height: 30px;
 }
-.eternaChatFull { /* Full size chat */
-  width: 90vw !important; /* Takes up 90% of the viewport*/
-  height: 90vh !important;
-  max-width: 90vw !important; /* Overrides resize limits */
-  max-height: 90vh !important;
-  margin-right: 5vw; /* Margins take up the rest*/
-  margin-left: 5vw;
-  margin-top: 5vh;
-  margin-bottom: 5vh;
-  box-shadow: 0 0 2vw 20vw $dark-blue-transparent; /* Creates blur effect */
-  transition: all 1s;
-  left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
-  top:0px !important;
-}
-.minimizedChat { /* Removes light blue background when chat is minimzed and only shows top bar */
-  height:40px !important;
-}
+
+/*** Footer ***/
 ::-webkit-resizer { /* Hide the resizer if possible */
   display:none;
 }
diff --git a/src/app/components/Connection/ConnectButton.vue b/src/app/components/Connection/ConnectButton.vue
index 6a1fb813..407f382e 100644
--- a/src/app/components/Connection/ConnectButton.vue
+++ b/src/app/components/Connection/ConnectButton.vue
@@ -2,9 +2,9 @@
   <div
     id="reconnect"
     :class="{active: $vxm.chat.connectionData.tryingToConnect}"
-    class="connect-button"
+    class="connect-button btn"
     style="color:white; font-weight:bolder; font-size:13px;"
-    @click="$vxm.chat.connect;"
+    @click="$vxm.chat.connect"
   >
     Reconnect
   </div>
@@ -18,51 +18,12 @@
 </script>
 
 <style scoped lang="scss">
+
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
 .connect-button {
   width: 100%;
-}
-
-div {
-  background-color: #4fb748;
-  font-weight: normal;
-  position: relative;
-  text-align: center;
-  font-size: 12px;
-  padding: 0px;
-  text-transform: capitalize;
-  font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  text-decoration: none;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  box-shadow: 5px 5px #2c6628;
-  -webkit-transform: translate(-5px, -5px);
-  -moz-transform: translate(-5px, -5px);
-  transform: translate(-5px, -5px);
-  height: 21px; //19px + 2px border
-}
-div:hover {
-  background-color: #48a641;
-  box-shadow: 4px 4px #2c6628;
-  -webkit-transform: translate(-4px, -4px);
-  -moz-transform: translate(-4px, -4px);
-  transform: translate(-4px, -4px);
-}
-
-div:active,
-div.active {
-  background-color: #48a641;
-  box-shadow: 2px 2px #2c6628;
-  -webkit-transform: translate(-2px, -2px);
-  -moz-transform: translate(-2px, -2px);
-  transform: translate(-2px, -2px);
+  background-color:$green;
 }
 </style>
diff --git a/src/app/components/Connection/ConnectingMessage.vue b/src/app/components/Connection/ConnectingMessage.vue
index c3c72e6c..fdf08ac7 100644
--- a/src/app/components/Connection/ConnectingMessage.vue
+++ b/src/app/components/Connection/ConnectingMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <li
-    v-if="!connectionData.connected && !connectionData.firstConnection"
+    v-if="!connectionData.connected && !connectionData.firstConnection && !disconnected"
     id="chat-loading"
     style="list-style-type: none"
   >
@@ -30,6 +30,10 @@
     get connectionData() {
       return this.$vxm.chat.connectionData;
     }
+
+    get disconnected() {
+      return this.$vxm.chat.disconnected;
+    }
   }
 </script>
 
diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 61700334..8159873f 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -72,6 +72,8 @@
     },
   })
   export default class EmoticonBar extends Vue {
+    // Emoticons
+
     get emotesList() { // List of all emotes from defaults and custom
       const defaultEmotes = ['👍', '👎', '🙂', '🙁'];
       return defaultEmotes.concat(this.customEmoticons);
@@ -81,8 +83,12 @@
       return this.$vxm.chat.customEmoticons;
     }
 
+    // Markdown button
+
     markdownCodes = ['bold', 'italics', 'italicsbold', 'strikethrough', 'code', 'link', 'action'];
 
+    // Submenu selection
+
     emoticonsSelected = false;
 
     markdownSelected = false;
@@ -99,6 +105,8 @@
       this.$emit('update');
     }
 
+    // Click handling
+
     menuButtonClicked(button:string) { // Handles button clicks
       switch (button) {
       case 'X':
@@ -113,6 +121,8 @@
       this.$emit('update');
     }
 
+    // Changing input
+
     add(emote:string) { // Emits event to MessagePane
       this.$emit('emote', emote);
     }
@@ -121,6 +131,8 @@
       this.$emit('md', options);
     }
 
+    // Chat features
+
     get emoticonChatFeatures() { // Gets values from settings vuex
       return this.$vxm.settings.emoticonChatFeatures;
     }
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 1523781d..25ad5289 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -51,6 +51,11 @@
         Private Message User
       </a>
     </li>
+    <li>
+      <a @click="copyMessage">
+        Copy message
+      </a>
+    </li>
   </VueContext>
 </template>
 
@@ -59,9 +64,11 @@
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
   import { VueContext } from 'vue-context';
+  import Clipboard from '@cloudcmd/clipboard';
   import Message from '@/types/message';
   import User from '@/types/user';
 
+  declare function writeText(text:string): void;
 
   @Component({
     components: {
@@ -150,6 +157,11 @@
       this.userQuieted();
     }
 
+    copyMessage() {
+      const copyString = `<${this.message.user.username}>${this.message.message}`;
+      Clipboard.writeText(copyString);
+    }
+
     quieted = false;
 
     banned = false;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index c82dba9e..080f68dc 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -14,6 +14,7 @@
         @emote="add"
         @md="format"
         @update="$nextTick($refs.pane.updateFooterHeight)"
+        v-show="input"
       >
       <template slot="input">
         <ScalableInput
diff --git a/src/app/components/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
similarity index 96%
rename from src/app/components/ChatSelectButton.vue
rename to src/app/components/Slideout/Chat/ChatSelectButton.vue
index 14ca220b..e7da246b 100644
--- a/src/app/components/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -14,7 +14,7 @@
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
   import chat from '@/store/chat.vuex';
-  import SlideoutChats from './Slideout/SlideoutChats.vue';
+  import SlideoutChats from './SlideoutChats.vue';
 
 
   @Component
diff --git a/src/app/components/SlideoutButtonChat.vue b/src/app/components/Slideout/Chat/SlideoutButtonChat.vue
similarity index 81%
rename from src/app/components/SlideoutButtonChat.vue
rename to src/app/components/Slideout/Chat/SlideoutButtonChat.vue
index 7cf14944..f772781d 100644
--- a/src/app/components/SlideoutButtonChat.vue
+++ b/src/app/components/Slideout/Chat/SlideoutButtonChat.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
-  import SlideoutButton from './Slideout/SlideoutButton.vue';
+  import SlideoutButton from '../SlideoutButton.vue';
 
 
   @Component
@@ -31,13 +31,13 @@
     padding: 0.4em 1.25em;
     background-color: black;
     height:40px;
-    background-image: url("../assets/chat-icon-white.png");
+    background-image: url("../../../assets/chat-icon-white.png");
     background-repeat: no-repeat;
     background-size: 40% 60%;
     background-position: center;
     width: 40px;
   }
   button.active { /* When button is selected, use green icon */
-    background-image: url("../assets/chat-icon-green.png");
+    background-image: url("../../../assets/chat-icon-green.png");
   }
 </style>
diff --git a/src/app/components/Slideout/SlideoutChats.vue b/src/app/components/Slideout/Chat/SlideoutChats.vue
similarity index 95%
rename from src/app/components/Slideout/SlideoutChats.vue
rename to src/app/components/Slideout/Chat/SlideoutChats.vue
index b4111770..5e7464f2 100644
--- a/src/app/components/Slideout/SlideoutChats.vue
+++ b/src/app/components/Slideout/Chat/SlideoutChats.vue
@@ -18,9 +18,9 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
-  import ChatSelectButton from '@/components/ChatSelectButton.vue';
-  import Slideout from './Slideout.vue';
+  import MinimizationTriangle from '../../MinimizationTriangle.vue';
+  import ChatSelectButton from './ChatSelectButton.vue';
+  import Slideout from '../Slideout.vue';
   import Splitter from './Splitter.vue';
 
   @Component({
diff --git a/src/app/components/Slideout/Splitter.vue b/src/app/components/Slideout/Chat/Splitter.vue
similarity index 100%
rename from src/app/components/Slideout/Splitter.vue
rename to src/app/components/Slideout/Chat/Splitter.vue
diff --git a/src/app/components/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
similarity index 80%
rename from src/app/components/HamburgerMenuButton.vue
rename to src/app/components/Slideout/HamburgerMenuButton.vue
index 9c739f68..67cec11f 100644
--- a/src/app/components/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -27,17 +27,17 @@
   display:inline-block;
   width:40px;
   height:40px;
-  background-image: url("../assets/hamburger.png");
+  background-image: url("../../assets/hamburger.png");
   background-repeat: no-repeat;
   background-size: 50% 45%;
   background-position: bottom 10px left 11px;
 }
 .notified { /* Notified hamburger icon */
-  background-image: url("../assets/hamburger-notification.png");
+  background-image: url("../../assets/hamburger-notification.png");
   background-size: 62.5% 55%;
   background-position:bottom 10px left 11px;
 }
 .mentioned { /* Mentioned hamburger icon */
-  background-image: url("../assets/hamburger-mention.png") !important;
+  background-image: url("../../assets/hamburger-mention.png") !important;
 }
 </style>
diff --git a/src/app/components/SlideoutButtonSettings.vue b/src/app/components/Slideout/Settings/SlideoutButtonSettings.vue
similarity index 80%
rename from src/app/components/SlideoutButtonSettings.vue
rename to src/app/components/Slideout/Settings/SlideoutButtonSettings.vue
index d6c2aaff..11ffb2b6 100644
--- a/src/app/components/SlideoutButtonSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutButtonSettings.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
-  import SlideoutButton from './Slideout/SlideoutButton.vue';
+  import SlideoutButton from '../SlideoutButton.vue';
 
 
   @Component
@@ -30,13 +30,13 @@
     padding: 0.4em 1.25em;
     background-color: black;
     height:40px;
-    background-image: url("../assets/settings-icon-white.png");
+    background-image: url("../../../assets/settings-icon-white.png");
     background-repeat: no-repeat;
     background-size: 40% 40%;
     background-position: center;
     width: 40px;
   }
   button.active { /* When button is selected, use green icon */
-    background-image: url("../assets/settings-icon-green.png");
+    background-image: url("../../../assets/settings-icon-green.png");
   }
 </style>
diff --git a/src/app/components/Slideout/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
similarity index 97%
rename from src/app/components/Slideout/SlideoutSettings.vue
rename to src/app/components/Slideout/Settings/SlideoutSettings.vue
index 6f85a791..b3c29f6b 100644
--- a/src/app/components/Slideout/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -246,11 +246,11 @@
   import BootstrapVue from 'bootstrap-vue';
   import Username from '@/components/Messages/Username.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
-  import SlideoutButton from './SlideoutButton.vue';
-  import Slideout from './Slideout.vue';
-  import { Channel } from '../../store/chat.vuex';
-  import ColorPicker from './ColorPicker/ColorPicker.vue';
-  import MinimizationTriangle from '../MinimizationTriangle.vue';
+  import SlideoutButton from '../SlideoutButton.vue';
+  import Slideout from '../Slideout.vue';
+  import { Channel } from '@/store/chat.vuex';
+  import ColorPicker from '../ColorPicker/ColorPicker.vue';
+  import MinimizationTriangle from '../../MinimizationTriangle.vue';
 
   Vue.use(BootstrapVue);
 
@@ -263,6 +263,8 @@
     },
   })
   export default class SlideoutSettings extends Vue {
+    // Menus
+
     openMenus = {
       notifications: true,
       color: true,
@@ -281,149 +283,55 @@
       }
     }
 
-    size:string = '14'; // font size
-
-    indicator:string = '(!)';
+    // Font size
 
-    allChatFeatures = true;
-
-    emoticonChatFeatures = true;
-
-    markdownChatFeatures = true;
-
-    keywords = '';
-
-    emoticonErrorMessage = '';
-
-    changeStatus(to:boolean) {
-      this.$vxm.chat.autoUpdateStatus = !to;
-      if (!to) {
-        this.$vxm.chat.setUnaway();
-      } else {
-        this.$vxm.chat.setAway();
-      }
-    }
+    size:string = '14'; // font size
 
-    get userStatus() {
-      return this.$vxm.chat.userStatus;
-    }
 
-    @Watch('keywords')
-    keywordsChanged() {
-      const keywordsArray = this.keywords.split(/, ?/);
-      if (keywordsArray[0] === '') {
-        return;
-      }
-      if (localStorage) {
-        localStorage.notificationsKeywords = JSON.stringify(keywordsArray);
+    // Updates global font size when input changes
+    @Watch('size')
+    updateFontSize() {
+       // Only update if valid font size
+      if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 18) {
+        this.$vxm.settings.fontSize = parseInt(this.size, 10);
+        localStorage.fontSize = JSON.stringify(this.size);
       }
     }
 
-    update(e:Event) {
-      const targ = e.target as HTMLInputElement;
-      const id = Number(targ.id);
-      let { value } = targ;
-      value = value.trim();
-      while ([...value].length > 1) {
-        value = value.substring(0, value.length - 1);
+    get fontSize() {
+      const numSize = parseInt(this.size, 10); // Font size as an int
+      if (numSize >= 10 && numSize <= 18) {
+        return numSize;
       }
-      const emoticonRegex = /[^\w\d\p{P}\p{S}]/;
-      if (value.match(emoticonRegex)) {
-        if (this.customEmoticons.some(j => j === value)) {
-          this.emoticonErrorMessage = 'You are using that emoticon in another slot';
-          return;
-        }
-        Vue.set(this.$vxm.chat.customEmoticons, id, value);
-        if (localStorage) {
-          localStorage.customEmoticons = JSON.stringify(this.$vxm.chat.customEmoticons);
-        }
-        this.emoticonErrorMessage = '';
-      } else {
-        this.emoticonErrorMessage = `${value} is not a valid emoticon`;
+      if (numSize >= 18) {
+        return 18; // If font size greater than 18, set to maximum of 18
       }
-      if (value.trim() === '') {
-        this.emoticonErrorMessage = '';
+      if (numSize <= 10) {
+        return 10; // If font size less than 10, set to minimum of 10
       }
-      targ.value = '';
+      return 14; // If nothing else works, make it the default, 14
     }
 
-    validateNick(nick:string) {
-      // eslint-disable-next-line no-useless-escape
-      return nick.match(/^[a-z_\-\[\]\\^{}|`][a-z0-9_\-\[\]\\^{}|`]*$/i);
-    }
+    // Indicator
 
-    setNick(e:Event) {
-      const { value } = e.target as HTMLInputElement;
-      if (!this.validateNick(value)) return;
-      this.$vxm.chat.changeNick(value);
-    }
+    indicator:string = '(!)';
 
-    get isOper() {
-      return this.$vxm.chat.oper;
-    }
 
-    get customEmoticons() {
-      return this.$vxm.chat.customEmoticons;
+    @Watch('indicator')
+    indicatorChanged() {
+      if (localStorage) {
+        localStorage.indicator = JSON.stringify(this.indicator);
+      }
+      this.$vxm.settings.indicator = this.indicator;
     }
 
-    // Gets a list of ignored users
-    get ignoredUsers() {
-      return this.$vxm.chat.ignoredUsers;
-    }
+    // Toolbar
 
-    // If any users are ignored. Uses ignoredUsers.length
-    get anyIgnoredUsers() {
-      return this.ignoredUsers.length > 0;
-    }
-
-    // Whether it is visible. Determined by whether slideout is opened
-    get visible() {
-      return (this.$parent as Slideout).checked;
-    }
+    allChatFeatures = true;
 
-    opernick = '';
+    emoticonChatFeatures = true;
 
-    // When tab opened, display stored value if there is one
-    created() {
-      if (localStorage.fontSize) {
-        this.size = String(Number(JSON.parse(localStorage.fontSize)));
-      } else {
-        this.size = this.$vxm.settings.fontSize.toString();
-      }
-      if (localStorage.indicator) {
-        this.indicator = JSON.parse(localStorage.indicator);
-      } else {
-        this.indicator = this.$vxm.settings.indicator;
-      }
-      if (localStorage.allChatFeatures) {
-        this.allChatFeatures = JSON.parse(localStorage.allChatFeatures);
-      } else {
-        this.allChatFeatures = this.$vxm.settings.allChatFeatures;
-      }
-      if (localStorage.emoticonChatFeatures) {
-        this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
-      } else {
-        this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
-      }
-      if (localStorage.markdownChatFeatures) {
-        this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
-      } else {
-        this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
-      }
-      if (localStorage.notificationsKeywords) {
-        this.keywords = JSON.parse(localStorage.notificationsKeywords).join(', ');
-      } else {
-        this.keywords = this.$vxm.chat.notificationsKeywords.join(', ');
-      }
-      if (localStorage.nick) {
-        this.opernick = localStorage.nick;
-      } else {
-        this.opernick = this.$vxm.chat.customNick;
-      }
-      if (localStorage.openMenus) {
-        this.openMenus = JSON.parse(localStorage.openMenus);
-      }
-    }
+    markdownChatFeatures = true;
 
     toggleEmoticons() {
       this.emoticonChatFeatures = !this.emoticonChatFeatures;
@@ -481,38 +389,55 @@
       }
     }
 
-    // Updates global font size when input changes
-    @Watch('size')
-    updateFontSize() {
-       // Only update if valid font size
-      if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 18) {
-        this.$vxm.settings.fontSize = parseInt(this.size, 10);
-        localStorage.fontSize = JSON.stringify(this.size);
-      }
-    }
+    // Custom emoticons
 
-    get fontSize() {
-      const numSize = parseInt(this.size, 10); // Font size as an int
-      if (numSize >= 10 && numSize <= 18) {
-        return numSize;
+    update(e:Event) {
+      const targ = e.target as HTMLInputElement;
+      const id = Number(targ.id);
+      let { value } = targ;
+      value = value.trim();
+      while ([...value].length > 1) {
+        value = value.substring(0, value.length - 1);
       }
-      if (numSize >= 18) {
-        return 18; // If font size greater than 18, set to maximum of 18
+      const emoticonRegex = /[^\w\d\p{P}\p{S}]/;
+      if (value.match(emoticonRegex)) {
+        if (this.customEmoticons.some(j => j === value)) {
+          this.emoticonErrorMessage = 'You are using that emoticon in another slot';
+          return;
+        }
+        Vue.set(this.$vxm.chat.customEmoticons, id, value);
+        if (localStorage) {
+          localStorage.customEmoticons = JSON.stringify(this.$vxm.chat.customEmoticons);
+        }
+        this.emoticonErrorMessage = '';
+      } else {
+        this.emoticonErrorMessage = `${value} is not a valid emoticon`;
       }
-      if (numSize <= 10) {
-        return 10; // If font size less than 10, set to minimum of 10
+      if (value.trim() === '') {
+        this.emoticonErrorMessage = '';
       }
-      return 14; // If nothing else works, make it the default, 14
+      targ.value = '';
     }
 
-    // Unignore user on list
-    unignore(user:string) {
-      this.$vxm.chat.unignoreUser(user);
+    emoticonErrorMessage = '';
+
+    get customEmoticons() {
+      return this.$vxm.chat.customEmoticons;
     }
 
-    // Return list of channels
-    get channels() {
-      return this.$vxm.chat.channels;
+    // Notifications
+
+    keywords = '';
+
+    @Watch('keywords')
+    keywordsChanged() {
+      const keywordsArray = this.keywords.split(/, ?/);
+      if (keywordsArray[0] === '') {
+        return;
+      }
+      if (localStorage) {
+        localStorage.notificationsKeywords = JSON.stringify(keywordsArray);
+      }
     }
 
     // Toggle whether notifications are enabled for a specific channel
@@ -550,7 +475,7 @@
       });
     }
 
-    // Enables notificaitons for all channels
+    // Enables notifications for all channels
     enableAll() {
       // For each channel
       Object.values(this.channels).forEach(item => {
@@ -572,12 +497,109 @@
       });
     }
 
-    @Watch('indicator')
-    indicatorChanged() {
-      if (localStorage) {
-        localStorage.indicator = JSON.stringify(this.indicator);
+    // Status
+
+    changeStatus(to:boolean) {
+      this.$vxm.chat.autoUpdateStatus = !to;
+      if (!to) {
+        this.$vxm.chat.setUnaway();
+      } else {
+        this.$vxm.chat.setAway();
       }
-      this.$vxm.settings.indicator = this.indicator;
+    }
+
+    get userStatus() {
+      return this.$vxm.chat.userStatus;
+    }
+
+    // Nick change
+
+    validateNick(nick:string) {
+      // eslint-disable-next-line no-useless-escape
+      return nick.match(/^[a-z_\-\[\]\\^{}|`][a-z0-9_\-\[\]\\^{}|`]*$/i);
+    }
+
+    setNick(e:Event) {
+      const { value } = e.target as HTMLInputElement;
+      if (!this.validateNick(value)) return;
+      this.$vxm.chat.changeNick(value);
+    }
+
+    opernick = '';
+
+    // Ignored
+
+    // Gets a list of ignored users
+    get ignoredUsers() {
+      return this.$vxm.chat.ignoredUsers;
+    }
+
+    // If any users are ignored. Uses ignoredUsers.length
+    get anyIgnoredUsers() {
+      return this.ignoredUsers.length > 0;
+    }
+
+    // Unignore user on list
+    unignore(user:string) {
+      this.$vxm.chat.unignoreUser(user);
+    }
+
+    get isOper() {
+      return this.$vxm.chat.oper;
+    }
+
+    // Other
+
+    // Whether it is visible. Determined by whether slideout is opened
+    get visible() {
+      return (this.$parent as Slideout).checked;
+    }
+
+    // When tab opened, display stored value if there is one
+    created() {
+      if (localStorage.fontSize) {
+        this.size = String(Number(JSON.parse(localStorage.fontSize)));
+      } else {
+        this.size = this.$vxm.settings.fontSize.toString();
+      }
+      if (localStorage.indicator) {
+        this.indicator = JSON.parse(localStorage.indicator);
+      } else {
+        this.indicator = this.$vxm.settings.indicator;
+      }
+      if (localStorage.allChatFeatures) {
+        this.allChatFeatures = JSON.parse(localStorage.allChatFeatures);
+      } else {
+        this.allChatFeatures = this.$vxm.settings.allChatFeatures;
+      }
+      if (localStorage.emoticonChatFeatures) {
+        this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
+      } else {
+        this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
+      }
+      if (localStorage.markdownChatFeatures) {
+        this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
+      } else {
+        this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
+      }
+      if (localStorage.notificationsKeywords) {
+        this.keywords = JSON.parse(localStorage.notificationsKeywords).join(', ');
+      } else {
+        this.keywords = this.$vxm.chat.notificationsKeywords.join(', ');
+      }
+      if (localStorage.nick) {
+        this.opernick = localStorage.nick;
+      } else {
+        this.opernick = this.$vxm.chat.customNick;
+      }
+      if (localStorage.openMenus) {
+        this.openMenus = JSON.parse(localStorage.openMenus);
+      }
+    }
+
+    // Return list of channels
+    get channels() {
+      return this.$vxm.chat.channels;
     }
   }
 </script>
@@ -585,29 +607,10 @@
 @import "@/assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
+/*** Buttons ***/
 .settings-button {
   background-color:$green;
 }
-#font-size-p { /* 'Default is 14' text */
-  vertical-align: mid;
-  margin-left:2px;
-}
-#font-warning {
-  color:#f39c12;
-}
-section { /* 'Block' of settings */
-  margin-bottom:5px;
-  position: relative;
-}
-h3 {
-  width:calc(100% - 23px); /* Accounts for padding on both sides */
-  text-align:justify;
-}
-input {
-  margin:2px;
-  width:calc(100% - 23px); /* Accounts for padding on both sides */
-  max-width:150px; /* Big screens don't have arbitrarily large input */
-}
 button { /* Unignore user button */
   padding:2px;
   padding-bottom:3px;
@@ -615,15 +618,12 @@ button { /* Unignore user button */
   color:white;
   border:none;
 }
-#settings-wrapper { /* Wrapper div */
-  padding:5px;
-  padding-left:20px;
-  height:calc(100% - 50px);
-  overflow-y:auto;
-}
-li { /* Remove bullets */
-  list-style-type: none;
+.feature-button {
+  float:left;
+  width:95%;
 }
+
+/*** Tables ***/
 td { /* Table cell in notifications settings section */
   padding:4px;
   width:max-content;
@@ -638,18 +638,40 @@ table {
 .feature-button-container {
   padding:2px;
 }
-.feature-button {
-  float:left;
-  width:95%;
+
+/*** Text ***/
+#font-size-p { /* 'Default is 14' text */
+  vertical-align: mid;
+  margin-left:2px;
 }
-.left-side {
-  padding-left:0;
+#font-warning {
+  color:#f39c12;
+}
+h3 {
+  width:calc(100% - 23px); /* Accounts for padding on both sides */
+  text-align:justify;
 }
 .heading {
   display:inline-block;
   margin:4px;
   margin-left:0;
 }
+.warning {
+  color:$warning;
+}
+
+/*** Other ***/
+input {
+  margin:2px;
+  width:calc(100% - 23px); /* Accounts for padding on both sides */
+  max-width:150px; /* Big screens don't have arbitrarily large input */
+}
+li { /* Remove bullets */
+  list-style-type: none;
+}
+.left-side {
+  padding-left:0;
+}
 .minimization-triangle {
   height:30px;
   width:30px;
@@ -657,6 +679,18 @@ table {
   right:10px;
   top:0px;
 }
+
+/*** Container ***/
+section { /* 'Block' of settings */
+  margin-bottom:5px;
+  position: relative;
+}
+#settings-wrapper { /* Wrapper div */
+  padding:5px;
+  padding-left:20px;
+  height:calc(100% - 50px);
+  overflow-y:auto;
+}
 .settings-slide-enter-active {
   transition: max-height 0.2s cubic-bezier(1,0,1,0);
   max-height:1000px;
@@ -671,7 +705,4 @@ table {
 .settings-content-container {
   overflow:hidden;
 }
-.warning {
-  color:$warning;
-}
 </style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 4c702b3c..6bc8d741 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -40,14 +40,14 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import SlideoutChats from './SlideoutChats.vue';
-  import SlideoutUser from './SlideoutUser.vue';
-  import SlideoutSettings from './SlideoutSettings.vue';
+  import SlideoutChats from './Chat/SlideoutChats.vue';
+  import SlideoutUser from './Users/SlideoutUser.vue';
+  import SlideoutSettings from './Settings/SlideoutSettings.vue';
   import SlideoutButton from './SlideoutButton.vue';
-  import SlideoutButtonUsers from '../SlideoutButtonUsers.vue';
-  import SlideoutButtonChat from '../SlideoutButtonChat.vue';
-  import SlideoutButtonSettings from '../SlideoutButtonSettings.vue';
-  import HamburgerMenuButton from '@/components/HamburgerMenuButton.vue';
+  import SlideoutButtonUsers from './Users/SlideoutButtonUsers.vue';
+  import SlideoutButtonChat from './Chat/SlideoutButtonChat.vue';
+  import SlideoutButtonSettings from './Settings/SlideoutButtonSettings.vue';
+  import HamburgerMenuButton from './HamburgerMenuButton.vue';
   import { Channel } from '../../store/chat.vuex';
 
   @Component({
diff --git a/src/app/components/SlideoutButtonUsers.vue b/src/app/components/Slideout/Users/SlideoutButtonUsers.vue
similarity index 81%
rename from src/app/components/SlideoutButtonUsers.vue
rename to src/app/components/Slideout/Users/SlideoutButtonUsers.vue
index c302ba9b..bc52e995 100644
--- a/src/app/components/SlideoutButtonUsers.vue
+++ b/src/app/components/Slideout/Users/SlideoutButtonUsers.vue
@@ -9,7 +9,7 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
-  import SlideoutButton from './Slideout/SlideoutButton.vue';
+  import SlideoutButton from '../SlideoutButton.vue';
 
 
   @Component
@@ -30,13 +30,13 @@
     padding: 0.4em 1.25em;
     background-color: black;
     height:40px;
-    background-image: url("../assets/user-icon-white.png");
+    background-image: url("../../../assets/user-icon-white.png");
     background-repeat: no-repeat;
     background-size: 60% 40%;
     background-position: center;
     width: 40px;
   }
   button.active { /* When button is selected, use green icon */
-    background-image: url("../assets/user-icon-green.png");
+    background-image: url("../../../assets/user-icon-green.png");
   }
 </style>
diff --git a/src/app/components/Slideout/SlideoutUser.vue b/src/app/components/Slideout/Users/SlideoutUser.vue
similarity index 87%
rename from src/app/components/Slideout/SlideoutUser.vue
rename to src/app/components/Slideout/Users/SlideoutUser.vue
index 2292b4ff..f00e94c0 100644
--- a/src/app/components/Slideout/SlideoutUser.vue
+++ b/src/app/components/Slideout/Users/SlideoutUser.vue
@@ -13,10 +13,10 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import Slideout from './Slideout.vue';
-  import Username from '../Messages/Username.vue';
-  import ActionMenu from '../Messages/ActionMenu.vue';
-  import Message from '../../types/message';
+  import Slideout from '../Slideout.vue';
+  import Username from '../../Messages/Username.vue';
+  import ActionMenu from '../../Messages/ActionMenu.vue';
+  import Message from '@/types/message';
   import User from '@/types/user';
   import SlideoutUsername from './SlideoutUsername.vue';
 
diff --git a/src/app/components/Slideout/SlideoutUsername.vue b/src/app/components/Slideout/Users/SlideoutUsername.vue
similarity index 90%
rename from src/app/components/Slideout/SlideoutUsername.vue
rename to src/app/components/Slideout/Users/SlideoutUsername.vue
index bfd65c7c..10475b74 100644
--- a/src/app/components/Slideout/SlideoutUsername.vue
+++ b/src/app/components/Slideout/Users/SlideoutUsername.vue
@@ -24,10 +24,10 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import ActionMenu from '../Messages/ActionMenu.vue';
-  import Message from '../../types/message';
+  import ActionMenu from '../../Messages/ActionMenu.vue';
+  import Message from '@/types/message';
   import User from '@/types/user';
-  import Username from '../Messages/Username.vue';
+  import Username from '../../Messages/Username.vue';
 
   @Component({
     components: {
diff --git a/src/app/shims-vue.d.ts b/src/app/shims-vue.d.ts
index 54244845..24666fb8 100644
--- a/src/app/shims-vue.d.ts
+++ b/src/app/shims-vue.d.ts
@@ -3,3 +3,10 @@ declare module '*.vue' {
 
   export default Vue;
 }
+
+// TS wasn't recognizing my attempts to declare these in their own files
+declare module 'vue-resize-directive';
+declare module '@cloudcmd/clipboard';
+declare class clipboard {
+  writeText(value:string): void;
+}
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index f53c3db7..a6df03c1 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -127,6 +127,8 @@ export default class ChatModule extends VuexModule {
 
   autoUpdateStatus = true;
 
+  disconnected = false;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -495,7 +497,11 @@ export default class ChatModule extends VuexModule {
 
   @action()
   async connect() {
+    this.disconnected = false;
     this.client!.connect();
+    (Object.values(this.channels) as Channel[]).forEach(e => { // Removes disconnecting message
+      e.postedMessages = e.postedMessages.filter(m => m.message !== 'Disconnecting...');
+    });
     this.connectionData.currentTimer = 0;
     clearInterval(this.connectionData.timerInterval);
   }
@@ -572,6 +578,11 @@ export default class ChatModule extends VuexModule {
                 postMessage('Usage: `/me <message>`');
                 postMessage('Example: `/me laughs`');
                 break;
+              case 'disconnect':
+                postMessage('`/disconnect`: Disconnects you from the chat');
+                postMessage('Usage: `/disconnect`');
+                postMessage('Example: `/disconnect`');
+                break;
               case 'ignore':
                 postMessage(
                   "`/ignore`: Don't show messages from a particular user. Show currently ignored users with `/ignore-list`. Unignore user with `/unignore.`",
@@ -731,8 +742,13 @@ export default class ChatModule extends VuexModule {
             }
             break;
           case 'disconnect':
+            this.onDisconnect(true);
             postMessage('Disconnecting...');
-            this.onDisconnect();
+            setTimeout(() => { // Ensures it doesn't reconnect
+              if (this.connectionData.connected) {
+                this.onDisconnect(true);
+              }
+            }, 1000);
             break;
           case 'spam':
             for (let i = 0; i < 100; i++) {
@@ -1408,20 +1424,26 @@ export default class ChatModule extends VuexModule {
   }
 
   @action()
-  async onDisconnect() {
+  async onDisconnect(stayDisconnected:boolean = false) {
     const data = this.connectionData;
     if (data.currentTimer > 0) return;
     // TODO: What if connect is called and then immidiately a late "onDisconnect" arives?
     data.connected = false;
     data.firstConnection = false;
-    if (data.failedAttempts === 0) {
-      data.failedAttempts += 1;
-      this.connect();
-    } else {
-      data.currentTimer = data.disconnectionTimers[Math.min(data.failedAttempts - 1, 3)];
-      data.failedAttempts += 1;
-      clearInterval(data.timerInterval);
-      data.timerInterval = setInterval(this.updateTimer, 1000);
+    if (!stayDisconnected) { // If the disconnect wasn't intentional
+      if (data.failedAttempts === 0) {
+        data.failedAttempts += 1;
+        this.connect();
+      } else {
+        data.currentTimer = data.disconnectionTimers[Math.min(data.failedAttempts - 1, 3)];
+        data.failedAttempts += 1;
+        clearInterval(data.timerInterval);
+        data.timerInterval = setInterval(this.updateTimer, 1000);
+      }
+    } else { // If it was, disconnect and stay disconnected
+      this.client?.quit();
+      data.timerInterval = 100000000; // Doesn't try to reconnect again
+      this.disconnected = true;
     }
   }
 
diff --git a/todo.md b/todo.md
new file mode 100644
index 00000000..1369039f
--- /dev/null
+++ b/todo.md
@@ -0,0 +1,51 @@
+# List of features
+
+## Todo
+----
+
+### Cleanup
+  - Comment code
+  - Remove unused imports
+
+### Bug fixes
+  - Ensure features and styles are consistent across browsers
+
+## Finished
+---
+
+### Notifications
+  - Keywords
+
+### Settings
+  - Values need to be stored correctly
+  - Add option to change nick for opers
+  - Make sure emoticons can be changed there
+
+### Cleanup
+  - Group functions and properties  
+  - Markdown
+  - Move code in chat commands to functions
+  - Move unnecessary stuff out of chat.vuex
+  - Add typings for untyped modules
+  - Move files in components to folders
+
+### Away status
+  - Automatically set it after a certain amount of time with no interaction
+  - Allow it to be manually set
+  - Don't fetch on demand - rather, update every 5 seconds (or so) and fetch values
+
+### Bug fixes
+  - Operator name change seems to break sometimes
+  - Optimize away/online status loading
+  - Find a way to limit unnecessary GET requests (tooltips)
+
+### Miscellaneous
+  - Clicking a channel name in a chat message opens the channel
+
+### Reconnect button
+  - Style to align with theme
+  - Hide input when visible
+
+### Action menu
+  - Add a 'copy message' button that copies the message in `<user>message` format
+

From 8eb77714e8ee6fd9cb3cf8b11844d336767b5132 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 18 Jun 2020 16:47:16 -0500
Subject: [PATCH 118/223] Redid slideout header buttons

---
 src/app/App.vue                               |  6 +-
 .../Messages/PrivateMessageModal.vue          |  1 -
 .../Slideout/Chat/SlideoutButtonChat.vue      | 43 ---------------
 src/app/components/Slideout/Chat/Splitter.vue |  2 +-
 .../ColorPicker/ColorPicker.vue               |  0
 .../ColorPicker/ColorSlider.vue               |  0
 .../Settings/SlideoutButtonSettings.vue       | 42 --------------
 .../Slideout/Settings/SlideoutSettings.vue    |  2 +-
 src/app/components/Slideout/Slideout.vue      | 55 +++++++++++--------
 .../components/Slideout/SlideoutButton.vue    | 20 ++++---
 .../Slideout/Users/SlideoutButtonUsers.vue    | 42 --------------
 todo.md                                       |  2 +-
 12 files changed, 47 insertions(+), 168 deletions(-)
 delete mode 100644 src/app/components/Slideout/Chat/SlideoutButtonChat.vue
 rename src/app/components/Slideout/{ => Settings}/ColorPicker/ColorPicker.vue (100%)
 rename src/app/components/Slideout/{ => Settings}/ColorPicker/ColorSlider.vue (100%)
 delete mode 100644 src/app/components/Slideout/Settings/SlideoutButtonSettings.vue
 delete mode 100644 src/app/components/Slideout/Users/SlideoutButtonUsers.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 3a5a9800..3fcf3dae 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -59,9 +59,7 @@
   import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
   import OpenWindowButton from '@/components/OpenWindowButton.vue';
   import DraggableDiv from '@/components/DraggableDiv.vue';
-  import Message from '@/types/message';
   import OperLogin from '@/components/OperLogin.vue';
-  import Ban from '@/types/Ban';
   import PrivateMessageModal from '@/components/Messages/PrivateMessageModal.vue';
 
   Vue.use(BootstrapVue);
@@ -407,8 +405,8 @@
   background-color: $med-dark-blue;
   position: relative; /* Makes sure everything is placed with respect to it, not to its parent */
   transition: width 200ms, height 200ms, margin 1s, position 1s;
-  min-width: 250px; /* Bounds on chat resizing */
-  max-width: 400px;
+  min-width: 350px; /* Bounds on chat resizing */
+  max-width: 450px;
   max-height: 600px;
 }
 .eternaChatNormal {
diff --git a/src/app/components/Messages/PrivateMessageModal.vue b/src/app/components/Messages/PrivateMessageModal.vue
index b63e0bf6..adabfd35 100644
--- a/src/app/components/Messages/PrivateMessageModal.vue
+++ b/src/app/components/Messages/PrivateMessageModal.vue
@@ -27,7 +27,6 @@
   /* Taken from OperLogin and modified */
   import { Component, Vue } from 'vue-property-decorator';
   import Message from '@/types/message';
-  import BanStatus from '../../types/BanStatus';
 
 
   @Component({
diff --git a/src/app/components/Slideout/Chat/SlideoutButtonChat.vue b/src/app/components/Slideout/Chat/SlideoutButtonChat.vue
deleted file mode 100644
index f772781d..00000000
--- a/src/app/components/Slideout/Chat/SlideoutButtonChat.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <Button
-    :class="{active: selected}"
-    class="slideout-button"
-    @click="$emit('input')"
-  >
-    <slot />
-  </Button>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-  import SlideoutButton from '../SlideoutButton.vue';
-
-
-  @Component
-  export default class SlideoutButtonChat extends SlideoutButton {
-    @Prop({ required: true })
-    selected!: string;
-  }
-</script>
-
-
-<style lang="scss" scoped>
-  /* Style the buttons that are used to open the tab content */
-  button {
-    border: none;
-    outline: none;
-    cursor: pointer;
-    transition: 0.3s;
-    padding: 0.4em 1.25em;
-    background-color: black;
-    height:40px;
-    background-image: url("../../../assets/chat-icon-white.png");
-    background-repeat: no-repeat;
-    background-size: 40% 60%;
-    background-position: center;
-    width: 40px;
-  }
-  button.active { /* When button is selected, use green icon */
-    background-image: url("../../../assets/chat-icon-green.png");
-  }
-</style>
diff --git a/src/app/components/Slideout/Chat/Splitter.vue b/src/app/components/Slideout/Chat/Splitter.vue
index 0d118704..3be166f6 100644
--- a/src/app/components/Slideout/Chat/Splitter.vue
+++ b/src/app/components/Slideout/Chat/Splitter.vue
@@ -14,7 +14,7 @@
 <style lang="scss" scoped>
   .splitter {
     height:1px;
-    width:90%;
+    width:calc(100% - 10px);
     padding:0px;
     padding-right:5px;
     padding-left:5px;
diff --git a/src/app/components/Slideout/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
similarity index 100%
rename from src/app/components/Slideout/ColorPicker/ColorPicker.vue
rename to src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
diff --git a/src/app/components/Slideout/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
similarity index 100%
rename from src/app/components/Slideout/ColorPicker/ColorSlider.vue
rename to src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
diff --git a/src/app/components/Slideout/Settings/SlideoutButtonSettings.vue b/src/app/components/Slideout/Settings/SlideoutButtonSettings.vue
deleted file mode 100644
index 11ffb2b6..00000000
--- a/src/app/components/Slideout/Settings/SlideoutButtonSettings.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <Button
-    :class="{active: selected}"
-    @click="$emit('input')"
-  >
-    <slot />
-  </Button>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-  import SlideoutButton from '../SlideoutButton.vue';
-
-
-  @Component
-  export default class SlideoutButtonSettings extends SlideoutButton {
-    @Prop({ required: true })
-    selected!: string;
-  }
-</script>
-
-
-<style lang="scss" scoped>
-  /* Style the buttons that are used to open the tab content */
-  button {
-    border: none;
-    outline: none;
-    cursor: pointer;
-    transition: 0.3s;
-    padding: 0.4em 1.25em;
-    background-color: black;
-    height:40px;
-    background-image: url("../../../assets/settings-icon-white.png");
-    background-repeat: no-repeat;
-    background-size: 40% 40%;
-    background-position: center;
-    width: 40px;
-  }
-  button.active { /* When button is selected, use green icon */
-    background-image: url("../../../assets/settings-icon-green.png");
-  }
-</style>
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index b3c29f6b..55867bf2 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -249,7 +249,7 @@
   import SlideoutButton from '../SlideoutButton.vue';
   import Slideout from '../Slideout.vue';
   import { Channel } from '@/store/chat.vuex';
-  import ColorPicker from '../ColorPicker/ColorPicker.vue';
+  import ColorPicker from './ColorPicker/ColorPicker.vue';
   import MinimizationTriangle from '../../MinimizationTriangle.vue';
 
   Vue.use(BootstrapVue);
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 6bc8d741..e0a04150 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    style="position:relative; width:75%"
+    style="position:relative; width:65%"
     class="slideout-container"
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
@@ -12,21 +12,26 @@
       }
     </v-style>
     <span v-if="checked">
-      <SlideoutButtonChat
-        :selected="chatSelected"
-        @input="activeTab = 0"
-        class='slideout-button'
-      />
-      <SlideoutButtonUsers
-        :selected="userSelected"
-        @input="activeTab = 1"
-        class='slideout-button'
-      />
-      <SlideoutButtonSettings
-        :selected="settingsSelected"
-        @input="activeTab = 2"
-        class='slideout-button'
-      />
+      <span id="slideout-header">
+        <SlideoutButton
+          :selected="chatSelected"
+          name="chat"
+          @input="activeTab = 0"
+          class='slideout-button'
+        />
+        <SlideoutButton
+          name="user"
+          :selected="userSelected"
+          @input="activeTab = 1"
+          class='slideout-button'
+        />
+        <SlideoutButton
+          name="settings"
+          :selected="settingsSelected"
+          @input="activeTab = 2"
+          class='slideout-button'
+        />
+      </span>
       <SlideoutChats
         v-if="chatSelected"
       />
@@ -44,9 +49,6 @@
   import SlideoutUser from './Users/SlideoutUser.vue';
   import SlideoutSettings from './Settings/SlideoutSettings.vue';
   import SlideoutButton from './SlideoutButton.vue';
-  import SlideoutButtonUsers from './Users/SlideoutButtonUsers.vue';
-  import SlideoutButtonChat from './Chat/SlideoutButtonChat.vue';
-  import SlideoutButtonSettings from './Settings/SlideoutButtonSettings.vue';
   import HamburgerMenuButton from './HamburgerMenuButton.vue';
   import { Channel } from '../../store/chat.vuex';
 
@@ -56,9 +58,6 @@
       SlideoutUser,
       SlideoutSettings,
       SlideoutButton,
-      SlideoutButtonSettings,
-      SlideoutButtonChat,
-      SlideoutButtonUsers,
       HamburgerMenuButton,
     },
   })
@@ -176,16 +175,24 @@
   animation: slideBack 0.25s;
 }
 @keyframes slide { /* Opens slideout */
-  from { left:-75%}
+  from { left:-65%}
   to { left:0}
 }
 /* Height does need to be there for the slideout to work. Otherwise it doesn't animate */
 @keyframes slideBack { /* Closes slideout */
   to {height:100%; width:0}
-  from {height:100%; width:75%}
+  from {height:100%; width:65%}
 }
 .tall { /* When slideout is open */
   height:100%;
   animation: slide 0.25s;
 }
+#slideout-header { /* Displays tab buttons */
+  display:inline-flex;
+  align-items: center; /* Centers buttons vertically */
+  height:40px;
+  margin-left:-15px; /* Treats hamburger button distance correctly */
+  width: calc(100% - 30px); /* Makes sure there is room to fill */
+  justify-content: space-evenly; /* Fills the room */
+}
 </style>
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 4020c39b..2dcb4afc 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -1,11 +1,14 @@
 <template>
-  <Button
-    :class="{active: selected}"
+  <!-- Centers images -->
+  <center
     @click="$emit('input')"
   >
-    {{ name }}
+    <img
+    :src="require(`@/assets/${name}-icon-${selected ? 'green' : 'white'}.png`)"
+    comment="Use of require means image is actually loaded"
+    >
     <slot />
-  </Button>
+  </center>
 </template>
 
 <script lang="ts">
@@ -18,25 +21,24 @@
     name!: string;
 
     @Prop({ required: true })
-    selected!: string;
+    selected!: boolean;
   }
 </script>
 
 
 <style lang="scss" scoped>
   /* Style the buttons that are used to open the tab content */
-  button {
+  center {
     border: none;
     outline: none;
     cursor: pointer;
     transition: 0.3s;
-    padding: 0.4em 1.25em;
     font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
     font-size: 12px;
     font-weight: bold;
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.07);
     text-transform: capitalize;
-    height:30px;
+    width:40px;
+    display:inline-block;
   }
 </style>
diff --git a/src/app/components/Slideout/Users/SlideoutButtonUsers.vue b/src/app/components/Slideout/Users/SlideoutButtonUsers.vue
deleted file mode 100644
index bc52e995..00000000
--- a/src/app/components/Slideout/Users/SlideoutButtonUsers.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <Button
-    :class="{active: selected}"
-    @click="$emit('input')"
-  >
-    <slot />
-  </Button>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-  import SlideoutButton from '../SlideoutButton.vue';
-
-
-  @Component
-  export default class SlideoutButtonUsers extends SlideoutButton {
-    @Prop({ required: true })
-    selected!: string;
-  }
-</script>
-
-
-<style lang="scss" scoped>
-  /* Style the buttons that are used to open the tab content */
-  button {
-    border: none;
-    outline: none;
-    cursor: pointer;
-    transition: 0.3s;
-    padding: 0.4em 1.25em;
-    background-color: black;
-    height:40px;
-    background-image: url("../../../assets/user-icon-white.png");
-    background-repeat: no-repeat;
-    background-size: 60% 40%;
-    background-position: center;
-    width: 40px;
-  }
-  button.active { /* When button is selected, use green icon */
-    background-image: url("../../../assets/user-icon-green.png");
-  }
-</style>
diff --git a/todo.md b/todo.md
index 1369039f..71e9ab49 100644
--- a/todo.md
+++ b/todo.md
@@ -5,7 +5,6 @@
 
 ### Cleanup
   - Comment code
-  - Remove unused imports
 
 ### Bug fixes
   - Ensure features and styles are consistent across browsers
@@ -28,6 +27,7 @@
   - Move unnecessary stuff out of chat.vuex
   - Add typings for untyped modules
   - Move files in components to folders
+  - Remove unused imports
 
 ### Away status
   - Automatically set it after a certain amount of time with no interaction

From 998d0c20c4df9d424c5fd330c737b6f95c17c2c8 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 18 Jun 2020 18:15:30 -0500
Subject: [PATCH 119/223] Comments

---
 src/app/App.vue            | 26 ++++++++++----------
 src/app/store/chat.vuex.ts | 50 ++++++++++++++++++++++++++++----------
 todo.md                    |  4 +--
 3 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 3fcf3dae..5199ff64 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -64,8 +64,8 @@
 
   Vue.use(BootstrapVue);
 
-  Vue.component('v-style', {
-    render: function c(createElement) {
+  Vue.component('v-style', { // Used to reactively style pseudo-elements
+    render: function c(createElement) { // Basically creates a reactive <style> element
       return createElement('style', this.$slots.default);
     },
   });
@@ -107,7 +107,7 @@
   }
 
 
-  @Watch('showPrivMsgModal')
+  @Watch('showPrivMsgModal') // Shows modal
   triggerStart() {
     if (this.showPrivMsgModal) {
       this.$refs.privmsgmodal.onStart();
@@ -193,7 +193,7 @@
     return this.$vxm.chat.auth;
   }
 
-  @Watch('show') // Show modal
+  @Watch('show') // Show authentification modal
   showAuthentification() {
     if (this.show) {
       this.showAuth = true;
@@ -225,7 +225,7 @@
     return this.$vxm.chat.initialSize;
   }
 
-  resized() {
+  resized() { // When the chat is resized, store the new size
     const w = this.$el.scrollWidth;
     const h = this.$el.scrollHeight;
     if (localStorage && (w !== 300 || h !== 500)) {
@@ -240,7 +240,7 @@
   }
 
   @Watch('slideoutOpen')
-  slideoutChanged() {
+  slideoutChanged() { // Make sure the chat isn't minimized when the slideout opens
     if (this.slideoutOpen) {
       this.minimization = false;
     }
@@ -260,7 +260,7 @@
 
 
   @Watch('windowFocused')
-  focusChanged() {
+  focusChanged() { // Updates status when focus is changed
     if (this.windowFocused) {
       this.$vxm.chat.setUnaway();
     } else {
@@ -346,8 +346,8 @@
     });
     window.addEventListener('keydown', this.key);
     window.addEventListener('click', this.close); // Closes slideout when clicked outside
-    window.addEventListener('focus', () => {
-      if (this.$vxm.chat.autoUpdateStatus) {
+    window.addEventListener('focus', () => { // Updates away/online status when tab is clicked on/off
+      if (this.$vxm.chat.autoUpdateStatus) { // Don't update if user has set themselves as away
         this.windowFocused = true;
       }
     });
@@ -358,7 +358,7 @@
 
   // Inactivity timer
 
-  timeout = 60000;
+  timeout = 60000; // How long a user is inactive before they are marked as away
 
   timeoutId !: number;
 
@@ -366,7 +366,7 @@
     this.$vxm.chat.setAway();
   }
 
-  resetInactiveTimer() {
+  resetInactiveTimer() { // When the user interacts with the chat, reset the timer
     window.clearTimeout(this.timeoutId);
     this.beginInactiveTimer();
   }
@@ -375,8 +375,8 @@
     this.timeoutId = setTimeout(this.onInactive, this.timeout);
   }
 
-  startTimers() {
-    const chat = document.getElementById('eterna-chat');
+  startTimers() { // Begins timers and sets event listeners
+    const chat = document.getElementById('eterna-chat'); // $refs was acting up
     chat?.addEventListener('mousemove', this.resetInactiveTimer, false);
     chat?.addEventListener('mousedown', this.resetInactiveTimer, false);
     chat?.addEventListener('keypress', this.resetInactiveTimer, false);
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index a6df03c1..d19b2617 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -121,13 +121,13 @@ export default class ChatModule extends VuexModule {
 
   initialSize: [number, number] = [0, 0];
 
-  customNick !: string;
+  customNick !: string; // Custom nick for oper
 
-  notificationsKeywords!: string[];
+  notificationsKeywords!: string[]; // Keywords that trigger notifications
 
-  autoUpdateStatus = true;
+  autoUpdateStatus = true; // If away/online status should update when the tab is focused
 
-  disconnected = false;
+  disconnected = false; // If the user intentionally disconnected
 
   constructor() {
     super();
@@ -478,7 +478,6 @@ export default class ChatModule extends VuexModule {
       // Iterates through all channels
       channelNames.forEach(e => this.client?.raw(`SAMODE ${e} +o ${i}`));
     });
-    this.joinOpsChannel();
   }
 
   /**
@@ -486,10 +485,16 @@ export default class ChatModule extends VuexModule {
    */
   @action()
   async operCommand() {
-    this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
-    setTimeout(this.setChannelOps, 100); // Make sure events happen in order
+    if (!this.oper) {
+      this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
+      this.setChannelOps();
+      this.joinOpsChannel();
+    }
   }
 
+  /**
+   * Joins the #ops-notifications channel
+   */
   @action()
   async joinOpsChannel() {
     this.client?.join('#ops-notifications');
@@ -1099,6 +1104,10 @@ export default class ChatModule extends VuexModule {
     } else if (channel) this.postMessage(new Message(`${username} has already been ignored`, channel));
   }
 
+  /**
+   * Changes the user's nick
+   * @param value - The new nick
+   */
   @action()
   async changeNick(value:string) {
     let to = value;
@@ -1447,6 +1456,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Determines whether a user is banned in a channel
+   * @param arg - An object containing the user, channel, and a callback.
+   */
   @action()
   async bans(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
     const { username } = arg.user;
@@ -1466,6 +1479,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Determines whether a user is muted in a channel
+   * @param arg - An object containing the user, channel, and a callback.
+   */
   @action()
   async quiets(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
     const { username } = arg.user;
@@ -1485,6 +1502,9 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Updates the away/online status for all connected users
+   */
   @action()
   async updateUserStatus() {
     this.client?.who('#general', (e) => { // Everyone should be in this channel
@@ -1496,17 +1516,21 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  @action()
-  async setAway() {
-    this.client!.user.away = 'away';
+  /**
+   * Sets the user as away
+   */
+  @mutation
+  setAway() {
     this.currentUser.away = true;
     this.connectedUsers[this.currentUser.username]!.away = true;
     this.client?.raw('AWAY User is currently away');
   }
 
-  @action()
-  async setUnaway() {
-    this.client!.user.away = '';
+  /**
+   * Sets the user as online
+   */
+  @mutation
+  setUnaway() {
     this.currentUser.away = false;
     this.connectedUsers[this.currentUser.username]!.away = false;
     this.client?.raw('AWAY');
diff --git a/todo.md b/todo.md
index 71e9ab49..b35237e0 100644
--- a/todo.md
+++ b/todo.md
@@ -3,9 +3,6 @@
 ## Todo
 ----
 
-### Cleanup
-  - Comment code
-
 ### Bug fixes
   - Ensure features and styles are consistent across browsers
 
@@ -28,6 +25,7 @@
   - Add typings for untyped modules
   - Move files in components to folders
   - Remove unused imports
+  - Comment code
 
 ### Away status
   - Automatically set it after a certain amount of time with no interaction

From 91e7fa41c7cc9fd880bc254b8bea08dc0f0a38e8 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 11:22:06 -0500
Subject: [PATCH 120/223] Last of the cleanup/bug fixes (hopefully)

---
 src/app/App.vue                               |  5 +-
 src/app/components/Messages/UserMessage.vue   |  1 +
 .../Settings/ColorPicker/ColorSlider.vue      |  2 +-
 .../Slideout/Settings/SlideoutSettings.vue    |  9 +--
 src/app/store/chat.vuex.ts                    | 56 ++++++++++---------
 todo.md                                       |  4 +-
 6 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 5199ff64..92340ed4 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,13 +1,14 @@
 <template>
   <DraggableDiv
     id="eterna-chat"
-    style="overflow-y: hidden; resize:both"
+    style="overflow-y: hidden"
     :style="{ 'min-height': minimized ? '40px' : '400px',
     /* Makes sure minimum height is changed to allow for chat to be minimized*/
     top: `${initialPosition[1]}px`,
     left:`${initialPosition[0]}px`,
     width: `${initialSize[0] || 300}px`,
-    height: `${initialSize[1] || 500}px`}"
+    height: `${initialSize[1] || 500}px`,
+    resize: minimized ? '' : 'both'}"
     :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
     :enabled="!fullSize /* Disables dragging when chat is fullsize*/"
     v-resize:debounce="resized"
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index ef13f494..8152d0f7 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -197,6 +197,7 @@
     position: absolute;
     top: -4px;
     right: 15px;
+    margin-right:10px;
     font-size: 20px;
     display: block;
     cursor: pointer;
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index ca35f999..7c92b18e 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -109,7 +109,7 @@
     background-color:#7b8a8b;
     appearance: none;
     width:40px;
-    height:px;
+    height:15px;
     border-radius:2px;
   }
   .slider:focus { /* Avoids unwanted outlines */
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index 55867bf2..6b00973c 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -232,8 +232,8 @@
           v-show="!isOper" >
             Log in as operator
         </button>
-        <h6>Change nick</h6>
-        <input @input="setNick" :value="opernick">
+        <h6 v-show="isOper">Change nick</h6>
+        <input v-show="isOper" @input="setNick" :value="opernick">
       </div>
       </transition>
     </section>
@@ -277,7 +277,6 @@
 
     @Watch('openMenus')
     menusChanged() {
-      console.log(2);
       if (localStorage) {
         localStorage.openMenus = JSON.stringify(this.openMenus);
       }
@@ -584,8 +583,10 @@
       }
       if (localStorage.notificationsKeywords) {
         this.keywords = JSON.parse(localStorage.notificationsKeywords).join(', ');
-      } else {
+      } else if (this.$vxm.chat.notificationsKeywords) {
         this.keywords = this.$vxm.chat.notificationsKeywords.join(', ');
+      } else {
+        this.keywords = '';
       }
       if (localStorage.nick) {
         this.opernick = localStorage.nick;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index d19b2617..c59273f4 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -454,9 +454,11 @@ export default class ChatModule extends VuexModule {
     const channel = parts[3];
     // eslint-disable-next-line no-control-regex
     let message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
-    this.notificationsKeywords.forEach(n => {
-      message = message.replace(n, `<mark>${n}</mark>`);
-    });
+    if (this.notificationsKeywords) {
+      this.notificationsKeywords.forEach(n => {
+        message = message.replace(n, `<mark>${n}</mark>`);
+      });
+    }
     const user = parts[1].substring(1, parts[1].indexOf('@'));
     const username = user.substring(0, user.lastIndexOf('!'));
     const uid = user.substring(user.lastIndexOf('!') + 1);
@@ -495,8 +497,8 @@ export default class ChatModule extends VuexModule {
   /**
    * Joins the #ops-notifications channel
    */
-  @action()
-  async joinOpsChannel() {
+  @mutation
+  joinOpsChannel() {
     this.client?.join('#ops-notifications');
   }
 
@@ -1169,8 +1171,8 @@ export default class ChatModule extends VuexModule {
    * @param {string} message - The user and the message to be sent. Takes the form <nick>|<message>
    */
 
-  @action()
-  async postToQuery(message:string) { /* @action() can only take 1 argument */
+  @mutation
+  postToQuery(message:string) { /* @action() can only take 1 argument */
     /* Splits argument into message and channel
     Will only cause issues if people are putting | in their nick */
     const chan = message.substring(0, message.indexOf('|'));
@@ -1264,9 +1266,11 @@ export default class ChatModule extends VuexModule {
     }
     const username = User.parseUsername(nick);
     let msg = message;
-    this.notificationsKeywords.forEach(n => {
-      msg = msg.replace(n, `<mark>${n}</mark>`);
-    });
+    if (this.notificationsKeywords) {
+      this.notificationsKeywords.forEach(n => {
+        msg = msg.replace(n, `<mark>${n}</mark>`);
+      });
+    }
     const messageObject = new Message(
       msg,
       target,
@@ -1338,8 +1342,8 @@ export default class ChatModule extends VuexModule {
    * Bans a user
    * @param user {User} - The user to be banned
    */
-  @action()
-  async ban(user:User) {
+  @mutation
+  ban(user:User) {
     if (this.oper) {
       this.client?.ban(this.chatChannel, `*!${user.username}@*`);
     }
@@ -1349,8 +1353,8 @@ export default class ChatModule extends VuexModule {
    * Kicks a user
    * @param user {User} - The user to be kicked
    */
-  @action()
-  async kick(user:User) {
+  @mutation
+  kick(user:User) {
     if (this.oper) {
       this.connectedUsers[user.username]?.nicks.forEach((e) => {
         this.client?.raw(`KICK ${this.chatChannel} ${e}`);
@@ -1362,8 +1366,8 @@ export default class ChatModule extends VuexModule {
    * Quiets a user
    * @param user {User} - The user to be quieted
    */
-  @action()
-  async quiet(user:User) {
+  @mutation
+  quiet(user:User) {
     if (this.oper) {
       this.client?.raw(`MODE ${this.chatChannel} +b m;*!${user.username}@*`);
     }
@@ -1373,8 +1377,8 @@ export default class ChatModule extends VuexModule {
    * Unquiets a user
    * @param user {User} - The user to be unquieted
    */
-  @action()
-  async unquiet(user:User) {
+  @mutation
+  unquiet(user:User) {
     if (this.oper) {
       this.client?.raw(`MODE ${this.chatChannel} -b m;*!${user.username}@*`);
     }
@@ -1384,8 +1388,8 @@ export default class ChatModule extends VuexModule {
    * Unbans a user
    * @param user {User} - The user to be unbanned
    */
-  @action()
-  async unban(user:User) {
+  @mutation
+  unban(user:User) {
     if (this.oper) {
       this.client?.unban(this.chatChannel, `*!${user.username}@*`);
     }
@@ -1505,8 +1509,8 @@ export default class ChatModule extends VuexModule {
   /**
    * Updates the away/online status for all connected users
    */
-  @action()
-  async updateUserStatus() {
+  @mutation
+  updateUserStatus() {
     this.client?.who('#general', (e) => { // Everyone should be in this channel
       (e.users as {nick: string, away:boolean}[]).forEach(u => { // For each user
         const user = User.parseUsername(u.nick); // Get their username
@@ -1519,8 +1523,8 @@ export default class ChatModule extends VuexModule {
   /**
    * Sets the user as away
    */
-  @mutation
-  setAway() {
+  @action()
+  async setAway() {
     this.currentUser.away = true;
     this.connectedUsers[this.currentUser.username]!.away = true;
     this.client?.raw('AWAY User is currently away');
@@ -1529,8 +1533,8 @@ export default class ChatModule extends VuexModule {
   /**
    * Sets the user as online
    */
-  @mutation
-  setUnaway() {
+  @action()
+  async setUnaway() {
     this.currentUser.away = false;
     this.connectedUsers[this.currentUser.username]!.away = false;
     this.client?.raw('AWAY');
diff --git a/todo.md b/todo.md
index b35237e0..2c23705f 100644
--- a/todo.md
+++ b/todo.md
@@ -3,9 +3,6 @@
 ## Todo
 ----
 
-### Bug fixes
-  - Ensure features and styles are consistent across browsers
-
 ## Finished
 ---
 
@@ -36,6 +33,7 @@
   - Operator name change seems to break sometimes
   - Optimize away/online status loading
   - Find a way to limit unnecessary GET requests (tooltips)
+  - Ensure features and styles are consistent across browsers
 
 ### Miscellaneous
   - Clicking a channel name in a chat message opens the channel

From 0c422c77809adf9bff59b69a96e8600a938d420c Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 12:19:51 -0500
Subject: [PATCH 121/223] Tooltip updates

---
 src/app/components/Messages/UserTooltip.vue | 55 ++++++++++++++++++---
 src/app/components/Messages/Username.vue    |  1 +
 src/app/store/chat.vuex.ts                  |  2 +-
 3 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 11b9840f..c3e0c111 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -7,9 +7,14 @@
       left: `${left + 5}px`
     }">
     <ul>
-      <li class="user-tooltip-user">{{user.username}}</li>
-      <li class="user-tooltip-rank"><span class="rank">{{rank}}</span></li>
-      <li class="description">{{desc}}</li>
+      <li class="user-tooltip-user">
+        <span style="color:yellow; font-size:1.25em" v-show="user.away">● </span>{{user.username}}
+      </li>
+      <li class="user-tooltip-rank">
+        <span class="rank">{{rank}}</span>
+        <span class="status">{{status}}</span>
+      </li>
+      <li class="description"><span v-html="desc" /></li>
     </ul>
   </div>
 </template>
@@ -51,8 +56,15 @@
         user: this.user,
         callback: (d) => {
           const data = JSON.parse(d);
-          if (d.data !== undefined) {
-            this.desc = d.data.user.profile;
+          if (data.data !== undefined && data.data.user.Profile) {
+            let desc = data.data.user.Profile;
+            if (desc.length > 150) {
+              desc = desc.slice(0, 150)
+                .replace(/<br>/, '')
+                .trim();
+              desc += '...';
+            }
+            this.desc = desc;
           } else {
             this.desc = 'This user has not added a description to their profile';
           }
@@ -61,13 +73,36 @@
             this.desc = 'This user has not added a description to their profile';
     }
 
+    status = '';
+
+    specialStatus() {
+      const statusUsernames: {[key:string]:string[]} = {
+        developer: ['Ahalb'],
+        scientist: [''],
+        staff: ['Ahalb'],
+        moderator: ['Ahalb'],
+      };
+      const status: string[] = [];
+      const name = this.user.username;
+      Object.keys(statusUsernames).forEach(e => {
+        if (statusUsernames[e].includes(name)) {
+          status.push(e);
+        }
+      });
+      if (status.length > 0) {
+        this.status = status.join(', ');
+      } else {
+        this.status = '';
+      }
+    }
+
     findRank() {
       this.$vxm.chat.getUserInfo({
         user: this.user,
         callback: (d) => {
           const data = JSON.parse(d);
-          if (d.data !== undefined) {
-            this.rank = `#${d.data.user.rank}`;
+          if (data.data !== undefined) {
+            this.rank = `#${data.data.user.rank}`;
           } else {
             this.rank = 'Unranked';
           }
@@ -113,4 +148,10 @@
     border-bottom-right-radius: 5px;
     border-bottom-left-radius: 5px;
   }
+  .status {
+    float:right;
+  }
+  .status::first-letter {
+    text-transform: capitalize;
+  }
 </style>
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 2d81da82..b903cca5 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -84,6 +84,7 @@
     enter() {
       this.$refs.tooltip.findRank();
       this.$refs.tooltip.description();
+      this.$refs.tooltip.specialStatus();
     }
 
     $refs !: {
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index c59273f4..d0dd92a9 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1207,7 +1207,7 @@ export default class ChatModule extends VuexModule {
         arg.callback(xmlHttp.responseText); // Calls callback after response
       }
     };
-    xmlHttp.open('GET', `https://eternagame.org/get/?type=my_user&uid=${uid}`, true); // true for asynchronous
+    xmlHttp.open('GET', `https://eternagame.org/get/?type=user&uid=${uid}`, true); // true for asynchronous
     xmlHttp.send(null);
   }
 

From 36191bc78ce02f5384840d6bfd3151550350aaf2 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 12:21:40 -0500
Subject: [PATCH 122/223] Updated tooltips slightly

---
 src/app/components/Messages/UserTooltip.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index c3e0c111..b4b30b13 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -76,11 +76,15 @@
     status = '';
 
     specialStatus() {
+      /*
+      I need to fill these values in
+      Once roles are set up on the backend, this needs to be replaced anyway
+      */
       const statusUsernames: {[key:string]:string[]} = {
-        developer: ['Ahalb'],
+        developer: [''],
         scientist: [''],
-        staff: ['Ahalb'],
-        moderator: ['Ahalb'],
+        staff: [''],
+        moderator: [''],
       };
       const status: string[] = [];
       const name = this.user.username;

From 4baf39e6d20a6e9914b6908152bb981cf9028b36 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 13:21:31 -0500
Subject: [PATCH 123/223] Tooltip displayed when a username in a message is
 hovered over

---
 src/app/components/Messages/UserMessage.vue | 89 +++++++++++++++++----
 src/app/tools/Markdown.ts                   | 11 +++
 todo.md                                     |  2 +
 3 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 8152d0f7..482c02d0 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -20,6 +20,14 @@
           }"
           v-html="formattedMessage" />
       </span>
+      <UserTooltip
+        v-if="tooltipVisible"
+        v-show="tooltipVisible"
+        :user="clickedUser"
+        ref="clickTooltip"
+        :top="tooltipY"
+        :left="tooltipX"
+      />
       &lrm;
       <span v-if="!isNotice" class="message-time">[{{formattedTime}}]</span>
     </div>
@@ -46,11 +54,13 @@
   import User from '@/types/user';
   import ActionMenu from './ActionMenu.vue';
   import md from '@/tools/Markdown';
+  import UserTooltip from './UserTooltip.vue';
 
 
   @Component({
     components: {
       Username,
+      UserTooltip,
       ActionMenu,
     },
   })
@@ -66,6 +76,8 @@
       return this.message.isNotice;
     }
 
+    clickedUser!: User;
+
     @Prop()
     private message!: Message;
 
@@ -85,26 +97,70 @@
 
     mounted() {
       // Gets all of the channel links from markdown
-     const channelLinks = this.$refs.msg.getElementsByClassName('channel-link');
-     // Spread operators converts HTMLCollectionOf<Element> to HTMLElement[]
-     // Iterates through each channel link
-     [...channelLinks].forEach(l => {
-       // Adds event listener for click
-       l.addEventListener('click', (ev) => {
-         // When channel link is clicked, change channel
-         const channel = l.innerHTML;
-         // Makes sure channel exists
-         if (Object.keys(this.$vxm.chat.channels).includes(channel)) {
-          this.$vxm.chat.chatChannel = channel; // Change the channel name in the header
-          // Find the tab number and set it
-          this.$vxm.chat.tab = Object.keys(this.$vxm.chat.channels).indexOf(channel);
-         } else {
-           console.log(`No such channel ${channel}`);
-         }
+      const channelLinks = this.$refs.msg.getElementsByClassName('channel-link');
+      // Spread operators converts HTMLCollectionOf<Element> to HTMLElement[]
+      // Iterates through each channel link
+      [...channelLinks].forEach(l => {
+        // Adds event listener for click
+        l.addEventListener('click', (ev) => {
+          // When channel link is clicked, change channel
+          const channel = l.innerHTML;
+          // Makes sure channel exists
+          if (Object.keys(this.$vxm.chat.channels).includes(channel)) {
+            this.$vxm.chat.chatChannel = channel; // Change the channel name in the header
+            // Find the tab number and set it
+            this.$vxm.chat.tab = Object.keys(this.$vxm.chat.channels).indexOf(channel);
+          } else {
+            console.log(`No such channel ${channel}`);
+          }
        });
      });
+     // Gets all user links from markdown
+     const userLinks = this.$refs.msg.getElementsByClassName('user-link');
+      // Spread operators converts HTMLCollectionOf<Element> to HTMLElement[]
+      // Iterates through each channel link
+      [...userLinks].forEach(l => {
+        // Adds event listener for hover
+        l.addEventListener('mouseenter', (ev) => {
+          const user = l.innerHTML.substring(1);
+          // Makes sure user exists
+          if (Object.keys(this.$vxm.chat.connectedUsers).includes(user)) {
+            // Set the user of the tooltip
+            this.clickedUser = this.$vxm.chat.connectedUsers[user]!;
+            this.tooltipVisible = true; // Make it visible
+            /* Ensures information is loaded after the tooltip exists
+            The tooltip uses v-if (to limit GET requests)
+            If the functions are called right away,
+            they could fail because the tooltip doesn't exist yet */
+            this.$nextTick(() => {
+              // Updates tooltip information
+              this.$refs.clickTooltip.findRank();
+              this.$refs.clickTooltip.description();
+              this.$refs.clickTooltip.specialStatus();
+            });
+          } else {
+            console.log(`No such user ${user}`);
+          }
+        });
+        // Hide the tooltip not hovered over
+        l.addEventListener('mouseleave', (ev) => {
+          this.tooltipVisible = false;
+        });
+        // When the mouse is moved, update the tooltip position
+        l.addEventListener('mousemove', (e: Event) => {
+          const ev = e as MouseEvent;
+          this.tooltipX = ev.clientX;
+          this.tooltipY = ev.clientY;
+        });
+      });
     }
 
+    tooltipX = 0;
+
+    tooltipY = 0;
+
+    tooltipVisible = false;
+
     get formattedTime() {
       return this.message.time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
     }
@@ -133,6 +189,7 @@
     $refs!: {
       contextMenu: HTMLFormElement;
       msg: HTMLSpanElement;
+      clickTooltip: UserTooltip;
     };
 
     openContextMenu(e: MouseEvent) {
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 33056b36..2cf14ba6 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -40,13 +40,24 @@ md.renderer.rules.text = function link(tokens, idx, options, env, self) {
     const { content } = tokens[idx];
     return `<img src="${content}" style="width:calc(100% - 25px); max-width:750px">`;
   }
+  // If there's a channel, format it and make sure it can be clicked to visit the channel
   if (tokens[idx].content.match(/#.+/)) {
     let { content } = tokens[idx];
     const channel = tokens[idx].content.match(/#\S+/g);
     if (!channel) return defaultRender(tokens, idx, options, env, self);
+    // Wraps channel name in <mark> tags and flags it as a channel name
     content = content.replace(channel[0], `<mark class="channel-link" style="cursor:pointer">${channel[0]}</mark>`);
     return content;
   }
+  // If there's a username, format it and make sure it can be clicked to display a tooltip
+  if (tokens[idx].content.match(/@.+/)) {
+    let { content } = tokens[idx];
+    const user = tokens[idx].content.match(/@\S+/g);
+    if (!user) return defaultRender(tokens, idx, options, env, self);
+    // Wraps username in <mark> tags and flags it as a username
+    content = content.replace(user[0], `<mark class="user-link" style="cursor:pointer">${user[0]}</mark>`);
+    return content;
+  }
   return defaultRender(tokens, idx, options, env, self);
 };
 
diff --git a/todo.md b/todo.md
index 2c23705f..31159e66 100644
--- a/todo.md
+++ b/todo.md
@@ -2,6 +2,7 @@
 
 ## Todo
 ----
+Autocomplete for usernames?
 
 ## Finished
 ---
@@ -37,6 +38,7 @@
 
 ### Miscellaneous
   - Clicking a channel name in a chat message opens the channel
+  - Clicking a username brings up the tooltip
 
 ### Reconnect button
   - Style to align with theme

From be1b5244bb38451ba937b89104829f66717e4be8 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 14:39:25 -0500
Subject: [PATCH 124/223] Autocompletion for usernames

---
 src/app/App.vue                      |  4 +--
 src/app/components/ScalableInput.vue | 53 ++++++++++++++++++++++++++--
 todo.md                              |  2 +-
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 92340ed4..7f67f4f3 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -387,8 +387,8 @@
 
   // Hooks
 
-  postScreenshot(url:string, puzzleName:string) {
-    this.postMessage(`${puzzleName} ${url}`, '#help');
+  postScreenshot(url:string) {
+    this.postMessage(url, '#help');
   }
   }
 </script>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/ScalableInput.vue
index 1c91dc57..e05599c3 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/ScalableInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="overflow: hidden; position: relative;">
+  <div style="overflow:hidden; position: relative;">
     <v-style> <!-- Dynamically add focus ring if tab key is pressed -->
       .scalable-input:focus {
         box-shadow: {{bshadow}};
@@ -15,7 +15,7 @@
       }"
       class="scalable-input"
       :disabled="disabled"
-      @input="$emit('input', $event.target.value);"
+      @input="$emit('input', $event.target.value); updateAutocomplete($event)"
       ref="textarea"
       @focus="$emit('focused', true)"
       @blur="$emit('focused', false)"
@@ -32,6 +32,7 @@
   import {
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
+  import User from '@/types/user';
   import SendButton from '@/components/SendButton.vue';
 
   @Component({
@@ -218,6 +219,54 @@
     updated() {
       this.updateHeight();
     }
+
+    autocompletedText = '';
+
+    manualIndex: number | null = null;
+
+    updateAutocomplete(code:InputEvent) {
+      // Converts 1-based index to 0-based index
+      const cursor = this.$refs.textarea.selectionStart - 1;
+      const word = this.wordAt(cursor);
+      if (word.startsWith('@')) { // If it's a username
+        if (code.data === null) { // If the user hit backspace
+          const text = this.value;
+          // Replace the autocompleted text with an empty string
+          const idx = text.lastIndexOf(this.autocompletedText);
+          const l = this.autocompletedText.length;
+          // Removes last instance of autompletedText
+          this.value = `${text.slice(0, idx)}${text.slice(0, -idx - l)}`;
+          this.autocompletedText = '';
+          this.manualIndex = cursor - word.length + 1; // Makes sure it won't be autocorrected again
+          return;
+        }
+        const name = word.substring(1);
+        const users = Object.values(this.$vxm.chat.connectedUsers) as User[];
+        const autocompleteUsers = users.filter(e => e.username.startsWith(name));
+        // If there's only one possibility and it should be autocorrected
+        if (autocompleteUsers.length === 1 && cursor - word.length + 1 !== this.manualIndex) {
+          let { username } = autocompleteUsers[0];
+          username = username.replace(name, '');
+          this.insertString(cursor + 1, `${username} `);
+          this.autocompletedText = `${username}`;
+        }
+      }
+      if (!this.value.includes('@')) { // If there aren't any usernames, reset
+        this.manualIndex = null;
+        this.autocompletedText = '';
+      }
+    }
+
+    // Finds the word (not character) at an index
+    wordAt(pos: number) {
+    const str = this.value;
+    const left = str.slice(0, pos + 1).search(/\S+$/);
+    const right = str.slice(pos).search(/\s/);
+    if (right < 0) {
+        return str.slice(left);
+    }
+    return str.slice(left, right + pos);
+}
   }
 </script>
 
diff --git a/todo.md b/todo.md
index 31159e66..f25b60c0 100644
--- a/todo.md
+++ b/todo.md
@@ -2,7 +2,6 @@
 
 ## Todo
 ----
-Autocomplete for usernames?
 
 ## Finished
 ---
@@ -39,6 +38,7 @@ Autocomplete for usernames?
 ### Miscellaneous
   - Clicking a channel name in a chat message opens the channel
   - Clicking a username brings up the tooltip
+  - Autocomplete for usernames
 
 ### Reconnect button
   - Style to align with theme

From f151ffb186a4e792f4979a0c28d9193c9c37f7a1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 15:19:32 -0500
Subject: [PATCH 125/223] Encryption for oper login

---
 package-lock.json | 10 ++++++++++
 package.json      |  2 ++
 src/app/App.vue   |  7 +++++--
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 05380415..8edff442 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4063,6 +4063,11 @@
         "@types/mime": "*"
       }
     },
+    "@types/sjcl": {
+      "version": "1.0.29",
+      "resolved": "https://registry.npmjs.org/@types/sjcl/-/sjcl-1.0.29.tgz",
+      "integrity": "sha512-gP9M7Oq4xAoDpuueWHeOTasccV4K6iFBEBPbR0tXejKT/e/Gkla0XcJ9REmgSCICt6y8/ubcvXFtiZ4ZLQ6BKA=="
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -21639,6 +21644,11 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "dev": true
     },
+    "sjcl": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/sjcl/-/sjcl-1.0.8.tgz",
+      "integrity": "sha512-LzIjEQ0S0DpIgnxMEayM1rq9aGwGRG4OnZhCdjx7glTaJtf4zRfpg87ImfjSJjoW9vKpagd82McDOwbRT5kQKQ=="
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/package.json b/package.json
index 17f5de7d..d751174f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@types/irc": "^0.3.33",
     "@types/node": "^14.0.13",
     "@types/punycode": "^2.1.0",
+    "@types/sjcl": "^1.0.29",
     "@types/vue-clickaway": "^2.2.0",
     "@types/vuedraggable": "^2.23.1",
     "axios": "^0.19.2",
@@ -28,6 +29,7 @@
     "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
     "markdown-it": "^11.0.0",
+    "sjcl": "^1.0.8",
     "stream": "0.0.2",
     "sysend": "^1.3.3",
     "to-bool": "0.0.1",
diff --git a/src/app/App.vue b/src/app/App.vue
index 7f67f4f3..4961bbaa 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -53,6 +53,7 @@
   } from 'vue-property-decorator';
   import resize from 'vue-resize-directive';
   import BootstrapVue from 'bootstrap-vue';
+  import sjcl from 'sjcl';
   import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
@@ -169,7 +170,8 @@
     this.$vxm.chat.operLoginUser = username; // Sets creds used for authentification by chat.vuex
     this.$vxm.chat.operLoginPassword = password;
     if (remember) { // Store values
-      localStorage.operPass = password;
+      // Encrypt password
+      localStorage.operPass = JSON.stringify(sjcl.encrypt('password', password));
       localStorage.operUser = username;
     }
     this.$vxm.chat.operCommand(); // Set all nicks as opers
@@ -206,8 +208,9 @@
    * Logs the user in as an operator
    */
   async logInOper() {
-    const pass = localStorage.operPass;
+    let pass = JSON.parse(localStorage.operPass);
     const user = localStorage.operUser;
+    pass = sjcl.decrypt('password', pass); // Decrypt password
     if (user && pass) {
       this.$vxm.chat.operLoginPassword = pass; // Log in
       this.$vxm.chat.operLoginUser = user;

From 5f8c5c576cbbb72369868fa863562dc230a4df70 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 17:09:52 -0500
Subject: [PATCH 126/223] Markdown quotes

---
 src/app/components/Messages/UserMessage.vue | 13 +++++++++++++
 src/app/shims-vue.d.ts                      |  3 ++-
 src/app/store/chat.vuex.ts                  |  8 ++++++--
 src/app/tools/Markdown.ts                   |  5 +++++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 482c02d0..5cd1f53f 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -266,4 +266,17 @@
     color:#c0dce7;
     position:relative;
   }
+  blockquote {
+    font-weight: bolder;
+    display:inline;
+  }
+  blockquote::before {
+    content: "";
+    margin-right:2px;
+    border:none;
+    border-right:5px solid gray;
+    border-radius:5px;
+    width:5px;
+    height:inherit;
+  }
 </style>
diff --git a/src/app/shims-vue.d.ts b/src/app/shims-vue.d.ts
index 24666fb8..77127c36 100644
--- a/src/app/shims-vue.d.ts
+++ b/src/app/shims-vue.d.ts
@@ -4,9 +4,10 @@ declare module '*.vue' {
   export default Vue;
 }
 
-// TS wasn't recognizing my attempts to declare these in their own files
+// TS wasn't recognizing attempts to declare these in their own files
 declare module 'vue-resize-directive';
 declare module '@cloudcmd/clipboard';
 declare class clipboard {
   writeText(value:string): void;
 }
+declare module 'sjcl';
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index d0dd92a9..edd8f71d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1525,7 +1525,9 @@ export default class ChatModule extends VuexModule {
    */
   @action()
   async setAway() {
-    this.currentUser.away = true;
+    if (this.currentUser) {
+      this.currentUser.away = true;
+    }
     this.connectedUsers[this.currentUser.username]!.away = true;
     this.client?.raw('AWAY User is currently away');
   }
@@ -1535,7 +1537,9 @@ export default class ChatModule extends VuexModule {
    */
   @action()
   async setUnaway() {
-    this.currentUser.away = false;
+    if (this.currentUser) {
+      this.currentUser.away = false;
+    }
     this.connectedUsers[this.currentUser.username]!.away = false;
     this.client?.raw('AWAY');
   }
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 2cf14ba6..429c57d8 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -58,6 +58,11 @@ md.renderer.rules.text = function link(tokens, idx, options, env, self) {
     content = content.replace(user[0], `<mark class="user-link" style="cursor:pointer">${user[0]}</mark>`);
     return content;
   }
+  // Quotes
+  if (tokens[idx].content.match(/^> .+/)) {
+    const { content } = tokens[idx];
+    return `<blockquote>"${content.replace(/> ?/, '')}"</blockquote>`;
+  }
   return defaultRender(tokens, idx, options, env, self);
 };
 

From c4a957b7745f9ea326fd22678561c1e85ecc0ee8 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 21:23:47 -0500
Subject: [PATCH 127/223] Bug fixes, redid markdown toolbar buttons

---
 src/app/App.vue                               | 18 +++++-----
 src/app/components/Emoticons/EmoticonBar.vue  |  2 +-
 .../components/Emoticons/EmoticonButton.vue   |  2 +-
 .../Emoticons/MarkdownWrapButton.vue          | 36 ++++++++++++++-----
 src/app/components/Panes/MessagePane.vue      |  1 +
 src/app/store/chat.vuex.ts                    |  8 +++--
 6 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 4961bbaa..a2d3c386 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -208,14 +208,16 @@
    * Logs the user in as an operator
    */
   async logInOper() {
-    let pass = JSON.parse(localStorage.operPass);
-    const user = localStorage.operUser;
-    pass = sjcl.decrypt('password', pass); // Decrypt password
-    if (user && pass) {
-      this.$vxm.chat.operLoginPassword = pass; // Log in
-      this.$vxm.chat.operLoginUser = user;
-      this.$vxm.chat.operCommand();
-      setTimeout(this.operLoginStatus, 150);
+    if (localStorage && localStorage.operUser && localStorage.operPass) {
+      let pass = JSON.parse(localStorage.operPass);
+      const user = localStorage.operUser;
+      pass = sjcl.decrypt('password', pass); // Decrypt password
+      if (user && pass) {
+        this.$vxm.chat.operLoginPassword = pass; // Log in
+        this.$vxm.chat.operLoginUser = user;
+        this.$vxm.chat.operCommand();
+        setTimeout(this.operLoginStatus, 150);
+      }
     }
   }
 
diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Emoticons/EmoticonBar.vue
index 8159873f..2c251818 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Emoticons/EmoticonBar.vue
@@ -85,7 +85,7 @@
 
     // Markdown button
 
-    markdownCodes = ['bold', 'italics', 'italicsbold', 'strikethrough', 'code', 'link', 'action'];
+    markdownCodes = ['bold', 'italics', 'italicsbold', 'strikethrough', 'code', 'link', 'action', 'quote'];
 
     // Submenu selection
 
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Emoticons/EmoticonButton.vue
index d83e9d66..397dab0d 100644
--- a/src/app/components/Emoticons/EmoticonButton.vue
+++ b/src/app/components/Emoticons/EmoticonButton.vue
@@ -27,7 +27,7 @@
     padding-top:2px;
     text-align:center;
   }
-  #emoticon-button-container :hover {
+  #emoticon-button-container:hover {
     background-color: #21508c;
   }
   #emoticon-text-container {
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index d9e9b986..ce101c9a 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -1,13 +1,6 @@
 <template>
   <button id='md-wrap-button-container' class='md-button' @click="clicked">
-    <strong class="text" v-if="typeIs('bold')">B</strong>
-    <em class="text" v-if="typeIs('italics')">T</em>
-    <span class="text" id="s" v-if="typeIs('strikethrough')">S</span>
-    <code class="text" v-if="typeIs('code')">C</code>
-    <u class="text" v-if="typeIs('link')">L</u>
-    <strong class="text" id="action" v-if="typeIs('action')"><em>me</em></strong>
-    <span class="text" v-if="typeIs('question')">?</span>
-    <em class="text" v-if="typeIs('italicsbold')"><strong>E</strong></em>
+    <span class="text" :style="style">{{buttonLetter}}</span>
   </button>
 </template>
 <script lang='ts'>
@@ -18,7 +11,32 @@
     type !: string;
 
     typeIs(type:string) {
-      return this.type === type;
+      return this.type.includes(type);
+    }
+
+    get buttonLetter() {
+      switch (this.type) {
+        case 'italics': return 'T';
+        case 'action': return 'me';
+        case 'question': return '?';
+        case 'italicsbold': return 'E';
+        case 'quote': return '""';
+        default: return this.type.substring(0, 1).toUpperCase();
+      }
+    }
+
+    get style() {
+      const bold = this.typeIs('bold') || this.typeIs('action');
+      const italics = this.typeIs('italics') || this.typeIs('action');
+      const strikethrough = this.typeIs('strikethrough');
+      const code = this.typeIs('code');
+      const link = this.typeIs('link');
+      return {
+        'font-weight': bold ? 'bold' : '',
+        'font-style': italics ? 'italic' : '',
+        'text-decoration': `${strikethrough ? 'line-through' : ''} ${link ? 'underline' : ''}`,
+        'font-family': code ? 'monospace' : '',
+      };
     }
 
     clicked() {
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 080f68dc..44bc4d04 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -144,6 +144,7 @@
         case 'code': this.$refs.input.wrapOrInsert('`', true); break;
         case 'link': this.$refs.input.insertLink(); break;
         case 'action': this.$refs.input.insertString(0, '/me '); break;
+        case 'quote': this.$refs.input.insertString(0, '> '); break;
         case 'question': this.$emit('postMessage', '/help'); break;
         default: break;
       }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index edd8f71d..ba860f0c 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1528,7 +1528,9 @@ export default class ChatModule extends VuexModule {
     if (this.currentUser) {
       this.currentUser.away = true;
     }
-    this.connectedUsers[this.currentUser.username]!.away = true;
+    if (this.connectedUsers[this.currentUser.username]) {
+      this.connectedUsers[this.currentUser.username]!.away = true;
+    }
     this.client?.raw('AWAY User is currently away');
   }
 
@@ -1540,7 +1542,9 @@ export default class ChatModule extends VuexModule {
     if (this.currentUser) {
       this.currentUser.away = false;
     }
-    this.connectedUsers[this.currentUser.username]!.away = false;
+    if (this.connectedUsers[this.currentUser.username]) {
+      this.connectedUsers[this.currentUser.username]!.away = false;
+    }
     this.client?.raw('AWAY');
   }
 

From 41ffbf6ac7dfd0b41f9ff3091563d90d81b7c013 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 21:34:50 -0500
Subject: [PATCH 128/223] Minor style updates

---
 src/app/App.vue                             | 3 +++
 src/app/components/Messages/UserMessage.vue | 3 +++
 src/app/components/MinimizationTriangle.vue | 4 ++++
 src/app/components/OpenWindowButton.vue     | 3 +++
 4 files changed, 13 insertions(+)

diff --git a/src/app/App.vue b/src/app/App.vue
index a2d3c386..9437bfea 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -508,4 +508,7 @@
   background-size: 100% 100%;
   pointer-events:none; /* Clicks and drags go down to the resizer */
 }
+.resize-handle:hover {
+  cursor:se-resize;
+}
 </style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 5cd1f53f..bec370e5 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -279,4 +279,7 @@
     width:5px;
     height:inherit;
   }
+  mark:hover {
+    color:white;
+  }
 </style>
diff --git a/src/app/components/MinimizationTriangle.vue b/src/app/components/MinimizationTriangle.vue
index 6a37326a..e8b9ec0d 100644
--- a/src/app/components/MinimizationTriangle.vue
+++ b/src/app/components/MinimizationTriangle.vue
@@ -54,4 +54,8 @@
     -webkit-transform: rotate(90deg);
     transition: transform 0.2s;
   }
+
+  .minimization-triangle:hover {
+    cursor: pointer;
+  }
 </style>
diff --git a/src/app/components/OpenWindowButton.vue b/src/app/components/OpenWindowButton.vue
index 52efb3d3..6eb5a228 100644
--- a/src/app/components/OpenWindowButton.vue
+++ b/src/app/components/OpenWindowButton.vue
@@ -28,4 +28,7 @@
     height: 34px;
     width: 35px;
   }
+  .open-window:hover {
+    cursor: pointer;
+  }
 </style>

From e1f98ad5b83f22d50f521840b7b5132950f74e8f Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 21:42:55 -0500
Subject: [PATCH 129/223] Username in chat message opens profile on click

---
 src/app/components/Messages/UserMessage.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index bec370e5..99583217 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -152,6 +152,13 @@
           this.tooltipX = ev.clientX;
           this.tooltipY = ev.clientY;
         });
+        // Opens player profile on click
+        l.addEventListener('click', () => {
+          const username = l.innerHTML.substring(1);
+          const user = this.$vxm.chat.connectedUsers[username];
+          if (!user) return;
+          window.open(`https://${this.$vxm.chat.workbranch}/web/player/${user.uid}/`);
+        });
       });
     }
 

From 95c554cdda64806281b05270aea701d059f735eb Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 19 Jun 2020 22:00:24 -0500
Subject: [PATCH 130/223] Autoscroll fixes

---
 src/app/components/Messages/Username.vue | 6 +-----
 src/app/components/Panes/MessagePane.vue | 2 ++
 src/app/components/Panes/Pane.vue        | 3 +++
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index b903cca5..c0c3b393 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -62,11 +62,7 @@
     private defaultColor = '#ffffff';
 
     get computedColor() {
-      let numUid = parseInt(this.user.uid, 10);
-      /* Temporary, for compatibility with current chat */
-      if (!numUid) { // If uid isn't present, check the end of the username
-        numUid = parseInt(this.user.username.substring(this.user.username.lastIndexOf('_') + 1), 10);
-      }
+      const numUid = parseInt(this.user.uid, 10);
       if (!numUid && numUid !== 0) {
         return '#ffffff';
       }
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 44bc4d04..7ac5be41 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -132,6 +132,7 @@
       this.$emit('postMessage', this.newMessage);
       this.newMessage = '';
       this.$refs.input.$refs.textarea.value = '';
+      this.scrollDown();
     }
 
     format(options:string) {
@@ -168,6 +169,7 @@
         this.$refs.input.value = '';
         this.newMessage = '';
         e.preventDefault();
+        this.scrollDown();
       }
     }
 
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index d98e31d6..1855fb97 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -74,6 +74,9 @@
         this.$nextTick(() => {
           this.container!.scrollTop = this.container!.scrollHeight;
         });
+        console.log('autoscroll');
+      } else {
+        console.log('not autoscroll');
       }
     }
 

From f8242c2d8552b89c49e45ca85558adec07922aa6 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 20 Jun 2020 23:09:42 -0500
Subject: [PATCH 131/223] Made settings sections into component, bug fixes

---
 .../Emoticons/MarkdownWrapButton.vue          |  16 +--
 src/app/components/Messages/Username.vue      |   4 +-
 src/app/components/Panes/Pane.vue             |   3 -
 .../Slideout/Settings/SettingsSection.vue     |  94 ++++++++++++++
 .../Slideout/Settings/SlideoutSettings.vue    | 120 ++++--------------
 5 files changed, 128 insertions(+), 109 deletions(-)
 create mode 100644 src/app/components/Slideout/Settings/SettingsSection.vue

diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Emoticons/MarkdownWrapButton.vue
index ce101c9a..af581c3d 100644
--- a/src/app/components/Emoticons/MarkdownWrapButton.vue
+++ b/src/app/components/Emoticons/MarkdownWrapButton.vue
@@ -1,6 +1,10 @@
 <template>
   <button id='md-wrap-button-container' class='md-button' @click="clicked">
-    <span class="text" :style="style">{{buttonLetter}}</span>
+    <span
+      class="text"
+      :id="typeIs('strikethrough') ? 's' : ''"
+      :style="style">{{buttonLetter}}
+    </span>
   </button>
 </template>
 <script lang='ts'>
@@ -10,7 +14,7 @@
     @Prop()
     type !: string;
 
-    typeIs(type:string) {
+    typeIs(type:string):boolean {
       return this.type.includes(type);
     }
 
@@ -74,12 +78,6 @@
 
   #s:before,
   #s:after {
-    content: "\00a0\00a0";
-  }
-
-  #action {
-    font-size:12px;
-    padding-left:1px;
-    vertical-align:text-bottom;
+    content: "-";
   }
 </style>
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index c0c3b393..241dacee 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -8,7 +8,7 @@
       :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
       @mouseover="hovered = true /* Shows and hides tooltip */"
       @mouseout="hovered = false"
-      @mousemove="updatecoords"
+      @mousemove="updateTooltipCoordinates"
     >
       <span
         class="away-indicator"
@@ -54,7 +54,7 @@
 
     left = 0;
 
-    updatecoords(e:MouseEvent) {
+    updateTooltipCoordinates(e:MouseEvent) {
       this.top = e.clientY;
       this.left = e.clientX;
     }
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 1855fb97..d98e31d6 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -74,9 +74,6 @@
         this.$nextTick(() => {
           this.container!.scrollTop = this.container!.scrollHeight;
         });
-        console.log('autoscroll');
-      } else {
-        console.log('not autoscroll');
       }
     }
 
diff --git a/src/app/components/Slideout/Settings/SettingsSection.vue b/src/app/components/Slideout/Settings/SettingsSection.vue
new file mode 100644
index 00000000..b56d06a7
--- /dev/null
+++ b/src/app/components/Slideout/Settings/SettingsSection.vue
@@ -0,0 +1,94 @@
+<template>
+  <section>
+      <li class="settings-section-header">
+      <h5 class="heading" >{{title}}</h5>
+      <MinimizationTriangle
+        style="display:inline-block"
+        settings="true"
+        @input="update($event)"
+        v-model="open" />
+      </li>
+      <transition name="settings-slide">
+      <div v-show="!open" class="settings-content-container">
+        <slot></slot>
+      </div>
+      </transition>
+  </section>
+</template>
+
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import MinimizationTriangle from '../../MinimizationTriangle.vue';
+
+  @Component({
+    components: {
+      MinimizationTriangle,
+    },
+  })
+  export default class SettingsSection extends Vue {
+    open = false;
+
+    @Prop()
+    title !: string;
+
+    mounted() {
+      if (localStorage && localStorage.openMenus) {
+        const menus = JSON.parse(localStorage.openMenus);
+        if (menus[this.title] !== undefined) {
+          this.open = menus[this.title];
+        }
+      }
+    }
+
+    // Updates self and localStorage when shown/hidden
+    update(newValue: boolean) {
+      this.open = newValue; // Update self
+      const { title } = this;
+      if (localStorage) {
+        let menus: any = {};
+        if (localStorage.openMenus) { // If the object exists, modify it
+          menus = JSON.parse(localStorage.openMenus);
+        }
+        menus[title] = newValue;
+        localStorage.openMenus = JSON.stringify(menus); // Update localStorage
+      }
+    }
+  }
+</script>
+<style scoped>
+section { /* 'Block' of settings */
+  margin-bottom:5px;
+  position: relative;
+}
+.settings-slide-enter-active {
+  transition: max-height 0.2s cubic-bezier(1,0,1,0);
+  max-height:1000px;
+}
+.settings-slide-leave-active {
+  transition: max-height 0.2s cubic-bezier(0,1,0,1);
+  max-height:1000px;
+}
+.settings-slide-enter, .settings-slide-leave-to {
+  max-height:0;
+}
+.settings-content-container {
+  overflow:hidden;
+}
+li {
+  list-style-type: none;
+}
+.minimization-triangle {
+  height:30px;
+  width:30px;
+  position:absolute;
+  right:10px;
+  top:0px;
+}
+.heading {
+  display:inline-block;
+  margin:4px;
+  margin-left:0;
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index 6b00973c..3c9299a5 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -1,33 +1,15 @@
 <template>
   <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
-    <section>
-      <h5 class="heading" >Text Size</h5>
-      <MinimizationTriangle
-        style="display:inline-block"
-        settings="true"
-        @input="menusChanged"
-        v-model="openMenus.textSize" />
-      <transition name="settings-slide">
-      <div v-show="!openMenus.textSize" class="settings-content-container">
-        <input v-model="size" type=number min=10 max=18>
+    <SettingsSection title="Text Size" >
+      <input v-model="size" type=number min=10 max=18>
         <p id='font-size-p'>Default is 14</p>
         <p
           id='font-warning'
           v-show="size < 10 || size > 18" >
           Font size must be a number, greater than 10, and less than 18
         </p>
-      </div>
-      </transition>
-    </section>
-    <section>
-      <h5 class="heading" >Ignored</h5>
-      <MinimizationTriangle
-        style="display:inline-block"
-        settings="true"
-        @input="menusChanged"
-        v-model="openMenus.ignored" />
-      <transition name="settings-slide">
-      <div v-show="!openMenus.ignored" class="settings-content-container">
+    </SettingsSection>
+    <SettingsSection title="Ignored" >
       <table style="width:175px" >
         <tr v-for="user in ignoredUsers" :key="user.Username">
           <button
@@ -49,19 +31,9 @@
           Unignore All
         </button></tr>
       </table>
-      </div>
-      </transition>
-    </section>
-    <section>
-      <h5 class="heading" >Notifications</h5>
-      <MinimizationTriangle
-        style="display:inline-block"
-        settings="true"
-        @input="menusChanged"
-        v-model="openMenus.notifications" />
-      <transition name="settings-slide">
-      <div v-show="!openMenus.notifications" class="settings-content-container">
-        <h6>Ignored</h6>
+    </SettingsSection>
+    <SettingsSection title="Notifications" >
+      <h6>Ignored</h6>
         <table>
           <tr v-for="channel in channels" :key="channel.name">
             <td>{{channel.name}}</td>
@@ -115,30 +87,12 @@
           If you have multiple keywords, separate them with commas.
           Your username is automatically a keyword.
         </p>
-      </div>
-      </transition>
-    </section>
-    <section>
-      <h5 class="heading" >Username Color</h5>
-      <MinimizationTriangle
-        style="display:inline-block"
-        settings="true"
-        @input="menusChanged"
-        v-model="openMenus.color" />
-      <transition name="settings-slide">
-      <ColorPicker v-show="!openMenus.color" class="settings-content-container" />
-      </transition>
-    </section>
-    <section>
-      <h5 class="heading" >Toolbar Features</h5>
-      <MinimizationTriangle
-        style="display:inline-block"
-        settings="true"
-        @input="menusChanged"
-        v-model="openMenus.toolbar" />
-      <transition name="settings-slide">
-      <div v-show="!openMenus.toolbar" class="settings-content-container">
-        <p>
+    </SettingsSection>
+    <SettingsSection title="Username Color" >
+      <ColorPicker/>
+    </SettingsSection>
+    <SettingsSection title="Toolbar Features" >
+       <p>
           These enable you to send emoticons and formatted text.
         </p>
         <table>
@@ -192,39 +146,15 @@
           </tbody>
           <tfoot><tr><td colspan=2 class="warning">{{emoticonErrorMessage}}</td></tr></tfoot>
         </table>
-      </div>
-      </transition>
-    </section>
-    <section>
-      <li class="settings-section-header">
-      <h5 class="heading">Status</h5>
-      <MinimizationTriangle
-        style="display:inline-block"
-        settings="true"
-        @input="menusChanged"
-        v-model="openMenus.status" />
-      </li>
-      <transition name="settings-slide">
-      <div v-show="!openMenus.status" class="settings-content-container">
-        <p>You are currently marked as {{userStatus ? 'away' : 'online'}}</p>
-        <button class="btn settings-button" @click="changeStatus(!userStatus)">
-          Toggle
-        </button>
-      </div>
-      </transition>
-    </section>
-    <section>
-      <li class="settings-section-header">
-      <h5 class="heading" >Operator</h5>
-      <MinimizationTriangle
-        style="display:inline-block"
-        settings="true"
-        @input="menusChanged"
-        v-model="openMenus.oper" />
-      </li>
-      <transition name="settings-slide">
-      <div v-show="!openMenus.oper" class="settings-content-container">
-        <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
+    </SettingsSection>
+    <SettingsSection title="Status" >
+      <p>You are currently marked as {{userStatus ? 'away' : 'online'}}</p>
+      <button class="btn settings-button" @click="changeStatus(!userStatus)">
+        Toggle
+      </button>
+    </SettingsSection>
+    <SettingsSection title="Operator" >
+      <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
         <button
           @click="$emit('auth')"
           :style="{ fontSize:`${fontSize * 11 / 14}px` }"
@@ -234,9 +164,7 @@
         </button>
         <h6 v-show="isOper">Change nick</h6>
         <input v-show="isOper" @input="setNick" :value="opernick">
-      </div>
-      </transition>
-    </section>
+    </SettingsSection>
   </div>
 </template>
 <script lang="ts">
@@ -251,6 +179,7 @@
   import { Channel } from '@/store/chat.vuex';
   import ColorPicker from './ColorPicker/ColorPicker.vue';
   import MinimizationTriangle from '../../MinimizationTriangle.vue';
+  import SettingsSection from './SettingsSection.vue';
 
   Vue.use(BootstrapVue);
 
@@ -260,6 +189,7 @@
       ConnectButton,
       ColorPicker,
       MinimizationTriangle,
+      SettingsSection,
     },
   })
   export default class SlideoutSettings extends Vue {

From f560c584d7df2b7856f0a4f25935c99491a59bc1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 21 Jun 2020 14:59:49 -0500
Subject: [PATCH 132/223] Made SlideoutSettings sections  components

---
 .../Settings/Sections/IgnoredSection.vue      |  60 ++
 .../Sections/NotificationsSection.vue         | 195 ++++++
 .../Settings/Sections/OperSection.vue         |  65 ++
 .../Settings/Sections/StatusSection.vue       |  42 ++
 .../Settings/Sections/TextSizeSection.vue     |  71 ++
 .../Settings/Sections/ToolbarSection.vue      | 216 ++++++
 .../Sections/UsernameColorSection.vue         |  21 +
 .../Slideout/Settings/SlideoutSettings.vue    | 621 +-----------------
 8 files changed, 692 insertions(+), 599 deletions(-)
 create mode 100644 src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
 create mode 100644 src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
 create mode 100644 src/app/components/Slideout/Settings/Sections/OperSection.vue
 create mode 100644 src/app/components/Slideout/Settings/Sections/StatusSection.vue
 create mode 100644 src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
 create mode 100644 src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
 create mode 100644 src/app/components/Slideout/Settings/Sections/UsernameColorSection.vue

diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
new file mode 100644
index 00000000..c785b558
--- /dev/null
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -0,0 +1,60 @@
+<template>
+  <SettingsSection title="Ignored" >
+      <table style="width:175px" >
+        <tr v-for="user in ignoredUsers" :key="user.Username">
+          <button
+            :style="{ fontSize:`${11 / 14}rem` }"
+            style="right:0; width:150px;"
+            class='unignore-user btn settings-button'
+            v-on:click="unignore(user)" >
+            Unignore {{user}}
+          </button>
+        </tr>
+        <tr v-show="!anyIgnoredUsers">No users ignored</tr>
+        <tr><button
+          :style="{ fontSize:`${11 / 14}rem` }"
+          style="margin-top:5px; width:150px"
+          class='unignore-user btn settings-button'
+          v-on:click="unignore('*')"
+          v-show="anyIgnoredUsers"
+        >
+          Unignore All
+        </button></tr>
+      </table>
+    </SettingsSection>
+</template>
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import SettingsSection from '../SettingsSection.vue';
+
+  @Component({
+    components: {
+      SettingsSection,
+    },
+  })
+  export default class IgnoredSection extends Vue {
+    get ignoredUsers() {
+      return this.$vxm.chat.ignoredUsers;
+    }
+
+    // If any users are ignored. Uses ignoredUsers.length
+    get anyIgnoredUsers() {
+      return this.ignoredUsers.length > 0;
+    }
+
+    // Unignore user on list
+    unignore(user:string) {
+      this.$vxm.chat.unignoreUser(user);
+    }
+  }
+</script>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+.settings-button {
+  background-color:$green;
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
new file mode 100644
index 00000000..fd977e73
--- /dev/null
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -0,0 +1,195 @@
+<template>
+  <SettingsSection title="Notifications" >
+    <h6>Ignored</h6>
+        <table>
+          <tr v-for="channel in channels" :key="channel.name">
+            <td>{{channel.name}}</td>
+            <td>
+              <button
+                style="width:100%"
+                @click="toggleNotificationsEnabled(channel.name)"
+                :style="{ fontSize:`${11 / 14}rem` }"
+                class="btn settings-button"
+              >
+                {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
+              </button>
+            </td>
+          </tr>
+          <tr>
+            <td class='footer'>
+              <button
+                style="width:100%"
+                :disabled="anyNotificationsDisabled"
+                @click="enableAll"
+                :style="{ fontSize:`${11 / 14}rem` }"
+                class="btn settings-button"
+              >
+                Enable all
+              </button>
+            </td>
+            <td class='footer'>
+              <button
+                style="width:100%"
+                :disabled="anyNotificationsEnabled"
+                @click="disableAll"
+                :style="{ fontSize:`${11 / 14}rem` }"
+                class="btn settings-button"
+              >
+                Disable all
+              </button>
+            </td>
+          </tr>
+        </table>
+        <h6>Indicator</h6>
+        <p>
+          This will appear in the page title if you have notifications
+        </p>
+        <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
+        <h6>Keywords</h6>
+        <p>
+          If these keywords are used in the chat, they will trigger notifications
+        </p>
+        <textarea type=text v-model="keywords" style="font-size:1rem; padding:1px;" />
+        <p>
+          If you have multiple keywords, separate them with commas.
+          Your username is automatically a keyword.
+        </p>
+  </SettingsSection>
+</template>
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import SettingsSection from '../SettingsSection.vue';
+  import { Channel } from '@/store/chat.vuex';
+
+  @Component({
+    components: {
+      SettingsSection,
+    },
+  })
+  export default class NotificationsSection extends Vue {
+    keywords = '';
+
+    @Watch('keywords')
+    keywordsChanged() {
+      const keywordsArray = this.keywords.split(/, ?/);
+      if (keywordsArray[0] === '') {
+        return;
+      }
+      if (localStorage) {
+        localStorage.notificationsKeywords = JSON.stringify(keywordsArray);
+      }
+    }
+
+    // Toggle whether notifications are enabled for a specific channel
+    toggleNotificationsEnabled(channel:string) {
+      const trueChannel = this.$vxm.chat.channels[channel];
+      if (trueChannel) {
+        trueChannel.notificationsEnabled = !trueChannel.notificationsEnabled;
+        if (!trueChannel.notificationsEnabled) {
+          trueChannel.notifications = false;
+        }
+      }
+      this.$vxm.chat.ignoredChannels[channel] = (trueChannel as Channel).notificationsEnabled;
+      if (localStorage && this.$vxm.chat.ignoredChannels) {
+        localStorage.ignoredChannels = JSON.stringify(this.$vxm.chat.ignoredChannels);
+      }
+    }
+
+    // If any notifications are enabled
+    get anyNotificationsEnabled() {
+      // Iterates through each channel and checks if notifications are enabled
+      return !Object.values(this.channels).some(item => {
+        // Making sure nothing is undefined and gets value from channel
+        const { notificationsEnabled } = item as Channel;
+        return notificationsEnabled;
+      });
+    }
+
+    // If any notifications are disabled
+    get anyNotificationsDisabled() {
+      // Again, iterating through each channel
+      return !Object.values(this.channels).some(item => {
+        // Making sure nothing is undefined and gets value from channel
+        const { notificationsEnabled } = item as Channel;
+        return !notificationsEnabled;
+      });
+    }
+
+    // Enables notifications for all channels
+    enableAll() {
+      // For each channel
+      Object.values(this.channels).forEach(item => {
+        // If notifications aren't enabled, toggle their value. If they are, leave them alone
+        if (!(item as Channel).notificationsEnabled) {
+          this.toggleNotificationsEnabled((item as Channel).name);
+        }
+      });
+    }
+
+    // Disables notifications for all channels
+    disableAll() {
+      // For each channel
+      Object.values(this.channels).forEach(item => {
+        // If notifications are enabled, toggle their value. If they aren't, leave them alone
+        if ((item as Channel).notificationsEnabled) {
+          this.toggleNotificationsEnabled((item as Channel).name);
+        }
+      });
+    }
+
+    // Return list of channels
+    get channels() {
+      return this.$vxm.chat.channels;
+    }
+
+    indicator:string = '(!)';
+
+
+    @Watch('indicator')
+    indicatorChanged() {
+      if (localStorage) {
+        localStorage.indicator = JSON.stringify(this.indicator);
+      }
+      this.$vxm.settings.indicator = this.indicator;
+    }
+
+    created() {
+      if (localStorage.notificationsKeywords) {
+        this.keywords = JSON.parse(localStorage.notificationsKeywords).join(', ');
+      } else if (this.$vxm.chat.notificationsKeywords) {
+        this.keywords = this.$vxm.chat.notificationsKeywords.join(', ');
+      } else {
+        this.keywords = '';
+      }
+      if (localStorage.indicator) {
+        this.indicator = JSON.parse(localStorage.indicator);
+      } else {
+        this.indicator = this.$vxm.settings.indicator;
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+.settings-button {
+  background-color:$green;
+}
+td { /* Table cell in notifications settings section */
+  padding:4px;
+  width:max-content;
+}
+.footer { /* Enable and disable notifications buttons */
+  border:none;
+}
+table {
+  margin-top:2px;
+  margin-bottom:2px;
+}
+.feature-button-container {
+  padding:2px;
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
new file mode 100644
index 00000000..f66cb2f1
--- /dev/null
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -0,0 +1,65 @@
+<template>
+  <SettingsSection title="Operator" >
+    <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
+        <button
+          @click="$emit('auth')"
+          :style="{ fontSize:`${11 / 14}rem` }"
+          class="btn settings-button"
+          v-show="!isOper" >
+            Log in as operator
+        </button>
+        <h6 v-show="isOper">Change nick</h6>
+        <input v-show="isOper" @input="setNick" :value="opernick">
+  </SettingsSection>
+</template>
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import SettingsSection from '../SettingsSection.vue';
+
+  @Component({
+    components: {
+      SettingsSection,
+    },
+  })
+  export default class OperSection extends Vue {
+    validateNick(nick:string) {
+      // eslint-disable-next-line no-useless-escape
+      return nick.match(/^[a-z_\-\[\]\\^{}|`][a-z0-9_\-\[\]\\^{}|`]*$/i);
+    }
+
+    setNick(e:Event) {
+      const { value } = e.target as HTMLInputElement;
+      if (!this.validateNick(value)) return;
+      this.$vxm.chat.changeNick(value);
+    }
+
+    opernick = '';
+
+    get isOper() {
+      return this.$vxm.chat.oper;
+    }
+
+    created() {
+      if (localStorage.nick) {
+        this.opernick = localStorage.nick;
+      } else {
+        this.opernick = this.$vxm.chat.customNick;
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+.settings-button {
+  background-color:$green;
+}
+input {
+  margin:2px;
+  width:calc(100% - 23px); /* Accounts for padding on both sides */
+  max-width:150px; /* Big screens don't have arbitrarily large input */
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
new file mode 100644
index 00000000..8077a08d
--- /dev/null
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -0,0 +1,42 @@
+<template>
+  <SettingsSection title="Status" >
+    <p>You are currently marked as {{userStatus ? 'away' : 'online'}}</p>
+      <button class="btn settings-button" @click="changeStatus(!userStatus)">
+        Toggle
+      </button>
+  </SettingsSection>
+</template>
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import SettingsSection from '../SettingsSection.vue';
+
+  @Component({
+    components: {
+      SettingsSection,
+    },
+  })
+  export default class StatusSection extends Vue {
+    changeStatus(to:boolean) {
+      this.$vxm.chat.autoUpdateStatus = !to;
+      if (!to) {
+        this.$vxm.chat.setUnaway();
+      } else {
+        this.$vxm.chat.setAway();
+      }
+    }
+
+    get userStatus() {
+      return this.$vxm.chat.userStatus;
+    }
+  }
+</script>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+.settings-button {
+  background-color:$green;
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
new file mode 100644
index 00000000..4735e1c2
--- /dev/null
+++ b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
@@ -0,0 +1,71 @@
+<template>
+  <SettingsSection title="Text Size" >
+      <input v-model="size" type=number min=10 max=18>
+        <p id='font-size-p'>Default is 14</p>
+        <p
+          id='font-warning'
+          v-show="size < 10 || size > 18" >
+          Font size must be a number, greater than 10, and less than 18
+        </p>
+    </SettingsSection>
+</template>
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import SettingsSection from '../SettingsSection.vue';
+
+  @Component({
+    components: {
+      SettingsSection,
+    },
+  })
+  export default class TextSizeSection extends Vue {
+    size:string = '14'; // font size
+
+    // Updates global font size when input changes
+    @Watch('size')
+    updateFontSize() {
+       // Only update if valid font size
+      if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 18) {
+        this.$vxm.settings.fontSize = parseInt(this.size, 10);
+        localStorage.fontSize = JSON.stringify(this.size);
+      }
+    }
+
+    get fontSize() {
+      const numSize = parseInt(this.size, 10); // Font size as an int
+      if (numSize >= 10 && numSize <= 18) {
+        return numSize;
+      }
+      if (numSize >= 18) {
+        return 18; // If font size greater than 18, set to maximum of 18
+      }
+      if (numSize <= 10) {
+        return 10; // If font size less than 10, set to minimum of 10
+      }
+      return 14; // If nothing else works, make it the default, 14
+    }
+
+    created() {
+      if (localStorage.fontSize) {
+        this.size = String(Number(JSON.parse(localStorage.fontSize)));
+      } else {
+        this.size = this.$vxm.settings.fontSize.toString();
+      }
+    }
+  }
+</script>
+<style scoped>
+#font-size-p { /* 'Default is 14' text */
+  margin-left:2px;
+}
+#font-warning {
+  color:#f39c12;
+}
+input {
+  margin:2px;
+  width:calc(100% - 23px); /* Accounts for padding on both sides */
+  max-width:150px; /* Big screens don't have arbitrarily large input */
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
new file mode 100644
index 00000000..6d8133f4
--- /dev/null
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -0,0 +1,216 @@
+<template>
+  <SettingsSection title="Toolbar Features">
+    <p>These enable you to send emoticons and formatted text.</p>
+    <table>
+      <tr>
+        <td class="feature-button-container left-side">
+          <button
+            @click="toggleMarkdown"
+            :style="{ fontSize: `${11 / 14}rem` }"
+            class="btn settings-button feature-button"
+          >{{ markdownChatFeatures ? "Disable" : "Enable" }} markdown</button>
+        </td>
+        <td class="feature-button-container">
+          <button
+            @click="toggleEmoticons"
+            :style="{ fontSize: `${11 / 14}rem` }"
+            class="btn settings-button feature-button"
+          >{{ emoticonChatFeatures ? "Disable" : "Enable" }} emoticons</button>
+        </td>
+      </tr>
+      <tr>
+        <td class="feature-button-container left-side">
+          <button
+            @click="disableAllChatFeatures"
+            :disabled="!allChatFeatures"
+            :style="{ fontSize: `${11 / 14}rem` }"
+            class="btn settings-button feature-button"
+          >Disable all</button>
+        </td>
+        <td class="feature-button-container">
+          <button
+            @click="enableAllChatFeatures"
+            :disabled="allChatFeatures"
+            :style="{ fontSize: `${11 / 14}rem` }"
+            style="margin-top:1px;"
+            class="btn settings-button feature-button"
+          >Enable all</button>
+        </td>
+      </tr>
+    </table>
+
+    <h6>Custom emoticons</h6>
+    <table>
+      <tbody>
+        <tr v-for="(emote, index) in customEmoticons" :key="emote">
+          <td>{{ emote }}</td>
+          <td>
+            Change to
+            <input :id="index" @input="update" style="width:1rem" />
+          </td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="2" class="warning">{{ emoticonErrorMessage }}</td>
+        </tr>
+      </tfoot>
+    </table>
+  </SettingsSection>
+</template>
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import SettingsSection from '../SettingsSection.vue';
+
+@Component({
+  components: {
+    SettingsSection,
+  },
+})
+  export default class ToolbarSection extends Vue {
+  allChatFeatures = true;
+
+  emoticonChatFeatures = true;
+
+  markdownChatFeatures = true;
+
+  toggleEmoticons() {
+    this.emoticonChatFeatures = !this.emoticonChatFeatures;
+    if (this.emoticonChatFeatures && this.markdownChatFeatures) {
+      this.allChatFeatures = this.emoticonChatFeatures;
+      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+    }
+    if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
+      this.allChatFeatures = this.emoticonChatFeatures;
+      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+    }
+    this.$vxm.settings.emoticonChatFeatures = this.emoticonChatFeatures;
+    localStorage.emoticonChatFeatures = JSON.stringify(
+      this.emoticonChatFeatures,
+    );
+  }
+
+  toggleMarkdown() {
+    this.markdownChatFeatures = !this.markdownChatFeatures;
+    if (this.emoticonChatFeatures && this.markdownChatFeatures) {
+      this.allChatFeatures = this.markdownChatFeatures;
+      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+    }
+    if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
+      this.allChatFeatures = this.markdownChatFeatures;
+      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+    }
+    this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
+    localStorage.markdownChatFeatures = JSON.stringify(
+      this.markdownChatFeatures,
+    );
+  }
+
+  toggleAllChatFeatures() {
+    this.allChatFeatures = !this.allChatFeatures;
+    this.emoticonChatFeatures = this.allChatFeatures;
+    this.markdownChatFeatures = this.allChatFeatures;
+    this.$vxm.settings.allChatFeatures = this.allChatFeatures;
+    localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
+    this.$vxm.settings.emoticonChatFeatures = this.allChatFeatures;
+    localStorage.emoticonChatFeatures = JSON.stringify(this.allChatFeatures);
+    this.$vxm.settings.markdownChatFeatures = this.allChatFeatures;
+    localStorage.markdownChatFeatures = JSON.stringify(this.allChatFeatures);
+  }
+
+  enableAllChatFeatures() {
+    if (!this.allChatFeatures) {
+      this.toggleAllChatFeatures();
+    }
+  }
+
+  disableAllChatFeatures() {
+    if (this.allChatFeatures) {
+      this.toggleAllChatFeatures();
+    }
+  }
+
+  // Custom emoticons
+
+  update(e: Event) {
+    const targ = e.target as HTMLInputElement;
+    const id = Number(targ.id);
+    let { value } = targ;
+    value = value.trim();
+    while ([...value].length > 1) {
+      value = value.substring(0, value.length - 1);
+    }
+    const emoticonRegex = /[^\w\d\p{P}\p{S}]/;
+    if (value.match(emoticonRegex)) {
+      if (this.customEmoticons.some(j => j === value)) {
+        this.emoticonErrorMessage = 'You are using that emoticon in another slot';
+        return;
+      }
+      Vue.set(this.$vxm.chat.customEmoticons, id, value);
+      if (localStorage) {
+        localStorage.customEmoticons = JSON.stringify(
+          this.$vxm.chat.customEmoticons,
+        );
+      }
+      this.emoticonErrorMessage = '';
+    } else {
+      this.emoticonErrorMessage = `${value} is not a valid emoticon`;
+    }
+    if (value.trim() === '') {
+      this.emoticonErrorMessage = '';
+    }
+    targ.value = '';
+  }
+
+  emoticonErrorMessage = '';
+
+  get customEmoticons() {
+    return this.$vxm.chat.customEmoticons;
+  }
+
+  created() {
+    if (localStorage.allChatFeatures) {
+      this.allChatFeatures = JSON.parse(localStorage.allChatFeatures);
+    } else {
+      this.allChatFeatures = this.$vxm.settings.allChatFeatures;
+    }
+    if (localStorage.emoticonChatFeatures) {
+      this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
+    } else {
+      this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
+    }
+    if (localStorage.markdownChatFeatures) {
+      this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
+    } else {
+      this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
+    }
+  }
+  }
+</script>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import "~bootstrap-vue/dist/bootstrap-vue.css";
+.settings-button {
+  background-color: $green;
+}
+.left-side {
+  padding-left: 0;
+}
+.feature-button-container {
+  padding: 2px;
+}
+.feature-button {
+  float: left;
+  width: 95%;
+}
+.warning {
+  color: $warning;
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/Sections/UsernameColorSection.vue b/src/app/components/Slideout/Settings/Sections/UsernameColorSection.vue
new file mode 100644
index 00000000..fe9e0e5c
--- /dev/null
+++ b/src/app/components/Slideout/Settings/Sections/UsernameColorSection.vue
@@ -0,0 +1,21 @@
+<template>
+  <SettingsSection title="Username Color" >
+    <ColorPicker />
+  </SettingsSection>
+</template>
+<script lang="ts">
+  import {
+    Component, Watch, Prop, Vue,
+  } from 'vue-property-decorator';
+  import SettingsSection from '../SettingsSection.vue';
+  import ColorPicker from '../ColorPicker/ColorPicker.vue';
+
+  @Component({
+    components: {
+      SettingsSection,
+      ColorPicker,
+    },
+  })
+  export default class UsernameColorSection extends Vue {
+  }
+</script>
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index 3c9299a5..9af8ae8c 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -1,234 +1,41 @@
 <template>
   <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
-    <SettingsSection title="Text Size" >
-      <input v-model="size" type=number min=10 max=18>
-        <p id='font-size-p'>Default is 14</p>
-        <p
-          id='font-warning'
-          v-show="size < 10 || size > 18" >
-          Font size must be a number, greater than 10, and less than 18
-        </p>
-    </SettingsSection>
-    <SettingsSection title="Ignored" >
-      <table style="width:175px" >
-        <tr v-for="user in ignoredUsers" :key="user.Username">
-          <button
-            :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-            style="right:0; width:150px;"
-            class='unignore-user btn settings-button'
-            v-on:click="unignore(user)" >
-            Unignore {{user}}
-          </button>
-        </tr>
-        <tr v-show="!anyIgnoredUsers">No users ignored</tr>
-        <tr><button
-          :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-          style="margin-top:5px; width:150px"
-          class='unignore-user btn settings-button'
-          v-on:click="unignore('*')"
-          v-show="anyIgnoredUsers"
-        >
-          Unignore All
-        </button></tr>
-      </table>
-    </SettingsSection>
-    <SettingsSection title="Notifications" >
-      <h6>Ignored</h6>
-        <table>
-          <tr v-for="channel in channels" :key="channel.name">
-            <td>{{channel.name}}</td>
-            <td>
-              <button
-                style="width:100%"
-                @click="toggleNotificationsEnabled(channel.name)"
-                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-                class="btn settings-button"
-              >
-                {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
-              </button>
-            </td>
-          </tr>
-          <tr>
-            <td class='footer'>
-              <button
-                style="width:100%"
-                :disabled="anyNotificationsDisabled"
-                @click="enableAll"
-                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-                class="btn settings-button"
-              >
-                Enable all
-              </button>
-            </td>
-            <td class='footer'>
-              <button
-                style="width:100%"
-                :disabled="anyNotificationsEnabled"
-                @click="disableAll"
-                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-                class="btn settings-button"
-              >
-                Disable all
-              </button>
-            </td>
-          </tr>
-        </table>
-        <h6>Indicator</h6>
-        <p>
-          This will appear in the page title if you have notifications
-        </p>
-        <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
-        <h6>Keywords</h6>
-        <p>
-          If these keywords are used in the chat, they will trigger notifications
-        </p>
-        <textarea type=text v-model="keywords" style="font-size:1rem; padding:1px;" />
-        <p>
-          If you have multiple keywords, separate them with commas.
-          Your username is automatically a keyword.
-        </p>
-    </SettingsSection>
-    <SettingsSection title="Username Color" >
-      <ColorPicker/>
-    </SettingsSection>
-    <SettingsSection title="Toolbar Features" >
-       <p>
-          These enable you to send emoticons and formatted text.
-        </p>
-        <table>
-          <tr>
-            <td class="feature-button-container left-side">
-              <button
-                @click="toggleMarkdown"
-                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-                class="btn settings-button feature-button" >
-                {{markdownChatFeatures ? 'Disable' : 'Enable'}} markdown
-              </button>
-            </td>
-            <td class="feature-button-container">
-              <button
-                @click="toggleEmoticons"
-                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-                class="btn settings-button feature-button" >
-                {{emoticonChatFeatures ? 'Disable' : 'Enable'}} emoticons
-              </button>
-            </td>
-          </tr>
-          <tr>
-            <td class="feature-button-container left-side">
-              <button
-                @click="disableAllChatFeatures"
-                :disabled="!allChatFeatures"
-                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-                class="btn settings-button feature-button" >
-                Disable all
-              </button>
-            </td>
-            <td class="feature-button-container">
-              <button
-                @click="enableAllChatFeatures"
-                :disabled="allChatFeatures"
-                :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-                style="margin-top:1px;"
-                class="btn settings-button feature-button" >
-                Enable all
-            </button>
-            </td>
-          </tr>
-        </table>
-        <h6>Custom emoticons</h6>
-        <table>
-          <tbody>
-          <tr v-for="(emote, index) in customEmoticons" :key="emote">
-            <td>{{emote}}</td>
-            <td>Change to <input :id="index" @input="update" style="width:1rem"></td>
-          </tr>
-          </tbody>
-          <tfoot><tr><td colspan=2 class="warning">{{emoticonErrorMessage}}</td></tr></tfoot>
-        </table>
-    </SettingsSection>
-    <SettingsSection title="Status" >
-      <p>You are currently marked as {{userStatus ? 'away' : 'online'}}</p>
-      <button class="btn settings-button" @click="changeStatus(!userStatus)">
-        Toggle
-      </button>
-    </SettingsSection>
-    <SettingsSection title="Operator" >
-      <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
-        <button
-          @click="$emit('auth')"
-          :style="{ fontSize:`${fontSize * 11 / 14}px` }"
-          class="btn settings-button"
-          v-show="!isOper" >
-            Log in as operator
-        </button>
-        <h6 v-show="isOper">Change nick</h6>
-        <input v-show="isOper" @input="setNick" :value="opernick">
-    </SettingsSection>
+    <TextSizeSection />
+    <IgnoredSection />
+    <NotificationsSection />
+    <UsernameColorSection />
+    <ToolbarSection />
+    <StatusSection />
+    <OperSection />
   </div>
 </template>
 <script lang="ts">
   import {
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
-  import BootstrapVue from 'bootstrap-vue';
-  import Username from '@/components/Messages/Username.vue';
-  import ConnectButton from '@/components/Connection/ConnectButton.vue';
-  import SlideoutButton from '../SlideoutButton.vue';
-  import Slideout from '../Slideout.vue';
-  import { Channel } from '@/store/chat.vuex';
-  import ColorPicker from './ColorPicker/ColorPicker.vue';
-  import MinimizationTriangle from '../../MinimizationTriangle.vue';
-  import SettingsSection from './SettingsSection.vue';
+  import TextSizeSection from './Sections/TextSizeSection.vue';
+  import IgnoredSection from './Sections/IgnoredSection.vue';
+  import NotificationsSection from './Sections/NotificationsSection.vue';
+  import UsernameColorSection from './Sections/UsernameColorSection.vue';
+  import ToolbarSection from './Sections/ToolbarSection.vue';
+  import StatusSection from './Sections/StatusSection.vue';
+  import OperSection from './Sections/OperSection.vue';
 
-  Vue.use(BootstrapVue);
 
   @Component({
     components: {
-      Username,
-      ConnectButton,
-      ColorPicker,
-      MinimizationTriangle,
-      SettingsSection,
+      TextSizeSection,
+      IgnoredSection,
+      NotificationsSection,
+      UsernameColorSection,
+      ToolbarSection,
+      StatusSection,
+      OperSection,
     },
   })
   export default class SlideoutSettings extends Vue {
-    // Menus
-
-    openMenus = {
-      notifications: true,
-      color: true,
-      oper: true,
-      toolbar: true,
-      textSize: true,
-      ignored: true,
-      status: true,
-    };
-
-    @Watch('openMenus')
-    menusChanged() {
-      if (localStorage) {
-        localStorage.openMenus = JSON.stringify(this.openMenus);
-      }
-    }
-
-    // Font size
-
-    size:string = '14'; // font size
-
-
-    // Updates global font size when input changes
-    @Watch('size')
-    updateFontSize() {
-       // Only update if valid font size
-      if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 18) {
-        this.$vxm.settings.fontSize = parseInt(this.size, 10);
-        localStorage.fontSize = JSON.stringify(this.size);
-      }
-    }
-
     get fontSize() {
-      const numSize = parseInt(this.size, 10); // Font size as an int
+      const numSize = this.$vxm.settings.fontSize;
       if (numSize >= 10 && numSize <= 18) {
         return numSize;
       }
@@ -240,400 +47,16 @@
       }
       return 14; // If nothing else works, make it the default, 14
     }
-
-    // Indicator
-
-    indicator:string = '(!)';
-
-
-    @Watch('indicator')
-    indicatorChanged() {
-      if (localStorage) {
-        localStorage.indicator = JSON.stringify(this.indicator);
-      }
-      this.$vxm.settings.indicator = this.indicator;
-    }
-
-    // Toolbar
-
-    allChatFeatures = true;
-
-    emoticonChatFeatures = true;
-
-    markdownChatFeatures = true;
-
-    toggleEmoticons() {
-      this.emoticonChatFeatures = !this.emoticonChatFeatures;
-      if (this.emoticonChatFeatures && this.markdownChatFeatures) {
-        this.allChatFeatures = this.emoticonChatFeatures;
-        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-      }
-      if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
-        this.allChatFeatures = this.emoticonChatFeatures;
-        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-      }
-      this.$vxm.settings.emoticonChatFeatures = this.emoticonChatFeatures;
-      localStorage.emoticonChatFeatures = JSON.stringify(this.emoticonChatFeatures);
-    }
-
-    toggleMarkdown() {
-      this.markdownChatFeatures = !this.markdownChatFeatures;
-      if (this.emoticonChatFeatures && this.markdownChatFeatures) {
-        this.allChatFeatures = this.markdownChatFeatures;
-        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-      }
-      if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
-        this.allChatFeatures = this.markdownChatFeatures;
-        this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-        localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-      }
-      this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
-      localStorage.markdownChatFeatures = JSON.stringify(this.markdownChatFeatures);
-    }
-
-    toggleAllChatFeatures() {
-      this.allChatFeatures = !this.allChatFeatures;
-      this.emoticonChatFeatures = this.allChatFeatures;
-      this.markdownChatFeatures = this.allChatFeatures;
-      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-      this.$vxm.settings.emoticonChatFeatures = this.allChatFeatures;
-      localStorage.emoticonChatFeatures = JSON.stringify(this.allChatFeatures);
-      this.$vxm.settings.markdownChatFeatures = this.allChatFeatures;
-      localStorage.markdownChatFeatures = JSON.stringify(this.allChatFeatures);
-    }
-
-    enableAllChatFeatures() {
-      if (!this.allChatFeatures) {
-        this.toggleAllChatFeatures();
-      }
-    }
-
-    disableAllChatFeatures() {
-      if (this.allChatFeatures) {
-        this.toggleAllChatFeatures();
-      }
-    }
-
-    // Custom emoticons
-
-    update(e:Event) {
-      const targ = e.target as HTMLInputElement;
-      const id = Number(targ.id);
-      let { value } = targ;
-      value = value.trim();
-      while ([...value].length > 1) {
-        value = value.substring(0, value.length - 1);
-      }
-      const emoticonRegex = /[^\w\d\p{P}\p{S}]/;
-      if (value.match(emoticonRegex)) {
-        if (this.customEmoticons.some(j => j === value)) {
-          this.emoticonErrorMessage = 'You are using that emoticon in another slot';
-          return;
-        }
-        Vue.set(this.$vxm.chat.customEmoticons, id, value);
-        if (localStorage) {
-          localStorage.customEmoticons = JSON.stringify(this.$vxm.chat.customEmoticons);
-        }
-        this.emoticonErrorMessage = '';
-      } else {
-        this.emoticonErrorMessage = `${value} is not a valid emoticon`;
-      }
-      if (value.trim() === '') {
-        this.emoticonErrorMessage = '';
-      }
-      targ.value = '';
-    }
-
-    emoticonErrorMessage = '';
-
-    get customEmoticons() {
-      return this.$vxm.chat.customEmoticons;
-    }
-
-    // Notifications
-
-    keywords = '';
-
-    @Watch('keywords')
-    keywordsChanged() {
-      const keywordsArray = this.keywords.split(/, ?/);
-      if (keywordsArray[0] === '') {
-        return;
-      }
-      if (localStorage) {
-        localStorage.notificationsKeywords = JSON.stringify(keywordsArray);
-      }
-    }
-
-    // Toggle whether notifications are enabled for a specific channel
-    toggleNotificationsEnabled(channel:string) {
-      const trueChannel = this.$vxm.chat.channels[channel];
-      if (trueChannel) {
-        trueChannel.notificationsEnabled = !trueChannel.notificationsEnabled;
-        if (!trueChannel.notificationsEnabled) {
-          trueChannel.notifications = false;
-        }
-      }
-      this.$vxm.chat.ignoredChannels[channel] = (trueChannel as Channel).notificationsEnabled;
-      if (localStorage && this.$vxm.chat.ignoredChannels) {
-        localStorage.ignoredChannels = JSON.stringify(this.$vxm.chat.ignoredChannels);
-      }
-    }
-
-    // If any notifications are enabled
-    get anyNotificationsEnabled() {
-      // Iterates through each channel and checks if notifications are enabled
-      return !Object.values(this.channels).some(item => {
-        // Making sure nothing is undefined and gets value from channel
-        const { notificationsEnabled } = item as Channel;
-        return notificationsEnabled;
-      });
-    }
-
-    // If any notifications are disabled
-    get anyNotificationsDisabled() {
-      // Again, iterating through each channel
-      return !Object.values(this.channels).some(item => {
-        // Making sure nothing is undefined and gets value from channel
-        const { notificationsEnabled } = item as Channel;
-        return !notificationsEnabled;
-      });
-    }
-
-    // Enables notifications for all channels
-    enableAll() {
-      // For each channel
-      Object.values(this.channels).forEach(item => {
-        // If notifications aren't enabled, toggle their value. If they are, leave them alone
-        if (!(item as Channel).notificationsEnabled) {
-          this.toggleNotificationsEnabled((item as Channel).name);
-        }
-      });
-    }
-
-    // Disables notifications for all channels
-    disableAll() {
-      // For each channel
-      Object.values(this.channels).forEach(item => {
-        // If notifications are enabled, toggle their value. If they aren't, leave them alone
-        if ((item as Channel).notificationsEnabled) {
-          this.toggleNotificationsEnabled((item as Channel).name);
-        }
-      });
-    }
-
-    // Status
-
-    changeStatus(to:boolean) {
-      this.$vxm.chat.autoUpdateStatus = !to;
-      if (!to) {
-        this.$vxm.chat.setUnaway();
-      } else {
-        this.$vxm.chat.setAway();
-      }
-    }
-
-    get userStatus() {
-      return this.$vxm.chat.userStatus;
-    }
-
-    // Nick change
-
-    validateNick(nick:string) {
-      // eslint-disable-next-line no-useless-escape
-      return nick.match(/^[a-z_\-\[\]\\^{}|`][a-z0-9_\-\[\]\\^{}|`]*$/i);
-    }
-
-    setNick(e:Event) {
-      const { value } = e.target as HTMLInputElement;
-      if (!this.validateNick(value)) return;
-      this.$vxm.chat.changeNick(value);
-    }
-
-    opernick = '';
-
-    // Ignored
-
-    // Gets a list of ignored users
-    get ignoredUsers() {
-      return this.$vxm.chat.ignoredUsers;
-    }
-
-    // If any users are ignored. Uses ignoredUsers.length
-    get anyIgnoredUsers() {
-      return this.ignoredUsers.length > 0;
-    }
-
-    // Unignore user on list
-    unignore(user:string) {
-      this.$vxm.chat.unignoreUser(user);
-    }
-
-    get isOper() {
-      return this.$vxm.chat.oper;
-    }
-
-    // Other
-
-    // Whether it is visible. Determined by whether slideout is opened
-    get visible() {
-      return (this.$parent as Slideout).checked;
-    }
-
-    // When tab opened, display stored value if there is one
-    created() {
-      if (localStorage.fontSize) {
-        this.size = String(Number(JSON.parse(localStorage.fontSize)));
-      } else {
-        this.size = this.$vxm.settings.fontSize.toString();
-      }
-      if (localStorage.indicator) {
-        this.indicator = JSON.parse(localStorage.indicator);
-      } else {
-        this.indicator = this.$vxm.settings.indicator;
-      }
-      if (localStorage.allChatFeatures) {
-        this.allChatFeatures = JSON.parse(localStorage.allChatFeatures);
-      } else {
-        this.allChatFeatures = this.$vxm.settings.allChatFeatures;
-      }
-      if (localStorage.emoticonChatFeatures) {
-        this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
-      } else {
-        this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
-      }
-      if (localStorage.markdownChatFeatures) {
-        this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
-      } else {
-        this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
-      }
-      if (localStorage.notificationsKeywords) {
-        this.keywords = JSON.parse(localStorage.notificationsKeywords).join(', ');
-      } else if (this.$vxm.chat.notificationsKeywords) {
-        this.keywords = this.$vxm.chat.notificationsKeywords.join(', ');
-      } else {
-        this.keywords = '';
-      }
-      if (localStorage.nick) {
-        this.opernick = localStorage.nick;
-      } else {
-        this.opernick = this.$vxm.chat.customNick;
-      }
-      if (localStorage.openMenus) {
-        this.openMenus = JSON.parse(localStorage.openMenus);
-      }
-    }
-
-    // Return list of channels
-    get channels() {
-      return this.$vxm.chat.channels;
-    }
   }
 </script>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
-/*** Buttons ***/
-.settings-button {
-  background-color:$green;
-}
-button { /* Unignore user button */
-  padding:2px;
-  padding-bottom:3px;
-  margin-left:2px;
-  color:white;
-  border:none;
-}
-.feature-button {
-  float:left;
-  width:95%;
-}
-
-/*** Tables ***/
-td { /* Table cell in notifications settings section */
-  padding:4px;
-  width:max-content;
-}
-.footer { /* Enable and disable notifications buttons */
-  border:none;
-}
-table {
-  margin-top:2px;
-  margin-bottom:2px;
-}
-.feature-button-container {
-  padding:2px;
-}
-
-/*** Text ***/
-#font-size-p { /* 'Default is 14' text */
-  vertical-align: mid;
-  margin-left:2px;
-}
-#font-warning {
-  color:#f39c12;
-}
-h3 {
-  width:calc(100% - 23px); /* Accounts for padding on both sides */
-  text-align:justify;
-}
-.heading {
-  display:inline-block;
-  margin:4px;
-  margin-left:0;
-}
-.warning {
-  color:$warning;
-}
-
-/*** Other ***/
-input {
-  margin:2px;
-  width:calc(100% - 23px); /* Accounts for padding on both sides */
-  max-width:150px; /* Big screens don't have arbitrarily large input */
-}
-li { /* Remove bullets */
-  list-style-type: none;
-}
-.left-side {
-  padding-left:0;
-}
-.minimization-triangle {
-  height:30px;
-  width:30px;
-  position:absolute;
-  right:10px;
-  top:0px;
-}
-
-/*** Container ***/
-section { /* 'Block' of settings */
-  margin-bottom:5px;
-  position: relative;
-}
 #settings-wrapper { /* Wrapper div */
   padding:5px;
   padding-left:20px;
   height:calc(100% - 50px);
   overflow-y:auto;
 }
-.settings-slide-enter-active {
-  transition: max-height 0.2s cubic-bezier(1,0,1,0);
-  max-height:1000px;
-}
-.settings-slide-leave-active {
-  transition: max-height 0.2s cubic-bezier(0,1,0,1);
-  max-height:1000px;
-}
-.settings-slide-enter, .settings-slide-leave-to {
-  max-height:0;
-}
-.settings-content-container {
-  overflow:hidden;
-}
 </style>

From 81cbb8ecaa22fca02b5fd8f3bcb1e4a0c5e0866b Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 21 Jun 2020 16:19:10 -0500
Subject: [PATCH 133/223] Reorganized, accessibility, autoscroll

---
 src/app/App.vue                                     | 10 ++++++----
 .../{ => Header}/MinimizationTriangle.vue           |  2 +-
 .../components/{ => Header}/OpenWindowButton.vue    |  2 +-
 .../components/{Emoticons => Input}/EmoticonBar.vue |  2 +-
 .../{Emoticons => Input}/EmoticonButton.vue         |  0
 .../{Emoticons => Input}/ExpandButton.vue           |  0
 .../{Emoticons => Input}/MarkdownWrapButton.vue     |  0
 .../components/{Emoticons => Input}/MenuButton.vue  |  9 +++++++++
 src/app/components/{ => Input}/ScalableInput.vue    |  2 +-
 src/app/components/{ => Input}/SendButton.vue       |  7 ++++++-
 src/app/components/Panes/MessagePane.vue            | 13 +++++++++++--
 src/app/components/Slideout/Chat/SlideoutChats.vue  |  2 --
 .../Slideout/Settings/SettingsSection.vue           |  2 +-
 13 files changed, 37 insertions(+), 14 deletions(-)
 rename src/app/components/{ => Header}/MinimizationTriangle.vue (95%)
 rename src/app/components/{ => Header}/OpenWindowButton.vue (90%)
 rename src/app/components/{Emoticons => Input}/EmoticonBar.vue (98%)
 rename src/app/components/{Emoticons => Input}/EmoticonButton.vue (100%)
 rename src/app/components/{Emoticons => Input}/ExpandButton.vue (100%)
 rename src/app/components/{Emoticons => Input}/MarkdownWrapButton.vue (100%)
 rename src/app/components/{Emoticons => Input}/MenuButton.vue (83%)
 rename src/app/components/{ => Input}/ScalableInput.vue (99%)
 rename src/app/components/{ => Input}/SendButton.vue (80%)

diff --git a/src/app/App.vue b/src/app/App.vue
index 9437bfea..09678b97 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -58,8 +58,8 @@
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
   import MessagePane from '@/components/Panes/MessagePane.vue';
-  import MinimizationTriangle from '@/components/MinimizationTriangle.vue';
-  import OpenWindowButton from '@/components/OpenWindowButton.vue';
+  import MinimizationTriangle from '@/components/Header/MinimizationTriangle.vue';
+  import OpenWindowButton from '@/components/Header/OpenWindowButton.vue';
   import DraggableDiv from '@/components/DraggableDiv.vue';
   import OperLogin from '@/components/OperLogin.vue';
   import PrivateMessageModal from '@/components/Messages/PrivateMessageModal.vue';
@@ -130,6 +130,10 @@
     if (this.fullSize && this.minimized) {
       this.fullSize = false;
     }
+    if (this.fullSize === false) {
+      // Scrolls down when the chat is brought back to normal size
+      this.$refs.messagepanes[this.activeTab].onContentChanged();
+    }
   }
 
   // Tabs
@@ -397,8 +401,6 @@
   }
   }
 </script>
-
-
 <style lang="scss" scoped>
 @import "./assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
diff --git a/src/app/components/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
similarity index 95%
rename from src/app/components/MinimizationTriangle.vue
rename to src/app/components/Header/MinimizationTriangle.vue
index e8b9ec0d..1ab7d30c 100644
--- a/src/app/components/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -26,7 +26,7 @@
 
 <style lang="scss" scoped>
   .minimization-triangle { /* Normal state */
-    background-image: url("../assets/minimization-triangle.png");
+    background-image: url("../../assets/minimization-triangle.png");
     background-repeat: no-repeat;
     background-size: 60% 40%;
     background-position: center;
diff --git a/src/app/components/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
similarity index 90%
rename from src/app/components/OpenWindowButton.vue
rename to src/app/components/Header/OpenWindowButton.vue
index 6eb5a228..bd3c67a1 100644
--- a/src/app/components/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -21,7 +21,7 @@
 
 <style lang="scss" scoped>
   .open-window {
-    background-image: url("../assets/open-window.png");
+    background-image: url("../../assets/open-window.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
diff --git a/src/app/components/Emoticons/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
similarity index 98%
rename from src/app/components/Emoticons/EmoticonBar.vue
rename to src/app/components/Input/EmoticonBar.vue
index 2c251818..6fe4d07e 100644
--- a/src/app/components/Emoticons/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -59,7 +59,7 @@
   } from 'vue-property-decorator';
   import EmoticonButton from './EmoticonButton.vue';
   import ExpandButton from './ExpandButton.vue';
-  import SendButton from '../SendButton.vue';
+  import SendButton from './SendButton.vue';
   import MarkdownWrapButton from './MarkdownWrapButton.vue';
   import MenuButton from './MenuButton.vue';
   @Component({
diff --git a/src/app/components/Emoticons/EmoticonButton.vue b/src/app/components/Input/EmoticonButton.vue
similarity index 100%
rename from src/app/components/Emoticons/EmoticonButton.vue
rename to src/app/components/Input/EmoticonButton.vue
diff --git a/src/app/components/Emoticons/ExpandButton.vue b/src/app/components/Input/ExpandButton.vue
similarity index 100%
rename from src/app/components/Emoticons/ExpandButton.vue
rename to src/app/components/Input/ExpandButton.vue
diff --git a/src/app/components/Emoticons/MarkdownWrapButton.vue b/src/app/components/Input/MarkdownWrapButton.vue
similarity index 100%
rename from src/app/components/Emoticons/MarkdownWrapButton.vue
rename to src/app/components/Input/MarkdownWrapButton.vue
diff --git a/src/app/components/Emoticons/MenuButton.vue b/src/app/components/Input/MenuButton.vue
similarity index 83%
rename from src/app/components/Emoticons/MenuButton.vue
rename to src/app/components/Input/MenuButton.vue
index 4d29d540..120268d0 100644
--- a/src/app/components/Emoticons/MenuButton.vue
+++ b/src/app/components/Input/MenuButton.vue
@@ -9,6 +9,11 @@
     @click="$emit('button', name)"
   >
     {{name}}
+    <v-style>
+      .menu-button:focus {
+        outline: {{ tabbing ? '' : 'none'}} !important;
+      }
+    </v-style>
   </button>
 </template>
 <script lang='ts'>
@@ -22,6 +27,10 @@
 
     @Prop()
     styles!: string;
+
+    get tabbing() {
+      return this.$vxm.chat.tabbing;
+    }
   }
 </script>
 <style scoped>
diff --git a/src/app/components/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
similarity index 99%
rename from src/app/components/ScalableInput.vue
rename to src/app/components/Input/ScalableInput.vue
index e05599c3..0ff5444e 100644
--- a/src/app/components/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -33,7 +33,7 @@
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
   import User from '@/types/user';
-  import SendButton from '@/components/SendButton.vue';
+  import SendButton from './SendButton.vue';
 
   @Component({
     components: {
diff --git a/src/app/components/SendButton.vue b/src/app/components/Input/SendButton.vue
similarity index 80%
rename from src/app/components/SendButton.vue
rename to src/app/components/Input/SendButton.vue
index c62d2bff..80351be4 100644
--- a/src/app/components/SendButton.vue
+++ b/src/app/components/Input/SendButton.vue
@@ -4,6 +4,11 @@
     :class="{animated: animationValue}"
     @click="sendMessage"
   >
+    <v-style>
+      .send-button:focus {
+        outline: {{ $vxm.chat.tabbing ? '' : 'none'}} !important;
+      }
+    </v-style>
   </button>
 </template>
 
@@ -26,7 +31,7 @@
   .send-button {
     background-color:rgba(0,0,0,0);
     border:none;
-    background-image: url("../assets/send-button.png");
+    background-image: url("../../assets/send-button.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 7ac5be41..99a259fe 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -41,11 +41,11 @@
     Component, Prop, Watch, Vue,
   } from 'vue-property-decorator';
   import { mapState } from 'vuex';
-  import EmoticonBar from '@/components/Emoticons/EmoticonBar.vue';
+  import EmoticonBar from '@/components/Input/EmoticonBar.vue';
   import UserMessage from '../Messages/UserMessage.vue';
   import Pane from './Pane.vue';
   import ConnectingMessage from '../Connection/ConnectingMessage.vue';
-  import ScalableInput from '@/components/ScalableInput.vue';
+  import ScalableInput from '@/components/Input/ScalableInput.vue';
   import ConnectButton from '@/components/Connection/ConnectButton.vue';
   import BanStatus from '@/types/BanStatus';
   import Message from '@/types/message';
@@ -65,6 +65,15 @@
     @Prop({ required: true })
     data!: Channel;
 
+    get messages() {
+      return this.data.postedMessages;
+    }
+
+    @Watch('messages')
+    messageAdded() {
+      this.onContentChanged();
+    }
+
     @Prop({ required: true })
     visibility!: boolean;
 
diff --git a/src/app/components/Slideout/Chat/SlideoutChats.vue b/src/app/components/Slideout/Chat/SlideoutChats.vue
index 5e7464f2..b68e4428 100644
--- a/src/app/components/Slideout/Chat/SlideoutChats.vue
+++ b/src/app/components/Slideout/Chat/SlideoutChats.vue
@@ -18,14 +18,12 @@
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import MinimizationTriangle from '../../MinimizationTriangle.vue';
   import ChatSelectButton from './ChatSelectButton.vue';
   import Slideout from '../Slideout.vue';
   import Splitter from './Splitter.vue';
 
   @Component({
     components: {
-      MinimizationTriangle,
       ChatSelectButton,
       Splitter,
     },
diff --git a/src/app/components/Slideout/Settings/SettingsSection.vue b/src/app/components/Slideout/Settings/SettingsSection.vue
index b56d06a7..6eb6c09c 100644
--- a/src/app/components/Slideout/Settings/SettingsSection.vue
+++ b/src/app/components/Slideout/Settings/SettingsSection.vue
@@ -20,7 +20,7 @@
   import {
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
-  import MinimizationTriangle from '../../MinimizationTriangle.vue';
+  import MinimizationTriangle from '@/components/Header/MinimizationTriangle.vue';
 
   @Component({
     components: {

From a8d567a59013e1f147061431d48e66097b440cef Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 22 Jun 2020 10:28:54 -0500
Subject: [PATCH 134/223] Chat positioned relative to edges when in-game

---
 src/app/App.vue                     | 57 +++++++++++++++++++++++++----
 src/app/components/DraggableDiv.vue | 51 ++++++++++++++++++++------
 src/app/store/chat.vuex.ts          | 11 ++++++
 src/standalone/App.vue              |  7 +++-
 4 files changed, 105 insertions(+), 21 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 09678b97..554a6a47 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -2,16 +2,11 @@
   <DraggableDiv
     id="eterna-chat"
     style="overflow-y: hidden"
-    :style="{ 'min-height': minimized ? '40px' : '400px',
-    /* Makes sure minimum height is changed to allow for chat to be minimized*/
-    top: `${initialPosition[1]}px`,
-    left:`${initialPosition[0]}px`,
-    width: `${initialSize[0] || 300}px`,
-    height: `${initialSize[1] || 500}px`,
-    resize: minimized ? '' : 'both'}"
+    :style="chatStyle"
     :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
     :enabled="!fullSize /* Disables dragging when chat is fullsize*/"
     v-resize:debounce="resized"
+    :inGame="inGame"
   >
     <template slot="main">
       <slideout
@@ -102,6 +97,13 @@
     return this.minimization;
   }
 
+  get minimizedStyle() {
+    return {
+      'min-height': this.minimized ? '40px' : '400px',
+      resize: this.minimized ? '' : 'both',
+    };
+  }
+
   // Private messages
 
   get showPrivMsgModal() {
@@ -227,6 +229,38 @@
 
   // Drag and resize
 
+  get gamePosition() {
+    return this.$vxm.chat.inGamePosition;
+  }
+
+  get positionStyle() {
+    const style: { [key:string]: string} = {};
+    if (this.inGame) {
+      console.log(this.gamePosition);
+      if (this.gamePosition[0] === 'l') {
+        style.left = `${this.gamePosition[1]}px`;
+      } else {
+        style.right = `${this.gamePosition[1]}px`;
+      }
+      if (this.gamePosition[2] === 't') {
+        style.top = `${this.gamePosition[3]}px`;
+      } else {
+        style.bottom = `${this.gamePosition[3]}px`;
+      }
+    } else {
+      style.left = `${this.initialPosition[0]}px`;
+      style.top = `${this.initialPosition[1]}px`;
+    }
+    return style;
+  }
+
+  get sizeStyle() {
+    return {
+      width: `${this.initialSize[0] || 300}px`,
+      height: `${this.initialSize[1] || 500}px`,
+    };
+  }
+
   get initialPosition() {
     return this.$vxm.chat.initialPosition;
   }
@@ -289,6 +323,9 @@
   @Prop()
   uid!: string;
 
+  @Prop()
+  inGame !: boolean;
+
   $refs!: {
     reportDialog: ReportDialog;
     login: OperLogin,
@@ -366,6 +403,10 @@
     });
   }
 
+  get chatStyle() {
+    return Object.assign(Object.assign(this.positionStyle, this.sizeStyle), this.minimizedStyle);
+  }
+
   // Inactivity timer
 
   timeout = 60000; // How long a user is inactive before they are marked as away
@@ -411,7 +452,7 @@
   font-size: 14px;
   font-weight: 300;
   background-color: $med-dark-blue;
-  position: relative; /* Makes sure everything is placed with respect to it, not to its parent */
+  position: absolute; /* Makes sure everything is placed with respect to it, not to its parent */
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 350px; /* Bounds on chat resizing */
   max-width: 450px;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index f8508503..422b5b2b 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -24,6 +24,7 @@
     },
     props: {
       enabled: Boolean,
+      inGame: Boolean,
     },
     computed: {
       disabled: function disabled() {
@@ -66,19 +67,45 @@
       closeDragElement() {
         /* Chat position is stored relative to the center of the page - this is because
         of how the site is laid out. It means that the chat won't move if the browser resizes. */
+        /* If the chat is in-game, position is stored relative to edges of page */
         if (localStorage) {
-          // Sets new chat position in localStorage when drag is ended
-          let x = this.$refs.draggableContainer.style.left; // Gets current X and Y
-          let y = this.$refs.draggableContainer.style.top;
-          x = x.replace('px', '');
-          y = y.replace('px', '');
-          const point = [Number(x), Number(y)];
-          const midpointX = window.innerWidth / 2; // Gets center
-          const midpointY = window.innerHeight / 2;
-          const midpoint = [midpointX, midpointY];
-          // Gets chat's offset from the center
-          const offset = [midpoint[0] - point[0], midpoint[1] - point[1]];
-          localStorage.position = JSON.stringify(`${offset[0]} ${offset[1]}`); // Save to localStorage
+          if (this.inGame) {
+            const windowSize = [window.innerWidth, window.innerHeight];
+            const {
+              left, top, width, height,
+            } = this.$refs.draggableContainer.style;
+            const chatPosition = [Number(left.replace('px', '')), Number(top.replace('px', ''))];
+            const chatSize = [Number(width.replace('px', '')), Number(height.replace('px', ''))];
+            // Determines whether chat is placed WRT l/r, t/b by center
+            const center = [chatPosition[0] + chatSize[0] / 2, chatPosition[1] + chatSize[1] / 2];
+            const side = center[0] < windowSize[0] / 2 ? 'l' : 'r';
+            const side2 = center[1] < windowSize[1] / 2 ? 't' : 'b';
+            // Gets offsets from sides
+            let offset = chatPosition[0];
+            if (side === 'r') {
+              // Gets offset from right
+              offset = windowSize[0] - chatPosition[0] - chatSize[0];
+            }
+            let offset2 = chatPosition[1];
+            if (side2 === 'b') {
+              // Gets offset from bottom
+              offset2 = windowSize[1] - chatPosition[1] - chatSize[1];
+            }
+            localStorage.gamePosition = JSON.stringify([side, offset, side2, offset2]);
+          } else {
+            // Sets new chat position in localStorage when drag is ended
+            let x = this.$refs.draggableContainer.style.left; // Gets current X and Y
+            let y = this.$refs.draggableContainer.style.top;
+            x = x.replace('px', '');
+            y = y.replace('px', '');
+            const point = [Number(x), Number(y)];
+            const midpointX = window.innerWidth / 2; // Gets center
+            const midpointY = window.innerHeight / 2;
+            const midpoint = [midpointX, midpointY];
+            // Gets chat's offset from the center
+            const offset = [midpoint[0] - point[0], midpoint[1] - point[1]];
+            localStorage.position = JSON.stringify(`${offset[0]} ${offset[1]}`); // Save to localStorage
+          }
         }
         document.onmouseup = null;
         document.onmousemove = null;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index ba860f0c..5e5a54c5 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -119,6 +119,8 @@ export default class ChatModule extends VuexModule {
 
   initialPosition: [number, number] = [0, 0];
 
+  inGamePosition: [string, number, string, number] = ['l', 0, 't', 0];
+
   initialSize: [number, number] = [0, 0];
 
   customNick !: string; // Custom nick for oper
@@ -329,6 +331,15 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.gamePosition) {
+        try {
+          this.inGamePosition = JSON.parse(localStorage.gamePosition);
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of in-game chat location',
+          );
+        }
+      }
       if (localStorage.size) {
         try {
           const data = JSON.parse(localStorage.size);
diff --git a/src/standalone/App.vue b/src/standalone/App.vue
index 3f57c7cb..faae8c2e 100644
--- a/src/standalone/App.vue
+++ b/src/standalone/App.vue
@@ -4,7 +4,12 @@
     style="height:100%; overflow-y:hidden;"
   >
     <login v-if="!logged" @login="login"/>
-    <chat-app v-if="logged" :username="username" :uid="uid" workbranch="eternagame.org" />
+    <chat-app
+      v-if="logged"
+      :username="username"
+      :uid="uid"
+      workbranch="eternagame.org"
+      :inGame="false" />
   </div>
 </template>
 

From 627c81dbffc719be973d4f24ad01ad666c61df93 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 22 Jun 2020 13:27:20 -0500
Subject: [PATCH 135/223] Unread message indicator when user scrolls up

---
 src/app/App.vue                               |  3 ++
 src/app/components/Panes/MessagePane.vue      | 21 +++++++-
 src/app/components/Panes/Pane.vue             |  6 ++-
 .../components/Panes/UnreadMessageBanner.vue  | 31 +++++++++++
 src/app/store/chat.vuex.ts                    | 51 +++++++++++++++++++
 todo.md                                       |  1 +
 6 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 src/app/components/Panes/UnreadMessageBanner.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 554a6a47..d856c88f 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -385,6 +385,9 @@
       this.$vxm.chat.updateMessage = recent || '';
       this.$vxm.chat.inputUpdate = true;
     }
+    if (e.code === 'ArrowDown') {
+      this.$vxm.chat.testReason({ reason: 'test', username: 'Ahalb' });
+    }
   }
 
   created() {
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 99a259fe..6b96129d 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -1,5 +1,5 @@
 <template>
-  <Pane ref="pane" :visibility="visibility" :data="data">
+  <Pane ref="pane" :visibility="visibility" :data="data" @autoscroll="this.autoscroll">
     <ul style="margin-bottom:0; padding-right:10px">
       <UserMessage
         v-for="(message, i) in data.postedMessages"
@@ -8,6 +8,7 @@
         :style="{fontSize:fontSize}"
       />
       <ConnectingMessage/>
+      <UnreadMessageBanner v-show="unreads > 0" @click.native="scrollDown" :messages="unreads" />
     </ul>
     <template v-slot:footer>
       <EmoticonBar
@@ -50,6 +51,7 @@
   import BanStatus from '@/types/BanStatus';
   import Message from '@/types/message';
   import { Channel } from '@/store/chat.vuex';
+  import UnreadMessageBanner from './UnreadMessageBanner.vue';
 
   @Component({
     components: {
@@ -59,6 +61,7 @@
       ScalableInput,
       ConnectButton,
       EmoticonBar,
+      UnreadMessageBanner,
     },
   })
   export default class MessagesPane extends Vue {
@@ -69,9 +72,25 @@
       return this.data.postedMessages;
     }
 
+    unreads = 0;
+
     @Watch('messages')
     messageAdded() {
       this.onContentChanged();
+      if (!this.autoScroll) {
+        this.unreads += 1;
+      } else {
+        this.unreads = 0;
+      }
+    }
+
+    autoScroll = true;
+
+    autoscroll(to:boolean) {
+      this.autoScroll = to;
+      if (to) {
+        this.unreads = 0;
+      }
     }
 
     @Prop({ required: true })
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index d98e31d6..96b79fdd 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -60,7 +60,11 @@
         this.$forceUpdate();
         if (container.scrollTop > actualScrollHeight - 50) {
           this.autoScroll = true;
-        } else this.autoScroll = false;
+          this.$emit('autoscroll', true);
+        } else {
+          this.autoScroll = false;
+          this.$emit('autoscroll', false);
+        }
       }
     }
 
diff --git a/src/app/components/Panes/UnreadMessageBanner.vue b/src/app/components/Panes/UnreadMessageBanner.vue
new file mode 100644
index 00000000..b522d0d0
--- /dev/null
+++ b/src/app/components/Panes/UnreadMessageBanner.vue
@@ -0,0 +1,31 @@
+<template>
+  <button class="btn unread-banner-container">
+    {{messages}} new message{{messages === 1 ? 's' : ''}}
+  </button>
+</template>
+<script lang="ts">
+  import {
+    Component, Prop, Vue,
+  } from 'vue-property-decorator';
+
+  @Component
+  export default class UnreadMessageBanner extends Vue {
+    @Prop()
+    messages !: number;
+  }
+</script>
+<style lang="scss">
+@import "../../assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+.unread-banner-container {
+  width:90%;
+  left:5%;
+  margin-top: 2px;
+  background-color:$green !important;
+  border-radius:5px !important;
+  position:sticky;
+  bottom:0;
+  text-align:center;
+}
+</style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 5e5a54c5..1c37ba69 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -876,6 +876,17 @@ export default class ChatModule extends VuexModule {
               } else { // Otherwise, just ban them from the one channel
                 this.client?.ban(params.split(' ')[0], `*!${params.split(' ')[1]}@*`);
               }
+              if (params.split(' ')[2]) {
+                const user = this.connectedUsers[params.split(' ')[1]];
+                const reason = params.substring(params.indexOf(params.split(' ')[2]));
+                if (user && user.nicks) {
+                  const nick = user.nicks[0];
+                  this.giveReason({
+                    reason,
+                    nick,
+                  });
+                }
+              }
             } else {
               this.auth = true; // If not an oper, present the modal to log in
               postMessage('You are not an operator or moderator and do not have permission to ban users.');
@@ -914,6 +925,17 @@ export default class ChatModule extends VuexModule {
                   } else { // Otherwise, kick from the one channel
                     this.client?.raw(`KICK ${params.split(' ')[0]} ${e}`);
                   }
+                  if (params.split(' ')[2]) {
+                    const user = this.connectedUsers[params.split(' ')[1]];
+                    const reason = params.substring(params.indexOf(params.split(' ')[2]));
+                    if (user && user.nicks) {
+                      const nick = user.nicks[0];
+                      this.giveReason({
+                        reason,
+                        nick,
+                      });
+                    }
+                  }
                 });
               }
             } else { // Same thing for all oper commands
@@ -931,6 +953,17 @@ export default class ChatModule extends VuexModule {
                 } else {
                   this.client?.raw(`MODE ${params.split(' ')[0]} +b m;*!${params.split(' ')[1]}@*`);
                 }
+                if (params.split(' ')[2]) {
+                  const user = this.connectedUsers[params.split(' ')[1]];
+                  const reason = params.substring(params.indexOf(params.split(' ')[2]));
+                  if (user && user.nicks) {
+                    const nick = user.nicks[0];
+                    this.giveReason({
+                      reason,
+                      nick,
+                    });
+                  }
+                }
               } else {
                 postMessage('Please include command parameters. Type `/help quiet` for more usage instructions');
               }
@@ -1073,6 +1106,19 @@ export default class ChatModule extends VuexModule {
             }
             this.changeNick(params);
             break;
+          case 'execute': {
+            if (!this.oper) {
+              this.auth = true;
+              postMessage('You are not an operator or moderator and do not have permission to execute commands');
+              break;
+            }
+            if (params.length < 1) {
+              postMessage('Please include command parameters. Type `/help execute` for more usage instructions');
+              break;
+            }
+            this.client?.raw(params);
+            break;
+          }
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;
@@ -1101,6 +1147,11 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  @action()
+  async giveReason({ reason, nick }: {reason: string, nick: string}) {
+    this.client?.say(nick, reason);
+  }
+
   @action()
   async ignoreUser({ username, channel }: { username: string; channel?: string }) {
     if (!this.ignoredUsers.includes(username)) {
diff --git a/todo.md b/todo.md
index f25b60c0..400d08e6 100644
--- a/todo.md
+++ b/todo.md
@@ -39,6 +39,7 @@
   - Clicking a channel name in a chat message opens the channel
   - Clicking a username brings up the tooltip
   - Autocomplete for usernames
+  - Scroll down button for new messages you've missed when scrolling up
 
 ### Reconnect button
   - Style to align with theme

From 651f22fb0ed329c9a52a0a0ea9ba47ca59f38d3c Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 22 Jun 2020 13:31:34 -0500
Subject: [PATCH 136/223] Notifications when tab not focused

---
 src/app/App.vue            | 6 +++---
 src/app/store/chat.vuex.ts | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index d856c88f..85bbc4b5 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -385,9 +385,6 @@
       this.$vxm.chat.updateMessage = recent || '';
       this.$vxm.chat.inputUpdate = true;
     }
-    if (e.code === 'ArrowDown') {
-      this.$vxm.chat.testReason({ reason: 'test', username: 'Ahalb' });
-    }
   }
 
   created() {
@@ -400,9 +397,12 @@
       if (this.$vxm.chat.autoUpdateStatus) { // Don't update if user has set themselves as away
         this.windowFocused = true;
       }
+      this.$vxm.chat.focused = true;
+      this.$vxm.chat.readChannel(this.currentTab);
     });
     window.addEventListener('blur', () => {
       this.windowFocused = false;
+      this.$vxm.chat.focused = false;
     });
   }
 
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 1c37ba69..be231fe9 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -129,6 +129,8 @@ export default class ChatModule extends VuexModule {
 
   autoUpdateStatus = true; // If away/online status should update when the tab is focused
 
+  focused = false;
+
   disconnected = false; // If the user intentionally disconnected
 
   constructor() {
@@ -1312,7 +1314,9 @@ export default class ChatModule extends VuexModule {
       return;
     }
     // Notifications should come in if slideout is open, user is in a different channel, or both
-    if ((this.slideoutOpen || channel.name !== this.chatChannel) && channel.notificationsEnabled) {
+    if (
+      (this.slideoutOpen || channel.name !== this.chatChannel || !this.focused)
+      && channel.notificationsEnabled) {
       // Notify the channel
       this.notify(channel.name);
       if (message.toLowerCase().includes(this.currentUser.username.toLowerCase())) {

From 0af89e485f0d6c61f0a1c96e46fc41a3a16c2921 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 22 Jun 2020 17:41:52 -0500
Subject: [PATCH 137/223] Tooltip shows profile image

---
 src/app/components/Messages/UserTooltip.vue | 25 ++++++++++++++++++++-
 src/app/components/Messages/Username.vue    |  3 ++-
 src/app/components/Slideout/Slideout.vue    |  2 +-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index b4b30b13..e59d01f3 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -9,6 +9,7 @@
     <ul>
       <li class="user-tooltip-user">
         <span style="color:yellow; font-size:1.25em" v-show="user.away">● </span>{{user.username}}
+        <span class="user-profile" v-show="profileImage !== ''"><img :src="profileImage"></span>
       </li>
       <li class="user-tooltip-rank">
         <span class="rank">{{rank}}</span>
@@ -38,6 +39,8 @@
 
     rank = '';
 
+    profileImage = '';
+
     $refs !: {
       container: HTMLDivElement;
     };
@@ -114,6 +117,20 @@
       });
       this.rank = 'Unranked';
     }
+
+    getProfile() {
+      this.$vxm.chat.getUserInfo({
+        user: this.user,
+        callback: (d) => {
+          const data = JSON.parse(d);
+          if (data.data !== undefined) {
+            this.profileImage = `https://eternagame.org/${data.data.user.picture}`;
+          } else {
+            this.profileImage = '';
+          }
+        },
+      });
+    }
   }
 </script>
 <style scoped lang="scss">
@@ -130,7 +147,7 @@
     height:auto;
     top:0px;
     left:0px;
-    width:300px;
+    width:250px;
     border-radius:5px;
   }
   li {
@@ -158,4 +175,10 @@
   .status::first-letter {
     text-transform: capitalize;
   }
+  .user-profile {
+    float:right;
+  }
+  img {
+    height: 1.5rem;
+  }
 </style>
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 241dacee..197c7c76 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -6,7 +6,7 @@
       class="username"
       :style="{ color: displayedColor }"
       :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
-      @mouseover="hovered = true /* Shows and hides tooltip */"
+      @mouseover="hovered = true; updateTooltipCoordinates() /* Shows and hides tooltip */"
       @mouseout="hovered = false"
       @mousemove="updateTooltipCoordinates"
     >
@@ -81,6 +81,7 @@
       this.$refs.tooltip.findRank();
       this.$refs.tooltip.description();
       this.$refs.tooltip.specialStatus();
+      this.$refs.tooltip.getProfile();
     }
 
     $refs !: {
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index e0a04150..c946670d 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -11,7 +11,7 @@
         outline: {{tabbing ? 'solid white 1px' : 'none !important'}};
       }
     </v-style>
-    <span v-if="checked">
+    <span v-show="checked">
       <span id="slideout-header">
         <SlideoutButton
           :selected="chatSelected"

From 07194b5d94cfe2d3285267f2feac691fb01f438d Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 09:37:27 -0500
Subject: [PATCH 138/223] Bug fixes, cleanup, markdown preview in toolbar

---
 src/app/components/Input/EmoticonBar.vue    | 52 ++++++++++++++++++---
 src/app/components/Input/ScalableInput.vue  |  1 +
 src/app/components/Messages/UserMessage.vue |  5 +-
 src/app/components/Messages/Username.vue    |  2 +-
 src/app/components/Panes/MessagePane.vue    |  3 +-
 src/app/store/chat.vuex.ts                  |  4 +-
 src/app/tools/Markdown.ts                   | 40 +---------------
 7 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 6fe4d07e..a0493f7e 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -1,6 +1,8 @@
 <template>
   <div id='menu-container'>
-    <div id='submenu' v-show='(emoticonsSelected || markdownSelected) && anyChatFeatures'>
+    <div
+      id='submenu'
+      v-show='(emoticonsSelected || markdownSelected || previewSelected) && anyChatFeatures'>
       <div id='emoticon-submenu' v-show="emoticonsSelected" >
         <EmoticonButton
           v-for="emoticon in emotesList"
@@ -18,6 +20,9 @@
           @md="format"
         />
       </div>
+      <div id='preview-submenu' v-show="previewSelected">
+        <div v-html="inputHTML" id="preview-content"/>
+      </div>
       <MenuButton
         id="close"
         class="other-menu-button"
@@ -36,13 +41,19 @@
         id="emoticonSelect"
         name="👍"
         styles=""
-        @button="select(false);"
+        @button="select('emoticon');"
       />
       <MenuButton
         id="markdownSelect"
         name="A"
         styles="bold italics underline"
-        @button="select(true);"
+        @button="select('markdown');"
+      />
+      <MenuButton
+        id="previewSelect"
+        name="P"
+        styles=""
+        @button="select('preview');"
       />
       <MenuButton
         name="?"
@@ -62,6 +73,8 @@
   import SendButton from './SendButton.vue';
   import MarkdownWrapButton from './MarkdownWrapButton.vue';
   import MenuButton from './MenuButton.vue';
+  import md from '@/tools/Markdown';
+  import MessagePane from '../Panes/MessagePane.vue';
   @Component({
     components: {
       SendButton,
@@ -93,14 +106,22 @@
 
     markdownSelected = false;
 
+    previewSelected = false;
+
     /* Opens emoticon or markdown submenu depending on which button was pressed */
-    select(markdown:boolean) {
-      if (markdown) {
+    select(menu:string) {
+      if (menu === 'markdown') {
         this.markdownSelected = true;
         this.emoticonsSelected = false;
-      } else {
+        this.previewSelected = false;
+      } else if (menu === 'emoticon') {
         this.markdownSelected = false;
         this.emoticonsSelected = true;
+        this.previewSelected = false;
+      } else if (menu === 'preview') {
+        this.markdownSelected = false;
+        this.emoticonsSelected = false;
+        this.previewSelected = true;
       }
       this.$emit('update');
     }
@@ -112,6 +133,7 @@
       case 'X':
         this.markdownSelected = false;
         this.emoticonsSelected = false;
+        this.previewSelected = false;
         break;
       case '?':
         this.$emit('md', 'question');
@@ -131,6 +153,16 @@
       this.$emit('md', options);
     }
 
+    @Prop()
+    inputValue = '';
+
+    get inputHTML() {
+      if (this.$parent as MessagePane) {
+        (this.$parent as MessagePane).updateFooterHeight();
+      }
+      return md.renderInline(this.inputValue);
+    }
+
     // Chat features
 
     get emoticonChatFeatures() { // Gets values from settings vuex
@@ -141,6 +173,10 @@
       return this.$vxm.settings.markdownChatFeatures;
     }
 
+    /* get previewChatFeatures() {
+      return this.$vxm.settings.markdownChatFeatures;
+    } */
+
     get anyChatFeatures() {
       return this.emoticonChatFeatures || this.markdownChatFeatures;
     }
@@ -179,4 +215,8 @@
   background-color:#043468;
   color:white;
 }
+#preview-submenu {
+  display:inline-block;
+  width:calc(100% - 30px) !important;
+}
 </style>
diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index 0ff5444e..b03e8fa2 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -34,6 +34,7 @@
   } from 'vue-property-decorator';
   import User from '@/types/user';
   import SendButton from './SendButton.vue';
+  import md from '@/tools/Markdown';
 
   @Component({
     components: {
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 99583217..88d58903 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -89,8 +89,9 @@
       // If there are tags, remove them before the message is seen
       const msg = this.message.message;
       if (this.messageHasTags(msg)) {
-        const tagsStringPosition = msg.search(/\[(.+,)*.+\]\r?$/);
-        return md.renderInline(msg.substring(0, tagsStringPosition));
+        const tagsStringPosition = msg.search(/\[#(.+,)*.+\]\r?$/);
+        const markdown = md.renderInline(msg.substring(0, tagsStringPosition));
+        return markdown;
       } // If not, just show the message
       return md.renderInline(msg);
     }
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 197c7c76..93b89d67 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -6,7 +6,7 @@
       class="username"
       :style="{ color: displayedColor }"
       :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
-      @mouseover="hovered = true; updateTooltipCoordinates() /* Shows and hides tooltip */"
+      @mouseover="hovered = true; updateTooltipCoordinates($event) /* Shows and hides tooltip */"
       @mouseout="hovered = false"
       @mousemove="updateTooltipCoordinates"
     >
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 6b96129d..eec9c551 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -16,6 +16,7 @@
         @md="format"
         @update="$nextTick($refs.pane.updateFooterHeight)"
         v-show="input"
+        :inputValue="newMessage"
       >
       <template slot="input">
         <ScalableInput
@@ -64,7 +65,7 @@
       UnreadMessageBanner,
     },
   })
-  export default class MessagesPane extends Vue {
+  export default class MessagePane extends Vue {
     @Prop({ required: true })
     data!: Channel;
 
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index be231fe9..7520adf1 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -561,7 +561,7 @@ export default class ChatModule extends VuexModule {
     message = `${message} [${this.usernameColor}]`; // Message with tags added on
     let isAction = false;
     // No posting as annon or if nothing has been actually posted
-    if (this.currentUser.username && message.replace(/\[.*\]\r?$/, '').trim() !== '') {
+    if (this.currentUser.username && message.replace(/\[#.*\]\r?$/, '').trim() !== '') {
       let post = true;
       let banned = false;
       let quieted = false;
@@ -1334,7 +1334,7 @@ export default class ChatModule extends VuexModule {
     let msg = message;
     if (this.notificationsKeywords) {
       this.notificationsKeywords.forEach(n => {
-        msg = msg.replace(n, `<mark>${n}</mark>`);
+        msg = msg.replace(n, `**${n}**`);
       });
     }
     const messageObject = new Message(
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 429c57d8..5841149e 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -2,13 +2,12 @@
 import MarkdownIt from 'markdown-it';
 
 const md = new MarkdownIt({
-  html: true,
+  html: false,
   linkify: true,
   typographer: true,
 }).disable('image');
 // Via https://github.com/markdown-it/markdown-it/blob/e6f19eab4204122e85e4a342e0c1c8486ff40c2d/docs/architecture.md
 const defaultRender = md.renderer.rules.link_open
-                      || md.renderer.rules.text
                       || function renderToken(tokens: any, idx: any, options: any,
                         env: any, self: any) {
                         return self.renderToken(tokens, idx, options);
@@ -24,46 +23,9 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
     tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
   }
 
-  const { content } = tokens[idx + 1];
-  // If the text it contains is a screenshot, format it as a link to the screenshot
-  if (content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
-    return `<a target="_blank" href="${content}">`;
-  }
   return defaultRender(tokens, idx, options, env, self);
 
   // pass token to default renderer.
   // return defaultRender(tokens, idx, options, env, self);
 };
-md.renderer.rules.text = function link(tokens, idx, options, env, self) {
-  // If it's a screenshot, format it as an image instead
-  if (tokens[idx].content.match(/https:\/\/eternagame.org\/sites\/default\/files\/chat_screens\/\d{6}_\d{10}\.png/)) {
-    const { content } = tokens[idx];
-    return `<img src="${content}" style="width:calc(100% - 25px); max-width:750px">`;
-  }
-  // If there's a channel, format it and make sure it can be clicked to visit the channel
-  if (tokens[idx].content.match(/#.+/)) {
-    let { content } = tokens[idx];
-    const channel = tokens[idx].content.match(/#\S+/g);
-    if (!channel) return defaultRender(tokens, idx, options, env, self);
-    // Wraps channel name in <mark> tags and flags it as a channel name
-    content = content.replace(channel[0], `<mark class="channel-link" style="cursor:pointer">${channel[0]}</mark>`);
-    return content;
-  }
-  // If there's a username, format it and make sure it can be clicked to display a tooltip
-  if (tokens[idx].content.match(/@.+/)) {
-    let { content } = tokens[idx];
-    const user = tokens[idx].content.match(/@\S+/g);
-    if (!user) return defaultRender(tokens, idx, options, env, self);
-    // Wraps username in <mark> tags and flags it as a username
-    content = content.replace(user[0], `<mark class="user-link" style="cursor:pointer">${user[0]}</mark>`);
-    return content;
-  }
-  // Quotes
-  if (tokens[idx].content.match(/^> .+/)) {
-    const { content } = tokens[idx];
-    return `<blockquote>"${content.replace(/> ?/, '')}"</blockquote>`;
-  }
-  return defaultRender(tokens, idx, options, env, self);
-};
-
 export default md;

From 37b0a927d78fafe6c21fb2d946ef4868533fb135 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 11:05:41 -0500
Subject: [PATCH 139/223] Preview shows selected text in input

---
 src/app/components/Input/EmoticonBar.vue   | 10 +++--
 src/app/components/Input/ScalableInput.vue | 43 +++++++++++++++++-----
 src/app/components/Panes/MessagePane.vue   |  4 ++
 src/app/components/Panes/Pane.vue          |  2 +
 4 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index a0493f7e..e90e0ac7 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -156,11 +156,15 @@
     @Prop()
     inputValue = '';
 
+    @Prop()
+    selection !: number[];
+
     get inputHTML() {
-      if (this.$parent as MessagePane) {
-        (this.$parent as MessagePane).updateFooterHeight();
+      let value = this.inputValue;
+      if (this.selection !== [0, 0] && this.selection[1] - this.selection[0] > 0) {
+        value = value.slice(this.selection[0], this.selection[1]);
       }
-      return md.renderInline(this.inputValue);
+      return md.renderInline(value);
     }
 
     // Chat features
diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index b03e8fa2..9df0e0d5 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -19,6 +19,8 @@
       ref="textarea"
       @focus="$emit('focused', true)"
       @blur="$emit('focused', false)"
+      @select="updateSelection"
+      @click="deselect"
     />
     <SendButton @send="send"/>
     <div
@@ -168,8 +170,8 @@
       const newText = `${text.slice(0, startPosition)}${inside}${text.slice(startPosition, endPosition)}${inside}${text.slice(endPosition)}`;
       this.value = newText;
       this.$refs.textarea.value = newText;
-      this.$refs.textarea.setSelectionRange( // Moves cursor after selection
-        endPosition + inside.length / 2 + 1,
+      this.$refs.textarea.setSelectionRange( // Reselects previously selected text
+        startPosition + inside.length / 2 + 1,
         endPosition + inside.length / 2 + 1,
       );
     }
@@ -204,6 +206,7 @@
     }
 
     updateHeight() {
+      if (!this.$refs || !this.$refs.hiddenDiv) return;
       const { hiddenDiv } = this.$refs;
       hiddenDiv.textContent = this.value;
       if (this.height !== this.$refs.hiddenDiv.clientHeight) {
@@ -260,14 +263,33 @@
 
     // Finds the word (not character) at an index
     wordAt(pos: number) {
-    const str = this.value;
-    const left = str.slice(0, pos + 1).search(/\S+$/);
-    const right = str.slice(pos).search(/\s/);
-    if (right < 0) {
+      const str = this.value;
+      const left = str.slice(0, pos + 1).search(/\S+$/);
+      const right = str.slice(pos).search(/\s/);
+      if (right < 0) {
         return str.slice(left);
+      }
+      return str.slice(left, right + pos);
+    }
+
+    updateSelection() {
+      if (!this.$refs || !this.$refs.textarea) return;
+      const { textarea } = this.$refs;
+      this.$emit('select', [textarea.selectionStart, textarea.selectionEnd]);
+      this.selected = true; // Set selected
+      // Avoids deselecting when a click is detected at the end of a selection
+      setTimeout(() => { this.selected = false; }, 0);
+    }
+
+    selected = false;
+
+    deselect() {
+      // If the click isn't the end of the selection
+      if (!this.selected) {
+        // Deselect so the preview shows the entire string
+        this.$emit('select', [0, 0]);
+      }
     }
-    return str.slice(left, right + pos);
-}
   }
 </script>
 
@@ -300,8 +322,9 @@
     visibility: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
-    border: 1px solid;
-    padding-right:0px;
+    border: none;
+    padding-right:50px; /* Makes sure height updates when it should */
+    width: calc(100% - 2px);
   }
   .send-button { /* Send message button */
     position: absolute;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index eec9c551..7461ffb2 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -17,6 +17,7 @@
         @update="$nextTick($refs.pane.updateFooterHeight)"
         v-show="input"
         :inputValue="newMessage"
+        :selection="selection"
       >
       <template slot="input">
         <ScalableInput
@@ -28,6 +29,7 @@
           @updateHeight="$nextTick($refs.pane.updateFooterHeight)"
           ref="input"
           @focused="updateFocus"
+          @select="selection = $event"
         />
       </template>
       </EmoticonBar>
@@ -94,6 +96,8 @@
       }
     }
 
+    selection: number[] = [];
+
     @Prop({ required: true })
     visibility!: boolean;
 
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 96b79fdd..887dee2a 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -55,6 +55,7 @@
 
     scrollHandle(evt: any) {
       const { container } = this;
+      if (!container) return;
       const actualScrollHeight = container.scrollHeight - this.container.clientHeight;
       if (evt.type === 'ps-scroll-y') {
         this.$forceUpdate();
@@ -83,6 +84,7 @@
 
     @Watch('visibility')
     updateFooterHeight() {
+      if (!this.$refs || !this.$refs.footer) return;
       this.footerHeight = this.$refs.footer.clientHeight;
       this.onContentChanged();
     }

From 74a96f476f384480c28c29f6f4a9acd10d616328 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 12:42:45 -0500
Subject: [PATCH 140/223] Possibly spoofed links open confirmation modal

---
 src/app/components/LinkModal.vue            | 70 +++++++++++++++++++++
 src/app/components/Messages/UserMessage.vue | 29 +++++----
 2 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/LinkModal.vue

diff --git a/src/app/components/LinkModal.vue b/src/app/components/LinkModal.vue
new file mode 100644
index 00000000..855ed52f
--- /dev/null
+++ b/src/app/components/LinkModal.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="link panel" v-if="openModal">
+    <div class="trans-panel rounded-10">
+      <form>
+        <table>
+          <tr>
+            <td>This link goes to <a target="_blank" :href="url">{{url}}</a>.</td>
+          </tr>
+        </table>
+        <div
+          class="btn link-button"
+          style="width: 100%; left: 50%; margin-top:10px"
+          @click="openModal = false"
+        >
+        <a :href="url" target="_blank">Continue</a>
+        </div>
+        <div
+          class="btn link-button"
+          style="width: 100%; left: 50%; margin-top:10px;"
+          @click="openModal = false;"
+        >
+          Cancel
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import BootstrapVue from 'bootstrap-vue';
+  import { Component, Vue, Prop } from 'vue-property-decorator';
+
+  Vue.use(BootstrapVue);
+
+  @Component
+  export default class LinkModal extends Vue {
+    url !: string;
+
+    openModal = false;
+  }
+</script>
+
+<style lang="scss">
+@import "../assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+  .link {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    padding: 10px;
+    background-color:#043468;
+    border-radius:10px;
+    z-index:3;
+  }
+
+  td {
+    padding: 2px;
+  }
+
+  .link-button {
+    color:white;
+    background-color:$green !important;
+  }
+
+  .link-button > a:hover {
+    text-decoration: none;
+  }
+</style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 88d58903..7d17ffa6 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -44,6 +44,7 @@
         :message="message"
       />
     </div>
+    <LinkModal ref="linkModal"/>
   </li>
 </template>
 
@@ -55,6 +56,7 @@
   import ActionMenu from './ActionMenu.vue';
   import md from '@/tools/Markdown';
   import UserTooltip from './UserTooltip.vue';
+  import LinkModal from '@/components/LinkModal.vue';
 
 
   @Component({
@@ -62,6 +64,7 @@
       Username,
       UserTooltip,
       ActionMenu,
+      LinkModal,
     },
   })
   export default class UserMessage extends Vue {
@@ -161,6 +164,18 @@
           window.open(`https://${this.$vxm.chat.workbranch}/web/player/${user.uid}/`);
         });
       });
+      const usernames = Object.keys(this.$vxm.chat.connectedUsers);
+      [...this.$el.getElementsByTagName('a')]
+        .filter(e => e.href !== e.innerText)
+        .filter(e => !usernames.includes(e.innerText.replace('●', '').trim().replace(':', '').trim()))
+        .forEach(e => {
+        e.addEventListener('click', ev => {
+          ev.preventDefault();
+          ev.stopImmediatePropagation();
+          if (e.href.trim() !== '') this.$refs.linkModal.url = e.href;
+          this.$refs.linkModal.openModal = true;
+        });
+      });
     }
 
     tooltipX = 0;
@@ -198,6 +213,7 @@
       contextMenu: HTMLFormElement;
       msg: HTMLSpanElement;
       clickTooltip: UserTooltip;
+      linkModal: LinkModal;
     };
 
     openContextMenu(e: MouseEvent) {
@@ -274,19 +290,6 @@
     color:#c0dce7;
     position:relative;
   }
-  blockquote {
-    font-weight: bolder;
-    display:inline;
-  }
-  blockquote::before {
-    content: "";
-    margin-right:2px;
-    border:none;
-    border-right:5px solid gray;
-    border-radius:5px;
-    width:5px;
-    height:inherit;
-  }
   mark:hover {
     color:white;
   }

From a5c8e1c04eb1e9f041117c5070162cdce7417dd4 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 13:04:27 -0500
Subject: [PATCH 141/223] Readded channel and user message links

---
 src/app/components/Messages/UserMessage.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 7d17ffa6..f1ad56f1 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -93,10 +93,23 @@
       const msg = this.message.message;
       if (this.messageHasTags(msg)) {
         const tagsStringPosition = msg.search(/\[#(.+,)*.+\]\r?$/);
-        const markdown = md.renderInline(msg.substring(0, tagsStringPosition));
+        let markdown = md.renderInline(msg.substring(0, tagsStringPosition));
+        [...markdown.matchAll(/#\S+\s/g)].forEach(e => {
+          markdown = markdown.replace(e[0].trim(), `<mark class="channel-link">${e[0].trim()}</mark>`);
+        });
+        [...markdown.matchAll(/@\S+\s/g)].forEach(e => {
+          markdown = markdown.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
+        });
         return markdown;
       } // If not, just show the message
-      return md.renderInline(msg);
+      let markdown = md.renderInline(msg);
+      [...markdown.matchAll(/#\S+\s/g)].forEach(e => {
+        markdown = markdown.replace(e[0].trim(), `<mark class="channel-link">${e[0].trim()}</mark>`);
+      });
+      [...markdown.matchAll(/@\S+\s/g)].forEach(e => {
+        markdown = markdown.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
+      });
+      return markdown;
     }
 
     mounted() {
@@ -195,7 +208,7 @@
     }
 
     parseMessageTags(message:string) { // Gets tags as array from message
-      const tagsStringPosition = message.search(/\[(.+,)*.+\]\r?$/); // Searches for [...,...] at end of message
+      const tagsStringPosition = message.search(/\[#(.+,)*.+\]\r?$/); // Searches for [...,...] at end of message
       let tagsString = message.substring(tagsStringPosition); // Gets tags as a string
       if (tagsString.includes('\r')) { // In history messages, message ends with \r
         tagsString = tagsString.substring(1, tagsString.length - 2); // Removes bracket
@@ -206,7 +219,7 @@
     }
 
     messageHasTags(message:string) { // If a message has any tags
-      return message.match(/\[(.+,)*.+\]\r?$/);
+      return message.match(/\[#(.+,)*.+\]\r?$/);
     }
 
     $refs!: {

From 832bbacee26eebc4f5542380b83a77b70eaf5896 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 13:43:35 -0500
Subject: [PATCH 142/223] Screenshots and keywords appear correctly,
 consecutive messages by user are shown without username

---
 src/app/components/Messages/UserMessage.vue | 38 ++++++++++++++-------
 src/app/components/Panes/MessagePane.vue    |  1 +
 src/app/store/chat.vuex.ts                  |  7 ++--
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index f1ad56f1..3e870872 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -10,10 +10,11 @@
           :user="message.user"
           :color="usernameColor"
           :is-action="isAction"
-          v-if="!isNotice"
+          v-if="!isNotice && !sameUserAsPrevious"
         >{{ isAction || !message.user.username ? '': ':' }}
         </Username>
-        &lrm;<span
+        &lrm;
+        <span
           ref="msg"
           :style="{
             fontStyle:isNotice ? 'italic' : '',
@@ -57,7 +58,7 @@
   import md from '@/tools/Markdown';
   import UserTooltip from './UserTooltip.vue';
   import LinkModal from '@/components/LinkModal.vue';
-
+  import { Channel } from '@/store/chat.vuex';
 
   @Component({
     components: {
@@ -90,17 +91,10 @@
 
     get formattedMessage(): string {
       // If there are tags, remove them before the message is seen
-      const msg = this.message.message;
+      let msg = this.message.message;
       if (this.messageHasTags(msg)) {
         const tagsStringPosition = msg.search(/\[#(.+,)*.+\]\r?$/);
-        let markdown = md.renderInline(msg.substring(0, tagsStringPosition));
-        [...markdown.matchAll(/#\S+\s/g)].forEach(e => {
-          markdown = markdown.replace(e[0].trim(), `<mark class="channel-link">${e[0].trim()}</mark>`);
-        });
-        [...markdown.matchAll(/@\S+\s/g)].forEach(e => {
-          markdown = markdown.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
-        });
-        return markdown;
+        msg = msg.substring(0, tagsStringPosition);
       } // If not, just show the message
       let markdown = md.renderInline(msg);
       [...markdown.matchAll(/#\S+\s/g)].forEach(e => {
@@ -109,6 +103,9 @@
       [...markdown.matchAll(/@\S+\s/g)].forEach(e => {
         markdown = markdown.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
       });
+      [...markdown.matchAll(/>https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
+        markdown = markdown.replace(e[0].trim(), `><img class="screenshot" src="${e[0].trim().substring(1)}">`);
+      });
       return markdown;
     }
 
@@ -222,6 +219,18 @@
       return message.match(/\[#(.+,)*.+\]\r?$/);
     }
 
+    @Prop()
+    messageIndex !: number;
+
+    get sameUserAsPrevious() {
+      const channelName = this.message.target;
+      const channel = this.$vxm.chat.channels[channelName];
+      const { username } = this.message.user;
+      if (!channel || !channel.postedMessages[this.messageIndex - 1]) return false;
+      const previousMessage = channel.postedMessages[this.messageIndex - 1];
+      return username === previousMessage.user.username;
+    }
+
     $refs!: {
       contextMenu: HTMLFormElement;
       msg: HTMLSpanElement;
@@ -306,4 +315,9 @@
   mark:hover {
     color:white;
   }
+
+  .screenshot {
+    width:80%;
+    max-width:500px;
+  }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 7461ffb2..f56c5655 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -5,6 +5,7 @@
         v-for="(message, i) in data.postedMessages"
         :key="i"
         :message="message"
+        :messageIndex="i"
         :style="{fontSize:fontSize}"
       />
       <ConnectingMessage/>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 7520adf1..aaec5750 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -469,7 +469,7 @@ export default class ChatModule extends VuexModule {
     let message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
     if (this.notificationsKeywords) {
       this.notificationsKeywords.forEach(n => {
-        message = message.replace(n, `<mark>${n}</mark>`);
+        message = message.replace(` ${n}`, ` **${n}**`);
       });
     }
     const user = parts[1].substring(1, parts[1].indexOf('@'));
@@ -1225,6 +1225,7 @@ export default class ChatModule extends VuexModule {
       this.postMessage(
         new Message(`You have been kicked from chat${params.message ? ` - ${params.message}` : ''}`),
       );
+      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channel?.name));
     } else {
       this.removeUser(username);
     }
@@ -1334,7 +1335,7 @@ export default class ChatModule extends VuexModule {
     let msg = message;
     if (this.notificationsKeywords) {
       this.notificationsKeywords.forEach(n => {
-        msg = msg.replace(n, `**${n}**`);
+        msg = msg.replace(` ${n}`, ` **${n}**`);
       });
     }
     const messageObject = new Message(
@@ -1477,6 +1478,7 @@ export default class ChatModule extends VuexModule {
     if (!channel) return;
     if (!channel.banned) {
       this.postMessage(new Message('You have been banned', channelName));
+      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
     }
     channel.banned = BanStatus.BAN_STATUS_BANNED;
     Object.values(this.channels).forEach((c) => {
@@ -1490,6 +1492,7 @@ export default class ChatModule extends VuexModule {
     if (!channel) return;
     if (!channel.banned) {
       this.postMessage(new Message('You have been muted', channelName));
+      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
     }
     channel.banned = BanStatus.BAN_STATUS_QUIET;
   }

From eb22008e2b760cda5a4dc7620125f21c4dddc5d2 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 15:44:12 -0500
Subject: [PATCH 143/223] Desktop notifications

---
 .../Sections/NotificationsSection.vue         | 33 +++++++++++++++++++
 src/app/store/chat.vuex.ts                    |  9 +++++
 2 files changed, 42 insertions(+)

diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index fd977e73..32f0b208 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -54,6 +54,10 @@
           If you have multiple keywords, separate them with commas.
           Your username is automatically a keyword.
         </p>
+        <h6>Desktop Notifications</h6>
+        <button class="btn settings-button" @click="handleDesktopNotificationClick">
+          {{this.desktopNotifications ? 'Disable' : 'Enable'}}
+        </button>
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -146,6 +150,31 @@
 
     indicator:string = '(!)';
 
+    desktopNotifications = false;
+
+    handleDesktopNotificationClick() {
+      if (this.desktopNotifications) {
+        this.desktopNotifications = false;
+        this.$vxm.chat.desktopNotifications = false;
+        localStorage.desktopNotifications = JSON.stringify(false);
+      } else {
+        this.requestDesktopNotifications();
+      }
+    }
+
+    requestDesktopNotifications() {
+      Notification.requestPermission(((result) => {
+        if (result === 'granted') {
+          this.desktopNotifications = true;
+          this.$vxm.chat.desktopNotifications = true;
+          localStorage.desktopNotifications = JSON.stringify(true);
+        } else {
+          this.desktopNotifications = false;
+          this.$vxm.chat.desktopNotifications = false;
+          localStorage.desktopNotifications = JSON.stringify(false);
+        }
+      }));
+    }
 
     @Watch('indicator')
     indicatorChanged() {
@@ -168,6 +197,10 @@
       } else {
         this.indicator = this.$vxm.settings.indicator;
       }
+      if (localStorage.desktopNotifications) {
+        this.desktopNotifications = JSON.parse(localStorage.desktopNotifications);
+        this.$vxm.chat.desktopNotifications = this.desktopNotifications;
+      }
     }
   }
 </script>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index aaec5750..5e8c0280 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -133,6 +133,8 @@ export default class ChatModule extends VuexModule {
 
   disconnected = false; // If the user intentionally disconnected
 
+  desktopNotifications = false;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -198,6 +200,13 @@ export default class ChatModule extends VuexModule {
     if (trueChannel) {
       // Turning on notifications for that channel
       trueChannel.notifications = true;
+      if (this.desktopNotifications) {
+        const msg = trueChannel.postedMessages[trueChannel.postedMessages.length - 1];
+        const notification = new Notification(`New message in ${channel}`, {
+          body: `${msg.user.username}: ${msg.message}`,
+          tag: `new-message-${msg.target}`,
+        });
+      }
     }
   }
 

From 66f6ff0f74084c704c4fb557e22a30b51a009bdd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 18:11:14 -0500
Subject: [PATCH 144/223] Replaced some settings buttons with switches

---
 .../Settings/Sections/IgnoredSection.vue      |  39 ++--
 .../Sections/NotificationsSection.vue         | 100 ++-------
 .../Settings/Sections/StatusSection.vue       |  15 +-
 .../Settings/Sections/ToolbarSection.vue      | 206 ++++++------------
 .../Settings/SettingsEnableDisable.vue        |  62 ++++++
 .../Slideout/Settings/SettingsSwitch.vue      |  72 ++++++
 6 files changed, 265 insertions(+), 229 deletions(-)
 create mode 100644 src/app/components/Slideout/Settings/SettingsEnableDisable.vue
 create mode 100644 src/app/components/Slideout/Settings/SettingsSwitch.vue

diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
index c785b558..e0d0f200 100644
--- a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -1,26 +1,27 @@
 <template>
   <SettingsSection title="Ignored" >
-      <table style="width:175px" >
-        <tr v-for="user in ignoredUsers" :key="user.Username">
+      <ul style="margin-bottom: 0">
+        <li v-for="user in ignoredUsers" :key="user">
+          <span style="vertical-align: sub">{{user}}</span>
           <button
             :style="{ fontSize:`${11 / 14}rem` }"
-            style="right:0; width:150px;"
             class='unignore-user btn settings-button'
             v-on:click="unignore(user)" >
-            Unignore {{user}}
+            Unignore
           </button>
-        </tr>
-        <tr v-show="!anyIgnoredUsers">No users ignored</tr>
-        <tr><button
+        </li>
+        <li v-show="!anyIgnoredUsers">No users ignored</li>
+        <li v-show="anyIgnoredUsers" class="height-normal">
+          <button
           :style="{ fontSize:`${11 / 14}rem` }"
-          style="margin-top:5px; width:150px"
-          class='unignore-user btn settings-button'
+          style="width:100%"
+          class='btn settings-button'
           v-on:click="unignore('*')"
-          v-show="anyIgnoredUsers"
-        >
+          >
           Unignore All
-        </button></tr>
-      </table>
+          </button>
+        </li>
+      </ul>
     </SettingsSection>
 </template>
 <script lang="ts">
@@ -39,7 +40,6 @@
       return this.$vxm.chat.ignoredUsers;
     }
 
-    // If any users are ignored. Uses ignoredUsers.length
     get anyIgnoredUsers() {
       return this.ignoredUsers.length > 0;
     }
@@ -56,5 +56,16 @@
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
 .settings-button {
   background-color:$green;
+  display: inline-block;
+}
+li {
+  width:calc(100% - 40px);
+  height:36px;
+}
+.unignore-user {
+  float:right;
+}
+.height-normal {
+  height:auto;
 }
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 32f0b208..1be359ed 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -5,39 +5,12 @@
           <tr v-for="channel in channels" :key="channel.name">
             <td>{{channel.name}}</td>
             <td>
-              <button
-                style="width:100%"
-                @click="toggleNotificationsEnabled(channel.name)"
-                :style="{ fontSize:`${11 / 14}rem` }"
-                class="btn settings-button"
-              >
-                {{channel['notificationsEnabled'] === true ? 'Disable' : 'Enable'}}
-              </button>
+              <SettingsSwitch v-model="channel.notificationsEnabled"
+              @input="updateNotifications(channel.name)" />
             </td>
           </tr>
           <tr>
-            <td class='footer'>
-              <button
-                style="width:100%"
-                :disabled="anyNotificationsDisabled"
-                @click="enableAll"
-                :style="{ fontSize:`${11 / 14}rem` }"
-                class="btn settings-button"
-              >
-                Enable all
-              </button>
-            </td>
-            <td class='footer'>
-              <button
-                style="width:100%"
-                :disabled="anyNotificationsEnabled"
-                @click="disableAll"
-                :style="{ fontSize:`${11 / 14}rem` }"
-                class="btn settings-button"
-              >
-                Disable all
-              </button>
-            </td>
+            <td colspan=2><SettingsEnableDisable :value="allEnabled" @input="updateAll" /></td>
           </tr>
         </table>
         <h6>Indicator</h6>
@@ -55,9 +28,7 @@
           Your username is automatically a keyword.
         </p>
         <h6>Desktop Notifications</h6>
-        <button class="btn settings-button" @click="handleDesktopNotificationClick">
-          {{this.desktopNotifications ? 'Disable' : 'Enable'}}
-        </button>
+        <SettingsSwitch v-model="desktopNotifications" />
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -65,11 +36,15 @@
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
   import SettingsSection from '../SettingsSection.vue';
+  import SettingsSwitch from '../SettingsSwitch.vue';
+  import SettingsEnableDisable from '../SettingsEnableDisable.vue';
   import { Channel } from '@/store/chat.vuex';
 
   @Component({
     components: {
       SettingsSection,
+      SettingsSwitch,
+      SettingsEnableDisable,
     },
   })
   export default class NotificationsSection extends Vue {
@@ -87,10 +62,9 @@
     }
 
     // Toggle whether notifications are enabled for a specific channel
-    toggleNotificationsEnabled(channel:string) {
+    updateNotifications(channel:string) {
       const trueChannel = this.$vxm.chat.channels[channel];
       if (trueChannel) {
-        trueChannel.notificationsEnabled = !trueChannel.notificationsEnabled;
         if (!trueChannel.notificationsEnabled) {
           trueChannel.notifications = false;
         }
@@ -101,45 +75,16 @@
       }
     }
 
-    // If any notifications are enabled
-    get anyNotificationsEnabled() {
-      // Iterates through each channel and checks if notifications are enabled
-      return !Object.values(this.channels).some(item => {
-        // Making sure nothing is undefined and gets value from channel
-        const { notificationsEnabled } = item as Channel;
-        return notificationsEnabled;
-      });
-    }
-
-    // If any notifications are disabled
-    get anyNotificationsDisabled() {
-      // Again, iterating through each channel
-      return !Object.values(this.channels).some(item => {
-        // Making sure nothing is undefined and gets value from channel
-        const { notificationsEnabled } = item as Channel;
-        return !notificationsEnabled;
-      });
-    }
-
-    // Enables notifications for all channels
-    enableAll() {
-      // For each channel
-      Object.values(this.channels).forEach(item => {
-        // If notifications aren't enabled, toggle their value. If they are, leave them alone
-        if (!(item as Channel).notificationsEnabled) {
-          this.toggleNotificationsEnabled((item as Channel).name);
-        }
-      });
+    get allEnabled() {
+      const channels = Object.values(this.$vxm.chat.channels);
+      if (channels.every(e => e!.notificationsEnabled)) return true;
+      if (channels.every(e => !e!.notificationsEnabled)) return false;
+      return null;
     }
 
-    // Disables notifications for all channels
-    disableAll() {
-      // For each channel
-      Object.values(this.channels).forEach(item => {
-        // If notifications are enabled, toggle their value. If they aren't, leave them alone
-        if ((item as Channel).notificationsEnabled) {
-          this.toggleNotificationsEnabled((item as Channel).name);
-        }
+    updateAll(to: boolean) {
+      Object.values(this.$vxm.chat.channels).forEach(e => {
+        e!.notificationsEnabled = to;
       });
     }
 
@@ -152,13 +97,13 @@
 
     desktopNotifications = false;
 
-    handleDesktopNotificationClick() {
+    @Watch('desktopNotifications')
+    desktopNotificationsChanged() {
       if (this.desktopNotifications) {
-        this.desktopNotifications = false;
+        this.requestDesktopNotifications();
+      } else {
         this.$vxm.chat.desktopNotifications = false;
         localStorage.desktopNotifications = JSON.stringify(false);
-      } else {
-        this.requestDesktopNotifications();
       }
     }
 
@@ -225,4 +170,7 @@ table {
 .feature-button-container {
   padding:2px;
 }
+input {
+  margin-bottom:10px;
+}
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 8077a08d..cad5a02f 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -1,9 +1,12 @@
 <template>
   <SettingsSection title="Status" >
     <p>You are currently marked as {{userStatus ? 'away' : 'online'}}</p>
-      <button class="btn settings-button" @click="changeStatus(!userStatus)">
-        Toggle
-      </button>
+    <SettingsEnableDisable
+      :value="!userStatus"
+      @input="changeStatus"
+      onText="ONLINE"
+      offText="AWAY"
+      :width="125"/>
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -11,16 +14,18 @@
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
   import SettingsSection from '../SettingsSection.vue';
+  import SettingsEnableDisable from '../SettingsEnableDisable.vue';
 
   @Component({
     components: {
       SettingsSection,
+      SettingsEnableDisable,
     },
   })
   export default class StatusSection extends Vue {
     changeStatus(to:boolean) {
-      this.$vxm.chat.autoUpdateStatus = !to;
-      if (!to) {
+      this.$vxm.chat.autoUpdateStatus = to;
+      if (to) {
         this.$vxm.chat.setUnaway();
       } else {
         this.$vxm.chat.setAway();
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 6d8133f4..64da09f8 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -3,39 +3,16 @@
     <p>These enable you to send emoticons and formatted text.</p>
     <table>
       <tr>
-        <td class="feature-button-container left-side">
-          <button
-            @click="toggleMarkdown"
-            :style="{ fontSize: `${11 / 14}rem` }"
-            class="btn settings-button feature-button"
-          >{{ markdownChatFeatures ? "Disable" : "Enable" }} markdown</button>
-        </td>
-        <td class="feature-button-container">
-          <button
-            @click="toggleEmoticons"
-            :style="{ fontSize: `${11 / 14}rem` }"
-            class="btn settings-button feature-button"
-          >{{ emoticonChatFeatures ? "Disable" : "Enable" }} emoticons</button>
-        </td>
+        <td class="left-side">Emoticons</td>
+        <td><SettingsSwitch v-model="emoticonChatFeatures" /></td>
       </tr>
       <tr>
-        <td class="feature-button-container left-side">
-          <button
-            @click="disableAllChatFeatures"
-            :disabled="!allChatFeatures"
-            :style="{ fontSize: `${11 / 14}rem` }"
-            class="btn settings-button feature-button"
-          >Disable all</button>
-        </td>
-        <td class="feature-button-container">
-          <button
-            @click="enableAllChatFeatures"
-            :disabled="allChatFeatures"
-            :style="{ fontSize: `${11 / 14}rem` }"
-            style="margin-top:1px;"
-            class="btn settings-button feature-button"
-          >Enable all</button>
-        </td>
+        <td class="left-side">Markdown</td>
+        <td><SettingsSwitch v-model="markdownChatFeatures" /></td>
+      </tr>
+      <tr>
+        <td class="left-side">All</td>
+        <td><SettingsEnableDisable :value="allChatFeatures" @input="allChatFeaturesChanged" /></td>
       </tr>
     </table>
 
@@ -63,135 +40,96 @@
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
   import SettingsSection from '../SettingsSection.vue';
+  import SettingsSwitch from '../SettingsSwitch.vue';
+  import SettingsEnableDisable from '../SettingsEnableDisable.vue';
 
 @Component({
   components: {
     SettingsSection,
+    SettingsSwitch,
+    SettingsEnableDisable,
   },
 })
   export default class ToolbarSection extends Vue {
-  allChatFeatures = true;
+    get allChatFeatures() {
+      if (this.emoticonChatFeatures && this.markdownChatFeatures) return true;
+      if (!this.emoticonChatFeatures && !this.markdownChatFeatures) return false;
+      return null;
+    }
 
-  emoticonChatFeatures = true;
+    allChatFeaturesChanged(to:boolean) {
+      this.emoticonChatFeatures = to;
+      this.markdownChatFeatures = to;
+    }
 
-  markdownChatFeatures = true;
+  emoticonChatFeatures = true;
 
-  toggleEmoticons() {
-    this.emoticonChatFeatures = !this.emoticonChatFeatures;
-    if (this.emoticonChatFeatures && this.markdownChatFeatures) {
-      this.allChatFeatures = this.emoticonChatFeatures;
-      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-    }
-    if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
-      this.allChatFeatures = this.emoticonChatFeatures;
-      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-    }
+  @Watch('emoticonChatFeatures')
+  emoticonChatFeaturesChanged() {
+    localStorage.emoticonChatFeatures = JSON.stringify(this.emoticonChatFeatures);
     this.$vxm.settings.emoticonChatFeatures = this.emoticonChatFeatures;
-    localStorage.emoticonChatFeatures = JSON.stringify(
-      this.emoticonChatFeatures,
-    );
-  }
-
-  toggleMarkdown() {
-    this.markdownChatFeatures = !this.markdownChatFeatures;
-    if (this.emoticonChatFeatures && this.markdownChatFeatures) {
-      this.allChatFeatures = this.markdownChatFeatures;
-      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-    }
-    if (!this.emoticonChatFeatures && !this.markdownChatFeatures) {
-      this.allChatFeatures = this.markdownChatFeatures;
-      this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-      localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-    }
-    this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
-    localStorage.markdownChatFeatures = JSON.stringify(
-      this.markdownChatFeatures,
-    );
   }
 
-  toggleAllChatFeatures() {
-    this.allChatFeatures = !this.allChatFeatures;
-    this.emoticonChatFeatures = this.allChatFeatures;
-    this.markdownChatFeatures = this.allChatFeatures;
-    this.$vxm.settings.allChatFeatures = this.allChatFeatures;
-    localStorage.allChatFeatures = JSON.stringify(this.allChatFeatures);
-    this.$vxm.settings.emoticonChatFeatures = this.allChatFeatures;
-    localStorage.emoticonChatFeatures = JSON.stringify(this.allChatFeatures);
-    this.$vxm.settings.markdownChatFeatures = this.allChatFeatures;
-    localStorage.markdownChatFeatures = JSON.stringify(this.allChatFeatures);
-  }
+  markdownChatFeatures = true;
 
-  enableAllChatFeatures() {
-    if (!this.allChatFeatures) {
-      this.toggleAllChatFeatures();
-    }
+  @Watch('markdownChatFeatures')
+  markdownChatFeaturesChanged() {
+    localStorage.markdownChatFeatures = JSON.stringify(this.markdownChatFeatures);
+    this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
   }
 
-  disableAllChatFeatures() {
-    if (this.allChatFeatures) {
-      this.toggleAllChatFeatures();
-    }
-  }
 
-  // Custom emoticons
+    // Custom emoticons
 
-  update(e: Event) {
-    const targ = e.target as HTMLInputElement;
-    const id = Number(targ.id);
-    let { value } = targ;
-    value = value.trim();
-    while ([...value].length > 1) {
-      value = value.substring(0, value.length - 1);
-    }
-    const emoticonRegex = /[^\w\d\p{P}\p{S}]/;
-    if (value.match(emoticonRegex)) {
-      if (this.customEmoticons.some(j => j === value)) {
-        this.emoticonErrorMessage = 'You are using that emoticon in another slot';
-        return;
+    update(e: Event) {
+      const targ = e.target as HTMLInputElement;
+      const id = Number(targ.id);
+      let { value } = targ;
+      value = value.trim();
+      while ([...value].length > 1) {
+        value = value.substring(0, value.length - 1);
       }
-      Vue.set(this.$vxm.chat.customEmoticons, id, value);
-      if (localStorage) {
-        localStorage.customEmoticons = JSON.stringify(
-          this.$vxm.chat.customEmoticons,
-        );
+      const emoticonRegex = /[^\w\d\p{P}\p{S}]/;
+      if (value.match(emoticonRegex)) {
+        if (this.customEmoticons.some(j => j === value)) {
+          this.emoticonErrorMessage = 'You are using that emoticon in another slot';
+          return;
+        }
+        Vue.set(this.$vxm.chat.customEmoticons, id, value);
+        if (localStorage) {
+          localStorage.customEmoticons = JSON.stringify(
+            this.$vxm.chat.customEmoticons,
+          );
+        }
+        this.emoticonErrorMessage = '';
+      } else {
+        this.emoticonErrorMessage = `${value} is not a valid emoticon`;
       }
-      this.emoticonErrorMessage = '';
-    } else {
-      this.emoticonErrorMessage = `${value} is not a valid emoticon`;
-    }
-    if (value.trim() === '') {
-      this.emoticonErrorMessage = '';
+      if (value.trim() === '') {
+        this.emoticonErrorMessage = '';
+      }
+      targ.value = '';
     }
-    targ.value = '';
-  }
 
   emoticonErrorMessage = '';
 
-  get customEmoticons() {
-    return this.$vxm.chat.customEmoticons;
-  }
-
-  created() {
-    if (localStorage.allChatFeatures) {
-      this.allChatFeatures = JSON.parse(localStorage.allChatFeatures);
-    } else {
-      this.allChatFeatures = this.$vxm.settings.allChatFeatures;
+    get customEmoticons() {
+      return this.$vxm.chat.customEmoticons;
     }
-    if (localStorage.emoticonChatFeatures) {
-      this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
-    } else {
-      this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
-    }
-    if (localStorage.markdownChatFeatures) {
-      this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
-    } else {
-      this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
+
+    created() {
+      if (localStorage.emoticonChatFeatures) {
+        this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
+      } else {
+        this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
+      }
+      if (localStorage.markdownChatFeatures) {
+        this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
+      } else {
+        this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
+      }
     }
   }
-  }
 </script>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
@@ -201,7 +139,7 @@
   background-color: $green;
 }
 .left-side {
-  padding-left: 0;
+  vertical-align: baseline;
 }
 .feature-button-container {
   padding: 2px;
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
new file mode 100644
index 00000000..9b575275
--- /dev/null
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -0,0 +1,62 @@
+<template>
+  <label class="switch" :style="{ width: `${width || 64}px` }">
+    <button @click="$emit('input', false)" :disabled="value === false" id="disable">
+      {{offText || 'OFF'}}
+    </button>
+    <button @click="$emit('input', true)" :disabled="value === true" id="enable">
+      {{onText || 'ON'}}
+    </button>
+  </label>
+</template>
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class SettingsEnableDisable extends Vue {
+    @Prop()
+    value !: boolean | null;
+
+    @Prop()
+    offText !: string;
+
+    @Prop()
+    onText !: string;
+
+    @Prop()
+    width !: number;
+  }
+</script>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 64px;
+  height: 20px;
+  vertical-align: middle;
+}
+button {
+  border-radius: 0;
+  content:"";
+  background-color:$gray-400;
+  top:0;
+  bottom:0;
+  width:50%;
+  height:20px;
+  position:absolute;
+  text-align:center;
+  border:none;
+  transition: color 0.4s;
+}
+#disable {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+#enable {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  left:50%;
+}
+</style>
diff --git a/src/app/components/Slideout/Settings/SettingsSwitch.vue b/src/app/components/Slideout/Settings/SettingsSwitch.vue
new file mode 100644
index 00000000..3b49750a
--- /dev/null
+++ b/src/app/components/Slideout/Settings/SettingsSwitch.vue
@@ -0,0 +1,72 @@
+<template>
+  <label class="switch">
+    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+    <span class="slider round" />
+  </label>
+</template>
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class SettingsSwitch extends Vue {
+    @Prop()
+    value !: boolean;
+  }
+</script>
+<style lang="scss" scoped>
+@import "@/assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  vertical-align: middle;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: $gray-500;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius:34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: $green;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}
+</style>

From 3f3258f3c6090fea65a0cc15a0c0ad0a85abc162 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 18:12:57 -0500
Subject: [PATCH 145/223] Notifications channel vertically aligned w/ switch

---
 .../Slideout/Settings/Sections/NotificationsSection.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 1be359ed..72c9a955 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -3,7 +3,7 @@
     <h6>Ignored</h6>
         <table>
           <tr v-for="channel in channels" :key="channel.name">
-            <td>{{channel.name}}</td>
+            <td style="vertical-align:baseline">{{channel.name}}</td>
             <td>
               <SettingsSwitch v-model="channel.notificationsEnabled"
               @input="updateNotifications(channel.name)" />

From 381cd4b79bde8c3b7f4abd05b535aeb7bace84dd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 21:56:21 -0500
Subject: [PATCH 146/223] Changes to layout of settings tab, bug fixes

---
 src/app/components/Input/EmoticonBar.vue      | 19 ++--
 .../Sections/NotificationsSection.vue         | 87 +++++++++++--------
 .../Settings/Sections/OperSection.vue         | 20 ++++-
 .../Settings/Sections/StatusSection.vue       | 22 +++--
 .../Settings/Sections/TextSizeSection.vue     | 17 ++--
 .../Settings/Sections/ToolbarSection.vue      | 82 +++++++++--------
 .../Settings/SettingsEnableDisable.vue        | 12 +--
 .../Slideout/Settings/SettingsTooltip.vue     | 26 ++++++
 src/app/components/Slideout/Slideout.vue      |  6 +-
 src/app/store/settings.vuex.ts                |  2 +
 10 files changed, 189 insertions(+), 104 deletions(-)
 create mode 100644 src/app/components/Slideout/Settings/SettingsTooltip.vue

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index e90e0ac7..29d55958 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -3,7 +3,7 @@
     <div
       id='submenu'
       v-show='(emoticonsSelected || markdownSelected || previewSelected) && anyChatFeatures'>
-      <div id='emoticon-submenu' v-show="emoticonsSelected" >
+      <div id='emoticon-submenu' v-show="emoticonsSelected && emoticonChatFeatures" >
         <EmoticonButton
           v-for="emoticon in emotesList"
           :key="emoticon"
@@ -11,7 +11,7 @@
           class="border-right"
           @emote='add' />
       </div>
-      <div id='markdown-submenu' v-show="markdownSelected">
+      <div id='markdown-submenu' v-show="markdownSelected && markdownChatFeatures">
         <MarkdownWrapButton
           v-for="item in markdownCodes"
           :key="item"
@@ -20,7 +20,7 @@
           @md="format"
         />
       </div>
-      <div id='preview-submenu' v-show="previewSelected">
+      <div id='preview-submenu' v-show="previewSelected && previewChatFeatures">
         <div v-html="inputHTML" id="preview-content"/>
       </div>
       <MenuButton
@@ -39,18 +39,21 @@
       v-if="anyChatFeatures" >
       <MenuButton
         id="emoticonSelect"
+        v-if="emoticonChatFeatures"
         name="👍"
         styles=""
         @button="select('emoticon');"
       />
       <MenuButton
         id="markdownSelect"
+        v-if="markdownChatFeatures"
         name="A"
         styles="bold italics underline"
         @button="select('markdown');"
       />
       <MenuButton
         id="previewSelect"
+        v-if="previewChatFeatures"
         name="P"
         styles=""
         @button="select('preview');"
@@ -177,12 +180,14 @@
       return this.$vxm.settings.markdownChatFeatures;
     }
 
-    /* get previewChatFeatures() {
-      return this.$vxm.settings.markdownChatFeatures;
-    } */
+    get previewChatFeatures() {
+      return this.$vxm.settings.previewChatFeatures;
+    }
 
     get anyChatFeatures() {
-      return this.emoticonChatFeatures || this.markdownChatFeatures;
+      return this.emoticonChatFeatures
+        || this.markdownChatFeatures
+        || this.previewChatFeatures;
     }
   }
 </script>
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 72c9a955..89ea3ef7 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -1,34 +1,44 @@
 <template>
   <SettingsSection title="Notifications" >
-    <h6>Ignored</h6>
-        <table>
-          <tr v-for="channel in channels" :key="channel.name">
-            <td style="vertical-align:baseline">{{channel.name}}</td>
-            <td>
-              <SettingsSwitch v-model="channel.notificationsEnabled"
+        <ul>
+          <li v-for="channel in channels" :key="channel.name">
+            <span style="vertical-align:baseline">{{channel.name}}</span>
+            <span class="switch">
+              <SettingsSwitch v-model="$vxm.chat.channels[channel.name].notificationsEnabled"
               @input="updateNotifications(channel.name)" />
-            </td>
-          </tr>
-          <tr>
-            <td colspan=2><SettingsEnableDisable :value="allEnabled" @input="updateAll" /></td>
-          </tr>
-        </table>
-        <h6>Indicator</h6>
-        <p>
-          This will appear in the page title if you have notifications
-        </p>
-        <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
-        <h6>Keywords</h6>
-        <p>
-          If these keywords are used in the chat, they will trigger notifications
-        </p>
-        <textarea type=text v-model="keywords" style="font-size:1rem; padding:1px;" />
-        <p>
-          If you have multiple keywords, separate them with commas.
-          Your username is automatically a keyword.
-        </p>
-        <h6>Desktop Notifications</h6>
-        <SettingsSwitch v-model="desktopNotifications" />
+            </span>
+          </li>
+          <li>
+            <span style="vertical-align:baseline">All</span>
+            <span class="switch">
+              <SettingsEnableDisable :value="allEnabled" @input="updateAll" />
+            </span>
+          </li>
+        </ul>
+        <li>
+          <span style="vertical-align:baseline">
+            Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
+          </span>
+          <span class="switch">
+            <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
+          </span>
+        </li>
+        <li>
+          <span style="vertical-align:baseline; display:inline-block">Desktop Notifications</span>
+         <span class="switch" style="vertical-align: baseline">
+           <SettingsSwitch v-model="desktopNotifications" />
+          </span>
+        </li>
+        <li>
+          <span style="vertical-align:baseline">
+            Keywords
+            <SettingsTooltip text="If you have multiple keywords, separate them with commas.
+            Your username is automatically a keyword." />
+          </span>
+          <span class="switch">
+            <input type=text v-model="keywords" style="font-size:1rem; padding:1px;">
+          </span>
+        </li>
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -38,6 +48,7 @@
   import SettingsSection from '../SettingsSection.vue';
   import SettingsSwitch from '../SettingsSwitch.vue';
   import SettingsEnableDisable from '../SettingsEnableDisable.vue';
+  import SettingsTooltip from '../SettingsTooltip.vue';
   import { Channel } from '@/store/chat.vuex';
 
   @Component({
@@ -45,6 +56,7 @@
       SettingsSection,
       SettingsSwitch,
       SettingsEnableDisable,
+      SettingsTooltip,
     },
   })
   export default class NotificationsSection extends Vue {
@@ -156,21 +168,20 @@
 .settings-button {
   background-color:$green;
 }
-td { /* Table cell in notifications settings section */
-  padding:4px;
-  width:max-content;
-}
-.footer { /* Enable and disable notifications buttons */
-  border:none;
-}
-table {
-  margin-top:2px;
-  margin-bottom:2px;
+li {
+  width: calc(100% - 40px);
+  height:1.5rem;
+  margin-bottom:10px;
+  list-style-type: none;
 }
 .feature-button-container {
   padding:2px;
 }
 input {
   margin-bottom:10px;
+  height:100%;
+}
+.switch {
+  float:right;
 }
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index f66cb2f1..7463383e 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -1,15 +1,23 @@
 <template>
   <SettingsSection title="Operator" >
-    <p>You are {{isOper ? '' : 'not'}} logged in as an operator</p>
+    <li>
+      <span>You are {{isOper ? '' : 'not'}} an operator</span>
+      <span style="float: right">
         <button
           @click="$emit('auth')"
           :style="{ fontSize:`${11 / 14}rem` }"
           class="btn settings-button"
           v-show="!isOper" >
-            Log in as operator
+            Log in
         </button>
-        <h6 v-show="isOper">Change nick</h6>
+      </span>
+    </li>
+    <li>
+      <span v-show="isOper" style="vertical-align: sub">Change nick</span>
+      <span style="float: right">
         <input v-show="isOper" @input="setNick" :value="opernick">
+      </span>
+    </li>
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -59,7 +67,11 @@
 }
 input {
   margin:2px;
-  width:calc(100% - 23px); /* Accounts for padding on both sides */
   max-width:150px; /* Big screens don't have arbitrarily large input */
 }
+li {
+  width: calc(100% - 40px);
+  list-style-type: none;
+  margin-bottom: 10px;
+}
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index cad5a02f..52b0b1f3 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -1,12 +1,16 @@
 <template>
   <SettingsSection title="Status" >
-    <p>You are currently marked as {{userStatus ? 'away' : 'online'}}</p>
-    <SettingsEnableDisable
-      :value="!userStatus"
-      @input="changeStatus"
-      onText="ONLINE"
-      offText="AWAY"
-      :width="125"/>
+    <li>
+      <span style="vertical-align: middle">You are {{userStatus ? 'away' : 'online'}}</span>
+      <span style="float:right">
+        <SettingsEnableDisable
+            :value="!userStatus"
+            @input="changeStatus"
+            onText="ONLINE"
+            offText="AWAY"
+            :width="140"/>
+      </span>
+    </li>
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -44,4 +48,8 @@
 .settings-button {
   background-color:$green;
 }
+li {
+  list-style-type: none;
+  width: calc(100% - 40px);
+}
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
index 4735e1c2..260fade1 100644
--- a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
@@ -1,12 +1,15 @@
 <template>
   <SettingsSection title="Text Size" >
       <input v-model="size" type=number min=10 max=18>
-        <p id='font-size-p'>Default is 14</p>
-        <p
-          id='font-warning'
-          v-show="size < 10 || size > 18" >
-          Font size must be a number, greater than 10, and less than 18
-        </p>
+      <p
+        id='font-warning'
+        v-show="size < 10 || size > 18" >
+        Font size must be a number between 10 and 18
+      </p>
+      <SettingsTooltip
+        text="Must be a number between 10 and 18. Default is 14"
+        style="vertical-align:middle"
+      />
     </SettingsSection>
 </template>
 <script lang="ts">
@@ -14,10 +17,12 @@
     Component, Watch, Prop, Vue,
   } from 'vue-property-decorator';
   import SettingsSection from '../SettingsSection.vue';
+  import SettingsTooltip from '../SettingsTooltip.vue';
 
   @Component({
     components: {
       SettingsSection,
+      SettingsTooltip,
     },
   })
   export default class TextSizeSection extends Vue {
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 64da09f8..8a901c15 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -1,6 +1,5 @@
 <template>
   <SettingsSection title="Toolbar Features">
-    <p>These enable you to send emoticons and formatted text.</p>
     <table>
       <tr>
         <td class="left-side">Emoticons</td>
@@ -10,29 +9,28 @@
         <td class="left-side">Markdown</td>
         <td><SettingsSwitch v-model="markdownChatFeatures" /></td>
       </tr>
+      <tr>
+        <td class="left-side">Preview</td>
+        <td><SettingsSwitch v-model="previewChatFeatures" /></td>
+      </tr>
       <tr>
         <td class="left-side">All</td>
         <td><SettingsEnableDisable :value="allChatFeatures" @input="allChatFeaturesChanged" /></td>
       </tr>
     </table>
-
-    <h6>Custom emoticons</h6>
-    <table>
-      <tbody>
-        <tr v-for="(emote, index) in customEmoticons" :key="emote">
-          <td>{{ emote }}</td>
-          <td>
-            Change to
-            <input :id="index" @input="update" style="width:1rem" />
-          </td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <td colspan="2" class="warning">{{ emoticonErrorMessage }}</td>
-        </tr>
-      </tfoot>
-    </table>
+    <ul style="margin-top:5px" v-if="$vxm.settings.emoticonChatFeatures">
+      <li>Custom emoticons</li>
+      <li v-for="(emote, index) in customEmoticons" :key="emote">
+        <span>{{ emote }}</span>
+        <span style="float:right">
+          Change to
+          <input :id="index" @input="update" style="width:1rem; vertical-align:mid; height:1rem;" />
+        </span>
+      </li>
+      <li v-show="emoticonErrorMessage && emoticonErrorMessage !== ''">
+        <span class="warning">{{ emoticonErrorMessage }}</span>
+      </li>
+    </ul>
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -52,31 +50,44 @@
 })
   export default class ToolbarSection extends Vue {
     get allChatFeatures() {
-      if (this.emoticonChatFeatures && this.markdownChatFeatures) return true;
-      if (!this.emoticonChatFeatures && !this.markdownChatFeatures) return false;
+      if (this.emoticonChatFeatures
+        && this.markdownChatFeatures
+        && this.previewChatFeatures) return true;
+      if (!this.emoticonChatFeatures
+        && !this.markdownChatFeatures
+        && !this.previewChatFeatures) return false;
       return null;
     }
 
     allChatFeaturesChanged(to:boolean) {
       this.emoticonChatFeatures = to;
       this.markdownChatFeatures = to;
+      this.previewChatFeatures = to;
     }
 
-  emoticonChatFeatures = true;
+    emoticonChatFeatures = true;
 
-  @Watch('emoticonChatFeatures')
-  emoticonChatFeaturesChanged() {
-    localStorage.emoticonChatFeatures = JSON.stringify(this.emoticonChatFeatures);
-    this.$vxm.settings.emoticonChatFeatures = this.emoticonChatFeatures;
-  }
+    @Watch('emoticonChatFeatures')
+    emoticonChatFeaturesChanged() {
+      localStorage.emoticonChatFeatures = JSON.stringify(this.emoticonChatFeatures);
+      this.$vxm.settings.emoticonChatFeatures = this.emoticonChatFeatures;
+    }
 
-  markdownChatFeatures = true;
+    markdownChatFeatures = true;
 
-  @Watch('markdownChatFeatures')
-  markdownChatFeaturesChanged() {
-    localStorage.markdownChatFeatures = JSON.stringify(this.markdownChatFeatures);
-    this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
-  }
+    @Watch('markdownChatFeatures')
+    markdownChatFeaturesChanged() {
+      localStorage.markdownChatFeatures = JSON.stringify(this.markdownChatFeatures);
+      this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
+    }
+
+    previewChatFeatures = true;
+
+    @Watch('previewChatFeatures')
+    previewChatFeaturesChanged() {
+      localStorage.previewChatFeatures = JSON.stringify(this.previewChatFeatures);
+      this.$vxm.settings.previewChatFeatures = this.previewChatFeatures;
+    }
 
 
     // Custom emoticons
@@ -139,7 +150,7 @@
   background-color: $green;
 }
 .left-side {
-  vertical-align: baseline;
+  vertical-align: sub;
 }
 .feature-button-container {
   padding: 2px;
@@ -151,4 +162,7 @@
 .warning {
   color: $warning;
 }
+li {
+  width: calc(100% - 40px)
+}
 </style>
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index 9b575275..8ec1bae9 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="switch" :style="{ width: `${width || 64}px` }">
+  <label class="switch" :style="{ width: `${width || 80}px` }">
     <button @click="$emit('input', false)" :disabled="value === false" id="disable">
       {{offText || 'OFF'}}
     </button>
@@ -33,8 +33,7 @@
 .switch {
   position: relative;
   display: inline-block;
-  width: 64px;
-  height: 20px;
+  height: 1rem;
   vertical-align: middle;
 }
 button {
@@ -44,19 +43,22 @@ button {
   top:0;
   bottom:0;
   width:50%;
-  height:20px;
+  height:24px;
   position:absolute;
-  text-align:center;
   border:none;
   transition: color 0.4s;
 }
 #disable {
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
+  text-align:center;
+  padding:0;
 }
 #enable {
   border-top-right-radius: 20px;
   border-bottom-right-radius: 20px;
   left:50%;
+  text-align: center;
+  padding:0;
 }
 </style>
diff --git a/src/app/components/Slideout/Settings/SettingsTooltip.vue b/src/app/components/Slideout/Settings/SettingsTooltip.vue
new file mode 100644
index 00000000..8d786520
--- /dev/null
+++ b/src/app/components/Slideout/Settings/SettingsTooltip.vue
@@ -0,0 +1,26 @@
+<template>
+  <span :title="text" class="settings-tooltip">◯
+  </span>
+</template>
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class SettingsTooltip extends Vue {
+    @Prop()
+    text !: string;
+  }
+</script>
+<style>
+.settings-tooltip {
+  position: relative;
+  font-size:16px;
+}
+.settings-tooltip:before {
+  content:"?";
+  position:absolute;
+  left: 5px;
+  top:2px;
+  font-size: 12px;
+}
+</style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index c946670d..4af2a141 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    style="position:relative; width:65%"
+    style="position:relative; width:70%"
     class="slideout-container"
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
@@ -175,13 +175,13 @@
   animation: slideBack 0.25s;
 }
 @keyframes slide { /* Opens slideout */
-  from { left:-65%}
+  from { left:-70%}
   to { left:0}
 }
 /* Height does need to be there for the slideout to work. Otherwise it doesn't animate */
 @keyframes slideBack { /* Closes slideout */
   to {height:100%; width:0}
-  from {height:100%; width:65%}
+  from {height:100%; width:70%}
 }
 .tall { /* When slideout is open */
   height:100%;
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index 2927e154..c2dbe95c 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -19,4 +19,6 @@ export default class SettingsModule extends VuexModule {
   emoticonChatFeatures = true;
 
   markdownChatFeatures = true;
+
+  previewChatFeatures = true;
 }

From e5961a18b74e2b6700d98846fbad6935a8672c26 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 23 Jun 2020 22:04:06 -0500
Subject: [PATCH 147/223] Fixed styling, added tooltips

---
 .../Settings/Sections/ToolbarSection.vue      | 60 ++++++++++++-------
 1 file changed, 39 insertions(+), 21 deletions(-)

diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 8a901c15..dadbab09 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -1,25 +1,40 @@
 <template>
   <SettingsSection title="Toolbar Features">
-    <table>
-      <tr>
-        <td class="left-side">Emoticons</td>
-        <td><SettingsSwitch v-model="emoticonChatFeatures" /></td>
-      </tr>
-      <tr>
-        <td class="left-side">Markdown</td>
-        <td><SettingsSwitch v-model="markdownChatFeatures" /></td>
-      </tr>
-      <tr>
-        <td class="left-side">Preview</td>
-        <td><SettingsSwitch v-model="previewChatFeatures" /></td>
-      </tr>
-      <tr>
-        <td class="left-side">All</td>
-        <td><SettingsEnableDisable :value="allChatFeatures" @input="allChatFeaturesChanged" /></td>
-      </tr>
-    </table>
-    <ul style="margin-top:5px" v-if="$vxm.settings.emoticonChatFeatures">
-      <li>Custom emoticons</li>
+    <ul>
+      <li>
+        <span class="left-side">
+          Emoticons
+          <SettingsTooltip text="Whether the emoticons menu in the toolbar is visible" />
+        </span>
+        <span style="float: right"><SettingsSwitch v-model="emoticonChatFeatures" /></span>
+      </li>
+      <li>
+        <span class="left-side">
+          Markdown
+          <SettingsTooltip text="Whether the markdown menu in the toolbar is visible" />
+        </span>
+        <span style="float: right"><SettingsSwitch v-model="markdownChatFeatures" /></span>
+      </li>
+      <li>
+        <span class="left-side">
+          Preview
+          <SettingsTooltip text="Whether the markdown preview menu in the toolbar is visible" />
+        </span>
+        <span style="float: right"><SettingsSwitch v-model="previewChatFeatures" /></span>
+      </li>
+      <li>
+        <span class="left-side">All</span>
+        <span style="float: right">
+          <SettingsEnableDisable :value="allChatFeatures" @input="allChatFeaturesChanged" />
+        </span>
+      </li>
+    </ul>
+    <ul style="margin-top:10px" v-if="$vxm.settings.emoticonChatFeatures">
+      <li>
+        Custom emoticons
+        <SettingsTooltip text="Which emoticons appear in your three custom slots
+        in the emoticon menu in the toolbar" />
+      </li>
       <li v-for="(emote, index) in customEmoticons" :key="emote">
         <span>{{ emote }}</span>
         <span style="float:right">
@@ -40,12 +55,14 @@
   import SettingsSection from '../SettingsSection.vue';
   import SettingsSwitch from '../SettingsSwitch.vue';
   import SettingsEnableDisable from '../SettingsEnableDisable.vue';
+  import SettingsTooltip from '../SettingsTooltip.vue';
 
 @Component({
   components: {
     SettingsSection,
     SettingsSwitch,
     SettingsEnableDisable,
+    SettingsTooltip,
   },
 })
   export default class ToolbarSection extends Vue {
@@ -163,6 +180,7 @@
   color: $warning;
 }
 li {
-  width: calc(100% - 40px)
+  width: calc(100% - 40px);
+  margin-bottom: 10px;
 }
 </style>

From dea328be1daba47e1d865e3ad2235a6e01d13f03 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 11:36:42 -0500
Subject: [PATCH 148/223] Accesibility

---
 src/app/App.vue                               |  2 +-
 .../Header/MinimizationTriangle.vue           | 13 +++++++++++--
 .../components/Header/OpenWindowButton.vue    | 14 +++++++++++---
 src/app/components/Input/EmoticonBar.vue      |  9 ++++++++-
 src/app/components/Messages/UserMessage.vue   | 17 ++++++++++++++---
 src/app/components/Messages/Username.vue      |  6 ++++++
 .../Slideout/Chat/ChatSelectButton.vue        |  3 ++-
 .../Slideout/HamburgerMenuButton.vue          | 13 +++++++++++--
 .../Settings/ColorPicker/ColorPicker.vue      |  3 ++-
 .../Settings/ColorPicker/ColorSlider.vue      | 19 ++++++++++++++-----
 .../Settings/SettingsEnableDisable.vue        |  4 ++++
 .../Slideout/Settings/SettingsSwitch.vue      |  9 ++++++++-
 .../components/Slideout/SlideoutButton.vue    |  8 +++++++-
 .../Slideout/Users/SlideoutUsername.vue       | 10 ++++++++--
 src/app/store/chat.vuex.ts                    | 16 +++++++---------
 15 files changed, 114 insertions(+), 32 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 85bbc4b5..9f2f102a 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -336,7 +336,7 @@
 
   postMessage(rawMessage: string, channel: string) {
     if (!channel.startsWith('#')) { // If it's a PRIVMSG
-      this.$vxm.chat.postToQuery(`${channel}|${rawMessage}`);
+      this.$vxm.chat.postToQuery({ message: rawMessage, channel });
     } else { // Otherwise
       this.$vxm.chat.sendMessage({ rawMessage, channel });
     }
diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 1ab7d30c..66a81d38 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -1,12 +1,19 @@
 <template>
-  <div
+  <button
     class="minimization-triangle"
     style="float: right;"
     :class="{'flipped': value && !settings,
     'settings-flipped': value && settings,
     'settings':settings}"
     @click="$emit('input', !value)"
-  />
+  >
+    <v-style>
+      button:focus {
+        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+      }
+    </v-style>
+  </button>
 </template>
 
 <script lang="ts">
@@ -35,6 +42,8 @@
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transition: transform 0.2s;
+    background-color: transparent;
+    border: none;
   }
 
   .minimization-triangle.settings-flipped {
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index bd3c67a1..5ac4bff9 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -1,10 +1,16 @@
 <template>
-  <div
+  <button
     class="open-window"
     style="float: right;"
     @click="$emit('input', !value)"
-  >
-  </div>
+   >
+   <v-style>
+      button:focus {
+        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+      }
+    </v-style>
+  </button>
 </template>
 
 <script lang="ts">
@@ -27,6 +33,8 @@
     background-position: center;
     height: 34px;
     width: 35px;
+    background-color: transparent;
+    border: none;
   }
   .open-window:hover {
     cursor: pointer;
diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 29d55958..f60c0c07 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -167,7 +167,9 @@
       if (this.selection !== [0, 0] && this.selection[1] - this.selection[0] > 0) {
         value = value.slice(this.selection[0], this.selection[1]);
       }
-      return md.renderInline(value);
+      const markdown = md.renderInline(value);
+      if (markdown === '') return 'Type some text to see a preview';
+      return markdown;
     }
 
     // Chat features
@@ -189,6 +191,11 @@
         || this.markdownChatFeatures
         || this.previewChatFeatures;
     }
+
+    @Watch('anyChatFeatures')
+    updateToolbarHeight() {
+      this.$emit('update');
+    }
   }
 </script>
 <style scoped>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 3e870872..c28dc579 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -10,6 +10,7 @@
           :user="message.user"
           :color="usernameColor"
           :is-action="isAction"
+          @focus="hover = true"
           v-if="!isNotice && !sameUserAsPrevious"
         >{{ isAction || !message.user.username ? '': ':' }}
         </Username>
@@ -33,13 +34,15 @@
       <span v-if="!isNotice" class="message-time">[{{formattedTime}}]</span>
     </div>
     <div style="overflow:hidden">
-      <a
+      <button
         class="chat-message-options"
         @click.prevent="openContextMenu"
         v-show="hover && message.user.username"
+        tabindex=0
+        @blur="hover = false"
       >
         &vellip;
-      </a>
+      </button>
       <ActionMenu
         ref="contextMenu"
         :message="message"
@@ -178,6 +181,7 @@
       [...this.$el.getElementsByTagName('a')]
         .filter(e => e.href !== e.innerText)
         .filter(e => !usernames.includes(e.innerText.replace('●', '').trim().replace(':', '').trim()))
+        .filter(e => ![...e.classList].includes('chat-message-options'))
         .forEach(e => {
         e.addEventListener('click', ev => {
           ev.preventDefault();
@@ -296,7 +300,6 @@
   }
 
   .chat-message-options {
-    user-select: none;
     position: absolute;
     top: -4px;
     right: 15px;
@@ -305,6 +308,14 @@
     display: block;
     cursor: pointer;
     overflow: visible;
+    background-color: transparent;
+    color: white;
+    border: none;
+  }
+
+  .chat-message-options:focus {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
   }
 
   mark {
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 93b89d67..ddcf8b93 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -4,6 +4,8 @@
       v-if="user"
       target="_blank"
       class="username"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
       :style="{ color: displayedColor }"
       :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
       @mouseover="hovered = true; updateTooltipCoordinates($event) /* Shows and hides tooltip */"
@@ -137,6 +139,10 @@
     text-decoration: none;
     font-weight: bold;
   }
+  .username:focus {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
   .fade-enter-active, .fade-leave-active {
     transition: opacity .5s;
   }
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index e7da246b..f2447bd2 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -48,8 +48,9 @@
     text-transform: none;
     display:block;
     width: 100%;
-    height:min-content;
+    height:90px;
     margin:0px;
+    position: relative;
   }
 
   /* Change background color of buttons on hover */
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index 67cec11f..1ca82a7e 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -1,9 +1,16 @@
 <template>
-  <span
+  <button
     class="hamburger"
     @click="$emit('input', !value)"
     :class="{notified:notification, mentioned:mention}"
-  />
+  >
+    <v-style>
+      button:focus {
+        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+      }
+    </v-style>
+  </button>
 </template>
 
 <script lang="ts">
@@ -31,6 +38,8 @@
   background-repeat: no-repeat;
   background-size: 50% 45%;
   background-position: bottom 10px left 11px;
+  background-color: transparent;
+  border: none;
 }
 .notified { /* Notified hamburger icon */
   background-image: url("../../assets/hamburger-notification.png");
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index e9d34dbb..265a00de 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -22,7 +22,7 @@
       colorID="blue"
       ref="blue" />
       <div id='swatch-container'>
-        <div
+        <button
           v-for="color in defaultColors"
           :key="color"
           class="swatch"
@@ -166,6 +166,7 @@
     width:25px;
     height:15px;
     margin:5px;
+    border: none;
   }
   #swatch-container { /* Container for swatches */
     display: grid;
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index 7c92b18e..85fc30a4 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -6,10 +6,11 @@
       type=range min=0 max=255
       :style='{ background:getGradient()}'
       :name="colorID">
-    <p
+    <span
       class="value-thumb"
       :style="{ left: calculateOffset}"
-    >{{sliderValue}}</p>
+    >{{sliderValue}}</span>
+    <input type=number v-model="sliderValue" class="slider-input-number">
   </div>
 </template>
 <script lang='ts'>
@@ -81,7 +82,7 @@
     height:20px;
     margin:8px;
     margin-left:0;
-    width:120px;
+    width:180px;
     padding:0;
     overflow:hidden;
   }
@@ -112,9 +113,9 @@
     height:15px;
     border-radius:2px;
   }
-  .slider:focus { /* Avoids unwanted outlines */
+  .slider:focus {
     outline:none;
-    border:none;
+    border:1px solid black;
   }
   /* Overlays that show the value of the slider on top of the draggable part of the slider */
   .value-thumb {
@@ -130,4 +131,12 @@
     height:20px;
     top: 0px;
   }
+  .slider-input-number {
+    display: inline-block;
+    position: absolute;
+    width: 3rem;
+    height: 100%;
+    top: 0px;
+    right: 0;
+  }
 </style>
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index 8ec1bae9..8d45a1a0 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -48,6 +48,10 @@ button {
   border:none;
   transition: color 0.4s;
 }
+button:focus {
+  outline: 0px solid;
+  border: $gray-600 2px solid;
+}
 #disable {
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
diff --git a/src/app/components/Slideout/Settings/SettingsSwitch.vue b/src/app/components/Slideout/Settings/SettingsSwitch.vue
index 3b49750a..d1f18337 100644
--- a/src/app/components/Slideout/Settings/SettingsSwitch.vue
+++ b/src/app/components/Slideout/Settings/SettingsSwitch.vue
@@ -44,7 +44,7 @@
   background-color: $gray-500;
   -webkit-transition: .4s;
   transition: .4s;
-  border-radius:34px;
+  border-radius:35px;
 }
 
 .slider:before {
@@ -69,4 +69,11 @@ input:checked + .slider:before {
   -ms-transform: translateX(16px);
   transform: translateX(16px);
 }
+input:focus:checked + .slider {
+  outline: $green 1px solid;
+}
+
+input:focus:not(:checked) + .slider {
+  outline: $gray-500 1px solid;
+}
 </style>
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 2dcb4afc..66cae738 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -1,6 +1,7 @@
 <template>
   <!-- Centers images -->
-  <center
+  <button @click="$emit('input')">
+    <center
     @click="$emit('input')"
   >
     <img
@@ -9,6 +10,7 @@
     >
     <slot />
   </center>
+  </button>
 </template>
 
 <script lang="ts">
@@ -41,4 +43,8 @@
     width:40px;
     display:inline-block;
   }
+  button {
+    background-color:transparent;
+    border:none;
+  }
 </style>
diff --git a/src/app/components/Slideout/Users/SlideoutUsername.vue b/src/app/components/Slideout/Users/SlideoutUsername.vue
index 10475b74..5b8ee7f2 100644
--- a/src/app/components/Slideout/Users/SlideoutUsername.vue
+++ b/src/app/components/Slideout/Users/SlideoutUsername.vue
@@ -3,12 +3,15 @@
     @mouseover="hover = true"
     @mouseleave="hover = false"
   >
-    <Username :user="user" />
+    <Username :user="user"
+      @focus="hover = true" />
       <div style="overflow:hidden">
       <a
         class="chat-message-options"
         @click.prevent="openContextMenu"
         v-show="hover && user.username"
+        @blur="hover = false"
+        tabindex=0
       >
         &vellip; <!-- ⋮ -->
       </a>
@@ -56,7 +59,6 @@
 </script>
 <style scoped>
   .chat-message-options {
-    user-select: none;
     position: absolute;
     top: -4px;
     right:0px;
@@ -65,6 +67,10 @@
     cursor: pointer;
     overflow: visible;
   }
+  .chat-message-options:focus {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
   li {
     position:relative;
     top:0;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 5e8c0280..f2864083 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1245,15 +1245,13 @@ export default class ChatModule extends VuexModule {
    * @param {string} message - The user and the message to be sent. Takes the form <nick>|<message>
    */
 
-  @mutation
-  postToQuery(message:string) { /* @action() can only take 1 argument */
+  @action()
+  async postToQuery({ message, channel }: { message:string, channel:string}) {
     /* Splits argument into message and channel
     Will only cause issues if people are putting | in their nick */
-    const chan = message.substring(0, message.indexOf('|'));
-    const msg = message.substring(message.indexOf('|') + 1);
-    if (this.channels[User.parseUsername(chan)] === undefined) {
-      Vue.set(this.channels, User.parseUsername(chan), {
-        name: User.parseUsername(chan),
+    if (this.channels[User.parseUsername(channel)] === undefined) {
+      Vue.set(this.channels, User.parseUsername(channel), {
+        name: User.parseUsername(channel),
         maxHistoryMessages: 50,
         notifications: false,
         notificationsEnabled: true,
@@ -1262,8 +1260,8 @@ export default class ChatModule extends VuexModule {
       });
     }
     // Converting from array to set to array removes duplicates
-    Array.from(new Set(this.connectedUsers[User.parseUsername(chan)]?.nicks)).forEach(e => {
-      this.sendMessage({ rawMessage: msg, channel: e }); // Send message to all nicks
+    Array.from(new Set(this.connectedUsers[User.parseUsername(channel)]?.nicks)).forEach(e => {
+      this.sendMessage({ rawMessage: message, channel: e }); // Send message to all nicks
     });
   }
 

From edc5c0a98ecdd2601cbcf14d36e90b610eb4c42c Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 13:33:26 -0500
Subject: [PATCH 149/223] Markdown

---
 src/app/components/Input/EmoticonBar.vue      | 48 +++++++++++++++++--
 .../components/Input/MarkdownWrapButton.vue   | 26 +++++++++-
 src/app/components/Messages/UserMessage.vue   | 34 +++++++++----
 src/app/components/Panes/MessagePane.vue      |  3 ++
 src/app/tools/Markdown.ts                     | 27 +++++++++++
 5 files changed, 124 insertions(+), 14 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index f60c0c07..24f2cee7 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -18,10 +18,11 @@
           :type="item"
           class="border-right"
           @md="format"
+          style="flex: 0 0 auto"
         />
       </div>
       <div id='preview-submenu' v-show="previewSelected && previewChatFeatures">
-        <div v-html="inputHTML" id="preview-content"/>
+        <span v-html="inputHTML" id="preview-content"/>
       </div>
       <MenuButton
         id="close"
@@ -101,7 +102,7 @@
 
     // Markdown button
 
-    markdownCodes = ['bold', 'italics', 'italicsbold', 'strikethrough', 'code', 'link', 'action', 'quote'];
+    markdownCodes = ['bold', 'italics', 'italicsbold', 'strikethrough', 'code', 'link', 'action', 'quote', 'serif', 'cursive', 'highlight'];
 
     // Submenu selection
 
@@ -208,6 +209,7 @@
   overflow:hidden; /* Prevents awkward scrolling and overflow */
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
+  position: relative;
 }
 #strike { /* Strikethrough isn't cut off */
   padding:2px;
@@ -223,9 +225,12 @@
   height:25px;
   overflow:hidden; /* Prevents awkward scrolling and overflow */
   margin-bottom:3px;
+  position: relative;
 }
 .other-menu-button {
-  float:right; /* Menu buttons floated to the right */
+  right: 0; /* Menu buttons floated to the right */
+  position: absolute;
+  top:0;
 }
 .menu-container {
   background-color:#043468;
@@ -235,4 +240,41 @@
   display:inline-block;
   width:calc(100% - 30px) !important;
 }
+#markdown-submenu {
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  display: flex;
+  width: calc(100% - 25px);
+  height:25px;
+}
+::-webkit-scrollbar-track {
+  height: 0;
+  width: 0;
+  display:none;
+}
+::-webkit-scrollbar {
+  height: 0;
+  width: 0;
+  display:none;
+}
+::-moz-scrollbar {
+  height: 0;
+  width: 0;
+  display:none;
+}
+::-moz-scrollbar-track {
+  height: 0;
+  width: 0;
+  display:none;
+}
+::-webkit-scrollbar-thumb {
+  height: 0;
+  width: 0;
+  display:none;
+}
+::-moz-scrollbar-thumb {
+  height: 0;
+  width: 0;
+  display:none;
+}
 </style>
diff --git a/src/app/components/Input/MarkdownWrapButton.vue b/src/app/components/Input/MarkdownWrapButton.vue
index af581c3d..59b9f8be 100644
--- a/src/app/components/Input/MarkdownWrapButton.vue
+++ b/src/app/components/Input/MarkdownWrapButton.vue
@@ -2,6 +2,7 @@
   <button id='md-wrap-button-container' class='md-button' @click="clicked">
     <span
       class="text"
+      :class="classes"
       :id="typeIs('strikethrough') ? 's' : ''"
       :style="style">{{buttonLetter}}
     </span>
@@ -25,6 +26,8 @@
         case 'question': return '?';
         case 'italicsbold': return 'E';
         case 'quote': return '""';
+        case 'serif': return 'F';
+        case 'cursive': return 'F';
         default: return this.type.substring(0, 1).toUpperCase();
       }
     }
@@ -35,14 +38,27 @@
       const strikethrough = this.typeIs('strikethrough');
       const code = this.typeIs('code');
       const link = this.typeIs('link');
+      const cursive = this.typeIs('cursive');
+      const serif = this.typeIs('serif');
+      const highlight = this.typeIs('highlight');
+      let font;
+      if (code) font = 'monospace';
+      if (cursive) font = 'cursive';
+      if (serif) font = 'serif';
       return {
         'font-weight': bold ? 'bold' : '',
         'font-style': italics ? 'italic' : '',
         'text-decoration': `${strikethrough ? 'line-through' : ''} ${link ? 'underline' : ''}`,
-        'font-family': code ? 'monospace' : '',
+        'font-family': font,
       };
     }
 
+    get classes() {
+        return {
+          highlight: this.typeIs('highlight'),
+        };
+      }
+
     clicked() {
       this.$emit('md', this.type);
     }
@@ -80,4 +96,12 @@
   #s:after {
     content: "-";
   }
+  .highlight {
+    display: inline-flex;
+    align-items: center;
+    background-color:yellow;
+    color: black;
+    vertical-align: baseline;
+    height: 18px;
+  }
 </style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index c28dc579..265044ca 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -99,16 +99,7 @@
         const tagsStringPosition = msg.search(/\[#(.+,)*.+\]\r?$/);
         msg = msg.substring(0, tagsStringPosition);
       } // If not, just show the message
-      let markdown = md.renderInline(msg);
-      [...markdown.matchAll(/#\S+\s/g)].forEach(e => {
-        markdown = markdown.replace(e[0].trim(), `<mark class="channel-link">${e[0].trim()}</mark>`);
-      });
-      [...markdown.matchAll(/@\S+\s/g)].forEach(e => {
-        markdown = markdown.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
-      });
-      [...markdown.matchAll(/>https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
-        markdown = markdown.replace(e[0].trim(), `><img class="screenshot" src="${e[0].trim().substring(1)}">`);
-      });
+      const markdown = md.renderInline(msg);
       return markdown;
     }
 
@@ -331,4 +322,27 @@
     width:80%;
     max-width:500px;
   }
+  .cursive {
+    font-family: cursive;
+  }
+  .serif {
+    font-family: serif;
+  }
+  .highlight {
+    background-color: yellow;
+    color: black;
+  }
+  blockquote {
+    display: inline;
+    border-left: 5px solid gray;
+    padding-left: 2px;
+    quotes: "“" "”" "‘" "’";
+  }
+  blockquote:before {
+    margin-left:2px;
+    content: open-quote;
+  }
+  blockquote:after {
+    content: close-quote;
+  }
 </style>
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index f56c5655..cfbd71ca 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -181,6 +181,9 @@
         case 'action': this.$refs.input.insertString(0, '/me '); break;
         case 'quote': this.$refs.input.insertString(0, '> '); break;
         case 'question': this.$emit('postMessage', '/help'); break;
+        case 'cursive': this.$refs.input.wrapOrInsert('::', true); break;
+        case 'serif': this.$refs.input.wrapOrInsert(':', true); break;
+        case 'highlight': this.$refs.input.wrapOrInsert('|', true); break;
         default: break;
       }
     }
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 5841149e..4645d7d5 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -28,4 +28,31 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
   // pass token to default renderer.
   // return defaultRender(tokens, idx, options, env, self);
 };
+md.renderer.rules.text = (tokens, idx, options, env, self) => {
+  let { content } = tokens[idx];
+  if (content.match(/^> ?/)) {
+    content = `<blockquote>${content.replace(/^> ?/, '')}</blockquote>`;
+  }
+  // Detects instances of :: or : indicating fonts
+  [...content.matchAll(/:+[^:]+:+/g)].forEach(e => {
+    if (e[0].startsWith('::')) { // If it's :: (cursive), remove the colons and wrap it in a styled <span>
+      content = content.replace(e[0], `<span class="cursive">${e[0].slice(2, -2)}</span>`);
+    } else { // Otherwise, it's : (serif), remove the colons and wrap it in a styled <span>
+      content = content.replace(e[0], `<span class="serif">${e[0].slice(1, -1)} </span>`);
+    }
+  });
+  [...content.matchAll(/\|[^|]+\|/g)].forEach(e => {
+    content = content.replace(e[0], `<span class="highlight">&nbsp;${e[0].slice(1, -1)}&nbsp;</span>`);
+  });
+  [...content.matchAll(/#\S+\s/g)].forEach(e => {
+    content = content.replace(e[0].trim(), `<mark class="channel-link">${e[0].trim()}</mark>`);
+  });
+  [...content.matchAll(/@\S+\s/g)].forEach(e => {
+    content = content.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
+  });
+  [...content.matchAll(/>https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
+    content = content.replace(e[0].trim(), `><img class="screenshot" src="${e[0].trim().substring(1)}">`);
+  });
+  return content;
+};
 export default md;

From c32421d4cbc1b4aebde8aad18cd9db0a2edaea56 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 14:08:49 -0500
Subject: [PATCH 150/223] Default size for chat, further accessibility

---
 src/app/components/Input/MenuButton.vue        |  2 +-
 src/app/components/Messages/UserMessage.vue    | 10 ++++++++++
 .../Slideout/Users/SlideoutUsername.vue        | 18 ++++++++++++++++--
 src/app/store/chat.vuex.ts                     |  2 +-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Input/MenuButton.vue b/src/app/components/Input/MenuButton.vue
index 120268d0..f8c2ba5e 100644
--- a/src/app/components/Input/MenuButton.vue
+++ b/src/app/components/Input/MenuButton.vue
@@ -11,7 +11,7 @@
     {{name}}
     <v-style>
       .menu-button:focus {
-        outline: {{ tabbing ? '' : 'none'}} !important;
+        outline: {{ tabbing ? '' : 'none !important'}};
       }
     </v-style>
   </button>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 265044ca..60563a75 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -37,6 +37,7 @@
       <button
         class="chat-message-options"
         @click.prevent="openContextMenu"
+        @keypress.enter.prevent="openContextMenuWithKey"
         v-show="hover && message.user.username"
         tabindex=0
         @blur="hover = false"
@@ -236,6 +237,15 @@
     openContextMenu(e: MouseEvent) {
       setTimeout(() => this.$refs.contextMenu.open(e));
     }
+
+    openContextMenuWithKey(e: KeyboardEvent) {
+      const rect = (e.target as Element).getBoundingClientRect();
+      const event = new MouseEvent('click', {
+        clientX: rect.x,
+        clientY: rect.y,
+      });
+      setTimeout(() => this.$refs.contextMenu.open(event));
+    }
   }
 </script>
 
diff --git a/src/app/components/Slideout/Users/SlideoutUsername.vue b/src/app/components/Slideout/Users/SlideoutUsername.vue
index 5b8ee7f2..77923d2b 100644
--- a/src/app/components/Slideout/Users/SlideoutUsername.vue
+++ b/src/app/components/Slideout/Users/SlideoutUsername.vue
@@ -6,15 +6,17 @@
     <Username :user="user"
       @focus="hover = true" />
       <div style="overflow:hidden">
-      <a
+      <button
         class="chat-message-options"
+        ref="chatOptions"
         @click.prevent="openContextMenu"
         v-show="hover && user.username"
         @blur="hover = false"
+        @keypress.enter.prevent="openContextMenuWithKey"
         tabindex=0
       >
         &vellip; <!-- ⋮ -->
-      </a>
+      </button>
       <ActionMenu
         ref="contextMenu"
         :message="messageFrom(user)"
@@ -50,11 +52,21 @@
 
     $refs!: {
       contextMenu: HTMLFormElement;
+      chatOptions: HTMLButtonElement;
     };
 
     openContextMenu(e: MouseEvent) {
       setTimeout(() => this.$refs.contextMenu.open(e));
     }
+
+    openContextMenuWithKey(e: KeyboardEvent) {
+      const rect = (e.target as Element).getBoundingClientRect();
+      const event = new MouseEvent('click', {
+        clientX: rect.x,
+        clientY: rect.y,
+      });
+      setTimeout(() => this.$refs.contextMenu.open(event));
+    }
   }
 </script>
 <style scoped>
@@ -66,6 +78,8 @@
     display: block;
     cursor: pointer;
     overflow: visible;
+    background-color: transparent;
+    border: none;
   }
   .chat-message-options:focus {
     outline: 1px dotted #212121;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index f2864083..c573c0f4 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -121,7 +121,7 @@ export default class ChatModule extends VuexModule {
 
   inGamePosition: [string, number, string, number] = ['l', 0, 't', 0];
 
-  initialSize: [number, number] = [0, 0];
+  initialSize: [number, number] = [400, 500];
 
   customNick !: string; // Custom nick for oper
 

From e76cf79ab0dba5a1adbae25225d2b20904a7947a Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 15:38:13 -0500
Subject: [PATCH 151/223] More accessibility

---
 .../Header/MinimizationTriangle.vue           |  5 +++
 .../components/Header/OpenWindowButton.vue    |  1 +
 src/app/components/LinkModal.vue              | 40 ++++++++-----------
 src/app/components/OperLogin.vue              | 22 +++++-----
 .../Slideout/HamburgerMenuButton.vue          |  1 +
 .../Settings/ColorPicker/ColorPicker.vue      |  3 ++
 .../Settings/ColorPicker/ColorSlider.vue      |  1 +
 .../Settings/Sections/IgnoredSection.vue      |  4 +-
 .../Sections/NotificationsSection.vue         | 24 ++++++++---
 .../Settings/Sections/OperSection.vue         |  3 +-
 .../Settings/Sections/StatusSection.vue       | 10 ++---
 .../Settings/Sections/TextSizeSection.vue     |  2 +-
 .../Settings/Sections/ToolbarSection.vue      | 24 +++++++----
 .../Settings/SettingsEnableDisable.vue        |  6 ++-
 .../Slideout/Settings/SettingsSwitch.vue      | 10 ++++-
 .../components/Slideout/SlideoutButton.vue    |  4 +-
 16 files changed, 100 insertions(+), 60 deletions(-)

diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 66a81d38..89d2bd29 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -1,5 +1,6 @@
 <template>
   <button
+    :aria-label="label"
     class="minimization-triangle"
     style="float: right;"
     :class="{'flipped': value && !settings,
@@ -27,6 +28,10 @@
 
     @Prop()
     settings !: boolean;
+
+    get label() {
+      return `Click to ${this.value ? 'show' : 'hide'} content${this.settings ? ' in settings' : ''}.`;
+    }
   }
 </script>
 
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index 5ac4bff9..ccdf8e34 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -3,6 +3,7 @@
     class="open-window"
     style="float: right;"
     @click="$emit('input', !value)"
+    :aria-label="`Click to make the chat ${value ? 'fullscreen' : 'normal size'}`"
    >
    <v-style>
       button:focus {
diff --git a/src/app/components/LinkModal.vue b/src/app/components/LinkModal.vue
index 855ed52f..d0b67eb4 100644
--- a/src/app/components/LinkModal.vue
+++ b/src/app/components/LinkModal.vue
@@ -1,28 +1,22 @@
 <template>
   <div class="link panel" v-if="openModal">
-    <div class="trans-panel rounded-10">
-      <form>
-        <table>
-          <tr>
-            <td>This link goes to <a target="_blank" :href="url">{{url}}</a>.</td>
-          </tr>
-        </table>
-        <div
-          class="btn link-button"
-          style="width: 100%; left: 50%; margin-top:10px"
-          @click="openModal = false"
-        >
-        <a :href="url" target="_blank">Continue</a>
-        </div>
-        <div
-          class="btn link-button"
-          style="width: 100%; left: 50%; margin-top:10px;"
-          @click="openModal = false;"
-        >
-          Cancel
-        </div>
-      </form>
-    </div>
+    <p>This link goes to <a target="_blank" :href="url">{{url}}</a>.</p>
+    <button
+      aria-label="Click to travel to the link you clicked on"
+      class="btn link-button"
+      style="width: 100%; left: 50%; margin-top:10px"
+      @click="openModal = false"
+    >
+    <a :href="url" target="_blank">Continue</a>
+    </button>
+    <button
+      aria-label="Click to return to the chat; this cancels opening the link"
+      class="btn link-button"
+      style="width: 100%; left: 50%; margin-top:10px;"
+      @click="openModal = false;"
+    >
+      Cancel
+    </button>
   </div>
 </template>
 
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index ffea8a8c..1e182045 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -3,7 +3,7 @@
     <div class="trans-panel rounded-10" v-show="showsMessage">
       <p> {{message}}</p>
       <div
-          class="green-button"
+          class="btn"
           style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
           @click="showsMessage = false; $emit('cancel')"
         >
@@ -14,33 +14,33 @@
       <form>
         <table>
           <tr>
-            <td><span for="username">User:</span></td>
-            <td><input type="text" id="username" v-model="username"/></td>
+            <td><label for="username">User:</label></td>
+            <td><input name="username" type="text" id="username" v-model="username"/></td>
           </tr>
           <tr>
-            <td><span for="password">Password:</span></td>
-            <td><input type="password" id="password" v-model="password"/></td>
+            <td><label for="password">Password:</label></td>
+            <td><input name="password" type="password" id="password" v-model="password"/></td>
           </tr>
           <tr>
-            <td><span for="remember">Remember:</span></td>
-            <td><input type="checkbox" id="remember" v-model="remember"/></td>
+            <td><label for="remember">Remember:</label></td>
+            <td><input type="checkbox" name="remember" id="remember" v-model="remember"/></td>
           </tr>
         </table>
         <p v-show="authFailed">Username or password incorrect</p>
-        <div
+        <button
           class="btn login-button"
           style="width: 100%; left: 50%; margin-top:10px"
           @click="$emit('login', { password, username, remember })"
         >
         Continue
-        </div>
-        <div
+        </button>
+        <button
           class="btn login-button"
           style="width: 100%; left: 50%; margin-top:10px;"
           @click="$emit('cancel')"
         >
           Cancel
-        </div>
+        </button>
       </form>
     </div>
   </div>
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index 1ca82a7e..bdd7d311 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -3,6 +3,7 @@
     class="hamburger"
     @click="$emit('input', !value)"
     :class="{notified:notification, mentioned:mention}"
+    :aria-label="`Click to ${this.value ? 'close' : 'open'} the slideout`"
   >
     <v-style>
       button:focus {
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index 265a00de..3e1a5751 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -1,6 +1,7 @@
 <template>
   <div id='picker'>
     <ColorSlider
+      aria-label="Color slider for red"
       id='red'
       gradientStart="#300"
       gradientEnd="#c00"
@@ -8,6 +9,7 @@
       colorID="red"
       ref="red" />
     <ColorSlider
+      aria-label="Color slider for green"
       id='green'
       gradientStart='#030'
       gradientEnd='#0c0'
@@ -15,6 +17,7 @@
       colorID="green"
       ref="green" />
     <ColorSlider
+      aria-label="Color slider for blue"
       id='blue'
       gradientStart='#003'
       gradientEnd='#00c'
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index 85fc30a4..83aec110 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -1,6 +1,7 @@
 <template>
   <div class='color-slider-container'>
     <input
+      aria-label="Slider to control a color value"
       class="slider"
       v-model="sliderValue"
       type=range min=0 max=255
diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
index e0d0f200..396b57ef 100644
--- a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -1,11 +1,12 @@
 <template>
   <SettingsSection title="Ignored" >
-      <ul style="margin-bottom: 0">
+      <ul style="margin-bottom: 0" aria-label="List of ignored users">
         <li v-for="user in ignoredUsers" :key="user">
           <span style="vertical-align: sub">{{user}}</span>
           <button
             :style="{ fontSize:`${11 / 14}rem` }"
             class='unignore-user btn settings-button'
+            :aria-label="`Ignore user ${user}`"
             v-on:click="unignore(user)" >
             Unignore
           </button>
@@ -13,6 +14,7 @@
         <li v-show="!anyIgnoredUsers">No users ignored</li>
         <li v-show="anyIgnoredUsers" class="height-normal">
           <button
+          aria-label="Unignore all users"
           :style="{ fontSize:`${11 / 14}rem` }"
           style="width:100%"
           class='btn settings-button'
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 89ea3ef7..89e31ca9 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -1,14 +1,17 @@
 <template>
   <SettingsSection title="Notifications" >
-        <ul>
-          <li v-for="channel in channels" :key="channel.name">
+        <ul aria-label="Enable or disable notifications for channels">
+          <li
+            v-for="channel in channels"
+            :key="channel.name"
+            :aria-label="`Notifications for ${channel.name}`" >
             <span style="vertical-align:baseline">{{channel.name}}</span>
             <span class="switch">
               <SettingsSwitch v-model="$vxm.chat.channels[channel.name].notificationsEnabled"
               @input="updateNotifications(channel.name)" />
             </span>
           </li>
-          <li>
+          <li aria-label="Notifications for all channels">
             <span style="vertical-align:baseline">All</span>
             <span class="switch">
               <SettingsEnableDisable :value="allEnabled" @input="updateAll" />
@@ -16,7 +19,9 @@
           </li>
         </ul>
         <li>
-          <span style="vertical-align:baseline">
+          <span
+            style="vertical-align:baseline"
+            aria-label="Appears in the page title if you have notifications">
             Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
           </span>
           <span class="switch">
@@ -25,12 +30,19 @@
         </li>
         <li>
           <span style="vertical-align:baseline; display:inline-block">Desktop Notifications</span>
-         <span class="switch" style="vertical-align: baseline">
+          <span
+            class="switch"
+            style="vertical-align: baseline"
+            aria-label="Whether notifications should be sent directly to your computer">
            <SettingsSwitch v-model="desktopNotifications" />
           </span>
         </li>
         <li>
-          <span style="vertical-align:baseline">
+          <span
+            style="vertical-align:baseline"
+            aria-label="Keywords that trigger notifications.
+            If you have multiple keywords, separate them with commas.
+            Your username is automatically a keyword.">
             Keywords
             <SettingsTooltip text="If you have multiple keywords, separate them with commas.
             Your username is automatically a keyword." />
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index 7463383e..f7e70bd9 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -1,9 +1,10 @@
 <template>
   <SettingsSection title="Operator" >
-    <li>
+    <li aria-label="Whether you are a chat moderator/operator">
       <span>You are {{isOper ? '' : 'not'}} an operator</span>
       <span style="float: right">
         <button
+          aria-label="Log in as an operator"
           @click="$emit('auth')"
           :style="{ fontSize:`${11 / 14}rem` }"
           class="btn settings-button"
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 52b0b1f3..20801df1 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -4,11 +4,11 @@
       <span style="vertical-align: middle">You are {{userStatus ? 'away' : 'online'}}</span>
       <span style="float:right">
         <SettingsEnableDisable
-            :value="!userStatus"
-            @input="changeStatus"
-            onText="ONLINE"
-            offText="AWAY"
-            :width="140"/>
+          :value="!userStatus"
+          @input="changeStatus"
+          onText="ONLINE"
+          offText="AWAY"
+          :width="140"/>
       </span>
     </li>
   </SettingsSection>
diff --git a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
index 260fade1..c2517ee7 100644
--- a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
@@ -1,6 +1,6 @@
 <template>
   <SettingsSection title="Text Size" >
-      <input v-model="size" type=number min=10 max=18>
+      <input v-model="size" type=number min=10 max=18 aria-label="Change the size of the text">
       <p
         id='font-warning'
         v-show="size < 10 || size > 18" >
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index dadbab09..6fa03992 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -1,21 +1,21 @@
 <template>
   <SettingsSection title="Toolbar Features">
-    <ul>
-      <li>
+    <ul aria-label="Which features are enabled in the toolbar">
+      <li aria-label="Whether emoticons are enabled in the toolbar">
         <span class="left-side">
           Emoticons
           <SettingsTooltip text="Whether the emoticons menu in the toolbar is visible" />
         </span>
         <span style="float: right"><SettingsSwitch v-model="emoticonChatFeatures" /></span>
       </li>
-      <li>
+      <li aria-label="Whether markdown is enabled in the toolbar">
         <span class="left-side">
           Markdown
           <SettingsTooltip text="Whether the markdown menu in the toolbar is visible" />
         </span>
         <span style="float: right"><SettingsSwitch v-model="markdownChatFeatures" /></span>
       </li>
-      <li>
+      <li aria-label="Whether the preview is enabled in the toolbar">
         <span class="left-side">
           Preview
           <SettingsTooltip text="Whether the markdown preview menu in the toolbar is visible" />
@@ -29,17 +29,25 @@
         </span>
       </li>
     </ul>
-    <ul style="margin-top:10px" v-if="$vxm.settings.emoticonChatFeatures">
+    <ul style="margin-top:10px" v-if="$vxm.settings.emoticonChatFeatures"
+      aria-label="Change custom emoticons that appear in the toolbar">
       <li>
         Custom emoticons
         <SettingsTooltip text="Which emoticons appear in your three custom slots
         in the emoticon menu in the toolbar" />
       </li>
-      <li v-for="(emote, index) in customEmoticons" :key="emote">
+      <li
+        v-for="(emote, index) in customEmoticons"
+        :key="emote"
+        :aria-label="`Change emote in slot ${index}`">
         <span>{{ emote }}</span>
         <span style="float:right">
-          Change to
-          <input :id="index" @input="update" style="width:1rem; vertical-align:mid; height:1rem;" />
+          <label :for="index">Change to</label>
+          <input
+            :name="index"
+            :id="index"
+            @input="update"
+            style="width:1rem; vertical-align:mid; height:1rem;" />
         </span>
       </li>
       <li v-show="emoticonErrorMessage && emoticonErrorMessage !== ''">
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index 8d45a1a0..60384d89 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -1,5 +1,5 @@
 <template>
-  <label class="switch" :style="{ width: `${width || 80}px` }">
+  <label class="switch" :style="{ width: `${width || 80}px` }" :aria-label="label">
     <button @click="$emit('input', false)" :disabled="value === false" id="disable">
       {{offText || 'OFF'}}
     </button>
@@ -24,6 +24,10 @@
 
     @Prop()
     width !: number;
+
+    get label() {
+      return `Three state switch in state ${this.value === true ? (this.onText || 'on') : (this.offText || 'off') || 'neither'}; possible states ${this.onText || 'on'}, ${this.offText || 'off'}, and neither`;
+    }
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/app/components/Slideout/Settings/SettingsSwitch.vue b/src/app/components/Slideout/Settings/SettingsSwitch.vue
index d1f18337..35c75657 100644
--- a/src/app/components/Slideout/Settings/SettingsSwitch.vue
+++ b/src/app/components/Slideout/Settings/SettingsSwitch.vue
@@ -1,5 +1,9 @@
 <template>
-  <label class="switch">
+  <label
+    class="switch"
+    @keypress.enter="$emit('input', !$event.target.checked)"
+    :aria-label="label"
+    >
     <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
     <span class="slider round" />
   </label>
@@ -11,6 +15,10 @@
   export default class SettingsSwitch extends Vue {
     @Prop()
     value !: boolean;
+
+    get label() {
+      return `Switch that is ${this.value ? 'on' : 'off'}`;
+    }
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 66cae738..0a8aeb73 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -1,12 +1,12 @@
 <template>
   <!-- Centers images -->
-  <button @click="$emit('input')">
+  <button @click="$emit('input')" :aria-label="`Open the ${name} tab of the slideout`">
     <center
     @click="$emit('input')"
   >
     <img
+    :alt="`${this.selected ? 'Selected' : 'Unselected'} ${name} tab image`"
     :src="require(`@/assets/${name}-icon-${selected ? 'green' : 'white'}.png`)"
-    comment="Use of require means image is actually loaded"
     >
     <slot />
   </center>

From 3299a865e65f4c61e197ae0f2bc58639f69679a5 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 15:46:17 -0500
Subject: [PATCH 152/223] Fixed bugs with oper login

---
 src/app/components/OperLogin.vue              | 58 +++++++++----------
 .../Slideout/Settings/SlideoutSettings.vue    |  2 +-
 2 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index 1e182045..3ecde084 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -11,37 +11,35 @@
       </div>
     </div>
     <div class="trans-panel rounded-10" v-show="!showsMessage">
-      <form>
-        <table>
-          <tr>
-            <td><label for="username">User:</label></td>
-            <td><input name="username" type="text" id="username" v-model="username"/></td>
-          </tr>
-          <tr>
-            <td><label for="password">Password:</label></td>
-            <td><input name="password" type="password" id="password" v-model="password"/></td>
-          </tr>
-          <tr>
-            <td><label for="remember">Remember:</label></td>
-            <td><input type="checkbox" name="remember" id="remember" v-model="remember"/></td>
-          </tr>
-        </table>
-        <p v-show="authFailed">Username or password incorrect</p>
-        <button
-          class="btn login-button"
-          style="width: 100%; left: 50%; margin-top:10px"
-          @click="$emit('login', { password, username, remember })"
-        >
+      <table>
+        <tr>
+          <td><label for="username">User:</label></td>
+          <td><input name="username" type="text" id="username" v-model="username"/></td>
+        </tr>
+        <tr>
+          <td><label for="password">Password:</label></td>
+          <td><input name="password" type="password" id="password" v-model="password"/></td>
+        </tr>
+        <tr>
+          <td><label for="remember">Remember:</label></td>
+          <td><input type="checkbox" name="remember" id="remember" v-model="remember"/></td>
+        </tr>
+      </table>
+      <p v-show="authFailed">Username or password incorrect</p>
+      <button
+        class="btn login-button"
+        style="width: 100%; left: 50%; margin-top:10px"
+        @click="$emit('login', { password, username, remember })"
+      >
         Continue
-        </button>
-        <button
-          class="btn login-button"
-          style="width: 100%; left: 50%; margin-top:10px;"
-          @click="$emit('cancel')"
-        >
-          Cancel
-        </button>
-      </form>
+      </button>
+      <button
+        class="btn login-button"
+        style="width: 100%; left: 50%; margin-top:10px;"
+        @click="$emit('cancel')"
+      >
+        Cancel
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index 9af8ae8c..984aae37 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -6,7 +6,7 @@
     <UsernameColorSection />
     <ToolbarSection />
     <StatusSection />
-    <OperSection />
+    <OperSection @auth="$emit('auth')" />
   </div>
 </template>
 <script lang="ts">

From c8f5c1470cd306bae1529e60938ef57f1b53a3e7 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 16:15:08 -0500
Subject: [PATCH 153/223] Fixed bugs

---
 src/app/components/LinkModal.vue              | 21 ++++---
 .../Messages/PrivateMessageModal.vue          | 56 +++++++++----------
 src/app/components/OperLogin.vue              |  4 ++
 .../Settings/Sections/StatusSection.vue       |  4 +-
 4 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/src/app/components/LinkModal.vue b/src/app/components/LinkModal.vue
index d0b67eb4..fb7ec12c 100644
--- a/src/app/components/LinkModal.vue
+++ b/src/app/components/LinkModal.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="link panel" v-if="openModal">
-    <p>This link goes to <a target="_blank" :href="url">{{url}}</a>.</p>
+  <div class="link panel" v-if="openModal" tabindex=0>
+    <p
+      tabindex=0
+    >
+      This link goes to <a target="_blank" :href="url">{{url}}</a>.
+    </p>
     <button
+      tabindex=0
       aria-label="Click to travel to the link you clicked on"
       class="btn link-button"
       style="width: 100%; left: 50%; margin-top:10px"
@@ -10,6 +15,7 @@
     <a :href="url" target="_blank">Continue</a>
     </button>
     <button
+      tabindex=0
       aria-label="Click to return to the chat; this cancels opening the link"
       class="btn link-button"
       style="width: 100%; left: 50%; margin-top:10px;"
@@ -22,7 +28,9 @@
 
 <script lang="ts">
   import BootstrapVue from 'bootstrap-vue';
-  import { Component, Vue, Prop } from 'vue-property-decorator';
+  import {
+    Component, Vue, Prop, Watch,
+  } from 'vue-property-decorator';
 
   Vue.use(BootstrapVue);
 
@@ -49,10 +57,6 @@
     z-index:3;
   }
 
-  td {
-    padding: 2px;
-  }
-
   .link-button {
     color:white;
     background-color:$green !important;
@@ -61,4 +65,7 @@
   .link-button > a:hover {
     text-decoration: none;
   }
+  .link-button:focus {
+    outline: 2px solid white;
+  }
 </style>
diff --git a/src/app/components/Messages/PrivateMessageModal.vue b/src/app/components/Messages/PrivateMessageModal.vue
index adabfd35..036baf27 100644
--- a/src/app/components/Messages/PrivateMessageModal.vue
+++ b/src/app/components/Messages/PrivateMessageModal.vue
@@ -1,25 +1,21 @@
 <template>
-  <div class="message panel">
-    <div class="trans-panel rounded-10">
-      <form>
-        <div id="user">To: {{username}}</div>
-        <textarea type="text" id="msg" name="msg" ref="ta" v-model="msg"/>
-        <div
-          class="green-button"
-          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
-          @click="send"
-        >
-        Continue
-        </div>
-        <div
-          class="green-button"
-          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px;"
-          @click="cancel"
-        >
-          Cancel
-        </div>
-      </form>
-    </div>
+  <div class="message panel" tabindex="0">
+    <span id="user">To: {{username}}</span>
+    <textarea type="text" id="msg" name="msg" ref="ta" v-model="msg"/>
+    <button
+      class="btn"
+      style="width: 100%; left: 50%; margin-top:5px"
+      @click="send"
+    >
+      Continue
+    </button>
+    <button
+      class="btn"
+      style="width: 100%; left: 50%; margin-top:10px;"
+      @click="cancel"
+    >
+      Cancel
+    </button>
   </div>
 </template>
 
@@ -49,11 +45,7 @@
     };
 
     send() {
-      console.log(`Sending message ${this.msg} to username ${this.username} from modal`);
-      Array.from(new Set(this.$vxm.chat.connectedUsers[this.username]?.nicks)).forEach(n => {
-        console.log(`Posting message ${this.msg} to nick ${n} to query`);
-        this.$vxm.chat.postToQuery(`${n}|${this.msg}`);
-      });
+      this.$vxm.chat.postToQuery({ message: this.msg, channel: this.username });
       this.$vxm.chat.privMsgModal = false;
     }
 
@@ -64,6 +56,9 @@
 </script>
 
 <style lang="scss">
+  @import "@/assets/_custom.scss";
+  @import "~bootstrap/scss/bootstrap.scss";
+  @import '~bootstrap-vue/dist/bootstrap-vue.css';
   .message {
     position: absolute;
     left: 50%;
@@ -85,8 +80,11 @@
     margin-bottom:5px;
   }
 
-  .blue-button,
-  .green-button {
-    padding: 4px 7px !important;
+  .btn {
+    background-color: $green;
+  }
+
+  button:focus {
+    border: 2px solid white;
   }
 </style>
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index 3ecde084..bc5f94d1 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -91,4 +91,8 @@
     color:white;
     background-color:$green;
   }
+
+  .login-button:focus {
+    border: 2px solid white;
+  }
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 20801df1..56147e7d 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -2,13 +2,13 @@
   <SettingsSection title="Status" >
     <li>
       <span style="vertical-align: middle">You are {{userStatus ? 'away' : 'online'}}</span>
-      <span style="float:right">
+      <span style="margin-top: 5px;">
         <SettingsEnableDisable
           :value="!userStatus"
           @input="changeStatus"
           onText="ONLINE"
           offText="AWAY"
-          :width="140"/>
+          :width="150"/>
       </span>
     </li>
   </SettingsSection>

From 691fcb39f3f11bcf5758486a647916be7c6f20cd Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 17:00:24 -0500
Subject: [PATCH 154/223] Away reason, settings UI, accessibility

---
 src/app/components/Messages/UserMessage.vue   |  4 +-
 src/app/components/Messages/UserTooltip.vue   | 72 +++++++------------
 src/app/components/Messages/Username.vue      |  7 +-
 .../Sections/NotificationsSection.vue         | 12 ++--
 .../Settings/Sections/OperSection.vue         |  2 +-
 .../Settings/Sections/StatusSection.vue       | 53 ++++++++++++--
 .../Settings/SettingsEnableDisable.vue        |  1 +
 src/app/store/chat.vuex.ts                    | 24 ++++---
 src/app/store/settings.vuex.ts                |  2 +
 src/app/types/user.ts                         |  3 +
 10 files changed, 105 insertions(+), 75 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 60563a75..3d0451c2 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -143,9 +143,7 @@
             they could fail because the tooltip doesn't exist yet */
             this.$nextTick(() => {
               // Updates tooltip information
-              this.$refs.clickTooltip.findRank();
-              this.$refs.clickTooltip.description();
-              this.$refs.clickTooltip.specialStatus();
+              this.$refs.clickTooltip.fillProfile();
             });
           } else {
             console.log(`No such user ${user}`);
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index e59d01f3..f5ece618 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -35,9 +35,9 @@
     @Prop()
     left!: number;
 
-    desc = '';
+    desc = 'This user has not added a description to their profile';
 
-    rank = '';
+    rank = 'Unranked';
 
     profileImage = '';
 
@@ -54,31 +54,36 @@
       console.log(this.parentTop);
     }
 
-    description() {
+    fillProfile() {
       this.$vxm.chat.getUserInfo({
         user: this.user,
         callback: (d) => {
           const data = JSON.parse(d);
-          if (data.data !== undefined && data.data.user.Profile) {
-            let desc = data.data.user.Profile;
-            if (desc.length > 150) {
-              desc = desc.slice(0, 150)
-                .replace(/<br>/, '')
-                .trim();
-              desc += '...';
+          console.log(data);
+          if (data.data !== undefined) {
+            if (data.data.user.Profile) {
+              console.log('it exists');
+              let desc = data.data.user.Profile;
+              if (desc.length > 150) {
+                desc = desc.slice(0, 150)
+                  .replace(/<br>/, '')
+                  .trim();
+                desc += '...';
+                console.log('it got trimmed');
+              }
+              this.desc = desc;
+              console.log('Set desc');
+            }
+            if (data.data.user.rank) {
+              this.rank = `#${data.data.user.rank}`;
+            }
+            if (data.data.user.picture) {
+              this.profileImage = `https://eternagame.org/${data.data.user.picture}`;
             }
-            this.desc = desc;
-          } else {
-            this.desc = 'This user has not added a description to their profile';
           }
         },
       });
-            this.desc = 'This user has not added a description to their profile';
-    }
 
-    status = '';
-
-    specialStatus() {
       /*
       I need to fill these values in
       Once roles are set up on the backend, this needs to be replaced anyway
@@ -98,39 +103,10 @@
       });
       if (status.length > 0) {
         this.status = status.join(', ');
-      } else {
-        this.status = '';
       }
     }
 
-    findRank() {
-      this.$vxm.chat.getUserInfo({
-        user: this.user,
-        callback: (d) => {
-          const data = JSON.parse(d);
-          if (data.data !== undefined) {
-            this.rank = `#${data.data.user.rank}`;
-          } else {
-            this.rank = 'Unranked';
-          }
-        },
-      });
-      this.rank = 'Unranked';
-    }
-
-    getProfile() {
-      this.$vxm.chat.getUserInfo({
-        user: this.user,
-        callback: (d) => {
-          const data = JSON.parse(d);
-          if (data.data !== undefined) {
-            this.profileImage = `https://eternagame.org/${data.data.user.picture}`;
-          } else {
-            this.profileImage = '';
-          }
-        },
-      });
-    }
+    status = '';
   }
 </script>
 <style scoped lang="scss">
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index ddcf8b93..1d69a45d 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -14,7 +14,7 @@
     >
       <span
         class="away-indicator"
-        :title="`${user.username} is away`"
+        :title="`${user.username} is away (${user.awayReason || 'No reason given'})`"
         v-show="away"> <!-- Away indicator -->
         ●
       </span>
@@ -80,10 +80,7 @@
     }
 
     enter() {
-      this.$refs.tooltip.findRank();
-      this.$refs.tooltip.description();
-      this.$refs.tooltip.specialStatus();
-      this.$refs.tooltip.getProfile();
+      this.$refs.tooltip.fillProfile();
     }
 
     $refs !: {
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 89e31ca9..b557f544 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -20,11 +20,11 @@
         </ul>
         <li>
           <span
-            style="vertical-align:baseline"
-            aria-label="Appears in the page title if you have notifications">
+            style="vertical-align:baseline; display: inline-block"
+            aria-label="Appears in the page title if you have notifications" >
             Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
           </span>
-          <span class="switch">
+          <span style="float: right; width: 40%">
             <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
           </span>
         </li>
@@ -39,7 +39,7 @@
         </li>
         <li>
           <span
-            style="vertical-align:baseline"
+            style="vertical-align:baseline; display: inline-block;"
             aria-label="Keywords that trigger notifications.
             If you have multiple keywords, separate them with commas.
             Your username is automatically a keyword.">
@@ -47,7 +47,7 @@
             <SettingsTooltip text="If you have multiple keywords, separate them with commas.
             Your username is automatically a keyword." />
           </span>
-          <span class="switch">
+          <span style="float: right; width: 40%">
             <input type=text v-model="keywords" style="font-size:1rem; padding:1px;">
           </span>
         </li>
@@ -192,6 +192,8 @@ li {
 input {
   margin-bottom:10px;
   height:100%;
+  width: 100%;
+  float: right;
 }
 .switch {
   float:right;
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index f7e70bd9..580a7265 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -14,7 +14,7 @@
       </span>
     </li>
     <li>
-      <span v-show="isOper" style="vertical-align: sub">Change nick</span>
+      <span v-show="isOper" style="vertical-align: sub">Nick</span>
       <span style="float: right">
         <input v-show="isOper" @input="setNick" :value="opernick">
       </span>
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 56147e7d..70f09a60 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -1,14 +1,40 @@
 <template>
   <SettingsSection title="Status" >
     <li>
-      <span style="vertical-align: middle">You are {{userStatus ? 'away' : 'online'}}</span>
-      <span style="margin-top: 5px;">
+      <span
+        style="vertical-align: middle"
+        aria-label="When others view your username, they will see an indicator if you are away">
+        You are currently {{userStatus ? 'away' : 'online'}}
+        <SettingsTooltip
+          title="When others view your username, they will see an indicator if you are away"
+        />
+      </span>
+    </li>
+    <li>
+      <span aria-label="Change your status">Set
+        <SettingsTooltip
+          title="Change your status"
+        /></span>
+      <span style="float:right;">
         <SettingsEnableDisable
           :value="!userStatus"
           @input="changeStatus"
           onText="ONLINE"
           offText="AWAY"
-          :width="150"/>
+          :width="120"/>
+      </span>
+    </li>
+    <li>
+      <span
+        aria-label="When others see the away indicator, they will see the reason you are away"
+      >
+        Reason
+        <SettingsTooltip
+          title="When others see the away indicator, they will see the reason you are away"
+        />
+      </span>
+      <span style="float:right">
+        <input type=text v-model="reason">
       </span>
     </li>
   </SettingsSection>
@@ -19,11 +45,13 @@
   } from 'vue-property-decorator';
   import SettingsSection from '../SettingsSection.vue';
   import SettingsEnableDisable from '../SettingsEnableDisable.vue';
+  import SettingsTooltip from '../SettingsTooltip.vue';
 
   @Component({
     components: {
       SettingsSection,
       SettingsEnableDisable,
+      SettingsTooltip,
     },
   })
   export default class StatusSection extends Vue {
@@ -32,13 +60,29 @@
       if (to) {
         this.$vxm.chat.setUnaway();
       } else {
-        this.$vxm.chat.setAway();
+        this.$vxm.chat.setAway(this.reason);
       }
     }
 
     get userStatus() {
       return this.$vxm.chat.userStatus;
     }
+
+    reason = '';
+
+    created() {
+      if (localStorage.awayReason) {
+        this.reason = localStorage.awayReason;
+      } else {
+        this.reason = this.$vxm.settings.awayReason;
+      }
+    }
+
+    @Watch('reason')
+    updateReason() {
+      localStorage.awayReason = this.reason;
+      this.$vxm.settings.awayReason = this.reason;
+    }
   }
 </script>
 <style lang="scss" scoped>
@@ -51,5 +95,6 @@
 li {
   list-style-type: none;
   width: calc(100% - 40px);
+  margin-bottom: 10px;
 }
 </style>
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index 60384d89..e554fb80 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -51,6 +51,7 @@ button {
   position:absolute;
   border:none;
   transition: color 0.4s;
+  font-size: 14px;
 }
 button:focus {
   outline: 0px solid;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index c573c0f4..003d9518 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1585,13 +1585,19 @@ export default class ChatModule extends VuexModule {
   /**
    * Updates the away/online status for all connected users
    */
-  @mutation
-  updateUserStatus() {
-    this.client?.who('#general', (e) => { // Everyone should be in this channel
-      (e.users as {nick: string, away:boolean}[]).forEach(u => { // For each user
-        const user = User.parseUsername(u.nick); // Get their username
-        if (!this.connectedUsers[user]) return; // If they don't exist, just don't do anything
-        this.connectedUsers[user]!.away = u.away; // Update their status
+  @action()
+  async updateUserStatus() {
+    const usersByNick = Object.values(this.connectedUsers).map(e => e!.nicks[0]);
+    usersByNick.forEach(e => {
+      this.client?.whois(e, (i) => {
+        const username = User.parseUsername(e);
+        if (i.away) {
+          this.connectedUsers[username]!.away = true;
+          this.connectedUsers[username]!.awayReason = i.away;
+        } else {
+          this.connectedUsers[username]!.away = false;
+          this.connectedUsers[username]!.awayReason = '';
+        }
       });
     });
   }
@@ -1600,14 +1606,14 @@ export default class ChatModule extends VuexModule {
    * Sets the user as away
    */
   @action()
-  async setAway() {
+  async setAway(reason: string = 'User is currently away') {
     if (this.currentUser) {
       this.currentUser.away = true;
     }
     if (this.connectedUsers[this.currentUser.username]) {
       this.connectedUsers[this.currentUser.username]!.away = true;
     }
-    this.client?.raw('AWAY User is currently away');
+    this.client?.raw(`AWAY ${reason}`);
   }
 
   /**
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index c2dbe95c..7dc20f84 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -21,4 +21,6 @@ export default class SettingsModule extends VuexModule {
   markdownChatFeatures = true;
 
   previewChatFeatures = true;
+
+  awayReason = '';
 }
diff --git a/src/app/types/user.ts b/src/app/types/user.ts
index 6401d022..3e828c0c 100644
--- a/src/app/types/user.ts
+++ b/src/app/types/user.ts
@@ -9,6 +9,8 @@ export default class User {
 
   away: boolean;
 
+  awayReason: string;
+
   static parseUsername(nick: string) {
     return nick.substr(0, nick.indexOf('^') === -1 ? nick.length : nick.indexOf('^'));
   }
@@ -18,5 +20,6 @@ export default class User {
     this.uid = uid;
     this.username = username;
     this.away = false;
+    this.awayReason = '';
   }
 }

From 7263698eb141eb38ce2303b6a795a3daf64d577d Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 24 Jun 2020 22:47:22 -0500
Subject: [PATCH 155/223] Fixed user always being kicked from all channels

---
 src/app/store/chat.vuex.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 003d9518..a37b17a2 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -519,8 +519,8 @@ export default class ChatModule extends VuexModule {
   /**
    * Joins the #ops-notifications channel
    */
-  @mutation
-  joinOpsChannel() {
+  @action()
+  async joinOpsChannel() {
     this.client?.join('#ops-notifications');
   }
 
@@ -1227,12 +1227,13 @@ export default class ChatModule extends VuexModule {
 
   @action()
   async userKicked(params: Irc.KickEventArgs) {
+    console.log(params);
     const username = User.parseUsername(params.nick);
     if (username === this.currentUser.username) {
       const channel = this.channels[params.channel];
       if (channel) channel.banned = BanStatus.BAN_STATUS_BANNED;
       this.postMessage(
-        new Message(`You have been kicked from chat${params.message ? ` - ${params.message}` : ''}`),
+        new Message(`You have been kicked from chat${params.message ? ` - ${params.message}` : ''}`, channel?.name),
       );
       this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channel?.name));
     } else {

From 857c3780a6fb5cb0275927f90561cb9f32f7760e Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 25 Jun 2020 15:48:08 -0500
Subject: [PATCH 156/223] Draggable/reorderable markdown buttons in toolbar

---
 src/app/components/Input/EmoticonBar.vue | 28 ++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 24f2cee7..7ed9cdd6 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -11,14 +11,19 @@
           class="border-right"
           @emote='add' />
       </div>
-      <div id='markdown-submenu' v-show="markdownSelected && markdownChatFeatures">
+      <div id='markdown-submenu' v-show="markdownSelected && markdownChatFeatures" >
         <MarkdownWrapButton
-          v-for="item in markdownCodes"
+          v-for="(item, index) in markdownCodes"
           :key="item"
           :type="item"
           class="border-right"
           @md="format"
           style="flex: 0 0 auto"
+          draggable
+          @dragstart.native="drag($event, index, item)"
+          @dragover.native.prevent
+          @drop.native.prevent
+          @dragenter.native.prevent="dragOver($event, index, item)"
         />
       </div>
       <div id='preview-submenu' v-show="previewSelected && previewChatFeatures">
@@ -197,6 +202,25 @@
     updateToolbarHeight() {
       this.$emit('update');
     }
+
+    drag(ev: DragEvent, item: number, name: string) {
+      this.dragged = item;
+      this.draggedName = name;
+    }
+
+    dragged = -1;
+
+    draggedName = '';
+
+    dragOver(ev: DragEvent, item: number, name: string) {
+      if (this.dragged === -1 || name === this.draggedName) return;
+      const draggedItem = this.markdownCodes[this.dragged];
+      const dropItem = this.markdownCodes[item];
+      Vue.set(this.markdownCodes, this.dragged, dropItem);
+      Vue.set(this.markdownCodes, item, draggedItem);
+      this.dragged = item;
+      console.log(ev.offsetX, ev.offsetY);
+    }
   }
 </script>
 <style scoped>

From e747ecd5f2f2af631345e1fdf1eaf1eabbb3ce79 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 25 Jun 2020 15:56:27 -0500
Subject: [PATCH 157/223] Fixed bugs w/ reordering, order of buttons saves

---
 src/app/components/Input/EmoticonBar.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 7ed9cdd6..a0d4151e 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -21,8 +21,8 @@
           style="flex: 0 0 auto"
           draggable
           @dragstart.native="drag($event, index, item)"
-          @dragover.native.prevent
           @drop.native.prevent
+          @dragover.native.prevent
           @dragenter.native.prevent="dragOver($event, index, item)"
         />
       </div>
@@ -219,7 +219,13 @@
       Vue.set(this.markdownCodes, this.dragged, dropItem);
       Vue.set(this.markdownCodes, item, draggedItem);
       this.dragged = item;
-      console.log(ev.offsetX, ev.offsetY);
+      localStorage.markdownButtons = JSON.stringify(this.markdownCodes);
+    }
+
+    created() {
+      if (localStorage.markdownButtons) {
+        this.markdownCodes = JSON.parse(localStorage.markdownButtons);
+      }
     }
   }
 </script>

From b8a7c6a71e3ae5bc9a5df1473efe93e99ac309da Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 25 Jun 2020 22:12:20 -0500
Subject: [PATCH 158/223] Custom emoticons in settings

---
 .../Slideout/Settings/Sections/ToolbarSection.vue      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 6fa03992..13f09aec 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -40,15 +40,15 @@
         v-for="(emote, index) in customEmoticons"
         :key="emote"
         :aria-label="`Change emote in slot ${index}`">
-        <span>{{ emote }}</span>
-        <span style="float:right">
-          <label :for="index">Change to</label>
+          {{ emote}}
+          <span style="float: right">
+          <label :for="index">Replace with</label>
           <input
             :name="index"
             :id="index"
             @input="update"
-            style="width:1rem; vertical-align:mid; height:1rem;" />
-        </span>
+            style="width:1rem; position: relative; bottom: 2px; height:1rem; margin-left: 5px" />
+          </span>
       </li>
       <li v-show="emoticonErrorMessage && emoticonErrorMessage !== ''">
         <span class="warning">{{ emoticonErrorMessage }}</span>

From 3bb507fd2b9afb6743ab98c09c1545e15799f4af Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 26 Jun 2020 13:21:34 -0500
Subject: [PATCH 159/223] More chat commands, bug fixes

---
 src/app/components/Input/EmoticonBar.vue |   9 ++
 src/app/store/chat.vuex.ts               | 179 +++++++++++++++++++++--
 src/app/tools/Markdown.ts                |   5 +-
 3 files changed, 182 insertions(+), 11 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index a0d4151e..ca0c5f70 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -226,6 +226,15 @@
       if (localStorage.markdownButtons) {
         this.markdownCodes = JSON.parse(localStorage.markdownButtons);
       }
+      if (localStorage.emoticonChatFeatures) {
+        this.$vxm.settings.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
+      }
+      if (localStorage.markdownChatFeatures) {
+        this.$vxm.settings.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
+      }
+      if (localStorage.previewChatFeatures) {
+        this.$vxm.settings.previewChatFeatures = JSON.parse(localStorage.previewChatFeatures);
+      }
     }
   }
 </script>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index a37b17a2..ad23b95c 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1,7 +1,9 @@
-import { ActionTree, MutationTree, CommitOptions } from 'vuex';
+import {
+  ActionTree, MutationTree, CommitOptions, Store,
+} from 'vuex';
 import * as Irc from 'irc-framework';
 import {
-  createModule, mutation, action, extractVuexModule,
+  createModule, mutation, action, extractVuexModule, createProxy,
 } from 'vuex-class-component';
 import toBool from 'to-bool';
 import Vue from 'vue';
@@ -12,6 +14,7 @@ import Connection from '@/tools/websocket';
 import BanStatus from '@/types/BanStatus';
 import User from '@/types/user';
 import Ban from '@/types/Ban';
+import SettingsModule from './settings.vuex';
 
 // For polyfill
 declare type BroadcastMessage = {
@@ -570,7 +573,7 @@ export default class ChatModule extends VuexModule {
     message = `${message} [${this.usernameColor}]`; // Message with tags added on
     let isAction = false;
     // No posting as annon or if nothing has been actually posted
-    if (this.currentUser.username && message.replace(/\[#.*\]\r?$/, '').trim() !== '') {
+    if (this.currentUser.username && message.replace(/ \[#.*\]\r?$/, '').trim() !== '') {
       let post = true;
       let banned = false;
       let quieted = false;
@@ -591,7 +594,7 @@ export default class ChatModule extends VuexModule {
       });
       // Chat commands
       if (message.startsWith('/')) {
-        message = message.replace(/\[.+\]$/, '');
+        message = message.replace(/ \[.+\]$/, '');
         post = false;
         let parts = message.match(/^\/([^ ]+)/);
         const command = parts ? parts[1] : '';
@@ -656,13 +659,74 @@ export default class ChatModule extends VuexModule {
                 postMessage('Usage: `/emoticon-list`');
                 postMessage('Example: `/emoticon-list`');
                 break;
+              case 'indicator':
+                postMessage(
+                  '`/indicator`: Changes the notifications indicator that appears in the page title when you have notifications',
+                );
+                postMessage('Usage: `/indicator <indicator>`');
+                postMessage('Example: `/indicator (!)`');
+                break;
+              case 'size':
+                postMessage(
+                  '`/size`: Lists the emoticons in the 3 custom emoticon slots',
+                );
+                postMessage('size: `/size <fontsize>`');
+                postMessage('size: `/size` 14');
+                break;
+              case 'keywords':
+                postMessage(
+                  '`/keywords`: Modifies or lists the keywords that trigger notifications. If no arguments are given, a list of keywords is returned. If the first command is add or remove, the second argument is added to or removed from the keywords list. If the first command is neither, the list of keywords is overwritten with the list provided as the second argument.',
+                );
+                postMessage('Usage: `/keywords [command] [keyword]`');
+                postMessage('Example: `/keywords`');
+                postMessage('Example: `/keywords add keyword1`');
+                postMessage('Example: `/keywords keyword1, keyword2`');
+                break;
+              case 'notifications':
+                postMessage(
+                  '`notifications`: Modifies whether notifications are enabled in a channel or lists current notifications settings. If arguments not given, a list of notifications settings is returned.',
+                );
+                postMessage('Usage: `/notifications [channel] [enabled]`');
+                postMessage('Example: `/notifications #off-topic off`');
+                postMessage('Usage: `/notifications`');
+                break;
+              case 'color':
+                postMessage(
+                  '`/color`: Changes the color of your username. The color argument can be a hex, RGB, or text value.',
+                );
+                postMessage('Usage: `/color <color`');
+                postMessage('Example: `/color red`');
+                postMessage('Example: `/color #00ff00');
+                postMessage('Example: `/color 0, 0, 255`');
+                break;
+              case 'away':
+                postMessage(
+                  '`/away`: Sets your status as away. If a reason is not given, a default reason is used.',
+                );
+                postMessage('Usage: `/away [reason]`');
+                postMessage('Example: `/away Lunch`');
+                break;
+              case 'unaway':
+                postMessage(
+                  '`/unaway`: Sets your status as online',
+                );
+                postMessage('Usage: `/unaway`');
+                postMessage('Example: `/unaway`');
+                break;
+              case 'toolbar':
+                postMessage(
+                  '`/toolbar`: Enables or disables a menu in the toolbar.',
+                );
+                postMessage('Usage: `/toolbar <menu> <enabled>`');
+                postMessage('Example: `/toolbar markdown off`');
+                break;
               case 'ban':
                 postMessage(
                   '`/ban`: Bans a user from a channel. Bans user from all channels if channel argument is *.',
                 );
-                postMessage('Usage: `/ban <channel> <username>`');
+                postMessage('Usage: `/ban <channel> <username> [reason]`');
                 postMessage('Example: `/ban #general ProblematicUser`');
-                postMessage('Example: `/ban * ProblematicUser`');
+                postMessage('Example: `/ban * ProblematicUser You were banned for being problematic`');
                 postMessage('You must be an operator to use this command');
                 break;
               case 'unban':
@@ -760,7 +824,7 @@ export default class ChatModule extends VuexModule {
                 postMessage('You must be an operator to use this command');
                 break;
               default:
-                postMessage('Available commands: help, me, ignore, ignore-list, unignore, change, emoticon');
+                postMessage('Available commands: help, me, ignore, ignore-list, unignore, change, emoticon, emoticon-list, disconnect, toolbar, indicator, notifications, size, color, away, unaway, keywords');
                 postMessage('Type `/help <command>` for information on individual commands');
                 postMessage('Example: `/help ignore`');
                 postMessage(` You are ${this.oper ? '' : 'not'} logged in as an operator/moderator. Operators may use the \`/ban\`, \`/unban\`, \`/quiet\`, \`/unquiet\`, \`/notice\`, \`/banmask\`, \`/unbanmask\`, \`/user\`, \`/nick\`, and \`/kick\` commands`);
@@ -862,7 +926,6 @@ export default class ChatModule extends VuexModule {
                 postMessage('You already have that emoticon in a custom slot');
                 break;
               } else if (!first.match(/[^\w\d\p{P}\p{S}]/)) {
-                console.log(first);
                 postMessage('You may only add *emoticons* to custom slots');
                 break;
               }
@@ -1130,6 +1193,96 @@ export default class ChatModule extends VuexModule {
             this.client?.raw(params);
             break;
           }
+          case 'unaway' || 'online': this.setUnaway(); this.autoUpdateStatus = true; break;
+          case 'away':
+            this.setAway(params);
+            this.autoUpdateStatus = false;
+            break;
+          case 'color':
+            if (!params) {
+              postMessage('Please include command parameters. Type `/help color` for more usage instructions');
+              break;
+            }
+            if (params.match(/#[a-f0-9]{6}/)) {
+              this.usernameColor = params;
+            } else if (params.match(/(red)|(blue)|(green)|(purple)|(yellow)|(orange)/)) {
+              switch (params) {
+                case 'red': this.usernameColor = '#ff0000'; break;
+                case 'orange': this.usernameColor = '#ff8800'; break;
+                case 'yellow': this.usernameColor = '#ffff00'; break;
+                case 'blue': this.usernameColor = '#0096ff'; break;
+                case 'green': this.usernameColor = '#00ff00'; break;
+                case 'purple': this.usernameColor = '#ff00ff'; break;
+                default: break;
+              }
+            } else if (params.match(/(\s?\d+,){2}\s?\d+/)) {
+              const colors = params.split(',').map(e => parseInt(e.trim(), 10).toString(16));
+              this.usernameColor = `#${colors.join()}`;
+            } else {
+              console.log('invalid');
+            }
+            break;
+          case 'toolbar':
+            if (!params.includes(' ')) {
+              postMessage('Please include command parameters. Type `/help toolbar` for more usage instructions');
+              break;
+            }
+            switch (params.split(' ')[0]) {
+              case 'emoticons':
+              case 'emoticon':
+                (this.$store as FullStore).rootState.$_settings.emoticonChatFeatures = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/)); break;
+              case 'markdown':
+                (this.$store as FullStore).rootState.$_settings.markdownChatFeatures = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/)); break;
+              case 'preview':
+                (this.$store as FullStore).rootState.$_settings.previewChatFeatures = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/)); break;
+              default: break;
+            }
+            break;
+          case 'indicator':
+            if (!params) {
+              postMessage('Please include command parameters. Type `/help indicator` for more usage instructions');
+              break;
+            }
+            (this.$store as FullStore).rootState.$_settings.indicator = params;
+            break;
+          case 'notifications':
+            if (!params) {
+              postMessage(`Notifications are disabled for ${Object.keys(this.ignoredChannels).filter(e => !this.ignoredChannels[e]).join(', ') || 'no channels'}`);
+            } else {
+              this.ignoredChannels[params.split(' ')[0]] = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/));
+              if (!this.channels[params.split(' ')[0]]) break;
+              this.channels[params.split(' ')[0]]!.notificationsEnabled = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/));
+            }
+            break;
+          case 'keywords':
+            if (!params) {
+              postMessage(`Your notifications keywords are ${this.notificationsKeywords.join(', ') || 'not set'}`);
+              break;
+            }
+            if (params.split(' ')[0] === 'add') {
+              console.log(`Adding ${params.split(' ')[1]}`);
+              this.notificationsKeywords.push(params.split(' ')[1]);
+            } else if (params.split(' ')[0] === 'remove') {
+              console.log(`Removing ${params.split(' ')[1]}`);
+              this.notificationsKeywords = this.notificationsKeywords.filter(e => e !== params.split(' ')[1]);
+            } else {
+              console.log(`Setting ${params.split(/, ?/)}`);
+              this.notificationsKeywords = params.split(/, ?/);
+            }
+            break;
+          case 'textsize':
+          case 'fontsize':
+          case 'size':
+            if (!params) {
+              postMessage('Please include command parameters. Type `/help size` for more usage instructions');
+              break;
+            }
+            if (!parseInt(params, 10) || parseInt(params, 10) > 18 || parseInt(params, 10) < 10) {
+              postMessage('Invalid value. Type `/help size` for  usage instructions');
+              break;
+            }
+            (this.$store as FullStore).rootState.$_settings.fontSize = parseInt(params, 10);
+            break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;
@@ -1227,7 +1380,6 @@ export default class ChatModule extends VuexModule {
 
   @action()
   async userKicked(params: Irc.KickEventArgs) {
-    console.log(params);
     const username = User.parseUsername(params.nick);
     if (username === this.currentUser.username) {
       const channel = this.channels[params.channel];
@@ -1610,6 +1762,7 @@ export default class ChatModule extends VuexModule {
   async setAway(reason: string = 'User is currently away') {
     if (this.currentUser) {
       this.currentUser.away = true;
+      this.currentUser.awayReason = reason;
     }
     if (this.connectedUsers[this.currentUser.username]) {
       this.connectedUsers[this.currentUser.username]!.away = true;
@@ -1644,4 +1797,12 @@ export default class ChatModule extends VuexModule {
   }
 }
 
+// Makes sure TypeScript recognizes the rootState property
+class FullStore extends Store<any> {
+  rootState !: {
+    $_settings: SettingsModule,
+    $_chat: ChatModule,
+  };
+}
+
 export { Channel };
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 4645d7d5..b938c2ba 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -50,8 +50,9 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
   [...content.matchAll(/@\S+\s/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
   });
-  [...content.matchAll(/>https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
-    content = content.replace(e[0].trim(), `><img class="screenshot" src="${e[0].trim().substring(1)}">`);
+  [...content.matchAll(/https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
+    console.log(2);
+    content = content.replace(e[0].trim(), `<img class="screenshot" src="${e[0].trim()}">`);
   });
   return content;
 };

From a8a8e707176ee33d430014a3a6a923769d4599bb Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 26 Jun 2020 17:25:20 -0500
Subject: [PATCH 160/223] Puzzle tooltips, cleanup

---
 src/app/App.vue                               |   1 -
 src/app/components/Messages/PuzzleTooltip.vue | 106 ++++++++++++++
 src/app/components/Messages/UserMessage.vue   |  50 ++++++-
 src/app/components/Messages/UserTooltip.vue   |  24 +---
 src/app/store/chat.vuex.ts                    | 130 ++++++++++--------
 src/app/tools/Markdown.ts                     |   4 +-
 6 files changed, 234 insertions(+), 81 deletions(-)
 create mode 100644 src/app/components/Messages/PuzzleTooltip.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 9f2f102a..7fb87e12 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -236,7 +236,6 @@
   get positionStyle() {
     const style: { [key:string]: string} = {};
     if (this.inGame) {
-      console.log(this.gamePosition);
       if (this.gamePosition[0] === 'l') {
         style.left = `${this.gamePosition[1]}px`;
       } else {
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
new file mode 100644
index 00000000..853fc419
--- /dev/null
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -0,0 +1,106 @@
+<template>
+  <div
+    class="puzzle-tooltip-container"
+    ref="container"
+    :style="{
+      top: `${top + 5}px`,
+      left: `${left + 5}px`
+    }">
+    <ul>
+      <li class="puzzle-tooltip-puzzle">
+        {{puzzleName}}
+        <span class="puzzle-user">{{username}}</span>
+      </li>
+      <li class="puzzle-tooltip-puzzle2">
+        <span class="three">{{solved}} solvers</span>
+        <span class="four" style="float:right">{{reward}}$</span>
+      </li>
+      <li class="description"><span v-html="desc" /></li>
+    </ul>
+  </div>
+</template>
+<script lang="ts">
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
+  @Component
+  export default class PuzzleTooltip extends Vue {
+    @Prop()
+    pid !: number;
+
+    @Prop()
+    top!: number;
+
+    @Prop()
+    left!: number;
+
+    $refs !: {
+      container: HTMLDivElement;
+    };
+
+    puzzleName = 'Untitled';
+
+    desc = 'No description';
+
+    username = 'Anonymous';
+
+    solved = 0;
+
+    reward = 100;
+
+    fill() {
+      this.$vxm.chat.getPuzzleInfo({
+        pid: this.pid,
+        callback: (d) => {
+          const data = JSON.parse(d).data.puzzle;
+          if (!data) return;
+          this.puzzleName = data.title;
+          this.desc = data.body;
+          this.solved = parseInt(data['num-cleared'], 10);
+          this.reward = parseInt(data.reward, 10);
+          this.username = data.username;
+        },
+      });
+    }
+  }
+</script>
+<style scoped lang="scss">
+  @import "../../assets/_custom.scss";
+  @import "~bootstrap/scss/bootstrap.scss";
+  @import '~bootstrap-vue/dist/bootstrap-vue.css';
+  @import '~vue-context/src/sass/vue-context';
+  .puzzle-tooltip-container {
+    color:white;
+    position: fixed;
+    background-color:$med-dark-blue;
+    z-index: 1501;
+    overflow: visible;
+    height:auto;
+    top:0px;
+    left:0px;
+    width:250px;
+    border-radius:5px;
+  }
+  li {
+    padding:5px;
+    list-style-type: none;
+  }
+  ul {
+    border-radius: 5px;
+  }
+  .puzzle-tooltip-puzzle {
+    border-bottom:1px solid white;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+  }
+  .puzzle-tooltip-puzzle2 {
+    border-bottom:1px solid white;
+  }
+  .description {
+    border-bottom-right-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+  .puzzle-user {
+    float:right;
+  }
+</style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 3d0451c2..fb722245 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -24,12 +24,18 @@
       </span>
       <UserTooltip
         v-if="tooltipVisible"
-        v-show="tooltipVisible"
         :user="clickedUser"
         ref="clickTooltip"
         :top="tooltipY"
         :left="tooltipX"
       />
+      <PuzzleTooltip
+        v-if="puzzleTooltipVisible"
+        :pid="pid"
+        ref="puzzleTooltip"
+        :top="puzzleTooltipY"
+        :left="puzzleTooltipX"
+      />
       &lrm;
       <span v-if="!isNotice" class="message-time">[{{formattedTime}}]</span>
     </div>
@@ -63,6 +69,7 @@
   import UserTooltip from './UserTooltip.vue';
   import LinkModal from '@/components/LinkModal.vue';
   import { Channel } from '@/store/chat.vuex';
+  import PuzzleTooltip from './PuzzleTooltip.vue';
 
   @Component({
     components: {
@@ -70,6 +77,7 @@
       UserTooltip,
       ActionMenu,
       LinkModal,
+      PuzzleTooltip,
     },
   })
   export default class UserMessage extends Vue {
@@ -86,6 +94,8 @@
 
     clickedUser!: User;
 
+    pid !: number;
+
     @Prop()
     private message!: Message;
 
@@ -167,6 +177,37 @@
           window.open(`https://${this.$vxm.chat.workbranch}/web/player/${user.uid}/`);
         });
       });
+      // Gets puzzle links from markdown
+      const puzzleLinks = this.$refs.msg.getElementsByClassName('puzzle-link');
+      // Spread operators converts HTMLCollectionOf<Element> to HTMLElement[]
+      // Iterates through each channel link
+      [...puzzleLinks].forEach(l => {
+        // Adds event listener for hover
+        l.addEventListener('mouseenter', (ev) => {
+          const url = (l as HTMLElement).innerText;
+          const matches = url.match(/\d+$/);
+          this.pid = parseInt((matches ? matches[0] : '0'), 10);
+          this.puzzleTooltipVisible = true; // Make it visible
+            /* Ensures information is loaded after the tooltip exists
+            The tooltip uses v-if (to limit GET requests)
+            If the functions are called right away,
+            they could fail because the tooltip doesn't exist yet */
+            this.$nextTick(() => {
+              // Updates tooltip information
+              this.$refs.puzzleTooltip.fill();
+          });
+        });
+        // Hide the tooltip not hovered over
+        l.addEventListener('mouseleave', (ev) => {
+          this.puzzleTooltipVisible = false;
+        });
+        // When the mouse is moved, update the tooltip position
+        l.addEventListener('mousemove', (e: Event) => {
+          const ev = e as MouseEvent;
+          this.puzzleTooltipX = ev.clientX;
+          this.puzzleTooltipY = ev.clientY;
+        });
+      });
       const usernames = Object.keys(this.$vxm.chat.connectedUsers);
       [...this.$el.getElementsByTagName('a')]
         .filter(e => e.href !== e.innerText)
@@ -188,6 +229,12 @@
 
     tooltipVisible = false;
 
+    puzzleTooltipX = 0;
+
+    puzzleTooltipY = 0;
+
+    puzzleTooltipVisible = false;
+
     get formattedTime() {
       return this.message.time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
     }
@@ -230,6 +277,7 @@
       msg: HTMLSpanElement;
       clickTooltip: UserTooltip;
       linkModal: LinkModal;
+      puzzleTooltip: PuzzleTooltip;
     };
 
     openContextMenu(e: MouseEvent) {
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index f5ece618..3083511d 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -45,15 +45,6 @@
       container: HTMLDivElement;
     };
 
-    get parentTop() {
-      return this.$parent;
-    }
-
-    @Watch('parentTop')
-    parentChanged() {
-      console.log(this.parentTop);
-    }
-
     fillProfile() {
       this.$vxm.chat.getUserInfo({
         user: this.user,
@@ -62,17 +53,14 @@
           console.log(data);
           if (data.data !== undefined) {
             if (data.data.user.Profile) {
-              console.log('it exists');
               let desc = data.data.user.Profile;
               if (desc.length > 150) {
                 desc = desc.slice(0, 150)
                   .replace(/<br>/, '')
                   .trim();
                 desc += '...';
-                console.log('it got trimmed');
               }
               this.desc = desc;
-              console.log('Set desc');
             }
             if (data.data.user.rank) {
               this.rank = `#${data.data.user.rank}`;
@@ -85,14 +73,14 @@
       });
 
       /*
-      I need to fill these values in
-      Once roles are set up on the backend, this needs to be replaced anyway
+      These are currently taken from the Discord/Slack roles
+      Eventually, this will be replaced with an API call
       */
       const statusUsernames: {[key:string]:string[]} = {
-        developer: [''],
-        scientist: [''],
-        staff: [''],
-        moderator: [''],
+        developer: ['LFP6', 'Ahalb', 'ElNando888', 'jnicol', 'MasterStormer', ''],
+        scientist: ['rhiju', 'dosoonkim'],
+        staff: ['LFP6', 'Omei', 'rhiju'],
+        moderator: ['Hoglahoo', 'LFP6', 'Omei'],
       };
       const status: string[] = [];
       const name = this.user.username;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index ad23b95c..10ff32ee 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -600,8 +600,7 @@ export default class ChatModule extends VuexModule {
         const command = parts ? parts[1] : '';
         parts = message.match(/^\/\w+ (.+)/);
         const params = parts ? parts[1] : '';
-        const first = params.split(' ')[0];
-        const second = params.split(' ')[1];
+        const parameters = params.split(' ');
         switch (command) {
           case 'help':
             switch (params) {
@@ -907,12 +906,12 @@ export default class ChatModule extends VuexModule {
             }
             break;
           case 'emoticon':
-            if (!first || !second) { // Parameter check
+            if (!parameters[0] || !parameters[1]) { // Parameter check
               postMessage(
                 'Please include command parameters. Type `/help emoticon` for more usage instructions',
               );
               break;
-            } else if (parseInt(second, 10) > 3 || parseInt(second, 10) < 1) {
+            } else if (parseInt(parameters[1], 10) > 3 || parseInt(parameters[1], 10) < 1) {
               postMessage('You have three custom emoticon slots. Type `/help emoticon` for more usage instructions');
               break;
             } else {
@@ -922,37 +921,37 @@ export default class ChatModule extends VuexModule {
               } else {
                 emoticons = this.customEmoticons;
               }
-              if (emoticons.some(e => e === first)) {
+              if (emoticons.some(e => e === parameters[0])) {
                 postMessage('You already have that emoticon in a custom slot');
                 break;
-              } else if (!first.match(/[^\w\d\p{P}\p{S}]/)) {
+              } else if (!parameters[0].match(/[^\w\d\p{P}\p{S}]/)) {
                 postMessage('You may only add *emoticons* to custom slots');
                 break;
               }
             }
             // Changing the array elements with array[index] = newValue isn't reactive
-            Vue.set(this.customEmoticons, (parseInt(second, 10) - 1), first);
+            Vue.set(this.customEmoticons, (parseInt(parameters[1], 10) - 1), parameters[0]);
             localStorage.customEmoticons = JSON.stringify(this.customEmoticons);
             break;
           case 'emoticon-list':
             postMessage(`Your custom emoticons are ${this.customEmoticons[0]} (slot 1), ${this.customEmoticons[1]} (slot 2), and ${this.customEmoticons[2]} (slot 3).`);
             break;
           case 'ban':
-            if (params.split(' ').length < 2) {
+            if (parameters.length < 2) {
               postMessage('Please include command parameters. Type `/help ban` for more usage instructions');
               break;
             }
             if (this.oper) {
-              if (params.split(' ')[0] === '*') { // If ban should be in all channels
+              if (parameters[0] === '*') { // If ban should be in all channels
                 channelNames.forEach(c => { // For each channel
-                  this.client?.ban(c, `*!${params.split(' ')[1]}@*`); // Ban the user's username
+                  this.client?.ban(c, `*!${parameters[1]}@*`); // Ban the user's username
                 });
               } else { // Otherwise, just ban them from the one channel
-                this.client?.ban(params.split(' ')[0], `*!${params.split(' ')[1]}@*`);
+                this.client?.ban(parameters[0], `*!${parameters[1]}@*`);
               }
-              if (params.split(' ')[2]) {
-                const user = this.connectedUsers[params.split(' ')[1]];
-                const reason = params.substring(params.indexOf(params.split(' ')[2]));
+              if (parameters[2]) {
+                const user = this.connectedUsers[parameters[1]];
+                const reason = params.substring(params.indexOf(parameters[2]));
                 if (user && user.nicks) {
                   const nick = user.nicks[0];
                   this.giveReason({
@@ -967,17 +966,17 @@ export default class ChatModule extends VuexModule {
             }
             break;
           case 'unban': // Exact same as ban, just replacing 'ban' with 'unban'
-            if (params.split(' ').length < 2) {
+            if (parameters.length < 2) {
               postMessage('Please include command parameters. Type `/help unban` for more usage instructions');
               break;
             }
             if (this.oper) {
-              if (params.split(' ')[0] === '*') {
+              if (parameters[0] === '*') {
                 channelNames.forEach(c => {
-                  this.client?.unban(c, `*!${params.split(' ')[1]}@*`);
+                  this.client?.unban(c, `*!${parameters[1]}@*`);
                 });
               } else {
-                this.client?.unban(params.split(' ')[0], `*!${params.split(' ')[1]}@*`);
+                this.client?.unban(parameters[0], `*!${parameters[1]}@*`);
               }
             } else {
               this.auth = true;
@@ -985,23 +984,23 @@ export default class ChatModule extends VuexModule {
             }
             break;
           case 'kick':
-            if (params.split(' ').length < 2) {
+            if (parameters.length < 2) {
               postMessage('Please include command parameters. Type `/help kick` for more usage instructions');
               break;
             }
             if (this.oper) {
-              if (params.split(' ').length >= 2) {
-                this.connectedUsers[params.split(' ')[1]]?.nicks.forEach((e) => { // Kicks each nick
-                  if (params.split(' ')[0] === '*') {
+              if (parameters.length >= 2) {
+                this.connectedUsers[parameters[1]]?.nicks.forEach((e) => { // Kicks each nick
+                  if (parameters[0] === '*') {
                     channelNames.forEach(c => { // If user should be kicked from all channels
                       this.client?.raw(`KICK ${c} ${e}`);
                     });
                   } else { // Otherwise, kick from the one channel
-                    this.client?.raw(`KICK ${params.split(' ')[0]} ${e}`);
+                    this.client?.raw(`KICK ${parameters[0]} ${e}`);
                   }
-                  if (params.split(' ')[2]) {
-                    const user = this.connectedUsers[params.split(' ')[1]];
-                    const reason = params.substring(params.indexOf(params.split(' ')[2]));
+                  if (parameters[2]) {
+                    const user = this.connectedUsers[parameters[1]];
+                    const reason = params.substring(params.indexOf(parameters[2]));
                     if (user && user.nicks) {
                       const nick = user.nicks[0];
                       this.giveReason({
@@ -1019,17 +1018,17 @@ export default class ChatModule extends VuexModule {
             break;
           case 'quiet':
             if (this.oper) {
-              if (params.split(' ').length >= 2) {
-                if (params.split(' ')[0] === '*') {
+              if (parameters.length >= 2) {
+                if (parameters[0] === '*') {
                   channelNames.forEach(c => { // If user should be quieted in all channels
-                    this.client?.raw(`MODE ${c} +b m;*!${params.split(' ')[1]}@*`);
+                    this.client?.raw(`MODE ${c} +b m;*!${parameters[1]}@*`);
                   });
                 } else {
-                  this.client?.raw(`MODE ${params.split(' ')[0]} +b m;*!${params.split(' ')[1]}@*`);
+                  this.client?.raw(`MODE ${parameters[0]} +b m;*!${parameters[1]}@*`);
                 }
-                if (params.split(' ')[2]) {
-                  const user = this.connectedUsers[params.split(' ')[1]];
-                  const reason = params.substring(params.indexOf(params.split(' ')[2]));
+                if (parameters[2]) {
+                  const user = this.connectedUsers[parameters[1]];
+                  const reason = params.substring(params.indexOf(parameters[2]));
                   if (user && user.nicks) {
                     const nick = user.nicks[0];
                     this.giveReason({
@@ -1048,13 +1047,13 @@ export default class ChatModule extends VuexModule {
             break;
           case 'unquiet': // Same as quiet, but 'quiet' is replaced with 'unquiet' and '+b' with '-b'
             if (this.oper) {
-              if (params.split(' ').length >= 2) {
-                if (params.split(' ')[0] === '*') {
+              if (parameters.length >= 2) {
+                if (parameters[0] === '*') {
                   channelNames.forEach(c => {
-                    this.client?.raw(`MODE ${c} -b m;*!${params.split(' ')[1]}@*`);
+                    this.client?.raw(`MODE ${c} -b m;*!${parameters[1]}@*`);
                   });
                 } else {
-                  this.client?.raw(`MODE ${params.split(' ')[0]} -b m;*!${params.split(' ')[1]}@*`);
+                  this.client?.raw(`MODE ${parameters[0]} -b m;*!${parameters[1]}@*`);
                 }
               } else {
                 postMessage('Please include command parameters. Type `/help unquiet` for more usage instructions');
@@ -1087,13 +1086,13 @@ export default class ChatModule extends VuexModule {
             break;
           case 'notice':
             if (this.oper) {
-              if (params.split(' ').length > 1) {
-                if (params.split(' ')[0] === '*') {
+              if (parameters.length > 1) {
+                if (parameters[0] === '*') {
                   channelNames.forEach(c => {
                     const msg = message
                       .replace('/notice', '')
                       .replace(/ \[#[a-f0-9]{6}\]$/, '')
-                      .replace(params.split(' ')[0], '')
+                      .replace(parameters[0], '')
                       .trim();
                     this.client?.notice(c, msg);
                     this.postMessage(new Message(msg, c, this.currentUser, false, true));
@@ -1102,10 +1101,10 @@ export default class ChatModule extends VuexModule {
                   const msg = message
                     .replace('/notice', '')
                     .replace(/ \[#[a-f0-9]{6}\]$/, '')
-                    .replace(params.split(' ')[0], '')
+                    .replace(parameters[0], '')
                     .trim();
-                  this.client?.notice(params.split(' ')[0], msg);
-                  this.postMessage(new Message(msg, params.split(' ')[0], this.currentUser, false, true));
+                  this.client?.notice(parameters[0], msg);
+                  this.postMessage(new Message(msg, parameters[0], this.currentUser, false, true));
                 }
               } else {
                 postMessage('Please include command parameters. Type `/help notice` for more usage instructions');
@@ -1118,7 +1117,7 @@ export default class ChatModule extends VuexModule {
           case 'banmask':
             if (this.oper) {
               if (params.length > 1) {
-                this.client?.ban(params.split(' ')[0], params.split(' ')[1]);
+                this.client?.ban(parameters[0], parameters[1]);
               } else {
                 postMessage('Please include command parameters. Type `/help banmask` for more usage instructions');
               }
@@ -1130,7 +1129,7 @@ export default class ChatModule extends VuexModule {
           case 'unbanmask':
             if (this.oper) {
               if (params.length > 1) {
-                this.client?.unban(params.split(' ')[0], params.split(' ')[1]);
+                this.client?.unban(parameters[0], parameters[1]);
               } else {
                 postMessage('Please include command parameters. Type `/help unbanmask` for more usage instructions');
               }
@@ -1219,7 +1218,7 @@ export default class ChatModule extends VuexModule {
               const colors = params.split(',').map(e => parseInt(e.trim(), 10).toString(16));
               this.usernameColor = `#${colors.join()}`;
             } else {
-              console.log('invalid');
+              postMessage('Invalid color. Colors can be in hex, RGB, or text format. Type `/help color` for more usage instructions.');
             }
             break;
           case 'toolbar':
@@ -1227,14 +1226,14 @@ export default class ChatModule extends VuexModule {
               postMessage('Please include command parameters. Type `/help toolbar` for more usage instructions');
               break;
             }
-            switch (params.split(' ')[0]) {
+            switch (parameters[0]) {
               case 'emoticons':
               case 'emoticon':
-                (this.$store as FullStore).rootState.$_settings.emoticonChatFeatures = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/)); break;
+                (this.$store as FullStore).rootState.$_settings.emoticonChatFeatures = Boolean(parameters[1].match(/(true)|(yes)|(on)/)); break;
               case 'markdown':
-                (this.$store as FullStore).rootState.$_settings.markdownChatFeatures = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/)); break;
+                (this.$store as FullStore).rootState.$_settings.markdownChatFeatures = Boolean(parameters[1].match(/(true)|(yes)|(on)/)); break;
               case 'preview':
-                (this.$store as FullStore).rootState.$_settings.previewChatFeatures = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/)); break;
+                (this.$store as FullStore).rootState.$_settings.previewChatFeatures = Boolean(parameters[1].match(/(true)|(yes)|(on)/)); break;
               default: break;
             }
             break;
@@ -1249,9 +1248,9 @@ export default class ChatModule extends VuexModule {
             if (!params) {
               postMessage(`Notifications are disabled for ${Object.keys(this.ignoredChannels).filter(e => !this.ignoredChannels[e]).join(', ') || 'no channels'}`);
             } else {
-              this.ignoredChannels[params.split(' ')[0]] = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/));
-              if (!this.channels[params.split(' ')[0]]) break;
-              this.channels[params.split(' ')[0]]!.notificationsEnabled = Boolean(params.split(' ')[1].match(/(true)|(yes)|(on)/));
+              this.ignoredChannels[parameters[0]] = Boolean(parameters[1].match(/(true)|(yes)|(on)/));
+              if (!this.channels[parameters[0]]) break;
+              this.channels[parameters[0]]!.notificationsEnabled = Boolean(parameters[1].match(/(true)|(yes)|(on)/));
             }
             break;
           case 'keywords':
@@ -1259,14 +1258,12 @@ export default class ChatModule extends VuexModule {
               postMessage(`Your notifications keywords are ${this.notificationsKeywords.join(', ') || 'not set'}`);
               break;
             }
-            if (params.split(' ')[0] === 'add') {
-              console.log(`Adding ${params.split(' ')[1]}`);
-              this.notificationsKeywords.push(params.split(' ')[1]);
-            } else if (params.split(' ')[0] === 'remove') {
-              console.log(`Removing ${params.split(' ')[1]}`);
-              this.notificationsKeywords = this.notificationsKeywords.filter(e => e !== params.split(' ')[1]);
+            if (parameters[0] === 'add') {
+              this.notificationsKeywords.push(parameters[1]);
+            } else if (parameters[0] === 'remove') {
+              // eslint-disable-next-line max-len
+              this.notificationsKeywords = this.notificationsKeywords.filter(e => e !== parameters[1]);
             } else {
-              console.log(`Setting ${params.split(/, ?/)}`);
               this.notificationsKeywords = params.split(/, ?/);
             }
             break;
@@ -1436,6 +1433,19 @@ export default class ChatModule extends VuexModule {
     xmlHttp.send(null);
   }
 
+  @action()
+  async getPuzzleInfo(arg: { pid: number, callback: (data: any | undefined) => any}) {
+    const { pid } = arg || { pid: 0 }; // UID needed for get request
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function cb() {
+      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+        arg.callback(xmlHttp.responseText); // Calls callback after response
+      }
+    };
+    xmlHttp.open('GET', `https://eternagame.org/get/?type=puzzle&nid=${pid}`, true); // true for asynchronous
+    xmlHttp.send(null);
+  }
+
   @action()
   async onNoticeReceived({
     message, target, time, nick, type,
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index b938c2ba..2b5e778e 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -51,9 +51,11 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
     content = content.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
   });
   [...content.matchAll(/https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
-    console.log(2);
     content = content.replace(e[0].trim(), `<img class="screenshot" src="${e[0].trim()}">`);
   });
+  [...content.matchAll(/https?:\/\/eterna(game|dev)\.org\/puzzles\/\d+/g)].forEach(e => {
+    content = content.replace(e[0].trim(), `<mark class="puzzle-link"><a href="${e[0].trim()}">${e[0].trim()}</a></mark>`);
+  });
   return content;
 };
 export default md;

From 723c6d70e9f70fa5cdd7d6e4af88d8aab743b6af Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 27 Jun 2020 00:08:37 -0500
Subject: [PATCH 161/223] User can add and remove channels

---
 src/app/assets/send-button2.png               | Bin 1159 -> 0 bytes
 .../Slideout/Chat/AddChatButton.vue           |  81 ++++++++++++++++++
 .../Slideout/Chat/ChatSelectButton.vue        |  34 +++++++-
 .../Slideout/Chat/SlideoutChats.vue           |   6 +-
 src/app/store/chat.vuex.ts                    |  27 ++++++
 5 files changed, 146 insertions(+), 2 deletions(-)
 delete mode 100644 src/app/assets/send-button2.png
 create mode 100644 src/app/components/Slideout/Chat/AddChatButton.vue

diff --git a/src/app/assets/send-button2.png b/src/app/assets/send-button2.png
deleted file mode 100644
index fb82092647e3f39e8345b0ff0fa47a196dc7ef79..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1159
zcmV;21bF+2P)<h;3K|Lk000e1NJLTq001li001lq1^@s69)wx}00001b5ch_0Itp)
z=>Px#IAvH#W=%~1DgXcg2mk?xX#fNO00031000^Q000000-yo_1ONa40RR91ET97b
z1ONa40RR91EC2ui0N<v?nE(I-{YgYYR9FesnN3#PFc8NzPFmQN8x-Cv**0z1V@^<R
zK(cAcE;k@O0dy7UhHwLVf|@<F?l$Rrq$g-t(k52t??icuQEbZ}d9PkXmNXjuJRXgu
z35gt6{qlaR`Z(DaB<ey6cdkm6O0yT<knmW>pKMfb{MOD`b=sC>I{@-~=fihWh$as{
z%ragI*(X8Qx5v9*Y{y#xH!gl22^n;GvTfUmO!5pq66AF6KD@dz^_$vK0oQx?+f|xe
zvI5tnq<}VWBC9RGy)#PE<s=Eb?G2h0ntW$DH%T@}zl%9ASCWocVD{Bhhv<@D!&Z`_
zy#1I1bM0LWPvUf~bcx3KfI+DlH@K`mEXup%TFa#0XyL~B&odiXju;Ptlr0Wh2Yhe6
z@}ppwd#^X_M%z(;Vqy3ZUX4lE)CSn8BVGS}%~$=6-k?uJN2;E+gb}{AYkhtE5-_3x
zoSz$0`K$?6DK7$=^^d2r`bLi)OD=)XRRk=c@7lGdl=4bFK$a3L^KiNtz5t$w6nD{+
zctd^N4NT%iK(k&~4|fY-B5`7xbY+_iQn^hL&^lWP%%9vt+s`c)mHy-_AB;QlLW2#A
zm}6#PDVwO+UWg{^f)+s#0@Hkp_}dm%mp6qUy<fl28a={@u~FS|Du1S~t}x5}IxLNd
z0ak|sS<eC)9kUi_W`z&C(aE#c%Z8SGvY9Qqtb~SfWkQqW9Ubo`_6_sqYAOqwE&RH0
z3#%u!fu3$Y>!@*YB^F+3z;P4j=_?J`CN@_d|DL9K2#&=M4sW_|(g@qg*udJHY<SW6
zg<H5RSQv~K-59_gDn(pn!h$cfuyn}(A7JN<o-=)3@$v$fZCUVP!A&-+zJtUZS2CY;
z*8v+ERLX0x&K4a}KWw!8SsN^K@g_cG<d4VfYV?L9K8n0l^`sI9Oq?W=<j`*ux=i{w
zvGRixE8(tk5!Se|YZ6}BM$UL;pVpBV7OJEaXG-P5!f4=Zi<fpY#C|{K1j<3&$+-wv
zeAsT=yRHIWSQrfxQEg&1s?N9)8<9#tU+bR-;j4<u76A(uFzLFNfRSNg-|XlDardjB
zi-5(vV9~QaXj^g#G~fyoaTa+BxQ8I>I3!0wAUdq{aHc88uM{8I6}nLkMqmhKJ>5np
z$Wo7sKua#6D-V+&f<EbOYq@93#)Zq37FKXblyH`Z^TpzYYAd6}0)x*+)2q?B5`i%w
z{8L6u`e{R6bdtn6hb}~e=mIm1O9iY3hSnC;wfQ2dv8Iwg2*2>bO0udx)(Th+3=?z6
zbrEqA(au%EIL{jy><u^ycuHs5G83>;j=UVwN5~!_$$`AV6Sv{ljgta4-`IO&JDcaP
Z+kXp`?*O_~O#A=<002ovPDHLkV1iJ5{V@Ol

diff --git a/src/app/components/Slideout/Chat/AddChatButton.vue b/src/app/components/Slideout/Chat/AddChatButton.vue
new file mode 100644
index 00000000..dc6056aa
--- /dev/null
+++ b/src/app/components/Slideout/Chat/AddChatButton.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="add-chat-container">
+    <button @click="addChat">+</button>
+    <span class="input-container">
+      #<input @keypress.enter="addChat(); chatName = ''" v-model="chatName"
+    ></span>
+  </div>
+</template>
+
+<script lang="ts">
+  import {
+    Component, Prop, Vue, Watch,
+  } from 'vue-property-decorator';
+  import chat, { Channel } from '@/store/chat.vuex';
+  import SlideoutChats from './SlideoutChats.vue';
+  import BanStatus from '../../../types/BanStatus';
+
+
+  @Component
+  export default class AddChatButton extends Vue {
+    chatName: string = '';
+
+    addChat() {
+      const name = `#${this.chatName.replace('#', '')}`;
+      this.$vxm.chat.joinChannel(name);
+      this.$nextTick(() => {
+        this.$parent.$el.scrollTop = this.$parent.$el.scrollHeight;
+      });
+      let joinedChannels = [];
+      if (localStorage.joinedChannels) {
+        joinedChannels = JSON.parse(localStorage.joinedChannels);
+      }
+      joinedChannels.push(name);
+      localStorage.joinedChannels = JSON.stringify(joinedChannels);
+    }
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  @import "../../../assets/_custom.scss";
+  @import "~bootstrap/scss/bootstrap.scss";
+  @import '~bootstrap-vue/dist/bootstrap-vue.css';
+  /* Style the buttons that are used to open the tab content */
+  .add-chat-container {
+    transition: 0.3s;
+    padding: 0.4em 1.25em;
+    font-size: 12px;
+    color: #fff;
+    background-color: black;
+    width: 100%;
+    position: relative;
+  }
+  button {
+    height: 30px;
+    width: 30px;
+    background-color: $green;
+    text-align: center;
+    padding-top:2px;
+    font-size: 18px;
+    border: none;
+    color: white;
+    display: inline-block;
+    border-radius: 4px;
+    margin-right: 10px;
+  }
+  .input-container {
+    height: 30px;
+    width: calc(100% - 50px);
+    margin-right: 10px;
+    display: inline-block;
+    font-size: 20px;
+    vertical-align: baseline;
+  }
+  input {
+    width: calc(100% - 1rem - 2px);
+    float: right;
+    height: 100%;
+    padding-bottom: 2px;
+  }
+</style>
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index f2447bd2..26e902eb 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -1,10 +1,12 @@
 <template>
   <Button
+    class="chat-select"
     :class="{active: isActive}"
     @click="$emit('input');"
   >
     <p class='channel-name'>{{ name }}</p>
     <p class='channel-description'>{{ description }}</p>
+    <button class="channel-close" @click="close" v-show="joined">X</button>
     <slot />
   </Button>
 </template>
@@ -28,13 +30,25 @@
     get isActive() {
       return this.$vxm.chat.chatChannel.includes(this.name);
     }
+
+    close(e: Event) {
+      e.stopImmediatePropagation();
+      Vue.delete(this.$vxm.chat.channels, this.name);
+      let joined: string[] = JSON.parse(localStorage.joinedChannels || this.name);
+      joined = joined.filter(i => i !== this.name);
+      localStorage.joinedChannels = JSON.stringify(joined);
+    }
+
+    get joined() {
+      return JSON.parse(localStorage.joinedChannels || '').includes(this.name);
+    }
   }
 </script>
 
 
 <style lang="scss" scoped>
   /* Style the buttons that are used to open the tab content */
-  button {
+  .chat-select {
     border: none;
     outline: none;
     cursor: pointer;
@@ -85,4 +99,22 @@
   .mentioned {
     color:orange !important; /* Overrides notification styles */
   }
+
+  .chat-select:hover > .channel-close {
+    background-color: #e74c3c;
+    color: white;
+    position: absolute;
+    right: 25px;
+    border: none;
+    height: 100%;
+    top: -1px;
+    width: 20px;
+    display: inline-block;
+    font-weight: bold;
+    font-size: 20px;
+  }
+
+  .channel-close {
+    display: none;
+  }
 </style>
diff --git a/src/app/components/Slideout/Chat/SlideoutChats.vue b/src/app/components/Slideout/Chat/SlideoutChats.vue
index b68e4428..69f91c61 100644
--- a/src/app/components/Slideout/Chat/SlideoutChats.vue
+++ b/src/app/components/Slideout/Chat/SlideoutChats.vue
@@ -12,6 +12,8 @@
     >
       <Splitter />
     </ChatSelectButton>
+    <Splitter />
+    <AddChatButton />
   </div>
 </template>
 <script lang="ts">
@@ -21,15 +23,17 @@
   import ChatSelectButton from './ChatSelectButton.vue';
   import Slideout from '../Slideout.vue';
   import Splitter from './Splitter.vue';
+  import AddChatButton from './AddChatButton.vue';
 
   @Component({
     components: {
       ChatSelectButton,
       Splitter,
+      AddChatButton,
     },
   })
   export default class SlideoutChats extends Vue {
-    activeTab = 6; // If any real channel index (or unset), causes weird bug. This fixes it
+    activeTab = 100; // If any real channel index (or unset), causes weird bug. This fixes it
 
     channelDescriptions: {[channel:string]:string} = {
     '#general': 'General chat',
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 10ff32ee..372faa7e 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -383,6 +383,18 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.joinedChannels) {
+        try {
+          const joinedChannels: string[] = JSON.parse(localStorage.joinedChannels);
+          joinedChannels.forEach(e => {
+            this.joinChannel(e);
+          });
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of joined channels',
+          );
+        }
+      }
     }
 
     if (process.env.VUE_APP_SERVER_URL) {
@@ -1805,6 +1817,21 @@ export default class ChatModule extends VuexModule {
       this.connect();
     }
   }
+
+  @action()
+  async joinChannel(name: string) {
+    if (Object.keys(this.channels).includes(name)) return;
+    Vue.set(this.channels, name, {
+      name,
+      notificationsEnabled: true,
+      notifications: false,
+      postedMessages: [],
+      maxHistoryMessages: 50,
+      mentioned: false,
+      banned: BanStatus.BAN_STATUS_NORMAL,
+    });
+    this.client?.join(name);
+  }
 }
 
 // Makes sure TypeScript recognizes the rootState property

From 2ad35d1f3037e83c86f54b8b6a6cc790551e7a61 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 27 Jun 2020 00:10:51 -0500
Subject: [PATCH 162/223] Screenshots are links to full-sized image

---
 src/app/components/Messages/UserTooltip.vue | 1 -
 src/app/tools/Markdown.ts                   | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 3083511d..1d5dde42 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -50,7 +50,6 @@
         user: this.user,
         callback: (d) => {
           const data = JSON.parse(d);
-          console.log(data);
           if (data.data !== undefined) {
             if (data.data.user.Profile) {
               let desc = data.data.user.Profile;
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 2b5e778e..03c1fe37 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -51,7 +51,7 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
     content = content.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
   });
   [...content.matchAll(/https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
-    content = content.replace(e[0].trim(), `<img class="screenshot" src="${e[0].trim()}">`);
+    content = content.replace(e[0].trim(), `<a href="${e[0].trim()}" target="_blank"><img class="screenshot" src="${e[0].trim()}"></a>`);
   });
   [...content.matchAll(/https?:\/\/eterna(game|dev)\.org\/puzzles\/\d+/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<mark class="puzzle-link"><a href="${e[0].trim()}">${e[0].trim()}</a></mark>`);

From e380df6e9fd1cc10e369255cbd8c96bc0a41cd34 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 27 Jun 2020 10:16:07 -0500
Subject: [PATCH 163/223] Chat commands for joining/leaving channels

---
 .../Slideout/Chat/AddChatButton.vue           |  6 ----
 .../Slideout/Chat/ChatSelectButton.vue        |  5 +--
 src/app/store/chat.vuex.ts                    | 35 +++++++++++++++++--
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/app/components/Slideout/Chat/AddChatButton.vue b/src/app/components/Slideout/Chat/AddChatButton.vue
index dc6056aa..d56140d5 100644
--- a/src/app/components/Slideout/Chat/AddChatButton.vue
+++ b/src/app/components/Slideout/Chat/AddChatButton.vue
@@ -26,12 +26,6 @@
       this.$nextTick(() => {
         this.$parent.$el.scrollTop = this.$parent.$el.scrollHeight;
       });
-      let joinedChannels = [];
-      if (localStorage.joinedChannels) {
-        joinedChannels = JSON.parse(localStorage.joinedChannels);
-      }
-      joinedChannels.push(name);
-      localStorage.joinedChannels = JSON.stringify(joinedChannels);
     }
   }
 </script>
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index 26e902eb..79267a32 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -33,10 +33,7 @@
 
     close(e: Event) {
       e.stopImmediatePropagation();
-      Vue.delete(this.$vxm.chat.channels, this.name);
-      let joined: string[] = JSON.parse(localStorage.joinedChannels || this.name);
-      joined = joined.filter(i => i !== this.name);
-      localStorage.joinedChannels = JSON.stringify(joined);
+      this.$vxm.chat.leaveChannel(this.name);
     }
 
     get joined() {
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 372faa7e..f51cc81b 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -910,10 +910,10 @@ export default class ChatModule extends VuexModule {
              If the number is -1, the name was invalid. It gives an error message and a channel list
              If the number was not -1, the name worked. It sets the tab to the channel.
             */
-            if ((channelNames.slice() as [string]).indexOf(`#${params}`.replace('##', '#')) === -1) {
-              postMessage(`Channel name invalid. Channels are ${channelNames.join(', ')}`);
+            if ((Object.keys(this.channels).slice() as [string]).indexOf(`#${params}`.replace('##', '#')) === -1) {
+              postMessage(`Channel name invalid. Channels are ${Object.keys(this.channels).join(', ')}`);
             } else {
-              this.tab = (channelNames.slice() as [string]).indexOf(`#${params}`.replace('##', '#'));
+              this.tab = (Object.keys(this.channels).slice() as [string]).indexOf(`#${params}`.replace('##', '#'));
               this.chatChannel = params;
             }
             break;
@@ -1292,6 +1292,20 @@ export default class ChatModule extends VuexModule {
             }
             (this.$store as FullStore).rootState.$_settings.fontSize = parseInt(params, 10);
             break;
+          case 'join':
+            if (!params) {
+              postMessage('Please include command parameters. Type `/help join` for more usage instructions');
+              break;
+            }
+            this.joinChannel(`#${params}`.replace('##', '#'));
+            break;
+          case 'leave':
+            if (!params) {
+              postMessage('Please include command parameters. Type `/help leave` for more usage instructions');
+              break;
+            }
+            this.leaveChannel(`#${params}`.replace('##', '#'));
+            break;
           default:
             postMessage('Invalid command. Type `/help` for more available commands');
             break;
@@ -1831,6 +1845,21 @@ export default class ChatModule extends VuexModule {
       banned: BanStatus.BAN_STATUS_NORMAL,
     });
     this.client?.join(name);
+    let joinedChannels = [];
+    if (localStorage.joinedChannels) {
+      joinedChannels = JSON.parse(localStorage.joinedChannels);
+    }
+    joinedChannels.push(name);
+    localStorage.joinedChannels = JSON.stringify(joinedChannels);
+  }
+
+  @action()
+  async leaveChannel(name: string) {
+    Vue.delete(this.channels, name);
+    let joined: string[] = JSON.parse(localStorage.joinedChannels || name);
+    joined = joined.filter(i => i !== name);
+    localStorage.joinedChannels = JSON.stringify(joined);
+    this.client?.part(name);
   }
 }
 

From 1eaee5ce7a5cde30a1c4347f5a140ec2d3be14c8 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 27 Jun 2020 17:10:19 -0500
Subject: [PATCH 164/223] Local messages pins, switches and chat select buttons
 are accessible, automaic status update setting

---
 src/app/App.vue                               |  12 ++-
 src/app/assets/pin.png                        | Bin 0 -> 623 bytes
 src/app/components/Header/PinButton.vue       |  43 +++++++++
 src/app/components/Input/EmoticonBar.vue      |   6 ++
 src/app/components/Input/ScalableInput.vue    |   3 +-
 src/app/components/Messages/ActionMenu.vue    |  83 +++++++++++++-----
 src/app/components/Messages/UserMessage.vue   |   4 +-
 src/app/components/Panes/MessagePane.vue      |   9 +-
 .../Slideout/Chat/AddChatButton.vue           |   5 +-
 .../Slideout/Chat/ChatSelectButton.vue        |   1 +
 src/app/components/Slideout/Chat/Splitter.vue |   2 +-
 .../Settings/Sections/StatusSection.vue       |  17 +++-
 .../Slideout/Settings/SettingsSwitch.vue      |  16 ++--
 src/app/store/chat.vuex.ts                    |  34 ++++++-
 src/app/types/message.ts                      |   2 +
 15 files changed, 200 insertions(+), 37 deletions(-)
 create mode 100644 src/app/assets/pin.png
 create mode 100644 src/app/components/Header/PinButton.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 7fb87e12..2f470938 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -36,6 +36,7 @@
       <div id="current-tab">{{ currentTab }}</div>
       <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
       <OpenWindowButton v-model="fullSize" />
+      <PinButton v-model="$vxm.chat.showPinned" />
     </template>
     <template slot="footer">
       <div id="resize-handle" v-show="!minimized"/>
@@ -58,6 +59,7 @@
   import DraggableDiv from '@/components/DraggableDiv.vue';
   import OperLogin from '@/components/OperLogin.vue';
   import PrivateMessageModal from '@/components/Messages/PrivateMessageModal.vue';
+  import PinButton from '@/components/Header/PinButton.vue';
 
   Vue.use(BootstrapVue);
 
@@ -78,6 +80,7 @@
     OpenWindowButton,
     OperLogin,
     PrivateMessageModal,
+    PinButton,
   },
   directives: {
     resize,
@@ -518,7 +521,14 @@
   position: absolute;
   top: 0px;
   margin-top: 2.5px;
-  right: 39px;
+  right: 40px;
+}
+.pin-button {
+  //Link that opens chat in new window
+  position: absolute;
+  top: 0px;
+  margin-top: 2.5px;
+  right: 75px;
 }
 #current-tab {
   //Text on the top bar that says which chat channel the user is in
diff --git a/src/app/assets/pin.png b/src/app/assets/pin.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d4b36a7321d5f432a81a6dcca2d1cd2ed04afd9
GIT binary patch
literal 623
zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fjKx9jP7LeL$-D$|EK(yp(|mmy
zw18|52FCVG1{RPKAeI7R1_q`DOmGpg1<VLGNYehLU;<F_Q%@Ji5DUSzQ?31(90iW2
z^Xu6qF->)=xqaamYmY>;qt?=`g3-#H_YdS3sNI^mLjE9E;~@tXv9M{=x;};qHVX>B
zlSmiqJ7D|3Am`va-v58!)~7vZcragiovnOs=F{BmZx6lgj{DdV#@W}M<(efhY37$d
zOGDR3Fvrb1zF-zZi;~hx)|ew(Kg}z>e;~oDe*PsJ<p)wq_jVm*XDWAiYUe7rnrC{R
z?m64$wE@Oo)nq<}?O1-gxOrB=yp<}IiV2gi^NPH#m91_xTEn_`Qucua|Ko8Bd6dt~
z@A8j5FW)Bj^Q556<v1m#f}N$mYd3Fll0CRd{bk!ksj25nZDy8lW3QWZx#Q&(p4)d!
z9CQP?YfUHm?$O+K-l$f3N~u|aneAVd1L80F->+NwH9&d>>&!22ni-Wjo5JVL{oZDD
zcw@`O$wepfAMh@i@i0ll$!Eik$glqbuHBM3?tfn_ME3oO%o$aiTkKMsPajHBdOcTH
zHCazSHlfXFZ`_i+c!k<;>IrY21QmaOJB$0n@2|&JaIe<Bqv!hOhv}LH^O7}|#;juP
z$xz(+C3{u!t>23pew`|<irW{Pb|-gQ0w?QU57qgT0!m9(7a06}yX~ZR%rqxPWmkKd
zR~r`8Y&cYJTw=L<i`{zOgPP7y6E^IWd-jJtruj~OVy8zPDB?X`{an^LB{Ts5DrW%?

literal 0
HcmV?d00001

diff --git a/src/app/components/Header/PinButton.vue b/src/app/components/Header/PinButton.vue
new file mode 100644
index 00000000..7b6c4d4e
--- /dev/null
+++ b/src/app/components/Header/PinButton.vue
@@ -0,0 +1,43 @@
+<template>
+  <button
+    class="pin-button"
+    style="float: right;"
+    @click="$emit('input', !value);"
+    aria-label="`Click to pin viewed messages"
+   >
+   <v-style>
+      button:focus {
+        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
+      }
+    </v-style>
+  </button>
+</template>
+
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+
+
+  @Component
+  export default class PinButton extends Vue {
+    @Prop()
+    value!: boolean;
+  }
+</script>
+
+
+<style lang="scss" scoped>
+  .pin-button {
+    background-image: url("../../assets/pin.png");
+    background-repeat: no-repeat;
+    background-size: 60% 60%;
+    background-position: center;
+    height: 35px;
+    width: 35px;
+    background-color: transparent;
+    border: none;
+  }
+  .pin-button:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index ca0c5f70..3813d166 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -9,6 +9,7 @@
           :key="emoticon"
           :emoticon='emoticon'
           class="border-right"
+          :aria-label="`Add a ${emoticon} emoticon to the input text`"
           @emote='add' />
       </div>
       <div id='markdown-submenu' v-show="markdownSelected && markdownChatFeatures" >
@@ -24,6 +25,7 @@
           @drop.native.prevent
           @dragover.native.prevent
           @dragenter.native.prevent="dragOver($event, index, item)"
+          :aria-label="`Format the input text (${item})`"
         />
       </div>
       <div id='preview-submenu' v-show="previewSelected && previewChatFeatures">
@@ -44,6 +46,7 @@
       id='emoticon-bar-container'
       v-if="anyChatFeatures" >
       <MenuButton
+        aria-label="Open emoticon toolbar"
         id="emoticonSelect"
         v-if="emoticonChatFeatures"
         name="👍"
@@ -51,6 +54,7 @@
         @button="select('emoticon');"
       />
       <MenuButton
+        aria-label="Open markdown toolbar"
         id="markdownSelect"
         v-if="markdownChatFeatures"
         name="A"
@@ -58,6 +62,7 @@
         @button="select('markdown');"
       />
       <MenuButton
+        aria-label="Open preview toolbar"
         id="previewSelect"
         v-if="previewChatFeatures"
         name="P"
@@ -69,6 +74,7 @@
         class="other-menu-button"
         styles=""
         @button="menuButtonClicked"
+        aria-label="Help"
       />
     </div>
   </div>
diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index 9df0e0d5..3873921c 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -21,8 +21,9 @@
       @blur="$emit('focused', false)"
       @select="updateSelection"
       @click="deselect"
+      aria-label="Send message text input"
     />
-    <SendButton @send="send"/>
+    <SendButton @send="send" aria-label="Send"/>
     <div
       ref="hiddenDiv"
       class="scalable-input-hidden"
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 25ad5289..5405c44d 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -12,49 +12,59 @@
       </a>
     </li>
     <li>
-      <a @click="openReportModal({report: true, ignore: false})">
+      <button @click="openReportModal({report: true, ignore: false})">
         Report User / Message
-      </a>
+      </button>
     </li>
     <li>
-      <a @click="openReportModal({report: false, ignore: true})">
+      <button @click="openReportModal({report: false, ignore: true})">
         Ignore User
-      </a>
+      </button>
     </li>
     <li v-if="oper && !banned">
-      <a @click="ban">
+      <button @click="ban">
         Ban User
-      </a>
+      </button>
     </li>
     <li v-if="oper && banned">
-      <a @click="unban">
+      <button @click="unban">
         Unban User
-      </a>
+      </button>
     </li>
     <li v-if="oper">
-      <a @click="kick">
+      <button @click="kick">
         Kick User
-      </a>
+      </button>
     </li>
     <li v-if="oper && !quieted">
-      <a @click="quiet">
+      <button @click="quiet">
         Quiet User
-      </a>
+      </button>
     </li>
     <li v-if="oper && quieted">
-      <a @click="unquiet">
+      <button @click="unquiet">
         Unquiet User
-      </a>
+      </button>
     </li>
     <li>
-      <a @click="privmsg">
+      <button @click="privmsg">
         Private Message User
-      </a>
+      </button>
     </li>
     <li>
-      <a @click="copyMessage">
+      <button @click="copyMessage">
         Copy message
-      </a>
+      </button>
+    </li>
+    <li v-if="!pinned">
+      <button @click.once="pin">
+        Pin message
+      </button>
+    </li>
+    <li v-if="pinned">
+      <button @click="unpin">
+        Unpin message
+      </button>
     </li>
   </VueContext>
 </template>
@@ -112,6 +122,27 @@
       this.$vxm.chat.privMsgModal = true;
     }
 
+    pin() {
+      this.$vxm.chat.addPinnedMessage(this.message);
+      const localPins = [];
+      if (localStorage.pins) {
+        localPins.push(...JSON.parse(localStorage.pins) as Message[]);
+      }
+      localPins.push(this.message);
+      localStorage.pins = JSON.stringify(localPins);
+    }
+
+    unpin() {
+      this.$vxm.chat.removePin(this.message);
+      let localPins = [];
+      if (localStorage.pins) {
+        localPins.push(...JSON.parse(localStorage.pins) as Message[]);
+      }
+      localPins = localPins.filter(e => e.message !== this.message.message
+          && e.user !== this.message.user);
+      localStorage.pins = JSON.stringify(localPins);
+    }
+
     get oper() {
       return this.$vxm.chat.oper;
     }
@@ -120,6 +151,10 @@
       return `http://${this.$vxm.chat.workbranch}/web/player/${this.user.uid}/`;
     }
 
+    get pinned() {
+      return this.message.pinnned;
+    }
+
     open(event: MouseEvent) {
       this.$refs.menu.open(event);
     }
@@ -178,7 +213,7 @@
     padding:0px 5px;
   }
 
-  li > a:focus {
+  li > a:focus, li > button:focus {
     background-color: transparent !important;
   }
 
@@ -195,12 +230,18 @@
     outline:none;
   }
 
-  li > a {
+  li > a, li > button {
     cursor: pointer;
     color:white !important;
   }
 
-  a:hover {
+  a:hover, button:hover {
     background: transparent !important;
   }
+
+  button {
+    border: none;
+    background-color: transparent;
+    display: inline;
+  }
 </style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index fb722245..2f02743d 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -11,10 +11,10 @@
           :color="usernameColor"
           :is-action="isAction"
           @focus="hover = true"
-          v-if="!isNotice && !sameUserAsPrevious"
+          v-if="!isNotice && (!sameUserAsPrevious || isAction)"
         >{{ isAction || !message.user.username ? '': ':' }}
         </Username>
-        &lrm;
+        &nbsp;
         <span
           ref="msg"
           :style="{
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index cfbd71ca..a4496988 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -2,7 +2,7 @@
   <Pane ref="pane" :visibility="visibility" :data="data" @autoscroll="this.autoscroll">
     <ul style="margin-bottom:0; padding-right:10px">
       <UserMessage
-        v-for="(message, i) in data.postedMessages"
+        v-for="(message, i) in displayedMessages"
         :key="i"
         :message="message"
         :messageIndex="i"
@@ -76,6 +76,13 @@
       return this.data.postedMessages;
     }
 
+    get displayedMessages() {
+      if (this.$vxm.chat.showPinned) {
+        return this.messages.filter(e => e.pinnned);
+      }
+      return this.messages;
+    }
+
     unreads = 0;
 
     @Watch('messages')
diff --git a/src/app/components/Slideout/Chat/AddChatButton.vue b/src/app/components/Slideout/Chat/AddChatButton.vue
index d56140d5..6e4b40b3 100644
--- a/src/app/components/Slideout/Chat/AddChatButton.vue
+++ b/src/app/components/Slideout/Chat/AddChatButton.vue
@@ -2,7 +2,10 @@
   <div class="add-chat-container">
     <button @click="addChat">+</button>
     <span class="input-container">
-      #<input @keypress.enter="addChat(); chatName = ''" v-model="chatName"
+      #<input
+        @keypress.enter="addChat(); chatName = ''"
+        v-model="chatName"
+        aria-label="Add a channel"
     ></span>
   </div>
 </template>
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index 79267a32..e4fc7414 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -3,6 +3,7 @@
     class="chat-select"
     :class="{active: isActive}"
     @click="$emit('input');"
+    :aria-label="`Open the ${name.substring(1)} channel`"
   >
     <p class='channel-name'>{{ name }}</p>
     <p class='channel-description'>{{ description }}</p>
diff --git a/src/app/components/Slideout/Chat/Splitter.vue b/src/app/components/Slideout/Chat/Splitter.vue
index 3be166f6..b5332948 100644
--- a/src/app/components/Slideout/Chat/Splitter.vue
+++ b/src/app/components/Slideout/Chat/Splitter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="splitter"></div> <!--- Just a filled-in div --->
+  <div class="splitter" /> <!--- Just a filled-in div --->
 </template>
 
 <script lang="ts">
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 70f09a60..d4ce2001 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -24,6 +24,19 @@
           :width="120"/>
       </span>
     </li>
+    <li>
+      <span>Automatically Update
+        <SettingsTooltip
+          title="Whether your status will update when you leave or come back to the tab"
+        />
+      </span>
+      <span style="float: right">
+        <SettingsSwitch
+          v-model="$vxm.chat.autoUpdateStatus"
+          aria-label="Whether your status will update when you leave or come back to the tab"
+        />
+      </span>
+    </li>
     <li>
       <span
         aria-label="When others see the away indicator, they will see the reason you are away"
@@ -46,20 +59,22 @@
   import SettingsSection from '../SettingsSection.vue';
   import SettingsEnableDisable from '../SettingsEnableDisable.vue';
   import SettingsTooltip from '../SettingsTooltip.vue';
+  import SettingsSwitch from '../SettingsSwitch.vue';
 
   @Component({
     components: {
       SettingsSection,
       SettingsEnableDisable,
       SettingsTooltip,
+      SettingsSwitch,
     },
   })
   export default class StatusSection extends Vue {
     changeStatus(to:boolean) {
-      this.$vxm.chat.autoUpdateStatus = to;
       if (to) {
         this.$vxm.chat.setUnaway();
       } else {
+        this.$vxm.chat.autoUpdateStatus = false;
         this.$vxm.chat.setAway(this.reason);
       }
     }
diff --git a/src/app/components/Slideout/Settings/SettingsSwitch.vue b/src/app/components/Slideout/Settings/SettingsSwitch.vue
index 35c75657..3ffc8d6d 100644
--- a/src/app/components/Slideout/Settings/SettingsSwitch.vue
+++ b/src/app/components/Slideout/Settings/SettingsSwitch.vue
@@ -4,6 +4,15 @@
     @keypress.enter="$emit('input', !$event.target.checked)"
     :aria-label="label"
     >
+    <v-style>
+      input:focus:checked + .slider {
+        outline: {{$vxm.chat.tabbing ? 'green 1px solid' : ''}};
+      }
+
+      input:focus:not(:checked) + .slider {
+        outline: {{$vxm.chat.tabbing ? 'gray 1px solid' : '' }};
+      }
+    </v-style>
     <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
     <span class="slider round" />
   </label>
@@ -77,11 +86,4 @@ input:checked + .slider:before {
   -ms-transform: translateX(16px);
   transform: translateX(16px);
 }
-input:focus:checked + .slider {
-  outline: $green 1px solid;
-}
-
-input:focus:not(:checked) + .slider {
-  outline: $gray-500 1px solid;
-}
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index f51cc81b..c3c29cd8 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -138,6 +138,8 @@ export default class ChatModule extends VuexModule {
 
   desktopNotifications = false;
 
+  showPinned = false;
+
   constructor() {
     super();
     channelNames.forEach((channelName) => {
@@ -427,6 +429,7 @@ export default class ChatModule extends VuexModule {
         Object.values(this.channels).forEach((c) => {
           const channel = client.channel(c!.name);
           channel.join();
+          console.log(`Joined channel ${c!.name}`);
 
           channel.updateUsers(() => {
             channel.users.forEach((user) => this.addUser({ nick: user.nick, uid: user.ident }));
@@ -477,6 +480,32 @@ export default class ChatModule extends VuexModule {
     this.rawHistoryMessages.filter(e => e.split(' ')[3] === channel).forEach(e => {
       this.processAndPost(e);
     });
+    const pins = [];
+    if (localStorage.pins) {
+      pins.push(...JSON.parse(localStorage.pins) as Message[]);
+    }
+    pins.filter(e => e.target === channel).forEach(e => {
+      this.addPinnedMessage(e);
+    });
+  }
+
+  @action()
+  async addPinnedMessage(message: Message) {
+    const msg = message;
+    msg.pinnned = true;
+    let messages = this.channels[message.target]!.postedMessages;
+    if (messages.includes(message)) return;
+    this.postMessage(msg);
+    messages = messages.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
+    this.channels[message.target]!.postedMessages = messages;
+  }
+
+  @action()
+  async removePin(message: Message) {
+    const messages = this.channels[message.target]?.postedMessages;
+    if (!messages) return;
+    messages.find(e => e === message)!.pinnned = false;
+    this.channels[message.target]!.postedMessages = messages;
   }
 
   /**
@@ -528,6 +557,7 @@ export default class ChatModule extends VuexModule {
       this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
       this.setChannelOps();
       this.joinOpsChannel();
+      console.log('Logging in as operator');
     }
   }
 
@@ -1851,6 +1881,7 @@ export default class ChatModule extends VuexModule {
     }
     joinedChannels.push(name);
     localStorage.joinedChannels = JSON.stringify(joinedChannels);
+    console.log(`Joined channel ${name}`);
   }
 
   @action()
@@ -1860,10 +1891,11 @@ export default class ChatModule extends VuexModule {
     joined = joined.filter(i => i !== name);
     localStorage.joinedChannels = JSON.stringify(joined);
     this.client?.part(name);
+    console.log(`Left channel ${name}`);
   }
 }
 
-// Makes sure TypeScript recognizes the rootState property
+// Makes sure TypeScript recognizes the rootState property so settings store is accesible from here
 class FullStore extends Store<any> {
   rootState !: {
     $_settings: SettingsModule,
diff --git a/src/app/types/message.ts b/src/app/types/message.ts
index e4488e92..15f36deb 100644
--- a/src/app/types/message.ts
+++ b/src/app/types/message.ts
@@ -15,6 +15,8 @@ class Message {
 
   time!: Date;
 
+  pinnned = false;
+
   constructor(message: string, target = '*', user: User = User.annonymous, isAction: boolean = false, isNotice: boolean = false, tags: {[key: string] : string} = {}) {
     this.message = message;
     this.target = target;

From a6af0626797776c956eacac12bafd453e8289ebf Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 28 Jun 2020 13:16:40 -0500
Subject: [PATCH 165/223] Accesibility, blockquote fixes

---
 src/app/components/Slideout/Chat/ChatSelectButton.vue | 1 -
 src/app/tools/Markdown.ts                             | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index e4fc7414..8176d440 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -48,7 +48,6 @@
   /* Style the buttons that are used to open the tab content */
   .chat-select {
     border: none;
-    outline: none;
     cursor: pointer;
     transition: 0.3s;
     padding: 0.4em 1.25em;
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 03c1fe37..43c687b8 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -30,9 +30,6 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
 };
 md.renderer.rules.text = (tokens, idx, options, env, self) => {
   let { content } = tokens[idx];
-  if (content.match(/^> ?/)) {
-    content = `<blockquote>${content.replace(/^> ?/, '')}</blockquote>`;
-  }
   // Detects instances of :: or : indicating fonts
   [...content.matchAll(/:+[^:]+:+/g)].forEach(e => {
     if (e[0].startsWith('::')) { // If it's :: (cursive), remove the colons and wrap it in a styled <span>
@@ -56,6 +53,9 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
   [...content.matchAll(/https?:\/\/eterna(game|dev)\.org\/puzzles\/\d+/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<mark class="puzzle-link"><a href="${e[0].trim()}">${e[0].trim()}</a></mark>`);
   });
+  if (content.match(/^> ?/)) {
+    content = `<blockquote>${content.replace(/^> ?/, '')}</blockquote>`;
+  }
   return content;
 };
 export default md;

From edaabf3eb87e806c290157bf0c9b15195ab21eb9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sun, 28 Jun 2020 17:00:22 -0500
Subject: [PATCH 166/223] Bug fixes (highlighting)

---
 src/app/tools/Markdown.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 43c687b8..4fedf644 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -38,9 +38,6 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
       content = content.replace(e[0], `<span class="serif">${e[0].slice(1, -1)} </span>`);
     }
   });
-  [...content.matchAll(/\|[^|]+\|/g)].forEach(e => {
-    content = content.replace(e[0], `<span class="highlight">&nbsp;${e[0].slice(1, -1)}&nbsp;</span>`);
-  });
   [...content.matchAll(/#\S+\s/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<mark class="channel-link">${e[0].trim()}</mark>`);
   });
@@ -53,6 +50,9 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
   [...content.matchAll(/https?:\/\/eterna(game|dev)\.org\/puzzles\/\d+/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<mark class="puzzle-link"><a href="${e[0].trim()}">${e[0].trim()}</a></mark>`);
   });
+  [...content.matchAll(/\|[^|]+\|/g)].forEach(e => {
+    content = content.replace(e[0], `<span class="highlight">${e[0].slice(1, -1)}</span>`);
+  });
   if (content.match(/^> ?/)) {
     content = `<blockquote>${content.replace(/^> ?/, '')}</blockquote>`;
   }

From 21c0b2a64c37c362242990004bb01f2cc39fa022 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 29 Jun 2020 09:26:41 -0500
Subject: [PATCH 167/223] Fixed markdown bug, made responsive tooltips

---
 src/app/components/Messages/PuzzleTooltip.vue | 68 ++++++++++---------
 src/app/components/Messages/UserMessage.vue   |  5 +-
 src/app/components/Messages/UserTooltip.vue   | 58 ++++++----------
 src/app/tools/Markdown.ts                     |  4 +-
 4 files changed, 63 insertions(+), 72 deletions(-)

diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index 853fc419..3ec64604 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -6,17 +6,12 @@
       top: `${top + 5}px`,
       left: `${left + 5}px`
     }">
-    <ul>
-      <li class="puzzle-tooltip-puzzle">
-        {{puzzleName}}
-        <span class="puzzle-user">{{username}}</span>
-      </li>
-      <li class="puzzle-tooltip-puzzle2">
-        <span class="three">{{solved}} solvers</span>
-        <span class="four" style="float:right">{{reward}}$</span>
-      </li>
-      <li class="description"><span v-html="desc" /></li>
-    </ul>
+      <span class="puzzle-name puzzle">{{puzzleName}}</span>
+      <span class="puzzle-user puzzle">{{username}}</span>
+      <span class="puzzle-solvers puzzle">{{solved}} solvers</span>
+      <span class="puzzle-reward puzzle">{{reward}}$</span>
+      <span class="puzzle-comments puzzle">{{comments}} comments</span>
+      <span class="puzzle-description puzzle" v-html="desc" />
   </div>
 </template>
 <script lang="ts">
@@ -44,6 +39,8 @@
 
     username = 'Anonymous';
 
+    comments = 'No';
+
     solved = 0;
 
     reward = 100;
@@ -55,10 +52,18 @@
           const data = JSON.parse(d).data.puzzle;
           if (!data) return;
           this.puzzleName = data.title;
-          this.desc = data.body;
+          let desc = data.body;
+          if (desc.length > 150) {
+            desc = desc.slice(0, 147)
+              .trim();
+            desc += '&hellip;';
+          }
+          this.desc = desc;
           this.solved = parseInt(data['num-cleared'], 10);
           this.reward = parseInt(data.reward, 10);
           this.username = data.username;
+          const { comments } = JSON.parse(d).data;
+          this.comments = comments.length > 0 ? comments.length : 'No';
         },
       });
     }
@@ -73,34 +78,35 @@
     color:white;
     position: fixed;
     background-color:$med-dark-blue;
-    z-index: 1501;
+    z-index: 2;
     overflow: visible;
     height:auto;
     top:0px;
     left:0px;
-    width:250px;
+    min-width:250px;
+    max-width: 350px;
     border-radius:5px;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
   }
-  li {
-    padding:5px;
-    list-style-type: none;
-  }
-  ul {
-    border-radius: 5px;
+  .puzzle {
+    flex-basis: 50%;
+    flex-grow: 1;
+    flex-shrink: 0;
+    border-bottom: white solid 1px;
+    padding: 5px;
   }
-  .puzzle-tooltip-puzzle {
-    border-bottom:1px solid white;
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
+  .puzzle-name, .puzzle-description {
+    flex-basis: 100%;
   }
-  .puzzle-tooltip-puzzle2 {
-    border-bottom:1px solid white;
+  .puzzle-user, .puzzle-reward {
+    text-align: left;
   }
-  .description {
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 5px;
+  .puzzle-solvers, .puzzle-comments {
+    text-align: right;
   }
-  .puzzle-user {
-    float:right;
+  .puzzle-description {
+    border: none;
   }
 </style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 2f02743d..68895fee 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -185,7 +185,7 @@
         // Adds event listener for hover
         l.addEventListener('mouseenter', (ev) => {
           const url = (l as HTMLElement).innerText;
-          const matches = url.match(/\d+$/);
+          const matches = url.match(/\d+\/?$/);
           this.pid = parseInt((matches ? matches[0] : '0'), 10);
           this.puzzleTooltipVisible = true; // Make it visible
             /* Ensures information is loaded after the tooltip exists
@@ -236,7 +236,7 @@
     puzzleTooltipVisible = false;
 
     get formattedTime() {
-      return this.message.time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
+      return new Date(this.message.time).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
     }
 
     get usernameColor() {
@@ -372,6 +372,7 @@
   }
   mark:hover {
     color:white;
+    cursor: pointer;
   }
 
   .screenshot {
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 1d5dde42..d8ab36e2 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -6,17 +6,13 @@
       top: `${top + 5}px`,
       left: `${left + 5}px`
     }">
-    <ul>
-      <li class="user-tooltip-user">
+      <span class="user-name user">
         <span style="color:yellow; font-size:1.25em" v-show="user.away">● </span>{{user.username}}
-        <span class="user-profile" v-show="profileImage !== ''"><img :src="profileImage"></span>
-      </li>
-      <li class="user-tooltip-rank">
-        <span class="rank">{{rank}}</span>
-        <span class="status">{{status}}</span>
-      </li>
-      <li class="description"><span v-html="desc" /></li>
-    </ul>
+      </span>
+      <span class="user-profile user"><img :src="profileImage"></span>
+      <span class="user-rank user">{{rank}}</span>
+      <span class="user-status user">{{status}}</span>
+      <span class="user-description user" v-html="desc" />
   </div>
 </template>
 <script lang="ts">
@@ -54,10 +50,9 @@
             if (data.data.user.Profile) {
               let desc = data.data.user.Profile;
               if (desc.length > 150) {
-                desc = desc.slice(0, 150)
-                  .replace(/<br>/, '')
+                desc = desc.slice(0, 147)
                   .trim();
-                desc += '...';
+                desc += '&hellip;';
               }
               this.desc = desc;
             }
@@ -112,34 +107,23 @@
     left:0px;
     width:250px;
     border-radius:5px;
+    display: flex;
+    flex-flow: row wrap;
   }
-  li {
-    padding:5px;
-    list-style-type: none;
+  .user {
+    flex: 0 1 50%;
+    padding: 5px;
+    border-bottom: 1px solid white;
   }
-  ul {
-    border-radius: 5px;
-  }
-  .user-tooltip-user {
-    border-bottom:1px solid white;
-    border-top-right-radius: 5px;
-    border-top-left-radius: 5px;
-  }
-  .user-tooltip-rank {
-    border-bottom:1px solid white;
-  }
-  .description {
-    border-bottom-right-radius: 5px;
-    border-bottom-left-radius: 5px;
-  }
-  .status {
-    float:right;
-  }
-  .status::first-letter {
+  .user-status::first-letter {
     text-transform: capitalize;
   }
-  .user-profile {
-    float:right;
+  .user-profile, .user-status {
+    text-align:right;
+  }
+  .user-description {
+    flex-basis: 100%;
+    border: none;
   }
   img {
     height: 1.5rem;
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 4fedf644..e8ea1c7b 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -47,8 +47,8 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
   [...content.matchAll(/https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<a href="${e[0].trim()}" target="_blank"><img class="screenshot" src="${e[0].trim()}"></a>`);
   });
-  [...content.matchAll(/https?:\/\/eterna(game|dev)\.org\/puzzles\/\d+/g)].forEach(e => {
-    content = content.replace(e[0].trim(), `<mark class="puzzle-link"><a href="${e[0].trim()}">${e[0].trim()}</a></mark>`);
+  [...content.matchAll(/https?:\/\/eternagame\.org\/(game\/)?puzzles?\/\d+\/?/g)].forEach(e => {
+    content = content.replace(e[0], `<mark class="puzzle-link">${e[0]}</mark>`);
   });
   [...content.matchAll(/\|[^|]+\|/g)].forEach(e => {
     content = content.replace(e[0], `<span class="highlight">${e[0].slice(1, -1)}</span>`);

From 334da78451108dd2ef35093147035c070c4070a7 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 29 Jun 2020 09:59:15 -0500
Subject: [PATCH 168/223] Pin button indicates whether pins are visible

---
 src/app/assets/pin-outline.png          | Bin 0 -> 646 bytes
 src/app/components/Header/PinButton.vue |   7 ++++++-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 src/app/assets/pin-outline.png

diff --git a/src/app/assets/pin-outline.png b/src/app/assets/pin-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1f22324830bcbf5eed1513897d21c9ec8b8dd25
GIT binary patch
literal 646
zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fjKx9jP7LeL$-D$|EK(yp(|mmy
zw18|52FCVG1{RPKAeI7R1_q`DOmGpg1<VLGNYehLU;<F_A5Ry@5DUSzQ*C{22M8R0
zKTnu7U};JgE9)e`SV^l?ucb<?{tLCaJ2nbsU0E6(_<U90mA(rG#-(12oKrkz&e&Dj
z`oVOeNUPb}L!S$uUzzyWqBHpEwC|<wzrXwY{twTG`DszhXM2a~UeCAw7A;{if8(o8
z&73Qpb0;LMoihLa$KTrjU1od~`Qs&caqABur;A&%R{yJ2ZuWg$!{|`&Y7n=8_x9fh
z%AOCM7<*zg?SIEEcy|1jm}bQEec{tCJWyD1;7HShg$J4!<d&Gv;h4{V)q>|rqjE^&
z3eAa10ZNbNNnB}b^$HaTXcV5Mw>K|aUc>d8)oG0b^C#8jFKXg{?_iwgbacIX(sH$l
zT`>!Ptv4%b&%Y(u!z6lNt~a-1+Rh*O6=ypnzvcaMwzbqU5!f?*zFp#4qyG;kcX~W-
zmw$J0%j;kF7^;+}xnA^gexrI=+U8ADdn1>!L1p*+EMq}m_dfzQ&vKfbY7Xr4m40bk
ze=Ps0+dUV~6Zy6YpFgJxMXlvh=-O5t_0W3hTV|J@&k@Wk(+@8w@|Z4C_u~DIxO?|!
zSbxjNJF(2*TBk+yj*3+;^5T`AmT$Y&^ZMwgTa)eeRI+223Pf?=|MWTL_TjUP)&V<K
zZ+Ox#lTnhi^3SV>Z$G^KYb&EE@`87^ftB70ndMK+52tQD^jH6^p^H|)ah5mVj^Dh;
YJn0%+Rd3oSXHa_ZboFyt=akR{0H!<@uK)l5

literal 0
HcmV?d00001

diff --git a/src/app/components/Header/PinButton.vue b/src/app/components/Header/PinButton.vue
index 7b6c4d4e..c0f6351d 100644
--- a/src/app/components/Header/PinButton.vue
+++ b/src/app/components/Header/PinButton.vue
@@ -3,6 +3,7 @@
     class="pin-button"
     style="float: right;"
     @click="$emit('input', !value);"
+    :class="{ active: value}"
     aria-label="`Click to pin viewed messages"
    >
    <v-style>
@@ -28,7 +29,7 @@
 
 <style lang="scss" scoped>
   .pin-button {
-    background-image: url("../../assets/pin.png");
+    background-image: url("../../assets/pin-outline.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
@@ -36,8 +37,12 @@
     width: 35px;
     background-color: transparent;
     border: none;
+    transition: all 0.4s;
   }
   .pin-button:hover {
     cursor: pointer;
   }
+  .pin-button.active {
+    background-image: url("../../assets/pin.png");
+  }
 </style>

From ae048c52caac06d01a4e9412a07dc8ca031ca1e5 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 29 Jun 2020 11:10:02 -0500
Subject: [PATCH 169/223] Banned users can't send messages

---
 src/app/store/chat.vuex.ts | 105 ++++++++++++++++++++++++-------------
 todo.md                    |  46 +---------------
 2 files changed, 71 insertions(+), 80 deletions(-)

diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index c3c29cd8..79e09393 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -458,6 +458,10 @@ export default class ChatModule extends VuexModule {
           const commandNumber = parseInt(e.line.substring(20, 23), 10);
           if (e.line.match(/^:irc\.eternagame\.org .+\^\d{3} #*.* /)) {
             switch (commandNumber) { // Might be useful in the future
+              case 482:
+                if (!this.oper) this.operCommand();
+                this.setChannelOps();
+                break;
               default: break;
             }
           }
@@ -489,6 +493,10 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  /**
+   * Pins a message
+   * @param message - The message to be pinned
+   */
   @action()
   async addPinnedMessage(message: Message) {
     const msg = message;
@@ -500,6 +508,10 @@ export default class ChatModule extends VuexModule {
     this.channels[message.target]!.postedMessages = messages;
   }
 
+  /**
+   * Unpins a message
+   * @param message - The message to unpin
+   */
   @action()
   async removePin(message: Message) {
     const messages = this.channels[message.target]?.postedMessages;
@@ -543,6 +555,7 @@ export default class ChatModule extends VuexModule {
     // Converting the array to a set and then back removes duplicates
     // Iterates through to make sure each nick for the user has proper permissions
     Array.from(new Set(this.connectedUsers[this.currentUser.username]?.nicks)).forEach(i => {
+      console.log(i);
       // Iterates through all channels
       channelNames.forEach(e => this.client?.raw(`SAMODE ${e} +o ${i}`));
     });
@@ -578,6 +591,18 @@ export default class ChatModule extends VuexModule {
     });
     this.connectionData.currentTimer = 0;
     clearInterval(this.connectionData.timerInterval);
+    // Check bans on connect
+    Object.keys(this.channels).forEach(e => {
+      this.bans({
+        user: this.currentUser,
+        channel: e,
+        cb: (b) => {
+          if (b) {
+            this.onBanned(e);
+          }
+        },
+      });
+    });
   }
 
   @action()
@@ -619,21 +644,6 @@ export default class ChatModule extends VuexModule {
       let post = true;
       let banned = false;
       let quieted = false;
-      this.client?.banlist(channel, (e) => { // Check if user is banned before sending message
-        const bans = e.bans.map(i => new Ban(i.banned, i.channel)); // Make an array of Ban objects
-        // If the user is banned
-        if (bans.some(b => b.username.includes(this.currentUser.username))) {
-          const userBans = bans.filter(b => b.username.includes(this.currentUser.username));
-          if (userBans.some(b => b.username.includes('m;'))) { // If any bans are quiet bans
-            quieted = true;
-            this.onMuted(channel);
-          }
-          if (userBans.some(b => !b.username.includes('m;'))) { // If any bans are NOT quiet bans
-            banned = true;
-            this.onBanned(channel);
-          }
-        }
-      });
       // Chat commands
       if (message.startsWith('/')) {
         message = message.replace(/ \[.+\]$/, '');
@@ -1341,26 +1351,42 @@ export default class ChatModule extends VuexModule {
             break;
         }
       }
-      if (post) {
-        if (!this.channels[channel]?.banned && !banned && !quieted) {
-          if (isAction) {
-              this.client!.action(channel, `${message}`);
-          } else {
-              this.client!.say(channel, message);
+
+      this.client?.banlist(channel, (e) => { // Check if user is banned before sending message
+        const bans = e.bans.map(i => new Ban(i.banned, i.channel)); // Make an array of Ban objects
+        // If the user is banned
+        if (bans.some(b => b.username.includes(this.currentUser.username))) {
+          const userBans = bans.filter(b => b.username.includes(this.currentUser.username));
+          if (userBans.some(b => b.username.includes('m;'))) { // If any bans are quiet bans
+            quieted = true;
+            this.onMuted(channel);
           }
-          const name = User.parseUsername(channel);
-          // If it's a private message, send to the username, not the nick
-          if (this.connectedUsers[User.parseUsername(channel)]?.nicks.includes(channel)) {
-            this.postMessage(new Message(message, name, this.currentUser, isAction));
-          } else {
-            this.postMessage(new Message(message, channel, this.currentUser, isAction));
+          if (userBans.some(b => !b.username.includes('m;'))) { // If any bans are NOT quiet bans
+            banned = true;
+            this.onBanned(channel);
           }
-        } else if (quieted) {
-          this.postMessage(new Message("Can't send messages because you are quieted"));
-        } else {
-          this.postMessage(new Message("Can't send messages because you are banned"));
-        } // TODO
-      }
+        }
+        if (post) {
+          if (!this.channels[channel]?.banned && !banned && !quieted) {
+            if (isAction) {
+                this.client!.action(channel, `${message}`);
+            } else {
+                this.client!.say(channel, message);
+            }
+            const name = User.parseUsername(channel);
+            // If it's a private message, send to the username, not the nick
+            if (this.connectedUsers[User.parseUsername(channel)]?.nicks.includes(channel)) {
+              this.postMessage(new Message(message, name, this.currentUser, isAction));
+            } else {
+              this.postMessage(new Message(message, channel, this.currentUser, isAction));
+            }
+          } else if (quieted) {
+            this.postMessage(new Message("Can't send messages because you are quieted"));
+          } else {
+            this.postMessage(new Message("Can't send messages because you are banned"));
+          } // TODO
+        }
+      });
     }
   }
 
@@ -1707,9 +1733,10 @@ export default class ChatModule extends VuexModule {
       this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
     }
     channel.banned = BanStatus.BAN_STATUS_BANNED;
-    Object.values(this.channels).forEach((c) => {
+    // Not sure why user is banned in all channels - just leaving it here in case it needs to stay
+    /* Object.values(this.channels).forEach((c) => {
       if (c) c.banned = BanStatus.BAN_STATUS_BANNED;
-    });
+    }); */
   }
 
   @action()
@@ -1862,6 +1889,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Joins a channel
+   * @param name - The channel to join
+   */
   @action()
   async joinChannel(name: string) {
     if (Object.keys(this.channels).includes(name)) return;
@@ -1884,6 +1915,10 @@ export default class ChatModule extends VuexModule {
     console.log(`Joined channel ${name}`);
   }
 
+  /**
+   * Leaves a joined channel
+   * @param name - The channel to be left
+   */
   @action()
   async leaveChannel(name: string) {
     Vue.delete(this.channels, name);
diff --git a/todo.md b/todo.md
index 400d08e6..1c9b8f32 100644
--- a/todo.md
+++ b/todo.md
@@ -3,48 +3,4 @@
 ## Todo
 ----
 
-## Finished
----
-
-### Notifications
-  - Keywords
-
-### Settings
-  - Values need to be stored correctly
-  - Add option to change nick for opers
-  - Make sure emoticons can be changed there
-
-### Cleanup
-  - Group functions and properties  
-  - Markdown
-  - Move code in chat commands to functions
-  - Move unnecessary stuff out of chat.vuex
-  - Add typings for untyped modules
-  - Move files in components to folders
-  - Remove unused imports
-  - Comment code
-
-### Away status
-  - Automatically set it after a certain amount of time with no interaction
-  - Allow it to be manually set
-  - Don't fetch on demand - rather, update every 5 seconds (or so) and fetch values
-
-### Bug fixes
-  - Operator name change seems to break sometimes
-  - Optimize away/online status loading
-  - Find a way to limit unnecessary GET requests (tooltips)
-  - Ensure features and styles are consistent across browsers
-
-### Miscellaneous
-  - Clicking a channel name in a chat message opens the channel
-  - Clicking a username brings up the tooltip
-  - Autocomplete for usernames
-  - Scroll down button for new messages you've missed when scrolling up
-
-### Reconnect button
-  - Style to align with theme
-  - Hide input when visible
-
-### Action menu
-  - Add a 'copy message' button that copies the message in `<user>message` format
-
+- fix bugs, i guess
\ No newline at end of file

From 24c15a66fbbf60837c6ca78c655ff90111aeb0ab Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 29 Jun 2020 13:03:52 -0500
Subject: [PATCH 170/223] Comments and cleanup

---
 src/app/store/chat.vuex.ts | 86 ++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 79e09393..9f6eb3f0 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1232,6 +1232,8 @@ export default class ChatModule extends VuexModule {
             this.changeNick(params);
             break;
           case 'execute': {
+            /* Allows operators to send a command over websockets
+            This means if they need to do something not added yet, they can */
             if (!this.oper) {
               this.auth = true;
               postMessage('You are not an operator or moderator and do not have permission to execute commands');
@@ -1254,9 +1256,9 @@ export default class ChatModule extends VuexModule {
               postMessage('Please include command parameters. Type `/help color` for more usage instructions');
               break;
             }
-            if (params.match(/#[a-f0-9]{6}/)) {
+            if (params.match(/#[a-f0-9]{6}/)) { // If it's a hex
               this.usernameColor = params;
-            } else if (params.match(/(red)|(blue)|(green)|(purple)|(yellow)|(orange)/)) {
+            } else if (params.match(/(red)|(blue)|(green)|(purple)|(yellow)|(orange)/)) { // If an explicit color
               switch (params) {
                 case 'red': this.usernameColor = '#ff0000'; break;
                 case 'orange': this.usernameColor = '#ff8800'; break;
@@ -1266,10 +1268,11 @@ export default class ChatModule extends VuexModule {
                 case 'purple': this.usernameColor = '#ff00ff'; break;
                 default: break;
               }
-            } else if (params.match(/(\s?\d+,){2}\s?\d+/)) {
+            } else if (params.match(/(\s?\d+,){2}\s?\d+/)) { // If RGB
+              // Converts RGB strings to decimals to hex strings
               const colors = params.split(',').map(e => parseInt(e.trim(), 10).toString(16));
               this.usernameColor = `#${colors.join()}`;
-            } else {
+            } else { // Otherwise, it's invalud
               postMessage('Invalid color. Colors can be in hex, RGB, or text format. Type `/help color` for more usage instructions.');
             }
             break;
@@ -1281,6 +1284,7 @@ export default class ChatModule extends VuexModule {
             switch (parameters[0]) {
               case 'emoticons':
               case 'emoticon':
+                // It's messy, I know, but it's the only way to communicate between stores
                 (this.$store as FullStore).rootState.$_settings.emoticonChatFeatures = Boolean(parameters[1].match(/(true)|(yes)|(on)/)); break;
               case 'markdown':
                 (this.$store as FullStore).rootState.$_settings.markdownChatFeatures = Boolean(parameters[1].match(/(true)|(yes)|(on)/)); break;
@@ -1310,12 +1314,12 @@ export default class ChatModule extends VuexModule {
               postMessage(`Your notifications keywords are ${this.notificationsKeywords.join(', ') || 'not set'}`);
               break;
             }
-            if (parameters[0] === 'add') {
+            if (parameters[0] === 'add') { // If adding or removing, add or remove the second parameter
               this.notificationsKeywords.push(parameters[1]);
             } else if (parameters[0] === 'remove') {
-              // eslint-disable-next-line max-len
-              this.notificationsKeywords = this.notificationsKeywords.filter(e => e !== parameters[1]);
-            } else {
+              this.notificationsKeywords = this.notificationsKeywords
+                .filter(e => e !== parameters[1]);
+            } else { // Otherwise, overwrite the keywords with the argument
               this.notificationsKeywords = params.split(/, ?/);
             }
             break;
@@ -1326,6 +1330,7 @@ export default class ChatModule extends VuexModule {
               postMessage('Please include command parameters. Type `/help size` for more usage instructions');
               break;
             }
+            // If it's not a number, less than 10, or greater than 18, throw an error
             if (!parseInt(params, 10) || parseInt(params, 10) > 18 || parseInt(params, 10) < 10) {
               postMessage('Invalid value. Type `/help size` for  usage instructions');
               break;
@@ -1337,6 +1342,7 @@ export default class ChatModule extends VuexModule {
               postMessage('Please include command parameters. Type `/help join` for more usage instructions');
               break;
             }
+            // This joins a channel regardless of whether the name is prefixed with a #
             this.joinChannel(`#${params}`.replace('##', '#'));
             break;
           case 'leave':
@@ -1365,7 +1371,7 @@ export default class ChatModule extends VuexModule {
             banned = true;
             this.onBanned(channel);
           }
-        }
+        } // If they aren't banned, continue and send the message
         if (post) {
           if (!this.channels[channel]?.banned && !banned && !quieted) {
             if (isAction) {
@@ -1390,6 +1396,10 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  /**
+   * Gives a reason for a ban
+   * @param param0 - An object containing the reason for the ban and the nick to send it to
+   */
   @action()
   async giveReason({ reason, nick }: {reason: string, nick: string}) {
     this.client?.say(nick, reason);
@@ -1474,14 +1484,14 @@ export default class ChatModule extends VuexModule {
 
   /**
    * Sends a message to a private channel
-   * @param {string} message - The user and the message to be sent. Takes the form <nick>|<message>
+   * @param param0 - An object containing the message and the channel (user) to send it to
    */
-
   @action()
   async postToQuery({ message, channel }: { message:string, channel:string}) {
     /* Splits argument into message and channel
     Will only cause issues if people are putting | in their nick */
     if (this.channels[User.parseUsername(channel)] === undefined) {
+      // If the channel doesn't exist, make a new one
       Vue.set(this.channels, User.parseUsername(channel), {
         name: User.parseUsername(channel),
         maxHistoryMessages: 50,
@@ -1493,15 +1503,11 @@ export default class ChatModule extends VuexModule {
     }
     // Converting from array to set to array removes duplicates
     Array.from(new Set(this.connectedUsers[User.parseUsername(channel)]?.nicks)).forEach(e => {
-      this.sendMessage({ rawMessage: message, channel: e }); // Send message to all nicks
+      // Sends message to all nicks so each tab receives the message
+      this.sendMessage({ rawMessage: message, channel: e });
     });
   }
 
-  /* This code will only work once the chat is put in the website
-  From my observations, the get requests only work coming from eternagame.org
-  Once the chat is moved there, they will go through
-  Until then, it gives an error and anything that relies on it gives a default fallback
-  */
   @action()
   async getUserInfo(arg: { user: User, callback: (data: any | undefined) => any}) {
     const { uid } = arg.user || { uid: 0 }; // UID needed for get request
@@ -1511,7 +1517,7 @@ export default class ChatModule extends VuexModule {
         arg.callback(xmlHttp.responseText); // Calls callback after response
       }
     };
-    xmlHttp.open('GET', `https://eternagame.org/get/?type=user&uid=${uid}`, true); // true for asynchronous
+    xmlHttp.open('GET', `https://eternagame.org/get/?type=user&uid=${uid}`, true);
     xmlHttp.send(null);
   }
 
@@ -1524,7 +1530,7 @@ export default class ChatModule extends VuexModule {
         arg.callback(xmlHttp.responseText); // Calls callback after response
       }
     };
-    xmlHttp.open('GET', `https://eternagame.org/get/?type=puzzle&nid=${pid}`, true); // true for asynchronous
+    xmlHttp.open('GET', `https://eternagame.org/get/?type=puzzle&nid=${pid}`, true);
     xmlHttp.send(null);
   }
 
@@ -1544,10 +1550,10 @@ export default class ChatModule extends VuexModule {
     message, nick, tags, time, type, target,
   }: Irc.MessageEventArgs) {
     let channel = this.channels[target];
-    // If it's a PRIVMSG
+    // If it's a private message
     if (this.currentUser.username.includes(User.parseUsername(target)) && nick) {
-      if (!this.channels[User.parseUsername(nick)]) { // If the channel doesn't exist yet
-        // Vue.set is reactive
+      if (!this.channels[User.parseUsername(nick)]) { // If the channel doesn't exist yet, create it
+        // Vue.set is reactive, channels[key] is not
         Vue.set(this.channels, User.parseUsername(nick), {
           name: User.parseUsername(nick),
           maxHistoryMessages: 50,
@@ -1566,7 +1572,12 @@ export default class ChatModule extends VuexModule {
     if (!channel) {
       return;
     }
-    // Notifications should come in if slideout is open, user is in a different channel, or both
+    /* Notifications should come in if
+      - The slideout is open
+      - OR the user is in a different channel
+      - OR the window isn't focused
+      - AND notifications are enabled for the channel
+    */
     if (
       (this.slideoutOpen || channel.name !== this.chatChannel || !this.focused)
       && channel.notificationsEnabled) {
@@ -1585,9 +1596,9 @@ export default class ChatModule extends VuexModule {
     }
     const username = User.parseUsername(nick);
     let msg = message;
-    if (this.notificationsKeywords) {
+    if (this.notificationsKeywords) { // Bolds keywords
       this.notificationsKeywords.forEach(n => {
-        msg = msg.replace(` ${n}`, ` **${n}**`);
+        msg = msg.replace(` ${n}`, `**|${n}|**`);
       });
     }
     const messageObject = new Message(
@@ -1611,6 +1622,7 @@ export default class ChatModule extends VuexModule {
         }
       }
     }
+    // If the channel has no messages, make sure history is loaded before the new message comes in
     if (channel.postedMessages.length === 0) {
       this.loadMessagesForChannel(channel.name);
     }
@@ -1661,8 +1673,8 @@ export default class ChatModule extends VuexModule {
    * Bans a user
    * @param user {User} - The user to be banned
    */
-  @mutation
-  ban(user:User) {
+  @action()
+  async ban(user:User) {
     if (this.oper) {
       this.client?.ban(this.chatChannel, `*!${user.username}@*`);
     }
@@ -1672,8 +1684,8 @@ export default class ChatModule extends VuexModule {
    * Kicks a user
    * @param user {User} - The user to be kicked
    */
-  @mutation
-  kick(user:User) {
+  @action()
+  async kick(user:User) {
     if (this.oper) {
       this.connectedUsers[user.username]?.nicks.forEach((e) => {
         this.client?.raw(`KICK ${this.chatChannel} ${e}`);
@@ -1685,8 +1697,8 @@ export default class ChatModule extends VuexModule {
    * Quiets a user
    * @param user {User} - The user to be quieted
    */
-  @mutation
-  quiet(user:User) {
+  @action()
+  async quiet(user:User) {
     if (this.oper) {
       this.client?.raw(`MODE ${this.chatChannel} +b m;*!${user.username}@*`);
     }
@@ -1696,8 +1708,8 @@ export default class ChatModule extends VuexModule {
    * Unquiets a user
    * @param user {User} - The user to be unquieted
    */
-  @mutation
-  unquiet(user:User) {
+  @action()
+  async unquiet(user:User) {
     if (this.oper) {
       this.client?.raw(`MODE ${this.chatChannel} -b m;*!${user.username}@*`);
     }
@@ -1707,8 +1719,8 @@ export default class ChatModule extends VuexModule {
    * Unbans a user
    * @param user {User} - The user to be unbanned
    */
-  @mutation
-  unban(user:User) {
+  @action()
+  async unban(user:User) {
     if (this.oper) {
       this.client?.unban(this.chatChannel, `*!${user.username}@*`);
     }
@@ -1733,7 +1745,8 @@ export default class ChatModule extends VuexModule {
       this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
     }
     channel.banned = BanStatus.BAN_STATUS_BANNED;
-    // Not sure why user is banned in all channels - just leaving it here in case it needs to stay
+    /* Not sure why user is set as banned in all channels
+    - just leaving it here in case it needs to stay */
     /* Object.values(this.channels).forEach((c) => {
       if (c) c.banned = BanStatus.BAN_STATUS_BANNED;
     }); */
@@ -1835,6 +1848,7 @@ export default class ChatModule extends VuexModule {
   async updateUserStatus() {
     const usersByNick = Object.values(this.connectedUsers).map(e => e!.nicks[0]);
     usersByNick.forEach(e => {
+      // WHOIS returns away status - WHO does not
       this.client?.whois(e, (i) => {
         const username = User.parseUsername(e);
         if (i.away) {

From 17fbc07057560e26b66a8a1cfbfcf5349aed9d25 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 29 Jun 2020 13:23:40 -0500
Subject: [PATCH 171/223] localStorage values are prefixed with chat_

---
 src/app/App.vue                               | 12 ++--
 src/app/components/DraggableDiv.vue           |  4 +-
 src/app/components/Input/EmoticonBar.vue      | 21 +++---
 src/app/components/Messages/ActionMenu.vue    | 12 ++--
 src/app/components/OperLogin.vue              |  6 +-
 .../Slideout/Chat/ChatSelectButton.vue        |  6 +-
 .../Settings/ColorPicker/ColorPicker.vue      |  6 +-
 .../Settings/ColorPicker/ColorSlider.vue      |  4 +-
 .../Sections/NotificationsSection.vue         | 24 +++----
 .../Settings/Sections/OperSection.vue         |  4 +-
 .../Settings/Sections/StatusSection.vue       |  6 +-
 .../Settings/Sections/TextSizeSection.vue     |  6 +-
 .../Settings/Sections/ToolbarSection.vue      | 16 ++---
 .../Slideout/Settings/SettingsSection.vue     | 10 +--
 src/app/store/chat.vuex.ts                    | 66 +++++++++----------
 src/standalone/App.vue                        | 10 +--
 16 files changed, 110 insertions(+), 103 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 2f470938..6cbb7924 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -180,8 +180,8 @@
     this.$vxm.chat.operLoginPassword = password;
     if (remember) { // Store values
       // Encrypt password
-      localStorage.operPass = JSON.stringify(sjcl.encrypt('password', password));
-      localStorage.operUser = username;
+      localStorage.chat_operPass = JSON.stringify(sjcl.encrypt('password', password));
+      localStorage.chat_operUser = username;
     }
     this.$vxm.chat.operCommand(); // Set all nicks as opers
     setTimeout(this.operLoginStatus, 200); // A precaution so messages are received properly
@@ -217,9 +217,9 @@
    * Logs the user in as an operator
    */
   async logInOper() {
-    if (localStorage && localStorage.operUser && localStorage.operPass) {
-      let pass = JSON.parse(localStorage.operPass);
-      const user = localStorage.operUser;
+    if (localStorage && localStorage.chat_operUser && localStorage.chat_operPass) {
+      let pass = JSON.parse(localStorage.chat_operPass);
+      const user = localStorage.chat_operUser;
       pass = sjcl.decrypt('password', pass); // Decrypt password
       if (user && pass) {
         this.$vxm.chat.operLoginPassword = pass; // Log in
@@ -275,7 +275,7 @@
     const w = this.$el.scrollWidth;
     const h = this.$el.scrollHeight;
     if (localStorage && (w !== 300 || h !== 500)) {
-      localStorage.size = JSON.stringify(`${w} ${h}`);
+      localStorage.chat_size = JSON.stringify(`${w} ${h}`);
     }
   }
 
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 422b5b2b..16939e62 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -91,7 +91,7 @@
               // Gets offset from bottom
               offset2 = windowSize[1] - chatPosition[1] - chatSize[1];
             }
-            localStorage.gamePosition = JSON.stringify([side, offset, side2, offset2]);
+            localStorage.chat_gamePosition = JSON.stringify([side, offset, side2, offset2]);
           } else {
             // Sets new chat position in localStorage when drag is ended
             let x = this.$refs.draggableContainer.style.left; // Gets current X and Y
@@ -104,7 +104,7 @@
             const midpoint = [midpointX, midpointY];
             // Gets chat's offset from the center
             const offset = [midpoint[0] - point[0], midpoint[1] - point[1]];
-            localStorage.position = JSON.stringify(`${offset[0]} ${offset[1]}`); // Save to localStorage
+            localStorage.chat_position = JSON.stringify(`${offset[0]} ${offset[1]}`); // Save to localStorage
           }
         }
         document.onmouseup = null;
diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 3813d166..813a7c28 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -225,21 +225,24 @@
       Vue.set(this.markdownCodes, this.dragged, dropItem);
       Vue.set(this.markdownCodes, item, draggedItem);
       this.dragged = item;
-      localStorage.markdownButtons = JSON.stringify(this.markdownCodes);
+      localStorage.chat_markdownButtons = JSON.stringify(this.markdownCodes);
     }
 
     created() {
-      if (localStorage.markdownButtons) {
-        this.markdownCodes = JSON.parse(localStorage.markdownButtons);
+      if (localStorage.chat_markdownButtons) {
+        this.markdownCodes = JSON.parse(localStorage.chat_markdownButtons);
       }
-      if (localStorage.emoticonChatFeatures) {
-        this.$vxm.settings.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
+      if (localStorage.chat_emoticonChatFeatures) {
+        this.$vxm.settings.emoticonChatFeatures = JSON.parse(localStorage
+          .chat_emoticonChatFeatures);
       }
-      if (localStorage.markdownChatFeatures) {
-        this.$vxm.settings.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
+      if (localStorage.chat_markdownChatFeatures) {
+        this.$vxm.settings.markdownChatFeatures = JSON.parse(localStorage
+          .chat_markdownChatFeatures);
       }
-      if (localStorage.previewChatFeatures) {
-        this.$vxm.settings.previewChatFeatures = JSON.parse(localStorage.previewChatFeatures);
+      if (localStorage.chat_previewChatFeatures) {
+        this.$vxm.settings.previewChatFeatures = JSON.parse(localStorage
+          .chat_previewChatFeatures);
       }
     }
   }
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 5405c44d..717b04e8 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -125,22 +125,22 @@
     pin() {
       this.$vxm.chat.addPinnedMessage(this.message);
       const localPins = [];
-      if (localStorage.pins) {
-        localPins.push(...JSON.parse(localStorage.pins) as Message[]);
+      if (localStorage.chat_pins) {
+        localPins.push(...JSON.parse(localStorage.chat_pins) as Message[]);
       }
       localPins.push(this.message);
-      localStorage.pins = JSON.stringify(localPins);
+      localStorage.chat_pins = JSON.stringify(localPins);
     }
 
     unpin() {
       this.$vxm.chat.removePin(this.message);
       let localPins = [];
-      if (localStorage.pins) {
-        localPins.push(...JSON.parse(localStorage.pins) as Message[]);
+      if (localStorage.chat_pins) {
+        localPins.push(...JSON.parse(localStorage.chat_pins) as Message[]);
       }
       localPins = localPins.filter(e => e.message !== this.message.message
           && e.user !== this.message.user);
-      localStorage.pins = JSON.stringify(localPins);
+      localStorage.chat_pins = JSON.stringify(localPins);
     }
 
     get oper() {
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index bc5f94d1..5ade3396 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -2,13 +2,13 @@
   <div class="login panel">
     <div class="trans-panel rounded-10" v-show="showsMessage">
       <p> {{message}}</p>
-      <div
+      <button
           class="btn"
-          style="width: 90%; left: 50%; transform: translateX(-50%); margin-top:10px"
+          style="width: 100%; left: 50%; margin-top:10px"
           @click="showsMessage = false; $emit('cancel')"
         >
         Continue
-      </div>
+      </button>
     </div>
     <div class="trans-panel rounded-10" v-show="!showsMessage">
       <table>
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index 8176d440..dabb99d3 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -38,7 +38,11 @@
     }
 
     get joined() {
-      return JSON.parse(localStorage.joinedChannels || '').includes(this.name);
+      let joined = [];
+      if (localStorage.chat_joinedChannels) {
+        joined = JSON.parse(localStorage.chat_joinedChannels);
+      }
+      return joined.includes(this.name);
     }
   }
 </script>
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index 3e1a5751..4f65a8a2 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -77,7 +77,7 @@
         this.$vxm.chat.usernameColor = `#${this.colorToHexValue(this.red)}${this.colorToHexValue(this.green)}${this.colorToHexValue(this.blue)}`;
           // Set value to localStorage if available
           if (localStorage) {
-            localStorage.usernameColor = this.$vxm.chat.usernameColor;
+            localStorage.chat_usernameColor = this.$vxm.chat.usernameColor;
           }
         }
       // Sets color of preview test
@@ -136,8 +136,8 @@
     created() {
       let color;
       // If value saved in localStorage, use that
-      if (localStorage.usernameColor) {
-        color = localStorage.usernameColor;
+      if (localStorage.chat_usernameColor) {
+        color = localStorage.chat_usernameColor;
       } else if (this.$vxm.chat.usernameColor !== '' && this.$vxm.chat.usernameColor !== undefined) {
         // If value not in localStorage, check vuex
         color = this.$vxm.chat.usernameColor;
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index 83aec110..8da2437b 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -55,8 +55,8 @@
     // Gets value from localStorage, parent, or vuex when created
     created() {
         let color;
-        if (localStorage.usernameColor) {
-          color = localStorage.usernameColor;
+        if (localStorage.chat_usernameColor) {
+          color = localStorage.chat_usernameColor;
         } else if (this.$vxm.chat.usernameColor !== '' && this.$vxm.chat.usernameColor !== undefined) {
           color = this.$vxm.chat.usernameColor;
         } else {
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index b557f544..192ea148 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -81,7 +81,7 @@
         return;
       }
       if (localStorage) {
-        localStorage.notificationsKeywords = JSON.stringify(keywordsArray);
+        localStorage.chat_notificationsKeywords = JSON.stringify(keywordsArray);
       }
     }
 
@@ -95,7 +95,7 @@
       }
       this.$vxm.chat.ignoredChannels[channel] = (trueChannel as Channel).notificationsEnabled;
       if (localStorage && this.$vxm.chat.ignoredChannels) {
-        localStorage.ignoredChannels = JSON.stringify(this.$vxm.chat.ignoredChannels);
+        localStorage.chat_ignoredChannels = JSON.stringify(this.$vxm.chat.ignoredChannels);
       }
     }
 
@@ -127,7 +127,7 @@
         this.requestDesktopNotifications();
       } else {
         this.$vxm.chat.desktopNotifications = false;
-        localStorage.desktopNotifications = JSON.stringify(false);
+        localStorage.chat_desktopNotifications = JSON.stringify(false);
       }
     }
 
@@ -136,11 +136,11 @@
         if (result === 'granted') {
           this.desktopNotifications = true;
           this.$vxm.chat.desktopNotifications = true;
-          localStorage.desktopNotifications = JSON.stringify(true);
+          localStorage.chat_desktopNotifications = JSON.stringify(true);
         } else {
           this.desktopNotifications = false;
           this.$vxm.chat.desktopNotifications = false;
-          localStorage.desktopNotifications = JSON.stringify(false);
+          localStorage.chat_desktopNotifications = JSON.stringify(false);
         }
       }));
     }
@@ -148,26 +148,26 @@
     @Watch('indicator')
     indicatorChanged() {
       if (localStorage) {
-        localStorage.indicator = JSON.stringify(this.indicator);
+        localStorage.chat_indicator = JSON.stringify(this.indicator);
       }
       this.$vxm.settings.indicator = this.indicator;
     }
 
     created() {
-      if (localStorage.notificationsKeywords) {
-        this.keywords = JSON.parse(localStorage.notificationsKeywords).join(', ');
+      if (localStorage.chat_notificationsKeywords) {
+        this.keywords = JSON.parse(localStorage.chat_notificationsKeywords).join(', ');
       } else if (this.$vxm.chat.notificationsKeywords) {
         this.keywords = this.$vxm.chat.notificationsKeywords.join(', ');
       } else {
         this.keywords = '';
       }
-      if (localStorage.indicator) {
-        this.indicator = JSON.parse(localStorage.indicator);
+      if (localStorage.chat_indicator) {
+        this.indicator = JSON.parse(localStorage.chat_indicator);
       } else {
         this.indicator = this.$vxm.settings.indicator;
       }
-      if (localStorage.desktopNotifications) {
-        this.desktopNotifications = JSON.parse(localStorage.desktopNotifications);
+      if (localStorage.chat_desktopNotifications) {
+        this.desktopNotifications = JSON.parse(localStorage.chat_desktopNotifications);
         this.$vxm.chat.desktopNotifications = this.desktopNotifications;
       }
     }
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index 580a7265..1aae330b 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -51,8 +51,8 @@
     }
 
     created() {
-      if (localStorage.nick) {
-        this.opernick = localStorage.nick;
+      if (localStorage.chat_nick) {
+        this.opernick = localStorage.chat_nick;
       } else {
         this.opernick = this.$vxm.chat.customNick;
       }
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index d4ce2001..206624e4 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -86,8 +86,8 @@
     reason = '';
 
     created() {
-      if (localStorage.awayReason) {
-        this.reason = localStorage.awayReason;
+      if (localStorage.chat_awayReason) {
+        this.reason = localStorage.chat_awayReason;
       } else {
         this.reason = this.$vxm.settings.awayReason;
       }
@@ -95,7 +95,7 @@
 
     @Watch('reason')
     updateReason() {
-      localStorage.awayReason = this.reason;
+      localStorage.chat_awayReason = this.reason;
       this.$vxm.settings.awayReason = this.reason;
     }
   }
diff --git a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
index c2517ee7..0fcfdc65 100644
--- a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
@@ -34,7 +34,7 @@
        // Only update if valid font size
       if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 18) {
         this.$vxm.settings.fontSize = parseInt(this.size, 10);
-        localStorage.fontSize = JSON.stringify(this.size);
+        localStorage.chat_fontSize = JSON.stringify(this.size);
       }
     }
 
@@ -53,8 +53,8 @@
     }
 
     created() {
-      if (localStorage.fontSize) {
-        this.size = String(Number(JSON.parse(localStorage.fontSize)));
+      if (localStorage.chat_fontSize) {
+        this.size = String(Number(JSON.parse(localStorage.chat_fontSize)));
       } else {
         this.size = this.$vxm.settings.fontSize.toString();
       }
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 13f09aec..f9f4df26 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -94,7 +94,7 @@
 
     @Watch('emoticonChatFeatures')
     emoticonChatFeaturesChanged() {
-      localStorage.emoticonChatFeatures = JSON.stringify(this.emoticonChatFeatures);
+      localStorage.chat_emoticonChatFeatures = JSON.stringify(this.emoticonChatFeatures);
       this.$vxm.settings.emoticonChatFeatures = this.emoticonChatFeatures;
     }
 
@@ -102,7 +102,7 @@
 
     @Watch('markdownChatFeatures')
     markdownChatFeaturesChanged() {
-      localStorage.markdownChatFeatures = JSON.stringify(this.markdownChatFeatures);
+      localStorage.chat_markdownChatFeatures = JSON.stringify(this.markdownChatFeatures);
       this.$vxm.settings.markdownChatFeatures = this.markdownChatFeatures;
     }
 
@@ -110,7 +110,7 @@
 
     @Watch('previewChatFeatures')
     previewChatFeaturesChanged() {
-      localStorage.previewChatFeatures = JSON.stringify(this.previewChatFeatures);
+      localStorage.chat_previewChatFeatures = JSON.stringify(this.previewChatFeatures);
       this.$vxm.settings.previewChatFeatures = this.previewChatFeatures;
     }
 
@@ -133,7 +133,7 @@
         }
         Vue.set(this.$vxm.chat.customEmoticons, id, value);
         if (localStorage) {
-          localStorage.customEmoticons = JSON.stringify(
+          localStorage.chat_customEmoticons = JSON.stringify(
             this.$vxm.chat.customEmoticons,
           );
         }
@@ -154,13 +154,13 @@
     }
 
     created() {
-      if (localStorage.emoticonChatFeatures) {
-        this.emoticonChatFeatures = JSON.parse(localStorage.emoticonChatFeatures);
+      if (localStorage.chat_emoticonChatFeatures) {
+        this.emoticonChatFeatures = JSON.parse(localStorage.chat_emoticonChatFeatures);
       } else {
         this.emoticonChatFeatures = this.$vxm.settings.emoticonChatFeatures;
       }
-      if (localStorage.markdownChatFeatures) {
-        this.markdownChatFeatures = JSON.parse(localStorage.markdownChatFeatures);
+      if (localStorage.chat_markdownChatFeatures) {
+        this.markdownChatFeatures = JSON.parse(localStorage.chat_markdownChatFeatures);
       } else {
         this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
       }
diff --git a/src/app/components/Slideout/Settings/SettingsSection.vue b/src/app/components/Slideout/Settings/SettingsSection.vue
index 6eb6c09c..5ae5ecbf 100644
--- a/src/app/components/Slideout/Settings/SettingsSection.vue
+++ b/src/app/components/Slideout/Settings/SettingsSection.vue
@@ -34,8 +34,8 @@
     title !: string;
 
     mounted() {
-      if (localStorage && localStorage.openMenus) {
-        const menus = JSON.parse(localStorage.openMenus);
+      if (localStorage && localStorage.chat_openMenus) {
+        const menus = JSON.parse(localStorage.chat_openMenus);
         if (menus[this.title] !== undefined) {
           this.open = menus[this.title];
         }
@@ -48,11 +48,11 @@
       const { title } = this;
       if (localStorage) {
         let menus: any = {};
-        if (localStorage.openMenus) { // If the object exists, modify it
-          menus = JSON.parse(localStorage.openMenus);
+        if (localStorage.chat_openMenus) { // If the object exists, modify it
+          menus = JSON.parse(localStorage.chat_openMenus);
         }
         menus[title] = newValue;
-        localStorage.openMenus = JSON.stringify(menus); // Update localStorage
+        localStorage.chat_openMenus = JSON.stringify(menus); // Update localStorage
       }
     }
   }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 9f6eb3f0..29ed97e8 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -286,7 +286,7 @@ export default class ChatModule extends VuexModule {
       this.ignoredUsers.splice(this.ignoredUsers.indexOf(username), 1);
     }
     if (username === '*') this.ignoredUsers = [];
-    localStorage.ignoredUsers = JSON.stringify(this.ignoredUsers);
+    localStorage.chat_ignoredUsers = JSON.stringify(this.ignoredUsers);
   }
 
   @action()
@@ -295,19 +295,19 @@ export default class ChatModule extends VuexModule {
     this.workbranch = workbranch;
 
     if (localStorage) {
-      if (localStorage.ignoredUsers) {
+      if (localStorage.chat_ignoredUsers) {
         try {
-          this.ignoredUsers = JSON.parse(localStorage.ignoredUsers);
+          this.ignoredUsers = JSON.parse(localStorage.chat_ignoredUsers);
         } catch {
           console.error('Encountered an error while parsing the local data of ignored users');
         }
       }
-      if (localStorage.ignoredChannels) {
+      if (localStorage.chat_ignoredChannels) {
         try {
-          const ignored = JSON.parse(localStorage.ignoredChannels);
+          const ignored = JSON.parse(localStorage.chat_ignoredChannels);
           Object.values(this.channels).forEach((e) => {
-            const eAsChannel = e as Channel;
-            eAsChannel.notificationsEnabled = ignored[eAsChannel.name];
+            const channel = e as Channel;
+            channel.notificationsEnabled = ignored[channel.name];
           });
         } catch {
           console.error(
@@ -315,27 +315,27 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
-      if (localStorage.usernameColor) {
+      if (localStorage.chat_usernameColor) {
         try {
-          this.usernameColor = localStorage.usernameColor;
+          this.usernameColor = localStorage.chat_usernameColor;
         } catch {
           console.error(
             'Encountered an error while parsing the local data of username color',
           );
         }
       }
-      if (localStorage.customEmoticons) {
+      if (localStorage.chat_customEmoticons) {
         try {
-          this.customEmoticons = JSON.parse(localStorage.customEmoticons);
+          this.customEmoticons = JSON.parse(localStorage.chat_customEmoticons);
         } catch {
           console.error(
             'Encountered an error while parsing the local data of custom emoticons',
           );
         }
       }
-      if (localStorage.position) {
+      if (localStorage.chat_position) {
         try {
-          const data = JSON.parse(localStorage.position);
+          const data = JSON.parse(localStorage.chat_position);
           const values = data.split(' '); // Gets X and Y
           const midpoint = [window.innerWidth / 2, window.innerHeight / 2]; // Gets center
           const point = [Number(values[0]), Number(values[1])];
@@ -347,18 +347,18 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
-      if (localStorage.gamePosition) {
+      if (localStorage.chat_gamePosition) {
         try {
-          this.inGamePosition = JSON.parse(localStorage.gamePosition);
+          this.inGamePosition = JSON.parse(localStorage.chat_gamePosition);
         } catch {
           console.error(
             'Encountered an error while parsing the local data of in-game chat location',
           );
         }
       }
-      if (localStorage.size) {
+      if (localStorage.chat_size) {
         try {
-          const data = JSON.parse(localStorage.size);
+          const data = JSON.parse(localStorage.chat_size);
           const values = data.split(' '); // Gets width and height
           this.initialSize = [values[0], values[1]];
         } catch {
@@ -367,27 +367,27 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
-      if (localStorage.nick) {
+      if (localStorage.chat_nick) {
         try {
-          this.customNick = localStorage.nick;
+          this.customNick = localStorage.chat_nick;
         } catch {
           console.error(
             'Encountered an error while parsing the local data of custom nick',
           );
         }
       }
-      if (localStorage.notificationsKeywords) {
+      if (localStorage.chat_notificationsKeywords) {
         try {
-          this.notificationsKeywords = JSON.parse(localStorage.notificationsKeywords);
+          this.notificationsKeywords = JSON.parse(localStorage.chat_notificationsKeywords);
         } catch {
           console.error(
             'Encountered an error while parsing the local data of notifications keywords',
           );
         }
       }
-      if (localStorage.joinedChannels) {
+      if (localStorage.chat_joinedChannels) {
         try {
-          const joinedChannels: string[] = JSON.parse(localStorage.joinedChannels);
+          const joinedChannels: string[] = JSON.parse(localStorage.chat_joinedChannels);
           joinedChannels.forEach(e => {
             this.joinChannel(e);
           });
@@ -485,8 +485,8 @@ export default class ChatModule extends VuexModule {
       this.processAndPost(e);
     });
     const pins = [];
-    if (localStorage.pins) {
-      pins.push(...JSON.parse(localStorage.pins) as Message[]);
+    if (localStorage.chat_pins) {
+      pins.push(...JSON.parse(localStorage.chat_pins) as Message[]);
     }
     pins.filter(e => e.target === channel).forEach(e => {
       this.addPinnedMessage(e);
@@ -968,8 +968,8 @@ export default class ChatModule extends VuexModule {
               break;
             } else {
               let emoticons : string[];
-              if (localStorage.customEmoticons) {
-                emoticons = JSON.parse(localStorage.customEmoticons) as string[];
+              if (localStorage.chat_customEmoticons) {
+                emoticons = JSON.parse(localStorage.chat_customEmoticons) as string[];
               } else {
                 emoticons = this.customEmoticons;
               }
@@ -983,7 +983,7 @@ export default class ChatModule extends VuexModule {
             }
             // Changing the array elements with array[index] = newValue isn't reactive
             Vue.set(this.customEmoticons, (parseInt(parameters[1], 10) - 1), parameters[0]);
-            localStorage.customEmoticons = JSON.stringify(this.customEmoticons);
+            localStorage.chat_customEmoticons = JSON.stringify(this.customEmoticons);
             break;
           case 'emoticon-list':
             postMessage(`Your custom emoticons are ${this.customEmoticons[0]} (slot 1), ${this.customEmoticons[1]} (slot 2), and ${this.customEmoticons[2]} (slot 3).`);
@@ -1409,7 +1409,7 @@ export default class ChatModule extends VuexModule {
   async ignoreUser({ username, channel }: { username: string; channel?: string }) {
     if (!this.ignoredUsers.includes(username)) {
       this.ignoredUsers.push(username);
-      localStorage.ignoredUsers = JSON.stringify(this.ignoredUsers);
+      localStorage.chat_ignoredUsers = JSON.stringify(this.ignoredUsers);
       if (channel) {
         this.postMessage(
           new Message(
@@ -1435,7 +1435,7 @@ export default class ChatModule extends VuexModule {
         this.currentUser.nicks = [to];
         this.client?.raw(`NICK ${to}`);
         if (localStorage) {
-          localStorage.nick = to;
+          localStorage.chat_nick = to;
         }
       } else {
         this.postMessage(new Message('Please include command parameters. Type `/help changenick` for more usage instructions'));
@@ -1921,11 +1921,11 @@ export default class ChatModule extends VuexModule {
     });
     this.client?.join(name);
     let joinedChannels = [];
-    if (localStorage.joinedChannels) {
-      joinedChannels = JSON.parse(localStorage.joinedChannels);
+    if (localStorage.chat_joinedChannels) {
+      joinedChannels = JSON.parse(localStorage.chat_joinedChannels);
     }
     joinedChannels.push(name);
-    localStorage.joinedChannels = JSON.stringify(joinedChannels);
+    localStorage.chat_joinedChannels = JSON.stringify(joinedChannels);
     console.log(`Joined channel ${name}`);
   }
 
diff --git a/src/standalone/App.vue b/src/standalone/App.vue
index faae8c2e..91778e68 100644
--- a/src/standalone/App.vue
+++ b/src/standalone/App.vue
@@ -32,9 +32,9 @@
     uid!: string;
 
     created() {
-      if (localStorage.username) {
-        this.username = localStorage.username;
-        this.uid = localStorage.uid;
+      if (localStorage.chat_username) {
+        this.username = localStorage.chat_username;
+        this.uid = localStorage.chat_uid;
         this.logged = true;
       }
     }
@@ -44,8 +44,8 @@
       this.uid = uid;
       this.logged = true;
       if (remember) {
-        localStorage.username = username;
-        localStorage.uid = uid;
+        localStorage.chat_username = username;
+        localStorage.chat_uid = uid;
       }
     }
   }

From a5fda2f591609a1865304e2e6c782f9dbad9b048 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 29 Jun 2020 14:18:55 -0500
Subject: [PATCH 172/223] Bug fixes, chat select buttons styling,

---
 src/app/App.vue                               |  6 +++++-
 .../Slideout/Chat/AddChatButton.vue           |  3 +--
 .../Slideout/Chat/ChatSelectButton.vue        | 19 +++++++++++++++----
 .../Slideout/Chat/SlideoutChats.vue           | 14 +++++++++-----
 .../Sections/NotificationsSection.vue         |  7 +++----
 .../Settings/Sections/OperSection.vue         |  1 +
 .../Settings/Sections/StatusSection.vue       |  3 +++
 7 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 6cbb7924..e0095738 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -137,7 +137,9 @@
     }
     if (this.fullSize === false) {
       // Scrolls down when the chat is brought back to normal size
+      if (this.$refs.messagepanes && this.$refs.messagepanes[this.activeTab]) {
       this.$refs.messagepanes[this.activeTab].onContentChanged();
+      }
     }
   }
 
@@ -364,7 +366,9 @@
             It think's its just a normal MessagePane
             */
             const pane = this.$refs.messagepanes[0];
-            pane.scrollDown(); // Scroll down
+            if (pane) {
+              pane.scrollDown();
+            }
           }, 100);
         }, 500);
       }
diff --git a/src/app/components/Slideout/Chat/AddChatButton.vue b/src/app/components/Slideout/Chat/AddChatButton.vue
index 6e4b40b3..4ad5888d 100644
--- a/src/app/components/Slideout/Chat/AddChatButton.vue
+++ b/src/app/components/Slideout/Chat/AddChatButton.vue
@@ -63,8 +63,7 @@
   }
   .input-container {
     height: 30px;
-    width: calc(100% - 50px);
-    margin-right: 10px;
+    width: calc(100% - 40px);
     display: inline-block;
     font-size: 20px;
     vertical-align: baseline;
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index dabb99d3..cbf109a5 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -53,7 +53,6 @@
   .chat-select {
     border: none;
     cursor: pointer;
-    transition: 0.3s;
     padding: 0.4em 1.25em;
     font-family: "Open Sans","Century Gothic", "Didact Gothic", Arial, sans-serif;
     font-size: 12px;
@@ -66,6 +65,7 @@
     height:90px;
     margin:0px;
     position: relative;
+    transition: all 0.2s !important;
   }
 
   /* Change background color of buttons on hover */
@@ -73,11 +73,11 @@
     background-color: rgba(255, 255, 255, 0.13);
   }
 
-  button.active {
-    border-left: solid #4A90E2 10px; //Selected rectangle to the side is just left border
+  button.active{
+    border-left: solid #4A90E2 10px !important; //Selected rectangle to the side is just left border
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
-    padding-left:5px;
+    padding-left: 5px;
   }
 
   .channel-name { /* Name of chat channel */
@@ -118,4 +118,15 @@
   .channel-close {
     display: none;
   }
+
+  .chat-select:after {
+    content: "";
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    height: 2px;
+    border-bottom: 1px solid gray;
+    bottom: calc(-0.4em - 1px);
+    position: relative;
+  }
 </style>
diff --git a/src/app/components/Slideout/Chat/SlideoutChats.vue b/src/app/components/Slideout/Chat/SlideoutChats.vue
index 69f91c61..1d700144 100644
--- a/src/app/components/Slideout/Chat/SlideoutChats.vue
+++ b/src/app/components/Slideout/Chat/SlideoutChats.vue
@@ -6,13 +6,11 @@
       :isActive="activeTab === index"
       :name="name"
       :description="channelDescription(name)"
-      @input="activeTab = index"
+      @input="setTab(index)"
       v-on:click="update"
       :class="{ notified:isNotified(name), mentioned:isMentioned(name) }"
     >
-      <Splitter />
     </ChatSelectButton>
-    <Splitter />
     <AddChatButton />
   </div>
 </template>
@@ -22,13 +20,11 @@
   } from 'vue-property-decorator';
   import ChatSelectButton from './ChatSelectButton.vue';
   import Slideout from '../Slideout.vue';
-  import Splitter from './Splitter.vue';
   import AddChatButton from './AddChatButton.vue';
 
   @Component({
     components: {
       ChatSelectButton,
-      Splitter,
       AddChatButton,
     },
   })
@@ -102,6 +98,14 @@
       // If it doesn't exist, return false (default)
       return false;
     }
+
+    setTab(index: number) {
+      if (this.activeTab !== index) {
+        this.activeTab = index;
+      } else {
+        (this.$parent as Slideout).checked = false;
+      }
+    }
   }
 </script>
 <style scoped>
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 192ea148..dbadbc8a 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -25,7 +25,7 @@
             Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
           </span>
           <span style="float: right; width: 40%">
-            <input type=text v-model="indicator" style="font-size:1rem; padding:1px;">
+            <input type=text v-model="indicator" style="padding:1px;">
           </span>
         </li>
         <li>
@@ -48,7 +48,7 @@
             Your username is automatically a keyword." />
           </span>
           <span style="float: right; width: 40%">
-            <input type=text v-model="keywords" style="font-size:1rem; padding:1px;">
+            <input type=text v-model="keywords" style="padding:1px;">
           </span>
         </li>
   </SettingsSection>
@@ -190,10 +190,9 @@ li {
   padding:2px;
 }
 input {
-  margin-bottom:10px;
   height:100%;
   width: 100%;
-  float: right;
+  font-size: 0.85rem;
 }
 .switch {
   float:right;
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index 1aae330b..0316f9f9 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -68,6 +68,7 @@
 }
 input {
   margin:2px;
+  font-size: 0.85rem;
   max-width:150px; /* Big screens don't have arbitrarily large input */
 }
 li {
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 206624e4..3438f843 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -112,4 +112,7 @@ li {
   width: calc(100% - 40px);
   margin-bottom: 10px;
 }
+input {
+  font-size: 0.85rem;
+}
 </style>

From 72058e0a61f197863518982e86e4eb90adf8c59e Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 29 Jun 2020 14:24:57 -0500
Subject: [PATCH 173/223] Link modals don't flag images or users

---
 src/app/components/Messages/UserMessage.vue | 8 +++++---
 src/app/tools/Markdown.ts                   | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 68895fee..aeb0f20a 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -210,9 +210,11 @@
       });
       const usernames = Object.keys(this.$vxm.chat.connectedUsers);
       [...this.$el.getElementsByTagName('a')]
-        .filter(e => e.href !== e.innerText)
-        .filter(e => !usernames.includes(e.innerText.replace('●', '').trim().replace(':', '').trim()))
-        .filter(e => ![...e.classList].includes('chat-message-options'))
+        .filter(e => e.href !== e.innerText) // If the text doesn't match the href
+        .filter(e => !usernames.includes(e.innerText.replace('●', '').trim().replace(':', '').trim())) // Don't flag usernames
+        .filter(e => ![...e.classList].includes('chat-message-options')) // Or context menu
+        .filter(e => ![...e.classList].includes('user-link')) // Or user tooltips
+        .filter(e => ![...e.classList].includes('image-link')) // Or inline images
         .forEach(e => {
         e.addEventListener('click', ev => {
           ev.preventDefault();
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index e8ea1c7b..fc6e317e 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -45,7 +45,7 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
     content = content.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
   });
   [...content.matchAll(/https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
-    content = content.replace(e[0].trim(), `<a href="${e[0].trim()}" target="_blank"><img class="screenshot" src="${e[0].trim()}"></a>`);
+    content = content.replace(e[0].trim(), `<a href="${e[0].trim()}" class="image-link" target="_blank"><img class="screenshot" src="${e[0].trim()}"></a>`);
   });
   [...content.matchAll(/https?:\/\/eternagame\.org\/(game\/)?puzzles?\/\d+\/?/g)].forEach(e => {
     content = content.replace(e[0], `<mark class="puzzle-link">${e[0]}</mark>`);

From 0cc6cb514b93290acac274d5c2cadb7563f81c50 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 30 Jun 2020 23:07:49 -0500
Subject: [PATCH 174/223] Typing messages

---
 src/app/components/Input/ScalableInput.vue | 22 +++++++++--
 src/app/components/Panes/MessagePane.vue   | 38 +++++++++++++++++++
 src/app/store/chat.vuex.ts                 | 43 ++++++++++++++++++++--
 3 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index 3873921c..b94acdb7 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -21,6 +21,7 @@
       @blur="$emit('focused', false)"
       @select="updateSelection"
       @click="deselect"
+      @keypress="onKeyPress"
       aria-label="Send message text input"
     />
     <SendButton @send="send" aria-label="Send"/>
@@ -144,8 +145,8 @@
 
     validURL(str:string) { // Used for hyperlink detection
       const pattern = new RegExp('^(https?:\\/\\/)?' // protocol
-    + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain name
-    + '((\\d{1,3}\\.){3}\\d{1,3}))' // OR ip (v4) address
+    + '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' // domain
+    + '((\\d{1,3}\\.){3}\\d{1,3}))' // IP
     + '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' // port and path
     + '(\\?[;&a-z\\d%_.~+=-]*)?' // query string
     + '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
@@ -202,8 +203,22 @@
       textarea: HTMLTextAreaElement;
     };
 
+    timer !: number;
+
+    timeout = 5000;
+
+    stopTyping() {
+      if (this.$vxm.chat.channels['#off-topic']?.typing.includes(this.$vxm.chat.username)) {
+        this.$vxm.chat.stopTyping(this.$vxm.chat.chatChannel);
+      }
+    }
+
     onKeyPress(event: any) {
-      this.$emit('keypress', event);
+      if (!this.$vxm.chat.channels['#off-topic']?.typing.includes(this.$vxm.chat.username)) {
+        this.$vxm.chat.type(this.$vxm.chat.chatChannel);
+      }
+      clearTimeout(this.timer);
+      this.timer = setTimeout(this.stopTyping, this.timeout);
     }
 
     updateHeight() {
@@ -219,6 +234,7 @@
     mounted() {
       window.addEventListener('resize', this.updateHeight);
       this.$nextTick(this.updateHeight);
+      this.timer = setTimeout(this.stopTyping, this.timeout);
     }
 
     updated() {
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index a4496988..7df232e2 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -12,6 +12,7 @@
       <UnreadMessageBanner v-show="unreads > 0" @click.native="scrollDown" :messages="unreads" />
     </ul>
     <template v-slot:footer>
+      <span class='typing' v-show="anyTyping">{{typingString}}</span>
       <EmoticonBar
         @emote="add"
         @md="format"
@@ -56,6 +57,7 @@
   import Message from '@/types/message';
   import { Channel } from '@/store/chat.vuex';
   import UnreadMessageBanner from './UnreadMessageBanner.vue';
+  import User from '@/types/user';
 
   @Component({
     components: {
@@ -104,6 +106,36 @@
       }
     }
 
+    get typing() {
+      return this.data.typing;
+    }
+
+    get anyTyping() {
+      if (!this.typing) return false;
+      return this.typing.length > 0;
+    }
+
+    get username() {
+      return this.$vxm.chat.username;
+    }
+
+    get typingString() {
+      if (!this.typing) return '';
+      const users = this.typing.slice();
+      const plural = users.length > 1;
+      if (this.username !== '') {
+        const nameIndex = users.indexOf(this.username);
+        if (nameIndex !== -1) {
+          users[nameIndex] = 'You';
+        }
+      }
+      if (plural) {
+        const lastUser = users.pop();
+        return `${users.join(', ')}${users.length > 1 ? ',' : ''} and ${lastUser} are typing...`;
+      }
+      return `${users[0]} ${users[0] === 'You' ? 'are' : 'is'} typing...`;
+    }
+
     selection: number[] = [];
 
     @Prop({ required: true })
@@ -174,6 +206,7 @@
       this.newMessage = '';
       this.$refs.input.$refs.textarea.value = '';
       this.scrollDown();
+      this.$vxm.chat.stopTyping(this.data.name);
     }
 
     format(options:string) {
@@ -214,6 +247,7 @@
         this.newMessage = '';
         e.preventDefault();
         this.scrollDown();
+        this.$vxm.chat.stopTyping(this.data.name);
       }
     }
 
@@ -233,4 +267,8 @@
   }
 </script>
 <style scoped>
+.typing {
+  font-style: italic;
+  font-weight: bold;
+}
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 29ed97e8..d097e14c 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -32,7 +32,8 @@ interface Channel {
   maxHistoryMessages: number;
   notifications: boolean;
   notificationsEnabled: boolean;
-  mentioned: boolean,
+  mentioned: boolean;
+  typing: string[];
 }
 
 class ConnectionData {
@@ -69,6 +70,13 @@ export default class ChatModule extends VuexModule {
 
   nick!: string;
 
+  get username() {
+    if (this.currentUser) {
+      return this.currentUser.username;
+    }
+    return '';
+  }
+
   connectionData = new ConnectionData();
 
   client?: Irc.Client;
@@ -151,6 +159,7 @@ export default class ChatModule extends VuexModule {
         notifications: false,
         mentioned: false,
         notificationsEnabled: true,
+        typing: [],
       };
     });
     // Creates channel through which everything is sent
@@ -605,6 +614,25 @@ export default class ChatModule extends VuexModule {
     });
   }
 
+  @action()
+  async type(channel: string) {
+    // Safeguard to make sure this doesn't go in a channel with others while I test
+    if (channel === '#general' || channel === '#help' || channel === '#labs') return;
+    if (this.channels[channel]?.typing.includes(this.username)) return;
+    this.client?.action(channel, 'is typing...');
+    this.channels[channel]?.typing.push(this.username);
+  }
+
+
+  @action()
+  async stopTyping(channel: string) {
+    // Safeguard to make sure this doesn't go in a channel with others while I test
+    if (channel === '#general' || channel === '#help' || channel === '#labs') return;
+    this.client?.action(channel, 'is not typing...');
+    this.channels[channel]!.typing = this.channels[channel]!.typing
+      .filter(e => e !== this.username);
+  }
+
   @action()
   async onNickInUse({ nick }: Irc.NickInvalidEventArgs) {
     this.currentUser.nicks.splice(this.currentUser.nicks.indexOf(nick));
@@ -1375,7 +1403,7 @@ export default class ChatModule extends VuexModule {
         if (post) {
           if (!this.channels[channel]?.banned && !banned && !quieted) {
             if (isAction) {
-                this.client!.action(channel, `${message}`);
+                this.client!.action(channel, `${message.replace(/ \[#.+\]$/, '')}`);
             } else {
                 this.client!.say(channel, message);
             }
@@ -1550,6 +1578,15 @@ export default class ChatModule extends VuexModule {
     message, nick, tags, time, type, target,
   }: Irc.MessageEventArgs) {
     let channel = this.channels[target];
+    if (message === 'is typing...' && type === 'action') {
+      if (channel?.typing.includes(this.username)) return;
+      channel?.typing.push(this.username);
+      return;
+    }
+    if (message === 'is not typing...' && type === 'action') {
+      channel!.typing = channel!.typing.filter(e => e !== User.parseUsername(nick));
+      return;
+    }
     // If it's a private message
     if (this.currentUser.username.includes(User.parseUsername(target)) && nick) {
       if (!this.channels[User.parseUsername(nick)]) { // If the channel doesn't exist yet, create it
@@ -1598,7 +1635,7 @@ export default class ChatModule extends VuexModule {
     let msg = message;
     if (this.notificationsKeywords) { // Bolds keywords
       this.notificationsKeywords.forEach(n => {
-        msg = msg.replace(` ${n}`, `**|${n}|**`);
+        msg = msg.replace(` ${n}`, `|${n}|`);
       });
     }
     const messageObject = new Message(

From 095ea545c33e024e8e2c340da5fa87d6abdb0c35 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 8 Jul 2020 10:21:20 -0500
Subject: [PATCH 175/223] Setting for typing messages

---
 src/app/components/Panes/MessagePane.vue         |  7 ++++++-
 .../Settings/Sections/ToolbarSection.vue         | 16 +++++++++++++++-
 src/app/store/settings.vuex.ts                   | 12 +++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 7df232e2..633e0321 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -12,7 +12,12 @@
       <UnreadMessageBanner v-show="unreads > 0" @click.native="scrollDown" :messages="unreads" />
     </ul>
     <template v-slot:footer>
-      <span class='typing' v-show="anyTyping">{{typingString}}</span>
+      <span
+        class='typing'
+        v-if="$vxm.settings.typingMessages"
+        v-show="anyTyping">
+        {{typingString}}
+      </span>
       <EmoticonBar
         @emote="add"
         @md="format"
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index f9f4df26..374f0ce8 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -54,6 +54,13 @@
         <span class="warning">{{ emoticonErrorMessage }}</span>
       </li>
     </ul>
+    <li style="list-style-type: none">
+      Typing messages
+      <SettingsTooltip text="Whether you see messages above the toolbar when people are typing" />
+      <span style="float: right">
+        <SettingsSwitch v-model="$vxm.settings.typingMessages" />
+      </span>
+    </li>
   </SettingsSection>
 </template>
 <script lang="ts">
@@ -147,7 +154,7 @@
       targ.value = '';
     }
 
-  emoticonErrorMessage = '';
+    emoticonErrorMessage = '';
 
     get customEmoticons() {
       return this.$vxm.chat.customEmoticons;
@@ -165,6 +172,13 @@
         this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
       }
     }
+
+    @Watch('$vxm.settings.typingMessages')
+    typingMessageSettingsUpdated() {
+      if (localStorage) {
+        localStorage.chat_typingMessages = JSON.stringify(this.$vxm.settings.typingMessages);
+      }
+    }
   }
 </script>
 <style lang="scss" scoped>
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index 7dc20f84..cc55649c 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -3,8 +3,8 @@ import * as Irc from 'irc-framework';
 import {
   createModule, mutation, action, extractVuexModule,
 } from 'vuex-class-component';
-import toBool from 'to-bool';
 import Vue from 'vue';
+import { Watch } from 'vue-property-decorator';
 
 const VuexModule = createModule({
   strict: false,
@@ -23,4 +23,14 @@ export default class SettingsModule extends VuexModule {
   previewChatFeatures = true;
 
   awayReason = '';
+
+  typingMessages = true;
+
+  created() {
+    if (localStorage) {
+      if (localStorage.chat_typingMessages) {
+        this.typingMessages = JSON.parse(localStorage.chat_typingMessages);
+      }
+    }
+  }
 }

From a6c5017e33574a8dde1529c4e32639355ec44384 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 8 Jul 2020 10:52:47 -0500
Subject: [PATCH 176/223] Forum position, all positions float to edge, etc

---
 src/app/App.vue                     | 35 +++++++++-------
 src/app/components/DraggableDiv.vue | 62 ++++++++++++-----------------
 src/app/store/chat.vuex.ts          | 22 ++++++----
 src/standalone/App.vue              |  9 ++++-
 4 files changed, 70 insertions(+), 58 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index e0095738..9c7a0e57 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -7,6 +7,7 @@
     :enabled="!fullSize /* Disables dragging when chat is fullsize*/"
     v-resize:debounce="resized"
     :inGame="inGame"
+    :inForum="inForum"
   >
     <template slot="main">
       <slideout
@@ -240,20 +241,19 @@
 
   get positionStyle() {
     const style: { [key:string]: string} = {};
-    if (this.inGame) {
-      if (this.gamePosition[0] === 'l') {
-        style.left = `${this.gamePosition[1]}px`;
-      } else {
-        style.right = `${this.gamePosition[1]}px`;
-      }
-      if (this.gamePosition[2] === 't') {
-        style.top = `${this.gamePosition[3]}px`;
-      } else {
-        style.bottom = `${this.gamePosition[3]}px`;
-      }
+    let basis;
+    if (this.inGame) basis = this.gamePosition;
+    else if (this.inForum) basis = this.forumPosition;
+    else basis = this.initialPosition;
+    if (basis[0] === 'l') {
+      style.left = `${basis[1]}px`;
+    } else {
+      style.right = `${basis[1]}px`;
+    }
+    if (basis[2] === 't') {
+      style.top = `${basis[3]}px`;
     } else {
-      style.left = `${this.initialPosition[0]}px`;
-      style.top = `${this.initialPosition[1]}px`;
+      style.bottom = `${basis[3]}px`;
     }
     return style;
   }
@@ -269,6 +269,10 @@
     return this.$vxm.chat.initialPosition;
   }
 
+  get forumPosition() {
+    return this.$vxm.chat.forumPosition;
+  }
+
   get initialSize() {
     return this.$vxm.chat.initialSize;
   }
@@ -330,6 +334,9 @@
   @Prop()
   inGame !: boolean;
 
+  @Prop()
+  inForum !: boolean;
+
   $refs!: {
     reportDialog: ReportDialog;
     login: OperLogin,
@@ -461,7 +468,7 @@
   font-size: 14px;
   font-weight: 300;
   background-color: $med-dark-blue;
-  position: absolute; /* Makes sure everything is placed with respect to it, not to its parent */
+  position: fixed; /* Makes sure everything is placed with respect to it, not to its parent */
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 350px; /* Bounds on chat resizing */
   max-width: 450px;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 16939e62..efe480bf 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -25,6 +25,7 @@
     props: {
       enabled: Boolean,
       inGame: Boolean,
+      inForum: Boolean,
     },
     computed: {
       disabled: function disabled() {
@@ -69,43 +70,32 @@
         of how the site is laid out. It means that the chat won't move if the browser resizes. */
         /* If the chat is in-game, position is stored relative to edges of page */
         if (localStorage) {
-          if (this.inGame) {
-            const windowSize = [window.innerWidth, window.innerHeight];
-            const {
-              left, top, width, height,
-            } = this.$refs.draggableContainer.style;
-            const chatPosition = [Number(left.replace('px', '')), Number(top.replace('px', ''))];
-            const chatSize = [Number(width.replace('px', '')), Number(height.replace('px', ''))];
-            // Determines whether chat is placed WRT l/r, t/b by center
-            const center = [chatPosition[0] + chatSize[0] / 2, chatPosition[1] + chatSize[1] / 2];
-            const side = center[0] < windowSize[0] / 2 ? 'l' : 'r';
-            const side2 = center[1] < windowSize[1] / 2 ? 't' : 'b';
-            // Gets offsets from sides
-            let offset = chatPosition[0];
-            if (side === 'r') {
-              // Gets offset from right
-              offset = windowSize[0] - chatPosition[0] - chatSize[0];
-            }
-            let offset2 = chatPosition[1];
-            if (side2 === 'b') {
-              // Gets offset from bottom
-              offset2 = windowSize[1] - chatPosition[1] - chatSize[1];
-            }
-            localStorage.chat_gamePosition = JSON.stringify([side, offset, side2, offset2]);
-          } else {
-            // Sets new chat position in localStorage when drag is ended
-            let x = this.$refs.draggableContainer.style.left; // Gets current X and Y
-            let y = this.$refs.draggableContainer.style.top;
-            x = x.replace('px', '');
-            y = y.replace('px', '');
-            const point = [Number(x), Number(y)];
-            const midpointX = window.innerWidth / 2; // Gets center
-            const midpointY = window.innerHeight / 2;
-            const midpoint = [midpointX, midpointY];
-            // Gets chat's offset from the center
-            const offset = [midpoint[0] - point[0], midpoint[1] - point[1]];
-            localStorage.chat_position = JSON.stringify(`${offset[0]} ${offset[1]}`); // Save to localStorage
+          const windowSize = [window.innerWidth, window.innerHeight];
+          const {
+            left, top, width, height,
+          } = this.$refs.draggableContainer.style;
+          const chatPosition = [Number(left.replace('px', '')), Number(top.replace('px', ''))];
+          const chatSize = [Number(width.replace('px', '')), Number(height.replace('px', ''))];
+          // Determines whether chat is placed WRT l/r, t/b by center
+          const center = [chatPosition[0] + chatSize[0] / 2, chatPosition[1] + chatSize[1] / 2];
+          const side = center[0] < windowSize[0] / 2 ? 'l' : 'r';
+          const side2 = center[1] < windowSize[1] / 2 ? 't' : 'b';
+          // Gets offsets from sides
+          let offset = chatPosition[0];
+          if (side === 'r') {
+            // Gets offset from right
+            offset = windowSize[0] - chatPosition[0] - chatSize[0];
           }
+          let offset2 = chatPosition[1];
+          if (side2 === 'b') {
+            // Gets offset from bottom
+            offset2 = windowSize[1] - chatPosition[1] - chatSize[1];
+          }
+          let basis;
+          if (this.inGame) basis = 'gameP';
+          else if (this.inForum) basis = 'forumP';
+          else basis = 'p';
+          localStorage[`chat_${basis}osition`] = JSON.stringify([side, offset, side2, offset2]);
         }
         document.onmouseup = null;
         document.onmousemove = null;
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index d097e14c..3dc7f73f 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -128,7 +128,9 @@ export default class ChatModule extends VuexModule {
 
   rawHistoryMessages: string[] = []; // Stores history messages
 
-  initialPosition: [number, number] = [0, 0];
+  initialPosition: [string, number, string, number] = ['l', 0, 't', 0];
+
+  forumPosition: [string, number, string, number] = ['l', 0, 't', 0];
 
   inGamePosition: [string, number, string, number] = ['l', 0, 't', 0];
 
@@ -344,12 +346,7 @@ export default class ChatModule extends VuexModule {
       }
       if (localStorage.chat_position) {
         try {
-          const data = JSON.parse(localStorage.chat_position);
-          const values = data.split(' '); // Gets X and Y
-          const midpoint = [window.innerWidth / 2, window.innerHeight / 2]; // Gets center
-          const point = [Number(values[0]), Number(values[1])];
-          // Gets position relative to center
-          this.initialPosition = [midpoint[0] - point[0], midpoint[1] - point[1]];
+          this.initialPosition = JSON.parse(localStorage.chat_position);
         } catch {
           console.error(
             'Encountered an error while parsing the local data of chat location',
@@ -365,6 +362,17 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
+      if (localStorage.chat_forumPosition) {
+        try {
+          this.forumPosition = JSON.parse(localStorage.chat_forumPosition);
+        } catch {
+          console.error(
+            'Encountered an error while parsing the local data of forum chat location',
+          );
+        }
+      } else {
+        this.forumPosition = this.initialPosition;
+      }
       if (localStorage.chat_size) {
         try {
           const data = JSON.parse(localStorage.chat_size);
diff --git a/src/standalone/App.vue b/src/standalone/App.vue
index 91778e68..c69565b0 100644
--- a/src/standalone/App.vue
+++ b/src/standalone/App.vue
@@ -9,7 +9,10 @@
       :username="username"
       :uid="uid"
       workbranch="eternagame.org"
-      :inGame="false" />
+      :inGame="inGame"
+      :inForum="inForum" />
+      <input type="checkbox" v-model="inGame">in game<br>
+      <input type="checkbox" v-model="inForum">in forum<br>
   </div>
 </template>
 
@@ -31,6 +34,10 @@
 
     uid!: string;
 
+    inGame = false;
+
+    inForum = true;
+
     created() {
       if (localStorage.chat_username) {
         this.username = localStorage.chat_username;

From a1741350f336924a95089527e82bc92b8150094e Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Wed, 8 Jul 2020 12:36:11 -0500
Subject: [PATCH 177/223] Chat helper

---
 src/app/App.vue            |   3 +
 src/app/store/chat.vuex.ts | 134 +++++++++++++++++++++++++++++++++++--
 src/standalone/App.vue     |   4 +-
 3 files changed, 132 insertions(+), 9 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 9c7a0e57..21c73652 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -157,6 +157,9 @@
 
   @Watch('currentTab')
   loadHistory() { // Load history when tab changed
+    if (this.currentTab === 'ChatHelper') {
+      localStorage.chat_viewedTutorial = true;
+    }
     // Don't put duplicates of existing history messages
     if (this.$vxm.chat.channels[this.currentTab]!.postedMessages.length <= 50) {
       this.$vxm.chat.loadMessagesForChannel(this.currentTab); // Load messages
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 3dc7f73f..d1c36f64 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -620,6 +620,119 @@ export default class ChatModule extends VuexModule {
         },
       });
     });
+    if (localStorage && !localStorage.chat_viewedTutorial) {
+      this.promptTutorial();
+    }
+    this.postToQuery({
+      message: 'help',
+      channel: 'ChatHelper',
+    });
+  }
+
+  @action()
+  async promptTutorial() {
+    this.postAsTutorial('Hi! I\'m ChatHelper, a bot designed to show you the features and help you navigate the Eterna chat. Would you like to begin the tutorial?');
+    this.lastMessage = 'tutorial_begin?';
+  }
+
+  lastMessage = '';
+
+  @action()
+  async postAsTutorial(msg: string) {
+    if (!this.channels.ChatHelper) {
+      Vue.set(this.channels, 'ChatHelper', {
+        name: 'ChatHelper',
+        postedMessages: [],
+        maxHistoryMessages: 50,
+        notifications: false,
+        notificationsEnabled: false,
+        mentioned: false,
+        typing: [],
+        banned: BanStatus.BAN_STATUS_NORMAL,
+      });
+    }
+    this.channels.ChatHelper?.postedMessages.push(new Message(msg, this.nick, new User('ChatHelper')));
+  }
+
+  @action()
+  async tutorial() {
+    switch (this.lastMessage) {
+      case 'tutorial_begin?':
+        this.postAsTutorial('A lot of the chat\'s features are located in the **slideout**. To open the slideout, click the three bars in the top left.');
+        this.postAsTutorial('Continue?');
+        this.lastMessage = 'continue_chat?';
+        break;
+      case 'continue_chat?':
+        this.postAsTutorial('You can change channels in the slideout by entering the **chat** tab of the slideout. Click the # button in the slideout at the top. To change channels, click on one of the channels.');
+        this.postAsTutorial('You can also add new channels in the chat tab by scrolling to the bottom, entering the channel name in the text box, and clicking the + button. To remove a channel you\'ve added, hover over it and click the X button.');
+        this.postAsTutorial('Continue?');
+        this.lastMessage = 'continue_users?';
+        break;
+      case 'continue_users?':
+        this.postAsTutorial('You view and manage users in the slideout by entering the **users** tab of the slideout. Click the users button in the slideout at the top.');
+        this.postAsTutorial('In the users tab, you can see a list of online users, how many there are. If a user is away, a yellow dot appears before their name. Hover over the dot to view the reason they are away. Hovering over the username brings up a tooltip with useful information about the user.');
+        this.postAsTutorial('When you hover over a user, three dots appear to the right of their name. If you click on those dots, a context menu appears. The context menu allows you to ignore, report, and private message the user.');
+        this.postAsTutorial('Continue?');
+        this.lastMessage = 'continue_settings?';
+        break;
+      case 'continue_settings?':
+        this.postAsTutorial('You customize the chat in the **settings** tab of the slideout. Click the gear icon in the slideout at the top.');
+        this.postAsTutorial('To open a settings category, click the arrow next to the category name to show the contents. To hide them, click the arrow again.');
+        this.postAsTutorial('Hover over the circled question mark next to a setting to learn more about the setting.');
+        this.postAsTutorial('Continue?');
+        this.lastMessage = 'continue_message?';
+        break;
+      case 'continue_message?':
+        this.postAsTutorial('If you hover over a user message in a chat channel, the three dots appear to the right. Click on them to open up the context menu. In this context menu, you can ignore, report, and private message the user and copy or pin the message.');
+        this.postAsTutorial('Continue?');
+        this.lastMessage = 'continue_toolbar?';
+        break;
+      case 'continue_toolbar?':
+        this.postAsTutorial('The toolbar is an easy way to add emoticons and formatting to your text. The toolbar has three menus - one for emoticons, one for markdown, and one for the preview.');
+        this.postAsTutorial('The emoticons menu of the toolbar adds emoticons to your text. You can choose from several preset emoticons and three custom emoticons of your choice. For more information, see the toolbar features category in the settings tab.');
+        this.postAsTutorial('The markdown menu of the toolbar makes it easy to format your text. To use it, just highlight some text or place your cursor where you want the formatting. Then, click one of the buttons to add the formatting to your selection or your cursor position. You can rearrange the markdown buttons.');
+        this.postAsTutorial('The preview menu of the toolbar shows you what your text will look like when you send it. It displays your formatted message. It\'s useful for making sure you\'ve used the right markdown styles before you send the message.');
+        this.postAsTutorial('Continue?');
+        this.lastMessage = 'final?';
+        break;
+      case 'final?':
+        this.postAsTutorial('You\'ve reached the end of the tutorial. Thank you! If you want help with a specific topic, just reply to me with `help <topic>`, just `help` or use the `/help` chat command. Please message @Ahalb or one of our moderators if you have any questions, comments, or concerns.');
+        this.lastMessage = '';
+        break;
+      default: break;
+    }
+  }
+
+  @action()
+  async onChatHelperMessage(msg: string) {
+    if (msg.toLowerCase().match(/(yes|true|on|ok)/)) {
+      this.tutorial();
+      return;
+    }
+    if (msg.toLowerCase().includes('begin tutorial')) {
+      this.lastMessage = 'tutorial_begin?';
+      this.tutorial();
+    }
+    if (msg.startsWith('help')) {
+      const params = msg.substring(4).trim();
+      switch (params) {
+        case 'pin':
+        case 'pins':
+          this.postAsTutorial('Pins allow you to save messages to view later. To pin a message, open the context menu for the message and click pin message. To view only pins for a channel, click the pin button at the top. To view all messages, click the pin button again. To unpin a message, click unpin message in the context menu');
+          break;
+        case 'notification':
+        case 'notifications':
+          this.postAsTutorial('You receive notifications when a message is sent in a channel you are not viewing. When you have notifications, and indicator appears in the page title, the slideout button has a red bubble, and the name of the notified channel in the slideout is red.');
+          this.postAsTutorial('If someone mentions your name, you are also notified. The slideout button gets an orange bubble and the name of the mentioned channel in the slideout turns orange.');
+          this.postAsTutorial('You can customize the page title indicator and which channels receive notifications in the settings tab of the slideout');
+          break;
+        case 'markdown':
+          this.postAsTutorial('Markdown is a system of text formatting. You can use markdown in your messages to send bold text, links, quotes, and more. To use markdown styles, type them in your message or use the toolbar');
+          this.postAsTutorial('The chat supports the following markdown styles: bold, italics, bold italics, highlights, links, strikethrough, code, actions, quotes, and two fonts');
+          break;
+        default: this.postAsTutorial('I can offer specific help with pins, notifications, and markdown. To view these guides, use `help <topic>` (example: `help pins`).');
+      }
+    }
   }
 
   @action()
@@ -627,7 +740,7 @@ export default class ChatModule extends VuexModule {
     // Safeguard to make sure this doesn't go in a channel with others while I test
     if (channel === '#general' || channel === '#help' || channel === '#labs') return;
     if (this.channels[channel]?.typing.includes(this.username)) return;
-    this.client?.action(channel, 'is typing...');
+    if (channel !== 'ChatHelper') this.client?.action(channel, 'is typing...');
     this.channels[channel]?.typing.push(this.username);
   }
 
@@ -636,7 +749,7 @@ export default class ChatModule extends VuexModule {
   async stopTyping(channel: string) {
     // Safeguard to make sure this doesn't go in a channel with others while I test
     if (channel === '#general' || channel === '#help' || channel === '#labs') return;
-    this.client?.action(channel, 'is not typing...');
+    if (channel !== 'ChatHelper') this.client?.action(channel, 'is not typing...');
     this.channels[channel]!.typing = this.channels[channel]!.typing
       .filter(e => e !== this.username);
   }
@@ -1526,6 +1639,11 @@ export default class ChatModule extends VuexModule {
   async postToQuery({ message, channel }: { message:string, channel:string}) {
     /* Splits argument into message and channel
     Will only cause issues if people are putting | in their nick */
+    let post = true;
+    if (channel === 'ChatHelper') {
+      post = false;
+      this.onChatHelperMessage(message);
+    }
     if (this.channels[User.parseUsername(channel)] === undefined) {
       // If the channel doesn't exist, make a new one
       Vue.set(this.channels, User.parseUsername(channel), {
@@ -1535,13 +1653,17 @@ export default class ChatModule extends VuexModule {
         notificationsEnabled: true,
         banned: BanStatus.BAN_STATUS_NORMAL,
         postedMessages: [],
+        mentioned: false,
+        typing: [],
       });
     }
-    // Converting from array to set to array removes duplicates
-    Array.from(new Set(this.connectedUsers[User.parseUsername(channel)]?.nicks)).forEach(e => {
+    if (post) {
+      // Converting from array to set to array removes duplicates
+      Array.from(new Set(this.connectedUsers[User.parseUsername(channel)]?.nicks)).forEach(e => {
       // Sends message to all nicks so each tab receives the message
-      this.sendMessage({ rawMessage: message, channel: e });
-    });
+        this.sendMessage({ rawMessage: message, channel: e });
+      });
+    }
   }
 
   @action()
diff --git a/src/standalone/App.vue b/src/standalone/App.vue
index c69565b0..98d2258b 100644
--- a/src/standalone/App.vue
+++ b/src/standalone/App.vue
@@ -11,8 +11,6 @@
       workbranch="eternagame.org"
       :inGame="inGame"
       :inForum="inForum" />
-      <input type="checkbox" v-model="inGame">in game<br>
-      <input type="checkbox" v-model="inForum">in forum<br>
   </div>
 </template>
 
@@ -36,7 +34,7 @@
 
     inGame = false;
 
-    inForum = true;
+    inForum = false;
 
     created() {
       if (localStorage.chat_username) {

From 84146c2d5e2dac4fe4879e01aa67dd7f4e7ce0ce Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 13 Jul 2020 12:15:07 -0500
Subject: [PATCH 178/223] Fixed text selection/wrap bug

---
 src/app/components/Input/ScalableInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index b94acdb7..5d85634c 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -173,8 +173,8 @@
       this.value = newText;
       this.$refs.textarea.value = newText;
       this.$refs.textarea.setSelectionRange( // Reselects previously selected text
-        startPosition + inside.length / 2 + 1,
-        endPosition + inside.length / 2 + 1,
+        startPosition + inside.length,
+        endPosition + inside.length,
       );
     }
 

From 94281480c587fe214c535cc70bbe46b414a649e1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 13 Jul 2020 13:20:07 -0500
Subject: [PATCH 179/223] PR requested changes

---
 src/app/App.vue                               | 15 ++++---
 .../components/Connection/ConnectButton.vue   |  9 +---
 .../Header/MinimizationTriangle.vue           | 25 ++++++-----
 .../components/Header/OpenWindowButton.vue    | 15 +++----
 src/app/components/Header/PinButton.vue       | 16 +++----
 src/app/components/Input/EmoticonBar.vue      | 45 +++++++------------
 src/app/components/Input/EmoticonButton.vue   |  4 +-
 .../components/Input/MarkdownWrapButton.vue   | 24 ++--------
 src/app/components/Input/MenuButton.vue       | 31 +++++++------
 src/app/components/Input/ScalableInput.vue    | 27 +++++------
 src/app/components/Input/SendButton.vue       | 11 +++--
 src/app/components/Input/Styles.ts            | 19 ++++++++
 src/app/components/Messages/ActionMenu.vue    |  2 +-
 src/app/components/Messages/PuzzleTooltip.vue |  8 ++--
 src/app/components/Messages/UserMessage.vue   |  8 ++--
 src/app/components/Messages/UserTooltip.vue   |  6 +--
 src/app/components/Messages/Username.vue      |  2 +-
 src/app/components/Panes/Pane.vue             |  4 +-
 .../components/Panes/UnreadMessageBanner.vue  |  4 +-
 .../Slideout/Chat/ChatSelectButton.vue        |  8 ++--
 src/app/components/Slideout/Chat/Splitter.vue | 26 -----------
 .../Slideout/HamburgerMenuButton.vue          | 22 ++++++---
 .../Settings/ColorPicker/ColorSlider.vue      |  8 ++--
 .../Settings/SettingsEnableDisable.vue        | 22 ++++-----
 .../Slideout/Settings/SettingsSection.vue     |  2 +-
 .../Slideout/Settings/SettingsSwitch.vue      | 26 ++++++-----
 .../Slideout/Settings/SettingsTooltip.vue     |  4 +-
 src/app/components/Slideout/Slideout.vue      | 17 ++++---
 .../components/Slideout/SlideoutButton.vue    |  2 +-
 .../Slideout/Users/SlideoutUsername.vue       |  2 +-
 30 files changed, 192 insertions(+), 222 deletions(-)
 create mode 100644 src/app/components/Input/Styles.ts
 delete mode 100644 src/app/components/Slideout/Chat/Splitter.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 21c73652..3f59a925 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -325,19 +325,19 @@
 
   // Other
 
-  @Prop()
+  @Prop({ required: true })
   username!: string;
 
-  @Prop()
+  @Prop({ required: true })
   workbranch!: string;
 
-  @Prop()
+  @Prop({ required: true })
   uid!: string;
 
-  @Prop()
+  @Prop({ default: false })
   inGame !: boolean;
 
-  @Prop()
+  @Prop({ default: false })
   inForum !: boolean;
 
   $refs!: {
@@ -461,6 +461,11 @@
   }
   }
 </script>
+<style lang="scss">
+@import "./assets/_custom.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+</style>
 <style lang="scss" scoped>
 @import "./assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
diff --git a/src/app/components/Connection/ConnectButton.vue b/src/app/components/Connection/ConnectButton.vue
index 407f382e..15749e8d 100644
--- a/src/app/components/Connection/ConnectButton.vue
+++ b/src/app/components/Connection/ConnectButton.vue
@@ -3,7 +3,7 @@
     id="reconnect"
     :class="{active: $vxm.chat.connectionData.tryingToConnect}"
     class="connect-button btn"
-    style="color:white; font-weight:bolder; font-size:13px;"
+    style="color:white; font-weight:bolder; font-size:13px; background-color: $green"
     @click="$vxm.chat.connect"
   >
     Reconnect
@@ -17,13 +17,8 @@
   export default class ConnectButton extends Vue { }
 </script>
 
-<style scoped lang="scss">
-
-@import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
+<style scoped>
 .connect-button {
   width: 100%;
-  background-color:$green;
 }
 </style>
diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 89d2bd29..8916ca0e 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -3,17 +3,14 @@
     :aria-label="label"
     class="minimization-triangle"
     style="float: right;"
-    :class="{'flipped': value && !settings,
-    'settings-flipped': value && settings,
-    'settings':settings}"
+    :class="{
+      'flipped': value && !settings,
+      'settings-flipped': value && settings,
+      'settings':settings,
+      'tabbing': $vxm.chat.tabbing,
+    }"
     @click="$emit('input', !value)"
   >
-    <v-style>
-      button:focus {
-        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-      }
-    </v-style>
   </button>
 </template>
 
@@ -23,11 +20,11 @@
 
   @Component
   export default class MinimizationTriangle extends Vue {
-    @Prop()
+    @Prop({ required: true })
     value!: boolean;
 
-    @Prop()
-    settings !: boolean;
+    @Prop({ default: false })
+    settings : boolean = false;
 
     get label() {
       return `Click to ${this.value ? 'show' : 'hide'} content${this.settings ? ' in settings' : ''}.`;
@@ -72,4 +69,8 @@
   .minimization-triangle:hover {
     cursor: pointer;
   }
+  button:not(.tabbing):focus {
+    border: none;
+    outline: none;
+  }
 </style>
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index ccdf8e34..8586b3f5 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -4,13 +4,8 @@
     style="float: right;"
     @click="$emit('input', !value)"
     :aria-label="`Click to make the chat ${value ? 'fullscreen' : 'normal size'}`"
+    :class="{ tabbing: $vxm.chat.tabbing }"
    >
-   <v-style>
-      button:focus {
-        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-      }
-    </v-style>
   </button>
 </template>
 
@@ -20,8 +15,8 @@
 
   @Component
   export default class OpenWindowButton extends Vue {
-    @Prop()
-    value!: boolean;
+    @Prop({ required: true })
+    value: boolean = false;
   }
 </script>
 
@@ -40,4 +35,8 @@
   .open-window:hover {
     cursor: pointer;
   }
+  button:not(.tabbing):focus {
+    border: none;
+    outline: none;
+  }
 </style>
diff --git a/src/app/components/Header/PinButton.vue b/src/app/components/Header/PinButton.vue
index c0f6351d..235e2171 100644
--- a/src/app/components/Header/PinButton.vue
+++ b/src/app/components/Header/PinButton.vue
@@ -3,15 +3,9 @@
     class="pin-button"
     style="float: right;"
     @click="$emit('input', !value);"
-    :class="{ active: value}"
+    :class="{ active: value, tabbing: $vxm.chat.tabbing}"
     aria-label="`Click to pin viewed messages"
    >
-   <v-style>
-      button:focus {
-        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-      }
-    </v-style>
   </button>
 </template>
 
@@ -21,8 +15,8 @@
 
   @Component
   export default class PinButton extends Vue {
-    @Prop()
-    value!: boolean;
+    @Prop({ required: true })
+    value: boolean = false;
   }
 </script>
 
@@ -45,4 +39,8 @@
   .pin-button.active {
     background-image: url("../../assets/pin.png");
   }
+  button:not(.tabbing):focus {
+    outline: none;
+    border: none;
+  }
 </style>
diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 813a7c28..873b69f1 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -52,6 +52,7 @@
         name="👍"
         styles=""
         @button="select('emoticon');"
+        @close="close"
       />
       <MenuButton
         aria-label="Open markdown toolbar"
@@ -60,6 +61,7 @@
         name="A"
         styles="bold italics underline"
         @button="select('markdown');"
+        @close="close"
       />
       <MenuButton
         aria-label="Open preview toolbar"
@@ -68,6 +70,7 @@
         name="P"
         styles=""
         @button="select('preview');"
+        @close="close"
       />
       <MenuButton
         name="?"
@@ -146,9 +149,7 @@
     menuButtonClicked(button:string) { // Handles button clicks
       switch (button) {
       case 'X':
-        this.markdownSelected = false;
-        this.emoticonsSelected = false;
-        this.previewSelected = false;
+        this.close();
         break;
       case '?':
         this.$emit('md', 'question');
@@ -158,6 +159,12 @@
       this.$emit('update');
     }
 
+    close() {
+      this.markdownSelected = false;
+      this.emoticonsSelected = false;
+      this.previewSelected = false;
+    }
+
     // Changing input
 
     add(emote:string) { // Emits event to MessagePane
@@ -168,7 +175,7 @@
       this.$emit('md', options);
     }
 
-    @Prop()
+    @Prop({ required: true })
     inputValue = '';
 
     @Prop()
@@ -295,31 +302,11 @@
   width: calc(100% - 25px);
   height:25px;
 }
-::-webkit-scrollbar-track {
-  height: 0;
-  width: 0;
-  display:none;
-}
-::-webkit-scrollbar {
-  height: 0;
-  width: 0;
-  display:none;
-}
-::-moz-scrollbar {
-  height: 0;
-  width: 0;
-  display:none;
-}
-::-moz-scrollbar-track {
-  height: 0;
-  width: 0;
-  display:none;
-}
-::-webkit-scrollbar-thumb {
-  height: 0;
-  width: 0;
-  display:none;
-}
+::-webkit-scrollbar-track,
+::-webkit-scrollbar,
+::-moz-scrollbar,
+::-moz-scrollbar-track,
+::-webkit-scrollbar-thumb,
 ::-moz-scrollbar-thumb {
   height: 0;
   width: 0;
diff --git a/src/app/components/Input/EmoticonButton.vue b/src/app/components/Input/EmoticonButton.vue
index 397dab0d..a0e2c0fa 100644
--- a/src/app/components/Input/EmoticonButton.vue
+++ b/src/app/components/Input/EmoticonButton.vue
@@ -7,8 +7,8 @@
   import { Component, Prop, Vue } from 'vue-property-decorator';
   @Component
   export default class EmoticonButton extends Vue {
-    @Prop()
-    emoticon !: string;
+    @Prop({ required: true })
+    emoticon : string = '';
 
     clicked() {
       this.$emit('emote', this.emoticon);
diff --git a/src/app/components/Input/MarkdownWrapButton.vue b/src/app/components/Input/MarkdownWrapButton.vue
index 59b9f8be..da1f5d4f 100644
--- a/src/app/components/Input/MarkdownWrapButton.vue
+++ b/src/app/components/Input/MarkdownWrapButton.vue
@@ -10,10 +10,11 @@
 </template>
 <script lang='ts'>
   import { Component, Prop, Vue } from 'vue-property-decorator';
+  import getStyles from './Styles';
   @Component
   export default class MarkdownWrapButton extends Vue {
-    @Prop()
-    type !: string;
+    @Prop({ required: true })
+    type : string = '';
 
     typeIs(type:string):boolean {
       return this.type.includes(type);
@@ -33,24 +34,7 @@
     }
 
     get style() {
-      const bold = this.typeIs('bold') || this.typeIs('action');
-      const italics = this.typeIs('italics') || this.typeIs('action');
-      const strikethrough = this.typeIs('strikethrough');
-      const code = this.typeIs('code');
-      const link = this.typeIs('link');
-      const cursive = this.typeIs('cursive');
-      const serif = this.typeIs('serif');
-      const highlight = this.typeIs('highlight');
-      let font;
-      if (code) font = 'monospace';
-      if (cursive) font = 'cursive';
-      if (serif) font = 'serif';
-      return {
-        'font-weight': bold ? 'bold' : '',
-        'font-style': italics ? 'italic' : '',
-        'text-decoration': `${strikethrough ? 'line-through' : ''} ${link ? 'underline' : ''}`,
-        'font-family': font,
-      };
+      return getStyles(this.type);
     }
 
     get classes() {
diff --git a/src/app/components/Input/MenuButton.vue b/src/app/components/Input/MenuButton.vue
index f8c2ba5e..6f8ba073 100644
--- a/src/app/components/Input/MenuButton.vue
+++ b/src/app/components/Input/MenuButton.vue
@@ -1,35 +1,30 @@
 <template>
   <button
     class='menu-button'
-    :style="{
-      'font-weight':styles.includes('bold') ? 'bold' : 'normal', /* Applies text styling */
-      'font-style':styles.includes('italics') ? 'italic' : 'normal',
-      'text-decoration':styles.includes('underline') ? 'underline' : 'normal',
-    }"
+    :style="style"
     @click="$emit('button', name)"
+    @dblclick="$emit('close')"
   >
     {{name}}
-    <v-style>
-      .menu-button:focus {
-        outline: {{ tabbing ? '' : 'none !important'}};
-      }
-    </v-style>
   </button>
 </template>
 <script lang='ts'>
   import {
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
+  import getStyles from './Styles';
   @Component
   export default class MenuButton extends Vue {
-    @Prop()
-    name!:string;
+    @Prop({ required: true })
+    name:string = '';
 
-    @Prop()
-    styles!: string;
+    @Prop({ required: true })
+    styles: string = '';
 
-    get tabbing() {
-      return this.$vxm.chat.tabbing;
+    get style() {
+      const normal = getStyles(this.styles);
+      normal.tabbing = this.$vxm.chat.tabbing;
+      return normal;
     }
   }
 </script>
@@ -46,4 +41,8 @@
 .menu-button:hover {
   background-color:#21508c; /* Lightened version of med-dark-blue. Same as input background */
 }
+button:not(.tabbing):focus {
+  outline: none;
+  border: none;
+}
 </style>
diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index 5d85634c..73bb70ec 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -1,10 +1,5 @@
 <template>
   <div style="overflow:hidden; position: relative;">
-    <v-style> <!-- Dynamically add focus ring if tab key is pressed -->
-      .scalable-input:focus {
-        box-shadow: {{bshadow}};
-      }
-    </v-style>
     <textarea
       v-model="value"
       :style="{
@@ -14,6 +9,7 @@
         'font-size': `${fontsize}px`
       }"
       class="scalable-input"
+      :class="{ tabbing: $vxm.chat.tabbing }"
       :disabled="disabled"
       @input="$emit('input', $event.target.value); updateAutocomplete($event)"
       ref="textarea"
@@ -90,15 +86,6 @@
       return this.$vxm.settings.fontSize;
     }
 
-    get bshadow() { // Used to conditionally add focus ring if user has pressed the tab key
-      if (this.$vxm.chat.tabbing) {
-        2;
-      } else {
-        return 'none';
-      }
-      return 'box-shadow: 0px 0px 5px 2px rgba(255,255,255,1);';
-    }
-
     // Puts string at index in another string. Used for /me and /help insertions
     insertString(at:number, str:string) {
       this.$refs.textarea.focus();
@@ -193,8 +180,8 @@
       this.$nextTick(() => this.$forceUpdate());
     }
 
-    @Prop()
-    disabled!: boolean;
+    @Prop({ default: false })
+    disabled: boolean = false;
 
     value = '';
 
@@ -328,6 +315,14 @@
     width:calc(100% - 2px) !important;
   }
 
+  .scalable-input:focus {
+    box-shadow: 0px 0px 5px 2px rgba(255,255,255,1);
+  }
+
+  .scalable-input:not(.tabbing):focus {
+    box-shadow: none;
+  }
+
   .scalable-input,
   .scalable-input-hidden {
     min-height: 24px;
diff --git a/src/app/components/Input/SendButton.vue b/src/app/components/Input/SendButton.vue
index 80351be4..046960c3 100644
--- a/src/app/components/Input/SendButton.vue
+++ b/src/app/components/Input/SendButton.vue
@@ -1,14 +1,9 @@
 <template>
   <button
     class="send-button"
-    :class="{animated: animationValue}"
+    :class="{animated: animationValue, tabbing: $vxm.chat.tabbing}"
     @click="sendMessage"
   >
-    <v-style>
-      .send-button:focus {
-        outline: {{ $vxm.chat.tabbing ? '' : 'none'}} !important;
-      }
-    </v-style>
   </button>
 </template>
 
@@ -43,4 +38,8 @@
   .send-button:active {
     transform:translateX(3px);
   }
+  .send-button:not(.tabbing):focus {
+    outline: none;
+    border: none;
+  }
 </style>
diff --git a/src/app/components/Input/Styles.ts b/src/app/components/Input/Styles.ts
new file mode 100644
index 00000000..17fbefbe
--- /dev/null
+++ b/src/app/components/Input/Styles.ts
@@ -0,0 +1,19 @@
+export default function getStyles(type: string): { [name:string]:string | boolean} {
+  const bold = type.includes('bold') || type.includes('action');
+  const italics = type.includes('italics') || type.includes('action');
+  const strikethrough = type.includes('strikethrough');
+  const code = type.includes('code');
+  const link = type.includes('link') || type.includes('underline');
+  const cursive = type.includes('cursive');
+  const serif = type.includes('serif');
+  let font;
+  if (code) font = 'monospace';
+  if (cursive) font = 'cursive';
+  if (serif) font = 'serif';
+  return {
+    'font-weight': bold ? 'bold' : '',
+    'font-style': italics ? 'italic' : '',
+    'text-decoration': `${strikethrough ? 'line-through' : ''} ${link ? 'underline' : ''}`,
+    'font-family': font || 'inherit',
+  };
+}
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 717b04e8..d9d94c57 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -90,7 +90,7 @@
       menu: HTMLFormElement;
     };
 
-    @Prop()
+    @Prop({ required: true })
     message!: Message;
 
     get user(): User {
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index 3ec64604..769a340e 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -20,14 +20,14 @@
   } from 'vue-property-decorator';
   @Component
   export default class PuzzleTooltip extends Vue {
-    @Prop()
-    pid !: number;
+    @Prop({ required: true })
+    pid : number = 0;
 
     @Prop()
-    top!: number;
+    top: number = 0;
 
     @Prop()
-    left!: number;
+    left: number = 0;
 
     $refs !: {
       container: HTMLDivElement;
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index aeb0f20a..3e2677c3 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -86,7 +86,7 @@
     hover = false;
 
     @Prop({ default: false })
-    private isHistory!: boolean;
+    private isHistory: boolean = false;
 
     get isNotice() {
       return this.message.isNotice;
@@ -96,7 +96,7 @@
 
     pid !: number;
 
-    @Prop()
+    @Prop({ required: true })
     private message!: Message;
 
     get isAction() {
@@ -262,8 +262,8 @@
       return message.match(/\[#(.+,)*.+\]\r?$/);
     }
 
-    @Prop()
-    messageIndex !: number;
+    @Prop({ required: true })
+    messageIndex : number = 0;
 
     get sameUserAsPrevious() {
       const channelName = this.message.target;
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index d8ab36e2..28658612 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -22,14 +22,14 @@
   import User from '@/types/user';
   @Component
   export default class UserTooltip extends Vue {
-    @Prop()
+    @Prop({ required: true })
     user!: User;
 
     @Prop()
-    top!: number;
+    top: number = 0;
 
     @Prop()
-    left!: number;
+    left: number = 0;
 
     desc = 'This user has not added a description to their profile';
 
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 1d69a45d..2a6200d3 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -44,7 +44,7 @@
     },
   })
   export default class Username extends Vue {
-    @Prop()
+    @Prop({ required: true })
     user!: User;
 
     @Prop()
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 887dee2a..9d116b93 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -50,8 +50,8 @@
 
     footerHeight: number = 0;
 
-    @Prop()
-    visibility!: boolean;
+    @Prop({ required: true })
+    visibility: boolean = true;
 
     scrollHandle(evt: any) {
       const { container } = this;
diff --git a/src/app/components/Panes/UnreadMessageBanner.vue b/src/app/components/Panes/UnreadMessageBanner.vue
index b522d0d0..d6a8b02a 100644
--- a/src/app/components/Panes/UnreadMessageBanner.vue
+++ b/src/app/components/Panes/UnreadMessageBanner.vue
@@ -10,8 +10,8 @@
 
   @Component
   export default class UnreadMessageBanner extends Vue {
-    @Prop()
-    messages !: number;
+    @Prop({ required: true })
+    messages : number = 0;
   }
 </script>
 <style lang="scss">
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index cbf109a5..7d10526e 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -22,11 +22,11 @@
 
   @Component
   export default class ChatSelectButton extends Vue {
-    @Prop()
-    name!: string;
+    @Prop({ required: true })
+    name: string = '';
 
-    @Prop()
-    description!: string;
+    @Prop({ required: true })
+    description: string = '';
 
     get isActive() {
       return this.$vxm.chat.chatChannel.includes(this.name);
diff --git a/src/app/components/Slideout/Chat/Splitter.vue b/src/app/components/Slideout/Chat/Splitter.vue
deleted file mode 100644
index b5332948..00000000
--- a/src/app/components/Slideout/Chat/Splitter.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <div class="splitter" /> <!--- Just a filled-in div --->
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-
-
-  @Component
-  export default class Splitter extends Vue {
-  }
-</script>
-
-<style lang="scss" scoped>
-  .splitter {
-    height:1px;
-    width:calc(100% - 10px);
-    padding:0px;
-    padding-right:5px;
-    padding-left:5px;
-    background-color:#7b8a8b;
-    position:relative;
-    margin:0px;
-    top:5px;
-  }
-</style>
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index bdd7d311..cdfc2fe6 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -2,7 +2,11 @@
   <button
     class="hamburger"
     @click="$emit('input', !value)"
-    :class="{notified:notification, mentioned:mention}"
+    :class="{
+      notified:notification,
+      mentioned:mention,
+      tabbing: $vxm.chat.tabbing
+    }"
     :aria-label="`Click to ${this.value ? 'close' : 'open'} the slideout`"
   >
     <v-style>
@@ -20,14 +24,14 @@
 
   @Component
   export default class HamburgerMenuButton extends Vue {
-    @Prop()
-    value!: boolean;
+    @Prop({ required: true })
+    value: boolean = false;
 
-    @Prop()
-    notification!: boolean;
+    @Prop({ default: false })
+    notification: boolean = false;
 
-    @Prop()
-    mention!: boolean;
+    @Prop({ default: false })
+    mention: boolean = false;
   }
 </script>
 <style scoped>
@@ -50,4 +54,8 @@
 .mentioned { /* Mentioned hamburger icon */
   background-image: url("../../assets/hamburger-mention.png") !important;
 }
+button:not(.tabbing):focus {
+  outline: none;
+  border: none;
+}
 </style>
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index 8da2437b..0861bcd9 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -24,14 +24,14 @@
   export default class ColorSlider extends Vue {
     sliderValue = 127;
 
-    @Prop() // Starting color for slider gradient
+    @Prop({ required: true }) // Starting color for slider gradient
     gradientStart !: string;
 
-    @Prop() // Ending color for slider gradient
+    @Prop({ required: true }) // Ending color for slider gradient
     gradientEnd !: string;
 
-    @Prop() // Red, green, or blue. Used to fetch value from localStorage/vuex
-    colorID !: string;
+    @Prop({ required: true }) // Red, green, or blue. Used to fetch value from localStorage/vuex
+    colorID : string = 'red';
 
     defaultColors = ['#f3a891', '#f3c491', '#f3df91', '#e2f391', '#bef391', '#91f3bc', '#f391ba', '#f39196'];
 
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index e554fb80..b241e448 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -1,10 +1,10 @@
 <template>
-  <label class="switch" :style="{ width: `${width || 80}px` }" :aria-label="label">
+  <label class="switch" :style="{ width: `${width}px` }" :aria-label="label">
     <button @click="$emit('input', false)" :disabled="value === false" id="disable">
-      {{offText || 'OFF'}}
+      {{offText}}
     </button>
     <button @click="$emit('input', true)" :disabled="value === true" id="enable">
-      {{onText || 'ON'}}
+      {{onText}}
     </button>
   </label>
 </template>
@@ -14,19 +14,19 @@
   @Component
   export default class SettingsEnableDisable extends Vue {
     @Prop()
-    value !: boolean | null;
+    value : boolean | null = null;
 
-    @Prop()
-    offText !: string;
+    @Prop({ default: 'OFF' })
+    offText : string = 'OFF';
 
-    @Prop()
-    onText !: string;
+    @Prop({ default: 'ON' })
+    onText: string = 'ON';
 
-    @Prop()
-    width !: number;
+    @Prop({ default: 80 })
+    width : number = 80;
 
     get label() {
-      return `Three state switch in state ${this.value === true ? (this.onText || 'on') : (this.offText || 'off') || 'neither'}; possible states ${this.onText || 'on'}, ${this.offText || 'off'}, and neither`;
+      return `Three state switch in state ${this.value === true ? (this.onText) : (this.offText) || 'neither'}; possible states ${this.onText}, ${this.offText}, and neither`;
     }
   }
 </script>
diff --git a/src/app/components/Slideout/Settings/SettingsSection.vue b/src/app/components/Slideout/Settings/SettingsSection.vue
index 5ae5ecbf..d05a1598 100644
--- a/src/app/components/Slideout/Settings/SettingsSection.vue
+++ b/src/app/components/Slideout/Settings/SettingsSection.vue
@@ -30,7 +30,7 @@
   export default class SettingsSection extends Vue {
     open = false;
 
-    @Prop()
+    @Prop({ required: true })
     title !: string;
 
     mounted() {
diff --git a/src/app/components/Slideout/Settings/SettingsSwitch.vue b/src/app/components/Slideout/Settings/SettingsSwitch.vue
index 3ffc8d6d..596fa1eb 100644
--- a/src/app/components/Slideout/Settings/SettingsSwitch.vue
+++ b/src/app/components/Slideout/Settings/SettingsSwitch.vue
@@ -4,16 +4,12 @@
     @keypress.enter="$emit('input', !$event.target.checked)"
     :aria-label="label"
     >
-    <v-style>
-      input:focus:checked + .slider {
-        outline: {{$vxm.chat.tabbing ? 'green 1px solid' : ''}};
-      }
-
-      input:focus:not(:checked) + .slider {
-        outline: {{$vxm.chat.tabbing ? 'gray 1px solid' : '' }};
-      }
-    </v-style>
-    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+    <input
+      type="checkbox"
+      :checked="value"
+      @change="$emit('input', $event.target.checked)"
+      :class="{ tabbing: $vxm.chat.tabbing }"
+    >
     <span class="slider round" />
   </label>
 </template>
@@ -22,7 +18,7 @@
 
   @Component
   export default class SettingsSwitch extends Vue {
-    @Prop()
+    @Prop({ required: true })
     value !: boolean;
 
     get label() {
@@ -86,4 +82,12 @@ input:checked + .slider:before {
   -ms-transform: translateX(16px);
   transform: translateX(16px);
 }
+
+input.tabbing:focus:checked + .slider {
+  outline: green 1px solid;
+}
+
+input.tabbing:focus:not(:checked) + .slider {
+  outline: gray 1px solid;
+}
 </style>
diff --git a/src/app/components/Slideout/Settings/SettingsTooltip.vue b/src/app/components/Slideout/Settings/SettingsTooltip.vue
index 8d786520..ae79841c 100644
--- a/src/app/components/Slideout/Settings/SettingsTooltip.vue
+++ b/src/app/components/Slideout/Settings/SettingsTooltip.vue
@@ -7,8 +7,8 @@
 
   @Component
   export default class SettingsTooltip extends Vue {
-    @Prop()
-    text !: string;
+    @Prop({ required: true })
+    text : string = '';
   }
 </script>
 <style>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 4af2a141..cb0a7dd6 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -5,12 +5,6 @@
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
     <HamburgerMenuButton v-model="checked" :notification="notifications" :mention="mentions"/>
-    <v-style>
-      .slideout-button:focus {
-        border: {{tabbing ? 'solid white 1px' : 'none !important'}};
-        outline: {{tabbing ? 'solid white 1px' : 'none !important'}};
-      }
-    </v-style>
     <span v-show="checked">
       <span id="slideout-header">
         <SlideoutButton
@@ -18,18 +12,21 @@
           name="chat"
           @input="activeTab = 0"
           class='slideout-button'
+          :class="{tabbing: $vxm.chat.tabbing}"
         />
         <SlideoutButton
           name="user"
           :selected="userSelected"
           @input="activeTab = 1"
           class='slideout-button'
+          :class="{tabbing: $vxm.chat.tabbing}"
         />
         <SlideoutButton
           name="settings"
           :selected="settingsSelected"
           @input="activeTab = 2"
           class='slideout-button'
+          :class="{tabbing: $vxm.chat.tabbing}"
         />
       </span>
       <SlideoutChats
@@ -67,7 +64,7 @@
     // For hamburger
     checked = false;
 
-    @Prop() // Whether chat is minimized
+    @Prop({ required: true }) // Whether chat is minimized
     minimizedValue !: boolean;
 
     get tabbing() { // If the tab key has been pressed - used to conditionally enable focus rings
@@ -195,4 +192,10 @@
   width: calc(100% - 30px); /* Makes sure there is room to fill */
   justify-content: space-evenly; /* Fills the room */
 }
+.slideout-button.tabbing:focus {
+  outline: solid white 1px;
+}
+.slideout-button:focus {
+  outline: none;
+}
 </style>
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 0a8aeb73..1d8650bc 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -19,7 +19,7 @@
 
   @Component
   export default class SlideoutButton extends Vue {
-    @Prop()
+    @Prop({ required: true })
     name!: string;
 
     @Prop({ required: true })
diff --git a/src/app/components/Slideout/Users/SlideoutUsername.vue b/src/app/components/Slideout/Users/SlideoutUsername.vue
index 77923d2b..e21772cb 100644
--- a/src/app/components/Slideout/Users/SlideoutUsername.vue
+++ b/src/app/components/Slideout/Users/SlideoutUsername.vue
@@ -41,7 +41,7 @@
     },
   })
   export default class SlideoutUsername extends Vue {
-    @Prop()
+    @Prop({ required: true })
     user !: User;
 
     hover = false;

From 7d0dd0143c2c8dce89e01013d6c43da7688267ae Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 13 Jul 2020 13:53:57 -0500
Subject: [PATCH 180/223] Fixed bugs caused by previous commit

---
 src/app/App.vue                               |   5 +-
 .../Header/MinimizationTriangle.vue           |   2 +-
 .../components/Header/OpenWindowButton.vue    |   2 +-
 src/app/components/Header/PinButton.vue       |   2 +-
 src/app/components/Input/EmoticonBar.vue      |   4 +-
 src/app/components/Input/EmoticonButton.vue   |   2 +-
 .../components/Input/MarkdownWrapButton.vue   |   2 +-
 src/app/components/Input/MenuButton.vue       |   4 +-
 src/app/components/Input/ScalableInput.vue    |   2 +-
 src/app/components/Messages/PuzzleTooltip.vue |   8 +-
 src/app/components/Messages/UserMessage.vue   |   4 +-
 src/app/components/Messages/UserTooltip.vue   |  10 +-
 src/app/components/Panes/Pane.vue             |   2 +-
 .../components/Panes/UnreadMessageBanner.vue  |   2 +-
 .../Slideout/Chat/ChatSelectButton.vue        |   4 +-
 .../Slideout/HamburgerMenuButton.vue          |   6 +-
 .../Settings/ColorPicker/ColorSlider.vue      |   2 +-
 .../Settings/SettingsEnableDisable.vue        |  10 +-
 .../Slideout/Settings/SettingsTooltip.vue     |   2 +-
 src/app/store/chat.vuex.ts                    | 121 +-----------------
 20 files changed, 37 insertions(+), 159 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 3f59a925..dd99d70e 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -139,7 +139,7 @@
     if (this.fullSize === false) {
       // Scrolls down when the chat is brought back to normal size
       if (this.$refs.messagepanes && this.$refs.messagepanes[this.activeTab]) {
-      this.$refs.messagepanes[this.activeTab].onContentChanged();
+        this.$refs.messagepanes[this.activeTab].onContentChanged();
       }
     }
   }
@@ -157,9 +157,6 @@
 
   @Watch('currentTab')
   loadHistory() { // Load history when tab changed
-    if (this.currentTab === 'ChatHelper') {
-      localStorage.chat_viewedTutorial = true;
-    }
     // Don't put duplicates of existing history messages
     if (this.$vxm.chat.channels[this.currentTab]!.postedMessages.length <= 50) {
       this.$vxm.chat.loadMessagesForChannel(this.currentTab); // Load messages
diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 8916ca0e..6c3b20d6 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -24,7 +24,7 @@
     value!: boolean;
 
     @Prop({ default: false })
-    settings : boolean = false;
+    settings !: boolean;
 
     get label() {
       return `Click to ${this.value ? 'show' : 'hide'} content${this.settings ? ' in settings' : ''}.`;
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index 8586b3f5..44fd7391 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -16,7 +16,7 @@
   @Component
   export default class OpenWindowButton extends Vue {
     @Prop({ required: true })
-    value: boolean = false;
+    value !: boolean;
   }
 </script>
 
diff --git a/src/app/components/Header/PinButton.vue b/src/app/components/Header/PinButton.vue
index 235e2171..4a4934e8 100644
--- a/src/app/components/Header/PinButton.vue
+++ b/src/app/components/Header/PinButton.vue
@@ -16,7 +16,7 @@
   @Component
   export default class PinButton extends Vue {
     @Prop({ required: true })
-    value: boolean = false;
+    value !: boolean;
   }
 </script>
 
diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 873b69f1..4624da3f 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -176,9 +176,9 @@
     }
 
     @Prop({ required: true })
-    inputValue = '';
+    inputValue !: string;
 
-    @Prop()
+    @Prop({ default: [0, 0] })
     selection !: number[];
 
     get inputHTML() {
diff --git a/src/app/components/Input/EmoticonButton.vue b/src/app/components/Input/EmoticonButton.vue
index a0e2c0fa..4e675787 100644
--- a/src/app/components/Input/EmoticonButton.vue
+++ b/src/app/components/Input/EmoticonButton.vue
@@ -8,7 +8,7 @@
   @Component
   export default class EmoticonButton extends Vue {
     @Prop({ required: true })
-    emoticon : string = '';
+    emoticon !: string;
 
     clicked() {
       this.$emit('emote', this.emoticon);
diff --git a/src/app/components/Input/MarkdownWrapButton.vue b/src/app/components/Input/MarkdownWrapButton.vue
index da1f5d4f..0d57f838 100644
--- a/src/app/components/Input/MarkdownWrapButton.vue
+++ b/src/app/components/Input/MarkdownWrapButton.vue
@@ -14,7 +14,7 @@
   @Component
   export default class MarkdownWrapButton extends Vue {
     @Prop({ required: true })
-    type : string = '';
+    type !: string;
 
     typeIs(type:string):boolean {
       return this.type.includes(type);
diff --git a/src/app/components/Input/MenuButton.vue b/src/app/components/Input/MenuButton.vue
index 6f8ba073..1c9b81a4 100644
--- a/src/app/components/Input/MenuButton.vue
+++ b/src/app/components/Input/MenuButton.vue
@@ -16,10 +16,10 @@
   @Component
   export default class MenuButton extends Vue {
     @Prop({ required: true })
-    name:string = '';
+    name !: string;
 
     @Prop({ required: true })
-    styles: string = '';
+    styles !: string;
 
     get style() {
       const normal = getStyles(this.styles);
diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index 73bb70ec..664926fb 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -181,7 +181,7 @@
     }
 
     @Prop({ default: false })
-    disabled: boolean = false;
+    disabled !: boolean;
 
     value = '';
 
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index 769a340e..4f952626 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -23,11 +23,11 @@
     @Prop({ required: true })
     pid : number = 0;
 
-    @Prop()
-    top: number = 0;
+    @Prop({ default: 0 })
+    top !: number;
 
-    @Prop()
-    left: number = 0;
+    @Prop({ default: 0 })
+    left !: number;
 
     $refs !: {
       container: HTMLDivElement;
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 3e2677c3..d5f7fa6a 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -86,7 +86,7 @@
     hover = false;
 
     @Prop({ default: false })
-    private isHistory: boolean = false;
+    private isHistory !: boolean;
 
     get isNotice() {
       return this.message.isNotice;
@@ -263,7 +263,7 @@
     }
 
     @Prop({ required: true })
-    messageIndex : number = 0;
+    messageIndex !: number;
 
     get sameUserAsPrevious() {
       const channelName = this.message.target;
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 28658612..75b466a3 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -23,13 +23,13 @@
   @Component
   export default class UserTooltip extends Vue {
     @Prop({ required: true })
-    user!: User;
+    user !: User;
 
-    @Prop()
-    top: number = 0;
+    @Prop({ default: 0 })
+    top !: number;
 
-    @Prop()
-    left: number = 0;
+    @Prop({ default: 0 })
+    left !: number;
 
     desc = 'This user has not added a description to their profile';
 
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 9d116b93..f330fa70 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -51,7 +51,7 @@
     footerHeight: number = 0;
 
     @Prop({ required: true })
-    visibility: boolean = true;
+    visibility !: boolean;
 
     scrollHandle(evt: any) {
       const { container } = this;
diff --git a/src/app/components/Panes/UnreadMessageBanner.vue b/src/app/components/Panes/UnreadMessageBanner.vue
index d6a8b02a..03174826 100644
--- a/src/app/components/Panes/UnreadMessageBanner.vue
+++ b/src/app/components/Panes/UnreadMessageBanner.vue
@@ -11,7 +11,7 @@
   @Component
   export default class UnreadMessageBanner extends Vue {
     @Prop({ required: true })
-    messages : number = 0;
+    messages !: number;
   }
 </script>
 <style lang="scss">
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index 7d10526e..71f2ab7a 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -23,10 +23,10 @@
   @Component
   export default class ChatSelectButton extends Vue {
     @Prop({ required: true })
-    name: string = '';
+    name !: string;
 
     @Prop({ required: true })
-    description: string = '';
+    description !: string;
 
     get isActive() {
       return this.$vxm.chat.chatChannel.includes(this.name);
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index cdfc2fe6..235aa4a6 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -25,13 +25,13 @@
   @Component
   export default class HamburgerMenuButton extends Vue {
     @Prop({ required: true })
-    value: boolean = false;
+    value!: boolean;
 
     @Prop({ default: false })
-    notification: boolean = false;
+    notification!: boolean;
 
     @Prop({ default: false })
-    mention: boolean = false;
+    mention!: boolean;
   }
 </script>
 <style scoped>
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index 0861bcd9..73fc5e6f 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -31,7 +31,7 @@
     gradientEnd !: string;
 
     @Prop({ required: true }) // Red, green, or blue. Used to fetch value from localStorage/vuex
-    colorID : string = 'red';
+    colorID !: string;
 
     defaultColors = ['#f3a891', '#f3c491', '#f3df91', '#e2f391', '#bef391', '#91f3bc', '#f391ba', '#f39196'];
 
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index b241e448..32b8e72e 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -13,17 +13,17 @@
 
   @Component
   export default class SettingsEnableDisable extends Vue {
-    @Prop()
-    value : boolean | null = null;
+    @Prop({ required: true })
+    value !: boolean | null;
 
     @Prop({ default: 'OFF' })
-    offText : string = 'OFF';
+    offText !: string;
 
     @Prop({ default: 'ON' })
-    onText: string = 'ON';
+    onText !: string;
 
     @Prop({ default: 80 })
-    width : number = 80;
+    width !: number;
 
     get label() {
       return `Three state switch in state ${this.value === true ? (this.onText) : (this.offText) || 'neither'}; possible states ${this.onText}, ${this.offText}, and neither`;
diff --git a/src/app/components/Slideout/Settings/SettingsTooltip.vue b/src/app/components/Slideout/Settings/SettingsTooltip.vue
index ae79841c..5d8b6688 100644
--- a/src/app/components/Slideout/Settings/SettingsTooltip.vue
+++ b/src/app/components/Slideout/Settings/SettingsTooltip.vue
@@ -8,7 +8,7 @@
   @Component
   export default class SettingsTooltip extends Vue {
     @Prop({ required: true })
-    text : string = '';
+    text !: string;
   }
 </script>
 <style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index d1c36f64..bc9b12e8 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -620,119 +620,6 @@ export default class ChatModule extends VuexModule {
         },
       });
     });
-    if (localStorage && !localStorage.chat_viewedTutorial) {
-      this.promptTutorial();
-    }
-    this.postToQuery({
-      message: 'help',
-      channel: 'ChatHelper',
-    });
-  }
-
-  @action()
-  async promptTutorial() {
-    this.postAsTutorial('Hi! I\'m ChatHelper, a bot designed to show you the features and help you navigate the Eterna chat. Would you like to begin the tutorial?');
-    this.lastMessage = 'tutorial_begin?';
-  }
-
-  lastMessage = '';
-
-  @action()
-  async postAsTutorial(msg: string) {
-    if (!this.channels.ChatHelper) {
-      Vue.set(this.channels, 'ChatHelper', {
-        name: 'ChatHelper',
-        postedMessages: [],
-        maxHistoryMessages: 50,
-        notifications: false,
-        notificationsEnabled: false,
-        mentioned: false,
-        typing: [],
-        banned: BanStatus.BAN_STATUS_NORMAL,
-      });
-    }
-    this.channels.ChatHelper?.postedMessages.push(new Message(msg, this.nick, new User('ChatHelper')));
-  }
-
-  @action()
-  async tutorial() {
-    switch (this.lastMessage) {
-      case 'tutorial_begin?':
-        this.postAsTutorial('A lot of the chat\'s features are located in the **slideout**. To open the slideout, click the three bars in the top left.');
-        this.postAsTutorial('Continue?');
-        this.lastMessage = 'continue_chat?';
-        break;
-      case 'continue_chat?':
-        this.postAsTutorial('You can change channels in the slideout by entering the **chat** tab of the slideout. Click the # button in the slideout at the top. To change channels, click on one of the channels.');
-        this.postAsTutorial('You can also add new channels in the chat tab by scrolling to the bottom, entering the channel name in the text box, and clicking the + button. To remove a channel you\'ve added, hover over it and click the X button.');
-        this.postAsTutorial('Continue?');
-        this.lastMessage = 'continue_users?';
-        break;
-      case 'continue_users?':
-        this.postAsTutorial('You view and manage users in the slideout by entering the **users** tab of the slideout. Click the users button in the slideout at the top.');
-        this.postAsTutorial('In the users tab, you can see a list of online users, how many there are. If a user is away, a yellow dot appears before their name. Hover over the dot to view the reason they are away. Hovering over the username brings up a tooltip with useful information about the user.');
-        this.postAsTutorial('When you hover over a user, three dots appear to the right of their name. If you click on those dots, a context menu appears. The context menu allows you to ignore, report, and private message the user.');
-        this.postAsTutorial('Continue?');
-        this.lastMessage = 'continue_settings?';
-        break;
-      case 'continue_settings?':
-        this.postAsTutorial('You customize the chat in the **settings** tab of the slideout. Click the gear icon in the slideout at the top.');
-        this.postAsTutorial('To open a settings category, click the arrow next to the category name to show the contents. To hide them, click the arrow again.');
-        this.postAsTutorial('Hover over the circled question mark next to a setting to learn more about the setting.');
-        this.postAsTutorial('Continue?');
-        this.lastMessage = 'continue_message?';
-        break;
-      case 'continue_message?':
-        this.postAsTutorial('If you hover over a user message in a chat channel, the three dots appear to the right. Click on them to open up the context menu. In this context menu, you can ignore, report, and private message the user and copy or pin the message.');
-        this.postAsTutorial('Continue?');
-        this.lastMessage = 'continue_toolbar?';
-        break;
-      case 'continue_toolbar?':
-        this.postAsTutorial('The toolbar is an easy way to add emoticons and formatting to your text. The toolbar has three menus - one for emoticons, one for markdown, and one for the preview.');
-        this.postAsTutorial('The emoticons menu of the toolbar adds emoticons to your text. You can choose from several preset emoticons and three custom emoticons of your choice. For more information, see the toolbar features category in the settings tab.');
-        this.postAsTutorial('The markdown menu of the toolbar makes it easy to format your text. To use it, just highlight some text or place your cursor where you want the formatting. Then, click one of the buttons to add the formatting to your selection or your cursor position. You can rearrange the markdown buttons.');
-        this.postAsTutorial('The preview menu of the toolbar shows you what your text will look like when you send it. It displays your formatted message. It\'s useful for making sure you\'ve used the right markdown styles before you send the message.');
-        this.postAsTutorial('Continue?');
-        this.lastMessage = 'final?';
-        break;
-      case 'final?':
-        this.postAsTutorial('You\'ve reached the end of the tutorial. Thank you! If you want help with a specific topic, just reply to me with `help <topic>`, just `help` or use the `/help` chat command. Please message @Ahalb or one of our moderators if you have any questions, comments, or concerns.');
-        this.lastMessage = '';
-        break;
-      default: break;
-    }
-  }
-
-  @action()
-  async onChatHelperMessage(msg: string) {
-    if (msg.toLowerCase().match(/(yes|true|on|ok)/)) {
-      this.tutorial();
-      return;
-    }
-    if (msg.toLowerCase().includes('begin tutorial')) {
-      this.lastMessage = 'tutorial_begin?';
-      this.tutorial();
-    }
-    if (msg.startsWith('help')) {
-      const params = msg.substring(4).trim();
-      switch (params) {
-        case 'pin':
-        case 'pins':
-          this.postAsTutorial('Pins allow you to save messages to view later. To pin a message, open the context menu for the message and click pin message. To view only pins for a channel, click the pin button at the top. To view all messages, click the pin button again. To unpin a message, click unpin message in the context menu');
-          break;
-        case 'notification':
-        case 'notifications':
-          this.postAsTutorial('You receive notifications when a message is sent in a channel you are not viewing. When you have notifications, and indicator appears in the page title, the slideout button has a red bubble, and the name of the notified channel in the slideout is red.');
-          this.postAsTutorial('If someone mentions your name, you are also notified. The slideout button gets an orange bubble and the name of the mentioned channel in the slideout turns orange.');
-          this.postAsTutorial('You can customize the page title indicator and which channels receive notifications in the settings tab of the slideout');
-          break;
-        case 'markdown':
-          this.postAsTutorial('Markdown is a system of text formatting. You can use markdown in your messages to send bold text, links, quotes, and more. To use markdown styles, type them in your message or use the toolbar');
-          this.postAsTutorial('The chat supports the following markdown styles: bold, italics, bold italics, highlights, links, strikethrough, code, actions, quotes, and two fonts');
-          break;
-        default: this.postAsTutorial('I can offer specific help with pins, notifications, and markdown. To view these guides, use `help <topic>` (example: `help pins`).');
-      }
-    }
   }
 
   @action()
@@ -740,7 +627,6 @@ export default class ChatModule extends VuexModule {
     // Safeguard to make sure this doesn't go in a channel with others while I test
     if (channel === '#general' || channel === '#help' || channel === '#labs') return;
     if (this.channels[channel]?.typing.includes(this.username)) return;
-    if (channel !== 'ChatHelper') this.client?.action(channel, 'is typing...');
     this.channels[channel]?.typing.push(this.username);
   }
 
@@ -749,7 +635,6 @@ export default class ChatModule extends VuexModule {
   async stopTyping(channel: string) {
     // Safeguard to make sure this doesn't go in a channel with others while I test
     if (channel === '#general' || channel === '#help' || channel === '#labs') return;
-    if (channel !== 'ChatHelper') this.client?.action(channel, 'is not typing...');
     this.channels[channel]!.typing = this.channels[channel]!.typing
       .filter(e => e !== this.username);
   }
@@ -1639,11 +1524,7 @@ export default class ChatModule extends VuexModule {
   async postToQuery({ message, channel }: { message:string, channel:string}) {
     /* Splits argument into message and channel
     Will only cause issues if people are putting | in their nick */
-    let post = true;
-    if (channel === 'ChatHelper') {
-      post = false;
-      this.onChatHelperMessage(message);
-    }
+    const post = true;
     if (this.channels[User.parseUsername(channel)] === undefined) {
       // If the channel doesn't exist, make a new one
       Vue.set(this.channels, User.parseUsername(channel), {

From 9b51b58308639e85f8c58ac50e37c341a1adb856 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 14 Jul 2020 15:51:23 -0500
Subject: [PATCH 181/223] PR requested changes

---
 src/app/App.vue                               |  49 ++---
 src/app/assets/_custom.scss                   |   3 +
 .../components/Connection/ConnectButton.vue   |   2 +-
 src/app/components/DraggableDiv.vue           | 190 +++++++++---------
 .../Header/MinimizationTriangle.vue           |   5 -
 .../components/Header/OpenWindowButton.vue    |   5 -
 src/app/components/Header/PinButton.vue       |   6 +-
 src/app/components/Input/MenuButton.vue       |   5 -
 src/app/components/Input/SendButton.vue       |   6 +-
 src/app/components/LinkModal.vue              |   7 +-
 src/app/components/Messages/ActionMenu.vue    |   7 +-
 src/app/components/Messages/MessageGroup.vue  |  28 +++
 .../Messages/PrivateMessageModal.vue          |  16 +-
 src/app/components/Messages/PuzzleTooltip.vue |   2 +-
 src/app/components/Messages/UserMessage.vue   |  59 +++---
 src/app/components/OperLogin.vue              |   9 +-
 src/app/components/Panes/MessagePane.vue      |  46 ++++-
 .../Slideout/HamburgerMenuButton.vue          |  11 -
 .../Sections/NotificationsSection.vue         |  12 +-
 .../Settings/Sections/StatusSection.vue       |   8 +-
 .../Settings/SettingsEnableDisable.vue        |  17 +-
 src/app/components/Slideout/Slideout.vue      |   9 -
 src/app/store/chat.vuex.ts                    |  35 ----
 src/app/tools/Markdown.ts                     |  13 ++
 src/standalone/App.vue                        |   7 +-
 25 files changed, 282 insertions(+), 275 deletions(-)
 create mode 100644 src/app/components/Messages/MessageGroup.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index dd99d70e..6aac7ec8 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -3,11 +3,15 @@
     id="eterna-chat"
     style="overflow-y: hidden"
     :style="chatStyle"
-    :class="{ eternaChatFull: fullSized, eternaChatNormal: !fullSized, minimizedChat: minimized }"
+    :class="{
+      eternaChatFull: fullSized,
+      eternaChatNormal: !fullSized,
+      minimizedChat: minimized,
+      tabbing: $vxm.chat.tabbing
+    }"
     :enabled="!fullSize /* Disables dragging when chat is fullsize*/"
     v-resize:debounce="resized"
-    :inGame="inGame"
-    :inForum="inForum"
+    :positionBasis="positionBasis"
   >
     <template slot="main">
       <slideout
@@ -235,22 +239,18 @@
 
   // Drag and resize
 
-  get gamePosition() {
-    return this.$vxm.chat.inGamePosition;
-  }
-
   get positionStyle() {
     const style: { [key:string]: string} = {};
-    let basis;
-    if (this.inGame) basis = this.gamePosition;
-    else if (this.inForum) basis = this.forumPosition;
-    else basis = this.initialPosition;
-    if (basis[0] === 'l') {
+    if (!localStorage) return style;
+    if (!localStorage[`chat_${this.positionBasis}Position`]) return style;
+    const basis = JSON.parse(localStorage[`chat_${this.positionBasis}Position`]);
+    if (!basis) return style;
+    if (basis[0] === 'left') {
       style.left = `${basis[1]}px`;
     } else {
       style.right = `${basis[1]}px`;
     }
-    if (basis[2] === 't') {
+    if (basis[2] === 'top') {
       style.top = `${basis[3]}px`;
     } else {
       style.bottom = `${basis[3]}px`;
@@ -265,14 +265,6 @@
     };
   }
 
-  get initialPosition() {
-    return this.$vxm.chat.initialPosition;
-  }
-
-  get forumPosition() {
-    return this.$vxm.chat.forumPosition;
-  }
-
   get initialSize() {
     return this.$vxm.chat.initialSize;
   }
@@ -331,11 +323,8 @@
   @Prop({ required: true })
   uid!: string;
 
-  @Prop({ default: false })
-  inGame !: boolean;
-
-  @Prop({ default: false })
-  inForum !: boolean;
+  @Prop({ default: 'initial' })
+  positionBasis !: string;
 
   $refs!: {
     reportDialog: ReportDialog;
@@ -460,13 +449,13 @@
 </script>
 <style lang="scss">
 @import "./assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
+#eterna-chat:not(.tabbing) button:focus {
+  outline: none;
+  border: none;
+}
 </style>
 <style lang="scss" scoped>
 @import "./assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
 /*** Chat container ***/
 #eterna-chat {
   font-family: "Open Sans", "Open Sans", Arial, Gulim;
diff --git a/src/app/assets/_custom.scss b/src/app/assets/_custom.scss
index 26d019a1..b813cbf8 100644
--- a/src/app/assets/_custom.scss
+++ b/src/app/assets/_custom.scss
@@ -1,6 +1,9 @@
 // Eterna theme
 // Bootswatch
 
+@import "~bootstrap/scss/bootstrap.scss";
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
+
 //
 // Color system
 //
diff --git a/src/app/components/Connection/ConnectButton.vue b/src/app/components/Connection/ConnectButton.vue
index 15749e8d..9d60418e 100644
--- a/src/app/components/Connection/ConnectButton.vue
+++ b/src/app/components/Connection/ConnectButton.vue
@@ -17,7 +17,7 @@
   export default class ConnectButton extends Vue { }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .connect-button {
   width: 100%;
 }
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index efe480bf..3334d7b9 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -9,99 +9,107 @@
   </div>
 </template>
 
-<script>
-  export default {
-    name: 'DraggableDiv',
-    data() {
-      return {
-        positions: {
-          clientX: undefined,
-          clientY: undefined,
-          movementX: 0,
-          movementY: 0,
-        },
-      };
-    },
-    props: {
-      enabled: Boolean,
-      inGame: Boolean,
-      inForum: Boolean,
-    },
-    computed: {
-      disabled: function disabled() {
-        return !this.enabled;
-      },
-    },
-    watch: {
-      enabled: {
-        handler: function changed() {
-          if (!this.enabled) {
-            this.$refs.draggableContainer.style.top = `${this.clientY}px`;
-            this.$refs.draggableContainer.style.left = `${this.clientX}px`;
-          }
-        },
-      },
-    },
-    methods: {
-      dragMouseDown(event) {
-        if (!this.disabled) {
-          event.preventDefault();
-          // get the mouse cursor position at startup:
-          this.positions.clientX = event.clientX;
-          this.positions.clientY = event.clientY;
-          document.onmousemove = this.elementDrag;
-          document.onmouseup = this.closeDragElement;
-        }
-      },
-      elementDrag(event) {
-        if (!this.disabled) { // If dragging isn't disabled
-          event.preventDefault();
-          this.positions.movementX = this.positions.clientX - event.clientX;
-          this.positions.movementY = this.positions.clientY - event.clientY;
-          this.positions.clientX = event.clientX;
-          this.positions.clientY = event.clientY;
-          // set the element's new position:
-          this.$refs.draggableContainer.style.top = `${this.$refs.draggableContainer.offsetTop - this.positions.movementY}px`;
-          this.$refs.draggableContainer.style.left = `${this.$refs.draggableContainer.offsetLeft - this.positions.movementX}px`;
+<script lang="ts">
+  import {
+    Component, Prop, Watch, Vue,
+  } from 'vue-property-decorator';
+
+  @Component
+  export default class DraggableDiv extends Vue {
+    positions = {
+      clientX: undefined,
+      clientY: undefined,
+      movementX: 0,
+      movementY: 0,
+    };
+
+    @Prop({ default: true })
+    enabled !: boolean;
+
+    @Prop({ default: 'initial' })
+    positionBasis !: string;
+
+    get container() {
+      return this.$refs.draggableContainer;
+    }
+
+    @Watch('enabled')
+    changed() {
+      if (this.enabled) {
+        this.container.style.top = `${this.positions.clientY}px`;
+        this.container.style.left = `${this.positions.clientX}px`;
+      }
+    }
+
+    dragMouseDown(event) {
+      if (this.enabled) {
+        this.$emit('dragMouseDown');
+        event.preventDefault();
+        // get the mouse cursor position at startup:
+        this.positions.clientX = event.clientX;
+        this.positions.clientY = event.clientY;
+        document.onmousemove = this.elementDrag;
+        document.onmouseup = this.closeDragElement;
+      }
+    }
+
+    elementDrag(event) {
+      if (this.enabled) { // If dragging isn't disabled
+        event.preventDefault();
+        this.positions.movementX = this.positions.clientX - event.clientX;
+        this.positions.movementY = this.positions.clientY - event.clientY;
+        this.positions.clientX = event.clientX;
+        this.positions.clientY = event.clientY;
+        // set the element's new position:
+        if (!this.container) return;
+        this.container.style.left = `${this.container.offsetLeft - this.positions.movementX}px`;
+        this.container.style.top = `${this.container.offsetTop - this.positions.movementY}px`;
+      }
+    }
+
+    closeDragElement() {
+      document.onmouseup = null;
+      document.onmousemove = null;
+      if (localStorage) {
+        if (!this.container) return;
+        const windowSize = {
+          x: window.innerWidth,
+          y: window.innerHeight,
+        };
+        const {
+          left, top, width, height,
+        } = this.container.style;
+        const chatPosition = {
+          x: (left.replace('px', '')),
+          y: Number(top.replace('px', '')),
+        };
+        const chatSize = {
+          x: Number(width.replace('px', '')),
+          y: Number(height.replace('px', '')),
+        };
+        // Determines whether chat is placed WRT l/r, t/b by center
+        const center = {
+          x: chatPosition.x + chatSize.x / 2,
+          y: chatPosition.y + chatSize.y / 2,
+        };
+        const side = center.x < windowSize.x / 2 ? 'left' : 'right';
+        const side2 = center.y < windowSize.y / 2 ? 'top' : 'bottom';
+        // Gets offsets from sides
+        let offset = chatPosition.x;
+        if (side === 'right') {
+          // Gets offset from right
+          offset = windowSize.x - chatPosition.x - chatSize.x;
         }
-      },
-      closeDragElement() {
-        /* Chat position is stored relative to the center of the page - this is because
-        of how the site is laid out. It means that the chat won't move if the browser resizes. */
-        /* If the chat is in-game, position is stored relative to edges of page */
-        if (localStorage) {
-          const windowSize = [window.innerWidth, window.innerHeight];
-          const {
-            left, top, width, height,
-          } = this.$refs.draggableContainer.style;
-          const chatPosition = [Number(left.replace('px', '')), Number(top.replace('px', ''))];
-          const chatSize = [Number(width.replace('px', '')), Number(height.replace('px', ''))];
-          // Determines whether chat is placed WRT l/r, t/b by center
-          const center = [chatPosition[0] + chatSize[0] / 2, chatPosition[1] + chatSize[1] / 2];
-          const side = center[0] < windowSize[0] / 2 ? 'l' : 'r';
-          const side2 = center[1] < windowSize[1] / 2 ? 't' : 'b';
-          // Gets offsets from sides
-          let offset = chatPosition[0];
-          if (side === 'r') {
-            // Gets offset from right
-            offset = windowSize[0] - chatPosition[0] - chatSize[0];
-          }
-          let offset2 = chatPosition[1];
-          if (side2 === 'b') {
-            // Gets offset from bottom
-            offset2 = windowSize[1] - chatPosition[1] - chatSize[1];
-          }
-          let basis;
-          if (this.inGame) basis = 'gameP';
-          else if (this.inForum) basis = 'forumP';
-          else basis = 'p';
-          localStorage[`chat_${basis}osition`] = JSON.stringify([side, offset, side2, offset2]);
+        let offset2 = chatPosition.y;
+        if (side2 === 'bottom') {
+          // Gets offset from bottom
+          offset2 = windowSize.y - chatPosition.y - chatSize.y;
         }
-        document.onmouseup = null;
-        document.onmousemove = null;
-      },
-    },
-  };
+        localStorage[`chat_${this.positionBasis}Position`] = JSON.stringify([side, offset, side2, offset2]);
+        this.$emit('closeDragElement');
+      }
+    }
+  }
 </script>
 
 <style>
diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 6c3b20d6..13f5c8e5 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -7,7 +7,6 @@
       'flipped': value && !settings,
       'settings-flipped': value && settings,
       'settings':settings,
-      'tabbing': $vxm.chat.tabbing,
     }"
     @click="$emit('input', !value)"
   >
@@ -69,8 +68,4 @@
   .minimization-triangle:hover {
     cursor: pointer;
   }
-  button:not(.tabbing):focus {
-    border: none;
-    outline: none;
-  }
 </style>
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index 44fd7391..4f037c48 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -4,7 +4,6 @@
     style="float: right;"
     @click="$emit('input', !value)"
     :aria-label="`Click to make the chat ${value ? 'fullscreen' : 'normal size'}`"
-    :class="{ tabbing: $vxm.chat.tabbing }"
    >
   </button>
 </template>
@@ -35,8 +34,4 @@
   .open-window:hover {
     cursor: pointer;
   }
-  button:not(.tabbing):focus {
-    border: none;
-    outline: none;
-  }
 </style>
diff --git a/src/app/components/Header/PinButton.vue b/src/app/components/Header/PinButton.vue
index 4a4934e8..94f19e04 100644
--- a/src/app/components/Header/PinButton.vue
+++ b/src/app/components/Header/PinButton.vue
@@ -3,7 +3,7 @@
     class="pin-button"
     style="float: right;"
     @click="$emit('input', !value);"
-    :class="{ active: value, tabbing: $vxm.chat.tabbing}"
+    :class="{ active: value}"
     aria-label="`Click to pin viewed messages"
    >
   </button>
@@ -39,8 +39,4 @@
   .pin-button.active {
     background-image: url("../../assets/pin.png");
   }
-  button:not(.tabbing):focus {
-    outline: none;
-    border: none;
-  }
 </style>
diff --git a/src/app/components/Input/MenuButton.vue b/src/app/components/Input/MenuButton.vue
index 1c9b81a4..b627c578 100644
--- a/src/app/components/Input/MenuButton.vue
+++ b/src/app/components/Input/MenuButton.vue
@@ -23,7 +23,6 @@
 
     get style() {
       const normal = getStyles(this.styles);
-      normal.tabbing = this.$vxm.chat.tabbing;
       return normal;
     }
   }
@@ -41,8 +40,4 @@
 .menu-button:hover {
   background-color:#21508c; /* Lightened version of med-dark-blue. Same as input background */
 }
-button:not(.tabbing):focus {
-  outline: none;
-  border: none;
-}
 </style>
diff --git a/src/app/components/Input/SendButton.vue b/src/app/components/Input/SendButton.vue
index 046960c3..d41a8c25 100644
--- a/src/app/components/Input/SendButton.vue
+++ b/src/app/components/Input/SendButton.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="send-button"
-    :class="{animated: animationValue, tabbing: $vxm.chat.tabbing}"
+    :class="{animated: animationValue}"
     @click="sendMessage"
   >
   </button>
@@ -38,8 +38,4 @@
   .send-button:active {
     transform:translateX(3px);
   }
-  .send-button:not(.tabbing):focus {
-    outline: none;
-    border: none;
-  }
 </style>
diff --git a/src/app/components/LinkModal.vue b/src/app/components/LinkModal.vue
index fb7ec12c..36329ef7 100644
--- a/src/app/components/LinkModal.vue
+++ b/src/app/components/LinkModal.vue
@@ -8,7 +8,7 @@
     <button
       tabindex=0
       aria-label="Click to travel to the link you clicked on"
-      class="btn link-button"
+      class="btn link-button btn-primary"
       style="width: 100%; left: 50%; margin-top:10px"
       @click="openModal = false"
     >
@@ -17,7 +17,7 @@
     <button
       tabindex=0
       aria-label="Click to return to the chat; this cancels opening the link"
-      class="btn link-button"
+      class="btn link-button btn-primary"
       style="width: 100%; left: 50%; margin-top:10px;"
       @click="openModal = false;"
     >
@@ -36,9 +36,10 @@
 
   @Component
   export default class LinkModal extends Vue {
+    @Prop({ required: true })
     url !: string;
 
-    openModal = false;
+    openModal: boolean = false;
   }
 </script>
 
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index d9d94c57..58e77d74 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -8,7 +8,7 @@
         target="_blank"
         style="color:white;"
       >
-        {{ message ? message.user.username : '' }}
+        {{ message && message.user ? message.user.username : '' }}
       </a>
     </li>
     <li>
@@ -94,7 +94,7 @@
     message!: Message;
 
     get user(): User {
-      return this.message!.user;
+      return this.message?.user;
     }
 
     ban() {
@@ -118,6 +118,7 @@
     }
 
     privmsg() { // Opens up the private message modal
+      if (!this.user || !this.user.username) return;
       this.$vxm.chat.userToPrivMsg = this.user.username;
       this.$vxm.chat.privMsgModal = true;
     }
@@ -148,6 +149,7 @@
     }
 
     get profileUrl(): string {
+      if (!this.user) return '';
       return `http://${this.$vxm.chat.workbranch}/web/player/${this.user.uid}/`;
     }
 
@@ -193,6 +195,7 @@
     }
 
     copyMessage() {
+      if (!this.message || !this.message.user) return;
       const copyString = `<${this.message.user.username}>${this.message.message}`;
       Clipboard.writeText(copyString);
     }
diff --git a/src/app/components/Messages/MessageGroup.vue b/src/app/components/Messages/MessageGroup.vue
new file mode 100644
index 00000000..06fc018f
--- /dev/null
+++ b/src/app/components/Messages/MessageGroup.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <UserMessage
+      v-for="(message, index) in messages"
+      :message="message"
+      :key="message.message"
+      :first="index === 0"
+      grouped=true
+    />
+  </div>
+</template>
+<script lang="ts">
+  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import UserMessage from './UserMessage.vue';
+  import Message from '@/types/message';
+
+  @Component({
+    components: {
+      UserMessage,
+    },
+  })
+  export default class MessageGroup extends Vue {
+    @Prop({ required: true })
+    messages: Message[];
+  }
+</script>
+<style lang="scss">
+</style>
diff --git a/src/app/components/Messages/PrivateMessageModal.vue b/src/app/components/Messages/PrivateMessageModal.vue
index 036baf27..5b0c5e8e 100644
--- a/src/app/components/Messages/PrivateMessageModal.vue
+++ b/src/app/components/Messages/PrivateMessageModal.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="message panel" tabindex="0">
     <span id="user">To: {{username}}</span>
-    <textarea type="text" id="msg" name="msg" ref="ta" v-model="msg"/>
+    <textarea type="text" id="msg" name="msg" ref="textArea" v-model="msg"/>
     <button
-      class="btn"
+      class="btn btn-primary"
       style="width: 100%; left: 50%; margin-top:5px"
       @click="send"
     >
       Continue
     </button>
     <button
-      class="btn"
+      class="btn btn-primary"
       style="width: 100%; left: 50%; margin-top:10px;"
       @click="cancel"
     >
@@ -21,7 +21,7 @@
 
 <script lang="ts">
   /* Taken from OperLogin and modified */
-  import { Component, Vue } from 'vue-property-decorator';
+  import { Component, Vue, Ref } from 'vue-property-decorator';
   import Message from '@/types/message';
 
 
@@ -36,13 +36,11 @@
     }
 
     onStart() {
-      this.$nextTick(() => this.$refs.ta.focus());
-      this.$refs.ta.setSelectionRange(0, this.$refs.ta.value.length);
+      this.$nextTick(() => this.textArea.focus());
+      this.textArea.setSelectionRange(0, this.textArea.value.length);
     }
 
-    $refs !: {
-      ta: HTMLTextAreaElement,
-    };
+    @Ref() readonly textArea!: HTMLTextAreaElement;
 
     send() {
       this.$vxm.chat.postToQuery({ message: this.msg, channel: this.username });
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index 4f952626..62a22f6c 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -21,7 +21,7 @@
   @Component
   export default class PuzzleTooltip extends Vue {
     @Prop({ required: true })
-    pid : number = 0;
+    pid !: number;
 
     @Prop({ default: 0 })
     top !: number;
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index d5f7fa6a..7f7be8f7 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -11,15 +11,13 @@
           :color="usernameColor"
           :is-action="isAction"
           @focus="hover = true"
-          v-if="!isNotice && (!sameUserAsPrevious || isAction)"
-        >{{ isAction || !message.user.username ? '': ':' }}
+          v-if="!isNotice && (!grouped || first)"
+        >{{ isAction || !message.user || !message.user.username ? '': ':' }}
         </Username>
         &nbsp;
         <span
           ref="msg"
-          :style="{
-            fontStyle:isNotice ? 'italic' : '',
-          }"
+          :class="{ notice: isNotice }"
           v-html="formattedMessage" />
       </span>
       <UserTooltip
@@ -44,7 +42,7 @@
         class="chat-message-options"
         @click.prevent="openContextMenu"
         @keypress.enter.prevent="openContextMenuWithKey"
-        v-show="hover && message.user.username"
+        v-show="hover && message.user && message.user.username"
         tabindex=0
         @blur="hover = false"
       >
@@ -55,7 +53,7 @@
         :message="message"
       />
     </div>
-    <LinkModal ref="linkModal"/>
+    <LinkModal ref="linkModal" url=''/>
   </li>
 </template>
 
@@ -88,6 +86,12 @@
     @Prop({ default: false })
     private isHistory !: boolean;
 
+    @Prop({ default: false })
+    grouped !: boolean;
+
+    @Prop({ default: false })
+    first !: boolean;
+
     get isNotice() {
       return this.message.isNotice;
     }
@@ -106,6 +110,7 @@
     get formattedMessage(): string {
       // If there are tags, remove them before the message is seen
       let msg = this.message.message;
+      if (!msg) return '';
       if (this.messageHasTags(msg)) {
         const tagsStringPosition = msg.search(/\[#(.+,)*.+\]\r?$/);
         msg = msg.substring(0, tagsStringPosition);
@@ -115,6 +120,7 @@
     }
 
     mounted() {
+      if (!this.$el || !this.$refs.msg) return;
       // Gets all of the channel links from markdown
       const channelLinks = this.$refs.msg.getElementsByClassName('channel-link');
       // Spread operators converts HTMLCollectionOf<Element> to HTMLElement[]
@@ -209,19 +215,15 @@
         });
       });
       const usernames = Object.keys(this.$vxm.chat.connectedUsers);
-      [...this.$el.getElementsByTagName('a')]
-        .filter(e => e.href !== e.innerText) // If the text doesn't match the href
-        .filter(e => !usernames.includes(e.innerText.replace('●', '').trim().replace(':', '').trim())) // Don't flag usernames
-        .filter(e => ![...e.classList].includes('chat-message-options')) // Or context menu
-        .filter(e => ![...e.classList].includes('user-link')) // Or user tooltips
-        .filter(e => ![...e.classList].includes('image-link')) // Or inline images
-        .forEach(e => {
-        e.addEventListener('click', ev => {
-          ev.preventDefault();
-          ev.stopImmediatePropagation();
-          if (e.href.trim() !== '') this.$refs.linkModal.url = e.href;
-          this.$refs.linkModal.openModal = true;
-        });
+      [...this.$el.getElementsByClassName('external-link')]
+        .forEach((el) => {
+          const e = el as HTMLAnchorElement;
+          e.addEventListener('click', ev => {
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+            if (e.href.trim() !== '') this.$refs.linkModal.url = e.href;
+            this.$refs.linkModal.openModal = true;
+          });
       });
     }
 
@@ -248,6 +250,7 @@
     }
 
     parseMessageTags(message:string) { // Gets tags as array from message
+      if (!message) return [];
       const tagsStringPosition = message.search(/\[#(.+,)*.+\]\r?$/); // Searches for [...,...] at end of message
       let tagsString = message.substring(tagsStringPosition); // Gets tags as a string
       if (tagsString.includes('\r')) { // In history messages, message ends with \r
@@ -259,21 +262,10 @@
     }
 
     messageHasTags(message:string) { // If a message has any tags
+      if (!message) return false;
       return message.match(/\[#(.+,)*.+\]\r?$/);
     }
 
-    @Prop({ required: true })
-    messageIndex !: number;
-
-    get sameUserAsPrevious() {
-      const channelName = this.message.target;
-      const channel = this.$vxm.chat.channels[channelName];
-      const { username } = this.message.user;
-      if (!channel || !channel.postedMessages[this.messageIndex - 1]) return false;
-      const previousMessage = channel.postedMessages[this.messageIndex - 1];
-      return username === previousMessage.user.username;
-    }
-
     $refs!: {
       contextMenu: HTMLFormElement;
       msg: HTMLSpanElement;
@@ -404,4 +396,7 @@
   blockquote:after {
     content: close-quote;
   }
+  .notice {
+    font-style: italic;
+  }
 </style>
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index 5ade3396..8222dea3 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -27,14 +27,14 @@
       </table>
       <p v-show="authFailed">Username or password incorrect</p>
       <button
-        class="btn login-button"
+        class="btn login-button btn-primary"
         style="width: 100%; left: 50%; margin-top:10px"
         @click="$emit('login', { password, username, remember })"
       >
         Continue
       </button>
       <button
-        class="btn login-button"
+        class="btn login-button btn-primary"
         style="width: 100%; left: 50%; margin-top:10px;"
         @click="$emit('cancel')"
       >
@@ -46,7 +46,7 @@
 
 <script lang="ts">
   import BootstrapVue from 'bootstrap-vue';
-  import { Component, Vue } from 'vue-property-decorator';
+  import { Component, Vue, Prop } from 'vue-property-decorator';
 
   Vue.use(BootstrapVue);
 
@@ -60,7 +60,8 @@
 
     username: string = '';
 
-    showsMessage = false;
+    @Prop({ default: false })
+    showsMessage !: boolean;
 
     message = '';
 
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 633e0321..9bce6112 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -1,13 +1,17 @@
 <template>
   <Pane ref="pane" :visibility="visibility" :data="data" @autoscroll="this.autoscroll">
     <ul style="margin-bottom:0; padding-right:10px">
-      <UserMessage
-        v-for="(message, i) in displayedMessages"
+      <span
+        v-for="(message, i) in groupedMessages"
         :key="i"
-        :message="message"
-        :messageIndex="i"
         :style="{fontSize:fontSize}"
-      />
+      >
+        <UserMessage
+          v-show="message.user"
+          :message="message"
+        />
+        <MessageGroup v-show="!message.user" :messages="message" />
+      </span>
       <ConnectingMessage/>
       <UnreadMessageBanner v-show="unreads > 0" @click.native="scrollDown" :messages="unreads" />
     </ul>
@@ -54,6 +58,7 @@
   import { mapState } from 'vuex';
   import EmoticonBar from '@/components/Input/EmoticonBar.vue';
   import UserMessage from '../Messages/UserMessage.vue';
+  import MessageGroup from '../Messages/MessageGroup.vue';
   import Pane from './Pane.vue';
   import ConnectingMessage from '../Connection/ConnectingMessage.vue';
   import ScalableInput from '@/components/Input/ScalableInput.vue';
@@ -73,6 +78,7 @@
       ConnectButton,
       EmoticonBar,
       UnreadMessageBanner,
+      MessageGroup,
     },
   })
   export default class MessagePane extends Vue {
@@ -102,6 +108,36 @@
       }
     }
 
+    get groupedMessages() {
+      const msgs = this.displayedMessages;
+      // Creates and array of Message arrays and Messages. Messages by the same user
+      // are grouped together in one array. Other, non-grouped messages are in the main array
+      const temp = [];
+      msgs.forEach(e => {
+        const len = temp.length - 1;
+        // If it's the first message, add it
+        if (len < 0) {
+          temp.push(e);
+          return;
+        }
+        const last = temp[len];
+        // If the last message was by the same user and it was not in a grouped array
+        if (last.user && last.user.username === e.user.username) {
+          // Make the previous entry a grouped array of the old message and the current one
+          temp[len] = [last, e];
+        } else if (last[last.length - 1] // If the last entry was a grouped array
+          // And the grouped messages are by the same user as the current one
+          && last[last.length - 1].user.username === e.user.username) {
+          // Add the current message to the grouped array
+          temp[len].push(e);
+        } else {
+          // Otherwise, just add it to the temp array
+          temp.push(e);
+        }
+      });
+      return temp;
+    }
+
     autoScroll = true;
 
     autoscroll(to:boolean) {
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index 235aa4a6..710375e7 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -5,16 +5,9 @@
     :class="{
       notified:notification,
       mentioned:mention,
-      tabbing: $vxm.chat.tabbing
     }"
     :aria-label="`Click to ${this.value ? 'close' : 'open'} the slideout`"
   >
-    <v-style>
-      button:focus {
-        border: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-        outline: {{$vxm.chat.tabbing ? '' : 'none !important'}};
-      }
-    </v-style>
   </button>
 </template>
 
@@ -54,8 +47,4 @@
 .mentioned { /* Mentioned hamburger icon */
   background-image: url("../../assets/hamburger-mention.png") !important;
 }
-button:not(.tabbing):focus {
-  outline: none;
-  border: none;
-}
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index dbadbc8a..636c979a 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -63,6 +63,12 @@
   import SettingsTooltip from '../SettingsTooltip.vue';
   import { Channel } from '@/store/chat.vuex';
 
+  enum states {
+    all_enabled,
+    some_enabled,
+    all_disabled
+  }
+
   @Component({
     components: {
       SettingsSection,
@@ -101,9 +107,9 @@
 
     get allEnabled() {
       const channels = Object.values(this.$vxm.chat.channels);
-      if (channels.every(e => e!.notificationsEnabled)) return true;
-      if (channels.every(e => !e!.notificationsEnabled)) return false;
-      return null;
+      if (channels.every(e => e!.notificationsEnabled)) return states.all_enabled;
+      if (channels.every(e => !e!.notificationsEnabled)) return states.all_disabled;
+      return states.some_enabled;
     }
 
     updateAll(to: boolean) {
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 3438f843..cf9e86e4 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -6,14 +6,14 @@
         aria-label="When others view your username, they will see an indicator if you are away">
         You are currently {{userStatus ? 'away' : 'online'}}
         <SettingsTooltip
-          title="When others view your username, they will see an indicator if you are away"
+          text="When others view your username, they will see an indicator if you are away"
         />
       </span>
     </li>
     <li>
       <span aria-label="Change your status">Set
         <SettingsTooltip
-          title="Change your status"
+          text="Change your status"
         /></span>
       <span style="float:right;">
         <SettingsEnableDisable
@@ -27,7 +27,7 @@
     <li>
       <span>Automatically Update
         <SettingsTooltip
-          title="Whether your status will update when you leave or come back to the tab"
+          text="Whether your status will update when you leave or come back to the tab"
         />
       </span>
       <span style="float: right">
@@ -43,7 +43,7 @@
       >
         Reason
         <SettingsTooltip
-          title="When others see the away indicator, they will see the reason you are away"
+          text="When others see the away indicator, they will see the reason you are away"
         />
       </span>
       <span style="float:right">
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index 32b8e72e..86815b8b 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -1,9 +1,9 @@
 <template>
   <label class="switch" :style="{ width: `${width}px` }" :aria-label="label">
-    <button @click="$emit('input', false)" :disabled="value === false" id="disable">
+    <button @click="$emit('input', false)" :disabled="value === 2" id="disable">
       {{offText}}
     </button>
-    <button @click="$emit('input', true)" :disabled="value === true" id="enable">
+    <button @click="$emit('input', true)" :disabled="value === 0" id="enable">
       {{onText}}
     </button>
   </label>
@@ -11,10 +11,16 @@
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
 
+  enum states {
+    all_on,
+    some_on,
+    all_off,
+  }
+
   @Component
   export default class SettingsEnableDisable extends Vue {
     @Prop({ required: true })
-    value !: boolean | null;
+    value !: states;
 
     @Prop({ default: 'OFF' })
     offText !: string;
@@ -26,7 +32,10 @@
     width !: number;
 
     get label() {
-      return `Three state switch in state ${this.value === true ? (this.onText) : (this.offText) || 'neither'}; possible states ${this.onText}, ${this.offText}, and neither`;
+      let stateDescription = 'neither';
+      if (this.value === states.all_on) stateDescription = this.onText;
+      else if (this.value === states.all_off) stateDescription = this.offText;
+      return `Three state switch in state ${stateDescription}; possible states ${this.onText}, ${this.offText}, and neither`;
     }
   }
 </script>
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index cb0a7dd6..9ab14984 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -12,21 +12,18 @@
           name="chat"
           @input="activeTab = 0"
           class='slideout-button'
-          :class="{tabbing: $vxm.chat.tabbing}"
         />
         <SlideoutButton
           name="user"
           :selected="userSelected"
           @input="activeTab = 1"
           class='slideout-button'
-          :class="{tabbing: $vxm.chat.tabbing}"
         />
         <SlideoutButton
           name="settings"
           :selected="settingsSelected"
           @input="activeTab = 2"
           class='slideout-button'
-          :class="{tabbing: $vxm.chat.tabbing}"
         />
       </span>
       <SlideoutChats
@@ -192,10 +189,4 @@
   width: calc(100% - 30px); /* Makes sure there is room to fill */
   justify-content: space-evenly; /* Fills the room */
 }
-.slideout-button.tabbing:focus {
-  outline: solid white 1px;
-}
-.slideout-button:focus {
-  outline: none;
-}
 </style>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index bc9b12e8..34c31e4d 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -128,12 +128,6 @@ export default class ChatModule extends VuexModule {
 
   rawHistoryMessages: string[] = []; // Stores history messages
 
-  initialPosition: [string, number, string, number] = ['l', 0, 't', 0];
-
-  forumPosition: [string, number, string, number] = ['l', 0, 't', 0];
-
-  inGamePosition: [string, number, string, number] = ['l', 0, 't', 0];
-
   initialSize: [number, number] = [400, 500];
 
   customNick !: string; // Custom nick for oper
@@ -344,35 +338,6 @@ export default class ChatModule extends VuexModule {
           );
         }
       }
-      if (localStorage.chat_position) {
-        try {
-          this.initialPosition = JSON.parse(localStorage.chat_position);
-        } catch {
-          console.error(
-            'Encountered an error while parsing the local data of chat location',
-          );
-        }
-      }
-      if (localStorage.chat_gamePosition) {
-        try {
-          this.inGamePosition = JSON.parse(localStorage.chat_gamePosition);
-        } catch {
-          console.error(
-            'Encountered an error while parsing the local data of in-game chat location',
-          );
-        }
-      }
-      if (localStorage.chat_forumPosition) {
-        try {
-          this.forumPosition = JSON.parse(localStorage.chat_forumPosition);
-        } catch {
-          console.error(
-            'Encountered an error while parsing the local data of forum chat location',
-          );
-        }
-      } else {
-        this.forumPosition = this.initialPosition;
-      }
       if (localStorage.chat_size) {
         try {
           const data = JSON.parse(localStorage.chat_size);
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index fc6e317e..06aaac73 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -23,6 +23,18 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
     tokens[idx].attrs[aIndex][1] = '_blank'; // replace value of existing attr
   }
 
+  const hrefIndex = tokens[idx].attrIndex('href');
+  const href = tokens[idx].attrs[hrefIndex][1];
+  const text = tokens[idx + 1].content;
+  if (href.replace(/https?:\/\//, '') !== text) {
+    const classIndex = tokens[idx].attrIndex('class');
+    if (classIndex < 0) {
+      tokens[idx].attrPush(['class', 'external-link']); // add new attribute
+    } else {
+      tokens[idx].attrs[classIndex][1] += ' external-link'; // replace value of existing attr
+    }
+  }
+
   return defaultRender(tokens, idx, options, env, self);
 
   // pass token to default renderer.
@@ -30,6 +42,7 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
 };
 md.renderer.rules.text = (tokens, idx, options, env, self) => {
   let { content } = tokens[idx];
+  if (!content) return '';
   // Detects instances of :: or : indicating fonts
   [...content.matchAll(/:+[^:]+:+/g)].forEach(e => {
     if (e[0].startsWith('::')) { // If it's :: (cursive), remove the colons and wrap it in a styled <span>
diff --git a/src/standalone/App.vue b/src/standalone/App.vue
index 98d2258b..4b8ea1c8 100644
--- a/src/standalone/App.vue
+++ b/src/standalone/App.vue
@@ -9,8 +9,7 @@
       :username="username"
       :uid="uid"
       workbranch="eternagame.org"
-      :inGame="inGame"
-      :inForum="inForum" />
+      positionBasis="initial" />
   </div>
 </template>
 
@@ -32,10 +31,6 @@
 
     uid!: string;
 
-    inGame = false;
-
-    inForum = false;
-
     created() {
       if (localStorage.chat_username) {
         this.username = localStorage.chat_username;

From 2baca4b696a3ae7d3303c95882dffcc92e7b256c Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 14 Jul 2020 21:58:08 -0500
Subject: [PATCH 182/223] Fixed oper login bugs

---
 src/app/App.vue            | 6 +++---
 src/app/store/chat.vuex.ts | 3 +--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 6aac7ec8..2d5fb9f3 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -190,8 +190,8 @@
       localStorage.chat_operPass = JSON.stringify(sjcl.encrypt('password', password));
       localStorage.chat_operUser = username;
     }
-    this.$vxm.chat.operCommand(); // Set all nicks as opers
-    setTimeout(this.operLoginStatus, 200); // A precaution so messages are received properly
+    await this.$vxm.chat.operCommand(); // Set all nicks as opers
+    this.operLoginStatus(); // A precaution so messages are received properly
   }
 
   operLoginStatus() {
@@ -351,11 +351,11 @@
       uid: this.uid,
     });
     const timer = setInterval(() => { // Creates a timer to check for history and connection
-      this.logInOper();
       if (this.$vxm.chat.rawHistoryMessages.length > 0) {
         clearInterval(timer); // Once history messages start coming in, stop the timer
         setTimeout(() => { // Make sure all of them come in, then process them
           this.$vxm.chat.loadMessagesForChannel('#general');
+          this.logInOper();
           setTimeout(() => {
             /* This gives an error because it doesn't recognize
             using ref on a v-for gives an Array of VueComponents.
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 34c31e4d..5e4bfe79 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -442,7 +442,7 @@ export default class ChatModule extends VuexModule {
             switch (commandNumber) { // Might be useful in the future
               case 482:
                 if (!this.oper) this.operCommand();
-                this.setChannelOps();
+                else this.setChannelOps();
                 break;
               default: break;
             }
@@ -537,7 +537,6 @@ export default class ChatModule extends VuexModule {
     // Converting the array to a set and then back removes duplicates
     // Iterates through to make sure each nick for the user has proper permissions
     Array.from(new Set(this.connectedUsers[this.currentUser.username]?.nicks)).forEach(i => {
-      console.log(i);
       // Iterates through all channels
       channelNames.forEach(e => this.client?.raw(`SAMODE ${e} +o ${i}`));
     });

From 11466a8fa86fbd43debe2196d670f33bb295aee1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 16 Jul 2020 00:47:14 -0500
Subject: [PATCH 183/223] Bootstrap (mostly done)

---
 .../components/Connection/ConnectButton.vue   | 10 +---
 .../Connection/ConnectingMessage.vue          |  6 +--
 .../components/Connection/ConnectingPopup.vue |  4 +-
 .../Header/MinimizationTriangle.vue           |  4 +-
 .../components/Header/OpenWindowButton.vue    |  3 +-
 src/app/components/Header/PinButton.vue       |  3 +-
 src/app/components/Input/EmoticonBar.vue      | 27 +++-------
 src/app/components/Input/EmoticonButton.vue   | 15 +++---
 src/app/components/Input/ExpandButton.vue     | 31 -----------
 .../components/Input/MarkdownWrapButton.vue   | 10 ++--
 src/app/components/Input/MenuButton.vue       |  5 +-
 src/app/components/Input/ScalableInput.vue    | 15 ++----
 src/app/components/Input/SendButton.vue       |  4 +-
 .../Messages/PrivateMessageModal.vue          | 33 +++++-------
 src/app/components/Messages/PuzzleTooltip.vue | 53 ++++++++++---------
 src/app/components/Messages/UserMessage.vue   | 14 +----
 src/app/components/Messages/UserTooltip.vue   |  9 +---
 src/app/components/Messages/Username.vue      |  6 +--
 src/app/components/Panes/Pane.vue             | 12 ++---
 .../components/Panes/UnreadMessageBanner.vue  |  8 +--
 .../Slideout/Chat/AddChatButton.vue           | 24 ++++-----
 .../Slideout/Chat/ChatSelectButton.vue        | 22 ++------
 .../Slideout/HamburgerMenuButton.vue          |  4 +-
 .../Settings/ColorPicker/ColorPicker.vue      |  4 +-
 .../Settings/ColorPicker/ColorSlider.vue      | 17 ++----
 .../Settings/Sections/IgnoredSection.vue      | 17 +-----
 .../Sections/NotificationsSection.vue         | 15 +++---
 .../Settings/Sections/OperSection.vue         | 15 ++----
 .../Settings/Sections/StatusSection.vue       | 11 ++--
 .../Settings/Sections/TextSizeSection.vue     |  2 +-
 .../Settings/Sections/ToolbarSection.vue      | 31 +++++------
 .../Slideout/Settings/SettingsSection.vue     |  9 +---
 .../Slideout/Settings/SlideoutSettings.vue    |  8 +--
 .../Slideout/Users/SlideoutUsername.vue       |  3 +-
 src/app/tools/Markdown.ts                     |  4 +-
 35 files changed, 143 insertions(+), 315 deletions(-)
 delete mode 100644 src/app/components/Input/ExpandButton.vue

diff --git a/src/app/components/Connection/ConnectButton.vue b/src/app/components/Connection/ConnectButton.vue
index 9d60418e..03a8d96c 100644
--- a/src/app/components/Connection/ConnectButton.vue
+++ b/src/app/components/Connection/ConnectButton.vue
@@ -2,8 +2,8 @@
   <div
     id="reconnect"
     :class="{active: $vxm.chat.connectionData.tryingToConnect}"
-    class="connect-button btn"
-    style="color:white; font-weight:bolder; font-size:13px; background-color: $green"
+    class="connect-button btn btn-primary w-100 font-weight-bolder"
+    style="font-size:13px;"
     @click="$vxm.chat.connect"
   >
     Reconnect
@@ -16,9 +16,3 @@
   @Component({})
   export default class ConnectButton extends Vue { }
 </script>
-
-<style scoped lang="scss">
-.connect-button {
-  width: 100%;
-}
-</style>
diff --git a/src/app/components/Connection/ConnectingMessage.vue b/src/app/components/Connection/ConnectingMessage.vue
index fdf08ac7..76db9c92 100644
--- a/src/app/components/Connection/ConnectingMessage.vue
+++ b/src/app/components/Connection/ConnectingMessage.vue
@@ -6,7 +6,7 @@
   >
     <img
       src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"
-      class="loading-icon"
+      class="loading-icon mr-auto ml-auto align-middle mb-1"
     >
     <span
       v-show="connectionData.tryingToConnect"
@@ -39,12 +39,8 @@
 
 <style lang="scss">
 .loading-icon {
-  margin-bottom: 5px;
   background-repeat: no-repeat;
   width: 20px;
   height: 20px;
-  margin-left: auto;
-  margin-right: auto;
-  vertical-align: middle;
 }
 </style>
diff --git a/src/app/components/Connection/ConnectingPopup.vue b/src/app/components/Connection/ConnectingPopup.vue
index 6e877d8d..2db66002 100644
--- a/src/app/components/Connection/ConnectingPopup.vue
+++ b/src/app/components/Connection/ConnectingPopup.vue
@@ -2,7 +2,7 @@
   <div
     v-show="!connectionData.connected &&
       connectionData.firstConnection"
-    class="connecting-popup"
+    class="connecting-popup text-center text-white"
   >
     <img
       src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"
@@ -41,7 +41,5 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: #fff;
-  text-align: center;
 }
 </style>
diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 13f5c8e5..11f45c5b 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -1,8 +1,7 @@
 <template>
   <button
     :aria-label="label"
-    class="minimization-triangle"
-    style="float: right;"
+    class="minimization-triangle float-right border-0 "
     :class="{
       'flipped': value && !settings,
       'settings-flipped': value && settings,
@@ -44,7 +43,6 @@
     -webkit-transform: rotate(0deg);
     transition: transform 0.2s;
     background-color: transparent;
-    border: none;
   }
 
   .minimization-triangle.settings-flipped {
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index 4f037c48..d49d4fec 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="open-window"
+    class="open-window border-0"
     style="float: right;"
     @click="$emit('input', !value)"
     :aria-label="`Click to make the chat ${value ? 'fullscreen' : 'normal size'}`"
@@ -29,7 +29,6 @@
     height: 34px;
     width: 35px;
     background-color: transparent;
-    border: none;
   }
   .open-window:hover {
     cursor: pointer;
diff --git a/src/app/components/Header/PinButton.vue b/src/app/components/Header/PinButton.vue
index 94f19e04..e443eaec 100644
--- a/src/app/components/Header/PinButton.vue
+++ b/src/app/components/Header/PinButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="pin-button"
+    class="pin-button border-0"
     style="float: right;"
     @click="$emit('input', !value);"
     :class="{ active: value}"
@@ -30,7 +30,6 @@
     height: 35px;
     width: 35px;
     background-color: transparent;
-    border: none;
     transition: all 0.4s;
   }
   .pin-button:hover {
diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 4624da3f..91320c01 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -1,7 +1,8 @@
 <template>
-  <div id='menu-container'>
+  <div id='menu-container' class='text-white'>
     <div
       id='submenu'
+      class='text-white overflow-hidden mb-1'
       v-show='(emoticonsSelected || markdownSelected || previewSelected) && anyChatFeatures'>
       <div id='emoticon-submenu' v-show="emoticonsSelected && emoticonChatFeatures" >
         <EmoticonButton
@@ -12,7 +13,11 @@
           :aria-label="`Add a ${emoticon} emoticon to the input text`"
           @emote='add' />
       </div>
-      <div id='markdown-submenu' v-show="markdownSelected && markdownChatFeatures" >
+      <div
+        id='markdown-submenu'
+        class='overflow-auto d-flex'
+        v-show="markdownSelected && markdownChatFeatures"
+      >
         <MarkdownWrapButton
           v-for="(item, index) in markdownCodes"
           :key="item"
@@ -44,6 +49,7 @@
       </div>
     <div
       id='emoticon-bar-container'
+      class="text-white border-0 overflow-hidden"
       v-if="anyChatFeatures" >
       <MenuButton
         aria-label="Open emoticon toolbar"
@@ -87,7 +93,6 @@
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
   import EmoticonButton from './EmoticonButton.vue';
-  import ExpandButton from './ExpandButton.vue';
   import SendButton from './SendButton.vue';
   import MarkdownWrapButton from './MarkdownWrapButton.vue';
   import MenuButton from './MenuButton.vue';
@@ -97,7 +102,6 @@
     components: {
       SendButton,
       EmoticonButton,
-      ExpandButton,
       MarkdownWrapButton,
       MenuButton,
     },
@@ -257,29 +261,17 @@
 <style scoped>
 #emoticon-bar-container {
   background-color:#043468;
-  color:white;
   width:calc(100% - 2px); /* Same width as textarea */
   height:25px;
-  border:none;
-  overflow:hidden; /* Prevents awkward scrolling and overflow */
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
   position: relative;
 }
-#strike { /* Strikethrough isn't cut off */
-  padding:2px;
-  padding-right:2px;
-  overflow-x:hidden;
-  text-align:center;
-}
 #submenu {
   background-color:#043468;
-  color:white;
   width:calc(100% - 2px); /* Same width as textarea */
   border-radius:8px;
   height:25px;
-  overflow:hidden; /* Prevents awkward scrolling and overflow */
-  margin-bottom:3px;
   position: relative;
 }
 .other-menu-button {
@@ -289,16 +281,13 @@
 }
 .menu-container {
   background-color:#043468;
-  color:white;
 }
 #preview-submenu {
   display:inline-block;
   width:calc(100% - 30px) !important;
 }
 #markdown-submenu {
-  overflow-x: auto;
   flex-wrap: nowrap;
-  display: flex;
   width: calc(100% - 25px);
   height:25px;
 }
diff --git a/src/app/components/Input/EmoticonButton.vue b/src/app/components/Input/EmoticonButton.vue
index 4e675787..cedad0cd 100644
--- a/src/app/components/Input/EmoticonButton.vue
+++ b/src/app/components/Input/EmoticonButton.vue
@@ -1,6 +1,10 @@
 <template>
-  <div id='emoticon-button-container' class='emoticon-button' @click="clicked">
-    <p id='emoticon-text-container'>{{emoticon}}</p>
+  <div
+    id='emoticon-button-container'
+    class='emoticon-button text-white border-left-0 border-top-0  pt-1 text-center float-left'
+    @click="clicked"
+  >
+    <p id='emoticon-text-container' class='align-middle h-100'>{{emoticon}}</p>
   </div>
 </template>
 <script lang='ts'>
@@ -18,21 +22,14 @@
 <style scoped>
   .emoticon-button {
     background-color:#043468;
-    color:white;
-    border:none;
-    float:left;
     position: relative;
     width:30px;
     height:25px;
-    padding-top:2px;
-    text-align:center;
   }
   #emoticon-button-container:hover {
     background-color: #21508c;
   }
   #emoticon-text-container {
-    vertical-align: middle;
-    height:100%;
     font-size:14px;
     -webkit-user-select: none;
     -moz-user-select: none;
diff --git a/src/app/components/Input/ExpandButton.vue b/src/app/components/Input/ExpandButton.vue
deleted file mode 100644
index 2c4e35fb..00000000
--- a/src/app/components/Input/ExpandButton.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class='emoticon-button' @click="value=!value; $emit('expand', !value)">
-    <p id='expand-text-container'>➕</p>
-  </div>
-</template>
-<script lang='ts'>
-  import { Component, Prop, Vue } from 'vue-property-decorator';
-  @Component
-  export default class ExpandButton extends Vue {
-    value : boolean = true;
-  }
-</script>
-<style scoped>
-  .emoticon-button {
-    border:none;
-    float:right;
-    position: relative;
-    width:20px;
-    height:25px;
-    padding-right:2.5px;
-    padding-top:1px;
-    text-align:center;
-  }
-  #expand-text-container {
-    vertical-align: middle;
-    height:100%;
-    font-size:14px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-  }
-</style>
diff --git a/src/app/components/Input/MarkdownWrapButton.vue b/src/app/components/Input/MarkdownWrapButton.vue
index 0d57f838..b9280b23 100644
--- a/src/app/components/Input/MarkdownWrapButton.vue
+++ b/src/app/components/Input/MarkdownWrapButton.vue
@@ -1,5 +1,8 @@
 <template>
-  <button id='md-wrap-button-container' class='md-button' @click="clicked">
+  <button
+    id='md-wrap-button-container'
+    class='md-button text-white border-left-0 border-top-0 float-left pt-0 text-center'
+    @click="clicked">
     <span
       class="text"
       :class="classes"
@@ -50,15 +53,10 @@
 </script>
 <style scoped>
   .md-button {
-    color:white;
     background-color:#043468;
-    border:none;
-    float:left;
     position: relative;
     width:30px;
     height:25px;
-    padding-top:1px;
-    text-align:center;
   }
   .md-button:hover {
     background-color:#21508c;
diff --git a/src/app/components/Input/MenuButton.vue b/src/app/components/Input/MenuButton.vue
index b627c578..8b8f0622 100644
--- a/src/app/components/Input/MenuButton.vue
+++ b/src/app/components/Input/MenuButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class='menu-button'
+    class='menu-button border-0 text-white float-left'
     :style="style"
     @click="$emit('button', name)"
     @dblclick="$emit('close')"
@@ -31,10 +31,7 @@
 .menu-button {
   height:25px;
   background-color:#043468;
-  border:none;
   width:30px; /* Corresponds to a real width of 25px accounting for border */
-  color:white;
-  float:left;
   font-size:14px;
 }
 .menu-button:hover {
diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index 664926fb..a8739057 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -8,7 +8,7 @@
         'border-bottom-left-radius': radius,
         'font-size': `${fontsize}px`
       }"
-      class="scalable-input"
+      class="scalable-input border-0 pl-1 overflow-hidden"
       :class="{ tabbing: $vxm.chat.tabbing }"
       :disabled="disabled"
       @input="$emit('input', $event.target.value); updateAutocomplete($event)"
@@ -20,10 +20,10 @@
       @keypress="onKeyPress"
       aria-label="Send message text input"
     />
-    <SendButton @send="send" aria-label="Send"/>
+    <SendButton @send="send" aria-label="Send" class='float-right'/>
     <div
       ref="hiddenDiv"
-      class="scalable-input-hidden"
+      class="scalable-input-hidden invisible border-0"
     ></div>
   </div>
 </template>
@@ -300,14 +300,10 @@
 <style scoped lang="scss">
   .scalable-input {
     resize: none;
-    overflow: hidden;
     position: absolute;
     bottom: 0px;
-    padding: 0;
-    padding-left:2px;
     color:white;
     background-color:#21508c;
-    border:none;
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;
     outline: none;
@@ -331,16 +327,13 @@
   /* To determine input size */
   .scalable-input-hidden {
     position:relative;
-    visibility: hidden;
     white-space: pre-wrap;
     word-wrap: break-word;
-    border: none;
-    padding-right:50px; /* Makes sure height updates when it should */
+    padding-right:25px; /* Makes sure height updates when it should */
     width: calc(100% - 2px);
   }
   .send-button { /* Send message button */
     position: absolute;
-    float:right;
     right:0;
     width:30px;
     height:30px;
diff --git a/src/app/components/Input/SendButton.vue b/src/app/components/Input/SendButton.vue
index d41a8c25..dc568286 100644
--- a/src/app/components/Input/SendButton.vue
+++ b/src/app/components/Input/SendButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="send-button"
+    class="send-button border-0"
     :class="{animated: animationValue}"
     @click="sendMessage"
   >
@@ -25,7 +25,6 @@
 <style lang="scss" scoped>
   .send-button {
     background-color:rgba(0,0,0,0);
-    border:none;
     background-image: url("../../assets/send-button.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
@@ -33,7 +32,6 @@
     height: 30px;
     width: 25px;
     transition: transform 0.5s;
-    margin:0;
   }
   .send-button:active {
     transform:translateX(3px);
diff --git a/src/app/components/Messages/PrivateMessageModal.vue b/src/app/components/Messages/PrivateMessageModal.vue
index 5b0c5e8e..4f90c994 100644
--- a/src/app/components/Messages/PrivateMessageModal.vue
+++ b/src/app/components/Messages/PrivateMessageModal.vue
@@ -1,17 +1,24 @@
 <template>
-  <div class="message panel" tabindex="0">
-    <span id="user">To: {{username}}</span>
-    <textarea type="text" id="msg" name="msg" ref="textArea" v-model="msg"/>
+  <div class="message panel rounded p-2" tabindex="0">
+    <span id="user" class="mb-2">To: {{username}}</span>
+    <textarea
+      type="text"
+      id="msg"
+      name="msg"
+      class="form-control form-control-sm m-0 mw-100 mt-1 mb-1"
+      ref="textArea"
+      v-model="msg"
+    />
     <button
-      class="btn btn-primary"
-      style="width: 100%; left: 50%; margin-top:5px"
+      class="btn btn-primary w-100 mt-1"
+      style="left: 50%"
       @click="send"
     >
       Continue
     </button>
     <button
-      class="btn btn-primary"
-      style="width: 100%; left: 50%; margin-top:10px;"
+      class="btn btn-primary w-100 mt-2"
+      style="left: 50%"
       @click="cancel"
     >
       Cancel
@@ -62,24 +69,12 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    padding: 10px;
     background-color:#043468;
-    border-radius:10px;
     z-index:3;
   }
 
   #msg {
-    min-width:150px;
     min-height:24px;
-    margin:5px;
-  }
-
-  #user {
-    margin-bottom:5px;
-  }
-
-  .btn {
-    background-color: $green;
   }
 
   button:focus {
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index 62a22f6c..8e62f4f5 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -1,17 +1,38 @@
 <template>
   <div
-    class="puzzle-tooltip-container"
+    class="
+      puzzle-tooltip-container
+      text-white
+      d-flex
+      justify-space-between
+      flex-row
+      flex-wrap
+      rounded
+    "
     ref="container"
     :style="{
       top: `${top + 5}px`,
       left: `${left + 5}px`
     }">
-      <span class="puzzle-name puzzle">{{puzzleName}}</span>
-      <span class="puzzle-user puzzle">{{username}}</span>
-      <span class="puzzle-solvers puzzle">{{solved}} solvers</span>
-      <span class="puzzle-reward puzzle">{{reward}}$</span>
-      <span class="puzzle-comments puzzle">{{comments}} comments</span>
-      <span class="puzzle-description puzzle" v-html="desc" />
+      <span
+        class="puzzle-name puzzle p-1 flex-grow-1 flex-shrink-0 text-left"
+      > {{puzzleName}}</span>
+      <span
+        class="puzzle-user puzzle p-1 flex-grow-1 flex-shrink-0 text-left"
+      >{{username}}</span>
+      <span
+        class="puzzle-solvers puzzle p-1 flex-grow-1 flex-shrink-0 text-right"
+      >{{solved}} solvers</span>
+      <span
+        class="puzzle-reward puzzle p-1 flex-grow-1 flex-shrink-0 text-left"
+      >{{reward}}$</span>
+      <span
+        class="puzzle-comments puzzle p-1 flex-grow-1 flex-shrink-0 text-right"
+      >{{comments}} comments</span>
+      <span
+        class="puzzle-description puzzle p-1 flex-grow-1 flex-shrink-0 border-0"
+        v-html="desc"
+      />
   </div>
 </template>
 <script lang="ts">
@@ -75,38 +96,20 @@
   @import '~bootstrap-vue/dist/bootstrap-vue.css';
   @import '~vue-context/src/sass/vue-context';
   .puzzle-tooltip-container {
-    color:white;
     position: fixed;
     background-color:$med-dark-blue;
     z-index: 2;
-    overflow: visible;
     height:auto;
     top:0px;
     left:0px;
     min-width:250px;
     max-width: 350px;
-    border-radius:5px;
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
   }
   .puzzle {
     flex-basis: 50%;
-    flex-grow: 1;
-    flex-shrink: 0;
     border-bottom: white solid 1px;
-    padding: 5px;
   }
   .puzzle-name, .puzzle-description {
     flex-basis: 100%;
   }
-  .puzzle-user, .puzzle-reward {
-    text-align: left;
-  }
-  .puzzle-solvers, .puzzle-comments {
-    text-align: right;
-  }
-  .puzzle-description {
-    border: none;
-  }
 </style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 7f7be8f7..a2bb6e41 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -1,6 +1,6 @@
 <template>
   <li
-    class="chat-message"
+    class="chat-message d-block"
     @mouseleave="hover = false"
     @mouseover="hover = true"
   >
@@ -39,7 +39,7 @@
     </div>
     <div style="overflow:hidden">
       <button
-        class="chat-message-options"
+        class="chat-message-options mr-2 overflow-hidden text-white border-0"
         @click.prevent="openContextMenu"
         @keypress.enter.prevent="openContextMenuWithKey"
         v-show="hover && message.user && message.user.username"
@@ -293,12 +293,7 @@
 @import "../../assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
-  a {
-    color: #fff;
-  }
-
   .chat-message {
-    display: block;
     position: relative;
   }
 
@@ -344,14 +339,9 @@
     position: absolute;
     top: -4px;
     right: 15px;
-    margin-right:10px;
     font-size: 20px;
-    display: block;
     cursor: pointer;
-    overflow: visible;
     background-color: transparent;
-    color: white;
-    border: none;
   }
 
   .chat-message-options:focus {
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 75b466a3..d1f00e3d 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="user-tooltip-container"
+    class="user-tooltip-container text-white d-flex rounded flex-row flex-wrap overflow-auto"
     ref="container"
     :style="{
       top: `${top + 5}px`,
@@ -97,18 +97,13 @@
   @import '~bootstrap-vue/dist/bootstrap-vue.css';
   @import '~vue-context/src/sass/vue-context';
   .user-tooltip-container {
-    color:white;
     position: fixed;
     background-color:$med-dark-blue;
-    z-index: 1501;
-    overflow: visible;
+    z-index: 99;
     height:auto;
     top:0px;
     left:0px;
     width:250px;
-    border-radius:5px;
-    display: flex;
-    flex-flow: row wrap;
   }
   .user {
     flex: 0 1 50%;
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 2a6200d3..56151a1a 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -3,7 +3,7 @@
     <a
       v-if="user"
       target="_blank"
-      class="username"
+      class="username text-decoration-none font-weight-bold"
       @focus="$emit('focus')"
       @blur="$emit('blur')"
       :style="{ color: displayedColor }"
@@ -132,10 +132,6 @@
 </script>
 
 <style scoped lang="scss">
-  .username {
-    text-decoration: none;
-    font-weight: bold;
-  }
   .username:focus {
     outline: 1px dotted #212121;
     outline: 5px auto -webkit-focus-ring-color;
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index f330fa70..4cf36864 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -8,14 +8,17 @@
       style="padding: 5.6px 7px;"
       :style="{height: `calc(100% - ${footerHeight}px - 5.6px * 0)`}"
     >
-      <VuePerfectScrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHandle">
+      <VuePerfectScrollbar
+        class="scroll-area m-auto w-100 h-100"
+        :settings="settings"
+        @ps-scroll-y="scrollHandle" >
         <div style="height: 100%; word-wrap: break-word; white-space: normal;">
           <slot ref="slot"/>
         </div>
       </VuePerfectScrollbar>
     </div>
 
-    <div ref="footer" id="footer">
+    <div ref="footer" id="footer" class='overflow-auto p-1'>
       <slot name="footer"/>
     </div>
   </div>
@@ -99,9 +102,6 @@
 <style lang="scss">
   .scroll-area {
     position: relative;
-    margin: auto;
-    width: 100%;
-    height: 100%;
   }
 
   .ps.ps--active-x > .ps__scrollbar-x-rail,
@@ -109,8 +109,6 @@
     background-color: transparent !important;
   }
   #footer {
-    overflow: auto;
-    padding: 5px;
     bottom:0px;
     position:absolute; /* Necessary to keep it at the bottom */
     width:calc(100% + 2px);
diff --git a/src/app/components/Panes/UnreadMessageBanner.vue b/src/app/components/Panes/UnreadMessageBanner.vue
index 03174826..cbd7cd0f 100644
--- a/src/app/components/Panes/UnreadMessageBanner.vue
+++ b/src/app/components/Panes/UnreadMessageBanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="btn unread-banner-container">
+  <button class="btn unread-banner-container rounded w-100 p-1 btn-primary">
     {{messages}} new message{{messages === 1 ? 's' : ''}}
   </button>
 </template>
@@ -19,13 +19,7 @@
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
 .unread-banner-container {
-  width:90%;
-  left:5%;
-  margin-top: 2px;
-  background-color:$green !important;
-  border-radius:5px !important;
   position:sticky;
   bottom:0;
-  text-align:center;
 }
 </style>
diff --git a/src/app/components/Slideout/Chat/AddChatButton.vue b/src/app/components/Slideout/Chat/AddChatButton.vue
index 4ad5888d..417f5ed2 100644
--- a/src/app/components/Slideout/Chat/AddChatButton.vue
+++ b/src/app/components/Slideout/Chat/AddChatButton.vue
@@ -1,9 +1,13 @@
 <template>
   <div class="add-chat-container">
-    <button @click="addChat">+</button>
-    <span class="input-container">
+    <button
+      @click="addChat"
+      class='btn btn-primary text-center border-0 rounded mt-0 p-0 d-inline-block align-top'
+    >+</button>
+    <span class="input-container d-inline-block align-baseline">
       #<input
         @keypress.enter="addChat(); chatName = ''"
+        class='h-100 float-right'
         v-model="chatName"
         aria-label="Add a channel"
     ></span>
@@ -35,9 +39,9 @@
 
 
 <style lang="scss" scoped>
-  @import "../../../assets/_custom.scss";
   @import "~bootstrap/scss/bootstrap.scss";
   @import '~bootstrap-vue/dist/bootstrap-vue.css';
+  @import "../../../assets/_custom.scss";
   /* Style the buttons that are used to open the tab content */
   .add-chat-container {
     transition: 0.3s;
@@ -51,27 +55,17 @@
   button {
     height: 30px;
     width: 30px;
-    background-color: $green;
-    text-align: center;
-    padding-top:2px;
-    font-size: 18px;
-    border: none;
-    color: white;
-    display: inline-block;
-    border-radius: 4px;
+    padding-top: 2px;
     margin-right: 10px;
+    font-size: 18px;
   }
   .input-container {
     height: 30px;
     width: calc(100% - 40px);
-    display: inline-block;
     font-size: 20px;
-    vertical-align: baseline;
   }
   input {
     width: calc(100% - 1rem - 2px);
-    float: right;
-    height: 100%;
     padding-bottom: 2px;
   }
 </style>
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index 71f2ab7a..19f4b9d0 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -1,15 +1,15 @@
 <template>
-  <Button
-    class="chat-select"
+  <button
+    class="chat-select border-0 font-weight-bold text-white d-block w-100"
     :class="{active: isActive}"
     @click="$emit('input');"
     :aria-label="`Open the ${name.substring(1)} channel`"
   >
-    <p class='channel-name'>{{ name }}</p>
-    <p class='channel-description'>{{ description }}</p>
+    <p class='channel-name text-justify ml-1 mb-2'>{{ name }}</p>
+    <p class='channel-description text-justify ml-1'>{{ description }}</p>
     <button class="channel-close" @click="close" v-show="joined">X</button>
     <slot />
-  </Button>
+  </button>
 </template>
 
 <script lang="ts">
@@ -51,19 +51,12 @@
 <style lang="scss" scoped>
   /* Style the buttons that are used to open the tab content */
   .chat-select {
-    border: none;
     cursor: pointer;
     padding: 0.4em 1.25em;
     font-family: "Open Sans","Century Gothic", "Didact Gothic", Arial, sans-serif;
     font-size: 12px;
-    font-weight: bold;
-    color: #fff;
     background-color: black;
-    text-transform: none;
-    display:block;
-    width: 100%;
     height:90px;
-    margin:0px;
     position: relative;
     transition: all 0.2s !important;
   }
@@ -83,15 +76,10 @@
   .channel-name { /* Name of chat channel */
     margin-top:2px;
     font-size: 20px;
-    text-align: justify;
-    margin-left:5px;
-    margin-bottom:10px;
   }
 
   .channel-description { /* Description of chat channel */
     font-size: 12px;
-    text-align:justify;
-    margin-left:5px;
   }
   .notified { /* Text color when notified */
     color:#e74c3c;
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index 710375e7..6cfe5abb 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="hamburger"
+    class="hamburger d-inline-block border-0"
     @click="$emit('input', !value)"
     :class="{
       notified:notification,
@@ -29,7 +29,6 @@
 </script>
 <style scoped>
 .hamburger { /* Normal hamburger icon */
-  display:inline-block;
   width:40px;
   height:40px;
   background-image: url("../../assets/hamburger.png");
@@ -37,7 +36,6 @@
   background-size: 50% 45%;
   background-position: bottom 10px left 11px;
   background-color: transparent;
-  border: none;
 }
 .notified { /* Notified hamburger icon */
   background-image: url("../../assets/hamburger-notification.png");
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index 4f65a8a2..db5aa104 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -28,7 +28,7 @@
         <button
           v-for="color in defaultColors"
           :key="color"
-          class="swatch"
+          class="swatch border-0 m-1"
           :style="{ backgroundColor:color }"
           @click="setColor(color)" />
       </div>
@@ -168,8 +168,6 @@
   .swatch { /* Swatch colors */
     width:25px;
     height:15px;
-    margin:5px;
-    border: none;
   }
   #swatch-container { /* Container for swatches */
     display: grid;
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index 73fc5e6f..54e9537e 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class='color-slider-container'>
+  <div class='color-slider-container overflow-hidden ml-0 mt-2 mb-2'>
     <input
       aria-label="Slider to control a color value"
-      class="slider"
+      class="slider border-0"
       v-model="sliderValue"
       type=range min=0 max=255
       :style='{ background:getGradient()}'
       :name="colorID">
     <span
-      class="value-thumb"
+      class="value-thumb text-center overflow-hidden d-inline-block"
       :style="{ left: calculateOffset}"
     >{{sliderValue}}</span>
     <input type=number v-model="sliderValue" class="slider-input-number">
@@ -81,23 +81,16 @@
   .color-slider-container { /* Container */
     position:relative;
     height:20px;
-    margin:8px;
-    margin-left:0;
     width:180px;
-    padding:0;
-    overflow:hidden;
   }
   .slider { /* Sliders for color values */
     -webkit-appearance: none;
     appearance: none;
     outline: none;
-    border: none;
     border-radius:2px;
     height:15px;
     margin:2px;
-    margin-left:0px;
     width:120px;
-    padding:0;
   }
   .slider::-webkit-slider-thumb { /* Draggable part of slider (for webkit compatibility) */
     -webkit-appearance: none;
@@ -123,11 +116,7 @@
     position:absolute;
     /* Disables clicks or highlights to the text, so they 'pass through' to the slider */
     pointer-events:none;
-    overflow-x:hidden;
-    text-align:center;
     width:40px;
-    display:inline-block;
-    margin:0px;
     font-size: 14px !important;
     height:20px;
     top: 0px;
diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
index 396b57ef..a0a17367 100644
--- a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -4,8 +4,7 @@
         <li v-for="user in ignoredUsers" :key="user">
           <span style="vertical-align: sub">{{user}}</span>
           <button
-            :style="{ fontSize:`${11 / 14}rem` }"
-            class='unignore-user btn settings-button'
+            class='float-right btn btn-primary btn-sm'
             :aria-label="`Ignore user ${user}`"
             v-on:click="unignore(user)" >
             Unignore
@@ -15,9 +14,7 @@
         <li v-show="anyIgnoredUsers" class="height-normal">
           <button
           aria-label="Unignore all users"
-          :style="{ fontSize:`${11 / 14}rem` }"
-          style="width:100%"
-          class='btn settings-button'
+          class='btn btn-primary w-100 btn-sm'
           v-on:click="unignore('*')"
           >
           Unignore All
@@ -53,20 +50,10 @@
   }
 </script>
 <style lang="scss" scoped>
-@import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
-.settings-button {
-  background-color:$green;
-  display: inline-block;
-}
 li {
   width:calc(100% - 40px);
   height:36px;
 }
-.unignore-user {
-  float:right;
-}
 .height-normal {
   height:auto;
 }
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 636c979a..576ec744 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -5,14 +5,14 @@
             v-for="channel in channels"
             :key="channel.name"
             :aria-label="`Notifications for ${channel.name}`" >
-            <span style="vertical-align:baseline">{{channel.name}}</span>
+            <span class="align-baseline">{{channel.name}}</span>
             <span class="switch">
               <SettingsSwitch v-model="$vxm.chat.channels[channel.name].notificationsEnabled"
               @input="updateNotifications(channel.name)" />
             </span>
           </li>
           <li aria-label="Notifications for all channels">
-            <span style="vertical-align:baseline">All</span>
+            <span class="align-baseline">All</span>
             <span class="switch">
               <SettingsEnableDisable :value="allEnabled" @input="updateAll" />
             </span>
@@ -20,26 +20,25 @@
         </ul>
         <li>
           <span
-            style="vertical-align:baseline; display: inline-block"
+            class="align-baseline d-inline-block"
             aria-label="Appears in the page title if you have notifications" >
             Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
           </span>
-          <span style="float: right; width: 40%">
+          <span style="width: 40%" class='float-right'>
             <input type=text v-model="indicator" style="padding:1px;">
           </span>
         </li>
         <li>
-          <span style="vertical-align:baseline; display:inline-block">Desktop Notifications</span>
+          <span class="align-baseline d-inline-block">Desktop Notifications</span>
           <span
             class="switch"
-            style="vertical-align: baseline"
             aria-label="Whether notifications should be sent directly to your computer">
            <SettingsSwitch v-model="desktopNotifications" />
           </span>
         </li>
         <li>
           <span
-            style="vertical-align:baseline; display: inline-block;"
+            class="align-baseline d-inline-block;"
             aria-label="Keywords that trigger notifications.
             If you have multiple keywords, separate them with commas.
             Your username is automatically a keyword.">
@@ -47,7 +46,7 @@
             <SettingsTooltip text="If you have multiple keywords, separate them with commas.
             Your username is automatically a keyword." />
           </span>
-          <span style="float: right; width: 40%">
+          <span class='float-right' style="width: 40%">
             <input type=text v-model="keywords" style="padding:1px;">
           </span>
         </li>
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index 0316f9f9..40636e1f 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -2,20 +2,19 @@
   <SettingsSection title="Operator" >
     <li aria-label="Whether you are a chat moderator/operator">
       <span>You are {{isOper ? '' : 'not'}} an operator</span>
-      <span style="float: right">
+      <span class="float-right">
         <button
           aria-label="Log in as an operator"
           @click="$emit('auth')"
-          :style="{ fontSize:`${11 / 14}rem` }"
-          class="btn settings-button"
+          class="btn btn-primary btn-sm"
           v-show="!isOper" >
             Log in
         </button>
       </span>
     </li>
     <li>
-      <span v-show="isOper" style="vertical-align: sub">Nick</span>
-      <span style="float: right">
+      <span v-show="isOper" class="align-sub">Nick</span>
+      <span class="float-right">
         <input v-show="isOper" @input="setNick" :value="opernick">
       </span>
     </li>
@@ -60,12 +59,6 @@
   }
 </script>
 <style lang="scss" scoped>
-@import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
-.settings-button {
-  background-color:$green;
-}
 input {
   margin:2px;
   font-size: 0.85rem;
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index cf9e86e4..b045c84b 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -2,7 +2,7 @@
   <SettingsSection title="Status" >
     <li>
       <span
-        style="vertical-align: middle"
+        class="align-middle"
         aria-label="When others view your username, they will see an indicator if you are away">
         You are currently {{userStatus ? 'away' : 'online'}}
         <SettingsTooltip
@@ -15,7 +15,7 @@
         <SettingsTooltip
           text="Change your status"
         /></span>
-      <span style="float:right;">
+      <span class="float-right;">
         <SettingsEnableDisable
           :value="!userStatus"
           @input="changeStatus"
@@ -30,7 +30,7 @@
           text="Whether your status will update when you leave or come back to the tab"
         />
       </span>
-      <span style="float: right">
+      <span class="float-right">
         <SettingsSwitch
           v-model="$vxm.chat.autoUpdateStatus"
           aria-label="Whether your status will update when you leave or come back to the tab"
@@ -46,7 +46,7 @@
           text="When others see the away indicator, they will see the reason you are away"
         />
       </span>
-      <span style="float:right">
+      <span class="float-right">
         <input type=text v-model="reason">
       </span>
     </li>
@@ -104,9 +104,6 @@
 @import "@/assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
-.settings-button {
-  background-color:$green;
-}
 li {
   list-style-type: none;
   width: calc(100% - 40px);
diff --git a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
index 0fcfdc65..c8f19004 100644
--- a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
@@ -8,7 +8,7 @@
       </p>
       <SettingsTooltip
         text="Must be a number between 10 and 18. Default is 14"
-        style="vertical-align:middle"
+        class="align-middle"
       />
     </SettingsSection>
 </template>
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 374f0ce8..35e5e094 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -2,34 +2,34 @@
   <SettingsSection title="Toolbar Features">
     <ul aria-label="Which features are enabled in the toolbar">
       <li aria-label="Whether emoticons are enabled in the toolbar">
-        <span class="left-side">
+        <span class="align-sub">
           Emoticons
           <SettingsTooltip text="Whether the emoticons menu in the toolbar is visible" />
         </span>
-        <span style="float: right"><SettingsSwitch v-model="emoticonChatFeatures" /></span>
+        <span class="float-right"><SettingsSwitch v-model="emoticonChatFeatures" /></span>
       </li>
       <li aria-label="Whether markdown is enabled in the toolbar">
-        <span class="left-side">
+        <span class="align-sub">
           Markdown
           <SettingsTooltip text="Whether the markdown menu in the toolbar is visible" />
         </span>
-        <span style="float: right"><SettingsSwitch v-model="markdownChatFeatures" /></span>
+        <span class="float-right"><SettingsSwitch v-model="markdownChatFeatures" /></span>
       </li>
       <li aria-label="Whether the preview is enabled in the toolbar">
-        <span class="left-side">
+        <span class="align-sub">
           Preview
           <SettingsTooltip text="Whether the markdown preview menu in the toolbar is visible" />
         </span>
-        <span style="float: right"><SettingsSwitch v-model="previewChatFeatures" /></span>
+        <span class="float-right"><SettingsSwitch v-model="previewChatFeatures" /></span>
       </li>
       <li>
-        <span class="left-side">All</span>
-        <span style="float: right">
+        <span class="align-sub">All</span>
+        <span class="float-right">
           <SettingsEnableDisable :value="allChatFeatures" @input="allChatFeaturesChanged" />
         </span>
       </li>
     </ul>
-    <ul style="margin-top:10px" v-if="$vxm.settings.emoticonChatFeatures"
+    <ul class="mt-2" v-if="$vxm.settings.emoticonChatFeatures"
       aria-label="Change custom emoticons that appear in the toolbar">
       <li>
         Custom emoticons
@@ -41,13 +41,14 @@
         :key="emote"
         :aria-label="`Change emote in slot ${index}`">
           {{ emote}}
-          <span style="float: right">
+          <span class="float-right">
           <label :for="index">Replace with</label>
           <input
             :name="index"
             :id="index"
             @input="update"
-            style="width:1rem; position: relative; bottom: 2px; height:1rem; margin-left: 5px" />
+            class='ml-1'
+            style="width:1rem; position: relative; bottom: 2px; height:1rem" />
           </span>
       </li>
       <li v-show="emoticonErrorMessage && emoticonErrorMessage !== ''">
@@ -57,7 +58,7 @@
     <li style="list-style-type: none">
       Typing messages
       <SettingsTooltip text="Whether you see messages above the toolbar when people are typing" />
-      <span style="float: right">
+      <span class="float-right">
         <SettingsSwitch v-model="$vxm.settings.typingMessages" />
       </span>
     </li>
@@ -185,12 +186,6 @@
 @import "@/assets/_custom.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 @import "~bootstrap-vue/dist/bootstrap-vue.css";
-.settings-button {
-  background-color: $green;
-}
-.left-side {
-  vertical-align: sub;
-}
 .feature-button-container {
   padding: 2px;
 }
diff --git a/src/app/components/Slideout/Settings/SettingsSection.vue b/src/app/components/Slideout/Settings/SettingsSection.vue
index d05a1598..cddc1235 100644
--- a/src/app/components/Slideout/Settings/SettingsSection.vue
+++ b/src/app/components/Slideout/Settings/SettingsSection.vue
@@ -1,9 +1,9 @@
 <template>
   <section>
       <li class="settings-section-header">
-      <h5 class="heading" >{{title}}</h5>
+      <h5 class="heading mt-1 mb-1 ml-0 d-inline-block" >{{title}}</h5>
       <MinimizationTriangle
-        style="display:inline-block"
+        class="d-inline-block"
         settings="true"
         @input="update($event)"
         v-model="open" />
@@ -86,9 +86,4 @@ li {
   right:10px;
   top:0px;
 }
-.heading {
-  display:inline-block;
-  margin:4px;
-  margin-left:0;
-}
 </style>
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index 984aae37..d1968a24 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="settings-wrapper" :style="{ fontSize:`${fontSize}px` }">
+  <div
+    id="settings-wrapper"
+    class="pt-1 pb-1 pr-1 pl-3 overflow-auto"
+    :style="{ fontSize:`${fontSize}px` }" >
     <TextSizeSection />
     <IgnoredSection />
     <NotificationsSection />
@@ -54,9 +57,6 @@
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
 #settings-wrapper { /* Wrapper div */
-  padding:5px;
-  padding-left:20px;
   height:calc(100% - 50px);
-  overflow-y:auto;
 }
 </style>
diff --git a/src/app/components/Slideout/Users/SlideoutUsername.vue b/src/app/components/Slideout/Users/SlideoutUsername.vue
index e21772cb..57c008b8 100644
--- a/src/app/components/Slideout/Users/SlideoutUsername.vue
+++ b/src/app/components/Slideout/Users/SlideoutUsername.vue
@@ -7,7 +7,7 @@
       @focus="hover = true" />
       <div style="overflow:hidden">
       <button
-        class="chat-message-options"
+        class="chat-message-options border-0"
         ref="chatOptions"
         @click.prevent="openContextMenu"
         v-show="hover && user.username"
@@ -79,7 +79,6 @@
     cursor: pointer;
     overflow: visible;
     background-color: transparent;
-    border: none;
   }
   .chat-message-options:focus {
     outline: 1px dotted #212121;
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 06aaac73..1ec021c0 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -57,10 +57,10 @@ md.renderer.rules.text = (tokens, idx, options, env, self) => {
   [...content.matchAll(/@\S+\s/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<mark class="user-link">${e[0].trim()}</mark>`);
   });
-  [...content.matchAll(/https?:\/\/eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
+  [...content.matchAll(/(https?:\/\/)?eterna(game|dev).org\/sites\/default\/files\/chat_screens\/\d+_\d+\.png/g)].forEach(e => {
     content = content.replace(e[0].trim(), `<a href="${e[0].trim()}" class="image-link" target="_blank"><img class="screenshot" src="${e[0].trim()}"></a>`);
   });
-  [...content.matchAll(/https?:\/\/eternagame\.org\/(game\/)?puzzles?\/\d+\/?/g)].forEach(e => {
+  [...content.matchAll(/(https?:\/\/)?eternagame\.org\/(game\/)?puzzles?\/\d+\/?/g)].forEach(e => {
     content = content.replace(e[0], `<mark class="puzzle-link">${e[0]}</mark>`);
   });
   [...content.matchAll(/\|[^|]+\|/g)].forEach(e => {

From 0bf7e2fff6401349f40a4a125c0298a347ea8938 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 16 Jul 2020 08:32:56 -0500
Subject: [PATCH 184/223] More bootstrap + bug fixes

---
 src/app/components/LinkModal.vue              | 32 ++++++-------------
 src/app/components/Messages/UserMessage.vue   |  7 ++--
 src/app/components/OperLogin.vue              |  4 +--
 .../Slideout/HamburgerMenuButton.vue          |  2 +-
 src/app/components/Slideout/Slideout.vue      | 14 ++++----
 .../components/Slideout/SlideoutButton.vue    | 13 ++++----
 6 files changed, 27 insertions(+), 45 deletions(-)

diff --git a/src/app/components/LinkModal.vue b/src/app/components/LinkModal.vue
index 36329ef7..b8d83930 100644
--- a/src/app/components/LinkModal.vue
+++ b/src/app/components/LinkModal.vue
@@ -1,24 +1,21 @@
 <template>
-  <div class="link panel" v-if="openModal" tabindex=0>
+  <div class="link panel rounded p-2" v-if="openModal" tabindex=0>
     <p
-      tabindex=0
     >
       This link goes to <a target="_blank" :href="url">{{url}}</a>.
     </p>
     <button
-      tabindex=0
       aria-label="Click to travel to the link you clicked on"
-      class="btn link-button btn-primary"
-      style="width: 100%; left: 50%; margin-top:10px"
+      class="btn link-button btn-primary w-100 mt-2"
+      style="left: 50%"
       @click="openModal = false"
     >
     <a :href="url" target="_blank">Continue</a>
     </button>
     <button
-      tabindex=0
       aria-label="Click to return to the chat; this cancels opening the link"
-      class="btn link-button btn-primary"
-      style="width: 100%; left: 50%; margin-top:10px;"
+      class="btn link-button btn-primary w-100 mt-2"
+      style="left: 50%;"
       @click="openModal = false;"
     >
       Cancel
@@ -27,42 +24,33 @@
 </template>
 
 <script lang="ts">
-  import BootstrapVue from 'bootstrap-vue';
   import {
     Component, Vue, Prop, Watch,
   } from 'vue-property-decorator';
 
-  Vue.use(BootstrapVue);
-
   @Component
   export default class LinkModal extends Vue {
-    @Prop({ required: true })
     url !: string;
 
     openModal: boolean = false;
+
+    open(url: string) {
+      this.openModal = true;
+      this.url = url;
+    }
   }
 </script>
 
 <style lang="scss">
-@import "../assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
   .link {
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    padding: 10px;
     background-color:#043468;
-    border-radius:10px;
     z-index:3;
   }
 
-  .link-button {
-    color:white;
-    background-color:$green !important;
-  }
-
   .link-button > a:hover {
     text-decoration: none;
   }
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index a2bb6e41..ec5c707a 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -214,19 +214,18 @@
           this.puzzleTooltipY = ev.clientY;
         });
       });
-      const usernames = Object.keys(this.$vxm.chat.connectedUsers);
       [...this.$el.getElementsByClassName('external-link')]
         .forEach((el) => {
           const e = el as HTMLAnchorElement;
           e.addEventListener('click', ev => {
             ev.preventDefault();
-            ev.stopImmediatePropagation();
-            if (e.href.trim() !== '') this.$refs.linkModal.url = e.href;
-            this.$refs.linkModal.openModal = true;
+            if (e.href.trim() !== '') this.$refs.linkModal.open(e.href);
           });
       });
     }
 
+    openLinkModal = false;
+
     tooltipX = 0;
 
     tooltipY = 0;
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index 8222dea3..6921643a 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login panel">
+  <div class="login panel p-2 rounded">
     <div class="trans-panel rounded-10" v-show="showsMessage">
       <p> {{message}}</p>
       <button
@@ -78,9 +78,7 @@
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    padding: 10px;
     background-color:#043468;
-    border-radius:10px;
     z-index:3;
   }
 
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index 6cfe5abb..ae10a335 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="hamburger d-inline-block border-0"
+    class="hamburger d-inline-block border-0 align-top"
     @click="$emit('input', !value)"
     :class="{
       notified:notification,
diff --git a/src/app/components/Slideout/Slideout.vue b/src/app/components/Slideout/Slideout.vue
index 9ab14984..d420a15c 100644
--- a/src/app/components/Slideout/Slideout.vue
+++ b/src/app/components/Slideout/Slideout.vue
@@ -1,12 +1,15 @@
 <template>
   <div
     style="position:relative; width:70%"
-    class="slideout-container"
+    class="slideout-container text-white"
     :class="{ slideoutContainerHidden: !checked, tall:checked}"
   >
     <HamburgerMenuButton v-model="checked" :notification="notifications" :mention="mentions"/>
     <span v-show="checked">
-      <span id="slideout-header">
+      <span
+      id="slideout-header"
+      class='align-items-center d-inline-flex'
+      >
         <SlideoutButton
           :selected="chatSelected"
           name="chat"
@@ -153,16 +156,13 @@
 <style scoped>
 .hamburger { /* Hamburger button */
   position: relative;
-  vertical-align: top;
 }
 .slideout-container { /* Container for slideout */
-  width:fit-content;
   background-color:black;
-  color:white;
-  height:100%;
   top:0px;
   left:0px;
   z-index: 2;
+  height: 100%;
 }
 .slideoutContainerHidden { /* When slideout is closed */
   height:0px;
@@ -182,8 +182,6 @@
   animation: slide 0.25s;
 }
 #slideout-header { /* Displays tab buttons */
-  display:inline-flex;
-  align-items: center; /* Centers buttons vertically */
   height:40px;
   margin-left:-15px; /* Treats hamburger button distance correctly */
   width: calc(100% - 30px); /* Makes sure there is room to fill */
diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 1d8650bc..cb1af401 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -1,7 +1,12 @@
 <template>
   <!-- Centers images -->
-  <button @click="$emit('input')" :aria-label="`Open the ${name} tab of the slideout`">
+  <button
+    class='border-0'
+     @click="$emit('input')"
+     :aria-label="`Open the ${name} tab of the slideout`"
+  >
     <center
+    class='border-0 font-weight-bold text-white d-inline-block'
     @click="$emit('input')"
   >
     <img
@@ -31,20 +36,14 @@
 <style lang="scss" scoped>
   /* Style the buttons that are used to open the tab content */
   center {
-    border: none;
     outline: none;
     cursor: pointer;
     transition: 0.3s;
     font-family: "Century Gothic", "Didact Gothic", Arial, sans-serif;
     font-size: 12px;
-    font-weight: bold;
-    color: #fff;
-    text-transform: capitalize;
     width:40px;
-    display:inline-block;
   }
   button {
     background-color:transparent;
-    border:none;
   }
 </style>

From 0ec10e25c2fba323a78425b6f3820b31147807ab Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Thu, 16 Jul 2020 11:57:56 -0500
Subject: [PATCH 185/223] Updated readme for multiple channels

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6c12631d..f7053dad 100644
--- a/README.md
+++ b/README.md
@@ -33,4 +33,4 @@ npm run test:e2e
 ```
 
 ## Contributing
-Feel free to fork this repository, make some changes, and create a pull request. Your changes will then be revewed, merged, and deployed once accepted. It is encouraged to use a channel other than #global (the default) for testing purposes if it could be disruptive.
+Feel free to fork this repository, make some changes, and create a pull request. Your changes will then be reviewed, merged, and deployed once accepted. We encourage you to use different channels than the main ones (#general, #off-topic, #help, and #labs) if your testing could be considered disruptive.

From 6436639ef9167b2e556732bc571ca6c52168c54c Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 17 Jul 2020 21:42:48 -0500
Subject: [PATCH 186/223] Appeased TS, made it hopefully work w/ website

---
 package.json                                 |  1 +
 src/app/App.vue                              | 10 +++-------
 src/app/components/DraggableDiv.vue          | 12 ++++++------
 src/app/components/Messages/MessageGroup.vue |  2 +-
 src/app/components/Panes/MessagePane.vue     |  2 +-
 5 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index d751174f..9b9fbf2a 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "html-chat",
   "version": "0.1.0",
   "private": true,
+  "main": "src/app/App.vue",
   "scripts": {
     "start": "npm run serve",
     "serve": "vue-cli-service serve",
diff --git a/src/app/App.vue b/src/app/App.vue
index 2d5fb9f3..a5a86863 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -142,8 +142,8 @@
     }
     if (this.fullSize === false) {
       // Scrolls down when the chat is brought back to normal size
-      if (this.$refs.messagepanes && this.$refs.messagepanes[this.activeTab]) {
-        this.$refs.messagepanes[this.activeTab].onContentChanged();
+      if (this.$refs.messagepanes && this.$refs.messagepanes[this.activeTab as number]) {
+        this.$refs.messagepanes[this.activeTab as number].onContentChanged();
       }
     }
   }
@@ -330,7 +330,7 @@
     reportDialog: ReportDialog;
     login: OperLogin,
     privmsgmodal: PrivateMessageModal,
-    messagepanes: MessagePane,
+    messagepanes: MessagePane[],
     slideout: Slideout,
   };
 
@@ -357,10 +357,6 @@
           this.$vxm.chat.loadMessagesForChannel('#general');
           this.logInOper();
           setTimeout(() => {
-            /* This gives an error because it doesn't recognize
-            using ref on a v-for gives an Array of VueComponents.
-            It think's its just a normal MessagePane
-            */
             const pane = this.$refs.messagepanes[0];
             if (pane) {
               pane.scrollDown();
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 3334d7b9..478e7424 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -17,8 +17,8 @@
   @Component
   export default class DraggableDiv extends Vue {
     positions = {
-      clientX: undefined,
-      clientY: undefined,
+      clientX: 0,
+      clientY: 0,
       movementX: 0,
       movementY: 0,
     };
@@ -30,7 +30,7 @@
     positionBasis !: string;
 
     get container() {
-      return this.$refs.draggableContainer;
+      return this.$refs.draggableContainer as HTMLDivElement;
     }
 
     @Watch('enabled')
@@ -41,7 +41,7 @@
       }
     }
 
-    dragMouseDown(event) {
+    dragMouseDown(event: MouseEvent) {
       if (this.enabled) {
         this.$emit('dragMouseDown');
         event.preventDefault();
@@ -53,7 +53,7 @@
       }
     }
 
-    elementDrag(event) {
+    elementDrag(event: MouseEvent) {
       if (this.enabled) { // If dragging isn't disabled
         event.preventDefault();
         this.positions.movementX = this.positions.clientX - event.clientX;
@@ -80,7 +80,7 @@
           left, top, width, height,
         } = this.container.style;
         const chatPosition = {
-          x: (left.replace('px', '')),
+          x: Number(left.replace('px', '')),
           y: Number(top.replace('px', '')),
         };
         const chatSize = {
diff --git a/src/app/components/Messages/MessageGroup.vue b/src/app/components/Messages/MessageGroup.vue
index 06fc018f..34c1305b 100644
--- a/src/app/components/Messages/MessageGroup.vue
+++ b/src/app/components/Messages/MessageGroup.vue
@@ -21,7 +21,7 @@
   })
   export default class MessageGroup extends Vue {
     @Prop({ required: true })
-    messages: Message[];
+    messages !: Message[];
   }
 </script>
 <style lang="scss">
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 9bce6112..031d8cbc 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -112,7 +112,7 @@
       const msgs = this.displayedMessages;
       // Creates and array of Message arrays and Messages. Messages by the same user
       // are grouped together in one array. Other, non-grouped messages are in the main array
-      const temp = [];
+      const temp: any = [];
       msgs.forEach(e => {
         const len = temp.length - 1;
         // If it's the first message, add it

From 14a2ba150cd4a9185e2f919309269e6cf06e4859 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 17 Jul 2020 21:57:52 -0500
Subject: [PATCH 187/223] try 2 for making it work with the website

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

diff --git a/package.json b/package.json
index 9b9fbf2a..6b10bdf2 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,12 @@
   "name": "html-chat",
   "version": "0.1.0",
   "private": true,
-  "main": "src/app/App.vue",
+  "main": "/dist/html-chat.umd.js",
   "scripts": {
     "start": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build-bundle": "vue-cli-service build --target lib --name html-chat ./src/app/App.vue",
     "lint": "vue-cli-service lint",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit"

From a65cba94f85b5f2e451195ae381eec2fc8d85a91 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 18 Jul 2020 12:28:31 -0500
Subject: [PATCH 188/223] Revert changes to package.json

---
 package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/package.json b/package.json
index 6b10bdf2..d751174f 100644
--- a/package.json
+++ b/package.json
@@ -2,12 +2,10 @@
   "name": "html-chat",
   "version": "0.1.0",
   "private": true,
-  "main": "/dist/html-chat.umd.js",
   "scripts": {
     "start": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build-bundle": "vue-cli-service build --target lib --name html-chat ./src/app/App.vue",
     "lint": "vue-cli-service lint",
     "test:e2e": "vue-cli-service test:e2e",
     "test:unit": "vue-cli-service test:unit"

From c6687801ef610cb5c124ba0f97eb215aa86a57a2 Mon Sep 17 00:00:00 2001
From: Jonathan Romano <lfp6.01@gmail.com>
Date: Mon, 20 Jul 2020 23:13:11 -0400
Subject: [PATCH 189/223] Delete todo.md

---
 todo.md | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 todo.md

diff --git a/todo.md b/todo.md
deleted file mode 100644
index 1c9b8f32..00000000
--- a/todo.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# List of features
-
-## Todo
-----
-
-- fix bugs, i guess
\ No newline at end of file

From c62f6dd28d296bbf8c765d82728a4eca93bfdeeb Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 21 Jul 2020 10:05:28 -0500
Subject: [PATCH 190/223] Update
 src/app/components/Slideout/Settings/Sections/IgnoredSection.vue

Co-authored-by: Jonathan Romano <lfp6.01@gmail.com>
---
 .../components/Slideout/Settings/Sections/IgnoredSection.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
index a0a17367..090a9f78 100644
--- a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -15,7 +15,7 @@
           <button
           aria-label="Unignore all users"
           class='btn btn-primary w-100 btn-sm'
-          v-on:click="unignore('*')"
+          @click="unignore('*')"
           >
           Unignore All
           </button>

From 69a3c0f73854d3cfc7189c9d431f3504838bf310 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 21 Jul 2020 10:09:45 -0500
Subject: [PATCH 191/223] Update
 src/app/components/Slideout/Settings/Sections/IgnoredSection.vue

Co-authored-by: Jonathan Romano <lfp6.01@gmail.com>
---
 .../components/Slideout/Settings/Sections/IgnoredSection.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
index 090a9f78..0126be92 100644
--- a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -6,7 +6,7 @@
           <button
             class='float-right btn btn-primary btn-sm'
             :aria-label="`Ignore user ${user}`"
-            v-on:click="unignore(user)" >
+            @click="unignore(user)" >
             Unignore
           </button>
         </li>

From 581004441089902b75f95399106b21f5064e8be7 Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 21 Jul 2020 10:09:54 -0500
Subject: [PATCH 192/223] Update
 src/app/components/Panes/UnreadMessageBanner.vue

Co-authored-by: Jonathan Romano <lfp6.01@gmail.com>
---
 src/app/components/Panes/UnreadMessageBanner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Panes/UnreadMessageBanner.vue b/src/app/components/Panes/UnreadMessageBanner.vue
index cbd7cd0f..2f9c6944 100644
--- a/src/app/components/Panes/UnreadMessageBanner.vue
+++ b/src/app/components/Panes/UnreadMessageBanner.vue
@@ -11,7 +11,7 @@
   @Component
   export default class UnreadMessageBanner extends Vue {
     @Prop({ required: true })
-    messages !: number;
+    messages!: number;
   }
 </script>
 <style lang="scss">

From a9b12a1402cc2a060dc1735aa15b247f0c61e10b Mon Sep 17 00:00:00 2001
From: AlexHalb <46549413+AlexHalb@users.noreply.github.com>
Date: Tue, 21 Jul 2020 10:10:03 -0500
Subject: [PATCH 193/223] Update src/app/components/Slideout/SlideoutButton.vue

Co-authored-by: Jonathan Romano <lfp6.01@gmail.com>
---
 src/app/components/Slideout/SlideoutButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index cb1af401..6d567370 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -10,7 +10,7 @@
     @click="$emit('input')"
   >
     <img
-    :alt="`${this.selected ? 'Selected' : 'Unselected'} ${name} tab image`"
+    :alt="`${this.selected ? 'Selected' : 'Unselected'} ${name} tab`"
     :src="require(`@/assets/${name}-icon-${selected ? 'green' : 'white'}.png`)"
     >
     <slot />

From 45e7a1cccf79ce747e788e6855a207f6aad5b2b1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 11:40:20 -0500
Subject: [PATCH 194/223] Settings tooltip fixes

---
 src/app/App.vue                               |  2 --
 .../Slideout/Settings/SettingsTooltip.vue     | 32 ++++++++++++++-----
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index a5a86863..ca51a5d2 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -461,8 +461,6 @@
   position: fixed; /* Makes sure everything is placed with respect to it, not to its parent */
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 350px; /* Bounds on chat resizing */
-  max-width: 450px;
-  max-height: 600px;
 }
 .eternaChatNormal {
   width: $container-width; // Fill in with normal size
diff --git a/src/app/components/Slideout/Settings/SettingsTooltip.vue b/src/app/components/Slideout/Settings/SettingsTooltip.vue
index 5d8b6688..a123356b 100644
--- a/src/app/components/Slideout/Settings/SettingsTooltip.vue
+++ b/src/app/components/Slideout/Settings/SettingsTooltip.vue
@@ -1,7 +1,18 @@
 <template>
-  <span :title="text" class="settings-tooltip">◯
+  <span
+    class="settings-tooltip"
+    :id="`settings-tooltip-${text.split(' ').slice(0, 3).join('_')}...`"
+  ><pre class="d-inline"> </pre>
+    <b-tooltip
+      :target="`settings-tooltip-${text.split(' ').slice(0, 3).join('_')}...`"
+      variant="light"
+      triggers="hover focus"
+    >
+      {{ text }}
+    </b-tooltip>
   </span>
 </template>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
 
@@ -12,15 +23,20 @@
   }
 </script>
 <style>
-.settings-tooltip {
-  position: relative;
-  font-size:16px;
-}
 .settings-tooltip:before {
   content:"?";
-  position:absolute;
-  left: 5px;
-  top:2px;
   font-size: 12px;
+  line-height: 1;
+  width: 1rem;
+  height: 1rem;
+  position: absolute;
+  border-radius: 50%;
+  border: 1px solid white;
+  padding: 1px;
+  text-align: center;
+  display: inline-block;
+  margin: 4px;
+  cursor:pointer;
+  margin-left: 0px;
 }
 </style>

From 777c2868f88ee554275514d2f4f7c5c9a7709047 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 11:59:27 -0500
Subject: [PATCH 195/223] Chat message options is visible and unobscured

---
 src/app/components/Messages/UserMessage.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index ec5c707a..1679e2b2 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -4,7 +4,7 @@
     @mouseleave="hover = false"
     @mouseover="hover = true"
   >
-    <div :style="{ textAlign: isNotice ? 'center' : 'left'}">
+    <div :style="{ textAlign: isNotice ? 'center' : 'left'}" class="message-container">
       <span :class="{'chat-message-action': isAction}">
         <Username
           :user="message.user"
@@ -37,7 +37,7 @@
       &lrm;
       <span v-if="!isNotice" class="message-time">[{{formattedTime}}]</span>
     </div>
-    <div style="overflow:hidden">
+    <div class="options overflow-hidden">
       <button
         class="chat-message-options mr-2 overflow-hidden text-white border-0"
         @click.prevent="openContextMenu"
@@ -334,11 +334,16 @@
     font-size: 0.8em;
   }
 
+  .message-container {
+    padding-right: 12px;
+  }
+
   .chat-message-options {
     position: absolute;
     top: -4px;
-    right: 15px;
+    right: 0px;
     font-size: 20px;
+    font-weight: bold;
     cursor: pointer;
     background-color: transparent;
   }

From 57c9fe6f26275d637052f2197f690dcfae1b01a2 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 12:07:00 -0500
Subject: [PATCH 196/223] Input toolbar/menu bug/styling fixes

---
 src/app/components/Input/EmoticonBar.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 91320c01..4b5a0708 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -15,7 +15,6 @@
       </div>
       <div
         id='markdown-submenu'
-        class='overflow-auto d-flex'
         v-show="markdownSelected && markdownChatFeatures"
       >
         <MarkdownWrapButton
@@ -34,7 +33,7 @@
         />
       </div>
       <div id='preview-submenu' v-show="previewSelected && previewChatFeatures">
-        <span v-html="inputHTML" id="preview-content"/>
+        <span v-html="inputHTML" id="preview-content" class="pl-1" />
       </div>
       <MenuButton
         id="close"
@@ -290,6 +289,8 @@
   flex-wrap: nowrap;
   width: calc(100% - 25px);
   height:25px;
+  overflow: auto;
+  display: flex;
 }
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar,

From b373e73adb005eff6d65f64c18a78ceefc8f8171 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 12:14:32 -0500
Subject: [PATCH 197/223] Toolbar menu buttons close submenus properly

---
 src/app/components/Input/EmoticonBar.vue        | 10 ++++------
 src/app/components/Input/MarkdownWrapButton.vue | 10 +++++++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 4b5a0708..7e4214ba 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -57,7 +57,6 @@
         name="👍"
         styles=""
         @button="select('emoticon');"
-        @close="close"
       />
       <MenuButton
         aria-label="Open markdown toolbar"
@@ -66,7 +65,6 @@
         name="A"
         styles="bold italics underline"
         @button="select('markdown');"
-        @close="close"
       />
       <MenuButton
         aria-label="Open preview toolbar"
@@ -75,7 +73,6 @@
         name="P"
         styles=""
         @button="select('preview');"
-        @close="close"
       />
       <MenuButton
         name="?"
@@ -132,17 +129,17 @@
     /* Opens emoticon or markdown submenu depending on which button was pressed */
     select(menu:string) {
       if (menu === 'markdown') {
-        this.markdownSelected = true;
+        this.markdownSelected = !this.markdownSelected;
         this.emoticonsSelected = false;
         this.previewSelected = false;
       } else if (menu === 'emoticon') {
         this.markdownSelected = false;
-        this.emoticonsSelected = true;
+        this.emoticonsSelected = !this.emoticonsSelected;
         this.previewSelected = false;
       } else if (menu === 'preview') {
         this.markdownSelected = false;
         this.emoticonsSelected = false;
-        this.previewSelected = true;
+        this.previewSelected = !this.previewSelected;
       }
       this.$emit('update');
     }
@@ -166,6 +163,7 @@
       this.markdownSelected = false;
       this.emoticonsSelected = false;
       this.previewSelected = false;
+      this.$emit('update');
     }
 
     // Changing input
diff --git a/src/app/components/Input/MarkdownWrapButton.vue b/src/app/components/Input/MarkdownWrapButton.vue
index b9280b23..17659c8e 100644
--- a/src/app/components/Input/MarkdownWrapButton.vue
+++ b/src/app/components/Input/MarkdownWrapButton.vue
@@ -1,7 +1,15 @@
 <template>
   <button
     id='md-wrap-button-container'
-    class='md-button text-white border-left-0 border-top-0 float-left pt-0 text-center'
+    class='
+    md-button
+    text-white
+    border-left-0
+    border-top-0
+    border-bottom-0
+    float-left
+    pt-0
+    text-center'
     @click="clicked">
     <span
       class="text"

From e4480a77c377f11c8a0e10604928050149d34ec9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 12:23:42 -0500
Subject: [PATCH 198/223] Scrollbar fix for firefox

---
 src/app/components/Input/EmoticonBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 7e4214ba..03fc69b2 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -289,6 +289,7 @@
   height:25px;
   overflow: auto;
   display: flex;
+  scrollbar-width: none;
 }
 ::-webkit-scrollbar-track,
 ::-webkit-scrollbar,

From 64dff3674ba45bf651759186f4cd22905de051e9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 12:29:11 -0500
Subject: [PATCH 199/223] Settings menu styles for small sizes

---
 .../components/Slideout/Settings/Sections/OperSection.vue   | 4 ++--
 .../components/Slideout/Settings/Sections/StatusSection.vue | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index 40636e1f..d8215f0a 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -2,11 +2,11 @@
   <SettingsSection title="Operator" >
     <li aria-label="Whether you are a chat moderator/operator">
       <span>You are {{isOper ? '' : 'not'}} an operator</span>
-      <span class="float-right">
+      <span class="float-right w-100">
         <button
           aria-label="Log in as an operator"
           @click="$emit('auth')"
-          class="btn btn-primary btn-sm"
+          class="btn btn-primary btn-sm w-100"
           v-show="!isOper" >
             Log in
         </button>
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index b045c84b..6b5efaed 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -15,7 +15,7 @@
         <SettingsTooltip
           text="Change your status"
         /></span>
-      <span class="float-right;">
+      <span class="float-right">
         <SettingsEnableDisable
           :value="!userStatus"
           @input="changeStatus"
@@ -25,7 +25,7 @@
       </span>
     </li>
     <li>
-      <span>Automatically Update
+      <span>Auto Update
         <SettingsTooltip
           text="Whether your status will update when you leave or come back to the tab"
         />
@@ -47,7 +47,7 @@
         />
       </span>
       <span class="float-right">
-        <input type=text v-model="reason">
+        <input type=text v-model="reason" style="width: 115px">
       </span>
     </li>
   </SettingsSection>

From 9dae491d17b2d746ccfc9d3cb644ce470c100842 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 12:39:31 -0500
Subject: [PATCH 200/223] Update styles and split into original files; delete
 unused variable in settings.vuex.ts

---
 src/app/assets/_bootswatch.scss | 359 ++++++++++++++++++++++
 src/app/assets/_custom.scss     | 516 +-------------------------------
 src/app/assets/_variables.scss  | 149 +++++++++
 src/app/store/settings.vuex.ts  |   2 -
 4 files changed, 512 insertions(+), 514 deletions(-)
 create mode 100644 src/app/assets/_bootswatch.scss
 create mode 100755 src/app/assets/_variables.scss

diff --git a/src/app/assets/_bootswatch.scss b/src/app/assets/_bootswatch.scss
new file mode 100644
index 00000000..cbae3dae
--- /dev/null
+++ b/src/app/assets/_bootswatch.scss
@@ -0,0 +1,359 @@
+// Eterna theme
+// Bootswatch
+
+
+// Variables ===================================================================
+
+$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic" !default;
+@import url($web-font-path);
+@import "./variables";
+
+// Navbar =======================================================================
+
+.bg-primary {
+  .navbar-nav {
+    .nav-link:focus,
+    .nav-link:hover,
+    .active > .nav-link {
+      color: $yellow !important;
+    }
+  }
+}
+
+.bg-dark {
+  background-color: $med-dark-blue !important;
+  &.navbar-dark .navbar-nav {
+    .nav-link:focus,
+    .nav-link:hover,
+    .active > .nav-link {
+      color: $yellow !important;
+    }
+  }
+}
+
+.bg-light {
+  input {
+    background-color: $white;
+  }
+  color: $dark;
+}
+
+
+
+
+// Buttons =====================================================================
+
+.btn {
+  &-secondary,
+  &-secondary:hover,
+  &-warning,
+  &-warning:hover {
+    color: #fff;
+  }
+}
+
+.btn {
+  &-primary {
+    background-color: $green;
+    border-color: $green;
+  }
+  &-primary:hover {
+    background-color: $dark-green;
+    border-color: $dark-green;
+  }
+  &-outline-primary {
+    border-color: $green;
+    color: $green
+  }
+  &-outline-primary:hover {
+    background-color: $dark-green;
+    border-color: $dark-green;
+  }
+}
+
+.btn-primary.disabled, .btn-primary:disabled, .btn-primary.disabled:hover {
+  background-color: $green;
+  border-color: $green;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
+  background-color: $dark-green;
+  border-color: $dark-green;
+}
+
+// Typography ==================================================================
+
+.title {
+  font-weight: 700;
+  margin-top: 1rem;
+}
+
+.nav-link, .btn {
+  font-weight: 600;
+}
+
+// Tables ======================================================================
+
+.table {
+  &,
+  &-primary,
+  &-secondary,
+  &-success,
+  &-info,
+  &-warning,
+  &-danger {
+    color: $white;
+  }
+
+  &-primary {
+    &, > th, > td {
+      background-color: $primary;
+    }
+  }
+
+  &-secondary {
+    &, > th, > td {
+      background-color: $secondary;
+    }
+  }
+
+  &-light {
+    &, > th, > td {
+      background-color: $light;
+      color: $dark;
+    }
+  }
+
+  &-dark {
+    &, > th, > td {
+      background-color: $dark;
+    }
+  }
+
+  &-success {
+    &, > th, > td {
+      background-color: $success;
+    }
+  }
+
+  &-info {
+    &, > th, > td {
+      background-color: $info;
+    }
+  }
+
+  &-danger {
+    &, > th, > td {
+      background-color: $danger;
+    }
+  }
+
+  &-warning {
+    &, > th, > td {
+      background-color: $warning;
+    }
+  }
+
+  &-active {
+    &, > th, > td {
+      background-color: $table-active-bg;
+    }
+  }
+
+  &-hover {
+    :hover {
+      &, > th, > td {
+        color: $light;
+      }
+    }
+
+    .table-primary:hover {
+      &, > th, > td {
+        background-color: darken($primary, 5%);
+        color: $light;
+      }
+    }
+
+    .table-secondary:hover {
+      &, > th, > td {
+        background-color: darken($secondary, 5%);
+        color: $light;
+      }
+    }
+
+    .table-light:hover {
+      &, > th, > td {
+        background-color: darken($light, 5%);
+        color: $black;
+      }
+    }
+
+    .table-dark:hover {
+      &, > th, > td {
+        background-color: darken($dark, 5%);
+        color: $light;
+      }
+    }
+
+    .table-success:hover {
+      &, > th, > td {
+        background-color: darken($success, 5%);
+        color: $light;
+      }
+    }
+
+    .table-info:hover {
+      &, > th, > td {
+        background-color: darken($info, 5%);
+        color: $light;
+      }
+    }
+
+    .table-danger:hover {
+      &, > th, > td {
+        background-color: darken($danger, 5%);
+        color: $light;
+      }
+    }
+
+    .table-warning:hover {
+      &, > th, > td {
+        background-color: darken($warning, 5%);
+        color: $light;
+      }
+    }
+
+    .table-active:hover {
+      &, > th, > td {
+        background-color: $table-active-bg;
+        color: $light;
+      }
+    }
+
+  }
+}
+
+// Forms =======================================================================
+
+.form-control {
+  background-color: $dark-blue;
+}
+
+// Navs ========================================================================
+
+.nav-tabs {
+  .nav-link.active,
+  .nav-link.active:focus,
+  .nav-link.active:hover,
+  .nav-item.open .nav-link,
+  .nav-item.open .nav-link:focus,
+  .nav-item.open .nav-link:hover {
+    color: $primary;
+  }
+  .nav-item {
+    font-weight: 700;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+  }
+}
+
+.pagination {
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.breadcrumb {
+  background-color: $dark-blue;
+  border: 1px solid $med-blue;
+}
+
+.dropdown-menu {
+  background-color: $med-dark-blue;
+}
+
+.dropdown-item {
+  color: $white;
+}
+
+
+// Indicators ==================================================================
+
+.close {
+  text-decoration: none;
+  opacity: 0.4;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.badge {
+  &-secondary,
+  &-warning {
+    color: #fff;
+  }
+}
+
+.alert {
+  border: none;
+  color: $white;
+
+  a,
+  .alert-link {
+    color: #fff;
+    text-decoration: underline;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      @if $enable-gradients {
+        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
+      } @else {
+        background-color: $value;
+      }
+    }
+  }
+
+  &-light {
+    &,
+    & a,
+    & .alert-link {
+      color: $body-color;
+    }
+  }
+}
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
+.modal .close{
+  color: $black;
+
+  &:not(:disabled):not(.disabled):hover,
+  &:not(:disabled):not(.disabled):focus {
+    color: $black;
+  }
+}
+
+.modal-content {
+  background-color: $primary;
+}
+
+.modal-header, .modal-footer {
+  border-color: $dark-blue;
+}
+
+.jumbotron, .list-group-item, .card {
+  background-color: $med-dark-blue;
+}
+
+.card-header {
+  font-weight: 700;
+}
+
+
+.alert-light, .alert-light a, .alert-light .alert-link {
+  color: $dark;
+}
\ No newline at end of file
diff --git a/src/app/assets/_custom.scss b/src/app/assets/_custom.scss
index b813cbf8..dd7af9a6 100644
--- a/src/app/assets/_custom.scss
+++ b/src/app/assets/_custom.scss
@@ -1,519 +1,11 @@
 // Eterna theme
-// Bootswatch
 
 @import "~bootstrap/scss/bootstrap.scss";
 @import '~bootstrap-vue/dist/bootstrap-vue.css';
+@import './bootswatch';
+@import './variables';
 
-//
-// Color system
-//
-
-$white:    #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #ecf0f1 !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #b4bcc2 !default;
-$gray-600: #95a5a6 !default;
-$gray-700: #7b8a8b !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black:    #000 !default;
-
-$blue: #21508c !default;
-$dark-blue: #05224b !default;
-$light-blue: #50b2dc !default;
-$med-blue: #2f94d1 !default;
-$med-dark-blue: #043468 !default;
 $dark-blue-transparent: #05224680;
-$green: #53b64e !default;
-$dark-green: #3d8e39 !default;
-$light-green: #97cc93 !default;
-$red: #d73832 !default;
-$orange: #fd7e14 !default;
-$yellow: #fac244 !default;
-$white: #fff !default;
-$gray: #95a5a6 !default;
-$gray-dark: #343a40 !default;
-$primary: $blue !default;
-$secondary: $light-blue !default;
-$success: $green !default;
-$info: $med-blue !default;
-$warning: #f39c12 !default;
-$danger: #e74c3c !default;
-$light: #ecf0f1 !default;
-$dark: #7b8a8b !default;
-
-$colors: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$colors: map-merge(
-  (
-    "blue":       $blue,
-    "dark-blue":     $dark-blue,
-    "light-blue":     $light-blue,
-    "med-blue":       $med-blue,
-    "med-dark-blue":       $med-dark-blue,
-    "red":        $red,
-    "orange":     $orange,
-    "yellow":     $yellow,
-    "green":      $green,
-    "dark-green":       $dark-green,
-    "light-green":       $light-green,
-    "white":      $white,
-    "gray":       $gray-600,
-    "gray-dark":  $gray-800
-  ),
-  $colors
-);
-
-// Chat size (normal)
-
-$container-width:            300px !default;
-$container-height:           500px !default;
-
-
-$yiq-contrasted-threshold:  175 !default;
-
-// Links
-
-$link-color:                $yellow !default;
-
-// Body 
-
-$body-bg:                   $dark-blue !default;
-$body-color:                $white !default;
-
-// Fonts
-
-$font-family-sans-serif:      "Open Sans", sans-serif !default;
-
-$font-size-base:              0.9375rem !default;
-
-$h1-font-size:                3rem !default;
-$h2-font-size:                2.5rem !default;
-$h3-font-size:                2rem !default;
-
-// Tables
-
-$table-accent-bg:             $gray-200 !default;
-$table-active-bg:             $gray-300 !default;
-
-// Dropdowns
-
-$dropdown-link-color:               $gray-700 !default;
-$dropdown-link-hover-color:         $white !default;
-$dropdown-link-hover-bg:            $primary !default;
-
-// Navs
-
-$nav-link-padding-y:                .5rem !default !default;
-$nav-link-padding-x:                2rem !default;
-$nav-link-disabled-color:           $gray-600 !default !default;
-
-$nav-tabs-border-color:             $gray-200 !default;
-$nav-tabs-link-active-bg:           $white !default;
-
-// Navbar
-
-$navbar-padding-y:                  1rem !default;
-$navbar-dark-color:                 $white !default;
-$navbar-dark-hover-color:           $yellow !default;
-
-// Pagination
-
-$pagination-color:                  $white !default;
-$pagination-bg:                     $success !default;
-$pagination-border-width:           0 !default;
-$pagination-border-color:           transparent !default;
-
-$pagination-hover-color:            $white !default;
-$pagination-hover-bg:               darken($success, 15%) !default;
-$pagination-hover-border-color:     transparent !default;
-
-$pagination-active-bg:              $pagination-hover-bg !default;
-$pagination-active-border-color:    transparent !default;
-
-$pagination-disabled-color:         $gray-200 !default;
-$pagination-disabled-bg:            lighten($success, 15%) !default;
-$pagination-disabled-border-color:  transparent !default;
-
-// Progress bars
-
-$progress-height:                   0.825rem !default;
-$progress-font-size:                0.625rem !default;
-
-// List group
-
-$list-group-hover-bg:               $blue !default;
-$list-group-disabled-bg:            $gray-900 !default;
-$list-group-active-bg:              $med-blue !default;
-$list-group-action-active-bg:       $med-dark-blue !default;
-$list-group-action-hover-color:     $white !default;
-
-// Close
-
-$close-color:                       $white !default;
-$close-text-shadow:                 none !default;
-
-$popover-bg:                        $dark !default;
-$popover-header-color:              $light !default;
-
-
-// Eterna theme
-// Bootswatch
-
-
-// Variables ===================================================================
-
-$web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic" !default;
-@import url($web-font-path);
-
-// Navbar =======================================================================
-
-.bg-primary {
-  .navbar-nav {
-    .nav-link:focus,
-    .nav-link:hover,
-    .active > .nav-link {
-      color: $yellow !important;
-    }
-  }
-}
-
-.bg-dark {
-  background-color: $med-dark-blue !important;
-  &.navbar-dark .navbar-nav {
-    .nav-link:focus,
-    .nav-link:hover,
-    .active > .nav-link {
-      color: $yellow !important;
-    }
-  }
-}
-
-.bg-light {
-  input {
-    background-color: $white;
-  }
-  color: $dark;
-}
-
-
-
-
-// Buttons =====================================================================
-
-.btn {
-  &-secondary,
-  &-secondary:hover,
-  &-warning,
-  &-warning:hover {
-    color: #fff;
-  }
-}
-
-.btn {
-  &-primary {
-    background-color: $green;
-    border-color: $green;
-  }
-  &-primary:hover {
-    background-color: $dark-green;
-    border-color: $dark-green;
-  }
-  &-outline-primary {
-    border-color: $green;
-    color: $green
-  }
-  &-outline-primary:hover {
-    background-color: $dark-green;
-    border-color: $dark-green;
-  }
-}
-
-.btn-primary.disabled, .btn-primary:disabled, .btn-primary.disabled:hover {
-  background-color: $green;
-  border-color: $green;
-}
-
-.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
-  background-color: $dark-green;
-  border-color: $dark-green;
-}
-
-// Typography ==================================================================
-
-.title {
-  font-weight: 700;
-  margin-top: 1rem;
-}
-
-.nav-link, .btn {
-  font-weight: 600;
-}
-
-// Tables ======================================================================
-
-.table {
-  &,
-  &-primary,
-  &-secondary,
-  &-success,
-  &-info,
-  &-warning,
-  &-danger {
-    color: $white;
-  }
-
-  &-primary {
-    &, > th, > td {
-      background-color: $primary;
-    }
-  }
-
-  &-secondary {
-    &, > th, > td {
-      background-color: $secondary;
-    }
-  }
-
-  &-light {
-    &, > th, > td {
-      background-color: $light;
-      color: $dark;
-    }
-  }
-
-  &-dark {
-    &, > th, > td {
-      background-color: $dark;
-    }
-  }
-
-  &-success {
-    &, > th, > td {
-      background-color: $success;
-    }
-  }
-
-  &-info {
-    &, > th, > td {
-      background-color: $info;
-    }
-  }
-
-  &-danger {
-    &, > th, > td {
-      background-color: $danger;
-    }
-  }
-
-  &-warning {
-    &, > th, > td {
-      background-color: $warning;
-    }
-  }
-
-  &-active {
-    &, > th, > td {
-      background-color: $table-active-bg;
-    }
-  }
-
-  &-hover {
-    :hover {
-      &, > th, > td {
-        color: $light;
-      }
-    }
-
-    .table-primary:hover {
-      &, > th, > td {
-        background-color: darken($primary, 5%);
-        color: $light;
-      }
-    }
-
-    .table-secondary:hover {
-      &, > th, > td {
-        background-color: darken($secondary, 5%);
-        color: $light;
-      }
-    }
-
-    .table-light:hover {
-      &, > th, > td {
-        background-color: darken($light, 5%);
-        color: $black;
-      }
-    }
-
-    .table-dark:hover {
-      &, > th, > td {
-        background-color: darken($dark, 5%);
-        color: $light;
-      }
-    }
-
-    .table-success:hover {
-      &, > th, > td {
-        background-color: darken($success, 5%);
-        color: $light;
-      }
-    }
-
-    .table-info:hover {
-      &, > th, > td {
-        background-color: darken($info, 5%);
-        color: $light;
-      }
-    }
-
-    .table-danger:hover {
-      &, > th, > td {
-        background-color: darken($danger, 5%);
-        color: $light;
-      }
-    }
-
-    .table-warning:hover {
-      &, > th, > td {
-        background-color: darken($warning, 5%);
-        color: $light;
-      }
-    }
-
-    .table-active:hover {
-      &, > th, > td {
-        background-color: $table-active-bg;
-        color: $light;
-      }
-    }
-
-  }
-}
-
-// Forms =======================================================================
-
-.form-control {
-  background-color: $dark-blue;
-}
-
-// Navs ========================================================================
-
-.nav-tabs {
-  .nav-link.active,
-  .nav-link.active:focus,
-  .nav-link.active:hover,
-  .nav-item.open .nav-link,
-  .nav-item.open .nav-link:focus,
-  .nav-item.open .nav-link:hover {
-    color: $primary;
-  }
-  .nav-item {
-    font-weight: 700;
-    font-size: 0.75rem;
-    text-transform: uppercase;
-  }
-}
-
-.pagination {
-  a:hover {
-    text-decoration: none;
-  }
-}
-
-.breadcrumb {
-  background-color: $dark-blue;
-  border: 1px solid $med-blue;
-}
-
-.dropdown-menu {
-  background-color: $med-dark-blue;
-}
-
-.dropdown-item {
-  color: $white;
-}
-
-
-// Indicators ==================================================================
-
-.close {
-  text-decoration: none;
-  opacity: 0.4;
-
-  &:hover,
-  &:focus {
-    opacity: 1;
-  }
-}
-
-.badge {
-  &-secondary,
-  &-warning {
-    color: #fff;
-  }
-}
-
-.alert {
-  border: none;
-  color: $white;
-
-  a,
-  .alert-link {
-    color: #fff;
-    text-decoration: underline;
-  }
-
-  // @each $color, $value in $theme-colors {
-    // &-#{$color} {
-      // @if $enable-gradients {
-        // background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
-      // } @else {
-        // background-color: $value;
-      // }
-    // }
-  // }
-
-  &-light {
-    &,
-    & a,
-    & .alert-link {
-      color: $body-color;
-    }
-  }
-}
-
-// Progress bars ===============================================================
-
-// Containers ==================================================================
-.modal .close{
-  color: $black;
-
-  &:not(:disabled):not(.disabled):hover,
-  &:not(:disabled):not(.disabled):focus {
-    color: $black;
-  }
-}
-
-.modal-content {
-  background-color: $primary;
-}
-
-.modal-header, .modal-footer {
-  border-color: $dark-blue;
-}
-
-.jumbotron, .list-group-item, .card {
-  background-color: $med-dark-blue;
-}
-
-.card-header {
-  font-weight: 700;
-}
-
 
-.alert-light, .alert-light a, .alert-light .alert-link {
-  color: $dark;
-}
\ No newline at end of file
+$container-width: 300px;
+$container-height: 500px;
\ No newline at end of file
diff --git a/src/app/assets/_variables.scss b/src/app/assets/_variables.scss
new file mode 100755
index 00000000..0b816f87
--- /dev/null
+++ b/src/app/assets/_variables.scss
@@ -0,0 +1,149 @@
+// Eterna theme
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #ecf0f1 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #b4bcc2 !default;
+$gray-600: #95a5a6 !default;
+$gray-700: #7b8a8b !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue: #21508c !default;
+$dark-blue: #05224b !default;
+$light-blue: #50b2dc !default;
+$med-blue: #2f94d1 !default;
+$med-dark-blue: #043468 !default;
+$green: #53b64e !default;
+$dark-green: #3d8e39 !default;
+$light-green: #97cc93 !default;
+$red: #d73832 !default;
+$orange: #fd7e14 !default;
+$yellow: #fac244 !default;
+$white: #fff !default;
+$gray: #95a5a6 !default;
+$gray-dark: #343a40 !default;
+$primary: $blue !default;
+$secondary: $light-blue !default;
+$success: $green !default;
+$info: $med-blue !default;
+$warning: #f39c12 !default;
+$danger: #e74c3c !default;
+$light: #ecf0f1 !default;
+$dark: #7b8a8b !default;
+
+$colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "dark-blue":     $dark-blue,
+    "light-blue":     $light-blue,
+    "med-blue":       $med-blue,
+    "med-dark-blue":       $med-dark-blue,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "dark-green":       $dark-green,
+    "light-green":       $light-green,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+
+$yiq-contrasted-threshold:  175 !default;
+
+// Links
+
+$link-color:                $yellow !default;
+
+// Body 
+
+$body-bg:                   $dark-blue !default;
+$body-color:                $white !default;
+
+// Fonts
+
+$font-family-sans-serif:      "Open Sans", sans-serif !default;
+
+$font-size-base:              0.9375rem !default;
+
+$h1-font-size:                3rem !default;
+$h2-font-size:                2.5rem !default;
+$h3-font-size:                2rem !default;
+
+// Tables
+
+$table-accent-bg:             $gray-200 !default;
+
+// Dropdowns
+
+$dropdown-link-color:               $gray-700 !default;
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default !default;
+$nav-link-padding-x:                2rem !default;
+$nav-link-disabled-color:           $gray-600 !default !default;
+
+$nav-tabs-border-color:             $gray-200 !default;
+$nav-tabs-link-active-bg:           $white !default;
+
+// Navbar
+
+$navbar-padding-y:                  1rem !default;
+$navbar-dark-color:                 $white !default;
+$navbar-dark-hover-color:           $yellow !default;
+
+// Pagination
+
+$pagination-color:                  $white !default;
+$pagination-bg:                     $success !default;
+$pagination-border-width:           0 !default;
+$pagination-border-color:           transparent !default;
+
+$pagination-hover-color:            $white !default;
+$pagination-hover-bg:               darken($success, 15%) !default;
+$pagination-hover-border-color:     transparent !default;
+
+$pagination-active-bg:              $pagination-hover-bg !default;
+$pagination-active-border-color:    transparent !default;
+
+$pagination-disabled-color:         $gray-200 !default;
+$pagination-disabled-bg:            lighten($success, 15%) !default;
+$pagination-disabled-border-color:  transparent !default;
+
+// Progress bars
+
+$progress-height:                   0.825rem !default;
+$progress-font-size:                0.625rem !default;
+
+// List group
+
+$list-group-hover-bg:               $blue !default;
+$list-group-disabled-bg:            $gray-900 !default;
+$list-group-active-bg:              $med-blue !default;
+$list-group-action-active-bg:       $med-dark-blue !default;
+$list-group-action-hover-color:     $white !default;
+
+// Close
+
+$close-color:                       $white !default;
+$close-text-shadow:                 none !default;
+
+$popover-bg:                        $dark !default;
+$popover-header-color:              $light !default;
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index cc55649c..886cd55a 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -14,8 +14,6 @@ export default class SettingsModule extends VuexModule {
 
   indicator: string = ' (!)';
 
-  allChatFeatures = true;
-
   emoticonChatFeatures = true;
 
   markdownChatFeatures = true;

From 03554cefa153fe3dddc6cbdaf7fe47088f30d8b4 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 13:04:54 -0500
Subject: [PATCH 201/223] Renamed 'pin' to 'star'

---
 src/app/App.vue                               |   8 ++--
 src/app/assets/pin-outline.png                | Bin 646 -> 0 bytes
 src/app/assets/pin.png                        | Bin 623 -> 0 bytes
 src/app/assets/star-outline.png               | Bin 0 -> 3199 bytes
 src/app/assets/star.png                       | Bin 0 -> 2315 bytes
 .../Header/{PinButton.vue => StarButton.vue}  |  16 +++----
 src/app/components/Messages/ActionMenu.vue    |  44 +++++++++---------
 src/app/components/Panes/MessagePane.vue      |   4 +-
 src/app/store/chat.vuex.ts                    |  28 +++++------
 src/app/types/message.ts                      |   2 +-
 10 files changed, 51 insertions(+), 51 deletions(-)
 delete mode 100644 src/app/assets/pin-outline.png
 delete mode 100644 src/app/assets/pin.png
 create mode 100644 src/app/assets/star-outline.png
 create mode 100644 src/app/assets/star.png
 rename src/app/components/Header/{PinButton.vue => StarButton.vue} (64%)

diff --git a/src/app/App.vue b/src/app/App.vue
index ca51a5d2..9743991e 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -41,7 +41,7 @@
       <div id="current-tab">{{ currentTab }}</div>
       <MinimizationTriangle v-model="minimization" class="minimizationTriangle" />
       <OpenWindowButton v-model="fullSize" />
-      <PinButton v-model="$vxm.chat.showPinned" />
+      <StarButton v-model="$vxm.chat.showStarred" />
     </template>
     <template slot="footer">
       <div id="resize-handle" v-show="!minimized"/>
@@ -64,7 +64,7 @@
   import DraggableDiv from '@/components/DraggableDiv.vue';
   import OperLogin from '@/components/OperLogin.vue';
   import PrivateMessageModal from '@/components/Messages/PrivateMessageModal.vue';
-  import PinButton from '@/components/Header/PinButton.vue';
+  import StarButton from '@/components/Header/StarButton.vue';
 
   Vue.use(BootstrapVue);
 
@@ -85,7 +85,7 @@
     OpenWindowButton,
     OperLogin,
     PrivateMessageModal,
-    PinButton,
+    StarButton,
   },
   directives: {
     resize,
@@ -522,7 +522,7 @@
   margin-top: 2.5px;
   right: 40px;
 }
-.pin-button {
+.star-button {
   //Link that opens chat in new window
   position: absolute;
   top: 0px;
diff --git a/src/app/assets/pin-outline.png b/src/app/assets/pin-outline.png
deleted file mode 100644
index f1f22324830bcbf5eed1513897d21c9ec8b8dd25..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 646
zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fjKx9jP7LeL$-D$|EK(yp(|mmy
zw18|52FCVG1{RPKAeI7R1_q`DOmGpg1<VLGNYehLU;<F_A5Ry@5DUSzQ*C{22M8R0
zKTnu7U};JgE9)e`SV^l?ucb<?{tLCaJ2nbsU0E6(_<U90mA(rG#-(12oKrkz&e&Dj
z`oVOeNUPb}L!S$uUzzyWqBHpEwC|<wzrXwY{twTG`DszhXM2a~UeCAw7A;{if8(o8
z&73Qpb0;LMoihLa$KTrjU1od~`Qs&caqABur;A&%R{yJ2ZuWg$!{|`&Y7n=8_x9fh
z%AOCM7<*zg?SIEEcy|1jm}bQEec{tCJWyD1;7HShg$J4!<d&Gv;h4{V)q>|rqjE^&
z3eAa10ZNbNNnB}b^$HaTXcV5Mw>K|aUc>d8)oG0b^C#8jFKXg{?_iwgbacIX(sH$l
zT`>!Ptv4%b&%Y(u!z6lNt~a-1+Rh*O6=ypnzvcaMwzbqU5!f?*zFp#4qyG;kcX~W-
zmw$J0%j;kF7^;+}xnA^gexrI=+U8ADdn1>!L1p*+EMq}m_dfzQ&vKfbY7Xr4m40bk
ze=Ps0+dUV~6Zy6YpFgJxMXlvh=-O5t_0W3hTV|J@&k@Wk(+@8w@|Z4C_u~DIxO?|!
zSbxjNJF(2*TBk+yj*3+;^5T`AmT$Y&^ZMwgTa)eeRI+223Pf?=|MWTL_TjUP)&V<K
zZ+Ox#lTnhi^3SV>Z$G^KYb&EE@`87^ftB70ndMK+52tQD^jH6^p^H|)ah5mVj^Dh;
YJn0%+Rd3oSXHa_ZboFyt=akR{0H!<@uK)l5

diff --git a/src/app/assets/pin.png b/src/app/assets/pin.png
deleted file mode 100644
index 9d4b36a7321d5f432a81a6dcca2d1cd2ed04afd9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 623
zcmeAS@N?(olHy`uVBq!ia0vp^Vj#@H1|*Mc$*~4fjKx9jP7LeL$-D$|EK(yp(|mmy
zw18|52FCVG1{RPKAeI7R1_q`DOmGpg1<VLGNYehLU;<F_Q%@Ji5DUSzQ?31(90iW2
z^Xu6qF->)=xqaamYmY>;qt?=`g3-#H_YdS3sNI^mLjE9E;~@tXv9M{=x;};qHVX>B
zlSmiqJ7D|3Am`va-v58!)~7vZcragiovnOs=F{BmZx6lgj{DdV#@W}M<(efhY37$d
zOGDR3Fvrb1zF-zZi;~hx)|ew(Kg}z>e;~oDe*PsJ<p)wq_jVm*XDWAiYUe7rnrC{R
z?m64$wE@Oo)nq<}?O1-gxOrB=yp<}IiV2gi^NPH#m91_xTEn_`Qucua|Ko8Bd6dt~
z@A8j5FW)Bj^Q556<v1m#f}N$mYd3Fll0CRd{bk!ksj25nZDy8lW3QWZx#Q&(p4)d!
z9CQP?YfUHm?$O+K-l$f3N~u|aneAVd1L80F->+NwH9&d>>&!22ni-Wjo5JVL{oZDD
zcw@`O$wepfAMh@i@i0ll$!Eik$glqbuHBM3?tfn_ME3oO%o$aiTkKMsPajHBdOcTH
zHCazSHlfXFZ`_i+c!k<;>IrY21QmaOJB$0n@2|&JaIe<Bqv!hOhv}LH^O7}|#;juP
z$xz(+C3{u!t>23pew`|<irW{Pb|-gQ0w?QU57qgT0!m9(7a06}yX~ZR%rqxPWmkKd
zR~r`8Y&cYJTw=L<i`{zOgPP7y6E^IWd-jJtruj~OVy8zPDB?X`{an^LB{Ts5DrW%?

diff --git a/src/app/assets/star-outline.png b/src/app/assets/star-outline.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a5a66f326920ee66416a8c43c114cea1211a5d7
GIT binary patch
literal 3199
zcmV-_41n{AP)<h;3K|Lk000e1NJLTq002t>002t}1^@s6I8J)%00001b5ch_0Itp)
z=>Px#IAvH#W=%~1DgXcg2mk?xX#fNO00031000^Q000000-yo_1ONa40RR91OP~V)
z1ONa40RR91O8@`>0H?!6fdBvt^+`lQRCoc^Tx*b2M-}eAbBAS@$8In|Ty}O1rKLbL
zsl))$L<u3;7fUb{Qu-_TB_=#}7AW#Z#VX4XDzy)kSX8Adl~O|<RVgd54>l;9hZ;+x
zXex@PBJ9pWcqBX)*oB>$d;HFw%y=I?v-7w!bM0d5cAq|{`}BAFoIc%s2O)fzn!1PA
z`A{t({if7iosr5KNuw7@*8QO)G~p-xG(RcBy4)a)HYvp%e)>%}-+@I^m?oHf`Ux;!
znc?zhk58|<7&s5-P$@`EjMv2H3_Wu5HNODntC>}KDe#~P6r%&c%(7pQf*!sCOOp7O
z6&q*ST33#|Z_LnUf=MKNW{SR<S<}Y?Yf>hd1Pi8U(v#&fKYasMI+IIBF9&YEFhe%M
z%1hdq6f)=pfdoY-s*TxxSQULSvk)$PQw0<Q$8@fDf>@5SFTg?oYFh=JKulHd<S$ma
z>}HtB1e1gIiz$|UW>t;p52Z7~Bv_^?f-hMv*R$+k34=14U<#OQ`BDPjXUYoJ>L<_5
zf(L(4F|6;qXy7yXT@|GxlohPl^lOS^7&_C}UjJhu=!_EvHNTUqc;&K!MMUeJLn9I|
zF^z<L*<I)6ck&doTsE+l?>##ckTg37M_K|b!$>^s_0*h@vr|h|DjQf;lM{+Sl+Fxn
zX?TkVf2gDWO{XcEt0Lq|1&*_yvVjFNb6rY+w%@8Ck@kYM%z2fZlc!kavVdiplB6cr
zpfv48D^1fh(|=iM0&?Xt#j=1^8J%ziqHyey{>^o7TY>4_GXM7~Q)GE7U#aqC0SkL9
zmkA=?a?c_Y1^K)a45hr2sR-qggT*F9LNq$Z0-DVPll7!9MV2pzDV7|p>9L8m&b=U;
z;6Qu*pOOGspP!iKh?U0j+>Vu2ihRkzQl5NDa+#WS@R&)i09DzJRj3Ggy|FX0L`Zp)
z6jUKJng)kjAq`Q1iy!=fCXkm*XPT_Q+HKP0Cp0YO2_CK|$VvfT3oY4(klaR<atxZT
zG{Gb<n<)I$)?}HVm|ZO`-6N<H<Ir;w&+DM#kDvTU*D+%!F}4&9V>I(bGQlqsd?tUA
zX0~BmM{o>Y$Qp7IW4w;Bos%tHqqhlR97ON)AykG$$NSnF7EIMKfEfl){ZxEKsV8v~
zlV_FI7p^-RC;4T}7(~paPk77EXVoi-UuDJTH4|`Qd>ALwXC3MYou4s3bT2lxKlQq=
zDccKV_E$;yc)%X8Ch5g}(jLZz@!@{p3hb$+Yvf^2pS4rHEy2;8ga7y#t-cEr%<k|H
z%+1{+ufP{Ag4%PS_)XqwWpB-p^f30R&snK1u(-0NbL1;<_6MNUJS($3Pa6yh{9Pj>
zDx?;RQ#>j)JtnnyEJ`}^v6xQ5sHRWG0+*{|V{@-Wi*cRBXZW+v&J4z9jq65i8We~I
z$<XznjNuv312T@MrV9`asRcF7xD_tv=k~E!OLQ7ey{)gK{?Aq_=apb_McY%SZj9-%
z17KLjWoN=lbJY;q`a|KmUT2+O%Z**5t(q`i#ELybr6Xqi+j>lIJFu<xBUOFcIEw{l
z)`srJlKBgjAa|%q<3LMK<cF$yztLK{hIg{Q>44&K@_5q$#p6jkv#f({=^5Do=fB4p
zdH;`x4hAZN>koXl7BP>%Qro^$Rq=@^;yAfVr5Rtd0fbHPo%>YvR$5kIu|P|AWGNbE
zvs5}()cq?egAW|uQafVppq%-YJ*Vn}6dlA%{(?%6#6koA)E@eys@_S<8Y~uU*?V@L
zn7lTC`FN|dp+uQ3N*Q>lcT3$7b$#imtv#a%h2mH}WsSO5dPf8+SM@zM_q4j+O-<{w
z+^j-y!!s_0mf($~*`CN6BIC8@u90mj`BKqf1>4Cm4yOZ(^*>Wte^)L*vF<s|EbCyK
zyN27Pluv;cu+md`60ZQ*Z@;|L+=r#e#mubRNz<-YNA_b>%ELjd;4$oJx57W|$w!a8
z!Q#%EdWP@TNN_x+p6Vq2rjcwt*b&0ss<>%YXJkGC$=-A>0<-C3lC&myA(D?a1%bsK
zHg$dYSxrU(n7Bo$0Ev&_{MYn{8-Ay(_kf65{xvx9UjwKc)y>h-SX^H{xOIL+U7sB_
zC!eKiav=Pf6XVtKI}sJbnJSVw06EmuJrY*b7EHnxXe(y+P+Fka9bBwmS}0JgXu&hf
zI$D_J<1o7?tTbC5iuZ-<*V<?W6nL+Q0i?Z0#EHg^{%~k_0bSTc3!Yil*5D6zNvW-X
z*^OE0$vpgqGTuqn=lYaHUsTI*2&1j=5-9G+Q?R%}Gse>7?J!G~Q}1UUuM$al$k`U3
z=f?sSw-+PU^BgQzzJGK52l%uR6Um;iY!BKgg_Qu-YpxdH=?6E>JMN-;Kqv}Wjh(}b
z;Y;eQ`oT1>!_mHOr4^c=b)oJsw`*;O`)%zywa`lQDqj?^G)=m$=JCRhcpac7+QUld
zNQga~9VAbRMF9(^nF?jeQ-75jJ<&iapUg<%dRfV;LY|(3#lJ+wEL!eTDjskT%EgpB
zA+85q?ZPy_&Rd_{TgxorIaoEqScxue`$c&A(Y~#9|IVyRqPDf?<X2m|hyTjYZ1@K^
z)gI&at-N?y6=T&W@3+#t$a@YJE;U^y2&emMHp(`45AVRS${UE4Z{sJQ9%Lg2o`X)l
zfG}KoIC*j{>$wU{#gFg+{sQn=Qk=9tOVO3R?`NZ*s))v)gIuen60?(b<GAOZ$)NVg
zZ#LHPZICiyX7!`T4faZv-?Ve&TJm&eHFcjvgf4HkD#1(p7}0O7G;6-OYjnl5X#5|T
zkyfBmEI2c7<NC(Vk$X}^M<!UQ<LpYrZDc7I+}{)Vyp2|1!Bem#xtDBw!11Q)zZ|$@
z9|dtG-zlVV80TVhGmV4mHBG#Zz2H+U=j2VC{S(aBo^-?8Rnb$hFgp}WwseII_!#AL
zbH^j^U}#~O5B^P^m=AwjS&rqM68QeqwJNGZ7^h_RWzWD$gbePF)TGdDVBx6d(SSzp
zW8_~_t4XH~As)j(Ppj%#j^*LYzGtn+47T;db>RJmm8a0WXJAza#Jx^scuDUK*Zz~~
zm<@AacKzsZuahrTCh8rh*$eSu+td8SU0&J?TmbPj0DE=izVp>A-`5d(7yX?}wUx+J
z;pH?sXn7Ys14|l)+XRWsRgj%CE;t!9HxGzd1g`OH>I*ll8VcWVkw?Q%E~9cI*E7wT
z09f0!iOa`Q&fh%ZwsXOBm3`W|vMZr2ZxUt=2c5Rn2YzH79QZQ!HR*c6k;;1pewK2m
zqv5@DJiIa2q~vS&#p!qe=#w~wIEp)g{dOKYh6{>?c3OTVPrz#J8eRZJKTxRfK4>-o
ztvvjR6VB#0TWOi{IBVa7m2p!B9%X-%Qg86$^4AkH#Mdb;X$Fu6D7s)EuF3@{ZlC#C
z4u*Rnm;QoA3^Ii$Pr$-wmN{%K=m>6t7Y%F)WsK_64b7B;Je>Jk>3Cdpk4_;9HbdUs
zU#S@x<ISr}NejWe;1u)&{FZPR)^v=uz_gRJ=9<XkSO9(mUzTy(hQ6=%Ukc3@JMn38
z0jc1bb!B#B`IJBjI$;QXDOR^9JOPRajDh#J*Z+jug>yfV2?KyRqq+Lz@=QG0)D;XC
zt~@fEAbxBak5=4rC|vuOY!u3shuh`$F~eTUESrm~P`8wE`l?0jRNPA-j!{@M(PcRP
zM+d^8U)m+SFAZ*=cNML!#}N;LSh*M4%yjmG*~RhJb|*cTvSO6ki<{pUXf*1Uz~?-A
zaBbhl+F^HHaVd!~hG&_)!`YK&$htzlyC}#E<C0d}6e0l!DtC=vtY20RpjemQaKnGN
zf5dRRv5MFh5<^bmGHio!7YZ{&%aRP`J|v-iXP`Ya<nE@ll%bt6h8}k`bw&E6G+w|9
z{B%MC^FZ*Ke6`7cW?|`u4X-pi#)fx7%w7clG?cF*#gJotuIqut2p!DJT}-n^0lo9>
zD{r6G)H8aYr1(KeavMJO*qg5crIN!X$Yy}G8)41^i1pscr{DZhHjD;rZtwhm0E&U(
lul?XAmf+Z@As?Vv=D*V;H4DFE7^?sP002ovPDHLkV1lpV2*&^b

literal 0
HcmV?d00001

diff --git a/src/app/assets/star.png b/src/app/assets/star.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a063d4784f73029c27a5905a09158dcbf1ab11d
GIT binary patch
literal 2315
zcmV+m3H0`fP)<h;3K|Lk000e1NJLTq002t>002t}1^@s6I8J)%00001b5ch_0Itp)
z=>Px#IAvH#W=%~1DgXcg2mk?xX#fNO00031000^Q000000-yo_1ONa40RR91OP~V)
z1ONa40RR91O8@`>0H?!6fdBvqfk{L`RCod9TU~4vRTRE=cH6QoX$uL6rMrz9V*n$G
zC`h8QM6kd72!e@`2i}z5wo1eoQy)}<rhiFM6B8crK_M|Flx-y@)SpCs&_oj-5w_bR
zLWH(J+ikmZ{myh}*`1y4&d$%y0Mj&c@0oM%J?EQq&i$FYjCt^??~3g7pjwQ3O{w)A
z(Lf~^!=r*%|J)Xw^pbv(my{u0DkZUnbGEoblAFDzo9DpdOei4;#XJ{^o(jX-6Bieh
zj{2@6IRuzslM|Kk#e;hun(~T=dCIdEjQh4JKoL3stn`Mo#VbIO9-ab=3$`l_97$78
zdsz62XTp#|Ffb;KbH<C3FnBB!J>yx(RWGFhMTj9317p6eN$^}Qcm^!N^+PTrG+hMD
z6Je+uf(cLr6El+)a=8~qMNfEE>9~J;MhGUrBDyk4y691A*PZ~2$s&CeRJBt9(~gpw
z=Y^`e9)`8OR~H6mCa=%uSp<YvLeX{43QWhgW&?`AqUSVPQrXSRb+8!E9)c=3^Np73
z^FrKR4MQU#sDhw`Vo_l6;J&4|R9d0$u6ovjnb@{mA*cePgyL+>)wQClU~yqA1XaLt
zjhab5hYGHRVLl<K+U|BJy5?D!F3dX-Rl(8TDHJJmwe&*OT>}d)ZE7b}-AOGJK&kz>
z5{70%P*vK^P;|w!7R*lWFggmVAgOm{RGgl4WrFGoSdwfm1XaKU<EBDbl{b4Yco<p<
zLDfjNLb2eURXRQOve^(+!6JDYP1Sm#?ga-+F#R3Td<}ME2bI@#MAtITmtaUPVUj4u
zhDZsQSqVP;;2$)GGABCGcnS7P=4iynSuyfQq7J&4qbYm}Kk+8oV4T`0%@-5{{1fP7
z8hkPIi+{S)zlaIJreRx>1{;;K5PXiG&+#ezDotrajtMEzp3J9VV+^)k^K*$!aVCF?
z<W&tIaG|7RGNnQUTq&t7S)3~*s|s6MO_5BKO;BvU;RSG=mw;f+P$!{t8a+`-(#USe
zs^+7BzhS|7lQhs0{8N_sYEXW(*@%0iIp9M05Kc)vcb*cyTO&iAobv<shLv_$A$rQH
zLT#sa@i?`X1WRqYu_Lkz)RXXG$}#unC6EIJ+Z}GJIh6`P23Yj4uJiJf5}WCRmpz!u
zd_R<h5dX-msQKI0s^7Kt>P{Vq(H}2*0y*v%t-!rpCws|mJ)p>LUC&Yhp*(hbWatD!
za<@vmXYWFsEL$Ghqvj_)JF|kN3N&^Py$<*6u{!fs+w;<$mQDcSK)9vmvs`)^0*e}H
z?24{K!)G9{Bv+$%%X5U?H8{ZLa7*x4BRU%fiyCX}y}FD|PYob=R~u>E+dSeoRupIs
z?^}AssGhnBem-GpxNI!A7H{OM`FQRII_dv!AhbRopvbPgJS!E5hR#R}rWPNA=1Zk}
zxs0{qEa&1)<fk4pdYT4{I;-!FJSz!y2AEfx>Aa9K@TUI+7uyC7)%;|(UrS(7ryIL3
zhl=FcFcz(=%qroyoM3-Qf;aWG1xKv(l~>Nv>*%{fRYQ}N@u#pn_*(C|>on*^dDbdW
zWQS$XN(BR9c|?-=`)JkjOGs_kWEqQJ{tl)EADNWT5VI95YQ3p@c!MnB-(dbyp3z&u
z2x63T-}bYIs?XcmrR`vmat%F0k6=^ddwAG#JC!xmmS7{Z{^IA(9awhJ5Pu#_j)Y79
z!O#Vqr@{bK_>1~=0w}V?5wPkyBCFuC)rE&jNy61lotIZQ(YGUDNfNJjLRq72V(!^s
zls6wfN5I0D6-SgcY#3*bye!)jJpB@NktA-yFxQqr*d2*291WG9ZdX2e8OAslqwStm
z$>fc00!0R6+EOxJF|sL_@%cWt9W3msx*LKC1bj@kT@MGqVw>}QV@~j63Ss-N$!rCy
zzH8($x26nQz)6oy-O)$2bSrgR!Q#T1A=|8he%anp(N?gKuN)b&&4Ok36vj5NXvzTB
zuQP9$Dk-kWjO~M=hWEx*N$nkbY|m?HR_eBaRpDbBtSF+$3UPKql&=_Q2_2_9j`^Im
z*k);c*N_b_a83)`z~ZuOIs`F^oFZ=ux7IWdwk{ea)#y%jEXViLbF-kq+fD1G?b9}}
zFcma4ufa!zzp$KNL*ArSj_TpoP%k}K`1BZZ((GG$0eI_IQ)lF19QL|kqNU?P3byqh
zR8Hq*6>sRl3Bq_3N21spSs8U6V)wS%j%{VXPTP5tWG*%4w|ymUK<2f9L&31o&Juv`
zt?!QZNkaYtp1jDYY@7@FHQ6Ud`RC)aDGc*jT8Q)b61*}Wpi-4r<RFioMdP2eY}$pe
z9ELmFMe(i5p>bNgrW&O!D<3$ScsJY<I*R$2^<C6<AvIJ+k6-|J522YgLeTf^{;^;=
zYsb-I3zucjx>X*n%?T6}mt^K&htcgrTYw^iVR(N_=mTmOqvfS+7y!(&hKiBeY&=Gu
zSq2LuRrXO(uv77wlE>#eAZA3#Y&_I1wGR(VJJOgblTWJ1lqO16_th6kry{Xq9-|Y@
zLfk|W-#gG6L^5{vI(K;4ZS?R;LstZoSl$b57HWHhchP+7u$G=rUB^n};>{h=<+3D(
zGbM1G$6vG~yuT`v`OI0$+%$%~jIYu5WOWK*DGU=s@*SN7LjvVTCq_fhxB(O?a<;YR
zZ|WZ>6^~&QNgGIHo+D-4u|&6IEeunJWIE+5nDi<R*AMFUR6ycjJD){&Z`XH5`#G1t
z#0z|2u6t!R|G8OJ%zGAwZp83LrDH63Ct3MQ<flQiiZ~%h`o#RcRhT-QqxRuubqso&
z?aOq|s_!0tfs1$_7yK<{{bp8!0?9RYMGgY2W0>Z=h`HVmX1X<xvMkp~oIiax07byi
lX+NZiwb=HlF#{CI{11{cu}r9s8P5O!002ovPDHLkV1k1zG>iZM

literal 0
HcmV?d00001

diff --git a/src/app/components/Header/PinButton.vue b/src/app/components/Header/StarButton.vue
similarity index 64%
rename from src/app/components/Header/PinButton.vue
rename to src/app/components/Header/StarButton.vue
index e443eaec..9abb8cee 100644
--- a/src/app/components/Header/PinButton.vue
+++ b/src/app/components/Header/StarButton.vue
@@ -1,10 +1,10 @@
 <template>
   <button
-    class="pin-button border-0"
+    class="star-button border-0"
     style="float: right;"
     @click="$emit('input', !value);"
     :class="{ active: value}"
-    aria-label="`Click to pin viewed messages"
+    aria-label="`Click to display starred messages"
    >
   </button>
 </template>
@@ -14,7 +14,7 @@
 
 
   @Component
-  export default class PinButton extends Vue {
+  export default class StarButton extends Vue {
     @Prop({ required: true })
     value !: boolean;
   }
@@ -22,8 +22,8 @@
 
 
 <style lang="scss" scoped>
-  .pin-button {
-    background-image: url("../../assets/pin-outline.png");
+  .star-button {
+    background-image: url("../../assets/star-outline.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
@@ -32,10 +32,10 @@
     background-color: transparent;
     transition: all 0.4s;
   }
-  .pin-button:hover {
+  .star-button:hover {
     cursor: pointer;
   }
-  .pin-button.active {
-    background-image: url("../../assets/pin.png");
+  .star-button.active {
+    background-image: url("../../assets/star.png");
   }
 </style>
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 58e77d74..4cdd254b 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -56,14 +56,14 @@
         Copy message
       </button>
     </li>
-    <li v-if="!pinned">
-      <button @click.once="pin">
-        Pin message
+    <li v-if="!starred">
+      <button @click.once="star">
+        Star message
       </button>
     </li>
-    <li v-if="pinned">
-      <button @click="unpin">
-        Unpin message
+    <li v-if="starred">
+      <button @click="unstar">
+        Unstar message
       </button>
     </li>
   </VueContext>
@@ -123,25 +123,25 @@
       this.$vxm.chat.privMsgModal = true;
     }
 
-    pin() {
-      this.$vxm.chat.addPinnedMessage(this.message);
-      const localPins = [];
-      if (localStorage.chat_pins) {
-        localPins.push(...JSON.parse(localStorage.chat_pins) as Message[]);
+    star() {
+      this.$vxm.chat.addStarredMessage(this.message);
+      const localStars = [];
+      if (localStorage.chat_stars) {
+        localStars.push(...JSON.parse(localStorage.chat_stars) as Message[]);
       }
-      localPins.push(this.message);
-      localStorage.chat_pins = JSON.stringify(localPins);
+      localStars.push(this.message);
+      localStorage.chat_stars = JSON.stringify(localStars);
     }
 
-    unpin() {
-      this.$vxm.chat.removePin(this.message);
-      let localPins = [];
-      if (localStorage.chat_pins) {
-        localPins.push(...JSON.parse(localStorage.chat_pins) as Message[]);
+    unstar() {
+      this.$vxm.chat.removeStar(this.message);
+      let localStars = [];
+      if (localStorage.chat_stars) {
+        localStars.push(...JSON.parse(localStorage.chat_stars) as Message[]);
       }
-      localPins = localPins.filter(e => e.message !== this.message.message
+      localStars = localStars.filter(e => e.message !== this.message.message
           && e.user !== this.message.user);
-      localStorage.chat_pins = JSON.stringify(localPins);
+      localStorage.chat_stars = JSON.stringify(localStars);
     }
 
     get oper() {
@@ -153,8 +153,8 @@
       return `http://${this.$vxm.chat.workbranch}/web/player/${this.user.uid}/`;
     }
 
-    get pinned() {
-      return this.message.pinnned;
+    get starred() {
+      return this.message.starred;
     }
 
     open(event: MouseEvent) {
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 031d8cbc..35f1bf33 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -90,8 +90,8 @@
     }
 
     get displayedMessages() {
-      if (this.$vxm.chat.showPinned) {
-        return this.messages.filter(e => e.pinnned);
+      if (this.$vxm.chat.showStarred) {
+        return this.messages.filter(e => e.starred);
       }
       return this.messages;
     }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 5e4bfe79..25e2993f 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -142,7 +142,7 @@ export default class ChatModule extends VuexModule {
 
   desktopNotifications = false;
 
-  showPinned = false;
+  showStarred = false;
 
   constructor() {
     super();
@@ -466,23 +466,23 @@ export default class ChatModule extends VuexModule {
     this.rawHistoryMessages.filter(e => e.split(' ')[3] === channel).forEach(e => {
       this.processAndPost(e);
     });
-    const pins = [];
-    if (localStorage.chat_pins) {
-      pins.push(...JSON.parse(localStorage.chat_pins) as Message[]);
+    const stars = [];
+    if (localStorage.chat_stars) {
+      stars.push(...JSON.parse(localStorage.chat_stars) as Message[]);
     }
-    pins.filter(e => e.target === channel).forEach(e => {
-      this.addPinnedMessage(e);
+    stars.filter(e => e.target === channel).forEach(e => {
+      this.addStarredMessage(e);
     });
   }
 
   /**
-   * Pins a message
-   * @param message - The message to be pinned
+   * Stars a message
+   * @param message - The message to be starred
    */
   @action()
-  async addPinnedMessage(message: Message) {
+  async addStarredMessage(message: Message) {
     const msg = message;
-    msg.pinnned = true;
+    msg.starred = true;
     let messages = this.channels[message.target]!.postedMessages;
     if (messages.includes(message)) return;
     this.postMessage(msg);
@@ -491,14 +491,14 @@ export default class ChatModule extends VuexModule {
   }
 
   /**
-   * Unpins a message
-   * @param message - The message to unpin
+   * Unstars a message
+   * @param message - The message to unstar
    */
   @action()
-  async removePin(message: Message) {
+  async removeStar(message: Message) {
     const messages = this.channels[message.target]?.postedMessages;
     if (!messages) return;
-    messages.find(e => e === message)!.pinnned = false;
+    messages.find(e => e === message)!.starred = false;
     this.channels[message.target]!.postedMessages = messages;
   }
 
diff --git a/src/app/types/message.ts b/src/app/types/message.ts
index 15f36deb..3621f094 100644
--- a/src/app/types/message.ts
+++ b/src/app/types/message.ts
@@ -15,7 +15,7 @@ class Message {
 
   time!: Date;
 
-  pinnned = false;
+  starred = false;
 
   constructor(message: string, target = '*', user: User = User.annonymous, isAction: boolean = false, isNotice: boolean = false, tags: {[key: string] : string} = {}) {
     this.message = message;

From c53d9d5a6fbbdcd74ffac40f608238c83af77abf Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 13:19:41 -0500
Subject: [PATCH 202/223] Remove redundant imports, make paths relative

---
 src/app/components/Header/MinimizationTriangle.vue          | 2 +-
 src/app/components/Header/OpenWindowButton.vue              | 2 +-
 src/app/components/Header/StarButton.vue                    | 4 ++--
 src/app/components/Input/SendButton.vue                     | 2 +-
 src/app/components/Messages/ActionMenu.vue                  | 4 +---
 src/app/components/Messages/PrivateMessageModal.vue         | 2 --
 src/app/components/Messages/PuzzleTooltip.vue               | 4 +---
 src/app/components/Messages/UserMessage.vue                 | 4 +---
 src/app/components/Messages/UserTooltip.vue                 | 4 +---
 src/app/components/OperLogin.vue                            | 2 --
 src/app/components/Panes/MessagePane.vue                    | 6 +++---
 src/app/components/Panes/UnreadMessageBanner.vue            | 3 ---
 src/app/components/Slideout/Chat/AddChatButton.vue          | 4 +---
 src/app/components/Slideout/HamburgerMenuButton.vue         | 6 +++---
 .../Slideout/Settings/Sections/NotificationsSection.vue     | 2 --
 .../components/Slideout/Settings/Sections/StatusSection.vue | 3 ---
 .../Slideout/Settings/Sections/ToolbarSection.vue           | 2 --
 .../components/Slideout/Settings/SettingsEnableDisable.vue  | 2 --
 src/app/components/Slideout/Settings/SettingsSwitch.vue     | 2 --
 src/app/components/Slideout/Settings/SlideoutSettings.vue   | 2 --
 20 files changed, 16 insertions(+), 46 deletions(-)

diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 11f45c5b..057ca8d2 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -33,7 +33,7 @@
 
 <style lang="scss" scoped>
   .minimization-triangle { /* Normal state */
-    background-image: url("../../assets/minimization-triangle.png");
+    background-image: url("~@/assets/minimization-triangle.png");
     background-repeat: no-repeat;
     background-size: 60% 40%;
     background-position: center;
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index d49d4fec..41d96205 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -22,7 +22,7 @@
 
 <style lang="scss" scoped>
   .open-window {
-    background-image: url("../../assets/open-window.png");
+    background-image: url("~@/assets/open-window.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
diff --git a/src/app/components/Header/StarButton.vue b/src/app/components/Header/StarButton.vue
index 9abb8cee..0d0a213c 100644
--- a/src/app/components/Header/StarButton.vue
+++ b/src/app/components/Header/StarButton.vue
@@ -23,7 +23,7 @@
 
 <style lang="scss" scoped>
   .star-button {
-    background-image: url("../../assets/star-outline.png");
+    background-image: url("~@/assets/star-outline.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
@@ -36,6 +36,6 @@
     cursor: pointer;
   }
   .star-button.active {
-    background-image: url("../../assets/star.png");
+    background-image: url("~@/assets/star.png");
   }
 </style>
diff --git a/src/app/components/Input/SendButton.vue b/src/app/components/Input/SendButton.vue
index dc568286..9993c157 100644
--- a/src/app/components/Input/SendButton.vue
+++ b/src/app/components/Input/SendButton.vue
@@ -25,7 +25,7 @@
 <style lang="scss" scoped>
   .send-button {
     background-color:rgba(0,0,0,0);
-    background-image: url("../../assets/send-button.png");
+    background-image: url("~@/assets/send-button.png");
     background-repeat: no-repeat;
     background-size: 60% 60%;
     background-position: center;
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index 4cdd254b..bc3c2fd8 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -207,9 +207,7 @@
 </script>
 
 <style scoped lang="scss">
-@import "../../assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
+@import "~@/assets/_custom.scss";
 @import '~vue-context/src/sass/vue-context';
   li {
     color: white;
diff --git a/src/app/components/Messages/PrivateMessageModal.vue b/src/app/components/Messages/PrivateMessageModal.vue
index 4f90c994..e54b90f4 100644
--- a/src/app/components/Messages/PrivateMessageModal.vue
+++ b/src/app/components/Messages/PrivateMessageModal.vue
@@ -62,8 +62,6 @@
 
 <style lang="scss">
   @import "@/assets/_custom.scss";
-  @import "~bootstrap/scss/bootstrap.scss";
-  @import '~bootstrap-vue/dist/bootstrap-vue.css';
   .message {
     position: absolute;
     left: 50%;
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index 8e62f4f5..e2671318 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -91,9 +91,7 @@
   }
 </script>
 <style scoped lang="scss">
-  @import "../../assets/_custom.scss";
-  @import "~bootstrap/scss/bootstrap.scss";
-  @import '~bootstrap-vue/dist/bootstrap-vue.css';
+  @import "~@/assets/_custom.scss";
   @import '~vue-context/src/sass/vue-context';
   .puzzle-tooltip-container {
     position: fixed;
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 1679e2b2..0a96f54e 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -289,9 +289,7 @@
 </script>
 
 <style lang="scss">
-@import "../../assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
+@import "~@/assets/_custom.scss";
   .chat-message {
     position: relative;
   }
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index d1f00e3d..82672095 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -92,9 +92,7 @@
   }
 </script>
 <style scoped lang="scss">
-  @import "../../assets/_custom.scss";
-  @import "~bootstrap/scss/bootstrap.scss";
-  @import '~bootstrap-vue/dist/bootstrap-vue.css';
+  @import "~@/assets/_custom.scss";
   @import '~vue-context/src/sass/vue-context';
   .user-tooltip-container {
     position: fixed;
diff --git a/src/app/components/OperLogin.vue b/src/app/components/OperLogin.vue
index 6921643a..85185945 100644
--- a/src/app/components/OperLogin.vue
+++ b/src/app/components/OperLogin.vue
@@ -71,8 +71,6 @@
 
 <style lang="scss">
 @import "../assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
   .login {
     position: absolute;
     left: 50%;
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 35f1bf33..7492c734 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -203,9 +203,9 @@
     }
 
     get anyChatFeatures() { // Checks if any chat features are enabled
-      return (this.$vxm.settings.allChatFeatures
-      || this.$vxm.settings.emoticonChatFeatures
-      || this.$vxm.settings.markdownChatFeatures);
+      return (this.$vxm.settings.emoticonChatFeatures
+      || this.$vxm.settings.markdownChatFeatures
+      || this.$vxm.settings.previewChatFeatures);
     }
 
     // Updates footer height when chat disappears/appears
diff --git a/src/app/components/Panes/UnreadMessageBanner.vue b/src/app/components/Panes/UnreadMessageBanner.vue
index 2f9c6944..89fd6af5 100644
--- a/src/app/components/Panes/UnreadMessageBanner.vue
+++ b/src/app/components/Panes/UnreadMessageBanner.vue
@@ -15,9 +15,6 @@
   }
 </script>
 <style lang="scss">
-@import "../../assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
 .unread-banner-container {
   position:sticky;
   bottom:0;
diff --git a/src/app/components/Slideout/Chat/AddChatButton.vue b/src/app/components/Slideout/Chat/AddChatButton.vue
index 417f5ed2..00b77279 100644
--- a/src/app/components/Slideout/Chat/AddChatButton.vue
+++ b/src/app/components/Slideout/Chat/AddChatButton.vue
@@ -39,9 +39,7 @@
 
 
 <style lang="scss" scoped>
-  @import "~bootstrap/scss/bootstrap.scss";
-  @import '~bootstrap-vue/dist/bootstrap-vue.css';
-  @import "../../../assets/_custom.scss";
+  @import "~@/assets/_custom.scss";
   /* Style the buttons that are used to open the tab content */
   .add-chat-container {
     transition: 0.3s;
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index ae10a335..6edd2ccd 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -31,18 +31,18 @@
 .hamburger { /* Normal hamburger icon */
   width:40px;
   height:40px;
-  background-image: url("../../assets/hamburger.png");
+  background-image: url("~@/assets/hamburger.png");
   background-repeat: no-repeat;
   background-size: 50% 45%;
   background-position: bottom 10px left 11px;
   background-color: transparent;
 }
 .notified { /* Notified hamburger icon */
-  background-image: url("../../assets/hamburger-notification.png");
+  background-image: url("~@/assets/hamburger-notification.png");
   background-size: 62.5% 55%;
   background-position:bottom 10px left 11px;
 }
 .mentioned { /* Mentioned hamburger icon */
-  background-image: url("../../assets/hamburger-mention.png") !important;
+  background-image: url("~@/assets/hamburger-mention.png") !important;
 }
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index 576ec744..ad5c117c 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -180,8 +180,6 @@
 </script>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
 .settings-button {
   background-color:$green;
 }
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index 6b5efaed..d3124151 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -101,9 +101,6 @@
   }
 </script>
 <style lang="scss" scoped>
-@import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
 li {
   list-style-type: none;
   width: calc(100% - 40px);
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 35e5e094..9fe3eb75 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -184,8 +184,6 @@
 </script>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import "~bootstrap-vue/dist/bootstrap-vue.css";
 .feature-button-container {
   padding: 2px;
 }
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index 86815b8b..58d8bf26 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -41,8 +41,6 @@
 </script>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
 .switch {
   position: relative;
   display: inline-block;
diff --git a/src/app/components/Slideout/Settings/SettingsSwitch.vue b/src/app/components/Slideout/Settings/SettingsSwitch.vue
index 596fa1eb..b247cb59 100644
--- a/src/app/components/Slideout/Settings/SettingsSwitch.vue
+++ b/src/app/components/Slideout/Settings/SettingsSwitch.vue
@@ -28,8 +28,6 @@
 </script>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
 /* The switch - the box around the slider */
 .switch {
   position: relative;
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index d1968a24..ff68c6b9 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -54,8 +54,6 @@
 </script>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-@import '~bootstrap-vue/dist/bootstrap-vue.css';
 #settings-wrapper { /* Wrapper div */
   height:calc(100% - 50px);
 }

From cd0754dfcf0a279b48b1410ae6981f504e1c16c2 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 13:38:33 -0500
Subject: [PATCH 203/223] Accessibility in link modal, vxm font size getter

---
 src/app/components/LinkModal.vue                  | 15 ++++++++++-----
 .../Settings/Sections/TextSizeSection.vue         | 14 ++------------
 .../Slideout/Settings/SlideoutSettings.vue        | 12 +-----------
 src/app/store/chat.vuex.ts                        |  2 +-
 src/app/store/settings.vuex.ts                    |  6 +++++-
 5 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/src/app/components/LinkModal.vue b/src/app/components/LinkModal.vue
index b8d83930..eef1a3b9 100644
--- a/src/app/components/LinkModal.vue
+++ b/src/app/components/LinkModal.vue
@@ -1,25 +1,24 @@
 <template>
   <div class="link panel rounded p-2" v-if="openModal" tabindex=0>
-    <p
-    >
+    <span>
       This link goes to <a target="_blank" :href="url">{{url}}</a>.
-    </p>
+    </span>
     <button
-      aria-label="Click to travel to the link you clicked on"
       class="btn link-button btn-primary w-100 mt-2"
       style="left: 50%"
       @click="openModal = false"
     >
     <a :href="url" target="_blank">Continue</a>
     </button>
+    <span class="text-muted">Travel to the link you clicked on</span>
     <button
-      aria-label="Click to return to the chat; this cancels opening the link"
       class="btn link-button btn-primary w-100 mt-2"
       style="left: 50%;"
       @click="openModal = false;"
     >
       Cancel
     </button>
+    <span class="text-muted">Do not travel to the link you clicked on</span>
   </div>
 </template>
 
@@ -49,6 +48,8 @@
     transform: translate(-50%, -50%);
     background-color:#043468;
     z-index:3;
+    max-width: 30%;
+    zoom: 1.02; // Fixes anti-aliasing caused by translation
   }
 
   .link-button > a:hover {
@@ -57,4 +58,8 @@
   .link-button:focus {
     outline: 2px solid white;
   }
+
+  .link > span {
+    width: auto
+  }
 </style>
diff --git a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
index c8f19004..70b34d69 100644
--- a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
@@ -33,23 +33,13 @@
     updateFontSize() {
        // Only update if valid font size
       if (parseInt(this.size, 10) >= 10 && parseInt(this.size, 10) <= 18) {
-        this.$vxm.settings.fontSize = parseInt(this.size, 10);
+        this.$vxm.settings.font = parseInt(this.size, 10);
         localStorage.chat_fontSize = JSON.stringify(this.size);
       }
     }
 
     get fontSize() {
-      const numSize = parseInt(this.size, 10); // Font size as an int
-      if (numSize >= 10 && numSize <= 18) {
-        return numSize;
-      }
-      if (numSize >= 18) {
-        return 18; // If font size greater than 18, set to maximum of 18
-      }
-      if (numSize <= 10) {
-        return 10; // If font size less than 10, set to minimum of 10
-      }
-      return 14; // If nothing else works, make it the default, 14
+      return this.$vxm.settings.fontSize;
     }
 
     created() {
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index ff68c6b9..314f08d0 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -38,17 +38,7 @@
   })
   export default class SlideoutSettings extends Vue {
     get fontSize() {
-      const numSize = this.$vxm.settings.fontSize;
-      if (numSize >= 10 && numSize <= 18) {
-        return numSize;
-      }
-      if (numSize >= 18) {
-        return 18; // If font size greater than 18, set to maximum of 18
-      }
-      if (numSize <= 10) {
-        return 10; // If font size less than 10, set to minimum of 10
-      }
-      return 14; // If nothing else works, make it the default, 14
+      return this.$vxm.settings.fontSize;
     }
   }
 </script>
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 25e2993f..fcfc032e 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -1333,7 +1333,7 @@ export default class ChatModule extends VuexModule {
               postMessage('Invalid value. Type `/help size` for  usage instructions');
               break;
             }
-            (this.$store as FullStore).rootState.$_settings.fontSize = parseInt(params, 10);
+            (this.$store as FullStore).rootState.$_settings.font = parseInt(params, 10);
             break;
           case 'join':
             if (!params) {
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index 886cd55a..817a970d 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -10,7 +10,7 @@ const VuexModule = createModule({
   strict: false,
 });
 export default class SettingsModule extends VuexModule {
-  fontSize: Number = 14;
+  font: number = 14;
 
   indicator: string = ' (!)';
 
@@ -31,4 +31,8 @@ export default class SettingsModule extends VuexModule {
       }
     }
   }
+
+  get fontSize() {
+    return Math.min(Math.max(this.font, 0), 18);
+  }
 }

From 9f2c01dc41b5ff51c117b6b4dab714e4daf799cc Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 13:47:01 -0500
Subject: [PATCH 204/223] Typing messages handled by section

---
 src/app/components/Panes/MessagePane.vue      |  4 ++--
 .../Settings/Sections/ToolbarSection.vue      | 20 ++++++++++++++++---
 src/app/store/settings.vuex.ts                |  8 --------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 7492c734..28f12f5f 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -16,12 +16,12 @@
       <UnreadMessageBanner v-show="unreads > 0" @click.native="scrollDown" :messages="unreads" />
     </ul>
     <template v-slot:footer>
-      <span
+      <div
         class='typing'
         v-if="$vxm.settings.typingMessages"
         v-show="anyTyping">
         {{typingString}}
-      </span>
+      </div>
       <EmoticonBar
         @emote="add"
         @md="format"
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 9fe3eb75..0212352f 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -59,7 +59,7 @@
       Typing messages
       <SettingsTooltip text="Whether you see messages above the toolbar when people are typing" />
       <span class="float-right">
-        <SettingsSwitch v-model="$vxm.settings.typingMessages" />
+        <SettingsSwitch v-model="typingMessages" />
       </span>
     </li>
   </SettingsSection>
@@ -172,12 +172,26 @@
       } else {
         this.markdownChatFeatures = this.$vxm.settings.markdownChatFeatures;
       }
+      if (localStorage.chat_previewChatFeatures) {
+        this.previewChatFeatures = JSON.parse(localStorage.chat_previewChatFeatures);
+      } else {
+        this.previewChatFeatures = this.$vxm.settings.previewChatFeatures;
+      }
+
+      if (localStorage.chat_typingMessages) {
+        this.typingMessages = JSON.parse(localStorage.chat_typingMessages);
+      } else {
+        this.typingMessages = this.$vxm.settings.typingMessages;
+      }
     }
 
-    @Watch('$vxm.settings.typingMessages')
+    typingMessages = true;
+
+    @Watch('typingMessages')
     typingMessageSettingsUpdated() {
+      this.$vxm.settings.typingMessages = this.typingMessages;
       if (localStorage) {
-        localStorage.chat_typingMessages = JSON.stringify(this.$vxm.settings.typingMessages);
+        localStorage.chat_typingMessages = JSON.stringify(this.typingMessages);
       }
     }
   }
diff --git a/src/app/store/settings.vuex.ts b/src/app/store/settings.vuex.ts
index 817a970d..5dbf8833 100644
--- a/src/app/store/settings.vuex.ts
+++ b/src/app/store/settings.vuex.ts
@@ -24,14 +24,6 @@ export default class SettingsModule extends VuexModule {
 
   typingMessages = true;
 
-  created() {
-    if (localStorage) {
-      if (localStorage.chat_typingMessages) {
-        this.typingMessages = JSON.parse(localStorage.chat_typingMessages);
-      }
-    }
-  }
-
   get fontSize() {
     return Math.min(Math.max(this.font, 0), 18);
   }

From cadf66d5b807cc3712c2b3a094e3af5be88ea851 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 13:53:40 -0500
Subject: [PATCH 205/223] aria-label update to SlideoutButton

---
 src/app/components/Slideout/SlideoutButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/Slideout/SlideoutButton.vue b/src/app/components/Slideout/SlideoutButton.vue
index 6d567370..74d0f242 100644
--- a/src/app/components/Slideout/SlideoutButton.vue
+++ b/src/app/components/Slideout/SlideoutButton.vue
@@ -3,7 +3,7 @@
   <button
     class='border-0'
      @click="$emit('input')"
-     :aria-label="`Open the ${name} tab of the slideout`"
+     :aria-label="`${name} tab`"
   >
     <center
     class='border-0 font-weight-bold text-white d-inline-block'

From 9722a65784569e98ce4d43a5637217cb3fe65352 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 14:36:22 -0500
Subject: [PATCH 206/223] Extracted context menu and options into component

---
 src/app/components/ItemOptions.vue            | 91 +++++++++++++++++++
 src/app/components/Messages/UserMessage.vue   | 62 ++++---------
 .../Slideout/Users/SlideoutUsername.vue       | 64 ++-----------
 3 files changed, 115 insertions(+), 102 deletions(-)
 create mode 100644 src/app/components/ItemOptions.vue

diff --git a/src/app/components/ItemOptions.vue b/src/app/components/ItemOptions.vue
new file mode 100644
index 00000000..a2b952f0
--- /dev/null
+++ b/src/app/components/ItemOptions.vue
@@ -0,0 +1,91 @@
+<template>
+   <div style="overflow:hidden">
+      <button
+        class="chat-message-options border-0 text-white font-weight-bold"
+        ref="chatOptions"
+        @click.prevent="openContextMenu"
+        v-show="hovered && user.username"
+        @blur="hovered = false"
+        @keypress.enter.prevent="openContextMenuWithKey"
+        tabindex=0
+      >
+        &vellip; <!-- ⋮ -->
+      </button>
+      <ActionMenu
+        ref="contextMenu"
+        :message="msg"
+      />
+  </div>
+</template>
+<script lang="ts">
+  import {
+    Vue, Component, Prop, Watch,
+  } from 'vue-property-decorator';
+  import ActionMenu from '@/components/Messages/ActionMenu.vue';
+  import Message from '@/types/message';
+  import User from '@/types/user';
+  import Username from '@/components/Messages/Username.vue';
+
+  @Component({
+    components: {
+      Username,
+      ActionMenu,
+    },
+  })
+  export default class ItemOptions extends Vue {
+    @Prop({ required: true })
+    user !: User;
+
+    @Prop({ required: false })
+    message !: Message;
+
+
+    @Prop({ required: true })
+    hover = false;
+
+    @Watch('hover')
+    updateData() {
+      this.hovered = this.hover;
+    }
+
+    hovered = false;
+
+    get msg() {
+      if (this.message) return this.message;
+      return new Message('Reporting user', '*', this.user);
+    }
+
+    $refs!: {
+      contextMenu: HTMLFormElement;
+      chatOptions: HTMLButtonElement;
+    };
+
+    openContextMenu(e: MouseEvent) {
+      setTimeout(() => this.$refs.contextMenu.open(e));
+    }
+
+    openContextMenuWithKey(e: KeyboardEvent) {
+      const rect = (e.target as Element).getBoundingClientRect();
+      const event = new MouseEvent('click', {
+        clientX: rect.x,
+        clientY: rect.y,
+      });
+      setTimeout(() => this.$refs.contextMenu.open(event));
+    }
+  }
+</script>
+<style scoped>
+  .chat-message-options {
+    position: absolute;
+    top: -4px;
+    right: 5px;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    background-color: transparent;
+  }
+  .chat-message-options:focus {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+</style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 0a96f54e..c7e768a4 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -37,22 +37,7 @@
       &lrm;
       <span v-if="!isNotice" class="message-time">[{{formattedTime}}]</span>
     </div>
-    <div class="options overflow-hidden">
-      <button
-        class="chat-message-options mr-2 overflow-hidden text-white border-0"
-        @click.prevent="openContextMenu"
-        @keypress.enter.prevent="openContextMenuWithKey"
-        v-show="hover && message.user && message.user.username"
-        tabindex=0
-        @blur="hover = false"
-      >
-        &vellip;
-      </button>
-      <ActionMenu
-        ref="contextMenu"
-        :message="message"
-      />
-    </div>
+    <ItemOptions :user="message.user" :message="message" :hover="hover" class="options" />
     <LinkModal ref="linkModal" url=''/>
   </li>
 </template>
@@ -68,6 +53,7 @@
   import LinkModal from '@/components/LinkModal.vue';
   import { Channel } from '@/store/chat.vuex';
   import PuzzleTooltip from './PuzzleTooltip.vue';
+  import ItemOptions from '@/components/ItemOptions.vue';
 
   @Component({
     components: {
@@ -76,6 +62,7 @@
       ActionMenu,
       LinkModal,
       PuzzleTooltip,
+      ItemOptions,
     },
   })
   export default class UserMessage extends Vue {
@@ -266,25 +253,11 @@
     }
 
     $refs!: {
-      contextMenu: HTMLFormElement;
       msg: HTMLSpanElement;
       clickTooltip: UserTooltip;
       linkModal: LinkModal;
       puzzleTooltip: PuzzleTooltip;
     };
-
-    openContextMenu(e: MouseEvent) {
-      setTimeout(() => this.$refs.contextMenu.open(e));
-    }
-
-    openContextMenuWithKey(e: KeyboardEvent) {
-      const rect = (e.target as Element).getBoundingClientRect();
-      const event = new MouseEvent('click', {
-        clientX: rect.x,
-        clientY: rect.y,
-      });
-      setTimeout(() => this.$refs.contextMenu.open(event));
-    }
   }
 </script>
 
@@ -302,6 +275,20 @@
     margin-bottom: 5px;
   }
 
+  .chat-message-options {
+    position: absolute;
+    top: -4px;
+    right: 0px;
+    font-size: 20px;
+    font-weight: bold;
+    cursor: pointer;
+    background-color: transparent;
+  }
+  .chat-message-options:focus {
+    outline: 1px dotted #212121;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+
   .chat-message-action {
     font-style: italic;
   }
@@ -336,21 +323,6 @@
     padding-right: 12px;
   }
 
-  .chat-message-options {
-    position: absolute;
-    top: -4px;
-    right: 0px;
-    font-size: 20px;
-    font-weight: bold;
-    cursor: pointer;
-    background-color: transparent;
-  }
-
-  .chat-message-options:focus {
-    outline: 1px dotted #212121;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
-
   mark {
     background-color:darken($dark-blue, 5%) !important;
     color:#c0dce7;
diff --git a/src/app/components/Slideout/Users/SlideoutUsername.vue b/src/app/components/Slideout/Users/SlideoutUsername.vue
index 57c008b8..473aeb59 100644
--- a/src/app/components/Slideout/Users/SlideoutUsername.vue
+++ b/src/app/components/Slideout/Users/SlideoutUsername.vue
@@ -4,40 +4,26 @@
     @mouseleave="hover = false"
   >
     <Username :user="user"
-      @focus="hover = true" />
-      <div style="overflow:hidden">
-      <button
-        class="chat-message-options border-0"
-        ref="chatOptions"
-        @click.prevent="openContextMenu"
-        v-show="hover && user.username"
-        @blur="hover = false"
-        @keypress.enter.prevent="openContextMenuWithKey"
-        tabindex=0
-      >
-        &vellip; <!-- ⋮ -->
-      </button>
-      <ActionMenu
-        ref="contextMenu"
-        :message="messageFrom(user)"
-      />
-    </div>
+      @focus="hover = true"
+    />
+    <ItemOptions :user="user" :hover="hover" />
   </li>
 </template>
 <script lang="ts">
-  /* This is essentially a duplicate of UserMessage, just with the message removed */
   import {
     Vue, Component, Prop, Watch,
   } from 'vue-property-decorator';
-  import ActionMenu from '../../Messages/ActionMenu.vue';
+  import ActionMenu from '@/components/Messages/ActionMenu.vue';
   import Message from '@/types/message';
   import User from '@/types/user';
-  import Username from '../../Messages/Username.vue';
+  import Username from '@/components/Messages/Username.vue';
+  import ItemOptions from '@/components/ItemOptions.vue';
 
   @Component({
     components: {
       Username,
       ActionMenu,
+      ItemOptions,
     },
   })
   export default class SlideoutUsername extends Vue {
@@ -45,45 +31,9 @@
     user !: User;
 
     hover = false;
-
-    messageFrom(user:User) {
-      return new Message('Reporting user ', '*', user);
-    }
-
-    $refs!: {
-      contextMenu: HTMLFormElement;
-      chatOptions: HTMLButtonElement;
-    };
-
-    openContextMenu(e: MouseEvent) {
-      setTimeout(() => this.$refs.contextMenu.open(e));
-    }
-
-    openContextMenuWithKey(e: KeyboardEvent) {
-      const rect = (e.target as Element).getBoundingClientRect();
-      const event = new MouseEvent('click', {
-        clientX: rect.x,
-        clientY: rect.y,
-      });
-      setTimeout(() => this.$refs.contextMenu.open(event));
-    }
   }
 </script>
 <style scoped>
-  .chat-message-options {
-    position: absolute;
-    top: -4px;
-    right:0px;
-    font-size: 20px;
-    display: block;
-    cursor: pointer;
-    overflow: visible;
-    background-color: transparent;
-  }
-  .chat-message-options:focus {
-    outline: 1px dotted #212121;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
   li {
     position:relative;
     top:0;

From 6fa558da024a92c377a8b40992a7ab09b9bab01f Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 14:47:17 -0500
Subject: [PATCH 207/223] Handled message displays a little differently

---
 src/app/components/Messages/MessageGroup.vue |  1 +
 src/app/components/Messages/UserMessage.vue  | 11 ++++++++++-
 src/app/components/Panes/MessagePane.vue     |  1 +
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Messages/MessageGroup.vue b/src/app/components/Messages/MessageGroup.vue
index 34c1305b..859d65eb 100644
--- a/src/app/components/Messages/MessageGroup.vue
+++ b/src/app/components/Messages/MessageGroup.vue
@@ -5,6 +5,7 @@
       :message="message"
       :key="message.message"
       :first="index === 0"
+      display="true"
       grouped=true
     />
   </div>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index c7e768a4..b08a4a52 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -3,6 +3,7 @@
     class="chat-message d-block"
     @mouseleave="hover = false"
     @mouseover="hover = true"
+    v-if="display"
   >
     <div :style="{ textAlign: isNotice ? 'center' : 'left'}" class="message-container">
       <span :class="{'chat-message-action': isAction}">
@@ -35,7 +36,12 @@
         :left="puzzleTooltipX"
       />
       &lrm;
-      <span v-if="!isNotice" class="message-time">[{{formattedTime}}]</span>
+      <span
+        v-if="!isNotice && formattedTime !== 'Invalid Date'"
+        class="message-time"
+      >
+        [{{formattedTime}}]
+      </span>
     </div>
     <ItemOptions :user="message.user" :message="message" :hover="hover" class="options" />
     <LinkModal ref="linkModal" url=''/>
@@ -70,6 +76,9 @@
 
     hover = false;
 
+    @Prop({ required: true })
+    display !: boolean;
+
     @Prop({ default: false })
     private isHistory !: boolean;
 
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index 28f12f5f..d12993ab 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -8,6 +8,7 @@
       >
         <UserMessage
           v-show="message.user"
+          :display="message.user"
           :message="message"
         />
         <MessageGroup v-show="!message.user" :messages="message" />

From ce5ff4e4e6345010c2eeeb2ad0957038f0e0bfc1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 17:03:37 -0500
Subject: [PATCH 208/223] Redone tooltips, styled updates

---
 src/app/App.vue                               |   5 +-
 src/app/assets/global.scss                    |   5 +
 src/app/components/Messages/PuzzleTooltip.vue |  73 ++++++------
 src/app/components/Messages/UserMessage.vue   |  43 +++-----
 src/app/components/Messages/UserTooltip.vue   |  66 +++++++----
 src/app/components/Messages/Username.vue      |  55 ++++++---
 src/app/components/Panes/MessagePane.vue      |   2 +-
 .../Settings/Sections/IgnoredSection.vue      |   2 +-
 .../Sections/NotificationsSection.vue         | 104 +++++++++---------
 .../Settings/Sections/ToolbarSection.vue      |   4 +-
 .../Slideout/Settings/SlideoutSettings.vue    |   5 +
 .../Slideout/Users/SlideoutUser.vue           |   2 +-
 src/standalone/App.vue                        |   6 +-
 13 files changed, 212 insertions(+), 160 deletions(-)
 create mode 100644 src/app/assets/global.scss

diff --git a/src/app/App.vue b/src/app/App.vue
index 9743991e..fd92d059 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -444,7 +444,10 @@
   }
 </script>
 <style lang="scss">
-@import "./assets/_custom.scss";
+@import "@/assets/global.scss";
+@import '~bootstrap-vue/src/index.scss';
+@import '~bootstrap/scss/bootstrap.scss';
+@import "@/assets/_custom.scss";
 #eterna-chat:not(.tabbing) button:focus {
   outline: none;
   border: none;
diff --git a/src/app/assets/global.scss b/src/app/assets/global.scss
new file mode 100644
index 00000000..135a1e29
--- /dev/null
+++ b/src/app/assets/global.scss
@@ -0,0 +1,5 @@
+@import './_variables.scss';
+
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/mixins";
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index e2671318..02428048 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -3,10 +3,6 @@
     class="
       puzzle-tooltip-container
       text-white
-      d-flex
-      justify-space-between
-      flex-row
-      flex-wrap
       rounded
     "
     ref="container"
@@ -14,25 +10,29 @@
       top: `${top + 5}px`,
       left: `${left + 5}px`
     }">
-      <span
-        class="puzzle-name puzzle p-1 flex-grow-1 flex-shrink-0 text-left"
-      > {{puzzleName}}</span>
-      <span
-        class="puzzle-user puzzle p-1 flex-grow-1 flex-shrink-0 text-left"
-      >{{username}}</span>
-      <span
-        class="puzzle-solvers puzzle p-1 flex-grow-1 flex-shrink-0 text-right"
-      >{{solved}} solvers</span>
-      <span
-        class="puzzle-reward puzzle p-1 flex-grow-1 flex-shrink-0 text-left"
-      >{{reward}}$</span>
-      <span
-        class="puzzle-comments puzzle p-1 flex-grow-1 flex-shrink-0 text-right"
-      >{{comments}} comments</span>
-      <span
-        class="puzzle-description puzzle p-1 flex-grow-1 flex-shrink-0 border-0"
-        v-html="desc"
-      />
+      <div class="user-tooltip-heading-container pr-2 pl-2 pt-2 mb-1">
+        <div class="puzzle-name text-center">{{puzzleName}}</div>
+        <div class="puzzle-user text-center">
+          <a :href="`https://${$vxm.chat.workbranch}/user/${uid}`">{{username}}</a>
+        </div>
+      </div>
+      <div class="user-tooltip-info-container user-tooltip-section pr-2 pl-2 mb-1">
+        <li class="w-100">
+          <span>Solvers</span>
+          <span class="user-rank float-right">{{solved}}</span>
+        </li>
+        <li class="w-100">
+          <span>Reward</span>
+          <span class="user-rank float-right">{{reward}}</span>
+        </li>
+        <li>
+          <span>Comments</span>
+          <span class="puzzle-status float-right">{{comments}}</span>
+        </li>
+      </div>
+      <div class="puzzle-tooltip-desc-container pr-2 pl-2 pb-2">
+        <span class="puzzle-description w-100 d-inline-block" v-html="desc" />
+      </div>
   </div>
 </template>
 <script lang="ts">
@@ -60,7 +60,9 @@
 
     username = 'Anonymous';
 
-    comments = 'No';
+    uid = '0';
+
+    comments = 'None';
 
     solved = 0;
 
@@ -80,14 +82,25 @@
             desc += '&hellip;';
           }
           this.desc = desc;
-          this.solved = parseInt(data['num-cleared'], 10);
+          console.log(data);
+          this.solved = parseInt(data['num-cleared'], 10) || 0;
           this.reward = parseInt(data.reward, 10);
           this.username = data.username;
+          this.uid = data.uid;
           const { comments } = JSON.parse(d).data;
-          this.comments = comments.length > 0 ? comments.length : 'No';
+          this.comments = comments.length > 0 ? comments.length : 'None';
         },
       });
     }
+
+    created() {
+      window.addEventListener('click', (e) => {
+        const clicked = e.target as Element;
+        if (!clicked.classList.contains('puzzle-link')) {
+          this.$emit('hide');
+         }
+      });
+    }
   }
 </script>
 <style scoped lang="scss">
@@ -103,11 +116,7 @@
     min-width:250px;
     max-width: 350px;
   }
-  .puzzle {
-    flex-basis: 50%;
-    border-bottom: white solid 1px;
-  }
-  .puzzle-name, .puzzle-description {
-    flex-basis: 100%;
+  a {
+    color: $yellow;
   }
 </style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index b08a4a52..1f656e87 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -27,6 +27,7 @@
         ref="clickTooltip"
         :top="tooltipY"
         :left="tooltipX"
+        @hide="tooltipVisible = false"
       />
       <PuzzleTooltip
         v-if="puzzleTooltipVisible"
@@ -34,6 +35,7 @@
         ref="puzzleTooltip"
         :top="puzzleTooltipY"
         :left="puzzleTooltipX"
+        @hide="puzzleTooltipVisible = false"
       />
       &lrm;
       <span
@@ -142,13 +144,17 @@
       // Iterates through each channel link
       [...userLinks].forEach(l => {
         // Adds event listener for hover
-        l.addEventListener('mouseenter', (ev) => {
+        l.addEventListener('click', (ev) => {
           const user = l.innerHTML.substring(1);
           // Makes sure user exists
           if (Object.keys(this.$vxm.chat.connectedUsers).includes(user)) {
             // Set the user of the tooltip
             this.clickedUser = this.$vxm.chat.connectedUsers[user]!;
             this.tooltipVisible = true; // Make it visible
+            this.tooltipX = (ev as MouseEvent).clientX
+              || (ev.target as Element).getBoundingClientRect().x;
+            this.tooltipY = (ev as MouseEvent).clientY
+              || (ev.target as Element).getBoundingClientRect().y;
             /* Ensures information is loaded after the tooltip exists
             The tooltip uses v-if (to limit GET requests)
             If the functions are called right away,
@@ -161,23 +167,6 @@
             console.log(`No such user ${user}`);
           }
         });
-        // Hide the tooltip not hovered over
-        l.addEventListener('mouseleave', (ev) => {
-          this.tooltipVisible = false;
-        });
-        // When the mouse is moved, update the tooltip position
-        l.addEventListener('mousemove', (e: Event) => {
-          const ev = e as MouseEvent;
-          this.tooltipX = ev.clientX;
-          this.tooltipY = ev.clientY;
-        });
-        // Opens player profile on click
-        l.addEventListener('click', () => {
-          const username = l.innerHTML.substring(1);
-          const user = this.$vxm.chat.connectedUsers[username];
-          if (!user) return;
-          window.open(`https://${this.$vxm.chat.workbranch}/web/player/${user.uid}/`);
-        });
       });
       // Gets puzzle links from markdown
       const puzzleLinks = this.$refs.msg.getElementsByClassName('puzzle-link');
@@ -185,11 +174,15 @@
       // Iterates through each channel link
       [...puzzleLinks].forEach(l => {
         // Adds event listener for hover
-        l.addEventListener('mouseenter', (ev) => {
+        l.addEventListener('click', (ev) => {
           const url = (l as HTMLElement).innerText;
           const matches = url.match(/\d+\/?$/);
           this.pid = parseInt((matches ? matches[0] : '0'), 10);
           this.puzzleTooltipVisible = true; // Make it visible
+          this.puzzleTooltipX = (ev as MouseEvent).clientX
+            || (ev.target as Element).getBoundingClientRect().x;
+          this.puzzleTooltipY = (ev as MouseEvent).clientY
+            || (ev.target as Element).getBoundingClientRect().y;
             /* Ensures information is loaded after the tooltip exists
             The tooltip uses v-if (to limit GET requests)
             If the functions are called right away,
@@ -199,23 +192,13 @@
               this.$refs.puzzleTooltip.fill();
           });
         });
-        // Hide the tooltip not hovered over
-        l.addEventListener('mouseleave', (ev) => {
-          this.puzzleTooltipVisible = false;
-        });
-        // When the mouse is moved, update the tooltip position
-        l.addEventListener('mousemove', (e: Event) => {
-          const ev = e as MouseEvent;
-          this.puzzleTooltipX = ev.clientX;
-          this.puzzleTooltipY = ev.clientY;
-        });
       });
       [...this.$el.getElementsByClassName('external-link')]
         .forEach((el) => {
           const e = el as HTMLAnchorElement;
           e.addEventListener('click', ev => {
             ev.preventDefault();
-            if (e.href.trim() !== '') this.$refs.linkModal.open(e.href);
+            if (e.href.trim() !== '' && !e.href.match(/(https?:\/\/)?eternagame\.org\/(game\/)?puzzles?\/\d+\/?/)) this.$refs.linkModal.open(e.href);
           });
       });
     }
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 82672095..113a930a 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -1,18 +1,31 @@
 <template>
   <div
-    class="user-tooltip-container text-white d-flex rounded flex-row flex-wrap overflow-auto"
+    class="user-tooltip-container text-white rounded overflow-auto"
     ref="container"
     :style="{
       top: `${top + 5}px`,
       left: `${left + 5}px`
     }">
-      <span class="user-name user">
-        <span style="color:yellow; font-size:1.25em" v-show="user.away">● </span>{{user.username}}
-      </span>
-      <span class="user-profile user"><img :src="profileImage"></span>
-      <span class="user-rank user">{{rank}}</span>
-      <span class="user-status user">{{status}}</span>
-      <span class="user-description user" v-html="desc" />
+      <div class="user-tooltip-heading-container pr-2 pl-2 pt-2 mb-1">
+        <div class="user-profile text-center"><img :src="profileImage"></div>
+        <span class="user-name text-center w-100 d-inline-block">
+          <span style="color:yellow; font-size:1.25em" v-show="user.away">● </span>
+          <a :href="`https://${$vxm.chat.workbranch}/players/${user.uid}`">{{user.username}}</a>
+        </span>
+      </div>
+      <div class="user-tooltip-info-container user-tooltip-section pr-2 pl-2 mb-1">
+        <li class="w-100">
+          <span>Rank</span>
+          <span class="user-rank float-right">{{rank}}</span>
+        </li>
+        <li>
+          <span>Roles</span>
+          <span class="user-status float-right">{{status}}</span>
+        </li>
+      </div>
+      <div class="user-tooltip-desc-container pr-2 pl-2 pb-2">
+        <span class="user-description w-100 d-inline-block" v-html="desc" />
+      </div>
   </div>
 </template>
 <script lang="ts">
@@ -83,17 +96,25 @@
           status.push(e);
         }
       });
-      if (status.length > 0) {
-        this.status = status.join(', ');
-      }
+      status.push('player');
+      this.status = status.join(', ');
     }
 
     status = '';
+
+    created() {
+      window.addEventListener('click', (e) => {
+        const clicked = e.target as Element;
+        if (!clicked.classList.contains('user-link')) {
+          this.$emit('hide');
+         }
+      });
+    }
   }
 </script>
 <style scoped lang="scss">
-  @import "~@/assets/_custom.scss";
   @import '~vue-context/src/sass/vue-context';
+  @import "~@/assets/_custom.scss";
   .user-tooltip-container {
     position: fixed;
     background-color:$med-dark-blue;
@@ -103,22 +124,21 @@
     left:0px;
     width:250px;
   }
-  .user {
-    flex: 0 1 50%;
-    padding: 5px;
-    border-bottom: 1px solid white;
-  }
   .user-status::first-letter {
     text-transform: capitalize;
   }
-  .user-profile, .user-status {
+  .user-status, .user-rank {
     text-align:right;
   }
-  .user-description {
-    flex-basis: 100%;
-    border: none;
-  }
   img {
-    height: 1.5rem;
+    height: 75px;
+    background-color: $dark-blue;
+    border-radius: 50%;
+  }
+  .user-tooltip-heading-container {
+    background-color: $med-dark-blue;
+  }
+  .user-name > a {
+    color: $yellow;
   }
 </style>
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index 56151a1a..a543436a 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -1,16 +1,16 @@
 <template>
   <span>
-    <a
+    <span
       v-if="user"
       target="_blank"
       class="username text-decoration-none font-weight-bold"
       @focus="$emit('focus')"
       @blur="$emit('blur')"
       :style="{ color: displayedColor }"
-      :href="`https://${$vxm.chat.workbranch}/web/player/${user.uid}/`"
-      @mouseover="hovered = true; updateTooltipCoordinates($event) /* Shows and hides tooltip */"
-      @mouseout="hovered = false"
-      @mousemove="updateTooltipCoordinates"
+      @click="showTooltip"
+      tabindex="0"
+      v-on-clickaway="hide"
+      @keypress.enter="toggleTooltip"
     >
       <span
         class="away-indicator"
@@ -19,12 +19,12 @@
         ●
       </span>
       {{ uniqueNicks[0] || user.username }}<slot/>
-    </a>
+    </span>
     <transition name="fade" @after-enter="enter">
       <UserTooltip
         :top="top"
         :left="left"
-        v-if="hovered"
+        v-if="tooltipVisible"
         :user="user"
         ref="tooltip"
       />
@@ -34,14 +34,15 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { mixin as clickaway } from 'vue-clickaway';
   import User from '@/types/user';
   import UserTooltip from './UserTooltip.vue';
 
-
   @Component({
     components: {
       UserTooltip,
     },
+    mixins: [clickaway],
   })
   export default class Username extends Vue {
     @Prop({ required: true })
@@ -50,15 +51,39 @@
     @Prop()
     color?: string;
 
-    hovered = false;
+    tooltipVisible = false;
 
     top = 0;
 
     left = 0;
 
-    updateTooltipCoordinates(e:MouseEvent) {
-      this.top = e.clientY;
-      this.left = e.clientX;
+    showTooltip(e:MouseEvent) {
+      e.preventDefault();
+      if (e.clientX && e.clientY) {
+        this.top = e.clientY;
+        this.left = e.clientX;
+      } else {
+        const rect = (e.target as Element).getBoundingClientRect();
+        this.top = rect.y;
+        this.left = rect.x;
+      }
+      this.tooltipVisible = true;
+    }
+
+    hide() {
+      this.tooltipVisible = false;
+    }
+
+    toggleTooltip(e: KeyboardEvent) {
+      if (this.tooltipVisible) this.hide();
+      else {
+        const rect = (e.target as Element).getBoundingClientRect();
+        const event = new MouseEvent('click', {
+          clientX: rect.x,
+          clientY: rect.y,
+        });
+        this.showTooltip(event);
+      }
     }
 
     private defaultColor = '#ffffff';
@@ -139,12 +164,6 @@
   .fade-enter-active, .fade-leave-active {
     transition: opacity .5s;
   }
-  .fade-enter-active {
-    transition-delay: 0.75s;
-  }
-  .fade-leave-active {
-    transition-delay: 0s;
-  }
   .fade-enter, .fade-leave-to {
     opacity: 0;
   }
diff --git a/src/app/components/Panes/MessagePane.vue b/src/app/components/Panes/MessagePane.vue
index d12993ab..50f592af 100644
--- a/src/app/components/Panes/MessagePane.vue
+++ b/src/app/components/Panes/MessagePane.vue
@@ -1,6 +1,6 @@
 <template>
   <Pane ref="pane" :visibility="visibility" :data="data" @autoscroll="this.autoscroll">
-    <ul style="margin-bottom:0; padding-right:10px">
+    <ul style="margin-bottom:0;" class="list-group list-style-type-none">
       <span
         v-for="(message, i) in groupedMessages"
         :key="i"
diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
index 0126be92..064ecb1d 100644
--- a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -1,6 +1,6 @@
 <template>
   <SettingsSection title="Ignored" >
-      <ul style="margin-bottom: 0" aria-label="List of ignored users">
+      <ul style="margin-bottom: 0" class="list-group" aria-label="List of ignored users">
         <li v-for="user in ignoredUsers" :key="user">
           <span style="vertical-align: sub">{{user}}</span>
           <button
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index ad5c117c..a02ba9dc 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -1,55 +1,59 @@
 <template>
   <SettingsSection title="Notifications" >
-        <ul aria-label="Enable or disable notifications for channels">
-          <li
-            v-for="channel in channels"
-            :key="channel.name"
-            :aria-label="`Notifications for ${channel.name}`" >
-            <span class="align-baseline">{{channel.name}}</span>
-            <span class="switch">
-              <SettingsSwitch v-model="$vxm.chat.channels[channel.name].notificationsEnabled"
-              @input="updateNotifications(channel.name)" />
-            </span>
-          </li>
-          <li aria-label="Notifications for all channels">
-            <span class="align-baseline">All</span>
-            <span class="switch">
-              <SettingsEnableDisable :value="allEnabled" @input="updateAll" />
-            </span>
-          </li>
-        </ul>
-        <li>
-          <span
-            class="align-baseline d-inline-block"
-            aria-label="Appears in the page title if you have notifications" >
-            Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
-          </span>
-          <span style="width: 40%" class='float-right'>
-            <input type=text v-model="indicator" style="padding:1px;">
-          </span>
-        </li>
-        <li>
-          <span class="align-baseline d-inline-block">Desktop Notifications</span>
-          <span
-            class="switch"
-            aria-label="Whether notifications should be sent directly to your computer">
-           <SettingsSwitch v-model="desktopNotifications" />
-          </span>
-        </li>
-        <li>
-          <span
-            class="align-baseline d-inline-block;"
-            aria-label="Keywords that trigger notifications.
-            If you have multiple keywords, separate them with commas.
-            Your username is automatically a keyword.">
-            Keywords
-            <SettingsTooltip text="If you have multiple keywords, separate them with commas.
-            Your username is automatically a keyword." />
-          </span>
-          <span class='float-right' style="width: 40%">
-            <input type=text v-model="keywords" style="padding:1px;">
-          </span>
-        </li>
+    <ul aria-label="Enable or disable notifications for channels" class="list-group">
+      <li
+        v-for="channel in channels"
+        :key="channel.name"
+        :aria-label="`Notifications for ${channel.name}`"
+      >
+        <span class="align-baseline">{{channel.name}}</span>
+        <span class="switch">
+          <SettingsSwitch
+            v-model="$vxm.chat.channels[channel.name].notificationsEnabled"
+            @input="updateNotifications(channel.name)"
+          />
+        </span>
+      </li>
+      <li aria-label="Notifications for all channels">
+        <span class="align-baseline">All</span>
+        <span class="switch">
+          <SettingsEnableDisable :value="allEnabled" @input="updateAll" />
+        </span>
+      </li>
+    </ul>
+    <li>
+      <span
+        class="align-baseline d-inline-block"
+        aria-label="Appears in the page title if you have notifications"
+      >
+        Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
+      </span>
+      <span style="width: 40%" class='float-right'>
+        <input type=text v-model="indicator" style="padding:1px;">
+      </span>
+    </li>
+    <li>
+      <span class="align-baseline d-inline-block">Desktop Notifications</span>
+      <span
+        class="switch"
+        aria-label="Whether notifications should be sent directly to your computer"
+      >
+        <SettingsSwitch v-model="desktopNotifications" />
+      </span>
+    </li>
+    <li>
+      <span
+        class="align-baseline d-inline-block;"
+        aria-label="Keywords that trigger notifications."
+      >
+        Keywords
+          <SettingsTooltip text="If you have multiple keywords, separate them with commas.
+          Your username is automatically a keyword." />
+      </span>
+      <span class='float-right' style="width: 40%">
+        <input type=text v-model="keywords" style="padding:1px;">
+      </span>
+    </li>
   </SettingsSection>
 </template>
 <script lang="ts">
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 0212352f..0076d356 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -1,6 +1,6 @@
 <template>
   <SettingsSection title="Toolbar Features">
-    <ul aria-label="Which features are enabled in the toolbar">
+    <ul aria-label="Which features are enabled in the toolbar" class="list-group">
       <li aria-label="Whether emoticons are enabled in the toolbar">
         <span class="align-sub">
           Emoticons
@@ -29,7 +29,7 @@
         </span>
       </li>
     </ul>
-    <ul class="mt-2" v-if="$vxm.settings.emoticonChatFeatures"
+    <ul class="mt-2 list-group" v-if="$vxm.settings.emoticonChatFeatures"
       aria-label="Change custom emoticons that appear in the toolbar">
       <li>
         Custom emoticons
diff --git a/src/app/components/Slideout/Settings/SlideoutSettings.vue b/src/app/components/Slideout/Settings/SlideoutSettings.vue
index 314f08d0..99a6d6bd 100644
--- a/src/app/components/Slideout/Settings/SlideoutSettings.vue
+++ b/src/app/components/Slideout/Settings/SlideoutSettings.vue
@@ -42,6 +42,11 @@
     }
   }
 </script>
+<style>
+li {
+  list-style-type: none;
+}
+</style>
 <style lang="scss" scoped>
 @import "@/assets/_custom.scss";
 #settings-wrapper { /* Wrapper div */
diff --git a/src/app/components/Slideout/Users/SlideoutUser.vue b/src/app/components/Slideout/Users/SlideoutUser.vue
index f00e94c0..f7026a4a 100644
--- a/src/app/components/Slideout/Users/SlideoutUser.vue
+++ b/src/app/components/Slideout/Users/SlideoutUser.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="user-wrapper" :style="{ fontSize:`${fontSize}px` }">
     <h4>Online ({{userCount}})</h4>
-    <ul>
+    <ul class="list-group list-style-type-none">
       <SlideoutUsername
         v-for="user in connectedUsers"
         :key="user.username"
diff --git a/src/standalone/App.vue b/src/standalone/App.vue
index 4b8ea1c8..129a0e60 100644
--- a/src/standalone/App.vue
+++ b/src/standalone/App.vue
@@ -52,9 +52,13 @@
 </script>
 
 <style lang="scss">
-@import url(https://eternagame.org/workbranch_main/frontend/eterna.min.css?ver=t1563775052);
 @import url(https://fonts.googleapis.com/css?family=Didact+Gothic|Open+Sans:400,300,600,700);
 
+@import "@/assets/global.scss";
+@import '~bootstrap-vue/src/index.scss';
+@import '~bootstrap/scss/bootstrap.scss';
+@import "@/assets/_custom.scss";
+
 body {
   min-width: 0;
 }

From ca39510deea8f2b7b2b298d5d657d96c903a9be1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 17:21:51 -0500
Subject: [PATCH 209/223] Tooltips have loading spinners

---
 .../Messages/InlineLoadingSpinner.vue         | 12 +++++
 src/app/components/Messages/PuzzleTooltip.vue | 54 +++++++++++++------
 src/app/components/Messages/UserTooltip.vue   | 34 +++++++++---
 3 files changed, 76 insertions(+), 24 deletions(-)
 create mode 100644 src/app/components/Messages/InlineLoadingSpinner.vue

diff --git a/src/app/components/Messages/InlineLoadingSpinner.vue b/src/app/components/Messages/InlineLoadingSpinner.vue
new file mode 100644
index 00000000..06306911
--- /dev/null
+++ b/src/app/components/Messages/InlineLoadingSpinner.vue
@@ -0,0 +1,12 @@
+<template>
+  <img
+    src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"
+    class="d-inline"
+    style="height: 1rem"
+  >
+</template>
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+  @Component
+  export default class InlineLoadingSpinner extends Vue {}
+</script>
diff --git a/src/app/components/Messages/PuzzleTooltip.vue b/src/app/components/Messages/PuzzleTooltip.vue
index 02428048..0fda3f6f 100644
--- a/src/app/components/Messages/PuzzleTooltip.vue
+++ b/src/app/components/Messages/PuzzleTooltip.vue
@@ -10,28 +10,44 @@
       top: `${top + 5}px`,
       left: `${left + 5}px`
     }">
-      <div class="user-tooltip-heading-container pr-2 pl-2 pt-2 mb-1">
-        <div class="puzzle-name text-center">{{puzzleName}}</div>
+      <div class="puzzle-tooltip-heading-container pr-2 pl-2 pt-2 mb-1">
+        <div class="puzzle-name text-center">
+          <span v-if="puzzleName">{{puzzleName}}</span>
+          <InlineLoadingSpinner v-else />
+        </div>
         <div class="puzzle-user text-center">
-          <a :href="`https://${$vxm.chat.workbranch}/user/${uid}`">{{username}}</a>
+          <a v-if="uid" :href="`https://${$vxm.chat.workbranch}/user/${uid}`">{{username}}</a>
+          <InlineLoadingSpinner v-else />
         </div>
       </div>
-      <div class="user-tooltip-info-container user-tooltip-section pr-2 pl-2 mb-1">
+      <div class="puzzle-tooltip-info-container user-tooltip-section pr-2 pl-2 mb-1">
         <li class="w-100">
           <span>Solvers</span>
-          <span class="user-rank float-right">{{solved}}</span>
+          <span class="puzzle-solvers float-right">
+            <span v-if="solved">{{ solved }}</span>
+            <InlineLoadingSpinner v-else />
+          </span>
         </li>
         <li class="w-100">
           <span>Reward</span>
-          <span class="user-rank float-right">{{reward}}</span>
+          <span class="puzzle-reward float-right">
+            <span v-if="reward">{{reward}}</span>
+            <InlineLoadingSpinner v-else />
+          </span>
         </li>
         <li>
           <span>Comments</span>
-          <span class="puzzle-status float-right">{{comments}}</span>
+          <span class="puzzle-comments float-right">
+            <span v-if="comments">{{comments}}</span>
+            <InlineLoadingSpinner v-else />
+          </span>
         </li>
       </div>
       <div class="puzzle-tooltip-desc-container pr-2 pl-2 pb-2">
-        <span class="puzzle-description w-100 d-inline-block" v-html="desc" />
+        <span class="puzzle-description w-100 d-inline-block">
+          <span v-if="desc" v-html="desc" />
+          <InlineLoadingSpinner v-else />
+        </span>
       </div>
   </div>
 </template>
@@ -39,7 +55,12 @@
   import {
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
-  @Component
+  import InlineLoadingSpinner from './InlineLoadingSpinner.vue';
+  @Component({
+    components: {
+      InlineLoadingSpinner,
+    },
+  })
   export default class PuzzleTooltip extends Vue {
     @Prop({ required: true })
     pid !: number;
@@ -54,19 +75,19 @@
       container: HTMLDivElement;
     };
 
-    puzzleName = 'Untitled';
+    puzzleName: string | null = null;
 
-    desc = 'No description';
+    desc: string | null = null;
 
-    username = 'Anonymous';
+    username: string | null = null;
 
-    uid = '0';
+    uid: string | null = null;
 
-    comments = 'None';
+    comments: string | null = null;
 
-    solved = 0;
+    solved: number | null = null;
 
-    reward = 100;
+    reward: number | null = null;
 
     fill() {
       this.$vxm.chat.getPuzzleInfo({
@@ -82,7 +103,6 @@
             desc += '&hellip;';
           }
           this.desc = desc;
-          console.log(data);
           this.solved = parseInt(data['num-cleared'], 10) || 0;
           this.reward = parseInt(data.reward, 10);
           this.username = data.username;
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 113a930a..30c2dbd1 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -7,7 +7,10 @@
       left: `${left + 5}px`
     }">
       <div class="user-tooltip-heading-container pr-2 pl-2 pt-2 mb-1">
-        <div class="user-profile text-center"><img :src="profileImage"></div>
+        <div class="user-profile text-center">
+          <img v-if="profileImage" :src="profileImage">
+          <InlineLoadingSpinner v-else />
+        </div>
         <span class="user-name text-center w-100 d-inline-block">
           <span style="color:yellow; font-size:1.25em" v-show="user.away">● </span>
           <a :href="`https://${$vxm.chat.workbranch}/players/${user.uid}`">{{user.username}}</a>
@@ -16,7 +19,10 @@
       <div class="user-tooltip-info-container user-tooltip-section pr-2 pl-2 mb-1">
         <li class="w-100">
           <span>Rank</span>
-          <span class="user-rank float-right">{{rank}}</span>
+          <span class="user-rank float-right">
+            <span v-if="rank">{{rank}}</span>
+            <InlineLoadingSpinner v-else />
+          </span>
         </li>
         <li>
           <span>Roles</span>
@@ -24,7 +30,10 @@
         </li>
       </div>
       <div class="user-tooltip-desc-container pr-2 pl-2 pb-2">
-        <span class="user-description w-100 d-inline-block" v-html="desc" />
+        <span class="user-description w-100 d-inline-block">
+          <span v-if="desc" v-html="desc" />
+          <InlineLoadingSpinner v-else />
+        </span>
       </div>
   </div>
 </template>
@@ -33,7 +42,12 @@
     Component, Prop, Vue, Watch,
   } from 'vue-property-decorator';
   import User from '@/types/user';
-  @Component
+  import InlineLoadingSpinner from './InlineLoadingSpinner.vue';
+  @Component({
+    components: {
+      InlineLoadingSpinner,
+    },
+  })
   export default class UserTooltip extends Vue {
     @Prop({ required: true })
     user !: User;
@@ -44,11 +58,11 @@
     @Prop({ default: 0 })
     left !: number;
 
-    desc = 'This user has not added a description to their profile';
+    desc: string | null = null;
 
-    rank = 'Unranked';
+    rank: string | null = null;
 
-    profileImage = '';
+    profileImage: string | null = null;
 
     $refs !: {
       container: HTMLDivElement;
@@ -68,12 +82,18 @@
                 desc += '&hellip;';
               }
               this.desc = desc;
+            } else {
+              this.desc = 'User has not added a description to their profile';
             }
             if (data.data.user.rank) {
               this.rank = `#${data.data.user.rank}`;
+            } else {
+              this.rank = 'Unranked';
             }
             if (data.data.user.picture) {
               this.profileImage = `https://eternagame.org/${data.data.user.picture}`;
+            } else {
+              this.profileImage = '';
             }
           }
         },

From a0b0319764ac720b8ac2d561af9b78688f422791 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 17:34:51 -0500
Subject: [PATCH 210/223] Fixed contrast calculations

---
 src/app/components/Messages/Username.vue                      | 4 +---
 .../components/Slideout/Settings/ColorPicker/ColorPicker.vue  | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index a543436a..fbd13df2 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -145,9 +145,7 @@
         parseInt(blue, 16),
       );
       // If it contrasts well enough
-      return Math.abs(colorValue - backgroundValue) > 20;
-      /* Note that the threshold is a little lower than in the color picker
-      to make sure any color from the picker works in the chat */
+      return Math.abs((colorValue + 0.05) / (backgroundValue + 0.05)) > 4;
     }
 
     brightness(r:number, g:number, b:number) { // Brightness of a color
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index db5aa104..1917283d 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -106,8 +106,8 @@
         parseInt(this.red, 10),
         parseInt(this.green, 10),
         parseInt(this.blue, 10),
-      ) + 20;
-      return Math.abs(colorValue - backgroundValue) > 24;
+      );
+      return Math.abs((colorValue + 0.05) / (backgroundValue + 0.05)) > 4;
     }
 
     // Sets color to a hex string. Used by color swatches.

From 406d0f51deb80322c74249ef1996c0a0f2bb6d32 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Tue, 21 Jul 2020 17:41:29 -0500
Subject: [PATCH 211/223] Chat slides along edges and can't go past them

---
 src/app/components/DraggableDiv.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 478e7424..c46ab084 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -62,8 +62,17 @@
         this.positions.clientY = event.clientY;
         // set the element's new position:
         if (!this.container) return;
-        this.container.style.left = `${this.container.offsetLeft - this.positions.movementX}px`;
-        this.container.style.top = `${this.container.offsetTop - this.positions.movementY}px`;
+        let leftValue = this.container.offsetLeft - this.positions.movementX;
+        let topValue = this.container.offsetTop - this.positions.movementY;
+        leftValue = Math.max(0, leftValue);
+        topValue = Math.max(0, topValue);
+        const { width, height } = this.container.style;
+        const chatWidth = parseInt(width.replace('px', ''), 10);
+        const chatHeight = parseInt(height.replace('px', ''), 10);
+        leftValue = Math.min(leftValue, window.innerWidth - chatWidth);
+        topValue = Math.min(topValue, window.innerHeight - chatHeight);
+        this.container.style.left = `${leftValue}px`;
+        this.container.style.top = `${topValue}px`;
       }
     }
 

From 4b8146053ae16d29b24702779ba48789af160e0b Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 24 Jul 2020 14:32:48 -0500
Subject: [PATCH 212/223] Chat docking and minimization upgrades

---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 src/app/App.vue                               |  5 +-
 src/app/components/DraggableDiv.vue           | 87 +++++++++++++++++--
 .../Messages/InlineLoadingSpinner.vue         |  2 +-
 src/app/main.ts                               |  2 +
 6 files changed, 94 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8edff442..d1741a9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12777,6 +12777,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gsap": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.4.2.tgz",
+      "integrity": "sha512-2DMG5x9IeQ7csnVaGxmhN4v06sJ4MklqYETMBjfmPQoPel4O4yTvpnINKLDYz7D22xNRwwyd1YWWxpkKgYkuiw=="
+    },
     "gzip-size": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
diff --git a/package.json b/package.json
index d751174f..6f779306 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "broadcast-channel": "^3.1.0",
     "broadcastchannel-polyfill": "^1.0.1",
     "eventemitter3": "^4.0.4",
+    "gsap": "^3.4.2",
     "idb": "^5.0.4",
     "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
diff --git a/src/app/App.vue b/src/app/App.vue
index fd92d059..3ab94d03 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -12,6 +12,7 @@
     :enabled="!fullSize /* Disables dragging when chat is fullsize*/"
     v-resize:debounce="resized"
     :positionBasis="positionBasis"
+    ref="draggable"
   >
     <template slot="main">
       <slideout
@@ -102,6 +103,7 @@
   }
 
   get minimized() {
+    if (this.$refs && this.$refs.draggable) this.$refs.draggable.minimize();
     return this.minimization;
   }
 
@@ -332,6 +334,7 @@
     privmsgmodal: PrivateMessageModal,
     messagepanes: MessagePane[],
     slideout: Slideout,
+    draggable: DraggableDiv,
   };
 
   postMessage(rawMessage: string, channel: string) {
@@ -495,7 +498,7 @@
 .fade-leave-to {
   transform-origin: top center;
   transform: scaleY(0);
-  //Moves everything up without interfering with top bar.
+  // Moves everything up without interfering with top bar.
 }
 .chat-content {
   border: solid #0405224b 2px;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index c46ab084..18ee1593 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -13,6 +13,7 @@
   import {
     Component, Prop, Watch, Vue,
   } from 'vue-property-decorator';
+  import gsap from 'gsap';
 
   @Component
   export default class DraggableDiv extends Vue {
@@ -62,20 +63,94 @@
         this.positions.clientY = event.clientY;
         // set the element's new position:
         if (!this.container) return;
+
         let leftValue = this.container.offsetLeft - this.positions.movementX;
         let topValue = this.container.offsetTop - this.positions.movementY;
-        leftValue = Math.max(0, leftValue);
-        topValue = Math.max(0, topValue);
-        const { width, height } = this.container.style;
+
+        const {
+        width, height, minHeight, transform,
+        } = this.container.style;
+
         const chatWidth = parseInt(width.replace('px', ''), 10);
-        const chatHeight = parseInt(height.replace('px', ''), 10);
-        leftValue = Math.min(leftValue, window.innerWidth - chatWidth);
-        topValue = Math.min(topValue, window.innerHeight - chatHeight);
+        let chatHeight = parseInt(height.replace('px', ''), 10);
+
+        let minimized = false;
+        if (minHeight === '40px') minimized = true;
+        if (minimized) chatHeight = 40;
+
+        const breakpoint = 10;
+        const minLeft = 0;
+        let minTop = 0;
+        let maxTop = window.innerHeight - chatHeight;
+        const maxLeft = window.innerWidth - chatWidth;
+
+        if (minimized) {
+          const chat = this.$refs.draggableContainer;
+
+          // When the chat is rotated, width and height are a little strange
+          // To properly respect the window boundaries, there needs to be an offset
+          const offsetX = 0 - chatWidth / 2 + chatHeight / 2;
+
+          if (leftValue < minLeft + breakpoint) {
+            minTop -= offsetX;
+            maxTop += offsetX;
+            gsap.to(chat, { duration: 0.5, rotation: 90 });
+            gsap.to(chat, { duration: 1, x: offsetX });
+          } else if (leftValue > maxLeft - breakpoint) {
+            minTop -= offsetX;
+            maxTop += offsetX;
+            gsap.to(chat, { duration: 0.5, rotation: -90 });
+            gsap.to(chat, { duration: 1, x: 0 - offsetX });
+          } else {
+            gsap.to(chat, { duration: 0.5, rotation: 0 });
+            gsap.to(chat, { duration: 1, x: 0 });
+          }
+        }
+
+        leftValue = Math.max(minLeft, leftValue);
+        topValue = Math.max(minTop, topValue);
+        leftValue = Math.min(maxLeft, leftValue);
+        topValue = Math.min(maxTop, topValue);
+
         this.container.style.left = `${leftValue}px`;
         this.container.style.top = `${topValue}px`;
       }
     }
 
+    minimize() {
+      const {
+      left, top, width, height, minHeight,
+      } = this.container.style;
+      const chatLeft = parseInt(left.replace('px', ''), 10);
+      const chatTop = parseInt(top.replace('px', ''), 10);
+      const chatWidth = parseInt(width.replace('px', ''), 10);
+      const chatHeight = parseInt(height.replace('px', ''), 10);
+      const minimized = minHeight !== '40px'; // Timing of function means it's called right before the update; it gives a delayed value that is the opposite of the true value
+
+      const breakpoint = 10;
+
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+
+      const chat = this.$refs.draggableContainer;
+
+      if (!minimized) {
+        if (chatTop >= windowHeight - chatHeight) {
+          gsap.to(chat, {
+            duration: 0.2,
+            top: windowHeight - chatHeight,
+          });
+        }
+      } else if (chatTop + chatHeight >= windowHeight) {
+          gsap.to(chat, {
+            duration: 0.2,
+            top: windowHeight - 40,
+          });
+        }
+
+      // TODO
+    }
+
     closeDragElement() {
       document.onmouseup = null;
       document.onmousemove = null;
diff --git a/src/app/components/Messages/InlineLoadingSpinner.vue b/src/app/components/Messages/InlineLoadingSpinner.vue
index 06306911..f829167e 100644
--- a/src/app/components/Messages/InlineLoadingSpinner.vue
+++ b/src/app/components/Messages/InlineLoadingSpinner.vue
@@ -1,4 +1,4 @@
-<template>
+<template functional>
   <img
     src="https://s3.amazonaws.com/eterna/icon_img/loading.gif"
     class="d-inline"
diff --git a/src/app/main.ts b/src/app/main.ts
index 957e89ef..70fcbccc 100644
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -9,6 +9,8 @@ Vue.use(BootstrapVue);
 Vue.use(VueResource);
 Vue.config.productionTip = false;
 
+// Vue.config.performance = true;
+
 export default new Vue({
   render: h => h(App),
 });

From 7e3499fd0b19081e2c194d80e56224d2f15d0e4c Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 24 Jul 2020 16:49:15 -0500
Subject: [PATCH 213/223] Resizing handles

---
 package-lock.json                   |  10 ++
 package.json                        |   2 +
 src/app/App.vue                     |  13 +-
 src/app/components/DraggableDiv.vue | 221 +++++++++++++++++++++++-----
 src/app/components/Panes/Pane.vue   |  13 +-
 5 files changed, 215 insertions(+), 44 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d1741a9d..60c83b4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3956,6 +3956,11 @@
       "integrity": "sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.158",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.158.tgz",
+      "integrity": "sha512-InCEXJNTv/59yO4VSfuvNrZHt7eeNtWQEgnieIA+mIC+MOWM9arOWG2eQ8Vhk6NbOre6/BidiXhkZYeDY9U35w=="
+    },
     "@types/long": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
@@ -16935,6 +16940,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.transform": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
diff --git a/package.json b/package.json
index 6f779306..9b0b6686 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@cloudcmd/clipboard": "^2.0.0",
     "@types/irc": "^0.3.33",
+    "@types/lodash": "^4.14.158",
     "@types/node": "^14.0.13",
     "@types/punycode": "^2.1.0",
     "@types/sjcl": "^1.0.29",
@@ -29,6 +30,7 @@
     "idb": "^5.0.4",
     "irc-framework": "^4.8.1",
     "lodash": "^4.17.15",
+    "lodash.throttle": "^4.1.1",
     "markdown-it": "^11.0.0",
     "sjcl": "^1.0.8",
     "stream": "0.0.2",
diff --git a/src/app/App.vue b/src/app/App.vue
index 3ab94d03..f0c9bab8 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,7 +1,6 @@
 <template>
   <DraggableDiv
     id="eterna-chat"
-    style="overflow-y: hidden"
     :style="chatStyle"
     :class="{
       eternaChatFull: fullSized,
@@ -13,6 +12,7 @@
     v-resize:debounce="resized"
     :positionBasis="positionBasis"
     ref="draggable"
+    @scrollDown="scrollDown"
   >
     <template slot="main">
       <slideout
@@ -44,9 +44,6 @@
       <OpenWindowButton v-model="fullSize" />
       <StarButton v-model="$vxm.chat.showStarred" />
     </template>
-    <template slot="footer">
-      <div id="resize-handle" v-show="!minimized"/>
-    </template>
   </DraggableDiv>
 </template>
 <script lang="ts">
@@ -110,7 +107,6 @@
   get minimizedStyle() {
     return {
       'min-height': this.minimized ? '40px' : '400px',
-      resize: this.minimized ? '' : 'both',
     };
   }
 
@@ -279,6 +275,10 @@
     }
   }
 
+  scrollDown() {
+    this.$refs.messagepanes.forEach(e => e.scrollDown());
+  }
+
   // Slideout
 
   get slideoutOpen() {
@@ -468,6 +468,9 @@
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 350px; /* Bounds on chat resizing */
 }
+#eterna-chat.clicked-inside {
+  outline: gray dashed 1px;
+}
 .eternaChatNormal {
   width: $container-width; // Fill in with normal size
   height: $container-height;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 18ee1593..8ce78162 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -1,6 +1,14 @@
 <!-- Code taken from https://dev.to/mandrewcito/vue-js-draggable-div-3mee and modified so draggability can be turned on or off -->
 <template>
-  <div ref="draggableContainer" id="draggable-container">
+  <div ref="draggableContainer" id="draggable-container" @click="internalClick">
+    <div class="handle handle-l" @mousedown="resizeMouseDown($event, 'l')"/>
+    <div class="handle handle-tl" @mousedown="resizeMouseDown($event, 'tl')" />
+    <div class="handle handle-t" @mousedown="resizeMouseDown($event, 't')" />
+    <div class="handle handle-tr"  @mousedown="resizeMouseDown($event, 'tr')" />
+    <div class="handle handle-r" @mousedown="resizeMouseDown($event, 'r')" />
+    <div class="handle handle-br" @mousedown="resizeMouseDown($event, 'br')" />
+    <div class="handle handle-b" @mousedown="resizeMouseDown($event, 'b')" />
+    <div class="handle handle-bl" @mousedown="resizeMouseDown($event, 'bl')" />
     <div id="draggable-header" @mousedown="dragMouseDown">
       <slot name="header"></slot>
     </div>
@@ -14,6 +22,8 @@
     Component, Prop, Watch, Vue,
   } from 'vue-property-decorator';
   import gsap from 'gsap';
+  // @ts-ignore
+  import throttle from 'lodash.throttle';
 
   @Component
   export default class DraggableDiv extends Vue {
@@ -24,6 +34,14 @@
       movementY: 0,
     };
 
+    resizePositions = {
+      clientX: 0,
+      clientY: 0,
+      movementX: 0,
+      movementY: 0,
+      dir: '',
+    };
+
     @Prop({ default: true })
     enabled !: boolean;
 
@@ -117,40 +135,6 @@
       }
     }
 
-    minimize() {
-      const {
-      left, top, width, height, minHeight,
-      } = this.container.style;
-      const chatLeft = parseInt(left.replace('px', ''), 10);
-      const chatTop = parseInt(top.replace('px', ''), 10);
-      const chatWidth = parseInt(width.replace('px', ''), 10);
-      const chatHeight = parseInt(height.replace('px', ''), 10);
-      const minimized = minHeight !== '40px'; // Timing of function means it's called right before the update; it gives a delayed value that is the opposite of the true value
-
-      const breakpoint = 10;
-
-      const windowWidth = window.innerWidth;
-      const windowHeight = window.innerHeight;
-
-      const chat = this.$refs.draggableContainer;
-
-      if (!minimized) {
-        if (chatTop >= windowHeight - chatHeight) {
-          gsap.to(chat, {
-            duration: 0.2,
-            top: windowHeight - chatHeight,
-          });
-        }
-      } else if (chatTop + chatHeight >= windowHeight) {
-          gsap.to(chat, {
-            duration: 0.2,
-            top: windowHeight - 40,
-          });
-        }
-
-      // TODO
-    }
-
     closeDragElement() {
       document.onmouseup = null;
       document.onmousemove = null;
@@ -193,6 +177,117 @@
         this.$emit('closeDragElement');
       }
     }
+
+    minimize() {
+      const {
+      left, top, width, height, minHeight,
+      } = this.container.style;
+      const chatLeft = parseInt(left.replace('px', ''), 10);
+      const chatTop = parseInt(top.replace('px', ''), 10);
+      const chatWidth = parseInt(width.replace('px', ''), 10);
+      const chatHeight = parseInt(height.replace('px', ''), 10);
+      const minimized = minHeight !== '40px'; // Timing of function means it's called right before the update; it gives a delayed value that is the opposite of the true value
+
+      const breakpoint = 10;
+
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+
+      const chat = this.$refs.draggableContainer;
+
+      if (!minimized) {
+        if (chatTop >= windowHeight - chatHeight) {
+          gsap.to(chat, {
+            duration: 0.2,
+            top: windowHeight - chatHeight,
+          });
+        }
+      } else if (chatTop + chatHeight >= windowHeight) {
+          gsap.to(chat, {
+            duration: 0.2,
+            top: windowHeight - 40,
+          });
+        }
+
+      // TODO
+    }
+
+    internalClick(event: MouseEvent) {
+      event.stopPropagation();
+      this.container.classList.add('clicked-inside');
+    }
+
+    externalClick(event: MouseEvent) {
+      this.container.classList.remove('clicked-inside');
+    }
+
+    mounted() {
+      document.onclick = this.externalClick;
+    }
+
+    emitScrolDown() {
+      this.$emit('scrollDown');
+    }
+
+    // Not as many $emits
+    throttleScrollDown = throttle(this.emitScrolDown, 15);
+
+    resizeMouseDown(event: MouseEvent, direction: string) {
+      event.stopPropagation();
+      document.onmousemove = this.resizeDrag;
+      document.onmouseup = this.closeResizeElement;
+      this.resizePositions.dir = direction;
+      this.resizePositions.clientX = event.x;
+      this.resizePositions.clientY = event.y;
+      // Disables transitions during the resize
+      this.container.style.transition = 'none';
+    }
+
+    resizeDrag(event: MouseEvent) {
+      this.resizePositions.movementX = this.resizePositions.clientX - event.x;
+      this.resizePositions.movementY = this.resizePositions.clientY - event.y;
+      this.resizePositions.clientX = event.x;
+      this.resizePositions.clientY = event.y;
+
+      let widthValue = this.container.offsetWidth - this.resizePositions.movementX;
+      let heightValue = this.container.offsetHeight - this.resizePositions.movementY;
+
+      const { dir } = this.resizePositions;
+      // If the width/height isn't being changed, don't update it
+      const heightChange = dir.includes('t') || dir.includes('b');
+      const widthChange = dir.includes('r') || dir.includes('l');
+
+      if (!heightChange) heightValue = this.container.offsetHeight;
+      if (!widthChange) widthValue = this.container.offsetWidth;
+
+      if (dir.includes('l')) {
+        // Moves the chat left and keeps the right edge constant
+        widthValue = this.container.offsetWidth + this.resizePositions.movementX;
+        const { minWidth } = this.container.style;
+        const minWidthNum = parseFloat(minWidth.replace('px', '')) || 350;
+        // Only move the chat left if the width can be changed
+        if (widthValue > minWidthNum) this.container.style.left = `${this.container.offsetLeft - this.resizePositions.movementX}px`;
+      }
+      if (dir.includes('t')) {
+        heightValue = this.container.offsetHeight + this.resizePositions.movementY;
+        const { minHeight } = this.container.style;
+        const minHeightNum = parseFloat(minHeight.replace('px', '')) || 400;
+        if (heightValue > minHeightNum) {
+          this.container.style.top = `${this.container.offsetTop - this.resizePositions.movementY}px`;
+        }
+      }
+      this.container.style.width = `${widthValue}px`;
+      this.container.style.height = `${heightValue}px`;
+      this.throttleScrollDown();
+    }
+
+    closeResizeElement() {
+      document.onmousemove = null;
+      document.onmouseup = null;
+      // Makes sure CSS recognizes the changes and then restores transitions
+      this.container.offsetHeight;
+      this.container.style.transition = '';
+    }
   }
 </script>
 
@@ -204,4 +299,60 @@
 #draggable-header {
   z-index: 10;
 }
+
+.clicked-inside > .handle {
+  background-color: lightgray;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  display: block;
+}
+
+.handle {
+  display: none;
+}
+.handle-l, .handle-tl, .handle-bl {
+  left: -5px;
+}
+.handle-r, .handle-tr, .handle-br {
+  right: -5px;
+}
+.handle-t, .handle-tl, .handle-tr {
+  top: -5px;
+}
+.handle-b, .handle-bl, .handle-br {
+  bottom: -5px;
+}
+.handle-l, .handle-r {
+  top: 50%;
+  margin-top: -5px;
+}
+.handle-t, .handle-b {
+  left: 50%;
+  margin-left: -5px;
+}
+.handle-l {
+  cursor: w-resize
+}
+.handle-tl {
+  cursor: nw-resize;
+}
+.handle-t {
+  cursor: n-resize;
+}
+.handle-tr {
+  cursor: ne-resize;
+}
+.handle-r {
+  cursor: e-resize;
+}
+.handle-br {
+  cursor: se-resize;
+}
+.handle-b {
+  cursor: s-resize;
+}
+.handle-bl {
+  cursor: sw-resize;
+}
 </style>
diff --git a/src/app/components/Panes/Pane.vue b/src/app/components/Panes/Pane.vue
index 4cf36864..90bf9626 100644
--- a/src/app/components/Panes/Pane.vue
+++ b/src/app/components/Panes/Pane.vue
@@ -64,17 +64,22 @@
         this.$forceUpdate();
         if (container.scrollTop > actualScrollHeight - 50) {
           this.autoScroll = true;
-          this.$emit('autoscroll', true);
         } else {
           this.autoScroll = false;
-          this.$emit('autoscroll', false);
         }
       }
     }
 
+    @Watch('autoScroll')
+    autoScrollChanged() {
+      this.$emit('autoscroll', this.autoScroll);
+    }
+
     scrollDown() {
-      this.$nextTick(() => { this.container.scrollTop = this.container.scrollHeight; });
-      this.$nextTick(this.updateFooterHeight);
+      this.$nextTick(() => {
+        this.container.scrollTop = this.container.scrollHeight;
+        this.updateFooterHeight();
+      });
     }
 
     onContentChanged() {

From 3ac31d939606bf45f6d32a07ed5694282b6591c9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 24 Jul 2020 21:38:19 -0500
Subject: [PATCH 214/223] Small improvements to minimization

---
 src/app/App.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index f0c9bab8..b20d2524 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -21,7 +21,7 @@
         ref="slideout"
         @auth="showAuth = true" />
       <transition name="fade">
-        <div class="chat-content" v-if="!minimized">
+        <div class="chat-content" v-show="!minimized">
           <MessagePane
             v-for="(channel, index) in messageTabs"
             :key="channel.name"
@@ -53,6 +53,7 @@
   import resize from 'vue-resize-directive';
   import BootstrapVue from 'bootstrap-vue';
   import sjcl from 'sjcl';
+  import gsap from 'gsap';
   import Slideout from './components/Slideout/Slideout.vue';
   import ConnectingPopup from '@/components/Connection/ConnectingPopup.vue';
   import ReportDialog from '@/components/ReportDialog.vue';
@@ -104,12 +105,6 @@
     return this.minimization;
   }
 
-  get minimizedStyle() {
-    return {
-      'min-height': this.minimized ? '40px' : '400px',
-    };
-  }
-
   // Private messages
 
   get showPrivMsgModal() {
@@ -408,7 +403,7 @@
   }
 
   get chatStyle() {
-    return Object.assign(Object.assign(this.positionStyle, this.sizeStyle), this.minimizedStyle);
+    return Object.assign(this.positionStyle, this.sizeStyle);
   }
 
   // Inactivity timer
@@ -467,6 +462,7 @@
   position: fixed; /* Makes sure everything is placed with respect to it, not to its parent */
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 350px; /* Bounds on chat resizing */
+  min-height: 400px;
 }
 #eterna-chat.clicked-inside {
   outline: gray dashed 1px;
@@ -489,8 +485,10 @@
   left:0px !important; /* Overrides dragging styles so full size chat isn't cut off */
   top:0px !important;
 }
-.minimizedChat { /* Removes light blue background when chat is minimzed and only shows top bar */
+#eterna-chat.minimizedChat {
+  /* Removes light blue background when chat is minimzed and only shows top bar */
   height:40px !important;
+  min-height: 40px;
 }
 .fade-enter-active,
 .fade-leave-active {

From 91641cabc5b387854c6ff88dae555475fd866a14 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 24 Jul 2020 22:44:51 -0500
Subject: [PATCH 215/223] General bug fixes; private messages; user tooltips

---
 src/app/App.vue                               | 25 +++---
 src/app/components/Messages/ActionMenu.vue    |  1 -
 src/app/components/Messages/MessageGroup.vue  |  7 +-
 .../Messages/PrivateMessageModal.vue          | 81 -------------------
 src/app/components/Messages/UserTooltip.vue   | 37 ++++++++-
 src/app/components/Messages/Username.vue      |  2 +-
 src/app/store/chat.vuex.ts                    | 35 +++++++-
 7 files changed, 88 insertions(+), 100 deletions(-)
 delete mode 100644 src/app/components/Messages/PrivateMessageModal.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index b20d2524..40a625a5 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -33,7 +33,6 @@
           />
           <ConnectingPopup />
           <ReportDialog ref="reportDialog" />
-          <PrivateMessageModal ref="privmsgmodal" v-show="showPrivMsgModal"/>
         </div>
       </transition>
       <OperLogin @login="operAuthenticate" v-if="showAuth" @cancel="showAuth=false" ref="login" />
@@ -62,7 +61,6 @@
   import OpenWindowButton from '@/components/Header/OpenWindowButton.vue';
   import DraggableDiv from '@/components/DraggableDiv.vue';
   import OperLogin from '@/components/OperLogin.vue';
-  import PrivateMessageModal from '@/components/Messages/PrivateMessageModal.vue';
   import StarButton from '@/components/Header/StarButton.vue';
 
   Vue.use(BootstrapVue);
@@ -83,7 +81,6 @@
     MinimizationTriangle,
     OpenWindowButton,
     OperLogin,
-    PrivateMessageModal,
     StarButton,
   },
   directives: {
@@ -107,16 +104,22 @@
 
   // Private messages
 
-  get showPrivMsgModal() {
-    return this.$vxm.chat.privMsgModal;
+  get privateMessageUser() {
+    return this.$vxm.chat.userToPrivMsg;
   }
 
-
-  @Watch('showPrivMsgModal') // Shows modal
-  triggerStart() {
-    if (this.showPrivMsgModal) {
-      this.$refs.privmsgmodal.onStart();
+  @Watch('privateMessageUser')
+  openChannel() {
+    if (this.privateMessageUser !== '') { // If the user is '', don't trigger
+      // If private message channel with user nonexistent, make one
+      if (!this.messageTabs.some(e => e.name === this.privateMessageUser)) {
+        this.$vxm.chat.joinChannel(this.privateMessageUser);
+      }
+      this.$vxm.chat.tab = this.messageTabs.findIndex(e => e.name === this.privateMessageUser);
+      this.$vxm.chat.chatChannel = this.privateMessageUser;
+      this.$vxm.chat.slideoutOpen = false; // Open the chat channel and close slideout
     }
+    this.$vxm.chat.userToPrivMsg = ''; // Reset
   }
 
   // Full size
@@ -326,7 +329,6 @@
   $refs!: {
     reportDialog: ReportDialog;
     login: OperLogin,
-    privmsgmodal: PrivateMessageModal,
     messagepanes: MessagePane[],
     slideout: Slideout,
     draggable: DraggableDiv,
@@ -463,6 +465,7 @@
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 350px; /* Bounds on chat resizing */
   min-height: 400px;
+  overflow-x: hidden;
 }
 #eterna-chat.clicked-inside {
   outline: gray dashed 1px;
diff --git a/src/app/components/Messages/ActionMenu.vue b/src/app/components/Messages/ActionMenu.vue
index bc3c2fd8..ed7f7e93 100644
--- a/src/app/components/Messages/ActionMenu.vue
+++ b/src/app/components/Messages/ActionMenu.vue
@@ -120,7 +120,6 @@
     privmsg() { // Opens up the private message modal
       if (!this.user || !this.user.username) return;
       this.$vxm.chat.userToPrivMsg = this.user.username;
-      this.$vxm.chat.privMsgModal = true;
     }
 
     star() {
diff --git a/src/app/components/Messages/MessageGroup.vue b/src/app/components/Messages/MessageGroup.vue
index 859d65eb..c8af7a61 100644
--- a/src/app/components/Messages/MessageGroup.vue
+++ b/src/app/components/Messages/MessageGroup.vue
@@ -3,7 +3,7 @@
     <UserMessage
       v-for="(message, index) in messages"
       :message="message"
-      :key="message.message"
+      :key="`${message.message || random()}_${index}`"
       :first="index === 0"
       display="true"
       grouped=true
@@ -23,6 +23,11 @@
   export default class MessageGroup extends Vue {
     @Prop({ required: true })
     messages !: Message[];
+
+    // This avoids duplicate keys
+    random() {
+      return Math.round((Math.random() * 1000 * Math.random()));
+    }
   }
 </script>
 <style lang="scss">
diff --git a/src/app/components/Messages/PrivateMessageModal.vue b/src/app/components/Messages/PrivateMessageModal.vue
deleted file mode 100644
index e54b90f4..00000000
--- a/src/app/components/Messages/PrivateMessageModal.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <div class="message panel rounded p-2" tabindex="0">
-    <span id="user" class="mb-2">To: {{username}}</span>
-    <textarea
-      type="text"
-      id="msg"
-      name="msg"
-      class="form-control form-control-sm m-0 mw-100 mt-1 mb-1"
-      ref="textArea"
-      v-model="msg"
-    />
-    <button
-      class="btn btn-primary w-100 mt-1"
-      style="left: 50%"
-      @click="send"
-    >
-      Continue
-    </button>
-    <button
-      class="btn btn-primary w-100 mt-2"
-      style="left: 50%"
-      @click="cancel"
-    >
-      Cancel
-    </button>
-  </div>
-</template>
-
-<script lang="ts">
-  /* Taken from OperLogin and modified */
-  import { Component, Vue, Ref } from 'vue-property-decorator';
-  import Message from '@/types/message';
-
-
-  @Component({
-    components: {},
-  })
-  export default class PrivateMessageModal extends Vue {
-    msg = 'Message';
-
-    get username() {
-      return this.$vxm.chat.userToPrivMsg;
-    }
-
-    onStart() {
-      this.$nextTick(() => this.textArea.focus());
-      this.textArea.setSelectionRange(0, this.textArea.value.length);
-    }
-
-    @Ref() readonly textArea!: HTMLTextAreaElement;
-
-    send() {
-      this.$vxm.chat.postToQuery({ message: this.msg, channel: this.username });
-      this.$vxm.chat.privMsgModal = false;
-    }
-
-    cancel() {
-      this.$vxm.chat.privMsgModal = false;
-    }
-  }
-</script>
-
-<style lang="scss">
-  @import "@/assets/_custom.scss";
-  .message {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    background-color:#043468;
-    z-index:3;
-  }
-
-  #msg {
-    min-height:24px;
-  }
-
-  button:focus {
-    border: 2px solid white;
-  }
-</style>
diff --git a/src/app/components/Messages/UserTooltip.vue b/src/app/components/Messages/UserTooltip.vue
index 30c2dbd1..316dfa5e 100644
--- a/src/app/components/Messages/UserTooltip.vue
+++ b/src/app/components/Messages/UserTooltip.vue
@@ -29,12 +29,32 @@
           <span class="user-status float-right">{{status}}</span>
         </li>
       </div>
-      <div class="user-tooltip-desc-container pr-2 pl-2 pb-2">
+      <div class="user-tooltip-desc-container pr-2 pl-2">
         <span class="user-description w-100 d-inline-block">
           <span v-if="desc" v-html="desc" />
           <InlineLoadingSpinner v-else />
         </span>
       </div>
+      <div class="user-tooltip-actions-container pr-2 pl-2 pb-2">
+        <button
+          class="btn btn-primary w-100 mt-1"
+          @click="openReportModal({ ignore: false, report: true })"
+        >
+          Report
+        </button>
+        <button
+          class="btn btn-primary w-100 mt-1"
+          @click="openReportModal({ ignore: true, report: false })"
+        >
+          Ignore
+        </button>
+        <button
+          class="btn btn-primary w-100 mt-1"
+          @click="privateMessage"
+        >
+          Private Message
+        </button>
+      </div>
   </div>
 </template>
 <script lang="ts">
@@ -43,6 +63,7 @@
   } from 'vue-property-decorator';
   import User from '@/types/user';
   import InlineLoadingSpinner from './InlineLoadingSpinner.vue';
+  import Message from '../../types/message';
   @Component({
     components: {
       InlineLoadingSpinner,
@@ -104,7 +125,7 @@
       Eventually, this will be replaced with an API call
       */
       const statusUsernames: {[key:string]:string[]} = {
-        developer: ['LFP6', 'Ahalb', 'ElNando888', 'jnicol', 'MasterStormer', ''],
+        developer: ['LFP6', 'Ahalb', 'ElNando888', 'jnicol', 'MasterStormer'],
         scientist: ['rhiju', 'dosoonkim'],
         staff: ['LFP6', 'Omei', 'rhiju'],
         moderator: ['Hoglahoo', 'LFP6', 'Omei'],
@@ -130,11 +151,21 @@
          }
       });
     }
+
+    openReportModal(defaults: { report: boolean; ignore: boolean }) {
+      const message = new Message('Reporting user', '*', this.user);
+      this.$vxm.chat.openReportModal({ message, defaults });
+    }
+
+    privateMessage() {
+      if (!this.user || !this.user.username) return;
+      this.$vxm.chat.userToPrivMsg = this.user.username;
+    }
   }
 </script>
 <style scoped lang="scss">
-  @import '~vue-context/src/sass/vue-context';
   @import "~@/assets/_custom.scss";
+  @import '~vue-context/src/sass/vue-context';
   .user-tooltip-container {
     position: fixed;
     background-color:$med-dark-blue;
diff --git a/src/app/components/Messages/Username.vue b/src/app/components/Messages/Username.vue
index fbd13df2..1c315b21 100644
--- a/src/app/components/Messages/Username.vue
+++ b/src/app/components/Messages/Username.vue
@@ -5,7 +5,7 @@
       target="_blank"
       class="username text-decoration-none font-weight-bold"
       @focus="$emit('focus')"
-      @blur="$emit('blur')"
+      @blur="$emit('blur'); hide()"
       :style="{ color: displayedColor }"
       @click="showTooltip"
       tabindex="0"
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index fcfc032e..c43f692e 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -120,8 +120,6 @@ export default class ChatModule extends VuexModule {
 
   userToPrivMsg = ''; // User being private messaged
 
-  privMsgModal = false; // Whether to show the private message modal
-
   updateMessage = ''; // The updated message to be put in the input when the user has pressed the up arrow
 
   inputUpdate = false; // Whether the user has pressed the up arrow and the input should be updated
@@ -590,6 +588,8 @@ export default class ChatModule extends VuexModule {
   async type(channel: string) {
     // Safeguard to make sure this doesn't go in a channel with others while I test
     if (channel === '#general' || channel === '#help' || channel === '#labs') return;
+    if (!this.channels[channel]) return;
+    if (!this.channels[channel]?.typing) this.channels[channel]!.typing = [];
     if (this.channels[channel]?.typing.includes(this.username)) return;
     this.channels[channel]?.typing.push(this.username);
   }
@@ -599,6 +599,8 @@ export default class ChatModule extends VuexModule {
   async stopTyping(channel: string) {
     // Safeguard to make sure this doesn't go in a channel with others while I test
     if (channel === '#general' || channel === '#help' || channel === '#labs') return;
+    if (!this.channels[channel]) return;
+    if (!this.channels[channel]?.typing) this.channels[channel]!.typing = [];
     this.channels[channel]!.typing = this.channels[channel]!.typing
       .filter(e => e !== this.username);
   }
@@ -638,6 +640,7 @@ export default class ChatModule extends VuexModule {
     message = `${message} [${this.usernameColor}]`; // Message with tags added on
     let isAction = false;
     // No posting as annon or if nothing has been actually posted
+    console.log(6, message.replace(/ \[#.*\]\r?$/, '').trim());
     if (this.currentUser.username && message.replace(/ \[#.*\]\r?$/, '').trim() !== '') {
       let post = true;
       let banned = false;
@@ -1356,7 +1359,22 @@ export default class ChatModule extends VuexModule {
         }
       }
 
+      if (!channel.startsWith('#')) {
+        if (post) {
+          if (isAction) {
+            this.client!.action(channel, `${message.replace(/ \[#.+\]$/, '')}`);
+          } else {
+            this.client!.say(channel, message);
+          }
+          this.postMessage(
+            new Message(message, User.parseUsername(channel), this.currentUser, isAction),
+          );
+        }
+        return;
+      }
+
       this.client?.banlist(channel, (e) => { // Check if user is banned before sending message
+        console.log(7);
         const bans = e.bans.map(i => new Ban(i.banned, i.channel)); // Make an array of Ban objects
         // If the user is banned
         if (bans.some(b => b.username.includes(this.currentUser.username))) {
@@ -1372,23 +1390,29 @@ export default class ChatModule extends VuexModule {
         } // If they aren't banned, continue and send the message
         if (post) {
           if (!this.channels[channel]?.banned && !banned && !quieted) {
+            console.log(8);
             if (isAction) {
                 this.client!.action(channel, `${message.replace(/ \[#.+\]$/, '')}`);
             } else {
                 this.client!.say(channel, message);
             }
+            console.log(9);
             const name = User.parseUsername(channel);
             // If it's a private message, send to the username, not the nick
             if (this.connectedUsers[User.parseUsername(channel)]?.nicks.includes(channel)) {
+              console.log(10);
               this.postMessage(new Message(message, name, this.currentUser, isAction));
             } else {
+              console.log(11);
               this.postMessage(new Message(message, channel, this.currentUser, isAction));
             }
+            console.log(12);
           } else if (quieted) {
             this.postMessage(new Message("Can't send messages because you are quieted"));
           } else {
             this.postMessage(new Message("Can't send messages because you are banned"));
           } // TODO
+          console.log(13);
         }
       });
     }
@@ -1490,6 +1514,7 @@ export default class ChatModule extends VuexModule {
     Will only cause issues if people are putting | in their nick */
     const post = true;
     if (this.channels[User.parseUsername(channel)] === undefined) {
+      console.log(0);
       // If the channel doesn't exist, make a new one
       Vue.set(this.channels, User.parseUsername(channel), {
         name: User.parseUsername(channel),
@@ -1501,14 +1526,19 @@ export default class ChatModule extends VuexModule {
         mentioned: false,
         typing: [],
       });
+      console.log(1);
     }
+    console.log(3);
     if (post) {
+      console.log(4);
       // Converting from array to set to array removes duplicates
       Array.from(new Set(this.connectedUsers[User.parseUsername(channel)]?.nicks)).forEach(e => {
       // Sends message to all nicks so each tab receives the message
+        console.log(5);
         this.sendMessage({ rawMessage: message, channel: e });
       });
     }
+    console.log(2);
   }
 
   @action()
@@ -1930,6 +1960,7 @@ export default class ChatModule extends VuexModule {
       maxHistoryMessages: 50,
       mentioned: false,
       banned: BanStatus.BAN_STATUS_NORMAL,
+      typing: false,
     });
     this.client?.join(name);
     let joinedChannels = [];

From 3a17ab69f6fc494eb50cc8cd1a0035fde3c3bb57 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 24 Jul 2020 23:15:47 -0500
Subject: [PATCH 216/223] Fix to overflow bugs

---
 src/app/App.vue                     | 2 +-
 src/app/components/DraggableDiv.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 40a625a5..c4920d21 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -465,7 +465,7 @@
   transition: width 200ms, height 200ms, margin 1s, position 1s;
   min-width: 350px; /* Bounds on chat resizing */
   min-height: 400px;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 #eterna-chat.clicked-inside {
   outline: gray dashed 1px;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 8ce78162..35d48b4f 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -312,16 +312,16 @@
   display: none;
 }
 .handle-l, .handle-tl, .handle-bl {
-  left: -5px;
+  left: 0px;
 }
 .handle-r, .handle-tr, .handle-br {
-  right: -5px;
+  right: 0px;
 }
 .handle-t, .handle-tl, .handle-tr {
-  top: -5px;
+  top: 0px;
 }
 .handle-b, .handle-bl, .handle-br {
-  bottom: -5px;
+  bottom: 0px;
 }
 .handle-l, .handle-r {
   top: 50%;

From 342612202a33154e8bb10d2bb5a5b57710bfc88e Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 24 Jul 2020 23:39:11 -0500
Subject: [PATCH 217/223] Standalone page login properly handles anonymous

---
 src/standalone/components/Login.vue | 74 +++++++++++++++++++++--------
 1 file changed, 55 insertions(+), 19 deletions(-)

diff --git a/src/standalone/components/Login.vue b/src/standalone/components/Login.vue
index 5589e4a9..9c7d63ac 100644
--- a/src/standalone/components/Login.vue
+++ b/src/standalone/components/Login.vue
@@ -1,29 +1,50 @@
 <template>
   <div class="login">
-    <div class="trans-panel-bg  rounded-10"></div>
+    <div class="trans-panel-bg rounded-10"></div>
     <div class="trans-panel rounded-10">
       <form>
-        <table>
-          <tr>
-            <td><span for="username">username:</span></td>
-            <td><input type="text" id="username" v-model="username"/></td>
-          </tr>
-          <tr>
-            <td><span for="uid">uid:</span></td>
-            <td><input type="text" id="uid" v-model="uid"/></td>
-          </tr>
-          <tr>
-            <td><label for="remember-me">Remember Me:</label></td>
-            <td><input id="remember-me" type="checkbox" v-model="remember" style="width: auto"></td>
-          </tr>
-        </table>
-        <div
-          class="green-button"
-          style="width: 40%; left: 50%; transform: translateX(-50%);"
+        <div class="form-group">
+          <label class="forn-control-label" for="username">Username</label>
+          <input
+            type="text"
+            id="username"
+            v-model="username"
+            class="form-control"
+          />
+          <div class="invalid-feedback d-block" v-if="nameError !== ''">{{ nameError }}</div>
+        </div>
+        <div class="form-group">
+          <label class="form-control-label" for="uid">UID</label>
+          <input
+            type="text"
+            id="uid"
+            v-model="uid"
+            class="form-control"
+          />
+          <div class="invalid-feedback d-block" v-if="idError !== ''">{{ idError }}</div>
+        </div>
+        <div class="form-group">
+          <label class="form-control-label" for="remember-me">Remember Me</label>
+          <input
+            id="remember-me"
+            type="checkbox"
+            class="ml-2 align-text-bottom pb-1"
+            v-model="remember">
+        </div>
+        <button
+          class="btn btn-primary w-100"
+          type="submit"
           @click="$emit('login', { uid, username, remember })"
         >
           Continue
-        </div>
+        </button>
+        <button
+          class="btn btn-primary w-100 mt-2"
+          type="submit"
+          @click="anonLogin"
+        >
+          Continue as anonymous
+        </button>
       </form>
     </div>
   </div>
@@ -42,6 +63,21 @@
     username: string = '';
 
     remember: boolean = false;
+
+    get idError() {
+      if (!parseInt(this.uid, 10)) return 'Must be a number';
+      if (this.uid.trim() === '') return 'Must provide a user id';
+      return '';
+    }
+
+    get nameError() {
+      if (this.uid.trim() === '') return 'Must provide a username';
+      return '';
+    }
+
+    anonLogin() {
+      this.$emit('login', { uid: '0', username: 'Anonymous', remember: this.remember });
+    }
   }
 </script>
 

From 3bab6a0abc797e518d4c8859813fa466ea7cd5b3 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Fri, 24 Jul 2020 23:55:40 -0500
Subject: [PATCH 218/223] Remove console.log, display message group properly

---
 src/app/components/Messages/MessageGroup.vue | 52 +++++++++++++++++++-
 src/app/components/Messages/UserMessage.vue  |  7 +--
 src/app/store/chat.vuex.ts                   | 14 ------
 3 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/app/components/Messages/MessageGroup.vue b/src/app/components/Messages/MessageGroup.vue
index c8af7a61..22bb883c 100644
--- a/src/app/components/Messages/MessageGroup.vue
+++ b/src/app/components/Messages/MessageGroup.vue
@@ -1,10 +1,20 @@
 <template>
   <div>
+    <Username
+      :user="messages[0].user"
+      v-if="messages && messages[0] && messages[0].user"
+      :color="finalColor"
+    />
+    <span
+      v-if="messages && messages[0] && messages[0].time"
+      class="message-time ml-2"
+    >
+      [{{formattedTime}}]
+    </span>
     <UserMessage
       v-for="(message, index) in messages"
       :message="message"
       :key="`${message.message || random()}_${index}`"
-      :first="index === 0"
       display="true"
       grouped=true
     />
@@ -14,10 +24,12 @@
   import { Component, Prop, Vue } from 'vue-property-decorator';
   import UserMessage from './UserMessage.vue';
   import Message from '@/types/message';
+  import Username from './Username.vue';
 
   @Component({
     components: {
       UserMessage,
+      Username,
     },
   })
   export default class MessageGroup extends Vue {
@@ -28,7 +40,43 @@
     random() {
       return Math.round((Math.random() * 1000 * Math.random()));
     }
+
+    get formattedTime() {
+      return new Date(this.messages[0].time).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
+    }
+
+    get finalColor() {
+      // Makes sure the color of the username is the color of the last message sent in the group
+      if (!this.messages) return '';
+      const len = this.messages.length - 1;
+      const msg = this.messages[len];
+      if (!msg) return '';
+      if (!this.messageHasTags(msg.message)) return '';
+      return this.parseMessageTags(msg.message)[0];
+    }
+
+    parseMessageTags(message:string) { // Gets tags as array from message
+      if (!message) return [];
+      const tagsStringPosition = message.search(/\[#(.+,)*.+\]\r?$/); // Searches for [...,...] at end of message
+      let tagsString = message.substring(tagsStringPosition); // Gets tags as a string
+      if (tagsString.includes('\r')) { // In history messages, message ends with \r
+        tagsString = tagsString.substring(1, tagsString.length - 2); // Removes bracket
+      } else {
+        tagsString = tagsString.substring(1, tagsString.length - 1); // Removes bracket
+      }
+      return tagsString.split(','); // Returns array split by commas
+    }
+
+    messageHasTags(message:string) { // If a message has any tags
+      if (!message) return false;
+      return message.match(/\[#(.+,)*.+\]\r?$/);
+    }
   }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
+.message-time {
+  color: #627587;
+  white-space: nowrap;
+  font-size: 0.8em;
+}
 </style>
diff --git a/src/app/components/Messages/UserMessage.vue b/src/app/components/Messages/UserMessage.vue
index 1f656e87..aec0d162 100644
--- a/src/app/components/Messages/UserMessage.vue
+++ b/src/app/components/Messages/UserMessage.vue
@@ -12,7 +12,7 @@
           :color="usernameColor"
           :is-action="isAction"
           @focus="hover = true"
-          v-if="!isNotice && (!grouped || first)"
+          v-if="!isNotice && !grouped"
         >{{ isAction || !message.user || !message.user.username ? '': ':' }}
         </Username>
         &nbsp;
@@ -39,7 +39,7 @@
       />
       &lrm;
       <span
-        v-if="!isNotice && formattedTime !== 'Invalid Date'"
+        v-if="!isNotice && formattedTime !== 'Invalid Date' && !grouped"
         class="message-time"
       >
         [{{formattedTime}}]
@@ -87,9 +87,6 @@
     @Prop({ default: false })
     grouped !: boolean;
 
-    @Prop({ default: false })
-    first !: boolean;
-
     get isNotice() {
       return this.message.isNotice;
     }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index c43f692e..46f11205 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -640,7 +640,6 @@ export default class ChatModule extends VuexModule {
     message = `${message} [${this.usernameColor}]`; // Message with tags added on
     let isAction = false;
     // No posting as annon or if nothing has been actually posted
-    console.log(6, message.replace(/ \[#.*\]\r?$/, '').trim());
     if (this.currentUser.username && message.replace(/ \[#.*\]\r?$/, '').trim() !== '') {
       let post = true;
       let banned = false;
@@ -1374,7 +1373,6 @@ export default class ChatModule extends VuexModule {
       }
 
       this.client?.banlist(channel, (e) => { // Check if user is banned before sending message
-        console.log(7);
         const bans = e.bans.map(i => new Ban(i.banned, i.channel)); // Make an array of Ban objects
         // If the user is banned
         if (bans.some(b => b.username.includes(this.currentUser.username))) {
@@ -1390,29 +1388,23 @@ export default class ChatModule extends VuexModule {
         } // If they aren't banned, continue and send the message
         if (post) {
           if (!this.channels[channel]?.banned && !banned && !quieted) {
-            console.log(8);
             if (isAction) {
                 this.client!.action(channel, `${message.replace(/ \[#.+\]$/, '')}`);
             } else {
                 this.client!.say(channel, message);
             }
-            console.log(9);
             const name = User.parseUsername(channel);
             // If it's a private message, send to the username, not the nick
             if (this.connectedUsers[User.parseUsername(channel)]?.nicks.includes(channel)) {
-              console.log(10);
               this.postMessage(new Message(message, name, this.currentUser, isAction));
             } else {
-              console.log(11);
               this.postMessage(new Message(message, channel, this.currentUser, isAction));
             }
-            console.log(12);
           } else if (quieted) {
             this.postMessage(new Message("Can't send messages because you are quieted"));
           } else {
             this.postMessage(new Message("Can't send messages because you are banned"));
           } // TODO
-          console.log(13);
         }
       });
     }
@@ -1514,7 +1506,6 @@ export default class ChatModule extends VuexModule {
     Will only cause issues if people are putting | in their nick */
     const post = true;
     if (this.channels[User.parseUsername(channel)] === undefined) {
-      console.log(0);
       // If the channel doesn't exist, make a new one
       Vue.set(this.channels, User.parseUsername(channel), {
         name: User.parseUsername(channel),
@@ -1526,19 +1517,14 @@ export default class ChatModule extends VuexModule {
         mentioned: false,
         typing: [],
       });
-      console.log(1);
     }
-    console.log(3);
     if (post) {
-      console.log(4);
       // Converting from array to set to array removes duplicates
       Array.from(new Set(this.connectedUsers[User.parseUsername(channel)]?.nicks)).forEach(e => {
       // Sends message to all nicks so each tab receives the message
-        console.log(5);
         this.sendMessage({ rawMessage: message, channel: e });
       });
     }
-    console.log(2);
   }
 
   @action()

From 2e0b474ff1c9e4458b4f930683234adf3f525ba9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 25 Jul 2020 00:34:23 -0500
Subject: [PATCH 219/223] Reduce minimum width to 300; current chat is 272

---
 src/app/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index c4920d21..c78f8909 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -463,7 +463,7 @@
   background-color: $med-dark-blue;
   position: fixed; /* Makes sure everything is placed with respect to it, not to its parent */
   transition: width 200ms, height 200ms, margin 1s, position 1s;
-  min-width: 350px; /* Bounds on chat resizing */
+  min-width: 300px; /* Bounds on chat resizing */
   min-height: 400px;
   overflow: hidden;
 }

From 77963e2a38c18560896e89ec94cbaaa86dd925d8 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 25 Jul 2020 21:56:58 -0500
Subject: [PATCH 220/223] Correct use of aria-label

---
 src/app/App.vue                                      |  1 +
 src/app/components/DraggableDiv.vue                  | 12 +++++++-----
 src/app/components/Header/MinimizationTriangle.vue   |  2 +-
 src/app/components/Header/OpenWindowButton.vue       |  2 +-
 src/app/components/Header/StarButton.vue             |  2 +-
 src/app/components/Input/EmoticonBar.vue             |  9 ++++-----
 src/app/components/Input/ScalableInput.vue           |  3 +--
 src/app/components/Input/SendButton.vue              |  1 +
 src/app/components/Slideout/Chat/AddChatButton.vue   |  2 +-
 .../components/Slideout/Chat/ChatSelectButton.vue    |  2 +-
 src/app/components/Slideout/HamburgerMenuButton.vue  |  2 +-
 .../Slideout/Settings/ColorPicker/ColorPicker.vue    |  6 +++---
 .../Slideout/Settings/ColorPicker/ColorSlider.vue    |  2 +-
 .../Slideout/Settings/Sections/IgnoredSection.vue    |  4 +---
 .../Settings/Sections/NotificationsSection.vue       |  7 ++-----
 .../Slideout/Settings/Sections/OperSection.vue       |  4 ++--
 .../Slideout/Settings/Sections/StatusSection.vue     |  7 ++-----
 .../Slideout/Settings/Sections/TextSizeSection.vue   |  2 +-
 .../Slideout/Settings/Sections/ToolbarSection.vue    | 11 +++++------
 .../Slideout/Settings/SettingsEnableDisable.vue      |  8 ++++++--
 20 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index c78f8909..8080939a 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -448,6 +448,7 @@
 @import '~bootstrap-vue/src/index.scss';
 @import '~bootstrap/scss/bootstrap.scss';
 @import "@/assets/_custom.scss";
+/* Removes focus ring for non-tabbing users on all buttons */
 #eterna-chat:not(.tabbing) button:focus {
   outline: none;
   border: none;
diff --git a/src/app/components/DraggableDiv.vue b/src/app/components/DraggableDiv.vue
index 35d48b4f..d86ce6ef 100644
--- a/src/app/components/DraggableDiv.vue
+++ b/src/app/components/DraggableDiv.vue
@@ -196,13 +196,15 @@
       const chat = this.$refs.draggableContainer;
 
       if (!minimized) {
-        if (chatTop >= windowHeight - chatHeight) {
+        // If the chat is docked to the bottom, the minimization needs to move the top bar down
+        if (chatTop >= windowHeight - chatHeight - breakpoint) {
           gsap.to(chat, {
             duration: 0.2,
             top: windowHeight - chatHeight,
           });
         }
-      } else if (chatTop + chatHeight >= windowHeight) {
+        // If the chat is minimized and docked, the top should move up
+      } else if (chatTop + chatHeight >= windowHeight - breakpoint) {
           gsap.to(chat, {
             duration: 0.2,
             top: windowHeight - 40,
@@ -213,11 +215,11 @@
     }
 
     internalClick(event: MouseEvent) {
-      event.stopPropagation();
+      event.stopPropagation(); // Stops event propogation before it reaches document
       this.container.classList.add('clicked-inside');
     }
 
-    externalClick(event: MouseEvent) {
+    externalClick(event: MouseEvent) { // Only receives clicks outside container
       this.container.classList.remove('clicked-inside');
     }
 
@@ -225,7 +227,7 @@
       document.onclick = this.externalClick;
     }
 
-    emitScrolDown() {
+    emitScrolDown() { // Scrolls down chat on resize
       this.$emit('scrollDown');
     }
 
diff --git a/src/app/components/Header/MinimizationTriangle.vue b/src/app/components/Header/MinimizationTriangle.vue
index 057ca8d2..82dcde5b 100644
--- a/src/app/components/Header/MinimizationTriangle.vue
+++ b/src/app/components/Header/MinimizationTriangle.vue
@@ -25,7 +25,7 @@
     settings !: boolean;
 
     get label() {
-      return `Click to ${this.value ? 'show' : 'hide'} content${this.settings ? ' in settings' : ''}.`;
+      return `${this.value ? 'Show' : 'Hide'}`;
     }
   }
 </script>
diff --git a/src/app/components/Header/OpenWindowButton.vue b/src/app/components/Header/OpenWindowButton.vue
index 41d96205..10321788 100644
--- a/src/app/components/Header/OpenWindowButton.vue
+++ b/src/app/components/Header/OpenWindowButton.vue
@@ -3,7 +3,7 @@
     class="open-window border-0"
     style="float: right;"
     @click="$emit('input', !value)"
-    :aria-label="`Click to make the chat ${value ? 'fullscreen' : 'normal size'}`"
+    :aria-label="`Make chat ${value ? 'fullscreen' : 'normal size'}`"
    >
   </button>
 </template>
diff --git a/src/app/components/Header/StarButton.vue b/src/app/components/Header/StarButton.vue
index 0d0a213c..e9723484 100644
--- a/src/app/components/Header/StarButton.vue
+++ b/src/app/components/Header/StarButton.vue
@@ -4,7 +4,7 @@
     style="float: right;"
     @click="$emit('input', !value);"
     :class="{ active: value}"
-    aria-label="`Click to display starred messages"
+    aria-label="Show/hide starred messages"
    >
   </button>
 </template>
diff --git a/src/app/components/Input/EmoticonBar.vue b/src/app/components/Input/EmoticonBar.vue
index 03fc69b2..f0dcd1c7 100644
--- a/src/app/components/Input/EmoticonBar.vue
+++ b/src/app/components/Input/EmoticonBar.vue
@@ -10,7 +10,6 @@
           :key="emoticon"
           :emoticon='emoticon'
           class="border-right"
-          :aria-label="`Add a ${emoticon} emoticon to the input text`"
           @emote='add' />
       </div>
       <div
@@ -29,7 +28,7 @@
           @drop.native.prevent
           @dragover.native.prevent
           @dragenter.native.prevent="dragOver($event, index, item)"
-          :aria-label="`Format the input text (${item})`"
+          :aria-label="`Format input (${item})`"
         />
       </div>
       <div id='preview-submenu' v-show="previewSelected && previewChatFeatures">
@@ -51,7 +50,7 @@
       class="text-white border-0 overflow-hidden"
       v-if="anyChatFeatures" >
       <MenuButton
-        aria-label="Open emoticon toolbar"
+        aria-label="emoticon"
         id="emoticonSelect"
         v-if="emoticonChatFeatures"
         name="👍"
@@ -59,7 +58,7 @@
         @button="select('emoticon');"
       />
       <MenuButton
-        aria-label="Open markdown toolbar"
+        aria-label="markdown"
         id="markdownSelect"
         v-if="markdownChatFeatures"
         name="A"
@@ -67,7 +66,7 @@
         @button="select('markdown');"
       />
       <MenuButton
-        aria-label="Open preview toolbar"
+        aria-label="preview"
         id="previewSelect"
         v-if="previewChatFeatures"
         name="P"
diff --git a/src/app/components/Input/ScalableInput.vue b/src/app/components/Input/ScalableInput.vue
index a8739057..397c0708 100644
--- a/src/app/components/Input/ScalableInput.vue
+++ b/src/app/components/Input/ScalableInput.vue
@@ -18,9 +18,8 @@
       @select="updateSelection"
       @click="deselect"
       @keypress="onKeyPress"
-      aria-label="Send message text input"
     />
-    <SendButton @send="send" aria-label="Send" class='float-right'/>
+    <SendButton @send="send" class='float-right'/>
     <div
       ref="hiddenDiv"
       class="scalable-input-hidden invisible border-0"
diff --git a/src/app/components/Input/SendButton.vue b/src/app/components/Input/SendButton.vue
index 9993c157..90a7ede2 100644
--- a/src/app/components/Input/SendButton.vue
+++ b/src/app/components/Input/SendButton.vue
@@ -3,6 +3,7 @@
     class="send-button border-0"
     :class="{animated: animationValue}"
     @click="sendMessage"
+    aria-label="send"
   >
   </button>
 </template>
diff --git a/src/app/components/Slideout/Chat/AddChatButton.vue b/src/app/components/Slideout/Chat/AddChatButton.vue
index 00b77279..1a30c9ab 100644
--- a/src/app/components/Slideout/Chat/AddChatButton.vue
+++ b/src/app/components/Slideout/Chat/AddChatButton.vue
@@ -9,7 +9,7 @@
         @keypress.enter="addChat(); chatName = ''"
         class='h-100 float-right'
         v-model="chatName"
-        aria-label="Add a channel"
+        aria-label="Add channel"
     ></span>
   </div>
 </template>
diff --git a/src/app/components/Slideout/Chat/ChatSelectButton.vue b/src/app/components/Slideout/Chat/ChatSelectButton.vue
index 19f4b9d0..c5ff40a5 100644
--- a/src/app/components/Slideout/Chat/ChatSelectButton.vue
+++ b/src/app/components/Slideout/Chat/ChatSelectButton.vue
@@ -3,7 +3,7 @@
     class="chat-select border-0 font-weight-bold text-white d-block w-100"
     :class="{active: isActive}"
     @click="$emit('input');"
-    :aria-label="`Open the ${name.substring(1)} channel`"
+    :aria-label="`Open ${name.substring(1)}`"
   >
     <p class='channel-name text-justify ml-1 mb-2'>{{ name }}</p>
     <p class='channel-description text-justify ml-1'>{{ description }}</p>
diff --git a/src/app/components/Slideout/HamburgerMenuButton.vue b/src/app/components/Slideout/HamburgerMenuButton.vue
index 6edd2ccd..3eb16a7c 100644
--- a/src/app/components/Slideout/HamburgerMenuButton.vue
+++ b/src/app/components/Slideout/HamburgerMenuButton.vue
@@ -6,7 +6,7 @@
       notified:notification,
       mentioned:mention,
     }"
-    :aria-label="`Click to ${this.value ? 'close' : 'open'} the slideout`"
+    :aria-label="`${this.value ? 'Close' : 'Open'} slideout`"
   >
   </button>
 </template>
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index 1917283d..166acfa8 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div id='picker'>
     <ColorSlider
-      aria-label="Color slider for red"
+      aria-label="red color slider"
       id='red'
       gradientStart="#300"
       gradientEnd="#c00"
@@ -9,7 +9,7 @@
       colorID="red"
       ref="red" />
     <ColorSlider
-      aria-label="Color slider for green"
+      aria-label="green color slider"
       id='green'
       gradientStart='#030'
       gradientEnd='#0c0'
@@ -17,7 +17,7 @@
       colorID="green"
       ref="green" />
     <ColorSlider
-      aria-label="Color slider for blue"
+      aria-label="blue color slider"
       id='blue'
       gradientStart='#003'
       gradientEnd='#00c'
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
index 54e9537e..5aae76d9 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorSlider.vue
@@ -1,7 +1,7 @@
 <template>
   <div class='color-slider-container overflow-hidden ml-0 mt-2 mb-2'>
     <input
-      aria-label="Slider to control a color value"
+      :aria-label="colorId"
       class="slider border-0"
       v-model="sliderValue"
       type=range min=0 max=255
diff --git a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
index 064ecb1d..8adb8886 100644
--- a/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/IgnoredSection.vue
@@ -1,11 +1,10 @@
 <template>
   <SettingsSection title="Ignored" >
-      <ul style="margin-bottom: 0" class="list-group" aria-label="List of ignored users">
+      <ul style="margin-bottom: 0" class="list-group">
         <li v-for="user in ignoredUsers" :key="user">
           <span style="vertical-align: sub">{{user}}</span>
           <button
             class='float-right btn btn-primary btn-sm'
-            :aria-label="`Ignore user ${user}`"
             @click="unignore(user)" >
             Unignore
           </button>
@@ -13,7 +12,6 @@
         <li v-show="!anyIgnoredUsers">No users ignored</li>
         <li v-show="anyIgnoredUsers" class="height-normal">
           <button
-          aria-label="Unignore all users"
           class='btn btn-primary w-100 btn-sm'
           @click="unignore('*')"
           >
diff --git a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
index a02ba9dc..7680d83b 100644
--- a/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/NotificationsSection.vue
@@ -1,6 +1,6 @@
 <template>
   <SettingsSection title="Notifications" >
-    <ul aria-label="Enable or disable notifications for channels" class="list-group">
+    <ul class="list-group">
       <li
         v-for="channel in channels"
         :key="channel.name"
@@ -14,7 +14,7 @@
           />
         </span>
       </li>
-      <li aria-label="Notifications for all channels">
+      <li>
         <span class="align-baseline">All</span>
         <span class="switch">
           <SettingsEnableDisable :value="allEnabled" @input="updateAll" />
@@ -24,7 +24,6 @@
     <li>
       <span
         class="align-baseline d-inline-block"
-        aria-label="Appears in the page title if you have notifications"
       >
         Indicator <SettingsTooltip text="Appears in the page title if you have notifications" />
       </span>
@@ -36,7 +35,6 @@
       <span class="align-baseline d-inline-block">Desktop Notifications</span>
       <span
         class="switch"
-        aria-label="Whether notifications should be sent directly to your computer"
       >
         <SettingsSwitch v-model="desktopNotifications" />
       </span>
@@ -44,7 +42,6 @@
     <li>
       <span
         class="align-baseline d-inline-block;"
-        aria-label="Keywords that trigger notifications."
       >
         Keywords
           <SettingsTooltip text="If you have multiple keywords, separate them with commas.
diff --git a/src/app/components/Slideout/Settings/Sections/OperSection.vue b/src/app/components/Slideout/Settings/Sections/OperSection.vue
index d8215f0a..8b6a1830 100644
--- a/src/app/components/Slideout/Settings/Sections/OperSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/OperSection.vue
@@ -1,10 +1,10 @@
 <template>
   <SettingsSection title="Operator" >
-    <li aria-label="Whether you are a chat moderator/operator">
+    <li>
       <span>You are {{isOper ? '' : 'not'}} an operator</span>
       <span class="float-right w-100">
         <button
-          aria-label="Log in as an operator"
+          aria-label="Log in as operator"
           @click="$emit('auth')"
           class="btn btn-primary btn-sm w-100"
           v-show="!isOper" >
diff --git a/src/app/components/Slideout/Settings/Sections/StatusSection.vue b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
index d3124151..255b4548 100644
--- a/src/app/components/Slideout/Settings/Sections/StatusSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/StatusSection.vue
@@ -2,8 +2,7 @@
   <SettingsSection title="Status" >
     <li>
       <span
-        class="align-middle"
-        aria-label="When others view your username, they will see an indicator if you are away">
+        class="align-middle">
         You are currently {{userStatus ? 'away' : 'online'}}
         <SettingsTooltip
           text="When others view your username, they will see an indicator if you are away"
@@ -11,7 +10,7 @@
       </span>
     </li>
     <li>
-      <span aria-label="Change your status">Set
+      <span aria-label="set status">Set
         <SettingsTooltip
           text="Change your status"
         /></span>
@@ -33,13 +32,11 @@
       <span class="float-right">
         <SettingsSwitch
           v-model="$vxm.chat.autoUpdateStatus"
-          aria-label="Whether your status will update when you leave or come back to the tab"
         />
       </span>
     </li>
     <li>
       <span
-        aria-label="When others see the away indicator, they will see the reason you are away"
       >
         Reason
         <SettingsTooltip
diff --git a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
index 70b34d69..36fb33b8 100644
--- a/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/TextSizeSection.vue
@@ -1,6 +1,6 @@
 <template>
   <SettingsSection title="Text Size" >
-      <input v-model="size" type=number min=10 max=18 aria-label="Change the size of the text">
+      <input v-model="size" type=number min=10 max=18 aria-label="Change text size">
       <p
         id='font-warning'
         v-show="size < 10 || size > 18" >
diff --git a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
index 0076d356..56f6f288 100644
--- a/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
+++ b/src/app/components/Slideout/Settings/Sections/ToolbarSection.vue
@@ -1,21 +1,21 @@
 <template>
   <SettingsSection title="Toolbar Features">
-    <ul aria-label="Which features are enabled in the toolbar" class="list-group">
-      <li aria-label="Whether emoticons are enabled in the toolbar">
+    <ul class="list-group">
+      <li>
         <span class="align-sub">
           Emoticons
           <SettingsTooltip text="Whether the emoticons menu in the toolbar is visible" />
         </span>
         <span class="float-right"><SettingsSwitch v-model="emoticonChatFeatures" /></span>
       </li>
-      <li aria-label="Whether markdown is enabled in the toolbar">
+      <li>
         <span class="align-sub">
           Markdown
           <SettingsTooltip text="Whether the markdown menu in the toolbar is visible" />
         </span>
         <span class="float-right"><SettingsSwitch v-model="markdownChatFeatures" /></span>
       </li>
-      <li aria-label="Whether the preview is enabled in the toolbar">
+      <li>
         <span class="align-sub">
           Preview
           <SettingsTooltip text="Whether the markdown preview menu in the toolbar is visible" />
@@ -29,8 +29,7 @@
         </span>
       </li>
     </ul>
-    <ul class="mt-2 list-group" v-if="$vxm.settings.emoticonChatFeatures"
-      aria-label="Change custom emoticons that appear in the toolbar">
+    <ul class="mt-2 list-group" v-if="$vxm.settings.emoticonChatFeatures">
       <li>
         Custom emoticons
         <SettingsTooltip text="Which emoticons appear in your three custom slots
diff --git a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
index 58d8bf26..f2b2587c 100644
--- a/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
+++ b/src/app/components/Slideout/Settings/SettingsEnableDisable.vue
@@ -1,5 +1,9 @@
 <template>
-  <label class="switch" :style="{ width: `${width}px` }" :aria-label="label">
+  <label
+    class="switch"
+    :style="{ width: `${width}px` }"
+    :aria-label="label"
+    role='three state switch'>
     <button @click="$emit('input', false)" :disabled="value === 2" id="disable">
       {{offText}}
     </button>
@@ -35,7 +39,7 @@
       let stateDescription = 'neither';
       if (this.value === states.all_on) stateDescription = this.onText;
       else if (this.value === states.all_off) stateDescription = this.offText;
-      return `Three state switch in state ${stateDescription}; possible states ${this.onText}, ${this.offText}, and neither`;
+      return `State is ${stateDescription}; possible states ${this.onText}, ${this.offText}, and neither`;
     }
   }
 </script>

From f0550f0b68b7f47aeb80f8e528e63253680151b9 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Sat, 25 Jul 2020 22:07:28 -0500
Subject: [PATCH 221/223] Further accessibility

---
 src/app/components/ItemOptions.vue                       | 1 +
 .../Slideout/Settings/ColorPicker/ColorPicker.vue        | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/components/ItemOptions.vue b/src/app/components/ItemOptions.vue
index a2b952f0..2a5d09fb 100644
--- a/src/app/components/ItemOptions.vue
+++ b/src/app/components/ItemOptions.vue
@@ -3,6 +3,7 @@
       <button
         class="chat-message-options border-0 text-white font-weight-bold"
         ref="chatOptions"
+        aria-label="open message options"
         @click.prevent="openContextMenu"
         v-show="hovered && user.username"
         @blur="hovered = false"
diff --git a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
index 166acfa8..8f7f0c0e 100644
--- a/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
+++ b/src/app/components/Slideout/Settings/ColorPicker/ColorPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div id='picker'>
     <ColorSlider
-      aria-label="red color slider"
+      aria-label="red"
       id='red'
       gradientStart="#300"
       gradientEnd="#c00"
@@ -9,7 +9,7 @@
       colorID="red"
       ref="red" />
     <ColorSlider
-      aria-label="green color slider"
+      aria-label="green"
       id='green'
       gradientStart='#030'
       gradientEnd='#0c0'
@@ -17,7 +17,7 @@
       colorID="green"
       ref="green" />
     <ColorSlider
-      aria-label="blue color slider"
+      aria-label="blue"
       id='blue'
       gradientStart='#003'
       gradientEnd='#00c'
@@ -26,10 +26,11 @@
       ref="blue" />
       <div id='swatch-container'>
         <button
-          v-for="color in defaultColors"
+          v-for="(color, i) in defaultColors"
           :key="color"
           class="swatch border-0 m-1"
           :style="{ backgroundColor:color }"
+          :aria-label="`default color ${i + 1}`"
           @click="setColor(color)" />
       </div>
     <p

From 143ee610f49786d843e2869bb6d7e284a0823a1b Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 27 Jul 2020 11:18:20 -0500
Subject: [PATCH 222/223] Rearrange chat.vuex to group related functions

---
 src/app/App.vue            |    4 +-
 src/app/store/chat.vuex.ts | 1010 ++++++++++++++++++------------------
 2 files changed, 520 insertions(+), 494 deletions(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 8080939a..22d1f5e3 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -335,8 +335,8 @@
   };
 
   postMessage(rawMessage: string, channel: string) {
-    if (!channel.startsWith('#')) { // If it's a PRIVMSG
-      this.$vxm.chat.postToQuery({ message: rawMessage, channel });
+    if (!channel.startsWith('#')) { // If it's a private message (channel not prefixed with #)
+      this.$vxm.chat.privateMessage({ message: rawMessage, channel });
     } else { // Otherwise
       this.$vxm.chat.sendMessage({ rawMessage, channel });
     }
diff --git a/src/app/store/chat.vuex.ts b/src/app/store/chat.vuex.ts
index 46f11205..e2f9ef24 100644
--- a/src/app/store/chat.vuex.ts
+++ b/src/app/store/chat.vuex.ts
@@ -64,8 +64,6 @@ class ConnectionData {
 let channelNames = ['#general', '#off-topic', '#help', '#labs', '#test'];
 
 export default class ChatModule extends VuexModule {
-  toBePosted: Message[] = [];
-
   currentUser!: User;
 
   nick!: string;
@@ -171,125 +169,23 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  /**
-   * Sets a channel as 'read', clearing notifications and syncing with other tabs
-   * @param channel {string} - The channel to be read
-   */
-  @mutation
-  readChannel(channel: string) {
-    if (channel.startsWith('!')) { // If it came from BroadcastChannel
-      const trueChannel = this.channels[channel.substring(1)];
-      if (trueChannel) {
-        // Set notifications for that channel to false
-        trueChannel.notifications = false;
-        trueChannel.mentioned = false;
-      }
-    } else {
-      const trueChannel = this.channels[channel];
-      if (trueChannel) {
-        // Set notifications for that channel to false
-        trueChannel.notifications = false;
-        trueChannel.mentioned = false;
-      }
-      /* Only relay the message if it didn't come from BroadcastChannel
-      so there isn't a loop of messages */
-      this.broadcast.postMessage(new Message(channel));
-    }
-  }
-
-  /**
-   * Turns notifications on for a channel
-   * @param channel {string} - The channel notifications should be turned on for
-   */
-  @mutation
-  notify(channel: string) {
-    // Again, making sure there is an actual channel with the name
-    const trueChannel = this.channels[channel];
-    if (trueChannel) {
-      // Turning on notifications for that channel
-      trueChannel.notifications = true;
-      if (this.desktopNotifications) {
-        const msg = trueChannel.postedMessages[trueChannel.postedMessages.length - 1];
-        const notification = new Notification(`New message in ${channel}`, {
-          body: `${msg.user.username}: ${msg.message}`,
-          tag: `new-message-${msg.target}`,
-        });
-      }
-    }
-  }
-
-  /**
-   * Sets a channel as mentioned (the user's username is mentioned in an unread message)
-   * @param channel {string} - The channel notifications should be turned on for
-   */
-  @mutation
-  mention(channel: string) {
-    // Again, making sure there is an actual channel with the name
-    const trueChannel = this.channels[channel];
-    if (trueChannel) {
-      // Turning on notifications for that channel
-      trueChannel.mentioned = true;
-    }
-  }
-
-  @mutation
-  postMessage(message: Message) {
-    if (message.target === '*') {
-      Object.values(this.channels).forEach((channel) => {
-        channel?.postedMessages.push(message);
-        this.channels[message.target]?.postedMessages.slice(0, 50);
-      });
-    } else {
-      this.channels[message.target]?.postedMessages.push(message);
-      this.channels[message.target]?.postedMessages.slice(0, 50);
-    }
-  }
-
-  @mutation
-  addUser({ nick, uid }: { nick: string; uid: string }) {
-    const username = User.parseUsername(nick);
-    if (!(username in this.connectedUsers)) {
-      Vue.set(this.connectedUsers, username, new User(username, uid));
-    }
-    const user = this.connectedUsers[username];
-    if (user) {
-      user.nicks.push(nick);
-    }
-  }
-
-  @mutation
-  removeUser(nick: string) {
-    const username = User.parseUsername(nick);
-    const user = this.connectedUsers[username];
-    if (!user) {
-      console.error(`Tried to remove user ${nick} but they weren't in the users dictionary.}`);
-      return;
-    }
-    const index = user.nicks.indexOf(nick);
-    Vue.delete(user.nicks, index);
-    if (user.nicks.length === 0) {
-      Vue.delete(this.connectedUsers, user.username);
-    }
-  }
+  // Initializer and related functions
 
-  @mutation
-  openReportModal({
-    message,
-    defaults,
-  }: {
-    message: Message;
-    defaults: { ignore: boolean; report: boolean };
-  }) {
-    // Subscribed to in the report modal file
+  @action()
+  async onNickInUse({ nick }: Irc.NickInvalidEventArgs) {
+    this.currentUser.nicks.splice(this.currentUser.nicks.indexOf(nick));
+    this.initClient();
   }
 
-  @mutation
-  unignoreUser(username: string) {
-    if (this.ignoredUsers.includes(username)) {
-      this.ignoredUsers.splice(this.ignoredUsers.indexOf(username), 1);
+  @action()
+  async generateNick() {
+    const connectionId = Math.floor(Math.random() * 1000);
+    let nick = `${this.currentUser.username}^${connectionId}`;
+    if (this.customNick) {
+      nick = `${this.customNick}^${connectionId}`;
     }
-    if (username === '*') this.ignoredUsers = [];
-    localStorage.chat_ignoredUsers = JSON.stringify(this.ignoredUsers);
+    this.currentUser.nicks.push(nick);
+    this.nick = nick;
   }
 
   @action()
@@ -454,136 +350,206 @@ export default class ChatModule extends VuexModule {
     this.connect();
   }
 
+  // Notifications
+
   /**
-   * Loads messages from history for a channel
-   * @param channel {string} - The channel history messages should be loaded for
+   * Sets a channel as 'read', clearing notifications and syncing with other tabs
+   * @param channel {string} - The channel to be read
    */
-  @action()
-  async loadMessagesForChannel(channel:string) {
-    // For all raw messages for the given channel
-    this.rawHistoryMessages.filter(e => e.split(' ')[3] === channel).forEach(e => {
-      this.processAndPost(e);
-    });
-    const stars = [];
-    if (localStorage.chat_stars) {
-      stars.push(...JSON.parse(localStorage.chat_stars) as Message[]);
+  @mutation
+  readChannel(channel: string) {
+    if (channel.startsWith('!')) { // If it came from BroadcastChannel
+      const trueChannel = this.channels[channel.substring(1)];
+      if (trueChannel) {
+        // Set notifications for that channel to false
+        trueChannel.notifications = false;
+        trueChannel.mentioned = false;
+      }
+    } else {
+      const trueChannel = this.channels[channel];
+      if (trueChannel) {
+        // Set notifications for that channel to false
+        trueChannel.notifications = false;
+        trueChannel.mentioned = false;
+      }
+      /* Only relay the message if it didn't come from BroadcastChannel
+      so there isn't a loop of messages */
+      this.broadcast.postMessage(new Message(channel));
     }
-    stars.filter(e => e.target === channel).forEach(e => {
-      this.addStarredMessage(e);
-    });
   }
 
   /**
-   * Stars a message
-   * @param message - The message to be starred
+   * Turns notifications on for a channel
+   * @param channel {string} - The channel notifications should be turned on for
    */
-  @action()
-  async addStarredMessage(message: Message) {
-    const msg = message;
-    msg.starred = true;
-    let messages = this.channels[message.target]!.postedMessages;
-    if (messages.includes(message)) return;
-    this.postMessage(msg);
-    messages = messages.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
-    this.channels[message.target]!.postedMessages = messages;
+  @mutation
+  notify(channel: string) {
+    // Again, making sure there is an actual channel with the name
+    const trueChannel = this.channels[channel];
+    if (trueChannel) {
+      // Turning on notifications for that channel
+      trueChannel.notifications = true;
+      if (this.desktopNotifications) {
+        const msg = trueChannel.postedMessages[trueChannel.postedMessages.length - 1];
+        const notification = new Notification(`New message in ${channel}`, {
+          body: `${msg.user.username}: ${msg.message}`,
+          tag: `new-message-${msg.target}`,
+        });
+      }
+    }
   }
 
   /**
-   * Unstars a message
-   * @param message - The message to unstar
+   * Sets a channel as mentioned (the user's username is mentioned in an unread message)
+   * @param channel {string} - The channel notifications should be turned on for
    */
-  @action()
-  async removeStar(message: Message) {
-    const messages = this.channels[message.target]?.postedMessages;
-    if (!messages) return;
-    messages.find(e => e === message)!.starred = false;
-    this.channels[message.target]!.postedMessages = messages;
+  @mutation
+  mention(channel: string) {
+    // Again, making sure there is an actual channel with the name
+    const trueChannel = this.channels[channel];
+    if (trueChannel) {
+      // Turning on notifications for that channel
+      trueChannel.mentioned = true;
+    }
   }
 
-  /**
-   * Takes in a raw string from the server and parses it into a history message that it then posts
-   * @param raw - The raw string to parse and post to the chat
-   */
-  @action()
-  async processAndPost(raw:string) {
-    const str = raw;
-    const parts = str.split(' ');
-    const time = parts[0].substring(13, 37);
-    const channel = parts[3];
-    // eslint-disable-next-line no-control-regex
-    let message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
-    if (this.notificationsKeywords) {
-      this.notificationsKeywords.forEach(n => {
-        message = message.replace(` ${n}`, ` **${n}**`);
-      });
+  // Users
+
+  @mutation
+  addUser({ nick, uid }: { nick: string; uid: string }) {
+    const username = User.parseUsername(nick);
+    if (!(username in this.connectedUsers)) {
+      Vue.set(this.connectedUsers, username, new User(username, uid));
+    }
+    const user = this.connectedUsers[username];
+    if (user) {
+      user.nicks.push(nick);
     }
-    const user = parts[1].substring(1, parts[1].indexOf('@'));
-    const username = user.substring(0, user.lastIndexOf('!'));
-    const uid = user.substring(user.lastIndexOf('!') + 1);
-    const date = new Date(time);
-    const msg = new Message(message.replace('ACTION ', ''), channel, new User(User.parseUsername(username), uid), message.includes('ACTION'));
-    msg.time = date;
-    this.postMessage(msg);
   }
 
-  /**
-   * Sets +o for all nicks for all channels
-   */
-  @action()
-  async setChannelOps() {
-    // This.connectedUsers[this.currentUser.username].nicks returns a list of the user's nicks
-    // Converting the array to a set and then back removes duplicates
-    // Iterates through to make sure each nick for the user has proper permissions
-    Array.from(new Set(this.connectedUsers[this.currentUser.username]?.nicks)).forEach(i => {
-      // Iterates through all channels
-      channelNames.forEach(e => this.client?.raw(`SAMODE ${e} +o ${i}`));
-    });
-  }
+  @mutation
+  removeUser(nick: string) {
+    const username = User.parseUsername(nick);
+    const user = this.connectedUsers[username];
+    if (!user) {
+      console.error(`Tried to remove user ${nick} but they weren't in the users dictionary.}`);
+      return;
+    }
+    const index = user.nicks.indexOf(nick);
+    Vue.delete(user.nicks, index);
+    if (user.nicks.length === 0) {
+      Vue.delete(this.connectedUsers, user.username);
+    }
+  }
+
+  // Report/ignore
+
+  @mutation
+  openReportModal({
+    message,
+    defaults,
+  }: {
+    message: Message;
+    defaults: { ignore: boolean; report: boolean };
+  }) {
+    // Subscribed to in the report modal file
+  }
 
-  /**
-   * Sends the OPER command to log the user in as an operator
-   */
   @action()
-  async operCommand() {
-    if (!this.oper) {
-      this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
-      this.setChannelOps();
-      this.joinOpsChannel();
-      console.log('Logging in as operator');
+  async ignoreUser({ username, channel }: { username: string; channel?: string }) {
+    if (!this.ignoredUsers.includes(username)) {
+      this.ignoredUsers.push(username);
+      localStorage.chat_ignoredUsers = JSON.stringify(this.ignoredUsers);
+      if (channel) {
+        this.postMessage(
+          new Message(
+            `Ignored ${username}. To unignore this user, either use the options menu again (on a message or the user list) or type /unignore ${username}`,
+            channel,
+          ),
+        );
+      }
+    } else if (channel) this.postMessage(new Message(`${username} has already been ignored`, channel));
+  }
+
+  @action()
+  async reportUser({
+    userToReport,
+    message,
+    reportComments,
+  }: {
+    userToReport: User;
+    message: Message | null;
+    reportComments: string;
+  }) {
+    const client = this.client!;
+    client.say(
+      '#ops-notifications',
+      `[REPORT] Reporting ${userToReport.username} (${userToReport.uid}) by ${this.currentUser.username} (${this.currentUser.uid}).\r\n`,
+    );
+    if (message) {
+      client.say('#ops-notifications', `[REPORTED MESSAGE] ${message.message}\r\n`);
+    }
+    client.say('#ops-notifications', `[REPORT REASON] ${reportComments}\r\n`);
+  }
+
+  @mutation
+  unignoreUser(username: string) {
+    if (this.ignoredUsers.includes(username)) {
+      this.ignoredUsers.splice(this.ignoredUsers.indexOf(username), 1);
     }
+    if (username === '*') this.ignoredUsers = [];
+    localStorage.chat_ignoredUsers = JSON.stringify(this.ignoredUsers);
   }
 
+  // History
+
   /**
-   * Joins the #ops-notifications channel
+   * Loads messages from history for a channel
+   * @param channel {string} - The channel history messages should be loaded for
    */
   @action()
-  async joinOpsChannel() {
-    this.client?.join('#ops-notifications');
+  async loadMessagesForChannel(channel:string) {
+    // For all raw messages for the given channel
+    this.rawHistoryMessages.filter(e => e.split(' ')[3] === channel).forEach(e => {
+      this.processAndPost(e);
+    });
+    const stars = [];
+    if (localStorage.chat_stars) {
+      stars.push(...JSON.parse(localStorage.chat_stars) as Message[]);
+    }
+    stars.filter(e => e.target === channel).forEach(e => {
+      this.addStarredMessage(e);
+    });
   }
 
+  /**
+   * Takes in a raw string from the server and parses it into a history message that it then posts
+   * @param raw - The raw string to parse and post to the chat
+   */
   @action()
-  async connect() {
-    this.disconnected = false;
-    this.client!.connect();
-    (Object.values(this.channels) as Channel[]).forEach(e => { // Removes disconnecting message
-      e.postedMessages = e.postedMessages.filter(m => m.message !== 'Disconnecting...');
-    });
-    this.connectionData.currentTimer = 0;
-    clearInterval(this.connectionData.timerInterval);
-    // Check bans on connect
-    Object.keys(this.channels).forEach(e => {
-      this.bans({
-        user: this.currentUser,
-        channel: e,
-        cb: (b) => {
-          if (b) {
-            this.onBanned(e);
-          }
-        },
+  async processAndPost(raw:string) {
+    const str = raw;
+    const parts = str.split(' ');
+    const time = parts[0].substring(13, 37);
+    const channel = parts[3];
+    // eslint-disable-next-line no-control-regex
+    let message = str.substring(str.indexOf(channel) + channel.length + 2).replace(/\u0001/g, '').trim();
+    if (this.notificationsKeywords) {
+      this.notificationsKeywords.forEach(n => {
+        message = message.replace(` ${n}`, ` **${n}**`);
       });
-    });
+    }
+    const user = parts[1].substring(1, parts[1].indexOf('@'));
+    const username = user.substring(0, user.lastIndexOf('!'));
+    const uid = user.substring(user.lastIndexOf('!') + 1);
+    const date = new Date(time);
+    const msg = new Message(message.replace('ACTION ', ''), channel, new User(User.parseUsername(username), uid), message.includes('ACTION'));
+    msg.time = date;
+    this.postMessage(msg);
   }
 
+  // Sending messages
+
   @action()
   async type(channel: string) {
     // Safeguard to make sure this doesn't go in a channel with others while I test
@@ -594,7 +560,6 @@ export default class ChatModule extends VuexModule {
     this.channels[channel]?.typing.push(this.username);
   }
 
-
   @action()
   async stopTyping(channel: string) {
     // Safeguard to make sure this doesn't go in a channel with others while I test
@@ -605,23 +570,6 @@ export default class ChatModule extends VuexModule {
       .filter(e => e !== this.username);
   }
 
-  @action()
-  async onNickInUse({ nick }: Irc.NickInvalidEventArgs) {
-    this.currentUser.nicks.splice(this.currentUser.nicks.indexOf(nick));
-    this.initClient();
-  }
-
-  @action()
-  async generateNick() {
-    const connectionId = Math.floor(Math.random() * 1000);
-    let nick = `${this.currentUser.username}^${connectionId}`;
-    if (this.customNick) {
-      nick = `${this.customNick}^${connectionId}`;
-    }
-    this.currentUser.nicks.push(nick);
-    this.nick = nick;
-  }
-
   @action()
   async sendMessage({ rawMessage, channel }: { rawMessage: string; channel: string }) {
     const postMessage = (
@@ -1410,89 +1358,16 @@ export default class ChatModule extends VuexModule {
     }
   }
 
-  /**
-   * Gives a reason for a ban
-   * @param param0 - An object containing the reason for the ban and the nick to send it to
-   */
-  @action()
-  async giveReason({ reason, nick }: {reason: string, nick: string}) {
-    this.client?.say(nick, reason);
-  }
-
-  @action()
-  async ignoreUser({ username, channel }: { username: string; channel?: string }) {
-    if (!this.ignoredUsers.includes(username)) {
-      this.ignoredUsers.push(username);
-      localStorage.chat_ignoredUsers = JSON.stringify(this.ignoredUsers);
-      if (channel) {
-        this.postMessage(
-          new Message(
-            `Ignored ${username}. To unignore this user, either use the options menu again (on a message or the user list) or type /unignore ${username}`,
-            channel,
-          ),
-        );
-      }
-    } else if (channel) this.postMessage(new Message(`${username} has already been ignored`, channel));
-  }
-
-  /**
-   * Changes the user's nick
-   * @param value - The new nick
-   */
-  @action()
-  async changeNick(value:string) {
-    let to = value;
-    if (this.oper) {
-      if (to.length > 0) {
-        to = to.trim();
-        this.nick = to;
-        this.currentUser.nicks = [to];
-        this.client?.raw(`NICK ${to}`);
-        if (localStorage) {
-          localStorage.chat_nick = to;
-        }
-      } else {
-        this.postMessage(new Message('Please include command parameters. Type `/help changenick` for more usage instructions'));
-      }
-    } else {
-      this.auth = true;
-      this.postMessage(new Message('You are not an operator or moderator and do not have permission to change your nick'));
-    }
-  }
-
-  @action()
-  async reportUser({
-    userToReport,
-    message,
-    reportComments,
-  }: {
-    userToReport: User;
-    message: Message | null;
-    reportComments: string;
-  }) {
-    const client = this.client!;
-    client.say(
-      '#ops-notifications',
-      `[REPORT] Reporting ${userToReport.username} (${userToReport.uid}) by ${this.currentUser.username} (${this.currentUser.uid}).\r\n`,
-    );
-    if (message) {
-      client.say('#ops-notifications', `[REPORTED MESSAGE] ${message.message}\r\n`);
-    }
-    client.say('#ops-notifications', `[REPORT REASON] ${reportComments}\r\n`);
-  }
-
-  @action()
-  async userKicked(params: Irc.KickEventArgs) {
-    const username = User.parseUsername(params.nick);
-    if (username === this.currentUser.username) {
-      const channel = this.channels[params.channel];
-      if (channel) channel.banned = BanStatus.BAN_STATUS_BANNED;
-      this.postMessage(
-        new Message(`You have been kicked from chat${params.message ? ` - ${params.message}` : ''}`, channel?.name),
-      );
-      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channel?.name));
+  @mutation
+  postMessage(message: Message) {
+    if (message.target === '*') {
+      Object.values(this.channels).forEach((channel) => {
+        channel?.postedMessages.push(message);
+        this.channels[message.target]?.postedMessages.slice(0, 50);
+      });
     } else {
-      this.removeUser(username);
+      this.channels[message.target]?.postedMessages.push(message);
+      this.channels[message.target]?.postedMessages.slice(0, 50);
     }
   }
 
@@ -1501,7 +1376,7 @@ export default class ChatModule extends VuexModule {
    * @param param0 - An object containing the message and the channel (user) to send it to
    */
   @action()
-  async postToQuery({ message, channel }: { message:string, channel:string}) {
+  async privateMessage({ message, channel }: { message:string, channel:string}) {
     /* Splits argument into message and channel
     Will only cause issues if people are putting | in their nick */
     const post = true;
@@ -1527,12 +1402,324 @@ export default class ChatModule extends VuexModule {
     }
   }
 
+  // Starring messages
+
+  /**
+   * Stars a message
+   * @param message - The message to be starred
+   */
   @action()
-  async getUserInfo(arg: { user: User, callback: (data: any | undefined) => any}) {
-    const { uid } = arg.user || { uid: 0 }; // UID needed for get request
-    const xmlHttp = new XMLHttpRequest();
-    xmlHttp.onreadystatechange = function cb() {
-      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
+  async addStarredMessage(message: Message) {
+    const msg = message;
+    msg.starred = true;
+    let messages = this.channels[message.target]!.postedMessages;
+    if (messages.includes(message)) return;
+    this.postMessage(msg);
+    messages = messages.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
+    this.channels[message.target]!.postedMessages = messages;
+  }
+
+  /**
+   * Unstars a message
+   * @param message - The message to unstar
+   */
+  @action()
+  async removeStar(message: Message) {
+    const messages = this.channels[message.target]?.postedMessages;
+    if (!messages) return;
+    messages.find(e => e === message)!.starred = false;
+    this.channels[message.target]!.postedMessages = messages;
+  }
+
+  // Moderation
+
+  /**
+   * Sets +o for all nicks for all channels
+   */
+  @action()
+  async setChannelOps() {
+    // This.connectedUsers[this.currentUser.username].nicks returns a list of the user's nicks
+    // Converting the array to a set and then back removes duplicates
+    // Iterates through to make sure each nick for the user has proper permissions
+    Array.from(new Set(this.connectedUsers[this.currentUser.username]?.nicks)).forEach(i => {
+      // Iterates through all channels
+      channelNames.forEach(e => this.client?.raw(`SAMODE ${e} +o ${i}`));
+    });
+  }
+
+  /**
+   * Sends the OPER command to log the user in as an operator
+   */
+  @action()
+  async operCommand() {
+    if (!this.oper) {
+      this.client?.raw(`OPER ${this.operLoginUser} ${this.operLoginPassword}`);
+      this.setChannelOps();
+      this.joinOpsChannel();
+      console.log('Logging in as operator');
+    }
+  }
+
+  /**
+   * Joins the #ops-notifications channel
+   */
+  @action()
+  async joinOpsChannel() {
+    this.client?.join('#ops-notifications');
+  }
+
+  /**
+   * Gives a reason for a ban
+   * @param param0 - An object containing the reason for the ban and the nick to send it to
+   */
+  @action()
+  async giveReason({ reason, nick }: {reason: string, nick: string}) {
+    this.client?.say(nick, reason);
+  }
+
+  /**
+   * Changes the user's nick
+   * @param value - The new nick
+   */
+  @action()
+  async changeNick(value:string) {
+    let to = value;
+    if (this.oper) {
+      if (to.length > 0) {
+        to = to.trim();
+        this.nick = to;
+        this.currentUser.nicks = [to];
+        this.client?.raw(`NICK ${to}`);
+        if (localStorage) {
+          localStorage.chat_nick = to;
+        }
+      } else {
+        this.postMessage(new Message('Please include command parameters. Type `/help changenick` for more usage instructions'));
+      }
+    } else {
+      this.auth = true;
+      this.postMessage(new Message('You are not an operator or moderator and do not have permission to change your nick'));
+    }
+  }
+
+  /**
+   * Bans a user
+   * @param user {User} - The user to be banned
+   */
+  @action()
+  async ban(user:User) {
+    if (this.oper) {
+      this.client?.ban(this.chatChannel, `*!${user.username}@*`);
+    }
+  }
+
+  /**
+   * Kicks a user
+   * @param user {User} - The user to be kicked
+   */
+  @action()
+  async kick(user:User) {
+    if (this.oper) {
+      this.connectedUsers[user.username]?.nicks.forEach((e) => {
+        this.client?.raw(`KICK ${this.chatChannel} ${e}`);
+      });
+    }
+  }
+
+  /**
+   * Quiets a user
+   * @param user {User} - The user to be quieted
+   */
+  @action()
+  async quiet(user:User) {
+    if (this.oper) {
+      this.client?.raw(`MODE ${this.chatChannel} +b m;*!${user.username}@*`);
+    }
+  }
+
+  /**
+   * Unquiets a user
+   * @param user {User} - The user to be unquieted
+   */
+  @action()
+  async unquiet(user:User) {
+    if (this.oper) {
+      this.client?.raw(`MODE ${this.chatChannel} -b m;*!${user.username}@*`);
+    }
+  }
+
+  /**
+   * Unbans a user
+   * @param user {User} - The user to be unbanned
+   */
+  @action()
+  async unban(user:User) {
+    if (this.oper) {
+      this.client?.unban(this.chatChannel, `*!${user.username}@*`);
+    }
+  }
+
+  @action()
+  async userKicked(params: Irc.KickEventArgs) {
+    const username = User.parseUsername(params.nick);
+    if (username === this.currentUser.username) {
+      const channel = this.channels[params.channel];
+      if (channel) channel.banned = BanStatus.BAN_STATUS_BANNED;
+      this.postMessage(
+        new Message(`You have been kicked from chat${params.message ? ` - ${params.message}` : ''}`, channel?.name),
+      );
+      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channel?.name));
+    } else {
+      this.removeUser(username);
+    }
+  }
+
+  @action()
+  async onBanned(channelName: string) {
+    const channel = this.channels[channelName];
+    if (!channel) return;
+    if (!channel.banned) {
+      this.postMessage(new Message('You have been banned', channelName));
+      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
+    }
+    channel.banned = BanStatus.BAN_STATUS_BANNED;
+    /* Not sure why user is set as banned in all channels
+    - just leaving it here in case it needs to stay */
+    /* Object.values(this.channels).forEach((c) => {
+      if (c) c.banned = BanStatus.BAN_STATUS_BANNED;
+    }); */
+  }
+
+  @action()
+  async onMuted(channelName: string) {
+    const channel = this.channels[channelName];
+    if (!channel) return;
+    if (!channel.banned) {
+      this.postMessage(new Message('You have been muted', channelName));
+      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
+    }
+    channel.banned = BanStatus.BAN_STATUS_QUIET;
+  }
+
+  @action()
+  async onUnbanned(channelName: string) {
+    const channel = this.channels[channelName];
+    if (!channel) return;
+    channel.banned = BanStatus.BAN_STATUS_NORMAL;
+    this.postMessage(new Message('You are now allowed to post in chat', channelName));
+  }
+
+  /**
+   * Determines whether a user is banned in a channel
+   * @param arg - An object containing the user, channel, and a callback.
+   */
+  @action()
+  async bans(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
+    const { username } = arg.user;
+    const { channel, cb } = arg;
+    if (channel === '*') {
+      channelNames.forEach(c => {
+        this.client?.banlist(c, (e) => {
+          const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+          cb(banmap.some(i => i.username.includes(username) && !i.username.includes('m;')));
+        });
+      });
+    } else {
+      this.client?.banlist(channel, (e) => {
+        const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+        cb(banmap.some(i => i.username.includes(username) && !i.username.includes('m;')));
+      });
+    }
+  }
+
+  /**
+   * Determines whether a user is muted in a channel
+   * @param arg - An object containing the user, channel, and a callback.
+   */
+  @action()
+  async quiets(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
+    const { username } = arg.user;
+    const { channel, cb } = arg;
+    if (channel === '*') {
+      channelNames.forEach(c => {
+        this.client?.banlist(c, (e) => {
+          const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+          cb(banmap.some(i => i.username.includes(username) && i.username.includes('m;')));
+        });
+      });
+    } else {
+      this.client?.banlist(channel, (e) => {
+        const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
+        cb(banmap.some(i => i.username.includes(username) && i.username.includes('m;')));
+      });
+    }
+  }
+
+  // Connection
+
+  @action()
+  async connect() {
+    this.disconnected = false;
+    this.client!.connect();
+    (Object.values(this.channels) as Channel[]).forEach(e => { // Removes disconnecting message
+      e.postedMessages = e.postedMessages.filter(m => m.message !== 'Disconnecting...');
+    });
+    this.connectionData.currentTimer = 0;
+    clearInterval(this.connectionData.timerInterval);
+    // Check bans on connect
+    Object.keys(this.channels).forEach(e => {
+      this.bans({
+        user: this.currentUser,
+        channel: e,
+        cb: (b) => {
+          if (b) {
+            this.onBanned(e);
+          }
+        },
+      });
+    });
+  }
+
+  @action()
+  async onDisconnect(stayDisconnected:boolean = false) {
+    const data = this.connectionData;
+    if (data.currentTimer > 0) return;
+    // TODO: What if connect is called and then immidiately a late "onDisconnect" arives?
+    data.connected = false;
+    data.firstConnection = false;
+    if (!stayDisconnected) { // If the disconnect wasn't intentional
+      if (data.failedAttempts === 0) {
+        data.failedAttempts += 1;
+        this.connect();
+      } else {
+        data.currentTimer = data.disconnectionTimers[Math.min(data.failedAttempts - 1, 3)];
+        data.failedAttempts += 1;
+        clearInterval(data.timerInterval);
+        data.timerInterval = setInterval(this.updateTimer, 1000);
+      }
+    } else { // If it was, disconnect and stay disconnected
+      this.client?.quit();
+      data.timerInterval = 100000000; // Doesn't try to reconnect again
+      this.disconnected = true;
+    }
+  }
+
+  @action()
+  async updateTimer() {
+    this.connectionData.currentTimer -= 1;
+    if (this.connectionData.currentTimer <= 0) {
+      this.connect();
+    }
+  }
+
+  // API calls
+
+  @action()
+  async getUserInfo(arg: { user: User, callback: (data: any | undefined) => any}) {
+    const { uid } = arg.user || { uid: 0 }; // UID needed for get request
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function cb() {
+      if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
         arg.callback(xmlHttp.responseText); // Calls callback after response
       }
     };
@@ -1553,6 +1740,8 @@ export default class ChatModule extends VuexModule {
     xmlHttp.send(null);
   }
 
+  // Message handlers
+
   @action()
   async onNoticeReceived({
     message, target, time, nick, type,
@@ -1657,12 +1846,6 @@ export default class ChatModule extends VuexModule {
     this.postMessage(messageObject);
   }
 
-  // TODO
-  @action()
-  async onUserQuit(message: any) {
-    this.removeUser(message);
-  }
-
   @action()
   async onModeMessageRecieved(event: Irc.ModeEventArgs) {
     event.modes.forEach((mode) => {
@@ -1697,62 +1880,14 @@ export default class ChatModule extends VuexModule {
     });
   }
 
-  /**
-   * Bans a user
-   * @param user {User} - The user to be banned
-   */
-  @action()
-  async ban(user:User) {
-    if (this.oper) {
-      this.client?.ban(this.chatChannel, `*!${user.username}@*`);
-    }
-  }
-
-  /**
-   * Kicks a user
-   * @param user {User} - The user to be kicked
-   */
-  @action()
-  async kick(user:User) {
-    if (this.oper) {
-      this.connectedUsers[user.username]?.nicks.forEach((e) => {
-        this.client?.raw(`KICK ${this.chatChannel} ${e}`);
-      });
-    }
-  }
-
-  /**
-   * Quiets a user
-   * @param user {User} - The user to be quieted
-   */
-  @action()
-  async quiet(user:User) {
-    if (this.oper) {
-      this.client?.raw(`MODE ${this.chatChannel} +b m;*!${user.username}@*`);
-    }
-  }
+  // Miscellaneous handlers
 
-  /**
-   * Unquiets a user
-   * @param user {User} - The user to be unquieted
-   */
+  // TODO
   @action()
-  async unquiet(user:User) {
-    if (this.oper) {
-      this.client?.raw(`MODE ${this.chatChannel} -b m;*!${user.username}@*`);
-    }
+  async onUserQuit(message: any) {
+    this.removeUser(message);
   }
 
-  /**
-   * Unbans a user
-   * @param user {User} - The user to be unbanned
-   */
-  @action()
-  async unban(user:User) {
-    if (this.oper) {
-      this.client?.unban(this.chatChannel, `*!${user.username}@*`);
-    }
-  }
 
   @action()
   async onIrcError(error: Irc.IrcErrorEventArgs) {
@@ -1764,110 +1899,7 @@ export default class ChatModule extends VuexModule {
     }
   }
 
-  @action()
-  async onBanned(channelName: string) {
-    const channel = this.channels[channelName];
-    if (!channel) return;
-    if (!channel.banned) {
-      this.postMessage(new Message('You have been banned', channelName));
-      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
-    }
-    channel.banned = BanStatus.BAN_STATUS_BANNED;
-    /* Not sure why user is set as banned in all channels
-    - just leaving it here in case it needs to stay */
-    /* Object.values(this.channels).forEach((c) => {
-      if (c) c.banned = BanStatus.BAN_STATUS_BANNED;
-    }); */
-  }
-
-  @action()
-  async onMuted(channelName: string) {
-    const channel = this.channels[channelName];
-    if (!channel) return;
-    if (!channel.banned) {
-      this.postMessage(new Message('You have been muted', channelName));
-      this.postMessage(new Message('Please read our [code of conduct](https://eternagame.org/about/conduct)', channelName));
-    }
-    channel.banned = BanStatus.BAN_STATUS_QUIET;
-  }
-
-  @action()
-  async onUnbanned(channelName: string) {
-    const channel = this.channels[channelName];
-    if (!channel) return;
-    channel.banned = BanStatus.BAN_STATUS_NORMAL;
-    this.postMessage(new Message('You are now allowed to post in chat', channelName));
-  }
-
-  @action()
-  async onDisconnect(stayDisconnected:boolean = false) {
-    const data = this.connectionData;
-    if (data.currentTimer > 0) return;
-    // TODO: What if connect is called and then immidiately a late "onDisconnect" arives?
-    data.connected = false;
-    data.firstConnection = false;
-    if (!stayDisconnected) { // If the disconnect wasn't intentional
-      if (data.failedAttempts === 0) {
-        data.failedAttempts += 1;
-        this.connect();
-      } else {
-        data.currentTimer = data.disconnectionTimers[Math.min(data.failedAttempts - 1, 3)];
-        data.failedAttempts += 1;
-        clearInterval(data.timerInterval);
-        data.timerInterval = setInterval(this.updateTimer, 1000);
-      }
-    } else { // If it was, disconnect and stay disconnected
-      this.client?.quit();
-      data.timerInterval = 100000000; // Doesn't try to reconnect again
-      this.disconnected = true;
-    }
-  }
-
-  /**
-   * Determines whether a user is banned in a channel
-   * @param arg - An object containing the user, channel, and a callback.
-   */
-  @action()
-  async bans(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
-    const { username } = arg.user;
-    const { channel, cb } = arg;
-    if (channel === '*') {
-      channelNames.forEach(c => {
-        this.client?.banlist(c, (e) => {
-          const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
-          cb(banmap.some(i => i.username.includes(username) && !i.username.includes('m;')));
-        });
-      });
-    } else {
-      this.client?.banlist(channel, (e) => {
-        const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
-        cb(banmap.some(i => i.username.includes(username) && !i.username.includes('m;')));
-      });
-    }
-  }
-
-  /**
-   * Determines whether a user is muted in a channel
-   * @param arg - An object containing the user, channel, and a callback.
-   */
-  @action()
-  async quiets(arg: {user: User, channel: string, cb: (b:boolean) => void}) {
-    const { username } = arg.user;
-    const { channel, cb } = arg;
-    if (channel === '*') {
-      channelNames.forEach(c => {
-        this.client?.banlist(c, (e) => {
-          const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
-          cb(banmap.some(i => i.username.includes(username) && i.username.includes('m;')));
-        });
-      });
-    } else {
-      this.client?.banlist(channel, (e) => {
-        const banmap = e.bans.map(i => new Ban(i.banned, i.channel));
-        cb(banmap.some(i => i.username.includes(username) && i.username.includes('m;')));
-      });
-    }
-  }
+  // Status
 
   /**
    * Updates the away/online status for all connected users
@@ -1923,13 +1955,7 @@ export default class ChatModule extends VuexModule {
     return this.connectedUsers[this.currentUser.username]?.away;
   }
 
-  @action()
-  async updateTimer() {
-    this.connectionData.currentTimer -= 1;
-    if (this.connectionData.currentTimer <= 0) {
-      this.connect();
-    }
-  }
+  // Channels
 
   /**
    * Joins a channel

From af4a95ad7db13b7e693d72d791c37a3d0fc96bc1 Mon Sep 17 00:00:00 2001
From: AlexHalb <ahalbesleben@holyspirit-al.com>
Date: Mon, 27 Jul 2020 13:02:37 -0500
Subject: [PATCH 223/223] External links are not treated as relative urls

---
 src/app/components/LinkModal.vue | 2 +-
 src/app/tools/Markdown.ts        | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/components/LinkModal.vue b/src/app/components/LinkModal.vue
index eef1a3b9..bc7914a4 100644
--- a/src/app/components/LinkModal.vue
+++ b/src/app/components/LinkModal.vue
@@ -4,7 +4,7 @@
       This link goes to <a target="_blank" :href="url">{{url}}</a>.
     </span>
     <button
-      class="btn link-button btn-primary w-100 mt-2"
+      class="btn link-button btn-primary w-100 mt-2 text-white"
       style="left: 50%"
       @click="openModal = false"
     >
diff --git a/src/app/tools/Markdown.ts b/src/app/tools/Markdown.ts
index 1ec021c0..28879ad8 100644
--- a/src/app/tools/Markdown.ts
+++ b/src/app/tools/Markdown.ts
@@ -33,6 +33,11 @@ md.renderer.rules.link_open = function linkOpen(tokens: any, idx: any, options:
     } else {
       tokens[idx].attrs[classIndex][1] += ' external-link'; // replace value of existing attr
     }
+
+    if (href.match(/(.+\.)+\w+(\/.)*/) && !href.match(/^.+:\/\//)) {
+      console.log(`http://${href}`, href);
+      tokens[idx].attrs[hrefIndex][1] = `http://${href}`;
+    }
   }
 
   return defaultRender(tokens, idx, options, env, self);