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

@@ -10,6 +10,7 @@
         flex-direction: column;
         width: 100%;
         height: 100%;
+        border-left: 1px solid var(--background-color-2);
     }
 
     .top-bar {

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

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

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

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

frontend/src/stores.js

@@ -1,4 +1,3 @@
-import { writable } from "svelte/store";
 import gateway, { GatewayEventType } from "./gateway";
 
 class Store {
@@ -111,4 +110,3 @@ 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 });