17 files changed, 43 insertions, 31 deletions
diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/lib/apiServer.js
index f4a89a4..9a51715 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, messages } from './store';
+import { activeChannel, channelsList, 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 efc6641..5b51492 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 } from '../store';
-    import { deleteMessage } from '../apiServer';
+    import { currentUser } 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 4e6b4f1..5e28195 100644
--- a/hi-ui/src/store.js
+++ b/hi-ui/src/lib/store.js
@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
-import { ActiveChannel, Channels } from './store/channels';
-import { Messages } from './store/messages';
+import { ActiveChannel, Channels } from '$lib/store/channels';
+import { Messages } from '$lib/store/messages';
 
 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 20702cc..20702cc 100644
--- a/hi-ui/src/store/channels.js
+++ b/hi-ui/src/lib/store/channels.js
diff --git a/hi-ui/src/store/messages.js b/hi-ui/src/lib/store/messages.js
index 560b9e1..560b9e1 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 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">