frontend: allow users to select channels

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

@@ -1,5 +1,5 @@
 <script>
-    import { gatewayStatus } from "../../../stores";
+    import { gatewayStatus, selectedChannel } from "../../../stores";
     import ChannelView from "./ChannelView.svelte";
     import Sidebar from "./Sidebar.svelte";
 </script>
@@ -12,24 +12,30 @@
         flex-direction: row;
     }
 
-    .loading-screen {
+    .fullscreen-message {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         overflow: hidden;
         background-color: var(--background-color-1);
     }
 </style>
 
-{#if $gatewayStatus.ready}
-    <div class="flex-container">
+<div class="flex-container">
+    {#if $gatewayStatus.ready}
         <Sidebar />
-        <ChannelView channel={{ name: "channel name" }} />
-    </div>
-{:else}
-    <div class="loading-screen">
-        connecting...
-    </div>
-{/if}
+        {#if $selectedChannel.id === -1}
+            <div class="fullscreen-message">
+                no channel selected.
+            </div>
+        {:else}
+            <ChannelView channel={$selectedChannel} />
+        {/if}
+    {:else}
+        <div class="fullscreen-message">
+            connecting...
+        </div>
+    {/if}
+</div>

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

@@ -1,11 +1,11 @@
 <script>
     import { HashIcon } from "svelte-feather-icons";
-    import { channels } from "../../../stores";
+    import { channels, selectedChannel } from "../../../stores";
 </script>
 
 <div class="sidebar">
     {#each $channels as channel (channel.id)}
-        <button class="sidebar-button" >
+        <button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
             <div>
                 <HashIcon />
             </div>
@@ -55,6 +55,7 @@
         height: 24px;
     }
 
+    .sidebar-button.selected,
     .sidebar-button:hover {
         background-color: var(--background-color-2);
     }

frontend/src/stores.js

@@ -1,3 +1,4 @@
+import { writable } from "svelte/store";
 import gateway, { GatewayEventType } from "./gateway";
 
 class Store {
@@ -110,3 +111,4 @@ class GatewayStatusStore extends Store {
 
 export const channels = new ChannelsStore();
 export const gatewayStatus = new GatewayStatusStore();
+export const selectedChannel = writable({ id: -1, name: "none", creator_id: -1 });