replace state when navigating from space menu

android/app/build.gradle

@@ -7,7 +7,7 @@ android {
         applicationId "social.flotilla"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 8
+        versionCode 9
         versionName "0.2.7"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {

src/app/components/MenuSpace.svelte

@@ -57,14 +57,14 @@
   const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
 
   let showMenu = $state(false)
-  let replaceState = false
+  let replaceState = $state(false)
   let element: Element | undefined = $state()
 
   const members = $derived(
     $memberships.filter(l => hasMembershipUrl(l, url)).map(l => l.event.pubkey),
   )
 
-  onMount(async () => {
+  onMount(() => {
     replaceState = Boolean(element?.closest(".drawer"))
     pullConservatively({relays: [url], filters: [{kinds: [GROUP_META]}]})
   })
@@ -112,19 +112,25 @@
       {/if}
     </div>
     <div class="flex min-h-0 flex-col gap-1 overflow-auto">
-      <SecondaryNavItem href={makeSpacePath(url)}>
+      <SecondaryNavItem {replaceState} href={makeSpacePath(url)}>
         <Icon icon="home-smile" /> Home
       </SecondaryNavItem>
-      <SecondaryNavItem href={threadsPath} notification={$notifications.has(threadsPath)}>
+      <SecondaryNavItem
+        {replaceState}
+        href={threadsPath}
+        notification={$notifications.has(threadsPath)}>
         <Icon icon="notes-minimalistic" /> Threads
       </SecondaryNavItem>
-      <SecondaryNavItem href={calendarPath} notification={$notifications.has(calendarPath)}>
+      <SecondaryNavItem
+        {replaceState}
+        href={calendarPath}
+        notification={$notifications.has(calendarPath)}>
         <Icon icon="calendar-minimalistic" /> Calendar
       </SecondaryNavItem>
       <div class="h-2"></div>
       <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
       {#each $userRooms as room, i (room)}
-        <MenuSpaceRoomItem notify {url} {room} />
+        <MenuSpaceRoomItem {replaceState} notify {url} {room} />
       {/each}
       {#if $otherRooms.length > 0}
         <div class="h-2"></div>
@@ -137,9 +143,9 @@
         </SecondaryNavHeader>
       {/if}
       {#each $otherRooms as room, i (room)}
-        <MenuSpaceRoomItem {url} {room} />
+        <MenuSpaceRoomItem {replaceState} {url} {room} />
       {/each}
-      <SecondaryNavItem onclick={addRoom}>
+      <SecondaryNavItem {replaceState} onclick={addRoom}>
         <Icon icon="add-circle" />
         Create room
       </SecondaryNavItem>

src/app/components/MenuSpaceRoomItem.svelte

@@ -10,15 +10,19 @@
     url: any
     room: any
     notify?: boolean
+    replaceState?: boolean
   }
 
-  const {url, room, notify = false}: Props = $props()
+  const {url, room, notify = false, replaceState = false}: Props = $props()
 
   const path = makeRoomPath(url, room)
   const channel = deriveChannel(url, room)
 </script>
 
-<SecondaryNavItem href={path} notification={notify ? $notifications.has(path) : false}>
+<SecondaryNavItem
+  href={path}
+  {replaceState}
+  notification={notify ? $notifications.has(path) : false}>
   {#if channelIsLocked($channel)}
     <Icon icon="lock" size={4} />
   {:else}

src/lib/components/SecondaryNavItem.svelte

@@ -24,15 +24,16 @@
   import {fade} from "@lib/transition"
   import {page} from "$app/stores"
 
-  const {children, href = "", notification = false, ...restProps} = $props()
+  const {children, href = "", notification = false, replaceState = false, ...restProps} = $props()
 
   const active = $derived($page.url.pathname === href)
 </script>
 
 {#if href}
   <a
-    {...restProps}
     {href}
+    {...restProps}
+    data-sveltekit-replacestate={replaceState}
     class="{restProps.class} relative flex items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
     class:text-base-content={active}
     class:bg-base-100={active}>