restructure files onto electron-vite boilerplate

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -4,11 +4,12 @@ import { generatePath, useNavigate } from 'react-router-dom';
 import { SimpleImg } from 'react-simple-img';
 import { ListChildComponentProps } from 'react-window';
 import styled from 'styled-components';
+
 import { Album, AlbumArtist, Artist, LibraryItem, Playlist, Song } from '/@/renderer/api/types';
 import { CardRows } from '/@/renderer/components/card';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
-import { CardRow, PlayQueueAddOptions, Play, CardRoute } from '/@/renderer/types';
+import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/renderer/types';
 
 interface BaseGridCardProps {
     columnIndex: number;
@@ -119,11 +120,11 @@ const DetailContainer = styled.div`
 `;
 
 export const PosterCard = ({
-    listChildProps,
-    data,
     columnIndex,
     controls,
+    data,
     isHidden,
+    listChildProps,
 }: BaseGridCardProps) => {
     const navigate = useNavigate();
 
@@ -144,10 +145,10 @@ export const PosterCard = ({
             case LibraryItem.ALBUM:
                 Placeholder = RiAlbumFill;
                 break;
-            case LibraryItem.ARTIST:
+            case LibraryItem.ALBUM_ARTIST:
                 Placeholder = RiUserVoiceFill;
                 break;
-            case LibraryItem.ALBUM_ARTIST:
+            case LibraryItem.ARTIST:
                 Placeholder = RiUserVoiceFill;
                 break;
             case LibraryItem.PLAYLIST:
@@ -160,8 +161,8 @@ export const PosterCard = ({
 
         return (
             <PosterCardContainer
-                key={`card-${columnIndex}-${listChildProps.index}`}
                 $itemGap={controls.itemGap}
+                key={`card-${columnIndex}-${listChildProps.index}`}
             >
                 <LinkContainer onClick={() => navigate(path)}>
                     <ImageContainer $isFavorite={data?.userFavorite}>
@@ -207,13 +208,13 @@ export const PosterCard = ({
 
     return (
         <PosterCardContainer
-            key={`card-${columnIndex}-${listChildProps.index}`}
             $isHidden={isHidden}
             $itemGap={controls.itemGap}
+            key={`card-${columnIndex}-${listChildProps.index}`}
         >
             <Skeleton
-                visible
                 radius="sm"
+                visible
             >
                 <ImageContainer />
             </Skeleton>
@@ -221,10 +222,10 @@ export const PosterCard = ({
                 <Stack spacing="sm">
                     {(controls?.cardRows || []).map((row, index) => (
                         <Skeleton
-                            key={`${index}-${columnIndex}-${row.arrayProperty}`}
-                            visible
                             height={14}
+                            key={`${index}-${columnIndex}-${row.arrayProperty}`}
                             radius="sm"
+                            visible
                         />
                     ))}
                 </Stack>