Put modal state in hash to support multi-layer navigation

README.md

@@ -1,9 +1,6 @@
 Bugs
 
-- [ ] Back button is pretty broken
 - [ ] Permalink note detail (share/permalink button?). Permalinks don't work
-- [ ] Prevent tabs from re-mounting (or at least re- animating)
-- [ ] Go "back" after adding a note
 - [ ] uniq and sortBy are sprinkled all over the place, figure out a better solution
 - [ ] With link/image previews, remove the url from the note body if it's on a separate last line
 - [ ] Search page is slow and likes don't show up. Probably move this server-side

src/App.svelte

@@ -50,7 +50,7 @@
       }
     })
 
-    modal.subscribe($modal => {
+    return modal.subscribe($modal => {
       // Keep scroll position on body, but don't allow scrolling
       if ($modal) {
         // This is not idempotent, so don't duplicate it
@@ -64,20 +64,6 @@
         document.body.style = ''
         window.scrollTo(0, scrollY)
       }
-
-      // Push another state so back button only closes the modal
-      if ($modal && !location.hash.startsWith('#modal')) {
-        globalHistory.navigate(location.pathname + '#modal')
-      }
-    })
-
-    globalHistory.listen(({action}) => {
-      // Once we've navigated, close our modal if we don't have m in the hash
-      setTimeout(() => {
-        if ($modal && !location.hash.startsWith('#modal')) {
-          modal.set(null)
-        }
-      }, 50)
     })
   })
 </script>

src/routes/NoteCreate.svelte

@@ -17,7 +17,7 @@
 
     toast.show("info", `Your note has been created!`)
 
-    navigate('/notes/global')
+    history.back()
   }
 
   onMount(() => {

src/state/app.js

@@ -2,12 +2,34 @@ import {when, prop, identity, whereEq, reverse, uniq, sortBy, uniqBy, find, last
 import {debounce} from 'throttle-debounce'
 import {writable, get} from 'svelte/store'
 import {navigate} from "svelte-routing"
+import {globalHistory} from "svelte-routing/src/history"
 import {switcherFn} from 'hurdak/lib/hurdak'
 import {getLocalJson, setLocalJson, now, timedelta, sleep} from "src/util/misc"
 import {user} from 'src/state/user'
 import {epoch, filterMatches, Listener, channels, relays, findReplyTo} from 'src/state/nostr'
 
-export const modal = writable(null)
+// ws://localhost:7000
+
+export const modal = {
+  subscribe: cb => {
+    const getModal = () =>
+      location.hash.includes('#modal=')
+        ? JSON.parse(atob(location.hash.replace('#modal=', '')))
+        : null
+
+    cb(getModal())
+
+    return globalHistory.listen(() => cb(getModal()))
+  },
+  set: data => {
+    let path = location.pathname
+    if (data) {
+      path += '#modal=' + btoa(JSON.stringify(data))
+    }
+
+    navigate(path)
+  },
+}
 
 export const settings = writable({
   showLinkPreviews: true,