Break out a few shared sub-components

src/app/components/CalendarEventActions.svelte

@@ -3,16 +3,16 @@
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {max} from "@welshman/lib"
-  import {deriveEvents, deriveIsDeleted} from "@welshman/store"
+  import {deriveEvents} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
   import {COMMENT} from "@welshman/util"
-  import {thunks, load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
+  import {load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
-  import ThunkStatus from "@app/components/ThunkStatus.svelte"
+  import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import CalendarEventMenu from "@app/components/CalendarEventMenu.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
   import {notifications} from "@app/notifications"
@@ -25,9 +25,6 @@
   }
 
   const {url, event, showActivity = false}: Props = $props()
-
-  const thunk = $derived($thunks[event.id])
-  const deleted = deriveIsDeleted(repository, event)
   const path = makeCalendarPath(url, event.id)
   const filters = [{kinds: [COMMENT], "#E": [event.id]}]
   const replies = deriveEvents(repository, {filters})
@@ -61,11 +58,7 @@
 <div class="flex flex-wrap items-center justify-between gap-2">
   <div class="flex flex-grow flex-wrap justify-end gap-2">
     <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-left" />
-    {#if $deleted}
+    <ThunkStatusOrDeleted {event} />
-      <div class="btn btn-error btn-xs rounded-full">Deleted</div>
-    {:else if thunk}
-      <ThunkStatus {thunk} />
-    {/if}
     {#if showActivity}
       <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
         <Icon icon="reply" />

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 EventPostedBy from "@app/components/EventPostedBy.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.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">
+    <EventPostedBy {event} />
-      Posted by
-      <Button onclick={preventDefault(openProfile)} class="link-content">
-        @<ProfileName pubkey={event.pubkey} />
-      </Button>
-    </span>
     <CalendarEventActions {url} {event} />
   </div>
 </Link>

src/app/components/EventPostedBy.svelte

@@ -0,0 +1,19 @@
+<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/ThreadActions.svelte

@@ -3,16 +3,16 @@
   import {type Instance} from "tippy.js"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {max} from "@welshman/lib"
-  import {deriveEvents, deriveIsDeleted} from "@welshman/store"
+  import {deriveEvents} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
   import {COMMENT} from "@welshman/util"
-  import {thunks, load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
+  import {load, pubkey, repository, formatTimestampRelative} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
-  import ThunkStatus from "@app/components/ThunkStatus.svelte"
+  import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import ThreadMenu from "@app/components/ThreadMenu.svelte"
   import {publishDelete, publishReaction} from "@app/commands"
   import {notifications} from "@app/notifications"
@@ -26,8 +26,6 @@
 
   const {url, event, showActivity = false}: Props = $props()
 
-  const thunk = $derived($thunks[event.id])
-  const deleted = deriveIsDeleted(repository, event)
   const path = makeThreadPath(url, event.id)
   const filters = [{kinds: [COMMENT], "#E": [event.id]}]
   const replies = deriveEvents(repository, {filters})
@@ -61,11 +59,7 @@
 <div class="flex flex-wrap items-center justify-between gap-2">
   <div class="flex flex-grow flex-wrap justify-end gap-2">
     <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-left" />
-    {#if $deleted}
+    <ThunkStatusOrDeleted {event} />
-      <div class="btn btn-error btn-xs rounded-full">Deleted</div>
-    {:else if thunk}
-      <ThunkStatus {thunk} />
-    {/if}
     {#if showActivity}
       <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">
         <Icon icon="reply" />

src/app/components/ThreadItem.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
   import {nthEq} from "@welshman/lib"
   import {formatTimestamp} from "@welshman/app"
-  import {preventDefault} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
-  import ProfileName from "@app/components/ProfileName.svelte"
+  import EventPostedBy from "@app/components/EventPostedBy.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import {makeThreadPath} from "@app/routes"
-  import {pushModal} from "@app/modal"
 
   interface Props {
     url: any
@@ -19,8 +16,6 @@
   const {url, event, hideActions = false}: Props = $props()
 
   const title = event.tags.find(nthEq(0, "title"))?.[1]
-
-  const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 </script>
 
 <Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeThreadPath(url, event.id)}>
@@ -38,12 +33,7 @@
   {/if}
   <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">
+    <EventPostedBy {event} />
-      Posted by
-      <button type="button" onclick={preventDefault(openProfile)} class="link-content">
-        @<ProfileName pubkey={event.pubkey} />
-      </button>
-    </span>
     {#if !hideActions}
       <ThreadActions showActivity {url} {event} />
     {/if}

src/app/components/ThunkStatusOrDeleted.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import {deriveIsDeleted} from "@welshman/store"
+  import {thunks, repository} from "@welshman/app"
+  import ThunkStatus from "@app/components/ThunkStatus.svelte"
+
+  const {event}: {event: TrustedEvent} = $props()
+
+  const thunk = $derived($thunks[event.id])
+  const deleted = deriveIsDeleted(repository, event)
+</script>
+
+{#if $deleted}
+  <div class="btn btn-error btn-xs rounded-full">Deleted</div>
+{:else if thunk}
+  <ThunkStatus {thunk} />
+{/if}