@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-layout/app/error.vue

@@ -1,37 +1,47 @@
 <script setup lang="ts">
 import type { DmsErrorData } from "#dms/frontend-module";
+import StageCard, {
+  type StageCardTone,
+} from "./build/components/layout/StageCard.vue";
+import EmptyLayout from "./custom-layouts/EmptyLayout.vue";
+
+interface ErrorConfig {
+  icon: string;
+  titleKey: string;
+  descriptionKey: string;
+  tone: StageCardTone;
+}
 
-const ERROR_CONFIGS: Record<
-  number,
-  { icon: string; titleKey: string; descriptionKey: string; color: string }
-> = {
+const ERROR_CONFIGS: Record<number, ErrorConfig> = {
   404: {
     icon: "i-ph-magnifying-glass",
     titleKey: "error.404.title",
     descriptionKey: "error.404.description",
-    color: "primary",
+    tone: "primary",
   },
   401: {
-    icon: "i-ph-lock",
+    icon: "i-ph-lock-simple",
     titleKey: "error.401.title",
     descriptionKey: "error.401.description",
-    color: "orange",
+    tone: "warning",
   },
   403: {
     icon: "i-ph-prohibition",
     titleKey: "error.403.title",
     descriptionKey: "error.403.description",
-    color: "red",
+    tone: "warning",
   },
 };
 
-const DEFAULT_ERROR_CONFIG = {
+const DEFAULT_ERROR_CONFIG: ErrorConfig = {
   icon: "i-ph-warning-circle",
   titleKey: "error.500.title",
   descriptionKey: "error.500.description",
-  color: "red",
+  tone: "error",
 };
 
+const RECOVERING_ICON = "i-ph-spinner-gap";
+
 const DEFAULT_STATUS_CODE = 500;
 
 // Their cards already say what happened; the message behind them is the
@@ -52,24 +62,31 @@ const { loggedIn, reconcileSession, redirectToAuth } = useSessionRecovery();
 
 const isRecovering = ref(false);
 
+const statusCode = computed(
+  () => props.error.statusCode || DEFAULT_STATUS_CODE,
+);
+
 const visibleErrorMessage = computed(() =>
-  STATUSES_WITHOUT_ERROR_MESSAGE.has(
-    props.error.statusCode || DEFAULT_STATUS_CODE,
-  )
+  STATUSES_WITHOUT_ERROR_MESSAGE.has(statusCode.value)
     ? undefined
     : props.error.message,
 );
 
-const errorConfig = computed(() => {
-  const statusCode = props.error.statusCode || DEFAULT_STATUS_CODE;
-  const config = ERROR_CONFIGS[statusCode] || DEFAULT_ERROR_CONFIG;
-  return {
-    icon: config.icon,
-    title: t(config.titleKey),
-    description: t(config.descriptionKey),
-    color: config.color,
-  };
-});
+const errorConfig = computed(
+  () => ERROR_CONFIGS[statusCode.value] || DEFAULT_ERROR_CONFIG,
+);
+
+const title = computed(() =>
+  isRecovering.value
+    ? t("error.recovering.title")
+    : t(errorConfig.value.titleKey),
+);
+
+const description = computed(() =>
+  isRecovering.value
+    ? t("error.recovering.description")
+    : t(errorConfig.value.descriptionKey),
+);
 
 const handleError = async () => {
   clearError();
@@ -98,66 +115,40 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex min-h-screen flex-col items-center justify-center p-4">
-    <header class="mb-10">
-      <DmsAppLogo class="h-20 w-auto" />
-    </header>
-
-    <DmsCard variant="elevated" class="w-full max-w-md">
-      <div class="flex flex-col items-center text-center">
-        <div class="text-muted mb-4 text-6xl font-bold tracking-tight">
-          {{ error.statusCode || DEFAULT_STATUS_CODE }}
-        </div>
-
-        <div
-          class="mb-6 flex size-20 items-center justify-center rounded-full"
-          :class="`bg-${errorConfig.color}-50 dark:bg-${errorConfig.color}-950`"
-        >
-          <Icon
-            :name="isRecovering ? 'i-ph-spinner-gap' : errorConfig.icon"
-            class="size-10"
-            :class="[
-              `text-${errorConfig.color}-500`,
-              isRecovering ? 'animate-spin' : '',
-            ]"
-          />
-        </div>
-
-        <h1 class="text-highlighted mb-2 text-2xl font-bold">
-          {{ isRecovering ? $t("error.recovering.title") : errorConfig.title }}
-        </h1>
-
-        <p class="text-muted mb-6">
-          {{
-            isRecovering
-              ? $t("error.recovering.description")
-              : errorConfig.description
-          }}
-        </p>
-
-        <p
-          v-if="!isRecovering && visibleErrorMessage"
-          class="text-dimmed mb-6 text-sm"
-        >
-          {{ visibleErrorMessage }}
-        </p>
-
-        <div v-if="!isRecovering" class="flex gap-3">
-          <UButton
-            :label="$t('button.go_home')"
-            color="primary"
-            size="lg"
-            @click="handleError"
-          />
-          <UButton
-            :label="$t('button.go_back')"
-            color="neutral"
-            variant="outline"
-            size="lg"
-            @click="router.back()"
-          />
-        </div>
+  <EmptyLayout>
+    <StageCard
+      :icon="isRecovering ? RECOVERING_ICON : errorConfig.icon"
+      :tone="isRecovering ? 'neutral' : errorConfig.tone"
+      :eyebrow="$t('error.page.eyebrow', { code: statusCode })"
+      :title="title"
+      :description="description"
+      :icon-class="isRecovering ? 'animate-spin' : undefined"
+    >
+      <p
+        v-if="!isRecovering && visibleErrorMessage"
+        class="border-default text-muted mt-4 rounded-md border bg-(--dms-bg-muted) px-3 py-2 font-mono text-xs break-words"
+      >
+        {{ visibleErrorMessage }}
+      </p>
+
+      <div v-if="!isRecovering" class="mt-[22px] grid gap-2 sm:grid-cols-2">
+        <UButton
+          :label="$t('button.go_home')"
+          icon="i-ph-house"
+          size="lg"
+          class="justify-center"
+          @click="handleError"
+        />
+        <UButton
+          :label="$t('button.go_back')"
+          icon="i-ph-arrow-left"
+          color="neutral"
+          variant="outline"
+          size="lg"
+          class="justify-center"
+          @click="router.back()"
+        />
       </div>
-    </DmsCard>
-  </div>
+    </StageCard>
+  </EmptyLayout>
 </template>

package/frontend-vue/layers/dms-layout/app/middleware/page-leave-guard.global.ts

@@ -1,8 +1,16 @@
+import { confirmLeave } from "#dms-ui/app/build/composables/unsaved-changes/registry";
+
 export default defineDmsMiddleware(async (to, from) => {
   if (to.path === from.path) {
     return;
   }
 
+  // Unsaved changes anywhere (the page's forms, an open drawer or modal, a
+  // settings panel): one warning dialog, whatever holds them.
+  if (!(await confirmLeave())) {
+    return abortNavigation();
+  }
+
   const { executeGuards } = useLeaveGuard();
   const pageKey = `${PAGE_GUARD_PREFIX}-${from.path}`;
 

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { withoutTrailingSlash } from "ufo";
+import { holdPageHeaderActions } from "../composables/layout/usePageHeaderActions";
+import { useDevReloading } from "../build/composables/dev-reload/useDevReloadHolder";
 
 defineOptions({ inheritAttrs: false });
 
@@ -130,6 +132,10 @@ defineDmsPageMeta({
   auth: true,
 });
 
+// Before the first await: the blocks below may put actions in the page
+// header, which waits for them until they have rendered.
+const PageContentRendered = holdPageHeaderActions();
+
 const route = useDmsRoute();
 const siteLayout = useSiteLayout();
 // Captured synchronously so `redirectDeniedHomepage` can use it after an await.
@@ -486,7 +492,9 @@ if (import.meta.env.DEV) {
         :page-id="pagelayoutMetadata?.fullId ?? ''"
         :component-id="component.id"
         :route-params="routeParams"
+        :layout-path="component.id"
       />
     </div>
   </TransitionGroup>
+  <PageContentRendered />
 </template>

package/frontend-vue/layers/dms-layout/app/plugins/accessibility.ts

@@ -0,0 +1,22 @@
+import { computed } from "vue";
+import { accessibilityHtmlClasses } from "#dms-ui/app/build/utils/accessibilityPreferences";
+import { useAccessibilityPreferences } from "../composables/general/useAccessibilityPreferences";
+
+/**
+ * Puts the accessibility classes on `<html>`, on the server too: the cookie is
+ * read there, so the first paint has reduced motion, contrast and underlined
+ * links without a flash. `auto` motion needs no class (the CSS reads
+ * `prefers-reduced-motion`). unhead adds and removes only these class tokens,
+ * leaving the color-mode class to vueuse.
+ */
+export default defineDmsPlugin(() => {
+  const { preferences } = useAccessibilityPreferences();
+
+  // No `class` key at all for the defaults, rather than an empty `class=""`.
+  useHead(
+    computed(() => {
+      const classes = accessibilityHtmlClasses(preferences.value);
+      return { htmlAttrs: classes.length > 0 ? { class: classes } : {} };
+    }),
+  );
+});

package/frontend-vue/layers/dms-layout/app/plugins/dms-dev-reload.client.ts

@@ -1,4 +1,6 @@
-const RELOAD_EVENT_NAME = "reload";
+import { useDevReloadHolder } from "../build/composables/dev-reload/useDevReloadHolder";
+import { openDevReloadStream } from "../build/utils/dev-reload-stream";
+
 const RELOAD_ENDPOINT_PATH = "/dms/dev/reload";
 
 function resolveBackendBase(): string | null {
@@ -11,8 +13,8 @@ function resolveBackendBase(): string | null {
 /**
  * Dev-only: turn the backend's `reload` stream into a soft refresh.
  *
- * All the waiting lives in the dev-reload coordinator (see `useDevReload`), so
- * this plugin and the `useDmsDevReload().awaitRoute` module frontends call
+ * All the waiting lives in the dev-reload coordinator (see `useDevReloadHolder`), so
+ * this plugin and the `useDevReload().awaitRoute` module frontends call
  * share one route-readiness loop and one in-flight refresh.
  */
 export default defineDmsPlugin(() => {
@@ -23,23 +25,18 @@ export default defineDmsPlugin(() => {
 
   const endpoint = `${backendBase}${RELOAD_ENDPOINT_PATH}`;
   const { coordinator } = useDevReloadHolder();
-  const source = new EventSource(endpoint);
-
-  source.addEventListener("error", () => {
-    console.warn(
-      "[dms-dev-reload] SSE connection lost, waiting for backend...",
-    );
-  });
-
-  source.addEventListener(RELOAD_EVENT_NAME, () => {
-    void coordinator.requestRefresh().catch((err: unknown) => {
-      console.error("[dms-dev-reload] Reload handler failed:", err);
-    });
+  const stream = openDevReloadStream({
+    endpoint,
+    onReload: () => {
+      void coordinator.requestRefresh().catch((err: unknown) => {
+        console.error("[dms-dev-reload] Reload handler failed:", err);
+      });
+    },
   });
 
   if (import.meta.hot) {
     import.meta.hot.dispose(() => {
-      source.close();
+      stream.close();
     });
   }
 });

package/frontend-vue/layers/dms-layout/app/plugins/font-preload.ts

@@ -0,0 +1,23 @@
+// The two faces every page sets its text in. Fetched only once the stylesheet
+// is parsed, they landed after the first paint, and the swap from the
+// fallback face moved the header and the page text (wider breadcrumbs, other
+// line breaks). Preloaded from the head, they are there for the first paint.
+const PRELOADED_FONTS = [
+  "/fonts/Geist-Variable.woff2",
+  "/fonts/GeistMono-Variable.woff2",
+];
+const FONT_TYPE = "font/woff2";
+
+/** Server only: the links only matter in the server-rendered head. */
+export default defineDmsPlugin(() => {
+  if (!import.meta.env.SSR) return;
+  useHead({
+    link: PRELOADED_FONTS.map((href) => ({
+      rel: "preload",
+      as: "font",
+      type: FONT_TYPE,
+      href,
+      crossorigin: "anonymous",
+    })),
+  });
+});

package/frontend-vue/layers/dms-layout/app/plugins/notification-stream.client.ts

@@ -4,6 +4,8 @@ const NOTIFICATION_TOPIC_PREFIX = "notifications:user:";
 const NOTIFICATION_NEW_TYPE = "notification:new";
 const NOTIFICATION_READ_TYPE = "notification:read";
 const NOTIFICATION_ALL_READ_TYPE = "notification:all-read";
+const NOTIFICATION_UNREAD_TYPE = "notification:unread";
+const NOTIFICATION_SEEN_TYPE = "notification:seen";
 
 interface IncomingPayload {
   notification?: UserNotification;
@@ -21,8 +23,13 @@ type Handler = (payload: IncomingPayload | undefined) => void | Promise<void>;
 
 export default defineDmsPlugin(() => {
   const { user, loggedIn } = useUserSession();
-  const { handleIncomingNotification, handleRemoteRead, handleRemoteAllRead } =
-    useNotifications();
+  const {
+    handleIncomingNotification,
+    handleRemoteRead,
+    handleRemoteUnread,
+    handleRemoteAllRead,
+    handleRemoteSeen,
+  } = useNotifications();
   const realtime = useUserRealtime();
 
   const handlers: Record<string, Handler> = {
@@ -33,9 +40,15 @@ export default defineDmsPlugin(() => {
     [NOTIFICATION_READ_TYPE]: async (payload) => {
       if (Array.isArray(payload?.ids)) await handleRemoteRead(payload.ids);
     },
+    [NOTIFICATION_UNREAD_TYPE]: async (payload) => {
+      if (Array.isArray(payload?.ids)) await handleRemoteUnread(payload.ids);
+    },
     [NOTIFICATION_ALL_READ_TYPE]: async () => {
       await handleRemoteAllRead();
     },
+    [NOTIFICATION_SEEN_TYPE]: () => {
+      handleRemoteSeen();
+    },
   };
 
   let unsubscribe: (() => void) | undefined;

package/frontend-vue/layers/dms-layout/app/plugins/permission-preview-prepaint.ts

@@ -0,0 +1,40 @@
+import {
+  PERMISSION_PREVIEW_PENDING_ATTRIBUTE,
+  PERMISSION_PREVIEW_QUERY_KEY,
+  PERMISSION_PREVIEW_STORAGE_PREFIX,
+  PERMISSION_PREVIEW_TAB_KEY,
+} from "#dms-core/app/build/utils/permission-preview";
+
+const PRE_PAINT_SCRIPT_ID = "dms-role-preview";
+const PENDING_VALUE = "pending";
+// Never leave a page hidden: past this delay (the preview plugin failed to
+// load, the preview request hangs) the page shows as it is.
+const PENDING_TIMEOUT_MS = 6000;
+
+/**
+ * Runs in `<head>` before first paint. A preview tab (opened with the
+ * preview query, or reloaded while being one) is only known in the browser,
+ * from its storage: without this, a reload showed the full page for a second
+ * before its veils and bar. A normal tab reads two storage keys and stops.
+ * Source text rather than a serialized function, which a bundler could fill
+ * with helpers the page does not have.
+ */
+const PRE_PAINT_SCRIPT = `(() => {
+  try {
+    const id =
+      new URLSearchParams(location.search).get(${JSON.stringify(PERMISSION_PREVIEW_QUERY_KEY)}) ||
+      sessionStorage.getItem(${JSON.stringify(PERMISSION_PREVIEW_TAB_KEY)});
+    if (!id || !localStorage.getItem(${JSON.stringify(PERMISSION_PREVIEW_STORAGE_PREFIX)} + id)) return;
+    const root = document.documentElement;
+    root.setAttribute(${JSON.stringify(PERMISSION_PREVIEW_PENDING_ATTRIBUTE)}, ${JSON.stringify(PENDING_VALUE)});
+    setTimeout(() => root.removeAttribute(${JSON.stringify(PERMISSION_PREVIEW_PENDING_ATTRIBUTE)}), ${PENDING_TIMEOUT_MS});
+  } catch {}
+})();`;
+
+/** Server only: the script only matters before the first paint. */
+export default defineDmsPlugin(() => {
+  if (!import.meta.env.SSR) return;
+  useHead({
+    script: [{ id: PRE_PAINT_SCRIPT_ID, innerHTML: PRE_PAINT_SCRIPT }],
+  });
+});

package/frontend-vue/layers/dms-layout/app/plugins/permission-preview.client.ts

@@ -0,0 +1,35 @@
+import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
+import { PERMISSION_PREVIEW_PENDING_ATTRIBUTE } from "#dms-core/app/build/utils/permission-preview";
+
+/** The page shows again: the pre-paint hold of a preview tab is over. */
+function releasePrePaintHold(): void {
+  document.documentElement.removeAttribute(
+    PERMISSION_PREVIEW_PENDING_ATTRIBUTE,
+  );
+}
+
+// "Preview as role": a tab the roles editor opened (or reloaded while being
+// one) becomes a preview. Deferred to after mount, so the server-rendered page
+// and the first client render agree. From then on every page change and every
+// edit the editor pushes asks the server what the role would lose. The page,
+// held back by the pre-paint script meanwhile, shows once the first answer
+// has veiled it.
+export default defineDmsPlugin(() => {
+  const preview = usePermissionPreview();
+  if (!preview.activate()) {
+    releasePrePaintHold();
+    return;
+  }
+  const route = useDmsRoute();
+  let isFirstRefresh = true;
+  watch(
+    [() => route.path, () => preview.session.value?.permissions],
+    ([path]) => {
+      const refresh = preview.refresh(path);
+      if (!isFirstRefresh) return;
+      isFirstRefresh = false;
+      void refresh.finally(() => nextTick(releasePrePaintHold));
+    },
+    { immediate: true },
+  );
+});

package/frontend-vue/layers/dms-layout/app/plugins/profile-sync.client.ts

@@ -5,10 +5,16 @@ interface FormSubmitSuccessPayload {
   submitUrl?: string;
 }
 
+const REGION_PREFERENCES_ROUTE = "/settings/user/region/preferences";
+
+/** The forms that edit the signed-in user's own record. */
+const SESSION_FORM_ROUTES = new Set([PROFILE_ROUTE, REGION_PREFERENCES_ROUTE]);
+
 /**
- * Keeps the global user identity in sync with the profile form: when the
- * profile page's form saves successfully, refresh the session user so the
- * header menu and the switch-account page pick up the new name immediately.
+ * Keeps the global user identity in sync with the forms that edit it: when
+ * the profile or the Language & region form saves, the session user is read
+ * again, so the header menu shows the new name and the language and the
+ * regional formats follow at once.
  */
 export default defineDmsPlugin(() => {
   const { refresh } = useCurrentUser();
@@ -16,7 +22,7 @@ export default defineDmsPlugin(() => {
   window.addEventListener(FormEvents.SUBMIT_SUCCESS, (event) => {
     const detail = (event as CustomEvent<ComponentEventData>).detail;
     const payload = detail?.data as FormSubmitSuccessPayload | undefined;
-    if (payload?.submitUrl !== PROFILE_ROUTE) {
+    if (!payload?.submitUrl || !SESSION_FORM_ROUTES.has(payload.submitUrl)) {
       return;
     }
     void refresh().catch(() => undefined);

package/frontend-vue/layers/dms-layout/app/plugins/regional-preferences.ts

@@ -0,0 +1,19 @@
+import {
+  readRegionalPreferences,
+  type RegionalPreferenceFields,
+  setRegionalPreferencesSource,
+} from "#dms-core/app/utils/regional";
+
+/**
+ * Points the shared date formatters at the signed-in user's regional
+ * preferences (time zone, clock, date format, first day of the week). Read on
+ * every format, from the session of the request being rendered, so the server
+ * HTML and the browser agree and a saved preference applies at once.
+ */
+export default defineDmsPlugin(() => {
+  setRegionalPreferencesSource(() =>
+    readRegionalPreferences(
+      useUserSession<RegionalPreferenceFields>().user.value,
+    ),
+  );
+});