Added new notifications system

frontend/src/windows/main/pages/Dev.svelte

@@ -2,9 +2,80 @@
 	import { LucideAArrowUp } from 'lucide-svelte';
 	import { SettingsPanelBuilder } from '../components/settings';
 	import Panel from '../components/settings/panel.svelte';
+	import { Notification } from '../ts/tools/notifications';
+	import { toast } from 'svelte-sonner';
 
 	export let render = true;
 
+	async function onButtonClick(e: CustomEvent) {
+		const { id } = e.detail as { id: string };
+		if (!id.endsWith('_notif')) return;
+		const action = id.split('_')[0];
+		switch (action) {
+			case 'normal': {
+				const notif = new Notification({
+					title: 'Hello world',
+					content: 'Hiiii :3',
+					contentImage: 'https://i.scdn.co/image/ab67616d00001e0227047720beaa8d2b4c236380',
+					closeLabel: 'Close now',
+					dropdownLabel: 'The menu thingy',
+					subtitle: 'une tuile',
+					sound: true,
+				});
+				notif.show();
+				notif.on('clicked', () => {
+					toast.info('Notif clicked');
+				});
+				break;
+			}
+			case 'reply': {
+				const notif = new Notification({
+					title: 'Reply notif',
+					content: 'aw hewl nah',
+					reply: true,
+				});
+				notif.show();
+				notif.on('clicked', () => {
+					toast.info('Notif clicked');
+				});
+				notif.on('replied', (reply) => {
+					toast.info(`Notif replied to: ${reply}`);
+				});
+				break;
+			}
+			case 'action': {
+				const notif = new Notification({
+					title: 'Action thingy',
+					content: 'kewl :D',
+					actions: [{label: "This", value: "this"},{label: "Aber", value: "aber"}, {label: "Schokolade", value: "chocolat"}]
+				});
+				notif.show();
+				notif.on('clicked', () => {
+					toast.info('Notif clicked');
+				});
+				notif.on('action', (action) => {
+					toast.info(`Notif action "${action.label}": "${action.value}"`);
+				});
+				break;
+			}
+			case 'timeout': {
+				const notif = new Notification({
+					title: 'Timeout clock',
+					content: 'This will be gone in 5 seconds',
+					timeout: 5,
+				});
+				notif.show();
+				notif.on('clicked', () => {
+					toast.info('Notif clicked');
+				});
+				notif.on('timeout', () => {
+					toast.info('Notification timeout');
+				});
+				break;
+			}
+		}
+	}
+
 	const devPanel = new SettingsPanelBuilder()
 		.setName('Dev Panel')
 		.setDescription('A panel to test dev things.')
@@ -86,10 +157,40 @@
 					},
 				})
 		)
+		.addCategory((category) =>
+			category
+				.setName('Notifications')
+				.setDescription('test notifs :3')
+				.setId('notifications')
+				.addButton({
+					label: 'Normal',
+					description: 'Normal notification',
+					id: 'normal_notif',
+					variant: 'outline',
+				})
+				.addButton({
+					label: 'Reply',
+					description: 'Reply notification',
+					id: 'reply_notif',
+					variant: 'outline',
+				})
+				.addButton({
+					label: 'Action',
+					description: 'Action notification',
+					id: 'action_notif',
+					variant: 'outline',
+				})
+				.addButton({
+					label: 'Timeout',
+					description: 'Timeout notification',
+					id: 'timeout_notif',
+					variant: 'outline',
+				})
+		)
 		.build();
 </script>
 
 <div>
-	<Panel panel={devPanel} {render} />
+	<Panel panel={devPanel} {render} on:button={onButtonClick}/>
 	<h2>Args: "{window.NL_ARGS}"</h2>
 </div>

frontend/src/windows/main/ts/roblox/events.ts

@@ -1,7 +1,7 @@
 import { computer } from '@neutralinojs/lib';
 import Roblox from '.';
 import { getValue } from '../../components/settings';
-import { showNotification } from '../tools/notifications';
+import { Notification } from '../tools/notifications';
 import { RPCController, type RPCOptions } from '../tools/rpc';
 import { shell } from '../tools/shell';
 import { curlGet, sleep } from '../utils';
@@ -153,12 +153,12 @@ export default async function onGameEvent(data: GameEventInfo) {
 					const ipReq: IPResponse = await curlGet(`https://ipinfo.io/${server[0]}/json`);
 					console.info(`[Activity] Server is located in "${ipReq.city}"`);
 
-					showNotification({
+					new Notification({
 						content: `Your server is located in ${ipReq.city}, ${ipReq.region}, ${ipReq.country}`,
 						title: 'Server Joined',
 						timeout: 5,
 						sound: false,
-					});
+					}).show();
 				}
 				break;
 			}

frontend/src/windows/main/ts/roblox/fflags.ts

@@ -6,7 +6,7 @@ import { getAllProfiles, getSelectedProfile, type Profile } from '../../componen
 import { getConfigPath, getValue, loadSettings } from '../../components/settings';
 import type { SelectElement, SettingsOutput } from '../../components/settings/types';
 import shellFS from '../tools/shellfs';
-import { showNotification } from '../tools/notifications';
+import { Notification } from '../tools/notifications';
 
 export type FastFlag = string | boolean | null | number;
 export type FFs = { [key: string]: FastFlag };
@@ -225,6 +225,7 @@ async function buildFlagsList(): Promise<FastFlagsList> {
 				/* v2 */ FFlagDisableNewIGMinDUA: false,
 				FFlagEnableInGameMenuModernization: false,
 				/* Chrome */ FFlagEnableInGameMenuChrome: false,
+				FFlagFixReportButtonCutOff: false,
 			},
 			path: 'fastflags.ui.menu_version',
 			type: 'select',
@@ -286,11 +287,11 @@ async function buildFlagsList(): Promise<FastFlagsList> {
 
 	// Actions
 	if (data.forceVulkan === true) {
-		showNotification({
+		new Notification({
 			title: 'Renderer defaulted to Vulkan',
 			content: "Vulkan has been automatically enabled because you set a higher FPS cap than your monitor's refresh rate.",
 			timeout: 7,
-		});
+		}).show();
 	}
 
 	return flags;

frontend/src/windows/main/ts/roblox/launch.ts

@@ -3,7 +3,7 @@ import path from 'path-browserify';
 import { toast } from 'svelte-sonner';
 import Roblox from '.';
 import { getValue } from '../../components/settings';
-import { showNotification } from '../tools/notifications';
+import { Notification } from '../tools/notifications';
 import { RPCController } from '../tools/rpc';
 import { shell } from '../tools/shell';
 import shellFS from '../tools/shellfs';
@@ -148,11 +148,11 @@ export async function launchRoblox(
 						.trim()
 						.split(' ');
 					await Roblox.Window.setDesktopRes(maxRes[0], maxRes[2], 5);
-					showNotification({
+					new Notification({
 						title: 'Resolution changed',
 						content: "Your resolution was temporarily changed (5s) by the 'Fix Resolution' setting.",
 						timeout: 10,
-					});
+					}).show();
 				}
 				const robloxInstance = new RobloxInstance(true);
 				await robloxInstance.init();

frontend/src/windows/main/ts/roblox/mods.ts

@@ -3,7 +3,7 @@ import path from 'path-browserify';
 import { toast } from 'svelte-sonner';
 import Roblox from '.';
 import { getValue } from '../../components/settings';
-import { showNotification } from '../tools/notifications';
+import { Notification } from '../tools/notifications';
 import shellFS from '../tools/shellfs';
 import { sleep } from '../utils';
 
@@ -56,24 +56,24 @@ export class RobloxMods {
 
 		if (!(await shellFS.exists(resBackupFolder))) {
 			toast.error("The 'Resources' backup hasn't been found. Mods will not be removed.");
-			showNotification({
+			new Notification({
 				title: 'Error while removing mods',
 				content: "The 'Resources' backup hasn't been found. Mods will not be removed.",
 				sound: true,
 				timeout: 6,
-			});
+			}).show();
 			return;
 		}
 
 		await shellFS.remove(resourcesFolder);
 		await shellFS.copy(resBackupFolder, resourcesFolder, true);
 		await shellFS.remove(resBackupFolder);
 
-		showNotification({
+		new Notification({
 			title: 'Resources restored',
 			content: 'Roblox has been cleaned of any Mods remnants..',
 			timeout: 5,
-		});
+		}).show();
 		await sleep(100);
 	}