Grid Picker for HID Usage

[awkannan]

This changes the HidUsagePicker to a grid-of-buttons style of input, similar to what we see in VIA or VIAL.
We keep the modifier toggles so people can still add modifiers to their keys too.

Some decisions I made:

• I'm changing "src/hid-usage-name-overrides.json" to "src/hid-usage-metadata.json". We have to categorize keys manually - so instead of making a 2nd json for categorization which basically had the same shape, I decided to just make the name overrides json a bit more generic. The idea is if we need to add anything else, i.e. icons - it can go in this file, which isn't just limited to name overrides
• On top of that - if something is going to be categorized in a way that shows it on the grid, we should consider how we want it to be shown on the grid. We should probably define a short name or medium name for these.
• We have 5 categories - Basic, Numpad, Apps/Media, ISO/JIS, and Other
• I used the categorization in the ZMK Docs

Some things I need help with:

• I used Gemini to help me with the CSS. I'm not great at tailwind, so I would love someone with more experience there to review the CSS. It all seems sensible to me, though.

[netlify]

✅ Deploy Preview for zmk-studio ready!

Name	Link
🔨 Latest commit	330ded3
🔍 Latest deploy log	https://app.netlify.com/projects/zmk-studio/deploys/698d8640bbc0468382547f06
😎 Deploy Preview	https://deploy-preview-159.preview.zmk.studio
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[awkannan]

Example.mp4

[peterjc]

Are you putting ISO keys like non-us-pound and non-us-backslash on basic?

[awkannan]

NUHS and NUBS are both under the ISO/JIS section at the moment

[peterjc]

Ah - a little cryptic so I missed them, but that's good. Thanks!

[joelspadin]

Would "International" be a better name for "ISO/JIS"?

[adminhxx]

Show "Key Press" in a virtual keyboard may be better, like https://hodgef.com/simple-keyboard/demos/?d=fullKeyboard. That's what I did in my fork, and it works very well.

[awkannan]

Show "Key Press" in a virtual keyboard may be better, like https://hodgef.com/simple-keyboard/demos/?d=fullKeyboard. That's what I did in my fork, and it works very well.

I think this could be a good improvement - but I don't want to add too much into this PR.

Right now, it's pretty easy to digest, but with the special-casing dropdown for the "Other" category, it's already a bit messier than I had hoped.

IMO - we should consider this in a subsequent PR. I think this one already moves the experience forward incrementally, and that would be a good incremental change on top of this.

[alt-0191]

Great work, any further update on this?

[awkannan]

I got some feedback from Pete which I haven’t been able to implement yet. I’m gonna do it this weekend and hopefully we can get this merged.

[petejohanson]

Improved, IMHO!

A few thoughts:

1. I think we should consistently do / separated, .e.g. "Numbers/Punctuation". Also, I think the third tab should include "Mods" or "Modifiers" in the label, since those are there.
2. With this "pulled out" the implicit modifiers are left on top with a label of "Key" (from the behavior metadata, IIRC), which is confusing. I think there should be some additional label/indicator that those are "Implicit" or "Automatic" modifiers to help users understand what they're doing.
3. When selecting a new key/reloading the display, we should probably auto-select the tab that contains that key, so it's easy to see "Here's the key that's selected" or maybe add some indicator to the tab for the tab that holds the selected key?

Thanks for working on this!