From 8f360dd9cc45bb14431238ccc5e3d137c020fa7b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 23 Oct 2024 21:52:24 -0400
Subject: Do a big mobile app design thing

Mobile-friendly anyway. Thanks to
[Miriam](https://www.miriamsuzanne.com/) for the CSS that enables a
sliding menu on mobile size, constant menu on larger.
---
 ui/routes/+layout.svelte | 41 ++++++++++++++++++++++++++---------------
 1 file changed, 26 insertions(+), 15 deletions(-)

(limited to 'ui/routes/+layout.svelte')

diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 7b99d62..1b2391c 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -1,29 +1,40 @@
 <script>
-  import { AppBar } from '@skeletonlabs/skeleton';
-  import "../app.css";
+    import { AppBar } from '@skeletonlabs/skeleton';
+    import "../app.css";
 
-  import { currentUser } from '$lib/store';
-  import LogOut from '$lib/components/LogOut.svelte';
+    import logo from '$lib/assets/logo.png';
+
+    import { showMenu, currentUser } from '$lib/store';
+    import LogOut from '$lib/components/LogOut.svelte';
+
+    function toggleMenu() {
+        showMenu.update((value) => !value);
+    }
 </script>
 
-<div id="app">
-    <AppBar>
-        <svelte:fragment slot="lead">🌳</svelte:fragment>
+<div id="app" class="m-0 p-0 h-vh w-full">
+    <div class="fixed w-full">
+        <AppBar>
+            <svelte:fragment slot="lead">
+                <a on:click|preventDefault={toggleMenu} class="cursor-pointer">
+                <img class="w-8 h-8" alt="logo" src={logo} />
+                </a>
+            </svelte:fragment>
             <a href="/">understory</a>
-        <svelte:fragment slot="trail">
-            {#if $currentUser}
-                <LogOut />
-            {/if}
-        </svelte:fragment>
-    </AppBar>
-
+            <svelte:fragment slot="trail">
+                {#if $currentUser}
+                    <LogOut />
+                {/if}
+            </svelte:fragment>
+        </AppBar>
+    </div>
     <slot />
 </div>
 
 <style>
     #app {
         margin: 0;
-        padding: 1rem;
+        padding: 0;
         height: 100vh;
         width: 100%;
     }
-- 
cgit v1.2.3


From 4c49283553f4b18bb2a74de280b340a073e3253e Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Fri, 25 Oct 2024 22:13:34 -0400
Subject: Tweak header bar position

---
 ui/routes/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/routes/+layout.svelte')

diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 1b2391c..794a119 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div id="app" class="m-0 p-0 h-vh w-full">
-    <div class="fixed w-full">
+    <div class="w-full">
         <AppBar>
             <svelte:fragment slot="lead">
                 <a on:click|preventDefault={toggleMenu} class="cursor-pointer">
-- 
cgit v1.2.3


From 0b4e900c35d540f6047fc29863c174e96ff20d0b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 30 Oct 2024 15:00:44 -0400
Subject: Calculate layout height more betterly

---
 ui/routes/(app)/+layout.svelte | 25 +++++++++++++++----------
 ui/routes/+layout.svelte       |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

(limited to 'ui/routes/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index b63a607..c337b3f 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -66,7 +66,7 @@
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else}
-    <div id="interface" class="h-full pt-20 p-2">
+    <div id="interface" class="p-2">
         <main>
             <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]">
                 <slot />
@@ -89,9 +89,14 @@
 {/if}
 
 <style>
+:root {
+    --app-bar-height: 5rem;
+    --input-row-height: 2rem;
+}
+
 #interface {
   margin: unset;
-  min-block-size: 100%;
+  /* min-block-size: 100%;*/
   display: grid;
   grid-template: 
     'side main' 1fr
@@ -107,11 +112,11 @@
 nav {
     grid-area: side;
     background-color: rgb(var(--color-surface-600));
-    inset: 0 auto 0 0;
+    inset: auto auto 0 0;
     padding: 0.25rem;
     position: var(--overlay, absolute);
     transition: translate 300ms ease-out;
-    height: 100vh;
+    height: calc(100vh - var(--app-bar-height));
     width: 21rem;
 }
 nav button {
@@ -119,18 +124,18 @@ nav button {
     top: 0;
     right: 0;
 }
+main {
+    grid-area: main;
+    height: calc(100vh - var(--app-bar-height));
+}
 .active-channel {
-    height: 87vh;
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
     overflow: scroll;
 }
 .channel-list {
-    height: 94vh;
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
     overflow: scroll;
 }
-main {
-    grid-area: main;
-    max-height: 88vh;  /* How do we ensure that this is 100vh - header size? */
-}
 nav[data-expanded=false] {
   translate: var(--translate, -100% 0);
 }
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 6e6a8d6..b7ed746 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -15,7 +15,7 @@
 
 <div id="app" class="m-0 p-0 h-vh w-full">
     <div class="w-full">
-        <AppBar>
+        <AppBar class="app-bar">
             <svelte:fragment slot="lead">
                 <a on:click|preventDefault={toggleMenu} class="cursor-pointer">
                 <img class="w-8 h-8" alt="logo" src={logo} />
-- 
cgit v1.2.3


From 51aabd07ca5eeaee45a564f8799cc42dc195068c Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 30 Oct 2024 23:19:32 -0400
Subject: Correct badly resolved merge

---
 ui/routes/+layout.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'ui/routes/+layout.svelte')

diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 4133ff3..bc5b781 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -6,8 +6,6 @@
     import { showMenu, currentUser } from '$lib/store';
 
     import CurrentUser from '$lib/components/CurrentUser.svelte';
-    import Invite from '$lib/components/Invite.svelte';
-    import LogOut from '$lib/components/LogOut.svelte';
 
     function toggleMenu() {
         showMenu.update((value) => !value);
@@ -25,8 +23,7 @@
             <a href="/">understory</a>
             <svelte:fragment slot="trail">
                 {#if $currentUser}
-                    <Invite />
-                    <LogOut />
+                    <CurrentUser />
                 {/if}
             </svelte:fragment>
         </AppBar>
-- 
cgit v1.2.3


From 213266f97a9c72c66b75742931b15fd195aa7959 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 31 Oct 2024 16:24:31 -0400
Subject: Do some toast notificating

---
 ui/lib/apiServer.js      | 27 ++++++++++++++++++++++++++-
 ui/lib/store/channels.js | 14 ++++++++++++++
 ui/routes/+layout.svelte |  8 ++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)

(limited to 'ui/routes/+layout.svelte')

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/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) {
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index bc5b781..fbc17ec 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -2,6 +2,8 @@
     import "../app.css";
     import logo from '$lib/assets/logo.png';
 
+    import { onMount } from 'svelte';
+
     import { AppBar } from '@skeletonlabs/skeleton';
     import { showMenu, currentUser } from '$lib/store';
 
@@ -10,6 +12,12 @@
     function toggleMenu() {
         showMenu.update((value) => !value);
     }
+
+    onMount(() => {
+        Notification.requestPermission().then((result) => {
+            console.log(result);
+        });
+    });
 </script>
 
 <div id="app" class="m-0 p-0 h-vh w-full">
-- 
cgit v1.2.3

