Feat : Toggle Eye Icon to Expand/Collapse Kanban Card (#7396)

This pull request implements the functionality to toggle the eye icon in
Kanban cards to expand or collapse the card details.

#7389 


[toogle-button-in-kanban-card.webm](https://github.com/user-attachments/assets/3bc1a31c-4053-429a-95e7-aa98188c39e4)

---------

Co-authored-by: Nitin Koche <nitinkoche03@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -25,7 +25,8 @@ import styled from '@emotion/styled';
 import { ReactNode, useContext, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { AvatarChipVariant, IconEye } from 'twenty-ui';
+import { AvatarChipVariant, IconEye, IconEyeOff } from 'twenty-ui';
+import { useDebouncedCallback } from 'use-debounce';
 import { useAddNewCard } from '../../record-board-column/hooks/useAddNewCard';
 
 const StyledBoardCard = styled.div<{ selected: boolean }>`
@@ -162,7 +163,7 @@ export const RecordBoardCard = ({
   } = useRecordBoardStates();
   const isCompactModeActive = useRecoilValue(isCompactModeActiveState);
 
-  const [isCardInCompactMode, setIsCardInCompactMode] = useState(true);
+  const [isCardExpanded, setIsCardExpanded] = useState(false);
 
   const [isCurrentCardSelected, setIsCurrentCardSelected] = useRecoilState(
     isRecordBoardCardSelectedFamilyState(recordId),
@@ -201,11 +202,11 @@ export const RecordBoardCard = ({
     </StyledFieldContainer>
   );
 
-  const onMouseLeaveBoard = () => {
-    if (isCompactModeActive) {
-      setIsCardInCompactMode(true);
+  const onMouseLeaveBoard = useDebouncedCallback(() => {
+    if (isCompactModeActive && isCardExpanded) {
+      setIsCardExpanded(false);
     }
-  };
+  }, 800);
 
   const useUpdateOneRecordHook: RecordUpdateHook = () => {
     const updateEntity = ({ variables }: RecordUpdateHookParams) => {
@@ -285,11 +286,11 @@ export const RecordBoardCard = ({
               {isCompactModeActive && (
                 <StyledCompactIconContainer className="compact-icon-container">
                   <LightIconButton
-                    Icon={IconEye}
+                    Icon={isCardExpanded ? IconEyeOff : IconEye}
                     accent="tertiary"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setIsCardInCompactMode(false);
+                      setIsCardExpanded((prev) => !prev);
                     }}
                   />
                 </StyledCompactIconContainer>
@@ -310,7 +311,7 @@ export const RecordBoardCard = ({
         </StyledBoardCardHeader>
 
         <AnimatedEaseInOut
-          isOpen={!isCardInCompactMode || !isCompactModeActive}
+          isOpen={isCardExpanded || !isCompactModeActive}
           initial={false}
         >
           <StyledBoardCardBody>