New Changes Comparison View

config/areas/site/buttons.php

@@ -5,16 +5,24 @@
 use Kirby\Cms\Site;
 use Kirby\Panel\Ui\Buttons\LanguagesDropdown;
 use Kirby\Panel\Ui\Buttons\PageStatusButton;
-use Kirby\Panel\Ui\Buttons\PreviewButton;
+use Kirby\Panel\Ui\Buttons\PreviewDropdownButton;
 use Kirby\Panel\Ui\Buttons\SettingsButton;
 
 return [
 	'site.preview' => function (Site $site) {
-		return new PreviewButton(link: $site->url());
+		return new PreviewDropdownButton(
+			open: $site->url(),
+			preview: $site->panel()->url(true) . '/preview/compare',
+			copy: $site->url(),
+		);
 	},
 	'page.preview' => function (Page $page) {
 		if ($page->permissions()->can('preview') === true) {
-			return new PreviewButton(link: $page->previewUrl());
+			return new PreviewDropdownButton(
+				open: $page->previewUrl(),
+				preview: $page->panel()->url(true) . '/preview/compare',
+				copy: $page->previewUrl(),
+			);
 		}
 	},
 	'page.settings' => function (Page $page) {

config/areas/site/views.php

@@ -14,6 +14,28 @@
 			return Find::file('pages/' . $id, $filename)->panel()->view();
 		}
 	],
+	'page.preview' => [
+		'pattern' => 'pages/(:any)/preview/(changes|latest|compare)',
+		'action'  => function (string $path, string $mode) {
+			$page    = Find::page($path);
+			$view    = $page->panel()->view();
+			$preview = $page->previewUrl();
+
+			return [
+				'component' => 'k-preview-view',
+				'props'     => [
+					...$view['props'],
+					'back' => $view['props']['link'],
+					'mode' => $mode,
+					'src'  => [
+						'changes' => $preview . '?_version=changes',
+						'latest'  => $preview,
+					]
+				],
+				'title' => $view['props']['title'] . ' | ' . I18n::translate('changes'),
+			];
+		}
+	],
 	'site' => [
 		'pattern' => 'site',
 		'action'  => fn () => App::instance()->site()->panel()->view()
@@ -24,4 +46,26 @@
 			return Find::file('site', $filename)->panel()->view();
 		}
 	],
+	'site.preview' => [
+		'pattern' => 'site/preview/(changes|latest|compare)',
+		'action'  => function (string $mode) {
+			$site    = App::instance()->site();
+			$view    = $site->panel()->view();
+			$preview = $site->previewUrl();
+
+			return [
+				'component' => 'k-preview-view',
+				'props'     => [
+					...$view['props'],
+					'back' => $view['props']['link'],
+					'mode' => $mode,
+					'src'  => [
+						'changes' => $preview . '?_version=changes',
+						'latest'  => $preview,
+					]
+				],
+				'title' => I18n::translate('view.site') . ' | ' . I18n::translate('changes'),
+			];
+		}
+	],
 ];

i18n/translations/en.json

@@ -18,9 +18,11 @@
 	"collapse.all": "Collapse All",
 	"color": "Color",
 	"coordinates": "Coordinates",
+	"copied": "Copied",
 	"copy": "Copy",
 	"copy.all": "Copy all",
 	"copy.success": "{count} copied!",
+	"copy.url": "Copy URL",
 	"create": "Create",
 	"custom": "Custom",
 
@@ -378,7 +380,7 @@
 	"filter": "Filter",
 
 	"form.discard": "Discard changes",
-	"form.discard.confirm": "Do you really want to <strong>delete all unpublished changes</strong>?",
+	"form.discard.confirm": "Do you really want to <strong>discard all your changes</strong>?",
 	"form.locked": "This content is disabled for you as it is currently edited by another user",
 	"form.unsaved": "The current changes have not yet been saved",
 	"form.preview": "Preview changes",
@@ -748,10 +750,13 @@
 	"users": "Users",
 
 	"version": "Version",
+	"version.changes": "Changed version",
+	"version.compare": "Compare versions",
 	"version.current": "Current version",
 	"version.latest": "Latest version",
 	"versionInformation": "Version information",
 
+	"view": "View",
 	"view.account": "Your account",
 	"view.installation": "Installation",
 	"view.languages": "Languages",

panel/src/components/Forms/FormControls.vue

@@ -4,6 +4,7 @@
 			<k-button
 				v-for="button in buttons"
 				:key="button.text"
+				:responsive="true"
 				v-bind="button"
 				size="sm"
 				variant="filled"
@@ -41,7 +42,7 @@
 			</template>
 			<template v-if="preview">
 				<hr />
-				<k-dropdown-item :link="preview" icon="preview" target="_blank">
+				<k-dropdown-item :link="preview" icon="window">
 					{{ $t("form.preview") }}
 				</k-dropdown-item>
 			</template>

panel/src/components/Views/ModelView.vue

@@ -92,6 +92,7 @@ export default {
 			}
 
 			await this.$panel.content.discard();
+			this.$panel.view.reload();
 		},
 		onInput(values) {
 			if (this.isLocked === true) {
@@ -105,13 +106,14 @@ export default {
 			e?.preventDefault?.();
 			this.onSubmit();
 		},
-		onSubmit(values = {}) {
+		async onSubmit(values = {}) {
 			if (this.isLocked === true) {
 				return false;
 			}
 
 			this.$panel.content.update(values);
-			this.$panel.content.publish();
+			await this.$panel.content.publish();
+			await this.$panel.view.refresh();
 		},
 		toPrev(e) {
 			if (this.prev && e.target.localName === "body") {

panel/src/components/Views/Pages/PageView.vue

@@ -24,7 +24,7 @@
 					:is-locked="isLocked"
 					:is-unsaved="isUnsaved"
 					:modified="modified"
-					:preview="changesUrl"
+					:preview="api + '/preview/compare'"
 					@discard="onDiscard"
 					@submit="onSubmit"
 				/>

panel/src/components/Views/Pages/SiteView.vue

@@ -20,7 +20,7 @@
 					:is-locked="isLocked"
 					:is-unsaved="isUnsaved"
 					:modified="modified"
-					:preview="changesUrl"
+					:preview="api + '/preview/compare'"
 					@discard="onDiscard"
 					@submit="onSubmit"
 				/>