@antelopejs/dms 0.4.4 → 0.4.6

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { formatRelativeTime } from "#dms-core/app/utils/formatter";
 import NotificationCard from "./NotificationCard.vue";
+import { settleWidgetRequest } from "./widgetRequest";
 
 const MAX_DISPLAYED_COUNT = 99;
 
@@ -25,9 +26,14 @@ const { isLoadingMore, setupObserver, disconnectObserver } = useInfiniteScroll(
   hasMore,
 );
 
+const refreshUnreadCount = () =>
+  settleWidgetRequest(fetchUnreadCount, () => {
+    unreadCount.value = 0;
+  });
+
 const handleNotificationEvent = async () => {
   if (!isOpen.value) {
-    await fetchUnreadCount();
+    await refreshUnreadCount();
   }
 };
 
@@ -37,14 +43,14 @@ const handleFormSubmitSuccess = async (event: Event) => {
 
   if (submitUrl && submitUrl.includes("/api/notification/")) {
     if (!isOpen.value) {
-      await fetchUnreadCount();
+      await refreshUnreadCount();
     }
   }
 };
 
 const markNotificationsAsRead = async () => {
   if (hasBeenOpened.value) {
-    await markAllAsRead();
+    await settleWidgetRequest(markAllAsRead);
     hasBeenOpened.value = false;
   }
 };
@@ -57,7 +63,7 @@ const handleBeforeUnload = () => {
 
 onMounted(async () => {
   if (!loggedIn.value) return;
-  await fetchUnreadCount();
+  await refreshUnreadCount();
 
   window.addEventListener(
     NotificationEvents.NOTIFICATION_RECEIVED,
@@ -87,7 +93,7 @@ onUnmounted(() => {
 watch(isOpen, async (isNowOpen) => {
   if (isNowOpen) {
     hasBeenOpened.value = true;
-    await fetchNotifications(true);
+    await settleWidgetRequest(() => fetchNotifications(true));
     await nextTick();
     setupObserver();
   } else {

package/frontend-vue/layers/dms-layout/app/build/components/notification/widgetRequest.ts

@@ -0,0 +1,20 @@
+const WIDGET_REQUEST_FAILED_MESSAGE = "[dms] Header widget request failed";
+
+/**
+ * Runs a request a layout widget issues on its own (on mount, on a realtime
+ * event, on open). A failure -- a tenant access gate answering 403, a network
+ * error -- is logged and degrades the widget through `onFailure` instead of
+ * reaching the app error handler, which would replace the whole page with an
+ * error screen.
+ */
+export async function settleWidgetRequest(
+  request: () => Promise<unknown>,
+  onFailure?: () => void,
+): Promise<void> {
+  try {
+    await request();
+  } catch (error) {
+    onFailure?.();
+    console.warn(WIDGET_REQUEST_FAILED_MESSAGE, error);
+  }
+}

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

@@ -82,11 +82,6 @@ function onLinkHover(): void {
   const { to } = props.item;
   if (typeof to === "string") {
     prefetchPageLayout(stripQueryAndHash(to));
-    return;
-  }
-  const path = (to as MenuItemTarget | undefined)?.path;
-  if (path) {
-    prefetchPageLayout(path);
   }
 }
 </script>

package/frontend-vue/layers/dms-layout/app/components/profile/ProfileLanguage.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-const { locale, setLocale } = useI18n();
+const { locale } = useI18n();
 const { uniqueLocales } = useUniqueLocales();
-const { $authFetch } = useAuthFetch();
-const { user, fetch: refreshUser } = useUserSession();
+const { changeLanguage } = useUserLanguage();
 
 const languageOptions = computed(() =>
   uniqueLocales.value.map((lang) => ({
@@ -10,25 +9,6 @@ const languageOptions = computed(() =>
     value: lang.code,
   })),
 );
-
-const handleLanguageChange = async (newLanguage: "en" | "fr") => {
-  setLocale(newLanguage);
-
-  try {
-    await $authFetch("/settings/user/profile", {
-      method: "POST",
-      body: {
-        name: user.value?.name,
-        email: user.value?.email,
-        language: newLanguage,
-      },
-    });
-
-    await refreshUser();
-  } catch {
-    /* ignore — silently skip the update on network / backend errors */
-  }
-};
 </script>
 
 <template>
@@ -62,7 +42,7 @@ const handleLanguageChange = async (newLanguage: "en" | "fr") => {
             class="w-full"
             :items="languageOptions"
             :model-value="locale"
-            @update:model-value="handleLanguageChange"
+            @update:model-value="changeLanguage"
           />
         </div>
       </section>

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

@@ -0,0 +1,59 @@
+const DISMISSED_BANNERS_COOKIE = "dms-dismissed-banners";
+
+type LayoutBannerRole = "status" | "alert";
+
+interface LayoutBannerPresentation {
+  role: LayoutBannerRole;
+  color: LayoutBannerVariant;
+  icon: string;
+}
+
+// An error interrupts the screen reader; info and warning wait their turn.
+const PRESENTATIONS: Record<LayoutBannerVariant, LayoutBannerPresentation> = {
+  info: { role: "status", color: "info", icon: "i-ph-info-light" },
+  warning: { role: "status", color: "warning", icon: "i-ph-warning-light" },
+  error: { role: "alert", color: "error", icon: "i-ph-warning-octagon-light" },
+};
+
+/**
+ * Role, color and icon a banner renders with. An unknown variant — from a
+ * newer backend, or an untyped registration — renders as `info` rather than
+ * as an unstyled strip.
+ */
+export const resolveLayoutBannerPresentation = (
+  banner: LayoutBanner,
+): LayoutBannerPresentation => {
+  const presentation = PRESENTATIONS[banner.variant] ?? PRESENTATIONS.info;
+  return { ...presentation, icon: banner.icon ?? presentation.icon };
+};
+
+/**
+ * The global banners rendered under the dashboard header, as resolved by the
+ * server for this request (see `RegisterLayoutBanner` in
+ * `@antelopejs/interface-dms/layout-banners`), minus the ones the user
+ * dismissed.
+ *
+ * Dismissals are kept in a session cookie rather than in local storage so the
+ * server-rendered page already leaves a dismissed banner out, instead of
+ * painting it and removing it on hydration.
+ */
+export const useLayoutBanners = () => {
+  const { siteLayout } = useSiteLayout();
+  const dismissed = useDmsCookie<string[]>(DISMISSED_BANNERS_COOKIE, {
+    default: () => [],
+    sameSite: "lax",
+  });
+
+  const banners = computed<LayoutBanner[]>(() =>
+    (siteLayout.value?.banners ?? []).filter(
+      (banner) => !banner.dismissible || !dismissed.value.includes(banner.key),
+    ),
+  );
+
+  function dismiss(key: string): void {
+    if (dismissed.value.includes(key)) return;
+    dismissed.value = [...dismissed.value, key];
+  }
+
+  return { banners, dismiss };
+};

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

@@ -1,5 +1,7 @@
 import {
   QUICK_ACTION_ADD,
+  QUICK_ACTION_BUTTON,
+  QUICK_ACTION_BUTTON_KEY,
   QUICK_ACTION_COMPONENT_KEY,
   QUICK_ACTION_QUERY_KEY,
 } from "#dms-ui/app/types/quick-actions";
@@ -32,6 +34,17 @@ const targetHandlers: Record<
       },
     });
   },
+  button: (target) => {
+    if (target.type !== "button") return;
+    return navigateDms({
+      path: target.to,
+      query: {
+        [QUICK_ACTION_QUERY_KEY]: QUICK_ACTION_BUTTON,
+        [QUICK_ACTION_COMPONENT_KEY]: target.component,
+        [QUICK_ACTION_BUTTON_KEY]: target.button,
+      },
+    });
+  },
   event: (target) => {
     if (target.type !== "event") return;
     if (typeof window === "undefined") return;
@@ -43,8 +56,8 @@ const targetHandlers: Record<
 
 /**
  * Runs the client-side behavior a quick action declares through its
- * discriminated `target`: `navigate` and `openForm` route to the action's
- * page, `event` dispatches a window `CustomEvent` in place for whoever
+ * discriminated `target`: `navigate`, `openForm` and `button` route to the
+ * action's page, `event` dispatches a window `CustomEvent` in place for whoever
  * listens.
  */
 export function dispatchQuickActionTarget(target: QuickActionTarget): unknown {

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

@@ -0,0 +1,33 @@
+const PROFILE_ENDPOINT = "/settings/user/profile";
+
+/**
+ * Switches the interface language and stores it on the user's profile, so the
+ * `language-sync` plugin re-applies it on the next load instead of reverting
+ * to the previously stored language. Every language switcher goes through it.
+ */
+export function useUserLanguage() {
+  const dmsApp = useDmsApp();
+  const { $authFetch } = useAuthFetch();
+  const { user, fetch: refreshUser } = useUserSession();
+
+  async function changeLanguage(language: string): Promise<void> {
+    await dmsApp.$i18n.setLocale(language);
+
+    try {
+      await $authFetch(PROFILE_ENDPOINT, {
+        method: "POST",
+        body: {
+          name: user.value?.name,
+          email: user.value?.email,
+          language,
+        },
+      });
+
+      await refreshUser();
+    } catch {
+      /* ignore — silently skip the update on network / backend errors */
+    }
+  }
+
+  return { changeLanguage };
+}

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

@@ -3,6 +3,7 @@ import Container from "../build/components/layout/Container.vue";
 import PageHeader from "../build/components/layout/PageHeader.vue";
 import DashboardSidebar from "../build/components/layout/DashboardSidebar.vue";
 import DashboardHeader from "../build/components/layout/DashboardHeader.vue";
+import DashboardBanners from "../build/components/layout/DashboardBanners.vue";
 
 interface Props {
   fullWidth?: boolean;
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
     <UDashboardPanel>
       <template #header>
         <DashboardHeader />
+        <DashboardBanners />
       </template>
 
       <template #body>

package/frontend-vue/layers/dms-layout/app/emails/EmailAdminInvite.vue

@@ -1,31 +1,76 @@
 <script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 import EmailLayout from "./components/EmailLayout.vue";
 import EmailButton from "./components/EmailButton.vue";
 import { emailStyles } from "./components/index";
 
-defineProps<{
+const props = defineProps<{
   email: string;
   signupLink: string;
-  expiresIn: string;
+  expiresInDays: number;
+  workspaceName?: string;
+  inviterName?: string;
+  platformName?: string;
 }>();
+
+const { t, locale } = useI18n();
+
+const joinTarget = computed(() => {
+  const { workspaceName, platformName } = props;
+  if (workspaceName && platformName) {
+    return t("emails.admin_invite.workspace_on_platform", {
+      workspace: workspaceName,
+      platform: platformName,
+    });
+  }
+  return workspaceName || platformName;
+});
+
+const title = computed(() =>
+  props.workspaceName
+    ? t("emails.admin_invite.title_workspace", {
+        workspace: props.workspaceName,
+      })
+    : t("emails.admin_invite.title"),
+);
+
+const invitation = computed(() => {
+  if (!joinTarget.value) {
+    return t("emails.admin_invite.invitation");
+  }
+  return props.inviterName
+    ? t("emails.admin_invite.invitation_from_inviter", {
+        inviter: props.inviterName,
+        target: joinTarget.value,
+      })
+    : t("emails.admin_invite.invitation_to_target", {
+        target: joinTarget.value,
+      });
+});
 </script>
 
 <template>
-  <EmailLayout title="You're Invited!">
-    <EText :style="emailStyles.text">Hello,</EText>
+  <EmailLayout :title="title" :lang="locale">
+    <EText :style="emailStyles.text">
+      {{ t("emails.admin_invite.greeting") }}
+    </EText>
 
     <EText :style="emailStyles.text">
-      You've been invited to join our platform. Click the button below to create
-      your account:
+      {{ invitation }} {{ t("emails.admin_invite.call_to_action") }}
     </EText>
 
-    <EmailButton :href="signupLink" :expires-in="expiresIn">
-      Create Account
+    <EmailButton
+      :href="signupLink"
+      :expires-in="t('emails.admin_invite.expires_in', { days: expiresInDays })"
+      :expires-label="t('emails.admin_invite.expires_label')"
+    >
+      {{ t("emails.admin_invite.button") }}
     </EmailButton>
 
     <template #footer>
       <EText :style="emailStyles.footer">
-        If you didn't expect this invitation, you can safely ignore this email.
+        {{ t("emails.admin_invite.footer") }}
       </EText>
     </template>
   </EmailLayout>

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

@@ -34,6 +34,13 @@ const DEFAULT_ERROR_CONFIG = {
 
 const DEFAULT_STATUS_CODE = 500;
 
+// Their cards already say what happened; the message behind them is the
+// technical cause ("DMS backend request failed"), which the server has logged.
+const STATUSES_WITHOUT_ERROR_MESSAGE = new Set([
+  HTTP_NOT_FOUND,
+  HTTP_FORBIDDEN,
+]);
+
 const props = defineProps<{
   error: DmsErrorData;
 }>();
@@ -45,6 +52,14 @@ const { loggedIn, reconcileSession, redirectToAuth } = useSessionRecovery();
 
 const isRecovering = ref(false);
 
+const visibleErrorMessage = computed(() =>
+  STATUSES_WITHOUT_ERROR_MESSAGE.has(
+    props.error.statusCode || DEFAULT_STATUS_CODE,
+  )
+    ? undefined
+    : props.error.message,
+);
+
 const errorConfig = computed(() => {
   const statusCode = props.error.statusCode || DEFAULT_STATUS_CODE;
   const config = ERROR_CONFIGS[statusCode] || DEFAULT_ERROR_CONFIG;
@@ -121,10 +136,10 @@ onMounted(() => {
         </p>
 
         <p
-          v-if="!isRecovering && error.message"
+          v-if="!isRecovering && visibleErrorMessage"
           class="text-dimmed mb-6 text-sm"
         >
-          {{ error.message }}
+          {{ visibleErrorMessage }}
         </p>
 
         <div v-if="!isRecovering" class="flex gap-3">

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

@@ -34,6 +34,7 @@ export default defineDmsPlugin(() => {
   const { i18n, translate } = getPluginI18n();
   const toast = useToast();
   const { logout } = useLogout();
+  const { changeLanguage } = useUserLanguage();
   const { copy } = useClipboard({ legacy: true });
 
   const localeItems = (): CommandPaletteItem[] =>
@@ -41,7 +42,7 @@ export default defineDmsPlugin(() => {
       label: locale.name ?? locale.code,
       active: i18n.locale.value === locale.code,
       onSelect: () => {
-        void i18n.setLocale(locale.code);
+        void changeLanguage(locale.code);
       },
     }));
 

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

@@ -65,9 +65,30 @@ export type SiteLayoutTree = Omit<PageInfo, "layoutUrl"> & {
   layoutUrl?: string;
   hasAccess?: boolean;
 };
+// Mirror of LayoutBannerVariant from @antelopejs/interface-dms/layout-banners.
+export type LayoutBannerVariant = "info" | "warning" | "error";
+
+/**
+ * Mirror of the backend's serialized layout banner. The payload only carries
+ * the banners whose visibility resolver passed for this request, so there is
+ * nothing left to decide here but the user's own dismissals.
+ */
+export interface LayoutBanner {
+  key: string;
+  variant: LayoutBannerVariant;
+  order: number;
+  dismissible: boolean;
+  icon?: string;
+  text?: string;
+  component?: string;
+  props?: Record<string, unknown>;
+}
+
 export type SiteLayout = {
   pages: Record<string, PageInfo>;
   categories: Record<string, CategoryInfo>;
+  /** Absent when the backend predates layout banners. */
+  banners?: LayoutBanner[];
 };
 
 export interface QuickActionCategoryInfo {
@@ -80,6 +101,7 @@ export interface QuickActionCategoryInfo {
 export type QuickActionTarget =
   | { type: "navigate"; to: string; query?: Record<string, string> }
   | { type: "openForm"; to: string; component: string }
+  | { type: "button"; to: string; component: string; button: string }
   | { type: "event"; name: string; payload?: unknown };
 
 /**

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

@@ -0,0 +1,48 @@
+import type { PageValidation } from "../types/page";
+
+export interface BreadcrumbTargetSource {
+  layoutUrl?: string;
+  validation?: PageValidation;
+}
+
+/**
+ * The URL that opens the page at `path`. A page that declares
+ * `validation.requiredQueryParams` 404s without them, so the URL carries the
+ * values `currentQuery` holds for them — and only those — and there is no URL
+ * when any is missing, empty or repeated.
+ */
+export function buildPageTarget(
+  path: string,
+  validation: PageValidation | undefined,
+  currentQuery: Record<string, unknown>,
+): string | undefined {
+  const requiredParams = validation?.requiredQueryParams ?? [];
+  const carriedQuery = new URLSearchParams();
+
+  for (const param of requiredParams) {
+    const value = currentQuery[param];
+    if (typeof value !== "string" || value === "") {
+      return undefined;
+    }
+    carriedQuery.set(param, value);
+  }
+
+  const search = carriedQuery.toString();
+  return search ? `${path}?${search}` : path;
+}
+
+/**
+ * The link of a breadcrumb crumb: the page's {@link buildPageTarget}.
+ * Categories without a page behind them get no link.
+ */
+export function buildBreadcrumbTarget(
+  path: string,
+  metadata: BreadcrumbTargetSource,
+  currentQuery: Record<string, unknown>,
+): string | undefined {
+  if (!metadata.layoutUrl) {
+    return undefined;
+  }
+
+  return buildPageTarget(path, metadata.validation, currentQuery);
+}

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

@@ -0,0 +1,94 @@
+import { getQuery, parseURL } from "ufo";
+import type { FavoritePage } from "../composables/favorites/useFavoritePages";
+import type { PageValidation } from "../types/page";
+import { buildPageTarget } from "./breadcrumb";
+
+const FAVORITE_TITLE_SEPARATOR = " · ";
+
+export interface FavoritePageMetadata {
+  id?: string;
+  displayName?: string;
+  icon?: string;
+  validation?: PageValidation;
+}
+
+export interface FavoritePageSource {
+  path: string;
+  metadata: FavoritePageMetadata;
+  query: Record<string, unknown>;
+  translate: (text: string) => string;
+}
+
+export type FavoriteRouteResolver = (
+  path: string,
+) => { metadata: FavoritePageMetadata } | null;
+
+function requiredQueryValues(
+  validation: PageValidation | undefined,
+  query: Record<string, unknown>,
+): string[] {
+  return (validation?.requiredQueryParams ?? []).map((param) =>
+    String(query[param]),
+  );
+}
+
+// A page narrowed by its query shows one entity out of many: its generic
+// display name would label every favorite of it the same way.
+function entityTitle(pageTitle: string, queryValues: string[]): string {
+  return [pageTitle, ...queryValues].join(FAVORITE_TITLE_SEPARATOR);
+}
+
+/**
+ * The favorite that reopens the page at `path` as it is showing now. A page
+ * requiring query parameters keeps them in its path and gets a title telling
+ * its entities apart; there is no favorite when a required value is missing.
+ */
+export function buildFavoritePage(
+  source: FavoritePageSource,
+): FavoritePage | null {
+  const { path, metadata, query } = source;
+  const target = buildPageTarget(path, metadata.validation, query);
+  if (!target) {
+    return null;
+  }
+
+  const displayName = metadata.displayName || path;
+  const queryValues = requiredQueryValues(metadata.validation, query);
+  if (queryValues.length === 0) {
+    return {
+      id: metadata.id || path,
+      path,
+      title: displayName,
+      icon: metadata.icon,
+    };
+  }
+
+  return {
+    id: target,
+    path: target,
+    title: entityTitle(source.translate(displayName), queryValues),
+    icon: metadata.icon,
+  };
+}
+
+/**
+ * Whether a stored favorite still opens a page: its path matches one, and its
+ * query holds every value that page requires.
+ */
+export function isFavoritePathValid(
+  favoritePath: string,
+  resolveRoute: FavoriteRouteResolver,
+): boolean {
+  const { pathname } = parseURL(favoritePath);
+  const route = resolveRoute(pathname);
+  if (!route) {
+    return false;
+  }
+  return (
+    buildPageTarget(
+      pathname,
+      route.metadata.validation,
+      getQuery(favoritePath),
+    ) !== undefined
+  );
+}

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

@@ -40,7 +40,9 @@
     "soon": "Coming soon"
   },
   "quickActions": {
-    "title": "Quick actions"
+    "title": "Quick actions",
+    "category_members": "Members",
+    "invite_member": "Invite a member"
   },
   "commandPalette": {
     "button": "Search…",
@@ -218,7 +220,8 @@
           "cancel_confirm_description": "Are you sure you want to cancel this invitation? The invite link will no longer work."
         },
         "error": {
-          "not_found": "Invitation not found"
+          "not_found": "Invitation not found",
+          "resolved": "This invitation has already been accepted or cancelled"
         }
       },
       "roles": {
@@ -269,5 +272,21 @@
     "intro": "Browse the modules available on this platform.",
     "empty": "No modules are accessible to you yet.",
     "open": "Open module"
+  },
+  "emails": {
+    "admin_invite": {
+      "title": "You're Invited!",
+      "title_workspace": "You're invited to {workspace}",
+      "greeting": "Hello,",
+      "invitation": "You've been invited to join our platform.",
+      "invitation_to_target": "You've been invited to join {target}.",
+      "invitation_from_inviter": "{inviter} invited you to join {target}.",
+      "workspace_on_platform": "{workspace} on {platform}",
+      "call_to_action": "Click the button below to create your account:",
+      "button": "Create Account",
+      "expires_label": "This invitation expires in",
+      "expires_in": "{days} days",
+      "footer": "If you didn't expect this invitation, you can safely ignore this email."
+    }
   }
 }