Add basic browser client

Using Svelte.

No tests, no linting, yet.

This is just starting to get familiar with things.

You'll still have to run the dev server and the dev client builder each
in their own terminals.

Enjoy!

2 files changed, 69 insertions, 0 deletions

diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte
new file mode 100644
index 0000000..e3c6561
--- /dev/null
+++ b/hi-ui/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+  import "../app.css";
+</script>
+
+<div class="container mx-auto">
+    <slot />
+</div>
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
new file mode 100644
index 0000000..4ef26db
--- /dev/null
+++ b/hi-ui/src/routes/+page.svelte
@@ -0,0 +1,62 @@
+<script>
+	import { onMount } from 'svelte';
+
+	import { boot } from '../apiServer';
+	import { currentUser } 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 LogOut from '../lib/LogOut.svelte';
+    import MessageInput from '../lib/MessageInput.svelte';
+
+    let user;
+    let loading = true;
+
+    currentUser.subscribe((value) => {
+        user = value;
+    });
+
+	onMount(async () => {
+        try {
+            let response = await boot();
+            switch (response.status) {
+                case 200:
+                    currentUser.update(() => ({
+                        username: response.data.login.name,
+                    }));
+                    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>
+
+<h1>hi</h1>
+
+{#if loading}
+    <h2>Loading&hellip;</h2>
+{:else if user != null}
+    <LogOut /> @{user.username}
+    <div class="flex flex-row">
+        <div class="basis-1/4 border-solid border-2 border-sky-500">
+            <ChannelList />
+            <CreateChannelForm />
+        </div>
+        <div class="basis-3/4 border-solid border-2 border-sky-500">
+            <ActiveChannel />
+            <MessageInput />
+        </div>
+    </div>
+{:else}
+    <LogIn />
+{/if}