Start working on threads page

src/app.css

@@ -96,7 +96,7 @@
 
 /* tiptap */
 
-.input-editor, .chat-editor {
+.input-editor, .chat-editor, .note-editor {
   @apply p-1 -m-1 min-h-12;
 }
 
@@ -113,6 +113,10 @@
   @apply input input-bordered p-[.65rem] h-auto;
 }
 
+.note-editor .tiptap[contenteditable="true"] {
+  @apply input input-bordered p-[.65rem] h-auto min-h-32 pb-6;
+}
+
 .tiptap pre code {
   @apply link-content block w-full;
 }

src/app/components/ThreadCard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {displayPubkey} from '@welshman/util'
+  import {deriveProfile, deriveProfileDisplay, formatTimestamp} from "@welshman/app"
+  import Avatar from '@lib/components/Avatar.svelte'
+  import {getChatViewOptions} from '@app/editor'
+
+  export let root
+  export let replies
+
+  const profile = deriveProfile(root.pubkey)
+  const profileDisplay = deriveProfileDisplay(root.pubkey)
+
+  let editor: Readable<Editor>
+
+  onMount(() => {
+    editor = createEditor(getChatViewOptions(root.content))
+  })
+</script>
+
+<div>
+  <div class="card2 flex flex-col gap-2">
+    <div class="flex justify-between items-center gap-2">
+      <div class="flex gap-2">
+        <div class="py-1">
+          <Avatar src={$profile?.picture} size={10} />
+        </div>
+        <div class="flex flex-col">
+          <div class="text-bold">{$profileDisplay}</div>
+          <div class="text-sm opacity-75">{displayPubkey(root.pubkey)}</div>
+        </div>
+      </div>
+      <span class="text-sm opacity-75">{formatTimestamp(root.created_at)}</span>
+    </div>
+    <div class="ml-12">
+      <EditorContent editor={$editor} />
+    </div>
+  </div>
+  {#if replies.length > 0}
+    Show {replies.length} {replies.length === 1 ? 'reply' : 'replies'}
+  {/if}
+</div>

src/app/components/ThreadCreate.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {writable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
+  import {NProfileExtension, ImageExtension} from "nostr-editor"
+  import {randomId} from "@welshman/lib"
+  import {createEvent, NOTE} from "@welshman/util"
+  import {publishThunk, makeThunk, dateToSeconds} from "@welshman/app"
+  import {findNodes} from "@lib/tiptap"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import DateTimeInput from "@lib/components/DateTimeInput.svelte"
+  import {makeMention, makeIMeta} from "@app/commands"
+  import {getNoteEditorOptions, addFile, uploadFiles} from "@app/editor"
+  import {pushModal, clearModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+
+  export let url
+
+  const submit = () => uploadFiles($editor)
+
+  const back = () => history.back()
+
+  const uploading = writable(false)
+
+  const sendMessage = () => {
+    const json = $editor.getJSON()
+    const mentionTags = findNodes(NProfileExtension.name, json).map(m =>
+      makeMention(m.attrs!.pubkey, m.attrs!.relays),
+    )
+    const imetaTags = findNodes(ImageExtension.name, json).map(({attrs: {src, sha256: x}}: any) =>
+      makeIMeta(src, {x, ox: x}),
+    )
+
+    const event = createEvent(NOTE, {
+      content: $editor.getText(),
+      tags: [
+        ...mentionTags,
+        ...imetaTags,
+      ],
+    })
+
+    publishThunk(makeThunk({event, relays: [url]}))
+    clearModal()
+  }
+
+  let editor: Readable<Editor>
+
+  onMount(() => {
+    editor = createEditor(getNoteEditorOptions({uploading, sendMessage}))
+  })
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={submit}>
+  <div class="py-2">
+    <h1 class="heading">Create a Thread</h1>
+    <p class="text-center">Share your thoughts, or start a discussion.</p>
+  </div>
+  <div class="relative">
+    <div class="flex-grow overflow-hidden note-editor">
+      <EditorContent editor={$editor} />
+    </div>
+    <Button
+      data-tip="Add an image"
+      class="tooltip tooltip-left absolute right-2 bottom-1"
+      on:click={() => addFile($editor)}>
+      {#if $uploading}
+        <span class="loading loading-spinner loading-xs"></span>
+      {:else}
+        <Icon icon="paperclip" size={3} />
+      {/if}
+    </Button>
+  </div>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary">
+      Create Thread
+    </Button>
+  </div>
+</form>
+

src/app/editor.ts

@@ -206,3 +206,4 @@ export const getNoteEditorOptions = ({uploading, sendMessage}: EditorOptions) =>
     }),
   ],
 })
+

src/app/state.ts

@@ -1,9 +1,10 @@
 import {nip19} from "nostr-tools"
 import {get, derived} from "svelte/store"
 import type {Maybe} from "@welshman/lib"
-import {setContext, nth, max, pushToMapKey, nthEq} from "@welshman/lib"
+import {setContext, partition, nth, max, pushToMapKey, nthEq} from "@welshman/lib"
 import {
   getIdFilters,
+  NOTE,
   RELAYS,
   REACTION,
   ZAP_RESPONSE,
@@ -11,6 +12,8 @@ import {
   EVENT_TIME,
   getRelayTagValues,
   isShareableRelayUrl,
+  getAncestorTags,
+  getAncestorTagValues,
 } from "@welshman/util"
 import type {TrustedEvent} from "@welshman/util"
 import {
@@ -93,7 +96,7 @@ export const readMembership = (event: TrustedEvent): PublishedMembership => {
     roomsByUrl.set(tag[1], [])
   }
 
-  for (const tag of event.tags.filter(nthEq(0, "t"))) {
+  for (const tag of event.tags.filter(nthEq(0, "~"))) {
     pushToMapKey(roomsByUrl, tag[2], tag[1])
   }
 
@@ -191,7 +194,7 @@ export const {
   },
 })
 
-// Calendar vents
+// Calendar events
 
 export const events = deriveEvents(repository, {filters: [{kinds: [EVENT_DATE, EVENT_TIME]}]})
 
@@ -207,6 +210,43 @@ export const eventsByUrl = derived([trackerStore, events], ([$tracker, $events])
   return eventsByUrl
 })
 
+// Threads
+
+export type Thread = {
+  root: TrustedEvent
+  replies: TrustedEvent[]
+}
+
+export const notes = deriveEvents(repository, {filters: [{kinds: [NOTE]}]})
+
+export const threadsByUrl = derived([trackerStore, notes], ([$tracker, $notes]) => {
+  const threadsByUrl = new Map<string, Thread[]>()
+  const [parents, children] = partition(e => getAncestorTags(e.tags).replies.length === 0, $notes)
+
+  for (const event of parents) {
+    for (const url of $tracker.getRelays(event.id)) {
+      pushToMapKey(threadsByUrl, url, {root: event, replies: []})
+    }
+  }
+
+  for (const event of children) {
+    const [id] = getAncestorTagValues(event.tags).replies
+
+    for (const url of $tracker.getRelays(event.id)) {
+      const threads = threadsByUrl.get(url) || []
+      const thread = threads.find(thread => thread.root.id === id)
+
+      if (!thread) {
+        continue
+      }
+
+      thread.replies.push(event)
+    }
+  }
+
+  return threadsByUrl
+})
+
 // Rooms
 
 export const roomsByUrl = derived(chats, $chats => {

src/assets/icons/Calendar Add.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12Z" stroke="#1C274C" stroke-width="1.5"/>
+<path d="M18 16L16 16M16 16L14 16M16 16L16 14M16 16L16 18" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M7 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M17 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M2.5 9H21.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/lib/components/Icon.svelte

@@ -22,6 +22,7 @@
   import ArrowRight from "@assets/icons/Arrow Right.svg?dataurl"
   import Bag from "@assets/icons/Bag.svg?dataurl"
   import Bolt from "@assets/icons/Bolt.svg?dataurl"
+  import CalendarAdd from "@assets/icons/Calendar Add.svg?dataurl"
   import CalendarMinimalistic from "@assets/icons/Calendar Minimalistic.svg?dataurl"
   import ChatRound from "@assets/icons/Chat Round.svg?dataurl"
   import CheckCircle from "@assets/icons/Check Circle.svg?dataurl"
@@ -87,6 +88,7 @@
     "arrow-right": ArrowRight,
     bag: Bag,
     bolt: Bolt,
+    "calendar-add": CalendarAdd,
     "calendar-minimalistic": CalendarMinimalistic,
     "chat-round": ChatRound,
     "check-circle": CheckCircle,

src/routes/spaces/[nrelay]/+layout.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {sort, now} from "@welshman/lib"
-  import {displayRelayUrl, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
+  import {displayRelayUrl, NOTE, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
   import {subscribe} from "@welshman/app"
   import {fly, slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -16,7 +16,7 @@
   import SpaceExit from "@app/components/SpaceExit.svelte"
   import SpaceJoin from "@app/components/SpaceJoin.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
-  import {userMembership, roomsByUrl, decodeNRelay, GENERAL, MESSAGE, REPLY} from "@app/state"
+  import {userMembership, roomsByUrl, decodeNRelay, GENERAL, MESSAGE} from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
@@ -52,7 +52,7 @@
   $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
 
   onMount(() => {
-    const kinds = [MESSAGE, REPLY, EVENT_DATE, EVENT_TIME, CLASSIFIED]
+    const kinds = [NOTE, MESSAGE, EVENT_DATE, EVENT_TIME, CLASSIFIED]
     const sub = subscribe({filters: [{kinds, since: now() - 30}], relays: [url]})
 
     return () => sub.close()

src/routes/spaces/[nrelay]/[[room]]/+page.svelte

@@ -71,9 +71,9 @@
       class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
       <div class="flex items-center gap-2">
         <Icon icon="hashtag" />
-        <strong>{room || "General"}</strong>
+        <strong>{room}</strong>
       </div>
-      {#if room}
+      {#if room !== GENERAL}
         {#if membership.includes(room)}
           <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, room)}>
             <Icon icon="arrows-a-logout-2" />

src/routes/spaces/[nrelay]/calendar/+page.svelte

@@ -69,7 +69,7 @@
   </div>
   <Button class="fixed bottom-4 right-4 tooltip tooltip-left p-1" data-tip="Create an Event" on:click={createEvent}>
     <div class="w-12 h-12 flex items-center justify-center btn btn-primary btn-circle">
-      <Icon icon="widget-add" />
+      <Icon icon="calendar-add" />
     </div>
   </Button>
 </div>

src/routes/spaces/[nrelay]/threads/+page.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import {page} from "$app/stores"
+  import {sortBy, last} from '@welshman/lib'
+  import type {TrustedEvent} from '@welshman/util'
+  import {formatTimestampAsDate} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import ThreadCard from "@app/components/ThreadCard.svelte"
+  import ThreadCreate from "@app/components/ThreadCreate.svelte"
+  import {pushModal} from "@app/modal"
+  import {threadsByUrl, decodeNRelay} from "@app/state"
+
+  const url = decodeNRelay($page.params.nrelay)
+
+  const createThread = () => pushModal(ThreadCreate, {url})
+
+  let loading = true
+
+  $: threads = sortBy(thread => -thread.root.created_at, $threadsByUrl.get(url) || [])
+
+  setTimeout(() => {
+    loading = false
+  }, 3000)
+</script>
+
+<div class="relative flex h-screen flex-col">
+  <div class="relative z-feature mx-2 rounded-xl pt-4">
+    <div
+      class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+      <div class="flex items-center gap-2">
+        <Icon icon="notes-minimalistic" />
+        <strong>Threads</strong>
+      </div>
+    </div>
+  </div>
+  <div class="flex flex-grow flex-col overflow-auto p-2 gap-2">
+    {#each threads as {root, replies} (root.id)}
+      <ThreadCard {root} {replies} />
+    {/each}
+    <p class="flex h-10 items-center justify-center py-20">
+      <Spinner {loading}>
+        {#if loading}
+          Looking for threads...
+        {:else if threads.length === 0}
+          No threads found.
+        {/if}
+      </Spinner>
+    </p>
+  </div>
+  <Button class="fixed bottom-4 right-4 tooltip tooltip-left p-1" data-tip="Create an Event" on:click={createThread}>
+    <div class="w-12 h-12 flex items-center justify-center btn btn-primary btn-circle">
+      <Icon icon="add-square" />
+    </div>
+  </Button>
+</div>