xieyao/opencode-mobile
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(i18n): extract remaining screens into en/zh-Hans catalogs; full Simplified Chinese coverage (closes #68) (#103)

Browse Source 
Extends the i18n infra from #97 (Settings screen only) to the rest of the
app: session chat screen, connection add/edit/list screens, sessions list
(incl. directory grouping from #96), navigation titles, notifications
category metadata, error boundary, telemetry consent modal, auth gate, and
every chat UI component (permission/question prompts, status indicator,
model/variant pickers, directory switcher/browser, reasoning block, tool
call card, session info).

- 244 new keys added to en.json/zh-Hans.json with reviewed, natural
  Simplified Chinese (not machine-garbage), keeping key sets identical.
- User content, server URLs, code snippets, log/error-detail text, and
  diagnostics-classify.ts (pure dependency-free module feeding Sentry/
  support reports) are intentionally left untranslated per scope.
- Interpolation used for counts/names (e.g. reconnect attempt, files
  count, connection name in delete confirmations); categoryMeta/
  CONNECTION_TYPES switched to labelKey indirection since they're
  module-level constants evaluated before i18next is guaranteed ready.
- Added src/lib/i18n/catalog-parity.test.ts (node --test) asserting
  en.json/zh-Hans.json expose identical key sets and no empty values,
  to catch future locale drift.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Den
2026-07-17 10:52:41 -07:00
committed by GitHub
parent 0cac46cb36
commit f945cab5c6
26 changed files with 1249 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
app/connection/[id].tsx
View File

@@ -12,6 +12,7 @@ import {
} from "react-native"
import { router, useLocalSearchParams } from "expo-router"
import { Ionicons } from "@expo/vector-icons"
import { useTranslation } from "react-i18next"
import { useConnections } from "../../src/stores/connections"
import { useEvents } from "../../src/stores/events"
import type { ConnectionType } from "../../src/lib/types"
@@ -19,20 +20,24 @@ import { probeConnection, shareReport } from "../../src/lib/diagnostics"
import { captureDiagnostic } from "../../src/lib/sentry"
import { parseUrl } from "../../src/lib/diagnostics-classify"
// labelKey (not literal text): this is a module-level constant evaluated
// before i18next is guaranteed ready, so the label is resolved with t() at
// render time — same pattern as categoryMeta in src/lib/notifications.ts.
const CONNECTION_TYPES: Array<{
type: ConnectionType
label: string
labelKey: string
icon: keyof typeof Ionicons.glyphMap
}> = [
{ type: "local", label: "Local", icon: "wifi" },
{ type: "tunnel", label: "Tunnel", icon: "globe" },
{ type: "cloud", label: "Cloud", icon: "cloud" },
{ type: "local", labelKey: "connection.shared.types.local", icon: "wifi" },
{ type: "tunnel", labelKey: "connection.shared.types.tunnel", icon: "globe" },
{ type: "cloud", labelKey: "connection.shared.types.cloud", icon: "cloud" },
]
export default function EditConnectionScreen() {
const { id } = useLocalSearchParams<{ id: string }>()
const colorScheme = useColorScheme()
const isDark = colorScheme === "dark"
const { t } = useTranslation()
const { connections, updateConnection, removeConnection, testConnection } = useConnections()
@@ -60,18 +65,18 @@ export default function EditConnectionScreen() {
if (!connection) {
return (
<View style={[styles.container, isDark && styles.containerDark, styles.center]}>
<Text style={[styles.errorText, isDark && styles.textDark]}>Connection not found</Text>
<Text style={[styles.errorText, isDark && styles.textDark]}>{t("connection.edit.notFound")}</Text>
</View>
)
}
const handleTest = async () => {
if (!url.trim()) {
Alert.alert("Error", "Please enter a server URL")
Alert.alert(t("common.error"), t("connection.shared.alerts.enterUrl"))
return
}
if (!parseUrl(url).valid) {
Alert.alert("Invalid URL", "Enter a full URL including http:// or https://, e.g. http://192.168.1.100:4096")
Alert.alert(t("connection.shared.alerts.invalidUrlTitle"), t("connection.shared.alerts.invalidUrlMessage"))
return
}
@@ -91,7 +96,7 @@ export default function EditConnectionScreen() {
if (result.ok) {
setIsTesting(false)
Alert.alert("Success", "Connection successful!")
Alert.alert(t("connection.edit.alerts.successTitle"), t("connection.edit.alerts.successMessage"))
return
}
@@ -103,23 +108,30 @@ export default function EditConnectionScreen() {
captureDiagnostic(report)
setIsTesting(false)
Alert.alert("Connection Failed", `${report.summary}\n\n(${result.error || "no detail"})`, [
{ text: "OK", style: "cancel" },
{ text: "Share report", onPress: () => shareReport(report) },
])
Alert.alert(
t("connection.shared.alerts.connectionFailedTitle"),
t("connection.edit.alerts.connectionFailedMessage", {
summary: report.summary,
detail: result.error || t("connection.edit.alerts.noDetail"),
}),
[
{ text: t("common.ok"), style: "cancel" },
{ text: t("common.shareReport"), onPress: () => shareReport(report) },
],
)
}
const handleSave = async () => {
if (!name.trim()) {
Alert.alert("Error", "Please enter a connection name")
Alert.alert(t("common.error"), t("connection.shared.alerts.enterName"))
return
}
if (!url.trim()) {
Alert.alert("Error", "Please enter a server URL")
Alert.alert(t("common.error"), t("connection.shared.alerts.enterUrl"))
return
}
if (!parseUrl(url).valid) {
Alert.alert("Invalid URL", "Enter a full URL including http:// or https://, e.g. http://192.168.1.100:4096")
Alert.alert(t("connection.shared.alerts.invalidUrlTitle"), t("connection.shared.alerts.invalidUrlMessage"))
return
}
@@ -143,10 +155,10 @@ export default function EditConnectionScreen() {
}
const handleDelete = () => {
Alert.alert("Delete Connection", `Are you sure you want to delete "${connection.name}"?`, [
{ text: "Cancel", style: "cancel" },
Alert.alert(t("connection.edit.alerts.deleteTitle"), t("connection.edit.alerts.deleteMessage", { name: connection.name }), [
{ text: t("common.cancel"), style: "cancel" },
{
text: "Delete",
text: t("common.delete"),
style: "destructive",
onPress: async () => {
await removeConnection(connection.id)
@@ -163,50 +175,50 @@ export default function EditConnectionScreen() {
keyboardShouldPersistTaps="handled"
>
{/* Connection Type */}
<Text style={[styles.label, isDark && styles.labelDark]}>Connection Type</Text>
<Text style={[styles.label, isDark && styles.labelDark]}>{t("connection.shared.connectionType")}</Text>
<View style={styles.typeContainer}>
{CONNECTION_TYPES.map((t) => (
{CONNECTION_TYPES.map((opt) => (
<TouchableOpacity
key={t.type}
key={opt.type}
style={[
styles.typeOption,
isDark && styles.typeOptionDark,
type === t.type && styles.typeOptionSelected,
type === t.type && isDark && styles.typeOptionSelectedDark,
type === opt.type && styles.typeOptionSelected,
type === opt.type && isDark && styles.typeOptionSelectedDark,
]}
onPress={() => setType(t.type)}
onPress={() => setType(opt.type)}
>
<Ionicons
name={t.icon}
name={opt.icon}
size={20}
color={type === t.type ? (isDark ? "#0a0a0a" : "#ffffff") : isDark ? "#888888" : "#666666"}
color={type === opt.type ? (isDark ? "#0a0a0a" : "#ffffff") : isDark ? "#888888" : "#666666"}
/>
<Text
style={[
styles.typeLabel,
isDark && styles.textDark,
type === t.type && styles.typeLabelSelected,
type === t.type && isDark && styles.typeLabelSelectedDark,
type === opt.type && styles.typeLabelSelected,
type === opt.type && isDark && styles.typeLabelSelectedDark,
]}
>
{t.label}
{t(opt.labelKey)}
</Text>
</TouchableOpacity>
))}
</View>
{/* Name */}
<Text style={[styles.label, isDark && styles.labelDark]}>Name</Text>
<Text style={[styles.label, isDark && styles.labelDark]}>{t("connection.shared.name")}</Text>
<TextInput
style={[styles.input, isDark && styles.inputDark]}
placeholder="My Server"
placeholder={t("connection.shared.namePlaceholder")}
placeholderTextColor={isDark ? "#666666" : "#999999"}
value={name}
onChangeText={setName}
/>
{/* URL */}
<Text style={[styles.label, isDark && styles.labelDark]}>Server URL</Text>
<Text style={[styles.label, isDark && styles.labelDark]}>{t("connection.shared.serverUrl")}</Text>
<TextInput
style={[styles.input, isDark && styles.inputDark]}
placeholder="http://192.168.1.100:4096"
@@ -219,7 +231,7 @@ export default function EditConnectionScreen() {
/>
{/* Directory */}
<Text style={[styles.label, isDark && styles.labelDark]}>Project Directory (Optional)</Text>
<Text style={[styles.label, isDark && styles.labelDark]}>{t("connection.shared.directoryOptional")}</Text>
<TextInput
style={[styles.input, isDark && styles.inputDark]}
placeholder="/path/to/project"
@@ -229,14 +241,12 @@ export default function EditConnectionScreen() {
autoCapitalize="none"
autoCorrect={false}
/>
<Text style={[styles.hint, isDark && styles.hintDark]}>
Leave empty to use the server's current directory. Sessions will be created in this folder.
</Text>
<Text style={[styles.hint, isDark && styles.hintDark]}>{t("connection.edit.directoryHint")}</Text>
{/* Auth */}
<Text style={[styles.sectionTitle, isDark && styles.textDark]}>Authentication</Text>
<Text style={[styles.sectionTitle, isDark && styles.textDark]}>{t("connection.shared.authentication")}</Text>
<Text style={[styles.label, isDark && styles.labelDark]}>Username</Text>
<Text style={[styles.label, isDark && styles.labelDark]}>{t("connection.shared.username")}</Text>
<TextInput
style={[styles.input, isDark && styles.inputDark]}
placeholder="admin"
@@ -247,7 +257,7 @@ export default function EditConnectionScreen() {
autoCorrect={false}
/>
<Text style={[styles.label, isDark && styles.labelDark]}>Password (leave empty to keep existing)</Text>
<Text style={[styles.label, isDark && styles.labelDark]}>{t("connection.edit.passwordLabel")}</Text>
<TextInput
style={[styles.input, isDark && styles.inputDark]}
placeholder="••••••••"
@@ -269,7 +279,7 @@ export default function EditConnectionScreen() {
) : (
<>
<Ionicons name="pulse" size={20} color={isDark ? "#ffffff" : "#0a0a0a"} />
<Text style={[styles.testButtonText, isDark && styles.textDark]}>Test Connection</Text>
<Text style={[styles.testButtonText, isDark && styles.textDark]}>{t("connection.edit.testButton")}</Text>
</>
)}
</TouchableOpacity>
@@ -282,13 +292,15 @@ export default function EditConnectionScreen() {
{isSaving ? (
<ActivityIndicator size="small" color={isDark ? "#0a0a0a" : "#ffffff"} />
) : (
<Text style={[styles.saveButtonText, isDark && styles.saveButtonTextDark]}>Save Changes</Text>
<Text style={[styles.saveButtonText, isDark && styles.saveButtonTextDark]}>
{t("connection.edit.saveButton")}
</Text>
)}
</TouchableOpacity>
<TouchableOpacity style={styles.deleteButton} onPress={handleDelete}>
<Ionicons name="trash-outline" size={20} color="#ef4444" />
<Text style={styles.deleteButtonText}>Delete Connection</Text>
<Text style={styles.deleteButtonText}>{t("connection.edit.deleteButton")}</Text>
</TouchableOpacity>
</View>
</ScrollView>