@sinequa/atomic-angular 1.15.0 → 1.16.0

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

@@ -2,12 +2,12 @@ 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';
 import { Temporal } from 'temporal-polyfill';
-import { DialogComponent, ButtonComponent, DialogContentComponent, DialogFooterComponent, DialogTitleComponent, FolderIcon, UserIcon, UserRoundIcon, FileIcon, TooltipDirective, TrashIcon, DialogService, ListIcon, MagnifyingGlassIcon, PlusIcon, XMarkIcon, FileSpreadsheetIcon, FileTextIcon, UploadIcon, DialogHeaderComponent, ChatPlusIcon, ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, EyeIcon, KeyIcon, MenuComponent, MenuContentComponent, MenuItemComponent, PenToSquareIcon, RefreshIcon, TagIcon, CheckIcon, CircleXIcon, SyncIcon } from '@sinequa/ui';
+import { DialogComponent, ButtonComponent, DialogContentComponent, DialogFooterComponent, DialogTitleComponent, FolderIcon, UserIcon, UserRoundIcon, FileIcon, TooltipDirective, TrashIcon, DialogService, ListIcon, MagnifyingGlassIcon, PlusIcon, XMarkIcon, FileSpreadsheetIcon, FileTextIcon, UploadIcon, FileSearchIcon, DialogHeaderComponent, ChatPlusIcon, ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, EyeIcon, KeyIcon, MenuComponent, MenuContentComponent, MenuItemComponent, PenToSquareIcon, RefreshIcon, TagIcon, CheckIcon, CircleXIcon, SyncIcon } from '@sinequa/ui';
 import { DomSanitizer } from '@angular/platform-browser';
 import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
 
@@ -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, signal) => {
+        const res = await listContainerDocuments(workspaceId, { page: 1, pageSize: PAGE_SIZE }, { signal });
+        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,45 @@ 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);
+        /**
+         * Local only — for when a read already proved a workspace is gone from the
+         * server (a 404), rather than this session deleting it: the detail view
+         * calls this once the user actually leaves a workspace its background
+         * refresh found deleted, instead of {@link remove}, which would call
+         * DELETE on something already deleted. Kept in the cache until then, so
+         * the view can still show its name while it explains what happened.
+         */
+        forget(id) {
             patchState(store, state => ({
-                documentPagination: { ...state.documentPagination, [workspaceId]: { page: res.page, total: res.total } }
+                workspaces: state.workspaces.filter(w => w.id !== id),
+                pagination: state.workspaces.some(w => w.id === id) ? { ...state.pagination, total: Math.max(0, state.pagination.total - 1) } : state.pagination,
+                documents: Object.fromEntries(Object.entries(state.documents).filter(([wid]) => wid !== id)),
+                documentPagination: Object.fromEntries(Object.entries(state.documentPagination).filter(([wid]) => wid !== id)),
+                selectedIds: state.selectedIds.filter(selected => selected !== id)
             }));
-            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 +398,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 +418,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 => {
@@ -2253,6 +2331,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
             args: [{ name: "highlightMatch" }]
         }] });
 
+/**
+ * Keeps a view fresh while it stays open, without the user ever asking: `tick`
+ * re-fetches whatever the view shows and reports whether the result differs
+ * from before — the loop speeds back up on a change and backs off while idle,
+ * exactly like {@link StatusPoller} already does for upload status.
+ *
+ * Paused while the browser reports no network (resumed the moment it is back),
+ * and fully stopped once the injecting component is destroyed. The very first
+ * scheduled tick is a no-op: whatever calls `start()` has normally just
+ * fetched on its own, so re-fetching the same thing instantly would be
+ * redundant — the first real poll happens one `intervalMs` later.
+ *
+ * Must be called from an injection context.
+ */
+function injectLiveRefresh(tick, options = {}) {
+    assertInInjectionContext(injectLiveRefresh);
+    let shouldRun = false;
+    let first = true;
+    const poller = new StatusPoller({
+        intervalMs: options.intervalMs,
+        maxIntervalMs: options.maxIntervalMs,
+        tick: async (signal) => {
+            if (first) {
+                first = false;
+                return { pending: true, changed: true };
+            }
+            return { pending: true, changed: await tick(signal) };
+        }
+    });
+    if (typeof window !== "undefined") {
+        const resume = () => {
+            if (shouldRun)
+                poller.start();
+        };
+        const pause = () => poller.stop();
+        window.addEventListener("online", resume);
+        window.addEventListener("offline", pause);
+        inject(DestroyRef).onDestroy(() => {
+            window.removeEventListener("online", resume);
+            window.removeEventListener("offline", pause);
+        });
+    }
+    inject(DestroyRef).onDestroy(() => poller.stop());
+    return {
+        start() {
+            shouldRun = true;
+            if (typeof navigator === "undefined" || navigator.onLine)
+                poller.start();
+        },
+        stop() {
+            shouldRun = false;
+            poller.stop();
+        }
+    };
+}
+
 /**
  * Maps a caught error to the message shown in an inline error banner.
  *
@@ -3002,7 +3136,9 @@ const TABS = [
  * Each time it is shown it refreshes: workspaces created by others since the last
  * time appear, and the document counts match the server. The list already on
  * screen stays until the answer lands, and a failure leaves it untouched behind
- * an inline error.
+ * an inline error. While it stays shown, it keeps polling in the background
+ * (`injectLiveRefresh`) so a workspace created by someone else — one the current
+ * user only reads, say — appears on its own, with no action needed.
  */
 class WorkspaceList {
     /** A workspace was chosen for opening. */
@@ -3017,6 +3153,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.
@@ -3025,6 +3163,19 @@ class WorkspaceList {
         key: (workspace) => workspace.id,
         selectable: workspace => canWrite(workspace.currentUserRole)
     });
+    // Background polling, started once the list has something to compare against:
+    // each tick re-reloads and compares the full result to what was cached before
+    // it, not just the set of ids — a workspace renamed, re-tagged or whose access
+    // changed keeps the same id, and would otherwise look unchanged forever, which
+    // would both hide the edit and widen the backoff on ticks that are not actually idle.
+    liveRefresh = injectLiveRefresh(async () => {
+        const before = JSON.stringify(this.store.workspaces());
+        await this.store.reload();
+        const changed = JSON.stringify(this.store.workspaces()) !== before;
+        if (changed)
+            this.selection.exit(); // the ticks belonged to the list that was there before
+        return changed;
+    }, { intervalMs: 20_000, maxIntervalMs: 120_000 });
     constructor() {
         void this.load();
     }
@@ -3034,12 +3185,14 @@ class WorkspaceList {
         if (this.store.loaded()) {
             this.status.set("ready");
             await this.refresh();
+            this.liveRefresh.start();
             return;
         }
         this.status.set("loading");
         try {
             await this.store.ensureLoaded();
             this.status.set("ready");
+            this.liveRefresh.start();
         }
         catch (error) {
             this.loadError.set(workspaceErrorMessage(error));
@@ -3057,6 +3210,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 +3269,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 +3473,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>
@@ -3795,6 +3979,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                 }]
         }], propDecorators: { document: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: true }] }], workspaceRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "workspaceRole", required: true }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], selecting: [{ type: i0.Input, args: [{ isSignal: true, alias: "selecting", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], deleteRequested: [{ type: i0.Output, args: ["deleteRequested"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
 
+/**
+ * The file-search glyph on a teal tile — the same tile `EmptyFolderIcon` uses
+ * for an empty workspace or an empty list, for a workspace or document the
+ * server no longer has.
+ */
+class NotFoundIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NotFoundIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.29", type: NotFoundIcon, isStandalone: true, selector: "not-found-icon", host: { attributes: { "data-testid": "not-found-icon" }, classAttribute: "mb-1 inline-flex size-14 shrink-0 items-center justify-center rounded-(--radius-xl) bg-(--teal-100,#E0F4F1) text-(--teal-400,#4EBFB0)" }, ngImport: i0, template: `<file-search-icon class="size-6" />`, isInline: true, dependencies: [{ kind: "component", type: FileSearchIcon, selector: "file-search-icon, FileSearchIcon, filesearchicon", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImport: i0, type: NotFoundIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "not-found-icon",
+                    imports: [FileSearchIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: "mb-1 inline-flex size-14 shrink-0 items-center justify-center rounded-(--radius-xl) bg-(--teal-100,#E0F4F1) text-(--teal-400,#4EBFB0)",
+                        "data-testid": "not-found-icon"
+                    },
+                    template: `<file-search-icon class="size-6" />`
+                }]
+        }] });
+
 /** The files staged for upload, before anything is sent. */
 class UploadFileList {
     files = input.required(...(ngDevMode ? [{ debugName: "files" }] : []));
@@ -5549,6 +5756,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
  * shown: it says what the user asked for (`back`, `deleted`, `askFollowUp`) and whoever
  * hosts it decides. The document open in the preview is the `previewedDocumentId` model.
  *
+ * While a workspace stays open, it keeps polling its documents in the background
+ * (`injectLiveRefresh`), so a document another user adds to it shows up on its own.
+ *
  * Only someone who can write sees the edit, share, delete, upload and select controls.
  */
 class WorkspaceDetail {
@@ -5579,6 +5789,8 @@ class WorkspaceDetail {
     refreshing = signal(false, ...(ngDevMode ? [{ debugName: "refreshing" }] : []));
     loadingMore = signal(false, ...(ngDevMode ? [{ debugName: "loadingMore" }] : []));
     loadMoreError = signal(null, ...(ngDevMode ? [{ debugName: "loadMoreError" }] : []));
+    /** The background refresh found the workspace gone from the server (deleted elsewhere). */
+    deletedElsewhere = signal(false, ...(ngDevMode ? [{ debugName: "deletedElsewhere" }] : []));
     workspace = computed(() => this.store.workspace(this.workspaceId()), ...(ngDevMode ? [{ debugName: "workspace" }] : []));
     // Only what is really uploaded or being indexed is listed: transfers and failures
     // belong to the upload tracker, not to the workspace. A document with no status at
@@ -5604,6 +5816,42 @@ class WorkspaceDetail {
         // Selecting only serves deleting, which a reader cannot do.
         selectable: () => this.writable()
     });
+    // Background polling, re-scoped to whatever `workspaceId` is current on each
+    // tick (no restart needed when the user switches workspaces): refreshes both
+    // the workspace's own metadata (title, description, tags, owners/readers,
+    // the current user's role) and its documents, so an edit or an access change
+    // made elsewhere shows up here too, not just additions to the document list.
+    // Comparing full snapshots (not just ids) catches an in-place edit that an
+    // id-only diff would miss — a renamed workspace, a demoted role — and keeps
+    // the backoff from widening on a tick that only looks unchanged by id.
+    liveRefresh = injectLiveRefresh(async (signal) => {
+        const id = this.workspaceId();
+        const beforeWorkspace = JSON.stringify(this.store.workspace(id));
+        const beforeDocuments = JSON.stringify(this.store.documentsOf(id));
+        try {
+            await Promise.all([this.store.fetch(id), this.store.loadDocuments(id, signal)]);
+        }
+        catch (error) {
+            // Someone else deleted it: flag it and stop polling — there is nothing
+            // left here to discover. The workspace stays in the shared cache (so its
+            // name/description keep showing instead of the view going blank); `leave()`
+            // drops it once the user actually goes back to the list.
+            if (error instanceof ApiError && error.status === 404 && this.workspaceId() === id) {
+                this.deletedElsewhere.set(true);
+                this.selection.exit();
+                this.liveRefresh.stop();
+                return true;
+            }
+            throw error;
+        }
+        if (this.workspaceId() !== id)
+            return false; // the user moved to another workspace meanwhile
+        const documentsChanged = JSON.stringify(this.store.documentsOf(id)) !== beforeDocuments;
+        const workspaceChanged = JSON.stringify(this.store.workspace(id)) !== beforeWorkspace;
+        if (documentsChanged)
+            this.uploads.watch(id); // a document that just appeared may still be indexing for someone else
+        return documentsChanged || workspaceChanged;
+    }, { intervalMs: 15_000, maxIntervalMs: 90_000 });
     constructor() {
         effect(() => {
             this.workspaceId();
@@ -5629,8 +5877,19 @@ class WorkspaceDetail {
         this.query.set("");
         this.refreshError.set(null);
         this.loadMoreError.set(null);
+        this.deletedElsewhere.set(false);
         await this.load();
     }
+    /**
+     * Leaving from here: once the background refresh found the workspace gone,
+     * the cache still holds it (so its name kept showing) — drop it now, so a
+     * stale card does not show it back on the list.
+     */
+    leave() {
+        if (this.deletedElsewhere())
+            this.store.forget(this.workspaceId());
+        this.back.emit();
+    }
     /** Reads the workspace (when it is not cached) and its documents, for the workspace currently shown. */
     async load() {
         const id = this.workspaceId();
@@ -5653,6 +5912,7 @@ class WorkspaceDetail {
             return;
         this.status.set("ready");
         this.uploads.watch(id);
+        this.liveRefresh.start();
     }
     /** Reads the documents again without leaving the view; a failure leaves the ones shown as they are. */
     async refresh() {
@@ -5752,7 +6012,7 @@ class WorkspaceDetail {
         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: WorkspaceDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.29", type: WorkspaceDetail, isStandalone: true, selector: "workspace-detail", inputs: { workspaceId: { classPropertyName: "workspaceId", publicName: "workspaceId", isSignal: true, isRequired: true, transformFunction: null }, uploadEndpoint: { classPropertyName: "uploadEndpoint", publicName: "uploadEndpoint", isSignal: true, isRequired: false, transformFunction: null }, previewedDocumentId: { classPropertyName: "previewedDocumentId", publicName: "previewedDocumentId", isSignal: true, isRequired: false, transformFunction: null }, queryName: { classPropertyName: "queryName", publicName: "queryName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewedDocumentId: "previewedDocumentIdChange", back: "back", deleted: "deleted", workspaceUpdated: "workspaceUpdated", askFollowUp: "askFollowUp" }, host: { classAttribute: "flex h-full min-h-0" }, providers: [provideTranslocoScope("document-workspaces")], ngImport: i0, template: "\n    <div class=\"@container flex min-h-0 min-w-0 flex-1 flex-col p-3 pb-2 md:p-8 md:pb-4\">\n      <div class=\"mb-3 flex flex-wrap items-center gap-x-3 gap-y-2\">\n        <button class=\"w-6\" size=\"sm\"\n          variant=\"ghost\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'documentWorkspaces.detail.back' | transloco\"\n          [tooltip]=\"'documentWorkspaces.detail.back' | transloco\"\n          (click)=\"back.emit()\">\n          <chevron-down-icon class=\"rotate-90\" />\n        </button>\n\n        @if (workspace(); as workspace) {\n          <h1 class=\"min-w-28 flex-[1_1_16rem] text-2xl leading-[31px] font-bold break-words text-(--font-neutral-black)\">{{ workspace.name }}</h1>\n\n          <!-- Beside the title while they fit next to its 16rem, on a line of their own under it once they do not. -->\n          <div class=\"ml-auto flex shrink-0 items-center gap-1\">\n            <button size=\"sm\"\n              variant=\"ghost\"\n              class=\"gap-1.5 text-(--font-error-base) hover:bg-(--bg-error-lightest)\"\n              [writerOnly]=\"workspace.currentUserRole\"\n              (click)=\"confirmDeleteWorkspace(workspace)\">\n              <trash-icon />\n              {{ \"documentWorkspaces.common.delete\" | transloco }}\n            </button>\n            <button size=\"sm\" variant=\"ghost\" class=\"gap-1.5\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"share(workspace)\">\n              <user-round-icon />\n              {{ \"documentWorkspaces.share.title\" | transloco }}\n            </button>\n            <button size=\"sm\" variant=\"ghost\" class=\"gap-1.5\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"edit(workspace)\">\n              <pen-to-square-icon />\n              {{ \"documentWorkspaces.common.edit\" | transloco }}\n            </button>\n            <button size=\"sm\"\n              variant=\"ghost\"\n              class=\"w-6\"\n              [iconOnly]=\"true\"\n              [disabled]=\"refreshing()\"\n              [attr.aria-label]=\"'documentWorkspaces.common.refresh' | transloco\"\n              [tooltip]=\"'documentWorkspaces.common.refresh' | transloco\"\n              (click)=\"refresh()\">\n              <refresh-icon />\n            </button>\n          </div>\n        }\n      </div>\n\n      @if (workspace(); as workspace) {\n        @if (workspace.description) {\n          <p class=\"mb-3 text-base text-(--font-primary-base)\">{{ workspace.description }}</p>\n        }\n        @if (workspace.tags.length) {\n          <p class=\"mb-6 flex items-center gap-2 text-sm text-(--font-primary-base)\" data-testid=\"tags\">\n            <tag-icon class=\"size-4\" />\n            {{ workspace.tags.join(\", \") }}\n          </p>\n        }\n\n        <div class=\"mb-3 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]=\"query()\"\n              [attr.placeholder]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n              [attr.aria-label]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n              (input)=\"onSearch($event)\" />\n            @if (query()) {\n              <button variant=\"none\" type=\"button\" class=\"inline-flex\" [attr.aria-label]=\"'documentWorkspaces.common.clearSearch' | transloco\" (click)=\"query.set('')\">\n                <x-mark-icon class=\"size-4\" />\n              </button>\n            }\n          </div>\n\n          <button class=\"gap-1.5\" size=\"sm\" variant=\"primary\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"upload(workspace)\">\n            <upload-icon />\n            {{ \"documentWorkspaces.detail.upload\" | transloco }}\n          </button>\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                <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        <p class=\"mb-6 text-sm text-(--font-primary-base)\" aria-live=\"polite\" data-testid=\"count\">\n          @if (selection.active()) {\n            {{ \"documentWorkspaces.detail.selectedDocumentCount\" | transloco: { count: selection.count() } }}\n          } @else {\n            {{ \"documentWorkspaces.detail.fileCount\" | transloco: { count: workspace.documentCount } }}\n          }\n        </p>\n      }\n\n      @if (refreshError(); as message) {\n        <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.refreshError\" | transloco: { error: message } }}</p>\n      }\n\n      <!-- Only the documents scroll: the title, the toolbar and the count stay in place. -->\n      <div class=\"min-h-0 flex-1 overflow-y-auto\">\n      @switch (status()) {\n        @case (\"loading\") {\n          <p class=\"text-(--font-primary-muted) text-sm\">{{ \"documentWorkspaces.detail.docsLoading\" | 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.detail.docsLoadError\" | transloco }}\n              }\n            </span>\n            <button variant=\"secondary\" size=\"xs\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n          </div>\n        }\n        @default {\n          @if (workspace(); as workspace) {\n            @if (!documents().length) {\n              <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"empty\">\n                <empty-folder-icon />\n                <h5 class=\"text-sm font-semibold text-(--font-primary-dark)\">{{ \"documentWorkspaces.detail.emptyTitle\" | transloco }}</h5>\n                <p class=\"max-w-70 text-sm text-(--font-primary-base)\">{{ \"documentWorkspaces.detail.emptySubtitle\" | transloco }}</p>\n              </div>\n            } @else if (!filtered().length) {\n              <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"no-match\">{{ \"documentWorkspaces.detail.noMatch\" | transloco }}</p>\n            } @else if (viewMode() === \"grid\") {\n              <div class=\"grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] content-start gap-4 pb-8\">\n                @for (document of filtered(); track document.id) {\n                  <document-card\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $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_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_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.detail.columnName\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSource\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSize\" | transloco }}</div>\n                  <div role=\"columnheader\">{{ \"documentWorkspaces.detail.columnDate\" | transloco }}</div>\n                  <div role=\"columnheader\"></div>\n                </div>\n                @for (document of filtered(); track document.id) {\n                  <document-row\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $event)\" />\n                }\n              </div>\n            }\n\n            @if (hasMore()) {\n              <div class=\"flex flex-col items-center gap-2\">\n                @if (loadMoreError(); as message) {\n                  <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.loadMoreError\" | transloco: { error: message } }}</p>\n                }\n                <button variant=\"secondary\" size=\"xs\" [disabled]=\"loadingMore()\" (click)=\"loadMore()\">\n                  {{ \"documentWorkspaces.detail.loadMore\" | transloco }}\n                </button>\n              </div>\n            }\n          } @else {\n            <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"not-found\">{{ \"documentWorkspaces.errors.notFound\" | transloco }}</p>\n          }\n        }\n      }\n      </div>\n    </div>\n\n    <!-- The list gives up part of its width to the preview, and takes it back when the preview closes. -->\n    <div\n      #handle=\"resizeHandle\"\n      class=\"group/handle flex w-3 shrink-0 cursor-col-resize items-center justify-center max-md:hidden\"\n      [class.hidden]=\"!previewed()\"\n      [resizeHandle]=\"previewWidth()\"\n      (resizeHandleChange)=\"userPreviewWidth.set($event)\"\n      [resizeMin]=\"280\"\n      [resizeMax]=\"maxPreviewWidth()\"\n      [attr.aria-label]=\"'documentWorkspaces.preview.resize' | transloco\">\n      <span class=\"h-6 w-0.5 rounded-full bg-(--stroke-primary-light) opacity-0 group-hover/handle:opacity-100 group-focus-visible/handle:opacity-100 group-data-resizing/handle:opacity-100\"></span>\n    </div>\n    <aside\n      class=\"sticky top-3 my-3 mr-3 flex h-[calc(100dvh-1.5rem)] max-h-[calc(100%-1.5rem)] shrink-0 self-start overflow-hidden rounded-(--radius-xl) bg-(--bg-neutral-white) transition-[width] duration-[350ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none data-open:border data-open:border-(--stroke-primary-lighter) data-open:shadow-[0_4px_6px_-2px_rgba(45,57,58,0.05),0_10px_15px_-3px_rgba(45,57,58,0.1)] max-md:data-open:fixed max-md:data-open:inset-0 max-md:data-open:z-50 max-md:data-open:m-0 max-md:data-open:w-full! max-md:data-open:max-h-none max-md:data-open:rounded-none\"\n      [class.transition-none]=\"handle.resizing()\"\n      [style.width.px]=\"previewed() ? previewWidth() : 0\"\n      [attr.data-open]=\"previewed() ? '' : null\"\n      [attr.aria-hidden]=\"previewed() ? null : 'true'\"\n      data-testid=\"preview\">\n      @if (previewed(); as previewed) {\n        <!-- Its own width, so the content does not reflow while the card opens. -->\n        <document-preview-panel\n          class=\"shrink-0 max-md:w-full!\"\n          [style.width.px]=\"previewWidth()\"\n          [document]=\"previewed\"\n          [queryName]=\"queryName()\"\n          (closed)=\"previewedDocumentId.set(null)\"\n          (askFollowUp)=\"askFollowUp.emit($event)\" />\n      }\n    </aside>\n  ", isInline: true, dependencies: [{ kind: "component", type: ChevronDownIcon, selector: "chevron-down, ChevronDown, chevrondown, chevron-down-icon, ChevronDownIcon, chevrondownicon", inputs: ["class"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: DocumentCard, selector: "document-card", inputs: ["document", "workspaceRole", "query", "active", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { kind: "component", type: DocumentPreviewPanel, selector: "document-preview-panel", inputs: ["document", "queryName"], outputs: ["closed", "askFollowUp"] }, { kind: "component", type: DocumentRow, selector: "document-row", inputs: ["document", "workspaceRole", "query", "active", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { 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: PenToSquareIcon, selector: "pen-to-square-icon, PenToSquareIcon", inputs: ["class"] }, { kind: "component", type: RefreshIcon, selector: "refresh-icon, RefreshIcon, refreshicon", inputs: ["class"] }, { kind: "directive", type: ResizeHandle, selector: "[resizeHandle]", inputs: ["resizeHandle", "resizeMin", "resizeMax", "resizeStep", "resizeEdge"], outputs: ["resizeHandleChange"], exportAs: ["resizeHandle"] }, { kind: "component", type: TagIcon, selector: "tag-icon, TagIcon", 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: UploadIcon, selector: "upload-icon, UploadIcon, uploadicon", inputs: ["class"] }, { kind: "component", type: UserRoundIcon, selector: "user-round, UserRound, userround, user-round-icon, UserRoundIcon, userroundicon", inputs: ["class"] }, { kind: "component", type: WorkspaceMessage, selector: "workspace-message", inputs: ["message"] }, { kind: "directive", type: WriterOnly, selector: "[writerOnly]", inputs: ["writerOnly"] }, { 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: WorkspaceDetail, isStandalone: true, selector: "workspace-detail", inputs: { workspaceId: { classPropertyName: "workspaceId", publicName: "workspaceId", isSignal: true, isRequired: true, transformFunction: null }, uploadEndpoint: { classPropertyName: "uploadEndpoint", publicName: "uploadEndpoint", isSignal: true, isRequired: false, transformFunction: null }, previewedDocumentId: { classPropertyName: "previewedDocumentId", publicName: "previewedDocumentId", isSignal: true, isRequired: false, transformFunction: null }, queryName: { classPropertyName: "queryName", publicName: "queryName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewedDocumentId: "previewedDocumentIdChange", back: "back", deleted: "deleted", workspaceUpdated: "workspaceUpdated", askFollowUp: "askFollowUp" }, host: { classAttribute: "flex h-full min-h-0" }, providers: [provideTranslocoScope("document-workspaces")], ngImport: i0, template: "\n    <div class=\"@container flex min-h-0 min-w-0 flex-1 flex-col p-3 pb-2 md:p-8 md:pb-4\">\n      <div class=\"mb-3 flex flex-wrap items-center gap-x-3 gap-y-2\">\n        <button class=\"w-6\" size=\"sm\"\n          variant=\"ghost\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'documentWorkspaces.detail.back' | transloco\"\n          [tooltip]=\"'documentWorkspaces.detail.back' | transloco\"\n          (click)=\"leave()\">\n          <chevron-down-icon class=\"rotate-90\" />\n        </button>\n\n        @if (workspace(); as workspace) {\n          <h1 class=\"min-w-28 flex-[1_1_16rem] text-2xl leading-[31px] font-bold break-words text-(--font-neutral-black)\">{{ workspace.name }}</h1>\n\n          <!-- Beside the title while they fit next to its 16rem, on a line of their own under it once they do not. -->\n          @if (!deletedElsewhere()) {\n            <div class=\"ml-auto flex shrink-0 items-center gap-1\">\n              <button size=\"sm\"\n                variant=\"ghost\"\n                class=\"gap-1.5 text-(--font-error-base) hover:bg-(--bg-error-lightest)\"\n                [writerOnly]=\"workspace.currentUserRole\"\n                (click)=\"confirmDeleteWorkspace(workspace)\">\n                <trash-icon />\n                {{ \"documentWorkspaces.common.delete\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"ghost\" class=\"gap-1.5\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"share(workspace)\">\n                <user-round-icon />\n                {{ \"documentWorkspaces.share.title\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"ghost\" class=\"gap-1.5\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"edit(workspace)\">\n                <pen-to-square-icon />\n                {{ \"documentWorkspaces.common.edit\" | transloco }}\n              </button>\n              <button size=\"sm\"\n                variant=\"ghost\"\n                class=\"w-6\"\n                [iconOnly]=\"true\"\n                [disabled]=\"refreshing()\"\n                [attr.aria-label]=\"'documentWorkspaces.common.refresh' | transloco\"\n                [tooltip]=\"'documentWorkspaces.common.refresh' | transloco\"\n                (click)=\"refresh()\">\n                <refresh-icon />\n              </button>\n            </div>\n          }\n        }\n      </div>\n\n      @if (workspace(); as workspace) {\n        @if (workspace.description) {\n          <p class=\"mb-3 text-base text-(--font-primary-base)\">{{ workspace.description }}</p>\n        }\n        @if (workspace.tags.length) {\n          <p class=\"mb-6 flex items-center gap-2 text-sm text-(--font-primary-base)\" data-testid=\"tags\">\n            <tag-icon class=\"size-4\" />\n            {{ workspace.tags.join(\", \") }}\n          </p>\n        }\n\n        @if (!deletedElsewhere()) {\n        <div class=\"mb-3 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]=\"query()\"\n              [attr.placeholder]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n              [attr.aria-label]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n              (input)=\"onSearch($event)\" />\n            @if (query()) {\n              <button variant=\"none\" type=\"button\" class=\"inline-flex\" [attr.aria-label]=\"'documentWorkspaces.common.clearSearch' | transloco\" (click)=\"query.set('')\">\n                <x-mark-icon class=\"size-4\" />\n              </button>\n            }\n          </div>\n\n          <button class=\"gap-1.5\" size=\"sm\" variant=\"primary\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"upload(workspace)\">\n            <upload-icon />\n            {{ \"documentWorkspaces.detail.upload\" | transloco }}\n          </button>\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                <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        <p class=\"mb-6 text-sm text-(--font-primary-base)\" aria-live=\"polite\" data-testid=\"count\">\n          @if (selection.active()) {\n            {{ \"documentWorkspaces.detail.selectedDocumentCount\" | transloco: { count: selection.count() } }}\n          } @else {\n            {{ \"documentWorkspaces.detail.fileCount\" | transloco: { count: workspace.documentCount } }}\n          }\n        </p>\n        }\n      }\n\n      @if (refreshError(); as message) {\n        <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.refreshError\" | transloco: { error: message } }}</p>\n      }\n\n      <!-- Only the documents scroll: the title, the toolbar and the count stay in place. -->\n      <div class=\"min-h-0 flex-1 overflow-y-auto\">\n      @switch (status()) {\n        @case (\"loading\") {\n          <p class=\"text-(--font-primary-muted) text-sm\">{{ \"documentWorkspaces.detail.docsLoading\" | 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.detail.docsLoadError\" | transloco }}\n              }\n            </span>\n            <button variant=\"secondary\" size=\"xs\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n          </div>\n        }\n        @default {\n          @if (deletedElsewhere()) {\n            <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"not-found\">\n              <not-found-icon />\n              <p class=\"max-w-70 text-sm text-(--font-primary-base)\">{{ \"documentWorkspaces.errors.notFound\" | transloco }}</p>\n              <button variant=\"secondary\" size=\"sm\" class=\"mt-2\" (click)=\"leave()\">{{ \"documentWorkspaces.detail.back\" | transloco }}</button>\n            </div>\n          } @else if (workspace(); as workspace) {\n            @if (!documents().length) {\n              <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"empty\">\n                <empty-folder-icon />\n                <h5 class=\"text-sm font-semibold text-(--font-primary-dark)\">{{ \"documentWorkspaces.detail.emptyTitle\" | transloco }}</h5>\n                <p class=\"max-w-70 text-sm text-(--font-primary-base)\">{{ \"documentWorkspaces.detail.emptySubtitle\" | transloco }}</p>\n              </div>\n            } @else if (!filtered().length) {\n              <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"no-match\">{{ \"documentWorkspaces.detail.noMatch\" | transloco }}</p>\n            } @else if (viewMode() === \"grid\") {\n              <div class=\"grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] content-start gap-4 pb-8\">\n                @for (document of filtered(); track document.id) {\n                  <document-card\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $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_2.5rem] items-center gap-x-4 px-3 data-selecting:grid-cols-[2rem_minmax(0,1fr)_auto_2.5rem] @3xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_2.5rem] @3xl:data-selecting:grid-cols-[2rem_minmax(0,2fr)_minmax(0,1fr)_6rem_10rem_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.detail.columnName\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSource\" | transloco }}</div>\n                  <div role=\"columnheader\" class=\"@max-3xl:hidden\">{{ \"documentWorkspaces.detail.columnSize\" | transloco }}</div>\n                  <div role=\"columnheader\">{{ \"documentWorkspaces.detail.columnDate\" | transloco }}</div>\n                  <div role=\"columnheader\"></div>\n                </div>\n                @for (document of filtered(); track document.id) {\n                  <document-row\n                    [document]=\"document\"\n                    [workspaceRole]=\"workspace.currentUserRole\"\n                    [query]=\"query()\"\n                    [active]=\"document.id === previewedDocumentId()\"\n                    [selecting]=\"selection.active()\"\n                    [selected]=\"selection.isSelected(document)\"\n                    [selectable]=\"selection.canSelect(document)\"\n                    (opened)=\"togglePreview(document)\"\n                    (deleteRequested)=\"confirmDeleteDocuments([document])\"\n                    (selectedChange)=\"selection.toggle(document, $event)\" />\n                }\n              </div>\n            }\n\n            @if (hasMore()) {\n              <div class=\"flex flex-col items-center gap-2\">\n                @if (loadMoreError(); as message) {\n                  <p role=\"alert\" class=\"text-(--font-error-base) text-sm\">{{ \"documentWorkspaces.detail.loadMoreError\" | transloco: { error: message } }}</p>\n                }\n                <button variant=\"secondary\" size=\"xs\" [disabled]=\"loadingMore()\" (click)=\"loadMore()\">\n                  {{ \"documentWorkspaces.detail.loadMore\" | transloco }}\n                </button>\n              </div>\n            }\n          } @else {\n            <p class=\"text-(--font-primary-muted) py-8 text-center text-sm\" data-testid=\"not-found\">{{ \"documentWorkspaces.errors.notFound\" | transloco }}</p>\n          }\n        }\n      }\n      </div>\n    </div>\n\n    <!-- The list gives up part of its width to the preview, and takes it back when the preview closes. -->\n    <div\n      #handle=\"resizeHandle\"\n      class=\"group/handle flex w-3 shrink-0 cursor-col-resize items-center justify-center max-md:hidden\"\n      [class.hidden]=\"!previewed()\"\n      [resizeHandle]=\"previewWidth()\"\n      (resizeHandleChange)=\"userPreviewWidth.set($event)\"\n      [resizeMin]=\"280\"\n      [resizeMax]=\"maxPreviewWidth()\"\n      [attr.aria-label]=\"'documentWorkspaces.preview.resize' | transloco\">\n      <span class=\"h-6 w-0.5 rounded-full bg-(--stroke-primary-light) opacity-0 group-hover/handle:opacity-100 group-focus-visible/handle:opacity-100 group-data-resizing/handle:opacity-100\"></span>\n    </div>\n    <aside\n      class=\"sticky top-3 my-3 mr-3 flex h-[calc(100dvh-1.5rem)] max-h-[calc(100%-1.5rem)] shrink-0 self-start overflow-hidden rounded-(--radius-xl) bg-(--bg-neutral-white) transition-[width] duration-[350ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none data-open:border data-open:border-(--stroke-primary-lighter) data-open:shadow-[0_4px_6px_-2px_rgba(45,57,58,0.05),0_10px_15px_-3px_rgba(45,57,58,0.1)] max-md:data-open:fixed max-md:data-open:inset-0 max-md:data-open:z-50 max-md:data-open:m-0 max-md:data-open:w-full! max-md:data-open:max-h-none max-md:data-open:rounded-none\"\n      [class.transition-none]=\"handle.resizing()\"\n      [style.width.px]=\"previewed() ? previewWidth() : 0\"\n      [attr.data-open]=\"previewed() ? '' : null\"\n      [attr.aria-hidden]=\"previewed() ? null : 'true'\"\n      data-testid=\"preview\">\n      @if (previewed(); as previewed) {\n        <!-- Its own width, so the content does not reflow while the card opens. -->\n        <document-preview-panel\n          class=\"shrink-0 max-md:w-full!\"\n          [style.width.px]=\"previewWidth()\"\n          [document]=\"previewed\"\n          [queryName]=\"queryName()\"\n          (closed)=\"previewedDocumentId.set(null)\"\n          (askFollowUp)=\"askFollowUp.emit($event)\" />\n      }\n    </aside>\n  ", isInline: true, dependencies: [{ kind: "component", type: ChevronDownIcon, selector: "chevron-down, ChevronDown, chevrondown, chevron-down-icon, ChevronDownIcon, chevrondownicon", inputs: ["class"] }, { kind: "directive", type: ButtonComponent, selector: "button", inputs: ["class", "variant", "decoration", "scheme", "iconOnly", "size", "solid"] }, { kind: "component", type: DocumentCard, selector: "document-card", inputs: ["document", "workspaceRole", "query", "active", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { kind: "component", type: DocumentPreviewPanel, selector: "document-preview-panel", inputs: ["document", "queryName"], outputs: ["closed", "askFollowUp"] }, { kind: "component", type: DocumentRow, selector: "document-row", inputs: ["document", "workspaceRole", "query", "active", "selecting", "selected", "selectable"], outputs: ["opened", "deleteRequested", "selectedChange"] }, { 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: NotFoundIcon, selector: "not-found-icon" }, { kind: "component", type: PenToSquareIcon, selector: "pen-to-square-icon, PenToSquareIcon", inputs: ["class"] }, { kind: "component", type: RefreshIcon, selector: "refresh-icon, RefreshIcon, refreshicon", inputs: ["class"] }, { kind: "directive", type: ResizeHandle, selector: "[resizeHandle]", inputs: ["resizeHandle", "resizeMin", "resizeMax", "resizeStep", "resizeEdge"], outputs: ["resizeHandleChange"], exportAs: ["resizeHandle"] }, { kind: "component", type: TagIcon, selector: "tag-icon, TagIcon", 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: UploadIcon, selector: "upload-icon, UploadIcon, uploadicon", inputs: ["class"] }, { kind: "component", type: UserRoundIcon, selector: "user-round, UserRound, userround, user-round-icon, UserRoundIcon, userroundicon", inputs: ["class"] }, { kind: "component", type: WorkspaceMessage, selector: "workspace-message", inputs: ["message"] }, { kind: "directive", type: WriterOnly, selector: "[writerOnly]", inputs: ["writerOnly"] }, { 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: WorkspaceDetail, decorators: [{
             type: Component,
@@ -5769,6 +6029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         GridIcon,
                         ListIcon,
                         MagnifyingGlassIcon,
+                        NotFoundIcon,
                         PenToSquareIcon,
                         RefreshIcon,
                         ResizeHandle,
@@ -5792,7 +6053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
           [iconOnly]="true"
           [attr.aria-label]="'documentWorkspaces.detail.back' | transloco"
           [tooltip]="'documentWorkspaces.detail.back' | transloco"
-          (click)="back.emit()">
+          (click)="leave()">
           <chevron-down-icon class="rotate-90" />
         </button>
 
@@ -5800,34 +6061,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
           <h1 class="min-w-28 flex-[1_1_16rem] text-2xl leading-[31px] font-bold break-words text-(--font-neutral-black)">{{ workspace.name }}</h1>
 
           <!-- Beside the title while they fit next to its 16rem, on a line of their own under it once they do not. -->
-          <div class="ml-auto flex shrink-0 items-center gap-1">
-            <button size="sm"
-              variant="ghost"
-              class="gap-1.5 text-(--font-error-base) hover:bg-(--bg-error-lightest)"
-              [writerOnly]="workspace.currentUserRole"
-              (click)="confirmDeleteWorkspace(workspace)">
-              <trash-icon />
-              {{ "documentWorkspaces.common.delete" | transloco }}
-            </button>
-            <button size="sm" variant="ghost" class="gap-1.5" [writerOnly]="workspace.currentUserRole" (click)="share(workspace)">
-              <user-round-icon />
-              {{ "documentWorkspaces.share.title" | transloco }}
-            </button>
-            <button size="sm" variant="ghost" class="gap-1.5" [writerOnly]="workspace.currentUserRole" (click)="edit(workspace)">
-              <pen-to-square-icon />
-              {{ "documentWorkspaces.common.edit" | transloco }}
-            </button>
-            <button size="sm"
-              variant="ghost"
-              class="w-6"
-              [iconOnly]="true"
-              [disabled]="refreshing()"
-              [attr.aria-label]="'documentWorkspaces.common.refresh' | transloco"
-              [tooltip]="'documentWorkspaces.common.refresh' | transloco"
-              (click)="refresh()">
-              <refresh-icon />
-            </button>
-          </div>
+          @if (!deletedElsewhere()) {
+            <div class="ml-auto flex shrink-0 items-center gap-1">
+              <button size="sm"
+                variant="ghost"
+                class="gap-1.5 text-(--font-error-base) hover:bg-(--bg-error-lightest)"
+                [writerOnly]="workspace.currentUserRole"
+                (click)="confirmDeleteWorkspace(workspace)">
+                <trash-icon />
+                {{ "documentWorkspaces.common.delete" | transloco }}
+              </button>
+              <button size="sm" variant="ghost" class="gap-1.5" [writerOnly]="workspace.currentUserRole" (click)="share(workspace)">
+                <user-round-icon />
+                {{ "documentWorkspaces.share.title" | transloco }}
+              </button>
+              <button size="sm" variant="ghost" class="gap-1.5" [writerOnly]="workspace.currentUserRole" (click)="edit(workspace)">
+                <pen-to-square-icon />
+                {{ "documentWorkspaces.common.edit" | transloco }}
+              </button>
+              <button size="sm"
+                variant="ghost"
+                class="w-6"
+                [iconOnly]="true"
+                [disabled]="refreshing()"
+                [attr.aria-label]="'documentWorkspaces.common.refresh' | transloco"
+                [tooltip]="'documentWorkspaces.common.refresh' | transloco"
+                (click)="refresh()">
+                <refresh-icon />
+              </button>
+            </div>
+          }
         }
       </div>
 
@@ -5842,6 +6105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
           </p>
         }
 
+        @if (!deletedElsewhere()) {
         <div class="mb-3 flex flex-wrap items-center gap-2">
           <div role="group" class="inline-flex gap-1 rounded-full bg-(--bg-primary-lighter) p-0.5">
             <button
@@ -5912,6 +6176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
             {{ "documentWorkspaces.detail.fileCount" | transloco: { count: workspace.documentCount } }}
           }
         </p>
+        }
       }
 
       @if (refreshError(); as message) {
@@ -5937,7 +6202,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
           </div>
         }
         @default {
-          @if (workspace(); as workspace) {
+          @if (deletedElsewhere()) {
+            <div class="flex flex-col items-center gap-1 py-8 text-center" data-testid="not-found">
+              <not-found-icon />
+              <p class="max-w-70 text-sm text-(--font-primary-base)">{{ "documentWorkspaces.errors.notFound" | transloco }}</p>
+              <button variant="secondary" size="sm" class="mt-2" (click)="leave()">{{ "documentWorkspaces.detail.back" | transloco }}</button>
+            </div>
+          } @else if (workspace(); as workspace) {
             @if (!documents().length) {
               <div class="flex flex-col items-center gap-1 py-8 text-center" data-testid="empty">
                 <empty-folder-icon />