includio-cms 0.25.0 → 0.27.0

package/dist/admin/client/admin/dashboard-page.svelte

@@ -6,6 +6,7 @@
 	import RecentActivity from '../../components/dashboard/recent-activity.svelte';
 	import A11yGauge from '../../components/dashboard/a11y-gauge.svelte';
 	import TipOfTheDay from '../../components/dashboard/tip-of-the-day.svelte';
+	import ConfirmationDialog from '../../components/dialogs/confirmation-dialog.svelte';
 	import { sidebarLang } from '../../components/layout/lang.js';
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
@@ -20,6 +21,23 @@
 	let orphanedEntries = $state<OrphanedEntry[]>([]);
 	let loadingOrphaned = $state(true);
 	let deletingOrphaned = $state(false);
+	let confirmDeleteOpen = $state(false);
+
+	const confirmText: Record<
+		InterfaceLanguage,
+		{ title: string; description: (n: number) => string }
+	> = {
+		pl: {
+			title: 'Usunąć osierocone wpisy?',
+			description: (n) =>
+				`${n} ${n === 1 ? 'wpis zostanie' : 'wpisy zostaną'} trwale usunięty z bazy. Tej akcji nie cofniesz.`
+		},
+		en: {
+			title: 'Delete orphaned entries?',
+			description: (n) =>
+				`${n} ${n === 1 ? 'entry' : 'entries'} will be permanently removed. This cannot be undone.`
+		}
+	};
 
 	async function fetchOrphanedEntries() {
 		try {
@@ -34,13 +52,11 @@
 		}
 	}
 
-	async function deleteOrphaned() {
-		const msg: Record<InterfaceLanguage, string> = {
-			pl: 'Czy na pewno chcesz usunąć te wpisy? Tej operacji nie można cofnąć.',
-			en: 'Are you sure you want to delete these entries? This cannot be undone.'
-		};
-		if (!confirm(msg[interfaceLanguage.current])) return;
+	function deleteOrphaned() {
+		confirmDeleteOpen = true;
+	}
 
+	async function performDeleteOrphaned() {
 		deletingOrphaned = true;
 		try {
 			const res = await fetch('/admin/api/orphaned', { method: 'DELETE' });
@@ -67,6 +83,14 @@
 	});
 </script>
 
+<ConfirmationDialog
+	bind:open={confirmDeleteOpen}
+	title={confirmText[interfaceLanguage.current].title}
+	description={confirmText[interfaceLanguage.current].description(orphanedEntries.length)}
+	loading={deletingOrphaned}
+	onConfirm={performDeleteOrphaned}
+/>
+
 <main class="dash-main">
 	{#if !loadingOrphaned}
 		<OrphanedEntriesNotice
@@ -78,9 +102,9 @@
 
 	<WelcomeHeader />
 
-	<div class="flex gap-5">
-		<div class="flex-1">
-			<div class="grid grid-cols-2 gap-5">
+	<div class="flex flex-col gap-5 lg:flex-row">
+		<div class="min-w-0 flex-1">
+			<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
 				<RecentEntries />
 				<FormSubmissionsWidget />
 			</div>
@@ -88,7 +112,7 @@
 				<RecentActivity />
 			</div>
 		</div>
-		<div class="max-w-80 flex-1 shrink-0">
+		<div class="w-full shrink-0 lg:max-w-80 lg:flex-1">
 			<A11yGauge />
 			<div class="mt-5">
 				<TipOfTheDay />

package/dist/admin/client/collection/bulk-actions-bar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick, type Snippet } from 'svelte';
 	import Archive from '@tabler/icons-svelte/icons/archive';
 	import ArchiveOff from '@tabler/icons-svelte/icons/archive-off';
 	import Trash from '@tabler/icons-svelte/icons/trash';
@@ -10,93 +11,134 @@
 
 	type Props = {
 		selectedCount: number;
-		onArchive: () => void;
+		onArchive?: () => void;
 		onDelete?: () => void;
 		onClear: () => void;
 		onRestore?: () => void;
+		actions?: Snippet;
 	};
 
-	let { selectedCount, onArchive, onDelete, onClear, onRestore }: Props = $props();
+	let { selectedCount, onArchive, onDelete, onClear, onRestore, actions }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
 
-	const lang: Record<InterfaceLanguage, {
-		selected: (n: number) => string;
-		archive: string;
-		restore: string;
-		delete: string;
-	}> = {
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			selected: (n: number) => string;
+			archive: string;
+			restore: string;
+			delete: string;
+			bulkActions: string;
+			clearSelection: string;
+		}
+	> = {
 		en: {
 			selected: (n) => `${n} selected`,
 			archive: 'Archive',
 			restore: 'Restore',
-			delete: 'Delete'
+			delete: 'Delete',
+			bulkActions: 'Bulk actions',
+			clearSelection: 'Clear selection'
 		},
 		pl: {
 			selected: (n) => `Zaznaczono: ${n}`,
 			archive: 'Archiwizuj',
 			restore: 'Przywróć',
-			delete: 'Usuń'
+			delete: 'Usuń',
+			bulkActions: 'Akcje masowe',
+			clearSelection: 'Wyczyść zaznaczenie'
 		}
 	};
 
 	const t = $derived(lang[interfaceLanguage.current]);
+
+	let toolbarRef = $state<HTMLElement | null>(null);
+	let prevCount = 0;
+
+	$effect(() => {
+		const count = selectedCount;
+		if (prevCount === 0 && count > 0) {
+			tick().then(() => {
+				const first = toolbarRef?.querySelector<HTMLElement>('button:not([aria-label])');
+				first?.focus();
+			});
+		}
+		prevCount = count;
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.stopPropagation();
+			onClear();
+		}
+	}
 </script>
 
 {#if selectedCount > 0}
 	<div
+		bind:this={toolbarRef}
 		class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2"
 		transition:fly={{ y: 40, duration: 200 }}
-		role="status"
-		aria-live="polite"
+		role="toolbar"
+		aria-label={t.bulkActions}
+		tabindex="-1"
+		onkeydown={handleKeydown}
 	>
 		<div
-			class="flex items-center gap-3 rounded-xl bg-plum-darker px-5 py-3 text-white shadow-xl"
+			class="flex max-w-[calc(100vw-2rem)] flex-wrap items-center justify-center gap-3 rounded-xl bg-plum-darker px-5 py-3 text-white shadow-xl"
 		>
-			<span class="text-sm font-medium">{t.selected(selectedCount)}</span>
+			<span class="text-sm font-medium" aria-hidden="true">{t.selected(selectedCount)}</span>
 
-			<div class="h-5 w-px bg-white/20"></div>
+			<div class="h-5 w-px bg-white/20" aria-hidden="true"></div>
 
 			{#if onRestore}
-			<Button
-				variant="ghost"
-				size="sm"
-				class="text-white hover:bg-white/10 hover:text-white"
-				onclick={onRestore}
-			>
-				<ArchiveOff class="mr-1.5 size-3.5" />
-				{t.restore}
-			</Button>
-			{:else}
-			<Button
-				variant="ghost"
-				size="sm"
-				class="text-white hover:bg-white/10 hover:text-white"
-				onclick={onArchive}
-			>
-				<Archive class="mr-1.5 size-3.5" />
-				{t.archive}
-			</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					class="text-white hover:bg-white/10 hover:text-white"
+					onclick={onRestore}
+				>
+					<ArchiveOff class="mr-1.5 size-3.5" />
+					{t.restore}
+				</Button>
+			{:else if onArchive}
+				<Button
+					variant="ghost"
+					size="sm"
+					class="text-white hover:bg-white/10 hover:text-white"
+					onclick={onArchive}
+				>
+					<Archive class="mr-1.5 size-3.5" />
+					{t.archive}
+				</Button>
 			{/if}
 			{#if onDelete}
-			<Button
-				variant="ghost"
-				size="sm"
-				class="text-white border border-white/20 hover:bg-white/10 hover:text-white"
-				onclick={onDelete}
-			>
-				<Trash class="mr-1.5 size-3.5" />
-				{t.delete}
-			</Button>
+				<Button
+					variant="ghost"
+					size="sm"
+					class="text-white border border-white/20 hover:bg-white/10 hover:text-white"
+					onclick={onDelete}
+				>
+					<Trash class="mr-1.5 size-3.5" />
+					{t.delete}
+				</Button>
+			{/if}
+			{#if actions}
+				{@render actions()}
 			{/if}
 
 			<button
+				type="button"
 				class="ml-1 rounded-md p-1 text-white/60 hover:bg-white/10 hover:text-white"
 				onclick={onClear}
-				aria-label="Clear selection"
+				aria-label={t.clearSelection}
 			>
 				<X class="size-4" />
 			</button>
 		</div>
 	</div>
+	<div aria-live="polite" aria-atomic="true" class="sr-only">
+		{t.selected(selectedCount)}
+	</div>
 {/if}

package/dist/admin/client/collection/bulk-actions-bar.svelte.d.ts

@@ -1,9 +1,11 @@
+import { type Snippet } from 'svelte';
 type Props = {
     selectedCount: number;
-    onArchive: () => void;
+    onArchive?: () => void;
     onDelete?: () => void;
     onClear: () => void;
     onRestore?: () => void;
+    actions?: Snippet;
 };
 declare const BulkActionsBar: import("svelte").Component<Props, {}, "">;
 type BulkActionsBar = ReturnType<typeof BulkActionsBar>;

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>;