Factor out calendar event component, render calendar event notes better

src/app/components/CalendarEventDate.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import {fromPairs} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {LOCALE, secondsToDate} from "@welshman/app"
+
+  type Props = {
+    event: TrustedEvent
+  }
+
+  const {event}: Props = $props()
+  const meta = $derived(fromPairs(event.tags) as Record<string, string>)
+  const startDate = $derived(secondsToDate(parseInt(meta.start)))
+</script>
+
+<div
+  class="flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-box border border-solid border-base-content p-2 sm:h-24 sm:w-24">
+  <span class="sm:text-lg">{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</span>
+  <span class="sm:text-4xl">{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
+</div>

src/app/components/CalendarEventHeader.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import {fromPairs} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
+
+  type Props = {
+    event: TrustedEvent
+  }
+
+  const {event}: Props = $props()
+  const meta = $derived(fromPairs(event.tags) as Record<string, string>)
+  const start = $derived(parseInt(meta.start))
+  const end = $derived(parseInt(meta.end))
+  const startDateDisplay = $derived(formatTimestampAsDate(start))
+  const endDateDisplay = $derived(formatTimestampAsDate(end))
+  const isSingleDay = $derived(startDateDisplay === endDateDisplay)
+</script>
+
+<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>

src/app/components/CalendarEventItem.svelte

@@ -1,38 +1,22 @@
 <script lang="ts">
-  import {fromPairs} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
+  import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import {makeCalendarPath} from "@app/routes"
 
-  const {
-    url,
-    event,
-  }: {
+  type Props = {
     url: string
     event: TrustedEvent
-  } = $props()
+  }
 
-  const meta = $derived(fromPairs(event.tags) as Record<string, string>)
-  const end = $derived(parseInt(meta.end))
-  const start = $derived(parseInt(meta.start))
-  const startDateDisplay = $derived(formatTimestampAsDate(start))
-  const endDateDisplay = $derived(formatTimestampAsDate(end))
-  const isSingleDay = $derived(startDateDisplay === endDateDisplay)
+  const {url, event}: Props = $props()
 </script>
 
 <Link class="col-3 card2 bg-alt w-full cursor-pointer" href={makeCalendarPath(url, event.id)}>
   <div class="flex items-center 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} />
   </div>
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
     <span class="whitespace-nowrap py-1 text-sm opacity-75">

src/app/components/CalendarEventMeta.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import {fromPairs} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
+
+  type Props = {
+    event: TrustedEvent
+  }
+
+  const {event}: Props = $props()
+  const meta = $derived(fromPairs(event.tags) as Record<string, string>)
+</script>
+
+<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}

src/app/components/Content.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type {TrustedEvent} from "@welshman/util"
   import {fromNostrURI} from "@welshman/util"
   import {nthEq} from "@welshman/lib"
   import {

src/app/components/NoteContent.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
+  import {EVENT_TIME} from "@welshman/util"
   import Content from "@app/components/Content.svelte"
+  import CalendarEventDate from "@app/components/CalendarEventDate.svelte"
+  import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
 
   const props: ComponentProps<typeof Content> = $props()
 </script>
 
-<Content {...props} />
+{#if props.event.kind === EVENT_TIME}
+  <div class="flex items-start gap-4">
+    <CalendarEventDate event={props.event} />
+    <div class="flex flex-grow flex-col">
+      <div class="flex flex-grow flex-wrap justify-between gap-2">
+        <CalendarEventHeader event={props.event} />
+      </div>
+      <div class="flex py-2 opacity-50">
+        <div class="h-px flex-grow bg-base-content opacity-25"></div>
+      </div>
+      <Content {...props} />
+    </div>
+  </div>
+{:else}
+  <Content {...props} />
+{/if}

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>