From 1d8b828d1bbe0e0daa64f6fc2689799c7169afa0 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 19 Sep 2024 23:26:39 -0400
Subject: 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!
---
 hi-ui/src/lib/Channel.svelte | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 hi-ui/src/lib/Channel.svelte

(limited to 'hi-ui/src/lib/Channel.svelte')

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>
-- 
cgit v1.2.3


From b892bd9fdba5fe9397f3c4432b3039aa961b7a14 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Fri, 27 Sep 2024 23:08:56 -0400
Subject: Add lots of style and layout

---
 hi-ui/src/lib/Channel.svelte    |  4 ++--
 hi-ui/src/lib/LogOut.svelte     | 12 +++++++++++-
 hi-ui/src/routes/+layout.svelte | 11 ++++++++++-
 hi-ui/src/routes/+page.svelte   | 28 +++++++++++++++++++++++-----
 4 files changed, 46 insertions(+), 9 deletions(-)

(limited to 'hi-ui/src/lib/Channel.svelte')

diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte
index 80c4505..7826c46 100644
--- a/hi-ui/src/lib/Channel.svelte
+++ b/hi-ui/src/lib/Channel.svelte
@@ -15,8 +15,8 @@
 </script>
 
 <li
-    class="cursor-pointer hover:bg-teal-100"
-    class:bg-teal-300={active}
+    class="cursor-pointer hover:bg-slate-300"
+    class:bg-slate-400={active}
     on:click={activate}
 >
     #{name}
diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/LogOut.svelte
index 439a530..64d26c9 100644
--- a/hi-ui/src/lib/LogOut.svelte
+++ b/hi-ui/src/lib/LogOut.svelte
@@ -2,6 +2,12 @@
     import { logOut} from '../apiServer';
     import { currentUser } from '../store';
 
+    let user;
+
+    currentUser.subscribe((value) => {
+        user = value;
+    });
+
     async function handleLogout(event) {
         event.preventDefault();
         const response = await logOut();
@@ -12,7 +18,11 @@
 </script>
 
 <form on:submit={handleLogout}>
-    <button type="submit">log out</button>
+    @{user.username}
+    <button
+        class="border-slate-500 border-solid border-2 font-bold p-1 rounded"
+        type="submit"
+    >log out</button>
 </form>
 
 <style>
diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte
index e3c6561..3673e58 100644
--- a/hi-ui/src/routes/+layout.svelte
+++ b/hi-ui/src/routes/+layout.svelte
@@ -2,6 +2,15 @@
   import "../app.css";
 </script>
 
-<div class="container mx-auto">
+<div id="app">
     <slot />
 </div>
+
+<style>
+    #app {
+        margin: 0;
+        padding: 1rem;
+        height: 100vh;
+        width: 100%;
+    }
+</style>
diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte
index 4ef26db..6025b6f 100644
--- a/hi-ui/src/routes/+page.svelte
+++ b/hi-ui/src/routes/+page.svelte
@@ -46,17 +46,35 @@
 {#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">
+    <LogOut />
+    <div id="interface">
+        <div>
             <ChannelList />
-            <CreateChannelForm />
         </div>
-        <div class="basis-3/4 border-solid border-2 border-sky-500">
+        <div>
             <ActiveChannel />
+        </div>
+        <div>
+            <CreateChannelForm />
+        </div>
+        <div>
             <MessageInput />
         </div>
     </div>
 {:else}
     <LogIn />
 {/if}
+
+<style>
+    #interface {
+        height: 90%;
+        margin: 1rem;
+        display: grid;
+        grid-template-columns: 18rem auto;
+        grid-template-rows: auto 2rem;
+        grid-gap: 0.25rem;
+    }
+    #interface div {
+        border: 1px solid grey;
+    }
+</style>
-- 
cgit v1.2.3