Allow web IDE to save and/or show warning before navigating away from page (eg. refresh)

[0xdevalias]

It would be cool if the web IDE allowed us to save to browser storage, or at the very least showed a popup/confirmation if we try to navigate away from /refresh the page while working on something.

I'm not sure why my muscle memory was doing it, but I kept hitting cmd+R to try and rename variables yesterday, and lost my in-progress work like 5 times before I managed to force myself to stop pressing it.

Potentially relevant:

• https://github.com/pionxzh/wakaru/issues/131
  • https://github.com/jvilk/browserfs#deprecated
  • https://github.com/zen-fs/core

[j4k0xb]

Done, it now saves and shows a prompt for 5s when loading the site Can you try it? https://deploy-preview-79--webcrack.netlify.app/

[0xdevalias]

Done, it now saves and shows a prompt for 5s when loading the site Can you try it?

@j4k0xb That is pretty cool!

A few notes:

• Being down in the bottom right corner, I didn't notice it immediately.
• There was no UI indication that it would only be visible for 5 seconds. Maybe showing a countdown on it would help with that?
• Even better still, at least for me, I would prefer no countdown at all, and it to persist until I closed it, as that seems a fairly minor inconvenience (maybe it could be configurable if it would be annoying to others)
• I noticed that technically, even if the dialog goes away and I didn't click either, if I then reload the page again I can get it back (unsure if that would have the old state, or the new state 'empty' state.
  • If the old state, it sort of adds support to the 'why countdown at all'.
  • By the looks of it, it is the old state:
    • 
  • Or maybe even if it does still do the countdown/disappear, perhaps there could be a 'file browser' or other method in the UI of manually triggering the 'restore dialog' again later.
  • If the new 'empty' state, it would probably be better to detect when it's the 'unmodified default' and not save it/show the dialog.
  • This doesn't seem to be the case; confirmed in PR code: https://github.com/j4k0xb/webcrack/pull/79/files#diff-c35544c9b20a9f7ade736c150d94f916951a1231bcfe603b225bd5743b580a7eR64-R68
• While this offers a nice 'recovery option', my original thinking (and still likely better UX for me) would probably be to warn with a 'you have unsaved changes, are you sure you want to leave' sort of confirmation. If this would be annoying for people, maybe making it configurable would work? If you did implement this, I would still keep the 'recover dialog' as well, as that is a super nice UX.
  • eg. https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes

Also did a little code review with some thoughts/notes added there:

• https://github.com/j4k0xb/webcrack/pull/79#pullrequestreview-2064564469

[j4k0xb]

While this offers a nice 'recovery option', my original thinking (and still likely better UX for me) would probably be to warn with a 'you have unsaved changes, are you sure you want to leave' sort of confirmation. If this would be annoying for people, maybe making it configurable would work

True, gonna add that Adding a config might not even be necessary because browsers show that option Nvm still needed, it resets after a reload

I'll probably remove the restore alert (annoying when it appears on pretty much every site load) and think of some other place in the sidebar that can be used at any time, which should also result in better UX

[0xdevalias]

True, gonna add that

@j4k0xb Awesome!

I'll probably remove the restore alert and think of some other place in the sidebar that can be used at any time

@j4k0xb nods sounds good. I agree that that feels like a better UX as well.

Maybe instead of just saving the files 'as is', there could be some notion of like a 'session' or similar that they get saved into? Not sure if this is overengineering it, but was sort of thinking in terms of thinking a bit like Chrome tab history/restore/similar.

Like, a completely arbitrary off the top of my head example could be that when the web app loads, it creates a UUID for that current session, and then any files that are written to storage are keyed with that UUID (and probably a 'last updated' timestamp; perhaps for the session overall, and the file).

Then in the 'restore UI', it could show the last X sessions (sorted by timestamp); or something to that effect.

(With this, was mostly thinking that since the 'restore state' is going to persist longer than 5sec now; it might make sense to try and scope/group the 'files' a bit more 'logically'; so that a new session doesn't inadvertently wipe out the old one)

[0xdevalias]

Just had a chance to quickly test this now that #79 has landed.

Trying to refresh the page (with unsaved content):

Trying to navigate away from the page (with unsaved content):

If I do reload/navigate away, when I come back, I can attempt to restore from the 'File' -> 'Open Recent' menu:

• The keybindings shown in the menu items are wrong on macOS:
  • Edit: Raised as https://github.com/j4k0xb/webcrack/issues/90
• It would be good if 'Open Recent' showed a chevron (>) or similar to make it more obvious that it's a sub-menu
  • Edit: Raised as https://github.com/j4k0xb/webcrack/issues/91

But when I clicked on it, it didn't seem to actually restore the item at all.

• Edit: Raised as https://github.com/j4k0xb/webcrack/issues/92