includio-cms 0.7.2 → 0.13.1

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

@@ -16,10 +16,9 @@
 	import InfoCircle from '@tabler/icons-svelte/icons/info-circle';
 	import Shield from '@tabler/icons-svelte/icons/shield';
 	import CircleCheck from '@tabler/icons-svelte/icons/circle-check';
-	import { getEntryStatus } from '../utils.js';
+	import { getEntryStatusForLang } 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<
@@ -131,19 +130,13 @@
 	let dateValue = $state('');
 	let timeValue = $state('');
 	let a11yIssues = $state<A11yIssue[]>([]);
-	let translationStatus = $state<Record<string, LangStatus> | null>(null);
 
-	const entryStatus = $derived(getEntryStatus(entry));
+	// Status is per current language
+	const entryStatus = $derived(getEntryStatusForLang(entry, contentLanguage.current));
 	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 showLangStatusSection = $derived(contentLanguage.all.length > 1);
 
 	const scheduleLabel = $derived.by(() => {
 		switch (entryStatus) {
@@ -173,8 +166,9 @@
 	}
 
 	function setDefaultValues() {
-		if (entryStatus === 'scheduled' && entry.publishedAt) {
-			const scheduled = new Date(entry.publishedAt);
+		const scheduledVersion = entry.scheduledVersions[contentLanguage.current];
+		if (entryStatus === 'scheduled' && scheduledVersion?.publishedAt) {
+			const scheduled = new Date(scheduledVersion.publishedAt);
 			dateValue = scheduled.toISOString().slice(0, 10);
 			timeValue = `${String(scheduled.getHours()).padStart(2, '0')}:${String(scheduled.getMinutes()).padStart(2, '0')}`;
 		} else {
@@ -229,20 +223,10 @@
 		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>
@@ -284,92 +268,56 @@
 					</div>
 				</div>
 
-				{#if entryStatus === 'published' && entry.publishedAt}
+				{#if entryStatus === 'published' && entry.publishedVersions[contentLanguage.current]?.publishedAt}
 					<div class="publish-detail-row">
 						<span>{t.publishedAt}</span>
-						<span class="tabular-nums">{formatDateTime(entry.publishedAt)}</span>
+						<span class="tabular-nums">{formatDateTime(entry.publishedVersions[contentLanguage.current]?.publishedAt)}</span>
 					</div>
 				{/if}
 
-				{#if entryStatus === 'scheduled' && entry.publishedAt}
+				{#if entryStatus === 'scheduled' && entry.publishedVersions[contentLanguage.current]?.publishedAt}
 					<div class="publish-detail-row">
 						<span>{t.scheduledFor}</span>
-						<span class="tabular-nums">{formatDateTime(entry.publishedAt)}</span>
+						<span class="tabular-nums">{formatDateTime(entry.publishedVersions[contentLanguage.current]?.publishedAt)}</span>
 					</div>
 				{/if}
 
-				{#if entry.publishedVersion && entry.publishedVersion.id !== version.id}
+				{#if entry.publishedVersions[contentLanguage.current] && entry.publishedVersions[contentLanguage.current].id !== version.id}
 					<div class="publish-detail-row">
 						<span>{t.publishedVersion}</span>
-						<span class="tabular-nums">{formatDateTime(entry.publishedVersion.createdAt)}</span>
+						<span class="tabular-nums">{formatDateTime(entry.publishedVersions[contentLanguage.current].createdAt)}</span>
 					</div>
 				{/if}
 			</div>
 
-			<!-- Translation section -->
-		{#if showTranslationSection && translationStatus}
+			<!-- Per-language status section -->
+		{#if showLangStatusSection}
 			<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>
+				{#each contentLanguage.all as langCode}
+					{@const langPub = entry.publishedVersions[langCode]}
+					{@const langSch = entry.scheduledVersions[langCode]}
+					{@const langDraft = entry.draftVersions[langCode]}
+					{@const langStatus = langPub ? 'published' : langSch ? 'scheduled' : 'draft'}
+					<div class="translation-lang-row">
+						<div class="translation-lang-header">
+							<span class="translation-lang-label">{langCode.toUpperCase()}</span>
+							<span class="translation-lang-pct {langStatus === 'published' ? 'complete' : langStatus === 'scheduled' ? 'partial' : 'empty'}">
+								{t.statusLabels[langStatus]}
+							</span>
 						</div>
-					{/if}
+						<div class="translation-progress-track">
+							<div
+								class="translation-progress-fill {langStatus === 'published' ? 'complete' : langStatus === 'scheduled' ? 'partial' : ''}"
+								style="width: {langStatus === 'published' ? 100 : langStatus === 'scheduled' ? 66 : langDraft ? 33 : 0}%"
+							></div>
+						</div>
+					</div>
 				{/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}
 

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

@@ -45,8 +45,8 @@
 
 	let { entry, version }: Props = $props();
 
-	const isPublishedVersion = $derived(entry.publishedVersion?.id === version.id);
-	const isScheduledVersion = $derived(entry.scheduledVersion?.id === version.id);
+	const isPublishedVersion = $derived(entry.publishedVersions[version.lang]?.id === version.id);
+	const isScheduledVersion = $derived(entry.scheduledVersions[version.lang]?.id === version.id);
 
 	const currentStatus = $derived.by((): EntryVersionStatus => {
 		if (isPublishedVersion) return 'published';

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

@@ -89,8 +89,8 @@
 	}
 
 	function getDotClass(version: DbEntryVersion): string {
-		const isPublished = entry.publishedVersionId === version.id && entryStatus === 'published';
-		const isScheduled = entry.publishedVersionId === version.id && entryStatus === 'scheduled';
+		const isPublished = entry.publishedVersions[version.lang]?.id === version.id && entryStatus === 'published';
+		const isScheduled = entry.publishedVersions[version.lang]?.id === version.id && entryStatus === 'scheduled';
 		const isCurrent = version.id === currentVersionId;
 
 		if (isPublished) return 'dot-published';
@@ -109,7 +109,7 @@
 			// Always keep current version
 			if (version.id === currentVersionId) return true;
 			// Always keep published/scheduled
-			if (entry.publishedVersionId === version.id) return true;
+			if (entry.publishedVersions[version.lang]?.id === version.id) return true;
 			// Keep versions with actual data changes vs previous
 			const prevVersion = sortedVersions[idx + 1];
 			if (!prevVersion) return true; // first version
@@ -132,8 +132,8 @@
 		const groups: Map<string, DbEntryVersion[]> = new Map();
 
 		for (const version of timelineVersions) {
-			const isPublished = entry.publishedVersionId === version.id && entryStatus === 'published';
-			const isScheduled = entry.publishedVersionId === version.id && entryStatus === 'scheduled';
+			const isPublished = entry.publishedVersions[version.lang]?.id === version.id && entryStatus === 'published';
+			const isScheduled = entry.publishedVersions[version.lang]?.id === version.id && entryStatus === 'scheduled';
 
 			let key: string;
 			if (isPublished) {
@@ -193,12 +193,12 @@
 							<div class="vh-item-left">
 								<span class="vh-time">{formatTime(currentVersion.createdAt)}</span>
 								<Badge class="vh-badge-editing">{t.editing}</Badge>
-								{#if entry.publishedVersionId === currentVersion.id && entryStatus === 'published'}
+								{#if entry.publishedVersions[currentVersion.lang]?.id === currentVersion.id && entryStatus === 'published'}
 									<Badge class="vh-badge-published">
 										<SquareCheckFilled class="size-2.5 mr-0.5" />
 										{t.published}
 									</Badge>
-								{:else if entry.publishedVersionId === currentVersion.id && entryStatus === 'scheduled'}
+								{:else if entry.publishedVersions[currentVersion.lang]?.id === currentVersion.id && entryStatus === 'scheduled'}
 									<Badge class="vh-badge-scheduled">
 										{t.scheduled}
 									</Badge>
@@ -233,8 +233,8 @@
 						<div class="vh-timeline-line"></div>
 
 						{#each versions as version}
-							{@const isPublished = entry.publishedVersionId === version.id && entryStatus === 'published'}
-							{@const isScheduled = entry.publishedVersionId === version.id && entryStatus === 'scheduled'}
+							{@const isPublished = entry.publishedVersions[version.lang]?.id === version.id && entryStatus === 'published'}
+							{@const isScheduled = entry.publishedVersions[version.lang]?.id === version.id && entryStatus === 'scheduled'}
 							{@const prevVersion = sortedVersions.find(
 								(v) => v.versionNumber === version.versionNumber - 1
 							)}

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

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import { getContentLanguage } from '../../../state/content-language.svelte.js';
 	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import type { RawEntry } from '../../../../types/entries.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.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';
-	import { getEntryStatus } from '../utils.js';
+	import { getEntryStatusForLang } from '../utils.js';
 
 	const lang: Record<
 		InterfaceLanguage,
@@ -34,6 +35,7 @@
 	};
 
 	const interfaceLanguage = useInterfaceLanguage();
+	const contentLanguage = getContentLanguage();
 
 	type Props = {
 		entry: RawEntry;
@@ -41,34 +43,38 @@
 
 	let { entry }: Props = $props();
 
-	const entryStatus = $derived(getEntryStatus(entry));
+	const currentLang = $derived(contentLanguage.current);
+	const entryStatus = $derived(getEntryStatusForLang(entry, currentLang));
+	const publishedVersion = $derived(entry.publishedVersions[currentLang]);
+	const scheduledVersion = $derived(entry.scheduledVersions[currentLang]);
+	const draftVersion = $derived(entry.draftVersions[currentLang]);
 </script>
 
 <div class="flex items-center gap-1 text-sm">
 	<span class="text-muted-foreground"> {lang[interfaceLanguage.current].status}:</span>
 
-	{#if entryStatus === 'published' && entry.publishedVersion}
+	{#if entryStatus === 'published' && publishedVersion}
 		<span class="flex items-center gap-1">
 			<SquareCheckFilled />
-			{lang[interfaceLanguage.current].published} (v{entry.publishedVersion.versionNumber}, {entry.publishedAt?.toLocaleString(
+			{lang[interfaceLanguage.current].published} (v{publishedVersion.versionNumber}, {publishedVersion.publishedAt ? new Date(publishedVersion.publishedAt).toLocaleString(
 				interfaceLanguage.current
-			)})</span
+			) : ''})</span
 		>
 	{/if}
 
-	{#if entryStatus === 'scheduled' && entry.scheduledVersion}
+	{#if entryStatus === 'scheduled' && scheduledVersion}
 		<span class="flex items-center gap-1">
 			<ClockFilled />
-			{lang[interfaceLanguage.current].scheduled} v{entry.scheduledVersion.versionNumber}
+			{lang[interfaceLanguage.current].scheduled} v{scheduledVersion.versionNumber}
 			{lang[interfaceLanguage.current].on}
-			{entry.publishedAt?.toLocaleString(interfaceLanguage.current)})</span
+			{scheduledVersion.publishedAt ? new Date(scheduledVersion.publishedAt).toLocaleString(interfaceLanguage.current) : ''})</span
 		>
 	{/if}
 
-	{#if entryStatus === 'draft' && entry.draftVersion}
+	{#if entryStatus === 'draft' && draftVersion}
 		<span class="flex items-center gap-1">
 			<FileFilled />
-			{lang[interfaceLanguage.current].draft} (v{entry.draftVersion.versionNumber})</span
+			{lang[interfaceLanguage.current].draft} (v{draftVersion.versionNumber})</span
 		>
 	{/if}
 </div>

package/dist/admin/client/entry/utils.d.ts

@@ -1,3 +1,6 @@
 import type { DbEntryVersion, EntryStatus, EntryVersionStatus, RawEntry } from '../../../types/entries.js';
 export declare function getEntryVersionStatus(version: DbEntryVersion): EntryVersionStatus;
+/** Get entry status for a specific language */
+export declare function getEntryStatusForLang(entry: RawEntry, lang: string): EntryStatus;
+/** Get overall entry status — published if any lang is published */
 export declare function getEntryStatus(entry: RawEntry): EntryStatus;

package/dist/admin/client/entry/utils.js

@@ -7,15 +7,33 @@ export function getEntryVersionStatus(version) {
     }
     return 'published';
 }
+/** Get entry status for a specific language */
+export function getEntryStatusForLang(entry, lang) {
+    if (entry.archivedAt) {
+        return 'archived';
+    }
+    const publishedVersion = entry.publishedVersions[lang];
+    const scheduledVersion = entry.scheduledVersions[lang];
+    if (publishedVersion) {
+        return 'published';
+    }
+    if (scheduledVersion) {
+        return 'scheduled';
+    }
+    return 'draft';
+}
+/** Get overall entry status — published if any lang is published */
 export function getEntryStatus(entry) {
     if (entry.archivedAt) {
         return 'archived';
     }
-    if (entry.publishedVersionId) {
-        if (entry.publishedAt && new Date(entry.publishedAt) > new Date()) {
-            return 'scheduled';
-        }
+    const hasPublished = Object.values(entry.publishedVersions).some((v) => v != null);
+    if (hasPublished) {
         return 'published';
     }
+    const hasScheduled = Object.values(entry.scheduledVersions).some((v) => v != null);
+    if (hasScheduled) {
+        return 'scheduled';
+    }
     return 'draft';
 }

package/dist/admin/client/form/form-submission/form-submission-page.svelte

@@ -46,6 +46,8 @@
 
 	const formSubmissionQuery = $derived(submissionId ? remotes.getFormSubmission(submissionId) : null);
 
+	let markedAsRead = false;
+
 	$effect(() => {
 		const submission = formSubmissionQuery?.current;
 		if (submission) {
@@ -65,7 +67,8 @@
 				];
 			}
 
-			if (!submission.read) {
+			if (!submission.read && !markedAsRead) {
+				markedAsRead = true;
 				remotes.updateFormSubmission({ id: submission.id, read: true });
 			}
 		}

package/dist/admin/client/form/form-submission/submission-field.svelte

@@ -5,6 +5,7 @@
 	import Phone from '@tabler/icons-svelte/icons/phone';
 	import MessageSquare from '@tabler/icons-svelte/icons/message';
 	import FileText from '@tabler/icons-svelte/icons/file-text';
+	import Download from '@tabler/icons-svelte/icons/download';
 	import CheckCircle from '@tabler/icons-svelte/icons/circle-check';
 	import CircleX from '@tabler/icons-svelte/icons/circle-x';
 	import Hash from '@tabler/icons-svelte/icons/hash';
@@ -28,11 +29,13 @@
 	});
 
 	const isBoolean = $derived(typeof value === 'boolean');
+	const isFile = $derived(fieldType === 'file' && typeof value === 'string' && value.length > 0);
 	const isEmail = $derived(fieldType === 'email' || (typeof value === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)));
 	const isPhone = $derived(fieldType === 'phone' || (typeof value === 'string' && /^[\d\s\-+()]+$/.test(value) && String(value).length >= 9));
 
 	const iconType = $derived.by(() => {
 		if (isBoolean) return value ? 'check' : 'x';
+		if (isFile) return 'download';
 		if (isEmail) return 'mail';
 		if (isPhone) return 'phone';
 		if (fieldType === 'textarea') return 'message';
@@ -64,6 +67,8 @@
 			<Hash class="size-4 text-muted-foreground" />
 		{:else if iconType === 'calendar'}
 			<Calendar class="size-4 text-muted-foreground" />
+		{:else if iconType === 'download'}
+			<Download class="size-4 text-muted-foreground" />
 		{:else}
 			<FileText class="size-4 text-muted-foreground" />
 		{/if}
@@ -81,6 +86,11 @@
 					<span class="text-red-600">Nie</span>
 				{/if}
 			</div>
+		{:else if isFile}
+			<a href={String(value)} target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 text-primary hover:underline">
+				<Download class="size-4" />
+				Download
+			</a>
 		{:else if isEmail}
 			<a href="mailto:{value}" class="text-primary hover:underline break-all">{displayValue()}</a>
 		{:else if isPhone}

package/dist/admin/client/index.d.ts

@@ -9,5 +9,6 @@ export { default as FormPage } from './form/form-page.svelte';
 export { default as FormSubmissionPage } from './form/form-submission/form-submission-page.svelte';
 export { default as UsersPage } from './users/users-page.svelte';
 export { default as AcceptInvitePage } from './users/accept-invite-page.svelte';
+export { default as ResetPasswordPage } from './login/reset-password-page.svelte';
 export { default as MaintenancePage } from './maintenance/maintenance-page.svelte';
 export { default as MediaSelector } from '../components/media/media-selector.svelte';

package/dist/admin/client/index.js

@@ -9,5 +9,6 @@ export { default as FormPage } from './form/form-page.svelte';
 export { default as FormSubmissionPage } from './form/form-submission/form-submission-page.svelte';
 export { default as UsersPage } from './users/users-page.svelte';
 export { default as AcceptInvitePage } from './users/accept-invite-page.svelte';
+export { default as ResetPasswordPage } from './login/reset-password-page.svelte';
 export { default as MaintenancePage } from './maintenance/maintenance-page.svelte';
 export { default as MediaSelector } from '../components/media/media-selector.svelte';

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

@@ -5,12 +5,18 @@
 	import FileSearch from '@tabler/icons-svelte/icons/file-search';
 	import Photo from '@tabler/icons-svelte/icons/photo';
 	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import PlayerPlay from '@tabler/icons-svelte/icons/player-play';
+	import PlayerStop from '@tabler/icons-svelte/icons/player-stop';
+	import CircleCheck from '@tabler/icons-svelte/icons/circle-check';
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as Card from '../../../components/ui/card/index.js';
 	import { toast } from 'svelte-sonner';
 
 	interface GcReport {
 		imageStylesCount: number;
+		processableImagesCount: number;
+		expectedStylesCount: number;
+		missingStylesCount: number;
 		orphanedDiskFiles: string[];
 		missingDiskRecords: { table: string; id: string; url: string }[];
 	}
@@ -20,6 +26,18 @@
 	let purging = $state(false);
 	let cleaningOrphans = $state(false);
 
+	// Batch generation state
+	let generating = $state(false);
+	let genTotal = $state(0);
+	let genProcessed = $state(0);
+	let genCreated = $state(0);
+	let genSkipped = $state(0);
+	let genCurrentFile = $state('');
+	let genErrors = $state(0);
+	let genAbort: AbortController | null = null;
+
+	let genPercent = $derived(genTotal > 0 ? Math.round((genProcessed / genTotal) * 100) : 0);
+
 	async function loadReport() {
 		loading = true;
 		try {
@@ -63,6 +81,77 @@
 		}
 	}
 
+	async function startBatchGenerate() {
+		generating = true;
+		genTotal = 0;
+		genProcessed = 0;
+		genCreated = 0;
+		genSkipped = 0;
+		genCurrentFile = '';
+		genErrors = 0;
+		genAbort = new AbortController();
+
+		try {
+			const res = await fetch('/admin/api/generate-styles', {
+				method: 'POST',
+				signal: genAbort.signal
+			});
+
+			if (!res.ok) throw new Error('Failed to start');
+			if (!res.body) throw new Error('No response body');
+
+			const reader = res.body.getReader();
+			const decoder = new TextDecoder();
+			let buffer = '';
+
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+
+				buffer += decoder.decode(value, { stream: true });
+				const chunks = buffer.split('\n\n');
+				buffer = chunks.pop() || '';
+
+				for (const chunk of chunks) {
+					if (!chunk.startsWith('data: ')) continue;
+					const event = JSON.parse(chunk.slice(6));
+
+					genTotal = event.total ?? genTotal;
+					genProcessed = event.processed ?? genProcessed;
+					genCreated = event.created ?? genCreated;
+					genSkipped = event.skipped ?? genSkipped;
+					genCurrentFile = event.currentFile ?? genCurrentFile;
+
+					if (event.type === 'error') {
+						genErrors++;
+					}
+
+					if (event.type === 'done') {
+						const parts = [`Przetworzono ${genTotal} obrazów`];
+						if (genCreated > 0) parts.push(`utworzono ${genCreated} styli`);
+						if (genSkipped > 0) parts.push(`pominięto ${genSkipped} (już istnieją)`);
+						if (genErrors > 0) parts.push(`${genErrors} błędów`);
+						toast.success(parts.join(', '));
+					}
+				}
+			}
+		} catch (e) {
+			if (e instanceof DOMException && e.name === 'AbortError') {
+				toast.info(`Przerwano po ${genProcessed}/${genTotal} obrazów`);
+			} else {
+				toast.error('Błąd podczas generowania styli');
+			}
+		} finally {
+			generating = false;
+			genAbort = null;
+			await loadReport();
+		}
+	}
+
+	function cancelBatchGenerate() {
+		genAbort?.abort();
+	}
+
 	$effect(() => {
 		loadReport();
 	});
@@ -94,14 +183,69 @@
 					</Card.Description>
 				</Card.Header>
 				<Card.Content>
-					<p class="mb-4 text-3xl font-bold" style="color: var(--primary);">
+					<p class="mb-1 text-3xl font-bold" style="color: var(--primary);">
 						{report.imageStylesCount}
+						<span class="text-base font-normal" style="color: var(--muted-foreground);">/ {report.expectedStylesCount}</span>
+					</p>
+					<p class="mb-4 text-xs" style="color: var(--muted-foreground);">
+						{report.processableImagesCount} obrazów, {report.expectedStylesCount} oczekiwanych styli
 					</p>
+
+					<!-- Batch generate -->
+					{#if generating}
+						<div class="mb-4">
+							<div class="mb-1 flex items-center justify-between text-xs" style="color: var(--muted-foreground);">
+								<span>{genProcessed}/{genTotal} obrazów</span>
+								<span>{genPercent}%</span>
+							</div>
+							<div class="h-2 w-full overflow-hidden rounded-full" style="background: var(--muted, #e5e7eb);">
+								<div
+									class="h-full rounded-full transition-all duration-300"
+									style="width: {genPercent}%; background: var(--primary);"
+								></div>
+							</div>
+							<p class="mt-1 text-xs" style="color: var(--muted-foreground);">
+								Utworzono: {genCreated}, pominięto: {genSkipped}{genErrors > 0 ? `, błędów: ${genErrors}` : ''}
+							</p>
+							<p class="mt-0.5 truncate text-xs" style="color: var(--muted-foreground);">
+								{genCurrentFile}
+							</p>
+							<Button
+								variant="outline"
+								size="sm"
+								onclick={cancelBatchGenerate}
+								class="mt-2"
+							>
+								<PlayerStop class="size-4" />
+								Anuluj
+							</Button>
+						</div>
+					{:else if report.missingStylesCount > 0}
+						<div class="mb-3">
+							<p class="mb-2 text-sm" style="color: var(--warning, #C4893A);">
+								Brakuje {report.missingStylesCount} styli — generowanie odbywa się przy wyświetleniu, co może spowalniać aplikację.
+							</p>
+							<Button
+								variant="default"
+								size="sm"
+								onclick={startBatchGenerate}
+							>
+								<PlayerPlay class="size-4" />
+								Generuj brakujące style
+							</Button>
+						</div>
+					{:else}
+						<div class="mb-3 flex items-center gap-1.5 text-sm" style="color: var(--success, #3A8A5C);">
+							<CircleCheck class="size-4" />
+							Wszystkie style wygenerowane
+						</div>
+					{/if}
+
 					<Button
 						variant="destructive"
 						size="sm"
 						onclick={purgeStyles}
-						disabled={purging || report.imageStylesCount === 0}
+						disabled={purging || generating || report.imageStylesCount === 0}
 					>
 						{#if purging}
 							<Loader2 class="size-4 animate-spin" />

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

@@ -32,12 +32,7 @@
 	import UserSessionsSheet from './user-sessions-sheet.svelte';
 	import InviteUserDialog from './invite-user-dialog.svelte';
 	import PendingInvitations from './pending-invitations.svelte';
-
-	type Props = {
-		emailConfigured?: boolean;
-	};
-
-	let { emailConfigured = false }: Props = $props();
+	import { getRemotes } from '../../helpers/index.js';
 
 	type User = {
 		id: string;
@@ -47,6 +42,10 @@
 		createdAt: Date;
 	};
 
+	const remotes = getRemotes();
+	const emailQuery = $derived(remotes.getEmailConfigured());
+	const emailConfigured = $derived(emailQuery.data === true);
+
 	const interfaceLanguage = useInterfaceLanguage();
 	const lang = $derived(usersLang[interfaceLanguage.current]);
 	const session = authClient.useSession();