@aphexcms/cms-core 0.1.3 → 0.1.5

package/dist/components/admin/DocumentEditor.svelte

@@ -0,0 +1,795 @@
+<script lang="ts">
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Badge } from '@aphexcms/ui/shadcn/badge';
+	import { documents } from '../../api/documents.js';
+	import { ApiError } from '../../api/client.js';
+	import SchemaField from './SchemaField.svelte';
+	import { findOrphanedFields, type OrphanedField } from '../../schema-utils/cleanup.js';
+	import type { SchemaType } from 'src/types/schemas.js';
+	import { Rule } from '../../field-validation/rule.js';
+	import { hasUnpublishedChanges } from '../../utils/content-hash.js';
+	import { setSchemaContext } from '../../schema-context.svelte.js';
+
+	interface Props {
+		schemas: SchemaType[];
+		documentType: string;
+		documentId?: string | null;
+		isCreating: boolean;
+		onBack: () => void;
+		onSaved?: (documentId: string) => void;
+		onAutoSaved?: (documentId: string, title: string) => void;
+		onDeleted?: () => void;
+		onPublished?: (documentId: string) => void;
+		onOpenReference?: (documentId: string, documentType: string) => void;
+		isReadOnly?: boolean;
+	}
+
+	let {
+		schemas,
+		documentType,
+		documentId,
+		isCreating,
+		onBack,
+		onSaved,
+		onAutoSaved,
+		onDeleted,
+		onPublished,
+		onOpenReference,
+		isReadOnly = false
+	}: Props = $props();
+
+	// Set schema context for child components (ArrayField, etc.)
+	setSchemaContext(schemas);
+
+	// Schema and document state
+	let schema = $state<SchemaType | null>(null);
+	let schemaLoading = $state(false);
+	let schemaError = $state<string | null>(null);
+
+	// Document data state
+	let documentData = $state<Record<string, any>>({});
+	let fullDocument = $state<any>(null); // Store full document with publishedHash
+	let saving = $state(false);
+	let saveError = $state<string | null>(null);
+	let lastSaved = $state<Date | null>(null);
+	let publishSuccess = $state<Date | null>(null);
+
+	// Menu dropdown state
+	let showDropdown = $state(false);
+
+	// Auto-save functionality (every 2 seconds when there are changes)
+	let hasUnsavedChanges = $state(false);
+	let autoSaveTimer: ReturnType<typeof setTimeout> | null = null;
+	let hasValidationErrors = $state(false);
+
+	let orphanedFields = $state<OrphanedField[]>([]);
+	let showOrphanedFields = $state(false);
+	let schemaFields: SchemaField[] = [];
+
+	// Track previous document to detect actual switches (not create→edit transitions)
+	let previousDocumentId = $state<string | null | undefined>(undefined);
+	let previousDocumentType = $state<string | undefined>(undefined);
+	let justCreatedDocument = $state(false); // Flag to skip loadDocumentData after creation
+
+	// Hash-based state tracking
+	const hasUnpublishedContent = $derived(
+		hasUnpublishedChanges(documentData, fullDocument?.publishedHash || null)
+	);
+	const canPublish = $derived(
+		hasUnpublishedContent && !saving && documentId && !hasValidationErrors
+	);
+
+	// Get preview title based on schema config
+	function getPreviewTitle(): string {
+		if (!schema?.preview?.select?.title) {
+			return documentData.title || `Untitled`;
+		}
+		return documentData[schema.preview.select.title] || `Untitled`;
+	}
+
+	// CRITICAL: Clear state IMMEDIATELY when switching documents to prevent cross-contamination
+	$effect(() => {
+		// This effect runs first - watching documentId and documentType
+		const _docId = documentId;
+		const _docType = documentType;
+
+		console.log('hasValidationErrors: ', hasValidationErrors);
+
+		// Detect if we're actually switching documents vs just transitioning from creating→editing
+		const isSwitchingDocuments =
+			previousDocumentId !== undefined && // Not first render
+			previousDocumentType !== undefined &&
+			(previousDocumentType !== _docType || // Different document type
+				(previousDocumentId !== null && previousDocumentId !== _docId)); // Different document ID (but not create→edit)
+
+		// Only clear state if actually switching documents
+		if (isSwitchingDocuments) {
+			// Clear all state immediately to prevent old data from being auto-saved
+			documentData = {};
+			fullDocument = null;
+			hasUnsavedChanges = false;
+			saveError = null;
+			lastSaved = null;
+			publishSuccess = null;
+
+			// Cancel pending auto-save
+			if (autoSaveTimer) {
+				clearTimeout(autoSaveTimer);
+				autoSaveTimer = null;
+			}
+
+			console.log('🧹 Cleared state for document switch:', _docType, _docId || 'new');
+		}
+
+		// Update tracking
+		previousDocumentId = _docId;
+		previousDocumentType = _docType;
+	});
+
+	// Load schema when documentType is available or when switching to create mode
+	$effect(() => {
+		if (documentType) {
+			loadSchema();
+		}
+	});
+
+	// Load existing document data when editing
+	$effect(() => {
+		if (!isCreating && documentId) {
+			// Skip loading if we just created this document (data is already in memory)
+			if (justCreatedDocument) {
+				console.log('⏭️  Skipping loadDocumentData - just created document');
+				justCreatedDocument = false;
+				return;
+			}
+			loadDocumentData();
+		}
+	});
+
+	// Reset to defaults when creating new document
+	$effect(() => {
+		if (isCreating && schema) {
+			resetToDefaults();
+		}
+	});
+
+	// Check for orphaned fields when document data or schema changes
+	$effect(() => {
+		if (documentData && schema && Object.keys(documentData).length > 0) {
+			const cleanupResult = findOrphanedFields(documentData, schema);
+			orphanedFields = cleanupResult.orphanedFields;
+			showOrphanedFields = cleanupResult.hasOrphanedFields;
+		}
+	});
+
+	function loadSchema() {
+		schemaLoading = true;
+		schemaError = null;
+
+		console.log('[Document Editor] RUNNING LOAD SCHEMA');
+		console.log('[Document Editor] SCHEMAS: ', schemas);
+
+		try {
+			// Find schema from provided schemas
+			const foundSchema = schemas.find((s) => s.name === documentType);
+
+			if (foundSchema) {
+				schema = foundSchema;
+			} else {
+				throw new Error(`Schema type '${documentType}' not found`);
+			}
+		} catch (err) {
+			console.error('Failed to load schema:', err);
+			schemaError = err instanceof Error ? err.message : 'Failed to load schema';
+		} finally {
+			schemaLoading = false;
+		}
+	}
+
+	async function loadDocumentData() {
+		if (!documentId) return;
+
+		console.log('📄 Loading document data for:', documentId);
+
+		try {
+			const response = await documents.getById(documentId);
+
+			if (response.success && response.data) {
+				// Store full document for hash comparison
+				fullDocument = response.data;
+
+				// Load the draft data if available, otherwise published data
+				const data = response.data.draftData || response.data.publishedData || {};
+				console.log('📄 Loaded document data:', data);
+				console.log('📄 Published hash:', response.data.publishedHash);
+
+				documentData = { ...data };
+				hasUnsavedChanges = false; // Just loaded, so no unsaved changes
+			} else {
+				console.error('❌ Failed to load document data:', response.error);
+				saveError = response.error || 'Failed to load document';
+			}
+		} catch (err) {
+			console.error('❌ Error loading document data:', err);
+			saveError = err instanceof ApiError ? err.message : 'Failed to load document';
+		}
+	}
+
+	function resetToDefaults() {
+		if (!schema) return;
+
+		console.log('🔄 Resetting document data to defaults for new document');
+
+		// Reset document data with field defaults
+		const initialData: Record<string, any> = {};
+		schema.fields.forEach((field) => {
+			if (field.type === 'boolean' && 'initialValue' in field) {
+				initialData[field.name] = field.initialValue;
+			} else {
+				initialData[field.name] = '';
+			}
+		});
+
+		documentData = initialData;
+		fullDocument = null;
+		hasUnsavedChanges = false;
+		lastSaved = null;
+		saveError = null;
+		console.log('✅ Document data reset to:', initialData);
+	}
+
+	// Check if document has meaningful content (not just empty initialized values)
+	function hasMeaningfulContent(data: Record<string, any>): boolean {
+		return Object.values(data).some((value) => {
+			if (typeof value === 'string') return value.trim() !== '';
+			if (typeof value === 'boolean') return value !== false; // Assuming false is default
+			if (Array.isArray(value)) return value.length > 0;
+			if (typeof value === 'object' && value !== null) return Object.keys(value).length > 0;
+			return value !== null && value !== undefined && value !== '';
+		});
+	}
+
+	// Watch for changes to trigger auto-save (debounced)
+	$effect(() => {
+		const hasContent = hasMeaningfulContent(documentData);
+
+		// Only set hasUnsavedChanges if we actually have meaningful data
+		if (hasContent) {
+			hasUnsavedChanges = true;
+		}
+
+		if (autoSaveTimer) {
+			clearTimeout(autoSaveTimer);
+		}
+
+		// Debounced auto-save - waits for 800ms pause in typing (like Notion/modern apps)
+		// Only auto-save if there's meaningful content and not in read-only mode
+		if (hasContent && schema && !isReadOnly) {
+			autoSaveTimer = setTimeout(() => {
+				console.log('🔄 Auto-saving after typing pause...', { documentId });
+				saveDocument(true); // auto-save
+			}, 1200); // Shorter delay - saves faster but still waits for typing pauses
+		}
+
+		return () => {
+			if (autoSaveTimer) {
+				clearTimeout(autoSaveTimer);
+			}
+		};
+	});
+
+	async function saveDocument(isAutoSave = false) {
+		if (saving) return;
+
+		saving = true;
+		saveError = null;
+
+		try {
+			let response;
+
+			// ALWAYS allow saving drafts (even with validation errors) - Sanity-style
+			if (isCreating) {
+				// Create new document
+				console.log('🔄 Creating new document with data:', {
+					type: documentType,
+					draftData: documentData
+				});
+				response = await documents.create({
+					type: documentType,
+					draftData: documentData
+				});
+
+				console.log('📝 Document creation response:', response);
+
+				if (response.success && response.data) {
+					console.log('✅ Document created successfully with ID:', response.data.id);
+					// Set flag to prevent loadDocumentData from overwriting our data
+					justCreatedDocument = true;
+					// Store the response data for hash comparison
+					fullDocument = response.data;
+					// Always call onSaved to switch to edit mode after creation
+					onSaved?.(response.data.id);
+				} else {
+					console.error('❌ Document creation failed:', response);
+				}
+			} else if (documentId) {
+				// Update existing document
+				response = await documents.updateById(documentId, {
+					draftData: documentData
+				});
+			}
+
+			if (response?.success) {
+				lastSaved = new Date();
+				hasUnsavedChanges = false;
+				if (isAutoSave) {
+					// Trigger validation on all fields after auto-save
+					validateAllFields(); // Update validation status
+					schemaFields.forEach((fieldComponent, index) => {
+						const field = schema.fields[index];
+						if (fieldComponent && field) {
+							fieldComponent.performValidation(documentData[field.name], {});
+						}
+					}); // Notify parent of autosave with current title
+					if (onAutoSaved && documentId) {
+						onAutoSaved(documentId, getPreviewTitle());
+					}
+				}
+			} else {
+				throw new Error(response?.error || 'Failed to save document');
+			}
+		} catch (err) {
+			console.error('Failed to save document:', err);
+
+			// Extract validation errors if present
+			if (err instanceof ApiError && err.response?.validationErrors) {
+				const validationErrors = err.response.validationErrors;
+				const errorMessages = validationErrors
+					.map((ve: any) => `${ve.field}: ${ve.errors.join(', ')}`)
+					.join('; ');
+				saveError = `Validation failed: ${errorMessages}`;
+			} else {
+				saveError = err instanceof ApiError ? err.message : 'Failed to save document';
+			}
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function publishDocument() {
+		if (!documentId || saving) return;
+
+		// Check for validation errors before publishing (Sanity-style)
+		await validateAllFields();
+
+		if (hasValidationErrors) {
+			saveError = 'Cannot publish: Please fix validation errors first';
+			return;
+		}
+
+		saving = true;
+		saveError = null;
+
+		try {
+			const response = await documents.publish(documentId);
+
+			if (response.success && response.data) {
+				// Update local state with new published hash
+				fullDocument = response.data;
+				lastSaved = new Date();
+				publishSuccess = new Date();
+				console.log('✅ Document published successfully');
+				console.log('📄 New published hash:', response.data.publishedHash);
+
+				// Notify parent that document was published
+				if (onPublished && documentId) {
+					onPublished(documentId);
+				}
+			} else {
+				throw new Error(response.error || 'Failed to publish document');
+			}
+		} catch (err) {
+			console.error('Failed to publish document:', err);
+
+			// Extract validation errors if present
+			if (err instanceof ApiError && err.response?.validationErrors) {
+				const validationErrors = err.response.validationErrors;
+				const errorMessages = validationErrors
+					.map((ve: any) => `${ve.field}: ${ve.errors.join(', ')}`)
+					.join('; ');
+				saveError = `Cannot publish - Validation failed: ${errorMessages}`;
+			} else {
+				saveError = err instanceof ApiError ? err.message : 'Failed to publish document';
+			}
+		} finally {
+			saving = false;
+		}
+	}
+
+	// Validate all fields before publishing
+	async function validateAllFields(): Promise<void> {
+		if (!schema) {
+			hasValidationErrors = false;
+			return;
+		}
+
+		let errorsFound = false;
+
+		for (const field of schema.fields) {
+			if (field.validation) {
+				try {
+					const validationFunctions = Array.isArray(field.validation)
+						? field.validation
+						: [field.validation];
+
+					for (const validationFn of validationFunctions) {
+						const rule = validationFn(new Rule());
+						const markers = await rule.validate(documentData[field.name], { path: [field.name] });
+
+						if (markers.some((m) => m.level === 'error')) {
+							errorsFound = true;
+							console.log(`❌ Validation error in field '${field.name}':`, markers);
+						}
+					}
+				} catch (error) {
+					errorsFound = true;
+					console.error(`Validation failed for field '${field.name}':`, error);
+				}
+			}
+		}
+
+		hasValidationErrors = errorsFound;
+	}
+
+	async function deleteDocument() {
+		if (!documentId || saving) return;
+
+		const confirmDelete = confirm(
+			`Are you sure you want to delete this document? This action cannot be undone.`
+		);
+		if (!confirmDelete) return;
+
+		saving = true;
+		saveError = null;
+
+		try {
+			const response = await documents.deleteById(documentId);
+
+			if (response.success) {
+				console.log('✅ Document deleted successfully');
+				onDeleted?.();
+			} else {
+				throw new Error(response.error || 'Failed to delete document');
+			}
+		} catch (err) {
+			console.error('Failed to delete document:', err);
+			saveError = err instanceof ApiError ? err.message : 'Failed to delete document';
+		} finally {
+			saving = false;
+		}
+	}
+
+	// Schema cleanup functions
+	function removeOrphanedField(fieldToRemove: OrphanedField) {
+		// Remove the specific field from document data
+		const newData = { ...documentData };
+
+		if (fieldToRemove.level === 'document') {
+			delete newData[fieldToRemove.key];
+		} else {
+			// Handle nested field removal (more complex path-based deletion)
+			removeFieldByPath(newData, fieldToRemove.path);
+		}
+
+		documentData = newData;
+		hasUnsavedChanges = true;
+
+		// Remove from orphaned fields list
+		orphanedFields = orphanedFields.filter((f) => f !== fieldToRemove);
+
+		// Hide warning if no more orphaned fields
+		if (orphanedFields.length === 0) {
+			showOrphanedFields = false;
+		}
+	}
+
+	function removeFieldByPath(obj: any, path: string) {
+		const parts = path.split('.');
+		let current = obj;
+
+		for (let i = 0; i < parts.length - 1; i++) {
+			const part = parts[i];
+			if (part.includes('[') && part.includes(']')) {
+				// Handle array index like "items[0]"
+				const [key, indexStr] = part.split('[');
+				const index = parseInt(indexStr.replace(']', ''));
+				current = current[key][index];
+			} else {
+				current = current[part];
+			}
+		}
+
+		const lastPart = parts[parts.length - 1];
+		delete current[lastPart];
+	}
+
+	function cleanupAllOrphanedFields() {
+		if (!schema) return;
+
+		const cleanupResult = findOrphanedFields(documentData, schema);
+		documentData = cleanupResult.cleanedData;
+		hasUnsavedChanges = true;
+		showOrphanedFields = false;
+		orphanedFields = [];
+	}
+
+	function dismissOrphanedFields() {
+		showOrphanedFields = false;
+	}
+</script>
+
+<div class="relative flex h-full flex-col">
+	<!-- Header Toolbar (Sanity-style) -->
+	<div class="border-border bg-background flex h-14 items-center justify-between border-b px-4">
+		<!-- Left side: Document info and status -->
+		<div class="flex items-center gap-3 overflow-hidden">
+			<div class="min-w-0 flex-1">
+				<h3 class="truncate text-sm font-medium">
+					{getPreviewTitle()}
+				</h3>
+				<div class="flex items-center gap-2">
+					{#if saving}
+						<span class="text-muted-foreground text-xs">Saving...</span>
+					{:else if lastSaved}
+						<span class="text-muted-foreground text-xs">
+							Saved {lastSaved.toLocaleTimeString()}
+						</span>
+					{:else if hasUnsavedChanges}
+						<span class="text-muted-foreground text-xs">Unsaved changes</span>
+					{/if}
+
+					<!-- Created by -->
+					{#if fullDocument?.createdBy}
+						<span class="text-muted-foreground hidden text-xs sm:inline">
+							• Created by {typeof fullDocument.createdBy === 'string'
+								? fullDocument.createdBy
+								: fullDocument.createdBy.name || fullDocument.createdBy.email}
+						</span>
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		<!-- Right side: Actions and close button -->
+		<div class="flex items-center gap-2">
+			<!-- Status badges -->
+			{#if saving}
+				<Badge variant="secondary" class="hidden sm:flex">Saving...</Badge>
+			{:else if publishSuccess && new Date().getTime() - publishSuccess.getTime() < 3000}
+				<Badge variant="default" class="hidden sm:flex">Published!</Badge>
+			{:else if hasUnpublishedContent}
+				<Badge variant="outline" class="hidden sm:flex">Unpublished</Badge>
+			{:else if lastSaved}
+				<Badge variant="secondary" class="hidden sm:flex">Saved</Badge>
+			{/if}
+
+			<!-- Close button (X) - hidden on mobile -->
+			<Button
+				variant="ghost"
+				size="icon"
+				onclick={onBack}
+				class="hidden h-8 w-8 hover:cursor-pointer lg:flex"
+				title="Close"
+			>
+				<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</Button>
+		</div>
+	</div>
+
+	<!-- Content Form -->
+	<div class="flex-1 space-y-4 overflow-auto p-4 lg:space-y-6 lg:p-6">
+		{#if saveError}
+			<div class="bg-destructive/10 border-destructive/20 rounded-md border p-3">
+				<p class="text-destructive text-sm">{saveError}</p>
+			</div>
+		{/if}
+
+		{#if schemaError}
+			<div class="bg-destructive/10 border-destructive/20 rounded-md border p-3">
+				<p class="text-destructive text-sm">Schema Error: {schemaError}</p>
+			</div>
+		{:else if schemaLoading}
+			<div class="p-6 text-center">
+				<div class="text-muted-foreground text-sm">Loading schema...</div>
+			</div>
+		{:else if schema}
+			<!-- Orphaned Fields Warning -->
+			{#if showOrphanedFields && orphanedFields.length > 0}
+				<div class="space-y-3 rounded-md border border-orange-200 bg-orange-50 p-4">
+					<div class="flex items-center gap-2">
+						<svg
+							class="h-5 w-5 text-orange-600"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L5.081 16.5c-.77.833.192 2.5 1.732 2.5z"
+							/>
+						</svg>
+						<h4 class="text-sm font-medium text-orange-800">
+							{orphanedFields.length} orphaned field{orphanedFields.length === 1 ? '' : 's'} detected
+						</h4>
+					</div>
+
+					<p class="text-sm text-orange-700">
+						These fields exist in your document but are no longer defined in the schema:
+					</p>
+
+					<div class="space-y-2">
+						{#each orphanedFields as field, index (index)}
+							<div
+								class="flex items-center justify-between rounded border border-orange-200 bg-white p-3"
+							>
+								<div class="flex-1">
+									<div class="font-mono text-sm font-medium text-orange-800">
+										{field.path || field.key}
+									</div>
+									<div class="mt-1 text-xs text-orange-600">
+										<code class="rounded bg-orange-100 px-1">{JSON.stringify(field.value)}</code>
+									</div>
+								</div>
+								<Button
+									size="sm"
+									variant="outline"
+									onclick={() => removeOrphanedField(field)}
+									class="ml-3 h-8 border-red-200 px-3 text-red-600 hover:border-red-300 hover:bg-red-50"
+								>
+									Remove
+								</Button>
+							</div>
+						{/each}
+					</div>
+
+					<div class="flex gap-2 border-t border-orange-200 pt-2">
+						<Button
+							size="sm"
+							variant="outline"
+							onclick={cleanupAllOrphanedFields}
+							class="border-orange-600 bg-orange-600 text-white hover:bg-orange-700"
+						>
+							Remove All
+						</Button>
+						<Button
+							size="sm"
+							variant="ghost"
+							onclick={dismissOrphanedFields}
+							class="text-orange-700 hover:text-orange-800"
+						>
+							Dismiss
+						</Button>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Dynamic Schema Fields -->
+			{#each schema.fields as field, index (index)}
+				<SchemaField
+					bind:this={schemaFields[index]}
+					{field}
+					value={documentData[field.name]}
+					{documentData}
+					onUpdate={(newValue) => {
+						documentData = { ...documentData, [field.name]: newValue };
+						hasUnsavedChanges = true;
+					}}
+					{onOpenReference}
+					schemaType={documentType}
+					readonly={isReadOnly}
+				/>
+			{/each}
+		{:else}
+			<div class="border-muted-foreground/30 rounded-md border border-dashed p-4">
+				<p class="text-muted-foreground text-center text-sm">
+					No schema found for document type: {documentType}
+				</p>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Sanity-style bottom bar -->
+	{#if documentId}
+		<div class="border-border bg-background border-t p-4">
+			<div class="flex items-center justify-between">
+				<!-- Left: Save status badges -->
+				<div class="flex items-center gap-2">
+					{#if saving}
+						<Badge variant="secondary">Saving...</Badge>
+					{:else if publishSuccess && new Date().getTime() - publishSuccess.getTime() < 3000}
+						<Badge variant="default">Published!</Badge>
+					{:else if hasUnsavedChanges}
+						<Badge variant="outline">Unsaved</Badge>
+					{:else if hasUnpublishedContent}
+						<Badge variant="outline">Unpublished Changes</Badge>
+					{:else if lastSaved}
+						<Badge variant="secondary">Saved</Badge>
+					{/if}
+				</div>
+
+				<!-- Right: Publish button + horizontal three dots menu -->
+				<div class="flex items-center gap-2">
+					{#if !isReadOnly}
+						<Button
+							onclick={publishDocument}
+							disabled={!canPublish}
+							size="sm"
+							variant={canPublish ? 'default' : 'secondary'}
+							class="cursor-pointer"
+						>
+							{#if saving}
+								Publishing...
+							{:else if !hasUnpublishedContent}
+								Published
+							{:else}
+								Publish Changes
+							{/if}
+						</Button>
+					{:else}
+						<Badge variant="secondary" class="text-xs">Read Only</Badge>
+					{/if}
+
+					<!-- Horizontal three dots menu (only for non-read-only users) -->
+					{#if !isReadOnly}
+						<div class="relative">
+							<Button
+								onclick={() => (showDropdown = !showDropdown)}
+								variant="ghost"
+								class="hover:bg-muted flex h-8 w-8 items-center justify-center rounded transition-colors"
+							>
+								<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 12h.01M12 12h.01M19 12h.01"
+									/>
+								</svg>
+							</Button>
+
+							{#if showDropdown}
+								<!-- Dropdown menu -->
+								<div
+									class="bg-background border-border absolute bottom-full right-0 z-50 mb-2 min-w-[140px] rounded-md border py-1 shadow-lg"
+								>
+									<Button
+										variant="ghost"
+										onclick={() => {
+											showDropdown = false;
+											deleteDocument();
+										}}
+										class="hover:bg-muted text-destructive flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors"
+									>
+										Delete document
+									</Button>
+								</div>
+
+								<!-- Click outside to close -->
+								<div class="fixed inset-0 z-40" onclick={() => (showDropdown = false)}></div>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>