Update binding side panel to show readable bindings and real values

packages/builder/src/components/common/bindings/BindingPanel.svelte

@@ -279,7 +279,7 @@
           {context}
           addHelper={onSelectHelper}
           addBinding={onSelectBinding}
-          mode={editorMode}
+          js={editorMode === EditorModes.JS}
         />
       {:else if sidePanel === SidePanels.Evaluation}
         <EvaluationSidePanel

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -7,7 +7,7 @@
   export let addHelper
   export let addBinding
   export let bindings
-  export let mode
+  export let js
   export let allowHelpers
   export let context = null
 
@@ -47,7 +47,7 @@
       (!search ||
         helper.label.match(searchRgx) ||
         helper.description.match(searchRgx)) &&
-      (mode.name !== "javascript" || helper.allowsJs)
+      (!js || helper.allowsJs)
     )
   })
 
@@ -71,14 +71,16 @@
   }
 
   const showBindingPopover = (binding, target) => {
+    let code = binding.valueHTML
     if (!context || !binding.value || binding.value === "") {
-      return
+      code = null
     }
     stopHidingPopover()
     popoverAnchor = target
     hoverTarget = {
       helper: false,
-      code: binding.valueHTML,
+      code,
+      binding: binding.readableBinding,
     }
     popover.show()
   }
@@ -92,7 +94,7 @@
     hoverTarget = {
       helper: true,
       description: helper.description,
-      code: getHelperExample(helper, mode.name === "javascript"),
+      code: getHelperExample(helper, js),
     }
     popover.show()
   }
@@ -112,6 +114,15 @@
       hideTimeout = null
     }
   }
+
+  const getReadableBindingLabel = readableBinding => {
+    console.log(js)
+    if (js) {
+      return `$("${readableBinding}")`
+    } else {
+      return `{{ ${readableBinding} }}`
+    }
+  }
 </script>
 
 <Popover
@@ -126,6 +137,9 @@
   on:mouseleave={hidePopover}
 >
   <div class="binding-popover" class:helper={hoverTarget.helper}>
+    {#if hoverTarget.binding}
+      <pre class="binding">{getReadableBindingLabel(hoverTarget.binding)}</pre>
+    {/if}
     {#if hoverTarget.description}
       <div>
         <!-- eslint-disable-next-line svelte/no-at-html-tags-->
@@ -246,7 +260,7 @@
                   class="binding"
                   on:mouseenter={e => showHelperPopover(helper, e.target)}
                   on:mouseleave={hidePopover}
-                  on:click={() => addHelper(helper, mode.name === "javascript")}
+                  on:click={() => addHelper(helper, js)}
                 >
                   <span class="binding__label">{helper.displayText}</span>
                   <span class="binding__typeWrap">
@@ -404,7 +418,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
-  .binding-popover.helper pre {
+  .binding-popover.helper pre,
+  .binding-popover pre.binding {
     color: var(--spectrum-global-color-blue-700);
   }
   .binding-popover pre :global(span) {