From 15306e50b2085571acb09a5258577c25a37943bc Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Wed, 14 Aug 2024 00:03:58 +0200
Subject: [PATCH] feat(ui): add filter to `BuilderSidebarToolbar`. WF-42

---
 src/ui/src/builder/BuilderSidebarToolbar.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/ui/src/builder/BuilderSidebarToolbar.vue b/src/ui/src/builder/BuilderSidebarToolbar.vue
index deb50f3aa..b1bb90bf5 100644
--- a/src/ui/src/builder/BuilderSidebarToolbar.vue
+++ b/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,
 		);