@antelopejs/dms 0.8.2 → 0.9.0

package/frontend-vue/layers/dms-layout/app/build/composables/dev-reload/useDevReloadHolder.ts

@@ -256,7 +256,8 @@ async function awaitRoute(
   }
 
   // Deadline spent waiting on someone else's pass.
-  if (state.refreshing || deps.now() >= deadline) return deps.isRouteKnown(path);
+  if (state.refreshing || deps.now() >= deadline)
+    return deps.isRouteKnown(path);
 
   const committed = await runRefresh(state, path, deadline);
   // A trailing re-run booked over ours may be the one that brought the route
@@ -293,14 +294,14 @@ export function createDevReloadCoordinator(
 // has been (re)committed for the current route. Kept separate from the layout
 // commit so the commit can stay atomic with its route check (see
 // probeAndCommitRoute) — the 404-prone part was committing the layout, not this.
-async function postLayoutRefresh(currentRoutePath: string): Promise<void> {
+// The page layouts reload with the layout commit, which empties their cache:
+// no async data key holds them.
+async function postLayoutRefresh(): Promise<void> {
   const permissions = usePermissions();
   // fetchPermissions() refetches and swaps the set atomically, so there is no
   // need to clear() first — clearing would briefly empty permissions and flash
   // permission-gated UI.
   await permissions.fetchPermissions();
-  await refreshDmsData(currentRoutePath);
-  await refreshDmsData(`layout-${currentRoutePath}`);
 }
 
 interface DevReloadHolder {
@@ -326,7 +327,7 @@ export function useDevReloadHolder(): DevReloadHolder {
   const reloading = import.meta.env.DEV ? useDevReloading() : ref(false);
   const siteLayout = useSiteLayout();
   const router = useDmsRouter();
-  const currentError = useError();
+  const currentError = useDmsError();
 
   const coordinator = createDevReloadCoordinator({
     isDev: import.meta.env.DEV,
@@ -343,7 +344,7 @@ export function useDevReloadHolder(): DevReloadHolder {
       if (router.currentRoute.value.path !== recoveredPath) return;
       const err = currentError.value;
       if (!err || err.statusCode !== HTTP_NOT_FOUND) return;
-      void clearError();
+      void clearDmsError();
     },
     setReloading: (value) => {
       reloading.value = value;

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

@@ -172,7 +172,7 @@ export function useActiveSidePanel(): ActiveSidePanel {
   const { panels } = useAppSidePanels();
   const preferences = useSidePanelPreferences();
   const dragWidth = useSidePanelDragWidth();
-  const { loggedIn } = useUserSession();
+  const { loggedIn } = useDmsUserSession();
   const panel = computed(() => {
     if (!loggedIn.value) return null;
     const { openId } = readSidePanelPreferences(preferences.value);

package/frontend-vue/layers/dms-layout/app/build/composables/navigation/useVisitNavBadges.ts

@@ -0,0 +1,26 @@
+import { watch } from "vue";
+import { useDmsInertiaPage } from "#dms/frontend-module";
+import {
+  type CountedNavBadge,
+  useNavBadges,
+} from "#dms-ui/app/build/composables/navigation/useNavBadges";
+
+interface CountedPage {
+  navBadges?: Record<string, CountedNavBadge>;
+}
+
+/**
+ * Draws the navigation badges each page visit carries (`navBadges`): they
+ * are counted for the visit and travel with the page, not with the site
+ * layout a browser keeps for minutes. The dashboard frame calls it, so the
+ * server render draws them as the browser does.
+ */
+export function useVisitNavBadges(): void {
+  const inertiaPage = useDmsInertiaPage();
+  const { applyCountedNavBadges } = useNavBadges();
+  watch(
+    () => (inertiaPage.props.page as CountedPage | undefined)?.navBadges,
+    applyCountedNavBadges,
+    { immediate: true },
+  );
+}

package/frontend-vue/layers/dms-layout/app/build/composables/notification/useNotificationCatalog.ts

@@ -1,3 +1,4 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 export type NotificationTogglePermission = "allowed" | "forbidden" | "default";
 
 export interface NotificationCategory {
@@ -32,34 +33,34 @@ export const buildPreferenceKey = (categoryId: string, subjectId: string) =>
 export const subjectPreferenceKey = (subject: NotificationSubject) =>
   buildPreferenceKey(subject.category.id, subject.id);
 
+const CATALOG_URL = pageRoutePath(
+  "/settings/user/notifications",
+  "/categories",
+);
+
+/** Whether a read has answered with a failure, and no retry is running. */
+export const hasFailed = (read: ApiDataResult<unknown>): boolean =>
+  !!read.error.value && read.status.value !== "pending";
+
 /**
- * The registered notification categories and subjects, loaded once and
- * shared by the preferences matrix and the inbox (which tags each
+ * The registered notification categories and subjects, read once with the
+ * page and shared by the preferences matrix and the inbox (which tags each
  * notification with its source).
+ *
+ * @param enabled Whether the page shows them: nothing is read otherwise
  */
-export const useNotificationCatalog = () => {
-  const { $authFetch } = useAuthFetch();
-  const categories = useDmsState<NotificationCategory[]>(
-    "notification-catalog-categories",
-    () => [],
-  );
-  const subjects = useDmsState<NotificationSubject[]>(
-    "notification-catalog-subjects",
-    () => [],
-  );
-  const isLoaded = useDmsState<boolean>(
-    "notification-catalog-loaded",
-    () => false,
+export const useNotificationCatalog = (enabled: () => boolean = () => true) => {
+  const catalog = useApiData<NotificationCatalogResponse>(() =>
+    enabled() ? CATALOG_URL : null,
   );
+  const categories = computed(() => catalog.data.value?.categories ?? []);
+  const subjects = computed(() => catalog.data.value?.subjects ?? []);
+  const isLoaded = computed(() => !!catalog.data.value);
+  const loadFailed = computed(() => !isLoaded.value && hasFailed(catalog));
 
-  const loadCatalog = async () => {
-    const response = await $authFetch<NotificationCatalogResponse>(
-      "/settings/user/notifications/categories",
-    );
-    categories.value = response.categories;
-    subjects.value = response.subjects;
-    isLoaded.value = true;
-  };
+  /** Reads the catalog again (a retry). */
+  const loadCatalog = (): Promise<void> =>
+    catalog.refresh({ dedupe: "defer" });
 
   const subjectsOf = (categoryId: string) =>
     subjects.value.filter((subject) => subject.category.id === categoryId);
@@ -77,6 +78,7 @@ export const useNotificationCatalog = () => {
     categories,
     subjects,
     isLoaded,
+    loadFailed,
     loadCatalog,
     subjectsOf,
     findCategory,

package/frontend-vue/layers/dms-layout/app/build/composables/notification/useNotificationPreferences.ts

@@ -1,6 +1,8 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import type { SaveStatusState } from "#dms-ui/app/components/save-bar/SaveStatus.vue";
 import { useInstantSave } from "#dms-ui/app/build/composables/instant-save/useInstantSave";
 import {
+  hasFailed,
   type NotificationCategory,
   type NotificationSubject,
   subjectPreferenceKey,
@@ -9,19 +11,45 @@ import {
 
 type PreferenceMap = Record<string, boolean>;
 
-const PREFERENCES_URL = "/settings/user/notifications/preferences";
+const PREFERENCES_URL = pageRoutePath(
+  "/settings/user/notifications",
+  "/preferences",
+);
 
 /**
- * State of the notification preferences matrix. Each switch saves on its
- * own through the shared instant save (a PATCH of the keys it changes); a
- * failed save puts the switches back and keeps the change for a retry.
+ * State of the notification preferences matrix, read with the page (the
+ * stored preferences and the catalog). Each switch saves on its own through
+ * the shared instant save (a PATCH of the keys it changes); a failed save
+ * puts the switches back and keeps the change for a retry.
+ *
+ * @param enabled Whether the page shows them: nothing is read otherwise
  */
-export const useNotificationPreferences = () => {
+export const useNotificationPreferences = (
+  enabled: () => boolean = () => true,
+) => {
   const { $authFetch } = useAuthFetch();
-  const catalog = useNotificationCatalog();
-  const preferences = ref<PreferenceMap>({});
-  const isLoading = ref(true);
-  const loadFailed = ref(false);
+  const catalog = useNotificationCatalog(enabled);
+  const stored = useApiData<PreferenceMap>(() =>
+    enabled() ? PREFERENCES_URL : null,
+  );
+  // The switches edit the read's data in place.
+  const preferences = computed<PreferenceMap>({
+    get: () => stored.data.value ?? {},
+    set: (value) => {
+      stored.data.value = value;
+    },
+  });
+  // A user who never changed a switch has no stored preferences (null).
+  const isStoredRead = computed(
+    () => stored.status.value === "success" || stored.data.value != null,
+  );
+  const loadFailed = computed(
+    () => (!isStoredRead.value && hasFailed(stored)) || catalog.loadFailed.value,
+  );
+  const isLoading = computed(
+    () =>
+      !(isStoredRead.value && catalog.isLoaded.value) && !loadFailed.value,
+  );
 
   const instant = useInstantSave<PreferenceMap>({
     read: (key) => preferences.value[key] ?? true,
@@ -54,21 +82,14 @@ export const useNotificationPreferences = () => {
       ),
     );
 
+  /** Reads the preferences and the catalog again (a retry). */
   const load = async () => {
-    isLoading.value = true;
-    loadFailed.value = false;
-    try {
-      const [stored] = await Promise.all([
-        $authFetch<PreferenceMap>(PREFERENCES_URL),
-        catalog.loadCatalog(),
-      ]);
-      preferences.value = stored ?? {};
-      instant.confirm(preferences.value);
-    } catch {
-      loadFailed.value = true;
-    } finally {
-      isLoading.value = false;
-    }
+    await Promise.all([
+      stored.refresh({ dedupe: "defer" }),
+      catalog.loadCatalog(),
+    ]);
+    // A failed save then puts back what the server holds now.
+    if (stored.status.value === "success") instant.confirm(preferences.value);
   };
 
   return {

package/frontend-vue/layers/dms-layout/app/build/composables/security/useSessionHandoff.ts

@@ -28,7 +28,7 @@ interface BrowserSession {
  * account entry, and the old entry — holding a dead refresh token — is dropped.
  */
 export function useSessionHandoff() {
-  const { session, fetch: refreshUser } = useUserSession<
+  const { session, fetch: refreshUser } = useDmsUserSession<
     unknown,
     BrowserSession
   >();

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/preferencesSummary.ts

@@ -59,7 +59,7 @@ export function resolvePreferenceRows(
   };
 }
 
-/** What `GET /settings/user/profile/access` answers. */
+/** What `GET /dms/pages/settings/user/profile/access` answers. */
 export interface ProfileAccess {
   roles: string[];
   workspaceOwner: boolean;

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useAccountData.ts

@@ -1,3 +1,4 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import UFormField from "@nuxt/ui/components/FormField.vue";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import UInput from "@nuxt/ui/components/Input.vue";
@@ -12,7 +13,7 @@ import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
 import { REQUIRED_MESSAGE } from "#dms-core/app/composables/useFormValidation";
 import { useSecurityFormat } from "../security/useSecurityFormat";
 
-const PROFILE_ENDPOINT = "/settings/user/profile";
+const PROFILE_ENDPOINT = pageRoutePath("/settings/user/profile");
 const EXPORT_ENDPOINT = `${PROFILE_ENDPOINT}/account-export`;
 const DELETION_ENDPOINT = `${PROFILE_ENDPOINT}/account-deletion`;
 const EXPORT_FILE_PREFIX = "dms-account-export";
@@ -64,7 +65,7 @@ export function accountExportFilename(at: Date = new Date()): string {
 export function useAccountData() {
   const { $authFetch } = useAuthFetch();
   const { confirm } = useConfirm();
-  const { user, clear } = useUserSession<User>();
+  const { user, clear } = useDmsUserSession<User>();
   const { removeAccount } = useMultiAccount();
   const { processI18n, processApiMessage } = useTranslation();
   const { errorMessage, errorCode } = useSecurityFormat();

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useProfileAvatar.ts

@@ -12,7 +12,6 @@ import {
 } from "#dms-ui/app/utils/imageResize";
 
 const PRESIGN_URL = "/api/files/presign";
-const METADATA_URL = "/api/files/metadata";
 
 /** Upload options the backend serialized for the avatar image field. */
 export interface AvatarFieldOptions {
@@ -25,10 +24,6 @@ export interface AvatarFieldOptions {
 /** Why a picked file was refused before any upload. */
 export type AvatarRejection = "mimetype" | "size";
 
-interface FileMetadataResponse {
-  url: string;
-}
-
 /** Outcome of an avatar upload: a staged key, or why it was refused. */
 export interface AvatarUploadResult {
   key?: string;
@@ -79,17 +74,5 @@ export function useProfileAvatar(options: () => AvatarFieldOptions) {
     return { key: presign.resourceKey };
   }
 
-  /** @returns A short-lived URL to display a stored avatar */
-  async function resolveUrl(key: string): Promise<string | null> {
-    try {
-      const metadata = await $authFetch<FileMetadataResponse>(METADATA_URL, {
-        query: { resourceKey: key, storage: options().storage },
-      });
-      return metadata.url;
-    } catch {
-      return null;
-    }
-  }
-
-  return { progress, upload, resolveUrl };
+  return { progress, upload };
 }

package/frontend-vue/layers/dms-layout/app/build/composables/settings/profile/useProfilePreferences.ts

@@ -1,3 +1,4 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import { usePreferredDark } from "@vueuse/core";
 import { computed, onMounted, ref } from "vue";
 import { useUserRegionalPreferences } from "#dms-core/app/composables/user/useUserRegionalPreferences";
@@ -24,7 +25,10 @@ import {
   tallySubjects,
 } from "./preferencesSummary";
 
-export const PROFILE_ACCESS_ENDPOINT = "/settings/user/profile/access";
+export const PROFILE_ACCESS_ENDPOINT = pageRoutePath(
+  "/settings/user/profile",
+  "/access",
+);
 // Sample values the skeletons are shaped from.
 const SAMPLE_ACCESS: ProfileAccess = {
   roles: ["Admin", "Finance"],
@@ -50,16 +54,15 @@ const MONDAY = 1;
  * and each one's sentence, `undefined` while it is not known yet (the row
  * shows a skeleton then, never a made-up "0 unread").
  *
- * Nothing is awaited before render. The roles and the notification
- * preferences are fetched after mount; the unread count is the header bell's
- * own; the regional and appearance sentences, which depend on the browser
- * (time zone, today's date, the system theme), are written after mount so
- * the server and the hydrating browser render the same skeleton.
+ * The roles and the notification preferences are read with the page (a
+ * server render shows them and hands them over); the unread count is the
+ * header bell's own; the regional and appearance sentences, which depend on
+ * the browser (time zone, today's date, the system theme), are written after
+ * mount so the server and the hydrating browser render the same skeleton.
  */
 export function useProfilePreferences() {
   const { t: translate, locale } = useI18n();
   const t = translate as SummaryTranslate;
-  const { $authFetch } = useAuthFetch();
   const { groups } = useSettingsNavigation();
   const isOwner = useIsOwner();
   const isMounted = ref(false);
@@ -76,23 +79,14 @@ export function useProfilePreferences() {
     ),
   );
 
-  const access = ref<ProfileAccess>();
-  const accessFailed = ref(false);
+  const access = useApiData<ProfileAccess>(PROFILE_ACCESS_ENDPOINT);
   const accessSummary = computed(() => {
-    if (access.value) return buildAccessSummary(t, access.value);
-    return accessFailed.value
+    if (access.data.value) return buildAccessSummary(t, access.data.value);
+    return access.error.value
       ? t("page.settings.profile.preferences.access_unavailable")
       : undefined;
   });
 
-  async function loadAccess(): Promise<void> {
-    try {
-      access.value = await $authFetch<ProfileAccess>(PROFILE_ACCESS_ENDPOINT);
-    } catch {
-      accessFailed.value = true;
-    }
-  }
-
   const { uniqueLocales } = useUniqueLocales();
   const regional = useUserRegionalPreferences();
   // Frozen at mount: the row shows formats, not a ticking clock.
@@ -117,8 +111,12 @@ export function useProfilePreferences() {
     });
   });
 
-  const notificationPreferences = useNotificationPreferences();
-  const { subjects } = useNotificationCatalog();
+  const notificationPreferences = useNotificationPreferences(
+    () => rows.value.notifications.visible,
+  );
+  const { subjects } = useNotificationCatalog(
+    () => rows.value.notifications.visible,
+  );
   const { unreadCount, unreadTone, areCountsLoaded } = useNotifications();
   const isNotificationsLoading = computed(
     () => notificationPreferences.isLoading.value || !areCountsLoaded.value,
@@ -188,8 +186,6 @@ export function useProfilePreferences() {
   onMounted(() => {
     today = new Date();
     isMounted.value = true;
-    void loadAccess();
-    if (rows.value.notifications.visible) void notificationPreferences.load();
   });
 
   return {

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useSecurityFormat.ts

@@ -53,9 +53,12 @@ export function useSecurityFormat() {
       Math.floor((Date.now() - new Date(value).getTime()) / MS_PER_DAY),
     );
 
-  /** "3 days ago", "in an hour"… or "now" under a minute. */
-  const formatRelative = (value: DateInput): string => {
-    const elapsed = new Date(value).getTime() - Date.now();
+  /**
+   * "3 days ago", "in an hour"… or "now" under a minute, as of `now` (a
+   * list's read time, which the server and the hydrating browser share).
+   */
+  const formatRelative = (value: DateInput, now = Date.now()): string => {
+    const elapsed = new Date(value).getTime() - now;
     const formatter = new Intl.RelativeTimeFormat(locale.value, {
       numeric: "auto",
     });

package/frontend-vue/layers/dms-layout/app/build/composables/settings/security/useSecurityOverview.ts

@@ -1,8 +1,9 @@
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
 import type { Tone } from "#dms-ui/app/types/tone";
 
 /** Base URL of the Security page API. */
-export const SECURITY_ENDPOINT = "/settings/user/security";
+export const SECURITY_ENDPOINT = pageRoutePath("/settings/user/security");
 /** Route of the Security page. */
 export const SECURITY_PAGE_PATH = "/settings/user/security";
 const SECURITY_PAGE_ID = "settings.user.security";
@@ -68,21 +69,19 @@ const ATTENTION_TONE_ORDER: Tone[] = [
 
 /**
  * Shared Security summary: the status strip, every Security block and the
- * profile pointer card read the same state, and any change refreshes it for
- * all of them. It also keeps the navigation badge of the Security page, the
+ * profile pointer card read the same request, with the page (a server
+ * render shows it and hands it over), and any change refreshes it for all
+ * of them. It also keeps the navigation badge of the Security page, the
  * count of what needs attention in the tone the server gives it, in sync
  * after a change.
  */
 export function useSecurityOverview() {
-  const overview = useDmsState<SecurityOverview | null>(
-    "dms-security-overview",
-    () => null,
+  const summary = useApiData<SecurityOverview>(SECURITY_ENDPOINT);
+  const overview = computed(() => summary.data.value ?? null);
+  // A retry in progress is not a failure to show.
+  const isUnavailable = computed(
+    () => !!summary.error.value && summary.status.value !== "pending",
   );
-  const isUnavailable = useDmsState<boolean>(
-    "dms-security-overview-unavailable",
-    () => false,
-  );
-  const { $authFetch } = useAuthFetch();
   const { setNavBadge } = useNavBadges();
 
   const attention = computed<SecurityAttention[]>(
@@ -105,14 +104,10 @@ export function useSecurityOverview() {
     return ATTENTION_TONE_ORDER.find((tone) => present.includes(tone));
   }
 
+  /** Reads the summary again after a change: every block follows. */
   async function refresh(): Promise<void> {
-    try {
-      overview.value = await $authFetch<SecurityOverview>(SECURITY_ENDPOINT);
-      isUnavailable.value = false;
-    } catch {
-      isUnavailable.value = true;
-      return;
-    }
+    await summary.refresh({ dedupe: "defer" });
+    if (summary.error.value) return;
     const count = attention.value.length;
     setNavBadge(
       SECURITY_PAGE_ID,

package/frontend-vue/layers/dms-layout/app/build/utils/modules-catalog.ts

@@ -2,6 +2,7 @@ import type {
   ModuleCatalogEntry,
   ModuleStatus,
   PageInfo,
+  SiteLayout,
 } from "../../types/page";
 
 /** Category of the modules that declare none. */
@@ -148,11 +149,10 @@ export function sortModules(
 
 /**
  * A page as `/dms/sitelayout` serves it: the payload also carries the
- * owning module and the parent category, which the shared type leaves out.
+ * owning module, which the shared type leaves out.
  */
 type ServedPage = PageInfo & {
   module?: string;
-  category?: { displayName?: string; isModuleRoot?: boolean };
 };
 
 function isOpenablePage(page: ServedPage): boolean {
@@ -169,19 +169,21 @@ function isOpenablePage(page: ServedPage): boolean {
  * the empty state can point to where the thing actually lives.
  */
 export function findModulePageMatch(
-  pages: Record<string, PageInfo> | undefined,
+  siteLayout: Pick<SiteLayout, "pages" | "categories"> | undefined,
   query: string,
   installedModuleIds: ReadonlySet<string>,
   resolve: DisplayResolver,
 ): ModulePageMatch | null {
   const needle = normalizeQuery(query);
-  if (!needle || !pages) return null;
-  for (const page of Object.values(pages) as ServedPage[]) {
+  if (!needle || !siteLayout) return null;
+  for (const page of Object.values(siteLayout.pages) as ServedPage[]) {
     if (!page.module || !installedModuleIds.has(page.module)) continue;
     if (!isOpenablePage(page)) continue;
     const pageTitle = resolve(page.displayName);
     if (!pageTitle.toLocaleLowerCase().includes(needle)) continue;
-    const parent = page.category;
+    const parent = page.categoryId
+      ? siteLayout.categories[page.categoryId]
+      : undefined;
     const sectionTitle =
       parent?.displayName && !parent.isModuleRoot
         ? resolve(parent.displayName)

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

@@ -0,0 +1,19 @@
+// A fetch failure names the request it failed: `[GET] "http://10.0.0.4:5010/
+// dms/page?path=/x": 502 Bad Gateway`. On a server, that is the backend's
+// internal address, which an error page must never show.
+const FETCH_FAILURE = /^\[[A-Z]+\]\s+"[^"]*":\s*(.*)$/s;
+const ABSOLUTE_URL = /\b[a-z][a-z0-9+.-]*:\/\/[^\s"'<>]+/gi;
+const SPACES = /\s{2,}/g;
+
+/**
+ * The part of an error's message a page may show: a fetch failure's status
+ * text alone, and no absolute URL anywhere; nothing when nothing is left.
+ */
+export function publicErrorMessage(
+  message: string | undefined,
+): string | undefined {
+  if (!message) return undefined;
+  const statusText = FETCH_FAILURE.exec(message)?.[1] ?? message;
+  const shown = statusText.replace(ABSOLUTE_URL, "").replace(SPACES, " ");
+  return shown.trim() || undefined;
+}

package/frontend-vue/layers/dms-layout/app/components/navigation/CollapsedMenuItem.vue

@@ -102,15 +102,6 @@ const paddingLeft = computed(() => {
 const chevronClass = (isOpen: boolean) => {
   return theme({ isOpen }).chevron();
 };
-
-const { prefetchPageLayout } = usePrefetch();
-
-function onLinkHover(): void {
-  const { to } = props.item;
-  if (typeof to === "string") {
-    prefetchPageLayout(stripQueryAndHash(to));
-  }
-}
 </script>
 
 <template>
@@ -128,7 +119,6 @@ function onLinkHover(): void {
         :is="item.to ? DmsLink : 'div'"
         :to="item.to"
         :class="ui.topLevelButton()"
-        @mouseenter="onLinkHover"
       >
         <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon()" />
         <UIcon
@@ -150,7 +140,6 @@ function onLinkHover(): void {
       :class="ui.link()"
       :style="{ paddingLeft }"
       :title="item.title"
-      @mouseenter="onLinkHover"
     >
       <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon()" />
       <span>{{ item.label }}</span>

package/frontend-vue/layers/dms-layout/app/components/navigation/NavigationMenu.vue

@@ -206,6 +206,9 @@ function decorateMenuItem(item: DmsMenuItem): DmsMenuItem {
 
   return {
     ...item,
+    // Inertia prefetches the page on hover, the way a `DmsLink` does: the
+    // visit then shows it without a request, and its components load early.
+    ...(item.to ? { prefetch: true } : {}),
     ...(variant.link ? { class: [item.class, variant.link] } : {}),
     ...(statusClass ? { trailingIcon: STATUS_DOT_ICON } : {}),
     badge,
@@ -232,18 +235,6 @@ const groupedItems = computed((): NavigationMenuItem[][] => {
   );
 });
 
-const { prefetchPageLayout } = usePrefetch();
-
-function onMenuMouseover(event: MouseEvent): void {
-  const target = (event.target as HTMLElement).closest("a[href]");
-  if (!target) return;
-
-  const href = target.getAttribute("href");
-  if (href && href.startsWith("/")) {
-    prefetchPageLayout(stripQueryAndHash(href));
-  }
-}
-
 function isDesiredOpen(id: string): boolean {
   return props.modelValue?.includes(id) ?? false;
 }
@@ -271,7 +262,6 @@ function onStateChange(id: string, open: boolean): void {
     :orientation="orientation"
     :highlight="orientation === 'vertical'"
     value-key="id"
-    @mouseover="onMenuMouseover"
   >
     <template #item-leading="{ item, active, ui }">
       <DmsAccordionItemSync

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

@@ -16,17 +16,13 @@ export const useSystemState = () => {
     data: systemState,
     error,
     refresh,
-  } = useDmsLazyAsyncData(
-    SYSTEM_STATE_CACHE_KEY,
-    async () => {
-      const { $authFetch } = useAuthFetch();
-      return await $authFetch<SystemState>(SYSTEM_STATE_ENDPOINT);
-    },
-    {
-      default: () => ({ ...DEFAULT_SYSTEM_STATE }),
-      server: true,
-    },
-  );
+  } = useApiData<SystemState>(SYSTEM_STATE_ENDPOINT, {
+    key: SYSTEM_STATE_CACHE_KEY,
+    lazy: true,
+    default: () => ({ ...DEFAULT_SYSTEM_STATE }),
+    // The deployment's state, not the page's data.
+    refreshOnPageRefresh: false,
+  });
 
   const metaTitle = computed(() => systemState.value?.meta?.title ?? "");
   const metaDescription = computed(