includio-cms 0.1.3 → 0.5.0

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

@@ -1,31 +1,36 @@
 <script lang="ts">
-	import Plus from '@tabler/icons-svelte/icons/plus';
-	import Button from '../../../components/ui/button/button.svelte';
 	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import { getEntryThumbnail } from '../../utils/entryThumbnail.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, SortingState, Table } from '@tanstack/table-core';
+	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';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getEntryStatus } from '../entry/utils.js';
-	import * as Tabs from '../../../components/ui/tabs/index.js';
 	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
 	import { toast } from 'svelte-sonner';
-	import ArchivedActions from './archived-actions.svelte';
 	import StatusBadge from './status-badge.svelte';
+	import A11yScoreCell from './a11y-score-cell.svelte';
+	import RowActions from './row-actions.svelte';
 	import SortableHeader from './sortable-header.svelte';
 	import DateCell from './date-cell.svelte';
 	import SelectionCell from './selection-cell.svelte';
 	import TableToolbar from './table-toolbar.svelte';
 	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 { createCollectionViewState } from './collection-view.svelte.js';
-	import type { EntryStatus, RawEntry } from '../../../types/entries.js';
+	import type { EntryStatus as EntryStatusType, RawEntry } from '../../../types/entries.js';
+	import {
+		validateA11y,
+		a11yLangPl,
+		a11yLangEn
+	} from '../entry/header/a11y-validator.js';
 
 	const remotes = getRemotes();
 	const contentLanguage = getContentLanguage();
@@ -35,70 +40,70 @@
 		InterfaceLanguage,
 		{
 			name: string;
-			createdAt: string;
+			status: string;
+			a11y: string;
 			updatedAt: string;
-			active: string;
-			archived: string;
 			actions: string;
-			restore: string;
-			delete: string;
-			entryRestored: string;
-			entryDeleted: string;
 			selectAll: string;
 			selectRow: string;
 			entriesArchived: string;
+			entryDeleted: string;
 			deleteConfirmTitle: string;
 			deleteConfirmDescription: string;
 			cancel: string;
+			delete: string;
+			emptyTitle: string;
+			emptyDescription: string;
 		}
 	> = {
 		en: {
 			name: 'Name',
-			createdAt: 'Created At',
-			updatedAt: 'Updated At',
-			active: 'Active',
-			archived: 'Archived',
+			status: 'Status',
+			a11y: 'Accessibility',
+			updatedAt: 'Updated',
 			actions: 'Actions',
-			restore: 'Restore',
-			delete: 'Delete',
-			entryRestored: 'Entry restored',
-			entryDeleted: 'Entry permanently deleted',
 			selectAll: 'Select all',
 			selectRow: 'Select row',
 			entriesArchived: 'Entries archived',
+			entryDeleted: 'Entry permanently deleted',
 			deleteConfirmTitle: 'Delete entry permanently?',
-			deleteConfirmDescription: 'This action cannot be undone. The entry will be permanently deleted.',
-			cancel: 'Cancel'
+			deleteConfirmDescription:
+				'This action cannot be undone. The entry will be permanently deleted.',
+			cancel: 'Cancel',
+			delete: 'Delete',
+			emptyTitle: 'No entries yet',
+			emptyDescription: 'Create your first entry to get started.'
 		},
 		pl: {
 			name: 'Nazwa',
-			createdAt: 'Utworzono',
+			status: 'Status',
+			a11y: 'Dostępność',
 			updatedAt: 'Zaktualizowano',
-			active: 'Aktywne',
-			archived: 'Zarchiwizowane',
 			actions: 'Akcje',
-			restore: 'Przywróć',
-			delete: 'Usuń',
-			entryRestored: 'Wpis przywrócony',
-			entryDeleted: 'Wpis trwale usunięty',
 			selectAll: 'Zaznacz wszystkie',
 			selectRow: 'Zaznacz wiersz',
 			entriesArchived: 'Wpisy zarchiwizowane',
+			entryDeleted: 'Wpis trwale usunięty',
 			deleteConfirmTitle: 'Usunąć wpis na stałe?',
 			deleteConfirmDescription: 'Ta akcja jest nieodwracalna. Wpis zostanie trwale usunięty.',
-			cancel: 'Anuluj'
+			cancel: 'Anuluj',
+			delete: 'Usuń',
+			emptyTitle: 'Brak wpisów',
+			emptyDescription: 'Stwórz pierwszy wpis, aby rozpocząć.'
 		}
 	};
 
 	interface CollectionDataTableRow {
 		id: string;
 		name: string;
-		status: EntryStatus;
+		slug?: string;
+		status: EntryStatusType;
 		createdAt: Date;
 		updatedAt: Date;
 		url: string;
 		thumbnail: string | null;
 		searchText: string;
+		a11yWarnings: number;
 	}
 
 	type Props = {
@@ -117,44 +122,45 @@
 	let deleteDialogOpen = $state(false);
 	let pendingDeleteId = $state<string | null>(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)
 	const isSortingByName = $derived(
 		viewState.sorting.length > 0 && viewState.sorting[0].id === 'name'
 	);
 	const useServerPagination = $derived(!searchQuery && !isSortingByName);
 
+	// Is the current filter for archived entries?
+	const isArchivedFilter = $derived(viewState.statusFilter === 'archived');
+
 	// Build orderBy from sorting state for server-side mode
 	const serverOrderBy = $derived.by(() => {
 		if (!viewState.sorting.length) return undefined;
 		const { id, desc } = viewState.sorting[0];
 		if (id === 'createdAt' || id === 'updatedAt') {
-			return { column: id as 'createdAt' | 'updatedAt', direction: (desc ? 'desc' : 'asc') as 'asc' | 'desc' };
+			return {
+				column: id as 'createdAt' | 'updatedAt',
+				direction: (desc ? 'desc' : 'asc') as 'asc' | 'desc'
+			};
 		}
 		return undefined;
 	});
 
 	// Server-side query params
-	const activeQueryParams = $derived(
+	const queryParams = $derived(
 		useServerPagination
 			? {
 					slug: collection.slug,
+					...(isArchivedFilter ? { onlyArchived: true as const } : {}),
 					limit: viewState.pageSize,
 					offset: viewState.pageIndex * viewState.pageSize,
 					orderBy: serverOrderBy
 				}
-			: { slug: collection.slug }
-	);
-
-	const archivedQueryParams = $derived(
-		useServerPagination
-			? {
+			: {
 					slug: collection.slug,
-					onlyArchived: true as const,
-					limit: viewState.pageSize,
-					offset: viewState.pageIndex * viewState.pageSize,
-					orderBy: serverOrderBy
+					...(isArchivedFilter ? { onlyArchived: true as const } : {})
 				}
-			: { slug: collection.slug, onlyArchived: true as const }
 	);
 
 	const columns: ColumnDef<CollectionDataTableRow>[] = $derived([
@@ -174,7 +180,8 @@
 					ariaLabel: lang[interfaceLanguage.current].selectRow
 				}),
 			enableSorting: false,
-			enableHiding: false
+			enableHiding: false,
+			size: 40
 		},
 		{
 			accessorKey: 'name',
@@ -187,32 +194,30 @@
 			cell: (info) => {
 				return renderComponent(EntryLink, {
 					name: info.row.original.name,
-					url: info.row.original.url
+					url: info.row.original.url,
+					slug: info.row.original.slug?.[interfaceLanguage.current]
 				});
 			}
 		},
 		{
 			accessorKey: 'status',
-			header: 'Status',
+			header: lang[interfaceLanguage.current].status,
 			cell: (info) =>
 				renderComponent(StatusBadge, {
 					status: info.row.original.status
 				}),
-			enableSorting: false
+			enableSorting: false,
+			size: 130
 		},
 		{
-			accessorKey: 'createdAt',
-			header: ({ column }) =>
-				renderComponent(SortableHeader<CollectionDataTableRow>, {
-					column,
-					label: lang[interfaceLanguage.current].createdAt,
-					sorting: viewState.sorting
-				}),
+			id: 'a11y',
+			header: lang[interfaceLanguage.current].a11y,
 			cell: (info) =>
-				renderComponent(DateCell, {
-					date: info.row.original.createdAt,
-					format: viewState.dateFormat
-				})
+				renderComponent(A11yScoreCell, {
+					warningCount: info.row.original.a11yWarnings
+				}),
+			enableSorting: false,
+			size: 130
 		},
 		{
 			accessorKey: 'updatedAt',
@@ -225,61 +230,32 @@
 			cell: (info) =>
 				renderComponent(DateCell, {
 					date: info.row.original.updatedAt,
-					format: viewState.dateFormat
-				})
-		}
-	]);
-
-	interface ArchivedDataTableRow extends CollectionDataTableRow {
-		onRestore: () => void;
-		onDelete: () => void;
-	}
-
-	const archivedColumns: ColumnDef<ArchivedDataTableRow>[] = $derived([
-		{
-			accessorKey: 'name',
-			header: lang[interfaceLanguage.current].name
-		},
-		{
-			accessorKey: 'createdAt',
-			header: lang[interfaceLanguage.current].createdAt,
-			cell: (info) =>
-				renderComponent(DateCell, {
-					date: info.row.original.createdAt,
-					format: viewState.dateFormat
-				})
-		},
-		{
-			accessorKey: 'updatedAt',
-			header: lang[interfaceLanguage.current].updatedAt,
-			cell: (info) =>
-				renderComponent(DateCell, {
-					date: info.row.original.updatedAt,
-					format: viewState.dateFormat
-				})
+					format: 'short'
+				}),
+			size: 140
 		},
 		{
 			id: 'actions',
-			header: lang[interfaceLanguage.current].actions,
-			cell: (info) => {
-				return renderComponent(ArchivedActions, {
-					restoreLabel: lang[interfaceLanguage.current].restore,
-					deleteLabel: lang[interfaceLanguage.current].delete,
-					onRestore: info.row.original.onRestore,
-					onDelete: info.row.original.onDelete
-				});
-			}
+			header: '',
+			cell: (info) =>
+				renderComponent(RowActions, {
+					entryUrl: info.row.original.url,
+					entryName: info.row.original.name,
+					onArchive: () => handleArchiveSingle(info.row.original.id),
+					onDelete: () => handleDelete(info.row.original.id)
+				}),
+			enableSorting: false,
+			size: 50
 		}
 	]);
 
 	function refreshQueries() {
-		remotes.getRawEntries(activeQueryParams).refresh();
-		remotes.getRawEntries(archivedQueryParams).refresh();
+		remotes.getRawEntries(queryParams).refresh();
 	}
 
-	async function handleRestore(id: string) {
-		await remotes.unarchiveEntryCommand(id);
-		toast.success(lang[interfaceLanguage.current].entryRestored);
+	async function handleArchiveSingle(id: string) {
+		await remotes.archiveEntryCommand(id);
+		toast.success(lang[interfaceLanguage.current].entriesArchived);
 		refreshQueries();
 	}
 
@@ -321,24 +297,52 @@
 		return values;
 	}
 
+	function extractSlug(entry: RawEntry): string | undefined {
+		if (!seoField) return undefined;
+		const data = entry.draftVersion?.data || entry.publishedVersion?.data;
+		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;
+	}
+
+	function countA11yWarnings(entry: RawEntry): number {
+		const data = entry.draftVersion?.data || entry.publishedVersion?.data;
+		if (!data) return 0;
+		const a11yLang = interfaceLanguage.current === 'pl' ? a11yLangPl : a11yLangEn;
+		const issues = validateA11y(data as Record<string, unknown>, collection.fields, a11yLang);
+		return issues.filter((i) => i.type === 'warning').length;
+	}
+
 	function mapEntryToRow(entry: RawEntry): CollectionDataTableRow {
 		const data = entry.draftVersion?.data || entry.publishedVersion?.data || {};
 		return {
 			id: entry.id,
 			name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
+			slug: extractSlug(entry),
 			url: `/admin/entries/${entry.id}`,
 			status: getEntryStatus(entry),
 			createdAt: new Date(entry.createdAt),
 			updatedAt: new Date(entry.updatedAt),
 			thumbnail: getEntryThumbnail(data as Record<string, unknown>, collection),
-			searchText: getSearchText(entry)
+			searchText: getSearchText(entry),
+			a11yWarnings: countA11yWarnings(entry)
 		};
 	}
 
-	const selectedIndices = $derived(Object.keys(rowSelection).filter((k) => rowSelection[k]).map(Number));
+	const selectedIndices = $derived(
+		Object.keys(rowSelection)
+			.filter((k) => rowSelection[k])
+			.map(Number)
+	);
 	const selectedCount = $derived(selectedIndices.length);
 
-	function sortItems<T extends CollectionDataTableRow>(items: T[], sorting: SortingState): T[] {
+	function sortItems<T extends CollectionDataTableRow>(
+		items: T[],
+		sorting: typeof viewState.sorting
+	): T[] {
 		if (!sorting.length) return items;
 		const { id, desc } = sorting[0];
 		return [...items].sort((a, b) => {
@@ -354,6 +358,19 @@
 		});
 	}
 
+	function filterByStatus(items: CollectionDataTableRow[]): CollectionDataTableRow[] {
+		const filter = viewState.statusFilter;
+		// null = all non-archived, 'all' = everything, 'archived' handled by server
+		if (filter === null) {
+			return items.filter((item) => item.status !== 'archived');
+		}
+		if (filter === 'all' || filter === 'archived') {
+			return items;
+		}
+		// Specific status: published, draft, scheduled
+		return items.filter((item) => item.status === filter);
+	}
+
 	async function handleBulkArchive(items: CollectionDataTableRow[]) {
 		const idsToArchive = selectedIndices.map((idx) => items[idx]?.id).filter(Boolean);
 		for (const id of idsToArchive) {
@@ -364,64 +381,82 @@
 		refreshQueries();
 	}
 
+	async function handleBulkDelete(items: CollectionDataTableRow[]) {
+		const idsToDelete = selectedIndices.map((idx) => items[idx]?.id).filter(Boolean);
+		for (const id of idsToDelete) {
+			await remotes.deleteEntryCommand(id);
+		}
+		toast.success(lang[interfaceLanguage.current].entryDeleted);
+		rowSelection = {};
+		refreshQueries();
+	}
 </script>
 
-<Tabs.Root
-	value={viewState.activeTab}
-	onValueChange={(v) => {
-		if (v === 'active' || v === 'archived') viewState.activeTab = v;
-	}}
-	class="w-full"
->
-	<div class="flex items-center justify-between border-b border-slate-200/50 px-4 py-3 dark:border-white/10">
-		<Tabs.List class="h-auto gap-1 bg-transparent p-0">
-			<Tabs.Trigger value="active" class="rounded-lg px-3 py-1.5 text-sm font-medium data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-white">{lang[interfaceLanguage.current].active}</Tabs.Trigger>
-			<Tabs.Trigger value="archived" class="rounded-lg px-3 py-1.5 text-sm font-medium data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-white">{lang[interfaceLanguage.current].archived}</Tabs.Trigger>
-		</Tabs.List>
-		<Button type="button" onclick={onCreateEntry} variant="gradient" size="sm">
-			<Plus class="size-4" /> {addLabel}
-		</Button>
-	</div>
-
-	<Tabs.Content value="active" class="mt-0">
-		{#await remotes.getRawEntries(activeQueryParams) then result}
-			{@const allRows = result.entries.map(mapEntryToRow)}
-			{@const items = useServerPagination
-				? allRows
-				: (() => {
-						let filtered = searchQuery
-							? allRows.filter((item) => item.searchText.includes(searchQuery.toLowerCase()))
-							: allRows;
-						return sortItems(filtered, viewState.sorting);
-					})()}
-			{@const totalItems = useServerPagination ? result.total : items.length}
-			{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
-
-			<TableToolbar
-				{searchQuery}
-				onSearchChange={(q) => {
-					searchQuery = q;
-					viewState.pageIndex = 0;
-				}}
-				viewMode={viewState.viewMode}
-				onViewModeChange={(m) => (viewState.viewMode = m)}
-				dateFormat={viewState.dateFormat}
-				onDateFormatChange={(f) => (viewState.dateFormat = f)}
-				{selectedCount}
-				onBulkArchive={() => handleBulkArchive(items)}
+{#key JSON.stringify(queryParams)}
+	{#await remotes.getRawEntries(queryParams) then result}
+		{@const allRows = result.entries.map(mapEntryToRow)}
+		{@const filteredRows = (() => {
+			let rows = allRows;
+			// Client-side status filter (non-archived statuses)
+			if (!isArchivedFilter) {
+				rows = filterByStatus(rows);
+			}
+			// Client-side search
+			if (searchQuery) {
+				rows = rows.filter((item) => item.searchText.includes(searchQuery.toLowerCase()));
+			}
+			// Client-side sort (if sorting by name)
+			if (!useServerPagination) {
+				rows = sortItems(rows, viewState.sorting);
+			}
+			return rows;
+		})()}
+		{@const totalItems =
+			useServerPagination && !viewState.statusFilter && viewState.statusFilter !== 'archived'
+				? result.total
+				: filteredRows.length}
+		{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
+		{@const displayItems =
+			useServerPagination && !viewState.statusFilter
+				? filteredRows
+				: filteredRows.slice(
+						viewState.pageIndex * viewState.pageSize,
+						(viewState.pageIndex + 1) * viewState.pageSize
+					)}
+
+		<TableToolbar
+			{searchQuery}
+			onSearchChange={(q) => {
+				searchQuery = q;
+				viewState.pageIndex = 0;
+			}}
+			statusFilter={viewState.statusFilter}
+			onStatusFilterChange={(f) => (viewState.statusFilter = f)}
+			viewMode={viewState.viewMode}
+			onViewModeChange={(m) => (viewState.viewMode = m)}
+			{onCreateEntry}
+			createLabel={addLabel}
+		/>
+
+		{#if totalItems === 0 && !searchQuery}
+			<EmptyState
+				title={lang[interfaceLanguage.current].emptyTitle}
+				description={lang[interfaceLanguage.current].emptyDescription}
+				ctaLabel={addLabel}
+				onCta={onCreateEntry}
 			/>
-
-			{#if viewState.viewMode === 'list'}
-				{#if useServerPagination}
+		{:else if viewState.viewMode === 'list'}
+			<div class="bg-card overflow-hidden rounded-xl border shadow-sm">
+				{#if useServerPagination && !viewState.statusFilter}
 					<DataTable
-						data={items}
+						data={displayItems}
 						{columns}
 						enableSorting
 						enableFiltering
 						enableSelection
 						enablePagination
 						manualPagination={true}
-						pageCount={pageCount}
+						{pageCount}
 						rowCount={totalItems}
 						sorting={viewState.sorting}
 						onSortingChange={(s) => (viewState.sorting = s)}
@@ -435,7 +470,7 @@
 					/>
 				{:else}
 					<DataTable
-						data={items}
+						data={displayItems}
 						{columns}
 						enableSorting
 						enableFiltering
@@ -452,113 +487,77 @@
 						tableRef={(t) => (tableInstance = t)}
 					/>
 				{/if}
+			</div>
+
+			<TablePagination
+				pageIndex={viewState.pageIndex}
+				pageSize={viewState.pageSize}
+				{pageCount}
+				{totalItems}
+				onPageChange={(p) => (viewState.pageIndex = p)}
+				onPageSizeChange={(s) => {
+					viewState.pageSize = s;
+				}}
+			/>
+		{:else}
+			{@const gridItems = displayItems.map((item) => ({
+				id: item.id,
+				name: item.name,
+				slug: item.slug,
+				status: item.status,
+				url: item.url,
+				thumbnail: item.thumbnail,
+				updatedAt: item.updatedAt
+			}))}
 
-				<TablePagination
-					pageIndex={viewState.pageIndex}
-					pageSize={viewState.pageSize}
-					{pageCount}
-					{totalItems}
-					onPageChange={(p) => (viewState.pageIndex = p)}
-					onPageSizeChange={(s) => {
-						viewState.pageSize = s;
-					}}
-				/>
-			{:else}
-				{@const displayItems = useServerPagination
-					? items
-					: items.slice(
-							viewState.pageIndex * viewState.pageSize,
-							(viewState.pageIndex + 1) * viewState.pageSize
-						)}
-				<GridView
-					items={displayItems.map((item) => ({
-						id: item.id,
-						name: item.name,
-						status: item.status,
-						url: item.url,
-						thumbnail: item.thumbnail,
-						updatedAt: item.updatedAt
-					}))}
-					dateFormat={viewState.dateFormat}
-					enableSelection
-					selectedIds={new Set(selectedIndices.map((idx) => items[idx]?.id).filter(Boolean))}
-					onSelectionChange={(ids) => {
-						const newSelection: RowSelectionState = {};
-						for (const id of ids) {
-							const idx = items.findIndex((i) => i.id === id);
-							if (idx !== -1) {
-								newSelection[idx] = true;
-							}
+			<GridView
+				items={gridItems}
+				enableSelection
+				selectedIds={new Set(selectedIndices.map((idx) => displayItems[idx]?.id).filter(Boolean))}
+				onSelectionChange={(ids) => {
+					const newSelection: RowSelectionState = {};
+					for (const id of ids) {
+						const idx = displayItems.findIndex((i) => i.id === id);
+						if (idx !== -1) {
+							newSelection[idx] = true;
 						}
-						rowSelection = newSelection;
-					}}
-				/>
-
-				<TablePagination
-					pageIndex={viewState.pageIndex}
-					pageSize={viewState.pageSize}
-					{pageCount}
-					{totalItems}
-					onPageChange={(p) => (viewState.pageIndex = p)}
-					onPageSizeChange={(s) => {
-						viewState.pageSize = s;
-					}}
-				/>
-			{/if}
-		{/await}
-	</Tabs.Content>
-
-	<Tabs.Content value="archived" class="mt-0">
-		{#await remotes.getRawEntries(archivedQueryParams) then result}
-			{@const items = result.entries.map((entry) => ({
-				...mapEntryToRow(entry),
-				onRestore: () => handleRestore(entry.id),
-				onDelete: () => handleDelete(entry.id)
-			}))}
-			{@const totalItems = result.total}
-			{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
+					}
+					rowSelection = newSelection;
+				}}
+			/>
 
-			{#if useServerPagination}
-				<div class="p-4">
-					<DataTable
-						data={items}
-						columns={archivedColumns}
-						manualPagination={true}
-						pageCount={pageCount}
-						rowCount={totalItems}
-						enablePagination
-						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
-						onPaginationChange={(p) => {
-							viewState.pageIndex = p.pageIndex;
-						}}
-					/>
-				</div>
-				<TablePagination
-					pageIndex={viewState.pageIndex}
-					pageSize={viewState.pageSize}
-					{pageCount}
-					{totalItems}
-					onPageChange={(p) => (viewState.pageIndex = p)}
-					onPageSizeChange={(s) => {
-						viewState.pageSize = s;
-					}}
-				/>
-			{:else}
-				<div class="p-4">
-					<DataTable data={items} columns={archivedColumns} />
-				</div>
-			{/if}
-		{/await}
-	</Tabs.Content>
-</Tabs.Root>
+			<TablePagination
+				pageIndex={viewState.pageIndex}
+				pageSize={viewState.pageSize}
+				{pageCount}
+				{totalItems}
+				onPageChange={(p) => (viewState.pageIndex = p)}
+				onPageSizeChange={(s) => {
+					viewState.pageSize = s;
+				}}
+			/>
+		{/if}
+
+		<BulkActionsBar
+			{selectedCount}
+			onArchive={() => handleBulkArchive(displayItems)}
+			onDelete={() => handleBulkDelete(displayItems)}
+			onClear={() => (rowSelection = {})}
+		/>
+	{/await}
+{/key}
 
 <AlertDialog.Root bind:open={deleteDialogOpen}>
 	<AlertDialog.Content>
 		<AlertDialog.Title>{lang[interfaceLanguage.current].deleteConfirmTitle}</AlertDialog.Title>
-		<AlertDialog.Description>{lang[interfaceLanguage.current].deleteConfirmDescription}</AlertDialog.Description>
+		<AlertDialog.Description
+			>{lang[interfaceLanguage.current].deleteConfirmDescription}</AlertDialog.Description
+		>
 		<AlertDialog.Footer>
 			<AlertDialog.Cancel>{lang[interfaceLanguage.current].cancel}</AlertDialog.Cancel>
-			<AlertDialog.Action onclick={confirmDelete}>{lang[interfaceLanguage.current].delete}</AlertDialog.Action>
+			<AlertDialog.Action onclick={confirmDelete}
+				>{lang[interfaceLanguage.current].delete}</AlertDialog.Action
+			>
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
 </AlertDialog.Root>