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. --- ui/lib/assets/logo.png | Bin 0 -> 137101 bytes ui/lib/components/Channel.svelte | 8 +++++++- ui/lib/store.js | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 ui/lib/assets/logo.png (limited to 'ui/lib') 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()); -- cgit v1.2.3 From 610f6839d2e449d172aa6ac35e6c1de0677a0754 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Wed, 30 Oct 2024 16:47:19 -0400 Subject: Add more mobile styling --- ui/lib/components/Message.svelte | 11 ++++++++++- ui/routes/(app)/+layout.svelte | 14 ++++++-------- 2 files changed, 16 insertions(+), 9 deletions(-) (limited to 'ui/lib') diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index d040433..2705e4b 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -10,9 +10,10 @@ let timestamp = new Date(at).toTimeString(); let name; $: name = $logins.get(sender); + $: ownMessage = $currentUser.id == sender; -
    +
    @{name}: @@ -30,4 +31,12 @@ .card:hover .timestamp { display: flex; } + .own-message { + width: 80%; + margin-right: auto; + } + .other-message { + width: 80%; + margin-left: auto; + } 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 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(-) (limited to 'ui/lib') 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