Feat: The scrollbar should fade away when the scroll is finished or not started (#1269)

* The scrollbar should fade away when the scroll is finished or not started

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>

* Complete scroll work

* Fix pr

* Fix pr

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/utilities/scroll/components/StyledScrollWrapper.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+export const StyledScrollWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  overflow: auto;
+  width: 100%;
+
+  &.scrolling::-webkit-scrollbar-thumb {
+    background-color: ${({ theme }) => theme.border.color.medium};
+  }
+`;

front/src/modules/ui/utilities/scroll/hooks/useListenScroll.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import debounce from 'lodash.debounce';
+import { useRecoilCallback } from 'recoil';
+
+import { isScrollingState } from '../states/isScrollingState';
+
+export function useListenScroll<T extends Element>({
+  scrollableRef,
+}: {
+  scrollableRef: React.RefObject<T>;
+}) {
+  const hideScrollBarsCallback = useRecoilCallback(({ snapshot }) => () => {
+    const isScrolling = snapshot.getLoadable(isScrollingState).getValue();
+    if (!isScrolling) {
+      scrollableRef.current?.classList.remove('scrolling');
+    }
+  });
+
+  const handleScrollStart = useRecoilCallback(({ set }) => () => {
+    set(isScrollingState, true);
+    scrollableRef.current?.classList.add('scrolling');
+  });
+
+  const handleScrollEnd = useRecoilCallback(({ set }) => () => {
+    set(isScrollingState, false);
+    debounce(hideScrollBarsCallback, 1000)();
+  });
+
+  useEffect(() => {
+    const refTarget = scrollableRef.current;
+
+    refTarget?.addEventListener('scrollend', handleScrollEnd);
+    refTarget?.addEventListener('scroll', handleScrollStart);
+
+    return () => {
+      refTarget?.removeEventListener('scrollend', handleScrollEnd);
+      refTarget?.removeEventListener('scroll', handleScrollStart);
+    };
+  }, [
+    hideScrollBarsCallback,
+    handleScrollStart,
+    handleScrollEnd,
+    scrollableRef,
+  ]);
+}

front/src/modules/ui/utilities/scroll/states/isScrollingState.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isScrollingState = atom({
+  key: 'scroll/isScollingState',
+  default: false,
+});