Added onboarding and fixed mods folder wrong location

frontend/src/windows/main/App.svelte

@@ -14,6 +14,7 @@
 	import { loadSettings } from './ts/settings';
 	import Updater from './util/Updater.svelte';
 	import Mods from './pages/Mods.svelte';
+	import Onboarding from './util/Onboarding.svelte';
 
 	let currentPage: string;
 
@@ -64,6 +65,7 @@
 </script>
 
 <main>
+	<Onboarding />
 	<Updater />
 	<ModeWatcher track={true} />
 	<Toaster richColors />

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

@@ -136,6 +136,5 @@
 	panel={panelOpts}
 	on:settingsChanged={(e) => {
 		settingsChanged(e.detail);
-		console.log(e.detail);
 	}}
 />

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

@@ -1,102 +1,102 @@
 <script lang="ts">
-	import type { SettingsPanel } from "@/types/settings";
-	import Panel from "./Settings/Panel.svelte";
-	import { os } from "@neutralinojs/lib";
-	import path from "path-browserify";
-	import { sleep } from "../ts/utils";
-	import { toast } from "svelte-sonner";
-	import { saveSettings } from "../ts/settings";
+	import type { SettingsPanel } from '@/types/settings';
+	import Panel from './Settings/Panel.svelte';
+	import { os } from '@neutralinojs/lib';
+	import path from 'path-browserify';
+	import { sleep } from '../ts/utils';
+	import { toast } from 'svelte-sonner';
+	import { saveSettings } from '../ts/settings';
 
 	function settingsChanged(o: { [key: string]: any }) {
-		saveSettings("mods", o);
+		saveSettings('mods', o);
 	}
 
 	async function onButtonClicked(e: CustomEvent) {
 		const buttonId = e.detail;
 		switch (buttonId) {
-			case "open_mods_folder":
+			case 'open_mods_folder':
 				try {
-					const folderPath = path.join(await os.getEnv("HOME"), "Library/AppleBlox/mods");
+					const folderPath = path.join(await os.getEnv('HOME'), 'Library', 'Application Support', 'AppleBlox/mods');
 					await os.execCommand(`mkdir -p "${folderPath}"`);
 					await sleep(10);
 					await os.execCommand(`open "${folderPath}"`);
 				} catch (err) {
-					toast.error("An error occured: " + err);
+					toast.error('An error occured: ' + err);
 					console.error(err);
 				}
 				break;
-			case "join_bloxstrap":
-				os.open("https://discord.gg/nKjV3mGq6R");
+			case 'join_bloxstrap':
+				os.open('https://discord.gg/nKjV3mGq6R');
 				break;
-			case "mods_help":
-				os.open("https://github.com/pizzaboxer/bloxstrap/wiki/Adding-custom-mods");
+			case 'mods_help':
+				os.open('https://github.com/pizzaboxer/bloxstrap/wiki/Adding-custom-mods');
 				break;
 		}
 	}
 
 	const panelOpts: SettingsPanel = {
-		name: "Mods",
-		description: "Textures and other enhancement for the Roblox app",
-		id: "mods",
+		name: 'Mods',
+		description: 'Textures and other enhancement for the Roblox app',
+		id: 'mods',
 		sections: [
 			{
-				name: "General",
+				name: 'General',
 				description:
 					"Options about Roblox mods. To install mods, simply drag the files and folder you downloaded into AppleBlox's mods folder. To find mods, join the Bloxstrap Discord server. DO NOT ask help about AppleBlox there.",
-				id: "general",
+				id: 'general',
 				interactables: [
 					{
-						label: "Open Mods folder",
-						description: "Opens the Mods folder in Finder",
-						id: "open_mods_folder",
+						label: 'Open Mods folder',
+						description: 'Opens the Mods folder in Finder',
+						id: 'open_mods_folder',
 						options: {
-							type: "button",
-							style: "default",
+							type: 'button',
+							style: 'default',
 						},
 					},
 					{
-						label: "Read the Mods Guide",
-						description: "Adding mods in AppleBlox is the same as Bloxstrap. You just have to put in the correct AppleBlox folders.",
-						id: "mods_help",
+						label: 'Read the Mods Guide',
+						description: 'Adding mods in AppleBlox is the same as Bloxstrap. You just have to put in the correct AppleBlox folders.',
+						id: 'mods_help',
 						options: {
-							type: "button",
-							style: "secondary",
+							type: 'button',
+							style: 'secondary',
 						},
 					},
 					{
-						label: "Join Bloxstrap Discord server",
-						description: "Opens the Discord server invitation link (go to the #mods channel)",
-						id: "join_bloxstrap",
+						label: 'Join Bloxstrap Discord server',
+						description: 'Opens the Discord server invitation link (go to the #mods channel)',
+						id: 'join_bloxstrap',
 						options: {
-							type: "button",
-							style: "outline",
+							type: 'button',
+							style: 'outline',
 						},
 					},
 					{
-						label: "Enable Mods",
-						description: "Enable/Disable your mods",
-						id: "enable_mods",
+						label: 'Enable Mods',
+						description: 'Enable/Disable your mods',
+						id: 'enable_mods',
 						options: {
-							type: "boolean",
+							type: 'boolean',
 							state: false,
 						},
 					},
 					{
-						label: "Fix Resolution",
-						description: "Maximizes the resolution when opening Roblox. This fixes some icons not showing in some cases.",
-						id: "spoof_res",
+						label: 'Fix Resolution',
+						description: 'Maximizes the resolution when opening Roblox. This fixes some icons not showing in some cases.',
+						id: 'spoof_res',
 						options: {
-							type: "boolean",
+							type: 'boolean',
 							state: true,
 						},
 					},
 					{
-						label: "Manage Mods",
-						description: "internal",
-						id: "mods_ui_space",
+						label: 'Manage Mods',
+						description: 'internal',
+						id: 'mods_ui_space',
 						hideTitle: true,
 						options: {
-							type: "mods_ui",
+							type: 'mods_ui',
 						},
 					},
 				],

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

@@ -9,7 +9,7 @@ import { showNotification } from '../notifications';
 export class RobloxMods {
 	/** Load mods from the AppleBlox/mods folder */
 	static async loadMods(): Promise<{ filename: string; path: string; state: boolean }[]> {
-		const modsFolder = path.join(await os.getEnv('HOME'), 'Library/AppleBlox/mods');
+		const modsFolder = path.join(await os.getEnv('HOME'), 'Library', 'Application Support', 'AppleBlox/mods');
 		if (!(await pathExists(modsFolder))) return [];
 		const entries = await filesystem.readDirectory(modsFolder, { recursive: false });
 		const mods = entries.filter((entry) => entry.type === 'DIRECTORY');

frontend/src/windows/main/util/Onboarding.svelte

@@ -1,3 +1,48 @@
 <script lang="ts">
+	import { loadSettings, saveSettings } from '../ts/settings';
+	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { os } from '@neutralinojs/lib';
 
-</script>
+	let settings = null;
+	let show = false;
+	loadSettings('onboarding').then((s) => {
+		if (s) {
+			settings = s;
+            if (s.show) {
+                show = true
+            }
+		} else {
+            saveSettings("onboarding",{show: true})
+            show = true
+            console.log(s)
+        }
+	});
+</script>
+
+<AlertDialog.Root bind:open={show}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Welcome to AppleBlox</AlertDialog.Title>
+			<AlertDialog.Description>
+				<p>We are thrilled to have you here! For starters, you should check out the <strong>Integrations & FastFlags </strong>tab.</p>
+				<p>If you want to add <strong>Mods</strong>, you should join the Bloxstrap Discord server from the mods tab.</p>
+				<br />
+				<p>
+					🌟 Don't forget to leave a <strong>Star</strong> on the <a href="https://github.com/OrigamingWasTaken/appleblox">GitHub repo</a> and join the
+					<a href="https://appleblox.com/discord">Discord Server</a>!
+				</p>
+				<p>Have fun :D</p>
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Read later</AlertDialog.Cancel>
+			<AlertDialog.Action
+				on:click={() => {
+					saveSettings('onboarding', { show: false });
+					show = false;
+				}}>Continue</AlertDialog.Action
+			>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>