refactor: enhance preview bounds handling in DesktopPreviewController and PreviewPanel

- Updated the `applyViewBounds` method to return a boolean indicating success, improving visibility handling.
- Introduced a constant for hidden preview bounds in `PreviewPanel` to streamline state management.
- Refactored bounds synchronization logic to ensure accurate updates based on visibility and dimensions.
- Improved cleanup logic in the `useEffect` hook to maintain consistent state during component unmounting.

Author: BunsDev

apps/desktop/src/previewController.ts

@@ -126,11 +126,11 @@ export class DesktopPreviewController {
 
   setBounds(bounds: DesktopPreviewBounds): void {
     this.bounds = sanitizeDesktopPreviewBounds(bounds);
-    this.applyViewBounds();
+    const appliedVisible = this.applyViewBounds();
     if (this.state.status !== "closed") {
       this.setState({
         ...this.state,
-        visible: previewVisible(this.state, this.bounds),
+        visible: previewVisible(this.state, this.bounds) && appliedVisible,
       });
     }
   }
@@ -275,20 +275,35 @@ export class DesktopPreviewController {
     return { action: "deny" };
   }
 
-  private applyViewBounds(): void {
+  private applyViewBounds(): boolean {
     if (!this.view || this.view.webContents.isDestroyed()) {
-      return;
+      return false;
     }
 
-    const nextBounds = this.bounds.visible
-      ? {
-          x: this.bounds.x,
-          y: this.bounds.y,
-          width: this.bounds.width,
-          height: this.bounds.height,
-        }
-      : { x: 0, y: 0, width: 0, height: 0 };
-    this.view.setBounds(nextBounds);
+    const contentBounds = this.window.getContentBounds();
+    const rawWidth = Math.round(this.bounds.width);
+    const rawHeight = Math.round(this.bounds.height);
+
+    if (
+      !this.bounds.visible ||
+      rawWidth <= 0 ||
+      rawHeight <= 0 ||
+      contentBounds.width <= 0 ||
+      contentBounds.height <= 0
+    ) {
+      this.view.setBounds({ x: 0, y: 0, width: 0, height: 0 });
+      return false;
+    }
+
+    const width = Math.min(rawWidth, contentBounds.width);
+    const height = Math.min(rawHeight, contentBounds.height);
+    const maxX = Math.max(0, contentBounds.width - width);
+    const maxY = Math.max(0, contentBounds.height - height);
+    const x = Math.max(0, Math.min(Math.round(this.bounds.x), maxX));
+    const y = Math.max(0, Math.min(Math.round(this.bounds.y), maxY));
+
+    this.view.setBounds({ x, y, width, height });
+    return width > 0 && height > 0;
   }
 
   private disposeView(): void {

apps/web/src/components/PreviewPanel.tsx

@@ -25,6 +25,14 @@ const CLOSED_PREVIEW_STATE: DesktopPreviewState = {
   error: null,
 };
 
+const HIDDEN_PREVIEW_BOUNDS = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  visible: false,
+} as const;
+
 export function resolvePreviewStatusCopy(state: DesktopPreviewState): string {
   if (state.error) {
     return state.error.message;
@@ -88,14 +96,21 @@ export function PreviewPanel({ threadId, projectId, projectName, onClose }: Prev
     }
 
     if (storedUrl.trim().length === 0) {
-      void previewBridge.close();
+      void previewBridge.setBounds(HIDDEN_PREVIEW_BOUNDS).finally(() => {
+        void previewBridge.close();
+      });
       setPreviewState(CLOSED_PREVIEW_STATE);
       return;
     }
 
-    void previewBridge.close().finally(() => {
-      void previewBridge.open({ url: storedUrl, title: `${projectName} preview` });
-    });
+    void previewBridge
+      .setBounds(HIDDEN_PREVIEW_BOUNDS)
+      .catch(() => undefined)
+      .finally(() => {
+        void previewBridge.close().finally(() => {
+          void previewBridge.open({ url: storedUrl, title: `${projectName} preview` });
+        });
+      });
   }, [previewBridge, projectName, storedUrl, threadId]);
 
   useEffect(() => {
@@ -114,33 +129,43 @@ export function PreviewPanel({ threadId, projectId, projectName, onClose }: Prev
     let lastBoundsKey = "";
     let resizeObserver: ResizeObserver | null = null;
 
-    const syncBounds = () => {
-      frameId = 0;
-      if (destroyed) {
-        return;
-      }
-
+    const computeBounds = () => {
       const element = surfaceRef.current;
       if (!element) {
-        return;
+        return HIDDEN_PREVIEW_BOUNDS;
       }
 
       const rect = element.getBoundingClientRect();
-      const nextBounds = {
+      const visible =
+        storedUrl.trim().length > 0 &&
+        document.visibilityState === "visible" &&
+        rect.width > 0 &&
+        rect.height > 0;
+      return {
         x: rect.left,
         y: rect.top,
         width: rect.width,
         height: rect.height,
-        visible: rect.width > 0 && rect.height > 0,
+        visible,
       };
+    };
+
+    const syncBounds = () => {
+      if (destroyed) {
+        return;
+      }
+
+      const nextBounds = computeBounds();
       const nextKey = `${Math.round(nextBounds.x)}:${Math.round(nextBounds.y)}:${Math.round(nextBounds.width)}:${Math.round(nextBounds.height)}:${nextBounds.visible ? 1 : 0}`;
       if (nextKey !== lastBoundsKey) {
         lastBoundsKey = nextKey;
         void previewBridge.setBounds(nextBounds);
       }
+
+      frameId = window.requestAnimationFrame(syncBounds);
     };
 
-    const scheduleSync = () => {
+    const scheduleImmediateSync = () => {
       if (destroyed || frameId !== 0) {
         return;
       }
@@ -150,38 +175,36 @@ export function PreviewPanel({ threadId, projectId, projectName, onClose }: Prev
     const element = surfaceRef.current;
     if (typeof ResizeObserver !== "undefined" && element) {
       resizeObserver = new ResizeObserver(() => {
-        scheduleSync();
+        lastBoundsKey = "";
       });
       resizeObserver.observe(element);
     }
 
     const visualViewport = window.visualViewport;
-    window.addEventListener("resize", scheduleSync);
-    window.addEventListener("scroll", scheduleSync, true);
-    visualViewport?.addEventListener("resize", scheduleSync);
-    visualViewport?.addEventListener("scroll", scheduleSync);
+    const invalidateBounds = () => {
+      lastBoundsKey = "";
+    };
 
-    scheduleSync();
-    const settleTimeoutId = window.setTimeout(scheduleSync, 50);
+    window.addEventListener("resize", invalidateBounds);
+    window.addEventListener("scroll", invalidateBounds, true);
+    document.addEventListener("visibilitychange", invalidateBounds);
+    visualViewport?.addEventListener("resize", invalidateBounds);
+    visualViewport?.addEventListener("scroll", invalidateBounds);
+
+    scheduleImmediateSync();
 
     return () => {
       destroyed = true;
-      window.clearTimeout(settleTimeoutId);
       if (frameId !== 0) {
         window.cancelAnimationFrame(frameId);
       }
       resizeObserver?.disconnect();
-      window.removeEventListener("resize", scheduleSync);
-      window.removeEventListener("scroll", scheduleSync, true);
-      visualViewport?.removeEventListener("resize", scheduleSync);
-      visualViewport?.removeEventListener("scroll", scheduleSync);
-      void previewBridge.setBounds({
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-        visible: false,
-      });
+      window.removeEventListener("resize", invalidateBounds);
+      window.removeEventListener("scroll", invalidateBounds, true);
+      document.removeEventListener("visibilitychange", invalidateBounds);
+      visualViewport?.removeEventListener("resize", invalidateBounds);
+      visualViewport?.removeEventListener("scroll", invalidateBounds);
+      void previewBridge.setBounds(HIDDEN_PREVIEW_BOUNDS);
     };
   }, [previewBridge, storedUrl, threadId, projectId]);