@sinequa/atomic-angular 1.15.1 → 1.16.0

package/document-workspaces/index.d.ts

@@ -211,7 +211,8 @@ declare const WorkspacesStore: _angular_core.Type<{
     create: ({ name, description, tags, owners, readers }: CreateWorkspaceInput) => Promise<Workspace>;
     update: (id: string, patch: UpdateContainerInput) => Promise<Workspace | null>;
     remove: (ids: string[]) => Promise<RemoveWorkspacesResult>;
-    loadDocuments: (workspaceId: string) => Promise<WorkspaceDocument[]>;
+    forget: (id: string) => void;
+    loadDocuments: (workspaceId: string, signal?: AbortSignal) => Promise<WorkspaceDocument[]>;
     loadMoreDocuments: (workspaceId: string) => Promise<WorkspaceDocument[]>;
     addDocuments: (workspaceId: string, documents: WorkspaceDocument[]) => void;
     discardDocuments: (workspaceId: string, documentIds: string[]) => void;
@@ -868,7 +869,9 @@ type ViewMode$1 = "grid" | "list";
  * 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.
  */
 declare class WorkspaceList {
     /** A workspace was chosen for opening. */
@@ -897,7 +900,8 @@ declare class WorkspaceList {
         create: ({ name, description, tags, owners, readers }: _sinequa_atomic_angular_document_workspaces.CreateWorkspaceInput) => Promise<Workspace>;
         update: (id: string, patch: _sinequa_atomic.UpdateContainerInput) => Promise<Workspace | null>;
         remove: (ids: string[]) => Promise<_sinequa_atomic_angular_document_workspaces.RemoveWorkspacesResult>;
-        loadDocuments: (workspaceId: string) => Promise<_sinequa_atomic_angular_document_workspaces.WorkspaceDocument[]>;
+        forget: (id: string) => void;
+        loadDocuments: (workspaceId: string, signal?: AbortSignal) => Promise<_sinequa_atomic_angular_document_workspaces.WorkspaceDocument[]>;
         loadMoreDocuments: (workspaceId: string) => Promise<_sinequa_atomic_angular_document_workspaces.WorkspaceDocument[]>;
         addDocuments: (workspaceId: string, documents: _sinequa_atomic_angular_document_workspaces.WorkspaceDocument[]) => void;
         discardDocuments: (workspaceId: string, documentIds: string[]) => void;
@@ -936,6 +940,7 @@ declare class WorkspaceList {
         clearQuery: () => void;
     };
     protected readonly selection: _sinequa_atomic_angular_document_workspaces.Selection<Workspace>;
+    private readonly liveRefresh;
     constructor();
     /** Shows what is cached at once and refreshes behind it, or loads for the first time. */
     protected load(): Promise<void>;
@@ -1123,6 +1128,9 @@ type ViewMode = "grid" | "list";
  * 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.
  */
 declare class WorkspaceDetail {
@@ -1153,6 +1161,8 @@ declare class WorkspaceDetail {
     protected readonly refreshing: _angular_core.WritableSignal<boolean>;
     protected readonly loadingMore: _angular_core.WritableSignal<boolean>;
     protected readonly loadMoreError: _angular_core.WritableSignal<string | null>;
+    /** The background refresh found the workspace gone from the server (deleted elsewhere). */
+    protected readonly deletedElsewhere: _angular_core.WritableSignal<boolean>;
     protected readonly workspace: _angular_core.Signal<Workspace | undefined>;
     protected readonly documents: _angular_core.Signal<WorkspaceDocument[]>;
     protected readonly previewed: _angular_core.Signal<WorkspaceDocument | null>;
@@ -1167,8 +1177,15 @@ declare class WorkspaceDetail {
     protected readonly filtered: _angular_core.Signal<WorkspaceDocument[]>;
     private readonly writable;
     protected readonly selection: _sinequa_atomic_angular_document_workspaces.Selection<WorkspaceDocument>;
+    private readonly liveRefresh;
     constructor();
     private open;
+    /**
+     * 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.
+     */
+    protected leave(): void;
     /** Reads the workspace (when it is not cached) and its documents, for the workspace currently shown. */
     protected load(): Promise<void>;
     /** Reads the documents again without leaving the view; a failure leaves the ones shown as they are. */

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

@@ -7,7 +7,7 @@ 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';
 
@@ -164,8 +164,8 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
             };
         });
     };
-    const loadDocuments = async (workspaceId) => {
-        const res = await listContainerDocuments(workspaceId, { page: 1, pageSize: PAGE_SIZE });
+    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 } }
@@ -314,6 +314,23 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
             }));
             return { succeeded: result.succeeded, failed: result.failed.map(f => ({ id: f.containerId, error: f.error })) };
         },
+        /**
+         * 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 => ({
+                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)
+            }));
+        },
         loadDocuments,
         /** Without this, a workspace with more than one page of documents is silently truncated. */
         async loadMoreDocuments(workspaceId) {
@@ -2314,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.
  *
@@ -3063,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. */
@@ -3088,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();
     }
@@ -3097,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));
@@ -3889,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" }] : []));
@@ -5643,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 {
@@ -5673,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
@@ -5698,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();
@@ -5723,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();
@@ -5747,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() {
@@ -5846,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,
@@ -5863,6 +6029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.29", ngImpo
                         GridIcon,
                         ListIcon,
                         MagnifyingGlassIcon,
+                        NotFoundIcon,
                         PenToSquareIcon,
                         RefreshIcon,
                         ResizeHandle,
@@ -5886,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>
 
@@ -5894,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>
 
@@ -5936,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
@@ -6006,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) {
@@ -6031,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 />