Add snippets to bindingPanel

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -436,6 +436,7 @@
           addBinding={onSelectBinding}
           {addSnippet}
           {mode}
+          {snippets}
         />
       {:else if sidePanel === SidePanel.Evaluation}
         <EvaluationSidePanel

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -10,6 +10,7 @@
   export let addBinding: (_binding: EnrichedBinding) => void
   export let addSnippet: (_snippet: Snippet) => void
   export let bindings: EnrichedBinding[]
+  export let snippets: Snippet[] | null
   export let mode: BindingMode
   export let allowHelpers: boolean
   export let allowSnippets: boolean
@@ -64,6 +65,28 @@
     )
   })
 
+  $: filteredSnippets = getFilteredSnippets(
+    allowSnippets,
+    snippets || [],
+    search
+  )
+
+  const getFilteredSnippets = (
+    enableSnippets: boolean,
+    snippets: Snippet[],
+    search: string
+  ) => {
+    if (!enableSnippets || !snippets.length) {
+      return []
+    }
+    if (!search?.length) {
+      return snippets
+    }
+    return snippets.filter(snippet =>
+      snippet.name.toLowerCase().includes(search.toLowerCase())
+    )
+  }
+
   const getHelperExample = (helper: Helper, js: boolean) => {
     let example = helper.example || ""
     if (js) {
@@ -301,6 +324,29 @@
           </div>
         {/if}
       {/if}
+
+      {#if selectedCategory === "Snippets" || search}
+        {#if filteredSnippets?.length}
+          <div class="sub-section">
+            <ul class="helpers">
+              {#each filteredSnippets as helper}
+                <li
+                  class="binding"
+                  on:mouseenter={e =>
+                    showHelperPopover(helper, e.currentTarget)}
+                  on:mouseleave={hidePopover}
+                  on:click={() => addSnippet(helper)}
+                >
+                  <span class="binding__label">{helper.name}</span>
+                  <span class="binding__typeWrap">
+                    <span class="binding__type">snippet</span>
+                  </span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+      {/if}
     {/if}
   </Layout>
 </div>