hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
hippoz 2023-06-25 17:49:17 +03:00
parent 4329d9f592
commit 9bdeb6e5c2
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
2 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/components/Sidebar.svelte
View file

@ -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">

27
frontend/src/stores.js
View file

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