From 2bd6c19c1310b104ca14656bb7189ce0f82fbcdb Mon Sep 17 00:00:00 2001 From: chamikaJ Date: Wed, 30 Jul 2025 17:20:20 +0530 Subject: [PATCH] refactor(layouts): simplify MainLayout and enhance styling - Removed unused imports and performance monitoring hooks from MainLayout. - Updated layout structure to improve responsiveness and styling, including sticky header and optimized content padding. - Adjusted home page layout to reduce margin and improve spacing for better visual consistency. - Enhanced TodoList component with collapsible sections for improved user interaction and task management. - Streamlined project and schedule pages by removing unnecessary margin adjustments, ensuring a cleaner layout. --- .../task-list-v2/TaskListV2Table.tsx | 6 +- worklenz-frontend/src/layouts/MainLayout.tsx | 76 ++------ .../src/pages/home/home-page.tsx | 6 +- .../src/pages/home/todo-list/todo-list.tsx | 170 +++++++++++------- .../src/pages/projects/project-list.tsx | 2 +- .../projects/projectView/project-view.tsx | 4 +- .../src/pages/schedule/schedule.tsx | 2 +- 7 files changed, 128 insertions(+), 138 deletions(-) diff --git a/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx b/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx index 36b8182a..95262a28 100644 --- a/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx +++ b/worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx @@ -105,7 +105,7 @@ const DropSpacer: React.FC<{ isVisible: boolean; visibleColumns: any[]; isDarkMo ...(column.isSticky && { position: 'sticky' as const, left: leftPosition, - zIndex: 5, + zIndex: 10, backgroundColor: 'inherit', // Inherit from parent spacer }), }; @@ -161,7 +161,7 @@ const EmptyGroupMessage: React.FC<{ visibleColumns: any[]; isDarkMode?: boolean ...(column.isSticky && { position: 'sticky' as const, left: leftPosition, - zIndex: 5, + zIndex: 10, backgroundColor: 'inherit', // Inherit from parent container }), }; @@ -668,7 +668,7 @@ const TaskListV2Section: React.FC = () => { ...(column.isSticky && { position: 'sticky' as const, left: leftPosition, - zIndex: 10, + zIndex: 15, backgroundColor: isDarkMode ? '#141414' : '#f9fafb', // custom dark header : bg-gray-50 }), }; diff --git a/worklenz-frontend/src/layouts/MainLayout.tsx b/worklenz-frontend/src/layouts/MainLayout.tsx index b1c6a7d3..0361ed79 100644 --- a/worklenz-frontend/src/layouts/MainLayout.tsx +++ b/worklenz-frontend/src/layouts/MainLayout.tsx @@ -1,62 +1,18 @@ -import { Col, ConfigProvider, Layout } from '@/shared/antd-imports'; -import { Outlet } from 'react-router-dom'; -import { memo, useMemo, useEffect, useRef } from 'react'; -import { useMediaQuery } from 'react-responsive'; +import { ConfigProvider, Layout } from '@/shared/antd-imports'; +import { Outlet, useLocation } from 'react-router-dom'; +import { memo, useMemo } from 'react'; import Navbar from '../features/navbar/navbar'; import { useAppSelector } from '../hooks/useAppSelector'; import { colors } from '../styles/colors'; -import { useRenderPerformance } from '@/utils/performance'; -import { DynamicCSSLoader, LayoutStabilizer } from '@/utils/css-optimizations'; - const MainLayout = memo(() => { const themeMode = useAppSelector(state => state.themeReducer.mode); - const isDesktop = useMediaQuery({ query: '(min-width: 1024px)' }); - const layoutRef = useRef(null); - - // Performance monitoring in development - useRenderPerformance('MainLayout'); - - // Apply layout optimizations - useEffect(() => { - if (layoutRef.current) { - // Prevent layout shifts in main content area - LayoutStabilizer.applyContainment(layoutRef.current, 'layout'); - - // Load non-critical CSS dynamically - DynamicCSSLoader.loadCSS('/styles/non-critical.css', { - priority: 'low', - media: 'all' - }); - } - }, []); - + const location = useLocation(); + const isProjectView = location.pathname.includes('/projects/') && + !location.pathname.endsWith('/projects'); - // Memoize styles to prevent object recreation on every render - const headerStyles = useMemo( - () => ({ - zIndex: 999, - position: 'fixed' as const, - width: '100%', - display: 'flex', - alignItems: 'center', - padding: 0, - borderBottom: themeMode === 'dark' ? '1px solid #303030' : 'none', - }), - [themeMode] - ); - - const contentStyles = useMemo( - () => ({ - paddingInline: isDesktop ? 64 : 24, - overflowX: 'hidden' as const, - }), - [isDesktop] - ); - - // Memoize theme configuration const themeConfig = useMemo( () => ({ components: { @@ -69,23 +25,19 @@ const MainLayout = memo(() => { [themeMode] ); - // Memoize header className - const headerClassName = useMemo( - () => `shadow-md ${themeMode === 'dark' ? '' : 'shadow-[#18181811]'}`, - [themeMode] - ); - return ( - - + + - - - - + + diff --git a/worklenz-frontend/src/pages/home/home-page.tsx b/worklenz-frontend/src/pages/home/home-page.tsx index aba0890a..37b6b618 100644 --- a/worklenz-frontend/src/pages/home/home-page.tsx +++ b/worklenz-frontend/src/pages/home/home-page.tsx @@ -103,7 +103,7 @@ const HomePage = memo(() => { }, [isDesktop, isOwnerOrAdmin]); return ( -
+
{CreateProjectButtonComponent} @@ -113,13 +113,13 @@ const HomePage = memo(() => { - - + + diff --git a/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx b/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx index d1ab980b..147b0208 100644 --- a/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx +++ b/worklenz-frontend/src/pages/home/todo-list/todo-list.tsx @@ -1,9 +1,10 @@ -import { CheckCircleOutlined, SyncOutlined } from '@/shared/antd-imports'; +import { CheckCircleOutlined, SyncOutlined, DownOutlined, RightOutlined } from '@/shared/antd-imports'; import { useRef, useState } from 'react'; import Form from 'antd/es/form'; import Input, { InputRef } from 'antd/es/input'; import Flex from 'antd/es/flex'; import Card from 'antd/es/card'; +import Collapse from 'antd/es/collapse'; import ConfigProvider from 'antd/es/config-provider'; import Table, { TableProps } from 'antd/es/table'; import Tooltip from 'antd/es/tooltip'; @@ -23,6 +24,7 @@ import { useCreatePersonalTaskMutation } from '@/api/home-page/home-page.api.ser const TodoList = () => { const [isAlertShowing, setIsAlertShowing] = useState(false); + const [isCollapsed, setIsCollapsed] = useState(true); const [form] = Form.useForm(); const { t } = useTranslation('home'); @@ -97,73 +99,109 @@ const TodoList = () => { ]; return ( - - {t('home:todoList.title')} ({data?.body.length}) - - } - extra={ - -