From 16f2033170f849d1adab96dc92da4e174ad374cd Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <97441447+Vardhaman619@users.noreply.github.com>
Date: Sat, 5 Oct 2024 14:34:06 +0530
Subject: [PATCH] Feat : Toggle Eye Icon to Expand/Collapse Kanban Card (#7396)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/RecordBoardCard.tsx            | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
index ef4aef726..d336467e8 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/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>