feat: embed Beam viewer in issue peek

2026-06-05 12:46:47 +03:00
parent 15c9fb1df1
commit 867f7bc558
4 changed files with 492 additions and 221 deletions
@@ -24,6 +24,7 @@ import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { getFileIcon } from "@/components/icons";
 import {
  buildBeamViewerUrl,
+  dispatchBeamViewerOpenEvent,
  fetchBeamConversionStatus,
  getBeamViewerAttachment,
  isBeamModelFile,
@@ -62,7 +63,9 @@ const getUsableBeamViewerUrl = (url: string | undefined): string | undefined =>
  if (!url) return undefined;
  try {
    const parsedUrl = new URL(url, "http://localhost");
-    return parsedUrl.searchParams.has("url") || parsedUrl.searchParams.has("src") || parsedUrl.searchParams.has("projectId")
+    return parsedUrl.searchParams.has("url") ||
+      parsedUrl.searchParams.has("src") ||
+      parsedUrl.searchParams.has("projectId")
      ? url
      : undefined;
  } catch (_error) {
@@ -135,7 +138,14 @@ const buildSyncedBeamViewerAttachment = (
 export const IssueAttachmentsListItem = observer(function IssueAttachmentsListItem(props: TIssueAttachmentsListItem) {
  const { t } = useTranslation();
  // props
-  const { attachmentId, disabled, issueId, issueServiceType = EIssueServiceType.ISSUES, projectId, workspaceSlug } = props;
+  const {
+    attachmentId,
+    disabled,
+    issueId,
+    issueServiceType = EIssueServiceType.ISSUES,
+    projectId,
+    workspaceSlug,
+  } = props;
  // store hooks
  const { getUserDetails } = useMember();
  const {
@@ -188,16 +198,24 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
      beamViewer?.conversion?.message ||
      "Оригинальная модель загружена в Beam. Preview появится после подготовки GLB/XKT и дерева компонентов.";
  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
-  const [isModelViewerOpen, setIsModelViewerOpen] = useState(false);
  const [isThumbnailError, setIsThumbnailError] = useState(false);
+  const openModelViewer = () => {
+    if (!modelViewerUrl) return;
+    dispatchBeamViewerOpenEvent({
+      downloadUrl: modelDownloadUrl,
+      fileExtension,
+      fileName: fullFileName,
+      fileSize: attachment?.attributes.size ?? 0,
+      issueId,
+      viewerUrl: modelViewerUrl,
+    });
+  };
  const menuItems: TContextMenuItem[] = [
    ...(modelViewerUrl
      ? [
          {
            key: "view-model",
-            action: () => {
-              setIsModelViewerOpen(true);
-            },
+            action: openModelViewer,
            title: "Посмотреть модель",
            icon: Eye,
          },
@@ -262,7 +280,17 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
      isMounted = false;
      if (timeoutId) window.clearTimeout(timeoutId);
    };
-  }, [attachmentId, attachmentService, beamViewer, fetchAttachments, fullFileName, issueId, projectId, storedModelViewerUrl, workspaceSlug]);
+  }, [
+    attachmentId,
+    attachmentService,
+    beamViewer,
+    fetchAttachments,
+    fullFileName,
+    issueId,
+    projectId,
+    storedModelViewerUrl,
+    workspaceSlug,
+  ]);

  if (!attachment) return <></>;

@@ -275,7 +303,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
          onClick={(e) => {
            e.preventDefault();
            e.stopPropagation();
-            if (modelViewerUrl) setIsModelViewerOpen(true);
+            if (modelViewerUrl) openModelViewer();
            else setIsPreviewOpen(true);
          }}
        >
@@ -302,7 +330,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
                {isBeamModel ? (
                  isBeamConversionFailed ? (
                    <Tooltip tooltipContent={beamStatusTooltipContent} isMobile={isMobile}>
-                      <div className="grid size-9 place-items-center text-red-400">
+                      <div className="text-red-400 grid size-9 place-items-center">
                        <AlertTriangle className="size-9" />
                      </div>
                    </Tooltip>
@@ -434,7 +462,7 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
                </div>
                <div className="max-w-md">
                  <div className="text-15 font-semibold text-primary">
-                    {isBeamConversionFailed ? "Ошибка дерева" : beamConversionStatusLabel ?? "Ожидает дерево"}
+                    {isBeamConversionFailed ? "Ошибка дерева" : (beamConversionStatusLabel ?? "Ожидает дерево")}
                  </div>
                  <div className="mt-2 text-14 text-secondary">
                    {isBeamConversionFailed
@@ -466,55 +494,6 @@ export const IssueAttachmentsListItem = observer(function IssueAttachmentsListIt
          </div>
        </div>
      </ModalCore>
-
-      <ModalCore
-        isOpen={isModelViewerOpen && !!modelViewerUrl}
-        handleClose={() => setIsModelViewerOpen(false)}
-        position={EModalPosition.CENTER}
-        width={EModalWidth.VIIXL}
-        className="nodedc-beam-viewer-modal h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] overflow-hidden !border-0 !bg-black !shadow-none !ring-0 !outline-none focus:!outline-none"
-      >
-        <div className="relative h-full w-full bg-black">
-          <div className="pointer-events-none absolute top-4 right-4 left-4 z-10 grid grid-cols-[1fr_auto_1fr] items-start gap-3">
-            <div aria-hidden="true" />
-            <div className="min-w-0 max-w-[min(60vw,36rem)] text-center text-white drop-shadow-[0_2px_10px_rgba(0,0,0,0.75)]">
-              <div className="truncate text-13 font-semibold">{fullFileName}</div>
-              <div className="mt-0.5 text-11 text-white/70">{convertBytesToSize(attachment.attributes.size)}</div>
-            </div>
-            <div className="pointer-events-auto flex items-center justify-end gap-2">
-              {modelDownloadUrl && (
-                <a
-                  href={modelDownloadUrl}
-                  download={fullFileName}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="grid size-10 place-items-center rounded-full bg-[rgb(var(--nodedc-accent-rgb))] text-[rgb(var(--nodedc-on-accent-rgb))] shadow-[0_14px_30px_rgba(0,0,0,0.3)] transition hover:brightness-110"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Download className="size-5" />
-                </a>
-              )}
-              <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={() => setIsModelViewerOpen(false)}
-              >
-                <X className="size-5" />
-              </button>
-            </div>
-          </div>
-          {modelViewerUrl && (
-            <iframe
-              key={modelViewerUrl}
-              src={modelViewerUrl}
-              title={`Beam Viewer: ${fullFileName}`}
-              tabIndex={-1}
-              className="h-full w-full border-0 outline-none ring-0 focus:outline-none focus:ring-0"
-              allow="fullscreen"
-            />
-          )}
-        </div>
-      </ModalCore>
    </>
  );
 });
@@ -9,16 +9,19 @@ import {
  useEffect,
  useRef,
  useState,
+  type CSSProperties,
  type MouseEvent as ReactMouseEvent,
  type ReactNode,
 } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
+import { Download, Maximize2, Minimize2, X } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
-import { cn } from "@plane/utils";
+import { cn, convertBytesToSize } from "@plane/utils";
+import { BEAM_VIEWER_OPEN_EVENT, type TBeamViewerOpenEventDetail } from "@/helpers/beam-viewer";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import useKeypress from "@/hooks/use-keypress";
@@ -89,6 +92,8 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
  const [isArchiveIssueModalOpen, setIsArchiveIssueModalOpen] = useState(false);
  const [isDuplicateIssueModalOpen, setIsDuplicateIssueModalOpen] = useState(false);
  const [isEditIssueModalOpen, setIsEditIssueModalOpen] = useState(false);
+  const [beamPeekViewer, setBeamPeekViewer] = useState<TBeamViewerOpenEventDetail | null>(null);
+  const [isBeamPeekFullscreen, setIsBeamPeekFullscreen] = useState(false);
  const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => {
    if (typeof window === "undefined") return 720;

@@ -104,6 +109,8 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
  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);
  // store hooks
  const {
    setPeekIssue,
@@ -129,30 +136,69 @@ export const IssueView = observer(function IssueView(props: IIssueView) {

  const isAnyLocalModalOpen =
    isDeleteIssueModalOpen || isArchiveIssueModalOpen || isDuplicateIssueModalOpen || isEditIssueModalOpen;
+  const shouldUseBeamPeekShell = !embedIssue && peekMode === "side-peek" && !!beamPeekViewer;
+
+  const getMaxSidePeekWidth = useCallback(() => {
+    if (typeof window === "undefined") return 720;
+    const minWidth = 640;
+    if (shouldUseBeamPeekShell && !isBeamPeekFullscreen) {
+      return Math.max(minWidth, Math.floor((window.innerWidth - 24) / 2));
+    }
+    return Math.max(720, window.innerWidth - 48);
+  }, [isBeamPeekFullscreen, shouldUseBeamPeekShell]);

  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) => {
      if (!isResizingPeek) return;

-      const maxWidth = Math.max(720, window.innerWidth - 48);
+      const maxWidth = getMaxSidePeekWidth();
      const minWidth = 640;
      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);
    },
-    [isResizingPeek]
+    [getMaxSidePeekWidth, isResizingPeek, shouldUseBeamPeekShell]
  );

  const startPeekResizing = useCallback(
    (event: ReactMouseEvent) => {
      if (!shouldAllowPeekResize || peekMode !== "side-peek") return;
      event.preventDefault();
+      event.stopPropagation();
      setIsResizingPeek(true);
      initialPeekWidthRef.current = sidePeekWidth;
+      livePeekWidthRef.current = sidePeekWidth;
      initialMouseXRef.current = event.clientX;
    },
    [peekMode, shouldAllowPeekResize, sidePeekWidth]
@@ -160,18 +206,18 @@ export const IssueView = observer(function IssueView(props: IIssueView) {

  useEffect(() => {
    const handleWindowResize = () => {
-      const maxWidth = Math.max(720, window.innerWidth - 48);
+      const maxWidth = getMaxSidePeekWidth();
      setSidePeekWidth((currentWidth) => Math.min(currentWidth, maxWidth));
    };

    window.addEventListener("resize", handleWindowResize);
    return () => window.removeEventListener("resize", handleWindowResize);
-  }, []);
+  }, [getMaxSidePeekWidth]);

  useEffect(() => {
    if (typeof window === "undefined") return;

-    const maxWidth = Math.max(720, window.innerWidth - 48);
+    const maxWidth = getMaxSidePeekWidth();
    const clampedWidth = Math.min(Math.max(sidePeekWidth, 640), maxWidth);

    window.localStorage.setItem(SIDE_PEEK_WIDTH_STORAGE_KEY, String(clampedWidth));
@@ -179,8 +225,39 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
    if (clampedWidth !== sidePeekWidth) {
      setSidePeekWidth(clampedWidth);
    }
+  }, [getMaxSidePeekWidth, sidePeekWidth]);
+
+  useEffect(() => {
+    livePeekWidthRef.current = sidePeekWidth;
  }, [sidePeekWidth]);

+  useEffect(
+    () => () => {
+      if (resizeAnimationFrameRef.current !== null) {
+        window.cancelAnimationFrame(resizeAnimationFrameRef.current);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    setBeamPeekViewer(null);
+    setIsBeamPeekFullscreen(false);
+  }, [issueId]);
+
+  useEffect(() => {
+    const handleOpenBeamViewer = (event: Event) => {
+      const detail = (event as CustomEvent<TBeamViewerOpenEventDetail>).detail;
+      if (!detail?.viewerUrl || detail.issueId !== issueId) return;
+      setPeekMode("side-peek");
+      setBeamPeekViewer(detail);
+      setIsBeamPeekFullscreen(false);
+    };
+
+    window.addEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
+    return () => window.removeEventListener(BEAM_VIEWER_OPEN_EVENT, handleOpenBeamViewer);
+  }, [issueId]);
+
  useEffect(() => {
    if (!isResizingPeek) return;

@@ -219,6 +296,11 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
    const editorImageFullScreenModalElement = document.querySelector(".editor-image-full-screen-modal");
    const dropdownElement = document.activeElement?.tagName === "INPUT";
    const isAnyDropbarOpen = editorRef.current?.isAnyDropbarOpen();
+    if (beamPeekViewer) {
+      setBeamPeekViewer(null);
+      setIsBeamPeekFullscreen(false);
+      return;
+    }
    if (!isAnyModalOpen && !dropdownElement && !isAnyDropbarOpen && !editorImageFullScreenModalElement) {
      removeRoutePeekId();
      const issueElement = document.getElementById(`issue-${issueId}`);
@@ -238,13 +320,17 @@ 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 && "absolute z-[80]",
-    !embedIssue && {
-      "top-[5.35rem] right-3 bottom-[5.85rem] w-[calc(100%-1.5rem)] rounded-[28px] border md:min-w-[640px] md:max-w-[calc(100vw-1.5rem)]":
-        peekMode === "side-peek",
-      "top-[8.33%] left-[8.33%] size-5/6 rounded-[28px]": peekMode === "modal",
-      "absolute inset-0 m-4 rounded-[28px]": peekMode === "full-screen",
-    },
+    !embedIssue && !shouldUseBeamPeekShell && "absolute z-[80]",
+    !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",
+        "top-[8.33%] left-[8.33%] size-5/6 rounded-[28px]": peekMode === "modal",
+        "absolute inset-0 m-4 rounded-[28px]": peekMode === "full-screen",
+      },
+    !embedIssue &&
+      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]":
@@ -257,75 +343,123 @@ export const IssueView = observer(function IssueView(props: IIssueView) {

  const portalContainer = document.getElementById("full-screen-portal") as HTMLElement;

-  const content = (
-    <div className="w-full text-body-sm-regular">
-      {issueId && (
+  const issuePanelStyle = {
+    width: shouldUseBeamPeekShell
+      ? "100%"
+      : 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
+      ref={shouldUseBeamPeekShell ? undefined : issuePeekOverviewRef}
+      className={peekOverviewIssueClassName}
+      style={issuePanelStyle}
+    >
+      {shouldAllowPeekResize && peekMode === "side-peek" && (
        <div
-          ref={issuePeekOverviewRef}
-          className={peekOverviewIssueClassName}
-          style={{
-            width: shouldAllowPeekResize && peekMode === "side-peek" ? `${sidePeekWidth}px` : undefined,
-            boxShadow:
-              shouldRenderPeekSurface
-                ? "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,
-          }}
-        >
-          {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"
-              onMouseDown={startPeekResizing}
-              role="separator"
-              aria-label="Resize issue panel"
+          className="absolute top-0 left-0 z-[81] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
+          onMouseDown={startPeekResizing}
+          role="separator"
+          aria-label="Resize issue panel"
+        />
+      )}
+      {isError ? (
+        <div className="relative h-screen w-full overflow-hidden">
+          <IssuePeekOverviewError removeRoutePeekId={removeRoutePeekId} />
+        </div>
+      ) : (
+        isLoading && <IssuePeekOverviewLoader removeRoutePeekId={removeRoutePeekId} />
+      )}
+      {!isLoading && !isError && issue && (
+        <>
+          {renderHeader ? (
+            renderHeader({
+              peekMode,
+              setPeekMode: (value) => setPeekMode(value),
+              removeRoutePeekId,
+              isSubmitting,
+            })
+          ) : (
+            <IssuePeekOverviewHeader
+              peekMode={peekMode}
+              setPeekMode={(value) => setPeekMode(value)}
+              removeRoutePeekId={removeRoutePeekId}
+              toggleDeleteIssueModal={toggleDeleteIssueModal}
+              toggleArchiveIssueModal={toggleArchiveIssueModal}
+              toggleDuplicateIssueModal={toggleDuplicateIssueModal}
+              toggleEditIssueModal={toggleEditIssueModal}
+              handleRestoreIssue={handleRestore}
+              isArchived={is_archived}
+              issueId={issueId}
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              isSubmitting={isSubmitting}
+              disabled={disabled}
+              embedIssue={embedIssue}
+              showLayoutSwitcher={shouldAllowPeekModeToggle}
            />
          )}
-          {isError ? (
-            <div className="relative h-screen w-full overflow-hidden">
-              <IssuePeekOverviewError removeRoutePeekId={removeRoutePeekId} />
-            </div>
-          ) : (
-            isLoading && <IssuePeekOverviewLoader removeRoutePeekId={removeRoutePeekId} />
-          )}
-          {!isLoading && !isError && issue && (
-            <>
-              {renderHeader ? (
-                renderHeader({
-                  peekMode,
-                  setPeekMode: (value) => setPeekMode(value),
-                  removeRoutePeekId,
-                  isSubmitting,
-                })
-              ) : (
-                <IssuePeekOverviewHeader
-                  peekMode={peekMode}
-                  setPeekMode={(value) => setPeekMode(value)}
-                  removeRoutePeekId={removeRoutePeekId}
-                  toggleDeleteIssueModal={toggleDeleteIssueModal}
-                  toggleArchiveIssueModal={toggleArchiveIssueModal}
-                  toggleDuplicateIssueModal={toggleDuplicateIssueModal}
-                  toggleEditIssueModal={toggleEditIssueModal}
-                  handleRestoreIssue={handleRestore}
-                  isArchived={is_archived}
-                  issueId={issueId}
+          {/* content */}
+          <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
+            {renderContent ? (
+              renderContent({
+                peekMode,
+                isSubmitting,
+                setIsSubmitting: (value) => setIsSubmitting(value),
+                editorRef,
+              })
+            ) : ["side-peek", "modal"].includes(peekMode) ? (
+              <div className="relative flex flex-col gap-4 space-y-3 px-8 py-6">
+                <PeekOverviewIssueDetails
+                  editorRef={editorRef}
                  workspaceSlug={workspaceSlug}
                  projectId={projectId}
-                  isSubmitting={isSubmitting}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
                  disabled={disabled}
-                  embedIssue={embedIssue}
-                  showLayoutSwitcher={shouldAllowPeekModeToggle}
+                  isArchived={is_archived}
+                  isSubmitting={isSubmitting}
+                  setIsSubmitting={(value) => setIsSubmitting(value)}
                />
-              )}
-              {/* content */}
-              <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
-                {renderContent ? (
-                  renderContent({
-                    peekMode,
-                    isSubmitting,
-                    setIsSubmitting: (value) => setIsSubmitting(value),
-                    editorRef,
-                  })
-                ) : ["side-peek", "modal"].includes(peekMode) ? (
-                  <div className="relative flex flex-col gap-4 space-y-3 px-8 py-6">
+
+                <div className="py-2">
+                  <IssueDetailWidgets
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issueId}
+                    disabled={disabled || is_archived}
+                    compactView
+                    issueOperations={issueOperations}
+                    issueServiceType={EIssueServiceType.ISSUES}
+                  />
+                </div>
+
+                <PeekOverviewProperties
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  issueOperations={issueOperations}
+                  disabled={disabled || is_archived}
+                />
+
+                <IssueActivity
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  issueId={issueId}
+                  disabled={is_archived}
+                  compactComposer
+                />
+              </div>
+            ) : (
+              <div className="vertical-scrollbar flex h-full w-full overflow-auto">
+                <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
+                  <div className="space-y-3">
                    <PeekOverviewIssueDetails
                      editorRef={editorRef}
                      workspaceSlug={workspaceSlug}
@@ -343,83 +477,111 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
                        workspaceSlug={workspaceSlug}
                        projectId={projectId}
                        issueId={issueId}
-                        disabled={disabled || is_archived}
-                        compactView
+                        disabled={disabled}
                        issueOperations={issueOperations}
                        issueServiceType={EIssueServiceType.ISSUES}
                      />
                    </div>

-                    <PeekOverviewProperties
-                      workspaceSlug={workspaceSlug}
-                      projectId={projectId}
-                      issueId={issueId}
-                      issueOperations={issueOperations}
-                      disabled={disabled || is_archived}
-                    />
-
                    <IssueActivity
                      workspaceSlug={workspaceSlug}
                      projectId={projectId}
                      issueId={issueId}
                      disabled={is_archived}
-                      compactComposer
                    />
                  </div>
-                ) : (
-                  <div className="vertical-scrollbar flex h-full w-full overflow-auto">
-                    <div className="relative h-full w-full space-y-6 overflow-auto p-4 py-5">
-                      <div className="space-y-3">
-                        <PeekOverviewIssueDetails
-                          editorRef={editorRef}
-                          workspaceSlug={workspaceSlug}
-                          projectId={projectId}
-                          issueId={issueId}
-                          issueOperations={issueOperations}
-                          disabled={disabled}
-                          isArchived={is_archived}
-                          isSubmitting={isSubmitting}
-                          setIsSubmitting={(value) => setIsSubmitting(value)}
-                        />
-
-                        <div className="py-2">
-                          <IssueDetailWidgets
-                            workspaceSlug={workspaceSlug}
-                            projectId={projectId}
-                            issueId={issueId}
-                            disabled={disabled}
-                            issueOperations={issueOperations}
-                            issueServiceType={EIssueServiceType.ISSUES}
-                          />
-                        </div>
-
-                        <IssueActivity
-                          workspaceSlug={workspaceSlug}
-                          projectId={projectId}
-                          issueId={issueId}
-                          disabled={is_archived}
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className={`vertical-scrollbar scrollbar-sm h-full !w-[400px] flex-shrink-0 overflow-hidden border-l border-subtle p-4 py-5 ${
-                        is_archived ? "pointer-events-none" : ""
-                      }`}
-                    >
-                      <PeekOverviewProperties
-                        workspaceSlug={workspaceSlug}
-                        projectId={projectId}
-                        issueId={issueId}
-                        issueOperations={issueOperations}
-                        disabled={disabled || is_archived}
-                      />
-                    </div>
-                  </div>
-                )}
+                </div>
+                <div
+                  className={`vertical-scrollbar scrollbar-sm h-full !w-[400px] flex-shrink-0 overflow-hidden border-l border-subtle p-4 py-5 ${
+                    is_archived ? "pointer-events-none" : ""
+                  }`}
+                >
+                  <PeekOverviewProperties
+                    workspaceSlug={workspaceSlug}
+                    projectId={projectId}
+                    issueId={issueId}
+                    issueOperations={issueOperations}
+                    disabled={disabled || is_archived}
+                  />
+                </div>
              </div>
-            </>
-          )}
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  ) : null;
+
+  const content = (
+    <div className="w-full text-body-sm-regular">
+      {shouldUseBeamPeekShell && beamPeekViewer ? (
+        <div
+          ref={issuePeekOverviewRef}
+          className="nodedc-beam-peek-shell"
+          data-fullscreen={isBeamPeekFullscreen ? "true" : "false"}
+          data-resizing={isResizingPeek ? "true" : "false"}
+          style={
+            {
+              "--nodedc-beam-peek-width": `${sidePeekWidth}px`,
+            } as CSSProperties
+          }
+        >
+          <section className="nodedc-beam-peek-viewer-card" aria-label="Beam Viewer">
+            <div className="pointer-events-none absolute top-4 right-4 left-4 z-10 grid grid-cols-[1fr_auto_1fr] items-start gap-3">
+              <div aria-hidden="true" />
+              <div className="max-w-[min(44vw,34rem)] min-w-0 text-center text-white drop-shadow-[0_2px_10px_rgba(0,0,0,0.75)]">
+                <div className="truncate text-13 font-semibold">{beamPeekViewer.fileName}</div>
+                <div className="mt-0.5 text-11 text-white/70">{convertBytesToSize(beamPeekViewer.fileSize)}</div>
+              </div>
+              <div className="pointer-events-auto flex items-center justify-end gap-2">
+                {beamPeekViewer.downloadUrl && (
+                  <a
+                    href={beamPeekViewer.downloadUrl}
+                    download={beamPeekViewer.fileName}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="grid size-10 place-items-center rounded-full bg-[rgb(var(--nodedc-accent-rgb))] text-[rgb(var(--nodedc-on-accent-rgb))] shadow-[0_14px_30px_rgba(0,0,0,0.3)] transition hover:brightness-110"
+                    onClick={(event) => event.stopPropagation()}
+                    title="Скачать оригинал"
+                  >
+                    <Download className="size-5" />
+                  </a>
+                )}
+                <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={() => setIsBeamPeekFullscreen((current) => !current)}
+                  title={isBeamPeekFullscreen ? "Вернуть карточку" : "Во весь экран"}
+                >
+                  {isBeamPeekFullscreen ? <Minimize2 className="size-5" /> : <Maximize2 className="size-5" />}
+                </button>
+                <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={() => {
+                    setBeamPeekViewer(null);
+                    setIsBeamPeekFullscreen(false);
+                  }}
+                  title="Закрыть"
+                >
+                  <X className="size-5" />
+                </button>
+              </div>
+            </div>
+            <iframe
+              key={beamPeekViewer.viewerUrl}
+              src={beamPeekViewer.viewerUrl}
+              title={`Beam Viewer: ${beamPeekViewer.fileName}`}
+              tabIndex={-1}
+              className="h-full w-full border-0 ring-0 outline-none focus:ring-0 focus:outline-none"
+              allow="fullscreen"
+            />
+            {isResizingPeek && <div className="nodedc-beam-peek-resize-shield" aria-hidden="true" />}
+          </section>
+          <div className="nodedc-beam-peek-issue-slot">{issuePanel}</div>
        </div>
+      ) : (
+        issuePanel
      )}
    </div>
  );