Add classified listings

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

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {readable} from "svelte/store"
+  import type {Readable} from "svelte/store"
+  import {page} from "$app/stores"
+  import {sortBy, partition, spec, max, pushToMapKey} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {CLASSIFIED, getTagValue} from "@welshman/util"
+  import {fly} from "@lib/transition"
+  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
+  import ClassifiedItem from "@app/components/ClassifiedItem.svelte"
+  import ClassifiedCreate from "@app/components/ClassifiedCreate.svelte"
+  import {decodeRelay} from "@app/core/state"
+  import {setChecked} from "@app/util/notifications"
+  import {makeCommentFilter} from "@app/core/state"
+  import {makeFeed} from "@app/core/requests"
+  import {pushModal} from "@app/util/modal"
+
+  const url = decodeRelay($page.params.relay!)
+
+  let loading = $state(true)
+  let element: HTMLElement | undefined = $state()
+  let events: Readable<TrustedEvent[]> = $state(readable([]))
+
+  const createClassified = () => pushModal(ClassifiedCreate, {url})
+
+  const items = $derived.by(() => {
+    const scores = new Map<string, number[]>()
+    const [goals, comments] = partition(spec({kind: CLASSIFIED}), $events)
+
+    for (const comment of comments) {
+      const id = getTagValue("E", comment.tags)
+
+      if (id) {
+        pushToMapKey(scores, id, comment.created_at)
+      }
+    }
+
+    return sortBy(e => -max([...(scores.get(e.id) || []), e.created_at]), goals)
+  })
+
+  onMount(() => {
+    const feed = makeFeed({
+      url,
+      element: element!,
+      filters: [{kinds: [CLASSIFIED]}, makeCommentFilter([CLASSIFIED])],
+      onExhausted: () => {
+        loading = false
+      },
+    })
+
+    events = feed.events
+
+    return () => {
+      feed.cleanup()
+      setChecked($page.url.pathname)
+    }
+  })
+</script>
+
+<PageBar>
+  {#snippet icon()}
+    <div class="center">
+      <Icon icon={NotesMinimalistic} />
+    </div>
+  {/snippet}
+  {#snippet title()}
+    <strong>Classified Listings</strong>
+  {/snippet}
+  {#snippet action()}
+    <div class="row-2">
+      <Button class="btn btn-primary btn-sm" onclick={createClassified}>
+        <Icon icon={NotesMinimalistic} />
+        Create a Listing
+      </Button>
+      <SpaceMenuButton {url} />
+    </div>
+  {/snippet}
+</PageBar>
+
+<PageContent bind:element class="flex flex-col gap-2 p-2 pt-4">
+  {#each items as event (event.id)}
+    <div in:fly>
+      <ClassifiedItem {url} event={$state.snapshot(event)} />
+    </div>
+  {/each}
+  <p class="flex h-10 items-center justify-center py-20">
+    <Spinner {loading}>
+      {#if loading}
+        Looking for listingss...
+      {:else if items.length === 0}
+        No classified listings found.
+      {:else}
+        That's all!
+      {/if}
+    </Spinner>
+  </p>
+</PageContent>

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

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {page} from "$app/stores"
+  import {sleep} from "@welshman/lib"
+  import type {MakeNonOptional} from "@welshman/lib"
+  import {COMMENT, getTagValue} from "@welshman/util"
+  import {repository} from "@welshman/app"
+  import {request} from "@welshman/net"
+  import {deriveEventsById, deriveEventsAsc} from "@welshman/store"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import SortVertical from "@assets/icons/sort-vertical.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import PageBar from "@lib/components/PageBar.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Content from "@app/components/Content.svelte"
+  import NoteCard from "@app/components/NoteCard.svelte"
+  import SpaceMenuButton from "@app/components/SpaceMenuButton.svelte"
+  import ClassifiedActions from "@app/components/ClassifiedActions.svelte"
+  import CommentActions from "@app/components/CommentActions.svelte"
+  import EventReply from "@app/components/EventReply.svelte"
+  import {deriveEvent, decodeRelay} from "@app/core/state"
+  import {setChecked} from "@app/util/notifications"
+
+  const {relay, id} = $page.params as MakeNonOptional<typeof $page.params>
+  const url = decodeRelay(relay)
+  const event = deriveEvent(id, [url])
+  const filters = [{kinds: [COMMENT], "#E": [id]}]
+  const replies = deriveEventsAsc(deriveEventsById({filters, repository}))
+
+  const back = () => history.back()
+
+  const openReply = () => {
+    showReply = true
+  }
+
+  const closeReply = () => {
+    showReply = false
+  }
+
+  const expand = () => {
+    showAll = true
+  }
+
+  let showAll = $state(false)
+  let showReply = $state(false)
+
+  onMount(() => {
+    const controller = new AbortController()
+
+    request({relays: [url], filters, signal: controller.signal})
+
+    return () => {
+      controller.abort()
+      setChecked($page.url.pathname)
+    }
+  })
+</script>
+
+<PageBar>
+  {#snippet icon()}
+    <div>
+      <Button class="btn btn-neutral btn-sm flex-nowrap whitespace-nowrap" onclick={back}>
+        <Icon icon={AltArrowLeft} />
+        <span class="hidden sm:inline">Go back</span>
+      </Button>
+    </div>
+  {/snippet}
+  {#snippet title()}
+    <h1 class="text-xl">{getTagValue("title", $event?.tags || []) || ""}</h1>
+  {/snippet}
+  {#snippet action()}
+    <div>
+      <SpaceMenuButton {url} />
+    </div>
+  {/snippet}
+</PageBar>
+
+<PageContent class="flex flex-col p-2 pt-4">
+  {#if $event}
+    <div class="flex flex-col gap-3">
+      <NoteCard event={$event} {url} class="card2 bg-alt z-feature w-full">
+        <div class="col-3 ml-12">
+          <Content showEntire event={$event} {url} />
+          <ClassifiedActions showRoom event={$event} {url} />
+        </div>
+      </NoteCard>
+      {#if !showAll && $replies.length > 4}
+        <div class="flex justify-center">
+          <Button class="btn btn-link" onclick={expand}>
+            <Icon icon={SortVertical} />
+            Show all {$replies.length} replies
+          </Button>
+        </div>
+      {/if}
+      {#each $replies.slice(0, showAll ? undefined : 4) as reply (reply.id)}
+        <NoteCard event={reply} {url} class="card2 bg-alt z-feature w-full">
+          <div class="col-3 ml-12">
+            <Content showEntire event={reply} {url} />
+            <CommentActions segment="classifieds" event={reply} {url} />
+          </div>
+        </NoteCard>
+      {/each}
+    </div>
+    {#if showReply}
+      <EventReply {url} event={$event} onClose={closeReply} onSubmit={closeReply} />
+    {:else}
+      <div class="flex justify-end p-2">
+        <Button class="btn btn-primary" onclick={openReply}>
+          <Icon icon={Reply} />
+          Reply to listing
+        </Button>
+      </div>
+    {/if}
+  {:else}
+    {#await sleep(5000)}
+      <Spinner loading>Loading listing...</Spinner>
+    {:then}
+      <p>Failed to load classified listing.</p>
+    {/await}
+  {/if}
+</PageContent>

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

@@ -102,7 +102,7 @@
         <NoteCard event={reply} {url} class="card2 bg-alt z-feature w-full">
           <div class="col-3 ml-12">
             <Content showEntire event={reply} {url} />
-            <CommentActions event={reply} {url} />
+            <CommentActions segment="goals" event={reply} {url} />
           </div>
         </NoteCard>
       {/each}

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

@@ -6,6 +6,7 @@
   import {
     MESSAGE,
     THREAD,
+    CLASSIFIED,
     ZAP_GOAL,
     EVENT_TIME,
     COMMENT,
@@ -26,7 +27,12 @@
   import NoteItem from "@app/components/NoteItem.svelte"
   import RecentConversation from "@app/components/RecentConversation.svelte"
   import {decodeRelay, deriveEventsForUrl, CONTENT_KINDS} from "@app/core/state"
-  import {makeThreadPath, makeCalendarPath, makeGoalPath} from "@app/util/routes"
+  import {
+    makeThreadPath,
+    makeClassifiedPath,
+    makeCalendarPath,
+    makeGoalPath,
+  } from "@app/util/routes"
 
   const url = decodeRelay($page.params.relay!)
   const since = ago(MONTH)
@@ -133,6 +139,11 @@
                 View Thread
                 <Icon icon={AltArrowRight} />
               </Link>
+            {:else if event.kind === CLASSIFIED}
+              <Link href={makeClassifiedPath(url, event.id)} class="btn btn-primary btn-sm">
+                View Listing
+                <Icon icon={AltArrowRight} />
+              </Link>
             {:else if event.kind === ZAP_GOAL}
               <Link href={makeGoalPath(url, event.id)} class="btn btn-primary btn-sm">
                 View Goal

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

@@ -99,7 +99,7 @@
         <NoteCard event={reply} {url} class="card2 bg-alt z-feature w-full">
           <div class="col-3 ml-12">
             <Content showEntire event={reply} {url} />
-            <CommentActions event={reply} {url} />
+            <CommentActions segment="threads" event={reply} {url} />
           </div>
         </NoteCard>
       {/each}