pgkiln 0.84.0 → 0.85.0

package/src/builder/search.ts

@@ -4,6 +4,7 @@ import { html, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { COMPONENTS, type FieldKind } from './components.ts';
 import { appHeader, BASE, designerUrl, developer, region, send, shell, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // App Builder → Search and "Where used": every component of an application
 // (pages, regions, items, buttons, dynamic actions, validations, processes
@@ -184,8 +185,8 @@ export function targetOf(kind: string, row: any): Target | null {
 
 function hitList(hits: Hit[], showPage = true) {
   return html`<ul class="hits">${hits.map((h) => html`<li>
-      <a href="${h.entry.url}">${icon(h.entry.icon)}<span>${h.entry.kindLabel}: ${h.entry.label}</span></a>
-      ${showPage && h.entry.pageNo !== null && h.entry.kind !== 'page' ? html`<span class="tag">page ${h.entry.pageNo}</span>` : ''}
+      <a href="${h.entry.url}">${icon(h.entry.icon)}<span>${tx.dyn(`comp.${h.entry.kind}`, h.entry.kindLabel)}: ${h.entry.label}</span></a>
+      ${showPage && h.entry.pageNo !== null && h.entry.kind !== 'page' ? html`<span class="tag">${tx('srch.page_tag', { n: h.entry.pageNo })}</span>` : ''}
       <span class="muted">${h.field}</span>
       <code class="hit-snippet">${h.snippet}</code>
     </li>`)}</ul>`;
@@ -197,9 +198,9 @@ export async function usedInPanel(appId: number, kind: string, row: any): Promis
   if (!target) return '';
   const hits = whereUsed(await appEntries(appId), target, { kind, id: row.id });
   return html`<section class="used-in" aria-labelledby="used-in-${kind}-${row.id}">
-    <h3 id="used-in-${kind}-${row.id}">Used in (${hits.length})</h3>
-    ${hits.length ? hitList(hits) : html`<p class="muted">Not referenced anywhere in this application${target.type === 'item' ? ' (outside its own definition)' : ''}.</p>`}
-    ${target.type === 'item' || target.type === 'page' ? html`<p class="muted small">Found in SQL, substitutions, links and settings of this application. Database code (views, functions, policies) isn't searched.</p>` : ''}
+    <h3 id="used-in-${kind}-${row.id}">${tx('srch.used_in', { n: hits.length })}</h3>
+    ${hits.length ? hitList(hits) : html`<p class="muted">${tx(target.type === 'item' ? 'srch.not_referenced_item' : 'srch.not_referenced')}</p>`}
+    ${target.type === 'item' || target.type === 'page' ? html`<p class="muted small">${tx('srch.found_in')}</p>` : ''}
   </section>`;
 }
 
@@ -214,16 +215,16 @@ export async function searchRoutes(app: FastifyInstance) {
     const groups = new Map<string, Hit[]>();
     for (const h of hits) groups.set(h.entry.kindLabel, [...(groups.get(h.entry.kindLabel) ?? []), h]);
     const main = html`${appHeader(a, 'search', s)}
-      ${region('Search', html`<form method="get" action="${BASE}/apps/${a.id}/search" class="search u-mwnone" role="search">
-          <input type="search" name="q" value="${q}" placeholder="Text in names, titles, SQL, settings…" aria-label="Search the application" autofocus>
-          <button class="btn btn-hot">Search</button></form>
+      ${region(tx('common.search'), html`<form method="get" action="${BASE}/apps/${a.id}/search" class="search u-mwnone" role="search">
+          <input type="search" name="q" value="${q}" placeholder="${tx('srch.placeholder')}" aria-label="${tx('srch.aria')}" autofocus>
+          <button class="btn btn-hot">${tx('common.search')}</button></form>
         ${q.trim()
           ? hits.length
-            ? html`<p class="muted">${hits.length}${hits.length >= 500 ? '+' : ''} matches</p>
-                ${[...groups].map(([label, list]) => html`<h3>${label} (${list.length})</h3>${hitList(list)}`)}`
-            : html`<p class="muted">Nothing found for “${q}”.</p>`
-          : html`<p class="muted">Searches every page and component of ${a.name}: names, titles, SQL, conditions, settings and help texts.</p>`}`)}`;
-    return send(reply, s, shell(s, `Search · ${a.name}`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Search']], main));
+            ? html`<p class="muted">${tx(hits.length >= 500 ? 'srch.matches_more' : 'srch.matches', { n: hits.length })}</p>
+                ${[...groups].map(([label, list]) => html`<h3>${tx.dyn(`comp.${list[0].entry.kind}`, label)} (${list.length})</h3>${hitList(list)}`)}`
+            : html`<p class="muted">${tx('srch.nothing', { q })}</p>`
+          : html`<p class="muted">${tx('srch.intro', { name: a.name })}</p>`}`)}`;
+    return send(reply, s, shell(s, tx('srch.page_title', { name: a.name }), [[tx('rail.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('common.search')]], main));
   });
 }
 

package/src/builder/static-files.ts

@@ -8,6 +8,7 @@ import type { Session } from '../session.ts';
 import { WORKSPACE_FILES } from '../metadata.ts';
 import { appOr404 } from './forms.ts';
 import { appHeader, back, BASE, csrf, developer, flash, input, region, send, shell, type Body, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // Shared Components → Static application files (APEX: Static Application
 // Files): upload, write and remove an application's JavaScript, CSS, images
@@ -56,48 +57,46 @@ async function page(s: Session, a: any, query: Record<string, string | undefined
   const everyPage = new Set<string>(a.static_includes ?? []);
 
   const editor = editName || creating
-    ? region(editName ? `Edit ${editName}` : 'New file', html`<form method="post" action="${base}/save">${csrf(s)}
+    ? region(editName ? tx('sf.edit_title', { name: editName }) : tx('sf.new_file'), html`<form method="post" action="${base}/save">${csrf(s)}
         ${editName ? html`<input type="hidden" name="original" value="${editName}">` : ''}
-        <div class="form-grid">${input('name', 'File name', editName ?? '', { required: true, placeholder: 'app.js', help: 'Letters, digits, _, - and . (e.g. app.js, styles.css, data.json).' })}</div>
-        <div class="field" data-wide><label class="label" for="f_content">Content</label>
+        <div class="form-grid">${input('name', tx('sf.file_name'), editName ?? '', { required: true, placeholder: 'app.js', help: tx('sf.file_name_help') })}</div>
+        <div class="field" data-wide><label class="label" for="f_content">${tx('sf.content')}</label>
           <textarea id="f_content" name="content" class="code" rows="18" spellcheck="false">${content}</textarea>
-          <small class="help">JavaScript registers functions for the dynamic action "Execute JavaScript" with <code>pgkiln.actions.register('name', (da) =&gt; { … })</code>; it can also use <code>pgkiln.getValue</code>, <code>setValue</code>, <code>showSuccess</code> and <code>showError</code>. No inline scripts: everything runs from these files.</small></div>
-        <div class="buttons"><a class="btn" href="${base}">Cancel</a><button class="btn btn-hot">${icon('check')} Save</button></div>
+          <small class="help">${tx.code('sf.content_help')}</small></div>
+        <div class="buttons"><a class="btn" href="${base}">${tx('common.cancel')}</a><button class="btn btn-hot">${icon('check')} ${tx('common.save')}</button></div>
       </form>`)
     : '';
 
   return html`${appHeader(a, 'shared', s)}
     ${editor}
-    ${region('Static application files', html`<p class="muted u-mt0">JavaScript, CSS, JSON, images and fonts of this application, served at
-        <code>/a/${a.alias}/static/<i>name</i></code> and exported with it. Pages load the scripts and stylesheets chosen below
-        (and those a page adds in its properties), so code runs from files, never inline. Up to ${size(STATIC_MAX)} per file; no HTML.</p>
+    ${region(tx('sf.title'), html`<p class="muted u-mt0">${tx.rich('sf.intro', { path: html`<code>/a/${a.alias}/static/<i>name</i></code>`, max: size(STATIC_MAX) })}</p>
       ${files.length
-        ? html`<div class="table-wrap"><table class="report"><caption class="sr-only">Static application files</caption>
-            <thead><tr><th scope="col">Name</th><th scope="col">Type</th><th scope="col" class="num">Size</th><th scope="col">Loaded by</th><th scope="col">Changed</th><th scope="col"><span class="sr-only">Actions</span></th></tr></thead>
+        ? html`<div class="table-wrap"><table class="report"><caption class="sr-only">${tx('sf.title')}</caption>
+            <thead><tr><th scope="col">${tx('sf.name')}</th><th scope="col">${tx('sf.type')}</th><th scope="col" class="num">${tx('sf.size')}</th><th scope="col">${tx('sf.loaded_by')}</th><th scope="col">${tx('sf.changed')}</th><th scope="col"><span class="sr-only">${tx('sf.actions')}</span></th></tr></thead>
             <tbody>${files.map((f) => html`<tr>
               <td><a href="/a/${a.alias}/static/${encodeURIComponent(f.name)}" target="_blank" rel="noopener">${f.name}</a></td>
               <td>${f.mime}</td><td class="num">${size(Number(f.bytes))}</td>
-              <td>${includable(f.name) ? [everyPage.has(f.name) ? 'every page' : '', pagesOf(f.name).length ? `page ${pagesOf(f.name).join(', ')}` : ''].filter(Boolean).join('; ') || html`<span class="muted">-</span>` : ''}</td>
+              <td>${includable(f.name) ? [everyPage.has(f.name) ? tx('sf.every_page') : '', pagesOf(f.name).length ? tx('sf.pages', { pages: pagesOf(f.name).join(', ') }) : ''].filter(Boolean).join('; ') || html`<span class="muted">-</span>` : ''}</td>
               <td>${f.changed}</td>
-              <td class="nowrap">${editable(f.name) ? html`<a class="btn btn-small" href="${base}?edit=${encodeURIComponent(f.name)}">Edit</a> ` : ''}
+              <td class="nowrap">${editable(f.name) ? html`<a class="btn btn-small" href="${base}?edit=${encodeURIComponent(f.name)}">${tx('sf.edit')}</a> ` : ''}
                 <form method="post" action="${base}/delete" class="inline">${csrf(s)}<input type="hidden" name="name" value="${f.name}">
-                  <button class="btn btn-small btn-danger" data-confirm="Delete ${f.name}?" aria-label="Delete ${f.name}">${icon('trash')}</button></form></td>
+                  <button class="btn btn-small btn-danger" data-confirm="${tx('sf.delete_confirm', { name: f.name })}" aria-label="${tx('sf.delete_name', { name: f.name })}">${icon('trash')}</button></form></td>
             </tr>`)}</tbody></table></div>`
-        : html`<p class="muted">No files yet.</p>`}
-      <div class="buttons u-mt1"><a class="btn" href="${base}?new=1">${icon('plus')} New file</a></div>
+        : html`<p class="muted">${tx('sf.no_files')}</p>`}
+      <div class="buttons u-mt1"><a class="btn" href="${base}?new=1">${icon('plus')} ${tx('sf.new_file')}</a></div>
       <form method="post" action="${base}/upload" enctype="multipart/form-data" class="search u-mwnone u-mt1">${csrf(s)}
-        <input type="file" name="file" multiple aria-label="Files to upload" accept="${Object.keys(STATIC_TYPES).map((x) => `.${x}`).join(',')}">
-        <button class="btn">${icon('upload')} Upload</button>
-        <small class="help">A file with the same name is replaced.</small>
+        <input type="file" name="file" multiple aria-label="${tx('sf.files_to_upload')}" accept="${Object.keys(STATIC_TYPES).map((x) => `.${x}`).join(',')}">
+        <button class="btn">${icon('upload')} ${tx('sf.upload')}</button>
+        <small class="help">${tx('sf.replaced')}</small>
       </form>`)}
-    ${region('Every page loads', html`<form method="post" action="${base}/includes">${csrf(s)}
-        <div class="form-grid">${input('includes', 'Scripts and stylesheets, in order', (a.static_includes ?? []).join(', '), { placeholder: 'e.g. library.js, app.js, app-styles.css', help: `Up to ${MAX_INCLUDES} .js and .css files, loaded in this order after pgkiln's own (scripts deferred). #WORKSPACE_FILES#name is a static workspace file (Workspace utilities). A page adds its own files under Page → Appearance.` })}</div>
-        <div class="buttons"><button class="btn btn-hot">Save</button></div>
+    ${region(tx('sf.every_page_loads'), html`<form method="post" action="${base}/includes">${csrf(s)}
+        <div class="form-grid">${input('includes', tx('sf.includes'), (a.static_includes ?? []).join(', '), { placeholder: tx('sf.includes_ph'), help: tx('sf.includes_help', { max: MAX_INCLUDES }) })}</div>
+        <div class="buttons"><button class="btn btn-hot">${tx('common.save')}</button></div>
       </form>`)}`;
 }
 
 export async function staticFileBuilderRoutes(app: FastifyInstance) {
-  const title = (a: any) => [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`], ['Static application files']] as [string, string?][];
+  const title = (a: any) => [[tx('rail.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('app.tab.shared'), `${BASE}/apps/${a.id}/shared`], [tx('sf.title')]] as [string, string?][];
   const find = async (id: string) => (/^\d+$/.test(id) ? appOr404(id) : undefined);
 
   app.get(`${BASE}/apps/:id/static-files`, async (req: Req, reply) => {
@@ -105,7 +104,7 @@ export async function staticFileBuilderRoutes(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, 'Static application files', title(a), await page(s, a, req.query ?? {})));
+    return send(reply, s, shell(s, tx('sf.title'), title(a), await page(s, a, req.query ?? {})));
   });
 
   app.post(`${BASE}/apps/:id/static-files/upload`, async (req: Req, reply) => {
@@ -121,15 +120,15 @@ export async function staticFileBuilderRoutes(app: FastifyInstance) {
     if (!a) return reply.code(404).send('Not found');
     const target = `${BASE}/apps/${a.id}/static-files`;
     if (!uploads.length) {
-      flash(s, 'Choose one or more files.', 'error');
+      flash(s, tx('sf.choose_files'), 'error');
       return back(reply, s, target);
     }
     const saved: string[] = [];
     for (const u of uploads) {
       const name = u.filename.split(/[\\/]/).pop()!.trim();
       const type = staticType(name);
-      if (u.truncated) flash(s, `${name} is larger than ${size(STATIC_MAX)}.`, 'error');
-      else if (!type) flash(s, `${name}: not an allowed name or type (letters, digits, _, - and .; ${Object.keys(STATIC_TYPES).join(', ')}).`, 'error');
+      if (u.truncated) flash(s, tx('sf.too_large_name', { name, max: size(STATIC_MAX) }), 'error');
+      else if (!type) flash(s, tx('sf.bad_type', { name, types: Object.keys(STATIC_TYPES).join(', ') }), 'error');
       else {
         await owner.query(
           `insert into meta.static_file (app_id, name, mime, content) values ($1, $2, $3, $4)
@@ -138,7 +137,7 @@ export async function staticFileBuilderRoutes(app: FastifyInstance) {
         saved.push(name);
       }
     }
-    if (saved.length) flash(s, `Uploaded: ${saved.join(', ')}.`);
+    if (saved.length) flash(s, tx('sf.uploaded', { names: saved.join(', ') }));
     return back(reply, s, target);
   });
 
@@ -154,11 +153,11 @@ export async function staticFileBuilderRoutes(app: FastifyInstance) {
     const content = Buffer.from(String(b.content ?? '').replace(/\r\n/g, '\n'), 'utf8');
     const base = `${BASE}/apps/${a.id}/static-files`;
     if (!type || !editable(name)) {
-      flash(s, 'The name must end in a text type (.js, .css, .json, .txt, .csv, .md, .map) and use letters, digits, _, - and . only.', 'error');
+      flash(s, tx('sf.bad_text_name'), 'error');
       return back(reply, s, original ? `${base}?edit=${encodeURIComponent(original)}` : `${base}?new=1`);
     }
     if (content.length > STATIC_MAX) {
-      flash(s, `The file is larger than ${size(STATIC_MAX)}.`, 'error');
+      flash(s, tx('sf.too_large', { max: size(STATIC_MAX) }), 'error');
       return back(reply, s, base);
     }
     try {
@@ -172,7 +171,7 @@ export async function staticFileBuilderRoutes(app: FastifyInstance) {
           `insert into meta.static_file (app_id, name, mime, content) values ($1, $2, $3, $4)
            on conflict (app_id, name) do update set mime = excluded.mime, content = excluded.content, updated_at = now()`,
           [a.id, name, type, content]);
-      flash(s, `${name} saved.`);
+      flash(s, tx('sf.saved_name', { name }));
       return back(reply, s, `${base}?edit=${encodeURIComponent(name)}`);
     } catch (e) {
       flash(s, (e as Error).message, 'error');
@@ -187,7 +186,7 @@ export async function staticFileBuilderRoutes(app: FastifyInstance) {
     if (!a) return reply.code(404).send('Not found');
     const name = String(req.body?.name ?? '');
     const r = await owner.query('delete from meta.static_file where app_id = $1 and name = $2', [a.id, name]);
-    flash(s, r.rowCount ? `${name} deleted.` : 'No such file.', r.rowCount ? 'ok' : 'error');
+    flash(s, r.rowCount ? tx('sf.deleted', { name }) : tx('sf.no_such_file'), r.rowCount ? 'ok' : 'error');
     return back(reply, s, `${BASE}/apps/${a.id}/static-files`);
   });
 
@@ -202,7 +201,7 @@ export async function staticFileBuilderRoutes(app: FastifyInstance) {
       `select n from unnest($2::text[]) n
         where not exists (select 1 from meta.static_file f where f.app_id = $1 and f.name = n)
           and not exists (select 1 from meta.workspace_file w where w.workspace_id = meta.app_workspace($1) and $3 || w.name = n)`, [a.id, names, WORKSPACE_FILES])).rows.map((r) => r.n);
-    flash(s, missing.length ? `Saved. Not uploaded yet (left out until they are): ${missing.join(', ')}.` : 'Saved.');
+    flash(s, missing.length ? tx('sf.saved_missing', { names: missing.join(', ') }) : tx('sf.saved'));
     return back(reply, s, `${BASE}/apps/${a.id}/static-files`);
   });
 }

package/src/builder/subscriptions.ts

@@ -8,6 +8,7 @@ import {
   SubscriptionError, subscribeGroup, unsubscribe, type AppType, type Kind,
 } from '../subscriptions.ts';
 import { appHeader, back, BASE, csrf, developer, flash, region, send, shell, type Req } from './ui.ts';
+import { scopedTx as tx } from './i18n.ts';
 
 // Shared Components → Subscriptions (APEX: subscribed shared components; 26.1
 // theme and library applications). An application subscribes to a component
@@ -26,7 +27,9 @@ const TYPE_HELP: Record<AppType, string> = {
   reporting: 'Made by App Builder → Data Reporter on datasets of the workspace: its users build, publish and share reports.',
 };
 
-const what = (kind: Kind, name: string) => (kind === 'theme' ? 'Theme' : `${KINDS[kind].label} ${name}`);
+const kindLabel = (kind: Kind) => tx.dyn(`sub.k.${kind}`, KINDS[kind].label);
+const typeLabel = (t: AppType) => tx.dyn(`st.type.${t}`, APP_TYPE_LABELS[t] ?? t);
+const what = (kind: Kind, name: string) => (kind === 'theme' ? tx('sub.theme') : tx('sub.what', { kind: kindLabel(kind), name }));
 
 /** Another developer's application lock (page 0): such applications are not changed by publishing. */
 const lockedByOther = (username: string) => async (appId: number) =>
@@ -40,16 +43,15 @@ export async function subscriptionNote(appId: number, kind: string, row: any, s:
   const subscribers = (await owner.one<{ n: number }>('select count(*)::int as n from meta.subscription where master_app_id = $1 and kind = $2 and name = $3', [appId, kind, name]))!.n;
   if (!sub && !subscribers) return '';
   const hidden = html`<input type="hidden" name="kind" value="${kind}"><input type="hidden" name="name" value="${name}">`;
-  return html`<section class="used-in"><h3>Subscription</h3>
+  return html`<section class="used-in"><h3>${tx('sub.subscription')}</h3>
     ${sub
-      ? html`<p class="u-mt0">Subscribed from <a href="${BASE}/apps/${sub.master_app_id}/subscriptions">${sub.master_name}</a>${sub.refreshed_at ? `, refreshed ${sub.refreshed_at.slice(0, 16)}` : ''}.
-          Changes made here are overwritten by the next refresh.</p>
-          <form method="post" action="${BASE}/apps/${appId}/subscriptions/refresh" class="u-inline">${csrf(s)}${hidden}<button class="btn btn-sm">Refresh from ${sub.master_name}</button></form>`
+      ? html`<p class="u-mt0">${((m) => (sub.refreshed_at ? tx.rich('sub.subscribed_from_at', { master: m, at: sub.refreshed_at.slice(0, 16) }) : tx.rich('sub.subscribed_from', { master: m })))(html`<a href="${BASE}/apps/${sub.master_app_id}/subscriptions">${sub.master_name}</a>`)}</p>
+          <form method="post" action="${BASE}/apps/${appId}/subscriptions/refresh" class="u-inline">${csrf(s)}${hidden}<button class="btn btn-sm">${tx('sub.refresh_from', { master: sub.master_name })}</button></form>`
       : ''}
     ${subscribers
-      ? html`<p>${subscribers} application${subscribers === 1 ? ' subscribes' : 's subscribe'} to this ${KINDS[kind].label.toLowerCase()}.</p>
-          <form method="post" action="${BASE}/apps/${appId}/subscriptions/publish" class="u-inline">${csrf(s)}${hidden}<button class="btn btn-sm">Publish to subscribers</button></form>
-          <a class="btn btn-sm" href="${BASE}/apps/${appId}/subscriptions">Subscribers…</a>`
+      ? html`<p>${subscribers === 1 ? tx('sub.subscribers_1', { kind: kindLabel(kind).toLowerCase() }) : tx('sub.subscribers_n', { n: subscribers, kind: kindLabel(kind).toLowerCase() })}</p>
+          <form method="post" action="${BASE}/apps/${appId}/subscriptions/publish" class="u-inline">${csrf(s)}${hidden}<button class="btn btn-sm">${tx('sub.publish_to_subscribers')}</button></form>
+          <a class="btn btn-sm" href="${BASE}/apps/${appId}/subscriptions">${tx('sub.subscribers')}</a>`
       : ''}
   </section>`;
 }
@@ -64,61 +66,59 @@ export async function subscriptionRoutes(app: FastifyInstance) {
     const sync = await Promise.all(subs.map((x) => inSync(x)));
     const subSync = await Promise.all(subscribers.map((x) => inSync(x)));
     const hidden = (kind: string, name: string) => html`<input type="hidden" name="kind" value="${kind}"><input type="hidden" name="name" value="${name}">`;
-    const state = (ok: boolean) => (ok ? html`<span class="badge">in sync</span>` : html`<span class="badge badge-warn">differs</span>`);
+    const state = (ok: boolean) => (ok ? html`<span class="badge">${tx('sub.in_sync')}</span>` : html`<span class="badge badge-warn">differs</span>`);
     const groups = new Map<number, typeof offered>();
     for (const o of offered) groups.set(o.master.id, [...(groups.get(o.master.id) ?? []), o]);
     const published = [...new Map(subscribers.map((x) => [`${x.kind}|${x.name}`, x])).values()];
 
     const main = html`${appHeader(a, 'shared', s)}<div class="ide-body">
-      ${region('Application type', html`<p class="u-mt0"><b>${APP_TYPE_LABELS[a.app_type as AppType] ?? a.app_type}</b>: ${TYPE_HELP[a.app_type as AppType] ?? ''}
-          Change it under <a href="${BASE}/apps/${a.id}/settings">Settings</a>.</p>`)}
-      ${region('Subscriptions', html`
-        <p class="muted u-mt0">Components of this application that are copies of a component in a theme or library application.
-          Refreshing copies the master's definition again, replacing changes made here.</p>
+      ${region(tx('sub.application_type'), html`<p class="u-mt0">${tx.rich('sub.type_line', { type: html`<b>${typeLabel(a.app_type as AppType)}</b>`, help: tx.dyn(`sub.th.${a.app_type}`, TYPE_HELP[a.app_type as AppType] ?? ''), settings: html`<a href="${BASE}/apps/${a.id}/settings">${tx('sub.settings')}</a>` })}</p>`)}
+      ${region(tx('sub.subscriptions'), html`
+        <p class="muted u-mt0">${tx('sub.components_of_this_application_that')}</p>
         ${subs.length
-          ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Component</th><th>From</th><th>Refreshed</th><th>State</th><th>Actions</th></tr></thead><tbody>
+          ? html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('sub.component')}</th><th>${tx('sub.from')}</th><th>${tx('sub.refreshed')}</th><th>${tx('sub.state')}</th><th>${tx('sub.actions')}</th></tr></thead><tbody>
               ${subs.map((x, i) => html`<tr><td>${what(x.kind, x.name)}</td><td><a href="${BASE}/apps/${x.master_app_id}/subscriptions">${x.master_name}</a></td>
                 <td>${x.refreshed_at ? x.refreshed_at.slice(0, 16) : '—'}</td><td>${state(sync[i])}</td>
-                <td><form method="post" action="${BASE}/apps/${a.id}/subscriptions/refresh" class="u-inline">${csrf(s)}${hidden(x.kind, x.name)}<button class="btn btn-sm">Refresh</button></form>
-                  <form method="post" action="${BASE}/apps/${a.id}/subscriptions/unsubscribe" class="u-inline">${csrf(s)}${hidden(x.kind, x.name)}<button class="btn btn-sm" data-confirm="Unsubscribe? The component stays as it is.">Unsubscribe</button></form></td></tr>`)}
+                <td><form method="post" action="${BASE}/apps/${a.id}/subscriptions/refresh" class="u-inline">${csrf(s)}${hidden(x.kind, x.name)}<button class="btn btn-sm">${tx('sub.refresh')}</button></form>
+                  <form method="post" action="${BASE}/apps/${a.id}/subscriptions/unsubscribe" class="u-inline">${csrf(s)}${hidden(x.kind, x.name)}<button class="btn btn-sm" data-confirm="${tx('sub.unsubscribe_the_component_stays_as')}">${tx('sub.unsubscribe')}</button></form></td></tr>`)}
             </tbody></table></div>
-            <form method="post" action="${BASE}/apps/${a.id}/subscriptions/refresh">${csrf(s)}<div class="buttons"><button class="btn">Refresh all</button></div></form>`
-          : html`<p class="muted">No subscriptions.</p>`}
-        <h3>Subscribe</h3>
+            <form method="post" action="${BASE}/apps/${a.id}/subscriptions/refresh">${csrf(s)}<div class="buttons"><button class="btn">${tx('sub.refresh_all')}</button></div></form>`
+          : html`<p class="muted">${tx('sub.no_subscriptions')}</p>`}
+        <h3>${tx('sub.subscribe')}</h3>
         ${offered.length
           ? html`<form method="post" action="${BASE}/apps/${a.id}/subscriptions">${csrf(s)}
-              <div class="field"><label class="label" for="f_component">Component</label>
-                <select id="f_component" name="component" required><option value="">- choose -</option>
-                  ${[...groups.values()].map((list) => html`<optgroup label="${list[0].master.name} (${APP_TYPE_LABELS[list[0].master.app_type]})">
+              <div class="field"><label class="label" for="f_component">${tx('sub.component')}</label>
+                <select id="f_component" name="component" required><option value="">${tx('sub.choose_dash')}</option>
+                  ${[...groups.values()].map((list) => html`<optgroup label="${list[0].master.name} (${typeLabel(list[0].master.app_type)})">
                     ${list.map((o) => html`<option value="${o.master.id}|${o.kind}|${o.name}">${what(o.kind, o.name)}</option>`)}</optgroup>`)}
                 </select>
-                <small class="help">The component is copied now. A component of this application with the same name is replaced.</small></div>
-              <div class="buttons"><button class="btn btn-hot">Subscribe</button></div></form>`
-          : html`<p class="muted">No theme or library applications offer components. Set an application's type under its Settings.</p>`}
+                <small class="help">${tx('sub.the_component_is_copied_now')}</small></div>
+              <div class="buttons"><button class="btn btn-hot">${tx('sub.subscribe')}</button></div></form>`
+          : html`<p class="muted">${tx('sub.no_theme_or_library_applications')}</p>`}
         ${groupList.length
-          ? html`<h3>Subscribe to a component group</h3>
+          ? html`<h3>${tx('sub.subscribe_to_a_component_group')}</h3>
             <form method="post" action="${BASE}/apps/${a.id}/subscriptions/group">${csrf(s)}
-              <div class="field"><label class="label" for="f_group">Component group</label>
-                <select id="f_group" name="group" required><option value="">- choose -</option>
+              <div class="field"><label class="label" for="f_group">${tx('sub.component_group')}</label>
+                <select id="f_group" name="group" required><option value="">${tx('sub.choose_dash')}</option>
                   ${groupList.map((g) => html`<option value="${g.master_id}|${g.name}">${g.master_name}: ${g.name} (${g.members.length})</option>`)}
                 </select>
-                <small class="help">Every component of the group is copied now and subscribed (Shared Components → Component Groups of a theme or library application).</small></div>
-              <div class="buttons"><button class="btn btn-hot">Subscribe to the group</button></div></form>`
+                <small class="help">${tx('sub.every_component_of_the_group')}</small></div>
+              <div class="buttons"><button class="btn btn-hot">${tx('sub.subscribe_to_the_group')}</button></div></form>`
           : ''}`)}
       ${a.app_type === 'theme' || a.app_type === 'library' || subscribers.length
-        ? region('Subscribers', subscribers.length
-            ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Component</th><th>Application</th><th>Refreshed</th><th>State</th></tr></thead><tbody>
+        ? region(tx('sub.subscribers_2'), subscribers.length
+            ? html`<div class="table-wrap"><table class="report"><thead><tr><th>${tx('sub.component')}</th><th>${tx('sub.application')}</th><th>${tx('sub.refreshed')}</th><th>${tx('sub.state')}</th></tr></thead><tbody>
                 ${subscribers.map((x, i) => html`<tr><td>${what(x.kind, x.name)}</td><td><a href="${BASE}/apps/${x.app_id}/subscriptions">${x.app_name}</a></td>
                   <td>${x.refreshed_at ? x.refreshed_at.slice(0, 16) : '—'}</td><td>${state(subSync[i])}</td></tr>`)}
               </tbody></table></div>
-              <h3>Publish</h3>
-              <p class="muted u-mt0">Publishing refreshes every subscriber of a component with this application's version. Applications locked by another developer are skipped.</p>
+              <h3>${tx('sub.publish')}</h3>
+              <p class="muted u-mt0">${tx('sub.publishing_refreshes_every_subscriber_of')}</p>
               <div class="buttons publish-buttons">${published.map((x) => html`<form method="post" action="${BASE}/apps/${a.id}/subscriptions/publish" class="u-inline">${csrf(s)}${hidden(x.kind, x.name)}
                 <button class="btn btn-sm">${icon('upload')} ${what(x.kind, x.name)}</button></form>`)}</div>`
-            : html`<p class="muted">No application subscribes to this application's components yet.</p>`)
+            : html`<p class="muted">${tx('sub.no_application_subscribes_to_this')}</p>`)
         : ''}
     </div>`;
-    return send(reply, s, shell(s, `${a.name} subscriptions`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`], ['Subscriptions']], main));
+    return send(reply, s, shell(s, tx('sub.title', { app: a.name }), [[tx('sub.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('sub.shared_components'), `${BASE}/apps/${a.id}/shared`], [tx('sub.subscriptions')]], main));
   });
 
   const target = (id: number) => `${BASE}/apps/${id}/subscriptions`;
@@ -142,10 +142,10 @@ export async function subscriptionRoutes(app: FastifyInstance) {
     const v = String(req.body?.component ?? '');
     const m = /^(\d{1,9})\|([a-z_]+)\|(.*)$/s.exec(v);
     return handle(req, reply, s, a.id, async () => {
-      if (!m) throw new SubscriptionError('Choose a component.');
+      if (!m) throw new SubscriptionError(tx('sub.choose_component'));
       await subscribe(a.id, Number(m[1]), m[2], m[3], s.username!);
       await logActivity({ appId: a.id, username: s.username, event: 'subscription', ip: clientIp(req), detail: `subscribed ${m[2]} ${m[3]} from application ${m[1]}` });
-      return `Subscribed: ${isKind(m[2]) ? what(m[2], m[3]) : m[2]} copied.`;
+      return tx('sub.subscribed', { what: isKind(m[2]) ? what(m[2], m[3]) : m[2] });
     });
   });
 
@@ -157,11 +157,12 @@ export async function subscriptionRoutes(app: FastifyInstance) {
     if (!a) return reply.code(404).send('Not found');
     const m = /^(\d{1,9})\|(.{1,60})$/s.exec(String(req.body?.group ?? ''));
     return handle(req, reply, s, a.id, async () => {
-      if (!m) throw new SubscriptionError('Choose a component group.');
-      if (!(await groupsOffered(a.id)).some((g) => g.master_id === Number(m[1]) && g.name === m[2])) throw new SubscriptionError('Choose a component group.');
+      if (!m) throw new SubscriptionError(tx('sub.choose_group'));
+      if (!(await groupsOffered(a.id)).some((g) => g.master_id === Number(m[1]) && g.name === m[2])) throw new SubscriptionError(tx('sub.choose_group'));
       const { done, skipped } = await subscribeGroup(a.id, Number(m[1]), m[2], s.username!);
       await logActivity({ appId: a.id, username: s.username, event: 'subscription', ip: clientIp(req), detail: `subscribed component group ${m[2]} from application ${m[1]}: ${done.join(', ')}` });
-      return `Subscribed to ${m[2]}: ${done.length} component${done.length === 1 ? '' : 's'} copied${skipped.length ? `; skipped ${skipped.join(', ')}` : ''}.`;
+      const one = done.length === 1;
+      return skipped.length ? tx(one ? 'sub.subscribed_group_skipped_1' : 'sub.subscribed_group_skipped', { group: m[2], n: done.length, skipped: skipped.join(', ') }) : tx(one ? 'sub.subscribed_group_1' : 'sub.subscribed_group', { group: m[2], n: done.length });
     });
   });
 
@@ -185,7 +186,7 @@ export async function subscriptionRoutes(app: FastifyInstance) {
     const a = await appRow(req.params.id);
     if (!a) return reply.code(404).send('Not found');
     return handle(req, reply, s, a.id, async () => {
-      if (!(await unsubscribe(a.id, String(req.body?.kind ?? ''), String(req.body?.name ?? '')))) throw new SubscriptionError('Not subscribed.');
+      if (!(await unsubscribe(a.id, String(req.body?.kind ?? ''), String(req.body?.name ?? '')))) throw new SubscriptionError(tx('sub.not_subscribed'));
       return 'Unsubscribed: the component stays as it is.';
     });
   });
@@ -199,8 +200,9 @@ export async function subscriptionRoutes(app: FastifyInstance) {
     return handle(req, reply, s, a.id, async () => {
       const r = await publish(a.id, kind, name, s.username!, lockedByOther(s.username!));
       await logActivity({ appId: a.id, username: s.username, event: 'subscription', ip: clientIp(req), detail: `published ${kind} ${name} to ${r.done.length} applications${r.skipped.length ? `, skipped locked ${r.skipped.join(', ')}` : ''}` });
-      if (!r.done.length && !r.skipped.length) throw new SubscriptionError('No application subscribes to it.');
-      return `Published to ${r.done.length} application${r.done.length === 1 ? '' : 's'}${r.skipped.length ? `; ${r.skipped.length} skipped (locked by another developer)` : ''}.`;
+      if (!r.done.length && !r.skipped.length) throw new SubscriptionError(tx('sub.no_subscriber'));
+      const one = r.done.length === 1;
+      return r.skipped.length ? tx(one ? 'sub.published_skipped_1' : 'sub.published_skipped', { n: r.done.length, skipped: r.skipped.length }) : tx(one ? 'sub.published_1' : 'sub.published', { n: r.done.length });
     });
   });
 }

package/src/builder/supporting.ts

@@ -1,10 +1,11 @@
 import type { FastifyInstance } from 'fastify';
 import { splitStatements } from '../binds.ts';
 import { appTx, owner, type Client } from '../db.ts';
-import { html, type Raw } from '../html.ts';
+import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { clientIp, logActivity, type Session } from '../session.ts';
 import { clearCompletions } from './code-editor.ts';
+import { scopedTx as tx, type BuilderKey } from './i18n.ts';
 import { appHeader, BASE, csrf, developer, region, send, shell, type Req } from './ui.ts';
 import { appOr404 } from './forms.ts';
 
@@ -58,7 +59,7 @@ export async function runScripts(app: { id: number; alias: string; db_role: stri
             const res = await c.query({ text: sql, rowMode: 'array' });
             results.push({
               script: s.name, sql, ok: true,
-              message: `${res.command ?? 'Statement'}${res.rowCount !== null && res.rowCount !== undefined ? `, ${res.rowCount} row(s)` : ''}`,
+              message: res.rowCount !== null && res.rowCount !== undefined ? tx('sup.rows', { command: res.command ?? tx('sup.statement'), n: res.rowCount }) : (res.command ?? tx('sup.statement')),
               ...(res.fields?.length ? { fields: res.fields.map((f) => f.name), rows: (res.rows as unknown[][]).slice(0, SHOW_ROWS) } : {}),
             });
           } catch (e) {
@@ -76,12 +77,18 @@ export async function runScripts(app: { id: number; alias: string; db_role: stri
 
 const cell = (v: unknown) => (v === null ? html`<span class="null">null</span>` : typeof v === 'object' ? JSON.stringify(v) : String(v));
 
-export function resultsHtml(kind: string, r: RunResult): Raw {
+const KIND_KEYS: Record<Kind, { heading: BuilderKey; run: BuilderKey; confirm: BuilderKey; result: BuilderKey; ran: BuilderKey; failed: BuilderKey }> = {
+  install: { heading: 'sup.h_install', run: 'sup.run_install', confirm: 'sup.confirm_install', result: 'sup.result_install', ran: 'sup.ran_install', failed: 'sup.failed_install' },
+  upgrade: { heading: 'sup.h_upgrade', run: 'sup.run_upgrade', confirm: 'sup.confirm_upgrade', result: 'sup.result_upgrade', ran: 'sup.ran_upgrade', failed: 'sup.failed_upgrade' },
+  deinstall: { heading: 'sup.h_deinstall', run: 'sup.run_deinstall', confirm: 'sup.confirm_deinstall', result: 'sup.result_deinstall', ran: 'sup.ran_deinstall', failed: 'sup.failed_deinstall' },
+};
+
+export function resultsHtml(kind: Kind, r: RunResult): Raw {
   return html`<div class="alert ${r.ok ? 'alert-success' : 'alert-error'}" role="status">${r.ok
-      ? `The ${kind} scripts ran: ${r.results.length} statement(s), committed.`
-      : `The ${kind} scripts failed: everything they did was undone (rolled back).`}</div>
+      ? tx(KIND_KEYS[kind].ran, { n: r.results.length })
+      : tx(KIND_KEYS[kind].failed)}</div>
     <ol class="support-results">${r.results.map((x) => html`<li class="${x.ok ? 'ok' : 'failed'}">
-      <div><b>${x.script}</b> <span class="${x.ok ? 'muted' : null}">${x.ok ? x.message : html`Error: ${x.message}`}</span></div>
+      <div><b>${x.script}</b> <span class="${x.ok ? 'muted' : null}">${x.ok ? x.message : tx('sup.error', { message: x.message })}</span></div>
       ${x.sql ? html`<pre class="source">${x.sql.length > 2000 ? `${x.sql.slice(0, 2000)}…` : x.sql}</pre>` : ''}
       ${x.fields ? html`<div class="table-wrap"><table class="report"><thead><tr>${x.fields.map((f) => html`<th>${f}</th>`)}</tr></thead>
         <tbody>${(x.rows ?? []).map((row) => html`<tr>${row.map((v) => html`<td>${cell(v)}</td>`)}</tr>`)}</tbody></table></div>` : ''}
@@ -95,17 +102,15 @@ async function page(req: Req, appId: string, result?: { kind: Kind; run: RunResu
   const imported = req.query?.imported === '1';
   const byKind = (k: Kind) => scripts.filter((x) => x.kind === k);
   return { a, body: (s: Session) => html`${appHeader(a, 'shared', s)}
-    ${imported && scripts.length ? html`<div class="alert alert-warning" role="status">${icon('alert')} This application came with supporting objects. They were <b>not</b> run: read them below and run them only if you trust them.</div>` : ''}
-    ${result ? region(`Result: ${result.kind} scripts`, resultsHtml(result.kind, result.run)) : ''}
-    ${region('Supporting objects', html`<p class="muted u-mt0">Scripts that install, upgrade or remove what the application needs in the database. They travel with the export and run only from here, when you choose to:
-        as the application's database role <code>${a.db_role ?? '(none: the runtime connection)'}</code>, statement by statement in one transaction (an error undoes the whole run).
-        <a href="${BASE}/apps/${a.id}/shared?new=supporting_script">Add a script</a> under Shared Components.</p>
-      ${SCRIPT_KINDS.map((k) => html`<h3>${k[0].toUpperCase() + k.slice(1)} scripts (${byKind(k).length})</h3>
+    ${imported && scripts.length ? html`<div class="alert alert-warning" role="status">${icon('alert')} ${tx.rich('sup.imported', { b: raw('<b>'), b_end: raw('</b>') })}</div>` : ''}
+    ${result ? region(tx(KIND_KEYS[result.kind].result), resultsHtml(result.kind, result.run)) : ''}
+    ${region(tx('app.task.supporting'), html`<p class="muted u-mt0">${tx.rich('sup.intro', { role: html`<code>${a.db_role ?? tx('sup.no_role')}</code>`, add: html`<a href="${BASE}/apps/${a.id}/shared?new=supporting_script">${tx('sup.add_script')}</a>` })}</p>
+      ${SCRIPT_KINDS.map((k) => html`<h3>${tx(KIND_KEYS[k].heading, { n: byKind(k).length })}</h3>
         ${byKind(k).length
-          ? html`${byKind(k).map((x) => html`<details class="support-script"><summary><b>${x.seq}. ${x.name}</b> <a href="${BASE}/apps/${a.id}/shared?c=supporting_script-${x.id}">Edit</a></summary><pre class="source">${x.script}</pre></details>`)}
+          ? html`${byKind(k).map((x) => html`<details class="support-script"><summary><b>${x.seq}. ${x.name}</b> <a href="${BASE}/apps/${a.id}/shared?c=supporting_script-${x.id}">${tx('sup.edit')}</a></summary><pre class="source">${x.script}</pre></details>`)}
               <form method="post" action="${BASE}/apps/${a.id}/supporting-objects/run" class="u-mt1">${csrf(s)}<input type="hidden" name="kind" value="${k}">
-                <button class="btn${k === 'deinstall' ? ' btn-danger' : ''}" data-confirm="Run the ${k} scripts of ${a.name} as ${a.db_role ?? 'the runtime connection'}?">${icon('play')} Run the ${k} scripts</button></form>`
-          : html`<p class="muted">None.</p>`}`)}`)}` };
+                <button class="btn${k === 'deinstall' ? ' btn-danger' : ''}" data-confirm="${tx(KIND_KEYS[k].confirm, { app: a.name, role: a.db_role ?? tx('sup.runtime_connection') })}">${icon('play')} ${tx(KIND_KEYS[k].run)}</button></form>`
+          : html`<p class="muted">${tx('sup.none')}</p>`}`)}`)}` };
 }
 
 export async function supportingRoutes(app: FastifyInstance) {
@@ -114,7 +119,7 @@ export async function supportingRoutes(app: FastifyInstance) {
     if (!s) return;
     const p = await page(req, req.params.id);
     if (!p) return reply.code(404).send('Not found');
-    return send(reply, s, shell(s, 'Supporting objects', [['App Builder', BASE], [p.a.name, `${BASE}/apps/${p.a.id}`], ['Supporting objects']], p.body(s)));
+    return send(reply, s, shell(s, tx('app.task.supporting'), [[tx('rail.app_builder'), BASE], [p.a.name, `${BASE}/apps/${p.a.id}`], [tx('app.task.supporting')]], p.body(s)));
   });
 
   app.post(`${BASE}/apps/:id/supporting-objects/run`, async (req: Req, reply) => {
@@ -123,11 +128,11 @@ export async function supportingRoutes(app: FastifyInstance) {
     const a = await appOr404(req.params.id);
     if (!a) return reply.code(404).send('Not found');
     const kind = req.body?.kind as Kind;
-    if (!(SCRIPT_KINDS as readonly string[]).includes(kind)) return reply.code(400).send('Unknown kind of script');
+    if (!(SCRIPT_KINDS as readonly string[]).includes(kind)) return reply.code(400).send(tx('sup.unknown_kind'));
     const run = await runSupportingScripts(a, kind, s.username!);
     clearCompletions(); // the scripts may have changed tables or grants
     await logActivity({ appId: a.id, username: s.username, event: 'supporting_objects', ip: clientIp(req), detail: `builder: ${kind} ${run.ok ? 'ran' : 'failed'} (${run.results.length} statement(s))` });
     const p = (await page(req, req.params.id, { kind, run }))!;
-    return send(reply, s, shell(s, 'Supporting objects', [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Supporting objects']], p.body(s)));
+    return send(reply, s, shell(s, tx('app.task.supporting'), [[tx('rail.app_builder'), BASE], [a.name, `${BASE}/apps/${a.id}`], [tx('app.task.supporting')]], p.body(s)));
   });
 }