chore: add arrow navigation position logic

web/components/gantt-chart/contexts/index.tsx

@@ -47,7 +47,14 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({
 
   return (
     <ChartContext.Provider
-      value={{ ...state, scrollLeft, updateScrollLeft, scrollTop, updateScrollTop, dispatch: handleDispatch }}
+      value={{
+        ...state,
+        scrollLeft,
+        updateScrollLeft,
+        scrollTop,
+        updateScrollTop,
+        dispatch: handleDispatch,
+      }}
     >
       {children}
     </ChartContext.Provider>

web/components/gantt-chart/helpers/draggable.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 // hooks
-import { useChart } from "../hooks";
-// types
-import { IGanttBlock } from "../types";
+import { IGanttBlock, useChart } from "components/gantt-chart";
+// helpers
+import { cn } from "helpers/common.helper";
 
 type Props = {
   block: IGanttBlock;
@@ -201,10 +201,8 @@ export const ChartDraggable: React.FC<Props> = (props) => {
   };
   // scroll to a hidden block
   const handleScrollToBlock = () => {
-    const scrollContainer = document.querySelector("#scroll-container") as HTMLElement;
-
+    const scrollContainer = document.querySelector("#scroll-container") as HTMLDivElement;
     if (!scrollContainer || !block.position) return;
-
     // update container's scroll position to the block's position
     scrollContainer.scrollLeft = block.position.marginLeft - 4;
   };
@@ -225,13 +223,18 @@ export const ChartDraggable: React.FC<Props> = (props) => {
 
   const textDisplacement = scrollLeft - (block.position?.marginLeft ?? 0);
 
+  console.log("scrollLeft", scrollLeft);
+
   return (
     <>
       {/* move to left side hidden block button */}
       {isBlockHiddenOnLeft && (
         <div
-          className="fixed z-[1] ml-1 mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
+          className="absolute top-1/2 z-[1] grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
+          style={{
+            transform: `translate(${scrollLeft + 4}px, -50%)`,
+          }}
         >
           <ArrowLeft className="h-3.5 w-3.5" />
         </div>
@@ -239,8 +242,11 @@ export const ChartDraggable: React.FC<Props> = (props) => {
       {/* move to right side hidden block button */}
       {isBlockHiddenOnRight && (
         <div
-          className="fixed right-1 z-[1] mt-1.5 grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
+          className="absolute top-1/2 z-[1] grid h-8 w-8 cursor-pointer place-items-center rounded border border-custom-border-300 bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
+          style={{
+            transform: `translate(${(block.position?.marginLeft ?? 0) - posFromLeft + window.innerWidth - 36}px, -50%)`,
+          }}
         >
           <ArrowRight className="h-3.5 w-3.5" />
         </div>
@@ -261,17 +267,22 @@ export const ChartDraggable: React.FC<Props> = (props) => {
               onMouseDown={handleBlockLeftResize}
               onMouseEnter={() => setIsLeftResizing(true)}
               onMouseLeave={() => setIsLeftResizing(false)}
-              className="absolute -left-2.5 top-1/2 z-[3] h-full w-6 -translate-y-1/2 cursor-col-resize rounded-md"
+              className="absolute -left-2.5 top-1/2 -translate-y-1/2 z-[3] h-full w-6 cursor-col-resize rounded-md"
             />
             <div
-              className={`absolute top-1/2 h-7 w-1 -translate-y-1/2 rounded-sm bg-custom-background-100 transition-all duration-300 ${
-                isLeftResizing ? "-left-2.5" : "left-1"
-              }`}
+              className={cn(
+                "absolute left-1 top-1/2 -translate-y-1/2 h-7 w-1 rounded-sm bg-custom-background-100 transition-all duration-300",
+                {
+                  "-left-2.5": isLeftResizing,
+                }
+              )}
             />
           </>
         )}
         <div
-          className={`relative z-[2] flex h-8 w-full items-center rounded ${isMoving ? "pointer-events-none" : ""}`}
+          className={cn("relative z-[2] flex h-8 w-full items-center rounded", {
+            "pointer-events-none": isMoving,
+          })}
           onMouseDown={handleBlockMove}
         >
           {blockToRender(block.data, textDisplacement)}
@@ -283,12 +294,15 @@ export const ChartDraggable: React.FC<Props> = (props) => {
               onMouseDown={handleBlockRightResize}
               onMouseEnter={() => setIsRightResizing(true)}
               onMouseLeave={() => setIsRightResizing(false)}
-              className="absolute -right-2.5 top-1/2 z-[2] h-full w-6 -translate-y-1/2 cursor-col-resize rounded-md"
+              className="absolute -right-2.5 top-1/2 -translate-y-1/2 z-[2] h-full w-6 cursor-col-resize rounded-md"
             />
             <div
-              className={`absolute top-1/2 h-7 w-1 -translate-y-1/2 rounded-sm bg-custom-background-100 transition-all duration-300 ${
-                isRightResizing ? "-right-2.5" : "right-1"
-              }`}
+              className={cn(
+                "absolute right-1 top-1/2 -translate-y-1/2 h-7 w-1 rounded-sm bg-custom-background-100 transition-all duration-300",
+                {
+                  "-right-2.5": isRightResizing,
+                }
+              )}
             />
           </>
         )}

web/components/gantt-chart/sidebar/sidebar.tsx

@@ -157,13 +157,13 @@ export const IssueGanttSidebar: React.FC<Props> = (props) => {
                               <div className="flex-grow truncate">
                                 <IssueGanttSidebarBlock data={block.data} />
                               </div>
-                              <div className="flex-shrink-0 text-sm text-custom-text-200">
-                                {duration && (
+                              {duration && (
+                                <div className="flex-shrink-0 text-sm text-custom-text-200">
                                   <span>
                                     {duration} day{duration > 1 ? "s" : ""}
                                   </span>
-                                )}
-                              </div>
+                                </div>
+                              )}
                             </div>
                           </div>
                         </div>

web/components/issues/issue-layouts/gantt/blocks.tsx

@@ -61,7 +61,7 @@ export const IssueGanttBlock = ({ data, textDisplacement }: { data: TIssue; text
 // rendering issues on gantt sidebar
 export const IssueGanttSidebarBlock = ({ data }: { data: TIssue }) => {
   // hooks
-  const { getProjectStates } = useProjectState();
+  const { getStateById } = useProjectState();
   const { getProjectById } = useProject();
   const {
     router: { workspaceSlug },
@@ -75,8 +75,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: TIssue }) => {
     data.id &&
     setPeekIssue({ workspaceSlug, projectId: data.project_id, issueId: data.id });
 
-  const currentStateDetails =
-    getProjectStates(data?.project_id)?.find((state) => state?.id == data?.state_id) || undefined;
+  const currentStateDetails = getStateById(data?.state_id);
 
   return (
     <ControlLink
@@ -86,7 +85,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: TIssue }) => {
       className="w-full line-clamp-1 cursor-pointer text-sm text-custom-text-100"
     >
       <div className="relative flex h-full w-full cursor-pointer items-center gap-2" onClick={handleIssuePeekOverview}>
-        {currentStateDetails != undefined && (
+        {currentStateDetails && (
           <StateGroupIcon stateGroup={currentStateDetails?.group} color={currentStateDetails?.color} />
         )}
         <div className="flex-shrink-0 text-xs text-custom-text-300">