duplicate name check when renaming component

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -4,6 +4,8 @@
   import Input from "../common/Input.svelte"
   import { goto } from "@sveltech/routify"
   import { excludeProps } from "./propertyCategories.js"
+  import { store } from "builderStore"
+  import { walkProps } from "builderStore/storeUtils"
 
   export let panelDefinition = []
   export let componentDefinition = {}
@@ -13,6 +15,7 @@
   export let screenOrPageInstance
 
   let pageScreenProps = ["title", "favicon", "description", "route"]
+  let duplicateName = false
 
   const propExistsOnComponentDef = prop =>
     pageScreenProps.includes(prop) || prop in componentDefinition.props
@@ -33,6 +36,43 @@
 
   $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
   $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition
+
+  const isDuplicateName = name => {
+    let duplicate = false
+
+    const lookForDuplicate = rootPops => {
+      walkProps(rootPops, (inst, cancel) => {
+        if (inst._instanceName === name && inst._id !== componentInstance._id) {
+          duplicate = true
+          cancel()
+        }
+      })
+    }
+    // check page first
+    lookForDuplicate($store.pages[$store.currentPageName].props)
+    if (duplicate) return true
+
+    // if viwing screen, check current screen for duplicate
+    if ($store.currentFrontEndType === "screen") {
+      lookForDuplicate($store.currentPreviewItem.props)
+    } else {
+      // viewing master page - need to dedupe against all screens
+      for (let screen of $store.screens) {
+        lookForDuplicate(screen.props)
+      }
+    }
+
+    return duplicate
+  }
+
+  const onInstanceNameChange = (_, name) => {
+    if (isDuplicateName(name)) {
+      duplicateName = true
+    } else {
+      duplicateName = false
+      onChange("_instanceName", name)
+    }
+  }
 </script>
 
 {#if screenOrPageInstance}
@@ -54,7 +94,10 @@
     label="Name"
     key="_instanceName"
     value={componentInstance._instanceName}
-    {onChange} />
+    onChange={onInstanceNameChange} />
+  {#if duplicateName}
+    <span class="duplicate-name">Name must be unique</span>
+  {/if}
 {/if}
 
 {#if panelDefinition && panelDefinition.length > 0}
@@ -79,4 +122,9 @@
   div {
     text-align: center;
   }
+
+  .duplicate-name {
+    color: var(--red);
+    font-size: var(--font-size-xs);
+  }
 </style>