includio-cms 0.1.4 → 0.5.1

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

@@ -3,24 +3,32 @@
 	import type { DbEntryVersion, EntryStatus, RawEntry } from '../../../../types/entries.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
 	import type { UpdateEntryVersionCommandType } from '../../../../core/server/entries/operations/update.js';
+	import type { Field } from '../../../../types/fields.js';
 	import * as Sheet from '../../../../components/ui/sheet/index.js';
-	import Badge from '../../../../components/ui/badge/badge.svelte';
 	import Button from '../../../../components/ui/button/button.svelte';
-	import { Input } from '../../../../components/ui/input/index.js';
 	import SettingsIcon from '@tabler/icons-svelte/icons/settings';
 	import CalendarClock from '@tabler/icons-svelte/icons/calendar-clock';
 	import SquareCheckFilled from '@tabler/icons-svelte/icons/square-check-filled';
 	import ClockFilled from '@tabler/icons-svelte/icons/clock-filled';
 	import FileFilled from '@tabler/icons-svelte/icons/file-filled';
+	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import Archive from '@tabler/icons-svelte/icons/archive';
+	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 { 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,
 		{
 			title: string;
+			description: string;
 			status: string;
 			statusLabels: Record<EntryStatus, string>;
-			version: string;
 			publishedAt: string;
 			scheduledFor: string;
 			schedulePublish: string;
@@ -31,14 +39,20 @@
 			unpublish: string;
 			cancelSchedule: string;
 			archive: string;
-			actions: string;
+			dangerZone: string;
 			date: string;
 			time: string;
 			publishedVersion: string;
+			accessibility: string;
+			a11yHint: string;
+			translations: string;
+			translationsHint: string;
+			missingFieldsLabel: (lang: string) => string;
 		}
 	> = {
 		en: {
 			title: 'Publication',
+			description: 'Manage publication status, scheduling, and entry lifecycle',
 			status: 'Status',
 			statusLabels: {
 				draft: 'Draft',
@@ -46,7 +60,6 @@
 				scheduled: 'Scheduled',
 				archived: 'Archived'
 			},
-			version: 'Version',
 			publishedAt: 'Published at',
 			scheduledFor: 'Scheduled for',
 			schedulePublish: 'Schedule Publish',
@@ -56,22 +69,27 @@
 			cancel: 'Cancel',
 			unpublish: 'Unpublish',
 			cancelSchedule: 'Cancel Schedule',
-			archive: 'Archive',
-			actions: 'Actions',
+			archive: 'Archive entry',
+			dangerZone: 'Danger Zone',
 			date: 'Date',
 			time: 'Time',
-			publishedVersion: 'Published version'
+			publishedVersion: 'Published version',
+			accessibility: 'Accessibility',
+			a11yHint: 'Resolve issues before publishing',
+			translations: 'Translations',
+			translationsHint: 'Fill in missing fields to publish',
+			missingFieldsLabel: (lang: string) => `Missing fields (${lang.toUpperCase()})`
 		},
 		pl: {
 			title: 'Publikacja',
+			description: 'Zarządzaj statusem publikacji, planowaniem i cyklem życia wpisu',
 			status: 'Status',
 			statusLabels: {
-				draft: 'Szkic',
+				draft: 'Wersja robocza',
 				published: 'Opublikowane',
 				scheduled: 'Zaplanowane',
 				archived: 'Zarchiwizowane'
 			},
-			version: 'Wersja',
 			publishedAt: 'Opublikowano',
 			scheduledFor: 'Zaplanowano na',
 			schedulePublish: 'Zaplanuj publikację',
@@ -81,44 +99,51 @@
 			cancel: 'Anuluj',
 			unpublish: 'Cofnij publikację',
 			cancelSchedule: 'Anuluj planowanie',
-			archive: 'Zarchiwizuj',
-			actions: 'Akcje',
+			archive: 'Archiwizuj wpis',
+			dangerZone: 'Strefa zagrożenia',
 			date: 'Data',
 			time: 'Czas',
-			publishedVersion: 'Opublikowana wersja'
+			publishedVersion: 'Opublikowana wersja',
+			accessibility: 'Dostępność',
+			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;
 		version: DbEntryVersion;
+		fields?: Field[];
+		getFormData?: () => Record<string, unknown>;
 		onSave: (type: UpdateEntryVersionCommandType, scheduledAt?: Date) => void;
 		onArchive: () => void;
+		onScrollToIssue?: (fieldSlug: string, nodePos: number) => void;
 	};
 
-	let { entry, version, onSave, onArchive }: Props = $props();
+	let { entry, version, fields = [], getFormData, onSave, onArchive, onScrollToIssue }: Props = $props();
 
 	let open = $state(false);
 	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 badgeClass = $derived.by(() => {
-		switch (entryStatus) {
-			case 'published':
-				return 'bg-emerald-500/90 hover:bg-emerald-500 text-white border-emerald-600/20';
-			case 'scheduled':
-				return 'bg-amber-500/90 hover:bg-amber-500 text-white border-amber-600/20';
-			case 'archived':
-				return 'bg-purple-500/90 hover:bg-purple-500 text-white border-purple-600/20';
-			default:
-				return 'bg-slate-200/80 dark:bg-slate-700/80 text-slate-600 dark:text-slate-300';
-		}
-	});
+	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) {
@@ -194,9 +219,30 @@
 		});
 	}
 
+	function runA11yValidation() {
+		if (!fields.length) {
+			a11yIssues = [];
+			return;
+		}
+		const data = getFormData ? getFormData() : version.data;
+		const a11yLang = interfaceLanguage.current === 'pl' ? a11yLangPl : a11yLangEn;
+		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>
@@ -204,150 +250,506 @@
 <Sheet.Root bind:open>
 	<Sheet.Trigger>
 		{#snippet child({ props })}
-			<Button variant="outline" size="icon" {...props}>
+			<Button variant="ghost" size="icon-sm" {...props}>
 				<SettingsIcon class="size-4" />
-				<span class="sr-only">{t.title}</span>
 			</Button>
 		{/snippet}
 	</Sheet.Trigger>
-	<Sheet.Content side="right" class="w-[400px] sm:max-w-[400px]">
+	<Sheet.Content side="right" class="publish-sheet w-[380px] sm:max-w-[380px]">
 		<Sheet.Header>
 			<Sheet.Title>{t.title}</Sheet.Title>
+			<Sheet.Description class="sr-only">{t.description}</Sheet.Description>
 		</Sheet.Header>
 
-		<div class="mt-6 space-y-6">
+		<div class="sheet-body">
 			<!-- Status section -->
-			<div class="space-y-3">
-				<h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+			<div class="sheet-section">
+				<div class="sheet-section-title">
+					<InfoCircle class="size-3.5" />
 					{t.status}
-				</h3>
-
-				<div class="space-y-2 text-sm">
-					<div class="flex items-center justify-between">
-						<span class="text-muted-foreground">{t.status}</span>
-						<Badge class="gap-1.5 {badgeClass}">
-							{#if entryStatus === 'published'}
-								<SquareCheckFilled class="size-3" />
-							{:else if entryStatus === 'scheduled'}
-								<ClockFilled class="size-3" />
-							{:else}
-								<FileFilled class="size-3" />
-							{/if}
-							{t.statusLabels[entryStatus]}
-						</Badge>
+				</div>
+				<div class="publish-status-card">
+					<div class="publish-status-icon">
+						{#if entryStatus === 'published'}
+							<SquareCheckFilled class="size-[18px]" />
+						{:else if entryStatus === 'scheduled'}
+							<ClockFilled class="size-[18px]" />
+						{:else}
+							<FileFilled class="size-[18px]" />
+						{/if}
 					</div>
+					<div class="publish-status-info">
+						<div class="publish-status-label">{t.statusLabels[entryStatus]}</div>
+						<div class="publish-status-meta">{formatDateTime(version.createdAt)}</div>
+					</div>
+				</div>
 
-					<div class="flex items-center justify-between">
-						<span class="text-muted-foreground">{t.version}</span>
-						<span class="font-medium">v{version.versionNumber}</span>
+				{#if entryStatus === 'published' && entry.publishedAt}
+					<div class="publish-detail-row">
+						<span>{t.publishedAt}</span>
+						<span class="tabular-nums">{formatDateTime(entry.publishedAt)}</span>
 					</div>
+				{/if}
 
-					{#if entryStatus === 'published' && entry.publishedAt}
-						<div class="flex items-center justify-between">
-							<span class="text-muted-foreground">{t.publishedAt}</span>
-							<span class="font-medium text-xs">{formatDateTime(entry.publishedAt)}</span>
-						</div>
-					{/if}
+				{#if entryStatus === 'scheduled' && entry.publishedAt}
+					<div class="publish-detail-row">
+						<span>{t.scheduledFor}</span>
+						<span class="tabular-nums">{formatDateTime(entry.publishedAt)}</span>
+					</div>
+				{/if}
 
-					{#if entryStatus === 'scheduled' && entry.publishedAt}
-						<div class="flex items-center justify-between">
-							<span class="text-muted-foreground">{t.scheduledFor}</span>
-							<span class="font-medium text-xs">{formatDateTime(entry.publishedAt)}</span>
-						</div>
-					{/if}
+				{#if entry.publishedVersion && entry.publishedVersion.id !== version.id}
+					<div class="publish-detail-row">
+						<span>{t.publishedVersion}</span>
+						<span class="tabular-nums">{formatDateTime(entry.publishedVersion.createdAt)}</span>
+					</div>
+				{/if}
+			</div>
 
-					{#if entry.publishedVersion && entry.publishedVersion.id !== version.id}
-						<div class="flex items-center justify-between">
-							<span class="text-muted-foreground">{t.publishedVersion}</span>
-							<span class="font-medium">v{entry.publishedVersion.versionNumber}</span>
+			<!-- 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}
-				</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}
 
-			<!-- Schedule section -->
-			<div class="space-y-3">
-				<h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+		<!-- Schedule section -->
+			<div class="sheet-section">
+				<div class="sheet-section-title">
 					<CalendarClock class="size-3.5" />
 					{scheduleLabel}
-				</h3>
-
-				<div class="space-y-2">
-					<div class="grid grid-cols-2 gap-2">
-						<div>
-							<label for="schedule-date" class="text-xs text-muted-foreground mb-1 block">{t.date}</label>
-							<Input
-								id="schedule-date"
-								type="date"
-								bind:value={dateValue}
-								min={getMinDate()}
-								class="w-full"
-							/>
-						</div>
-						<div>
-							<label for="schedule-time" class="text-xs text-muted-foreground mb-1 block">{t.time}</label>
-							<Input
-								id="schedule-time"
-								type="time"
-								bind:value={timeValue}
-								min={getMinTime()}
-								class="w-full"
-							/>
-						</div>
-					</div>
-					<Button
-						size="sm"
-						variant="gradient"
-						class="w-full"
-						onclick={handleSchedule}
-						disabled={!dateValue || !timeValue}
-					>
-						{scheduleLabel}
-					</Button>
 				</div>
+				<div class="schedule-row">
+					<input
+						class="schedule-input"
+						type="date"
+						bind:value={dateValue}
+						min={getMinDate()}
+						aria-label={t.date}
+					/>
+					<input
+						class="schedule-input"
+						type="time"
+						bind:value={timeValue}
+						min={getMinTime()}
+						aria-label={t.time}
+					/>
+				</div>
+				<button
+					class="btn-schedule"
+					onclick={handleSchedule}
+					disabled={!dateValue || !timeValue}
+				>
+					{scheduleLabel}
+				</button>
 			</div>
 
-			<!-- Destructive actions -->
+			<!-- Accessibility section -->
+			{#if a11yIssues.length > 0}
+				<div class="sheet-section">
+					<div class="sheet-section-title">
+						<Shield class="size-3.5" />
+						{t.accessibility}
+					</div>
+					<div class="a11y-checklist">
+						{#each a11yIssues as issue}
+							{#if issue.type === 'warning' && issue.fieldSlug && issue.firstNodePos != null && onScrollToIssue}
+								<button
+									type="button"
+									class="a11y-item warning a11y-item-clickable"
+									onclick={() => {
+										open = false;
+										setTimeout(() => onScrollToIssue!(issue.fieldSlug!, issue.firstNodePos!), 200);
+									}}
+								>
+									<div class="a11y-item-icon">
+										<AlertTriangle class="size-4" />
+									</div>
+									<span class="a11y-item-text">{issue.message}</span>
+								</button>
+							{:else}
+								<div class="a11y-item {issue.type}">
+									<div class="a11y-item-icon">
+										{#if issue.type === 'warning'}
+											<AlertTriangle class="size-4" />
+										{:else}
+											<CircleCheck class="size-4" />
+										{/if}
+									</div>
+									<span class="a11y-item-text">{issue.message}</span>
+								</div>
+							{/if}
+						{/each}
+					</div>
+					{#if hasA11yWarnings}
+						<p class="a11y-hint">{t.a11yHint}</p>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- Danger zone -->
 			{#if entryStatus !== 'archived'}
-				<div class="space-y-3">
-					<h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-						{t.actions}
-					</h3>
+				<div class="sheet-section">
+					<div class="danger-zone">
+						<div class="sheet-section-title danger">
+							<AlertTriangle class="size-3.5" />
+							{t.dangerZone}
+						</div>
 
-					<div class="space-y-2">
 						{#if entryStatus === 'published'}
-							<Button
-								variant="destructive"
-								size="sm"
-								class="w-full"
-								onclick={handleUnpublish}
-							>
+							<button class="btn-danger-outline" onclick={handleUnpublish}>
 								{t.unpublish}
-							</Button>
+							</button>
 						{/if}
 
 						{#if entryStatus === 'scheduled'}
-							<Button
-								variant="destructive"
-								size="sm"
-								class="w-full"
-								onclick={handleCancelSchedule}
-							>
+							<button class="btn-danger-outline" onclick={handleCancelSchedule}>
 								{t.cancelSchedule}
-							</Button>
+							</button>
 						{/if}
 
-						<Button
-							variant="outline"
-							size="sm"
-							class="w-full text-destructive hover:text-destructive"
+						<button
+							class="btn-danger-outline archive"
 							onclick={handleArchive}
 						>
 							{t.archive}
-						</Button>
+						</button>
 					</div>
 				</div>
 			{/if}
 		</div>
 	</Sheet.Content>
 </Sheet.Root>
+
+<style>
+	.sheet-body {
+		padding: 18px 20px;
+		overflow-y: auto;
+		flex: 1;
+		min-height: 0;
+	}
+
+	.sheet-section {
+		margin-bottom: 22px;
+	}
+	.sheet-section:last-child {
+		margin-bottom: 0;
+	}
+
+	.sheet-section-title {
+		font-size: 12px;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--text-light);
+		margin-bottom: 10px;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.sheet-section-title.danger {
+		color: var(--destructive);
+	}
+
+	/* Status card */
+	.publish-status-card {
+		padding: 12px 14px;
+		border-radius: 8px;
+		background: var(--muted);
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		margin-bottom: 14px;
+	}
+	.publish-status-icon {
+		width: 34px;
+		height: 34px;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--lavender-lighter);
+		color: var(--primary);
+	}
+	.publish-status-info {
+		flex: 1;
+	}
+	.publish-status-label {
+		font-size: 14px;
+		font-weight: 700;
+		color: var(--foreground);
+	}
+	.publish-status-meta {
+		font-size: 12px;
+		color: var(--text-light);
+	}
+	.publish-detail-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 6px 0;
+		font-size: 12px;
+		color: var(--muted-foreground);
+	}
+	.publish-detail-row span:last-child {
+		font-weight: 500;
+	}
+
+	/* Schedule */
+	.schedule-row {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 8px;
+		margin-bottom: 10px;
+	}
+	.schedule-input {
+		padding: 7px 10px;
+		font-family: inherit;
+		font-size: 13px;
+		border: 1px solid var(--border);
+		border-radius: 6px;
+		color: var(--foreground);
+		outline: none;
+		background: var(--card);
+		transition: border-color 0.2s ease;
+	}
+	.schedule-input:focus {
+		border-color: var(--primary);
+	}
+	.btn-schedule {
+		width: 100%;
+		padding: 8px;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--primary);
+		background: var(--lavender-lighter);
+		border: 1px solid var(--lavender-light);
+		border-radius: 8px;
+		cursor: pointer;
+		transition: background 0.2s ease;
+	}
+	.btn-schedule:hover {
+		background: var(--lavender-light);
+	}
+	.btn-schedule:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* A11y checklist */
+	.a11y-checklist {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+	.a11y-item {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		padding: 8px 10px;
+		border-radius: 8px;
+	}
+	.a11y-item.warning {
+		background: var(--warning-bg);
+	}
+	.a11y-item.success {
+		background: var(--success-bg);
+	}
+	.a11y-item-icon {
+		width: 18px;
+		height: 18px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		margin-top: 1px;
+	}
+	:global(.a11y-item.warning .a11y-item-icon) {
+		color: var(--warning);
+	}
+	:global(.a11y-item.success .a11y-item-icon) {
+		color: var(--success);
+	}
+	.a11y-item-text {
+		font-size: 13px;
+		font-weight: 500;
+	}
+	.a11y-item.warning .a11y-item-text {
+		color: #7a5520;
+	}
+	.a11y-item.success .a11y-item-text {
+		color: #2a6844;
+	}
+	.a11y-item-clickable {
+		cursor: pointer;
+		border: none;
+		width: 100%;
+		text-align: left;
+		font-family: inherit;
+		transition: opacity 0.15s;
+	}
+	.a11y-item-clickable:hover {
+		opacity: 0.8;
+	}
+	.a11y-hint {
+		font-size: 12px;
+		color: var(--text-light);
+		font-style: italic;
+		margin-top: 4px;
+	}
+
+	/* Danger zone */
+	.danger-zone {
+		padding-top: 14px;
+		border-top: 1px solid var(--border);
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+	.btn-danger-outline {
+		width: 100%;
+		padding: 8px;
+		font-family: inherit;
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--destructive);
+		background: transparent;
+		border: 1px solid var(--destructive);
+		border-radius: 8px;
+		cursor: pointer;
+		opacity: 0.7;
+		transition: all 0.2s ease;
+	}
+	.btn-danger-outline:hover {
+		background: var(--error-bg);
+		opacity: 1;
+	}
+	.btn-danger-outline.archive {
+		color: var(--muted-foreground);
+		border-color: var(--border);
+	}
+	.btn-danger-outline.archive:hover {
+		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>