add UI to toggle loop protection via <!-- noprotect -->

[skyash-dev]

Issue:

Fixes #4081

Adds a UI control for enabling/disabling loop protection from Preferences.
This implementation treats <!-- noprotect --> in index.html as the source of truth:

• turning loop protection off inserts <!-- noprotect --> in index.html
• which turns off loop protection globally (i.e. does not insert loop protection code in all the sketches).
• turning it on removes the comment
• the toggle state is derived from the index.html

Demo:

Changes:

• added loop protection toggle UI in Preferences
• derive loop protection state from index.html
• update index.html noprotect comment when toggled
• keep toggle and <!-- noprotect --> comment in sync
• added unit test

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123
• meets the standards outlined in the accessibility guidelines

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[skyash-dev]

toggle padding/margins feel off, making the outlines appear uncentered. can i create a commit in this pr itself?

actual:

improved:

[davepagurek]

I think we're good to go ahead with the comment living in index.html -- possibly a bit unexpected for users of other tools, but then it's in one spot, and people mostly will use the UI anyway.

For padding/margins, maybe make a separate issue/PR? It's always a little weird doing design updates since often these are fairly subjective and could use a bit of feedback, so we don't need to block this PR on those updates.

[skyash-dev]

hi @davepagurek!
you should check out the latest changes. i moved the loop protection directive to index.html