Move new component panel to right side, animate via sliding in and remove add component button above preview

packages/builder/src/components/design/Panel.svelte

@@ -3,11 +3,13 @@
 
   export let title
   export let icon
+  export let expandable = false
   export let showAddButton = false
   export let showBackButton = false
-  export let showExpandIcon = false
+  export let showCloseButton = false
   export let onClickAddButton
   export let onClickBackButton
+  export let onClickCloseButton
   export let borderLeft = false
   export let borderRight = false
 
@@ -25,7 +27,7 @@
     <div class="title">
       <Heading size="XXS">{title || ""}</Heading>
     </div>
-    {#if showExpandIcon}
+    {#if expandable}
       <Icon
         name={wide ? "Minimize" : "Maximize"}
         hoverable
@@ -37,6 +39,9 @@
         <Icon name="Add" />
       </div>
     {/if}
+    {#if showCloseButton}
+      <Icon name="Close" hoverable on:click={onClickCloseButton} />
+    {/if}
   </div>
   <div class="body">
     <slot />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte

@@ -25,14 +25,6 @@
       {#if $store.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
-      <Button
-        newStyles
-        secondary
-        icon="Add"
-        on:click={() => $goto(`../${$selectedScreen._id}/components/new`)}
-      >
-        Component
-      </Button>
     </div>
   </div>
   <div class="content">
@@ -59,6 +51,7 @@
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--spacing-l);
+    margin: 0 2px;
   }
   .header-left,
   .header-right {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte

@@ -9,7 +9,7 @@
   import { setContext } from "svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { DropPosition } from "./dndStore"
-  import { Button, Layout } from "@budibase/bbui"
+  import { Button } from "@budibase/bbui"
 
   let scrollRef
 
@@ -64,7 +64,7 @@
 
 <Panel title="Components" showExpandIcon borderRight>
   <div class="add-component">
-    <Button on:click={() => $goto("../new")} cta>Add component</Button>
+    <Button on:click={() => $goto("./new")} cta>Add component</Button>
   </div>
   <div class="nav-items-container" bind:this={scrollRef}>
     <ul>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte

@@ -4,6 +4,8 @@
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
   import { findComponent } from "builderStore/componentUtils"
+  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
+  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 
   // Keep URL and state in sync for selected component ID
   const stopSyncing = syncURLToState({
@@ -18,4 +20,6 @@
   onDestroy(stopSyncing)
 </script>
 
+<ComponentListPanel />
+<ComponentSettingsPanel />
 <slot />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte

@@ -1,7 +1,4 @@
-<script>
+<!--
-  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
+  Placeholder file so that routify works.
-  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
+  No unique content is needed in this index page.
-</script>
+-->
-
-<ComponentListPanel />
-<ComponentSettingsPanel />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -15,6 +15,7 @@
   import structure from "./componentStructure.json"
   import { store, selectedComponent } from "builderStore"
   import { onMount } from "svelte"
+  import { fly } from "svelte/transition"
 
   let section = "components"
   let searchString
@@ -150,11 +151,12 @@
   })
 </script>
 
+<div class="new-component" transition:fly|local={{ x: 260 }}>
   <Panel
     title="Add component"
-  showBackButton
+    showCloseButton
-  onClickBackButton={() => $goto("../slot")}
+    onClickCloseButton={() => $goto("../")}
-  borderRight
+    borderLeft
   >
     <Layout paddingX="L" paddingY="XL" gap="S">
       <Search
@@ -182,6 +184,7 @@
       <Divider noMargin noGrid />
     </div>
     {#if searchString || section === "components"}
+      {#if filteredStructure.length}
         {#each filteredStructure as category}
           <DetailSummary name={category.name} collapsible={false}>
             <div class="component-grid">
@@ -189,7 +192,8 @@
                 <div
                   class="component"
                   class:wide={component.name?.length > 15}
-              class:selected={selectedIndex === orderMap[component.component]}
+                  class:selected={selectedIndex ===
+                    orderMap[component.component]}
                   on:click={() => addComponent(component.component)}
                   on:mouseover={() => (selectedIndex = null)}
                 >
@@ -200,6 +204,13 @@
             </div>
           </DetailSummary>
         {/each}
+      {:else}
+        <Layout paddingY="M" paddingX="L">
+          <Body size="S">
+            There aren't any components matching the current filter
+          </Body>
+        </Layout>
+      {/if}
     {:else}
       <Layout paddingX="L" paddingY="XL" gap="S">
         <Body size="S">Blocks are collections of pre-built components</Body>
@@ -217,8 +228,18 @@
       </Layout>
     {/if}
   </Panel>
+</div>
 
 <style>
+  .new-component {
+    position: fixed;
+    right: 0;
+    z-index: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
   .component-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte

@@ -0,0 +1,5 @@
+<script>
+  import NewComponentPanel from "./_components/NewComponentPanel.svelte"
+</script>
+
+<NewComponentPanel />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte

@@ -1,21 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
-  import { selectedComponent, selectedScreen, store } from "builderStore"
-
-  $: componentDefinition = store.actions.components.getDefinition(
-    $selectedComponent?._component
-  )
-  $: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
-  $: title = isScreen ? "Screen" : $selectedComponent?._instanceName
-  $: position = componentDefinition?.hasChildren ? "inside" : "below"
-</script>
-
-<Panel {title} icon={componentDefinition?.icon} borderLeft>
-  <Layout paddingX="L" paddingY="XL">
-    <Body size="S">
-      Components that you add will be placed {position}
-      {title}
-    </Body>
-  </Layout>
-</Panel>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/index.svelte

@@ -1,26 +0,0 @@
-<script>
-  import NewComponentPanel from "./_components/NewComponentPanel.svelte"
-  import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte"
-  import { onMount } from "svelte"
-  import { store, selectedComponent, selectedScreen } from "builderStore"
-  import { redirect } from "@roxi/routify"
-
-  // Select the screen slot as the target to add to, if no component
-  // is selected
-  onMount(() => {
-    if (!$selectedComponent) {
-      if ($selectedScreen) {
-        store.update(state => {
-          state.selectedComponentId = $selectedScreen.props._id
-          return state
-        })
-      } else {
-        // Otherwise go back out of the add screen
-        $redirect("../")
-      }
-    }
-  })
-</script>
-
-<NewComponentPanel />
-<NewComponentTargetPanel />