feat: enhance keyboard shortcut management and improve app responsiveness

- Updated the development script to include a build step before launching the app.
- Refactored the registration of quick ask and autocomplete functionalities to be asynchronous, ensuring proper initialization.
- Introduced IPC channels for getting and setting keyboard shortcuts, allowing users to customize their experience.
- Enhanced the platform module to support better interaction with the Electron API for clipboard operations.
- Improved the user interface for managing keyboard shortcuts in the settings dialog, providing a more intuitive experience.

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/DesktopContent.tsx

@@ -1,30 +1,54 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { Clipboard, Sparkles } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import {
+	DEFAULT_SHORTCUTS,
+	ShortcutRecorder,
+} from "@/components/desktop/shortcut-recorder";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Spinner } from "@/components/ui/spinner";
+import { useElectronAPI } from "@/hooks/use-platform";
 
 export function DesktopContent() {
-	const [isElectron, setIsElectron] = useState(false);
+	const api = useElectronAPI();
 	const [loading, setLoading] = useState(true);
 	const [enabled, setEnabled] = useState(true);
 
+	const [shortcuts, setShortcuts] = useState(DEFAULT_SHORTCUTS);
+	const [shortcutsLoaded, setShortcutsLoaded] = useState(false);
+
 	useEffect(() => {
-		if (!window.electronAPI) {
+		if (!api) {
 			setLoading(false);
+			setShortcutsLoaded(true);
 			return;
 		}
-		setIsElectron(true);
 
-		window.electronAPI.getAutocompleteEnabled().then((val) => {
-			setEnabled(val);
+		let mounted = true;
+
+		Promise.all([
+			api.getAutocompleteEnabled(),
+			api.getShortcuts?.() ?? Promise.resolve(null),
+		]).then(([autoEnabled, config]) => {
+			if (!mounted) return;
+			setEnabled(autoEnabled);
+			if (config) setShortcuts(config);
 			setLoading(false);
+			setShortcutsLoaded(true);
+		}).catch(() => {
+			if (!mounted) return;
+			setLoading(false);
+			setShortcutsLoaded(true);
 		});
-	}, []);
 
-	if (!isElectron) {
+		return () => { mounted = false; };
+	}, [api]);
+
+	if (!api) {
 		return (
 			<div className="flex flex-col items-center justify-center py-12 text-center">
 				<p className="text-sm text-muted-foreground">
@@ -44,11 +68,68 @@ export function DesktopContent() {
 
 	const handleToggle = async (checked: boolean) => {
 		setEnabled(checked);
-		await window.electronAPI!.setAutocompleteEnabled(checked);
+		await api.setAutocompleteEnabled(checked);
+	};
+
+	const updateShortcut = (key: "quickAsk" | "autocomplete", accelerator: string) => {
+		setShortcuts((prev) => {
+			const updated = { ...prev, [key]: accelerator };
+			api.setShortcuts?.({ [key]: accelerator }).catch(() => {
+				toast.error("Failed to update shortcut");
+			});
+			return updated;
+		});
+		toast.success("Shortcut updated");
+	};
+
+	const resetShortcut = (key: "quickAsk" | "autocomplete") => {
+		updateShortcut(key, DEFAULT_SHORTCUTS[key]);
 	};
 
 	return (
 		<div className="space-y-4 md:space-y-6">
+			{/* Keyboard Shortcuts */}
+			<Card>
+				<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
+					<CardTitle className="text-base md:text-lg">Keyboard Shortcuts</CardTitle>
+					<CardDescription className="text-xs md:text-sm">
+						Customize the global keyboard shortcuts for desktop features.
+					</CardDescription>
+				</CardHeader>
+				<CardContent className="px-3 md:px-6 pb-3 md:pb-6">
+					{shortcutsLoaded ? (
+						<div className="flex flex-col gap-3">
+							<ShortcutRecorder
+								value={shortcuts.quickAsk}
+								onChange={(accel) => updateShortcut("quickAsk", accel)}
+								onReset={() => resetShortcut("quickAsk")}
+								defaultValue={DEFAULT_SHORTCUTS.quickAsk}
+								label="Quick Ask"
+								description="Copy selected text and ask AI about it"
+								icon={Clipboard}
+							/>
+							<ShortcutRecorder
+								value={shortcuts.autocomplete}
+								onChange={(accel) => updateShortcut("autocomplete", accel)}
+								onReset={() => resetShortcut("autocomplete")}
+								defaultValue={DEFAULT_SHORTCUTS.autocomplete}
+								label="Autocomplete"
+								description="Get AI writing suggestions from a screenshot"
+								icon={Sparkles}
+							/>
+							<p className="text-[11px] text-muted-foreground">
+								Click a shortcut and press a new key combination to change it.
+							</p>
+						</div>
+					) : (
+						<div className="flex justify-center py-4">
+							<Spinner size="sm" />
+						</div>
+					)}
+				</CardContent>
+			</Card>
+
+			{/* Autocomplete Toggle */}
 			<Card>
 				<CardHeader className="px-3 md:px-6 pt-3 md:pt-6 pb-2 md:pb-3">
 					<CardTitle className="text-base md:text-lg">Autocomplete</CardTitle>