Adamcake · Adamcake · Sep 28, 2025 · Sep 13, 2025 · Sep 13, 2025 · Sep 13, 2025
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .cache
-.vscode/settings.json
+.vscode
+build
 DawnCache
 GPUCache
diff --git a/app/.eslintrc.cjs b/app/.eslintrc.cjs
@@ -28,9 +28,13 @@ module.exports = {
 			}
 		}
 	],
-	// this rule is for naming conventions, such as snake_case or camelCase enforcement
-	// rules: {
-	// 	'@typescript-eslint/naming-convention': 'error'
-	// },
+	rules: {
+		'@typescript-eslint/no-unused-vars': [
+			'error',
+			{
+				caughtErrors: 'none'
+			}
+		]
+	},
 	ignorePatterns: ['dist/', '*.cjs']
 };
diff --git a/app/.gitignore b/app/.gitignore
@@ -12,7 +12,7 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/settings.json
+.vscode
 .idea
 .DS_Store
 *.suo

diff --git a/app/.vscode/extensions.json b/app/.vscode/extensions.json
diff --git a/app/bun.lockb b/app/bun.lockb
diff --git a/app/dist/assets/index-BA5wxT7c.css b/app/dist/assets/index-BA5wxT7c.css
diff --git a/app/dist/assets/index-BhbsQGn9.js b/app/dist/assets/index-BhbsQGn9.js
diff --git a/app/dist/assets/index-DJYOLyXH.js b/app/dist/assets/index-DJYOLyXH.js
diff --git a/app/dist/assets/index-DZ9bIuuF.css b/app/dist/assets/index-DZ9bIuuF.css
diff --git a/app/dist/index.html b/app/dist/index.html
@@ -4,8 +4,8 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Bolt Launcher</title>
-		<script type="module" crossorigin src="/assets/index-DJYOLyXH.js"></script>
-		<link rel="stylesheet" crossorigin href="/assets/index-DZ9bIuuF.css">
+		<script type="module" crossorigin src="/assets/index-BhbsQGn9.js"></script>
+		<link rel="stylesheet" crossorigin href="/assets/index-BA5wxT7c.css">
 	</head>
 	<body>
 		<div class="h-full" id="app"></div>

diff --git a/app/package.json b/app/package.json
@@ -2,25 +2,25 @@
 	"name": "vite_app",
 	"version": "0.0.0",
 	"devDependencies": {
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@tsconfig/svelte": "^5.0.2",
-		"autoprefixer": "^10.4.19",
-		"eslint": "^8.57.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"postcss": "^8.4.38",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"prettier-plugin-tailwindcss": "^0.5.13",
-		"svelte": "^4.2.12",
-		"svelte-check": "^3.6.7",
-		"tailwindcss": "^3.4.4",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.3",
-		"typescript-eslint": "^7.4.0",
-		"vite": "^5.2.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tsconfig/svelte": "^5.0.5",
+		"autoprefixer": "^10.4.21",
+		"eslint": "^8.57.1",
+		"eslint-config-prettier": "^9.1.2",
+		"eslint-plugin-svelte": "^2.46.1",
+		"postcss": "^8.5.6",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.5.14",
+		"svelte": "^5.39.6",
+		"svelte-check": "^4.3.2",
+		"tailwindcss": "^3.4.17",
+		"tslib": "^2.8.1",
+		"typescript": "^5.9.2",
+		"typescript-eslint": "^7.18.0",
+		"vite": "^7.1.7",
 		"vite-tsconfig-paths": "^4.3.2",
-		"vitest": "^1.2.0"
+		"vitest": "^3.2.4"
 	},
 	"private": true,
 	"scripts": {
@@ -35,5 +35,9 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write ."
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@typescript-eslint/eslint-plugin": "^8.44.1",
+		"@typescript-eslint/parser": "^8.44.1"
+	}
 }
diff --git a/app/src/AuthApp.svelte b/app/src/AuthApp.svelte
@@ -3,7 +3,7 @@
 	import { AuthService, type AuthTokens } from '$lib/Services/AuthService';
 	import { CookieService } from '$lib/Services/CookieService';
 	import { bolt } from '$lib/State/Bolt';
-	import type { BoltMessage } from '$lib/Util/interfaces';
+	import type { BoltMessage } from '$lib/Util/Interfaces';
 	import { onDestroy, onMount } from 'svelte';
 
 	const parentWindow = window.opener as {

diff --git a/app/src/BoltApp.svelte b/app/src/BoltApp.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import DisclaimerModal from '$lib/Components/DisclaimerModal.svelte';
+	import DisclaimerModal from '$lib/Components/Modals/DisclaimerModal.svelte';
 	import Launch from '$lib/Components/Launch.svelte';
 	import LogView from '$lib/Components/LogView.svelte';
 	import MainLayout from '$lib/Components/MainLayout.svelte';
@@ -12,7 +12,7 @@
 </script>
 
 <svelte:window
-	on:beforeunload={() => {
+	onbeforeunload={() => {
 		BoltService.saveConfig();
 		if (bolt.hasBoltPlugins) BoltService.savePluginConfig(true);
 	}}

diff --git a/app/src/lib/Components/AccountDropdownContent.svelte b/app/src/lib/Components/AccountDropdownContent.svelte
@@ -21,7 +21,7 @@
 <div class="mt-5 flex">
 	<button
 		class="mx-auto mr-2 rounded-lg bg-blue-500 p-2 font-bold text-black duration-200 hover:opacity-75"
-		on:click={() => {
+		onclick={() => {
 			const { origin, redirect, clientid } = bolt.env;
 			AuthService.openLoginWindow(origin, redirect, clientid);
 		}}
@@ -31,7 +31,7 @@
 	<button
 		class="mx-auto rounded-lg border-2 border-blue-500 p-2 font-bold duration-200 hover:opacity-75"
 		disabled={!$config.selected.user_id}
-		on:click={async () => {
+		onclick={async () => {
 			if (!$config.selected.user_id) return;
 			await BoltService.logout($config.selected.user_id);
 			BoltService.saveCredentials();

diff --git a/app/src/lib/Components/CommonUI/Dropdown.svelte b/app/src/lib/Components/CommonUI/Dropdown.svelte
@@ -1,13 +1,27 @@
 <script lang="ts">
+	import { GlobalState } from '$lib/State/GlobalState';
 	import clickOutside from '$lib/Util/ClickOutside';
 
-	let className = '';
-	export { className as class };
-	export let position: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
-	export let align: 'start' | 'center' | 'end' = 'start';
+	const { config } = GlobalState;
+	let darkTheme = $derived($config.use_dark_theme);
 
-	let isOpen = false;
-	let openButton: HTMLButtonElement;
+	interface Props {
+		class?: string;
+		position?: 'top' | 'right' | 'bottom' | 'left';
+		align?: 'start' | 'center' | 'end';
+		children?: import('svelte').Snippet;
+		content?: import('svelte').Snippet;
+	}
+	let {
+		class: className = '',
+		position = 'bottom',
+		align = 'start',
+		children,
+		content
+	}: Props = $props();
+
+	let isOpen = $state(false);
+	let openButton: HTMLButtonElement | undefined = $state();
 
 	export function open() {
 		isOpen = true;
@@ -18,19 +32,20 @@
 	}
 
 	function toggle() {
-		isOpen ? close() : open();
+		if (isOpen) close();
+		else open();
 	}
 </script>
 
-<div class="relative h-fit w-fit {className}">
-	<button bind:this={openButton} on:click={toggle}><slot /></button>
+<div class:dark={darkTheme} class="relative h-fit w-fit {className}">
+	<button bind:this={openButton} onclick={toggle}>{@render children?.()}</button>
 
 	{#if isOpen}
 		<div
 			class="dropdown-color absolute z-20 rounded-lg border-2 {position} {align}"
 			use:clickOutside={{ callback: close, ignore: [openButton] }}
 		>
-			<slot name="content" />
+			{@render content?.()}
 		</div>
 	{/if}
 </div>

diff --git a/app/src/lib/Components/CommonUI/Modal.svelte b/app/src/lib/Components/CommonUI/Modal.svelte
@@ -1,50 +1,61 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	import { GlobalState } from '$lib/State/GlobalState';
 
-	let className = '';
-	export { className as class };
-	export let canSelfClose = true;
+	const { config } = GlobalState;
+	let darkTheme = $derived($config.use_dark_theme);
+
+	interface Props {
+		class?: string;
+		canSelfClose?: boolean;
+		onClose?: () => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		class: className = '',
+		canSelfClose = true,
+		onClose = () => {},
+		children
+	}: Props = $props();
 
 	let dialog: HTMLDialogElement;
-	let isOpen = false;
-	const dispatch = createEventDispatcher<{ close: undefined }>();
+	let isOpen = $state(false);
 
 	export function open() {
 		dialog.showModal();
 		isOpen = true;
 	}
 
 	export function close() {
-		dispatch('close');
+		onClose();
 		dialog.close();
 		isOpen = false;
 	}
 </script>
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
 	bind:this={dialog}
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if (e.key !== 'Escape') return;
 		e.preventDefault();
 		if (canSelfClose) close();
 	}}
-	on:mousedown|self={() => {
-		if (canSelfClose) close();
+	onmousedown={(e: MouseEvent) => {
+		if (dialog === (e.target as Node)) close();
 	}}
-	class:backdrop:cursor-pointer={canSelfClose}
+	class:dark={darkTheme}
 	class="{className} backdrop max-h-[90%] max-w-[90%] overflow-auto rounded-xl text-inherit focus-visible:outline-none"
 >
 	{#if canSelfClose}
 		<button
 			class="absolute right-3 top-3 rounded-full bg-rose-500 p-[2px] shadow-lg duration-200 hover:rotate-90 hover:opacity-75"
-			on:click={close}
+			onclick={close}
 		>
 			<img src="svgs/xmark-solid.svg" class="h-5 w-5" alt="Close" />
 		</button>
 	{/if}
 	{#if isOpen}
-		<slot />
+		{@render children?.()}
 	{/if}
 </dialog>
 

diff --git a/app/src/lib/Components/Launch.svelte b/app/src/lib/Components/Launch.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import PluginModal from '$lib/Components/PluginModal.svelte';
 	import { BoltService } from '$lib/Services/BoltService';
 	import { bolt, Platform } from '$lib/State/Bolt';
 	import { GlobalState } from '$lib/State/GlobalState';
@@ -8,23 +7,24 @@
 		launchOfficialClient,
 		launchRS3Linux,
 		launchRuneLite
-	} from '$lib/Util/functions';
-	import { Client, clientMap, Game } from '$lib/Util/interfaces';
+	} from '$lib/Util/Functions';
+	import { Client, clientMap, Game } from '$lib/Util/Interfaces';
 	import { logger } from '$lib/Util/Logger';
 	import { writable, type Writable } from 'svelte/store';
-	import LaunchConfirmModal from './LaunchConfirmModal.svelte';
+	import LaunchConfirmModal from './Modals/LaunchConfirmModal.svelte';
+	import PluginModal from './Modals/PluginModal.svelte';
 
 	let confirmModal: LaunchConfirmModal;
 	let pluginModal: PluginModal;
 	let { config, initialized } = GlobalState;
-	$: selectedUserId = $config.selected.user_id;
-	$: selectedAccountId = $config.userDetails[selectedUserId ?? '']?.account_id;
-	$: accounts = BoltService.findSession($config.selected.user_id)?.accounts ?? [];
+	let selectedUserId = $derived($config.selected.user_id);
+	let selectedAccountId = $derived($config.userDetails[selectedUserId ?? '']?.account_id);
+	let accounts = $derived(BoltService.findSession($config.selected.user_id)?.accounts ?? []);
 
 	// messages about game downtime, retrieved from game server
 	let psa: Writable<string | null> = writable(null);
 	let gameEnabled: Writable<boolean> = writable(true);
-	$: {
+	$effect(() => {
 		if ($config.check_announcements) {
 			const gameName = $config.selected.game == Game.osrs ? 'osrs' : bolt.env.provider;
 			const url: string = `${bolt.env.psa_url}${gameName}/${gameName}.json`;
@@ -40,7 +40,7 @@
 			$psa = null;
 			$gameEnabled = true;
 		}
-	}
+	});
 
 	// when play is clicked, check the selected_play store for all relevant details
 	// calls the appropriate launch functions
@@ -101,9 +101,7 @@
 </script>
 
 <LaunchConfirmModal bind:this={confirmModal}></LaunchConfirmModal>
-{#if bolt.hasBoltPlugins}
-	<PluginModal bind:this={pluginModal}></PluginModal>
-{/if}
+<PluginModal bind:this={pluginModal}></PluginModal>
 
 <div class="bg-grad flex h-full flex-col border-slate-300 p-5 duration-200 dark:border-slate-800">
 	{#if $psa}
@@ -120,7 +118,7 @@
 		<button
 			class="w-52 rounded-lg bg-emerald-500 p-2 font-bold text-black duration-200 enabled:hover:opacity-75 disabled:bg-gray-500"
 			disabled={!$initialized}
-			on:click={() => {
+			onclick={() => {
 				if ($gameEnabled) {
 					launch($config.selected.game, $config.selected.client);
 				} else {
@@ -148,7 +146,7 @@
 				disabled={!bolt.hasBoltPlugins}
 				title={bolt.hasBoltPlugins ? null : 'This feature is disabled'}
 				class="w-52 rounded-lg p-2 font-bold text-black duration-200 enabled:bg-blue-500 enabled:hover:opacity-75 disabled:bg-gray-500"
-				on:click={() => {
+				onclick={() => {
 					pluginModal.open();
 				}}
 			>
@@ -162,7 +160,7 @@
 				class="mx-auto w-52 cursor-pointer rounded-lg border-2 border-slate-300 bg-inherit p-2 text-inherit duration-200 hover:opacity-75 dark:border-slate-800"
 				disabled={!$initialized || $config.selected.user_id === null}
 				value={selectedAccountId}
-				on:change={handleAccountChange}
+				onchange={handleAccountChange}
 			>
 				<option value={undefined} disabled class="dark:bg-slate-900">Select an account</option>
 				{#each accounts as account}

diff --git a/app/src/lib/Components/LogView.svelte b/app/src/lib/Components/LogView.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Severity, type Log } from '$lib/Util/Logger';
 
-	export let logs: Log[];
+	interface Props {
+		logs: Log[];
+	}
+
+	let { logs }: Props = $props();
 </script>
 
 <div
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ dist-ssr @@
     *.local
     # Editor directories and files
-    .vscode/settings.json
+    .vscode
     .idea
     .DS_Store
     *.suo
@@ Expand Down @@