Factor out calendar event component, render calendar event notes better

src/routes/spaces/[relay]/calendar/[id]/+page.svelte

@@ -1,17 +1,9 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, fromPairs, sleep} from "@welshman/lib"
+  import {sortBy, sleep} from "@welshman/lib"
   import {COMMENT, getTagValue} from "@welshman/util"
-  import {
-    repository,
-    subscribe,
-    formatTimestamp,
-    LOCALE,
-    secondsToDate,
-    formatTimestampAsDate,
-    formatTimestampAsTime,
-  } from "@welshman/app"
+  import {repository, subscribe} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import Icon from "@lib/components/Icon.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -20,8 +12,10 @@
   import Content from "@app/components/Content.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
-  import ProfileLink from "@app/components/ProfileLink.svelte"
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
+  import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
+  import CalendarEventMeta from "@app/components/CalendarEventMeta.svelte"
+  import CalendarEventDate from "@app/components/CalendarEventDate.svelte"
   import EventReply from "@app/components/EventReply.svelte"
   import {deriveEvent, decodeRelay} from "@app/state"
   import {setChecked} from "@app/notifications"
@@ -31,13 +25,6 @@
   const event = deriveEvent(id)
   const filters = [{kinds: [COMMENT], "#E": [id]}]
   const replies = deriveEvents(repository, {filters})
-  const meta = $derived(fromPairs($event.tags) as Record<string, string>)
-  const end = $derived(parseInt(meta.end))
-  const start = $derived(parseInt(meta.start))
-  const startDate = $derived(secondsToDate(start))
-  const startDateDisplay = $derived(formatTimestampAsDate(start))
-  const endDateDisplay = $derived(formatTimestampAsDate(end))
-  const isSingleDay = $derived(startDateDisplay === endDateDisplay)
 
   const back = () => history.back()
 
@@ -95,34 +82,13 @@
     {/if}
     <div class="card2 bg-alt col-3 z-feature">
       <div class="flex items-start gap-4">
-        <div
-          class="flex h-24 w-24 flex-col items-center justify-center gap-1 rounded-box border border-solid border-base-content p-2">
-          <span class="text-lg"
-            >{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</span>
-          <span class="text-4xl"
-            >{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
-        </div>
+        <CalendarEventDate event={$event} />
         <div class="flex flex-grow flex-col">
           <div class="flex flex-grow justify-between gap-2">
-            <p class="text-xl">{meta.title || meta.name}</p>
-            <div class="flex items-center gap-2 text-sm">
-              <Icon icon="clock-circle" size={4} />
-              {formatTimestampAsTime(start)} — {isSingleDay
-                ? formatTimestampAsTime(end)
-                : formatTimestamp(end)}
-            </div>
+            <CalendarEventHeader event={$event} />
           </div>
           <div class="flex items-center gap-2 text-sm opacity-75">
-            <span>
-              Posted by <ProfileLink pubkey={$event.pubkey} />
-            </span>
-            {#if meta.location}
-              <span>•</span>
-              <span class="flex items-center gap-1">
-                <Icon icon="map-point" size={4} />
-                {meta.location}
-              </span>
-            {/if}
+            <CalendarEventMeta event={$event} />
           </div>
           <div class="flex py-2 opacity-50">
             <div class="h-px flex-grow bg-base-content opacity-25"></div>