From 529e6f4c6f4f270208eefc954a380f83c33fb46f Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Tue, 26 Aug 2025 17:55:09 +0530 Subject: [PATCH 1/3] chore: app sidebar ui enhancements and code refactor --- .../[workspaceSlug]/(projects)/sidebar.tsx | 72 +++--------------- .../components/sidebar/sidebar-wrapper.tsx | 74 +++++++++++++++++++ 2 files changed, 85 insertions(+), 61 deletions(-) create mode 100644 apps/web/core/components/sidebar/sidebar-wrapper.tsx diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx index 2fd3218c073..2108c96b8c2 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx @@ -1,36 +1,24 @@ -import { FC, useEffect, useRef } from "react"; +import { FC } from "react"; import isEmpty from "lodash/isEmpty"; import { observer } from "mobx-react"; // plane helpers import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; -import { useOutsideClickDetector } from "@plane/hooks"; // components -import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button"; -import { SidebarDropdown } from "@/components/workspace/sidebar/dropdown"; import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu"; -import { HelpMenu } from "@/components/workspace/sidebar/help-menu"; import { SidebarProjectsList } from "@/components/workspace/sidebar/projects-list"; import { SidebarQuickActions } from "@/components/workspace/sidebar/quick-actions"; import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items"; +import { SidebarWrapper } from "@/components/sidebar/sidebar-wrapper"; // hooks -import { useAppTheme } from "@/hooks/store/use-app-theme"; import { useFavorite } from "@/hooks/store/use-favorite"; import { useUserPermissions } from "@/hooks/store/user"; -import { useAppRail } from "@/hooks/use-app-rail"; -import useSize from "@/hooks/use-window-size"; // plane web components -import { WorkspaceEditionBadge } from "@/plane-web/components/workspace/edition-badge"; import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list"; export const AppSidebar: FC = observer(() => { // store hooks const { allowPermissions } = useUserPermissions(); - const { toggleSidebar, sidebarCollapsed } = useAppTheme(); - const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail(); const { groupedFavorites } = useFavorite(); - const windowSize = useSize(); - // refs - const ref = useRef(null); // derived values const canPerformWorkspaceMemberActions = allowPermissions( @@ -38,55 +26,17 @@ export const AppSidebar: FC = observer(() => { EUserPermissionsLevel.WORKSPACE ); - useOutsideClickDetector(ref, () => { - if (sidebarCollapsed === false) { - if (window.innerWidth < 768) { - toggleSidebar(); - } - } - }); - - useEffect(() => { - if (windowSize[0] < 768 && !sidebarCollapsed) toggleSidebar(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [windowSize]); - const isFavoriteEmpty = isEmpty(groupedFavorites); return ( - <> -
- {/* Workspace switcher and settings */} - {!shouldRenderAppRail && } - - {isAppRailEnabled && ( -
- Projects -
- -
-
- )} - {/* Quick actions */} - -
-
- - {/* Favorites Menu */} - {canPerformWorkspaceMemberActions && !isFavoriteEmpty && } - {/* Teams List */} - - {/* Projects List */} - -
- {/* Help Section */} -
- -
- {!shouldRenderAppRail && } - {!isAppRailEnabled && } -
-
- + }> + + {/* Favorites Menu */} + {canPerformWorkspaceMemberActions && !isFavoriteEmpty && } + {/* Teams List */} + + {/* Projects List */} + + ); }); diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx new file mode 100644 index 00000000000..7cffa49b2d5 --- /dev/null +++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx @@ -0,0 +1,74 @@ +import { FC, useEffect, useRef } from "react"; +import { observer } from "mobx-react"; +// plane helpers +import { useOutsideClickDetector } from "@plane/hooks"; +// components +import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button"; +import { SidebarDropdown } from "@/components/workspace/sidebar/dropdown"; +import { HelpMenu } from "@/components/workspace/sidebar/help-menu"; +// hooks +import { useAppTheme } from "@/hooks/store/use-app-theme"; +import { useAppRail } from "@/hooks/use-app-rail"; +import useSize from "@/hooks/use-window-size"; +// plane web components +import { WorkspaceEditionBadge } from "@/plane-web/components/workspace/edition-badge"; + +type TSidebarWrapperProps = { + title: string; + children: React.ReactNode; + quickActions?: React.ReactNode; +}; + +export const SidebarWrapper: FC = observer((props) => { + const { children, title, quickActions } = props; + // store hooks + const { toggleSidebar, sidebarCollapsed } = useAppTheme(); + const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail(); + const windowSize = useSize(); + // refs + const ref = useRef(null); + + useOutsideClickDetector(ref, () => { + if (sidebarCollapsed === false) { + if (window.innerWidth < 768) { + toggleSidebar(); + } + } + }); + + useEffect(() => { + if (windowSize[0] < 768 && !sidebarCollapsed) toggleSidebar(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [windowSize]); + + return ( + <> +
+ {/* Workspace switcher and settings */} + {!shouldRenderAppRail && } + + {isAppRailEnabled && ( +
+ {title} +
+ +
+
+ )} + {/* Quick actions */} + {quickActions && quickActions} +
+
+ {children} +
+ {/* Help Section */} +
+ +
+ {!shouldRenderAppRail && } + {!isAppRailEnabled && } +
+
+ + ); +}); From 1c244791f719e76865b882ef248ba8cf9eb7b805 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 27 Aug 2025 18:19:08 +0530 Subject: [PATCH 2/3] chore: code refactor --- apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx | 2 +- apps/web/core/components/sidebar/sidebar-wrapper.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx index 2108c96b8c2..f392746443f 100644 --- a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx +++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx @@ -4,11 +4,11 @@ import { observer } from "mobx-react"; // plane helpers import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants"; // components +import { SidebarWrapper } from "@/components/sidebar/sidebar-wrapper"; import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu"; import { SidebarProjectsList } from "@/components/workspace/sidebar/projects-list"; import { SidebarQuickActions } from "@/components/workspace/sidebar/quick-actions"; import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items"; -import { SidebarWrapper } from "@/components/sidebar/sidebar-wrapper"; // hooks import { useFavorite } from "@/hooks/store/use-favorite"; import { useUserPermissions } from "@/hooks/store/user"; diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx index 7cffa49b2d5..a8b38fbe9da 100644 --- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx +++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx @@ -20,7 +20,7 @@ type TSidebarWrapperProps = { }; export const SidebarWrapper: FC = observer((props) => { - const { children, title, quickActions } = props; + const { children, title, quickActions } = props; // store hooks const { toggleSidebar, sidebarCollapsed } = useAppTheme(); const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail(); @@ -42,7 +42,7 @@ export const SidebarWrapper: FC = observer((props) => { }, [windowSize]); return ( - <> +
{/* Workspace switcher and settings */} {!shouldRenderAppRail && } @@ -69,6 +69,6 @@ export const SidebarWrapper: FC = observer((props) => { {!isAppRailEnabled && }
- + ); }); From 7e5e6ae8651ca7a1547c5ad53d6ed03895a21612 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Wed, 27 Aug 2025 18:26:27 +0530 Subject: [PATCH 3/3] chore: code refactor --- apps/web/core/components/sidebar/sidebar-wrapper.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx index a8b38fbe9da..386f590cd78 100644 --- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx +++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx @@ -29,10 +29,8 @@ export const SidebarWrapper: FC = observer((props) => { const ref = useRef(null); useOutsideClickDetector(ref, () => { - if (sidebarCollapsed === false) { - if (window.innerWidth < 768) { - toggleSidebar(); - } + if (sidebarCollapsed === false && window.innerWidth < 768) { + toggleSidebar(); } }); @@ -56,7 +54,7 @@ export const SidebarWrapper: FC = observer((props) => { )} {/* Quick actions */} - {quickActions && quickActions} + {quickActions}
{children}