Switch to implicit state

src/app/components/ThreadShare.svelte

@@ -2,12 +2,14 @@
   import {nip19} from "nostr-tools"
   import {goto} from "$app/navigation"
   import {ctx} from "@welshman/lib"
+  import {toNostrURI} from "@welshman/util"
   import Icon from "@lib/components/Icon.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"
+  import {setKey} from "@app/implicit"
 
   export let url
   export let event
@@ -17,7 +19,10 @@
 
   const back = () => history.back()
 
-  const onSubmit = () => goto(makeRoomPath(url, selection) + "?content=nostr:" + nevent)
+  const onSubmit = () => {
+    setKey('content', toNostrURI(nevent))
+    goto(makeRoomPath(url, selection), {replaceState: true})
+  }
 
   const toggleRoom = (room: string) => {
     selection = room === selection ? "" : room

src/app/implicit.ts

@@ -0,0 +1,14 @@
+// Use this for passing state between pages implicitly
+const state = new Map<string, any>()
+
+export const setKey = <T>(key: string, value: T) => state.set(key, value)
+
+export const getKey = <T>(key: string) => state.get(key) as T | undefined
+
+export const popKey = <T>(key: string) => {
+  const value: T | undefined = state.get(key)
+
+  state.delete(key)
+
+  return value
+}

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

@@ -38,9 +38,10 @@
   } from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
   import {pushDrawer} from "@app/modal"
+  import {popKey} from "@app/implicit"
 
   const {room = GENERAL} = $page.params
-  const {content = ""} = fromPairs(Array.from($page.url.searchParams))
+  const content = popKey<string>('content') || ""
   const url = decodeRelay($page.params.relay)
   const channel = deriveChannel(makeChannelId(url, room))
   const thunks = writable({} as Record<string, Thunk>)

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

@@ -6,13 +6,16 @@
   import {deriveEvents} from "@welshman/store"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
+  import PageBar from "@lib/components/PageBar.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 MenuSpace from "@app/components/MenuSpace.svelte"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import ThreadReply from "@app/components/ThreadReply.svelte"
   import {COMMENT, deriveEvent, decodeRelay} from "@app/state"
+  import {pushDrawer} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
   const {relay, id} = $page.params
@@ -23,6 +26,8 @@
 
   const back = () => history.back()
 
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
   const openReply = () => {
     showReply = true
   }
@@ -40,7 +45,7 @@
   })
 </script>
 
-<div class="relative flex flex-col-reverse gap-3 p-2">
+<div class="relative flex flex-col-reverse gap-3 px-2">
   <div class="absolute left-[51px] top-20 h-[calc(100%-200px)] w-[2px] bg-neutral" />
   {#if $event}
     {#if !showReply}
@@ -72,15 +77,19 @@
       <p>Failed to load thread.</p>
     {/await}
   {/if}
-  <div class="flex items-center justify-between">
-    <Button class="mb-2 mt-5 flex items-center gap-2" on:click={back}>
-      <Icon icon="alt-arrow-left" />
-      Go back
-    </Button>
-    <Link href={makeSpacePath(url)}>
-      @<span class="text-primary">{displayUrl(url)}</span>
-    </Link>
-  </div>
+  <PageBar>
+    <div slot="icon">
+      <Button class="btn btn-neutral btn-sm" on:click={back}>
+        <Icon icon="alt-arrow-left" />
+        Go back
+      </Button>
+    </div>
+    <div slot="action">
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm md:hidden">
+        <Icon icon="menu-dots" />
+      </Button>
+    </div>
+  </PageBar>
 </div>
 {#if showReply}
   <ThreadReply {url} event={$event} onClose={closeReply} onSubmit={closeReply} />