final tidy up

packages/builder/src/builderStore/store.js

@@ -461,10 +461,10 @@ const saveScreen = store => screen => {
   })
 }
 
-const _saveScreen = (store, s, screen) => {
+const _saveScreen = async (store, s, screen) => {
   const currentPageScreens = s.pages[s.currentPageName]._screens
 
-  api
+  await api
     .post(`/_builder/api/${s.appname}/pages/${s.currentPageName}/screen`, screen)
     .then(async savedScreen => {
       _savePage(s);

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -38,8 +38,6 @@
     component.component &&
     $store.currentPreviewItem &&
     component.component.name === $store.currentPreviewItem.name
-
-  $: console.log(_screens)
 </script>
 
 <div class="root">

packages/builder/src/userInterface/PropertyCascader.svelte

@@ -12,12 +12,11 @@
   let bindingPath = "";
   let bindingFallbackValue = "";
   let bindingSource = "store";
-
+  let bindingValue = "";
-  const clearBinding = () => onChanged("");
 
   const bind = (path, fallback, source) => {
     if (!path) {
-      clearBinding("");
+      onChanged(fallback);
       return;
     }
     const binding = setBinding({ path, fallback, source });
@@ -36,11 +35,8 @@
     const binding = getBinding(value);
     if (bindingPath !== binding.path) isOpen = false;
     bindingPath = binding.path;
-    bindingFallbackValue = binding.fallback
+    bindingValue = typeof value === "object" ? "" : value;
-      ? binding.fallback
+    bindingFallbackValue = binding.fallback || bindingValue;
-      : typeof value === "object"
-      ? ""
-      : value;
 
     const currentScreen = $store.screens.find(
       ({ name }) => name === $store.currentPreviewItem.name
@@ -52,8 +48,9 @@
 <div class="cascader">
   <div class="input-box">
     <input
+      class:bold={!bindingFallbackValue && bindingPath}
       class="uk-input uk-form-small"
-      value={bindingFallbackValue}
+      value={bindingFallbackValue || bindingPath}
       on:change={e => {
         setBindingFallback(e.target.value);
         onChanged(e.target.value);
@@ -61,10 +58,8 @@
     <button on:click={() => (isOpen = !isOpen)}>
       <div
         class="icon"
-        style={`
+        class:highlighted={bindingPath}
-        transform: rotate(${isOpen ? 0 : 90}deg);
+        style={`transform: rotate(${isOpen ? 0 : 90}deg);`}>
-        color: ${bindingPath ? 'rgba(0, 85, 255, 0.8);' : 'inherit;'}
-      `}>
         <ArrowDownIcon size={36} />
       </div>
     </button>
@@ -73,7 +68,7 @@
     <ul class="options">
       {#each Object.keys(stateBindings) as stateBinding}
         <li
-          style={stateBinding === bindingPath && 'font-weight: bold;'}
+          class:bold={stateBinding === bindingPath}
           on:click={() => {
             setBindingPath(stateBinding === bindingPath ? null : stateBinding);
           }}>
@@ -85,6 +80,14 @@
 </div>
 
 <style>
+  .bold {
+    font-weight: bold;
+  }
+
+  .highlighted {
+    color: rgba(0, 85, 255, 0.8);
+  }
+
   button {
     cursor: pointer;
     outline: none;