New TitleInput UI component for side panel (#11192)

# Description

I previously introduced the `RecordTitleCell` component, but it was
coupled with the field context, so it was only usable for record fields.
This PR:
- Introduces a new component `TitleInput` for side panel pages which
needed to have an editable title which wasn't a record field.
- Fixes the hotkey scope problem with the workflow step page title
- Introduces a new hook `useUpdateCommandMenuPageInfo`, to update the
side panel page title and icon.
- Fixes workflow side panel UI
- Adds jest tests and stories

# Video



https://github.com/user-attachments/assets/c501245c-4492-4351-b761-05b5abc4bd14

packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts

@@ -0,0 +1,57 @@
+import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
+import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
+import { useRecoilCallback } from 'recoil';
+import { IconComponent, IconDotsVertical } from 'twenty-ui';
+
+export const useUpdateCommandMenuPageInfo = () => {
+  const updateCommandMenuPageInfo = useRecoilCallback(
+    ({ snapshot, set }) =>
+      ({
+        pageTitle,
+        pageIcon,
+      }: {
+        pageTitle?: string;
+        pageIcon?: IconComponent;
+      }) => {
+        const commandMenuPageInfo = snapshot
+          .getLoadable(commandMenuPageInfoState)
+          .getValue();
+
+        const newCommandMenuPageInfo = {
+          ...commandMenuPageInfo,
+          title: pageTitle ?? commandMenuPageInfo.title ?? '',
+          Icon: pageIcon ?? commandMenuPageInfo.Icon ?? IconDotsVertical,
+        };
+
+        set(commandMenuPageInfoState, newCommandMenuPageInfo);
+
+        const commandMenuNavigationStack = snapshot
+          .getLoadable(commandMenuNavigationStackState)
+          .getValue();
+
+        const lastCommandMenuNavigationStackItem =
+          commandMenuNavigationStack.at(-1);
+
+        if (!lastCommandMenuNavigationStackItem) {
+          return;
+        }
+
+        const newCommandMenuNavigationStack = [
+          ...commandMenuNavigationStack.slice(0, -1),
+          {
+            page: lastCommandMenuNavigationStackItem.page,
+            pageTitle: newCommandMenuPageInfo.title,
+            pageIcon: newCommandMenuPageInfo.Icon,
+            pageId: lastCommandMenuNavigationStackItem.pageId,
+          },
+        ];
+
+        set(commandMenuNavigationStackState, newCommandMenuNavigationStack);
+      },
+    [],
+  );
+
+  return {
+    updateCommandMenuPageInfo,
+  };
+};