17 files changed, 45 insertions, 34 deletions
diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/lib/apiServer.js
index 7206195..f6d6148 100644
--- a/hi-ui/src/apiServer.js
+++ b/hi-ui/src/lib/apiServer.js
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { activeChannel, channelsList, logins, messages } from './store';
+import { activeChannel, channelsList, logins, messages } from '$lib/store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/components/ActiveChannel.svelte
index d2d92fb..978e952 100644
--- a/hi-ui/src/lib/ActiveChannel.svelte
+++ b/hi-ui/src/lib/components/ActiveChannel.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { activeChannel, messages } from '../store';
+    import { activeChannel, messages } from '$lib/store';
     import Message from './Message.svelte';
 
     let container;
diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/components/Channel.svelte
index 9922af6..97fea1f 100644
--- a/hi-ui/src/lib/Channel.svelte
+++ b/hi-ui/src/lib/components/Channel.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { activeChannel } from '../store';
+    import { activeChannel } from '$lib/store';
 
     export let id;
     export let name;
@@ -8,18 +8,13 @@
     activeChannel.subscribe((value) => {
         active = value.is(id);
     });
-
-    function activate() {
-        activeChannel.update((value) => value.set(id));
-    }
 </script>
 
 <li
     class="rounded-full"
     class:bg-slate-400={active}
-    on:click={activate}
 >
-<a href="">
+<a href="/ch/{id}">
     <span class="badge bg-primary-500">#</span>
     <span class="flex-auto">{name}</span>
 </a>
diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/components/ChannelList.svelte
index 80d903e..e0e5f06 100644
--- a/hi-ui/src/lib/ChannelList.svelte
+++ b/hi-ui/src/lib/components/ChannelList.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { channelsList } from '../store';
+    import { channelsList } from '$lib/store';
     import Channel from './Channel.svelte';
 
     let channels;
diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/components/CreateChannelForm.svelte
index 8910b4d..ddcf486 100644
--- a/hi-ui/src/lib/CreateChannelForm.svelte
+++ b/hi-ui/src/lib/components/CreateChannelForm.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { createChannel } from '../apiServer';
+    import { createChannel } from '$lib/apiServer';
 
     let name = '';
     let disabled = false;
diff --git a/hi-ui/src/lib/LogIn.svelte b/hi-ui/src/lib/components/LogIn.svelte
index 4ffcdab..2836e6d 100644
--- a/hi-ui/src/lib/LogIn.svelte
+++ b/hi-ui/src/lib/components/LogIn.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { logIn } from '../apiServer';
-    import { currentUser } from '../store';
+    import { logIn } from '$lib/apiServer';
+    import { currentUser } from '$lib/store';
 
     let disabled = false;
     let username = '';
diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/components/LogOut.svelte
index 0f0bb13..01bef1b 100644
--- a/hi-ui/src/lib/LogOut.svelte
+++ b/hi-ui/src/lib/components/LogOut.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { logOut} from '../apiServer';
-    import { currentUser } from '../store';
+    import { logOut} from '$lib/apiServer';
+    import { currentUser } from '$lib/store';
 
     async function handleLogout(event) {
         const response = await logOut();
diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/components/Message.svelte
index d10bee3..d040433 100644
--- a/hi-ui/src/lib/Message.svelte
+++ b/hi-ui/src/lib/components/Message.svelte
@@ -1,7 +1,7 @@
 <script>
     import SvelteMarkdown from 'svelte-markdown';
-    import { currentUser, logins } from '../store';
-    import { deleteMessage } from '../apiServer';
+    import { currentUser, logins } from '$lib/store';
+    import { deleteMessage } from '$lib/apiServer';
 
     export let at;  // XXX: Omitted for now.
     export let sender;
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/components/MessageInput.svelte
index 2e81ee2..b33574b 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/components/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script>
     import { tick } from 'svelte';
-    import { postToChannel } from '../apiServer';
-    import { activeChannel } from '../store';
+    import { postToChannel } from '$lib/apiServer';
+    import { activeChannel } from '$lib/store';
 
     let input;
     let value;
diff --git a/hi-ui/src/store.js b/hi-ui/src/lib/store.js
index 1b3dfca..b964b4b 100644
--- a/hi-ui/src/store.js
+++ b/hi-ui/src/lib/store.js
@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
-import { ActiveChannel, Channels } from './store/channels';
-import { Messages } from './store/messages';
-import { Logins } from './store/logins';
+import { ActiveChannel, Channels } from '$lib/store/channels';
+import { Messages } from '$lib/store/messages';
+import { Logins } from '$lib/store/logins';
 
 export const currentUser = writable(null);
 export const activeChannel = writable(new ActiveChannel());
diff --git a/hi-ui/src/store/channels.js b/hi-ui/src/lib/store/channels.js
index bb6c86c..bb6c86c 100644
--- a/hi-ui/src/store/channels.js
+++ b/hi-ui/src/lib/store/channels.js
diff --git a/hi-ui/src/store/logins.js b/hi-ui/src/lib/store/logins.js
index 5b45206..5b45206 100644
--- a/hi-ui/src/store/logins.js
+++ b/hi-ui/src/lib/store/logins.js
diff --git a/hi-ui/src/store/messages.js b/hi-ui/src/lib/store/messages.js
index 931b8fb..931b8fb 100644
--- a/hi-ui/src/store/messages.js
+++ b/hi-ui/src/lib/store/messages.js
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 />