snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/space/components/issues/peek-overview/full-screen-peek-view.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { observer } from "mobx-react";
+// plane imports
+import { Loader } from "@plane/ui";
+// types
+import type { IIssue } from "@/types/issue";
+// local imports
+import { PeekOverviewHeader } from "./header";
+import { PeekOverviewIssueActivity } from "./issue-activity";
+import { PeekOverviewIssueDetails } from "./issue-details";
+import { PeekOverviewIssueProperties } from "./issue-properties";
+
+type Props = {
+  anchor: string;
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+export const FullScreenPeekView = observer(function FullScreenPeekView(props: Props) {
+  const { anchor, handleClose, issueDetails } = props;
+
+  return (
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-subtle-1 overflow-hidden">
+      <div className="col-span-7 flex h-full w-full flex-col overflow-hidden">
+        <div className="w-full p-5">
+          <PeekOverviewHeader handleClose={handleClose} issueDetails={issueDetails} />
+        </div>
+        {issueDetails ? (
+          <div className="h-full w-full overflow-y-auto px-6">
+            {/* issue title and description */}
+            <div className="w-full">
+              <PeekOverviewIssueDetails anchor={anchor} issueDetails={issueDetails} />
+            </div>
+            {/* divider */}
+            <div className="my-5 h-[1] w-full border-t border-subtle" />
+            {/* issue activity/comments */}
+            <div className="w-full pb-5">
+              <PeekOverviewIssueActivity anchor={anchor} issueDetails={issueDetails} />
+            </div>
+          </div>
+        ) : (
+          <Loader className="px-6">
+            <Loader.Item height="30px" />
+            <div className="mt-3 space-y-2">
+              <Loader.Item height="20px" width="70%" />
+              <Loader.Item height="20px" width="60%" />
+              <Loader.Item height="20px" width="60%" />
+            </div>
+          </Loader>
+        )}
+      </div>
+      <div className="col-span-3 h-full w-full overflow-y-auto">
+        {/* issue properties */}
+        <div className="w-full px-6 py-5">
+          {issueDetails ? (
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          ) : (
+            <Loader className="mt-11 space-y-4">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});