Make calendar event detail nice

src/app/components/CalendarEventCreate.svelte

@@ -8,6 +8,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
@@ -156,6 +157,8 @@
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">Create Event</Button>
+    <Button type="submit" class="btn btn-primary" disabled={$uploading}>
+      <Spinner loading={$uploading}>Create Event</Spinner>
+    </Button>
   </ModalFooter>
 </form>

src/app/components/CalendarEventItem.svelte

@@ -4,9 +4,8 @@
   import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
-  import Content from "@app/components/Content.svelte"
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
-  import EventPostedBy from "@app/components/EventPostedBy.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
   import {makeCalendarPath} from "@app/routes"
 
   const {
@@ -25,9 +24,9 @@
   const isSingleDay = $derived(startDateDisplay === endDateDisplay)
 </script>
 
-<Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeCalendarPath(url, event.id)}>
+<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">
-    <span>{meta.title || meta.name}</span>
+    <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
@@ -35,9 +34,10 @@
         : formatTimestamp(end)}
     </div>
   </div>
-  <Content {event} expandMode="inline" quoteProps={{relays: [url]}} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-    <EventPostedBy {event} />
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
+      Posted by <ProfileLink pubkey={event.pubkey} />
+    </span>
     <CalendarEventActions showActivity {url} {event} />
   </div>
 </Link>

src/app/components/EventPostedBy.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import type {TrustedEvent} from "@welshman/util"
-  import {preventDefault} from "@lib/html"
-  import Button from "@lib/components/Button.svelte"
-  import ProfileName from "@app/components/ProfileName.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import {pushModal} from "@app/modal"
-
-  const {event}: {event: TrustedEvent} = $props()
-
-  const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
-</script>
-
-<span class="whitespace-nowrap py-1 text-sm opacity-75">
-  Posted by
-  <Button onclick={preventDefault(openProfile)} class="link-content">
-    @<ProfileName pubkey={event.pubkey} />
-  </Button>
-</span>

src/app/components/ProfileLink.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import {preventDefault} from "@lib/html"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushModal} from "@app/modal"
+
+  const {pubkey}: {pubkey: string} = $props()
+
+  const openProfile = () => pushModal(ProfileDetail, {pubkey})
+</script>
+
+<Button onclick={preventDefault(openProfile)} class="link-content">
+  @<ProfileName {pubkey} />
+</Button>

src/app/components/ThreadItem.svelte

@@ -4,7 +4,7 @@
   import {formatTimestamp} from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
-  import EventPostedBy from "@app/components/EventPostedBy.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import {makeThreadPath} from "@app/routes"
 
@@ -34,7 +34,9 @@
   {/if}
   <Content {event} expandMode="inline" quoteProps={{relays: [url]}} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
-    <EventPostedBy {event} />
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
+      Posted by <ProfileLink pubkey={event.pubkey} />
+    </span>
     <ThreadActions showActivity {url} {event} />
   </div>
 </Link>

src/lib/components/Divider.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
   interface Props {
     children?: import("svelte").Snippet
-    class?: string
   }
 
-  const {children, ...props}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
-  <div class="h-px flex-grow bg-base-content opacity-25 {props.class}"></div>
+  <div class="h-px flex-grow bg-base-content opacity-25"></div>
   {#if children}
     <p>{@render children?.()}</p>
-    <div class="h-px flex-grow bg-base-content opacity-25 {props.class}"></div>
+    <div class="h-px flex-grow bg-base-content opacity-25"></div>
   {/if}
 </div>

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

@@ -1,9 +1,17 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy, sleep} from "@welshman/lib"
+  import {sortBy, fromPairs, sleep} from "@welshman/lib"
   import {COMMENT, getTagValue} from "@welshman/util"
-  import {repository, subscribe} from "@welshman/app"
+  import {
+    repository,
+    subscribe,
+    formatTimestamp,
+    LOCALE,
+    secondsToDate,
+    formatTimestampAsDate,
+    formatTimestampAsTime,
+  } from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import Icon from "@lib/components/Icon.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
@@ -12,6 +20,7 @@
   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 EventReply from "@app/components/EventReply.svelte"
   import {deriveEvent, decodeRelay} from "@app/state"
@@ -22,6 +31,13 @@
   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()
 
@@ -77,12 +93,47 @@
         </Button>
       </div>
     {/if}
-    <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
-      <div class="col-3 ml-12">
-        <Content showEntire event={$event} quoteProps={{relays: [url]}} />
-        <CalendarEventActions event={$event} {url} />
+    <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>
+        <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>
+          </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}
+          </div>
+          <div class="flex py-2 opacity-50">
+            <div class="h-px flex-grow bg-base-content opacity-25"></div>
+          </div>
+          <Content showEntire event={$event} quoteProps={{relays: [url]}} />
+        </div>
       </div>
-    </NoteCard>
+      <div class="flex w-full flex-col justify-end sm:flex-row">
+        <CalendarEventActions {url} event={$event} />
+      </div>
+    </div>
   {:else}
     {#await sleep(5000)}
       <Spinner loading>Loading comments...</Spinner>
@@ -103,9 +154,7 @@
       <h1 class="text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
     {/snippet}
     {#snippet action()}
-      <div>
-        <MenuSpaceButton {url} />
-      </div>
+      <MenuSpaceButton {url} />
     {/snippet}
   </PageBar>
 </div>