feat: Preview view across tabs

Author: distantnative

config/areas/site/views.php

@@ -1,10 +1,11 @@
 <?php
 
+use Kirby\Cms\Find;
 use Kirby\Panel\Controller\View\PageFileViewController;
-use Kirby\Panel\Controller\View\PagePreviewViewController;
 use Kirby\Panel\Controller\View\PageViewController;
+use Kirby\Panel\Controller\View\PreviewViewController;
+use Kirby\Panel\Controller\View\RemotePreviewViewController;
 use Kirby\Panel\Controller\View\SiteFileViewController;
-use Kirby\Panel\Controller\View\SitePreviewViewController;
 use Kirby\Panel\Controller\View\SiteViewController;
 
 return [
@@ -18,7 +19,11 @@
 	],
 	'page.preview' => [
 		'pattern' => '(pages/.*?)/preview/(changes|latest|compare|form)',
-		'action'  => PagePreviewViewController::class
+		'action'  => PreviewViewController::class
+	],
+	'page.preview.remote' => [
+		'pattern' => '(pages/.*?)/preview/(form)/remote',
+		'action'  => RemotePreviewViewController::class
 	],
 	'site' => [
 		'pattern' => 'site',
@@ -30,6 +35,10 @@
 	],
 	'site.preview' => [
 		'pattern' => '(site)/preview/(changes|latest|compare|form)',
-		'action'  => SitePreviewViewController::class
+		'action'  => PreviewViewController::class
+	],
+	'site.preview.remote' => [
+		'pattern' => '(site)/preview/(form)/remote',
+		'action'  => RemotePreviewViewController::class
 	],
 ];

panel/src/components/Navigation/Button.vue

@@ -258,7 +258,7 @@ export default {
 	display: inline-flex;
 	align-items: center;
 	justify-content: var(--button-align);
-	gap: 0.5rem;
+	gap: var(--spacing-2);
 	padding-inline: var(--button-padding);
 	white-space: nowrap;
 	line-height: 1;

panel/src/components/Views/Preview/PreviewBrowser.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="k-preview-browser">
-		<header class="k-preview-browser-header">
+		<header v-if="label" class="k-preview-browser-header">
 			<k-headline>
 				<k-icon type="git-branch" />
 				{{ label }}
@@ -33,9 +33,16 @@
 					icon="pushpin"
 					role="switch"
 					size="sm"
-					@click="onTogglePin"
+					@click="$emit('pin')"
+				/>
+				<k-button
+					v-if="open"
+					:link="open"
+					icon="open"
+					size="xs"
+					target="_blank"
+					@click="$emit('open')"
 				/>
-				<k-button :link="src" icon="open" size="xs" target="_blank" />
 			</k-button-group>
 		</header>
 
@@ -49,24 +56,13 @@ import { props } from "@/components/Forms/FormControls.vue";
 export default {
 	mixins: [props],
 	props: {
+		isPinned: Boolean,
 		label: String,
 		src: String,
-		mode: String
-	},
-	emits: ["discard", "navigate", "reload", "submit"],
-	data() {
-		return {
-			isPinned: false
-		};
-	},
-	mounted() {
-		this.$events.on("content.discard", this.reload);
-		this.$events.on("content.publish", this.reload);
-	},
-	unmounted() {
-		this.$events.off("content.discard", this.reload);
-		this.$events.off("content.publish", this.reload);
+		mode: String,
+		open: String
 	},
+	emits: ["discard", "navigate", "open", "pin", "submit"],
 	methods: {
 		/**
 		 * Handle link clicks inside the iframe
@@ -127,14 +123,6 @@ export default {
 				link.addEventListener("click", this.onClick);
 			}
 		},
-		onTogglePin() {
-			this.isPinned = !this.isPinned;
-
-			// when unpinning, reset the iframe to match the preview view
-			if (!this.isPinned) {
-				this.$emit("reload");
-			}
-		},
 		/**
 		 * Refresh the iframe
 		 * (e.g. for content updates)