Feat/toggle flags w cmd

[noahonyejese]

What Changes?
This PR adds a keyboard command handler in order to allow users to toggle the debug flag by entering toggledebug

How to test

1. Go to this link
2. enter toggledebug
3. See how the url changes to have ?flag__debug=true

---

ps: @bprusinowski not sure if this the preferred approach, was pretty simple 15 min effort, not sure if it works on preview link

• Add a CHANGELOG entry

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
visualization-tool	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 25, 2025 8:27am

[bprusinowski]

Thanks for kick-starting this @noahonyejese, I think in general it's a really nice idea 🎉

I tried it in Safari on the preview link and it didn't work (cmd + t opens a new tab, and cmd + d adds a site to bookmarks 😅). I think here I'd avoid using cmd or ctrl + XYZ shortcuts exactly due to this reason, that they can be already assigned to some native browser actions.

I think it would probably be safe to simply type e.g. "enabledebug" that would open the debug panel – also we could consider using a third-party library, https://github.com/chris-feist/use-konami worked well in another project (but it's fine if the current code works) :)

[noahonyejese]

@bprusinowski currently it's always crtl + t + d also for mac, there should be no native binding to this for any browser and and operating system. Maybe it makes sense to consider your approach, but rather by @sosiology , @KerstinFaye since it's for them primarily?

[bprusinowski]

@noahonyejese I've also tried with ctrl, and it didn't work, maybe it's broken in Safari, or I'm doing something wrong 🥹 I personally feel like it should be something natural to remember, that's why I'd prefer to have a "memorable text" (as I also use debug mode often 😅), but if you can make sure it works across browsers, it's also fine 🤞

[noahonyejese]

@bprusinowski I see, generally it's maybe not working because of the enable condition? in _app.tsx not sure I thought that is the correct value to determine when to allow it?

The only downside to the text for me is that I never know how much I already typed 😅

[bprusinowski]

At the moment I'm not sure why it doesn't work, we'd need to investigate 🔍

[noahonyejese]

@bprusinowski I adjusted this to use konami

[noahonyejese]

@bprusinowski is there still something wrong here?

[bprusinowski]

@noahonyejese I believe the behavior should be that when user types toggledebug, the debug panel icon automatically shows. I see that the relevant part is added to the URL now, but you need to know about this, click on the URL, hit enter, and only then you actually have a debug panel visible 😄 Here I feel like it should only be necessary to enter the text, would it be possible to make it work like this? 🤔

PS. I think the CHANGELOG is wrong now, it still indicates the shortcut method 🔍