@quoin-cms/admin 0.1.0

package/src/views/LoginView.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+import { goto } from '$lib/router/index.svelte.js'
+import { resolve } from '$lib/router/index.svelte.js'
+import { login, register, getMe, getSetupStatus } from '$lib/api/auth.js'
+import { toast } from 'svelte-sonner'
+import { onMount } from 'svelte'
+import { BookOpen } from 'lucide-svelte'
+import { branding, loadBranding } from '$lib/stores/branding.svelte.js'
+import Slot from '$lib/Slot.svelte'
+
+let email = $state('')
+let password = $state('')
+let confirmPassword = $state('')
+let isSetup = $state(false)
+let isLoading = $state(false)
+let isCheckingAuth = $state(true)
+
+onMount(async () => {
+	loadBranding()
+	const result = await getMe()
+	if (result.ok) {
+		await goto(resolve('/'))
+		return
+	}
+	const status = await getSetupStatus()
+	if (status.ok && status.data.needsSetup) {
+		isSetup = true
+	}
+	isCheckingAuth = false
+})
+
+async function handleLogin() {
+	if (!email || !password) {
+		toast.error('Please enter email and password')
+		return
+	}
+
+	isLoading = true
+	const result = await login(email, password)
+	isLoading = false
+
+	if (result.ok) {
+		await goto(resolve('/'))
+	} else {
+		if (result.status === 401) {
+			toast.error('Invalid credentials')
+		} else {
+			toast.error(result.error)
+		}
+	}
+}
+
+async function handleSetup() {
+	if (!email || !password) {
+		toast.error('Please enter email and password')
+		return
+	}
+	if (password !== confirmPassword) {
+		toast.error('Passwords do not match')
+		return
+	}
+	if (password.length < 6) {
+		toast.error('Password must be at least 6 characters')
+		return
+	}
+
+	isLoading = true
+	const result = await register(email, password)
+	isLoading = false
+
+	if (result.ok) {
+		toast.success('Admin account created! Logging in...')
+		const loginResult = await login(email, password)
+		if (loginResult.ok) {
+			await goto(resolve('/'))
+		} else {
+			toast.error('Account created but login failed. Please try logging in.')
+			isSetup = false
+		}
+	} else {
+		toast.error(result.error)
+	}
+}
+
+function toggleMode() {
+	isSetup = !isSetup
+	confirmPassword = ''
+}
+</script>
+
+{#if isCheckingAuth}
+  <div class="flex h-screen items-center justify-center bg-background">
+    <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
+      <BookOpen class="h-5 w-5 text-primary animate-spin-slow" />
+    </div>
+  </div>
+{:else}
+  <div class="flex min-h-screen">
+    <!-- Left panel — decorative -->
+    <div class="relative hidden w-1/2 overflow-hidden bg-sidebar-background lg:flex lg:flex-col lg:items-center lg:justify-center">
+      <!-- Subtle pattern overlay -->
+      <div class="absolute inset-0 opacity-[0.03]" style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 32px 32px;"></div>
+
+      <div class="relative z-10 max-w-md px-12 text-center">
+        <div class="mb-8 flex justify-center">
+          <Slot name="branding.logo" siteName={branding.siteName} logoUrl={branding.logoUrl}>
+            {#snippet children()}
+              {#if branding.logoUrl}
+                <img src={branding.logoUrl} alt={branding.siteName} class="h-20 w-auto max-w-[280px] object-contain" />
+              {:else}
+                <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-sidebar-accent">
+                  <BookOpen class="h-8 w-8 text-sidebar-accent-foreground" />
+                </div>
+              {/if}
+            {/snippet}
+          </Slot>
+        </div>
+        {#if !branding.logoUrl}
+          <h1 class="text-3xl font-semibold tracking-tight text-white" style="font-family: var(--font-display);">
+            {branding.siteName}
+          </h1>
+        {/if}
+        <!-- Consumer-overridable tagline. Library default: site name + "Admin". -->
+        <Slot name="login.tagline">
+          {#snippet children()}
+            <p class="mt-3 text-base leading-relaxed text-sidebar-foreground/70" style="font-family: var(--font-display); font-style: italic;">
+              {branding.siteName} Admin
+            </p>
+          {/snippet}
+        </Slot>
+        <div class="mx-auto mt-8 h-px w-16 bg-sidebar-accent/40"></div>
+      </div>
+    </div>
+
+    <!-- Right panel — form -->
+    <div class="flex flex-1 items-center justify-center bg-background p-6">
+      <div class="w-full max-w-sm">
+        <!-- Mobile logo -->
+        <div class="mb-8 flex flex-col items-center lg:hidden">
+          {#if branding.logoUrl}
+            <img src={branding.logoUrl} alt={branding.siteName} class="h-14 w-auto max-w-[220px] object-contain" />
+          {:else}
+            <div class="mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10">
+              <BookOpen class="h-6 w-6 text-primary" />
+            </div>
+            <h1 class="text-xl font-semibold" style="font-family: var(--font-display);">{branding.siteName}</h1>
+          {/if}
+        </div>
+
+        <div class="mb-8">
+          <h2 class="text-xl font-semibold tracking-tight" style="font-family: var(--font-display);">
+            {isSetup ? 'Create your account' : 'Sign in'}
+          </h2>
+          <p class="mt-1.5 text-sm text-muted-foreground">
+            {isSetup ? 'Set up the first admin account to get started.' : 'Enter your credentials to continue.'}
+          </p>
+        </div>
+
+        <form
+          onsubmit={(e) => {
+            e.preventDefault();
+            isSetup ? handleSetup() : handleLogin();
+          }}
+          class="space-y-5"
+        >
+          <div>
+            <label for="email" class="mb-2 block text-[13px] font-medium text-foreground">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              bind:value={email}
+              class="h-11 w-full rounded-lg border border-border bg-card px-3.5 text-sm shadow-sm transition-all placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"
+              placeholder="you@example.com"
+              autocomplete="email"
+            />
+          </div>
+
+          <div>
+            <label for="password" class="mb-2 block text-[13px] font-medium text-foreground">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              bind:value={password}
+              class="h-11 w-full rounded-lg border border-border bg-card px-3.5 text-sm shadow-sm transition-all placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"
+              placeholder="Enter password"
+              autocomplete={isSetup ? 'new-password' : 'current-password'}
+            />
+          </div>
+
+          {#if isSetup}
+            <div>
+              <label for="confirmPassword" class="mb-2 block text-[13px] font-medium text-foreground">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                type="password"
+                bind:value={confirmPassword}
+                class="h-11 w-full rounded-lg border border-border bg-card px-3.5 text-sm shadow-sm transition-all placeholder:text-muted-foreground/50 focus:border-primary/40 focus:outline-none focus:ring-2 focus:ring-primary/10"
+                placeholder="Confirm password"
+                autocomplete="new-password"
+              />
+            </div>
+          {/if}
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            class="h-11 w-full rounded-lg bg-primary text-sm font-medium text-primary-foreground shadow-sm transition-all hover:bg-primary/90 hover:shadow-md active:scale-[0.99] disabled:opacity-50 disabled:shadow-none"
+          >
+            {isLoading ? 'Please wait...' : isSetup ? 'Create Account' : 'Sign In'}
+          </button>
+        </form>
+
+        <div class="mt-6 text-center">
+          <button
+            type="button"
+            onclick={toggleMode}
+            class="text-[13px] text-muted-foreground transition-colors hover:text-primary"
+          >
+            {isSetup ? 'Already have an account? Sign in' : 'First time? Create admin account'}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

package/src/views/NotFoundView.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { resolve } from '$lib/router/index.svelte.js'
+</script>
+
+<div class="flex h-[60vh] flex-col items-center justify-center gap-2 text-center">
+	<h1 class="text-2xl font-semibold">Page not found</h1>
+	<p class="text-muted-foreground">The admin URL you followed doesn't match any known route.</p>
+	<a class="text-primary underline mt-2" href={resolve('/')}>Back to dashboard</a>
+</div>

package/src/views/VersionDetailView.svelte

@@ -0,0 +1,307 @@
+<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, getVersion, restoreVersion } from '$lib/api/versions.js'
+	import type { Version } from '$lib/api/versions.js'
+	import FieldDiff from '$lib/components/versions/FieldDiff.svelte'
+	import StatusPill from '$lib/components/versions/StatusPill.svelte'
+	import CompareSelector from '$lib/components/versions/CompareSelector.svelte'
+	import type { VersionOption } from '$lib/components/versions/CompareSelector.svelte'
+	import RestoreModal from '$lib/components/versions/RestoreModal.svelte'
+	import { toast } from 'svelte-sonner'
+	import { onMount } from 'svelte'
+
+	let collectionKey = $derived(page.params.collection ?? '')
+	let recordId = $derived(page.params.id ?? '')
+	let versionId = $derived(page.params.vid ?? '')
+	let collection = $derived(getCollectionByKey(schema.collections, collectionKey))
+
+	let allVersions = $state<Version[]>([])
+	let currentVersion = $state<Version | null>(null)
+	let compareVersion = $state<Version | null>(null)
+	let isLoading = $state(true)
+	let modifiedOnly = $state(true)
+
+	let restoreModalOpen = $state(false)
+	let isRestoring = $state(false)
+
+	let hasDrafts = $derived(collection?.versions?.drafts != null)
+
+	let currentData = $derived(parseData(currentVersion))
+	let compareData = $derived(parseData(compareVersion))
+
+	const systemFields = ['id', 'createdAt', 'updatedAt', '_versionId', '_versionCreatedAt']
+
+	function flattenFields(flds: any[]): any[] {
+		const out: any[] = []
+		for (const f of flds) {
+			if (f.type === 'tabs') {
+				for (const t of (f.tabs ?? [])) out.push(...flattenFields(t.fields ?? []))
+				continue
+			}
+			out.push(f)
+		}
+		return out
+	}
+
+	let fields = $derived.by(() => {
+		if (!collection) return []
+		return flattenFields(collection.fields).filter(
+			(f: any) => !f.hidden && !systemFields.includes(f.name)
+		)
+	})
+
+	let visibleFields = $derived.by(() => {
+		if (!modifiedOnly) return fields
+		return fields.filter((f: any) => {
+			const oldVal = compareData[f.name]
+			const newVal = currentData[f.name]
+			return JSON.stringify(oldVal) !== JSON.stringify(newVal)
+		})
+	})
+
+	let latestPublishedId = $derived.by(() => {
+		const v = allVersions.find((v) => v._status === 'published' && v.latest)
+		return v?.id ?? allVersions.find((v) => v._status === 'published')?.id ?? ''
+	})
+
+	let latestDraftId = $derived.by(() => {
+		const v = allVersions.find((v) => v._status === 'draft' && v.latest)
+		return v?.id ?? ''
+	})
+
+	let compareOptions = $derived.by((): VersionOption[] => {
+		const firstPublished = allVersions.find((v) => v._status === 'published')
+		let defaultMarked = false
+		return allVersions
+			.filter((v) => v.id !== versionId)
+			.map((v) => {
+				let label: string
+				if (v.latest && v._status === 'draft') {
+					label = 'Current Draft'
+				} else if (v._status === 'published' && v.id === firstPublished?.id) {
+					label = 'Currently Published'
+				} else if (v._status === 'published') {
+					label = 'Previously Published'
+				} else if (!defaultMarked) {
+					label = 'Previous Version'
+					defaultMarked = true
+				} else {
+					label = 'Version'
+				}
+				return {
+					id: v.id,
+					label,
+					status: v._status,
+					isLatest: v.id === latestPublishedId || v.id === latestDraftId,
+					date: v.createdAt,
+				}
+			})
+	})
+
+	function parseData(v: Version | null): Record<string, any> {
+		if (!v) return {}
+		const raw = v.version
+		if (!raw) return {}
+		if (typeof raw === 'string') {
+			try { return JSON.parse(raw) } catch { return {} }
+		}
+		if (typeof raw === 'object') return raw
+		return {}
+	}
+
+	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`
+	}
+
+	async function loadCompare(id: string) {
+		const result = await getVersion(collectionKey, recordId, id)
+		if (result.ok) {
+			compareVersion = result.data
+		} else {
+			toast.error(result.error)
+		}
+	}
+
+	function handleCompareChange(id: string) {
+		loadCompare(id)
+	}
+
+	onMount(async () => {
+		const [listResult, versionResult] = await Promise.all([
+			listVersions(collectionKey, recordId, { page: 1, limit: 50 }),
+			getVersion(collectionKey, recordId, versionId),
+		])
+
+		if (!listResult.ok) {
+			isLoading = false
+			toast.error(listResult.error)
+			return
+		}
+		if (!versionResult.ok) {
+			isLoading = false
+			toast.error(versionResult.error)
+			return
+		}
+
+		allVersions = listResult.data.versions ?? []
+		currentVersion = versionResult.data
+
+		// Find next older version for default compare
+		const idx = allVersions.findIndex((v) => v.id === versionId)
+		const defaultCompare = idx >= 0 && idx < allVersions.length - 1
+			? allVersions[idx + 1]
+			: allVersions.find((v) => v.id !== versionId)
+
+		if (defaultCompare) {
+			await loadCompare(defaultCompare.id)
+		}
+
+		isLoading = false
+	})
+
+	async function handleRestore(asDraft: boolean) {
+		isRestoring = true
+		const result = await restoreVersion(collectionKey, recordId, versionId, asDraft)
+		isRestoring = false
+		restoreModalOpen = false
+		if (result.ok) {
+			toast.success('Version restored')
+			await goto(resolve(`/${collectionKey}/${recordId}`))
+		} else {
+			toast.error(result.error)
+		}
+	}
+</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 if !currentVersion}
+	<div class="flex h-full items-center justify-center">
+		<p class="text-muted-foreground">Version not found</p>
+	</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>
+			<a href={resolve(`/${collectionKey}/${recordId}/versions`)} class="hover:text-foreground">Versions</a>
+			<span>/</span>
+			<span class="text-foreground font-medium">{formatDate(currentVersion.createdAt)}</span>
+		</nav>
+
+		<!-- Header -->
+		<div class="flex items-center justify-between">
+			<h1 class="text-xl font-semibold text-foreground">Compare Versions</h1>
+			<label class="flex items-center gap-2 text-sm text-muted-foreground">
+				<input type="checkbox" bind:checked={modifiedOnly} class="rounded" />
+				Modified fields only
+			</label>
+		</div>
+
+		<!-- Comparison Control Bar -->
+		<div class="grid grid-cols-[1fr_auto_1fr] gap-0 rounded-lg border border-border/80 bg-card shadow-sm">
+			<!-- Left: comparing against -->
+			<div class="p-4 space-y-2">
+				<span class="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">Comparing Against</span>
+				{#if compareVersion}
+					<div class="flex flex-wrap items-center gap-2">
+						<CompareSelector
+							options={compareOptions}
+							selected={compareVersion.id}
+							onChange={handleCompareChange}
+						/>
+						<StatusPill
+							status={compareVersion._status ?? ''}
+							isLatest={compareVersion.id === latestPublishedId || compareVersion.id === latestDraftId}
+						/>
+					</div>
+					<p class="text-xs text-muted-foreground">{timeAgo(compareVersion.createdAt)}</p>
+				{:else}
+					<p class="text-xs text-muted-foreground">No other version to compare</p>
+				{/if}
+			</div>
+
+			<!-- Divider -->
+			<div class="w-px self-stretch bg-border/60"></div>
+
+			<!-- Right: currently viewing -->
+			<div class="p-4 space-y-2">
+				<span class="text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">Currently Viewing</span>
+				<div class="flex flex-wrap items-center gap-2">
+					<span class="text-sm font-medium text-foreground">{formatDate(currentVersion.createdAt)}</span>
+					<StatusPill
+						status={currentVersion._status ?? ''}
+						isLatest={currentVersion.id === latestPublishedId || currentVersion.id === latestDraftId}
+					/>
+				</div>
+				<div class="flex items-center gap-3">
+					<p class="text-xs text-muted-foreground">{timeAgo(currentVersion.createdAt)}</p>
+					<button
+						type="button"
+						class="text-xs font-medium text-primary hover:underline"
+						onclick={() => (restoreModalOpen = true)}
+					>
+						Restore this version
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Field Diffs -->
+		{#if visibleFields.length === 0}
+			<div class="flex flex-col items-center justify-center py-12">
+				<p class="text-sm text-muted-foreground">
+					{modifiedOnly ? 'No modified fields' : 'No fields to display'}
+				</p>
+			</div>
+		{:else}
+			<div class="overflow-hidden rounded-lg border border-border/80 bg-card shadow-sm">
+				{#each visibleFields as field (field.name)}
+					<FieldDiff
+						fieldName={field.name}
+						fieldLabel={field.label}
+						fieldType={field.type}
+						oldValue={compareData[field.name]}
+						newValue={currentData[field.name]}
+					/>
+				{/each}
+			</div>
+		{/if}
+	</div>
+
+	<RestoreModal
+		bind:open={restoreModalOpen}
+		{hasDrafts}
+		{isRestoring}
+		onRestore={handleRestore}
+	/>
+{/if}