Add “Watcher” Mode to Monitor Local File Changes

[eliyya]

Description

This PR introduces a new “Watcher” mode under the File > Import menu, allowing users to monitor changes to a selected local file and automatically update the editor and graph.

Motivation

I work a lot with generating JSON files and I use jsoncrack.com a lot to view the generation, but having to re-import the JSON every time it is regenerated really disrupts my workflow. jsoncrack.com is already perfect, but I thought that if the tool had a watch mode it would be much better, so I implemented that option.

Implementation Details

• Added a "Watcher" button in the import modal.

• If the FilePicker API is not disponible, the button was not disponibe annd shows a message

• When activated, the file picker (window.showOpenFilePicker) opens for the user to select a file.
• The selected file is loaded initially, and a setInterval runs every 3 seconds to check for changes using fileHandle.getFile().
• If the file changes, the content is reloaded into the editor, the graph is refreshed and a toast appears.

• A global state is used to manage the watcher and its interval.
• While watcher mode is active:
  • The editor is set to readonly.
  • Format change options and Live Transform are disabled.
• A “Stop Watching” button is available to stop the watcher, clear the interval, and re-enable disabled features.

Benefits

• Allows real-time monitoring and visualization of local files without manual re-import.
• Ideal for workflows where files are generated or updated externally.
• Maintains compatibility with the existing import flow.

[AykutSarac]

I ran into an error when I clicked the Watcher button, we should add 'showOpenFilePicker' in window to check if user's browser supports the feature. Apparently it's disabled in Brave for privacy reasons, so I couldn't test it at the moment.

I like the idea though, good job! Let's wait for comments on the PR for now. 🏁

[eliyya]

To show it in the UI, I think it would be good to disable the button and use a tooltip with a 500ms delay to show the reason like a...

Any opinion?

[atilaahmettaner]

The initial watch state does not transfer the file to the editor, it transfers it when changes are made. Can you also resolve the initial watch state here?

[atilaahmettaner]

I tested the watch mode on Chrome overall and it works well. File updates from an external editor trigger the "File updated!" toast properly, the editor goes read-only as expected, and the graph refreshes correctly. Good job on the implementation.

However I found a few issues:

1. Initial file content not loading on first watch

When I first open the app and click the Watcher button, the selected file's content doesn't load into the editor. The old content stays. It gets updated only when the file is modified externally. This doesn't happen every time but specifically when you first open the app and immediately start watch mode.

2. Closing the modal stops watch mode

If watch mode is active and you open the Import Modal again and close it, watch mode gets stopped. The onClose handler calls toggleWatchMode(false) which kills the watcher. The user might just want to close the modal, not stop watching.
toggleWatchMode(false);

this stops watch mode unintentionally

3. console.log left in code

There's a console.log(file) left in the import handler that should be removed before merging.

[atilaahmettaner]

@eliyya looks good, just a small typo — "suported" should be "supported" in the tooltip text. other than that everything works fine 👍

[eliyya]

When I first open the app and click the Watcher button, the selected file's content doesn't load into the editor. The old content stays. It gets updated only when the file is modified externally. This doesn't happen every time but specifically when you first open the app and immediately start watch mode.

I can't reproduce this bug. In the initials commits I fixed that, so, I don't know if the bug i'ts appearing again or i'ts an old bug. It still appearing yet?

Im still usin a lot the watcher, tnx for the feedback and sorry for the typos, english is not my first language