Settings Option Card component

packages/twenty-chrome-extension/src/options/modules/ui/display/typography/components/H2Title.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 type H2TitleProps = {
   title: string;
   description?: string;
-  addornment?: React.ReactNode;
+  adornment?: React.ReactNode;
 };
 
 const StyledContainer = styled.div`
@@ -33,11 +33,11 @@ const StyledDescription = styled.h3`
   margin-top: ${({ theme }) => theme.spacing(3)};
 `;
 
-export const H2Title = ({ title, description, addornment }: H2TitleProps) => (
+export const H2Title = ({ title, description, adornment }: H2TitleProps) => (
   <StyledContainer>
     <StyledTitleContainer>
       <StyledTitle>{title}</StyledTitle>
-      {addornment}
+      {adornment}
     </StyledTitleContainer>
     {description && <StyledDescription>{description}</StyledDescription>}
   </StyledContainer>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -2,10 +2,10 @@ import { CalendarChannel } from '@/accounts/types/CalendarChannel';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
-import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { Card, H2Title } from 'twenty-ui';
+import { Card, H2Title, IconUserPlus } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
 const StyledDetailsContainer = styled.div`
@@ -63,8 +63,9 @@ export const SettingsAccountsCalendarChannelDetails = ({
           title="Contact auto-creation"
           description="Automatically create contacts for people you've participated in an event with."
         />
-        <Card>
-          <SettingsOptionCardContent
+        <Card rounded>
+          <SettingsOptionCardContentToggle
+            Icon={IconUserPlus}
             title="Auto-creation"
             description="Automatically create contacts for people."
             checked={calendarChannel.isContactAutoCreationEnabled}

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Card, H2Title, Section } from 'twenty-ui';
+import { Card, H2Title, IconBriefcase, IconUsers, Section } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -9,7 +9,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
 import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
-import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
+import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsOptions/SettingsOptionCardContentToggle';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
 
 type SettingsAccountsMessageChannelDetailsProps = {
@@ -98,8 +98,9 @@ export const SettingsAccountsMessageChannelDetails = ({
         />
       </Section>
       <Section>
-        <Card>
-          <SettingsOptionCardContent
+        <Card rounded>
+          <SettingsOptionCardContentToggle
+            Icon={IconBriefcase}
             title="Exclude non-professional emails"
             description="Don’t create contacts from/to Gmail, Outlook emails"
             divider
@@ -110,7 +111,8 @@ export const SettingsAccountsMessageChannelDetails = ({
               );
             }}
           />
-          <SettingsOptionCardContent
+          <SettingsOptionCardContentToggle
+            Icon={IconUsers}
             title="Exclude group emails"
             description="Don’t sync emails from team@ support@ noreply@..."
             checked={messageChannel.excludeGroupEmails}

packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx

@@ -0,0 +1,68 @@
+import { useExpandedAnimation } from '@/settings/hooks/useExpandedAnimation';
+import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+import styled from '@emotion/styled';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRecoilValue } from 'recoil';
+import { IconTool, MAIN_COLORS } from 'twenty-ui';
+
+const StyledAdvancedWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const StyledIconContainer = styled.div`
+  border-right: 1px solid ${MAIN_COLORS.yellow};
+  display: flex;
+  height: 100%;
+  left: ${({ theme }) => theme.spacing(-6)};
+  position: absolute;
+  top: 0;
+`;
+
+const StyledContent = styled.div`
+  width: 100%;
+`;
+const StyledIconTool = styled(IconTool)`
+  margin-right: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+type AdvancedSettingsWrapperProps = {
+  children: React.ReactNode;
+  dimension?: 'width' | 'height';
+  hideIcon?: boolean;
+};
+
+export const AdvancedSettingsWrapper = ({
+  children,
+  dimension = 'height',
+  hideIcon = false,
+}: AdvancedSettingsWrapperProps) => {
+  const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
+  const { contentRef, motionAnimationVariants } = useExpandedAnimation(
+    isAdvancedModeEnabled,
+    dimension,
+  );
+
+  return (
+    <AnimatePresence>
+      {isAdvancedModeEnabled && (
+        <motion.div
+          ref={contentRef}
+          initial="initial"
+          animate="animate"
+          exit="exit"
+          variants={motionAnimationVariants}
+        >
+          <StyledAdvancedWrapper>
+            {!hideIcon && (
+              <StyledIconContainer>
+                <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+              </StyledIconContainer>
+            )}
+            <StyledContent>{children}</StyledContent>
+          </StyledAdvancedWrapper>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx

@@ -0,0 +1,103 @@
+import { TextInput } from '@/ui/input/components/TextInput';
+import styled from '@emotion/styled';
+import { Button, IconMinus, IconPlus } from 'twenty-ui';
+import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
+
+type SettingsCounterProps = {
+  value: number;
+  onChange: (value: number) => void;
+  minValue?: number;
+  maxValue?: number;
+  disabled?: boolean;
+};
+
+const StyledCounterContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  margin-left: auto;
+  width: ${({ theme }) => theme.spacing(30)};
+`;
+
+const StyledTextInput = styled(TextInput)`
+  width: ${({ theme }) => theme.spacing(16)};
+  input {
+    width: ${({ theme }) => theme.spacing(16)};
+    height: ${({ theme }) => theme.spacing(6)};
+    text-align: center;
+    font-weight: ${({ theme }) => theme.font.weight.medium};
+  }
+`;
+
+const StyledControlButton = styled(Button)`
+  height: ${({ theme }) => theme.spacing(6)};
+  width: ${({ theme }) => theme.spacing(6)};
+  padding: 0;
+  justify-content: center;
+  svg {
+    height: ${({ theme }) => theme.spacing(4)};
+    width: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export const SettingsCounter = ({
+  value,
+  onChange,
+  minValue = 0,
+  maxValue = 100,
+  disabled = false,
+}: SettingsCounterProps) => {
+  const handleIncrementCounter = () => {
+    if (value < maxValue) {
+      onChange(value + 1);
+    }
+  };
+
+  const handleDecrementCounter = () => {
+    if (value > minValue) {
+      onChange(value - 1);
+    }
+  };
+
+  const handleTextInputChange = (value: string) => {
+    const castedNumber = castAsNumberOrNull(value);
+    if (castedNumber === null) {
+      onChange(minValue);
+      return;
+    }
+
+    if (castedNumber < minValue) {
+      return;
+    }
+
+    if (castedNumber > maxValue) {
+      onChange(maxValue);
+      return;
+    }
+    onChange(castedNumber);
+  };
+
+  return (
+    <StyledCounterContainer>
+      <StyledControlButton
+        variant="secondary"
+        onClick={handleDecrementCounter}
+        Icon={IconMinus}
+        disabled={disabled}
+      />
+      <StyledTextInput
+        name="counter"
+        fullWidth
+        value={value.toString()}
+        onChange={handleTextInputChange}
+        disabled={disabled}
+      />
+      <StyledControlButton
+        variant="secondary"
+        onClick={handleIncrementCounter}
+        Icon={IconPlus}
+        disabled={disabled}
+      />
+    </StyledCounterContainer>
+  );
+};

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -23,7 +23,7 @@ import {
 import { useAuth } from '@/auth/hooks/useAuth';
 import { billingState } from '@/client-config/states/billingState';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
-import { useExpandedHeightAnimation } from '@/settings/hooks/useExpandedHeightAnimation';
+import { useExpandedAnimation } from '@/settings/hooks/useExpandedAnimation';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import {
@@ -69,7 +69,7 @@ const StyledIconTool = styled(IconTool)`
 
 export const SettingsNavigationDrawerItems = () => {
   const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
-  const { contentRef, motionAnimationVariants } = useExpandedHeightAnimation(
+  const { contentRef, motionAnimationVariants } = useExpandedAnimation(
     isAdvancedModeEnabled,
   );
   const { signOut } = useAuth();