[AI] More tab new design (#19165)

closes
https://discord.com/channels/1130383047699738754/1480981616666087687

<img width="1596" height="1318" alt="CleanShot 2026-03-31 at 18 06 37"
src="https://github.com/user-attachments/assets/0d87610e-e4ce-4f3d-8047-97d242f230c5"
/>
This commit is contained in:
nitin
2026-03-31 19:56:40 +05:30
committed by GitHub
parent 888fa271f0
commit 08f019e9c9
10 changed files with 235 additions and 235 deletions
@@ -8,7 +8,6 @@ import { type VariablePickerComponent } from '@/object-record/record-field/ui/fo
import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
import { InputHint } from '@/ui/input/components/InputHint';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
import { useFullScreenModal } from '@/ui/layout/fullscreen/hooks/useFullScreenModal';
import { type BreadcrumbProps } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
@@ -16,10 +15,11 @@ import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks
import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { useContext, useId, useState } from 'react';
import { useId, useState } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { IconMaximize } from 'twenty-ui/display';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import { LightIconButton } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useIsMobile } from 'twenty-ui/utilities';
const StyledAdvancedTextFieldContainerWrapper = styled.div`
@@ -47,8 +47,9 @@ const StyledAdvancedTextFieldInnerContainer = styled.div`
`;
const StyledEditorActionButtonContainer = styled.div`
margin-top: ${themeCssVariables.spacing[1]};
position: absolute;
right: 30px;
right: ${themeCssVariables.spacing[1]};
top: ${themeCssVariables.spacing[0]};
z-index: 1;
`;
@@ -63,19 +64,6 @@ const StyledFullScreenEditorContainer = styled.div`
padding: ${themeCssVariables.spacing[2]};
`;
const StyledFullScreenButtonContainerWrapper = styled.div`
> * {
background-color: transparent;
color: ${themeCssVariables.font.color.tertiary};
padding: ${themeCssVariables.spacing[2]};
:hover {
background-color: ${themeCssVariables.background.transparent.light};
cursor: pointer;
}
}
`;
type FormAdvancedTextFieldInputProps = {
label?: string;
error?: string;
@@ -111,7 +99,6 @@ export const FormAdvancedTextFieldInput = ({
maxWidth,
contentType = 'json',
}: FormAdvancedTextFieldInputProps) => {
const { theme } = useContext(ThemeContext);
const instanceId = useId();
const isMobile = useIsMobile();
const [isFullScreen, setIsFullScreen] = useState(false);
@@ -229,15 +216,12 @@ export const FormAdvancedTextFieldInput = ({
{enableFullScreen && (
<StyledEditorActionButtonContainer>
{!readonly && !isFullScreen && (
<StyledFullScreenButtonContainerWrapper>
<StyledDropdownButtonContainer
isUnfolded={false}
transparentBackground
onClick={handleEnterFullScreen}
>
<IconMaximize size={theme.icon.size.md} />
</StyledDropdownButtonContainer>
</StyledFullScreenButtonContainerWrapper>
<LightIconButton
Icon={IconMaximize}
size="small"
onClick={handleEnterFullScreen}
accent="tertiary"
/>
)}
</StyledEditorActionButtonContainer>
)}