AI settings tab (#13496)

https://github.com/user-attachments/assets/87f5a556-ff12-4ce0-aaa7-9120c0432151

---------

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

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -33,6 +33,7 @@ export type NavigationDrawerItemProps = {
   active?: boolean;
   danger?: boolean;
   soon?: boolean;
+  isNew?: boolean;
   count?: number;
   keyboard?: string[];
   rightOptions?: ReactNode;
@@ -247,6 +248,7 @@ export const NavigationDrawerItem = ({
   active,
   danger,
   soon,
+  isNew,
   count,
   keyboard,
   subItemState,
@@ -262,7 +264,9 @@ export const NavigationDrawerItem = ({
   const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
     useRecoilState(isNavigationDrawerExpandedState);
   const showBreadcrumb = indentationLevel === 2;
-  const showStyledSpacer = !!soon || !!count || !!keyboard || !!rightOptions;
+  const showStyledSpacer = Boolean(
+    soon || isNew || count || keyboard || rightOptions,
+  );
 
   const handleMobileNavigation = () => {
     if (isMobile) {
@@ -343,6 +347,12 @@ export const NavigationDrawerItem = ({
             </NavigationDrawerAnimatedCollapseWrapper>
           )}
 
+          {isNew && (
+            <NavigationDrawerAnimatedCollapseWrapper>
+              <Pill label="New" />
+            </NavigationDrawerAnimatedCollapseWrapper>
+          )}
+
           {!!count && (
             <NavigationDrawerAnimatedCollapseWrapper>
               <StyledItemCount>{count}</StyledItemCount>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx

@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
 
+import { IconSearch } from 'twenty-ui/display';
+import { CatalogDecorator, CatalogStory } from 'twenty-ui/testing';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
-import { CatalogDecorator, CatalogStory } from 'twenty-ui/testing';
-import { IconSearch } from 'twenty-ui/display';
-import { getOsControlSymbol } from 'twenty-ui/utilities';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -96,6 +96,40 @@ export const Breadcrumb: Story = {
   ],
 };
 
+export const NewPill: Story = {
+  decorators: [
+    (Story) => (
+      <StyledContainer>
+        <h1>New Pill Examples</h1>
+        <Story
+          args={{
+            label: 'New Feature',
+            Icon: IconSearch,
+            isNew: true,
+          }}
+        />
+        <Story
+          args={{
+            label: 'New Feature with Count',
+            Icon: IconSearch,
+            isNew: true,
+            count: 5,
+          }}
+        />
+        <Story
+          args={{
+            label: 'New Feature with Keyboard Shortcut',
+            Icon: IconSearch,
+            isNew: true,
+            keyboard: [getOsControlSymbol(), 'N'],
+          }}
+        />
+      </StyledContainer>
+    ),
+    ComponentWithRouterDecorator,
+  ],
+};
+
 export const BreadcrumbCatalog: CatalogStory<
   Story,
   typeof NavigationDrawerItem
@@ -182,15 +216,23 @@ export const Catalog: CatalogStory<Story, typeof NavigationDrawerItem> = {
         },
         {
           name: 'adornments',
-          values: ['Without Adornments', 'Soon Pill', 'Count', 'Keyboard Keys'],
+          values: [
+            'Without Adornments',
+            'Soon Pill',
+            'New Pill',
+            'Count',
+            'Keyboard Keys',
+          ],
           props: (adornmentName: string) =>
             adornmentName === 'Soon Pill'
               ? { soon: true }
-              : adornmentName === 'Count'
-                ? { count: 3 }
-                : adornmentName === 'Keyboard Keys'
-                  ? { keyboard: [getOsControlSymbol(), 'K'] }
-                  : {},
+              : adornmentName === 'New Pill'
+                ? { isNew: true }
+                : adornmentName === 'Count'
+                  ? { count: 3 }
+                  : adornmentName === 'Keyboard Keys'
+                    ? { keyboard: [getOsControlSymbol(), 'K'] }
+                    : {},
         },
       ],
     },