feat: rounded album cover image

src/features/file-listing/AlbumImage.tsx

@@ -0,0 +1,24 @@
+import { Box, Image } from '@chakra-ui/react';
+import noCoverFallbackImageURL from '~/assets/no-cover.svg';
+
+interface AlbumImageProps {
+  url?: string;
+  name?: string;
+}
+
+export function AlbumImage({ name, url }: AlbumImageProps) {
+  const coverAlternativeText = name ? `${name} 的专辑封面` : '专辑封面';
+
+  return (
+    <Box w="160px" h="160px" m="auto">
+      <Image
+        border="2px solid"
+        borderColor="gray.400"
+        borderRadius="50%"
+        objectFit="cover"
+        src={url || noCoverFallbackImageURL}
+        alt={coverAlternativeText}
+      />
+    </Box>
+  );
+}

src/features/file-listing/FileRow.tsx

@@ -4,10 +4,8 @@ import {
   Button,
   Card,
   CardBody,
-  Center,
   Collapse,
   GridItem,
-  Image,
   Link,
   Text,
   useDisclosure,
@@ -19,7 +17,7 @@ import { FileRowResponsiveGrid } from './FileRowResponsiveGrid';
 import { DecryptedAudioFile, deleteFile, ProcessState } from './fileListingSlice';
 import { useAppDispatch } from '~/hooks';
 import { AnimationDefinition } from 'framer-motion';
-import noCoverFallbackImageURL from '~/assets/no-cover.svg';
+import { AlbumImage } from './AlbumImage';
 
 interface FileRowProps {
   id: string;
@@ -68,13 +66,7 @@ export function FileRow({ id, file }: FileRowProps) {
         <CardBody>
           <FileRowResponsiveGrid>
             <GridItem area="cover">
-              <Center w="160px" h="160px" m="auto">
+              <AlbumImage name={metadata?.album} url={metadata?.cover} />
-                <Image
-                  objectFit="cover"
-                  src={metadata?.cover || noCoverFallbackImageURL}
-                  alt={`${metadata?.album} 的专辑封面`}
-                />
-              </Center>
             </GridItem>
             <GridItem area="title">
               <Box w="full" as="h4" fontWeight="semibold" mt="1" textAlign={{ base: 'center', md: 'left' }}>