make sure to always select the first channel if no channel is selected

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,8 +96,7 @@
             {/if}
         </div>
         <div class="sidebar-buttons">
-            {#each $channels as channel (channel.id)}
+            {#each $filteredChannelsStore 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>
@@ -112,7 +111,6 @@
                         {/if}
                     </div>
                 </button>
-                {/if}
             {/each}
             {#if $userInfoStore && $userInfoStore.permissions.create_channel}
                 <button on:click="{ () => overlayStore.push(OverlayType.CreateChannel, { community: selectedCommunity.value }) }" class="sidebar-button">

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();