Focus Mode

<div
  className={`transition-all duration-500 ease-out overflow-hidden ${
    !sidebarVisible || focusMode
      ? "opacity-0 -translate-x-4 w-0 pointer-events-none"
      : "opacity-100 translate-x-0 w-64"
  }`}
>
  <Sidebar />
</div>

<div
  className={`titlebar-no-drag flex items-center gap-1 min-w-0 transition-opacity duration-1000 delay-500 ${
    focusMode ? "opacity-0 pointer-events-none" : "opacity-100"
  }`}
>
  {/* Toolbar buttons */}
</div>

<div
  className={`${
    focusMode || sourceMode
      ? "opacity-0 max-h-0 overflow-hidden pointer-events-none"
      : "opacity-100 max-h-20"
  } ${hasTransitioned ? "transition-all duration-1000 delay-500" : ""}`}
>
  <FormatBar />
</div>

const [focusMode, setFocusMode] = useState(false);

const toggleFocusMode = useCallback(() => {
  setFocusMode((prev) => {
    // Don't enter focus mode without a selected note
    if (!prev && !selectedNoteId) return prev;
    if (prev) {
      // Exiting focus mode — always restore sidebar
      setSidebarVisible(true);
    }
    return !prev;
  });
}, [selectedNoteId]);

// Keyboard shortcut handler
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    // Cmd+Shift+Enter - Toggle focus mode
    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key === "Enter") {
      e.preventDefault();
      toggleFocusMode();
      return;
    }

    // Escape exits focus mode when not in editor
    if (e.key === "Escape" && focusMode && !isInEditor) {
      e.preventDefault();
      toggleFocusMode();
      return;
    }
  };
  document.addEventListener("keydown", handleKeyDown);
  return () => document.removeEventListener("keydown", handleKeyDown);
}, [toggleFocusMode, focusMode]);