frontend/src/auth.js

@@ -2,7 +2,7 @@ import gateway, { GatewayEventType } from "./gateway";
 import { removeItem, setItem } from "./storage";
 import { overlayStore } from "./stores";
 
-export function useAuthHandlers() {
+function useAuthHandlers() {
     gateway.subscribe(GatewayEventType.Ready, () => {
         overlayStore.close("login");
         overlayStore.close("createAccount");
@@ -24,3 +24,5 @@ export function logOut() {
     gateway.close();
     gateway.dispatch(GatewayEventType.BadAuth, -1);
 }
+
+useAuthHandlers();

frontend/src/components/Sidebar.svelte

@@ -1,7 +1,8 @@
 <script>
     import { HashIcon, PlusIcon, MoreVerticalIcon, SettingsIcon } from "svelte-feather-icons";
     import { quadInOut } from "svelte/easing";
-    import { maybeFly } from "../animations";
+    import { fly } from "svelte/transition";
+import { maybeFade } from "../animations";
     import { channels, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
     import UserTopBar from "./UserTopBar.svelte";
 
@@ -30,7 +31,7 @@
     };
 </script>
 
-<div class="sidebar-container" transition:maybeFly="{{ duration: 200, easing: quadInOut, x: -10 }}" on:outroend="{ outroEnd }">
+<div class="sidebar-container" transition:maybeFade="{{ duration: 200, easing: quadInOut, x: -10 }}" on:outroend="{ outroEnd }">
     <UserTopBar />
     <div class="sidebar">
         {#each $channels as channel (channel.id)}

frontend/src/gateway.js

@@ -1,4 +1,4 @@
-import logger from "./logging";
+import logging from "./logging";
 import { getItem } from "./storage";
 
 export const GatewayErrors = {
@@ -35,7 +35,7 @@ export const GatewayEventType = {
     BadAuth: -3,
 }
 
-const log = logger("Gateway");
+const log = logging.logger("Gateway", true);
 
 export default {
     ws: null,

frontend/src/logging.js

@@ -1,8 +1,9 @@
-import { getItem } from "./storage";
+export default {
-
+    sinks: new Map(),
-export default function logger(sink) {
+    logger(sink, enabled=false) {
+        this.sinks.set(sink, enabled);
         return (...args) => {
-        if (getItem(`loggingSink:${sink}`)) {
+            if (this.sinks.get(sink)) {
                 console.log(
                     `%c[${sink}]`,
                     "color: #8f3f71; font-weight: bold;",
@@ -10,4 +11,11 @@ export default function logger(sink) {
                 );
             }
         };
+    },
+    enableSink(sink) {
+        this.sinks.set(sink, true);
+    },
+    disableSink(sink) {
+        this.sinks.set(sink, false);
     }
+};

frontend/src/main.js

@@ -1,16 +1,17 @@
 import Main from './components/Main.svelte';
 import gateway from './gateway';
 import { getItem, init } from './storage';
-import { authWithToken, useAuthHandlers } from './auth';
+import logging from "./logging";
+import { authWithToken } from './auth';
 import { initResponsiveHandlers } from './responsive';
 
 window.__waffle = {
+	logging,
 	gateway
 };
 
 init();
 initResponsiveHandlers();
-useAuthHandlers();
 authWithToken(getItem("token"));
 
 // Remove loading screen

frontend/src/storage.js

@@ -2,9 +2,7 @@ const defaults = {
     apiBase: `${window.location.origin}/api/v1`,
     gatewayBase: `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/gateway`,
     doAnimations: true,
-    token: "",
+    token: ""
-    "loggingSink:Gateway": false,
-    "loggingSink:Store": false
 };
 const store = new Map(Object.entries(defaults));
 const persistentProvider = localStorage;

frontend/src/stores.js

@@ -1,9 +1,9 @@
 import gateway, { GatewayEventType } from "./gateway";
-import logger from "./logging";
+import logging from "./logging";
 import request from "./request";
 import { apiRoute } from "./storage";
 
-const storeLog = logger("Store");
+const storeLog = logging.logger("Store", true);
 
 class Store {
     constructor(value=null, name="[unnamed]") {