Move notification settings to notifications view

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">

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"/>