feat(ui): translate Telegram and Discord channel views

- Add i18n to channels.telegram.ts with status labels, probe messages
- Add i18n to channels.discord.ts with status labels, probe messages
- Add Telegram/Discord translations to en-US and zh-TW locales

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

@@ -211,13 +211,24 @@ export const enUS = {
     // Telegram
     telegram: {
       title: "Telegram",
-      desc: "Telegram bot(s) via Grammy.",
+      desc: "Bot status and channel configuration.",
+      mode: "Mode",
+      lastStart: "Last start",
+      lastProbe: "Last probe",
+      probe: "Probe",
+      probeOk: "ok",
+      probeFailed: "failed",
     },
 
     // Discord
     discord: {
       title: "Discord",
-      desc: "Discord bot via discord.js.",
+      desc: "Bot status and channel configuration.",
+      lastStart: "Last start",
+      lastProbe: "Last probe",
+      probe: "Probe",
+      probeOk: "ok",
+      probeFailed: "failed",
     },
 
     // Slack

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

@@ -218,13 +218,24 @@ export const zhTW = {
     // Telegram
     telegram: {
       title: "Telegram",
-      desc: "透過 Grammy 連接 Telegram 機器人。",
+      desc: "機器人狀態與頻道設定。",
+      mode: "模式",
+      lastStart: "上次啟動",
+      lastProbe: "上次探測",
+      probe: "探測",
+      probeOk: "正常",
+      probeFailed: "失敗",
     },
 
     // Discord
     discord: {
       title: "Discord",
-      desc: "透過 discord.js 連接 Discord 機器人。",
+      desc: "機器人狀態與頻道設定。",
+      lastStart: "上次啟動",
+      lastProbe: "上次探測",
+      probe: "探測",
+      probeOk: "正常",
+      probeFailed: "失敗",
     },
 
     // Slack

ui/src/ui/views/channels.discord.ts

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

ui/src/ui/views/channels.telegram.ts

@@ -1,5 +1,6 @@
 import { html, nothing } from "lit";
 
+import { t } from "../../i18n";
 import { formatAgo } from "../format";
 import type { ChannelAccountSnapshot, TelegramStatus } from "../types";
 import type { ChannelsProps } from "./channels.types";
@@ -28,16 +29,16 @@ export function renderTelegramCard(params: {
         </div>
         <div class="status-list account-card-status">
           <div>
-            <span class="label">Running</span>
-            <span>${account.running ? "Yes" : "No"}</span>
+            <span class="label">${t("channels.labels.running")}</span>
+            <span>${account.running ? t("common.yes") : t("common.no")}</span>
           </div>
           <div>
-            <span class="label">Configured</span>
-            <span>${account.configured ? "Yes" : "No"}</span>
+            <span class="label">${t("channels.labels.configured")}</span>
+            <span>${account.configured ? t("common.yes") : t("common.no")}</span>
           </div>
           <div>
-            <span class="label">Last inbound</span>
-            <span>${account.lastInboundAt ? formatAgo(account.lastInboundAt) : "n/a"}</span>
+            <span class="label">${t("channels.lastInbound")}</span>
+            <span>${account.lastInboundAt ? formatAgo(account.lastInboundAt) : t("common.na")}</span>
           </div>
           ${account.lastError
             ? html`
@@ -54,7 +55,7 @@ export function renderTelegramCard(params: {
   return html`
     <div class="card">
       <div class="card-title">Telegram</div>
-      <div class="card-sub">Bot status and channel configuration.</div>
+      <div class="card-sub">${t("channels.telegram.desc")}</div>
       ${accountCountLabel}
 
       ${hasMultipleAccounts
@@ -66,24 +67,24 @@ export function renderTelegramCard(params: {
         : html`
             <div class="status-list" style="margin-top: 16px;">
               <div>
-                <span class="label">Configured</span>
-                <span>${telegram?.configured ? "Yes" : "No"}</span>
+                <span class="label">${t("channels.labels.configured")}</span>
+                <span>${telegram?.configured ? t("common.yes") : t("common.no")}</span>
               </div>
               <div>
-                <span class="label">Running</span>
-                <span>${telegram?.running ? "Yes" : "No"}</span>
+                <span class="label">${t("channels.labels.running")}</span>
+                <span>${telegram?.running ? t("common.yes") : t("common.no")}</span>
               </div>
               <div>
-                <span class="label">Mode</span>
-                <span>${telegram?.mode ?? "n/a"}</span>
+                <span class="label">${t("channels.telegram.mode")}</span>
+                <span>${telegram?.mode ?? t("common.na")}</span>
               </div>
               <div>
-                <span class="label">Last start</span>
-                <span>${telegram?.lastStartAt ? formatAgo(telegram.lastStartAt) : "n/a"}</span>
+                <span class="label">${t("channels.telegram.lastStart")}</span>
+                <span>${telegram?.lastStartAt ? formatAgo(telegram.lastStartAt) : t("common.na")}</span>
               </div>
               <div>
-                <span class="label">Last probe</span>
-                <span>${telegram?.lastProbeAt ? formatAgo(telegram.lastProbeAt) : "n/a"}</span>
+                <span class="label">${t("channels.telegram.lastProbe")}</span>
+                <span>${telegram?.lastProbeAt ? formatAgo(telegram.lastProbeAt) : t("common.na")}</span>
               </div>
             </div>
           `}
@@ -96,7 +97,7 @@ export function renderTelegramCard(params: {
 
       ${telegram?.probe
         ? html`<div class="callout" style="margin-top: 12px;">
-            Probe ${telegram.probe.ok ? "ok" : "failed"} ·
+            ${t("channels.telegram.probe")} ${telegram.probe.ok ? t("channels.telegram.probeOk") : t("channels.telegram.probeFailed")} ·
             ${telegram.probe.status ?? ""} ${telegram.probe.error ?? ""}
           </div>`
         : nothing}
@@ -105,7 +106,7 @@ export function renderTelegramCard(params: {
 
       <div class="row" style="margin-top: 12px;">
         <button class="btn" @click=${() => props.onRefresh(true)}>
-          Probe
+          ${t("channels.telegram.probe")}
         </button>
       </div>
     </div>