From aa6d483713c9a3a0a4db5c269fb85387e295ee7f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 7 Jun 2022 15:08:46 +0100
Subject: [PATCH] Include block results when searching for components

---
 .../new/_components/NewComponentPanel.svelte  | 50 +++++++++----------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
index 39ee1cb44a..c540af5d4f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte
@@ -76,11 +76,9 @@
       return []
     }
 
-    // Split list into either components or blocks initially
-    if (section === "components") {
+    // Remove blocks if there is no search string
+    if (!search) {
       structure = structure.filter(category => category.name !== "Blocks")
-    } else {
-      structure = structure.filter(category => category.name === "Blocks")
     }
 
     // Return only items which match the search string
@@ -159,33 +157,31 @@
   borderRight
 >
   <Layout paddingX="L" paddingY="XL" gap="S">
-    <ActionGroup compact justified>
-      <ActionButton
-        fullWidth
-        selected={section === "components"}
-        on:click={() => (section = "components")}>Components</ActionButton
-      >
-      <ActionButton
-        fullWidth
-        selected={section === "blocks"}
-        on:click={() => (section = "blocks")}>Blocks</ActionButton
-      >
-    </ActionGroup>
+    <Search
+      placeholder="Search"
+      value={searchString}
+      on:change={e => (searchString = e.detail)}
+      bind:inputRef={searchRef}
+    />
+    {#if !searchString}
+      <ActionGroup compact justified>
+        <ActionButton
+          fullWidth
+          selected={section === "components"}
+          on:click={() => (section = "components")}>Components</ActionButton
+        >
+        <ActionButton
+          fullWidth
+          selected={section === "blocks"}
+          on:click={() => (section = "blocks")}>Blocks</ActionButton
+        >
+      </ActionGroup>
+    {/if}
   </Layout>
   <div>
     <Divider noMargin noGrid />
   </div>
-  {#if section === "components"}
-    <Layout paddingX="L" paddingY="XL">
-      <Search
-        placeholder="Search"
-        value={searchString}
-        on:change={e => (searchString = e.detail)}
-        bind:inputRef={searchRef}
-      />
-    </Layout>
-  {/if}
-  {#if section === "components"}
+  {#if searchString || section === "components"}
     {#each filteredStructure as category}
       <DetailSummary name={category.name} collapsible={false}>
         <div class="component-grid">