Refactoring

src/client/ui/_common_/common.vue

@@ -15,7 +15,8 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { popups, uploads, pendingApiRequestsCount } from '@/os';
+import { stream, sound, popup, popups, uploads, pendingApiRequestsCount } from '@/os';
+import { store } from '@/store';
 
 export default defineComponent({
 	components: {
@@ -24,6 +25,27 @@ export default defineComponent({
 	},
 
 	setup() {
+		const onNotification = notification => {
+			if (store.state.i.mutingNotificationTypes.includes(notification.type)) return;
+
+			if (document.visibilityState === 'visible') {
+				stream.send('readNotification', {
+					id: notification.id
+				});
+
+				popup(import('@/components/toast.vue'), {
+					notification
+				}, {}, 'closed');
+			}
+
+			sound('notification');
+		};
+
+		if (store.getters.isSignedIn) {
+			const connection = stream.useSharedConnection('main', 'UI');
+			connection.on('notification', onNotification);
+		}
+
 		return {
 			uploads,
 			popups,

src/client/ui/deck.vue

@@ -63,7 +63,6 @@ export default defineComponent({
 			host: host,
 			pageInfo: null,
 			pageKey: 0,
-			connection: null,
 			menuDef: sidebarDef,
 			wallpaper: localStorage.getItem('wallpaper') != null,
 			faPlus, faPencilAlt, faChevronLeft, faBars, faCircle
@@ -107,11 +106,6 @@ export default defineComponent({
 		document.documentElement.style.overflowY = 'hidden';
 		document.documentElement.style.scrollBehavior = 'auto';
 		window.addEventListener('wheel', this.onWheel);
-
-		if (this.$store.getters.isSignedIn) {
-			this.connection = os.stream.useSharedConnection('main', 'UI');
-			this.connection.on('notification', this.onNotification);
-		}
 	},
 
 	mounted() {
@@ -143,23 +137,6 @@ export default defineComponent({
 			os.post();
 		},
 
-		onNotification(notification) {
-			if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) {
-				return;
-			}
-
-			if (document.visibilityState === 'visible') {
-				os.stream.send('readNotification', {
-					id: notification.id
-				});
-
-				os.popup(import('@/components/toast.vue'), {
-					notification
-				}, {}, 'closed');
-			}
-			os.sound('notification');
-		},
-
 		async addColumn(ev) {
 			const columns = [
 				'widgets',

src/client/ui/default.vue

@@ -91,7 +91,6 @@ export default defineComponent({
 			host: host,
 			pageKey: 0,
 			pageInfo: null,
-			connection: null,
 			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
 			menuDef: sidebarDef,
 			navHidden: false,
@@ -141,9 +140,6 @@ export default defineComponent({
 	created() {
 		document.documentElement.style.overflowY = 'scroll';
 
-		this.connection = os.stream.useSharedConnection('main', 'UI');
-		this.connection.on('notification', this.onNotification);
-
 		if (this.$store.state.deviceUser.widgets.length === 0) {
 			this.$store.commit('deviceUser/setWidgets', [{
 				name: 'calendar',
@@ -234,23 +230,6 @@ export default defineComponent({
 				}
 			}], e);
 		},
-
-		onNotification(notification) {
-			if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) {
-				return;
-			}
-			if (document.visibilityState === 'visible') {
-				os.stream.send('readNotification', {
-					id: notification.id
-				});
-
-				os.popup(import('@/components/toast.vue'), {
-					notification
-				}, {}, 'closed');
-			}
-
-			os.sound('notification');
-		},
 	}
 });
 </script>

src/client/ui/zen.vue

@@ -42,7 +42,6 @@ export default defineComponent({
 			host: host,
 			pageKey: 0,
 			pageInfo: null,
-			connection: null,
 			faLayerGroup, faBars, faBell, faHome, faCircle,
 		};
 	},
@@ -70,9 +69,6 @@ export default defineComponent({
 
 	created() {
 		document.documentElement.style.overflowY = 'scroll';
-
-		this.connection = os.stream.useSharedConnection('main', 'UI');
-		this.connection.on('notification', this.onNotification);
 	},
 
 	methods: {
@@ -94,23 +90,6 @@ export default defineComponent({
 		onTransition() {
 			if (window._scroll) window._scroll();
 		},
-
-		onNotification(notification) {
-			if (this.$store.state.i.mutingNotificationTypes.includes(notification.type)) {
-				return;
-			}
-			if (document.visibilityState === 'visible') {
-				os.stream.send('readNotification', {
-					id: notification.id
-				});
-
-				os.popup(import('@/components/toast.vue'), {
-					notification
-				}, {}, 'closed');
-			}
-
-			os.sound('notification');
-		},
 	}
 });
 </script>