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

/**
 * 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>
    </>
  );
});