From 9bdeb6e5c207a9834421e2d8085ef754a77b7437 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 25 Jun 2023 17:49:17 +0300
Subject: [PATCH] make sure to always select the first channel if no channel is
 selected

---
 frontend/src/components/Sidebar.svelte | 34 ++++++++++++--------------
 frontend/src/stores.js                 | 27 ++++++++++++++++++--
 2 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index 5dd65af..fb1ff1e 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -2,7 +2,7 @@
     import { quadInOut } from "svelte/easing";
     import { maybeFly, maybeFlyIf } from "../animations";
     import { avatarUrl } from "../storage";
-    import { channels, gatewayStatus, overlayStore, selectedChannel, showSidebar, smallViewport, userInfoStore, unreadStore, OverlayType, communities, selectedCommunity } from "../stores";
+    import { channels, gatewayStatus, overlayStore, selectedChannel, showSidebar, smallViewport, userInfoStore, unreadStore, OverlayType, communities, selectedCommunity, filteredChannelsStore } from "../stores";
     import AddCommunity from "./overlays/AddCommunity.svelte";
     import UserView from "./UserView.svelte";
 
@@ -96,23 +96,21 @@
             {/if}
         </div>
         <div class="sidebar-buttons">
-            {#each $channels as channel (channel.id)}
-                {#if ($selectedCommunity.id === -1 && channel.community_id === null) || ($selectedCommunity.id !== -1 && channel.community_id === $selectedCommunity.id)}
-                    <button on:click="{ selectChannel(channel) }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
-                        <span class="material-icons-outlined">tag</span>
-                        <span class="sidebar-button-text">{ channel.name }</span>
-                        <div class="sidebar-channel-buttons">
-                            {#if $unreadStore.get(channel.id)}
-                                <div class="unread-indicator">{ $unreadStore.get(channel.id) }</div>
-                            {/if}
-                            {#if $userInfoStore && (channel.owner_id === $userInfoStore.id || $userInfoStore.is_superuser)}
-                                <button class="icon-button" on:click|stopPropagation="{ () => overlayStore.push(OverlayType.EditChannel, { channel }) }" aria-label="Edit Channel">
-                                    <span class="material-icons-outlined">more_vert</span>
-                                </button>
-                            {/if}
-                        </div>
-                    </button>
-                {/if}
+            {#each $filteredChannelsStore as channel (channel.id)}
+                <button on:click="{ selectChannel(channel) }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
+                    <span class="material-icons-outlined">tag</span>
+                    <span class="sidebar-button-text">{ channel.name }</span>
+                    <div class="sidebar-channel-buttons">
+                        {#if $unreadStore.get(channel.id)}
+                            <div class="unread-indicator">{ $unreadStore.get(channel.id) }</div>
+                        {/if}
+                        {#if $userInfoStore && (channel.owner_id === $userInfoStore.id || $userInfoStore.is_superuser)}
+                            <button class="icon-button" on:click|stopPropagation="{ () => overlayStore.push(OverlayType.EditChannel, { channel }) }" aria-label="Edit Channel">
+                                <span class="material-icons-outlined">more_vert</span>
+                            </button>
+                        {/if}
+                    </div>
+                </button>
             {/each}
             {#if $userInfoStore && $userInfoStore.permissions.create_channel}
                 <button on:click="{ () => overlayStore.push(OverlayType.CreateChannel, { community: selectedCommunity.value }) }" class="sidebar-button">
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 6e35f24..4ab22ae 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -699,7 +699,11 @@ class SelectedChannelStore extends Store {
         this.communityIdToSelectedChannel = new Map();
 
         selectedCommunity.subscribe((community) => {
-            this.value = this.communityIdToSelectedChannel.get(community.id) || noneChannel;
+            let channel = this.communityIdToSelectedChannel.get(community.id);
+            if (!channel && filteredChannelsStore.value.length) {
+                channel = filteredChannelsStore.value[0];
+            }
+            this.value = channel || noneChannel;
             this.updated();
         });
 
@@ -809,8 +813,28 @@ class SelectedCommunityStore extends Store {
     }
 }
 
+class FilteredChannelsStore extends Store {
+    constructor() {
+        super([], "FilteredChannelsStore");
+        channels.on(() => this.update());
+        selectedCommunity.on(() => this.update());
+        this.update();
+    }
+
+    update() {
+        if (selectedCommunity.value.id === -1) {
+            this.value = channels.value.filter(n => n.community_id === null);
+        } else {
+            this.value = channels.value.filter(n => n.community_id === selectedCommunity.value.id);
+        }
+        this.updated();
+    }
+}
+
 
 export const selectedCommunity = new SelectedCommunityStore();
+export const channels = new ChannelsStore();
+export const filteredChannelsStore = new FilteredChannelsStore();
 export const selectedChannel = new SelectedChannelStore();
 export const showSidebar = new Store(true, "showSidebar");
 export const showPresenceSidebar = new Store(false, "showPresenceSidebar");
@@ -818,7 +842,6 @@ export const smallViewport = new Store(false, "smallViewport");
 export const showChannelView = new Store(true, "showChannelView");
 export const theme = new StorageItemStore("ui:theme");
 export const doAnimations = new StorageItemStore("ui:doAnimations");
-export const channels = new ChannelsStore();
 export const communities = new CommunitiesStore();
 export const gatewayStatus = new GatewayStatusStore();
 export const messagesStoreProvider = new MessagesStoreProvider();