feat(ui): translate Slack, Signal, iMessage channel views

- Add i18n to channels.slack.ts with status labels, probe messages
- Add i18n to channels.signal.ts with status labels, probe messages
- Add i18n to channels.imessage.ts with status labels, probe messages
- Add translations to en-US and zh-TW locales

ui/src/i18n/locales/en-US.ts

@@ -234,19 +234,35 @@ export const enUS = {
     // Slack
     slack: {
       title: "Slack",
-      desc: "Slack app via Bolt framework.",
+      desc: "Socket mode status and channel configuration.",
+      lastStart: "Last start",
+      lastProbe: "Last probe",
+      probe: "Probe",
+      probeOk: "ok",
+      probeFailed: "failed",
     },
 
     // Signal
     signal: {
       title: "Signal",
-      desc: "Signal via signal-cli or linked device.",
+      desc: "signal-cli status and channel configuration.",
+      baseUrl: "Base URL",
+      lastStart: "Last start",
+      lastProbe: "Last probe",
+      probe: "Probe",
+      probeOk: "ok",
+      probeFailed: "failed",
     },
 
     // iMessage
     imessage: {
       title: "iMessage",
-      desc: "iMessage via BlueBubbles server.",
+      desc: "macOS bridge status and channel configuration.",
+      lastStart: "Last start",
+      lastProbe: "Last probe",
+      probe: "Probe",
+      probeOk: "ok",
+      probeFailed: "failed",
     },
 
     // Google Chat

ui/src/i18n/locales/zh-TW.ts

@@ -241,19 +241,35 @@ export const zhTW = {
     // Slack
     slack: {
       title: "Slack",
-      desc: "透過 Bolt 框架連接 Slack 應用程式。",
+      desc: "Socket 模式狀態與頻道設定。",
+      lastStart: "上次啟動",
+      lastProbe: "上次探測",
+      probe: "探測",
+      probeOk: "正常",
+      probeFailed: "失敗",
     },
 
     // Signal
     signal: {
       title: "Signal",
-      desc: "透過 signal-cli 或已連結裝置連接 Signal。",
+      desc: "signal-cli 狀態與頻道設定。",
+      baseUrl: "Base URL",
+      lastStart: "上次啟動",
+      lastProbe: "上次探測",
+      probe: "探測",
+      probeOk: "正常",
+      probeFailed: "失敗",
     },
 
     // iMessage
     imessage: {
       title: "iMessage",
-      desc: "透過 BlueBubbles 伺服器連接 iMessage。",
+      desc: "macOS 橋接器狀態與頻道設定。",
+      lastStart: "上次啟動",
+      lastProbe: "上次探測",
+      probe: "探測",
+      probeOk: "正常",
+      probeFailed: "失敗",
     },
 
     // Google Chat

ui/src/ui/views/channels.imessage.ts

@@ -1,5 +1,6 @@
 import { html, nothing } from "lit";
 
+import { t } from "../../i18n";
 import { formatAgo } from "../format";
 import type { IMessageStatus } from "../types";
 import type { ChannelsProps } from "./channels.types";
@@ -15,25 +16,25 @@ export function renderIMessageCard(params: {
   return html`
     <div class="card">
       <div class="card-title">iMessage</div>
-      <div class="card-sub">macOS bridge status and channel configuration.</div>
+      <div class="card-sub">${t("channels.imessage.desc")}</div>
       ${accountCountLabel}
 
       <div class="status-list" style="margin-top: 16px;">
         <div>
-          <span class="label">Configured</span>
-          <span>${imessage?.configured ? "Yes" : "No"}</span>
+          <span class="label">${t("channels.labels.configured")}</span>
+          <span>${imessage?.configured ? t("common.yes") : t("common.no")}</span>
         </div>
         <div>
-          <span class="label">Running</span>
-          <span>${imessage?.running ? "Yes" : "No"}</span>
+          <span class="label">${t("channels.labels.running")}</span>
+          <span>${imessage?.running ? t("common.yes") : t("common.no")}</span>
         </div>
         <div>
-          <span class="label">Last start</span>
-          <span>${imessage?.lastStartAt ? formatAgo(imessage.lastStartAt) : "n/a"}</span>
+          <span class="label">${t("channels.imessage.lastStart")}</span>
+          <span>${imessage?.lastStartAt ? formatAgo(imessage.lastStartAt) : t("common.na")}</span>
         </div>
         <div>
-          <span class="label">Last probe</span>
-          <span>${imessage?.lastProbeAt ? formatAgo(imessage.lastProbeAt) : "n/a"}</span>
+          <span class="label">${t("channels.imessage.lastProbe")}</span>
+          <span>${imessage?.lastProbeAt ? formatAgo(imessage.lastProbeAt) : t("common.na")}</span>
         </div>
       </div>
 
@@ -45,7 +46,7 @@ export function renderIMessageCard(params: {
 
       ${imessage?.probe
         ? html`<div class="callout" style="margin-top: 12px;">
-            Probe ${imessage.probe.ok ? "ok" : "failed"} ·
+            ${t("channels.imessage.probe")} ${imessage.probe.ok ? t("channels.imessage.probeOk") : t("channels.imessage.probeFailed")} ·
             ${imessage.probe.error ?? ""}
           </div>`
         : nothing}
@@ -54,7 +55,7 @@ export function renderIMessageCard(params: {
 
       <div class="row" style="margin-top: 12px;">
         <button class="btn" @click=${() => props.onRefresh(true)}>
-          Probe
+          ${t("channels.imessage.probe")}
         </button>
       </div>
     </div>

ui/src/ui/views/channels.signal.ts

@@ -1,5 +1,6 @@
 import { html, nothing } from "lit";
 
+import { t } from "../../i18n";
 import { formatAgo } from "../format";
 import type { SignalStatus } from "../types";
 import type { ChannelsProps } from "./channels.types";
@@ -15,29 +16,29 @@ export function renderSignalCard(params: {
   return html`
     <div class="card">
       <div class="card-title">Signal</div>
-      <div class="card-sub">signal-cli status and channel configuration.</div>
+      <div class="card-sub">${t("channels.signal.desc")}</div>
       ${accountCountLabel}
 
       <div class="status-list" style="margin-top: 16px;">
         <div>
-          <span class="label">Configured</span>
-          <span>${signal?.configured ? "Yes" : "No"}</span>
+          <span class="label">${t("channels.labels.configured")}</span>
+          <span>${signal?.configured ? t("common.yes") : t("common.no")}</span>
         </div>
         <div>
-          <span class="label">Running</span>
-          <span>${signal?.running ? "Yes" : "No"}</span>
+          <span class="label">${t("channels.labels.running")}</span>
+          <span>${signal?.running ? t("common.yes") : t("common.no")}</span>
         </div>
         <div>
-          <span class="label">Base URL</span>
-          <span>${signal?.baseUrl ?? "n/a"}</span>
+          <span class="label">${t("channels.signal.baseUrl")}</span>
+          <span>${signal?.baseUrl ?? t("common.na")}</span>
         </div>
         <div>
-          <span class="label">Last start</span>
-          <span>${signal?.lastStartAt ? formatAgo(signal.lastStartAt) : "n/a"}</span>
+          <span class="label">${t("channels.signal.lastStart")}</span>
+          <span>${signal?.lastStartAt ? formatAgo(signal.lastStartAt) : t("common.na")}</span>
         </div>
         <div>
-          <span class="label">Last probe</span>
-          <span>${signal?.lastProbeAt ? formatAgo(signal.lastProbeAt) : "n/a"}</span>
+          <span class="label">${t("channels.signal.lastProbe")}</span>
+          <span>${signal?.lastProbeAt ? formatAgo(signal.lastProbeAt) : t("common.na")}</span>
         </div>
       </div>
 
@@ -49,7 +50,7 @@ export function renderSignalCard(params: {
 
       ${signal?.probe
         ? html`<div class="callout" style="margin-top: 12px;">
-            Probe ${signal.probe.ok ? "ok" : "failed"} ·
+            ${t("channels.signal.probe")} ${signal.probe.ok ? t("channels.signal.probeOk") : t("channels.signal.probeFailed")} ·
             ${signal.probe.status ?? ""} ${signal.probe.error ?? ""}
           </div>`
         : nothing}
@@ -58,7 +59,7 @@ export function renderSignalCard(params: {
 
       <div class="row" style="margin-top: 12px;">
         <button class="btn" @click=${() => props.onRefresh(true)}>
-          Probe
+          ${t("channels.signal.probe")}
         </button>
       </div>
     </div>

ui/src/ui/views/channels.slack.ts

@@ -1,5 +1,6 @@
 import { html, nothing } from "lit";
 
+import { t } from "../../i18n";
 import { formatAgo } from "../format";
 import type { SlackStatus } from "../types";
 import type { ChannelsProps } from "./channels.types";
@@ -15,25 +16,25 @@ export function renderSlackCard(params: {
   return html`
     <div class="card">
       <div class="card-title">Slack</div>
-      <div class="card-sub">Socket mode status and channel configuration.</div>
+      <div class="card-sub">${t("channels.slack.desc")}</div>
       ${accountCountLabel}
 
       <div class="status-list" style="margin-top: 16px;">
         <div>
-          <span class="label">Configured</span>
-          <span>${slack?.configured ? "Yes" : "No"}</span>
+          <span class="label">${t("channels.labels.configured")}</span>
+          <span>${slack?.configured ? t("common.yes") : t("common.no")}</span>
         </div>
         <div>
-          <span class="label">Running</span>
-          <span>${slack?.running ? "Yes" : "No"}</span>
+          <span class="label">${t("channels.labels.running")}</span>
+          <span>${slack?.running ? t("common.yes") : t("common.no")}</span>
         </div>
         <div>
-          <span class="label">Last start</span>
-          <span>${slack?.lastStartAt ? formatAgo(slack.lastStartAt) : "n/a"}</span>
+          <span class="label">${t("channels.slack.lastStart")}</span>
+          <span>${slack?.lastStartAt ? formatAgo(slack.lastStartAt) : t("common.na")}</span>
         </div>
         <div>
-          <span class="label">Last probe</span>
-          <span>${slack?.lastProbeAt ? formatAgo(slack.lastProbeAt) : "n/a"}</span>
+          <span class="label">${t("channels.slack.lastProbe")}</span>
+          <span>${slack?.lastProbeAt ? formatAgo(slack.lastProbeAt) : t("common.na")}</span>
         </div>
       </div>
 
@@ -45,7 +46,7 @@ export function renderSlackCard(params: {
 
       ${slack?.probe
         ? html`<div class="callout" style="margin-top: 12px;">
-            Probe ${slack.probe.ok ? "ok" : "failed"} ·
+            ${t("channels.slack.probe")} ${slack.probe.ok ? t("channels.slack.probeOk") : t("channels.slack.probeFailed")} ·
             ${slack.probe.status ?? ""} ${slack.probe.error ?? ""}
           </div>`
         : nothing}
@@ -54,7 +55,7 @@ export function renderSlackCard(params: {
 
       <div class="row" style="margin-top: 12px;">
         <button class="btn" @click=${() => props.onRefresh(true)}>
-          Probe
+          ${t("channels.slack.probe")}
         </button>
       </div>
     </div>