fix: Enable dev tools in prod builds

apps/desktop/Cargo.toml

@@ -70,6 +70,6 @@ objc = { workspace = true }
 webkit2gtk = { workspace = true }
 
 [features]
-default = [ "custom-protocol" ]
+default = [ "custom-protocol", "devtools" ]
 devtools = [ "tauri/devtools" ]
 custom-protocol = [ "tauri/custom-protocol" ]

apps/desktop/src/api/commands/mod.rs

@@ -88,10 +88,18 @@ macro_rules! collect_commands {
 			get_featured_packages,
 			get_zulu_packages,
 			install_java_from_package,
+			open_dev_tools,
 		]
 	}};
 }
 
+#[specta::specta]
+#[tauri::command]
+pub fn open_dev_tools(_webview: tauri::WebviewWindow) {
+	#[cfg(feature = "devtools")]
+	_webview.open_devtools();
+}
+
 #[specta::specta]
 #[tauri::command]
 pub async fn get_zulu_packages() -> Result<Vec<onelauncher::java::JavaZuluPackage>, String> {

apps/frontend/src/ui/components/ErrorBoundary.tsx

@@ -1,25 +1,26 @@
 import type { ParentProps } from 'solid-js';
-import { ErrorBoundary as Boundary, Match, Switch } from 'solid-js';
+import { XIcon } from '@untitled-theme/icons-solid';
+import { ErrorBoundary as Boundary } from 'solid-js';
+import Button from './base/Button';
 
 function ErrorBoundary(props: ParentProps) {
 	return (
-		<Switch>
-			<Match when={import.meta.env.DEV !== true}>
-				<Boundary
-					fallback={err => (
-						<div class="border border-danger rounded-md bg-danger/20 p-2">
-							<h2>An unexpected error has occurred</h2>
+		<Boundary
+			fallback={(err, reset) => (
+				<div class="h-full w-full flex flex-1 items-center justify-center">
+					<div class="flex flex-row gap-4 border border-danger rounded-md bg-danger/30 p-4">
+						<div class="flex flex-1 flex-col gap-2">
+							<h2>Error</h2>
 							<p>{err.toString()}</p>
 						</div>
-					)}
-				>
-					{props.children}
-				</Boundary>
-			</Match>
-			<Match when>
-				{props.children}
-			</Match>
-		</Switch>
+
+						<Button buttonStyle="icon" children={<XIcon />} onClick={reset} />
+					</div>
+				</div>
+			)}
+		>
+			{props.children}
+		</Boundary>
 	);
 }
 

apps/frontend/src/ui/pages/settings/about/SettingsDeveloper.tsx

@@ -1,5 +1,6 @@
 import { useNavigate } from '@solidjs/router';
 import { CodeBrowserIcon, EyeIcon, GitMergeIcon, LinkExternal01Icon, PlusIcon, RefreshCcw05Icon } from '@untitled-theme/icons-solid';
+import { bridge } from '~imports';
 import Button from '~ui/components/base/Button';
 import Toggle from '~ui/components/base/Toggle';
 import ScrollableContainer from '~ui/components/ScrollableContainer';
@@ -30,6 +31,10 @@ function SettingsDeveloper() {
 		setNotiCounter(count => count + 1);
 	}
 
+	function openDevTools() {
+		bridge.commands.openDevTools();
+	}
+
 	return (
 		<Sidebar.Page>
 			<h1>Developer Options</h1>
@@ -43,6 +48,7 @@ function SettingsDeveloper() {
 					<Button
 						children="Open"
 						iconLeft={<LinkExternal01Icon />}
+						onClick={openDevTools}
 					/>
 				</SettingsRow>
 

apps/frontend/src/ui/pages/settings/launcher/SettingsAppearance.tsx

@@ -132,7 +132,7 @@ interface ThemeCardProps {
 
 function ThemeCard(props: ThemeCardProps) {
 	return (
-		<div class={`theme-${props.themeSelector}`} onClick={() => props.setTheme(props.themeSelector)}>
+		<div class={`h-min theme-${props.themeSelector}`} onClick={() => props.setTheme(props.themeSelector)}>
 			<svg fill="none" height="78" viewBox="0 0 126 78" width="126" xmlns="http://www.w3.org/2000/svg">
 				<rect fill="rgb(var(--clr-page))" height="78" rx="8" width="126" />
 				<rect height="77" rx="7.5" stroke="rgb(var(--clr-border))" stroke-opacity="0.1" width="125" x="0.5" y="0.5" />

packages/client/src/bindings.ts

@@ -584,6 +584,9 @@ export const commands = {
 			else return { status: 'error', error: e as any };
 		}
 	},
+	async openDevTools(): Promise<void> {
+		await TAURI_INVOKE('open_dev_tools');
+	},
 };
 
 /** user-defined events */