fix: Segmented Sidebar switch to search on value change

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

@@ -48,7 +48,7 @@ export const NAV_ITEMS: NavItem[] = [
 
 export default function SidebarSegmentedNav() {
   const { activeSection, setActiveSection, toggleSidebar, open } = useSidebar();
-  const { focusSearch, isSearchFocused, setSearch } = useSearchContext();
+  const { focusSearch, setSearch } = useSearchContext();
   return (
     <div className="flex h-full flex-col border-r border-border bg-background">
       <SidebarMenu className="gap-2 p-1">
@@ -73,14 +73,10 @@ export default function SidebarSegmentedNav() {
                     }
                   }
                 }}
-                isActive={
-                  activeSection === item.id ||
-                  (item.id === "search" && isSearchFocused)
-                }
+                isActive={activeSection === item.id}
                 className={cn(
                   "flex h-8 w-8 items-center justify-center rounded-md p-0 transition-all duration-200",
-                  activeSection === item.id ||
-                    (item.id === "search" && isSearchFocused)
+                  activeSection === item.id
                     ? "bg-accent text-accent-foreground"
                     : "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
                 )}

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

@@ -180,9 +180,20 @@ export function FlowSidebarComponent({ isLoading }: FlowSidebarComponentProps) {
     isSearchFocused = false,
     handleInputFocus = () => {},
     handleInputBlur = () => {},
-    handleInputChange = () => {},
+    handleInputChange: originalHandleInputChange = () => {},
   } = context;
 
+  const handleInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      originalHandleInputChange(event);
+      // Set active section to search when user first enters text
+      if (event.target.value.length > 0 && search.length === 0) {
+        setActiveSection("search");
+      }
+    },
+    [originalHandleInputChange, search, setActiveSection],
+  );
+
   const showBetaStorage = getBooleanFromStorage("showBeta", true);
   const showLegacyStorage = getBooleanFromStorage("showLegacy", false);