5 files changed, 37 insertions, 16 deletions
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/Message.svelte b/ui/lib/components/Message.svelte
index 004a484..ef8ea0b 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -7,7 +7,7 @@
 
 <div class="message relative">
     <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
-    <section class="mx-4 my-1">
+    <section class="p-1">
         <SvelteMarkdown source={body} />
     </section>
 </div>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index b998a8b..0ecaabc 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -1,20 +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 name;
+    $: name = $logins.get(sender);
+    $: ownMessage = $currentUser.id == sender;
 </script>
 
-<div class="card card-hover m-4 relative">
-	<span class="chip variant-soft sticky top-o left-0">
-		<!-- TODO: should this show up for only the first of a run? -->
-		@{name}:
-	</span>
-	{#each messages as { at, body }}
-		<Message {at} {body} />
-	{/each}
+<div
+        class="card card-hover m-4 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());