Push a history entry when switching spaces instead of replacing the current one (#407)

Co-authored-by: Coracle-Bot <npub1klq6260@nostr.local>

e2e/specs/routing.spec.ts

@@ -1,7 +1,7 @@
 import {spec} from "@welshman/lib"
 import type {TrustedEvent} from "@welshman/util"
 import {RelayMessageType} from "@welshman/net"
-import {expect, getTranscript, roomPath, test, users} from "../harness"
+import {expect, getTranscript, roomPath, spacePath, test, users} from "../harness"
 
 test("keeps two spaces' contents on their own relays", async ({seed, as}) => {
   const scenario = await seed(({relay, user}) => {
@@ -55,3 +55,60 @@ test("keeps two spaces' contents on their own relays", async ({seed, as}) => {
 
   expect(strays).toEqual([])
 })
+
+test("goes back to the room you left when you switch spaces", async ({seed, as}) => {
+  const scenario = await seed(({relay, user}) => {
+    const space = relay("space")
+    const other = relay("other")
+
+    space.room("lounge", {name: "Space Lounge"})
+    other.room("lounge", {name: "Other Lounge"})
+    space.join(user.alice, "lounge")
+    other.join(user.alice, "lounge")
+  })
+
+  const space = scenario.space("space")
+  const other = scenario.space("other")
+  const page = await as(users.alice, roomPath(space.url, "lounge"))
+
+  await expect(page.getByRole("link", {name: "Space Lounge"})).toBeVisible()
+
+  await page.locator('.primary-nav [data-tip^="other"]').click()
+  await expect(page).toHaveURL(new RegExp(spacePath(other.url)))
+
+  await page.getByRole("link", {name: "Other Lounge"}).click()
+  await expect(page).toHaveURL(new RegExp(`${roomPath(other.url, "lounge")}$`))
+
+  // Two entries back: the other space's landing page, then the room this started on. The switch
+  // used to replace that room's entry rather than push one, so the second step overshot it.
+  await page.goBack()
+  await page.goBack()
+
+  await expect(page).toHaveURL(new RegExp(`${roomPath(space.url, "lounge")}$`))
+})
+
+test("does not stack a history entry for the space you are already in", async ({seed, as}) => {
+  const scenario = await seed(({relay, user}) => {
+    const space = relay("space")
+
+    space.room("lounge", {name: "Space Lounge"})
+    space.room("garden", {name: "Space Garden"})
+    space.join(user.alice, "lounge")
+    space.join(user.alice, "garden")
+  })
+
+  const space = scenario.space("space")
+  const page = await as(users.alice, roomPath(space.url, "lounge"))
+
+  await page.getByRole("link", {name: "Space Garden"}).click()
+  await expect(page).toHaveURL(new RegExp(`${roomPath(space.url, "garden")}$`))
+
+  // The space's entry page is the room you are on, so this navigates nowhere and should replace
+  // rather than push. One step back is the room this started on, not the one it never left.
+  await page.locator('.primary-nav [data-tip^="space"]').click()
+  await expect(page).toHaveURL(new RegExp(`${roomPath(space.url, "garden")}$`))
+
+  await page.goBack()
+
+  await expect(page).toHaveURL(new RegExp(`${roomPath(space.url, "lounge")}$`))
+})

src/app/components/PrimaryNavItemSpace.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import {goto} from "$app/navigation"
+  import {page} from "$app/stores"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
   import RelayIcon from "@app/components/RelayIcon.svelte"
   import {relays} from "@app/core"
-  import {makeSpacePath, goToSpace} from "@app/routes"
+  import {makeSpacePath, makeSpaceEntryPath} from "@app/routes"
   import {notifications} from "@app/notifications"
 
   type Props = {
@@ -12,7 +14,11 @@
 
   const {url, showTooltip = true}: Props = $props()
 
-  const onClick = () => goToSpace(url)
+  const onClick = () => {
+    const entryPath = makeSpaceEntryPath(url)
+
+    goto(entryPath, {replaceState: entryPath === $page.url.pathname})
+  }
 
   const path = makeSpacePath(url)
 

src/app/components/SpaceInviteAccept.svelte

@@ -63,7 +63,7 @@
     }
 
     pushToast({message: "Welcome to the space!"})
-    await goToSpace(data.url)
+    await goToSpace(data.url, {replaceState: true})
   }
 
   const join = async () => {

src/app/components/SpaceJoin.svelte

@@ -40,7 +40,7 @@
       await access.completeJoin(notifications)
 
       pushToast({message: "Welcome to the space!"})
-      await goToSpace(url)
+      await goToSpace(url, {replaceState: true})
     } catch (e) {
       console.error("Failed to join space:", e)
       pushToast({theme: "error", message: "Failed to join space. Please try again."})

src/app/routes.ts

@@ -85,30 +85,33 @@ export const makeSpacePath = (url: string, ...extra: (string | undefined)[]) =>
   return path
 }
 
-export const goToSpace = (url: string, hash = "") => {
+export const makeSpaceEntryPath = (url: string) => {
   const prevPath = lastPageBySpaceUrl.get(encodeRelay(url))
 
   if (prevPath && prevPath !== makeSpacePath(url)) {
-    return goto(prevPath + hash, {replaceState: true})
+    return prevPath
   }
 
   if (!relays.get().get(url)?.hasNip(29)) {
-    return goto(makeSpaceChatPath(url) + hash, {replaceState: true})
+    return makeSpaceChatPath(url)
   }
 
   if (window.matchMedia(`(min-width: ${theme.screens.md})`).matches) {
-    return goto(makeSpacePath(url, "about") + hash, {replaceState: true})
+    return makeSpacePath(url, "about")
   }
 
-  return goto(makeSpacePath(url) + hash, {replaceState: true})
+  return makeSpacePath(url)
 }
 
+export const goToSpace = (url: string, options: {replaceState?: boolean} = {}) =>
+  goto(makeSpaceEntryPath(url), options)
+
 export const goToMovedSpace = (oldUrl: string, newUrl: string) =>
   goto(get(page).url.pathname.replace(encodeRelay(oldUrl), encodeRelay(newUrl)))
 
 export const goToHome = () => {
   if (PLATFORM_RELAYS.length > 0) {
-    return goToSpace(PLATFORM_RELAYS[0], get(page).url.hash)
+    return goto(makeSpaceEntryPath(PLATFORM_RELAYS[0]) + get(page).url.hash, {replaceState: true})
   }
 
   return goto("/home" + get(page).url.hash)

src/routes/home/+page.svelte

@@ -15,7 +15,7 @@
 
   onMount(async () => {
     if (PLATFORM_RELAYS.length > 0) {
-      goToSpace(PLATFORM_RELAYS[0])
+      goToSpace(PLATFORM_RELAYS[0], {replaceState: true})
     }
   })
 </script>

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

@@ -13,7 +13,7 @@
 
   $effect(() => {
     if (width > md) {
-      goToSpace(url)
+      goToSpace(url, {replaceState: true})
     }
   })
 </script>