Clean up back button in combination with modals

README.md

@@ -49,14 +49,8 @@ If you like Coracle and want to support its development, you can donate sats via
 
 # Maintenance
 
-- [ ] Fix login flow
-- [ ] Fix navigation
-  - Stack views?
-  - Put user detail in a modal?
-  - ReplaceState for settings modals?
 - [ ] Use nip 56 for reporting
   - https://github.com/nostr-protocol/nips/pull/205#issuecomment-1419234230
-- [ ] Mentions are sorta weird, usually mention self
 - [ ] Change network tab to list relays the user is connected to
 - [ ] Sync mentions box and in-reply mentions
 - [ ] Add petnames for channels
@@ -71,6 +65,7 @@ If you like Coracle and want to support its development, you can donate sats via
 - [x] Wait for profile info on login, navigate to network by default
 - [x] Fix mention selection, inheritance, and inclusion in notes
 - [x] Parse links without http at the beginning
+- [x] Clean up back button in combination with modals
 
 ## 0.2.9
 

src/App.svelte

@@ -10,7 +10,7 @@
   import {Router, Route, links, navigate} from "svelte-routing"
   import {globalHistory} from "svelte-routing/src/history"
   import {displayPerson, isLike} from 'src/util/nostr'
-  import {timedelta, now} from 'src/util/misc'
+  import {timedelta, now, sleep} from 'src/util/misc'
   import {keys, user, pool, getRelays} from 'src/agent'
   import {modal, toast, settings, logUsage, alerts, messages, loadAppData} from "src/app"
   import {routes} from "src/app/ui"
@@ -50,8 +50,12 @@
   const searchIsOpen = writable(false)
   const toggleSearch = () => searchIsOpen.update(x => !x)
 
-  const closeModal = () => {
-    modal.set(null)
+  const closeModal = async () => {
+    while ($modal) {
+      history.back()
+      await sleep(1)
+    }
+
     menuIsOpen.set(false)
   }
 

src/app/ui.ts

@@ -1,5 +1,5 @@
 import Bugsnag from "@bugsnag/js"
-import {prop} from "ramda"
+import {prop, last} from "ramda"
 import {uuid} from "hurdak/lib/hurdak"
 import type {Writable} from 'svelte/store'
 import {navigate} from "svelte-routing"
@@ -37,24 +37,29 @@ toast.show = (type, message, timeout = 5) => {
 
 // Modals
 
+
 export const modal = {
-  subscribe: cb => {
-    const getModal = () =>
-      location.hash.includes('#modal=')
-        ? JSON.parse(decodeURIComponent(escape(atob(location.hash.replace('#modal=', '')))))
-        : null
-
-    cb(getModal())
-
-    return globalHistory.listen(() => cb(getModal()))
-  },
+  history: [],
   set: data => {
-    let path = location.pathname
     if (data) {
-      path += '#modal=' + btoa(unescape(encodeURIComponent(JSON.stringify(data))))
+      modal.history.push(data)
+      navigate(location.pathname + `#m=${modal.history.length - 1}`)
+    } else {
+      modal.history = []
+      navigate(location.pathname)
     }
+  },
+  subscribe: cb => {
+    cb(last(modal.history))
 
-    navigate(path)
+    return globalHistory.listen(({action}) => {
+      const match = location.hash.match(/\bm=(\d+)/)
+      const i = match ? parseInt(match[1]) : null
+
+      modal.history.splice(i === null ? -1 : i + 1)
+
+      cb(modal.history[i])
+    })
   },
 }
 

src/views/PersonSettings.svelte

@@ -30,7 +30,7 @@
 
     cmd.muffle(getRelays(), muffleTags)
 
-    modal.set(null)
+    history.back()
   }
 </script>