@antelopejs/dms 0.8.2 → 0.9.0

package/frontend-vue/layers/dms-ui/app/components/flow-canvas/FlowCanvas.vue

@@ -367,41 +367,41 @@ defineExpose(flow);
    halo (which only targets the built-in node types), keeping node and edge
    selection states visually consistent. */
 .dms-flow-canvas .vue-flow__node.selected {
-  box-shadow: 0 0 0 1.5px var(--color-dms-500);
+  box-shadow: 0 0 0 1.5px var(--ui-color-primary-500);
 }
 
-/* Handles: DMS cyan accent, ringed with the card surface for contrast. */
+/* Handles: primary accent, ringed with the card surface for contrast. */
 .dms-flow-canvas .vue-flow__handle {
   width: 9px;
   height: 9px;
-  background: var(--color-dms-500);
+  background: var(--ui-color-primary-500);
   border: 2px solid var(--dms-surface-card);
   border-radius: 9999px;
 }
 
 .dms-flow-canvas .vue-flow__handle:hover {
-  background: var(--color-dms-400);
+  background: var(--ui-color-primary-400);
 }
 
-/* Edges: hairline by default, cyan accent on selection / animation. */
+/* Edges: hairline by default, primary accent on selection / animation. */
 .dms-flow-canvas .vue-flow__edge-path {
   stroke: var(--ui-border-accented);
   stroke-width: 1.5;
 }
 
 .dms-flow-canvas .vue-flow__edge.animated .vue-flow__edge-path {
-  stroke: var(--color-dms-500);
+  stroke: var(--ui-color-primary-500);
 }
 
 .dms-flow-canvas .vue-flow__edge.selected .vue-flow__edge-path,
 .dms-flow-canvas .vue-flow__edge:focus .vue-flow__edge-path,
 .dms-flow-canvas .vue-flow__edge:focus-visible .vue-flow__edge-path {
-  stroke: var(--color-dms-500);
+  stroke: var(--ui-color-primary-500);
   stroke-width: 2;
 }
 
 .dms-flow-canvas .vue-flow__connection-path {
-  stroke: var(--color-dms-500);
+  stroke: var(--ui-color-primary-500);
   stroke-width: 2;
 }
 
@@ -514,7 +514,7 @@ defineExpose(flow);
 }
 
 .dms-flow-canvas__delete-button:focus-visible {
-  outline: 2px solid var(--color-dms-500);
+  outline: 2px solid var(--ui-color-primary-500);
   outline-offset: 1px;
 }
 </style>

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue

@@ -549,30 +549,32 @@ allFields.value.forEach((field) => {
 
 let recordLoad: FormRecordLoad | undefined;
 if (props.fetchUrl) {
+  // Keyed on the record too: the load outlives a drawer or modal, and the
+  // next opening on another row must not show this one's values. A reopening
+  // on the same row shows the cached values at once and reads them again.
   const formLoad = await useDmsAsyncData(
-    `form-${props.componentId}-${props.pageId}`,
+    `form-${props.componentId}-${props.pageId}-${resolvedFetchUrl.value ?? ""}`,
     async () => ({
       values: await fetchData(),
       initial: initialValues.value,
     }),
   );
 
-  // The load is cached under this key, and outlives a drawer or modal: a
-  // reopening would show the values of the previous one, stale if the row
-  // changed since (here or elsewhere). Marked idle once read, every mounting
-  // fetches the row again.
-  onMounted(() => {
-    formLoad.status.value = "idle";
-  });
-
-  recordLoad = trackFormRecordLoad(formLoad, (payload) => {
-    if (payload.values && Object.keys(payload.values).length > 0) {
-      Object.assign(state.value, payload.values);
-    }
-    if (payload.initial && payload.initial !== initialValues.value) {
-      initialValues.value = { ...initialValues.value, ...payload.initial };
-    }
-  });
+  recordLoad = trackFormRecordLoad(
+    formLoad,
+    (payload) => {
+      if (payload.values && Object.keys(payload.values).length > 0) {
+        Object.assign(state.value, payload.values);
+      }
+      if (payload.initial && payload.initial !== initialValues.value) {
+        initialValues.value = { ...initialValues.value, ...payload.initial };
+      }
+    },
+    {
+      isEditing: () => changedFields.value.length > 0,
+      onReloaded: markFormClean,
+    },
+  );
 }
 
 const loadFailure = computed(
@@ -810,7 +812,7 @@ const realtimeContext = computed(() =>
   parseRealtimeContext(resolvedFetchUrl.value),
 );
 const showConcurrentEditBanner = ref(false);
-const { user: realtimeUser } = useUserSession();
+const { user: realtimeUser } = useDmsUserSession();
 const { $authFetch } = useAuthFetch();
 const pageRealtime = useUserRealtime();
 const acquired = ref<{

package/frontend-vue/layers/dms-ui/app/components/form/components/Cascader.vue

@@ -83,7 +83,8 @@ const { data, status, execute } = await useDmsAsyncData(
       },
     });
   },
-  { lazy: true, immediate: false },
+  // Options to pick from, not the page's data.
+  { lazy: true, immediate: false, refreshOnPageRefresh: false },
 );
 
 const keyMapping = computed(() => resolveCascaderKeyMapping(props.keyMapping));

package/frontend-vue/layers/dms-ui/app/components/form/components/File.vue

@@ -3,7 +3,6 @@ import { useId } from "vue";
 import DmsFieldError from "../../field-error/FieldError.vue";
 import { fieldErrorId } from "#dms-core/app/composables/useFieldErrors";
 import { FORM_FIELD_LOADING_KEY } from "../../../composables/form/types/field-loading";
-import { FORM_CONTENT_LANGUAGE_KEY } from "../../../composables/form/types/content-language";
 import type { PresignResponse } from "../../../composables/form/useUploadWithProgress";
 import {
   checkFileConstraints,
@@ -11,9 +10,9 @@ import {
   type FileFieldConstraints,
 } from "../../../utils/fileConstraints";
 import {
-  isDefinitiveMetadataFailure,
-  resolveMetadataRetryDelay,
-} from "../../../utils/metadataRetry";
+  type FileMetadata,
+  useFileMetadata,
+} from "../../../build/composables/files/useFileMetadata";
 
 export type FileConstraints = FileFieldConstraints;
 
@@ -24,15 +23,6 @@ interface UploadingFile {
   error?: string;
 }
 
-interface FileMetadataResponse {
-  resourceKey: string;
-  filename: string;
-  size: number;
-  mimetype: string;
-  url: string;
-  expiresAt?: number;
-}
-
 interface FileProps {
   modelValue?: string | string[] | null;
   multiple?: boolean;
@@ -70,14 +60,8 @@ const { uploadWithProgress } = useUploadWithProgress();
 const selectedFiles = ref<File | File[] | null>(null);
 const uploadingFiles = ref<UploadingFile[]>([]);
 const uploadedKeys = ref<string[]>([]);
-const fileMetadata = ref<Map<string, FileMetadataResponse>>(new Map());
-const unavailableKeys = ref<Set<string>>(new Set());
-const metadataTimers = new Map<string, ReturnType<typeof setTimeout>>();
-const metadataFailures = new Map<string, number>();
-const pendingMetadata = new Map<string, Promise<void>>();
-let isDisposed = false;
-const contentLanguage = inject(FORM_CONTENT_LANGUAGE_KEY, undefined);
-const URL_REFRESH_LEAD_MS = 5000;
+// Read with the page for the stored value, in the browser for a new one.
+const files = useFileMetadata(props.storage);
 
 const initializeFromModelValue = (
   val: string | string[] | null | undefined,
@@ -93,118 +77,26 @@ const initializeFromModelValue = (
 
 initializeFromModelValue(props.modelValue);
 
-const scheduleMetadataRefresh = (resourceKey: string, expiresAt?: number) => {
-  if (import.meta.env.SSR) return;
-  if (isDisposed || !uploadedKeys.value.includes(resourceKey)) return;
-  const currentTimer = metadataTimers.get(resourceKey);
-  if (currentTimer) clearTimeout(currentTimer);
-  if (expiresAt === undefined) return;
-  const remaining = Math.max(expiresAt - Date.now(), 0);
-  const refreshLead = Math.min(URL_REFRESH_LEAD_MS, remaining / 2);
-  metadataTimers.set(
-    resourceKey,
-    setTimeout(() => fetchMetadata(resourceKey, true), remaining - refreshLead),
-  );
-};
-
-const fetchMetadata = async (
-  resourceKey: string,
-  force = false,
-): Promise<void> => {
-  if (isDisposed) return;
-  const pending = pendingMetadata.get(resourceKey);
-  if (pending) {
-    await pending;
-    if (force) await fetchMetadata(resourceKey, true);
-    return;
-  }
-  if (!force && fileMetadata.value.has(resourceKey)) return;
-
-  const request = requestMetadata(resourceKey);
-  pendingMetadata.set(resourceKey, request);
-  await request;
-};
-
-const markUnavailable = (resourceKey: string, error: unknown) => {
-  const cached = fileMetadata.value.get(resourceKey);
-  const isExpired =
-    cached?.expiresAt !== undefined && cached.expiresAt <= Date.now();
-  if (cached && !isExpired && !isDefinitiveMetadataFailure(error)) return;
-  fileMetadata.value.set(resourceKey, {
-    resourceKey,
-    filename: cached?.filename ?? resourceKey,
-    size: cached?.size ?? 0,
-    mimetype: cached?.mimetype ?? "application/octet-stream",
-    url: "",
-  });
-  unavailableKeys.value.add(resourceKey);
-};
-
-const handleMetadataFailure = (resourceKey: string, error: unknown) => {
-  markUnavailable(resourceKey, error);
-  const failures = (metadataFailures.get(resourceKey) ?? 0) + 1;
-  metadataFailures.set(resourceKey, failures);
-  const delay = resolveMetadataRetryDelay(error, failures);
-  if (delay === null || import.meta.env.SSR) return;
-  metadataTimers.set(
-    resourceKey,
-    setTimeout(() => fetchMetadata(resourceKey, true), delay),
-  );
-};
-
-const requestMetadata = async (resourceKey: string): Promise<void> => {
-  try {
-    const metadata = await $authFetch<FileMetadataResponse>(
-      `/api/files/metadata`,
-      {
-        query: {
-          resourceKey,
-          storage: props.storage,
-        },
-        headers: contentLanguage
-          ? { [CONTENT_LANGUAGE_HEADER]: contentLanguage }
-          : undefined,
-      },
-    );
-    if (isDisposed || !uploadedKeys.value.includes(resourceKey)) return;
-    fileMetadata.value.set(resourceKey, metadata);
-    unavailableKeys.value.delete(resourceKey);
-    metadataFailures.delete(resourceKey);
-    scheduleMetadataRefresh(resourceKey, metadata.expiresAt);
-  } catch (error) {
-    if (isDisposed || !uploadedKeys.value.includes(resourceKey)) return;
-    handleMetadataFailure(resourceKey, error);
-  } finally {
-    pendingMetadata.delete(resourceKey);
-  }
-};
-
 const openFile = async (resourceKey: string) => {
-  await fetchMetadata(resourceKey, true);
-  const url = fileMetadata.value.get(resourceKey)?.url;
+  await files.resolve(resourceKey, true);
+  const url = files.metadata(resourceKey)?.url;
   if (url) window.open(url, "_blank", "noopener,noreferrer");
 };
 
-const fetchAllMetadata = async (keys: string[]) => {
-  await Promise.all(keys.map((key) => fetchMetadata(key)));
-};
-
 watch(
   () => props.modelValue,
   (val) => {
     const newKeys = !val ? [] : typeof val === "string" ? [val] : val;
     if (newKeys.join(",") !== uploadedKeys.value.join(",")) {
       uploadedKeys.value = newKeys;
-      fetchAllMetadata(newKeys);
     }
   },
 );
 
+// A copy: an upload into a multiple field pushes its key.
 watch(
-  uploadedKeys,
-  (keys) => {
-    fetchAllMetadata(keys);
-  },
+  () => [...uploadedKeys.value],
+  (keys) => keys.forEach((key) => void files.resolve(key)),
   { immediate: true },
 );
 
@@ -312,20 +204,27 @@ const removeUploadingFile = (id: string) => {
 
 const removeUploadedFile = (key: string) => {
   uploadedKeys.value = uploadedKeys.value.filter((k) => k !== key);
-  fileMetadata.value.delete(key);
-  unavailableKeys.value.delete(key);
-  metadataFailures.delete(key);
-  const timer = metadataTimers.get(key);
-  if (timer) clearTimeout(timer);
   emitValue();
 };
 
-const getMetadata = (key: string): FileMetadataResponse | undefined => {
-  return fileMetadata.value.get(key);
+const isUnavailable = (key: string): boolean => files.isUnavailable(key);
+
+/**
+ * What a stored file shows: its metadata, or, once it cannot be read, its
+ * last known name (the key otherwise) without a link.
+ */
+const getMetadata = (key: string): FileMetadata | undefined => {
+  if (!isUnavailable(key)) return files.metadata(key);
+  const known = files.lastRead(key);
+  return {
+    resourceKey: key,
+    filename: known?.filename ?? key,
+    size: known?.size ?? 0,
+    mimetype: known?.mimetype ?? "application/octet-stream",
+    url: "",
+  };
 };
 
-const isUnavailable = (key: string): boolean => unavailableKeys.value.has(key);
-
 const isImage = (mimetype: string): boolean => {
   return mimetype.startsWith("image/");
 };
@@ -363,11 +262,6 @@ const maxSizeFormatted = computed(() => {
 const isUploading = computed(() => uploadingFiles.value.length > 0);
 
 const setFieldLoading = inject(FORM_FIELD_LOADING_KEY, null);
-
-onScopeDispose(() => {
-  isDisposed = true;
-  metadataTimers.forEach(clearTimeout);
-});
 </script>
 
 <template>

package/frontend-vue/layers/dms-ui/app/components/form/components/Image.vue

@@ -2,7 +2,6 @@
 import DmsFieldError from "../../field-error/FieldError.vue";
 import { fieldErrorId } from "#dms-core/app/composables/useFieldErrors";
 import { FORM_FIELD_LOADING_KEY } from "../../../composables/form/types/field-loading";
-import { FORM_CONTENT_LANGUAGE_KEY } from "../../../composables/form/types/content-language";
 import type { PresignResponse } from "../../../composables/form/useUploadWithProgress";
 import { useKeyboardPlatform } from "../../../composables/global/keyboardPlatform";
 import {
@@ -13,10 +12,7 @@ import {
   type ImageResizeBounds,
   resizeImageToBounds,
 } from "../../../utils/imageResize";
-import {
-  isDefinitiveMetadataFailure,
-  resolveMetadataRetryDelay,
-} from "../../../utils/metadataRetry";
+import { useFileMetadata } from "../../../build/composables/files/useFileMetadata";
 
 export type ImageConstraints = FileFieldConstraints;
 
@@ -51,16 +47,6 @@ interface GalleryItem {
   principal: boolean;
   status: ItemStatus;
   progress: number;
-  expiresAt?: number;
-}
-
-interface FileMetadataResponse {
-  resourceKey: string;
-  filename: string;
-  size: number;
-  mimetype: string;
-  url: string;
-  expiresAt?: number;
 }
 
 const props = defineProps<ImageProps>();
@@ -79,10 +65,10 @@ const { formatShortcut } = useKeyboardPlatform();
 const pasteShortcut = computed(() => formatShortcut(["meta", "v"]));
 const { uploadWithProgress } = useUploadWithProgress();
 const setFieldLoading = inject(FORM_FIELD_LOADING_KEY, null);
-const contentLanguage = inject(FORM_CONTENT_LANGUAGE_KEY, undefined);
+// Read with the page for the stored value, in the browser for a new one.
+const files = useFileMetadata(props.storage);
 
 const DEFAULT_ACCEPT = "image/*";
-const URL_REFRESH_LEAD_MS = 5000;
 const FAILURE_LABEL_KEYS: Partial<Record<ItemStatus, string>> = {
   error: "dms.form.image.upload_failed",
   unavailable: "dms.form.image.file_unavailable",
@@ -114,10 +100,6 @@ const dragItemId = ref<string | null>(null);
 const dragOverItemId = ref<string | null>(null);
 const detailItemId = ref<string | null>(null);
 const detailAltDraft = ref("");
-const metadataTimers = new Map<string, ReturnType<typeof setTimeout>>();
-const metadataFailures = new Map<string, number>();
-const pendingMetadata = new Set<string>();
-let isDisposed = false;
 
 const toValueArray = (
   value: ImageItemValue | ImageItemValue[] | null | undefined,
@@ -126,84 +108,43 @@ const toValueArray = (
   return Array.isArray(value) ? value : [value];
 };
 
-const createItemFromValue = (value: ImageItemValue): GalleryItem => ({
-  id: crypto.randomUUID(),
-  key: value.key,
-  file: null,
-  url: "",
-  filename: value.key,
-  size: null,
-  width: null,
-  height: null,
-  alt: value.alt ?? "",
-  principal: value.principal ?? false,
-  status: "done",
-  progress: 100,
-});
-
-const scheduleItemMetadataRefresh = (item: GalleryItem, delay: number) => {
-  if (import.meta.env.SSR) return;
-  if (isDisposed || !items.value.some(({ id }) => id === item.id)) return;
-  const currentTimer = metadataTimers.get(item.id);
-  if (currentTimer) clearTimeout(currentTimer);
-  metadataTimers.set(
-    item.id,
-    setTimeout(() => fetchItemMetadata(item, true), delay),
-  );
-};
-
-const scheduleItemExpiryRefresh = (item: GalleryItem) => {
-  if (item.expiresAt === undefined) return;
-  const remaining = Math.max(item.expiresAt - Date.now(), 0);
-  const refreshLead = Math.min(URL_REFRESH_LEAD_MS, remaining / 2);
-  scheduleItemMetadataRefresh(item, remaining - refreshLead);
-};
-
-const handleItemMetadataFailure = (item: GalleryItem, error: unknown) => {
-  if (
-    isDefinitiveMetadataFailure(error) ||
-    !item.url ||
-    (item.expiresAt !== undefined && item.expiresAt <= Date.now())
-  ) {
-    item.url = "";
-    item.status = "unavailable";
-  }
-  const failures = (metadataFailures.get(item.id) ?? 0) + 1;
-  metadataFailures.set(item.id, failures);
-  const delay = resolveMetadataRetryDelay(error, failures);
-  if (delay !== null) scheduleItemMetadataRefresh(item, delay);
-};
-
-const fetchItemMetadata = async (item: GalleryItem, force = false) => {
-  if (isDisposed) return;
-  if (!item.key || (!force && item.url) || pendingMetadata.has(item.id)) return;
-
-  pendingMetadata.add(item.id);
-  try {
-    const metadata = await $authFetch<FileMetadataResponse>(
-      "/api/files/metadata",
-      {
-        query: { resourceKey: item.key, storage: props.storage },
-        headers: contentLanguage
-          ? { [CONTENT_LANGUAGE_HEADER]: contentLanguage }
-          : undefined,
+/**
+ * A stored image: what the tile shows of the file (its URL, name, size,
+ * whether it can be read) follows its shared metadata, so the server renders
+ * it and the URL stays fresh; the rest is the field's own.
+ */
+const createItemFromValue = (value: ImageItemValue): GalleryItem =>
+  Object.defineProperties(
+    {
+      id: crypto.randomUUID(),
+      key: value.key,
+      file: null,
+      width: null,
+      height: null,
+      alt: value.alt ?? "",
+      principal: value.principal ?? false,
+      progress: 100,
+    },
+    {
+      url: {
+        get: () => files.metadata(value.key)?.url ?? "",
+        enumerable: true,
       },
-    );
-    if (isDisposed || !items.value.some(({ id }) => id === item.id)) return;
-    item.url = metadata.url;
-    item.filename = metadata.filename;
-    item.size = metadata.size;
-    item.expiresAt = metadata.expiresAt;
-    item.status = "done";
-    metadataFailures.delete(item.id);
-    scheduleItemExpiryRefresh(item);
-  } catch (error) {
-    if (isDisposed || !items.value.some(({ id }) => id === item.id)) return;
-    handleItemMetadataFailure(item, error);
-  } finally {
-    pendingMetadata.delete(item.id);
-  }
-};
+      filename: {
+        get: () => files.lastRead(value.key)?.filename ?? value.key,
+        enumerable: true,
+      },
+      size: {
+        get: () => files.lastRead(value.key)?.size ?? null,
+        enumerable: true,
+      },
+      status: {
+        get: (): ItemStatus =>
+          files.isUnavailable(value.key) ? "unavailable" : "done",
+        enumerable: true,
+      },
+    },
+  ) as GalleryItem;
 
 const valueSignature = (values: ImageItemValue[]): string =>
   JSON.stringify(
@@ -225,17 +166,13 @@ const currentSignature = (): string =>
 
 const releaseItem = (item: GalleryItem) => {
   if (item.file && item.url) URL.revokeObjectURL(item.url);
-  const timer = metadataTimers.get(item.id);
-  if (timer) clearTimeout(timer);
-  metadataTimers.delete(item.id);
-  metadataFailures.delete(item.id);
 };
 
 const initializeFromModelValue = () => {
   items.value.forEach(releaseItem);
   const values = toValueArray(props.modelValue);
   items.value = values.map(createItemFromValue);
-  items.value.forEach((item) => fetchItemMetadata(item));
+  values.forEach((value) => void files.resolve(value.key));
 };
 
 initializeFromModelValue();
@@ -594,9 +531,7 @@ const itemMeta = (item: GalleryItem): string => {
 };
 
 onBeforeUnmount(() => {
-  isDisposed = true;
   items.value.forEach(releaseItem);
-  metadataTimers.forEach(clearTimeout);
 });
 </script>
 

package/frontend-vue/layers/dms-ui/app/components/form/components/InputAddress.vue

@@ -271,6 +271,8 @@ const dynamicCountryData = props.searchUrl
       lazy: true,
       immediate: false,
       watch: [countrySearchTermDebounced],
+      // Options to pick from, not the page's data.
+      refreshOnPageRefresh: false,
     })
   : { data: ref(null), status: ref("idle"), execute: () => {} };
 

package/frontend-vue/layers/dms-ui/app/components/form/components/Relation.vue

@@ -107,13 +107,11 @@ const { $authFetch } = useAuthFetch();
 const toast = useToast();
 const { t } = useI18n();
 const { processI18n } = useTranslation();
-const { hasPermission, isLoaded, fetchPermissions } = usePermissions();
+const { hasPermission, loadPermissions } = usePermissions();
 const { open: openDrawer } = useDrawer();
 const { clearGuards } = useLeaveGuard();
 
-if (!isLoaded.value) {
-  await fetchPermissions().catch(() => {});
-}
+await loadPermissions().catch(() => {});
 
 const addContainerId = `relation-add-${useId()}`;
 // Shallow: `SelectMenuItem` carries a string index signature, so a deeply
@@ -237,6 +235,8 @@ const { data, status, execute } = await useDmsAsyncData(
     lazy: true,
     immediate: false,
     watch: [searchTermDebounced],
+    // Options to pick from, not the page's data.
+    refreshOnPageRefresh: false,
   },
 );
 

package/frontend-vue/layers/dms-ui/app/components/period/PeriodSelector.vue

@@ -19,7 +19,7 @@ import {
   type ComparisonControl,
   resolveComparisonControl,
 } from "../../build/composables/period/periodComparisonControl";
-import { isRelativePreset } from "#dms-core/app/composables/period/presetResolvers";
+import { readerClock } from "#dms-core/app/composables/period/periodClock";
 import { usePeriodLocation } from "../../build/composables/period/usePeriodLocation";
 import {
   type CalendarRange,
@@ -332,20 +332,14 @@ const committedRangeLabel = computed(() => {
   return range ? formatPeriodRange(range, locale.value) : null;
 });
 
-/**
- * The instant a relative label is read from: a rolling window's own end, so
- * it holds still with the window while the page is paused.
- */
-function labelNow(preset: PeriodPreset, range: PeriodRange): Date {
-  return isRelativePreset(preset) ? range.to : new Date();
-}
-
 // Only a window reaching now reads "since …"; one that has ended keeps its
-// bounds.
+// bounds. "Now" is the instant the period was resolved from: it holds still
+// with the period while the page is paused, and is the server's while the
+// browser hydrates its render.
 const relativeRangeLabel = computed<string | null>(() => {
-  const { preset, range } = period.state.value;
+  const { range } = period.state.value;
   if (props.rangeLabel !== RELATIVE_RANGE_LABEL || !range) return null;
-  const now = labelNow(preset, range);
+  const now = period.resolvedAt.value;
   if (range.to.getTime() < now.getTime()) return null;
   const from = formatRelativeInstant(range.from, now, locale.value);
   return t("dms.period.since", { from }, `since ${from}`);
@@ -421,7 +415,9 @@ function comparisonKeyClass(active: boolean): string {
 }
 
 function compareRangeText(compare: PeriodRange, main: PeriodRange): string {
-  const sameYear = compare.to.getFullYear() === main.to.getFullYear();
+  // In the reader's calendar, on the server as in the browser.
+  const clock = readerClock();
+  const sameYear = clock.wall(compare.to).year === clock.wall(main.to).year;
   return formatPeriodRange(compare, locale.value, !sameYear);
 }
 

package/frontend-vue/layers/dms-ui/app/components/table-view/CascaderPath.vue

@@ -47,7 +47,8 @@ const { data } = await useDmsAsyncData(
           params: { limit: CASCADER_FETCH_LIMIT },
         })
       : Promise.resolve(undefined),
-  { lazy: true },
+  // The labels of a path, not the page's data.
+  { lazy: true, refreshOnPageRefresh: false },
 );
 
 const pathOf = (item: unknown): string[] =>