improve store

frontend/package.json

@@ -16,5 +16,8 @@
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-svelte": "^7.1.5",
     "svelte": "^4.0.0"
+  },
+  "dependencies": {
+    "@fontsource-variable/open-sans": "^5.0.6"
   }
 }

frontend/rollup.config.mjs

@@ -45,6 +45,7 @@ export default {
 		copy({
 			targets: [
 				{ src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" },
+				{ src: "node_modules/@fontsource-variable/open-sans/files/open-sans-latin-wght-*", dest: "public/build/files" },
 			]
 		}),
 

frontend/src/components/ChipBar.svelte

@@ -22,10 +22,11 @@
         align-items: center;
         color: var(--foreground-color-2);
         background-color: var(--background-color-2);
-        padding: 0.35em;
+        padding: 0.5em;
         margin-top: var(--space-xs);
         margin-right: var(--space-sm);
-        border-radius: 0.5em;
+        border-radius: 0.65em;
+        font-weight: 500;
     }
 
     button:hover {

frontend/src/components/Message.svelte

@@ -31,16 +31,16 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
 
     .avatar-container {
         margin-top: 5px;
-        margin-left: var(--space-sm);
+        margin-left: var(--space-smplus);
-        margin-right: var(--space-sm);
+        margin-right: var(--space-smplus);
-        width: 32px;
+        width: 40px;
         flex-shrink: 0;
     }
 
     .avatar {
         border-radius: 50%;
-        width: 32px;
+        width: 40px;
-        height: 32px;
+        height: 40px;
     }
 
     .message:hover, .message.pinged {
@@ -61,7 +61,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
-        font-weight: bold;
+        font-weight: 600;
         color: var(--foreground-color-2);
     }
 
@@ -118,7 +118,7 @@ import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
     <div class="avatar-container">
         {#if !message._clumped}
             {#if message.author_avatar}
-                <img class="avatar" src={avatarUrl(message.author_avatar, 32)} alt=" ">
+                <img class="avatar" src={avatarUrl(message.author_avatar, 64)} alt=" ">
             {:else}
                 <span class="material-icons-outlined circled-icon">alternate_email</span>
             {/if}

frontend/src/components/MessageInput.svelte

@@ -111,13 +111,12 @@
 
     .message-input {
         width: 100%;
-        background-color : var(--background-color-3);
+        background-color: var(--background-color-3);
         border: none;
         color: currentColor;
         border-radius: var(--radius-md);
         padding: var(--space-sm);
         font-size: inherit;
-        line-height: 24px;
         resize: none;
         contain: strict;
     }
@@ -128,11 +127,11 @@
 
     .message-input::placeholder {
         color: var(--foreground-color-4);
-        font-weight: 300;
+        font-weight: 400;
     }
 
     .send-button {
-        margin-left: var(--space-sm);
+        margin-left: var(--space-xsplus);
         border-radius: 50%;
         background-color: var(--purple-1);
         padding: 12px;

frontend/src/components/Messages.svelte

@@ -95,8 +95,8 @@
         border-top: thin solid var(--background-color-3);
         padding: 0;
         margin: var(--space-md);
-        margin-bottom: var(--space-lg);
+        margin-bottom: var(--space-md);
-        margin-top: var(--space-lg);
+        margin-top: var(--space-md);
     }
     
     .time-separator-text {
@@ -106,8 +106,9 @@
         padding-left: var(--space-xs);
         padding-right: var(--space-xs);
         background-color: var(--background-color-2);
-        color: var(--foreground-color-2);
+        color: var(--foreground-color-3);
-        font-size: 0.75em;
+        font-size: 0.75rem;
+        font-weight: 500;
     }
 </style>
 

frontend/src/components/overlays/Settings.svelte

@@ -99,14 +99,17 @@
         display: flex;
         justify-content: left;
         flex-direction: row;
-        padding: var(--space-md);
+        padding: var(--space-smplus);
     }
     .switch-option-card .info {
         display: flex;
         flex-direction: column;
     }
+    .switch-option-card .info .info-heading {
+        font-weight: 500;
+    }
     .switch-option-card .option-switch {
-        padding-left: var(--space-xs);
+        padding-left: var(--space-sm);
         margin-left: auto;
         justify-self: flex-end;
     }
@@ -172,7 +175,7 @@
             {:else if selectedTab == "PRIVACY"}
                 <div class="switch-option-card full-width">
                     <div class="info">
-                        <span>Let others know when I'm typing</span>
+                        <span class="info-heading">Let others know when I'm typing</span>
                         <span class="text-fg-3 text-small">If this is enabled, other users will see an indicator while you're typing a message.</span>
                     </div>
                     <div class="option-switch">
@@ -181,7 +184,7 @@
                 </div>
                 <div class="switch-option-card full-width">
                     <div class="info">
-                        <span>Make Waffle work</span>
+                        <span class="info-heading">Make Waffle work</span>
                         <span class="text-fg-3 text-small">Waffle needs to store data such as your messages, created channels, your username, your profile picture and more in order to work. If you'd like to stop this, you can delete your account.</span>
                     </div>
                 </div>
@@ -192,9 +195,11 @@
                     <button class="button selection-option full-width" class:selected="{ $theme === "light" }" on:click="{ () => theme.set('light') }">Light</button>
                 </div>
 
+                <div class="separator" />
+
                 <div class="switch-option-card full-width">
                     <div class="info">
-                        <span>Reduce animations</span>
+                        <span class="info-heading">Reduce animations</span>
                         <span class="text-fg-3 text-small">Reduce the amount of animations and visual effects.</span>
                     </div>
                     <div class="option-switch">

frontend/src/components/overlays/Toast.svelte

@@ -20,6 +20,11 @@
         border-radius: var(--radius-md);
         box-shadow: 0px 4px 16px rgba(17,17,26,0.2), 0px 8px 32px rgba(17,17,26,0.2);
     }
+
+    button {
+        margin-left: var(--space-xxs);
+        color: var(--foreground-color-2);
+    }
 </style>
 
 <div class="toast" transition:maybeModalScale>

frontend/src/stores.js

@@ -73,13 +73,15 @@ class Store {
         storeLog(`[Flush] Flushing ${queueCount} callbacks from queue`, storeCallbackQueue);
 
         const start = performance.now();
+        let count = 0;
         for (let i = 0; i < storeCallbackQueue.length; i++) {
             storeCallbackQueue[i][0](storeCallbackQueue[i][1]);
+            count++;
         }
         storeCallbackQueue.length = 0;
         const delta = performance.now() - start;
 
-        storeLog(`[Flush] Flushed ${queueCount} callbacks from queue, took ${delta}ms`);
+        storeLog(`[Flush] Flushed ${count} callbacks from queue, took ${delta}ms`);
     }
 
     startBatch() {
@@ -100,6 +102,8 @@ class Store {
 
         this.value = this._applyPipes(this.value);
 
+        if (!this._handlers.size) return;
+
         storeLog(`[Update] (${this.name}) Will queue ${this._handlers.size} handlers`, "value:", this.value, "handlers:", this._handlers);
 
         const isRootNode = storeCallbackQueue.length === 0;
@@ -192,7 +196,6 @@ class UserInfoStore extends Store {
         });
 
         gateway.subscribe(GatewayEventType.UserUpdate, (user) => {
-            console.log(user);
             if (this.value && this.value.id === user.id) {
                 this.value = user;
                 this.updated();

frontend/src/styles/global.css

@@ -1,6 +1,26 @@
 /* fonts */
 /* FIXME: fonts greatly increase payload size */
 
+/* open-sans-latin-ext-wght-normal */
+@font-face {
+	font-family: 'Open Sans Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 300 800;
+	src: url(./files/open-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
+	unicode-range: U+0100-02AF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  }
+  
+  /* open-sans-latin-wght-normal */
+  @font-face {
+	font-family: 'Open Sans Variable';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 300 800;
+	src: url(./files/open-sans-latin-wght-normal.woff2) format('woff2-variations');
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  }
+
 @font-face {
 	font-family: "Iosevka Waffle Web";
 	font-display: swap;
@@ -34,13 +54,13 @@
 /* top-level */
 
 :root {
-	--purple-1: hsl(280, 78%, 50%);
+	--purple-1: hsl(273, 67%, 53%);
 	--blue-1: hsl(200, 78%, 50%);
 	--green-1: hsl(140, 78%, 50%);
 	--yellow-1: hsl(50, 78%, 50%);
 	--red-1: hsl(2, 78%, 65%);
 
-	--purple-2: hsl(280, 78%, 45%);
+	--purple-2: hsl(273, 64%, 48%);
 	--blue-2: hsl(200, 78%, 45%);
 	--green-2: hsl(140, 78%, 40%);
 	--yellow-2: hsl(50, 78%, 60%);
@@ -52,6 +72,7 @@
 	--space-xs: calc(0.5 * var(--space-unit));
 	--space-xsplus: calc(0.65 * var(--space-unit));
 	--space-sm: calc(0.75 * var(--space-unit));
+	--space-smplus: calc(0.80 * var(--space-unit));
 	--space-norm: var(--space-unit);
 	--space-normplus: calc(var(--space-unit) + var(--space-sm));
 	--space-md: calc(1.25 * var(--space-unit));
@@ -94,7 +115,7 @@
 	--foreground-color-2: hsl(63, 10%, 82%);
 	--foreground-color-3: hsl(63, 2%, 60%);
 	--foreground-color-4: hsl(63, 2%, 49%);
-	--foreground-special-color-1: hsl(180, 2%, 70%);
+	--foreground-special-color-1: hsl(180, 2%, 60%);
 	--colored-element-text-color: var(--foreground-color-1);
 }
 
@@ -125,8 +146,9 @@ body {
 	color: var(--foreground-color-1);
 	background-color: var(--background-color-1);
 	font-size: 100%;
-	font-family: "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	font-family: "Open Sans Variable", "Iosevka Waffle Web", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-	line-height: 1.75;
+	line-height: 26px;
+	letter-spacing: 0.01em;
 
 	display: flex;
 	flex-direction: row;
@@ -167,7 +189,7 @@ body {
 }
 
 .top-bar-heading.accent {
-	font-weight: bold;
+	font-weight: 600;
 }
 
 .info-bar {
@@ -220,7 +242,7 @@ body {
 }
 
 .modal-header {
-	font-weight: bold;
+	font-weight: 650;
 	padding: var(--space-md);
 }
 
@@ -231,7 +253,7 @@ body {
 
 .modal-footer {
 	margin-top: auto;
-	padding: var(--space-md);
+	padding: var(--space-norm);
 	background-color: var(--background-color-1);
 	border-bottom-right-radius: var(--radius-lg);
 	border-bottom-left-radius: var(--radius-lg);
@@ -281,7 +303,7 @@ body {
 	text-transform: uppercase;
 	color: var(--foreground-color-2);
 	user-select: none;
-	font-weight: 300;
+	font-size: var(--h6);
 }
 
 .input {
@@ -305,10 +327,11 @@ body {
 	background: none;
 	text-align: center;
 	border: none;
-	padding: 0.6em;
+	padding: 0.7em;
 	border-radius: 1em;
 	font: inherit;
 	user-select: none;
+	font-weight: 550;
 }
 
 .button:hover {
@@ -489,7 +512,7 @@ body {
 	font: inherit;
 	border-radius: var(--radius-md);
 	width: 100%;
-	font-weight: 300;
+	font-weight: 500;
 	font-size: var(--h6);
 }
 
@@ -516,7 +539,6 @@ body {
 .sidebar-button.selected {
 	color: var(--foreground-color-1);
 	background-color: var(--background-color-2);
-	font-weight: 400;
 }
 
 .sidebar-button.selected .icon-button {
@@ -581,7 +603,6 @@ body {
 }
 
 html {
-	line-height: 1.15;
 	-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
 }
 
@@ -601,7 +622,7 @@ small {
 button, input, optgroup, select, textarea {
 	font-family: inherit;
 	font-size: 100%;
-	line-height: 1.15;
+	line-height: inherit;
 	margin: 0;
 }
 

frontend/yarn.lock

@@ -10,6 +10,11 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@fontsource-variable/open-sans@^5.0.6":
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/open-sans/-/open-sans-5.0.6.tgz#d92c5de9843b999d914e444afda54c39a752d949"
+  integrity sha512-ZEbqIsXo84fQeQwU2CPyI3W+8QMdbTVBS+CRbWBDA8nPbV9pyRCBy3UceyPrA7l1MJx4qaz5wv5hHQXDadgCzg==
+
 "@fontsource/material-icons-outlined@^4.5.4":
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12"