Use item components on recent page

src/app/components/RoomMembersAdd.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
+  import {onMount} from "svelte"
-  import {setKey, popKey} from '@lib/implicit'
+  import {setKey, popKey} from "@lib/implicit"
   import {sleep} from "@welshman/lib"
   import {ManagementMethod} from "@welshman/util"
   import {manageRelay} from "@welshman/app"
@@ -81,16 +81,17 @@
     const nonSpaceMembers = pubkeysSnapshot.filter(pubkey => !$spaceMembers.includes(pubkey))
 
     if (nonSpaceMembers.length > 0) {
-      setKey('RoomMembersAdd.pubkeys', pubkeysSnapshot)
+      setKey("RoomMembersAdd.pubkeys", pubkeysSnapshot)
 
       pushModal(Confirm, {
         title: "New Space Members",
         subtitle: "Automatically add members to space",
-        message: nonSpaceMembers.length === 1
+        message:
-          ? `${displayProfileByPubkey(nonSpaceMembers[0])} is not a member of this space. Add them?`
+          nonSpaceMembers.length === 1
-          : `${nonSpaceMembers.length} people are not members of this space. Add them?`,
+            ? `${displayProfileByPubkey(nonSpaceMembers[0])} is not a member of this space. Add them?`
+            : `${nonSpaceMembers.length} people are not members of this space. Add them?`,
         confirm: async () => {
-          setKey('RoomMembersAdd.confirm', true)
+          setKey("RoomMembersAdd.confirm", true)
           back()
         },
       })
@@ -100,12 +101,12 @@
   }
 
   let loading = $state(false)
-  let pubkeys: string[] = $state(popKey('RoomMembersAdd.pubkeys') || [])
+  let pubkeys: string[] = $state(popKey("RoomMembersAdd.pubkeys") || [])
 
   onMount(() => {
-    console.log('=====')
+    console.log("=====")
-    if (popKey('RoomMembersAdd.confirm')) {
+    if (popKey("RoomMembersAdd.confirm")) {
-      console.log('hi')
+      console.log("hi")
       addMembers()
     }
   })

src/app/util/modal.ts

@@ -1,5 +1,5 @@
 import type {Component} from "svelte"
-import {derived, writable} from "svelte/store"
+import {writable} from "svelte/store"
 import {randomId, always, assoc, Emitter} from "@welshman/lib"
 import {deriveDeduplicated} from "@welshman/store"
 import {goto} from "$app/navigation"

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

@@ -18,7 +18,6 @@
   import NoteContent from "@app/components/NoteContent.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
   import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
-  import GoalSummary from "@app/components/GoalSummary.svelte"
   import GoalActions from "@app/components/GoalActions.svelte"
   import CommentActions from "@app/components/CommentActions.svelte"
   import EventReply from "@app/components/EventReply.svelte"
@@ -86,7 +85,6 @@
       <NoteCard event={$event} {url} class="card2 bg-alt z-feature w-full">
         <div class="col-3 ml-12">
           <NoteContent showEntire event={{...$event, content: summary}} {url} />
-          <GoalSummary event={$event} {url} />
           <GoalActions showRoom event={$event} {url} />
         </div>
       </NoteCard>

src/routes/spaces/[relay]/recent/+page.svelte

@@ -10,7 +10,6 @@
     ZAP_GOAL,
     EVENT_TIME,
     COMMENT,
-    getAddress,
     getTagValue,
     getTagValues,
     getIdAndAddress,
@@ -18,23 +17,18 @@
   import type {TrustedEvent} from "@welshman/util"
   import {repository} from "@welshman/app"
   import History from "@assets/icons/history.svg?dataurl"
-  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
-  import Link from "@lib/components/Link.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import PageContent from "@lib/components/PageContent.svelte"
   import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
   import NoteItem from "@app/components/NoteItem.svelte"
+  import ThreadItem from "@app/components/ThreadItem.svelte"
+  import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
+  import GoalItem from "@app/components/GoalItem.svelte"
+  import CalendarEventItem from "@app/components/CalendarEventItem.svelte"
   import RecentConversation from "@app/components/RecentConversation.svelte"
-  import ClassifiedStatus from "@app/components/ClassifiedStatus.svelte"
   import {decodeRelay, deriveEventsForUrl, CONTENT_KINDS} from "@app/core/state"
-  import {
-    makeThreadPath,
-    makeClassifiedPath,
-    makeCalendarPath,
-    makeGoalPath,
-  } from "@app/util/routes"
 
   const url = decodeRelay($page.params.relay!)
   const since = ago(MONTH)
@@ -134,39 +128,16 @@
       {#each $recentActivity.slice(0, limit) as { type, event, count = 0 } (event.id)}
         {#if type === "message"}
           <RecentConversation {url} {event} {count} />
+        {:else if event.kind === THREAD}
+          <ThreadItem {url} {event} />
+        {:else if event.kind === CLASSIFIED}
+          <ClassifiedItem {url} {event} />
+        {:else if event.kind === ZAP_GOAL}
+          <GoalItem {url} {event} />
+        {:else if event.kind === EVENT_TIME}
+          <CalendarEventItem {url} {event} />
         {:else}
-          <NoteItem {url} {event}>
+          <NoteItem {url} {event} />
-            {#if event.kind === THREAD}
-              <Link
-                href={makeThreadPath(url, event.id)}
-                class="btn btn-primary btn-xs rounded-full">
-                View Thread
-                <Icon icon={AltArrowRight} />
-              </Link>
-            {:else if event.kind === CLASSIFIED}
-              <div class="flex gap-2">
-                <ClassifiedStatus {event} />
-                <Link
-                  href={makeClassifiedPath(url, getAddress(event))}
-                  class="btn btn-primary btn-xs rounded-full">
-                  View Listing
-                  <Icon icon={AltArrowRight} />
-                </Link>
-              </div>
-            {:else if event.kind === ZAP_GOAL}
-              <Link href={makeGoalPath(url, event.id)} class="btn btn-primary btn-xs rounded-full">
-                View Goal
-                <Icon icon={AltArrowRight} />
-              </Link>
-            {:else if event.kind === EVENT_TIME}
-              <Link
-                href={makeCalendarPath(url, getAddress(event))}
-                class="btn btn-primary btn-xs rounded-full">
-                View Event
-                <Icon icon={AltArrowRight} />
-              </Link>
-            {/if}
-          </NoteItem>
         {/if}
       {/each}
     {/if}