feat(ui): add filter to BuilderSidebarToolbar. WF-42

src/ui/src/builder/BuilderSidebarToolbar.vue

@@ -4,6 +4,11 @@
 			<i class="material-symbols-outlined"> handyman </i>
 			<h3>Toolkit</h3>
 		</div>
+		<WdsTextInput
+			v-model="searchQuery"
+			placeholder="Search a component"
+			left-icon="search"
+		/>
 		<div class="categories">
 			<template
 				v-for="(categoryData, category) in categoriesData"
@@ -63,6 +68,7 @@ import { Ref, computed, inject, ref } from "vue";
 import { useDragDropComponent } from "./useDragDropComponent";
 import injectionKeys from "../injectionKeys";
 import { Component, WriterComponentDefinition } from "../writerTypes";
+import WdsTextInput from "../wds/WdsTextInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -74,6 +80,8 @@ type CategoryData = {
 	icon?: string;
 };
 
+const searchQuery = ref("");
+
 const categoriesData: Ref<Record<string, CategoryData>> = ref({
 	Root: {
 		isVisible: false,
@@ -114,6 +122,15 @@ const definitionsByDisplayCategory = computed(() => {
 
 	types.map((type) => {
 		const definition = wf.getComponentDefinition(type);
+
+		const matchingSearch =
+			searchQuery.value === "" ||
+			definition.name
+				.toLocaleLowerCase()
+				.includes(searchQuery.value.toLocaleLowerCase());
+
+		if (!matchingSearch) return;
+
 		const isMatch = Object.keys(categoriesData.value).includes(
 			definition.category,
 		);