Chart editor - Part 1 (#14820)

This PR is the first part of the creation of the Chart editor.


https://github.com/user-attachments/assets/8b0af8ea-be41-4506-84cb-e40f5521cbf0

Done:
- Bar chart settings (except filters)
- Line chart settings (except filters)

In progress:
- Pie chart settings
- Number chart settings
- Gauge chart settings

Left to do:
- Loosen the backend validation to allow the user to save a partial
configuration, validate the graph configuration in the frontend and
display a error friendly message in the graph if the config is not
completed yet
- Implement the filter edition
- Finish the other graph types settings

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

@@ -0,0 +1,23 @@
+import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
+import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
+import { MenuItemToggle, type MenuItemToggleProps } from 'twenty-ui/navigation';
+
+export type CommandMenuItemToggleProps = MenuItemToggleProps & {
+  id: string;
+};
+
+export const CommandMenuItemToggle = (props: CommandMenuItemToggleProps) => {
+  const isSelectedItemId = useRecoilComponentFamilyValue(
+    isSelectedItemIdComponentFamilySelector,
+    props.id,
+  );
+
+  return (
+    <MenuItemToggle
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      focused={isSelectedItemId}
+      withIconContainer
+    />
+  );
+};