Buttons for all the views

config/areas/languages/views.php

@@ -12,10 +12,11 @@
 			return App::instance()->option('languages.variables', true) !== false;
 		},
 		'action'  => function (string $code) {
+			$kirby        = App::instance();
 			$language     = Find::language($code);
 			$link         = '/languages/' . $language->code();
 			$strings      = [];
-			$foundation   = App::instance()->defaultLanguage()->translations();
+			$foundation   = $kirby->defaultLanguage()->translations();
 			$translations = $language->translations();
 
 			ksort($foundation);
@@ -67,6 +68,11 @@
 					]
 				],
 				'props'      => [
+					'buttons' => $kirby->option('panel.viewButtons.language', [
+						'preview',
+						'settings',
+						'remove'
+					]),
 					'deletable'    => $language->isDeletable(),
 					'code'         => Escape::html($language->code()),
 					'default'      => $language->isDefault(),
@@ -107,6 +113,9 @@
 			return [
 				'component' => 'k-languages-view',
 				'props'     => [
+					'buttons' => $kirby->option('panel.viewButtons.languages', [
+						'add'
+					]),
 					'languages' => $kirby->languages()->values(fn ($language) => [
 						'deletable' => $language->isDeletable(),
 						'default'   => $language->isDefault(),

config/areas/system/views.php

@@ -87,6 +87,7 @@
 			return [
 				'component' => 'k-system-view',
 				'props'     => [
+					'buttons'     => $kirby->option('panel.viewButtons.system', []),
 					'environment' => $environment,
 					'exceptions'  => $kirby->option('debug') === true ? $exceptions : [],
 					'info'        => $system->info(),

config/areas/users/views.php

@@ -18,7 +18,10 @@
 			return [
 				'component' => 'k-users-view',
 				'props'     => [
-					'role' => function () use ($kirby, $roles, $role) {
+					'buttons' => $kirby->option('panel.viewButtons.users', [
+						'add'
+					]),
+					'role' => function () use ($roles, $role) {
 						if ($role) {
 							return $roles[$role] ?? null;
 						}

panel/public/js/plugins.js

@@ -2,12 +2,12 @@ window.panel = window.panel ?? {};
 window.panel.plugins = {
 	components: {},
 	created: [],
-	headerButtons: {},
 	icons: {},
 	routes: [],
 	textareaButtons: {},
 	thirdParty: {},
 	use: [],
+	viewButtons: {},
 	views: {},
 	writerMarks: {},
 	writerNodes: {}
@@ -36,11 +36,6 @@ window.panel.plugin = function (plugin, extensions) {
 		window.panel.plugins.components[`k-${name}-field`] = options;
 	});
 
-	// Header Buttons
-	resolve(extensions, "headerButtons", (name, options) => {
-		window.panel.plugins.components[`k-view-${name}-button`] = options;
-	});
-
 	// Icons
 	resolve(extensions, "icons", (name, options) => {
 		window.panel.plugins.icons[name] = options;
@@ -54,6 +49,11 @@ window.panel.plugin = function (plugin, extensions) {
 		};
 	});
 
+	// View Buttons
+	resolve(extensions, "viewButtons", (name, options) => {
+		window.panel.plugins.components[`k-view-${name}-button`] = options;
+	});
+
 	// `Vue.use`
 	resolve(extensions, "use", (name, options) => {
 		window.panel.plugins.use.push(options);

panel/src/components/View/Buttons/AddButton.vue

@@ -0,0 +1,26 @@
+<template>
+	<component v-if="component" :is="component" />
+	<k-button
+		v-else
+		:text="$t('add')"
+		icon="add"
+		size="sm"
+		variant="filled"
+		@click="$emit('action', 'add')"
+	/>
+</template>
+
+<script>
+export default {
+	computed: {
+		component() {
+			const view = this.$panel.view.component.match(/^^k-(.*)-view$/)[1];
+			const component = `k-view-add-${view}-button`;
+
+			if (this.$helper.isComponent(component)) {
+				return component;
+			}
+		}
+	}
+};
+</script>

panel/src/components/View/Buttons/AddLanguagesButton.vue

@@ -0,0 +1,9 @@
+<template>
+	<k-button
+		:text="$t('language.create')"
+		icon="add"
+		size="sm"
+		variant="filled"
+		@click="$dialog('languages/create')"
+	/>
+</template>

panel/src/components/View/Buttons/AddUsersButton.vue

@@ -0,0 +1,16 @@
+<template>
+	<k-button
+		:disabled="!$panel.permissions.users.create"
+		:text="$t('user.create')"
+		icon="add"
+		size="sm"
+		variant="filled"
+		@click="
+			$dialog('users/create', {
+				query: {
+					role: $panel.view.props.role?.id
+				}
+			})
+		"
+	/>
+</template>

panel/src/components/View/Buttons/Buttons.vue

@@ -4,6 +4,7 @@
 			:is="`k-view-${button}-button`"
 			v-for="button in buttons"
 			:key="button"
+			@action="$emit('action', $event)"
 		/>
 	</k-button-group>
 </template>
@@ -17,6 +18,7 @@
 export default {
 	props: {
 		buttons: Array
-	}
+	},
+	emits: ["action"]
 };
 </script>

panel/src/components/View/Buttons/LanguagesButton.vue

@@ -18,7 +18,7 @@
 
 <script>
 /**
- * Header button to switch between content languages
+ * View header button to switch between content languages
  * @since 4.0.0
  */
 export default {

panel/src/components/View/Buttons/PreviewButton.vue

@@ -13,7 +13,7 @@
 
 <script>
 /**
- * Header button to open the model's preview in a new tab
+ * View header button to open the model's preview in a new tab
  * @since 5.0.0
  */
 export default {
@@ -31,12 +31,13 @@ export default {
 		},
 		link() {
 			return (
-				this.$panel.view.props.model.previewUrl ??
-				this.$panel.view.props.preview?.url
+				this.$panel.view.props.model?.previewUrl ??
+				this.$panel.view.props.preview?.url ??
+				this.$panel.view.props.url
 			);
 		},
 		permissions() {
-			return this.$panel.view.props.permissions;
+			return this.$panel.view.props.permissions ?? {};
 		}
 	}
 };

panel/src/components/View/Buttons/RemoveButton.vue

@@ -0,0 +1,26 @@
+<template>
+	<component v-if="component" :is="component" />
+	<k-button
+		v-else
+		:text="$t('delete')"
+		icon="trash"
+		size="sm"
+		variant="filled"
+		@click="$emit('action', 'remove')"
+	/>
+</template>
+
+<script>
+export default {
+	computed: {
+		component() {
+			const view = this.$panel.view.component.match(/^^k-(.*)-view$/)[1];
+			const component = `k-view-remove-${view}-button`;
+
+			if (this.$helper.isComponent(component)) {
+				return component;
+			}
+		}
+	}
+};
+</script>

panel/src/components/View/Buttons/RemoveLanguageButton.vue

@@ -0,0 +1,10 @@
+<template>
+	<k-button
+		v-if="$panel.view.props.deletable"
+		:title="$t('delete')"
+		icon="trash"
+		size="sm"
+		variant="filled"
+		@click="$dialog(`languages/${$panel.view.props.id}/delete`)"
+	/>
+</template>

panel/src/components/View/Buttons/SettingsButton.vue

@@ -8,40 +8,41 @@
 			variant="filled"
 			size="sm"
 			class="k-view-settings-button k-view-options"
-			@click="$refs.settings.toggle()"
+			@click="onClick"
 		/>
 		<k-dropdown-content
-			ref="settings"
-			:options="$dropdown(model.link)"
+			v-if="dropdown"
+			ref="dropdown"
+			:options="$dropdown(dropdown)"
 			align-x="end"
-			@action="action"
+			@action="$emit('action', $event)"
 		/>
 	</div>
 </template>
 
 <script>
 /**
- * Header button to open the model's settings dropdown
+ * View header button to open the model's settings dropdown
  * @since 5.0.0
  */
 export default {
 	inheritAttrs: false,
+	emits: ["action"],
 	computed: {
+		dropdown() {
+			return this.model?.link;
+		},
 		model() {
 			return this.$panel.view.props.model;
 		}
 	},
 	methods: {
-		action(action) {
-			if (this.$panel.view.component === "k-file-view") {
-				switch (action) {
-					case "replace":
-						return this.$panel.upload.replace({
-							...this.$panel.view.props.preview,
-							...this.model
-						});
-				}
+		onClick() {
+			if (this.dropdown) {
+				return this.$refs.dropdown.toggle();
 			}
+
+			this.$emit("action", "settings");
 		}
 	}
 };

panel/src/components/View/Buttons/StatusButton.vue

@@ -13,7 +13,7 @@
 
 <script>
 /**
- * Header button to change the page status
+ * View header button to change the page status
  * @since 5.0.0
  */
 export default {

panel/src/components/View/Buttons/ThemeButton.vue

@@ -12,7 +12,7 @@
 
 <script>
 /**
- * Header button to toggle the Panel theme
+ * View header button to toggle the Panel theme
  * @since 5.0.0
  */
 export default {

panel/src/components/View/Buttons/index.js

@@ -1,5 +1,10 @@
+import Add from "./AddButton.vue";
+import AddLanguages from "./AddLanguagesButton.vue";
+import AddUsers from "./AddUsersButton.vue";
 import Languages from "./LanguagesButton.vue";
 import Preview from "./PreviewButton.vue";
+import Remove from "./RemoveButton.vue";
+import RemoveLanguage from "./RemoveLanguageButton.vue";
 import Settings from "./SettingsButton.vue";
 import Status from "./StatusButton.vue";
 import Theme from "./ThemeButton.vue";
@@ -8,8 +13,13 @@ import Buttons from "./Buttons.vue";
 
 export default {
 	install(app) {
+		app.component("k-view-add-button", Add);
+		app.component("k-view-add-languages-button", AddLanguages);
+		app.component("k-view-add-users-button", AddUsers);
 		app.component("k-view-languages-button", Languages);
 		app.component("k-view-preview-button", Preview);
+		app.component("k-view-remove-button", Remove);
+		app.component("k-view-remove-language-button", RemoveLanguage);
 		app.component("k-view-settings-button", Settings);
 		app.component("k-view-status-button", Status);
 		app.component("k-view-theme-button", Theme);

panel/src/components/Views/Files/FileView.vue

@@ -18,7 +18,7 @@
 			{{ model.filename }}
 
 			<template #buttons>
-				<k-view-buttons :buttons="buttons" />
+				<k-view-buttons :buttons="buttons" @action="onAction" />
 				<k-form-buttons :lock="lock" />
 			</template>
 		</k-header>
@@ -59,6 +59,15 @@ export default {
 		}
 	},
 	methods: {
+		onAction(action) {
+			switch (action) {
+				case "replace":
+					return this.$panel.upload.replace({
+						...this.preview,
+						...this.model
+					});
+			}
+		},
 		setFocus(focus) {
 			if (this.$helper.object.isObject(focus) === true) {
 				focus = `${focus.x}% ${focus.y}%`;