various style improvements

frontend/package.json

@@ -7,7 +7,7 @@
     "dev": "rollup -c -w"
   },
   "devDependencies": {
-    "@material-design-icons/font": "^0.14.2",
+    "@fontsource/material-icons-outlined": "^4.5.4",
     "@rollup/plugin-commonjs": "^23.0.4",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.1.0",

frontend/rollup.config.mjs

@@ -44,7 +44,7 @@ export default {
 		// Copy fonts
 		copy({
 			targets: [
-				{ src: "node_modules/@material-design-icons/font/material-icons-outlined.woff2", dest: "public/build" },
+				{ src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" },
 			]
 		}),
 

frontend/src/components/ChannelView.svelte

@@ -4,6 +4,7 @@
     import Messages from "./Messages.svelte";
     import { quadInOut } from "svelte/easing";
     import { maybeFly } from "../animations";
+    import { statusBarStore } from "../stores";
 
     export let channel;
 </script>
@@ -20,6 +21,11 @@
 </style>
 
 <div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
+    {#if $statusBarStore}
+        <div class="info-bar">
+            <span class="info-text">{ $statusBarStore }</span>
+        </div>
+    {/if}
     <ChannelTopBar channel={ channel } />
     <Messages channelId="{ channel.id }" />
     <MessageInput channel={ channel } />

frontend/src/components/MessageInput.svelte

@@ -184,7 +184,6 @@
         {/if}
     </div>
     <div class="typing-info-container">
-        <span class="typing-list" class:invisible={ typingList === "?no one?" }>{ typingList }</span>
+        <span class="typing-list" class:invisible={ typingList === "?no one?" }>{ typingList }</span><span class="typing-message" class:invisible={ typingList === "?no one?" }>{ typingMessage }</span>
-        <span class="typing-message" class:invisible={ typingList === "?no one?" }>{ typingMessage }</span>
     </div>
 </div>

frontend/src/main.js

@@ -6,15 +6,28 @@ import { useDebuggingApi } from './debuggingapi';
 import gateway, { GatewayEventType } from './gateway';
 import { pluginStore } from './stores';
 
+import "@fontsource/material-icons-outlined"
 import "./styles/global.css";
-import "@material-design-icons/font";
 import { timeline } from './timeline';
 
 timeline.start();
 
+let loaded = false;
+let loadedListener = null;
+document.addEventListener("DOMContentLoaded", () => {
+    loaded = true;
+    if (loadedListener) {
+        loadedListener();
+        loadedListener = null;
+    }
+});
+
 function handleGatewaySettlement() {
     timeline.addCheckpoint("Got gateway settlement");
 
+    const loadApplication = () => {
+        timeline.addCheckpoint("Application load started");
+
         const loadingElement = document.getElementById("pre--loading-screen");
         if (loadingElement) {
             loadingElement.parentElement.removeChild(loadingElement);
@@ -47,6 +60,15 @@ function handleGatewaySettlement() {
     
         timeline.addCheckpoint("All initialization finished");
         timeline.dump();
+    };
+
+    if (!loaded) {
+        timeline.addCheckpoint("Waiting for DOM content before loading application");
+
+        loadedListener = loadApplication;
+    } else {
+        loadApplication();
+    }
 }
 
 function main() {

frontend/src/stores.js

@@ -675,6 +675,7 @@ export const presenceStore = new PresenceStore();
 export const unreadStore = new UnreadStore();
 export const pluginStore = new PluginStore();
 export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
+export const statusBarStore = new Store(null, "statusBarStore");
 
 export const setMessageInputEvent = new Store(null, "event:setMessageInput");
 export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {

frontend/src/styles/global.css

@@ -40,7 +40,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, 18%, 70%);
+	--foreground-special-color-1: hsl(180, 2%, 70%);
 	--colored-element-text-color: var(--foreground-color-1);
 
 	--purple-1: hsl(280, 78%, 50%);
@@ -83,6 +83,14 @@
 	/* initial values. these will be modified by javascript */
 	--viewportWidth: 100vw;
 	--viewportHeight: 100vh;
+
+	/* font sizes */
+	--h1: 1.802rem;
+	--h2: 1.602rem;
+	--h3: 1.424rem;
+	--h4: 1.266rem;
+	--h5: 1.125rem;
+	--h6: 0.889rem;
 }
 
 html, body {
@@ -131,10 +139,7 @@ body {
 	align-items: center;
 	justify-content: left;
 	width: 100%;
-	padding-left: var(--space-sm);
+	padding: var(--space-sm);
-	padding-right: var(--space-sm);
-	padding-top: var(--space-sm);
-	padding-bottom: var(--space-sm);
 	flex-grow: 0;
 	flex-shrink: 0;
 }
@@ -147,6 +152,20 @@ body {
 	font-weight: bold;
 }
 
+.info-bar {
+	display: flex;
+	align-items: center;
+	background-color: var(--background-color-0);
+	padding: var(--space-xxs);
+	margin: var(--space-xs);
+	border-radius: var(--radius-sm);
+}
+
+.info-bar .info-text {
+	margin-left: var(--space-sm);
+	color: var(--foreground-color-2);
+}
+
 /* modal */
 
 .modal-backdrop {
@@ -317,7 +336,6 @@ body {
 	text-align: center;
 	border: none;
 	border-radius: var(--radius-md);
-	font: inherit;
 }
 
 .icon-button .material-icons,
@@ -383,12 +401,12 @@ body {
 
 /* text */
 
-.h1 {font-size: 1.802rem;}
+.h1 {font-size: var(--h1)}
-.h2 {font-size: 1.602rem;}
+.h2 {font-size: var(--h2)}
-.h3 {font-size: 1.424rem;}
+.h3 {font-size: var(--h3)}
-.h4 {font-size: 1.266rem;}
+.h4 {font-size: var(--h4)}
-.h5 {font-size: 1.125rem;}
+.h5 {font-size: var(--h5)}
-.text-small {font-size: 0.889rem;}
+.text-small {font-size: var(--h6)}
 
 /* sidebar */
 
@@ -432,6 +450,7 @@ body {
 	border-radius: var(--radius-md);
 	width: 100%;
 	font-weight: 300;
+	font-size: var(--h6);
 }
 
 .sidebar-button .sidebar-button-text {
@@ -442,12 +461,12 @@ body {
 }
 
 .sidebar-button .icon-button {
-	display: none;
+	visibility: hidden;
 }
 
 .sidebar-button.selected .icon-button,
 .sidebar-button:hover .icon-button {
-	display: flex;
+	visibility: visible;
 }
 
 .sidebar-button:hover {

frontend/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@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"
+  integrity sha512-2SLQe/pAlOzoE2Kd5cBxqTgI9U63hf3a7RrCF8GFvgPkYhF6WOcIzFzsLc1Fdf+UhcYS+Hgpp6o8peguwZGK9Q==
+
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
@@ -42,11 +47,6 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
-"@material-design-icons/font@^0.14.2":
-  version "0.14.2"
-  resolved "https://registry.yarnpkg.com/@material-design-icons/font/-/font-0.14.2.tgz#5b02c3bda37022645cc2df0200be02b6bc91ab4a"
-  integrity sha512-svLx/Q6WidjiSE1rT9joMy241x+gLb0SfNrVR0Kd3GyPyU5HXRmXvjWDj2h2RHzAsgxFqPGez4hL+EmbjZiYSg==
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"