Fix Beam viewer side panel teardown

plane-src/apps/web/core/components/issues/peek-overview/view.tsx

@@ -38,6 +38,7 @@ import { IssuePeekOverviewLoader } from "./loader";
 import { PeekOverviewProperties } from "./properties";
 
 const SIDE_PEEK_WIDTH_STORAGE_KEY = "nodedc:issue-peek-width";
+const BEAM_VIEWER_CLOSING_CLASS_NAME = "nodedc-beam-viewer-closing";
 
 interface IIssueView {
   workspaceSlug: string;
@@ -94,6 +95,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
   const [beamPeekViewer, setBeamPeekViewer] = useState<TBeamViewerOpenEventDetail | null>(null);
   const [isBeamPeekFullscreen, setIsBeamPeekFullscreen] = useState(false);
+  const [isBeamPeekClosing, setIsBeamPeekClosing] = useState(false);
   const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => {
     if (typeof window === "undefined") return 720;
 
@@ -106,11 +108,12 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const [isResizingPeek, setIsResizingPeek] = useState(false);
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
+  const beamPeekViewerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<EditorRefApi>(null);
   const initialPeekWidthRef = useRef<number>(0);
   const initialMouseXRef = useRef<number>(0);
   const livePeekWidthRef = useRef<number>(sidePeekWidth);
-  const resizeAnimationFrameRef = useRef<number | null>(null);
+  const beamCloseTimeoutRef = useRef<number | null>(null);
   // store hooks
   const {
     setPeekIssue,
@@ -135,19 +138,57 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
 
   const isAnyLocalModalOpen =
     isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen;
-  const shouldUseBeamPeekShell = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;
+  const shouldShowBeamPeekViewer = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;
+
+  const clearBeamCloseTimeout = useCallback(() => {
+    if (typeof window === "undefined" || beamCloseTimeoutRef.current === null) return;
+
+    window.clearTimeout(beamCloseTimeoutRef.current);
+    beamCloseTimeoutRef.current = null;
+  }, []);
+
+  const closeBeamPeekViewer = useCallback(
+    (event?: ReactMouseEvent<HTMLButtonElement>) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      if (isBeamPeekClosing) return;
+
+      if (typeof document !== "undefined" && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+
+      clearBeamCloseTimeout();
+      document.documentElement.classList.add(BEAM_VIEWER_CLOSING_CLASS_NAME);
+      setIsBeamPeekClosing(true);
+      setIsBeamPeekFullscreen(false);
+
+      beamCloseTimeoutRef.current = window.setTimeout(() => {
+        beamCloseTimeoutRef.current = null;
+        setBeamPeekViewer(null);
+        setIsBeamPeekClosing(false);
+        document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
+      }, 140);
+    },
+    [clearBeamCloseTimeout, isBeamPeekClosing]
+  );
+
+  useEffect(
+    () => () => {
+      clearBeamCloseTimeout();
+      document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
+    },
+    [clearBeamCloseTimeout]
+  );
 
   useEffect(() => {
-    if (typeof window === "undefined" || !shouldUseBeamPeekShell) return;
+    if (typeof window === "undefined" || !shouldShowBeamPeekViewer) return;
 
     const root = document.documentElement;
     root.classList.add("nodedc-beam-viewer-interaction-lock");
 
     const isViewerEvent = (event: Event) => {
-      const shell = issuePeekOverviewRef.current;
+      const viewerCard = beamPeekViewerRef.current?.querySelector(".nodedc-beam-peek-viewer-card");
-      if (!shell) return false;
-
-      const viewerCard = shell.querySelector(".nodedc-beam-peek-viewer-card");
       const target = event.target instanceof Node ? event.target : null;
       const path = typeof event.composedPath === "function" ? event.composedPath() : [];
 
@@ -181,30 +222,20 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
       window.removeEventListener("pointermove", stopViewerGestureLeak, passiveOptions);
       window.removeEventListener("pointerup", stopViewerGestureLeak, passiveOptions);
     };
-  }, [shouldUseBeamPeekShell]);
+  }, [shouldShowBeamPeekViewer]);
 
   const getMaxSidePeekWidth = useCallback(() => {
     if (typeof window === "undefined") return 720;
     const minWidth = 640;
-    if (shouldUseBeamPeekShell && !isBeamPeekFullscreen) {
+    if (shouldShowBeamPeekViewer && !isBeamPeekFullscreen) {
       return Math.max(minWidth, Math.floor((window.innerWidth - 24) / 2));
     }
     return Math.max(720, window.innerWidth - 48);
-  }, [isBeamPeekFullscreen, shouldUseBeamPeekShell]);
+  }, [isBeamPeekFullscreen, shouldShowBeamPeekViewer]);
 
   const stopPeekResizing = useCallback(() => {
-    if (resizeAnimationFrameRef.current !== null) {
-      window.cancelAnimationFrame(resizeAnimationFrameRef.current);
-      resizeAnimationFrameRef.current = null;
-    }
-
-    if (shouldUseBeamPeekShell) {
-      issuePeekOverviewRef.current?.style.setProperty("--nodedc-beam-peek-width", `${livePeekWidthRef.current}px`);
-      setSidePeekWidth(livePeekWidthRef.current);
-    }
-
     setIsResizingPeek(false);
-  }, [shouldUseBeamPeekShell]);
+  }, []);
 
   const handlePeekResize = useCallback(
     (event: MouseEvent) => {
@@ -215,25 +246,10 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
       const deltaX = event.clientX - initialMouseXRef.current;
       const nextWidth = Math.min(Math.max(initialPeekWidthRef.current - deltaX, minWidth), maxWidth);
 
-      if (shouldUseBeamPeekShell) {
       livePeekWidthRef.current = nextWidth;
-
-        if (resizeAnimationFrameRef.current === null) {
-          resizeAnimationFrameRef.current = window.requestAnimationFrame(() => {
-            issuePeekOverviewRef.current?.style.setProperty(
-              "--nodedc-beam-peek-width",
-              `${livePeekWidthRef.current}px`
-            );
-            resizeAnimationFrameRef.current = null;
-          });
-        }
-
-        return;
-      }
-
       setSidePeekWidth(nextWidth);
     },
-    [getMaxSidePeekWidth, isResizingPeek, shouldUseBeamPeekShell]
+    [getMaxSidePeekWidth, isResizingPeek]
   );
 
   const startPeekResizing = useCallback(
@@ -276,32 +292,29 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
     livePeekWidthRef.current = sidePeekWidth;
   }, [sidePeekWidth]);
 
-  useEffect(
-    () => () => {
-      if (resizeAnimationFrameRef.current !== null) {
-        window.cancelAnimationFrame(resizeAnimationFrameRef.current);
-      }
-    },
-    []
-  );
-
   useEffect(() => {
+    clearBeamCloseTimeout();
     setBeamPeekViewer(null);
     setIsBeamPeekFullscreen(false);
-  }, [issueId]);
+    setIsBeamPeekClosing(false);
+    document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
+  }, [clearBeamCloseTimeout, issueId]);
 
   useEffect(() => {
     const handleOpenBeamViewer = (event: Event) => {
       const detail = (event as CustomEvent<TBeamViewerOpenEventDetail>).detail;
       if (!detail?.viewerUrl || detail.issueId !== issueId) return;
+      clearBeamCloseTimeout();
       setPeekMode("side-peek");
+      setIsBeamPeekClosing(false);
+      document.documentElement.classList.remove(BEAM_VIEWER_CLOSING_CLASS_NAME);
       setBeamPeekViewer(detail);
       setIsBeamPeekFullscreen(false);
     };
 
     window.addEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
     return () => window.removeEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
-  }, [issueId]);
+  }, [clearBeamCloseTimeout, issueId]);
 
   useEffect(() => {
     if (!isResizingPeek) return;
@@ -342,8 +355,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
     const dropdownElement = document.activeElement?.tagName === "INPUT";
     const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
     if (beamPeekViewer) {
-      setBeamPeekViewer(null);
+      closeBeamPeekViewer();
-      setIsBeamPeekFullscreen(false);
       return;
     }
     if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) {
@@ -365,17 +377,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
     shouldRenderPeekSurface
       ? "flex flex-col overflow-hidden border border-subtle/70 bg-surface-1/80 backdrop-blur-2xl transition-all duration-300"
       : "h-full w-full",
-    !embedIssue && !shouldUseBeamPeekShell && "absolute z-[80]",
+    !embedIssue && "absolute z-[80]",
-    !embedIssue &&
+    !embedIssue && {
-      !shouldUseBeamPeekShell && {
       "nodedc-peek-side-bound top-[5.35rem] right-3 w-[calc(100%-1.5rem)] rounded-[28px] border md:max-w-[calc(100vw-1.5rem)] md:min-w-[640px]":
         peekMode === "side-peek",
       "nodedc-peek-modal-bound rounded-[28px]": peekMode === "modal",
       "nodedc-peek-full-bound rounded-[28px]": peekMode === "full-screen",
     },
-    !embedIssue &&
+    !embedIssue && isBeamPeekClosing && "nodedc-beam-peek-closing !transition-none !duration-0",
-      shouldUseBeamPeekShell &&
-      "nodedc-beam-peek-issue-card relative h-full rounded-[28px] border md:min-w-[640px]",
     shouldUseInteractiveEmbeddedLayout && {
       "relative ml-auto h-full rounded-[28px]": peekMode === "side-peek",
       "relative mx-auto my-3 h-[calc(100%-1.5rem)] w-full max-w-[min(1080px,100%)] rounded-[28px]":
@@ -389,23 +398,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
   const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;
 
   const issuePanelStyle = {
-    width: shouldUseBeamPeekShell
+    width: shouldAllowPeekResize && peekMode === "side-peek" ? `${sidePeekWidth}px` : undefined,
-      ? "100%"
+    boxShadow: shouldRenderPeekSurface
-      : shouldAllowPeekResize && peekMode === "side-peek"
-        ? `${sidePeekWidth}px`
-        : undefined,
-    boxShadow:
-      shouldRenderPeekSurface && !shouldUseBeamPeekShell
       ? "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)"
       : undefined,
   };
 
   const issuePanel = issueId ? (
-    <div
+    <div ref={issuePeekOverviewRef} className={peekOverviewIssueClassName} style={issuePanelStyle}>
-      ref={shouldUseBeamPeekShell ? undefined : issuePeekOverviewRef}
-      className={peekOverviewIssueClassName}
-      style={issuePanelStyle}
-    >
       {shouldAllowPeekResize && peekMode === "side-peek" && (
         <div
           className="absolute top-0 left-0 z-[81] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
@@ -558,12 +558,14 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
 
   const content = (
     <div className="w-full text-body-sm-regular">
-      {shouldUseBeamPeekShell && beamPeekViewer ? (
+      {shouldShowBeamPeekViewer && beamPeekViewer && (
         <div
-          ref={issuePeekOverviewRef}
+          ref={beamPeekViewerRef}
-          className="nodedc-beam-peek-shell"
+          className="nodedc-beam-peek-viewer-layer"
+          data-prevent-outside-click
           data-fullscreen={isBeamPeekFullscreen ? "true" : "false"}
           data-resizing={isResizingPeek ? "true" : "false"}
+          data-closing={isBeamPeekClosing ? "true" : "false"}
           style={
             {
               "--nodedc-beam-peek-width": `${sidePeekWidth}px`,
@@ -602,10 +604,11 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
                 <button
                   type="button"
                   className="grid size-10 place-items-center rounded-full bg-black/45 text-white backdrop-blur-md transition hover:bg-black/60"
-                  onClick={() => {
+                  onMouseDown={(event) => {
-                    setBeamPeekViewer(null);
+                    event.preventDefault();
-                    setIsBeamPeekFullscreen(false);
+                    event.stopPropagation();
                   }}
+                  onClick={closeBeamPeekViewer}
                   title="Закрыть"
                 >
                   <X className="size-5" />
@@ -622,11 +625,9 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
             />
             {isResizingPeek && <div className="nodedc-beam-peek-resize-shield" aria-hidden="true" />}
           </section>
-          <div className="nodedc-beam-peek-issue-slot">{issuePanel}</div>
         </div>
-      ) : (
-        issuePanel
       )}
+      {issuePanel}
     </div>
   );
 

plane-src/apps/web/styles/globals.css

@@ -346,25 +346,20 @@
       0 8px 22px rgba(0, 0, 0, 0.24);
   }
 
-  .nodedc-beam-peek-shell {
+  .nodedc-beam-peek-viewer-layer {
     --nodedc-beam-peek-width: 720px;
     position: fixed;
     top: 5.35rem;
     left: 0.75rem;
-    right: 0.75rem;
+    right: calc(var(--nodedc-beam-peek-width) + 1.5rem);
     bottom: var(--nodedc-peek-bottom-offset);
-    z-index: 80;
+    z-index: 81;
-    display: grid;
+    min-width: 0;
-    grid-template-columns: minmax(0, 1fr) var(--nodedc-beam-peek-width);
+    min-height: 0;
-    grid-template-rows: minmax(0, 1fr);
-    align-items: stretch;
-    column-gap: 0.75rem;
     overflow: visible;
     overscroll-behavior: contain;
-    transition:
+    pointer-events: auto;
-      column-gap 260ms ease,
+    transition: right 260ms ease;
-      grid-template-columns 260ms ease,
-      opacity 220ms ease;
   }
 
   html.nodedc-beam-viewer-interaction-lock,
@@ -377,7 +372,12 @@
     overscroll-behavior: none;
   }
 
-  .nodedc-beam-peek-shell[data-resizing="true"] {
+  .nodedc-beam-peek-viewer-layer[data-resizing="true"] {
+    transition: none;
+  }
+
+  .nodedc-beam-peek-viewer-layer[data-closing="true"] {
+    pointer-events: none;
     transition: none;
   }
 
@@ -411,9 +411,9 @@
     min-height: 0 !important;
   }
 
-  .nodedc-beam-peek-shell[data-fullscreen="true"] {
+  .nodedc-beam-peek-viewer-layer[data-fullscreen="true"] {
-    grid-template-columns: minmax(0, 1fr) 0;
+    right: 0.75rem;
-    column-gap: 0;
+    z-index: 82;
   }
 
   .nodedc-beam-peek-viewer-card {
@@ -433,30 +433,19 @@
     animation: nodedcBeamPeekSlideIn 220ms ease-out;
   }
 
-  .nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-viewer-card,
+  .nodedc-beam-peek-viewer-layer[data-resizing="true"] .nodedc-beam-peek-viewer-card {
-  .nodedc-beam-peek-shell[data-resizing="true"] .nodedc-beam-peek-issue-card {
     transition: none;
   }
 
-  .nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
+  .nodedc-beam-peek-viewer-layer[data-closing="true"] .nodedc-beam-peek-viewer-card {
-    border-radius: 28px;
+    visibility: hidden;
-  }
-
-  .nodedc-beam-peek-issue-slot {
-    min-width: 0;
-    min-height: 0;
-    height: 100%;
-    overflow: visible;
-    transition:
-      opacity 220ms ease,
-      transform 260ms ease;
-  }
-
-  .nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-issue-slot {
-    overflow: hidden;
     opacity: 0;
-    transform: translateX(1.5rem);
+    animation: none;
-    pointer-events: none;
+    transition: none;
+  }
+
+  .nodedc-beam-peek-viewer-layer[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
+    border-radius: 28px;
   }
 
   .nodedc-beam-peek-issue-card {
@@ -471,6 +460,53 @@
       0px 1px 16px 0px rgba(16, 24, 40, 0.12);
   }
 
+  html.nodedc-beam-viewer-closing .nodedc-peek-side-bound,
+  html.nodedc-beam-viewer-closing .nodedc-peek-side-bound:focus,
+  html.nodedc-beam-viewer-closing .nodedc-peek-side-bound:focus-visible,
+  html.nodedc-beam-viewer-closing .nodedc-peek-side-bound:focus-within,
+  html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing,
+  html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing:focus,
+  html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing:focus-visible,
+  html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing:focus-within {
+    outline: none !important;
+    border-color: rgba(255, 255, 255, 0.08) !important;
+    box-shadow:
+      0px 4px 8px 0px rgba(0, 0, 0, 0.12),
+      0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12) !important;
+    transition: none !important;
+  }
+
+  html.nodedc-beam-viewer-closing .nodedc-peek-side-bound *,
+  html.nodedc-beam-viewer-closing .nodedc-peek-side-bound *:focus,
+  html.nodedc-beam-viewer-closing .nodedc-peek-side-bound *:focus-visible,
+  html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing *,
+  html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing *:focus,
+  html.nodedc-beam-viewer-closing .nodedc-beam-peek-closing *:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  .nodedc-beam-peek-closing,
+  .nodedc-beam-peek-closing:focus,
+  .nodedc-beam-peek-closing:focus-visible,
+  .nodedc-beam-peek-closing:focus-within {
+    outline: none !important;
+    border-color: rgba(255, 255, 255, 0.08) !important;
+    box-shadow:
+      0px 4px 8px 0px rgba(0, 0, 0, 0.12),
+      0px 6px 12px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 16px 0px rgba(16, 24, 40, 0.12) !important;
+    transition: none !important;
+  }
+
+  .nodedc-beam-peek-closing *,
+  .nodedc-beam-peek-closing *:focus,
+  .nodedc-beam-peek-closing *:focus-visible {
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
   .nodedc-beam-peek-viewer-card iframe,
   .nodedc-beam-peek-viewer-card iframe:focus,
   .nodedc-beam-peek-viewer-card iframe:focus-visible {
@@ -480,10 +516,15 @@
     overscroll-behavior: contain;
   }
 
-  .nodedc-beam-peek-shell[data-resizing="true"] iframe {
+  .nodedc-beam-peek-viewer-layer[data-resizing="true"] iframe {
     pointer-events: none;
   }
 
+  .nodedc-beam-peek-viewer-layer[data-closing="true"] iframe {
+    display: none;
+    visibility: hidden;
+  }
+
   .nodedc-beam-peek-resize-shield {
     position: absolute;
     inset: -1rem;
@@ -505,20 +546,15 @@
   }
 
   @media (max-width: 900px) {
-    .nodedc-beam-peek-shell,
+    .nodedc-beam-peek-viewer-layer,
-    .nodedc-beam-peek-shell[data-fullscreen="true"] {
+    .nodedc-beam-peek-viewer-layer[data-fullscreen="true"] {
-      grid-template-columns: minmax(0, 1fr);
+      right: 0.75rem;
-      column-gap: 0;
     }
 
     .nodedc-beam-peek-viewer-card,
-    .nodedc-beam-peek-shell[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
+    .nodedc-beam-peek-viewer-layer[data-fullscreen="true"] .nodedc-beam-peek-viewer-card {
       border-radius: 24px;
     }
-
-    .nodedc-beam-peek-issue-slot {
-      display: none;
-    }
   }
 
   .nodedc-glass-surface {