@quoin-cms/admin 0.2.0 → 0.3.0

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@quoin-cms/admin",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
+  "files": [
+    "src"
+  ],
   "description": "Quoin CMS admin — Svelte 5 SPA",
   "license": "AGPL-3.0-or-later",
   "devDependencies": {

package/src/AdminRoot.svelte

@@ -33,7 +33,7 @@
 	import GlobalEditView from './views/GlobalEditView.svelte'
 	import CustomPageView from './views/CustomPageView.svelte'
 	import NotFoundView from './views/NotFoundView.svelte'
-	import { seedBrandingFromConfig } from './lib/stores/branding.svelte.js'
+	import { seedBrandingFromConfig, branding } from './lib/stores/branding.svelte.js'
 
 	let {
 		config,
@@ -48,6 +48,10 @@
 	// Later, site-settings loadBranding() can override with operator-edited values.
 	seedBrandingFromConfig()
 
+	$effect(() => {
+		document.title = branding.siteName
+	})
+
 	// Routes are matched in order — most specific patterns first.
 	const routes: RoutePattern[] = [
 		{ pattern: '/login' },

package/src/lib/api/auth.ts

@@ -16,11 +16,8 @@ export function getMe(): Promise<ApiResult<AuthUser>> {
 
 export function register(
 	username: string,
-	password: string
+	password: string,
+	name: string
 ): Promise<ApiResult<{ message: string }>> {
-	return post<{ message: string }>('/auth/register', { username, password })
-}
-
-export function getSetupStatus(): Promise<ApiResult<{ needsSetup: boolean }>> {
-	return get<{ needsSetup: boolean }>('/auth/setup-status')
+	return post<{ message: string }>('/auth/register', { username, password, name })
 }

package/src/lib/api/files.ts

@@ -33,7 +33,7 @@ export interface UploadRecord {
 
 export interface UploadToCollectionOptions {
 	/** Optional user-metadata form fields to include alongside `file`. */
-	extra?: Record<string, string>
+	extra?: Record<string, unknown>
 }
 
 /**
@@ -50,7 +50,8 @@ export function uploadToCollection(
 	const fd = new FormData()
 	fd.append('file', file)
 	for (const [k, v] of Object.entries(opts.extra ?? {})) {
-		fd.append(k, v)
+		if (v === undefined || v === null || v === '') continue
+		fd.append(k, typeof v === 'object' ? JSON.stringify(v) : String(v))
 	}
 	return upload<UploadRecord>(`/upload/${encodeURIComponent(collection)}`, fd)
 }

package/src/lib/components/AdminSidebar.svelte

@@ -12,7 +12,7 @@ import {
 	FileText, LogOut, Settings, PanelLeftClose, PanelLeftOpen, BookOpen,
 	PenLine, Users, FolderTree, Tag, BookCopy, Trophy, Megaphone,
 	Mail, StickyNote, Menu, Image, FolderOpen, Tags,
-	MessageSquare, BarChart3, MousePointerClick, Puzzle, type Icon
+	MessageSquare, BarChart3, MousePointerClick, Puzzle, LayoutDashboard, User, type Icon
 } from 'lucide-svelte'
 import type { Component } from 'svelte'
 
@@ -134,6 +134,23 @@ async function handleLogout() {
 
     <!-- Navigation -->
     <nav class="flex-1 overflow-y-auto px-3 py-4 scrollbar-hide">
+      <div class="mb-5">
+        <ul class="space-y-0.5">
+          <li>
+            <a
+              href={resolve('/')}
+              class="group flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] transition-all duration-150
+                {currentPath === resolve('/')
+                  ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium shadow-sm'
+                  : 'text-sidebar-foreground hover:bg-white/[0.04] hover:text-white'}"
+            >
+              <LayoutDashboard class="h-4 w-4 shrink-0 opacity-60 group-hover:opacity-100 {currentPath === resolve('/') ? 'opacity-100' : ''}" />
+              Dashboard
+            </a>
+          </li>
+        </ul>
+      </div>
+
       {#each groupNames as group}
         <div class="mb-5">
           <p class="mb-2 px-3 text-[10px] font-semibold uppercase tracking-[0.15em] text-sidebar-muted">
@@ -216,7 +233,11 @@ async function handleLogout() {
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-2.5">
           <div class="flex h-7 w-7 items-center justify-center rounded-full bg-sidebar-accent text-[11px] font-semibold text-sidebar-accent-foreground">
-            {user?.username?.charAt(0)?.toUpperCase() || '?'}
+            {#if user?.username}
+              {user.username.charAt(0).toUpperCase()}
+            {:else}
+              <User class="h-3.5 w-3.5" />
+            {/if}
           </div>
           <span class="text-xs text-sidebar-foreground">{user?.username}</span>
         </div>

package/src/lib/components/DocumentEditLayout.svelte

@@ -6,6 +6,7 @@ import VersionHistory from './doc/VersionHistory.svelte'
 import ScheduleModal from './doc/ScheduleModal.svelte'
 import DynamicForm from './DynamicForm.svelte'
 import { resolveFieldComponent } from './fields/index.js'
+import { formatFileSize } from '$lib/utils/format.js'
 import { useDirtyState } from '$lib/utils/dirty.svelte.js'
 import { unpublishRecord } from '$lib/api/records.js'
 import { toast } from 'svelte-sonner'
@@ -231,6 +232,22 @@ function handleSchedule(isoDate: string) {
 {:else}
 	<div class="grid gap-9 px-7 py-8 {sideFields.length > 0 || (collection.versions && mode === 'edit' && record?.id) ? 'lg:grid-cols-[1fr_320px]' : ''}">
 		<div class="min-w-0">
+			{#if collection.upload && record?.url}
+				<div class="mb-6 flex items-start gap-4 rounded-lg border bg-muted/30 p-4">
+					{#if String(record.mimeType ?? '').startsWith('image/')}
+						<img src={record.url} alt={record.filename ?? ''} class="h-24 w-24 shrink-0 rounded object-cover" />
+					{:else}
+						<div class="flex h-24 w-24 shrink-0 items-center justify-center rounded bg-muted text-2xl">📄</div>
+					{/if}
+					<div class="min-w-0 space-y-1">
+						<p class="truncate font-medium">{record.filename}</p>
+						<p class="text-sm text-muted-foreground">
+							{formatFileSize(record.size ?? 0)}{#if record.width}{' · '}{record.width}×{record.height}{/if}{' · '}{record.mimeType}
+						</p>
+						<a href={record.url} target="_blank" rel="noopener" class="inline-block text-sm text-primary hover:underline">Open file</a>
+					</div>
+				</div>
+			{/if}
 			<DynamicForm
 				fields={collection.fields}
 				initialData={record ?? {}}

package/src/lib/components/DynamicForm.svelte

@@ -22,7 +22,7 @@ let {
 
 let sidebarFieldSet = $derived(new Set(sidebarFields))
 let mainFields = $derived(
-	fields.filter((f) => !f.hidden && !sidebarFieldSet.has(f.name))
+	fields.filter((f) => !f.hidden && !f.adminHidden && !sidebarFieldSet.has(f.name))
 )
 
 // formData is owned by the parent (DocumentEditLayout) and bound in.
@@ -52,7 +52,7 @@ let mergedErrors = $derived({ ...errors, ...localErrors })
 				{#each (tabsField.tabs[activeTab].fields ?? []) as cf (cf.name)}
 					{#if cf.type === 'row'}
 						<div class="grid gap-4" style="grid-template-columns: repeat({(cf.fields ?? []).length}, minmax(0, 1fr));">
-							{#each (cf.fields ?? []).filter((x: FieldSchema) => !x.hidden) as rf (rf.name)}
+							{#each (cf.fields ?? []).filter((x: FieldSchema) => !x.hidden && !x.adminHidden) as rf (rf.name)}
 								{@render fieldRenderer(rf)}
 							{/each}
 						</div>
@@ -63,7 +63,7 @@ let mergedErrors = $derived({ ...errors, ...localErrors })
 			{/if}
 		{:else if f.type === 'row'}
 			<div class="grid gap-4" style="grid-template-columns: repeat({(f.fields ?? []).length}, minmax(0, 1fr));">
-				{#each (f.fields ?? []).filter((x: FieldSchema) => !x.hidden) as rf (rf.name)}
+				{#each (f.fields ?? []).filter((x: FieldSchema) => !x.hidden && !x.adminHidden) as rf (rf.name)}
 					{@render fieldRenderer(rf)}
 				{/each}
 			</div>

package/src/lib/components/MediaLibrary.svelte

@@ -3,9 +3,10 @@ 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';
+import { X, Upload, Search, FolderOpen, FileText, Check } from 'lucide-svelte';
 
 interface MediaItem {
+	id: string;
 	url: string;
 	alt: string;
 	filename: string;
@@ -16,13 +17,23 @@ interface MediaItem {
 let {
 	open = $bindable(false),
 	accept = ['image/*'],
+	multiple = false,
+	collection = 'media',
 	onSelect,
 }: {
 	open: boolean;
 	accept?: string[];
+	/** When true, items toggle into a selection the user confirms via "Add". */
+	multiple?: boolean;
+	/** Upload collection slug to browse (and its `<collection>_folders`). */
+	collection?: string;
 	onSelect: (media: MediaItem) => void;
 } = $props();
 
+// In multi-select mode we accumulate chosen items here (keyed by id) so the
+// selection survives pagination, then flush them on confirm.
+let selected = $state<Map<string, MediaItem>>(new Map());
+
 let items = $state<any[]>([]);
 let folders = $state<any[]>([]);
 let search = $state('');
@@ -48,7 +59,7 @@ async function loadMedia() {
 	if (selectedFolder) {
 		params.filter = `folder="${selectedFolder}"`;
 	}
-	const result = await listRecords('media', params);
+	const result = await listRecords(collection, params);
 	if (result.ok) {
 		items = result.data.records;
 		totalDocs = result.data.totalRecords;
@@ -58,21 +69,37 @@ async function loadMedia() {
 }
 
 async function loadFolders() {
-	const result = await listRecords('media_folders', { perPage: 100, sort: 'name' });
+	const result = await listRecords(`${collection}_folders`, { perPage: 100, sort: 'name' });
 	if (result.ok) {
 		folders = result.data.records;
 	}
 }
 
-function handleSelect(item: any) {
-	const media: MediaItem = {
+function buildMediaItem(item: any): MediaItem {
+	return {
+		id: item.id,
 		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);
+}
+
+function handleSelect(item: any) {
+	if (multiple) {
+		const next = new Map(selected);
+		if (next.has(item.id)) next.delete(item.id);
+		else next.set(item.id, buildMediaItem(item));
+		selected = next;
+		return;
+	}
+	onSelect(buildMediaItem(item));
+	open = false;
+}
+
+function confirmSelection() {
+	for (const media of selected.values()) onSelect(media);
 	open = false;
 }
 
@@ -144,6 +171,7 @@ $effect(() => {
 		page = 1;
 		search = '';
 		selectedFolder = null;
+		selected = new Map();
 		loadMedia();
 		loadFolders();
 	}
@@ -246,9 +274,14 @@ $effect(() => {
 							{#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"
+									class="group relative flex flex-col overflow-hidden rounded-md border hover:shadow-sm transition-all {multiple && selected.has(item.id) ? 'border-primary ring-2 ring-primary' : 'hover:border-primary'}"
 									onclick={() => handleSelect(item)}
 								>
+									{#if multiple && selected.has(item.id)}
+										<div class="absolute right-1.5 top-1.5 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground">
+											<Check class="h-3.5 w-3.5" />
+										</div>
+									{/if}
 									<div class="aspect-square w-full overflow-hidden bg-muted">
 										{#if isImage(item.mimeType || item.file?.mimeType || '')}
 											<img
@@ -273,6 +306,21 @@ $effect(() => {
 				</div>
 			</div>
 
+			<!-- Multi-select confirm bar -->
+			{#if multiple}
+				<div class="flex items-center justify-between border-t px-4 py-2">
+					<p class="text-xs text-muted-foreground">{selected.size} selected</p>
+					<button
+						type="button"
+						disabled={selected.size === 0}
+						onclick={confirmSelection}
+						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"
+					>
+						Add {selected.size} {selected.size === 1 ? 'item' : 'items'}
+					</button>
+				</div>
+			{/if}
+
 			<!-- Pagination -->
 			{#if totalPages > 1}
 				<div class="flex items-center justify-between border-t px-4 py-2">

package/src/lib/components/UploadCreateView.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+import { goto, resolve } from '$lib/router/index.svelte.js'
+import { uploadToCollection } from '$lib/api/files.js'
+import DynamicForm from './DynamicForm.svelte'
+import type { CollectionSchema, FieldSchema } from '$lib/types/schema.js'
+import { toast } from 'svelte-sonner'
+import { Upload, X } from 'lucide-svelte'
+
+let {
+	collection,
+}: {
+	collection: CollectionSchema
+} = $props()
+
+let isUploading = $state(false)
+let isDragging = $state(false)
+let selectedFile = $state<File | null>(null)
+let fileInput: HTMLInputElement
+
+let accept = $derived(collection.upload?.accept?.join(',') ?? '')
+
+function flatten(flds: FieldSchema[]): FieldSchema[] {
+	const out: FieldSchema[] = []
+	for (const f of flds) {
+		if (f.type === 'tabs') {
+			for (const t of f.tabs ?? []) out.push(...flatten(t.fields ?? []))
+			continue
+		}
+		if (f.type === 'row') {
+			out.push(...flatten(f.fields ?? []))
+			continue
+		}
+		out.push(f)
+	}
+	return out
+}
+
+function buildInitial(flds: FieldSchema[]): Record<string, any> {
+	const data: Record<string, any> = {}
+	for (const f of flatten(flds)) {
+		if ((f as any).defaultValue !== undefined) {
+			data[f.name] = (f as any).defaultValue
+		} else if (f.type === 'checkbox') {
+			data[f.name] = false
+		} else if (f.type === 'tags') {
+			data[f.name] = []
+		} else if (f.type === 'number' || f.type === 'file' || f.type === 'relationship' || f.type === 'richtext') {
+			data[f.name] = null
+		} else {
+			data[f.name] = ''
+		}
+	}
+	return data
+}
+
+// svelte-ignore state_referenced_locally
+let formData = $state<Record<string, any>>(buildInitial(collection.fields))
+let userMetadataFields = $derived(flatten(collection.fields).filter((f) => !f.hidden && !f.adminHidden))
+let hasUserMetadata = $derived(userMetadataFields.length > 0)
+
+function buildExtra(): Record<string, unknown> {
+	const out: Record<string, unknown> = {}
+	for (const f of userMetadataFields) {
+		out[f.name] = formData[f.name]
+	}
+	return out
+}
+
+function handleFiles(files: FileList | null) {
+	if (!files?.length || isUploading) return
+	selectedFile = files[0]
+	if (fileInput) fileInput.value = ''
+}
+
+function clearFile() {
+	selectedFile = null
+	if (fileInput) fileInput.value = ''
+}
+
+async function submitUpload() {
+	if (!selectedFile || isUploading) return
+	isUploading = true
+	const result = await uploadToCollection(collection.key, selectedFile, { extra: buildExtra() })
+	isUploading = false
+	if (result.ok && result.data.id) {
+		toast.success(`Uploaded ${selectedFile.name}`)
+		await goto(resolve(`/${collection.key}/${result.data.id}`))
+	} else {
+		toast.error(!result.ok ? result.error : 'Upload failed')
+	}
+}
+
+function onDrop(e: DragEvent) {
+	e.preventDefault()
+	isDragging = false
+	handleFiles(e.dataTransfer?.files ?? null)
+}
+</script>
+
+<div class="px-7 py-8">
+	<h1 class="mb-6 text-2xl font-semibold">New {collection.label}</h1>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-12 text-center transition-colors {isDragging ? 'border-primary bg-accent/40' : 'border-border'}"
+		ondragover={(e) => { e.preventDefault(); isDragging = true }}
+		ondragleave={() => (isDragging = false)}
+		ondrop={onDrop}
+	>
+		<Upload class="h-8 w-8 text-muted-foreground" />
+		<div class="flex items-center gap-2">
+			<button
+				type="button"
+				onclick={() => fileInput.click()}
+				disabled={isUploading}
+				class="inline-flex h-10 items-center gap-2 rounded-md border bg-background px-4 text-sm hover:bg-accent disabled:opacity-50"
+			>
+				{selectedFile ? 'Change file' : 'Select a file'}
+			</button>
+			<span class="text-sm text-muted-foreground">or drag and drop a file</span>
+		</div>
+		{#if selectedFile}
+			<div class="inline-flex max-w-full items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm">
+				<span class="truncate">{selectedFile.name}</span>
+				<button
+					type="button"
+					onclick={clearFile}
+					disabled={isUploading}
+					class="text-muted-foreground hover:text-foreground disabled:opacity-50"
+					aria-label="Remove selected file"
+				>
+					<X class="h-4 w-4" />
+				</button>
+			</div>
+		{/if}
+		{#if accept}
+			<p class="text-xs text-muted-foreground">Accepted: {accept}</p>
+		{/if}
+	</div>
+
+	{#if hasUserMetadata}
+		<div class="mt-8 max-w-3xl">
+			<DynamicForm fields={collection.fields} bind:formData />
+		</div>
+	{/if}
+
+	<div class="mt-8 flex items-center gap-3">
+		<button
+			type="button"
+			onclick={submitUpload}
+			disabled={!selectedFile || isUploading}
+			class="inline-flex h-10 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+		>
+			{isUploading ? 'Uploading…' : 'Upload'}
+		</button>
+		<button
+			type="button"
+			onclick={() => goto(resolve(`/${collection.key}`))}
+			disabled={isUploading}
+			class="inline-flex h-10 items-center rounded-md border bg-background px-4 text-sm hover:bg-accent disabled:opacity-50"
+		>
+			Cancel
+		</button>
+	</div>
+
+	<input
+		bind:this={fileInput}
+		type="file"
+		class="hidden"
+		{accept}
+		onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+	/>
+</div>