includio-cms 0.25.0 → 0.26.0

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

@@ -1,33 +1,16 @@
 <script lang="ts">
-	import Search from '@tabler/icons-svelte/icons/search';
 	import Plus from '@tabler/icons-svelte/icons/plus';
-	import Pencil from '@tabler/icons-svelte/icons/pencil';
-	import Trash from '@tabler/icons-svelte/icons/trash';
-	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
-	import DeviceDesktop from '@tabler/icons-svelte/icons/device-desktop';
 	import Mail from '@tabler/icons-svelte/icons/mail';
-	import Users from '@tabler/icons-svelte/icons/users';
-	import Filter from '@tabler/icons-svelte/icons/filter';
-	import ArrowsSort from '@tabler/icons-svelte/icons/arrows-sort';
-	import SortAscending from '@tabler/icons-svelte/icons/sort-ascending';
-	import SortDescending from '@tabler/icons-svelte/icons/sort-descending';
-	import ChevronLeft from '@tabler/icons-svelte/icons/chevron-left';
-	import ChevronRight from '@tabler/icons-svelte/icons/chevron-right';
-	import X from '@tabler/icons-svelte/icons/x';
-	import Input from '../../../components/ui/input/input.svelte';
 	import Button from '../../../components/ui/button/button.svelte';
-	import { Checkbox } from '../../../components/ui/checkbox/index.js';
 	import * as Popover from '../../../components/ui/popover/index.js';
-	import * as Table from '../../../components/ui/table/index.js';
 	import { authClient } from '../../auth-client.js';
 	import { usersLang } from './lang.js';
 	import { sidebarLang } from '../../components/layout/lang.js';
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import { toLocaleCode } from '../../utils/formatDate.js';
+	import { formatDateTime } from '../../utils/formatters.js';
 	import { getRoleLabel } from '../../utils/roleLabel.js';
 	import { toast } from 'svelte-sonner';
-	import { fly } from 'svelte/transition';
 	import CreateUserDialog from './create-user-dialog.svelte';
 	import EditUserDialog from './edit-user-dialog.svelte';
 	import DeleteUserDialog from './delete-user-dialog.svelte';
@@ -35,6 +18,19 @@
 	import InviteUserDialog from './invite-user-dialog.svelte';
 	import PendingInvitations from './pending-invitations.svelte';
 	import { getRemotes } from '../../helpers/index.js';
+	import PageHeader from '../../components/layout/page-header.svelte';
+	import DataTable from '../collection/data-table.svelte';
+	import TableToolbar from '../collection/table-toolbar.svelte';
+	import TablePagination from '../collection/table-pagination.svelte';
+	import StateDisplay from '../collection/state-display.svelte';
+	import BulkActionsBar from '../collection/bulk-actions-bar.svelte';
+	import SortableHeader from '../collection/sortable-header.svelte';
+	import SelectionCell from '../collection/selection-cell.svelte';
+	import UserNameCell from './user-name-cell.svelte';
+	import UserRoleBadge from './user-role-badge.svelte';
+	import UserRowActions from './user-row-actions.svelte';
+	import { renderComponent } from '../../../components/ui/data-table/render-helpers.js';
+	import type { ColumnDef, RowSelectionState, SortingState, Table } from '@tanstack/table-core';
 
 	type User = {
 		id: string;
@@ -44,6 +40,15 @@
 		createdAt: Date;
 	};
 
+	type Props = {
+		data?: User[];
+		state?: 'loading' | 'error' | 'ok';
+	};
+
+	let { data: injectedData, state: injectedState }: Props = $props();
+
+	const useInjectedData = $derived(injectedData !== undefined);
+
 	const remotes = getRemotes();
 	const emailQuery = $derived(remotes.getEmailConfigured());
 	const emailConfigured = $derived(emailQuery.data === true);
@@ -53,30 +58,22 @@
 	const breadcrumbs = getBreadcrumbs();
 
 	$effect(() => {
-		breadcrumbs.state = [
-			{ label: sidebarLang[interfaceLanguage.current].main.users }
-		];
+		breadcrumbs.state = [{ label: sidebarLang[interfaceLanguage.current].main.users }];
 	});
 
 	const session = authClient.useSession();
 	const currentUserId = $derived(session.value?.data?.user?.id ?? '');
 
-	let users = $state<User[]>([]);
-	let loading = $state(true);
+	let fetchedUsers = $state<User[]>([]);
+	let fetchedLoading = $state(true);
 	let searchQuery = $state('');
 
-	// Sorting
-	let sortColumn = $state<'name' | 'role' | 'createdAt'>('createdAt');
-	let sortDirection = $state<'desc' | 'asc'>('desc');
-
-	// Filtering
+	let sorting = $state<SortingState>([{ id: 'createdAt', desc: true }]);
 	let roleFilter = $state<string>('all');
-	let filterOpen = $state(false);
-
-	// Selection
-	let selectedIds = $state<Set<string>>(new Set());
+	let rowSelection = $state<RowSelectionState>({});
+	let pagination = $state({ pageIndex: 0, pageSize: 20 });
+	let tableInstance = $state<Table<User> | null>(null);
 
-	// Dialogs
 	let createOpen = $state(false);
 	let editOpen = $state(false);
 	let deleteOpen = $state(false);
@@ -84,54 +81,57 @@
 	let editingUser = $state<User | null>(null);
 	let deletingUser = $state<{ id: string; name: string } | null>(null);
 
-	// Sessions sheet
 	let sessionsOpen = $state(false);
 	let sessionsUserId = $state<string | null>(null);
 	let sessionsUserName = $state('');
 
-	// Invite refresh
 	let inviteRefresh = $state(0);
 
-	// Pagination
-	let pageIndex = $state(0);
-	const pageSize = 20;
-
-	// Derived chain: users → searchFiltered → roleFiltered → sorted → paged
-	const searchFiltered = $derived(
-		searchQuery
-			? users.filter(
-					(u) =>
-						u.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-						u.email.toLowerCase().includes(searchQuery.toLowerCase())
+	const allUsers = $derived(useInjectedData ? (injectedData ?? []) : fetchedUsers);
+	const isLoading = $derived(useInjectedData ? injectedState === 'loading' : fetchedLoading);
+	const isError = $derived(useInjectedData && injectedState === 'error');
+
+	const filteredUsers = $derived.by(() => {
+		const q = searchQuery.trim().toLowerCase();
+		let list = q
+			? allUsers.filter(
+					(u) => u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q)
 				)
-			: users
-	);
+			: allUsers;
+		if (roleFilter !== 'all') {
+			list = list.filter((u) => u.role === roleFilter);
+		}
+		return list;
+	});
 
-	const roleFiltered = $derived(
-		roleFilter === 'all' ? searchFiltered : searchFiltered.filter((u) => u.role === roleFilter)
-	);
+	const totalItems = $derived(filteredUsers.length);
+	const pageCount = $derived(Math.max(1, Math.ceil(totalItems / pagination.pageSize)));
 
-	const sorted = $derived(
-		[...roleFiltered].sort((a, b) => {
-			const dir = sortDirection === 'asc' ? 1 : -1;
-			if (sortColumn === 'name') return a.name.localeCompare(b.name) * dir;
-			if (sortColumn === 'role') return a.role.localeCompare(b.role) * dir;
-			return (a.createdAt.getTime() - b.createdAt.getTime()) * dir;
-		})
+	const selectedIds = $derived(
+		Object.keys(rowSelection)
+			.filter((k) => rowSelection[k])
+			.map((k) => filteredUsers[Number(k)]?.id)
+			.filter((id): id is string => Boolean(id))
 	);
 
-	const totalItems = $derived(sorted.length);
-	const pageCount = $derived(Math.ceil(totalItems / pageSize));
-	const paged = $derived(sorted.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize));
-	const showingStart = $derived(totalItems === 0 ? 0 : pageIndex * pageSize + 1);
-	const showingEnd = $derived(Math.min((pageIndex + 1) * pageSize, totalItems));
+	const selectedCount = $derived(selectedIds.length);
+
+	const dataFilters = $derived([
+		{
+			slug: 'role',
+			label: lang.filterByRole,
+			options: [
+				{ value: 'all', label: lang.allRoles },
+				{ value: 'admin', label: lang.roleAdmin },
+				{ value: 'user', label: lang.roleUser }
+			]
+		}
+	]);
 
-	const allOnPageSelected = $derived(
-		paged.length > 0 && paged.every((u) => selectedIds.has(u.id))
-	);
-	const someSelected = $derived(selectedIds.size > 0);
+	const activeDataFilters = $derived({
+		role: roleFilter === 'all' ? null : roleFilter
+	});
 
-	// Avatar helpers
 	const avatarGradients = [
 		'linear-gradient(135deg, #5B4A9E, #B8A9E8)',
 		'linear-gradient(135deg, #3A8A5C, #7EC4A0)',
@@ -159,74 +159,97 @@
 		return avatarGradients[Math.abs(hash) % avatarGradients.length];
 	}
 
-	function toggleSort(column: 'name' | 'role' | 'createdAt') {
-		if (sortColumn === column) {
-			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-		} else {
-			sortColumn = column;
-			sortDirection = column === 'createdAt' ? 'desc' : 'asc';
-		}
-	}
-
-	function toggleSelectAll() {
-		if (allOnPageSelected) {
-			for (const u of paged) selectedIds.delete(u.id);
-		} else {
-			for (const u of paged) selectedIds.add(u.id);
-		}
-		selectedIds = new Set(selectedIds);
-	}
-
-	function toggleSelect(id: string) {
-		if (selectedIds.has(id)) {
-			selectedIds.delete(id);
-		} else {
-			selectedIds.add(id);
-		}
-		selectedIds = new Set(selectedIds);
-	}
-
-	function clearSelection() {
-		selectedIds = new Set();
-	}
-
-	async function handleBulkDelete() {
-		const ids = [...selectedIds].filter((id) => id !== currentUserId);
-		if (ids.length === 0) return;
-
-		for (const userId of ids) {
-			await authClient.admin.removeUser({ userId });
-		}
-
-		toast.success(lang.userDeleted);
-		selectedIds = new Set();
-		await loadUsers();
-	}
-
-	async function handleBulkChangeRole(newRole: 'admin' | 'user') {
-		const ids = [...selectedIds].filter((id) => id !== currentUserId);
-		if (ids.length === 0) return;
-
-		for (const userId of ids) {
-			await authClient.admin.setRole({ userId, role: newRole });
+	const columns = $derived.by<ColumnDef<User>[]>(() => [
+		{
+			id: 'select',
+			header: ({ table }) =>
+				renderComponent(SelectionCell, {
+					checked: table.getIsAllPageRowsSelected(),
+					indeterminate: table.getIsSomePageRowsSelected(),
+					onCheckedChange: (value: boolean) => table.toggleAllPageRowsSelected(value),
+					ariaLabel: lang.selectAll
+				}),
+			cell: ({ row }) =>
+				renderComponent(SelectionCell, {
+					checked: row.getIsSelected(),
+					onCheckedChange: (value: boolean) => row.toggleSelected(value),
+					ariaLabel: `${lang.selectUser}: ${row.original.name}`
+				}),
+			enableSorting: false,
+			size: 48
+		},
+		{
+			accessorKey: 'name',
+			header: ({ column }) =>
+				renderComponent(SortableHeader<User>, {
+					column,
+					label: lang.name,
+					sorting
+				}),
+			cell: (info) =>
+				renderComponent(UserNameCell, {
+					name: info.row.original.name,
+					email: info.row.original.email,
+					avatarGradient: getAvatarGradient(info.row.original.name),
+					initials: getInitials(info.row.original.name) || '?'
+				})
+		},
+		{
+			accessorKey: 'role',
+			header: ({ column }) =>
+				renderComponent(SortableHeader<User>, {
+					column,
+					label: lang.role,
+					sorting
+				}),
+			cell: (info) =>
+				renderComponent(UserRoleBadge, {
+					role: info.row.original.role,
+					label: getRoleLabel(info.row.original.role, interfaceLanguage.current)
+				}),
+			size: 160
+		},
+		{
+			accessorKey: 'createdAt',
+			header: ({ column }) =>
+				renderComponent(SortableHeader<User>, {
+					column,
+					label: lang.createdAt,
+					sorting
+				}),
+			cell: (info) => formatDateTime(info.row.original.createdAt, interfaceLanguage.current),
+			size: 200
+		},
+		{
+			id: 'actions',
+			header: '',
+			cell: (info) =>
+				renderComponent(UserRowActions, {
+					user: info.row.original,
+					currentUserId,
+					sessionsTitle: lang.sessions.title,
+					editLabel: lang.editUser,
+					deleteLabel: lang.deleteUser,
+					onSessions: openSessions,
+					onEdit: openEdit,
+					onDelete: openDelete
+				}),
+			enableSorting: false,
+			size: 140
 		}
-
-		toast.success(lang.userUpdated);
-		selectedIds = new Set();
-		await loadUsers();
-	}
+	]);
 
 	$effect(() => {
-		loadUsers();
+		if (!useInjectedData) loadUsers();
 	});
 
 	async function loadUsers() {
-		loading = true;
+		fetchedLoading = true;
 		const { data } = await authClient.admin.listUsers({
 			query: { limit: 500 }
 		});
 		if (data) {
-			users = data.users.map((u: any) => ({
+			fetchedUsers = data.users.map((u: { id: string; name?: string; email: string; role?: string; createdAt: string | Date }) => ({
 				id: u.id,
 				name: u.name ?? '',
 				email: u.email,
@@ -234,15 +257,7 @@
 				createdAt: new Date(u.createdAt)
 			}));
 		}
-		loading = false;
-	}
-
-	function formatDate(date: Date): string {
-		return date.toLocaleString(toLocaleCode(interfaceLanguage.current), {
-			year: 'numeric',
-			month: 'short',
-			day: 'numeric'
-		});
+		fetchedLoading = false;
 	}
 
 	function openEdit(user: User) {
@@ -261,390 +276,161 @@
 		sessionsOpen = true;
 	}
 
-	function getSortIcon(column: string) {
-		if (sortColumn !== column) return ArrowsSort;
-		return sortDirection === 'asc' ? SortAscending : SortDescending;
-	}
+	async function handleBulkDelete() {
+		const ids = selectedIds.filter((id) => id !== currentUserId);
+		if (ids.length === 0) return;
+
+		for (const userId of ids) {
+			await authClient.admin.removeUser({ userId });
+		}
 
-	function getAriaSort(column: string): 'ascending' | 'descending' | 'none' {
-		if (sortColumn !== column) return 'none';
-		return sortDirection === 'asc' ? 'ascending' : 'descending';
+		toast.success(lang.userDeleted);
+		rowSelection = {};
+		if (!useInjectedData) await loadUsers();
 	}
 
-	function generatePageNumbers(current: number, total: number): (number | '...')[] {
-		if (total <= 7) return Array.from({ length: total }, (_, i) => i);
-		const pages: (number | '...')[] = [0];
-		if (current > 2) pages.push('...');
-		for (let i = Math.max(1, current - 1); i <= Math.min(total - 2, current + 1); i++) {
-			pages.push(i);
+	async function handleBulkChangeRole(newRole: 'admin' | 'user') {
+		const ids = selectedIds.filter((id) => id !== currentUserId);
+		if (ids.length === 0) return;
+
+		for (const userId of ids) {
+			await authClient.admin.setRole({ userId, role: newRole });
 		}
-		if (current < total - 3) pages.push('...');
-		pages.push(total - 1);
-		return pages;
+
+		toast.success(lang.userUpdated);
+		rowSelection = {};
+		if (!useInjectedData) await loadUsers();
 	}
 </script>
 
 <div class="p-5 pb-24 md:p-7">
-	<!-- Header -->
-	<div class="mb-6 users-fade-up">
-		<div class="mb-1 flex items-center gap-3">
-			<h1 class="text-2xl font-bold">{lang.title}</h1>
-			{#if !loading}
-				<span
-					class="inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-bold"
-					style="background: var(--lavender-lighter); color: var(--primary);"
-				>
-					{users.length}
-				</span>
-			{/if}
-		</div>
-		<p class="text-sm" style="color: var(--muted-foreground);">{lang.description}</p>
-	</div>
-
-	<!-- Toolbar -->
-	<div class="mb-4 flex flex-wrap items-center gap-2.5 users-fade-up">
-		<div class="relative min-w-[240px] flex-1 sm:max-w-xs">
-			<Search class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2" style="color: var(--text-light);" />
-			<Input
-				type="text"
-				placeholder={lang.search}
-				class="pl-9"
-				value={searchQuery}
-				oninput={(e) => {
-					searchQuery = e.currentTarget.value;
-					pageIndex = 0;
-				}}
-			/>
-		</div>
-
-		<Popover.Root bind:open={filterOpen}>
-			<Popover.Trigger>
-				<Button variant="outline" size="sm" class="gap-1.5">
-					<Filter class="size-4" />
-					{lang.filterByRole}
-					{#if roleFilter !== 'all'}
-						<span
-							class="ml-1 inline-flex size-5 items-center justify-center rounded-full text-[10px] font-bold"
-							style="background: var(--primary); color: white;"
-						>1</span>
-					{/if}
-				</Button>
-			</Popover.Trigger>
-			<Popover.Content class="w-48 p-2" align="start">
-				{#each [
-					{ value: 'all', label: lang.allRoles },
-					{ value: 'admin', label: lang.roleAdmin },
-					{ value: 'user', label: lang.roleUser }
-				] as option}
-					<button
-						class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
-						class:font-semibold={roleFilter === option.value}
-						style={roleFilter === option.value ? 'color: var(--primary);' : ''}
-						onclick={() => {
-							roleFilter = option.value;
-							pageIndex = 0;
-							filterOpen = false;
-						}}
-					>
-						{option.label}
-					</button>
-				{/each}
-			</Popover.Content>
-		</Popover.Root>
-
-		<div class="flex-1"></div>
-
-		{#if emailConfigured}
-			<Button variant="secondary" size="sm" onclick={() => (inviteOpen = true)}>
-				<Mail class="size-4" />
-				{lang.invite.inviteUser}
-			</Button>
-		{/if}
-		<Button variant="default" size="sm" onclick={() => (createOpen = true)} data-testid="create-user-button">
-			<Plus class="size-4" />
-			{lang.createUser}
-		</Button>
-	</div>
-
-	<!-- Content -->
-	{#if loading}
-		<div class="flex items-center justify-center py-20">
-			<Loader2 class="size-6 animate-spin" style="color: var(--muted-foreground);" />
-		</div>
-	{:else if users.length === 0}
-		<!-- Empty state -->
-		<div class="flex flex-col items-center justify-center py-20 text-center users-fade-up">
-			<div
-				class="mb-5 flex size-[72px] items-center justify-center rounded-xl"
-				style="background: var(--muted); color: var(--text-light);"
-			>
-				<Users class="size-8" />
-			</div>
-			<h2 class="mb-1.5 text-lg font-bold">{lang.emptyTitle}</h2>
-			<p class="mb-5 max-w-sm text-sm" style="color: var(--muted-foreground);">
-				{lang.emptyDescription}
-			</p>
+	<PageHeader
+		title={lang.title}
+		count={!isLoading && !isError ? allUsers.length : undefined}
+		description={lang.description}
+	>
+		{#snippet primaryActions()}
 			<Button onclick={() => (createOpen = true)} data-testid="create-user-button">
 				<Plus class="size-4" />
-				{lang.addUser}
+				{lang.createUser}
 			</Button>
-		</div>
-	{:else if paged.length === 0}
-		<p class="py-16 text-center text-sm" style="color: var(--muted-foreground);">
-			{lang.noResults}
-		</p>
+		{/snippet}
+		{#snippet secondaryActions()}
+			{#if emailConfigured}
+				<Button variant="secondary" size="sm" onclick={() => (inviteOpen = true)}>
+					<Mail class="size-4" />
+					{lang.invite.inviteUser}
+				</Button>
+			{/if}
+		{/snippet}
+	</PageHeader>
+
+	{#if isError}
+		<StateDisplay kind="error" />
+	{:else if isLoading}
+		<StateDisplay kind="loading" />
+	{:else if allUsers.length === 0}
+		<StateDisplay
+			kind="empty"
+			title={lang.emptyTitle}
+			description={lang.emptyDescription}
+			ctaLabel={lang.addUser}
+			onCta={() => (createOpen = true)}
+		/>
 	{:else}
-		<!-- Table -->
-		<div class="overflow-hidden rounded-xl border bg-card shadow-sm users-fade-up">
-			<Table.Root>
-				<Table.Header>
-					<Table.Row class="bg-muted/50">
-						<Table.Head class="w-11 text-center">
-							<Checkbox
-								checked={allOnPageSelected}
-								onCheckedChange={toggleSelectAll}
-								aria-label={lang.selectAll}
-							/>
-						</Table.Head>
-						<Table.Head aria-sort={getAriaSort('name')}>
-							{@const SortIconName = getSortIcon('name')}
-							<button
-								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
-								onclick={() => toggleSort('name')}
-							>
-								{lang.name}
-								<SortIconName class="users-sort-icon size-3.5" />
-							</button>
-						</Table.Head>
-						<Table.Head aria-sort={getAriaSort('role')}>
-							{@const SortIconRole = getSortIcon('role')}
-							<button
-								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
-								onclick={() => toggleSort('role')}
-							>
-								{lang.role}
-								<SortIconRole class="users-sort-icon size-3.5" />
-							</button>
-						</Table.Head>
-						<Table.Head aria-sort={getAriaSort('createdAt')}>
-							{@const SortIconCreatedat = getSortIcon('createdAt')}
-							<button
-								class="inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide transition-colors hover:text-primary"
-								onclick={() => toggleSort('createdAt')}
-							>
-								{lang.createdAt}
-								<SortIconCreatedat class="users-sort-icon size-3.5" />
-							</button>
-						</Table.Head>
-						<Table.Head class="w-[120px]">
-							<span class="sr-only">{lang.actions}</span>
-						</Table.Head>
-					</Table.Row>
-				</Table.Header>
-				<Table.Body>
-					{#each paged as user (user.id)}
-						<Table.Row
-							class="transition-colors"
-							style={selectedIds.has(user.id) ? 'background: rgba(184,169,232,0.15);' : ''}
-							onmouseenter={(e) => {
-								if (!selectedIds.has(user.id)) e.currentTarget.style.background = 'var(--lavender-lighter)';
-							}}
-							onmouseleave={(e) => {
-								if (!selectedIds.has(user.id)) e.currentTarget.style.background = '';
-							}}
-						>
-							<Table.Cell class="text-center">
-								<Checkbox
-									checked={selectedIds.has(user.id)}
-									onCheckedChange={() => toggleSelect(user.id)}
-									aria-label="{lang.selectUser}: {user.name}"
-								/>
-							</Table.Cell>
-							<Table.Cell>
-								<div class="flex items-center gap-3">
-									<div
-										class="users-avatar"
-										style="background: {getAvatarGradient(user.name)};"
-										aria-hidden="true"
-									>
-										{getInitials(user.name) || '?'}
-									</div>
-									<div class="min-w-0">
-										<div class="truncate text-sm font-semibold">{user.name}</div>
-										<div class="truncate text-xs" style="color: var(--text-light);">
-											{user.email}
-										</div>
-									</div>
-								</div>
-							</Table.Cell>
-							<Table.Cell>
-								<span
-									class="users-role-badge"
-									class:users-role-admin={user.role === 'admin'}
-									class:users-role-user={user.role !== 'admin'}
-								>
-									{getRoleLabel(user.role, interfaceLanguage.current)}
-								</span>
-							</Table.Cell>
-							<Table.Cell>
-								<span class="text-xs" style="color: var(--muted-foreground);">
-									{formatDate(user.createdAt)}
-								</span>
-							</Table.Cell>
-							<Table.Cell>
-								<div class="flex items-center justify-end gap-0.5">
-									<Button
-										variant="ghost"
-										size="icon"
-										class="h-8 w-8"
-										onclick={() => openSessions(user)}
-										title={lang.sessions.title}
-									>
-										<DeviceDesktop class="size-4" />
-									</Button>
-									<Button
-										variant="ghost"
-										size="icon"
-										class="h-8 w-8"
-										onclick={() => openEdit(user)}
-										title={lang.editUser}
-									>
-										<Pencil class="size-4" />
-									</Button>
-									{#if user.id !== currentUserId}
-										<Button
-											variant="ghost"
-											size="icon"
-											class="text-destructive h-8 w-8"
-											onclick={() => openDelete(user)}
-											title={lang.deleteUser}
-											data-testid="delete-user-row-button"
-										>
-											<Trash class="size-4" />
-										</Button>
-									{/if}
-								</div>
-							</Table.Cell>
-						</Table.Row>
-					{/each}
-				</Table.Body>
-			</Table.Root>
-		</div>
+		<TableToolbar
+			{searchQuery}
+			searchPlaceholder={lang.search}
+			searchLabel={lang.search}
+			onSearchChange={(q) => {
+				searchQuery = q;
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+			hideStatusFilter
+			hideViewToggle
+			{dataFilters}
+			{activeDataFilters}
+			onDataFilterChange={(_slug, value) => {
+				roleFilter = value ?? 'all';
+				pagination = { ...pagination, pageIndex: 0 };
+			}}
+		/>
+
+		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
+			<DataTable
+				data={filteredUsers}
+				{columns}
+				enableSorting
+				enableSelection
+				enablePagination
+				{sorting}
+				onSortingChange={(s) => (sorting = s)}
+				{rowSelection}
+				onRowSelectionChange={(s) => (rowSelection = s)}
+				{pagination}
+				onPaginationChange={(p) => (pagination = p)}
+				tableRef={(t) => (tableInstance = t)}
+				emptyTitle={lang.noResults}
+			/>
 
-		<!-- Pagination -->
-		{#if pageCount > 1 || totalItems > 0}
-			<div class="mt-4 flex items-center justify-between users-fade-up">
-				<p class="text-sm" style="color: var(--muted-foreground);">
-					{lang.showing(showingStart, showingEnd, totalItems)}
-				</p>
-				{#if pageCount > 1}
-					<div class="flex items-center gap-1">
-						<Button
-							variant="outline"
-							size="icon"
-							class="h-8 w-8"
-							disabled={pageIndex === 0}
-							onclick={() => (pageIndex -= 1)}
-							aria-label="Previous page"
-						>
-							<ChevronLeft class="size-4" />
-						</Button>
-						{#each generatePageNumbers(pageIndex, pageCount) as p}
-							{#if p === '...'}
-								<span class="px-1 text-sm" style="color: var(--muted-foreground);">...</span>
-							{:else}
-								<Button
-									variant={pageIndex === p ? 'default' : 'outline'}
-									size="sm"
-									class="h-8 min-w-8 px-2"
-									onclick={() => (pageIndex = p)}
-									aria-current={pageIndex === p ? 'page' : undefined}
-								>
-									{p + 1}
-								</Button>
-							{/if}
-						{/each}
-						<Button
-							variant="outline"
-							size="icon"
-							class="h-8 w-8"
-							disabled={pageIndex >= pageCount - 1}
-							onclick={() => (pageIndex += 1)}
-							aria-label="Next page"
-						>
-							<ChevronRight class="size-4" />
-						</Button>
-					</div>
-				{/if}
-			</div>
-		{/if}
+			<TablePagination
+				pageIndex={pagination.pageIndex}
+				pageSize={pagination.pageSize}
+				{pageCount}
+				{totalItems}
+				onPageChange={(p) => (pagination = { ...pagination, pageIndex: p })}
+				onPageSizeChange={(s) => (pagination = { pageIndex: 0, pageSize: s })}
+			/>
+		</div>
 	{/if}
 
-	<!-- Pending invitations -->
-	{#if emailConfigured}
+	{#if emailConfigured && !useInjectedData}
 		<PendingInvitations refreshTrigger={inviteRefresh} />
 	{/if}
 </div>
 
-<!-- Bulk actions bar -->
-{#if someSelected}
-	<div
-		class="users-bulk-bar"
-		transition:fly={{ y: 60, duration: 250 }}
-	>
-		<div
-			class="flex items-center gap-3 rounded-xl px-5 py-2.5 shadow-xl"
-			style="background: var(--plum-darker); color: white;"
-		>
-			<span class="text-sm font-bold whitespace-nowrap">{lang.selected(selectedIds.size)}</span>
-			<div class="h-5 w-px" style="background: rgba(255,255,255,0.2);"></div>
-
-			<Popover.Root>
-				<Popover.Trigger>
-					<button
-						class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-white/10"
-						style="border-color: rgba(255,255,255,0.2);"
+<BulkActionsBar
+	{selectedCount}
+	onDelete={handleBulkDelete}
+	onClear={() => (rowSelection = {})}
+>
+	{#snippet actions()}
+		<Popover.Root>
+			<Popover.Trigger>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="ghost"
+						size="sm"
+						class="border border-white/20 text-white hover:bg-white/10 hover:text-white"
 					>
 						{lang.changeRole}
-					</button>
-				</Popover.Trigger>
-				<Popover.Content class="w-40 p-1" align="center" side="top">
-					<button
-						class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
-						onclick={() => handleBulkChangeRole('admin')}
-					>
-						{lang.roleAdmin}
-					</button>
-					<button
-						class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
-						onclick={() => handleBulkChangeRole('user')}
-					>
-						{lang.roleUser}
-					</button>
-				</Popover.Content>
-			</Popover.Root>
-
-			<button
-				class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-red-500/20"
-				style="border-color: rgba(196,75,75,0.5);"
-				onclick={handleBulkDelete}
-			>
-				<Trash class="size-3.5" />
-				{lang.deleteUser}
-			</button>
-
-			<button
-				class="ml-1 inline-flex items-center justify-center rounded-md p-1 text-white/70 transition-colors hover:bg-white/10 hover:text-white"
-				onclick={clearSelection}
-				aria-label={lang.cancel}
-			>
-				<X class="size-4" />
-			</button>
-		</div>
-	</div>
-{/if}
+					</Button>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-40 p-1" align="center" side="top">
+				<button
+					class="hover:bg-accent flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors"
+					onclick={() => handleBulkChangeRole('admin')}
+				>
+					{lang.roleAdmin}
+				</button>
+				<button
+					class="hover:bg-accent flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors"
+					onclick={() => handleBulkChangeRole('user')}
+				>
+					{lang.roleUser}
+				</button>
+			</Popover.Content>
+		</Popover.Root>
+	{/snippet}
+</BulkActionsBar>
 
-<CreateUserDialog bind:open={createOpen} onOpenChange={(v) => (createOpen = v)} onCreated={loadUsers} />
+<CreateUserDialog
+	bind:open={createOpen}
+	onOpenChange={(v) => (createOpen = v)}
+	onCreated={loadUsers}
+/>
 
 <EditUserDialog
 	bind:open={editOpen}