3 files changed, 62 insertions, 13 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 6339abd..02f7d19 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -5,7 +5,7 @@
   import { getContext, onDestroy, onMount } from 'svelte';
   import TinyGesture from 'tinygesture';
 
-  import { boot, subscribeToEvents } from '$lib/apiServer';
+  import * as api from '$lib/apiServer.js';
   import { channelsList, currentUser, logins, messages, onEvent } from '$lib/store';
 
   import ChannelList from '$lib/components/ChannelList.svelte';
@@ -58,20 +58,20 @@
       return;
     }
     gesture = new TinyGesture(window);
-    gesture.on('swiperight', (event) => {
+    gesture.on('swiperight', () => {
       pageContext.showMenu = true;
     });
-    gesture.on('swipeleft', (event) => {
+    gesture.on('swipeleft', () => {
       pageContext.showMenu = false;
     });
   }
 
   onMount(async () => {
-    let response = await boot();
+    let response = await api.boot();
     switch (response.status) {
       case 200:
         onBooted(response.data);
-        events = subscribeToEvents(response.data.resume_point);
+        events = api.subscribeToEvents(response.data.resume_point);
         events.onmessage = onEvent.fromMessage;
         break;
       case 401:
@@ -109,6 +109,10 @@
     event.returnValue = '';
     return '';
   }
+
+  async function createChannel(name) {
+    await api.createChannel(name);
+  }
 </script>
 
 <svelte:window {onbeforeunload} />
@@ -125,7 +129,7 @@
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
       <ChannelList active={channel} channels={enrichedChannels} />
       <div class="create-channel">
-        <CreateChannelForm />
+        <CreateChannelForm {createChannel} />
       </div>
     </nav>
     <main>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 84cb0ae..8de9859 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -3,10 +3,22 @@
   import { page } from '$app/state';
   import ActiveChannel from '$lib/components/ActiveChannel.svelte';
   import MessageInput from '$lib/components/MessageInput.svelte';
-  import { channelsList, messages } from '$lib/store';
+  import { channelsList, currentUser, logins, messages } from '$lib/store';
+  import * as api from '$lib/apiServer';
 
   let channel = $derived(page.params.channel);
-  let messageRuns = $derived($messages.inChannel(channel));
+  let messageRuns = $derived(
+    $messages.inChannel(channel).map(({ sender, messages }) => {
+      let senderName = $derived($logins.get(sender));
+      let ownMessage = $derived($currentUser !== null && $currentUser.id === sender);
+
+      return {
+        sender: senderName,
+        ownMessage,
+        messages
+      };
+    })
+  );
   let activeChannel;
 
   function inView(parentElement, element) {
@@ -63,13 +75,21 @@
     clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
     lastReadCallback = setTimeout(setLastRead, 2 * 1000);
   }
+
+  async function sendMessage(message) {
+    await api.postToChannel(channel, message);
+  }
+
+  async function deleteMessage(id) {
+    await api.deleteMessage(id);
+  }
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="active-channel" {onscroll} bind:this={activeChannel}>
-  <ActiveChannel {messageRuns} />
+  <ActiveChannel {messageRuns} {deleteMessage} />
 </div>
 <div class="create-message">
-  <MessageInput {channel} />
+  <MessageInput {sendMessage} />
 </div>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 14a9db8..ab214e9 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -2,10 +2,35 @@
   import LogOut from '$lib/components/LogOut.svelte';
   import Invites from '$lib/components/Invites.svelte';
   import ChangePassword from '$lib/components/ChangePassword.svelte';
+
+  import { goto } from '$app/navigation';
+  import * as api from '$lib/apiServer.js';
+  import { currentUser } from '$lib/store';
+
+  let invites = $state([]);
+
+  async function logOut() {
+    const response = await api.logOut();
+    if (200 <= response.status && response.status < 300) {
+      currentUser.set(null);
+      await goto('/login');
+    }
+  }
+
+  async function changePassword(currentPassword, newPassword) {
+    await api.changePassword(currentPassword, newPassword);
+  }
+
+  async function createInvite() {
+    let response = await api.createInvite();
+    if (response.status === 200) {
+      invites.push(response.data);
+    }
+  }
 </script>
 
-<ChangePassword />
+<ChangePassword {changePassword} />
 <hr />
-<Invites />
+<Invites {invites} {createInvite} />
 <hr />
-<LogOut />
+<LogOut {logOut} />