fix prettier/lint

package-lock.json

@@ -136,7 +136,7 @@
                 "postcss-scss": "^4.0.4",
                 "postcss-styled-syntax": "^0.5.0",
                 "postcss-syntax": "^0.36.2",
-                "prettier": "^2.6.2",
+                "prettier": "^3.3.3",
                 "react-refresh": "^0.12.0",
                 "react-refresh-typescript": "^2.0.4",
                 "react-test-renderer": "^18.0.0",
@@ -18752,15 +18752,16 @@
             }
         },
         "node_modules/prettier": {
-            "version": "2.6.2",
+            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-            "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+            "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
             "dev": true,
+            "license": "MIT",
             "bin": {
-                "prettier": "bin-prettier.js"
+                "prettier": "bin/prettier.cjs"
             },
             "engines": {
-                "node": ">=10.13.0"
+                "node": ">=14"
             },
             "funding": {
                 "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -37375,9 +37376,9 @@
             "dev": true
         },
         "prettier": {
-            "version": "2.6.2",
+            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-            "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+            "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
             "dev": true
         },
         "prettier-linter-helpers": {

package.json

@@ -261,7 +261,7 @@
         "postcss-scss": "^4.0.4",
         "postcss-styled-syntax": "^0.5.0",
         "postcss-syntax": "^0.36.2",
-        "prettier": "^2.6.2",
+        "prettier": "^3.3.3",
         "react-refresh": "^0.12.0",
         "react-refresh-typescript": "^2.0.4",
         "react-test-renderer": "^18.0.0",

src/main/features/core/remote/index.ts

@@ -625,8 +625,8 @@ if (mprisPlayer) {
             event === 'Playlist'
                 ? PlayerRepeat.ALL
                 : event === 'Track'
-                ? PlayerRepeat.ONE
+                  ? PlayerRepeat.ONE
-                : PlayerRepeat.NONE;
+                  : PlayerRepeat.NONE;
 
         currentState.repeat = repeat;
         broadcast({ data: repeat, event: 'repeat' });

src/remote/components/remote-container.tsx

@@ -113,8 +113,8 @@ export const RemoteContainer = () => {
                         repeat === PlayerRepeat.ONE
                             ? 'One'
                             : repeat === PlayerRepeat.ALL
-                            ? 'all'
+                              ? 'all'
-                            : 'none'
+                              : 'none'
                     }`}
                     variant="default"
                     onClick={() => send({ event: 'repeat' })}

src/remote/components/wrapped-slider.tsx

@@ -44,7 +44,7 @@ export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
                     {...props}
                     min={0}
                     size={6}
-                    value={!isSeeking ? value ?? 0 : seek}
+                    value={!isSeeking ? (value ?? 0) : seek}
                     w="100%"
                     onChange={(e) => {
                         setIsSeeking(true);

src/renderer/components/audio-player/utils/list-handlers.ts

@@ -101,10 +101,10 @@ export const crossfadeHandler = (args: {
                 fadeType === 'constantPower'
                     ? 0
                     : fadeType === 'constantPowerSlowFade'
-                    ? 1
+                      ? 1
-                    : fadeType === 'constantPowerSlowCut'
+                      : fadeType === 'constantPowerSlowCut'
-                    ? 3
+                        ? 3
-                    : 10;
+                        : 10;
 
             percentageOfFadeLeft = timeLeft / fadeDuration;
             currentPlayerVolumeCalculation =

src/renderer/components/button/index.tsx

@@ -24,7 +24,10 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
     background: ${(props) => `var(--btn-${props.variant}-bg)`};
     border: ${(props) => `var(--btn-${props.variant}-border)`};
     border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
-    transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
+    transition:
+        background 0.2s ease-in-out,
+        color 0.2s ease-in-out,
+        border 0.2s ease-in-out;
 
     svg {
         fill: ${(props) => `var(--btn-${props.variant}-fg)`};

src/renderer/components/card/album-card.tsx

@@ -17,7 +17,9 @@ const CardWrapper = styled.div<{
     cursor: ${({ link }) => link && 'pointer'};
     background: var(--card-default-bg);
     border-radius: var(--card-default-radius);
-    transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
+    transition:
+        border 0.2s ease-in-out,
+        background 0.2s ease-in-out;
 
     &:hover {
         background: var(--card-default-bg-hover);

src/renderer/components/feature-carousel/index.tsx

@@ -232,8 +232,8 @@ export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
                                                 playType === Play.NOW
                                                     ? 'player.play'
                                                     : playType === Play.NEXT
-                                                    ? 'player.addNext'
+                                                      ? 'player.addNext'
-                                                    : 'player.addLast',
+                                                      : 'player.addLast',
                                                 { postProcess: 'titleCase' },
                                             )}
                                         </Button>

src/renderer/components/pagination/index.tsx

@@ -9,7 +9,9 @@ const StyledPagination = styled(MantinePagination)<PaginationProps>`
         color: var(--btn-default-fg);
         background-color: var(--btn-default-bg);
         border: none;
-        transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+        transition:
+            background 0.2s ease-in-out,
+            color 0.2s ease-in-out;
 
         &[data-active] {
             color: var(--btn-primary-fg);

src/renderer/components/tabs/index.tsx

@@ -32,7 +32,9 @@ const StyledTabs = styled(MantineTabs)`
             background: var(--btn-subtle-bg-hover);
         }
 
-        transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+        transition:
+            background 0.2s ease-in-out,
+            color 0.2s ease-in-out;
     }
 
     button[data-active] {

src/renderer/components/toast/index.tsx

@@ -16,19 +16,19 @@ const showToast = ({ type, ...props }: NotificationProps) => {
         type === 'success'
             ? 'var(--success-color)'
             : type === 'warning'
-            ? 'var(--warning-color)'
+              ? 'var(--warning-color)'
-            : type === 'error'
+              : type === 'error'
-            ? 'var(--danger-color)'
+                ? 'var(--danger-color)'
-            : 'var(--primary-color)';
+                : 'var(--primary-color)';
 
     const defaultTitle =
         type === 'success'
             ? 'Success'
             : type === 'warning'
-            ? 'Warning'
+              ? 'Warning'
-            : type === 'error'
+              : type === 'error'
-            ? 'Error'
+                ? 'Error'
-            : 'Info';
+                : 'Info';
 
     const defaultDuration = type === 'error' ? 5000 : 2000;
 

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

@@ -160,8 +160,8 @@ export const GridCardControls = ({
         itemType === LibraryItem.ALBUM
             ? ALBUM_CONTEXT_MENU_ITEMS
             : itemType === LibraryItem.PLAYLIST
-            ? PLAYLIST_CONTEXT_MENU_ITEMS
+              ? PLAYLIST_CONTEXT_MENU_ITEMS
-            : ARTIST_CONTEXT_MENU_ITEMS,
+              : ARTIST_CONTEXT_MENU_ITEMS,
         resetInfiniteLoaderCache,
     );
 

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

@@ -11,8 +11,8 @@ export const CellContainer = styled.div<{ $position?: 'left' | 'center' | 'right
         props.$position === 'right'
             ? 'flex-end'
             : props.$position === 'center'
-            ? 'center'
+              ? 'center'
-            : 'flex-start'};
+              : 'flex-start'};
     width: 100%;
     height: 100%;
     letter-spacing: 0.5px;

src/renderer/components/virtual-table/headers/generic-table-header.tsx

@@ -20,8 +20,8 @@ export const HeaderWrapper = styled.div<{ $position: Options['position'] }>`
         props.$position === 'right'
             ? 'flex-end'
             : props.$position === 'center'
-            ? 'center'
+              ? 'center'
-            : 'flex-start'};
+              : 'flex-start'};
     width: 100%;
     font-family: var(--content-font-family);
     text-transform: uppercase;
@@ -37,8 +37,8 @@ const HeaderText = styled(_Text)<{ $position: Options['position'] }>`
         props.$position === 'right'
             ? 'flex-end'
             : props.$position === 'center'
-            ? 'center'
+              ? 'center'
-            : 'flex-start'};
+              : 'flex-start'};
     text-transform: uppercase;
 `;
 

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

@@ -143,8 +143,8 @@ const AlbumListRoute = () => {
     const title = artist
         ? t('page.albumList.artistAlbums', { artist })
         : genreId
-        ? t('page.albumList.genreAlbums', { genre: titleCase(genreTitle) })
+          ? t('page.albumList.genreAlbums', { genre: titleCase(genreTitle) })
-        : undefined;
+          : undefined;
 
     return (
         <AnimatedPage>

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

@@ -287,13 +287,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
         if (ctx.dataNodes) {
             const nodesToFavorite = ctx.dataNodes.filter((item) => !item.data.userFavorite);
 
-            const nodesByServerId = nodesToFavorite.reduce((acc, node) => {
+            const nodesByServerId = nodesToFavorite.reduce(
-                if (!acc[node.data.serverId]) {
+                (acc, node) => {
-                    acc[node.data.serverId] = [];
+                    if (!acc[node.data.serverId]) {
-                }
+                        acc[node.data.serverId] = [];
-                acc[node.data.serverId].push(node);
+                    }
-                return acc;
+                    acc[node.data.serverId].push(node);
-            }, {} as Record<string, RowNode<any>[]>);
+                    return acc;
+                },
+                {} as Record<string, RowNode<any>[]>,
+            );
 
             for (const serverId of Object.keys(nodesByServerId)) {
                 const nodes = nodesByServerId[serverId];
@@ -324,13 +327,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
             }
         } else {
             const itemsToFavorite = ctx.data.filter((item) => !item.userFavorite);
-            const itemsByServerId = (itemsToFavorite as any[]).reduce((acc, item) => {
+            const itemsByServerId = (itemsToFavorite as any[]).reduce(
-                if (!acc[item.serverId]) {
+                (acc, item) => {
-                    acc[item.serverId] = [];
+                    if (!acc[item.serverId]) {
-                }
+                        acc[item.serverId] = [];
-                acc[item.serverId].push(item);
+                    }
-                return acc;
+                    acc[item.serverId].push(item);
-            }, {} as Record<string, AnyLibraryItems>);
+                    return acc;
+                },
+                {} as Record<string, AnyLibraryItems>,
+            );
 
             for (const serverId of Object.keys(itemsByServerId)) {
                 const items = itemsByServerId[serverId];
@@ -361,13 +367,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
 
         if (ctx.dataNodes) {
             const nodesToUnfavorite = ctx.dataNodes.filter((item) => item.data.userFavorite);
-            const nodesByServerId = nodesToUnfavorite.reduce((acc, node) => {
+            const nodesByServerId = nodesToUnfavorite.reduce(
-                if (!acc[node.data.serverId]) {
+                (acc, node) => {
-                    acc[node.data.serverId] = [];
+                    if (!acc[node.data.serverId]) {
-                }
+                        acc[node.data.serverId] = [];
-                acc[node.data.serverId].push(node);
+                    }
-                return acc;
+                    acc[node.data.serverId].push(node);
-            }, {} as Record<string, RowNode<any>[]>);
+                    return acc;
+                },
+                {} as Record<string, RowNode<any>[]>,
+            );
 
             for (const serverId of Object.keys(nodesByServerId)) {
                 const idsToUnfavorite = nodesByServerId[serverId].map((node) => node.data.id);
@@ -390,13 +399,16 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
             }
         } else {
             const itemsToUnfavorite = ctx.data.filter((item) => item.userFavorite);
-            const itemsByServerId = (itemsToUnfavorite as any[]).reduce((acc, item) => {
+            const itemsByServerId = (itemsToUnfavorite as any[]).reduce(
-                if (!acc[item.serverId]) {
+                (acc, item) => {
-                    acc[item.serverId] = [];
+                    if (!acc[item.serverId]) {
-                }
+                        acc[item.serverId] = [];
-                acc[item.serverId].push(item);
+                    }
-                return acc;
+                    acc[item.serverId].push(item);
-            }, {} as Record<string, AnyLibraryItems>);
+                    return acc;
+                },
+                {} as Record<string, AnyLibraryItems>,
+            );
 
             for (const serverId of Object.keys(itemsByServerId)) {
                 const idsToUnfavorite = itemsByServerId[serverId].map(

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

@@ -17,7 +17,9 @@ const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSiz
     text-align: ${(props) => props.$alignment};
     opacity: 0.5;
 
-    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transition:
+        opacity 0.3s ease-in-out,
+        transform 0.3s ease-in-out;
 
     &.active {
         opacity: 1;

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

@@ -25,8 +25,8 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
     height: 100%;
     padding: 10vh 0 50vh;
     overflow: scroll;
-    transform: translateY(-2rem);
     word-break: break-word;
+    transform: translateY(-2rem);
 
     -webkit-mask-image: linear-gradient(
         180deg,
@@ -180,9 +180,12 @@ export const SynchronizedLyrics = ({
 
                 const elapsed = performance.now() - start;
 
-                lyricTimer.current = setTimeout(() => {
+                lyricTimer.current = setTimeout(
-                    setCurrentLyric(nextTime, nextEpoch, index + 1);
+                    () => {
-                }, nextTime - timeInMs - elapsed);
+                        setCurrentLyric(nextTime, nextEpoch, index + 1);
+                    },
+                    nextTime - timeInMs - elapsed,
+                );
             }
         },
         [],

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

@@ -271,14 +271,14 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
                                           postProcess: 'sentenceCase',
                                       })
                                     : repeat === PlayerRepeat.ALL
-                                    ? t('player.repeat', {
+                                      ? t('player.repeat', {
-                                          context: 'all',
+                                            context: 'all',
-                                          postProcess: 'sentenceCase',
+                                            postProcess: 'sentenceCase',
-                                      })
+                                        })
-                                    : t('player.repeat', {
+                                      : t('player.repeat', {
-                                          context: 'one',
+                                            context: 'one',
-                                          postProcess: 'sentenceCase',
+                                            postProcess: 'sentenceCase',
-                                      })
+                                        })
                             }`,
                         }}
                         variant="tertiary"

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

@@ -116,8 +116,8 @@ const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
         variant === 'main'
             ? ButtonMainVariant
             : variant === 'secondary'
-            ? ButtonSecondaryVariant
+              ? ButtonSecondaryVariant
-            : ButtonTertiaryVariant};
+              : ButtonTertiaryVariant};
 `;
 
 export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(

src/renderer/features/search/components/command-palette.tsx

@@ -18,7 +18,7 @@ import { LibraryItem } from '/@/renderer/api/types';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 
 interface CommandPaletteProps {
-    modalProps: typeof useDisclosure['arguments'];
+    modalProps: (typeof useDisclosure)['arguments'];
 }
 
 const CustomModal = styled(Modal)`

src/renderer/features/settings/components/general/theme-settings.tsx

@@ -34,8 +34,8 @@ export const ThemeSettings = () => {
                                 e.currentTarget.checked
                                     ? 'system'
                                     : settings.theme === AppTheme.DEFAULT_DARK
-                                    ? 'dark'
+                                      ? 'dark'
-                                    : 'light',
+                                      : 'light',
                             );
                         }
                     }}

src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx

@@ -200,18 +200,21 @@ export const HotkeyManagerSettings = () => {
     );
 
     const duplicateHotkeyMap = useMemo(() => {
-        const countPerHotkey = Object.values(bindings).reduce((acc, key) => {
+        const countPerHotkey = Object.values(bindings).reduce(
-            const hotkey = key.hotkey;
+            (acc, key) => {
-            if (!hotkey) return acc;
+                const hotkey = key.hotkey;
+                if (!hotkey) return acc;
 
-            if (acc[hotkey]) {
+                if (acc[hotkey]) {
-                acc[hotkey] += 1;
+                    acc[hotkey] += 1;
-            } else {
+                } else {
-                acc[hotkey] = 1;
+                    acc[hotkey] = 1;
-            }
+                }
 
-            return acc;
+                return acc;
-        }, {} as Record<string, number>);
+            },
+            {} as Record<string, number>,
+        );
 
         const duplicateKeys = Object.keys(countPerHotkey).filter((key) => countPerHotkey[key] > 1);
 

src/renderer/features/songs/routes/song-list-route.tsx

@@ -138,8 +138,8 @@ const TrackListRoute = () => {
     const title = artist
         ? t('page.trackList.artistTracks', { artist })
         : genreId
-        ? t('page.trackList.genreTracks', { genre: titleCase(genreTitle) })
+          ? t('page.trackList.genreTracks', { genre: titleCase(genreTitle) })
-        : undefined;
+          : undefined;
 
     return (
         <AnimatedPage>

src/renderer/store/player.store.ts

@@ -411,8 +411,8 @@ export const usePlayerStore = create<PlayerSlice>()(
                                 currentPlayer === 1
                                     ? queue[currentIndex]
                                     : nextSongIndex !== undefined
-                                    ? queue[nextSongIndex]
+                                      ? queue[nextSongIndex]
-                                    : undefined;
+                                      : undefined;
 
                             player2 =
                                 currentPlayer === 1