chore: sidebar content wrapper and code refactor

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";

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>
+);

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>
   );
 });

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>
   );
 });

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}>