From ceb7f3340d1c72fbb4682902cdb82161ab5b7d36 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 24 Oct 2024 14:02:43 -0700
Subject: [PATCH] Switch to implicit state

---
 src/app/components/ThreadShare.svelte         |  7 ++++-
 src/app/implicit.ts                           | 14 +++++++++
 src/routes/spaces/[relay]/[room]/+page.svelte |  3 +-
 .../spaces/[relay]/threads/[id]/+page.svelte  | 29 ++++++++++++-------
 4 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 src/app/implicit.ts

diff --git a/src/app/components/ThreadShare.svelte b/src/app/components/ThreadShare.svelte
index bfbcca0..9463a2a 100644
--- a/src/app/components/ThreadShare.svelte
+++ b/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
diff --git a/src/app/implicit.ts b/src/app/implicit.ts
new file mode 100644
index 0000000..8d5de36
--- /dev/null
+++ b/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
+}
diff --git a/src/routes/spaces/[relay]/[room]/+page.svelte b/src/routes/spaces/[relay]/[room]/+page.svelte
index 4c3d31d..b8653d1 100644
--- a/src/routes/spaces/[relay]/[room]/+page.svelte
+++ b/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>)
diff --git a/src/routes/spaces/[relay]/threads/[id]/+page.svelte b/src/routes/spaces/[relay]/threads/[id]/+page.svelte
index 6743206..86816ac 100644
--- a/src/routes/spaces/[relay]/threads/[id]/+page.svelte
+++ b/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} />