includio-cms 0.1.4 → 0.5.0

package/dist/admin/client/entry/header/save-indicator.svelte

@@ -15,16 +15,16 @@
 		}
 	> = {
 		en: {
-			saving: 'Saving...',
-			saved: 'Saved',
+			saving: 'Saving draft...',
+			saved: 'Draft saved',
 			unsaved: 'Unsaved changes',
-			error: 'Save failed'
+			error: 'Could not save — try again'
 		},
 		pl: {
-			saving: 'Zapisywanie...',
-			saved: 'Zapisano',
+			saving: 'Zapisywanie szkicu...',
+			saved: 'Szkic zapisany',
 			unsaved: 'Niezapisane zmiany',
-			error: 'Błąd zapisu'
+			error: 'Nie udało się zapisać — spróbuj ponownie'
 		}
 	};
 
@@ -37,22 +37,32 @@
 	};
 
 	let { status }: Props = $props();
+
+	const isError = $derived(status === 'error');
 </script>
 
-{#if status !== 'idle'}
-	<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-		{#if status === 'saving'}
-			<Loader2 class="size-3.5 animate-spin" />
-			<span>{lang[interfaceLanguage.current].saving}</span>
-		{:else if status === 'saved'}
-			<Check class="size-3.5 text-emerald-500" />
-			<span>{lang[interfaceLanguage.current].saved}</span>
-		{:else if status === 'unsaved'}
-			<span class="size-1.5 rounded-full bg-amber-500"></span>
-			<span>{lang[interfaceLanguage.current].unsaved}</span>
-		{:else if status === 'error'}
-			<AlertCircle class="size-3.5 text-red-500" />
-			<span class="text-red-500">{lang[interfaceLanguage.current].error}</span>
-		{/if}
-	</div>
-{/if}
+<div
+	role={isError ? 'alert' : 'status'}
+	aria-live={isError ? 'assertive' : 'polite'}
+	aria-atomic="true"
+	class="flex items-center gap-1.5 text-xs font-medium transition-all duration-200 {status === 'idle' ? 'invisible' : ''}"
+>
+	{#if status === 'saving'}
+		<Loader2 class="size-3.5 animate-spin text-muted-foreground" />
+		<span class="text-muted-foreground">{lang[interfaceLanguage.current].saving}</span>
+	{:else if status === 'saved'}
+		<Check class="size-3.5 text-emerald-600 dark:text-emerald-400" />
+		<span class="text-emerald-600 dark:text-emerald-400">{lang[interfaceLanguage.current].saved}</span>
+	{:else if status === 'unsaved'}
+		<span class="size-1.5 rounded-full bg-amber-500 animate-pulse"></span>
+		<span class="text-amber-600 dark:text-amber-400">{lang[interfaceLanguage.current].unsaved}</span>
+	{:else if status === 'error'}
+		<span class="flex items-center gap-1.5 rounded-md bg-red-500/10 px-2 py-0.5">
+			<AlertCircle class="size-3.5 text-red-600 dark:text-red-400" />
+			<span class="text-red-600 dark:text-red-400">{lang[interfaceLanguage.current].error}</span>
+		</span>
+	{:else}
+		<!-- idle: invisible but in DOM so live region is registered -->
+		<span class="sr-only">&nbsp;</span>
+	{/if}
+</div>

package/dist/admin/client/entry/header/schedule-popover.svelte

@@ -118,7 +118,7 @@
 					size="sm"
 					onclick={handleConfirm}
 					disabled={!dateValue || !timeValue}
-					variant="gradient"
+					variant="default"
 				>
 					{lang[interfaceLanguage.current].confirm}
 				</Button>

package/dist/admin/client/entry/header/status-badge.svelte

@@ -2,22 +2,12 @@
 	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import type { DbEntryVersion, EntryVersionStatus, RawEntry } from '../../../../types/entries.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
-	import Badge from '../../../../components/ui/badge/badge.svelte';
-	import * as Popover from '../../../../components/ui/popover/index.js';
-	import ClockFilled from '@tabler/icons-svelte/icons/clock-filled';
-	import FileFilled from '@tabler/icons-svelte/icons/file-filled';
-	import SquareCheckFilled from '@tabler/icons-svelte/icons/square-check-filled';
 
 	const lang: Record<
 		InterfaceLanguage,
 		{
 			status: Record<EntryVersionStatus, string>;
-			version: string;
-			publishedAt: string;
-			publishedBy: string;
-			createdAt: string;
-			scheduledFor: string;
-			publishedVersion: string;
+			ariaLabel: Record<EntryVersionStatus, string>;
 		}
 	> = {
 		en: {
@@ -26,25 +16,23 @@
 				scheduled: 'Scheduled',
 				published: 'Published'
 			},
-			version: 'Version',
-			publishedAt: 'Published at',
-			publishedBy: 'Published by',
-			createdAt: 'Created at',
-			scheduledFor: 'Scheduled for',
-			publishedVersion: 'Published version'
+			ariaLabel: {
+				draft: 'You are editing a draft — it is not yet visible to readers',
+				scheduled: 'This entry is scheduled for publication',
+				published: 'This entry is published and visible to readers'
+			}
 		},
 		pl: {
 			status: {
-				draft: 'Szkic',
+				draft: 'Wersja robocza',
 				scheduled: 'Zaplanowane',
-				published: 'Opublikowane'
+				published: 'Opublikowany'
 			},
-			version: 'Wersja',
-			publishedAt: 'Opublikowano',
-			publishedBy: 'Opublikował',
-			createdAt: 'Utworzono',
-			scheduledFor: 'Zaplanowano na',
-			publishedVersion: 'Opublikowana wersja'
+			ariaLabel: {
+				draft: 'Edytujesz szkic — nie jest jeszcze widoczny dla czytelników',
+				scheduled: 'Ten wpis jest zaplanowany do publikacji',
+				published: 'Ten wpis jest opublikowany i widoczny dla czytelników'
+			}
 		}
 	};
 
@@ -59,9 +47,6 @@
 
 	const isPublishedVersion = $derived(entry.publishedVersion?.id === version.id);
 	const isScheduledVersion = $derived(entry.scheduledVersion?.id === version.id);
-	const hasLiveVersion = $derived(
-		entry.publishedVersion != null && entry.publishedVersion.id !== version.id
-	);
 
 	const currentStatus = $derived.by((): EntryVersionStatus => {
 		if (isPublishedVersion) return 'published';
@@ -69,96 +54,18 @@
 		return 'draft';
 	});
 
-	const badgeVariant = $derived.by(() => {
-		if (currentStatus === 'published') return 'default';
-		if (currentStatus === 'scheduled') return 'secondary';
-		return 'outline';
+	const dotColor = $derived.by(() => {
+		if (currentStatus === 'published') return 'var(--success)';
+		if (currentStatus === 'scheduled') return 'var(--warning)';
+		return 'var(--text-light)';
 	});
-
-	const badgeClass = $derived.by(() => {
-		if (currentStatus === 'published') {
-			return 'bg-emerald-500/90 hover:bg-emerald-500 text-white border-emerald-600/20';
-		}
-		if (currentStatus === 'scheduled') {
-			return 'bg-amber-500/90 hover:bg-amber-500 text-white border-amber-600/20';
-		}
-		return 'bg-slate-200/80 dark:bg-slate-700/80 text-slate-600 dark:text-slate-300';
-	});
-
-	function formatRelativeTime(date: Date): string {
-		const now = new Date();
-		const diff = now.getTime() - date.getTime();
-		const seconds = Math.floor(diff / 1000);
-		const minutes = Math.floor(seconds / 60);
-		const hours = Math.floor(minutes / 60);
-		const days = Math.floor(hours / 24);
-
-		if (interfaceLanguage.current === 'pl') {
-			if (days > 0) return `${days} dn. temu`;
-			if (hours > 0) return `${hours} godz. temu`;
-			if (minutes > 0) return `${minutes} min temu`;
-			return 'przed chwilą';
-		}
-
-		if (days > 0) return `${days}d ago`;
-		if (hours > 0) return `${hours}h ago`;
-		if (minutes > 0) return `${minutes}m ago`;
-		return 'just now';
-	}
 </script>
 
-<Popover.Root>
-	<Popover.Trigger>
-		<Badge class="cursor-pointer gap-1.5 {badgeClass}">
-			{#if currentStatus === 'published'}
-				<SquareCheckFilled class="size-3.5" />
-			{:else if currentStatus === 'scheduled'}
-				<ClockFilled class="size-3.5" />
-			{:else}
-				<FileFilled class="size-3.5" />
-			{/if}
-			{lang[interfaceLanguage.current].status[currentStatus]}
-			{#if hasLiveVersion}
-				<span class="text-[10px] opacity-70">• live: v{entry.publishedVersion?.versionNumber}</span>
-			{/if}
-		</Badge>
-	</Popover.Trigger>
-	<Popover.Content class="w-64 p-3" align="start">
-		<div class="space-y-2 text-sm">
-			<div class="flex justify-between">
-				<span class="text-muted-foreground">{lang[interfaceLanguage.current].version}</span>
-				<span class="font-medium">v{version.versionNumber}</span>
-			</div>
-
-			<div class="flex justify-between">
-				<span class="text-muted-foreground">{lang[interfaceLanguage.current].createdAt}</span>
-				<span class="font-medium" title={version.createdAt.toLocaleString(interfaceLanguage.current)}>
-					{formatRelativeTime(version.createdAt)}
-				</span>
-			</div>
-
-			{#if entry.publishedAt && (isPublishedVersion || isScheduledVersion)}
-				<div class="flex justify-between">
-					<span class="text-muted-foreground">
-						{isScheduledVersion
-							? lang[interfaceLanguage.current].scheduledFor
-							: lang[interfaceLanguage.current].publishedAt}
-					</span>
-					<span class="font-medium" title={entry.publishedAt.toLocaleString(interfaceLanguage.current)}>
-						{isScheduledVersion
-							? entry.publishedAt.toLocaleString(interfaceLanguage.current)
-							: formatRelativeTime(entry.publishedAt)}
-					</span>
-				</div>
-			{/if}
-
-			{#if entry.publishedVersion && entry.publishedVersion.id !== version.id}
-				<div class="border-t pt-2 mt-2">
-					<div class="text-muted-foreground text-xs">
-						{lang[interfaceLanguage.current].publishedVersion}: v{entry.publishedVersion.versionNumber}
-					</div>
-				</div>
-			{/if}
-		</div>
-	</Popover.Content>
-</Popover.Root>
+<span
+	role="status"
+	aria-label={lang[interfaceLanguage.current].ariaLabel[currentStatus]}
+	class="inline-flex items-center gap-1.5 rounded-full bg-muted px-2.5 py-1 text-xs font-semibold text-muted-foreground"
+>
+	<span class="size-[7px] rounded-full shrink-0" style="background:{dotColor}" aria-hidden="true"></span>
+	{lang[interfaceLanguage.current].status[currentStatus]}
+</span>