Add icons to app preview selection indicators

packages/client/src/components/Component.svelte

@@ -20,7 +20,6 @@
   } from "utils/componentProps"
   import { builderStore, devToolsStore, componentStore, appStore } from "stores"
   import { Helpers } from "@budibase/bbui"
-  import Manifest from "manifest.json"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
 
@@ -171,8 +170,9 @@
     }
 
     // Pull definition and constructor
-    constructor = getComponentConstructor(instance._component)
+    const component = instance._component
-    definition = getComponentDefinition(instance._component)
+    constructor = getComponentConstructor(component)
+    definition = componentStore.actions.getComponentDefinition(component)
     if (!definition) {
       return
     }
@@ -217,13 +217,6 @@
     return AppComponents[name]
   }
 
-  // Gets this component's definition from the manifest
-  const getComponentDefinition = component => {
-    const prefix = "@budibase/standard-components/"
-    const type = component?.replace(prefix, "")
-    return type ? Manifest[type] : null
-  }
-
   const getSettingsDefinitionMap = settingsDefinition => {
     let map = {}
     settingsDefinition?.forEach(setting => {
@@ -382,7 +375,7 @@
     if (!node) {
       return
     }
-    node.style.scrollMargin = "80px"
+    node.style.scrollMargin = "86px"
     node.scrollIntoView({
       behavior: "smooth",
       block: "start",

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

@@ -1,18 +1,20 @@
 <script>
   import { fade } from "svelte/transition"
+  import { Icon } from "@budibase/bbui"
 
   export let top
   export let left
   export let width
   export let height
   export let text
+  export let icon
   export let color
   export let zIndex
   export let transition = false
   export let line = false
   export let alignRight = false
 
-  $: flipped = top < 20
+  $: flipped = top < 26
 </script>
 
 <div
@@ -26,14 +28,22 @@
   style="top: {top}px; left: {left}px; width: {width}px; height: {height}px; --color: {color}; --zIndex: {zIndex};"
   class:withText={!!text}
 >
-  {#if text}
+  {#if text || icon}
-    <div class="text" class:flipped class:line class:right={alignRight}>
+    <div class="label" class:flipped class:line class:right={alignRight}>
-      {text}
+      {#if icon}
+        <Icon name={icon} size="S" color="white" />
+      {/if}
+      {#if text}
+        <div class="text">
+          {text}
+        </div>
+      {/if}
     </div>
   {/if}
 </div>
 
 <style>
+  /* Indicator styles */
   .indicator {
     right: 0;
     position: absolute;
@@ -51,16 +61,16 @@
   .indicator.line {
     border-radius: 4px !important;
   }
-  .text {
+
+  /* Label styles */
+  .label {
     background-color: var(--color);
-    color: white;
     position: absolute;
     top: 0;
     left: -2px;
-    height: 20px;
+    height: 26px;
-    padding: 0 8px 2px 8px;
+    padding: 0 6px 2px 6px;
     transform: translateY(-100%);
-    font-size: 11px;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
@@ -69,18 +79,30 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
+    gap: 6px;
   }
-  .text.line {
+  .label.line {
     transform: translateY(-50%);
     border-radius: 4px;
   }
-  .text.flipped {
+  .label.flipped {
     border-radius: 4px;
     transform: translateY(0%);
     top: -2px;
   }
-  .text.right {
+  .label.right {
     right: -2px;
     left: auto;
   }
+
+  /* Text styles */
+  .text {
+    color: white;
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  /* Icon styles */
+  .label :global(.spectrum-Icon + .text) {
+  }
 </style>

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

@@ -2,7 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
   import { domDebounce } from "utils/domDebounce"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
 
   export let componentId
   export let color
@@ -15,12 +15,24 @@
   let text
   $: visibleIndicators = indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
+  $: icon = getComponentIcon(componentId)
+  $: console.log(icon)
 
   let updating = false
   let observers = []
   let callbackCount = 0
   let nextIndicators = []
 
+  const getComponentIcon = id => {
+    if (!id) {
+      return null
+    }
+    const component = componentStore.actions.getComponentById(id)
+    const type = component?._component
+    const definition = componentStore.actions.getComponentDefinition(type)
+    return definition?.icon
+  }
+
   const createIntersectionCallback = idx => entries => {
     if (callbackCount >= observers.length) {
       return
@@ -121,6 +133,7 @@
       width={indicator.width}
       height={indicator.height}
       text={idx === 0 ? text : null}
+      icon={idx === 0 ? icon : null}
       {transition}
       {zIndex}
       {color}

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

@@ -6,7 +6,7 @@
   import { builderStore, componentStore } from "stores"
   import { domDebounce } from "utils/domDebounce"
 
-  const verticalOffset = 28
+  const verticalOffset = 34
   const horizontalOffset = 2
 
   let top = 0

packages/client/src/stores/components.js

@@ -67,6 +67,12 @@ const createComponentStore = () => {
     return findComponentById(asset?.props, id)
   }
 
+  const getComponentDefinition = type => {
+    const prefix = "@budibase/standard-components/"
+    type = type?.replace(prefix, "")
+    return type ? Manifest[type] : null
+  }
+
   return {
     ...derivedStore,
     actions: {
@@ -74,6 +80,7 @@ const createComponentStore = () => {
       unregisterInstance,
       isComponentRegistered,
       getComponentById,
+      getComponentDefinition,
     },
   }
 }