Add duplicate action to settings bar

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -159,6 +159,11 @@
         await store.actions.components.updateProp(data.prop, data.value)
       } else if (type === "delete-component" && data.id) {
         confirmDeleteComponent(data.id)
+      } else if (type === "duplicate-component" && data.id) {
+        const rootComponent = get(currentAsset).props
+        const component = findComponent(rootComponent, data.id)
+        store.actions.components.copy(component)
+        await store.actions.components.paste(component)
       } else if (type === "preview-loaded") {
         // Wait for this event to show the client library if intelligent
         // loading is supported

packages/client/src/components/preview/SettingsBar.svelte

@@ -146,6 +146,15 @@
         <div class="divider" />
       {/if}
     {/each}
+    <SettingsButton
+      icon="Duplicate"
+      on:click={() => {
+        builderStore.actions.duplicateComponent(
+          $builderStore.selectedComponent._id
+        )
+      }}
+      title="Duplicate component"
+    />
     <SettingsButton
       icon="Delete"
       on:click={() => {
@@ -153,6 +162,7 @@
           $builderStore.selectedComponent._id
         )
       }}
+      title="Delete component"
     />
   </div>
 {/if}

packages/client/src/stores/builder.js

@@ -62,6 +62,9 @@ const createBuilderStore = () => {
     deleteComponent: id => {
       dispatchEvent("delete-component", { id })
     },
+    duplicateComponent: id => {
+      dispatchEvent("duplicate-component", { id })
+    },
     notifyLoaded: () => {
       dispatchEvent("preview-loaded")
     },