feat: init

apps/space/core/components/issues/peek-overview/comment/add-comment.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useForm, Controller } from "react-hook-form";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { SitesFileService } from "@plane/services";
+import type { TIssuePublicComment } from "@plane/types";
+// editor components
+import { LiteTextEditor } from "@/components/editor/lite-text-editor";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+// services
+const fileService = new SitesFileService();
+
+const defaultValues: Partial<TIssuePublicComment> = {
+  comment_html: "",
+};
+
+type Props = {
+  anchor: string;
+  disabled?: boolean;
+};
+
+export const AddComment: React.FC<Props> = observer((props) => {
+  const { anchor } = props;
+  // states
+  const [uploadedAssetIds, setUploadAssetIds] = useState<string[]>([]);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  // store hooks
+  const { peekId: issueId, addIssueComment, uploadCommentAsset } = useIssueDetails();
+  const { data: currentUser } = useUser();
+  const { workspace: workspaceID } = usePublish(anchor);
+  // form info
+  const {
+    handleSubmit,
+    control,
+    watch,
+    formState: { isSubmitting },
+    reset,
+  } = useForm<TIssuePublicComment>({ defaultValues });
+
+  const onSubmit = async (formData: TIssuePublicComment) => {
+    if (!anchor || !issueId || isSubmitting || !formData.comment_html) return;
+
+    await addIssueComment(anchor, issueId, formData)
+      .then(async (res) => {
+        reset(defaultValues);
+        editorRef.current?.clearEditor();
+        if (uploadedAssetIds.length > 0) {
+          await fileService.updateBulkAssetsUploadStatus(anchor, res.id, {
+            asset_ids: uploadedAssetIds,
+          });
+          setUploadAssetIds([]);
+        }
+      })
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Comment could not be posted. Please try again.",
+        })
+      );
+  };
+
+  // TODO: on click if he user is not logged in redirect to login page
+  return (
+    <div>
+      <div className="issue-comments-section">
+        <Controller
+          name="comment_html"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <LiteTextEditor
+              editable
+              onEnterKeyPress={(e) => {
+                if (currentUser) handleSubmit(onSubmit)(e);
+              }}
+              anchor={anchor}
+              workspaceId={workspaceID?.toString() ?? ""}
+              ref={editorRef}
+              id="peek-overview-add-comment"
+              initialValue={
+                !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                  ? watch("comment_html")
+                  : value
+              }
+              onChange={(comment_json, comment_html) => onChange(comment_html)}
+              isSubmitting={isSubmitting}
+              placeholder="Add comment..."
+              uploadFile={async (blockId, file) => {
+                const { asset_id } = await uploadCommentAsset(file, anchor);
+                setUploadAssetIds((prev) => [...prev, asset_id]);
+                return asset_id;
+              }}
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -0,0 +1,218 @@
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
+import { Menu, Transition } from "@headlessui/react";
+// plane imports
+import type { EditorRefApi } from "@plane/editor";
+import type { TIssuePublicComment } from "@plane/types";
+import { getFileURL } from "@plane/utils";
+// components
+import { LiteTextEditor } from "@/components/editor/lite-text-editor";
+import { CommentReactions } from "@/components/issues/peek-overview/comment/comment-reactions";
+// helpers
+import { timeAgo } from "@/helpers/date-time.helper";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+
+type Props = {
+  anchor: string;
+  comment: TIssuePublicComment;
+};
+
+export const CommentCard: React.FC<Props> = observer((props) => {
+  const { anchor, comment } = props;
+  // store hooks
+  const { peekId, deleteIssueComment, updateIssueComment, uploadCommentAsset } = useIssueDetails();
+  const { data: currentUser } = useUser();
+  const { workspace: workspaceID } = usePublish(anchor);
+  const isInIframe = useIsInIframe();
+
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  const showEditorRef = useRef<EditorRefApi>(null);
+  // form info
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+  } = useForm<any>({
+    defaultValues: { comment_html: comment.comment_html },
+  });
+
+  const handleDelete = () => {
+    if (!anchor || !peekId) return;
+    deleteIssueComment(anchor, peekId, comment.id);
+  };
+
+  const handleCommentUpdate = async (formData: TIssuePublicComment) => {
+    if (!anchor || !peekId) return;
+    updateIssueComment(anchor, peekId, comment.id, formData);
+    setIsEditing(false);
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
+  };
+
+  return (
+    <div className="relative flex items-start space-x-3">
+      <div className="relative px-1">
+        {comment.actor_detail.avatar_url && comment.actor_detail.avatar_url !== "" ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={getFileURL(comment.actor_detail.avatar_url)}
+            alt={
+              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+            }
+            height={30}
+            width={30}
+            className="grid h-7 w-7 place-items-center rounded-full border-2 border-custom-border-200"
+          />
+        ) : (
+          <div className={`grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 text-white`}>
+            {comment.actor_detail.is_bot
+              ? comment?.actor_detail?.first_name?.charAt(0)
+              : comment?.actor_detail?.display_name?.charAt(0)}
+          </div>
+        )}
+
+        <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
+          <MessageSquare className="h-3 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
+        </span>
+      </div>
+      <div className="min-w-0 flex-1">
+        <div>
+          <div className="text-xs">
+            {comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}
+          </div>
+          <p className="mt-0.5 text-xs text-custom-text-200">
+            <>commented {timeAgo(comment.created_at)}</>
+          </p>
+        </div>
+        <div className="issue-comments-section p-0">
+          <form
+            onSubmit={handleSubmit(handleCommentUpdate)}
+            className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
+          >
+            <div>
+              <Controller
+                control={control}
+                name="comment_html"
+                render={({ field: { onChange, value } }) => (
+                  <LiteTextEditor
+                    editable
+                    anchor={anchor}
+                    workspaceId={workspaceID?.toString() ?? ""}
+                    onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+                    ref={editorRef}
+                    id={comment.id}
+                    initialValue={value}
+                    value={null}
+                    onChange={(comment_json, comment_html) => onChange(comment_html)}
+                    isSubmitting={isSubmitting}
+                    showSubmitButton={false}
+                    uploadFile={async (blockId, file) => {
+                      const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
+                      return asset_id;
+                    }}
+                  />
+                )}
+              />
+            </div>
+            <div className="flex gap-1 self-end">
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              >
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
+              </button>
+              <button
+                type="button"
+                className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
+                onClick={() => setIsEditing(false)}
+              >
+                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
+              </button>
+            </div>
+          </form>
+          <div className={`${isEditing ? "hidden" : ""}`}>
+            <LiteTextEditor
+              editable={false}
+              anchor={anchor}
+              workspaceId={workspaceID?.toString() ?? ""}
+              ref={showEditorRef}
+              id={comment.id}
+              initialValue={comment.comment_html}
+              displayConfig={{
+                fontSize: "small-font",
+              }}
+            />
+            <CommentReactions anchor={anchor} commentId={comment.id} />
+          </div>
+        </div>
+      </div>
+
+      {!isInIframe && currentUser?.id === comment?.actor_detail?.id && (
+        <Menu as="div" className="relative w-min text-left">
+          <Menu.Button
+            type="button"
+            onClick={() => {}}
+            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
+          >
+            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
+          </Menu.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"
+          >
+            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Edit
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+              <Menu.Item>
+                {({ active }) => (
+                  <div className="py-1">
+                    <button
+                      type="button"
+                      onClick={handleDelete}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                )}
+              </Menu.Item>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Tooltip } from "@plane/propel/tooltip";
+// plane imports
+import { cn } from "@plane/utils";
+// ui
+import { ReactionSelector } from "@/components/ui";
+// helpers
+import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
+import { queryParamGenerator } from "@/helpers/query-param-generator";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+
+type Props = {
+  anchor: string;
+  commentId: string;
+};
+
+export const CommentReactions: React.FC<Props> = observer((props) => {
+  const { anchor, commentId } = props;
+  const router = useRouter();
+  const pathName = usePathname();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+
+  // hooks
+  const { addCommentReaction, removeCommentReaction, details, peekId } = useIssueDetails();
+  const { data: user } = useUser();
+  const isInIframe = useIsInIframe();
+
+  const commentReactions = peekId ? details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions : [];
+  const groupedReactions = peekId ? groupReactions(commentReactions ?? [], "reaction") : {};
+
+  const userReactions = commentReactions?.filter((r) => r?.actor_detail?.id === user?.id);
+
+  const handleAddReaction = (reactionHex: string) => {
+    if (!anchor || !peekId) return;
+    addCommentReaction(anchor, peekId, commentId, reactionHex);
+  };
+
+  const handleRemoveReaction = (reactionHex: string) => {
+    if (!anchor || !peekId) return;
+    removeCommentReaction(anchor, peekId, commentId, reactionHex);
+  };
+
+  const handleReactionClick = (reactionHex: string) => {
+    const userReaction = userReactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
+
+    if (userReaction) handleRemoveReaction(reactionHex);
+    else handleAddReaction(reactionHex);
+  };
+
+  // derived values
+  const { queryParam } = queryParamGenerator({ peekId, board, state, priority, labels });
+
+  return (
+    <div className="mt-2 flex items-center gap-1.5">
+      {!isInIframe && (
+        <ReactionSelector
+          onSelect={(value) => {
+            if (user) handleReactionClick(value);
+            else router.push(`/?next_path=${pathName}?${queryParam}`);
+          }}
+          position="top"
+          selected={userReactions?.map((r) => r.reaction)}
+          size="md"
+        />
+      )}
+
+      {Object.keys(groupedReactions || {}).map((reaction) => {
+        const reactions = groupedReactions?.[reaction] ?? [];
+        const REACTIONS_LIMIT = 1000;
+
+        if (reactions.length > 0)
+          return (
+            <Tooltip
+              key={reaction}
+              tooltipContent={
+                <div>
+                  {reactions
+                    .map((r) => r?.actor_detail?.display_name)
+                    .splice(0, REACTIONS_LIMIT)
+                    .join(", ")}
+                  {reactions.length > REACTIONS_LIMIT && " and " + (reactions.length - REACTIONS_LIMIT) + " more"}
+                </div>
+              }
+            >
+              <button
+                type="button"
+                onClick={() => {
+                  if (isInIframe) return;
+                  if (user) handleReactionClick(reaction);
+                  else router.push(`/?next_path=${pathName}?${queryParam}`);
+                }}
+                className={cn(
+                  `flex h-full items-center gap-1 rounded-md px-2 py-1 text-sm text-custom-text-100 ${
+                    commentReactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
+                      ? "bg-custom-primary-100/10"
+                      : "bg-custom-background-80"
+                  }`,
+                  {
+                    "cursor-default": isInIframe,
+                  }
+                )}
+              >
+                <span>{renderEmoji(reaction)}</span>
+                <span
+                  className={
+                    commentReactions?.some((r) => r?.actor_detail?.id === user?.id && r.reaction === reaction)
+                      ? "text-custom-primary-100"
+                      : ""
+                  }
+                >
+                  {groupedReactions?.[reaction].length}{" "}
+                </span>
+              </button>
+            </Tooltip>
+          );
+      })}
+    </div>
+  );
+});

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

@@ -0,0 +1,70 @@
+"use client";
+
+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: React.FC<Props> = observer((props) => {
+  const { anchor, handleClose, issueDetails } = props;
+
+  return (
+    <div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 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-custom-border-200" />
+            {/* 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>
+  );
+});

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

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Link2, MoveRight } from "lucide-react";
+import { Listbox, Transition } from "@headlessui/react";
+// ui
+import { CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
+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: SidePanelIcon, label: "Side Peek" },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    label: "Modal",
+  },
+  {
+    key: "full",
+    icon: FullScreenPanelIcon,
+    label: "Full Screen",
+  },
+];
+
+export const PeekOverviewHeader: React.FC<Props> = observer((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 ?? SidePanelIcon;
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4">
+          {peekMode === "side" && (
+            <button type="button" onClick={handleClose} className="text-custom-text-300 hover:text-custom-text-200">
+              <MoveRight className="size-4" />
+            </button>
+          )}
+          <Listbox
+            as="div"
+            value={peekMode}
+            onChange={(val) => setPeekMode(val)}
+            className="relative flex-shrink-0 text-left"
+          >
+            <Listbox.Button
+              className={`grid place-items-center text-custom-text-300 hover:text-custom-text-200 ${peekMode === "full" ? "rotate-45" : ""}`}
+            >
+              <Icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+            </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 className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
+                <div className="space-y-1 p-2">
+                  {PEEK_MODES.map((mode) => (
+                    <Listbox.Option
+                      key={mode.key}
+                      value={mode.key}
+                      className={({ active, selected }) =>
+                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      <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") && (
+          <div className="flex flex-shrink-0 items-center gap-2">
+            <button
+              type="button"
+              onClick={handleCopyLink}
+              className="focus:outline-none text-custom-text-300 hover:text-custom-text-200"
+              tabIndex={1}
+            >
+              <Link2 className="h-4 w-4 -rotate-45" />
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});

apps/space/core/components/issues/peek-overview/index.ts

@@ -0,0 +1 @@
+export * from "./layout";

apps/space/core/components/issues/peek-overview/issue-activity.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// plane imports
+import { Button } from "@plane/propel/button";
+// components
+import { AddComment } from "@/components/issues/peek-overview/comment/add-comment";
+import { CommentCard } from "@/components/issues/peek-overview/comment/comment-detail-card";
+import { Icon } from "@/components/ui";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+import { useUser } from "@/hooks/store/use-user";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+// types
+import type { IIssue } from "@/types/issue";
+
+type Props = {
+  anchor: string;
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+  const { anchor } = props;
+  // router
+  const pathname = usePathname();
+  // store hooks
+  const { details, peekId } = useIssueDetails();
+  const { data: currentUser } = useUser();
+  const { canComment } = usePublish(anchor);
+  // derived values
+  const comments = details[peekId || ""]?.comments || [];
+  const isInIframe = useIsInIframe();
+
+  return (
+    <div className="pb-10">
+      <h4 className="font-medium">Comments</h4>
+      <div className="mt-4">
+        <div className="space-y-4">
+          {comments.map((comment) => (
+            <CommentCard key={comment.id} anchor={anchor} comment={comment} />
+          ))}
+        </div>
+        {!isInIframe &&
+          (currentUser ? (
+            <>
+              {canComment && (
+                <div className="mt-4">
+                  <AddComment anchor={anchor} disabled={!currentUser} />
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="mt-4 flex items-center justify-between gap-2 rounded border border-custom-border-300 bg-custom-background-80 px-2 py-2.5">
+              <p className="flex gap-2 overflow-hidden break-words text-sm text-custom-text-200">
+                <Icon iconName="lock" className="!text-sm" />
+                Sign in to add your comment
+              </p>
+              <Link href={`/?next_path=${pathname}`}>
+                <Button variant="primary">Sign in</Button>
+              </Link>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/issue-details.tsx

@@ -0,0 +1,40 @@
+import { observer } from "mobx-react";
+// plane imports
+import { RichTextEditor } from "@/components/editor/rich-text-editor";
+import { usePublish } from "@/hooks/store/publish";
+// types
+import type { IIssue } from "@/types/issue";
+// local imports
+import { IssueReactions } from "./issue-reaction";
+
+type Props = {
+  anchor: string;
+  issueDetails: IIssue;
+};
+
+export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
+  const { anchor, issueDetails } = props;
+  // store hooks
+  const { project_details, workspace: workspaceID } = usePublish(anchor);
+  // derived values
+  const description = issueDetails.description_html;
+
+  return (
+    <div className="space-y-2">
+      <h6 className="text-base font-medium text-custom-text-400">
+        {project_details?.identifier}-{issueDetails?.sequence_id}
+      </h6>
+      <h4 className="break-words text-2xl font-medium">{issueDetails.name}</h4>
+      {description && description !== "" && description !== "<p></p>" && (
+        <RichTextEditor
+          editable={false}
+          anchor={anchor}
+          id={issueDetails.id}
+          initialValue={description}
+          workspaceId={workspaceID?.toString() ?? ""}
+        />
+      )}
+      <IssueReactions anchor={anchor} />
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/issue-properties.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { CalendarCheck2, Signal } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { DoubleCircleIcon, StateGroupIcon } from "@plane/propel/icons";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { cn, getIssuePriorityFilters } from "@plane/utils";
+// components
+import { Icon } from "@/components/ui";
+// helpers
+import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+import { copyTextToClipboard, addSpaceIfCamelCase } from "@/helpers/string.helper";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import { useStates } from "@/hooks/store/use-state";
+// types
+import type { IIssue, IPeekMode } from "@/types/issue";
+
+type Props = {
+  issueDetails: IIssue;
+  mode?: IPeekMode;
+};
+
+export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDetails, mode }) => {
+  // hooks
+  const { t } = useTranslation();
+  const { getStateById } = useStates();
+  const state = getStateById(issueDetails?.state_id ?? undefined);
+
+  const { anchor } = useParams();
+
+  const { project_details } = usePublish(anchor?.toString());
+
+  const priority = issueDetails.priority ? getIssuePriorityFilters(issueDetails.priority) : null;
+
+  const handleCopyLink = () => {
+    const urlToCopy = window.location.href;
+
+    copyTextToClipboard(urlToCopy).then(() => {
+      setToast({
+        type: TOAST_TYPE.INFO,
+        title: "Link copied!",
+        message: "Work item link copied to clipboard",
+      });
+    });
+  };
+
+  return (
+    <div className={mode === "full" ? "divide-y divide-custom-border-200" : ""}>
+      {mode === "full" && (
+        <div className="flex justify-between gap-2 pb-3">
+          <h6 className="flex items-center gap-2 font-medium">
+            {project_details?.identifier}-{issueDetails.sequence_id}
+          </h6>
+          <div className="flex items-center gap-2">
+            <button type="button" onClick={handleCopyLink} className="-rotate-45">
+              <Icon iconName="link" />
+            </button>
+          </div>
+        </div>
+      )}
+      <div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
+        <div className="flex items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <DoubleCircleIcon className="size-4 flex-shrink-0" />
+            <span>State</span>
+          </div>
+          <div className="w-3/4 flex items-center gap-1.5 py-0.5 text-sm">
+            <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
+            {addSpaceIfCamelCase(state?.name ?? "")}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <Signal className="size-4 flex-shrink-0" />
+            <span>Priority</span>
+          </div>
+          <div className="w-3/4">
+            <div
+              className={`inline-flex items-center gap-1.5 rounded px-2.5 py-0.5 text-left text-sm capitalize ${
+                priority?.key === "urgent"
+                  ? "border-red-500/20 bg-red-500/20 text-red-500"
+                  : priority?.key === "high"
+                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                    : priority?.key === "medium"
+                      ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                      : priority?.key === "low"
+                        ? "border-green-500/20 bg-green-500/20 text-green-500"
+                        : "border-custom-border-200 bg-custom-background-80"
+              }`}
+            >
+              {priority && (
+                <span className="-my-1 grid place-items-center">
+                  <Icon iconName={priority?.icon} />
+                </span>
+              )}
+              <span>{t(priority?.titleTranslationKey || "common.none")}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3 h-8">
+          <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
+            <CalendarCheck2 className="size-4 flex-shrink-0" />
+            <span>Due date</span>
+          </div>
+          <div>
+            {issueDetails.target_date ? (
+              <div
+                className={cn("flex items-center gap-1.5 rounded py-0.5 text-xs text-custom-text-100", {
+                  "text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
+                })}
+              >
+                <CalendarCheck2 className="size-3" />
+                {renderFormattedDate(issueDetails.target_date)}
+              </div>
+            ) : (
+              <span className="text-custom-text-200">Empty</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/issue-reaction.tsx

@@ -0,0 +1,33 @@
+import { observer } from "mobx-react";
+// components
+import { IssueEmojiReactions } from "@/components/issues/reactions/issue-emoji-reactions";
+import { IssueVotes } from "@/components/issues/reactions/issue-vote-reactions";
+// hooks
+import { usePublish } from "@/hooks/store/publish";
+import useIsInIframe from "@/hooks/use-is-in-iframe";
+
+type Props = {
+  anchor: string;
+};
+
+export const IssueReactions: React.FC<Props> = observer((props) => {
+  const { anchor } = props;
+  // store hooks
+  const { canVote, canReact } = usePublish(anchor);
+  const isInIframe = useIsInIframe();
+
+  return (
+    <div className="mt-4 flex items-center gap-3">
+      {canVote && (
+        <div className="flex items-center gap-2">
+          <IssueVotes anchor={anchor} />
+        </div>
+      )}
+      {!isInIframe && canReact && (
+        <div className="flex items-center gap-2">
+          <IssueEmojiReactions anchor={anchor} />
+        </div>
+      )}
+    </div>
+  );
+});

apps/space/core/components/issues/peek-overview/layout.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import type { FC } from "react";
+import { Fragment, useEffect, useState } from "react";
+import { observer } from "mobx-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Dialog, Transition } from "@headlessui/react";
+// hooks
+import { useIssueDetails } from "@/hooks/store/use-issue-details";
+// local imports
+import { FullScreenPeekView } from "./full-screen-peek-view";
+import { SidePeekView } from "./side-peek-view";
+
+type TIssuePeekOverview = {
+  anchor: string;
+  peekId: string;
+  handlePeekClose?: () => void;
+};
+
+export const IssuePeekOverview: FC<TIssuePeekOverview> = observer((props) => {
+  const { anchor, peekId, handlePeekClose } = props;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  // query params
+  const board = searchParams.get("board") || undefined;
+  const state = searchParams.get("state") || undefined;
+  const priority = searchParams.get("priority") || undefined;
+  const labels = searchParams.get("labels") || undefined;
+  // states
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+  const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+  // store
+  const issueDetailStore = useIssueDetails();
+
+  const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
+
+  useEffect(() => {
+    if (anchor && peekId) {
+      issueDetailStore.fetchIssueDetails(anchor, peekId.toString());
+    }
+  }, [anchor, issueDetailStore, peekId]);
+
+  const handleClose = () => {
+    // if close logic is passed down, call that instead of the below logic
+    if (handlePeekClose) {
+      handlePeekClose();
+      return;
+    }
+
+    issueDetailStore.setPeekId(null);
+    let queryParams: any = {
+      board,
+    };
+    if (priority && priority.length > 0) queryParams = { ...queryParams, priority: priority };
+    if (state && state.length > 0) queryParams = { ...queryParams, state: state };
+    if (labels && labels.length > 0) queryParams = { ...queryParams, labels: labels };
+    queryParams = new URLSearchParams(queryParams).toString();
+    router.push(`/issues/${anchor}?${queryParams}`);
+  };
+
+  useEffect(() => {
+    if (peekId) {
+      if (issueDetailStore.peekMode === "side") {
+        setIsSidePeekOpen(true);
+        setIsModalPeekOpen(false);
+      } else {
+        setIsModalPeekOpen(true);
+        setIsSidePeekOpen(false);
+      }
+    } else {
+      setIsSidePeekOpen(false);
+      setIsModalPeekOpen(false);
+    }
+  }, [peekId, issueDetailStore.peekMode]);
+
+  return (
+    <>
+      <Transition.Root appear show={isSidePeekOpen} as={Fragment}>
+        <Dialog as="div" onClose={handleClose}>
+          <Transition.Child
+            as={Fragment}
+            enter="transition-transform duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-transform duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            <Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
+              <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition.Root>
+      <Transition.Root appear show={isModalPeekOpen} as={Fragment}>
+        <Dialog as="div" onClose={handleClose}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 z-20 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+          </Transition.Child>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <Dialog.Panel>
+              <div
+                className={`fixed left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-custom-background-100 shadow-custom-shadow-xl transition-all duration-300 ${
+                  issueDetailStore.peekMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                }`}
+              >
+                {issueDetailStore.peekMode === "modal" && (
+                  <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+                {issueDetailStore.peekMode === "full" && (
+                  <FullScreenPeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
+                )}
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});

apps/space/core/components/issues/peek-overview/side-peek-view.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane imports
+import { Loader } from "@plane/ui";
+// store hooks
+import { usePublish } from "@/hooks/store/publish";
+// 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 SidePeekView: React.FC<Props> = observer((props) => {
+  const { anchor, handleClose, issueDetails } = props;
+  // store hooks
+  const { canComment } = usePublish(anchor);
+
+  return (
+    <div className="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>
+          {/* issue properties */}
+          <div className="mt-6 w-full">
+            <PeekOverviewIssueProperties issueDetails={issueDetails} />
+          </div>
+          {/* divider */}
+          <div className="my-5 h-[1] w-full border-t border-custom-border-200" />
+          {/* issue activity/comments */}
+          {canComment && (
+            <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>
+  );
+});