@antelopejs/dms 0.10.0 → 0.11.0

package/frontend-vue/layers/dms-core/app/composables/useApiError.ts

@@ -67,16 +67,14 @@ export function resolveApiErrorMessage(error: unknown): string {
 
 export function useApiError(error: unknown, options?: Options) {
   const toast = useToast();
-  const dmsApp = useDmsApp();
-  const { t } = dmsApp.$i18n;
-  const translate = (message: string) => resolveApiMessage(t, message);
+  const { processApiMessage } = getAppTranslation();
 
   const title = options?.title || resolveApiErrorTitle(error);
   const description = options?.description || resolveApiErrorMessage(error);
 
   toast.add({
-    title: translate(title),
-    description: translate(description),
+    title: processApiMessage(title),
+    description: processApiMessage(description),
     color: "error",
   });
 }

package/frontend-vue/layers/dms-core/app/composables/useFieldErrors.ts

@@ -1,5 +1,8 @@
 import { nextTick, reactive } from "vue";
-import { resolveApiMessage } from "./translation/useTranslation";
+import {
+  type I18nTranslate,
+  resolveApiMessage,
+} from "./translation/useTranslation";
 import { resolveApiErrorMessage } from "./useApiError";
 
 /**
@@ -116,24 +119,23 @@ const FIELD_ERROR_KEYS = {
 /** Issue types whose size is a count (characters, items), not a value. */
 const COUNTED_TYPES = new Set(["string", "array", "set"]);
 
-// The data API (`@antelopejs/interface-data-api`) words its refusals in
-// English and lists the fields after a colon.
-const DATA_API_MESSAGES: ReadonlyArray<{ pattern: RegExp; message: string }> = [
-  {
-    pattern: /^Missing mandatory fields:\s*(.+)$/,
-    message: FIELD_ERROR_KEYS.required,
-  },
-  {
-    pattern: /^Invalid field type\(s\):\s*(.+)$/,
-    message: FIELD_ERROR_KEYS.invalid,
-  },
-];
+// The codes the data API (`@antelopejs/interface-data-api`) refuses a body
+// with, `{ code, fields }`: the message each field shows.
+const DATA_API_CODES: Readonly<Record<string, string>> = {
+  missing_mandatory_fields: FIELD_ERROR_KEYS.required,
+  invalid_field_types: FIELD_ERROR_KEYS.invalid,
+};
+
+// The same, naming the field: "Loss reason is required".
+const NAMED_FIELD_ERROR_KEYS: Readonly<Record<string, string>> = {
+  [FIELD_ERROR_KEYS.required]: "dms.field_errors.named_required",
+  [FIELD_ERROR_KEYS.invalid]: "dms.field_errors.named_invalid",
+};
 
 // `name: String must contain…`: one validation issue prefixed with its field.
 const FIELD_PREFIXED_MESSAGE = /^([\w.]+):\s+(.+)$/s;
 // `error.invalid_2fa_code`, `page.settings.roles.error.name_taken`.
 const BARE_I18N_KEY = /^[a-z0-9_]+(\.[a-z0-9_]+)+$/i;
-const LIST_SEPARATOR = /\s*,\s*/;
 
 /** The HTTP status of a fetch error; undefined for a network failure. */
 export function apiErrorStatus(error: unknown): number | undefined {
@@ -265,16 +267,19 @@ function fromFieldObject(body: Record<string, unknown>): ApiFieldError[] {
   ];
 }
 
+/** `{ code, fields }`, the data API's refusal of a body; undefined otherwise. */
+function fromCodedFields(
+  body: Record<string, unknown>,
+): ApiFieldError[] | undefined {
+  const { code, fields } = body;
+  const message = typeof code === "string" ? DATA_API_CODES[code] : undefined;
+  if (!message || !Array.isArray(fields)) return undefined;
+  return fields
+    .filter((field): field is string => typeof field === "string")
+    .map((field) => ({ field, message }));
+}
+
 function fromText(text: string): ApiFieldError[] {
-  for (const { pattern, message } of DATA_API_MESSAGES) {
-    const match = pattern.exec(text);
-    if (match) {
-      return match[1]!
-        .split(LIST_SEPARATOR)
-        .filter(Boolean)
-        .map((field) => ({ field, message }));
-    }
-  }
   const prefixed = FIELD_PREFIXED_MESSAGE.exec(text);
   if (prefixed) {
     const [, field, message] = prefixed;
@@ -320,7 +325,7 @@ function fromBody(body: unknown): ApiFieldError[] {
   const record = body as Record<string, unknown>;
   if (isIssueList(record.issues)) return fromIssues(record.issues);
   if (isIssueList(record.errors)) return fromIssues(record.errors);
-  return fromFieldObject(record);
+  return fromCodedFields(record) ?? fromFieldObject(record);
 }
 
 function isClientError(status: number | undefined): status is number {
@@ -337,8 +342,8 @@ function isClientError(status: number | undefined): status is number {
  *
  * Read, in order: a code the form maps to a field (`codes`, for any 4xx), a
  * zod issue list (what `assertValidation` answers), a `{ field, message }`
- * body (with optional `values` and `params`), the data API's "Missing mandatory fields: a, b" / "Invalid field
- * type(s): a" and a `field: message` text. A network failure, a 403, a 429
+ * body (with optional `values` and `params`), the data API's
+ * `{ code, fields }` and a `field: message` text. A network failure, a 403, a 429
  * or a 5xx never resolves to a field.
  *
  * @returns The field errors, one per field (the first issue wins), and
@@ -371,6 +376,36 @@ export function resolveFieldErrors<F extends string>(
   return { fields, hasUnmatched: hasUnmatched || fields.length === 0 };
 }
 
+/**
+ * The data API's refusal of a body (`{ code, fields }`) as one sentence per
+ * field naming it, translated: "Loss reason is required." Undefined for any
+ * other error. `labelOf` gives a field's label, translated; the field's id
+ * stands in for one it does not know.
+ */
+export function describeFieldErrors(
+  error: unknown,
+  translate: I18nTranslate,
+  labelOf: (field: string) => string | undefined,
+): string | undefined {
+  const status = apiErrorStatus(error);
+  if (status === undefined || !VALIDATION_STATUSES.has(status)) {
+    return undefined;
+  }
+  const body = bodyOf(error);
+  if (typeof body !== "object" || body === null || Array.isArray(body)) {
+    return undefined;
+  }
+  const entries = fromCodedFields(body as Record<string, unknown>);
+  if (!entries?.length) return undefined;
+  return entries
+    .map(({ field, message }) =>
+      translate(NAMED_FIELD_ERROR_KEYS[message]!, {
+        field: labelOf(field) ?? field,
+      }),
+    )
+    .join(" ");
+}
+
 /**
  * The message of an error that belongs to no field, for its toast: the API's
  * message key, the first validation issue's (or a generic one), else the

package/frontend-vue/layers/dms-core/app/utils/formatter.ts

@@ -227,50 +227,18 @@ export function formatDateTime(
   });
 }
 
-// The narrow no-break space French (and a few other locales) groups digits
-// with: the interface's font draws it a fraction of a digit wide, so "1 234"
-// read as "1234" beside a column's "12 345". Groups take a full no-break space.
-const NARROW_GROUP_SEPARATOR = " ";
-const GROUP_SEPARATOR = " ";
-
-/** `Intl.NumberFormat`, its digit groups always shown and visible. */
-export interface ReadableNumberFormat {
-  format(value: number): string;
-  formatToParts(value: number): Intl.NumberFormatPart[];
-  resolvedOptions(): Intl.ResolvedNumberFormatOptions;
-}
-
-function readablePart(part: Intl.NumberFormatPart): Intl.NumberFormatPart {
-  return part.type === "group" && part.value === NARROW_GROUP_SEPARATOR
-    ? { ...part, value: GROUP_SEPARATOR }
-    : part;
-}
-
 /**
  * `new Intl.NumberFormat(locale, options)` the way the interface writes a
  * figure: a four-digit one grouped like a longer one ("1 234" next to
- * "12 345", where Spanish or Polish would leave "1234" by default), with a
- * group separator wide enough to see. `options.useGrouping` still decides.
- * Throws as `Intl.NumberFormat` does on options it refuses.
+ * "12 345", where Spanish or Polish would leave "1234" by default).
+ * `options.useGrouping` still decides. Throws as `Intl.NumberFormat` does on
+ * options it refuses.
  */
 export function readableNumberFormat(
   locale?: string,
   options?: Intl.NumberFormatOptions,
-): ReadableNumberFormat {
-  const format = new Intl.NumberFormat(locale, {
-    useGrouping: true,
-    ...options,
-  });
-  const formatToParts = (value: number) =>
-    format.formatToParts(value).map(readablePart);
-  return {
-    format: (value) =>
-      formatToParts(value)
-        .map((part) => part.value)
-        .join(""),
-    formatToParts,
-    resolvedOptions: () => format.resolvedOptions(),
-  };
+): Intl.NumberFormat {
+  return new Intl.NumberFormat(locale, { useGrouping: true, ...options });
 }
 
 /**

package/frontend-vue/layers/dms-core/i18n/locales/core-en-GB.json

@@ -408,6 +408,8 @@
       "too_short": "This value is too short.",
       "too_small": "This value is too small.",
       "too_large": "This value is too large.",
+      "named_required": "{field} is required.",
+      "named_invalid": "{field} is not valid.",
       "with_values": "{message}: {values}",
       "code_incomplete": "Enter every digit of the code.",
       "password_rules": "The password doesn’t meet every rule.",

package/frontend-vue/layers/dms-core/i18n/locales/core-fr-FR.json

@@ -408,6 +408,8 @@
       "too_short": "Cette valeur est trop courte.",
       "too_small": "Cette valeur est trop petite.",
       "too_large": "Cette valeur est trop grande.",
+      "named_required": "{field} est obligatoire.",
+      "named_invalid": "{field} n’est pas valide.",
       "with_values": "{message} : {values}",
       "code_incomplete": "Saisissez tous les chiffres du code.",
       "password_rules": "Le mot de passe ne respecte pas toutes les règles.",

package/frontend-vue/layers/dms-core/shared/types/app-config.ts

@@ -67,8 +67,6 @@ export interface DmsFooterConfig {
    * the copyright.
    */
   copyright?: string | false;
-  /** The GitHub "Star" button of the DMS repository. */
-  githubStar?: boolean;
   /** The language picker. */
   localeSwitcher?: boolean;
 }

package/frontend-vue/layers/dms-layout/app/app.config.ts

@@ -215,7 +215,6 @@ export default {
     defaults: { logo: dmsLogo(), colors: dmsColors() },
     footer: {
       copyright: "Antelope",
-      githubStar: true,
       localeSwitcher: true,
     },
   },

package/frontend-vue/layers/dms-layout/app/assets/css/main.css

@@ -31,7 +31,12 @@
 }
 
 /* Self-hosted Geist (SIL OFL 1.1, files and LICENSE.txt in ../fonts).
-   Variable files cover weights 100–900 and keep builds deterministic offline. */
+   Variable files cover weights 100–900 and keep builds deterministic offline.
+   Geist has no narrow no-break space (U+202F), which French and a few other
+   locales group digits with: a fallback face drew it a fraction of a digit
+   wide, so "1 234" read as "1234". Each file here maps U+202F to its no-break
+   space glyph (fontTools: cmap[0x202F] = cmap[0xA0]); keep that mapping when
+   updating them. */
 @font-face {
   font-family: "Geist";
   font-style: normal;
@@ -155,6 +160,11 @@
      items, ~10px menus and 16px modals. */
     --ui-radius: calc(0.5rem / 1.5);
     --dms-radius-card: 0.875rem;
+    /* Pill tabs keep their v2 10px track, 7px tab and 4px count at the
+     default radius, and follow a theme that changes it. */
+    --dms-radius-tab-list: calc(var(--ui-radius) * 1.875);
+    --dms-radius-tab: calc(var(--ui-radius) * 1.3125);
+    --dms-radius-tab-badge: calc(var(--ui-radius) * 0.75);
 
     /* v2 shell metrics: 48px navbar, 56px sidebar brand row. */
     --ui-header-height: 3rem;

package/frontend-vue/layers/dms-layout/app/build/components/layout/DashboardPageBody.vue

@@ -5,7 +5,6 @@ import PageHeaderActionsOutlet from "./PageHeaderActionsOutlet.vue";
 import PageSkeleton from "./PageSkeleton.vue";
 import type { LayoutHeaderAction } from "./PageHeaderActionBar.vue";
 import { providePageHeaderActions } from "../../../composables/layout/usePageHeaderActions";
-import type { PageRecordSource } from "../../../composables/layout/usePageRecord";
 
 interface Props {
   hideHeader?: boolean;
@@ -15,14 +14,12 @@ interface Props {
   /** Header buttons declared by the backend page (`headerActions`). */
   headerActions?: LayoutHeaderAction[];
   /**
-   * The page query the server resolved the buttons' availability for, set
-   * when one declares an `availability` (`headerActionsQuery`).
+   * The page query the server served the buttons for, set when one declares
+   * an `availability` or the page reads a `record` (`headerActionsQuery`).
    */
   headerActionsQuery?: Record<string, string>;
   /** The route parameters (`:id`) they were resolved for, likewise. */
   headerActionsParams?: Record<string, string>;
-  /** The record the page shows, which header buttons may act on (`record`). */
-  record?: PageRecordSource;
   /** Space between the page header and the page. */
   headerClass?: string;
 }
@@ -35,7 +32,6 @@ const props = withDefaults(defineProps<Props>(), {
   headerActions: () => [],
   headerActionsQuery: undefined,
   headerActionsParams: undefined,
-  record: undefined,
   headerClass: "pb-6",
 });
 
@@ -75,7 +71,6 @@ const PAGE_SLOT_CLASS =
         :actions="props.headerActions"
         :served-query="props.headerActionsQuery"
         :served-params="props.headerActionsParams"
-        :record="props.record"
       />
     </template>
   </PageHeader>

package/frontend-vue/layers/dms-layout/app/build/components/layout/Footer.vue

@@ -1,17 +1,8 @@
 <script setup lang="ts">
 import type { SelectItem } from "@nuxt/ui";
-import {
-  GITHUB_REPOSITORY,
-  GITHUB_REPOSITORY_URL,
-} from "../../utils/github-repository";
 
 const EXTERNAL_LINK_PATTERN = /^https?:\/\//;
 const DEFAULT_COPYRIGHT = "Antelope";
-const GITHUB_REPOSITORY_API = `https://api.github.com/repos/${GITHUB_REPOSITORY}`;
-const GITHUB_STARS_CACHE_KEY = "dms-github-stars";
-// GitHub allows 60 anonymous API calls an hour per visitor: the count is
-// cached for the session and refreshed hourly.
-const GITHUB_STARS_CACHE_TTL_MS = 60 * 60 * 1000;
 
 const { locale, setLocale, t } = useI18n();
 const { loggedIn: isLoggedIn } = useDmsUserSession();
@@ -25,7 +16,6 @@ const copyright = computed(() =>
     ? null
     : processI18n(footer.value.copyright ?? DEFAULT_COPYRIGHT),
 );
-const showsGithubStar = computed(() => footer.value.githubStar !== false);
 const showsLocaleSwitcher = computed(
   () => footer.value.localeSwitcher !== false,
 );
@@ -39,71 +29,6 @@ function isExternal(to: string): boolean {
   return EXTERNAL_LINK_PATTERN.test(to);
 }
 
-interface CachedStars {
-  count: number;
-  fetchedAt: number;
-}
-
-const githubStars = ref<number | null>(null);
-// The count is fetched after mount: a placeholder holds its place until then,
-// and the segment only goes away if no count could be read.
-const githubStarsSettled = ref(false);
-const formattedGithubStars = computed(() =>
-  githubStars.value === null
-    ? ""
-    : formatNumber(githubStars.value, locale.value, { notation: "compact" }),
-);
-
-function readCachedStars(): CachedStars | null {
-  try {
-    const raw = sessionStorage.getItem(GITHUB_STARS_CACHE_KEY);
-    return raw ? (JSON.parse(raw) as CachedStars) : null;
-  } catch {
-    return null;
-  }
-}
-
-function writeCachedStars(count: number): void {
-  try {
-    sessionStorage.setItem(
-      GITHUB_STARS_CACHE_KEY,
-      JSON.stringify({ count, fetchedAt: Date.now() } satisfies CachedStars),
-    );
-  } catch {
-    /* storage unavailable: the count is fetched again next time */
-  }
-}
-
-// Starring itself happens on GitHub (it needs the visitor's GitHub session);
-// the button shows the live count and opens the repository.
-async function loadGithubStars(): Promise<void> {
-  const cached = readCachedStars();
-  if (cached && Date.now() - cached.fetchedAt < GITHUB_STARS_CACHE_TTL_MS) {
-    githubStars.value = cached.count;
-    return;
-  }
-  try {
-    const response = await fetch(GITHUB_REPOSITORY_API, {
-      headers: { Accept: "application/vnd.github+json" },
-    });
-    if (!response.ok) return;
-    const { stargazers_count: count } = (await response.json()) as {
-      stargazers_count?: unknown;
-    };
-    if (typeof count !== "number") return;
-    githubStars.value = count;
-    writeCachedStars(count);
-  } catch {
-    /* offline or rate-limited: the button shows without a count */
-  }
-}
-
-onMounted(async () => {
-  if (!showsGithubStar.value) return;
-  await loadGithubStars();
-  githubStarsSettled.value = true;
-});
-
 // A signed-in user on a page of this layout (the account switcher) switches
 // their profile's language too: the session applies that one on every load,
 // and the server writes in it, so switching the screen alone would leave the
@@ -119,8 +44,8 @@ async function onLocaleChange(code: unknown) {
 
 <template>
   <!-- v2 .au-foot: one quiet 12.5px row, the locale switcher pushed right.
-       On phones the links get a taller invisible hit area and the star
-       button grows to 32px, so each stays easy to tap. -->
+       On phones the links get a taller invisible hit area, so each stays
+       easy to tap. -->
   <footer
     class="border-default text-dimmed flex flex-wrap items-center gap-x-[18px] gap-y-1.5 border-t px-5 py-3 text-[12.5px] max-sm:justify-center"
   >
@@ -144,35 +69,6 @@ async function onLocaleChange(code: unknown) {
       </DmsLink>
     </template>
 
-    <!-- GitHub star button: icon + "Star" | live count, opens the repository. -->
-    <a
-      v-if="showsGithubStar"
-      :href="GITHUB_REPOSITORY_URL"
-      target="_blank"
-      rel="noopener noreferrer"
-      :aria-label="t('empty_layout.footer.github_star_label')"
-      :title="t('empty_layout.footer.github_star_label')"
-      class="border-default text-muted hover:text-highlighted hover:border-accented hover:bg-elevated inline-flex h-6 items-stretch overflow-hidden rounded-md border transition-colors max-sm:h-8"
-    >
-      <span class="flex items-center gap-1.5 px-2 font-medium">
-        <UIcon name="i-ph-github-logo" class="size-3.5" :aria-hidden="true" />
-        <UIcon name="i-ph-star" class="size-3" :aria-hidden="true" />
-        {{ t("empty_layout.footer.github_star") }}
-      </span>
-      <span
-        v-if="githubStars !== null || !githubStarsSettled"
-        class="border-default flex items-center border-s px-2 font-mono tabular-nums"
-      >
-        <USkeleton
-          :aria-label="t('dms.a11y.loading')"
-          v-if="githubStars === null"
-          aria-hidden="true"
-          class="h-2.5 w-6"
-        />
-        <template v-else>{{ formattedGithubStars }}</template>
-      </span>
-    </a>
-
     <USelect
       v-if="showsLocaleSwitcher"
       :model-value="locale"

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionBar.vue

@@ -24,7 +24,6 @@ import {
   findServedQuickAction,
 } from "#dms-ui/app/build/utils/dispatchQuickActionTarget";
 import { DEFAULT_PAGE_HEADER_ACTIONS_ORDER } from "../../../composables/layout/usePageHeaderActions";
-import { type PageRecord, withPageRecord } from "../../../utils/pageRecord";
 
 /**
  * A button of the page header as the server serves it (`DefaultLayout({
@@ -44,8 +43,6 @@ export interface LayoutHeaderAction
   buttonId?: string;
   /** Place among the header's buttons, smallest first; `0` by default. */
   order?: number;
-  /** Acts on the page's record: disabled while it loads, gone without it. */
-  requiresRecord?: boolean;
 }
 
 interface PageHeaderActionBarProps {
@@ -55,8 +52,6 @@ interface PageHeaderActionBarProps {
    * among the buttons: after every button of an order up to this one.
    */
   slotOrder?: number;
-  /** The record the page shows, for the buttons acting on it. */
-  record?: PageRecord;
 }
 
 interface ResolvedHeaderAction {
@@ -71,7 +66,6 @@ interface ResolvedHeaderAction {
 
 const props = withDefaults(defineProps<PageHeaderActionBarProps>(), {
   slotOrder: DEFAULT_PAGE_HEADER_ACTIONS_ORDER,
-  record: undefined,
 });
 
 const { processI18n } = useTranslation();
@@ -279,8 +273,6 @@ function lockForPreview(action: ResolvedHeaderAction): ResolvedHeaderAction {
 
 const resolved = computed(() =>
   props.actions
-    .map((action) => withPageRecord(action, props.record))
-    .filter((action): action is LayoutHeaderAction => action !== null)
     .map(resolveAction)
     .filter((action): action is ResolvedHeaderAction => action !== null)
     .map(lockForPreview)

package/frontend-vue/layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue

@@ -5,10 +5,6 @@ import PageHeaderActionBar, {
 } from "./PageHeaderActionBar.vue";
 import { injectPageHeaderActionsHost } from "../../../composables/layout/usePageHeaderActions";
 import { useServedHeaderActions } from "../../../composables/layout/useServedHeaderActions";
-import {
-  type PageRecordSource,
-  usePageRecord,
-} from "../../../composables/layout/usePageRecord";
 
 interface PageHeaderActionsOutletProps {
   /** Header buttons declared by the backend page (`headerActions`). */
@@ -17,18 +13,13 @@ interface PageHeaderActionsOutletProps {
   servedQuery?: Record<string, string>;
   /** The route parameters the server resolved their availability for. */
   servedParams?: Record<string, string>;
-  /** The record the page shows (`record` of the layout). */
-  record?: PageRecordSource;
 }
 
 const props = withDefaults(defineProps<PageHeaderActionsOutletProps>(), {
   servedQuery: undefined,
   servedParams: undefined,
-  record: undefined,
 });
 
-const pageRecord = usePageRecord(() => props.record);
-
 const actions = useServedHeaderActions({
   actions: () => props.actions,
   servedQuery: () => props.servedQuery,
@@ -82,7 +73,6 @@ const showsServerMarkup = computed(
     <PageHeaderActionBar
       :actions="actions"
       :slot-order="host?.actionsOrder.value"
-      :record="pageRecord"
     >
       <component :is="pageActions" v-if="pageActions" />
     </PageHeaderActionBar>

package/frontend-vue/layers/dms-layout/app/build/utils/github-repository.ts

@@ -1,5 +1,5 @@
 /** The DMS repository on GitHub, as `owner/name`. */
-export const GITHUB_REPOSITORY = "AntelopeJS/dms";
+const GITHUB_REPOSITORY = "AntelopeJS/dms";
 
-/** Opened by the auth footer's star button and by the dashboard's star prompt. */
+/** Opened by the dashboard's star prompt. */
 export const GITHUB_REPOSITORY_URL = `https://github.com/${GITHUB_REPOSITORY}`;

package/frontend-vue/layers/dms-layout/app/composables/layout/useServedHeaderActions.ts

@@ -1,4 +1,11 @@
-import { computed, shallowRef, watch, type ComputedRef } from "vue";
+import {
+  computed,
+  onScopeDispose,
+  shallowRef,
+  watch,
+  type ComputedRef,
+} from "vue";
+import { onPageBlocksRefresh } from "#dms-ui/app/utils/blockRefresh";
 import type { LayoutHeaderAction } from "../../build/components/layout/PageHeaderActionBar.vue";
 import type { PageLayout } from "../../types/page";
 import {
@@ -13,8 +20,8 @@ interface ServedHeaderActionsOptions {
   /** The buttons the page layout was served with. */
   actions: () => LayoutHeaderAction[];
   /**
-   * The page query their availability was resolved for, set when one of them
-   * declares an `availability` (`headerActionsQuery`).
+   * The page query they were served for, set when one of them declares an
+   * `availability` or the page reads a `record` (`headerActionsQuery`).
    */
   servedQuery: () => Record<string, string> | undefined;
   /** The route parameters (`:id`) their availability was resolved for. */
@@ -29,7 +36,10 @@ interface ServedHeaderActionsOptions {
  * for that query and takes its buttons, keeping the last ones meanwhile. The
  * same goes for the route parameters: the layout of `/projects/project/:id`
  * is cached once for the page, whichever record it was first served for.
- * Buttons without an availability never cause a request.
+ * A write on the page (`refreshPageBlocks()`, after a header button or a
+ * form) asks again too: it may have changed the record the buttons read, or
+ * what their availability checks. Buttons without an availability, on a page
+ * reading no record, never cause a request.
  */
 export function useServedHeaderActions({
   actions,
@@ -81,12 +91,22 @@ export function useServedHeaderActions({
     void askFor(fillRouteParams(layoutUrl, params), current);
   }
 
+  function askAgain() {
+    const layoutUrl = pageRoute()?.metadata?.layoutUrl;
+    if (!servedQuery() || !layoutUrl) return;
+    void askFor(
+      fillRouteParams(layoutUrl, pageRoute()?.params ?? {}),
+      pageQueryValues(route.query as Record<string, unknown>),
+    );
+  }
+
   if (!import.meta.env.SSR) {
     watch(
       [() => route.query, () => route.path, servedQuery, servedParams],
       follow,
       { immediate: true },
     );
+    onScopeDispose(onPageBlocksRefresh(askAgain));
   }
 
   return computed(() => refreshed.value ?? actions());

package/frontend-vue/layers/dms-layout/app/composables/page/useModuleStore.ts

@@ -69,16 +69,22 @@ export const useModuleStore = () => {
   }
 
   let isStopped = false;
+  let stopWaiting: (() => void) | undefined;
 
   /**
    * Starts following once mounted: reads again only when the first read
    * failed, or something moves; a listing already on screen stays as is.
-   * A first read still in flight (a client navigation) is waited for.
+   * A read still in flight (a client navigation, or the background read of a
+   * return to the page) is waited for until it settles.
    */
   function start(): void {
     isStopped = false;
+    stopWaiting?.();
     if (initial.pending.value) {
-      void Promise.resolve(initial).then(() => {
+      stopWaiting = watch(initial.pending, (pending) => {
+        if (pending) return;
+        stopWaiting?.();
+        stopWaiting = undefined;
         if (!isStopped) start();
       });
       return;
@@ -139,6 +145,8 @@ export const useModuleStore = () => {
 
   function stop(): void {
     isStopped = true;
+    stopWaiting?.();
+    stopWaiting = undefined;
     if (followTimer) clearTimeout(followTimer);
     followTimer = undefined;
   }