Translation Coverage Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the string table, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the language, the switch and what you typed in the copy are in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

From the strings. Each key holds its text in every language, with an empty string where a translation is missing, and a language's share is the number of keys that have text divided by the number of keys, rounded to a whole percent, so the chips, the line under them ("15 of 16 keys") and the Missing only list can never disagree. Add a translation to STRINGS and every figure follows. Nothing here is a verdict on quality: a language at 100% only has text for every key.

The switch keeps the keys whose text is empty in the chosen language, and each of those rows says Missing in italics, never in a colour, and shows the English so a translator knows what to write. English has nothing missing, so with the switch on the list is empty and says so ("Nothing is missing in English"), in the same fixed height as the list, so the menu never changes size. Changing the language or the switch announces the new coverage.

Each row ends with a copy button that the pointer reaches and the tab order does not, so a click never moves focus out of the input or picks the row. From the keyboard, move to a row and press Alt and C (Option and C on a Mac); the block reads event.code, so Option's characters do not matter. The status line says which key was copied, or that the browser refused.

All of it. The keys and their translations are typed, nothing is saved and choosing a key only moves the chip in the drawing. In your app build STRINGS from your catalogue (a JSON file per language works), keep the empty string for a missing translation and make pick open the key's editor.

Yes. Tab reaches the language chips and the switch, then the input; type to search, the arrow keys move through the rows, Enter selects the highlighted key and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. Each text carries its own lang, and Arabic is set right to left inside the row.