fix: restore and remodel pattern search

src/container/pattern-list/pattern-list-container.tsx

@@ -1,6 +1,7 @@
 import * as Components from '../../components';
 import { ElementDragImage } from '../element-drag-image';
 import * as MobxReact from 'mobx-react';
+import * as Model from '../../model';
 import { PatternItemContainer } from './pattern-item-container';
 import * as React from 'react';
 import * as Types from '../../types';
@@ -21,6 +22,14 @@ export class PatternListContainer extends React.Component {
 	public render(): JSX.Element | null {
 		const { store } = this.props as { store: ViewStore };
 
+		const project = store.getProject();
+
+		if (!project) {
+			return null;
+		}
+
+		const searchResult = project.getPatternSearch().query(store.getPatternSearchTerm());
+
 		return (
 			<div onDragStart={e => this.handleDragStart(e)}>
 				<Components.Space sizeBottom={Components.SpaceSize.XXS}>
@@ -30,17 +39,15 @@ export class PatternListContainer extends React.Component {
 						value={store.getPatternSearchTerm()}
 					/>
 				</Components.Space>
-				{store.getPatternLibraries().map(library => (
-					<Components.PatternFolderView key={library.getId()} name={library.getName()}>
-						{library
-							.getPatterns()
-							.filter(pattern => pattern.getType() !== Types.PatternType.SyntheticPage)
-							.map(pattern => (
-								<PatternItemContainer key={pattern.getId()} pattern={pattern} />
-							))}
-					</Components.PatternFolderView>
-				))}
-
+				{store
+					.getPatternLibraries()
+					.map(library => (
+						<PatternLibraryContainer
+							key={library.getId()}
+							library={library}
+							searchResult={searchResult}
+						/>
+					))}
 				<ElementDragImage
 					element={store.getDraggedElement()}
 					innerRef={ref => (this.dragImg = ref)}
@@ -49,3 +56,29 @@ export class PatternListContainer extends React.Component {
 		);
 	}
 }
+
+export interface PatternLibraryContainerProps {
+	library: Model.PatternLibrary;
+	searchResult: string[];
+}
+
+class PatternLibraryContainer extends React.Component<PatternLibraryContainerProps> {
+	public render(): JSX.Element | null {
+		const props = this.props;
+		const patterns = props.library
+			.getPatterns(props.searchResult)
+			.filter(pattern => pattern.getType() !== Types.PatternType.SyntheticPage);
+
+		if (patterns.length === 0) {
+			return null;
+		}
+
+		return (
+			<Components.PatternFolderView name={props.library.getName()}>
+				{patterns.map(pattern => (
+					<PatternItemContainer key={pattern.getId()} pattern={pattern} />
+				))}
+			</Components.PatternFolderView>
+		);
+	}
+}

src/model/alva-app.ts

@@ -26,10 +26,9 @@ export class AlvaApp {
 	public constructor(init?: AlvaAppInit) {
 		if (init) {
 			this.activeView = init.activeView;
+			this.panes = init.panes;
 			this.searchTerm = init.searchTerm;
 			this.state = init.state;
-			this.rightSidebarTab = init.rightSidebarTab;
-			this.panes = init.panes;
 		}
 	}
 

src/model/pattern-library/pattern-library.ts

@@ -297,8 +297,14 @@ export class PatternLibrary {
 		return this.getSlots().find(slot => slot.getId() === id);
 	}
 
-	public getPatterns(): Pattern[] {
-		return [...this.patterns.values()];
+	public getPatterns(ids?: string[]): Pattern[] {
+		if (typeof ids === 'undefined') {
+			return [...this.patterns.values()];
+		}
+
+		return ids
+			.map(id => this.getPatternById(id))
+			.filter((pattern): pattern is Pattern => typeof pattern !== 'undefined');
 	}
 
 	public getSlots(): PatternSlot[] {

src/model/pattern-search.ts

@@ -0,0 +1,26 @@
+import * as Fuse from 'fuse.js';
+import * as Mobx from 'mobx';
+import { Pattern } from './pattern';
+import * as Types from '../types';
+
+export interface PatternSearchInit {
+	patterns: Pattern[];
+}
+
+export class PatternSearch {
+	@Mobx.observable private fuse: Fuse;
+
+	public constructor(init: PatternSearchInit) {
+		this.fuse = new Fuse(init.patterns.map(item => item.toJSON()), {
+			keys: ['name', 'description']
+		});
+	}
+
+	public query(term: string): string[] {
+		if (term.trim().length === 0) {
+			// tslint:disable-next-line:no-any
+			return (this.fuse as any).list.map(item => item.id);
+		}
+		return this.fuse.search<Types.SerializedPattern>(term).map(match => match.id);
+	}
+}

src/model/project.ts

@@ -3,6 +3,7 @@ import { ElementAction } from './element-action';
 import * as Mobx from 'mobx';
 import * as _ from 'lodash';
 import { Page } from './page';
+import { PatternSearch } from './pattern-search';
 import { Pattern, PatternSlot } from './pattern';
 import { PatternLibrary } from './pattern-library';
 import { AnyPatternProperty } from './pattern-property';
@@ -49,6 +50,13 @@ export class Project {
 
 	@Mobx.observable private userStore: UserStore;
 
+	@Mobx.computed
+	private get patternSearch(): PatternSearch {
+		return new PatternSearch({
+			patterns: this.getPatternLibraries().reduce((ps, lib) => [...ps, ...lib.getPatterns()], [])
+		});
+	}
+
 	public constructor(init: ProjectProperties) {
 		this.name = init.name;
 		this.id = init.id ? init.id : uuid.v4();
@@ -324,6 +332,10 @@ export class Project {
 		}, undefined);
 	}
 
+	public getPatternSearch(): PatternSearch {
+		return this.patternSearch;
+	}
+
 	public getPatternSlotById(id: string): PatternSlot | undefined {
 		return this.getPatternLibraries().reduce((result, lib) => {
 			if (typeof result !== 'undefined') {