restructure files onto electron-vite boilerplate

src/renderer/components/virtual-table/cells/actions-cell.tsx

@@ -1,19 +1,21 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
 import { RiMoreFill } from 'react-icons/ri';
+
 import { Button } from '/@/renderer/components/button';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 
-export const ActionsCell = ({ context, api }: ICellRendererParams) => {
+export const ActionsCell = ({ api, context }: ICellRendererParams) => {
     return (
         <CellContainer $position="center">
             <Button
                 compact
-                variant="subtle"
                 onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     context.onCellContextMenu(undefined, api, e);
                 }}
+                variant="subtle"
             >
                 <RiMoreFill />
             </Button>

src/renderer/components/virtual-table/cells/album-artist-cell.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
+import React from 'react';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
-import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+
+import { Separator } from '/@/renderer/components/separator';
+import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
-import { Skeleton } from '/@/renderer/components/skeleton';
-import { Separator } from '/@/renderer/components/separator';
 
-export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
+export const AlbumArtistCell = ({ data, value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer $position="left">
@@ -28,7 +30,7 @@ export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
                 overflow="hidden"
                 size="md"
             >
-                {value?.map((item: Artist | AlbumArtist, index: number) => (
+                {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
                         {item.id ? (

src/renderer/components/virtual-table/cells/artist-cell.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
+import React from 'react';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
-import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+
+import { Separator } from '/@/renderer/components/separator';
+import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { AppRoute } from '/@/renderer/router/routes';
-import { Skeleton } from '/@/renderer/components/skeleton';
-import { Separator } from '/@/renderer/components/separator';
 
-export const ArtistCell = ({ value, data }: ICellRendererParams) => {
+export const ArtistCell = ({ data, value }: ICellRendererParams) => {
     if (value === undefined) {
         return (
             <CellContainer $position="left">
@@ -28,7 +30,7 @@ export const ArtistCell = ({ value, data }: ICellRendererParams) => {
                 overflow="hidden"
                 size="md"
             >
-                {value?.map((item: Artist | AlbumArtist, index: number) => (
+                {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
                         {item.id ? (

src/renderer/components/virtual-table/cells/combined-title-cell-controls.tsx

@@ -1,13 +1,15 @@
-import React, { MouseEvent } from 'react';
 import type { UnstyledButtonProps } from '@mantine/core';
+
+import React, { MouseEvent } from 'react';
 import { RiPlayFill } from 'react-icons/ri';
 import styled from 'styled-components';
-import { Play } from '/@/renderer/types';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+
 import { LibraryItem } from '/@/renderer/api/types';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+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>`
     position: absolute;
@@ -50,9 +52,9 @@ const ListConverControlsContainer = styled.div`
 `;
 
 export const ListCoverControls = ({
+    context,
     itemData,
     itemType,
-    context,
     uniqueId,
 }: {
     context: Record<string, any>;

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -1,18 +1,20 @@
-import React, { useMemo } from 'react';
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
 import { Center } from '@mantine/core';
 import { motion } from 'framer-motion';
+import React, { useMemo } from 'react';
 import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import { SimpleImg } from 'react-simple-img';
 import styled from 'styled-components';
+
 import { AlbumArtist, Artist } from '/@/renderer/api/types';
-import { Text } from '/@/renderer/components/text';
-import { AppRoute } from '/@/renderer/router/routes';
-import { Skeleton } from '/@/renderer/components/skeleton';
 import { SEPARATOR_STRING } from '/@/renderer/api/utils';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { Text } from '/@/renderer/components/text';
 import { ListCoverControls } from '/@/renderer/components/virtual-table/cells/combined-title-cell-controls';
+import { AppRoute } from '/@/renderer/router/routes';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
     display: grid;
@@ -61,11 +63,11 @@ const StyledImage = styled(SimpleImg)`
 `;
 
 export const CombinedTitleCell = ({
-    value,
-    rowIndex,
-    node,
     context,
     data,
+    node,
+    rowIndex,
+    value,
 }: ICellRendererParams) => {
     const artists = useMemo(() => {
         if (!value) return null;
@@ -141,7 +143,7 @@ export const CombinedTitleCell = ({
                     size="md"
                 >
                     {artists?.length ? (
-                        artists.map((artist: Artist | AlbumArtist, index: number) => (
+                        artists.map((artist: AlbumArtist | Artist, index: number) => (
                             <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
                                 {index > 0 ? SEPARATOR_STRING : null}
                                 {artist.id ? (

src/renderer/components/virtual-table/cells/favorite-cell.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable import/no-cycle */
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
 import { RiHeartFill, RiHeartLine } from 'react-icons/ri';
+
 import { Button } from '/@/renderer/components/button';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 
-export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
+export const FavoriteCell = ({ data, node, value }: ICellRendererParams) => {
     const createMutation = useCreateFavorite({});
     const deleteMutation = useDeleteFavorite({});
 
@@ -49,6 +51,7 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
         <CellContainer $position="center">
             <Button
                 compact
+                onClick={handleToggleFavorite}
                 sx={{
                     svg: {
                         fill: !value
@@ -57,7 +60,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
                     },
                 }}
                 variant="subtle"
-                onClick={handleToggleFavorite}
             >
                 {!value ? <RiHeartLine size="1.3em" /> : <RiHeartFill size="1.3em" />}
             </Button>

src/renderer/components/virtual-table/cells/full-width-disc-cell.tsx

@@ -1,11 +1,13 @@
-import { useState } from 'react';
 import { ICellRendererParams } from '@ag-grid-community/core';
 import { Group } from '@mantine/core';
+import { useState } from 'react';
 import { RiCheckboxBlankLine, RiCheckboxLine } from 'react-icons/ri';
 import styled from 'styled-components';
+
+import { getNodesByDiscNumber, setNodeSelection } from '../utils';
+
 import { Button } from '/@/renderer/components/button';
 import { Paper } from '/@/renderer/components/paper';
-import { getNodesByDiscNumber, setNodeSelection } from '../utils';
 
 const Container = styled(Paper)`
     display: flex;
@@ -14,7 +16,7 @@ const Container = styled(Paper)`
     border: 1px solid transparent;
 `;
 
-export const FullWidthDiscCell = ({ node, data, api }: ICellRendererParams) => {
+export const FullWidthDiscCell = ({ api, data, node }: ICellRendererParams) => {
     const [isSelected, setIsSelected] = useState(false);
 
     const handleToggleDiscNodes = () => {
@@ -38,9 +40,9 @@ export const FullWidthDiscCell = ({ node, data, api }: ICellRendererParams) => {
                 <Button
                     compact
                     leftIcon={isSelected ? <RiCheckboxLine /> : <RiCheckboxBlankLine />}
+                    onClick={handleToggleDiscNodes}
                     size="md"
                     variant="subtle"
-                    onClick={handleToggleDiscNodes}
                 >
                     {data.name}
                 </Button>

src/renderer/components/virtual-table/cells/generic-cell.tsx

@@ -1,10 +1,12 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 
-export const CellContainer = styled.div<{ $position?: 'left' | 'center' | 'right' }>`
+export const CellContainer = styled.div<{ $position?: 'center' | 'left' | 'right' }>`
     display: flex;
     align-items: center;
     justify-content: ${(props) =>
@@ -22,13 +24,13 @@ type Options = {
     array?: boolean;
     isArray?: boolean;
     isLink?: boolean;
-    position?: 'left' | 'center' | 'right';
+    position?: 'center' | 'left' | 'right';
     primary?: boolean;
 };
 
 export const GenericCell = (
     { value, valueFormatted }: ICellRendererParams,
-    { position, primary, isLink }: Options,
+    { isLink, position, primary }: Options,
 ) => {
     const displayedValue = valueFormatted || value;
 

src/renderer/components/virtual-table/cells/genre-cell.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
-import type { ICellRendererParams } from '@ag-grid-community/core';
-import { generatePath, Link } from 'react-router-dom';
 import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+import type { ICellRendererParams } from '@ag-grid-community/core';
+
+import React from 'react';
+import { generatePath, Link } from 'react-router-dom';
+
+import { Separator } from '/@/renderer/components/separator';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
-import { Separator } from '/@/renderer/components/separator';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
-export const GenreCell = ({ value, data }: ICellRendererParams) => {
+export const GenreCell = ({ data, value }: ICellRendererParams) => {
     const genrePath = useGenreRoute();
     return (
         <CellContainer $position="left">
@@ -16,7 +18,7 @@ export const GenreCell = ({ value, data }: ICellRendererParams) => {
                 overflow="hidden"
                 size="md"
             >
-                {value?.map((item: Artist | AlbumArtist, index: number) => (
+                {value?.map((item: AlbumArtist | Artist, index: number) => (
                     <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
                         {index > 0 && <Separator />}
                         <Text

src/renderer/components/virtual-table/cells/note-cell.tsx

@@ -1,8 +1,10 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
-import { Skeleton } from '/@/renderer/components/skeleton';
-import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+
 import { useMemo } from 'react';
+
+import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
+import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
 
 export const NoteCell = ({ value }: ICellRendererParams) => {

src/renderer/components/virtual-table/cells/rating-cell.tsx

@@ -1,10 +1,11 @@
 /* eslint-disable import/no-cycle */
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
 import { Rating } from '/@/renderer/components/rating';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { useSetRating } from '/@/renderer/features/shared';
 
-export const RatingCell = ({ value, node }: ICellRendererParams) => {
+export const RatingCell = ({ node, value }: ICellRendererParams) => {
     const updateRatingMutation = useSetRating({});
 
     const handleUpdateRating = (rating: number) => {
@@ -27,9 +28,9 @@ export const RatingCell = ({ value, node }: ICellRendererParams) => {
     return (
         <CellContainer $position="center">
             <Rating
+                onChange={handleUpdateRating}
                 size="xs"
                 value={value?.userRating}
-                onChange={handleUpdateRating}
             />
         </CellContainer>
     );

src/renderer/components/virtual-table/cells/row-index-cell.tsx

@@ -1,4 +1,5 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 
@@ -132,7 +133,7 @@ const StaticSvg = () => {
     );
 };
 
-export const RowIndexCell = ({ value, eGridCell }: ICellRendererParams) => {
+export const RowIndexCell = ({ eGridCell, value }: ICellRendererParams) => {
     const classList = eGridCell.classList;
     // const isFocused = classList.contains('focused');
     const isPlaying = classList.contains('playing');

src/renderer/components/virtual-table/cells/title-cell.tsx

@@ -1,4 +1,5 @@
 import type { ICellRendererParams } from '@ag-grid-community/core';
+
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';