From 058f1d09d2ec3485cb43f47773505b53ddd58f4c Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 24 Oct 2024 14:18:32 -0700
Subject: [PATCH] Replace state when opening a modal from a drawer

---
 src/app/components/MenuSpace.svelte | 178 +++++++++++++++-------------
 src/app/implicit.ts                 |   3 +-
 src/app/modal.ts                    |   3 +-
 src/lib/components/Drawer.svelte    |   2 +-
 4 files changed, 99 insertions(+), 87 deletions(-)

diff --git a/src/app/components/MenuSpace.svelte b/src/app/components/MenuSpace.svelte
index d89dab96..05a49648 100644
--- a/src/app/components/MenuSpace.svelte
+++ b/src/app/components/MenuSpace.svelte
@@ -38,15 +38,19 @@
   }
 
   const showMembers = () =>
-    pushModal(ProfileList, {pubkeys: members, title: `Members of`, subtitle: displayRelayUrl(url)})
+    pushModal(
+      ProfileList,
+      {pubkeys: members, title: `Members of`, subtitle: displayRelayUrl(url)},
+      {replaceState}
+    )
 
-  const createInvite = () => pushModal(SpaceInvite, {url})
+  const createInvite = () => pushModal(SpaceInvite, {url}, {replaceState})
 
-  const leaveSpace = () => pushModal(SpaceExit, {url})
+  const leaveSpace = () => pushModal(SpaceExit, {url}, {replaceState})
 
-  const joinSpace = () => pushModal(SpaceJoin, {url})
+  const joinSpace = () => pushModal(SpaceJoin, {url}, {replaceState})
 
-  const addRoom = () => pushModal(RoomCreate, {url})
+  const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
   const getDelay = (reset = false) => {
     if (reset) {
@@ -60,12 +64,16 @@
 
   let delay = 0
   let showMenu = false
+  let replaceState = false
+  let element: Element
 
   $: rooms = getMembershipRoomsByUrl(url, $userMembership)
   $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
   $: members = $memberships.filter(l => hasMembershipUrl(l, url)).map(l => l.event.pubkey)
 
   onMount(async () => {
+    replaceState = Boolean(element.closest('.drawer'))
+
     const error = (await checkRelayConnection(url)) || (await checkRelayAuth(url))
 
     if (error) {
@@ -74,93 +82,95 @@
   })
 </script>
 
-<SecondaryNavSection>
-  <div>
-    <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
-      <strong>{displayRelayUrl(url)}</strong>
-      <Icon icon="alt-arrow-down" />
-    </SecondaryNavItem>
-    {#if showMenu}
-      <Popover hideOnClick onClose={toggleMenu}>
-        <ul
-          transition:fly
-          class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
-          <li>
-            <Button on:click={showMembers}>
-              <Icon icon="user-rounded" />
-              View Members ({members.length})
-            </Button>
-          </li>
-          <li>
-            <Button on:click={createInvite}>
-              <Icon icon="link-round" />
-              Create Invite
-            </Button>
-          </li>
-          <li>
-            {#if getMembershipUrls($userMembership).includes(url)}
-              <Button on:click={leaveSpace} class="text-error">
-                <Icon icon="exit" />
-                Leave Space
+<div bind:this={element}>
+  <SecondaryNavSection>
+    <div>
+      <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
+        <strong>{displayRelayUrl(url)}</strong>
+        <Icon icon="alt-arrow-down" />
+      </SecondaryNavItem>
+      {#if showMenu}
+        <Popover hideOnClick onClose={toggleMenu}>
+          <ul
+            transition:fly
+            class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+            <li>
+              <Button on:click={showMembers}>
+                <Icon icon="user-rounded" />
+                View Members ({members.length})
               </Button>
-            {:else}
-              <Button on:click={joinSpace}>
-                <Icon icon="login-2" />
-                Join Space
+            </li>
+            <li>
+              <Button on:click={createInvite}>
+                <Icon icon="link-round" />
+                Create Invite
               </Button>
-            {/if}
-          </li>
-        </ul>
-      </Popover>
-    {/if}
-  </div>
-  <div in:fly={{delay: getDelay(true)}}>
-    <SecondaryNavItem href={makeSpacePath(url)}>
-      <Icon icon="notes-minimalistic" /> Threads
-    </SecondaryNavItem>
-  </div>
-  <div transition:slide={{delay: getDelay()}}>
-    <div class="h-2" />
-    <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-  </div>
-  <div transition:slide={{delay: getDelay()}}>
-    <SecondaryNavItem href={makeSpacePath(url, GENERAL)}>
-      <Icon icon="hashtag" />
-      {GENERAL}
-    </SecondaryNavItem>
-  </div>
-  {#each rooms as room, i (room)}
-    <div transition:slide={{delay: getDelay()}}>
-      <SecondaryNavItem href={makeSpacePath(url, room)}>
-        <Icon icon="hashtag" />
-        {room}
+            </li>
+            <li>
+              {#if getMembershipUrls($userMembership).includes(url)}
+                <Button on:click={leaveSpace} class="text-error">
+                  <Icon icon="exit" />
+                  Leave Space
+                </Button>
+              {:else}
+                <Button on:click={joinSpace}>
+                  <Icon icon="login-2" />
+                  Join Space
+                </Button>
+              {/if}
+            </li>
+          </ul>
+        </Popover>
+      {/if}
+    </div>
+    <div in:fly={{delay: getDelay(true)}}>
+      <SecondaryNavItem href={makeSpacePath(url)}>
+        <Icon icon="notes-minimalistic" /> Threads
       </SecondaryNavItem>
     </div>
-  {/each}
-  {#if otherRooms.length > 0}
     <div transition:slide={{delay: getDelay()}}>
       <div class="h-2" />
-      <SecondaryNavHeader>
-        {#if rooms.length > 0}
-          Other Rooms
-        {:else}
-          Rooms
-        {/if}
-      </SecondaryNavHeader>
+      <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
     </div>
-  {/if}
-  {#each otherRooms as room, i (room)}
     <div transition:slide={{delay: getDelay()}}>
-      <SecondaryNavItem href={makeSpacePath(url, room)}>
+      <SecondaryNavItem href={makeSpacePath(url, GENERAL)}>
         <Icon icon="hashtag" />
-        {room}
+        {GENERAL}
       </SecondaryNavItem>
     </div>
-  {/each}
-  <div in:fly={{delay: getDelay()}}>
-    <SecondaryNavItem on:click={addRoom}>
-      <Icon icon="add-circle" />
-      Create room
-    </SecondaryNavItem>
-  </div>
-</SecondaryNavSection>
+    {#each rooms as room, i (room)}
+      <div transition:slide={{delay: getDelay()}}>
+        <SecondaryNavItem href={makeSpacePath(url, room)}>
+          <Icon icon="hashtag" />
+          {room}
+        </SecondaryNavItem>
+      </div>
+    {/each}
+    {#if otherRooms.length > 0}
+      <div transition:slide={{delay: getDelay()}}>
+        <div class="h-2" />
+        <SecondaryNavHeader>
+          {#if rooms.length > 0}
+            Other Rooms
+          {:else}
+            Rooms
+          {/if}
+        </SecondaryNavHeader>
+      </div>
+    {/if}
+    {#each otherRooms as room, i (room)}
+      <div transition:slide={{delay: getDelay()}}>
+        <SecondaryNavItem href={makeSpacePath(url, room)}>
+          <Icon icon="hashtag" />
+          {room}
+        </SecondaryNavItem>
+      </div>
+    {/each}
+    <div in:fly={{delay: getDelay()}}>
+      <SecondaryNavItem on:click={addRoom}>
+        <Icon icon="add-circle" />
+        Create room
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</div>
diff --git a/src/app/implicit.ts b/src/app/implicit.ts
index 8d5de364..2c2409cb 100644
--- a/src/app/implicit.ts
+++ b/src/app/implicit.ts
@@ -8,7 +8,8 @@ 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)
+  // Goofy hack due to sveltekit's double-rendering
+  setTimeout(() => state.delete(key), 300)
 
   return value
 }
diff --git a/src/app/modal.ts b/src/app/modal.ts
index 33778796..8ac2012e 100644
--- a/src/app/modal.ts
+++ b/src/app/modal.ts
@@ -6,6 +6,7 @@ import {goto} from "$app/navigation"
 export type ModalOptions = {
   drawer?: boolean
   fullscreen?: boolean
+  replaceState?: boolean
 }
 
 export type Modal = {
@@ -28,7 +29,7 @@ export const pushModal = (
 
   modals.update(assoc(id, {id, component, props, options}))
 
-  goto("#" + id)
+  goto("#" + id, {replaceState: options.replaceState})
 
   return id
 }
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
index 9bf2dfc1..423898c8 100644
--- a/src/lib/components/Drawer.svelte
+++ b/src/lib/components/Drawer.svelte
@@ -4,7 +4,7 @@
   export let onClose
 </script>
 
-<div class="fixed inset-0 z-modal">
+<div class="fixed inset-0 z-modal drawer">
   <button
     class="absolute inset-0 cursor-pointer bg-black opacity-50"
     transition:fade