From bd53a51af835478d23bef4772ce7e50553dc3fdf Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 9 Oct 2024 15:32:52 -0400
Subject: Move a lot of things around

---
 hi-ui/src/apiServer.js                            | 76 ------------------
 hi-ui/src/lib/ActiveChannel.svelte                | 27 -------
 hi-ui/src/lib/Channel.svelte                      | 26 ------
 hi-ui/src/lib/ChannelList.svelte                  | 18 -----
 hi-ui/src/lib/CreateChannelForm.svelte            | 23 ------
 hi-ui/src/lib/LogIn.svelte                        | 35 ---------
 hi-ui/src/lib/LogOut.svelte                       | 22 ------
 hi-ui/src/lib/Message.svelte                      | 31 --------
 hi-ui/src/lib/MessageInput.svelte                 | 30 -------
 hi-ui/src/lib/apiServer.js                        | 76 ++++++++++++++++++
 hi-ui/src/lib/components/ActiveChannel.svelte     | 27 +++++++
 hi-ui/src/lib/components/Channel.svelte           | 21 +++++
 hi-ui/src/lib/components/ChannelList.svelte       | 18 +++++
 hi-ui/src/lib/components/CreateChannelForm.svelte | 23 ++++++
 hi-ui/src/lib/components/LogIn.svelte             | 35 +++++++++
 hi-ui/src/lib/components/LogOut.svelte            | 22 ++++++
 hi-ui/src/lib/components/Message.svelte           | 31 ++++++++
 hi-ui/src/lib/components/MessageInput.svelte      | 30 +++++++
 hi-ui/src/lib/store.js                            |  8 ++
 hi-ui/src/lib/store/channels.js                   | 71 +++++++++++++++++
 hi-ui/src/lib/store/messages.js                   | 41 ++++++++++
 hi-ui/src/routes/(app)/+layout.svelte             | 95 ++++++++++++++++++++++
 hi-ui/src/routes/(app)/+page.svelte               |  0
 hi-ui/src/routes/(app)/ch/[channel]/+page.js      | 13 +++
 hi-ui/src/routes/(app)/ch/[channel]/+page.svelte  |  5 ++
 hi-ui/src/routes/+layout.svelte                   |  4 +-
 hi-ui/src/routes/+page.svelte                     | 96 -----------------------
 hi-ui/src/store.js                                |  8 --
 hi-ui/src/store/channels.js                       | 71 -----------------
 hi-ui/src/store/messages.js                       | 41 ----------
 30 files changed, 518 insertions(+), 506 deletions(-)
 delete mode 100644 hi-ui/src/apiServer.js
 delete mode 100644 hi-ui/src/lib/ActiveChannel.svelte
 delete mode 100644 hi-ui/src/lib/Channel.svelte
 delete mode 100644 hi-ui/src/lib/ChannelList.svelte
 delete mode 100644 hi-ui/src/lib/CreateChannelForm.svelte
 delete mode 100644 hi-ui/src/lib/LogIn.svelte
 delete mode 100644 hi-ui/src/lib/LogOut.svelte
 delete mode 100644 hi-ui/src/lib/Message.svelte
 delete mode 100644 hi-ui/src/lib/MessageInput.svelte
 create mode 100644 hi-ui/src/lib/apiServer.js
 create mode 100644 hi-ui/src/lib/components/ActiveChannel.svelte
 create mode 100644 hi-ui/src/lib/components/Channel.svelte
 create mode 100644 hi-ui/src/lib/components/ChannelList.svelte
 create mode 100644 hi-ui/src/lib/components/CreateChannelForm.svelte
 create mode 100644 hi-ui/src/lib/components/LogIn.svelte
 create mode 100644 hi-ui/src/lib/components/LogOut.svelte
 create mode 100644 hi-ui/src/lib/components/Message.svelte
 create mode 100644 hi-ui/src/lib/components/MessageInput.svelte
 create mode 100644 hi-ui/src/lib/store.js
 create mode 100644 hi-ui/src/lib/store/channels.js
 create mode 100644 hi-ui/src/lib/store/messages.js
 create mode 100644 hi-ui/src/routes/(app)/+layout.svelte
 create mode 100644 hi-ui/src/routes/(app)/+page.svelte
 create mode 100644 hi-ui/src/routes/(app)/ch/[channel]/+page.js
 create mode 100644 hi-ui/src/routes/(app)/ch/[channel]/+page.svelte
 delete mode 100644 hi-ui/src/routes/+page.svelte
 delete mode 100644 hi-ui/src/store.js
 delete mode 100644 hi-ui/src/store/channels.js
 delete mode 100644 hi-ui/src/store/messages.js

(limited to 'hi-ui/src')

diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/apiServer.js
deleted file mode 100644
index f4a89a4..0000000
--- a/hi-ui/src/apiServer.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import axios from 'axios';
-import { activeChannel, channelsList, messages } from './store';
-
-export const apiServer = axios.create({
-  baseURL: '/api/',
-});
-
-export async function boot() {
-  return apiServer.get('/boot');
-}
-
-export async function logIn(username, password) {
-  const data = {
-    name: username,
-    password,
-  };
-  return apiServer.post('/auth/login', data);
-}
-
-export async function logOut() {
-  return apiServer.post('/auth/logout', {});
-}
-
-export async function createChannel(name) {
-  return apiServer.post('/channels', { name });
-}
-
-export async function postToChannel(channelId, message) {
-  return apiServer.post(`/channels/${channelId}`, { message });
-}
-
-export async function deleteMessage(messageId) {
-  // TODO
-}
-
-export function subscribeToEvents(resume_point) {
-  const eventsUrl = new URL('/api/events', window.location);
-  eventsUrl.searchParams.append('resume_point', resume_point);
-  const evtSource = new EventSource(eventsUrl.toString());
-  // TODO: this should process all incoming events and store them.
-  // TODO: eventually we'll need to handle expiring old info, so as not to use
-  //       infinite browser memory.
-  /*
-   * Known message types as of now:
-   * - created: a channel is created.
-   *   - action: ignore.
-   * - message: a message is created.
-   *   - action: display message in channel.
-   * - message_deleted: a message is deleted.
-   *   - action: replace message with <...>.
-   * - deleted: a channel is deleted.
-   *   - action: remove channel from sidebar.
-  */
-  evtSource.onmessage = (evt) => {
-    const data = JSON.parse(evt.data);
-
-    switch (data.type) {
-      case 'created':
-        channelsList.update((value) => value.addChannel(data.channel))
-        break;
-      case 'message':
-        messages.update((value) => value.addMessage(data));
-        break;
-      case 'message_deleted':
-        messages.update((value) => value.deleteMessage(data.channel.id, data.message));
-        break;
-      case 'deleted':
-        activeChannel.update((value) => value.deleteChannel(data.channel));
-        channelsList.update((value) => value.deleteChannel(data.channel));
-        messages.update((value) => value.deleteChannel(data.channel));
-        break;
-      default:
-        break;
-    }
-  }
-}
diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte
deleted file mode 100644
index d2d92fb..0000000
--- a/hi-ui/src/lib/ActiveChannel.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-    import { activeChannel, messages } from '../store';
-    import Message from './Message.svelte';
-
-    let container;
-    $: messageList = $activeChannel.isSet() ? $messages.inChannel($activeChannel.get()) : [];
-
-    // TODO: eventually, store scroll height/last unread in channel? scroll there?
-
-    let scroll = (message) => {
-        message.scrollIntoView();
-    }
-</script>
-
-<div class="container" bind:this={container}>
-    {#each messageList as message}
-        <div use:scroll>
-            <Message {...message} />
-        </div>
-    {/each}
-</div>
-
-<style>
-    .container {
-        overflow: scroll;
-    }
-</style>
diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte
deleted file mode 100644
index 9922af6..0000000
--- a/hi-ui/src/lib/Channel.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-    import { activeChannel } from '../store';
-
-    export let id;
-    export let name;
-    let active = false;
-
-    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="">
-    <span class="badge bg-primary-500">#</span>
-    <span class="flex-auto">{name}</span>
-</a>
-</li>
diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/ChannelList.svelte
deleted file mode 100644
index 80d903e..0000000
--- a/hi-ui/src/lib/ChannelList.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-    import { channelsList } from '../store';
-    import Channel from './Channel.svelte';
-
-    let channels;
-
-    channelsList.subscribe((value) => {
-        channels = value.channels;
-    });
-</script>
-
-<nav class="list-nav">
-    <ul>
-        {#each channels as channel}
-            <Channel {...channel} />
-        {/each}
-    </ul>
-</nav>
diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte
deleted file mode 100644
index 8910b4d..0000000
--- a/hi-ui/src/lib/CreateChannelForm.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-    import { createChannel } from '../apiServer';
-
-    let name = '';
-    let disabled = false;
-
-    async function handleSubmit(event) {
-        disabled = true;
-        const response = await createChannel(name);
-        if (200 <= response.status && response.status < 300) {
-            name = '';
-        }
-        disabled = false;
-    }
-</script>
-
-<form on:submit|preventDefault={handleSubmit} class="form form-row flex-nowrap">
-    <input type="text" placeholder="create channel" bind:value={name} disabled={disabled} class="input flex-auto h-6 w-9/12" />
-    <button type="submit" class="flex-none w-6 h-6">&#x2795;</button>
-</form>
-
-<style>
-</style>
diff --git a/hi-ui/src/lib/LogIn.svelte b/hi-ui/src/lib/LogIn.svelte
deleted file mode 100644
index 4ffcdab..0000000
--- a/hi-ui/src/lib/LogIn.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-    import { logIn } from '../apiServer';
-    import { currentUser } from '../store';
-
-    let disabled = false;
-    let username = '';
-    let password = '';
-
-    async function handleLogin(event) {
-        disabled = true;
-        const response = await logIn(username, password);
-        if (200 <= response.status && response.status < 300) {
-            currentUser.update(() => ({ username }));
-            username = '';
-            password = '';
-        }
-        disabled = false;
-    }
-</script>
-
-<div class="card m-4 p-4">
-    <form on:submit|preventDefault={handleLogin}>
-        <label class="label" for="username">
-            username
-            <input class="input" name="username" type="text" placeholder="username" bind:value={username} disabled={disabled}>
-        </label>
-        <label class="label" for="password">
-            password
-            <input class="input" name="password" type="password" placeholder="password" bind:value={password} disabled={disabled}>
-        </label>
-        <button class="btn variant-filled" type="submit">
-            sign in or up
-        </button>
-    </form>
-</div>
diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/LogOut.svelte
deleted file mode 100644
index 0f0bb13..0000000
--- a/hi-ui/src/lib/LogOut.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script>
-    import { logOut} from '../apiServer';
-    import { currentUser } from '../store';
-
-    async function handleLogout(event) {
-        const response = await logOut();
-        if (200 <= response.status && response.status < 300) {
-            currentUser.update(() => null);
-        }
-    }
-</script>
-
-<form on:submit|preventDefault={handleLogout}>
-    @{$currentUser.username}
-    <button
-        class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
-        type="submit"
-    >log out</button>
-</form>
-
-<style>
-</style>
diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte
deleted file mode 100644
index efc6641..0000000
--- a/hi-ui/src/lib/Message.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-    import SvelteMarkdown from 'svelte-markdown';
-    import { currentUser } from '../store';
-    import { deleteMessage } from '../apiServer';
-
-    export let at;  // XXX: Omitted for now.
-    export let sender;
-    export let message;
-
-    let timestamp = new Date(at).toTimeString();
-</script>
-
-<div class="card card-hover m-4 relative">
-    <span class="chip variant-soft sticky top-o left-0">
-        <!-- TODO: should this show up for only the first of a run? -->
-        @{sender.name}:
-    </span>
-    <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
-    <section class="p-4">
-        <SvelteMarkdown source={message.body} />
-    </section>
-</div>
-
-<style>
-    .card .timestamp {
-        display: none;
-    }
-    .card:hover .timestamp {
-        display: flex;
-    }
-</style>
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
deleted file mode 100644
index 2e81ee2..0000000
--- a/hi-ui/src/lib/MessageInput.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-    import { tick } from 'svelte';
-    import { postToChannel } from '../apiServer';
-    import { activeChannel } from '../store';
-
-    let input;
-    let value;
-    let disabled;
-    activeChannel.subscribe((value) => {
-        disabled = !value.isSet();
-        if (input && !disabled) {
-            input.focus();
-        }
-    });
-
-    async function handleSubmit(event) {
-        disabled = true;
-        // TODO try/catch:
-        await postToChannel($activeChannel.get(), value);
-        value = '';
-        disabled = false;
-        await tick();
-        input.focus();
-    }
-</script>
-
-<form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
-    <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
-    <button color="primary variant-filled-secondary" type="submit" class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button>
-</form>
diff --git a/hi-ui/src/lib/apiServer.js b/hi-ui/src/lib/apiServer.js
new file mode 100644
index 0000000..9a51715
--- /dev/null
+++ b/hi-ui/src/lib/apiServer.js
@@ -0,0 +1,76 @@
+import axios from 'axios';
+import { activeChannel, channelsList, messages } from '$lib/store';
+
+export const apiServer = axios.create({
+  baseURL: '/api/',
+});
+
+export async function boot() {
+  return apiServer.get('/boot');
+}
+
+export async function logIn(username, password) {
+  const data = {
+    name: username,
+    password,
+  };
+  return apiServer.post('/auth/login', data);
+}
+
+export async function logOut() {
+  return apiServer.post('/auth/logout', {});
+}
+
+export async function createChannel(name) {
+  return apiServer.post('/channels', { name });
+}
+
+export async function postToChannel(channelId, message) {
+  return apiServer.post(`/channels/${channelId}`, { message });
+}
+
+export async function deleteMessage(messageId) {
+  // TODO
+}
+
+export function subscribeToEvents(resume_point) {
+  const eventsUrl = new URL('/api/events', window.location);
+  eventsUrl.searchParams.append('resume_point', resume_point);
+  const evtSource = new EventSource(eventsUrl.toString());
+  // TODO: this should process all incoming events and store them.
+  // TODO: eventually we'll need to handle expiring old info, so as not to use
+  //       infinite browser memory.
+  /*
+   * Known message types as of now:
+   * - created: a channel is created.
+   *   - action: ignore.
+   * - message: a message is created.
+   *   - action: display message in channel.
+   * - message_deleted: a message is deleted.
+   *   - action: replace message with <...>.
+   * - deleted: a channel is deleted.
+   *   - action: remove channel from sidebar.
+  */
+  evtSource.onmessage = (evt) => {
+    const data = JSON.parse(evt.data);
+
+    switch (data.type) {
+      case 'created':
+        channelsList.update((value) => value.addChannel(data.channel))
+        break;
+      case 'message':
+        messages.update((value) => value.addMessage(data));
+        break;
+      case 'message_deleted':
+        messages.update((value) => value.deleteMessage(data.channel.id, data.message));
+        break;
+      case 'deleted':
+        activeChannel.update((value) => value.deleteChannel(data.channel));
+        channelsList.update((value) => value.deleteChannel(data.channel));
+        messages.update((value) => value.deleteChannel(data.channel));
+        break;
+      default:
+        break;
+    }
+  }
+}
diff --git a/hi-ui/src/lib/components/ActiveChannel.svelte b/hi-ui/src/lib/components/ActiveChannel.svelte
new file mode 100644
index 0000000..978e952
--- /dev/null
+++ b/hi-ui/src/lib/components/ActiveChannel.svelte
@@ -0,0 +1,27 @@
+<script>
+    import { activeChannel, messages } from '$lib/store';
+    import Message from './Message.svelte';
+
+    let container;
+    $: messageList = $activeChannel.isSet() ? $messages.inChannel($activeChannel.get()) : [];
+
+    // TODO: eventually, store scroll height/last unread in channel? scroll there?
+
+    let scroll = (message) => {
+        message.scrollIntoView();
+    }
+</script>
+
+<div class="container" bind:this={container}>
+    {#each messageList as message}
+        <div use:scroll>
+            <Message {...message} />
+        </div>
+    {/each}
+</div>
+
+<style>
+    .container {
+        overflow: scroll;
+    }
+</style>
diff --git a/hi-ui/src/lib/components/Channel.svelte b/hi-ui/src/lib/components/Channel.svelte
new file mode 100644
index 0000000..97fea1f
--- /dev/null
+++ b/hi-ui/src/lib/components/Channel.svelte
@@ -0,0 +1,21 @@
+<script>
+    import { activeChannel } from '$lib/store';
+
+    export let id;
+    export let name;
+    let active = false;
+
+    activeChannel.subscribe((value) => {
+        active = value.is(id);
+    });
+</script>
+
+<li
+    class="rounded-full"
+    class:bg-slate-400={active}
+>
+<a href="/ch/{id}">
+    <span class="badge bg-primary-500">#</span>
+    <span class="flex-auto">{name}</span>
+</a>
+</li>
diff --git a/hi-ui/src/lib/components/ChannelList.svelte b/hi-ui/src/lib/components/ChannelList.svelte
new file mode 100644
index 0000000..e0e5f06
--- /dev/null
+++ b/hi-ui/src/lib/components/ChannelList.svelte
@@ -0,0 +1,18 @@
+<script>
+    import { channelsList } from '$lib/store';
+    import Channel from './Channel.svelte';
+
+    let channels;
+
+    channelsList.subscribe((value) => {
+        channels = value.channels;
+    });
+</script>
+
+<nav class="list-nav">
+    <ul>
+        {#each channels as channel}
+            <Channel {...channel} />
+        {/each}
+    </ul>
+</nav>
diff --git a/hi-ui/src/lib/components/CreateChannelForm.svelte b/hi-ui/src/lib/components/CreateChannelForm.svelte
new file mode 100644
index 0000000..ddcf486
--- /dev/null
+++ b/hi-ui/src/lib/components/CreateChannelForm.svelte
@@ -0,0 +1,23 @@
+<script>
+    import { createChannel } from '$lib/apiServer';
+
+    let name = '';
+    let disabled = false;
+
+    async function handleSubmit(event) {
+        disabled = true;
+        const response = await createChannel(name);
+        if (200 <= response.status && response.status < 300) {
+            name = '';
+        }
+        disabled = false;
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit} class="form form-row flex-nowrap">
+    <input type="text" placeholder="create channel" bind:value={name} disabled={disabled} class="input flex-auto h-6 w-9/12" />
+    <button type="submit" class="flex-none w-6 h-6">&#x2795;</button>
+</form>
+
+<style>
+</style>
diff --git a/hi-ui/src/lib/components/LogIn.svelte b/hi-ui/src/lib/components/LogIn.svelte
new file mode 100644
index 0000000..2836e6d
--- /dev/null
+++ b/hi-ui/src/lib/components/LogIn.svelte
@@ -0,0 +1,35 @@
+<script>
+    import { logIn } from '$lib/apiServer';
+    import { currentUser } from '$lib/store';
+
+    let disabled = false;
+    let username = '';
+    let password = '';
+
+    async function handleLogin(event) {
+        disabled = true;
+        const response = await logIn(username, password);
+        if (200 <= response.status && response.status < 300) {
+            currentUser.update(() => ({ username }));
+            username = '';
+            password = '';
+        }
+        disabled = false;
+    }
+</script>
+
+<div class="card m-4 p-4">
+    <form on:submit|preventDefault={handleLogin}>
+        <label class="label" for="username">
+            username
+            <input class="input" name="username" type="text" placeholder="username" bind:value={username} disabled={disabled}>
+        </label>
+        <label class="label" for="password">
+            password
+            <input class="input" name="password" type="password" placeholder="password" bind:value={password} disabled={disabled}>
+        </label>
+        <button class="btn variant-filled" type="submit">
+            sign in or up
+        </button>
+    </form>
+</div>
diff --git a/hi-ui/src/lib/components/LogOut.svelte b/hi-ui/src/lib/components/LogOut.svelte
new file mode 100644
index 0000000..01bef1b
--- /dev/null
+++ b/hi-ui/src/lib/components/LogOut.svelte
@@ -0,0 +1,22 @@
+<script>
+    import { logOut} from '$lib/apiServer';
+    import { currentUser } from '$lib/store';
+
+    async function handleLogout(event) {
+        const response = await logOut();
+        if (200 <= response.status && response.status < 300) {
+            currentUser.update(() => null);
+        }
+    }
+</script>
+
+<form on:submit|preventDefault={handleLogout}>
+    @{$currentUser.username}
+    <button
+        class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+        type="submit"
+    >log out</button>
+</form>
+
+<style>
+</style>
diff --git a/hi-ui/src/lib/components/Message.svelte b/hi-ui/src/lib/components/Message.svelte
new file mode 100644
index 0000000..5b51492
--- /dev/null
+++ b/hi-ui/src/lib/components/Message.svelte
@@ -0,0 +1,31 @@
+<script>
+    import SvelteMarkdown from 'svelte-markdown';
+    import { currentUser } from '$lib/store';
+    import { deleteMessage } from '$lib/apiServer';
+
+    export let at;  // XXX: Omitted for now.
+    export let sender;
+    export let message;
+
+    let timestamp = new Date(at).toTimeString();
+</script>
+
+<div class="card card-hover m-4 relative">
+    <span class="chip variant-soft sticky top-o left-0">
+        <!-- TODO: should this show up for only the first of a run? -->
+        @{sender.name}:
+    </span>
+    <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
+    <section class="p-4">
+        <SvelteMarkdown source={message.body} />
+    </section>
+</div>
+
+<style>
+    .card .timestamp {
+        display: none;
+    }
+    .card:hover .timestamp {
+        display: flex;
+    }
+</style>
diff --git a/hi-ui/src/lib/components/MessageInput.svelte b/hi-ui/src/lib/components/MessageInput.svelte
new file mode 100644
index 0000000..b33574b
--- /dev/null
+++ b/hi-ui/src/lib/components/MessageInput.svelte
@@ -0,0 +1,30 @@
+<script>
+    import { tick } from 'svelte';
+    import { postToChannel } from '$lib/apiServer';
+    import { activeChannel } from '$lib/store';
+
+    let input;
+    let value;
+    let disabled;
+    activeChannel.subscribe((value) => {
+        disabled = !value.isSet();
+        if (input && !disabled) {
+            input.focus();
+        }
+    });
+
+    async function handleSubmit(event) {
+        disabled = true;
+        // TODO try/catch:
+        await postToChannel($activeChannel.get(), value);
+        value = '';
+        disabled = false;
+        await tick();
+        input.focus();
+    }
+</script>
+
+<form on:submit|preventDefault={handleSubmit} class="flex flex-row flex-nowrap">
+    <input bind:this={input} bind:value={value} disabled={disabled} type="search" class="flex-auto h-6 input rounded-r-none" />
+    <button color="primary variant-filled-secondary" type="submit" class="flex-none w-6 h-6 btn-icon variant-filled rounded-l-none">&raquo;</button>
+</form>
diff --git a/hi-ui/src/lib/store.js b/hi-ui/src/lib/store.js
new file mode 100644
index 0000000..5e28195
--- /dev/null
+++ b/hi-ui/src/lib/store.js
@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+import { ActiveChannel, Channels } from '$lib/store/channels';
+import { Messages } from '$lib/store/messages';
+
+export const currentUser = writable(null);
+export const activeChannel = writable(new ActiveChannel());
+export const channelsList = writable(new Channels());
+export const messages = writable(new Messages());
diff --git a/hi-ui/src/lib/store/channels.js b/hi-ui/src/lib/store/channels.js
new file mode 100644
index 0000000..20702cc
--- /dev/null
+++ b/hi-ui/src/lib/store/channels.js
@@ -0,0 +1,71 @@
+export class Channels {
+	constructor() {
+		this.channels = [];
+	}
+
+	setChannels(channels) {
+		this.channels = [...channels];
+		this.sort();
+		return this;
+	}
+
+	addChannel(channel) {
+		this.channels = [...this.channels, channel];
+		this.sort();
+		return this;
+	}
+
+	deleteChannel(id) {
+		const channelIndex = this.channels.map((e) => e.id).indexOf(id);
+		if (channelIndex !== -1) {
+			this.channels.splice(channelIndex, 1);
+		}
+		return this;
+	}
+
+	sort() {
+		this.channels.sort((a, b) => {
+			if (a.name < b.name) {
+				return -1;
+			} else if (a.name > b.name) {
+				return 1;
+			}
+			return 0;
+		});
+	}
+}
+
+export class ActiveChannel {
+	constructor() {
+		this.channel = null;
+	}
+
+	isSet() {
+		return this.channel !== null;
+	}
+
+	get() {
+		return this.channel;
+	}
+
+	is(id) {
+		return this.channel === id;
+	}
+
+	set(id) {
+		this.channel = id;
+		return this;
+	}
+
+	deleteChannel(id) {
+		if (this.is(id)) {
+			return this.clear();
+		}
+		return this;
+	}
+
+	clear() {
+		this.channel = null;
+		return this;
+	}
+}
diff --git a/hi-ui/src/lib/store/messages.js b/hi-ui/src/lib/store/messages.js
new file mode 100644
index 0000000..560b9e1
--- /dev/null
+++ b/hi-ui/src/lib/store/messages.js
@@ -0,0 +1,41 @@
+export class Messages {
+	constructor() {
+		this.channels = {};
+	}
+
+	inChannel(channel) {
+		return this.channels[channel] || [];
+	}
+
+	addMessage(message) {
+		let {
+			channel,
+			...payload
+		} = message;
+		let channel_id = channel.id;
+		this.updateChannel(channel_id, (messages) => [...messages, payload]);
+		return this;
+	}
+
+	addMessages(channel, payloads) {
+		this.updateChannel(channel, (messages) => [...messages, ...payloads]);
+		return this;
+	}
+
+
+	deleteMessage(channel, message) {
+		let messages = this.messages(channel).filter((msg) => msg.message.id != message);
+		this.channels[channel] = messages;
+	}
+
+	deleteChannel(id) {
+		delete this.channels[id];
+		return this;
+	}
+
+	updateChannel(channel, callback) {
+		let messages = callback(this.inChannel(channel));
+		messages.sort((a, b) => a.at - b.at);
+		this.channels[channel] = messages;
+	}
+}
diff --git a/hi-ui/src/routes/(app)/+layout.svelte b/hi-ui/src/routes/(app)/+layout.svelte
new file mode 100644
index 0000000..98d4acf
--- /dev/null
+++ b/hi-ui/src/routes/(app)/+layout.svelte
@@ -0,0 +1,95 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import { boot, subscribeToEvents } from '$lib/apiServer';
+	import { currentUser, channelsList, messages } from '$lib/store';
+
+    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;
+
+    currentUser.subscribe((value) => {
+        user = value;
+    });
+
+    function onBooted(boot) {
+        currentUser.update(() => ({
+            id: boot.login.id,
+            username: boot.login.name,
+        }));
+        let channels = boot.channels.map((channel) => ({
+            id: channel.id,
+            name: channel.name,
+        }));
+        channelsList.update((value) => value.setChannels(channels));
+        let bootMessages = boot.channels.map((channel) => [channel.id, channel.messages]);
+        for (let [channel, channelMessages] of bootMessages) {
+            messages.update((value) => value.addMessages(channel, channelMessages));
+        }
+    }
+
+	onMount(async () => {
+        try {
+            let response = await boot();
+            switch (response.status) {
+                case 200:
+                    onBooted(response.data);
+                    subscribeToEvents(response.data.resume_point);
+                    break;
+                case 401:
+                    currentUser.update(() => null);
+                    break;
+                default:
+                    // TODO: display error.
+                    break;
+            }
+        } catch (_) {
+            // I don't want exceptions on non-200 series responses, dammit.
+        }
+        loading = false;
+	});
+</script>
+
+{#if loading}
+    <h2>Loading&hellip;</h2>
+{:else if user != null}
+    <div id="interface">
+        <div class="channel-list">
+            <ChannelList />
+        </div>
+        <div class="active-channel">
+            <slot />
+        </div>
+        <div class="create-channel">
+            <CreateChannelForm />
+        </div>
+        <div class="create-message">
+            <MessageInput />
+        </div>
+    </div>
+{:else}
+    <LogIn />
+{/if}
+
+<style>
+    #interface {
+        height: 89vh;
+        margin: 1rem;
+        display: grid;
+        grid-template-columns: 18rem auto;
+        grid-template-rows: auto 2rem;
+        grid-gap: 0.25rem;
+    }
+    #interface div {
+        max-height: 100%;
+        overflow: scroll;
+    }
+    #interface .active-channel {
+        border: 1px solid grey;
+        border-radius: 1.25rem;
+    }
+</style>
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
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">
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
deleted file mode 100644
index 932582d..0000000
--- a/hi-ui/src/routes/+page.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-
-	import { boot, subscribeToEvents } from '../apiServer';
-	import { currentUser, channelsList, messages } from '../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';
-
-    let user;
-    let loading = true;
-
-    currentUser.subscribe((value) => {
-        user = value;
-    });
-
-    function onBooted(boot) {
-        currentUser.update(() => ({
-            id: boot.login.id,
-            username: boot.login.name,
-        }));
-        let channels = boot.channels.map((channel) => ({
-            id: channel.id,
-            name: channel.name,
-        }));
-        channelsList.update((value) => value.setChannels(channels));
-        let bootMessages = boot.channels.map((channel) => [channel.id, channel.messages]);
-        for (let [channel, channelMessages] of bootMessages) {
-            messages.update((value) => value.addMessages(channel, channelMessages));
-        }
-    }
-
-	onMount(async () => {
-        try {
-            let response = await boot();
-            switch (response.status) {
-                case 200:
-                    onBooted(response.data);
-                    subscribeToEvents(response.data.resume_point);
-                    break;
-                case 401:
-                    currentUser.update(() => null);
-                    break;
-                default:
-                    // TODO: display error.
-                    break;
-            }
-        } catch (_) {
-            // I don't want exceptions on non-200 series responses, dammit.
-        }
-        loading = false;
-	});
-</script>
-
-{#if loading}
-    <h2>Loading&hellip;</h2>
-{:else if user != null}
-    <div id="interface">
-        <div class="channel-list">
-            <ChannelList />
-        </div>
-        <div class="active-channel">
-            <ActiveChannel />
-        </div>
-        <div class="create-channel">
-            <CreateChannelForm />
-        </div>
-        <div class="create-message">
-            <MessageInput />
-        </div>
-    </div>
-{:else}
-    <LogIn />
-{/if}
-
-<style>
-    #interface {
-        height: 89vh;
-        margin: 1rem;
-        display: grid;
-        grid-template-columns: 18rem auto;
-        grid-template-rows: auto 2rem;
-        grid-gap: 0.25rem;
-    }
-    #interface div {
-        max-height: 100%;
-        overflow: scroll;
-    }
-    #interface .active-channel {
-        border: 1px solid grey;
-        border-radius: 1.25rem;
-    }
-</style>
diff --git a/hi-ui/src/store.js b/hi-ui/src/store.js
deleted file mode 100644
index 4e6b4f1..0000000
--- a/hi-ui/src/store.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { writable } from 'svelte/store';
-import { ActiveChannel, Channels } from './store/channels';
-import { Messages } from './store/messages';
-
-export const currentUser = writable(null);
-export const activeChannel = writable(new ActiveChannel());
-export const channelsList = writable(new Channels());
-export const messages = writable(new Messages());
diff --git a/hi-ui/src/store/channels.js b/hi-ui/src/store/channels.js
deleted file mode 100644
index 20702cc..0000000
--- a/hi-ui/src/store/channels.js
+++ /dev/null
@@ -1,71 +0,0 @@
-export class Channels {
-	constructor() {
-		this.channels = [];
-	}
-
-	setChannels(channels) {
-		this.channels = [...channels];
-		this.sort();
-		return this;
-	}
-
-	addChannel(channel) {
-		this.channels = [...this.channels, channel];
-		this.sort();
-		return this;
-	}
-
-	deleteChannel(id) {
-		const channelIndex = this.channels.map((e) => e.id).indexOf(id);
-		if (channelIndex !== -1) {
-			this.channels.splice(channelIndex, 1);
-		}
-		return this;
-	}
-
-	sort() {
-		this.channels.sort((a, b) => {
-			if (a.name < b.name) {
-				return -1;
-			} else if (a.name > b.name) {
-				return 1;
-			}
-			return 0;
-		});
-	}
-}
-
-export class ActiveChannel {
-	constructor() {
-		this.channel = null;
-	}
-
-	isSet() {
-		return this.channel !== null;
-	}
-
-	get() {
-		return this.channel;
-	}
-
-	is(id) {
-		return this.channel === id;
-	}
-
-	set(id) {
-		this.channel = id;
-		return this;
-	}
-
-	deleteChannel(id) {
-		if (this.is(id)) {
-			return this.clear();
-		}
-		return this;
-	}
-
-	clear() {
-		this.channel = null;
-		return this;
-	}
-}
diff --git a/hi-ui/src/store/messages.js b/hi-ui/src/store/messages.js
deleted file mode 100644
index 560b9e1..0000000
--- a/hi-ui/src/store/messages.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export class Messages {
-	constructor() {
-		this.channels = {};
-	}
-
-	inChannel(channel) {
-		return this.channels[channel] || [];
-	}
-
-	addMessage(message) {
-		let {
-			channel,
-			...payload
-		} = message;
-		let channel_id = channel.id;
-		this.updateChannel(channel_id, (messages) => [...messages, payload]);
-		return this;
-	}
-
-	addMessages(channel, payloads) {
-		this.updateChannel(channel, (messages) => [...messages, ...payloads]);
-		return this;
-	}
-
-
-	deleteMessage(channel, message) {
-		let messages = this.messages(channel).filter((msg) => msg.message.id != message);
-		this.channels[channel] = messages;
-	}
-
-	deleteChannel(id) {
-		delete this.channels[id];
-		return this;
-	}
-
-	updateChannel(channel, callback) {
-		let messages = callback(this.inChannel(channel));
-		messages.sort((a, b) => a.at - b.at);
-		this.channels[channel] = messages;
-	}
-}
-- 
cgit v1.2.3