Show name in webhooks header

src/composables/use-item/use-item.ts

@@ -9,7 +9,7 @@ import { AxiosResponse } from 'axios';
 export function useItem(collection: Ref<string>, primaryKey: Ref<string | number>) {
 	const { primaryKeyField, softDeleteStatus, statusField } = useCollection(collection);
 
-	const item = ref(null);
+	const item = ref<any>(null);
 	const error = ref(null);
 	const loading = ref(false);
 	const saving = ref(false);

src/lang/en-US/index.json

@@ -74,7 +74,7 @@
 	"confirm_revert_body": "This will revert the item to the selected state.",
 
 	"editing_role": "{role} Role",
-	"editing_webhook": "Editing Webhook",
+	"adding_webhook": "Adding Webhook",
 
 	"code": "Code",
 	"loc": "No lines of {lang} | One line of {lang} | {count} lines of {lang}",
@@ -790,6 +790,7 @@
   "editing_items": "Batch Editing {count} Items",
   "editing_my_profile": "Editing My Profile",
   "editing_single": "Editing {collection}",
+  "editing_name": "Editing {name}",
   "email": "Email",
   "email_address": "Email Address",
   "embed": "Embed",

src/modules/settings/routes/webhooks/detail/detail.vue

@@ -1,5 +1,5 @@
 <template>
-	<private-view :title="$t('editing_webhook')">
+	<private-view :title="title">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon exact :to="`/${currentProjectKey}/settings/webhooks/`">
 				<v-icon name="arrow_back" />
@@ -76,6 +76,7 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import marked from 'marked';
+import i18n from '@/lang';
 
 type Values = {
 	[field: string]: any;
@@ -101,9 +102,14 @@ export default defineComponent({
 		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
-
 		const confirmDelete = ref(false);
 
+		const title = computed(() => {
+			if (loading.value) return i18n.t('loading');
+			if (isNew.value) return i18n.t('adding_webhook');
+			return item.value.name;
+		});
+
 		return {
 			item,
 			loading,
@@ -122,6 +128,7 @@ export default defineComponent({
 			isBatch,
 			currentProjectKey,
 			marked,
+			title,
 		};
 
 		async function saveAndQuit() {