|
|
|
@@ -162,17 +162,21 @@ export const TerminalPage: React.FC = () => {
|
|
|
|
|
setActiveSessionId,
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
// Exit fullscreen on Escape
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (!isFullscreen) return;
|
|
|
|
|
const handleEscape = (e: KeyboardEvent) => {
|
|
|
|
|
if (e.key === "Escape") {
|
|
|
|
|
setIsFullscreen(false);
|
|
|
|
|
// Click outside terminal content/header to exit fullscreen
|
|
|
|
|
const handleFullscreenClick = useCallback(
|
|
|
|
|
(e: React.MouseEvent<HTMLElement>) => {
|
|
|
|
|
if (!isFullscreen) return;
|
|
|
|
|
const target = e.target as Node;
|
|
|
|
|
const current = e.currentTarget as HTMLElement;
|
|
|
|
|
const content = current.querySelector(".terminal-page-content");
|
|
|
|
|
const header = current.querySelector(".terminal-fullscreen-header");
|
|
|
|
|
if (content?.contains(target) || header?.contains(target)) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
window.addEventListener("keydown", handleEscape);
|
|
|
|
|
return () => window.removeEventListener("keydown", handleEscape);
|
|
|
|
|
}, [isFullscreen]);
|
|
|
|
|
setIsFullscreen(false);
|
|
|
|
|
},
|
|
|
|
|
[isFullscreen],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleSelect = useCallback(
|
|
|
|
|
(sessionId: string) => {
|
|
|
|
@@ -302,7 +306,10 @@ export const TerminalPage: React.FC = () => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<section className={`terminal-page ${isFullscreen ? "fullscreen" : ""}`}>
|
|
|
|
|
<section
|
|
|
|
|
className={`terminal-page ${isFullscreen ? "fullscreen" : ""}`}
|
|
|
|
|
onClick={handleFullscreenClick}
|
|
|
|
|
>
|
|
|
|
|
{!isFullscreen && (
|
|
|
|
|
<div className="terminal-page-header">
|
|
|
|
|
<button
|
|
|
|
|