Jean uses a cross-platform native menu system that integrates with keyboard shortcuts and the command system. The architecture follows a three-tier pattern to connect native OS menus to React-based application logic:
- Rust Menu Definition: Menus are constructed in the Tauri backend using
SubmenuBuilder, MenuItemBuilder, and PredefinedMenuItem. Each custom item is assigned a unique ID. - Event Handling Pattern: When a menu item is clicked, the Rust backend catches the event via
app.on_menu_event. The backend then emits a specific event to the frontend using app.emit("menu-{id}", ()). - React Event Listeners: The frontend listens for these emitted events using the
listen function (from Tauri's API) to trigger application logic, such as opening dialogs or updating UI state.
Note: For items with user-configurable shortcuts (like View or Git menus), accelerators are intentionally omitted from the menu definition to avoid displaying stale or incorrect keybindings.
// 1. Define in Rust
let app_submenu = SubmenuBuilder::new(app, "Jean")
.item(&MenuItemBuilder::with_id("about", "About Jean").build(app)?)
.build()?;
// 2. Emit event in Rust
app.on_menu_event(move |app, event| {
match event.id().as_ref() {
"about" => { let _ = app.emit("menu-about", ()); }
_ => {}
}
});
// 3. Listen in React
listen('menu-about', async () => {
// App logic here
});
