hotkey pane

apps/desktop/CLAUDE.md

@@ -3,8 +3,6 @@ For Electron interprocess communnication, ALWAYS use trpc as defined in `src/lib
 Please use alias as defined in `tsconfig.json` when possible
 Prefer zustand for state management if it makes sense. Do not use effect unless absolutely necessary.
 
-
-
 # Code quality
 ```
 Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

apps/desktop/src/renderer/hooks/useGlobalShortcuts.ts

@@ -0,0 +1,158 @@
+import { useEffect, useMemo } from "react";
+import { createShortcutHandler } from "../lib/keyboard-shortcuts";
+import {
+	createSplitPaneShortcuts,
+	createTabShortcuts,
+	createWorkspaceShortcuts,
+} from "../lib/shortcuts";
+import { useSidebarStore } from "../stores/sidebar-state";
+import {
+	useActiveTabIds,
+	useAddTab,
+	useRemoveTab,
+	useSetActiveTab,
+	useSplitTabHorizontal,
+	useSplitTabVertical,
+	useTabs,
+} from "../stores/tabs";
+import { useWorkspacesStore } from "../stores/workspaces";
+
+function findWorkspaceIndex(
+	workspaces: Array<{ id: string }>,
+	id: string | null,
+) {
+	if (!id) return -1;
+	return workspaces.findIndex((w) => w.id === id);
+}
+
+function findTabIndex(tabs: Array<{ id: string }>, id: string | null) {
+	if (!id) return -1;
+	return tabs.findIndex((t) => t.id === id);
+}
+
+export function useGlobalShortcuts() {
+	const { workspaces, activeWorkspaceId, setActiveWorkspace } =
+		useWorkspacesStore();
+	const { toggleSidebar } = useSidebarStore();
+	const tabs = useTabs();
+	const activeTabIds = useActiveTabIds();
+	const setActiveTab = useSetActiveTab();
+	const addTab = useAddTab();
+	const removeTab = useRemoveTab();
+	const splitTabVertical = useSplitTabVertical();
+	const splitTabHorizontal = useSplitTabHorizontal();
+
+	const workspaceTabs = useMemo(() => {
+		if (!activeWorkspaceId) return [];
+		return tabs.filter(
+			(t) => t.workspaceId === activeWorkspaceId && !t.parentId,
+		);
+	}, [tabs, activeWorkspaceId]);
+
+	const activeTabId = activeWorkspaceId
+		? activeTabIds[activeWorkspaceId]
+		: null;
+
+	useEffect(() => {
+		const workspaceHandlers = {
+			switchToPrevWorkspace: () => {
+				if (!activeWorkspaceId) return;
+				const index = findWorkspaceIndex(workspaces, activeWorkspaceId);
+				if (index > 0) {
+					setActiveWorkspace(workspaces[index - 1].id);
+				}
+			},
+			switchToNextWorkspace: () => {
+				if (!activeWorkspaceId) return;
+				const index = findWorkspaceIndex(workspaces, activeWorkspaceId);
+				if (index < workspaces.length - 1) {
+					setActiveWorkspace(workspaces[index + 1].id);
+				}
+			},
+			toggleSidebar,
+			splitVertical: () => {
+				if (activeWorkspaceId) {
+					splitTabVertical(activeWorkspaceId);
+				}
+			},
+			splitHorizontal: () => {
+				if (activeWorkspaceId) {
+					splitTabHorizontal(activeWorkspaceId);
+				}
+			},
+		};
+
+		const tabHandlers = {
+			switchToPrevTab: () => {
+				if (!activeWorkspaceId || !activeTabId) return;
+				const index = findTabIndex(workspaceTabs, activeTabId);
+				if (index > 0) {
+					setActiveTab(activeWorkspaceId, workspaceTabs[index - 1].id);
+				}
+			},
+			switchToNextTab: () => {
+				if (!activeWorkspaceId || !activeTabId) return;
+				const index = findTabIndex(workspaceTabs, activeTabId);
+				if (index < workspaceTabs.length - 1) {
+					setActiveTab(activeWorkspaceId, workspaceTabs[index + 1].id);
+				}
+			},
+			newTab: () => {
+				if (activeWorkspaceId) {
+					addTab(activeWorkspaceId);
+				}
+			},
+			closeTab: () => {
+				if (activeTabId) {
+					removeTab(activeTabId);
+				}
+			},
+			reopenClosedTab: () => {
+				console.log("Reopen closed tab");
+			},
+			jumpToTab: (index: number) => {
+				if (!activeWorkspaceId) return;
+				const targetTab = workspaceTabs[index - 1];
+				if (targetTab) {
+					setActiveTab(activeWorkspaceId, targetTab.id);
+				}
+			},
+		};
+
+		const splitPaneHandlers = {
+			focusPaneLeft: () => console.log("Focus pane left"),
+			focusPaneRight: () => console.log("Focus pane right"),
+			focusPaneUp: () => console.log("Focus pane up"),
+			focusPaneDown: () => console.log("Focus pane down"),
+		};
+
+		const workspaceShortcuts = createWorkspaceShortcuts(workspaceHandlers);
+		const tabShortcuts = createTabShortcuts(tabHandlers);
+		const splitPaneShortcuts = createSplitPaneShortcuts(splitPaneHandlers);
+
+		const allShortcuts = [
+			...workspaceShortcuts.shortcuts,
+			...tabShortcuts.shortcuts,
+			...splitPaneShortcuts.shortcuts,
+		];
+
+		const handleKeyDown = createShortcutHandler(allShortcuts);
+		window.addEventListener("keydown", handleKeyDown);
+
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [
+		workspaces,
+		activeWorkspaceId,
+		workspaceTabs,
+		activeTabId,
+		setActiveWorkspace,
+		toggleSidebar,
+		setActiveTab,
+		addTab,
+		removeTab,
+		splitTabVertical,
+		splitTabHorizontal,
+	]);
+}

apps/desktop/src/renderer/lib/keyboard-shortcuts.ts

@@ -9,7 +9,7 @@ export interface KeyboardShortcut {
 	key: string;
 	modifiers?: ModifierKey[];
 	description: string;
-	handler: (event: KeyboardEvent) => boolean | void;
+	handler: (event: KeyboardEvent) => boolean;
 }
 
 export interface KeyboardShortcutGroup {

apps/desktop/src/renderer/lib/shortcuts.ts

@@ -12,8 +12,8 @@ export interface ShortcutHandlers {
 	switchToPrevWorkspace: () => void;
 	switchToNextWorkspace: () => void;
 	toggleSidebar: () => void;
-	createSplitView: () => void;
-	createVerticalSplit: () => void;
+	splitHorizontal: () => void;
+	splitVertical: () => void;
 
 	// Tab management
 	switchToPrevTab: () => void;
@@ -23,6 +23,12 @@ export interface ShortcutHandlers {
 	reopenClosedTab: () => void;
 	jumpToTab: (index: number) => void;
 
+	// Split pane navigation
+	focusPaneLeft: () => void;
+	focusPaneRight: () => void;
+	focusPaneUp: () => void;
+	focusPaneDown: () => void;
+
 	// Terminal specific
 	clearTerminal: () => void;
 	closeTerminal: () => void;
@@ -34,8 +40,8 @@ export function createWorkspaceShortcuts(
 		| "switchToPrevWorkspace"
 		| "switchToNextWorkspace"
 		| "toggleSidebar"
-		| "createSplitView"
-		| "createVerticalSplit"
+		| "splitVertical"
+		| "splitHorizontal"
 	>,
 ): KeyboardShortcutGroup {
 	return {
@@ -74,20 +80,20 @@ export function createWorkspaceShortcuts(
 			{
 				key: "d",
 				modifiers: ["meta"],
-				description: "Create split view (horizontal)",
+				description: "Split window vertically",
 				handler: (event) => {
 					event.preventDefault();
-					handlers.createSplitView();
+					handlers.splitVertical();
 					return false;
 				},
 			},
 			{
 				key: "d",
 				modifiers: ["meta", "shift"],
-				description: "Create split view (vertical)",
+				description: "Split window horizontally",
 				handler: (event) => {
 					event.preventDefault();
-					handlers.createVerticalSplit();
+					handlers.splitHorizontal();
 					return false;
 				},
 			},
@@ -159,7 +165,6 @@ export function createTabShortcuts(
 		},
 	];
 
-	// Add Cmd+1-9 shortcuts for jumping to tabs
 	for (let i = 1; i <= 9; i++) {
 		shortcuts.push({
 			key: i.toString(),
@@ -179,6 +184,59 @@ export function createTabShortcuts(
 	};
 }
 
+export function createSplitPaneShortcuts(
+	handlers: Pick<
+		ShortcutHandlers,
+		"focusPaneLeft" | "focusPaneRight" | "focusPaneUp" | "focusPaneDown"
+	>,
+): KeyboardShortcutGroup {
+	return {
+		name: "Split Pane Navigation",
+		shortcuts: [
+			{
+				key: "ArrowLeft",
+				modifiers: ["meta", "alt"],
+				description: "Focus left pane",
+				handler: (event) => {
+					event.preventDefault();
+					handlers.focusPaneLeft();
+					return false;
+				},
+			},
+			{
+				key: "ArrowRight",
+				modifiers: ["meta", "alt"],
+				description: "Focus right pane",
+				handler: (event) => {
+					event.preventDefault();
+					handlers.focusPaneRight();
+					return false;
+				},
+			},
+			{
+				key: "ArrowUp",
+				modifiers: ["meta", "alt"],
+				description: "Focus upper pane",
+				handler: (event) => {
+					event.preventDefault();
+					handlers.focusPaneUp();
+					return false;
+				},
+			},
+			{
+				key: "ArrowDown",
+				modifiers: ["meta", "alt"],
+				description: "Focus lower pane",
+				handler: (event) => {
+					event.preventDefault();
+					handlers.focusPaneDown();
+					return false;
+				},
+			},
+		],
+	};
+}
+
 export function createTerminalShortcuts(
 	handlers: Pick<ShortcutHandlers, "clearTerminal" | "closeTerminal">,
 ): KeyboardShortcutGroup {