includio-cms 0.5.0 → 0.5.2

package/dist/admin/client/entry/entry.svelte

@@ -9,6 +9,10 @@
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import AlertCircle from '@tabler/icons-svelte/icons/alert-circle';
+	import ArchiveIcon from '@tabler/icons-svelte/icons/archive';
+	import XIcon from '@tabler/icons-svelte/icons/x';
+	import Button from '../../../components/ui/button/button.svelte';
 	import { ElementSize, useDebounce } from 'runed';
 	import { defaults, superForm, type SuperForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
@@ -23,6 +27,7 @@
 	import { createHybridContext } from './hybrid/hybrid-context.svelte.js';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
+	import { computeTranslationStatus } from '../../utils/translationStatus.js';
 
 	const contentLanguage = getContentLanguage();
 	const remotes = getRemotes();
@@ -75,12 +80,16 @@
 		InterfaceLanguage,
 		{
 			entryArchived: string;
+			entryRestored: string;
+			archivedBanner: string;
+			restore: string;
 			saveToast: string;
 			publishToast: string;
 			scheduledToast: string;
 			unpublishToast: string;
 			saveFailed: string;
 			cannotPublish: string;
+			validationHint: string;
 			newerDraft: string;
 			switchToDraft: string;
 			editingDraft: string;
@@ -89,12 +98,16 @@
 	> = {
 		en: {
 			entryArchived: 'Entry archived successfully',
+			entryRestored: 'Entry restored successfully',
+			archivedBanner: 'This entry is archived. Restore it to edit.',
+			restore: 'Restore',
 			saveToast: 'Entry saved successfully',
 			publishToast: 'Entry published successfully',
 			scheduledToast: 'Entry scheduled successfully',
 			unpublishToast: 'Publication withdrawn',
 			saveFailed: 'Save failed',
 			cannotPublish: 'Cannot publish',
+			validationHint: 'Fix the highlighted fields below to publish',
 			newerDraft: 'A newer unpublished draft exists',
 			switchToDraft: 'Switch to draft',
 			editingDraft: 'You are editing an unpublished draft',
@@ -102,12 +115,16 @@
 		},
 		pl: {
 			entryArchived: 'Wpis został zarchiwizowany pomyślnie',
+			entryRestored: 'Wpis został przywrócony',
+			archivedBanner: 'Ten wpis jest zarchiwizowany. Przywróć go, żeby edytować.',
+			restore: 'Przywróć',
 			saveToast: 'Wpis został pomyślnie zapisany',
 			publishToast: 'Wpis został pomyślnie opublikowany',
 			scheduledToast: 'Wpis został zaplanowany pomyślnie',
 			unpublishToast: 'Wycofano publikację',
 			saveFailed: 'Błąd zapisu',
 			cannotPublish: 'Nie można opublikować',
+			validationHint: 'Popraw wyróżnione pola, żeby opublikować',
 			newerDraft: 'Istnieje nowszy nieopublikowany szkic',
 			switchToDraft: 'Przejdź do szkicu',
 			editingDraft: 'Edytujesz nieopublikowany szkic',
@@ -122,6 +139,7 @@
 
 	let { entry, editingEntry }: Props = $props();
 	let { collection } = entry;
+	const isArchived = $derived(!!entry.archivedAt);
 
 	// Create form once at component level
 	const collectionSchema = generateZodSchemaFromFields(
@@ -135,17 +153,29 @@
 		resetForm: false
 	});
 
+	let validationErrors = $state<string[]>([]);
+
 	// Autosave state
 	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
 	let saveStatus = $state<SaveStatus>('idle');
-	let lastSavedData = $state<string>(JSON.stringify(editingEntry.data));
+	let lastSavedData = $state<string>(JSON.stringify(get(form.form)));
 	let autosaveTimer: ReturnType<typeof setTimeout> | null = null;
 	// Tracks draft version created via autosave while editing a published version
 	let savedDraftVersionId = $state<string | null>(null);
 
 	const AUTOSAVE_DELAY = 30000; // 30 seconds
 
+	// Reactive translation status — must live here where we can subscribe to form.form store
+	const formStore = form.form;
+	const collectionFields = getFieldsFromConfig(collection);
+	const translationStatus = $derived.by(() => {
+		if (contentLanguage.all.length <= 1) return null;
+		const data = $formStore;
+		return computeTranslationStatus(data, collectionFields, contentLanguage.all);
+	});
+
 	function scheduleAutosave() {
+		if (isArchived) return;
 		if (autosaveTimer) {
 			clearTimeout(autosaveTimer);
 		}
@@ -155,6 +185,7 @@
 	}
 
 	async function performAutosave() {
+		if (isArchived) return;
 		const currentFormData = get(form.form);
 		const currentData = JSON.stringify(currentFormData);
 		if (currentData === lastSavedData) {
@@ -196,6 +227,7 @@
 		function handleKeydown(e: KeyboardEvent) {
 			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
 				e.preventDefault();
+				if (isArchived) return;
 				if (autosaveTimer) {
 					clearTimeout(autosaveTimer);
 					autosaveTimer = null;
@@ -218,6 +250,12 @@
 		goto(`/admin/collections/${collection.slug}`);
 	}
 
+	async function onRestore() {
+		await remotes.unarchiveEntryCommand(entry.id);
+		toast.success(lang[interfaceLanguage.current].entryRestored);
+		goto(window.location.pathname, { invalidateAll: true });
+	}
+
 	async function onSave(type: UpdateEntryVersionCommandType, scheduledAt?: Date) {
 		// Cancel pending autosave
 		if (autosaveTimer) {
@@ -251,9 +289,10 @@
 		}
 
 		// Publish requires validation
-		const validatedForm = await form.validateForm();
+		const validatedForm = await form.validateForm({ update: true });
 
 		if (validatedForm.valid) {
+			validationErrors = [];
 			saveStatus = 'saving';
 			try {
 				await remotes.updateEntryVersionCommand({
@@ -284,10 +323,15 @@
 			}
 		} else {
 			const errors = flattenErrors(validatedForm.errors, getFieldsFromConfig(collection));
-			toast.error(lang[interfaceLanguage.current].cannotPublish, {
-				description: errors.slice(0, 3).join('\n') + (errors.length > 3 ? '\n...' : ''),
-				duration: 5000
-			});
+			validationErrors = errors;
+
+			// Scroll to first errored field
+			const firstErrorKey = Object.keys(validatedForm.errors).find(
+				(k) => k !== '_errors'
+			);
+			if (firstErrorKey) {
+				scrollToIssue(firstErrorKey);
+			}
 		}
 	}
 
@@ -484,6 +528,18 @@
 			}
 		}
 	};
+
+	// Auto-dismiss validation banner when user starts editing
+	onMount(() => {
+		const unsub = form.tainted.subscribe((tainted) => {
+			if (tainted && validationErrors.length > 0) {
+				validationErrors = [];
+			}
+		});
+		return () => unsub();
+	});
+
+	const t = $derived(lang[interfaceLanguage.current]);
 </script>
 
 <EntryHeader
@@ -493,11 +549,53 @@
 	onSaveDraft={performAutosave}
 	{onArchive}
 	{saveStatus}
+	{isArchived}
 	fields={getFieldsFromConfig(collection)}
 	getFormData={() => get(form.form)}
 	onScrollToIssue={scrollToIssue}
+	{translationStatus}
 />
 
+{#if validationErrors.length > 0}
+	<div
+		role="alert"
+		aria-live="assertive"
+		class="flex items-start gap-3 border-b border-[var(--error)]/20 bg-[#FDF0F0] px-6 py-3 text-sm text-[var(--error)]"
+	>
+		<AlertCircle class="mt-0.5 size-4 shrink-0" />
+		<div class="min-w-0 flex-1">
+			<p class="font-semibold">{t.cannotPublish}</p>
+			<p class="text-xs opacity-80">{t.validationHint}</p>
+			<ul class="mt-1 text-xs">
+				{#each validationErrors.slice(0, 5) as error}
+					<li>— {error}</li>
+				{/each}
+			</ul>
+		</div>
+		<button
+			type="button"
+			onclick={() => (validationErrors = [])}
+			class="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100"
+			aria-label="Zamknij"
+		>
+			<XIcon class="size-4" />
+		</button>
+	</div>
+{/if}
+
+{#if isArchived}
+	<div
+		role="alert"
+		class="flex items-center justify-between gap-3 border-b border-[var(--warning)]/20 bg-[#FDF6EC] px-6 py-3 text-sm"
+	>
+		<div class="flex items-center gap-2 text-[var(--warning)]">
+			<ArchiveIcon class="size-4 shrink-0" />
+			<span>{t.archivedBanner}</span>
+		</div>
+		<Button size="sm" onclick={onRestore}>{t.restore}</Button>
+	</div>
+{/if}
+
 {#if showDraftBanner}
 	<div
 		class="flex items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
@@ -526,6 +624,7 @@
 	</div>
 {/if}
 
+<div class={isArchived ? 'pointer-events-none opacity-60' : ''}>
 {#if hybridContext.mode === 'hybrid' && collection.previewUrl}
 	<div class="flex min-h-0 flex-1 overflow-hidden">
 		{#await import('./hybrid/hybrid-layout.svelte')}
@@ -574,3 +673,4 @@
 		</div>
 	</div>
 {/if}
+</div>

package/dist/admin/client/entry/header/a11y-validator.d.ts

@@ -42,5 +42,6 @@ export interface A11yLang {
 }
 export declare const a11yLangPl: A11yLang;
 export declare const a11yLangEn: A11yLang;
-/** Run a11y validation on entry data and return issues list. */
-export declare function validateA11y(data: Record<string, unknown>, fields: Field[], lang?: A11yLang): A11yIssue[];
+/** Run a11y validation on entry data and return issues list.
+ *  When `languages` is provided, validates each language separately with prefix tags. */
+export declare function validateA11y(data: Record<string, unknown>, fields: Field[], lang?: A11yLang, languages?: string[]): A11yIssue[];

package/dist/admin/client/entry/header/a11y-validator.js

@@ -208,6 +208,32 @@ function extractDocs(data, fields) {
     }
     return result;
 }
+/** Extract docs for a specific language from localized fields. */
+function extractDocsForLang(data, fields, language) {
+    const result = [];
+    for (const field of fields) {
+        if (field.type !== 'content' && field.type !== 'richtext')
+            continue;
+        const val = data[field.slug];
+        if (!val || typeof val !== 'object')
+            continue;
+        const obj = val;
+        // Direct doc (non-localized)
+        if (obj.type === 'doc' && Array.isArray(obj.content)) {
+            result.push({ doc: obj, fieldSlug: field.slug });
+            continue;
+        }
+        // Language-keyed
+        const langVal = obj[language];
+        if (langVal && typeof langVal === 'object') {
+            const langObj = langVal;
+            if (langObj.type === 'doc' && Array.isArray(langObj.content)) {
+                result.push({ doc: langObj, fieldSlug: field.slug });
+            }
+        }
+    }
+    return result;
+}
 export const a11yLangPl = {
     imagesWithoutAlt: (n) => `${n} ${n === 1 ? 'obraz' : n < 5 ? 'obrazy' : 'obrazów'} bez opisu alternatywnego`,
     headingsOk: 'Hierarchia nagłówków poprawna',
@@ -224,10 +250,10 @@ export const a11yLangEn = {
     allImagesHaveAlt: 'All images have alt text',
     noGenericLinks: 'Links have descriptive text'
 };
-/** Run a11y validation on entry data and return issues list. */
-export function validateA11y(data, fields, lang = a11yLangPl) {
-    const entries = extractDocs(data, fields);
+/** Validate a11y for a single set of docs and return issues. */
+function validateDocsA11y(entries, lang, langPrefix) {
     const issues = [];
+    const prefix = langPrefix ? `[${langPrefix.toUpperCase()}] ` : '';
     // Images without alt
     let totalMissingAlt = 0;
     let firstMissingAltPos = null;
@@ -245,13 +271,13 @@ export function validateA11y(data, fields, lang = a11yLangPl) {
     if (totalMissingAlt > 0) {
         issues.push({
             type: 'warning',
-            message: lang.imagesWithoutAlt(totalMissingAlt),
+            message: prefix + lang.imagesWithoutAlt(totalMissingAlt),
             fieldSlug: firstMissingAltField,
             firstNodePos: firstMissingAltPos ?? undefined
         });
     }
     else if (entries.length > 0) {
-        issues.push({ type: 'success', message: lang.allImagesHaveAlt });
+        issues.push({ type: 'success', message: prefix + lang.allImagesHaveAlt });
     }
     // Heading hierarchy
     if (entries.length > 0) {
@@ -271,12 +297,12 @@ export function validateA11y(data, fields, lang = a11yLangPl) {
             }
         }
         if (allHeadingsOk) {
-            issues.push({ type: 'success', message: lang.headingsOk });
+            issues.push({ type: 'success', message: prefix + lang.headingsOk });
         }
         else {
             issues.push({
                 type: 'warning',
-                message: lang.headingsSkipped,
+                message: prefix + lang.headingsSkipped,
                 fieldSlug: firstHeadingIssueField,
                 firstNodePos: firstHeadingIssuePos ?? undefined
             });
@@ -299,13 +325,28 @@ export function validateA11y(data, fields, lang = a11yLangPl) {
     if (totalGenericLinks > 0) {
         issues.push({
             type: 'warning',
-            message: lang.genericLinks(totalGenericLinks),
+            message: prefix + lang.genericLinks(totalGenericLinks),
             fieldSlug: firstGenericLinkField,
             firstNodePos: firstGenericLinkPos ?? undefined
         });
     }
     else if (entries.length > 0) {
-        issues.push({ type: 'success', message: lang.noGenericLinks });
+        issues.push({ type: 'success', message: prefix + lang.noGenericLinks });
     }
     return issues;
 }
+/** Run a11y validation on entry data and return issues list.
+ *  When `languages` is provided, validates each language separately with prefix tags. */
+export function validateA11y(data, fields, lang = a11yLangPl, languages) {
+    if (languages && languages.length > 1) {
+        const issues = [];
+        for (const language of languages) {
+            const entries = extractDocsForLang(data, fields, language);
+            issues.push(...validateDocsA11y(entries, lang, language));
+        }
+        return issues;
+    }
+    // Single-language fallback (backward compatible)
+    const entries = extractDocs(data, fields);
+    return validateDocsA11y(entries, lang);
+}

package/dist/admin/client/entry/header/publish-panel.svelte

@@ -18,6 +18,9 @@
 	import CircleCheck from '@tabler/icons-svelte/icons/circle-check';
 	import { getEntryStatus } from '../utils.js';
 	import { validateA11y, a11yLangPl, a11yLangEn, type A11yIssue } from './a11y-validator.js';
+	import { getContentLanguage } from '../../../state/content-language.svelte.js';
+	import { computeTranslationStatus, type LangStatus } from '../../../utils/translationStatus.js';
+	import LanguageIcon from '@tabler/icons-svelte/icons/language';
 
 	const lang: Record<
 		InterfaceLanguage,
@@ -42,6 +45,9 @@
 			publishedVersion: string;
 			accessibility: string;
 			a11yHint: string;
+			translations: string;
+			translationsHint: string;
+			missingFieldsLabel: (lang: string) => string;
 		}
 	> = {
 		en: {
@@ -69,7 +75,10 @@
 			time: 'Time',
 			publishedVersion: 'Published version',
 			accessibility: 'Accessibility',
-			a11yHint: 'Resolve issues before publishing'
+			a11yHint: 'Resolve issues before publishing',
+			translations: 'Translations',
+			translationsHint: 'Fill in missing fields to publish',
+			missingFieldsLabel: (lang: string) => `Missing fields (${lang.toUpperCase()})`
 		},
 		pl: {
 			title: 'Publikacja',
@@ -96,11 +105,15 @@
 			time: 'Czas',
 			publishedVersion: 'Opublikowana wersja',
 			accessibility: 'Dostępność',
-			a11yHint: 'Rozwiąż problemy przed publikacją'
+			a11yHint: 'Rozwiąż problemy przed publikacją',
+			translations: 'Tłumaczenia',
+			translationsHint: 'Uzupełnij brakujące pola, żeby opublikować',
+			missingFieldsLabel: (lang: string) => `Brakujące pola (${lang.toUpperCase()})`
 		}
 	};
 
 	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
 
 	type Props = {
 		entry: RawEntry;
@@ -118,11 +131,19 @@
 	let dateValue = $state('');
 	let timeValue = $state('');
 	let a11yIssues = $state<A11yIssue[]>([]);
+	let translationStatus = $state<Record<string, LangStatus> | null>(null);
 
 	const entryStatus = $derived(getEntryStatus(entry));
 	const t = $derived(lang[interfaceLanguage.current]);
 
 	const hasA11yWarnings = $derived(a11yIssues.some((i) => i.type === 'warning'));
+	const hasIncompleteTranslations = $derived(
+		translationStatus != null &&
+			Object.values(translationStatus).some((s) => s.status !== 'complete')
+	);
+	const showTranslationSection = $derived(
+		contentLanguage.all.length > 1 && translationStatus != null
+	);
 
 	const scheduleLabel = $derived.by(() => {
 		switch (entryStatus) {
@@ -205,13 +226,23 @@
 		}
 		const data = getFormData ? getFormData() : version.data;
 		const a11yLang = interfaceLanguage.current === 'pl' ? a11yLangPl : a11yLangEn;
-		a11yIssues = validateA11y(data, fields, a11yLang);
+		a11yIssues = validateA11y(data, fields, a11yLang, contentLanguage.all);
+	}
+
+	function runTranslationCheck() {
+		if (contentLanguage.all.length <= 1 || !fields.length) {
+			translationStatus = null;
+			return;
+		}
+		const data = getFormData ? getFormData() : version.data;
+		translationStatus = computeTranslationStatus(data, fields, contentLanguage.all);
 	}
 
 	$effect(() => {
 		if (open) {
 			setDefaultValues();
 			runA11yValidation();
+			runTranslationCheck();
 		}
 	});
 </script>
@@ -275,7 +306,74 @@
 				{/if}
 			</div>
 
-			<!-- Schedule section -->
+			<!-- Translation section -->
+		{#if showTranslationSection && translationStatus}
+			<div class="sheet-section">
+				<div class="sheet-section-title">
+					<LanguageIcon class="size-3.5" />
+					{t.translations}
+				</div>
+
+				{#each contentLanguage.all as lang}
+					{@const status = translationStatus[lang]}
+					{#if status}
+						<div class="translation-lang-row">
+							<div class="translation-lang-header">
+								<span class="translation-lang-label">{lang.toUpperCase()}</span>
+								<span class="translation-lang-pct {status.status === 'complete' ? 'complete' : status.status === 'partial' ? 'partial' : 'empty'}">
+									{#if status.status === 'complete'}&#10003;{:else}{status.percentage}%{/if}
+								</span>
+							</div>
+							<div class="translation-progress-track">
+								<div
+									class="translation-progress-fill {status.status === 'complete' ? 'complete' : status.status === 'partial' ? 'partial' : ''}"
+									style="width: {status.percentage}%"
+								></div>
+							</div>
+						</div>
+					{/if}
+				{/each}
+
+				{#if hasIncompleteTranslations}
+					{#each contentLanguage.all as lang}
+						{@const status = translationStatus[lang]}
+						{#if status && status.missingFields.length > 0}
+							<div class="translation-missing">
+								<div class="translation-missing-title">{t.missingFieldsLabel(lang)}</div>
+								{#each status.missingFields as field}
+									{#if onScrollToIssue}
+										<button
+											type="button"
+											class="a11y-item warning a11y-item-clickable"
+											onclick={() => {
+												contentLanguage.current = lang;
+												open = false;
+												setTimeout(() => onScrollToIssue!(field.slug, 0), 200);
+											}}
+										>
+											<div class="a11y-item-icon">
+												<AlertTriangle class="size-4" />
+											</div>
+											<span class="a11y-item-text">{field.label}</span>
+										</button>
+									{:else}
+										<div class="a11y-item warning">
+											<div class="a11y-item-icon">
+												<AlertTriangle class="size-4" />
+											</div>
+											<span class="a11y-item-text">{field.label}</span>
+										</div>
+									{/if}
+								{/each}
+							</div>
+						{/if}
+					{/each}
+					<p class="a11y-hint">{t.translationsHint}</p>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Schedule section -->
 			<div class="sheet-section">
 				<div class="sheet-section-title">
 					<CalendarClock class="size-3.5" />
@@ -386,6 +484,9 @@
 <style>
 	.sheet-body {
 		padding: 18px 20px;
+		overflow-y: auto;
+		flex: 1;
+		min-height: 0;
 	}
 
 	.sheet-section {
@@ -592,4 +693,63 @@
 		color: var(--foreground);
 		background: var(--muted);
 	}
+
+	/* Translation section */
+	.translation-lang-row {
+		margin-bottom: 8px;
+	}
+	.translation-lang-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 4px;
+	}
+	.translation-lang-label {
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--foreground);
+	}
+	.translation-lang-pct {
+		font-size: 12px;
+		font-weight: 600;
+	}
+	.translation-lang-pct.complete {
+		color: var(--success);
+	}
+	.translation-lang-pct.partial {
+		color: var(--warning);
+	}
+	.translation-lang-pct.empty {
+		color: var(--text-light);
+	}
+	.translation-progress-track {
+		height: 6px;
+		border-radius: 3px;
+		background: var(--muted);
+		overflow: hidden;
+	}
+	.translation-progress-fill {
+		height: 100%;
+		border-radius: 3px;
+		background: var(--text-light);
+		transition: width 0.3s ease;
+	}
+	.translation-progress-fill.complete {
+		background: var(--success);
+	}
+	.translation-progress-fill.partial {
+		background: var(--warning);
+	}
+	.translation-missing {
+		margin-top: 10px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+	.translation-missing-title {
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--muted-foreground);
+		margin-bottom: 2px;
+	}
 </style>

package/dist/admin/client/entry/header/version-history-sheet.svelte

@@ -9,6 +9,8 @@
 	import HistoryIcon from '@tabler/icons-svelte/icons/history';
 	import SquareCheckFilled from '@tabler/icons-svelte/icons/square-check-filled';
 	import ClockFilled from '@tabler/icons-svelte/icons/clock-filled';
+	import { getLocalizedLabel } from '../../../utils/collectionLabel.js';
+	import { getFieldsFromConfig } from '../../../../core/fields/layoutUtils.js';
 	import { getEntryStatus } from '../utils.js';
 
 	const lang: Record<
@@ -157,6 +159,12 @@
 	}
 
 	const t = $derived(lang[interfaceLanguage.current]);
+
+	function getFieldLabel(slug: string): string {
+		const field = getFieldsFromConfig(entry.collection).find((f) => f.slug === slug);
+		if (!field) return slug.charAt(0).toUpperCase() + slug.slice(1).replace(/[-_]/g, ' ');
+		return getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug;
+	}
 </script>
 
 <Sheet.Root bind:open>
@@ -264,7 +272,7 @@
 								{#if changedFields.length > 0}
 									<div class="vh-changed-fields">
 										{#each changedFields.slice(0, 4) as field}
-											<span class="vh-field-badge">{field}</span>
+											<span class="vh-field-badge">{getFieldLabel(field)}</span>
 										{/each}
 										{#if changedFields.length > 4}
 											<span class="vh-field-badge">+{changedFields.length - 4}</span>