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

apps/space/components/issues/peek-overview/header.tsx

@@ -0,0 +1,140 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import React from "react";
+import { observer } from "mobx-react";
+import {
+  ArrowNarrowRightOutline,
+  FullScreenPeekOutline,
+  LinkOutline,
+  ModalPeekOutline,
+  SidePeekOutline,
+} from "@makeplane/propel/icons";
+import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+// helpers
+import { copyTextToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import useClipboardWritePermission from "@/hooks/use-clipboard-write-permission";
+// types
+import type { IIssue, IPeekMode } from "@/types/issue";
+
+type Props = {
+  handleClose: () => void;
+  issueDetails: IIssue | undefined;
+};
+
+const PEEK_MODES: {
+  key: IPeekMode;
+  icon: any;
+  label: string;
+}[] = [
+  { key: "side", icon: SidePeekOutline, label: "Side Peek" },
+  {
+    key: "modal",
+    icon: ModalPeekOutline,
+    label: "Modal",
+  },
+  {
+    key: "full",
+    icon: FullScreenPeekOutline,
+    label: "Full Screen",
+  },
+];
+
+export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Props) {
+  const { handleClose } = props;
+
+  const { peekMode, setPeekMode } = useIssueDetails();
+  const isClipboardWriteAllowed = useClipboardWritePermission();
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Link copied!",
+        message: "Work item link copied to clipboard.",
+      });
+    });
+  };
+
+  const Icon = PEEK_MODES.find((m) => m.key === peekMode)?.icon ?? SidePeekOutline;
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          {peekMode === "side" && (
+            <button type="button" onClick={handleClose} className="text-tertiary hover:text-secondary">
+              <ArrowNarrowRightOutline className="size-4" />
+            </button>
+          )}
+          <Listbox
+            as="div"
+            value={peekMode}
+            onChange={(val) => setPeekMode(val)}
+            className="relative shrink-0 text-left"
+          >
+            <Listbox.Button
+              className={`grid place-items-center text-tertiary hover:text-secondary ${peekMode === "full" ? "rotate-45" : ""}`}
+            >
+              <Icon className="h-4 w-4 text-tertiary hover:text-secondary" />
+            </Listbox.Button>
+
+            <Transition
+              as={React.Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Listbox.Options
+                as="ul"
+                className="shadow-lg absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border border-strong bg-surface-2 text-11 whitespace-nowrap focus:outline-none"
+              >
+                <div className="space-y-1 p-2">
+                  {PEEK_MODES.map((mode) => (
+                    <Listbox.Option
+                      as="li"
+                      key={mode.key}
+                      value={mode.key}
+                      className={({ active, selected }) =>
+                        `cursor-pointer truncate rounded-sm px-1 py-1.5 select-none ${
+                          active ? "bg-layer-transparent-hover" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
+                      }
+                    >
+                      <div className="flex items-center gap-1.5">
+                        <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                        {mode.label}
+                      </div>
+                    </Listbox.Option>
+                  ))}
+                </div>
+              </Listbox.Options>
+            </Transition>
+          </Listbox>
+        </div>
+        {isClipboardWriteAllowed && (peekMode === "side" || peekMode === "modal") && (
+          <button
+            type="button"
+            onClick={handleCopyLink}
+            className="shrink-0 text-tertiary hover:text-secondary focus:outline-none"
+            tabIndex={1}
+          >
+            <LinkOutline className="h-4 w-4 -rotate-45" />
+          </button>
+        )}
+      </div>
+    </>
+  );
+});