From 0761183947ee711a330fd5a6ade1608b739ad031 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 23 Sep 2025 14:11:34 +0530
Subject: [PATCH] chore: sidebar content wrapper and code refactor

---
 apps/web/ce/components/sidebar/index.ts          |  1 +
 .../sidebar/sidebar-content-wrapper.tsx          | 11 +++++++++++
 .../ce/components/workspace/edition-badge.tsx    | 16 +++++++++++++---
 .../core/components/sidebar/sidebar-wrapper.tsx  | 16 ++++------------
 packages/propel/src/dialog/root.tsx              | 13 +++++--------
 5 files changed, 34 insertions(+), 23 deletions(-)
 create mode 100644 apps/web/ce/components/sidebar/sidebar-content-wrapper.tsx

diff --git a/apps/web/ce/components/sidebar/index.ts b/apps/web/ce/components/sidebar/index.ts
index 129f4202072..49853c40f28 100644
--- a/apps/web/ce/components/sidebar/index.ts
+++ b/apps/web/ce/components/sidebar/index.ts
@@ -1,2 +1,3 @@
 export * from "./app-switcher";
 export * from "./project-navigation-root";
+export * from "./sidebar-content-wrapper";
diff --git a/apps/web/ce/components/sidebar/sidebar-content-wrapper.tsx b/apps/web/ce/components/sidebar/sidebar-content-wrapper.tsx
new file mode 100644
index 00000000000..707090f3675
--- /dev/null
+++ b/apps/web/ce/components/sidebar/sidebar-content-wrapper.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+type TSidebarContentWrapperProps = {
+  children: React.ReactNode;
+};
+
+export const SidebarContentWrapper = ({ children }: TSidebarContentWrapperProps) => (
+  <div className="flex flex-col gap-3 overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto vertical-scrollbar px-3 pt-3">
+    {children}
+  </div>
+);
diff --git a/apps/web/ce/components/workspace/edition-badge.tsx b/apps/web/ce/components/workspace/edition-badge.tsx
index 7af2cf71eb1..ef86658be23 100644
--- a/apps/web/ce/components/workspace/edition-badge.tsx
+++ b/apps/web/ce/components/workspace/edition-badge.tsx
@@ -1,12 +1,15 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
+import packageJson from "package.json";
 import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@plane/propel/tooltip";
 import { Button } from "@plane/ui";
+import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
+import { HelpMenu } from "@/components/workspace/sidebar/help-menu";
 // hooks
+import { useAppRail } from "@/hooks/use-app-rail";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import packageJson from "package.json";
 // local components
 import { PaidPlanUpgradeModal } from "../license";
 
@@ -15,11 +18,14 @@ export const WorkspaceEditionBadge = observer(() => {
   const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
   // translation
   const { t } = useTranslation();
+  // hooks
+  const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail();
+
   // platform
   const { isMobile } = usePlatformOS();
 
   return (
-    <>
+    <div className="flex items-center justify-between p-3 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
       <PaidPlanUpgradeModal
         isOpen={isPaidPlanPurchaseModalOpen}
         handleClose={() => setIsPaidPlanPurchaseModalOpen(false)}
@@ -36,6 +42,10 @@ export const WorkspaceEditionBadge = observer(() => {
           Community
         </Button>
       </Tooltip>
-    </>
+      <div className="flex items-center gap-2">
+        {!shouldRenderAppRail && <HelpMenu />}
+        {!isAppRailEnabled && <AppSidebarToggleButton />}
+      </div>
+    </div>
   );
 });
diff --git a/apps/web/core/components/sidebar/sidebar-wrapper.tsx b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
index 386f590cd78..fa81e91f829 100644
--- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx
+++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
@@ -5,12 +5,12 @@ 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 { SidebarContentWrapper } from "@/plane-web/components/sidebar";
 import { WorkspaceEditionBadge } from "@/plane-web/components/workspace/edition-badge";
 
 type TSidebarWrapperProps = {
@@ -40,7 +40,7 @@ export const SidebarWrapper: FC<TSidebarWrapperProps> = observer((props) => {
   }, [windowSize]);
 
   return (
-    <div ref={ref} className="flex flex-col h-full w-full">
+    <div ref={ref} className="relative flex flex-col h-full w-full">
       <div className="flex flex-col gap-3 px-3">
         {/* Workspace switcher and settings */}
         {!shouldRenderAppRail && <SidebarDropdown />}
@@ -56,17 +56,9 @@ export const SidebarWrapper: FC<TSidebarWrapperProps> = observer((props) => {
         {/* Quick actions */}
         {quickActions}
       </div>
-      <div className="flex flex-col gap-3 overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto vertical-scrollbar px-3 pt-3 pb-0.5">
-        {children}
-      </div>
+      <SidebarContentWrapper>{children}</SidebarContentWrapper>
       {/* Help Section */}
-      <div className="flex items-center justify-between p-3 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
-        <WorkspaceEditionBadge />
-        <div className="flex items-center gap-2">
-          {!shouldRenderAppRail && <HelpMenu />}
-          {!isAppRailEnabled && <AppSidebarToggleButton />}
-        </div>
-      </div>
+      <WorkspaceEditionBadge />
     </div>
   );
 });
diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx
index 580e4359f0b..a011a843889 100644
--- a/packages/propel/src/dialog/root.tsx
+++ b/packages/propel/src/dialog/root.tsx
@@ -41,14 +41,11 @@ const OVERLAY_CLASSNAME = cn("fixed inset-0 z-backdrop bg-custom-backdrop");
 const BASE_CLASSNAME = "relative text-left bg-custom-background-100 rounded-lg shadow-md w-full z-modal";
 
 // Utility functions
-const getPositionClassNames = React.useCallback(
-  (position: DialogPosition) =>
-    cn("isolate fixed z-modal", {
-      "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center",
-      "top-8 left-1/2 -translate-x-1/2": position === "top",
-    }),
-  []
-);
+const getPositionClassNames = (position: DialogPosition) =>
+  cn("isolate fixed z-modal", {
+    "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2": position === "center",
+    "top-8 left-1/2 -translate-x-1/2": position === "top",
+  });
 
 const DialogPortal = React.memo<React.ComponentProps<typeof BaseDialog.Portal>>(({ children, ...props }) => (
   <BaseDialog.Portal data-slot="dialog-portal" {...props}>