pgkiln 0.84.0 → 0.86.0

package/src/builder/themeroller.ts

@@ -5,6 +5,7 @@ import { icon } from '../icons.ts';
 import { APPEARANCE_DEFAULT, appStyles, BASE_STYLES, baseStyleOf, FONT_SIZES, FONTS, HEX, ITEM_REF, MAX_STYLES, NAV_APPEARANCES, navAppearance, parseStyle, RADII, STYLE_NAME, type StyleVariant } from '../runtime/styles.ts';
 import { REGION_OPTIONS, BUTTON_OPTIONS } from '../runtime/template-options.ts';
 import { appHeader, back, BASE, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // App → Settings → Theme Roller: style variants (APEX: theme styles). The
 // styles live in meta.app.theme ("styles", "style", "style_choice"), so they
@@ -27,12 +28,12 @@ async function updateTheme(id: string, change: (theme: Theme) => Theme | string)
   });
 }
 
-const label = (list: Record<string, { label: string }>, k: string | undefined) => (k && list[k] ? list[k].label : '- as the base -');
+const label = (list: Record<string, { label: string }>, k: string | undefined) => (k && list[k] ? list[k].label : tx('thr.as_base'));
 /** (sprint 117) a style's navigation appearance as shown in the list */
-const appearanceLabel = (k: string | undefined) => (k === APPEARANCE_DEFAULT ? 'Default' : k && NAV_APPEARANCES[k] ? NAV_APPEARANCES[k].label : '- as the application -');
+const appearanceLabel = (k: string | undefined) => (k === APPEARANCE_DEFAULT ? tx('thr.default') : k && NAV_APPEARANCES[k] ? NAV_APPEARANCES[k].label : tx('thr.as_app'));
 const appearanceChoices = (forStyle: boolean): [string, string][] => [
-  forStyle ? ['', '- as the application -'] : ['', 'Default (the base style\'s header and menu)'],
-  ...(forStyle ? [[APPEARANCE_DEFAULT, 'Default (the base style\'s header and menu)'] as [string, string]] : []),
+  forStyle ? ['', tx('thr.as_the_application')] : ['', tx('thr.default_the_base_style_s')],
+  ...(forStyle ? [[APPEARANCE_DEFAULT, tx('thr.default_base_style')] as [string, string]] : []),
   ...Object.entries(NAV_APPEARANCES).map(([k, v]): [string, string] => [k, v.label]),
 ];
 const APPEARANCE_HELP = 'APEX 26.2: Pillar Light puts the header and menu on the page\'s own light surfaces, Pillar Dark makes them one dark column in the header colour; both have a header pillar strip and show the current page as a filled pill.';
@@ -44,13 +45,13 @@ function styleForm(appId: number, s: Parameters<typeof csrf>[0], st: StyleVarian
     const value = (own ? st?.[name] : undefined) ?? (typeof base[name] === 'string' && HEX.test(base[name] as string) ? (base[name] as string) : fallback);
     return html`<div class="field"><label class="label" for="f_${name}">${title}</label>
       <input id="f_${name}" name="${name}" type="color" value="${value}">
-      <label class="check"><input type="checkbox" name="${name}_own" value="true"${own ? raw(' checked') : ''}> Use this colour (else the base colour)</label>
-      <label class="sub" for="f_${name}_item">…or the value of an item</label>
+      <label class="check"><input type="checkbox" name="${name}_own" value="true"${own ? raw(' checked') : ''}> ${tx('thr.use_this_colour_else_the')}</label>
+      <label class="sub" for="f_${name}_item">${tx('thr.or_the_value_of_an')}</label>
       <input id="f_${name}_item" name="${name}_item" value="${ref}" placeholder="&amp;APP_BRAND_COLOUR." autocomplete="off" spellcheck="false">
-      <small class="help">A dynamic colour: the item's value when it is #rrggbb (else the base colour).</small></div>`;
+      <small class="help">${tx('thr.a_dynamic_colour_the_item')}</small></div>`;
   };
   const baseOf = BASE_STYLES[baseStyleOf(base)];
-  const choices = (list: Record<string, { label: string }>) => [['', '- as the base -'] as [string, string], ...Object.entries(list).map(([k, v]): [string, string] => [k, v.label])];
+  const choices = (list: Record<string, { label: string }>) => [['', tx('thr.as_the_base')] as [string, string], ...Object.entries(list).map(([k, v]): [string, string] => [k, v.label])];
   // the live preview (builder.js): the style form's values as CSS variables on a sample of the application's look
   const lists = JSON.stringify({
     fonts: Object.fromEntries(Object.entries(FONTS).map(([k, v]) => [k, v.css])),
@@ -59,40 +60,40 @@ function styleForm(appId: number, s: Parameters<typeof csrf>[0], st: StyleVarian
   });
   // (sprint 117) the preview has a menu: the current page, its parent and the appearance in use
   const appearance = navAppearance(base as never, st) ?? '';
-  const preview = html`<div class="tr-preview tr-preview-${baseStyleOf(base)}" data-tr-preview="${lists}" data-tr-app-appearance="${navAppearance(base as never, null) ?? ''}" data-appearance="${appearance}" aria-label="Preview of the style">
-    <div class="tr-preview-header">${icon('menu')}<span>Preview</span></div>
+  const preview = html`<div class="tr-preview tr-preview-${baseStyleOf(base)}" data-tr-preview="${lists}" data-tr-app-appearance="${navAppearance(base as never, null) ?? ''}" data-appearance="${appearance}" aria-label="${tx('thr.preview_of_the_style')}">
+    <div class="tr-preview-header">${icon('menu')}<span>${tx('thr.preview')}</span></div>
     <div class="tr-preview-main">
-    <ul class="tr-preview-nav" aria-label="Sample menu">
-      <li><span class="tr-nav-parent">${icon('users')}<span>Employees</span></span>
-        <ul><li><span class="tr-nav-current">Employee list</span></li><li><span>Directory</span></li></ul></li>
-      <li><span>${icon('chart')}<span>Reports</span></span></li>
+    <ul class="tr-preview-nav" aria-label="${tx('thr.sample_menu')}">
+      <li><span class="tr-nav-parent">${icon('users')}<span>${tx('thr.employees')}</span></span>
+        <ul><li><span class="tr-nav-current">${tx('thr.employee_list')}</span></li><li><span>${tx('thr.directory')}</span></li></ul></li>
+      <li><span>${icon('chart')}<span>${tx('thr.reports')}</span></span></li>
     </ul>
     <div class="tr-preview-body">
-      <section class="region region-standard"><header class="region-header"><h2>A region</h2></header>
-        <div class="region-body"><p class="u-mt0">Text with a <a href="#tr-preview-link" id="tr-preview-link">link</a> and a <span class="tc-badge tc-badge-info">badge</span>.</p>
-          <div class="field"><label class="label" for="tr-preview-input">A field</label><input id="tr-preview-input" value="Value" readonly></div>
-          <div class="buttons"><button type="button" class="btn">Cancel</button><button type="button" class="btn btn-hot">Save</button></div></div></section>
+      <section class="region region-standard"><header class="region-header"><h2>${tx('thr.a_region')}</h2></header>
+        <div class="region-body"><p class="u-mt0">${tx.rich('thr.preview_text', { link: html`<a href="#tr-preview-link" id="tr-preview-link">${tx('thr.link')}</a>`, badge: html`<span class="tc-badge tc-badge-info">${tx('thr.badge')}</span>` })}</p>
+          <div class="field"><label class="label" for="tr-preview-input">${tx('thr.a_field')}</label><input id="tr-preview-input" value="${tx('thr.value')}" readonly></div>
+          <div class="buttons"><button type="button" class="btn">${tx('thr.cancel')}</button><button type="button" class="btn btn-hot">${tx('thr.save')}</button></div></div></section>
     </div></div></div>`;
   return html`${preview}<form method="post" action="${BASE}/apps/${appId}/theme/styles" data-tr-form>${csrf(s)}
     ${st ? html`<input type="hidden" name="original" value="${st.name}">` : ''}
     <div class="form-grid">
-      ${input('name', 'Name', st?.name ?? '', { required: true, placeholder: 'e.g. Ocean', help: 'Shown to users who may choose a style. 1–30 letters, digits, spaces, - or _.' })}
-      ${colour('accent', 'Accent colour', baseOf.accent)}
-      ${colour('header', 'Header colour', baseOf.header)}
-      ${colour('accent_dark', 'Accent colour in dark mode', '#a59cff')}
-      ${colour('header_dark', 'Header colour in dark mode', '#0d0c1a')}
-      ${select('appearance', 'Navigation appearance', st?.appearance ?? '', appearanceChoices(true), APPEARANCE_HELP)}
-      ${colour('strip', 'Header strip colour', baseOf.accent)}
-      ${colour('strip_dark', 'Header strip colour in dark mode', '#a59cff')}
-      ${select('font', 'Font', st?.font ?? '', choices(FONTS))}
-      ${select('font_size', 'Font size', st?.font_size ?? '', choices(FONT_SIZES))}
-      ${select('radius', 'Corners', st?.radius ?? '', choices(RADII))}
-      <div class="field" data-wide><label class="label" for="f_condition">Condition (SQL)</label>
+      ${input('name', tx('thr.name'), st?.name ?? '', { required: true, placeholder: tx('thr.e_g_ocean'), help: tx('thr.shown_to_users_who_may') })}
+      ${colour('accent', tx('thr.c_accent'), baseOf.accent)}
+      ${colour('header', tx('thr.c_header'), baseOf.header)}
+      ${colour('accent_dark', tx('thr.c_accent_dark'), '#a59cff')}
+      ${colour('header_dark', tx('thr.c_header_dark'), '#0d0c1a')}
+      ${select('appearance', tx('thr.navigation_appearance'), st?.appearance ?? '', appearanceChoices(true), APPEARANCE_HELP)}
+      ${colour('strip', tx('thr.c_strip'), baseOf.accent)}
+      ${colour('strip_dark', tx('thr.c_strip_dark'), '#a59cff')}
+      ${select('font', tx('thr.font'), st?.font ?? '', choices(FONTS))}
+      ${select('font_size', tx('thr.font_size'), st?.font_size ?? '', choices(FONT_SIZES))}
+      ${select('radius', tx('thr.corners'), st?.radius ?? '', choices(RADII))}
+      <div class="field" data-wide><label class="label" for="f_condition">${tx('thr.condition_sql')}</label>
         <textarea id="f_condition" name="condition" class="code" rows="2" spellcheck="false" data-code="sql" placeholder=":APP_TENANT = 'north'">${st?.condition ?? ''}</textarea>
-        <small class="help">Optional. A boolean expression with bind variables, run as the application's role on every page: users who did not choose a style get the first style whose condition holds, else the default style (APEX: conditional theme styles).</small></div>
+        <small class="help">${tx('thr.optional_a_boolean_expression_with')}</small></div>
     </div>
-    <div class="buttons"><button class="btn btn-hot">${st ? 'Save style' : 'Add style'}</button>
-      ${st ? html`<a class="btn" href="${BASE}/apps/${appId}/theme">Cancel</a>` : ''}</div>
+    <div class="buttons"><button class="btn btn-hot">${st ? tx('thr.save_style') : tx('thr.add_style')}</button>
+      ${st ? html`<a class="btn" href="${BASE}/apps/${appId}/theme">${tx('thr.cancel')}</a>` : ''}</div>
   </form>`;
 }
 
@@ -110,46 +111,42 @@ export async function themeRollerRoutes(app: FastifyInstance) {
       const v = typeof theme[k] === 'string' && HEX.test(theme[k] as string) ? (theme[k] as string) : '';
       return html`<div class="field"><label class="label" for="f_app_${k}">${title}</label>
         <input id="f_app_${k}" name="${k}" type="color" value="${v || fallback}">
-        <label class="check"><input type="checkbox" name="${k}_own" value="true"${v ? raw(' checked') : ''}> Use this colour (else the accent colour)</label></div>`;
+        <label class="check"><input type="checkbox" name="${k}_own" value="true"${v ? raw(' checked') : ''}> ${tx('thr.use_this_colour_else_the_2')}</label></div>`;
     };
     const swatch = (hex: string | undefined) =>
       !hex ? html`<span class="muted">base</span>` : ITEM_REF.test(hex) ? html`<code>${hex}</code>` : html`<input type="color" value="${hex}" disabled aria-label="${hex}" class="swatch"> <code>${hex}</code>`;
     const main = html`${appHeader(a, 'settings', s)}
       <div class="ide-body">
-        ${region('Theme Roller: style variants', html`
-          <p class="muted u-mt0">Several saved styles for this application (APEX: theme styles). The base style
-            (${BASE_STYLES[baseStyleOf(a.theme)].label}) and colours under <a href="${BASE}/apps/${a.id}/settings">Settings → Theme</a>
-            are what users see without a style; each style below changes the colours and may set a font, font size and corners.
-            The colours apply to the light theme, the dark-mode colours to the dark theme (pick light colours there); fonts, sizes and corners to both.</p>
+        ${region(tx('thr.theme_roller_style_variants'), html`
+          <p class="muted u-mt0">${tx.rich('thr.variants_intro', { base: BASE_STYLES[baseStyleOf(a.theme)].label, settings: html`<a href="${BASE}/apps/${a.id}/settings">${tx('thr.settings_theme')}</a>` })}</p>
           ${styles.length
-            ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Name</th><th>Accent</th><th>Header</th><th>Dark accent</th><th>Dark header</th><th>Navigation</th><th>Strip</th><th>Font</th><th>Font size</th><th>Corners</th><th><span class="sr-only">Actions</span></th></tr></thead><tbody>
+            ? html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('thr.name')}</th><th>${tx('thr.accent')}</th><th>${tx('thr.header')}</th><th>${tx('thr.dark_accent')}</th><th>${tx('thr.dark_header')}</th><th>${tx('thr.navigation')}</th><th>${tx('thr.strip')}</th><th>${tx('thr.font')}</th><th>${tx('thr.font_size')}</th><th>${tx('thr.corners')}</th><th><span class="sr-only">${tx('thr.actions')}</span></th></tr></thead><tbody>
                 ${styles.map((x) => html`<tr><td>${x.name}${theme.style === x.name ? html` <span class="badge">default</span>` : ''}${x.condition ? html`<br><small class="muted">when <code>${x.condition.length > 60 ? `${x.condition.slice(0, 60)}…` : x.condition}</code></small>` : ''}</td>
                   <td>${swatch(x.accent)}</td><td>${swatch(x.header)}</td><td>${swatch(x.accent_dark)}</td><td>${swatch(x.header_dark)}</td><td>${appearanceLabel(x.appearance)}</td><td>${swatch(x.strip)}</td><td>${label(FONTS, x.font)}</td><td>${label(FONT_SIZES, x.font_size)}</td><td>${label(RADII, x.radius)}</td>
-                  <td><a class="btn btn-sm" href="${BASE}/apps/${a.id}/theme?edit=${encodeURIComponent(x.name)}">${icon('edit')} Edit</a>
+                  <td><a class="btn btn-sm" href="${BASE}/apps/${a.id}/theme?edit=${encodeURIComponent(x.name)}">${icon('edit')} ${tx('thr.edit')}</a>
                     <form method="post" action="${BASE}/apps/${a.id}/theme/styles/delete" class="u-inline">${csrf(s)}<input type="hidden" name="name" value="${x.name}">
-                      <button class="btn btn-sm btn-danger" data-confirm="Delete style ${x.name}?">Delete</button></form></td></tr>`)}
+                      <button class="btn btn-sm btn-danger" data-confirm="${tx('thr.delete_confirm', { name: x.name })}">${tx('thr.delete')}</button></form></td></tr>`)}
               </tbody></table></div>`
-            : html`<p class="muted">No styles yet: the application uses its base colours.</p>`}
+            : html`<p class="muted">${tx('thr.no_styles_yet_the_application')}</p>`}
           <form method="post" action="${BASE}/apps/${a.id}/theme/settings" class="u-mt1">${csrf(s)}
             <div class="form-grid">
-              ${select('style', 'Default style', typeof theme.style === 'string' ? theme.style : '', [['', 'None (the base style and colours)'], ...styles.map((x): [string, string] => [x.name, x.name])], 'What everyone sees unless they chose another style.')}
-              ${select('appearance', 'Navigation appearance', navAppearance(theme as never, null) ?? '', appearanceChoices(false), `${APPEARANCE_HELP} A style may choose its own.`)}
-              ${appColour('strip', 'Header strip colour', BASE_STYLES[baseStyleOf(a.theme)].accent)}
-              ${appColour('strip_dark', 'Header strip colour in dark mode', '#a59cff')}
+              ${select('style', tx('thr.default_style'), typeof theme.style === 'string' ? theme.style : '', [['', tx('thr.none_the_base_style_and')], ...styles.map((x): [string, string] => [x.name, x.name])], tx('thr.what_everyone_sees_unless_they'))}
+              ${select('appearance', tx('thr.navigation_appearance'), navAppearance(theme as never, null) ?? '', appearanceChoices(false), `${APPEARANCE_HELP} A style may choose its own.`)}
+              ${appColour('strip', tx('thr.c_strip'), BASE_STYLES[baseStyleOf(a.theme)].accent)}
+              ${appColour('strip_dark', tx('thr.c_strip_dark'), '#a59cff')}
             </div>
-            <div class="field"><label class="check"><input type="checkbox" name="style_choice" value="true"${theme.style_choice === true ? raw(' checked') : ''}> Users may choose a style</label>
-              <small class="help">Adds the styles to the user menu and My account (APEX: "Enable End Users to Choose Theme Style"). A user's choice is kept per application on the account; only this application's styles can be chosen.</small></div>
-            <div class="buttons"><button class="btn btn-hot">Save</button></div>
+            <div class="field"><label class="check"><input type="checkbox" name="style_choice" value="true"${theme.style_choice === true ? raw(' checked') : ''}> ${tx('thr.users_may_choose_a_style')}</label>
+              <small class="help">${tx('thr.adds_the_styles_to_the')}</small></div>
+            <div class="buttons"><button class="btn btn-hot">${tx('thr.save')}</button></div>
           </form>`)}
-        ${region(editing ? `Edit style ${editing.name}` : 'Add a style', styles.length >= MAX_STYLES && !editing
-          ? html`<p class="muted">At most ${MAX_STYLES} styles per application.</p>`
+        ${region(editing ? tx('thr.edit_style', { name: editing.name }) : tx('thr.add_a_style'), styles.length >= MAX_STYLES && !editing
+          ? html`<p class="muted">${tx('thr.max_styles', { n: MAX_STYLES })}</p>`
           : styleForm(a.id, s, editing, theme))}
-        ${region('Template options', html`<p class="muted u-mt0">Regions and buttons have <em>Template options</em> in the Page Designer
-            (group Appearance): CSS classes from a fixed list, which these styles also affect.</p>
-          <ul class="u-mt0"><li>Regions: ${REGION_OPTIONS.map((o, i) => html`${i ? ', ' : ''}<code>${o.cls}</code>`)}</li>
-            <li>Buttons: ${BUTTON_OPTIONS.map((o, i) => html`${i ? ', ' : ''}<code>${o.cls}</code>`)}</li></ul>`)}
+        ${region(tx('thr.template_options'), html`<p class="muted u-mt0">${tx.rich('thr.options_intro', { options: html`<em>${tx('thr.template_options')}</em>` })}</p>
+          <ul class="u-mt0"><li>${tx.rich('thr.regions_list', { list: html`${REGION_OPTIONS.map((o, i) => html`${i ? ', ' : ''}<code>${o.cls}</code>`)}` })}</li>
+            <li>${tx.rich('thr.buttons_list', { list: html`${BUTTON_OPTIONS.map((o, i) => html`${i ? ', ' : ''}<code>${o.cls}</code>`)}` })}</li></ul>`)}
       </div>`;
-    return send(reply, s, shell(s, `${a.name} Theme Roller`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Settings', `${BASE}/apps/${a.id}/settings`], ['Theme Roller']], main));
+    return send(reply, s, shell(s, tx('thr.title', { app: a.name }), [[tx('thr.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('thr.settings'), `${BASE}/apps/${a.id}/settings`], [tx('thr.theme_roller')]], main));
   });
 
   // add or change a style
@@ -180,9 +177,9 @@ export async function themeRollerRoutes(app: FastifyInstance) {
     const problem = await updateTheme(id, (t) => {
       const styles = appStyles(t as never);
       const at = original ? styles.findIndex((x) => x.name === original) : -1;
-      if (original && at < 0) return `Style ${original} no longer exists.`;
-      if (styles.some((x, i) => i !== at && x.name.toLowerCase() === parsed.name.toLowerCase())) return `There is already a style named ${parsed.name}.`;
-      if (at < 0 && styles.length >= MAX_STYLES) return `At most ${MAX_STYLES} styles per application.`;
+      if (original && at < 0) return tx('thr.gone', { name: original });
+      if (styles.some((x, i) => i !== at && x.name.toLowerCase() === parsed.name.toLowerCase())) return tx('thr.exists', { name: parsed.name });
+      if (at < 0 && styles.length >= MAX_STYLES) return tx('thr.max_styles', { n: MAX_STYLES });
       if (at >= 0) styles[at] = parsed;
       else styles.push(parsed);
       const next: Theme = { ...t, styles };
@@ -196,7 +193,7 @@ export async function themeRollerRoutes(app: FastifyInstance) {
     // users who chose the renamed style keep it
     if (original && original !== parsed.name)
       await owner.query('update meta.account_style set style = $3 where app_id = $1 and style = $2', [id, original, parsed.name]);
-    flash(s, `Style ${parsed.name} saved.`);
+    flash(s, tx('thr.saved', { name: parsed.name }));
     return back(reply, s, target);
   });
 
@@ -214,7 +211,7 @@ export async function themeRollerRoutes(app: FastifyInstance) {
       return next;
     });
     if (!problem) await owner.query('delete from meta.account_style where app_id = $1 and style = $2', [id, name]);
-    flash(s, problem ?? `Style ${name} deleted.`, problem ? 'error' : 'ok');
+    flash(s, problem ?? tx('thr.deleted', { name }), problem ? 'error' : 'ok');
     return back(reply, s, `${BASE}/apps/${id}/theme`);
   });
 
@@ -242,7 +239,7 @@ export async function themeRollerRoutes(app: FastifyInstance) {
       else return 'Choose one of the styles.';
       return next;
     });
-    flash(s, problem ?? 'Theme Roller settings saved.', problem ? 'error' : 'ok');
+    flash(s, problem ?? tx('thr.theme_roller_settings_saved'), problem ? 'error' : 'ok');
     return back(reply, s, `${BASE}/apps/${id}/theme`);
   });
 }

package/src/builder/ui-defaults.ts

@@ -2,6 +2,7 @@ import type { FastifyInstance } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw } from '../html.ts';
 import { icon } from '../icons.ts';
+import { scopedTx as tx } from './i18n.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, type Body, type Req } from './ui.ts';
 import { usableSchemas, workshopDb } from './workspaces.ts';
 
@@ -72,33 +73,33 @@ export async function uiDefaultRoutes(app: FastifyInstance) {
     const t = schema ? await findTable(s, schema, q.table) : null;
     const counts = (await owner.query<{ schema_name: string; n: number }>('select schema_name, count(*)::int as n from meta.ui_default group by 1')).rows;
     const pick = html`<form method="get" class="util-filters">
-        <div class="field"><label class="label" for="f_schema">Schema</label><select id="f_schema" name="schema"><option value="">Choose a schema</option>
+        <div class="field"><label class="label" for="f_schema">${tx('uid.schema')}</label><select id="f_schema" name="schema"><option value="">${tx('uid.choose_schema')}</option>
           ${schemas.map((n) => html`<option value="${n}"${n === schema ? raw(' selected') : ''}>${n}${counts.find((c) => c.schema_name === n) ? ` (${counts.find((c) => c.schema_name === n)!.n})` : ''}</option>`)}</select></div>
-        ${schema ? html`<div class="field"><label class="label" for="f_table">Table or view</label><select id="f_table" name="table"><option value="">Choose a table</option>
+        ${schema ? html`<div class="field"><label class="label" for="f_table">${tx('uid.table_or_view')}</label><select id="f_table" name="table"><option value="">${tx('uid.choose_table')}</option>
           ${tables.map((x) => html`<option value="${x.name}"${x.name === t?.table ? raw(' selected') : ''}>${x.name}${x.n ? ` (${x.n})` : ''}</option>`)}</select></div>` : ''}
-        <div class="buttons"><button class="btn btn-sm">${icon('table')} Show</button></div></form>`;
+        <div class="buttons"><button class="btn btn-sm">${icon('table')} ${tx('common.show')}</button></div></form>`;
     let body = html`${pick}`;
     if (t) {
       const cols = await columnsOf(t.oid, t.schema, t.table);
       body = html`${pick}
         <form method="post" action="${BASE}/ui-defaults">${csrf(s)}<input type="hidden" name="schema" value="${t.schema}"><input type="hidden" name="table" value="${t.table}">
-          <div class="table-wrap"><table class="table ui-defaults report-reflow"><thead><tr><th scope="col">Column</th><th scope="col">Label</th><th scope="col">Format mask</th><th scope="col">Alignment</th><th scope="col">Help</th><th scope="col">List of values</th></tr></thead><tbody>
+          <div class="table-wrap"><table class="table ui-defaults report-reflow"><thead><tr><th scope="col">${tx('uid.col_column')}</th><th scope="col">${tx('uid.col_label')}</th><th scope="col">${tx('uid.col_mask')}</th><th scope="col">${tx('uid.col_alignment')}</th><th scope="col">${tx('uid.col_help')}</th><th scope="col">${tx('uid.col_lov')}</th></tr></thead><tbody>
           ${cols.map((c, i) => html`<tr>
-            <td data-label="Column"><code>${c.name}</code><br><span class="muted small">${c.type}</span><input type="hidden" name="c.${i}.name" value="${c.name}"></td>
-            <td data-label="Label"><input id="f_l${i}" aria-label="Label of ${c.name}" name="c.${i}.label" value="${c.d?.label ?? ''}" maxlength="200" placeholder="${c.wizard}"></td>
-            <td data-label="Format mask"><input id="f_m${i}" aria-label="Format mask of ${c.name}" name="c.${i}.format_mask" value="${c.d?.format_mask ?? ''}" maxlength="60" placeholder="${/numeric|integer|bigint|smallint|real|double/.test(c.type) ? '999G990D00' : /date|time/.test(c.type) ? 'DD.MM.YYYY' : ''}"></td>
-            <td data-label="Alignment"><select id="f_a${i}" aria-label="Alignment of ${c.name}" name="c.${i}.alignment">${ALIGNMENTS.map((x) => html`<option value="${x}"${(c.d?.alignment ?? '') === x ? raw(' selected') : ''}>${x || '–'}</option>`)}</select></td>
-            <td data-label="Help"><textarea id="f_h${i}" aria-label="Help of ${c.name}" name="c.${i}.help" rows="1" maxlength="4000">${c.d?.help ?? ''}</textarea></td>
-            <td data-label="List of values"><input id="f_v${i}" aria-label="List of values of ${c.name}" name="c.${i}.lov" value="${c.d?.lov ?? ''}" maxlength="4000" placeholder="LOV:NAME"></td>
+            <td data-label="${tx('uid.col_column')}"><code>${c.name}</code><br><span class="muted small">${c.type}</span><input type="hidden" name="c.${i}.name" value="${c.name}"></td>
+            <td data-label="${tx('uid.col_label')}"><input id="f_l${i}" aria-label="${tx('uid.label_of', { column: c.name })}" name="c.${i}.label" value="${c.d?.label ?? ''}" maxlength="200" placeholder="${c.wizard}"></td>
+            <td data-label="${tx('uid.col_mask')}"><input id="f_m${i}" aria-label="${tx('uid.mask_of', { column: c.name })}" name="c.${i}.format_mask" value="${c.d?.format_mask ?? ''}" maxlength="60" placeholder="${/numeric|integer|bigint|smallint|real|double/.test(c.type) ? '999G990D00' : /date|time/.test(c.type) ? 'DD.MM.YYYY' : ''}"></td>
+            <td data-label="${tx('uid.col_alignment')}"><select id="f_a${i}" aria-label="${tx('uid.alignment_of', { column: c.name })}" name="c.${i}.alignment">${ALIGNMENTS.map((x) => html`<option value="${x}"${(c.d?.alignment ?? '') === x ? raw(' selected') : ''}>${x || '–'}</option>`)}</select></td>
+            <td data-label="${tx('uid.col_help')}"><textarea id="f_h${i}" aria-label="${tx('uid.help_of', { column: c.name })}" name="c.${i}.help" rows="1" maxlength="4000">${c.d?.help ?? ''}</textarea></td>
+            <td data-label="${tx('uid.col_lov')}"><input id="f_v${i}" aria-label="${tx('uid.lov_of', { column: c.name })}" name="c.${i}.lov" value="${c.d?.lov ?? ''}" maxlength="4000" placeholder="LOV:NAME"></td>
           </tr>`)}</tbody></table></div>
-          <div class="buttons"><button class="btn btn-hot" name="mode" value="save">${icon('save')} Save</button>
-            <button class="btn" name="mode" value="seed">${icon('edit')} Seed from comments</button></div>
-          <p class="muted small">An empty row has no UI default. The placeholder of a label shows what the wizards use without one. Lists of values: <code>LOV:NAME</code> (a shared list of values of the application), <code>STATIC:Yes;Y,No;N</code> or a query (<code>select name d, id r from sales.status</code>).</p>
+          <div class="buttons"><button class="btn btn-hot" name="mode" value="save">${icon('save')} ${tx('common.save')}</button>
+            <button class="btn" name="mode" value="seed">${icon('edit')} ${tx('uid.seed')}</button></div>
+          <p class="muted small">${tx.code('uid.help')}</p>
         </form>`;
     }
-    const main = html`<h1 class="u-mb1">UI defaults</h1>
-      ${region('UI defaults per column', html`<p class="muted u-mt0">Label, format mask, help text, alignment and list of values per table column (APEX: Attribute Dictionary). The page wizards and the Create Application wizard use the label for every generated report heading and form item, and a generated form item also gets the format mask, help and list of values. They apply to pages generated after the change, in every application.</p>${body}`)}`;
-    return send(reply, s, shell(s, 'UI defaults', [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], ['UI defaults']], main));
+    const main = html`<h1 class="u-mb1">${tx('util.c_ui_defaults')}</h1>
+      ${region(tx('uid.per_column'), html`<p class="muted u-mt0">${tx('uid.intro')}</p>${body}`)}`;
+    return send(reply, s, shell(s, tx('util.c_ui_defaults'), [[tx('rail.app_builder'), BASE], [tx('admin.utilities'), `${BASE}/utilities`], [tx('util.c_ui_defaults')]], main));
   });
 
   app.post(`${BASE}/ui-defaults`, async (req: Req, reply) => {
@@ -123,7 +124,7 @@ export async function uiDefaultRoutes(app: FastifyInstance) {
             [t.schema, t.table, c.name, short ? text : null, short ? null : text.slice(0, 4000), s.username]);
           n++;
         }
-        flash(s, n ? `UI defaults of ${n} column${n === 1 ? '' : 's'} made from their comments.` : 'No column without a UI default has a comment.');
+        flash(s, n ? tx(n === 1 ? 'uid.seeded_one' : 'uid.seeded', { n }) : tx('uid.no_comments'));
         return back(reply, s, to);
       }
       const rows: { name: string; label: string | null; mask: string | null; help: string | null; align: string | null; lov: string | null }[] = [];
@@ -131,9 +132,9 @@ export async function uiDefaultRoutes(app: FastifyInstance) {
         const name = b[`c.${i}.name`];
         if (typeof name !== 'string' || !known.has(name)) continue;
         const mask = trim(b[`c.${i}.format_mask`], 60);
-        if (mask && !MASK.test(mask)) throw new Error(`Format mask of ${name}: letters, digits and . , : / - only (e.g. 999G990D00 or DD.MM.YYYY).`);
+        if (mask && !MASK.test(mask)) throw new Error(tx('uid.bad_mask', { column: name }));
         const align = trim(b[`c.${i}.alignment`], 10);
-        if (align && !(ALIGNMENTS as readonly string[]).includes(align)) throw new Error(`Alignment of ${name}: start, center or end.`);
+        if (align && !(ALIGNMENTS as readonly string[]).includes(align)) throw new Error(tx('uid.bad_alignment', { column: name }));
         rows.push({ name, label: trim(b[`c.${i}.label`], 200), mask, help: trim(b[`c.${i}.help`], 4000), align, lov: trim(b[`c.${i}.lov`], 4000) });
       }
       await owner.tx(async (c) => {
@@ -152,7 +153,7 @@ export async function uiDefaultRoutes(app: FastifyInstance) {
             [t.schema, t.table, r.name, r.label, r.mask, r.help, r.align, r.lov, s.username]);
         }
       });
-      flash(s, `UI defaults of ${t.schema}.${t.table} saved.`);
+      flash(s, tx('uid.saved', { table: `${t.schema}.${t.table}` }));
     } catch (e) {
       flash(s, (e as Error).message, 'error');
     }

package/src/builder/ui.ts

@@ -10,7 +10,7 @@ import { getSession, saveState, takeFlash, type Session } from '../session.ts';
 import { SQL_TOOLS, TOOL_GROUPS, toolLabel } from './sql-tools.ts';
 import { ensureDevbar } from '../runtime/devbar.ts';
 import { noteChange } from './app-updates.ts';
-import { clientTexts, tr } from './i18n.ts';
+import { clientTexts, setRequestTranslator, tr } from './i18n.ts';
 import { languageMenu, loadLanguage } from './language.ts';
 import { enrolmentDue, requirement } from '../mfa.ts';
 
@@ -322,6 +322,7 @@ export async function developer(req: Req, reply: FastifyReply) {
   }
   // (sprint 121) a session from before the developer's language was kept in it: the stored choice (language.ts)
   if (s.state.__BLANG === undefined) await loadLanguage(s);
+  setRequestTranslator(tr(s)); // (sprint 164) scopedTx in this request's handler and helpers
   // (sprint 126, SEC-2) the two-factor policy: a banner during the grace period, then only the Security page until they enrol
   delete s.state.__MFA_DUE;
   const admin = await isAdmin(s.username);

package/src/builder/upgrade.ts

@@ -5,6 +5,7 @@ import { recordHistory } from '../history.ts';
 import { html, raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { appHeader, back, BASE, csrf, designerUrl, developer, flash, region, send, shell, type Req } from './ui.ts';
+import { scopedTx as tx, type BuilderKey } from './i18n.ts';
 import { diffHtml } from './utilities.ts';
 
 // (sprint 138, AP-5) App Builder → Utilities → Upgrade application (APEX:
@@ -39,10 +40,10 @@ export interface Candidate {
 }
 
 export type Rule = 'nav_appearance' | 'date_picker' | 'popup_lov';
-export const RULES: Record<Rule, { title: string; since: string }> = {
-  nav_appearance: { title: 'Navigation appearance', since: 'Navigation appearances (Pillar Light, Pillar Dark) came with sprint 117.' },
-  date_picker: { title: 'Date picker for date columns', since: 'Date and date-time items have had pgkiln\'s date picker since sprint 84.' },
-  popup_lov: { title: 'Paged list of values for large tables', since: 'Popup lists of values search and page on the server.' },
+export const RULES: Record<Rule, { title: BuilderKey; since: BuilderKey }> = {
+  nav_appearance: { title: 'upg.rule_nav_title', since: 'upg.rule_nav_since' },
+  date_picker: { title: 'upg.rule_date_title', since: 'upg.rule_date_since' },
+  popup_lov: { title: 'upg.rule_popup_title', since: 'upg.rule_popup_since' },
 };
 
 /** The relations a list of values query reads (FROM / JOIN names). */
@@ -57,8 +58,8 @@ export async function upgradeCandidates(appId: number): Promise<Candidate[]> {
   const theme = app.theme && typeof app.theme === 'object' ? app.theme : {};
   if (typeof theme.appearance !== 'string' || !theme.appearance) {
     out.push({
-      key: 'nav_appearance:app', rule: 'nav_appearance', label: 'Application settings › Theme', page: null, url: `${BASE}/apps/${appId}/theme`,
-      reason: 'The application has no navigation appearance: Pillar Light gives the header strip and the filled current page of new applications.',
+      key: 'nav_appearance:app', rule: 'nav_appearance', label: tx('upg.label_theme'), page: null, url: `${BASE}/apps/${appId}/theme`,
+      reason: tx('upg.reason_nav'),
       before: { appearance: theme.appearance ?? null }, after: { appearance: 'pillar_light' },
       sql: [`update meta.app set theme = coalesce(theme, '{}'::jsonb) || '{"appearance": "pillar_light"}' where id = $1 and coalesce(theme ->> 'appearance', '') = ''`, [appId]],
     });
@@ -74,8 +75,8 @@ export async function upgradeCandidates(appId: number): Promise<Candidate[]> {
   for (const r of dates) {
     const to = r.is_date ? 'date' : 'datetime';
     out.push({
-      key: `date_picker:${r.id}`, rule: 'date_picker', label: `Page ${r.page_no} › item ${r.name}`, page: r.page_no, url: designerUrl(appId, r.page_no, `c=item-${r.id}`),
-      reason: `${r.table_name}.${r.source_column} is a ${r.coltype} column shown as a text field: a ${to} item has the date picker and reads the date in the application's format.`,
+      key: `date_picker:${r.id}`, rule: 'date_picker', label: tx('upg.label_item', { page: r.page_no, name: r.name }), page: r.page_no, url: designerUrl(appId, r.page_no, `c=item-${r.id}`),
+      reason: tx(r.is_date ? 'upg.reason_date' : 'upg.reason_datetime', { column: `${r.table_name}.${r.source_column}`, type: r.coltype }),
       before: { type: 'text' }, after: { type: to },
       sql: [`update meta.item set type = $2 where id = $1 and type = 'text'`, [r.id, to]],
     });
@@ -92,8 +93,8 @@ export async function upgradeCandidates(appId: number): Promise<Candidate[]> {
       [names, POPUP_ROWS]).catch(() => ({ rows: [] }))).rows[0];
     if (!big) continue;
     out.push({
-      key: `popup_lov:${r.id}`, rule: 'popup_lov', label: `Page ${r.page_no} › item ${r.name}`, page: r.page_no, url: designerUrl(appId, r.page_no, `c=item-${r.id}`),
-      reason: `Its list of values reads ${big.name} (about ${big.n} rows): a select list sends every row with the page; a popup list of values searches and pages on the server.`,
+      key: `popup_lov:${r.id}`, rule: 'popup_lov', label: tx('upg.label_item', { page: r.page_no, name: r.name }), page: r.page_no, url: designerUrl(appId, r.page_no, `c=item-${r.id}`),
+      reason: tx('upg.reason_popup', { table: big.name, n: big.n }),
       before: { type: 'select' }, after: { type: 'popup_lov' },
       sql: [`update meta.item set type = 'popup_lov' where id = $1 and type = 'select'`, [r.id]],
     });
@@ -114,20 +115,20 @@ export async function upgradeRoutes(app: FastifyInstance) {
     const u = `${BASE}/apps/${a.id}/utilities/upgrade`;
     const sections = (Object.keys(RULES) as Rule[]).map((rule) => {
       const list = all.filter((c) => c.rule === rule);
-      return html`<section class="util-upgrade" aria-labelledby="up-${rule}"><h3 id="up-${rule}">${RULES[rule].title} <span class="tag">${list.length}</span></h3>
-        <p class="muted small">${RULES[rule].since}</p>
-        ${list.length ? html`<div class="table-wrap"><table class="table report-reflow"><thead><tr><th scope="col">Component</th><th scope="col">Why</th><th scope="col">Actions</th></tr></thead><tbody>
-          ${list.map((c) => html`<tr${preview?.key === c.key ? raw(' aria-current="true"') : ''}><td data-label="Component"><a href="${c.url}">${c.label}</a></td><td data-label="Why">${c.reason}</td>
-            <td data-label="Actions"><div class="buttons"><a class="btn btn-sm" href="${u}?preview=${encodeURIComponent(c.key)}#preview">Preview</a>
-              <form method="post" action="${u}">${csrf(s)}<input type="hidden" name="key" value="${c.key}"><button class="btn btn-sm btn-hot">${icon('refresh')} Upgrade</button></form></div></td></tr>`)}</tbody></table></div>
-          ${list.length > 1 ? html`<form method="post" action="${u}" class="u-mt075">${csrf(s)}<input type="hidden" name="rule" value="${rule}"><button class="btn btn-sm">${icon('refresh')} Upgrade all ${list.length}</button></form>` : ''}`
-          : html`<p class="muted">Nothing to upgrade.</p>`}</section>`;
+      return html`<section class="util-upgrade" aria-labelledby="up-${rule}"><h3 id="up-${rule}">${tx(RULES[rule].title)} <span class="tag">${list.length}</span></h3>
+        <p class="muted small">${tx(RULES[rule].since)}</p>
+        ${list.length ? html`<div class="table-wrap"><table class="table report-reflow"><thead><tr><th scope="col">${tx('upg.col_component')}</th><th scope="col">${tx('upg.col_why')}</th><th scope="col">${tx('upg.col_actions')}</th></tr></thead><tbody>
+          ${list.map((c) => html`<tr${preview?.key === c.key ? raw(' aria-current="true"') : ''}><td data-label="${tx('upg.col_component')}"><a href="${c.url}">${c.label}</a></td><td data-label="${tx('upg.col_why')}">${c.reason}</td>
+            <td data-label="${tx('upg.col_actions')}"><div class="buttons"><a class="btn btn-sm" href="${u}?preview=${encodeURIComponent(c.key)}#preview">${tx('upg.preview')}</a>
+              <form method="post" action="${u}">${csrf(s)}<input type="hidden" name="key" value="${c.key}"><button class="btn btn-sm btn-hot">${icon('refresh')} ${tx('upg.upgrade')}</button></form></div></td></tr>`)}</tbody></table></div>
+          ${list.length > 1 ? html`<form method="post" action="${u}" class="u-mt075">${csrf(s)}<input type="hidden" name="rule" value="${rule}"><button class="btn btn-sm">${icon('refresh')} ${tx('upg.upgrade_all', { n: list.length })}</button></form>` : ''}`
+          : html`<p class="muted">${tx('upg.nothing')}</p>`}</section>`;
     });
     const main = html`${appHeader(a, 'utilities', s)}
-      ${region('Upgrade application', html`<p class="muted u-mt0">Components made before a pgkiln version that brought a better default. Preview a change, then upgrade one component or all of a kind; every upgrade is in the change history (and the backups) if you want to go back.</p>${sections}`)}
-      ${preview ? region(`Preview: ${preview.label}`, html`<p class="muted u-mt0">${preview.reason}</p>${diffHtml('settings', stableJson(preview.before), stableJson(preview.after), ['now', 'upgraded'])}
-        <form method="post" action="${u}">${csrf(s)}<input type="hidden" name="key" value="${preview.key}"><div class="buttons"><button class="btn btn-hot">${icon('refresh')} Upgrade</button></div></form>`, '', 'preview') : ''}`;
-    return send(reply, s, shell(s, `Upgrade application · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Utilities', `${BASE}/apps/${a.id}/utilities`], ['Upgrade application']], main));
+      ${region(tx('util.c_upgrade'), html`<p class="muted u-mt0">${tx('upg.intro')}</p>${sections}`)}
+      ${preview ? region(tx('upg.preview_title', { label: preview.label }), html`<p class="muted u-mt0">${preview.reason}</p>${diffHtml('settings', stableJson(preview.before), stableJson(preview.after), ['now', 'upgraded'])}
+        <form method="post" action="${u}">${csrf(s)}<input type="hidden" name="key" value="${preview.key}"><div class="buttons"><button class="btn btn-hot">${icon('refresh')} ${tx('upg.upgrade')}</button></div></form>`, '', 'preview') : ''}`;
+    return send(reply, s, shell(s, tx('upg.title', { name: a.name }), [[tx('rail.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('app.tab.utilities'), `${BASE}/apps/${a.id}/utilities`], [tx('util.c_upgrade')]], main));
   });
 
   app.post(`${BASE}/apps/:id/utilities/upgrade`, async (req: Req, reply) => {
@@ -141,14 +142,14 @@ export async function upgradeRoutes(app: FastifyInstance) {
     const chosen = key ? all.filter((c) => c.key === key) : all.filter((c) => c.rule === rule);
     const to = `${BASE}/apps/${a.id}/utilities/upgrade`;
     if (!chosen.length) {
-      flash(s, 'Nothing to upgrade: the component was changed or upgraded in the meantime.', 'error');
+      flash(s, tx('upg.gone'), 'error');
       return back(reply, s, to);
     }
     await owner.tx(async (c) => {
       for (const x of chosen) await c.query(x.sql[0], x.sql[1]);
     });
     await recordHistory(a.id, s.username, 'upgrade').catch((err) => req.log.warn({ err }, 'change history not recorded'));
-    flash(s, chosen.length === 1 ? `${chosen[0].label} upgraded.` : `${chosen.length} components upgraded.`);
+    flash(s, chosen.length === 1 ? tx('upg.done_one', { label: chosen[0].label }) : tx('upg.done_n', { n: chosen.length }));
     return back(reply, s, to);
   });
 }