4 files changed, 28 insertions, 12 deletions
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/(app)/+layout.svelte
index dd5f2f7..ae6195d 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, logins, channelsList, messages } from '../store';
+	import { boot, subscribeToEvents } from '$lib/apiServer';
+	import { currentUser, logins, 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;
@@ -58,7 +57,7 @@
             <ChannelList />
         </div>
         <div class="active-channel">
-            <ActiveChannel />
+            <slot />
         </div>
         <div class="create-channel">
             <CreateChannelForm />
@@ -73,7 +72,7 @@
 
 <style>
     #interface {
-        height: 89vh;
+        height: 88vh;
         margin: 1rem;
         display: grid;
         grid-template-columns: 18rem auto;
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.svelte b/hi-ui/src/routes/(app)/ch/[channel]/+page.svelte
new file mode 100644
index 0000000..ef439d0
--- /dev/null
+++ b/hi-ui/src/routes/(app)/ch/[channel]/+page.svelte
@@ -0,0 +1,17 @@
+<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;
+        });
+    });
+</script>
+
+<ActiveChannel />
diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte
index 28ae4ec..7b99d62 100644
--- a/hi-ui/src/routes/+layout.svelte
+++ b/hi-ui/src/routes/+layout.svelte
@@ -2,14 +2,14 @@
   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">
     <AppBar>
         <svelte:fragment slot="lead">🌳</svelte:fragment>
-        understory
+            <a href="/">understory</a>
         <svelte:fragment slot="trail">
             {#if $currentUser}
                 <LogOut />