includio-cms 0.1.4 → 0.5.0

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

@@ -8,46 +8,44 @@
 	import Button from '../../../../components/ui/button/button.svelte';
 	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 { getEntryStatus } from '../utils.js';
 
 	const lang: Record<
 		InterfaceLanguage,
 		{
 			history: string;
-			today: string;
-			yesterday: string;
-			version: string;
+			description: string;
 			published: string;
 			scheduled: string;
-			draft: string;
+			currentDraft: string;
+			previous: string;
 			changedFields: string;
-			noChanges: string;
-			versionsCount: string;
+			triggerLabel: string;
+			editing: string;
 		}
 	> = {
 		en: {
 			history: 'Version History',
-			today: 'Today',
-			yesterday: 'Yesterday',
-			version: 'Version',
+			description: 'Browse and restore previous versions of this entry',
 			published: 'Published',
 			scheduled: 'Scheduled',
-			draft: 'Draft',
+			currentDraft: 'Current draft',
+			previous: 'Previous',
 			changedFields: 'Changed fields',
-			noChanges: 'No changes',
-			versionsCount: 'versions'
+			triggerLabel: 'History',
+			editing: 'Editing'
 		},
 		pl: {
 			history: 'Historia wersji',
-			today: 'Dzisiaj',
-			yesterday: 'Wczoraj',
-			version: 'Wersja',
+			description: 'Przeglądaj i przywracaj wcześniejsze wersje tego wpisu',
 			published: 'Opublikowana',
 			scheduled: 'Zaplanowana',
-			draft: 'Szkic',
+			currentDraft: 'Aktualny szkic',
+			previous: 'Poprzednie',
 			changedFields: 'Zmienione pola',
-			noChanges: 'Brak zmian',
-			versionsCount: 'wersji'
+			triggerLabel: 'Historia',
+			editing: 'Edytujesz'
 		}
 	};
 
@@ -64,41 +62,10 @@
 
 	const entryStatus = $derived(getEntryStatus(entry));
 
-	function formatRelativeTime(date: Date): string {
-		const now = new Date();
-		const diff = now.getTime() - date.getTime();
-		const seconds = Math.floor(diff / 1000);
-		const minutes = Math.floor(seconds / 60);
-		const hours = Math.floor(minutes / 60);
-
-		if (interfaceLanguage.current === 'pl') {
-			if (hours > 0) return `${hours} godz. temu`;
-			if (minutes > 0) return `${minutes} min temu`;
-			return 'przed chwilą';
-		}
-
-		if (hours > 0) return `${hours}h ago`;
-		if (minutes > 0) return `${minutes}m ago`;
-		return 'just now';
-	}
-
-	function getDateKey(date: Date): string {
-		const now = new Date();
-		const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-		const yesterday = new Date(today);
-		yesterday.setDate(yesterday.getDate() - 1);
-		const dateDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-
-		if (dateDay.getTime() === today.getTime()) {
-			return lang[interfaceLanguage.current].today;
-		}
-		if (dateDay.getTime() === yesterday.getTime()) {
-			return lang[interfaceLanguage.current].yesterday;
-		}
-		return date.toLocaleDateString(interfaceLanguage.current, {
-			day: 'numeric',
-			month: 'long',
-			year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+	function formatTime(date: Date): string {
+		return date.toLocaleTimeString(interfaceLanguage.current, {
+			hour: '2-digit',
+			minute: '2-digit'
 		});
 	}
 
@@ -119,15 +86,62 @@
 		return changed;
 	}
 
+	function getDotClass(version: DbEntryVersion): string {
+		const isPublished = entry.publishedVersionId === version.id && entryStatus === 'published';
+		const isScheduled = entry.publishedVersionId === version.id && entryStatus === 'scheduled';
+		const isCurrent = version.id === currentVersionId;
+
+		if (isPublished) return 'dot-published';
+		if (isScheduled) return 'dot-scheduled';
+		if (isCurrent) return 'dot-current';
+		return 'dot-default';
+	}
+
 	const sortedVersions = $derived(
 		[...entry.versions].sort((a, b) => b.versionNumber - a.versionNumber)
 	);
 
-	const groupedVersions = $derived.by(() => {
+	// Filter: keep current, published, scheduled, and versions with actual changes
+	const meaningfulVersions = $derived.by(() => {
+		return sortedVersions.filter((version, idx) => {
+			// Always keep current version
+			if (version.id === currentVersionId) return true;
+			// Always keep published/scheduled
+			if (entry.publishedVersionId === version.id) return true;
+			// Keep versions with actual data changes vs previous
+			const prevVersion = sortedVersions[idx + 1];
+			if (!prevVersion) return true; // first version
+			return JSON.stringify(version.data) !== JSON.stringify(prevVersion.data);
+		});
+	});
+
+	// Pinned: currently editing version
+	const currentVersion = $derived(
+		meaningfulVersions.find((v) => v.id === currentVersionId)
+	);
+
+	// Timeline versions: everything except the currently editing one
+	const timelineVersions = $derived(
+		meaningfulVersions.filter((v) => v.id !== currentVersionId)
+	);
+
+	// Semantic groups for timeline (Published / Previous only)
+	const semanticGroups = $derived.by(() => {
 		const groups: Map<string, DbEntryVersion[]> = new Map();
 
-		for (const version of sortedVersions) {
-			const key = getDateKey(version.createdAt);
+		for (const version of timelineVersions) {
+			const isPublished = entry.publishedVersionId === version.id && entryStatus === 'published';
+			const isScheduled = entry.publishedVersionId === version.id && entryStatus === 'scheduled';
+
+			let key: string;
+			if (isPublished) {
+				key = t.published;
+			} else if (isScheduled) {
+				key = t.scheduled;
+			} else {
+				key = t.previous;
+			}
+
 			if (!groups.has(key)) {
 				groups.set(key, []);
 			}
@@ -141,37 +155,78 @@
 		goto(`/admin/entries/${entry.id}?version=${versionId}`);
 		open = false;
 	}
+
+	const t = $derived(lang[interfaceLanguage.current]);
 </script>
 
 <Sheet.Root bind:open>
 	<Sheet.Trigger>
 		{#snippet child({ props })}
-			<Button variant="outline" size="icon" {...props}>
+			<Button variant="ghost" size="icon-sm" {...props}>
 				<HistoryIcon class="size-4" />
-				<span class="sr-only">{lang[interfaceLanguage.current].history}</span>
 			</Button>
 		{/snippet}
 	</Sheet.Trigger>
-	<Sheet.Content side="right" class="w-[400px] sm:max-w-[400px]">
+	<Sheet.Content side="right" class="version-history-sheet w-[380px] sm:max-w-[380px]">
 		<Sheet.Header>
-			<Sheet.Title>{lang[interfaceLanguage.current].history}</Sheet.Title>
-			<Sheet.Description>
-				{sortedVersions.length} {lang[interfaceLanguage.current].versionsCount}
-			</Sheet.Description>
+			<Sheet.Title class="flex items-center gap-2">
+				{t.history}
+				<Badge variant="secondary" class="tabular-nums">{meaningfulVersions.length}</Badge>
+			</Sheet.Title>
+			<Sheet.Description class="sr-only">{t.description}</Sheet.Description>
 		</Sheet.Header>
 
-		<div class="mt-6 -mx-6 px-6 overflow-y-auto max-h-[calc(100vh-160px)]">
-			{#each groupedVersions as [dateKey, versions]}
-				<div class="mb-6">
-					<h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
-						{dateKey}
-					</h3>
+		<div class="vh-body">
+			<!-- Pinned: currently editing -->
+			{#if currentVersion}
+				<div class="vh-pinned">
+					<div class="vh-pinned-inner">
+						<div class="vh-item-header">
+							<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'}
+									<Badge class="vh-badge-published">
+										<SquareCheckFilled class="size-2.5 mr-0.5" />
+										{t.published}
+									</Badge>
+								{:else if entry.publishedVersionId === currentVersion.id && entryStatus === 'scheduled'}
+									<Badge class="vh-badge-scheduled">
+										{t.scheduled}
+									</Badge>
+								{/if}
+							</div>
+							<span class="vh-date">
+								{currentVersion.createdAt.toLocaleDateString(interfaceLanguage.current, {
+									day: 'numeric',
+									month: 'short'
+								})}
+							</span>
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			{#each semanticGroups as [groupLabel, versions]}
+				<div class="vh-group" class:vh-group-previous={groupLabel === t.previous}>
+					<div class="sheet-section-title">
+						{#if groupLabel === t.published}
+							<SquareCheckFilled class="size-3.5" />
+						{:else if groupLabel === t.scheduled}
+							<ClockFilled class="size-3.5" />
+						{:else}
+							<HistoryIcon class="size-3.5" />
+						{/if}
+						{groupLabel}
+					</div>
+
+					<!-- Timeline -->
+					<div class="vh-timeline" class:vh-timeline-published={groupLabel === t.published}>
+						<div class="vh-timeline-line"></div>
 
-					<div class="space-y-2">
-						{#each versions as version, idx}
+						{#each versions as version}
 							{@const isPublished = entry.publishedVersionId === version.id && entryStatus === 'published'}
 							{@const isScheduled = entry.publishedVersionId === version.id && entryStatus === 'scheduled'}
-							{@const isCurrent = version.id === currentVersionId}
 							{@const prevVersion = sortedVersions.find(
 								(v) => v.versionNumber === version.versionNumber - 1
 							)}
@@ -180,44 +235,40 @@
 							<button
 								type="button"
 								onclick={() => selectVersion(version.id)}
-								class="w-full text-left p-3 rounded-lg border transition-colors
-									{isCurrent
-									? 'border-primary/50 bg-primary/5'
-									: 'border-transparent hover:bg-muted/50'}"
+								class="vh-item"
 							>
-								<div class="flex items-center justify-between mb-1">
-									<div class="flex items-center gap-2">
-										<span class="font-medium">v{version.versionNumber}</span>
+								<div class="vh-dot {getDotClass(version)}"></div>
+
+								<div class="vh-item-header">
+									<div class="vh-item-left">
+										<span class="vh-time">{formatTime(version.createdAt)}</span>
 										{#if isPublished}
-											<Badge
-												class="bg-emerald-500/90 text-white border-emerald-600/20 text-[10px] px-1.5 py-0"
-											>
+											<Badge class="vh-badge-published">
 												<SquareCheckFilled class="size-2.5 mr-0.5" />
-												{lang[interfaceLanguage.current].published}
+												{t.published}
 											</Badge>
 										{:else if isScheduled}
-											<Badge
-												class="bg-amber-500/90 text-white border-amber-600/20 text-[10px] px-1.5 py-0"
-											>
-												{lang[interfaceLanguage.current].scheduled}
+											<Badge class="vh-badge-scheduled">
+												{t.scheduled}
 											</Badge>
 										{/if}
 									</div>
-									<span class="text-xs text-muted-foreground">
-										{formatRelativeTime(version.createdAt)}
+									<span class="vh-date">
+										{version.createdAt.toLocaleDateString(interfaceLanguage.current, {
+											day: 'numeric',
+											month: 'short'
+										})}
 									</span>
 								</div>
 
 								{#if changedFields.length > 0}
-									<div class="text-xs text-muted-foreground">
-										<span class="text-muted-foreground/70"
-											>{lang[interfaceLanguage.current].changedFields}:</span
-										>
-										{changedFields.slice(0, 3).join(', ')}{changedFields.length > 3 ? '...' : ''}
-									</div>
-								{:else if idx < versions.length - 1 || prevVersion}
-									<div class="text-xs text-muted-foreground/50">
-										{lang[interfaceLanguage.current].noChanges}
+									<div class="vh-changed-fields">
+										{#each changedFields.slice(0, 4) as field}
+											<span class="vh-field-badge">{field}</span>
+										{/each}
+										{#if changedFields.length > 4}
+											<span class="vh-field-badge">+{changedFields.length - 4}</span>
+										{/if}
 									</div>
 								{/if}
 							</button>
@@ -228,3 +279,168 @@
 		</div>
 	</Sheet.Content>
 </Sheet.Root>
+
+<style>
+	.vh-body {
+		padding: 18px 20px;
+		overflow-y: auto;
+		max-height: calc(100vh - 80px);
+	}
+
+	/* Pinned: currently editing */
+	.vh-pinned {
+		margin-bottom: 16px;
+		padding: 0 0 16px;
+		border-bottom: 1px solid var(--border);
+	}
+	.vh-pinned-inner {
+		background: color-mix(in oklch, var(--primary) 5%, transparent);
+		border-left: 2px solid var(--primary);
+		border-radius: 8px;
+		padding: 10px 12px;
+	}
+
+	.vh-group {
+		margin-bottom: 16px;
+	}
+	.vh-group:last-child {
+		margin-bottom: 0;
+	}
+	.vh-group-previous {
+		opacity: 0.7;
+	}
+
+	.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;
+	}
+
+	/* Timeline */
+	.vh-timeline {
+		position: relative;
+		margin-left: 12px;
+	}
+	.vh-timeline-line {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 1px;
+		background: var(--border);
+	}
+	.vh-timeline-published .vh-timeline-line {
+		background: var(--success);
+	}
+
+	.vh-item {
+		position: relative;
+		width: 100%;
+		text-align: left;
+		padding: 8px 8px 8px 20px;
+		border-radius: 8px;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		font-family: inherit;
+		transition: background 0.2s ease;
+	}
+	.vh-item:hover {
+		background: var(--muted);
+	}
+
+	/* Dot */
+	.vh-dot {
+		position: absolute;
+		left: -3.5px;
+		top: 14px;
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		box-shadow: 0 0 0 2px var(--card);
+	}
+	.dot-published {
+		background: var(--success);
+	}
+	.dot-scheduled {
+		background: var(--warning);
+	}
+	.dot-current {
+		background: var(--primary);
+	}
+	.dot-default {
+		background: var(--border);
+	}
+
+	.vh-item-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 2px;
+	}
+	.vh-item-left {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+	.vh-time {
+		font-size: 13px;
+		font-weight: 600;
+		color: var(--foreground);
+		font-variant-numeric: tabular-nums;
+	}
+	.vh-date {
+		font-size: 12px;
+		color: var(--muted-foreground);
+		font-variant-numeric: tabular-nums;
+	}
+
+	/* Badges */
+	:global(.vh-badge-editing) {
+		background: color-mix(in oklch, var(--primary) 12%, transparent) !important;
+		color: var(--primary) !important;
+		border-color: var(--primary) !important;
+		font-size: 10px !important;
+		padding: 0 6px !important;
+		height: 18px !important;
+	}
+	:global(.vh-badge-published) {
+		background: var(--success-bg) !important;
+		color: var(--success) !important;
+		border-color: var(--success) !important;
+		font-size: 10px !important;
+		padding: 0 6px !important;
+		height: 18px !important;
+	}
+	:global(.vh-badge-scheduled) {
+		background: var(--warning-bg) !important;
+		color: var(--warning) !important;
+		border-color: var(--warning) !important;
+		font-size: 10px !important;
+		padding: 0 6px !important;
+		height: 18px !important;
+	}
+
+	/* Changed fields */
+	.vh-changed-fields {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px;
+		margin-top: 4px;
+	}
+	.vh-field-badge {
+		display: inline-block;
+		padding: 1px 6px;
+		background: var(--muted);
+		border-radius: 4px;
+		font-size: 10px;
+		font-weight: 500;
+		color: var(--muted-foreground);
+	}
+</style>