Focus on the input on command menu page change (#10082)

Add effect component to focus on the input on command menu page change

Before:


https://github.com/user-attachments/assets/a066b5b4-d495-42ca-8c13-8cc456eaaeda

After:


https://github.com/user-attachments/assets/1abd06dc-5714-44b5-80e4-22b55dc341c5

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarInputFocusEffect.tsx

@@ -0,0 +1,26 @@
+import { useRecoilValue } from 'recoil';
+
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useEffect } from 'react';
+
+type CommandMenuTopBarInputFocusEffectProps = {
+  inputRef: React.RefObject<HTMLInputElement>;
+};
+
+export const CommandMenuTopBarInputFocusEffect = ({
+  inputRef,
+}: CommandMenuTopBarInputFocusEffectProps) => {
+  const commandMenuPage = useRecoilValue(commandMenuPageState);
+
+  useEffect(() => {
+    if (
+      commandMenuPage === CommandMenuPages.Root ||
+      commandMenuPage === CommandMenuPages.SearchRecords
+    ) {
+      inputRef.current?.focus();
+    }
+  }, [commandMenuPage, inputRef]);
+
+  return null;
+};