From fd532a88d5110dada285e5aff205387391133e38 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 23 May 2022 12:22:42 +0100
Subject: [PATCH] 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     |  2 ++
 packages/client/src/components/app/Layout.svelte    | 13 +++++++------
 .../client/src/components/preview/DNDHandler.svelte |  1 +
 .../components/preview/DNDPositionIndicator.svelte  |  2 ++
 .../src/components/preview/IndicatorSet.svelte      | 13 -------------
 5 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 80e187135c..e8fcc80db4 100644
--- a/packages/client/src/components/Component.svelte
+++ b/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}
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 7216ad92e8..71ecb7d263 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/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;
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index ca083dd01e..6c1922ecff 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/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,
       }
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
index 011b386282..4af4674126 100644
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ b/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}
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index c33ea606ff..32ff8cc748 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/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