Reject duplicate collection field labels

src/lib/client/collection-editor.ts

@@ -11,7 +11,7 @@ import type { PropertyDefinition, PropertyValue, WorkspaceRecord } from '$lib/da
 /**
  * Shared row/cell/select-option/field mutation helpers used by every
  * Collection renderer — the embedded Table/Board/Calendar views and the
- * full-page Table route (issue #189). Each wraps a `$lib/data/records.ts`
+ * full-page Table route (issue #189). Each wraps a `$lib/data/collection-ops.ts`
  * primitive with the "no doc yet" guard every renderer previously
  * reimplemented individually; renderer-specific behavior (Board's
  * pre-seeded column value, Calendar's pre-seeded date) stays in the
@@ -48,9 +48,11 @@ export type SelectOptionResult =
 	| { ok: true; option: { id: string; label: string; color?: string } }
 	| { ok: false; error: string };
 
+export type CollectionFieldResult = { ok: true } | { ok: false; error: string };
+
 /**
  * The one path every renderer must use to add a select option — validated,
- * deduped, and palette-colored by `records.ts`'s `addSelectOption`. Before
+ * deduped, and palette-colored by `collection-ops.ts`'s `addSelectOption`. Before
  * issue #189, Calendar and the full-page Table route each rebuilt the
  * schema by hand instead, silently allowing duplicate, uncolored options.
  */
@@ -76,19 +78,28 @@ export function addCollectionSelectOption(
 /**
  * Appends one field to a Collection's schema — the shared path for Board's
  * "add a select property" and Calendar's "add a date property" first-run
- * prompts, and FieldManagerDialog's "Add field" form. Reads the current
- * schema from Yjs itself (`records.ts`'s `appendCollectionField`), not from
+ * prompts, and FieldManagerDialog's "Add field" form. Validates field labels
+ * while reading the current schema from Yjs itself (`collection-ops.ts`'s
+ * `appendCollectionField`), not from
  * a caller-supplied snapshot, so two rapid appends never race. Returns
- * whether the field was actually written — `false` when `doc` isn't
- * connected yet — so a caller doesn't persist a config referencing a field
+ * the validation error when it cannot write, so callers can render it inline;
+ * this also prevents callers from persisting a config referencing a field
  * (e.g. `groupBy`) that was never added.
  */
 export function appendCollectionField(
 	doc: Y.Doc | undefined,
 	collectionId: string,
 	field: PropertyDefinition
-): boolean {
-	if (!doc) return false;
-	appendCollectionFieldToSchema(doc, collectionId, field);
-	return true;
+): CollectionFieldResult {
+	if (!doc) return { ok: false, error: 'Not connected yet. Please try again.' };
+	try {
+		appendCollectionFieldToSchema(doc, collectionId, field);
+		return { ok: true };
+	} catch (err) {
+		return {
+			ok: false,
+			error:
+				err instanceof ValidationError ? err.message : 'Could not add the field. Please try again.'
+		};
+	}
 }

src/lib/components/BoardCollectionView.svelte

@@ -52,6 +52,7 @@
 	let manualOrder: Record<string, string[]> = $state({});
 	let draggedRecordId: string | null = $state(null);
 	let newGroupingPropertyLabel = $state('Status');
+	let newGroupingPropertyError = $state('');
 	let optionDialogPropertyKey: string | null = $state(null);
 	let optionDialogError = $state('');
 	// The side-pane surface for a card's full schema/backlinks/attribution
@@ -185,11 +186,18 @@
 	);
 
 	function addGroupingProperty(): void {
-		const label = newGroupingPropertyLabel.trim();
-		if (!label) return;
-		const property: PropertyDefinition = { key: nanoid(8), label, type: 'select', options: [] };
-		if (appendCollectionField(ydoc, collectionId, property)) {
+		const property: PropertyDefinition = {
+			key: nanoid(8),
+			label: newGroupingPropertyLabel,
+			type: 'select',
+			options: []
+		};
+		const result = appendCollectionField(ydoc, collectionId, property);
+		if (result.ok) {
+			newGroupingPropertyError = '';
 			onConfigChange({ ...config, groupBy: property.key });
+		} else {
+			newGroupingPropertyError = result.error;
 		}
 	}
 
@@ -377,6 +385,9 @@
 				<span>Add a select property</span>
 			</button>
 		</form>
+		{#if newGroupingPropertyError}
+			<p class="mt-2 text-sm text-red-600" role="alert">{newGroupingPropertyError}</p>
+		{/if}
 	</div>
 {:else}
 	<div class="mb-4 flex flex-wrap items-center gap-4">

src/lib/components/CalendarCollectionView.svelte

@@ -52,6 +52,7 @@
 	let viewYear = $state(today.getFullYear());
 	let viewMonth = $state(today.getMonth()); // 0-11
 	let newDatePropertyLabel = $state('Date');
+	let newDatePropertyError = $state('');
 	let optionDialogPropertyKey: string | null = $state(null);
 	let optionDialogError = $state('');
 	// The side-pane surface for an entry's full schema/backlinks/attribution
@@ -205,11 +206,17 @@
 	});
 
 	function addDateProperty(): void {
-		const label = newDatePropertyLabel.trim();
-		if (!label) return;
-		const property: PropertyDefinition = { key: nanoid(8), label, type: 'date' };
-		if (appendCollectionField(ydoc, collectionId, property)) {
+		const property: PropertyDefinition = {
+			key: nanoid(8),
+			label: newDatePropertyLabel,
+			type: 'date'
+		};
+		const result = appendCollectionField(ydoc, collectionId, property);
+		if (result.ok) {
+			newDatePropertyError = '';
 			onConfigChange({ ...config, groupBy: property.key });
+		} else {
+			newDatePropertyError = result.error;
 		}
 	}
 
@@ -302,6 +309,9 @@
 				<span>Add a date property</span>
 			</button>
 		</form>
+		{#if newDatePropertyError}
+			<p class="mt-2 text-sm text-red-600" role="alert">{newDatePropertyError}</p>
+		{/if}
 	</div>
 {:else}
 	<div class="mb-4 flex flex-wrap items-center gap-3">

src/lib/components/FieldManagerDialog.svelte

@@ -93,24 +93,22 @@
 
 	function addField(event: SubmitEvent): void {
 		event.preventDefault();
-		const label = newFieldLabel.trim();
-		if (!label) return;
 		const field: PropertyDefinition = {
 			key: nanoid(8),
-			label,
+			label: newFieldLabel,
 			type: newFieldType,
 			options: newFieldType === 'select' ? [] : undefined,
 			targetCollectionId:
 				newFieldType === 'relation' ? newFieldTargetCollectionId || undefined : undefined
 		};
-		try {
-			appendCollectionField(getShardDoc(shardId), collectionId, field);
+		const result = appendCollectionField(getShardDoc(shardId), collectionId, field);
+		if (result.ok) {
 			newFieldLabel = '';
 			newFieldType = 'text';
 			newFieldTargetCollectionId = '';
 			errorMessage = '';
-		} catch {
-			errorMessage = 'Could not add the field. Please try again.';
+		} else {
+			errorMessage = result.error;
 		}
 	}
 

src/lib/components/FieldManagerDialog.svelte.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen, within } from '@testing-library/svelte';
+import { fireEvent, render, screen, within } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import * as Y from 'yjs';
 import { createCollection, deleteCollection, getCollection } from '$lib/data/collection-ops';
@@ -120,6 +120,42 @@ describe('FieldManagerDialog', () => {
 		]);
 	});
 
+	it('rejects a case-insensitively duplicate field label with an inline error', async () => {
+		const collection = createCollection(ydoc, {
+			title: 'T',
+			schema: [{ key: 'status', label: 'Status', type: 'select' }]
+		});
+		const user = userEvent.setup();
+		render(FieldManagerDialog, {
+			open: true,
+			collectionId: collection.id,
+			shardId: 'test-shard',
+			onClose: vi.fn()
+		});
+
+		await user.type(screen.getByPlaceholderText('Field name…'), ' status ');
+		await user.click(screen.getByRole('button', { name: 'Add field' }));
+
+		expect(screen.getByRole('alert')).toHaveTextContent('A field named "status" already exists');
+		expect(getCollection(ydoc, collection.id)?.schema).toHaveLength(1);
+	});
+
+	it('shows an inline error for a blank field label', async () => {
+		const collection = createCollection(ydoc, { title: 'T', schema: [] });
+		const user = userEvent.setup();
+		render(FieldManagerDialog, {
+			open: true,
+			collectionId: collection.id,
+			shardId: 'test-shard',
+			onClose: vi.fn()
+		});
+
+		await user.type(screen.getByPlaceholderText('Field name…'), '   ');
+		await fireEvent.submit(screen.getByRole('button', { name: 'Add field' }).closest('form')!);
+
+		expect(screen.getByRole('alert')).toHaveTextContent('Field label cannot be blank');
+	});
+
 	it("adds a relation field with a target collection, and doesn't offer the picker for other types (issue #15)", async () => {
 		const people = createCollection(ydoc, { title: 'People', schema: [] });
 		const collection = createCollection(ydoc, { title: 'T', schema: [] });

src/lib/components/FieldMenu.svelte

@@ -182,8 +182,7 @@
 
 	function saveEdit(event: SubmitEvent): void {
 		event.preventDefault();
-		const label = editLabel.trim();
-		if (!label) return;
+		const label = editLabel;
 		try {
 			updateCollectionProperty(getShardDoc(shardId), collectionId, property.key, {
 				label: label !== property.label ? label : undefined,
@@ -195,27 +194,38 @@
 			});
 			errorMessage = '';
 			closeMenu();
-		} catch {
-			errorMessage = 'Could not update the field. Please try again.';
+		} catch (err) {
+			errorMessage =
+				err instanceof ValidationError
+					? err.message
+					: 'Could not update the field. Please try again.';
 		}
 	}
 
 	function insertField(direction: 'left' | 'right'): void {
 		const field: PropertyDefinition = { key: nanoid(8), label: 'New field', type: 'text' };
 		try {
-			insertCollectionField(getShardDoc(shardId), collectionId, property.key, direction, field);
+			insertCollectionField(getShardDoc(shardId), collectionId, property.key, direction, field, {
+				generateUniqueLabel: true
+			});
 			closeMenu();
-		} catch {
-			errorMessage = 'Could not insert a field. Please try again.';
+		} catch (err) {
+			errorMessage =
+				err instanceof ValidationError
+					? err.message
+					: 'Could not insert a field. Please try again.';
 		}
 	}
 
 	function duplicate(): void {
 		try {
 			duplicateCollectionProperty(getShardDoc(shardId), collectionId, property.key);
 			closeMenu();
-		} catch {
-			errorMessage = 'Could not duplicate the field. Please try again.';
+		} catch (err) {
+			errorMessage =
+				err instanceof ValidationError
+					? err.message
+					: 'Could not duplicate the field. Please try again.';
 		}
 	}
 

src/lib/components/FieldMenu.svelte.test.ts

@@ -42,6 +42,31 @@ describe('FieldMenu', () => {
 		expect(getCollection(ydoc, collection.id)?.schema[0].label).toBe('Full name');
 	});
 
+	it('rejects a duplicate label from the edit form with an inline error', async () => {
+		const collection = createCollection(ydoc, {
+			title: 'T',
+			schema: [
+				{ key: 'name', label: 'Name', type: 'text' },
+				{ key: 'status', label: 'Status', type: 'select' }
+			]
+		});
+		const user = userEvent.setup();
+		render(FieldMenu, {
+			shardId: 'test-shard',
+			collectionId: collection.id,
+			property: collection.schema[0]
+		});
+
+		await user.click(screen.getByRole('button', { name: 'Field options for Name' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Edit field' }));
+		await user.clear(screen.getByLabelText('Label'));
+		await user.type(screen.getByLabelText('Label'), 'status');
+		await user.click(screen.getByRole('button', { name: 'Save' }));
+
+		expect(screen.getByRole('alert')).toHaveTextContent('A field named "status" already exists');
+		expect(getCollection(ydoc, collection.id)?.schema[0].label).toBe('Name');
+	});
+
 	it('warns before a retype that would clear values, and applies the migration on save', async () => {
 		const collection = createCollection(ydoc, {
 			title: 'T',
@@ -90,6 +115,30 @@ describe('FieldMenu', () => {
 		expect(schema.map((p) => p.label)).toEqual(['New field', 'Name']);
 	});
 
+	it('generates an available label for repeated insertions', async () => {
+		const collection = createCollection(ydoc, {
+			title: 'T',
+			schema: [{ key: 'name', label: 'Name', type: 'text' }]
+		});
+		const user = userEvent.setup();
+		render(FieldMenu, {
+			shardId: 'test-shard',
+			collectionId: collection.id,
+			property: collection.schema[0]
+		});
+
+		await user.click(screen.getByRole('button', { name: 'Field options for Name' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Insert left' }));
+		await user.click(screen.getByRole('button', { name: 'Field options for Name' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Insert left' }));
+
+		expect(getCollection(ydoc, collection.id)?.schema.map((p) => p.label)).toEqual([
+			'New field',
+			'New field 2',
+			'Name'
+		]);
+	});
+
 	it('duplicates a field, copying its value', async () => {
 		const collection = createCollection(ydoc, {
 			title: 'T',
@@ -118,6 +167,30 @@ describe('FieldMenu', () => {
 		});
 	});
 
+	it('generates an available label for repeated duplicates', async () => {
+		const collection = createCollection(ydoc, {
+			title: 'T',
+			schema: [{ key: 'name', label: 'Name', type: 'text' }]
+		});
+		const user = userEvent.setup();
+		render(FieldMenu, {
+			shardId: 'test-shard',
+			collectionId: collection.id,
+			property: collection.schema[0]
+		});
+
+		await user.click(screen.getByRole('button', { name: 'Field options for Name' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Duplicate' }));
+		await user.click(screen.getByRole('button', { name: 'Field options for Name' }));
+		await user.click(screen.getByRole('menuitem', { name: 'Duplicate' }));
+
+		expect(getCollection(ydoc, collection.id)?.schema.map((p) => p.label)).toEqual([
+			'Name',
+			'Name copy 2',
+			'Name copy'
+		]);
+	});
+
 	it('offers "Hide in this view" only when onToggleVisible is passed, and calls it', async () => {
 		const collection = createCollection(ydoc, {
 			title: 'T',