@antelopejs/dms 0.0.1

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

@@ -0,0 +1,45 @@
+const INTERSECTION_THRESHOLD = 0.1;
+
+export function useInfiniteScroll(
+  sentinelRef: Ref<HTMLElement | null>,
+  loadMore: () => Promise<void>,
+  hasMore: Ref<boolean>,
+) {
+  const isLoadingMore = ref(false);
+  let observer: IntersectionObserver | null = null;
+
+  const setupObserver = () => {
+    disconnectObserver();
+
+    if (!sentinelRef.value) return;
+
+    observer = new IntersectionObserver(
+      async (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting && hasMore.value && !isLoadingMore.value) {
+          isLoadingMore.value = true;
+          await loadMore();
+          isLoadingMore.value = false;
+        }
+      },
+      { threshold: INTERSECTION_THRESHOLD },
+    );
+
+    observer.observe(sentinelRef.value);
+  };
+
+  const disconnectObserver = () => {
+    observer?.disconnect();
+    observer = null;
+  };
+
+  onUnmounted(() => {
+    disconnectObserver();
+  });
+
+  return {
+    isLoadingMore,
+    setupObserver,
+    disconnectObserver,
+  };
+}

package/frontend-vue/layers/dms-layout/app/composables/notification/types/events.ts

@@ -0,0 +1,6 @@
+export const NotificationEvents = {
+  NOTIFICATION_RECEIVED: "DmsComponent.Notification.Received",
+  NOTIFICATION_READ: "DmsComponent.Notification.Read",
+  NOTIFICATION_DELETED: "DmsComponent.Notification.Deleted",
+  COUNT_CHANGED: "DmsComponent.Notification.CountChanged",
+} as const;

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

@@ -0,0 +1,223 @@
+import { NotificationEvents } from "./types/events";
+
+export interface UserNotification {
+  _id: string;
+  userId: string;
+  icon: string;
+  title: string;
+  description: string;
+  params: Record<string, string | number> | null;
+  linkTo: string | null;
+  isRead: boolean;
+  categoryId: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const NOTIFICATION_COMPONENT_ID = "global-notifications";
+const NOTIFICATIONS_PAGE_SIZE = 20;
+
+export const useNotifications = () => {
+  const { $authFetch } = useAuthFetch();
+  const { sendComponentEvent } = useComponentEvent();
+  const unreadCount = useDmsState<number>("notifications-unread-count", () => 0);
+  const unreadPreview = useDmsState<UserNotification[]>(
+    "notifications-unread-preview",
+    () => [],
+  );
+  const notifications = useDmsState<UserNotification[]>(
+    "notifications-list",
+    () => [],
+  );
+  const offset = useDmsState<number>("notifications-offset", () => 0);
+  const hasMore = useDmsState<boolean>("notifications-has-more", () => true);
+
+  const fetchUnreadCount = async () => {
+    const data = await $authFetch<{ count: number }>(
+      "/settings/user/notifications/unread-count",
+    );
+    if (data) {
+      unreadCount.value = data.count;
+    }
+  };
+
+  const fetchUnreadPreview = async () => {
+    const data = await $authFetch<UserNotification[]>(
+      "/settings/user/notifications/unread-preview",
+    );
+    if (data) {
+      unreadPreview.value = data;
+    }
+  };
+
+  const fetchNotifications = async (reset = false) => {
+    if (reset) {
+      offset.value = 0;
+      notifications.value = [];
+      hasMore.value = true;
+    }
+
+    const data = await $authFetch<UserNotification[]>(
+      `/settings/user/notifications/list?limit=${NOTIFICATIONS_PAGE_SIZE}&offset=${offset.value}`,
+    );
+
+    if (data) {
+      notifications.value = [...notifications.value, ...data];
+      offset.value += data.length;
+      hasMore.value = data.length === NOTIFICATIONS_PAGE_SIZE;
+    }
+  };
+
+  const markAsRead = async (notificationId: string) => {
+    await $authFetch(
+      `/settings/user/notifications/mark-read/${notificationId}`,
+      {
+        method: "PUT",
+      },
+    );
+
+    const updateNotification = (n: UserNotification) => {
+      if (n._id === notificationId) {
+        return { ...n, isRead: true };
+      }
+      return n;
+    };
+
+    notifications.value = notifications.value.map(updateNotification);
+    unreadPreview.value = unreadPreview.value.map(updateNotification);
+
+    await fetchUnreadCount();
+
+    sendComponentEvent(
+      NotificationEvents.NOTIFICATION_READ,
+      NOTIFICATION_COMPONENT_ID,
+      { notificationId },
+    );
+  };
+
+  const deleteNotification = async (notificationId: string) => {
+    await $authFetch(`/settings/user/notifications/delete/${notificationId}`, {
+      method: "DELETE",
+    });
+
+    notifications.value = notifications.value.filter(
+      (n) => n._id !== notificationId,
+    );
+    unreadPreview.value = unreadPreview.value.filter(
+      (n) => n._id !== notificationId,
+    );
+
+    await fetchUnreadCount();
+
+    sendComponentEvent(
+      NotificationEvents.NOTIFICATION_DELETED,
+      NOTIFICATION_COMPONENT_ID,
+      { notificationId },
+    );
+  };
+
+  const markAllAsRead = async () => {
+    await $authFetch("/settings/user/notifications/mark-all-read", {
+      method: "PUT",
+    });
+
+    notifications.value = notifications.value.map((n) => ({
+      ...n,
+      isRead: true,
+    }));
+    unreadPreview.value = [];
+
+    await fetchUnreadCount();
+
+    sendComponentEvent(
+      NotificationEvents.COUNT_CHANGED,
+      NOTIFICATION_COMPONENT_ID,
+      { count: 0 },
+    );
+  };
+
+  const deleteAll = async () => {
+    await $authFetch("/settings/user/notifications/delete-all", {
+      method: "DELETE",
+    });
+
+    notifications.value = [];
+    unreadPreview.value = [];
+    unreadCount.value = 0;
+    hasMore.value = false;
+
+    sendComponentEvent(
+      NotificationEvents.COUNT_CHANGED,
+      NOTIFICATION_COMPONENT_ID,
+      { count: 0 },
+    );
+  };
+
+  const handleRemoteRead = async (ids: string[]) => {
+    if (ids.length === 0) return;
+    const idsSet = new Set(ids);
+    const updateNotification = (n: UserNotification) =>
+      idsSet.has(n._id) ? { ...n, isRead: true } : n;
+    notifications.value = notifications.value.map(updateNotification);
+    unreadPreview.value = unreadPreview.value.map(updateNotification);
+    await fetchUnreadCount();
+    for (const notificationId of ids) {
+      sendComponentEvent(
+        NotificationEvents.NOTIFICATION_READ,
+        NOTIFICATION_COMPONENT_ID,
+        { notificationId },
+      );
+    }
+  };
+
+  const handleRemoteAllRead = async () => {
+    notifications.value = notifications.value.map((n) => ({
+      ...n,
+      isRead: true,
+    }));
+    unreadPreview.value = [];
+    await fetchUnreadCount();
+    sendComponentEvent(
+      NotificationEvents.COUNT_CHANGED,
+      NOTIFICATION_COMPONENT_ID,
+      { count: 0 },
+    );
+  };
+
+  const handleIncomingNotification = (incoming: UserNotification) => {
+    const isAlreadyKnown = notifications.value.some(
+      (n) => n._id === incoming._id,
+    );
+    if (isAlreadyKnown) return;
+    notifications.value = [incoming, ...notifications.value];
+    unreadPreview.value = [incoming, ...unreadPreview.value];
+    unreadCount.value += 1;
+    sendComponentEvent(
+      NotificationEvents.NOTIFICATION_RECEIVED,
+      NOTIFICATION_COMPONENT_ID,
+      { notification: incoming },
+    );
+    sendComponentEvent(
+      NotificationEvents.COUNT_CHANGED,
+      NOTIFICATION_COMPONENT_ID,
+      { count: unreadCount.value },
+    );
+  };
+
+  return {
+    unreadCount,
+    unreadPreview,
+    notifications,
+    hasMore,
+    fetchUnreadCount,
+    fetchUnreadPreview,
+    fetchNotifications,
+    markAsRead,
+    deleteNotification,
+    markAllAsRead,
+    deleteAll,
+    handleIncomingNotification,
+    handleRemoteRead,
+    handleRemoteAllRead,
+  };
+};

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

@@ -0,0 +1,33 @@
+import type { ComputedRef } from "vue";
+
+export interface CurrentModule {
+  id: string;
+  info: ModuleInfo & { hasAccess: boolean };
+}
+
+function extractModuleIdFromPath(path: string): string | null {
+  const prefix = `${MODULE_URL_PREFIX}/`;
+  if (!path.startsWith(prefix)) {
+    return null;
+  }
+  const remainder = path.slice(prefix.length);
+  const slashIndex = remainder.indexOf("/");
+  const segment =
+    slashIndex === -1 ? remainder : remainder.slice(0, slashIndex);
+  return segment.length > 0 ? segment : null;
+}
+
+export const useCurrentModule = (): ComputedRef<CurrentModule | null> => {
+  const route = useDmsRoute();
+  const { modules } = useSiteLayout();
+
+  return computed(() => {
+    const moduleId = extractModuleIdFromPath(route.path);
+    if (!moduleId) return null;
+
+    const info = modules.value?.[moduleId];
+    if (!info) return null;
+
+    return { id: moduleId, info };
+  });
+};

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

@@ -0,0 +1,91 @@
+// Pass 1 hides the sidebar's own exclusions (settings + module trees). Pass 2
+// re-includes `settings` as a last resort but still hides modules: module pages
+// have their own routing/context and are never a redirect target (module roots
+// are skipped below, matching the sidebar).
+const SIDEBAR_EXCLUDED_TOP_LEVEL_IDS = new Set(["settings", "modules"]);
+const LAST_RESORT_EXCLUDED_TOP_LEVEL_IDS = new Set(["modules"]);
+
+interface FirstAccessiblePageOptions {
+  excludedTopLevelIds: Set<string>;
+}
+
+// A landing target must be a real, directly reachable page: it needs a layout,
+// a concrete slug (no `:id` placeholder), and must not be `hidden` — hidden
+// pages include the table-view `new`/`edit` sub-pages, which are not valid
+// destinations to drop a user on.
+function isNavigablePage(node: SiteLayoutTree): boolean {
+  return (
+    !!node.layoutUrl &&
+    !!node.fullSlug &&
+    !node.fullSlug.includes(":") &&
+    node.hidden !== true
+  );
+}
+
+// A category whose own `hasAccess` is false can still hold accessible pages,
+// so only leaf pages are filtered on `hasAccess`; containers are always
+// traversed. Module roots are skipped entirely (never descended into).
+function findFirstAccessiblePage(
+  node: SiteLayoutTree,
+  options: FirstAccessiblePageOptions,
+  isTopLevel: boolean,
+): string | undefined {
+  for (const childId of node.childrenOrders) {
+    const child = node.children[childId];
+    if (!child || child.isModuleRoot) {
+      continue;
+    }
+    if (isTopLevel && options.excludedTopLevelIds.has(child.id)) {
+      continue;
+    }
+    if (isNavigablePage(child) && child.hasAccess !== false) {
+      return child.fullSlug;
+    }
+    const nested = findFirstAccessiblePage(child, options, false);
+    if (nested) {
+      return nested;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Pure resolver: the path of the first page a user can access in the given site
+ * layout tree, in tree (sidebar) order. A category the user cannot access is
+ * still descended into, because it can hold accessible pages — the goal is to
+ * drop the user on a usable page rather than a 403, even when the sidebar hides
+ * that page's category. Only navigable, non-hidden leaf pages the user can
+ * access are returned. `settings` pages are a last resort; module pages are
+ * never a target. Returns `undefined` when the tree is missing or nothing is
+ * accessible. Takes the tree as an argument so it can run after an `await`
+ * (where composable context is no longer available).
+ */
+export function firstAccessiblePagePath(
+  tree: SiteLayoutTree | undefined,
+): string | undefined {
+  if (!tree) {
+    return undefined;
+  }
+  return (
+    findFirstAccessiblePage(
+      tree,
+      { excludedTopLevelIds: SIDEBAR_EXCLUDED_TOP_LEVEL_IDS },
+      true,
+    ) ??
+    findFirstAccessiblePage(
+      tree,
+      { excludedTopLevelIds: LAST_RESORT_EXCLUDED_TOP_LEVEL_IDS },
+      true,
+    )
+  );
+}
+
+/**
+ * Composable wrapper around {@link firstAccessiblePagePath} that reads the
+ * current site layout. Call it synchronously (outside an `await`); to resolve
+ * after an `await`, capture the tree first and call `firstAccessiblePagePath`.
+ */
+export function useFirstAccessiblePagePath(): string | undefined {
+  const { siteLayoutTree } = useSiteLayout();
+  return firstAccessiblePagePath(siteLayoutTree.value);
+}

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

@@ -0,0 +1,6 @@
+import type { ComputedRef } from "vue";
+
+export const useIsOwner = (): ComputedRef<boolean> => {
+  const { isOwner } = useSiteLayout();
+  return computed(() => isOwner.value === true);
+};

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

@@ -0,0 +1,42 @@
+const MODULE_HISTORY_STATE_KEY = "dms-moduleHistory";
+
+export interface ModuleHistoryEntry {
+  moduleId: string;
+  path: string;
+}
+
+export interface ModuleHistoryApi {
+  record: (moduleId: string, path: string) => void;
+  getLast: (moduleId: string) => string | null;
+  entries: ComputedRef<ModuleHistoryEntry[]>;
+}
+
+export const useModuleHistory = (): ModuleHistoryApi => {
+  const history = useDmsState<Record<string, string>>(
+    MODULE_HISTORY_STATE_KEY,
+    () => ({}),
+  );
+
+  function record(moduleId: string, path: string): void {
+    if (!moduleId || !path) return;
+    // Re-insert the key so a revisited module moves to the end: a plain
+    // spread would keep its first-visit position and break the
+    // oldest-to-newest ordering `entries` guarantees.
+    const { [moduleId]: _previous, ...others } = history.value;
+    history.value = { ...others, [moduleId]: path };
+  }
+
+  function getLast(moduleId: string): string | null {
+    return history.value[moduleId] ?? null;
+  }
+
+  /** Visited modules with their last path, ordered oldest to newest visit. */
+  const entries = computed<ModuleHistoryEntry[]>(() =>
+    Object.entries(history.value).map(([moduleId, path]) => ({
+      moduleId,
+      path,
+    })),
+  );
+
+  return { record, getLast, entries };
+};

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

@@ -0,0 +1,88 @@
+type ModulesListingEntry = ModuleInfo & {
+  hasAccess: boolean;
+  landingSlug: string;
+};
+
+const STATE_KEY_MODULES = "dms-modulesListing";
+const STATE_KEY_LOADING = "dms-modulesListingLoading";
+const STATE_KEY_ERROR = "dms-modulesListingError";
+const ENDPOINT_MODULES_LISTING = "/dms/modules-listing";
+const ERROR_FORBIDDEN_MESSAGE = "Forbidden: only owners can list modules";
+const ERROR_UNKNOWN_MESSAGE = "Unknown error loading modules listing";
+
+function isForbiddenError(error: unknown): boolean {
+  const status = error as
+    | { response?: { status?: number }; statusCode?: number }
+    | undefined;
+  if (!status) return false;
+  if (status.response?.status === HTTP_FORBIDDEN) return true;
+  if (status.statusCode === HTTP_FORBIDDEN) return true;
+  return false;
+}
+
+function extractErrorMessage(error: unknown): string {
+  if (isForbiddenError(error)) return ERROR_FORBIDDEN_MESSAGE;
+  if (error instanceof Error) return error.message;
+  return ERROR_UNKNOWN_MESSAGE;
+}
+
+let inFlightLoadingPromise: Promise<void> | null = null;
+
+export const useModulesListing = () => {
+  const modules = useDmsState<ModulesListingEntry[] | undefined>(
+    STATE_KEY_MODULES,
+    () => undefined,
+  );
+  const isLoading = useDmsState<boolean>(STATE_KEY_LOADING, () => false);
+  const loadingError = useDmsState<string | null>(STATE_KEY_ERROR, () => null);
+
+  function fetchModulesListing(): Promise<void> {
+    const { $authFetch } = useAuthFetch();
+    isLoading.value = true;
+    loadingError.value = null;
+
+    const promise = $authFetch<ModulesListingEntry[]>(ENDPOINT_MODULES_LISTING)
+      .then((result) => {
+        modules.value = result;
+      })
+      .catch((error: unknown) => {
+        loadingError.value = extractErrorMessage(error);
+        modules.value = undefined;
+      })
+      .finally(() => {
+        isLoading.value = false;
+        inFlightLoadingPromise = null;
+      });
+
+    inFlightLoadingPromise = promise;
+    return promise;
+  }
+
+  async function loadModulesListing(): Promise<void> {
+    if (inFlightLoadingPromise) {
+      await inFlightLoadingPromise;
+      return;
+    }
+    if (modules.value !== undefined) {
+      return;
+    }
+    await fetchModulesListing();
+  }
+
+  async function refresh(): Promise<void> {
+    if (inFlightLoadingPromise) {
+      await inFlightLoadingPromise;
+    }
+    modules.value = undefined;
+    loadingError.value = null;
+    await fetchModulesListing();
+  }
+
+  return {
+    modules,
+    isLoading,
+    loadingError,
+    loadModulesListing,
+    refresh,
+  };
+};

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

@@ -0,0 +1,67 @@
+function collectFromComponentInfo(
+  info: ComponentInfo | undefined,
+  names: Set<string>,
+): void {
+  if (!info) return;
+  if (info.componentName) {
+    names.add(info.componentName);
+  }
+  for (const child of info.children || []) {
+    collectFromComponentInfo(child.component, names);
+  }
+}
+
+/**
+ * Collect every componentName referenced by a page layout: the layout
+ * component itself, the top-level components and all their nested children.
+ */
+export function collectPageLayoutComponentNames(
+  layout: PageLayout | null | undefined,
+): string[] {
+  if (!layout) return [];
+
+  const names = new Set<string>();
+  collectFromComponentInfo(layout.layout, names);
+  for (const info of Object.values(layout.components || {})) {
+    collectFromComponentInfo(info, names);
+  }
+  return [...names];
+}
+
+function toCanonicalNames(layout: PageLayout | null | undefined): string[] {
+  return collectPageLayoutComponentNames(layout)
+    .map((name) => resolveDmsComponentName(name))
+    .filter((name): name is string => !!name);
+}
+
+/**
+ * Start fetching the chunks of every component a page layout references,
+ * in parallel, instead of letting each <Component :is> trigger its own
+ * fetch when it mounts (which waterfalls for nested children).
+ * No-op on the server: SSR resolves async components during render.
+ */
+export function preloadPageLayoutComponents(
+  layout: PageLayout | null | undefined,
+): void {
+  if (import.meta.env.SSR) return;
+
+  const names = toCanonicalNames(layout);
+  if (names.length) {
+    preloadComponents(names).catch(() => {});
+  }
+}
+
+/**
+ * Same as preloadPageLayoutComponents, for speculative loading (e.g. link
+ * hover) where the user may never navigate to the page.
+ */
+export function prefetchPageLayoutComponents(
+  layout: PageLayout | null | undefined,
+): void {
+  if (import.meta.env.SSR) return;
+
+  const names = toCanonicalNames(layout);
+  if (names.length) {
+    prefetchComponents(names)?.catch(() => {});
+  }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Reads the same page cache that Inertia hydrates before navigation. Missing
+ * layouts (including newly registered dev pages) use the shared deduped loader.
+ */
+export async function usePageLayout() {
+  const route = useDmsRoute();
+  const siteLayout = useSiteLayout();
+
+  const layoutUrl = computed(() => {
+    const metadata = siteLayout.findMatchingRoute(route.path)?.metadata;
+    return metadata?.hasAccess === false ? undefined : metadata?.layoutUrl;
+  });
+  const pageLayout = computed(() =>
+    layoutUrl.value
+      ? (siteLayout.pageLayouts.value[layoutUrl.value] ?? null)
+      : null,
+  );
+  const load = async () => {
+    if (layoutUrl.value && !pageLayout.value) {
+      await siteLayout.loadPageLayout(layoutUrl.value);
+    }
+  };
+  watch([layoutUrl, () => siteLayout.pageLayouts.value], load);
+  await load();
+
+  return { pageLayout };
+}

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

@@ -0,0 +1,14 @@
+export function usePageLeaveGuard() {
+  const route = useDmsRoute();
+  const { addGuard, clearGuards } = useLeaveGuard();
+
+  const pageKey = computed(() => `${PAGE_GUARD_PREFIX}-${route.path}`);
+
+  function registerGuard(callback: LeaveGuardCallback): () => void {
+    return addGuard(pageKey.value, callback);
+  }
+
+  onBeforeUnmount(() => clearGuards(pageKey.value));
+
+  return { registerGuard };
+}

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

@@ -0,0 +1,21 @@
+export function usePrefetch() {
+  const siteLayout = useSiteLayout();
+
+  function prefetchPageLayout(slug: string): void {
+    const page = siteLayout.siteLayout.value?.pages?.[slug];
+    if (!page?.layoutUrl) return;
+
+    const cached = siteLayout.pageLayouts.value[page.layoutUrl];
+    if (cached) {
+      prefetchPageLayoutComponents(cached);
+      return;
+    }
+
+    siteLayout
+      .loadPageLayout(page.layoutUrl)
+      .then((layout) => prefetchPageLayoutComponents(layout))
+      .catch(() => {});
+  }
+
+  return { prefetchPageLayout };
+}