use native/Tauri keybind to open settings

apps/desktop/src-tauri/src/menu.rs

@@ -6,10 +6,8 @@ use tauri::{
 };
 
 #[derive(Serialize, Clone)]
-pub struct DOMKeyboardEvent {
-	#[serde(rename = "metaKey")]
-	meta_key: bool,
-	key: String,
+pub struct DOMKeybindEvent {
+	action: String,
 }
 
 pub(crate) fn get_menu() -> Menu {
@@ -27,9 +25,7 @@ fn custom_menu_bar() -> Menu {
 		)) // TODO: fill out about metadata
 		.add_native_item(MenuItem::Separator)
 		.add_item(
-			// macOS 13 Ventura automatically changes "Preferences" to "Settings" for system-wide consistency.
-			// Use "Preferences" here to keep consistency on older versions
-			CustomMenuItem::new("open_settings".to_string(), "Preferences...")
+			CustomMenuItem::new("open_settings".to_string(), "Settings...")
 				.accelerator("CmdOrCtrl+Comma"),
 		)
 		.add_native_item(MenuItem::Separator)
@@ -97,10 +93,9 @@ pub(crate) fn handle_menu_event(event: WindowMenuEvent<Wry>) {
 		"open_settings" => event
 			.window()
 			.emit(
-				"do_keyboard_input",
-				DOMKeyboardEvent {
-					meta_key: true,
-					key: ",".into(),
+				"exec_keybind",
+				DOMKeybindEvent {
+					action: "open_settings".into(),
 				},
 			)
 			.unwrap(),
@@ -120,10 +115,9 @@ pub(crate) fn handle_menu_event(event: WindowMenuEvent<Wry>) {
 		"open_search" => event
 			.window()
 			.emit(
-				"do_keyboard_input",
-				DOMKeyboardEvent {
-					meta_key: true,
-					key: "l".into(),
+				"exec_keybind",
+				DOMKeybindEvent {
+					action: "open_search".into(),
 				},
 			)
 			.unwrap(),

apps/desktop/src/index.tsx

@@ -37,8 +37,8 @@ function App() {
 		os.platform().then((platform) => setPlatform(getPlatform(platform)));
 		invoke('app_ready');
 
-		const unlisten = listen('do_keyboard_input', (input) => {
-			document.dispatchEvent(new KeyboardEvent('keydown', input.payload as any));
+		const unlisten = listen('exec_keybind', (input) => {
+			document.dispatchEvent(new CustomEvent('exec_keybind', { detail: input.payload }));
 		});
 
 		return () => {
@@ -49,12 +49,10 @@ function App() {
 	useEffect(() => {
 		const focusListener = listen('tauri://focus', () => setFocused(true));
 		const blurListener = listen('tauri://blur', () => setFocused(false));
-		const settingsNavigateListener = listen('navigate_to_settings', () => undefined);
 
 		return () => {
 			focusListener.then((unlisten) => unlisten());
 			blurListener.then((unlisten) => unlisten());
-			settingsNavigateListener.then((unlisten) => unlisten());
 		};
 	}, []);
 

packages/interface/src/AppRouter.tsx

@@ -48,16 +48,16 @@ export function AppRouter() {
 	}, [libraryState, libraryState.currentLibraryUuid, libraries]);
 
 	useEffect(() => {
-		const handler = (e: KeyboardEvent) => {
-			if (e.metaKey && e.key === ',') {
+		const handleKeybind = (e: KeybindEvent) => {
+			if (e.detail.action === 'open_settings') {
 				navigate('/settings');
 				e.preventDefault();
 				return;
 			}
 		};
 
-		document.addEventListener('keydown', handler);
-		return () => document.removeEventListener('keydown', handler);
+		document.addEventListener('exec_keybind', handleKeybind);
+		return () => document.removeEventListener('exec_keybind', handleKeybind);
 	}, [navigate]);
 
 	return (