From e84e4f98996ea8625f1daaf2fb1195d3cc4b201e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 7 Mar 2022 14:05:26 +0000
Subject: [PATCH] Add duplicate action to settings bar

---
 .../design/AppPreview/CurrentItemPreview.svelte        |  5 +++++
 .../client/src/components/preview/SettingsBar.svelte   | 10 ++++++++++
 packages/client/src/stores/builder.js                  |  3 +++
 3 files changed, 18 insertions(+)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 2a886fab0c..b0b7c16c68 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/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
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index a4e3ca4d72..c5ad8bef6c 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/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}
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 719909b538..27c8bbe2a2 100644
--- a/packages/client/src/stores/builder.js
+++ b/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")
     },