From 8f360dd9cc45bb14431238ccc5e3d137c020fa7b Mon Sep 17 00:00:00 2001 From: Kit La Touche 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. --- tools/run | 15 ++++-- ui/lib/assets/logo.png | Bin 0 -> 137101 bytes ui/lib/components/Channel.svelte | 8 ++- ui/lib/store.js | 1 + ui/routes/(app)/+layout.svelte | 108 ++++++++++++++++++++++++++++----------- ui/routes/+layout.svelte | 41 +++++++++------ ui/static/favicon.png | Bin 1571 -> 137101 bytes 7 files changed, 123 insertions(+), 50 deletions(-) create mode 100644 ui/lib/assets/logo.png diff --git a/tools/run b/tools/run index 452355e..562a94d 100755 --- a/tools/run +++ b/tools/run @@ -1,8 +1,15 @@ #!/bin/bash -e ## tools/run [ARGS...] -## -## Run the server in development mode. Shorthand for `cargo run`. -tools/build-ui -cargo run -- "$@" +if [ -z ${HI_DEV+x} ]; then + tools/build-ui + cargo run -- "$@" +else + npm run dev & PIDS[0]=$! + cargo run -- "$@" & PIDS[1]=$! + + trap "kill ${PIDS[*]}" SIGINT + + wait +fi diff --git a/ui/lib/assets/logo.png b/ui/lib/assets/logo.png new file mode 100644 index 0000000..5df6b4e Binary files /dev/null and b/ui/lib/assets/logo.png differ 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 @@
  • - + # {name} 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/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index 9abaaf4..b63a607 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -4,7 +4,7 @@ import { onMount, onDestroy } from 'svelte'; import { boot, subscribeToEvents } from '$lib/apiServer'; - import { currentUser, logins, channelsList, messages } from '$lib/store'; + import { showMenu, currentUser, logins, channelsList, messages } from '$lib/store'; import ChannelList from '$lib/components/ChannelList.svelte'; import CreateChannelForm from '$lib/components/CreateChannelForm.svelte'; @@ -12,6 +12,15 @@ let loading = true; let events = null; + let showMenuValue; + showMenu.subscribe((value) => { + showMenuValue = value; + }); + + + function toggleMenu() { + showMenu.update((value) => !value); + } $: channel = $page?.params?.channel; @@ -57,37 +66,76 @@ {#if loading}

    Loading…

    {:else} -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    +
    +
    +
    + +
    +
    + +
    +
    + +
    {/if} 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 @@ -
    - - 🌳 +
    +
    + + + + logo + + understory - - {#if $currentUser} - - {/if} - - - + + {#if $currentUser} + + {/if} + + +
    diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index c337b3f..9fcdf41 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -63,6 +63,10 @@ }); + + understory + + {#if loading}

    Loading…

    {:else} @@ -90,21 +94,19 @@ -- cgit v1.2.3 From 51aabd07ca5eeaee45a564f8799cc42dc195068c Mon Sep 17 00:00:00 2001 From: Kit La Touche 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(-) 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 @@ understory {#if $currentUser} - - + {/if}     -- cgit v1.2.3 From 239bd4436be93cec7b8c3b1a7357146431f9048a Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Thu, 31 Oct 2024 00:11:32 -0400 Subject: Futz with layout a bit --- ui/routes/(app)/+layout.svelte | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index 9fcdf41..c57b747 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -96,6 +96,7 @@ :root { --app-bar-height: 68px; --input-row-height: 2rem; + --interface-padding: 16px; } #interface { @@ -105,6 +106,7 @@ 'side main' 1fr / auto 1fr ; + height: calc(100vh - var(--app-bar-height)); @media (width > 640px) { --overlay: static; @@ -118,8 +120,8 @@ nav { padding: 0.25rem; position: var(--overlay, absolute); transition: translate 300ms ease-out; - height: calc(100vh - var(--app-bar-height)); width: 21rem; + height: calc(100vh - var(--app-bar-height) - var(--interface-padding)); } nav button { position: absolute; @@ -128,14 +130,14 @@ nav button { } main { grid-area: main; - height: calc(100vh - var(--app-bar-height)); + height: calc(100vh - var(--app-bar-height) - var(--interface-padding)); } .active-channel { - height: calc(100vh - var(--app-bar-height) - var(--input-row-height)); + height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)); overflow: scroll; } .channel-list { - height: calc(100vh - var(--app-bar-height) - var(--input-row-height)); + height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)); overflow: scroll; } nav[data-expanded=false] { -- cgit v1.2.3 From 6d523b4247f750e2bbd8e16fb3ce206323982e8e Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Thu, 31 Oct 2024 00:26:11 -0400 Subject: Rearrange DOM because Owen asked me to --- ui/routes/(app)/+layout.svelte | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index c57b747..cf5d5f1 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -71,15 +71,6 @@

    Loading…

    {:else}
    -
    -
    - -
    -
    - -
    -
    - +
    +
    + +
    +
    + +
    +
    {/if} @@ -122,6 +121,7 @@ nav { transition: translate 300ms ease-out; width: 21rem; height: calc(100vh - var(--app-bar-height) - var(--interface-padding)); + z-index: 10; } nav button { position: absolute; -- cgit v1.2.3 From 213266f97a9c72c66b75742931b15fd195aa7959 Mon Sep 17 00:00:00 2001 From: Kit La Touche 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(-) 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); + }); + });
    -- cgit v1.2.3 From ea1631476af50f308652787e17678264d671ade3 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Thu, 31 Oct 2024 17:57:37 -0400 Subject: Specify engines in package.json So we know what npm and node versions this expects. --- package.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/package.json b/package.json index ec8a66c..8a54766 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,10 @@ "name": "hi", "version": "0.0.1", "private": true, + "engines" : { + "npm" : ">=10.8.3 <11.0.0", + "node" : ">=22.9.0 <23.0.0" + }, "scripts": { "dev": "vite dev", "build": "vite build", -- cgit v1.2.3