Studio: Add search to current library

apps/studio/src/modules/add-site/components/new-site-options.tsx

@@ -2,17 +2,20 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
+	SearchControl as SearchControlWp,
 	Spinner,
 } from '@wordpress/components';
 import { useI18n } from '@wordpress/react-i18n';
-import { useCallback } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
 import StudioButton from 'src/components/button';
 import { EMPTY_SITE_PLAYGROUND_URL } from 'src/constants';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { GalleryBlueprint } from 'src/stores/gallery-blueprints-api';
 
+const SearchControl = process.env.NODE_ENV === 'test' ? () => null : SearchControlWp;
+
 interface Blueprint {
 	slug: string;
 	title: string;
@@ -279,6 +282,22 @@ export function NewSiteOptions( {
 	gallerySelectionError,
 }: NewSiteOptionsProps ) {
 	const { __ } = useI18n();
+	const [ searchQuery, setSearchQuery ] = useState( '' );
+
+	const filteredGalleryBlueprints = useMemo( () => {
+		const query = searchQuery.toLowerCase().trim();
+		if ( ! query ) {
+			return galleryBlueprints;
+		}
+		return galleryBlueprints.filter( ( blueprint ) => {
+			const titleMatch = blueprint.title.toLowerCase().includes( query );
+			const descriptionMatch = blueprint.description.toLowerCase().includes( query );
+			const categoryMatch = blueprint.categories.some( ( category ) =>
+				category.toLowerCase().includes( query )
+			);
+			return titleMatch || descriptionMatch || categoryMatch;
+		} );
+	}, [ galleryBlueprints, searchQuery ] );
 
 	const handleEmptyClick = useCallback( () => {
 		onBlueprintChange( 'empty' );
@@ -335,12 +354,20 @@ export function NewSiteOptions( {
 
 			{ onGalleryBlueprintSelect && (
 				<>
-					<Heading
-						className="text-[18px] text-frame-text mt-8 mb-4 w-full max-w-2xl mx-auto"
-						weight={ 500 }
-					>
-						{ __( 'Explore more blueprints' ) }
-					</Heading>
+					<div className="flex items-center justify-between w-full max-w-2xl mx-auto mt-8 mb-4">
+						<Heading className="text-[18px] text-frame-text" weight={ 500 }>
+							{ __( 'Explore more blueprints' ) }
+						</Heading>
+						{ ! isLoadingGallery && ! galleryErrorMessage && (
+							<SearchControl
+								className="!w-48 text-frame-text"
+								placeholder={ __( 'Search blueprints' ) }
+								onChange={ setSearchQuery }
+								value={ searchQuery }
+								__nextHasNoMarginBottom={ true }
+							/>
+						) }
+					</div>
 
 					{ gallerySelectionError && (
 						<div className="bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 text-sm rounded-lg px-4 py-3 mb-4 max-w-2xl mx-auto w-full">
@@ -356,13 +383,17 @@ export function NewSiteOptions( {
 						<div className="flex items-center justify-center text-sm text-frame-text-secondary py-8">
 							{ galleryErrorMessage }
 						</div>
+					) : filteredGalleryBlueprints.length === 0 ? (
+						<div className="flex items-center justify-center text-sm text-frame-text-secondary py-8 max-w-2xl mx-auto">
+							{ __( 'No blueprints found.' ) }
+						</div>
 					) : (
 						<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full max-w-2xl mx-auto pb-1">
-							{ galleryBlueprints.map( ( bp ) => (
+							{ filteredGalleryBlueprints.map( ( blueprint ) => (
 								<GalleryBlueprintCard
-									key={ bp.slug }
-									blueprint={ bp }
-									onClick={ () => onGalleryBlueprintSelect( bp ) }
+									key={ blueprint.slug }
+									blueprint={ blueprint }
+									onClick={ () => onGalleryBlueprintSelect( blueprint ) }
 									disabled={ isSelectingGalleryBlueprint }
 								/>
 							) ) }

apps/studio/src/stores/gallery-blueprints-api.ts

@@ -24,7 +24,7 @@ const galleryIndexEntrySchema = z.object( {
 	description: z.string(),
 	author: z.string(),
 	categories: z.array( z.string() ).optional().default( [] ),
-	screenshot_url: z.string(),
+	screenshot_url: z.string().optional().default( '' ),
 	featured: z.boolean(),
 } );