From 538b17b9b882fbc310be91542a7f310965392e5b Mon Sep 17 00:00:00 2001
From: Twyco <twyco@icloud.com>
Date: Tue, 15 Sep 2026 22:44:16 +0200
Subject: [PATCH] feat(KAN-45): rebuild project notification settings

---
 .../projects/NotificationEditorDialog.vue     |  632 ++++++++
 resources/js/lib/notification-filters.ts      |   23 +
 resources/js/lib/notification-labels.ts       |   13 +
 resources/js/locales/en.ts                    |  109 ++
 .../pages/projects/settings/Notifications.vue | 1380 +++--------------
 resources/js/types/project-notifications.ts   |   12 +
 ...jectNotificationSettingsControllerTest.php |   62 +
 .../ProjectNotificationSettingsUiTest.php     |   19 +
 .../project-notification-settings-browser.mjs |  310 ++++
 .../project-notification-settings-preview.mjs |   19 +
 .../project-notification-settings.mjs         |  363 +++++
 11 files changed, 1752 insertions(+), 1190 deletions(-)
 create mode 100644 resources/js/components/projects/NotificationEditorDialog.vue
 create mode 100644 resources/js/lib/notification-filters.ts
 create mode 100644 resources/js/lib/notification-labels.ts
 create mode 100644 resources/js/types/project-notifications.ts
 create mode 100644 tests/Feature/Projects/ProjectNotificationSettingsUiTest.php
 create mode 100644 tests/Fixtures/project-notification-settings-browser.mjs
 create mode 100644 tests/Fixtures/project-notification-settings-preview.mjs
 create mode 100644 tests/Fixtures/project-notification-settings.mjs

diff --git a/resources/js/components/projects/NotificationEditorDialog.vue b/resources/js/components/projects/NotificationEditorDialog.vue
new file mode 100644
index 0000000..6c7ae9e
--- /dev/null
+++ b/resources/js/components/projects/NotificationEditorDialog.vue
@@ -0,0 +1,632 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { computed, watch } from 'vue';
+import {
+    destroy,
+    store,
+    update,
+} from '@/actions/App/Http/Controllers/ProjectNotificationSettingsController';
+import FormFeedback from '@/components/FormFeedback.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { notificationLabel } from '@/lib/notification-labels';
+import { useLocalization } from '@/composables/useLocalization';
+import {
+    serializeNotificationFilters,
+    supportsFilterValue,
+} from '@/lib/notification-filters';
+import type { ProjectNotificationSettingsPageProps } from '@/types';
+import type {
+    NotificationEditorTarget,
+    NotificationFilterFormState,
+} from '@/types/project-notifications';
+
+const props = defineProps<{
+    target: NotificationEditorTarget | null;
+    settings: ProjectNotificationSettingsPageProps;
+}>();
+const emit = defineEmits<{ close: [] }>();
+const { t } = useLocalization();
+const form = useForm({
+    name: '',
+    event_type: '',
+    channel: '',
+    enabled: true,
+    delivery_url: '',
+    message_template: '',
+    allowed_mentions: [] as string[],
+    filters: [] as NotificationFilterFormState[],
+});
+const protection = useFormProtection(form, {
+    isDirty: () => props.target !== null && form.isDirty,
+});
+const deleting = computed(() => props.target?.action === 'delete');
+const title = computed(() =>
+    t(
+        deleting.value
+            ? 'notifications.delete'
+            : props.target?.action === 'edit'
+              ? 'notifications.edit'
+              : 'notifications.create',
+    ),
+);
+const inputClass =
+    'border-input bg-background focus-visible:ring-ring min-h-11 w-full min-w-0 rounded-md border px-3 py-2 text-sm focus-visible:ring-2';
+let nextFilterId = 0;
+watch(
+    () => props.target,
+    (target) => {
+        if (!target) {
+            return;
+        }
+        const entry = target.entry;
+        const mentions = entry?.channel_configuration.allowed_mentions;
+        form.defaults({
+            name: entry?.name ?? '',
+            event_type:
+                entry?.event_type ??
+                props.settings.eventTypeOptions[0]?.value ??
+                '',
+            channel:
+                entry?.channel ??
+                props.settings.channelOptions.find(
+                    (option) => option.value === 'webhook',
+                )?.value ??
+                props.settings.channelOptions[0]?.value ??
+                '',
+            enabled: entry?.enabled ?? true,
+            delivery_url: '',
+            message_template: entry?.message_template ?? '',
+            allowed_mentions: Array.isArray(mentions)
+                ? mentions.filter(
+                      (value): value is string => typeof value === 'string',
+                  )
+                : [],
+            filters: (entry?.filters ?? []).map((filter) => ({
+                id: nextFilterId++,
+                attribute: filter.attribute,
+                operator: filter.operator,
+                value: Array.isArray(filter.value)
+                    ? filter.value.join(', ')
+                    : (filter.value ?? ''),
+            })),
+        });
+        form.resetAndClearErrors();
+        protection.clearFeedback();
+    },
+    { immediate: true },
+);
+function close(open: boolean): void {
+    if (open || form.processing || !protection.confirmLeave()) {
+        return;
+    }
+    form.resetAndClearErrors();
+    protection.clearFeedback();
+    emit('close');
+}
+function addFilter(): void {
+    form.filters.push({
+        id: nextFilterId++,
+        attribute: props.settings.filterAttributeOptions[0]?.value ?? '',
+        operator: 'equals',
+        value: '',
+    });
+}
+function removeFilter(index: number): void {
+    form.filters.splice(index, 1);
+    form.clearErrors(
+        ...(Object.keys(form.errors).filter((key) =>
+            key.startsWith('filters'),
+        ) as (keyof typeof form.errors)[]),
+    );
+}
+function errorFor(prefix: string): string | undefined {
+    return Object.entries(form.errors).find(
+        ([key]) => key === prefix || key.startsWith(`${prefix}.`),
+    )?.[1];
+}
+function submit(): void {
+    const target = props.target;
+    if (!target || form.processing) {
+        return;
+    }
+    const project = props.settings.project.id;
+    const route =
+        target.action === 'create'
+            ? store(project)
+            : target.action === 'edit'
+              ? update([project, target.entry.id])
+              : destroy([project, target.entry.id]);
+    form.transform((data) =>
+        deleting.value
+            ? {}
+            : {
+                  name: data.name,
+                  event_type: data.event_type,
+                  channel: data.channel,
+                  enabled: data.enabled,
+                  delivery_url: data.delivery_url || null,
+                  channel_configuration:
+                      data.channel === 'discord'
+                          ? { allowed_mentions: data.allowed_mentions }
+                          : {},
+                  message_template:
+                      data.channel === 'discord' ? data.message_template : null,
+                  filters: serializeNotificationFilters(data.filters),
+              },
+    );
+    protection.submit(route, {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.resetAndClearErrors();
+            emit('close');
+        },
+    });
+}
+</script>
+
+<template>
+    <Dialog :open="target !== null" @update:open="close">
+        <DialogContent
+            class="sm:max-w-2xl"
+            :show-close-button="!form.processing"
+            @escape-key-down="form.processing && $event.preventDefault()"
+            @interact-outside="form.processing && $event.preventDefault()"
+        >
+            <DialogHeader>
+                <DialogTitle>{{ title }}</DialogTitle>
+                <DialogDescription>{{
+                    deleting
+                        ? t('notifications.deleteHelp', {
+                              name: target?.entry?.name ?? '',
+                          })
+                        : t('notifications.editorHelp')
+                }}</DialogDescription>
+            </DialogHeader>
+            <form
+                class="grid min-w-0 gap-5"
+                :aria-busy="form.processing"
+                @submit.prevent="submit"
+            >
+                <FormFeedback :state="protection.state.value" @retry="submit" />
+                <fieldset
+                    v-if="!deleting"
+                    :disabled="form.processing"
+                    class="grid min-w-0 gap-5"
+                >
+                    <div class="grid gap-2">
+                        <Label for="notification-name">{{
+                            t('notifications.name')
+                        }}</Label>
+                        <Input
+                            id="notification-name"
+                            v-model="form.name"
+                            name="name"
+                            required
+                            maxlength="255"
+                            :aria-invalid="!!form.errors.name"
+                            aria-describedby="notification-name-error"
+                        />
+                        <InputError
+                            id="notification-name-error"
+                            :message="form.errors.name"
+                        />
+                    </div>
+                    <div class="grid min-w-0 gap-4 sm:grid-cols-2">
+                        <div class="grid min-w-0 gap-2">
+                            <Label for="notification-event">{{
+                                t('notifications.event')
+                            }}</Label>
+                            <select
+                                id="notification-event"
+                                v-model="form.event_type"
+                                name="event_type"
+                                :class="inputClass"
+                                :aria-invalid="!!form.errors.event_type"
+                                aria-describedby="notification-event-error"
+                            >
+                                <option
+                                    v-for="option in settings.eventTypeOptions"
+                                    :key="option.value"
+                                    :value="option.value"
+                                >
+                                    {{
+                                        notificationLabel(
+                                            t,
+                                            'event',
+                                            option.value,
+                                            option.label,
+                                        )
+                                    }}
+                                </option>
+                            </select>
+                            <InputError
+                                id="notification-event-error"
+                                :message="form.errors.event_type"
+                            />
+                        </div>
+                        <div class="grid min-w-0 gap-2">
+                            <Label for="notification-channel">{{
+                                t('notifications.channel')
+                            }}</Label>
+                            <select
+                                id="notification-channel"
+                                v-model="form.channel"
+                                name="channel"
+                                :class="inputClass"
+                                :aria-invalid="!!form.errors.channel"
+                                aria-describedby="notification-channel-error"
+                            >
+                                <option
+                                    v-for="option in settings.channelOptions"
+                                    :key="option.value"
+                                    :value="option.value"
+                                >
+                                    {{
+                                        notificationLabel(
+                                            t,
+                                            'channel',
+                                            option.value,
+                                            option.label,
+                                        )
+                                    }}
+                                </option>
+                            </select>
+                            <InputError
+                                id="notification-channel-error"
+                                :message="form.errors.channel"
+                            />
+                        </div>
+                    </div>
+                    <section
+                        class="bg-muted/25 grid min-w-0 gap-3 rounded-lg border p-4"
+                        aria-labelledby="notification-delivery-title"
+                    >
+                        <h3
+                            id="notification-delivery-title"
+                            class="font-semibold"
+                        >
+                            {{ t('notifications.delivery') }}
+                        </h3>
+                        <p v-if="target?.action === 'edit'" class="text-sm">
+                            {{
+                                t(
+                                    target.entry.has_delivery_url
+                                        ? 'notifications.keepUrl'
+                                        : 'notifications.urlMissing',
+                                )
+                            }}
+                        </p>
+                        <Label for="notification-url">{{
+                            t(
+                                target?.action === 'edit'
+                                    ? 'notifications.replaceUrl'
+                                    : 'notifications.url',
+                            )
+                        }}</Label>
+                        <Input
+                            id="notification-url"
+                            v-model="form.delivery_url"
+                            name="delivery_url"
+                            type="password"
+                            autocomplete="new-password"
+                            :spellcheck="false"
+                            :required="target?.action === 'create'"
+                            maxlength="2048"
+                            :aria-invalid="!!form.errors.delivery_url"
+                            aria-describedby="notification-url-help notification-url-error"
+                        />
+                        <p
+                            id="notification-url-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{ t('notifications.secretHelp') }}
+                        </p>
+                        <InputError
+                            id="notification-url-error"
+                            :message="form.errors.delivery_url"
+                        />
+                    </section>
+                    <section
+                        v-if="form.channel === 'discord'"
+                        class="grid min-w-0 gap-4"
+                        aria-labelledby="notification-message-title"
+                    >
+                        <div class="grid gap-2">
+                            <Label
+                                id="notification-message-title"
+                                for="notification-message"
+                                >{{ t('notifications.message') }}</Label
+                            >
+                            <textarea
+                                id="notification-message"
+                                v-model="form.message_template"
+                                name="message_template"
+                                rows="4"
+                                required
+                                maxlength="2000"
+                                :class="inputClass"
+                                :aria-invalid="!!form.errors.message_template"
+                                aria-describedby="notification-message-help notification-message-error"
+                            />
+                            <p
+                                id="notification-message-help"
+                                class="text-caption text-muted-foreground"
+                            >
+                                {{ t('notifications.messageHelp') }}
+                            </p>
+                            <InputError
+                                id="notification-message-error"
+                                :message="form.errors.message_template"
+                            />
+                        </div>
+                        <details class="rounded-lg border p-3">
+                            <summary
+                                class="focus-visible:ring-ring cursor-pointer rounded font-medium focus-visible:ring-2"
+                            >
+                                {{ t('notifications.variables') }}
+                            </summary>
+                            <dl class="mt-3 grid min-w-0 gap-3 text-sm">
+                                <div
+                                    v-for="variable in settings.templateVariables"
+                                    :key="variable.value"
+                                    class="grid min-w-0 gap-1"
+                                >
+                                    <dt class="break-all font-mono">
+                                        {{ variable.value }}
+                                    </dt>
+                                    <dd class="text-muted-foreground">
+                                        {{
+                                            notificationLabel(
+                                                t,
+                                                'variable',
+                                                variable.value.slice(1),
+                                                variable.description,
+                                            )
+                                        }}
+                                    </dd>
+                                </div>
+                            </dl>
+                        </details>
+                        <fieldset
+                            class="grid gap-2"
+                            aria-describedby="notification-mentions-help notification-mentions-error"
+                        >
+                            <legend class="mb-2 text-sm font-medium">
+                                {{ t('notifications.mentions') }}
+                            </legend>
+                            <label
+                                v-for="option in settings.discordAllowedMentionOptions"
+                                :key="option.value"
+                                class="flex min-h-11 items-center gap-3 rounded-lg border px-3 py-2 text-sm"
+                            >
+                                <input
+                                    v-model="form.allowed_mentions"
+                                    type="checkbox"
+                                    :value="option.value"
+                                    :aria-invalid="
+                                        !!errorFor('channel_configuration')
+                                    "
+                                    class="accent-primary size-4"
+                                />{{
+                                    notificationLabel(
+                                        t,
+                                        'mention',
+                                        option.value,
+                                        option.label,
+                                    )
+                                }}
+                            </label>
+                            <p
+                                id="notification-mentions-help"
+                                class="text-caption text-muted-foreground"
+                            >
+                                {{ t('notifications.mentionsHelp') }}
+                            </p>
+                            <InputError
+                                id="notification-mentions-error"
+                                :message="errorFor('channel_configuration')"
+                            />
+                        </fieldset>
+                    </section>
+                    <section
+                        class="grid min-w-0 gap-3 border-t pt-4"
+                        aria-labelledby="notification-filters-title"
+                    >
+                        <h3
+                            id="notification-filters-title"
+                            class="font-semibold"
+                        >
+                            {{ t('notifications.filters') }}
+                        </h3>
+                        <p class="text-caption text-muted-foreground">
+                            {{ t('notifications.filtersHelp') }}
+                        </p>
+                        <p v-if="!form.filters.length" class="text-sm">
+                            {{ t('notifications.noFilters') }}
+                        </p>
+                        <fieldset
+                            v-for="(filter, index) in form.filters"
+                            :key="filter.id"
+                            class="bg-muted/25 grid min-w-0 gap-3 rounded-lg border p-3"
+                        >
+                            <legend class="px-1 text-sm font-medium">
+                                {{
+                                    t('notifications.filterNumber', {
+                                        number: index + 1,
+                                    })
+                                }}
+                            </legend>
+                            <div class="grid min-w-0 gap-3 sm:grid-cols-2">
+                                <div class="grid min-w-0 gap-2">
+                                    <Label
+                                        :for="`filter-attribute-${filter.id}`"
+                                        >{{
+                                            t('notifications.attribute')
+                                        }}</Label
+                                    >
+                                    <select
+                                        :id="`filter-attribute-${filter.id}`"
+                                        v-model="filter.attribute"
+                                        :class="inputClass"
+                                        :aria-invalid="
+                                            !!errorFor(`filters.${index}`)
+                                        "
+                                        :aria-describedby="`filter-error-${filter.id}`"
+                                    >
+                                        <option
+                                            v-for="option in settings.filterAttributeOptions"
+                                            :key="option.value"
+                                            :value="option.value"
+                                        >
+                                            {{
+                                                notificationLabel(
+                                                    t,
+                                                    'attribute',
+                                                    option.value,
+                                                    option.label,
+                                                )
+                                            }}
+                                        </option>
+                                    </select>
+                                </div>
+                                <div class="grid min-w-0 gap-2">
+                                    <Label
+                                        :for="`filter-operator-${filter.id}`"
+                                        >{{
+                                            t('notifications.operator')
+                                        }}</Label
+                                    >
+                                    <select
+                                        :id="`filter-operator-${filter.id}`"
+                                        v-model="filter.operator"
+                                        :class="inputClass"
+                                        :aria-invalid="
+                                            !!errorFor(`filters.${index}`)
+                                        "
+                                        :aria-describedby="`filter-error-${filter.id}`"
+                                    >
+                                        <option
+                                            v-for="option in settings.filterOperatorOptions"
+                                            :key="option.value"
+                                            :value="option.value"
+                                        >
+                                            {{
+                                                notificationLabel(
+                                                    t,
+                                                    'operator',
+                                                    option.value,
+                                                    option.label,
+                                                )
+                                            }}
+                                        </option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div
+                                v-if="supportsFilterValue(filter.operator)"
+                                class="grid gap-2"
+                            >
+                                <Label :for="`filter-value-${filter.id}`">{{
+                                    t(
+                                        filter.operator === 'in'
+                                            ? 'notifications.values'
+                                            : 'notifications.value',
+                                    )
+                                }}</Label>
+                                <textarea
+                                    :id="`filter-value-${filter.id}`"
+                                    v-model="filter.value"
+                                    rows="2"
+                                    :class="inputClass"
+                                    :aria-invalid="
+                                        !!errorFor(`filters.${index}`)
+                                    "
+                                    :aria-describedby="`filter-error-${filter.id}`"
+                                />
+                            </div>
+                            <InputError
+                                :id="`filter-error-${filter.id}`"
+                                :message="errorFor(`filters.${index}`)"
+                            />
+                            <Button
+                                type="button"
+                                variant="outline"
+                                class="justify-self-end"
+                                :aria-label="
+                                    t('notifications.removeFilterNumber', {
+                                        number: index + 1,
+                                    })
+                                "
+                                @click="removeFilter(index)"
+                                >{{ t('notifications.removeFilter') }}</Button
+                            >
+                        </fieldset>
+                        <InputError :message="form.errors.filters" />
+                        <Button
+                            type="button"
+                            variant="outline"
+                            class="justify-self-start"
+                            @click="addFilter"
+                            >{{ t('notifications.addFilter') }}</Button
+                        >
+                    </section>
+                    <div class="grid gap-2 border-t pt-4">
+                        <Label
+                            for="notification-enabled"
+                            class="flex min-h-11 items-center gap-3"
+                            ><Checkbox
+                                id="notification-enabled"
+                                v-model="form.enabled"
+                                :invalid="!!form.errors.enabled"
+                                aria-describedby="notification-enabled-help notification-enabled-error"
+                            />{{ t('notifications.enabled') }}</Label
+                        >
+                        <p
+                            id="notification-enabled-help"
+                            class="text-caption text-muted-foreground"
+                        >
+                            {{ t('notifications.enabledHelp') }}
+                        </p>
+                        <InputError
+                            id="notification-enabled-error"
+                            :message="form.errors.enabled"
+                        />
+                    </div>
+                </fieldset>
+                <InputError v-else :message="errorFor('notificationAction')" />
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        :disabled="form.processing"
+                        @click="close(false)"
+                        >{{ t('common.cancel') }}</Button
+                    >
+                    <Button
+                        type="submit"
+                        :variant="deleting ? 'destructive' : 'default'"
+                        :loading="form.processing"
+                        >{{
+                            deleting
+                                ? t('notifications.confirmDelete')
+                                : t('common.save')
+                        }}</Button
+                    >
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/lib/notification-filters.ts b/resources/js/lib/notification-filters.ts
new file mode 100644
index 0000000..37fb60a
--- /dev/null
+++ b/resources/js/lib/notification-filters.ts
@@ -0,0 +1,23 @@
+import type { NotificationActionFilterModel } from '@/types/models/notification-action-filter-model';
+import type { NotificationFilterFormState } from '@/types/project-notifications';
+
+export const supportsFilterValue = (operator: string): boolean =>
+    !['exists', 'not_exists'].includes(operator);
+
+export function serializeNotificationFilters(
+    filters: NotificationFilterFormState[],
+): NotificationActionFilterModel[] {
+    return filters.map(({ attribute, operator, value }) => ({
+        attribute,
+        operator,
+        value:
+            operator === 'in'
+                ? value
+                      .split(/[\n,]/)
+                      .map((entry) => entry.trim())
+                      .filter(Boolean)
+                : supportsFilterValue(operator)
+                  ? value.trim()
+                  : null,
+    }));
+}
diff --git a/resources/js/lib/notification-labels.ts b/resources/js/lib/notification-labels.ts
new file mode 100644
index 0000000..6387e61
--- /dev/null
+++ b/resources/js/lib/notification-labels.ts
@@ -0,0 +1,13 @@
+import type { Localization } from '@/lib/localization';
+import { en } from '@/locales/en';
+import type { TranslationKey } from '@/types/localization';
+
+export function notificationLabel(
+    t: Localization['t'],
+    group: string,
+    value: string,
+    fallback: string,
+): string {
+    const key = `notifications.${group}.${value}`;
+    return Object.hasOwn(en, key) ? t(key as TranslationKey) : fallback;
+}
diff --git a/resources/js/locales/en.ts b/resources/js/locales/en.ts
index c67fd77..a43afc0 100644
--- a/resources/js/locales/en.ts
+++ b/resources/js/locales/en.ts
@@ -1,4 +1,113 @@
 export const en = {
+    'notifications.title': 'Notifications',
+    'notifications.pageTitle': '{project} · Notifications',
+    'notifications.description':
+        'Send ticket updates to your team with webhook and Discord actions.',
+    'notifications.saved': 'Notification settings saved.',
+    'notifications.actions': 'Notification actions',
+    'notifications.create': 'Add notification',
+    'notifications.edit': 'Edit notification',
+    'notifications.delete': 'Delete notification?',
+    'notifications.editNamed': 'Edit {name}',
+    'notifications.deleteNamed': 'Delete {name}',
+    'notifications.empty': 'No notifications yet',
+    'notifications.emptyHelp':
+        'Add an action to send updates when a ticket event matches your rules.',
+    'notifications.enabled': 'Enabled',
+    'notifications.disabled': 'Disabled',
+    'notifications.delivery': 'Delivery',
+    'notifications.urlSaved': 'Secret URL saved',
+    'notifications.urlMissing': 'No delivery URL saved',
+    'notifications.filterCount': {
+        one: '{count} filter · all must match',
+        other: '{count} filters · all must match',
+    },
+    'notifications.noFiltersShort': 'All matching events',
+    'notifications.noChanges': 'No saved changes yet',
+    'notifications.createdAt': 'Created {date}',
+    'notifications.updatedAt': 'Updated {date}',
+    'notifications.deleteHelp':
+        'Delete “{name}”? This action will stop sending notifications. This cannot be undone.',
+    'notifications.editorHelp':
+        'Choose a ticket event, a delivery channel and optional filters.',
+    'notifications.name': 'Name',
+    'notifications.event': 'Trigger',
+    'notifications.channel': 'Channel',
+    'notifications.keepUrl':
+        'A secret URL is saved. Leave the field blank to keep it.',
+    'notifications.replaceUrl': 'Replace delivery URL (optional)',
+    'notifications.url': 'Delivery URL',
+    'notifications.secretHelp':
+        'URLs are stored encrypted and never shown again after saving. Enter the complete webhook URL.',
+    'notifications.message': 'Discord message template',
+    'notifications.messageHelp':
+        'Use the variables below to include ticket details. Maximum 2,000 characters.',
+    'notifications.variables': 'Available template variables',
+    'notifications.mentions': 'Allowed mentions',
+    'notifications.mentionsHelp':
+        'Leave all unchecked to disable mentions. Only the selected mention types may notify people.',
+    'notifications.filters': 'Filters',
+    'notifications.filtersHelp':
+        'All filters must match before this action sends a notification.',
+    'notifications.noFilters':
+        'No filters. This action runs for every matching event.',
+    'notifications.filterNumber': 'Filter {number}',
+    'notifications.attribute': 'Attribute',
+    'notifications.operator': 'Operator',
+    'notifications.value': 'Value',
+    'notifications.values': 'Values (comma or newline separated)',
+    'notifications.removeFilter': 'Remove filter',
+    'notifications.removeFilterNumber': 'Remove filter {number}',
+    'notifications.addFilter': 'Add filter',
+    'notifications.enabledHelp':
+        'Turn off this action to pause delivery while keeping its configuration.',
+    'notifications.confirmDelete': 'Delete notification',
+    'notifications.channel.discord': 'Discord',
+    'notifications.channel.webhook': 'Webhook',
+    'notifications.event.ticket_status_changed': 'Ticket status changed',
+    'notifications.event.ticket_create': 'Ticket create',
+    'notifications.event.ticket_assignee_changed': 'Assignee changed',
+    'notifications.attribute.project.id': 'Project ID',
+    'notifications.attribute.project.key': 'Project key',
+    'notifications.attribute.project.name': 'Project name',
+    'notifications.attribute.ticket.id': 'Ticket ID',
+    'notifications.attribute.ticket.key': 'Ticket key',
+    'notifications.attribute.ticket.title': 'Ticket title',
+    'notifications.attribute.ticket.url': 'Ticket URL',
+    'notifications.attribute.actor.id': 'Actor ID',
+    'notifications.attribute.actor.name': 'Actor name',
+    'notifications.attribute.assignee.from.id': 'From assignee ID',
+    'notifications.attribute.assignee.from.name': 'From assignee name',
+    'notifications.attribute.assignee.to.id': 'To assignee ID',
+    'notifications.attribute.assignee.to.name': 'To assignee name',
+    'notifications.attribute.status.from.id': 'From status ID',
+    'notifications.attribute.status.from.label': 'From status label',
+    'notifications.attribute.status.to.id': 'To status ID',
+    'notifications.attribute.status.to.label': 'To status label',
+    'notifications.operator.equals': 'Equals',
+    'notifications.operator.not_equals': 'Not equals',
+    'notifications.operator.exists': 'Exists',
+    'notifications.operator.not_exists': 'Not exists',
+    'notifications.operator.in': 'In list',
+    'notifications.mention.everyone': '@everyone and @here',
+    'notifications.mention.roles': 'Role mentions (@role)',
+    'notifications.mention.users': 'User mentions (@username)',
+    'notifications.variable.url':
+        'Absolute ticket URL for the notification event.',
+    'notifications.variable.ticket_key': 'Project ticket key such as CORE-42.',
+    'notifications.variable.ticket_title':
+        'Ticket title for the notification event.',
+    'notifications.variable.project_name': 'Project name that owns the ticket.',
+    'notifications.variable.status_from':
+        'Origin status label for status moves; blank for ticket create and assignee changes.',
+    'notifications.variable.status_to':
+        'Destination or initial status label for the ticket event.',
+    'notifications.variable.actor_name':
+        'Actor name when the event has a known user.',
+    'notifications.variable.assignee_from':
+        'Previous assignee name when the event updates assignment; blank otherwise.',
+    'notifications.variable.assignee_to':
+        'New assignee name when the event updates assignment; blank when unassigned.',
     'templates.description':
         'Reuse a proven project setup. Manage published templates and see which projects inherit their configuration.',
     'templates.updated': 'Project templates updated.',
diff --git a/resources/js/pages/projects/settings/Notifications.vue b/resources/js/pages/projects/settings/Notifications.vue
index 78f14ad..a35a969 100644
--- a/resources/js/pages/projects/settings/Notifications.vue
+++ b/resources/js/pages/projects/settings/Notifications.vue
@@ -1,1227 +1,227 @@
 <script setup lang="ts">
-import { Form, Head, Link } from '@inertiajs/vue3';
-import { computed, reactive } from 'vue';
-import ProjectNotificationSettingsController from '@/actions/App/Http/Controllers/ProjectNotificationSettingsController';
-import Heading from '@/components/Heading.vue';
-import InputError from '@/components/InputError.vue';
+import { Head } from '@inertiajs/vue3';
+import { Bell, Pencil, Plus, ShieldCheck, Trash2 } from 'lucide-vue-next';
+import { computed, ref } from 'vue';
+import FeedbackState from '@/components/FeedbackState.vue';
+import NotificationEditorDialog from '@/components/projects/NotificationEditorDialog.vue';
 import TemplateInheritancePanel from '@/components/projects/TemplateInheritancePanel.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { notificationLabel } from '@/lib/notification-labels';
+import { useLocalization } from '@/composables/useLocalization';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { index, show } from '@/routes/projects/index';
-import {
-    board as boardSettings,
-    general as generalSettings,
-    metadata as metadataSettings,
-    notifications as notificationSettings,
-    repositories as repositorySettings,
-} from '@/routes/projects/settings';
+import SettingsLayout from '@/layouts/projects/SettingsLayout.vue';
+import { index, show } from '@/routes/projects';
+import { notifications } from '@/routes/projects/settings';
 import type {
     BreadcrumbItem,
     ProjectNotificationSettingsPageProps,
 } from '@/types';
-import type { NotificationActionFilterModel } from '@/types/models/notification-action-filter-model';
 import type { NotificationActionModel } from '@/types/models/notification-action-model';
-
-type NotificationFilterFormState = {
-    attribute: string;
-    id: string;
-    operator: string;
-    value: string;
-};
-
-type NotificationFilterPayload = {
-    attribute: string;
-    operator: string;
-    value: string | string[] | null;
-};
+import type { NotificationEditorTarget } from '@/types/project-notifications';
 
 const props = defineProps<ProjectNotificationSettingsPageProps>();
-
-const defaultCreateChannel =
-    props.channelOptions.find((option) => option.value === 'webhook')?.value ??
-    props.channelOptions[0]?.value ??
-    '';
-const defaultFilterAttribute = props.filterAttributeOptions[0]?.value ?? '';
-const defaultFilterOperator =
-    props.filterOperatorOptions.find((option) => option.value === 'equals')
-        ?.value ??
-    props.filterOperatorOptions[0]?.value ??
-    '';
-
-const createChannelState = reactive<{ value: string }>({
-    value: defaultCreateChannel,
-});
-const createFilterState = reactive<{ filters: NotificationFilterFormState[] }>({
-    filters: [],
-});
-const editChannelState = reactive<Record<number, string>>({});
-const editFilterState = reactive<Record<number, NotificationFilterFormState[]>>(
-    {},
-);
-const timestampFormatter = new Intl.DateTimeFormat(undefined, {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-});
-
-const breadcrumbs: BreadcrumbItem[] = [
-    {
-        title: 'Projects',
-        href: index(),
-    },
-    {
-        title: props.project.name,
-        href: show(props.project.id),
-    },
-    {
-        title: 'Notification settings',
-        href: notificationSettings(props.project.id),
-    },
-];
-
-let filterStateCounter = 0;
-
-const nextFilterStateId = (): string =>
-    `notification-filter-${filterStateCounter++}`;
-
-const parseInFilterValues = (value: string): string[] =>
-    value
-        .split(/[\n,]/)
-        .map((entry) => entry.trim())
-        .filter((entry) => entry.length > 0);
-
-const supportsFilterValue = (operator: string): boolean =>
-    !['exists', 'not_exists'].includes(operator);
-
-const supportsArrayFilterValue = (operator: string): boolean =>
-    operator === 'in';
-
-const createFilter = (): NotificationFilterFormState => ({
-    attribute: defaultFilterAttribute,
-    id: nextFilterStateId(),
-    operator: defaultFilterOperator,
-    value: '',
-});
-
-const toFilterFormState = (
-    filter: NotificationActionFilterModel,
-): NotificationFilterFormState => ({
-    attribute: filter.attribute,
-    id: nextFilterStateId(),
-    operator: filter.operator,
-    value: Array.isArray(filter.value)
-        ? filter.value.join(', ')
-        : (filter.value ?? ''),
-});
-
-const serializeFilters = (
-    filters: NotificationFilterFormState[],
-): NotificationFilterPayload[] =>
-    filters.map((filter) => ({
-        attribute: filter.attribute,
-        operator: filter.operator,
-        value: supportsArrayFilterValue(filter.operator)
-            ? parseInFilterValues(filter.value)
-            : supportsFilterValue(filter.operator)
-              ? filter.value.trim()
-              : null,
-    }));
-
-const notificationFilterError = (
-    errors: Record<string, string>,
-): string | undefined => {
-    if (errors.filters) {
-        return errors.filters;
+const { t, date: formatDate } = useLocalization();
+const target = ref<NotificationEditorTarget | null>(null);
+const breadcrumbs = computed<BreadcrumbItem[]>(() => [
+    { title: t('navigation.projects'), href: index() },
+    { title: props.project.name, href: show(props.project.id) },
+    { title: t('notifications.title'), href: notifications(props.project.id) },
+]);
+function timestamp(entry: NotificationActionModel): string {
+    const date = entry.updated_at ?? entry.created_at;
+    if (!date) {
+        return t('notifications.noChanges');
     }
-
-    const nestedErrorKey = Object.keys(errors).find((key) =>
-        key.startsWith('filters.'),
+    return t(
+        entry.created_at !== date
+            ? 'notifications.updatedAt'
+            : 'notifications.createdAt',
+        {
+            date: formatDate(new Date(date), {
+                dateStyle: 'medium',
+                timeStyle: 'short',
+            }),
+        },
     );
-
-    return nestedErrorKey === undefined ? undefined : errors[nestedErrorKey];
-};
-
-const addCreateFilter = (): void => {
-    createFilterState.filters.push(createFilter());
-};
-
-const removeCreateFilter = (index: number): void => {
-    createFilterState.filters.splice(index, 1);
-};
-
-const resetCreateFilters = (): void => {
-    createFilterState.filters = [];
-};
-
-const editFilters = (
-    notificationActionId: number,
-): NotificationFilterFormState[] => editFilterState[notificationActionId] ?? [];
-
-const addEditFilter = (notificationActionId: number): void => {
-    editFilterState[notificationActionId] = [
-        ...editFilters(notificationActionId),
-        createFilter(),
-    ];
-};
-
-const removeEditFilter = (
-    notificationActionId: number,
-    index: number,
-): void => {
-    editFilterState[notificationActionId] = editFilters(
-        notificationActionId,
-    ).filter((_, candidateIndex) => candidateIndex !== index);
-};
-
-const createSerializedFilters = computed<string>(() =>
-    JSON.stringify(serializeFilters(createFilterState.filters)),
-);
-
-const editSerializedFilters = (notificationActionId: number): string =>
-    JSON.stringify(serializeFilters(editFilters(notificationActionId)));
-
-props.notificationActions.forEach((notificationAction) => {
-    editChannelState[notificationAction.id] = notificationAction.channel;
-    editFilterState[notificationAction.id] = (
-        notificationAction.filters ?? []
-    ).map(toFilterFormState);
-});
-
-const selectedChannel = (notificationAction: NotificationActionModel): string =>
-    editChannelState[notificationAction.id] ?? notificationAction.channel;
-
-const notificationActionAllowedMentions = (
-    notificationAction: NotificationActionModel,
-): string[] => {
-    const allowedMentions =
-        notificationAction.channel_configuration['allowed_mentions'];
-
-    if (!Array.isArray(allowedMentions)) {
-        return [];
-    }
-
-    return allowedMentions
-        .filter(
-            (allowedMention): allowedMention is string =>
-                typeof allowedMention === 'string',
-        )
-        .map((allowedMention) => allowedMention.trim().toLowerCase())
-        .filter((allowedMention) => allowedMention !== '');
-};
-
-const allowedMentionsError = (
-    errors: Record<string, string>,
-): string | undefined => {
-    const generalError = errors['channel_configuration.allowed_mentions'];
-
-    if (generalError !== undefined) {
-        return generalError;
-    }
-
-    const itemErrorKey = Object.keys(errors).find((key) =>
-        key.startsWith('channel_configuration.allowed_mentions.'),
-    );
-
-    return itemErrorKey === undefined ? undefined : errors[itemErrorKey];
-};
-
-const notificationActionTimestamp = (
-    notificationAction: NotificationActionModel,
-): string => {
-    const createdAt = notificationAction.created_at;
-    const updatedAt = notificationAction.updated_at ?? createdAt;
-
-    if (updatedAt === null) {
-        return 'No saved changes yet';
-    }
-
-    if (createdAt !== null && createdAt !== updatedAt) {
-        return `Updated ${timestampFormatter.format(new Date(updatedAt))}`;
-    }
-
-    return `Created ${timestampFormatter.format(new Date(updatedAt))}`;
-};
+}
 </script>
 
 <template>
     <AppLayout :breadcrumbs="breadcrumbs">
-        <Head :title="`${project.name} notification settings`" />
-
-        <div class="flex flex-1 flex-col gap-6 p-4">
-            <div
-                class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
-            >
-                <div class="space-y-3">
-                    <Badge variant="outline" class="px-3 py-1">
-                        {{ project.key }}
-                    </Badge>
-                    <Heading
-                        :title="`${project.name} notification settings`"
-                        description="Configure project-scoped webhook and Discord notification actions for ticket events."
-                    />
-                </div>
-
-                <div class="flex flex-wrap gap-3">
-                    <Button
-                        v-if="$page.props.auth.permissions.globalAdmin"
-                        as-child
-                        variant="outline"
-                    >
-                        <Link :href="generalSettings(project.id)">
-                            General settings
-                        </Link>
-                    </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="boardSettings(project.id)">
-                            Board settings
-                        </Link>
-                    </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="metadataSettings(project.id)">
-                            Ticket settings
-                        </Link>
-                    </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="repositorySettings(project.id)">
-                            Repository settings
-                        </Link>
-                    </Button>
-
-                    <Button as-child variant="outline">
-                        <Link :href="show(project.id)">Back to project</Link>
-                    </Button>
-                </div>
-            </div>
-
-            <div
+        <Head
+            :title="t('notifications.pageTitle', { project: project.name })"
+        />
+        <SettingsLayout :project-name="project.name" :project-key="project.key">
+            <header class="grid gap-3">
+                <h2 class="text-title">{{ t('notifications.title') }}</h2>
+                <p class="text-muted-foreground">
+                    {{ t('notifications.description') }}
+                </p>
+            </header>
+            <FeedbackState
                 v-if="status"
-                class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
-            >
-                {{ status }}
-            </div>
-
+                state="success"
+                :title="t('notifications.saved')"
+            />
             <TemplateInheritancePanel
                 :areas="['notification_actions']"
                 :project-id="project.id"
                 :template-state="templateState"
             />
-
-            <div class="grid gap-6 xl:grid-cols-[24rem_minmax(0,1fr)]">
-                <div class="space-y-6">
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Create notification</CardTitle>
-                            <CardDescription>
-                                Add a project-scoped notification action for
-                                supported ticket events.
-                            </CardDescription>
-                        </CardHeader>
-
-                        <CardContent>
-                            <Form
-                                v-bind="
-                                    ProjectNotificationSettingsController.store.form(
-                                        project.id,
-                                    )
-                                "
-                                error-bag="createNotificationAction"
-                                reset-on-success
-                                @success="
-                                    createChannelState.value =
-                                        defaultCreateChannel;
-                                    resetCreateFilters();
-                                "
-                                class="space-y-4"
-                                v-slot="{ errors, processing }"
-                            >
-                                <div class="grid gap-2">
-                                    <Label for="create-notification-name">
-                                        Name
-                                    </Label>
-                                    <Input
-                                        id="create-notification-name"
-                                        name="name"
-                                        placeholder="Discord alerts"
-                                    />
-                                    <InputError :message="errors.name" />
-                                </div>
-
-                                <div class="grid gap-4 md:grid-cols-2">
-                                    <div class="grid gap-2">
-                                        <Label
-                                            for="create-notification-event-type"
-                                        >
-                                            Event type
-                                        </Label>
-                                        <select
-                                            id="create-notification-event-type"
-                                            name="event_type"
-                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                        >
-                                            <option
-                                                v-for="eventTypeOption in eventTypeOptions"
-                                                :key="eventTypeOption.value"
-                                                :value="eventTypeOption.value"
-                                            >
-                                                {{ eventTypeOption.label }}
-                                            </option>
-                                        </select>
-                                        <InputError
-                                            :message="errors.event_type"
-                                        />
-                                    </div>
-
-                                    <div class="grid gap-2">
-                                        <Label
-                                            for="create-notification-channel"
-                                        >
-                                            Channel
-                                        </Label>
-                                        <select
-                                            id="create-notification-channel"
-                                            name="channel"
-                                            v-model="createChannelState.value"
-                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                        >
-                                            <option
-                                                v-for="channelOption in channelOptions"
-                                                :key="channelOption.value"
-                                                :value="channelOption.value"
-                                            >
-                                                {{ channelOption.label }}
-                                            </option>
-                                        </select>
-                                        <InputError :message="errors.channel" />
-                                    </div>
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label
-                                        for="create-notification-delivery-url"
-                                    >
-                                        Delivery URL
-                                    </Label>
-                                    <Input
-                                        id="create-notification-delivery-url"
-                                        name="delivery_url"
-                                        type="url"
-                                        placeholder="https://hooks.example.test/kanbangit/secret-token"
-                                    />
-                                    <p class="text-muted-foreground text-sm">
-                                        Secret URLs are stored encrypted and are
-                                        never rendered back to the browser after
-                                        save.
-                                    </p>
-                                    <InputError
-                                        :message="errors.delivery_url"
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label>Allowed mentions</Label>
-                                    <div
-                                        :class="[
-                                            'grid gap-2',
-                                            createChannelState.value !==
-                                            'discord'
-                                                ? 'hidden'
-                                                : '',
-                                        ]"
-                                    >
-                                        <label
-                                            v-for="allowedMentionOption in discordAllowedMentionOptions"
-                                            :key="`create-allowed-mention-${allowedMentionOption.value}`"
-                                            class="border-border flex items-center gap-2 rounded-lg border px-3 py-2"
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                name="channel_configuration[allowed_mentions][]"
-                                                :value="
-                                                    allowedMentionOption.value
-                                                "
-                                                :disabled="
-                                                    createChannelState.value !==
-                                                    'discord'
-                                                "
-                                                class="border-input text-primary focus:ring-ring size-4 rounded"
-                                            />
-                                            <span>
-                                                {{ allowedMentionOption.label }}
-                                            </span>
-                                        </label>
-                                    </div>
-                                    <p class="text-muted-foreground text-sm">
-                                        {{
-                                            createChannelState.value ===
-                                            'discord'
-                                                ? 'Pick which Discord mention types are allowed. Leave all unchecked to keep mentions fully disabled.'
-                                                : 'Allowed mentions are only used when the channel is Discord.'
-                                        }}
-                                    </p>
-                                    <InputError
-                                        :message="allowedMentionsError(errors)"
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label
-                                        for="create-notification-message-template"
-                                    >
-                                        Discord message template
-                                    </Label>
-                                    <textarea
-                                        id="create-notification-message-template"
-                                        name="message_template"
-                                        rows="4"
-                                        :disabled="
-                                            createChannelState.value !==
-                                            'discord'
-                                        "
-                                        :class="[
-                                            'border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-28 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]',
-                                            createChannelState.value !==
-                                            'discord'
-                                                ? 'hidden'
-                                                : 'block',
-                                        ]"
-                                        placeholder="$ticket_key in $project_name ($status_to) by $actor_name: $url"
-                                    />
-                                    <p class="text-muted-foreground text-sm">
-                                        {{
-                                            createChannelState.value ===
-                                            'discord'
-                                                ? 'Available for Discord actions only. Use the fixed variables listed below.'
-                                                : 'Discord message templates are only used when the channel is Discord.'
-                                        }}
-                                    </p>
-                                    <InputError
-                                        :message="errors.message_template"
-                                    />
-                                </div>
-
-                                <div class="space-y-3 rounded-lg border p-4">
-                                    <div class="space-y-1">
-                                        <Label>Notification filters</Label>
-                                        <p
-                                            class="text-muted-foreground text-sm"
-                                        >
-                                            Optional rules that must match the
-                                            ticket payload before this
-                                            notification is dispatched.
-                                        </p>
-                                    </div>
-
-                                    <input
-                                        type="hidden"
-                                        name="filters"
-                                        :value="createSerializedFilters"
-                                    />
-
-                                    <div
-                                        v-if="
-                                            createFilterState.filters.length ===
-                                            0
-                                        "
-                                        class="text-muted-foreground text-sm"
-                                    >
-                                        No filters configured. This action runs
-                                        for every matching event.
-                                    </div>
-
-                                    <div
-                                        v-for="(
-                                            filter, filterIndex
-                                        ) in createFilterState.filters"
-                                        :key="filter.id"
-                                        class="grid gap-3 rounded-md border p-3"
-                                    >
-                                        <div class="grid gap-3 md:grid-cols-2">
-                                            <div class="grid gap-2">
-                                                <Label
-                                                    :for="`create-filter-attribute-${filter.id}`"
-                                                >
-                                                    Attribute
-                                                </Label>
-                                                <select
-                                                    :id="`create-filter-attribute-${filter.id}`"
-                                                    v-model="filter.attribute"
-                                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                                >
-                                                    <option
-                                                        v-for="filterAttributeOption in filterAttributeOptions"
-                                                        :key="
-                                                            filterAttributeOption.value
-                                                        "
-                                                        :value="
-                                                            filterAttributeOption.value
-                                                        "
-                                                    >
-                                                        {{
-                                                            filterAttributeOption.label
-                                                        }}
-                                                    </option>
-                                                </select>
-                                            </div>
-
-                                            <div class="grid gap-2">
-                                                <Label
-                                                    :for="`create-filter-operator-${filter.id}`"
-                                                >
-                                                    Operator
-                                                </Label>
-                                                <select
-                                                    :id="`create-filter-operator-${filter.id}`"
-                                                    v-model="filter.operator"
-                                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                                >
-                                                    <option
-                                                        v-for="filterOperatorOption in filterOperatorOptions"
-                                                        :key="
-                                                            filterOperatorOption.value
-                                                        "
-                                                        :value="
-                                                            filterOperatorOption.value
-                                                        "
-                                                    >
-                                                        {{
-                                                            filterOperatorOption.label
-                                                        }}
-                                                    </option>
-                                                </select>
-                                            </div>
-                                        </div>
-
-                                        <div
-                                            v-if="
-                                                supportsFilterValue(
-                                                    filter.operator,
-                                                )
-                                            "
-                                            class="grid gap-2"
-                                        >
-                                            <Label
-                                                :for="`create-filter-value-${filter.id}`"
-                                            >
-                                                {{
-                                                    supportsArrayFilterValue(
-                                                        filter.operator,
-                                                    )
-                                                        ? 'Values (comma or newline separated)'
-                                                        : 'Value'
-                                                }}
-                                            </Label>
-                                            <textarea
-                                                :id="`create-filter-value-${filter.id}`"
-                                                v-model="filter.value"
-                                                rows="2"
-                                                class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-20 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                                :placeholder="
-                                                    supportsArrayFilterValue(
-                                                        filter.operator,
-                                                    )
-                                                        ? 'CORE-1, CORE-2'
-                                                        : 'Doing'
-                                                "
-                                            />
-                                        </div>
-
-                                        <div class="flex justify-end">
-                                            <Button
-                                                type="button"
-                                                variant="outline"
-                                                @click="
-                                                    removeCreateFilter(
-                                                        filterIndex,
-                                                    )
-                                                "
-                                            >
-                                                Remove filter
-                                            </Button>
-                                        </div>
-                                    </div>
-
-                                    <div class="flex justify-start">
-                                        <Button
-                                            type="button"
-                                            variant="outline"
-                                            @click="addCreateFilter"
-                                        >
-                                            Add filter
-                                        </Button>
-                                    </div>
-
-                                    <InputError
-                                        :message="
-                                            notificationFilterError(errors)
-                                        "
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label
-                                        for="create-notification-enabled"
-                                        class="flex items-center gap-3"
-                                    >
-                                        <input
-                                            type="hidden"
-                                            name="enabled"
-                                            value="0"
-                                        />
-                                        <input
-                                            id="create-notification-enabled"
-                                            type="checkbox"
-                                            name="enabled"
-                                            value="1"
-                                            checked
-                                            class="border-input text-primary focus:ring-ring size-4 rounded"
-                                        />
-                                        <span>Enabled immediately</span>
-                                    </Label>
-                                    <InputError :message="errors.enabled" />
-                                </div>
-
-                                <Button type="submit" :disabled="processing">
-                                    Save notification
-                                </Button>
-                            </Form>
-                        </CardContent>
-                    </Card>
-
-                    <Card>
-                        <CardHeader>
-                            <CardTitle>Template variables</CardTitle>
-                            <CardDescription>
-                                Discord templates can reference the following
-                                fixed variables.
-                            </CardDescription>
-                        </CardHeader>
-
-                        <CardContent class="space-y-3">
-                            <div
-                                v-for="templateVariable in templateVariables"
-                                :key="templateVariable.value"
-                                class="border-border/70 rounded-xl border p-4"
-                            >
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <Badge variant="secondary">
-                                        {{ templateVariable.value }}
-                                    </Badge>
-                                </div>
-                                <p class="text-muted-foreground mt-2 text-sm">
-                                    {{ templateVariable.description }}
-                                </p>
-                            </div>
-                        </CardContent>
-                    </Card>
-                </div>
-
-                <div class="space-y-6">
-                    <Card
-                        v-if="notificationActions.length === 0"
-                        class="border-dashed"
-                    >
-                        <CardHeader>
-                            <CardTitle>No notifications configured</CardTitle>
-                            <CardDescription>
-                                Create your first webhook or Discord action to
-                                start sending project notifications later in
-                                this release.
-                            </CardDescription>
-                        </CardHeader>
-                    </Card>
-
-                    <Card
-                        v-for="notificationAction in notificationActions"
-                        :key="notificationAction.id"
-                    >
-                        <CardHeader
-                            class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+            <section
+                class="grid min-w-0 gap-4"
+                aria-labelledby="notification-actions-title"
+            >
+                <div class="flex flex-wrap items-center justify-between gap-3">
+                    <h3 id="notification-actions-title" class="text-title">
+                        {{ t('notifications.actions') }}
+                        <span class="text-muted-foreground text-sm"
+                            >({{ notificationActions.length }})</span
                         >
-                            <div class="space-y-3">
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <CardTitle>
-                                        {{ notificationAction.name }}
-                                    </CardTitle>
-                                    <Badge variant="outline">
-                                        {{
-                                            notificationAction.event_type_label
-                                        }}
-                                    </Badge>
-                                    <Badge variant="outline">
-                                        {{ notificationAction.channel_label }}
-                                    </Badge>
+                    </h3>
+                    <Button @click="target = { action: 'create' }">
+                        <Plus class="size-4" aria-hidden="true" />{{
+                            t('notifications.create')
+                        }}
+                    </Button>
+                </div>
+                <div
+                    v-if="notificationActions.length === 0"
+                    class="bg-muted/25 grid justify-items-center gap-3 rounded-xl border border-dashed p-8 text-center"
+                >
+                    <Bell class="text-primary size-8" aria-hidden="true" />
+                    <h4 class="font-semibold">
+                        {{ t('notifications.empty') }}
+                    </h4>
+                    <p class="text-muted-foreground text-sm">
+                        {{ t('notifications.emptyHelp') }}
+                    </p>
+                </div>
+                <ul v-else class="grid min-w-0 gap-3">
+                    <li
+                        v-for="entry in notificationActions"
+                        :key="entry.id"
+                        :data-notification="entry.id"
+                        class="bg-card grid min-w-0 gap-4 rounded-xl border p-4"
+                    >
+                        <div
+                            class="flex flex-wrap items-start justify-between gap-3"
+                        >
+                            <div class="grid min-w-0 flex-1 gap-2">
+                                <h4 class="break-words font-semibold">
+                                    {{ entry.name }}
+                                </h4>
+                                <div class="flex flex-wrap gap-2">
                                     <Badge
                                         :variant="
-                                            notificationAction.enabled
+                                            entry.enabled
                                                 ? 'default'
                                                 : 'secondary'
                                         "
+                                        >{{
+                                            t(
+                                                entry.enabled
+                                                    ? 'notifications.enabled'
+                                                    : 'notifications.disabled',
+                                            )
+                                        }}</Badge
+                                    >
+                                    <Badge variant="outline">{{
+                                        notificationLabel(
+                                            t,
+                                            'channel',
+                                            entry.channel,
+                                            entry.channel_label,
+                                        )
+                                    }}</Badge>
+                                    <Badge
+                                        variant="outline"
+                                        class="whitespace-normal"
+                                        >{{
+                                            notificationLabel(
+                                                t,
+                                                'event',
+                                                entry.event_type,
+                                                entry.event_type_label,
+                                            )
+                                        }}</Badge
                                     >
-                                        {{
-                                            notificationAction.enabled
-                                                ? 'Enabled'
-                                                : 'Disabled'
-                                        }}
-                                    </Badge>
                                 </div>
-                                <CardDescription>
-                                    {{
-                                        notificationActionTimestamp(
-                                            notificationAction,
+                            </div>
+                            <div class="flex gap-1">
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    :aria-label="
+                                        t('notifications.editNamed', {
+                                            name: entry.name,
+                                        })
+                                    "
+                                    @click="target = { action: 'edit', entry }"
+                                    ><Pencil class="size-4" aria-hidden="true"
+                                /></Button>
+                                <Button
+                                    variant="ghost"
+                                    size="icon"
+                                    :aria-label="
+                                        t('notifications.deleteNamed', {
+                                            name: entry.name,
+                                        })
+                                    "
+                                    @click="
+                                        target = { action: 'delete', entry }
+                                    "
+                                    ><Trash2
+                                        class="text-destructive size-4"
+                                        aria-hidden="true"
+                                /></Button>
+                            </div>
+                        </div>
+                        <dl class="grid min-w-0 gap-3 text-sm sm:grid-cols-2">
+                            <div class="grid gap-1">
+                                <dt class="text-muted-foreground">
+                                    {{ t('notifications.delivery') }}
+                                </dt>
+                                <dd class="flex items-center gap-2">
+                                    <ShieldCheck
+                                        class="size-4 shrink-0"
+                                        aria-hidden="true"
+                                    />{{
+                                        t(
+                                            entry.has_delivery_url
+                                                ? 'notifications.urlSaved'
+                                                : 'notifications.urlMissing',
                                         )
                                     }}
-                                </CardDescription>
+                                </dd>
                             </div>
-                        </CardHeader>
-
-                        <CardContent class="space-y-4">
-                            <Form
-                                v-bind="
-                                    ProjectNotificationSettingsController.update.form(
-                                        [project.id, notificationAction.id],
-                                    )
-                                "
-                                :error-bag="`updateNotificationAction-${notificationAction.id}`"
-                                class="space-y-4"
-                                v-slot="{ errors, processing }"
-                            >
-                                <div class="grid gap-4 md:grid-cols-2">
-                                    <div class="grid gap-2">
-                                        <Label
-                                            :for="`notification-name-${notificationAction.id}`"
-                                        >
-                                            Name
-                                        </Label>
-                                        <Input
-                                            :id="`notification-name-${notificationAction.id}`"
-                                            name="name"
-                                            :default-value="
-                                                notificationAction.name
-                                            "
-                                        />
-                                        <InputError :message="errors.name" />
-                                    </div>
-
-                                    <div class="grid gap-2">
-                                        <Label
-                                            :for="`notification-delivery-url-${notificationAction.id}`"
-                                        >
-                                            Delivery URL
-                                        </Label>
-                                        <Input
-                                            :id="`notification-delivery-url-${notificationAction.id}`"
-                                            name="delivery_url"
-                                            type="url"
-                                            :placeholder="
-                                                notificationAction.has_delivery_url
-                                                    ? 'Saved URL stays hidden. Enter a new URL to replace it.'
-                                                    : 'https://hooks.example.test/kanbangit/secret-token'
-                                            "
-                                        />
-                                        <p
-                                            class="text-muted-foreground text-sm"
-                                        >
-                                            {{
-                                                notificationAction.has_delivery_url
-                                                    ? 'A delivery URL is already stored. Leaving this blank keeps the existing secret.'
-                                                    : 'No delivery URL is stored yet. Enter a secret URL to enable delivery later.'
-                                            }}
-                                        </p>
-                                        <InputError
-                                            :message="errors.delivery_url"
-                                        />
-                                    </div>
-
-                                    <div class="grid gap-2">
-                                        <Label
-                                            :for="`notification-event-type-${notificationAction.id}`"
-                                        >
-                                            Event type
-                                        </Label>
-                                        <select
-                                            :id="`notification-event-type-${notificationAction.id}`"
-                                            name="event_type"
-                                            :default-value="
-                                                notificationAction.event_type
-                                            "
-                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                        >
-                                            <option
-                                                v-for="eventTypeOption in eventTypeOptions"
-                                                :key="eventTypeOption.value"
-                                                :value="eventTypeOption.value"
-                                            >
-                                                {{ eventTypeOption.label }}
-                                            </option>
-                                        </select>
-                                        <InputError
-                                            :message="errors.event_type"
-                                        />
-                                    </div>
-
-                                    <div class="grid gap-2">
-                                        <Label
-                                            :for="`notification-channel-${notificationAction.id}`"
-                                        >
-                                            Channel
-                                        </Label>
-                                        <select
-                                            :id="`notification-channel-${notificationAction.id}`"
-                                            name="channel"
-                                            v-model="
-                                                editChannelState[
-                                                    notificationAction.id
-                                                ]
-                                            "
-                                            class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                        >
-                                            <option
-                                                v-for="channelOption in channelOptions"
-                                                :key="channelOption.value"
-                                                :value="channelOption.value"
-                                            >
-                                                {{ channelOption.label }}
-                                            </option>
-                                        </select>
-                                        <InputError :message="errors.channel" />
-                                    </div>
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label>Allowed mentions</Label>
-                                    <div
-                                        :class="[
-                                            'grid gap-2',
-                                            selectedChannel(
-                                                notificationAction,
-                                            ) !== 'discord'
-                                                ? 'hidden'
-                                                : '',
-                                        ]"
-                                    >
-                                        <label
-                                            v-for="allowedMentionOption in discordAllowedMentionOptions"
-                                            :key="`notification-allowed-mention-${notificationAction.id}-${allowedMentionOption.value}`"
-                                            class="border-border flex items-center gap-2 rounded-lg border px-3 py-2"
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                name="channel_configuration[allowed_mentions][]"
-                                                :value="
-                                                    allowedMentionOption.value
-                                                "
-                                                :default-checked="
-                                                    notificationActionAllowedMentions(
-                                                        notificationAction,
-                                                    ).includes(
-                                                        allowedMentionOption.value,
-                                                    )
-                                                "
-                                                :disabled="
-                                                    selectedChannel(
-                                                        notificationAction,
-                                                    ) !== 'discord'
-                                                "
-                                                class="border-input text-primary focus:ring-ring size-4 rounded"
-                                            />
-                                            <span>
-                                                {{ allowedMentionOption.label }}
-                                            </span>
-                                        </label>
-                                    </div>
-                                    <p class="text-muted-foreground text-sm">
-                                        {{
-                                            selectedChannel(
-                                                notificationAction,
-                                            ) === 'discord'
-                                                ? 'Pick which Discord mention types are allowed. Leave all unchecked to keep mentions fully disabled.'
-                                                : 'Allowed mentions are only used when the channel is Discord.'
-                                        }}
-                                    </p>
-                                    <InputError
-                                        :message="allowedMentionsError(errors)"
-                                    />
-                                </div>
-
-                                <div class="grid gap-2">
-                                    <Label
-                                        :for="`notification-message-template-${notificationAction.id}`"
-                                    >
-                                        Discord message template
-                                    </Label>
-                                    <textarea
-                                        :id="`notification-message-template-${notificationAction.id}`"
-                                        name="message_template"
-                                        rows="4"
-                                        :value="
-                                            notificationAction.message_template ??
-                                            ''
-                                        "
-                                        :disabled="
-                                            selectedChannel(
-                                                notificationAction,
-                                            ) !== 'discord'
-                                        "
-                                        :class="[
-                                            'border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-28 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]',
-                                            selectedChannel(
-                                                notificationAction,
-                                            ) !== 'discord'
-                                                ? 'hidden'
-                                                : 'block',
-                                        ]"
-                                        placeholder="$ticket_key in $project_name ($status_to) by $actor_name: $url"
-                                    />
-                                    <p class="text-muted-foreground text-sm">
-                                        {{
-                                            selectedChannel(
-                                                notificationAction,
-                                            ) === 'discord'
-                                                ? 'Available for Discord actions only. Use the fixed variables listed in the sidebar.'
-                                                : 'Discord message templates are only used when the channel is Discord.'
-                                        }}
-                                    </p>
-                                    <InputError
-                                        :message="errors.message_template"
-                                    />
-                                </div>
-
-                                <div class="space-y-3 rounded-lg border p-4">
-                                    <div class="space-y-1">
-                                        <Label>Notification filters</Label>
-                                        <p
-                                            class="text-muted-foreground text-sm"
-                                        >
-                                            Optional rules that must all match
-                                            this event payload before delivery.
-                                        </p>
-                                    </div>
-
-                                    <input
-                                        type="hidden"
-                                        name="filters"
-                                        :value="
-                                            editSerializedFilters(
-                                                notificationAction.id,
-                                            )
-                                        "
-                                    />
-
-                                    <div
-                                        v-if="
-                                            editFilters(notificationAction.id)
-                                                .length === 0
-                                        "
-                                        class="text-muted-foreground text-sm"
-                                    >
-                                        No filters configured. This action runs
-                                        for every matching event.
-                                    </div>
-
-                                    <div
-                                        v-for="(
-                                            filter, filterIndex
-                                        ) in editFilters(notificationAction.id)"
-                                        :key="filter.id"
-                                        class="grid gap-3 rounded-md border p-3"
-                                    >
-                                        <div class="grid gap-3 md:grid-cols-2">
-                                            <div class="grid gap-2">
-                                                <Label
-                                                    :for="`notification-filter-attribute-${notificationAction.id}-${filter.id}`"
-                                                >
-                                                    Attribute
-                                                </Label>
-                                                <select
-                                                    :id="`notification-filter-attribute-${notificationAction.id}-${filter.id}`"
-                                                    v-model="filter.attribute"
-                                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                                >
-                                                    <option
-                                                        v-for="filterAttributeOption in filterAttributeOptions"
-                                                        :key="
-                                                            filterAttributeOption.value
-                                                        "
-                                                        :value="
-                                                            filterAttributeOption.value
-                                                        "
-                                                    >
-                                                        {{
-                                                            filterAttributeOption.label
-                                                        }}
-                                                    </option>
-                                                </select>
-                                            </div>
-
-                                            <div class="grid gap-2">
-                                                <Label
-                                                    :for="`notification-filter-operator-${notificationAction.id}-${filter.id}`"
-                                                >
-                                                    Operator
-                                                </Label>
-                                                <select
-                                                    :id="`notification-filter-operator-${notificationAction.id}-${filter.id}`"
-                                                    v-model="filter.operator"
-                                                    class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                                >
-                                                    <option
-                                                        v-for="filterOperatorOption in filterOperatorOptions"
-                                                        :key="
-                                                            filterOperatorOption.value
-                                                        "
-                                                        :value="
-                                                            filterOperatorOption.value
-                                                        "
-                                                    >
-                                                        {{
-                                                            filterOperatorOption.label
-                                                        }}
-                                                    </option>
-                                                </select>
-                                            </div>
-                                        </div>
-
-                                        <div
-                                            v-if="
-                                                supportsFilterValue(
-                                                    filter.operator,
-                                                )
-                                            "
-                                            class="grid gap-2"
-                                        >
-                                            <Label
-                                                :for="`notification-filter-value-${notificationAction.id}-${filter.id}`"
-                                            >
-                                                {{
-                                                    supportsArrayFilterValue(
-                                                        filter.operator,
-                                                    )
-                                                        ? 'Values (comma or newline separated)'
-                                                        : 'Value'
-                                                }}
-                                            </Label>
-                                            <textarea
-                                                :id="`notification-filter-value-${notificationAction.id}-${filter.id}`"
-                                                v-model="filter.value"
-                                                rows="2"
-                                                class="border-input bg-background shadow-xs focus-visible:border-ring focus-visible:ring-ring/50 min-h-20 rounded-md border px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px]"
-                                                :placeholder="
-                                                    supportsArrayFilterValue(
-                                                        filter.operator,
-                                                    )
-                                                        ? 'CORE-1, CORE-2'
-                                                        : 'Doing'
-                                                "
-                                            />
-                                        </div>
-
-                                        <div class="flex justify-end">
-                                            <Button
-                                                type="button"
-                                                variant="outline"
-                                                @click="
-                                                    removeEditFilter(
-                                                        notificationAction.id,
-                                                        filterIndex,
-                                                    )
-                                                "
-                                            >
-                                                Remove filter
-                                            </Button>
-                                        </div>
-                                    </div>
-
-                                    <div class="flex justify-start">
-                                        <Button
-                                            type="button"
-                                            variant="outline"
-                                            @click="
-                                                addEditFilter(
-                                                    notificationAction.id,
-                                                )
-                                            "
-                                        >
-                                            Add filter
-                                        </Button>
-                                    </div>
-
-                                    <InputError
-                                        :message="
-                                            notificationFilterError(errors)
-                                        "
-                                    />
-                                </div>
-
-                                <div
-                                    class="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between"
-                                >
-                                    <div class="grid gap-2">
-                                        <Label
-                                            :for="`notification-enabled-${notificationAction.id}`"
-                                            class="flex items-center gap-3"
-                                        >
-                                            <input
-                                                type="hidden"
-                                                name="enabled"
-                                                value="0"
-                                            />
-                                            <input
-                                                :id="`notification-enabled-${notificationAction.id}`"
-                                                type="checkbox"
-                                                name="enabled"
-                                                value="1"
-                                                :default-checked="
-                                                    notificationAction.enabled
-                                                "
-                                                class="border-input text-primary focus:ring-ring size-4 rounded"
-                                            />
-                                            <span>Enabled</span>
-                                        </Label>
-                                        <InputError :message="errors.enabled" />
-                                    </div>
-
-                                    <Button
-                                        type="submit"
-                                        :disabled="processing"
-                                    >
-                                        Save changes
-                                    </Button>
-                                </div>
-                            </Form>
-
-                            <Form
-                                v-bind="
-                                    ProjectNotificationSettingsController.destroy.form(
-                                        [project.id, notificationAction.id],
-                                    )
-                                "
-                                class="border-t pt-4"
-                                v-slot="{ processing }"
-                            >
-                                <Button
-                                    type="submit"
-                                    variant="destructive"
-                                    :disabled="processing"
-                                >
-                                    Delete notification
-                                </Button>
-                            </Form>
-                        </CardContent>
-                    </Card>
-                </div>
-            </div>
-        </div>
+                            <div class="grid gap-1">
+                                <dt class="text-muted-foreground">
+                                    {{ t('notifications.filters') }}
+                                </dt>
+                                <dd>
+                                    {{
+                                        entry.filters.length
+                                            ? t('notifications.filterCount', {
+                                                  count: entry.filters.length,
+                                              })
+                                            : t('notifications.noFiltersShort')
+                                    }}
+                                </dd>
+                            </div>
+                        </dl>
+                        <p class="text-caption text-muted-foreground">
+                            {{ timestamp(entry) }}
+                        </p>
+                    </li>
+                </ul>
+            </section>
+            <NotificationEditorDialog
+                :target="target"
+                :settings="props"
+                @close="target = null"
+            />
+        </SettingsLayout>
     </AppLayout>
 </template>
diff --git a/resources/js/types/project-notifications.ts b/resources/js/types/project-notifications.ts
new file mode 100644
index 0000000..6039b00
--- /dev/null
+++ b/resources/js/types/project-notifications.ts
@@ -0,0 +1,12 @@
+import type { NotificationActionModel } from '@/types/models/notification-action-model';
+
+export type NotificationEditorTarget =
+    | { action: 'create'; entry?: never }
+    | { action: 'edit' | 'delete'; entry: NotificationActionModel };
+
+export type NotificationFilterFormState = {
+    id: number;
+    attribute: string;
+    operator: string;
+    value: string;
+};
diff --git a/tests/Feature/Projects/ProjectNotificationSettingsControllerTest.php b/tests/Feature/Projects/ProjectNotificationSettingsControllerTest.php
index f48b384..929524a 100644
--- a/tests/Feature/Projects/ProjectNotificationSettingsControllerTest.php
+++ b/tests/Feature/Projects/ProjectNotificationSettingsControllerTest.php
@@ -430,4 +430,66 @@ class ProjectNotificationSettingsControllerTest extends TestCase
                 ->missing('notificationActions.0.delivery_url'),
             );
     }
+
+    public function test_editor_accepts_array_filters_and_can_clear_discord_mentions(): void
+    {
+        $user = User::factory()->create();
+        $project = Project::factory()->create();
+        $notificationAction = NotificationAction::factory()->discord()->for($project)->create([
+            'channel_configuration' => ['allowed_mentions' => ['users']],
+            'delivery_url' => 'https://discord.com/api/webhooks/123456/original-secret',
+        ]);
+        $this->syncProjectPermissions($project, $user, ['edit']);
+
+        $this->actingAs($user)
+            ->patch(route('projects.settings.notifications.update', [$project, $notificationAction]), [
+                'name' => 'Paused alerts',
+                'event_type' => NotificationEventType::TicketAssigneeChanged->value,
+                'channel' => NotificationChannel::Discord->value,
+                'enabled' => false,
+                'delivery_url' => null,
+                'message_template' => '$ticket_key: $url',
+                'channel_configuration' => ['allowed_mentions' => []],
+                'filters' => [
+                    ['attribute' => 'ticket.key', 'operator' => 'in', 'value' => ['CORE-1', 'CORE-2']],
+                    ['attribute' => 'actor.name', 'operator' => 'exists', 'value' => null],
+                ],
+            ])
+            ->assertSessionHasNoErrors()
+            ->assertRedirect(route('projects.settings.notifications', $project));
+
+        $notificationAction->refresh();
+        $this->assertFalse($notificationAction->enabled);
+        $this->assertSame(['allowed_mentions' => []], $notificationAction->channel_configuration);
+        $this->assertSame('https://discord.com/api/webhooks/123456/original-secret', $notificationAction->delivery_url);
+        $this->assertSame([
+            ['attribute' => 'ticket.key', 'operator' => 'in', 'value' => ['CORE-1', 'CORE-2']],
+            ['attribute' => 'actor.name', 'operator' => 'exists', 'value' => null],
+        ], $notificationAction->filters);
+    }
+
+    public function test_invalid_editor_update_does_not_change_saved_configuration(): void
+    {
+        $user = User::factory()->create();
+        $project = Project::factory()->create();
+        $notificationAction = NotificationAction::factory()->discord()->for($project)->create();
+        $original = $notificationAction->fresh()->getRawOriginal();
+        $this->syncProjectPermissions($project, $user, ['edit']);
+
+        $this->actingAs($user)
+            ->from(route('projects.settings.notifications', $project))
+            ->patch(route('projects.settings.notifications.update', [$project, $notificationAction]), [
+                'name' => 'Invalid update',
+                'event_type' => NotificationEventType::TicketCreate->value,
+                'channel' => NotificationChannel::Discord->value,
+                'enabled' => false,
+                'delivery_url' => 'invalid-url',
+                'message_template' => '',
+                'channel_configuration' => ['allowed_mentions' => ['unsupported']],
+                'filters' => [['attribute' => 'ticket.key', 'operator' => 'in', 'value' => []]],
+            ])
+            ->assertSessionHasErrors(['delivery_url', 'message_template', 'channel_configuration.allowed_mentions.0', 'filters.0.value']);
+
+        $this->assertSame($original, $notificationAction->fresh()->getRawOriginal());
+    }
 }
diff --git a/tests/Feature/Projects/ProjectNotificationSettingsUiTest.php b/tests/Feature/Projects/ProjectNotificationSettingsUiTest.php
new file mode 100644
index 0000000..577429d
--- /dev/null
+++ b/tests/Feature/Projects/ProjectNotificationSettingsUiTest.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Tests\Feature\Projects;
+
+use Symfony\Component\Process\Process;
+use Tests\TestCase;
+
+class ProjectNotificationSettingsUiTest extends TestCase
+{
+    public function test_notification_settings_render_actions_and_serialize_filter_values(): void
+    {
+        $process = new Process(['node', 'tests/Fixtures/project-notification-settings.mjs'], base_path());
+        $process->setTimeout(60);
+        $process->run();
+
+        $this->assertTrue($process->isSuccessful(), $process->getOutput().$process->getErrorOutput());
+        $this->assertStringContainsString('Notification settings checks passed.', $process->getOutput());
+    }
+}
diff --git a/tests/Fixtures/project-notification-settings-browser.mjs b/tests/Fixtures/project-notification-settings-browser.mjs
new file mode 100644
index 0000000..2da0715
--- /dev/null
+++ b/tests/Fixtures/project-notification-settings-browser.mjs
@@ -0,0 +1,310 @@
+import assert from 'node:assert/strict';
+import process from 'node:process';
+const { chromium } = await import(
+    process.env.PLAYWRIGHT_MODULE ?? 'playwright'
+);
+const browser = await chromium.launch({ channel: 'chrome', headless: true });
+const base = 'http://127.0.0.1:4195';
+const context = await browser.newContext({
+    viewport: { width: 1440, height: 1000 },
+});
+const page = await context.newPage();
+page.setDefaultTimeout(10000);
+const errors = [];
+page.on('pageerror', (error) => errors.push(error.message));
+const requests = [];
+page.on('request', (request) => {
+    if (['POST', 'PATCH', 'DELETE'].includes(request.method())) {
+        requests.push(request);
+    }
+});
+const button = (name) => page.getByRole('button', { name, exact: true });
+const dialog = () => page.getByRole('dialog');
+const result = (value) =>
+    context.addCookies([
+        { name: 'notification_test_result', value, url: base },
+    ]);
+const visit = async (query = '?reset') => {
+    await result('success');
+    await page.goto(base + '/projects/1/settings/notifications' + query);
+    await page
+        .getByRole('heading', { name: 'Notifications', exact: true })
+        .waitFor();
+};
+const closed = () => dialog().waitFor({ state: 'hidden' });
+const state = (value) =>
+    dialog().locator(`[data-form-state="${value}"]`).waitFor();
+const noOverflow = async () =>
+    assert.equal(
+        await page.evaluate(
+            () => document.documentElement.scrollWidth <= window.innerWidth,
+        ),
+        true,
+    );
+const submit = async (label, method, path, expected) => {
+    const sent = page.waitForRequest((request) => request.method() === method);
+    await dialog().getByRole('button', { name: label, exact: true }).click();
+    const request = await sent;
+    assert.equal(new URL(request.url()).pathname, path);
+    assert.deepEqual(request.postDataJSON(), expected);
+};
+try {
+    for (const width of [1440, 768, 390, 320]) {
+        await page.setViewportSize({ width, height: 1000 });
+        for (const theme of ['light', 'dark']) {
+            await page.emulateMedia({ colorScheme: theme });
+            await visit();
+            await noOverflow();
+            const trigger = button('Edit Release alerts');
+            await trigger.focus();
+            await page.keyboard.press('Enter');
+            await dialog().waitFor();
+            assert.equal(
+                await page.getByLabel('Name', { exact: true }).inputValue(),
+                'Release alerts',
+            );
+            const secret = page.getByLabel('Replace delivery URL (optional)');
+            assert.equal(await secret.inputValue(), '');
+            assert.equal(await secret.getAttribute('type'), 'password');
+            assert.equal(
+                await page
+                    .getByLabel('Values (comma or newline separated)')
+                    .inputValue(),
+                'CORE-1, CORE-2',
+            );
+            assert.equal(
+                await page
+                    .getByLabel('User mentions (@username)', { exact: true })
+                    .isChecked(),
+                true,
+            );
+            await page
+                .getByText('Available template variables', { exact: true })
+                .click();
+            await dialog().getByText('$url', { exact: true }).waitFor();
+            await noOverflow();
+            assert.equal(
+                await dialog().evaluate(
+                    (el) => el.scrollWidth <= el.clientWidth + 1,
+                ),
+                true,
+            );
+            if (
+                process.env.NOTIFICATION_SCREENSHOTS &&
+                [1440, 390].includes(width)
+            ) {
+                await page.screenshot({
+                    path: `${process.env.NOTIFICATION_SCREENSHOTS}/kan45-${width}-${theme}.png`,
+                });
+            }
+            await page.keyboard.press('Escape');
+            await closed();
+            assert.equal(
+                await trigger.evaluate((el) => el === document.activeElement),
+                true,
+            );
+        }
+    }
+    await page.setViewportSize({ width: 1280, height: 1000 });
+    await visit();
+    await button('Add notification').click();
+    assert.equal(
+        await page.getByLabel('Channel', { exact: true }).inputValue(),
+        'webhook',
+    );
+    assert.equal(
+        await page
+            .getByLabel('Discord message template', { exact: true })
+            .count(),
+        0,
+    );
+    await page.getByLabel('Name', { exact: true }).fill('New webhook');
+    await page
+        .getByLabel('Delivery URL', { exact: true })
+        .fill('https://hooks.example.test/new-secret');
+    await page
+        .getByLabel('Trigger', { exact: true })
+        .selectOption('ticket_assignee_changed');
+    await page.getByLabel('Enabled', { exact: true }).uncheck();
+    await button('Add filter').click();
+    await page
+        .getByLabel('Attribute', { exact: true })
+        .selectOption('actor.name');
+    await page.getByLabel('Operator', { exact: true }).selectOption('exists');
+    assert.equal(await page.getByLabel('Value', { exact: true }).count(), 0);
+    const payload = {
+        name: 'New webhook',
+        event_type: 'ticket_assignee_changed',
+        channel: 'webhook',
+        enabled: false,
+        delivery_url: 'https://hooks.example.test/new-secret',
+        channel_configuration: {},
+        message_template: null,
+        filters: [{ attribute: 'actor.name', operator: 'exists', value: null }],
+    };
+    await submit('Save', 'POST', '/projects/1/settings/notifications', payload);
+    await closed();
+    await button('Edit New webhook').waitFor();
+    assert.equal(
+        await page
+            .locator('body')
+            .textContent()
+            .then((text) => text.includes('new-secret')),
+        false,
+    );
+    await button('Edit New webhook').click();
+    assert.equal(
+        await page.getByLabel('Replace delivery URL (optional)').inputValue(),
+        '',
+    );
+    await button('Remove filter 1').click();
+    await page.getByLabel('Channel', { exact: true }).selectOption('discord');
+    await page
+        .getByRole('textbox', { name: 'Discord message template', exact: true })
+        .fill('$ticket_key: $url');
+    await page.getByLabel('Role mentions (@role)', { exact: true }).check();
+    await button('Add filter').click();
+    await page
+        .getByLabel('Attribute', { exact: true })
+        .selectOption('ticket.key');
+    await page.getByLabel('Operator', { exact: true }).selectOption('in');
+    await page
+        .getByLabel('Values (comma or newline separated)')
+        .fill(' CORE-1,\n CORE-3, ');
+    const edited = {
+        ...payload,
+        channel: 'discord',
+        delivery_url: null,
+        channel_configuration: { allowed_mentions: ['roles'] },
+        message_template: '$ticket_key: $url',
+        filters: [
+            {
+                attribute: 'ticket.key',
+                operator: 'in',
+                value: ['CORE-1', 'CORE-3'],
+            },
+        ],
+    };
+    await result('validation');
+    await submit(
+        'Save',
+        'PATCH',
+        '/projects/1/settings/notifications/100',
+        edited,
+    );
+    await state('validation');
+    await page.getByText('Enter a valid URL.', { exact: true }).waitFor();
+    await page
+        .getByText('Choose at least one ticket.', { exact: true })
+        .waitFor();
+    await page
+        .getByText('This mention type is not supported.', { exact: true })
+        .waitFor();
+    assert.equal(
+        await page.getByLabel('Name', { exact: true }).inputValue(),
+        'New webhook',
+    );
+    await result('server');
+    await submit(
+        'Save',
+        'PATCH',
+        '/projects/1/settings/notifications/100',
+        edited,
+    );
+    await state('server');
+    await result('forbidden');
+    await submit(
+        'Try again',
+        'PATCH',
+        '/projects/1/settings/notifications/100',
+        edited,
+    );
+    await state('server');
+    await result('success');
+    await submit(
+        'Try again',
+        'PATCH',
+        '/projects/1/settings/notifications/100',
+        edited,
+    );
+    await closed();
+    await button('Edit New webhook').click();
+    await page.getByLabel('Role mentions (@role)', { exact: true }).uncheck();
+    await button('Remove filter 1').click();
+    await page
+        .getByLabel('Replace delivery URL (optional)')
+        .fill('https://hooks.example.test/replacement');
+    await page.route('**/notifications/100', (route) => route.abort('failed'));
+    await button('Save').click();
+    await state('network');
+    await page.unroute('**/notifications/100');
+    await submit(
+        'Try again',
+        'PATCH',
+        '/projects/1/settings/notifications/100',
+        {
+            ...edited,
+            delivery_url: 'https://hooks.example.test/replacement',
+            channel_configuration: { allowed_mentions: [] },
+            filters: [],
+        },
+    );
+    await closed();
+    await button('Edit New webhook').click();
+    await page.getByLabel('Channel', { exact: true }).selectOption('webhook');
+    await submit('Save', 'PATCH', '/projects/1/settings/notifications/100', {
+        ...edited,
+        channel: 'webhook',
+        channel_configuration: {},
+        message_template: null,
+        filters: [],
+    });
+    await closed();
+    // Dismissing a dirty dialog asks before clearing a secret; reopening starts clean.
+    await button('Edit New webhook').click();
+    await page
+        .getByLabel('Replace delivery URL (optional)')
+        .fill('discard-this-secret');
+    page.once('dialog', (prompt) => prompt.dismiss());
+    await button('Cancel').click();
+    assert.equal(await dialog().isVisible(), true);
+    page.once('dialog', (prompt) => prompt.accept());
+    await button('Cancel').click();
+    await closed();
+    await button('Edit Release alerts').click();
+    assert.equal(
+        await page.getByLabel('Replace delivery URL (optional)').inputValue(),
+        '',
+    );
+    assert.equal(
+        await page.getByLabel('Name', { exact: true }).inputValue(),
+        'Release alerts',
+    );
+    await button('Cancel').click();
+    await closed();
+    const before = requests.length;
+    await button('Delete New webhook').click();
+    await dialog()
+        .getByText(/This cannot be undone/)
+        .waitFor();
+    await button('Cancel').click();
+    await closed();
+    assert.equal(requests.length, before);
+    await button('Delete New webhook').click();
+    await submit(
+        'Delete notification',
+        'DELETE',
+        '/projects/1/settings/notifications/100',
+        {},
+    );
+    await closed();
+    assert.equal(await button('Edit New webhook').count(), 0);
+    await visit('?reset&empty');
+    await page.getByRole('heading', { name: 'No notifications yet' }).waitFor();
+    assert.deepEqual(errors, []);
+    console.log(
+        'Notification browser checks passed: CRUD, filters, channels, secrets, validation, retries, keyboard, responsive layouts and themes.',
+    );
+} finally {
+    await browser.close();
+}
diff --git a/tests/Fixtures/project-notification-settings-preview.mjs b/tests/Fixtures/project-notification-settings-preview.mjs
new file mode 100644
index 0000000..89270a9
--- /dev/null
+++ b/tests/Fixtures/project-notification-settings-preview.mjs
@@ -0,0 +1,19 @@
+import { createApp, h } from 'vue';
+import { createInertiaApp } from '@inertiajs/vue3';
+import '../../resources/css/app.css';
+import Notifications from '../../resources/js/pages/projects/settings/Notifications.vue';
+import { createAppearance } from '../../resources/js/composables/useAppearance';
+import { createLocalization } from '../../resources/js/lib/localization';
+
+createInertiaApp({
+    resolve: (name) =>
+        name === 'Notifications'
+            ? Notifications
+            : { render: () => h('h1', 'Destination reached') },
+    setup: ({ el, App, props, plugin }) =>
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(createLocalization())
+            .use(createAppearance())
+            .mount(el),
+});
diff --git a/tests/Fixtures/project-notification-settings.mjs b/tests/Fixtures/project-notification-settings.mjs
new file mode 100644
index 0000000..2ffbd30
--- /dev/null
+++ b/tests/Fixtures/project-notification-settings.mjs
@@ -0,0 +1,363 @@
+import assert from 'node:assert/strict';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import vue from '@vitejs/plugin-vue';
+import tailwind from '@tailwindcss/vite';
+import { createServer } from 'vite';
+import { createSSRApp, h } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+import { createInertiaApp } from '@inertiajs/vue3';
+
+const serve = process.argv.includes('--serve');
+const server = await createServer({
+    configFile: false,
+    cacheDir: 'node_modules/.vite/project-notification-settings-fixture',
+    plugins: [vue(), ...(serve ? [tailwind()] : [])],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
+        },
+    },
+    server: serve
+        ? { host: '127.0.0.1', port: 4195, strictPort: true, hmr: false }
+        : { middlewareMode: true, hmr: false, watch: null },
+    appType: 'custom',
+});
+const options = (values) => values.map((value) => ({ value, label: value }));
+function initial() {
+    return {
+        project: { id: 1, key: 'CORE', name: 'Core platform' },
+        status: null,
+        templateState: null,
+        channelOptions: options(['discord', 'webhook']),
+        eventTypeOptions: options([
+            'ticket_status_changed',
+            'ticket_create',
+            'ticket_assignee_changed',
+        ]),
+        filterAttributeOptions: options([
+            'project.id',
+            'ticket.key',
+            'status.to.label',
+            'actor.name',
+        ]),
+        filterOperatorOptions: options([
+            'equals',
+            'not_equals',
+            'exists',
+            'not_exists',
+            'in',
+        ]),
+        discordAllowedMentionOptions: options(['everyone', 'roles', 'users']),
+        templateVariables: [
+            { value: '$ticket_key', description: 'Ticket key' },
+            { value: '$url', description: 'Ticket URL' },
+        ],
+        notificationActions: [
+            {
+                id: 10,
+                project_id: 1,
+                name: 'Release alerts',
+                enabled: true,
+                event_type: 'ticket_status_changed',
+                event_type_label: 'Ticket status changed',
+                channel: 'discord',
+                channel_label: 'Discord',
+                channel_configuration: { allowed_mentions: ['users'] },
+                has_delivery_url: true,
+                message_template: '$ticket_key moved to $status_to: $url',
+                filters: [
+                    {
+                        attribute: 'ticket.key',
+                        operator: 'in',
+                        value: ['CORE-1', 'CORE-2'],
+                    },
+                ],
+                created_at: '2026-09-01T09:00:00Z',
+                updated_at: '2026-09-02T12:00:00Z',
+            },
+            {
+                id: 20,
+                project_id: 1,
+                name: 'Audit webhook',
+                enabled: false,
+                event_type: 'ticket_create',
+                event_type_label: 'Ticket create',
+                channel: 'webhook',
+                channel_label: 'Webhook',
+                channel_configuration: {},
+                has_delivery_url: false,
+                message_template: null,
+                filters: [],
+                created_at: null,
+                updated_at: null,
+            },
+        ],
+    };
+}
+function makePage(
+    extra = {},
+    url = '/projects/1/settings/notifications',
+    component = 'Notifications',
+) {
+    return {
+        component,
+        url,
+        version: null,
+        clearHistory: false,
+        encryptHistory: false,
+        props: {
+            name: 'KanbanGit',
+            errors: {},
+            sidebarOpen: true,
+            appearance: 'system',
+            auth: {
+                user: {
+                    id: 1,
+                    name: 'Alex Morgan',
+                    email: 'alex@example.test',
+                    avatar: null,
+                    avatar_color: '#10B981',
+                    avatar_is_generated: true,
+                },
+                permissions: {
+                    globalAdmin: false,
+                    projectCreate: false,
+                    canManageTeams: false,
+                },
+            },
+            navigation: {
+                project: {
+                    id: 1,
+                    name: 'Core platform',
+                    key: 'CORE',
+                    canManage: true,
+                },
+            },
+            ...initial(),
+            ...extra,
+        },
+    };
+}
+if (serve) {
+    let data = initial();
+    let nextId = 100;
+    server.middlewares.use(async (request, response, next) => {
+        if (!request.url.startsWith('/projects')) {
+            return next();
+        }
+        const url = new URL(request.url, 'http://localhost');
+        const mutation = request.method !== 'GET';
+        if (!mutation && url.searchParams.has('reset')) {
+            data = initial();
+            nextId = 100;
+        }
+        let errors = {};
+        if (mutation) {
+            let body = '';
+            for await (const chunk of request) {
+                body += chunk;
+            }
+            const submitted = JSON.parse(body || '{}');
+            const result =
+                request.headers.cookie?.match(
+                    /notification_test_result=(\w+)/,
+                )?.[1] ?? 'success';
+            if (result === 'server' || result === 'forbidden') {
+                response.statusCode = result === 'server' ? 500 : 403;
+                response.end('Unavailable');
+                return;
+            }
+            if (result === 'validation') {
+                errors = {
+                    delivery_url: 'Enter a valid URL.',
+                    'filters.0.value': 'Choose at least one ticket.',
+                    'channel_configuration.allowed_mentions.0':
+                        'This mention type is not supported.',
+                };
+            } else {
+                const id = Number(url.pathname.split('/').at(-1));
+                if (request.method === 'DELETE') {
+                    data.notificationActions = data.notificationActions.filter(
+                        (entry) => entry.id !== id,
+                    );
+                } else {
+                    const { delivery_url, ...safe } = submitted;
+                    if (request.method === 'POST') {
+                        data.notificationActions.push({
+                            id: nextId++,
+                            project_id: 1,
+                            ...safe,
+                            has_delivery_url: !!delivery_url,
+                            created_at: '2026-09-15T10:00:00Z',
+                            updated_at: null,
+                        });
+                    } else {
+                        const entry = data.notificationActions.find(
+                            (entry) => entry.id === id,
+                        );
+                        Object.assign(entry, safe, {
+                            has_delivery_url:
+                                entry.has_delivery_url || !!delivery_url,
+                        });
+                    }
+                }
+            }
+            data.status = Object.keys(errors).length ? null : 'Updated';
+        }
+        if (url.searchParams.has('empty')) {
+            data.notificationActions = [];
+        }
+        const page = makePage({ ...data, errors });
+        response.setHeader('Vary', 'X-Inertia');
+        if (request.headers['x-inertia']) {
+            response.setHeader('X-Inertia', 'true');
+            response.setHeader('Content-Type', 'application/json');
+            response.end(JSON.stringify(page));
+            return;
+        }
+        const escaped = JSON.stringify(page)
+            .replaceAll('&', '&amp;')
+            .replaceAll('"', '&quot;')
+            .replaceAll('<', '&lt;');
+        response.setHeader('Content-Type', 'text/html');
+        response.end(
+            await server.transformIndexHtml(
+                request.url,
+                '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="app" data-page="' +
+                    escaped +
+                    '"></div><script type="module" src="/tests/Fixtures/project-notification-settings-preview.mjs"></script></body></html>',
+            ),
+        );
+    });
+    await server.listen();
+    console.log('Notification settings fixture ready.');
+} else {
+    try {
+        const { createLocalization } = await server.ssrLoadModule(
+            '/resources/js/lib/localization.ts',
+        );
+        const { createAppearance } = await server.ssrLoadModule(
+            '/resources/js/composables/useAppearance.ts',
+        );
+        const { en } = await server.ssrLoadModule(
+            '/resources/js/locales/en.ts',
+        );
+        const component = (
+            await server.ssrLoadModule(
+                '/resources/js/pages/projects/settings/Notifications.vue',
+            )
+        ).default;
+        const render = async (extra = {}, locale = createLocalization()) =>
+            (
+                await createInertiaApp({
+                    page: makePage(extra),
+                    resolve: () => component,
+                    render: renderToString,
+                    setup: ({ App, props, plugin }) =>
+                        createSSRApp({ render: () => h(App, props) })
+                            .use(plugin)
+                            .use(locale)
+                            .use(createAppearance()),
+                })
+            ).body;
+        const html = await render();
+        assert.match(html, /Notifications/);
+        assert.match(html, /aria-current="page"/);
+        assert.match(html, /Release alerts/);
+        assert.match(html, /Audit webhook/);
+        assert.match(html, /Secret URL saved/);
+        assert.match(html, /No delivery URL saved/);
+        assert.match(html, /1 filter · all must match/);
+        assert.match(html, /Disabled/);
+        assert.match(html, /Ticket status changed/);
+        assert.match(html, /No saved changes yet/);
+        assert.match(
+            await render({ notificationActions: [] }),
+            /No notifications yet/,
+        );
+        assert.match(
+            await render({ status: 'Saved' }),
+            /Notification settings saved/,
+        );
+        assert.match(
+            await render(
+                {},
+                createLocalization(
+                    { locale: 'de' },
+                    {
+                        de: {
+                            ...en,
+                            'notifications.title': 'Benachrichtigungen',
+                        },
+                    },
+                ),
+            ),
+            /Benachrichtigungen/,
+        );
+        const { serializeNotificationFilters } = await server.ssrLoadModule(
+            '/resources/js/lib/notification-filters.ts',
+        );
+        assert.deepEqual(
+            serializeNotificationFilters([
+                {
+                    id: 1,
+                    attribute: 'ticket.key',
+                    operator: 'in',
+                    value: ' CORE-1, \nCORE-2, ',
+                },
+                {
+                    id: 2,
+                    attribute: 'actor.name',
+                    operator: 'exists',
+                    value: 'ignored',
+                },
+                {
+                    id: 3,
+                    attribute: 'actor.name',
+                    operator: 'not_exists',
+                    value: 'ignored',
+                },
+                {
+                    id: 4,
+                    attribute: 'status.to.label',
+                    operator: 'equals',
+                    value: ' Done ',
+                },
+                {
+                    id: 5,
+                    attribute: 'status.to.label',
+                    operator: 'not_equals',
+                    value: ' Doing ',
+                },
+            ]),
+            [
+                {
+                    attribute: 'ticket.key',
+                    operator: 'in',
+                    value: ['CORE-1', 'CORE-2'],
+                },
+                { attribute: 'actor.name', operator: 'exists', value: null },
+                {
+                    attribute: 'actor.name',
+                    operator: 'not_exists',
+                    value: null,
+                },
+                {
+                    attribute: 'status.to.label',
+                    operator: 'equals',
+                    value: 'Done',
+                },
+                {
+                    attribute: 'status.to.label',
+                    operator: 'not_equals',
+                    value: 'Doing',
+                },
+            ],
+        );
+        assert.deepEqual(serializeNotificationFilters([]), []);
+        console.log('Notification settings checks passed.');
+    } finally {
+        await server.close();
+    }
+}
-- 
2.54.0