Replace state when opening a modal from a drawer

2024-10-24 14:18:32 -07:00
parent ceb7f3340d
commit 058f1d09d2
4 changed files with 99 additions and 87 deletions
@@ -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>
@@ -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
 }
@@ -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
 }
@@ -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