@sinequa/atomic-angular 2.15.0 → 2.16.0

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

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, Pipe, ViewEncapsulation, afterNextRender, assertInInjectionContext, booleanAttribute, computed, effect, forwardRef, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
 import { withDevtools } from "@ngrx-toolkit/core";
 import { patchState, signalStore, withComputed, withMethods, withState } from "@ngrx/signals";
-import { ApiError, addWorkspaceDocuments, createHeaders, createWorkspace, deleteWorkspaceDocuments, deleteWorkspaces, fetchPreview, fetchPrincipal, fetchPrincipalsByIds, fetchUploadStatus, getWorkspace, globalConfig, listWorkspaceDocuments, listWorkspaces, onAuthEvent, searchPrincipals, tryAutoAuthentication, updateWorkspace } from "@sinequa/atomic";
+import { ApiError, addWorkspaceDocuments, createHeaders, createWorkspace, deleteWorkspaceDocuments, deleteWorkspaces, fetchPreview, fetchPrincipal, fetchPrincipalsByIds, fetchUploadStatus, fetchWorkspace, fetchWorkspaceContent, fetchWorkspaces, globalConfig, onAuthEvent, searchPrincipals, tryAutoAuthentication, updateWorkspace } from "@sinequa/atomic";
 import { Upload } from "tus-js-client";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
@@ -42,7 +42,46 @@ function mapWireWorkspaceToWorkspace(dto) {
 		creatorId: dto.creator,
 		ownerIds: dto.owners ?? [],
 		readerIds: dto.readers ?? [],
-		currentUserRole: dto.currentUserRole
+		currentUserRole: dto.currentUserRole,
+		membersKnown: true
+	};
+}
+function parseMeta(record) {
+	const meta = record.meta;
+	if (typeof meta !== "string") return {};
+	try {
+		const parsed = JSON.parse(meta);
+		return parsed && typeof parsed === "object" ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+const asString = (value) => typeof value === "string" ? value : void 0;
+function mapWorkspaceRecordToWorkspace(record) {
+	const flags = record;
+	const meta = parseMeta(record);
+	return {
+		id: record.id,
+		name: record.title ?? "",
+		color: workspaceColorFor(record.id),
+		description: asString(meta["description"]) ?? "",
+		tags: Array.isArray(meta["tags"]) ? meta["tags"].filter((t) => typeof t === "string") : [],
+		documentCount: void 0,
+		creatorId: "",
+		ownerIds: [],
+		readerIds: [],
+		currentUserRole: flags.isCreator ? "creator" : flags.isOwner ? "owner" : "reader",
+		membersKnown: false
+	};
+}
+function mapDocumentRecordToWorkspaceDocument(record, workspaceId) {
+	const name = record.title ?? "";
+	return {
+		id: record.id,
+		name,
+		workspaceId,
+		type: getDocumentType(name),
+		createdAt: asString(parseMeta(record)["createdAt"])
 	};
 }
 function mapDocumentStatus(status) {
@@ -71,6 +110,7 @@ function mapWireDocumentToWorkspaceDocument(dto) {
 	};
 }
 const PAGE_SIZE = 100;
+const WORKSPACES_QUERY_NAME = "query_Web";
 const initialState$1 = {
 	workspaces: [],
 	loaded: false,
@@ -81,10 +121,12 @@ const initialState$1 = {
 	},
 	documents: {},
 	documentPagination: {},
-	selectedIds: []
+	selectedIds: [],
+	searchText: "",
+	documentSearch: {}
 };
 function withDocumentCountAdjusted(workspaces, id, delta) {
-	return workspaces.map((w) => w.id === id ? {
+	return workspaces.map((w) => w.id === id && w.documentCount !== void 0 ? {
 		...w,
 		documentCount: Math.max(0, w.documentCount + delta)
 	} : w);
@@ -118,19 +160,30 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			};
 		});
 	};
+	const documentText = (workspaceId) => store.documentSearch()[workspaceId] ?? "";
 	const loadDocuments = async (workspaceId, signal) => {
-		const res = await listWorkspaceDocuments(workspaceId, {
+		const text = documentText(workspaceId);
+		const res = await fetchWorkspaceContent(workspaceId, {
+			queryName: WORKSPACES_QUERY_NAME,
+			text,
 			page: 1,
 			pageSize: PAGE_SIZE
 		}, { signal });
-		const documents = res.documents.map(mapWireDocumentToWorkspaceDocument);
-		patchState(store, (state) => ({ documentPagination: {
-			...state.documentPagination,
-			[workspaceId]: {
-				page: res.page,
-				total: res.total
-			}
-		} }));
+		if (documentText(workspaceId) !== text) return store.documents()[workspaceId] ?? [];
+		const documents = res.records.map((r) => mapDocumentRecordToWorkspaceDocument(r, workspaceId));
+		patchState(store, (state) => ({
+			documentPagination: {
+				...state.documentPagination,
+				[workspaceId]: {
+					page: res.page,
+					total: res.rowCount
+				}
+			},
+			workspaces: text ? state.workspaces : state.workspaces.map((w) => w.id === workspaceId ? {
+				...w,
+				documentCount: res.rowCount
+			} : w)
+		}));
 		setDocuments(workspaceId, documents);
 		return documents;
 	};
@@ -140,25 +193,32 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			await loadDocuments(workspaceId);
 		} catch {}
 	};
+	let loadSeq = 0;
 	const load = async () => {
+		const seq = ++loadSeq;
 		patchState(store, { loading: true });
 		try {
-			const res = await listWorkspaces({
+			const res = await fetchWorkspaces({
+				queryName: WORKSPACES_QUERY_NAME,
+				text: store.searchText(),
 				page: 1,
 				pageSize: PAGE_SIZE
 			});
+			if (seq !== loadSeq) return store.workspaces();
 			patchState(store, {
-				workspaces: res.workspaces.map(mapWireWorkspaceToWorkspace),
+				workspaces: res.records.map(mapWorkspaceRecordToWorkspace),
 				pagination: {
 					page: res.page,
-					total: res.total
+					total: res.rowCount
 				},
 				loaded: true
 			});
 			return store.workspaces();
 		} finally {
-			patchState(store, { loading: false });
-			loadingPromise = null;
+			if (seq === loadSeq) {
+				patchState(store, { loading: false });
+				loadingPromise = null;
+			}
 		}
 	};
 	return {
@@ -181,24 +241,35 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			loadingPromise ??= load();
 			return loadingPromise;
 		},
+		search(text) {
+			const value = text.trim();
+			if (value === store.searchText()) return loadingPromise ?? Promise.resolve(store.workspaces());
+			patchState(store, { searchText: value });
+			loadingPromise = load();
+			return loadingPromise;
+		},
 		loadMore() {
 			if (!store.hasMore()) return Promise.resolve(store.workspaces());
 			loadingMorePromise ??= (async () => {
 				try {
 					const current = store.workspaces();
 					const page = Math.min(store.pagination().page + 1, Math.floor(current.length / PAGE_SIZE) + 1);
-					const res = await listWorkspaces({
+					const text = store.searchText();
+					const res = await fetchWorkspaces({
+						queryName: WORKSPACES_QUERY_NAME,
+						text,
 						page,
 						pageSize: PAGE_SIZE
 					});
+					if (text !== store.searchText()) return store.workspaces();
 					patchState(store, (state) => {
 						const loaded = new Set(state.workspaces.map((w) => w.id));
-						const fresh = res.workspaces.map(mapWireWorkspaceToWorkspace).filter((w) => !loaded.has(w.id));
+						const fresh = res.records.map(mapWorkspaceRecordToWorkspace).filter((w) => !loaded.has(w.id));
 						return {
 							workspaces: [...state.workspaces, ...fresh],
 							pagination: {
 								page: res.page,
-								total: res.total
+								total: res.rowCount
 							}
 						};
 					});
@@ -210,7 +281,17 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 			return loadingMorePromise;
 		},
 		async fetch(id) {
-			const workspace = mapWireWorkspaceToWorkspace(await getWorkspace(id));
+			const fetched = mapWorkspaceRecordToWorkspace(await fetchWorkspace(id, { queryName: WORKSPACES_QUERY_NAME }));
+			if (fetched.id !== id) throw new ApiError(`Workspace ${id} not found`, 404);
+			const cached = store.workspaces().find((w) => w.id === id);
+			const workspace = cached ? {
+				...fetched,
+				documentCount: cached.documentCount,
+				creatorId: cached.creatorId,
+				ownerIds: cached.ownerIds,
+				readerIds: cached.readerIds,
+				membersKnown: cached.membersKnown
+			} : fetched;
 			patchState(store, (state) => ({ workspaces: state.workspaces.some((w) => w.id === id) ? state.workspaces.map((w) => w.id === id ? workspace : w) : [...state.workspaces, workspace] }));
 			return workspace;
 		},
@@ -270,27 +351,48 @@ const WorkspacesStore = signalStore({ providedIn: "root" }, withDevtools("Worksp
 				} : state.pagination,
 				documents: Object.fromEntries(Object.entries(state.documents).filter(([wid]) => wid !== id)),
 				documentPagination: Object.fromEntries(Object.entries(state.documentPagination).filter(([wid]) => wid !== id)),
+				documentSearch: Object.fromEntries(Object.entries(state.documentSearch).filter(([wid]) => wid !== id)),
 				selectedIds: state.selectedIds.filter((selected) => selected !== id)
 			}));
 		},
 		loadDocuments,
+		searchDocuments(workspaceId, text, signal) {
+			const value = text.trim();
+			if (value === documentText(workspaceId)) return Promise.resolve(store.documents()[workspaceId] ?? []);
+			patchState(store, (state) => ({ documentSearch: {
+				...state.documentSearch,
+				[workspaceId]: value
+			} }));
+			return loadDocuments(workspaceId, signal);
+		},
+		resetDocumentSearch(workspaceId) {
+			if (!documentText(workspaceId)) return;
+			patchState(store, (state) => ({ documentSearch: {
+				...state.documentSearch,
+				[workspaceId]: ""
+			} }));
+		},
 		async loadMoreDocuments(workspaceId) {
 			const current = store.documents()[workspaceId] ?? [];
 			const pagination = store.documentPagination()[workspaceId];
 			if (!pagination || current.length >= pagination.total) return current;
 			const page = Math.min(pagination.page + 1, Math.floor(current.length / PAGE_SIZE) + 1);
-			const res = await listWorkspaceDocuments(workspaceId, {
+			const text = documentText(workspaceId);
+			const res = await fetchWorkspaceContent(workspaceId, {
+				queryName: WORKSPACES_QUERY_NAME,
+				text,
 				page,
 				pageSize: PAGE_SIZE
 			});
+			if (documentText(workspaceId) !== text) return store.documents()[workspaceId] ?? [];
 			const loaded = new Set(current.map((d) => d.id));
-			const fresh = res.documents.map(mapWireDocumentToWorkspaceDocument).filter((d) => !loaded.has(d.id));
+			const fresh = res.records.map((r) => mapDocumentRecordToWorkspaceDocument(r, workspaceId)).filter((d) => !loaded.has(d.id));
 			const merged = [...current, ...fresh];
 			patchState(store, (state) => ({ documentPagination: {
 				...state.documentPagination,
 				[workspaceId]: {
 					page: res.page,
-					total: res.total
+					total: res.rowCount
 				}
 			} }));
 			setDocuments(workspaceId, merged);
@@ -2089,7 +2191,7 @@ function injectWorkspaceFilter(workspaces, options = {}) {
 		}, ...ngDevMode ? [{ debugName: "counts" }] : /* istanbul ignore next */ []),
 		filtered: computed(() => workspaces().filter((w) => {
 			const inTab = tab() === "all" || tab() === "editor" === canWrite(w.currentUserRole);
-			const inQuery = matchesText(w.name, query()) || options.fields?.() === "name+description" && matchesText(w.description, query());
+			const inQuery = options.serverSide || matchesText(w.name, query()) || options.fields?.() === "name+description" && matchesText(w.description, query());
 			return inTab && inQuery;
 		}), ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []),
 		clearQuery: () => query.set("")
@@ -5123,8 +5225,10 @@ var WorkspaceRow = class WorkspaceRow {
     </div>
 
     <div role="cell" class="flex items-center gap-1 text-xs text-(--font-primary-base)">
-      <file-icon class="size-3 text-(--font-primary-muted)" />
-      {{ workspace().documentCount }}
+      @if (workspace().documentCount !== undefined) {
+        <file-icon class="size-3 text-(--font-primary-muted)" />
+        {{ workspace().documentCount }}
+      }
     </div>
 
     <div role="cell"><workspace-role-tag [role]="workspace().currentUserRole" /></div>
@@ -5320,8 +5424,10 @@ i0.ɵɵngDeclareClassMetadata({
     </div>
 
     <div role="cell" class="flex items-center gap-1 text-xs text-(--font-primary-base)">
-      <file-icon class="size-3 text-(--font-primary-muted)" />
-      {{ workspace().documentCount }}
+      @if (workspace().documentCount !== undefined) {
+        <file-icon class="size-3 text-(--font-primary-muted)" />
+        {{ workspace().documentCount }}
+      }
     </div>
 
     <div role="cell"><workspace-role-tag [role]="workspace().currentUserRole" /></div>
@@ -5537,10 +5643,12 @@ var WorkspaceCard = class WorkspaceCard {
     <div class="mb-3 h-px bg-(--stroke-primary-lighter)"></div>
     <div class="flex items-center justify-between gap-2">
       <workspace-role-tag [role]="workspace().currentUserRole" />
-      <span class="ml-auto flex shrink-0 items-center gap-1 text-xs text-(--font-primary-muted)">
-        <file-icon class="size-3" />
-        {{ workspace().documentCount }}
-      </span>
+      @if (workspace().documentCount !== undefined) {
+        <span class="ml-auto flex shrink-0 items-center gap-1 text-xs text-(--font-primary-muted)">
+          <file-icon class="size-3" />
+          {{ workspace().documentCount }}
+        </span>
+      }
     </div>
   `,
 		isInline: true,
@@ -5727,10 +5835,12 @@ i0.ɵɵngDeclareClassMetadata({
     <div class="mb-3 h-px bg-(--stroke-primary-lighter)"></div>
     <div class="flex items-center justify-between gap-2">
       <workspace-role-tag [role]="workspace().currentUserRole" />
-      <span class="ml-auto flex shrink-0 items-center gap-1 text-xs text-(--font-primary-muted)">
-        <file-icon class="size-3" />
-        {{ workspace().documentCount }}
-      </span>
+      @if (workspace().documentCount !== undefined) {
+        <span class="ml-auto flex shrink-0 items-center gap-1 text-xs text-(--font-primary-muted)">
+          <file-icon class="size-3" />
+          {{ workspace().documentCount }}
+        </span>
+      }
     </div>
   `
 		}]
@@ -5804,6 +5914,7 @@ const TABS = [
 		labelKey: "documentWorkspaces.list.tabReader"
 	}
 ];
+const SEARCH_DEBOUNCE_MS$1 = 300;
 var WorkspaceList = class WorkspaceList {
 	opened = output();
 	createRequested = output();
@@ -5818,7 +5929,7 @@ var WorkspaceList = class WorkspaceList {
 	refreshError = signal(null, ...ngDevMode ? [{ debugName: "refreshError" }] : /* istanbul ignore next */ []);
 	loadingMore = signal(false, ...ngDevMode ? [{ debugName: "loadingMore" }] : /* istanbul ignore next */ []);
 	loadMoreError = signal(null, ...ngDevMode ? [{ debugName: "loadMoreError" }] : /* istanbul ignore next */ []);
-	filter = injectWorkspaceFilter(this.store.workspaces);
+	filter = injectWorkspaceFilter(this.store.workspaces, { serverSide: true });
 	searchForm = form(this.filter.query);
 	selection = injectSelection({
 		items: this.filter.filtered,
@@ -5839,6 +5950,24 @@ var WorkspaceList = class WorkspaceList {
 	constructor() {
 		this.uploads.startPolling();
 		this.load();
+		effect((onCleanup) => {
+			const value = this.filter.query().trim();
+			const timer = setTimeout(() => untracked(() => void this.search(value)), value ? SEARCH_DEBOUNCE_MS$1 : 0);
+			onCleanup(() => clearTimeout(timer));
+		});
+		inject(DestroyRef).onDestroy(() => {
+			if (this.store.searchText()) this.store.search("").catch(() => void 0);
+		});
+	}
+	async search(value) {
+		if (this.status() !== "ready" || value === this.store.searchText()) return;
+		this.refreshError.set(null);
+		try {
+			await this.store.search(value);
+			this.selection.exit();
+		} catch (error) {
+			this.refreshError.set(this.translate(workspaceErrorMessage(error)));
+		}
 	}
 	async load() {
 		this.loadError.set(null);
@@ -5931,7 +6060,7 @@ var WorkspaceList = class WorkspaceList {
 		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 (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    <Tabs class=\"mb-3 max-w-full\">\n      <TabList\n        variant=\"inner\"\n        class=\"w-fit max-w-full\"\n        selectionMode=\"explicit\"\n        [softDisabled]=\"false\"\n        [attr.aria-label]=\"'documentWorkspaces.list.title' | transloco\"\n        [selectedTab]=\"filter.tab()\"\n        (selectedTabChange)=\"onTabChange($event)\">\n        @for (item of tabs; track item.tab) {\n          <Tab [value]=\"item.tab\" variant=\"inner\">\n            @switch (item.tab) {\n              @case (\"editor\") {\n                <user-icon class=\"shrink-0\" />\n              }\n              @case (\"reader\") {\n                <user-round-icon class=\"shrink-0\" />\n              }\n            }\n            <span>{{ item.labelKey | transloco }}</span>\n            <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"shrink-0\" [attr.data-testid]=\"'badge-' + item.tab\">{{ filter.counts()[item.tab] }}</Badge>\n          </Tab>\n        }\n      </TabList>\n    </Tabs>\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      <SearchInput\n        role=\"search\"\n        class=\"min-w-32 flex-[0_1_15rem]\"\n        [formField]=\"searchForm\"\n        [placeholder]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [aria-label]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\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=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n              {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n            </button>\n            <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n              <x-mark-icon />\n              {{ \"documentWorkspaces.common.delete\" | transloco }}\n            </button>\n          </div>\n        }\n        <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" 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=\"sm\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n        </div>\n      }\n      @default {\n        @if (!filter.filtered().length) {\n          <p class=\"py-8 text-center text-sm text-(--font-primary-muted)\" data-testid=\"empty\">\n            {{ (store.workspaces().length ? \"documentWorkspaces.list.noMatch\" : \"documentWorkspaces.list.empty\") | transloco }}\n          </p>\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                  <checkbox\n                    [checked]=\"selection.allSelected()\"\n                    [indeterminate]=\"selection.partiallySelected()\"\n                    [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                    (checkedChange)=\"selection.toggleAll()\" />\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  ",
+		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 (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    <Tabs class=\"mb-3 max-w-full\">\n      <TabList\n        variant=\"inner\"\n        class=\"w-fit max-w-full\"\n        selectionMode=\"explicit\"\n        [softDisabled]=\"false\"\n        [attr.aria-label]=\"'documentWorkspaces.list.title' | transloco\"\n        [selectedTab]=\"filter.tab()\"\n        (selectedTabChange)=\"onTabChange($event)\">\n        @for (item of tabs; track item.tab) {\n          <Tab [value]=\"item.tab\" variant=\"inner\">\n            @switch (item.tab) {\n              @case (\"editor\") {\n                <user-icon class=\"shrink-0\" />\n              }\n              @case (\"reader\") {\n                <user-round-icon class=\"shrink-0\" />\n              }\n            }\n            <span>{{ item.labelKey | transloco }}</span>\n            <Badge variant=\"number\" fill=\"primary\" scheme=\"sage\" size=\"xs\" class=\"shrink-0\" [attr.data-testid]=\"'badge-' + item.tab\">{{ filter.counts()[item.tab] }}</Badge>\n          </Tab>\n        }\n      </TabList>\n    </Tabs>\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      <SearchInput\n        role=\"search\"\n        class=\"min-w-32 flex-[0_1_15rem]\"\n        [formField]=\"searchForm\"\n        [placeholder]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [aria-label]=\"'documentWorkspaces.list.searchPlaceholder' | transloco\"\n        [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\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=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n              {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n            </button>\n            <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n              <x-mark-icon />\n              {{ \"documentWorkspaces.common.delete\" | transloco }}\n            </button>\n          </div>\n        }\n        <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" 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=\"sm\" (click)=\"load()\">{{ \"documentWorkspaces.common.retry\" | transloco }}</button>\n        </div>\n      }\n      @default {\n        @if (!filter.filtered().length) {\n          <p class=\"py-8 text-center text-sm text-(--font-primary-muted)\" data-testid=\"empty\">\n            {{ ((store.workspaces().length || filter.query().trim()) ? \"documentWorkspaces.list.noMatch\" : \"documentWorkspaces.list.empty\") | transloco }}\n          </p>\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                  <checkbox\n                    [checked]=\"selection.allSelected()\"\n                    [indeterminate]=\"selection.partiallySelected()\"\n                    [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                    (checkedChange)=\"selection.toggleAll()\" />\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: [
 			{
@@ -6262,7 +6391,7 @@ i0.ɵɵngDeclareClassMetadata({
       @default {
         @if (!filter.filtered().length) {
           <p class="py-8 text-center text-sm text-(--font-primary-muted)" data-testid="empty">
-            {{ (store.workspaces().length ? "documentWorkspaces.list.noMatch" : "documentWorkspaces.list.empty") | transloco }}
+            {{ ((store.workspaces().length || filter.query().trim()) ? "documentWorkspaces.list.noMatch" : "documentWorkspaces.list.empty") | transloco }}
           </p>
         } @else if (viewMode() === "grid") {
           <div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] content-start gap-4 pb-8">
@@ -8203,24 +8332,43 @@ var ShareDialog = class ShareDialog {
 	staged = signal([], ...ngDevMode ? [{ debugName: "staged" }] : /* istanbul ignore next */ []);
 	adding = signal(false, ...ngDevMode ? [{ debugName: "adding" }] : /* istanbul ignore next */ []);
 	busy = signal(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	loadingMembers = signal(false, ...ngDevMode ? [{ debugName: "loadingMembers" }] : /* istanbul ignore next */ []);
 	error = signal(null, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
 	constructor() {
 		afterNextRender(() => {
 			this.dialog().showModal();
-			this.directory.ensureResolved(this.memberIds());
+			this.loadMembers();
 		});
 	}
+	async loadMembers() {
+		const workspace = this.workspace();
+		if (workspace && !workspace.membersKnown) {
+			this.error.set(null);
+			this.loadingMembers.set(true);
+			try {
+				await this.store.update(workspace.id, {});
+			} catch (error) {
+				this.error.set(workspaceErrorMessage(error));
+			} finally {
+				this.loadingMembers.set(false);
+			}
+		}
+		this.directory.ensureResolved(this.memberIds());
+	}
+	reloadMembers() {
+		this.loadMembers();
+	}
 	async add() {
 		const workspace = this.workspace();
 		const picked = this.staged();
-		if (!workspace || !picked.length) return;
+		if (!workspace?.membersKnown || !picked.length) return;
 		this.adding.set(true);
 		await this.save(() => withAdded(workspace, picked), () => this.staged.set([]));
 		this.adding.set(false);
 	}
 	async change(id, role) {
 		const workspace = this.workspace();
-		if (!workspace) return;
+		if (!workspace?.membersKnown) return;
 		await this.save(() => withRole(workspace, id, role));
 	}
 	async save(access, onSaved) {
@@ -8272,6 +8420,25 @@ var ShareDialog = class ShareDialog {
           @if (workspace(); as workspace) {
             <p class="text-(--font-primary-muted) mb-3 text-sm">{{ workspace.name }}</p>
 
+            @if (!workspace.membersKnown) {
+              @if (loadingMembers()) {
+                <p class="text-(--font-primary-muted) text-sm" aria-live="polite" data-testid="members-loading">{{ "documentWorkspaces.share.membersLoading" | transloco }}</p>
+              } @else {
+                <div class="flex flex-col items-start gap-2">
+                  <p role="alert" class="text-(--font-primary-muted) text-sm" data-testid="members-unavailable">{{ "documentWorkspaces.share.membersUnavailable" | transloco }}</p>
+                  @if (error(); as message) {
+                    <p class="text-(--font-error-base) text-sm" data-testid="members-error">
+                      @if ("key" in message) {
+                        {{ message.key | transloco }}
+                      } @else {
+                        {{ message.text }}
+                      }
+                    </p>
+                  }
+                  <button variant="secondary" size="sm" (click)="reloadMembers()">{{ "documentWorkspaces.common.retry" | transloco }}</button>
+                </div>
+              }
+            } @else {
             <div class="flex items-start gap-2">
               <principal-picker class="flex-1" [(entries)]="staged" [excludeIds]="memberIds()" />
               <button [disabled]="!staged().length || busy()" (click)="add()">
@@ -8297,6 +8464,7 @@ var ShareDialog = class ShareDialog {
             </div>
 
             <p class="text-(--font-primary-muted) text-xs">{{ "documentWorkspaces.share.accessNotice" | transloco }}</p>
+            }
           }
         </DialogBody>
 
@@ -8422,6 +8590,25 @@ i0.ɵɵngDeclareClassMetadata({
           @if (workspace(); as workspace) {
             <p class="text-(--font-primary-muted) mb-3 text-sm">{{ workspace.name }}</p>
 
+            @if (!workspace.membersKnown) {
+              @if (loadingMembers()) {
+                <p class="text-(--font-primary-muted) text-sm" aria-live="polite" data-testid="members-loading">{{ "documentWorkspaces.share.membersLoading" | transloco }}</p>
+              } @else {
+                <div class="flex flex-col items-start gap-2">
+                  <p role="alert" class="text-(--font-primary-muted) text-sm" data-testid="members-unavailable">{{ "documentWorkspaces.share.membersUnavailable" | transloco }}</p>
+                  @if (error(); as message) {
+                    <p class="text-(--font-error-base) text-sm" data-testid="members-error">
+                      @if ("key" in message) {
+                        {{ message.key | transloco }}
+                      } @else {
+                        {{ message.text }}
+                      }
+                    </p>
+                  }
+                  <button variant="secondary" size="sm" (click)="reloadMembers()">{{ "documentWorkspaces.common.retry" | transloco }}</button>
+                </div>
+              }
+            } @else {
             <div class="flex items-start gap-2">
               <principal-picker class="flex-1" [(entries)]="staged" [excludeIds]="memberIds()" />
               <button [disabled]="!staged().length || busy()" (click)="add()">
@@ -8447,6 +8634,7 @@ i0.ɵɵngDeclareClassMetadata({
             </div>
 
             <p class="text-(--font-primary-muted) text-xs">{{ "documentWorkspaces.share.accessNotice" | transloco }}</p>
+            }
           }
         </DialogBody>
 
@@ -9534,6 +9722,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const EditWorkspace = createCallable(WorkspaceEditDialog);
+const SEARCH_DEBOUNCE_MS = 300;
 var WorkspaceDetail = class WorkspaceDetail {
 	workspaceId = input.required(...ngDevMode ? [{ debugName: "workspaceId" }] : /* istanbul ignore next */ []);
 	uploadEndpoint = input("", ...ngDevMode ? [{ debugName: "uploadEndpoint" }] : /* istanbul ignore next */ []);
@@ -9565,10 +9754,7 @@ var WorkspaceDetail = class WorkspaceDetail {
 	previewWidth = computed(() => this.userPreviewWidth() ?? Math.max(280, Math.round(this.hostWidth() * .4)), ...ngDevMode ? [{ debugName: "previewWidth" }] : /* istanbul ignore next */ []);
 	maxPreviewWidth = computed(() => this.hostWidth() ? this.hostWidth() - 360 : void 0, ...ngDevMode ? [{ debugName: "maxPreviewWidth" }] : /* istanbul ignore next */ []);
 	hasMore = computed(() => this.store.hasMoreDocuments(this.workspaceId()), ...ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []);
-	filtered = computed(() => {
-		const query = this.query().trim();
-		return query ? this.documents().filter((d) => matchesText(d.name, query)) : this.documents();
-	}, ...ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []);
+	filtered = this.documents;
 	writable = computed(() => canWrite(this.workspace()?.currentUserRole), ...ngDevMode ? [{ debugName: "writable" }] : /* istanbul ignore next */ []);
 	selection = injectSelection({
 		items: this.filtered,
@@ -9604,6 +9790,12 @@ var WorkspaceDetail = class WorkspaceDetail {
 			this.workspaceId();
 			untracked(() => void this.open());
 		});
+		effect((onCleanup) => {
+			const value = this.query().trim();
+			const id = untracked(() => this.workspaceId());
+			const timer = setTimeout(() => untracked(() => void this.search(id, value)), value ? SEARCH_DEBOUNCE_MS : 0);
+			onCleanup(() => clearTimeout(timer));
+		});
 		effect(() => {
 			if (!this.writable()) untracked(() => this.selection.exit());
 		});
@@ -9613,12 +9805,25 @@ var WorkspaceDetail = class WorkspaceDetail {
 			observer.observe(host);
 			inject(DestroyRef).onDestroy(() => observer.disconnect());
 		}
-		inject(DestroyRef).onDestroy(() => this.uploads.watch(null));
+		inject(DestroyRef).onDestroy(() => {
+			this.uploads.watch(null);
+			this.store.resetDocumentSearch(this.workspaceId());
+		});
+	}
+	async search(id, value) {
+		if (this.status() !== "ready" || this.workspaceId() !== id || value === (this.store.documentSearch()[id] ?? "")) return;
+		this.refreshError.set(null);
+		try {
+			await this.store.searchDocuments(id, value);
+		} catch (error) {
+			if (this.workspaceId() === id) this.refreshError.set(this.translate(workspaceErrorMessage(error)));
+		}
 	}
 	async open() {
 		this.selection.exit();
 		this.previewedDocumentId.set(null);
 		this.query.set("");
+		this.store.resetDocumentSearch(this.workspaceId());
 		this.refreshError.set(null);
 		this.loadMoreError.set(null);
 		this.deletedElsewhere.set(false);
@@ -9780,7 +9985,7 @@ var WorkspaceDetail = class WorkspaceDetail {
 		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\n          size=\"sm\"\n          variant=\"tertiary\"\n          scheme=\"neutral\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'documentWorkspaces.detail.back' | transloco\"\n          [tooltip]=\"'documentWorkspaces.detail.back' | transloco\"\n          (click)=\"leave()\">\n          <chevron-left-icon />\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\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\n                class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\"\n                [writerOnly]=\"workspace.currentUserRole\"\n                (click)=\"confirmDeleteWorkspace(workspace)\">\n                <x-mark-icon />\n                {{ \"documentWorkspaces.common.delete\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"share(workspace)\">\n                <user-round-icon />\n                {{ \"documentWorkspaces.share.title\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"edit(workspace)\">\n                <pen-to-square-icon />\n                {{ \"documentWorkspaces.common.edit\" | transloco }}\n              </button>\n              <button\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\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          <SearchInput\n            role=\"search\"\n            class=\"min-w-32 flex-[0_1_15rem]\"\n            [formField]=\"searchForm\"\n            [placeholder]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [aria-label]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\n\n          <button class=\"@max-md:px-2\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"upload(workspace)\">\n            <upload-icon />\n            <span class=\"@max-md:sr-only\">{{ \"documentWorkspaces.detail.upload\" | transloco }}</span>\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=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n                  {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n                </button>\n                <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n                  <x-mark-icon />\n                  {{ \"documentWorkspaces.common.delete\" | transloco }}\n                </button>\n              </div>\n            }\n            <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" 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=\"sm\" (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              <div class=\"mb-1 inline-flex size-14 shrink-0 items-center justify-center rounded-(--radius-xl) bg-(--teal-100,#E0F4F1) text-(--teal-400,#4EBFB0)\">\n                <file-search-icon class=\"size-6\" />\n              </div>\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                <svg class=\"mb-1 block size-14 shrink-0\" width=\"56\" height=\"56\" viewBox=\"0 0 38 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-testid=\"empty-icon\">\n                  <g opacity=\"0.8\">\n                    <rect class=\"fill-(--teal-100,#E0F4F1)\" width=\"38\" height=\"38\" rx=\"12\" />\n                    <path\n                      d=\"M11.2 24.8504H26.8C27.1575 24.8504 27.45 24.5579 27.45 24.2004V14.4504C27.45 14.0929 27.1575 13.8004 26.8 13.8004H20.7347C20.0319 13.8004 19.3453 13.5729 18.7847 13.1504L17.2247 11.9804C17.1109 11.8951 16.9769 11.8504 16.8347 11.8504H11.2C10.8425 11.8504 10.55 12.1429 10.55 12.5004V24.2004C10.55 24.5579 10.8425 24.8504 11.2 24.8504ZM26.8 26.8004H11.2C9.76591 26.8004 8.59998 25.6345 8.59998 24.2004V12.5004C8.59998 11.0663 9.76591 9.90039 11.2 9.90039H16.8347C17.3953 9.90039 17.9437 10.0832 18.3947 10.4204L19.9547 11.5904C20.1781 11.761 20.4544 11.8504 20.7347 11.8504H26.8C28.234 11.8504 29.4 13.0163 29.4 14.4504V24.2004C29.4 25.6345 28.234 26.8004 26.8 26.8004Z\"\n                      class=\"fill-(--teal-400,#4EBFB0)\" />\n                  </g>\n                </svg>\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                      <checkbox\n                        [checked]=\"selection.allSelected()\"\n                        [indeterminate]=\"selection.partiallySelected()\"\n                        [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                        (checkedChange)=\"selection.toggleAll()\" />\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=\"sm\" [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 pointer-coarse: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  ",
+		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\n          size=\"sm\"\n          variant=\"tertiary\"\n          scheme=\"neutral\"\n          [iconOnly]=\"true\"\n          [attr.aria-label]=\"'documentWorkspaces.detail.back' | transloco\"\n          [tooltip]=\"'documentWorkspaces.detail.back' | transloco\"\n          (click)=\"leave()\">\n          <chevron-left-icon />\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\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\n                class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\"\n                [writerOnly]=\"workspace.currentUserRole\"\n                (click)=\"confirmDeleteWorkspace(workspace)\">\n                <x-mark-icon />\n                {{ \"documentWorkspaces.common.delete\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"share(workspace)\">\n                <user-round-icon />\n                {{ \"documentWorkspaces.share.title\" | transloco }}\n              </button>\n              <button size=\"sm\" variant=\"tertiary\" scheme=\"neutral\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"edit(workspace)\">\n                <pen-to-square-icon />\n                {{ \"documentWorkspaces.common.edit\" | transloco }}\n              </button>\n              <button\n                size=\"sm\"\n                variant=\"tertiary\"\n                scheme=\"neutral\"\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          <SearchInput\n            role=\"search\"\n            class=\"min-w-32 flex-[0_1_15rem]\"\n            [formField]=\"searchForm\"\n            [placeholder]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [aria-label]=\"'documentWorkspaces.detail.searchPlaceholder' | transloco\"\n            [clearLabel]=\"'documentWorkspaces.common.clearSearch' | transloco\" />\n\n          <button class=\"@max-md:px-2\" [writerOnly]=\"workspace.currentUserRole\" (click)=\"upload(workspace)\">\n            <upload-icon />\n            <span class=\"@max-md:sr-only\">{{ \"documentWorkspaces.detail.upload\" | transloco }}</span>\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=\"tertiary\" scheme=\"neutral\" size=\"sm\" (click)=\"selection.toggleAll()\">\n                  {{ (selection.allSelected() ? \"documentWorkspaces.common.unselectAll\" : \"documentWorkspaces.common.selectAll\") | transloco }}\n                </button>\n                <button class=\"text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest)\" variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" [disabled]=\"!selection.count()\" (click)=\"deleteSelected()\">\n                  <x-mark-icon />\n                  {{ \"documentWorkspaces.common.delete\" | transloco }}\n                </button>\n              </div>\n            }\n            <button variant=\"tertiary\" scheme=\"neutral\" size=\"sm\" 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 if (workspace.documentCount !== undefined) {\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=\"sm\" (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              <div class=\"mb-1 inline-flex size-14 shrink-0 items-center justify-center rounded-(--radius-xl) bg-(--teal-100,#E0F4F1) text-(--teal-400,#4EBFB0)\">\n                <file-search-icon class=\"size-6\" />\n              </div>\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 && !query().trim()) {\n              <div class=\"flex flex-col items-center gap-1 py-8 text-center\" data-testid=\"empty\">\n                <svg class=\"mb-1 block size-14 shrink-0\" width=\"56\" height=\"56\" viewBox=\"0 0 38 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" data-testid=\"empty-icon\">\n                  <g opacity=\"0.8\">\n                    <rect class=\"fill-(--teal-100,#E0F4F1)\" width=\"38\" height=\"38\" rx=\"12\" />\n                    <path\n                      d=\"M11.2 24.8504H26.8C27.1575 24.8504 27.45 24.5579 27.45 24.2004V14.4504C27.45 14.0929 27.1575 13.8004 26.8 13.8004H20.7347C20.0319 13.8004 19.3453 13.5729 18.7847 13.1504L17.2247 11.9804C17.1109 11.8951 16.9769 11.8504 16.8347 11.8504H11.2C10.8425 11.8504 10.55 12.1429 10.55 12.5004V24.2004C10.55 24.5579 10.8425 24.8504 11.2 24.8504ZM26.8 26.8004H11.2C9.76591 26.8004 8.59998 25.6345 8.59998 24.2004V12.5004C8.59998 11.0663 9.76591 9.90039 11.2 9.90039H16.8347C17.3953 9.90039 17.9437 10.0832 18.3947 10.4204L19.9547 11.5904C20.1781 11.761 20.4544 11.8504 20.7347 11.8504H26.8C28.234 11.8504 29.4 13.0163 29.4 14.4504V24.2004C29.4 25.6345 28.234 26.8004 26.8 26.8004Z\"\n                      class=\"fill-(--teal-400,#4EBFB0)\" />\n                  </g>\n                </svg>\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                      <checkbox\n                        [checked]=\"selection.allSelected()\"\n                        [indeterminate]=\"selection.partiallySelected()\"\n                        [aria-label]=\"'documentWorkspaces.common.selectAll' | transloco\"\n                        (checkedChange)=\"selection.toggleAll()\" />\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=\"sm\" [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 pointer-coarse: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: [
 			{
@@ -10145,7 +10350,7 @@ i0.ɵɵngDeclareClassMetadata({
         <p class="mb-6 text-sm text-(--font-primary-base)" aria-live="polite" data-testid="count">
           @if (selection.active()) {
             {{ "documentWorkspaces.detail.selectedDocumentCount" | transloco: { count: selection.count() } }}
-          } @else {
+          } @else if (workspace.documentCount !== undefined) {
             {{ "documentWorkspaces.detail.fileCount" | transloco: { count: workspace.documentCount } }}
           }
         </p>
@@ -10184,7 +10389,7 @@ i0.ɵɵngDeclareClassMetadata({
               <button variant="secondary" size="sm" class="mt-2" (click)="leave()">{{ "documentWorkspaces.detail.back" | transloco }}</button>
             </div>
           } @else if (workspace(); as workspace) {
-            @if (!documents().length) {
+            @if (!documents().length && !query().trim()) {
               <div class="flex flex-col items-center gap-1 py-8 text-center" data-testid="empty">
                 <svg class="mb-1 block size-14 shrink-0" width="56" height="56" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-testid="empty-icon">
                   <g opacity="0.8">
@@ -10682,7 +10887,9 @@ var WorkspaceMentionRows = class WorkspaceMentionRows {
                     <workspace-icon size="md" [color]="item.color" />
                     <span class="flex min-w-0 flex-col">
                       <span class="truncate text-(length:--size-base) font-semibold text-(--font-neutral-black)">{{ item.name }}</span>
-                      <span class="text-(length:--size-sm) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
+                      @if (item.documentCount !== undefined) {
+                        <span class="text-(length:--size-sm) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
+                      }
                     </span>
                   </span>
                 </checkbox>
@@ -10766,7 +10973,9 @@ i0.ɵɵngDeclareClassMetadata({
                     <workspace-icon size="md" [color]="item.color" />
                     <span class="flex min-w-0 flex-col">
                       <span class="truncate text-(length:--size-base) font-semibold text-(--font-neutral-black)">{{ item.name }}</span>
-                      <span class="text-(length:--size-sm) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
+                      @if (item.documentCount !== undefined) {
+                        <span class="text-(length:--size-sm) text-(--font-primary-muted)">{{ "documentWorkspaces.mention.documentCount" | transloco: { count: item.documentCount } }}</span>
+                      }
                     </span>
                   </span>
                 </checkbox>