Improve performance when determining client component icons and update layout to allow for a better visual selection of the navigation section

packages/client/src/components/Component.svelte

@@ -88,6 +88,7 @@
   $: children = instance._children || []
   $: id = instance._id
   $: name = isScreen ? "Screen" : instance._instanceName
+  $: icon = definition?.icon
 
   // Determine if the component is selected or is part of the critical path
   // leading to the selected component
@@ -419,6 +420,7 @@
     class:block={isBlock}
     data-id={id}
     data-name={name}
+    data-icon={icon}
   >
     <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
       {#if children.length}

packages/client/src/components/app/Layout.svelte

@@ -69,7 +69,6 @@
     ) {
       const node = document.getElementsByClassName("nav-wrapper")?.[0]
       if (node) {
-        console.log("scroll")
         node.style.scrollMargin = "100px"
         node.scrollIntoView({
           behavior: "smooth",
@@ -112,12 +111,12 @@
   }
 
   const getNavStyle = (backgroundColor, textColor, width, height) => {
-    let style = `--width:${width}px;--height:${height}px;`
+    let style = `--width:${width}px; --height:${height}px;`
     if (backgroundColor) {
-      style += `--navBackground: ${backgroundColor};`
+      style += `--navBackground:${backgroundColor};`
     }
     if (textColor) {
-      style += `--navTextColor: ${textColor};`
+      style += `--navTextColor:${textColor};`
     }
     return style
   }
@@ -245,8 +244,6 @@
     align-items: stretch;
     background: var(--navBackground);
     z-index: 2;
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
   }
   .nav-wrapper.clickable {
     cursor: pointer;
@@ -299,6 +296,10 @@
     align-items: stretch;
     flex: 1 1 auto;
     z-index: 1;
+    border-top: 1px solid var(--spectrum-global-color-gray-300);
+  }
+  .layout--none .main-wrapper {
+    border-top: none;
   }
   .main {
     display: flex;

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

@@ -175,6 +175,7 @@
       dropInfo = {
         target,
         name: element.dataset.name,
+        icon: element.dataset.icon,
         droppableInside: element.classList.contains("empty"),
         bounds,
       }

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

@@ -10,6 +10,7 @@
   $: dimensions = getDimensions(dropInfo)
   $: prefix = dropInfo?.mode === "above" ? "Before" : "After"
   $: text = `${prefix} ${dropInfo?.name}`
+  $: icon = dropInfo?.icon
   $: renderKey = `${dropInfo?.target}-${dropInfo?.side}`
 
   const getDimensions = info => {
@@ -54,6 +55,7 @@
       width={dimensions.width}
       height={dimensions.height}
       {text}
+      {icon}
       {zIndex}
       {color}
       {transition}

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

@@ -17,25 +17,12 @@
 
   $: visibleIndicators = indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
-  $: getComponentIcon(componentId)
 
   let updating = false
   let observers = []
   let callbackCount = 0
   let nextIndicators = []
 
-  const getComponentIcon = id => {
-    if (!id) {
-      return
-    }
-    const component = componentStore.actions.getComponentById(id)
-    const type = component?._component
-    const definition = componentStore.actions.getComponentDefinition(type)
-    if (definition?.icon) {
-      icon = definition.icon
-    }
-  }
-
   const createIntersectionCallback = idx => entries => {
     if (callbackCount >= observers.length) {
       return