Rework the global protected terms UI, and fix the header controls

[simoncodes-ca]

What

The protected-terms chip multi-select on /settings becomes a real list, and the app header's three controls get sorted out.

Protected terms

• A list you can add to, delete from, and rename in place, saved explicitly.
• Deleting keeps the row visible, struck through and marked REMOVING, with Undo. It reaches the file only on Save, so a pending removal is reviewable and reversible without a confirm dialog.
• Renaming happens inline on the row; Enter commits, Escape cancels, collisions are reported in place.
• Terms are listed and written alphabetically. The list is a set, and a sorted file keeps its diffs to one line per change — which is what docs/features/protected-terms.md already promises.
• A filter appears past eight terms. Adding or renaming a term the filter would hide drops the filter, so what you just typed is never invisible.
• The save controls sit in the page header and the list scrolls inside itself, so Save, the add field and the filter can't scroll out of view. Below 500px of viewport height the explanation and file path give up their rows.

Header

• The gear opened the theme menu and a sliders icon went to Settings. The gear now goes to Settings.
• The theme switcher wears the theme you're looking at — sun or moon — instead of a fixed glyph. On system it shows the resolved theme; which mode is selected stays legible through the label and the menu check.
• The locale picker was a mat-icon-button holding an icon and a text label, so the globe was clipped to a sliver by the button's fixed square.
• Gaps between the three controls were 16px / 8px / 16px, which is why they read as three floating items. Now one 4px gap set once on a container.
• Settings goes inert on /settings, where clicking it did nothing.

Worth a reviewer's attention

The explanation text was wrong, and not in the way it looked. It credited auto-translation with keeping terms verbatim. Auto-translation doesn't read the list at all — the "protection" in that pipeline is placeholder protection, swapping ICU placeholders for markers. The list is enforced in export (marks terms found in each source string for translators) and import (rejects a translation that altered one). The copy now names both.

Two Angular traps that are worth knowing because the same shapes exist elsewhere in this app:

• A computed() calling transloco.translate() caches whatever it reads first, and first read happens before the translation file loads — so it serves the raw key forever after. The theme label now resolves through the pipe. keysText in the same component has the same shape and only escapes it because another dependency changes after load.
• .settings-page needed an explicit box-sizing: border-box. There's no global reset, so height: 100% plus padding overflowed the viewport by exactly the padding.

Settings goes inert via disabledInteractive, not a plain disabled. A plain disabled drops the control out of the tab order with no explanation; this keeps it focusable, announces aria-disabled, and adds aria-current="page" to say why. Easy to change if you'd rather it be fully removed.

Found but deliberately not fixed

The app shell renders wider than the viewport on /browser. .app-header measures 983px inside a 900px .app-container below about 1050px, because that route's content forces the grid column open and drags the header with it — pushing Settings off the right edge. /collections at the same width is clean, and the control group is byte-identical in width to before. Same mechanism puts a hard ~397px floor under the whole app. The candidate fix is grid-template-columns: minmax(0, 1fr) on .app-container, but .app-content is overflow-x: hidden, so that would clip the browser route rather than scroll it. Needs a decision about that surface.

Minor, untouched: the theme menu renders its check between the icon and the label ("☀ ✓ Light") rather than trailing it, and the .active row styling doesn't appear to take.

Accessibility

Six contrast failures on the settings page were measured and fixed, including the page title rendering black-on-black in dark mode — Angular Material's typography was overriding the theme token, and that predates this branch. Badge, error and icon colours are now mixed toward the foreground so they invert with the theme.

Also fixed: Material's 48px icon-button touch target overflowed the 45px rows and made the scroller report phantom overflow, so a scrollbar appeared on lists that fit. Dropped on fine pointers, restored at 44px under pointer: coarse.

i18n

21 new resources across all six shipped locales, added through the CLI. The two ICU plurals were written by hand with correct per-locale plural categories (Russian gets one/few/many). One Russian string was hand-corrected where the machine rendered "exports"/"imports" as "export systems"/"import systems".

settings.protectedTermsHint changed twice: once because the "press Enter or comma" mechanic no longer exists, once for the accuracy fix above.

Testing

523 tests pass, lint clean, production build succeeds.

• settings.spec.ts goes from 6 tests to 28.
• app-header.spec.ts is new — the component had no spec at all.
• Verified in Chromium across en, de, es, fr-ca, ja, ru at 320–1440px, light and dark, including the save round-trip actually writing the file sorted.

Note

Two commits on this branch predate this work and are included here: 0f8542c (nx/pnpm settings) and 2f759ed (PRODUCT.md). Split them out if you'd rather they land separately.

🤖 Generated with Claude Code

[lingo-tracker-release]

🎉 This PR is included in version 0.18.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀