Merge pull request #3697 from makeplane/preview

release: 0.15.4-dev

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -15,6 +15,7 @@ import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
 
 export type IRichTextEditor = {
   value: string;
+  initialValue?: string;
   dragDropEnabled?: boolean;
   uploadFile: UploadImage;
   restoreFile: RestoreImage;
@@ -54,6 +55,7 @@ const RichTextEditor = ({
   setShouldShowAlert,
   editorContentCustomClassNames,
   value,
+  initialValue,
   uploadFile,
   deleteFile,
   noBorder,
@@ -97,6 +99,10 @@ const RichTextEditor = ({
     customClassName,
   });
 
+  React.useEffect(() => {
+    if (editor && initialValue && editor.getHTML() != initialValue) editor.commands.setContent(initialValue);
+  }, [editor, initialValue]);
+
   if (!editor) return null;
 
   return (

web/components/core/theme/custom-theme-selector.tsx

@@ -66,7 +66,6 @@ export const CustomThemeSelector: React.FC = observer(() => {
 
   const handleValueChange = (val: string | undefined, onChange: any) => {
     let hex = val;
-
     // prepend a hashtag if it doesn't exist
     if (val && val[0] !== "#") hex = `#${val}`;
 
@@ -94,7 +93,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#0d101b"
                       className="w-full"
                       style={{
-                        backgroundColor: value,
+                        backgroundColor: watch("background"),
                         color: watch("text"),
                       }}
                       hasError={Boolean(errors?.background)}
@@ -120,8 +119,8 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#c5c5c5"
                       className="w-full"
                       style={{
-                        backgroundColor: watch("background"),
-                        color: value,
+                        backgroundColor: watch("text"),
+                        color: watch("background"),
                       }}
                       hasError={Boolean(errors?.text)}
                     />
@@ -146,7 +145,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#3f76ff"
                       className="w-full"
                       style={{
-                        backgroundColor: value,
+                        backgroundColor: watch("primary"),
                         color: watch("text"),
                       }}
                       hasError={Boolean(errors?.primary)}
@@ -172,7 +171,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#0d101b"
                       className="w-full"
                       style={{
-                        backgroundColor: value,
+                        backgroundColor: watch("sidebarBackground"),
                         color: watch("sidebarText"),
                       }}
                       hasError={Boolean(errors?.sidebarBackground)}
@@ -200,8 +199,8 @@ export const CustomThemeSelector: React.FC = observer(() => {
                       placeholder="#c5c5c5"
                       className="w-full"
                       style={{
-                        backgroundColor: watch("sidebarBackground"),
-                        color: value,
+                        backgroundColor: watch("sidebarText"),
+                        color: watch("sidebarBackground"),
                       }}
                       hasError={Boolean(errors?.sidebarText)}
                     />

web/components/issues/description-input.tsx

@@ -1,5 +1,4 @@
 import { FC, useState, useEffect } from "react";
-import { observer } from "mobx-react";
 // components
 import { Loader } from "@plane/ui";
 import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
@@ -12,48 +11,47 @@ const fileService = new FileService();
 import { TIssueOperations } from "./issue-detail";
 // hooks
 import useDebounce from "hooks/use-debounce";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
 
 export type IssueDescriptionInputProps = {
-  disabled?: boolean;
-  value: string | undefined | null;
   workspaceSlug: string;
-  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
-  issueOperations: TIssueOperations;
   projectId: string;
   issueId: string;
+  value: string | undefined;
+  initialValue: string | undefined;
+  disabled?: boolean;
+  issueOperations: TIssueOperations;
+  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
 };
 
-export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
-  const { disabled, value, workspaceSlug, setIsSubmitting, issueId, issueOperations, projectId } = props;
+export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = (props) => {
+  const { workspaceSlug, projectId, issueId, value, initialValue, disabled, issueOperations, setIsSubmitting } = props;
   // states
   const [descriptionHTML, setDescriptionHTML] = useState(value);
   // store hooks
   const { mentionHighlights, mentionSuggestions } = useMention();
-  const workspaceStore = useWorkspace();
+  const { getWorkspaceBySlug } = useWorkspace();
   // hooks
-  const { setShowAlert } = useReloadConfirmations();
   const debouncedValue = useDebounce(descriptionHTML, 1500);
   // computed values
-  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id as string;
 
   useEffect(() => {
     setDescriptionHTML(value);
   }, [value]);
 
   useEffect(() => {
-    if (debouncedValue || debouncedValue === "") {
+    if (debouncedValue && debouncedValue !== value) {
       issueOperations
         .update(workspaceSlug, projectId, issueId, { description_html: debouncedValue }, false)
         .finally(() => {
-          setIsSubmitting("saved");
+          setIsSubmitting("submitted");
         });
     }
     // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue]);
 
-  if (!descriptionHTML && descriptionHTML !== "") {
+  if (!descriptionHTML) {
     return (
       <Loader>
         <Loader.Item height="150px" />
@@ -79,17 +77,15 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
       deleteFile={fileService.getDeleteImageFunction(workspaceId)}
       restoreFile={fileService.getRestoreImageFunction(workspaceId)}
       value={descriptionHTML}
-      setShouldShowAlert={setShowAlert}
-      setIsSubmitting={setIsSubmitting}
+      initialValue={initialValue}
       dragDropEnabled
       customClassName="min-h-[150px] shadow-sm"
       onChange={(description: Object, description_html: string) => {
-        setShowAlert(true);
         setIsSubmitting("submitting");
-        setDescriptionHTML(description_html);
+        setDescriptionHTML(description_html === "" ? "<p></p>" : description_html);
       }}
       mentionSuggestions={mentionSuggestions}
       mentionHighlights={mentionHighlights}
     />
   );
-});
+};

web/components/issues/issue-detail/inbox/main-content.tsx

@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // components
 import { IssueUpdateStatus, TIssueOperations } from "components/issues";
 import { IssueTitleInput } from "../../title-input";
@@ -31,12 +32,31 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 
-  const issue = getIssueById(issueId);
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 3000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  const issue = issueId ? getIssueById(issueId) : undefined;
   if (!issue) return <></>;
 
   const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
 
+  const issueDescription =
+    issue.description_html !== undefined || issue.description_html !== null
+      ? issue.description_html != ""
+        ? issue.description_html
+        : "<p></p>"
+      : undefined;
+
   return (
     <>
       <div className="rounded-lg space-y-4">
@@ -63,6 +83,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
           issueId={issue.id}
+          isSubmitting={isSubmitting}
           setIsSubmitting={(value) => setIsSubmitting(value)}
           issueOperations={issueOperations}
           disabled={!is_editable}
@@ -73,10 +94,11 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
           issueId={issue.id}
-          setIsSubmitting={(value) => setIsSubmitting(value)}
-          issueOperations={issueOperations}
+          value={issueDescription}
+          initialValue={issueDescription}
           disabled={!is_editable}
-          value={issue.description_html}
+          issueOperations={issueOperations}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
         />
 
         {currentUser && (

web/components/issues/issue-detail/main-content.tsx

@@ -1,7 +1,8 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 // hooks
 import { useIssueDetail, useProjectState, useUser } from "hooks/store";
+import useReloadConfirmations from "hooks/use-reload-confirmation";
 // components
 import { IssueAttachmentRoot, IssueUpdateStatus } from "components/issues";
 import { IssueTitleInput } from "../title-input";
@@ -33,12 +34,31 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
   const {
     issue: { getIssueById },
   } = useIssueDetail();
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 
-  const issue = getIssueById(issueId);
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  const issue = issueId ? getIssueById(issueId) : undefined;
   if (!issue) return <></>;
 
   const currentIssueState = projectStates?.find((s) => s.id === issue.state_id);
 
+  const issueDescription =
+    issue.description_html !== undefined || issue.description_html !== null
+      ? issue.description_html != ""
+        ? issue.description_html
+        : "<p></p>"
+      : undefined;
+
   return (
     <>
       <div className="rounded-lg space-y-4">
@@ -67,6 +87,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
           issueId={issue.id}
+          isSubmitting={isSubmitting}
           setIsSubmitting={(value) => setIsSubmitting(value)}
           issueOperations={issueOperations}
           disabled={!is_editable}
@@ -77,10 +98,11 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
           workspaceSlug={workspaceSlug}
           projectId={issue.project_id}
           issueId={issue.id}
-          setIsSubmitting={(value) => setIsSubmitting(value)}
-          issueOperations={issueOperations}
+          value={issueDescription}
+          initialValue={issueDescription}
           disabled={!is_editable}
-          value={issue.description_html}
+          issueOperations={issueOperations}
+          setIsSubmitting={(value) => setIsSubmitting(value)}
         />
 
         {currentUser && (

web/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx

@@ -54,7 +54,7 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
           <div className="relative h-full w-full overflow-auto">
             <ArchivedIssueListLayout />
           </div>
-          <IssuePeekOverview is_archived={true} />
+          <IssuePeekOverview is_archived />
         </Fragment>
       )}
     </div>

web/components/issues/peek-overview/header.tsx

@@ -0,0 +1,153 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react";
+import { MoveRight, MoveDiagonal, Link2, Trash2 } from "lucide-react";
+// ui
+import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
+// helpers
+import { copyUrlToClipboard } from "helpers/string.helper";
+// hooks
+import useToast from "hooks/use-toast";
+// store hooks
+import { useUser } from "hooks/store";
+// components
+import { IssueSubscription, IssueUpdateStatus } from "components/issues";
+
+export type TPeekModes = "side-peek" | "modal" | "full-screen";
+
+const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
+  {
+    key: "side-peek",
+    icon: SidePanelIcon,
+    title: "Side Peek",
+  },
+  {
+    key: "modal",
+    icon: CenterPanelIcon,
+    title: "Modal",
+  },
+  {
+    key: "full-screen",
+    icon: FullScreenPanelIcon,
+    title: "Full Screen",
+  },
+];
+
+export type PeekOverviewHeaderProps = {
+  peekMode: TPeekModes;
+  setPeekMode: (value: TPeekModes) => void;
+  removeRoutePeekId: () => void;
+  workspaceSlug: string;
+  projectId: string;
+  issueId: string;
+  isArchived: boolean;
+  disabled: boolean;
+  toggleDeleteIssueModal: (value: boolean) => void;
+  isSubmitting: "submitting" | "submitted" | "saved";
+};
+
+export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((props) => {
+  const {
+    peekMode,
+    setPeekMode,
+    workspaceSlug,
+    projectId,
+    issueId,
+    isArchived,
+    disabled,
+    removeRoutePeekId,
+    toggleDeleteIssueModal,
+    isSubmitting,
+  } = props;
+  // router
+  const router = useRouter();
+  // store hooks
+  const { currentUser } = useUser();
+  // hooks
+  const { setToastAlert } = useToast();
+  // derived values
+  const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
+
+  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    copyUrlToClipboard(
+      `${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`
+    ).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Issue link copied to clipboard.",
+      });
+    });
+  };
+
+  const redirectToIssueDetail = () => {
+    router.push({
+      pathname: `/${workspaceSlug}/projects/${projectId}/${isArchived ? "archived-issues" : "issues"}/${issueId}`,
+    });
+    removeRoutePeekId();
+  };
+
+  return (
+    <div
+      className={`relative flex items-center justify-between p-4 ${
+        currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
+      }`}
+    >
+      <div className="flex items-center gap-4">
+        <button onClick={removeRoutePeekId}>
+          <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+        </button>
+
+        <button onClick={redirectToIssueDetail}>
+          <MoveDiagonal className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+        </button>
+        {currentMode && (
+          <div className="flex flex-shrink-0 items-center gap-2">
+            <CustomSelect
+              value={currentMode}
+              onChange={(val: any) => setPeekMode(val)}
+              customButton={
+                <button type="button" className="">
+                  <currentMode.icon className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
+                </button>
+              }
+            >
+              {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-custom-text-200"
+                        : "text-custom-text-400 hover:text-custom-text-200"
+                    }`}
+                  >
+                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                    {mode.title}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center gap-x-4">
+        <IssueUpdateStatus isSubmitting={isSubmitting} />
+        <div className="flex items-center gap-4">
+          {currentUser && !isArchived && (
+            <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
+          )}
+          <button onClick={handleCopyText}>
+            <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
+          </button>
+          {!disabled && (
+            <button onClick={() => toggleDeleteIssueModal(true)}>
+              <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});

web/components/issues/peek-overview/index.ts

@@ -2,3 +2,4 @@ export * from "./issue-detail";
 export * from "./properties";
 export * from "./root";
 export * from "./view";
+export * from "./header";

web/components/issues/peek-overview/issue-detail.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
 // store hooks
 import { useIssueDetail, useProject, useUser } from "hooks/store";
@@ -9,7 +9,6 @@ import { TIssueOperations } from "components/issues";
 import { IssueReaction } from "../issue-detail/reactions";
 import { IssueTitleInput } from "../title-input";
 import { IssueDescriptionInput } from "../description-input";
-import { debounce } from "lodash";
 
 interface IPeekOverviewIssueDetails {
   workspaceSlug: string;
@@ -22,20 +21,39 @@ interface IPeekOverviewIssueDetails {
 }
 
 export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
-  const { workspaceSlug, issueId, issueOperations, disabled, setIsSubmitting } = props;
+  const { workspaceSlug, issueId, issueOperations, disabled, isSubmitting, setIsSubmitting } = props;
   // store hooks
   const { getProjectById } = useProject();
   const { currentUser } = useUser();
   const {
     issue: { getIssueById },
   } = useIssueDetail();
-  // derived values
-  const issue = getIssueById(issueId);
+  // hooks
+  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
 
+  useEffect(() => {
+    if (isSubmitting === "submitted") {
+      setShowAlert(false);
+      setTimeout(async () => {
+        setIsSubmitting("saved");
+      }, 2000);
+    } else if (isSubmitting === "submitting") {
+      setShowAlert(true);
+    }
+  }, [isSubmitting, setShowAlert, setIsSubmitting]);
+
+  const issue = issueId ? getIssueById(issueId) : undefined;
   if (!issue) return <></>;
 
   const projectDetails = getProjectById(issue?.project_id);
 
+  const issueDescription =
+    issue.description_html !== undefined || issue.description_html !== null
+      ? issue.description_html != ""
+        ? issue.description_html
+        : "<p></p>"
+      : undefined;
+
   return (
     <>
       <span className="text-base font-medium text-custom-text-400">
@@ -45,20 +63,24 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
         workspaceSlug={workspaceSlug}
         projectId={issue.project_id}
         issueId={issue.id}
+        isSubmitting={isSubmitting}
         setIsSubmitting={(value) => setIsSubmitting(value)}
         issueOperations={issueOperations}
         disabled={disabled}
         value={issue.name}
       />
+
       <IssueDescriptionInput
         workspaceSlug={workspaceSlug}
         projectId={issue.project_id}
         issueId={issue.id}
-        setIsSubmitting={(value) => setIsSubmitting(value)}
-        issueOperations={issueOperations}
+        value={issueDescription}
+        initialValue={issueDescription}
         disabled={disabled}
-        value={issue.description_html}
+        issueOperations={issueOperations}
+        setIsSubmitting={(value) => setIsSubmitting(value)}
       />
+
       {currentUser && (
         <IssueReaction
           workspaceSlug={workspaceSlug}

web/components/issues/peek-overview/view.tsx

@@ -1,28 +1,25 @@
 import { FC, useRef, useState } from "react";
-import { useRouter } from "next/router";
+
 import { observer } from "mobx-react-lite";
-import { MoveRight, MoveDiagonal, Link2, Trash2 } from "lucide-react";
+
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 import useKeypress from "hooks/use-keypress";
 // store hooks
-import { useIssueDetail, useUser } from "hooks/store";
-import useToast from "hooks/use-toast";
+import { useIssueDetail } from "hooks/store";
 // components
 import {
   DeleteArchivedIssueModal,
   DeleteIssueModal,
-  IssueSubscription,
-  IssueUpdateStatus,
+  IssuePeekOverviewHeader,
+  TPeekModes,
   PeekOverviewIssueDetails,
   PeekOverviewProperties,
   TIssueOperations,
 } from "components/issues";
 import { IssueActivity } from "../issue-detail/issue-activity";
 // ui
-import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
-// helpers
-import { copyUrlToClipboard } from "helpers/string.helper";
+import { Spinner } from "@plane/ui";
 
 interface IIssueView {
   workspaceSlug: string;
@@ -34,72 +31,28 @@ interface IIssueView {
   issueOperations: TIssueOperations;
 }
 
-type TPeekModes = "side-peek" | "modal" | "full-screen";
-
-const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
-  {
-    key: "side-peek",
-    icon: SidePanelIcon,
-    title: "Side Peek",
-  },
-  {
-    key: "modal",
-    icon: CenterPanelIcon,
-    title: "Modal",
-  },
-  {
-    key: "full-screen",
-    icon: FullScreenPanelIcon,
-    title: "Full Screen",
-  },
-];
-
 export const IssueView: FC<IIssueView> = observer((props) => {
   const { workspaceSlug, projectId, issueId, isLoading, is_archived, disabled = false, issueOperations } = props;
-  // router
-  const router = useRouter();
   // states
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
   // store hooks
-  const { setPeekIssue, isAnyModalOpen, isDeleteIssueModalOpen, toggleDeleteIssueModal } = useIssueDetail();
-  const { currentUser } = useUser();
   const {
+    setPeekIssue,
+    isAnyModalOpen,
+    isDeleteIssueModalOpen,
+    toggleDeleteIssueModal,
     issue: { getIssueById },
   } = useIssueDetail();
-  const { setToastAlert } = useToast();
-  // derived values
-  const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
   const issue = getIssueById(issueId);
-
+  // remove peek id
   const removeRoutePeekId = () => {
     setPeekIssue(undefined);
   };
+  // hooks
   useOutsideClickDetector(issuePeekOverviewRef, () => !isAnyModalOpen && removeRoutePeekId());
-
-  const redirectToIssueDetail = () => {
-    router.push({
-      pathname: `/${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`,
-    });
-    removeRoutePeekId();
-  };
-
-  const handleCopyText = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    copyUrlToClipboard(
-      `${workspaceSlug}/projects/${projectId}/${is_archived ? "archived-issues" : "issues"}/${issueId}`
-    ).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
-      });
-    });
-  };
-
   const handleKeyDown = () => !isAnyModalOpen && removeRoutePeekId();
   useKeypress("Escape", handleKeyDown);
 
@@ -141,66 +94,20 @@ export const IssueView: FC<IIssueView> = observer((props) => {
             }}
           >
             {/* header */}
-            <div
-              className={`relative flex items-center justify-between p-4 ${
-                currentMode?.key === "full-screen" ? "border-b border-custom-border-200" : ""
-              }`}
-            >
-              <div className="flex items-center gap-4">
-                <button onClick={removeRoutePeekId}>
-                  <MoveRight className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
-                </button>
-
-                <button onClick={redirectToIssueDetail}>
-                  <MoveDiagonal className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
-                </button>
-                {currentMode && (
-                  <div className="flex flex-shrink-0 items-center gap-2">
-                    <CustomSelect
-                      value={currentMode}
-                      onChange={(val: any) => setPeekMode(val)}
-                      customButton={
-                        <button type="button" className="">
-                          <currentMode.icon className="h-4 w-4 text-custom-text-400 hover:text-custom-text-200" />
-                        </button>
-                      }
-                    >
-                      {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-custom-text-200"
-                                : "text-custom-text-400 hover:text-custom-text-200"
-                            }`}
-                          >
-                            <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
-                            {mode.title}
-                          </div>
-                        </CustomSelect.Option>
-                      ))}
-                    </CustomSelect>
-                  </div>
-                )}
-              </div>
-              <div className="flex items-center gap-x-4">
-                <IssueUpdateStatus isSubmitting={isSubmitting} />
-                <div className="flex items-center gap-4">
-                  {currentUser && !is_archived && (
-                    <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
-                  )}
-                  <button onClick={handleCopyText}>
-                    <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
-                  </button>
-                  {!disabled && (
-                    <button onClick={() => toggleDeleteIssueModal(true)}>
-                      <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
-                    </button>
-                  )}
-                </div>
-              </div>
-            </div>
-
+            <IssuePeekOverviewHeader
+              peekMode={peekMode}
+              setPeekMode={(value: TPeekModes) => {
+                setPeekMode(value);
+              }}
+              removeRoutePeekId={removeRoutePeekId}
+              toggleDeleteIssueModal={toggleDeleteIssueModal}
+              isArchived={is_archived}
+              issueId={issueId}
+              workspaceSlug={workspaceSlug}
+              projectId={projectId}
+              isSubmitting={isSubmitting}
+              disabled={disabled}
+            />
             {/* content */}
             <div className="relative h-full w-full overflow-hidden overflow-y-auto">
               {isLoading && !issue ? (

web/components/issues/title-input.tsx

@@ -6,12 +6,12 @@ import { TextArea } from "@plane/ui";
 import { TIssueOperations } from "./issue-detail";
 // hooks
 import useDebounce from "hooks/use-debounce";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
 
 export type IssueTitleInputProps = {
   disabled?: boolean;
   value: string | undefined | null;
   workspaceSlug: string;
+  isSubmitting: "submitting" | "submitted" | "saved";
   setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
   issueOperations: TIssueOperations;
   projectId: string;
@@ -23,7 +23,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   // states
   const [title, setTitle] = useState("");
   // hooks
-  const { setShowAlert } = useReloadConfirmations();
+
   const debouncedValue = useDebounce(title, 1500);
 
   useEffect(() => {
@@ -31,7 +31,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   }, [value]);
 
   useEffect(() => {
-    if (debouncedValue) {
+    if (debouncedValue && debouncedValue !== value) {
       issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }, false).finally(() => {
         setIsSubmitting("saved");
       });
@@ -42,11 +42,10 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
 
   const handleTitleChange = useCallback(
     (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setShowAlert(true);
       setIsSubmitting("submitting");
       setTitle(e.target.value);
     },
-    [setIsSubmitting, setShowAlert]
+    [setIsSubmitting]
   );
 
   return (