includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/entry/hybrid/hybrid-layout.svelte

@@ -2,6 +2,11 @@
 	import type { Snippet } from 'svelte';
 	import { onMount } from 'svelte';
 	import * as Resizable from '../../../../components/ui/resizable/index.js';
+	import * as Sheet from '../../../../components/ui/sheet/index.js';
+	import Button from '../../../../components/ui/button/button.svelte';
+	import EyeIcon from '@tabler/icons-svelte/icons/eye';
+	import { IsMobile } from '../../../../hooks/is-mobile.svelte.js';
+	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 
 	type Props = {
 		preview: Snippet;
@@ -10,13 +15,23 @@
 
 	let { preview, formPanel }: Props = $props();
 
-	const STORAGE_KEY = 'hybrid-panel-size';
-	const DEFAULT_SIZE = 35; // percentage
-	const MIN_SIZE = 25;
-	const MAX_SIZE = 50;
+	// v2: form panel dominates by default; preview is the resizable one.
+	const STORAGE_KEY = 'hybrid-panel-size-v2';
+	const DEFAULT_SIZE = 62; // form panel width, percentage
+	const MIN_SIZE = 30;
+	const MAX_SIZE = 75;
 
 	let panelSize = $state(DEFAULT_SIZE);
 
+	// On viewports narrower than `lg` we collapse the side-by-side layout to
+	// a form-only view and surface the preview behind a bottom-sheet trigger.
+	// Two resizable panes squeezed into <1024px end up unreadably narrow.
+	const isMobile = new IsMobile(1024);
+	const interfaceLanguage = useInterfaceLanguage();
+	let mobilePreviewOpen = $state(false);
+
+	const previewLabel = $derived(interfaceLanguage.current === 'pl' ? 'Podgląd' : 'Preview');
+
 	onMount(() => {
 		const saved = localStorage.getItem(STORAGE_KEY);
 		if (saved) {
@@ -33,25 +48,61 @@
 	}
 </script>
 
-<Resizable.PaneGroup direction="horizontal" class="h-full flex-1">
-	<Resizable.Pane defaultSize={100 - panelSize} minSize={100 - MAX_SIZE} maxSize={100 - MIN_SIZE}>
-		<div class="h-full overflow-hidden">
-			{@render preview()}
+{#if isMobile.current}
+	<div class="relative h-full flex-1 overflow-hidden">
+		<div class="h-full overflow-y-auto overscroll-contain bg-background">
+			{@render formPanel()}
 		</div>
-	</Resizable.Pane>
-
-	<Resizable.Handle withHandle class="bg-border hover:bg-primary/50 transition-colors" />
-
-	<Resizable.Pane
-		defaultSize={panelSize}
-		minSize={MIN_SIZE}
-		maxSize={MAX_SIZE}
-		onResize={handleResize}
-	>
-		<div class="h-full overflow-y-auto overscroll-contain border-l bg-background">
-			<div class="p-3 lg:p-4">
+		<Sheet.Root bind:open={mobilePreviewOpen}>
+			<Sheet.Trigger>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="default"
+						size="sm"
+						class="fixed right-4 bottom-6 z-30 gap-1.5 shadow-lg"
+						aria-label={previewLabel}
+					>
+						<EyeIcon class="size-4" />
+						<span>{previewLabel}</span>
+					</Button>
+				{/snippet}
+			</Sheet.Trigger>
+			<Sheet.Content
+				side="bottom"
+				class="flex h-[92dvh] flex-col gap-0 p-0"
+				aria-label={previewLabel}
+			>
+				<Sheet.Header class="border-b p-3">
+					<Sheet.Title>{previewLabel}</Sheet.Title>
+				</Sheet.Header>
+				<div class="flex-1 overflow-hidden">
+					{#if mobilePreviewOpen}
+						{@render preview()}
+					{/if}
+				</div>
+			</Sheet.Content>
+		</Sheet.Root>
+	</div>
+{:else}
+	<Resizable.PaneGroup direction="horizontal" class="h-full flex-1">
+		<Resizable.Pane defaultSize={100 - panelSize} minSize={100 - MAX_SIZE} maxSize={100 - MIN_SIZE}>
+			<div class="h-full overflow-hidden">
+				{@render preview()}
+			</div>
+		</Resizable.Pane>
+
+		<Resizable.Handle withHandle class="bg-border hover:bg-primary/50 transition-colors" />
+
+		<Resizable.Pane
+			defaultSize={panelSize}
+			minSize={MIN_SIZE}
+			maxSize={MAX_SIZE}
+			onResize={handleResize}
+		>
+			<div class="h-full overflow-y-auto overscroll-contain border-l bg-background">
 				{@render formPanel()}
 			</div>
-		</div>
-	</Resizable.Pane>
-</Resizable.PaneGroup>
+		</Resizable.Pane>
+	</Resizable.PaneGroup>
+{/if}

package/dist/admin/client/entry/hybrid/hybrid-preview.svelte

@@ -62,7 +62,7 @@
 
 <div class="flex h-full flex-col overflow-hidden">
 	<div class="flex items-center justify-center gap-2 border-b px-2 py-1.5">
-		<ToggleGroup.Root type="single" bind:value={sizePreset}>
+		<ToggleGroup.Root type="single" bind:value={sizePreset} role="radiogroup">
 			<ToggleGroup.Item value="responsive" aria-label="Responsive view">
 				<ArrowsMaximize class="size-4" />
 			</ToggleGroup.Item>

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

@@ -2,5 +2,19 @@ import type { DbEntryVersion, EntryStatus, EntryVersionStatus, RawEntry } from '
 export declare function getEntryVersionStatus(version: DbEntryVersion): EntryVersionStatus;
 /** Get entry status for a specific language */
 export declare function getEntryStatusForLang(entry: RawEntry, lang: string): EntryStatus;
+export interface LangPublishState {
+    status: EntryStatus;
+    /** True only when status === 'published' AND a future-dated version is queued. */
+    hasScheduledUpdate: boolean;
+    /** Live published timestamp (status === 'published'). */
+    publishedAt: Date | null;
+    /** Pending scheduled timestamp — first publication OR queued update. */
+    scheduledAt: Date | null;
+}
+/**
+ * Full publication state for a single content language. Distinguishes a live
+ * published version that also has a scheduled update from a plain published one.
+ */
+export declare function getLangPublishState(entry: RawEntry, lang: string): LangPublishState;
 /** Get overall entry status — published if any lang is published */
 export declare function getEntryStatus(entry: RawEntry): EntryStatus;

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

@@ -22,6 +22,34 @@ export function getEntryStatusForLang(entry, lang) {
     }
     return 'draft';
 }
+/**
+ * Full publication state for a single content language. Distinguishes a live
+ * published version that also has a scheduled update from a plain published one.
+ */
+export function getLangPublishState(entry, lang) {
+    if (entry.archivedAt) {
+        return { status: 'archived', hasScheduledUpdate: false, publishedAt: null, scheduledAt: null };
+    }
+    const publishedVersion = entry.publishedVersions[lang];
+    const scheduledVersion = entry.scheduledVersions[lang];
+    if (publishedVersion) {
+        return {
+            status: 'published',
+            hasScheduledUpdate: scheduledVersion != null,
+            publishedAt: publishedVersion.publishedAt ? new Date(publishedVersion.publishedAt) : null,
+            scheduledAt: scheduledVersion?.publishedAt ? new Date(scheduledVersion.publishedAt) : null
+        };
+    }
+    if (scheduledVersion) {
+        return {
+            status: 'scheduled',
+            hasScheduledUpdate: false,
+            publishedAt: null,
+            scheduledAt: scheduledVersion.publishedAt ? new Date(scheduledVersion.publishedAt) : null
+        };
+    }
+    return { status: 'draft', hasScheduledUpdate: false, publishedAt: null, scheduledAt: null };
+}
 /** Get overall entry status — published if any lang is published */
 export function getEntryStatus(entry) {
     if (entry.archivedAt) {

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

@@ -3,7 +3,7 @@
 	import { getRemotes } from '../../../context/remotes.js';
 	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import { getLocalizedLabel } from '../../../utils/collectionLabel.js';
-	import { formatAbsoluteDate } from '../../../utils/formatDate.js';
+	import { formatDateTime } from '../../../utils/formatters.js';
 	import type { FormSubmission } from '../../../../types/forms.js';
 	import type { InterfaceLanguage } from '../../../../types/languages.js';
 	import SubmissionField from './submission-field.svelte';
@@ -143,7 +143,7 @@
 	);
 
 	const createdAtFormatted = $derived(
-		formatAbsoluteDate(new Date(submission.createdAt), interfaceLanguage.current)
+		formatDateTime(new Date(submission.createdAt), interfaceLanguage.current)
 	);
 
 	function parseUserAgent(ua?: string | null): string {