restructure files onto electron-vite boilerplate

2026-01-01 02:13:33 +00:00 · 2025-05-18 14:03:18 -07:00 · 2025-05-18 14:03:18 -07:00 · 1cf587bc8f
commit 1cf587bc8f
parent 91ce2cd8a1
457 changed files with 9927 additions and 11705 deletions
--- a/src/renderer/components/card/album-card.tsx
+++ b/src/renderer/components/card/album-card.tsx
@ -1,14 +1,16 @@
-import { useCallback } from 'react';
+import type { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/renderer/types';
+
 import { Center } from '@mantine/core';
+import { useCallback } from 'react';
 import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath, useNavigate } from 'react-router';
 import { SimpleImg } from 'react-simple-img';
 import styled from 'styled-components';
-import type { CardRow, CardRoute, Play, PlayQueueAddOptions } from '/@/renderer/types';
-import { Skeleton } from '/@/renderer/components/skeleton';
-import { CardControls } from '/@/renderer/components/card/card-controls';
+
 import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
+import { CardControls } from '/@/renderer/components/card/card-controls';
 import { CardRows } from '/@/renderer/components/card/card-rows';
+import { Skeleton } from '/@/renderer/components/skeleton';

 const CardWrapper = styled.div<{
    link?: boolean;
@ -104,7 +106,7 @@ const Row = styled.div<{ $secondary?: boolean }>`

 interface BaseGridCardProps {
    controls: {
-        cardRows: CardRow<Album | Artist | AlbumArtist>[];
+        cardRows: CardRow<Album | AlbumArtist | Artist>[];
        itemType: LibraryItem;
        playButtonBehavior: Play;
        route: CardRoute;
@ -116,14 +118,14 @@ interface BaseGridCardProps {
 }

 export const AlbumCard = ({
+    controls,
+    data,
+    handlePlayQueueAdd,
    loading,
    size,
-    handlePlayQueueAdd,
-    data,
-    controls,
 }: BaseGridCardProps) => {
    const navigate = useNavigate();
-    const { itemType, cardRows, route } = controls;
+    const { cardRows, itemType, route } = controls;

    const handleNavigate = useCallback(() => {
        navigate(
@ -194,9 +196,9 @@ export const AlbumCard = ({
        <CardWrapper>
            <StyledCard style={{ alignItems: 'center', display: 'flex' }}>
                <Skeleton
-                    visible
                    height={size}
                    radius="sm"
+                    visible
                    width={size}
                >
                    <ImageSection />
@ -204,10 +206,10 @@ export const AlbumCard = ({
                <DetailSection style={{ width: '100%' }}>
                    {(cardRows || []).map((_row: CardRow<Album>, index: number) => (
                        <Skeleton
-                            visible
                            height={15}
                            my={3}
                            radius="md"
+                            visible
                            width={!data ? (index > 0 ? '50%' : '90%') : '100%'}
                        >
                            <Row />
--- a/src/renderer/components/card/card-controls.tsx
+++ b/src/renderer/components/card/card-controls.tsx
@ -1,21 +1,23 @@
-import type { MouseEvent } from 'react';
-import React from 'react';
-import type { UnstyledButtonProps } from '@mantine/core';
-import { Group } from '@mantine/core';
-import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/ri';
-import styled from 'styled-components';
-import { _Button } from '/@/renderer/components/button';
 import type { PlayQueueAddOptions } from '/@/renderer/types';
-import { Play } from '/@/renderer/types';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import type { UnstyledButtonProps } from '@mantine/core';
+import type { MouseEvent } from 'react';
+
+import { Group } from '@mantine/core';
+import React from 'react';
+import { RiHeartFill, RiHeartLine, RiMore2Fill, RiPlayFill } from 'react-icons/ri';
+import styled from 'styled-components';
+
 import { LibraryItem } from '/@/renderer/api/types';
-import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
+import { _Button } from '/@/renderer/components/button';
 import {
    ALBUM_CONTEXT_MENU_ITEMS,
    ARTIST_CONTEXT_MENU_ITEMS,
 } from '/@/renderer/features/context-menu/context-menu-items';
+import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { Play } from '/@/renderer/types';

-type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;
+type PlayButtonType = React.ComponentPropsWithoutRef<'button'> & UnstyledButtonProps;

 const PlayButton = styled.button<PlayButtonType>`
    display: flex;
@ -104,9 +106,9 @@ const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
 `;

 export const CardControls = ({
+    handlePlayQueueAdd,
    itemData,
    itemType,
-    handlePlayQueueAdd,
 }: {
    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
    itemData: any;
@ -156,14 +158,14 @@ export const CardControls = ({
                        </FavoriteWrapper>
                    </SecondaryButton>
                    <SecondaryButton
-                        p={5}
-                        sx={{ svg: { fill: 'white !important' } }}
-                        variant="subtle"
                        onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                            handleContextMenu(e, [itemData]);
                        }}
+                        p={5}
+                        sx={{ svg: { fill: 'white !important' } }}
+                        variant="subtle"
                    >
                        <RiMore2Fill
                            color="white"
--- a/src/renderer/components/card/card-rows.tsx
+++ b/src/renderer/components/card/card-rows.tsx
@ -1,8 +1,9 @@
-import React from 'react';
 import formatDuration from 'format-duration';
+import React from 'react';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+
 import { Album, AlbumArtist, Artist, Playlist, Song } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
@ -23,7 +24,7 @@ const Row = styled.div<{ $secondary?: boolean }>`

 interface CardRowsProps {
    data: any;
-    rows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+    rows: CardRow<Album>[] | CardRow<AlbumArtist>[] | CardRow<Artist>[];
 }

 export const CardRows = ({ data, rows }: CardRowsProps) => {
@ -33,8 +34,8 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                if (row.arrayProperty && row.route) {
                    return (
                        <Row
-                            key={`row-${row.property}-${index}`}
                            $secondary={index > 0}
+                            key={`row-${row.property}-${index}`}
                        >
                            {data[row.property].map((item: any, itemIndex: number) => (
                                <React.Fragment key={`${data.id}-${item.id}`}>
@ -55,6 +56,7 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                        $noSelect
                                        $secondary={index > 0}
                                        component={Link}
+                                        onClick={(e) => e.stopPropagation()}
                                        overflow="hidden"
                                        size={index > 0 ? 'sm' : 'md'}
                                        to={generatePath(
@ -69,7 +71,6 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                                };
                                            }, {}),
                                        )}
-                                        onClick={(e) => e.stopPropagation()}
                                    >
                                        {row.arrayProperty &&
                                            (row.format
@ -87,9 +88,9 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                        <Row key={`row-${row.property}`}>
                            {data[row.property].map((item: any) => (
                                <Text
-                                    key={`${data.id}-${item.id}`}
                                    $noSelect
                                    $secondary={index > 0}
+                                    key={`${data.id}-${item.id}`}
                                    overflow="hidden"
                                    size={index > 0 ? 'sm' : 'md'}
                                >
@ -108,6 +109,7 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                $link
                                $noSelect
                                component={Link}
+                                onClick={(e) => e.stopPropagation()}
                                overflow="hidden"
                                to={generatePath(
                                    row.route.route,
@ -118,7 +120,6 @@ export const CardRows = ({ data, rows }: CardRowsProps) => {
                                        };
                                    }, {}),
                                )}
-                                onClick={(e) => e.stopPropagation()}
                            >
                                {data && (row.format ? row.format(data) : data[row.property])}
                            </Text>
--- a/src/renderer/components/card/poster-card.tsx
+++ b/src/renderer/components/card/poster-card.tsx
@ -3,15 +3,16 @@ import { RiAlbumFill, RiPlayListFill, RiUserVoiceFill } from 'react-icons/ri';
 import { generatePath, Link } from 'react-router-dom';
 import { SimpleImg } from 'react-simple-img';
 import styled, { css } from 'styled-components';
+
 import { Album, AlbumArtist, Artist, LibraryItem } 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 {
    controls: {
-        cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+        cardRows: CardRow<Album>[] | CardRow<AlbumArtist>[] | CardRow<Artist>[];
        handleFavorite: (options: {
            id: string[];
            isFavorite: boolean;
@ -101,8 +102,8 @@ const DetailContainer = styled.div`
 `;

 export const PosterCard = ({
-    data,
    controls,
+    data,
    isLoading,
    uniqueId,
 }: BaseGridCardProps & { uniqueId: string }) => {
@ -123,10 +124,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:
@ -184,8 +185,8 @@ export const PosterCard = ({
    return (
        <PosterCardContainer key={`placeholder-${uniqueId}-${data.id}`}>
            <Skeleton
-                visible
                radius="sm"
+                visible
            >
                <ImageContainerSkeleton />
            </Skeleton>
@ -193,10 +194,10 @@ export const PosterCard = ({
                <Stack spacing="sm">
                    {(controls?.cardRows || []).map((row, index) => (
                        <Skeleton
-                            key={`${index}-${row.arrayProperty}`}
-                            visible
                            height={14}
+                            key={`${index}-${row.arrayProperty}`}
                            radius="sm"
+                            visible
                        />
                    ))}
                </Stack>