Resolve #5978

src/client/pages/notifications.vue

@@ -0,0 +1,42 @@
+<template>
+<div>
+	<portal to="icon"><fa :icon="faBell"/></portal>
+	<portal to="title">{{ $t('notifications') }}</portal>
+	<x-notifications @before="before" @after="after" page/>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faBell } from '@fortawesome/free-solid-svg-icons';
+import Progress from '../scripts/loading';
+import XNotifications from '../components/notifications.vue';
+
+export default Vue.extend({
+	metaInfo() {
+		return {
+			title: this.$t('notifications') as string
+		};
+	},
+
+	components: {
+		XNotifications
+	},
+
+	data() {
+		return {
+			faBell
+		};
+	},
+
+	methods: {
+		before() {
+			Progress.start();
+		},
+
+		after() {
+			Progress.done();
+		}
+	}
+});
+</script>

src/client/pages/settings/index.vue

@@ -20,7 +20,8 @@
 				{{ $t('useOsNativeEmojis') }}
 				<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 			</mk-switch>
-			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>			
+			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
+			<mk-switch v-model="useNotificationsPopup">{{ $t('useNotificationsPopup') }}</mk-switch>
 		</div>
 		<div class="_content">
 			<mk-select v-model="lang">
@@ -111,6 +112,11 @@ export default Vue.extend({
 			get() { return this.$store.state.device.showFixedPostForm; },
 			set(value) { this.$store.commit('device/set', { key: 'showFixedPostForm', value }); }
 		},
+
+		useNotificationsPopup: {
+			get() { return this.$store.state.device.useNotificationsPopup; },
+			set(value) { this.$store.commit('device/set', { key: 'useNotificationsPopup', value }); }
+		},
 	},
 
 	watch: {