Translate the Visual panel and keep its name apart from the satellite class

The panel's new headings, the scope opacity slider and the reset are
translated in every language, and the presets' names and descriptions use
the dock's translations. The cards' on/off pills take their words from the
locale instead of fixed English. VISUAL, the panel's name on the rail and in
its header, gets its own translation context: several languages had it as
"visible", from the satellite class of the same English word.

Co-authored-by: Manjunath Paparaju <[email protected]>

src/i18n/locales/ar.json

@@ -3969,5 +3969,13 @@
   "Funicular": "قطار جبلي مائل",
   "Gondola": "تلفريك",
   "Move panels back beside the rail": "إعادة اللوحات إلى جانب الشريط",
-  "Move panels over the rail, to the edge": "نقل اللوحات فوق الشريط إلى الحافة"
+  "Move panels over the rail, to the edge": "نقل اللوحات فوق الشريط إلى الحافة",
+  "panel|VISUAL": "المرئيات",
+  "Look": "المظهر",
+  "Overlay": "التراكب",
+  "Effects": "المؤثرات",
+  "Scope opacity": "عتامة المنظار",
+  "How dark the scope shades the view outside the keyhole": "مدى تعتيم المنظار للعرض خارج الفتحة",
+  "Reset to default": "إعادة التعيين إلى الافتراضي",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "إعادة المرئيات إلى إعداداتها الافتراضية: المظهر العادي وHUD والمنظار والتسميات والمؤثرات"
 }

src/i18n/locales/de.json

@@ -3621,5 +3621,13 @@
   "Funicular": "Standseilbahn",
   "Gondola": "Gondelbahn",
   "Move panels back beside the rail": "Bedienfelder zurück neben die Leiste",
-  "Move panels over the rail, to the edge": "Bedienfelder über die Leiste an den Rand verschieben"
+  "Move panels over the rail, to the edge": "Bedienfelder über die Leiste an den Rand verschieben",
+  "panel|VISUAL": "DARSTELLUNG",
+  "Look": "Look",
+  "Overlay": "Overlay",
+  "Effects": "Effekte",
+  "Scope opacity": "Scope-Deckkraft",
+  "How dark the scope shades the view outside the keyhole": "Wie stark der Scope die Ansicht außerhalb des Schlüssellochs abdunkelt",
+  "Reset to default": "Auf Standard zurücksetzen",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Darstellung auf die Standardwerte zurücksetzen: normaler Look, HUD, Scope, Beschriftungen und Effekte"
 }

src/i18n/locales/es.json

@@ -3708,5 +3708,13 @@
   "Funicular": "Funicular",
   "Gondola": "Góndola",
   "Move panels back beside the rail": "Devolver los paneles junto a la barra",
-  "Move panels over the rail, to the edge": "Mover los paneles sobre la barra, hasta el borde"
+  "Move panels over the rail, to the edge": "Mover los paneles sobre la barra, hasta el borde",
+  "panel|VISUAL": "VISUAL",
+  "Look": "Aspecto",
+  "Overlay": "Superposición",
+  "Effects": "Efectos",
+  "Scope opacity": "Opacidad de la mirilla",
+  "How dark the scope shades the view outside the keyhole": "Cuánto oscurece la mirilla la vista fuera del ojo de cerradura",
+  "Reset to default": "Restablecer valores predeterminados",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Restablecer Visual a sus valores predeterminados: aspecto Normal, HUD, mirilla, etiquetas y efectos"
 }

src/i18n/locales/fr.json

@@ -3708,5 +3708,13 @@
   "Funicular": "Funiculaire",
   "Gondola": "Télécabine",
   "Move panels back beside the rail": "Remettre les panneaux à côté de la barre",
-  "Move panels over the rail, to the edge": "Déplacer les panneaux par-dessus la barre, jusqu’au bord"
+  "Move panels over the rail, to the edge": "Déplacer les panneaux par-dessus la barre, jusqu’au bord",
+  "panel|VISUAL": "VISUEL",
+  "Look": "Aspect",
+  "Overlay": "Surcouche",
+  "Effects": "Effets",
+  "Scope opacity": "Opacité de la lunette",
+  "How dark the scope shades the view outside the keyhole": "À quel point la lunette assombrit la vue hors de l'ouverture",
+  "Reset to default": "Rétablir les valeurs par défaut",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Rétablir les valeurs par défaut de Visuel : aspect Normal, HUD, lunette, libellés et effets"
 }

src/i18n/locales/he.json

@@ -3708,5 +3708,13 @@
   "Funicular": "פוניקולר",
   "Gondola": "רכבל",
   "Move panels back beside the rail": "החזרת הלוחות לצד הסרגל",
-  "Move panels over the rail, to the edge": "הזזת הלוחות מעל הסרגל, אל הקצה"
+  "Move panels over the rail, to the edge": "הזזת הלוחות מעל הסרגל, אל הקצה",
+  "panel|VISUAL": "חזותי",
+  "Look": "מראה",
+  "Overlay": "שכבת על",
+  "Effects": "אפקטים",
+  "Scope opacity": "אטימות הסקופ",
+  "How dark the scope shades the view outside the keyhole": "עד כמה הסקופ מכהה את התצוגה מחוץ לחור המנעול",
+  "Reset to default": "איפוס לברירת המחדל",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "איפוס החזותי לברירות המחדל: מראה רגיל, HUD, סקופ, תוויות ואפקטים"
 }

src/i18n/locales/it.json

@@ -3708,5 +3708,13 @@
   "Funicular": "Funicolare",
   "Gondola": "Cabinovia",
   "Move panels back beside the rail": "Riporta i pannelli accanto alla barra",
-  "Move panels over the rail, to the edge": "Sposta i pannelli sopra la barra, fino al bordo"
+  "Move panels over the rail, to the edge": "Sposta i pannelli sopra la barra, fino al bordo",
+  "panel|VISUAL": "VISUALE",
+  "Look": "Aspetto",
+  "Overlay": "Overlay",
+  "Effects": "Effetti",
+  "Scope opacity": "Opacità dello scope",
+  "How dark the scope shades the view outside the keyhole": "Quanto lo scope scurisce la vista fuori dal foro",
+  "Reset to default": "Ripristina predefiniti",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Ripristina Visuale ai valori predefiniti: aspetto Normale, HUD, scope, etichette ed effetti"
 }

src/i18n/locales/ja.json

@@ -3534,5 +3534,13 @@
   "Funicular": "ケーブルカー",
   "Gondola": "ゴンドラ",
   "Move panels back beside the rail": "パネルをレールの横に戻す",
-  "Move panels over the rail, to the edge": "パネルをレールの上、画面端へ移動"
+  "Move panels over the rail, to the edge": "パネルをレールの上、画面端へ移動",
+  "panel|VISUAL": "ビジュアル",
+  "Look": "見た目",
+  "Overlay": "オーバーレイ",
+  "Effects": "エフェクト",
+  "Scope opacity": "スコープの不透明度",
+  "How dark the scope shades the view outside the keyhole": "キーホール外のビューをスコープがどれだけ暗くするか",
+  "Reset to default": "既定に戻す",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "ビジュアルを既定に戻す：標準の見た目、HUD、スコープ、ラベル、エフェクト"
 }

src/i18n/locales/pt.json

@@ -3708,5 +3708,13 @@
   "Funicular": "Funicular",
   "Gondola": "Teleférico",
   "Move panels back beside the rail": "Voltar os painéis para junto da barra",
-  "Move panels over the rail, to the edge": "Mover os painéis sobre a barra, até a borda"
+  "Move panels over the rail, to the edge": "Mover os painéis sobre a barra, até a borda",
+  "panel|VISUAL": "VISUAL",
+  "Look": "Aparência",
+  "Overlay": "Sobreposição",
+  "Effects": "Efeitos",
+  "Scope opacity": "Opacidade da mira",
+  "How dark the scope shades the view outside the keyhole": "Quanto a mira escurece a vista fora do visor",
+  "Reset to default": "Redefinir para o padrão",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Redefinir o Visual para o padrão: aparência Normal, HUD, mira, rótulos e efeitos"
 }

src/i18n/locales/ru.json

@@ -3795,5 +3795,13 @@
   "Funicular": "Фуникулёр",
   "Gondola": "Канатная дорога",
   "Move panels back beside the rail": "Вернуть панели к боковой панели",
-  "Move panels over the rail, to the edge": "Переместить панели поверх боковой панели к краю"
+  "Move panels over the rail, to the edge": "Переместить панели поверх боковой панели к краю",
+  "panel|VISUAL": "ВИЗУАЛ",
+  "Look": "Вид",
+  "Overlay": "Наложение",
+  "Effects": "Эффекты",
+  "Scope opacity": "Непрозрачность прицела",
+  "How dark the scope shades the view outside the keyhole": "Насколько прицел затемняет вид за пределами маски",
+  "Reset to default": "Сбросить по умолчанию",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Сбросить «Визуал» к настройкам по умолчанию: обычный вид, HUD, прицел, подписи и эффекты"
 }

src/i18n/locales/sv.json

@@ -3621,5 +3621,13 @@
   "Funicular": "Bergbana",
   "Gondola": "Kabinbana",
   "Move panels back beside the rail": "Flytta tillbaka panelerna bredvid listen",
-  "Move panels over the rail, to the edge": "Flytta panelerna över listen, till kanten"
+  "Move panels over the rail, to the edge": "Flytta panelerna över listen, till kanten",
+  "panel|VISUAL": "VISUELLT",
+  "Look": "Utseende",
+  "Overlay": "Överlägg",
+  "Effects": "Effekter",
+  "Scope opacity": "Scope-opacitet",
+  "How dark the scope shades the view outside the keyhole": "Hur mycket scopet mörkar vyn utanför nyckelhålet",
+  "Reset to default": "Återställ till standard",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Återställ Visuellt till standard: Normal stil, HUD, scope, etiketter och effekter"
 }

src/i18n/locales/uk.json

@@ -3795,5 +3795,13 @@
   "Funicular": "Фунікулер",
   "Gondola": "Канатна дорога",
   "Move panels back beside the rail": "Повернути панелі до бічної смуги",
-  "Move panels over the rail, to the edge": "Перемістити панелі поверх бічної смуги до краю"
+  "Move panels over the rail, to the edge": "Перемістити панелі поверх бічної смуги до краю",
+  "panel|VISUAL": "ВІЗУАЛ",
+  "Look": "Вигляд",
+  "Overlay": "Накладка",
+  "Effects": "Ефекти",
+  "Scope opacity": "Непрозорість прицілу",
+  "How dark the scope shades the view outside the keyhole": "Наскільки приціл затемнює вигляд за межами прицілу",
+  "Reset to default": "Скинути до типових",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "Скинути «Візуал» до типових налаштувань: звичайний вигляд, HUD, приціл, підписи та ефекти"
 }

src/i18n/locales/zh-CN.json

@@ -3534,5 +3534,13 @@
   "Funicular": "缆索铁路",
   "Gondola": "缆车",
   "Move panels back beside the rail": "将面板移回侧栏旁",
-  "Move panels over the rail, to the edge": "将面板移到侧栏上方，贴靠边缘"
+  "Move panels over the rail, to the edge": "将面板移到侧栏上方，贴靠边缘",
+  "panel|VISUAL": "视觉",
+  "Look": "外观",
+  "Overlay": "叠加层",
+  "Effects": "效果",
+  "Scope opacity": "视域不透明度",
+  "How dark the scope shades the view outside the keyhole": "视域遮罩使视域之外的画面变暗的程度",
+  "Reset to default": "恢复默认",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "将视觉恢复为默认设置：常规外观、HUD、视域、标签和效果"
 }

src/i18n/locales/zh-Hant.json

@@ -3534,5 +3534,13 @@
   "Funicular": "纜索鐵路",
   "Gondola": "纜車",
   "Move panels back beside the rail": "將面板移回側欄旁",
-  "Move panels over the rail, to the edge": "將面板移到側欄上方，貼齊邊緣"
+  "Move panels over the rail, to the edge": "將面板移到側欄上方，貼齊邊緣",
+  "panel|VISUAL": "視覺",
+  "Look": "外觀",
+  "Overlay": "疊加層",
+  "Effects": "效果",
+  "Scope opacity": "視域不透明度",
+  "How dark the scope shades the view outside the keyhole": "視域遮罩使視域之外的畫面變暗的程度",
+  "Reset to default": "還原預設",
+  "Reset Visual to its defaults: Normal look, HUD, scope, labels and effects": "將視覺還原為預設設定：常規外觀、HUD、視域、標籤和效果"
 }

src/i18n/same-as-english.json

@@ -113,6 +113,7 @@
     "Layout",
     "Live",
     "London",
+    "Look",
     "Los Angeles",
     "MIL",
     "MINI",
@@ -140,6 +141,7 @@
     "Oldies",
     "OpenStreetMap + optional Google Maps Places",
     "Operator",
+    "Overlay",
     "PAUSE",
     "PLAY",
     "POS: LIVE",
@@ -383,6 +385,7 @@
     "mph",
     "nominal",
     "panel",
+    "panel|VISUAL",
     "view band|GLOBAL",
     "voice|ERROR",
     "{hours} h",
@@ -732,6 +735,7 @@
     "ON",
     "ON/OFF",
     "Oldies",
+    "Overlay",
     "PAYLOAD",
     "PLAY",
     "POS: LIVE",
@@ -1047,6 +1051,7 @@
     "mini",
     "mph",
     "nominal",
+    "panel|VISUAL",
     "via {source}",
     "view band|GLOBAL",
     "{hours} h",

src/ui/PanelRailView.vue

@@ -25,7 +25,9 @@ const items = computed(() =>
         id: panel.id,
         icon: item?.icon ?? PANEL_RAIL_FALLBACK_ICON,
         // Static markup is translated at boot, so a host's title already is.
-        label: item ? t(item.label) : panel.title,
+        label: item
+          ? t(item.label, item.context && { context: item.context })
+          : panel.title,
       };
     }),
 );

src/ui/panelRailCatalog.js

@@ -9,7 +9,7 @@ export const PANEL_RAIL_FALLBACK_ICON = 'more_horiz';
 /**
  * How each side panel appears on its rail. Labels are the panels' own titles.
  * `shownBy` names a class the panel needs to be shown at all (`f` toggles
- * Data Layers' `active`).
+ * Data Layers' `active`). `context` is the label's translation context.
  */
 export const PANEL_RAIL_ITEMS = Object.freeze({
   'data-panel': {
@@ -19,7 +19,9 @@ export const PANEL_RAIL_ITEMS = Object.freeze({
   },
   'utilities-panel': { icon: 'handyman', label: msg('UTILITIES') },
   'scene-panel': { icon: 'movie', label: msg('AUTHORING') },
-  'pp-toggles': { icon: 'palette', label: msg('VISUAL') },
+  // `context` keeps the panel's name apart from the satellite class of the
+  // same English word.
+  'pp-toggles': { icon: 'palette', label: msg('VISUAL'), context: 'panel' },
   'cctv-panel': { icon: 'videocam', label: msg('CCTV') },
   'weather-panel': { icon: 'partly_cloudy_day', label: msg('WEATHER') },
   'news-panel': { icon: 'public', label: msg('NEWS') },

src/ui/styles/visual-panel.css

@@ -202,7 +202,7 @@
    checkbox, which already says it). */
 #pp-toggles .pp-toggle-group > button.pp-toggle-btn::after,
 #pp-toggles .pp-panel-body > button.pp-toggle-btn::after {
-  content: 'OFF';
+  content: var(--pp-pill-off, 'OFF');
   margin-inline-start: auto;
   padding: 2px 8px;
   color: rgba(199, 214, 222, 0.5);
@@ -216,7 +216,7 @@
 #pp-toggles .pp-toggle-group > button.pp-toggle-btn.active::after,
 #pp-toggles .pp-toggle-group > button.pp-toggle-btn[aria-pressed='true']::after,
 #pp-toggles .pp-panel-body > button.pp-toggle-btn.active::after {
-  content: 'ON';
+  content: var(--pp-pill-on, 'ON');
   color: #7af0ff;
   border-color: rgba(54, 220, 255, 0.5);
   background: rgba(54, 220, 255, 0.1);

src/ui/views/panels/DisplayPanel.vue

@@ -23,6 +23,12 @@ const { view, models3d, parameters, cockpitPortal } = storeToRefs(display);
 // A control's change goes to its owner (DisplayBindings).
 const act = (name, ...args) => display.act(name, ...args);
 const pct = (value) => `${value}%`;
+// The words of the on/off pill each card header draws (visual-panel.css), as
+// CSS strings.
+const pillWords = computed(() => ({
+  '--pp-pill-on': JSON.stringify(t('ON')),
+  '--pp-pill-off': JSON.stringify(t('OFF')),
+}));
 const hud = computed(() => view.value?.hud ?? null);
 const sonar = computed(() => view.value?.sonar ?? null);
 const sonarOn = computed(() => sonar.value?.enabled ?? true);
@@ -54,12 +60,12 @@ const allocationOptions = computed(() => [
 <!-- Post-processing toggles (top-right) -->
 <div id="pp-toggles" v-panel-state="'pp-toggles'" class="panel-collapsible collapsed ui-scroll" data-panel-id="pp-toggles">
   <div class="compact pp-header-row">
-    <span class="pp-header-label">{{ t('VISUAL') }}</span>
+    <span class="pp-header-label">{{ t('VISUAL', { context: 'panel' }) }}</span>
     <span class="panel-divider" aria-hidden="true"></span>
     <UiPanelEdge />
-    <PanelCollapseButton class="pp-collapse-btn" target="pp-toggles" :name="t('VISUAL')" sideways start-collapsed />
+    <PanelCollapseButton class="pp-collapse-btn" target="pp-toggles" :name="t('VISUAL', { context: 'panel' })" sideways start-collapsed />
   </div>
-  <div class="pp-panel-body ui-scroll" data-rail-scroller>
+  <div class="pp-panel-body ui-scroll" data-rail-scroller :style="pillWords">
   <VisualPresets />
   <!-- Cockpit shows these four groups in its Display popover: each teleports to the slot the Cockpit display portal publishes. While disabled a Teleport stays in place; its 'body' target only keeps server rendering from dropping it. -->
   <p class="pp-section-heading">{{ t('Overlay') }}</p>

src/ui/views/panels/VisualPresets.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { storeToRefs } from 'pinia';
-import { t } from '../../../i18n/index.js';
+import { msg, t } from '../../../i18n/index.js';
 import UiButton from '../../kit/UiButton.vue';
 import { useDisplayStore } from '../../stores/display.js';
 
@@ -11,12 +11,48 @@ const display = useDisplayStore();
 const { style, mapSource, mapSourceControls } = storeToRefs(display);
 
 const STYLES = [
-  { name: 'normal', icon: '◯', label: 'Normal', key: '1' },
+  {
-  { name: 'retro', icon: '▦', label: 'CRT', key: '2' },
+    name: 'normal',
-  { name: 'surveillance', icon: '🌙', label: 'NVG', key: '3' },
+    icon: '◯',
-  { name: 'thermal', icon: '🌡️', label: 'FLIR', key: '4' },
+    label: msg('Normal'),
-  { name: 'anime', icon: '✦', label: 'Anime', key: '5' },
+    key: '1',
-  { name: 'noir', icon: '◐', label: 'Noir', key: '6' },
+    title: msg('Show the globe without a visual filter.'),
+  },
+  {
+    name: 'retro',
+    icon: '▦',
+    label: msg('CRT'),
+    key: '2',
+    title: msg('Emulate a green phosphor CRT with scanlines and screen curvature.'),
+  },
+  {
+    name: 'surveillance',
+    icon: '🌙',
+    label: msg('NVG'),
+    key: '3',
+    title: msg('Simulate night-vision goggles with green intensification and a tube vignette.'),
+  },
+  {
+    name: 'thermal',
+    icon: '🌡️',
+    label: msg('FLIR'),
+    key: '4',
+    title: msg('Simulate FLIR-style thermal contrast. Turn up Ironbow for color.'),
+  },
+  {
+    name: 'anime',
+    icon: '✦',
+    label: msg('Anime'),
+    key: '5',
+    title: msg('Apply bright cel-shaded color and illustrated outlines.'),
+  },
+  {
+    name: 'noir',
+    icon: '◐',
+    label: msg('Noir'),
+    key: '6',
+    title: msg('Apply high-contrast monochrome film-noir grading.'),
+  },
 ];
 
 function selectMapSource(chip) {
@@ -36,6 +72,7 @@ function selectMapSource(chip) {
         :pressed="(style?.name ?? 'normal') === preset.name"
         pressed-class="active"
         :data-style="preset.name"
+        :title="t(preset.title)"
         @click="display.act('setStyle', preset.name)"
       >
         <span class="visual-presets__icon" aria-hidden="true">{{ preset.icon }}</span>