Merge remote-tracking branch 'houkunlin/feat/file-row' into merge-houkunlin

src/features/file-listing/FileRow.tsx

@@ -4,19 +4,21 @@ import {
   Card,
   CardBody,
   Center,
+  Collapse,
   Grid,
   GridItem,
   Image,
   Link,
   Text,
+  useDisclosure,
   VStack,
   Wrap,
   WrapItem,
 } from '@chakra-ui/react';
-import { DecryptedAudioFile, ProcessState, deleteFile } from './fileListingSlice';
-import { useRef } from 'react';
+import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
+import { useCallback, useRef } from 'react';
 import { useAppDispatch } from '~/hooks';
-import coverFallback from '~/assets/no-cover.svg';
+import coverSvgUrl from '~/assets/no-cover.svg';
 
 interface FileRowProps {
   id: string;
@@ -24,6 +26,7 @@ interface FileRowProps {
 }
 
 export function FileRow({ id, file }: FileRowProps) {
+  const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true });
   const dispatch = useAppDispatch();
   const isDecrypted = file.state === ProcessState.COMPLETE;
   const metadata = file.metadata;
@@ -45,11 +48,15 @@ export function FileRow({ id, file }: FileRowProps) {
     }
   };
 
-  const handleDeleteRow = () => {
+  const handleDeleteRow = useCallback(() => {
+    onClose();
+    setTimeout(() => {
       dispatch(deleteFile({ id }));
-  };
+    }, 500);
+  }, [dispatch, id, onClose]);
 
   return (
+    <Collapse in={isOpen} animateOpacity unmountOnExit startingHeight={0} style={{ width: '100%' }}>
       <Card w="full" data-testid="file-row">
         <CardBody>
           <Grid
@@ -77,14 +84,12 @@ export function FileRow({ id, file }: FileRowProps) {
           >
             <GridItem area="cover">
               <Center w="160px" h="160px" m="auto">
-              {metadata && (
                 <Image
                   objectFit="cover"
-                  src={metadata.cover}
-                  alt={`"${metadata.album}" 的专辑封面`}
-                  fallbackSrc={coverFallback}
+                  src={metadata?.cover}
+                  alt={`${metadata?.album} 的专辑封面`}
+                  fallbackSrc={coverSvgUrl}
                 />
-              )}
               </Center>
             </GridItem>
             <GridItem area="title">
@@ -137,5 +142,6 @@ export function FileRow({ id, file }: FileRowProps) {
           </Grid>
         </CardBody>
       </Card>
+    </Collapse>
   );
 }