restructure files onto electron-vite boilerplate

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -1,16 +1,18 @@
-import { NativeScrollArea, Spinner } from '/@/renderer/components';
-import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
-import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
+
+import { useRef } from 'react';
 import { useParams } from 'react-router';
-import { useFastAverageColor } from '/@/renderer/hooks';
+
+import { LibraryItem } from '/@/renderer/api/types';
+import { NativeScrollArea, Spinner } from '/@/renderer/components';
 import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
 import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
+import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { LibraryItem } from '/@/renderer/api/types';
+import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
+import { useFastAverageColor } from '/@/renderer/hooks';
 import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 
 const AlbumDetailRoute = () => {
     const tableRef = useRef<AgGridReactType | null>(null);
@@ -49,7 +51,6 @@ const AlbumDetailRoute = () => {
     return (
         <AnimatedPage key={`album-detail-${albumId}`}>
             <NativeScrollArea
-                ref={scrollAreaRef}
                 pageHeaderProps={{
                     backgroundColor: backgroundColor || undefined,
                     children: (
@@ -63,13 +64,14 @@ const AlbumDetailRoute = () => {
                     offset: 200,
                     target: headerRef,
                 }}
+                ref={scrollAreaRef}
             >
                 <AlbumDetailHeader
-                    ref={headerRef}
                     background={{
                         background,
                         blur: (albumBackground && albumBackgroundBlur) || 0,
                     }}
+                    ref={headerRef}
                 />
                 <AlbumDetailContent
                     background={background}

src/renderer/features/albums/routes/album-list-route.tsx

@@ -1,8 +1,10 @@
-import { useCallback, useMemo, useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import isEmpty from 'lodash/isEmpty';
+import { useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams } from 'react-router-dom';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumListQuery, GenreListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
@@ -21,7 +23,7 @@ import { useAlbumListCount } from '/@/renderer/features/albums/queries/album-lis
 
 const AlbumListRoute = () => {
     const { t } = useTranslation();
-    const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
+    const gridRef = useRef<null | VirtualInfiniteGridRef>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
     const [searchParams] = useSearchParams();

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -1,4 +1,19 @@
+import { Box, Center, Group, Stack } from '@mantine/core';
+import { useQuery } from '@tanstack/react-query';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RiErrorWarningLine, RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
+import { generatePath, useParams } from 'react-router';
+import { Link } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { LibraryItem, SongDetailResponse } from '/@/renderer/api/types';
 import { Button, Spinner, Spoiler, Text } from '/@/renderer/components';
+import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu';
+import { SONG_ALBUM_PAGE } from '/@/renderer/features/context-menu/context-menu-items';
+import { usePlayQueueAdd } from '/@/renderer/features/player';
 import {
     AnimatedPage,
     LibraryHeader,
@@ -6,27 +21,13 @@ import {
     useCreateFavorite,
     useDeleteFavorite,
 } from '/@/renderer/features/shared';
-import { Fragment } from 'react';
-import { generatePath, useParams } from 'react-router';
 import { useContainerQuery, useFastAverageColor } from '/@/renderer/hooks';
-import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { LibraryItem, SongDetailResponse } from '/@/renderer/api/types';
-import { useCurrentServer } from '/@/renderer/store';
-import { Stack, Group, Box, Center } from '@mantine/core';
-import { Link } from 'react-router-dom';
-import { AppRoute } from '/@/renderer/router/routes';
-import { formatDurationString } from '/@/renderer/utils';
-import { RiErrorWarningLine, RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
-import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
-import { SONG_ALBUM_PAGE } from '/@/renderer/features/context-menu/context-menu-items';
-import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu';
-import { styled } from 'styled-components';
 import { queryClient } from '/@/renderer/lib/react-query';
-import { useQuery } from '@tanstack/react-query';
-import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { useTranslation } from 'react-i18next';
+import { AppRoute } from '/@/renderer/router/routes';
+import { useCurrentServer } from '/@/renderer/store';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
+import { formatDurationString } from '/@/renderer/utils';
+import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
 
 const DetailContainer = styled.div`
     display: flex;
@@ -152,17 +153,17 @@ const DummyAlbumDetailRoute = () => {
                             mah="4rem"
                             spacing="md"
                             sx={{
+                                overflow: 'hidden',
                                 WebkitBoxOrient: 'vertical',
                                 WebkitLineClamp: 2,
-                                overflow: 'hidden',
                             }}
                         >
                             {detailQuery?.data?.albumArtists.map((artist) => (
                                 <Text
-                                    key={`artist-${artist.id}`}
                                     $link
                                     component={Link}
                                     fw={600}
+                                    key={`artist-${artist.id}`}
                                     size="md"
                                     to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                                         albumArtistId: artist.id,
@@ -190,8 +191,8 @@ const DummyAlbumDetailRoute = () => {
                                     createFavoriteMutation.isLoading ||
                                     deleteFavoriteMutation.isLoading
                                 }
-                                variant="subtle"
                                 onClick={handleFavorite}
+                                variant="subtle"
                             >
                                 {detailQuery?.data?.userFavorite ? (
                                     <RiHeartFill
@@ -204,11 +205,11 @@ const DummyAlbumDetailRoute = () => {
                             </Button>
                             <Button
                                 compact
-                                variant="subtle"
                                 onClick={(e) => {
                                     if (!detailQuery?.data) return;
                                     handleGeneralContextMenu(e, [detailQuery.data!]);
                                 }}
+                                variant="subtle"
                             >
                                 <RiMoreFill size={20} />
                             </Button>
@@ -220,9 +221,9 @@ const DummyAlbumDetailRoute = () => {
                         <Group spacing="sm">
                             {detailQuery?.data?.genres?.map((genre) => (
                                 <Button
-                                    key={`genre-${genre.id}`}
                                     compact
                                     component={Link}
+                                    key={`genre-${genre.id}`}
                                     radius={0}
                                     size="md"
                                     to={generatePath(AppRoute.LIBRARY_GENRES_SONGS, {