frontend: add "connecting" indicator

frontend/public/global.css

@@ -47,10 +47,17 @@
 
 body {
 	color: var(--foreground-color-1);
+	background-color: var(--background-color-1);
 	font-size: 100%;
 	font-family: "Iosevka Aile Web", sans-serif;
 	font-weight: 400;
 	line-height: 1.75;
+
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
 }
 
 .pre--loading-screen {
@@ -77,6 +84,10 @@ body {
 	flex-shrink: 0;
 }
 
+.top-bar-heading {
+	margin-left: var(--space-xxs);
+}
+
 .h1 {
 	font-size: 2.488rem;
 }

frontend/src/components/pages/main/ChannelTopBar.svelte

@@ -4,13 +4,7 @@
     export let channel;
 </script>
 
-<style>
-    .channel-heading {
-        margin-left: var(--space-xxs);
-    }
-</style>
-
 <div class="top-bar">
     <HashIcon />
-    <span class="h5 channel-heading">{ channel.name }</span>
+    <span class="h5 top-bar-heading">{ channel.name }</span>
 </div>

frontend/src/components/pages/main/Main.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { CloudIcon } from "svelte-feather-icons";
     import { gatewayStatus, selectedChannel } from "../../../stores";
     import ChannelView from "./ChannelView.svelte";
     import Sidebar from "./Sidebar.svelte";
@@ -6,8 +7,8 @@
 
 <style>
     .flex-container {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         display: flex;
         flex-direction: row;
         overflow: hidden;
@@ -24,8 +25,14 @@
     }
 </style>
 
+{#if !$gatewayStatus.ready}
+    <div class="top-bar">
+        <CloudIcon />
+        <span class="h5 top-bar-heading">connecting...</span>
+    </div>
+{/if}
+
 <div class="flex-container">
-    {#if $gatewayStatus.ready}
     <Sidebar />
     {#if $selectedChannel.id === -1}
         <div class="fullscreen-message">
@@ -34,9 +41,4 @@
     {:else}
         <ChannelView channel={$selectedChannel} />
     {/if}
-    {:else}
-        <div class="fullscreen-message">
-            connecting...
-        </div>
-    {/if}
 </div>

frontend/src/components/pages/main/UserTopBar.svelte

@@ -3,13 +3,7 @@
     import { userInfoStore } from "../../../stores";
 </script>
 
-<style>
-    .user-heading {
-        margin-left: var(--space-xxs);
-    }
-</style>
-
 <div class="top-bar">
     <AtSignIcon />
-    <span class="h5 user-heading">{ $userInfoStore.username }</span>
+    <span class="h5 top-bar-heading">{ $userInfoStore ? $userInfoStore.username : "" }</span>
 </div>

frontend/src/stores.js

@@ -93,11 +93,6 @@ class UserInfoStore extends Store {
             this.value = user;
             this.updated();
         });
-
-        gateway.subscribe(GatewayEventType.Close, () => {
-            this.value = null;
-            this.updated();
-        });
     }
 }