From 0a738d419e35b3fc50dc0d86ed86d8ab8833b17e Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Thu, 6 Nov 2025 19:45:56 +0530
Subject: [PATCH] [WEB-5306] refactor: base layouts (#8051)

---
 .../components/base-layouts/kanban/layout.tsx | 21 ++++++++++++-------
 .../base-layouts/layout-switcher.tsx          |  2 +-
 .../components/base-layouts/list/layout.tsx   | 21 ++++++++++++-------
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/apps/web/core/components/base-layouts/kanban/layout.tsx b/apps/web/core/components/base-layouts/kanban/layout.tsx
index 447a6dcb4..7ef47f811 100644
--- a/apps/web/core/components/base-layouts/kanban/layout.tsx
+++ b/apps/web/core/components/base-layouts/kanban/layout.tsx
@@ -20,15 +20,22 @@ export const BaseKanbanLayout = observer(<T extends IBaseLayoutsKanbanItem>(prop
     showEmptyGroups = true,
     enableDragDrop = false,
     loadMoreItems,
-    collapsedGroups: externalCollapsedGroups = [],
-    onToggleGroup: externalOnToggleGroup = () => {},
+    collapsedGroups: externalCollapsedGroups,
+    onToggleGroup: externalOnToggleGroup,
   } = props;
 
-  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState({
-    mode: "external",
-    externalCollapsedGroups,
-    externalOnToggleGroup,
-  });
+  const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
+  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
+    useExternalMode
+      ? {
+          mode: "external",
+          externalCollapsedGroups,
+          externalOnToggleGroup,
+        }
+      : {
+          mode: "internal",
+        }
+  );
 
   return (
     <div ref={containerRef} className={cn("relative w-full flex gap-2 p-3 h-full overflow-x-auto", className)}>
diff --git a/apps/web/core/components/base-layouts/layout-switcher.tsx b/apps/web/core/components/base-layouts/layout-switcher.tsx
index 5fe9c57cf..0f6d39626 100644
--- a/apps/web/core/components/base-layouts/layout-switcher.tsx
+++ b/apps/web/core/components/base-layouts/layout-switcher.tsx
@@ -9,7 +9,7 @@ import { BASE_LAYOUTS } from "./constants";
 type Props = {
   layouts?: TBaseLayoutType[];
   onChange: (layout: TBaseLayoutType) => void;
-  selectedLayout: TBaseLayoutType | undefined;
+  selectedLayout: TBaseLayoutType;
 };
 
 export const LayoutSwitcher: React.FC<Props> = (props) => {
diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
index e423e16d5..59a012007 100644
--- a/apps/web/core/components/base-layouts/list/layout.tsx
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -17,17 +17,24 @@ export const BaseListLayout = observer(<T extends IBaseLayoutsListItem>(props: I
     onDrop,
     canDrag,
     showEmptyGroups = false,
-    collapsedGroups: externalCollapsedGroups = [],
-    onToggleGroup: externalOnToggleGroup = () => {},
+    collapsedGroups: externalCollapsedGroups,
+    onToggleGroup: externalOnToggleGroup,
     loadMoreItems,
     className,
   } = props;
 
-  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState({
-    mode: "external",
-    externalCollapsedGroups,
-    externalOnToggleGroup,
-  });
+  const useExternalMode = externalCollapsedGroups !== undefined && externalOnToggleGroup !== undefined;
+  const { containerRef, collapsedGroups, onToggleGroup } = useLayoutState(
+    useExternalMode
+      ? {
+          mode: "external",
+          externalCollapsedGroups,
+          externalOnToggleGroup,
+        }
+      : {
+          mode: "internal",
+        }
+  );
 
   return (
     <div ref={containerRef} className={cn("relative size-full overflow-auto bg-custom-background-90", className)}>