@quoin-cms/admin 0.1.0

package/src/lib/components/MediaLibrary.svelte

@@ -0,0 +1,311 @@
+<script lang="ts">
+import { listRecords } from '$lib/api/records.js';
+import { uploadFile } from '$lib/api/files.js';
+import { createRecord } from '$lib/api/records.js';
+import { formatFileSize } from '$lib/utils/format.js';
+import { X, Upload, Search, FolderOpen, FileText } from 'lucide-svelte';
+
+interface MediaItem {
+	url: string;
+	alt: string;
+	filename: string;
+	mimeType: string;
+	size: number;
+}
+
+let {
+	open = $bindable(false),
+	accept = ['image/*'],
+	onSelect,
+}: {
+	open: boolean;
+	accept?: string[];
+	onSelect: (media: MediaItem) => void;
+} = $props();
+
+let items = $state<any[]>([]);
+let folders = $state<any[]>([]);
+let search = $state('');
+let selectedFolder = $state<string | null>(null);
+let isLoading = $state(false);
+let isUploading = $state(false);
+let totalDocs = $state(0);
+let totalPages = $state(0);
+let page = $state(1);
+let fileInput: HTMLInputElement;
+let searchTimeout: ReturnType<typeof setTimeout>;
+
+async function loadMedia() {
+	isLoading = true;
+	const params: Record<string, any> = {
+		perPage: 24,
+		sort: '-createdAt',
+		page,
+	};
+	if (search) {
+		params.search = search;
+	}
+	if (selectedFolder) {
+		params.filter = `folder="${selectedFolder}"`;
+	}
+	const result = await listRecords('media', params);
+	if (result.ok) {
+		items = result.data.records;
+		totalDocs = result.data.totalRecords;
+		totalPages = result.data.totalPages;
+	}
+	isLoading = false;
+}
+
+async function loadFolders() {
+	const result = await listRecords('media_folders', { perPage: 100, sort: 'name' });
+	if (result.ok) {
+		folders = result.data.records;
+	}
+}
+
+function handleSelect(item: any) {
+	const media: MediaItem = {
+		url: item.file?.url || item.url || '',
+		alt: item.alt || '',
+		filename: item.filename || item.file?.filename || '',
+		mimeType: item.mimeType || item.file?.mimeType || '',
+		size: item.size || item.file?.size || 0,
+	};
+	onSelect(media);
+	open = false;
+}
+
+async function handleUpload(e: Event) {
+	const target = e.target as HTMLInputElement;
+	const files = target.files;
+	if (!files?.length) return;
+
+	isUploading = true;
+	for (const file of files) {
+		// uploadFile (POST /api/upload/media) already creates the media record
+		// with auto-injected metadata (url, filename, mimeType, size, width, height).
+		// Don't double-create here.
+		await uploadFile(file);
+	}
+	isUploading = false;
+	target.value = '';
+	await loadMedia();
+}
+
+function handleSearchInput(e: Event) {
+	const val = (e.target as HTMLInputElement).value;
+	search = val;
+	clearTimeout(searchTimeout);
+	searchTimeout = setTimeout(() => {
+		page = 1;
+		loadMedia();
+	}, 300);
+}
+
+function selectFolder(folderId: string | null) {
+	selectedFolder = folderId;
+	page = 1;
+	loadMedia();
+}
+
+function prevPage() {
+	if (page > 1) {
+		page--;
+		loadMedia();
+	}
+}
+
+function nextPage() {
+	if (page < totalPages) {
+		page++;
+		loadMedia();
+	}
+}
+
+function close() {
+	open = false;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === 'Escape') close();
+}
+
+function isImage(mimeType: string): boolean {
+	return mimeType?.startsWith('image/') ?? false;
+}
+
+function getThumbnailUrl(item: any): string {
+	return item.file?.url || item.url || '';
+}
+
+$effect(() => {
+	if (open) {
+		page = 1;
+		search = '';
+		selectedFolder = null;
+		loadMedia();
+		loadFolders();
+	}
+});
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+		onclick={(e) => { if (e.target === e.currentTarget) close(); }}
+	>
+		<div class="flex h-[85vh] w-full max-w-5xl flex-col rounded-lg border bg-background shadow-xl">
+			<!-- Header -->
+			<div class="flex items-center justify-between border-b px-4 py-3">
+				<h2 class="text-lg font-semibold">Media Library</h2>
+				<div class="flex items-center gap-2">
+					<button
+						type="button"
+						onclick={() => fileInput.click()}
+						disabled={isUploading}
+						class="inline-flex h-9 items-center gap-2 rounded-md bg-primary px-3 text-sm text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+					>
+						<Upload class="h-4 w-4" />
+						{isUploading ? 'Uploading...' : 'Upload New'}
+					</button>
+					<button
+						type="button"
+						onclick={close}
+						class="rounded p-1.5 hover:bg-accent"
+					>
+						<X class="h-5 w-5" />
+					</button>
+				</div>
+			</div>
+
+			<!-- Search bar -->
+			<div class="border-b px-4 py-2">
+				<div class="relative">
+					<Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+					<input
+						type="text"
+						placeholder="Search media..."
+						value={search}
+						oninput={handleSearchInput}
+						class="h-9 w-full rounded-md border bg-background pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+					/>
+				</div>
+			</div>
+
+			<!-- Body: sidebar + grid -->
+			<div class="flex flex-1 overflow-hidden">
+				<!-- Folder sidebar -->
+				{#if folders.length > 0}
+					<div class="w-48 shrink-0 overflow-y-auto border-r p-2">
+						<button
+							type="button"
+							class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm {selectedFolder === null ? 'bg-accent font-medium' : 'hover:bg-accent'}"
+							onclick={() => selectFolder(null)}
+						>
+							<FolderOpen class="h-4 w-4" />
+							All Media
+						</button>
+						{#each folders as folder}
+							<button
+								type="button"
+								class="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm {selectedFolder === folder.id ? 'bg-accent font-medium' : 'hover:bg-accent'}"
+								onclick={() => selectFolder(folder.id)}
+							>
+								<FolderOpen class="h-4 w-4" />
+								{folder.name || folder.title || 'Untitled'}
+							</button>
+						{/each}
+					</div>
+				{/if}
+
+				<!-- Grid area -->
+				<div class="flex-1 overflow-y-auto p-4">
+					{#if isLoading}
+						<div class="flex h-full items-center justify-center">
+							<p class="text-sm text-muted-foreground">Loading...</p>
+						</div>
+					{:else if items.length === 0}
+						<div class="flex h-full flex-col items-center justify-center gap-2">
+							<p class="text-sm text-muted-foreground">No media found</p>
+							<button
+								type="button"
+								onclick={() => fileInput.click()}
+								class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm hover:bg-accent"
+							>
+								<Upload class="h-4 w-4" />
+								Upload a file
+							</button>
+						</div>
+					{:else}
+						<div class="grid grid-cols-2 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+							{#each items as item}
+								<button
+									type="button"
+									class="group flex flex-col overflow-hidden rounded-md border hover:border-primary hover:shadow-sm transition-all"
+									onclick={() => handleSelect(item)}
+								>
+									<div class="aspect-square w-full overflow-hidden bg-muted">
+										{#if isImage(item.mimeType || item.file?.mimeType || '')}
+											<img
+												src={getThumbnailUrl(item)}
+												alt={item.alt || item.filename || ''}
+												class="h-full w-full object-cover group-hover:scale-105 transition-transform"
+											/>
+										{:else}
+											<div class="flex h-full w-full items-center justify-center">
+												<FileText class="h-10 w-10 text-muted-foreground" />
+											</div>
+										{/if}
+									</div>
+									<div class="p-2">
+										<p class="truncate text-xs font-medium">{item.title || item.filename || 'Untitled'}</p>
+										<p class="text-xs text-muted-foreground">{formatFileSize(item.size || item.file?.size || 0)}</p>
+									</div>
+								</button>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</div>
+
+			<!-- Pagination -->
+			{#if totalPages > 1}
+				<div class="flex items-center justify-between border-t px-4 py-2">
+					<p class="text-xs text-muted-foreground">{totalDocs} items</p>
+					<div class="flex items-center gap-2">
+						<button
+							type="button"
+							disabled={page <= 1}
+							onclick={prevPage}
+							class="rounded-md border px-3 py-1 text-sm hover:bg-accent disabled:opacity-50"
+						>
+							Previous
+						</button>
+						<span class="text-sm">Page {page} of {totalPages}</span>
+						<button
+							type="button"
+							disabled={page >= totalPages}
+							onclick={nextPage}
+							class="rounded-md border px-3 py-1 text-sm hover:bg-accent disabled:opacity-50"
+						>
+							Next
+						</button>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<input
+		bind:this={fileInput}
+		type="file"
+		class="hidden"
+		onchange={handleUpload}
+		accept={accept.join(',')}
+	/>
+{/if}

package/src/lib/components/Pagination.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+import { ChevronLeft, ChevronRight } from 'lucide-svelte'
+
+let {
+	page = 1,
+	totalPages = 1,
+	totalRecords = 0,
+	perPage = 20,
+	onPageChange,
+	class: className = 'border-t border-border/60',
+}: {
+	page: number
+	totalPages: number
+	totalRecords: number
+	perPage: number
+	onPageChange: (page: number) => void
+	class?: string
+} = $props()
+
+let startRecord = $derived((page - 1) * perPage + 1)
+let endRecord = $derived(Math.min(page * perPage, totalRecords))
+</script>
+
+{#if totalPages > 1}
+  <div class="flex items-center justify-between px-1 py-3 {className}">
+    <p class="text-[13px] text-muted-foreground">
+      <span class="font-medium text-foreground">{startRecord}-{endRecord}</span> of {totalRecords}
+    </p>
+    <div class="flex items-center gap-1.5">
+      <button
+        disabled={page <= 1}
+        onclick={() => onPageChange(page - 1)}
+        class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border/60 bg-card text-sm shadow-sm transition-all hover:bg-secondary disabled:opacity-40 disabled:shadow-none"
+      >
+        <ChevronLeft class="h-4 w-4" />
+      </button>
+
+      {#each Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
+        if (totalPages <= 7) return i + 1;
+        if (i === 0) return 1;
+        if (i === 6) return totalPages;
+        if (page <= 3) {
+          if (i === 5) return -1;
+          return i + 1;
+        }
+        if (page >= totalPages - 2) {
+          if (i === 1) return -1;
+          return totalPages - 5 + i;
+        }
+        if (i === 1) return -1;
+        if (i === 5) return -1;
+        return page - 3 + i;
+      }) as p}
+        {#if p === -1}
+          <span class="px-1 text-xs text-muted-foreground/50">...</span>
+        {:else}
+          <button
+            onclick={() => onPageChange(p)}
+            class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-[13px] transition-all
+              {p === page
+                ? 'bg-primary font-medium text-primary-foreground shadow-sm'
+                : 'border border-border/60 bg-card shadow-sm hover:bg-secondary'}"
+          >
+            {p}
+          </button>
+        {/if}
+      {/each}
+
+      <button
+        disabled={page >= totalPages}
+        onclick={() => onPageChange(page + 1)}
+        class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border/60 bg-card text-sm shadow-sm transition-all hover:bg-secondary disabled:opacity-40 disabled:shadow-none"
+      >
+        <ChevronRight class="h-4 w-4" />
+      </button>
+    </div>
+  </div>
+{/if}

package/src/lib/components/RangeFilter.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+type Range = '24h' | '7d' | '30d'
+
+let {
+	value = $bindable<Range>('7d'),
+}: {
+	value?: Range
+} = $props()
+
+const options: Range[] = ['24h', '7d', '30d']
+
+// Read persisted choice on mount.
+$effect(() => {
+	if (typeof localStorage === 'undefined') return
+	const stored = localStorage.getItem('dashboard.range')
+	if (stored === '24h' || stored === '7d' || stored === '30d') {
+		value = stored
+	}
+})
+
+function select(next: Range) {
+	value = next
+	if (typeof localStorage !== 'undefined') {
+		localStorage.setItem('dashboard.range', next)
+	}
+}
+</script>
+
+<div class="inline-flex items-center gap-1 rounded-lg border border-border/60 bg-card p-1 shadow-sm">
+	{#each options as opt (opt)}
+		<button
+			type="button"
+			onclick={() => select(opt)}
+			class="rounded-md px-3 py-1 text-sm font-medium transition-colors {value === opt
+				? 'bg-primary text-primary-foreground shadow-sm'
+				: 'bg-transparent text-foreground hover:bg-secondary'}"
+		>
+			{opt}
+		</button>
+	{/each}
+</div>

package/src/lib/components/RecordGrid.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+import { resolve } from '$lib/router/index.svelte.js'
+import type { CollectionSchema, FieldSchema } from '$lib/types/schema.js'
+import { Trash2, FileText } from 'lucide-svelte'
+
+let {
+	collection,
+	records,
+	onDelete,
+}: {
+	collection: CollectionSchema
+	records: Record<string, any>[]
+	onDelete: (id: string) => void
+} = $props()
+
+function flatten(flds: FieldSchema[]): FieldSchema[] {
+	const out: FieldSchema[] = []
+	for (const f of flds) {
+		if ((f as any).type === 'tabs') {
+			for (const t of ((f as any).tabs ?? [])) out.push(...flatten(t.fields ?? []))
+			continue
+		}
+		if ((f as any).type === 'row') {
+			out.push(...flatten((f as any).fields ?? []))
+			continue
+		}
+		out.push(f)
+	}
+	return out
+}
+let flatFields = $derived(flatten(collection.fields))
+
+// First file/upload field drives the thumbnail
+let fileField = $derived(flatFields.find((f: any) => f.type === 'file' || f.type === 'upload'))
+let titleField = $derived(collection.admin?.useAsTitle || flatFields[0]?.name || 'id')
+
+function parseFileValue(raw: any): { url?: string; mimeType?: string; filename?: string } | null {
+	if (!raw) return null
+	let v = raw
+	if (typeof v === 'string') {
+		if (v.startsWith('{')) {
+			try { v = JSON.parse(v) } catch { return null }
+		} else {
+			return { url: v }
+		}
+	}
+	if (typeof v === 'object' && v !== null) return v
+	return null
+}
+
+function getThumbUrl(record: Record<string, any>): string | null {
+	// Upload collections expose url/mimeType as auto-injected top-level fields.
+	if (typeof record.url === 'string' && record.url) {
+		const mt = typeof record.mimeType === 'string' ? record.mimeType : ''
+		if (mt && !mt.startsWith('image/')) return null
+		return record.url
+	}
+	if (!fileField) return null
+	const parsed = parseFileValue(record[fileField.name])
+	if (!parsed?.url) return null
+	if (parsed.mimeType && !parsed.mimeType.startsWith('image/')) return null
+	return parsed.url
+}
+
+function getTitle(record: Record<string, any>): string {
+	const v = record[titleField]
+	if (v && typeof v === 'string') return v
+	if (v && typeof v === 'object' && 'filename' in v) return v.filename
+	return record.id || 'Untitled'
+}
+
+function handleDelete(e: Event, id: string) {
+	e.stopPropagation()
+	onDelete(id)
+}
+</script>
+
+{#if records.length === 0}
+  <div class="rounded-lg border border-dashed border-border/60 bg-card py-16 text-center text-sm text-muted-foreground">
+    No records yet
+  </div>
+{:else}
+  <div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
+    {#each records as record (record.id)}
+      {@const thumbUrl = getThumbUrl(record)}
+      {@const title = getTitle(record)}
+      <div
+        class="group relative flex flex-col overflow-hidden rounded-lg border border-border/80 bg-card text-left shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
+      >
+        <a
+          href={resolve(`/${collection.key}/${record.id}`)}
+          class="flex flex-col"
+        >
+          <div class="relative aspect-square w-full overflow-hidden bg-muted">
+            {#if thumbUrl}
+              <img
+                src={thumbUrl}
+                alt={title}
+                class="h-full w-full object-cover transition-transform group-hover:scale-105"
+                loading="lazy"
+              />
+            {:else}
+              <div class="flex h-full w-full items-center justify-center">
+                <FileText class="h-10 w-10 text-muted-foreground/40" />
+              </div>
+            {/if}
+          </div>
+          <div class="px-3 py-2">
+            <p class="truncate text-xs font-medium text-foreground">{title}</p>
+          </div>
+        </a>
+        <button
+          type="button"
+          onclick={(e) => handleDelete(e, record.id)}
+          class="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-md bg-background/90 text-destructive opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-destructive hover:text-white group-hover:opacity-100"
+          title="Delete"
+        >
+          <Trash2 class="h-3.5 w-3.5" />
+        </button>
+      </div>
+    {/each}
+  </div>
+{/if}