Rework atom naming (#18240)

## Summary

- **Enhanced the `matching-state-variable` ESLint rule** to enforce
consistent naming for `ComponentState`, `FamilyState`, and
`ComponentFamilyState` hooks — previously it only covered `useAtomState`
and `useAtomStateValue`
- **The rule now checks 12 hooks** across three categories: value hooks
(`useAtomComponentStateValue`, `useAtomFamilyStateValue`, etc.), state
hooks (`useAtomComponentState`, `useAtomComponentFamilyState`), and
setter hooks (`useSetAtomState`, `useSetAtomComponentState`,
`useSetAtomFamilyState`, `useSetAtomComponentFamilyState`)
- **Fixed all 225 resulting lint violations** across 151 files, renaming
variables to match their state atom names (e.g. `currentViewId` →
`contextStoreCurrentViewId`, `selectedRecord` → `recordStore`). Cases
where the same state is accessed with different family keys/instance IDs
are suppressed with `eslint-disable-next-line`.

## Naming convention

| Hook | State argument | Valid | Invalid |
|------|---------------|-------|---------|
| `useAtomStateValue` | `fooState` | `const foo = ...` | `const bar =
...` |
| `useAtomComponentStateValue` | `fooComponentState` | `const foo = ...`
| `const bar = ...` |
| `useAtomFamilyStateValue` | `fooFamilyState` | `const foo = ...` |
`const bar = ...` |
| `useAtomComponentFamilyStateValue` | `fooComponentFamilyState` |
`const foo = ...` | `const bar = ...` |
| `useAtomState` | `fooState` | `const [foo, setFoo] = ...` | `const
[bar, setBar] = ...` |
| `useAtomComponentState` | `fooComponentState` | `const [foo, setFoo] =
...` | `const [bar, setBar] = ...` |
| `useAtomComponentFamilyState` | `fooComponentFamilyState` | `const
[foo, setFoo] = ...` | `const [bar, setBar] = ...` |
| `useSetAtomState` | `fooState` | `const setFoo = ...` | `const setBar
= ...` |
| `useSetAtomComponentState` | `fooComponentState` | `const setFoo =
...` | `const setBar = ...` |
| `useSetAtomFamilyState` | `fooFamilyState` | `const setFoo = ...` |
`const setBar = ...` |
| `useSetAtomComponentFamilyState` | `fooComponentFamilyState` | `const
setFoo = ...` | `const setBar = ...` |

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -35,26 +35,26 @@ export const ScrollWrapper = ({
   defaultEnableXScroll = true,
   defaultEnableYScroll = true,
 }: ScrollWrapperProps) => {
-  const setScrollTop = useSetAtomComponentState(
+  const setScrollWrapperScrollTop = useSetAtomComponentState(
     scrollWrapperScrollTopComponentState,
     componentInstanceId,
   );
 
-  const setScrollLeft = useSetAtomComponentState(
+  const setScrollWrapperScrollLeft = useSetAtomComponentState(
     scrollWrapperScrollLeftComponentState,
     componentInstanceId,
   );
 
-  const setScrollBottom = useSetAtomComponentState(
+  const setScrollWrapperScrollBottom = useSetAtomComponentState(
     scrollWrapperScrollBottomComponentState,
     componentInstanceId,
   );
 
   const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
     const target = event.currentTarget;
-    setScrollTop(target.scrollTop);
-    setScrollLeft(target.scrollLeft);
-    setScrollBottom(
+    setScrollWrapperScrollTop(target.scrollTop);
+    setScrollWrapperScrollLeft(target.scrollLeft);
+    setScrollWrapperScrollBottom(
       target.scrollHeight - target.clientHeight - target.scrollTop,
     );
   };

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollRestoration.ts

@@ -10,7 +10,7 @@ export const useScrollRestoration = (componentInstanceId: string) => {
   const storageKey = `scroll-${location.pathname}`;
   const [isRestoring, setIsRestoring] = useState(false);
 
-  const scrollTop = useAtomComponentStateValue(
+  const scrollWrapperScrollTop = useAtomComponentStateValue(
     scrollWrapperScrollTopComponentState,
     componentInstanceId,
   );
@@ -46,13 +46,13 @@ export const useScrollRestoration = (componentInstanceId: string) => {
   useEffect(() => {
     if (isRestoring) return;
 
-    if (scrollTop <= SCROLL_RESTORATION_TOP_THRESHOLD_PX) {
+    if (scrollWrapperScrollTop <= SCROLL_RESTORATION_TOP_THRESHOLD_PX) {
       sessionStorage.removeItem(storageKey);
       return;
     }
 
-    sessionStorage.setItem(storageKey, scrollTop.toString());
-  }, [scrollTop, storageKey, isRestoring]);
+    sessionStorage.setItem(storageKey, scrollWrapperScrollTop.toString());
+  }, [scrollWrapperScrollTop, storageKey, isRestoring]);
 
   useEffect(() => {
     const savedPosition = sessionStorage.getItem(storageKey);