Merge pull request #15359 from Budibase/dummy-action-bar

Add dummy action buttons for new panels

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte

@@ -3,6 +3,9 @@
   import AppPreview from "./AppPreview.svelte"
   import { screenStore, appStore } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
+  import { ActionButton } from "@budibase/bbui"
+  import BindingsPanel from "./BindingsPanel.svelte"
+  import StatePanel from "./StatePanel.svelte"
 </script>
 
 <div class="app-panel">
@@ -10,12 +13,14 @@
   <div class="header">
     <div class="header-left">
       <UndoRedoControl store={screenStore.history} />
-    </div>
-    <div class="header-right">
       {#if $appStore.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
     </div>
+    <div class="header-right">
+      <BindingsPanel />
+      <StatePanel />
+    </div>
   </div>
   <div class="content">
     {#key $appStore.version}
@@ -50,6 +55,9 @@
     margin-bottom: 9px;
   }
 
+  .header-left {
+    display: flex;
+  }
   .header-left :global(div) {
     border-right: none;
   }

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+
+  let visible = false
+  let modal
+</script>
+
+<ActionButton on:click={modal.show}>Bindings</ActionButton>
+
+<Modal bind:this={modal}>
+  <ModalContent title="Bindings" showConfirmButton={false} cancelText="Close">
+    Some awesome bindings content.
+  </ModalContent>
+</Modal>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/StatePanel.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { ActionButton, Modal, ModalContent } from "@budibase/bbui"
+
+  let visible = false
+  let modal
+</script>
+
+<ActionButton on:click={modal.show}>State</ActionButton>
+
+<Modal bind:this={modal}>
+  <ModalContent title="State" showConfirmButton={false} cancelText="Close">
+    Some awesome state content.
+  </ModalContent>
+</Modal>