From fea7d2416666343af90d40ee6377e5e2b3ea1620 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 17 Apr 2022 20:50:04 +0300
Subject: [PATCH] frontend: allow users to select channels

---
 .../src/components/pages/main/Main.svelte     | 32 +++++++++++--------
 .../src/components/pages/main/Sidebar.svelte  |  5 +--
 frontend/src/stores.js                        |  2 ++
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/pages/main/Main.svelte b/frontend/src/components/pages/main/Main.svelte
index e63274d..094e3ce 100644
--- a/frontend/src/components/pages/main/Main.svelte
+++ b/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>
diff --git a/frontend/src/components/pages/main/Sidebar.svelte b/frontend/src/components/pages/main/Sidebar.svelte
index 0f1662e..864025d 100644
--- a/frontend/src/components/pages/main/Sidebar.svelte
+++ b/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);
     }
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 8d6cc43..52112d9 100644
--- a/frontend/src/stores.js
+++ b/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 });