[WEB-5573] refactor: app rail enhancements (#8239)

* chore: app rail context added

* chore: dock/undock app rail implementation

* chore: refactor

* chore: code refactor

* chore: code refactor

Author: anmolsinghbhatia

apps/web/app/(all)/[workspaceSlug]/layout.tsx

@@ -1,15 +1,18 @@
 import { Outlet } from "react-router";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 import { WorkspaceContentWrapper } from "@/plane-web/components/workspace/content-wrapper";
+import { AppRailVisibilityProvider } from "@/plane-web/hooks/app-rail";
 import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 
 export default function WorkspaceLayout() {
   return (
     <AuthenticationWrapper>
       <WorkspaceAuthWrapper>
-        <WorkspaceContentWrapper>
-          <Outlet />
-        </WorkspaceContentWrapper>
+        <AppRailVisibilityProvider>
+          <WorkspaceContentWrapper>
+            <Outlet />
+          </WorkspaceContentWrapper>
+        </AppRailVisibilityProvider>
       </WorkspaceAuthWrapper>
     </AuthenticationWrapper>
   );

apps/web/ce/components/app-rail/app-rail-hoc.tsx

@@ -20,7 +20,7 @@ export function withDockItems<P extends WithDockItemsProps>(WrappedComponent: Re
     const dockItems: (AppSidebarItemData & { shouldRender: boolean })[] = [
       {
         label: "Projects",
-        icon: <PlaneNewIcon className="size-4" />,
+        icon: <PlaneNewIcon className="size-5" />,
         href: `/${workspaceSlug}/`,
         isActive: isProjectsPath && !isNotificationsPath,
         shouldRender: true,

apps/web/ce/components/workspace/content-wrapper.tsx

@@ -3,22 +3,30 @@ import { observer } from "mobx-react";
 // plane imports
 import { cn } from "@plane/utils";
 import { AppRailRoot } from "@/components/navigation";
-// plane web imports
+import { useAppRailVisibility } from "@/lib/app-rail";
+// local imports
 import { TopNavigationRoot } from "../navigations";
 
 export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  // Use the context to determine if app rail should render
+  const { shouldRenderAppRail } = useAppRailVisibility();
+
   return (
     <div className="flex flex-col relative size-full overflow-hidden bg-custom-background-90 transition-all ease-in-out duration-300">
       <TopNavigationRoot />
       <div className="relative flex size-full overflow-hidden">
-        <AppRailRoot />
+        {/* Conditionally render AppRailRoot based on context */}
+        {shouldRenderAppRail && <AppRailRoot />}
         <div
           className={cn(
-            "relative size-full pb-2 pr-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden"
+            "relative size-full pl-0 pb-2 pr-2 flex-grow transition-all ease-in-out duration-300 overflow-hidden",
+            {
+              "pl-2": shouldRenderAppRail,
+            }
           )}
         >
           {children}

apps/web/ce/hooks/app-rail/index.ts

@@ -0,0 +1 @@
+export * from "./provider";

apps/web/ce/hooks/app-rail/provider.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { AppRailVisibilityProvider as CoreProvider } from "@/lib/app-rail";
+
+interface AppRailVisibilityProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * CE AppRailVisibilityProvider
+ * Wraps core provider with isEnabled hardcoded to false
+ */
+export const AppRailVisibilityProvider = observer(({ children }: AppRailVisibilityProviderProps) => (
+  <CoreProvider isEnabled={false}>{children}</CoreProvider>
+));

apps/web/core/components/navigation/app-rail-root.tsx

@@ -8,6 +8,7 @@ import { cn } from "@plane/utils";
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
 // hooks
 import { useAppRailPreferences } from "@/hooks/use-navigation-preferences";
+import { useAppRailVisibility } from "@/lib/app-rail/context";
 // plane web imports
 import { DesktopSidebarWorkspaceMenu } from "@/plane-web/components/desktop";
 // local imports
@@ -19,6 +20,7 @@ export const AppRailRoot = observer(() => {
   const pathname = usePathname();
   // preferences
   const { preferences, updateDisplayMode } = useAppRailPreferences();
+  const { isCollapsed, toggleAppRail } = useAppRailVisibility();
 
   const isSettingsPath = pathname.includes(`/${workspaceSlug}/settings`);
   const showLabel = preferences.displayMode === "icon_with_label";
@@ -70,6 +72,10 @@ export const AppRailRoot = observer(() => {
                 {preferences.displayMode === "icon_with_label" && <Check className="size-3.5" />}
               </div>
             </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item onClick={toggleAppRail}>
+              <span className="text-xs">{isCollapsed ? "Dock App Rail" : "Undock App Rail"}</span>
+            </ContextMenu.Item>
           </ContextMenu.Content>
         </ContextMenu.Portal>
       </ContextMenu>

apps/web/core/components/workspace/sidebar/help-section/root.tsx

@@ -32,7 +32,7 @@ export const HelpMenuRoot = observer(function HelpMenuRoot() {
           <AppSidebarItem
             variant="button"
             item={{
-              icon: <HelpCircle className="size-4" />,
+              icon: <HelpCircle className="size-5" />,
               isActive: isNeedHelpOpen,
             }}
           />

apps/web/core/components/workspace/sidebar/user-menu-root.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 // icons
-import { LogOut, Settings } from "lucide-react";
+import { LogOut, Settings, Settings2 } from "lucide-react";
 // plane imports
 import { GOD_MODE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -74,7 +74,7 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
       maxHeight="lg"
       closeOnSelect
     >
-      <div className="flex flex-col gap-2.5 pb-2">
+      <div className="flex flex-col gap-2">
         <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
         <Link href={`/${workspaceSlug}/settings/account`}>
           <CustomMenu.MenuItem>
@@ -84,6 +84,14 @@ export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
             </div>
           </CustomMenu.MenuItem>
         </Link>
+        <Link href={`/${workspaceSlug}/settings/account/preferences`}>
+          <CustomMenu.MenuItem>
+            <div className="flex w-full items-center gap-2 rounded text-xs">
+              <Settings2 className="h-4 w-4 stroke-[1.5]" />
+              <span>Preferences</span>
+            </div>
+          </CustomMenu.MenuItem>
+        </Link>
       </div>
       <div className="my-1 border-t border-custom-border-200" />
       <div className={`${isUserInstanceAdmin ? "pb-2" : ""}`}>

apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx

@@ -118,7 +118,7 @@ export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: Work
                   <WorkspaceLogo
                     logo={activeWorkspace?.logo_url}
                     name={activeWorkspace?.name}
-                    classNames="border border-custom-border-200 size-7"
+                    classNames="border border-custom-border-200 rounded-md size-7"
                   />
                   <h4 className="truncate text-base font-medium text-custom-text-100">
                     {activeWorkspace?.name ?? t("loading")}

apps/web/core/lib/app-rail/context.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { IAppRailVisibilityContext } from "./types";
+
+/**
+ * Context for app-rail visibility control
+ * Provides access to app rail enabled state, collapse state, and toggle function
+ */
+export const AppRailVisibilityContext = createContext<IAppRailVisibilityContext | undefined>(undefined);
+
+/**
+ * Hook to consume the AppRailVisibilityContext
+ * Must be used within an AppRailVisibilityProvider
+ *
+ * @returns The app rail visibility context
+ * @throws Error if used outside of AppRailVisibilityProvider
+ */
+export const useAppRailVisibility = (): IAppRailVisibilityContext => {
+  const context = useContext(AppRailVisibilityContext);
+  if (context === undefined) {
+    throw new Error("useAppRailVisibility must be used within AppRailVisibilityProvider");
+  }
+  return context;
+};