pgkiln 0.43.0 → 0.44.0

package/src/runtime/locale.ts

@@ -44,7 +44,10 @@ export interface Locale {
   timeZoneFrom: 'user' | 'browser' | 'app' | 'database';
 }
 
-export const THEME_COOKIE = 'pgkiln_theme';
+/** (sprint 79) The light/dark choice of a user who is not signed in, per application (path /a/<alias>). */
+export const THEME_COOKIE = 'pgkiln_mode';
+/** The cookie's options: the application's path, a year. */
+export const themeCookieOptions = (base: string) => ({ path: base, sameSite: 'lax' as const, secure: process.env.COOKIE_SECURE === 'true', maxAge: 365 * 86400 });
 const THEMES: ThemeMode[] = ['auto', 'light', 'dark'];
 export const isTheme = (v: unknown): v is ThemeMode => THEMES.includes(v as ThemeMode);
 

package/src/runtime/render.ts

@@ -292,9 +292,14 @@ export async function chrome(ctx: PageContext, main: Raw, title: string) {
                 </form>
               </div>
             </details>`
-          : html`<a href="${ctx.base}/login">${t('login.sign_in_link')}</a>`
+          : // (sprint 79, UI-3; APEX: the user menu of a public page) signed out: Appearance and Sign in in the user menu
+            ctx.locale.themeChoice || styleChoice(ctx.app)
+            ? html`<details class="menu t-user"><summary>${icon('user')}<span>${t('login.sign_in_link')}</span></summary>
+                <div class="menu-panel align-right">${themeSwitch(ctx, here(ctx))}${styleSwitch(ctx, here(ctx))}
+                  <div class="menu-section"><a href="${ctx.base}/login">${icon('arrow-right')} ${t('login.sign_in_link')}</a></div></div></details>`
+            : html`<a href="${ctx.base}/login">${t('login.sign_in_link')}</a>`
         : ctx.locale.themeChoice || styleChoice(ctx.app)
-          ? html`<details class="menu t-user"><summary>${icon('settings')}<span class="sr-only">${t('theme.label')}</span></summary>
+          ? html`<details class="menu t-user"><summary title="${t('theme.label')}">${icon('settings')}<span class="sr-only">${t('theme.label')}</span></summary>
               <div class="menu-panel align-right">${themeSwitch(ctx, here(ctx))}${styleSwitch(ctx, here(ctx))}</div></details>`
           : ''}
     </header>

package/src/runtime/report.ts

@@ -567,17 +567,20 @@ export function pagerNav(ctx: PageContext, r: Region, info: PageInfo, linkAttr:
   </nav>`;
 }
 
-/** (sprint 76) Rows per page as a select in the pager (a GET form; app.js sends it on change, else its button). */
+/** (sprint 76) Rows per page as a select in the pager (a detached GET form; app.js sends it on change, else its button). */
 function sizeChooser(ctx: PageContext, r: Region, info: PageInfo): Raw | '' {
   if (r.type !== 'report' || r.config.interactive === false) return '';
   const st = reportState(ctx, r);
   const keep = [...ctx.params.entries()].filter(([k]) => k !== key(r, 'n') && k !== key(r, 'p') && k !== key(r, 'k') && !['clear', 'cs'].includes(k));
   const t = ctx.locale.t;
   if (info.total !== null && info.total <= PAGE_SIZES[0] && st.size === PAGE_SIZES[0]) return '';
-  return html`<form method="get" action="${ctx.base}/${ctx.page.page_no}" class="pager-size">${keep.map(([k, v]) => html`<input type="hidden" name="${k}" value="${v}">`)}${ctx.dialog ? html`<input type="hidden" name="dialog" value="1">` : ''}
+  // the region sits inside the page's form: the GET form is detached, the select and its button join it by its id
+  const form = `rn${r.id}`;
+  ctx.detached.push(html`<form id="${form}" method="get" action="${ctx.base}/${ctx.page.page_no}">${keep.map(([k, v]) => html`<input type="hidden" name="${k}" value="${v}">`)}${ctx.dialog ? html`<input type="hidden" name="dialog" value="1">` : ''}</form>`);
+  return html`<span class="pager-size">
     <label for="r${r.id}_size">${t('report.rows_per_page')}</label>
-    <select id="r${r.id}_size" name="${key(r, 'n')}" data-go>${[...new Set([...PAGE_SIZES, st.size])].sort((a, b) => a - b).map((n) => html`<option value="${n}"${n === st.size ? raw(' selected') : ''}>${n}</option>`)}</select>
-    <button class="btn btn-sm no-js-only">${t('report.go')}</button></form>`;
+    <select id="r${r.id}_size" name="${key(r, 'n')}" form="${form}" data-go>${[...new Set([...PAGE_SIZES, st.size])].sort((a, b) => a - b).map((n) => html`<option value="${n}"${n === st.size ? raw(' selected') : ''}>${n}</option>`)}</select>
+    <button class="btn btn-sm no-js-only" form="${form}">${t('report.go')}</button></span>`;
 }
 
 /** (sprint 76) The most values a column heading's menu lists. */
@@ -788,6 +791,8 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
   const st = reportState(ctx, r);
   const searchable = r.config.searchable !== false;
   const interactive = r.config.interactive !== false && searchable;
+  // (sprint 78; APEX: a faceted search's results have no search bar) one search field: the facets'
+  const searchBox = !ctx.page.regions.some((x) => x.type === 'facets' && x.config.search === true && Number(x.config.report) === r.id && ctx.vis?.regions.has(x.id) !== false);
 
   let res: pg.QueryResult<any[]>;
   let pageNo = st.page;
@@ -1124,14 +1129,14 @@ export async function renderReport(ctx: PageContext, r: Region, filterItems: Raw
       ? html`<div class="report-toolbar">
           ${filterItems}
           ${searchable
-            ? html`<div class="search" role="search">
-                <div class="search-field">${interactive
+            ? html`<div class="search"${searchBox ? raw(' role="search"') : ''}>
+                ${searchBox ? html`<div class="search-field">${interactive
                   ? html`<label class="sr-only" for="r${r.id}_qc">${t('report.search_column')}</label>
-                    <select id="r${r.id}_qc" class="search-scope" name="${key(r, 'qc')}" form="${searchForm}">
-                      <option value="">${t('report.all_columns')}</option>${cols.map(({ f }) => html`<option value="${f.name}"${f.name === st.searchCol ? raw(' selected') : ''}>${headingOf(r, f.name, ctx.locale.tr)}</option>`)}</select>`
+                    <span class="search-scope-wrap" title="${t('report.search_column')}">${icon('search')}<select id="r${r.id}_qc" class="search-scope" name="${key(r, 'qc')}" form="${searchForm}">
+                      <option value="">${t('report.all_columns')}</option>${cols.map(({ f }) => html`<option value="${f.name}"${f.name === st.searchCol ? raw(' selected') : ''}>${headingOf(r, f.name, ctx.locale.tr)}</option>`)}</select></span>`
                   : ''}
                   <input type="search" name="${key(r, 'q')}" value="${st.search}" placeholder="${t('report.search_all')}" form="${searchForm}" aria-label="${t('report.search')} ${r.title ?? ''}"></div>
-                <button class="btn" form="${searchForm}">${t('report.go')}</button>
+                <button class="btn no-js-only" form="${searchForm}">${t('report.go')}</button>` : ''}
                 ${actionsMenu}
               </div>`
             : ''}

package/src/runtime/routes.ts

@@ -44,7 +44,7 @@ import { PassThrough } from 'node:stream';
 import { reportPdf } from './pdf.ts';
 import { renderDocument } from './documents.ts';
 import { pwaHead } from './pwa.ts';
-import { resolveLocale, THEME_COOKIE, translateApp, translatePage, validTimeZone, type Locale } from './locale.ts';
+import { resolveLocale, THEME_COOKIE, themeCookieOptions, translateApp, translatePage, validTimeZone, type Locale } from './locale.ts';
 import { chrome, dialogClosePage, languagePicker, renderPage } from './render.ts';
 import { LOGIN_ERROR, LOGIN_USER, safeNext, signInForm } from './signin.ts';
 import { passwordResetRoutes } from './password-reset.ts';
@@ -122,13 +122,14 @@ export async function signIn(req: FastifyRequest, reply: FastifyReply, a: App, o
   // the browser's time zone (sent before signing in) stays with the new session
   if (typeof oldSession.state.__TZ === 'string') s.state.__TZ = oldSession.state.__TZ;
   // the account's preferences: light/dark, language and time zone
-  const pref = await runtime.one<{ theme_pref: string; language: string | null; time_zone: string | null }>(
+  const pref = await runtime.one<{ theme_pref: string | null; language: string | null; time_zone: string | null }>(
     'select theme_pref, language, time_zone from meta.account where lower(username) = lower($1)', [username]);
   if (pref) {
-    s.state.__THEME = pref.theme_pref;
+    // (sprint 79) no choice (null): the application's own mode
+    if (pref.theme_pref) s.state.__THEME = pref.theme_pref;
     if (pref.language) s.state.__LANG = pref.language;
     if (pref.time_zone) s.state.__TZ_PREF = pref.time_zone;
-    if (a.theme?.user_choice !== false) reply.setCookie(THEME_COOKIE, pref.theme_pref, { path: '/', sameSite: 'lax', secure: process.env.COOKIE_SECURE === 'true', maxAge: 365 * 86400 });
+    if (pref.theme_pref && a.theme?.user_choice !== false) reply.setCookie(THEME_COOKIE, pref.theme_pref, themeCookieOptions(base));
   }
   // the account's style variant for this app (honoured only while the app offers it: styles.ts)
   const style = await runtime.one<{ style: string }>(