restructure files onto electron-vite boilerplate

src/renderer/features/action-required/components/action-required-container.tsx

@@ -1,14 +1,15 @@
-import { Stack, Group } from '@mantine/core';
-import { RiAlertFill } from 'react-icons/ri';
-import { Text } from '/@/renderer/components';
+import { Group, Stack } from '@mantine/core';
 import { ReactNode } from 'react';
+import { RiAlertFill } from 'react-icons/ri';
+
+import { Text } from '/@/renderer/components';
 
 interface ActionRequiredContainerProps {
     children: ReactNode;
     title: string;
 }
 
-export const ActionRequiredContainer = ({ title, children }: ActionRequiredContainerProps) => (
+export const ActionRequiredContainer = ({ children, title }: ActionRequiredContainerProps) => (
     <Stack sx={{ cursor: 'default', maxWidth: '700px' }}>
         <Group>
             <RiAlertFill

src/renderer/features/action-required/components/error-fallback.tsx

@@ -1,8 +1,10 @@
-import { Box, Center, Group, Stack } from '@mantine/core';
 import type { FallbackProps } from 'react-error-boundary';
+
+import { Box, Center, Group, Stack } from '@mantine/core';
 import { RiErrorWarningLine } from 'react-icons/ri';
 import { useRouteError } from 'react-router';
 import styled from 'styled-components';
+
 import { Button, Text } from '/@/renderer/components';
 
 const Container = styled(Box)`
@@ -25,8 +27,8 @@ export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
                     </Group>
                     <Text>{error?.message}</Text>
                     <Button
-                        variant="filled"
                         onClick={resetErrorBoundary}
+                        variant="filled"
                     >
                         Reload
                     </Button>

src/renderer/features/action-required/components/mpv-required.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from 'react';
 import isElectron from 'is-electron';
-import { FileInput, Text, Button, Checkbox } from '/@/renderer/components';
-import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
-import { PlaybackType } from '/@/renderer/types';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const localSettings = isElectron() ? window.electron.localSettings : null;
+import { Button, Checkbox, FileInput, Text } from '/@/renderer/components';
+import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
+import { PlaybackType } from '/@/renderer/types';
+
+const localSettings = isElectron() ? window.api.localSettings : null;
 
 export const MpvRequired = () => {
     const [mpvPath, setMpvPath] = useState('');
@@ -48,8 +49,8 @@ export const MpvRequired = () => {
             </Text>
             <FileInput
                 disabled={disabled}
-                placeholder={mpvPath}
                 onChange={handleSetMpvPath}
+                placeholder={mpvPath}
             />
             <Text>{t('setting.disable_mpv', { context: 'description' })}</Text>
             <Checkbox

src/renderer/features/action-required/components/route-error-boundary.tsx

@@ -1,6 +1,7 @@
-import { Center, Stack, Group, Divider, Box } from '@mantine/core';
+import { Box, Center, Divider, Group, Stack } from '@mantine/core';
 import { RiArrowLeftSLine, RiErrorWarningLine, RiHome4Line, RiMenuFill } from 'react-icons/ri';
 import { useNavigate, useRouteError } from 'react-router';
+
 import { Button, DropdownMenu, Text } from '/@/renderer/components';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 import { AppRoute } from '/@/renderer/router/routes';
@@ -28,9 +29,9 @@ const RouteErrorBoundary = () => {
                 <Stack sx={{ maxWidth: '50%' }}>
                     <Group>
                         <Button
+                            onClick={handleReturn}
                             px={10}
                             variant="subtle"
-                            onClick={handleReturn}
                         >
                             <RiArrowLeftSLine size={20} />
                         </Button>
@@ -48,10 +49,10 @@ const RouteErrorBoundary = () => {
                     >
                         <Button
                             leftIcon={<RiHome4Line />}
+                            onClick={handleHome}
                             size="md"
                             sx={{ flex: 0.5 }}
                             variant="default"
-                            onClick={handleHome}
                         >
                             Go home
                         </Button>
@@ -73,9 +74,9 @@ const RouteErrorBoundary = () => {
                     </Group>
                     <Group grow>
                         <Button
+                            onClick={handleReload}
                             size="md"
                             variant="filled"
-                            onClick={handleReload}
                         >
                             Reload
                         </Button>

src/renderer/features/action-required/components/server-required.tsx

@@ -1,4 +1,5 @@
 import { RiMenuFill } from 'react-icons/ri';
+
 import { Button, DropdownMenu, Text } from '/@/renderer/components';
 import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
 

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -1,16 +1,17 @@
 import { Center, Group, Stack } from '@mantine/core';
+import { openModal } from '@mantine/modals';
 import { useTranslation } from 'react-i18next';
 import { RiCheckFill, RiEdit2Line, RiHome4Line } from 'react-icons/ri';
 import { Link } from 'react-router-dom';
+
 import { Button, PageHeader, Text } from '/@/renderer/components';
 import { ActionRequiredContainer } from '/@/renderer/features/action-required/components/action-required-container';
 import { ServerCredentialRequired } from '/@/renderer/features/action-required/components/server-credential-required';
 import { ServerRequired } from '/@/renderer/features/action-required/components/server-required';
+import { ServerList } from '/@/renderer/features/servers';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
-import { openModal } from '@mantine/modals';
-import { ServerList } from '/@/renderer/features/servers';
 
 const ActionRequiredRoute = () => {
     const { t } = useTranslation();
@@ -88,8 +89,8 @@ const ActionRequiredRoute = () => {
                                 <Button
                                     fullWidth
                                     leftIcon={<RiEdit2Line />}
-                                    variant="filled"
                                     onClick={handleManageServersModal}
+                                    variant="filled"
                                 >
                                     {t('page.appMenu.manageServers', {
                                         postProcess: 'sentenceCase',

src/renderer/features/action-required/routes/invalid-route.tsx

@@ -1,6 +1,7 @@
 import { Center, Group, Stack } from '@mantine/core';
 import { RiQuestionLine } from 'react-icons/ri';
 import { useLocation, useNavigate } from 'react-router-dom';
+
 import { Button, Text } from '/@/renderer/components';
 import { AnimatedPage } from '/@/renderer/features/shared';
 
@@ -24,8 +25,8 @@ const InvalidRoute = () => {
                     </Group>
                     <Text>{location.pathname}</Text>
                     <Button
-                        variant="filled"
                         onClick={() => navigate(-1)}
+                        variant="filled"
                     >
                         Go back
                     </Button>

src/renderer/features/albums/components/album-detail-content.tsx

@@ -1,8 +1,9 @@
-import { MutableRefObject, useCallback, useMemo } from 'react';
-import { RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core';
 import { Box, Group, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
+import { MutableRefObject, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaLastfmSquare } from 'react-icons/fa';
 import { RiHeartFill, RiHeartLine, RiMoreFill, RiSettings2Fill } from 'react-icons/ri';
@@ -10,6 +11,7 @@ import { SiMusicbrainz } from 'react-icons/si';
 import { generatePath, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
     AlbumListQuery,
@@ -21,9 +23,9 @@ import {
 import { Button, Popover, Spoiler } from '/@/renderer/components';
 import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
 import {
+    getColumnDefs,
     TableConfigDropdown,
     VirtualTable,
-    getColumnDefs,
 } from '/@/renderer/components/virtual-table';
 import { FullWidthDiscCell } from '/@/renderer/components/virtual-table/cells/full-width-disc-cell';
 import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
@@ -41,6 +43,7 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { useAppFocus, useContainerQuery } from '/@/renderer/hooks';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useCurrentSong, useCurrentStatus } from '/@/renderer/store';
 import {
@@ -51,7 +54,6 @@ import {
 } from '/@/renderer/store/settings.store';
 import { Play } from '/@/renderer/types';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
-import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 const isFullWidthRow = (node: RowNode) => {
     return node.id?.startsWith('disc-');
@@ -75,7 +77,7 @@ interface AlbumDetailContentProps {
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentProps) => {
+export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentProps) => {
     const { t } = useTranslation();
     const { albumId } = useParams() as { albumId: string };
     const server = useCurrentServer();
@@ -112,7 +114,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
         }
 
         let discNumber = -1;
-        let discSubtitle: string | null = null;
+        let discSubtitle: null | string = null;
 
         const rowData: (QueueSong | { id: string; name: string })[] = [];
         const discTranslated = t('common.disc', { postProcess: 'upperCase' });
@@ -343,8 +345,8 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                                     createFavoriteMutation.isLoading ||
                                     deleteFavoriteMutation.isLoading
                                 }
-                                variant="subtle"
                                 onClick={handleFavorite}
+                                variant="subtle"
                             >
                                 {detailQuery?.data?.userFavorite ? (
                                     <RiHeartFill
@@ -357,11 +359,11 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                             </Button>
                             <Button
                                 compact
-                                variant="subtle"
                                 onClick={(e) => {
                                     if (!detailQuery?.data) return;
                                     handleGeneralContextMenu(e, [detailQuery.data!]);
                                 }}
+                                variant="subtle"
                             >
                                 <RiMoreFill size={20} />
                             </Button>
@@ -388,9 +390,9 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                         <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(genreRoute, {
@@ -451,15 +453,8 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                 )}
                 <Box style={{ minHeight: '300px' }}>
                     <VirtualTable
-                        key={`table-${tableConfig.rowHeight}`}
-                        ref={tableRef}
-                        autoHeight
-                        shouldUpdateSong
-                        stickyHeader
-                        suppressCellFocus
-                        suppressLoadingOverlay
-                        suppressRowDrag
                         autoFitColumns={tableConfig.autoFit}
+                        autoHeight
                         columnDefs={columnDefs}
                         context={{
                             currentSong,
@@ -479,17 +474,24 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                             if (isFullWidthRow(data.data)) return false;
                             return true;
                         }}
-                        rowClassRules={rowClassRules}
-                        rowData={songsRowData}
-                        rowSelection="multiple"
+                        key={`table-${tableConfig.rowHeight}`}
                         onCellContextMenu={onCellContextMenu}
                         onColumnMoved={onColumnMoved}
                         onRowDoubleClicked={handleRowDoubleClick}
+                        ref={tableRef}
+                        rowClassRules={rowClassRules}
+                        rowData={songsRowData}
+                        rowSelection="multiple"
+                        shouldUpdateSong
+                        stickyHeader
+                        suppressCellFocus
+                        suppressLoadingOverlay
+                        suppressRowDrag
                     />
                 </Box>
                 <Stack
-                    ref={cq.ref}
                     mt="3rem"
+                    ref={cq.ref}
                     spacing="lg"
                 >
                     {cq.height || cq.width ? (
@@ -498,7 +500,6 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                                 .filter((c) => !c.isHidden)
                                 .map((carousel, index) => (
                                     <MemoizedSwiperGridCarousel
-                                        key={`carousel-${carousel.uniqueId}-${index}`}
                                         cardRows={[
                                             {
                                                 property: 'name',
@@ -529,6 +530,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
                                         data={carousel.data}
                                         isLoading={carousel.loading}
                                         itemType={LibraryItem.ALBUM}
+                                        key={`carousel-${carousel.uniqueId}-${index}`}
                                         route={{
                                             route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                                             slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],

src/renderer/features/albums/components/album-detail-header.tsx

@@ -1,19 +1,20 @@
-import { forwardRef, Fragment, Ref, useCallback, useMemo } from 'react';
 import { Group, Stack } from '@mantine/core';
+import { forwardRef, Fragment, Ref, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath, useParams } from 'react-router';
 import { Link } from 'react-router-dom';
+
+import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumDetailResponse, LibraryItem, ServerType } from '/@/renderer/api/types';
 import { Rating, Text } from '/@/renderer/components';
 import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
 import { LibraryHeader, useSetRating } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
+import { useSongChange } from '/@/renderer/hooks/use-song-change';
+import { queryClient } from '/@/renderer/lib/react-query';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer } from '/@/renderer/store';
 import { formatDateAbsoluteUTC, formatDurationString } from '/@/renderer/utils';
-import { useSongChange } from '/@/renderer/hooks/use-song-change';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { queryClient } from '/@/renderer/lib/react-query';
 
 interface AlbumDetailHeaderProps {
     background: {
@@ -121,9 +122,9 @@ export const AlbumDetailHeader = forwardRef(
         return (
             <Stack ref={cq.ref}>
                 <LibraryHeader
-                    ref={ref}
                     imageUrl={detailQuery?.data?.imageUrl}
                     item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
+                    ref={ref}
                     title={detailQuery?.data?.name || ''}
                     {...background}
                 >
@@ -139,12 +140,12 @@ export const AlbumDetailHeader = forwardRef(
                                 <>
                                     <Text $noSelect>•</Text>
                                     <Rating
+                                        onChange={handleUpdateRating}
                                         readOnly={
                                             detailQuery?.isFetching ||
                                             updateRatingMutation.isLoading
                                         }
                                         value={detailQuery?.data?.userRating || 0}
-                                        onChange={handleUpdateRating}
                                     />
                                 </>
                             )}
@@ -153,17 +154,17 @@ export const AlbumDetailHeader = forwardRef(
                             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}`}
                                     to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                                         albumArtistId: artist.id,
                                     })}

src/renderer/features/albums/components/album-list-content.tsx

@@ -1,5 +1,7 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { lazy, MutableRefObject, Suspense } from 'react';
+
 import { Spinner } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
@@ -19,12 +21,12 @@ const AlbumListTableView = lazy(() =>
 );
 
 interface AlbumListContentProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const AlbumListContent = ({ itemCount, gridRef, tableRef }: AlbumListContentProps) => {
+export const AlbumListContent = ({ gridRef, itemCount, tableRef }: AlbumListContentProps) => {
     const { pageKey } = useListContext();
     const { display } = useListStoreByKey({ key: pageKey });
 

src/renderer/features/albums/components/album-list-grid-view.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
+
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
@@ -19,17 +20,17 @@ import {
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
-import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const handlePlayQueueAdd = usePlayQueueAdd();
-    const { pageKey, customFilters, id } = useListContext();
-    const { grid, display, filter } = useListStoreByKey<AlbumListQuery>({ key: pageKey });
+    const { customFilters, id, pageKey } = useListContext();
+    const { display, filter, grid } = useListStoreByKey<AlbumListQuery>({ key: pageKey });
     const { setGrid } = useListStoreActions();
 
     const [searchParams, setSearchParams] = useSearchParams();
@@ -189,8 +190,6 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
             <AutoSizer>
                 {({ height, width }: Size) => (
                     <VirtualInfiniteGrid
-                        key={`album-list-${server?.id}-${display}`}
-                        ref={gridRef}
                         cardRows={cardRows}
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
@@ -203,14 +202,16 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
                         itemGap={grid?.itemGap ?? 10}
                         itemSize={grid?.itemSize || 200}
                         itemType={LibraryItem.ALBUM}
+                        key={`album-list-${server?.id}-${display}`}
                         loading={itemCount === undefined || itemCount === null}
                         minimumBatchSize={40}
+                        onScroll={handleGridScroll}
+                        ref={gridRef}
                         route={{
                             route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                             slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
                         }}
                         width={width}
-                        onScroll={handleGridScroll}
                     />
                 )}
             </AutoSizer>

src/renderer/features/albums/components/album-list-header-filters.tsx

@@ -1,8 +1,9 @@
-import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { openModal } from '@mantine/modals';
 import { useQueryClient } from '@tanstack/react-query';
+import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
     RiAddBoxFill,
@@ -14,6 +15,8 @@ import {
     RiRefreshLine,
     RiSettings3Fill,
 } from 'react-icons/ri';
+
+import i18n from '/@/i18n/i18n';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
     AlbumListQuery,
@@ -39,7 +42,6 @@ import {
     useListStoreByKey,
 } from '/@/renderer/store';
 import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
-import i18n from '/@/i18n/i18n';
 
 const FILTERS = {
     jellyfin: [
@@ -191,7 +193,7 @@ const FILTERS = {
 };
 
 interface AlbumListHeaderFiltersProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount: number | undefined;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
@@ -203,16 +205,16 @@ export const AlbumListHeaderFilters = ({
 }: AlbumListHeaderFiltersProps) => {
     const { t } = useTranslation();
     const queryClient = useQueryClient();
-    const { pageKey, customFilters, handlePlay } = useListContext();
+    const { customFilters, handlePlay, pageKey } = useListContext();
     const server = useCurrentServer();
-    const { setFilter, setTable, setGrid, setDisplayType } = useListStoreActions();
-    const { display, filter, table, grid } = useListStoreByKey<AlbumListQuery>({
+    const { setDisplayType, setFilter, setGrid, setTable } = useListStoreActions();
+    const { display, filter, grid, table } = useListStoreByKey<AlbumListQuery>({
         filter: customFilters,
         key: pageKey,
     });
     const cq = useContainerQuery();
 
-    const { handleRefreshTable, handleRefreshGrid } = useListFilterRefresh({
+    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
         itemCount,
         itemType: LibraryItem.ALBUM,
         server,
@@ -249,12 +251,12 @@ export const AlbumListHeaderFilters = ({
         let FilterComponent;
 
         switch (server?.type) {
-            case ServerType.NAVIDROME:
-                FilterComponent = NavidromeAlbumFilters;
-                break;
             case ServerType.JELLYFIN:
                 FilterComponent = JellyfinAlbumFilters;
                 break;
+            case ServerType.NAVIDROME:
+                FilterComponent = NavidromeAlbumFilters;
+                break;
             case ServerType.SUBSONIC:
                 FilterComponent = SubsonicAlbumFilters;
                 break;
@@ -271,9 +273,9 @@ export const AlbumListHeaderFilters = ({
                 <FilterComponent
                     customFilters={customFilters}
                     disableArtistFilter={!!customFilters}
+                    onFilterChange={onFilterChange}
                     pageKey={pageKey}
                     serverId={server?.id}
-                    onFilterChange={onFilterChange}
                 />
             ),
             title: 'Album Filters',
@@ -450,10 +452,10 @@ export const AlbumListHeaderFilters = ({
                     <DropdownMenu.Dropdown>
                         {FILTERS[server?.type as keyof typeof FILTERS].map((f) => (
                             <DropdownMenu.Item
-                                key={`filter-${f.name}`}
                                 $isActive={f.value === filter.sortBy}
-                                value={f.value}
+                                key={`filter-${f.name}`}
                                 onClick={handleSetSortBy}
+                                value={f.value}
                             >
                                 {f.name}
                             </DropdownMenu.Item>
@@ -462,8 +464,8 @@ export const AlbumListHeaderFilters = ({
                 </DropdownMenu>
                 <Divider orientation="vertical" />
                 <OrderToggleButton
-                    sortOrder={filter.sortOrder}
                     onToggle={handleToggleSortOrder}
+                    sortOrder={filter.sortOrder}
                 />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
@@ -489,10 +491,10 @@ export const AlbumListHeaderFilters = ({
                             <DropdownMenu.Dropdown>
                                 {musicFoldersQuery.data?.items.map((folder) => (
                                     <DropdownMenu.Item
-                                        key={`musicFolder-${folder.id}`}
                                         $isActive={filter.musicFolderId === folder.id}
-                                        value={folder.id}
+                                        key={`musicFolder-${folder.id}`}
                                         onClick={handleSetMusicFolder}
+                                        value={folder.id}
                                     >
                                         {folder.name}
                                     </DropdownMenu.Item>
@@ -504,6 +506,7 @@ export const AlbumListHeaderFilters = ({
                 <Divider orientation="vertical" />
                 <Button
                     compact
+                    onClick={handleOpenFiltersModal}
                     size="md"
                     sx={{
                         svg: {
@@ -514,17 +517,16 @@ export const AlbumListHeaderFilters = ({
                         label: t('common.filters', { count: 2, postProcess: 'sentenceCase' }),
                     }}
                     variant="subtle"
-                    onClick={handleOpenFiltersModal}
                 >
                     <RiFilterFill size="1.3rem" />
                 </Button>
                 <Divider orientation="vertical" />
                 <Button
                     compact
+                    onClick={handleRefresh}
                     size="md"
                     tooltip={{ label: t('common.refresh', { postProcess: 'sentenceCase' }) }}
                     variant="subtle"
-                    onClick={handleRefresh}
                 >
                     <RiRefreshLine size="1.3rem" />
                 </Button>
@@ -594,22 +596,22 @@ export const AlbumListHeaderFilters = ({
                         </DropdownMenu.Label>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.CARD}
-                            value={ListDisplayType.CARD}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.CARD}
                         >
                             {t('table.config.view.card', { postProcess: 'sentenceCase' })}
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.POSTER}
-                            value={ListDisplayType.POSTER}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.POSTER}
                         >
                             {t('table.config.view.poster', { postProcess: 'sentenceCase' })}
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.TABLE}
-                            value={ListDisplayType.TABLE}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.TABLE}
                         >
                             {t('table.config.view.table', { postProcess: 'sentenceCase' })}
                         </DropdownMenu.Item>
@@ -665,8 +667,8 @@ export const AlbumListHeaderFilters = ({
                                             defaultValue={table?.columns.map(
                                                 (column) => column.column,
                                             )}
-                                            width={300}
                                             onChange={handleTableColumns}
+                                            width={300}
                                         />
                                         <Group position="apart">
                                             <Text>Auto Fit Columns</Text>

src/renderer/features/albums/components/album-list-header.tsx

@@ -1,21 +1,23 @@
-import { useEffect, useRef, type ChangeEvent, type MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
+import { type ChangeEvent, type MutableRefObject, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { AlbumListQuery, LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
+import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 import { AlbumListFilter, useCurrentServer, usePlayButtonBehavior } from '/@/renderer/store';
 import { titleCase } from '/@/renderer/utils';
-import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
 
 interface AlbumListHeaderProps {
     genreId?: string;
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
     title?: string;
@@ -23,8 +25,8 @@ interface AlbumListHeaderProps {
 
 export const AlbumListHeader = ({
     genreId,
-    itemCount,
     gridRef,
+    itemCount,
     tableRef,
     title,
 }: AlbumListHeaderProps) => {
@@ -82,8 +84,8 @@ export const AlbumListHeader = ({
                     <Group>
                         <SearchInput
                             defaultValue={filter.searchTerm}
-                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                             onChange={handleSearch}
+                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                         />
                     </Group>
                 </Flex>

src/renderer/features/albums/components/album-list-table-view.tsx

@@ -1,4 +1,5 @@
 import { useVirtualTable } from '../../../components/virtual-table/hooks/use-virtual-table';
+
 import { LibraryItem } from '/@/renderer/api/types';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { VirtualTable } from '/@/renderer/components/virtual-table';
@@ -6,9 +7,9 @@ import { useListContext } from '/@/renderer/context/list-context';
 import { ALBUM_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import { useCurrentServer } from '/@/renderer/store';
 
-export const AlbumListTableView = ({ tableRef, itemCount }: any) => {
+export const AlbumListTableView = ({ itemCount, tableRef }: any) => {
     const server = useCurrentServer();
-    const { pageKey, customFilters, id } = useListContext();
+    const { customFilters, id, pageKey } = useListContext();
 
     const tableProps = useVirtualTable({
         contextMenu: ALBUM_CONTEXT_MENU_ITEMS,

src/renderer/features/albums/components/jellyfin-album-filters.tsx

@@ -1,8 +1,10 @@
-import { ChangeEvent, useMemo, useState } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
+import { ChangeEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { useListFilterByKey } from '../../../store/list.store';
+
 import {
     AlbumArtistListSort,
     AlbumListQuery,
@@ -11,11 +13,11 @@ import {
     SortOrder,
 } from '/@/renderer/api/types';
 import { NumberInput, SpinnerIcon, Switch, Text } from '/@/renderer/components';
+import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
 import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
 import { useGenreList } from '/@/renderer/features/genres';
-import { AlbumListFilter, useListStoreActions } from '/@/renderer/store';
 import { useTagList } from '/@/renderer/features/tag/queries/use-tag-list';
-import { MultiSelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
+import { AlbumListFilter, useListStoreActions } from '/@/renderer/store';
 
 interface JellyfinAlbumFiltersProps {
     customFilters?: Partial<AlbumListFilter>;
@@ -151,7 +153,7 @@ export const JellyfinAlbumFilters = ({
         }));
     }, [albumArtistListQuery?.data?.items]);
 
-    const handleAlbumArtistFilter = (e: string[] | null) => {
+    const handleAlbumArtistFilter = (e: null | string[]) => {
         const updatedFilters = setFilter({
             customFilters,
             data: {
@@ -192,8 +194,8 @@ export const JellyfinAlbumFilters = ({
                     <Text>{filter.label}</Text>
                     <Switch
                         checked={filter?.value || false}
-                        size="xs"
                         onChange={filter.onChange}
+                        size="xs"
                     />
                 </Group>
             ))}
@@ -205,8 +207,8 @@ export const JellyfinAlbumFilters = ({
                     label={t('filter.fromYear', { postProcess: 'sentenceCase' })}
                     max={2300}
                     min={1700}
-                    required={!!filter?.maxYear}
                     onChange={(e) => handleMinYearFilter(e)}
+                    required={!!filter?.maxYear}
                 />
                 <NumberInput
                     defaultValue={filter?.maxYear}
@@ -214,47 +216,47 @@ export const JellyfinAlbumFilters = ({
                     label={t('filter.toYear', { postProcess: 'sentenceCase' })}
                     max={2300}
                     min={1700}
-                    required={!!filter?.minYear}
                     onChange={(e) => handleMaxYearFilter(e)}
+                    required={!!filter?.minYear}
                 />
             </Group>
             <Group grow>
                 <MultiSelectWithInvalidData
                     clearable
-                    searchable
                     data={genreList}
                     defaultValue={filter.genres}
                     label={t('entity.genre', { count: 2, postProcess: 'sentenceCase' })}
                     onChange={handleGenresFilter}
+                    searchable
                 />
             </Group>
 
             <Group grow>
                 <MultiSelectWithInvalidData
                     clearable
-                    searchable
                     data={selectableAlbumArtists}
                     defaultValue={filter?._custom?.jellyfin?.AlbumArtistIds?.split(',')}
                     disabled={disableArtistFilter}
                     label={t('entity.artist', { count: 2, postProcess: 'sentenceCase' })}
                     limit={300}
-                    placeholder="Type to search for an artist"
-                    rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
-                    searchValue={albumArtistSearchTerm}
                     onChange={handleAlbumArtistFilter}
                     onSearchChange={setAlbumArtistSearchTerm}
+                    placeholder="Type to search for an artist"
+                    rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
+                    searchable
+                    searchValue={albumArtistSearchTerm}
                 />
             </Group>
             {tagsQuery.data?.boolTags?.length && (
                 <Group grow>
                     <MultiSelectWithInvalidData
                         clearable
-                        searchable
                         data={tagsQuery.data.boolTags}
                         defaultValue={selectedTags}
                         label={t('common.tags', { postProcess: 'sentenceCase' })}
-                        width={250}
                         onChange={handleTagFilter}
+                        searchable
+                        width={250}
                     />
                 </Group>
             )}

src/renderer/features/albums/components/navidrome-album-filters.tsx

@@ -1,10 +1,8 @@
-import { ChangeEvent, useMemo, useState } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
-import { NumberInput, Switch, Text, SpinnerIcon } from '/@/renderer/components';
-import { AlbumListFilter, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import debounce from 'lodash/debounce';
-import { useGenreList } from '/@/renderer/features/genres';
-import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
+import { ChangeEvent, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import {
     AlbumArtistListSort,
     AlbumListQuery,
@@ -12,9 +10,12 @@ import {
     LibraryItem,
     SortOrder,
 } from '/@/renderer/api/types';
-import { useTranslation } from 'react-i18next';
-import { useTagList } from '/@/renderer/features/tag/queries/use-tag-list';
+import { NumberInput, SpinnerIcon, Switch, Text } from '/@/renderer/components';
 import { SelectWithInvalidData } from '/@/renderer/components/select-with-invalid-data';
+import { useAlbumArtistList } from '/@/renderer/features/artists/queries/album-artist-list-query';
+import { useGenreList } from '/@/renderer/features/genres';
+import { useTagList } from '/@/renderer/features/tag/queries/use-tag-list';
+import { AlbumListFilter, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 
 interface NavidromeAlbumFiltersProps {
     customFilters?: Partial<AlbumListFilter>;
@@ -26,8 +27,8 @@ interface NavidromeAlbumFiltersProps {
 
 export const NavidromeAlbumFilters = ({
     customFilters,
-    onFilterChange,
     disableArtistFilter,
+    onFilterChange,
     pageKey,
     serverId,
 }: NavidromeAlbumFiltersProps) => {
@@ -52,7 +53,7 @@ export const NavidromeAlbumFilters = ({
         }));
     }, [genreListQuery.data]);
 
-    const handleGenresFilter = debounce((e: string | null) => {
+    const handleGenresFilter = debounce((e: null | string) => {
         const updatedFilters = setFilter({
             customFilters,
             data: {
@@ -192,7 +193,7 @@ export const NavidromeAlbumFilters = ({
         }));
     }, [albumArtistListQuery?.data?.items]);
 
-    const handleAlbumArtistFilter = (e: string | null) => {
+    const handleAlbumArtistFilter = (e: null | string) => {
         const updatedFilters = setFilter({
             data: {
                 _custom: {
@@ -209,7 +210,7 @@ export const NavidromeAlbumFilters = ({
         onFilterChange(updatedFilters);
     };
 
-    const handleTagFilter = debounce((tag: string, e: string | null) => {
+    const handleTagFilter = debounce((tag: string, e: null | string) => {
         const updatedFilters = setFilter({
             customFilters,
             data: {
@@ -254,44 +255,44 @@ export const NavidromeAlbumFilters = ({
                 />
                 <SelectWithInvalidData
                     clearable
-                    searchable
                     data={genreList}
                     defaultValue={filter._custom?.navidrome?.genre_id}
                     label={t('entity.genre', { count: 1, postProcess: 'titleCase' })}
                     onChange={handleGenresFilter}
+                    searchable
                 />
             </Group>
             <Group grow>
                 <SelectWithInvalidData
                     clearable
-                    searchable
                     data={selectableAlbumArtists}
                     defaultValue={filter._custom?.navidrome?.artist_id}
                     disabled={disableArtistFilter}
                     label={t('entity.artist', { count: 1, postProcess: 'titleCase' })}
                     limit={300}
-                    rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
-                    searchValue={albumArtistSearchTerm}
                     onChange={handleAlbumArtistFilter}
                     onSearchChange={setAlbumArtistSearchTerm}
+                    rightSection={albumArtistListQuery.isFetching ? <SpinnerIcon /> : undefined}
+                    searchable
+                    searchValue={albumArtistSearchTerm}
                 />
             </Group>
             {tagsQuery.data?.enumTags?.length &&
                 tagsQuery.data.enumTags.map((tag) => (
                     <Group
-                        key={tag.name}
                         grow
+                        key={tag.name}
                     >
                         <SelectWithInvalidData
                             clearable
-                            searchable
                             data={tag.options}
                             defaultValue={
                                 filter._custom?.navidrome?.[tag.name] as string | undefined
                             }
                             label={tag.name}
-                            width={150}
                             onChange={(value) => handleTagFilter(tag.name, value)}
+                            searchable
+                            width={150}
                         />
                     </Group>
                 ))}

src/renderer/features/albums/components/subsonic-album-filters.tsx

@@ -2,6 +2,7 @@ import { Divider, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { ChangeEvent, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { AlbumListQuery, GenreListSort, LibraryItem, SortOrder } from '/@/renderer/api/types';
 import { NumberInput, Select, Switch, Text } from '/@/renderer/components';
 import { useGenreList } from '/@/renderer/features/genres';
@@ -39,7 +40,7 @@ export const SubsonicAlbumFilters = ({
         }));
     }, [genreListQuery.data]);
 
-    const handleGenresFilter = debounce((e: string | null) => {
+    const handleGenresFilter = debounce((e: null | string) => {
         const updatedFilters = setFilter({
             data: {
                 genres: e ? [e] : undefined,
@@ -68,7 +69,7 @@ export const SubsonicAlbumFilters = ({
         },
     ];
 
-    const handleYearFilter = debounce((e: number | string, type: 'min' | 'max') => {
+    const handleYearFilter = debounce((e: number | string, type: 'max' | 'min') => {
         let data: Partial<AlbumListQuery> = {};
 
         if (type === 'min') {
@@ -128,12 +129,12 @@ export const SubsonicAlbumFilters = ({
             <Group grow>
                 <Select
                     clearable
-                    searchable
                     data={genreList}
                     defaultValue={filter.genres?.length ? filter.genres[0] : undefined}
                     disabled={Boolean(filter.minYear || filter.maxYear)}
                     label={t('entity.genre', { count: 1, postProcess: 'titleCase' })}
                     onChange={handleGenresFilter}
+                    searchable
                 />
             </Group>
         </Stack>

src/renderer/features/albums/context/album-list-context.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+
 import { ListKey } from '/@/renderer/store';
 
 export const AlbumListContext = createContext<{ id?: string; pageKey: ListKey }>({

src/renderer/features/albums/queries/album-detail-query.ts

@@ -1,9 +1,12 @@
-import { useQuery } from '@tanstack/react-query';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { getServerById } from '../../../store/auth.store';
 import type { AlbumDetailQuery } from '/@/renderer/api/types';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { getServerById } from '../../../store/auth.store';
+
 import { controller } from '/@/renderer/api/controller';
+import { queryKeys } from '/@/renderer/api/query-keys';
 
 export const useAlbumDetail = (args: QueryHookArgs<AlbumDetailQuery>) => {
     const { options, query, serverId } = args;

src/renderer/features/albums/queries/album-list-count-query.ts

@@ -1,8 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
-import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import type { AlbumListQuery } from '/@/renderer/api/types';
 import type { QueryHookArgs } from '/@/renderer/lib/react-query';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
 import { getServerById } from '/@/renderer/store';
 
 export const useAlbumListCount = (args: QueryHookArgs<AlbumListQuery>) => {

src/renderer/features/albums/queries/album-list-query.ts

@@ -1,9 +1,11 @@
+import type { AlbumListQuery, AlbumListResponse } from '/@/renderer/api/types';
+import type { QueryHookArgs } from '/@/renderer/lib/react-query';
+
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+
 import { api } from '/@/renderer/api';
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import type { AlbumListQuery, AlbumListResponse } from '/@/renderer/api/types';
-import type { QueryHookArgs } from '/@/renderer/lib/react-query';
 import { getServerById } from '/@/renderer/store';
 
 export const useAlbumList = (args: QueryHookArgs<AlbumListQuery>) => {

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, {

src/renderer/features/artists/components/album-artist-detail-content.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
 import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { Box, Grid, Group, Stack } from '@mantine/core';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaLastfmSquare } from 'react-icons/fa';
 import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
@@ -8,6 +8,7 @@ import { SiMusicbrainz } from 'react-icons/si';
 import { generatePath, useParams } from 'react-router';
 import { createSearchParams, Link } from 'react-router-dom';
 import styled from 'styled-components';
+
 import {
     Album,
     AlbumArtist,
@@ -35,12 +36,12 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
 import { useContainerQuery } from '/@/renderer/hooks';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 import { AppRoute } from '/@/renderer/router/routes';
 import { ArtistItem, useCurrentServer } from '/@/renderer/store';
 import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { CardRow, Play, TableColumn } from '/@/renderer/types';
 import { sanitize } from '/@/renderer/utils/sanitize';
-import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 const ContentContainer = styled.div`
     position: relative;
@@ -224,9 +225,9 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                         </TextTitle>
                         <Button
                             compact
-                            uppercase
                             component={Link}
                             to={artistDiscographyLink}
+                            uppercase
                             variant="subtle"
                         >
                             {t('page.albumArtistDetail.viewDiscography')}
@@ -385,8 +386,8 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                             loading={
                                 createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading
                             }
-                            variant="subtle"
                             onClick={handleFavorite}
+                            variant="subtle"
                         >
                             {detailQuery?.data?.userFavorite ? (
                                 <RiHeartFill
@@ -399,11 +400,11 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                         </Button>
                         <Button
                             compact
-                            variant="subtle"
                             onClick={(e) => {
                                 if (!detailQuery?.data) return;
                                 handleGeneralContextMenu(e, [detailQuery.data!]);
                             }}
+                            variant="subtle"
                         >
                             <RiMoreFill size={20} />
                         </Button>
@@ -412,18 +413,18 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                 <Group spacing="md">
                     <Button
                         compact
-                        uppercase
                         component={Link}
                         to={artistDiscographyLink}
+                        uppercase
                         variant="subtle"
                     >
                         {t('page.albumArtistDetail.viewDiscography')}
                     </Button>
                     <Button
                         compact
-                        uppercase
                         component={Link}
                         to={artistSongsLink}
+                        uppercase
                         variant="subtle"
                     >
                         {t('page.albumArtistDetail.viewAllTracks')}
@@ -434,9 +435,9 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                         <Group spacing="sm">
                             {detailQuery?.data?.genres?.map((genre) => (
                                 <Button
-                                    key={`genre-${genre.id}`}
                                     compact
                                     component={Link}
+                                    key={`genre-${genre.id}`}
                                     radius="md"
                                     size="md"
                                     to={generatePath(genrePath, {
@@ -523,8 +524,8 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                     position="apart"
                                 >
                                     <Group
-                                        noWrap
                                         align="flex-end"
+                                        noWrap
                                     >
                                         <TextTitle
                                             order={2}
@@ -536,7 +537,6 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                         </TextTitle>
                                         <Button
                                             compact
-                                            uppercase
                                             component={Link}
                                             to={generatePath(
                                                 AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS,
@@ -544,6 +544,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                                     albumArtistId: routeId,
                                                 },
                                             )}
+                                            uppercase
                                             variant="subtle"
                                         >
                                             {t('page.albumArtistDetail.viewAll', {
@@ -555,24 +556,24 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
                                 <VirtualTable
                                     autoFitColumns
                                     autoHeight
+                                    columnDefs={topSongsColumnDefs}
+                                    context={{
+                                        itemType: LibraryItem.SONG,
+                                    }}
                                     deselectOnClickOutside
+                                    enableCellChangeFlash={false}
+                                    getRowId={(data) => data.data.uniqueId}
+                                    onCellContextMenu={handleContextMenu}
+                                    onRowDoubleClicked={handleRowDoubleClick}
+                                    rowData={topSongs}
+                                    rowHeight={60}
+                                    rowSelection="multiple"
                                     shouldUpdateSong
                                     stickyHeader
                                     suppressCellFocus
                                     suppressHorizontalScroll
                                     suppressLoadingOverlay
                                     suppressRowDrag
-                                    columnDefs={topSongsColumnDefs}
-                                    context={{
-                                        itemType: LibraryItem.SONG,
-                                    }}
-                                    enableCellChangeFlash={false}
-                                    getRowId={(data) => data.data.uniqueId}
-                                    rowData={topSongs}
-                                    rowHeight={60}
-                                    rowSelection="multiple"
-                                    onCellContextMenu={handleContextMenu}
-                                    onRowDoubleClicked={handleRowDoubleClick}
                                 />
                             </Box>
                         </Grid.Col>

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -1,14 +1,16 @@
-import { forwardRef, Fragment, Ref } from 'react';
 import { Group, Rating, Stack } from '@mantine/core';
+import { forwardRef, Fragment, Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
+
+import { useCurrentServer } from '../../../store/auth.store';
+
 import { LibraryItem, ServerType } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components';
 import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
 import { LibraryHeader, useSetRating } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { formatDurationString } from '/@/renderer/utils';
-import { useCurrentServer } from '../../../store/auth.store';
 
 interface AlbumArtistDetailHeaderProps {
     background: string;
@@ -72,10 +74,10 @@ export const AlbumArtistDetailHeader = forwardRef(
 
         return (
             <LibraryHeader
-                ref={ref}
                 background={background}
                 imageUrl={detailQuery?.data?.imageUrl}
                 item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
+                ref={ref}
                 title={detailQuery?.data?.name || ''}
             >
                 <Stack>
@@ -92,11 +94,11 @@ export const AlbumArtistDetailHeader = forwardRef(
                             <>
                                 <Text $noSelect>•</Text>
                                 <Rating
+                                    onChange={handleUpdateRating}
                                     readOnly={
                                         detailQuery?.isFetching || updateRatingMutation.isLoading
                                     }
                                     value={detailQuery?.data?.userRating || 0}
-                                    onChange={handleUpdateRating}
                                 />
                             </>
                         )}

src/renderer/features/artists/components/album-artist-detail-top-songs-list-content.tsx

@@ -1,7 +1,10 @@
 import type { RowDoubleClickedEvent } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { MutableRefObject } from 'react';
+
 import { useListContext } from '../../../context/list-context';
+
 import { LibraryItem, QueueSong, SongListQuery } from '/@/renderer/api/types';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { VirtualTable } from '/@/renderer/components/virtual-table';
@@ -18,8 +21,8 @@ interface AlbumArtistSongListContentProps {
 }
 
 export const AlbumArtistDetailTopSongsListContent = ({
-    tableRef,
     data,
+    tableRef,
 }: AlbumArtistSongListContentProps) => {
     const server = useCurrentServer();
     const { id, pageKey } = useListContext();
@@ -67,11 +70,11 @@ export const AlbumArtistDetailTopSongsListContent = ({
                     shouldUpdateSong
                     {...tableProps}
                     getRowId={(data) => data.data.uniqueId}
+                    onRowDoubleClicked={handleRowDoubleClick}
                     rowClassRules={rowClassRules}
                     rowData={data}
                     rowModelType="clientSide"
                     rowSelection="multiple"
-                    onRowDoubleClicked={handleRowDoubleClick}
                 />
             </VirtualGridAutoSizerContainer>
         </>

src/renderer/features/artists/components/album-artist-detail-top-songs-list-header.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next';
 import { RiAddBoxFill, RiAddCircleFill, RiMoreFill, RiPlayFill } from 'react-icons/ri';
+
 import { QueueSong } from '/@/renderer/api/types';
-import { Button, DropdownMenu, PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
+import { Button, DropdownMenu, PageHeader, Paper, SpinnerIcon } from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
@@ -14,9 +15,9 @@ interface AlbumArtistDetailTopSongsListHeaderProps {
 }
 
 export const AlbumArtistDetailTopSongsListHeader = ({
-    title,
-    itemCount,
     data,
+    itemCount,
+    title,
 }: AlbumArtistDetailTopSongsListHeaderProps) => {
     const { t } = useTranslation();
     const handlePlayQueueAdd = usePlayQueueAdd();

src/renderer/features/artists/components/album-artist-list-content.tsx

@@ -1,10 +1,13 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { lazy, MutableRefObject, Suspense } from 'react';
+
+import { useListStoreByKey } from '../../../store/list.store';
+
 import { Spinner } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import { ListDisplayType } from '/@/renderer/types';
-import { useListStoreByKey } from '../../../store/list.store';
 import { useListContext } from '/@/renderer/context/list-context';
+import { ListDisplayType } from '/@/renderer/types';
 
 const AlbumArtistListGridView = lazy(() =>
     import('/@/renderer/features/artists/components/album-artist-list-grid-view').then(
@@ -23,14 +26,14 @@ const AlbumArtistListTableView = lazy(() =>
 );
 
 interface AlbumArtistListContentProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
 export const AlbumArtistListContent = ({
-    itemCount,
     gridRef,
+    itemCount,
     tableRef,
 }: AlbumArtistListContentProps) => {
     const { pageKey } = useListContext();

src/renderer/features/artists/components/album-artist-list-grid-view.tsx

@@ -2,8 +2,10 @@ import { QueryKey, useQueryClient } from '@tanstack/react-query';
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
+
 import { VirtualGridAutoSizerContainer } from '../../../components/virtual-grid/virtual-grid-wrapper';
 import { useListStoreByKey } from '../../../store/list.store';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
@@ -17,28 +19,28 @@ import { ALBUMARTIST_CARD_ROWS } from '/@/renderer/components';
 import { VirtualInfiniteGrid, VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
-import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 interface AlbumArtistListGridViewProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
 }
 
-export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListGridViewProps) => {
+export const AlbumArtistListGridView = ({ gridRef, itemCount }: AlbumArtistListGridViewProps) => {
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const handlePlayQueueAdd = usePlayQueueAdd();
 
     const { pageKey } = useListContext();
-    const { grid, display, filter } = useListStoreByKey<AlbumArtistListQuery>({ key: pageKey });
+    const { display, filter, grid } = useListStoreByKey<AlbumArtistListQuery>({ key: pageKey });
     const { setGrid } = useListStoreActions();
     const handleFavorite = useHandleFavorite({ gridRef, server });
 
     const fetchInitialData = useCallback(() => {
-        const query: Omit<AlbumArtistListQuery, 'startIndex' | 'limit'> = {
+        const query: Omit<AlbumArtistListQuery, 'limit' | 'startIndex'> = {
             ...filter,
         };
 
@@ -109,6 +111,9 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
         const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
 
         switch (filter.sortBy) {
+            case AlbumArtistListSort.ALBUM_COUNT:
+                rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
+                break;
             case AlbumArtistListSort.DURATION:
                 rows.push(ALBUMARTIST_CARD_ROWS.duration);
                 break;
@@ -116,9 +121,6 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
                 break;
             case AlbumArtistListSort.NAME:
                 break;
-            case AlbumArtistListSort.ALBUM_COUNT:
-                rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
-                break;
             case AlbumArtistListSort.PLAY_COUNT:
                 rows.push(ALBUMARTIST_CARD_ROWS.playCount);
                 break;
@@ -129,11 +131,11 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
                 break;
             case AlbumArtistListSort.RECENTLY_ADDED:
                 break;
+            case AlbumArtistListSort.RELEASE_DATE:
+                break;
             case AlbumArtistListSort.SONG_COUNT:
                 rows.push(ALBUMARTIST_CARD_ROWS.songCount);
                 break;
-            case AlbumArtistListSort.RELEASE_DATE:
-                break;
         }
 
         return rows;
@@ -144,7 +146,6 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
             <AutoSizer>
                 {({ height, width }: Size) => (
                     <VirtualInfiniteGrid
-                        ref={gridRef}
                         cardRows={cardRows}
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
@@ -159,12 +160,13 @@ export const AlbumArtistListGridView = ({ itemCount, gridRef }: AlbumArtistListG
                         itemType={LibraryItem.ALBUM_ARTIST}
                         loading={itemCount === undefined || itemCount === null}
                         minimumBatchSize={40}
+                        onScroll={handleGridScroll}
+                        ref={gridRef}
                         route={{
                             route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
                             slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
                         }}
                         width={width}
-                        onScroll={handleGridScroll}
                     />
                 )}
             </AutoSizer>

src/renderer/features/artists/components/album-artist-list-header-filters.tsx

@@ -1,12 +1,16 @@
-import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
-import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { IDatasource } from '@ag-grid-community/core';
 import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
+import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiFolder2Line, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+
 import { useListContext } from '../../../context/list-context';
+
+import i18n from '/@/i18n/i18n';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
@@ -28,7 +32,6 @@ import {
     useListStoreByKey,
 } from '/@/renderer/store';
 import { ListDisplayType, TableColumn } from '/@/renderer/types';
-import i18n from '/@/i18n/i18n';
 
 const FILTERS = {
     jellyfin: [
@@ -116,7 +119,7 @@ const FILTERS = {
 };
 
 interface AlbumArtistListHeaderFiltersProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
@@ -128,10 +131,10 @@ export const AlbumArtistListHeaderFilters = ({
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const { pageKey } = useListContext();
-    const { display, table, grid, filter } = useListStoreByKey<AlbumArtistListQuery>({
+    const { display, filter, grid, table } = useListStoreByKey<AlbumArtistListQuery>({
         key: pageKey,
     });
-    const { setFilter, setTable, setTablePagination, setDisplayType, setGrid } =
+    const { setDisplayType, setFilter, setGrid, setTable, setTablePagination } =
         useListStoreActions();
     const cq = useContainerQuery();
 
@@ -376,10 +379,10 @@ export const AlbumArtistListHeaderFilters = ({
                     <DropdownMenu.Dropdown>
                         {FILTERS[server?.type as keyof typeof FILTERS].map((f) => (
                             <DropdownMenu.Item
-                                key={`filter-${f.name}`}
                                 $isActive={f.value === filter.sortBy}
-                                value={f.value}
+                                key={`filter-${f.name}`}
                                 onClick={handleSetSortBy}
+                                value={f.value}
                             >
                                 {f.name}
                             </DropdownMenu.Item>
@@ -388,8 +391,8 @@ export const AlbumArtistListHeaderFilters = ({
                 </DropdownMenu>
                 <Divider orientation="vertical" />
                 <OrderToggleButton
-                    sortOrder={filter.sortOrder}
                     onToggle={handleToggleSortOrder}
+                    sortOrder={filter.sortOrder}
                 />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
@@ -408,10 +411,10 @@ export const AlbumArtistListHeaderFilters = ({
                             <DropdownMenu.Dropdown>
                                 {musicFoldersQuery.data?.items.map((folder) => (
                                     <DropdownMenu.Item
-                                        key={`musicFolder-${folder.id}`}
                                         $isActive={filter.musicFolderId === folder.id}
-                                        value={folder.id}
+                                        key={`musicFolder-${folder.id}`}
                                         onClick={handleSetMusicFolder}
+                                        value={folder.id}
                                     >
                                         {folder.name}
                                     </DropdownMenu.Item>
@@ -423,10 +426,10 @@ export const AlbumArtistListHeaderFilters = ({
                 <Divider orientation="vertical" />
                 <Button
                     compact
+                    onClick={handleRefresh}
                     size="md"
                     tooltip={{ label: t('common.refresh', { postProcess: 'titleCase' }) }}
                     variant="subtle"
-                    onClick={handleRefresh}
                 >
                     <RiRefreshLine size="1.3rem" />
                 </Button>
@@ -473,8 +476,8 @@ export const AlbumArtistListHeaderFilters = ({
                         </DropdownMenu.Label>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.CARD}
-                            value={ListDisplayType.CARD}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.CARD}
                         >
                             {t('table.config.view.card', {
                                 postProcess: 'sentenceCase',
@@ -482,8 +485,8 @@ export const AlbumArtistListHeaderFilters = ({
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.POSTER}
-                            value={ListDisplayType.POSTER}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.POSTER}
                         >
                             {t('table.config.view.poster', {
                                 postProcess: 'sentenceCase',
@@ -491,8 +494,8 @@ export const AlbumArtistListHeaderFilters = ({
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.TABLE}
-                            value={ListDisplayType.TABLE}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.TABLE}
                         >
                             {t('table.config.view.table', {
                                 postProcess: 'sentenceCase',
@@ -563,8 +566,8 @@ export const AlbumArtistListHeaderFilters = ({
                                             defaultValue={table?.columns.map(
                                                 (column) => column.column,
                                             )}
-                                            width={300}
                                             onChange={handleTableColumns}
+                                            width={300}
                                         />
                                         <Group position="apart">
                                             <Text>

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -1,27 +1,30 @@
-import type { ChangeEvent, MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import type { ChangeEvent, MutableRefObject } from 'react';
+
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
+
 import { FilterBar } from '../../shared/components/filter-bar';
+
 import { AlbumArtistListQuery, LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { AlbumArtistListFilter, useCurrentServer } from '/@/renderer/store';
 import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
+import { AlbumArtistListFilter, useCurrentServer } from '/@/renderer/store';
 
 interface AlbumArtistListHeaderProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
 export const AlbumArtistListHeader = ({
-    itemCount,
     gridRef,
+    itemCount,
     tableRef,
 }: AlbumArtistListHeaderProps) => {
     const { t } = useTranslation();
@@ -64,8 +67,8 @@ export const AlbumArtistListHeader = ({
                     <Group>
                         <SearchInput
                             defaultValue={filter.searchTerm}
-                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                             onChange={handleSearch}
+                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                         />
                     </Group>
                 </Flex>

src/renderer/features/artists/components/album-artist-list-table-view.tsx

@@ -1,7 +1,10 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { MutableRefObject } from 'react';
+
 import { useListContext } from '../../../context/list-context';
 import { ARTIST_CONTEXT_MENU_ITEMS } from '../../context-menu/context-menu-items';
+
 import { LibraryItem } from '/@/renderer/api/types';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { VirtualTable } from '/@/renderer/components/virtual-table';

src/renderer/features/artists/components/artist-list-content.tsx

@@ -1,10 +1,13 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { lazy, MutableRefObject, Suspense } from 'react';
+
+import { useListStoreByKey } from '../../../store/list.store';
+
 import { Spinner } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
-import { ListDisplayType } from '/@/renderer/types';
-import { useListStoreByKey } from '../../../store/list.store';
 import { useListContext } from '/@/renderer/context/list-context';
+import { ListDisplayType } from '/@/renderer/types';
 
 const ArtistListGridView = lazy(() =>
     import('/@/renderer/features/artists/components/artist-list-grid-view').then((module) => ({
@@ -19,12 +22,12 @@ const ArtistListTableView = lazy(() =>
 );
 
 interface ArtistListContentProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const ArtistListContent = ({ itemCount, gridRef, tableRef }: ArtistListContentProps) => {
+export const ArtistListContent = ({ gridRef, itemCount, tableRef }: ArtistListContentProps) => {
     const { pageKey } = useListContext();
     const { display } = useListStoreByKey({ key: pageKey });
     const isGrid = display === ListDisplayType.CARD || display === ListDisplayType.POSTER;

src/renderer/features/artists/components/artist-list-grid-view.tsx

@@ -2,8 +2,10 @@ import { QueryKey, useQueryClient } from '@tanstack/react-query';
 import { MutableRefObject, useCallback, useMemo } from 'react';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
+
 import { VirtualGridAutoSizerContainer } from '../../../components/virtual-grid/virtual-grid-wrapper';
 import { useListStoreByKey } from '../../../store/list.store';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
@@ -17,28 +19,28 @@ import { ALBUMARTIST_CARD_ROWS } from '/@/renderer/components';
 import { VirtualInfiniteGrid, VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useListStoreActions } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
-import { useHandleFavorite } from '/@/renderer/features/shared/hooks/use-handle-favorite';
 
 interface ArtistListGridViewProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
 }
 
-export const ArtistListGridView = ({ itemCount, gridRef }: ArtistListGridViewProps) => {
+export const ArtistListGridView = ({ gridRef, itemCount }: ArtistListGridViewProps) => {
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const handlePlayQueueAdd = usePlayQueueAdd();
 
     const { pageKey } = useListContext();
-    const { grid, display, filter } = useListStoreByKey<ArtistListQuery>({ key: pageKey });
+    const { display, filter, grid } = useListStoreByKey<ArtistListQuery>({ key: pageKey });
     const { setGrid } = useListStoreActions();
     const handleFavorite = useHandleFavorite({ gridRef, server });
 
     const fetchInitialData = useCallback(() => {
-        const query: Omit<ArtistListQuery, 'startIndex' | 'limit'> = {
+        const query: Omit<ArtistListQuery, 'limit' | 'startIndex'> = {
             ...filter,
         };
 
@@ -109,6 +111,9 @@ export const ArtistListGridView = ({ itemCount, gridRef }: ArtistListGridViewPro
         const rows: CardRow<AlbumArtist>[] = [ALBUMARTIST_CARD_ROWS.name];
 
         switch (filter.sortBy) {
+            case ArtistListSort.ALBUM_COUNT:
+                rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
+                break;
             case ArtistListSort.DURATION:
                 rows.push(ALBUMARTIST_CARD_ROWS.duration);
                 break;
@@ -116,9 +121,6 @@ export const ArtistListGridView = ({ itemCount, gridRef }: ArtistListGridViewPro
                 break;
             case ArtistListSort.NAME:
                 break;
-            case ArtistListSort.ALBUM_COUNT:
-                rows.push(ALBUMARTIST_CARD_ROWS.albumCount);
-                break;
             case ArtistListSort.PLAY_COUNT:
                 rows.push(ALBUMARTIST_CARD_ROWS.playCount);
                 break;
@@ -129,11 +131,11 @@ export const ArtistListGridView = ({ itemCount, gridRef }: ArtistListGridViewPro
                 break;
             case ArtistListSort.RECENTLY_ADDED:
                 break;
+            case ArtistListSort.RELEASE_DATE:
+                break;
             case ArtistListSort.SONG_COUNT:
                 rows.push(ALBUMARTIST_CARD_ROWS.songCount);
                 break;
-            case ArtistListSort.RELEASE_DATE:
-                break;
         }
 
         return rows;
@@ -144,7 +146,6 @@ export const ArtistListGridView = ({ itemCount, gridRef }: ArtistListGridViewPro
             <AutoSizer>
                 {({ height, width }: Size) => (
                     <VirtualInfiniteGrid
-                        ref={gridRef}
                         cardRows={cardRows}
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
@@ -159,12 +160,13 @@ export const ArtistListGridView = ({ itemCount, gridRef }: ArtistListGridViewPro
                         itemType={LibraryItem.ARTIST}
                         loading={itemCount === undefined || itemCount === null}
                         minimumBatchSize={40}
+                        onScroll={handleGridScroll}
+                        ref={gridRef}
                         route={{
                             route: AppRoute.LIBRARY_ARTISTS_DETAIL,
                             slugs: [{ idProperty: 'id', slugProperty: 'artistId' }],
                         }}
                         width={width}
-                        onScroll={handleGridScroll}
                     />
                 )}
             </AutoSizer>

src/renderer/features/artists/components/artist-list-header-filters.tsx

@@ -1,12 +1,16 @@
-import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
-import { IDatasource } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { IDatasource } from '@ag-grid-community/core';
 import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
 import debounce from 'lodash/debounce';
+import { ChangeEvent, MouseEvent, MutableRefObject, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiFolder2Line, RiMoreFill, RiRefreshLine, RiSettings3Fill } from 'react-icons/ri';
+
 import { useListContext } from '../../../context/list-context';
+
+import i18n from '/@/i18n/i18n';
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
@@ -27,6 +31,7 @@ import {
 } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ALBUMARTIST_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
+import { useRoles } from '/@/renderer/features/artists/queries/roles-query';
 import { OrderToggleButton, useMusicFolders } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import {
@@ -36,8 +41,6 @@ import {
     useListStoreByKey,
 } from '/@/renderer/store';
 import { ListDisplayType, TableColumn } from '/@/renderer/types';
-import i18n from '/@/i18n/i18n';
-import { useRoles } from '/@/renderer/features/artists/queries/roles-query';
 
 const FILTERS = {
     jellyfin: [
@@ -124,7 +127,7 @@ const FILTERS = {
 };
 
 interface ArtistListHeaderFiltersProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
@@ -133,10 +136,10 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const { pageKey } = useListContext();
-    const { display, table, grid, filter } = useListStoreByKey<ArtistListQuery>({
+    const { display, filter, grid, table } = useListStoreByKey<ArtistListQuery>({
         key: pageKey,
     });
-    const { setFilter, setTable, setTablePagination, setDisplayType, setGrid } =
+    const { setDisplayType, setFilter, setGrid, setTable, setTablePagination } =
         useListStoreActions();
     const cq = useContainerQuery();
     const roles = useRoles({
@@ -369,7 +372,7 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
     }, [filter, handleFilterChange, queryClient, server?.id]);
 
     const handleSetRole = useCallback(
-        (e: string | null) => {
+        (e: null | string) => {
             const updatedFilters = setFilter({
                 data: {
                     role: e || '',
@@ -403,10 +406,10 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                     <DropdownMenu.Dropdown>
                         {FILTERS[server?.type as keyof typeof FILTERS].map((f) => (
                             <DropdownMenu.Item
-                                key={`filter-${f.name}`}
                                 $isActive={f.value === filter.sortBy}
-                                value={f.value}
+                                key={`filter-${f.name}`}
                                 onClick={handleSetSortBy}
+                                value={f.value}
                             >
                                 {f.name}
                             </DropdownMenu.Item>
@@ -415,8 +418,8 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                 </DropdownMenu>
                 <Divider orientation="vertical" />
                 <OrderToggleButton
-                    sortOrder={filter.sortOrder}
                     onToggle={handleToggleSortOrder}
+                    sortOrder={filter.sortOrder}
                 />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
@@ -435,10 +438,10 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                             <DropdownMenu.Dropdown>
                                 {musicFoldersQuery.data?.items.map((folder) => (
                                     <DropdownMenu.Item
-                                        key={`musicFolder-${folder.id}`}
                                         $isActive={filter.musicFolderId === folder.id}
-                                        value={folder.id}
+                                        key={`musicFolder-${folder.id}`}
                                         onClick={handleSetMusicFolder}
+                                        value={folder.id}
                                     >
                                         {folder.name}
                                     </DropdownMenu.Item>
@@ -452,18 +455,18 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                         <Divider orientation="vertical" />
                         <Select
                             data={roles.data}
-                            value={filter.role}
                             onChange={handleSetRole}
+                            value={filter.role}
                         />
                     </>
                 )}
                 <Divider orientation="vertical" />
                 <Button
                     compact
+                    onClick={handleRefresh}
                     size="md"
                     tooltip={{ label: t('common.refresh', { postProcess: 'titleCase' }) }}
                     variant="subtle"
-                    onClick={handleRefresh}
                 >
                     <RiRefreshLine size="1.3rem" />
                 </Button>
@@ -510,8 +513,8 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                         </DropdownMenu.Label>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.CARD}
-                            value={ListDisplayType.CARD}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.CARD}
                         >
                             {t('table.config.view.card', {
                                 postProcess: 'sentenceCase',
@@ -519,8 +522,8 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.POSTER}
-                            value={ListDisplayType.POSTER}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.POSTER}
                         >
                             {t('table.config.view.poster', {
                                 postProcess: 'sentenceCase',
@@ -528,8 +531,8 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.TABLE}
-                            value={ListDisplayType.TABLE}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.TABLE}
                         >
                             {t('table.config.view.table', {
                                 postProcess: 'sentenceCase',
@@ -593,8 +596,8 @@ export const ArtistListHeaderFilters = ({ gridRef, tableRef }: ArtistListHeaderF
                                             defaultValue={table?.columns.map(
                                                 (column) => column.column,
                                             )}
-                                            width={300}
                                             onChange={handleTableColumns}
+                                            width={300}
                                         />
                                         <Group position="apart">
                                             <Text>

src/renderer/features/artists/components/artist-list-header.tsx

@@ -1,25 +1,28 @@
-import type { ChangeEvent, MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import type { ChangeEvent, MutableRefObject } from 'react';
+
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useTranslation } from 'react-i18next';
+
 import { FilterBar } from '../../shared/components/filter-bar';
+
 import { ArtistListQuery, LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
+import { ArtistListHeaderFilters } from '/@/renderer/features/artists/components/artist-list-header-filters';
 import { LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { ArtistListFilter, useCurrentServer } from '/@/renderer/store';
 import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
-import { ArtistListHeaderFilters } from '/@/renderer/features/artists/components/artist-list-header-filters';
+import { ArtistListFilter, useCurrentServer } from '/@/renderer/store';
 
 interface ArtistListHeaderProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const ArtistListHeader = ({ itemCount, gridRef, tableRef }: ArtistListHeaderProps) => {
+export const ArtistListHeader = ({ gridRef, itemCount, tableRef }: ArtistListHeaderProps) => {
     const { t } = useTranslation();
     const server = useCurrentServer();
     const cq = useContainerQuery();
@@ -60,8 +63,8 @@ export const ArtistListHeader = ({ itemCount, gridRef, tableRef }: ArtistListHea
                     <Group>
                         <SearchInput
                             defaultValue={filter.searchTerm}
-                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                             onChange={handleSearch}
+                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                         />
                     </Group>
                 </Flex>

src/renderer/features/artists/components/artist-list-table-view.tsx

@@ -1,7 +1,10 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { MutableRefObject } from 'react';
+
 import { useListContext } from '../../../context/list-context';
 import { ARTIST_CONTEXT_MENU_ITEMS } from '../../context-menu/context-menu-items';
+
 import { LibraryItem } from '/@/renderer/api/types';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { VirtualTable } from '/@/renderer/components/virtual-table';

src/renderer/features/artists/queries/album-artist-detail-query.ts

@@ -1,10 +1,13 @@
-import { useQuery } from '@tanstack/react-query';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import type { AlbumArtistDetailQuery } from '/@/renderer/api/types';
-import { getServerById } from '/@/renderer/store';
-import { api } from '/@/renderer/api';
+
+import { useQuery } from '@tanstack/react-query';
+
 import { QueryHookArgs } from '../../../lib/react-query';
 
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { getServerById } from '/@/renderer/store';
+
 export const useAlbumArtistDetail = (args: QueryHookArgs<AlbumArtistDetailQuery>) => {
     const { options, query, serverId } = args || {};
     const server = getServerById(serverId);

src/renderer/features/artists/queries/album-artist-list-count-query.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumArtistListQuery } from '/@/renderer/api/types';

src/renderer/features/artists/queries/album-artist-list-query.ts

@@ -1,10 +1,13 @@
-import { useQuery } from '@tanstack/react-query';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import type { AlbumArtistListQuery } from '/@/renderer/api/types';
-import { getServerById } from '/@/renderer/store';
-import { api } from '/@/renderer/api';
+
+import { useQuery } from '@tanstack/react-query';
+
 import { QueryHookArgs } from '../../../lib/react-query';
 
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { getServerById } from '/@/renderer/store';
+
 export const useAlbumArtistList = (args: QueryHookArgs<AlbumArtistListQuery>) => {
     const { options, query, serverId } = args || {};
     const server = getServerById(serverId);

src/renderer/features/artists/queries/artist-info-query.ts

@@ -1,10 +1,13 @@
-import { useQuery } from '@tanstack/react-query';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import type { AlbumArtistDetailQuery } from '/@/renderer/api/types';
-import { getServerById } from '/@/renderer/store';
-import { api } from '/@/renderer/api';
+
+import { useQuery } from '@tanstack/react-query';
+
 import { QueryHookArgs } from '../../../lib/react-query';
 
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { getServerById } from '/@/renderer/store';
+
 export const useAlbumArtistInfo = (args: QueryHookArgs<AlbumArtistDetailQuery>) => {
     const { options, query, serverId } = args || {};
     const server = getServerById(serverId);

src/renderer/features/artists/queries/artist-list-count-query.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { ArtistListQuery } from '/@/renderer/api/types';

src/renderer/features/artists/queries/roles-query.ts

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';

src/renderer/features/artists/queries/top-songs-list-query.ts

@@ -1,9 +1,11 @@
-import { useQuery } from '@tanstack/react-query';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import type { TopSongListQuery } from '/@/renderer/api/types';
 import type { QueryHookArgs } from '/@/renderer/lib/react-query';
-import { getServerById } from '/@/renderer/store';
+
+import { useQuery } from '@tanstack/react-query';
+
 import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { getServerById } from '/@/renderer/store';
 
 export const useTopSongsList = (args: QueryHookArgs<TopSongListQuery>) => {
     const { options, query, serverId } = args || {};

src/renderer/features/artists/routes/album-artist-detail-route.tsx

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
 import { useParams } from 'react-router';
+
 import { LibraryItem } from '/@/renderer/api/types';
 import { NativeScrollArea, Spinner } from '/@/renderer/components';
 import { AlbumArtistDetailContent } from '/@/renderer/features/artists/components/album-artist-detail-content';
@@ -52,7 +53,6 @@ const AlbumArtistDetailRoute = () => {
     return (
         <AnimatedPage key={`album-artist-detail-${routeId}`}>
             <NativeScrollArea
-                ref={scrollAreaRef}
                 pageHeaderProps={{
                     backgroundColor: background,
                     children: (
@@ -66,10 +66,11 @@ const AlbumArtistDetailRoute = () => {
                     offset: 200,
                     target: headerRef,
                 }}
+                ref={scrollAreaRef}
             >
                 <AlbumArtistDetailHeader
-                    ref={headerRef}
                     background={background}
+                    ref={headerRef}
                 />
                 <AlbumArtistDetailContent background={background} />
             </NativeScrollArea>

src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx

@@ -1,14 +1,17 @@
-import { useMemo, useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { useMemo, useRef } from 'react';
 import { useParams } from 'react-router';
+
+import { LibraryItem } from '../../../api/types';
+import { useCurrentServer } from '../../../store/auth.store';
+
+import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumArtistDetailTopSongsListContent } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-content';
 import { AlbumArtistDetailTopSongsListHeader } from '/@/renderer/features/artists/components/album-artist-detail-top-songs-list-header';
 import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
 import { useTopSongsList } from '/@/renderer/features/artists/queries/top-songs-list-query';
 import { AnimatedPage } from '/@/renderer/features/shared';
-import { LibraryItem } from '../../../api/types';
-import { useCurrentServer } from '../../../store/auth.store';
-import { ListContext } from '/@/renderer/context/list-context';
 
 const AlbumArtistDetailTopSongsListRoute = () => {
     const tableRef = useRef<AgGridReactType | null>(null);

src/renderer/features/artists/routes/album-artist-list-route.tsx

@@ -1,17 +1,20 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { useMemo, useRef } from 'react';
+
 import { useCurrentServer } from '../../../store/auth.store';
 import { useListFilterByKey } from '../../../store/list.store';
+
 import { AlbumArtistListQuery, LibraryItem } from '/@/renderer/api/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumArtistListContent } from '/@/renderer/features/artists/components/album-artist-list-content';
 import { AlbumArtistListHeader } from '/@/renderer/features/artists/components/album-artist-list-header';
-import { AnimatedPage } from '/@/renderer/features/shared';
 import { useAlbumArtistListCount } from '/@/renderer/features/artists/queries/album-artist-list-count-query';
+import { AnimatedPage } from '/@/renderer/features/shared';
 
 const AlbumArtistListRoute = () => {
-    const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
+    const gridRef = useRef<null | VirtualInfiniteGridRef>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const pageKey = LibraryItem.ALBUM_ARTIST;
     const server = useCurrentServer();

src/renderer/features/artists/routes/artist-list-route.tsx

@@ -1,17 +1,20 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { useMemo, useRef } from 'react';
+
 import { useCurrentServer } from '../../../store/auth.store';
 import { useListFilterByKey } from '../../../store/list.store';
+
 import { ArtistListQuery, LibraryItem } from '/@/renderer/api/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ListContext } from '/@/renderer/context/list-context';
-import { AnimatedPage } from '/@/renderer/features/shared';
-import { useArtistListCount } from '/@/renderer/features/artists/queries/artist-list-count-query';
-import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header';
 import { ArtistListContent } from '/@/renderer/features/artists/components/artist-list-content';
+import { ArtistListHeader } from '/@/renderer/features/artists/components/artist-list-header';
+import { useArtistListCount } from '/@/renderer/features/artists/queries/artist-list-count-query';
+import { AnimatedPage } from '/@/renderer/features/shared';
 
 const ArtistListRoute = () => {
-    const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
+    const gridRef = useRef<null | VirtualInfiniteGridRef>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const pageKey = LibraryItem.ARTIST;
     const server = useCurrentServer();

src/renderer/features/context-menu/context-menu-provider.tsx

@@ -1,4 +1,3 @@
-import { createContext, Fragment, ReactNode, useState, useMemo, useCallback } from 'react';
 import { RowNode } from '@ag-grid-community/core';
 import { Divider, Group, Portal, Stack } from '@mantine/core';
 import {
@@ -11,8 +10,7 @@ import {
 import { closeAllModals, openContextModal, openModal } from '@mantine/modals';
 import { AnimatePresence } from 'framer-motion';
 import isElectron from 'is-electron';
-import { ServerFeature } from '/@/renderer/api/features-types';
-import { hasFeature } from '/@/renderer/api/utils';
+import { createContext, Fragment, ReactNode, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
     RiAddBoxFill,
@@ -21,20 +19,25 @@ import {
     RiArrowGoForwardLine,
     RiArrowRightSFill,
     RiArrowUpLine,
+    RiCloseCircleLine,
     RiDeleteBinFill,
     RiDislikeFill,
+    RiDownload2Line,
     RiHeartFill,
+    RiInformationFill,
     RiPlayFill,
     RiPlayListAddFill,
-    RiStarFill,
-    RiCloseCircleLine,
-    RiShareForwardFill,
-    RiInformationFill,
     RiRadio2Fill,
-    RiDownload2Line,
+    RiShareForwardFill,
     RiShuffleFill,
+    RiStarFill,
 } from 'react-icons/ri';
-import { AnyLibraryItems, LibraryItem, ServerType, AnyLibraryItem } from '/@/renderer/api/types';
+
+import { api } from '/@/renderer/api';
+import { controller } from '/@/renderer/api/controller';
+import { ServerFeature } from '/@/renderer/api/features-types';
+import { AnyLibraryItem, AnyLibraryItems, LibraryItem, ServerType } from '/@/renderer/api/types';
+import { hasFeature } from '/@/renderer/api/utils';
 import {
     ConfirmModal,
     ContextMenu,
@@ -49,7 +52,9 @@ import {
     OpenContextMenuProps,
     useContextMenuEvents,
 } from '/@/renderer/features/context-menu/events';
+import { ItemDetailsModal } from '/@/renderer/features/item-details/components/item-details-modal';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { updateSong } from '/@/renderer/features/player/update-remote-song';
 import { useDeletePlaylist } from '/@/renderer/features/playlists';
 import { useRemoveFromPlaylist } from '/@/renderer/features/playlists/mutations/remove-from-playlist-mutation';
 import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
@@ -63,10 +68,6 @@ import {
 } from '/@/renderer/store';
 import { usePlaybackType } from '/@/renderer/store/settings.store';
 import { Play, PlaybackType } from '/@/renderer/types';
-import { ItemDetailsModal } from '/@/renderer/features/item-details/components/item-details-modal';
-import { updateSong } from '/@/renderer/features/player/update-remote-song';
-import { controller } from '/@/renderer/api/controller';
-import { api } from '/@/renderer/api';
 import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 
 type ContextMenuContextProps = {
@@ -78,7 +79,7 @@ type ContextMenuItem = {
     children?: ContextMenuItem[];
     disabled?: boolean;
     id: string;
-    label: string | ReactNode;
+    label: ReactNode | string;
     leftIcon?: ReactNode;
     onClick?: (...args: any) => any;
     rightIcon?: ReactNode;
@@ -95,7 +96,11 @@ const JELLYFIN_IGNORED_MENU_ITEMS: ContextMenuItemType[] = ['setRating', 'shareI
 // const NAVIDROME_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
 // const SUBSONIC_IGNORED_MENU_ITEMS: ContextMenuItemType[] = [];
 
-const utils = isElectron() ? window.electron.utils : null;
+const utils = isElectron() ? window.api.utils : null;
+
+export interface ContextMenuProviderProps {
+    children: ReactNode;
+}
 
 function RatingIcon({ rating }: { rating: number }) {
     return (
@@ -109,10 +114,6 @@ function RatingIcon({ rating }: { rating: number }) {
     );
 }
 
-export interface ContextMenuProviderProps {
-    children: ReactNode;
-}
-
 export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     const disabledItems = useSettingsStore((state) => state.general.disabledContextMenu);
     const { t } = useTranslation();
@@ -139,15 +140,15 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     const openContextMenu = useCallback(
         (args: OpenContextMenuProps) => {
             const {
+                context,
+                data,
+                dataNodes,
+                menuItems,
+                resetGridCache,
+                tableApi,
+                type,
                 xPos,
                 yPos,
-                menuItems,
-                data,
-                type,
-                tableApi,
-                dataNodes,
-                context,
-                resetGridCache,
             } = args;
 
             const serverType = data[0]?.serverType || useAuthStore.getState().currentServer?.type;
@@ -213,13 +214,13 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                         playType,
                     });
                     break;
-                case LibraryItem.ARTIST:
+                case LibraryItem.ALBUM_ARTIST:
                     handlePlayQueueAdd?.({
                         byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type },
                         playType,
                     });
                     break;
-                case LibraryItem.ALBUM_ARTIST:
+                case LibraryItem.ARTIST:
                     handlePlayQueueAdd?.({
                         byItemType: { id: ctx.data.map((item) => item.id), type: ctx.type },
                         playType,
@@ -231,9 +232,6 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                         playType,
                     });
                     break;
-                case LibraryItem.SONG:
-                    handlePlayQueueAdd?.({ byData: ctx.data, playType });
-                    break;
                 case LibraryItem.PLAYLIST:
                     for (const item of ctx.data) {
                         handlePlayQueueAdd?.({
@@ -242,6 +240,9 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                         });
                     }
 
+                    break;
+                case LibraryItem.SONG:
+                    handlePlayQueueAdd?.({ byData: ctx.data, playType });
                     break;
             }
         },
@@ -510,8 +511,8 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         let songId: string[] | undefined;
 
         switch (serverType) {
-            case ServerType.NAVIDROME:
             case ServerType.JELLYFIN:
+            case ServerType.NAVIDROME:
                 songId = ctx.dataNodes?.map((node) => node.data.playlistItemId);
                 break;
             case ServerType.SUBSONIC:
@@ -622,7 +623,7 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
     );
 
     const playbackType = usePlaybackType();
-    const { moveToNextOfQueue, moveToBottomOfQueue, moveToTopOfQueue, removeFromQueue } =
+    const { moveToBottomOfQueue, moveToNextOfQueue, moveToTopOfQueue, removeFromQueue } =
         useQueueControls();
 
     const handleMoveToNext = useCallback(() => {
@@ -935,15 +936,15 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                 <AnimatePresence>
                     {opened && (
                         <ContextMenu
-                            ref={mergedRef}
                             minWidth={125}
+                            ref={mergedRef}
                             xPos={ctx.xPos}
                             yPos={ctx.yPos}
                         >
                             <Stack spacing={0}>
                                 <Stack
-                                    spacing={0}
                                     onClick={closeContextMenu}
+                                    spacing={0}
                                 >
                                     {ctx.menuItems?.map((item) => {
                                         return (
@@ -960,14 +961,14 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                                                                         contextMenuItems[item.id]
                                                                             .leftIcon
                                                                     }
-                                                                    rightIcon={
-                                                                        contextMenuItems[item.id]
-                                                                            .rightIcon
-                                                                    }
                                                                     onClick={
                                                                         contextMenuItems[item.id]
                                                                             .onClick
                                                                     }
+                                                                    rightIcon={
+                                                                        contextMenuItems[item.id]
+                                                                            .rightIcon
+                                                                    }
                                                                 >
                                                                     {
                                                                         contextMenuItems[item.id]
@@ -985,10 +986,10 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                                                                             leftIcon={
                                                                                 child.leftIcon
                                                                             }
+                                                                            onClick={child.onClick}
                                                                             rightIcon={
                                                                                 child.rightIcon
                                                                             }
-                                                                            onClick={child.onClick}
                                                                         >
                                                                             {child.label}
                                                                         </ContextMenuButton>
@@ -1001,12 +1002,12 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
                                                             leftIcon={
                                                                 contextMenuItems[item.id].leftIcon
                                                             }
-                                                            rightIcon={
-                                                                contextMenuItems[item.id].rightIcon
-                                                            }
                                                             onClick={
                                                                 contextMenuItems[item.id].onClick
                                                             }
+                                                            rightIcon={
+                                                                contextMenuItems[item.id].rightIcon
+                                                            }
                                                         >
                                                             {contextMenuItems[item.id].label}
                                                         </ContextMenuButton>
@@ -1014,8 +1015,8 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
 
                                                     {item.divider && (
                                                         <Divider
-                                                            key={`context-menu-divider-${item.id}`}
                                                             color="rgb(62, 62, 62)"
+                                                            key={`context-menu-divider-${item.id}`}
                                                             size="sm"
                                                         />
                                                     )}

src/renderer/features/context-menu/events.ts

@@ -1,7 +1,35 @@
 import { GridOptions, RowNode } from '@ag-grid-community/core';
 import { createUseExternalEvents } from '@mantine/utils';
+
 import { LibraryItem } from '/@/renderer/api/types';
 
+export type ContextMenuEvents = {
+    closeContextMenu: () => void;
+    openContextMenu: (args: OpenContextMenuProps) => void;
+};
+
+export type ContextMenuItemType =
+    | 'addToFavorites'
+    | 'addToPlaylist'
+    | 'createPlaylist'
+    | 'deletePlaylist'
+    | 'deselectAll'
+    | 'download'
+    | 'moveToBottomOfQueue'
+    | 'moveToNextOfQueue'
+    | 'moveToTopOfQueue'
+    | 'play'
+    | 'playLast'
+    | 'playNext'
+    | 'playShuffled'
+    | 'playSimilarSongs'
+    | 'removeFromFavorites'
+    | 'removeFromPlaylist'
+    | 'removeFromQueue'
+    | 'setRating'
+    | 'shareItem'
+    | 'showDetails';
+
 export type OpenContextMenuProps = {
     context?: any;
     data: any[];
@@ -14,33 +42,6 @@ export type OpenContextMenuProps = {
     yPos: number;
 };
 
-export type ContextMenuEvents = {
-    closeContextMenu: () => void;
-    openContextMenu: (args: OpenContextMenuProps) => void;
-};
-
-export type ContextMenuItemType =
-    | 'play'
-    | 'playLast'
-    | 'playNext'
-    | 'playShuffled'
-    | 'addToPlaylist'
-    | 'removeFromPlaylist'
-    | 'addToFavorites'
-    | 'removeFromFavorites'
-    | 'setRating'
-    | 'shareItem'
-    | 'deletePlaylist'
-    | 'createPlaylist'
-    | 'moveToNextOfQueue'
-    | 'moveToBottomOfQueue'
-    | 'moveToTopOfQueue'
-    | 'removeFromQueue'
-    | 'deselectAll'
-    | 'showDetails'
-    | 'playSimilarSongs'
-    | 'download';
-
 export const CONFIGURABLE_CONTEXT_MENU_ITEMS: ContextMenuItemType[] = [
     'moveToBottomOfQueue',
     'moveToTopOfQueue',

src/renderer/features/context-menu/hooks/use-handle-context-menu.ts

@@ -1,5 +1,6 @@
 import { CellContextMenuEvent, GridApi } from '@ag-grid-community/core';
 import sortBy from 'lodash/sortBy';
+
 import { Album, AlbumArtist, Artist, LibraryItem, QueueSong, Song } from '/@/renderer/api/types';
 import { openContextMenu, SetContextMenuItems } from '/@/renderer/features/context-menu/events';
 
@@ -64,7 +65,7 @@ export const useHandleGeneralContextMenu = (
 ) => {
     const handleContextMenu = (
         e: any,
-        data: Song[] | QueueSong[] | AlbumArtist[] | Artist[] | Album[],
+        data: Album[] | AlbumArtist[] | Artist[] | QueueSong[] | Song[],
     ) => {
         if (!e) return;
         const clickEvent = e as MouseEvent;
@@ -92,7 +93,7 @@ export const useHandleGridContextMenu = (
 ) => {
     const handleContextMenu = (
         e: any,
-        data: Song[] | QueueSong[] | AlbumArtist[] | Artist[] | Album[],
+        data: Album[] | AlbumArtist[] | Artist[] | QueueSong[] | Song[],
     ) => {
         if (!e) return;
         const clickEvent = e as MouseEvent;

src/renderer/features/context-menu/index.tsx

@@ -1,3 +1,3 @@
-export * from './events';
 export * from './context-menu-provider';
+export * from './events';
 export * from './hooks/use-handle-context-menu';

src/renderer/features/discord-rpc/use-discord-rpc.ts

@@ -1,6 +1,9 @@
-/* eslint-disable consistent-return */
+import { SetActivity } from '@xhayper/discord-rpc';
 import isElectron from 'is-electron';
 import { useCallback, useEffect, useRef } from 'react';
+
+import { controller } from '/@/renderer/api/controller';
+import { ServerType } from '/@/renderer/api/types';
 import {
     getServerById,
     useCurrentSong,
@@ -9,12 +12,9 @@ import {
     useGeneralSettings,
     usePlayerStore,
 } from '/@/renderer/store';
-import { SetActivity } from '@xhayper/discord-rpc';
 import { PlayerStatus } from '/@/renderer/types';
-import { ServerType } from '/@/renderer/api/types';
-import { controller } from '/@/renderer/api/controller';
 
-const discordRpc = isElectron() ? window.electron.discordRpc : null;
+const discordRpc = isElectron() ? window.api.discordRpc : null;
 
 export const useDiscordRpc = () => {
     const intervalRef = useRef(0);

src/renderer/features/genres/components/genre-list-content.tsx

@@ -1,5 +1,7 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { lazy, MutableRefObject, Suspense } from 'react';
+
 import { Spinner } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
@@ -19,12 +21,12 @@ const GenreListTableView = lazy(() =>
 );
 
 interface AlbumListContentProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const GenreListContent = ({ itemCount, gridRef, tableRef }: AlbumListContentProps) => {
+export const GenreListContent = ({ gridRef, itemCount, tableRef }: AlbumListContentProps) => {
     const { pageKey } = useListContext();
     const { display } = useListStoreByKey({ key: pageKey });
 

src/renderer/features/genres/components/genre-list-grid-view.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import AutoSizer, { Size } from 'react-virtualized-auto-sizer';
 import { ListOnScrollProps } from 'react-window';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { Album, GenreListQuery, GenreListResponse, LibraryItem } from '/@/renderer/api/types';
@@ -13,16 +14,16 @@ import {
 } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 import { useCurrentServer, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
 import { CardRow, ListDisplayType } from '/@/renderer/types';
-import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 
 export const GenreListGridView = ({ gridRef, itemCount }: any) => {
     const queryClient = useQueryClient();
     const server = useCurrentServer();
     const handlePlayQueueAdd = usePlayQueueAdd();
-    const { pageKey, id } = useListContext();
-    const { grid, display, filter } = useListStoreByKey<GenreListQuery>({ key: pageKey });
+    const { id, pageKey } = useListContext();
+    const { display, filter, grid } = useListStoreByKey<GenreListQuery>({ key: pageKey });
     const { setGrid } = useListStoreActions();
     const genrePath = useGenreRoute();
 
@@ -53,7 +54,7 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
     );
 
     const fetchInitialData = useCallback(() => {
-        const query: Omit<GenreListQuery, 'startIndex' | 'limit'> = {
+        const query: Omit<GenreListQuery, 'limit' | 'startIndex'> = {
             ...filter,
         };
 
@@ -122,8 +123,6 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
             <AutoSizer>
                 {({ height, width }: Size) => (
                     <VirtualInfiniteGrid
-                        key={`album-list-${server?.id}-${display}`}
-                        ref={gridRef}
                         cardRows={cardRows}
                         display={display || ListDisplayType.CARD}
                         fetchFn={fetch}
@@ -135,14 +134,16 @@ export const GenreListGridView = ({ gridRef, itemCount }: any) => {
                         itemGap={grid?.itemGap ?? 10}
                         itemSize={grid?.itemSize || 200}
                         itemType={LibraryItem.GENRE}
+                        key={`album-list-${server?.id}-${display}`}
                         loading={itemCount === undefined || itemCount === null}
                         minimumBatchSize={40}
+                        onScroll={handleGridScroll}
+                        ref={gridRef}
                         route={{
                             route: genrePath,
                             slugs: [{ idProperty: 'id', slugProperty: 'genreId' }],
                         }}
                         width={width}
-                        onScroll={handleGridScroll}
                     />
                 )}
             </AutoSizer>

src/renderer/features/genres/components/genre-list-header-filters.tsx

@@ -1,7 +1,8 @@
-import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Divider, Flex, Group, Stack } from '@mantine/core';
 import { useQueryClient } from '@tanstack/react-query';
+import { ChangeEvent, MouseEvent, MutableRefObject, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
     RiAlbumLine,
@@ -11,6 +12,8 @@ import {
     RiRefreshLine,
     RiSettings3Fill,
 } from 'react-icons/ri';
+
+import i18n from '/@/i18n/i18n';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
     GenreListQuery,
@@ -36,7 +39,6 @@ import {
     useSettingsStoreActions,
 } from '/@/renderer/store';
 import { ListDisplayType, TableColumn } from '/@/renderer/types';
-import i18n from '/@/i18n/i18n';
 
 const FILTERS = {
     jellyfin: [
@@ -63,7 +65,7 @@ const FILTERS = {
 };
 
 interface GenreListHeaderFiltersProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount: number | undefined;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
@@ -75,15 +77,15 @@ export const GenreListHeaderFilters = ({
 }: GenreListHeaderFiltersProps) => {
     const { t } = useTranslation();
     const queryClient = useQueryClient();
-    const { pageKey, customFilters } = useListContext();
+    const { customFilters, pageKey } = useListContext();
     const server = useCurrentServer();
-    const { setFilter, setTable, setGrid, setDisplayType } = useListStoreActions();
-    const { display, filter, table, grid } = useListStoreByKey<GenreListQuery>({ key: pageKey });
+    const { setDisplayType, setFilter, setGrid, setTable } = useListStoreActions();
+    const { display, filter, grid, table } = useListStoreByKey<GenreListQuery>({ key: pageKey });
     const cq = useContainerQuery();
     const { genreTarget } = useGeneralSettings();
     const { setGenreBehavior } = useSettingsStoreActions();
 
-    const { handleRefreshTable, handleRefreshGrid } = useListFilterRefresh({
+    const { handleRefreshGrid, handleRefreshTable } = useListFilterRefresh({
         itemCount,
         itemType: LibraryItem.GENRE,
         server,
@@ -265,10 +267,10 @@ export const GenreListHeaderFilters = ({
                     <DropdownMenu.Dropdown>
                         {FILTERS[server?.type as keyof typeof FILTERS].map((f) => (
                             <DropdownMenu.Item
-                                key={`filter-${f.name}`}
                                 $isActive={f.value === filter.sortBy}
-                                value={f.value}
+                                key={`filter-${f.name}`}
                                 onClick={handleSetSortBy}
+                                value={f.value}
                             >
                                 {f.name}
                             </DropdownMenu.Item>
@@ -277,8 +279,8 @@ export const GenreListHeaderFilters = ({
                 </DropdownMenu>
                 <Divider orientation="vertical" />
                 <OrderToggleButton
-                    sortOrder={filter.sortOrder}
                     onToggle={handleToggleSortOrder}
+                    sortOrder={filter.sortOrder}
                 />
                 {server?.type === ServerType.JELLYFIN && (
                     <>
@@ -304,10 +306,10 @@ export const GenreListHeaderFilters = ({
                             <DropdownMenu.Dropdown>
                                 {musicFoldersQuery.data?.items.map((folder) => (
                                     <DropdownMenu.Item
-                                        key={`musicFolder-${folder.id}`}
                                         $isActive={filter.musicFolderId === folder.id}
-                                        value={folder.id}
+                                        key={`musicFolder-${folder.id}`}
                                         onClick={handleSetMusicFolder}
+                                        value={folder.id}
                                     >
                                         {folder.name}
                                     </DropdownMenu.Item>
@@ -319,10 +321,10 @@ export const GenreListHeaderFilters = ({
                 <Divider orientation="vertical" />
                 <Button
                     compact
+                    onClick={handleRefresh}
                     size="md"
                     tooltip={{ label: t('common.refresh', { postProcess: 'titleCase' }) }}
                     variant="subtle"
-                    onClick={handleRefresh}
                 >
                     <RiRefreshLine size="1.3rem" />
                 </Button>
@@ -348,6 +350,7 @@ export const GenreListHeaderFilters = ({
                     <Divider orientation="vertical" />
                     <Button
                         compact
+                        onClick={handleGenreToggle}
                         size="md"
                         tooltip={{
                             label: t(
@@ -358,7 +361,6 @@ export const GenreListHeaderFilters = ({
                             ),
                         }}
                         variant="subtle"
-                        onClick={handleGenreToggle}
                     >
                         {genreTarget === GenreTarget.ALBUM ? <RiAlbumLine /> : <RiMusic2Line />}
                     </Button>
@@ -390,22 +392,22 @@ export const GenreListHeaderFilters = ({
                         </DropdownMenu.Label>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.CARD}
-                            value={ListDisplayType.CARD}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.CARD}
                         >
                             {t('table.config.view.card', { postProcess: 'titleCase' })}
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.POSTER}
-                            value={ListDisplayType.POSTER}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.POSTER}
                         >
                             {t('table.config.view.poster', { postProcess: 'titleCase' })}
                         </DropdownMenu.Item>
                         <DropdownMenu.Item
                             $isActive={display === ListDisplayType.TABLE}
-                            value={ListDisplayType.TABLE}
                             onClick={handleSetViewType}
+                            value={ListDisplayType.TABLE}
                         >
                             {t('table.config.view.table', { postProcess: 'titleCase' })}
                         </DropdownMenu.Item>
@@ -458,8 +460,8 @@ export const GenreListHeaderFilters = ({
                                             defaultValue={table?.columns.map(
                                                 (column) => column.column,
                                             )}
-                                            width={300}
                                             onChange={handleTableColumns}
+                                            width={300}
                                         />
                                         <Group position="apart">
                                             <Text>

src/renderer/features/genres/components/genre-list-header.tsx

@@ -1,24 +1,26 @@
-import { ChangeEvent, MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Flex, Group, Stack } from '@mantine/core';
 import debounce from 'lodash/debounce';
+import { ChangeEvent, MutableRefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+
 import { GenreListQuery, LibraryItem } from '/@/renderer/api/types';
 import { PageHeader, SearchInput } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { GenreListHeaderFilters } from '/@/renderer/features/genres/components/genre-list-header-filters';
 import { FilterBar, LibraryHeaderBar } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
-import { GenreListFilter, useCurrentServer } from '/@/renderer/store';
-import { useTranslation } from 'react-i18next';
 import { useDisplayRefresh } from '/@/renderer/hooks/use-display-refresh';
+import { GenreListFilter, useCurrentServer } from '/@/renderer/store';
 
 interface GenreListHeaderProps {
-    gridRef: MutableRefObject<VirtualInfiniteGridRef | null>;
+    gridRef: MutableRefObject<null | VirtualInfiniteGridRef>;
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const GenreListHeader = ({ itemCount, gridRef, tableRef }: GenreListHeaderProps) => {
+export const GenreListHeader = ({ gridRef, itemCount, tableRef }: GenreListHeaderProps) => {
     const { t } = useTranslation();
     const cq = useContainerQuery();
     const server = useCurrentServer();
@@ -57,8 +59,8 @@ export const GenreListHeader = ({ itemCount, gridRef, tableRef }: GenreListHeade
                     <Group>
                         <SearchInput
                             defaultValue={filter.searchTerm}
-                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                             onChange={handleSearch}
+                            openedWidth={cq.isMd ? 250 : cq.isSm ? 200 : 150}
                         />
                     </Group>
                 </Flex>

src/renderer/features/genres/components/genre-list-table-view.tsx

@@ -1,24 +1,26 @@
-import { LibraryItem } from '/@/renderer/api/types';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { RowDoubleClickedEvent } from '@ag-grid-community/core';
+import { MutableRefObject, useCallback } from 'react';
+import { generatePath, useNavigate } from 'react-router';
+
+import { LibraryItem } from '/@/renderer/api/types';
 import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
 import { VirtualTable } from '/@/renderer/components/virtual-table';
 import { useVirtualTable } from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
 import { useListContext } from '/@/renderer/context/list-context';
 import { GENRE_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { useCurrentServer } from '/@/renderer/store';
-import { MutableRefObject, useCallback } from 'react';
-import { RowDoubleClickedEvent } from '@ag-grid-community/core';
-import { generatePath, useNavigate } from 'react-router';
 import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
+import { useCurrentServer } from '/@/renderer/store';
 
 interface GenreListTableViewProps {
     itemCount?: number;
     tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
-export const GenreListTableView = ({ tableRef, itemCount }: GenreListTableViewProps) => {
+export const GenreListTableView = ({ itemCount, tableRef }: GenreListTableViewProps) => {
     const server = useCurrentServer();
-    const { pageKey, customFilters } = useListContext();
+    const { customFilters, pageKey } = useListContext();
     const navigate = useNavigate();
     const genrePath = useGenreRoute();
 

src/renderer/features/genres/queries/genre-list-query.ts

@@ -1,8 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
-import { api } from '/@/renderer/api';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import type { GenreListQuery } from '/@/renderer/api/types';
 import type { QueryHookArgs } from '/@/renderer/lib/react-query';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
 import { getServerById } from '/@/renderer/store';
 
 export const useGenreList = (args: QueryHookArgs<GenreListQuery>) => {

src/renderer/features/genres/routes/genre-list-route.tsx

@@ -1,5 +1,10 @@
-import { useMemo, useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { useMemo, useRef } from 'react';
+
+import { useListStoreByKey } from '../../../store/list.store';
+
+import { GenreListQuery } from '/@/renderer/api/types';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ListContext } from '/@/renderer/context/list-context';
 import { GenreListContent } from '/@/renderer/features/genres/components/genre-list-content';
@@ -7,11 +12,9 @@ import { GenreListHeader } from '/@/renderer/features/genres/components/genre-li
 import { useGenreList } from '/@/renderer/features/genres/queries/genre-list-query';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { useCurrentServer } from '/@/renderer/store';
-import { useListStoreByKey } from '../../../store/list.store';
-import { GenreListQuery } from '/@/renderer/api/types';
 
 const GenreListRoute = () => {
-    const gridRef = useRef<VirtualInfiniteGridRef | null>(null);
+    const gridRef = useRef<null | VirtualInfiniteGridRef>(null);
     const tableRef = useRef<AgGridReactType | null>(null);
     const server = useCurrentServer();
     const pageKey = 'genre';

src/renderer/features/home/queries/recently-played-query.ts

@@ -1,9 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
+
 import { api } from '/@/renderer/api';
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { AlbumListQuery, AlbumListSort, SortOrder } from '/@/renderer/api/types';
-import { getServerById } from '/@/renderer/store';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
+import { getServerById } from '/@/renderer/store';
 
 export const useRecentlyPlayed = (args: QueryHookArgs<Partial<AlbumListQuery>>) => {
     const { options, query, serverId } = args;

src/renderer/features/home/routes/home-route.tsx

@@ -1,5 +1,10 @@
-import { useMemo, useRef } from 'react';
 import { ActionIcon, Group, Stack } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RiRefreshLine } from 'react-icons/ri';
+
+import { queryKeys } from '/@/renderer/api/query-keys';
 import {
     AlbumListSort,
     LibraryItem,
@@ -8,9 +13,11 @@ import {
     SortOrder,
 } from '/@/renderer/api/types';
 import { FeatureCarousel, NativeScrollArea, Spinner, TextTitle } from '/@/renderer/components';
+import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
 import { useAlbumList } from '/@/renderer/features/albums';
 import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
 import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
+import { useSongList } from '/@/renderer/features/songs';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
     HomeItem,
@@ -18,13 +25,7 @@ import {
     useGeneralSettings,
     useWindowSettings,
 } from '/@/renderer/store';
-import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
 import { Platform } from '/@/renderer/types';
-import { useQueryClient } from '@tanstack/react-query';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { useTranslation } from 'react-i18next';
-import { RiRefreshLine } from 'react-icons/ri';
-import { useSongList } from '/@/renderer/features/songs';
 
 const HomeRoute = () => {
     const { t } = useTranslation();
@@ -137,33 +138,6 @@ const HomeRoute = () => {
     }
 
     const carousels = {
-        [HomeItem.RANDOM]: {
-            data: random?.data?.items,
-            itemType: LibraryItem.ALBUM,
-            sortBy: AlbumListSort.RANDOM,
-            sortOrder: SortOrder.ASC,
-            title: t('page.home.explore', { postProcess: 'sentenceCase' }),
-        },
-        [HomeItem.RECENTLY_PLAYED]: {
-            data: recentlyPlayed?.data?.items,
-            itemType: LibraryItem.ALBUM,
-            pagination: {
-                itemsPerPage,
-            },
-            sortBy: AlbumListSort.RECENTLY_PLAYED,
-            sortOrder: SortOrder.DESC,
-            title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }),
-        },
-        [HomeItem.RECENTLY_ADDED]: {
-            data: recentlyAdded?.data?.items,
-            itemType: LibraryItem.ALBUM,
-            pagination: {
-                itemsPerPage,
-            },
-            sortBy: AlbumListSort.RECENTLY_ADDED,
-            sortOrder: SortOrder.DESC,
-            title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
-        },
         [HomeItem.MOST_PLAYED]: {
             data:
                 server?.type === ServerType.JELLYFIN
@@ -180,6 +154,33 @@ const HomeRoute = () => {
             sortOrder: SortOrder.DESC,
             title: t('page.home.mostPlayed', { postProcess: 'sentenceCase' }),
         },
+        [HomeItem.RANDOM]: {
+            data: random?.data?.items,
+            itemType: LibraryItem.ALBUM,
+            sortBy: AlbumListSort.RANDOM,
+            sortOrder: SortOrder.ASC,
+            title: t('page.home.explore', { postProcess: 'sentenceCase' }),
+        },
+        [HomeItem.RECENTLY_ADDED]: {
+            data: recentlyAdded?.data?.items,
+            itemType: LibraryItem.ALBUM,
+            pagination: {
+                itemsPerPage,
+            },
+            sortBy: AlbumListSort.RECENTLY_ADDED,
+            sortOrder: SortOrder.DESC,
+            title: t('page.home.newlyAdded', { postProcess: 'sentenceCase' }),
+        },
+        [HomeItem.RECENTLY_PLAYED]: {
+            data: recentlyPlayed?.data?.items,
+            itemType: LibraryItem.ALBUM,
+            pagination: {
+                itemsPerPage,
+            },
+            sortBy: AlbumListSort.RECENTLY_PLAYED,
+            sortOrder: SortOrder.DESC,
+            title: t('page.home.recentlyPlayed', { postProcess: 'sentenceCase' }),
+        },
     };
 
     const sortedCarousel = homeItems
@@ -200,7 +201,7 @@ const HomeRoute = () => {
 
     const invalidateCarouselQuery = (carousel: {
         itemType: LibraryItem;
-        sortBy: SongListSort | AlbumListSort;
+        sortBy: AlbumListSort | SongListSort;
         sortOrder: SortOrder;
     }) => {
         if (carousel.itemType === LibraryItem.ALBUM) {
@@ -231,7 +232,6 @@ const HomeRoute = () => {
     return (
         <AnimatedPage>
             <NativeScrollArea
-                ref={scrollAreaRef}
                 pageHeaderProps={{
                     backgroundColor: 'var(--titlebar-bg)',
                     children: (
@@ -243,6 +243,7 @@ const HomeRoute = () => {
                     ),
                     offset: 200,
                 }}
+                ref={scrollAreaRef}
             >
                 <Stack
                     mb="5rem"
@@ -253,7 +254,6 @@ const HomeRoute = () => {
                     {homeFeature && <FeatureCarousel data={featureItemsWithImage} />}
                     {sortedCarousel.map((carousel) => (
                         <MemoizedSwiperGridCarousel
-                            key={`carousel-${carousel.uniqueId}`}
                             cardRows={[
                                 {
                                     property: 'name',
@@ -287,6 +287,7 @@ const HomeRoute = () => {
                             ]}
                             data={carousel.data}
                             itemType={carousel.itemType}
+                            key={`carousel-${carousel.uniqueId}`}
                             route={{
                                 route: AppRoute.LIBRARY_ALBUMS_DETAIL,
                                 slugs: [

src/renderer/features/item-details/components/item-details-modal.tsx

@@ -1,7 +1,10 @@
 import { Group, Table } from '@mantine/core';
-import { RiCheckFill, RiCloseFill } from 'react-icons/ri';
-import { TFunction, useTranslation } from 'react-i18next';
 import { ReactNode } from 'react';
+import { TFunction, useTranslation } from 'react-i18next';
+import { RiCheckFill, RiCloseFill } from 'react-icons/ri';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+
 import {
     Album,
     AlbumArtist,
@@ -10,18 +13,16 @@ import {
     RelatedArtist,
     Song,
 } from '/@/renderer/api/types';
-import { formatDurationString, formatSizeString } from '/@/renderer/utils';
-import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
-import { Spoiler, Text } from '/@/renderer/components';
-import { sanitize } from '/@/renderer/utils/sanitize';
-import { SongPath } from '/@/renderer/features/item-details/components/song-path';
-import { generatePath } from 'react-router';
-import { Link } from 'react-router-dom';
-import { AppRoute } from '/@/renderer/router/routes';
-import { Separator } from '/@/renderer/components/separator';
-import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
-import { formatDateRelative, formatRating } from '/@/renderer/utils/format';
 import { SEPARATOR_STRING } from '/@/renderer/api/utils';
+import { Spoiler, Text } from '/@/renderer/components';
+import { Separator } from '/@/renderer/components/separator';
+import { SongPath } from '/@/renderer/features/item-details/components/song-path';
+import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
+import { AppRoute } from '/@/renderer/router/routes';
+import { formatDurationString, formatSizeString } from '/@/renderer/utils';
+import { formatDateRelative, formatRating } from '/@/renderer/utils/format';
+import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
+import { sanitize } from '/@/renderer/utils/sanitize';
 
 export type ItemDetailsModalProps = {
     item: Album | AlbumArtist | Song;
@@ -54,7 +55,7 @@ const handleRow = <T extends AnyLibraryItem>(t: TFunction, item: T, rule: ItemDe
     );
 };
 
-const formatArtists = (artists: RelatedArtist[] | undefined | null) =>
+const formatArtists = (artists: null | RelatedArtist[] | undefined) =>
     artists?.map((artist, index) => (
         <span key={artist.id || artist.name}>
             {index > 0 && <Separator />}

src/renderer/features/item-details/components/song-path.tsx

@@ -2,13 +2,14 @@ import { ActionIcon, CopyButton, Group } from '@mantine/core';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import { RiCheckFill, RiClipboardFill, RiExternalLinkFill } from 'react-icons/ri';
-import { Tooltip, toast } from '/@/renderer/components';
 import styled from 'styled-components';
 
-const util = isElectron() ? window.electron.utils : null;
+import { toast, Tooltip } from '/@/renderer/components';
+
+const util = isElectron() ? window.api.utils : null;
 
 export type SongPathProps = {
-    path: string | null;
+    path: null | string;
 };
 
 const PathText = styled.div`
@@ -28,11 +29,13 @@ export const SongPath = ({ path }: SongPathProps) => {
             >
                 {({ copied, copy }) => (
                     <Tooltip
-                        withinPortal
                         label={t(
                             copied ? 'page.itemDetail.copiedPath' : 'page.itemDetail.copyPath',
-                            { postProcess: 'sentenceCase' },
+                            {
+                                postProcess: 'sentenceCase',
+                            },
                         )}
+                        withinPortal
                     >
                         <ActionIcon onClick={copy}>
                             {copied ? <RiCheckFill /> : <RiClipboardFill />}
@@ -42,8 +45,8 @@ export const SongPath = ({ path }: SongPathProps) => {
             </CopyButton>
             {util && (
                 <Tooltip
-                    withinPortal
                     label={t('page.itemDetail.openFile', { postProcess: 'sentenceCase' })}
+                    withinPortal
                 >
                     <ActionIcon>
                         <RiExternalLinkFill

src/renderer/features/lyrics/components/lyrics-search-form.tsx

@@ -1,19 +1,21 @@
-import { useMemo } from 'react';
 import { Divider, Group, Stack } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { openModal } from '@mantine/modals';
 import orderBy from 'lodash/orderBy';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
+
 import {
     InternetProviderLyricSearchResponse,
     LyricSource,
     LyricsOverride,
 } from '../../../api/types';
 import { useLyricSearch } from '../queries/lyric-search-query';
-import { ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
+
 import i18n from '/@/i18n/i18n';
+import { ScrollArea, Spinner, Text, TextInput } from '/@/renderer/components';
 
 const SearchItem = styled.button`
     all: unset;
@@ -34,7 +36,7 @@ interface SearchResultProps {
     onClick?: () => void;
 }
 const SearchResult = ({ data, onClick }: SearchResultProps) => {
-    const { artist, name, source, score, id } = data;
+    const { artist, id, name, score, source } = data;
 
     const percentageScore = useMemo(() => {
         if (!score) return 0;
@@ -140,8 +142,8 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
                 <Spinner container />
             ) : (
                 <ScrollArea
-                    offsetScrollbars
                     h={400}
+                    offsetScrollbars
                     pr="1rem"
                     type="auto"
                     w="100%"
@@ -149,8 +151,8 @@ export const LyricsSearchForm = ({ artist, name, onSearchOverride }: LyricSearch
                     <Stack spacing="md">
                         {searchResults.map((result) => (
                             <SearchResult
-                                key={`${result.source}-${result.id}`}
                                 data={result}
+                                key={`${result.source}-${result.id}`}
                                 onClick={() => {
                                     onSearchOverride?.({
                                         artist: result.artist,

src/renderer/features/lyrics/lyric-line.tsx

@@ -1,10 +1,11 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { TextTitle } from '/@/renderer/components/text-title';
 import { TitleProps } from '@mantine/core';
+import { ComponentPropsWithoutRef } from 'react';
 import styled from 'styled-components';
 
+import { TextTitle } from '/@/renderer/components/text-title';
+
 interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
-    alignment: 'left' | 'center' | 'right';
+    alignment: 'center' | 'left' | 'right';
     fontSize: number;
     text: string;
 }
@@ -34,7 +35,7 @@ const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSiz
     }
 `;
 
-export const LyricLine = ({ text, alignment, fontSize, ...props }: LyricLineProps) => {
+export const LyricLine = ({ alignment, fontSize, text, ...props }: LyricLineProps) => {
     return (
         <StyledText
             $alignment={alignment}

src/renderer/features/lyrics/lyrics-actions.tsx

@@ -2,6 +2,7 @@ import { Box, Center, Group, Select, SelectItem } from '@mantine/core';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import { RiAddFill, RiSubtractFill } from 'react-icons/ri';
+
 import { LyricsOverride } from '/@/renderer/api/types';
 import { Button, NumberInput, Tooltip } from '/@/renderer/components';
 import { openLyricSearchModal } from '/@/renderer/features/lyrics/components/lyrics-search-form';
@@ -56,9 +57,9 @@ export const LyricsActions = ({
                     <Select
                         clearable={false}
                         data={languages}
+                        onChange={(value) => setIndex(parseInt(value!, 10))}
                         style={{ bottom: 30, position: 'absolute' }}
                         value={index.toString()}
-                        onChange={(value) => setIndex(parseInt(value!, 10))}
                     />
                 </Center>
             )}
@@ -66,9 +67,7 @@ export const LyricsActions = ({
             <Group position="center">
                 {isDesktop && sources.length ? (
                     <Button
-                        uppercase
                         disabled={isActionsDisabled}
-                        variant="subtle"
                         onClick={() =>
                             openLyricSearchModal({
                                 artist: currentSong?.artistName,
@@ -76,14 +75,16 @@ export const LyricsActions = ({
                                 onSearchOverride,
                             })
                         }
+                        uppercase
+                        variant="subtle"
                     >
                         {t('common.search', { postProcess: 'titleCase' })}
                     </Button>
                 ) : null}
                 <Button
                     aria-label="Decrease lyric offset"
-                    variant="subtle"
                     onClick={() => handleLyricOffset(delayMs - 50)}
+                    variant="subtle"
                 >
                     <RiSubtractFill />
                 </Button>
@@ -93,25 +94,25 @@ export const LyricsActions = ({
                 >
                     <NumberInput
                         aria-label="Lyric offset"
+                        onChange={handleLyricOffset}
                         styles={{ input: { textAlign: 'center' } }}
                         value={delayMs || 0}
                         width={55}
-                        onChange={handleLyricOffset}
                     />
                 </Tooltip>
                 <Button
                     aria-label="Increase lyric offset"
-                    variant="subtle"
                     onClick={() => handleLyricOffset(delayMs + 50)}
+                    variant="subtle"
                 >
                     <RiAddFill />
                 </Button>
                 {isDesktop && sources.length ? (
                     <Button
-                        uppercase
                         disabled={isActionsDisabled}
-                        variant="subtle"
                         onClick={onResetLyric}
+                        uppercase
+                        variant="subtle"
                     >
                         {t('common.reset', { postProcess: 'sentenceCase' })}
                     </Button>
@@ -121,10 +122,10 @@ export const LyricsActions = ({
             <Box style={{ position: 'absolute', right: 0, top: 0 }}>
                 {isDesktop && sources.length ? (
                     <Button
-                        uppercase
                         disabled={isActionsDisabled}
-                        variant="subtle"
                         onClick={onRemoveLyric}
+                        uppercase
+                        variant="subtle"
                     >
                         {t('common.clear', { postProcess: 'sentenceCase' })}
                     </Button>
@@ -134,10 +135,10 @@ export const LyricsActions = ({
             <Box style={{ position: 'absolute', right: 0, top: -50 }}>
                 {isDesktop && sources.length ? (
                     <Button
-                        uppercase
                         disabled={isActionsDisabled}
-                        variant="subtle"
                         onClick={onTranslateLyric}
+                        uppercase
+                        variant="subtle"
                     >
                         {t('common.translation', { postProcess: 'sentenceCase' })}
                     </Button>

src/renderer/features/lyrics/lyrics.tsx

@@ -1,24 +1,26 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Center, Group } from '@mantine/core';
 import { AnimatePresence, motion } from 'framer-motion';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useTranslation } from 'react-i18next';
 import { RiInformationFill } from 'react-icons/ri';
 import styled from 'styled-components';
+
 import { useSongLyricsByRemoteId, useSongLyricsBySong } from './queries/lyric-query';
 import { translateLyrics } from './queries/lyric-translate';
 import { SynchronizedLyrics, SynchronizedLyricsProps } from './synchronized-lyrics';
+
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/renderer/api/types';
 import { Spinner, TextTitle } from '/@/renderer/components';
 import { ErrorFallback } from '/@/renderer/features/action-required';
+import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
 import {
     UnsynchronizedLyrics,
     UnsynchronizedLyricsProps,
 } from '/@/renderer/features/lyrics/unsynchronized-lyrics';
-import { useCurrentSong, usePlayerStore, useLyricsSettings } from '/@/renderer/store';
-import { FullLyricsMetadata, LyricSource, LyricsOverride } from '/@/renderer/api/types';
-import { LyricsActions } from '/@/renderer/features/lyrics/lyrics-actions';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import { queryClient } from '/@/renderer/lib/react-query';
+import { useCurrentSong, useLyricsSettings, usePlayerStore } from '/@/renderer/store';
 
 const ActionsContainer = styled.div`
     position: absolute;
@@ -89,7 +91,7 @@ export const Lyrics = () => {
     const lyricsSettings = useLyricsSettings();
     const { t } = useTranslation();
     const [index, setIndex] = useState(0);
-    const [translatedLyrics, setTranslatedLyrics] = useState<string | null>(null);
+    const [translatedLyrics, setTranslatedLyrics] = useState<null | string>(null);
     const [showTranslation, setShowTranslation] = useState(false);
 
     const { data, isInitialLoading } = useSongLyricsBySong(
@@ -153,7 +155,7 @@ export const Lyrics = () => {
             : lyrics.lyrics;
         const { translationApiKey, translationApiProvider, translationTargetLanguage } =
             lyricsSettings;
-        const TranslatedText: string | null = await translateLyrics(
+        const TranslatedText: null | string = await translateLyrics(
             originalLyrics,
             translationApiKey,
             translationApiProvider,
@@ -250,11 +252,11 @@ export const Lyrics = () => {
                     <LyricsActions
                         index={index}
                         languages={languages}
-                        setIndex={setIndex}
                         onRemoveLyric={handleOnRemoveLyric}
                         onResetLyric={handleOnResetLyric}
                         onSearchOverride={handleOnSearchOverride}
                         onTranslateLyric={handleOnTranslateLyric}
+                        setIndex={setIndex}
                     />
                 </ActionsContainer>
             </LyricsContainer>

src/renderer/features/lyrics/queries/lyric-query.ts

@@ -1,23 +1,24 @@
-import { UseQueryResult, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
+import isElectron from 'is-electron';
+
+import { api } from '/@/renderer/api';
+import { ServerFeature } from '/@/renderer/api/features-types';
+import { queryKeys } from '/@/renderer/api/query-keys';
 import {
+    FullLyricsMetadata,
+    InternetProviderLyricResponse,
+    LyricGetQuery,
     LyricsQuery,
     QueueSong,
-    SynchronizedLyricsArray,
-    InternetProviderLyricResponse,
-    FullLyricsMetadata,
-    LyricGetQuery,
-    StructuredLyric,
     ServerType,
+    StructuredLyric,
+    SynchronizedLyricsArray,
 } from '/@/renderer/api/types';
+import { hasFeature } from '/@/renderer/api/utils';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 import { getServerById, useLyricsSettings } from '/@/renderer/store';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { api } from '/@/renderer/api';
-import isElectron from 'is-electron';
-import { hasFeature } from '/@/renderer/api/utils';
-import { ServerFeature } from '/@/renderer/api/features-types';
 
-const lyricsIpc = isElectron() ? window.electron.lyrics : null;
+const lyricsIpc = isElectron() ? window.api.lyrics : null;
 
 // Match LRC lyrics format by https://github.com/ustbhuangyi/lyric-parser
 // [mm:ss.SSS] text
@@ -62,7 +63,7 @@ const formatLyrics = (lyrics: string) => {
 
 export const useServerLyrics = (
     args: QueryHookArgs<LyricsQuery>,
-): UseQueryResult<string | null> => {
+): UseQueryResult<null | string> => {
     const { query, serverId } = args;
     const server = getServerById(serverId);
 
@@ -92,7 +93,7 @@ export const useSongLyricsBySong = (
         cacheTime: Infinity,
         enabled: !!song && !!server,
         onError: () => {},
-        queryFn: async ({ signal }): Promise<FullLyricsMetadata | StructuredLyric[] | null> => {
+        queryFn: async ({ signal }): Promise<FullLyricsMetadata | null | StructuredLyric[]> => {
             if (!server) throw new Error('Server not found');
             if (!song) return null;
 
@@ -156,7 +157,7 @@ export const useSongLyricsBySong = (
 
 export const useSongLyricsByRemoteId = (
     args: QueryHookArgs<Partial<LyricGetQuery>>,
-): UseQueryResult<string | null> => {
+): UseQueryResult<null | string> => {
     const queryClient = useQueryClient();
     const { query, serverId } = args;
 

src/renderer/features/lyrics/queries/lyric-search-query.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import isElectron from 'is-electron';
+
 import { queryKeys } from '/@/renderer/api/query-keys';
 import {
     InternetProviderLyricSearchResponse,
@@ -8,7 +9,7 @@ import {
 } from '/@/renderer/api/types';
 import { QueryHookArgs } from '/@/renderer/lib/react-query';
 
-const lyricsIpc = isElectron() ? window.electron.lyrics : null;
+const lyricsIpc = isElectron() ? window.api.lyrics : null;
 
 export const useLyricSearch = (args: Omit<QueryHookArgs<LyricSearchQuery>, 'serverId'>) => {
     const { options, query } = args;

src/renderer/features/lyrics/queries/lyric-translate.ts

@@ -3,8 +3,8 @@ import axios from 'axios';
 export const translateLyrics = async (
     originalLyrics: string,
     translationApiKey: string,
-    translationApiProvider: string | null,
-    translationTargetLanguage: string | null,
+    translationApiProvider: null | string,
+    translationTargetLanguage: null | string,
 ) => {
     let TranslatedText = '';
     if (translationApiProvider === 'Microsoft Azure') {

src/renderer/features/lyrics/synchronized-lyrics.tsx

@@ -1,4 +1,11 @@
+import isElectron from 'is-electron';
 import { useCallback, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+
+import { FullLyricsMetadata, SynchronizedLyricsArray } from '/@/renderer/api/types';
+import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
+import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
+import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
 import {
     useCurrentPlayer,
     useCurrentStatus,
@@ -10,16 +17,10 @@ import {
     useSetCurrentTime,
 } from '/@/renderer/store';
 import { PlaybackType, PlayerStatus } from '/@/renderer/types';
-import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
-import isElectron from 'is-electron';
-import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
-import { FullLyricsMetadata, SynchronizedLyricsArray } from '/@/renderer/api/types';
-import styled from 'styled-components';
-import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
-const utils = isElectron() ? window.electron.utils : null;
-const mpris = isElectron() && utils?.isLinux() ? window.electron.mpris : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
+const utils = isElectron() ? window.api.utils : null;
+const mpris = isElectron() && utils?.isLinux() ? window.api.mpris : null;
 
 const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
     display: flex;
@@ -55,7 +56,7 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
 
 export interface SynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: SynchronizedLyricsArray;
-    translatedLyrics?: string | null;
+    translatedLyrics?: null | string;
 }
 
 export const SynchronizedLyrics = ({
@@ -185,7 +186,7 @@ export const SynchronizedLyrics = ({
                 'sychronized-lyrics-scroll-container',
             ) as HTMLElement;
             const currentLyric = document.querySelector(`#lyric-${index}`) as HTMLElement;
-            // eslint-disable-next-line no-unsafe-optional-chaining
+
             const offsetTop = currentLyric?.offsetTop - doc?.clientHeight / 2 ?? 0;
 
             if (currentLyric === null) {
@@ -372,16 +373,16 @@ export const SynchronizedLyrics = ({
                         className="lyric-line synchronized"
                         fontSize={settings.fontSize}
                         id={`lyric-${idx}`}
-                        text={text}
                         onClick={() => handleSeek(time / 1000)}
+                        text={text}
                     />
                     {translatedLyrics && (
                         <LyricLine
                             alignment={settings.alignment}
                             className="lyric-line synchronized translation"
                             fontSize={settings.fontSize * 0.8}
-                            text={translatedLyrics.split('\n')[idx]}
                             onClick={() => handleSeek(time / 1000)}
+                            text={translatedLyrics.split('\n')[idx]}
                         />
                     )}
                 </div>

src/renderer/features/lyrics/unsynchronized-lyrics.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 import styled from 'styled-components';
-import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
+
 import { FullLyricsMetadata } from '/@/renderer/api/types';
+import { LyricLine } from '/@/renderer/features/lyrics/lyric-line';
 import { useLyricsSettings } from '/@/renderer/store';
 
 export interface UnsynchronizedLyricsProps extends Omit<FullLyricsMetadata, 'lyrics'> {
     lyrics: string;
-    translatedLyrics?: string | null;
+    translatedLyrics?: null | string;
 }
 
 const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -1,12 +1,15 @@
-import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Box, Flex } from '@mantine/core';
+import { useRef } from 'react';
+
 import { PlayQueueListControls } from './play-queue-list-controls';
+
 import { Song } from '/@/renderer/api/types';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 
 export const DrawerPlayQueue = () => {
-    const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
+    const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
 
     return (
         <Flex

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -1,43 +1,46 @@
-import type { MutableRefObject } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import type { MutableRefObject } from 'react';
+
 import { Group } from '@mantine/core';
-import { Button, Popover } from '/@/renderer/components';
 import isElectron from 'is-electron';
 import { useTranslation } from 'react-i18next';
 import {
     RiArrowDownLine,
     RiArrowGoForwardLine,
     RiArrowUpLine,
-    RiShuffleLine,
     RiDeleteBinLine,
-    RiListSettingsLine,
     RiEraserLine,
+    RiListSettingsLine,
+    RiShuffleLine,
 } from 'react-icons/ri';
-import { Song } from '/@/renderer/api/types';
-import { usePlayerControls, useQueueControls } from '/@/renderer/store';
-import { PlaybackType, TableType } from '/@/renderer/types';
-import { usePlaybackType } from '/@/renderer/store/settings.store';
+
 import { usePlayerStore, useSetCurrentTime } from '../../../store/player.store';
+
+import { Song } from '/@/renderer/api/types';
+import { Button, Popover } from '/@/renderer/components';
 import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
 import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { usePlayerControls, useQueueControls } from '/@/renderer/store';
+import { usePlaybackType } from '/@/renderer/store/settings.store';
+import { PlaybackType, TableType } from '/@/renderer/types';
 import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
 interface PlayQueueListOptionsProps {
-    tableRef: MutableRefObject<{ grid: AgGridReactType<Song> } | null>;
+    tableRef: MutableRefObject<null | { grid: AgGridReactType<Song> }>;
     type: TableType;
 }
 
-export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsProps) => {
+export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsProps) => {
     const { t } = useTranslation();
     const {
         clearQueue,
         moveToBottomOfQueue,
         moveToNextOfQueue,
         moveToTopOfQueue,
-        shuffleQueue,
         removeFromQueue,
+        shuffleQueue,
     } = useQueueControls();
 
     const { pause } = usePlayerControls();
@@ -136,57 +139,57 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
             <Group spacing="sm">
                 <Button
                     compact
+                    onClick={handleShuffleQueue}
                     size="md"
                     tooltip={{ label: t('player.shuffle', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleShuffleQueue}
                 >
                     <RiShuffleLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleMoveToNext}
                     size="md"
                     tooltip={{ label: t('action.moveToNext', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleMoveToNext}
                 >
                     <RiArrowGoForwardLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleMoveToBottom}
                     size="md"
                     tooltip={{ label: t('action.moveToBottom', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleMoveToBottom}
                 >
                     <RiArrowDownLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleMoveToTop}
                     size="md"
                     tooltip={{ label: t('action.moveToTop', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleMoveToTop}
                 >
                     <RiArrowUpLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleRemoveSelected}
                     size="md"
                     tooltip={{
                         label: t('action.removeFromQueue', { postProcess: 'sentenceCase' }),
                     }}
                     variant="default"
-                    onClick={handleRemoveSelected}
                 >
                     <RiEraserLine size="1.1rem" />
                 </Button>
                 <Button
                     compact
+                    onClick={handleClearQueue}
                     size="md"
                     tooltip={{ label: t('action.clearQueue', { postProcess: 'sentenceCase' }) }}
                     variant="default"
-                    onClick={handleClearQueue}
                 >
                     <RiDeleteBinLine size="1.1rem" />
                 </Button>

src/renderer/features/now-playing/components/play-queue.tsx

@@ -1,5 +1,3 @@
-import type { Ref } from 'react';
-import { useState, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import type {
     CellDoubleClickedEvent,
     RowClassRules,
@@ -7,7 +5,24 @@ import type {
     RowNode,
 } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import type { Ref } from 'react';
+
+import { useMergedRef } from '@mantine/hooks';
 import '@ag-grid-community/styles/ag-theme-alpine.css';
+import isElectron from 'is-electron';
+import debounce from 'lodash/debounce';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+import { LibraryItem, QueueSong } from '/@/renderer/api/types';
+import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
+import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
+import { ErrorFallback } from '/@/renderer/features/action-required';
+import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+import { QUEUE_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
+import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { useAppFocus } from '/@/renderer/hooks';
 import {
     useAppStoreActions,
     useCurrentSong,
@@ -24,23 +39,10 @@ import {
     useSettingsStoreActions,
     useTableSettings,
 } from '/@/renderer/store/settings.store';
-import { useMergedRef } from '@mantine/hooks';
-import isElectron from 'is-electron';
-import debounce from 'lodash/debounce';
-import { ErrorBoundary } from 'react-error-boundary';
-import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
-import { ErrorFallback } from '/@/renderer/features/action-required';
 import { PlaybackType, TableType } from '/@/renderer/types';
-import { LibraryItem, QueueSong } from '/@/renderer/api/types';
-import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { QUEUE_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { VirtualGridAutoSizerContainer } from '/@/renderer/components/virtual-grid';
-import { useAppFocus } from '/@/renderer/hooks';
-import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
-import { updateSong } from '/@/renderer/features/player/update-remote-song';
 import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
 type QueueProps = {
     type: TableType;
@@ -248,10 +250,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
         <ErrorBoundary FallbackComponent={ErrorFallback}>
             <VirtualGridAutoSizerContainer>
                 <VirtualTable
-                    ref={mergedRef}
                     alwaysShowHorizontalScroll
-                    rowDragEntireRow
-                    rowDragMultiRow
                     autoFitColumns={tableConfig.autoFit}
                     columnDefs={columnDefs}
                     context={{
@@ -265,11 +264,6 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
                     }}
                     deselectOnClickOutside={type === 'fullScreen'}
                     getRowId={(data) => data.data.uniqueId}
-                    rowBuffer={50}
-                    rowClassRules={rowClassRules}
-                    rowData={queue}
-                    rowHeight={tableConfig.rowHeight || 40}
-                    suppressCellFocus={type === 'fullScreen'}
                     onCellContextMenu={onCellContextMenu}
                     onCellDoubleClicked={handleDoubleClick}
                     onColumnMoved={handleColumnChange}
@@ -278,6 +272,14 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
                     onGridReady={handleGridReady}
                     onGridSizeChanged={handleGridSizeChange}
                     onRowDragEnd={handleDragEnd}
+                    ref={mergedRef}
+                    rowBuffer={50}
+                    rowClassRules={rowClassRules}
+                    rowData={queue}
+                    rowDragEntireRow
+                    rowDragMultiRow
+                    rowHeight={tableConfig.rowHeight || 40}
+                    suppressCellFocus={type === 'fullScreen'}
                 />
             </VirtualGridAutoSizerContainer>
         </ErrorBoundary>

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,16 +1,19 @@
-import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
 import { Stack } from '@mantine/core';
-import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
+import { useRef } from 'react';
+
 import { PlayQueueListControls } from './play-queue-list-controls';
+
 import { Song } from '/@/renderer/api/types';
 import { PageHeader, Paper } from '/@/renderer/components';
+import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
+import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
-import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
 
 export const SidebarPlayQueue = () => {
-    const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
+    const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
     const { windowBarStyle } = useWindowSettings();
 
     const isWeb = windowBarStyle === Platform.WEB;

src/renderer/features/now-playing/index.ts

@@ -1,4 +1,4 @@
-export * from './components/play-queue';
-export * from './components/sidebar-play-queue';
 export * from './components/drawer-play-queue';
+export * from './components/play-queue';
 export * from './components/play-queue-list-controls';
+export * from './components/sidebar-play-queue';

src/renderer/features/now-playing/routes/now-playing-route.tsx

@@ -1,15 +1,17 @@
-import { useRef } from 'react';
+import type { Song } from '/@/renderer/api/types';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+
+import { useRef } from 'react';
+
+import { Paper } from '/@/renderer/components';
+import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
 import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
-import type { Song } from '/@/renderer/api/types';
-import { AnimatedPage } from '/@/renderer/features/shared';
-import { Paper } from '/@/renderer/components';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
-import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
+import { AnimatedPage } from '/@/renderer/features/shared';
 
 const NowPlayingRoute = () => {
-    const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
+    const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
 
     return (
         <AnimatedPage>

src/renderer/features/player/components/center-controls.tsx

@@ -1,9 +1,10 @@
-import { useEffect, useState } from 'react';
 import { useHotkeys } from '@mantine/hooks';
 import { useQueryClient } from '@tanstack/react-query';
 import formatDuration from 'format-duration';
 import isElectron from 'is-electron';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { BsDice3 } from 'react-icons/bs';
 import { IoIosPause } from 'react-icons/io';
 import {
     RiPlayFill,
@@ -16,29 +17,30 @@ import {
     RiSpeedFill,
     RiStopFill,
 } from 'react-icons/ri';
-import { BsDice3 } from 'react-icons/bs';
 import styled from 'styled-components';
-import { Text } from '/@/renderer/components';
+
 import { useCenterControls } from '../hooks/use-center-controls';
 import { PlayerButton } from './player-button';
+import { openShuffleAllModal } from './shuffle-all-modal';
+
+import { Text } from '/@/renderer/components';
+import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
+import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import {
+    useCurrentPlayer,
     useCurrentSong,
     useCurrentStatus,
-    useCurrentPlayer,
-    useSetCurrentTime,
-    useRepeatStatus,
-    useShuffleStatus,
     useCurrentTime,
+    useRepeatStatus,
+    useSetCurrentTime,
+    useShuffleStatus,
 } from '/@/renderer/store';
 import {
     useHotkeySettings,
     usePlaybackType,
     useSettingsStore,
 } from '/@/renderer/store/settings.store';
-import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
-import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
-import { openShuffleAllModal } from './shuffle-all-modal';
-import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
+import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
 
 interface CenterControlsProps {
     playersRef: any;
@@ -111,16 +113,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
 
     const {
         handleNextTrack,
+        handlePause,
+        handlePlay,
         handlePlayPause,
         handlePrevTrack,
         handleSeekSlider,
         handleSkipBackward,
         handleSkipForward,
+        handleStop,
         handleToggleRepeat,
         handleToggleShuffle,
-        handleStop,
-        handlePause,
-        handlePlay,
     } = useCenterControls({ playersRef });
     const handlePlayQueueAdd = usePlayQueueAdd();
 
@@ -174,15 +176,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                 <ButtonsContainer>
                     <PlayerButton
                         icon={<RiStopFill size={buttonSize} />}
+                        onClick={handleStop}
                         tooltip={{
                             label: t('player.stop', { postProcess: 'sentenceCase' }),
                         }}
                         variant="tertiary"
-                        onClick={handleStop}
                     />
                     <PlayerButton
                         $isActive={shuffle !== PlayerShuffle.NONE}
                         icon={<RiShuffleFill size={buttonSize} />}
+                        onClick={handleToggleShuffle}
                         tooltip={{
                             label:
                                 shuffle === PlayerShuffle.NONE
@@ -193,19 +196,19 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                     : t('player.shuffle', { postProcess: 'sentenceCase' }),
                         }}
                         variant="tertiary"
-                        onClick={handleToggleShuffle}
                     />
                     <PlayerButton
                         icon={<RiSkipBackFill size={buttonSize} />}
+                        onClick={handlePrevTrack}
                         tooltip={{
                             label: t('player.previous', { postProcess: 'sentenceCase' }),
                         }}
                         variant="secondary"
-                        onClick={handlePrevTrack}
                     />
                     {skip?.enabled && (
                         <PlayerButton
                             icon={<RiRewindFill size={buttonSize} />}
+                            onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
                             tooltip={{
                                 label: t('player.skip', {
                                     context: 'back',
@@ -213,7 +216,6 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                 }),
                             }}
                             variant="secondary"
-                            onClick={() => handleSkipBackward(skip?.skipBackwardSeconds)}
                         />
                     )}
                     <PlayerButton
@@ -225,6 +227,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                 <IoIosPause size={buttonSize} />
                             )
                         }
+                        onClick={handlePlayPause}
                         tooltip={{
                             label:
                                 status === PlayerStatus.PAUSED
@@ -232,11 +235,11 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                     : t('player.pause', { postProcess: 'sentenceCase' }),
                         }}
                         variant="main"
-                        onClick={handlePlayPause}
                     />
                     {skip?.enabled && (
                         <PlayerButton
                             icon={<RiSpeedFill size={buttonSize} />}
+                            onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
                             tooltip={{
                                 label: t('player.skip', {
                                     context: 'forward',
@@ -244,16 +247,15 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                 }),
                             }}
                             variant="secondary"
-                            onClick={() => handleSkipForward(skip?.skipForwardSeconds)}
                         />
                     )}
                     <PlayerButton
                         icon={<RiSkipForwardFill size={buttonSize} />}
+                        onClick={handleNextTrack}
                         tooltip={{
                             label: t('player.next', { postProcess: 'sentenceCase' }),
                         }}
                         variant="secondary"
-                        onClick={handleNextTrack}
                     />
                     <PlayerButton
                         $isActive={repeat !== PlayerRepeat.NONE}
@@ -264,6 +266,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                 <RiRepeat2Line size={buttonSize} />
                             )
                         }
+                        onClick={handleToggleRepeat}
                         tooltip={{
                             label: `${
                                 repeat === PlayerRepeat.NONE
@@ -283,21 +286,20 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                             }`,
                         }}
                         variant="tertiary"
-                        onClick={handleToggleRepeat}
                     />
 
                     <PlayerButton
                         icon={<BsDice3 size={buttonSize} />}
-                        tooltip={{
-                            label: t('player.playRandom', { postProcess: 'sentenceCase' }),
-                        }}
-                        variant="tertiary"
                         onClick={() =>
                             openShuffleAllModal({
                                 handlePlayQueueAdd,
                                 queryClient,
                             })
                         }
+                        tooltip={{
+                            label: t('player.playRandom', { postProcess: 'sentenceCase' }),
+                        }}
+                        variant="tertiary"
                     />
                 </ButtonsContainer>
             </ControlsContainer>
@@ -317,9 +319,6 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                         label={(value) => formatDuration(value * 1000)}
                         max={songDuration}
                         min={0}
-                        size={6}
-                        value={!isSeeking ? currentTime : seekValue}
-                        w="100%"
                         onChange={(e) => {
                             setIsSeeking(true);
                             setSeekValue(e);
@@ -333,6 +332,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                 setIsSeeking(false);
                             }, 50);
                         }}
+                        size={6}
+                        value={!isSeeking ? currentTime : seekValue}
+                        w="100%"
                     />
                 </SliderWrapper>
                 <SliderValueWrapper $position="right">

src/renderer/features/player/components/full-screen-player-image.tsx

@@ -1,11 +1,12 @@
-import { Flex, Stack, Group, Center } from '@mantine/core';
+import { Center, Flex, Group, Stack } from '@mantine/core';
 import { useSetState } from '@mantine/hooks';
 import { AnimatePresence, HTMLMotionProps, motion, Variants } from 'framer-motion';
-import { useEffect, useRef, useLayoutEffect, useState, useCallback, Fragment } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+
 import { QueueSong } from '/@/renderer/api/types';
 import { Badge, Text, TextTitle } from '/@/renderer/components';
 import { useFastAverageColor } from '/@/renderer/hooks';
@@ -90,7 +91,7 @@ const imageVariants: Variants = {
     },
 };
 
-const scaleImageUrl = (imageSize: number, url?: string | null) => {
+const scaleImageUrl = (imageSize: number, url?: null | string) => {
     return url
         ?.replace(/&size=\d+/, `&size=${imageSize}`)
         .replace(/\?width=\d+/, `?width=${imageSize}`)
@@ -213,13 +214,13 @@ export const FullScreenPlayerImage = () => {
                 >
                     {imageState.current === 0 && (
                         <ImageWithPlaceholder
-                            key={imageKey}
                             animate="open"
                             className="full-screen-player-image"
                             custom={{ isOpen: imageState.current === 0 }}
                             draggable={false}
                             exit="closed"
                             initial="closed"
+                            key={imageKey}
                             placeholder="var(--placeholder-bg)"
                             src={imageState.topImage || ''}
                             useAspectRatio={useImageAspectRatio}
@@ -229,13 +230,13 @@ export const FullScreenPlayerImage = () => {
 
                     {imageState.current === 1 && (
                         <ImageWithPlaceholder
-                            key={imageKey}
                             animate="open"
                             className="full-screen-player-image"
                             custom={{ isOpen: imageState.current === 1 }}
                             draggable={false}
                             exit="closed"
                             initial="closed"
+                            key={imageKey}
                             placeholder="var(--placeholder-bg)"
                             src={imageState.bottomImage || ''}
                             useAspectRatio={useImageAspectRatio}
@@ -279,8 +280,8 @@ export const FullScreenPlayerImage = () => {
                     {currentSong?.album}{' '}
                 </TextTitle>
                 <TextTitle
-                    key="fs-artists"
                     align="center"
+                    key="fs-artists"
                     order={3}
                     style={{
                         textShadow: 'var(--fullscreen-player-text-shadow)',

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -1,20 +1,21 @@
 import { Group } from '@mantine/core';
 import { motion } from 'framer-motion';
+import { lazy, Suspense, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import { RiFileMusicLine, RiFileTextLine } from 'react-icons/ri';
 import styled from 'styled-components';
+
 import { Button } from '/@/renderer/components';
+import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
 import { PlayQueue } from '/@/renderer/features/now-playing';
+import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
+import { usePlaybackSettings } from '/@/renderer/store';
 import {
     useFullScreenPlayerStore,
     useFullScreenPlayerStoreActions,
 } from '/@/renderer/store/full-screen-player.store';
-import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
-import { lazy, Suspense, useMemo } from 'react';
-import { usePlaybackSettings } from '/@/renderer/store';
 import { PlaybackType } from '/@/renderer/types';
-import { FullScreenSimilarSongs } from '/@/renderer/features/player/components/full-screen-similar-songs';
 
 const Visualizer = lazy(() =>
     import('/@/renderer/features/player/components/visualizer').then((module) => ({
@@ -112,17 +113,17 @@ export const FullScreenPlayerQueue = () => {
             opacity={opacity}
         >
             <Group
-                grow
                 align="center"
                 className="full-screen-player-queue-header"
+                grow
                 position="center"
             >
                 {headerItems.map((item) => (
                     <HeaderItemWrapper key={`tab-${item.label}`}>
                         <Button
                             fullWidth
-                            uppercase
                             fw="600"
+                            onClick={item.onClick}
                             pos="relative"
                             size="lg"
                             sx={{
@@ -132,8 +133,8 @@ export const FullScreenPlayerQueue = () => {
                                     : 'var(--main-fg-secondary) !important',
                                 letterSpacing: '1px',
                             }}
+                            uppercase
                             variant="subtle"
-                            onClick={item.onClick}
                         >
                             {item.label}
                         </Button>

src/renderer/features/player/components/full-screen-player.tsx

@@ -1,11 +1,14 @@
-import { useLayoutEffect, useRef } from 'react';
 import { Divider, Group } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
-import { Variants, motion } from 'framer-motion';
+import { motion, Variants } from 'framer-motion';
+import { useLayoutEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiArrowDownSLine, RiSettings3Line } from 'react-icons/ri';
 import { useLocation } from 'react-router';
 import styled from 'styled-components';
+
+import { useFastAverageColor } from '../../../hooks/use-fast-average-color';
+
 import {
     Button,
     NumberInput,
@@ -15,6 +18,9 @@ import {
     Slider,
     Switch,
 } from '/@/renderer/components';
+import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
+import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image';
+import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
 import {
     useCurrentSong,
     useFullScreenPlayerStore,
@@ -24,10 +30,6 @@ import {
     useSettingsStoreActions,
     useWindowSettings,
 } from '/@/renderer/store';
-import { useFastAverageColor } from '../../../hooks/use-fast-average-color';
-import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image';
-import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
-import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
 import { Platform } from '/@/renderer/types';
 
 const Container = styled(motion.div)`
@@ -119,10 +121,10 @@ const Controls = () => {
         >
             <Button
                 compact
+                onClick={handleToggleFullScreenPlayer}
                 size="sm"
                 tooltip={{ label: t('common.minimize', { postProcess: 'titleCase' }) }}
                 variant="subtle"
-                onClick={handleToggleFullScreenPlayer}
             >
                 <RiArrowDownSLine size="2rem" />
             </Button>
@@ -187,9 +189,9 @@ const Controls = () => {
                                     label={(e) => `${e} rem`}
                                     max={6}
                                     min={0}
+                                    onChangeEnd={(e) => setStore({ dynamicImageBlur: Number(e) })}
                                     step={0.5}
                                     w="100%"
-                                    onChangeEnd={(e) => setStore({ dynamicImageBlur: Number(e) })}
                                 />
                             </Option.Control>
                         </Option>
@@ -207,8 +209,8 @@ const Controls = () => {
                                     label={(e) => `${e} %`}
                                     max={100}
                                     min={0}
-                                    w="100%"
                                     onChangeEnd={(e) => setStore({ opacity: Number(e) })}
+                                    w="100%"
                                 />
                             </Option.Control>
                         </Option>
@@ -296,8 +298,8 @@ const Controls = () => {
                                     }
                                     max={72}
                                     min={8}
-                                    w="100%"
                                     onChangeEnd={(e) => handleLyricsSettings('fontSize', Number(e))}
+                                    w="100%"
                                 />
                                 <Slider
                                     defaultValue={lyricConfig.fontSize}
@@ -308,10 +310,10 @@ const Controls = () => {
                                     }
                                     max={72}
                                     min={8}
-                                    w="100%"
                                     onChangeEnd={(e) =>
                                         handleLyricsSettings('fontSizeUnsync', Number(e))
                                     }
+                                    w="100%"
                                 />
                             </Group>
                         </Option.Control>
@@ -332,18 +334,18 @@ const Controls = () => {
                                     label={(e) => `Synchronized: ${e}px`}
                                     max={50}
                                     min={0}
-                                    w="100%"
                                     onChangeEnd={(e) => handleLyricsSettings('gap', Number(e))}
+                                    w="100%"
                                 />
                                 <Slider
                                     defaultValue={lyricConfig.gap}
                                     label={(e) => `Unsynchronized: ${e}px`}
                                     max={50}
                                     min={0}
-                                    w="100%"
                                     onChangeEnd={(e) =>
                                         handleLyricsSettings('gapUnsync', Number(e))
                                     }
+                                    w="100%"
                                 />
                             </Group>
                         </Option.Control>
@@ -376,8 +378,8 @@ const Controls = () => {
                                         value: 'right',
                                     },
                                 ]}
-                                value={lyricConfig.alignment}
                                 onChange={(e) => handleLyricsSettings('alignment', e)}
+                                value={lyricConfig.alignment}
                             />
                         </Option.Control>
                     </Option>
@@ -391,10 +393,10 @@ const Controls = () => {
                             <NumberInput
                                 defaultValue={lyricConfig.delayMs}
                                 hideControls={false}
-                                step={10}
                                 onBlur={(e) =>
                                     handleLyricsSettings('delayMs', Number(e.currentTarget.value))
                                 }
+                                step={10}
                             />
                         </Option.Control>
                     </Option>

src/renderer/features/player/components/left-controls.tsx

@@ -1,26 +1,27 @@
-import React, { MouseEvent } from 'react';
 import { Center, Group } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
-import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
+import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
+import React, { MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiArrowUpSLine, RiDiscLine, RiMore2Fill } from 'react-icons/ri';
 import { generatePath, Link } from 'react-router-dom';
 import styled from 'styled-components';
+
+import { LibraryItem } from '/@/renderer/api/types';
 import { Button, Text, Tooltip } from '/@/renderer/components';
+import { Separator } from '/@/renderer/components/separator';
+import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
+import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
 import { AppRoute } from '/@/renderer/router/routes';
 import {
     useAppStoreActions,
     useCurrentSong,
-    useSetFullScreenPlayerStore,
     useFullScreenPlayerStore,
-    useSidebarStore,
     useHotkeySettings,
+    useSetFullScreenPlayerStore,
+    useSidebarStore,
 } from '/@/renderer/store';
 import { fadeIn } from '/@/renderer/styles';
-import { LibraryItem } from '/@/renderer/api/types';
-import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
-import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
-import { Separator } from '/@/renderer/components/separator';
 
 const ImageWrapper = styled.div`
     position: relative;
@@ -98,7 +99,7 @@ export const LeftControls = () => {
     const { setSideBar } = useAppStoreActions();
     const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
-    const { image, collapsed } = useSidebarStore();
+    const { collapsed, image } = useSidebarStore();
     const hideImage = image && !collapsed;
     const currentSong = useCurrentSong();
     const title = currentSong?.name;
@@ -112,7 +113,7 @@ export const LeftControls = () => {
         SONG_CONTEXT_MENU_ITEMS,
     );
 
-    const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
+    const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
         e?.stopPropagation();
         setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
     };
@@ -143,13 +144,13 @@ export const LeftControls = () => {
                     {!hideImage && (
                         <ImageWrapper>
                             <Image
-                                key="playerbar-image"
                                 animate={{ opacity: 1, scale: 1, x: 0 }}
                                 exit={{ opacity: 0, x: -50 }}
                                 initial={{ opacity: 0, x: -50 }}
+                                key="playerbar-image"
+                                onClick={handleToggleFullScreenPlayer}
                                 role="button"
                                 transition={{ duration: 0.3, ease: 'easeInOut' }}
-                                onClick={handleToggleFullScreenPlayer}
                             >
                                 <Tooltip
                                     label={t('player.toggleFullscreenPlayer', {
@@ -180,6 +181,7 @@ export const LeftControls = () => {
                                 {!collapsed && (
                                     <Button
                                         compact
+                                        onClick={handleToggleSidebarImage}
                                         opacity={0.8}
                                         radius={50}
                                         size="md"
@@ -196,7 +198,6 @@ export const LeftControls = () => {
                                             openDelay: 500,
                                         }}
                                         variant="default"
-                                        onClick={handleToggleSidebarImage}
                                     >
                                         <RiArrowUpSLine
                                             color="white"
@@ -211,8 +212,8 @@ export const LeftControls = () => {
                 <MetadataStack layout="position">
                     <LineItem onClick={stopPropagation}>
                         <Group
-                            noWrap
                             align="flex-start"
+                            noWrap
                             spacing="xs"
                         >
                             <Text
@@ -228,8 +229,8 @@ export const LeftControls = () => {
                             {isSongDefined && (
                                 <Button
                                     compact
-                                    variant="subtle"
                                     onClick={(e) => handleGeneralContextMenu(e, [currentSong!])}
+                                    variant="subtle"
                                 >
                                     <RiMore2Fill size="1.2rem" />
                                 </Button>

src/renderer/features/player/components/player-button.tsx

@@ -1,12 +1,14 @@
-/* stylelint-disable no-descending-specificity */
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
 import type { TooltipProps, UnstyledButtonProps } from '@mantine/core';
+
 import { UnstyledButton } from '@mantine/core';
 import { motion } from 'framer-motion';
+/* stylelint-disable no-descending-specificity */
+import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
 import styled, { css } from 'styled-components';
+
 import { Tooltip } from '/@/renderer/components';
 
-type MantineButtonProps = UnstyledButtonProps & ComponentPropsWithoutRef<'button'>;
+type MantineButtonProps = ComponentPropsWithoutRef<'button'> & UnstyledButtonProps;
 interface PlayerButtonProps extends MantineButtonProps {
     $isActive?: boolean;
     icon: ReactNode;
@@ -121,7 +123,7 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
 `;
 
 export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
-    ({ tooltip, variant, icon, ...rest }: PlayerButtonProps, ref) => {
+    ({ icon, tooltip, variant, ...rest }: PlayerButtonProps, ref) => {
         if (tooltip) {
             return (
                 <Tooltip {...tooltip}>

src/renderer/features/player/components/playerbar.tsx

@@ -1,28 +1,30 @@
-import { useCallback, MouseEvent } from 'react';
+import { MouseEvent, useCallback } from 'react';
 import styled from 'styled-components';
-import {
-    usePlaybackType,
-    useSettingsStore,
-    useGeneralSettings,
-} from '/@/renderer/store/settings.store';
-import { PlaybackType } from '/@/renderer/types';
+
+import { CenterControls } from './center-controls';
+import { LeftControls } from './left-controls';
+import { RightControls } from './right-controls';
+
 import { AudioPlayer } from '/@/renderer/components';
+import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
+import { updateSong } from '/@/renderer/features/player/update-remote-song';
 import {
     useCurrentPlayer,
     useCurrentStatus,
+    useFullScreenPlayerStore,
     useMuted,
     usePlayer1Data,
     usePlayer2Data,
     usePlayerControls,
-    useVolume,
     useSetFullScreenPlayerStore,
-    useFullScreenPlayerStore,
+    useVolume,
 } from '/@/renderer/store';
-import { CenterControls } from './center-controls';
-import { LeftControls } from './left-controls';
-import { RightControls } from './right-controls';
-import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
-import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import {
+    useGeneralSettings,
+    usePlaybackType,
+    useSettingsStore,
+} from '/@/renderer/store/settings.store';
+import { PlaybackType } from '/@/renderer/types';
 
 const PlayerbarContainer = styled.div`
     width: 100vw;
@@ -80,7 +82,7 @@ export const Playerbar = () => {
     const { expanded: isFullScreenPlayerExpanded } = useFullScreenPlayerStore();
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();
 
-    const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
+    const handleToggleFullScreenPlayer = (e?: KeyboardEvent | MouseEvent<HTMLDivElement>) => {
         e?.stopPropagation();
         setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
     };
@@ -107,7 +109,6 @@ export const Playerbar = () => {
             </PlayerbarControlsGrid>
             {playbackType === PlaybackType.WEB && (
                 <AudioPlayer
-                    ref={playersRef}
                     autoNext={autoNextFn}
                     crossfadeDuration={settings.crossfadeDuration}
                     crossfadeStyle={settings.crossfadeStyle}
@@ -116,6 +117,7 @@ export const Playerbar = () => {
                     playbackStyle={settings.style}
                     player1={player1}
                     player2={player2}
+                    ref={playersRef}
                     status={status}
                     style={settings.style}
                     volume={(volume / 100) ** 2}

src/renderer/features/player/components/right-controls.tsx

@@ -1,16 +1,25 @@
-import { useEffect } from 'react';
 import { Flex, Group } from '@mantine/core';
 import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import isElectron from 'is-electron';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import {
-    RiVolumeUpFill,
+    RiHeartFill,
+    RiHeartLine,
     RiVolumeDownFill,
     RiVolumeMuteFill,
-    RiHeartLine,
-    RiHeartFill,
+    RiVolumeUpFill,
 } from 'react-icons/ri';
+
+import { useRightControls } from '../hooks/use-right-controls';
+import { PlayerButton } from './player-button';
+
+import { LibraryItem, QueueSong, ServerType, Song } from '/@/renderer/api/types';
+import { DropdownMenu, Rating } from '/@/renderer/components';
+import { Slider } from '/@/renderer/components/slider';
+import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
+import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
 import {
     useAppStoreActions,
     useCurrentServer,
@@ -23,16 +32,9 @@ import {
     useSpeed,
     useVolume,
 } from '/@/renderer/store';
-import { useRightControls } from '../hooks/use-right-controls';
-import { PlayerButton } from './player-button';
-import { LibraryItem, QueueSong, ServerType, Song } from '/@/renderer/api/types';
-import { useCreateFavorite, useDeleteFavorite, useSetRating } from '/@/renderer/features/shared';
-import { DropdownMenu, Rating } from '/@/renderer/components';
-import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
-import { Slider } from '/@/renderer/components/slider';
 
-const ipc = isElectron() ? window.electron.ipc : null;
-const remote = isElectron() ? window.electron.remote : null;
+const ipc = isElectron() ? window.api.ipc : null;
+const remote = isElectron() ? window.api.remote : null;
 
 export const RightControls = () => {
     const { t } = useTranslation();
@@ -46,12 +48,12 @@ export const RightControls = () => {
     const { rightExpanded: isQueueExpanded } = useSidebarStore();
     const { bindings } = useHotkeySettings();
     const {
-        handleVolumeSlider,
-        handleVolumeWheel,
         handleMute,
-        handleVolumeDown,
-        handleVolumeUp,
         handleSpeed,
+        handleVolumeDown,
+        handleVolumeSlider,
+        handleVolumeUp,
+        handleVolumeWheel,
     } = useRightControls();
 
     const speed = useSpeed();
@@ -208,23 +210,23 @@ export const RightControls = () => {
             <Group h="calc(100% / 3)">
                 {showRating && (
                     <Rating
+                        onChange={handleUpdateRating}
                         size="sm"
                         value={currentSong?.userRating || 0}
-                        onChange={handleUpdateRating}
                     />
                 )}
             </Group>
             <Group
-                noWrap
                 align="center"
+                noWrap
                 spacing="xs"
             >
                 <DropdownMenu
-                    withArrow
                     arrowOffset={12}
                     offset={0}
                     position="top-end"
                     width={425}
+                    withArrow
                 >
                     <DropdownMenu.Target>
                         <PlayerButton
@@ -248,6 +250,8 @@ export const RightControls = () => {
                             ]}
                             max={1.5}
                             min={0.5}
+                            onChange={handleSpeed}
+                            onDoubleClick={() => handleSpeed(1)}
                             step={0.01}
                             styles={{
                                 markLabel: {
@@ -258,8 +262,6 @@ export const RightControls = () => {
                                 },
                             }}
                             value={speed}
-                            onChange={handleSpeed}
-                            onDoubleClick={() => handleSpeed(1)}
                         />
                     </DropdownMenu.Dropdown>
                 </DropdownMenu>
@@ -274,6 +276,7 @@ export const RightControls = () => {
                             <RiHeartLine size="1.1rem" />
                         )
                     }
+                    onClick={() => handleToggleFavorite(currentSong)}
                     sx={{
                         svg: {
                             fill: !currentSong?.userFavorite
@@ -288,17 +291,16 @@ export const RightControls = () => {
                         openDelay: 500,
                     }}
                     variant="secondary"
-                    onClick={() => handleToggleFavorite(currentSong)}
                 />
                 {!isMinWidth ? (
                     <PlayerButton
                         icon={<HiOutlineQueueList size="1.1rem" />}
+                        onClick={handleToggleQueue}
                         tooltip={{
                             label: t('player.viewQueue', { postProcess: 'titleCase' }),
                             openDelay: 500,
                         }}
                         variant="secondary"
-                        onClick={handleToggleQueue}
                     />
                 ) : null}
                 <Group
@@ -315,23 +317,23 @@ export const RightControls = () => {
                                 <RiVolumeDownFill size="1.2rem" />
                             )
                         }
+                        onClick={handleMute}
+                        onWheel={handleVolumeWheel}
                         tooltip={{
                             label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
                             openDelay: 500,
                         }}
                         variant="secondary"
-                        onClick={handleMute}
-                        onWheel={handleVolumeWheel}
                     />
                     {!isMinWidth ? (
                         <PlayerbarSlider
                             max={100}
                             min={0}
+                            onChange={handleVolumeSlider}
+                            onWheel={handleVolumeWheel}
                             size={6}
                             value={volume}
                             w={volumeWidth}
-                            onChange={handleVolumeSlider}
-                            onWheel={handleVolumeWheel}
                         />
                     ) : null}
                 </Group>

src/renderer/features/player/components/shuffle-all-modal.tsx

@@ -1,28 +1,29 @@
-import { useMemo } from 'react';
 import { Divider, Group, SelectItem, Stack } from '@mantine/core';
 import { closeAllModals, openModal } from '@mantine/modals';
 import { QueryClient } from '@tanstack/react-query';
 import merge from 'lodash/merge';
-import { RiAddBoxFill, RiPlayFill, RiAddCircleFill } from 'react-icons/ri';
-import { Button, Checkbox, NumberInput, Select } from '/@/renderer/components';
+import { useMemo } from 'react';
+import { RiAddBoxFill, RiAddCircleFill, RiPlayFill } from 'react-icons/ri';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
+
+import i18n from '/@/i18n/i18n';
+import { api } from '/@/renderer/api';
+import { queryKeys } from '/@/renderer/api/query-keys';
 import {
     GenreListResponse,
-    RandomSongListQuery,
-    MusicFolderListResponse,
-    ServerType,
     GenreListSort,
-    SortOrder,
-    ServerListItem,
+    MusicFolderListResponse,
     Played,
+    RandomSongListQuery,
+    ServerListItem,
+    ServerType,
+    SortOrder,
 } from '/@/renderer/api/types';
-import { api } from '/@/renderer/api';
+import { Button, Checkbox, NumberInput, Select } from '/@/renderer/components';
 import { useAuthStore } from '/@/renderer/store';
-import { queryKeys } from '/@/renderer/api/query-keys';
 import { Play, PlayQueueAddOptions } from '/@/renderer/types';
-import i18n from '/@/i18n/i18n';
 
 interface ShuffleAllSlice extends RandomSongListQuery {
     actions: {
@@ -70,17 +71,17 @@ interface ShuffleAllModalProps {
     handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
     musicFolders: MusicFolderListResponse | undefined;
     queryClient: QueryClient;
-    server: ServerListItem | null;
+    server: null | ServerListItem;
 }
 
 export const ShuffleAllModal = ({
+    genres,
     handlePlayQueueAdd,
+    musicFolders,
     queryClient,
     server,
-    genres,
-    musicFolders,
 }: ShuffleAllModalProps) => {
-    const { genre, limit, maxYear, minYear, enableMaxYear, enableMinYear, musicFolderId, played } =
+    const { enableMaxYear, enableMinYear, genre, limit, maxYear, minYear, musicFolderId, played } =
         useShuffleAllStore();
     const { setStore } = useShuffleAllStoreActions();
 
@@ -140,18 +141,19 @@ export const ShuffleAllModal = ({
     return (
         <Stack spacing="md">
             <NumberInput
-                required
                 label="How many tracks?"
                 max={500}
                 min={1}
-                value={limit}
                 onChange={(e) => setStore({ limit: e ? Number(e) : 500 })}
+                required
+                value={limit}
             />
             <Group grow>
                 <NumberInput
                     label="From year"
                     max={2050}
                     min={1850}
+                    onChange={(e) => setStore({ minYear: e ? Number(e) : 0 })}
                     rightSection={
                         <Checkbox
                             checked={enableMinYear}
@@ -160,13 +162,13 @@ export const ShuffleAllModal = ({
                         />
                     }
                     value={minYear}
-                    onChange={(e) => setStore({ minYear: e ? Number(e) : 0 })}
                 />
 
                 <NumberInput
                     label="To year"
                     max={2050}
                     min={1850}
+                    onChange={(e) => setStore({ maxYear: e ? Number(e) : 0 })}
                     rightSection={
                         <Checkbox
                             checked={enableMaxYear}
@@ -175,34 +177,33 @@ export const ShuffleAllModal = ({
                         />
                     }
                     value={maxYear}
-                    onChange={(e) => setStore({ maxYear: e ? Number(e) : 0 })}
                 />
             </Group>
             <Select
                 clearable
                 data={genreData}
                 label="Genre"
-                value={genre}
                 onChange={(e) => setStore({ genre: e || '' })}
+                value={genre}
             />
             <Select
                 clearable
                 data={musicFolderData}
                 label="Music folder"
-                value={musicFolderId}
                 onChange={(e) => {
                     setStore({ musicFolderId: e ? String(e) : '' });
                 }}
+                value={musicFolderId}
             />
             {server?.type === ServerType.JELLYFIN && (
                 <Select
                     clearable
                     data={PLAYED_DATA}
                     label="Play filter"
-                    value={played}
                     onChange={(e) => {
                         setStore({ played: e as Played });
                     }}
+                    value={played}
                 />
             )}
             <Divider />
@@ -210,18 +211,18 @@ export const ShuffleAllModal = ({
                 <Button
                     disabled={!limit}
                     leftIcon={<RiAddBoxFill size="1rem" />}
+                    onClick={() => handlePlay(Play.LAST)}
                     type="submit"
                     variant="default"
-                    onClick={() => handlePlay(Play.LAST)}
                 >
                     Add
                 </Button>
                 <Button
                     disabled={!limit}
                     leftIcon={<RiAddCircleFill size="1rem" />}
+                    onClick={() => handlePlay(Play.NEXT)}
                     type="submit"
                     variant="default"
-                    onClick={() => handlePlay(Play.NEXT)}
                 >
                     Add next
                 </Button>
@@ -229,9 +230,9 @@ export const ShuffleAllModal = ({
             <Button
                 disabled={!limit}
                 leftIcon={<RiPlayFill size="1rem" />}
+                onClick={() => handlePlay(Play.NOW)}
                 type="submit"
                 variant="filled"
-                onClick={() => handlePlay(Play.NOW)}
             >
                 Play
             </Button>

src/renderer/features/player/components/visualizer.tsx

@@ -1,7 +1,8 @@
-import { createRef, useCallback, useEffect, useState } from 'react';
-import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
 import AudioMotionAnalyzer from 'audiomotion-analyzer';
+import { createRef, useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
+
+import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
 import { useSettingsStore } from '/@/renderer/store';
 
 const StyledContainer = styled.div`

src/renderer/features/player/context/play-queue-handler-context.ts

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+
 import { PlayQueueAddOptions } from '/@/renderer/types';
 
 export const PlayQueueHandlerContext = createContext<{

src/renderer/features/player/context/webaudio-context.ts

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+
 import { WebAudio } from '/@/renderer/types';
 
 export const WebAudioContext = createContext<{

src/renderer/features/player/hooks/use-center-controls.ts

@@ -1,6 +1,11 @@
-import { useCallback, useEffect } from 'react';
 import isElectron from 'is-electron';
-import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
+import debounce from 'lodash/debounce';
+import { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { toast } from '/@/renderer/components';
+import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
+import { updateSong } from '/@/renderer/features/player/update-remote-song';
 import {
     useCurrentPlayer,
     useCurrentStatus,
@@ -12,19 +17,15 @@ import {
     useShuffleStatus,
 } from '/@/renderer/store';
 import { usePlaybackType } from '/@/renderer/store/settings.store';
-import { useScrobble } from '/@/renderer/features/player/hooks/use-scrobble';
-import debounce from 'lodash/debounce';
-import { toast } from '/@/renderer/components';
-import { useTranslation } from 'react-i18next';
-import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { PlaybackType, PlayerRepeat, PlayerShuffle, PlayerStatus } from '/@/renderer/types';
 import { setAutoNext, setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
-const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
-const ipc = isElectron() ? window.electron.ipc : null;
-const utils = isElectron() ? window.electron.utils : null;
-const mpris = isElectron() && utils?.isLinux() ? window.electron.mpris : null;
-const remote = isElectron() ? window.electron.remote : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
+const mpvPlayerListener = isElectron() ? window.api.mpvPlayerListener : null;
+const ipc = isElectron() ? window.api.ipc : null;
+const utils = isElectron() ? window.api.utils : null;
+const mpris = isElectron() && utils?.isLinux() ? window.api.mpris : null;
+const remote = isElectron() ? window.api.remote : null;
 const mediaSession = navigator.mediaSession;
 
 export const useCenterControls = (args: { playersRef: any }) => {
@@ -32,7 +33,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
     const { playersRef } = args;
 
     const currentPlayer = useCurrentPlayer();
-    const { setShuffle, setRepeat, play, pause, previous, next, setCurrentIndex, autoNext } =
+    const { autoNext, next, pause, play, previous, setCurrentIndex, setRepeat, setShuffle } =
         usePlayerControls();
     const setCurrentTime = useSetCurrentTime();
     const queue = useDefaultQueue();
@@ -45,7 +46,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
     const currentPlayerRef = currentPlayer === 1 ? player1Ref : player2Ref;
     const nextPlayerRef = currentPlayer === 1 ? player2Ref : player1Ref;
 
-    const { handleScrobbleFromSongRestart, handleScrobbleFromSeek } = useScrobble();
+    const { handleScrobbleFromSeek, handleScrobbleFromSongRestart } = useScrobble();
 
     useEffect(() => {
         if (mediaSession) {
@@ -226,12 +227,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
         };
 
         switch (repeatStatus) {
-            case PlayerRepeat.NONE:
-                handleRepeatNone[playbackType]();
-                break;
             case PlayerRepeat.ALL:
                 handleRepeatAll[playbackType]();
                 break;
+            case PlayerRepeat.NONE:
+                handleRepeatNone[playbackType]();
+                break;
             case PlayerRepeat.ONE:
                 handleRepeatOne[playbackType]();
                 break;
@@ -310,12 +311,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
         };
 
         switch (repeatStatus) {
-            case PlayerRepeat.NONE:
-                handleRepeatNone[playbackType]();
-                break;
             case PlayerRepeat.ALL:
                 handleRepeatAll[playbackType]();
                 break;
+            case PlayerRepeat.NONE:
+                handleRepeatNone[playbackType]();
+                break;
             case PlayerRepeat.ONE:
                 handleRepeatOne[playbackType]();
                 break;
@@ -418,12 +419,12 @@ export const useCenterControls = (args: { playersRef: any }) => {
         };
 
         switch (repeatStatus) {
-            case PlayerRepeat.NONE:
-                handleRepeatNone[playbackType]();
-                break;
             case PlayerRepeat.ALL:
                 handleRepeatAll[playbackType]();
                 break;
+            case PlayerRepeat.NONE:
+                handleRepeatNone[playbackType]();
+                break;
             case PlayerRepeat.ONE:
                 handleRepeatOne[playbackType]();
                 break;
@@ -510,7 +511,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
     }, 100);
 
     const handleSeekSlider = useCallback(
-        (e: number | any) => {
+        (e: any | number) => {
             setCurrentTime(e, true);
             handleScrobbleFromSeek(e);
             debouncedSeek(e);
@@ -564,6 +565,7 @@ export const useCenterControls = (args: { playersRef: any }) => {
             });
 
             mpvPlayerListener.rendererCurrentTime((_event: any, time: number) => {
+                console.log('time :>> ', time);
                 setCurrentTime(time);
             });
 

src/renderer/features/player/hooks/use-handle-playqueue-add.ts

@@ -1,31 +1,32 @@
-import { useCallback, useRef } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
-import { useCurrentServer, usePlayerControls, usePlayerStore } from '/@/renderer/store';
-import { useGeneralSettings, usePlaybackType } from '/@/renderer/store/settings.store';
-import { PlayQueueAddOptions, Play, PlaybackType } from '/@/renderer/types';
-import { toast } from '/@/renderer/components/toast/index';
 import isElectron from 'is-electron';
 import { nanoid } from 'nanoid/non-secure';
+import { useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { queryKeys } from '/@/renderer/api/query-keys';
 import {
+    instanceOfCancellationError,
     LibraryItem,
     QueueSong,
     Song,
     SongListResponse,
-    instanceOfCancellationError,
 } from '/@/renderer/api/types';
-import {
-    getPlaylistSongsById,
-    getSongById,
-    getAlbumSongsById,
-    getAlbumArtistSongsById,
-    getSongsByQuery,
-    getGenreSongsById,
-    getArtistSongsById,
-} from '/@/renderer/features/player/utils';
-import { queryKeys } from '/@/renderer/api/query-keys';
-import { useTranslation } from 'react-i18next';
+import { toast } from '/@/renderer/components/toast/index';
 import { PlayersRef } from '/@/renderer/features/player/ref/players-ref';
 import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import {
+    getAlbumArtistSongsById,
+    getAlbumSongsById,
+    getArtistSongsById,
+    getGenreSongsById,
+    getPlaylistSongsById,
+    getSongById,
+    getSongsByQuery,
+} from '/@/renderer/features/player/utils';
+import { useCurrentServer, usePlayerControls, usePlayerStore } from '/@/renderer/store';
+import { useGeneralSettings, usePlaybackType } from '/@/renderer/store/settings.store';
+import { Play, PlaybackType, PlayQueueAddOptions } from '/@/renderer/types';
 import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 
 const getRootQueryKey = (itemType: LibraryItem, serverId: string) => {
@@ -55,7 +56,7 @@ const getRootQueryKey = (itemType: LibraryItem, serverId: string) => {
     return queryKey;
 };
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
 const addToQueue = usePlayerStore.getState().actions.addToQueue;
 
@@ -65,20 +66,20 @@ export const useHandlePlayQueueAdd = () => {
     const playbackType = usePlaybackType();
     const server = useCurrentServer();
     const { play } = usePlayerControls();
-    const timeoutIds = useRef<Record<string, ReturnType<typeof setTimeout>> | null>({});
+    const timeoutIds = useRef<null | Record<string, ReturnType<typeof setTimeout>>>({});
 
     const { doubleClickQueueAll } = useGeneralSettings();
 
     const handlePlayQueueAdd = useCallback(
         async (options: PlayQueueAddOptions) => {
             if (!server) return toast.error({ message: 'No server selected', type: 'error' });
-            const { initialIndex, initialSongId, playType, byData, byItemType, query } = options;
-            let songs: QueueSong[] | null = null;
+            const { byData, byItemType, initialIndex, initialSongId, playType, query } = options;
+            let songs: null | QueueSong[] = null;
             let initialSongIndex = 0;
 
             if (byItemType) {
                 let songList: SongListResponse | undefined;
-                const { type: itemType, id } = byItemType;
+                const { id, type: itemType } = byItemType;
 
                 const fetchId = nanoid();
                 timeoutIds.current = {

src/renderer/features/player/hooks/use-playqueue-add.ts

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import { PlayQueueHandlerContext } from '/@/renderer/features/player/context/play-queue-handler-context';
 
 export const usePlayQueueAdd = () => {

src/renderer/features/player/hooks/use-right-controls.ts

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, WheelEvent } from 'react';
 import isElectron from 'is-electron';
+import { useCallback, useEffect, WheelEvent } from 'react';
+
 import {
     useMuted,
     usePlayerControls,
@@ -9,10 +10,10 @@ import {
 } from '/@/renderer/store';
 import { useGeneralSettings } from '/@/renderer/store/settings.store';
 
-const mpvPlayer = isElectron() ? window.electron.mpvPlayer : null;
-const mpvPlayerListener = isElectron() ? window.electron.mpvPlayerListener : null;
-const ipc = isElectron() ? window.electron.ipc : null;
-const remote = isElectron() ? window.electron.remote : null;
+const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
+const mpvPlayerListener = isElectron() ? window.api.mpvPlayerListener : null;
+const ipc = isElectron() ? window.api.ipc : null;
+const remote = isElectron() ? window.api.remote : null;
 
 const calculateVolumeUp = (volume: number, volumeWheelStep: number) => {
     let volumeToSet;
@@ -39,7 +40,7 @@ const calculateVolumeDown = (volume: number, volumeWheelStep: number) => {
 };
 
 export const useRightControls = () => {
-    const { setVolume, setMuted } = usePlayerControls();
+    const { setMuted, setVolume } = usePlayerControls();
     const volume = useVolume();
     const muted = useMuted();
     const { volumeWheelStep } = useGeneralSettings();
@@ -98,7 +99,7 @@ export const useRightControls = () => {
     }, [setVolume, volume, volumeWheelStep]);
 
     const handleVolumeWheel = useCallback(
-        (e: WheelEvent<HTMLDivElement | HTMLButtonElement>) => {
+        (e: WheelEvent<HTMLButtonElement | HTMLDivElement>) => {
             let volumeToSet;
             if (e.deltaY > 0 || e.deltaX > 0) {
                 volumeToSet = calculateVolumeDown(volume, volumeWheelStep);

src/renderer/features/player/hooks/use-scrobble.ts

@@ -1,4 +1,5 @@
-import { useEffect, useCallback, useState, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
 import { QueueSong, ServerType } from '/@/renderer/api/types';
 import { useSendScrobble } from '/@/renderer/features/player/mutations/scrobble-mutation';
 import { usePlayerStore } from '/@/renderer/store';
@@ -82,12 +83,12 @@ export const useScrobble = () => {
         [isScrobbleEnabled, sendScrobble],
     );
 
-    const progressIntervalId = useRef<ReturnType<typeof setInterval> | null>(null);
-    const songChangeTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const progressIntervalId = useRef<null | ReturnType<typeof setInterval>>(null);
+    const songChangeTimeoutId = useRef<null | ReturnType<typeof setTimeout>>(null);
     const handleScrobbleFromSongChange = useCallback(
         (
-            current: (QueueSong | number | undefined)[],
-            previous: (QueueSong | number | undefined)[],
+            current: (number | QueueSong | undefined)[],
+            previous: (number | QueueSong | undefined)[],
         ) => {
             if (!isScrobbleEnabled) return;
 
@@ -179,8 +180,8 @@ export const useScrobble = () => {
 
     const handleScrobbleFromStatusChange = useCallback(
         (
-            current: (PlayerStatus | number | undefined)[],
-            previous: (PlayerStatus | number | undefined)[],
+            current: (number | PlayerStatus | undefined)[],
+            previous: (number | PlayerStatus | undefined)[],
         ) => {
             if (!isScrobbleEnabled) return;
 

src/renderer/features/player/hooks/use-webaudio.ts

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
+
 import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-context';
 
 export const useWebAudio = () => {
-    const { webAudio, setWebAudio } = useContext(WebAudioContext);
+    const { setWebAudio, webAudio } = useContext(WebAudioContext);
     return { setWebAudio, webAudio };
 };

src/renderer/features/player/mutations/scrobble-mutation.ts

@@ -1,7 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
+
 import { api } from '/@/renderer/api';
-import { ScrobbleResponse, ScrobbleArgs } from '/@/renderer/api/types';
+import { ScrobbleArgs, ScrobbleResponse } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
 import { getServerById, useIncrementQueuePlayCount } from '/@/renderer/store';
 import { usePlayEvent } from '/@/renderer/store/event.store';
@@ -13,7 +14,7 @@ export const useSendScrobble = (options?: MutationOptions) => {
     return useMutation<
         ScrobbleResponse,
         AxiosError,
-        Omit<ScrobbleArgs, 'server' | 'apiClientProps'>,
+        Omit<ScrobbleArgs, 'apiClientProps' | 'server'>,
         null
     >({
         mutationFn: (args) => {

src/renderer/features/player/update-remote-song.tsx

@@ -1,7 +1,8 @@
 import isElectron from 'is-electron';
+
 import { QueueSong } from '/@/renderer/api/types';
 
-const remote = isElectron() ? window.electron.remote : null;
+const remote = isElectron() ? window.api.remote : null;
 const mediaSession = navigator.mediaSession;
 
 export const updateSong = (song: QueueSong | undefined) => {