feat(renderer): Zen mode (Esc exits, hides chrome)

This commit is contained in:
2026-06-06 08:13:38 +05:30
parent 8822c9a2f9
commit 1ccde4baa3
3 changed files with 83 additions and 0 deletions
@@ -11,13 +11,43 @@ import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/componen
import { useFileShortcuts } from '@/hooks/use-file-shortcuts';
import { useRestoreLastFolder } from '@/hooks/use-restore-last-folder';
import { useRegisterMenuCommands, useBridgeNativeMenu } from '@/lib/commands/register-menu-commands';
import { useZenMode } from '@/hooks/use-zen-mode';
export function AppShell() {
useFileShortcuts();
useRestoreLastFolder();
useRegisterMenuCommands();
useBridgeNativeMenu();
useZenMode();
const { sidebarVisible, previewVisible, paneSizes, setPaneSizes } = useAppStore();
const zenMode = useAppStore((s) => s.zenMode);
if (zenMode) {
return (
<main className="h-screen w-screen overflow-hidden bg-background">
<ResizablePanelGroup
direction="horizontal"
onLayout={(sizes) => setPaneSizes({ sidebar: 0, editor: sizes[0], preview: sizes[1] })}
>
<ResizablePanel defaultSize={previewVisible ? 50 : 100} minSize={20}>
<section className="h-full bg-background">
<EditorPane />
</section>
</ResizablePanel>
{previewVisible && (
<>
<ResizableHandle />
<ResizablePanel defaultSize={50} minSize={20}>
<section className="h-full border-l border-border bg-card/10">
<PreviewPane />
</section>
</ResizablePanel>
</>
)}
</ResizablePanelGroup>
</main>
);
}
return (
<div className="flex h-screen flex-col bg-background text-foreground">
+22
View File
@@ -0,0 +1,22 @@
import { useEffect } from 'react';
import { useAppStore } from '@/stores/app-store';
/**
* Mounts a global keydown listener that exits zen mode when the user
* presses Escape. Should be called once at the App root.
*/
export function useZenMode() {
const zenMode = useAppStore((s) => s.zenMode);
const setZenMode = useAppStore((s) => s.setZenMode);
useEffect(() => {
if (!zenMode) return;
const handler = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
setZenMode(false);
}
};
window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
}, [zenMode, setZenMode]);
}