6 files changed, 76 insertions, 19 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index 5c6e5ef..3e270fc 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
-import { channelsList, logins, messages } from '$lib/store';
+import { get } from 'svelte/store';
+import { currentUser, channelsList, logins, messages } from '$lib/store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
@@ -115,9 +116,33 @@ function onMessageEvent(data) {
   switch (data.event) {
     case 'sent':
       messages.update((value) => value.addMessage(data.channel, data.id, data.at, data.sender, data.body));
+      displayToast(data); 
       break;
     case 'deleted':
       messages.update((value) => value.deleteMessage(data.id));
       break;
   }
 }
+
+function displayToast(data) {
+  // we use get throughout this as this function is not reactive, and just
+  // needs the values of the stores at a moment in time.
+  const currentUserId = get(currentUser).id;
+  if (currentUserId === data.sender) {
+    return;
+  }
+
+  const senderName = get(logins).get(data.sender);
+  const channelName = get(channelsList).get(data.channel);
+  const title = `${senderName} in ${channelName}`;
+
+  const opts = {
+    body: data.body,
+    tag: title,
+    // TODO: we need to inject the understory/hi icon in a more principled way here:
+    icon: "/ui/lib/assets/logo.png",
+    // TODO: support onclick bringing you to the relevant channel?
+    onclick: null
+  }
+  new Notification(title, opts);
+}
diff --git a/ui/lib/assets/logo.png b/ui/lib/assets/logo.png
new file mode 100644
index 0000000..5df6b4e
--- /dev/null
+++ b/ui/lib/assets/logo.png
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index e62f0f3..bbe9ff7 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,14 +1,20 @@
 <script>
+    import { showMenu } from '$lib/store';
+
     export let id;
     export let name;
     export let active = false;
+
+    function hideMenu() {
+        showMenu.update(() => false);
+    }
 </script>
 
 <li
     class="rounded-full"
     class:bg-slate-400={active}
 >
-<a href="/ch/{id}">
+<a href="/ch/{id}" on:click={hideMenu}>
     <span class="badge bg-primary-500">#</span>
     <span class="flex-auto">{name}</span>
 </a>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 687eec3..cbf4f04 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -1,23 +1,34 @@
 <script>
-	import { logins } from '$lib/store';
-	import Message from '$lib/components/Message.svelte';
+    import { logins, currentUser } from '$lib/store';
+    import Message from '$lib/components/Message.svelte';
 
-	export let sender;
-	export let messages;
+    export let sender;
+    export let messages;
 
-	let name;
-	$: name = $logins.get(sender);
-
-	let scroll = (message) => {
-		message.scrollIntoView();
-	}
+    let name;
+    $: name = $logins.get(sender);
+    $: ownMessage = $currentUser.id == sender;
 </script>
 
-<div class="card card-hover m-4 px-4 py-1 relative">
-	<span class="chip variant-soft sticky top-o left-0">
-		@{name}:
-	</span>
-	{#each messages as { at, body }}
-		<Message {at} {body} />
-	{/each}
+<div
+        class="card card-hover m-4 px-4 py-1 relative"
+        class:own-message={ownMessage}
+        class:other-message={!ownMessage}>
+    <span class="chip variant-soft sticky top-o left-0">
+        @{name}:
+    </span>
+    {#each messages as { at, body }}
+        <Message {at} {body} />
+    {/each}
 </div>
+
+<style>
+    .own-message {
+        width: 80%;
+        margin-right: auto;
+    }
+    .other-message {
+        width: 80%;
+        margin-left: auto;
+    }
+</style>
diff --git a/ui/lib/store.js b/ui/lib/store.js
index ae17ffa..bdd3e3b 100644
--- a/ui/lib/store.js
+++ b/ui/lib/store.js
@@ -3,6 +3,7 @@ import { Channels } from '$lib/store/channels';
 import { Messages } from '$lib/store/messages';
 import { Logins } from '$lib/store/logins';
 
+export const showMenu = writable(false);
 export const currentUser = writable(null);
 export const logins = writable(new Logins());
 export const channelsList = writable(new Channels());
diff --git a/ui/lib/store/channels.js b/ui/lib/store/channels.js
index b57ca7e..6d722c5 100644
--- a/ui/lib/store/channels.js
+++ b/ui/lib/store/channels.js
@@ -1,17 +1,26 @@
 export class Channels {
 	constructor() {
 		this.channels = [];
+    this.channelData = {};
 	}
 
 	setChannels(channels) {
 		this.channels = [...channels];
 		this.sort();
+    this.channelData = channels.reduce(
+      (acc, val) => ({
+        ...acc,
+        [val.id]: val.name,
+      }),
+      {}
+    );
 		return this;
 	}
 
 	addChannel(id, name) {
 		this.channels = [...this.channels, { id, name }];
 		this.sort();
+    this.channelData[id] = name;
 		return this;
 	}
 
@@ -20,9 +29,14 @@ export class Channels {
 		if (channelIndex !== -1) {
 			this.channels.splice(channelIndex, 1);
 		}
+    delete this.channelData[id];
 		return this;
 	}
 
+  get(id) {
+    return this.channelData[id];
+  }
+
 	sort() {
 		this.channels.sort((a, b) => {
 			if (a.name < b.name) {