Move add component button from above preview to new floating animated button on top of preview

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

@@ -3,6 +3,7 @@
   import { onMount, onDestroy } from "svelte"
   import {
     store,
+    selectedComponent,
     selectedScreen,
     selectedLayout,
     currentAsset,
@@ -14,6 +15,7 @@
     Layout,
     Heading,
     Body,
+    Icon,
     notifications,
   } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
@@ -96,6 +98,9 @@
   $: json = JSON.stringify(previewData)
   $: refreshContent(json)
 
+  // Determine if the add component menu is active
+  $: isAddingComponent = $isActive(`./components/${$selectedComponent._id}/new`)
+
   // Update the iframe with the builder info to render the correct preview
   const refreshContent = message => {
     if (iframe) {
@@ -219,6 +224,16 @@
     idToDelete = null
   }
 
+  const toggleAddComponent = () => {
+    if (isAddingComponent) {
+      $goto(`../${$selectedScreen._id}/components/${$selectedComponent._id}`)
+    } else {
+      $goto(
+        `../${$selectedScreen._id}/components/${$selectedComponent._id}/new`
+      )
+    }
+  }
+
   onMount(() => {
     window.addEventListener("message", receiveMessage)
     if (!$store.clientFeatures.messagePassing) {
@@ -282,6 +297,13 @@
     class:tablet={$store.previewDevice === "tablet"}
     class:mobile={$store.previewDevice === "mobile"}
   />
+  <div
+    class="add-component"
+    class:active={isAddingComponent}
+    on:click={toggleAddComponent}
+  >
+    <Icon size="XL" name="Add">Component</Icon>
+  </div>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -343,4 +365,26 @@
     width: 100%;
     height: 100%;
   }
+
+  .add-component {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: var(--spectrum-global-color-blue-500);
+    display: grid;
+    place-items: center;
+    color: white;
+    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform ease-out 300ms, background ease-out 130ms;
+  }
+  .add-component:hover {
+    background: var(--spectrum-global-color-blue-600);
+  }
+  .add-component.active {
+    transform: rotate(-45deg);
+  }
 </style>

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

@@ -151,7 +151,7 @@
   })
 </script>
 
-<div class="new-component" transition:fly|local={{ x: 260 }}>
+<div class="new-component" transition:fly|local={{ x: 260, duration: 300 }}>
   <Panel
     title="Add component"
     showCloseButton