Phase 19: the copy stops being hardcoded Mandarin

Every `中文 · English` string moves out of ~29 components into web/src/i18n: one Pack type, a verbatim zh pack, and two ways to read it — usePack() for components, pack() for the modules that build a line when something happens rather than when something renders. Anything with a value in it is a function on the pack rather than a template at the call site, English pluralisation included: word order isn't universal, and a pack author has to be able to move the number. The roster constants (tones, rewrite styles, export formats, companions) keep only value + emoji, so a label can't drift from its key. On the server, internal/llm/lang.go replaces "Simplified Chinese" in the three prompts that actually name her language. pt-PT is spelled "European Portuguese (pt-PT, never Brazilian Portuguese)" in the prompt itself, and each Lang carries her word for "why" so the tutor prompt still recognises the question when she asks it her way. pair_lang reaches the model through the row-scoped query each handler already ran — the one that proves she owns the document — rather than a second lookup that could disagree with it. Also records Phase 18's deploy: migration 0011 rehearsed against a copy of the live VPS database, then applied for real.
2026-07-27 08:37:05 -07:00
parent 30d5e691c9
commit 336cae93e0
45 changed files with 1331 additions and 371 deletions
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { api, streamSuggestionChat, type ChatMessage } from '../../api/client'
+import { usePack } from '../../i18n'

 interface Props {
  suggestionId: string
@@ -19,6 +20,7 @@ const CHAT_FONT = "'Nunito', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC
 // the card (unmounting) clears it. Each send streams Petal's reply token-by-
 // token into the latest assistant bubble.
 export function AskPetal({ suggestionId, explanation }: Props) {
+  const t = usePack()
  // Opening bubble starts empty (caret-only) and fills with the Mandarin
  // translation once it lands; `seeding` drives that loading caret.
  const [messages, setMessages] = useState<ChatMessage[]>([{ role: 'assistant', content: '' }])
@@ -137,7 +139,7 @@ export function AskPetal({ suggestionId, explanation }: Props) {
          ref={inputRef}
          value={input}
          onChange={(e) => setInput(e.target.value)}
-          placeholder="Ask why… / 问为什么…"
+          placeholder={t.editor.askPlaceholder}
          className="min-w-0 flex-1 rounded-full px-3 py-1.5 text-xs focus:outline-none"
          style={{
            background: 'var(--color-surface-alt)',
@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { Editor } from '@tiptap/react'
 import { clearSearch, getSearchState, setActive, setSearch } from './SearchHighlight'
+import { usePack } from '../../i18n'

 // FindReplace is the in-document search bar (Ctrl/Cmd+F). It drives the
 // SearchHighlight decoration layer: typing updates the highlighted matches, the
@@ -26,6 +27,7 @@ function scrollToActive(editor: Editor) {
 }

 export function FindReplace({ editor, onClose }: Props) {
+  const t = usePack()
  const [query, setQuery] = useState('')
  const [replacement, setReplacement] = useState('')
  const [caseSensitive, setCaseSensitive] = useState(false)
@@ -140,7 +142,7 @@ export function FindReplace({ editor, onClose }: Props) {
              go(e.shiftKey ? -1 : 1)
            }
          }}
-          placeholder="查找 · Find"
+          placeholder={t.editor.findPlaceholder}
          className="min-w-0 flex-1 px-2 py-1.5 text-sm focus:outline-none"
          style={inputStyle}
        />
@@ -148,7 +150,7 @@ export function FindReplace({ editor, onClose }: Props) {
          className="w-14 shrink-0 text-center text-xs tabular-nums"
          style={{ color: 'var(--color-muted)' }}
        >
-          {count ? `${active + 1} / ${count}` : query ? '无 · 0' : ''}
+          {count ? `${active + 1} / ${count}` : query ? t.editor.findNone : ''}
        </span>
        <FindBtn label="Previous match" disabled={!count} onClick={() => go(-1)}>↑</FindBtn>
        <FindBtn label="Next match" disabled={!count} onClick={() => go(1)}>↓</FindBtn>
@@ -156,11 +158,11 @@ export function FindReplace({ editor, onClose }: Props) {
          label="Match case"
          active={caseSensitive}
          onClick={() => setCaseSensitive((v) => !v)}
-          title="Match case · 区分大小写"
+          title={t.editor.matchCase}
        >
          Aa
        </FindBtn>
-        <FindBtn label="Close" onClick={onClose} title="Close · 关闭">✕</FindBtn>
+        <FindBtn label="Close" onClick={onClose} title={t.editor.close}>✕</FindBtn>
      </div>

      {showReplace && (
@@ -174,7 +176,7 @@ export function FindReplace({ editor, onClose }: Props) {
                replaceActive()
              }
            }}
-            placeholder="替换为 · Replace"
+            placeholder={t.editor.replacePlaceholder}
            className="min-w-0 flex-1 px-2 py-1.5 text-sm focus:outline-none"
            style={inputStyle}
          />
@@ -185,7 +187,7 @@ export function FindReplace({ editor, onClose }: Props) {
            className="h-8 shrink-0 whitespace-nowrap px-2.5 text-xs font-semibold disabled:opacity-40"
            style={{ borderRadius: 'var(--radius-pill)', background: 'var(--color-surface-alt)', color: 'var(--color-plum)' }}
          >
-            替换
+            {t.editor.replace}
          </button>
          <button
            type="button"
@@ -194,7 +196,7 @@ export function FindReplace({ editor, onClose }: Props) {
            className="h-8 shrink-0 whitespace-nowrap px-2.5 text-xs font-bold disabled:opacity-40"
            style={{ borderRadius: 'var(--radius-pill)', background: 'var(--color-accent)', color: '#fff' }}
          >
-            全部
+            {t.editor.replaceAll}
          </button>
        </div>
      )}
@@ -4,6 +4,8 @@
 // bilingual (zh-first, en subtitle) to match the rest of Petal's chrome — the
 // user writes in Mandarin and English (spec Note #17).

+import { usePack } from '../../i18n'
+
 interface Props {
  word: string
  suggestions: string[]
@@ -13,6 +15,7 @@ interface Props {
 }

 export function MisspellCard({ word, suggestions, style, onReplace, onAdd }: Props) {
+  const t = usePack()
  const shown = suggestions.slice(0, 5)
  return (
    <div
@@ -33,7 +36,7 @@ export function MisspellCard({ word, suggestions, style, onReplace, onAdd }: Pro
          className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold"
          style={{ background: 'var(--color-accent)', color: 'white' }}
        >
-          拼写 · Spelling
+          {t.editor.spelling}
        </span>
        <span className="font-semibold" style={{ color: 'var(--color-muted)' }}>
          {word}
@@ -58,7 +61,7 @@ export function MisspellCard({ word, suggestions, style, onReplace, onAdd }: Pro
        </div>
      ) : (
        <p className="mt-2.5 leading-snug" style={{ color: 'var(--color-muted)' }}>
-          没有建议 · No suggestions
+          {t.editor.noSuggestions}
        </p>
      )}

@@ -68,7 +71,7 @@ export function MisspellCard({ word, suggestions, style, onReplace, onAdd }: Pro
        className="mt-3 rounded-full px-2.5 py-1 text-xs font-bold transition-colors"
        style={{ background: 'transparent', color: 'var(--color-accent-hover)' }}
      >
-        添加到词典 · Add to dictionary
+        {t.editor.addToDictionary}
      </button>
    </div>
  )
@@ -1,4 +1,5 @@
 import { REWRITE_STYLES } from './SelectionBubble'
+import { usePack } from '../../i18n'

 // RewritePreview shows the result of a tone-rewrite before it touches the
 // document: the writer's original passage, the model's rewrite beneath it, and
@@ -30,6 +31,7 @@ export function RewritePreview({
  onCancel,
  onRetry,
 }: Props) {
+  const t = usePack()
  const meta = REWRITE_STYLES.find((s) => s.value === style) ?? REWRITE_STYLES[0]

  return (
@@ -54,10 +56,10 @@ export function RewritePreview({
          style={{ background: 'var(--color-accent)', color: 'var(--color-plum)' }}
        >
          <span aria-hidden>{meta.emoji}</span>
-          {meta.zh} · {meta.en}
+          {t.styles[meta.value].native} · {t.styles[meta.value].en}
        </span>
        <span className="text-xs font-semibold" style={{ color: 'var(--color-muted)' }}>
-          改写 · Rewrite
+          {t.editor.rewrite}
        </span>
      </div>

@@ -76,14 +78,14 @@ export function RewritePreview({
            style={{ background: 'var(--color-accent)' }}
            aria-hidden
          />
-          改写中… · Rewriting…
+          {t.editor.rewriting}
        </div>
      )}

      {status === 'error' && (
        <div className="mt-3">
          <p className="leading-snug" style={{ color: 'var(--color-muted)' }}>
-            改写失败，请再试一次 · Couldn’t rewrite — try again
+            {t.editor.rewriteFailed}
          </p>
          <div className="mt-2.5 flex justify-end gap-2">
            <button
@@ -92,7 +94,7 @@ export function RewritePreview({
              className="rounded-full px-3 py-1 text-xs font-semibold"
              style={{ background: 'var(--color-surface-alt)', color: 'var(--color-plum)' }}
            >
-              取消 · Cancel
+              {t.editor.cancel}
            </button>
            <button
              type="button"
@@ -100,7 +102,7 @@ export function RewritePreview({
              className="rounded-full px-3 py-1 text-xs font-bold"
              style={{ background: 'var(--color-accent)', color: 'var(--color-plum)' }}
            >
-              重试 · Retry
+              {t.editor.retry}
            </button>
          </div>
        </div>
@@ -118,7 +120,7 @@ export function RewritePreview({
              className="rounded-full px-3 py-1 text-xs font-semibold"
              style={{ background: 'var(--color-surface-alt)', color: 'var(--color-plum)' }}
            >
-              取消 · Cancel
+              {t.editor.cancel}
            </button>
            <button
              type="button"
@@ -126,7 +128,7 @@ export function RewritePreview({
              className="rounded-full px-3 py-1 text-xs font-bold"
              style={{ background: 'var(--color-accent)', color: 'var(--color-plum)' }}
            >
-              用这个 · Use this
+              {t.editor.useThis}
            </button>
          </div>
        </>
@@ -1,27 +1,27 @@
 // SelectionBubble floats above a text selection and offers to rewrite it: a
-// prominent "✨ 更自然 Say it naturally" action plus the tone vocabulary (学术,
-// 轻松, …) mirrored from the document-tone picker. Picking one hands the style up
+// prominent "say it naturally" action plus the tone vocabulary mirrored from the
+// document-tone picker (labels come from the langpack). Picking one hands the style up
 // to EditorCore, which calls the LLM and shows a preview. Buttons use
 // onMouseDown→preventDefault so clicking them doesn't collapse the selection
 // before the handler captures its range.

+import { usePack } from '../../i18n'
+
 export interface RewriteStyle {
  value: string
  emoji: string
-  zh: string
-  en: string
 }

 // 'natural' is the default "say it more naturally" rewrite; the rest mirror the
 // llm styleGuidance keys (and the ToneSelect labels) so the two stay in step.
 export const REWRITE_STYLES: RewriteStyle[] = [
-  { value: 'natural', emoji: '✨', zh: '更自然', en: 'Natural' },
-  { value: 'academic', emoji: '🎓', zh: '学术', en: 'Academic' },
-  { value: 'professional', emoji: '💼', zh: '专业', en: 'Professional' },
-  { value: 'casual', emoji: '☕', zh: '轻松', en: 'Casual' },
-  { value: 'humorous', emoji: '😄', zh: '幽默', en: 'Humorous' },
-  { value: 'creative', emoji: '🎨', zh: '创意', en: 'Creative' },
-  { value: 'persuasive', emoji: '📣', zh: '说服', en: 'Persuasive' },
+  { value: 'natural', emoji: '✨' },
+  { value: 'academic', emoji: '🎓' },
+  { value: 'professional', emoji: '💼' },
+  { value: 'casual', emoji: '☕' },
+  { value: 'humorous', emoji: '😄' },
+  { value: 'creative', emoji: '🎨' },
+  { value: 'persuasive', emoji: '📣' },
 ]

 interface Props {
@@ -35,6 +35,7 @@ interface Props {
 const CJK = "'Nunito','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif"

 export function SelectionBubble({ style, onRewrite, onSpeak }: Props) {
+  const pk = usePack()
  const [natural, ...tones] = REWRITE_STYLES

  return (
@@ -64,9 +65,9 @@ export function SelectionBubble({ style, onRewrite, onSpeak }: Props) {
        title="Rewrite the selection to sound more natural"
      >
        <span aria-hidden>{natural.emoji}</span>
-        <span>{natural.zh}</span>
+        <span>{pk.styles[natural.value].native}</span>
        <span className="font-semibold" style={{ color: 'var(--color-plum)', opacity: 0.7 }}>
-          {natural.en}
+          {pk.styles[natural.value].en}
        </span>
      </button>

@@ -77,7 +78,7 @@ export function SelectionBubble({ style, onRewrite, onSpeak }: Props) {
          onClick={onSpeak}
          className="inline-flex h-8 items-center justify-center px-2 text-sm"
          style={{ borderRadius: 'var(--radius-pill)', background: 'var(--color-surface-alt)', color: 'var(--color-plum)', pointerEvents: 'auto' }}
-          title="朗读所选 · Read selection aloud"
+          title={pk.editor.readSelection}
          aria-label="Read selection aloud"
        >
          🔊
@@ -96,10 +97,10 @@ export function SelectionBubble({ style, onRewrite, onSpeak }: Props) {
          style={{ borderRadius: 'var(--radius-pill)', background: 'var(--color-surface-alt)', color: 'var(--color-plum)', pointerEvents: 'auto' }}
          onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-lavender)')}
          onMouseLeave={(e) => (e.currentTarget.style.background = 'var(--color-surface-alt)')}
-          title={`Rewrite in a ${t.en.toLowerCase()} tone`}
+          title={`Rewrite in a ${pk.styles[t.value].en.toLowerCase()} tone`}
        >
          <span aria-hidden>{t.emoji}</span>
-          <span>{t.zh}</span>
+          <span>{pk.styles[t.value].native}</span>
        </button>
      ))}
    </div>
@@ -1,28 +1,29 @@
 import { useEffect, useRef, useState } from 'react'

+import { usePack } from '../../i18n'
+
 // ToneSelect lets the writer set the document's target tone, which steers the
 // grammar-checkpoint LLM toward the right register (an academic essay vs a casual
 // journal). A small custom dropdown (not a native <select>) so it can carry the
-// bilingual zh·en labels and emoji that match Petal's chrome — the writer uses
-// Mandarin and English. The `value` strings mirror the backend's tone keys.
+// bilingual labels and emoji that match Petal's chrome — the writer reads her
+// own language and English. The `value` strings mirror the backend's tone keys;
+// the labels themselves live in the langpack, keyed by the same value.

 export interface ToneOption {
  value: string
  emoji: string
-  zh: string
-  en: string
 }

 // Keep these `value`s in sync with llm.toneGuidance on the server. 'general'
 // means no steering (Petal's default friendly ESL advice).
 export const TONES: ToneOption[] = [
-  { value: 'general', emoji: '🌸', zh: '通用', en: 'General' },
-  { value: 'academic', emoji: '🎓', zh: '学术', en: 'Academic' },
-  { value: 'professional', emoji: '💼', zh: '专业', en: 'Professional' },
-  { value: 'casual', emoji: '☕', zh: '轻松', en: 'Casual' },
-  { value: 'humorous', emoji: '😄', zh: '幽默', en: 'Humorous' },
-  { value: 'creative', emoji: '🎨', zh: '创意', en: 'Creative' },
-  { value: 'persuasive', emoji: '📣', zh: '说服', en: 'Persuasive' },
+  { value: 'general', emoji: '🌸' },
+  { value: 'academic', emoji: '🎓' },
+  { value: 'professional', emoji: '💼' },
+  { value: 'casual', emoji: '☕' },
+  { value: 'humorous', emoji: '😄' },
+  { value: 'creative', emoji: '🎨' },
+  { value: 'persuasive', emoji: '📣' },
 ]

 interface Props {
@@ -31,6 +32,7 @@ interface Props {
 }

 export function ToneSelect({ value, onChange }: Props) {
+  const pk = usePack()
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  const current = TONES.find((t) => t.value === value) ?? TONES[0]
@@ -63,8 +65,8 @@ export function ToneSelect({ value, onChange }: Props) {
        title="Set the tone — Petal tailors its advice to match"
      >
        <span aria-hidden>{current.emoji}</span>
-        <span>{current.zh}</span>
-        <span style={{ color: 'var(--color-muted)' }}>· {current.en}</span>
+        <span>{pk.tones[current.value].native}</span>
+        <span style={{ color: 'var(--color-muted)' }}>· {pk.tones[current.value].en}</span>
        <span aria-hidden style={{ color: 'var(--color-muted)' }}>
          ⌄
        </span>
@@ -105,9 +107,9 @@ export function ToneSelect({ value, onChange }: Props) {
                }
              >
                <span aria-hidden>{t.emoji}</span>
-                <span>{t.zh}</span>
+                <span>{pk.tones[t.value].native}</span>
                <span className="font-normal" style={{ color: 'var(--color-muted)' }}>
-                  {t.en}
+                  {pk.tones[t.value].en}
                </span>
              </button>
            )
@@ -1,5 +1,6 @@
 import type { WordInfo } from '../../api/client'
 import { speak, speechSupported } from '../../audio/speech'
+import { usePack } from '../../i18n'

 // WordCard is the right-click popover for any word: its dictionary definition(s)
 // on top and tappable synonym pills below. Clicking a synonym replaces the word
@@ -20,6 +21,7 @@ interface Props {
 }

 export function WordCard({ word, info, loading, saved, onToggleSave, style, onReplace }: Props) {
+  const t = usePack()
  const definitions = info?.definitions ?? []
  const synonyms = info?.synonyms ?? []
  const gloss = info?.gloss ?? ''
@@ -47,7 +49,7 @@ export function WordCard({ word, info, loading, saved, onToggleSave, style, onRe
          className="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-bold"
          style={{ background: 'var(--color-lavender)', color: 'var(--color-plum)' }}
        >
-          词语 · Word
+          {t.editor.word}
        </span>
        <span className="font-bold" style={{ color: 'var(--color-plum)' }}>
          {word}
@@ -59,7 +61,7 @@ export function WordCard({ word, info, loading, saved, onToggleSave, style, onRe
              onClick={onToggleSave}
              aria-label={saved ? 'Remove from vocabulary garden' : 'Save to vocabulary garden'}
              aria-pressed={saved}
-              title={saved ? '已在词汇花园 · In your garden (tap to remove)' : '加入词汇花园 · Save to garden'}
+              title={saved ? t.editor.inGarden : t.editor.saveToGarden}
              className="flex h-7 w-7 items-center justify-center rounded-full text-sm transition-transform"
              style={{
                background: saved ? 'var(--color-accent)' : 'var(--color-surface-alt)',
@@ -73,7 +75,7 @@ export function WordCard({ word, info, loading, saved, onToggleSave, style, onRe
              type="button"
              onClick={() => speak(word)}
              aria-label={`Pronounce ${word}`}
-              title="朗读 · Read aloud"
+              title={t.editor.readAloud}
              className="flex h-7 w-7 items-center justify-center rounded-full text-sm"
              style={{ background: 'var(--color-surface-alt)', color: 'var(--color-plum)' }}
            >
@@ -111,14 +113,14 @@ export function WordCard({ word, info, loading, saved, onToggleSave, style, onRe
            style={{ background: 'var(--color-accent)' }}
            aria-hidden
          />
-          查找中… · Looking up…
+          {t.editor.lookingUp}
        </div>
      )}

      {definitions.length > 0 && (
        <div className="mt-3 space-y-2">
          <p className="text-xs font-bold" style={{ color: 'var(--color-muted)' }}>
-            释义 · Definition
+            {t.editor.definition}
          </p>
          <ol className="space-y-1.5">
            {definitions.map((m, i) => (
@@ -143,7 +145,7 @@ export function WordCard({ word, info, loading, saved, onToggleSave, style, onRe
      {synonyms.length > 0 && (
        <div className="mt-3">
          <p className="mb-1.5 text-xs font-bold" style={{ color: 'var(--color-muted)' }}>
-            近义词 · Synonyms <span className="font-normal">(点击替换 · tap to swap)</span>
+            {t.editor.synonyms} <span className="font-normal">({t.editor.tapToSwap})</span>
          </p>
          <div className="flex flex-wrap gap-1.5">
            {synonyms.map((s) => (
@@ -165,7 +167,7 @@ export function WordCard({ word, info, loading, saved, onToggleSave, style, onRe

      {empty && (
        <p className="mt-3 leading-snug" style={{ color: 'var(--color-muted)' }}>
-          没有找到这个词 · Nothing found for this word
+          {t.editor.nothingFound}
        </p>
      )}
    </div>