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"
-  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
-</script>
-
-<ComponentListPanel />
-<ComponentSettingsPanel />
+<!--
+  Placeholder file so that routify works.
+  No unique content is needed in this index page.
+-->

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte → 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,75 +151,95 @@
   })
 </script>
 
-<Panel
-  title="Add component"
-  showBackButton
-  onClickBackButton={() => $goto("../slot")}
-  borderRight
->
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <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 searchString || section === "components"}
-    {#each filteredStructure as category}
-      <DetailSummary name={category.name} collapsible={false}>
-        <div class="component-grid">
-          {#each category.children as component}
+<div class="new-component" transition:fly|local={{ x: 260 }}>
+  <Panel
+    title="Add component"
+    showCloseButton
+    onClickCloseButton={() => $goto("../")}
+    borderLeft
+  >
+    <Layout paddingX="L" paddingY="XL" gap="S">
+      <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 searchString || section === "components"}
+      {#if filteredStructure.length}
+        {#each filteredStructure as category}
+          <DetailSummary name={category.name} collapsible={false}>
+            <div class="component-grid">
+              {#each category.children as component}
+                <div
+                  class="component"
+                  class:wide={component.name?.length > 15}
+                  class:selected={selectedIndex ===
+                    orderMap[component.component]}
+                  on:click={() => addComponent(component.component)}
+                  on:mouseover={() => (selectedIndex = null)}
+                >
+                  <Icon name={component.icon} />
+                  <Body size="XS">{component.name}</Body>
+                </div>
+              {/each}
+            </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>
+        <Layout noPadding gap="XS">
+          {#each blocks as block}
             <div
-              class="component"
-              class:wide={component.name?.length > 15}
-              class:selected={selectedIndex === orderMap[component.component]}
-              on:click={() => addComponent(component.component)}
-              on:mouseover={() => (selectedIndex = null)}
+              class="component block"
+              on:click={() => addComponent(block.component)}
             >
-              <Icon name={component.icon} />
-              <Body size="XS">{component.name}</Body>
+              <Icon name={block.icon} />
+              <Body size="XS">{block.name}</Body>
             </div>
           {/each}
-        </div>
-      </DetailSummary>
-    {/each}
-  {:else}
-    <Layout paddingX="L" paddingY="XL" gap="S">
-      <Body size="S">Blocks are collections of pre-built components</Body>
-      <Layout noPadding gap="XS">
-        {#each blocks as block}
-          <div
-            class="component block"
-            on:click={() => addComponent(block.component)}
-          >
-            <Icon name={block.icon} />
-            <Body size="XS">{block.name}</Body>
-          </div>
-        {/each}
+        </Layout>
       </Layout>
-    </Layout>
-  {/if}
-</Panel>
+    {/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 />