5 files changed, 27 insertions, 10 deletions
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/(app)/+layout.svelte
index 932582d..98d4acf 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/(app)/+layout.svelte
@@ -1,14 +1,13 @@
 <script>
 	import { onMount } from 'svelte';
 
-	import { boot, subscribeToEvents } from '../apiServer';
-	import { currentUser, channelsList, messages } from '../store';
+	import { boot, subscribeToEvents } from '$lib/apiServer';
+	import { currentUser, channelsList, messages } from '$lib/store';
 
-    import ActiveChannel from '../lib/ActiveChannel.svelte';
-    import ChannelList from '../lib/ChannelList.svelte';
-    import CreateChannelForm from '../lib/CreateChannelForm.svelte';
-    import LogIn from '../lib/LogIn.svelte';
-    import MessageInput from '../lib/MessageInput.svelte';
+    import ChannelList from '$lib/components/ChannelList.svelte';
+    import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
+    import LogIn from '$lib/components/LogIn.svelte';
+    import MessageInput from '$lib/components/MessageInput.svelte';
 
     let user;
     let loading = true;
@@ -63,7 +62,7 @@
             <ChannelList />
         </div>
         <div class="active-channel">
-            <ActiveChannel />
+            <slot />
         </div>
         <div class="create-channel">
             <CreateChannelForm />
diff --git a/hi-ui/src/routes/(app)/+page.svelte b/hi-ui/src/routes/(app)/+page.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/hi-ui/src/routes/(app)/+page.svelte
diff --git a/hi-ui/src/routes/(app)/ch/[channel]/+page.js b/hi-ui/src/routes/(app)/ch/[channel]/+page.js
new file mode 100644
index 0000000..5fd493a
--- /dev/null
+++ b/hi-ui/src/routes/(app)/ch/[channel]/+page.js
@@ -0,0 +1,13 @@
+export const ssr = false;
+
+import { activeChannel } from '$lib/store';
+
+
+/** @type {import('./$types').PageLoad} */
+export function load({ params }) {
+  let { channel } = params;
+  activeChannel.update((value) => {
+    value.set(channel)
+    return value;
+  });
+}
diff --git a/hi-ui/src/routes/(app)/ch/[channel]/+page.svelte b/hi-ui/src/routes/(app)/ch/[channel]/+page.svelte
new file mode 100644
index 0000000..26b493e
--- /dev/null
+++ b/hi-ui/src/routes/(app)/ch/[channel]/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+    import ActiveChannel from '$lib/components/ActiveChannel.svelte';
+</script>
+
+<ActiveChannel />
diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte
index 28ae4ec..8027443 100644
--- a/hi-ui/src/routes/+layout.svelte
+++ b/hi-ui/src/routes/+layout.svelte
@@ -2,8 +2,8 @@
   import { AppBar } from '@skeletonlabs/skeleton';
   import "../app.css";
 
-  import { currentUser } from '../store';
-  import LogOut from '../lib/LogOut.svelte';
+  import { currentUser } from '$lib/store';
+  import LogOut from '$lib/components/LogOut.svelte';
 </script>
 
 <div id="app">