pgkiln 0.83.0 → 0.84.0

package/src/i18n/pl.ts

@@ -310,6 +310,15 @@ export const pl: Record<MessageKey, string> = {
   'account.devices_help': "Przeglądarki, w których wybrano „Nie wylogowuj mnie”: {count}.",
   'account.forget_devices': "Wyloguj na wszystkich urządzeniach",
   'account.devices_forgotten': "Wylogowano na wszystkich urządzeniach.",
+  'notify.title': "Powiadomienia",
+  'notify.none': "Brak powiadomień.",
+  'notify.mark_all_read': "Oznacz wszystkie jako przeczytane",
+  'notify.all': "Wszystkie powiadomienia",
+  'notify.marked': "Powiadomienia oznaczono jako przeczytane.",
+  'notify.gone': "To powiadomienie już nie istnieje.",
+  'notify.bell_one': "Powiadomienia: 1 nieprzeczytane",
+  'notify.bell_n': "Powiadomienia: nieprzeczytane: {n}",
+  'notify.unread_one': "Nieprzeczytane",
   'push.title': "Powiadomienia",
   'push.help': "Otrzymuj powiadomienia z tej aplikacji na tym urządzeniu, także gdy aplikacja jest zamknięta.",
   'push.devices': "Urządzenia z powiadomieniami: {n}.",

package/src/i18n/pt.ts

@@ -310,6 +310,15 @@ export const pt: Record<MessageKey, string> = {
   'account.devices_help': "Navegadores onde escolheu “Manter a sessão iniciada”: {count}.",
   'account.forget_devices': "Terminar sessão em todos os dispositivos",
   'account.devices_forgotten': "Sessão terminada em todos os dispositivos.",
+  'notify.title': "Notificações",
+  'notify.none': "Sem notificações.",
+  'notify.mark_all_read': "Marcar todas como lidas",
+  'notify.all': "Todas as notificações",
+  'notify.marked': "Notificações marcadas como lidas.",
+  'notify.gone': "Esta notificação já não existe.",
+  'notify.bell_one': "Notificações: 1 por ler",
+  'notify.bell_n': "Notificações: {n} por ler",
+  'notify.unread_one': "Por ler",
   'push.title': "Notificações",
   'push.help': "Receba notificações desta aplicação neste dispositivo, mesmo com a aplicação fechada.",
   'push.devices': "Dispositivos com notificações: {n}.",

package/src/i18n/ru.ts

@@ -310,6 +310,15 @@ export const ru: Record<MessageKey, string> = {
   'account.devices_help': "Браузеров, где выбрано «Не выходить»: {count}.",
   'account.forget_devices': "Выйти на всех устройствах",
   'account.devices_forgotten': "Выход выполнен на всех устройствах.",
+  'notify.title': "Уведомления",
+  'notify.none': "Уведомлений нет.",
+  'notify.mark_all_read': "Отметить все как прочитанные",
+  'notify.all': "Все уведомления",
+  'notify.marked': "Уведомления отмечены как прочитанные.",
+  'notify.gone': "Этого уведомления больше нет.",
+  'notify.bell_one': "Уведомления: 1 непрочитанное",
+  'notify.bell_n': "Уведомления: непрочитанных — {n}",
+  'notify.unread_one': "Непрочитанное",
   'push.title': "Уведомления",
   'push.help': "Получайте уведомления этого приложения на этом устройстве, даже когда приложение закрыто.",
   'push.devices': "Устройства с уведомлениями: {n}.",

package/src/i18n/sv.ts

@@ -310,6 +310,15 @@ export const sv: Record<MessageKey, string> = {
   'account.devices_help': "Webbläsare där du valde ”Håll mig inloggad”: {count}.",
   'account.forget_devices': "Logga ut på alla enheter",
   'account.devices_forgotten': "Utloggad på alla enheter.",
+  'notify.title': "Aviseringar",
+  'notify.none': "Inga aviseringar.",
+  'notify.mark_all_read': "Markera alla som lästa",
+  'notify.all': "Alla aviseringar",
+  'notify.marked': "Aviseringarna har markerats som lästa.",
+  'notify.gone': "Den här aviseringen finns inte längre.",
+  'notify.bell_one': "Aviseringar: 1 oläst",
+  'notify.bell_n': "Aviseringar: {n} olästa",
+  'notify.unread_one': "Oläst",
   'push.title': "Aviseringar",
   'push.help': "Få aviseringar från den här appen på den här enheten, även när appen är stängd.",
   'push.devices': "Enheter med aviseringar: {n}.",

package/src/i18n/tr.ts

@@ -310,6 +310,15 @@ export const tr: Record<MessageKey, string> = {
   'account.devices_help': "“Oturumum açık kalsın” seçtiğiniz tarayıcılar: {count}.",
   'account.forget_devices': "Tüm cihazlarda oturumu kapat",
   'account.devices_forgotten': "Tüm cihazlarda oturum kapatıldı.",
+  'notify.title': "Bildirimler",
+  'notify.none': "Bildirim yok.",
+  'notify.mark_all_read': "Tümünü okundu olarak işaretle",
+  'notify.all': "Tüm bildirimler",
+  'notify.marked': "Bildirimler okundu olarak işaretlendi.",
+  'notify.gone': "Bu bildirim artık yok.",
+  'notify.bell_one': "Bildirimler: 1 okunmamış",
+  'notify.bell_n': "Bildirimler: {n} okunmamış",
+  'notify.unread_one': "Okunmamış",
   'push.title': "Bildirimler",
   'push.help': "Uygulama kapalıyken de bu cihazda bu uygulamanın bildirimlerini alın.",
   'push.devices': "Bildirim alan cihazlar: {n}.",

package/src/i18n/uk.ts

@@ -310,6 +310,15 @@ export const uk: Record<MessageKey, string> = {
   'account.devices_help': "Браузерів, де вибрано «Не виходити»: {count}.",
   'account.forget_devices': "Вийти на всіх пристроях",
   'account.devices_forgotten': "Вихід виконано на всіх пристроях.",
+  'notify.title': "Сповіщення",
+  'notify.none': "Сповіщень немає.",
+  'notify.mark_all_read': "Позначити всі як прочитані",
+  'notify.all': "Усі сповіщення",
+  'notify.marked': "Сповіщення позначено як прочитані.",
+  'notify.gone': "Цього сповіщення більше немає.",
+  'notify.bell_one': "Сповіщення: 1 непрочитане",
+  'notify.bell_n': "Сповіщення: непрочитаних — {n}",
+  'notify.unread_one': "Непрочитане",
   'push.title': "Сповіщення",
   'push.help': "Отримуйте сповіщення цього застосунку на цьому пристрої, навіть коли застосунок закрито.",
   'push.devices': "Пристрої зі сповіщеннями: {n}.",

package/src/i18n/zh.ts

@@ -310,6 +310,15 @@ export const zh: Record<MessageKey, string> = {
   'account.devices_help': "您选择了“保持登录”的浏览器：{count}。",
   'account.forget_devices': "在所有设备上退出登录",
   'account.devices_forgotten': "已在所有设备上退出登录。",
+  'notify.title': "通知",
+  'notify.none': "没有通知。",
+  'notify.mark_all_read': "全部标为已读",
+  'notify.all': "所有通知",
+  'notify.marked': "通知已标为已读。",
+  'notify.gone': "此通知已不存在。",
+  'notify.bell_one': "通知:1 条未读",
+  'notify.bell_n': "通知:{n} 条未读",
+  'notify.unread_one': "未读",
   'push.title': "通知",
   'push.help': "在此设备上接收此应用的通知，即使应用已关闭。",
   'push.devices': "接收通知的设备：{n}。",

package/src/i18n.ts

@@ -337,6 +337,15 @@ const en = {
   'account.devices_help': 'Browsers where you chose "Keep me signed in": {count}.',
   'account.forget_devices': 'Sign out on all devices',
   'account.devices_forgotten': 'Signed out on all devices.',
+  'notify.title': "Notifications",
+  'notify.none': "No notifications.",
+  'notify.mark_all_read': "Mark all read",
+  'notify.all': "All notifications",
+  'notify.marked': "Notifications marked as read.",
+  'notify.gone': "This notification no longer exists.",
+  'notify.bell_one': "Notifications: 1 unread",
+  'notify.bell_n': "Notifications: {n} unread",
+  'notify.unread_one': "Unread",
   'push.title': "Notifications",
   'push.help': "Get notifications from this app on this device, also when the app is closed.",
   'push.devices': "Devices with notifications: {n}.",
@@ -1247,6 +1256,15 @@ const nl: Record<MessageKey, string> = {
   'account.devices_help': 'Browsers waarin je "Ingelogd blijven" koos: {count}.',
   'account.forget_devices': 'Overal afmelden',
   'account.devices_forgotten': 'Op alle apparaten afgemeld.',
+  'notify.title': "Meldingen",
+  'notify.none': "Geen meldingen.",
+  'notify.mark_all_read': "Alles gelezen",
+  'notify.all': "Alle meldingen",
+  'notify.marked': "Meldingen als gelezen gemarkeerd.",
+  'notify.gone': "Deze melding bestaat niet meer.",
+  'notify.bell_one': "Meldingen: 1 ongelezen",
+  'notify.bell_n': "Meldingen: {n} ongelezen",
+  'notify.unread_one': "Ongelezen",
   'push.title': "Meldingen",
   'push.help': "Ontvang meldingen van deze app op dit apparaat, ook als de app gesloten is.",
   'push.devices': "Apparaten met meldingen: {n}.",

package/src/metadata.ts

@@ -112,6 +112,10 @@ export interface App {
   availability_users: string[];
   /** (084) users can send feedback from the navigation bar */
   feedback: boolean;
+  /** (154) the notification bell in the header */
+  notifications: boolean;
+  /** (154) refresh the badges every so many seconds (null: never) */
+  live_badges_s: number | null;
   /** (107) the application's version (Release 1.0), shown in its pages' footer */
   version: string | null;
   /** (085) schema.function(jsonb) returns jsonb that rewrites error messages; seconds of the session timeout warning */
@@ -322,7 +326,7 @@ export interface DynamicAction {
     /** (149) */
     | 'double_click' | 'key_down' | 'key_press' | 'mouse_enter' | 'mouse_leave' | 'select' | 'resize' | 'scroll' | 'page_unload' | 'before_refresh' | 'facets_change'
     /** (153) component events: trigger = the grid, calendar, map or tree region */
-    | 'grid_row_init' | 'grid_save' | 'calendar_date_select' | 'calendar_view_change' | 'map_object_click' | 'map_change' | 'tree_selection_change';
+    | 'grid_row_init' | 'grid_save' | 'calendar_date_select' | 'calendar_view_change' | 'map_object_click' | 'map_change' | 'tree_selection_change' | 'timer';
   trigger_element: string | null;
   condition_type: 'equals' | 'not_equals' | 'in_list' | 'is_null' | 'is_not_null' | 'greater' | 'greater_equal' | 'less' | 'less_equal' | 'not_in_list' | null;
   condition_value: string | null;
@@ -383,7 +387,9 @@ export interface Process {
   type: 'form_dml' | 'grid_dml' | 'sql' | 'data_load' | 'invoke_api' | 'download' | 'chain' | 'workflow' | 'ai_generate' | 'plugin' | 'send_push' | 'send_email'
     /** (150) */
     | 'close_dialog' | 'clear_session_state' | 'reset_pagination' | 'user_preferences' | 'server_geocoding' | 'print_report'
-    | 'human_task_create' | 'human_task_manage' | 'form_init';
+    | 'human_task_create' | 'human_task_manage' | 'form_init'
+    /** (154) */
+    | 'send_notification';
   region_id: number | null;
   code: string | null;
   config: Record<string, unknown> | null;
@@ -443,7 +449,7 @@ const agg = (table: string, fk: string, parent: string, appId: string) =>
 export async function loadApp(alias: string) {
   return runtime.one<App>(
     `select a.id, a.alias, a.name, a.version, a.home_page, a.authentication, a.access_control, a.sso_providers, a.local_login, a.remember_me_days, a.login_page, a.password_reset, a.session_group, a.mfa, a.mfa_roles, a.mfa_email, a.api_self_tokens, a.ldap_directories, a.header_name, a.header_auto_create, a.logout_url, a.db_auth_roles, a.db_auth_member_of, a.custom_auth_function, a.custom_auth_code, a.custom_auth_post_code, a.nav_list, a.navbar_list, a.pwa, a.pwa_short_name, a.pwa_icon is not null as pwa_has_icon, a.pwa_offline_pages, a.pwa_offline_submit, a.pwa_push, a.db_role, a.debug, a.debug_level, a.theme,
-            a.availability, a.availability_message, a.availability_users, a.feedback, a.error_function, a.session_warning_seconds, a.component_settings,
+            a.availability, a.availability_message, a.availability_users, a.feedback, a.notifications, a.live_badges_s, a.error_function, a.session_warning_seconds, a.component_settings,
             a.language, a.languages, a.language_from, a.date_format, a.timestamp_format, a.time_zone, a.time_zone_auto, a.currency,
             coalesce((select jsonb_agg(jsonb_build_object('name', l.name, 'query', l.query, 'rest_source', l.rest_source)) from meta.lov l where l.app_id = a.id), '[]') as lovs,
             coalesce((select jsonb_agg(jsonb_build_object('page_no', p.page_no, 'name', p.name, 'title', p.title,

package/src/runtime/engine.ts

@@ -18,7 +18,7 @@ import { parseDateMask } from './format.ts';
 import { conditionHolds, functionBody } from './logic.ts';
 import { runPluginProcess } from './plugins.ts';
 import { runDeclarative } from './process-types.ts';
-import { BACKGROUND_TYPES, downloadFile, sendEmailProcess, sendPushProcess, workflowProcess, type ChainConfig } from './processes.ts';
+import { BACKGROUND_TYPES, downloadFile, sendEmailProcess, sendNotificationProcess, sendPushProcess, workflowProcess, type ChainConfig } from './processes.ts';
 import { bindValues, dbg, publicError, stripSemicolon, substitute, timed, toState, type Errors, type PageContext } from './context.ts';
 
 const ident = pg.escapeIdentifier;
@@ -621,6 +621,7 @@ async function runOneStep(ctx: PageContext, p: Process, names: Set<string>, dept
       case 'invoke_api': return await invokeApi(ctx, p, names);
       case 'workflow': return await workflowProcess(ctx, p, names);
       case 'send_push': return await sendPushProcess(ctx, p);
+      case 'send_notification': return await sendNotificationProcess(ctx, p);
       case 'send_email': return await sendEmailProcess(ctx, p);
       case 'ai_generate': return (await runAiProcess(ctx, p, names)).message;
       case 'plugin': return await runPluginProcess(ctx, p.config, p.name);

package/src/runtime/feedback.ts

@@ -29,7 +29,7 @@ export function feedbackNode(ctx: PageContext): ListNode | null {
   if (!ctx.app.feedback || ctx.dialog) return null;
   return {
     label: ctx.locale.t('feedback.link'), href: `${ctx.base}/${ctx.page.page_no}/feedback`, modal: false, external: false,
-    icon: 'chat', badge: null, description: null, current: false, inTrail: false, children: [],
+    icon: 'chat', badge: null, key: '__feedback', description: null, current: false, inTrail: false, children: [],
   };
 }
 

package/src/runtime/lists.ts

@@ -28,6 +28,8 @@ export interface ListNode {
   external: boolean;
   icon: string | null;
   badge: string | null;
+  /** (154) the entry's id (a query's id column, else its label): finds its badge again for a live refresh */
+  key: string;
   description: string | null;
   /** the entry's page is the current page */
   current: boolean;
@@ -50,6 +52,8 @@ interface Entry {
   url: string | null;
   icon: string | null;
   badge: string | null;
+  /** (154) a SELECT whose first value is the badge (static entries; wins over badge) */
+  badge_query?: string | null;
   description: string | null;
   condition?: string | null;
   authz?: string | null;
@@ -105,7 +109,7 @@ async function entriesOf(ctx: PageContext, name: string): Promise<Entry[] | null
   }
   const rows = (
     await runtime.query(
-      `select id, parent_id, label, target_page, target_items, target_url, icon, badge, description, condition, authz
+      `select id, parent_id, label, target_page, target_items, target_url, icon, badge, badge_query, description, condition, authz
          from meta.list_entry where app_id = $1 and list_name = $2 and meta.build_option_on(app_id, build_option)
         order by seq, id`,
       [ctx.app.id, name.toUpperCase()],
@@ -113,10 +117,28 @@ async function entriesOf(ctx: PageContext, name: string): Promise<Entry[] | null
   ).rows;
   return rows.map((r) => ({
     id: r.id, parent_id: r.parent_id, label: ctx.locale.tr(r.label), page: r.target_page, items: r.target_items ?? {}, url: r.target_url,
-    icon: r.icon, badge: r.badge, description: r.description ? ctx.locale.tr(r.description) : null, condition: r.condition, authz: r.authz,
+    icon: r.icon, badge: r.badge, badge_query: r.badge_query, description: r.description ? ctx.locale.tr(r.description) : null, condition: r.condition, authz: r.authz,
   }));
 }
 
+/**
+ * (029, 154) A badge from SQL: the first value of the query's first row, run as the application's
+ * role with the page's binds; an error is a page error and no badge. Empty values give no badge.
+ */
+export async function queryBadge(ctx: PageContext, query: string, what: string): Promise<string | null> {
+  const c = ctx.client;
+  if (!c) return null;
+  try {
+    const sql = stripSemicolon(applyBinds(query, bindValues(ctx)));
+    const res = await savepoint(c, () => c.query({ text: sql, rowMode: 'array' }));
+    const v = res.rows[0]?.[0];
+    return v === null || v === undefined ? null : String(v).trim().slice(0, 100) || null;
+  } catch (e) {
+    ctx.errors.page.push(await publicError(ctx, e, what));
+    return null;
+  }
+}
+
 /** The current page and its parent pages (for "in trail"). */
 function trail(ctx: PageContext) {
   const pages = new Set<number>();
@@ -156,7 +178,10 @@ export async function listTree(ctx: PageContext, name: string): Promise<ListNode
       modal: !!e.page && isModal(ctx, e.page),
       external,
       icon: e.icon,
-      badge: e.badge === null ? null : substitute(e.badge, ctx, (x) => x),
+      badge: e.badge_query?.trim()
+        ? await queryBadge(ctx, e.badge_query, `badge of list entry "${e.label}"`)
+        : e.badge === null ? null : substitute(e.badge, ctx, (x) => x),
+      key: String(e.id ?? e.label),
       description: e.description === null ? null : substitute(e.description, ctx, (x) => x),
       current: isCurrent,
       inTrail: isCurrent || (e.page !== null && current.has(e.page)) || children.some((c) => c.inTrail),
@@ -179,15 +204,22 @@ export async function listTree(ctx: PageContext, name: string): Promise<ListNode
 
 const linkAttrs = (n: ListNode, cls?: string) =>
   html`href="${n.href}"${cls ? html` class="${cls}"` : ''}${n.current ? raw(' aria-current="page"') : ''}${n.modal ? raw(' data-dialog') : ''}${n.external ? raw(' rel="noopener noreferrer"') : ''}`;
-const badge = (n: ListNode) => (n.badge !== null ? html` <span class="badge">${n.badge}</span>` : '');
+/**
+ * An entry's badge. live: the prefix of the badge's data-badge key when the application refreshes
+ * badges (154); an empty badge is then a hidden placeholder the refresh can fill.
+ */
+const badge = (n: ListNode, live?: string) =>
+  n.badge !== null
+    ? html` <span class="badge"${live ? html` data-badge="${live}${n.key}"` : ''}>${n.badge}</span>`
+    : live ? html` <span class="badge" data-badge="${live}${n.key}" hidden></span>` : '';
 
 /** Entries as the navigation menu (the same markup as navigation entries). */
-export function navMarkup(nodes: ListNode[], topNav: boolean): Raw[] {
+export function navMarkup(nodes: ListNode[], topNav: boolean, live?: string): Raw[] {
   return nodes.map((n) => {
-    const label = html`${icon(n.icon ?? 'chevron')}<span>${n.label}</span>${badge(n)}`;
+    const label = html`${icon(n.icon ?? 'chevron')}<span>${n.label}</span>${badge(n, live)}`;
     if (n.children.length)
       return html`<li><details${n.inTrail && !topNav ? raw(' open') : ''}><summary class="${n.inTrail ? 'in-trail' : null}">${label}</summary><ul>${
-        n.href ? html`<li><a ${linkAttrs(n)}>${label}</a></li>` : ''}${navMarkup(n.children, topNav)}</ul></details></li>`;
+        n.href ? html`<li><a ${linkAttrs(n)}>${label}</a></li>` : ''}${navMarkup(n.children, topNav, live)}</ul></details></li>`;
     return html`<li><a ${linkAttrs(n, !n.current && n.inTrail ? 'in-trail' : undefined)}>${label}</a></li>`;
   });
 }
@@ -195,13 +227,13 @@ export function navMarkup(nodes: ListNode[], topNav: boolean): Raw[] {
 const hasIcon = (n: ListNode) => isIcon(n.icon);
 
 /** Entries as the navigation bar in the header: links, with a menu for entries with children (labels of entries with an icon hide on small screens). */
-export function navbarMarkup(nodes: ListNode[], label: string): Raw {
+export function navbarMarkup(nodes: ListNode[], label: string, live?: string): Raw {
   if (!nodes.length) return raw('');
   return html`<nav class="t-navbar" aria-label="${label}"><ul>${nodes.map((n) =>
     n.children.length
-      ? html`<li><details class="menu"><summary${hasIcon(n) ? html` class="nb-icon" aria-label="${n.label}"` : ''}>${icon(n.icon)}<span>${n.label}</span>${badge(n)}</summary><div class="menu-panel align-right"><ul class="t-navbar-menu">${
-          [...(n.href ? [n] : []), ...n.children].map((c) => html`<li><a ${linkAttrs(c)}>${icon(c.icon)}<span>${c.label}</span>${badge(c)}</a></li>`)}</ul></div></details></li>`
-      : html`<li><a ${linkAttrs(n, hasIcon(n) ? 'nb-icon' : undefined)}${hasIcon(n) ? html` aria-label="${n.label}"` : ''}>${icon(n.icon)}<span>${n.label}</span>${badge(n)}</a></li>`)}</ul></nav>`;
+      ? html`<li><details class="menu"><summary${hasIcon(n) ? html` class="nb-icon" aria-label="${n.label}"` : ''}>${icon(n.icon)}<span>${n.label}</span>${badge(n, live)}</summary><div class="menu-panel align-right"><ul class="t-navbar-menu">${
+          [...(n.href ? [n] : []), ...n.children].map((c) => html`<li><a ${linkAttrs(c)}>${icon(c.icon)}<span>${c.label}</span>${badge(c, live)}</a></li>`)}</ul></div></details></li>`
+      : html`<li><a ${linkAttrs(n, hasIcon(n) ? 'nb-icon' : undefined)}${hasIcon(n) ? html` aria-label="${n.label}"` : ''}>${icon(n.icon)}<span>${n.label}</span>${badge(n, live)}</a></li>`)}</ul></nav>`;
 }
 
 function linksMarkup(nodes: ListNode[]): Raw {

package/src/runtime/notifications.ts

@@ -0,0 +1,237 @@
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { appTx, runtime } from '../db.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { checkPageAccess, computeVisibility, Forbidden } from './authz.ts';
+import { publicError, type PageContext } from './context.ts';
+import { listTree, queryBadge, type ListNode } from './lists.ts';
+import { buttonBadgeKey } from './regions.ts';
+import { chrome, clientTexts } from './render.ts';
+import { safeNext } from './signin.ts';
+import { saveState, takeFlash } from '../session.ts';
+import { loadContext, txContext, type Req } from './routes.ts';
+
+// (sprint 165, migration 154) In-app notifications and live badges (APEX: a notification bell in the
+// header, navigation menu badges, badges refreshed with dynamic actions and JavaScript).
+//
+// Application code adds notifications with meta.notify() or the send_notification process. With
+// meta.app.notifications on, signed-in users get a bell in the header: the number of unread
+// notifications and the newest ones. Opening one (a POST with the session's CSRF token) marks it read
+// and goes to its page (a link signed for the recipient when it was made). /a/<alias>/notifications
+// lists them all. Only the user's own notifications of this application are ever read or changed:
+// every query has the application's id and the session's user name.
+//
+// With meta.app.live_badges_s set, the page asks GET /a/<alias>/<page>/live every so many seconds for
+// the badges of its navigation menu and bar (list entries), of its buttons with a badge query, and for
+// the bell. These requests don't keep an idle session alive (loadContext touch: false).
+
+/** Newest notifications in the bell's menu. */
+const BELL_ROWS = 8;
+/** Notifications on the notifications page. */
+const PAGE_ROWS = 100;
+
+interface Row {
+  id: string;
+  title: string;
+  body: string | null;
+  url: string | null;
+  icon: string | null;
+  created_at: Date | string;
+  read_at: Date | string | null;
+}
+
+const signedIn = (ctx: PageContext) => ctx.app.authentication !== 'none' && ctx.user !== 'nobody';
+/** The bell is shown: notifications on, a signed-in user, a page with the header. */
+export const hasBell = (ctx: PageContext) => !!ctx.app.notifications && signedIn(ctx);
+
+async function rows(ctx: PageContext, limit: number): Promise<Row[]> {
+  return (
+    await runtime.query<Row>(
+      `select id::text, title, body, url, icon, created_at, read_at from meta.notification
+        where app_id = $1 and lower(username) = lower($2) order by id desc limit $3`,
+      [ctx.app.id, ctx.user, limit],
+    )
+  ).rows;
+}
+
+async function unreadCount(ctx: PageContext): Promise<number> {
+  const r = await runtime.one<{ n: number }>(
+    'select count(*)::int as n from meta.notification where app_id = $1 and lower(username) = lower($2) and read_at is null',
+    [ctx.app.id, ctx.user],
+  );
+  return r?.n ?? 0;
+}
+
+const shown = (n: number) => (n > 99 ? '99+' : String(n));
+
+/** A notification's time in the user's language and time zone (the pool gives timestamps as text). */
+function when(ctx: PageContext, value: Date | string) {
+  const d = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(d.getTime())) return String(value);
+  try {
+    return new Intl.DateTimeFormat(ctx.locale.lang, { dateStyle: 'medium', timeStyle: 'short', timeZone: ctx.locale.timeZone ?? undefined }).format(d);
+  } catch {
+    return d.toISOString().slice(0, 16).replace('T', ' ');
+  }
+}
+
+/** A notification as a button that opens it (a form: it marks the notification read). */
+function entry(ctx: PageContext, r: Row, cls: string): Raw {
+  const t = ctx.locale.t;
+  return html`<li class="${cls}${r.read_at ? '' : ' is-unread'}"><form method="post" action="${ctx.base}/notifications/${r.id}/open">
+      <input type="hidden" name="__csrf" value="${ctx.session.csrf_token}">
+      <button class="t-notification">${icon(r.icon ?? 'bell')}<span class="t-notification-text">
+        <span class="t-notification-title">${r.read_at ? '' : html`<span class="sr-only">${t('notify.unread_one')}: </span>`}${r.title}</span>
+        ${r.body ? html`<span class="t-notification-body">${r.body}</span>` : ''}
+        <span class="t-notification-time">${when(ctx, r.created_at)}</span></span></button>
+    </form></li>`;
+}
+
+/** "Mark all read", back to next. */
+function markAllForm(ctx: PageContext, next: string): Raw {
+  return html`<form method="post" action="${ctx.base}/notifications/read" class="t-bell-read">
+      <input type="hidden" name="__csrf" value="${ctx.session.csrf_token}"><input type="hidden" name="next" value="${next}">
+      <button class="link-button">${icon('check')} ${ctx.locale.t('notify.mark_all_read')}</button></form>`;
+}
+
+/** The bell's menu: the newest notifications, Mark all read, All notifications. */
+async function bellPanel(ctx: PageContext, unread: number): Promise<Raw> {
+  const t = ctx.locale.t;
+  const list = await rows(ctx, BELL_ROWS);
+  return html`<div class="menu-section t-bell-head"><strong>${t('notify.title')}</strong>${unread ? markAllForm(ctx, `${ctx.base}/${ctx.page.page_no}`) : ''}</div>
+    ${list.length ? html`<ul class="t-bell-list">${list.map((r) => entry(ctx, r, 't-bell-entry'))}</ul>` : html`<p class="muted t-bell-none">${t('notify.none')}</p>`}
+    <div class="menu-section"><a href="${ctx.base}/notifications">${icon('arrow-right')} ${t('notify.all')}</a></div>`;
+}
+
+const bellLabel = (ctx: PageContext, unread: number) =>
+  unread ? ctx.locale.t(unread === 1 ? 'notify.bell_one' : 'notify.bell_n', { n: unread }) : ctx.locale.t('notify.title');
+
+/** The bell in the header (empty when the application has no notifications or nobody is signed in). */
+export async function bellMarkup(ctx: PageContext): Promise<Raw | ''> {
+  if (!hasBell(ctx)) return '';
+  const unread = await unreadCount(ctx);
+  return html`<details class="menu t-bell" data-bell>
+      <summary class="icon-button" title="${bellLabel(ctx, unread)}" aria-label="${bellLabel(ctx, unread)}">${icon('bell')}<span class="t-bell-count" data-badge="bell"${unread ? '' : raw(' hidden')}>${unread ? shown(unread) : ''}</span></summary>
+      <div class="menu-panel align-right t-bell-panel" data-bell-panel>${await bellPanel(ctx, unread)}</div>
+    </details>`;
+}
+
+/** Every node of a list tree, depth first. */
+const allNodes = (nodes: ListNode[]): ListNode[] => nodes.flatMap((n) => [n, ...allNodes(n.children)]);
+
+export interface LiveState {
+  /** data-badge key → its text (null: no badge) */
+  badges: Record<string, string | null>;
+  bell: { unread: number; label: string; panel: string } | null;
+}
+
+/** The page's badges now (navigation menu and bar, buttons with a badge query) and the bell. */
+export async function liveState(ctx: PageContext): Promise<LiveState> {
+  const badges: Record<string, string | null> = {};
+  for (const [list, prefix] of [[ctx.app.nav_list, 'n:'], [ctx.app.navbar_list, 'b:']] as const) {
+    if (!list) continue;
+    for (const n of allNodes((await listTree(ctx, list)) ?? [])) badges[`${prefix}${n.key}`] = n.badge;
+  }
+  for (const b of ctx.vis!.buttons.values())
+    if (b.badge_query?.trim() && b.id > 0) badges[buttonBadgeKey(b)] = await queryBadge(ctx, b.badge_query, `badge of button ${b.name}`);
+  return { badges, bell: null };
+}
+
+export async function notificationRoutes(app: FastifyInstance) {
+  /** A signed-in user of an application with notifications on (else a 404). */
+  const context = async (req: Req, reply: FastifyReply) => {
+    const ctx = await loadContext(req, reply, { pageNo: 'home' });
+    if (!ctx) return null;
+    if (!hasBell(ctx)) {
+      reply.code(404).type('text/plain').send('Not found');
+      return null;
+    }
+    return ctx;
+  };
+
+  app.get('/a/:alias/notifications', async (req: Req, reply) => {
+    const ctx = await context(req, reply);
+    if (!ctx) return;
+    const t = ctx.locale.t;
+    const list = await rows(ctx, PAGE_ROWS);
+    const unread = list.some((r) => !r.read_at);
+    const flash = takeFlash(ctx.session);
+    const main = html`<div class="t-titlebar"><h1>${t('notify.title')}</h1></div>
+      <div class="t-content notifications-page">
+        <div class="messages" aria-live="polite">${flash ? html`<div class="alert alert-success" role="status">${flash}</div>` : ''}</div>
+        <section class="region region-standard"><div class="region-body">
+          ${unread ? html`<div class="buttons u-mt0">${markAllForm(ctx, `${ctx.base}/notifications`)}</div>` : ''}
+          ${list.length ? html`<ul class="t-notification-list">${list.map((r) => entry(ctx, r, 't-notification-entry'))}</ul>` : html`<p class="muted">${t('notify.none')}</p>`}
+        </div></section>
+      </div>
+      <script type="application/json" id="pgkiln-meta">${raw(JSON.stringify({ csrf: ctx.session.csrf_token, das: [], texts: clientTexts(ctx) }).replace(/</g, '\\u003c'))}</script>`;
+    ctx.vis = { regions: new Set(), items: new Set(), editable: new Set(), buttons: new Map(), dynamicActions: new Set() };
+    const body = await appTx(txContext(ctx), async (c) => {
+      ctx.client = c;
+      return chrome(ctx, main, t('notify.title'));
+    });
+    await saveState(ctx.session);
+    return reply.header('cache-control', 'private, no-store').type('text/html').send(body);
+  });
+
+  // open a notification: mark it read, go to its page (or the list when it has none)
+  app.post('/a/:alias/notifications/:id/open', async (req: Req, reply) => {
+    const ctx = await context(req, reply);
+    if (!ctx) return;
+    if (req.body?.__csrf !== ctx.session.csrf_token) return reply.redirect(`${ctx.base}/notifications`, 303);
+    const id = /^[1-9][0-9]{0,17}$/.test(String(req.params.id)) ? String(req.params.id) : null;
+    const row = id
+      ? await runtime.one<{ url: string | null }>(
+          `update meta.notification set read_at = coalesce(read_at, now())
+            where id = $1 and app_id = $2 and lower(username) = lower($3) returning url`,
+          [id, ctx.app.id, ctx.user],
+        )
+      : null;
+    if (!row) {
+      ctx.session.state.__FLASH = ctx.locale.t('notify.gone');
+      await saveState(ctx.session);
+      return reply.redirect(`${ctx.base}/notifications`, 303);
+    }
+    // the link was made under the application's alias then; it goes to the same page now
+    const rest = row.url?.replace(/^\/a\/[^/]+\//, '');
+    return reply.redirect(rest ? `${ctx.base}/${rest}` : `${ctx.base}/notifications`, 303);
+  });
+
+  app.post('/a/:alias/notifications/read', async (req: Req, reply) => {
+    const ctx = await context(req, reply);
+    if (!ctx) return;
+    const next = safeNext(ctx.app, typeof req.body?.next === 'string' ? req.body.next : `${ctx.base}/notifications`);
+    if (req.body?.__csrf !== ctx.session.csrf_token) return reply.redirect(next, 303);
+    await runtime.query(
+      'update meta.notification set read_at = now() where app_id = $1 and lower(username) = lower($2) and read_at is null',
+      [ctx.app.id, ctx.user],
+    );
+    ctx.session.state.__FLASH = ctx.locale.t('notify.marked');
+    await saveState(ctx.session);
+    return reply.redirect(next, 303);
+  });
+
+  // live badges: what the page shows now; never extends the session
+  app.get('/a/:alias/:page/live', async (req: Req, reply) => {
+    const ctx = await loadContext(req, reply, { json: true, touch: false });
+    if (!ctx) return;
+    reply.header('cache-control', 'private, no-store');
+    if (!ctx.app.live_badges_s) return reply.code(404).send({ error: 'not found' });
+    try {
+      const state = await appTx(txContext(ctx), async (c) => {
+        ctx.client = c;
+        await checkPageAccess(ctx);
+        ctx.vis = await computeVisibility(ctx);
+        return liveState(ctx);
+      });
+      if (hasBell(ctx)) {
+        const unread = await unreadCount(ctx);
+        state.bell = { unread, label: bellLabel(ctx, unread), panel: (await bellPanel(ctx, unread)).toString() };
+      }
+      return reply.send(state);
+    } catch (e) {
+      if (e instanceof Forbidden) return reply.code(403).send({ error: e.message });
+      return reply.code(400).send({ error: await publicError(ctx, e, 'live badges') });
+    }
+  });
+}