8 files changed, 172 insertions, 0 deletions
diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte
new file mode 100644
index 0000000..42aa53f
--- /dev/null
+++ b/hi-ui/src/lib/ActiveChannel.svelte
@@ -0,0 +1,16 @@
+<script>
+    import { activeChannel } from '../store';
+
+    let channelName;
+
+    activeChannel.subscribe((value) => {
+        channelName = value ? value.name : 'none';
+    });
+</script>
+
+<div>
+    Active channel: {channelName}
+</div>
+
+<style>
+</style>
diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte
new file mode 100644
index 0000000..80c4505
--- /dev/null
+++ b/hi-ui/src/lib/Channel.svelte
@@ -0,0 +1,23 @@
+<script>
+    import { activeChannel } from '../store';
+
+    export let id;
+    export let name;
+    let active = false;
+
+    activeChannel.subscribe((value) => {
+        active = value ? value.id == id : false;
+    });
+
+    function activate() {
+        activeChannel.update(() => ({ id, name }));
+    }
+</script>
+
+<li
+    class="cursor-pointer hover:bg-teal-100"
+    class:bg-teal-300={active}
+    on:click={activate}
+>
+    #{name}
+</li>
diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/ChannelList.svelte
new file mode 100644
index 0000000..9f88e24
--- /dev/null
+++ b/hi-ui/src/lib/ChannelList.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { onMount } from 'svelte';
+
+    import { listChannels } from '../apiServer';
+    import { channelsList } from '../store';
+    import Channel from './Channel.svelte';
+
+    let channels;
+    let loading = true;
+
+    channelsList.subscribe((value) => {
+        channels = value;
+    });
+
+	onMount(async () => {
+        let channels = await listChannels();
+        channelsList.update(() => channels.data);
+        loading = false;
+    });
+</script>
+
+<ul class="select-none">
+    {#if loading}
+        <li><em>loading channels&hellip;</em></li>
+    {:else}
+        {#each channels as channel}
+            <Channel {...channel} />
+        {/each}
+    {/if}
+</ul>
+
+<style>
+</style>
+
diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte
new file mode 100644
index 0000000..584fa61
--- /dev/null
+++ b/hi-ui/src/lib/CreateChannelForm.svelte
@@ -0,0 +1,27 @@
+<script>
+    import { createChannel } from '../apiServer';
+
+    import { channelsList } from '../store';
+
+    let name = '';
+    let disabled = false;
+
+    async function handleSubmit(event) {
+        event.preventDefault();
+        disabled = true;
+        const response = await createChannel(name);
+        if (200 <= response.status && response.status < 300) {
+            channelsList.update((value) => [...value, response.data]);
+            name = '';
+        }
+        disabled = false;
+    }
+</script>
+
+<form on:submit={handleSubmit}>
+    <input type="text" placeholder="channel name" bind:value={name} disabled={disabled} />
+    <button type="submit">create</button>
+</form>
+
+<style>
+</style>
diff --git a/hi-ui/src/lib/LogIn.svelte b/hi-ui/src/lib/LogIn.svelte
new file mode 100644
index 0000000..df734ee
--- /dev/null
+++ b/hi-ui/src/lib/LogIn.svelte
@@ -0,0 +1,40 @@
+<script>
+    import { logIn } from '../apiServer';
+    import { currentUser } from '../store';
+
+    let disabled = false;
+    let username = '';
+    let password = '';
+
+    async function handleLogin(event) {
+        event.preventDefault();
+        disabled = true;
+        const response = await logIn(username, password);
+        if (200 <= response.status && response.status < 300) {
+            currentUser.update(() => ({ username }));
+            username = '';
+            password = '';
+        }
+        disabled = false;
+    }
+</script>
+
+<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" on:submit={handleLogin}>
+    <div class="mb-4">
+        <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
+            username
+        </label>
+        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" name="username" type="text" placeholder="username" bind:value={username} disabled={disabled}>
+    </div>
+    <div class="mb-6">
+        <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
+            password
+        </label>
+        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" name="password" type="password" placeholder="password" bind:value={password} disabled={disabled}>
+    </div>
+    <div class="flex items-center justify-between">
+        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
+            sign in or up
+        </button>
+    </div>
+</form>
diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/LogOut.svelte
new file mode 100644
index 0000000..439a530
--- /dev/null
+++ b/hi-ui/src/lib/LogOut.svelte
@@ -0,0 +1,19 @@
+<script>
+    import { logOut} from '../apiServer';
+    import { currentUser } from '../store';
+
+    async function handleLogout(event) {
+        event.preventDefault();
+        const response = await logOut();
+        if (200 <= response.status && response.status < 300) {
+            currentUser.update(() => null);
+        }
+    }
+</script>
+
+<form on:submit={handleLogout}>
+    <button type="submit">log out</button>
+</form>
+
+<style>
+</style>
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
new file mode 100644
index 0000000..7896da6
--- /dev/null
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -0,0 +1,12 @@
+<script>
+    function handleSubmit(event) {
+        console.log(event);
+    }
+</script>
+
+<form on:submit={handleSubmit}>
+    <button type="submit">➤</button>
+</form>
+
+<style>
+</style>
diff --git a/hi-ui/src/lib/index.js b/hi-ui/src/lib/index.js
new file mode 100644
index 0000000..856f2b6
--- /dev/null
+++ b/hi-ui/src/lib/index.js
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.