includio-cms 0.0.69 → 0.1.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to includio-cms are documented here.
 Generated from `src/lib/updates/` — do not edit manually.
 
+## 0.1.0 — 2026-02-17
+
+Stabilization — pagination, language switcher, and more
+
+### Added
+- Server-side pagination for collection entries (limit/offset/orderBy)
+- Persistent page index and active tab across navigation
+- countEntries adapter method for total count queries
+- Automatic fallback to client-side pagination for search and name sorting
+
+### Fixed
+- Language switcher now reactive globally — all UI updates instantly without reload
+- Removed hardcoded en/pl — locale list derived from Paraglide config
+- Browser language auto-detected as default interface language
+- Deduplicated formatRelativeDate across dashboard and form components
+- Account profile: fixed name input not responding to typing
+- Account preferences: added aria-pressed to theme/language toggles
+- Removed placeholder 2FA stub from security section
+- Media tag counts now display correct values — TagSidebar and BulkActionBar receive all files
+- Hybrid target: data-hybrid-path no longer rendered on public pages — only in preview iframe
+
+### Breaking
+- getRawEntries remote now returns { entries: RawEntry[], total: number } instead of RawEntry[]
+
 ## 0.0.69 — 2026-02-17
 
 DnD array reordering, nav-search batch fetch

package/ROADMAP.md

@@ -14,11 +14,11 @@
 
 ## 0.1.0 — Stabilization
 
-- [ ] `[fix]` `[P0]` Collection table pagination — server-side, persistent page state, archived tab <!-- files: src/lib/admin/client/collection/collection-entries.svelte, src/lib/admin/client/collection/table-pagination.svelte -->
-- [ ] `[fix]` `[P0]` Language switcher — reactive globally without reload, remove hardcoded en/pl <!-- files: src/lib/admin/state/interface-language.svelte.ts, src/lib/admin/components/layout/header-actions.svelte -->
-- [ ] `[fix]` `[P0]` User account section — email change, aria-pressed on prefs, avatar upload, clean up 2FA stub <!-- files: src/lib/admin/client/account/ -->
-- [ ] `[fix]` `[P0]` Media tag counts always 0 — pass actual files to TagSidebar <!-- files: src/lib/admin/components/media/media-library.svelte, src/lib/admin/components/media/tag-sidebar.svelte -->
-- [ ] `[fix]` `[P0]` Hybrid target — don't render `data-hybrid-path` for non-logged-in users <!-- files: src/lib/sveltekit/components/hybrid-target.svelte -->
+- [x] `[fix]` `[P0]` Collection table pagination — server-side, persistent page state, archived tab <!-- files: src/lib/admin/client/collection/collection-entries.svelte, src/lib/admin/client/collection/table-pagination.svelte -->
+- [x] `[fix]` `[P0]` Language switcher — reactive globally without reload, remove hardcoded en/pl <!-- files: src/lib/admin/state/interface-language.svelte.ts, src/lib/admin/components/layout/header-actions.svelte -->
+- [x] `[fix]` `[P0]` User account section — fix name input, aria-pressed on prefs, clean up 2FA stub (email change deferred to 0.1.2, avatar upload skipped) <!-- files: src/lib/admin/client/account/ -->
+- [x] `[fix]` `[P0]` Media tag counts always 0 — pass actual files to TagSidebar <!-- files: src/lib/admin/components/media/media-library.svelte, src/lib/admin/components/media/tag-sidebar.svelte -->
+- [x] `[fix]` `[P0]` Hybrid target — don't render `data-hybrid-path` for non-logged-in users <!-- files: src/lib/sveltekit/components/hybrid-target.svelte -->
 
 ## 0.1.1 — Input integrity
 
@@ -27,6 +27,25 @@
 - [ ] `[feature]` `[P1]` Array field fixed length — fixed item count, no add/remove, reorder only
 - [ ] `[feature]` `[P1]` Field constraint info display — show constraints before validation error (WCAG/ATAG)
 
+## 0.1.2 — User management & RBAC
+
+### Phase 1 — Core
+
+- [ ] `[feature]` `[P0]` RBAC middleware — `requireRole()`, role check w `requireAuth()` <!-- files: src/lib/admin/remote/middleware/auth.ts -->
+- [ ] `[feature]` `[P0]` Admin users page — list, search, pagination via `authClient.admin.listUsers` <!-- files: src/lib/admin/client/users/ -->
+- [ ] `[feature]` `[P0]` Create user — dialog z email/password/name/role via `authClient.admin.createUser` <!-- files: src/lib/admin/client/users/create-user-dialog.svelte -->
+- [ ] `[feature]` `[P0]` Edit user — name, email, role via `adminUpdateUser` + `setRole` <!-- files: src/lib/admin/client/users/edit-user-dialog.svelte -->
+- [ ] `[feature]` `[P0]` Delete user — confirmation dialog via `removeUser` <!-- files: src/lib/admin/client/users/ -->
+- [ ] `[feature]` `[P0]` Route/sidebar gating — ukryj Users nav + chroń `/admin/users` dla non-admin <!-- files: src/lib/admin/components/layout/nav-main.svelte, src/lib/sveltekit/server/handle.ts -->
+- [ ] `[feature]` `[P0]` First user bootstrap — pierwszy utworzony user auto-gets role `admin` <!-- files: src/lib/server/auth.ts -->
+
+### Phase 2 — Extended
+
+- [ ] `[feature]` `[P1]` Ban/unban UI — reason + expiry, `banUser`/`unbanUser` <!-- files: src/lib/admin/client/users/ban-user-dialog.svelte -->
+- [ ] `[feature]` `[P1]` Admin session mgmt — list/revoke sesji innych userów <!-- files: src/lib/admin/client/users/user-sessions-sheet.svelte -->
+- [ ] `[feature]` `[P1]` Impersonation UI — impersonate/stop bar <!-- files: src/lib/admin/client/users/impersonation-bar.svelte -->
+- [ ] `[feature]` `[P2]` Email invitation system — invite link generation (custom, nie w better-auth) <!-- files: src/lib/core/server/auth/invite.ts -->
+
 ## 0.2.0 — Plugin system
 
 - [ ] `[feature]` `[P0]` Wire plugin hooks into CRUD operations (before/afterCreate, Update, Delete) <!-- files: src/lib/types/plugins.ts, src/lib/core/server/entries/operations/ -->

package/dist/admin/client/account/lang.d.ts

@@ -23,9 +23,6 @@ export declare const accountLang: Record<string, {
         confirmPassword: string;
         updatePassword: string;
         passwordUpdated: string;
-        twoFactor: string;
-        twoFactorDesc: string;
-        comingSoon: string;
         deleteAccount: string;
         deleteAccountDesc: string;
         deleteAccountButton: string;
@@ -42,8 +39,6 @@ export declare const accountLang: Record<string, {
         themeDark: string;
         themeSystem: string;
         language: string;
-        languageEn: string;
-        languagePl: string;
     };
     sessions: {
         title: string;

package/dist/admin/client/account/lang.js

@@ -24,9 +24,6 @@ export const accountLang = {
             confirmPassword: 'Potwierdź hasło',
             updatePassword: 'Zmień hasło',
             passwordUpdated: 'Hasło zostało zmienione',
-            twoFactor: 'Uwierzytelnianie dwuskładnikowe',
-            twoFactorDesc: 'Dodatkowa warstwa zabezpieczeń dla Twojego konta',
-            comingSoon: 'Wkrótce',
             deleteAccount: 'Usuń konto',
             deleteAccountDesc: 'Trwale usuń swoje konto i wszystkie dane',
             deleteAccountButton: 'Usuń konto',
@@ -42,9 +39,7 @@ export const accountLang = {
             themeLight: 'Jasny',
             themeDark: 'Ciemny',
             themeSystem: 'Systemowy',
-            language: 'Język',
-            languageEn: 'Angielski',
-            languagePl: 'Polski'
+            language: 'Język'
         },
         sessions: {
             title: 'Aktywne sesje',
@@ -88,9 +83,6 @@ export const accountLang = {
             confirmPassword: 'Confirm password',
             updatePassword: 'Update password',
             passwordUpdated: 'Password updated',
-            twoFactor: 'Two-factor authentication',
-            twoFactorDesc: 'Add an extra layer of security to your account',
-            comingSoon: 'Coming soon',
             deleteAccount: 'Delete account',
             deleteAccountDesc: 'Permanently delete your account and all data',
             deleteAccountButton: 'Delete account',
@@ -106,9 +98,7 @@ export const accountLang = {
             themeLight: 'Light',
             themeDark: 'Dark',
             themeSystem: 'System',
-            language: 'Language',
-            languageEn: 'English',
-            languagePl: 'Polish'
+            language: 'Language'
         },
         sessions: {
             title: 'Active sessions',

package/dist/admin/client/account/preferences-section.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import * as Card from '../../../components/ui/card/index.js';
 	import { accountLang } from './lang.js';
-	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { useInterfaceLanguage, locales } from '../../state/interface-language.svelte.js';
 	import { userPrefersMode, setMode } from 'mode-watcher';
 	import Sun from '@tabler/icons-svelte/icons/sun';
 	import Moon from '@tabler/icons-svelte/icons/moon';
 	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 
@@ -15,9 +16,15 @@
 		setMode(theme);
 	}
 
-	function setLanguage(language: 'en' | 'pl') {
+	function setLanguage(language: InterfaceLanguage) {
 		interfaceLanguage.current = language;
 	}
+
+	function getLanguageDisplayName(locale: string): string {
+		const name = new Intl.DisplayNames([interfaceLanguage.current], { type: 'language' }).of(locale);
+		if (!name) return locale.toUpperCase();
+		return name.charAt(0).toUpperCase() + name.slice(1);
+	}
 </script>
 
 <div class="space-y-6">
@@ -26,9 +33,10 @@
 			<Card.Title>{lang.preferences.theme}</Card.Title>
 		</Card.Header>
 		<Card.Content>
-			<div class="flex gap-2">
+			<div class="flex gap-2" role="group" aria-label={lang.preferences.theme}>
 				<button
 					type="button"
+					aria-pressed={userPrefersMode.current === 'light'}
 					onclick={() => setTheme('light')}
 					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {userPrefersMode.current ===
 					'light'
@@ -40,6 +48,7 @@
 				</button>
 				<button
 					type="button"
+					aria-pressed={userPrefersMode.current === 'dark'}
 					onclick={() => setTheme('dark')}
 					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {userPrefersMode.current ===
 					'dark'
@@ -51,6 +60,7 @@
 				</button>
 				<button
 					type="button"
+					aria-pressed={userPrefersMode.current === 'system'}
 					onclick={() => setTheme('system')}
 					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {userPrefersMode.current ===
 					'system'
@@ -69,27 +79,20 @@
 			<Card.Title>{lang.preferences.language}</Card.Title>
 		</Card.Header>
 		<Card.Content>
-			<div class="flex gap-2">
-				<button
-					type="button"
-					onclick={() => setLanguage('en')}
-					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {interfaceLanguage.current ===
-					'en'
-						? 'border-[#2D4A77] bg-[#2D4A77]/10 text-[#2D4A77]'
-						: 'border-input hover:bg-accent'}"
-				>
-					{lang.preferences.languageEn}
-				</button>
-				<button
-					type="button"
-					onclick={() => setLanguage('pl')}
-					class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {interfaceLanguage.current ===
-					'pl'
-						? 'border-[#2D4A77] bg-[#2D4A77]/10 text-[#2D4A77]'
-						: 'border-input hover:bg-accent'}"
-				>
-					{lang.preferences.languagePl}
-				</button>
+			<div class="flex gap-2" role="group" aria-label={lang.preferences.language}>
+				{#each locales as locale}
+					<button
+						type="button"
+						aria-pressed={interfaceLanguage.current === locale}
+						onclick={() => setLanguage(locale)}
+						class="inline-flex h-10 items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none {interfaceLanguage.current ===
+						locale
+							? 'border-[#2D4A77] bg-[#2D4A77]/10 text-[#2D4A77]'
+							: 'border-input hover:bg-accent'}"
+					>
+						{getLanguageDisplayName(locale)}
+					</button>
+				{/each}
 			</div>
 		</Card.Content>
 	</Card.Root>

package/dist/admin/client/account/profile-section.svelte

@@ -9,21 +9,27 @@
 	import { profileSchema } from './schema.js';
 	import { accountLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { toLocaleCode } from '../../utils/formatDate.js';
 	import { authClient } from '../../auth-client.js';
 	import { toast } from 'svelte-sonner';
+	import { untrack } from 'svelte';
 
 	let session = authClient.useSession();
 	const interfaceLanguage = useInterfaceLanguage();
 
 	$effect(() => {
-		if ($session.data?.user.name && $formData.name !== $session.data.user.name) {
-			$formData.name = $session.data.user.name;
+		const sessionName = $session.data?.user.name;
+		if (sessionName) {
+			untrack(() => {
+				$formData.name = sessionName;
+			});
 		}
 	});
 
 	const form = superForm(defaults(zod4(profileSchema)), {
 		validators: zod4Client(profileSchema),
 		SPA: true,
+		resetForm: false,
 		onUpdate: async ({ form }) => {
 			if (form.valid) {
 				await authClient.updateUser({
@@ -48,7 +54,7 @@
 	}
 
 	function formatDate(date: Date | string): string {
-		return new Date(date).toLocaleDateString(interfaceLanguage.current === 'pl' ? 'pl-PL' : 'en-US', {
+		return new Date(date).toLocaleDateString(toLocaleCode(interfaceLanguage.current), {
 			year: 'numeric',
 			month: 'long'
 		});
@@ -79,12 +85,7 @@
 						<Form.Control>
 							{#snippet children({ props })}
 								<Form.Label>{lang.profile.name}</Form.Label>
-								<Input
-									{...props}
-									bind:value={$formData.name}
-									type="text"
-									class="mt-1"
-								/>
+								<Input {...props} bind:value={$formData.name} type="text" class="mt-1" />
 							{/snippet}
 						</Form.Control>
 						<Form.FieldErrors class="text-sm text-red-500" />
@@ -92,12 +93,7 @@
 
 					<div class="space-y-2">
 						<label class="text-sm font-medium">{lang.profile.email}</label>
-						<Input
-							type="email"
-							value={$session.data.user.email}
-							disabled
-							class="mt-1"
-						/>
+						<Input type="email" value={$session.data.user.email} disabled class="mt-1" />
 					</div>
 
 					<div class="flex items-center gap-4">

package/dist/admin/client/account/security-section.svelte

@@ -4,7 +4,6 @@
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as Card from '../../../components/ui/card/index.js';
 	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
-	import { Badge } from '../../../components/ui/badge/index.js';
 	import { defaults, superForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
 	import { passwordSchema, deleteAccountSchema } from './schema.js';
@@ -124,16 +123,6 @@
 		</Card.Content>
 	</Card.Root>
 
-	<Card.Root>
-		<Card.Header>
-			<Card.Title>{lang.security.twoFactor}</Card.Title>
-			<Card.Description>{lang.security.twoFactorDesc}</Card.Description>
-		</Card.Header>
-		<Card.Content>
-			<Badge variant="outline">{lang.security.comingSoon}</Badge>
-		</Card.Content>
-	</Card.Root>
-
 	<Card.Root class="border-destructive/50">
 		<Card.Header>
 			<Card.Title class="text-destructive">{lang.security.deleteAccount}</Card.Title>

package/dist/admin/client/account/sessions-section.svelte

@@ -3,6 +3,7 @@
 	import { Badge } from '../../../components/ui/badge/index.js';
 	import { accountLang } from './lang.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { toLocaleCode } from '../../utils/formatDate.js';
 	import { authClient } from '../../auth-client.js';
 	import { toast } from 'svelte-sonner';
 	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
@@ -86,7 +87,7 @@
 	}
 
 	function formatDate(date: Date | string): string {
-		return new Date(date).toLocaleString(interfaceLanguage.current === 'pl' ? 'pl-PL' : 'en-US', {
+		return new Date(date).toLocaleString(toLocaleCode(interfaceLanguage.current), {
 			year: 'numeric',
 			month: 'short',
 			day: 'numeric',

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

@@ -117,6 +117,46 @@
 	let deleteDialogOpen = $state(false);
 	let pendingDeleteId = $state<string | null>(null);
 
+	// 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);
+
+	// 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 undefined;
+	});
+
+	// Server-side query params
+	const activeQueryParams = $derived(
+		useServerPagination
+			? {
+					slug: collection.slug,
+					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
+				}
+			: { slug: collection.slug, onlyArchived: true as const }
+	);
+
 	const columns: ColumnDef<CollectionDataTableRow>[] = $derived([
 		{
 			id: 'select',
@@ -232,13 +272,15 @@
 		}
 	]);
 
-	let activeTab = $state('active');
+	function refreshQueries() {
+		remotes.getRawEntries(activeQueryParams).refresh();
+		remotes.getRawEntries(archivedQueryParams).refresh();
+	}
 
 	async function handleRestore(id: string) {
 		await remotes.unarchiveEntryCommand(id);
 		toast.success(lang[interfaceLanguage.current].entryRestored);
-		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
-		remotes.getRawEntries({ slug: collection.slug }).refresh();
+		refreshQueries();
 	}
 
 	function handleDelete(id: string) {
@@ -250,7 +292,7 @@
 		if (!pendingDeleteId) return;
 		await remotes.deleteEntryCommand(pendingDeleteId);
 		toast.success(lang[interfaceLanguage.current].entryDeleted);
-		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
+		refreshQueries();
 		deleteDialogOpen = false;
 		pendingDeleteId = null;
 	}
@@ -319,12 +361,18 @@
 		}
 		toast.success(lang[interfaceLanguage.current].entriesArchived);
 		rowSelection = {};
-		remotes.getRawEntries({ slug: collection.slug }).refresh();
-		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
+		refreshQueries();
 	}
+
 </script>
 
-<Tabs.Root bind:value={activeTab} class="w-full">
+<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>
@@ -336,57 +384,94 @@
 	</div>
 
 	<Tabs.Content value="active" class="mt-0">
-		{#await remotes.getRawEntries({ slug: collection.slug }) then entries}
-			{@const items = entries
-				.filter((entry) => entry.archivedAt === null)
-				.map(mapEntryToRow)}
-			{@const filteredItems = searchQuery
-				? items.filter((item) => item.searchText.includes(searchQuery.toLowerCase()))
-				: items}
-			{@const totalItems = filteredItems.length}
+		{#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)}
+				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(sortItems(filteredItems, viewState.sorting))}
+				onBulkArchive={() => handleBulkArchive(items)}
 			/>
 
 			{#if viewState.viewMode === 'list'}
-				<DataTable
-					data={sortItems(filteredItems, viewState.sorting)}
-					{columns}
-					enableSorting
-					enableFiltering
-					enableSelection
-					enablePagination
-					sorting={viewState.sorting}
-					onSortingChange={(s) => (viewState.sorting = s)}
-					{rowSelection}
-					onRowSelectionChange={(s) => (rowSelection = s)}
-					pagination={{ pageIndex: 0, pageSize: viewState.pageSize }}
-					tableRef={(t) => (tableInstance = t)}
-				/>
+				{#if useServerPagination}
+					<DataTable
+						data={items}
+						{columns}
+						enableSorting
+						enableFiltering
+						enableSelection
+						enablePagination
+						manualPagination={true}
+						pageCount={pageCount}
+						rowCount={totalItems}
+						sorting={viewState.sorting}
+						onSortingChange={(s) => (viewState.sorting = s)}
+						{rowSelection}
+						onRowSelectionChange={(s) => (rowSelection = s)}
+						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
+						onPaginationChange={(p) => {
+							viewState.pageIndex = p.pageIndex;
+						}}
+						tableRef={(t) => (tableInstance = t)}
+					/>
+				{:else}
+					<DataTable
+						data={items}
+						{columns}
+						enableSorting
+						enableFiltering
+						enableSelection
+						enablePagination
+						sorting={viewState.sorting}
+						onSortingChange={(s) => (viewState.sorting = s)}
+						{rowSelection}
+						onRowSelectionChange={(s) => (rowSelection = s)}
+						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
+						onPaginationChange={(p) => {
+							viewState.pageIndex = p.pageIndex;
+						}}
+						tableRef={(t) => (tableInstance = t)}
+					/>
+				{/if}
 
 				<TablePagination
-					pageIndex={tableInstance?.getState().pagination.pageIndex ?? 0}
+					pageIndex={viewState.pageIndex}
 					pageSize={viewState.pageSize}
 					{pageCount}
 					{totalItems}
-					onPageChange={(p) => tableInstance?.setPageIndex(p)}
+					onPageChange={(p) => (viewState.pageIndex = p)}
 					onPageSizeChange={(s) => {
 						viewState.pageSize = s;
-						tableInstance?.setPageSize(s);
 					}}
 				/>
 			{:else}
+				{@const displayItems = useServerPagination
+					? items
+					: items.slice(
+							viewState.pageIndex * viewState.pageSize,
+							(viewState.pageIndex + 1) * viewState.pageSize
+						)}
 				<GridView
-					items={sortItems(filteredItems, viewState.sorting).map((item) => ({
+					items={displayItems.map((item) => ({
 						id: item.id,
 						name: item.name,
 						status: item.status,
@@ -396,12 +481,11 @@
 					}))}
 					dateFormat={viewState.dateFormat}
 					enableSelection
-					selectedIds={new Set(selectedIndices.map((idx) => sortItems(filteredItems, viewState.sorting)[idx]?.id).filter(Boolean))}
+					selectedIds={new Set(selectedIndices.map((idx) => items[idx]?.id).filter(Boolean))}
 					onSelectionChange={(ids) => {
-						const sorted = sortItems(filteredItems, viewState.sorting);
 						const newSelection: RowSelectionState = {};
 						for (const id of ids) {
-							const idx = sorted.findIndex((i) => i.id === id);
+							const idx = items.findIndex((i) => i.id === id);
 							if (idx !== -1) {
 								newSelection[idx] = true;
 							}
@@ -409,20 +493,61 @@
 						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({ slug: collection.slug, onlyArchived: true }) then entries}
-			{@const items = entries.map((entry) => ({
+		{#await remotes.getRawEntries(archivedQueryParams) then result}
+			{@const items = result.entries.map((entry) => ({
 				...mapEntryToRow(entry),
 				onRestore: () => handleRestore(entry.id),
 				onDelete: () => handleDelete(entry.id)
 			}))}
-			<div class="p-4">
-				<DataTable data={items} columns={archivedColumns} />
-			</div>
+			{@const totalItems = result.total}
+			{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
+
+			{#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>

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

@@ -1,15 +1,20 @@
 import type { SortingState } from '@tanstack/table-core';
 export type ViewMode = 'list' | 'grid';
 export type DateFormat = 'relative' | 'absolute';
+export type ActiveTab = 'active' | 'archived';
 export interface CollectionViewState {
     viewMode: ViewMode;
     dateFormat: DateFormat;
     pageSize: number;
     sorting: SortingState;
+    pageIndex: number;
+    activeTab: ActiveTab;
 }
 export declare function createCollectionViewState(collectionSlug: string): {
     viewMode: ViewMode;
     dateFormat: DateFormat;
     pageSize: number;
     sorting: SortingState;
+    pageIndex: number;
+    activeTab: ActiveTab;
 };