@quoin-cms/admin 0.1.0

package/src/views/VersionsListView.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { page } from '$lib/router/index.svelte.js'
+	import { resolve } from '$lib/router/index.svelte.js'
+	import { goto } from '$lib/router/index.svelte.js'
+	import { schema, getCollectionByKey } from '$lib/stores/schema.svelte.js'
+	import { listVersions, restoreVersion } from '$lib/api/versions.js'
+	import type { Version } from '$lib/api/versions.js'
+	import StatusPill from '$lib/components/versions/StatusPill.svelte'
+	import RestoreModal from '$lib/components/versions/RestoreModal.svelte'
+	import Pagination from '$lib/components/Pagination.svelte'
+	import { toast } from 'svelte-sonner'
+	import { RotateCcw } from 'lucide-svelte'
+	import { onMount } from 'svelte'
+
+	let collectionKey = $derived(page.params.collection ?? '')
+	let recordId = $derived(page.params.id ?? '')
+	let collection = $derived(getCollectionByKey(schema.collections, collectionKey))
+
+	let versions = $state<Version[]>([])
+	let isLoading = $state(true)
+	let currentPage = $state(1)
+	let perPage = 20
+	let totalRecords = $state(0)
+
+	let restoreModalOpen = $state(false)
+	let restoreTargetId = $state('')
+	let isRestoring = $state(false)
+
+	let totalPages = $derived(Math.max(1, Math.ceil(totalRecords / perPage)))
+
+	let latestPublishedId = $derived.by(() => {
+		const v = versions.find((v) => v._status === 'published' && v.latest)
+		return v?.id ?? versions.find((v) => v._status === 'published')?.id ?? ''
+	})
+
+	let latestDraftId = $derived.by(() => {
+		const v = versions.find((v) => v._status === 'draft' && v.latest)
+		return v?.id ?? ''
+	})
+
+	let hasDrafts = $derived(collection?.versions?.drafts != null)
+
+	async function loadVersions(page: number) {
+		isLoading = true
+		const result = await listVersions(collectionKey, recordId, { page, limit: perPage })
+		isLoading = false
+		if (result.ok) {
+			versions = result.data.versions ?? []
+			totalRecords = result.data.totalRecords ?? 0
+			currentPage = page
+		} else {
+			toast.error(result.error)
+		}
+	}
+
+	onMount(() => {
+		loadVersions(1)
+	})
+
+	function formatDate(iso: string): string {
+		if (!iso) return ''
+		return new Date(iso).toLocaleString()
+	}
+
+	function timeAgo(iso: string): string {
+		if (!iso) return ''
+		const diff = Date.now() - new Date(iso).getTime()
+		const seconds = Math.floor(diff / 1000)
+		if (seconds < 60) return `${seconds}s ago`
+		const minutes = Math.floor(seconds / 60)
+		if (minutes < 60) return `${minutes}m ago`
+		const hours = Math.floor(minutes / 60)
+		if (hours < 24) return `${hours}h ago`
+		const days = Math.floor(hours / 24)
+		return `${days}d ago`
+	}
+
+	function openRestore(id: string) {
+		restoreTargetId = id
+		restoreModalOpen = true
+	}
+
+	async function handleRestore(asDraft: boolean) {
+		isRestoring = true
+		const result = await restoreVersion(collectionKey, recordId, restoreTargetId, asDraft)
+		isRestoring = false
+		restoreModalOpen = false
+		if (result.ok) {
+			toast.success('Version restored')
+			await goto(resolve(`/${collectionKey}/${recordId}`))
+		} else {
+			toast.error(result.error)
+		}
+	}
+
+	function handlePageChange(p: number) {
+		loadVersions(p)
+	}
+</script>
+
+{#if !collection}
+	<div class="flex h-full items-center justify-center">
+		<p class="text-muted-foreground">Collection not found</p>
+	</div>
+{:else if isLoading}
+	<div class="flex h-full items-center justify-center">
+		<div class="flex flex-col items-center gap-3">
+			<div class="h-6 w-6 rounded-full border-2 border-primary/20 border-t-primary animate-spin-slow"></div>
+			<p class="text-sm text-muted-foreground">Loading...</p>
+		</div>
+	</div>
+{:else}
+	<div class="space-y-5">
+		<!-- Breadcrumb -->
+		<nav class="flex items-center gap-1.5 text-sm text-muted-foreground">
+			<a href={resolve(`/${collectionKey}`)} class="hover:text-foreground">{collection.labelPlural || collection.label}</a>
+			<span>/</span>
+			<a href={resolve(`/${collectionKey}/${recordId}`)} class="hover:text-foreground">{recordId}</a>
+			<span>/</span>
+			<span class="text-foreground font-medium">Versions</span>
+		</nav>
+
+		<h1 class="text-xl font-semibold text-foreground">Version History</h1>
+
+		{#if versions.length === 0}
+			<div class="flex flex-col items-center justify-center py-16">
+				<p class="text-sm text-muted-foreground">No versions found</p>
+			</div>
+		{:else}
+			<Pagination
+				page={currentPage}
+				{totalPages}
+				{totalRecords}
+				{perPage}
+				onPageChange={handlePageChange}
+				class="border-b border-border/60"
+			/>
+
+			<div class="overflow-x-auto rounded-lg border border-border/80 bg-card shadow-sm">
+				<table class="w-full text-sm">
+					<thead>
+						<tr class="border-b border-border/60 bg-secondary/40">
+							<th class="px-4 py-2.5 text-left font-medium text-muted-foreground">Date</th>
+							<th class="px-4 py-2.5 text-left font-medium text-muted-foreground">Status</th>
+							<th class="px-4 py-2.5 text-left font-medium text-muted-foreground">Age</th>
+							<th class="px-4 py-2.5 text-right font-medium text-muted-foreground">Actions</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each versions as v (v.id)}
+							<tr class="border-b border-border/40 transition-colors hover:bg-secondary/30">
+								<td class="px-4 py-2.5">
+									<a
+										href={resolve(`/${collectionKey}/${recordId}/versions/${v.id}`)}
+										class="text-primary hover:underline"
+									>
+										{formatDate(v.createdAt)}
+									</a>
+								</td>
+								<td class="px-4 py-2.5">
+									<StatusPill
+										status={v._status ?? ''}
+										isLatest={v.id === latestPublishedId || v.id === latestDraftId}
+									/>
+								</td>
+								<td class="px-4 py-2.5 text-muted-foreground">
+									{timeAgo(v.createdAt)}
+								</td>
+								<td class="px-4 py-2.5 text-right">
+									<button
+										type="button"
+										class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+										title="Restore this version"
+										onclick={() => openRestore(v.id)}
+									>
+										<RotateCcw class="h-4 w-4" />
+									</button>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<Pagination
+				page={currentPage}
+				{totalPages}
+				{totalRecords}
+				{perPage}
+				onPageChange={handlePageChange}
+			/>
+		{/if}
+	</div>
+
+	<RestoreModal
+		bind:open={restoreModalOpen}
+		{hasDrafts}
+		{isRestoring}
+		onRestore={handleRestore}
+	/>
+{/if}

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "types": ["svelte", "vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["src/lib"],
+      "$lib/*": ["src/lib/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,80 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig, type Plugin } from 'vite'
+import { resolve } from 'node:path'
+
+/**
+ * Svelte 5 SPA — NOT SvelteKit.
+ *
+ * This config is used for @quoin-cms/admin's own standalone `pnpm dev` / `pnpm
+ * build` during LIBRARY development (contributors iterating on admin source
+ * without a real consumer). Consumer projects use @quoin-cms/cli, which wraps
+ * Vite with its own quoinPlugin that injects consumer-owned config +
+ * override components.
+ *
+ * Here we provide stub versions of the two virtual modules so `main.ts`
+ * imports resolve to a minimal working config.
+ */
+
+function stubVirtualModulesPlugin(): Plugin {
+	const CONFIG_ID = 'virtual:quoin-config'
+	const IMPORT_MAP_ID = 'virtual:quoin-import-map'
+	const resolvedConfig = '\0' + CONFIG_ID
+	const resolvedImportMap = '\0' + IMPORT_MAP_ID
+
+	return {
+		name: 'quoin:stub-virtual-modules',
+		resolveId(id) {
+			if (id === CONFIG_ID) return resolvedConfig
+			if (id === IMPORT_MAP_ID) return resolvedImportMap
+			return null
+		},
+		load(id) {
+			if (id === resolvedConfig) {
+				return `export default ${JSON.stringify(
+					{
+						apiBase: '/api',
+						basePath: '/admin',
+						buildOutDir: './dist',
+						devPort: 5173,
+						brand: { name: 'Quoin', logo: null },
+						fields: {},
+						slots: {},
+						views: {},
+						pages: {},
+					},
+					null,
+					2,
+				)};`
+			}
+			if (id === resolvedImportMap) {
+				return 'export default {};'
+			}
+			return null
+		},
+	}
+}
+
+export default defineConfig({
+	plugins: [tailwindcss(), svelte(), stubVirtualModulesPlugin()],
+	resolve: {
+		alias: {
+			$lib: resolve(__dirname, 'src/lib'),
+		},
+		dedupe: ['svelte', 'lexical', 'svelte-lexical', '@tanstack/svelte-query'],
+	},
+	optimizeDeps: {
+		include: ['lexical', 'svelte-lexical', '@tanstack/svelte-query'],
+	},
+	base: '/admin/',
+	build: {
+		outDir: 'dist',
+		emptyOutDir: true,
+	},
+	server: {
+		port: 5173,
+		proxy: {
+			'/api': 'http://localhost:8090',
+		},
+	},
+})