Add button to toggle chat hiding (For heathens)

adds a button to toggle the chat

chatlessdisc.plugin.js

@@ -1,6 +1,6 @@
 /**
  * @name chatlessdisc
- * @version 1.0.0
+ * @version 1.1.0
  * @description removes the chatting from disc, as god intended
  * @author Julia Lange
  *
@@ -69,33 +69,100 @@ function clickPopOut() {
     popOutButton.click();
 }
 
+function addToggleButton(button) {
+    let muteButton = document.querySelector("div > button[aria-label='Mute']");
+    if(muteButton == null) return;
+    let buttonList = muteButton.parentElement;
+    buttonList.prepend(button)
+
+    enablePortraitStyle()
+}
+
+function enablePortraitStyle() {
+    let portrait = document.querySelector("div[aria-label='Set Status']");
+    if(portrait == null) return;
+    portrait.style = "width: 100%; min-width: 0px";
+}
+
+function disablePortaitStyle() {
+    let portrait = document.querySelector("div[aria-label='Set Status']");
+    if(portrait == null) return;
+    portrait.style = "";
+}
+
+function enableChanges() {
+    expandSidebar();
+
+    return true
+}
+
+function disableChanges() {
+    contractSidebar();
+
+    return false
+}
+
+function createToggleButton(onClickFunction) {
+    let toggleButton = document.createElement("button");
+    toggleButton.role = "switch";
+    toggleButton.ariaLabel = "Chattless Toggle";
+    toggleButton.textContent = "💬";
+
+    // Had to style instead of use the class, because otherwise the class
+    // wouldn't work
+    toggleButton.style = "height: 32px; width: 32px; border-radius: 4px; \
+        background: transparent;"
+    toggleButton.className = "chattless_button"
+    toggleButton.addEventListener("click", onClickFunction);
+
+    return toggleButton;
+}
+
 class chatlessdisc {
 
     constructor() {
+        this.enabled = false;
         this.channelActionsModule = BdApi.findModuleByProps('selectChannel');
+
+        this.toggleButton = createToggleButton(async () => {
+            if(this.enabled)
+                this.enabled = disableChanges();
+            else
+                this.enabled = enableChanges();
+        });
     }
 
     start() {
-        expandSidebar();
+        this.enabled = enableChanges();
+        addToggleButton(this.toggleButton);
         this.channelClassName = addChannelClass();
 
+        BdApi.DOM.addStyle(TITLE, `.chattless_button:hover {
+            background: rgba(255,255,255,0.125) !important;
+        }`);
+
         BdApi.Patcher.instead(TITLE, this.channelActionsModule,
             "selectChannel", async (_, args, originalFunction) => {
             await originalFunction(...args);
-            removeChat();
+            if (this.enabled) {
-            if (this.channelClassName == "")
+                removeChat();
-                this.channelClassName = addChannelClass();
+                if (this.channelClassName == "")
+                    this.channelClassName = addChannelClass();
+            }
         });
         BdApi.Patcher.instead(TITLE, this.channelActionsModule,
             "selectVoiceChannel", async (_, args, originalFunction) => {
             await originalFunction(...args);
-            await this.channelActionsModule.selectPrivateChannel(args[0]);
+            if (this.enabled) {
-            clickPopOut();
+                await this.channelActionsModule.selectPrivateChannel(args[0]);
+                clickPopOut();
+            }
         });
     }
     //Turn off and remove all parts of the plugin
     stop() {
-        contractSidebar();
+        this.toggleButton.remove()
+        disableChanges();
         BdApi.Patcher.unpatchAll(TITLE);
         BdApi.DOM.removeStyle(TITLE);
     }