From fc34199da434623aee24044815701aedede01c65 Mon Sep 17 00:00:00 2001 From: Tom Scanlan Date: Wed, 29 Jul 2026 13:56:07 -0400 Subject: [PATCH] feat(ui): a card for a live event shows when it ends MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit An event already under way needs a different line than one that hasn't started. Its start time is history, and what a reader wants to know is how long they have left, so a live card says when it ends instead. The end date keeps its year when the event runs long enough that dropping it would mislead โ€” a year-long programme ending "Sun, Jul 4" reads as days away rather than next year. Also gives the package's tsconfig a path for the plyr stylesheet import, so svelte-check can resolve it. --- .changeset/eighty-donkeys-shave.md | 16 ++++++++++++ packages/ui/src/EventCard.svelte | 41 +++++++++++++++++++++++++++--- packages/ui/tsconfig.json | 2 +- 3 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 .changeset/eighty-donkeys-shave.md diff --git a/.changeset/eighty-donkeys-shave.md b/.changeset/eighty-donkeys-shave.md new file mode 100644 index 0000000..57e7e8b --- /dev/null +++ b/.changeset/eighty-donkeys-shave.md @@ -0,0 +1,16 @@ +--- +'@atmo-dev/events-ui': minor +--- + +`EventCard` now shows when a live event **ends** rather than when it started. + +A card for an event already under way used to print its start time beside the +"Live" badge โ€” "Wed, Jul 1 ยท Live" reads as a bug, and in a list ordered by +finishing time the start dates look shuffled. Such a card now reads "Ends 9:30 PM", +dropping the weekday and date when the event ends today, since the only thing a +reader wants then is how long they have left. The year is kept when the event does +not end this year: long-running events are exactly what this surfaces, and a +year-long journey ending in July 2027 rendered as "Ends Sun, Jul 4", which reads as +a date that has already passed. + +Cards for events that have not started are unchanged. diff --git a/packages/ui/src/EventCard.svelte b/packages/ui/src/EventCard.svelte index b315870..0a17384 100644 --- a/packages/ui/src/EventCard.svelte +++ b/packages/ui/src/EventCard.svelte @@ -21,6 +21,35 @@ }); } + /** + * What a card says about an event ALREADY UNDER WAY: when it finishes, not when + * it began. A "Live" badge beside "Wed, Jul 1" reads as a bug, and in a list + * sorted by finishing time the start dates look shuffled. Day and weekday are + * dropped when it ends today, since the only thing a reader wants then is how + * long they have left. + */ + function formatEndsAt(endsAt: string): string { + const end = new Date(endsAt); + const now = new Date(); + const endsToday = end.toDateString() === now.toDateString(); + // Carry the YEAR when it is not this one. Long-running events are exactly + // what this band surfaces โ€” a year-long journey ending 2027-07-04 rendered + // as "Ends Sun, Jul 4", which reads as a date three days ago. + const endsThisYear = end.getFullYear() === now.getFullYear(); + return end.toLocaleTimeString('en-US', { + ...(endsToday + ? {} + : { + weekday: 'short', + month: 'short', + day: 'numeric', + ...(endsThisYear ? {} : { year: 'numeric' }) + }), + hour: 'numeric', + minute: '2-digit' + }); + } + function getModeLabel(mode: string | undefined): string | undefined { if (!mode) return undefined; if (mode.includes('virtual')) return 'Virtual'; @@ -90,10 +119,16 @@

- {formatDateTime(event.startsAt)} + {#if isOngoing && event.endsAt} + Ends {formatEndsAt(event.endsAt)} + {:else} + {formatDateTime(event.startsAt)} + {/if} {#if isOngoing} - - + + Live {/if} diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json index c2a35f5..0206834 100644 --- a/packages/ui/tsconfig.json +++ b/packages/ui/tsconfig.json @@ -12,7 +12,7 @@ "declaration": true, "declarationMap": false, "sourceMap": true, - "types": ["svelte"] + "types": ["svelte", "vite/client"] }, "include": ["src/**/*.ts", "src/**/*.svelte"] } -- 2.51.2