@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -20,6 +20,12 @@ const theme = tv({
     childList: "space-y-0.5",
     collapsibleTrigger: "w-full justify-between",
     collapsibleContent: "mt-0.5 space-y-0.5",
+    // "Preview as role" only: the badge the rail puts on a locked entry's
+    // icon, and the lock a nested locked entry ends with (toned by state).
+    topLevelLock:
+      "absolute -top-0.5 -right-0.5 size-3.5 rounded-full bg-default",
+    lock: "ml-auto size-3.5 shrink-0",
+    groupLock: "size-3.5 shrink-0",
   },
   variants: {
     isTopLevel: {
@@ -32,12 +38,32 @@ const theme = tv({
     isAccent: {
       true: { topLevelButton: "text-primary", link: "text-primary" },
     },
+    // Same hatches as the expanded menu (NavigationMenu.vue): red for an
+    // entry the role could not open, orange for one it opens partially.
+    previewState: {
+      hidden: {
+        topLevelButton: "text-muted dms-hatch-locked",
+        link: "text-muted dms-hatch-locked",
+        topLevelLock: "text-error",
+        lock: "text-error",
+        groupLock: "text-error",
+      },
+      partial: {
+        topLevelButton: "dms-hatch-partial",
+        link: "dms-hatch-partial",
+        topLevelLock: "text-warning",
+        lock: "text-warning",
+        groupLock: "text-warning",
+      },
+    },
   },
 });
 </script>
 
 <script setup lang="ts">
 import { DmsLink } from "#dms/frontend-module";
+import { PREVIEW_LOCK_ICON } from "#dms-ui/app/build/utils/permissionPreview";
+
 interface Props {
   item: DmsMenuItem;
   isTopLevel?: boolean;
@@ -53,6 +79,7 @@ const ui = computed(() =>
   theme({
     isTopLevel: props.isTopLevel,
     isAccent: props.item.variant === "accent",
+    previewState: props.item.previewState,
   }),
 );
 
@@ -90,7 +117,11 @@ function onLinkHover(): void {
   <template v-if="!hasChildren">
     <UTooltip
       v-if="isTopLevel"
-      :text="item.label"
+      :text="
+        item.previewState && item.title
+          ? `${item.label} · ${item.title}`
+          : item.label
+      "
       :content="{ side: 'right', sideOffset: 8 }"
     >
       <component
@@ -100,8 +131,13 @@ function onLinkHover(): void {
         @mouseenter="onLinkHover"
       >
         <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon()" />
+        <UIcon
+          v-if="item.previewState"
+          :name="PREVIEW_LOCK_ICON"
+          :class="ui.topLevelLock()"
+        />
         <span
-          v-if="statusClass"
+          v-else-if="statusClass"
           :class="[ui.topLevelStatusDot(), statusClass]"
         />
       </component>
@@ -113,11 +149,17 @@ function onLinkHover(): void {
       :to="item.to"
       :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>
-      <span v-if="statusClass" :class="[ui.statusDot(), statusClass]" />
+      <UIcon
+        v-if="item.previewState"
+        :name="PREVIEW_LOCK_ICON"
+        :class="ui.lock()"
+      />
+      <span v-else-if="statusClass" :class="[ui.statusDot(), statusClass]" />
     </component>
   </template>
 
@@ -129,8 +171,22 @@ function onLinkHover(): void {
       :content="{ side: 'right', sideOffset: 8, align: 'start' }"
       :ui="{ content: 'min-w-48 max-h-[70vh] overflow-y-auto' }"
     >
-      <button type="button" :class="ui.topLevelButton()">
+      <button
+        type="button"
+        :class="ui.topLevelButton()"
+        :title="item.title"
+        :aria-label="
+          item.previewState && item.title
+            ? `${item.label} · ${item.title}`
+            : undefined
+        "
+      >
         <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon()" />
+        <UIcon
+          v-if="item.previewState"
+          :name="PREVIEW_LOCK_ICON"
+          :class="ui.topLevelLock()"
+        />
       </button>
 
       <template #content>
@@ -161,6 +217,11 @@ function onLinkHover(): void {
           <span class="flex items-center gap-2">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.icon()" />
             <span>{{ item.label }}</span>
+            <UIcon
+              v-if="item.previewState"
+              :name="PREVIEW_LOCK_ICON"
+              :class="ui.groupLock()"
+            />
           </span>
           <UIcon name="i-ph-caret-down-light" :class="chevronClass(open)" />
         </button>

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

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 import type { AvatarProps, NavigationMenuItem } from "@nuxt/ui";
+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";
+import {
+  applyPreviewEntryStates,
+  type PreviewEntryState,
+} from "#dms-core/app/build/utils/permission-preview";
 
 interface Props {
   items: NavigationMenuItem[] | NavigationMenuItem[][];
@@ -42,7 +49,14 @@ const VARIANT_CLASSES: Record<MenuItemVariant, MenuVariantClasses> = {
 };
 
 const STATUS_DOT_ICON = "i-ph-circle-fill";
-const STATUS_DOT_SIZE = "size-2";
+const STATUS_DOT_SIZE = "size-1.5";
+/** v2 nav trail badge: a small neutral pill with a mono count. */
+const MENU_BADGE_PROPS = {
+  color: "neutral",
+  variant: "soft",
+  size: "sm",
+  class: "font-mono tabular-nums",
+} as const;
 
 /** The per-item slot classes Nuxt UI accepts on a navigation menu item. */
 type MenuItemUi = NonNullable<DmsMenuItem["ui"]>;
@@ -96,13 +110,86 @@ function buildItemUi(
     : undefined;
 }
 
+// A plain badge value (a page's `badge`) gets the v2 look; a badge already
+// given as props is the caller's own choice.
+function resolveMenuBadge(badge: DmsMenuItem["badge"]): DmsMenuItem["badge"] {
+  if (typeof badge === "string" || typeof badge === "number") {
+    return { ...MENU_BADGE_PROPS, label: String(badge) };
+  }
+  return badge;
+}
+
+// "Preview as role": an entry the previewed role could not open stays in the
+// menu, hatched red and locked, so the preview shows what the role loses
+// instead of a shorter menu; one it opens without all of it (a block or an
+// action of its page, or one of its entries) is hatched orange with the same
+// lock. Labels and parents are drawn too; a parent keeps its trailing slot
+// for the chevron and shows the lock in place of its icon. Outside a preview
+// `entryState` is always null: nothing is ever drawn.
+const preview = usePermissionPreview();
+const { t } = useI18n();
+const PREVIEW_ENTRY_LINK_CLASSES: Record<PreviewEntryState, string> = {
+  hidden: "text-muted dms-hatch-locked",
+  partial: "dms-hatch-partial",
+};
+const PREVIEW_LOCK_TONES: Record<PreviewEntryState, string> = {
+  hidden: "text-error",
+  partial: "text-warning",
+};
+const PREVIEW_ENTRY_TITLES: Record<PreviewEntryState, string> = {
+  hidden: "page.settings.roles.preview.menu_hidden",
+  partial: "page.settings.roles.preview.menu_partial",
+};
+
+function drawPreviewEntry(
+  item: DmsMenuItem,
+  state: PreviewEntryState,
+): DmsMenuItem {
+  const hasChildren = (item.children?.length ?? 0) > 0;
+  const title = t(PREVIEW_ENTRY_TITLES[state], {
+    role: preview.session.value?.roleName ?? "",
+  });
+  return {
+    ...item,
+    previewState: state,
+    previewLocked: state === "hidden",
+    class: [item.class, PREVIEW_ENTRY_LINK_CLASSES[state]],
+    title,
+    "aria-label": `${String(item.label ?? "")} · ${title}`,
+    ...(hasChildren
+      ? {}
+      : {
+          trailingIcon: PREVIEW_LOCK_ICON,
+          badge: undefined,
+          ui: {
+            ...UNSET_MENU_ITEM_UI,
+            ...item.ui,
+            linkTrailingIcon: `size-3.5 ${PREVIEW_LOCK_TONES[state]}`,
+          },
+        }),
+  };
+}
+
+// The count a table view published for the page (`navBadge`) is fresher than
+// the one the server counted when the menu loaded; `""` stands for none.
+const { badges: navBadges } = useNavBadges();
+
+function badgeOf(item: DmsMenuItem): DmsMenuItem["badge"] {
+  const live =
+    item.fullId === undefined ? undefined : navBadges.value[item.fullId];
+  if (live === undefined) return item.badge;
+  return live || 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.
+// 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;
+  const badge = resolveMenuBadge(badgeOf(item));
   const statusClass =
-    item.status && !hasChildren
+    item.status && !hasChildren && !badge
       ? MENU_STATUS_TEXT_CLASSES[item.status]
       : undefined;
   const ui = buildItemUi(item, variant, statusClass);
@@ -111,6 +198,7 @@ function decorateMenuItem(item: DmsMenuItem): DmsMenuItem {
     ...item,
     ...(variant.link ? { class: [item.class, variant.link] } : {}),
     ...(statusClass ? { trailingIcon: STATUS_DOT_ICON } : {}),
+    badge,
     ...(ui ? { ui } : {}),
     children: item.children?.map(decorateMenuItem),
   };
@@ -125,7 +213,13 @@ const groupedItems = computed((): NavigationMenuItem[][] => {
   }
 
   const groups = isArrayOfArrays(props.items) ? props.items : [props.items];
-  return groups.map((group) => group.map(decorateMenuItem));
+  return groups.map((group) =>
+    applyPreviewEntryStates(
+      group.map(decorateMenuItem),
+      preview.entryState,
+      drawPreviewEntry,
+    ),
+  );
 });
 
 const { prefetchPageLayout } = usePrefetch();
@@ -193,6 +287,17 @@ function onStateChange(id: string, open: boolean): void {
           })
         "
       />
+      <UIcon
+        v-else-if="item.previewState && item.children?.length"
+        :name="PREVIEW_LOCK_ICON"
+        :class="
+          ui.linkLeadingIcon({
+            class: PREVIEW_LOCK_TONES[item.previewState as PreviewEntryState],
+            active,
+            disabled: !!item.disabled,
+          })
+        "
+      />
       <UIcon
         v-else-if="item.icon"
         :name="item.icon"

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

@@ -0,0 +1,52 @@
+import { computed, type ComputedRef, type WritableComputedRef } from "vue";
+import {
+  ACCESSIBILITY_COOKIE,
+  DEFAULT_ACCESSIBILITY_PREFERENCES,
+  parseAccessibilityPreferences,
+  type AccessibilityPreferences,
+  type ReduceMotionPreference,
+} from "#dms-ui/app/build/utils/accessibilityPreferences";
+
+const ACCESSIBILITY_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
+export interface AccessibilityPreferencesRefs {
+  /** The complete preferences, read from the cookie. */
+  preferences: ComputedRef<AccessibilityPreferences>;
+  reduceMotion: WritableComputedRef<ReduceMotionPreference>;
+  increaseContrast: WritableComputedRef<boolean>;
+  underlineLinks: WritableComputedRef<boolean>;
+}
+
+/**
+ * The accessibility preferences of this device, from the `dms-accessibility`
+ * cookie shared by every caller. Each field is a writable ref: assigning it
+ * rewrites the cookie, and the `<html>` classes follow. The server reads the
+ * same cookie, so the first paint already has them.
+ */
+export const useAccessibilityPreferences = (): AccessibilityPreferencesRefs => {
+  const cookie = useDmsCookie<AccessibilityPreferences>(ACCESSIBILITY_COOKIE, {
+    default: () => ({ ...DEFAULT_ACCESSIBILITY_PREFERENCES }),
+    maxAge: ACCESSIBILITY_COOKIE_MAX_AGE,
+  });
+  const preferences = computed(() =>
+    parseAccessibilityPreferences(cookie.value),
+  );
+
+  function field<K extends keyof AccessibilityPreferences>(
+    key: K,
+  ): WritableComputedRef<AccessibilityPreferences[K]> {
+    return computed({
+      get: () => preferences.value[key],
+      set: (value) => {
+        cookie.value = { ...preferences.value, [key]: value };
+      },
+    });
+  }
+
+  return {
+    preferences,
+    reduceMotion: field("reduceMotion"),
+    increaseContrast: field("increaseContrast"),
+    underlineLinks: field("underlineLinks"),
+  };
+};

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

@@ -0,0 +1,34 @@
+import { h } from "vue";
+import DmsInstantSaveBadge from "#dms-ui/app/components/save-bar/InstantSaveBadge.vue";
+import type { SaveStatusState } from "#dms-ui/app/components/save-bar/SaveStatus.vue";
+import { usePageHeaderActions } from "./usePageHeaderActions";
+
+// The one state a page shows for many keys: a save running wins, then a
+// failure waiting for its retry, then a save that just went through.
+const STATE_PRIORITY: readonly SaveStatusState[] = ["saving", "error", "saved"];
+
+/**
+ * Folds the per-control save states of a page into the one state its header
+ * pill shows: saving while any control writes, error while any failed, saved
+ * while any just did.
+ */
+export const combineSaveStates = (
+  states: Iterable<SaveStatusState | undefined>,
+): SaveStatusState => {
+  const present = new Set(states);
+  return STATE_PRIORITY.find((state) => present.has(state)) ?? "idle";
+};
+
+/**
+ * Puts the "Saved instantly" pill in the page header. Every page (or section
+ * owning the page) whose changes save on their own, with no save bar, calls
+ * it, so the pill reads and looks the same everywhere. A page with a save bar
+ * never does.
+ *
+ * @param state Optional save activity, for the pill's "just saved" flash
+ */
+export const useInstantSaveHeader = (state?: () => SaveStatusState): void => {
+  usePageHeaderActions(() =>
+    h(DmsInstantSaveBadge, { state: state?.() ?? "idle" }),
+  );
+};

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

@@ -0,0 +1,158 @@
+import {
+  defineComponent,
+  inject,
+  onBeforeMount,
+  onBeforeUnmount,
+  onErrorCaptured,
+  onServerPrefetch,
+  provide,
+  readonly,
+  ref,
+  shallowRef,
+  type Component,
+  type InjectionKey,
+  type Ref,
+  type ShallowRef,
+  type VNodeChild,
+} from "vue";
+
+/** Renders the actions shown on the right of the page header. */
+export type PageHeaderActionsRender = () => VNodeChild;
+
+/**
+ * What a layout rendering a page header shares with the page in its slot.
+ *
+ * The header renders before the page, yet its actions come from the page.
+ * On the server, the header's outlet defers its render (a server prefetch)
+ * until the page has set up, so the actions are in the server-rendered
+ * markup. In the browser, the outlet keeps that markup as it is until the
+ * page has set up again, then renders the live actions over it: no pop-in,
+ * no hydration mismatch.
+ */
+export interface PageHeaderActionsHost {
+  /** The render function the page asked for, if any. */
+  actions: ShallowRef<PageHeaderActionsRender | null>;
+  /** Once the page in the slot has set up and set its actions. */
+  isReady: Readonly<Ref<boolean>>;
+  /** Called right after the page in the slot rendered (its sync setup ran). */
+  markSlotRendered: () => void;
+  /** A page announces its actions; the returned callback says they are set. */
+  expect: () => () => void;
+  /** Settles with `isReady`. */
+  whenReady: () => Promise<void>;
+}
+
+const PAGE_HEADER_ACTIONS_KEY: InjectionKey<PageHeaderActionsHost> = Symbol(
+  "dms:page-header-actions",
+);
+
+// A server render must never hang on a page that announced actions and then
+// failed in a way no error hook saw: past this delay the header renders
+// without them.
+const SERVER_READY_TIMEOUT_MS = 5000;
+
+/**
+ * Called by a layout that renders a page header: shares the actions state
+ * with the page in its slot.
+ */
+export const providePageHeaderActions = (): PageHeaderActionsHost => {
+  const actions = shallowRef<PageHeaderActionsRender | null>(null);
+  const isReady = ref(false);
+  let slotRendered = false;
+  let pending = 0;
+  let resolveReady: () => void = () => {};
+  const ready = new Promise<void>((resolve) => {
+    resolveReady = resolve;
+  });
+  const markReady = () => {
+    isReady.value = true;
+    resolveReady();
+  };
+  const settle = () => {
+    if (slotRendered && pending === 0) markReady();
+  };
+  if (import.meta.env.SSR) setTimeout(markReady, SERVER_READY_TIMEOUT_MS);
+  // A page whose setup throws never sets its actions: stop waiting for it.
+  onErrorCaptured(() => {
+    pending = 0;
+    settle();
+  });
+  const host: PageHeaderActionsHost = {
+    actions,
+    isReady: readonly(isReady),
+    markSlotRendered: () => {
+      slotRendered = true;
+      settle();
+    },
+    expect: () => {
+      pending++;
+      let released = false;
+      return () => {
+        if (released) return;
+        released = true;
+        pending = Math.max(0, pending - 1);
+        settle();
+      };
+    },
+    whenReady: () => ready,
+  };
+  provide(PAGE_HEADER_ACTIONS_KEY, host);
+  return host;
+};
+
+/** The actions state of the enclosing layout, if any (for its outlet). */
+export const injectPageHeaderActionsHost = (): PageHeaderActionsHost | null =>
+  inject(PAGE_HEADER_ACTIONS_KEY, null);
+
+/**
+ * Holds the header actions back while an async part of the page (a page
+ * whose setup awaits before rendering its blocks) has not rendered yet: a
+ * block in it may still ask for actions. Call it before the setup's first
+ * await, and render the returned marker after the content it holds for.
+ *
+ * @returns The marker component to render after the held content
+ */
+export const holdPageHeaderActions = (): Component => {
+  const host = inject(PAGE_HEADER_ACTIONS_KEY, null);
+  const release = host?.expect() ?? (() => {});
+  onBeforeUnmount(release);
+  return defineComponent({
+    name: "DmsPageContentRendered",
+    setup() {
+      release();
+      return () => null;
+    },
+  });
+};
+
+/**
+ * Puts actions in the page header (a primary button, a status pill…) from a
+ * page rendered inside a layout. The actions show once the page has set up
+ * (so the render function may read anything the setup declares) and are
+ * removed when the page unmounts. Outside such a layout the call does
+ * nothing.
+ *
+ * Call it before the first `await` of the setup: the header then renders
+ * the actions in the server pass, with the page.
+ *
+ * @param render Render function of the actions, e.g. `() => h(UButton, …)`
+ */
+export const usePageHeaderActions = (render: PageHeaderActionsRender): void => {
+  const host = inject(PAGE_HEADER_ACTIONS_KEY, null);
+  if (!host) return;
+  const release = host.expect();
+  const show = () => {
+    host.actions.value = render;
+    release();
+  };
+  // Both hooks on both sides: each only ever fires on its own side, and a
+  // server prefetch hook marks the component as an async boundary, which
+  // `useId` counts. Registered on one side only, every id rendered after
+  // the page would differ between the server and the browser.
+  onServerPrefetch(show);
+  onBeforeMount(show);
+  onBeforeUnmount(() => {
+    release();
+    if (host.actions.value === render) host.actions.value = null;
+  });
+};