@antelopejs/dms 0.7.15 → 0.7.17

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

@@ -20,7 +20,10 @@ import {
   RangeCalendarRoot,
   type DateRange,
 } from "reka-ui";
-import type { CalendarRange } from "../../composables/period/periodDisplay";
+import {
+  type CalendarRange,
+  isBeyondMaxDays,
+} from "../../composables/period/periodDisplay";
 
 // Two-month range calendar of the period selector (design .cal): a
 // continuous accent strip for the selected range with filled endpoints, and
@@ -32,6 +35,11 @@ interface Props {
   weekStartsOn?: number;
   numberOfMonths?: number;
   readonly?: boolean;
+  /**
+   * The longest range, in days, that can be picked: once a start day is
+   * picked, the days that would exceed it are disabled.
+   */
+  maxDays?: number;
 }
 
 type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -107,6 +115,13 @@ function onUpdate(value: DateRange | null) {
   emit("pending", pendingStart.value);
 }
 
+function isDateDisabled(date: DateValue): boolean {
+  const picked = pendingStart.value;
+  return (
+    !!picked && isBeyondMaxDays(date as CalendarDate, picked, props.maxDays)
+  );
+}
+
 function onPlaceholder(value: DateValue) {
   // Picking a start day re-anchors reka's view on it; with two months on
   // screen that would shift the grid under the pointer.
@@ -210,6 +225,7 @@ const weekStart = computed(() => props.weekStartsOn as WeekStart);
     :number-of-months="numberOfMonths"
     :max-value="todayDate"
     :readonly="readonly"
+    :is-date-disabled="isDateDisabled"
     weekday-format="short"
     prevent-deselect
     class="flex gap-6"

package/frontend-vue/layers/dms-ui/app/build/composables/actions/bulkSelection.ts

@@ -47,7 +47,13 @@ export function withQuery(url: string, query: Record<string, QueryValue>) {
   return joined ? `${path}?${joined}` : (path ?? url);
 }
 
-const URL_TARGET_TYPES = new Set(["page", "external", "api", "exportJob"]);
+const URL_TARGET_TYPES = new Set([
+  "page",
+  "external",
+  "download",
+  "api",
+  "exportJob",
+]);
 
 /** A target sending the selection along: its URL carries the query. */
 export function targetWithSelection(

package/frontend-vue/layers/dms-ui/app/build/composables/actions/useActionTargets.ts

@@ -51,7 +51,10 @@ import {
 import {
   hasUrlVariables,
   resolveLinkVariables,
+  resolveTextVariables,
 } from "../../utils/urlVariables";
+import { interpolateLiteral } from "../../utils/literalText";
+import { type DownloadFetch, saveDownload } from "../../utils/fileDownload";
 
 /** Runs a confirmed action from inside its dialog (see `onConfirm`). */
 type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
@@ -70,6 +73,21 @@ function linkTargetUrl(url: string, rowData?: Data): string {
   return rowData ? interpolateUrl(withPageValues, rowData) : withPageValues;
 }
 
+/**
+ * A download target's file name with the page's tokens filled as they are
+ * (a name, not a URL: nothing is encoded), then the row's `{field}`. A token
+ * the page has no value for leaves no name: the server's one is used.
+ */
+function downloadTargetFilename(
+  filename: string | undefined,
+  rowData?: Data,
+): string | undefined {
+  if (!filename) return undefined;
+  const withPageValues = resolveTextVariables(filename, currentPageUrlValues());
+  if (!withPageValues || !rowData) return withPageValues;
+  return interpolateLiteral(withPageValues, rowData);
+}
+
 function currentPageUrlValues() {
   const route = useDmsRoute();
   return {
@@ -110,6 +128,7 @@ interface TargetRunExtras {
 }
 
 type SidePanelTarget = ActionTarget & { type: "sidePanel" };
+type DownloadTarget = ActionTarget & { type: "download" };
 
 /** A side panel to open, and on what. */
 interface SidePanelTargetRun extends TargetRunExtras {
@@ -148,6 +167,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
   const { copy: copyToClipboard } = useClipboard({ legacy: true });
   const { confirmAction } = useActionConfirm();
   const { handleApiError } = config;
+  const fetchRaw = useAuthFetch().$authFetch.raw as unknown as DownloadFetch;
 
   /** Calls an `api` target and tells how it went (rejects on a failure). */
   const requestApiTarget = async (
@@ -249,6 +269,26 @@ export function useActionTargets(config: ActionTargetsConfig) {
     });
   };
 
+  // Fetched with the user's session, as a confirmation's download is; a
+  // refusal is toasted like a failed API call.
+  const handleDownloadTarget = async (
+    target: DownloadTarget,
+    label: string,
+    rowData?: Data,
+  ) => {
+    try {
+      await saveDownload(
+        {
+          url: linkTargetUrl(target.url, rowData),
+          filename: downloadTargetFilename(target.filename, rowData),
+        },
+        fetchRaw,
+      );
+    } catch (error: unknown) {
+      handleApiError(error, label ? processI18n(label, rowData) : undefined);
+    }
+  };
+
   const openContainer = (
     run: ComponentTargetRun,
     component: Component,
@@ -462,6 +502,8 @@ export function useActionTargets(config: ActionTargetsConfig) {
         : jobTarget.url;
       await handleExportJobTarget(jobTarget, url, rowData);
     },
+    download: (target, label, rowData) =>
+      handleDownloadTarget(target as DownloadTarget, label, rowData),
     modal: componentHandler,
     // Runs the quick action as the command palette does; one the user is not
     // served runs nothing.

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/secondaryTarget.ts

@@ -1,50 +1,10 @@
 import type {
-  ConfirmDialogDownloadTarget,
   ConfirmDialogLinkTarget,
   ConfirmDialogSecondaryTarget,
 } from "#dms-core/app/types/confirm-dialog";
-import { downloadFile } from "#dms-core/app/utils/downloadFile";
+import { type DownloadFetch, saveDownload } from "../../utils/fileDownload";
 import type { SecondaryTargetRun } from "./confirmDialogTexts";
 
-/** The response a download reads: its body and its headers. */
-export interface DownloadResponse {
-  _data?: Blob;
-  headers: Headers;
-}
-
-/** Fetches a download with the user's session (`$authFetch.raw`). */
-export type DownloadFetch = (
-  url: string,
-  options: { responseType: "blob" },
-) => Promise<DownloadResponse>;
-
-const DISPOSITION_NAME = /filename\*?=(?:UTF-8'')?"?([^";]+)"?/i;
-const FALLBACK_FILENAME = "download";
-
-// A malformed escape is kept as written rather than failing the download.
-function decodeName(name: string): string {
-  try {
-    return decodeURIComponent(name);
-  } catch {
-    return name;
-  }
-}
-
-/**
- * The name a download is saved under: the declared one, else the server's
- * `Content-Disposition` one, else the URL's last path segment.
- */
-export function downloadFilename(
-  target: ConfirmDialogDownloadTarget,
-  disposition: string | null,
-): string {
-  if (target.filename) return target.filename;
-  const served = disposition ? DISPOSITION_NAME.exec(disposition)?.[1] : "";
-  if (served) return decodeName(served.trim());
-  const path = target.url.split(/[?#]/)[0] ?? "";
-  return decodeName(path.split("/").pop() || FALLBACK_FILENAME);
-}
-
 function openLink(target: ConfirmDialogLinkTarget): void {
   if (typeof window === "undefined" || !target.url) return;
   if (target.newTab) {
@@ -54,24 +14,6 @@ function openLink(target: ConfirmDialogLinkTarget): void {
   window.location.href = target.url;
 }
 
-async function saveDownload(
-  target: ConfirmDialogDownloadTarget,
-  fetchRaw: DownloadFetch,
-): Promise<void> {
-  if (!target.url) return;
-  const response = await fetchRaw(target.url, { responseType: "blob" });
-  const blob = response._data ?? new Blob([]);
-  const objectUrl = URL.createObjectURL(blob);
-  try {
-    downloadFile(
-      objectUrl,
-      downloadFilename(target, response.headers.get("content-disposition")),
-    );
-  } finally {
-    URL.revokeObjectURL(objectUrl);
-  }
-}
-
 /**
  * Runs the target of a confirmation's secondary action, the dialog left
  * open: a link opens, a download is fetched with `fetchRaw` and saved.

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/useActionConfirm.ts

@@ -13,7 +13,8 @@ import {
   type ConfirmTranslate,
   resolveConfirmDialog,
 } from "./confirmDialogTexts";
-import { type DownloadFetch, secondaryTargetRunner } from "./secondaryTarget";
+import type { DownloadFetch } from "../../utils/fileDownload";
+import { secondaryTargetRunner } from "./secondaryTarget";
 
 /** What an action asks its confirmation with. */
 export interface ActionConfirmRequest {

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodDisplay.ts

@@ -53,6 +53,55 @@ export function calendarToRange(range: CalendarRange): PeriodRange {
   };
 }
 
+/** Which bound of a range stays put when the range has to shrink. */
+export type CalendarRangeAnchor = "start" | "end";
+
+const RANGE_SHRINKERS: Record<
+  CalendarRangeAnchor,
+  (range: CalendarRange, span: number) => CalendarRange
+> = {
+  start: (range, span) => ({
+    start: range.start,
+    end: range.start.add({ days: span }),
+  }),
+  end: (range, span) => ({
+    start: range.end.subtract({ days: span }),
+    end: range.end,
+  }),
+};
+
+/** The number of days a range covers, both ends included. */
+export function calendarRangeDays(range: CalendarRange): number {
+  return range.end.compare(range.start) + 1;
+}
+
+/**
+ * Shrinks a range to at most `maxDays` days, keeping its `anchor` bound and
+ * moving the other one. Without a limit, or within it, the range is returned
+ * as is.
+ */
+export function limitCalendarRange(
+  range: CalendarRange,
+  maxDays: number | undefined,
+  anchor: CalendarRangeAnchor,
+): CalendarRange {
+  if (!maxDays || calendarRangeDays(range) <= maxDays) return range;
+  return RANGE_SHRINKERS[anchor](range, maxDays - 1);
+}
+
+/**
+ * Whether a range starting (or ending) on `pickedDay` and reaching `date`
+ * would cover more than `maxDays` days.
+ */
+export function isBeyondMaxDays(
+  date: CalendarDate,
+  pickedDay: CalendarDate,
+  maxDays: number | undefined,
+): boolean {
+  if (!maxDays) return false;
+  return Math.abs(date.compare(pickedDay)) >= maxDays;
+}
+
 function isStartOfDay(date: Date): boolean {
   return (
     date.getHours() === 0 &&

package/frontend-vue/layers/dms-ui/app/build/composables/period/usePeriodLocation.ts

@@ -63,15 +63,23 @@ function selectionText(selection: PeriodSelection): string {
   return JSON.stringify(writePeriodQuery(selection, STORED_KEYS));
 }
 
+type DmsRouteState = ReturnType<typeof useDmsRoute>;
+
+function browserQuery(): PeriodQuery {
+  return Object.fromEntries(new URLSearchParams(window.location.search));
+}
+
 /**
  * Writes the period into the URL: the history entry is replaced, and no
  * request reloads the page. The browser's URL is written at once, so a
- * second selector writing in the same tick merges into it; Inertia's
- * client-side replace then moves its page URL, which the DMS route follows,
- * so a component writing the query from the route (a tab, a quick action)
- * carries the period on instead of the one the page was opened with.
+ * second selector writing in the same tick merges into it, and so is the
+ * route's query: a component or a module building a query from the route
+ * (a tab, a quick action) carries the new period on at once, instead of the
+ * one the page was opened with. Inertia's client-side replace then moves its
+ * page URL, which the route follows, a few ticks later, to the same query.
  */
 function replacePeriodInUrl(
+  route: DmsRouteState,
   keys: PeriodQueryKeys,
   selection: PeriodSelection,
 ): string | null {
@@ -81,15 +89,29 @@ function replacePeriodInUrl(
   if (isPeriodQueryCurrent(query, keys, selection)) return null;
   url.search = mergePeriodSearch(url.search, keys, selection);
   const written = urlKeysText(Object.fromEntries(url.searchParams), keys);
+  const fullPath = `${url.pathname}${url.search}${url.hash}`;
   window.history.replaceState(window.history.state, "", url);
+  route.query = Object.fromEntries(url.searchParams);
+  route.fullPath = fullPath;
   inertiaRouter.replace({
-    url: `${url.pathname}${url.search}${url.hash}`,
+    url: fullPath,
     preserveState: true,
     preserveScroll: true,
   });
   return written;
 }
 
+/**
+ * Until Inertia's page catches up with a URL written in place, the route can
+ * still be set back to the page's previous query (a component reading the
+ * route meanwhile refreshes it from that page). The address bar is ahead of
+ * it, never behind: a route whose period keys differ from it is stale.
+ */
+function isRouteBehindBrowser(text: string, keys: PeriodQueryKeys): boolean {
+  if (typeof window === "undefined") return false;
+  return text !== urlKeysText(browserQuery(), keys);
+}
+
 /** The user's last choice of one selector, kept in the preferences. */
 function useRememberedPeriod(target: RememberedPeriodTarget) {
   const { getPreference, setPreference } = usePreferences();
@@ -113,11 +135,11 @@ function useRememberedPeriod(target: RememberedPeriodTarget) {
  * later, and a pick made meanwhile must not be undone by the URL of the one
  * before: `isEcho` tells a route naming a URL written here from a change.
  */
-function usePeriodUrlWriter(keys: PeriodQueryKeys) {
+function usePeriodUrlWriter(route: DmsRouteState, keys: PeriodQueryKeys) {
   const pending: string[] = [];
   return {
     write: (selection: PeriodSelection) => {
-      const written = replacePeriodInUrl(keys, selection);
+      const written = replacePeriodInUrl(route, keys, selection);
       if (written !== null) pending.push(written);
     },
     isEcho: (text: string) => {
@@ -142,8 +164,9 @@ function usePeriodUrlWriter(keys: PeriodQueryKeys) {
  * period, then on every change: the history entry is replaced instead of
  * pushed, so Back leaves the page rather than stepping through every pick,
  * and the page is not requested again, only the bound cards and tables
- * refetch. A route changed from outside (Back to the page with another
- * period, a link) moves the period.
+ * refetch. The route's query (`useDmsRoute().query`) follows each write at
+ * once. A route changed from outside (Back to the page with another period,
+ * a link) moves the period.
  */
 export function usePeriodLocation(
   period: UsePeriodReturn,
@@ -152,7 +175,7 @@ export function usePeriodLocation(
   const route = useDmsRoute();
   const urlKeys = periodQueryKeys(options.id);
   const remembered = useRememberedPeriod(options);
-  const writer = usePeriodUrlWriter(urlKeys);
+  const writer = usePeriodUrlWriter(route, urlKeys);
   const choices = {
     presets: period.presets.value,
     comparisons: period.comparisons.value,
@@ -186,7 +209,7 @@ export function usePeriodLocation(
   watch(
     () => urlKeysText(route.query as PeriodQuery, urlKeys),
     (text) => {
-      if (writer.isEcho(text)) return;
+      if (writer.isEcho(text) || isRouteBehindBrowser(text, urlKeys)) return;
       const current = readSelection(period);
       const next = resolvePeriodSelection([urlSource()], choices, current);
       if (selectionText(next) === selectionText(current)) return;

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableUrlTab.ts

@@ -0,0 +1,47 @@
+import { watch, type Ref } from "vue";
+import { readTableUrlKey, type TableUrlScope } from "./utils/views";
+
+const TAB_URL_KEY = "tab";
+
+/** The route fields the URL tab is read from. */
+export interface TableUrlTabRoute {
+  query: Record<string, unknown>;
+}
+
+/** What `useTableUrlTab` reads the tab from and drives. */
+export interface TableUrlTabOptions {
+  route: TableUrlTabRoute;
+  urlScope: TableUrlScope;
+  /** The open tab: set from the URL on arrival by the caller, then here. */
+  activeTabId: Ref<string>;
+  /** Whether the table has a tab of that id it can open in place. */
+  isOpenable: (tabId: string) => boolean;
+}
+
+/**
+ * The tab the URL names for a table (`?<tableId>.tab=`, or `?tab=` on a page
+ * carrying a single table view), as it reads on arrival.
+ */
+export function readTableUrlTab(
+  query: Record<string, unknown>,
+  urlScope: TableUrlScope,
+): string | undefined {
+  return readTableUrlKey(query, urlScope, TAB_URL_KEY).value;
+}
+
+/**
+ * Follows the URL's tab after arrival: a link or a `router.replace` naming
+ * another tab of the same page switches to it without remounting the page.
+ * A URL dropping the key, or naming a tab the table cannot open in place (an
+ * unknown id, a link tab), leaves the open tab alone.
+ */
+export function useTableUrlTab(options: TableUrlTabOptions): void {
+  watch(
+    () => readTableUrlTab(options.route.query, options.urlScope),
+    (tabId) => {
+      if (!tabId || tabId === options.activeTabId.value) return;
+      if (!options.isOpenable(tabId)) return;
+      options.activeTabId.value = tabId;
+    },
+  );
+}

package/frontend-vue/layers/dms-ui/app/build/utils/fileDownload.ts

@@ -0,0 +1,69 @@
+import { downloadFile } from "#dms-core/app/utils/downloadFile";
+
+/** A file to fetch with the user's session, and the name it is saved under. */
+export interface FileDownload {
+  url: string;
+  /** Saved under; the response's `Content-Disposition` name, else the URL's. */
+  filename?: string;
+}
+
+/** The response a download reads: its body and its headers. */
+export interface DownloadResponse {
+  _data?: Blob;
+  headers: Headers;
+}
+
+/** Fetches a download with the user's session (`$authFetch.raw`). */
+export type DownloadFetch = (
+  url: string,
+  options: { responseType: "blob" },
+) => Promise<DownloadResponse>;
+
+const DISPOSITION_NAME = /filename\*?=(?:UTF-8'')?"?([^";]+)"?/i;
+const FALLBACK_FILENAME = "download";
+
+// A malformed escape is kept as written rather than failing the download.
+function decodeName(name: string): string {
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
+}
+
+/**
+ * The name a download is saved under: the declared one, else the server's
+ * `Content-Disposition` one, else the URL's last path segment.
+ */
+export function downloadFilename(
+  download: FileDownload,
+  disposition: string | null,
+): string {
+  if (download.filename) return download.filename;
+  const served = disposition ? DISPOSITION_NAME.exec(disposition)?.[1] : "";
+  if (served) return decodeName(served.trim());
+  const path = download.url.split(/[?#]/)[0] ?? "";
+  return decodeName(path.split("/").pop() || FALLBACK_FILENAME);
+}
+
+/**
+ * Fetches a file with `fetchRaw` (the user's session) and saves it; rejects
+ * when the request fails.
+ */
+export async function saveDownload(
+  download: FileDownload,
+  fetchRaw: DownloadFetch,
+): Promise<void> {
+  if (!download.url) return;
+  const response = await fetchRaw(download.url, { responseType: "blob" });
+  const blob = response._data ?? new Blob([]);
+  const objectUrl = URL.createObjectURL(blob);
+  try {
+    downloadFile(
+      objectUrl,
+      downloadFilename(download, response.headers.get("content-disposition")),
+    );
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}

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

@@ -23,9 +23,11 @@ import { isRelativePreset } from "#dms-core/app/composables/period/presetResolve
 import { usePeriodLocation } from "../../build/composables/period/usePeriodLocation";
 import {
   type CalendarRange,
+  type CalendarRangeAnchor,
   calendarToRange,
   formatPeriodRange,
   formatRelativeInstant,
+  limitCalendarRange,
   periodDuration,
   rangeToCalendar,
 } from "../../build/composables/period/periodDisplay";
@@ -49,6 +51,7 @@ interface Props extends DefaultComponentProps {
   comparisonControl?: ComparisonControl;
   rememberKey?: string;
   variant?: "default" | "segmented";
+  maxDays?: number;
 }
 
 const CALENDAR_ICON = "i-ph-calendar-blank-light";
@@ -232,9 +235,18 @@ function setOpen(open: boolean) {
   isOpen.value = open;
 }
 
+// A custom range starts from the days on screen, which a long preset can
+// stretch past `maxDays`: it keeps its most recent days.
+function selectDraftPreset(preset: PeriodPreset) {
+  draft.selectPreset(preset);
+  const custom = draft.customRange.value;
+  if (preset !== CUSTOM_PRESET || !custom) return;
+  selectCalendarRange(rangeToCalendar(custom), "end");
+}
+
 function openCustom() {
   draft.reset();
-  draft.selectPreset(CUSTOM_PRESET);
+  selectDraftPreset(CUSTOM_PRESET);
   pendingStart.value = null;
   isOpen.value = true;
 }
@@ -253,9 +265,14 @@ const draftCompareCalendar = computed<CalendarRange | null>(() => {
   return compare ? rangeToCalendar(compare) : null;
 });
 
-function selectCalendarRange(range: CalendarRange) {
+function selectCalendarRange(
+  range: CalendarRange,
+  anchor: CalendarRangeAnchor = "start",
+) {
   if (!isCustomEnabled.value) return;
-  draft.selectRange(calendarToRange(range));
+  draft.selectRange(
+    calendarToRange(limitCalendarRange(range, props.maxDays, anchor)),
+  );
 }
 
 function updateStart(value: DateValue | null | undefined) {
@@ -273,6 +290,7 @@ function updateEnd(value: DateValue | null | undefined) {
   const start = draftCalendar.value.start;
   selectCalendarRange(
     end.compare(start) < 0 ? { start: end, end } : { start, end },
+    "end",
   );
 }
 
@@ -297,6 +315,12 @@ const draftDurationLabel = computed(() => {
   return t(`dms.period.popover.${unit}`, { count }, count);
 });
 
+const maxDaysHint = computed(() =>
+  props.maxDays && isCustomEnabled.value
+    ? t("dms.period.popover.max_days", { count: props.maxDays }, props.maxDays)
+    : null,
+);
+
 const draftCompareLabel = computed(() => {
   const compare = draft.compareRange.value;
   return compare ? formatPeriodRange(compare, locale.value) : null;
@@ -557,7 +581,7 @@ function onSegmentedClick(event: MouseEvent) {
                   role="option"
                   :aria-selected="draft.preset.value === entry.preset"
                   :class="presetItemClass(entry.preset)"
-                  @click="draft.selectPreset(entry.preset)"
+                  @click="selectDraftPreset(entry.preset)"
                 >
                   <span class="truncate">{{ entry.label }}</span>
                   <span
@@ -583,7 +607,7 @@ function onSegmentedClick(event: MouseEvent) {
                   role="option"
                   :aria-selected="draft.preset.value === CUSTOM_PRESET"
                   :class="presetItemClass(CUSTOM_PRESET)"
-                  @click="draft.selectPreset(CUSTOM_PRESET)"
+                  @click="selectDraftPreset(CUSTOM_PRESET)"
                 >
                   <UIcon :name="CALENDAR_ICON" class="size-4 shrink-0" />
                   {{ $t("dms.period.popover.custom_range", "Custom range") }}
@@ -662,7 +686,8 @@ function onSegmentedClick(event: MouseEvent) {
               :week-starts-on="weekStartsOn"
               :number-of-months="isWide ? 2 : 1"
               :readonly="!isCustomEnabled"
-              @update:model-value="selectCalendarRange"
+              :max-days="maxDays"
+              @update:model-value="selectCalendarRange($event)"
               @pending="pendingStart = $event"
             />
 
@@ -680,6 +705,7 @@ function onSegmentedClick(event: MouseEvent) {
                   </span>
                   {{ draftCompareLabel }}
                 </template>
+                <template v-if="maxDaysHint">· {{ maxDaysHint }}</template>
               </span>
               <UButton
                 color="neutral"

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

@@ -151,7 +151,10 @@ import {
   groupedSorting,
   isGroupableColumn,
 } from "../../build/composables/table-view/utils/groupedRows";
-import { readTableUrlKey } from "../../build/composables/table-view/utils/views";
+import {
+  readTableUrlTab,
+  useTableUrlTab,
+} from "../../build/composables/table-view/useTableUrlTab";
 import TableViews, {
   type TableViewItem,
 } from "../../build/components/table/Views.vue";
@@ -606,11 +609,10 @@ const ALL_TAB_ID = "all";
 
 const { t, te } = useI18n();
 
-const TAB_URL_KEY = "tab";
-const urlTab = readTableUrlKey(useDmsRoute().query, urlScope, TAB_URL_KEY);
 // A tab named by the URL wins over the one kept from the last visit.
 const activeTabId = ref<string>(
-  urlTab.value ?? tablePreferences.get<string>("activeTab", ALL_TAB_ID),
+  readTableUrlTab(route.query, urlScope) ??
+    tablePreferences.get<string>("activeTab", ALL_TAB_ID),
 );
 
 interface ResolvedTab {
@@ -661,6 +663,14 @@ const activeTabFilters = computed<TableFilter[]>(() => {
   return tab?.filters || [];
 });
 
+useTableUrlTab({
+  route,
+  urlScope,
+  activeTabId,
+  isOpenable: (tabId) =>
+    resolvedTabs.value.some((tab) => !tab.to && tab.id === tabId),
+});
+
 watch(resolvedTabs, (next) => {
   if (next.length === 0) return;
   if (!next.some((tab) => !tab.to && tab.id === activeTabId.value)) {