Add thread share button

src/app/components/ChannelCompose.svelte

@@ -9,6 +9,7 @@
   import {getPubkeyHints} from "@app/commands"
 
   export let onSubmit
+  export let content = ""
 
   const loading = writable(false)
 
@@ -27,6 +28,9 @@
     editor = createEditor(
       getEditorOptions({submit, loading, getPubkeyHints, submitOnEnter: true, autofocus: true}),
     )
+
+    console.log($editor, content)
+    $editor.commands.setContent(content)
   })
 </script>
 

src/app/components/ThreadMenu.svelte

@@ -4,6 +4,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Confirm from "@lib/components/Confirm.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
+  import ThreadShare from "@app/components/ThreadShare.svelte"
   import {publishDelete} from "@app/commands"
   import {pushModal} from "@app/modal"
 
@@ -16,6 +17,11 @@
     pushModal(EventInfo, {event})
   }
 
+  const share = () => {
+    onClick()
+    pushModal(ThreadShare, {url, event})
+  }
+
   const showDelete = () => {
     onClick()
     pushModal(Confirm, {
@@ -34,6 +40,12 @@
 </script>
 
 <ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
+  <li>
+    <Button on:click={share}>
+      <Icon size={4} icon="share-circle" />
+      Share to Chat
+    </Button>
+  </li>
   <li>
     <Button on:click={showInfo}>
       <Icon size={4} icon="code-2" />

src/app/components/ThreadShare.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import {nip19} from "nostr-tools"
+  import {goto} from '$app/navigation'
+  import {ctx} from '@welshman/lib'
+  import Icon from "@lib/components/Icon.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import {roomsByUrl} from "@app/state"
+  import {makeRoomPath} from "@app/routes"
+
+  export let url
+  export let event
+
+  const relays = ctx.app.router.Event(event).getUrls()
+  const nevent = nip19.neventEncode({id: event.id, relays})
+
+  const back = () => history.back()
+
+  const onSubmit = () =>
+    goto(makeRoomPath(url, selection) + '?content=nostr:' + nevent)
+
+  const toggleRoom = (room: string) => {
+    selection = room === selection ? "" : room
+  }
+
+  let selection = ""
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={onSubmit}>
+  <ModalHeader>
+    <div slot="title">Share Thread</div>
+    <div slot="info">Which room would you like to share this thread to?</div>
+  </ModalHeader>
+  <div class="grid grid-cols-3 gap-2">
+    {#each $roomsByUrl.get(url) || [] as room (room)}
+      <button
+        type="button"
+        class="btn"
+        class:btn-neutral={selection !== room}
+        class:btn-primary={selection === room}
+        on:click={() => toggleRoom(room)}>
+        #{room}
+      </button>
+    {/each}
+  </div>
+  <ModalFooter>
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={!selection}>
+      Share Thread
+      <Icon icon="alt-arrow-right" />
+    </Button>
+  </ModalFooter>
+</form>

src/app/routes.ts

@@ -13,6 +13,9 @@ export const makeSpacePath = (url: string, extra = "") => {
 
 export const makeChatPath = (pubkeys: string[]) => `/chat/${makeChatId(pubkeys)}`
 
+export const makeRoomPath = (url: string, room: string) =>
+  `/spaces/${encodeRelay(url)}/${room}`
+
 export const makeThreadPath = (url: string, eventId: string) =>
   `/spaces/${encodeRelay(url)}/threads/${eventId}`
 

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

@@ -11,7 +11,7 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {writable} from "svelte/store"
-  import {sortBy, now, assoc, append} from "@welshman/lib"
+  import {sortBy, fromPairs, now, assoc, append} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent} from "@welshman/util"
   import {formatTimestampAsDate, subscribe, publishThunk} from "@welshman/app"
@@ -40,6 +40,7 @@
   import {pushDrawer} from "@app/modal"
 
   const {room = GENERAL} = $page.params
+  const {content = ""} = fromPairs(Array.from($page.url.searchParams))
   const url = decodeRelay($page.params.relay)
   const channel = deriveChannel(makeChannelId(url, room))
   const thunks = writable({} as Record<string, Thunk>)
@@ -146,5 +147,5 @@
       </Spinner>
     </p>
   </div>
-  <ChannelCompose {onSubmit} />
+  <ChannelCompose {content} {onSubmit} />
 </div>