Compute the active channel from the current routing state, not from a store.

2 files changed, 8 insertions, 13 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index f8744c1..1d561ae 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
+    import { page } from '$app/stores';
 
 	import { boot, subscribeToEvents } from '$lib/apiServer';
 	import { currentUser, logins, channelsList, messages } from '$lib/store';
@@ -11,6 +12,7 @@
 
     let user;
     let loading = true;
+    $: channel = $page?.params?.channel;
 
     currentUser.subscribe((value) => {
         user = value;
@@ -53,7 +55,7 @@
 {:else if user != null}
     <div id="interface">
         <div class="channel-list">
-            <ChannelList />
+            <ChannelList active={channel} />
         </div>
         <div class="active-channel">
             <slot />
@@ -62,7 +64,7 @@
             <CreateChannelForm />
         </div>
         <div class="create-message">
-            <MessageInput />
+            <MessageInput {channel} />
         </div>
     </div>
 {:else}
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index ef439d0..7bd28d9 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -1,17 +1,10 @@
 <script>
-    import { afterNavigate } from '$app/navigation';
     import { page } from '$app/stores';
-
-    import { activeChannel } from '$lib/store';
     import ActiveChannel from '$lib/components/ActiveChannel.svelte';
 
-    afterNavigate(async () => {
-        let { channel } = $page.params;
-        activeChannel.update((value) => {
-            value.set(channel)
-            return value;
-        });
-    });
+    $: channel = $page?.params?.channel;
 </script>
 
-<ActiveChannel />
+<div class="active-channel">
+    <ActiveChannel {channel} />
+</div>