includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/collection/collection-entries.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
+	import { getCollectionEntryDisplayLabel } from '../../utils/entryLabel.js';
 	import { getEntryThumbnail, type MediaThumbnailLookup } from '../../utils/entryThumbnail.js';
 	import { arrayMove } from '../../utils/arrayMove.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { CollectionConfigWithType } from '../../../types/collections.js';
 	import DataTable from './data-table.svelte';
-	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import type { ColumnDef, RowSelectionState, Table } from '@tanstack/table-core';
 	import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
 	import EntryLink from './entry-link.svelte';
@@ -25,10 +24,11 @@
 	import TablePagination from './table-pagination.svelte';
 	import GridView from './grid-view.svelte';
 	import BulkActionsBar from './bulk-actions-bar.svelte';
-	import EmptyState from './empty-state.svelte';
+	import StateDisplay from './state-display.svelte';
 	import { createCollectionViewState } from './collection-view.svelte.js';
 	import type { EntryStatus as EntryStatusType, RawEntry } from '../../../types/entries.js';
 	import type { RelationField, SelectField, RadioField } from '../../../types/fields.js';
+	import { resolveEntryUrl } from '../../../core/fields/slugPath.js';
 	import {
 		validateA11y,
 		a11yLangPl,
@@ -37,7 +37,6 @@
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 
 	const remotes = getRemotes();
-	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
 
 	const lang: Record<
@@ -121,9 +120,13 @@
 		collection: CollectionConfigWithType;
 		onCreateEntry: () => void;
 		addLabel: string;
+		data?: RawEntry[];
+		state?: 'loading' | 'error' | 'ok';
 	};
 
-	let { collection, onCreateEntry, addLabel }: Props = $props();
+	let { collection, onCreateEntry, addLabel, data: injectedData, state: injectedState }: Props = $props();
+
+	const useInjectedData = $derived(injectedData !== undefined);
 
 	const viewState = createCollectionViewState(collection.slug);
 
@@ -193,14 +196,16 @@
 
 	const hasActiveDataFilter = $derived(Object.values(activeDataFilters).some((v) => v !== null));
 
-	// Find seo field for slug extraction
-	const seoField = $derived(collection.fields.find((f) => f.type === 'seo'));
-
-	// Determine if we need fetch-all fallback (search active or sorting by name)
+	// Determine if we need the fetch-all fallback. Server pagination can't honour
+	// a client-side status filter (it would only see the current page) or
+	// search / sort-by-name, so in those cases we fetch the whole collection and
+	// filter / sort / paginate on the client.
 	const isSortingByName = $derived(
 		viewState.sorting.length > 0 && viewState.sorting[0].id === 'name'
 	);
-	const useServerPagination = $derived(!searchQuery && !isSortingByName);
+	const useServerPagination = $derived(
+		!searchQuery && !isSortingByName && !viewState.statusFilter
+	);
 
 	// Is the current filter for archived entries?
 	const isArchivedFilter = $derived(viewState.statusFilter === 'archived');
@@ -240,9 +245,21 @@
 				}
 	);
 
-	// Reactive query
+	// Reactive query (skipped when data is injected via prop)
 	const entriesQuery = $derived(remotes.getRawEntries(queryParams));
 
+	const dataResult = $derived(
+		useInjectedData
+			? { entries: injectedData ?? [], total: (injectedData ?? []).length }
+			: entriesQuery.current
+	);
+
+	const isReady = $derived(
+		useInjectedData ? injectedState !== 'loading' : entriesQuery.ready
+	);
+
+	const isError = $derived(useInjectedData && injectedState === 'error');
+
 	// Track relation labels
 	let labelLookup = $state<Record<string, string>>({});
 
@@ -409,7 +426,7 @@
 	}
 
 	function getVersionData(entry: RawEntry): Record<string, unknown> | undefined {
-		const lang = contentLanguage.current;
+		const lang = interfaceLanguage.current;
 		const draft = entry.draftVersions[lang];
 		const published = entry.publishedVersions[lang];
 		if (draft?.data) return draft.data as Record<string, unknown>;
@@ -444,15 +461,14 @@
 		return values;
 	}
 
-	function extractSlug(entry: RawEntry): string | undefined {
-		if (!seoField) return undefined;
+	function extractEntryUrl(entry: RawEntry): string | undefined {
 		const data = getVersionData(entry);
 		if (!data) return undefined;
-		const seoData = data[seoField.slug];
-		if (seoData && typeof seoData === 'object' && 'slug' in seoData) {
-			return (seoData as { slug?: string }).slug || undefined;
-		}
-		return undefined;
+		return resolveEntryUrl({
+			slugField: collection.slugField,
+			pathTemplate: collection.pathTemplate,
+			data: data as Record<string, unknown>
+		});
 	}
 
 	function countA11yWarnings(entry: RawEntry): number {
@@ -474,7 +490,7 @@
 		}
 		for (const entry of entries) {
 			// Collect UUIDs from all version sources (draft + published) to match mapEntryToRow
-			const lang = contentLanguage.current;
+			const lang = interfaceLanguage.current;
 			const dataSources = [
 				entry.publishedVersions[lang]?.data,
 				entry.draftVersions[lang]?.data,
@@ -545,7 +561,7 @@
 	function mapEntryToRow(entry: RawEntry, lookup: Record<string, string> = {}, mediaThumbs: MediaThumbnailLookup = {}): CollectionDataTableRow {
 		const data = getVersionData(entry) || {};
 		// For custom columns, prefer published data (complete) over draft (may be partial)
-		const lang = contentLanguage.current;
+		const lang = interfaceLanguage.current;
 		const columnData = entry.publishedVersions[lang]?.data || entry.draftVersions[lang]?.data || data;
 		const customData: Record<string, unknown> = {};
 		if (collection.listColumns) {
@@ -567,9 +583,10 @@
 						customData[fieldSlug] = '';
 					}
 				} else if (fieldData && typeof fieldData === 'object' && !Array.isArray(fieldData)) {
-					// For localized fields, extract current content language value
+					// Localized field — show the value in the UI language (fallback to any)
 					const localized = fieldData as Record<string, unknown>;
-					customData[fieldSlug] = localized[contentLanguage.current] ?? Object.values(localized)[0] ?? '';
+					customData[fieldSlug] =
+						localized[interfaceLanguage.current] ?? Object.values(localized)[0] ?? '';
 				} else {
 					customData[fieldSlug] = fieldData ?? '';
 				}
@@ -577,12 +594,10 @@
 		}
 		return {
 			id: entry.id,
-			name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
-			slug: (() => {
-				const s = extractSlug(entry);
-				if (!s) return undefined;
-				return collection.pathTemplate ? collection.pathTemplate.replace('{slug}', s) : s;
-			})(),
+			// Entry title in the admin list follows the UI language (with cross-language
+			// fallback) — the content-language selector only governs the editor.
+			name: getCollectionEntryDisplayLabel(entry, collection, interfaceLanguage.current),
+			slug: extractEntryUrl(entry),
 			url: `/admin/entries/${entry.id}`,
 			status: getEntryStatus(entry),
 			createdAt: new Date(entry.createdAt),
@@ -695,13 +710,15 @@
 	}
 </script>
 
-{#if !entriesQuery.ready}
+{#if isError}
+	<StateDisplay kind="error" />
+{:else if !isReady}
 	<div class="space-y-4 p-4">
 		<Skeleton class="h-10 w-full" />
 		<Skeleton class="h-64 w-full" />
 	</div>
-{:else if entriesQuery.current}
-	{@const result = entriesQuery.current}
+{:else if dataResult}
+	{@const result = dataResult}
 	{@const allRows = result.entries.map((e) => mapEntryToRow(e, labelLookup, mediaLookup))}
 	{@const filteredRows = (() => {
 		let rows = allRows;
@@ -754,7 +771,7 @@
 					(viewState.pageIndex + 1) * viewState.pageSize
 				)}
 
-	<div class:opacity-60={entriesQuery.loading} class="transition-opacity duration-200">
+	<div class:opacity-60={!useInjectedData && entriesQuery.loading} class="transition-opacity duration-200">
 	<TableToolbar
 		{searchQuery}
 		onSearchChange={(q) => {
@@ -765,8 +782,6 @@
 		onStatusFilterChange={(f) => (viewState.statusFilter = f)}
 		viewMode={viewState.viewMode}
 		onViewModeChange={(m) => (viewState.viewMode = m)}
-		{onCreateEntry}
-		createLabel={addLabel}
 		dataFilters={dataFilterConfigs}
 		{activeDataFilters}
 		onDataFilterChange={(slug, value) => {
@@ -776,7 +791,8 @@
 	/>
 
 	{#if totalItems === 0 && !searchQuery}
-		<EmptyState
+		<StateDisplay
+			kind="empty"
 			title={lang[interfaceLanguage.current].emptyTitle}
 			description={lang[interfaceLanguage.current].emptyDescription}
 			ctaLabel={addLabel}

package/dist/admin/client/collection/collection-entries.svelte.d.ts

@@ -1,8 +1,11 @@
 import type { CollectionConfigWithType } from '../../../types/collections.js';
+import type { RawEntry } from '../../../types/entries.js';
 type Props = {
     collection: CollectionConfigWithType;
     onCreateEntry: () => void;
     addLabel: string;
+    data?: RawEntry[];
+    state?: 'loading' | 'error' | 'ok';
 };
 declare const CollectionEntries: import("svelte").Component<Props, {}, "">;
 type CollectionEntries = ReturnType<typeof CollectionEntries>;

package/dist/admin/client/collection/collection.svelte

@@ -7,6 +7,10 @@
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import type { RawEntry } from '../../../types/entries.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import Plus from '@tabler/icons-svelte/icons/plus';
 
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
@@ -18,11 +22,15 @@
 
 	type Props = {
 		collection: CollectionConfigWithType;
+		data?: RawEntry[];
+		state?: 'loading' | 'error' | 'ok';
 	};
 
-	let { collection }: Props = $props();
+	let { collection, data: injectedData, state: injectedState }: Props = $props();
 	let entryCount = $state<number | null>(null);
 
+	const useInjectedData = $derived(injectedData !== undefined);
+
 	async function onCreateEntry() {
 		const newEntry = await remotes.createEntry({ type: 'collection', slug: collection.slug });
 		goto(`/admin/entries/${newEntry.id}`);
@@ -46,6 +54,10 @@
 	});
 
 	$effect(() => {
+		if (useInjectedData) {
+			entryCount = injectedData?.length ?? 0;
+			return;
+		}
 		remotes.getRawEntries({ slug: collection.slug }).then(({ total }) => {
 			entryCount = total;
 		});
@@ -53,18 +65,20 @@
 </script>
 
 <div class="p-5 pb-24 md:p-7">
-	<header class="mb-6">
-		<div class="mb-1 flex items-center gap-3">
-			<h1 class="text-foreground text-2xl font-bold">{collectionLabel}</h1>
-			{#if entryCount !== null}
-				<span
-					class="bg-muted text-muted-foreground inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-semibold"
-				>
-					{entryCount}
-				</span>
-			{/if}
-		</div>
-	</header>
+	<PageHeader title={collectionLabel} count={entryCount ?? undefined}>
+		{#snippet primaryActions()}
+			<Button onclick={onCreateEntry} data-testid="create-entry-button">
+				<Plus class="mr-1 size-4" />
+				{lang[interfaceLanguage.current].add}
+			</Button>
+		{/snippet}
+	</PageHeader>
 
-	<CollectionEntries {collection} {onCreateEntry} addLabel={lang[interfaceLanguage.current].add} />
+	<CollectionEntries
+		{collection}
+		{onCreateEntry}
+		addLabel={lang[interfaceLanguage.current].add}
+		data={injectedData}
+		state={injectedState}
+	/>
 </div>

package/dist/admin/client/collection/collection.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { CollectionConfigWithType } from '../../../types/collections.js';
+import type { RawEntry } from '../../../types/entries.js';
 type Props = {
     collection: CollectionConfigWithType;
+    data?: RawEntry[];
+    state?: 'loading' | 'error' | 'ok';
 };
 declare const Collection: import("svelte").Component<Props, {}, "">;
 type Collection = ReturnType<typeof Collection>;