From ab2a5ffb9a8f6d29434bfe341715abf3c8731812 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Mon, 20 Apr 2026 21:07:49 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D1=83?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=84=D0=B8=D0=BA=D0=B0=D1=86=D0=B8=D1=8F=20shell?=
 =?UTF-8?q?=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D0=B8=20=D0=B2?=
 =?UTF-8?q?=D0=BD=D0=B5=D1=88=D0=BD=D0=B5=D0=B3=D0=BE=20=D0=BA=D0=BE=D0=BD?=
 =?UTF-8?q?=D1=82=D1=83=D1=80=D0=B0=20=D1=81=20=D0=B2=D0=BD=D1=83=D1=82?=
 =?UTF-8?q?=D1=80=D0=B5=D0=BD=D0=BD=D0=B8=D0=BC=20peek?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../external-contours/content-root.tsx        |  57 +++--
 .../external-contours/issue-header.tsx        | 241 +++++++++++++++---
 .../projects/external-contours/peek-shell.tsx | 208 +++++++++++++++
 .../projects/external-contours/root.tsx       |  23 +-
 .../external-contours/subscription.tsx        | 110 ++++++++
 .../workspace-notifications/root.tsx          |   2 +
 6 files changed, 563 insertions(+), 78 deletions(-)
 create mode 100644 plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx
 create mode 100644 plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx

diff --git a/plane-src/apps/web/ce/components/projects/external-contours/content-root.tsx b/plane-src/apps/web/ce/components/projects/external-contours/content-root.tsx
index fbe9c7b..40180c7 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/content-root.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/content-root.tsx
@@ -9,21 +9,28 @@ import { observer } from "mobx-react";
 import useSWR from "swr";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { TNameDescriptionLoader } from "@plane/types";
-import { ContentWrapper } from "@plane/ui";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { ExternalContoursIssueActionsHeader } from "./issue-header";
+import { ExternalContoursPeekShell } from "./peek-shell";
 import { ExternalContoursIssueMainContent } from "./issue-root";
 
 type Props = {
   workspaceSlug: string;
   projectId: string;
   inboxIssueId: string;
+  embedIssue?: boolean;
+  embedRemoveCurrentNotification?: () => void;
 };
 
 export const ExternalContoursContentRoot = observer(function ExternalContoursContentRoot(props: Props) {
-  const { workspaceSlug, projectId, inboxIssueId } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    inboxIssueId,
+    embedIssue = false,
+    embedRemoveCurrentNotification,
+  } = props;
   const router = useAppRouter();
   const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
   const [isDetailResolved, setIsDetailResolved] = useState(false);
@@ -81,28 +88,26 @@ export const ExternalContoursContentRoot = observer(function ExternalContoursCon
   if (!contourRequest || !issue) return <></>;
 
   return (
-    <div className="relative flex h-full w-full flex-col overflow-hidden pt-6">
-      <div className="z-[11] min-h-[52px] flex-shrink-0">
-        <ExternalContoursIssueActionsHeader
-          workspaceSlug={workspaceSlug}
-          sourceProjectId={projectId}
-          contourRequest={contourRequest}
-          isSubmitting={isSubmitting}
-          hasDirectTargetAccess={hasDirectTargetAccess}
-        />
-      </div>
-      <ContentWrapper className="space-y-4 px-4 pb-4 pt-4">
-        <ExternalContoursIssueMainContent
-          workspaceSlug={workspaceSlug}
-          sourceProjectId={projectId}
-          contourRequest={contourRequest}
-          hasDirectTargetAccess={hasDirectTargetAccess}
-          isEditable={!!isEditable && !readOnly}
-          isSourceEditable={isSourceEditable}
-          isSubmitting={isSubmitting}
-          setIsSubmitting={setIsSubmitting}
-        />
-      </ContentWrapper>
-    </div>
+    <ExternalContoursPeekShell
+      workspaceSlug={workspaceSlug}
+      projectId={projectId}
+      contourRequest={contourRequest}
+      hasDirectTargetAccess={hasDirectTargetAccess}
+      isSubmitting={isSubmitting}
+      embedIssue={embedIssue}
+      embedRemoveCurrentNotification={embedRemoveCurrentNotification}
+      onClose={() => router.replace(`/${workspaceSlug}/projects/${projectId}/external-contours?currentTab=${currentTab}`)}
+    >
+      <ExternalContoursIssueMainContent
+        workspaceSlug={workspaceSlug}
+        sourceProjectId={projectId}
+        contourRequest={contourRequest}
+        hasDirectTargetAccess={hasDirectTargetAccess}
+        isEditable={!!isEditable && !readOnly}
+        isSourceEditable={isSourceEditable}
+        isSubmitting={isSubmitting}
+        setIsSubmitting={setIsSubmitting}
+      />
+    </ExternalContoursPeekShell>
   );
 });
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx b/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
index 3b4a677..eb19e60 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx
@@ -4,22 +4,57 @@
  * See the LICENSE file for details.
  */
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
+import Link from "next/link";
+import { MoreHorizontal, MoveDiagonal, MoveRight } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { IconButton, getIconButtonStyling } from "@plane/propel/icon-button";
 import { Button } from "@plane/propel/button";
-import { CheckCircleFilledIcon, ChevronDownIcon, ChevronUpIcon, CloseCircleFilledIcon, LinkIcon, NewTabIcon } from "@plane/propel/icons";
+import {
+  CenterPanelIcon,
+  CheckCircleFilledIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CloseCircleFilledIcon,
+  CopyLinkIcon,
+  FullScreenPanelIcon,
+  NewTabIcon,
+  SidePanelIcon,
+} from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
 import { EInboxIssueCurrentTab } from "@plane/types";
-import { ControlLink, Header, Row } from "@plane/ui";
+import { ControlLink, CustomMenu, CustomSelect, Header, Row, Tooltip } from "@plane/ui";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
 import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
 import { useProject } from "@/hooks/store/use-project";
+import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
 import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { ExternalContourStatePill } from "./state-pill";
 import { ExternalContourDeclineModal } from "./decline-modal";
+import { ExternalContourSubscription } from "./subscription";
+
+export type TExternalContourPeekMode = "side-peek" | "modal" | "full-screen";
+
+const PEEK_OPTIONS: { key: TExternalContourPeekMode; icon: any; i18n_title: string }[] = [
+  {
+    key: "side-peek",
+    icon: SidePanelIcon,
+    i18n_title: "common.side_peek",
+  },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    i18n_title: "common.modal",
+  },
+  {
+    key: "full-screen",
+    icon: FullScreenPanelIcon,
+    i18n_title: "common.full_screen",
+  },
+];
 
 type Props = {
   workspaceSlug: string;
@@ -27,6 +62,11 @@ type Props = {
   contourRequest: TExternalContourRequest;
   hasDirectTargetAccess: boolean;
   isSubmitting: TNameDescriptionLoader;
+  removeRoutePeekId: () => void;
+  peekMode: TExternalContourPeekMode;
+  setPeekMode: (value: TExternalContourPeekMode) => void;
+  currentTab: TInboxIssueCurrentTab;
+  embedIssue?: boolean;
 };
 
 export const ExternalContoursIssueActionsHeader = observer(function ExternalContoursIssueActionsHeader(props: Props) {
@@ -36,16 +76,27 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
     contourRequest,
     hasDirectTargetAccess,
     isSubmitting,
+    removeRoutePeekId,
+    peekMode,
+    setPeekMode,
+    currentTab,
+    embedIssue = false,
   } = props;
+  const parentRef = useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
   const router = useAppRouter();
   const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
-  const { currentTab, decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
+  const { decideRequest, filteredRequestIds, handleCurrentTab, loader } = useProjectExternalContours();
+  const { currentTab: boardCurrentTab, columnIdsMap } = useProjectExternalContoursBoard();
   const { getProjectById } = useProject();
 
   const issue = contourRequest.issue;
   const currentRequestId = contourRequest.id;
-  const hasRelativeNavigation = !!currentRequestId && filteredRequestIds.includes(currentRequestId);
+  const boardRequestIds =
+    boardCurrentTab === currentTab ? [...(columnIdsMap.outgoing ?? []), ...(columnIdsMap.incoming ?? [])] : [];
+  const relativeRequestIds = boardRequestIds.includes(currentRequestId) ? boardRequestIds : filteredRequestIds;
+  const currentMode = PEEK_OPTIONS.find((mode) => mode.key === peekMode);
+  const hasRelativeNavigation = !!currentRequestId && relativeRequestIds.includes(currentRequestId);
   const canReviewClosedRequest =
     contourRequest.capabilities?.can_source_decide ??
     (contourRequest.status === "closed" && contourRequest.source_decision !== "accepted");
@@ -53,18 +104,18 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
 
   const redirectToRelativeIssue = useCallback(
     (direction: "next" | "prev") => {
-      if (!filteredRequestIds || !currentRequestId || !hasRelativeNavigation || filteredRequestIds.length <= 1) return;
-      const currentIssueIndex = filteredRequestIds.findIndex((requestId) => requestId === currentRequestId);
+      if (!relativeRequestIds || !currentRequestId || !hasRelativeNavigation || relativeRequestIds.length <= 1) return;
+      const currentIssueIndex = relativeRequestIds.findIndex((requestId) => requestId === currentRequestId);
       if (currentIssueIndex === -1) return;
       const nextIssueIndex =
         direction === "next"
-          ? (currentIssueIndex + 1) % filteredRequestIds.length
-          : (currentIssueIndex - 1 + filteredRequestIds.length) % filteredRequestIds.length;
-      const nextIssueId = filteredRequestIds[nextIssueIndex];
+          ? (currentIssueIndex + 1) % relativeRequestIds.length
+          : (currentIssueIndex - 1 + relativeRequestIds.length) % relativeRequestIds.length;
+      const nextIssueId = relativeRequestIds[nextIssueIndex];
       if (!nextIssueId) return;
       router.push(`/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${currentTab}&inboxIssueId=${nextIssueId}`);
     },
-    [currentRequestId, currentTab, filteredRequestIds, hasRelativeNavigation, router, sourceProjectId, workspaceSlug]
+    [currentRequestId, currentTab, hasRelativeNavigation, relativeRequestIds, router, sourceProjectId, workspaceSlug]
   );
 
   useEffect(() => {
@@ -78,6 +129,8 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
   }, [redirectToRelativeIssue]);
 
   const targetProjectIdentifier = issue.project_detail?.identifier || getProjectById(issue.project_id || "")?.identifier;
+  const requestTab = contourRequest.status === "closed" ? EInboxIssueCurrentTab.CLOSED : EInboxIssueCurrentTab.OPEN;
+  const requestLink = `/${workspaceSlug}/projects/${sourceProjectId}/external-contours?currentTab=${requestTab}&inboxIssueId=${contourRequest.id}`;
   const workItemLink = generateWorkItemLink({
     workspaceSlug: workspaceSlug?.toString(),
     projectId: issue.project_id,
@@ -87,7 +140,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
   });
 
   const handleCopyLink = () =>
-    copyUrlToClipboard(workItemLink).then(() =>
+    copyUrlToClipboard(requestLink).then(() =>
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: t("common.link_copied"),
@@ -132,26 +185,72 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
         onSubmit={(comment) => handleDecision("decline", comment)}
       />
 
-      <Row className="relative z-15 hidden h-full w-full items-center justify-between gap-2 px-4 lg:flex">
-        <div className="flex items-center gap-4">
+      <Row
+        ref={parentRef}
+        className={`relative z-15 hidden h-full w-full items-center justify-between gap-4 px-6 py-5 lg:flex ${
+          currentMode?.key === "full-screen" ? "border-b border-subtle/70" : ""
+        }`}
+      >
+        <div className="flex min-w-0 items-center gap-4">
+          <Tooltip tooltipContent={t("common.close_peek_view")}>
+            <button onClick={removeRoutePeekId}>
+              <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
+            </button>
+          </Tooltip>
+
+          {hasDirectTargetAccess && (
+            <Tooltip tooltipContent={t("issue.open_in_full_screen")}>
+              <Link href={workItemLink} onClick={() => removeRoutePeekId()}>
+                <MoveDiagonal className="h-4 w-4 text-tertiary hover:text-secondary" />
+              </Link>
+            </Tooltip>
+          )}
+
+          {currentMode && !embedIssue && (
+            <CustomSelect
+              value={currentMode}
+              onChange={(value: TExternalContourPeekMode) => setPeekMode(value)}
+              customButton={
+                <Tooltip tooltipContent={t("common.toggle_peek_view_layout")}>
+                  <button type="button">
+                    <currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />
+                  </button>
+                </Tooltip>
+              }
+            >
+              {PEEK_OPTIONS.map((mode) => (
+                <CustomSelect.Option key={mode.key} value={mode.key}>
+                  <div
+                    className={`flex items-center gap-1.5 ${
+                      currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
+                    }`}
+                  >
+                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                    {t(mode.i18n_title)}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
+
           {issue?.project_id && issue.sequence_id && (
             <h3 className="flex-shrink-0 text-14 font-medium text-tertiary">
               {targetProjectIdentifier}-{issue.sequence_id}
             </h3>
           )}
           <ExternalContourStatePill request={contourRequest} />
-          <div className="flex w-full items-center justify-end">
+          <div className="flex min-w-0 flex-1 items-center justify-end">
             <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
 
-        <div className="nodedc-external-detail-toolbar">
+        <div className="nodedc-external-detail-toolbar min-w-0">
           <div className="nodedc-external-toolbar-cluster">
             <button
               type="button"
               aria-label="Previous request"
               onClick={() => redirectToRelativeIssue("prev")}
-              disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
+              disabled={!hasRelativeNavigation || relativeRequestIds.length <= 1}
               className="nodedc-external-icon-button"
             >
               <ChevronUpIcon className="size-3.5" />
@@ -160,7 +259,7 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
               type="button"
               aria-label="Next request"
               onClick={() => redirectToRelativeIssue("next")}
-              disabled={!hasRelativeNavigation || filteredRequestIds.length <= 1}
+              disabled={!hasRelativeNavigation || relativeRequestIds.length <= 1}
               className="nodedc-external-icon-button"
             >
               <ChevronDownIcon className="size-3.5" />
@@ -187,28 +286,79 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
               </div>
             )}
 
-            <Button
-              variant="secondary"
-              size="lg"
-              prependIcon={<LinkIcon className="h-2.5 w-2.5" />}
-              onClick={handleCopyLink}
-              className="nodedc-external-action-button"
-            >
-              {t("external_contours_page.actions.copy")}
-            </Button>
             {hasDirectTargetAccess && (
-              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                <Button variant="secondary" size="lg" prependIcon={<NewTabIcon className="h-2.5 w-2.5" />} className="nodedc-external-action-button">
-                  {t("external_contours_page.actions.open")}
-                </Button>
-              </ControlLink>
+              <ExternalContourSubscription
+                workspaceSlug={workspaceSlug}
+                projectId={issue.project_id || sourceProjectId}
+                issueId={issue.id}
+                buttonClassName="!h-10 rounded-[18px] border-transparent bg-layer-2/80 px-4 shadow-none backdrop-blur-xl hover:!bg-layer-2-active focus-visible:outline-none"
+              />
             )}
+
+            <Tooltip tooltipContent={t("common.actions.copy_link")}>
+              <IconButton
+                variant="secondary"
+                size="lg"
+                onClick={handleCopyLink}
+                icon={CopyLinkIcon}
+                className="size-10 rounded-[18px] border-transparent bg-layer-2/80 shadow-none backdrop-blur-xl hover:bg-layer-2-active focus-visible:outline-none"
+              />
+            </Tooltip>
+
+            <CustomMenu
+              customButton={<MoreHorizontal className="size-4" />}
+              customButtonClassName={getIconButtonStyling("secondary", "lg")}
+              placement="bottom-start"
+            >
+              <CustomMenu.MenuItem onClick={handleCopyLink}>
+                <div className="flex items-center gap-2">
+                  <CopyLinkIcon width={14} height={14} />
+                  {t("external_contours_page.actions.copy")}
+                </div>
+              </CustomMenu.MenuItem>
+              {hasDirectTargetAccess && (
+                <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
+                  <div className="flex items-center gap-2">
+                    <NewTabIcon width={14} height={14} />
+                    {t("external_contours_page.actions.open")}
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+            </CustomMenu>
           </div>
         </div>
       </Row>
 
       <Header className="justify-start lg:hidden">
         <div className="flex w-full items-center gap-2">
+          <button onClick={removeRoutePeekId}>
+            <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
+          </button>
+          {hasDirectTargetAccess && (
+            <ControlLink href={workItemLink} onClick={() => removeRoutePeekId()} target="_self">
+              <MoveDiagonal className="h-4 w-4 text-tertiary hover:text-secondary" />
+            </ControlLink>
+          )}
+          {currentMode && !embedIssue && (
+            <CustomSelect
+              value={currentMode}
+              onChange={(value: TExternalContourPeekMode) => setPeekMode(value)}
+              customButton={<currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />}
+            >
+              {PEEK_OPTIONS.map((mode) => (
+                <CustomSelect.Option key={mode.key} value={mode.key}>
+                  <div
+                    className={`flex items-center gap-1.5 ${
+                      currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
+                    }`}
+                  >
+                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                    {t(mode.i18n_title)}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          )}
           <ExternalContourStatePill request={contourRequest} />
           <div className="ml-auto flex items-center gap-2">
             {canReviewClosedRequest && (
@@ -226,13 +376,26 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
                 {t("external_contours_page.traceability.source_decision_accepted")}
               </div>
             )}
-            {hasDirectTargetAccess && (
-              <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
-                <Button variant="secondary" size="sm" className="nodedc-external-action-button">
-                  {t("external_contours_page.actions.open")}
-                </Button>
-              </ControlLink>
-            )}
+            <CustomMenu
+              customButton={<MoreHorizontal className="size-4" />}
+              customButtonClassName={getIconButtonStyling("secondary", "lg")}
+              placement="bottom-start"
+            >
+              <CustomMenu.MenuItem onClick={handleCopyLink}>
+                <div className="flex items-center gap-2">
+                  <CopyLinkIcon width={14} height={14} />
+                  {t("external_contours_page.actions.copy")}
+                </div>
+              </CustomMenu.MenuItem>
+              {hasDirectTargetAccess && (
+                <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
+                  <div className="flex items-center gap-2">
+                    <NewTabIcon width={14} height={14} />
+                    {t("external_contours_page.actions.open")}
+                  </div>
+                </CustomMenu.MenuItem>
+              )}
+            </CustomMenu>
           </div>
         </div>
       </Header>
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx b/plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx
new file mode 100644
index 0000000..b59f981
--- /dev/null
+++ b/plane-src/apps/web/ce/components/projects/external-contours/peek-shell.tsx
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { createPortal } from "react-dom";
+import { useCallback, useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from "react";
+import { observer } from "mobx-react";
+import { cn } from "@plane/utils";
+import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
+import { useProjectExternalContours } from "@/hooks/store/use-project-external-contours";
+import useKeypress from "@/hooks/use-keypress";
+import usePeekOverviewOutsideClickDetector from "@/hooks/use-peek-overview-outside-click";
+import { ExternalContoursIssueActionsHeader, type TExternalContourPeekMode } from "./issue-header";
+
+const SIDE_PEEK_WIDTH_STORAGE_KEY = "nodedc:external-contour-peek-width";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  contourRequest: TExternalContourRequest;
+  hasDirectTargetAccess: boolean;
+  isSubmitting: TNameDescriptionLoader;
+  embedIssue?: boolean;
+  embedRemoveCurrentNotification?: () => void;
+  children: ReactNode;
+  onClose: () => void;
+};
+
+export const ExternalContoursPeekShell = observer(function ExternalContoursPeekShell(props: Props) {
+  const {
+    workspaceSlug,
+    projectId,
+    contourRequest,
+    hasDirectTargetAccess,
+    isSubmitting,
+    embedIssue = false,
+    embedRemoveCurrentNotification,
+    children,
+    onClose,
+  } = props;
+  const [peekMode, setPeekMode] = useState<TExternalContourPeekMode>("side-peek");
+  const [sidePeekWidth, setSidePeekWidth] = useState<number>(() => {
+    if (typeof window === "undefined") return 720;
+
+    const fallbackWidth = Math.max(640, Math.floor(window.innerWidth * 0.5));
+    const storedWidth = window.localStorage.getItem(SIDE_PEEK_WIDTH_STORAGE_KEY);
+    const parsedWidth = storedWidth ? parseInt(storedWidth, 10) : NaN;
+
+    return Number.isFinite(parsedWidth) ? parsedWidth : fallbackWidth;
+  });
+  const [isResizingPeek, setIsResizingPeek] = useState(false);
+
+  const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
+  const initialPeekWidthRef = useRef<number>(0);
+  const initialMouseXRef = useRef<number>(0);
+  const { currentTab } = useProjectExternalContours();
+
+  const removeRoutePeekId = useCallback(() => {
+    if (embedIssue) {
+      embedRemoveCurrentNotification?.();
+      return;
+    }
+
+    onClose();
+  }, [embedIssue, embedRemoveCurrentNotification, onClose]);
+
+  const stopPeekResizing = useCallback(() => {
+    setIsResizingPeek(false);
+  }, []);
+
+  const handlePeekResize = useCallback(
+    (event: MouseEvent) => {
+      if (!isResizingPeek) return;
+
+      const maxWidth = Math.max(720, window.innerWidth - 48);
+      const minWidth = 640;
+      const deltaX = event.clientX - initialMouseXRef.current;
+      const nextWidth = Math.min(Math.max(initialPeekWidthRef.current - deltaX, minWidth), maxWidth);
+      setSidePeekWidth(nextWidth);
+    },
+    [isResizingPeek]
+  );
+
+  const startPeekResizing = useCallback(
+    (event: ReactMouseEvent) => {
+      if (peekMode !== "side-peek") return;
+      event.preventDefault();
+      setIsResizingPeek(true);
+      initialPeekWidthRef.current = sidePeekWidth;
+      initialMouseXRef.current = event.clientX;
+    },
+    [peekMode, sidePeekWidth]
+  );
+
+  useEffect(() => {
+    const handleWindowResize = () => {
+      const maxWidth = Math.max(720, window.innerWidth - 48);
+      setSidePeekWidth((currentWidth) => Math.min(currentWidth, maxWidth));
+    };
+
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const maxWidth = Math.max(720, window.innerWidth - 48);
+    const clampedWidth = Math.min(Math.max(sidePeekWidth, 640), maxWidth);
+
+    window.localStorage.setItem(SIDE_PEEK_WIDTH_STORAGE_KEY, String(clampedWidth));
+
+    if (clampedWidth !== sidePeekWidth) {
+      setSidePeekWidth(clampedWidth);
+    }
+  }, [sidePeekWidth]);
+
+  useEffect(() => {
+    if (!isResizingPeek) return;
+
+    document.addEventListener("mousemove", handlePeekResize);
+    document.addEventListener("mouseup", stopPeekResizing);
+    document.addEventListener("mouseleave", stopPeekResizing);
+    window.addEventListener("blur", stopPeekResizing);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+
+    return () => {
+      document.removeEventListener("mousemove", handlePeekResize);
+      document.removeEventListener("mouseup", stopPeekResizing);
+      document.removeEventListener("mouseleave", stopPeekResizing);
+      window.removeEventListener("blur", stopPeekResizing);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [handlePeekResize, isResizingPeek, stopPeekResizing]);
+
+  usePeekOverviewOutsideClickDetector(
+    issuePeekOverviewRef,
+    () => {
+      if (!embedIssue) removeRoutePeekId();
+    },
+    contourRequest.id,
+    ["main-sidebar"]
+  );
+
+  useKeypress("Escape", () => !embedIssue && removeRoutePeekId());
+
+  const peekOverviewClassName = cn(
+    !embedIssue
+      ? "absolute z-[25] 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 && {
+      "top-3 right-3 bottom-3 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",
+    }
+  );
+
+  const portalContainer = typeof document !== "undefined" ? document.getElementById("full-screen-portal") : null;
+
+  const content = (
+    <div className="w-full text-body-sm-regular">
+      <div
+        ref={issuePeekOverviewRef}
+        className={peekOverviewClassName}
+        style={{
+          width: !embedIssue && peekMode === "side-peek" ? `${sidePeekWidth}px` : undefined,
+          boxShadow:
+            "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)",
+        }}
+      >
+        {!embedIssue && peekMode === "side-peek" && (
+          <div
+            className="absolute top-0 left-0 z-[26] h-full w-4 -translate-x-1/2 cursor-ew-resize rounded-l-[28px] bg-transparent"
+            onMouseDown={startPeekResizing}
+            role="separator"
+            aria-label="Resize external contour panel"
+          />
+        )}
+        <ExternalContoursIssueActionsHeader
+          workspaceSlug={workspaceSlug}
+          sourceProjectId={projectId}
+          contourRequest={contourRequest}
+          hasDirectTargetAccess={hasDirectTargetAccess}
+          isSubmitting={isSubmitting}
+          removeRoutePeekId={removeRoutePeekId}
+          peekMode={peekMode}
+          setPeekMode={setPeekMode}
+          currentTab={currentTab}
+          embedIssue={embedIssue}
+        />
+        <div className="vertical-scrollbar relative scrollbar-md h-full w-full overflow-hidden overflow-y-auto">
+          {["side-peek", "modal"].includes(peekMode) ? (
+            <div className="relative flex flex-col gap-4 px-8 py-6">{children}</div>
+          ) : (
+            <div className="relative h-full w-full overflow-auto px-6 py-5">{children}</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  return <>{!embedIssue && portalContainer ? createPortal(content, portalContainer) : content}</>;
+});
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/root.tsx b/plane-src/apps/web/ce/components/projects/external-contours/root.tsx
index 1299840..fd91c9d 100644
--- a/plane-src/apps/web/ce/components/projects/external-contours/root.tsx
+++ b/plane-src/apps/web/ce/components/projects/external-contours/root.tsx
@@ -95,18 +95,15 @@ export const ExternalContoursRoot = observer(function ExternalContoursRoot(props
   }
 
   return (
-    <>
-      <div className="flex h-full w-full overflow-hidden bg-surface-1 pt-2">
-        {inboxIssueId ? (
-          <ExternalContoursContentRoot
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId.toString()}
-            inboxIssueId={inboxIssueId.toString()}
-          />
-        ) : (
-          <ExternalContoursBoardRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
-        )}
-      </div>
-    </>
+    <div className="flex h-full w-full overflow-hidden bg-surface-1 pt-2">
+      <ExternalContoursBoardRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+      {inboxIssueId && (
+        <ExternalContoursContentRoot
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          inboxIssueId={inboxIssueId.toString()}
+        />
+      )}
+    </div>
   );
 });
diff --git a/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx b/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx
new file mode 100644
index 0000000..d3f916f
--- /dev/null
+++ b/plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { Bell, BellOff } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+import { IssueService } from "@/services/issue/issue.service";
+
+const issueService = new IssueService();
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  buttonClassName?: string;
+};
+
+export const ExternalContourSubscription = observer(function ExternalContourSubscription(props: Props) {
+  const { workspaceSlug, projectId, issueId, buttonClassName } = props;
+  const { t } = useTranslation();
+  const [isSubscribed, setIsSubscribed] = useState<boolean | undefined>(undefined);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const fetchSubscription = async () => {
+      try {
+        const response = await issueService.getIssueNotificationSubscriptionStatus(workspaceSlug, projectId, issueId);
+        if (isMounted) setIsSubscribed(response?.subscribed ?? false);
+      } catch {
+        if (isMounted) setIsSubscribed(false);
+      }
+    };
+
+    if (workspaceSlug && projectId && issueId) {
+      void fetchSubscription();
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, [workspaceSlug, projectId, issueId]);
+
+  const handleSubscription = async () => {
+    if (!workspaceSlug || !projectId || !issueId) return;
+
+    const nextValue = !isSubscribed;
+    setLoading(true);
+    setIsSubscribed(nextValue);
+
+    try {
+      if (nextValue) {
+        await issueService.subscribeToIssueNotifications(workspaceSlug, projectId, issueId);
+      } else {
+        await issueService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);
+      }
+
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("toast.success"),
+        message: nextValue ? t("issue.subscription.actions.subscribed") : t("issue.subscription.actions.unsubscribed"),
+      });
+    } catch {
+      setIsSubscribed(!nextValue);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: t("common.error.message"),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (isSubscribed === undefined) {
+    return (
+      <Loader>
+        <Loader.Item width="106px" height="40px" />
+      </Loader>
+    );
+  }
+
+  return (
+    <Button
+      prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
+      variant="secondary"
+      className={cn("hover:!bg-accent-primary/20", buttonClassName)}
+      onClick={handleSubscription}
+      disabled={loading}
+      size="lg"
+    >
+      {loading ? (
+        <span className="hidden sm:block">{t("common.loading")}</span>
+      ) : isSubscribed ? (
+        <span className="hidden sm:block">{t("common.actions.unsubscribe")}</span>
+      ) : (
+        <span className="hidden sm:block">{t("common.actions.subscribe")}</span>
+      )}
+    </Button>
+  );
+});
diff --git a/plane-src/apps/web/core/components/workspace-notifications/root.tsx b/plane-src/apps/web/core/components/workspace-notifications/root.tsx
index 562171d..8dc2d09 100644
--- a/plane-src/apps/web/core/components/workspace-notifications/root.tsx
+++ b/plane-src/apps/web/core/components/workspace-notifications/root.tsx
@@ -105,6 +105,8 @@ export const NotificationsRoot = observer(function NotificationsRoot({ workspace
                   workspaceSlug={workspace_slug}
                   projectId={project_id}
                   inboxIssueId={issue_id}
+                  embedIssue
+                  embedRemoveCurrentNotification={embedRemoveCurrentNotification}
                 />
               )}
             </>