From 735231f8bcdee9376335cd9bf6e0c48b9b8c0901 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Sat, 22 Aug 2026 11:30:30 -0700
Subject: [PATCH] Make some event rendering components reactive

---
 src/app/components/CalendarEventDate.svelte   | 4 ++--
 src/app/components/CalendarEventHeader.svelte | 6 +++---
 src/app/components/CalendarEventMeta.svelte   | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/CalendarEventDate.svelte b/src/app/components/CalendarEventDate.svelte
index 7e3a6a99..2cf63167 100644
--- a/src/app/components/CalendarEventDate.svelte
+++ b/src/app/components/CalendarEventDate.svelte
@@ -10,9 +10,9 @@
 
   const {event}: Props = $props()
 
-  const timeEvent = reader(TimeEvent)(event)
+  const timeEvent = $derived(reader(TimeEvent)(event))
 
-  const start = timeEvent.start()
+  const start = $derived(timeEvent.start())
 </script>
 
 {#if start}
diff --git a/src/app/components/CalendarEventHeader.svelte b/src/app/components/CalendarEventHeader.svelte
index 9d5b5208..ce61ee43 100644
--- a/src/app/components/CalendarEventHeader.svelte
+++ b/src/app/components/CalendarEventHeader.svelte
@@ -13,12 +13,12 @@
 
   const {event}: Props = $props()
 
-  const timeEvent = reader(TimeEvent)(event)
+  const timeEvent = $derived(reader(TimeEvent)(event))
 
   // NIP-52 settled on `title`, but events from before that still carry `name`.
   const title = $derived(timeEvent.title() ?? tagValue(tagSpec("name"), event.tags))
-  const start = timeEvent.start()
-  const end = timeEvent.end()
+  const start = $derived(timeEvent.start())
+  const end = $derived(timeEvent.end())
 </script>
 
 <div class="flex flex-col justify-between gap-1">
diff --git a/src/app/components/CalendarEventMeta.svelte b/src/app/components/CalendarEventMeta.svelte
index afa315cc..7a84ed4c 100644
--- a/src/app/components/CalendarEventMeta.svelte
+++ b/src/app/components/CalendarEventMeta.svelte
@@ -14,9 +14,9 @@
 
   const {event, url}: Props = $props()
 
-  const timeEvent = reader(TimeEvent)(event)
+  const timeEvent = $derived(reader(TimeEvent)(event))
 
-  const location = timeEvent.location()
+  const location = $derived(timeEvent.location())
 </script>
 
 <div class="flex min-w-0 flex-col gap-1 text-sm opacity-75">