Use the browsable schema picker in the layout creator

extension.json

@@ -302,6 +302,7 @@
 				"CdxToggleSwitch",
 				"CdxToggleButtonGroup",
 				"CdxLookup",
+				"CdxCombobox",
 				"CdxTable",
 				"CdxInfoChip"
 			],
@@ -412,7 +413,7 @@
 				"neowiki-subject-creator-schema-title",
 				"neowiki-subject-creator-existing-schema",
 				"neowiki-subject-creator-new-schema",
-				"neowiki-subject-creator-schema-search-placeholder",
+				"neowiki-schema-picker-placeholder",
 				"neowiki-schema-display-property-name",
 				"neowiki-schema-display-property-type",
 				"neowiki-schema-display-property-required",
@@ -502,7 +503,6 @@
 				"neowiki-layout-creator-name-required",
 				"neowiki-layout-creator-name-taken",
 				"neowiki-layout-creator-schema-field",
-				"neowiki-layout-creator-schema-placeholder",
 				"neowiki-layout-creator-view-type-field",
 				"neowiki-layout-creator-view-type-placeholder",
 				"neowiki-layout-creator-save",

i18n/en.json

@@ -103,7 +103,7 @@
 	"neowiki-subject-creator-schema-title": "Have an existing schema?",
 	"neowiki-subject-creator-existing-schema": "Use existing",
 	"neowiki-subject-creator-new-schema": "Create new",
-	"neowiki-subject-creator-schema-search-placeholder": "Search for a schema",
+	"neowiki-schema-picker-placeholder": "Select a schema",
 	"neowiki-subject-creator-label-field": "Subject label",
 	"neowiki-subject-creator-label-placeholder": "Enter a label for the subject",
 	"neowiki-subject-creator-save": "Create subject",
@@ -234,7 +234,6 @@
 	"neowiki-layout-creator-name-required": "Please enter a layout name.",
 	"neowiki-layout-creator-name-taken": "A layout with this name already exists.",
 	"neowiki-layout-creator-schema-field": "Schema",
-	"neowiki-layout-creator-schema-placeholder": "Select a schema",
 	"neowiki-layout-creator-view-type-field": "View type",
 	"neowiki-layout-creator-view-type-placeholder": "Select a view type",
 	"neowiki-layout-creator-save": "Create layout",

i18n/qqq.json

@@ -52,6 +52,7 @@
 	"neowiki-subject-editor-error": "Error notification title shown when updating a subject fails. $1 is the subject label.",
 	"neowiki-subject-editor-validation-failed": "Toast title shown when the backend rejects a Subject save under enforcement. $1 is the Subject label.",
 	"neowiki-subject-lookup-placeholder": "Placeholder text shown in the subject search input field.",
+	"neowiki-schema-picker-placeholder": "Placeholder text shown in the schema picker input field.",
 	"neowiki-subject-lookup-no-results": "Message shown in the subject lookup dropdown when no subjects match the search query.",
 	"neowiki-subject-lookup-no-match": "Error message shown in the subject lookup when the user types text but does not select a subject from the dropdown results.",
 
@@ -138,7 +139,6 @@
 	"neowiki-layout-creator-name-required": "Error shown when the layout name field is empty in the layout creation dialog.",
 	"neowiki-layout-creator-name-taken": "Error shown when a layout with the entered name already exists in the layout creation dialog.",
 	"neowiki-layout-creator-schema-field": "Label for the schema selector in the layout creation dialog.",
-	"neowiki-layout-creator-schema-placeholder": "Placeholder text for the schema selector in the layout creation dialog.",
 	"neowiki-layout-creator-view-type-field": "Label for the view type selector in the layout creation dialog.",
 	"neowiki-layout-creator-view-type-placeholder": "Placeholder text for the view type selector in the layout creation dialog.",
 	"neowiki-layout-creator-save": "Label for the save button in the layout creation dialog.",

resources/ext.neowiki/src/application/SchemaLookup.ts

@@ -1,9 +1,21 @@
 import type { Schema, SchemaName } from '@/domain/Schema';
 
+export interface SchemaSummary {
+	name: string;
+	description: string;
+	propertyCount: number;
+}
+
+export interface SchemaSummaryPage {
+	schemas: SchemaSummary[];
+	totalRows: number;
+}
+
 export interface SchemaLookup {
 
 	getSchema( schemaName: SchemaName ): Promise<Schema>;
 	getSchemaNames( search: string ): Promise<string[]>;
+	getSchemaSummaries( offset: number, limit: number ): Promise<SchemaSummaryPage>;
 
 }
 
@@ -31,6 +43,19 @@ export class InMemorySchemaLookup implements SchemaLookup {
 		return [ ...this.schemaNames ];
 	}
 
+	public async getSchemaSummaries( offset: number, limit: number ): Promise<SchemaSummaryPage> {
+		const summaries = [ ...this.schemas.values() ].map( ( schema ) => ( {
+			name: schema.getName(),
+			description: schema.getDescription(),
+			propertyCount: [ ...schema.getPropertyDefinitions() ].length,
+		} ) );
+
+		return {
+			schemas: summaries.slice( offset, offset + limit ),
+			totalRows: summaries.length,
+		};
+	}
+
 	public clearSchemas(): void {
 		this.schemas.clear();
 	}

resources/ext.neowiki/src/components/LayoutsPage/LayoutCreator.vue

@@ -16,11 +16,9 @@
 		</CdxField>
 
 		<CdxField>
-			<CdxSelect
-				v-model:selected="selectedSchema"
-				:menu-items="schemaMenuItems"
-				:default-label="$i18n( 'neowiki-layout-creator-schema-placeholder' ).text()"
-				@update:selected="onSchemaSelected"
+			<SchemaPicker
+				:selected="selectedSchema"
+				@select="onSchemaSelected"
 			/>
 			<template #label>
 				{{ $i18n( 'neowiki-layout-creator-schema-field' ).text() }}
@@ -61,13 +59,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, shallowRef, onMounted } from 'vue';
+import { computed, ref, shallowRef } from 'vue';
 import { CdxField, CdxMessage, CdxSelect, CdxTextInput } from '@wikimedia/codex';
 import type { MenuItemData, ValidationStatusType } from '@wikimedia/codex';
 import { NeoWikiServices } from '@/NeoWikiServices.ts';
 import { Layout, type DisplayRule } from '@/domain/Layout.ts';
 import type { PropertyDefinition } from '@/domain/PropertyDefinition.ts';
 import DisplayRuleList from '@/components/LayoutEditor/DisplayRuleList.vue';
+import SchemaPicker from '@/components/common/SchemaPicker.vue';
 
 const emit = defineEmits<{
 	change: [];
@@ -84,48 +83,32 @@ const nameStatus = ref<ValidationStatusType>( 'default' );
 const nameInputRef = ref<InstanceType<typeof CdxTextInput> | null>( null );
 const selectedSchema = ref<string | null>( null );
 const selectedViewType = ref<string | null>( null );
-const schemaNames = ref<string[]>( [] );
 const schemaProperties = shallowRef<PropertyDefinition[]>( [] );
 const schemaFetchFailed = ref( false );
 const currentDisplayRules = shallowRef<DisplayRule[]>( [] );
 let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 let requestSequence = 0;
 
-const schemaMenuItems = computed<MenuItemData[]>( () =>
-	schemaNames.value.map( ( name ) => ( { label: name, value: name } ) )
-);
-
 const viewTypeMenuItems = computed<MenuItemData[]>( () =>
 	NeoWikiServices.getViewTypeRegistry().getTypeNames().map(
 		( name ) => ( { label: name, value: name } )
 	)
 );
 
-onMounted( async () => {
-	try {
-		schemaNames.value = await schemaRepo.getSchemaNames( '' );
-	} catch ( error ) {
-		console.error( 'Failed to fetch schema names:', error );
-	}
-} );
-
 function onChange(): void {
 	emit( 'change' );
 }
 
-async function onSchemaSelected(): Promise<void> {
+async function onSchemaSelected( schemaName: string ): Promise<void> {
+	selectedSchema.value = schemaName;
 	schemaProperties.value = [];
 	schemaFetchFailed.value = false;
 
 	currentDisplayRules.value = [];
 	emit( 'change' );
 
-	if ( !selectedSchema.value ) {
-		return;
-	}
-
 	try {
-		const schema = await schemaRepo.getSchema( selectedSchema.value );
+		const schema = await schemaRepo.getSchema( schemaName );
 		schemaProperties.value = [ ...schema.getPropertyDefinitions() ];
 	} catch ( error ) {
 		console.error( 'Failed to fetch schema:', error );

resources/ext.neowiki/src/components/SchemaEditor/Property/RelationAttributesEditor.vue

@@ -24,9 +24,10 @@
 			<template #label>
 				{{ $i18n( 'neowiki-property-editor-target-schema' ).text() }}
 			</template>
-			<SchemaLookup
-				:selected="property.targetSchema ?? null"
+			<SchemaPicker
+				:selected="property.targetSchema || null"
 				@select="updateTargetSchema"
+				@blur="targetSchemaTouched = true"
 			/>
 		</CdxField>
 
@@ -46,15 +47,15 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { CdxCheckbox, CdxField, CdxTextInput } from '@wikimedia/codex';
 import { RelationProperty } from '@/domain/propertyTypes/Relation.ts';
 import { AttributesEditorEmits, AttributesEditorProps } from '@/components/SchemaEditor/Property/AttributesEditorContract.ts';
-import SchemaLookup from '@/components/common/SchemaLookup.vue';
+import SchemaPicker from '@/components/common/SchemaPicker.vue';
 
 const props = defineProps<AttributesEditorProps<RelationProperty>>();
 const emit = defineEmits<AttributesEditorEmits<RelationProperty>>();
 
 const relationInput = ref( props.property.relation || props.property.name.toString() );
 
 watch( () => props.property.relation, ( newValue ) => {
-	relationInput.value = newValue || props.property.name.toString();
+	relationInput.value = newValue;
 } );
 
 onMounted( () => {
@@ -69,18 +70,17 @@ const relationError = computed<string | null>( () =>
 		null
 );
 
+const targetSchemaTouched = ref( false );
+
 const targetSchemaError = computed<string | null>( () =>
-	( props.property.targetSchema ?? '' ).trim() === '' ?
+	targetSchemaTouched.value && ( props.property.targetSchema ?? '' ).trim() === '' ?
 		mw.message( 'neowiki-property-editor-target-schema-required' ).text() :
 		null
 );
 
 const updateRelation = ( value: string ): void => {
 	relationInput.value = value;
-	const trimmed = value.trim();
-	if ( trimmed !== '' ) {
-		emit( 'update:property', { relation: trimmed } );
-	}
+	emit( 'update:property', { relation: value.trim() } );
 };
 
 const updateTargetSchema = ( schemaName: string ): void => {

resources/ext.neowiki/src/components/SchemasPage/SchemasPage.vue

@@ -111,6 +111,7 @@ import { NeoWikiExtension } from '@/NeoWikiExtension.ts';
 import { useSchemaPermissions } from '@/composables/useSchemaPermissions.ts';
 import { useSchemaStore } from '@/stores/SchemaStore.ts';
 import { Schema } from '@/domain/Schema.ts';
+import type { SchemaSummary } from '@/application/SchemaLookup.ts';
 import SchemaCreatorDialog from './SchemaCreatorDialog.vue';
 import SchemaEditorDialog from '@/components/SchemaEditor/SchemaEditorDialog.vue';
 import EditSummary from '@/components/common/EditSummary.vue';
@@ -167,12 +168,6 @@ function schemaUrl( name: string ): string {
 	return mw.util.getUrl( `Schema:${ name }` );
 }
 
-interface SchemaSummary {
-	name: string;
-	description: string;
-	propertyCount: number;
-}
-
 async function fetchSchemas( offset: number, limit: number ): Promise<void> {
 	loading.value = true;
 	pageSize.value = limit;

resources/ext.neowiki/src/components/SubjectCreator/SubjectCreatorDialog.vue

@@ -60,7 +60,7 @@
 				v-if="selectedSchemaOption === 'existing'"
 				class="ext-neowiki-subject-creator-existing"
 			>
-				<SchemaLookup
+				<SchemaPicker
 					ref="schemaLookupRef"
 					@select="onSchemaSelected"
 				/>
@@ -176,7 +176,7 @@ import SubjectEditor from '@/components/SubjectEditor/SubjectEditor.vue';
 import SchemaCreator from '@/components/SchemaCreator/SchemaCreator.vue';
 import type { SchemaCreatorExposes } from '@/components/SchemaCreator/SchemaCreator.vue';
 import EditSummary from '@/components/common/EditSummary.vue';
-import SchemaLookup from '@/components/common/SchemaLookup.vue';
+import SchemaPicker from '@/components/common/SchemaPicker.vue';
 import CloseConfirmationDialog from '@/components/common/CloseConfirmationDialog.vue';
 import SchemaAbandonmentDialog from '@/components/SubjectCreator/SchemaAbandonmentDialog.vue';
 import { useSchemaPermissions } from '@/composables/useSchemaPermissions.ts';