Split HomeInboxItem into one component per conversation kind

src/app/components/HomeInboxItem.svelte

@@ -1,14 +1,7 @@
 <script lang="ts">
-  import {formatTimestamp, remove, uniq} from "@welshman/lib"
+  import HomeInboxItemChat from "@app/components/HomeInboxItemChat.svelte"
-  import Link from "@lib/components/Link.svelte"
+  import HomeInboxItemRoom from "@app/components/HomeInboxItemRoom.svelte"
-  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import HomeInboxItemSpaceChat from "@app/components/HomeInboxItemSpaceChat.svelte"
-  import ProfileName from "@app/components/ProfileName.svelte"
-  import RelayIcon from "@app/components/RelayIcon.svelte"
-  import RelayName from "@app/components/RelayName.svelte"
-  import RoomName from "@app/components/RoomName.svelte"
-  import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
-  import UnreadDot from "@app/components/UnreadDot.svelte"
-  import {user} from "@app/core"
   import type {Activity} from "@app/notifications"
 
   type Props = {
@@ -16,61 +9,22 @@
   }
 
   const {conversation}: Props = $props()
-
-  const path = $derived(conversation.path)
-  const url = $derived(conversation.url)
-  const h = $derived(conversation.h)
-  const event = $derived(conversation.event)
-  const others = $derived(uniq(remove($user.pubkey, conversation.pubkeys ?? [])))
 </script>
 
-<Link href={path} class="card card-sm card-interactive flex items-center gap-3">
+{#if conversation.url && conversation.h}
-  {#if url}
+  <HomeInboxItemRoom
-    <RelayIcon {url} size={9} class="shrink-0" />
+    path={conversation.path}
-  {:else}
+    url={conversation.url}
-    <ProfileCircle pubkey={others[0] || $user.pubkey} size={9} class="shrink-0" />
+    h={conversation.h}
-  {/if}
+    event={conversation.event} />
-  <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+{:else if conversation.url}
-    <div class="flex min-w-0 items-baseline gap-2 text-sm">
+  <HomeInboxItemSpaceChat
-      <strong class="truncate">
+    path={conversation.path}
-        {#if url}
+    url={conversation.url}
-          {#if h}
+    event={conversation.event} />
-            <RoomName {url} {h} />
+{:else}
-          {:else}
+  <HomeInboxItemChat
-            Chat
+    path={conversation.path}
-          {/if}
+    pubkeys={conversation.pubkeys ?? []}
-        {:else if others.length === 0}
+    event={conversation.event} />
-          Note to self
+{/if}
-        {:else}
-          <ProfileName pubkey={others[0]} />
-          {#if others.length > 1}
-            and {others.length - 1} {others.length > 2 ? "others" : "other"}
-          {/if}
-        {/if}
-      </strong>
-      <span class="truncate opacity-50">
-        {#if url}
-          <RelayName {url} />
-        {:else}
-          direct message
-        {/if}
-      </span>
-    </div>
-    <div class="flex min-w-0 items-center gap-1 text-sm opacity-75">
-      <span class="shrink-0">
-        {#if event.pubkey === $user.pubkey}
-          You:
-        {:else}
-          <ProfileName pubkey={event.pubkey} {url} />:
-        {/if}
-      </span>
-      <div class="min-w-0 flex-1">
-        <NoteContentMinimal {event} {url} singleLine />
-      </div>
-    </div>
-  </div>
-  <div class="flex shrink-0 items-center gap-2 text-xs opacity-50">
-    {formatTimestamp(event.created_at)}
-    <UnreadDot {path} />
-  </div>
-</Link>

src/app/components/HomeInboxItemCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import {formatTimestamp} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import Link from "@lib/components/Link.svelte"
+  import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
+  import UnreadDot from "@app/components/UnreadDot.svelte"
+  import {user} from "@app/core"
+
+  type Props = {
+    path: string
+    event: TrustedEvent
+    url?: string
+    icon: Snippet
+    title: Snippet
+    subtitle: Snippet
+  }
+
+  const {path, event, url, icon, title, subtitle}: Props = $props()
+</script>
+
+<Link href={path} class="card card-sm card-interactive flex items-center gap-3">
+  {@render icon()}
+  <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+    <div class="flex min-w-0 items-baseline gap-2 text-sm">
+      <strong class="truncate">{@render title()}</strong>
+      <span class="truncate opacity-50">{@render subtitle()}</span>
+    </div>
+    <div class="flex min-w-0 items-center gap-1 text-sm opacity-75">
+      <span class="shrink-0">
+        {#if event.pubkey === $user.pubkey}
+          You:
+        {:else}
+          <ProfileName pubkey={event.pubkey} {url} />:
+        {/if}
+      </span>
+      <div class="min-w-0 flex-1">
+        <NoteContentMinimal {event} {url} singleLine />
+      </div>
+    </div>
+  </div>
+  <div class="flex shrink-0 items-center gap-2 text-xs opacity-50">
+    {formatTimestamp(event.created_at)}
+    <UnreadDot {path} />
+  </div>
+</Link>

src/app/components/HomeInboxItemChat.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import {remove, uniq} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import HomeInboxItemCard from "@app/components/HomeInboxItemCard.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import ProfileName from "@app/components/ProfileName.svelte"
+  import {user} from "@app/core"
+
+  type Props = {
+    path: string
+    pubkeys: string[]
+    event: TrustedEvent
+  }
+
+  const {path, pubkeys, event}: Props = $props()
+
+  const others = $derived(uniq(remove($user.pubkey, pubkeys)))
+</script>
+
+<HomeInboxItemCard {path} {event}>
+  {#snippet icon()}
+    <ProfileCircle pubkey={others[0] || $user.pubkey} size={9} class="shrink-0" />
+  {/snippet}
+  {#snippet title()}
+    {#if others.length > 0}
+      <ProfileName pubkey={others[0]} />
+      {#if others.length > 1}
+        and {others.length - 1} {others.length > 2 ? "others" : "other"}
+      {/if}
+    {:else}
+      Note to self
+    {/if}
+  {/snippet}
+  {#snippet subtitle()}
+    direct message
+  {/snippet}
+</HomeInboxItemCard>

src/app/components/HomeInboxItemRoom.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import HomeInboxItemCard from "@app/components/HomeInboxItemCard.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+
+  type Props = {
+    path: string
+    url: string
+    h: string
+    event: TrustedEvent
+  }
+
+  const {path, url, h, event}: Props = $props()
+</script>
+
+<HomeInboxItemCard {path} {url} {event}>
+  {#snippet icon()}
+    <RelayIcon {url} size={9} class="shrink-0" />
+  {/snippet}
+  {#snippet title()}
+    <RoomName {url} {h} />
+  {/snippet}
+  {#snippet subtitle()}
+    <RelayName {url} />
+  {/snippet}
+</HomeInboxItemCard>

src/app/components/HomeInboxItemSpaceChat.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type {TrustedEvent} from "@welshman/util"
+  import HomeInboxItemCard from "@app/components/HomeInboxItemCard.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
+  import RelayName from "@app/components/RelayName.svelte"
+
+  type Props = {
+    path: string
+    url: string
+    event: TrustedEvent
+  }
+
+  const {path, url, event}: Props = $props()
+</script>
+
+<HomeInboxItemCard {path} {url} {event}>
+  {#snippet icon()}
+    <RelayIcon {url} size={9} class="shrink-0" />
+  {/snippet}
+  {#snippet title()}
+    Chat
+  {/snippet}
+  {#snippet subtitle()}
+    <RelayName {url} />
+  {/snippet}
+</HomeInboxItemCard>