@antelopejs/dms 0.10.0 → 0.11.0

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

@@ -0,0 +1,162 @@
+import { onScopeDispose, type Ref, watch } from "vue";
+import type { RealtimeTopicHandler } from "#dms-core/app/composables/realtime/useUserRealtime";
+import type { PageLayout } from "../../types/page";
+import {
+  fillRouteParams,
+  isSamePageQuery,
+  isSameRouteParams,
+  isViewStateKey,
+  layoutUrlWithQuery,
+  pageQueryValues,
+} from "../../utils/pageQuery";
+
+// One frame: the events of one burst (a bulk delete) read the record once.
+const BURST_WINDOW_MS = 16;
+
+/** How the server read the record a page shows (`DefaultLayout({ record })`). */
+type PageRecordStatus = "found" | "missing" | "error";
+
+interface RecordLayoutOptions {
+  recordStatus?: PageRecordStatus;
+  headerActionsQuery?: Record<string, string>;
+  headerActionsParams?: Record<string, string>;
+}
+
+/** What the page's record deletion listens to. */
+export interface PageRecordDeletionSource {
+  /** The page's layout as it was first served. */
+  pageLayout: () => PageLayout | null;
+  /** The page's realtime topics, once its session is subscribed to it. */
+  pageTopics: Ref<string[]>;
+  subscribe(topic: string, handler: RealtimeTopicHandler): () => void;
+}
+
+const optionsOf = (layout: PageLayout | null | undefined) =>
+  layout?.layout.options as RecordLayoutOptions | undefined;
+
+/**
+ * Leaves a detail page whose record was deleted, in every tab and for every
+ * member on it. The layout of a page reading a record (`DefaultLayout({
+ * record })`) says how the server read it (`recordStatus`); on each event of
+ * one of the page's realtime topics, the page asks its layout again, and a
+ * record it had `found` that is now `missing` was deleted: a toast says so,
+ * and the page opens its list (`MenuOptions.parent`), or stays on its
+ * not-found blocks without one. A page reading no record never asks.
+ */
+export function usePageRecordDeletion(source: PageRecordDeletionSource): void {
+  if (import.meta.env.SSR) return;
+  const route = useDmsRoute();
+  const siteLayout = useSiteLayout();
+  const toast = useToast();
+  const { t } = useI18n();
+
+  const pageRoute = () => siteLayout.findMatchingRoute(route.path);
+  const currentQuery = () =>
+    pageQueryValues(route.query as Record<string, unknown>);
+  /** The page URL the record is named by, leaving out the view's state. */
+  const recordKey = () =>
+    JSON.stringify([
+      route.path,
+      Object.entries(currentQuery()).filter(([name]) => !isViewStateKey(name)),
+    ]);
+
+  let known: { key: string; status: PageRecordStatus } | undefined;
+  let latestRead = 0;
+
+  async function readStatus(): Promise<PageRecordStatus | undefined> {
+    const match = pageRoute();
+    const layoutUrl = match?.metadata?.layoutUrl;
+    if (!layoutUrl) return undefined;
+    const { $authFetch } = useAuthFetch();
+    try {
+      const layout = await $authFetch<PageLayout>(
+        layoutUrlWithQuery(
+          fillRouteParams(layoutUrl, match.params ?? {}),
+          currentQuery(),
+        ),
+      );
+      return optionsOf(layout)?.recordStatus;
+    } catch {
+      // Unknown: the record is not taken for deleted on a failed read.
+      return undefined;
+    }
+  }
+
+  async function leave(): Promise<void> {
+    toast.add({
+      title: t("page.record_deleted.title"),
+      description: t("page.record_deleted.description"),
+      color: "warning",
+      icon: "i-ph-trash",
+    });
+    const match = pageRoute();
+    const parentSlug = match?.metadata?.parentSlug;
+    if (!parentSlug) return;
+    const path = fillRouteParams(parentSlug, match.params ?? {});
+    if (path.includes(":")) return;
+    const parent = siteLayout.findMatchingRoute(path)?.metadata;
+    if (!parent || parent.hasAccess === false) return;
+    await navigateDms(path, { replace: true });
+  }
+
+  async function check(): Promise<void> {
+    const key = recordKey();
+    const read = ++latestRead;
+    const status = await readStatus();
+    if (read !== latestRead || key !== recordKey() || !status) return;
+    const previous = known?.key === key ? known.status : undefined;
+    known = { key, status };
+    if (previous === "found" && status === "missing") await leave();
+  }
+
+  const declaresRecord = () =>
+    optionsOf(source.pageLayout())?.recordStatus !== undefined;
+
+  // What the page was served with stands for its URL when it was served for
+  // it; another record of the same page is read once to know where it stands.
+  function follow(): void {
+    if (known?.key === recordKey()) return;
+    latestRead++;
+    known = undefined;
+    const options = optionsOf(source.pageLayout());
+    if (!options?.recordStatus) return;
+    const served =
+      isSamePageQuery(options.headerActionsQuery ?? {}, currentQuery()) &&
+      isSameRouteParams(
+        options.headerActionsParams ?? {},
+        pageRoute()?.params ?? {},
+      );
+    if (served) known = { key: recordKey(), status: options.recordStatus };
+    else void check();
+  }
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  // Presence snapshots ride the same topics: they carry no `type`.
+  const onEvent: RealtimeTopicHandler = (event) => {
+    if (!("type" in event) || !declaresRecord()) return;
+    clearTimeout(timer);
+    timer = setTimeout(() => void check(), BURST_WINDOW_MS);
+  };
+
+  let unsubscribes: Array<() => void> = [];
+  const unsubscribeAll = () => {
+    for (const unsubscribe of unsubscribes) unsubscribe();
+    unsubscribes = [];
+  };
+  watch(
+    source.pageTopics,
+    (topics) => {
+      unsubscribeAll();
+      unsubscribes = topics.map((topic) => source.subscribe(topic, onEvent));
+    },
+    { immediate: true },
+  );
+  watch([() => route.path, () => route.query, source.pageLayout], follow, {
+    immediate: true,
+  });
+  onScopeDispose(() => {
+    unsubscribeAll();
+    clearTimeout(timer);
+    latestRead++;
+  });
+}

package/frontend-vue/layers/dms-layout/app/custom-layouts/DefaultLayout.vue

@@ -2,7 +2,6 @@
 import DashboardFrame from "../build/components/layout/DashboardFrame.vue";
 import DashboardPageBody from "../build/components/layout/DashboardPageBody.vue";
 import type { LayoutHeaderAction } from "../build/components/layout/PageHeaderActionBar.vue";
-import type { PageRecordSource } from "../composables/layout/usePageRecord";
 
 interface Props {
   fullWidth?: boolean;
@@ -14,14 +13,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;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,7 +31,6 @@ const props = withDefaults(defineProps<Props>(), {
   headerActions: () => [],
   headerActionsQuery: undefined,
   headerActionsParams: undefined,
-  record: undefined,
 });
 </script>
 
@@ -48,7 +44,6 @@ const props = withDefaults(defineProps<Props>(), {
       :header-actions="props.headerActions"
       :header-actions-query="props.headerActionsQuery"
       :header-actions-params="props.headerActionsParams"
-      :record="props.record"
     >
       <slot />
     </DashboardPageBody>

package/frontend-vue/layers/dms-layout/app/custom-layouts/SettingsLayout.vue

@@ -2,7 +2,6 @@
 import DashboardFrame from "../build/components/layout/DashboardFrame.vue";
 import DashboardPageBody from "../build/components/layout/DashboardPageBody.vue";
 import type { LayoutHeaderAction } from "../build/components/layout/PageHeaderActionBar.vue";
-import type { PageRecordSource } from "../composables/layout/usePageRecord";
 import SettingsShell from "../build/components/pages/settings/shell/SettingsShell.vue";
 
 interface Props {
@@ -14,14 +13,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;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,7 +30,6 @@ const props = withDefaults(defineProps<Props>(), {
   headerActions: () => [],
   headerActionsQuery: undefined,
   headerActionsParams: undefined,
-  record: undefined,
 });
 </script>
 
@@ -48,7 +44,6 @@ const props = withDefaults(defineProps<Props>(), {
         :header-actions="props.headerActions"
         :header-actions-query="props.headerActionsQuery"
         :header-actions-params="props.headerActionsParams"
-        :record="props.record"
         header-class="pb-5"
       >
         <slot />

package/frontend-vue/layers/dms-layout/app/pages/[...slug].vue

@@ -4,6 +4,7 @@ import { holdPageHeaderActions } from "../composables/layout/usePageHeaderAction
 import { useDevReloading } from "../build/composables/dev-reload/useDevReloadHolder";
 import { usePageLiveHost } from "#dms-ui/app/build/composables/live/usePageLiveHost";
 import { usePageDataRefresh } from "#dms-ui/app/build/composables/live/usePageDataRefresh";
+import { usePageRecordDeletion } from "../composables/page/usePageRecordDeletion";
 import { pageValidationRedirect } from "../build/utils/pageValidationRedirect";
 import { resolveComponentChildren } from "#dms-ui/app/utils/componentTree";
 
@@ -251,6 +252,12 @@ usePageLiveHost(
 );
 // The page's `useApiData` reads follow its refreshes and its realtime events.
 usePageDataRefresh(realtime);
+// A detail page leaves for its list once its record is deleted.
+usePageRecordDeletion({
+  pageLayout: () => pageLayout.value,
+  pageTopics: realtime.pageTopics,
+  subscribe: realtime.subscribe,
+});
 
 function buildPageSetupContext(
   pageInfo: PageInfo,

package/frontend-vue/layers/dms-layout/app/plugins/command-palette-navigation.client.ts

@@ -13,14 +13,14 @@ function isHiddenFromNavigation(node: SiteLayoutTree): boolean {
 function collectNavigationItems(
   node: SiteLayoutTree,
   ancestors: string[],
-  translate: I18nTranslate,
+  translation: AppTranslation,
   items: CommandPaletteItem[],
 ): void {
   for (const childId of node.childrenOrders) {
     const child = node.children[childId];
     if (!child || isHiddenFromNavigation(child)) continue;
 
-    const label = resolveI18nKey(translate, child.displayName);
+    const label = translation.processI18n(child.displayName);
     const to = buildMenuItemTarget(child);
     // The account entries (Settings, Profile) are the session group's.
     if (to && child.fullSlug && !isAccountMenuRoute(to)) {
@@ -33,40 +33,40 @@ function collectNavigationItems(
         icon: child.icon ?? DEFAULT_PAGE_ICON,
         to,
         [COMMAND_PALETTE_SEARCH_TEXT_KEY]: resolveOptionalI18nKey(
-          translate,
+          translation.t,
           child.description,
         ),
       });
     }
-    collectNavigationItems(child, [...ancestors, label], translate, items);
+    collectNavigationItems(child, [...ancestors, label], translation, items);
   }
 }
 
 function buildNavigationGroups(
   tree: SiteLayoutTree | undefined,
-  translate: I18nTranslate,
+  translation: AppTranslation,
 ): CommandPaletteGroup[] {
   if (!tree) return [];
 
   const items: CommandPaletteItem[] = [];
-  collectNavigationItems(tree, [], translate, items);
+  collectNavigationItems(tree, [], translation, items);
   if (items.length === 0) return [];
 
   return [
     {
       id: NAVIGATION_GROUP_ID,
-      label: translate("commandPalette.groups.navigation", {}),
+      label: translation.t("commandPalette.groups.navigation"),
       items,
     },
   ];
 }
 
 export default defineDmsPlugin(() => {
-  const { translate } = getPluginI18n();
+  const translation = getAppTranslation();
   const { siteLayoutTree } = useSiteLayout();
 
   const groups = computed<CommandPaletteGroup[]>(() =>
-    buildNavigationGroups(siteLayoutTree.value, translate),
+    buildNavigationGroups(siteLayoutTree.value, translation),
   );
 
   registerCommandPaletteSource({

package/frontend-vue/layers/dms-layout/app/plugins/command-palette-personal-pages.client.ts

@@ -11,15 +11,15 @@ const RECENT_MODULES_GROUP_ID = "recent-modules";
 
 function buildFavoritesGroup(
   favorites: FavoritePage[],
-  translate: I18nTranslate,
+  translation: AppTranslation,
 ): CommandPaletteGroup | null {
   if (favorites.length === 0) return null;
 
   return {
     id: FAVORITES_GROUP_ID,
-    label: translate("menu.favorites", {}),
+    label: translation.t("menu.favorites"),
     items: favorites.map((favorite) => ({
-      label: resolveI18nKey(translate, favorite.title),
+      label: translation.processI18n(favorite.title),
       icon: favorite.icon ?? DEFAULT_PAGE_ICON,
       to: favorite.path,
     })),
@@ -28,15 +28,15 @@ function buildFavoritesGroup(
 
 function buildRecentModulesGroup(
   modules: RecentModule[],
-  translate: I18nTranslate,
+  translation: AppTranslation,
 ): CommandPaletteGroup | null {
   if (modules.length === 0) return null;
 
   return {
     id: RECENT_MODULES_GROUP_ID,
-    label: translate("commandPalette.groups.recentModules", {}),
+    label: translation.t("commandPalette.groups.recentModules"),
     items: modules.map((module) => ({
-      label: resolveI18nKey(translate, module.title),
+      label: translation.processI18n(module.title),
       icon: module.icon,
       to: module.to,
     })),
@@ -44,17 +44,17 @@ function buildRecentModulesGroup(
 }
 
 export default defineDmsPlugin(() => {
-  const { translate } = getPluginI18n();
+  const translation = getAppTranslation();
   const { sortedFavorites } = useFavoritePages();
   const { entries } = useModuleHistory();
   const { modules, siteLayoutTree } = useSiteLayout();
 
   const groups = computed<CommandPaletteGroup[]>(() =>
     [
-      buildFavoritesGroup(sortedFavorites.value, translate),
+      buildFavoritesGroup(sortedFavorites.value, translation),
       buildRecentModulesGroup(
         recentModules(entries.value, modules.value, siteLayoutTree.value),
-        translate,
+        translation,
       ),
     ].filter((group): group is CommandPaletteGroup => group !== null),
   );

package/frontend-vue/layers/dms-layout/app/plugins/command-palette-quick-actions.client.ts

@@ -6,10 +6,10 @@ const QUICK_ACTIONS_GROUP_PREFIX = "quick-actions";
 
 function buildActionItem(
   action: QuickActionInfo,
-  translate: I18nTranslate,
+  translation: AppTranslation,
 ): CommandPaletteItem {
   return {
-    label: resolveI18nKey(translate, action.displayName),
+    label: translation.processI18n(action.displayName),
     icon: action.icon,
     onSelect: () => {
       void dispatchQuickActionTarget(action.target);
@@ -19,21 +19,21 @@ function buildActionItem(
 
 function buildQuickActionGroups(
   categoryGroups: QuickActionCategoryGroup[],
-  translate: I18nTranslate,
+  translation: AppTranslation,
 ): CommandPaletteGroup[] {
   return categoryGroups.map((group) => ({
     id: `${QUICK_ACTIONS_GROUP_PREFIX}-${group.category.id}`,
-    label: resolveI18nKey(translate, group.category.displayName),
-    items: group.actions.map((action) => buildActionItem(action, translate)),
+    label: translation.processI18n(group.category.displayName),
+    items: group.actions.map((action) => buildActionItem(action, translation)),
   }));
 }
 
 export default defineDmsPlugin(() => {
-  const { translate } = getPluginI18n();
+  const translation = getAppTranslation();
   const { categoryGroups } = useQuickActions();
 
   const groups = computed<CommandPaletteGroup[]>(() =>
-    buildQuickActionGroups(categoryGroups.value, translate),
+    buildQuickActionGroups(categoryGroups.value, translation),
   );
 
   registerCommandPaletteSource({

package/frontend-vue/layers/dms-layout/app/plugins/command-palette-session.client.ts

@@ -22,16 +22,17 @@ function uniqueByCode<T extends LocaleOption>(locales: T[]): T[] {
   });
 }
 
-function buildAccountItems(translate: I18nTranslate): CommandPaletteItem[] {
+function buildAccountItems(t: AppTranslation["t"]): CommandPaletteItem[] {
   return ACCOUNT_MENU_ENTRIES.map((entry) => ({
-    label: translate(entry.labelKey, {}),
+    label: t(entry.labelKey),
     icon: entry.icon,
     to: entry.to,
   }));
 }
 
 export default defineDmsPlugin(() => {
-  const { i18n, translate } = getPluginI18n();
+  const { $i18n: i18n } = useDmsApp();
+  const { t } = getAppTranslation();
   const toast = useToast();
   const { logout } = useLogout();
   const { changeLanguage } = useUserLanguage();
@@ -49,10 +50,10 @@ export default defineDmsPlugin(() => {
   async function copyCurrentUrl(): Promise<void> {
     try {
       await copy(window.location.href);
-      toast.add({ title: translate("commandPalette.session.urlCopied", {}) });
+      toast.add({ title: t("commandPalette.session.urlCopied") });
     } catch {
       toast.add({
-        title: translate("commandPalette.session.copyFailed", {}),
+        title: t("commandPalette.session.copyFailed"),
         color: "error",
       });
     }
@@ -61,23 +62,23 @@ export default defineDmsPlugin(() => {
   function buildSessionGroup(): CommandPaletteGroup {
     return {
       id: SESSION_GROUP_ID,
-      label: translate("commandPalette.groups.session", {}),
+      label: t("commandPalette.groups.session"),
       items: [
-        ...buildAccountItems(translate),
+        ...buildAccountItems(t),
         {
-          label: translate("commandPalette.session.changeLanguage", {}),
+          label: t("commandPalette.session.changeLanguage"),
           icon: LANGUAGE_ICON,
           children: localeItems(),
         },
         {
-          label: translate("commandPalette.session.copyUrl", {}),
+          label: t("commandPalette.session.copyUrl"),
           icon: COPY_URL_ICON,
           onSelect: () => {
             void copyCurrentUrl();
           },
         },
         {
-          label: translate("button.logout", {}),
+          label: t("button.logout"),
           icon: LOGOUT_ICON,
           onSelect: () => {
             void logout();

package/frontend-vue/layers/dms-layout/app/theme/actions.ts

@@ -330,14 +330,15 @@ const tabsTheme = {
     trigger: "data-[state=active]:font-semibold",
     // Counts as mono chips, tinted with the accent on the active tab.
     trailingBadge:
-      "font-mono text-[10.5px] h-4 px-[5px] rounded-[4px] ring-0 bg-elevated text-dimmed group-data-[state=active]:bg-(--dms-accent-tint) group-data-[state=active]:text-primary",
+      "font-mono text-[10.5px] h-4 px-[5px] rounded-(--dms-radius-tab-badge) ring-0 bg-elevated text-dimmed group-data-[state=active]:bg-(--dms-accent-tint) group-data-[state=active]:text-primary",
   },
   variants: {
     variant: {
       pill: {
-        list: "bg-(--dms-bg-muted) ring ring-inset ring-default p-[3px] gap-0.5 rounded-[10px]",
-        indicator: "ring ring-accented shadow-(--shadow-sm) rounded-[7px]",
-        trigger: "rounded-[7px] before:rounded-[7px]",
+        list: "bg-(--dms-bg-muted) ring ring-inset ring-default p-[3px] gap-0.5 rounded-(--dms-radius-tab-list)",
+        indicator:
+          "ring ring-accented shadow-(--shadow-sm) rounded-(--dms-radius-tab)",
+        trigger: "rounded-(--dms-radius-tab) before:rounded-(--dms-radius-tab)",
       },
     },
     // A vertical list sits at the top of its panel, not centred beside it.

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

@@ -100,6 +100,10 @@
       "no_content_title": "No content available",
       "no_content_message": "This page has not been configured yet. Please contact the administrator."
     },
+    "record_deleted": {
+      "title": "Deleted",
+      "description": "What this page showed was deleted. It is no longer available."
+    },
     "no_visible_blocks": {
       "title": "Nothing to show for you here",
       "description": "Your role doesn’t let you see any part of this page. Ask a workspace owner for access."
@@ -826,7 +830,7 @@
       },
       "disabled": {
         "title": "The store is read-only here",
-        "description": "Modules are installed from development, which writes them to antelope.config.ts; this platform loads what that file declares. Set store.enabled to true in the DMS configuration to change them from here."
+        "description": "Modules are installed from development, which writes them to antelope.config.ts; this platform loads what that file declares. Change them from development."
       },
       "load_error": "The module store could not be loaded",
       "search_placeholder": "Search the store",
@@ -1040,9 +1044,7 @@
     "footer": {
       "documentation": "Documentation",
       "website": "Website",
-      "language": "Language",
-      "github_star": "Star",
-      "github_star_label": "Star AntelopeJS DMS on GitHub"
+      "language": "Language"
     }
   },
   "error": {

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

@@ -100,6 +100,10 @@
       "no_content_title": "Aucun contenu disponible",
       "no_content_message": "Cette page n'a pas encore été configurée. Veuillez contacter l'administrateur."
     },
+    "record_deleted": {
+      "title": "Supprimé",
+      "description": "Ce que montrait cette page a été supprimé. Il n’est plus disponible."
+    },
     "no_visible_blocks": {
       "title": "Rien à afficher pour vous ici",
       "description": "Votre rôle ne vous permet de voir aucune partie de cette page. Demandez l’accès à un propriétaire de l’espace."
@@ -830,7 +834,7 @@
       },
       "disabled": {
         "title": "Le store est en lecture seule ici",
-        "description": "Les modules s’installent depuis le développement, qui les écrit dans antelope.config.ts ; cette plateforme charge ce que déclare ce fichier. Passez store.enabled à true dans la configuration du DMS pour les modifier d’ici."
+        "description": "Les modules s’installent depuis le développement, qui les écrit dans antelope.config.ts ; cette plateforme charge ce que déclare ce fichier. Modifiez-les depuis le développement."
       },
       "load_error": "Le store de modules n’a pas pu être chargé",
       "search_placeholder": "Rechercher dans le store",
@@ -1044,9 +1048,7 @@
     "footer": {
       "documentation": "Documentation",
       "website": "Site web",
-      "language": "Langue",
-      "github_star": "Star",
-      "github_star_label": "Mettre une étoile à AntelopeJS DMS sur GitHub"
+      "language": "Langue"
     }
   },
   "error": {

package/frontend-vue/layers/dms-ui/app/build/components/form/FormLoadError.vue

@@ -27,8 +27,12 @@ const { t } = useI18n();
 const VARIANTS: Record<FormLoadFailure, EmptyStateVariant> = {
   forbidden: "no-access",
   missing: "no-data",
+  not_found: "no-result",
   error: "error",
 };
+// A record the address names none of, or one that does not exist, is not
+// read again by trying.
+const RETRIES = new Set<FormLoadFailure>(["forbidden", "error"]);
 </script>
 
 <template>
@@ -38,7 +42,7 @@ const VARIANTS: Record<FormLoadFailure, EmptyStateVariant> = {
     :title="t(`dms.form.load_error.${props.failure}_title`)"
     :description="t(`dms.form.load_error.${props.failure}_description`)"
   >
-    <template v-if="props.failure !== 'missing'" #actions>
+    <template v-if="RETRIES.has(props.failure)" #actions>
       <UButton
         :label="t('dms.form.load_error.retry')"
         icon="i-ph-arrows-clockwise"

package/frontend-vue/layers/dms-ui/app/build/components/table/FiltersRow.vue

@@ -207,7 +207,7 @@ const { labelsOf: relationLabels } = useRelationFilterLabels(() =>
 const displayValue = (filter: TableFilter): string => {
   const source = relationSource(filter);
   const names = source ? relationLabels(source) : [];
-  if (names.length) return names.join(", ");
+  if (names.length) return names.map((name) => name.label).join(", ");
   const labels = itemLabels(filter);
   if (labels) return labels;
   const formatted = formatFilterValue(
@@ -219,12 +219,22 @@ const displayValue = (filter: TableFilter): string => {
   return formatted || EMPTY_FILTER_VALUE;
 };
 
+// The ids of a relation filter its route did not answer, named on hover.
+const notFoundIds = (filter: TableFilter): string => {
+  const source = relationSource(filter);
+  if (!source) return "";
+  return relationLabels(source)
+    .flatMap((name) => (name.notFoundId ? [name.notFoundId] : []))
+    .join(", ");
+};
+
 // The whole filter in words, for a chip shrunk to an ellipsis.
 const chipTitle = (filter: TableFilter, label?: string): string =>
   [
     label ?? getColumn(filter.accessorKey)?.label,
     t(`dms.table.compare_mode.${filter.mode}`),
     displayValue(filter),
+    notFoundIds(filter),
   ]
     .filter(Boolean)
     .join(" · ");

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/actionError.ts

@@ -2,6 +2,7 @@ import {
   readTranslationKey,
   type I18nTranslate,
 } from "#dms-core/app/composables/translation/useTranslation";
+import { describeFieldErrors } from "#dms-core/app/composables/useFieldErrors";
 
 /** Shown when the request never reached the server (offline, DNS, CORS…). */
 export const ACTION_ERROR_NETWORK_KEY = "error.network.description";
@@ -90,11 +91,14 @@ const translateKey = (translate: I18nTranslate, key: string) =>
  * threw: the server's own message when it is user-facing (an i18n key, or
  * plain text on a 4xx), else a translated fallback: the request never got
  * through, it was refused for lack of permission, or something went wrong.
- * Never a stack trace, raw JSON or an ofetch error line.
+ * Never a stack trace, raw JSON or an ofetch error line. A body the data API
+ * refused for some fields names them by `labelOf` ("Loss reason is
+ * required."): a table view's write passes its column labels.
  */
 export function resolveActionError(
   error: unknown,
   translate: I18nTranslate,
+  labelOf: (field: string) => string | undefined = () => undefined,
 ): string {
   if (isFetchError(error)) {
     const status = statusOf(error);
@@ -121,6 +125,7 @@ export function resolveActionError(
       );
     }
     return (
+      describeFieldErrors(error, translate, labelOf) ??
       userFacingText(raw, translate) ??
       translateKey(translate, ACTION_ERROR_GENERIC_KEY)
     );