From a5ade224838d56b5446db4c43786c79afafdb64c Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 24 Apr 2022 21:29:25 +0300
Subject: [PATCH] frontend: add "connecting" indicator

---
 frontend/public/global.css                    | 11 ++++++++
 .../pages/main/ChannelTopBar.svelte           |  8 +-----
 .../src/components/pages/main/Main.svelte     | 28 ++++++++++---------
 .../components/pages/main/UserTopBar.svelte   |  8 +-----
 frontend/src/stores.js                        |  5 ----
 5 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/frontend/public/global.css b/frontend/public/global.css
index 23ebc36..ade30d9 100644
--- a/frontend/public/global.css
+++ b/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;
 }
diff --git a/frontend/src/components/pages/main/ChannelTopBar.svelte b/frontend/src/components/pages/main/ChannelTopBar.svelte
index 72813be..964b0c2 100644
--- a/frontend/src/components/pages/main/ChannelTopBar.svelte
+++ b/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>
diff --git a/frontend/src/components/pages/main/Main.svelte b/frontend/src/components/pages/main/Main.svelte
index 65d4bdb..34770ad 100644
--- a/frontend/src/components/pages/main/Main.svelte
+++ b/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,19 +25,20 @@
     }
 </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">
-                no channel selected.
-            </div>
-        {:else}
-            <ChannelView channel={$selectedChannel} />
-        {/if}
-    {:else}
+    <Sidebar />
+    {#if $selectedChannel.id === -1}
         <div class="fullscreen-message">
-            connecting...
+            no channel selected.
         </div>
+    {:else}
+        <ChannelView channel={$selectedChannel} />
     {/if}
 </div>
diff --git a/frontend/src/components/pages/main/UserTopBar.svelte b/frontend/src/components/pages/main/UserTopBar.svelte
index 0680812..380c444 100644
--- a/frontend/src/components/pages/main/UserTopBar.svelte
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index b222ba4..496a3c4 100644
--- a/frontend/src/stores.js
+++ b/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();
-        });
     }
 }