From 7615bb26f3331a84e663af28045e07d2575c2a1d Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 31 Mar 2026 11:31:41 +0200
Subject: [PATCH 1/4] converted webhooks and webhook logs

---
 src/views/webhooks/WebhookLogsIndex.vue | 503 ++++++-----------
 src/views/webhooks/WebhooksIndex.vue    | 693 ++++++++----------------
 2 files changed, 371 insertions(+), 825 deletions(-)

diff --git a/src/views/webhooks/WebhookLogsIndex.vue b/src/views/webhooks/WebhookLogsIndex.vue
index e5fd24a5f..024aa57de 100644
--- a/src/views/webhooks/WebhookLogsIndex.vue
+++ b/src/views/webhooks/WebhookLogsIndex.vue
@@ -1,155 +1,104 @@
 <template>
 	<NcAppContent>
-		<div class="viewContainer">
-			<!-- Header -->
-			<div class="viewHeader">
-				<div class="viewHeaderTitle">
-					<h1 class="viewHeaderTitleIndented">
-						{{ t('openregister', 'Webhook Logs') }}
-					</h1>
-					<NcButton
-						type="tertiary"
-						@click="goBack">
-						<template #icon>
-							<ArrowLeft :size="20" />
-						</template>
-						{{ t('openregister', 'Back to Webhooks') }}
-					</NcButton>
-				</div>
-				<p>
-					{{ t('openregister', 'View webhook delivery logs and filter by webhook') }}
-				</p>
-			</div>
-
-			<!-- Filters -->
-			<div class="viewActionsBar">
-				<div class="viewInfo">
-					<span class="viewTotalCount">
-						{{ t('openregister', 'Showing {showing} of {total} log entries', {
-							showing: logsList.length,
-							total: totalLogs
-						}) }}
-					</span>
-				</div>
-				<div class="viewActions">
-					<NcSelect
-						v-model="selectedWebhookId"
-						:options="webhookOptions"
-						:placeholder="t('openregister', 'Filter by webhook')"
-						:clearable="true"
-						:label-outside="true"
-						:input-label="t('openregister', 'Filter by webhook')"
-						@update:value="handleWebhookFilterChange">
-						<template #option="{ option }">
-							{{ option.label }}
-						</template>
-					</NcSelect>
-					<NcButton
-						type="secondary"
-						@click="refreshLogs">
-						<template #icon>
-							<Refresh :size="20" />
-						</template>
-						{{ t('openregister', 'Refresh') }}
-					</NcButton>
-				</div>
-			</div>
-
-			<!-- Logs Table -->
-			<div class="tableContainer" :class="{ 'is-loading': loading }">
-				<div v-if="loading" class="loadingWrapper">
-					<NcLoadingIcon :size="64" />
-				</div>
-
-				<NcEmptyContent
-					v-else-if="!logsList.length"
-					:name="t('openregister', 'No log entries found')"
-					:description="t('openregister', 'There are no webhook log entries matching your filters.')">
+		<CnIndexPage
+			ref="indexPage"
+			title="Webhook Logs"
+			description="View webhook delivery logs and filter by webhook"
+			:show-title="true"
+			:show-add="false"
+			:objects="logsList"
+			:columns="tableColumns"
+			:pagination="paginationData"
+			:selectable="false"
+			:show-edit-action="false"
+			:show-copy-action="false"
+			:show-delete-action="false"
+			:show-form-dialog="false"
+			:show-mass-import="false"
+			:show-mass-export="false"
+			:show-mass-copy="false"
+			:show-mass-delete="false"
+			:show-view-toggle="false"
+			:loading="loading"
+			:refreshing="isRefreshing"
+			empty-text="No log entries found"
+			@refresh="handleRefresh"
+			@page-changed="onPageChanged"
+			@page-size-changed="onPageSizeChanged">
+			<!-- Header actions: back button + webhook filter -->
+			<template #header-actions>
+				<NcButton
+					type="tertiary"
+					@click="goBack">
 					<template #icon>
-						<FileDocumentOutline :size="64" />
+						<ArrowLeft :size="20" />
 					</template>
-				</NcEmptyContent>
-
-				<table v-else class="webhooksTable">
-					<thead>
-						<tr>
-							<th>{{ t('openregister', 'Webhook') }}</th>
-							<th>{{ t('openregister', 'Event') }}</th>
-							<th>{{ t('openregister', 'Status') }}</th>
-							<th>{{ t('openregister', 'Status Code') }}</th>
-							<th>{{ t('openregister', 'Attempt') }}</th>
-							<th>{{ t('openregister', 'Created') }}</th>
-							<th>{{ t('openregister', 'Error') }}</th>
-							<th class="column-actions">
-								{{ t('openregister', 'Actions') }}
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="log in logsList" :key="log.id">
-							<td>
-								{{ getWebhookName(log.webhookId) }}
-							</td>
-							<td>
-								<span class="event-class">{{ truncateEventClass(log.eventClass) }}</span>
-							</td>
-							<td>
-								<span :class="log.success ? 'status-success' : 'status-failed'">
-									{{ log.success ? t('openregister', 'Success') : t('openregister', 'Failed') }}
-								</span>
-							</td>
-							<td>
-								{{ log.statusCode || '-' }}
-							</td>
-							<td>
-								{{ log.attempt }}
-							</td>
-							<td>
-								{{ formatDate(log.created) }}
-							</td>
-							<td>
-								<span v-if="log.errorMessage" class="error-message" :title="log.errorMessage">
-									{{ truncateText(log.errorMessage, 50) }}
-								</span>
-								<span v-else>-</span>
-							</td>
-							<td class="column-actions">
-								<NcActions>
-									<NcActionButton
-										close-after-click
-										@click="viewLogDetails(log)">
-										<template #icon>
-											<Eye :size="20" />
-										</template>
-										{{ t('openregister', 'View Details') }}
-									</NcActionButton>
-								</NcActions>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-
-				<!-- Pagination -->
-				<div v-if="totalLogs > limit" class="pagination">
-					<NcButton
-						:disabled="offset === 0"
-						@click="previousPage">
-						{{ t('openregister', 'Previous') }}
-					</NcButton>
-					<span class="pagination-info">
-						{{ t('openregister', 'Page {current} of {total}', {
-							current: currentPage,
-							total: totalPages
-						}) }}
-					</span>
-					<NcButton
-						:disabled="offset + limit >= totalLogs"
-						@click="nextPage">
-						{{ t('openregister', 'Next') }}
-					</NcButton>
-				</div>
-			</div>
-		</div>
+					{{ t('openregister', 'Back to Webhooks') }}
+				</NcButton>
+				<NcSelect
+					v-model="selectedWebhookId"
+					:options="webhookOptions"
+					:placeholder="t('openregister', 'Filter by webhook')"
+					:clearable="true"
+					:label-outside="true"
+					:input-label="t('openregister', 'Filter by webhook')"
+					@update:value="handleWebhookFilterChange">
+					<template #option="{ option }">
+						{{ option.label }}
+					</template>
+				</NcSelect>
+			</template>
+
+			<!-- Custom column: webhook name lookup -->
+			<template #column-webhook="{ row }">
+				{{ getWebhookName(row.webhookId) }}
+			</template>
+
+			<!-- Custom column: truncated event class -->
+			<template #column-eventClass="{ row }">
+				<span class="event-class">{{ truncateEventClass(row.eventClass) }}</span>
+			</template>
+
+			<!-- Custom column: success/failed badge -->
+			<template #column-success="{ row }">
+				<CnStatusBadge
+					:label="row.success ? t('openregister', 'Success') : t('openregister', 'Failed')"
+					:variant="row.success ? 'success' : 'error'"
+					:solid="true" />
+			</template>
+
+			<!-- Custom column: status code -->
+			<template #column-statusCode="{ row }">
+				{{ row.statusCode || '-' }}
+			</template>
+
+			<!-- Custom column: created date -->
+			<template #column-created="{ row }">
+				{{ formatDate(row.created) }}
+			</template>
+
+			<!-- Custom column: error message -->
+			<template #column-errorMessage="{ row }">
+				<span v-if="row.errorMessage" class="error-message" :title="row.errorMessage">
+					{{ truncateText(row.errorMessage, 50) }}
+				</span>
+				<span v-else>-</span>
+			</template>
+
+			<!-- Row actions -->
+			<template #row-actions="{ row }">
+				<NcActions>
+					<NcActionButton
+						close-after-click
+						@click="viewLogDetails(row)">
+						<template #icon>
+							<Eye :size="20" />
+						</template>
+						{{ t('openregister', 'View Details') }}
+					</NcActionButton>
+				</NcActions>
+			</template>
+		</CnIndexPage>
 	</NcAppContent>
 </template>
 
@@ -164,14 +113,12 @@ import {
 	NcActions,
 	NcActionButton,
 	NcButton,
-	NcLoadingIcon,
-	NcEmptyContent,
 	NcSelect,
 } from '@nextcloud/vue'
 
+import { CnIndexPage, CnStatusBadge } from '@conduction/nextcloud-vue'
+
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-import Refresh from 'vue-material-design-icons/Refresh.vue'
-import FileDocumentOutline from 'vue-material-design-icons/FileDocumentOutline.vue'
 import Eye from 'vue-material-design-icons/Eye.vue'
 
 /**
@@ -184,12 +131,10 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcButton,
-		NcLoadingIcon,
-		NcEmptyContent,
 		NcSelect,
+		CnIndexPage,
+		CnStatusBadge,
 		ArrowLeft,
-		Refresh,
-		FileDocumentOutline,
 		Eye,
 	},
 	data() {
@@ -197,29 +142,35 @@ export default {
 			logsList: [],
 			webhooksList: [],
 			loading: false,
+			isRefreshing: false,
 			totalLogs: 0,
-			limit: 50,
-			offset: 0,
 			selectedWebhookId: null,
+			pagination: {
+				page: 1,
+				limit: 50,
+			},
 		}
 	},
 	computed: {
-		/**
-		 * Get current page number
-		 *
-		 * @return {number} Current page
-		 */
-		currentPage() {
-			return Math.floor(this.offset / this.limit) + 1
+		tableColumns() {
+			return [
+				{ key: 'webhook', label: t('openregister', 'Webhook') },
+				{ key: 'eventClass', label: t('openregister', 'Event') },
+				{ key: 'success', label: t('openregister', 'Status') },
+				{ key: 'statusCode', label: t('openregister', 'Status Code') },
+				{ key: 'attempt', label: t('openregister', 'Attempt') },
+				{ key: 'created', label: t('openregister', 'Created') },
+				{ key: 'errorMessage', label: t('openregister', 'Error') },
+			]
 		},
 
-		/**
-		 * Get total number of pages
-		 *
-		 * @return {number} Total pages
-		 */
-		totalPages() {
-			return Math.ceil(this.totalLogs / this.limit)
+		paginationData() {
+			return {
+				page: this.pagination.page,
+				pages: Math.ceil(this.totalLogs / this.pagination.limit),
+				total: this.totalLogs,
+				limit: this.pagination.limit,
+			}
 		},
 
 		/**
@@ -256,6 +207,8 @@ export default {
 		window.removeEventListener('webhook-log-retried', this.loadLogs)
 	},
 	methods: {
+		t,
+
 		/**
 		 * Load webhooks list
 		 *
@@ -281,8 +234,8 @@ export default {
 			this.loading = true
 			try {
 				const params = {
-					limit: this.limit,
-					offset: this.offset,
+					limit: this.pagination.limit,
+					offset: (this.pagination.page - 1) * this.pagination.limit,
 				}
 				if (this.selectedWebhookId) {
 					params.webhook_id = this.selectedWebhookId
@@ -302,48 +255,52 @@ export default {
 		},
 
 		/**
-		 * Handle webhook filter change
+		 * Handle refresh
 		 *
-		 * @param {number|null} webhookId - Selected webhook ID
-		 * @return {void}
+		 * @return {Promise<void>}
 		 */
-		handleWebhookFilterChange(webhookId) {
-			this.selectedWebhookId = webhookId
-			this.offset = 0
-			this.loadLogs()
+		async handleRefresh() {
+			this.isRefreshing = true
+			try {
+				await this.loadLogs()
+			} finally {
+				this.isRefreshing = false
+			}
 		},
 
 		/**
-		 * Refresh logs
+		 * Handle webhook filter change
 		 *
+		 * @param {number|null} webhookId - Selected webhook ID
 		 * @return {void}
 		 */
-		refreshLogs() {
+		handleWebhookFilterChange(webhookId) {
+			this.selectedWebhookId = webhookId
+			this.pagination.page = 1
 			this.loadLogs()
 		},
 
 		/**
-		 * Go to previous page
+		 * Handle page change
 		 *
+		 * @param {number} page - New page number
 		 * @return {void}
 		 */
-		previousPage() {
-			if (this.offset > 0) {
-				this.offset -= this.limit
-				this.loadLogs()
-			}
+		onPageChanged(page) {
+			this.pagination.page = page
+			this.loadLogs()
 		},
 
 		/**
-		 * Go to next page
+		 * Handle page size change
 		 *
+		 * @param {number} pageSize - New page size
 		 * @return {void}
 		 */
-		nextPage() {
-			if (this.offset + this.limit < this.totalLogs) {
-				this.offset += this.limit
-				this.loadLogs()
-			}
+		onPageSizeChanged(pageSize) {
+			this.pagination.page = 1
+			this.pagination.limit = pageSize
+			this.loadLogs()
 		},
 
 		/**
@@ -418,151 +375,6 @@ export default {
 </script>
 
 <style scoped>
-.viewContainer {
-	padding: 20px;
-	max-width: 100%;
-}
-
-.viewHeader {
-	margin-bottom: 20px;
-}
-
-.viewHeaderTitle {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	margin-bottom: 8px;
-}
-
-.viewHeaderTitleIndented {
-	margin: 0;
-	font-size: 28px;
-	font-weight: 600;
-}
-
-.viewHeader p {
-	color: var(--color-text-maxcontrast);
-	margin: 0;
-}
-
-.viewActionsBar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 20px;
-	padding: 12px;
-	background: var(--color-background-hover);
-	border-radius: var(--border-radius-large);
-}
-
-.viewInfo {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-}
-
-.viewTotalCount {
-	font-weight: 600;
-}
-
-.viewActions {
-	display: flex;
-	gap: 8px;
-	align-items: center;
-}
-
-.tableContainer {
-	background: var(--color-main-background);
-	border-radius: var(--border-radius-large);
-	overflow-x: auto;
-	overflow-y: visible;
-	min-height: 200px;
-}
-
-.tableContainer.is-loading {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.loadingWrapper {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	padding: 40px;
-}
-
-.webhooksTable {
-	width: 100%;
-	border-collapse: collapse;
-	min-width: 100%;
-}
-
-.webhooksTable thead {
-	background: var(--color-background-hover);
-	border-bottom: 2px solid var(--color-border);
-}
-
-.webhooksTable th {
-	padding: 12px 16px;
-	text-align: left;
-	font-weight: 600;
-	white-space: nowrap;
-}
-
-.webhooksTable td {
-	padding: 12px 16px;
-	border-bottom: 1px solid var(--color-border);
-}
-
-.webhooksTable tbody tr:hover {
-	background: var(--color-background-hover);
-}
-
-.column-actions {
-	position: sticky;
-	right: 0;
-	background: var(--color-main-background);
-	z-index: 5;
-	min-width: 80px;
-	width: 80px;
-	text-align: right;
-}
-
-.webhooksTable thead .column-actions {
-	position: sticky;
-	right: 0;
-	background: var(--color-background-hover);
-	z-index: 10;
-	min-width: 80px;
-	width: 80px;
-	text-align: right;
-}
-
-.webhooksTable tbody tr:hover .column-actions {
-	background: var(--color-background-hover);
-}
-
-.webhooksTable thead .column-actions {
-	z-index: 10;
-}
-
-.webhooksTable tbody tr:hover .column-actions {
-	background: var(--color-background-hover);
-}
-
-.status-success {
-	color: var(--color-success);
-	font-weight: 600;
-}
-
-.status-failed {
-	color: var(--color-error);
-	font-weight: 600;
-}
-
 .event-class {
 	font-family: monospace;
 	font-size: 0.9em;
@@ -573,15 +385,4 @@ export default {
 	font-size: 0.9em;
 }
 
-.pagination {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 16px;
-	padding: 20px;
-}
-
-.pagination-info {
-	font-weight: 600;
-}
 </style>
diff --git a/src/views/webhooks/WebhooksIndex.vue b/src/views/webhooks/WebhooksIndex.vue
index 33d5ccd9f..54120fc0a 100644
--- a/src/views/webhooks/WebhooksIndex.vue
+++ b/src/views/webhooks/WebhooksIndex.vue
@@ -1,198 +1,141 @@
 <template>
 	<NcAppContent :show-details="sidebarOpen" @update:showDetails="toggleSidebar">
-		<div class="viewContainer">
-			<!-- Header -->
-			<div class="viewHeader">
-				<div class="viewHeaderTitle">
-					<h1 class="viewHeaderTitleIndented">
-						{{ t('openregister', 'Webhooks') }}
-					</h1>
-					<NcButton
-						type="tertiary"
-						:aria-label="t('openregister', 'Toggle search sidebar')"
-						@click="toggleSidebar">
+		<CnIndexPage
+			ref="indexPage"
+			title="Webhooks"
+			description="Manage webhooks for event-driven integrations"
+			:show-title="true"
+			:objects="webhooksList"
+			:columns="tableColumns"
+			:pagination="paginationData"
+			:view-mode="viewMode"
+			:selectable="false"
+			:show-edit-action="false"
+			:show-copy-action="false"
+			:show-delete-action="false"
+			:show-form-dialog="false"
+			:show-mass-import="false"
+			:show-mass-export="false"
+			:show-mass-copy="false"
+			:show-mass-delete="false"
+			show-view-toggle
+			:loading="loading"
+			:refreshing="isRefreshing"
+			add-label="Create Webhook"
+			empty-text="No webhooks found"
+			@add="openCreateDialog"
+			@refresh="handleRefresh"
+			@page-changed="onPageChanged"
+			@page-size-changed="onPageSizeChanged"
+			@view-mode-change="viewMode = $event">
+			<!-- Card view template -->
+			<template #card="{ object }">
+				<CnCard
+					:title="object.name"
+					:labels="mapWebhookLabels(object)"
+					:stats="mapWebhookStats(object)">
+					<template #icon>
+						<Webhook :size="20" />
+					</template>
+				</CnCard>
+			</template>
+
+			<!-- Custom column: name with icon -->
+			<template #column-name="{ row }">
+				<div class="webhook-name-cell">
+					<Webhook :size="20" class="webhook-icon" />
+					<span class="webhook-name">{{ row.name }}</span>
+				</div>
+			</template>
+
+			<!-- Custom column: truncated URL -->
+			<template #column-url="{ row }">
+				<span class="webhook-url">{{ truncateUrl(row.url) }}</span>
+			</template>
+
+			<!-- Custom column: method badge -->
+			<template #column-method="{ row }">
+				<CnStatusBadge :label="row.method" :color-map="methodColorMap" :solid="true" />
+			</template>
+
+			<!-- Custom column: status badge -->
+			<template #column-status="{ row }">
+				<CnStatusBadge
+					:label="row.enabled ? t('openregister', 'Enabled') : t('openregister', 'Disabled')"
+					:variant="row.enabled ? 'success' : 'warning'"
+					:solid="true" />
+			</template>
+
+			<!-- Custom column: last triggered date -->
+			<template #column-lastTriggeredAt="{ row }">
+				{{ formatDate(row.lastTriggeredAt) }}
+			</template>
+
+			<!-- Custom column: success rate -->
+			<template #column-successRate="{ row }">
+				{{ formatSuccessRate(row) }}
+			</template>
+
+			<!-- Row actions -->
+			<template #row-actions="{ row }">
+				<NcActions>
+					<NcActionButton
+						close-after-click
+						@click="editWebhook(row)">
 						<template #icon>
-							<FilterVariant :size="20" />
+							<Pencil :size="20" />
 						</template>
-						{{ sidebarOpen ? t('openregister', 'Hide Filters') : t('openregister', 'Show Filters') }}
-					</NcButton>
-				</div>
-				<p>
-					{{ t('openregister', 'Manage webhooks for event-driven integrations') }}
-				</p>
-			</div>
-
-			<!-- Actions Bar -->
-			<div class="viewActionsBar">
-				<div class="viewInfo">
-					<span v-if="webhooksList.length" class="viewTotalCount">
-						{{ t('openregister', 'Showing {showing} of {total} webhooks', {
-							showing: webhooksList.length,
-							total: totalWebhooks
-						}) }}
-					</span>
-				</div>
-				<div class="viewActions">
-					<NcButton
-						type="primary"
-						@click="openCreateDialog">
+						{{ t('openregister', 'Edit') }}
+					</NcActionButton>
+					<NcActionButton
+						close-after-click
+						@click="testWebhook(row.id)">
 						<template #icon>
-							<Plus :size="20" />
+							<PlayOutline :size="20" />
 						</template>
-						{{ t('openregister', 'Create Webhook') }}
-					</NcButton>
-					<NcActions
-						:force-name="true"
-						:inline="1"
-						menu-name="Actions">
-						<NcActionButton
-							close-after-click
-							@click="refreshWebhooks">
-							<template #icon>
-								<Refresh :size="20" />
-							</template>
-							{{ t('openregister', 'Refresh') }}
-						</NcActionButton>
-					</NcActions>
-				</div>
-			</div>
-
-			<!-- Webhooks Table -->
-			<div class="tableContainer" :class="{ 'is-loading': loading }">
-				<div v-if="loading" class="loadingWrapper">
-					<NcLoadingIcon :size="64" />
-				</div>
-
-				<NcEmptyContent
-					v-else-if="!webhooksList.length"
-					:name="t('openregister', 'No webhooks found')"
-					:description="t('openregister', 'No webhooks have been configured yet')">
+						{{ t('openregister', 'Test') }}
+					</NcActionButton>
+					<NcActionButton
+						close-after-click
+						@click="viewLogs(row.id)">
+						<template #icon>
+							<FileDocumentOutline :size="20" />
+						</template>
+						{{ t('openregister', 'View Logs') }}
+					</NcActionButton>
+					<NcActionButton
+						close-after-click
+						@click="toggleWebhook(row)">
+						<template #icon>
+							<PauseCircleOutline v-if="row.enabled" :size="20" />
+							<PlayOutline v-else :size="20" />
+						</template>
+						{{ row.enabled ? t('openregister', 'Disable') : t('openregister', 'Enable') }}
+					</NcActionButton>
+					<NcActionButton
+						close-after-click
+						@click="deleteWebhook(row.id)">
+						<template #icon>
+							<DeleteOutline :size="20" />
+						</template>
+						{{ t('openregister', 'Delete') }}
+					</NcActionButton>
+				</NcActions>
+			</template>
+
+			<!-- Filter toggle in header actions -->
+			<template #header-actions>
+				<NcButton
+					type="tertiary"
+					:aria-label="t('openregister', 'Toggle search sidebar')"
+					@click="toggleSidebar">
 					<template #icon>
-						<Webhook :size="64" />
+						<FilterVariant :size="20" />
 					</template>
-				</NcEmptyContent>
-
-				<table v-else class="webhooksTable">
-					<thead>
-						<tr>
-							<th class="column-name">
-								{{ t('openregister', 'Name') }}
-							</th>
-							<th class="column-url">
-								{{ t('openregister', 'URL') }}
-							</th>
-							<th class="column-method">
-								{{ t('openregister', 'Method') }}
-							</th>
-							<th class="column-status">
-								{{ t('openregister', 'Status') }}
-							</th>
-							<th class="column-last-triggered">
-								{{ t('openregister', 'Last Triggered') }}
-							</th>
-							<th class="column-success-rate">
-								{{ t('openregister', 'Success Rate') }}
-							</th>
-							<th class="column-actions">
-								{{ t('openregister', 'Actions') }}
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="webhook in webhooksList" :key="webhook.id">
-							<td class="column-name">
-								<div class="webhook-name-cell">
-									<Webhook :size="20" class="webhook-icon" />
-									<span class="webhook-name">{{ webhook.name }}</span>
-								</div>
-							</td>
-							<td class="column-url">
-								<span class="webhook-url">{{ truncateUrl(webhook.url) }}</span>
-							</td>
-							<td class="column-method">
-								<span class="badge badge-method">{{ webhook.method }}</span>
-							</td>
-							<td class="column-status">
-								<span class="badge" :class="'badge-status-' + (webhook.enabled ? 'enabled' : 'disabled')">
-									{{ webhook.enabled ? t('openregister', 'Enabled') : t('openregister', 'Disabled') }}
-								</span>
-							</td>
-							<td class="column-last-triggered">
-								{{ formatDate(webhook.lastTriggeredAt) }}
-							</td>
-							<td class="column-success-rate">
-								{{ formatSuccessRate(webhook) }}
-							</td>
-							<td class="column-actions">
-								<NcActions>
-									<NcActionButton
-										close-after-click
-										@click="editWebhook(webhook)">
-										<template #icon>
-											<Pencil :size="20" />
-										</template>
-										{{ t('openregister', 'Edit') }}
-									</NcActionButton>
-									<NcActionButton
-										close-after-click
-										@click="testWebhook(webhook.id)">
-										<template #icon>
-											<PlayOutline :size="20" />
-										</template>
-										{{ t('openregister', 'Test') }}
-									</NcActionButton>
-									<NcActionButton
-										close-after-click
-										@click="viewLogs(webhook.id)">
-										<template #icon>
-											<FileDocumentOutline :size="20" />
-										</template>
-										{{ t('openregister', 'View Logs') }}
-									</NcActionButton>
-									<NcActionButton
-										close-after-click
-										@click="toggleWebhook(webhook)">
-										<template #icon>
-											<PauseCircleOutline v-if="webhook.enabled" :size="20" />
-											<PlayOutline v-else :size="20" />
-										</template>
-										{{ webhook.enabled ? t('openregister', 'Disable') : t('openregister', 'Enable') }}
-									</NcActionButton>
-									<NcActionButton
-										close-after-click
-										@click="deleteWebhook(webhook.id)">
-										<template #icon>
-											<DeleteOutline :size="20" />
-										</template>
-										{{ t('openregister', 'Delete') }}
-									</NcActionButton>
-								</NcActions>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-
-				<!-- Pagination -->
-				<div v-if="totalWebhooks > limit" class="pagination">
-					<NcButton
-						:disabled="offset === 0"
-						@click="previousPage">
-						{{ t('openregister', 'Previous') }}
-					</NcButton>
-					<span class="pagination-info">
-						{{ t('openregister', 'Page {current} of {total}', {
-							current: currentPage,
-							total: totalPages
-						}) }}
-					</span>
-					<NcButton
-						:disabled="offset + limit >= totalWebhooks"
-						@click="nextPage">
-						{{ t('openregister', 'Next') }}
-					</NcButton>
-				</div>
-			</div>
-		</div>
+					{{ sidebarOpen ? t('openregister', 'Hide Filters') : t('openregister', 'Show Filters') }}
+				</NcButton>
+			</template>
+		</CnIndexPage>
 
 		<!-- Search Sidebar -->
 		<template #details>
@@ -217,20 +160,18 @@ import {
 	NcActions,
 	NcActionButton,
 	NcButton,
-	NcLoadingIcon,
-	NcEmptyContent,
 } from '@nextcloud/vue'
 
+import { CnIndexPage, CnCard, CnStatusBadge } from '@conduction/nextcloud-vue'
+
 import WebhooksSidebar from '../../components/WebhooksSidebar.vue'
 
 import Webhook from 'vue-material-design-icons/Webhook.vue'
-import Refresh from 'vue-material-design-icons/Refresh.vue'
 import FilterVariant from 'vue-material-design-icons/FilterVariant.vue'
 import PlayOutline from 'vue-material-design-icons/PlayOutline.vue'
 import PauseCircleOutline from 'vue-material-design-icons/PauseCircleOutline.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import DeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'
-import Plus from 'vue-material-design-icons/Plus.vue'
 import FileDocumentOutline from 'vue-material-design-icons/FileDocumentOutline.vue'
 
 /**
@@ -243,16 +184,15 @@ export default {
 		NcActions,
 		NcActionButton,
 		NcButton,
-		NcLoadingIcon,
-		NcEmptyContent,
+		CnIndexPage,
+		CnCard,
+		CnStatusBadge,
 		Webhook,
-		Refresh,
 		FilterVariant,
 		PlayOutline,
 		PauseCircleOutline,
 		Pencil,
 		DeleteOutline,
-		Plus,
 		FileDocumentOutline,
 		WebhooksSidebar,
 	},
@@ -260,56 +200,46 @@ export default {
 		return {
 			webhooksList: [],
 			loading: false,
+			isRefreshing: false,
 			totalWebhooks: 0,
-			limit: 50,
-			offset: 0,
+			viewMode: 'table',
 			sidebarOpen: false,
 			searchQuery: '',
 			enabledFilter: null,
+			pagination: {
+				page: 1,
+				limit: 50,
+			},
 		}
 	},
 	computed: {
-		/**
-		 * Get current page number
-		 *
-		 * @return {number} Current page
-		 */
-		currentPage() {
-			return Math.floor(this.offset / this.limit) + 1
+		methodColorMap() {
+			return {
+				GET: 'success',
+				POST: 'primary',
+				PUT: 'warning',
+				PATCH: 'info',
+				DELETE: 'error',
+			}
 		},
 
-		/**
-		 * Get total number of pages
-		 *
-		 * @return {number} Total pages
-		 */
-		totalPages() {
-			return Math.ceil(this.totalWebhooks / this.limit)
+		tableColumns() {
+			return [
+				{ key: 'name', label: t('openregister', 'Name'), sortable: true },
+				{ key: 'url', label: t('openregister', 'URL') },
+				{ key: 'method', label: t('openregister', 'Method') },
+				{ key: 'status', label: t('openregister', 'Status') },
+				{ key: 'lastTriggeredAt', label: t('openregister', 'Last Triggered') },
+				{ key: 'successRate', label: t('openregister', 'Success Rate') },
+			]
 		},
 
-		/**
-		 * Get properties for selected events
-		 *
-		 * @return {Array} Array of property options
-		 */
-		selectedEventProperties() {
-			if (!this.newWebhook.events || this.newWebhook.events.length === 0) {
-				return []
-			}
-
-			// Get unique properties from all selected events.
-			const propertiesSet = new Set()
-			this.newWebhook.events.forEach(eventClass => {
-				const event = this.availableEvents.find(e => e.class === eventClass)
-				if (event && event.properties) {
-					event.properties.forEach(prop => propertiesSet.add(prop))
-				}
-			})
-
-			return Array.from(propertiesSet).map(prop => ({
-				value: prop,
-				label: prop,
-			}))
+		paginationData() {
+			const page = this.pagination.page
+			const limit = this.pagination.limit
+			const total = this.totalWebhooks
+			const pages = Math.ceil(total / limit)
+			return { page, pages, total, limit }
 		},
 	},
 	mounted() {
@@ -335,7 +265,7 @@ export default {
 		 */
 		handleSearchUpdate(query) {
 			this.searchQuery = query
-			this.offset = 0
+			this.pagination.page = 1
 			this.loadWebhooks()
 		},
 
@@ -347,7 +277,7 @@ export default {
 		 */
 		handleEnabledUpdate(enabled) {
 			this.enabledFilter = enabled
-			this.offset = 0
+			this.pagination.page = 1
 			this.loadWebhooks()
 		},
 
@@ -382,8 +312,8 @@ export default {
 
 					// Apply pagination
 					this.totalWebhooks = webhooks.length
-					const start = this.offset
-					const end = start + this.limit
+					const start = (this.pagination.page - 1) * this.pagination.limit
+					const end = start + this.pagination.limit
 					this.webhooksList = webhooks.slice(start, end)
 				}
 			} catch (error) {
@@ -395,36 +325,40 @@ export default {
 		},
 
 		/**
-		 * Refresh the webhooks list
+		 * Handle refresh
 		 *
-		 * @return {void}
+		 * @return {Promise<void>}
 		 */
-		refreshWebhooks() {
-			this.loadWebhooks()
+		async handleRefresh() {
+			this.isRefreshing = true
+			try {
+				await this.loadWebhooks()
+			} finally {
+				this.isRefreshing = false
+			}
 		},
 
 		/**
-		 * Go to previous page
+		 * Handle page change
 		 *
+		 * @param {number} page - New page number
 		 * @return {void}
 		 */
-		previousPage() {
-			if (this.offset > 0) {
-				this.offset = Math.max(0, this.offset - this.limit)
-				this.loadWebhooks()
-			}
+		onPageChanged(page) {
+			this.pagination.page = page
+			this.loadWebhooks()
 		},
 
 		/**
-		 * Go to next page
+		 * Handle page size change
 		 *
+		 * @param {number} pageSize - New page size
 		 * @return {void}
 		 */
-		nextPage() {
-			if (this.offset + this.limit < this.totalWebhooks) {
-				this.offset += this.limit
-				this.loadWebhooks()
-			}
+		onPageSizeChanged(pageSize) {
+			this.pagination.page = 1
+			this.pagination.limit = pageSize
+			this.loadWebhooks()
 		},
 
 		/**
@@ -564,137 +498,42 @@ export default {
 			return new Date(date).toLocaleString()
 		},
 
+		/**
+		 * Map webhook data to card labels
+		 *
+		 * @param {object} webhook - Webhook object
+		 * @return {Array} Label objects
+		 */
+		mapWebhookLabels(webhook) {
+			const labels = []
+			if (webhook.method) {
+				labels.push({ text: webhook.method, variant: 'default' })
+			}
+			labels.push({
+				text: webhook.enabled ? t('openregister', 'Enabled') : t('openregister', 'Disabled'),
+				variant: webhook.enabled ? 'success' : 'warning',
+			})
+			return labels
+		},
+
+		/**
+		 * Map webhook data to card stats
+		 *
+		 * @param {object} webhook - Webhook object
+		 * @return {Array} Stat objects
+		 */
+		mapWebhookStats(webhook) {
+			return [
+				{ label: t('openregister', 'URL'), value: this.truncateUrl(webhook.url) },
+				{ label: t('openregister', 'Last Triggered'), value: this.formatDate(webhook.lastTriggeredAt) },
+				{ label: t('openregister', 'Success Rate'), value: this.formatSuccessRate(webhook) },
+			]
+		},
 	},
 }
 </script>
 
 <style scoped>
-.viewContainer {
-	padding: 20px;
-	max-width: 100%;
-}
-
-.viewHeader {
-	margin-bottom: 20px;
-}
-
-.viewHeaderTitle {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	margin-bottom: 8px;
-}
-
-.viewHeaderTitleIndented {
-	margin: 0;
-	font-size: 28px;
-	font-weight: 600;
-}
-
-.viewHeader p {
-	color: var(--color-text-maxcontrast);
-	margin: 0;
-}
-
-.viewActionsBar {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 20px;
-	padding: 12px;
-	background: var(--color-background-hover);
-	border-radius: var(--border-radius-large);
-}
-
-.viewInfo {
-	display: flex;
-	gap: 12px;
-	align-items: center;
-}
-
-.viewTotalCount {
-	font-weight: 600;
-}
-
-.viewActions {
-	display: flex;
-	gap: 8px;
-}
-
-.tableContainer {
-	background: var(--color-main-background);
-	border-radius: var(--border-radius-large);
-	overflow-x: auto;
-	overflow-y: visible;
-	min-height: 200px;
-}
-
-.tableContainer.is-loading {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.loadingWrapper {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	padding: 40px;
-}
-
-.webhooksTable {
-	width: 100%;
-	border-collapse: collapse;
-	min-width: 100%;
-}
-
-.webhooksTable thead {
-	background: var(--color-background-hover);
-	border-bottom: 2px solid var(--color-border);
-}
-
-.webhooksTable th {
-	padding: 12px 16px;
-	text-align: left;
-	font-weight: 600;
-	white-space: nowrap;
-}
-
-.webhooksTable td {
-	padding: 12px 16px;
-	border-bottom: 1px solid var(--color-border);
-}
-
-.webhooksTable tbody tr:hover {
-	background: var(--color-background-hover);
-}
-
-.webhooksTable thead .column-actions {
-	position: sticky;
-	right: 0;
-	background: var(--color-background-hover);
-	z-index: 10;
-	min-width: 80px;
-	width: 80px;
-	text-align: right;
-}
-
-.webhooksTable tbody .column-actions {
-	position: sticky;
-	right: 0;
-	background: var(--color-main-background);
-	z-index: 5;
-	min-width: 80px;
-	width: 80px;
-	text-align: right;
-}
-
-.webhooksTable tbody tr:hover .column-actions {
-	background: var(--color-background-hover);
-}
-
 .webhook-name-cell {
 	display: flex;
 	align-items: center;
@@ -718,98 +557,4 @@ export default {
 	font-family: monospace;
 	font-size: 12px;
 }
-
-.badge {
-	display: inline-block;
-	padding: 4px 8px;
-	border-radius: 12px;
-	font-size: 12px;
-	font-weight: 600;
-	text-transform: uppercase;
-}
-
-.badge-method {
-	background: var(--color-background-dark);
-	color: var(--color-text-maxcontrast);
-}
-
-.badge-status-enabled {
-	background: var(--color-success-light);
-	color: var(--color-success);
-}
-
-.badge-status-disabled {
-	background: var(--color-warning-light);
-	color: var(--color-warning);
-}
-
-.column-name {
-	min-width: 200px;
-}
-
-.column-url {
-	min-width: 200px;
-}
-
-.column-method {
-	width: 100px;
-}
-
-.column-status {
-	width: 120px;
-}
-
-.column-last-triggered {
-	width: 180px;
-}
-
-.column-success-rate {
-	width: 120px;
-	text-align: center;
-}
-
-.column-actions {
-	position: sticky;
-	right: 0;
-	background: var(--color-main-background);
-	z-index: 10;
-	min-width: 80px;
-	width: 80px;
-	text-align: right;
-}
-
-.webhooksTable thead .column-actions {
-	position: sticky;
-	right: 0;
-	background: var(--color-background-hover);
-	z-index: 10;
-	min-width: 80px;
-	width: 80px;
-	text-align: right;
-}
-
-.webhooksTable tbody .column-actions {
-	position: sticky;
-	right: 0;
-	background: var(--color-main-background);
-	z-index: 5;
-}
-
-.webhooksTable tbody tr:hover .column-actions {
-	background: var(--color-background-hover);
-}
-
-.pagination {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 16px;
-	padding: 20px;
-	border-top: 1px solid var(--color-border);
-}
-
-.pagination-info {
-	color: var(--color-text-maxcontrast);
-	font-size: 14px;
-}
 </style>

From 4cb1c6c12b061eb5550e41098d95cdfef92a8e73 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 31 Mar 2026 11:56:35 +0200
Subject: [PATCH 2/4] bug fixes and route support for webhook logs

---
 appinfo/routes.php                      |  1 +
 lib/Controller/UiController.php         | 18 +++++++++++++++++
 src/router/index.js                     |  2 +-
 src/views/webhooks/WebhookLogsIndex.vue | 26 ++++++++++++++-----------
 src/views/webhooks/WebhooksIndex.vue    |  3 +--
 5 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/appinfo/routes.php b/appinfo/routes.php
index 759e83193..78bedad99 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -468,6 +468,7 @@
 		['name' => 'ui#searchTrail', 'url' => '/search-trails', 'verb' => 'GET'],
 		['name' => 'ui#webhooks', 'url' => '/webhooks', 'verb' => 'GET'],
 		['name' => 'ui#webhooksLogs', 'url' => '/webhooks/logs', 'verb' => 'GET'],
+		['name' => 'ui#webhooksLogsDetails', 'url' => '/webhooks/logs/{id}', 'verb' => 'GET', 'requirements' => ['id' => '\d+']],
 		['name' => 'ui#endpoints', 'url' => '/endpoints', 'verb' => 'GET'],
 		['name' => 'ui#endpointLogs', 'url' => '/endpoints/logs', 'verb' => 'GET'],
 		['name' => 'ui#entities', 'url' => '/entities', 'verb' => 'GET'],
diff --git a/lib/Controller/UiController.php b/lib/Controller/UiController.php
index 5a3646be7..0d54b4eca 100644
--- a/lib/Controller/UiController.php
+++ b/lib/Controller/UiController.php
@@ -389,6 +389,24 @@ public function webhooksLogs(): TemplateResponse
         return $this->makeSpaResponse();
     }//end webhooksLogs()
 
+    /**
+     * Returns the webhook logs details page template.
+     *
+     * @NoAdminRequired
+     *
+     * @NoCSRFRequired
+     *
+     * @phpstan-return TemplateResponse
+     *
+     * @psalm-return TemplateResponse<200|500, array<string, mixed>>
+     *
+     * @return TemplateResponse The SPA template response
+     */
+    public function webhooksLogsDetails(): TemplateResponse
+    {
+        return $this->makeSpaResponse();
+    }//end webhooksLogsDetails()
+
     /**
      * Returns the entities page template.
      *
diff --git a/src/router/index.js b/src/router/index.js
index bcd797743..ae799b48b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -72,7 +72,7 @@ const router = new Router({
 		{ path: '/audit-trails', component: AuditTrailIndex },
 		{ path: '/search-trails', component: SearchTrailIndex },
 		{ path: '/webhooks', component: WebhooksIndex },
-		{ path: '/webhooks/logs', component: WebhookLogsIndex },
+		{ path: '/webhooks/logs/:id?', name: 'webhookLogs', component: WebhookLogsIndex },
 		{ path: '/endpoints', component: EndpointsIndex },
 		{ path: '/entities', component: EntitiesIndex },
 		{ path: '/entities/:id', name: 'entityDetails', component: EntityDetail },
diff --git a/src/views/webhooks/WebhookLogsIndex.vue b/src/views/webhooks/WebhookLogsIndex.vue
index 024aa57de..ceafce043 100644
--- a/src/views/webhooks/WebhookLogsIndex.vue
+++ b/src/views/webhooks/WebhookLogsIndex.vue
@@ -42,16 +42,14 @@
 					:clearable="true"
 					:label-outside="true"
 					:input-label="t('openregister', 'Filter by webhook')"
-					@update:value="handleWebhookFilterChange">
-					<template #option="{ option }">
-						{{ option.label }}
-					</template>
-				</NcSelect>
+					label="label"
+					:reduce="option => option.value"
+					@input="handleWebhookFilterChange" />
 			</template>
 
 			<!-- Custom column: webhook name lookup -->
 			<template #column-webhook="{ row }">
-				{{ getWebhookName(row.webhookId) }}
+				{{ getWebhookName(row.webhook) }}
 			</template>
 
 			<!-- Custom column: truncated event class -->
@@ -191,10 +189,9 @@ export default {
 		},
 	},
 	mounted() {
-		// Get webhook ID from transfer data if available.
-		const transferData = navigationStore.getTransferData()
-		if (transferData && transferData.webhookId) {
-			this.selectedWebhookId = transferData.webhookId
+		// Get webhook ID from route params if available.
+		if (this.$route.params.id) {
+			this.selectedWebhookId = Number(this.$route.params.id)
 		}
 		this.loadWebhooks()
 		this.loadLogs()
@@ -238,7 +235,7 @@ export default {
 					offset: (this.pagination.page - 1) * this.pagination.limit,
 				}
 				if (this.selectedWebhookId) {
-					params.webhook_id = this.selectedWebhookId
+					params.webhook = this.selectedWebhookId
 				}
 
 				const response = await axios.get(
@@ -277,6 +274,13 @@ export default {
 		handleWebhookFilterChange(webhookId) {
 			this.selectedWebhookId = webhookId
 			this.pagination.page = 1
+
+			// Update URL to reflect the filter
+			const path = webhookId ? `/webhooks/logs/${webhookId}` : '/webhooks/logs'
+			if (this.$route.path !== path) {
+				this.$router.replace(path)
+			}
+
 			this.loadLogs()
 		},
 
diff --git a/src/views/webhooks/WebhooksIndex.vue b/src/views/webhooks/WebhooksIndex.vue
index 54120fc0a..b36e57bd9 100644
--- a/src/views/webhooks/WebhooksIndex.vue
+++ b/src/views/webhooks/WebhooksIndex.vue
@@ -397,8 +397,7 @@ export default {
 		 * @return {void}
 		 */
 		viewLogs(webhookId) {
-			navigationStore.setTransferData({ webhookId })
-			this.$router.push('/webhooks/logs')
+			this.$router.push(`/webhooks/logs/${webhookId}`)
 		},
 
 		/**

From 239023ea7840947ab18eaaf4d04268f9d626b5bc Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 31 Mar 2026 13:28:05 +0200
Subject: [PATCH 3/4] converted EditWebhook and added same styles to all forms

according to inheritance rules I cannot and should not add it to CnTabbedFormDialog
---
 src/modals/application/EditApplication.vue    |  41 +-
 .../configuration/EditConfiguration.vue       |  24 +-
 src/modals/organisation/EditOrganisation.vue  |  41 +-
 src/modals/webhook/EditWebhook.vue            | 711 ++++++++----------
 src/views/webhooks/WebhooksIndex.vue          |   4 +
 5 files changed, 393 insertions(+), 428 deletions(-)

diff --git a/src/modals/application/EditApplication.vue b/src/modals/application/EditApplication.vue
index c47ecae77..c5756bb49 100644
--- a/src/modals/application/EditApplication.vue
+++ b/src/modals/application/EditApplication.vue
@@ -555,11 +555,48 @@ export default {
 }
 
 .field-hint {
-	font-size: 12px;
-	color: var(--color-text-lighter);
+	font-size: 0.875rem;
+	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
+.selectField,
+.checkboxField {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.selectField label {
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
+/* Dropdown option styles */
+.option-content {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.option-title {
+	font-weight: 500;
+}
+
+.option-description {
+	font-size: 0.875rem;
+	color: var(--color-text-maxcontrast);
+	max-width: 100%;
+	white-space: normal;
+	word-break: break-word;
+}
+
+.option-meta {
+	font-size: 0.75rem;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
+
 .group-option {
 	display: flex;
 	align-items: center;
diff --git a/src/modals/configuration/EditConfiguration.vue b/src/modals/configuration/EditConfiguration.vue
index d1311c3fe..888a4cd14 100644
--- a/src/modals/configuration/EditConfiguration.vue
+++ b/src/modals/configuration/EditConfiguration.vue
@@ -1042,29 +1042,25 @@ export default {
 </script>
 
 <style scoped>
-.selectField {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.selectField label {
-	font-weight: 500;
+.field-hint {
+	font-size: 0.875rem;
 	color: var(--color-text-maxcontrast);
+	margin: 0;
 }
 
+.selectField,
 .checkboxField {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
 
-.field-hint {
-	font-size: 0.875rem;
+.selectField label {
+	font-weight: 500;
 	color: var(--color-text-maxcontrast);
-	margin: 0;
 }
 
+/* Dropdown option styles */
 .option-content {
 	display: flex;
 	flex-direction: column;
@@ -1082,4 +1078,10 @@ export default {
 	white-space: normal;
 	word-break: break-word;
 }
+
+.option-meta {
+	font-size: 0.75rem;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
 </style>
diff --git a/src/modals/organisation/EditOrganisation.vue b/src/modals/organisation/EditOrganisation.vue
index 54a742f69..2fcc7cc63 100644
--- a/src/modals/organisation/EditOrganisation.vue
+++ b/src/modals/organisation/EditOrganisation.vue
@@ -964,11 +964,48 @@ export default {
 }
 
 .field-hint {
-	font-size: 12px;
-	color: var(--color-text-lighter);
+	font-size: 0.875rem;
+	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
+.selectField,
+.checkboxField {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.selectField label {
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
+/* Dropdown option styles */
+.option-content {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.option-title {
+	font-weight: 500;
+}
+
+.option-description {
+	font-size: 0.875rem;
+	color: var(--color-text-maxcontrast);
+	max-width: 100%;
+	white-space: normal;
+	word-break: break-word;
+}
+
+.option-meta {
+	font-size: 0.75rem;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
+
 .group-option {
 	display: flex;
 	align-items: center;
diff --git a/src/modals/webhook/EditWebhook.vue b/src/modals/webhook/EditWebhook.vue
index bcf211132..7c487de87 100644
--- a/src/modals/webhook/EditWebhook.vue
+++ b/src/modals/webhook/EditWebhook.vue
@@ -1,312 +1,272 @@
-<template>
-	<NcDialog
-		v-if="navigationStore.modal === 'editWebhook'"
-		:name="webhookItem?.id ? t('openregister', 'Edit Webhook') : t('openregister', 'Create Webhook')"
-		size="large"
-		:can-close="true"
-		:open="true"
-		@update:open="handleDialogClose">
-		<NcNoteCard v-if="error" type="error">
-			<p>{{ error }}</p>
-		</NcNoteCard>
-
-		<div class="tabContainer">
-			<BTabs v-model="activeTab" content-class="mt-3" justified>
-				<!-- Settings Tab -->
-				<BTab active>
-					<template #title>
-						<Cog :size="16" />
-						<span>{{ t('openregister', 'Settings') }}</span>
-					</template>
-
-					<div class="form-editor">
-						<NcTextField
-							:label="t('openregister', 'Name') + ' *'"
-							:placeholder="t('openregister', 'Enter webhook name')"
-							:value="webhookItem?.name || ''"
-							:error="!webhookItem?.name?.trim?.()"
-							@update:value="updateName" />
-
-						<NcTextField
-							:label="t('openregister', 'URL') + ' *'"
-							:placeholder="t('openregister', 'https://example.com/webhook')"
-							:value="webhookItem?.url || ''"
-							type="url"
-							:error="!webhookItem?.url?.trim?.()"
-							@update:value="updateUrl">
-							<template #helper-text-message>
-								<p>{{ t('openregister', 'The URL where webhook events will be sent') }}</p>
-							</template>
-						</NcTextField>
-
-						<div class="selectField">
-							<label class="dialog-label">{{ t('openregister', 'HTTP Method') }}</label>
-							<NcSelect
-								v-model="selectedMethod"
-								:options="httpMethodOptions"
-								label="label"
-								track-by="value"
-								:label-outside="true"
-								:placeholder="t('openregister', 'Select HTTP method')"
-								@input="updateMethod">
-								<template #option="{ label, description }">
-									<div class="option-content">
-										<span class="option-title">{{ label }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ t('openregister', 'HTTP method used to send webhook requests') }}
-							</p>
-						</div>
+<script setup>
+import { translate as t } from '@nextcloud/l10n'
+import { navigationStore } from '../../store/store.js'
+</script>
 
-						<div class="checkboxField">
-							<NcCheckboxRadioSwitch
-								:checked="webhookItem?.enabled !== false"
-								@update:checked="updateEnabled">
-								{{ t('openregister', 'Enabled') }}
-							</NcCheckboxRadioSwitch>
-							<p class="field-hint">
-								{{ t('openregister', 'Enable or disable this webhook') }}
-							</p>
+<template>
+	<CnTabbedFormDialog
+		ref="dialog"
+		:tabs="dialogTabs"
+		:item="webhookItem?.id ? webhookItem : null"
+		entity-name="Webhook"
+		:show-create-another="false"
+		:disable-save="!isValid"
+		@confirm="saveWebhook"
+		@close="closeModal"
+		@reset="resetForm">
+		<!-- Settings Tab -->
+		<template #tab-settings="{ loading: dialogLoading }">
+			<NcTextField
+				:disabled="dialogLoading"
+				:label="t('openregister', 'Name') + ' *'"
+				:placeholder="t('openregister', 'Enter webhook name')"
+				:value="webhookItem?.name || ''"
+				:error="!webhookItem?.name?.trim?.()"
+				@update:value="updateName" />
+
+			<NcTextField
+				:disabled="dialogLoading"
+				:label="t('openregister', 'URL') + ' *'"
+				:placeholder="t('openregister', 'https://example.com/webhook')"
+				:value="webhookItem?.url || ''"
+				type="url"
+				:error="!webhookItem?.url?.trim?.()"
+				@update:value="updateUrl">
+				<template #helper-text-message>
+					<p>{{ t('openregister', 'The URL where webhook events will be sent') }}</p>
+				</template>
+			</NcTextField>
+
+			<div class="selectField">
+				<label>{{ t('openregister', 'HTTP Method') }}</label>
+				<NcSelect
+					v-model="selectedMethod"
+					:disabled="dialogLoading"
+					:options="httpMethodOptions"
+					label="label"
+					track-by="value"
+					:label-outside="true"
+					:placeholder="t('openregister', 'Select HTTP method')"
+					@input="updateMethod">
+					<template #option="{ label, description }">
+						<div class="option-content">
+							<span class="option-title">{{ label }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
-					</div>
-				</BTab>
-
-				<!-- Events Tab -->
-				<BTab>
-					<template #title>
-						<Webhook :size="16" />
-						<span>{{ t('openregister', 'Events') }}</span>
 					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ t('openregister', 'HTTP method used to send webhook requests') }}
+				</p>
+			</div>
+
+			<div class="checkboxField">
+				<NcCheckboxRadioSwitch
+					:disabled="dialogLoading"
+					:checked="webhookItem?.enabled !== false"
+					@update:checked="updateEnabled">
+					{{ t('openregister', 'Enabled') }}
+				</NcCheckboxRadioSwitch>
+				<p class="field-hint">
+					{{ t('openregister', 'Enable or disable this webhook') }}
+				</p>
+			</div>
+		</template>
 
-					<div class="form-editor">
-						<div class="selectField">
-							<label class="dialog-label">{{ t('openregister', 'Event') }}</label>
-							<NcSelect
-								v-model="selectedEvent"
-								:options="eventOptions"
-								label="label"
-								track-by="value"
-								:label-outside="true"
-								:filterable="true"
-								:placeholder="t('openregister', 'Select event to listen to...')"
-								@search-change="searchEvents"
-								@input="updateEvent">
-								<template #option="{ label, description, category, type }">
-									<div class="option-content">
-										<span class="option-title">{{ label }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-										<span class="option-meta">
-											{{ category }} • {{ type === 'before' ? t('openregister', 'Before') : t('openregister', 'After') }}
-										</span>
-									</div>
-								</template>
-								<template #no-options>
-									<span v-if="loadingEvents">{{ t('openregister', 'Loading events...') }}</span>
-									<span v-else>{{ t('openregister', 'No events found') }}</span>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ t('openregister', 'Select the event this webhook should listen to') }}
-							</p>
-						</div>
-
-						<div v-if="selectedEvent" class="selectField">
-							<label class="dialog-label">{{ t('openregister', 'Event Property for Payload') }}</label>
-							<NcSelect
-								v-model="selectedEventProperty"
-								:options="eventPropertyOptions"
-								label="label"
-								track-by="value"
-								:label-outside="true"
-								:placeholder="t('openregister', 'Select property to send as payload')"
-								@input="updateEventProperty">
-								<template #option="{ label, description }">
-									<div class="option-content">
-										<span class="option-title">{{ label }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ t('openregister', 'Select which property from the event should be used as the webhook payload data') }}
-							</p>
+		<!-- Events Tab -->
+		<template #tab-events="{ loading: dialogLoading }">
+			<div class="selectField">
+				<label>{{ t('openregister', 'Event') }}</label>
+				<NcSelect
+					v-model="selectedEvent"
+					:disabled="dialogLoading"
+					:options="eventOptions"
+					label="label"
+					track-by="value"
+					:label-outside="true"
+					:filterable="true"
+					:placeholder="t('openregister', 'Select event to listen to...')"
+					@search-change="searchEvents"
+					@input="updateEvent">
+					<template #option="{ label, description, category, type }">
+						<div class="option-content">
+							<span class="option-title">{{ label }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
+							<span class="option-meta">
+								{{ category }} • {{ type === 'before' ? t('openregister', 'Before') : t('openregister', 'After') }}
+							</span>
 						</div>
-					</div>
-				</BTab>
-
-				<!-- Configuration Tab -->
-				<BTab>
-					<template #title>
-						<Database :size="16" />
-						<span>{{ t('openregister', 'Configuration') }}</span>
 					</template>
-
-					<div class="form-editor">
-						<div class="checkboxField">
-							<NcCheckboxRadioSwitch
-								:checked="configuration.sendCloudEvent !== false"
-								@update:checked="updateSendCloudEvent">
-								{{ t('openregister', 'Send as CloudEvent') }}
-							</NcCheckboxRadioSwitch>
-							<p class="field-hint">
-								{{ t('openregister', 'Wrap webhook payload in CloudEvents format for better interoperability') }}
-							</p>
-						</div>
-
-						<div class="checkboxField">
-							<NcCheckboxRadioSwitch
-								:checked="configuration.waitForResponse === true"
-								@update:checked="updateWaitForResponse">
-								{{ t('openregister', 'Wait for Response') }}
-							</NcCheckboxRadioSwitch>
-							<p class="field-hint">
-								{{ t('openregister', 'Wait for webhook response before continuing (required for request/response flows)') }}
-							</p>
-						</div>
-
-						<div class="selectField">
-							<label class="dialog-label">{{ t('openregister', 'Retry Policy') }}</label>
-							<NcSelect
-								v-model="selectedRetryPolicy"
-								:options="retryPolicyOptions"
-								label="label"
-								track-by="value"
-								:label-outside="true"
-								:placeholder="t('openregister', 'Select retry policy')"
-								@input="updateRetryPolicy">
-								<template #option="{ label, description }">
-									<div class="option-content">
-										<span class="option-title">{{ label }}</span>
-										<span v-if="description" class="option-description">{{ description }}</span>
-									</div>
-								</template>
-							</NcSelect>
-							<p class="field-hint">
-								{{ t('openregister', 'How to handle retries for failed webhook deliveries') }}
-							</p>
-						</div>
-
-						<NcTextField
-							:label="t('openregister', 'Max Retries')"
-							:placeholder="t('openregister', '3')"
-							:value="webhookItem?.maxRetries?.toString() || '3'"
-							type="number"
-							min="0"
-							max="10"
-							@update:value="updateMaxRetries">
-							<template #helper-text-message>
-								<p>{{ t('openregister', 'Maximum number of retry attempts for failed deliveries') }}</p>
-							</template>
-						</NcTextField>
-
-						<NcTextField
-							:label="t('openregister', 'Timeout (seconds)')"
-							:placeholder="t('openregister', '30')"
-							:value="webhookItem?.timeout?.toString() || '30'"
-							type="number"
-							min="1"
-							max="300"
-							@update:value="updateTimeout">
-							<template #helper-text-message>
-								<p>{{ t('openregister', 'Request timeout in seconds') }}</p>
-							</template>
-						</NcTextField>
-					</div>
-				</BTab>
-
-				<!-- Advanced Tab -->
-				<BTab>
-					<template #title>
-						<Tune :size="16" />
-						<span>{{ t('openregister', 'Advanced') }}</span>
+					<template #no-options>
+						<span v-if="loadingEvents">{{ t('openregister', 'Loading events...') }}</span>
+						<span v-else>{{ t('openregister', 'No events found') }}</span>
 					</template>
-
-					<div class="form-editor">
-						<NcTextField
-							:label="t('openregister', 'Secret')"
-							:placeholder="t('openregister', 'Optional webhook secret for signature verification')"
-							:value="webhookItem?.secret || ''"
-							type="password"
-							@update:value="updateSecret">
-							<template #helper-text-message>
-								<p>{{ t('openregister', 'Secret key for HMAC signature generation (optional)') }}</p>
-							</template>
-						</NcTextField>
-
-						<div class="selectField">
-							<label class="dialog-label">{{ t('openregister', 'Headers') }}</label>
-							<NcTextArea
-								:value="headersText"
-								:placeholder="t('openregister', 'X-Custom-Header: value\nAuthorization: Bearer token')"
-								rows="4"
-								@update:value="updateHeaders" />
-							<p class="field-hint">
-								{{ t('openregister', 'Custom HTTP headers (one per line, format: Header-Name: value)') }}
-							</p>
+				</NcSelect>
+				<p class="field-hint">
+					{{ t('openregister', 'Select the event this webhook should listen to') }}
+				</p>
+			</div>
+
+			<div v-if="selectedEvent" class="selectField">
+				<label>{{ t('openregister', 'Event Property for Payload') }}</label>
+				<NcSelect
+					v-model="selectedEventProperty"
+					:disabled="dialogLoading"
+					:options="eventPropertyOptions"
+					label="label"
+					track-by="value"
+					:label-outside="true"
+					:placeholder="t('openregister', 'Select property to send as payload')"
+					@input="updateEventProperty">
+					<template #option="{ label, description }">
+						<div class="option-content">
+							<span class="option-title">{{ label }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ t('openregister', 'Select which property from the event should be used as the webhook payload data') }}
+				</p>
+			</div>
+		</template>
 
-						<div class="selectField">
-							<label class="dialog-label">{{ t('openregister', 'Filters') }}</label>
-							<NcTextArea
-								:value="filtersText"
-								:placeholder="t('openregister', 'objectType: object\naction: created')"
-								rows="4"
-								@update:value="updateFilters" />
-							<p class="field-hint">
-								{{ t('openregister', 'Filter webhook triggers by payload properties (one per line, format: key: value)') }}
-							</p>
+		<!-- Configuration Tab -->
+		<template #tab-configuration="{ loading: dialogLoading }">
+			<div class="checkboxField">
+				<NcCheckboxRadioSwitch
+					:disabled="dialogLoading"
+					:checked="configuration.sendCloudEvent !== false"
+					@update:checked="updateSendCloudEvent">
+					{{ t('openregister', 'Send as CloudEvent') }}
+				</NcCheckboxRadioSwitch>
+				<p class="field-hint">
+					{{ t('openregister', 'Wrap webhook payload in CloudEvents format for better interoperability') }}
+				</p>
+			</div>
+
+			<div class="checkboxField">
+				<NcCheckboxRadioSwitch
+					:disabled="dialogLoading"
+					:checked="configuration.waitForResponse === true"
+					@update:checked="updateWaitForResponse">
+					{{ t('openregister', 'Wait for Response') }}
+				</NcCheckboxRadioSwitch>
+				<p class="field-hint">
+					{{ t('openregister', 'Wait for webhook response before continuing (required for request/response flows)') }}
+				</p>
+			</div>
+
+			<div class="selectField">
+				<label>{{ t('openregister', 'Retry Policy') }}</label>
+				<NcSelect
+					v-model="selectedRetryPolicy"
+					:disabled="dialogLoading"
+					:options="retryPolicyOptions"
+					label="label"
+					track-by="value"
+					:label-outside="true"
+					:placeholder="t('openregister', 'Select retry policy')"
+					@input="updateRetryPolicy">
+					<template #option="{ label, description }">
+						<div class="option-content">
+							<span class="option-title">{{ label }}</span>
+							<span v-if="description" class="option-description">{{ description }}</span>
 						</div>
-					</div>
-				</BTab>
-			</BTabs>
-		</div>
-
-		<template #actions>
-			<NcButton @click="closeModal">
-				<template #icon>
-					<Cancel :size="20" />
+					</template>
+				</NcSelect>
+				<p class="field-hint">
+					{{ t('openregister', 'How to handle retries for failed webhook deliveries') }}
+				</p>
+			</div>
+
+			<NcTextField
+				:disabled="dialogLoading"
+				:label="t('openregister', 'Max Retries')"
+				:placeholder="t('openregister', '3')"
+				:value="webhookItem?.maxRetries?.toString() || '3'"
+				type="number"
+				min="0"
+				max="10"
+				@update:value="updateMaxRetries">
+				<template #helper-text-message>
+					<p>{{ t('openregister', 'Maximum number of retry attempts for failed deliveries') }}</p>
 				</template>
-				{{ t('openregister', 'Cancel') }}
-			</NcButton>
-			<NcButton
-				:disabled="loading || !isValid"
-				type="primary"
-				@click="saveWebhook">
-				<template #icon>
-					<NcLoadingIcon v-if="loading" :size="20" />
-					<ContentSave v-else :size="20" />
+			</NcTextField>
+
+			<NcTextField
+				:disabled="dialogLoading"
+				:label="t('openregister', 'Timeout (seconds)')"
+				:placeholder="t('openregister', '30')"
+				:value="webhookItem?.timeout?.toString() || '30'"
+				type="number"
+				min="1"
+				max="300"
+				@update:value="updateTimeout">
+				<template #helper-text-message>
+					<p>{{ t('openregister', 'Request timeout in seconds') }}</p>
 				</template>
-				{{ t('openregister', 'Save') }}
-			</NcButton>
+			</NcTextField>
 		</template>
-	</NcDialog>
+
+		<!-- Advanced Tab -->
+		<template #tab-advanced="{ loading: dialogLoading }">
+			<NcTextField
+				:disabled="dialogLoading"
+				:label="t('openregister', 'Secret')"
+				:placeholder="t('openregister', 'Optional webhook secret for signature verification')"
+				:value="webhookItem?.secret || ''"
+				type="password"
+				@update:value="updateSecret">
+				<template #helper-text-message>
+					<p>{{ t('openregister', 'Secret key for HMAC signature generation (optional)') }}</p>
+				</template>
+			</NcTextField>
+
+			<div class="selectField">
+				<label>{{ t('openregister', 'Headers') }}</label>
+				<NcTextArea
+					:disabled="dialogLoading"
+					:value="headersText"
+					:placeholder="t('openregister', 'X-Custom-Header: value\nAuthorization: Bearer token')"
+					rows="4"
+					@update:value="updateHeaders" />
+				<p class="field-hint">
+					{{ t('openregister', 'Custom HTTP headers (one per line, format: Header-Name: value)') }}
+				</p>
+			</div>
+
+			<div class="selectField">
+				<label>{{ t('openregister', 'Filters') }}</label>
+				<NcTextArea
+					:disabled="dialogLoading"
+					:value="filtersText"
+					:placeholder="t('openregister', 'objectType: object\naction: created')"
+					rows="4"
+					@update:value="updateFilters" />
+				<p class="field-hint">
+					{{ t('openregister', 'Filter webhook triggers by payload properties (one per line, format: key: value)') }}
+				</p>
+			</div>
+		</template>
+	</CnTabbedFormDialog>
 </template>
 
 <script>
-import { t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { showSuccess } from '@nextcloud/dialogs'
 import axios from '@nextcloud/axios'
-import { navigationStore } from '../../store/store.js'
 
 import {
-	NcButton,
+	CnTabbedFormDialog,
+} from '@conduction/nextcloud-vue'
+
+import {
 	NcCheckboxRadioSwitch,
-	NcDialog,
-	NcLoadingIcon,
-	NcNoteCard,
 	NcSelect,
 	NcTextField,
 	NcTextArea,
 } from '@nextcloud/vue'
 
-import { BTabs, BTab } from 'bootstrap-vue'
-
-import Cancel from 'vue-material-design-icons/Cancel.vue'
-import ContentSave from 'vue-material-design-icons/ContentSave.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Database from 'vue-material-design-icons/Database.vue'
 import Tune from 'vue-material-design-icons/Tune.vue'
@@ -315,28 +275,14 @@ import Webhook from 'vue-material-design-icons/Webhook.vue'
 export default {
 	name: 'EditWebhook',
 	components: {
-		NcDialog,
-		NcButton,
+		CnTabbedFormDialog,
 		NcCheckboxRadioSwitch,
-		NcLoadingIcon,
-		NcNoteCard,
 		NcSelect,
 		NcTextField,
 		NcTextArea,
-		BTabs,
-		BTab,
-		Cancel,
-		ContentSave,
-		Cog,
-		Database,
-		Tune,
-		Webhook,
 	},
 	data() {
 		return {
-			loading: false,
-			error: null,
-			activeTab: 0,
 			webhookItem: null,
 			selectedMethod: null,
 			selectedEvent: null,
@@ -372,12 +318,19 @@ export default {
 		isValid() {
 			return Boolean(this.webhookItem?.name?.trim() && this.webhookItem?.url?.trim())
 		},
+		dialogTabs() {
+			return [
+				{ id: 'settings', title: t('openregister', 'Settings'), icon: Cog },
+				{ id: 'events', title: t('openregister', 'Events'), icon: Webhook },
+				{ id: 'configuration', title: t('openregister', 'Configuration'), icon: Database },
+				{ id: 'advanced', title: t('openregister', 'Advanced'), icon: Tune },
+			]
+		},
 		eventPropertyOptions() {
 			if (!this.selectedEvent) {
 				return []
 			}
 
-			// Get properties from the selected event.
 			const event = this.availableEvents.find(e => e.class === this.selectedEvent)
 			if (!event || !event.properties) {
 				return []
@@ -410,50 +363,49 @@ export default {
 				.join('\n')
 		},
 	},
-	watch: {
-		'navigationStore.modal'(newVal) {
-			if (newVal === 'editWebhook') {
-				// Modal opened, initialize webhook.
-				this.initializeWebhook()
-			}
-		},
-	},
 	async created() {
 		await this.loadAvailableEvents()
 		this.initializeWebhook()
 	},
 	methods: {
 		initializeWebhook() {
-			// Get webhook item from navigation store transferData or initialize new one.
 			const transferData = navigationStore.getTransferData()
 			if (transferData && transferData.webhook) {
 				this.webhookItem = { ...transferData.webhook }
 				this.loadExistingSelections()
 			} else {
-				this.webhookItem = {
-					name: '',
-					url: '',
-					method: 'POST',
-					enabled: true,
-					events: [],
-					maxRetries: 3,
-					timeout: 30,
-					retryPolicy: 'exponential',
-					secret: null,
-					headers: {},
-					filters: {},
-					configuration: {
-						sendCloudEvent: true,
-						waitForResponse: false,
-						eventProperty: null,
-						responseMapping: {},
-					},
-				}
-				// Default to POST (find it in options since GET is now first).
-				this.selectedMethod = this.httpMethodOptions.find(m => m.value === 'POST') || this.httpMethodOptions[0]
-				this.selectedRetryPolicy = this.retryPolicyOptions[0] // 'exponential'
-				this.selectedEvent = null
-				this.selectedEventProperty = null
+				this.resetForm()
+			}
+		},
+		resetForm() {
+			this.webhookItem = {
+				name: '',
+				url: '',
+				method: 'POST',
+				enabled: true,
+				events: [],
+				maxRetries: 3,
+				timeout: 30,
+				retryPolicy: 'exponential',
+				secret: null,
+				headers: {},
+				filters: {},
+				configuration: {
+					sendCloudEvent: true,
+					waitForResponse: false,
+					eventProperty: null,
+					responseMapping: {},
+				},
+			}
+			this.selectedMethod = this.httpMethodOptions.find(m => m.value === 'POST') || this.httpMethodOptions[0]
+			this.selectedRetryPolicy = this.retryPolicyOptions[0]
+			this.selectedEvent = null
+			this.selectedEventProperty = null
+			this.configuration = {
+				sendCloudEvent: true,
+				waitForResponse: false,
+				eventProperty: null,
+				responseMapping: {},
 			}
 		},
 		updateName(value) {
@@ -485,11 +437,9 @@ export default {
 			if (!this.webhookItem) {
 				this.webhookItem = {}
 			}
-			// Store as array with single event for backend compatibility.
 			const eventClass = value ? (value.value || value) : null
 			this.webhookItem.events = eventClass ? [eventClass] : []
 			this.selectedEvent = eventClass
-			// Reset event property when event changes.
 			if (eventClass) {
 				this.selectedEventProperty = null
 				if (!this.webhookItem.configuration) {
@@ -580,7 +530,6 @@ export default {
 					const [key, ...valueParts] = line.split(':')
 					if (key && valueParts.length > 0) {
 						const val = valueParts.join(':').trim()
-						// Support comma-separated values for arrays.
 						if (val.includes(',')) {
 							filters[key.trim()] = val.split(',').map(v => v.trim())
 						} else {
@@ -616,34 +565,27 @@ export default {
 			}
 		},
 		searchEvents(_query) {
-			// Filter events based on search query.
-			// The NcSelect component handles filtering internally.
-			// Empty query is handled by the component itself.
+			// NcSelect handles filtering internally.
 		},
 		loadExistingSelections() {
 			const item = this.webhookItem
 			if (item) {
-				// Load method.
 				if (item.method) {
 					this.selectedMethod = this.httpMethodOptions.find(
 						m => m.value === item.method,
 					) || this.httpMethodOptions.find(m => m.value === 'POST') || this.httpMethodOptions[0]
 				}
 
-				// Load retry policy.
 				if (item.retryPolicy) {
 					this.selectedRetryPolicy = this.retryPolicyOptions.find(
 						p => p.value === item.retryPolicy,
 					) || this.retryPolicyOptions[0]
 				}
 
-				// Load event (take first event if multiple exist for backward compatibility).
 				if (item.events && Array.isArray(item.events) && item.events.length > 0) {
-					const eventClass = item.events[0]
-					this.selectedEvent = eventClass
+					this.selectedEvent = item.events[0]
 				}
 
-				// Load configuration.
 				if (item.configuration) {
 					this.configuration = { ...item.configuration }
 					if (item.configuration.eventProperty) {
@@ -655,29 +597,10 @@ export default {
 				}
 			}
 		},
-		handleDialogClose() {
-			this.closeModal()
-		},
 		closeModal() {
 			navigationStore.setModal(false)
-			this.loading = false
-			this.error = null
-			this.webhookItem = null
-			this.selectedMethod = null
-			this.selectedEvent = null
-			this.selectedEventProperty = null
-			this.selectedRetryPolicy = null
-			this.configuration = {
-				sendCloudEvent: true,
-				waitForResponse: false,
-				eventProperty: null,
-				responseMapping: {},
-			}
 		},
 		async saveWebhook() {
-			this.loading = true
-			this.error = null
-
 			try {
 				const payload = {
 					name: this.webhookItem.name,
@@ -696,13 +619,11 @@ export default {
 
 				let response
 				if (this.webhookItem.id) {
-					// Update existing webhook.
 					response = await axios.put(
 						generateUrl(`/apps/openregister/api/webhooks/${this.webhookItem.id}`),
 						payload,
 					)
 				} else {
-					// Create new webhook.
 					response = await axios.post(
 						generateUrl('/apps/openregister/api/webhooks'),
 						payload,
@@ -710,20 +631,14 @@ export default {
 				}
 
 				if (response.data) {
-					showSuccess(
-						this.webhookItem.id
-							? t('openregister', 'Webhook updated successfully')
-							: t('openregister', 'Webhook created successfully'),
-					)
-					this.closeModal()
-					// Trigger page reload to refresh webhooks list.
-					window.location.reload()
+					this.$root.$emit('webhooks-updated')
+					this.$refs.dialog.setResult({ success: true })
 				}
 			} catch (error) {
 				console.error('Failed to save webhook:', error)
-				this.error = error.response?.data?.error || t('openregister', 'Failed to save webhook')
-			} finally {
-				this.loading = false
+				this.$refs.dialog.setResult({
+					error: error.response?.data?.error || t('openregister', 'Failed to save webhook'),
+				})
 			}
 		},
 	},
@@ -731,40 +646,25 @@ export default {
 </script>
 
 <style scoped>
-.tabContainer {
-	width: 100%;
-}
-
-.form-editor {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	padding: 1rem 0;
-}
-
-.selectField {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
-}
-
-.selectField label {
-	font-weight: 500;
+.field-hint {
+	font-size: 0.875rem;
 	color: var(--color-text-maxcontrast);
+	margin: 0;
 }
 
+.selectField,
 .checkboxField {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
 
-.field-hint {
-	font-size: 0.875rem;
+.selectField label {
+	font-weight: 500;
 	color: var(--color-text-maxcontrast);
-	margin: 0;
 }
 
+/* Dropdown option styles */
 .option-content {
 	display: flex;
 	flex-direction: column;
@@ -789,18 +689,3 @@ export default {
 	font-style: italic;
 }
 </style>
-
-<style>
-/* Tab styling - must be unscoped to affect Bootstrap Vue components */
-.nav-tabs .nav-link {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 0.5rem;
-}
-
-.nav-tabs .nav-link span {
-	display: inline-flex;
-	align-items: center;
-}
-</style>
diff --git a/src/views/webhooks/WebhooksIndex.vue b/src/views/webhooks/WebhooksIndex.vue
index b36e57bd9..d36fa81e7 100644
--- a/src/views/webhooks/WebhooksIndex.vue
+++ b/src/views/webhooks/WebhooksIndex.vue
@@ -244,6 +244,10 @@ export default {
 	},
 	mounted() {
 		this.loadWebhooks()
+		this.$root.$on('webhooks-updated', this.loadWebhooks)
+	},
+	beforeDestroy() {
+		this.$root.$off('webhooks-updated', this.loadWebhooks)
 	},
 	methods: {
 		t,

From c6a28ef2f875a1ffc5ac8670703fc501a0186794 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 31 Mar 2026 14:27:50 +0200
Subject: [PATCH 4/4] updated view webhook log modal

---
 src/modals/webhook/ViewWebhookLog.vue | 274 ++++++++------------------
 1 file changed, 85 insertions(+), 189 deletions(-)

diff --git a/src/modals/webhook/ViewWebhookLog.vue b/src/modals/webhook/ViewWebhookLog.vue
index 0175f5d92..14349f8e5 100644
--- a/src/modals/webhook/ViewWebhookLog.vue
+++ b/src/modals/webhook/ViewWebhookLog.vue
@@ -6,100 +6,60 @@
 		:can-close="true"
 		:open="true"
 		@update:open="handleDialogClose">
-		<div v-if="logItem" class="logDetailsContainer">
+		<div v-if="logItem" class="cn-webhook-log">
 			<!-- Basic Information -->
-			<div class="logSection">
-				<h3>{{ t('openregister', 'Basic Information') }}</h3>
-				<table class="logDetailsTable">
-					<tr>
-						<td class="logLabel">
-							{{ t('openregister', 'Webhook') }}
-						</td>
-						<td class="logValue">
-							{{ getWebhookName(logItem.webhookId) }}
-						</td>
-					</tr>
-					<tr>
-						<td class="logLabel">
-							{{ t('openregister', 'Event') }}
-						</td>
-						<td class="logValue">
-							<code class="event-class">{{ logItem.eventClass }}</code>
-						</td>
-					</tr>
-					<tr>
-						<td class="logLabel">
-							{{ t('openregister', 'Status') }}
-						</td>
-						<td class="logValue">
-							<span :class="logItem.success ? 'status-success' : 'status-failed'">
-								{{ logItem.success ? t('openregister', 'Success') : t('openregister', 'Failed') }}
-							</span>
-						</td>
-					</tr>
-					<tr>
-						<td class="logLabel">
-							{{ t('openregister', 'Status Code') }}
-						</td>
-						<td class="logValue">
-							<span v-if="logItem.statusCode">{{ logItem.statusCode }}</span>
-							<span v-else class="text-muted">-</span>
-						</td>
-					</tr>
-					<tr>
-						<td class="logLabel">
-							{{ t('openregister', 'Attempt') }}
-						</td>
-						<td class="logValue">
-							{{ logItem.attempt }}
-						</td>
-					</tr>
-					<tr>
-						<td class="logLabel">
-							{{ t('openregister', 'Created') }}
-						</td>
-						<td class="logValue">
-							{{ formatDate(logItem.created) }}
-						</td>
-					</tr>
-				</table>
-			</div>
+			<CnDetailCard :title="t('openregister', 'Basic Information')">
+				<CnDetailGrid
+					layout="horizontal"
+					class="no-margin-bottom"
+					:items="basicInfoItems"
+					:label-width="200">
+					<template #item-1="{ item }">
+						<code class="cn-webhook-log__event-class">{{ item.value }}</code>
+					</template>
+					<template #item-2>
+						<CnStatusBadge
+							:label="logItem.success ? t('openregister', 'Success') : t('openregister', 'Failed')"
+							:variant="logItem.success ? 'success' : 'error'"
+							solid />
+					</template>
+				</CnDetailGrid>
+			</CnDetailCard>
 
 			<!-- Error Information (if failed) -->
-			<div v-if="!logItem.success && logItem.errorMessage" class="logSection">
-				<h3>{{ t('openregister', 'Error Information') }}</h3>
-				<div class="errorMessage">
-					<strong>{{ t('openregister', 'Error Message') }}:</strong>
-					<p>{{ logItem.errorMessage }}</p>
-				</div>
-			</div>
+			<NcNoteCard
+				v-if="!logItem.success && logItem.errorMessage"
+				type="error"
+				:heading="t('openregister', 'Error Message')">
+				{{ logItem.errorMessage }}
+			</NcNoteCard>
 
 			<!-- Request Details -->
-			<div class="logSection">
-				<h3>{{ t('openregister', 'Request Details') }}</h3>
-				<div v-if="logItem.requestBody" class="codeBlock">
-					<strong>{{ t('openregister', 'Request Body') }}:</strong>
-					<pre><code>{{ formatJson(logItem.requestBody) }}</code></pre>
-				</div>
-				<div v-else class="text-muted">
+			<CnDetailCard :title="t('openregister', 'Request Details')">
+				<CnJsonViewer
+					v-if="logItem.requestBody"
+					:value="formatJson(logItem.requestBody)"
+					:read-only="true"
+					language="json" />
+				<p v-else class="cn-webhook-log__empty">
 					{{ t('openregister', 'No request body available') }}
-				</div>
-			</div>
+				</p>
+			</CnDetailCard>
 
 			<!-- Response Details -->
-			<div class="logSection">
-				<h3>{{ t('openregister', 'Response Details') }}</h3>
-				<div v-if="logItem.responseBody" class="codeBlock">
-					<strong>{{ t('openregister', 'Response Body') }}:</strong>
-					<pre><code>{{ formatJson(logItem.responseBody) }}</code></pre>
-				</div>
-				<div v-else class="text-muted">
+			<CnDetailCard :title="t('openregister', 'Response Details')">
+				<CnJsonViewer
+					v-if="logItem.responseBody"
+					:value="logItem.responseBody"
+					:read-only="true"
+					language="auto" />
+				<p v-else class="cn-webhook-log__empty">
 					{{ t('openregister', 'No response body available') }}
-				</div>
-			</div>
+				</p>
+			</CnDetailCard>
 		</div>
 
-		<div v-else class="loadingContainer">
+		<div v-else class="cn-webhook-log__loading">
 			<NcLoadingIcon :size="64" />
 			<p>{{ t('openregister', 'Loading log details...') }}</p>
 		</div>
@@ -133,7 +93,14 @@ import {
 	NcButton,
 	NcDialog,
 	NcLoadingIcon,
+	NcNoteCard,
 } from '@nextcloud/vue'
+import {
+	CnDetailCard,
+	CnDetailGrid,
+	CnJsonViewer,
+	CnStatusBadge,
+} from '@conduction/nextcloud-vue'
 import Refresh from 'vue-material-design-icons/Refresh.vue'
 
 /**
@@ -153,6 +120,11 @@ export default {
 		NcButton,
 		NcDialog,
 		NcLoadingIcon,
+		NcNoteCard,
+		CnDetailCard,
+		CnDetailGrid,
+		CnJsonViewer,
+		CnStatusBadge,
 		Refresh,
 	},
 	data() {
@@ -171,6 +143,22 @@ export default {
 		navigationStore() {
 			return navigationStore
 		},
+		/**
+		 * Detail grid items for the basic information section.
+		 *
+		 * @return {Array<{label: string, value?: string|number}>} Grid items
+		 */
+		basicInfoItems() {
+			if (!this.logItem) return []
+			return [
+				{ label: t('openregister', 'Webhook'), value: this.getWebhookName(this.logItem.webhook) },
+				{ label: t('openregister', 'Event'), value: this.logItem.eventClass },
+				{ label: t('openregister', 'Status') },
+				{ label: t('openregister', 'Status Code'), value: this.logItem.statusCode || '-' },
+				{ label: t('openregister', 'Attempt'), value: this.logItem.attempt },
+				{ label: t('openregister', 'Created'), value: this.formatDate(this.logItem.created) },
+			]
+		},
 	},
 	mounted() {
 		this.loadLogData()
@@ -202,12 +190,8 @@ export default {
 		 */
 		async loadWebhooks() {
 			try {
-				const { generateUrl } = await import('@nextcloud/router')
-				const axios = (await import('@nextcloud/axios')).default
 				const response = await axios.get(generateUrl('/apps/openregister/api/webhooks'))
-				if (response.data && Array.isArray(response.data)) {
-					this.webhooksList = response.data
-				}
+				this.webhooksList = response.data.results || []
 			} catch (error) {
 				// Silently fail - webhook name lookup is not critical.
 			}
@@ -322,48 +306,14 @@ export default {
 </script>
 
 <style scoped>
-.logDetailsContainer {
-	padding: 20px;
-}
-
-.logSection {
-	margin-bottom: 30px;
-}
-
-.logSection h3 {
-	margin-bottom: 15px;
-	font-size: 18px;
-	font-weight: 600;
-	color: var(--color-main-text);
-}
-
-.logDetailsTable {
-	width: 100%;
-	border-collapse: collapse;
-}
-
-.logDetailsTable tr {
-	border-bottom: 1px solid var(--color-border);
-}
-
-.logDetailsTable td {
-	padding: 12px 0;
-	vertical-align: top;
-}
-
-.logLabel {
-	font-weight: 600;
-	color: var(--color-text-maxcontrast);
-	width: 200px;
-	min-width: 200px;
-}
-
-.logValue {
-	color: var(--color-main-text);
-	word-break: break-word;
+.cn-webhook-log {
+	padding: 16px 0;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
 }
 
-.event-class {
+.cn-webhook-log__event-class {
 	background: var(--color-background-dark);
 	padding: 4px 8px;
 	border-radius: 4px;
@@ -371,70 +321,12 @@ export default {
 	font-size: 12px;
 }
 
-.status-success {
-	color: var(--color-success);
-	font-weight: 600;
-}
-
-.status-failed {
-	color: var(--color-error);
-	font-weight: 600;
-}
-
-.text-muted {
+.cn-webhook-log__empty {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
 
-.errorMessage {
-	background: var(--color-error-background);
-	border-left: 4px solid var(--color-error);
-	padding: 15px;
-	border-radius: 4px;
-}
-
-.errorMessage strong {
-	color: var(--color-error);
-	display: block;
-	margin-bottom: 8px;
-}
-
-.errorMessage p {
-	margin: 0;
-	color: var(--color-main-text);
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-.codeBlock {
-	margin-top: 10px;
-}
-
-.codeBlock strong {
-	display: block;
-	margin-bottom: 8px;
-	color: var(--color-main-text);
-}
-
-.codeBlock pre {
-	background: var(--color-background-dark);
-	border: 1px solid var(--color-border);
-	border-radius: 4px;
-	padding: 15px;
-	overflow-x: auto;
-	margin: 0;
-}
-
-.codeBlock code {
-	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-	font-size: 12px;
-	line-height: 1.5;
-	color: var(--color-main-text);
-	white-space: pre;
-	word-wrap: normal;
-}
-
-.loadingContainer {
+.cn-webhook-log__loading {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -442,8 +334,12 @@ export default {
 	padding: 40px;
 }
 
-.loadingContainer p {
+.cn-webhook-log__loading p {
 	margin-top: 20px;
 	color: var(--color-text-maxcontrast);
 }
+
+.no-margin-bottom {
+    margin-bottom: 0 !important;
+}
 </style>