feat: design the ai-models tab on settings ai page (#18147)

Remove AI model selectors from the settings tab on AI settings page,
rename that tab to "More" and create a separate "Models" tab as per the
design.


https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=91311-278313&m=dev

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-ui/src/display/icon/components/IconBrandAnthropic.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+
+import IconAnthropicRaw from '@assets/icons/anthropic.svg?react';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconBrandAnthropicProps = Pick<IconComponentProps, 'size' | 'color'>;
+
+export const IconBrandAnthropic = (props: IconBrandAnthropicProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return (
+    <IconAnthropicRaw
+      height={size}
+      width={size}
+      color={props.color ?? 'currentColor'}
+    />
+  );
+};

packages/twenty-ui/src/display/icon/components/IconBrandGroq.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+
+import IconBrandGroqRaw from '@assets/icons/groq.svg?react';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconBrandGroqProps = Pick<IconComponentProps, 'size' | 'color'>;
+
+export const IconBrandGroq = (props: IconBrandGroqProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return (
+    <IconBrandGroqRaw
+      height={size}
+      width={size}
+      color={props.color ?? 'currentColor'}
+    />
+  );
+};

packages/twenty-ui/src/display/icon/components/IconBrandMistral.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+
+import IconBrandMistralRaw from '@assets/icons/mistral.svg?react';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconBrandMistralProps = Pick<IconComponentProps, 'size' | 'color'>;
+
+export const IconBrandMistral = (props: IconBrandMistralProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return (
+    <IconBrandMistralRaw
+      height={size}
+      width={size}
+      color={props.color ?? 'currentColor'}
+    />
+  );
+};

packages/twenty-ui/src/display/icon/components/IconBrandXai.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@emotion/react';
+
+import IconBrandXaiRaw from '@assets/icons/xai.svg?react';
+import { type IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconBrandXaiProps = Pick<IconComponentProps, 'size' | 'color'>;
+
+export const IconBrandXai = (props: IconBrandXaiProps) => {
+  const theme = useTheme();
+  const size = props.size ?? theme.icon.size.lg;
+
+  return (
+    <IconBrandXaiRaw
+      height={size}
+      width={size}
+      color={props.color ?? 'currentColor'}
+    />
+  );
+};

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -46,6 +46,7 @@ export {
   IconBrandGoogle,
   IconBrandGraphql,
   IconBrandLinkedin,
+  IconBrandOpenai,
   IconBrandX,
   IconBriefcase,
   IconBroadcast,
@@ -325,6 +326,7 @@ export {
   IconSettings,
   IconSettings2,
   IconSettingsAutomation,
+  IconSettingsBolt,
   IconShare,
   IconShield,
   IconSitemap,

packages/twenty-ui/src/display/index.ts

@@ -34,6 +34,10 @@ export { CommandBlock } from './command-block/components/CommandBlock';
 export type { IconProps } from './icon/components/Icon';
 export { Icon } from './icon/components/Icon';
 export { IconAddressBook } from './icon/components/IconAddressBook';
+export { IconBrandAnthropic } from './icon/components/IconBrandAnthropic';
+export { IconBrandGroq } from './icon/components/IconBrandGroq';
+export { IconBrandMistral } from './icon/components/IconBrandMistral';
+export { IconBrandXai } from './icon/components/IconBrandXai';
 export { IconChartBarHorizontal } from './icon/components/IconChartBarHorizontal';
 export { IconGmail } from './icon/components/IconGmail';
 export { IconGoogle } from './icon/components/IconGoogle';
@@ -117,6 +121,7 @@ export {
   IconBrandGoogle,
   IconBrandGraphql,
   IconBrandLinkedin,
+  IconBrandOpenai,
   IconBrandX,
   IconBriefcase,
   IconBroadcast,
@@ -396,6 +401,7 @@ export {
   IconSettings,
   IconSettings2,
   IconSettingsAutomation,
+  IconSettingsBolt,
   IconShare,
   IconShield,
   IconSitemap,