Changed credits tab & fixed changelog window

frontend/src/windows/main/App.svelte

@@ -9,10 +9,10 @@
 	import Misc from './pages/Misc.svelte';
 	import { app, os, window as w } from '@neutralinojs/lib';
 	import { ModeWatcher, setMode } from 'mode-watcher';
-	import Credits from './pages/Credits.svelte';
+	import Informations from './pages/Informations.svelte';
 	import { launchRoblox } from './ts/roblox/launch';
 	import { loadSettings } from './ts/settings';
-	import Updater from './Updater.svelte';
+	import Updater from './util/Updater.svelte';
 	import Mods from './pages/Mods.svelte';
 
 	let currentPage: string;
@@ -43,7 +43,6 @@
 	// Sets the theme to the system's mode
 	setMode('system');
 
-	// Handle app links
 	document.addEventListener('click', (event) => {
 		if (!event.target) return;
 		// @ts-expect-error
@@ -101,9 +100,9 @@
 				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
 					<Misc />
 				</div>
-			{:else if currentPage === 'credits'}
+			{:else if currentPage === 'informations'}
 				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>
-					<Credits />
+					<Informations />
 				</div>
 			{:else if currentPage === 'mods'}
 				<div in:fly={{ y: -750, duration: 1000 }} out:fly={{ y: 400, duration: 400 }}>

frontend/src/windows/main/Sidebar/Sidebar.svelte

@@ -29,7 +29,7 @@
 		{ label: "Fast Flags", id: "fastflags", icon: FastFlagsIcon },
 		{ label: "Mods", id: "mods", icon: ModsIcon },
 		{ label: "Misc", id: "misc", icon: MiscIcon },
-		{ label: "Credits", id: "credits", icon: CreditsIcon },
+		{ label: "Info", id: "informations", icon: CreditsIcon },
 	];
 
 	export let currentPage: string = "integrations";

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import type { SettingsPanel } from '@/types/settings';
+	import Panel from './Settings/Panel.svelte';
+	import DiscordIcon from '@/assets/panel/discord.png';
+	import GithubIcon from '@/assets/panel/github.png';
+	import { os } from '@neutralinojs/lib';
+
+	function onButtonClicked(id: string) {
+		switch (id) {
+			case 'discord_btn':
+				os.open('https://appleblox.com/discord');
+				break;
+			case 'github_btn':
+				os.open('https://github.com/OrigamingWasTaken/appleblox');
+				break;
+		}
+	}
+
+	const devlist = `
+	<a href="https://github.com/OrigamingWasTaken">@OrigamingWasTaken</a> - Main Developper, currently the only one building AppleBlox.
+	`;
+	const testerlist = `
+	<a href="_blank">@KeyboardChampion, @YousufSSyed, @angrysausage</a> - People who have tested the app, and repported bugs.
+	`;
+
+	const panelOpts: SettingsPanel = {
+		name: 'Informations',
+		description: 'Useful resources, people that helped making the app and technologies used',
+		id: 'informations',
+		sections: [
+			{
+				name: 'Useful resources & support',
+				description: 'Links and guides for AppleBlox',
+				id: 'resources',
+				interactables: [
+					{
+						label: 'Join Discord server',
+						description: `appleblox.com/discord`,
+						id: 'discord_btn',
+						options: {
+							type: 'button',
+							icon: DiscordIcon,
+							style: 'default',
+						},
+					},
+					{
+						label: 'GitHub Repo',
+						description: `Takes you to the github repo`,
+						id: 'github_btn',
+						options: {
+							type: 'button',
+							icon: GithubIcon,
+							style: 'secondary',
+						},
+					},
+				],
+			},
+			{
+				name: 'Contributors',
+				description: 'The ones who make AppleBlox',
+				id: 'contributors',
+				interactables: [
+					{
+						label: 'Developpers',
+						description: devlist,
+						id: 'devs_list',
+						options: {
+							type: 'none',
+						},
+					},
+					{
+						label: 'Testers',
+						description: testerlist,
+						id: 'testers',
+						options: {
+							type: 'none',
+						},
+					},
+				],
+			},
+			{
+				name: 'Technologies',
+				description: 'Technologies used',
+				id: 'technologies',
+				interactables: [
+					{
+						label: 'NeutralinoJS - https://neutralino.js.org',
+						description: 'The framework used to access the filesystem, etc... and package html,js and css as an app.',
+						id: 'neutralino',
+						options: {
+							type: 'none',
+						},
+					},
+					{
+						label: 'Svelte - https://svelte.dev',
+						description: 'Framework used for the UI and frontend.',
+						id: 'svelte',
+						options: {
+							type: 'none',
+						},
+					},
+					{
+						label: 'Icons - https://icons8.com',
+						description: 'All the icons used in the app.',
+						id: 'icons',
+						options: {
+							type: 'none',
+						},
+					},
+				],
+			},
+			{
+				name: 'Inspirations',
+				description: 'People or projects that gave ideas for AppleBlox',
+				id: 'inspirations',
+				interactables: [
+					{
+						label: 'Bloxstrap - https://github.com/pizzaboxer/bloxstrap',
+						description: 'A Roblox launcher for Windows. This was the main inspiration for this app. Made by <a href="https://github.com/pizzaboxer">@pizzaboxer</a>',
+						id: 'devs_list',
+						options: {
+							type: 'none',
+						},
+					},
+				],
+			},
+		],
+	};
+</script>
+
+<Panel panel={panelOpts} on:buttonClicked={(e)=>{
+	onButtonClicked(e.detail)
+}}/>

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

@@ -0,0 +1,15 @@
+<script>
+	import { os } from '@neutralinojs/lib';
+
+	export let href = '';
+	export let title = undefined;
+</script>
+
+<a
+	href="_blank"
+	on:click={(e) => {
+        e.preventDefault()
+		os.open(href);
+	}}
+	{title}><slot></slot></a
+>

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

@@ -0,0 +1,3 @@
+<script lang="ts">
+
+</script>

frontend/src/windows/main/Updater.svelte → frontend/src/windows/main/util/Updater.svelte

@@ -1,34 +1,36 @@
 <script lang="ts">
-	import { version } from "../../../../package.json";
-	import { loadSettings, saveSettings } from "./ts/settings";
-	import { compareVersions, curlGet } from "./ts/utils";
-	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";
-	import SvelteMarkdown from "svelte-markdown";
+	import { version } from '../../../../../package.json'
+	import { loadSettings, saveSettings } from '../ts/settings';
+	import { compareVersions, curlGet } from '../ts/utils';
+	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';
+	import SvelteMarkdown from 'svelte-markdown';
+	import Link from './Link.svelte';
 
 	let showUpdatePopup = false;
 	let updateVersion = version;
-	let body = "";
+	let body = '';
 
 	async function checkForUpdate() {
-		const releases = await curlGet("https://api.github.com/repos/OrigamingWasTaken/appleblox/releases").catch(console.error);
-        if (releases.message) return;
+		const releases = await curlGet('https://api.github.com/repos/OrigamingWasTaken/appleblox/releases').catch(console.error);
+		if (releases.message) return;
 		for (const re of releases) {
 			if (compareVersions(re.tag_name, updateVersion) > 0) {
 				updateVersion = re.tag_name;
 				body = re.body;
+				console.log(body.replace);
 			}
 		}
 		if (updateVersion === version) return;
 		const compare = compareVersions(updateVersion, version);
 		if (compare > 0) {
-			console.log(`An update is available: ${updateVersion}`);
-			const settings = await loadSettings("updating");
+			console.log(`A release is available: ${updateVersion}`);
+			const settings = await loadSettings('updating');
 			if (settings) {
 				// Last asked date is newer than 7 days
-                const timeDiff = Math.round((Date.now() - settings.date) / (1000 * 3600 * 24))
-                console.log(timeDiff)
+				const timeDiff = Math.round((Date.now() - settings.date) / (1000 * 3600 * 24));
+				console.log(timeDiff);
 				if (timeDiff <= 7) return;
 				showUpdatePopup = true;
 			} else {
@@ -40,27 +42,27 @@
 
 	function getArch() {
 		switch (window.NL_ARCH as unknown as string) {
-			case "x64":
-				return "x64";
-			case "arm":
-				return "arm64";
+			case 'x64':
+				return 'x64';
+			case 'arm':
+				return 'arm64';
 		}
 	}
 </script>
 
 <AlertDialog.Root bind:open={showUpdatePopup}>
 	<AlertDialog.Content>
 		<AlertDialog.Header>
-			<AlertDialog.Title>A new update is available ({updateVersion})</AlertDialog.Title>
+			<AlertDialog.Title>A new release is available (v{updateVersion})</AlertDialog.Title>
 			<AlertDialog.Description>
-				<SvelteMarkdown source={body.replace(/(\[.*?\])\(https?:\/\/[^\s\)]+\)/g, "$1()")} options={{ gfm: true }} />
+				<SvelteMarkdown source={body.replace(/(\n\s*\n)+/g,"<br><br>")} options={{ gfm: true, breaks: true }} renderers={{ link: Link }} />
 			</AlertDialog.Description>
 		</AlertDialog.Header>
 		<AlertDialog.Footer>
 			<Button
 				variant="secondary"
 				on:click={() => {
-					saveSettings("updating", { date: Date.now() });
+					saveSettings('updating', { date: Date.now() });
 					showUpdatePopup = false;
 				}}>Do not ask again</Button
 			>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "appleblox",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "MacOS roblox launcher",
   "main": "frontend/src/windows/main/main.ts",
   "scripts": {