Add icons to component list and update style of nav items

packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte

@@ -157,7 +157,8 @@
 
 <style>
   .datasource-icon {
-    margin-right: 3px;
-    padding-top: 3px;
+    display: grid;
+    place-items: center;
+    flex: 0 0 24px;
   }
 </style>

packages/builder/src/components/common/NavItem.svelte

@@ -46,7 +46,7 @@
   class:border
   class:selected
   class:withActions
-  style={`padding-left: calc(var(--spacing-l) + ${indentLevel * 14}px)`}
+  style={`padding-left: calc(${indentLevel * 14}px)`}
   {draggable}
   on:dragend
   on:dragstart
@@ -59,7 +59,13 @@
 >
   <div class="nav-item-content" bind:this={contentRef}>
     {#if withArrow}
-      <div class:opened class="icon arrow" on:click={onIconClick}>
+      <div
+        class:opened
+        class:relative={indentLevel === 0}
+        class:absolute={indentLevel > 0}
+        class="icon arrow"
+        on:click={onIconClick}
+      >
         <Icon size="S" name="ChevronRight" />
       </div>
     {/if}
@@ -126,25 +132,40 @@
     width: max-content;
     overflow: hidden;
     position: relative;
+    padding-left: var(--spacing-l);
   }
 
   .icon {
     font-size: 16px;
-    flex: 0 0 20px;
+    flex: 0 0 24px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    color: var(--spectrum-global-color-gray-600);
   }
   .icon.arrow {
-    margin: 0 -2px 0 -6px;
-    font-size: 12px;
+    flex: 0 0 20px;
+  }
+  .icon.arrow.absolute {
+    position: absolute;
+    left: 0;
+    padding: 8px;
+    margin-left: -8px;
+  }
+  .icon.arrow :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+  .icon.arrow.relative {
+    position: relative;
+    margin: 0 -6px 0 -4px;
   }
   .icon.arrow.opened {
     transform: rotate(90deg);
   }
   .icon + .icon {
-    margin-left: -4px;
+    /*margin-left: -4px;*/
   }
   .iconText {
     margin-top: 1px;
@@ -154,11 +175,12 @@
 
   .text {
     font-weight: 600;
-    font-size: var(--spectrum-global-dimension-font-size-75);
+    font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 auto;
+    color: var(--spectrum-global-color-gray-800);
   }
   .scrollable .text {
     flex: 0 0 auto;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte

@@ -70,11 +70,11 @@
   <div class="nav-items-container" bind:this={scrollRef}>
     <NavItem
       text="Screen"
-      withArrow
       indentLevel={0}
       selected={$store.selectedComponentId === $selectedScreen?.props._id}
       opened
       scrollable
+      icon="WebPage"
       on:click={() => {
         $store.selectedComponentId = $selectedScreen?.props._id
       }}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte

@@ -51,6 +51,16 @@
     return capitalise(type)
   }
 
+  const getComponentIcon = component => {
+    const def = store.actions.components.getDefinition(component?._component)
+    return def?.icon
+  }
+
+  const componentHasChildren = component => {
+    const def = store.actions.components.getDefinition(component?._component)
+    return def?.hasChildren && component._children?.length
+  }
+
   function toggleNodeOpen(componentId) {
     if (closedNodes[componentId]) {
       delete closedNodes[componentId]
@@ -105,7 +115,8 @@
         on:iconClick={() => toggleNodeOpen(component._id)}
         on:drop={onDrop}
         text={getComponentText(component)}
-        withArrow
+        icon={getComponentIcon(component)}
+        withArrow={componentHasChildren(component)}
         indentLevel={level + 1}
         selected={$store.selectedComponentId === component._id}
         opened={isOpen(component, $selectedComponentPath, closedNodes)}
@@ -143,6 +154,13 @@
     padding-left: 0;
     margin: 0;
   }
+  ul :global(.icon.arrow) {
+    transition: opacity 130ms ease-out;
+    opacity: 0;
+  }
+  ul:hover :global(.icon.arrow) {
+    opacity: 1;
+  }
   ul,
   li {
     min-width: max-content;