feat: enforce @/ alias for imports and fix all relative parent imports (#16787)

## Summary
This PR enforces the use of `@/` alias for imports instead of relative
parent imports (`../`).

## Changes

### ESLint Configuration
- Added `no-restricted-imports` pattern in `eslint.config.react.mjs` to
block `../*` imports with the message "Relative parent imports are not
allowed. Use @/ alias instead."
- Removed the non-working `import/no-relative-parent-imports` rule
(doesn't work properly in ESLint flat config)

### VS Code Settings
- Added `javascript.preferences.importModuleSpecifier: non-relative` to
`.vscode/settings.json` (TypeScript setting was already there)

### Code Fixes
- Fixed **941 relative parent imports** across **706 files** in
`packages/twenty-front`
- All `../` imports converted to use `@/` alias

## Why
- Consistent import style across the codebase
- Easier to move files without breaking imports
- Better IDE support for auto-imports
- Clearer understanding of where imports come from

packages/twenty-front/src/modules/auth/components/AuthModalMountEffect.tsx

@@ -1,7 +1,7 @@
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { useEffect } from 'react';
 
-import { AUTH_MODAL_ID } from '../constants/AuthModalId';
+import { AUTH_MODAL_ID } from '@/auth/constants/AuthModalId';
 
 // TODO: Remove this component when we refactor the auth modal to open it directly in the PageChangeEffect
 export const AuthModalMountEffect = () => {

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -16,7 +16,7 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
-import { EmailVerificationSent } from '../sign-in-up/components/EmailVerificationSent';
+import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
 
 export const VerifyEmailEffect = () => {
   const {

packages/twenty-front/src/modules/auth/components/__stories__/Logo.stories.tsx

@@ -5,7 +5,7 @@ import {
   RecoilRootDecorator,
   RouterDecorator,
 } from 'twenty-ui/testing';
-import { Logo } from '../Logo';
+import { Logo } from '@/auth/components/Logo';
 
 const logoUrl = 'https://picsum.photos/192/192';
 

packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx

@@ -1,13 +1,13 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
-import { type VerifyEmailEffect } from '../VerifyEmailEffect';
+import { type VerifyEmailEffect } from '@/auth/components/VerifyEmailEffect';
 
 // Mock component that just renders the error state of VerifyEmailEffect directly
 // (since normal VerifyEmailEffect has async logic that's hard to test in Storybook)
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-import { EmailVerificationSent } from '../../sign-in-up/components/EmailVerificationSent';
+import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
 
 const VerifyEmailEffectErrorState = ({ email = 'user@example.com' }) => {
   return (

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -16,7 +16,13 @@ import { SnackBarComponentInstanceContext } from '@/ui/feedback/snack-bar-manage
 import { renderHook } from '@testing-library/react';
 import { iconsState } from 'twenty-ui/display';
 import { SupportDriver } from '~/generated/graphql';
-import { email, mocks, password, results, token } from '../__mocks__/useAuth';
+import {
+  email,
+  mocks,
+  password,
+  results,
+  token,
+} from '@/auth/hooks/__mocks__/useAuth';
 
 const redirectSpy = jest.fn();
 

packages/twenty-front/src/modules/auth/hooks/__tests__/useVerifyLogin.test.ts

@@ -6,8 +6,8 @@ import { RecoilRoot } from 'recoil';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { AppPath } from 'twenty-shared/types';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
-import { useAuth } from '../useAuth';
-import { useVerifyLogin } from '../useVerifyLogin';
+import { useAuth } from '@/auth/hooks/useAuth';
+import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
 
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
 import { dynamicActivate } from '~/utils/i18n/dynamicActivate';

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -27,7 +27,7 @@ import {
 } from '~/generated-metadata/graphql';
 
 import { isDeveloperDefaultSignInPrefilledState } from '@/client-config/states/isDeveloperDefaultSignInPrefilledState';
-import { tokenPairState } from '../states/tokenPairState';
+import { tokenPairState } from '@/auth/states/tokenPairState';
 
 import { isAppEffectRedirectEnabledState } from '@/app/states/isAppEffectRedirectEnabledState';
 import { useSignUpInNewWorkspace } from '@/auth/sign-in-up/hooks/useSignUpInNewWorkspace';
@@ -66,7 +66,7 @@ import { iconsState } from 'twenty-ui/display';
 import { type AuthToken } from '~/generated/graphql';
 import { cookieStorage } from '~/utils/cookie-storage';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
-import { loginTokenState } from '../states/loginTokenState';
+import { loginTokenState } from '@/auth/states/loginTokenState';
 
 export const useAuth = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);

packages/twenty-front/src/modules/auth/hooks/useIsLogged.ts

@@ -1,6 +1,6 @@
 import { useRecoilState } from 'recoil';
 
-import { tokenPairState } from '../states/tokenPairState';
+import { tokenPairState } from '@/auth/states/tokenPairState';
 
 export const useIsLogged = (): boolean => {
   const [tokenPair] = useRecoilState(tokenPairState);

packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { ComponentDecorator } from 'twenty-ui/testing';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
-import { EmailVerificationSent } from '../EmailVerificationSent';
+import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
 
 // Wrap the component in Modal.Content to reflect how it's used in the app
 const RenderWithModal = (

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.ts

@@ -21,7 +21,7 @@ import { AppPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { buildAppPathWithQueryParams } from '~/utils/buildAppPathWithQueryParams';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
-import { useAuth } from '../../hooks/useAuth';
+import { useAuth } from '@/auth/hooks/useAuth';
 
 export const useSignInUp = (form: UseFormReturn<Form>) => {
   const { enqueueErrorSnackBar } = useSnackBar();

packages/twenty-front/src/modules/auth/utils/__tests__/availableWorkspacesUtils.test.ts

@@ -7,7 +7,7 @@ import {
   countAvailableWorkspaces,
   getAvailableWorkspacePathAndSearchParams,
   getFirstAvailableWorkspaces,
-} from '../availableWorkspacesUtils';
+} from '@/auth/utils/availableWorkspacesUtils';
 
 const createMockAvailableWorkspace = (
   overrides: Partial<AvailableWorkspace> = {},