includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/collection/state-display.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import FileText from '@tabler/icons-svelte/icons/file-text';
+	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
+	import AlertCircle from '@tabler/icons-svelte/icons/alert-circle';
+	import Plus from '@tabler/icons-svelte/icons/plus';
+	import Refresh from '@tabler/icons-svelte/icons/refresh';
+	import Button from '../../../components/ui/button/button.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { errorMessages, pickError } from '../../i18n/errors.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	type Props = {
+		kind: 'empty' | 'loading' | 'error';
+		title?: string;
+		description?: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+		icon?: Snippet;
+	};
+
+	let { kind, title, description, ctaLabel, onCta, icon }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const defaults: Record<InterfaceLanguage, { loading: string; error: string; empty: string; retry: string }> = {
+		en: {
+			loading: 'Loading…',
+			error: pickError(errorMessages.network.generic, 'en'),
+			empty: 'Nothing here yet',
+			retry: 'Try again'
+		},
+		pl: {
+			loading: 'Ładowanie…',
+			error: pickError(errorMessages.network.generic, 'pl'),
+			empty: 'Nic tu jeszcze nie ma',
+			retry: 'Spróbuj ponownie'
+		}
+	};
+
+	const t = $derived(defaults[interfaceLanguage.current]);
+	const resolvedTitle = $derived(title ?? (kind === 'loading' ? t.loading : kind === 'error' ? t.error : t.empty));
+	const resolvedCtaLabel = $derived(ctaLabel ?? (kind === 'error' ? t.retry : undefined));
+</script>
+
+{#if kind === 'loading'}
+	<div
+		class="flex flex-col items-center justify-center py-16 px-4 text-center"
+		role="status"
+		aria-live="polite"
+		aria-busy="true"
+	>
+		{#if icon}{@render icon()}{:else}
+			<div class="flex items-center justify-center w-[72px] h-[72px] rounded-2xl bg-muted mb-5">
+				<Loader2 class="size-8 text-muted-foreground animate-spin" />
+			</div>
+		{/if}
+		<h3 class="text-lg font-bold text-foreground mb-2">{resolvedTitle}</h3>
+		{#if description}
+			<p class="text-sm text-muted-foreground max-w-[360px]">{description}</p>
+		{/if}
+	</div>
+{:else if kind === 'error'}
+	<div
+		class="flex flex-col items-center justify-center py-16 px-4 text-center"
+		role="alert"
+	>
+		{#if icon}{@render icon()}{:else}
+			<div class="flex items-center justify-center w-[72px] h-[72px] rounded-2xl bg-destructive-bg mb-5">
+				<AlertCircle class="size-8 text-destructive" />
+			</div>
+		{/if}
+		<h3 class="text-lg font-bold text-foreground mb-2">{resolvedTitle}</h3>
+		{#if description}
+			<p class="text-sm text-muted-foreground max-w-[360px] mb-6">{description}</p>
+		{/if}
+		{#if resolvedCtaLabel && onCta}
+			<Button variant="default" onclick={onCta}>
+				<Refresh class="size-4 mr-1.5" />
+				{resolvedCtaLabel}
+			</Button>
+		{/if}
+	</div>
+{:else}
+	<div class="flex flex-col items-center justify-center py-16 px-4 text-center">
+		{#if icon}{@render icon()}{:else}
+			<div class="flex items-center justify-center w-[72px] h-[72px] rounded-2xl bg-muted mb-5">
+				<FileText class="size-8 text-muted-foreground" />
+			</div>
+		{/if}
+		<h3 class="text-lg font-bold text-foreground mb-2">{resolvedTitle}</h3>
+		{#if description}
+			<p class="text-sm text-muted-foreground max-w-[360px] mb-6">{description}</p>
+		{/if}
+		{#if resolvedCtaLabel && onCta}
+			<Button variant="default" onclick={onCta} data-testid="create-entry-button">
+				<Plus class="size-4 mr-1.5" />
+				{resolvedCtaLabel}
+			</Button>
+		{/if}
+	</div>
+{/if}

package/dist/admin/client/collection/state-display.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    kind: 'empty' | 'loading' | 'error';
+    title?: string;
+    description?: string;
+    ctaLabel?: string;
+    onCta?: () => void;
+    icon?: Snippet;
+};
+declare const StateDisplay: import("svelte").Component<Props, {}, "">;
+type StateDisplay = ReturnType<typeof StateDisplay>;
+export default StateDisplay;

package/dist/admin/client/collection/status-badge.svelte

@@ -1,17 +1,46 @@
 <script lang="ts">
 	import type { EntryStatus } from '../../../types/entries.js';
+	import type { OrderStatus } from '../../../shop/types.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 
+	/**
+	 * StatusBadge accepts three usage modes (variants):
+	 * - entry (default): pass `status` as `EntryStatus`
+	 * - order: pass `variant="order"` and `status` as `OrderStatus`
+	 * - boolean: pass `variant="boolean"` and `active: boolean`
+	 *
+	 * Type stays permissive (FlatProps) so consumers can pass any combination;
+	 * runtime narrows by `variant` and falls back to muted style on unknown.
+	 */
 	type Props = {
-		status: EntryStatus;
+		variant?: 'entry' | 'order' | 'boolean';
+		status?: EntryStatus | OrderStatus;
+		active?: boolean;
+		activeLabel?: string;
+		inactiveLabel?: string;
 	};
 
-	let { status }: Props = $props();
+	let {
+		variant = 'entry',
+		status,
+		active,
+		activeLabel,
+		inactiveLabel
+	}: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
 
-	const labels: Record<InterfaceLanguage, Record<EntryStatus, string>> = {
+	type StatusStyle = { dot: string; classes: string };
+
+	const entryStyles: Record<EntryStatus, StatusStyle> = {
+		published: { dot: '●', classes: 'bg-success-bg text-success' },
+		draft: { dot: '○', classes: 'bg-muted text-muted-foreground' },
+		scheduled: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		archived: { dot: '◎', classes: 'bg-muted text-muted-foreground' }
+	};
+
+	const entryLabels: Record<InterfaceLanguage, Record<EntryStatus, string>> = {
 		en: {
 			published: 'Published',
 			draft: 'Draft',
@@ -26,17 +55,76 @@
 		}
 	};
 
-	const statusConfig: Record<EntryStatus, { dot: string; classes: string }> = {
-		published: { dot: '●', classes: 'bg-success-bg text-success' },
-		draft: { dot: '○', classes: 'bg-muted text-muted-foreground' },
-		scheduled: { dot: '◐', classes: 'bg-warning-bg text-warning' },
-		archived: { dot: '◎', classes: 'bg-muted text-muted-foreground' }
+	const orderStyles: Record<OrderStatus, StatusStyle> = {
+		new: { dot: '●', classes: 'bg-info-bg text-info' },
+		awaitingPayment: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		paid: { dot: '●', classes: 'bg-success-bg text-success' },
+		preparing: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		sent: { dot: '●', classes: 'bg-info-bg text-info' },
+		done: { dot: '●', classes: 'bg-success-bg text-success' },
+		cancelled: { dot: '○', classes: 'bg-muted text-muted-foreground' },
+		paymentRejected: { dot: '●', classes: 'bg-destructive-bg text-destructive' },
+		refunded: { dot: '○', classes: 'bg-muted text-muted-foreground' }
 	};
+
+	const orderLabels: Record<InterfaceLanguage, Record<OrderStatus, string>> = {
+		en: {
+			new: 'New',
+			awaitingPayment: 'Awaiting payment',
+			paid: 'Paid',
+			preparing: 'Preparing',
+			sent: 'Sent',
+			done: 'Done',
+			cancelled: 'Cancelled',
+			paymentRejected: 'Payment rejected',
+			refunded: 'Refunded'
+		},
+		pl: {
+			new: 'Nowe',
+			awaitingPayment: 'Oczekuje płatności',
+			paid: 'Opłacone',
+			preparing: 'W przygotowaniu',
+			sent: 'Wysłane',
+			done: 'Zrealizowane',
+			cancelled: 'Anulowane',
+			paymentRejected: 'Płatność odrzucona',
+			refunded: 'Zwrócone'
+		}
+	};
+
+	const booleanDefaults: Record<InterfaceLanguage, { active: string; inactive: string }> = {
+		en: { active: 'Active', inactive: 'Inactive' },
+		pl: { active: 'Aktywny', inactive: 'Nieaktywny' }
+	};
+
+	const fallbackStyle: StatusStyle = { dot: '○', classes: 'bg-muted text-muted-foreground' };
+
+	const computed = $derived.by(() => {
+		const lang = interfaceLanguage.current;
+		if (variant === 'order') {
+			const s = status as OrderStatus | undefined;
+			if (!s || !(s in orderStyles)) return { style: fallbackStyle, label: String(s ?? '') };
+			return { style: orderStyles[s], label: orderLabels[lang][s] };
+		}
+		if (variant === 'boolean') {
+			const isActive = active === true;
+			const fallback = booleanDefaults[lang];
+			return {
+				style: isActive
+					? { dot: '●', classes: 'bg-success-bg text-success' }
+					: { dot: '○', classes: 'bg-muted text-muted-foreground' },
+				label: isActive ? (activeLabel ?? fallback.active) : (inactiveLabel ?? fallback.inactive)
+			};
+		}
+		const s = status as EntryStatus | undefined;
+		if (!s || !(s in entryStyles)) return { style: fallbackStyle, label: String(s ?? '') };
+		return { style: entryStyles[s], label: entryLabels[lang][s] };
+	});
 </script>
 
 <span
-	class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-semibold leading-none {statusConfig[status].classes}"
+	class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-semibold leading-none {computed.style.classes}"
 >
-	<span class="text-[9px]" aria-hidden="true">{statusConfig[status].dot}</span>
-	{labels[interfaceLanguage.current][status]}
+	<span class="text-[9px]" aria-hidden="true">{computed.style.dot}</span>
+	{computed.label}
 </span>

package/dist/admin/client/collection/status-badge.svelte.d.ts

@@ -1,6 +1,20 @@
 import type { EntryStatus } from '../../../types/entries.js';
+import type { OrderStatus } from '../../../shop/types.js';
+/**
+ * StatusBadge accepts three usage modes (variants):
+ * - entry (default): pass `status` as `EntryStatus`
+ * - order: pass `variant="order"` and `status` as `OrderStatus`
+ * - boolean: pass `variant="boolean"` and `active: boolean`
+ *
+ * Type stays permissive (FlatProps) so consumers can pass any combination;
+ * runtime narrows by `variant` and falls back to muted style on unknown.
+ */
 type Props = {
-    status: EntryStatus;
+    variant?: 'entry' | 'order' | 'boolean';
+    status?: EntryStatus | OrderStatus;
+    active?: boolean;
+    activeLabel?: string;
+    inactiveLabel?: string;
 };
 declare const StatusBadge: import("svelte").Component<Props, {}, "">;
 type StatusBadge = ReturnType<typeof StatusBadge>;

package/dist/admin/client/collection/table-pagination.svelte

@@ -28,6 +28,8 @@
 		{
 			showing: (start: number, end: number, total: number, label?: string) => string;
 			perPage: string;
+			itemsPerPage: string;
+			pagination: string;
 			firstPage: string;
 			previousPage: string;
 			nextPage: string;
@@ -38,6 +40,8 @@
 		en: {
 			showing: (s, e, t, l) => `Showing ${s}–${e} of ${t}${l ? ` ${l}` : ''}`,
 			perPage: 'per page',
+			itemsPerPage: 'Items per page',
+			pagination: 'Pagination',
 			firstPage: 'First page',
 			previousPage: 'Previous page',
 			nextPage: 'Next page',
@@ -47,6 +51,8 @@
 		pl: {
 			showing: (s, e, t, l) => `Wyświetlono ${s}–${e} z ${t}${l ? ` ${l}` : ''}`,
 			perPage: 'na stronie',
+			itemsPerPage: 'Elementów na stronie',
+			pagination: 'Paginacja',
 			firstPage: 'Pierwsza strona',
 			previousPage: 'Poprzednia strona',
 			nextPage: 'Następna strona',
@@ -64,6 +70,8 @@
 	const startItem = $derived(totalItems === 0 ? 0 : pageIndex * pageSize + 1);
 	const endItem = $derived(Math.min((pageIndex + 1) * pageSize, totalItems));
 
+	const showingMessage = $derived(t.showing(startItem, endItem, totalItems, itemLabel));
+
 	/** Generate visible page numbers with ellipsis */
 	const visiblePages = $derived.by(() => {
 		if (pageCount <= 7) {
@@ -91,12 +99,15 @@
 
 {#if totalItems > 0}
 	<div class="flex flex-wrap items-center justify-between gap-4 px-1 py-4">
-		<div class="text-muted-foreground text-sm">
-			{t.showing(startItem, endItem, totalItems, itemLabel)}
+		<div class="text-muted-foreground text-sm" aria-hidden="true">
+			{showingMessage}
+		</div>
+		<div role="status" aria-live="polite" aria-atomic="true" class="sr-only">
+			{showingMessage}
 		</div>
 
 		<div class="flex items-center gap-3">
-			<nav class="flex items-center gap-1" aria-label="Pagination">
+			<nav class="flex items-center gap-1" aria-label={t.pagination}>
 				<Button
 					variant="outline"
 					size="icon"
@@ -104,6 +115,7 @@
 					disabled={!canGoPrevious}
 					onclick={() => onPageChange(0)}
 					title={t.firstPage}
+					aria-label={t.firstPage}
 				>
 					<ChevronsLeft class="size-4" />
 				</Button>
@@ -114,13 +126,14 @@
 					disabled={!canGoPrevious}
 					onclick={() => onPageChange(pageIndex - 1)}
 					title={t.previousPage}
+					aria-label={t.previousPage}
 				>
 					<ChevronLeft class="size-4" />
 				</Button>
 
 				{#each visiblePages as page}
 					{#if page === 'ellipsis'}
-						<span class="px-1 text-sm text-muted-foreground">…</span>
+						<span class="px-1 text-sm text-muted-foreground" aria-hidden="true">…</span>
 					{:else}
 						<Button
 							variant={page === pageIndex ? 'default' : 'outline'}
@@ -142,6 +155,7 @@
 					disabled={!canGoNext}
 					onclick={() => onPageChange(pageIndex + 1)}
 					title={t.nextPage}
+					aria-label={t.nextPage}
 				>
 					<ChevronRight class="size-4" />
 				</Button>
@@ -152,6 +166,7 @@
 					disabled={!canGoNext}
 					onclick={() => onPageChange(pageCount - 1)}
 					title={t.lastPage}
+					aria-label={t.lastPage}
 				>
 					<ChevronsRight class="size-4" />
 				</Button>
@@ -163,7 +178,7 @@
 					value={String(pageSize)}
 					onValueChange={(value) => value && onPageSizeChange(Number(value))}
 				>
-					<Select.Trigger class="h-8 w-[70px] text-xs">
+					<Select.Trigger class="h-8 w-[70px] text-xs" aria-label={t.itemsPerPage}>
 						{pageSize}
 					</Select.Trigger>
 					<Select.Content>
@@ -172,7 +187,7 @@
 						{/each}
 					</Select.Content>
 				</Select.Root>
-				<span class="text-xs text-muted-foreground">{t.perPage}</span>
+				<span class="text-xs text-muted-foreground" aria-hidden="true">{t.perPage}</span>
 			</div>
 		</div>
 	</div>

package/dist/admin/client/collection/table-toolbar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import Search from '@tabler/icons-svelte/icons/search';
 	import List from '@tabler/icons-svelte/icons/list';
 	import LayoutGrid from '@tabler/icons-svelte/icons/layout-grid';
-	import Plus from '@tabler/icons-svelte/icons/plus';
 	import Filter from '@tabler/icons-svelte/icons/filter';
 	import Input from '../../../components/ui/input/input.svelte';
 	import Button from '../../../components/ui/button/button.svelte';
@@ -18,33 +18,37 @@
 	}
 
 	type Props = {
-		searchQuery: string;
-		onSearchChange: (query: string) => void;
-		statusFilter: StatusFilter;
-		onStatusFilterChange: (filter: StatusFilter) => void;
-		viewMode: ViewMode;
-		onViewModeChange: (mode: ViewMode) => void;
-		onCreateEntry: () => void;
-		createLabel: string;
+		searchQuery?: string;
+		onSearchChange?: (query: string) => void;
 		searchPlaceholder?: string;
+		searchLabel?: string;
+		statusFilter?: StatusFilter;
+		onStatusFilterChange?: (filter: StatusFilter) => void;
+		hideStatusFilter?: boolean;
+		viewMode?: ViewMode;
+		onViewModeChange?: (mode: ViewMode) => void;
+		hideViewToggle?: boolean;
 		dataFilters?: DataFilterConfig[];
 		activeDataFilters?: Record<string, string | null>;
 		onDataFilterChange?: (slug: string, value: string | null) => void;
+		actions?: Snippet;
 	};
 
 	let {
-		searchQuery,
+		searchQuery = '',
 		onSearchChange,
-		statusFilter,
+		searchPlaceholder,
+		searchLabel,
+		statusFilter = null,
 		onStatusFilterChange,
-		viewMode,
+		hideStatusFilter = false,
+		viewMode = 'list',
 		onViewModeChange,
-		onCreateEntry,
-		createLabel,
-		searchPlaceholder,
+		hideViewToggle = false,
 		dataFilters = [],
 		activeDataFilters = {},
-		onDataFilterChange
+		onDataFilterChange,
+		actions
 	}: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
@@ -53,6 +57,7 @@
 		InterfaceLanguage,
 		{
 			search: string;
+			searchAria: string;
 			listView: string;
 			gridView: string;
 			status: string;
@@ -65,6 +70,7 @@
 	> = {
 		en: {
 			search: 'Search...',
+			searchAria: 'Search',
 			listView: 'List view',
 			gridView: 'Grid view',
 			status: 'Status',
@@ -76,6 +82,7 @@
 		},
 		pl: {
 			search: 'Szukaj...',
+			searchAria: 'Szukaj',
 			listView: 'Widok listy',
 			gridView: 'Widok kafelków',
 			status: 'Status',
@@ -105,69 +112,80 @@
 
 	let statusPopoverOpen = $state(false);
 	let dataFilterPopovers = $state<Record<string, boolean>>({});
+
+	const searchId = `table-toolbar-search-${Math.random().toString(36).slice(2, 9)}`;
 </script>
 
-<div class="mb-6 flex flex-wrap items-center gap-2.5">
-	<div class="relative min-w-[240px] flex-1">
+<div class="mb-4 flex flex-wrap items-center gap-2 sm:mb-6 sm:gap-2.5">
+	<div class="relative w-full min-w-0 flex-1 sm:w-auto sm:min-w-[240px]">
+		<label for={searchId} class="sr-only">{searchLabel ?? t.searchAria}</label>
 		<Search
 			class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
 		/>
 		<Input
+			id={searchId}
 			type="text"
 			placeholder={searchPlaceholder ?? t.search}
 			class="border-border focus-visible:ring-primary/30 bg-white pl-9"
 			value={searchQuery}
-			oninput={(e) => onSearchChange(e.currentTarget.value)}
+			oninput={(e) => onSearchChange?.(e.currentTarget.value)}
 		/>
 	</div>
 
-	<Popover.Root bind:open={statusPopoverOpen}>
-		<Popover.Trigger>
-			{#snippet child({ props })}
-				<Button
-					{...props}
-					variant="outline"
-					size="sm"
-					class="gap-1.5 {hasActiveFilter
-						? 'border-primary/30 bg-lavender-lighter text-primary'
-						: ''}"
-					data-testid="status-filter-trigger"
-				>
-					<Filter class="size-3.5" />
-					{t.status}{hasActiveFilter ? `: ${activeFilterLabel}` : ''}
-				</Button>
-			{/snippet}
-		</Popover.Trigger>
-		<Popover.Content class="w-44 p-1" align="start">
-			{#each statusOptions as option}
-				<button
-					class="hover:bg-accent flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors {statusFilter ===
-					option.value
-						? 'bg-accent text-accent-foreground font-medium'
-						: 'text-foreground'}"
-					onclick={() => {
-						onStatusFilterChange(option.value);
-						statusPopoverOpen = false;
-					}}
-					data-testid="status-filter-option-{option.value ?? 'all'}"
-				>
-					{option.label()}
-				</button>
-			{/each}
-		</Popover.Content>
-	</Popover.Root>
+	{#if !hideStatusFilter && onStatusFilterChange}
+		<Popover.Root bind:open={statusPopoverOpen}>
+			<Popover.Trigger>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="outline"
+						size="sm"
+						aria-pressed={hasActiveFilter}
+						class="gap-1.5 {hasActiveFilter
+							? 'border-primary/30 bg-lavender-lighter text-primary'
+							: ''}"
+						data-testid="status-filter-trigger"
+					>
+						<Filter class="size-3.5" />
+						{t.status}{hasActiveFilter ? `: ${activeFilterLabel}` : ''}
+					</Button>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-44 p-1" align="start">
+				{#each statusOptions as option}
+					<button
+						class="hover:bg-accent flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors {statusFilter ===
+						option.value
+							? 'bg-accent text-accent-foreground font-medium'
+							: 'text-foreground'}"
+						onclick={() => {
+							onStatusFilterChange(option.value);
+							statusPopoverOpen = false;
+						}}
+						data-testid="status-filter-option-{option.value ?? 'all'}"
+					>
+						{option.label()}
+					</button>
+				{/each}
+			</Popover.Content>
+		</Popover.Root>
+	{/if}
 
 	{#each dataFilters as filter}
 		{@const activeValue = activeDataFilters[filter.slug] ?? null}
 		{@const hasActive = activeValue !== null}
 		{@const activeLabel = filter.options.find((o) => o.value === activeValue)?.label ?? ''}
-		<Popover.Root open={dataFilterPopovers[filter.slug] ?? false} onOpenChange={(v) => dataFilterPopovers[filter.slug] = v}>
+		<Popover.Root
+			open={dataFilterPopovers[filter.slug] ?? false}
+			onOpenChange={(v) => (dataFilterPopovers[filter.slug] = v)}
+		>
 			<Popover.Trigger>
 				{#snippet child({ props })}
 					<Button
 						{...props}
 						variant="outline"
 						size="sm"
+						aria-pressed={hasActive}
 						class="gap-1.5 {hasActive
 							? 'border-primary/30 bg-lavender-lighter text-primary'
 							: ''}"
@@ -207,31 +225,38 @@
 		</Popover.Root>
 	{/each}
 
-	<div class="flex items-center gap-0.5 rounded-lg border p-0.5">
-		<Button
-			variant={viewMode === 'list' ? 'secondary' : 'ghost'}
-			size="icon"
-			class="h-7 w-7"
-			onclick={() => onViewModeChange('list')}
-			title={t.listView}
-		>
-			<List class="size-3.5" />
-		</Button>
-		<Button
-			variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
-			size="icon"
-			class="h-7 w-7"
-			onclick={() => onViewModeChange('grid')}
-			title={t.gridView}
-		>
-			<LayoutGrid class="size-3.5" />
-		</Button>
-	</div>
+	{#if !hideViewToggle && onViewModeChange}
+		<div class="flex items-center gap-0.5 rounded-lg border p-0.5" role="group" aria-label={t.listView + ' / ' + t.gridView}>
+			<Button
+				variant={viewMode === 'list' ? 'secondary' : 'ghost'}
+				size="icon"
+				class="h-7 w-7"
+				aria-pressed={viewMode === 'list'}
+				onclick={() => onViewModeChange('list')}
+				title={t.listView}
+				aria-label={t.listView}
+			>
+				<List class="size-3.5" />
+			</Button>
+			<Button
+				variant={viewMode === 'grid' ? 'secondary' : 'ghost'}
+				size="icon"
+				class="h-7 w-7"
+				aria-pressed={viewMode === 'grid'}
+				onclick={() => onViewModeChange('grid')}
+				title={t.gridView}
+				aria-label={t.gridView}
+			>
+				<LayoutGrid class="size-3.5" />
+			</Button>
+		</div>
+	{/if}
 
-	<div class="flex-1"></div>
+	<div class="hidden flex-1 sm:block"></div>
 
-	<Button variant="default" size="sm" onclick={onCreateEntry} data-testid="create-entry-button">
-		<Plus class="mr-1 size-4" />
-		{createLabel}
-	</Button>
+	{#if actions}
+		<div class="flex flex-wrap items-center gap-2 max-sm:ml-auto">
+			{@render actions()}
+		</div>
+	{/if}
 </div>