From d98c0bdcea30b8963dbfa93ec87ce0d9e45bbee6 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Jul 2023 13:53:37 +0100
Subject: [PATCH] Add option to open app preview in new tab

---
 .../_components/PreviewOverlay.svelte         |  1 +
 .../components/devtools/DevToolsHeader.svelte | 42 +++++++++++++------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
index d069d1b4c7..eedff6c2a7 100644
--- a/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_components/PreviewOverlay.svelte
@@ -15,6 +15,7 @@
   }
 
   onMount(() => {
+    window.isBuilder = true
     window.closePreview = () => {
       store.update(state => ({
         ...state,
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index 5cbbf80767..24b2d11c72 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Heading, Select, ActionButton } from "@budibase/bbui"
-  import { devToolsStore } from "../../stores"
+  import { devToolsStore, appStore } from "../../stores"
   import { getContext } from "svelte"
 
   const context = getContext("context")
@@ -27,6 +27,8 @@
       value: "ADMIN",
     },
   ]
+
+  const isFullScreen = window.parent.isBuilder
 </script>
 
 <div class="dev-preview-header" class:mobile={$context.device.mobile}>
@@ -45,27 +47,41 @@
       icon="Code"
       on:click={() => devToolsStore.actions.setVisible(!$devToolsStore.visible)}
     >
-      {$devToolsStore.visible ? "Close" : "Open"} DevTools
+      DevTools
+    </ActionButton>
+  {/if}
+  {#if window.parent.isBuilder}
+    <ActionButton
+      quiet
+      icon="LinkOut"
+      on:click={() => {
+        window.parent.closePreview?.()
+        window.open(`/${$appStore.appId}`, "_blank")
+      }}
+    >
+      Fullscreen
+    </ActionButton>
+    <ActionButton
+      quiet
+      icon="Close"
+      on:click={() => window.parent.closePreview?.()}
+    >
+      Close
     </ActionButton>
   {/if}
-  <ActionButton
-    quiet
-    icon="Close"
-    on:click={() => window.parent.closePreview?.()}
-  >
-    Close preview
-  </ActionButton>
 </div>
 
 <style>
   .dev-preview-header {
     flex: 0 0 60px;
-    display: grid;
-    align-items: center;
     background-color: black;
     padding: 0 var(--spacing-xl);
-    grid-template-columns: 1fr auto auto auto;
-    grid-gap: var(--spacing-xl);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xl);
+  }
+  .dev-preview-header :global(.spectrum-Heading) {
+    flex: 1 1 auto;
   }
   .dev-preview-header.mobile {
     grid-template-columns: 1fr auto auto;