includio-cms 0.1.4 → 0.5.0

package/dist/admin/components/dashboard/a11y-gauge.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	const CIRCUMFERENCE = 2 * Math.PI * 54; // 339.292
+
+	const lang: Record<InterfaceLanguage, {
+		title: string;
+		overallScore: string;
+		imageDescriptions: string;
+		allGood: string;
+		hint: (n: number) => string;
+	}> = {
+		pl: {
+			title: 'Dostępność treści',
+			overallScore: 'wynik ogólny',
+			imageDescriptions: 'Opisy obrazów',
+			allGood: 'Wszystkie obrazy mają opisy — świetna robota!',
+			hint: (n) => `${n} ${n === 1 ? 'obraz wymaga' : 'obrazów wymaga'} dodania opisu. Przejdź do biblioteki mediów, żeby je uzupełnić.`
+		},
+		en: {
+			title: 'Content accessibility',
+			overallScore: 'overall score',
+			imageDescriptions: 'Image descriptions',
+			allGood: 'All images have descriptions — great job!',
+			hint: (n) => `${n} image${n === 1 ? ' needs' : 's need'} a description. Go to the media library to add them.`
+		}
+	};
+</script>
+
+<section class="dash-card dash-card--a11y" aria-labelledby="a11y-heading">
+	<div class="dash-card-header">
+		<h2 class="dash-card-title" id="a11y-heading">{lang[interfaceLanguage.current].title}</h2>
+	</div>
+
+	{#await remotes.getAltOverview()}
+		<div class="a11y-card-body">
+			<div class="gauge-wrap">
+				<Skeleton class="rounded-full" style="width:140px;height:140px" />
+			</div>
+			<Skeleton class="h-4 w-32 mb-2" />
+			<Skeleton class="h-12 w-full" />
+		</div>
+	{:then overview}
+		{@const compliancePercent = overview.totalFiles > 0 ? Math.round((overview.filesWithAlt / overview.totalFiles) * 100) : 100}
+		{@const fillLength = (compliancePercent / 100) * CIRCUMFERENCE}
+		{@const hasIssues = overview.filesWithoutAlt > 0}
+
+		<div class="a11y-card-body">
+			<div class="gauge-wrap">
+				<svg class="gauge-svg" viewBox="0 0 140 140" role="img" aria-label="{interfaceLanguage.current === 'pl' ? 'Ocena dostępności' : 'Accessibility score'}: {compliancePercent}%">
+					<circle class="gauge-bg" cx="70" cy="70" r="54" />
+					<circle class="gauge-fill" cx="70" cy="70" r="54"
+						style="stroke-dasharray: {fillLength} {CIRCUMFERENCE}"
+						stroke-dashoffset="0" />
+					<text class="gauge-text-group" x="70" y="64">
+						<tspan class="gauge-value">{compliancePercent}%</tspan>
+					</text>
+					<text class="gauge-text-group" x="70" y="84">
+						<tspan class="gauge-label">{lang[interfaceLanguage.current].overallScore}</tspan>
+					</text>
+				</svg>
+			</div>
+
+			<ul class="a11y-breakdown" aria-label={interfaceLanguage.current === 'pl' ? 'Szczegóły dostępności' : 'Accessibility details'}>
+				<li class="a11y-breakdown-item">
+					<span class="a11y-breakdown-icon {hasIssues ? 'a11y-breakdown-icon--warn' : 'a11y-breakdown-icon--ok'}" aria-hidden="true">
+						{hasIssues ? '⚠' : '✓'}
+					</span>
+					<span class="a11y-breakdown-label">
+						{lang[interfaceLanguage.current].imageDescriptions}
+					</span>
+				</li>
+			</ul>
+
+			<div class="a11y-hint" role="status">
+				{#if hasIssues}
+					{lang[interfaceLanguage.current].hint(overview.filesWithoutAlt)}
+				{:else}
+					{lang[interfaceLanguage.current].allGood}
+				{/if}
+			</div>
+		</div>
+	{/await}
+</section>

package/dist/admin/components/dashboard/a11y-gauge.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const A11yGauge: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type A11yGauge = InstanceType<typeof A11yGauge>;
+export default A11yGauge;

package/dist/admin/components/dashboard/accessibility-hub.svelte

@@ -6,6 +6,7 @@
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import StatCard from './stat-card.svelte';
+	import * as Alert from '../../../components/ui/alert/index.js';
 	import AccessibilityIcon from '@tabler/icons-svelte/icons/accessible';
 	import PhotoIcon from '@tabler/icons-svelte/icons/photo';
 	import AlertTriangleIcon from '@tabler/icons-svelte/icons/alert-triangle';
@@ -53,7 +54,7 @@
 	};
 </script>
 
-<Card.Root class="rounded-2xl border-slate-200/50 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+<Card.Root class="rounded-2xl border bg-card shadow-sm">
 	<Card.Header class="pb-2">
 		<div class="flex items-center gap-2">
 			<div class="rounded-lg bg-primary/10 p-2">
@@ -103,7 +104,7 @@
 						value={overview.totalFiles}
 					>
 						{#snippet icon()}
-							<PhotoIcon class="size-5 text-slate-600 dark:text-slate-400" />
+							<PhotoIcon class="size-5 text-muted-foreground" />
 						{/snippet}
 					</StatCard>
 
@@ -121,24 +122,24 @@
 				</div>
 
 				{#if hasIssues}
-					<div class="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900/50 dark:bg-amber-950/30">
+					<Alert.Root variant="warning" class="flex items-center justify-between">
 						<div class="flex items-center gap-2">
-							<AlertTriangleIcon class="size-5 text-amber-600 dark:text-amber-400" />
-							<span class="text-sm text-amber-800 dark:text-amber-200">
+							<AlertTriangleIcon class="size-5" />
+							<Alert.Description class="text-inherit">
 								{overview.filesWithoutAlt} {lang[interfaceLanguage.current].issuesFound}
-							</span>
+							</Alert.Description>
 						</div>
 						<Button href="/admin/media" variant="outline" size="sm">
 							{lang[interfaceLanguage.current].fixIssues}
 						</Button>
-					</div>
+					</Alert.Root>
 				{:else}
-					<div class="flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900/50 dark:bg-emerald-950/30">
-						<CircleCheckIcon class="size-5 text-emerald-600 dark:text-emerald-400" />
-						<span class="text-sm text-emerald-800 dark:text-emerald-200">
+					<Alert.Root variant="success">
+						<CircleCheckIcon class="size-5" />
+						<Alert.Description class="text-inherit">
 							{lang[interfaceLanguage.current].allGood}
-						</span>
-					</div>
+						</Alert.Description>
+					</Alert.Root>
 				{/if}
 			</div>
 		{/await}

package/dist/admin/components/dashboard/form-submissions-widget.svelte

@@ -1,47 +1,28 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
-	import * as Card from '../../../components/ui/card/index.js';
-	import { Badge } from '../../../components/ui/badge/index.js';
-	import { Button } from '../../../components/ui/button/index.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import type { InterfaceLanguage, Localized } from '../../../types/languages.js';
-	import InboxIcon from '@tabler/icons-svelte/icons/inbox';
-	import MailIcon from '@tabler/icons-svelte/icons/mail';
-	import MailOpenedIcon from '@tabler/icons-svelte/icons/mail-opened';
-	import ChevronRightIcon from '@tabler/icons-svelte/icons/chevron-right';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
-	const lang: Record<
-		InterfaceLanguage,
-		{
-			title: string;
-			description: string;
-			viewAll: string;
-			noSubmissions: string;
-			new: string;
-			total: string;
-		}
-	> = {
+	const lang: Record<InterfaceLanguage, {
+		title: string;
+		viewAll: string;
+		noSubmissions: string;
+	}> = {
 		pl: {
-			title: 'Zgłoszenia formularzy',
-			description: 'Ostatnie zgłoszenia',
-			viewAll: 'Zobacz wszystkie',
-			noSubmissions: 'Brak zgłoszeń',
-			new: 'nowe',
-			total: 'wszystkich'
+			title: 'Zgłoszenia',
+			viewAll: 'Wszystkie →',
+			noSubmissions: 'Brak zgłoszeń'
 		},
 		en: {
-			title: 'Form Submissions',
-			description: 'Recent submissions',
-			viewAll: 'View all',
-			noSubmissions: 'No submissions',
-			new: 'new',
-			total: 'total'
+			title: 'Submissions',
+			viewAll: 'View all →',
+			noSubmissions: 'No submissions'
 		}
 	};
 
@@ -50,93 +31,70 @@
 	}
 </script>
 
-<Card.Root class="rounded-2xl border-slate-200/50 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
-	<Card.Header class="pb-2">
-		<div class="flex items-center gap-2">
-			<div class="rounded-lg bg-blue-500/10 p-2">
-				<InboxIcon class="size-5 text-blue-600 dark:text-blue-400" />
-			</div>
-			<div>
-				<Card.Title>{lang[interfaceLanguage.current].title}</Card.Title>
-				<Card.Description>{lang[interfaceLanguage.current].description}</Card.Description>
-			</div>
+<section class="dash-card dash-card--forms" aria-labelledby="forms-heading">
+	<div class="dash-card-header">
+		<h2 class="dash-card-title" id="forms-heading">{lang[interfaceLanguage.current].title}</h2>
+		<a href="/admin/forms" class="dash-card-link">{lang[interfaceLanguage.current].viewAll}</a>
+	</div>
+
+	{#await remotes.getSubmissionsOverview()}
+		<div class="forms-card-body">
+			{#each Array(2) as _}
+				<div class="form-group">
+					<Skeleton class="h-4 w-24 mb-2" />
+					<Skeleton class="h-8 w-full" />
+					<Skeleton class="h-8 w-full mt-1" />
+				</div>
+			{/each}
 		</div>
-	</Card.Header>
-	<Card.Content>
-		{#await remotes.getSubmissionsOverview()}
-			<div class="space-y-3">
-				{#each Array(3) as _}
-					<div class="flex items-center gap-3">
-						<Skeleton class="size-8 rounded-lg" />
-						<div class="flex-1 space-y-1">
-							<Skeleton class="h-4 w-32" />
-							<Skeleton class="h-3 w-20" />
+	{:then overview}
+		{#if overview.length === 0}
+			<p class="text-center text-sm py-6" style="color:var(--text-light)">
+				{lang[interfaceLanguage.current].noSubmissions}
+			</p>
+		{:else}
+			<div class="forms-card-body">
+				{#each overview as form}
+					<div class="form-group">
+						<div class="form-group-header">
+							<span class="form-group-name">
+								{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}
+							</span>
+							<span
+								class="form-group-badge {form.unread > 0 ? 'form-group-badge--unread' : ''}"
+								aria-label="{form.unread} {interfaceLanguage.current === 'pl' ? 'nieprzeczytanych' : 'unread'}"
+							>
+								{form.unread}
+							</span>
 						</div>
-					</div>
-				{/each}
-			</div>
-		{:then overview}
-			{@const totalUnread = overview.reduce((sum, f) => sum + f.unread, 0)}
 
-			{#if overview.length === 0}
-				<p class="text-muted-foreground py-4 text-center text-sm">
-					{lang[interfaceLanguage.current].noSubmissions}
-				</p>
-			{:else}
-				<div class="space-y-4">
-					{#each overview as form}
-						<div class="space-y-2">
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-2">
-									<span class="font-medium">
-										{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}
-									</span>
-									{#if form.unread > 0}
-										<Badge variant="default" class="h-5 px-1.5 text-xs">
-											{form.unread}
-										</Badge>
-									{/if}
-								</div>
-								<Button href="/admin/forms/{form.slug}" variant="ghost" size="sm" class="h-7 px-2">
-									{lang[interfaceLanguage.current].viewAll}
-									<ChevronRightIcon class="ml-1 size-4" />
-								</Button>
-							</div>
-
-							{#if form.recent.length > 0}
-								<div class="space-y-1">
-									{#each form.recent.slice(0, 3) as submission}
-										<a
-											href="/admin/form-submissions/{submission.id}"
-											class="flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
-										>
-											{#if submission.read}
-												<MailOpenedIcon class="size-4 text-slate-400" />
-											{:else}
-												<MailIcon class="size-4 text-blue-600 dark:text-blue-400" />
-											{/if}
-											<span
-												class="flex-1 truncate text-sm {submission.read
-													? 'text-slate-600 dark:text-slate-400'
-													: 'font-medium'}"
-											>
+						{#if form.recent.length > 0}
+							<ul class="form-submissions-list" aria-label="{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}">
+								{#each form.recent.slice(0, 3) as submission}
+									<li>
+										<a href="/admin/form-submissions/{submission.id}" class="form-submission-item">
+											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" style="flex-shrink:0; color: {submission.read ? 'var(--text-light)' : 'var(--primary)'}">
+												<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
+												<polyline points="22,6 12,13 2,6"/>
+											</svg>
+											<span style="flex:1; min-width:0; font-size:13px; font-weight:{submission.read ? '500' : '700'}; color:{submission.read ? 'var(--muted-foreground)' : 'var(--foreground)'}; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">
 												{submission.preview || '—'}
 											</span>
-											<span class="text-muted-foreground text-xs">
+											<time style="font-size:11px; color:var(--text-light); white-space:nowrap; flex-shrink:0">
 												{formatRelativeDate(new Date(submission.createdAt))}
-											</span>
+											</time>
 										</a>
-									{/each}
-								</div>
-							{:else}
-								<p class="text-muted-foreground px-2 text-sm">
-									{lang[interfaceLanguage.current].noSubmissions}
-								</p>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			{/if}
-		{/await}
-	</Card.Content>
-</Card.Root>
+									</li>
+								{/each}
+							</ul>
+						{:else}
+							<p style="font-size:13px; color:var(--text-light); padding:4px 10px">
+								{lang[interfaceLanguage.current].noSubmissions}
+							</p>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/await}
+</section>

package/dist/admin/components/dashboard/index.d.ts

@@ -1,4 +1,6 @@
-export { default as AccessibilityHub } from './accessibility-hub.svelte';
+export { default as A11yGauge } from './a11y-gauge.svelte';
 export { default as FormSubmissionsWidget } from './form-submissions-widget.svelte';
 export { default as RecentActivity } from './recent-activity.svelte';
-export { default as StatCard } from './stat-card.svelte';
+export { default as RecentEntries } from './recent-entries.svelte';
+export { default as TipOfTheDay } from './tip-of-the-day.svelte';
+export { default as WelcomeHeader } from './welcome-header.svelte';

package/dist/admin/components/dashboard/index.js

@@ -1,4 +1,6 @@
-export { default as AccessibilityHub } from './accessibility-hub.svelte';
+export { default as A11yGauge } from './a11y-gauge.svelte';
 export { default as FormSubmissionsWidget } from './form-submissions-widget.svelte';
 export { default as RecentActivity } from './recent-activity.svelte';
-export { default as StatCard } from './stat-card.svelte';
+export { default as RecentEntries } from './recent-entries.svelte';
+export { default as TipOfTheDay } from './tip-of-the-day.svelte';
+export { default as WelcomeHeader } from './welcome-header.svelte';

package/dist/admin/components/dashboard/recent-activity.svelte

@@ -1,34 +1,25 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
-	import * as Card from '../../../components/ui/card/index.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import HistoryIcon from '@tabler/icons-svelte/icons/history';
-	import EditIcon from '@tabler/icons-svelte/icons/edit';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
-	const lang: Record<
-		InterfaceLanguage,
-		{
-			title: string;
-			description: string;
-			noActivity: string;
-			edited: string;
-		}
-	> = {
+	const lang: Record<InterfaceLanguage, {
+		title: string;
+		noActivity: string;
+		edited: string;
+	}> = {
 		pl: {
-			title: 'Ostatnia aktywność',
-			description: 'Najnowsze zmiany',
+			title: 'Aktywność',
 			noActivity: 'Brak aktywności',
 			edited: 'Edytowano'
 		},
 		en: {
-			title: 'Recent Activity',
-			description: 'Latest changes',
+			title: 'Activity',
 			noActivity: 'No activity',
 			edited: 'Edited'
 		}
@@ -39,64 +30,51 @@
 	}
 </script>
 
-<Card.Root class="rounded-2xl border-slate-200/50 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
-	<Card.Header class="pb-2">
-		<div class="flex items-center gap-2">
-			<div class="rounded-lg bg-violet-500/10 p-2">
-				<HistoryIcon class="size-5 text-violet-600 dark:text-violet-400" />
-			</div>
-			<div>
-				<Card.Title>{lang[interfaceLanguage.current].title}</Card.Title>
-				<Card.Description>{lang[interfaceLanguage.current].description}</Card.Description>
-			</div>
-		</div>
-	</Card.Header>
-	<Card.Content>
-		{#await remotes.getRecentActivity(10)}
-			<div class="space-y-3">
-				{#each Array(5) as _}
-					<div class="flex items-center gap-3">
-						<Skeleton class="size-8 rounded-full" />
-						<div class="flex-1 space-y-1">
-							<Skeleton class="h-4 w-40" />
-							<Skeleton class="h-3 w-24" />
-						</div>
-					</div>
-				{/each}
-			</div>
-		{:then activity}
-			{#if activity.length === 0}
-				<p class="text-muted-foreground py-4 text-center text-sm">
-					{lang[interfaceLanguage.current].noActivity}
-				</p>
-			{:else}
-				<div class="relative">
-					<div class="absolute bottom-0 left-4 top-0 w-px bg-slate-200 dark:bg-slate-700"></div>
+<section class="dash-card dash-card--activity" aria-labelledby="activity-heading">
+	<div class="dash-card-header">
+		<h2 class="dash-card-title" id="activity-heading">{lang[interfaceLanguage.current].title}</h2>
+	</div>
 
-					<div class="space-y-4">
-						{#each activity as item}
-							<a
-								href="/admin/entries/{item.entryId}"
-								class="group relative flex items-start gap-3 rounded-lg py-1 pl-1 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/50"
-							>
-								<div class="relative z-10 rounded-full border-2 border-white bg-slate-100 p-1.5 dark:border-slate-900 dark:bg-slate-800">
-									<EditIcon class="size-3 text-slate-600 dark:text-slate-400" />
-								</div>
-								<div class="flex-1 min-w-0">
-									<p class="truncate text-sm font-medium group-hover:text-primary">
-										{item.label || item.slug}
-									</p>
-									<p class="text-muted-foreground text-xs">
-										{lang[interfaceLanguage.current].edited} · {formatRelativeDate(
-											new Date(item.updatedAt)
-										)}
-									</p>
-								</div>
-							</a>
-						{/each}
+	{#await remotes.getRecentActivity(10)}
+		<ul class="activity-list">
+			{#each Array(4) as _}
+				<li class="activity-item">
+					<div class="activity-dot-col">
+						<Skeleton class="rounded-full" style="width:10px;height:10px" />
 					</div>
-				</div>
-			{/if}
-		{/await}
-	</Card.Content>
-</Card.Root>
+					<div class="activity-body">
+						<Skeleton class="h-4 w-40" />
+						<Skeleton class="h-3 w-24 mt-1" />
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{:then activity}
+		{#if activity.length === 0}
+			<p class="text-center text-sm py-6" style="color:var(--text-light)">
+				{lang[interfaceLanguage.current].noActivity}
+			</p>
+		{:else}
+			<ul class="activity-list" aria-label={lang[interfaceLanguage.current].title}>
+				{#each activity as item, i}
+					<li class="activity-item">
+						<div class="activity-dot-col">
+							<div class="activity-dot activity-dot--edit" aria-hidden="true"></div>
+							{#if i < activity.length - 1}
+								<div class="activity-line" aria-hidden="true"></div>
+							{/if}
+						</div>
+						<a href="/admin/entries/{item.entryId}" class="activity-body" style="text-decoration:none">
+							<p class="activity-text">
+								{lang[interfaceLanguage.current].edited} „{item.label || item.slug}"
+							</p>
+							<p class="activity-meta">
+								{formatRelativeDate(new Date(item.updatedAt))}
+							</p>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{/await}
+</section>

package/dist/admin/components/dashboard/recent-entries.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import type { InterfaceLanguage, Localized } from '../../../types/languages.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	const lang: Record<InterfaceLanguage, {
+		title: string;
+		viewAll: string;
+		noEntries: string;
+		published: string;
+		draft: string;
+		scheduled: string;
+	}> = {
+		pl: {
+			title: 'Ostatnie wpisy',
+			viewAll: 'Wszystkie →',
+			noEntries: 'Brak wpisów',
+			published: 'Opubl.',
+			draft: 'Szkic',
+			scheduled: 'Zaplan.'
+		},
+		en: {
+			title: 'Recent entries',
+			viewAll: 'View all →',
+			noEntries: 'No entries',
+			published: 'Published',
+			draft: 'Draft',
+			scheduled: 'Scheduled'
+		}
+	};
+
+	function formatRelativeDate(date: Date): string {
+		return formatRelativeDateUtil(date, interfaceLanguage.current);
+	}
+
+	const statusIcon: Record<string, string> = {
+		published: '●',
+		draft: '○',
+		scheduled: '◐'
+	};
+</script>
+
+<section class="dash-card dash-card--entries" aria-labelledby="entries-heading">
+	<div class="dash-card-header">
+		<h2 class="dash-card-title" id="entries-heading">{lang[interfaceLanguage.current].title}</h2>
+		<a href="/admin/entries" class="dash-card-link">{lang[interfaceLanguage.current].viewAll}</a>
+	</div>
+
+	{#await remotes.getRecentEntries(6)}
+		<ul class="entries-list">
+			{#each Array(4) as _}
+				<li class="entry-item">
+					<div class="entry-item-link" style="pointer-events:none">
+						<div class="entry-item-main">
+							<Skeleton class="h-4 w-36" />
+							<Skeleton class="h-3 w-20 mt-1" />
+						</div>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{:then entries}
+		{#if entries.length === 0}
+			<p class="text-center text-sm py-6" style="color:var(--text-light)">
+				{lang[interfaceLanguage.current].noEntries}
+			</p>
+		{:else}
+			<ul class="entries-list" aria-label={lang[interfaceLanguage.current].title}>
+				{#each entries as entry}
+					<li class="entry-item">
+						<a href="/admin/entries/{entry.entryId}" class="entry-item-link">
+							<div class="entry-item-main">
+								<span class="entry-item-title">{entry.label || entry.slug}</span>
+								<span class="entry-item-meta">
+									{getLocalizedLabel(entry.collectionLabel as Localized, interfaceLanguage.current)} · {formatRelativeDate(new Date(entry.updatedAt))}
+								</span>
+							</div>
+							<span class="dash-status-badge dash-status-{entry.status}">
+								<span aria-hidden="true">{statusIcon[entry.status] ?? ''}</span>
+								{lang[interfaceLanguage.current][entry.status as keyof typeof lang['pl']] ?? entry.status}
+							</span>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{/await}
+</section>