Add update check and simulation to debug page

Author: richiemcilroy

apps/desktop/src/routes/debug.tsx

@@ -1,8 +1,54 @@
+import { useNavigate } from "@solidjs/router";
 import { createQuery } from "@tanstack/solid-query";
-import { createUniqueId, For } from "solid-js";
+import { getVersion } from "@tauri-apps/api/app";
+import * as dialog from "@tauri-apps/plugin-dialog";
+import { check } from "@tauri-apps/plugin-updater";
+import { createSignal, createUniqueId, For, onMount } from "solid-js";
 import { commands } from "~/utils/tauri";
 
 export default function Debug() {
+	const navigate = useNavigate();
+	const [version, setVersion] = createSignal<string>("");
+	const [updateStatus, setUpdateStatus] = createSignal<string>("");
+	const [isChecking, setIsChecking] = createSignal(false);
+
+	onMount(async () => {
+		const v = await getVersion();
+		setVersion(v);
+	});
+
+	const checkForUpdates = async () => {
+		setIsChecking(true);
+		setUpdateStatus("Checking...");
+		try {
+			const update = await check();
+			if (update) {
+				setUpdateStatus(`Update available: v${update.version}`);
+			} else {
+				setUpdateStatus("No update available");
+			}
+		} catch (e) {
+			setUpdateStatus(`Error: ${e}`);
+		}
+		setIsChecking(false);
+	};
+
+	const simulateUpdatePopup = async () => {
+		const fakeVersion = "99.0.0";
+		setUpdateStatus(`Simulating update to v${fakeVersion}...`);
+
+		const shouldUpdate = await dialog.confirm(
+			`Version ${fakeVersion} of Cap is available, would you like to install it?`,
+			{ title: "Update Cap", okLabel: "Update", cancelLabel: "Ignore" },
+		);
+
+		if (shouldUpdate) {
+			navigate("/update");
+		} else {
+			setUpdateStatus("User declined update");
+		}
+	};
+
 	const fails = createQuery(() => ({
 		queryKey: ["fails"],
 		queryFn: () => commands.listFails(),
@@ -30,7 +76,37 @@ export default function Debug() {
 				</button>
 			</div>
 
-			<h2 class="text-2xl font-bold">Fail Points</h2>
+			<h2 class="text-2xl font-bold mt-4">Updates</h2>
+			<div class="p-2 mb-4">
+				<p class="mb-2 text-sm text-[--text-secondary]">
+					Current version: v{version()}
+				</p>
+				<div class="flex flex-row gap-2 items-center">
+					<button
+						class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded disabled:opacity-50"
+						onClick={checkForUpdates}
+						disabled={isChecking()}
+					>
+						Check for Updates
+					</button>
+					<button
+						class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded"
+						onClick={() => navigate("/update")}
+					>
+						Go to Update Page
+					</button>
+					<button
+						class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded disabled:opacity-50"
+						onClick={simulateUpdatePopup}
+						disabled={isChecking()}
+					>
+						Simulate Update Flow
+					</button>
+				</div>
+				{updateStatus() && <p class="mt-2 text-sm">{updateStatus()}</p>}
+			</div>
+
+			<h2 class="text-2xl font-bold mt-4">Fail Points</h2>
 			<ul class="p-2">
 				<For each={orderedFails()}>
 					{(fail) => {