@ohmykreee/dsh-remote-control 0.0.0-stage → 1.0.3

package/src/dsh/client/i18n.ts

@@ -0,0 +1,573 @@
+/**
+ * Dictionaries and locale plumbing for the remote-control page.
+ *
+ * Each shipped language is one flat key -> text object so a new language can be
+ * added by appending another object to {@link DICTS}; no key needs to be
+ * declared twice. English is the terminal fallback for every missing key.
+ *
+ * "Follow DSH" resolves against the DSH locale service: an exact match with a
+ * shipped language wins, anything else (ja, zh-CN, an unknown language pack)
+ * falls back to English instead of borrowing an unrelated dictionary.
+ */
+
+import { useEffect, useState } from 'react';
+import type { LocaleService, Translator } from './types.js';
+
+export const NS = 'dsh-remote-control';
+
+/** Plugin language preference: follow DSH, or force one shipped language. */
+export type PluginLanguage = 'dsh' | 'zh' | 'en';
+
+/** Languages the plugin ships dictionaries for. */
+export type LocaleCode = 'zh' | 'en';
+
+export const SUPPORTED_LOCALES: readonly LocaleCode[] = ['zh', 'en'];
+
+export const zh: Record<string, string> = {
+  title: '远程控制台',
+  kicker: 'REMOTE CONSOLE',
+  heading: '远程控制台',
+  subtitle: '手机控制台的连接、显示与偏好设置。',
+  running: '运行中',
+  stopped: '未运行',
+  refresh: '刷新',
+  save: '保存',
+  saved: '已保存',
+  error: '操作失败',
+  loading: '正在读取设置…',
+  pairing: '扫码连接',
+  pairingHint: '手机与电脑连接同一个局域网，扫描二维码即可打开。',
+  open: '在电脑上打开',
+  copy: '复制链接',
+  copied: '已复制',
+  connection: '连接',
+  menuPlugin: '偏好设置',
+  menuNetwork: '开放网卡',
+  menuAccess: '访问验证',
+  menuTheme: '主题与页面',
+  menuTls: 'HTTPS 证书',
+  menuWeather: '天气设置',
+  menuBalance: '余额显示',
+  menuNotifications: '通知设置',
+  menuSystem: '系统信息',
+  menuStatus: '服务状态',
+  menuClients: '已连接设备',
+  menuDiagnostics: '诊断信息',
+  network: '开放网卡',
+  networkHint: '只有勾选网卡所在网段的设备可以访问控制台。',
+  pluginHint: '手机端的访问方式、温度单位、主题、页面顺序与 HTTPS 证书；修改后点击保存设置生效。',
+  access: '访问验证',
+  accessHint: '开启后，手机首次打开需要扫描带验证令牌的链接。',
+  token: '链接验证',
+  rotate: '刷新验证',
+  rotateHint: '刷新后已连接设备会断开，需要重新扫码。',
+  theme: '主题与页面',
+  themeHint: '选择手机控制台跟随 DSH 主题，或固定亮暗模式。',
+  temperatureUnit: '温度单位',
+  temperatureUnitHint: '手机端天气和性能页使用的温度显示单位。',
+  celsius: '摄氏度 (°C)',
+  fahrenheit: '华氏度 (°F)',
+  followDsh: '跟随 DSH',
+  language: '插件语言',
+  languageHint: '选择界面语言；没有对应翻译时使用英语。',
+  languageFollowDsh: '跟随 DSH',
+  light: '浅色',
+  dark: '深色',
+  pageOrder: '页面顺序',
+  pageOrderHint: '拖拽调整手机端的页面顺序；关闭的页面不会显示。',
+  tls: 'HTTPS 证书',
+  tlsHint: '可选。填写证书和私钥文件路径后启用 HTTPS；保存后连接会短暂中断。',
+  certPath: '证书路径',
+  keyPath: '私钥路径',
+  saveTls: '保存证书配置',
+  tlsOn: 'HTTPS 已启用',
+  tlsOff: 'HTTPS 未启用',
+  tlsError: '证书无效，当前仍使用 HTTP',
+  weather: '天气设置',
+  weatherHint: '自动定位优先使用本机位置；手动位置可搜索城市，选中后自动填入经纬度。',
+  forecastDisplay: '天气卡片显示',
+  hourly: '小时天气',
+  daily: '7 天天气',
+  saveSettings: '保存设置',
+  pagePerformance: '性能',
+  auto: '本机位置',
+  manual: '手动位置',
+  locationName: '位置名称',
+  latitude: '纬度',
+  longitude: '经度',
+  saveLocation: '保存位置',
+  citySearchPlaceholder: '输入城市名搜索',
+  citySearchHint: '输入城市名后从下拉结果中选择，纬度和经度会自动填入；也可以直接编辑坐标。',
+  locationAutoHint: '本机位置模式下坐标由系统定位提供，切换到「手动位置」后可搜索或填写城市与坐标。',
+  citySearching: '正在搜索…',
+  cityNoResults: '没有找到匹配的城市',
+  citySearchFailed: '城市搜索失败，请稍后重试',
+  citySearchUnavailable: '城市搜索暂不可用，请重启 DSH 后重试',
+  balance: '余额显示',
+  balanceHint: '选择本周或最近 7 天作为消耗统计窗口。',
+  calendar: '本周',
+  rolling: '最近 7 天',
+  lowThreshold: '低余额提醒线',
+  lowThresholdHint: '低于这个金额时，手机端余额会显示为红色。留空关闭提醒。',
+  thresholdPlaceholder: '例如：5',
+  saveThreshold: '保存提醒线',
+  notifications: '通知设置',
+  notificationsHint: '所有应用默认接收通知；取消勾选的应用不会显示在手机端。',
+  allApps: '全部显示',
+  limit: '显示数量',
+  noApps: '还没有记录到通知应用。',
+  status: '服务状态',
+  statusHint: '当前系统服务能力。',
+  clients: '已连接设备',
+  clientsHint: '正在访问控制台的手机或浏览器。',
+  noClients: '当前没有已连接设备。',
+  disconnect: '断开',
+  diagnostics: '诊断信息',
+  pluginVersion: '插件版本',
+  protocol: '连接方式',
+  profileName: 'Profile',
+  notificationsStatus: '通知',
+  mediaStatus: '媒体',
+  volumeStatus: '音量',
+  weatherStatus: '天气',
+  healthy: '正常',
+  unavailable: '不可用',
+  checking: '待检测',
+  pageHome: '首页',
+  pageSessions: '会话',
+  pageMusic: '音乐',
+  moveUp: '上移',
+  moveDown: '下移',
+  noWebServer: '远程控制台页面暂不可用，请重启 DSH 后重试。',
+  serviceRunning: '服务运行中',
+  serviceStopped: '服务未运行',
+  menuPomodoro: '番茄钟/倒计时',
+  connectionHint: '扫码配对、可访问的网卡、访问验证与 HTTPS 证书。',
+  preferencesHint: '手机端的温度单位、主题、页面顺序与导航栏位置；修改后点击保存设置生效。',
+  navPosition: '导航栏位置',
+  navPositionHint: '选择手机控制台导航栏停靠在屏幕的哪一侧。',
+  navLeft: '左侧',
+  navRight: '右侧',
+  navTop: '上方',
+  navBottom: '下方',
+  pomodoro: '番茄钟/倒计时',
+  pomodoroHint: '手机端番茄钟与倒计时的启用、时长、预设与提示音；两者只能开启一个。',
+  pomodoroEnable: '启用番茄钟',
+  pomodoroEnableHint: '启用后，时钟下方会出现番茄钟卡片，并可设置专注与休息时长；启用倒计时会关闭番茄钟。',
+  pomodoroFocus: '专注时长（分钟）',
+  pomodoroBreak: '休息时长（分钟）',
+  pomodoroDurations: '专注与休息',
+  pomodoroDurationHint: '分钟数支持 2 位小数，超出允许范围时会自动调整。',
+  pomodoroSound: '提示音文件',
+  pomodoroSoundSection: '提示音',
+  pomodoroSoundHint: '番茄钟和倒计时结束时使用；留空则使用内置的轻柔提示音，也可以填写本机音频文件路径或 http(s) 链接。',
+  pomodoroSoundPlaceholder: '例如：D:\\sounds\\chime.mp3',
+  pomodoroLoop: '循环响铃直到停止',
+  pomodoroLoopHint: '开启后，时间到的提示音会循环播放，直到在手机端点击「停止响铃」才停止；关闭时只播放一次。',
+  countdown: '倒计时',
+  countdownHint: '最多可添加 5 个快速预设，按「分」「秒」填写，秒数会自动进位到分钟。',
+  countdownPresets: '倒计时预设',
+  countdownEnable: '启用倒计时',
+  countdownEnableHint: '启用后，时钟下方会出现倒计时卡片；与番茄钟互斥，开启此项会关闭番茄钟。',
+  countdownPreset1: '预设 1',
+  countdownPreset2: '预设 2',
+  countdownPreset3: '预设 3',
+  countdownPreset4: '预设 4',
+  countdownPreset5: '预设 5',
+  countdownPresetLimitHint: '最多 5 个',
+  addPreset: '添加预设',
+  removePreset: '删除',
+  peakValley: '显示梁文峰 / 梁文谷',
+  peakValleyHint: '在余额卡片右上角显示当前计费时段：工作日 9:00–12:00、14:00–18:00 为高峰；其余时间、周末与节假日为低谷，价格为高峰的一半。',
+  menuAppMapping: '软件映射',
+  appMapping: '软件映射',
+  appMappingHint: '通知和音乐中显示的应用名称；修改后立即保存。',
+  sourceNotification: '通知',
+  sourceMusic: '音乐',
+  resetName: '恢复默认',
+  locationPermission: '定位权限',
+  locationPermissionHint: 'Windows 定位需要系统隐私授权。点击下面的按钮申请定位权限；如果被拒绝，会自动打开系统「位置」设置页。开启「位置服务」和「允许桌面应用访问你的位置」后重试即可。',
+  locationRequest: '请求定位权限',
+  locationRequesting: '正在请求…',
+  locationAllowed: '定位权限已授予，天气会自动使用本机位置。',
+  locationPrivacyDenied: '系统拒绝了定位权限，已打开「位置」设置页；请开启「位置服务」和「允许桌面应用访问你的位置」后重试。',
+  locationLowIntegrity: '定位权限被系统拒绝，请按安装文档修复后重试。',
+  locationUnspecified: '系统还没有授予定位权限，已打开设置页，请手动开启后重试。',
+  locationFailed: '定位权限请求失败，请稍后重试。',
+  locationStatus: '当前状态',
+  accessAllowed: '已授权',
+  accessDenied: '已拒绝',
+  accessUnspecified: '未授权',
+  accessUnknown: '未知',
+  pushQuestions: '推送问询',
+  pushQuestionsHint: '开启后，等待回答的会话会显示完整问题与选项，可直接在手机上回复。',
+  tlsEnable: '启用 HTTPS',
+  weatherPageHint: '手机端天气的位置来源、显示方式与定位权限。',
+  weatherSource: '天气位置',
+  forecastDisplayHint: '选择天气卡片展示小时预报还是 7 天预报。',
+  balancePageHint: '手机端余额卡片的统计窗口、低余额提醒与峰谷标记。',
+  balanceSpend: '消耗统计',
+  peakValleyBlock: '梁文峰/谷标记',
+  peakValleyToggle: '显示峰谷标记',
+  notificationsPageHint: '手机端通知卡片的推送、可见应用与显示数量。',
+  notificationApps: '通知应用',
+  pushQuestionsToggle: '允许远程回答',
+  limitDisplay: '显示数量',
+  limitField: '数量',
+  notificationLimitHint: '手机端通知卡片最多显示的通知数量（1–20）。',
+  appsPageHint: '手机端通知和音乐里显示的应用名称；修改后立即保存。',
+  appNamesBlock: '应用名称',
+  systemPageHint: '服务运行状态、系统能力、已连接设备与诊断信息。',
+  diagnosticsHint: '插件/探针版本、协议、Profile 与运行时信息。',
+  performanceStatus: '性能',
+  locationCapability: '定位',
+  runtime: '系统能力',
+  runtimeHint: '原生探针与 Node.js 运行时的版本、平台和平台后端。',
+  probeVersion: '探针版本',
+  probeBackends: '平台后端',
+  probeBinary: '探针路径',
+  probeMissing: '探针不可用',
+  nodeVersion: 'Node.js 版本',
+  nodeV8: 'V8 版本',
+  nodeMemory: '内存占用',
+  nodePlatform: '平台',
+  backendMedia: '媒体',
+  backendVolume: '音量',
+  backendPerformance: '性能',
+  backendNotifications: '通知',
+  backendLocation: '定位',
+  device: '设备',
+  durationSeconds: '秒',
+  durationMinutes: '分钟',
+  durationHours: '小时',
+  durationDays: '天',
+  keepOneApp: '至少保留一个通知应用',
+  keepOnePage: '至少保留一个页面',
+  tlsPathsRequired: '请先填写证书和私钥路径',
+};
+
+export const en: Record<string, string> = {
+  title: 'Remote control',
+  kicker: 'REMOTE CONSOLE',
+  heading: 'Remote control',
+  subtitle: 'Connection, display, and preferences for the phone console.',
+  running: 'Running',
+  stopped: 'Stopped',
+  refresh: 'Refresh',
+  save: 'Save',
+  saved: 'Saved',
+  error: 'Action failed',
+  loading: 'Reading settings…',
+  pairing: 'Scan to connect',
+  pairingHint: 'Connect the phone to the same LAN and scan the QR code.',
+  open: 'Open on this computer',
+  copy: 'Copy link',
+  copied: 'Copied',
+  connection: 'Connection',
+  menuPlugin: 'Preferences',
+  menuNetwork: 'Open interfaces',
+  menuAccess: 'Access verification',
+  menuTheme: 'Theme & pages',
+  menuTls: 'HTTPS certificate',
+  menuWeather: 'Weather',
+  menuBalance: 'Balance display',
+  menuNotifications: 'Notifications',
+  menuSystem: 'System information',
+  menuStatus: 'Service status',
+  menuClients: 'Connected devices',
+  menuDiagnostics: 'Diagnostics',
+  network: 'Open network interfaces',
+  networkHint: 'Only devices on the checked interface subnets can access the console.',
+  pluginHint: 'Access, temperature unit, theme, page order, and HTTPS for the phone console; changes apply after Save.',
+  access: 'Access verification',
+  accessHint: 'When enabled, the first open requires the pairing link.',
+  token: 'Link verification',
+  rotate: 'Refresh verification',
+  rotateHint: 'Rotating disconnects existing devices; scan again to reconnect.',
+  theme: 'Theme & pages',
+  themeHint: 'Follow DSH, or force light or dark mode on the phone console.',
+  temperatureUnit: 'Temperature unit',
+  temperatureUnitHint: 'Temperature unit used by the phone weather and performance pages.',
+  celsius: 'Celsius (°C)',
+  fahrenheit: 'Fahrenheit (°F)',
+  followDsh: 'Follow DSH',
+  language: 'Plugin language',
+  languageHint: 'Interface language. English is used when a translation is missing.',
+  languageFollowDsh: 'Follow DSH',
+  light: 'Light',
+  dark: 'Dark',
+  pageOrder: 'Page order',
+  pageOrderHint: 'Drag to reorder the phone pages; disabled pages are hidden.',
+  tls: 'HTTPS certificate',
+  tlsHint: 'Optional. Provide certificate and private-key file paths, then enable HTTPS. Saving briefly drops connections.',
+  certPath: 'Certificate path',
+  keyPath: 'Private key path',
+  saveTls: 'Save certificate',
+  tlsOn: 'HTTPS is enabled',
+  tlsOff: 'HTTPS is not enabled',
+  tlsError: 'The certificate is invalid; still using HTTP',
+  weather: 'Weather',
+  weatherHint: 'Automatic location uses this computer first; Manual location lets you search for a city and fills the coordinates when you pick one.',
+  forecastDisplay: 'Weather card',
+  hourly: 'Hourly',
+  daily: '7-day',
+  saveSettings: 'Save settings',
+  pagePerformance: 'Performance',
+  auto: 'This computer',
+  manual: 'Manual location',
+  locationName: 'Location name',
+  latitude: 'Latitude',
+  longitude: 'Longitude',
+  saveLocation: 'Save location',
+  citySearchPlaceholder: 'Search for a city',
+  citySearchHint: 'Type a city and pick a suggestion to fill latitude and longitude automatically; you can also edit the coordinates directly.',
+  locationAutoHint: 'This-computer mode uses the system location; switch to Manual location to search or enter a city and coordinates.',
+  citySearching: 'Searching…',
+  cityNoResults: 'No matching city found',
+  citySearchFailed: 'City search failed; try again later',
+  citySearchUnavailable: 'City search is unavailable; restart DSH and retry',
+  balance: 'Balance display',
+  balanceHint: 'Choose this week or the last 7 days as the spend window.',
+  calendar: 'This week',
+  rolling: 'Last 7 days',
+  lowThreshold: 'Low-balance threshold',
+  lowThresholdHint: 'Below this amount the phone balance turns red. Leave empty to disable the alert.',
+  thresholdPlaceholder: 'e.g. 5',
+  saveThreshold: 'Save threshold',
+  notifications: 'Notifications',
+  notificationsHint: 'Every app is included by default; unchecked apps are hidden on the phone.',
+  allApps: 'Select all',
+  limit: 'Display limit',
+  noApps: 'No notification apps recorded yet.',
+  status: 'Service status',
+  statusHint: 'Capabilities of the current system service.',
+  clients: 'Connected devices',
+  clientsHint: 'Phones or browsers currently viewing the console.',
+  noClients: 'No devices are connected.',
+  disconnect: 'Disconnect',
+  diagnostics: 'Diagnostics',
+  pluginVersion: 'Plugin version',
+  protocol: 'Transport',
+  profileName: 'Profile',
+  notificationsStatus: 'Notifications',
+  mediaStatus: 'Media',
+  volumeStatus: 'Volume',
+  weatherStatus: 'Weather',
+  healthy: 'Healthy',
+  unavailable: 'Unavailable',
+  checking: 'Checking',
+  pageHome: 'Home',
+  pageSessions: 'Sessions',
+  pageMusic: 'Music',
+  moveUp: 'Move up',
+  moveDown: 'Move down',
+  noWebServer: 'The console page is unavailable; restart DSH and retry.',
+  serviceRunning: 'Service running',
+  serviceStopped: 'Service stopped',
+  menuPomodoro: 'Pomodoro / countdown',
+  connectionHint: 'Pairing, reachable interfaces, access verification, and the HTTPS certificate.',
+  preferencesHint: 'Temperature unit, theme, page order, and navigation placement for the phone console; save to apply.',
+  navPosition: 'Navigation bar',
+  navPositionHint: 'Choose where the phone navigation bar sits.',
+  navLeft: 'Left',
+  navRight: 'Right',
+  navTop: 'Top',
+  navBottom: 'Bottom',
+  pomodoro: 'Pomodoro / countdown',
+  pomodoroHint: 'Enable and configure the phone pomodoro and countdown; only one can be on.',
+  pomodoroEnable: 'Enable pomodoro',
+  pomodoroEnableHint: 'Show a pomodoro card below the clock and set focus and break lengths. Enabling the countdown turns the pomodoro off.',
+  pomodoroFocus: 'Focus minutes',
+  pomodoroBreak: 'Break minutes',
+  pomodoroDurations: 'Focus and break',
+  pomodoroDurationHint: 'Minutes accept two decimals and adjust to the allowed range automatically.',
+  pomodoroSound: 'Alert sound file',
+  pomodoroSoundSection: 'Alert sound',
+  pomodoroSoundHint: 'Used when the pomodoro or countdown ends. Leave empty for the built-in gentle chime, or use a local audio file path or http(s) URL.',
+  pomodoroSoundPlaceholder: 'e.g. D:\\sounds\\chime.mp3',
+  pomodoroLoop: 'Loop until stopped',
+  pomodoroLoopHint: 'When enabled, the end-of-timer sound repeats until you click Stop ringing on the phone. When disabled, it plays once.',
+  countdown: 'Countdown',
+  countdownHint: 'Add up to five quick presets in minutes and seconds; seconds carry into minutes automatically.',
+  countdownPresets: 'Countdown presets',
+  countdownEnable: 'Enable countdown',
+  countdownEnableHint: 'Show a countdown card below the clock. The pomodoro and countdown are mutually exclusive; enabling this turns the pomodoro off.',
+  countdownPreset1: 'Preset 1',
+  countdownPreset2: 'Preset 2',
+  countdownPreset3: 'Preset 3',
+  countdownPreset4: 'Preset 4',
+  countdownPreset5: 'Preset 5',
+  countdownPresetLimitHint: 'Up to 5',
+  addPreset: 'Add preset',
+  removePreset: 'Remove',
+  peakValley: 'Show peak / valley',
+  peakValleyHint: 'Show the current billing period in the balance card header: weekdays 09:00–12:00 and 14:00–18:00 are peak; other times, weekends and holidays are off-peak at half the peak price.',
+  menuAppMapping: 'App names',
+  appMapping: 'App names',
+  appMappingHint: 'App names shown in notifications and music; changes save immediately.',
+  sourceNotification: 'Notification',
+  sourceMusic: 'Music',
+  resetName: 'Reset',
+  locationPermission: 'Location permission',
+  locationPermissionHint: 'Windows location access needs a privacy grant. The button asks for permission; when it is denied, the system Location settings page opens. Enable "Location services" and "Let desktop apps access your location", then retry.',
+  locationRequest: 'Request location access',
+  locationRequesting: 'Requesting…',
+  locationAllowed: 'Location access granted; weather will use this computer position.',
+  locationPrivacyDenied: 'Windows denied location access and the Settings page was opened; enable "Location services" and "Let desktop apps access your location", then retry.',
+  locationLowIntegrity: 'Location access was denied by the system. Follow the installation guide to fix it, then retry.',
+  locationUnspecified: 'Location access has not been granted yet; the Settings page was opened.',
+  locationFailed: 'The location permission request failed; try again later.',
+  locationStatus: 'Current status',
+  accessAllowed: 'Allowed',
+  accessDenied: 'Denied',
+  accessUnspecified: 'Not granted',
+  accessUnknown: 'Unknown',
+  pushQuestions: 'Push inquiries',
+  pushQuestionsHint: 'When enabled, sessions waiting for an answer show the full questions and options, and you can reply from the phone.',
+  tlsEnable: 'Enable HTTPS',
+  weatherPageHint: 'Location source, display mode, and location permission for the phone weather page.',
+  weatherSource: 'Weather location',
+  forecastDisplayHint: 'Choose hourly or 7-day forecast for the weather card.',
+  balancePageHint: 'Spend window, low-balance alert, and peak/off-peak marker for the phone balance card.',
+  balanceSpend: 'Spend window',
+  peakValleyBlock: 'Peak / off-peak marker',
+  peakValleyToggle: 'Show peak/off-peak marker',
+  notificationsPageHint: 'Push questions, visible apps, and display limit for phone notifications.',
+  notificationApps: 'Notification apps',
+  pushQuestionsToggle: 'Allow remote answers',
+  limitDisplay: 'Display limit',
+  limitField: 'Count',
+  notificationLimitHint: 'Maximum number of notifications shown on the phone card (1–20).',
+  appsPageHint: 'App names shown in phone notifications and media; changes save immediately.',
+  appNamesBlock: 'App names',
+  systemPageHint: 'Service status, system capabilities, connected devices, and diagnostics.',
+  diagnosticsHint: 'Plugin/probe versions, transport, profile, and runtime details.',
+  performanceStatus: 'Performance',
+  locationCapability: 'Location',
+  runtime: 'System capabilities',
+  runtimeHint: 'Versions, platforms, and platform backends of the native probe and the Node.js runtime.',
+  probeVersion: 'Probe version',
+  probeBackends: 'Platform backends',
+  probeBinary: 'Probe path',
+  probeMissing: 'Probe unavailable',
+  nodeVersion: 'Node.js version',
+  nodeV8: 'V8 version',
+  nodeMemory: 'Memory',
+  nodePlatform: 'Platform',
+  backendMedia: 'Media',
+  backendVolume: 'Volume',
+  backendPerformance: 'Performance',
+  backendNotifications: 'Notifications',
+  backendLocation: 'Location',
+  device: 'Device',
+  durationSeconds: 'sec',
+  durationMinutes: 'min',
+  durationHours: 'h',
+  durationDays: 'd',
+  keepOneApp: 'Keep at least one notification app',
+  keepOnePage: 'Keep at least one page',
+  tlsPathsRequired: 'Fill in the certificate and private key paths first',
+};
+
+/** Every shipped dictionary, keyed by locale code. */
+export const DICTS: Record<LocaleCode, Record<string, string>> = { zh, en };
+
+let localeService: LocaleService | null = null;
+let preference: PluginLanguage = 'dsh';
+const listeners = new Set<() => void>();
+
+/** Remember the host locale service so the panel can follow its locale. */
+export function configureLocale(service: LocaleService): void {
+  localeService = service;
+}
+
+/** Active DSH locale id, or an empty string before the service is ready. */
+export function dshLocaleId(): string {
+  try {
+    const snapshot = localeService?.getLocale?.() ?? localeService?.getSnapshot?.();
+    return String(snapshot?.active || '');
+  } catch {
+    return '';
+  }
+}
+
+/**
+ * Resolve a preference plus the current DSH locale into a shipped language.
+ * Following DSH requires an exact locale-id match; the fallback is English.
+ */
+export function resolveLocale(preferenceValue: PluginLanguage, dshLocale: string): LocaleCode {
+  if (preferenceValue === 'zh' || preferenceValue === 'en') return preferenceValue;
+  const requested = String(dshLocale || '').trim().toLowerCase();
+  const exact = SUPPORTED_LOCALES.find((id) => id === requested);
+  return exact ?? 'en';
+}
+
+/** Language currently used to render the panel. */
+export function currentLocale(): LocaleCode {
+  return resolveLocale(preference, dshLocaleId());
+}
+
+/** Remember the saved plugin language and repaint bound panels. */
+export function setPluginLanguage(value: unknown): void {
+  const next: PluginLanguage = value === 'zh' || value === 'en' ? value : 'dsh';
+  if (next === preference) return;
+  preference = next;
+  notifyLanguage();
+}
+
+/** Current preference (not the resolved language). */
+export function getPluginLanguage(): PluginLanguage {
+  return preference;
+}
+
+/** Notify panels when the plugin language preference changes. */
+export function subscribePluginLanguage(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function notifyLanguage(): void {
+  for (const listener of [...listeners]) {
+    try {
+      listener();
+    } catch {
+      /* one broken panel must not stop the others */
+    }
+  }
+}
+
+/** Bundled dictionary lookup through the active language, then English. */
+export function fallbackTranslate(key: string): string {
+  const dict = DICTS[currentLocale()];
+  return dict[key] ?? en[key] ?? key;
+}
+
+/** Translate one key with the plugin language preference applied. */
+export function translate(key: string): string {
+  return fallbackTranslate(key);
+}
+
+/**
+ * React hook that re-renders the panel when DSH changes locale or the saved
+ * plugin language changes. The translator reads the current state on every
+ * call, so only a version tick is needed here.
+ */
+export function useTranslator(): Translator {
+  const [, setVersion] = useState(0);
+  useEffect(() => {
+    const bump = (): void => setVersion((value) => value + 1);
+    const offLanguage = subscribePluginLanguage(bump);
+    const offLocale = localeService?.subscribe?.(bump);
+    return () => {
+      offLanguage();
+      try {
+        offLocale?.();
+      } catch {
+        /* ignore a disposed locale service */
+      }
+    };
+  }, []);
+  return translate;
+}

package/src/dsh/client/icons.ts

@@ -0,0 +1,56 @@
+/** Small inline SVGs: the sidebar launcher and the section navigation icons. */
+
+import * as React from 'react';
+
+const h = React.createElement;
+
+export interface PanelIconProps {
+  size?: number;
+  active?: boolean;
+}
+
+export interface MenuIconProps {
+  name: string;
+}
+
+/** Sidebar launcher glyph: a phone beside a broadcast signal. */
+export function PanelIcon({ size = 20, active = false }: PanelIconProps): React.ReactElement {
+  return h('svg', {
+    width: size,
+    height: size,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    'aria-hidden': true,
+    style: { display: 'block', color: active ? 'var(--dsw-alias-brand-primary)' : 'currentColor' },
+  },
+  h('rect', { x: 4.2, y: 2.8, width: 15.6, height: 18.4, rx: 4, stroke: 'currentColor', strokeWidth: 1.7 }),
+  h('path', { d: 'M9.3 18.1h5.4', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round' }),
+  h('circle', { cx: 12, cy: 10.5, r: 3.5, stroke: 'currentColor', strokeWidth: 1.7 }),
+  h('path', {
+    d: 'M2.6 8.2c-1 1.1-1.5 2.3-1.5 3.6 0 1.4.5 2.6 1.5 3.7M21.4 8.2c1 1.1 1.5 2.3 1.5 3.6 0 1.4-.5 2.6-1.5 3.7',
+    stroke: 'currentColor',
+    strokeWidth: 1.5,
+    strokeLinecap: 'round',
+    opacity: 0.7,
+  }));
+}
+
+export const MENU_ICONS: Record<string, string> = {
+  link: '<path d="M9.5 14.5 14.5 9.5M7.1 16.9a3.5 3.5 0 0 1 0-5l2.1-2.1M16.9 7.1a3.5 3.5 0 0 1 0 5l-2.1 2.1" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>',
+  sliders: '<path d="M4 7h10M18 7h2M4 17h2M10 17h10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><circle cx="16" cy="7" r="2.4" stroke="currentColor" stroke-width="1.7"/><circle cx="8" cy="17" r="2.4" stroke="currentColor" stroke-width="1.7"/>',
+  cloud: '<path d="M6.5 18h10.2a4.3 4.3 0 0 0 .7-8.5A5.5 5.5 0 0 0 7 8.6 4.7 4.7 0 0 0 6.5 18Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>',
+  wallet: '<rect x="3.5" y="6" width="17" height="13" rx="3" stroke="currentColor" stroke-width="1.7"/><path d="M3.5 10h17M16 14.5h2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>',
+  bell: '<path d="M6 10a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6ZM10 20h4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>',
+  apps: '<rect x="3.5" y="3.5" width="7.2" height="7.2" rx="1.8" stroke="currentColor" stroke-width="1.7"/><rect x="13.3" y="3.5" width="7.2" height="7.2" rx="1.8" stroke="currentColor" stroke-width="1.7"/><rect x="3.5" y="13.3" width="7.2" height="7.2" rx="1.8" stroke="currentColor" stroke-width="1.7"/><rect x="13.3" y="13.3" width="7.2" height="7.2" rx="1.8" stroke="currentColor" stroke-width="1.7"/>',
+  timer: '<circle cx="12" cy="13.5" r="7" stroke="currentColor" stroke-width="1.7"/><path d="M12 9.5v4l2.8 1.7M9 2.8h6M12 2.8v2.2M18.8 6.2l1.5-1.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>',
+  info: '<circle cx="12" cy="12" r="8.5" stroke="currentColor" stroke-width="1.7"/><path d="M12 11v6M12 7.2v.2" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>',
+};
+
+export function MenuIcon({ name }: MenuIconProps): React.ReactElement {
+  return h('svg', {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    'aria-hidden': true,
+    dangerouslySetInnerHTML: { __html: MENU_ICONS[name] || MENU_ICONS.info },
+  });
+}