Intercept ctrl/command R for refresh (#759)

src/app/layout.tsx

@@ -4,12 +4,39 @@ import { ThemeProvider } from "../contexts/ThemeContext";
 import { DeepLinkProvider } from "../contexts/DeepLinkContext";
 import { Toaster } from "sonner";
 import { TitleBar } from "./TitleBar";
+import { useEffect } from "react";
+import { useRunApp } from "@/hooks/useRunApp";
+import { useAtomValue } from "jotai";
+import { previewModeAtom } from "@/atoms/appAtoms";
 
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const { refreshAppIframe } = useRunApp();
+  const previewMode = useAtomValue(previewModeAtom);
+  // Global keyboard listener for refresh events
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check for Ctrl+R (Windows/Linux) or Cmd+R (macOS)
+      if (event.key === "r" && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault(); // Prevent default browser refresh
+        if (previewMode === "preview") {
+          refreshAppIframe(); // Use our custom refresh function instead
+        }
+      }
+    };
+
+    // Add event listener to document
+    document.addEventListener("keydown", handleKeyDown);
+
+    // Cleanup function to remove event listener
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [refreshAppIframe, previewMode]);
+
   return (
     <>
       <ThemeProvider>