pgkiln 0.83.0 → 0.85.0

package/src/builder/feedback.ts

@@ -6,6 +6,7 @@ import { appOr404 } from './forms.ts';
 import { issuesFrom } from '../team.ts';
 import { toIssueButton } from './team.ts';
 import { appHeader, back, BASE, csrf, developer, flash, region, select, send, shell, type Req } from './ui.ts';
+import { scopedTx as tx, type BuilderKey } from './i18n.ts';
 
 // Application → Feedback (APEX: Team Development → Feedback, migration 084):
 // switch the application's Feedback link on or off, read what users sent
@@ -13,8 +14,10 @@ import { appHeader, back, BASE, csrf, developer, flash, region, select, send, sh
 // and a response the user sees on the feedback page. Answers are data, not
 // a change of the application: allowed while it is locked or Run only.
 
-const STATUSES: [string, string][] = [['open', 'Open'], ['in_progress', 'In progress'], ['done', 'Done'], ['declined', 'Declined']];
-const KINDS: [string, string][] = [['comment', 'Comment'], ['idea', 'Idea'], ['problem', 'Problem']];
+const STATUSES: [string, BuilderKey][] = [['open', 'fbk.status.open'], ['in_progress', 'fbk.status.in_progress'], ['done', 'fbk.status.done'], ['declined', 'fbk.status.declined']];
+const KINDS: [string, BuilderKey][] = [['comment', 'fbk.kind.comment'], ['idea', 'fbk.kind.idea'], ['problem', 'fbk.kind.problem']];
+/** Options with their labels in the developer's language. */
+const options = (list: [string, BuilderKey][]): [string, string][] => list.map(([v, k]) => [v, tx(k)]);
 const when = (d: string | Date) => new Date(d).toISOString().slice(0, 16).replace('T', ' ');
 
 export async function feedbackRoutes(app: FastifyInstance) {
@@ -33,39 +36,39 @@ export async function feedbackRoutes(app: FastifyInstance) {
     // (sprint 113) feedback turned into a Team Development issue links to it
     const issues = await issuesFrom('feedback', rows.map((f) => Number(f.id)));
     const body = html`
-      ${region('Feedback', html`
+      ${region(tx('fbk.title'), html`
         <form method="post" action="${BASE}/apps/${a.id}/feedback/settings" class="u-mb1">${csrf(s)}
-          <label class="check"><input type="checkbox" name="feedback" value="true"${a.feedback ? raw(' checked') : ''}> Users can send feedback</label>
-          <small class="help">A <b>Feedback</b> link in the application's navigation bar opens a page for a comment, an idea or a problem about the page the user came from, with their earlier feedback and your answers.</small>
-          <div class="buttons"><button class="btn btn-sm">Save</button></div></form>
-        <p class="muted">${count('open')} open, ${count('in_progress')} in progress, ${count('done')} done, ${count('declined')} declined.</p>
+          <label class="check"><input type="checkbox" name="feedback" value="true"${a.feedback ? raw(' checked') : ''}> ${tx('fbk.enable')}</label>
+          <small class="help">${tx.rich('fbk.enable_help', { link: html`<b>${tx('fbk.title')}</b>` })}</small>
+          <div class="buttons"><button class="btn btn-sm">${tx('common.save')}</button></div></form>
+        <p class="muted">${tx('fbk.counts', { open: count('open'), in_progress: count('in_progress'), done: count('done'), declined: count('declined') })}</p>
         <form method="get" class="filter-row">
-          ${select('status', 'Status', status, [['', 'All'], ...STATUSES])}
-          ${select('kind', 'Kind', kind, [['', 'All'], ...KINDS])}
-          <button class="btn btn-sm">${icon('filter')} Show</button></form>
+          ${select('status', tx('fbk.status'), status, [['', tx('fbk.all')], ...options(STATUSES)])}
+          ${select('kind', tx('fbk.kind'), kind, [['', tx('fbk.all')], ...options(KINDS)])}
+          <button class="btn btn-sm">${icon('filter')} ${tx('common.show')}</button></form>
         ${rows.length ? html`<ul class="feedback-admin">${rows.map((f) => html`<li class="feedback-item" id="feedback-${f.id}">
-          <div class="feedback-meta"><span class="tag">${KINDS.find(([v]) => v === f.kind)?.[1]}</span>
-            <b>${f.username}</b> <span class="muted">${when(f.created_at)}${f.page_no ? html` · <a href="/a/${a.alias}/${f.page_no}" target="_blank" rel="noopener">page ${f.page_no}</a>` : ''}${f.rating ? ` · ${'★'.repeat(f.rating)}` : ''}${f.user_agent ? ` · ${f.user_agent}` : ''}</span></div>
+          <div class="feedback-meta"><span class="tag">${options(KINDS).find(([v]) => v === f.kind)?.[1]}</span>
+            <b>${f.username}</b> <span class="muted">${when(f.created_at)}${f.page_no ? html` · <a href="/a/${a.alias}/${f.page_no}" target="_blank" rel="noopener">${tx('fbk.page', { n: f.page_no })}</a>` : ''}${f.rating ? ` · ${'★'.repeat(f.rating)}` : ''}${f.user_agent ? ` · ${f.user_agent}` : ''}</span></div>
           <p class="feedback-body">${f.body}</p>
           <p class="feedback-issue">${toIssueButton(s, 'feedback', Number(f.id), issues.get(Number(f.id)))}</p>
           <form method="post" action="${BASE}/apps/${a.id}/feedback/${f.id}">${csrf(s)}
             <div class="form-grid">
-              ${select('status', 'Status', f.status, STATUSES)}
-              <div class="field" data-wide><label class="label" for="f_response_${f.id}">Answer (the user sees it)</label>
+              ${select('status', tx('fbk.status'), f.status, options(STATUSES))}
+              <div class="field" data-wide><label class="label" for="f_response_${f.id}">${tx('fbk.answer')}</label>
                 <textarea id="f_response_${f.id}" name="response" rows="2" maxlength="4000">${f.response ?? ''}</textarea>
-                ${f.responded_by ? html`<small class="help">By ${f.responded_by}, ${when(f.responded_at)}</small>` : ''}</div>
+                ${f.responded_by ? html`<small class="help">${tx('fbk.answered_by', { user: f.responded_by, when: when(f.responded_at) })}</small>` : ''}</div>
             </div>
-            <div class="buttons"><button class="btn btn-sm btn-hot">Save</button></div></form>
-        </li>`)}</ul>` : html`<p class="muted">No feedback${status || kind ? ' with these filters' : ' yet'}.</p>`}`)}`;
+            <div class="buttons"><button class="btn btn-sm btn-hot">${tx('common.save')}</button></div></form>
+        </li>`)}</ul>` : html`<p class="muted">${tx(status || kind ? 'fbk.none_filtered' : 'fbk.none')}</p>`}`)}`;
     const main = html`${appHeader(a, 'activity', s)}<div class="ide-body">${body}</div>`;
-    return send(reply, s, shell(s, `${a.name} feedback`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Activity', `${BASE}/apps/${a.id}/activity`], ['Feedback']], main));
+    return send(reply, s, shell(s, tx('fbk.page_title', { name: a.name }), [[tx('rail.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('app.tab.activity'), `${BASE}/apps/${a.id}/activity`], [tx('fbk.title')]], main));
   });
 
   app.post(`${BASE}/apps/:id(^\\d+$)/feedback/settings`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
     await owner.query('update meta.app set feedback = $2, updated_at = now() where id = $1', [req.params.id, req.body?.feedback === 'true']);
-    flash(s, 'Saved.');
+    flash(s, tx('fbk.saved'));
     return back(reply, s, `${BASE}/apps/${req.params.id}/feedback`);
   });
 
@@ -81,7 +84,7 @@ export async function feedbackRoutes(app: FastifyInstance) {
               responded_at = case when $4::text is distinct from response then now() else responded_at end
         where id = $2 and app_id = $1`,
       [req.params.id, req.params.fid, status, response, s.username]);
-    flash(s, r.rowCount ? 'Saved.' : 'Not found.', r.rowCount ? 'ok' : 'error');
+    flash(s, r.rowCount ? tx('fbk.saved') : tx('fbk.not_found'), r.rowCount ? 'ok' : 'error');
     return back(reply, s, `${BASE}/apps/${req.params.id}/feedback`);
   });
 }

package/src/builder/find-workspace.ts

@@ -1,12 +1,13 @@
 import type { FastifyInstance } from 'fastify';
 import { owner } from '../db.ts';
-import { esc, html, type Raw } from '../html.ts';
+import { esc, html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { documentShell } from '../layout.ts';
 import { senderAllowed, sendWith, type MailService } from '../mail/mail.ts';
 import { clientIp, getSession, logActivity, saveState, takeFlash, type Session } from '../session.ts';
 import { publicUrl } from '../sso.ts';
 import { back, BASE, brandMark, builderHead, csrf, flash, THEME_COOKIE, validTheme, type Req } from './ui.ts';
+import { cookieLanguage, translatorFor, type BuilderTranslate } from './i18n.ts';
 
 // "Find my workspace" on the builder's sign-in page (migration 096; APEX: Find
 // My Workspace): a developer who forgot which workspace to sign in to enters
@@ -30,8 +31,8 @@ export async function builderMail(): Promise<{ service: MailService; from: strin
   return service && from && senderAllowed(service.senders, from) ? { service, from } : null;
 }
 
-/** The mail for one address: each account with it, and its workspaces. */
-export async function workspacesMail(email: string): Promise<{ to: string; subject: string; text: string; html: string } | null> {
+/** The mail for one address: each account with it, and its workspaces (in the language of the page it was asked from). */
+export async function workspacesMail(email: string, tx: BuilderTranslate = translatorFor('en')): Promise<{ to: string; subject: string; text: string; html: string } | null> {
   const accounts = (await owner.query<{ username: string; admin: boolean; workspaces: string[] }>(
     `select d.username, d.is_admin as admin,
             coalesce((select array_agg(w.name order by w.id = 1 desc, lower(w.name)) from meta.workspace w
@@ -39,28 +40,29 @@ export async function workspacesMail(email: string): Promise<{ to: string; subje
        from meta.developer d where lower(d.email) = lower($1) order by d.username`, [email])).rows;
   if (!accounts.length) return null;
   const signIn = `${publicUrl()}${BASE}/login`;
-  const lines = accounts.map((a) => `${a.username}${a.admin ? ' (administrator: every workspace)' : ''}\n${a.workspaces.length ? a.workspaces.map((w) => `  - ${w}`).join('\n') : '  (no workspace yet: ask an administrator)'}`);
-  const text = `You asked which pgkiln workspaces you can sign in to.\n\n${lines.join('\n\n')}\n\nSign in at ${signIn}\n\nIf you didn't ask, you can ignore this mail: nothing was changed.`;
-  const body = `<p>You asked which pgkiln workspaces you can sign in to.</p>${accounts.map((a) => `<p><b>${esc(a.username)}</b>${a.admin ? ' (administrator: every workspace)' : ''}</p><ul>${a.workspaces.length ? a.workspaces.map((w) => `<li>${esc(w)}</li>`).join('') : '<li>No workspace yet: ask an administrator.</li>'}</ul>`).join('')}<p>Sign in at <a href="${esc(signIn)}">${esc(signIn)}</a></p><p>If you didn't ask, you can ignore this mail: nothing was changed.</p>`;
-  return { to: email, subject: 'Your pgkiln workspaces', text, html: body };
+  const admin = ` (${tx('fw.mail_admin')})`;
+  const lines = accounts.map((a) => `${a.username}${a.admin ? admin : ''}\n${a.workspaces.length ? a.workspaces.map((w) => `  - ${w}`).join('\n') : `  (${tx('fw.mail_no_ws')})`}`);
+  const text = `${tx('fw.mail_intro')}\n\n${lines.join('\n\n')}\n\n${tx('fw.mail_sign_in', { url: signIn })}\n\n${tx('fw.mail_ignore')}`;
+  const body = `<p>${esc(tx('fw.mail_intro'))}</p>${accounts.map((a) => `<p><b>${esc(a.username)}</b>${a.admin ? esc(admin) : ''}</p><ul>${a.workspaces.length ? a.workspaces.map((w) => `<li>${esc(w)}</li>`).join('') : `<li>${esc(tx('fw.mail_no_ws'))}</li>`}</ul>`).join('')}<p>${tx.rich('fw.mail_sign_in', { url: raw(`<a href="${esc(signIn)}">${esc(signIn)}</a>`) })}</p><p>${esc(tx('fw.mail_ignore'))}</p>`;
+  return { to: email, subject: tx('fw.mail_subject'), text, html: body };
 }
 
-const page = (s: Session, theme: ReturnType<typeof validTheme>, body: Raw) =>
+const page = (s: Session, theme: ReturnType<typeof validTheme>, body: Raw, tx: BuilderTranslate) =>
   documentShell(
-    'Find my workspace · Builder',
+    `${tx('signin.find_ws')} · ${tx('shell.builder')}`,
     html`<main class="signin">
       <section class="signin-hero" aria-label="pgkiln">
         <span class="signin-logo" aria-hidden="true">${brandMark()}</span>
         <h1 class="signin-title">pgkiln</h1>
-        <p class="signin-tagline">Build data applications on PostgreSQL, in SQL you can trust</p>
+        <p class="signin-tagline">${tx('signin.tagline')}</p>
       </section>
       <section class="signin-panel"><div class="signin-form">${body}
-        <nav class="signin-actions" aria-label="Quick actions"><a href="${BASE}/login">${icon('arrow-left')} Back to sign in</a></nav></div></section>
+        <nav class="signin-actions" aria-label="${tx('signin.quick')}"><a href="${BASE}/login">${icon('arrow-left')} ${tx('fw.back')}</a></nav></div></section>
     </main>`,
     'login-body ide-login signin-body',
     {},
     builderHead(),
-    { theme: theme ?? 'dark' },
+    { theme: theme ?? 'dark', lang: tx.lang },
   );
 
 export async function findWorkspaceRoutes(app: FastifyInstance) {
@@ -71,31 +73,33 @@ export async function findWorkspaceRoutes(app: FastifyInstance) {
     await saveState(s);
     const mail = await builderMail();
     const theme = validTheme(req.cookies?.[THEME_COOKIE]);
+    const tx = translatorFor(cookieLanguage(req));
     const body = !mail
-      ? html`<h2>Find my workspace</h2><p class="muted u-mt0">This installation doesn't send mail to developers. Ask an administrator which workspaces you belong to; or sign in with your user name and password only: the workspace is optional.</p>`
+      ? html`<h2>${tx('signin.find_ws')}</h2><p class="muted u-mt0">${tx('fw.no_mail')}</p>`
       : done
-        ? html`<h2>Check your mail</h2><div class="alert alert-success" role="status">${done}</div>`
-        : html`<h2>Find my workspace</h2>
-          <p class="muted u-mt0">Enter the e-mail address of your developer account: we send you your user name and the workspaces you can sign in to.</p>
+        ? html`<h2>${tx('fw.check_mail')}</h2><div class="alert alert-success" role="status">${done}</div>`
+        : html`<h2>${tx('signin.find_ws')}</h2>
+          <p class="muted u-mt0">${tx('fw.intro')}</p>
           ${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
           <form method="post" action="${BASE}/find-workspace">${csrf(s)}
-            <div class="field signin-field"><label class="sr-only" for="f_email">E-mail address</label>
-              <div class="signin-input">${icon('at')}<input id="f_email" name="email" type="email" placeholder="E-mail address" required autocomplete="email" maxlength="254"></div></div>
-            <button class="btn btn-hot signin-submit">Send</button>
+            <div class="field signin-field"><label class="sr-only" for="f_email">${tx('dev.email')}</label>
+              <div class="signin-input">${icon('at')}<input id="f_email" name="email" type="email" placeholder="${tx('dev.email')}" required autocomplete="email" maxlength="254"></div></div>
+            <button class="btn btn-hot signin-submit">${tx('fw.send')}</button>
           </form>`;
-    return reply.type('text/html').send(page(s, theme, body));
+    return reply.type('text/html').send(page(s, theme, body, tx));
   });
 
   app.post(`${BASE}/find-workspace`, async (req: Req, reply) => {
     const s = await getSession(req, reply, null, BASE);
     const to = `${BASE}/find-workspace`;
+    const tx = translatorFor(cookieLanguage(req));
     if (req.body?.__csrf !== s.csrf_token) {
-      flash(s, 'Your session expired. Please try again.', 'error');
+      flash(s, tx('signin.expired'), 'error');
       return back(reply, s, to);
     }
     const email = String(req.body?.email ?? '').trim().slice(0, 254);
     if (!EMAIL.test(email)) {
-      flash(s, 'Enter an e-mail address, e.g. ann@example.com.', 'error');
+      flash(s, tx('fw.bad_email'), 'error');
       return back(reply, s, to);
     }
     const ip = clientIp(req);
@@ -109,11 +113,11 @@ export async function findWorkspaceRoutes(app: FastifyInstance) {
     if (mail && !limited)
       // after the answer: the time it takes never tells whether an account has the address
       setImmediate(() => {
-        workspacesMail(email)
+        workspacesMail(email, tx)
           .then((m) => (m ? sendWith(mail.service, { from: mail.from, to: [m.to], cc: [], bcc: [], replyTo: null, subject: m.subject, text: m.text, html: m.html, attachments: [] }) : null))
           .catch((e) => console.error('find my workspace: the mail was not sent:', (e as Error).message));
       });
-    flash(s, `If a developer account has the address ${email}, it gets a mail with its user name and workspaces in a few minutes. No mail? Ask an administrator.`);
+    flash(s, tx('fw.sent', { email }));
     return back(reply, s, to);
   });
 }

package/src/builder/form-designer.ts

@@ -7,6 +7,7 @@ import { fdSourcesOf, type FdColumn, type FdSource } from '../runtime/form-desig
 import type { Session } from '../session.ts';
 import { findObject, objectList, type DbObject } from './reporter.ts';
 import { back, BASE, csrf, developer, flash, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // Page designer → a Form Designer region → Settings (sprint 85): the tables
 // and views the region offers (which columns forms may show and change, their
@@ -53,7 +54,7 @@ export async function mergeFormDesignerSettings(
   else delete out.empty;
   delete out.design_authz;
   if (b.design_authz && a.authz.has(b.design_authz.toUpperCase())) out.design_authz = b.design_authz;
-  else if (b.design_authz) errors.push(`There is no authorization scheme ${b.design_authz}.`);
+  else if (b.design_authz) errors.push(tx('fdz.no_authz', { name: String(b.design_authz) }));
 
   const lovOk = (v: string) => LOV_REF.test(v) && (!/^LOV:/i.test(v) || a.lovs.has(v.slice(4).toUpperCase()));
   const sources: FdSource[] = [];
@@ -78,7 +79,7 @@ export async function mergeFormDesignerSettings(
       }
       columns.push({ name, ...(label ? { label } : {}), ...(lov ? { lov } : {}) });
     }
-    if (!columns.length) errors.push(`Data source ${s.id} offers no columns.`);
+    if (!columns.length) errors.push(tx('fdz.no_columns', { id: s.id }));
     const key = clip(b[`s${i}_keycol`], 63);
     if (key && !names.has(key)) errors.push(`${s.id}: the key column ${key} is not in ${s.schema}.${s.table}.`);
     const label = clip(b[`s${i}_label`], 80);
@@ -92,7 +93,7 @@ export async function mergeFormDesignerSettings(
 
   if (b.new_object) {
     const obj = /^\d{1,10}$/.test(b.new_object) ? await lookup.byOid(Number(b.new_object)) : null;
-    if (!obj || RESERVED_SCHEMAS.test(obj.schema)) errors.push('Choose a table or view for the new data source.');
+    if (!obj || RESERVED_SCHEMAS.test(obj.schema)) errors.push(tx('fdz.choose_a_table_or_view'));
     else if (sources.length >= MAX_FD_SOURCES) errors.push(`A region offers at most ${MAX_FD_SOURCES} data sources.`);
     else {
       let id = clip(b.new_id, 40).toLowerCase();
@@ -101,7 +102,7 @@ export async function mergeFormDesignerSettings(
         id = '';
       }
       if (id && sources.some((s) => s.id === id)) {
-        errors.push(`There is already a data source ${id}.`);
+        errors.push(tx('fdz.dup_source', { id }));
         id = '';
       }
       if (!id) {
@@ -154,56 +155,56 @@ export async function formDesignerSettingsForm(pageId: number, appId: number, r:
       const missing = privileges ? (['sel', 'ins', 'upd', 'del'] as const).filter((k) => !privileges[k] && (k === 'sel' || src[({ ins: 'insert', upd: 'update', del: 'delete' } as const)[k as 'ins' | 'upd' | 'del']])) : [];
       const grant = { sel: 'SELECT', ins: 'INSERT', upd: 'UPDATE', del: 'DELETE' };
       const check = (k: 'insert' | 'update' | 'delete', label: string, needsKey: boolean) =>
-        html`<label class="check"><input type="checkbox" name="s${i}_${k}" value="true"${src[k] ? raw(' checked') : ''}> ${label}${needsKey && !src.key ? ' (needs a key column)' : ''}</label>`;
+        html`<label class="check"><input type="checkbox" name="s${i}_${k}" value="true"${src[k] ? raw(' checked') : ''}> ${label}${needsKey && !src.key ? ` ${tx('fdz.needs_key')}` : ''}</label>`;
       return html`<fieldset class="prop-group"><legend>${src.label || src.id} <span class="muted">(${src.schema}.${src.table})</span></legend>
         <input type="hidden" name="s${i}_key" value="${src.id}">
-        ${!obj ? html`<div class="alert alert-error" role="alert">The table or view ${src.schema}.${src.table} does not exist (any more).</div>` : ''}
-        ${missing.length ? html`<div class="alert alert-error" role="alert">The application's database role lacks ${missing.map((k) => grant[k]).join(', ')} on ${src.schema}.${src.table}: grant it, or forms can't do that.</div>` : ''}
+        ${!obj ? html`<div class="alert alert-error" role="alert">${tx('fdz.no_object', { object: `${src.schema}.${src.table}` })}</div>` : ''}
+        ${missing.length ? html`<div class="alert alert-error" role="alert">${tx('fdz.lacks', { privs: missing.map((k) => grant[k]).join(', '), object: `${src.schema}.${src.table}` })}</div>` : ''}
         <div class="form-grid">
-          <div class="field"><label class="label" for="${id(`s${i}_id`)}">Static id</label><input id="${id(`s${i}_id`)}" value="${src.id}" readonly></div>
-          <div class="field"><label class="label" for="${id(`s${i}_label`)}">Label</label><input id="${id(`s${i}_label`)}" name="s${i}_label" maxlength="80" value="${src.label ?? ''}" placeholder="${heading(src.table)}"></div>
-          <div class="field" data-wide><label class="label" for="${id(`s${i}_description`)}">Description (shown to designers)</label><input id="${id(`s${i}_description`)}" name="s${i}_description" maxlength="300" value="${src.description ?? ''}"></div>
-          <div class="field"><label class="label" for="${id(`s${i}_keycol`)}">Key column (identifies a row)</label>
-            <select id="${id(`s${i}_keycol`)}" name="s${i}_keycol"><option value="">- none: forms only add rows -</option>${(obj?.columns ?? []).map((c) => opt(c.name, c.name, src.key ?? ''))}</select></div>
-          <div class="field"><span class="label">Forms on it may</span>
-            ${check('insert', 'add rows', false)} ${check('update', 'change rows', true)} ${check('delete', 'delete rows', true)}</div>
+          <div class="field"><label class="label" for="${id(`s${i}_id`)}">${tx('fdz.static_id')}</label><input id="${id(`s${i}_id`)}" value="${src.id}" readonly></div>
+          <div class="field"><label class="label" for="${id(`s${i}_label`)}">${tx('fdz.label')}</label><input id="${id(`s${i}_label`)}" name="s${i}_label" maxlength="80" value="${src.label ?? ''}" placeholder="${heading(src.table)}"></div>
+          <div class="field" data-wide><label class="label" for="${id(`s${i}_description`)}">${tx('fdz.description_shown_to_designers')}</label><input id="${id(`s${i}_description`)}" name="s${i}_description" maxlength="300" value="${src.description ?? ''}"></div>
+          <div class="field"><label class="label" for="${id(`s${i}_keycol`)}">${tx('fdz.key_column_identifies_a_row')}</label>
+            <select id="${id(`s${i}_keycol`)}" name="s${i}_keycol"><option value="">${tx('fdz.no_key')}</option>${(obj?.columns ?? []).map((c) => opt(c.name, c.name, src.key ?? ''))}</select></div>
+          <div class="field"><span class="label">${tx('fdz.forms_on_it_may')}</span>
+            ${check('insert', tx('fdz.add_rows'), false)} ${check('update', tx('fdz.change_rows'), true)} ${check('delete', tx('fdz.delete_rows'), true)}</div>
         </div>
-        <div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">Offer</th><th scope="col">Column</th><th scope="col">Label</th><th scope="col">List of values</th></tr></thead><tbody>
+        <div class="table-wrap"><table class="report report-reflow"><thead><tr><th scope="col">${tx('fdz.offer')}</th><th scope="col">${tx('fdz.column')}</th><th scope="col">${tx('fdz.label')}</th><th scope="col">${tx('fdz.list_of_values')}</th></tr></thead><tbody>
           ${all.map((c, j) => {
             const o = offered.get(c.name);
             return html`<tr>
-              <td data-label="Offer"><input type="hidden" name="s${i}_col_${j}" value="${c.name}"><input type="checkbox" name="s${i}_on_${j}" value="true"${o ? raw(' checked') : ''} aria-label="Offer ${c.name}"></td>
-              <td data-label="Column"><code>${c.name}</code> <span class="muted">${c.type}</span>${c.missing ? html` <span class="tag tag-error">not in the table</span>` : ''}</td>
-              <td data-label="Label"><input name="s${i}_label_${j}" maxlength="80" value="${o?.label ?? ''}" placeholder="${heading(c.name)}" aria-label="Label of ${c.name}"></td>
-              <td data-label="List of values"><input name="s${i}_lov_${j}" maxlength="2000" value="${o?.lov ?? ''}" placeholder="LOV:NAME" list="${id('lovs')}" aria-label="List of values of ${c.name}"></td>
+              <td data-label="${tx('fdz.offer')}"><input type="hidden" name="s${i}_col_${j}" value="${c.name}"><input type="checkbox" name="s${i}_on_${j}" value="true"${o ? raw(' checked') : ''} aria-label="${tx('fdz.offer_col', { col: c.name })}"></td>
+              <td data-label="${tx('fdz.column')}"><code>${c.name}</code> <span class="muted">${c.type}</span>${c.missing ? html` <span class="tag tag-error">${tx('fdz.not_in_the_table')}</span>` : ''}</td>
+              <td data-label="${tx('fdz.label')}"><input name="s${i}_label_${j}" maxlength="80" value="${o?.label ?? ''}" placeholder="${heading(c.name)}" aria-label="${tx('fdz.label_of', { col: c.name })}"></td>
+              <td data-label="${tx('fdz.list_of_values')}"><input name="s${i}_lov_${j}" maxlength="2000" value="${o?.lov ?? ''}" placeholder="LOV:NAME" list="${id('lovs')}" aria-label="${tx('fdz.lov_of', { col: c.name })}"></td>
             </tr>`;
           })}
         </tbody></table></div>
-        <div class="field"><label class="check"><input type="checkbox" name="s${i}_remove" value="true"> Remove this data source (forms on it stop working)</label></div>
+        <div class="field"><label class="check"><input type="checkbox" name="s${i}_remove" value="true"> ${tx('fdz.remove_this_data_source_forms')}</label></div>
       </fieldset>`;
     }),
   );
-  return html`<h3 class="u-mt15">Form Designer settings</h3>
-    <p class="muted u-mt0">Users that pass the designers' authorization scheme build data entry forms on the tables and views below: they pick offered columns, labels, help texts, required fields and defaults, and publish forms for everyone who can see this region. Forms read and write rows as the application's database role, so grants and row level security apply.</p>
+  return html`<h3 class="u-mt15">${tx('fdz.form_designer_settings')}</h3>
+    <p class="muted u-mt0">${tx('fdz.users_that_pass_the_designers')}</p>
     <datalist id="${id('lovs')}">${lovs.map((n) => html`<option value="LOV:${n}">`)}</datalist>
     <form method="post" action="${BASE}/pages/${pageId}/region/${r.id}/form-designer" class="component-form">${csrf(s)}
-      <fieldset class="prop-group"><legend>Forms</legend><div class="form-grid">
-        <div class="field"><label class="label" for="${id('design_authz')}">Who may design forms</label>
-          <select id="${id('design_authz')}" name="design_authz">${opt('', 'Nobody (choose an authorization scheme)', designAuthz)}${schemes.map((n) => opt(n, `Authorization: ${n}`, designAuthz))}</select></div>
-        <div class="field"><label class="label" for="${id('page_size')}">Rows per page</label>
+      <fieldset class="prop-group"><legend>${tx('fdz.forms')}</legend><div class="form-grid">
+        <div class="field"><label class="label" for="${id('design_authz')}">${tx('fdz.who_may_design_forms')}</label>
+          <select id="${id('design_authz')}" name="design_authz">${opt('', tx('fdz.nobody_choose_an_authorization_scheme'), designAuthz)}${schemes.map((n) => opt(n, `Authorization: ${n}`, designAuthz))}</select></div>
+        <div class="field"><label class="label" for="${id('page_size')}">${tx('fdz.rows_per_page')}</label>
           <input id="${id('page_size')}" name="page_size" type="number" min="5" max="200" value="${cfg.page_size ?? ''}" placeholder="25"></div>
-        <div class="field" data-wide><label class="label" for="${id('empty')}">Text when there are no rows</label>
-          <input id="${id('empty')}" name="empty" maxlength="200" value="${cfg.empty ?? ''}" placeholder="No data found"></div>
+        <div class="field" data-wide><label class="label" for="${id('empty')}">${tx('fdz.text_when_there_are_no')}</label>
+          <input id="${id('empty')}" name="empty" maxlength="200" value="${cfg.empty ?? ''}" placeholder="${tx('fdz.no_data_found')}"></div>
       </div></fieldset>
       ${sourceSets}
-      <fieldset class="prop-group"><legend>Add a data source</legend><div class="form-grid">
-        <div class="field" data-wide><label class="label" for="${id('new_object')}">Table or view</label>
+      <fieldset class="prop-group"><legend>${tx('fdz.add_a_data_source')}</legend><div class="form-grid">
+        <div class="field" data-wide><label class="label" for="${id('new_object')}">${tx('fdz.table_or_view')}</label>
           <select id="${id('new_object')}" name="new_object"><option value="">- none -</option>${objects.map((o) => html`<option value="${o.oid}">${o.name}${o.access ? '' : ' (no access for the app role)'}</option>`)}</select></div>
-        <div class="field"><label class="label" for="${id('new_id')}">Static id</label><input id="${id('new_id')}" name="new_id" maxlength="40" pattern="[a-z][a-z0-9_]*" placeholder="from the name"></div>
-        <div class="field"><label class="label" for="${id('new_label')}">Label</label><input id="${id('new_label')}" name="new_label" maxlength="80"></div>
+        <div class="field"><label class="label" for="${id('new_id')}">${tx('fdz.static_id')}</label><input id="${id('new_id')}" name="new_id" maxlength="40" pattern="[a-z][a-z0-9_]*" placeholder="${tx('fdz.from_the_name')}"></div>
+        <div class="field"><label class="label" for="${id('new_label')}">${tx('fdz.label')}</label><input id="${id('new_label')}" name="new_label" maxlength="80"></div>
       </div>
-      <small class="help">All columns are offered at first (except binary and JSON ones), the primary key is the key column, and forms may add and change rows, not delete them. Untick columns designers should not put on forms, such as generated keys and audit columns.</small></fieldset>
-      <div class="buttons"><button class="btn btn-hot">Save Form Designer settings</button></div>
+      <small class="help">${tx('fdz.all_columns_are_offered_at')}</small></fieldset>
+      <div class="buttons"><button class="btn btn-hot">${tx('fdz.save_form_designer_settings')}</button></div>
     </form>`;
 }
 
@@ -223,7 +224,7 @@ export async function formDesignerBuilderRoutes(app: FastifyInstance) {
       { authz: new Set(schemes.map((x) => x.name.toUpperCase())), lovs: new Set(lovs.map((x) => x.name.toUpperCase())) });
     await owner.query('update meta.region set config = $2 where id = $1', [r.id, JSON.stringify(config)]);
     if (errors.length) flash(s, errors.join(' '), 'error');
-    else flash(s, 'Settings saved.');
+    else flash(s, tx('fdz.settings_saved'));
     return back(reply, s, `${BASE}/pages/${pid}?c=region-${rid}`);
   });
 }

package/src/builder/gallery.ts

@@ -12,6 +12,7 @@ import { isAdmin } from './locks.ts';
 import { back, BASE, csrf, developer, flash, send, shell, type Req } from './ui.ts';
 import { currentWorkspace, inWorkspaceSql, placeApp } from './workspaces.ts';
 import { workspacesChanged } from '../workspace-db.ts';
+import { scopedTx as tx, type BuilderKey } from './i18n.ts';
 
 // The App Gallery (sprint 61, sprint 120; APEX: App Gallery with Sample, Starter, Utility and
 // Custom Apps).
@@ -69,7 +70,7 @@ const SAMPLE_FILE = /^(samples\/)?[a-z0-9-]+\.sql$/;
 const galleryFile = (rel: string) => readFileSync(join(rel.includes('/') ? GALLERY : join(root, 'examples'), rel), 'utf8');
 
 type Tab = 'samples' | 'starters' | 'utilities' | 'custom';
-const TABS: readonly [Tab, string][] = [['samples', 'Sample Apps'], ['starters', 'Starter Apps'], ['utilities', 'Utility Apps'], ['custom', 'Custom Apps']];
+const TABS: readonly [Tab, BuilderKey][] = [['samples', 'gal.tab.samples'], ['starters', 'gal.tab.starters'], ['utilities', 'gal.tab.utilities'], ['custom', 'gal.tab.custom']];
 
 export async function galleryRoutes(app: FastifyInstance) {
   app.get(`${BASE}/gallery`, async (req: Req, reply) => {
@@ -100,50 +101,45 @@ export async function galleryRoutes(app: FastifyInstance) {
     const card = (ic: string, title: string, by: string, text: string, action: unknown) =>
       html`<article class="gal-card" data-filter-row><div class="gal-head"><span class="gal-icon">${icon(ic)}</span><div><h2>${title}</h2><span class="muted small">${by}</span></div></div>
         <p>${text}</p><div class="gal-foot">${action}</div></article>`;
-    const tabs = html`<nav class="gal-tabs segmented" aria-label="Kinds of applications">${TABS.map(([t, l]) =>
-      html`<a href="${BASE}/gallery?tab=${t}${q ? `&q=${encodeURIComponent(q)}` : ''}"${tab === t ? raw(' aria-current="page"') : ''}>${l} <span class="gal-count">${counts[t]}</span></a>`)}</nav>`;
+    const tabs = html`<nav class="gal-tabs segmented" aria-label="${tx('gal.kinds')}">${TABS.map(([t, l]) =>
+      html`<a href="${BASE}/gallery?tab=${t}${q ? `&q=${encodeURIComponent(q)}` : ''}"${tab === t ? raw(' aria-current="page"') : ''}>${tx(l)} <span class="gal-count">${counts[t]}</span></a>`)}</nav>`;
     const blueprintCard = (kind: 'starters' | 'utilities') => (x: Starter) => card(x.icon, x.title, 'pgkiln', x.description,
-      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">Install</button></form>`);
+      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">${tx('gal.install')}</button></form>`);
     const cards =
       tab === 'samples'
         ? samples.filter(matches).map((x) => {
             const it = installed.get(x.alias);
             return card(x.icon, x.title, 'pgkiln', x.description,
               it
-                ? html`<span class="tag tag-ok">Installed</span><a class="btn btn-sm" href="/a/${x.alias}" target="_blank" rel="noopener">Run</a>${it.here
-                    ? html`<a class="btn btn-sm" href="${BASE}/apps/${it.id}">Edit</a>`
-                    : html`<span class="muted small">in another workspace</span>`}`
+                ? html`<span class="tag tag-ok">${tx('gal.installed')}</span><a class="btn btn-sm" href="/a/${x.alias}" target="_blank" rel="noopener">${tx('common.run')}</a>${it.here
+                    ? html`<a class="btn btn-sm" href="${BASE}/apps/${it.id}">${tx('gal.edit')}</a>`
+                    : html`<span class="muted small">${tx('gal.other_workspace')}</span>`}`
                 : admin
-                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="Install ${x.title}? It adds its own schema, data and demo accounts with known passwords: not for a production instance.">Install</button></form>`
-                  : html`<span class="muted small">An administrator installs it.</span>`);
+                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="${tx('gal.confirm_install', { title: x.title })}">${tx('gal.install')}</button></form>`
+                  : html`<span class="muted small">${tx('gal.admin_installs')}</span>`);
           })
         : tab === 'starters' || tab === 'utilities'
           ? (tab === 'starters' ? starters : utilities).filter(matches).map(blueprintCard(tab))
-          : custom.filter(matches).map((x) => card('copy', x.name, 'This workspace', x.description ?? 'A boilerplate application: a new application starts with its pages, shared components and settings.',
-              html`<a class="btn btn-hot btn-sm" href="${BASE}/create?boilerplate=${x.id}">Create from it</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">Edit</a>`));
+          : custom.filter(matches).map((x) => card('copy', x.name, tx('gal.this_workspace'), x.description ?? tx('gal.boilerplate_desc'),
+              html`<a class="btn btn-hot btn-sm" href="${BASE}/create?boilerplate=${x.id}">${tx('gal.create_from')}</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">${tx('gal.edit')}</a>`));
     const empty = q && counts[tab]
-      ? html`<p class="muted">No app matches <strong>${q}</strong>. <a href="${BASE}/gallery?tab=${tab}">Show all</a></p>`
+      ? html`<p class="muted">${tx.rich('gal.no_match', { q: html`<strong>${q}</strong>` })} <a href="${BASE}/gallery?tab=${tab}">${tx('gal.show_all')}</a></p>`
       : tab === 'custom'
-        ? html`<p class="muted">No custom apps yet: make an application of type <em>Boilerplate</em> (Application settings → Application type) and it appears here.</p>`
-        : html`<p class="muted">The gallery is empty.</p>`;
-    const intro = {
-      samples: 'Applications that show what pgkiln can do, each with its own schema, data and demo account: the showcase, the tutorial, one app per feature area and the UX Pattern Catalog. An administrator installs them on a development or demo instance.',
-      starters: 'Small, ready-to-use applications. Install shows what will be created (tables, pages, sample data) before anything happens; the application gets its own role and schema in this workspace.',
-      utilities: 'Applications a workspace uses rather than learns from: shared lookup lists, release notes, announcements. Like starter apps, Install shows what will be created first, and the application gets its own role and schema in this workspace.',
-      custom: 'The boilerplate applications of this workspace: start a new application from one.',
-    }[tab];
+        ? html`<p class="muted">${tx.rich('gal.no_custom', { type: html`<em>${tx('gal.boilerplate')}</em>` })}</p>`
+        : html`<p class="muted">${tx('gal.empty')}</p>`;
+    const intro = tx(({ samples: 'gal.intro.samples', starters: 'gal.intro.starters', utilities: 'gal.intro.utilities', custom: 'gal.intro.custom' } as const)[tab]);
     const main = html`<div class="gal">
       <div class="gal-bar">
-        <form class="ab-search gal-search" role="search" method="get" action="${BASE}/gallery"><label class="sr-only" for="gal-q">Search apps</label>${icon('search')}
+        <form class="ab-search gal-search" role="search" method="get" action="${BASE}/gallery"><label class="sr-only" for="gal-q">${tx('gal.search')}</label>${icon('search')}
           <input type="hidden" name="tab" value="${tab}">
-          <input id="gal-q" name="q" type="search" placeholder="Search apps" autocomplete="off" value="${q}" data-filter-list=".gal [data-filter-row]"></form>
+          <input id="gal-q" name="q" type="search" placeholder="${tx('gal.search')}" autocomplete="off" value="${q}" data-filter-list=".gal [data-filter-row]"></form>
         ${tabs}
       </div>
-      <h1 class="sr-only">App Gallery</h1>
+      <h1 class="sr-only">${tx('rail.gallery')}</h1>
       <p class="muted">${intro}</p>
       ${cards.length ? html`<div class="gal-grid">${cards}</div>` : empty}
     </div>`;
-    return send(reply, s, shell(s, 'App Gallery', [['App Gallery']], main, 'gallery'));
+    return send(reply, s, shell(s, tx('rail.gallery'), [[tx('rail.gallery')]], main, 'gallery'));
   });
 
   // a sample app: an administrator installs it (shipped SQL, run as the owner)
@@ -154,12 +150,12 @@ export async function galleryRoutes(app: FastifyInstance) {
     const x = KEY.test(req.params.key) ? catalog().samples.find((c) => c.key === req.params.key) : undefined;
     if (!x) return reply.code(404).send('Not found');
     try {
-      if (await owner.one('select 1 as ok from meta.app where alias = $1', [x.alias])) throw new Error(`an application with the alias ${x.alias} exists already.`);
+      if (await owner.one('select 1 as ok from meta.app where alias = $1', [x.alias])) throw new Error(tx('gal.err_alias', { alias: x.alias }));
       const ws = currentWorkspace(s);
       // into the current workspace (an isolated one gets the application's role too)
       const place = async (c: Client) => {
         const made = (await c.query('select id, db_role from meta.app where alias = $1', [x.alias])).rows[0] as { id: number; db_role: string | null } | undefined;
-        if (!made) throw new Error(`the scripts ran, but there is no application ${x.alias}.`);
+        if (!made) throw new Error(tx('gal.err_no_app', { alias: x.alias }));
         if (ws > 1) {
           if (made.db_role && (await c.query('select 1 from meta.workspace where id = $1 and isolated', [ws])).rowCount)
             await c.query('insert into meta.workspace_role (workspace_id, role_name) values ($1, $2) on conflict do nothing', [ws, made.db_role]);
@@ -178,13 +174,13 @@ export async function galleryRoutes(app: FastifyInstance) {
           await c.query(sql);
           return place(c);
         });
-      } else throw new Error('the gallery entry names nothing to install.');
+      } else throw new Error(tx('gal.err_nothing'));
       await workspacesChanged();
       await logActivity({ appId: made.id, username: s.username, event: 'gallery', ip: clientIp(req), detail: `installed sample app ${x.key}` });
-      flash(s, `${x.title} installed (/a/${x.alias}).`);
+      flash(s, tx('gal.installed_flash', { title: x.title, alias: x.alias }));
       return back(reply, s, `${BASE}/apps/${made.id}`);
     } catch (e) {
-      flash(s, `${x.title} was not installed: ${(e as Error).message}`, 'error');
+      flash(s, tx('gal.not_installed', { title: x.title, message: (e as Error).message }), 'error');
       return back(reply, s, `${BASE}/gallery`);
     }
   });