@antelopejs/dms 0.5.5 → 0.6.0

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

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import type { ButtonProps } from "@nuxt/ui";
+import {
+  QUICK_ACTION_ADD,
+  QUICK_ACTION_BUTTON,
+  QUICK_ACTION_BUTTON_KEY,
+  QUICK_ACTION_COMPONENT_KEY,
+  QUICK_ACTION_QUERY_KEY,
+  type QuickActionIntent,
+} from "#dms-ui/app/types/quick-actions";
+import type { CustomButton } from "#dms-ui/app/composables/table-view/types/custom-button";
+import type { ActionTarget } from "#dms-ui/app/composables/table-view/types/action-target";
+import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
+import { PREVIEW_LOCK_ICON } from "#dms-ui/app/build/utils/permissionPreview";
+import { runMountedQuickAction } from "#dms-ui/app/build/utils/quickActionTargets";
+import { useActionTargets } from "#dms-ui/app/build/composables/actions/useActionTargets";
+import {
+  dispatchQuickActionTarget,
+  findServedQuickAction,
+} from "#dms-ui/app/build/utils/dispatchQuickActionTarget";
+
+/**
+ * A button of the page header as the server serves it (`DefaultLayout({
+ * headerActions })` in interface-dms, and a component's buttons placed in
+ * the header): a button the layout declares carries its `target`; one a
+ * component places there names the component, which runs it. Buttons behind
+ * a permission the user lacks never reach the client.
+ */
+export interface LayoutHeaderAction
+  extends Partial<Omit<CustomButton, "id" | "color" | "variant">> {
+  id: string;
+  color?: ButtonProps["color"];
+  variant?: ButtonProps["variant"];
+  /** The component of the page whose button this is. */
+  componentId?: string;
+  /** Id of that component's button; absent for its built-in add. */
+  buttonId?: string;
+}
+
+interface PageHeaderActionBarProps {
+  actions: LayoutHeaderAction[];
+}
+
+interface ResolvedHeaderAction {
+  id: string;
+  button: ButtonProps;
+  /** Why the button is disabled, shown in a tooltip. */
+  disabledReason?: string;
+  /** "Preview as role" only: the role would not be shown this button. */
+  previewLocked?: string;
+}
+
+const props = defineProps<PageHeaderActionBarProps>();
+
+const { processI18n } = useTranslation();
+const siteLayout = useSiteLayout();
+const { quickActions } = siteLayout;
+const route = useDmsRoute();
+const router = useDmsRouter();
+const { $authFetch } = useAuthFetch();
+
+// The page header runs a declared button's target as a table runs its
+// toolbar buttons: confirmation, drawer, modal, API call, export, link.
+const { handleCustomButton } = useActionTargets({
+  api: $authFetch,
+  componentId: "page-header",
+  pageId: siteLayout.findMatchingRoute(route.path)?.metadata?.fullId ?? "page",
+  handleApiError: (error, title) => useApiError(error, { title }),
+});
+
+// Pressed in place by the component of this page, so what it opens shows on
+// the click. Only a component not mounted (yet) gets it the way a quick
+// action does: through query keys its watcher reads, at the cost of two
+// server visits.
+function pressComponentButton(componentId: string, buttonId?: string) {
+  const intent: QuickActionIntent = buttonId
+    ? { kind: "button", button: buttonId }
+    : { kind: "add" };
+  if (runMountedQuickAction(route.path, componentId, intent)) return;
+  void router.replace({
+    query: {
+      ...route.query,
+      [QUICK_ACTION_QUERY_KEY]: buttonId
+        ? QUICK_ACTION_BUTTON
+        : QUICK_ACTION_ADD,
+      [QUICK_ACTION_COMPONENT_KEY]: componentId,
+      ...(buttonId ? { [QUICK_ACTION_BUTTON_KEY]: buttonId } : {}),
+    },
+  });
+}
+
+// A neutral action reads as the v2 outline button, any colored one is solid.
+const defaultVariant = (
+  color: ButtonProps["color"] | undefined,
+): ButtonProps["variant"] =>
+  !color || color === "neutral" ? "outline" : "solid";
+
+function baseButton(action: LayoutHeaderAction): ButtonProps {
+  const color = action.color ?? "neutral";
+  return {
+    color,
+    variant: action.variant ?? defaultVariant(color),
+    icon: action.icon,
+    label: action.label ? processI18n(action.label) : undefined,
+    disabled: action.disabled,
+  };
+}
+
+type LinkTarget = Extract<ActionTarget, { type: "page" | "external" }>;
+
+// A link target (without a confirmation) renders as a link: middle click and
+// "open in a new tab" keep working.
+const LINK_TARGETS: Partial<
+  Record<ActionTarget["type"], (target: LinkTarget) => ButtonProps>
+> = {
+  page: (target) => ({ to: target.url }),
+  external: (target) => {
+    const newTab = target.type === "external" && target.newTab;
+    return {
+      to: target.url,
+      target: newTab ? "_blank" : undefined,
+      trailingIcon: newTab ? "i-ph-arrow-square-out" : undefined,
+    };
+  },
+};
+
+function linkProps(action: LayoutHeaderAction): ButtonProps | undefined {
+  const { target } = action;
+  if (action.confirm || !target) return undefined;
+  return LINK_TARGETS[target.type]?.(target as LinkTarget);
+}
+
+function resolveQuickActionButton(
+  action: LayoutHeaderAction,
+  base: ButtonProps,
+  key: string,
+): ResolvedHeaderAction | null {
+  // Quick actions are served per user: one missing here is not for them.
+  const quickAction = findServedQuickAction(quickActions.value?.actions, key);
+  if (!quickAction) return null;
+  return {
+    id: action.id,
+    button: {
+      ...base,
+      icon: action.icon ?? quickAction.icon,
+      label: base.label || processI18n(quickAction.displayName),
+      onClick: () =>
+        action.confirm
+          ? handleCustomButton(action as CustomButton)
+          : dispatchQuickActionTarget(quickAction.target),
+    },
+  };
+}
+
+function resolveAction(
+  action: LayoutHeaderAction,
+): ResolvedHeaderAction | null {
+  const base = baseButton(action);
+  const disabledReason =
+    action.disabled && action.disabledReason
+      ? processI18n(action.disabledReason)
+      : undefined;
+  if (action.componentId) {
+    const { componentId, buttonId } = action;
+    return {
+      id: action.id,
+      button: {
+        ...base,
+        onClick: () => pressComponentButton(componentId, buttonId),
+      },
+      disabledReason,
+    };
+  }
+  if (!action.target) return null;
+  if (action.target.type === "quickAction") {
+    return resolveQuickActionButton(action, base, action.target.id);
+  }
+  return {
+    id: action.id,
+    button: {
+      ...base,
+      ...(linkProps(action) ?? {
+        onClick: () => handleCustomButton(action as CustomButton),
+      }),
+    },
+    disabledReason,
+  };
+}
+
+// "Preview as role": a button the role would not be shown stays, hatched and
+// locked (the same look as the sidebar's locked entries). Outside a preview
+// nothing is locked: the server and the rules above already left it out.
+const preview = usePermissionPreview();
+const { t } = useI18n();
+const PREVIEW_LOCK_CLASS = "text-muted dms-hatch-locked";
+
+function lockForPreview(action: ResolvedHeaderAction): ResolvedHeaderAction {
+  if (!preview.isHeaderActionHidden(action.id)) return action;
+  return {
+    ...action,
+    button: {
+      ...action.button,
+      color: "neutral",
+      variant: "outline",
+      icon: PREVIEW_LOCK_ICON,
+      class: PREVIEW_LOCK_CLASS,
+      ui: { leadingIcon: "text-error" },
+    },
+    previewLocked: t("page.settings.roles.preview.menu_hidden", {
+      role: preview.session.value?.roleName ?? "",
+    }),
+  };
+}
+
+const resolved = computed(() =>
+  props.actions
+    .map(resolveAction)
+    .filter((action): action is ResolvedHeaderAction => action !== null)
+    .map(lockForPreview),
+);
+</script>
+
+<template>
+  <template v-for="action in resolved" :key="action.id">
+    <!-- A disabled button fires no pointer event: the tooltip hangs on a
+      focusable wrapper, so the reason also reaches keyboard users. -->
+    <UTooltip v-if="action.previewLocked" :text="action.previewLocked">
+      <UButton v-bind="action.button" />
+    </UTooltip>
+    <UTooltip v-else-if="action.disabledReason" :text="action.disabledReason">
+      <span tabindex="0" class="inline-flex">
+        <UButton v-bind="action.button" />
+      </span>
+    </UTooltip>
+    <UButton v-else v-bind="action.button" />
+  </template>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { onServerPrefetch } from "vue";
+import PageHeaderActionBar, {
+  type LayoutHeaderAction,
+} from "./PageHeaderActionBar.vue";
+import { injectPageHeaderActionsHost } from "../../../composables/layout/usePageHeaderActions";
+
+interface PageHeaderActionsOutletProps {
+  /** Header buttons declared by the backend page (`headerActions`). */
+  actions: LayoutHeaderAction[];
+}
+
+const props = defineProps<PageHeaderActionsOutletProps>();
+
+const ROOT_SELECTOR = "[data-dms-page-header-actions]";
+// The actions take their own full-width row below `md`, the end of the
+// header row from there on.
+const ROOT_CLASS =
+  "flex w-full flex-wrap items-center gap-2 md:ms-auto md:w-auto";
+
+const host = injectPageHeaderActionsHost();
+
+// The server render waits here for the page's actions (the rest of the page
+// keeps rendering meanwhile), so the header's markup carries them.
+onServerPrefetch(() => host?.whenReady());
+
+const pageActions = computed(() => host?.actions.value ?? null);
+const hasActions = computed(
+  () => props.actions.length > 0 || !!pageActions.value,
+);
+
+// Hydrating before the page has set up: its actions are not known yet, but
+// the server rendered them. The outlet keeps that markup untouched (same
+// HTML, so nothing moves and hydration matches) until the page is ready,
+// then renders the live actions in its place. The markup is the element's
+// own, rendered by the server and read back from the page.
+const serverMarkup =
+  !import.meta.env.SSR && host && !host.isReady.value
+    ? (document.querySelector(ROOT_SELECTOR)?.innerHTML ?? null)
+    : null;
+const showsServerMarkup = computed(
+  () => serverMarkup !== null && !host?.isReady.value,
+);
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div
+    v-if="showsServerMarkup"
+    data-dms-page-header-actions
+    :class="ROOT_CLASS"
+    v-html="serverMarkup"
+  />
+  <div
+    v-else-if="hasActions && (!host || host.isReady.value)"
+    data-dms-page-header-actions
+    :class="ROOT_CLASS"
+  >
+    <PageHeaderActionBar :actions="props.actions" />
+    <component :is="pageActions" v-if="pageActions" />
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Neutral stand-in for a page whose chunk is still loading after a client
+// navigation: one content card, so the switch to the page's own skeletons
+// changes little. It only fades in once the wait passes the delay set by
+// `.dms-page-skeleton` (main.css): a fast navigation shows nothing at all.
+interface PageSkeletonProps {
+  /** Draws the page title too (when the layout shows no page header). */
+  withTitle?: boolean;
+}
+
+const props = defineProps<PageSkeletonProps>();
+
+const CONTENT_LINE_WIDTHS = ["72%", "58%", "66%", "44%"];
+</script>
+
+<template>
+  <div aria-hidden="true" class="dms-page-skeleton space-y-6">
+    <div v-if="props.withTitle" class="flex items-center gap-3.5">
+      <USkeleton class="size-9 rounded-[9px]" />
+      <div class="space-y-2">
+        <USkeleton class="h-5 w-48" />
+        <USkeleton class="h-3 w-72 max-w-[60vw]" />
+      </div>
+    </div>
+    <div class="dms-card space-y-4 p-[18px]">
+      <USkeleton class="h-3.5 w-40" />
+      <USkeleton
+        v-for="width in CONTENT_LINE_WIDTHS"
+        :key="width"
+        class="h-2.5"
+        :style="{ width }"
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,21 +1,37 @@
 <script setup lang="ts">
 import type { DropdownMenuItem } from "@nuxt/ui";
+import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
+import { EYEBROW_CLASS } from "#dms-ui/app/build/utils/eyebrow";
+import { PREVIEW_LOCK_ICON } from "#dms-ui/app/build/utils/permissionPreview";
+import { quickActionKey } from "#dms-core/app/build/utils/permission-preview";
 
 const { t } = useI18n();
 const { processI18n } = useTranslation();
 const { categoryGroups } = useQuickActions();
 
+// v2 quick actions menu: a plain title over mono-eyebrow category groups.
 const TITLE_GROUP_CLASS =
-  "text-sm font-semibold text-default normal-case tracking-normal px-3 pt-2 pb-3";
+  "font-sans text-[13px] font-semibold text-highlighted normal-case tracking-normal px-2.5 pt-1.5 pb-2";
+
+// "Preview as role": an action the role would not be served stays listed,
+// hatched and locked. Never outside a preview.
+const preview = usePermissionPreview();
+const PREVIEW_LOCK_CLASS = "text-muted dms-hatch-locked";
 
 function buildActionEntry(action: QuickActionInfo): DropdownMenuItem {
-  return {
+  const entry: DropdownMenuItem = {
     label: processI18n(action.displayName),
     icon: action.icon,
     onSelect: () => {
       void dispatchQuickActionTarget(action.target);
     },
   };
+  if (!preview.isQuickActionHidden(quickActionKey(action))) return entry;
+  return {
+    ...entry,
+    class: PREVIEW_LOCK_CLASS,
+    trailingIcon: PREVIEW_LOCK_ICON,
+  };
 }
 
 function buildCategoryGroup(
@@ -52,17 +68,24 @@ const hasItems = computed(() => groupedItems.value.length > 1);
     :items="groupedItems"
     :content="{ align: 'end' }"
     :ui="{
-      content: 'w-72 p-2',
-      label: 'text-xs font-semibold tracking-wider text-muted px-3 pt-3 pb-2',
-      item: 'gap-3 px-3 py-2',
-      itemLeadingIcon: 'size-5',
+      content: 'w-72 p-1.5',
+      label: `${EYEBROW_CLASS} text-dimmed px-2 pt-2 pb-1`,
+      item: 'h-[30px] gap-2.5 px-2 text-[13px]',
+      itemLeadingIcon: 'size-4 text-muted',
     }"
   >
-    <UButton
-      icon="i-ph-lightning-light"
-      variant="ghost"
-      color="neutral"
-      :ui="{ leadingIcon: 'size-[18px]' }"
-    />
+    <UTooltip
+      :text="$t('quickActions.title')"
+      :content="{ side: 'bottom', sideOffset: 6 }"
+    >
+      <UButton
+        icon="i-ph-lightning-light"
+        variant="ghost"
+        color="neutral"
+        class="text-muted hover:text-highlighted data-[state=open]:text-highlighted"
+        :aria-label="$t('quickActions.title')"
+        :ui="{ leadingIcon: 'size-[18px]' }"
+      />
+    </UTooltip>
   </UDropdownMenu>
 </template>

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

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
+import { listPreviewablePages } from "#dms-core/app/build/utils/permission-preview";
+
+// v2 .cs-asbar: "Previewing <page> as <role> · unsaved changes included ·
+// Exit preview", pinned under the dashboard header while a tab previews a
+// role. The page name doubles as a picker to look at another page.
+const preview = usePermissionPreview();
+const siteLayout = useSiteLayout();
+const route = useDmsRoute();
+const { t } = useI18n();
+const { processI18n } = useTranslation();
+
+const pageItems = computed(() =>
+  listPreviewablePages(siteLayout.siteLayout.value?.pages ?? {})
+    .map(({ slug, page }) => ({
+      label: processI18n(page.displayName),
+      icon: page.icon,
+      value: slug,
+    }))
+    .sort((left, right) => left.label.localeCompare(right.label)),
+);
+
+const currentPage = computed(() => siteLayout.findMatchingRoute(route.path));
+const currentLabel = computed(() => {
+  const metadata = currentPage.value?.metadata;
+  return metadata
+    ? processI18n(metadata.displayName)
+    : t("page.settings.roles.preview.this_page");
+});
+
+const selectedSlug = computed({
+  get: () => currentPage.value?.pattern,
+  set: (slug: string | undefined) => {
+    if (slug && slug !== currentPage.value?.pattern) void navigateDms(slug);
+  },
+});
+
+const roleName = computed(
+  () =>
+    preview.session.value?.roleName || t("page.settings.roles.editor.untitled"),
+);
+const pageHidden = computed(() => preview.result.value?.page?.hidden === true);
+// The page opens for the role, without some of its blocks or actions.
+const pagePartial = computed(
+  () => preview.entryState(preview.result.value?.page?.fullId) === "partial",
+);
+const outOfScope = computed(() => preview.result.value?.outOfScope ?? 0);
+</script>
+
+<template>
+  <div
+    v-if="preview.isActive.value"
+    class="text-toned flex flex-wrap items-center gap-x-2.5 gap-y-1.5 border-b border-(--dms-accent-line) bg-(--dms-accent-tint) py-1.5 ps-4 pe-3 text-[12.5px]"
+    role="region"
+    :aria-label="t('page.settings.roles.preview.region_label')"
+  >
+    <!-- The eye sits inside the sentence so a narrow screen wraps the words,
+         not the icon away from them. -->
+    <span class="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1">
+      <UIcon name="i-ph-eye" class="text-primary me-1 size-4 shrink-0" />
+      <span>{{ t("page.settings.roles.preview.previewing") }}</span>
+      <USelectMenu
+        v-model="selectedSlug"
+        :items="pageItems"
+        value-key="value"
+        size="xs"
+        variant="ghost"
+        class="text-highlighted -mx-1 max-w-[260px] font-semibold"
+        :placeholder="currentLabel"
+        :search-input="{
+          placeholder: t('page.settings.roles.preview.search_pages'),
+        }"
+        :aria-label="t('page.settings.roles.preview.pick_page')"
+      />
+      <span>{{ t("page.settings.roles.preview.as") }}</span>
+      <b class="text-highlighted font-semibold">{{ roleName }}</b>
+      <span v-if="preview.session.value?.unsaved">
+        · {{ t("page.settings.roles.preview.unsaved_included") }}
+      </span>
+    </span>
+    <UBadge
+      v-if="pageHidden"
+      color="error"
+      variant="soft"
+      size="sm"
+      icon="i-ph-lock-simple"
+      :label="t('page.settings.roles.preview.page_hidden', { role: roleName })"
+    />
+    <UBadge
+      v-else-if="pagePartial"
+      color="warning"
+      variant="soft"
+      size="sm"
+      icon="i-ph-lock-simple"
+      :label="t('page.settings.roles.preview.page_partial', { role: roleName })"
+      :title="t('page.settings.roles.preview.menu_partial', { role: roleName })"
+    />
+    <span v-if="outOfScope > 0" class="text-muted">
+      {{ t("page.settings.roles.preview.out_of_scope", outOfScope) }}
+    </span>
+    <span
+      v-if="preview.failed.value"
+      class="text-error inline-flex items-center gap-1"
+      role="alert"
+    >
+      <UIcon name="i-ph-warning-circle" class="size-3.5" />
+      {{ t("page.settings.roles.preview.failed") }}
+    </span>
+    <UIcon
+      v-if="preview.loading.value"
+      name="i-ph-spinner-gap"
+      class="text-muted size-3.5 animate-spin"
+      :aria-label="t('page.settings.roles.preview.loading')"
+    />
+    <UButton
+      class="ms-auto"
+      icon="i-ph-x"
+      size="xs"
+      color="neutral"
+      variant="outline"
+      :label="t('page.settings.roles.preview.exit')"
+      @click="preview.exit()"
+    />
+  </div>
+  <!-- Holds the bar's place while a reloaded preview tab applies its preview
+       (pre-paint script): hidden on any other tab. -->
+  <div
+    v-else
+    aria-hidden="true"
+    class="hidden h-[37px] items-center gap-2.5 border-b border-(--dms-accent-line) bg-(--dms-accent-tint) ps-4 pe-3 [html[data-dms-role-preview=pending]_&]:flex"
+  >
+    <USkeleton class="size-4 rounded-full" />
+    <USkeleton class="h-3 w-64 max-w-[60%]" />
+    <USkeleton class="ms-auto h-6 w-24" />
+  </div>
+</template>

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import UserIdentity from "./UserIdentity.vue";
+import type { DropdownMenuItem } from "@nuxt/ui";
+
+interface Props {
+  collapsed?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsed: false,
+});
+
+const LOGOUT_ICON = "i-ph-sign-out-light";
+const TRIGGER_ICON = "i-ph-caret-up-down-light";
+const THEME_ICON = "i-ph-circle-half-light";
+const LANGUAGE_ICON = "i-ph-translate-light";
+
+interface ColorModeEntry {
+  value: ColorModePreference;
+  labelKey: string;
+}
+
+const COLOR_MODE_ENTRIES: ColorModeEntry[] = [
+  { value: "system", labelKey: "page.settings.appearance.system" },
+  { value: "light", labelKey: "page.settings.appearance.light" },
+  { value: "dark", labelKey: "page.settings.appearance.dark" },
+];
+
+const { t, locale } = useI18n();
+const { user } = useCurrentUser();
+const { logout } = useLogout();
+const colorModePreference = useColorModePreference();
+const { uniqueLocales } = useUniqueLocales();
+const { changeLanguage } = useUserLanguage();
+
+// v2 user menu: account links, then the per-user preferences as submenus,
+// then logging out.
+const preferenceItems = computed<DropdownMenuItem[]>(() => [
+  {
+    label: t("page.settings.appearance.theme_title"),
+    icon: THEME_ICON,
+    children: COLOR_MODE_ENTRIES.map((entry) => ({
+      label: t(entry.labelKey),
+      type: "checkbox" as const,
+      checked: colorModePreference.value === entry.value,
+      onSelect: () => {
+        colorModePreference.value = entry.value;
+      },
+    })),
+  },
+  {
+    label: t("page.settings.overview.language"),
+    icon: LANGUAGE_ICON,
+    children: uniqueLocales.value.map((language) => ({
+      label: language.name,
+      type: "checkbox" as const,
+      checked: locale.value === language.code,
+      onSelect: () => {
+        void changeLanguage(language.code);
+      },
+    })),
+  },
+]);
+
+const menuItems = computed<DropdownMenuItem[][]>(() => [
+  ACCOUNT_MENU_ENTRIES.map((entry) => ({
+    label: t(entry.labelKey),
+    icon: entry.icon,
+    to: entry.to,
+  })),
+  preferenceItems.value,
+  [
+    {
+      label: t("button.logout"),
+      icon: LOGOUT_ICON,
+      color: "error",
+      onSelect: () => {
+        void logout();
+      },
+    },
+  ],
+]);
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="menuItems"
+    :content="{ side: 'top', align: 'start', sideOffset: 6 }"
+    :ui="{ content: 'w-56' }"
+  >
+    <button
+      type="button"
+      class="hover:bg-elevated data-[state=open]:bg-elevated flex w-full items-center gap-2.5 rounded-md p-1.5 text-start transition-colors"
+      :class="{ 'justify-center': props.collapsed }"
+      :aria-label="user?.name"
+    >
+      <UAvatar v-if="props.collapsed" :alt="user?.name" size="sm" />
+      <template v-else>
+        <UserIdentity :name="user?.name" :email="user?.email" />
+        <UIcon :name="TRIGGER_ICON" class="text-dimmed size-4 shrink-0" />
+      </template>
+    </button>
+
+    <template #content-top>
+      <UserIdentity
+        :name="user?.name"
+        :email="user?.email"
+        avatar-size="md"
+        class="border-default border-b px-2.5 py-2.5"
+      />
+    </template>
+  </UDropdownMenu>
+</template>