includio-cms 0.1.4 → 0.5.1

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

@@ -1,16 +1,22 @@
 <script lang="ts">
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
-	import type { DbEntryVersion, EntryStatus, RawEntry } from '../../../types/entries.js';
-	import * as ToggleGroup from '../../../components/ui/toggle-group/index.js';
+	import type { DbEntryVersion, RawEntry } from '../../../types/entries.js';
 	import Button from '../../../components/ui/button/button.svelte';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import StatusBadge from './header/status-badge.svelte';
 	import SaveIndicator from './header/save-indicator.svelte';
 	import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
+	import type { Field } from '../../../types/fields.js';
 	import LayoutSidebar from '@tabler/icons-svelte/icons/layout-sidebar';
+	import SendIcon from '@tabler/icons-svelte/icons/send';
+	import ChevronDownIcon from '@tabler/icons-svelte/icons/chevron-down';
+	import LanguageIcon from '@tabler/icons-svelte/icons/language';
+	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
 	import { hasHybridContext, getHybridContext } from './hybrid/hybrid-context.svelte.js';
 	import { getEntryStatus } from './utils.js';
+	import { onMount } from 'svelte';
+	import type { LangStatus } from '../../utils/translationStatus.js';
 
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
@@ -26,7 +32,7 @@
 		en: {
 			publish: 'Publish',
 			update: 'Update',
-			saveDraft: 'Save Draft'
+			saveDraft: 'Save draft'
 		},
 		pl: {
 			publish: 'Publikuj',
@@ -40,12 +46,30 @@
 	type Props = {
 		entry: RawEntry;
 		version: DbEntryVersion;
+		fields?: Field[];
+		getFormData?: () => Record<string, unknown>;
 		onSave: (type: UpdateEntryVersionCommandType, scheduledAt?: Date) => void;
+		onSaveDraft: () => void;
 		onArchive: () => void;
 		saveStatus?: SaveStatus;
+		isArchived?: boolean;
+		onScrollToIssue?: (fieldSlug: string, nodePos: number) => void;
+		translationStatus?: Record<string, LangStatus> | null;
 	};
 
-	let { entry, onSave, onArchive, version, saveStatus = 'idle' }: Props = $props();
+	let {
+		entry,
+		onSave,
+		onSaveDraft,
+		onArchive,
+		version,
+		fields = [],
+		getFormData,
+		saveStatus = 'idle',
+		isArchived = false,
+		onScrollToIssue,
+		translationStatus = null
+	}: Props = $props();
 	let { collection } = entry;
 
 	const hybridContext = hasHybridContext() ? getHybridContext() : null;
@@ -62,52 +86,134 @@
 				return t.publish;
 		}
 	});
+
+	let isMac = $state(false);
+	onMount(() => {
+		isMac = /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+	});
+	const shortcutLabel = $derived(isMac ? '⌘S' : 'Ctrl+S');
+
+	function statusDotClass(status: LangStatus | undefined): string {
+		if (!status) return 'bg-[var(--text-light)]';
+		if (status.status === 'complete') return 'bg-[var(--success)]';
+		if (status.status === 'partial') return 'bg-[var(--warning)]';
+		return 'bg-[var(--text-light)]';
+	}
+
+	function statusLabel(lang: string, status: LangStatus | undefined): string {
+		if (!status) return lang.toUpperCase();
+		if (status.status === 'complete') return `${lang.toUpperCase()} \u2713`;
+		if (status.status === 'partial') return `${lang.toUpperCase()} \u26A0`;
+		return lang.toUpperCase();
+	}
+
+	function statusTooltip(lang: string, status: LangStatus | undefined): string {
+		if (!status) return lang.toUpperCase();
+		if (status.status === 'complete') return `${lang.toUpperCase()}: 100%`;
+		const missing = status.missingFields.map((f) => f.label).join(', ');
+		return `${lang.toUpperCase()}: ${status.percentage}% — ${interfaceLanguage.current === 'pl' ? 'brakuje' : 'missing'}: ${missing}`;
+	}
+
+	const isNonDefaultLang = $derived(
+		contentLanguage.all.length > 1 && contentLanguage.current !== contentLanguage.all[0]
+	);
 </script>
 
 <div
-	class="sticky top-0 z-50 flex items-center justify-between gap-4 border-b border-slate-200/30 bg-white/60 px-4 py-3 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60 md:px-6"
+	class="bg-background/60 sticky top-0 z-50 flex h-12 shrink-0 items-center justify-between gap-4 border-b px-6 backdrop-blur-xl"
 >
-	<div class="flex items-center gap-4">
+	<!-- Left: Status + Save indicator -->
+	<div class="flex items-center gap-2.5">
 		<StatusBadge {entry} {version} />
 		<SaveIndicator status={saveStatus} />
 	</div>
 
-	<div class="flex items-center gap-2">
+	<!-- Right: grouped actions -->
+	<div class="flex items-center gap-1.5">
+		<!-- Language switcher -->
 		{#if contentLanguage.all.length > 1}
-			<ToggleGroup.Root
-				size="sm"
-				type="single"
-				variant="outline"
-				onValueChange={(val) => {
-					if (val) {
-						contentLanguage.current = val;
-					}
-				}}
-				value={contentLanguage.current}
-			>
+			<div class="border-border bg-muted inline-flex overflow-hidden rounded-lg border">
 				{#each contentLanguage.all as lang}
-					<ToggleGroup.Item value={lang}>
-						{lang.toUpperCase()}
-					</ToggleGroup.Item>
+					{@const langStatus = translationStatus?.[lang]}
+					<button
+						type="button"
+						role="tab"
+						aria-selected={lang === contentLanguage.current}
+						title={statusTooltip(lang, langStatus)}
+						class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-semibold transition-colors {lang ===
+						contentLanguage.current
+							? 'text-primary bg-white shadow-sm ring-1 ring-primary/20'
+							: 'text-muted-foreground hover:text-foreground bg-transparent'}"
+						onclick={() => (contentLanguage.current = lang)}
+					>
+						<span class="size-2 shrink-0 rounded-full {statusDotClass(langStatus)}"></span>
+						{statusLabel(lang, langStatus)}
+					</button>
 				{/each}
-			</ToggleGroup.Root>
-		{/if}
+			</div>
+
+			<!-- Reference mode toggle -->
+			<Button
+				variant="ghost"
+				size="icon-sm"
+				class={contentLanguage.referenceMode ? 'text-primary bg-[var(--lavender-lighter)]' : ''}
+				onclick={() => (contentLanguage.referenceMode = !contentLanguage.referenceMode)}
+				title={interfaceLanguage.current === 'pl' ? 'Tryb referencyjny' : 'Reference mode'}
+			>
+				<LanguageIcon class="size-4" />
+			</Button>
 
-		<Button size="sm" type="button" variant="ghost" onclick={() => onSave('draft')}
-			>{lang[interfaceLanguage.current].saveDraft}</Button
-		>
+			<div class="bg-border mx-1 h-5 w-px shrink-0"></div>
+		{/if}
 
-		<Button
-			size="sm"
-			type="button"
-			variant="gradient"
-			onclick={() => onSave('published-now')}
-		>
-			{primaryButtonLabel}
-		</Button>
+		{#if !isArchived}
+		<!-- Split button: Publish + Save Draft -->
+		<div class="inline-flex items-stretch rounded-lg shadow-[0_1px_3px_rgba(91,74,158,0.3)]">
+			<button
+				type="button"
+				class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-l-lg px-4 py-1.5 text-[13px] font-semibold transition-colors"
+				onclick={() => onSave('published-now')}
+			>
+				<SendIcon class="size-3.5" />
+				{primaryButtonLabel}
+			</button>
+
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					{#snippet child({ props })}
+						<button
+							{...props}
+							type="button"
+							class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center rounded-r-lg border-l border-white/20 px-1.5 py-1.5 transition-colors"
+							aria-label={lang[interfaceLanguage.current].saveDraft}
+						>
+							<ChevronDownIcon class="size-3.5" />
+						</button>
+					{/snippet}
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end" class="w-48">
+					<DropdownMenu.Item onclick={onSaveDraft}>
+						{lang[interfaceLanguage.current].saveDraft}
+						<DropdownMenu.Shortcut>{shortcutLabel}</DropdownMenu.Shortcut>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+
+		<div class="bg-border mx-1 h-5 w-px shrink-0"></div>
+		{/if}
 
+		<!-- Panel triggers + Hybrid toggle -->
 		{#await import('./header/publish-panel.svelte') then { default: PublishPanel }}
-			<PublishPanel {entry} {version} {onSave} {onArchive} />
+			<PublishPanel
+				{entry}
+				{version}
+				{fields}
+				{getFormData}
+				{onSave}
+				{onArchive}
+				{onScrollToIssue}
+			/>
 		{/await}
 
 		{#await import('./header/version-history-sheet.svelte') then { default: VersionHistorySheet }}
@@ -116,14 +222,14 @@
 
 		{#if hybridContext?.enabled}
 			<Button
-				variant={hybridContext.mode === 'hybrid' ? 'secondary' : 'outline'}
+				variant="ghost"
 				size="icon"
+				class={hybridContext.mode === 'hybrid' ? 'text-primary bg-[var(--lavender-lighter)]' : ''}
 				onclick={() => hybridContext.toggle()}
 				title="Hybrid Editor"
 			>
 				<LayoutSidebar class="size-4" />
 			</Button>
 		{/if}
-
 	</div>
 </div>

package/dist/admin/client/entry/entry-header.svelte.d.ts

@@ -1,12 +1,20 @@
 import type { DbEntryVersion, RawEntry } from '../../../types/entries.js';
 import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
+import type { Field } from '../../../types/fields.js';
+import type { LangStatus } from '../../utils/translationStatus.js';
 type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
 type Props = {
     entry: RawEntry;
     version: DbEntryVersion;
+    fields?: Field[];
+    getFormData?: () => Record<string, unknown>;
     onSave: (type: UpdateEntryVersionCommandType, scheduledAt?: Date) => void;
+    onSaveDraft: () => void;
     onArchive: () => void;
     saveStatus?: SaveStatus;
+    isArchived?: boolean;
+    onScrollToIssue?: (fieldSlug: string, nodePos: number) => void;
+    translationStatus?: Record<string, LangStatus> | null;
 };
 declare const EntryHeader: import("svelte").Component<Props, {}, "">;
 type EntryHeader = ReturnType<typeof EntryHeader>;