@antelopejs/dms 0.10.0 → 0.11.1

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/components/navigation/NavigationMenu.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AvatarProps, NavigationMenuItem } from "@nuxt/ui";
+import { MENU_STATUS_CHIP_COLORS } from "#dms-core/app/utils/menu";
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
 import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
 import { PREVIEW_LOCK_ICON } from "#dms-ui/app/build/utils/permissionPreview";
@@ -191,9 +192,6 @@ function badgeOf(item: DmsMenuItem): DmsMenuItem["badge"] {
   return live.label ? resolveMenuBadge(live.label, live.tone) : undefined;
 }
 
-// A status dot lands in the trailing slot, which a parent entry already uses for
-// its accordion chevron — so it is rendered on leaf entries only, and a badge
-// takes precedence over it.
 function decorateMenuItem(item: DmsMenuItem): DmsMenuItem {
   const variant = VARIANT_CLASSES[item.variant ?? "default"];
   const hasChildren = (item.children?.length ?? 0) > 0;
@@ -298,6 +296,23 @@ function onStateChange(id: string, open: boolean): void {
           })
         "
       />
+      <UChip
+        v-else-if="item.icon && item.status && item.children?.length"
+        :color="MENU_STATUS_CHIP_COLORS[item.status as MenuItemStatus]"
+        inset
+        size="sm"
+      >
+        <UIcon
+          :name="item.icon"
+          :class="
+            ui.linkLeadingIcon({
+              class: item.ui?.linkLeadingIcon,
+              active,
+              disabled: !!item.disabled,
+            })
+          "
+        />
+      </UChip>
       <UIcon
         v-else-if="item.icon"
         :name="item.icon"

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;
   }

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,