@antelopejs/dms 0.8.2 → 0.9.0

package/frontend-vue/layers/dms-layout/app/assets/css/main.css

@@ -125,11 +125,23 @@
 
     /* Accent for text, icons and lines. The light theme needs the deep dms-700
      to stay readable on white; solid fills keep the bright dms-400 through
-     --dms-accent-fill instead, with dark ink on top, in both themes. */
+     --dms-accent-fill instead, with dark ink on top, in both themes. The
+     whole accent family derives from the primary palette, so pointing
+     `ui.colors.primary` elsewhere leaves no cyan behind. The fill hover and
+     its ink sit between shades: on the dms palette they come within a few
+     units of the v2 design's #5fe0ec and #04181b. */
     --ui-primary: var(--ui-color-primary-700);
     --dms-accent-fill: var(--ui-color-primary-400);
-    --dms-accent-fill-hover: #5fe0ec;
-    --dms-accent-on-fill: #04181b;
+    --dms-accent-fill-hover: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 75%,
+      var(--ui-color-primary-200)
+    );
+    --dms-accent-on-fill: color-mix(
+      in srgb,
+      var(--ui-color-primary-950) 50%,
+      black
+    );
 
     /* v2 status inks: the light theme uses the 700 shades so success, warning
      and error text stays readable on white; tints and lines stay bright. */
@@ -191,11 +203,13 @@
       0 0 0 1px color-mix(in srgb, var(--dms-accent) 30%, transparent),
       0 0 24px -4px color-mix(in srgb, var(--dms-accent) 45%, transparent);
     --dms-focus-ring:
-      0 0 0 2px var(--ui-bg-muted), 0 0 0 4px rgb(27 162 175 / 0.55);
+      0 0 0 2px var(--ui-bg-muted),
+      0 0 0 4px color-mix(in srgb, var(--ui-color-primary-600) 55%, transparent);
     /* Command palette: the deepest shadow, plus an accent halo ring. */
     --dms-shadow-cmdk:
       0 1px 2px rgb(11 17 20 / 0.06), 0 30px 80px rgb(11 17 20 / 0.18);
-    --dms-halo-accent: 0 0 0 6px rgb(27 162 175 / 0.12);
+    --dms-halo-accent: 0 0 0 6px
+      color-mix(in srgb, var(--ui-color-primary-600) 12%, transparent);
     /* Assistant mode swaps the accent halo for a violet (secondary) one,
        and tints its surfaces and lines with the same violet. Plain rgb():
        Chromium fringes the anti-aliased edge of an oklab colour-mix border
@@ -213,16 +227,30 @@
       0 1px 2px rgb(11 17 20 / 0.06), 0 24px 64px rgb(11 17 20 / 0.16);
     --dms-overlay: rgb(11 17 20 / 0.28);
     --dms-glow-accent:
-      0 0 0 1px var(--ui-color-primary-600), 0 4px 16px rgb(27 162 175 / 0.18);
+      0 0 0 1px var(--ui-color-primary-600),
+      0 4px 16px
+        color-mix(in srgb, var(--ui-color-primary-600) 18%, transparent);
 
     --dms-accent: var(--ui-color-primary-500);
 
     /* Form controls (v2 --accent-tint*, --error-tint, --border-top,
      --btn-highlight): the 3px focus halo around fields, the strongest border
      (unchecked boxes, dropzones) and the highlight on accent fills. */
-    --dms-accent-tint: rgb(27 162 175 / 0.09);
-    --dms-accent-tint-strong: rgb(27 162 175 / 0.15);
-    --dms-accent-line: rgb(27 162 175 / 0.35);
+    --dms-accent-tint: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 9%,
+      transparent
+    );
+    --dms-accent-tint-strong: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 15%,
+      transparent
+    );
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 35%,
+      transparent
+    );
     --dms-error-tint: rgb(220 38 38 / 0.08);
     --dms-border-top: #c9d1d7;
     --dms-field-border-hover: color-mix(
@@ -231,7 +259,8 @@
       var(--ui-text-muted)
     );
     --dms-fill-highlight:
-      inset 0 1px 0 rgb(255 255 255 / 0.45), 0 1px 2px rgb(6 46 53 / 0.18);
+      inset 0 1px 0 rgb(255 255 255 / 0.45),
+      0 1px 2px color-mix(in srgb, var(--ui-color-primary-950) 18%, transparent);
 
     /* Charts and dashboards (v2 --chart-*, --sparkline, --skeleton): step 1
      is the main series, step 2 (violet) always the comparison. Lines use
@@ -285,12 +314,12 @@
     --dms-bg-muted: #0d1114;
     --dms-canvas-glow: radial-gradient(
       900px 600px at 85% -10%,
-      rgb(77 217 230 / 0.055),
+      color-mix(in srgb, var(--ui-color-primary-400) 5.5%, transparent),
       transparent 70%
     );
     --dms-stage-glow: radial-gradient(
       closest-side,
-      rgb(77 217 230 / 0.1),
+      color-mix(in srgb, var(--ui-color-primary-400) 10%, transparent),
       transparent
     );
 
@@ -316,10 +345,12 @@
       0 0 0 1px color-mix(in srgb, var(--dms-accent) 35%, transparent),
       0 0 32px -4px color-mix(in srgb, var(--dms-accent) 45%, transparent);
     --dms-focus-ring:
-      0 0 0 2px var(--ui-bg-muted), 0 0 0 4px rgb(77 217 230 / 0.6);
+      0 0 0 2px var(--ui-bg-muted),
+      0 0 0 4px color-mix(in srgb, var(--ui-color-primary-400) 60%, transparent);
     --dms-shadow-cmdk:
       0 50px 140px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.04);
-    --dms-halo-accent: 0 0 0 8px rgb(77 217 230 / 0.07);
+    --dms-halo-accent: 0 0 0 8px
+      color-mix(in srgb, var(--ui-color-primary-400) 7%, transparent);
     --dms-assistant-halo: 0 0 0 8px rgb(167 139 250 / 0.09);
     --dms-assistant-tint: rgb(167 139 250 / 0.12);
     --dms-assistant-line: rgb(167 139 250 / 0.4);
@@ -329,12 +360,25 @@
       0 40px 120px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.04);
     --dms-overlay: rgb(3 5 6 / 0.62);
     --dms-glow-accent:
-      0 0 0 1px var(--ui-color-primary-400), 0 0 40px rgb(77 217 230 / 0.25);
+      0 0 0 1px var(--ui-color-primary-400),
+      0 0 40px color-mix(in srgb, var(--ui-color-primary-400) 25%, transparent);
     --dms-accent: var(--ui-color-primary-400);
 
-    --dms-accent-tint: rgb(77 217 230 / 0.1);
-    --dms-accent-tint-strong: rgb(77 217 230 / 0.16);
-    --dms-accent-line: rgb(77 217 230 / 0.35);
+    --dms-accent-tint: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 10%,
+      transparent
+    );
+    --dms-accent-tint-strong: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 16%,
+      transparent
+    );
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 35%,
+      transparent
+    );
     --dms-error-tint: rgb(248 113 113 / 0.13);
     --dms-border-top: #3a4550;
     --dms-field-border-hover: color-mix(
@@ -380,7 +424,11 @@
     --ui-border-accented: #8a949d;
     --dms-border-top: #8a949d;
     --dms-chart-grid: #dfe4e8;
-    --dms-accent-line: rgb(27 162 175 / 0.6);
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-600) 60%,
+      transparent
+    );
     --dms-success-line: rgb(22 163 74 / 0.55);
     --dms-warning-line: rgb(217 119 6 / 0.6);
     --dms-error-line: rgb(220 38 38 / 0.55);
@@ -398,7 +446,11 @@
     --ui-border-accented: #5f6b76;
     --dms-border-top: #6b7782;
     --dms-chart-grid: #262e36;
-    --dms-accent-line: rgb(77 217 230 / 0.6);
+    --dms-accent-line: color-mix(
+      in srgb,
+      var(--ui-color-primary-400) 60%,
+      transparent
+    );
     --dms-success-line: rgb(74 222 128 / 0.6);
     --dms-warning-line: rgb(251 191 36 / 0.6);
     --dms-error-line: rgb(248 113 113 / 0.6);

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

@@ -6,6 +6,7 @@ import DashboardBanners from "./DashboardBanners.vue";
 import GithubStarPrompt from "./GithubStarPrompt.vue";
 import RolePreviewBar from "./RolePreviewBar.vue";
 import { useAppWidgets } from "../../../composables/useAppWidgets";
+import { useVisitNavBadges } from "../../composables/navigation/useVisitNavBadges";
 import {
   sidePanelWidthStyle,
   useActiveSidePanel,
@@ -45,6 +46,14 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 providePageFillHeight(toRef(props, "fillHeight"));
+// A custom page brings no site layout: read with the page, and taken over by
+// the browser before the sidebar, the header and the banners render it.
+useRenderedSiteLayout();
+// The bell's counts, read with the page too, before the header and the page
+// (the inbox, the profile's summary) show them.
+useRenderedBellCounts();
+
+useVisitNavBadges();
 
 const { widgets: appWidgets } = useAppWidgets();
 // A fill-height page has nothing to scroll past the dock: no clearance.

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

@@ -84,9 +84,6 @@ onBeforeUnmount(() =>
 );
 
 const siteLayout = useSiteLayout();
-if (!siteLayout.siteLayout.value) {
-  void siteLayout.loadSiteLayout();
-}
 
 const favoritePages = useFavoritePages();
 

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

@@ -3,7 +3,10 @@ import { formatRelativeTime } from "#dms-core/app/utils/formatter";
 import NotificationCard from "./NotificationCard.vue";
 import { useNavBadges } from "#dms-ui/app/build/composables/navigation/useNavBadges";
 import { settleWidgetRequest } from "./widgetRequest";
-import type { UserNotification } from "../../../composables/notification/useNotifications";
+import {
+  settledRenderedBellCounts,
+  type UserNotification,
+} from "../../../composables/notification/useNotifications";
 import { resolveNotificationTone } from "../pages/settings/notification/notificationDisplay";
 import { DMS_TONE_SOLID, iconWellToneOf } from "#dms-ui/app/build/utils/tone";
 import DmsRowSkeleton from "#dms-ui/app/build/components/skeleton/RowSkeleton.vue";
@@ -20,11 +23,12 @@ const SKELETON_ROW_COUNT = 4;
 const NOTIFICATIONS_SETTINGS_PAGE = "settings.user.notifications";
 
 const { t, locale } = useI18n();
-const { loggedIn } = useUserSession();
+const { loggedIn } = useDmsUserSession();
 const { processI18n } = useTranslation();
 const {
   unreadCount,
   unreadTone,
+  areCountsLoaded,
   notifications,
   hasMore,
   fetchBellCounts,
@@ -89,7 +93,9 @@ const handleFormSubmitSuccess = async (event: Event) => {
 
 onMounted(async () => {
   if (!loggedIn.value) return;
-  await refreshCounts();
+  // Read with the page (`useRenderedBellCounts`) unless that read failed.
+  if (!areCountsLoaded.value) await settledRenderedBellCounts();
+  if (!areCountsLoaded.value) await refreshCounts();
 
   window.addEventListener(
     FormEvents.SUBMIT_SUCCESS,

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/members/MemberRolePicker.vue

@@ -67,7 +67,6 @@ const props = defineProps<Props>();
 const model = defineModel<string[] | null | undefined>();
 
 const { t } = useI18n();
-const { $authFetch } = useAuthFetch();
 // The wrapping UFormField's error ("pick at least one role") marks the group
 // invalid, describes it and rings the pills in the error ink.
 const { ariaAttrs } = useFormField();
@@ -84,17 +83,19 @@ const showsOwnerHint = computed(() =>
   props.ownerField ? isOwner.value : props.disabled,
 );
 
-const options = ref<RoleOptionsResponse>({ roles: [], totalPermissions: 0 });
-const isFetching = ref(true);
-const isLoading = computed(() => isFetching.value || props.loading);
-
-onMounted(async () => {
-  try {
-    options.value = await $authFetch<RoleOptionsResponse>(props.rolesUrl);
-  } finally {
-    isFetching.value = false;
-  }
-});
+// Read with the form: a page-mode form renders the pills on the server; a
+// drawer opened again shows the roles at once and reads them again in the
+// background (one may have been added since).
+const roleOptions = useApiData<RoleOptionsResponse>(() => props.rolesUrl);
+const options = computed<RoleOptionsResponse>(
+  () => roleOptions.data.value ?? { roles: [], totalPermissions: 0 },
+);
+const isLoading = computed(
+  () =>
+    props.loading ||
+    roleOptions.status.value === "idle" ||
+    roleOptions.status.value === "pending",
+);
 
 const selectedIds = computed(() => new Set(model.value ?? []));
 const roleItems = computed<ChipGroupItem[]>(() =>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationInboxDisplay.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { nextTick } from "vue";
 import { formatRelativeTime } from "#dms-core/app/utils/formatter";
 import TableEmpty from "#dms-ui/app/build/components/table/Empty.vue";
 import TablePagination from "#dms-ui/app/build/components/table/Pagination.vue";
@@ -63,12 +64,21 @@ const sourceOf = (
   return labelKey ? { label: t(labelKey), isModule: false } : undefined;
 };
 
-// A change of a row is listed again, from the server.
+// A change made here moves the counts too (the write's answer, then its
+// realtime echo): the watcher below leaves it to the one read that follows it.
+let ownChanges = 0;
+
+// A change of a row is listed again, from the server, once.
 const runThenRefresh = async (action: () => Promise<unknown>) => {
+  ownChanges++;
   try {
     await action();
+    // What the action changed reaches the watcher before the guard drops.
+    await nextTick();
   } catch {
     toast.add({ title: t("dms.form.error_title"), color: "error" });
+  } finally {
+    ownChanges--;
   }
   await props.context.refresh();
 };
@@ -88,15 +98,15 @@ const toggleRead = (notification: UserNotification) =>
   );
 
 // What the stream changes elsewhere (a notification arriving, read in
-// another tab) is listed again here.
+// another tab) is listed again here: once per change of the count or of the
+// newest notification, not each time the bell's lists are rebuilt.
 watch(
-  () => [unreadCount.value, notifications.value[0]?._id],
-  () => void props.context.refresh(),
+  [unreadCount, () => notifications.value[0]?._id],
+  () => {
+    if (ownChanges === 0) void props.context.refresh();
+  },
 );
 
-onMounted(() => {
-  if (!catalog.isLoaded.value) void catalog.loadCatalog();
-});
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/notification/NotificationPreferencesForm.vue

@@ -65,7 +65,6 @@ const failureMessage = computed(() => {
     : t("page.settings.notifications.save_failed_on");
 });
 
-onMounted(load);
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfilePersonalInfo.vue

@@ -47,9 +47,9 @@ const toast = useToast();
 const { $authFetch } = useAuthFetch();
 const { processApiMessage } = useTranslation();
 const { user, refresh: refreshSession } = useCurrentUser();
-const { upload, resolveUrl } = useProfileAvatar(
-  () => props.avatarField?.component?.options ?? {},
-);
+const avatarOptions = () => props.avatarField?.component?.options ?? {};
+const { upload } = useProfileAvatar(avatarOptions);
+const avatarUrls = useFileReadUrls(avatarOptions().storage);
 // A refused name or picture shows under its field; a failed request is a
 // toast.
 const fieldErrors = useFieldErrors({
@@ -57,13 +57,29 @@ const fieldErrors = useFieldErrors({
   codes: { [INVALID_AVATAR]: "avatar" },
 });
 
-const saved = ref<ProfileResponse>({
-  name: user.value?.name,
-  email: user.value?.email,
-});
+// Read with the page: the server renders the name, the address with its
+// verification, and the picture. The form edits a copy of it.
+const profile = await useApiData<ProfileResponse>(() => props.endpoint);
+const isProfileLoaded = computed(
+  () => profile.status.value === "success" || profile.status.value === "error",
+);
+
+const saved = ref<ProfileResponse>(
+  profile.data.value ?? { name: user.value?.name, email: user.value?.email },
+);
 const name = ref(saved.value.name ?? "");
-const avatar = ref<AvatarValue | null>(null);
-const avatarUrl = ref<string | null>(null);
+const avatar = ref<AvatarValue | null>(saved.value.avatar ?? null);
+// A picture picked here shows from the file until the profile is saved.
+const pickedAvatarUrl = ref<string | null>(null);
+const avatarUrl = computed(() => {
+  if (!avatar.value) return null;
+  return pickedAvatarUrl.value ?? avatarUrls.getUrl(avatar.value.key) ?? null;
+});
+watch(
+  () => avatar.value?.key,
+  (key) => key && void avatarUrls.resolve(key),
+  { immediate: true },
+);
 const isUploading = ref(false);
 const isSaving = ref(false);
 const fileInput = useTemplateRef<HTMLInputElement>("fileInput");
@@ -86,14 +102,12 @@ const canSave = computed(() => !!name.value.trim() && !isUploading.value);
 
 watch(name, () => fieldErrors.clear("name"));
 
-async function applyProfile(profile: ProfileResponse): Promise<void> {
+function applyProfile(answer: ProfileResponse): void {
   fieldErrors.clear();
-  saved.value = profile;
-  name.value = profile.name ?? "";
-  avatar.value = profile.avatar ?? null;
-  avatarUrl.value = profile.avatar
-    ? await resolveUrl(profile.avatar.key)
-    : null;
+  saved.value = answer;
+  name.value = answer.name ?? "";
+  avatar.value = answer.avatar ?? null;
+  pickedAvatarUrl.value = null;
 }
 
 function pickFile(): void {
@@ -117,7 +131,7 @@ async function onFileChange(event: Event): Promise<void> {
       return;
     }
     avatar.value = { key: result.key! };
-    avatarUrl.value = URL.createObjectURL(file);
+    pickedAvatarUrl.value = URL.createObjectURL(file);
   } catch {
     toast.add({
       title: t("page.settings.profile.avatar_error"),
@@ -131,11 +145,11 @@ async function onFileChange(event: Event): Promise<void> {
 function removeAvatar(): void {
   fieldErrors.clear("avatar");
   avatar.value = null;
-  avatarUrl.value = null;
+  pickedAvatarUrl.value = null;
 }
 
-async function discard(): Promise<void> {
-  await applyProfile(saved.value);
+function discard(): void {
+  applyProfile(saved.value);
 }
 
 async function save(): Promise<void> {
@@ -146,11 +160,11 @@ async function save(): Promise<void> {
   if (!canSave.value) return;
   isSaving.value = true;
   try {
-    const profile = await $authFetch<ProfileResponse>(props.endpoint, {
+    const answer = await $authFetch<ProfileResponse>(props.endpoint, {
       method: "POST",
       body: { name: name.value.trim(), avatar: avatar.value },
     });
-    await applyProfile(profile);
+    applyProfile(answer);
     toast.add({ title: t("page.settings.profile.saved"), color: "success" });
     await refreshSession();
   } catch (error) {
@@ -162,17 +176,6 @@ async function save(): Promise<void> {
   }
 }
 
-// The verification state comes with the profile, fetched after mount: a
-// skeleton holds the badge's place until then.
-const isProfileLoaded = ref(false);
-
-onMounted(async () => {
-  try {
-    await applyProfile(await $authFetch<ProfileResponse>(props.endpoint));
-  } finally {
-    isProfileLoaded.value = true;
-  }
-});
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/profile/ProfileSecuritySummary.vue

@@ -7,7 +7,7 @@ import { iconWellToneOf } from "#dms-ui/app/build/utils/tone";
 import ProfileSummaryRow from "./ProfileSummaryRow.vue";
 
 const { t, locale } = useI18n();
-const { overview, attention, attentionTone, isUnavailable, refresh } =
+const { overview, attention, attentionTone, isUnavailable } =
   useSecurityOverview();
 
 const needsAttention = computed(() => attention.value.length > 0);
@@ -52,7 +52,6 @@ const placeholder = computed(
     )}`,
 );
 
-onMounted(refresh);
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/roles/role-types.ts

@@ -1,4 +1,5 @@
-/** A permission of the roles editor tree (`GET /settings/workspace/roles/editor-tree`). */
+import { pageRoutePath } from "#dms-core/app/utils/pageRoutes";
+/** A permission of the roles editor tree (`GET /dms/pages/settings/workspace/roles/editor-tree`). */
 export interface RolePermissionNode {
   id: string;
   label: string;
@@ -17,7 +18,7 @@ export interface RoleMemberPreview {
   name: string;
 }
 
-/** One role of the roles list (`GET /settings/workspace/roles/overview`). */
+/** One role of the roles list (`GET /dms/pages/settings/workspace/roles/overview`). */
 export interface RoleSummary {
   _id: string;
   name: string;
@@ -42,7 +43,7 @@ export interface RoleEditorCapabilities {
   canDelete: boolean;
 }
 
-/** Payload of `GET /settings/workspace/roles/overview`. */
+/** Payload of `GET /dms/pages/settings/workspace/roles/overview`. */
 export interface RolesOverview {
   roles: RoleSummary[];
   owners: RoleOwnersSummary;
@@ -78,7 +79,7 @@ export const OWNER_ENTRY_ID = "__owner__";
 export const NEW_ROLE_ENTRY_ID = "__new__";
 
 /** Base path of the roles page API. */
-export const ROLES_API_PATH = "/settings/workspace/roles";
+export const ROLES_API_PATH = pageRoutePath("/settings/workspace/roles");
 
 /** The roles' table data routes, which delete a role. */
 export const ROLES_TABLE_API_PATH = "/api/tables/roles";

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecuritySessions.vue

@@ -23,6 +23,12 @@ interface SessionInfo {
   isCurrent: boolean;
 }
 
+/** The sessions, and when they were read: what "active 5 minutes ago" counts from. */
+interface SessionsRead {
+  sessions: SessionInfo[];
+  readAt: number;
+}
+
 interface SessionsRevokedResponse {
   count: number;
   sessionHandoff?: SessionHandoff;
@@ -47,10 +53,25 @@ const adoptSessionHandoff = useSessionHandoff();
 const { overview, refresh: refreshOverview } = useSecurityOverview();
 const { formatDate, formatRelative, errorMessage } = useSecurityFormat();
 
-const isLoading = ref(true);
-// The list could not be loaded: shown as such, never as "no sessions".
-const hasLoadError = ref(false);
-const sessions = ref<SessionInfo[]>([]);
+// Read with the page: the server renders the list and hands it over, and
+// the browser says "active 5 minutes ago" as of the same read.
+const list = useApiData<SessionsRead>(SESSIONS_URL, {
+  transform: (sessions) => ({
+    sessions: sessions as SessionInfo[],
+    readAt: Date.now(),
+  }),
+});
+const sessions = computed(() => list.data.value?.sessions ?? []);
+const readAt = computed(() => list.data.value?.readAt);
+// The list could not be loaded: shown as such, never as "no sessions". A
+// failed reload keeps the list on screen.
+const hasLoadError = computed(
+  () =>
+    !list.data.value &&
+    !!list.error.value &&
+    list.status.value !== "pending",
+);
+const isLoading = computed(() => !list.data.value && !hasLoadError.value);
 const revokingId = ref<string | null>(null);
 const isConfirmOpen = ref(false);
 const isSigningOutOthers = ref(false);
@@ -73,18 +94,17 @@ const sessionName = (session: SessionInfo): string =>
 const sessionPlace = (session: SessionInfo): string =>
   session.location || t("page.settings.sessions.unknown_location");
 
-async function fetchSessions(): Promise<void> {
-  sessions.value = await $authFetch<SessionInfo[]>(SESSIONS_URL);
-  hasLoadError.value = false;
-}
+const fetchSessions = (): Promise<void> => list.refresh({ dedupe: "defer" });
 
 async function revoke(session: SessionInfo): Promise<void> {
   revokingId.value = session._id;
   try {
     await $authFetch(`${SESSIONS_URL}/${session._id}`, { method: "DELETE" });
-    sessions.value = sessions.value.filter(
-      (entry) => entry._id !== session._id,
-    );
+    if (list.data.value)
+      list.data.value = {
+        ...list.data.value,
+        sessions: sessions.value.filter((entry) => entry._id !== session._id),
+      };
     toast.add({ title: t("page.settings.sessions.revoked"), color: "success" });
     await refreshOverview();
   } catch (error) {
@@ -131,34 +151,21 @@ watch(
   () => overview.value?.activeSessions,
   (count, previous) => {
     if (previous !== undefined && count !== sessions.value.length) {
-      // A failed reload keeps the list on screen.
-      fetchSessions().catch(() => {});
+      void fetchSessions();
     }
   },
 );
 
-async function loadSessions(): Promise<void> {
-  isLoading.value = true;
-  try {
-    await fetchSessions();
-  } catch {
-    hasLoadError.value = true;
-  } finally {
-    isLoading.value = false;
-  }
-}
-
 const retryActions = computed(() => [
   {
     label: t("dms.table.load_error_retry"),
     icon: "i-ph-arrows-clockwise",
     color: "neutral" as const,
     variant: "outline" as const,
-    onClick: () => void loadSessions(),
+    onClick: () => void fetchSessions(),
   },
 ]);
 
-onMounted(loadSessions);
 </script>
 
 <template>
@@ -249,7 +256,7 @@ onMounted(loadSessions);
           <span v-else>
             {{
               t("page.settings.security.sessions.active_ago", {
-                time: formatRelative(session.lastActiveAt),
+                time: formatRelative(session.lastActiveAt, readAt),
               })
             }}
           </span>
@@ -323,7 +330,7 @@ onMounted(loadSessions);
                 {{
                   session.isCurrent
                     ? t("page.settings.security.sessions.active_now_lower")
-                    : formatRelative(session.lastActiveAt)
+                    : formatRelative(session.lastActiveAt, readAt)
                 }}
               </small>
             </span>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityStatus.vue

@@ -152,7 +152,6 @@ const retryActions = computed(() => [
   },
 ]);
 
-onMounted(refresh);
 </script>
 
 <template>

package/frontend-vue/layers/dms-layout/app/build/components/pages/settings/security/SecurityTwoFactor.vue

@@ -73,7 +73,7 @@ const { formatDate, errorMessage } = useSecurityFormat();
 const isProcessing = ref(false);
 const isTotpOpen = ref(false);
 const totpSetup = ref<TotpSetup | null>(null);
-const { user } = useUserSession<User>();
+const { user } = useDmsUserSession<User>();
 const {
   codes,
   isRegenerated,