@antelopejs/dms 0.9.8 → 0.10.0

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

@@ -1,11 +1,19 @@
-import { computed, ref, watch, type ComputedRef } from "vue";
+import {
+  computed,
+  getCurrentScope,
+  onMounted,
+  onScopeDispose,
+  ref,
+  watch,
+  type ComputedRef,
+} from "vue";
 import { usePageLive } from "../../../composables/live/usePageLive";
 import type {
   PageLiveNote,
   TableViewLiveHoldOptions,
 } from "../../../types/live";
 import type { LiveGate } from "../live/currentPageLive";
-import { useScrolledPastTop } from "./useScrolledPastTop";
+import { useScrolledPastTop, useTableReached } from "./useScrolledPastTop";
 import { LIVE_HELD_AT_QUERY_KEY } from "./useTableRows";
 
 type Query = Record<string, unknown>;
@@ -18,7 +26,10 @@ export interface TableLiveHoldSignals {
   isSearching?: () => boolean;
   /** The rows are sorted otherwise than by the table's default. */
   isSorted?: () => boolean;
-  /** The table's element, whose first row `whileScrolled` follows. */
+  /**
+   * The table's element: whether it is on screen, and where its first row
+   * stands for `whileScrolled`.
+   */
   tableElement?: () => unknown;
 }
 
@@ -29,6 +40,29 @@ export type TableLiveHoldReason =
   | "sorted"
   | "scrolled";
 
+/**
+ * A table holds by itself for a reason it names, or because the user has its
+ * rows on screen (`reading`): new rows would push them down. The latter goes
+ * unsaid; the new rows wait behind the "N new · Show" pill.
+ */
+type LocalHoldReason = TableLiveHoldReason | "reading";
+
+/**
+ * How a held table counts the new rows it would show: the rows its current
+ * query (tab, search, filters) matches now, less the rows it holds. Without
+ * it the pill counts every event of the table's topic, whatever row each
+ * one is about.
+ */
+export interface TableNewRowsCounter {
+  /**
+   * The list on screen, `null` before it arrives; read again whenever it
+   * changes (a new read, another query), which counts again.
+   */
+  heldList: () => { total: number } | null | undefined;
+  /** How many rows the table's current query matches now, unbounded. */
+  countNow: (signal: AbortSignal) => Promise<number | undefined>;
+}
+
 export interface TableLiveHoldOptions {
   /** The table's `liveHold`: `true` or an object enables it. */
   liveHold: boolean | TableViewLiveHoldOptions | undefined;
@@ -40,12 +74,16 @@ export interface TableLiveHoldOptions {
    */
   gate: () => LiveGate;
   signals?: TableLiveHoldSignals;
+  newRows?: TableNewRowsCounter;
 }
 
 export interface TableLiveHold {
   /** The rows are held: the page is paused, or the table holds by itself. */
   isHolding: ComputedRef<boolean>;
-  /** Events the table received since its rows were held or last shown. */
+  /**
+   * The rows the table would add since its rows were held or last shown
+   * (`newRows`), or else the events it received meanwhile.
+   */
   newCount: ComputedRef<number>;
   /**
    * Why the table holds by itself while its page is live, `null` otherwise:
@@ -77,22 +115,26 @@ function holdOptionsOf(
 }
 
 // The table alone holds while the page is live: the user reads a row in the
-// side panel, narrows or reorders the rows, or reads further down than the
-// rows that would move. The first reason in this order is the one shown.
+// side panel, narrows or reorders the rows, reads further down than the rows
+// that would move, or has them on screen at all — a new row at the top would
+// push them down. The first reason in this order is the one shown.
 function useLocalHold(
   holdOptions: TableViewLiveHoldOptions | null,
   signals: TableLiveHoldSignals,
-): ComputedRef<TableLiveHoldReason | null> {
+): ComputedRef<LocalHoldReason | null> {
   const tableElement = signals.tableElement ?? NO_ELEMENT;
-  const isScrolled = useScrolledPastTop(() => {
-    const element = tableElement();
-    return element instanceof HTMLElement ? element : null;
-  }, !!holdOptions?.whileScrolled);
-  const reasons: Array<[TableLiveHoldReason, boolean, () => boolean]> = [
+  const element = () => {
+    const target = tableElement();
+    return target instanceof HTMLElement ? target : null;
+  };
+  const isScrolled = useScrolledPastTop(element, !!holdOptions?.whileScrolled);
+  const isReached = useTableReached(element, !!holdOptions);
+  const reasons: Array<[LocalHoldReason, boolean, () => boolean]> = [
     ["rowOpen", !!holdOptions?.whileRowOpen, signals.isRowOpen ?? NEVER],
     ["searching", !!holdOptions?.whileSearching, signals.isSearching ?? NEVER],
     ["sorted", !!holdOptions?.whileSorted, signals.isSorted ?? NEVER],
     ["scrolled", !!holdOptions?.whileScrolled, () => isScrolled.value],
+    ["reading", !!holdOptions, () => isReached.value],
   ];
   return computed(
     () =>
@@ -102,10 +144,11 @@ function useLocalHold(
 }
 
 /**
- * The `liveHold` of a table view: while its live page is paused — or, with
- * `whileRowOpen` / `whileSearching` / `whileSorted` / `whileScrolled`, while
- * the user reads a row, searches, sorts or scrolled down — the table keeps
- * its rows: the gate requests nothing on its events and counts them, and a
+ * The `liveHold` of a table view: while its live page is paused, while its
+ * rows are on screen or scrolled past (rows landing at the top would move
+ * them) — or, with `whileRowOpen` / `whileSearching` / `whileSorted` /
+ * `whileScrolled`, saying so, while the user reads a row, searches, sorts or
+ * scrolled down — the table keeps its rows: the gate requests nothing on its events and counts them, and a
  * source route is told the moment they were frozen, so the user's own
  * search, sort and pagination list the rows as they stood.
  * Show reads them once more without leaving the hold; the end of a hold of
@@ -132,16 +175,19 @@ export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
     },
     { flush: "sync" },
   );
-  const newCount = computed(() =>
-    isHolding.value ? options.gate().missed.value : 0,
-  );
+  const missed = () => (isHolding.value ? options.gate().missed.value : 0);
+  const newCount = options.newRows
+    ? useCountedNewRows(missed, options.newRows)
+    : computed(missed);
 
   return {
     isHolding,
     newCount,
-    reason: computed(() =>
-      isHolding.value && !isPaused.value ? localReason.value : null,
-    ),
+    reason: computed(() => {
+      if (!isHolding.value || isPaused.value) return null;
+      const reason = localReason.value;
+      return reason === "reading" ? null : reason;
+    }),
     missedLabel: holdOptions?.missedLabel,
     missedDetail: computed(() =>
       isPaused.value && newCount.value > 0 ? missedDetail.value : null,
@@ -151,6 +197,73 @@ export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
   };
 }
 
+/** Lets a burst of events through before counting the new rows once. */
+const NEW_ROWS_COUNT_DELAY_MS = 500;
+
+// The new rows the table would show, counted on its source while it holds
+// some events: a topic publishes on every row, so a "4xx" tab, a search or a
+// filter would otherwise announce rows it never lists. Counted again on each
+// new event or held list, a burst at a time. Rows removed meanwhile lower
+// the count: the table answers what it lists, not what came in. A count that
+// fails falls back to the events. Only in the browser, once mounted: the
+// table sets up its gate and its list after its hold.
+function useCountedNewRows(
+  missed: () => number,
+  counter: TableNewRowsCounter,
+): ComputedRef<number> {
+  const counted = ref(0);
+  const hasFailed = ref(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let inFlight: AbortController | undefined;
+
+  const cancel = () => {
+    clearTimeout(timer);
+    timer = undefined;
+    inFlight?.abort();
+    inFlight = undefined;
+  };
+  const count = async () => {
+    timer = undefined;
+    const held = counter.heldList()?.total;
+    if (held === undefined) return;
+    inFlight?.abort();
+    const controller = new AbortController();
+    inFlight = controller;
+    try {
+      const now = await counter.countNow(controller.signal);
+      if (controller.signal.aborted) return;
+      hasFailed.value = now === undefined;
+      counted.value = Math.max(0, (now ?? held) - held);
+    } catch {
+      if (!controller.signal.aborted) hasFailed.value = true;
+    }
+  };
+
+  const scope = getCurrentScope();
+  const follow = () =>
+    watch(
+      [missed, counter.heldList],
+      ([events]) => {
+        if (events === 0) {
+          cancel();
+          counted.value = 0;
+          hasFailed.value = false;
+          return;
+        }
+        timer ??= setTimeout(count, NEW_ROWS_COUNT_DELAY_MS);
+      },
+      { immediate: true },
+    );
+  onMounted(() => scope?.run(follow));
+  onScopeDispose(cancel);
+
+  return computed(() => {
+    const events = missed();
+    if (events === 0) return 0;
+    return hasFailed.value ? events : counted.value;
+  });
+}
+
 // The bound a source route receives while the rows are held: they are as
 // fresh as the hold, or as the last read the user asked for since (Show, an
 // action of theirs).

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

@@ -11,7 +11,8 @@ import {
   resolveUrlVariables,
 } from "../../utils/urlVariables";
 import type { RowActionRule } from "#dms-core/app/types/row-action";
-import { pinRows } from "./utils/pinnedRows";
+import { compareValues, textOf } from "./utils/compareValues";
+import { pinRows, pinRowsBySpan } from "./utils/pinnedRows";
 import {
   appendPeriodToUrl,
   usePeriodScope,
@@ -86,18 +87,6 @@ export function sourceRouteQuery(
   );
 }
 
-const textOf = (value: unknown): string =>
-  value === null || value === undefined
-    ? ""
-    : typeof value === "object"
-      ? JSON.stringify(value)
-      : String(value);
-
-const compareValues = (a: unknown, b: unknown): number => {
-  if (typeof a === "number" && typeof b === "number") return a - b;
-  return textOf(a).localeCompare(textOf(b), undefined, { numeric: true });
-};
-
 /**
  * The rows the browser narrows, sorts and pages itself, for what the source
  * route left to it: a search over the listed columns' text, the sort on one
@@ -155,7 +144,10 @@ interface SharedRead<T> {
  * order its keys were built in.
  */
 const sourceReadKey = (url: string, query: Query): string =>
-  JSON.stringify([url, Object.entries(query).sort(([a], [b]) => a.localeCompare(b))]);
+  JSON.stringify([
+    url,
+    Object.entries(query).sort(([a], [b]) => a.localeCompare(b)),
+  ]);
 
 /**
  * Settles with `answer`, or rejects as soon as `signal` aborts, calling
@@ -173,9 +165,9 @@ function awaitUnlessAborted<R>(
     };
     if (signal.aborted) return abort();
     signal.addEventListener("abort", abort, { once: true });
-    answer.then(resolve, reject).finally(() =>
-      signal.removeEventListener("abort", abort),
-    );
+    answer
+      .then(resolve, reject)
+      .finally(() => signal.removeEventListener("abort", abort));
   });
 }
 
@@ -294,19 +286,57 @@ export function useTableRows<T extends Record<string, unknown>>(
   ): TableViewListResponse<T> | null =>
     page && { ...page, results: pinRows(page.results, options.pinnedRows?.()) };
 
+  // The list the route answers, before the pinned rows lead it.
+  const listAnswered = (
+    query: Query,
+    signal?: AbortSignal,
+  ): Promise<TableViewListResponse<T> | null> =>
+    source
+      ? listFromSource(source, query, signal)
+      : api<TableViewListResponse<T>>(`${location}/list`, { query, signal });
+
   // `signal` aborts the request once its answer is no longer wanted.
   const list = async (
     query: Query,
     signal?: AbortSignal,
   ): Promise<TableViewListResponse<T> | null> =>
-    withPinnedRows(
-      source
-        ? await listFromSource(source, query, signal)
-        : await api<TableViewListResponse<T>>(`${location}/list`, {
-            query,
-            signal,
-          }),
-    );
+    withPinnedRows(await listAnswered(query, signal));
+
+  /**
+   * The rows `query.offset` and `query.limit` name, in the order a table
+   * reading `span` rows at a time from the first shows them: the pinned
+   * rows lead each of its reads (a page), not the rows read here. The reads
+   * they fall in are read whole, then each pinned on its own. A source
+   * answering every row pins them all before its pages are cut: as `list`.
+   */
+  const listAsShown = async (
+    query: Query,
+    span: number,
+  ): Promise<TableViewListResponse<T> | null> => {
+    const pinnedRows = options.pinnedRows?.();
+    const offset = Number(query.offset) || 0;
+    const limit = Number(query.limit) || 0;
+    const isWholeSource = !!source && !source.capabilities.paginate;
+    if (!pinnedRows || span <= 0 || limit <= 0 || isWholeSource) {
+      return list(query);
+    }
+    const start = Math.floor(offset / span) * span;
+    const end = Math.ceil((offset + limit) / span) * span;
+    const page = await listAnswered({
+      ...query,
+      offset: start,
+      limit: end - start,
+    });
+    if (!page) return null;
+    const shown = pinRowsBySpan(page.results, span, pinnedRows);
+    const from = offset - start;
+    return {
+      ...page,
+      results: shown.slice(from, from + limit),
+      offset,
+      limit,
+    };
+  };
 
   // A source answers its totals one list at a time.
   const countBatch = async (
@@ -358,6 +388,7 @@ export function useTableRows<T extends Record<string, unknown>>(
     sourceUrl,
     isPeriodPending,
     list,
+    listAsShown,
     countBatch,
     getRow,
   };

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

@@ -44,6 +44,7 @@ import {
   resolveFormContainerTexts,
   type TableViewFormKind,
 } from "./utils/formTexts";
+import { dmsOwnDrawer } from "../containers/context";
 
 const DEFAULT_ROW_ID_KEY = "_id";
 const DEFAULT_MODAL_SIZE = "xl";
@@ -95,6 +96,12 @@ type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
 /** Options of a delete: from the archive, it is a permanent one. */
 interface DeleteRowsOptions {
   permanently?: boolean;
+  /**
+   * The rows deleted, when the caller holds them: a dialog naming the row
+   * (`{name}`) reads its fields here first. A kanban card is not among the
+   * rows the table shows.
+   */
+  rows?: Data[];
 }
 
 export const useTableRowActions = <T extends Data>(
@@ -249,24 +256,26 @@ export const useTableRowActions = <T extends Data>(
     fetchUrl?: string,
     submitDefaults?: Record<string, unknown>,
   ) => {
-    const drawer = openDrawer({
-      title,
-      description,
-      containerId,
-      component: DmsForm,
-      componentOptions: {
-        ...processedOptions,
-        ...(fetchUrl && { fetchUrl }),
-        ...(submitDefaults && { submitDefaults }),
-        componentId: `${config.componentId}-${componentIdSuffix}`,
-        pageId: pageIdSuffix,
+    const drawer = openDrawer(
+      dmsOwnDrawer({
+        title,
+        description,
         containerId,
-        onSuccessCallback: () => {
-          drawer.close();
-          config.refreshCallback?.();
+        component: DmsForm,
+        componentOptions: {
+          ...processedOptions,
+          ...(fetchUrl && { fetchUrl }),
+          ...(submitDefaults && { submitDefaults }),
+          componentId: `${config.componentId}-${componentIdSuffix}`,
+          pageId: pageIdSuffix,
+          containerId,
+          onSuccessCallback: () => {
+            drawer.close();
+            config.refreshCallback?.();
+          },
         },
-      },
-    });
+      }),
+    );
     return drawer;
   };
 
@@ -654,38 +663,65 @@ export const useTableRowActions = <T extends Data>(
     };
   };
 
-  const findShownRow = (id: string | undefined): Data | undefined =>
-    config.rowNavigation
-      ?.rows()
-      .find(
-        (row) =>
-          String(getItemId(row, config.rowIdKey ?? DEFAULT_ROW_ID_KEY)) === id,
-      );
+  const rowIdOf = (row: Data): string =>
+    String(getItemId(row, config.rowIdKey ?? DEFAULT_ROW_ID_KEY));
+
+  const findRowIn = (rows: Data[] | undefined, id: string) =>
+    rows?.find((row) => rowIdOf(row) === id);
+
+  // A row the table does not show (a kanban card, a row deleted from a
+  // custom card) is read by id: a `from` dialog asks the server instead.
+  const readRow = async (
+    id: string,
+    declared: ActionConfirm,
+  ): Promise<Data | undefined> => {
+    const getRow = config.rowNavigation?.getRow;
+    if (!getRow || isConfirmFrom(declared)) return undefined;
+    return getRow(id).catch(() => undefined);
+  };
+
+  /** The one row a dialog words: the caller's, the table's, else read. */
+  const findConfirmRow = async (
+    id: string,
+    declared: ActionConfirm,
+    rows?: Data[],
+  ): Promise<Data | undefined> =>
+    findRowIn(rows, id) ??
+    findRowIn(config.rowNavigation?.rows(), id) ??
+    (await readRow(id, declared));
 
   /**
-   * What a fixed dialog words: the rows' count, and for one row shown in the
-   * table its own fields too (`{name}`). The count wins a clash, it is what
-   * every bulk dialog may name.
+   * What a fixed dialog words: the rows' count, and for one row its own
+   * fields too (`{name}`). The count wins a clash, it is what every bulk
+   * dialog may name.
    */
-  const confirmRowFields = (ids: string[]): Data => {
+  const confirmRowFields = async (
+    ids: string[],
+    declared: ActionConfirm,
+    rows?: Data[],
+  ): Promise<Data> => {
     const count = { count: ids.length };
-    const row = ids.length === 1 ? findShownRow(ids[0]) : undefined;
+    const row =
+      ids.length === 1
+        ? await findConfirmRow(ids[0]!, declared, rows)
+        : undefined;
     return row ? { ...row, ...count } : count;
   };
 
   /** Asks the declared confirmation of a bulk action, running it inside. */
-  const askDeclaredBulkConfirm = (
+  const askDeclaredBulkConfirm = async (
     declared: ActionConfirm,
     ids: string[],
     fallback: Partial<ConfirmOptions>,
     run: ConfirmedRun,
+    rows?: Data[],
   ): Promise<boolean> =>
     confirmAction(declared, {
       urlParams: {
         id: ids[0],
         [config.rowIdKey ?? DEFAULT_ROW_ID_KEY]: ids[0],
       },
-      row: confirmRowFields(ids),
+      row: await confirmRowFields(ids, declared, rows),
       fallback,
       run,
     });
@@ -703,11 +739,14 @@ export const useTableRowActions = <T extends Data>(
     actionConfig: boolean | RowActionConfig | undefined,
     action: ConfirmedBulkAction,
     bulkConfig: BulkActionConfig,
+    rows?: Data[],
   ): Promise<boolean> => {
     const fallback = bulkActionConfirm(action, ids.length, t);
     const run = bulkActionRun(ids, actionConfig, bulkConfig);
     const declared = declaredBulkConfirm(actionConfig, ids);
-    if (declared) return askDeclaredBulkConfirm(declared, ids, fallback, run);
+    if (declared) {
+      return askDeclaredBulkConfirm(declared, ids, fallback, run, rows);
+    }
     return confirm({ ...fallback, onConfirm: run });
   };
 
@@ -746,7 +785,13 @@ export const useTableRowActions = <T extends Data>(
   ): Promise<boolean> => {
     if (!normalizeActionConfig(deleteConfig).isEnabled) return false;
     const action = options.permanently ? "deletePermanently" : "delete";
-    return confirmBulkAction(ids, deleteConfig, action, DELETE_CONFIG);
+    return confirmBulkAction(
+      ids,
+      deleteConfig,
+      action,
+      DELETE_CONFIG,
+      options.rows,
+    );
   };
 
   const archiveRows = async (

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

@@ -54,6 +54,12 @@ export interface ResolvedTableView extends TableViewViewConfig {
 
 export const VIEW_URL_KEY = "view";
 const NO_VIEW = "";
+
+/**
+ * The open view as the preferences keep it: no view open is kept too, so the
+ * next visit does not fall back to the default view.
+ */
+export const keptViewId = (id: string | undefined): string => id ?? NO_VIEW;
 const VIEW_NAME_FIELD = "label";
 
 /**
@@ -128,11 +134,58 @@ export function useTableViews(options: TableViewsOptions) {
     applySnapshot(viewSnapshot(view, defaults));
   };
 
+  /**
+   * Opens a view, or, for the one already open, closes it: back to the
+   * table's own default state without a view.
+   */
+  const selectView = (id: string) =>
+    openView(id === activeViewId.value ? undefined : id);
+
+  /**
+   * Back on the view kept from the last visit. The table's state is kept
+   * apart and restored as it was left, modified or not, but the search is
+   * not kept: the view's own comes back with it.
+   */
+  const restoreKeptView = (id: string) => {
+    const view = findView(id);
+    activeViewId.value = view?.id;
+    if (view) state.globalFilter.value = view.search || undefined;
+  };
+
+  /**
+   * Opens a link followed on the table already shown as a linked arrival
+   * reads it: the view it names, else the default view, else the table's
+   * default listing state under the reader's own presentation.
+   */
+  const openLinkedView = (query: Record<string, unknown>) => {
+    const named = readTableUrlKey(query, urlScope, VIEW_URL_KEY);
+    const view = named.isCleared
+      ? undefined
+      : (findView(named.value) ?? findView(views?.defaultView));
+    if (view) return openView(view.id);
+    openDefaultListing();
+  };
+
+  /**
+   * No view open, the table's default listing state (filters, search, sort)
+   * under the reader's own presentation: what a link to no view opens.
+   */
+  const openDefaultListing = () => {
+    const snapshot = viewSnapshot(undefined, defaults);
+    activeViewId.value = undefined;
+    state.columnFilters.value = snapshot.filters.map((filter) => ({
+      ...filter,
+    }));
+    state.globalFilter.value = undefined;
+    state.sorting.value = snapshot.sorting;
+    state.pagination.value = { ...state.pagination.value, pageIndex: 0 };
+  };
+
   // Read once, on arrival: a view named by the URL wins over the state kept
   // from the last visit; a view the caller may not open falls back to the
   // default one, with a word (on the client, once mounted). The user's views
   // are kept in the browser, so a view that is not the module's is resolved
-  // once mounted.
+  // once mounted. An empty one (`?view=`) names no view.
   const urlView = readTableUrlKey(route.query, urlScope, VIEW_URL_KEY);
   const persistedViewId = preferences.get<string | undefined>(
     "activeView",
@@ -141,7 +194,9 @@ export function useTableViews(options: TableViewsOptions) {
   let isUrlViewUnavailable = false;
   let isUrlViewPending = false;
   let isOpenedOnArrival = false;
-  if (urlView.value && findView(urlView.value)) {
+  if (urlView.isCleared) {
+    openDefaultListing();
+  } else if (urlView.value && findView(urlView.value)) {
     openView(urlView.value);
     isOpenedOnArrival = true;
   } else if (urlView.value) {
@@ -150,7 +205,7 @@ export function useTableViews(options: TableViewsOptions) {
     if (views?.defaultView) openView(views.defaultView);
     isOpenedOnArrival = !!views?.defaultView;
   } else {
-    activeViewId.value = findView(persistedViewId)?.id;
+    restoreKeptView(persistedViewId);
   }
 
   // The browser-only state (order, density) is restored over the view opened
@@ -168,7 +223,7 @@ export function useTableViews(options: TableViewsOptions) {
     } else if (isOpenedOnArrival) {
       reapplyBrowserState();
     } else if (persistedViewId && !activeViewId.value) {
-      activeViewId.value = findView(persistedViewId)?.id;
+      restoreKeptView(persistedViewId);
     }
   };
 
@@ -189,7 +244,11 @@ export function useTableViews(options: TableViewsOptions) {
   });
 
   watch(activeViewId, (id) => {
-    preferences.set<string | undefined>("activeView", id ?? NO_VIEW, undefined);
+    preferences.set<string | undefined>(
+      "activeView",
+      keptViewId(id),
+      undefined,
+    );
   });
 
   const isModified = computed(() => {
@@ -265,11 +324,26 @@ export function useTableViews(options: TableViewsOptions) {
     activeViewId.value = view.id;
   };
 
-  /** Deletes one of the user's views; the table keeps its state. */
-  const deleteView = (id: string) => {
-    if (!findView(id)?.isUserView) return;
-    writeUserViews(storedUserViews.value.filter((view) => view.id !== id));
-    if (activeViewId.value === id) activeViewId.value = undefined;
+  /**
+   * Deletes one of the user's views, once confirmed. Deleting the open one
+   * goes back to the table's own default state: what it set (its search
+   * above all) would otherwise stay applied with no view to show it.
+   */
+  const deleteView = async (id: string) => {
+    const view = findView(id);
+    if (!view?.isUserView) return;
+    const isConfirmed = await confirm({
+      title: t("dms.table.views.delete_title"),
+      description: t("dms.table.views.delete_description", {
+        view: view.label,
+      }),
+      icon: "i-ph-trash",
+      color: "error",
+      confirmLabel: t("dms.table.views.delete"),
+    });
+    if (!isConfirmed) return;
+    writeUserViews(storedUserViews.value.filter((stored) => stored.id !== id));
+    if (activeViewId.value === id) openView(undefined);
   };
 
   return {
@@ -279,6 +353,8 @@ export function useTableViews(options: TableViewsOptions) {
     isModified,
     canSaveViews: !!views?.userViews,
     openView,
+    selectView,
+    openLinkedView,
     resetView,
     saveView,
     saveAsNewView,