pgkiln 0.42.0 → 0.44.0

package/public/builder.js

@@ -209,6 +209,132 @@
     });
   }
 
+  // ---------------------------------------------------------------- the rendering tree's context menu (sprint 77)
+  // Right-click (or Shift+F10 / the menu key) on a region, item or button: create in or below it, duplicate,
+  // copy to another page, expand or collapse everything below, delete. Every entry is a link or a form post
+  // the server also answers without JavaScript.
+  function setupTreeMenu(tree) {
+    const pid = tree.dataset.pageId;
+    const base = `/builder/pages/${pid}`;
+    const token = document.querySelector('input[name="__csrf"]')?.value ?? '';
+    let menu = null;
+    let opener = null;
+    const close = (refocus = true) => {
+      menu?.remove();
+      menu = null;
+      if (refocus) opener?.focus();
+    };
+    const submit = (action, fields, confirmText) => {
+      if (confirmText && !window.confirm(confirmText)) return;
+      const f = document.createElement('form');
+      f.method = 'post';
+      f.action = action;
+      for (const [k, v] of Object.entries({ __csrf: token, ...fields })) {
+        const i = document.createElement('input');
+        i.type = 'hidden';
+        i.name = k;
+        i.value = v;
+        f.appendChild(i);
+      }
+      document.body.appendChild(f);
+      f.submit();
+    };
+    const setAll = (node, open) => {
+      const li = node.closest('li');
+      for (const sub of [li, ...li.querySelectorAll('li')]) {
+        const n = sub.querySelector(':scope > .pd-node.has-kids');
+        if (!n) continue;
+        sub.toggleAttribute('data-collapsed', !open);
+        n.setAttribute('aria-expanded', String(open));
+      }
+    };
+    const entries = (node) => {
+      const kind = node.dataset.kind;
+      const id = node.dataset.id;
+      const label = node.querySelector('.pd-label')?.textContent ?? '';
+      const go = (q) => () => window.location.assign(`${base}?${q}`);
+      const copyDialog = () => {
+        const d = document.getElementById('pd-copy-dialog');
+        if (!d) return;
+        d.querySelector('input[name="kind"]').value = kind;
+        d.querySelector('input[name="id"]').value = id;
+        d.querySelector('[data-copy-what]').textContent = `${kind[0].toUpperCase()}${kind.slice(1)}: ${label}`;
+        d.showModal();
+      };
+      const list = [];
+      if (kind === 'region') {
+        list.push(['Create page item', go(`new=item&region=${id}`)], ['Create button', go(`new=button&region=${id}`)],
+          ['Create dynamic action', go('new=dynamic_action')],
+          ['Create region below', () => submit(`${base}/layout/create`, { kind: 'region', type: 'static', position: node.dataset.position ?? '', before: node.dataset.next ?? '' })], null);
+      }
+      list.push(['Duplicate', () => submit(`${base}/layout/duplicate`, { kind, id })], ['Copy to other page…', copyDialog]);
+      if (kind !== 'region') list.push(['Create dynamic action', go('new=dynamic_action')]);
+      if (node.classList.contains('has-kids')) list.push(null, ['Expand all below', () => setAll(node, true)], ['Collapse all below', () => setAll(node, false)]);
+      list.push(null, ['Delete', () => submit(`${base}/c/${kind}/${id}/delete`, {}, `Delete ${kind} ${label}?`), 'danger']);
+      return list;
+    };
+    const open = (node, x, y) => {
+      close(false);
+      opener = node;
+      menu = document.createElement('div');
+      menu.className = 'pd-menu';
+      menu.setAttribute('role', 'menu');
+      menu.setAttribute('aria-label', `Actions: ${node.querySelector('.pd-label')?.textContent ?? ''}`);
+      for (const e of entries(node)) {
+        if (!e) {
+          const sep = document.createElement('div');
+          sep.setAttribute('role', 'separator');
+          menu.appendChild(sep);
+          continue;
+        }
+        const b = document.createElement('button');
+        b.type = 'button';
+        b.setAttribute('role', 'menuitem');
+        b.tabIndex = -1;
+        b.textContent = e[0];
+        if (e[2]) b.classList.add(`is-${e[2]}`);
+        b.addEventListener('click', () => {
+          close(e[0] !== 'Copy to other page…');
+          e[1]();
+        });
+        menu.appendChild(b);
+      }
+      document.body.appendChild(menu);
+      const r = menu.getBoundingClientRect();
+      menu.style.left = `${Math.max(4, Math.min(x, window.innerWidth - r.width - 4))}px`;
+      menu.style.top = `${Math.max(4, Math.min(y, window.innerHeight - r.height - 4))}px`;
+      menu.querySelector('[role=menuitem]')?.focus();
+      menu.addEventListener('keydown', (e) => {
+        const items = [...menu.querySelectorAll('[role=menuitem]')];
+        const i = items.indexOf(document.activeElement);
+        if (e.key === 'ArrowDown') items[(i + 1) % items.length].focus();
+        else if (e.key === 'ArrowUp') items[(i - 1 + items.length) % items.length].focus();
+        else if (e.key === 'Home') items[0].focus();
+        else if (e.key === 'End') items[items.length - 1].focus();
+        else if (e.key === 'Escape' || e.key === 'Tab') close();
+        else return;
+        e.preventDefault();
+      });
+    };
+    tree.addEventListener('contextmenu', (e) => {
+      const node = e.target.closest('.pd-node[data-kind][data-id]');
+      if (!node || !['region', 'item', 'button'].includes(node.dataset.kind)) return;
+      e.preventDefault();
+      const r = node.getBoundingClientRect();
+      // the keyboard's menu key has no pointer position
+      open(node, e.clientX || r.left + 24, e.clientY || r.bottom);
+    });
+    document.addEventListener('pointerdown', (e) => {
+      if (menu && !menu.contains(e.target)) close(false);
+    });
+    window.addEventListener('blur', () => close(false));
+    const dialog = document.getElementById('pd-copy-dialog');
+    dialog?.querySelector('[data-dialog-close]')?.addEventListener('click', () => {
+      dialog.close();
+      opener?.focus();
+    });
+  }
+
   // ---------------------------------------------------------------- property editor
   function setupProperties() {
     const pe = document.querySelector('.pe');
@@ -269,6 +395,102 @@
         }
       });
     }
+    // (sprint 77, APEX: Show Common / Show All, Go to Group) next to the filter
+    if (row && groups.length) {
+      const bar = document.createElement('div');
+      bar.className = 'pe-view';
+      if (pe.querySelector('[data-more]')) {
+        const seg = document.createElement('div');
+        seg.className = 'segmented pe-common';
+        seg.setAttribute('role', 'group');
+        seg.setAttribute('aria-label', 'Properties shown');
+        const showCommon = (on, remember) => {
+          pe.classList.toggle('pe-show-common', on);
+          for (const b of seg.querySelectorAll('button')) b.setAttribute('aria-pressed', String((b.value === 'common') === on));
+          for (const fs of groups) fs.classList.toggle('pe-group-more', on && !fs.querySelector('.field:not([data-more] .field), .options-field:not([data-more] .options-field)'));
+          if (remember) store.set('pe.common', on ? '1' : null);
+        };
+        for (const [v, label] of [['common', 'Common'], ['all', 'All']]) {
+          const b = document.createElement('button');
+          b.type = 'button';
+          b.value = v;
+          b.textContent = label;
+          b.addEventListener('click', () => showCommon(v === 'common', true));
+          seg.appendChild(b);
+        }
+        bar.appendChild(seg);
+        showCommon(store.get('pe.common') === '1', false);
+      }
+      const named = groups.filter((fs) => fs.querySelector(':scope > legend'));
+      if (named.length > 1) {
+        const sel = document.createElement('select');
+        sel.className = 'pe-goto';
+        sel.setAttribute('aria-label', 'Go to group');
+        sel.innerHTML = '<option value="">Go to group</option>';
+        named.forEach((fs, i) => {
+          const o = document.createElement('option');
+          o.value = String(i);
+          o.textContent = fs.querySelector(':scope > legend').textContent.trim();
+          sel.appendChild(o);
+        });
+        sel.addEventListener('change', () => {
+          const fs = named[Number(sel.value)];
+          sel.value = '';
+          if (!fs) return;
+          // a group on another tab (a region's Attributes): open that tab first (tabify names its tab <panel id>-tab)
+          const panel = fs.closest('[data-tab]');
+          if (panel?.hidden) document.getElementById(`${panel.id}-tab`)?.click();
+          const t = fs.querySelector('.pe-toggle');
+          if (t?.getAttribute('aria-expanded') === 'false') t.click();
+          fs.scrollIntoView({ block: 'start', behavior: 'smooth' });
+          t?.focus({ preventScroll: true });
+        });
+        bar.appendChild(sel);
+      }
+      if (bar.children.length) row.after(bar);
+    }
+    // (sprint 77, APEX: the Template Options dialog) the checkboxes in a dialog, opened from a button that counts them.
+    // The dialog is the body's (not inside the form or the property editor's wrappers, which Common hides); the
+    // checkboxes belong to their form through the form attribute, so they are saved with it.
+    let optionDialogs = 0;
+    for (const fs of pe.querySelectorAll('fieldset.options-field')) {
+      const form = fs.closest('form');
+      if (!form) continue;
+      if (!form.id) form.id = `pe-form-${++optionDialogs}`;
+      const boxes = [...fs.querySelectorAll('input[type=checkbox]')];
+      for (const x of boxes) x.setAttribute('form', form.id);
+      const legend = fs.querySelector('legend')?.textContent.trim() ?? 'Options';
+      const holder = document.createElement('div');
+      holder.className = 'field pe-options-open';
+      const b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'btn btn-sm';
+      const count = () => {
+        const n = boxes.filter((x) => x.checked).length;
+        b.textContent = `${legend}${n ? ` (${n})` : ''}…`;
+      };
+      const d = document.createElement('dialog');
+      d.className = 'pd-dialog';
+      d.setAttribute('aria-label', legend);
+      fs.replaceWith(holder);
+      holder.appendChild(b);
+      d.appendChild(fs);
+      const ok = document.createElement('div');
+      ok.className = 'pd-dialog-buttons';
+      ok.innerHTML = '<button type="button" class="btn btn-primary">OK</button>';
+      d.appendChild(ok);
+      document.body.appendChild(d);
+      // the count follows every change (Escape closes the dialog without OK); a change is an unsaved change
+      for (const x of boxes)
+        x.addEventListener('change', () => {
+          count();
+          document.querySelector(`.tb-save[form="${form.id}"]`)?.classList.add('is-dirty');
+        });
+      ok.querySelector('button').addEventListener('click', () => d.close());
+      d.addEventListener('close', () => b.focus());
+      b.addEventListener('click', () => d.showModal());
+      count();
+    }
     if (head) {
       const h = () => pe.style.setProperty('--pe-head-h', `${head.offsetHeight}px`);
       h();
@@ -360,9 +582,12 @@
       e.dataTransfer.effectAllowed = drag.isNew ? 'copy' : 'move';
       e.dataTransfer.setData('text/plain', drag.isNew ? `new ${drag.kind} ${drag.type}` : `${drag.kind} ${drag.id}`);
       (drag.kind === 'region' && !drag.isNew ? src.closest('.pd-region') : src).classList.add('is-dragging');
+      // (sprint 77) empty display positions and button positions show while something can drop there
+      canvas.classList.add(`pd-dragging-${drag.kind}`);
     });
     document.addEventListener('dragend', () => {
       for (const el of document.querySelectorAll('.is-dragging')) el.classList.remove('is-dragging');
+      canvas.classList.remove('pd-dragging-region', 'pd-dragging-item', 'pd-dragging-button');
       clear();
       drag = null;
     });
@@ -411,8 +636,10 @@
       clear();
       const before = t.before ? t.before.dataset.id : '';
       const region = d.kind === 'region' ? '' : t.zone.dataset.region;
-      if (d.isNew) post('create', { kind: d.kind, type: d.type, region, before });
-      else if (before !== d.id) post('move', { kind: d.kind, id: d.id, region, before });
+      // a region's display position, a button's position in its region
+      const place = d.kind === 'region' ? { position: t.zone.dataset.position ?? '' } : d.kind === 'button' ? { slot: t.zone.dataset.slot ?? '' } : {};
+      if (d.isNew) post('create', { kind: d.kind, type: d.type, region, before, ...place });
+      else if (before !== d.id || t.zone !== canvas.querySelector(`[data-kind="${d.kind}"][data-id="${d.id}"]`)?.closest('.pd-grid, .pd-slot')) post('move', { kind: d.kind, id: d.id, region, before, ...place });
     });
 
     // ------------------------------------------------ resizing a region (drag its right edge)
@@ -476,7 +703,7 @@
   // ---------------------------------------------------------------- small things
   // a select that navigates (the toolbar's page switcher)
   document.addEventListener('change', (e) => {
-    if (e.target.matches?.('select[data-autosubmit]')) e.target.form?.submit();
+    if (e.target.matches?.('select[data-autosubmit], input[type=checkbox][data-autosubmit]')) e.target.form?.submit();
   });
 
   // a search box that filters a list as you type (the App Builder's applications);
@@ -776,6 +1003,7 @@
     setupThemePreview();
     setupTabs();
     for (const tree of document.querySelectorAll('.pd-tree')) setupTree(tree);
+    for (const tree of document.querySelectorAll('.pd-tree[data-tree-menu]')) setupTreeMenu(tree);
     setupProperties();
     setupCanvas();
   }
@@ -890,3 +1118,52 @@ document.addEventListener('submit', (e) => {
   // back from the browser's cache (the back button): no overlay
   window.addEventListener('pageshow', (ev) => { if (ev.persisted) overlay.remove(); }, { once: true });
 });
+
+// (sprint 74) a search box that filters a list's rows while typing (data-filter-rows="tbody id"); the form still works without it
+document.querySelectorAll('input[data-filter-rows]').forEach((el) => {
+  const body = document.getElementById(el.dataset.filterRows);
+  if (!body) return;
+  el.addEventListener('input', () => {
+    const q = el.value.trim().toLowerCase();
+    body.querySelectorAll(':scope > tr, :scope > li').forEach((tr) => { tr.hidden = !!q && !tr.textContent.toLowerCase().includes(q); });
+  });
+});
+
+// (sprint 74) Settings tabs without a reload; the form remembers the tab for the redirect after Save.
+// The authentication type shows only its own fields.
+(() => {
+  const links = [...document.querySelectorAll('[data-tab-link]')];
+  if (!links.length) return;
+  const show = (tab) => {
+    document.querySelectorAll('.settings-panel').forEach((p) => { p.hidden = p.dataset.tab !== tab; });
+    links.forEach((l) => (l.dataset.tabLink === tab ? l.setAttribute('aria-current', 'page') : l.removeAttribute('aria-current')));
+    document.querySelectorAll('[data-settings-tab]').forEach((i) => { i.value = tab; });
+    const save = document.querySelector('.settings-save');
+    if (save) save.hidden = tab === 'errors' || tab === 'pwa';
+    history.replaceState(null, '', `?tab=${tab}`);
+  };
+  links.forEach((l) => l.addEventListener('click', (e) => { e.preventDefault(); show(l.dataset.tabLink); }));
+  const auth = document.querySelector('.settings-form select[name="authentication"]');
+  auth?.addEventListener('change', () => {
+    document.querySelectorAll('.auth-part').forEach((p) => { p.hidden = p.dataset.auth !== auth.value; });
+  });
+})();
+
+// (sprint 75) the Object Browser's filter: objects whose name holds the text; folders without any are hidden
+document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
+  const tree = document.getElementById(el.dataset.filterTree);
+  if (!tree) return;
+  el.addEventListener('input', () => {
+    const q = el.value.trim().toLowerCase();
+    tree.querySelectorAll('details.ob-folder').forEach((folder) => {
+      let n = 0;
+      folder.querySelectorAll('li').forEach((li) => {
+        const hit = !q || li.textContent.toLowerCase().includes(q);
+        li.hidden = !hit;
+        if (hit) n++;
+      });
+      folder.hidden = !!q && n === 0;
+      if (q && n) folder.open = true;
+    });
+  });
+});

package/src/builder/appsheets.ts

@@ -274,6 +274,45 @@ interface Catalog {
   fk_table: string | null;
 }
 
+/** (sprint 79) A number column that holds an amount: a dashboard sums it (Salary by Department). */
+const AMOUNT = /(^|_)(sal|salary|salaries|amount|amt|total|price|cost|costs|revenue|value|budget|balance|fee|fees|pay|wage|wages)(_|$)/i;
+
+interface ChartPlan {
+  table: string;
+  group: string;
+  /** count, or sum of `value` */
+  fn: 'count' | 'sum';
+  value: string | null;
+  kind: 'donut' | 'line' | 'bar';
+}
+
+/**
+ * (sprint 79, GEN-6) How a table is charted: by its first foreign key that says something, else a text,
+ * yes/no or date column whose values repeat; the sum of an amount column when there is one, else the
+ * number of rows; a donut for six groups or fewer, a line for dates, else a sorted bar. A grouping that
+ * says nothing (one group, or every group the same) is skipped.
+ */
+async function chartPlan(c: Client, table: string, catalog: Catalog[], rows: number): Promise<ChartPlan | null> {
+  const amount = catalog.find((x) => x.kind === 'number' && !x.is_pk && !x.fk_table && AMOUNT.test(x.column_name))?.column_name ?? null;
+  const groups = [...catalog.filter((x) => x.fk_table && !x.is_pk).map((x) => x.column_name), groupColumn(catalog, rows)].filter(
+    (g, i, all): g is string => !!g && all.indexOf(g) === i,
+  );
+  for (const group of groups) {
+    for (const value of amount ? [amount, null] : [null]) {
+      const measure = value ? `sum(${pg.escapeIdentifier(value)})` : 'count(*)';
+      const spread = (
+        await c.query<{ groups: number; lo: string | null; hi: string | null }>(
+          `select count(*)::int as groups, min(v)::text as lo, max(v)::text as hi from (select ${pg.escapeIdentifier(group)} as g, ${measure} as v from ${table} group by 1) x`,
+        )
+      ).rows[0];
+      if (spread.groups < 2 || spread.lo === spread.hi) continue;
+      const kind = catalog.find((x) => x.column_name === group)?.kind === 'date' ? 'line' : spread.groups <= 6 ? 'donut' : 'bar';
+      return { table, group, fn: value ? 'sum' : 'count', value, kind };
+    }
+  }
+  return null;
+}
+
 /**
  * A dashboard page: a chart per table (at most six) with the number of rows per
  * parent row (the first foreign key), or per value of a text, yes/no or date
@@ -283,7 +322,7 @@ interface Catalog {
  * Manager", and the Dashboard comes right after Home in the navigation menu.
  */
 export async function addDashboard(c: Client, alias: string, tables: string[], page: number, skipped: string[] = []): Promise<{ page: number; label: string } | null> {
-  const picks: { table: string; group: string }[] = [];
+  const picks: ChartPlan[] = [];
   for (const t of tables) {
     if (picks.length >= MAX_CHARTS) break;
     const rel = (await c.query('select relrowsecurity as rls, greatest(reltuples, 0) as n from pg_class where oid = $1::regclass', [t])).rows[0];
@@ -292,24 +331,25 @@ export async function addDashboard(c: Client, alias: string, tables: string[], p
       continue;
     }
     const catalog = (await c.query<Catalog>('select column_name, kind, is_pk, distinct_values, fk_table::text from meta.wizard_catalog($1::regclass)', [t])).rows;
-    const group = catalog.find((x) => x.fk_table && !x.is_pk)?.column_name ?? groupColumn(catalog, Number(rel.n));
-    if (group) picks.push({ table: t, group });
+    const plan = await chartPlan(c, t, catalog, Number(rel.n));
+    if (plan) picks.push(plan);
   }
   if (!picks.length) return null;
-  const generate = (table: string, group: string, no: number, nav: boolean) =>
+  const generate = (p: ChartPlan, no: number, nav: boolean) =>
     c.query<{ id: number }>('select meta.generate_page($1, \'chart\', $2::regclass, $3, $4::jsonb) as id', [
-      alias, table, no,
-      JSON.stringify({ label: 'Dashboard', icon: 'chart', nav, label_column: group, function: 'count', value_column: null }),
+      alias, p.table, no,
+      JSON.stringify({ label: 'Dashboard', icon: 'chart', nav, label_column: p.group, function: p.fn, value_column: p.value, chart: p.kind }),
     ]);
-  const title = async (table: string, group: string) =>
-    (await c.query(`select meta.wizard_table_label($1::regclass) || ' by ' || meta.wizard_column_label($1::regclass, $2) as t`, [table, group])).rows[0].t as string;
-  const dash = (await generate(picks[0].table, picks[0].group, page, true)).rows[0].id;
-  await c.query('update meta.region set title = $2 where page_id = $1', [dash, await title(picks[0].table, picks[0].group)]);
+  // Employees by Manager; a sum: Salary by Department
+  const title = async (p: ChartPlan) =>
+    (await c.query(`select coalesce(meta.wizard_column_label($1::regclass, $3), meta.wizard_table_label($1::regclass)) || ' by ' || meta.wizard_column_label($1::regclass, $2) as t`, [p.table, p.group, p.value])).rows[0].t as string;
+  const dash = (await generate(picks[0], page, true)).rows[0].id;
+  await c.query('update meta.region set title = $2 where page_id = $1', [dash, await title(picks[0])]);
   for (const [n, p] of picks.slice(1).entries()) {
     // generated on a page of its own, then moved onto the dashboard
     const spare = (await c.query('select max(page_no) + 1000 as n from meta.page where app_id = (select id from meta.app where alias = $1)', [alias])).rows[0].n as number;
-    const tmp = (await generate(p.table, p.group, spare, false)).rows[0].id;
-    await c.query('update meta.region set page_id = $2, seq = $3, title = $4 where page_id = $1', [tmp, dash, (n + 2) * 10, await title(p.table, p.group)]);
+    const tmp = (await generate(p, spare, false)).rows[0].id;
+    await c.query('update meta.region set page_id = $2, seq = $3, title = $4 where page_id = $1', [tmp, dash, (n + 2) * 10, await title(p)]);
     await c.query('delete from meta.page where id = $1', [tmp]);
   }
   if (picks.length > 1) await c.query('update meta.region set columns = 6 where page_id = $1', [dash]);
@@ -319,7 +359,7 @@ export async function addDashboard(c: Client, alias: string, tables: string[], p
        from meta.app a where a.alias = $1 and e.app_id = a.id and e.parent_id is null and e.target_page = $2`,
     [alias, page],
   );
-  return { page, label: `Dashboard (${(await Promise.all(picks.map((p) => title(p.table, p.group)))).join(', ')})` };
+  return { page, label: `Dashboard (${(await Promise.all(picks.map((p) => title(p)))).join(', ')})` };
 }
 
 /** Create the application, the tables, the rows, the foreign keys and the pages, in one transaction. */

package/src/builder/appwizard.ts

@@ -40,6 +40,8 @@ export const pastedName = (title: string) =>
 
 interface Relation {
   relname: string;
+  /** (sprint 78) the friendly name of its pages: Employees */
+  label: string;
   kind: 'table' | 'view';
   pk: string | null;
   /** the planner's estimate (null: never analyzed) */
@@ -54,7 +56,7 @@ interface Relation {
 export async function schemaRelations(schema: string): Promise<Relation[]> {
   return (
     await owner.query<Relation>(
-      `select c.relname, case when c.relkind in ('v', 'm') then 'view' else 'table' end as kind,
+      `select c.relname, meta.wizard_table_label(c.oid) as label, case when c.relkind in ('v', 'm') then 'view' else 'table' end as kind,
               meta.wizard_pk(c.oid) as pk, case when c.reltuples >= 0 then c.reltuples::bigint end as rows,
               meta.wizard_defaults('calendar', c.oid) ->> 'start' is not null as calendar,
               meta.wizard_pk(c.oid) is not null and meta.wizard_defaults('master_detail', c.oid) ->> 'detail' is not null as detail
@@ -350,9 +352,9 @@ async function createPage(s: Session, reply: FastifyReply, schema: string, b: Bo
         ${known
           ? relations.length
             ? relations.map((r, i) => html`<li><input type="hidden" name="t_${i}" value="${r.relname}">
-                <label class="aw-page-kind" for="f_k_${i}">${icon(r.kind === 'view' ? 'eye' : 'table')} ${r.relname}</label>
+                <label class="aw-page-kind" for="f_k_${i}">${icon(r.kind === 'view' ? 'eye' : 'table')} ${r.label}</label>
                 <select id="f_k_${i}" name="k_${i}">${kindsFor(r).map((k) => html`<option value="${k}"${k === kindOf(r, i) ? raw(' selected') : ''}>${PAGE_KINDS[k]}</option>`)}</select>
-                <small class="muted">${r.kind === 'view' ? 'view' : rows(r)}${r.kind === 'table' && !r.pk ? ', no single-column key: no form' : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? ': a paged grid' : ''}</small></li>`)
+                <small class="muted"><code>${r.relname}</code> · ${r.kind === 'view' ? 'view' : rows(r)}${r.kind === 'table' && !r.pk ? ', no single-column key: no form' : ''}${Number(r.rows ?? 0) > LARGE_TABLE ? ': a paged grid' : ''}</small></li>`)
             : html`<li class="muted">${schema} has no tables or views.</li>`
           : html`<li class="muted">Choose a schema under Data for a page per table, or add pages with the page wizards later.</li>`}
       </ul>