Break out a few shared sub-components

src/app/components/CalendarEventItem.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
   import {fromPairs} from "@welshman/lib"
   import {formatTimestamp, formatTimestampAsDate, formatTimestampAsTime} from "@welshman/app"
-  import {preventDefault} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
-  import ProfileName from "@app/components/ProfileName.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import EventPostedBy from "@app/components/EventPostedBy.svelte"
   import {makeCalendarPath} from "@app/routes"
-  import {pushModal} from "@app/modal"
 
   const {url, event} = $props()
 
@@ -20,8 +16,6 @@
   const startDateDisplay = $derived(formatTimestampAsDate(start))
   const endDateDisplay = $derived(formatTimestampAsDate(end))
   const isSingleDay = $derived(startDateDisplay === endDateDisplay)
-
-  const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 </script>
 
 <Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeCalendarPath(url, event.id)}>
@@ -34,14 +28,9 @@
         : formatTimestamp(end)}
     </div>
   </div>
-  <Content {event} />
+  <Content {event} expandMode="inline" quoteProps={{relays: [url]}} />
   <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">
-      Posted by
-      <Button onclick={preventDefault(openProfile)} class="link-content">
-        @<ProfileName pubkey={event.pubkey} />
-      </Button>
-    </span>
+    <EventPostedBy {event} />
     <CalendarEventActions {url} {event} />
   </div>
 </Link>