shadcn.io is not affiliated with official shadcn/ui
Translation Coverage Command Menu Block for Vue
A localisation platform's string finder as a command menu shown open under a band of language chips with their coverage: keys with their text in the chosen language or the word Missing, a Missing only switch and a copy key button.
Installation
Overview
See what is translated and what is not with this translation coverage command menu for Vue with Ark UI. It opens from the Strings screen of Babelmoor, a localisation platform, whose header holds an outline field with its ⌘ K cap, and the string table is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command under a band: a ToggleGroup with a chip for each language and the share of the strings it has (en 100%, de 94%, es 81%, ja 63%, ar 69%, each worked out from the strings, never typed), and under it the chosen language's own name, set with its lang and dir, its coverage in words and a Switch, Missing only. Each row is a key in monospace and its text in that language, or the word Missing in italics with the English beside it, and a button that copies the key. Typing finds a key, its text or its English source, with or without accents. Choosing a key names it on the chip in the drawn table's bar. Nothing is edited. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same language, switch and query. For localisation tools, design systems with copy, and any product that ships in more than one language.
FAQ
Why is the menu already open, and what do I keep?
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.
Where do the percentages come from?
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.
How does Missing only work, and what if nothing is missing?
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.
How do I copy a key?
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.
What stays local, and how do I wire it?
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.
Is it accessible from the keyboard?
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 combobox and the first is highlighted when it opens. Each text carries its own lang, and Arabic is set right to left inside the row.