chore: peek overview for issue view and my issue view

space/components/accounts/sign-in.tsx

@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // components
 import { EmailPasswordForm, GithubLoginButton, GoogleLoginButton, EmailCodeForm } from "components/accounts";
 // images
-const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces/" : "";
+const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces" : "";
 
 export const SignInView = observer(() => {
   const { user: userStore } = useMobxStore();

space/pages/onboarding/index.tsx

@@ -5,7 +5,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { OnBoardingForm } from "components/accounts/onboarding-form";
 
-const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces/" : "";
+const imagePrefix = process.env.NEXT_PUBLIC_DEPLOY_WITH_NGINX ? "/spaces" : "";
 
 const OnBoardingPage = () => {
   const { user: userStore } = useMobxStore();

web/components/core/views/all-views.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -77,6 +77,8 @@ export const AllViews: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
+  const [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);
+
   const { user } = useUser();
   const { memberRole } = useProjectMyMembership();
 
@@ -90,6 +92,10 @@ export const AllViews: React.FC<Props> = ({
   );
   const states = getStatesList(stateGroups);
 
+  const handleMyIssueOpen = (issue: IIssue) => {
+    setMyIssueProjectId(issue.project);
+  };
+
   const handleTrashBox = useCallback(
     (isDragging: boolean) => {
       if (isDragging && !trashBox) setTrashBox(true);
@@ -128,6 +134,8 @@ export const AllViews: React.FC<Props> = ({
                 handleIssueAction={handleIssueAction}
                 openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
                 removeIssue={removeIssue}
+                myIssueProjectId={myIssueProjectId}
+                handleMyIssueOpen={handleMyIssueOpen}
                 disableUserActions={disableUserActions}
                 disableAddIssueOption={disableAddIssueOption}
                 user={user}
@@ -143,6 +151,8 @@ export const AllViews: React.FC<Props> = ({
                 handleIssueAction={handleIssueAction}
                 handleTrashBox={handleTrashBox}
                 openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+                myIssueProjectId={myIssueProjectId}
+                handleMyIssueOpen={handleMyIssueOpen}
                 removeIssue={removeIssue}
                 states={states}
                 user={user}
@@ -166,7 +176,9 @@ export const AllViews: React.FC<Props> = ({
                 userAuth={memberRole}
               />
             ) : (
-              displayFilters?.layout === "gantt_chart" && <GanttChartView />
+              displayFilters?.layout === "gantt_chart" && (
+                <GanttChartView disableUserActions={disableUserActions} />
+              )
             )}
           </>
         ) : router.pathname.includes("archived-issues") ? (

web/components/core/views/board-view/all-boards.tsx

@@ -1,5 +1,12 @@
+import { useRouter } from "next/router";
+
+//hook
+import useMyIssues from "hooks/my-issues/use-my-issues";
+import useIssuesView from "hooks/use-issues-view";
+import useProfileIssues from "hooks/use-profile-issues";
 // components
 import { SingleBoard } from "components/core/views/board-view/single-board";
+import { IssuePeekOverview } from "components/issues";
 // icons
 import { StateGroupIcon } from "components/icons";
 // helpers
@@ -16,6 +23,8 @@ type Props = {
   handleTrashBox: (isDragging: boolean) => void;
   openIssuesListModal?: (() => void) | null;
   removeIssue: ((bridgeId: string, issueId: string) => void) | null;
+  myIssueProjectId?: string | null;
+  handleMyIssueOpen?: (issue: IIssue) => void;
   states: IState[] | undefined;
   user: ICurrentUserResponse | undefined;
   userAuth: UserAuth;
@@ -30,16 +39,40 @@ export const AllBoards: React.FC<Props> = ({
   handleIssueAction,
   handleTrashBox,
   openIssuesListModal,
+  myIssueProjectId,
+  handleMyIssueOpen,
   removeIssue,
   states,
   user,
   userAuth,
   viewProps,
 }) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, userId } = router.query;
+
+  const isProfileIssue =
+    router.pathname.includes("assigned") ||
+    router.pathname.includes("created") ||
+    router.pathname.includes("subscribed");
+
+  const isMyIssue = router.pathname.includes("my-issues");
+
+  const { mutateIssues } = useIssuesView();
+  const { mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
+  const { mutateProfileIssues } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
+
   const { displayFilters, groupedIssues } = viewProps;
 
   return (
     <>
+      <IssuePeekOverview
+        handleMutation={() =>
+          isMyIssue ? mutateMyIssues() : isProfileIssue ? mutateProfileIssues() : mutateIssues()
+        }
+        projectId={myIssueProjectId ? myIssueProjectId : projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={disableUserActions}
+      />
       {groupedIssues ? (
         <div className="horizontal-scroll-enable flex h-full gap-x-4 p-8">
           {Object.keys(groupedIssues).map((singleGroup, index) => {
@@ -63,6 +96,7 @@ export const AllBoards: React.FC<Props> = ({
                 handleIssueAction={handleIssueAction}
                 handleTrashBox={handleTrashBox}
                 openIssuesListModal={openIssuesListModal ?? null}
+                handleMyIssueOpen={handleMyIssueOpen}
                 removeIssue={removeIssue}
                 user={user}
                 userAuth={userAuth}

web/components/core/views/board-view/single-board.tsx

@@ -26,6 +26,7 @@ type Props = {
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
   handleTrashBox: (isDragging: boolean) => void;
   openIssuesListModal?: (() => void) | null;
+  handleMyIssueOpen?: (issue: IIssue) => void;
   removeIssue: ((bridgeId: string, issueId: string) => void) | null;
   user: ICurrentUserResponse | undefined;
   userAuth: UserAuth;
@@ -42,6 +43,7 @@ export const SingleBoard: React.FC<Props> = ({
   handleIssueAction,
   handleTrashBox,
   openIssuesListModal,
+  handleMyIssueOpen,
   removeIssue,
   user,
   userAuth,
@@ -50,7 +52,7 @@ export const SingleBoard: React.FC<Props> = ({
   // collapse/expand
   const [isCollapsed, setIsCollapsed] = useState(true);
 
-  const { displayFilters, groupedIssues, properties } = viewProps;
+  const { displayFilters, groupedIssues } = viewProps;
 
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
@@ -135,6 +137,7 @@ export const SingleBoard: React.FC<Props> = ({
                         makeIssueCopy={() => handleIssueAction(issue, "copy")}
                         handleDeleteIssue={() => handleIssueAction(issue, "delete")}
                         handleTrashBox={handleTrashBox}
+                        handleMyIssueOpen={handleMyIssueOpen}
                         removeIssue={() => {
                           if (removeIssue && issue.bridge_id)
                             removeIssue(issue.bridge_id, issue.id);

web/components/core/views/board-view/single-issue.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 import { mutate } from "swr";
@@ -58,6 +57,7 @@ type Props = {
   index: number;
   editIssue: () => void;
   makeIssueCopy: () => void;
+  handleMyIssueOpen?: (issue: IIssue) => void;
   removeIssue?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
   handleTrashBox: (isDragging: boolean) => void;
@@ -75,6 +75,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
   index,
   editIssue,
   makeIssueCopy,
+  handleMyIssueOpen,
   removeIssue,
   groupTitle,
   handleDeleteIssue,
@@ -187,6 +188,17 @@ export const SingleBoardIssue: React.FC<Props> = ({
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
+  const openPeekOverview = () => {
+    const { query } = router;
+
+    if (handleMyIssueOpen) handleMyIssueOpen(issue);
+
+    router.push({
+      pathname: router.pathname,
+      query: { ...query, peekIssue: issue.id },
+    });
+  };
+
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer || disableUserActions;
 
   return (
@@ -286,16 +298,22 @@ export const SingleBoardIssue: React.FC<Props> = ({
               )}
             </div>
           )}
-          <Link href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}>
-            <a className="flex flex-col gap-1.5">
-              {properties.key && (
-                <div className="text-xs font-medium text-custom-text-200">
-                  {issue.project_detail.identifier}-{issue.sequence_id}
-                </div>
-              )}
-              <h5 className="text-sm break-words line-clamp-2">{issue.name}</h5>
-            </a>
-          </Link>
+
+          <div className="flex flex-col gap-1.5">
+            {properties.key && (
+              <div className="text-xs font-medium text-custom-text-200">
+                {issue.project_detail.identifier}-{issue.sequence_id}
+              </div>
+            )}
+            <button
+              type="button"
+              className="text-sm text-left break-words line-clamp-2"
+              onClick={openPeekOverview}
+            >
+              {issue.name}
+            </button>
+          </div>
+
           <div
             className={`flex items-center gap-2 text-xs ${
               isDropdownActive ? "" : "overflow-x-scroll"