93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
 
|
import { useEffect } from "react";
|
||
|
|
import { useAppState, isTerminalTab, tabKeyId } from "../store/appState";
|
||
|
|
import { useTerminal } from "./useTerminal";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* App-level shortcuts. Registered on `document` in the *capture* phase so they
|
||
|
|
* win over xterm.js, which would otherwise forward them to the shell inside
|
||
|
|
* the container.
|
||
|
|
*
|
||
|
|
* Ctrl+T new Claude terminal for the current project
|
||
|
|
* Ctrl+Shift+W close the active tab
|
||
|
|
* Ctrl+Tab next tab (Ctrl+Shift+Tab for previous)
|
||
|
|
* Ctrl+1..9 jump to the nth tab
|
||
|
|
*/
|
||
|
|
export function useKeyboardShortcuts() {
|
||
|
|
const { open: openTerminal, close: closeTerminal } = useTerminal();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
||
|
|
if (!e.ctrlKey || e.altKey || e.metaKey) return;
|
||
|
|
|
||
|
|
const state = useAppState.getState();
|
||
|
|
|
||
|
|
// Ctrl+Tab / Ctrl+Shift+Tab — cycle tabs
|
||
|
|
if (e.key === "Tab") {
|
||
|
|
if (state.tabOrder.length === 0) return;
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
state.cycleTab(e.shiftKey ? -1 : 1);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Ctrl+Shift+W — close the active tab.
|
||
|
|
//
|
||
|
|
// Deliberately NOT plain Ctrl+W: that is readline's `kill-word` (delete
|
||
|
|
// the previous word), used constantly inside the terminal that is this
|
||
|
|
// app's centerpiece. Swallowing it globally would break word-erase in
|
||
|
|
// every shell and in Claude Code's own prompt.
|
||
|
|
if (e.shiftKey && (e.key === "w" || e.key === "W")) {
|
||
|
|
const key = state.activeTabKey;
|
||
|
|
if (!key) return;
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
if (isTerminalTab(key)) {
|
||
|
|
closeTerminal(tabKeyId(key)).catch((err) =>
|
||
|
|
console.error("Failed to close terminal:", err),
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
state.closeHomeTab(tabKeyId(key));
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (e.shiftKey) return;
|
||
|
|
|
||
|
|
// Ctrl+1..9 — jump to tab
|
||
|
|
if (/^[1-9]$/.test(e.key)) {
|
||
|
|
const index = Number(e.key) - 1;
|
||
|
|
if (index >= state.tabOrder.length) return;
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
state.focusTabIndex(index);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Ctrl+T — new Claude terminal for the current project
|
||
|
|
if (e.key === "t" || e.key === "T") {
|
||
|
|
// Prefer the project owning the focused tab, then the sidebar selection.
|
||
|
|
const projectId =
|
||
|
|
state.sessions.find((s) => s.id === state.activeSessionId)?.projectId ??
|
||
|
|
state.selectedProjectId ??
|
||
|
|
null;
|
||
|
|
const project = state.projects.find((p) => p.id === projectId);
|
||
|
|
if (!project || project.status !== "running") return;
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
openTerminal(project.id, project.name).catch((err) => {
|
||
|
|
state.pushToast({
|
||
|
|
kind: "error",
|
||
|
|
message: `Could not open a terminal for “${project.name}”`,
|
||
|
|
detail: String(err),
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
document.addEventListener("keydown", onKeyDown, true);
|
||
|
|
return () => document.removeEventListener("keydown", onKeyDown, true);
|
||
|
|
}, [openTerminal, closeTerminal]);
|
||
|
|
}
|