understory

From c68ebc39096d93867058f011b4e6313f53128819 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Tue, 5 Nov 2024 22:22:22 -0500 Subject: Start to make this a PWA --- ui/app.html | 1 + ui/routes/(app)/+layout.svelte | 2 +- ui/routes/+layout.svelte | 2 +- ui/service-worker.js | 35 ++++++++++++++++++++++++++++++++++ ui/static/manifest.json | 43 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 81 insertions(+), 2 deletions(-) create mode 100644 ui/service-worker.js create mode 100644 ui/static/manifest.json (limited to 'ui') diff --git a/ui/app.html b/ui/app.html index 51a6780..4dc66f4 100644 --- a/ui/app.html +++ b/ui/app.html @@ -4,6 +4,7 @@ + %sveltekit.head% diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index ae3dc6a..2725c65 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -55,7 +55,7 @@ - understory + pilcrow {#if loading} diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index d786389..da5bbe0 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -28,7 +28,7 @@

- understory + pilcrow {#if $currentUser} diff --git a/ui/service-worker.js b/ui/service-worker.js new file mode 100644 index 0000000..e29fab3 --- /dev/null +++ b/ui/service-worker.js @@ -0,0 +1,35 @@ +/// +/// +/// +/// + +import { build, files, version } from '$service-worker'; + +// Create a unique cache name for this deployment +const CACHE = `cache-${version}`; + +const ASSETS = [ + ...build, // the app itself + ...files // everything in `static` +]; + +self.addEventListener('install', (event) => { + // Create a new cache and add all files to it + async function addFilesToCache() { + const cache = await caches.open(CACHE); + await cache.addAll(ASSETS); + } + + event.waitUntil(addFilesToCache()); +}); + +self.addEventListener('activate', (event) => { + // Remove previous cached data from disk + async function deleteOldCaches() { + for (const key of await caches.keys()) { + if (key !== CACHE) await caches.delete(key); + } + } + + event.waitUntil(deleteOldCaches()); +}); diff --git a/ui/static/manifest.json b/ui/static/manifest.json new file mode 100644 index 0000000..2d4cf39 --- /dev/null +++ b/ui/static/manifest.json @@ -0,0 +1,43 @@ +{ + "name": "Pilcrow", + "short_name": "Pilcrow", + "start_url": "index.html", + "display": "standalone", + "background_color": "#fdfdfd", + "theme_color": "#db4938", + "orientation": "portrait-primary", + "icons": [ + { + "src": "/favicon.png", + "type": "image/png", "sizes": "72x72" + }, + { + "src": "/favicon.png", + "type": "image/png", "sizes": "96x96" + }, + { + "src": "/favicon.png", + "type": "image/png","sizes": "128x128" + }, + { + "src": "/favicon.png", + "type": "image/png", "sizes": "144x144" + }, + { + "src": "/favicon.png", + "type": "image/png", "sizes": "152x152" + }, + { + "src": "/favicon.png", + "type": "image/png", "sizes": "192x192" + }, + { + "src": "/favicon.png", + "type": "image/png", "sizes": "384x384" + }, + { + "src": "/favicon.png", + "type": "image/png", "sizes": "512x512" + } + ] +} -- cgit v1.2.3 From 8751155e24f020802d1c387af19318edceaa39d2 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Wed, 6 Nov 2024 22:59:29 -0500 Subject: Add comment explaining why this isn't happy in Firefox --- ui/service-worker.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui') diff --git a/ui/service-worker.js b/ui/service-worker.js index e29fab3..033c8d9 100644 --- a/ui/service-worker.js +++ b/ui/service-worker.js @@ -3,6 +3,12 @@ /// /// +// Because of this line, this service worker won't run in dev mode in Firefox. +// Only Safari, Edge, Chrome can run it at the moment, because only they +// support modules in service workers. +// +// That's okay! If you run `tools/run` with HI_DEV unset, you will get the +// bundled version, and can work on it. Or just use Safari. import { build, files, version } from '$service-worker'; // Create a unique cache name for this deployment -- cgit v1.2.3 From ae9f3889de763d7841ab0acc7d7589da5bb830ff Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Wed, 6 Nov 2024 17:12:25 -0500 Subject: Sort out padding and wrapping for the chat input --- ui/lib/components/MessageInput.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte index c071bea..26521e1 100644 --- a/ui/lib/components/MessageInput.svelte +++ b/ui/lib/components/MessageInput.svelte @@ -31,7 +31,7 @@ bind:value {disabled} type="search" - class="flex-auto h-6 input rounded-r-none" + class="flex-auto h-6 py-0 input rounded-r-none text-nowrap" > + diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte index 35e00b4..381f483 100644 --- a/ui/lib/components/Invite.svelte +++ b/ui/lib/components/Invite.svelte @@ -5,8 +5,5 @@ let inviteUrl = $derived(new URL(`/invite/${id}`, document.location)); - + {inviteUrl} diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte index cc14f3b..314782a 100644 --- a/ui/lib/components/Invites.svelte +++ b/ui/lib/components/Invites.svelte @@ -4,7 +4,7 @@ let invites = $state([]); - async function onSubmit(event) { + async function onsubmit(event) { event.preventDefault(); let response = await createInvite(); if (response.status == 200) { @@ -13,11 +13,12 @@ } -

+ +

-- cgit v1.2.3 From 549928a460696b2fc994daf7d1a375d0280b87a8 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Wed, 6 Nov 2024 17:43:08 -0500 Subject: Increase horizontal padding on the /me link so it looks a little less cramped --- ui/routes/+layout.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index ef3e823..0aeb144 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -33,7 +33,7 @@ understory {#if $currentUser} -

@{$currentUser.username}

{/if} -- cgit v1.2.3 From d38344003092e53a84facdef1bff4fdd0ac3a017 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Wed, 6 Nov 2024 17:45:37 -0500 Subject: Better choices of margins and caps --- ui/lib/components/Invite.svelte | 2 +- ui/lib/components/Invites.svelte | 2 +- ui/routes/(app)/me/+page.svelte | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'ui') diff --git a/ui/lib/components/Invite.svelte b/ui/lib/components/Invite.svelte index 381f483..937c911 100644 --- a/ui/lib/components/Invite.svelte +++ b/ui/lib/components/Invite.svelte @@ -5,5 +5,5 @@ let inviteUrl = $derived(new URL(`/invite/${id}`, document.location)); - + {inviteUrl} diff --git a/ui/lib/components/Invites.svelte b/ui/lib/components/Invites.svelte index 314782a..493bf1c 100644 --- a/ui/lib/components/Invites.svelte +++ b/ui/lib/components/Invites.svelte @@ -14,7 +14,7 @@

-- cgit v1.2.3 From 26477b67f500a1af74e136a8ba858ca6b0f54814 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Fri, 8 Nov 2024 01:17:21 -0500 Subject: Stop chopping the first message off of each channel (oops). --- ui/lib/store/messages.svelte.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/lib/store/messages.svelte.js b/ui/lib/store/messages.svelte.js index 2442675..c0db71b 100644 --- a/ui/lib/store/messages.svelte.js +++ b/ui/lib/store/messages.svelte.js @@ -11,7 +11,20 @@ export class Messages { let parsedAt = new Date(at); const message = { id, at: parsedAt, body }; - let runs = (this.channels[channel] ||= []); + // You might be thinking, can't this be + // + // let runs = (this.channels[channel] ||= []); + // + // Let me tell you, I thought that too. Javascript's semantics allow it. It + // didn't work - the first message in each channel was getting lost as the + // update to `this.channels` wasn't actually happening. I suspect this is + // due to the implementation of Svelte's `$state` rune, but I don't know it + // for sure. + // + // In any case, splitting the read and write up like this has the same + // semantics, and _works_. (This time, for sure!) + let runs = this.channels[channel] || []; + let currentRun = runs.slice(-1)[0]; if (currentRun === undefined) { currentRun = { sender, messages: [message] }; @@ -29,6 +42,8 @@ export class Messages { } } + this.channels[channel] = runs; + return this; } -- cgit v1.2.3 From e43cc0d606956c99ab109a63866f48a67aea6515 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Wed, 6 Nov 2024 20:35:12 -0500 Subject: Deletable messages. This also fixes some rendering jank with the message timestamp chip. --- ui/lib/apiServer.js | 4 ++++ ui/lib/components/Message.svelte | 32 +++++++++++++++++++++++++++----- ui/lib/components/MessageRun.svelte | 4 ++-- 3 files changed, 33 insertions(+), 7 deletions(-) (limited to 'ui') diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js index 6ada0f7..fee1a81 100644 --- a/ui/lib/apiServer.js +++ b/ui/lib/apiServer.js @@ -34,6 +34,10 @@ export async function postToChannel(channelId, body) { return apiServer.post(`/channels/${channelId}`, { body }); } +export async function deleteMessage(messageId) { + return apiServer.delete(`/messages/${messageId}`, {}); +} + export async function createInvite() { return apiServer.post(`/invite`, {}); } diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index 68c5c91..0c8eeec 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -2,16 +2,38 @@ import { marked } from 'marked'; import DOMPurify from 'dompurify'; + import { deleteMessage } from '$lib/apiServer'; + function scroll(message) { message.scrollIntoView(); } - let { at, body } = $props(); + let { id, at, body, editable = false } = $props(); let renderedBody = $derived(DOMPurify.sanitize(marked.parse(body, { breaks: true }))); + let deleteArmed = $state(false); + + function onDelete(event) { + event.preventDefault(); + if (deleteArmed) { + deleteArmed = false; + deleteMessage(id); + } else { + deleteArmed = true; + } + } + + function onmouseleave() { + deleteArmed = false; + } -

- {at} +

+ {at} + {#if editable} + + {/if} +

{@html renderedBody} @@ -19,10 +41,10 @@