Replace toast (sorry!) notifications with browser ones

Icons don't work in Safari just because they don't lmao

This is just barely tested, bear with me

packages/client/src/ui/_common_/common.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts" setup>
+import * as foundkey from 'foundkey-js';
 import { defineAsyncComponent, Ref, ref } from 'vue';
 import { swInject } from './sw-inject';
 import { popup as showPopup, popups, pendingApiRequestsCount } from '@/os';
@@ -24,12 +25,15 @@ import { uploads } from '@/scripts/upload';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { stream } from '@/stream';
+import { instance } from '@/instance';
+import { getNoteSummary } from '@/scripts/get-note-summary';
+import { acct } from '@/filters/user';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
 const XUpload = defineAsyncComponent(() => import('./upload.vue'));
 const dev: Ref<boolean> = ref(_DEV_);
 
-const onNotification = (notification: { type: string; id: any; }): void => {
+const onNotification = (notification: foundkey.entities.Notification): void => {
 	if ($i?.mutingNotificationTypes.includes(notification.type)) return;
 
 	if (document.visibilityState === 'visible') {
@@ -37,9 +41,55 @@ const onNotification = (notification: { type: string; id: any; }): void => {
 			id: notification.id,
 		});
 
-		showPopup(defineAsyncComponent(() => import('@/components/notification-toast.vue')), {
+		if (notification.type !== 'app') {
-			notification,
+			const user = notification.user;
-		}, {}, 'closed');
+			const userName = acct(user);
+			let title: string;
+			let body = 'note' in notification ? getNoteSummary(notification.note) : undefined;
+			switch (notification.type) {
+				case 'pollEnded':
+					title = `${userName}'s poll has ended`;
+					break;
+				case 'follow':
+					title = `${userName} followed you`;
+					break;
+				case 'followRequestAccepted':
+					title = `${userName} accepted your follow request`;
+					break;
+				case 'mention':
+					title = `${userName} mentioned you`;
+					break;
+				case 'pollVote':
+					title = `${userName} voted in your poll`;
+					break;
+				case 'quote':
+					title = `${userName} quoted your post`;
+					break;
+				case 'reaction':
+					title = `${userName} ${notification.reaction}ed your post`;
+					break;
+				case 'receiveFollowRequest':
+					title = `${userName} sent you a follow request`;
+					break;
+				case 'renote':
+					title = `${userName} renoted your post`;
+					break;
+				case 'reply':
+					title = `${userName} replied to your post`;
+					break;
+				case 'groupInvited':
+					title = `${userName} invited you to a group`;
+					break;
+			}
+
+			console.log(user, userName, title, body);
+			new Notification(title, {
+				body,
+				image: user.avatarUrl,
+				icon: instance.iconUrl,
+				// TODO: timestamp?
+			});
+		}
 	}
 
 	sound.play('notification');
@@ -48,6 +98,7 @@ const onNotification = (notification: { type: string; id: any; }): void => {
 if ($i) {
 	const connection = stream.useChannel('main', null, 'UI');
 	connection.on('notification', onNotification);
+	Notification.requestPermission();
 
 	//#region Listen message from SW
 	if ('serviceWorker' in navigator) {