From b05579d50616bbffb39682d50cb18883f67b5a39 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 11 Jun 2024 17:33:31 +0530
Subject: [PATCH] [WEB-1508] chore: module and cycle peek view improvement
 (#4758)

* chore: module and cycle list layout peek view improvement

* chore: code refactor
---
 .../[projectId]/cycles/(detail)/[cycleId]/page.tsx  | 13 +++++++++++--
 .../modules/(detail)/[moduleId]/page.tsx            | 13 +++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
index 7adcdeecc8..f334d5e19c 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -8,8 +8,12 @@ import { EmptyState } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { CycleDetailsSidebar } from "@/components/cycles";
 import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
+// constants
+import { EIssuesStoreType } from "@/constants/issue";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
-import { useCycle, useProject } from "@/hooks/store";
+import { useCycle, useIssues, useProject } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyCycle from "@/public/empty-state/cycle.svg";
@@ -21,6 +25,7 @@ const CycleDetailPage = observer(() => {
   // store hooks
   const { fetchCycleDetails, getCycleById } = useCycle();
   const { getProjectById } = useProject();
+  const { issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   // hooks
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
   // fetching cycle details
@@ -41,6 +46,8 @@ const CycleDetailPage = observer(() => {
    */
   const toggleSidebar = () => setValue(`${!isSidebarCollapsed}`);
 
+  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+
   return (
     <>
       <PageHead title={pageTitle} />
@@ -62,7 +69,9 @@ const CycleDetailPage = observer(() => {
             </div>
             {cycleId && !isSidebarCollapsed && (
               <div
-                className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm"
+                className={cn(
+                  "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 z-10"
+                )}
                 style={{
                   boxShadow:
                     "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
index a3c0453ab5..74a1dae836 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
@@ -8,8 +8,12 @@ import { EmptyState } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { ModuleLayoutRoot } from "@/components/issues";
 import { ModuleDetailsSidebar } from "@/components/modules";
+// constants
+import { EIssuesStoreType } from "@/constants/issue";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
-import { useModule, useProject } from "@/hooks/store";
+import { useIssues, useModule, useProject } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // assets
 import emptyModule from "@/public/empty-state/module.svg";
@@ -21,6 +25,7 @@ const ModuleIssuesPage = observer(() => {
   // store hooks
   const { fetchModuleDetails, getModuleById } = useModule();
   const { getProjectById } = useProject();
+  const { issuesFilter } = useIssues(EIssuesStoreType.MODULE);
   // local storage
   const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
   const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
@@ -42,6 +47,8 @@ const ModuleIssuesPage = observer(() => {
 
   if (!workspaceSlug || !projectId || !moduleId) return <></>;
 
+  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+
   return (
     <>
       <PageHead title={pageTitle} />
@@ -62,7 +69,9 @@ const ModuleIssuesPage = observer(() => {
           </div>
           {moduleId && !isSidebarCollapsed && (
             <div
-              className="flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm"
+              className={cn(
+                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 duration-300 vertical-scrollbar scrollbar-sm fixed right-0 z-10"
+              )}
               style={{
                 boxShadow:
                   "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",