@sinequa/atomic-angular 1.15.0 → 1.15.1

package/document-workspaces/i18n/de.json

@@ -33,6 +33,9 @@
     "deleteWorkspacesTitle": "{count, plural, one {{count} Arbeitsbereich löschen?} other {{count} Arbeitsbereiche löschen?}}",
     "deleteTitle": "Arbeitsbereich löschen?",
     "loadError": "Arbeitsbereiche konnten nicht geladen werden.",
+    "loadMore": "Mehr laden",
+    "loadMoreError": "Weitere Arbeitsbereiche konnten nicht geladen werden: {error}",
+    "partial": "{shown} von {total} Arbeitsbereichen angezeigt",
     "loading": "Arbeitsbereiche werden geladen…",
     "refreshError": "Arbeitsbereiche konnten nicht aktualisiert werden: {error}",
     "roleOwner": "Eigentümer",

package/document-workspaces/i18n/en.json

@@ -33,6 +33,9 @@
     "deleteWorkspacesTitle": "{count, plural, one {Delete {count} workspace?} other {Delete {count} workspaces?}}",
     "deleteTitle": "Delete workspace?",
     "loadError": "Couldn’t load workspaces.",
+    "loadMore": "Load more",
+    "loadMoreError": "Couldn’t load more workspaces: {error}",
+    "partial": "{shown} of {total} workspaces shown",
     "loading": "Loading workspaces…",
     "refreshError": "Couldn’t refresh workspaces: {error}",
     "roleOwner": "Owner",

package/document-workspaces/i18n/fr.json

@@ -33,6 +33,9 @@
     "deleteWorkspacesTitle": "{count, plural, one {Supprimer {count} espace de travail ?} many {Supprimer {count} espaces de travail ?} other {Supprimer {count} espaces de travail ?}}",
     "deleteTitle": "Supprimer l’espace de travail ?",
     "loadError": "Impossible de charger les espaces de travail.",
+    "loadMore": "Charger plus",
+    "loadMoreError": "Impossible de charger d’autres espaces de travail : {error}",
+    "partial": "{shown} espaces de travail affichés sur {total}",
     "loading": "Chargement des espaces de travail…",
     "refreshError": "Impossible d’actualiser les espaces de travail : {error}",
     "roleOwner": "Propriétaire",

package/document-workspaces/i18n/ja.json

@@ -33,6 +33,9 @@
     "deleteWorkspacesTitle": "{count, plural, other {{count} 件のワークスペースを削除しますか?}}",
     "deleteTitle": "ワークスペースを削除しますか?",
     "loadError": "ワークスペースを読み込めませんでした。",
+    "loadMore": "さらに読み込む",
+    "loadMoreError": "ワークスペースをさらに読み込めませんでした: {error}",
+    "partial": "{total} 件中 {shown} 件のワークスペースを表示",
     "loading": "ワークスペースを読み込んでいます…",
     "refreshError": "ワークスペースを更新できませんでした: {error}",
     "roleOwner": "所有者",

package/document-workspaces/index.d.ts

@@ -198,6 +198,7 @@ declare const WorkspacesStore: _angular_core.Type<{
     documentPagination: _angular_core.Signal<Record<string, Pagination>>;
     selectedIds: _angular_core.Signal<string[]>;
     hasMore: _angular_core.Signal<boolean>;
+    truncated: _angular_core.Signal<boolean>;
     selectedCount: _angular_core.Signal<number>;
     selectedIdSet: _angular_core.Signal<Set<string>>;
     workspace: (id: string) => Workspace | undefined;
@@ -883,6 +884,7 @@ declare class WorkspaceList {
         documentPagination: _angular_core.Signal<Record<string, _sinequa_atomic_angular_document_workspaces.Pagination>>;
         selectedIds: _angular_core.Signal<string[]>;
         hasMore: _angular_core.Signal<boolean>;
+        truncated: _angular_core.Signal<boolean>;
         selectedCount: _angular_core.Signal<number>;
         selectedIdSet: _angular_core.Signal<Set<string>>;
         workspace: (id: string) => Workspace | undefined;
@@ -924,6 +926,8 @@ declare class WorkspaceList {
     protected readonly status: _angular_core.WritableSignal<"error" | "loading" | "ready">;
     protected readonly loadError: _angular_core.WritableSignal<Message | null>;
     protected readonly refreshError: _angular_core.WritableSignal<string | null>;
+    protected readonly loadingMore: _angular_core.WritableSignal<boolean>;
+    protected readonly loadMoreError: _angular_core.WritableSignal<string | null>;
     protected readonly filter: {
         tab: _angular_core.WritableSignal<WorkspaceTab>;
         query: _angular_core.WritableSignal<string>;
@@ -936,6 +940,7 @@ declare class WorkspaceList {
     /** Shows what is cached at once and refreshes behind it, or loads for the first time. */
     protected load(): Promise<void>;
     private refresh;
+    protected loadMore(): Promise<void>;
     protected onSearch(event: Event): void;
     protected deleteSelected(): void;
     /**
@@ -1894,7 +1899,7 @@ declare class UploadTracker {
     /** What the strip of a minimized panel shows, which is not always what it should: a change swaps it. */
     protected readonly peekShown: _angular_core.WritableSignal<Message>;
     protected readonly peekTone: _angular_core.WritableSignal<"error" | "success" | null>;
-    protected readonly peekSwap: _angular_core.WritableSignal<"shown" | "hidden" | "below">;
+    protected readonly peekSwap: _angular_core.WritableSignal<"hidden" | "shown" | "below">;
     private peekKey;
     private hoverTimer;
     private readonly timers;

package/fesm2022/sinequa-atomic-angular-document-workspaces.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { computed, signal, Injectable, InjectionToken, inject, DestroyRef, assertInInjectionContext, effect, untracked, output, input, booleanAttribute, Directive, model, Pipe, viewChild, ChangeDetectionStrategy, Component, ElementRef, ViewEncapsulation } from '@angular/core';
 import { withDevtools } from '@angular-architects/ngrx-toolkit';
 import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
-import { listContainers, addContainerDocuments, deleteContainerDocuments, listContainerDocuments, deleteContainers, updateContainer, createContainer, getContainer, fetchPrincipal, globalConfig, tryAutoAuthentication, createHeaders, onAuthEvent, ApiError, fetchUploadStatus, searchPrincipals, fetchPrincipalsByIds, fetchPreview } from '@sinequa/atomic';
+import { listContainerDocuments, listContainers, addContainerDocuments, deleteContainerDocuments, deleteContainers, updateContainer, createContainer, getContainer, fetchPrincipal, globalConfig, tryAutoAuthentication, createHeaders, onAuthEvent, ApiError, fetchUploadStatus, searchPrincipals, fetchPrincipalsByIds, fetchPreview } from '@sinequa/atomic';
 import { Upload } from 'tus-js-client';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { TranslocoService, TranslocoPipe, provideTranslocoScope } from '@jsverse/transloco';
@@ -102,6 +102,11 @@ function mapContainerDocumentToWorkspaceDocument(dto) {
 
 /** API maximum page size. */
 const PAGE_SIZE = 100;
+/**
+ * Most workspaces the list keeps loaded: "load more" stops there, so the list never puts an
+ * unbounded number of cards in the DOM. Past it, {@link WorkspacesStore.truncated} is true.
+ */
+const MAX_LOADED_WORKSPACES = 3 * PAGE_SIZE;
 const initialState$1 = {
     workspaces: [],
     loaded: false,
@@ -131,19 +136,56 @@ function withDocumentCountAdjusted(workspaces, id, delta) {
  * pre-transfer cache update.
  */
 const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Workspaces"), withState(initialState$1), withComputed(({ workspaces, pagination, selectedIds }) => ({
-    hasMore: computed(() => workspaces().length < pagination().total),
+    hasMore: computed(() => workspaces().length < pagination().total && workspaces().length < MAX_LOADED_WORKSPACES),
+    /** The server holds more workspaces than the list is allowed to load. */
+    truncated: computed(() => workspaces().length < pagination().total && workspaces().length >= MAX_LOADED_WORKSPACES),
     selectedCount: computed(() => selectedIds().length),
     selectedIdSet: computed(() => new Set(selectedIds()))
 })), withMethods(store => {
     let loadingPromise = null;
+    let loadingMorePromise = null;
     const setDocuments = (workspaceId, documents) => {
         patchState(store, state => ({ documents: { ...state.documents, [workspaceId]: documents } }));
     };
     // Counts are moved by a delta rather than reset to the cached list's length:
     // the cache holds at most the pages loaded so far, while `documentCount` is
     // the server's total.
+    // The same goes for the documents' pagination total, which `hasMoreDocuments` compares
+    // to the cached list: left as it was loaded, a workspace emptied of its documents would
+    // still offer to load more.
     const adjustDocumentCount = (workspaceId, delta) => {
-        patchState(store, state => ({ workspaces: withDocumentCountAdjusted(state.workspaces, workspaceId, delta) }));
+        patchState(store, state => {
+            const pagination = state.documentPagination[workspaceId];
+            return {
+                workspaces: withDocumentCountAdjusted(state.workspaces, workspaceId, delta),
+                documentPagination: pagination
+                    ? { ...state.documentPagination, [workspaceId]: { ...pagination, total: Math.max(0, pagination.total + delta) } }
+                    : state.documentPagination
+            };
+        });
+    };
+    const loadDocuments = async (workspaceId) => {
+        const res = await listContainerDocuments(workspaceId, { page: 1, pageSize: PAGE_SIZE });
+        const documents = res.documents.map(mapContainerDocumentToWorkspaceDocument);
+        patchState(store, state => ({
+            documentPagination: { ...state.documentPagination, [workspaceId]: { page: res.page, total: res.total } }
+        }));
+        setDocuments(workspaceId, documents);
+        return documents;
+    };
+    // Deleting everything that was loaded does not mean the workspace is empty: the server may hold
+    // pages that were never loaded. Show them rather than an empty state next to a "load more".
+    // The deletion already succeeded, so a failed refill is not an error here: the cache stays empty
+    // and "load more" (which then asks for the first page) lets the user retry.
+    const refillIfEmptied = async (workspaceId) => {
+        if ((store.documents()[workspaceId] ?? []).length || !(store.documentPagination()[workspaceId]?.total ?? 0))
+            return;
+        try {
+            await loadDocuments(workspaceId);
+        }
+        catch {
+            // see above
+        }
     };
     const load = async () => {
         patchState(store, { loading: true });
@@ -194,15 +236,30 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
             loadingPromise ??= load();
             return loadingPromise;
         },
-        async loadMore() {
+        /** Shares an in-flight call, so a double click does not fetch (and append) the same page twice. */
+        loadMore() {
             if (!store.hasMore())
-                return store.workspaces();
-            const res = await listContainers({ page: store.pagination().page + 1, pageSize: PAGE_SIZE });
-            patchState(store, state => ({
-                workspaces: [...state.workspaces, ...res.containers.map(mapContainerToWorkspace)],
-                pagination: { page: res.page, total: res.total }
-            }));
-            return store.workspaces();
+                return Promise.resolve(store.workspaces());
+            loadingMorePromise ??= (async () => {
+                try {
+                    const current = store.workspaces();
+                    // Deleting workspaces shifts the server's pages: `page + 1` would skip as many as were
+                    // deleted since. Ask for the page holding the first one not loaded yet (it may overlap
+                    // the loaded tail, hence the dedup).
+                    const page = Math.min(store.pagination().page + 1, Math.floor(current.length / PAGE_SIZE) + 1);
+                    const res = await listContainers({ page, pageSize: PAGE_SIZE });
+                    patchState(store, state => {
+                        const loaded = new Set(state.workspaces.map(w => w.id));
+                        const fresh = res.containers.map(mapContainerToWorkspace).filter(w => !loaded.has(w.id));
+                        return { workspaces: [...state.workspaces, ...fresh], pagination: { page: res.page, total: res.total } };
+                    });
+                    return store.workspaces();
+                }
+                finally {
+                    loadingMorePromise = null;
+                }
+            })();
+            return loadingMorePromise;
         },
         /**
          * Fallback for a deep link opened before the list was loaded, or for an id
@@ -220,6 +277,8 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
             const workspace = mapContainerToWorkspace(await createContainer({ name, description, tags, owners, readers }));
             patchState(store, state => ({
                 workspaces: [...state.workspaces, workspace],
+                // The server's total grew by one too: left alone, a full list would offer to load a phantom workspace.
+                pagination: { ...state.pagination, total: state.pagination.total + 1 },
                 documents: { ...state.documents, [workspace.id]: [] }
             }));
             return workspace;
@@ -248,28 +307,28 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
             const succeeded = new Set(result.succeeded);
             patchState(store, state => ({
                 workspaces: state.workspaces.filter(w => !succeeded.has(w.id)),
+                // Followed like the documents' total: an emptied list must not offer to load more.
+                pagination: { ...state.pagination, total: Math.max(0, state.pagination.total - result.succeeded.length) },
                 documents: Object.fromEntries(Object.entries(state.documents).filter(([id]) => !succeeded.has(id))),
                 selectedIds: state.selectedIds.filter(id => !succeeded.has(id))
             }));
             return { succeeded: result.succeeded, failed: result.failed.map(f => ({ id: f.containerId, error: f.error })) };
         },
-        async loadDocuments(workspaceId) {
-            const res = await listContainerDocuments(workspaceId, { page: 1, pageSize: PAGE_SIZE });
-            const documents = res.documents.map(mapContainerDocumentToWorkspaceDocument);
-            patchState(store, state => ({
-                documentPagination: { ...state.documentPagination, [workspaceId]: { page: res.page, total: res.total } }
-            }));
-            setDocuments(workspaceId, documents);
-            return documents;
-        },
+        loadDocuments,
         /** Without this, a workspace with more than one page of documents is silently truncated. */
         async loadMoreDocuments(workspaceId) {
             const current = store.documents()[workspaceId] ?? [];
             const pagination = store.documentPagination()[workspaceId];
             if (!pagination || current.length >= pagination.total)
                 return current;
-            const res = await listContainerDocuments(workspaceId, { page: pagination.page + 1, pageSize: PAGE_SIZE });
-            const merged = [...current, ...res.documents.map(mapContainerDocumentToWorkspaceDocument)];
+            // Deleting documents shifts the server's pages: `pagination.page + 1` would skip as many
+            // documents as were deleted since. Ask for the page holding the first one not loaded yet
+            // (it may overlap the loaded tail, hence the dedup).
+            const page = Math.min(pagination.page + 1, Math.floor(current.length / PAGE_SIZE) + 1);
+            const res = await listContainerDocuments(workspaceId, { page, pageSize: PAGE_SIZE });
+            const loaded = new Set(current.map(d => d.id));
+            const fresh = res.documents.map(mapContainerDocumentToWorkspaceDocument).filter(d => !loaded.has(d.id));
+            const merged = [...current, ...fresh];
             patchState(store, state => ({
                 documentPagination: { ...state.documentPagination, [workspaceId]: { page: res.page, total: res.total } }
             }));
@@ -322,6 +381,7 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
             const after = before.filter(d => !documentIds.includes(d.id));
             setDocuments(workspaceId, after);
             adjustDocumentCount(workspaceId, after.length - before.length);
+            await refillIfEmptied(workspaceId);
         },
         /**
          * "Move to workspace". There is no dedicated re-parent endpoint, so this
@@ -341,6 +401,7 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
             const remaining = from.filter(d => !documentIds.includes(d.id));
             setDocuments(fromWorkspaceId, remaining);
             adjustDocumentCount(fromWorkspaceId, remaining.length - from.length);
+            await refillIfEmptied(fromWorkspaceId);
         },
         toggleSelected(id, checked) {
             patchState(store, state => {
@@ -3017,6 +3078,8 @@ class WorkspaceList {
     status = signal("loading", ...(ngDevMode ? [{ debugName: "status" }] : []));
     loadError = signal(null, ...(ngDevMode ? [{ debugName: "loadError" }] : []));
     refreshError = signal(null, ...(ngDevMode ? [{ debugName: "refreshError" }] : []));
+    loadingMore = signal(false, ...(ngDevMode ? [{ debugName: "loadingMore" }] : []));
+    loadMoreError = signal(null, ...(ngDevMode ? [{ debugName: "loadMoreError" }] : []));
     filter = injectWorkspaceFilter(this.store.workspaces);
     // A workspace shared read-only cannot be deleted: it is not offered for selection either, so the
     // count, "select all" and the Delete button never include one.
@@ -3057,6 +3120,21 @@ class WorkspaceList {
             this.refreshError.set(this.translate(workspaceErrorMessage(error)));
         }
     }
+    async loadMore() {
+        if (this.loadingMore())
+            return;
+        this.loadMoreError.set(null);
+        this.loadingMore.set(true);
+        try {
+            await this.store.loadMore();
+        }
+        catch (error) {
+            this.loadMoreError.set(this.translate(workspaceErrorMessage(error)));
+        }
+        finally {
+            this.loadingMore.set(false);
+        }
+    }
     onSearch(event) {
         this.filter.query.set(event.target.value);
     }
@@ -3101,7 +3179,7 @@ class WorkspaceList {
         return "key" in message ? this.transloco.translate(message.key, message.params) : message.text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: WorkspaceList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: WorkspaceList, isStandalone: true, selector: "workspace-list", outputs: { opened: "opened", createRequested: "createRequested" }, host: { classAttribute: "@container flex h-full min-h-0 flex-col p-3 pb-2 md:p-8 md:pb-4" }, providers: [provideTranslocoScope("document-workspaces")], ngImport: i0, template: "\n    <div class=\"mb-1 flex items-center justify-between gap-4\">\n      <h1 class=\"text-2xl leading-[31px] font-bold text-(--font-neutral-black)\">{{ \"documentWorkspaces.list.title\" | transloco }}</h1>\n      <button size=\"sm\" variant=\"primary\" class=\"gap-1.5 rounded-full\" (click)=\"createRequested.emit()\">\n        <plus-icon />\n        {{ \"documentWorkspaces.list.addWorkspace\" | transloco }}\n      </button>\n    </div>\n    <p class=\"mb-6 text-base text-(--font-primary-base)\">{{ \"documentWorkspaces.list.subtitle\" | transloco }}</p>\n\n    <div role=\"tablist\" class=\"mb-3 flex w-fit max-w-full overflow-x-auto border-b border-(--stroke-primary-lighter)\">\n      @for (item of tabs; track item.tab) {\n        <button\n          variant=\"none\"\n          role=\"tab\"\n          type=\"button\"\n          class=\"flex h-11 items-center gap-1 rounded-t-lg border-b-2 border-transparent px-3 text-sm font-semibold whitespace-nowrap text-(--font-primary-base) hover:bg-(--bg-primary-lightest) aria-selected:border-(--stroke-primary-base) aria-selected:bg-(--bg-neutral-white)\"\n          [attr.aria-selected]=\"filter.tab() === item.tab\"\n          (click)=\"filter.tab.set(item.tab)\">\n          @switch (item.tab) {\n            @case (\"editor\") {\n              <user-icon class=\"size-4\" />\n            }\n            @case (\"reader\") {\n              <user-round-icon class=\"size-4\" />\n            }\n          }\n          {{ item.labelKey | transloco }}\n          <span\n            class=\"inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-(--bg-primary-light) px-1 text-[10px] leading-[10px] font-semibold\"\n            [attr.data-testid]=\"'badge-' + item.tab\"\n            >{{ filter.counts()[item.tab] }}</span\n          >\n        </button>\n      }\n    </div>\n\n    <div class=\"mb-6 flex flex-wrap items-center gap-2\">\n      <div role=\"group\" class=\"inline-flex gap-1 rounded-full bg-(--bg-primary-lighter) p-0.5\">\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'grid'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.gridView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.gridView' | transloco\"\n          (click)=\"viewMode.set('grid')\">\n          <grid-icon class=\"size-3.5\" />\n        </button>\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'list'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.listView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.listView' | transloco\"\n          (click)=\"viewMode.set('list')\">\n          <list-icon class=\"size-3.5\" />\n        </button>\n      </div>\n\n      <div\n        role=\"search\"\n        class=\"flex h-9 min-w-32 flex-[0_1_15rem] items-center gap-2 rounded-full border border-(--stroke-primary-light) bg-(--bg-neutral-white) px-3 focus-within:border-(--stroke-primary-base)\">\n        <magnifying-glass-icon class=\"size-4 shrink-0 text-(--font-primary-muted)\" />\n        <input\n          type=\"text\"\n          class=\"min-w-0 flex-1 bg-transparent text-xs text-(--font-neutral-black) outline-none placeholder:text-(--font-primary-muted)\"\n          [value]=\"filter.query()\"\n          [attr.placeholder]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n          [attr.aria-label]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n          (input)=\"onSearch($event)\" />\n        @if (filter.query()) {\n          <button variant=\"none\" type=\"button\" class=\"inline-flex\" [attr.aria-label]=\"'documentWorkspaces.common.clearSearch' | transloco\" (click)=\"filter.clearQuery()\">\n            <x-mark-icon class=\"size-4\" />\n          </button>\n        }\n      </div>\n\n      @if (selection.selectableItems().length) {\n        @if (selection.active()) {\n          <div class=\"ml-auto flex items-center gap-2 @max-xl:order-last @max-xl:ml-0 @max-xl:basis-full\" data-testid=\"selection-bar\">\n            <span class=\"text-sm text-(--font-primary-base)\" aria-live=\"polite\">{{ \"documentWorkspaces.list.selectedCount\" | transloco: { count: selection.count() } }}</span>\n            <button variant=\"ghost\" size=\"xs\" (click)=\"selection.toggleAll()\">\n              {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n            </button>\n            <button class=\"gap-1.5 text-(--font-error-base) hover:bg-(--bg-error-lightest)\" variant=\"ghost\" size=\"xs\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n              <trash-icon />\n              {{ \"documentWorkspaces.common.delete\" | transloco }}\n            </button>\n          </div>\n        }\n        <button variant=\"ghost\" size=\"xs\" class=\"@max-xl:ml-auto\" [class.ml-auto]=\"!selection.active()\" (click)=\"selection.toggleMode()\">\n          {{ (selection.active() ? \"documentWorkspaces.common.cancel\" : \"documentWorkspaces.common.select\") | transloco }}\n        </button>\n      }\n    </div>\n\n    @if (refreshError(); as message) {\n      <p role=\"alert\" class=\"text-sm text-(--font-error-base)\">{{ \"documentWorkspaces.list.refreshError\" | transloco: { error: message } }}</p>\n    }\n\n    <!-- Only the workspaces scroll: the title, the tabs and the toolbar stay in place. -->\n    <div class=\"min-h-0 flex-1 overflow-y-auto\">\n    @switch (status()) {\n      @case (\"loading\") {\n        <p class=\"text-sm text-(--font-primary-muted)\">{{ \"documentWorkspaces.list.loading\" | transloco }}</p>\n      }\n      @case (\"error\") {\n        <div class=\"flex items-center gap-3 text-sm\" data-testid=\"load-error\">\n          <span class=\"text-(--font-error-base)\">\n            @if (loadError(); as message) {\n              <workspace-message [message]=\"message\" />\n            } @else {\n              {{ \"documentWorkspaces.list.loadError\" | transloco }}\n            }\n          </span>\n          <button variant=\"secondary\" size=\"xs\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n        </div>\n      }\n      @default {\n        @if (!filter.filtered().length) {\n          <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"empty\">\n            <!-- The illustration is for a list with nothing in it, not for a search that found nothing. -->\n            @if (!store.workspaces().length) {\n              <empty-folder-icon />\n            }\n            <p class=\"text-sm text-(--font-primary-muted)\">\n              {{ (store.workspaces().length ? \"documentWorkspaces.list.noMatch\" : \"documentWorkspaces.list.empty\") | transloco }}\n            </p>\n          </div>\n        } @else if (viewMode() === \"grid\") {\n          <div class=\"grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] content-start gap-4 pb-8\">\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-card\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        } @else {\n          <div role=\"table\" class=\"flex flex-col gap-3 pb-8\">\n            <div role=\"row\" [attr.data-selecting]=\"selection.active() ? '' : null\" class=\"grid grid-cols-[minmax(0,1fr)_auto_auto_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_auto_2.5rem] @xl:grid-cols-[minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @xl:data-selecting:grid-cols-[2rem_minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] py-1 text-xs font-semibold text-(--font-primary-muted)\">\n              @if (selection.active()) {\n                <div role=\"columnheader\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"accent-(--bg-primary-base) size-4\"\n                    [checked]=\"selection.allSelected()\"\n                    [indeterminate]=\"selection.partiallySelected()\"\n                    [attr.aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                    (change)=\"selection.toggleAll()\" />\n\n                </div>\n              }\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnName\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnContent\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnOwner\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @xl:block\">{{ \"documentWorkspaces.list.columnDateUpdated\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @3xl:block\">{{ \"documentWorkspaces.list.columnTags\" | transloco }}</div>\n              <div role=\"columnheader\"></div>\n            </div>\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-row\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        }\n      }\n    }\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: EmptyFolderIcon, selector: "empty-folder-icon" }, { kind: "component", type: GridIcon, selector: "grid-icon", inputs: ["class"] }, { kind: "component", type: ListIcon, selector: "list-icon, ListIcon", inputs: ["class"] }, { kind: "component", type: MagnifyingGlassIcon, selector: "magnifying-glass-icon, MagnifyingGlassIcon", inputs: ["class"] }, { kind: "component", type: PlusIcon, selector: "plus-icon, PlusIcon", inputs: ["class"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "strategy", "tooltip-position", "tooltip-delay", "tooltip-duration", "tooltip-offset"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: UserRoundIcon, selector: "user-round, UserRound, userround, user-round-icon, UserRoundIcon, userroundicon", inputs: ["class"] }, { kind: "component", type: WorkspaceCard, selector: "workspace-card", inputs: ["workspace", "query", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { kind: "component", type: WorkspaceMessage, selector: "workspace-message", inputs: ["message"] }, { kind: "component", type: WorkspaceRow, selector: "workspace-row", inputs: ["workspace", "query", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: WorkspaceList, isStandalone: true, selector: "workspace-list", outputs: { opened: "opened", createRequested: "createRequested" }, host: { classAttribute: "@container flex h-full min-h-0 flex-col p-3 pb-2 md:p-8 md:pb-4" }, providers: [provideTranslocoScope("document-workspaces")], ngImport: i0, template: "\n    <div class=\"mb-1 flex items-center justify-between gap-4\">\n      <h1 class=\"text-2xl leading-[31px] font-bold text-(--font-neutral-black)\">{{ \"documentWorkspaces.list.title\" | transloco }}</h1>\n      <button size=\"sm\" variant=\"primary\" class=\"gap-1.5 rounded-full\" (click)=\"createRequested.emit()\">\n        <plus-icon />\n        {{ \"documentWorkspaces.list.addWorkspace\" | transloco }}\n      </button>\n    </div>\n    <p class=\"mb-6 text-base text-(--font-primary-base)\">{{ \"documentWorkspaces.list.subtitle\" | transloco }}</p>\n\n    <div role=\"tablist\" class=\"mb-3 flex w-fit max-w-full overflow-x-auto border-b border-(--stroke-primary-lighter)\">\n      @for (item of tabs; track item.tab) {\n        <button\n          variant=\"none\"\n          role=\"tab\"\n          type=\"button\"\n          class=\"flex h-11 items-center gap-1 rounded-t-lg border-b-2 border-transparent px-3 text-sm font-semibold whitespace-nowrap text-(--font-primary-base) hover:bg-(--bg-primary-lightest) aria-selected:border-(--stroke-primary-base) aria-selected:bg-(--bg-neutral-white)\"\n          [attr.aria-selected]=\"filter.tab() === item.tab\"\n          (click)=\"filter.tab.set(item.tab)\">\n          @switch (item.tab) {\n            @case (\"editor\") {\n              <user-icon class=\"size-4\" />\n            }\n            @case (\"reader\") {\n              <user-round-icon class=\"size-4\" />\n            }\n          }\n          {{ item.labelKey | transloco }}\n          <span\n            class=\"inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-(--bg-primary-light) px-1 text-[10px] leading-[10px] font-semibold\"\n            [attr.data-testid]=\"'badge-' + item.tab\"\n            >{{ filter.counts()[item.tab] }}</span\n          >\n        </button>\n      }\n    </div>\n\n    <div class=\"mb-6 flex flex-wrap items-center gap-2\">\n      <div role=\"group\" class=\"inline-flex gap-1 rounded-full bg-(--bg-primary-lighter) p-0.5\">\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'grid'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.gridView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.gridView' | transloco\"\n          (click)=\"viewMode.set('grid')\">\n          <grid-icon class=\"size-3.5\" />\n        </button>\n        <button\n          variant=\"none\"\n          class=\"inline-flex size-6 items-center justify-center rounded-full text-(--font-primary-base) aria-pressed:bg-(--bg-neutral-white) aria-pressed:shadow-md\"\n          [attr.aria-pressed]=\"viewMode() === 'list'\"\n          [attr.aria-label]=\"'documentWorkspaces.common.listView' | transloco\"\n          [tooltip]=\"'documentWorkspaces.common.listView' | transloco\"\n          (click)=\"viewMode.set('list')\">\n          <list-icon class=\"size-3.5\" />\n        </button>\n      </div>\n\n      <div\n        role=\"search\"\n        class=\"flex h-9 min-w-32 flex-[0_1_15rem] items-center gap-2 rounded-full border border-(--stroke-primary-light) bg-(--bg-neutral-white) px-3 focus-within:border-(--stroke-primary-base)\">\n        <magnifying-glass-icon class=\"size-4 shrink-0 text-(--font-primary-muted)\" />\n        <input\n          type=\"text\"\n          class=\"min-w-0 flex-1 bg-transparent text-xs text-(--font-neutral-black) outline-none placeholder:text-(--font-primary-muted)\"\n          [value]=\"filter.query()\"\n          [attr.placeholder]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n          [attr.aria-label]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n          (input)=\"onSearch($event)\" />\n        @if (filter.query()) {\n          <button variant=\"none\" type=\"button\" class=\"inline-flex\" [attr.aria-label]=\"'documentWorkspaces.common.clearSearch' | transloco\" (click)=\"filter.clearQuery()\">\n            <x-mark-icon class=\"size-4\" />\n          </button>\n        }\n      </div>\n\n      @if (selection.selectableItems().length) {\n        @if (selection.active()) {\n          <div class=\"ml-auto flex items-center gap-2 @max-xl:order-last @max-xl:ml-0 @max-xl:basis-full\" data-testid=\"selection-bar\">\n            <span class=\"text-sm text-(--font-primary-base)\" aria-live=\"polite\">{{ \"documentWorkspaces.list.selectedCount\" | transloco: { count: selection.count() } }}</span>\n            <button variant=\"ghost\" size=\"xs\" (click)=\"selection.toggleAll()\">\n              {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n            </button>\n            <button class=\"gap-1.5 text-(--font-error-base) hover:bg-(--bg-error-lightest)\" variant=\"ghost\" size=\"xs\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n              <trash-icon />\n              {{ \"documentWorkspaces.common.delete\" | transloco }}\n            </button>\n          </div>\n        }\n        <button variant=\"ghost\" size=\"xs\" class=\"@max-xl:ml-auto\" [class.ml-auto]=\"!selection.active()\" (click)=\"selection.toggleMode()\">\n          {{ (selection.active() ? \"documentWorkspaces.common.cancel\" : \"documentWorkspaces.common.select\") | transloco }}\n        </button>\n      }\n    </div>\n\n    @if (refreshError(); as message) {\n      <p role=\"alert\" class=\"text-sm text-(--font-error-base)\">{{ \"documentWorkspaces.list.refreshError\" | transloco: { error: message } }}</p>\n    }\n\n    <!-- Only the workspaces scroll: the title, the tabs and the toolbar stay in place. -->\n    <div class=\"min-h-0 flex-1 overflow-y-auto\">\n    @switch (status()) {\n      @case (\"loading\") {\n        <p class=\"text-sm text-(--font-primary-muted)\">{{ \"documentWorkspaces.list.loading\" | transloco }}</p>\n      }\n      @case (\"error\") {\n        <div class=\"flex items-center gap-3 text-sm\" data-testid=\"load-error\">\n          <span class=\"text-(--font-error-base)\">\n            @if (loadError(); as message) {\n              <workspace-message [message]=\"message\" />\n            } @else {\n              {{ \"documentWorkspaces.list.loadError\" | transloco }}\n            }\n          </span>\n          <button variant=\"secondary\" size=\"xs\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n        </div>\n      }\n      @default {\n        @if (!filter.filtered().length) {\n          <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"empty\">\n            <!-- The illustration is for a list with nothing in it, not for a search that found nothing. -->\n            @if (!store.workspaces().length) {\n              <empty-folder-icon />\n            }\n            <p class=\"text-sm text-(--font-primary-muted)\">\n              {{ (store.workspaces().length ? \"documentWorkspaces.list.noMatch\" : \"documentWorkspaces.list.empty\") | transloco }}\n            </p>\n          </div>\n        } @else if (viewMode() === \"grid\") {\n          <div class=\"grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] content-start gap-4 pb-8\">\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-card\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        } @else {\n          <div role=\"table\" class=\"flex flex-col gap-3 pb-8\">\n            <div role=\"row\" [attr.data-selecting]=\"selection.active() ? '' : null\" class=\"grid grid-cols-[minmax(0,1fr)_auto_auto_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_auto_2.5rem] @xl:grid-cols-[minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @xl:data-selecting:grid-cols-[2rem_minmax(0,1fr)_4.5rem_6.5rem_6.5rem_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_5.5rem_7.5rem_9rem_minmax(5rem,1fr)_2.5rem] py-1 text-xs font-semibold text-(--font-primary-muted)\">\n              @if (selection.active()) {\n                <div role=\"columnheader\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"accent-(--bg-primary-base) size-4\"\n                    [checked]=\"selection.allSelected()\"\n                    [indeterminate]=\"selection.partiallySelected()\"\n                    [attr.aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                    (change)=\"selection.toggleAll()\" />\n\n                </div>\n              }\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnName\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnContent\" | transloco }}</div>\n              <div role=\"columnheader\">{{ \"documentWorkspaces.list.columnOwner\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @xl:block\">{{ \"documentWorkspaces.list.columnDateUpdated\" | transloco }}</div>\n              <div role=\"columnheader\" class=\"hidden @3xl:block\">{{ \"documentWorkspaces.list.columnTags\" | transloco }}</div>\n              <div role=\"columnheader\"></div>\n            </div>\n            @for (workspace of filter.filtered(); track workspace.id) {\n              <workspace-row\n                [workspace]=\"workspace\"\n                [query]=\"filter.query()\"\n                [selecting]=\"selection.active()\"\n                [selected]=\"selection.isSelected(workspace)\"\n                [selectable]=\"selection.canSelect(workspace)\"\n                (opened)=\"opened.emit(workspace)\"\n                (deleteRequested)=\"confirmDelete([workspace])\"\n                (selectedChange)=\"selection.toggle(workspace, $event)\" />\n            }\n          </div>\n        }\n\n        @if (store.hasMore() || store.truncated()) {\n          <div class=\"flex flex-col items-center gap-2 pb-8\" data-testid=\"load-more\">\n            <p class=\"text-sm text-(--font-primary-muted)\">\n              {{ \"documentWorkspaces.list.partial\" | transloco: { shown: store.workspaces().length, total: store.pagination().total } }}\n            </p>\n            @if (loadMoreError(); as message) {\n              <p role=\"alert\" class=\"text-sm text-(--font-error-base)\">{{ \"documentWorkspaces.list.loadMoreError\" | transloco: { error: message } }}</p>\n            }\n            @if (store.hasMore()) {\n              <button variant=\"secondary\" size=\"sm\" [disabled]=\"loadingMore()\" (click)=\"loadMore()\">\n                {{ \"documentWorkspaces.list.loadMore\" | transloco }}\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n    </div>\n  ", isInline: true, dependencies: [{ kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: EmptyFolderIcon, selector: "empty-folder-icon" }, { kind: "component", type: GridIcon, selector: "grid-icon", inputs: ["class"] }, { kind: "component", type: ListIcon, selector: "list-icon, ListIcon", inputs: ["class"] }, { kind: "component", type: MagnifyingGlassIcon, selector: "magnifying-glass-icon, MagnifyingGlassIcon", inputs: ["class"] }, { kind: "component", type: PlusIcon, selector: "plus-icon, PlusIcon", inputs: ["class"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "strategy", "tooltip-position", "tooltip-delay", "tooltip-duration", "tooltip-offset"] }, { kind: "component", type: TrashIcon, selector: "trash-icon, TrashIcon", inputs: ["class"] }, { kind: "component", type: UserIcon, selector: "user-icon, UserIcon", inputs: ["class"] }, { kind: "component", type: UserRoundIcon, selector: "user-round, UserRound, userround, user-round-icon, UserRoundIcon, userroundicon", inputs: ["class"] }, { kind: "component", type: WorkspaceCard, selector: "workspace-card", inputs: ["workspace", "query", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { kind: "component", type: WorkspaceMessage, selector: "workspace-message", inputs: ["message"] }, { kind: "component", type: WorkspaceRow, selector: "workspace-row", inputs: ["workspace", "query", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { kind: "component", type: XMarkIcon, selector: "XMarkIcon, xmark-icon, x-mark-icon", inputs: ["class"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: WorkspaceList, decorators: [{
             type: Component,
@@ -3305,6 +3383,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
             }
           </div>
         }
+
+        @if (store.hasMore() || store.truncated()) {
+          <div class="flex flex-col items-center gap-2 pb-8" data-testid="load-more">
+            <p class="text-sm text-(--font-primary-muted)">
+              {{ "documentWorkspaces.list.partial" | transloco: { shown: store.workspaces().length, total: store.pagination().total } }}
+            </p>
+            @if (loadMoreError(); as message) {
+              <p role="alert" class="text-sm text-(--font-error-base)">{{ "documentWorkspaces.list.loadMoreError" | transloco: { error: message } }}</p>
+            }
+            @if (store.hasMore()) {
+              <button variant="secondary" size="sm" [disabled]="loadingMore()" (click)="loadMore()">
+                {{ "documentWorkspaces.list.loadMore" | transloco }}
+              </button>
+            }
+          </div>
+        }
       }
     }
     </div>