refactor: Padding misaligned for sidebar icons and other issues fix for 1.6

src/frontend/src/components/core/appHeaderComponent/components/FlowMenu/index.tsx

@@ -142,10 +142,6 @@ export const MenuBar = memo((): JSX.Element => {
               >
                 {currentFlowName || "Untitled Flow"}
               </span>
-              {isFlowLocked && (
-                <IconComponent name="Lock" className="h-5 w-3.5" />
-              )}
-
               <IconComponent
                 name="pencil"
                 className={cn(

src/frontend/src/components/core/appHeaderComponent/index.tsx

@@ -51,7 +51,7 @@ export default function AppHeader(): JSX.Element {
 
   return (
     <div
-      className={`z-10 flex h-[48px] w-full items-center justify-between border-b px-6 dark:bg-background`}
+      className={`z-10 flex h-[48px] w-full items-center justify-between border-b pr-5 pl-2.5 dark:bg-background`}
       data-testid="app-header"
     >
       {/* Left Section */}
@@ -68,7 +68,7 @@ export default function AppHeader(): JSX.Element {
           {ENABLE_DATASTAX_LANGFLOW ? (
             <DataStaxLogo className="fill-black dark:fill-[white]" />
           ) : (
-            <LangflowLogo className="h-6 w-6" />
+            <LangflowLogo className="h-5 w-5" />
           )}
         </Button>
         {ENABLE_DATASTAX_LANGFLOW && (

src/frontend/src/components/core/canvasControlsComponent/CanvasControlsDropdown.tsx

@@ -89,13 +89,13 @@ const CanvasControlsDropdown = () => {
           title="Canvas Controls"
         >
           <div className="flex items-center justify-center ">
-            <div className="text-sm text-primary pr-1">
+            <div className="text-sm pr-1 text-muted-foreground">
               {formatZoomPercentage(zoom)}
             </div>
             <IconComponent
               name={isOpen ? "ChevronDown" : "ChevronUp"}
               aria-hidden="true"
-              className="text-primary group-hover:text-primary !h-5 !w-5"
+              className="text-muted-foreground group-hover:text-primary !h-5 !w-5"
             />
           </div>
         </Button>

src/frontend/src/components/ui/sidebar.tsx

@@ -23,7 +23,12 @@ const SIDEBAR_WIDTH = "19rem";
 const SIDEBAR_WIDTH_ICON = "4rem";
 const SEGMENTED_SIDEBAR_ICON_WIDTH = "40px";
 
-export type SidebarSection = "search" | "components" | "bundles" | "mcp";
+export type SidebarSection =
+  | "search"
+  | "components"
+  | "bundles"
+  | "mcp"
+  | "add_note";
 
 // Helper function to get cookie value
 function getCookie(name: string): string | null {
@@ -466,7 +471,7 @@ const SidebarHeader = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn("flex flex-col gap-2 p-3 pb-1", className)}
       {...props}
     />
   );
@@ -551,8 +556,8 @@ const SidebarGroupLabel = React.memo(
         ref={ref}
         data-sidebar="group-label"
         className={cn(
-          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-foreground/70 outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
-          "group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+          "flex shrink-0 items-center rounded-md text-xs font-semibold text-foreground/70 outline-none ring-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-1 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 px-2 pb-3",
           className,
         )}
         {...props}

src/frontend/src/pages/FlowPage/components/PageComponent/MemoizedComponents.tsx

@@ -1,12 +1,14 @@
 import { Background, Panel } from "@xyflow/react";
 import { memo } from "react";
+import { useShallow } from "zustand/react/shallow";
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
 import CanvasControlButton from "@/components/core/canvasControlsComponent/CanvasControlButton";
 import CanvasControls from "@/components/core/canvasControlsComponent/CanvasControls";
 import LogCanvasControls from "@/components/core/logCanvasControlsComponent";
 import { Button } from "@/components/ui/button";
 import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
 import { ENABLE_NEW_SIDEBAR } from "@/customization/feature-flags";
+import useFlowStore from "@/stores/flowStore";
 import { cn } from "@/utils/utils";
 import { useSearchContext } from "../flowSidebarComponent";
 import { NAV_ITEMS } from "../flowSidebarComponent/components/sidebarSegmentedNav";
@@ -30,32 +32,35 @@ export const MemoizedCanvasControls = memo(
     position,
     shadowBoxWidth,
     shadowBoxHeight,
-  }: MemoizedCanvasControlsProps) => (
-    <CanvasControls>
-      <Button
-        variant="ghost"
-        size="icon"
-        data-testid="add_note"
-        className="group flex items-center justify-center px-2 rounded-none"
-        title="Add sticky note"
-        onClick={(e) => {
-          e.stopPropagation();
-          setIsAddingNote(true);
-          const shadowBox = document.getElementById("shadow-box");
-          if (shadowBox) {
-            shadowBox.style.display = "block";
-            shadowBox.style.left = `${position.x - shadowBoxWidth / 2}px`;
-            shadowBox.style.top = `${position.y - shadowBoxHeight / 2}px`;
-          }
-        }}
-      >
-        <ForwardedIconComponent
-          name="sticky-note"
-          className="!h-5 !w-5 text-muted-foreground group-hover:text-primary"
-        />
-      </Button>
-    </CanvasControls>
-  ),
+  }: MemoizedCanvasControlsProps) => {
+    const isLocked = useFlowStore(
+      useShallow((state) => state.currentFlow?.locked),
+    );
+
+    return (
+      <CanvasControls>
+        <Button
+          unstyled
+          unselectable="off"
+          size="icon"
+          data-testid="lock-status"
+          className="flex items-center justify-center px-2 rounded-none gap-1"
+          title="Lock status"
+        >
+          <ForwardedIconComponent
+            name={isLocked ? "Lock" : "Unlock"}
+            className={cn(
+              "!h-[18px] !w-[18px] text-muted-foreground",
+              isLocked && "text-destructive",
+            )}
+          />
+          {isLocked && (
+            <span className="text-xs text-destructive">Flow Locked</span>
+          )}
+        </Button>
+      </CanvasControls>
+    );
+  },
 );
 
 export const MemoizedSidebarTrigger = memo(() => {

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -613,6 +613,8 @@ export default function Page({
         };
         setNodes((nds) => nds.concat(newNode));
         setIsAddingNote(false);
+        // Signal sidebar to revert add_note active state
+        window.dispatchEvent(new Event("lf:end-add-note"));
       }
     },
     [
@@ -657,6 +659,24 @@ export default function Page({
     };
   }, [isAddingNote, shadowBoxWidth, shadowBoxHeight]);
 
+  // Listen for a global event to start the add-note flow from outside components
+  useEffect(() => {
+    const handleStartAddNote = () => {
+      setIsAddingNote(true);
+      const shadowBox = document.getElementById("shadow-box");
+      if (shadowBox) {
+        shadowBox.style.display = "block";
+        shadowBox.style.left = `${position.current.x - shadowBoxWidth / 2}px`;
+        shadowBox.style.top = `${position.current.y - shadowBoxHeight / 2}px`;
+      }
+    };
+
+    window.addEventListener("lf:start-add-note", handleStartAddNote);
+    return () => {
+      window.removeEventListener("lf:start-add-note", handleStartAddNote);
+    };
+  }, [shadowBoxWidth, shadowBoxHeight]);
+
   const MIN_ZOOM = 0.25;
   const MAX_ZOOM = 2;
   const fitViewOptions = {

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryDisclouse.tsx

@@ -73,7 +73,7 @@ export const CategoryDisclosure = memo(function CategoryDisclosure({
               </span>
               <ForwardedIconComponent
                 name="ChevronRight"
-                className="-mr-1 h-4 w-4 text-muted-foreground transition-all group-aria-expanded/collapsible:rotate-90"
+                className="h-4 w-4 text-muted-foreground transition-all group-aria-expanded/collapsible:rotate-90"
               />
             </div>
           </SidebarMenuButton>

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/categoryGroup.tsx

@@ -27,7 +27,7 @@ export const CategoryGroup = memo(function CategoryGroup({
   return (
     <SidebarGroup className="p-3">
       {ENABLE_NEW_SIDEBAR && (
-        <SidebarGroupLabel className="cursor-default flex items-center justify-between">
+        <SidebarGroupLabel className="cursor-default flex items-center justify-between w-full">
           <span>Components</span>
           <SearchConfigTrigger
             showConfig={showConfig}

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/featureTogglesComponent.tsx

@@ -25,7 +25,7 @@ const FeatureToggles = ({
   ];
 
   return (
-    <div className="flex flex-col gap-7 pb-3 pt-5">
+    <div className="flex flex-col gap-7 pb-3 px-2 pt-5">
       {toggles.map((toggle) => (
         <div key={toggle.label} className="flex items-center justify-between">
           <div className="flex items-center space-x-2">

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/searchConfigTrigger.tsx

@@ -12,18 +12,17 @@ export const SearchConfigTrigger = ({
   setShowConfig,
 }: SearchConfigTriggerProps) => {
   return (
-    <div>
+    <div className="flex items-center justify-center">
       <ShadTooltip content="Component settings" styleClasses="z-50">
         <Button
           variant={showConfig ? "ghostActive" : "ghost"}
           size="iconMd"
           data-testid="sidebar-options-trigger"
           onClick={() => setShowConfig(!showConfig)}
+          className="hover:text-primary text-muted-foreground"
+          style={{ padding: "0px" }}
         >
-          <ForwardedIconComponent
-            name="SlidersHorizontal"
-            className="h-4 w-4"
-          />
+          <ForwardedIconComponent name="Settings2" className="h-4 w-4" />
         </Button>
       </ShadTooltip>
     </div>

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/searchInput.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
-import { ForwardedIconComponent } from "@/components/common/genericIconComponent";
 import { Input } from "@/components/ui/input";
+import { ENABLE_NEW_SIDEBAR } from "@/customization/feature-flags";
 import ShortcutDisplay from "../../nodeToolbarComponent/shortcutDisplay";
 
 export const SearchInput = memo(function SearchInput({
@@ -19,7 +19,7 @@ export const SearchInput = memo(function SearchInput({
   handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }) {
   return (
-    <div className="relative w-full flex-1">
+    <div className={`relative w-full flex-1 ${!ENABLE_NEW_SIDEBAR && "pb-2"}`}>
       <Input
         ref={searchInputRef}
         type="search"
@@ -33,7 +33,9 @@ export const SearchInput = memo(function SearchInput({
         value={search}
       />
       {!isInputFocused && search === "" && (
-        <div className="pointer-events-none absolute inset-y-0 right-3 top-1/2 flex -translate-y-1/2 items-center justify-between gap-2 text-sm text-muted-foreground">
+        <div
+          className={`pointer-events-none absolute inset-y-0 right-2 top-[19px] flex -translate-y-1/2 items-center justify-between gap-2 text-sm text-muted-foreground ${ENABLE_NEW_SIDEBAR && "top-1/2"}`}
+        >
           <span>
             <ShortcutDisplay sidebar shortcut="/" />
           </span>

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarDraggableComponent.tsx

@@ -131,17 +131,17 @@ export const SidebarDraggableComponent = forwardRef(
             data-tooltip-id={itemName}
             tabIndex={0}
             onKeyDown={handleKeyDown}
-            className="m-[1px] rounded-md outline-none ring-ring focus-visible:ring-1"
+            className="rounded-md outline-none ring-ring focus-visible:ring-1"
             data-testid={`${sectionName.toLowerCase()}_${display_name.toLowerCase()}_draggable`}
           >
             <div
               data-testid={sectionName + display_name}
               id={sectionName + display_name}
               className={cn(
-                "group/draggable flex cursor-grab items-center gap-2 rounded-md bg-muted p-3 hover:bg-secondary-hover/75",
+                "group/draggable flex cursor-grab items-center gap-2 rounded-md bg-muted p-1 px-2 hover:bg-secondary-hover/75",
                 error && "cursor-not-allowed select-none",
                 disabled
-                  ? "pointer-events-none bg-accent text-placeholder-foreground"
+                  ? "pointer-events-none bg-accent text-placeholder-foreground h-8"
                   : "bg-muted text-foreground",
               )}
               draggable={!error}
@@ -161,7 +161,7 @@ export const SidebarDraggableComponent = forwardRef(
             >
               <ForwardedIconComponent
                 name={icon}
-                className="h-5 w-5 shrink-0"
+                className="h-[18px] w-[18px] shrink-0"
               />
               <div className="flex flex-1 items-center overflow-hidden">
                 <ShadTooltip content={display_name} styleClasses="z-50">

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarFooterButtons.tsx

@@ -20,7 +20,7 @@ const SidebarMenuButtons = ({
   };
 
   return (
-    <>
+    <div className="flex w-full h-full">
       {ENABLE_NEW_SIDEBAR && activeSection === "mcp" ? (
         <>
           <SidebarMenuButton asChild>
@@ -29,7 +29,7 @@ const SidebarMenuButtons = ({
               disabled={isLoading}
               onClick={handleAddMcpServerClick}
               data-testid="sidebar-add-mcp-server-button"
-              className="flex items-center gap-2"
+              className="flex items-center gap-2 w-full p-0"
             >
               <ForwardedIconComponent
                 name="Plus"
@@ -62,29 +62,29 @@ const SidebarMenuButtons = ({
           <AddMcpServerModal open={addMcpOpen} setOpen={setAddMcpOpen} />
         </>
       ) : (
-        <SidebarMenuButton asChild>
-          <Button
-            unstyled
-            disabled={isLoading}
-            onClick={() => {
-              if (customComponent) {
-                addComponent(customComponent, "CustomComponent");
-              }
-            }}
-            data-testid="sidebar-custom-component-button"
-            className="flex items-center gap-2"
-          >
-            <ForwardedIconComponent
-              name="Plus"
-              className="h-4 w-4 text-muted-foreground"
-            />
-            <span className="group-data-[state=open]/collapsible:font-semibold">
-              New Custom Component
-            </span>
-          </Button>
-        </SidebarMenuButton>
+        // <SidebarMenuButton asChild className="group">
+        <Button
+          unstyled
+          disabled={isLoading}
+          onClick={() => {
+            if (customComponent) {
+              addComponent(customComponent, "CustomComponent");
+            }
+          }}
+          data-testid="sidebar-custom-component-button"
+          className="flex items-center w-full h-full p-3 gap-2 hover:bg-muted"
+        >
+          <ForwardedIconComponent
+            name="Plus"
+            className="h-4 w-4 text-muted-foreground"
+          />
+          <span className="ml-2group-data-[state=open]/collapsible:font-semibold text-sm">
+            New Custom Component
+          </span>
+        </Button>
+        // </SidebarMenuButton>
       )}
-    </>
+    </div>
   );
 };
 

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarHeader.tsx

@@ -33,7 +33,7 @@ export const SidebarHeaderComponent = memo(function SidebarHeaderComponent({
   resetFilters,
 }: SidebarHeaderComponentProps) {
   return (
-    <SidebarHeader className="flex w-full flex-col gap-2 p-4 pb-3 group-data-[collapsible=icon]:hidden border-b">
+    <SidebarHeader className="flex w-full flex-col gap-2 group-data-[collapsible=icon]:hidden border-b">
       {!ENABLE_NEW_SIDEBAR && (
         <Disclosure open={showConfig} onOpenChange={setShowConfig}>
           <div className="flex w-full items-center gap-2">

src/frontend/src/pages/FlowPage/components/flowSidebarComponent/components/sidebarItemsList.tsx

@@ -16,7 +16,7 @@ const SidebarItemsList = ({
   sensitiveSort,
 }) => {
   return (
-    <div className="flex flex-col gap-1 py-2">
+    <div className="flex flex-col gap-1 py-1">
       {Object.keys(dataFilter[item.name])
         .sort((a, b) => {
           const itemA = dataFilter[item.name][a];