From 68d73e088d4b0a0fd216cc67e27f69e2cb7c42ee Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 9 Feb 2026 17:06:17 +0100
Subject: [PATCH] Move notification settings to notifications view

---
 ...ngs.vue => NotificationSettingsDialog.vue} | 45 +++++++++++++------
 dashboard/src/views/NotificationsView.vue     | 11 ++++-
 dashboard/src/views/ProfileView.vue           |  2 -
 3 files changed, 41 insertions(+), 17 deletions(-)
 rename dashboard/src/components/{NotificationSettings.vue => NotificationSettingsDialog.vue} (74%)

diff --git a/dashboard/src/components/NotificationSettings.vue b/dashboard/src/components/NotificationSettingsDialog.vue
similarity index 74%
rename from dashboard/src/components/NotificationSettings.vue
rename to dashboard/src/components/NotificationSettingsDialog.vue
index 26597a404..69ff2a2d0 100644
--- a/dashboard/src/components/NotificationSettings.vue
+++ b/dashboard/src/components/NotificationSettingsDialog.vue
@@ -1,13 +1,13 @@
 <script setup>
 
-import { ref, onMounted } from 'vue';
-import { Switch } from '@cloudron/pankow';
+import { ref, useTemplateRef } from 'vue';
+import { Switch, Dialog } from '@cloudron/pankow';
 import SettingsItem from '../components/SettingsItem.vue';
-import Section from '../components/Section.vue';
 import ProfileModel from '../models/ProfileModel.js';
 
 const profileModel = ProfileModel.create();
 
+const dialogItem = useTemplateRef('dialogItem');
 const busy = ref(false);
 const appUpp = ref(false);
 const appDown = ref(false);
@@ -34,10 +34,12 @@ async function onSubmit() {
   const [error] = await profileModel.setNotificationConfig(config);
   if (error) return console.error(error);
 
+  dialogItem.value.close();
+
   busy.value = false;
 }
 
-onMounted(async () => {
+async function open() {
   const [error, result] = await profileModel.get();
   if (error) return console.error(error);
 
@@ -51,54 +53,69 @@ onMounted(async () => {
   diskSpace.value = config.indexOf('diskSpace') !== -1;
   cloudronUpdateFailed.value = config.indexOf('cloudronUpdateFailed') !== -1;
   reboot.value = config.indexOf('reboot') !== -1;
+
+  dialogItem.value.open();
+}
+
+defineExpose({
+  open
 });
 
 </script>
 
 <template>
-  <Section :title="$t('notifications.settings.title')">
+  <Dialog ref="dialogItem"
+    :title="$t('notifications.settings.title')"
+    :confirm-label="$t('main.dialog.save')"
+     confirm-style="primary"
+    :confirm-busy="busy"
+    :confirm-active="!busy"
+    :reject-label="$t('main.dialog.close')"
+     reject-style="secondary"
+    @confirm="onSubmit"
+  >
 
     <div>{{ $t('notifications.settingsDialog.description') }}</div>
     <br/>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.appUp') }}</div>
-      <Switch v-model="appUpp" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="appUpp" :disabled="busy"/>
     </SettingsItem>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.appDown') }}</div>
-      <Switch v-model="appDown" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="appDown" :disabled="busy"/>
     </SettingsItem>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.appOutOfMemory') }}</div>
-      <Switch v-model="appOutOfMemory" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="appOutOfMemory" :disabled="busy"/>
     </SettingsItem>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.backupFailed') }}</div>
-      <Switch v-model="backupFailed" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="backupFailed" :disabled="busy"/>
     </SettingsItem>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.certificateRenewalFailed') }}</div>
-      <Switch v-model="certificateRenewalFailed" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="certificateRenewalFailed" :disabled="busy"/>
     </SettingsItem>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.diskSpace') }}</div>
-      <Switch v-model="diskSpace" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="diskSpace" :disabled="busy"/>
     </SettingsItem>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.cloudronUpdateFailed') }}</div>
-      <Switch v-model="cloudronUpdateFailed" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="cloudronUpdateFailed" :disabled="busy"/>
     </SettingsItem>
 
     <SettingsItem>
       <div>{{ $t('notifications.settings.rebootRequired') }}</div>
-      <Switch v-model="reboot" :disabled="busy" @change="onSubmit()"/>
+      <Switch v-model="reboot" :disabled="busy"/>
     </SettingsItem>
-  </Section>
+  </Dialog>
 </template>
diff --git a/dashboard/src/views/NotificationsView.vue b/dashboard/src/views/NotificationsView.vue
index faca5c25a..b95cac021 100644
--- a/dashboard/src/views/NotificationsView.vue
+++ b/dashboard/src/views/NotificationsView.vue
@@ -2,10 +2,11 @@
 
 import { marked } from 'marked';
 import { eachLimit } from 'async';
-import { ref, onMounted, inject } from 'vue';
+import { ref, onMounted, inject, useTemplateRef } from 'vue';
 import { Button, ButtonGroup } from '@cloudron/pankow';
 import { prettyDate } from '@cloudron/pankow/utils';
 import Section from '../components/Section.vue';
+import NotificationSettingsDialog from '../components/NotificationSettingsDialog.vue';
 import NotificationsModel from  '../models/NotificationsModel.js';
 
 const notificationsModel = NotificationsModel.create();
@@ -96,6 +97,11 @@ async function onLoadMore() {
   busy.value = false;
 }
 
+const notificationSettingsDialog = useTemplateRef('notificationSettingsDialog');
+function onOpenSettings() {
+  notificationSettingsDialog.value.open();
+}
+
 onMounted(async () => {
   await refresh();
 
@@ -106,6 +112,8 @@ onMounted(async () => {
 
 <template>
   <div class="content">
+    <NotificationSettingsDialog ref="notificationSettingsDialog"/>
+
     <Section :title="$t('notifications.title')">
       <template #filter-bar>
         <ButtonGroup>
@@ -115,6 +123,7 @@ onMounted(async () => {
       </template>
       <template #header-buttons>
         <Button secondary @click="onMarkAllNotificationRead()" :loading="notificationsAllBusy" :disabled="notificationsAllBusy">{{ $t('notifications.markAllAsRead') }}</Button>
+        <Button @click="onOpenSettings" icon="fa fa-screwdriver-wrench" tool/>
       </template>
 
       <div class="notification-list">
diff --git a/dashboard/src/views/ProfileView.vue b/dashboard/src/views/ProfileView.vue
index 7d9bfbbe4..2f9382c97 100644
--- a/dashboard/src/views/ProfileView.vue
+++ b/dashboard/src/views/ProfileView.vue
@@ -4,7 +4,6 @@ import { ref, onMounted, useTemplateRef, inject } from 'vue';
 import { Button, SingleSelect, Dialog, TextInput, InputGroup, FormGroup } from '@cloudron/pankow';
 import { setLanguage } from '../i18n.js';
 import { TOKEN_TYPES } from '../constants.js';
-import NotificationSettings from '../components/NotificationSettings.vue';
 import AppPasswords from '../components/AppPasswords.vue';
 import SettingsItem from '../components/SettingsItem.vue';
 import EditableField from '../components/EditableField.vue';
@@ -262,7 +261,6 @@ onMounted(async () => {
       </div>
     </Section>
 
-    <NotificationSettings v-if="profile.isAtLeastAdmin"/>
     <AppPasswords/>
     <ApiTokens v-if="profile.isAtLeastAdmin"/>