docs/localization.md

@@ -282,8 +282,10 @@ Frames are JSON-encoded tagged msgspec structs (`pagerite/translate.py`;
   translation of the connection's current job, matching it by (lang, key).
 
 Which languages get translated is **server-configured**:
-`Data.translate_langs` (presence-key dict, read/set via `/_api/settings`
-as `translate_langs`; no editing UI yet). The dispatcher offers a
+`Data.translate_langs` (presence-key dict, bootstrapped to Spanish and
+Chinese — the original language is never a target — edited in the editor
+shell's localization tab or set via `/_api/settings` as `translate_langs`).
+The dispatcher offers a
 connection jobs only in `wanted ∩ capable`; a connection without overlap
 simply stays idle.
 

frontend/src/EditorShell.vue

@@ -7,6 +7,7 @@ import PageEditor from './PageEditor.vue'
 import BannerEditor from './BannerEditor.vue'
 import SiteEditor from './SiteEditor.vue'
 import StructureEditor from './StructureEditor.vue'
+import LocalizationEditor from './LocalizationEditor.vue'
 
 const props = defineProps({
   pagePath: { type: String, default: '' },
@@ -17,11 +18,12 @@ const emit = defineEmits(['close'])
 const currentPath = ref(props.pagePath)
 const activeMode = ref(props.initialMode)
 
-// Tab order: site-wide settings first (site, structure), then — after a
-// visual break — the per-page editors (article, banner).
+// Tab order: site-wide settings first (site, structure, localization), then
+// — after a visual break — the per-page editors (article, banner).
 const MODES = [
   { key: 'site', label: 'site', component: SiteEditor },
   { key: 'structure', label: 'structure', component: StructureEditor },
+  { key: 'localization', label: 'lang', component: LocalizationEditor },
   { key: 'page', label: 'article', component: PageEditor, breakBefore: true },
   { key: 'banner', label: 'banner', component: BannerEditor },
 ]

frontend/src/LocalizationEditor.vue

@@ -0,0 +1,210 @@
+<script setup>
+// Lang tab: the site-wide translation target languages (translate_langs)
+// and the translator service WebSocket URL(s) (translate_keys). The primary
+// language is configured per site hierarchy, not here. Flag clicks toggle
+// and save immediately; the settings round-trip re-reads the payload, so
+// this tab only ever changes translate_langs. The settings write's
+// invalidation hook kicks the translation dispatcher.
+import { computed, onActivated, onMounted, onUnmounted, ref } from 'vue'
+import { TRANSLATABLE, flagFor, langName } from './langs'
+import { dropPageCache } from './swapdoc'
+
+defineProps({ pagePath: { type: String, default: '' } })
+// close/path-change are wired by EditorShell; this tab never emits them.
+defineEmits(['close', 'pathChange'])
+
+const saveError = ref('')
+const primaryLang = ref('en')
+const selected = ref(new Set())
+const keyUrls = ref([])
+
+// The toggleable targets: every translatable language but the primary,
+// alphabetized by display name.
+const options = computed(() =>
+  Object.keys(TRANSLATABLE)
+    .filter((code) => code !== primaryLang.value)
+    .map((code) => ({ code, name: langName(code), flag: flagFor(code) }))
+    .sort((a, b) => a.name.localeCompare(b.name)),
+)
+
+function updateWindowTitle() {
+  document.title = 'lang 🖊️'
+}
+
+onActivated(updateWindowTitle)
+
+// The shell stays mounted while hidden: when it is re-shown with this tab
+// active, restore the window title.
+function onEditorShown() {
+  if (document.body.dataset.editorMode === 'localization') updateWindowTitle()
+}
+
+onMounted(async () => {
+  addEventListener('pagerite:editor-shown', onEditorShown)
+  try {
+    const s = await (await fetch('/_api/settings')).json()
+    primaryLang.value = s.primary_lang || 'en'
+    selected.value = new Set(s.translate_langs || [])
+    const wsBase = location.origin.replace(/^http/, 'ws')
+    keyUrls.value = Object.entries(s.translate_keys || {})
+      .map(([key, name]) => ({ name, url: `${wsBase}/_translate/${key}` }))
+  } catch { /* keep defaults */ }
+})
+
+onUnmounted(() => removeEventListener('pagerite:editor-shown', onEditorShown))
+
+async function toggle(code) {
+  const next = new Set(selected.value)
+  if (next.has(code)) next.delete(code)
+  else next.add(code)
+  selected.value = next
+  try {
+    const s = await (await fetch('/_api/settings')).json()
+    const res = await fetch('/_api/settings', {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ ...s, translate_langs: [...next] }),
+    })
+    if (res.ok) {
+      saveError.value = ''
+      dropPageCache()
+    } else {
+      saveError.value = '⚠️ changes could not be saved'
+    }
+  } catch {
+    saveError.value = '⚠️ changes could not be saved'
+  }
+}
+</script>
+
+<template>
+  <div class="localization-editor">
+    <div v-if="saveError">{{ saveError }}</div>
+
+    <section class="block">
+      <div class="block-head">
+        <span class="field-label">languages</span>
+      </div>
+      <div class="flags">
+        <button
+          v-for="o in options"
+          :key="o.code"
+          type="button"
+          class="flag-tile"
+          :class="{ selected: selected.has(o.code) }"
+          :title="`${o.name} (${o.code})`"
+          @click="toggle(o.code)"
+        >
+          <span class="flag" v-html="o.flag" />
+        </button>
+      </div>
+    </section>
+
+    <section v-if="keyUrls.length" class="block">
+      <div class="block-head">
+        <span class="field-label">translator service</span>
+        <small class="muted">connect scripts/translator.py to</small>
+      </div>
+      <div v-for="k in keyUrls" :key="k.url" class="key-row">
+        <code>{{ k.url }}</code>
+        <small class="muted">{{ k.name }}</small>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.localization-editor {
+  overflow-y: auto;
+  background: var(--surface);
+}
+
+.block {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--line);
+  background: var(--surface);
+}
+
+.block-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.field-label {
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+/* Flag grid: deselected flags sit dimmed and grayed; a click brings one to
+   full color with an accent ring (selected = a translation target). */
+.flags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.2rem 0;
+}
+
+.flag-tile {
+  padding: 3px;
+  background: none;
+  border: 2px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  opacity: 0.4;
+  filter: grayscale(0.8);
+  transition: opacity 0.15s, filter 0.15s, border-color 0.15s;
+}
+
+.flag-tile:hover {
+  opacity: 0.8;
+  filter: none;
+}
+
+.flag-tile.selected {
+  opacity: 1;
+  filter: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+
+/* Same flag chips as the PageEditor language picker / analytics cells. */
+.flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  flex: 0 0 auto;
+  border-radius: 2px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+}
+
+.flag-tile .flag {
+  width: 36px;
+  height: 24px;
+}
+
+.flag :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.key-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+}
+
+.key-row code {
+  user-select: all;
+}
+</style>

frontend/src/PageEditor.vue

@@ -31,8 +31,8 @@ import { EditorState } from '@codemirror/state'
 import { keymap } from '@codemirror/view'
 import { indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
-import * as flagSvgs from 'country-flag-icons/string/3x2'
 import { cmHighlight, cmTheme } from './cmtheme'
+import { flagFor, langName } from './langs'
 import { dropPageCache, loadPlain } from './swapdoc'
 
 const props = defineProps({
@@ -91,25 +91,8 @@ function normPath(p) {
 }
 
 // --- Language picker -------------------------------------------------------
-// Flag icons from the same country-flag-icons set the analytics visitor
-// cells use, resolved from the language tag's most likely region.
-const displayNames = new Intl.DisplayNames(['en'], { type: 'language' })
-
-function langName(tag) {
-  try {
-    return displayNames.of(tag) || tag
-  } catch {
-    return tag
-  }
-}
-
-function flagFor(tag) {
-  try {
-    return flagSvgs[new Intl.Locale(tag).maximize().region] || ''
-  } catch {
-    return ''
-  }
-}
+// Flag icons and display names come from ./langs (shared with the
+// localization settings tab).
 
 // The picker's options: the primary language first, then the union of the
 // page's translations and the site-wide configured targets, sorted.

frontend/src/langs.js

@@ -0,0 +1,37 @@
+// Language helpers shared by the editors (the PageEditor language picker,
+// the localization settings tab). Flags come from the country-flag-icons
+// set, same as the analytics visitor cells.
+import * as flagSvgs from 'country-flag-icons/string/3x2'
+
+// The Seed-X reference translator's languages (scripts/translator.py) — the
+// translation-target ceiling — each mapped to the country whose flag stands
+// for it (CLDR likely-subtag regions: the country with the most speakers).
+export const TRANSLATABLE = {
+  ar: 'EG', cs: 'CZ', da: 'DK', de: 'DE', el: 'GR', en: 'US', es: 'ES',
+  fa: 'IR', fi: 'FI', fr: 'FR', hu: 'HU', id: 'ID', it: 'IT', ja: 'JP',
+  ko: 'KR', ms: 'MY', nl: 'NL', no: 'NO', pl: 'PL', pt: 'BR', ro: 'RO',
+  ru: 'RU', sv: 'SE', th: 'TH', tr: 'TR', uk: 'UA', vi: 'VN', zh: 'CN',
+}
+
+const displayNames = new Intl.DisplayNames(['en'], { type: 'language' })
+
+// English display name for a language tag ("fi" -> "Finnish").
+export function langName(tag) {
+  try {
+    return displayNames.of(tag) || tag
+  } catch {
+    return tag
+  }
+}
+
+// Flag SVG string for a language tag: the explicit mapping first, then the
+// tag's most likely region (for languages outside the translatable list).
+export function flagFor(tag) {
+  const country = TRANSLATABLE[tag]
+  if (country) return flagSvgs[country] || ''
+  try {
+    return flagSvgs[new Intl.Locale(tag).maximize().region] || ''
+  } catch {
+    return ''
+  }
+}

pagerite/app.py

@@ -292,13 +292,16 @@ _KEY_ALPHABET = "abcdefghijklmnopqrstuvwxyz0123456789"
 
 
 @kanta.bootstrap
-def _translate_key(data: Data) -> None:
-    """Generate the first translator service key on database creation.
+def _translator_defaults(data: Data) -> None:
+    """Translator defaults on database creation: the first service key and
+    the wanted target languages (Spanish and Chinese — English is the
+    original language, never a translation target).
 
     Keys are a dict (key -> display name) with the future reservation that
     multiple keys could be managed (e.g. via a web interface)."""
     key = "".join(secrets.choice(_KEY_ALPHABET) for _ in range(12))
     data.translate_keys[key] = "default"
+    data.translate_langs = {"es": True, "zh": True}
 
 
 @asynccontextmanager
@@ -662,6 +665,7 @@ async def get_settings() -> dict:
         "transition": data.transition,
         "transitions": views._transition_names(),
         "translate_keys": data.translate_keys,
+        "primary_lang": i18n.ORIGINAL_LANGUAGE,
         "translate_langs": sorted(data.translate_langs),
     }
 

pagerite/data.py

@@ -110,7 +110,8 @@ class Data(msgspec.Struct):
     #: Wanted target languages for the translator service (presence-keys,
     #: value always True). The dispatcher offers jobs only in the
     #: intersection of these and a connection's announced capabilities.
-    #: Read/set via /_api/settings (no editing UI yet).
+    #: Bootstrapped to es+zh; edited in the editor shell's localization
+    #: tab (or via /_api/settings).
     translate_langs: dict[str, bool] = {}
     #: All original-language page text, content-addressed:
     #: chunk_key (9 bytes; base64 at the JSON level) -> Markdown chunk.