From 8b3c2027f49454cc3a284eb6af7af00bffcebfe3 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 10:15:14 +0100
Subject: [PATCH 01/18] Add tooltips

---
 .../common/bindings/BindingPanel.svelte       | 22 ++++++++++++++-----
 packages/types/src/ui/components/index.ts     |  1 -
 packages/types/src/ui/components/sidepanel.ts |  5 -----
 3 files changed, 17 insertions(+), 11 deletions(-)
 delete mode 100644 packages/types/src/ui/components/sidepanel.ts

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 1f611365003..0cb1526a6fa 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -32,7 +32,7 @@
   import { capitalise } from "@/helpers"
   import { Utils, JsonFormatter } from "@budibase/frontend-core"
   import { licensing } from "@/stores/portal"
-  import { BindingMode, SidePanel } from "@budibase/types"
+  import { BindingMode } from "@budibase/types"
   import type {
     EnrichedBinding,
     Snippet,
@@ -71,6 +71,17 @@
   let expressionError: string | undefined
   let evaluating = false
 
+  const enum SidePanel {
+    Bindings = "Bindings",
+    Evaluation = "Evaluation",
+    Snippets = "Snippets",
+  }
+  const SidePanelIcons: Record<SidePanel, string> = {
+    Bindings: "FlashOn",
+    Evaluation: "Play",
+    Snippets: "Code",
+  }
+
   $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(
@@ -342,14 +353,15 @@
             {/each}
           </div>
           <div class="side-tabs">
-            {#each sidePanelOptions as panel}
+            {#each sidePanelOptions as panelOption}
               <ActionButton
                 size="M"
                 quiet
-                selected={sidePanel === panel}
-                on:click={() => changeSidePanel(panel)}
+                selected={sidePanel === panelOption}
+                on:click={() => changeSidePanel(panelOption)}
+                tooltip={panelOption}
               >
-                <Icon name={panel} size="S" />
+                <Icon name={SidePanelIcons[panelOption]} size="S" />
               </ActionButton>
             {/each}
           </div>
diff --git a/packages/types/src/ui/components/index.ts b/packages/types/src/ui/components/index.ts
index c34174120c9..b6bbdd6ed77 100644
--- a/packages/types/src/ui/components/index.ts
+++ b/packages/types/src/ui/components/index.ts
@@ -1,4 +1,3 @@
-export * from "./sidepanel"
 export * from "./codeEditor"
 export * from "./errors"
 
diff --git a/packages/types/src/ui/components/sidepanel.ts b/packages/types/src/ui/components/sidepanel.ts
deleted file mode 100644
index f2d62458d69..00000000000
--- a/packages/types/src/ui/components/sidepanel.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export enum SidePanel {
-  Bindings = "FlashOn",
-  Evaluation = "Play",
-  Snippets = "Code",
-}

From bd82399e944085cb12c2e3437fffb2541b1413d3 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 10:25:48 +0100
Subject: [PATCH 02/18] Add snippets to side panel

---
 .../src/components/common/bindings/BindingPanel.svelte    | 2 ++
 .../components/common/bindings/BindingSidePanel.svelte    | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 0cb1526a6fa..11037f3671a 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -430,9 +430,11 @@
         <BindingSidePanel
           bindings={enrichedBindings}
           {allowHelpers}
+          {allowSnippets}
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
+          {addSnippet}
           {mode}
         />
       {:else if sidePanel === SidePanel.Evaluation}
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 1b375db867a..e242ae36654 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -3,14 +3,16 @@
   import { convertToJS } from "@budibase/string-templates"
   import { Input, Layout, Icon, Popover } from "@budibase/bbui"
   import { handlebarsCompletions } from "@/constants/completions"
-  import type { EnrichedBinding, Helper } from "@budibase/types"
+  import type { EnrichedBinding, Helper, Snippet } from "@budibase/types"
   import { BindingMode } from "@budibase/types"
 
   export let addHelper: (_helper: Helper, _js?: boolean) => void
   export let addBinding: (_binding: EnrichedBinding) => void
+  export let addSnippet: (_snippet: Snippet) => void
   export let bindings: EnrichedBinding[]
   export let mode: BindingMode
   export let allowHelpers: boolean
+  export let allowSnippets: boolean
   export let context = null
 
   let search = ""
@@ -35,6 +37,7 @@
   $: categoryIcons = {
     ...bindingIcons,
     Helpers: "MagicWand",
+    Snippets: "Code",
   } as Record<string, string>
   $: categories = Object.entries(groupBy("category", bindings))
   $: categoryNames = getCategoryNames(categories)
@@ -77,6 +80,9 @@
     if (allowHelpers) {
       names.push("Helpers")
     }
+    if (allowSnippets) {
+      names.push("Snippets")
+    }
     return names
   }
 

From c0830f310cf771da225b8f930965b6e7f354f1e6 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 12:23:07 +0100
Subject: [PATCH 03/18] Add snippets to bindingPanel

---
 .../common/bindings/BindingPanel.svelte       |  1 +
 .../common/bindings/BindingSidePanel.svelte   | 46 +++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 11037f3671a..87602720439 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -436,6 +436,7 @@
           addBinding={onSelectBinding}
           {addSnippet}
           {mode}
+          {snippets}
         />
       {:else if sidePanel === SidePanel.Evaluation}
         <EvaluationSidePanel
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index e242ae36654..2fb17d8ac4a 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/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>

From 1bb9dccfa1084c21bd34e43904c6e9b6ff1648a8 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 13:10:29 +0100
Subject: [PATCH 04/18] Show popover

---
 .../common/bindings/BindingSidePanel.svelte   | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 2fb17d8ac4a..eaa5152cf38 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -21,7 +21,7 @@
   let popover: Popover
   let popoverAnchor: HTMLElement | null
   let hoverTarget: {
-    helper: boolean
+    type: "binding" | "helper" | "snippet"
     code: string
     description?: string
   } | null
@@ -119,26 +119,39 @@
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {
-      helper: false,
+      type: "binding",
       code: binding.valueHTML,
     }
     popover.show()
   }
 
-  const showHelperPopover = (helper: any, target: HTMLElement) => {
+  const showHelperPopover = (helper: Helper, target: HTMLElement) => {
     stopHidingPopover()
     if (!helper.displayText && helper.description) {
       return
     }
     popoverAnchor = target
     hoverTarget = {
-      helper: true,
+      type: "helper",
       description: helper.description,
       code: getHelperExample(helper, mode === BindingMode.JavaScript),
     }
     popover.show()
   }
 
+  const showSnippetPopover = (snippet: Snippet, target: HTMLElement) => {
+    stopHidingPopover()
+    if (!snippet.code) {
+      return
+    }
+    popoverAnchor = target
+    hoverTarget = {
+      type: "snippet",
+      code: snippet.code,
+    }
+    popover.show()
+  }
+
   const hidePopover = () => {
     hideTimeout = setTimeout(() => {
       popover.hide()
@@ -329,15 +342,15 @@
         {#if filteredSnippets?.length}
           <div class="sub-section">
             <ul class="helpers">
-              {#each filteredSnippets as helper}
+              {#each filteredSnippets as snippet}
                 <li
                   class="binding"
                   on:mouseenter={e =>
-                    showHelperPopover(helper, e.currentTarget)}
+                    showSnippetPopover(snippet, e.currentTarget)}
                   on:mouseleave={hidePopover}
-                  on:click={() => addSnippet(helper)}
+                  on:click={() => addSnippet(snippet)}
                 >
-                  <span class="binding__label">{helper.name}</span>
+                  <span class="binding__label">{snippet.name}</span>
                   <span class="binding__typeWrap">
                     <span class="binding__type">snippet</span>
                   </span>

From 6b2e87c0f378795f1a1c2a874b23555f3380053b Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 13:18:24 +0100
Subject: [PATCH 05/18] Format code

---
 .../common/bindings/BindingSidePanel.svelte   | 55 +++++++++++++------
 1 file changed, 39 insertions(+), 16 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index eaa5152cf38..b949874e306 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -5,6 +5,8 @@
   import { handlebarsCompletions } from "@/constants/completions"
   import type { EnrichedBinding, Helper, Snippet } from "@budibase/types"
   import { BindingMode } from "@budibase/types"
+  import { EditorModes } from "../CodeEditor"
+  import CodeEditor from "../CodeEditor/CodeEditor.svelte"
 
   export let addHelper: (_helper: Helper, _js?: boolean) => void
   export let addBinding: (_binding: EnrichedBinding) => void
@@ -41,7 +43,14 @@
     Snippets: "Code",
   } as Record<string, string>
   $: categories = Object.entries(groupBy("category", bindings))
-  $: categoryNames = getCategoryNames(categories)
+
+  $: filteredSnippets = getFilteredSnippets(
+    mode,
+    allowSnippets,
+    snippets || [],
+    search
+  )
+  $: categoryNames = getCategoryNames(categories, filteredSnippets.length > 0)
   $: searchRgx = new RegExp(search, "ig")
   $: filteredCategories = categories
     .map(([name, categoryBindings]) => ({
@@ -65,17 +74,15 @@
     )
   })
 
-  $: filteredSnippets = getFilteredSnippets(
-    allowSnippets,
-    snippets || [],
-    search
-  )
-
   const getFilteredSnippets = (
+    mode: BindingMode,
     enableSnippets: boolean,
     snippets: Snippet[],
     search: string
   ) => {
+    if (mode !== BindingMode.JavaScript) {
+      return []
+    }
     if (!enableSnippets || !snippets.length) {
       return []
     }
@@ -98,12 +105,15 @@
     return example || ""
   }
 
-  const getCategoryNames = (categories: [string, EnrichedBinding[]][]) => {
+  const getCategoryNames = (
+    categories: [string, EnrichedBinding[]][],
+    showSnippets: boolean
+  ) => {
     const names = [...categories.map(cat => cat[0])]
     if (allowHelpers) {
       names.push("Helpers")
     }
-    if (allowSnippets) {
+    if (showSnippets) {
       names.push("Snippets")
     }
     return names
@@ -192,7 +202,10 @@
     on:mouseenter={stopHidingPopover}
     on:mouseleave={hidePopover}
   >
-    <div class="binding-popover" class:helper={hoverTarget.helper}>
+    <div
+      class="binding-popover"
+      class:has-code={hoverTarget.type !== "binding"}
+    >
       {#if hoverTarget.description}
         <div>
           <!-- eslint-disable-next-line svelte/no-at-html-tags-->
@@ -200,8 +213,16 @@
         </div>
       {/if}
       {#if hoverTarget.code}
-        <!-- eslint-disable-next-line svelte/no-at-html-tags-->
-        <pre>{@html hoverTarget.code}</pre>
+        {#if mode === BindingMode.JavaScript}
+          <CodeEditor
+            value={hoverTarget.code?.trim()}
+            mode={EditorModes.JS}
+            readonly
+          />
+        {:else if mode === BindingMode.Text}
+          <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+          <pre>{@html hoverTarget.code}</pre>
+        {/if}
       {/if}
     </div>
   </Popover>
@@ -323,7 +344,6 @@
                   class="binding"
                   on:mouseenter={e =>
                     showHelperPopover(helper, e.currentTarget)}
-                  on:mouseleave={hidePopover}
                   on:click={() =>
                     addHelper(helper, mode === BindingMode.JavaScript)}
                 >
@@ -347,7 +367,6 @@
                   class="binding"
                   on:mouseenter={e =>
                     showSnippetPopover(snippet, e.currentTarget)}
-                  on:mouseleave={hidePopover}
                   on:click={() => addSnippet(snippet)}
                 >
                   <span class="binding__label">{snippet.name}</span>
@@ -503,7 +522,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .binding-popover.helper pre {
+  .binding-popover.has-code pre {
     color: var(--spectrum-global-color-blue-700);
   }
   .binding-popover pre :global(span) {
@@ -515,7 +534,11 @@
     padding: 0;
     margin: 0;
   }
-  .binding-popover.helper :global(code) {
+  .binding-popover.has-code :global(code) {
     font-size: 12px;
   }
+  .binding-popover.has-code :global(.cm-line),
+  .binding-popover.has-code :global(.cm-content) {
+    padding: 0;
+  }
 </style>

From 323238902a7b9b8faa06dcf57578c5eb32e7d858 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 13:21:11 +0100
Subject: [PATCH 06/18] Reset on change

---
 .../src/components/common/bindings/BindingSidePanel.svelte   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index b949874e306..b79a9aaf429 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -74,6 +74,11 @@
     )
   })
 
+  function onModeChange(_mode: BindingMode) {
+    selectedCategory = null
+  }
+  $: onModeChange(mode)
+
   const getFilteredSnippets = (
     mode: BindingMode,
     enableSnippets: boolean,

From eaf301f399974f61af45015fdfe23fbba7f8239e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 13:37:48 +0100
Subject: [PATCH 07/18] Edit snippet

---
 .../common/bindings/BindingSidePanel.svelte   | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index b79a9aaf429..eee36b0fad0 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -7,6 +7,7 @@
   import { BindingMode } from "@budibase/types"
   import { EditorModes } from "../CodeEditor"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
+  import SnippetDrawer from "./SnippetDrawer.svelte"
 
   export let addHelper: (_helper: Helper, _js?: boolean) => void
   export let addBinding: (_binding: EnrichedBinding) => void
@@ -30,6 +31,8 @@
   let helpers = handlebarsCompletions()
   let selectedCategory: string | null
   let hideTimeout: ReturnType<typeof setTimeout> | null
+  let snippetDrawer: SnippetDrawer
+  let editableSnippet: Snippet
 
   $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
     if (ele.icon) {
@@ -193,6 +196,13 @@
     searching = false
     search = ""
   }
+
+  const editSnippet = (e: Event, snippet: Snippet) => {
+    e.preventDefault()
+    e.stopPropagation()
+    editableSnippet = snippet
+    snippetDrawer.show()
+  }
 </script>
 
 {#if popoverAnchor && hoverTarget}
@@ -366,18 +376,29 @@
       {#if selectedCategory === "Snippets" || search}
         {#if filteredSnippets?.length}
           <div class="sub-section">
-            <ul class="helpers">
+            <ul>
               {#each filteredSnippets as snippet}
                 <li
                   class="binding"
                   on:mouseenter={e =>
                     showSnippetPopover(snippet, e.currentTarget)}
+                  on:mouseleave={hidePopover}
                   on:click={() => addSnippet(snippet)}
                 >
                   <span class="binding__label">{snippet.name}</span>
-                  <span class="binding__typeWrap">
-                    <span class="binding__type">snippet</span>
-                  </span>
+                  {#if search}
+                    <span class="binding__typeWrap">
+                      <span class="binding__type">snippet</span>
+                    </span>
+                  {:else}
+                    <Icon
+                      name="Edit"
+                      hoverable
+                      newStyles
+                      size="S"
+                      on:click={e => editSnippet(e, snippet)}
+                    />
+                  {/if}
                 </li>
               {/each}
             </ul>
@@ -388,6 +409,8 @@
   </Layout>
 </div>
 
+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
+
 <style>
   .binding-side-panel {
     border-left: var(--border-light);
@@ -452,6 +475,7 @@
     display: flex;
     align-items: center;
     gap: var(--spacing-m);
+    justify-content: space-between;
   }
   li.binding .binding__typeWrap {
     flex: 1;

From 97706e5109261d3a87b50b9f489a639a2ed10fac Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 13:45:56 +0100
Subject: [PATCH 08/18] Format

---
 .../common/bindings/BindingSidePanel.svelte   | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index eee36b0fad0..b17eedd294f 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -32,7 +32,7 @@
   let selectedCategory: string | null
   let hideTimeout: ReturnType<typeof setTimeout> | null
   let snippetDrawer: SnippetDrawer
-  let editableSnippet: Snippet
+  let editableSnippet: Snippet | null
 
   $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
     if (ele.icon) {
@@ -197,6 +197,11 @@
     search = ""
   }
 
+  const createSnippet = () => {
+    editableSnippet = null
+    snippetDrawer.show()
+  }
+
   const editSnippet = (e: Event, snippet: Snippet) => {
     e.preventDefault()
     e.stopPropagation()
@@ -256,6 +261,16 @@
           on:click={() => (selectedCategory = null)}
         />
         {selectedCategory}
+        {#if selectedCategory === "Snippets"}
+          <div class="add-snippet-button">
+            <Icon
+              size="S"
+              name="Add"
+              hoverable
+              newStyles
+              on:click={createSnippet}
+            />
+          </div>{/if}
       </div>
     {/if}
 
@@ -570,4 +585,8 @@
   .binding-popover.has-code :global(.cm-content) {
     padding: 0;
   }
+
+  .add-snippet-button {
+    margin-left: auto;
+  }
 </style>

From ab6907691fad5f023f99809f4e77be5a5b61ed37 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 15:58:23 +0100
Subject: [PATCH 09/18] Extract

---
 .../common/bindings/BindingSidePanel.svelte   | 109 +---------
 .../bindings/snippets/SidePanelContent.svelte | 191 ++++++++++++++++++
 .../bindings/snippets/SidePanelHeader.svelte  |  46 +++++
 3 files changed, 246 insertions(+), 100 deletions(-)
 create mode 100644 packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
 create mode 100644 packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index b17eedd294f..0b542a413be 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -7,7 +7,8 @@
   import { BindingMode } from "@budibase/types"
   import { EditorModes } from "../CodeEditor"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
-  import SnippetDrawer from "./SnippetDrawer.svelte"
+  import SnippetsSidePanelHeader from "./snippets/SidePanelHeader.svelte"
+  import SnippetsSidePanelContent from "./snippets/SidePanelContent.svelte"
 
   export let addHelper: (_helper: Helper, _js?: boolean) => void
   export let addBinding: (_binding: EnrichedBinding) => void
@@ -24,15 +25,13 @@
   let popover: Popover
   let popoverAnchor: HTMLElement | null
   let hoverTarget: {
-    type: "binding" | "helper" | "snippet"
+    type: "binding" | "helper"
     code: string
     description?: string
   } | null
   let helpers = handlebarsCompletions()
   let selectedCategory: string | null
   let hideTimeout: ReturnType<typeof setTimeout> | null
-  let snippetDrawer: SnippetDrawer
-  let editableSnippet: Snippet | null
 
   $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
     if (ele.icon) {
@@ -47,13 +46,10 @@
   } as Record<string, string>
   $: categories = Object.entries(groupBy("category", bindings))
 
-  $: filteredSnippets = getFilteredSnippets(
-    mode,
-    allowSnippets,
-    snippets || [],
-    search
+  $: categoryNames = getCategoryNames(
+    categories,
+    allowSnippets && mode === BindingMode.JavaScript
   )
-  $: categoryNames = getCategoryNames(categories, filteredSnippets.length > 0)
   $: searchRgx = new RegExp(search, "ig")
   $: filteredCategories = categories
     .map(([name, categoryBindings]) => ({
@@ -82,26 +78,6 @@
   }
   $: onModeChange(mode)
 
-  const getFilteredSnippets = (
-    mode: BindingMode,
-    enableSnippets: boolean,
-    snippets: Snippet[],
-    search: string
-  ) => {
-    if (mode !== BindingMode.JavaScript) {
-      return []
-    }
-    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) {
@@ -157,19 +133,6 @@
     popover.show()
   }
 
-  const showSnippetPopover = (snippet: Snippet, target: HTMLElement) => {
-    stopHidingPopover()
-    if (!snippet.code) {
-      return
-    }
-    popoverAnchor = target
-    hoverTarget = {
-      type: "snippet",
-      code: snippet.code,
-    }
-    popover.show()
-  }
-
   const hidePopover = () => {
     hideTimeout = setTimeout(() => {
       popover.hide()
@@ -196,18 +159,6 @@
     searching = false
     search = ""
   }
-
-  const createSnippet = () => {
-    editableSnippet = null
-    snippetDrawer.show()
-  }
-
-  const editSnippet = (e: Event, snippet: Snippet) => {
-    e.preventDefault()
-    e.stopPropagation()
-    editableSnippet = snippet
-    snippetDrawer.show()
-  }
 </script>
 
 {#if popoverAnchor && hoverTarget}
@@ -262,15 +213,8 @@
         />
         {selectedCategory}
         {#if selectedCategory === "Snippets"}
-          <div class="add-snippet-button">
-            <Icon
-              size="S"
-              name="Add"
-              hoverable
-              newStyles
-              on:click={createSnippet}
-            />
-          </div>{/if}
+          <SnippetsSidePanelHeader />
+        {/if}
       </div>
     {/if}
 
@@ -389,43 +333,12 @@
       {/if}
 
       {#if selectedCategory === "Snippets" || search}
-        {#if filteredSnippets?.length}
-          <div class="sub-section">
-            <ul>
-              {#each filteredSnippets as snippet}
-                <li
-                  class="binding"
-                  on:mouseenter={e =>
-                    showSnippetPopover(snippet, e.currentTarget)}
-                  on:mouseleave={hidePopover}
-                  on:click={() => addSnippet(snippet)}
-                >
-                  <span class="binding__label">{snippet.name}</span>
-                  {#if search}
-                    <span class="binding__typeWrap">
-                      <span class="binding__type">snippet</span>
-                    </span>
-                  {:else}
-                    <Icon
-                      name="Edit"
-                      hoverable
-                      newStyles
-                      size="S"
-                      on:click={e => editSnippet(e, snippet)}
-                    />
-                  {/if}
-                </li>
-              {/each}
-            </ul>
-          </div>
-        {/if}
+        <SnippetsSidePanelContent {snippets} {addSnippet} {search} />
       {/if}
     {/if}
   </Layout>
 </div>
 
-<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
-
 <style>
   .binding-side-panel {
     border-left: var(--border-light);
@@ -585,8 +498,4 @@
   .binding-popover.has-code :global(.cm-content) {
     padding: 0;
   }
-
-  .add-snippet-button {
-    margin-left: auto;
-  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte b/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
new file mode 100644
index 00000000000..b83d9323b7a
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { Icon, Popover, Body, Button } from "@budibase/bbui"
+  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
+  import { EditorModes } from "@/components/common/CodeEditor"
+  import SnippetDrawer from "../SnippetDrawer.svelte"
+  import { licensing } from "@/stores/portal"
+  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
+  import type { Snippet } from "@budibase/types"
+
+  export let addSnippet
+  export let snippets
+  export let search
+
+  let popover: Popover
+  let popoverAnchor: HTMLElement | null
+  let hoverTarget: {
+    type: "binding" | "helper" | "snippet"
+    code: string
+    description?: string
+  } | null
+  let hideTimeout: ReturnType<typeof setTimeout> | null
+  let snippetDrawer: SnippetDrawer
+  let editableSnippet: Snippet | null
+
+  $: enableSnippets = !$licensing.isFreePlan
+
+  $: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
+
+  const showSnippet = (snippet: Snippet, target: HTMLElement) => {
+    stopHidingPopover()
+    if (!snippet.code) {
+      return
+    }
+    popoverAnchor = target
+    hoverTarget = {
+      type: "snippet",
+      code: snippet.code,
+    }
+    popover.show()
+  }
+
+  const hidePopover = () => {
+    hideTimeout = setTimeout(() => {
+      popover.hide()
+      popoverAnchor = null
+      hoverTarget = null
+      hideTimeout = null
+    }, 100)
+  }
+
+  const stopHidingPopover = () => {
+    if (hideTimeout) {
+      clearTimeout(hideTimeout)
+      hideTimeout = null
+    }
+  }
+
+  const createSnippet = () => {
+    editableSnippet = null
+    snippetDrawer.show()
+  }
+
+  const editSnippet = (e: Event, snippet: Snippet) => {
+    e.preventDefault()
+    e.stopPropagation()
+    editableSnippet = snippet
+    snippetDrawer.show()
+  }
+
+  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())
+    )
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="snippet-list">
+  {#if enableSnippets}
+    {#each filteredSnippets as snippet}
+      <div
+        class="snippet"
+        on:mouseenter={e => showSnippet(snippet, e.currentTarget)}
+        on:mouseleave={hidePopover}
+        on:click={() => addSnippet(snippet)}
+      >
+        {snippet.name}
+        <Icon
+          name="Edit"
+          hoverable
+          newStyles
+          size="S"
+          on:click={e => editSnippet(e, snippet)}
+        />
+      </div>
+    {/each}
+  {:else if !search}
+    <div class="upgrade">
+      <Body size="S">
+        Snippets let you create reusable JS functions and values that can all be
+        managed in one place
+      </Body>
+      {#if enableSnippets}
+        <Button cta on:click={createSnippet}>Create snippet</Button>
+      {:else}
+        <UpgradeButton />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+{#if hoverTarget && popoverAnchor}
+  <Popover
+    align="left-outside"
+    bind:this={popover}
+    anchor={popoverAnchor}
+    minWidth={0}
+    maxWidth={480}
+    maxHeight={480}
+    dismissible={false}
+    on:mouseenter={stopHidingPopover}
+    on:mouseleave={hidePopover}
+  >
+    <div class="snippet-popover">
+      {#key hoverTarget}
+        <CodeEditor
+          value={hoverTarget.code?.trim()}
+          mode={EditorModes.JS}
+          readonly
+        />
+      {/key}
+    </div>
+  </Popover>
+{/if}
+
+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
+
+<style>
+  /* Upgrade */
+  .upgrade {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .upgrade :global(p) {
+    text-align: center;
+    align-self: center;
+  }
+
+  /* List */
+  .snippet-list {
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+  }
+  .snippet {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
+    word-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
+  }
+  .snippet:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    cursor: pointer;
+  }
+
+  /* Popover */
+  .snippet-popover {
+    width: 400px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte b/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte
new file mode 100644
index 00000000000..b62282299b4
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { Icon, Tags, Tag } from "@budibase/bbui"
+  import { licensing } from "@/stores/portal"
+  import SnippetDrawer from "../SnippetDrawer.svelte"
+  import type { Snippet } from "@budibase/types"
+
+  $: enableSnippets = !$licensing.isFreePlan
+
+  let snippetDrawer: SnippetDrawer
+  let editableSnippet: Snippet | null
+
+  const createSnippet = () => {
+    editableSnippet = null
+    snippetDrawer.show()
+  }
+</script>
+
+{#if enableSnippets}
+  <div class="add-button">
+    <Icon size="S" name="Add" hoverable newStyles on:click={createSnippet} />
+  </div>
+{:else}
+  <div class="title">
+    <Tags>
+      <Tag icon="LockClosed">Premium</Tag>
+    </Tags>
+  </div>
+{/if}
+
+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
+
+<style>
+  .title {
+    flex: 1 1 auto;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+  .add-button {
+    margin-left: auto;
+  }
+</style>

From af6307a60834317b03b46705a66217642836933c Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 16:01:37 +0100
Subject: [PATCH 10/18] Remove duplicates

---
 .../common/bindings/BindingPanel.svelte       |  22 +-
 .../common/bindings/SnippetSidePanel.svelte   | 278 ------------------
 .../src/components/common/bindings/index.js   |   2 -
 .../bindings/snippets/SidePanelContent.svelte |   2 +-
 .../bindings/snippets/SidePanelHeader.svelte  |   2 +-
 .../{ => snippets}/SnippetDrawer.svelte       |   0
 6 files changed, 4 insertions(+), 302 deletions(-)
 delete mode 100644 packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
 rename packages/builder/src/components/common/bindings/{ => snippets}/SnippetDrawer.svelte (100%)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 87602720439..d4027ee90a1 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -27,7 +27,6 @@
   } from "../CodeEditor"
   import BindingSidePanel from "./BindingSidePanel.svelte"
   import EvaluationSidePanel from "./EvaluationSidePanel.svelte"
-  import SnippetSidePanel from "./SnippetSidePanel.svelte"
   import { BindingHelpers } from "./utils"
   import { capitalise } from "@/helpers"
   import { Utils, JsonFormatter } from "@budibase/frontend-core"
@@ -74,22 +73,15 @@
   const enum SidePanel {
     Bindings = "Bindings",
     Evaluation = "Evaluation",
-    Snippets = "Snippets",
   }
   const SidePanelIcons: Record<SidePanel, string> = {
     Bindings: "FlashOn",
     Evaluation: "Play",
-    Snippets: "Code",
   }
 
   $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
-  $: sidePanelOptions = getSidePanelOptions(
-    bindings,
-    context,
-    allowSnippets,
-    mode
-  )
+  $: sidePanelOptions = getSidePanelOptions(bindings, context)
   $: enrichedBindings = enrichBindings(bindings, context, snippets)
   $: usingJS = mode === BindingMode.JavaScript
   $: editorMode =
@@ -148,12 +140,7 @@
     return options
   }
 
-  const getSidePanelOptions = (
-    bindings: EnrichedBinding[],
-    context: any,
-    useSnippets: boolean,
-    mode: BindingMode | null
-  ) => {
+  const getSidePanelOptions = (bindings: EnrichedBinding[], context: any) => {
     let options = []
     if (bindings?.length) {
       options.push(SidePanel.Bindings)
@@ -161,9 +148,6 @@
     if (context && Object.keys(context).length > 0) {
       options.push(SidePanel.Evaluation)
     }
-    if (useSnippets && mode === BindingMode.JavaScript) {
-      options.push(SidePanel.Snippets)
-    }
     return options
   }
 
@@ -446,8 +430,6 @@
           {evaluating}
           expression={editorValue ? editorValue : ""}
         />
-      {:else if sidePanel === SidePanel.Snippets}
-        <SnippetSidePanel {addSnippet} {snippets} />
       {/if}
     </div>
   </div>
diff --git a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte b/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
deleted file mode 100644
index 95f40005c0a..00000000000
--- a/packages/builder/src/components/common/bindings/SnippetSidePanel.svelte
+++ /dev/null
@@ -1,278 +0,0 @@
-<script>
-  import {
-    Input,
-    Layout,
-    Icon,
-    Popover,
-    Tags,
-    Tag,
-    Body,
-    Button,
-  } from "@budibase/bbui"
-  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
-  import { EditorModes } from "@/components/common/CodeEditor"
-  import SnippetDrawer from "./SnippetDrawer.svelte"
-  import { licensing } from "@/stores/portal"
-  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
-
-  export let addSnippet
-  export let snippets
-
-  let search = ""
-  let searching = false
-  let popover
-  let popoverAnchor
-  let hoveredSnippet
-  let hideTimeout
-  let snippetDrawer
-  let editableSnippet
-
-  $: enableSnippets = !$licensing.isFreePlan
-  $: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
-
-  const getFilteredSnippets = (enableSnippets, snippets, search) => {
-    if (!enableSnippets || !snippets?.length) {
-      return []
-    }
-    if (!search?.length) {
-      return snippets
-    }
-    return snippets.filter(snippet =>
-      snippet.name.toLowerCase().includes(search.toLowerCase())
-    )
-  }
-
-  const showSnippet = (snippet, target) => {
-    stopHidingPopover()
-    popoverAnchor = target
-    hoveredSnippet = snippet
-    popover.show()
-  }
-
-  const hidePopover = () => {
-    hideTimeout = setTimeout(() => {
-      popover.hide()
-      popoverAnchor = null
-      hoveredSnippet = null
-      hideTimeout = null
-    }, 100)
-  }
-
-  const stopHidingPopover = () => {
-    if (hideTimeout) {
-      clearTimeout(hideTimeout)
-      hideTimeout = null
-    }
-  }
-
-  const startSearching = () => {
-    searching = true
-    search = ""
-  }
-
-  const stopSearching = () => {
-    searching = false
-    search = ""
-  }
-
-  const createSnippet = () => {
-    editableSnippet = null
-    snippetDrawer.show()
-  }
-
-  const editSnippet = (e, snippet) => {
-    e.preventDefault()
-    e.stopPropagation()
-    editableSnippet = snippet
-    snippetDrawer.show()
-  }
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="snippet-side-panel">
-  <Layout noPadding gap="S">
-    <div class="header">
-      {#if enableSnippets}
-        {#if searching}
-          <div class="search-input">
-            <Input
-              placeholder="Search for snippets"
-              autocomplete="off"
-              bind:value={search}
-              autofocus
-            />
-          </div>
-          <Icon
-            size="S"
-            name="Close"
-            hoverable
-            newStyles
-            on:click={stopSearching}
-          />
-        {:else}
-          <div class="title">Snippets</div>
-          <Icon
-            size="S"
-            name="Search"
-            hoverable
-            newStyles
-            on:click={startSearching}
-          />
-          <Icon
-            size="S"
-            name="Add"
-            hoverable
-            newStyles
-            on:click={createSnippet}
-          />
-        {/if}
-      {:else}
-        <div class="title">
-          Snippets
-          <Tags>
-            <Tag icon="LockClosed">Premium</Tag>
-          </Tags>
-        </div>
-      {/if}
-    </div>
-    <div class="snippet-list">
-      {#if enableSnippets && filteredSnippets?.length}
-        {#each filteredSnippets as snippet}
-          <div
-            class="snippet"
-            on:mouseenter={e => showSnippet(snippet, e.target)}
-            on:mouseleave={hidePopover}
-            on:click={() => addSnippet(snippet)}
-          >
-            {snippet.name}
-            <Icon
-              name="Edit"
-              hoverable
-              newStyles
-              size="S"
-              on:click={e => editSnippet(e, snippet)}
-            />
-          </div>
-        {/each}
-      {:else}
-        <div class="upgrade">
-          <Body size="S">
-            Snippets let you create reusable JS functions and values that can
-            all be managed in one place
-          </Body>
-          {#if enableSnippets}
-            <Button cta on:click={createSnippet}>Create snippet</Button>
-          {:else}
-            <UpgradeButton />
-          {/if}
-        </div>
-      {/if}
-    </div>
-  </Layout>
-</div>
-
-<Popover
-  align="left-outside"
-  bind:this={popover}
-  anchor={popoverAnchor}
-  minWidth={0}
-  maxWidth={480}
-  maxHeight={480}
-  dismissible={false}
-  on:mouseenter={stopHidingPopover}
-  on:mouseleave={hidePopover}
->
-  <div class="snippet-popover">
-    {#key hoveredSnippet}
-      <CodeEditor
-        value={hoveredSnippet.code?.trim()}
-        mode={EditorModes.JS}
-        readonly
-      />
-    {/key}
-  </div>
-</Popover>
-
-<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
-
-<style>
-  .snippet-side-panel {
-    border-left: var(--border-light);
-    height: 100%;
-    overflow: auto;
-  }
-
-  /* Header */
-  .header {
-    height: 53px;
-    padding: 0 var(--spacing-l);
-    display: flex;
-    align-items: center;
-    border-bottom: var(--border-light);
-    position: sticky;
-    top: 0;
-    gap: var(--spacing-m);
-    background: var(--background);
-    z-index: 1;
-  }
-  .header :global(input) {
-    border: none;
-    border-radius: 0;
-    background: none;
-    padding: 0;
-  }
-  .search-input,
-  .title {
-    flex: 1 1 auto;
-  }
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-
-  /* Upgrade */
-  .upgrade {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-l);
-  }
-  .upgrade :global(p) {
-    text-align: center;
-    align-self: center;
-  }
-
-  /* List */
-  .snippet-list {
-    padding: 0 var(--spacing-l);
-    padding-bottom: var(--spacing-l);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-  }
-  .snippet {
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m);
-    border-radius: 4px;
-    background-color: var(--spectrum-global-color-gray-200);
-    transition: background-color 130ms ease-out, color 130ms ease-out,
-      border-color 130ms ease-out;
-    word-wrap: break-word;
-    display: flex;
-    justify-content: space-between;
-  }
-  .snippet:hover {
-    color: var(--spectrum-global-color-gray-900);
-    background-color: var(--spectrum-global-color-gray-50);
-    cursor: pointer;
-  }
-
-  /* Popover */
-  .snippet-popover {
-    width: 400px;
-  }
-</style>
diff --git a/packages/builder/src/components/common/bindings/index.js b/packages/builder/src/components/common/bindings/index.js
index a2d4479959a..5a9c6f661bc 100644
--- a/packages/builder/src/components/common/bindings/index.js
+++ b/packages/builder/src/components/common/bindings/index.js
@@ -8,5 +8,3 @@ export { default as DrawerBindableSlot } from "./DrawerBindableSlot.svelte"
 export { default as EvaluationSidePanel } from "./EvaluationSidePanel.svelte"
 export { default as ModalBindableInput } from "./ModalBindableInput.svelte"
 export { default as ServerBindingPanel } from "./ServerBindingPanel.svelte"
-export { default as SnippetDrawer } from "./SnippetDrawer.svelte"
-export { default as SnippetSidePanel } from "./SnippetSidePanel.svelte"
diff --git a/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte b/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
index b83d9323b7a..7ddecf23c70 100644
--- a/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
+++ b/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
@@ -2,7 +2,7 @@
   import { Icon, Popover, Body, Button } from "@budibase/bbui"
   import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
   import { EditorModes } from "@/components/common/CodeEditor"
-  import SnippetDrawer from "../SnippetDrawer.svelte"
+  import SnippetDrawer from "./SnippetDrawer.svelte"
   import { licensing } from "@/stores/portal"
   import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
   import type { Snippet } from "@budibase/types"
diff --git a/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte b/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte
index b62282299b4..e278e5a72b6 100644
--- a/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte
+++ b/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Icon, Tags, Tag } from "@budibase/bbui"
   import { licensing } from "@/stores/portal"
-  import SnippetDrawer from "../SnippetDrawer.svelte"
+  import SnippetDrawer from "./SnippetDrawer.svelte"
   import type { Snippet } from "@budibase/types"
 
   $: enableSnippets = !$licensing.isFreePlan
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/snippets/SnippetDrawer.svelte
similarity index 100%
rename from packages/builder/src/components/common/bindings/SnippetDrawer.svelte
rename to packages/builder/src/components/common/bindings/snippets/SnippetDrawer.svelte

From ed2d52da3980a3ca1e89978b2c286d1bb498bcfb Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 20 Feb 2025 16:19:04 +0100
Subject: [PATCH 11/18] Fix lint conflicts

---
 .../common/bindings/BindingPanel.svelte       | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index d4027ee90a1..8d3c27b61b7 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -43,6 +43,8 @@
   import type { Log } from "@budibase/string-templates"
   import type { CodeValidator } from "@/types"
 
+  type SidePanel = "Bindings" | "Evaluation"
+
   const dispatch = createEventDispatcher()
 
   export let bindings: EnrichedBinding[] = []
@@ -70,16 +72,11 @@
   let expressionError: string | undefined
   let evaluating = false
 
-  const enum SidePanel {
-    Bindings = "Bindings",
-    Evaluation = "Evaluation",
-  }
   const SidePanelIcons: Record<SidePanel, string> = {
     Bindings: "FlashOn",
     Evaluation: "Play",
   }
 
-  $: useSnippets = allowSnippets && !$licensing.isFreePlan
   $: editorModeOptions = getModeOptions(allowHBS, allowJS)
   $: sidePanelOptions = getSidePanelOptions(bindings, context)
   $: enrichedBindings = enrichBindings(bindings, context, snippets)
@@ -96,7 +93,9 @@
   $: bindingOptions = bindingsToCompletions(bindings, editorMode)
   $: helperOptions = allowHelpers ? getHelperCompletions(editorMode) : []
   $: snippetsOptions =
-    usingJS && useSnippets && snippets?.length ? snippets : []
+    usingJS && allowSnippets && !$licensing.isFreePlan && snippets?.length
+      ? snippets
+      : []
 
   $: completions = !usingJS
     ? [hbAutocomplete([...bindingOptions, ...helperOptions])]
@@ -141,12 +140,12 @@
   }
 
   const getSidePanelOptions = (bindings: EnrichedBinding[], context: any) => {
-    let options = []
+    let options: SidePanel[] = []
     if (bindings?.length) {
-      options.push(SidePanel.Bindings)
+      options.push("Bindings")
     }
     if (context && Object.keys(context).length > 0) {
-      options.push(SidePanel.Evaluation)
+      options.push("Evaluation")
     }
     return options
   }
@@ -410,7 +409,7 @@
       </div>
     </div>
     <div class="side" class:visible={!!sidePanel}>
-      {#if sidePanel === SidePanel.Bindings}
+      {#if sidePanel === "Bindings"}
         <BindingSidePanel
           bindings={enrichedBindings}
           {allowHelpers}
@@ -422,7 +421,7 @@
           {mode}
           {snippets}
         />
-      {:else if sidePanel === SidePanel.Evaluation}
+      {:else if sidePanel === "Evaluation"}
         <EvaluationSidePanel
           {expressionResult}
           {expressionError}

From 39ff0789783d265ef49914126122da59b4ae4b9f Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Feb 2025 10:03:05 +0100
Subject: [PATCH 12/18] Unify

---
 packages/bbui/src/Popover/Popover.svelte      |   2 +-
 .../common/bindings/BindingSidePanel.svelte   | 184 +++++++++++++++--
 .../{snippets => }/SnippetDrawer.svelte       |   0
 .../bindings/snippets/SidePanelContent.svelte | 191 ------------------
 .../bindings/snippets/SidePanelHeader.svelte  |  46 -----
 5 files changed, 163 insertions(+), 260 deletions(-)
 rename packages/builder/src/components/common/bindings/{snippets => }/SnippetDrawer.svelte (100%)
 delete mode 100644 packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
 delete mode 100644 packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte

diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 5d0c5b7039b..3e7e63814e6 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -18,7 +18,7 @@
   import type { KeyboardEventHandler } from "svelte/elements"
   import { PopoverAlignment } from "../constants"
 
-  export let anchor: HTMLElement
+  export let anchor: HTMLElement | undefined
   export let align: PopoverAlignment | `${PopoverAlignment}` =
     PopoverAlignment.Right
   export let portalTarget: string | undefined = undefined
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 0b542a413be..033eeb7ea9a 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -1,14 +1,25 @@
 <script lang="ts">
   import groupBy from "lodash/fp/groupBy"
   import { convertToJS } from "@budibase/string-templates"
-  import { Input, Layout, Icon, Popover } from "@budibase/bbui"
+  import { licensing } from "@/stores/portal"
+  import {
+    Input,
+    Layout,
+    Icon,
+    Popover,
+    Tags,
+    Tag,
+    Body,
+    Button,
+  } from "@budibase/bbui"
   import { handlebarsCompletions } from "@/constants/completions"
   import type { EnrichedBinding, Helper, Snippet } from "@budibase/types"
   import { BindingMode } from "@budibase/types"
   import { EditorModes } from "../CodeEditor"
   import CodeEditor from "../CodeEditor/CodeEditor.svelte"
-  import SnippetsSidePanelHeader from "./snippets/SidePanelHeader.svelte"
-  import SnippetsSidePanelContent from "./snippets/SidePanelContent.svelte"
+
+  import SnippetDrawer from "./SnippetDrawer.svelte"
+  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
 
   export let addHelper: (_helper: Helper, _js?: boolean) => void
   export let addBinding: (_binding: EnrichedBinding) => void
@@ -23,16 +34,19 @@
   let search = ""
   let searching = false
   let popover: Popover
-  let popoverAnchor: HTMLElement | null
+  let popoverAnchor: HTMLElement | undefined
   let hoverTarget: {
-    type: "binding" | "helper"
+    type: "binding" | "helper" | "snippet"
     code: string
     description?: string
   } | null
   let helpers = handlebarsCompletions()
   let selectedCategory: string | null
   let hideTimeout: ReturnType<typeof setTimeout> | null
+  let snippetDrawer: SnippetDrawer
+  let editableSnippet: Snippet | null
 
+  $: enableSnippets = !$licensing.isFreePlan
   $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
     if (ele.icon) {
       acc[ele.category] = acc[ele.category] || ele.icon
@@ -73,6 +87,12 @@
     )
   })
 
+  $: filteredSnippets = getFilteredSnippets(
+    enableSnippets,
+    snippets || [],
+    search
+  )
+
   function onModeChange(_mode: BindingMode) {
     selectedCategory = null
   }
@@ -136,7 +156,7 @@
   const hidePopover = () => {
     hideTimeout = setTimeout(() => {
       popover.hide()
-      popoverAnchor = null
+      popoverAnchor = undefined
       hoverTarget = null
       hideTimeout = null
     }, 100)
@@ -159,20 +179,62 @@
     searching = false
     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 showSnippet = (snippet: Snippet, target: HTMLElement) => {
+    stopHidingPopover()
+    if (!snippet.code) {
+      return
+    }
+    popoverAnchor = target
+    hoverTarget = {
+      type: "snippet",
+      code: snippet.code,
+    }
+
+    popover.show()
+  }
+
+  const createSnippet = () => {
+    editableSnippet = null
+    snippetDrawer.show()
+  }
+
+  const editSnippet = (e: Event, snippet: Snippet) => {
+    e.preventDefault()
+    e.stopPropagation()
+    editableSnippet = snippet
+    snippetDrawer.show()
+  }
 </script>
 
-{#if popoverAnchor && hoverTarget}
-  <Popover
-    align="left-outside"
-    bind:this={popover}
-    anchor={popoverAnchor}
-    minWidth={0}
-    maxWidth={480}
-    maxHeight={480}
-    dismissible={false}
-    on:mouseenter={stopHidingPopover}
-    on:mouseleave={hidePopover}
-  >
+<Popover
+  align="left-outside"
+  bind:this={popover}
+  anchor={popoverAnchor}
+  minWidth={0}
+  maxWidth={480}
+  maxHeight={480}
+  dismissible={false}
+  on:mouseenter={stopHidingPopover}
+  on:mouseleave={hidePopover}
+>
+  {#if hoverTarget}
     <div
       class="binding-popover"
       class:has-code={hoverTarget.type !== "binding"}
@@ -196,8 +258,8 @@
         {/if}
       {/if}
     </div>
-  </Popover>
-{/if}
+  {/if}
+</Popover>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -213,7 +275,23 @@
         />
         {selectedCategory}
         {#if selectedCategory === "Snippets"}
-          <SnippetsSidePanelHeader />
+          {#if enableSnippets}
+            <div class="add-snippet-button">
+              <Icon
+                size="S"
+                name="Add"
+                hoverable
+                newStyles
+                on:click={createSnippet}
+              />
+            </div>
+          {:else}
+            <div class="title">
+              <Tags>
+                <Tag icon="LockClosed">Premium</Tag>
+              </Tags>
+            </div>
+          {/if}
         {/if}
       </div>
     {/if}
@@ -333,12 +411,46 @@
       {/if}
 
       {#if selectedCategory === "Snippets" || search}
-        <SnippetsSidePanelContent {snippets} {addSnippet} {search} />
+        <div class="snippet-list">
+          {#if enableSnippets}
+            {#each filteredSnippets as snippet}
+              <li
+                class="snippet"
+                on:mouseenter={e => showSnippet(snippet, e.currentTarget)}
+                on:mouseleave={hidePopover}
+                on:click={() => addSnippet(snippet)}
+              >
+                {snippet.name}
+                <Icon
+                  name="Edit"
+                  hoverable
+                  newStyles
+                  size="S"
+                  on:click={e => editSnippet(e, snippet)}
+                />
+              </li>
+            {/each}
+          {:else if !search}
+            <div class="upgrade">
+              <Body size="S">
+                Snippets let you create reusable JS functions and values that
+                can all be managed in one place
+              </Body>
+              {#if enableSnippets}
+                <Button cta on:click={createSnippet}>Create snippet</Button>
+              {:else}
+                <UpgradeButton />
+              {/if}
+            </div>
+          {/if}
+        </div>
       {/if}
     {/if}
   </Layout>
 </div>
 
+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
+
 <style>
   .binding-side-panel {
     border-left: var(--border-light);
@@ -498,4 +610,32 @@
   .binding-popover.has-code :global(.cm-content) {
     padding: 0;
   }
+
+  /* Snippets */
+  .add-snippet-button {
+    margin-left: auto;
+  }
+  .snippet-list {
+    padding: 0 var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+    display: flex;
+    flex-direction: column;
+    /* gap: var(--spacing-s); */
+  }
+  .snippet {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+    transition: background-color 130ms ease-out, color 130ms ease-out,
+      border-color 130ms ease-out;
+    word-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
+  }
+  .snippet:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    cursor: pointer;
+  }
 </style>
diff --git a/packages/builder/src/components/common/bindings/snippets/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
similarity index 100%
rename from packages/builder/src/components/common/bindings/snippets/SnippetDrawer.svelte
rename to packages/builder/src/components/common/bindings/SnippetDrawer.svelte
diff --git a/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte b/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
deleted file mode 100644
index 7ddecf23c70..00000000000
--- a/packages/builder/src/components/common/bindings/snippets/SidePanelContent.svelte
+++ /dev/null
@@ -1,191 +0,0 @@
-<script lang="ts">
-  import { Icon, Popover, Body, Button } from "@budibase/bbui"
-  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
-  import { EditorModes } from "@/components/common/CodeEditor"
-  import SnippetDrawer from "./SnippetDrawer.svelte"
-  import { licensing } from "@/stores/portal"
-  import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
-  import type { Snippet } from "@budibase/types"
-
-  export let addSnippet
-  export let snippets
-  export let search
-
-  let popover: Popover
-  let popoverAnchor: HTMLElement | null
-  let hoverTarget: {
-    type: "binding" | "helper" | "snippet"
-    code: string
-    description?: string
-  } | null
-  let hideTimeout: ReturnType<typeof setTimeout> | null
-  let snippetDrawer: SnippetDrawer
-  let editableSnippet: Snippet | null
-
-  $: enableSnippets = !$licensing.isFreePlan
-
-  $: filteredSnippets = getFilteredSnippets(enableSnippets, snippets, search)
-
-  const showSnippet = (snippet: Snippet, target: HTMLElement) => {
-    stopHidingPopover()
-    if (!snippet.code) {
-      return
-    }
-    popoverAnchor = target
-    hoverTarget = {
-      type: "snippet",
-      code: snippet.code,
-    }
-    popover.show()
-  }
-
-  const hidePopover = () => {
-    hideTimeout = setTimeout(() => {
-      popover.hide()
-      popoverAnchor = null
-      hoverTarget = null
-      hideTimeout = null
-    }, 100)
-  }
-
-  const stopHidingPopover = () => {
-    if (hideTimeout) {
-      clearTimeout(hideTimeout)
-      hideTimeout = null
-    }
-  }
-
-  const createSnippet = () => {
-    editableSnippet = null
-    snippetDrawer.show()
-  }
-
-  const editSnippet = (e: Event, snippet: Snippet) => {
-    e.preventDefault()
-    e.stopPropagation()
-    editableSnippet = snippet
-    snippetDrawer.show()
-  }
-
-  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())
-    )
-  }
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="snippet-list">
-  {#if enableSnippets}
-    {#each filteredSnippets as snippet}
-      <div
-        class="snippet"
-        on:mouseenter={e => showSnippet(snippet, e.currentTarget)}
-        on:mouseleave={hidePopover}
-        on:click={() => addSnippet(snippet)}
-      >
-        {snippet.name}
-        <Icon
-          name="Edit"
-          hoverable
-          newStyles
-          size="S"
-          on:click={e => editSnippet(e, snippet)}
-        />
-      </div>
-    {/each}
-  {:else if !search}
-    <div class="upgrade">
-      <Body size="S">
-        Snippets let you create reusable JS functions and values that can all be
-        managed in one place
-      </Body>
-      {#if enableSnippets}
-        <Button cta on:click={createSnippet}>Create snippet</Button>
-      {:else}
-        <UpgradeButton />
-      {/if}
-    </div>
-  {/if}
-</div>
-
-{#if hoverTarget && popoverAnchor}
-  <Popover
-    align="left-outside"
-    bind:this={popover}
-    anchor={popoverAnchor}
-    minWidth={0}
-    maxWidth={480}
-    maxHeight={480}
-    dismissible={false}
-    on:mouseenter={stopHidingPopover}
-    on:mouseleave={hidePopover}
-  >
-    <div class="snippet-popover">
-      {#key hoverTarget}
-        <CodeEditor
-          value={hoverTarget.code?.trim()}
-          mode={EditorModes.JS}
-          readonly
-        />
-      {/key}
-    </div>
-  </Popover>
-{/if}
-
-<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
-
-<style>
-  /* Upgrade */
-  .upgrade {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-l);
-  }
-  .upgrade :global(p) {
-    text-align: center;
-    align-self: center;
-  }
-
-  /* List */
-  .snippet-list {
-    padding: 0 var(--spacing-l);
-    padding-bottom: var(--spacing-l);
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-  }
-  .snippet {
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m);
-    border-radius: 4px;
-    background-color: var(--spectrum-global-color-gray-200);
-    transition: background-color 130ms ease-out, color 130ms ease-out,
-      border-color 130ms ease-out;
-    word-wrap: break-word;
-    display: flex;
-    justify-content: space-between;
-  }
-  .snippet:hover {
-    color: var(--spectrum-global-color-gray-900);
-    background-color: var(--spectrum-global-color-gray-50);
-    cursor: pointer;
-  }
-
-  /* Popover */
-  .snippet-popover {
-    width: 400px;
-  }
-</style>
diff --git a/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte b/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte
deleted file mode 100644
index e278e5a72b6..00000000000
--- a/packages/builder/src/components/common/bindings/snippets/SidePanelHeader.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script lang="ts">
-  import { Icon, Tags, Tag } from "@budibase/bbui"
-  import { licensing } from "@/stores/portal"
-  import SnippetDrawer from "./SnippetDrawer.svelte"
-  import type { Snippet } from "@budibase/types"
-
-  $: enableSnippets = !$licensing.isFreePlan
-
-  let snippetDrawer: SnippetDrawer
-  let editableSnippet: Snippet | null
-
-  const createSnippet = () => {
-    editableSnippet = null
-    snippetDrawer.show()
-  }
-</script>
-
-{#if enableSnippets}
-  <div class="add-button">
-    <Icon size="S" name="Add" hoverable newStyles on:click={createSnippet} />
-  </div>
-{:else}
-  <div class="title">
-    <Tags>
-      <Tag icon="LockClosed">Premium</Tag>
-    </Tags>
-  </div>
-{/if}
-
-<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
-
-<style>
-  .title {
-    flex: 1 1 auto;
-  }
-  .title {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-  .add-button {
-    margin-left: auto;
-  }
-</style>

From 25c5f7f70c365831e6bac5bf387e0df52b9414c1 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Feb 2025 10:21:21 +0100
Subject: [PATCH 13/18] Type snippetDrawer

---
 packages/bbui/src/Drawer/Drawer.svelte        |  2 +-
 .../common/bindings/BindingPanel.svelte       |  2 +-
 .../common/bindings/BindingSidePanel.svelte   |  1 -
 .../common/bindings/SnippetDrawer.svelte      | 25 +++++++++++--------
 4 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 1f38389a63d..15811daa088 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -64,7 +64,7 @@
   import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
 
-  export let title
+  export let title = null
   export let forceModal = false
 
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 8d3c27b61b7..3730a5466a4 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -56,7 +56,7 @@
   export let context = null
   export let snippets: Snippet[] | null = null
   export let autofocusEditor = false
-  export let placeholder = null
+  export let placeholder: string | null = null
   export let showTabBar = true
 
   let mode: BindingMode
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 033eeb7ea9a..cabb5461381 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -620,7 +620,6 @@
     padding-bottom: var(--spacing-l);
     display: flex;
     flex-direction: column;
-    /* gap: var(--spacing-s); */
   }
   .snippet {
     font-size: var(--font-size-s);
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 4862217b135..72e919a5162 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import {
     Button,
     Drawer,
@@ -14,6 +14,7 @@
   import { getSequentialName } from "@/helpers/duplicate"
   import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { ValidSnippetNameRegex } from "@budibase/shared-core"
+  import { Snippet } from "@budibase/types"
 
   export let snippet
 
@@ -22,11 +23,11 @@
 
   const firstCharNumberRegex = /^[0-9].*$/
 
-  let drawer
+  let drawer: Drawer
   let name = ""
   let code = ""
   let loading = false
-  let deleteConfirmationDialog
+  let deleteConfirmationDialog: ConfirmDialog
 
   $: defaultName = getSequentialName($snippets, "MySnippet", {
     getName: x => x.name,
@@ -40,11 +41,11 @@
   const saveSnippet = async () => {
     loading = true
     try {
-      const newSnippet = { name, code: rawJS }
+      const newSnippet: Snippet = { name, code: rawJS || "" }
       await snippets.saveSnippet(newSnippet)
       drawer.hide()
       notifications.success(`Snippet ${newSnippet.name} saved`)
-    } catch (error) {
+    } catch (error: any) {
       notifications.error(error.message || "Error saving snippet")
     }
     loading = false
@@ -61,7 +62,7 @@
     loading = false
   }
 
-  const validateName = (name, snippets) => {
+  const validateName = (name: string, snippets: Snippet[]) => {
     if (!name?.length) {
       return "Name is required"
     }
@@ -78,7 +79,7 @@
   }
 </script>
 
-<Drawer bind:this={drawer}>
+<Drawer bind:this={drawer} forceModal>
   <svelte:fragment slot="title">
     {#if snippet}
       {snippet.name}
@@ -108,7 +109,11 @@
         Delete
       </Button>
     {/if}
-    <Button cta on:click={saveSnippet} disabled={!code || loading || nameError}>
+    <Button
+      cta
+      on:click={saveSnippet}
+      disabled={!code || loading || !!nameError}
+    >
       Save
     </Button>
   </svelte:fragment>
@@ -124,9 +129,7 @@
         value={code}
         on:change={e => (code = e.detail)}
       >
-        <div slot="tabs">
-          <Input placeholder="Name" />
-        </div>
+        <Input placeholder="Name" />
       </BindingPanel>
     {/key}
   </svelte:fragment>

From 6266ae7300394223c5d3edce728f2499d6c2dc7e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Feb 2025 10:32:19 +0100
Subject: [PATCH 14/18] Fix types

---
 packages/bbui/src/Drawer/Drawer.svelte                          | 2 +-
 .../builder/src/components/common/bindings/SnippetDrawer.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 15811daa088..5650f5a812c 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -64,7 +64,7 @@
   import { setContext, createEventDispatcher, onDestroy } from "svelte"
   import { generate } from "shortid"
 
-  export let title = null
+  export let title = ""
   export let forceModal = false
 
   const dispatch = createEventDispatcher()
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 72e919a5162..b8b83f327ab 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -79,7 +79,7 @@
   }
 </script>
 
-<Drawer bind:this={drawer} forceModal>
+<Drawer bind:this={drawer}>
   <svelte:fragment slot="title">
     {#if snippet}
       {snippet.name}

From 875623661e02fda21984e7f68384d81d85aecf53 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Feb 2025 10:41:13 +0100
Subject: [PATCH 15/18] Fix type

---
 .../builder/src/components/common/bindings/SnippetDrawer.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index b8b83f327ab..79ae1059251 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -14,7 +14,7 @@
   import { getSequentialName } from "@/helpers/duplicate"
   import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import { ValidSnippetNameRegex } from "@budibase/shared-core"
-  import { Snippet } from "@budibase/types"
+  import type { Snippet } from "@budibase/types"
 
   export let snippet
 

From 694dc78c0ff9bc831db3bc00b2d58e847cf74827 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Feb 2025 11:50:01 +0100
Subject: [PATCH 16/18] Add types

---
 .../src/components/common/bindings/SnippetDrawer.svelte     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 79ae1059251..5a191569936 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -16,7 +16,7 @@
   import { ValidSnippetNameRegex } from "@budibase/shared-core"
   import type { Snippet } from "@budibase/types"
 
-  export let snippet
+  export let snippet: Snippet | null
 
   export const show = () => drawer.show()
   export const hide = () => drawer.hide()
@@ -54,7 +54,9 @@
   const deleteSnippet = async () => {
     loading = true
     try {
-      await snippets.deleteSnippet(snippet.name)
+      if (snippet) {
+        await snippets.deleteSnippet(snippet.name)
+      }
       drawer.hide()
     } catch (error) {
       notifications.error("Error deleting snippet")

From 621066bdc0954cc19447f0711984eec40cdf9e28 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Feb 2025 12:15:56 +0100
Subject: [PATCH 17/18] Clean states

---
 .../common/bindings/BindingSidePanel.svelte         | 13 +++++++++----
 .../components/common/bindings/SnippetDrawer.svelte | 10 ++++++----
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index cabb5461381..1767228355d 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -43,8 +43,8 @@
   let helpers = handlebarsCompletions()
   let selectedCategory: string | null
   let hideTimeout: ReturnType<typeof setTimeout> | null
-  let snippetDrawer: SnippetDrawer
   let editableSnippet: Snippet | null
+  let showSnippetDrawer = false
 
   $: enableSnippets = !$licensing.isFreePlan
   $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
@@ -212,14 +212,14 @@
 
   const createSnippet = () => {
     editableSnippet = null
-    snippetDrawer.show()
+    showSnippetDrawer = true
   }
 
   const editSnippet = (e: Event, snippet: Snippet) => {
     e.preventDefault()
     e.stopPropagation()
     editableSnippet = snippet
-    snippetDrawer.show()
+    showSnippetDrawer = true
   }
 </script>
 
@@ -449,7 +449,12 @@
   </Layout>
 </div>
 
-<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
+{#if showSnippetDrawer}
+  <SnippetDrawer
+    snippet={editableSnippet}
+    on:drawerHide={() => (showSnippetDrawer = false)}
+  />
+{/if}
 
 <style>
   .binding-side-panel {
diff --git a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
index 5a191569936..86608d78539 100644
--- a/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
+++ b/packages/builder/src/components/common/bindings/SnippetDrawer.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte"
   import {
     Button,
     Drawer,
@@ -18,9 +19,6 @@
 
   export let snippet: Snippet | null
 
-  export const show = () => drawer.show()
-  export const hide = () => drawer.hide()
-
   const firstCharNumberRegex = /^[0-9].*$/
 
   let drawer: Drawer
@@ -79,9 +77,13 @@
     }
     return null
   }
+
+  onMount(() => {
+    drawer.show()
+  })
 </script>
 
-<Drawer bind:this={drawer}>
+<Drawer bind:this={drawer} on:drawerHide>
   <svelte:fragment slot="title">
     {#if snippet}
       {snippet.name}

From f880c5450d69eda6b314cc41e11244836f765adc Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Fri, 21 Feb 2025 12:37:46 +0100
Subject: [PATCH 18/18] Format

---
 .../common/bindings/BindingSidePanel.svelte          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 1767228355d..865baacc292 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -642,4 +642,16 @@
     background-color: var(--spectrum-global-color-gray-50);
     cursor: pointer;
   }
+
+  /* Upgrade */
+  .upgrade {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-l);
+  }
+  .upgrade :global(p) {
+    text-align: center;
+    align-self: center;
+  }
 </style>