Replace state when opening a modal from a drawer

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,7 +82,8 @@
   })
 </script>
 
-<SecondaryNavSection>
+<div bind:this={element}>
+  <SecondaryNavSection>
     <div>
       <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
         <strong>{displayRelayUrl(url)}</strong>
@@ -163,4 +172,5 @@
         Create room
       </SecondaryNavItem>
     </div>
-</SecondaryNavSection>
+  </SecondaryNavSection>
+</div>

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
 }

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
 }

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