feat(ui): localize UI strings
Converts hardcoded UI copy to i18n keys across the app, adds global translation for non-component modules, and splits the English catalog into feature modules with duplicate-key detection.
This commit is contained in:
@@ -2,28 +2,26 @@ import { Dialog } from "@kobalte/core/dialog"
|
||||
import { Component, Show, createEffect, createSignal } from "solid-js"
|
||||
import { alertDialogState, dismissAlertDialog } from "../stores/alerts"
|
||||
import type { AlertVariant, AlertDialogState } from "../stores/alerts"
|
||||
import { useI18n } from "../lib/i18n"
|
||||
|
||||
const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string; badgeText: string; symbol: string; fallbackTitle: string }> = {
|
||||
const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string; badgeText: string; symbol: string }> = {
|
||||
info: {
|
||||
badgeBg: "var(--badge-neutral-bg)",
|
||||
badgeBorder: "var(--border-base)",
|
||||
badgeText: "var(--accent-primary)",
|
||||
symbol: "i",
|
||||
fallbackTitle: "Heads up",
|
||||
},
|
||||
warning: {
|
||||
badgeBg: "rgba(255, 152, 0, 0.14)",
|
||||
badgeBorder: "var(--status-warning)",
|
||||
badgeText: "var(--status-warning)",
|
||||
symbol: "!",
|
||||
fallbackTitle: "Please review",
|
||||
},
|
||||
error: {
|
||||
badgeBg: "var(--danger-soft-bg)",
|
||||
badgeBorder: "var(--status-error)",
|
||||
badgeText: "var(--status-error)",
|
||||
symbol: "!",
|
||||
fallbackTitle: "Something went wrong",
|
||||
},
|
||||
}
|
||||
|
||||
@@ -60,6 +58,7 @@ function dismiss(confirmed: boolean, payload?: AlertDialogState | null, promptVa
|
||||
}
|
||||
|
||||
const AlertDialog: Component = () => {
|
||||
const { t } = useI18n()
|
||||
let primaryButtonRef: HTMLButtonElement | undefined
|
||||
let promptInputRef: HTMLInputElement | undefined
|
||||
|
||||
@@ -82,11 +81,25 @@ const AlertDialog: Component = () => {
|
||||
{(payload) => {
|
||||
const variant = payload.variant ?? "info"
|
||||
const accent = variantAccent[variant]
|
||||
const title = payload.title || accent.fallbackTitle
|
||||
|
||||
const fallbackTitle =
|
||||
variant === "warning"
|
||||
? t("alertDialog.fallbackTitle.warning")
|
||||
: variant === "error"
|
||||
? t("alertDialog.fallbackTitle.error")
|
||||
: t("alertDialog.fallbackTitle.info")
|
||||
|
||||
const title = payload.title || fallbackTitle
|
||||
const isConfirm = payload.type === "confirm"
|
||||
const isPrompt = payload.type === "prompt"
|
||||
const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : isPrompt ? "Run" : "OK")
|
||||
const cancelLabel = payload.cancelLabel || "Cancel"
|
||||
const confirmLabel =
|
||||
payload.confirmLabel ||
|
||||
(isConfirm
|
||||
? t("alertDialog.actions.confirm")
|
||||
: isPrompt
|
||||
? t("alertDialog.actions.run")
|
||||
: t("alertDialog.actions.ok"))
|
||||
const cancelLabel = payload.cancelLabel || t("alertDialog.actions.cancel")
|
||||
|
||||
const [inputValue, setInputValue] = createSignal(payload.inputDefaultValue ?? "")
|
||||
|
||||
@@ -127,7 +140,9 @@ const AlertDialog: Component = () => {
|
||||
|
||||
<Show when={isPrompt}>
|
||||
<div class="mt-4">
|
||||
<label class="text-sm font-medium text-secondary">{payload.inputLabel || "Input"}</label>
|
||||
<label class="text-sm font-medium text-secondary">
|
||||
{payload.inputLabel || t("alertDialog.prompt.inputLabel")}
|
||||
</label>
|
||||
<input
|
||||
ref={(el) => {
|
||||
promptInputRef = el
|
||||
|
||||
Reference in New Issue
Block a user