pgkiln 0.83.0 → 0.85.0

package/src/builder/newapp.ts

@@ -7,6 +7,7 @@ import { BASE_STYLES, NEW_APP_BASE } from '../runtime/styles.ts';
 import { LANGUAGE_NAMES } from '../i18n.ts';
 import { isIcon } from '../icons.ts';
 import { secretKeyConfigured } from '../secrets.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 /** (097) The icon of a new application's home page when the developer chose none. */
 export const DEFAULT_APP_ICON = 'layers';
@@ -64,6 +65,8 @@ export const FEATURES: [keyof Features, string, string, boolean][] = [
   ['pwa', 'Install as an app (PWA)', 'Installable on phones and desktops, with offline pages.', false],
   ['push', 'Push notifications', 'Notifications to the users\' devices (with Install as an app).', false],
 ];
+/** A feature's label and help in the builder language (FEATURES stays English). */
+export const featureText = (k: string, label: string, help: string): [string, string] => [tx.dyn(`nwa.f.${k}`, label), tx.dyn(`nwa.fh.${k}`, help)];
 /** The features ticked on a form (a form without them: the defaults). */
 export const featuresFrom = (b: Record<string, unknown>, posted: boolean): Features =>
   Object.fromEntries(FEATURES.map(([k, , , on]) => [k, posted ? b[`f_${k}`] === 'true' : on])) as unknown as Features;
@@ -122,7 +125,7 @@ async function applyFeatures(c: Client, appId: number, f: Partial<Features>, not
   if (f.pwa || f.push) await c.query('update meta.app set pwa = true where id = $1', [appId]);
   if (f.push) {
     if (secretKeyConfigured()) await c.query('update meta.app set pwa_push = true where id = $1', [appId]);
-    else notes.push('Push notifications are off: they need PGKILN_SECRET_KEY in the server\'s environment.');
+    else notes.push(tx('nwa.push_off'));
   }
 }
 
@@ -214,19 +217,19 @@ export const reservedSchema = (schema: string) => /^pg_/i.test(schema) || ['meta
 
 /** Validate the form (outside the transaction: the password check may look up the account). Throws an Error with a message for the developer. */
 export async function checkNewApp(b: NewAppInput, workspaceId: number): Promise<CheckedApp> {
-  if (!(workspaceId > 0)) throw new Error('You are not a developer of any workspace yet: ask an administrator to add you to one.');
+  if (!(workspaceId > 0)) throw new Error(tx('nwa.no_workspace'));
   const alias = (b.alias ?? '').trim().toLowerCase();
-  if (!/^[a-z][a-z0-9_-]*$/.test(alias) || alias.length > 50) throw new Error('The alias must start with a letter and contain only a-z, 0-9, _ and - (at most 50 characters).');
+  if (!/^[a-z][a-z0-9_-]*$/.test(alias) || alias.length > 50) throw new Error(tx('nwa.bad_alias'));
   const name = (b.name ?? '').trim();
-  if (!name) throw new Error('Enter a name for the application.');
+  if (!name) throw new Error(tx('nwa.enter_name'));
   const schema = (b.schema ?? '').trim() || alias.replace(/-/g, '_');
-  if (reservedSchema(schema) || schema.length > 63) throw new Error(`The schema ${schema} can't be the parsing schema of an application.`);
+  if (reservedSchema(schema) || schema.length > 63) throw new Error(tx('nwa.bad_schema', { schema }));
   const authentication = (b.authentication ?? '').trim() || 'app_users';
   let adminUser: string | null = null;
   let adminPassword: string | null = null;
   if (authentication !== 'none') {
     adminUser = (b.admin_user ?? '').trim();
-    if (!adminUser) throw new Error('Apps with a login page need a first user.');
+    if (!adminUser) throw new Error(tx('nwa.first_user'));
     const known = await owner.one('select 1 from meta.account where lower(username) = lower($1)', [adminUser]);
     const problem = known ? null : await passwordProblem(b.admin_password);
     if (problem) throw new Error(problem);
@@ -234,11 +237,11 @@ export async function checkNewApp(b: NewAppInput, workspaceId: number): Promise<
   }
   const description = (b.description ?? '').trim().slice(0, 300) || null;
   const appIcon = (b.icon ?? '').trim();
-  if (appIcon && !isIcon(appIcon)) throw new Error('Choose one of the icons in the list.');
+  if (appIcon && !isIcon(appIcon)) throw new Error(tx('nwa.choose_icon'));
   const base = b.base === 'lavender' || b.base === 'standard' ? b.base : 'iris';
   const accent = /^#[0-9a-f]{6}$/i.test(b.accent ?? '') && b.accent!.toLowerCase() !== BASE_STYLES[base].accent ? b.accent!.toLowerCase() : null;
   const language = (b.language ?? '').trim() || 'en';
-  if (!(language in LANGUAGE_NAMES)) throw new Error('Choose one of the languages in the list.');
+  if (!(language in LANGUAGE_NAMES)) throw new Error(tx('nwa.choose_language'));
   return {
     name, alias, schema, role: `app_${alias.replace(/-/g, '_')}`, authentication, adminUser, adminPassword, workspaceId, description, icon: appIcon || null,
     base, topNav: b.nav === 'top', accent, language,
@@ -257,13 +260,13 @@ export async function createApp(c: Client, a: CheckedApp): Promise<{ id: number;
   if (isolated) {
     // (a taken alias fails below, with its own message)
     const aliasTaken = (await c.query('select 1 from meta.app where alias = $1', [a.alias])).rowCount;
-    if (roleExists && !aliasTaken) throw new Error(`The database role ${a.role} exists already: choose another alias.`);
+    if (roleExists && !aliasTaken) throw new Error(tx('nwa.role_exists', { role: a.role }));
     const foreign = await c.query(
       `select 1 from pg_namespace n where n.nspname = $1
           and n.nspowner::regrole::text not in (select role_name from meta.workspace_role where workspace_id = $2)`,
       [a.schema, a.workspaceId],
     );
-    if (foreign.rowCount) throw new Error(`The schema ${a.schema} exists already and doesn't belong to this workspace: choose another schema.`);
+    if (foreign.rowCount) throw new Error(tx('nwa.schema_foreign', { schema: a.schema }));
   }
   if (!roleExists) await c.query(`create role ${R} nologin`);
   await c.query(`create schema if not exists ${S}${isolated ? ` authorization ${R}` : ''}`);
@@ -318,7 +321,7 @@ export async function createApp(c: Client, a: CheckedApp): Promise<{ id: number;
  */
 export async function startFromBoilerplate(c: Client, appId: number, a: CheckedApp, boilerplateId: number) {
   const bp = (await c.query<{ alias: string }>(`select alias from meta.app where id = $1 and app_type = 'boilerplate'`, [boilerplateId])).rows[0];
-  if (!bp) throw new Error('Choose a boilerplate application (an application of type Boilerplate).');
+  if (!bp) throw new Error(tx('nwa.choose_boilerplate'));
   const doc = (await c.query('select meta.export_app($1) as d', [bp.alias])).rows[0].d;
   await replaceApp(c, doc, a.alias, { backup: null });
   await c.query(`update meta.app set name = $2, db_role = $3, authentication = $4, app_type = 'standard', api_role = null, updated_at = now() where id = $1`, [
@@ -329,6 +332,6 @@ export async function startFromBoilerplate(c: Client, appId: number, a: CheckedA
 /** A friendlier message for the errors creating an application can raise. */
 export function createAppError(e: unknown, alias: string) {
   const err = e as { code?: string; constraint?: string; message: string };
-  if (err.code === '23505' && /alias/.test(err.constraint ?? err.message)) return `An application with the alias ${alias} already exists.`;
+  if (err.code === '23505' && /alias/.test(err.constraint ?? err.message)) return tx('nwa.alias_taken', { alias });
   return err.message;
 }

package/src/builder/notification-settings.ts

@@ -0,0 +1,27 @@
+import { owner } from '../db.ts';
+import { html, raw } from '../html.ts';
+import type { BuilderTranslate } from './i18n.ts';
+import { input } from './ui.ts';
+
+// (sprint 165, migration 154) Settings → User Interface → Notifications: the notification bell
+// (meta.app.notifications) and live badges (meta.app.live_badges_s, 10 to 3600 seconds or none).
+
+/** The fields, in the User Interface tab of the application's settings. */
+export function notificationSettings(a: { notifications?: boolean | null; live_badges_s?: number | null }, tx: BuilderTranslate) {
+  return html`<h3 id="notifications">${tx('nfy.heading')}</h3>
+    <input type="hidden" name="notification_settings" value="1">
+    <div class="field"><label class="check"><input type="checkbox" name="notifications" value="true"${a.notifications ? raw(' checked') : ''}> ${tx('nfy.bell')}</label>
+      <small class="help">${tx.code('nfy.bell_help')}</small></div>
+    <div class="form-grid">
+      ${input('live_badges_s', tx('nfy.live'), a.live_badges_s ?? '', { type: 'number', placeholder: tx('nfy.live_ph'), help: tx('nfy.live_help') })}
+    </div>`;
+}
+
+/** Save them (only when the form had them); a number outside 10 to 3600 is an error. */
+export async function saveNotificationSettings(appId: string, b: Record<string, string | undefined>, tx: BuilderTranslate) {
+  if (b.notification_settings !== '1') return;
+  const raw = (b.live_badges_s ?? '').trim();
+  const seconds = raw === '' ? null : Number(raw);
+  if (seconds !== null && !(Number.isInteger(seconds) && seconds >= 10 && seconds <= 3600)) throw new Error(tx('nfy.live_invalid'));
+  await owner.query('update meta.app set notifications = $2, live_badges_s = $3 where id = $1', [appId, b.notifications === 'true', seconds]);
+}

package/src/builder/plugins.ts

@@ -9,6 +9,7 @@ import { clearCompletions } from './code-editor.ts';
 import { appOr404 } from './forms.ts';
 import { resultsHtml, runScripts, type RunResult } from './supporting.ts';
 import { appHeader, back, BASE, csrf, developer, flash, region, send, shell, type Body, type Req } from './ui.ts';
+import { scopedTx as tx, type BuilderKey } from './i18n.ts';
 
 // Shared Components → Plug-ins (migration 069; APEX: plug-ins): import a
 // plug-in file (format pgkiln-plugin/2), look at what it brings, run its
@@ -20,25 +21,30 @@ import { appHeader, back, BASE, csrf, developer, flash, region, send, shell, typ
 
 const MAX_FILE_MB = 10;
 
-const TYPE_LABEL: Record<string, string> = { region: 'Region', item: 'Item', dynamic_action: 'Dynamic action', process: 'Process' };
+const TYPE_KEY: Record<string, BuilderKey> = { region: 'plg.type.region', item: 'plg.type.item', dynamic_action: 'plg.type.dynamic_action', process: 'plg.type.process' };
+const HEADING_KEY: Record<string, BuilderKey> = { region: 'plg.heading.region', item: 'plg.heading.item', dynamic_action: 'plg.heading.dynamic_action', process: 'plg.heading.process' };
+const USE_KEY = { region: 'plg.use.region', item: 'plg.use.item', process: 'plg.use.process', dynamic_action: 'plg.use.dynamic_action' } as const satisfies Record<string, BuilderKey>;
+/** How to use a plug-in of a type in a component: a sentence with `code`. */
+const HOW_KEY: Record<string, BuilderKey> = { region: 'plg.how.region', item: 'plg.how.item', dynamic_action: 'plg.how.dynamic_action', process: 'plg.how.process' };
 
 /** Where an application uses each plug-in: "page 3: region Ratings", … */
 async function usages(appId: number) {
-  const rows = (await owner.query<{ plugin: string; where: string }>(
-    `select r.config->>'plugin' as plugin, 'page ' || p.page_no || ': region ' || coalesce(r.title, r.id::text) as where
+  const rows = (await owner.query<{ plugin: string; kind: 'region' | 'item' | 'process' | 'dynamic_action'; page_no: number; name: string }>(
+    `select r.config->>'plugin' as plugin, 'region' as kind, p.page_no, coalesce(r.title, r.id::text) as name,
+            'page ' || p.page_no || ': region ' || coalesce(r.title, r.id::text) as sort
        from meta.region r join meta.page p on p.id = r.page_id where p.app_id = $1 and r.type = 'plugin'
      union all
-     select i.config->>'plugin', 'page ' || p.page_no || ': item ' || i.name
+     select i.config->>'plugin', 'item', p.page_no, i.name, 'page ' || p.page_no || ': item ' || i.name
        from meta.item i join meta.page p on p.id = i.page_id where p.app_id = $1 and i.type = 'plugin'
      union all
-     select x.config->>'plugin', 'page ' || p.page_no || ': process ' || x.name
+     select x.config->>'plugin', 'process', p.page_no, x.name, 'page ' || p.page_no || ': process ' || x.name
        from meta.process x join meta.page p on p.id = x.page_id where p.app_id = $1 and x.type = 'plugin'
      union all
-     select trim(d.code), 'page ' || p.page_no || ': dynamic action ' || d.name
+     select trim(d.code), 'dynamic_action', p.page_no, d.name, 'page ' || p.page_no || ': dynamic action ' || d.name
        from meta.dynamic_action d join meta.page p on p.id = d.page_id where p.app_id = $1 and d.action = 'plugin'
-     order by 2`, [appId])).rows;
+     order by 5`, [appId])).rows;
   const out = new Map<string, string[]>();
-  for (const r of rows) out.set(r.plugin, [...(out.get(r.plugin) ?? []), r.where]);
+  for (const r of rows) out.set(r.plugin, [...(out.get(r.plugin) ?? []), tx(USE_KEY[r.kind], { page: r.page_no, name: r.name })]);
   return out;
 }
 
@@ -55,55 +61,52 @@ async function page(s: Session, a: any, selected: string | undefined, result?: {
     : [];
 
   const detail = p
-    ? region(`${p.label} (${TYPE_LABEL[p.type]} plug-in)`, html`
+    ? region(tx(HEADING_KEY[p.type], { label: p.label }), html`
         <dl class="props">
-          <dt>Name</dt><dd><code>${p.name}</code>${p.version ? html` · version ${p.version}` : ''}</dd>
-          ${p.help ? html`<dt>Help</dt><dd>${p.help}</dd>` : ''}
-          <dt>Used by</dt><dd>${(used.get(p.name) ?? []).join('; ') || html`<span class="muted">nothing yet</span>`}</dd>
-          <dt>Files</dt><dd>${p.files.length ? p.files.map((f, i) => html`${i ? ', ' : ''}<a href="${BASE}/apps/${a.id}/static-files?edit=${encodeURIComponent(f)}">${f}</a>${missingFiles.includes(f) ? html` <span class="badge badge-warning">missing</span>` : ''}`) : html`<span class="muted">none</span>`}</dd>
-          ${p.template_component ? html`<dt>Template</dt><dd>${tc ? html`<a href="${BASE}/apps/${a.id}/shared?c=template_component-${tc.id}">${p.template_component}</a>` : html`${p.template_component} <span class="badge badge-warning">missing</span>`}</dd>` : ''}
-          ${p.sql_function ? html`<dt>Function</dt><dd><code>${p.sql_function}(attributes jsonb) returns text</code></dd>` : ''}
+          <dt>${tx('plg.name')}</dt><dd><code>${p.name}</code>${p.version ? html` · ${tx('plg.version_n', { version: p.version })}` : ''}</dd>
+          ${p.help ? html`<dt>${tx('plg.help')}</dt><dd>${p.help}</dd>` : ''}
+          <dt>${tx('plg.used_by')}</dt><dd>${(used.get(p.name) ?? []).join('; ') || html`<span class="muted">${tx('plg.nothing_yet')}</span>`}</dd>
+          <dt>${tx('plg.files')}</dt><dd>${p.files.length ? p.files.map((f, i) => html`${i ? ', ' : ''}<a href="${BASE}/apps/${a.id}/static-files?edit=${encodeURIComponent(f)}">${f}</a>${missingFiles.includes(f) ? html` <span class="badge badge-warning">${tx('plg.missing')}</span>` : ''}`) : html`<span class="muted">${tx('plg.none')}</span>`}</dd>
+          ${p.template_component ? html`<dt>${tx('plg.template')}</dt><dd>${tc ? html`<a href="${BASE}/apps/${a.id}/shared?c=template_component-${tc.id}">${p.template_component}</a>` : html`${p.template_component} <span class="badge badge-warning">${tx('plg.missing')}</span>`}</dd>` : ''}
+          ${p.sql_function ? html`<dt>${tx('plg.function')}</dt><dd><code>${p.sql_function}(attributes jsonb) returns text</code></dd>` : ''}
         </dl>
         ${p.attributes.length
-          ? html`<div class="table-wrap"><table class="report"><caption>Attributes</caption><thead><tr><th scope="col">Name</th><th scope="col">Label</th><th scope="col">Type</th><th scope="col">Default</th></tr></thead>
+          ? html`<div class="table-wrap"><table class="report"><caption>${tx('plg.attributes')}</caption><thead><tr><th scope="col">${tx('plg.name')}</th><th scope="col">${tx('plg.label')}</th><th scope="col">${tx('plg.type')}</th><th scope="col">${tx('plg.default')}</th></tr></thead>
               <tbody>${p.attributes.map((x) => html`<tr><td><code>${x.name}</code></td><td>${x.label ?? ''}</td><td>${x.type ?? 'text'}${x.options ? `: ${x.options.join(', ')}` : ''}</td><td>${x.default ?? ''}</td></tr>`)}</tbody></table></div>`
           : ''}
-        <p class="muted">Use it as ${p.type === 'dynamic_action'
-          ? html`a dynamic action with action <code>plugin</code>, Code <code>${p.name}</code> and Plug-in attributes <code>{"attributes": {…}}</code>`
-          : html`a ${p.type} of type <code>plugin</code> with configuration <code>{"plugin": "${p.name}", "attributes": {…}}</code>`}.</p>
+        <p class="muted">${tx.code(HOW_KEY[p.type], { name: p.name })}</p>
         ${p.install_sql
-          ? html`<h3>Install SQL</h3><p class="muted">Not run on import. Read it, then run it as the application's database role <code>${a.db_role ?? '(none: the runtime connection)'}</code>, in one transaction.</p>
+          ? html`<h3>${tx('plg.install_sql')}</h3><p class="muted">${tx.rich('plg.install_help', { role: html`<code>${a.db_role ?? tx('plg.role_none')}</code>` })}</p>
               <pre class="source">${p.install_sql}</pre>
               <form method="post" action="${base}/install" class="u-mt1">${csrf(s)}<input type="hidden" name="name" value="${p.name}">
-                <button class="btn" data-confirm="Run the install SQL of ${p.label} as ${a.db_role ?? 'the runtime connection'}?">${icon('play')} Run the install SQL</button></form>`
+                <button class="btn" data-confirm="${a.db_role ? tx('plg.confirm_install', { label: p.label, role: a.db_role }) : tx('plg.confirm_install_runtime', { label: p.label })}">${icon('play')} ${tx('plg.run_install')}</button></form>`
           : ''}
         <div class="buttons u-mt1">
-          <a class="btn" href="${base}/download?name=${encodeURIComponent(p.name)}">${icon('download')} Download plug-in file</a>
+          <a class="btn" href="${base}/download?name=${encodeURIComponent(p.name)}">${icon('download')} ${tx('plg.download')}</a>
           <form method="post" action="${base}/delete" class="inline">${csrf(s)}<input type="hidden" name="name" value="${p.name}">
-            <button class="btn btn-danger" data-confirm="Remove the plug-in ${p.label}? Its files and template component stay.">${icon('trash')} Remove</button></form>
+            <button class="btn btn-danger" data-confirm="${tx('plg.confirm_remove', { label: p.label })}">${icon('trash')} ${tx('plg.remove')}</button></form>
         </div>`)
     : '';
 
   return html`${appHeader(a, 'shared', s)}
-    ${result ? region(`Result: install SQL of ${result.name}`, resultsHtml('install', result.run)) : ''}
+    ${result ? region(tx('plg.result', { name: result.name }), resultsHtml('install', result.run)) : ''}
     ${detail}
-    ${region('Plug-ins', html`<p class="muted u-mt0">Region, item, dynamic action and process types that bring their own code: JavaScript and CSS as
-        <a href="${BASE}/apps/${a.id}/static-files">static application files</a> (registered with <code>pgkiln.plugins.register</code>), a template component, a PL/pgSQL function.
-        A plug-in's code runs with this application's rights: import only plug-ins you trust and read their files.</p>
+    ${region(tx('plg.title'), html`<p class="muted u-mt0">${tx.rich('plg.intro', { files: html`<a href="${BASE}/apps/${a.id}/static-files">${tx('plg.static_files')}</a>`, register: html`<code>pgkiln.plugins.register</code>` })}
+        ${tx('plg.intro_trust')}</p>
       ${list.length
-        ? html`<div class="table-wrap"><table class="report"><caption class="sr-only">Plug-ins</caption>
-            <thead><tr><th scope="col">Plug-in</th><th scope="col">Type</th><th scope="col">Version</th><th scope="col">Used by</th></tr></thead>
+        ? html`<div class="table-wrap"><table class="report"><caption class="sr-only">${tx('plg.title')}</caption>
+            <thead><tr><th scope="col">${tx('plg.plugin')}</th><th scope="col">${tx('plg.type')}</th><th scope="col">${tx('plg.version')}</th><th scope="col">${tx('plg.used_by')}</th></tr></thead>
             <tbody>${list.map((x) => html`<tr><td><a href="${base}?p=${x.name}"${x.name === selected ? raw(' aria-current="page"') : ''}>${x.label}</a> <code class="muted">${x.name}</code></td>
-              <td>${TYPE_LABEL[x.type]}</td><td>${x.version ?? ''}</td><td>${(used.get(x.name) ?? []).length || ''}</td></tr>`)}</tbody></table></div>`
-        : html`<p class="muted">No plug-ins yet.</p>`}`)}
-    ${region('Import a plug-in', html`<form method="post" action="${base}/import" enctype="multipart/form-data">${csrf(s)}
-        <div class="field"><label class="label" for="f_plugin_file">Plug-in file (<code>pgkiln-plugin/2</code> JSON)</label>
+              <td>${tx(TYPE_KEY[x.type])}</td><td>${x.version ?? ''}</td><td>${(used.get(x.name) ?? []).length || ''}</td></tr>`)}</tbody></table></div>`
+        : html`<p class="muted">${tx('plg.no_plugins')}</p>`}`)}
+    ${region(tx('plg.import_title'), html`<form method="post" action="${base}/import" enctype="multipart/form-data">${csrf(s)}
+        <div class="field"><label class="label" for="f_plugin_file">${tx.code('plg.file_label')}</label>
           <input type="file" id="f_plugin_file" name="file" accept=".json,application/json"></div>
-        <div class="field" data-wide><label class="label" for="f_plugin_json">…or paste it</label>
+        <div class="field" data-wide><label class="label" for="f_plugin_json">${tx('plg.or_paste')}</label>
           <textarea id="f_plugin_json" name="plugin" class="code" rows="6" spellcheck="false" placeholder='{"format": "pgkiln-plugin/2", "type": "region", "name": …}'></textarea></div>
-        <div class="field"><label class="check"><input type="checkbox" name="replace" value="true"> Replace a plug-in, files and template component with the same names</label></div>
-        <div class="buttons"><button class="btn btn-hot">${icon('upload')} Import</button></div>
-        <small class="help">Template components for older plug-in files (<code>pgkiln-plugin/1</code>) are imported under Template components. <code>examples/plugins/</code> has examples.</small>
+        <div class="field"><label class="check"><input type="checkbox" name="replace" value="true"> ${tx('plg.replace')}</label></div>
+        <div class="buttons"><button class="btn btn-hot">${icon('upload')} ${tx('plg.import')}</button></div>
+        <small class="help">${tx.code('plg.import_help')}</small>
       </form>`)}`;
 }
 
@@ -132,7 +135,7 @@ export async function exportPlugin(appId: number, name: string) {
 }
 
 export async function pluginRoutes(app: FastifyInstance) {
-  const crumbs = (a: any) => [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`], ['Plug-ins']] as [string, string?][];
+  const crumbs = (a: any) => [[tx('rail.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('app.tab.shared'), `${BASE}/apps/${a.id}/shared`], [tx('plg.title')]] as [string, string?][];
   const find = async (id: string) => (/^\d+$/.test(id) ? appOr404(id) : undefined);
 
   app.get(`${BASE}/apps/:id/plugins`, async (req: Req, reply) => {
@@ -140,7 +143,7 @@ export async function pluginRoutes(app: FastifyInstance) {
     if (!s) return;
     const a = await find(req.params.id);
     if (!a) return reply.code(404).send('Not found');
-    return send(reply, s, shell(s, 'Plug-ins', crumbs(a), await page(s, a, req.query?.p)));
+    return send(reply, s, shell(s, tx('plg.title'), crumbs(a), await page(s, a, req.query?.p)));
   });
 
   app.post(`${BASE}/apps/:id/plugins/import`, async (req: Req, reply) => {
@@ -161,16 +164,16 @@ export async function pluginRoutes(app: FastifyInstance) {
     try {
       doc = JSON.parse(text);
     } catch {
-      flash(s, text ? 'Import failed: the plug-in file is not valid JSON.' : 'Choose a plug-in file or paste one.', 'error');
+      flash(s, text ? tx('plg.not_json') : tx('plg.choose_file'), 'error');
       return back(reply, s, base);
     }
     try {
       const p = await installPlugin(a.id, doc, req.body?.replace === 'true');
       await logActivity({ appId: a.id, username: s.username, event: 'plugin', ip: clientIp(req), detail: `builder: imported plug-in ${p.name}` });
-      flash(s, `Plug-in ${p.label} imported.${p.install_sql ? ' Read its install SQL below before running it.' : ''}`);
+      flash(s, tx(p.install_sql ? 'plg.imported_install' : 'plg.imported', { label: p.label }));
       return back(reply, s, `${base}?p=${p.name}`);
     } catch (e) {
-      flash(s, `Import failed: ${(e as Error).message}`, 'error');
+      flash(s, tx('plg.import_failed', { message: (e as Error).message }), 'error');
       return back(reply, s, base);
     }
   });
@@ -193,7 +196,7 @@ export async function pluginRoutes(app: FastifyInstance) {
     const a = await find(req.params.id);
     if (!a) return reply.code(404).send('Not found');
     const r = await owner.query('delete from meta.plugin where app_id = $1 and name = $2', [a.id, String(req.body?.name ?? '')]);
-    flash(s, r.rowCount ? 'Plug-in removed. Its files and template component stay (delete them on their own pages).' : 'No such plug-in.', r.rowCount ? 'ok' : 'error');
+    flash(s, r.rowCount ? tx('plg.removed') : tx('plg.no_such'), r.rowCount ? 'ok' : 'error');
     return back(reply, s, `${BASE}/apps/${a.id}/plugins`);
   });
 
@@ -207,6 +210,6 @@ export async function pluginRoutes(app: FastifyInstance) {
     const run = await runScripts(a, [{ name: p.name, script: p.install_sql }], s.username!);
     clearCompletions();
     await logActivity({ appId: a.id, username: s.username, event: 'plugin', ip: clientIp(req), detail: `builder: install SQL of ${p.name} ${run.ok ? 'ran' : 'failed'} (${run.results.length} statement(s))` });
-    return send(reply, s, shell(s, 'Plug-ins', crumbs(a), await page(s, a, p.name, { name: p.label, run })));
+    return send(reply, s, shell(s, tx('plg.title'), crumbs(a), await page(s, a, p.name, { name: p.label, run })));
   });
 }

package/src/builder/process-jobs.ts

@@ -1,5 +1,6 @@
 import { owner } from '../db.ts';
 import { html } from '../html.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // Page designer → a background chain process → "Jobs": the last runs of the
 // chain for every user (meta.process_job; process-jobs.ts runs them).
@@ -14,17 +15,17 @@ export async function processJobsPanel(processId: number) {
       [processId],
     )
   ).rows;
-  const off = process.env.BACKGROUND_PROCESSES === 'off' ? html`<p><b>Background processes are off on this server (BACKGROUND_PROCESSES=off).</b></p>` : '';
+  const off = process.env.BACKGROUND_PROCESSES === 'off' ? html`<p><b>${tx('pjb.off')}</b></p>` : '';
   return html`${off}${jobs.length
-    ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Job</th><th>State</th><th>By</th><th>Queued</th><th>Took</th><th>Steps</th><th>Message</th></tr></thead><tbody>
+    ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>${tx('pjb.job')}</th><th>${tx('pjb.state')}</th><th>${tx('pjb.by')}</th><th>${tx('pjb.queued')}</th><th>${tx('pjb.took')}</th><th>${tx('pjb.steps')}</th><th>${tx('pjb.message')}</th></tr></thead><tbody>
         ${jobs.map((j) => html`<tr>
-          <td data-label="Job">${j.id}</td>
-          <td data-label="State"><span class="tag${j.state === 'failed' ? ' tag-error' : ''}">${j.state}</span></td>
-          <td data-label="By">${j.app_user}</td>
-          <td data-label="Queued">${when(j.queued_at)}</td>
-          <td data-label="Took">${j.started_at && j.ended_at ? `${((new Date(j.ended_at).getTime() - new Date(j.started_at).getTime()) / 1000).toFixed(1)} s` : j.started_at ? '…' : ''}</td>
-          <td data-label="Steps">${j.steps_done}/${j.steps_total}${j.current ? ` (${j.current})` : ''}</td>
-          <td data-label="Message">${j.error ?? j.message ?? ''}</td></tr>`)}
+          <td data-label="${tx('pjb.job')}">${j.id}</td>
+          <td data-label="${tx('pjb.state')}"><span class="tag${j.state === 'failed' ? ' tag-error' : ''}">${j.state}</span></td>
+          <td data-label="${tx('pjb.by')}">${j.app_user}</td>
+          <td data-label="${tx('pjb.queued')}">${when(j.queued_at)}</td>
+          <td data-label="${tx('pjb.took')}">${j.started_at && j.ended_at ? `${((new Date(j.ended_at).getTime() - new Date(j.started_at).getTime()) / 1000).toFixed(1)} s` : j.started_at ? '…' : ''}</td>
+          <td data-label="${tx('pjb.steps')}">${j.steps_done}/${j.steps_total}${j.current ? ` (${j.current})` : ''}</td>
+          <td data-label="${tx('pjb.message')}">${j.error ?? j.message ?? ''}</td></tr>`)}
       </tbody></table></div>`
-    : html`<p class="muted">No runs yet.</p>`}`;
+    : html`<p class="muted">${tx('pjb.no_runs')}</p>`}`;
 }

package/src/builder/pwa.ts

@@ -6,6 +6,7 @@ import { html, raw } from '../html.ts';
 import { readMultipart } from '../runtime/files.ts';
 import { back, BASE, csrf, developer, flash, input, type Body, type Req } from './ui.ts';
 import type { Session } from '../session.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // App → Settings → Progressive Web App: installable, offline pages, the
 // offline form queue, the icon (src/runtime/pwa.ts serves the rest), and
@@ -36,29 +37,29 @@ export async function pwaSection(a: { id: number; alias: string; pwa: boolean; p
     html`<div class="field"><label class="check"><input type="checkbox" name="${name}" value="true"${on ? raw(' checked') : ''}> ${label}</label><small class="help">${help}</small></div>`;
   const stats = a.pwa && a.pwa_push ? await pushStats(a.id) : null;
   return html`<form method="post" action="${BASE}/apps/${a.id}/pwa" enctype="multipart/form-data">${csrf(s)}
-    ${check('pwa', 'Installable (Progressive Web App)', a.pwa, 'Phones and computers can install the app: its own icon, full screen, and the app works on with a bad or no connection.')}
+    ${check('pwa', tx('pwa.installable'), a.pwa, tx('pwa.installable_help'))}
     <div class="form-grid">
-      ${input('pwa_short_name', 'Name under the icon', a.pwa_short_name ?? '', { placeholder: 'at most 12 characters work best' })}
+      ${input('pwa_short_name', tx('pwa.short_name'), a.pwa_short_name ?? '', { placeholder: tx('pwa.short_name_ph') })}
     </div>
-    ${check('pwa_offline_pages', 'Keep visited pages on the device for offline use', a.pwa_offline_pages, 'The pages a user opened are shown when there is no connection. They contain personal data: they are removed when someone signs in or out on the device.')}
-    ${check('pwa_offline_submit', 'Keep forms sent without a connection, and send them later', a.pwa_offline_submit, 'For field work: forms (with photos) are kept on the device and sent when the connection is back, under the same user, at most once.')}
-    ${check('pwa_push', 'Push notifications', a.pwa_push, 'Users turn them on per device under My account (or with the dynamic action push_subscribe); application code sends them with meta.send_push(user, title, body, page, items) or a send_push process. On iPhone and iPad only after the app was added to the home screen. Needs PGKILN_SECRET_KEY: the key that signs them is stored encrypted.')}
-    <div class="field" data-wide><label class="label" for="f_pwa_icon">Icon (PNG, square, at least 512 × 512)</label>
-      <div class="u-row">${a.has_icon || a.pwa ? html`<img class="pwa-icon-preview" src="/a/${a.alias}/icon-192.png" alt="The app's icon" width="48" height="48">` : ''}
+    ${check('pwa_offline_pages', tx('pwa.offline_pages'), a.pwa_offline_pages, tx('pwa.offline_pages_help'))}
+    ${check('pwa_offline_submit', tx('pwa.offline_submit'), a.pwa_offline_submit, tx('pwa.offline_submit_help'))}
+    ${check('pwa_push', tx('pwa.push'), a.pwa_push, tx('pwa.push_help'))}
+    <div class="field" data-wide><label class="label" for="f_pwa_icon">${tx('pwa.icon')}</label>
+      <div class="u-row">${a.has_icon || a.pwa ? html`<img class="pwa-icon-preview" src="/a/${a.alias}/icon-192.png" alt="${tx('pwa.icon_alt')}" width="48" height="48">` : ''}
         <input type="file" id="f_pwa_icon" name="icon" accept="image/png"></div>
-      <small class="help">${a.has_icon ? html`An icon is stored. <label class="check u-inline"><input type="checkbox" name="remove_icon" value="true"> Remove it</label>` : 'Without one, the app gets a tile with its initial in the accent colour.'}</small></div>
-    <div class="buttons"><button class="btn btn-hot">Save</button></div>
+      <small class="help">${a.has_icon ? html`${tx('pwa.icon_stored')} <label class="check u-inline"><input type="checkbox" name="remove_icon" value="true"> ${tx('pwa.remove_icon')}</label>` : tx('pwa.no_icon')}</small></div>
+    <div class="buttons"><button class="btn btn-hot">${tx('common.save')}</button></div>
   </form>
   ${stats
-    ? html`<h3>Push notifications</h3>
-      <p class="muted">${stats.devices} device(s) of ${stats.users} user(s) receive notifications. Last 7 days: ${stats.sent} sent, ${stats.no_device} to users without a device, ${stats.failed} failed${stats.waiting ? `, ${stats.waiting} waiting` : ''}.</p>
+    ? html`<h3>${tx('pwa.push')}</h3>
+      <p class="muted">${tx('pwa.stats_devices', { devices: stats.devices, users: stats.users })} ${tx(stats.waiting ? 'pwa.stats_week_waiting' : 'pwa.stats_week', { sent: stats.sent, no_device: stats.no_device, failed: stats.failed, waiting: stats.waiting })}</p>
       <form method="post" action="${BASE}/apps/${a.id}/pwa/push-test" class="u-row">${csrf(s)}
-        ${input('push_user', 'Send a test notification to', s.username ?? '', { placeholder: 'user name' })}
-        <div class="buttons"><button class="btn">Send test</button></div>
+        ${input('push_user', tx('pwa.test_to'), s.username ?? '', { placeholder: tx('pwa.user_name') })}
+        <div class="buttons"><button class="btn">${tx('pwa.send_test')}</button></div>
       </form>
       <form method="post" action="${BASE}/apps/${a.id}/pwa/push-keys">${csrf(s)}
-        <div class="buttons"><button class="btn btn-danger">New keys</button></div>
-        <small class="help">Makes a new key pair (for example after the private key may have leaked). Every device stops receiving notifications until its user turns them on again.</small>
+        <div class="buttons"><button class="btn btn-danger">${tx('pwa.new_keys')}</button></div>
+        <small class="help">${tx('pwa.new_keys_help')}</small>
       </form>`
     : ''}`;
 }
@@ -83,18 +84,18 @@ export async function pwaBuilderRoutes(app: FastifyInstance) {
     if (file && file.data.length) {
       const size = file.truncated ? null : pngSize(file.data);
       if (!size) {
-        flash(s, file.truncated ? `The icon is larger than ${ICON_MAX_MB} MB.` : 'The icon must be a PNG image.', 'error');
+        flash(s, file.truncated ? tx('pwa.icon_too_large', { mb: ICON_MAX_MB }) : tx('pwa.icon_not_png'), 'error');
         return back(reply, s, target);
       }
       if (size.width !== size.height || size.width < 512) {
-        flash(s, `The icon must be square and at least 512 × 512 pixels (this one is ${size.width} × ${size.height}).`, 'error');
+        flash(s, tx('pwa.icon_size', { width: size.width, height: size.height }), 'error');
         return back(reply, s, target);
       }
       icon = file.data;
     }
     const push = b.pwa_push === 'true';
     if (push && !secretKeyConfigured()) {
-      flash(s, 'Push notifications need PGKILN_SECRET_KEY in the server\'s environment (the key that signs them is stored encrypted).', 'error');
+      flash(s, tx('pwa.push_needs_key'), 'error');
       return back(reply, s, target);
     }
     await owner.query(
@@ -103,7 +104,7 @@ export async function pwaBuilderRoutes(app: FastifyInstance) {
       [id, b.pwa === 'true', (b.pwa_short_name ?? '').trim().slice(0, 30) || null, b.pwa_offline_pages === 'true', b.pwa_offline_submit === 'true', icon ?? null, icon !== undefined, push],
     );
     if (push) await appPublicKey(Number(id));
-    flash(s, push && b.pwa !== 'true' ? 'Saved. Push notifications work only when the app is installable.' : 'Progressive Web App settings saved.');
+    flash(s, push && b.pwa !== 'true' ? tx('pwa.saved_not_installable') : tx('pwa.saved'));
     return back(reply, s, target);
   });
 
@@ -126,7 +127,7 @@ export async function pwaBuilderRoutes(app: FastifyInstance) {
       return back(reply, s, target);
     }
     const devices = (await owner.one<{ n: number }>('select count(*)::int as n from meta.push_subscription where app_id = $1 and lower(username) = lower($2)', [a.id, user]))!.n;
-    flash(s, devices ? `Test notification queued for ${devices} device(s) of ${user}.` : `${user} has not turned on notifications on any device (My account → Notifications).`, devices ? 'ok' : 'error');
+    flash(s, devices ? tx('pwa.test_queued', { n: devices, user }) : tx('pwa.test_no_device', { user }), devices ? 'ok' : 'error');
     return back(reply, s, target);
   });
 
@@ -136,7 +137,7 @@ export async function pwaBuilderRoutes(app: FastifyInstance) {
     const id = req.params.id;
     if (!/^\d+$/.test(id) || !(await owner.one('select 1 from meta.app where id = $1', [id]))) return reply.code(404).send('Not found');
     await newAppKeys(Number(id));
-    flash(s, 'New keys made. Users have to turn notifications on again on each device.');
+    flash(s, tx('pwa.keys_made'));
     return back(reply, s, `${BASE}/apps/${id}/settings?tab=pwa`);
   });
 }