@antelopejs/dms 0.9.8 → 0.10.0

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

@@ -11,6 +11,12 @@ import {
 import { usePageRecordLabel } from "#dms-core/app/composables/page/usePageRecordLabel";
 import type { CategoryInfo } from "../../../types/page";
 import { resolveModuleLandingSlug } from "../../../utils/moduleLanding";
+import {
+  foldBreadcrumb,
+  isFoldedCrumbs,
+  withParentCrumb,
+} from "../../../utils/breadcrumb";
+import { fillRouteParams } from "../../../utils/pageQuery";
 
 const HOME_ICON = "i-ph-house-light";
 /** Breadcrumb slot of the folded middle crumbs on small screens. */
@@ -130,6 +136,26 @@ function moduleLandingSlug(
   );
 }
 
+/**
+ * The crumb of the page the current one is a detail of (`parentSlug`), its
+ * route parameters filled from the current page's: none when it is missing,
+ * out of reach, or names a parameter the current page lacks.
+ */
+const parentCrumb = computed((): BreadcrumbItem | null => {
+  const current = siteLayout.findMatchingRoute(route.path);
+  const parentSlug = current?.metadata.parentSlug;
+  if (!parentSlug) return null;
+  const path = fillRouteParams(parentSlug, current.params);
+  if (path.includes(":")) return null;
+  const parent = siteLayout.findMatchingRoute(path)?.metadata;
+  if (!parent || parent.hasAccess === false) return null;
+  const target = buildBreadcrumbTarget(path, parent, route.query);
+  return {
+    label: processI18n(parent.displayName),
+    ...(target ? { to: target } : {}),
+  };
+});
+
 const breadcrumb = computed((): BreadcrumbItem[] => {
   const base: BreadcrumbItem[] = [
     { icon: HOME_ICON, to: homepage || "/", "aria-label": t("header.home") },
@@ -143,7 +169,7 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
 
   const paths = route.path.split("/").filter((path) => path);
 
-  const crumbs = base.concat(
+  const pathCrumbs = base.concat(
     paths
       .map((path, index): BreadcrumbItem | null => {
         const to = `/${paths.slice(0, index + 1).join("/")}`;
@@ -170,6 +196,7 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
       })
       .filter((item) => item !== null),
   );
+  const crumbs = withParentCrumb(pathCrumbs, parentCrumb.value);
 
   // Written as the row has it: an email address keeps its lowercase.
   const last = crumbs.at(-1);
@@ -183,32 +210,25 @@ const breadcrumb = computed((): BreadcrumbItem[] => {
   return crumbs;
 });
 
+// The middle crumbs fold into a "…" menu (see the `#ellipsis` slot) so a
+// deep page still fits a phone without losing the way back up.
 const mobileBreadcrumb = computed(
-  (): (BreadcrumbItem & { children?: DropdownMenuItem[] })[] => {
-    if (breadcrumb.value.length <= 2) {
-      return breadcrumb.value;
-    }
-
-    // The middle crumbs fold into a "…" menu (see the `#ellipsis` slot) so a
-    // deep page still fits a phone without losing the way back up.
-    return [
-      breadcrumb.value[0]!,
-      {
-        slot: MOBILE_ELLIPSIS_SLOT,
-        children: breadcrumb.value.slice(1, -1).map((x) => ({
-          label: x.label,
-          to: x.to,
-        })),
-      },
-      breadcrumb.value.slice(-1)[0]!,
-    ];
-  },
+  (): (BreadcrumbItem & { children?: DropdownMenuItem[] })[] =>
+    foldBreadcrumb(breadcrumb.value, MOBILE_ELLIPSIS_SLOT).map((crumb) => {
+      if (!isFoldedCrumbs(crumb)) return crumb;
+      return {
+        slot: crumb.slot,
+        children: crumb.children.map((x) => ({ label: x.label, to: x.to })),
+      };
+    }),
 );
 </script>
 
 <template>
   <div data-dms-persistent-header>
-    <UDashboardNavbar>
+    <!-- The phone toggle below is the only one: the navbar's own would sit
+         next to it. -->
+    <UDashboardNavbar :toggle="false">
       <template #leading>
         <UButton
           class="lg:hidden"

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

@@ -5,6 +5,7 @@ import PageHeaderActionsOutlet from "./PageHeaderActionsOutlet.vue";
 import PageSkeleton from "./PageSkeleton.vue";
 import type { LayoutHeaderAction } from "./PageHeaderActionBar.vue";
 import { providePageHeaderActions } from "../../../composables/layout/usePageHeaderActions";
+import type { PageRecordSource } from "../../../composables/layout/usePageRecord";
 
 interface Props {
   hideHeader?: boolean;
@@ -18,6 +19,10 @@ interface Props {
    * when one declares an `availability` (`headerActionsQuery`).
    */
   headerActionsQuery?: Record<string, string>;
+  /** The route parameters (`:id`) they were resolved for, likewise. */
+  headerActionsParams?: Record<string, string>;
+  /** The record the page shows, which header buttons may act on (`record`). */
+  record?: PageRecordSource;
   /** Space between the page header and the page. */
   headerClass?: string;
 }
@@ -29,6 +34,8 @@ const props = withDefaults(defineProps<Props>(), {
   description: undefined,
   headerActions: () => [],
   headerActionsQuery: undefined,
+  headerActionsParams: undefined,
+  record: undefined,
   headerClass: "pb-6",
 });
 
@@ -67,6 +74,8 @@ const PAGE_SLOT_CLASS =
       <PageHeaderActionsOutlet
         :actions="props.headerActions"
         :served-query="props.headerActionsQuery"
+        :served-params="props.headerActionsParams"
+        :record="props.record"
       />
     </template>
   </PageHeader>

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

@@ -14,13 +14,10 @@ import { useKeyboardPlatform } from "#dms-ui/app/composables/global/keyboardPlat
 import { useMediaQuery } from "@vueuse/core";
 import DmsSidebarUserMenu from "./SidebarUserMenu.vue";
 
-const SETTINGS_PATH = "/settings";
 const MODULES_PATH = "/modules";
-// Registered ids of the footer entries, so "Preview as role" can lock them.
-const SETTINGS_FULL_ID = "settings";
+// Registered id of the Modules entry, so "Preview as role" can lock it.
 const MODULES_FULL_ID = "modules";
 const MODULES_TREE_KEY = "modules";
-const SETTINGS_ICON = "i-ph-gear-six-light";
 const MODULES_ICON = "i-ph-squares-four-light";
 const BACK_ICON = "i-ph-arrow-left-light";
 const ESCAPE_KEY = "Escape";
@@ -254,21 +251,9 @@ const footerItems = computed((): NavigationMenuItem[] => {
     });
   }
 
-  // Settings highlights its sub-pages; Back and Modules only highlight their
-  // destinations, regardless of the router's default prefix matching.
-  result.push(
-    addActiveStateToMenuItem(
-      {
-        fullId: SETTINGS_FULL_ID,
-        label: t("menu.section.settings"),
-        to: SETTINGS_PATH,
-        icon: SETTINGS_ICON,
-      } as DmsMenuItem,
-      currentFullId.value,
-      currentRoute.value,
-    ),
-  );
-
+  // The settings are reached from the account menu, not from here. Back and
+  // Modules only highlight their destinations, regardless of the router's
+  // default prefix matching.
   if (isOwner.value) {
     result.push({
       fullId: MODULES_FULL_ID,

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

@@ -14,6 +14,8 @@ const GITHUB_STARS_CACHE_KEY = "dms-github-stars";
 const GITHUB_STARS_CACHE_TTL_MS = 60 * 60 * 1000;
 
 const { locale, setLocale, t } = useI18n();
+const { loggedIn: isLoggedIn } = useDmsUserSession();
+const { changeLanguage } = useUserLanguage();
 const { uniqueLocales } = useUniqueLocales();
 const { links } = useFooterLinks();
 const { processI18n } = useTranslation();
@@ -49,9 +51,7 @@ const githubStarsSettled = ref(false);
 const formattedGithubStars = computed(() =>
   githubStars.value === null
     ? ""
-    : new Intl.NumberFormat(locale.value, { notation: "compact" }).format(
-        githubStars.value,
-      ),
+    : formatNumber(githubStars.value, locale.value, { notation: "compact" }),
 );
 
 function readCachedStars(): CachedStars | null {
@@ -104,7 +104,15 @@ onMounted(async () => {
   githubStarsSettled.value = true;
 });
 
+// A signed-in user on a page of this layout (the account switcher) switches
+// their profile's language too: the session applies that one on every load,
+// and the server writes in it, so switching the screen alone would leave the
+// two apart. A visitor's choice lives in the locale cookie.
 async function onLocaleChange(code: unknown) {
+  if (isLoggedIn.value) {
+    await changeLanguage(code as string);
+    return;
+  }
   await setLocale(code as typeof locale.value);
 }
 </script>

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { useOpenDialog } from "#dms-ui/app/build/composables/containers/closingLayers";
 import { isFloatingSaveBarShown } from "#dms-ui/app/build/composables/form/floatingSaveBars";
 import { useGithubStarPrompt } from "../../composables/general/useGithubStarPrompt";
+import { useActiveSidePanel } from "../../composables/layout/sidePanelState";
+import { useSidebarState } from "./sidebarState";
 
 const TITLE_ID = "dms-github-star-prompt-title";
 const DESCRIPTION_ID = "dms-github-star-prompt-description";
@@ -9,6 +12,9 @@ const DESCRIPTION_ID = "dms-github-star-prompt-description";
 const { t } = useI18n();
 const { user } = useCurrentUser();
 const toast = useToast();
+const { open: isSidebarOpen } = useSidebarState();
+const { panel: sidePanel } = useActiveSidePanel();
+const isDialogOpen = useOpenDialog();
 
 // Developers only: a production build, a client's dashboard included, never
 // counts, stores or shows anything. The same flag gates the dev reload.
@@ -16,15 +22,21 @@ const { isDue, snooze, star, dismiss } = useGithubStarPrompt(
   import.meta.env.DEV,
 );
 
-// The toaster stacks in the same corner, and a floating save bar sticks to
-// the bottom of the panel: the prompt steps aside while either is up rather
-// than cover it.
+// The toaster stacks in the same corner, a floating save bar sticks to the
+// bottom of the panel, and the phone sidebar keeps its account menu trigger
+// at the bottom of the screen: the prompt steps aside while any is up rather
+// than cover it. The sidebar only opens as a drawer, below `lg`. It waits
+// as well while a drawer, a modal or a side panel is open, whose footer or
+// content it would float over, and comes back once they close.
 const isShown = computed(
   () =>
     isDue.value &&
     !!user.value &&
     toast.toasts.value.length === 0 &&
-    !isFloatingSaveBarShown.value,
+    !isFloatingSaveBarShown.value &&
+    !isSidebarOpen.value &&
+    !sidePanel.value &&
+    !isDialogOpen.value,
 );
 </script>
 
@@ -34,14 +46,13 @@ const isShown = computed(
        width, rising into place like a toast. The buttons take the card's
        full width, so the longer French label still fits beside "Later".
        On a phone it tightens and drops the icon, so the text runs the full
-       width and covers less of the page. From `lg` it stays clear of an
-       open side panel, whose width the dashboard frame sets. -->
+       width and covers less of the page. -->
   <div
     v-if="isShown"
     role="dialog"
     :aria-labelledby="TITLE_ID"
     :aria-describedby="DESCRIPTION_ID"
-    class="bg-default ring-accented fixed inset-x-3 bottom-3 z-50 rounded-(--dms-radius-card) p-3 shadow-(--dms-shadow-pop) ring transition duration-300 ease-out motion-reduce:transition-none sm:inset-x-auto sm:right-5 sm:bottom-5 sm:w-[380px] sm:p-3.5 sm:ps-4 lg:right-[calc(min(var(--dms-side-panel-width,0px),60vw)+1.25rem)] starting:translate-y-4 starting:opacity-0"
+    class="bg-default ring-accented fixed inset-x-3 bottom-3 z-50 rounded-(--dms-radius-card) p-3 shadow-(--dms-shadow-pop) ring transition duration-300 ease-out motion-reduce:transition-none sm:inset-x-auto sm:right-5 sm:bottom-5 sm:w-[380px] sm:p-3.5 sm:ps-4 starting:translate-y-4 starting:opacity-0"
   >
     <div class="flex items-start gap-3 pe-6">
       <DmsIconWell icon="i-ph-star" size="sm" class="max-sm:hidden" />

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

@@ -24,6 +24,7 @@ import {
   findServedQuickAction,
 } from "#dms-ui/app/build/utils/dispatchQuickActionTarget";
 import { DEFAULT_PAGE_HEADER_ACTIONS_ORDER } from "../../../composables/layout/usePageHeaderActions";
+import { type PageRecord, withPageRecord } from "../../../utils/pageRecord";
 
 /**
  * A button of the page header as the server serves it (`DefaultLayout({
@@ -43,6 +44,8 @@ export interface LayoutHeaderAction
   buttonId?: string;
   /** Place among the header's buttons, smallest first; `0` by default. */
   order?: number;
+  /** Acts on the page's record: disabled while it loads, gone without it. */
+  requiresRecord?: boolean;
 }
 
 interface PageHeaderActionBarProps {
@@ -52,6 +55,8 @@ interface PageHeaderActionBarProps {
    * among the buttons: after every button of an order up to this one.
    */
   slotOrder?: number;
+  /** The record the page shows, for the buttons acting on it. */
+  record?: PageRecord;
 }
 
 interface ResolvedHeaderAction {
@@ -66,6 +71,7 @@ interface ResolvedHeaderAction {
 
 const props = withDefaults(defineProps<PageHeaderActionBarProps>(), {
   slotOrder: DEFAULT_PAGE_HEADER_ACTIONS_ORDER,
+  record: undefined,
 });
 
 const { processI18n } = useTranslation();
@@ -273,6 +279,8 @@ function lockForPreview(action: ResolvedHeaderAction): ResolvedHeaderAction {
 
 const resolved = computed(() =>
   props.actions
+    .map((action) => withPageRecord(action, props.record))
+    .filter((action): action is LayoutHeaderAction => action !== null)
     .map(resolveAction)
     .filter((action): action is ResolvedHeaderAction => action !== null)
     .map(lockForPreview)

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

@@ -5,21 +5,34 @@ import PageHeaderActionBar, {
 } from "./PageHeaderActionBar.vue";
 import { injectPageHeaderActionsHost } from "../../../composables/layout/usePageHeaderActions";
 import { useServedHeaderActions } from "../../../composables/layout/useServedHeaderActions";
+import {
+  type PageRecordSource,
+  usePageRecord,
+} from "../../../composables/layout/usePageRecord";
 
 interface PageHeaderActionsOutletProps {
   /** Header buttons declared by the backend page (`headerActions`). */
   actions: LayoutHeaderAction[];
   /** The page query the server resolved their availability for. */
   servedQuery?: Record<string, string>;
+  /** The route parameters the server resolved their availability for. */
+  servedParams?: Record<string, string>;
+  /** The record the page shows (`record` of the layout). */
+  record?: PageRecordSource;
 }
 
 const props = withDefaults(defineProps<PageHeaderActionsOutletProps>(), {
   servedQuery: undefined,
+  servedParams: undefined,
+  record: undefined,
 });
 
+const pageRecord = usePageRecord(() => props.record);
+
 const actions = useServedHeaderActions({
   actions: () => props.actions,
   servedQuery: () => props.servedQuery,
+  servedParams: () => props.servedParams,
 });
 
 const ROOT_SELECTOR = "[data-dms-page-header-actions]";
@@ -69,6 +82,7 @@ const showsServerMarkup = computed(
     <PageHeaderActionBar
       :actions="actions"
       :slot-order="host?.actionsOrder.value"
+      :record="pageRecord"
     >
       <component :is="pageActions" v-if="pageActions" />
     </PageHeaderActionBar>

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

@@ -1,47 +1,52 @@
 <script setup lang="ts">
 /**
  * The body of the side panel a `sidePanel` action target opens on a row (see
- * `rowSidePanel.ts`). The DMS draws the header: the title, the row's position
- * among the rows the table shows, previous and next (J and K too) and close
- * (Escape too). Below it, the module's component receives the row as a
- * drawer's component does, mounted anew on each row. The position follows the
- * table: a refresh that moves or drops the row updates it. A row the link
- * names but its route answered 404 for shows the "not found" state instead,
- * with a close button.
+ * `rowSidePanel.ts`). The DMS draws the header (`RowHeader`, shared with a
+ * row drawer): the title, the row's position among the rows the table shows,
+ * previous and next (J and K too) and close (Escape too). Below it, the
+ * module's component receives the row as a drawer's component does, mounted
+ * anew on each row. The position follows the table: a refresh or live rows
+ * that move it update it, and a row past the rows loaded (a deep link) is
+ * located in the table's whole result. A row the link names but its route answered 404
+ * for shows the "not found" state instead, with a close button.
  */
-import { computed, onBeforeUnmount, onMounted } from "vue";
-import DmsEmptyState from "#dms-ui/app/components/empty-state/EmptyState.vue";
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import DmsRowHeader from "#dms-ui/app/build/components/containers/row/RowHeader.vue";
+import DmsRowNotFound from "#dms-ui/app/build/components/containers/row/RowNotFound.vue";
 import {
   listenRowPanelClose,
   listenRowSteps,
-  rowNavigation,
+  trackRowNavigation,
 } from "#dms-ui/app/build/composables/actions/rowNavigation";
 import {
   closeRowSidePanel,
   useRowSidePanelContent,
 } from "../../composables/layout/rowSidePanel";
 
-const DEFAULT_POSITION_KEY = "side_panel.position";
-
 const { t } = useI18n();
-const { processI18n } = useTranslation();
 const content = useRowSidePanelContent();
 
-const navigation = computed(() => {
-  const current = content.value;
-  if (!current?.row || !current.source) return undefined;
-  return rowNavigation(current.source, current.row, current.showRow);
-});
-
-const position = computed(() => {
-  if (!navigation.value) return undefined;
-  const params = {
-    index: navigation.value.index + 1,
-    total: navigation.value.total,
-  };
-  const label = content.value?.positionLabel;
-  return label ? processI18n(label, params) : t(DEFAULT_POSITION_KEY, params);
-});
+const navigation = shallowRef<RowNavigation>();
+let stopNavigation: (() => void) | undefined;
+watch(
+  content,
+  (current) => {
+    stopNavigation?.();
+    stopNavigation = undefined;
+    navigation.value = undefined;
+    if (!current?.row || !current.source) return;
+    stopNavigation = trackRowNavigation(
+      current.source,
+      current.row,
+      current.showRow,
+      (next) => {
+        navigation.value = next;
+      },
+    );
+  },
+  // At once: a second J right after the first steps from the row it opened.
+  { immediate: true, flush: "sync" },
+);
 
 const componentProps = computed(() => ({
   ...content.value?.componentOptions,
@@ -53,16 +58,6 @@ const heading = computed(() => content.value?.rowTitle || content.value?.title);
 
 const close = () => closeRowSidePanel();
 
-const notFoundActions = computed(() => [
-  {
-    label: t("side_panel.close"),
-    icon: "i-ph-x",
-    color: "neutral" as const,
-    variant: "outline" as const,
-    onClick: close,
-  },
-]);
-
 let stopKeys: Array<() => void> = [];
 
 onMounted(() => {
@@ -76,6 +71,7 @@ onMounted(() => {
 // longer open.
 onBeforeUnmount(() => {
   stopKeys.forEach((stop) => stop());
+  stopNavigation?.();
   close();
 });
 </script>
@@ -85,45 +81,12 @@ onBeforeUnmount(() => {
     <header
       class="border-default flex shrink-0 items-start gap-2 border-b py-3 ps-4 pe-3"
     >
-      <div class="min-w-0 flex-1 self-center">
-        <h2
-          class="text-highlighted truncate text-[15px] leading-[1.3] font-[650] tracking-[-0.015em]"
-        >
-          {{ heading }}
-        </h2>
-        <p
-          v-if="position"
-          data-dms-row-side-panel-position
-          class="text-muted mt-0.5 text-[12.5px] tabular-nums"
-        >
-          {{ position }}
-        </p>
-      </div>
-      <div class="flex shrink-0 items-center gap-0.5">
-        <template v-if="navigation">
-          <UButton
-            data-dms-row-side-panel-prev
-            icon="i-ph-caret-up"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            square
-            :aria-label="t('side_panel.previous')"
-            :disabled="!navigation.hasPrev"
-            @click="navigation.prev()"
-          />
-          <UButton
-            data-dms-row-side-panel-next
-            icon="i-ph-caret-down"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            square
-            :aria-label="t('side_panel.next')"
-            :disabled="!navigation.hasNext"
-            @click="navigation.next()"
-          />
-        </template>
+      <DmsRowHeader
+        part="dms-row-side-panel"
+        :heading="heading"
+        :position-label="content.positionLabel"
+        :navigation="navigation"
+      >
         <UButton
           data-dms-row-side-panel-close
           icon="i-ph-x"
@@ -134,17 +97,15 @@ onBeforeUnmount(() => {
           :aria-label="t('side_panel.close')"
           @click="close"
         />
-      </div>
+      </DmsRowHeader>
     </header>
     <div class="min-h-0 flex-1 overflow-y-auto p-4">
-      <DmsEmptyState
+      <DmsRowNotFound
         v-if="content.notFound"
         data-dms-row-side-panel-not-found
-        variant="no-result"
         :title="content.notFound.title"
         :description="content.notFound.description"
-        :actions="notFoundActions"
-        class="py-10"
+        @close="close"
       />
       <Suspense v-else>
         <component

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import UserIdentity from "./UserIdentity.vue";
+import { useSidebarState } from "./sidebarState";
 import type { DropdownMenuItem } from "@nuxt/ui";
 
 interface Props {
@@ -27,11 +28,32 @@ const COLOR_MODE_ENTRIES: ColorModeEntry[] = [
 ];
 
 const { t, locale } = useI18n();
+const route = useDmsRoute();
 const { user } = useCurrentUser();
 const { logout } = useLogout();
 const colorModePreference = useColorModePreference();
 const { uniqueLocales } = useUniqueLocales();
 const { changeLanguage } = useUserLanguage();
+const { open: sidebarOpen } = useSidebarState();
+
+// The picture the profile saved, read from the session user: a profile save
+// refreshes that user, so a new picture shows here at once.
+const avatarUrls = useFileReadUrls();
+const avatarKey = computed(() => user.value?.avatar?.key);
+const avatarSrc = computed(() =>
+  avatarKey.value ? avatarUrls.getUrl(avatarKey.value) : undefined,
+);
+watch(avatarKey, (key) => key && void avatarUrls.resolve(key), {
+  immediate: true,
+});
+
+// The settings have no sidebar entry: their only way in is this menu, so its
+// trigger is drawn active while a settings page is open.
+const isOnSettings = computed(
+  () =>
+    route.path === SETTINGS_ROUTE ||
+    route.path.startsWith(`${SETTINGS_ROUTE}/`),
+);
 
 // v2 user menu: account links, then the per-user preferences as submenus,
 // then logging out.
@@ -67,6 +89,11 @@ const menuItems = computed<DropdownMenuItem[][]>(() => [
     label: t(entry.labelKey),
     icon: entry.icon,
     to: entry.to,
+    // The menu renders in a portal, outside the sidebar whose link clicks
+    // close the phone drawer: its own entries close it themselves.
+    onSelect: () => {
+      sidebarOpen.value = false;
+    },
   })),
   preferenceItems.value,
   [
@@ -91,12 +118,25 @@ const menuItems = computed<DropdownMenuItem[][]>(() => [
     <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 }"
+      :class="{
+        'justify-center': props.collapsed,
+        'bg-elevated': isOnSettings,
+      }"
       :aria-label="user?.name"
+      :data-active="isOnSettings || undefined"
     >
-      <UAvatar v-if="props.collapsed" :alt="user?.name" size="sm" />
+      <UAvatar
+        v-if="props.collapsed"
+        :src="avatarSrc"
+        :alt="user?.name"
+        size="sm"
+      />
       <template v-else>
-        <UserIdentity :name="user?.name" :email="user?.email" />
+        <UserIdentity
+          :name="user?.name"
+          :email="user?.email"
+          :avatar-src="avatarSrc"
+        />
         <UIcon :name="TRIGGER_ICON" class="text-dimmed size-4 shrink-0" />
       </template>
     </button>
@@ -105,6 +145,7 @@ const menuItems = computed<DropdownMenuItem[][]>(() => [
       <UserIdentity
         :name="user?.name"
         :email="user?.email"
+        :avatar-src="avatarSrc"
         avatar-size="md"
         class="border-default border-b px-2.5 py-2.5"
       />

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

@@ -1,25 +1,33 @@
 <script setup lang="ts">
 import type { AvatarProps } from "@nuxt/ui";
 
-// The signed-in user as the shell shows them: initials avatar, name, then
-// the e-mail in mono (the sidebar menu's trigger and its header).
+// The signed-in user as the shell shows them: their picture (initials
+// without one), name, then the e-mail in mono (the sidebar menu's trigger and
+// its header).
 
 interface UserIdentityProps {
   name?: string;
   email?: string;
+  avatarSrc?: string;
   avatarSize?: AvatarProps["size"];
 }
 
 const props = withDefaults(defineProps<UserIdentityProps>(), {
   name: undefined,
   email: undefined,
+  avatarSrc: undefined,
   avatarSize: "sm",
 });
 </script>
 
 <template>
   <span class="flex min-w-0 flex-1 items-center gap-2.5">
-    <UAvatar :alt="props.name" :size="props.avatarSize" class="shrink-0" />
+    <UAvatar
+      :src="props.avatarSrc"
+      :alt="props.name"
+      :size="props.avatarSize"
+      class="shrink-0"
+    />
     <span class="flex min-w-0 flex-1 flex-col">
       <span
         class="text-highlighted truncate text-[13px] leading-tight font-semibold"