Show popover

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

@@ -1,13 +1,9 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import {
+  import { screenStore, appStore } from "@/stores/builder"
-    screenStore,
-    appStore,
-    screenComponentErrorList,
-  } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
-  import { ActionButton } from "@budibase/bbui"
+  import ScreenErrorsButton from "./ScreenErrorsButton.svelte"
 </script>
 
 <div class="app-panel">
@@ -21,9 +17,7 @@
         <DevicePreviewSelect />
       {/if}
 
-      <ActionButton selected quiet on:click={() => {}}
+      <ScreenErrorsButton />
-        >Errors ({$screenComponentErrorList.length})</ActionButton
-      >
     </div>
   </div>
   <div class="content">

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { screenComponentErrorList } from "@/stores/builder"
+  import { ActionButton, Popover } from "@budibase/bbui"
+
+  let button: any
+  let popover: any
+</script>
+
+<div bind:this={button}>
+  <ActionButton selected quiet on:click={() => popover.show()}
+    >Errors ({$screenComponentErrorList.length})</ActionButton
+  >
+</div>
+<Popover bind:this={popover} anchor={button} align={"right"}>TODO</Popover>