fix all imports for new structure

src/i18n/i18next-parser.config.js

@@ -5,7 +5,7 @@ module.exports = {
     createOldCatalogs: true,
     customValueTemplate: null,
     defaultNamespace: 'translation',
-    defaultValue: function (locale, namespace, key, value) {
+    defaultValue: function (locale, namespace, key) {
         return key;
     },
     failOnUpdate: false,

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

@@ -1,6 +1,6 @@
 import { ipcMain } from 'electron';
 
-import { store } from '../settings/index';
+import { store } from '../settings';
 import {
     getLyricsBySongId as getGenius,
     query as queryGenius,
@@ -17,6 +17,8 @@ import {
     getSearchResults as searchNetease,
 } from './netease';
 
+import { Song } from '/@/shared/types/domain-types';
+
 export enum LyricSource {
     GENIUS = 'Genius',
     LRCLIB = 'lrclib.net',
@@ -94,10 +96,10 @@ const MAX_CACHED_ITEMS = 10;
 
 const lyricCache = new Map<string, CachedLyrics>();
 
-const getRemoteLyrics = async (song: any) => {
+const getRemoteLyrics = async (song: Song) => {
     const sources = store.get('lyrics', []) as LyricSource[];
 
-    const cached = lyricCache.get(song.id);
+    const cached = lyricCache.get(song.id.toString());
 
     if (cached) {
         for (const source of sources) {
@@ -106,16 +108,16 @@ const getRemoteLyrics = async (song: any) => {
         }
     }
 
-    let lyricsFromSource = null;
+    let lyricsFromSource: InternetProviderLyricResponse | null = null;
 
     for (const source of sources) {
         const params = {
             album: song.album || song.name,
-            artist: song.artistName,
+            artist: song.artists[0].name,
             duration: song.duration / 1000.0,
             name: song.name,
         };
-        const response = await FETCHERS[source](params);
+        const response = await FETCHERS[source](params as unknown as LyricSearchQuery);
 
         if (response) {
             const newResult = cached
@@ -127,10 +129,12 @@ const getRemoteLyrics = async (song: any) => {
 
             if (lyricCache.size === MAX_CACHED_ITEMS && cached === undefined) {
                 const toRemove = lyricCache.keys().next().value;
-                lyricCache.delete(toRemove);
+                if (toRemove) {
+                    lyricCache.delete(toRemove);
+                }
             }
 
-            lyricCache.set(song.id, newResult);
+            lyricCache.set(song.id.toString(), newResult);
 
             lyricsFromSource = response;
             break;

src/main/features/core/lyrics/netease.ts

@@ -13,37 +13,6 @@ const LYRICS_URL = 'https://music.163.com/api/song/lyric';
 
 // Adapted from https://github.com/NyaomiDEV/Sunamu/blob/master/src/main/lyricproviders/netease.ts
 
-export interface Album {
-    artist: Artist;
-    copyrightId: number;
-    id: number;
-    mark: number;
-    name: string;
-    picId: number;
-    publishTime: number;
-    size: number;
-    status: number;
-    transNames?: string[];
-}
-
-export interface Artist {
-    albumSize: number;
-    alias: any[];
-    fansGroup: null;
-    id: number;
-    img1v1: number;
-    img1v1Url: string;
-    name: string;
-    picId: number;
-    picUrl: null;
-    trans: null;
-}
-
-export interface NetEaseResponse {
-    code: number;
-    result: Result;
-}
-
 export interface Result {
     hasMore: boolean;
     songCount: number;
@@ -68,6 +37,37 @@ export interface Song {
     transNames?: string[];
 }
 
+interface Album {
+    artist: Artist;
+    copyrightId: number;
+    id: number;
+    mark: number;
+    name: string;
+    picId: number;
+    publishTime: number;
+    size: number;
+    status: number;
+    transNames?: string[];
+}
+
+interface Artist {
+    albumSize: number;
+    alias: any[];
+    fansGroup: null;
+    id: number;
+    img1v1: number;
+    img1v1Url: string;
+    name: string;
+    picId: number;
+    picUrl: null;
+    trans: null;
+}
+
+interface NetEaseResponse {
+    code: number;
+    result: Result;
+}
+
 export async function getLyricsBySongId(songId: string): Promise<null | string> {
     let result: AxiosResponse<any, any>;
     try {

src/main/features/core/lyrics/shared.ts

@@ -3,7 +3,7 @@ import Fuse from 'fuse.js';
 import {
     InternetProviderLyricSearchResponse,
     LyricSearchQuery,
-} from '../../../../renderer/api/types';
+} from '/@/shared/types/domain-types';
 
 export const orderSearchResults = (args: {
     params: LyricSearchQuery;

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

@@ -330,7 +330,8 @@ ipcMain.on('player-set-queue', async (_event, current?: string, next?: string, p
         if (current) {
             try {
                 await getMpvInstance()?.load(current, 'replace');
-            } catch (error) {
+            } catch (error: any | NodeMpvError) {
+                mpvLog({ action: `Failed to load current song` }, error);
                 await getMpvInstance()?.play();
             }
 

src/main/features/core/player/media-keys.ts

@@ -1,4 +1,3 @@
-/* eslint-disable promise/always-return */
 import { BrowserWindow, globalShortcut, systemPreferences } from 'electron';
 
 import { isMacOS } from '../../../utils';

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

@@ -7,16 +7,25 @@ import { join } from 'path';
 import { WebSocket, WebSocketServer, Server as WsServer } from 'ws';
 import { deflate, gzip } from 'zlib';
 
-import { getMainWindow } from '../../..';
-import { isLinux } from '../../../utils';
 import manifest from './manifest.json';
 
+import { getMainWindow } from '/@/main/index';
+import { isLinux } from '/@/main/utils';
+import { QueueSong } from '/@/shared/types/domain-types';
+import { ClientEvent, ServerEvent } from '/@/shared/types/remote-types';
+import { PlayerRepeat, PlayerStatus, SongState } from '/@/shared/types/types';
+
 let mprisPlayer: any | undefined;
 
-if (isLinux()) {
-    mprisPlayer = require('../../linux/mpris').mprisPlayer;
+async function initMpris() {
+    if (isLinux()) {
+        const mpris = await import('../../linux/mpris');
+        mprisPlayer = mpris.mprisPlayer;
+    }
 }
 
+initMpris();
+
 interface MimeType {
     css: string;
     html: string;
@@ -630,8 +639,8 @@ if (mprisPlayer) {
     mprisPlayer.on('loopStatus', (event: string) => {
         const repeat = event === 'Playlist' ? 'all' : event === 'Track' ? 'one' : 'none';
 
-        currentState.repeat = repeat;
-        broadcast({ data: repeat, event: 'repeat' });
+        currentState.repeat = repeat as PlayerRepeat;
+        broadcast({ data: repeat, event: 'repeat' } as ServerEvent);
     });
 
     mprisPlayer.on('shuffle', (shuffle: boolean) => {

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

@@ -1,4 +1,4 @@
-import type { TitleTheme } from '/@/renderer/types';
+import type { TitleTheme } from '/@/shared/types/types';
 
 import { ipcMain, nativeTheme, safeStorage } from 'electron';
 import Store from 'electron-store';

src/main/features/index.ts

@@ -1,3 +1,2 @@
 import './core';
-
-// require(`./${process.platform}`)
+import(`./${process.platform}`);

src/main/features/linux/mpris.ts

@@ -1,10 +1,9 @@
 import { ipcMain } from 'electron';
 import Player from 'mpris-service';
 
-import { PlayerRepeat, PlayerStatus } from '../../../renderer/types';
-import { getMainWindow } from '../../main';
-
-import { QueueSong } from '/@/renderer/api/types';
+import { getMainWindow } from '/@/main/index';
+import { QueueSong } from '/@/shared/types/domain-types';
+import { PlayerRepeat, PlayerStatus } from '/@/shared/types/types';
 
 const mprisPlayer = Player({
     identity: 'Feishin',

src/main/features/win32/index.ts

@@ -1,3 +0,0 @@
-// Dummy file to satisfy the build system
-
-export {};

src/main/index.ts

@@ -1,5 +1,4 @@
-import { electronApp, is, optimizer } from '@electron-toolkit/utils';
-import { constants } from 'buffer';
+import { is } from '@electron-toolkit/utils';
 import {
     app,
     BrowserWindow,
@@ -19,7 +18,7 @@ import {
 import electronLocalShortcut from 'electron-localshortcut';
 import log from 'electron-log/main';
 import { autoUpdater } from 'electron-updater';
-import { access, readFile, writeFile } from 'fs';
+import { access, constants, readFile, writeFile } from 'fs';
 import path, { join } from 'path';
 import { deflate, inflate } from 'zlib';
 
@@ -36,6 +35,8 @@ import {
 } from './utils';
 import './features';
 
+import { TitleTheme } from '/@/shared/types/types';
+
 export default class AppUpdater {
     constructor() {
         log.transports.file.level = 'info';
@@ -66,27 +67,31 @@ let exitFromTray = false;
 let forceQuit = false;
 
 if (process.env.NODE_ENV === 'production') {
-    const sourceMapSupport = require('source-map-support');
-    sourceMapSupport.install();
+    import('source-map-support').then((sourceMapSupport) => {
+        sourceMapSupport.install();
+    });
 }
 
 const isDevelopment = process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
 
 if (isDevelopment) {
-    require('electron-debug')();
+    import('electron-debug').then((electronDebug) => {
+        electronDebug.default();
+    });
 }
 
 const installExtensions = async () => {
-    const installer = require('electron-devtools-installer');
-    const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
-    const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
+    import('electron-devtools-installer').then((installer) => {
+        const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
+        const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];
 
-    return installer
-        .default(
-            extensions.map((name) => installer[name]),
-            forceDownload,
-        )
-        .catch(console.log);
+        return installer
+            .default(
+                extensions.map((name) => installer[name]),
+                forceDownload,
+            )
+            .catch(console.log);
+    });
 };
 
 const RESOURCES_PATH = app.isPackaged
@@ -393,7 +398,7 @@ async function createWindow(first = true): Promise<void> {
         mainWindow = null;
     });
 
-    const saved = false;
+    let saved = false;
 
     mainWindow.on('close', (event) => {
         store.set('bounds', mainWindow?.getNormalBounds());
@@ -446,7 +451,7 @@ async function createWindow(first = true): Promise<void> {
         }
     });
 
-    mainWindow.on('minimize', (event: any) => {
+    (mainWindow as any).on('minimize', (event: any) => {
         if (store.get('window_minimize_to_tray') === true) {
             event.preventDefault();
             mainWindow?.hide();
@@ -632,22 +637,22 @@ if (!singleInstance) {
 
     app.whenReady()
         .then(() => {
-            //   protocol.handle('feishin', async (request) => {
-            //     const filePath = `file://${request.url.slice('feishin://'.length)}`
-            //     const response = await net.fetch(filePath)
-            //     const contentType = response.headers.get('content-type')
+            protocol.handle('feishin', async (request) => {
+                const filePath = `file://${request.url.slice('feishin://'.length)}`;
+                const response = await net.fetch(filePath);
+                const contentType = response.headers.get('content-type');
 
-            //     if (!contentType || !FONT_HEADERS.includes(contentType)) {
-            //       getMainWindow()?.webContents.send('custom-font-error', filePath)
+                if (!contentType || !FONT_HEADERS.includes(contentType)) {
+                    getMainWindow()?.webContents.send('custom-font-error', filePath);
 
-            //       return new Response(null, {
-            //         status: 403,
-            //         statusText: 'Forbidden'
-            //       })
-            //     }
+                    return new Response(null, {
+                        status: 403,
+                        statusText: 'Forbidden',
+                    });
+                }
 
-            //     return response
-            //   })
+                return response;
+            });
 
             createWindow();
             if (store.get('window_enable_tray', true)) {

src/preload/index.d.ts

@@ -6,5 +6,10 @@ declare global {
     interface Window {
         api: PreloadApi;
         electron: ElectronAPI;
+        queryLocalFonts?: () => Promise<Font[]>;
+        SERVER_LOCK?: boolean;
+        SERVER_NAME?: string;
+        SERVER_TYPE?: ServerType;
+        SERVER_URL?: string;
     }
 }

src/preload/local-settings.ts

@@ -1,6 +1,8 @@
 import { ipcRenderer, IpcRendererEvent, webFrame } from 'electron';
 import Store from 'electron-store';
 
+import { TitleTheme } from '/@/shared/types/types';
+
 const store = new Store();
 
 const set = (

src/preload/lyrics.ts

@@ -7,6 +7,8 @@ import {
     LyricSource,
 } from '../main/features/core/lyrics';
 
+import { QueueSong } from '/@/shared/types/domain-types';
+
 const getRemoteLyricsBySong = (song: QueueSong) => {
     const result = ipcRenderer.invoke('lyric-by-song', song);
     return result;

src/preload/mpris.ts

@@ -1,5 +1,7 @@
 import { ipcRenderer, IpcRendererEvent } from 'electron';
 
+import { PlayerRepeat } from '/@/shared/types/types';
+
 const updatePosition = (timeSec: number) => {
     ipcRenderer.send('mpris-update-position', timeSec);
 };

src/preload/mpv-player.ts

@@ -1,5 +1,7 @@
 import { ipcRenderer, IpcRendererEvent } from 'electron';
 
+import { PlayerData } from '/@/shared/types/domain-types';
+
 const initialize = (data: { extraParameters?: string[]; properties?: Record<string, any> }) => {
     return ipcRenderer.invoke('player-initialize', data);
 };

src/preload/remote.ts

@@ -1,5 +1,8 @@
 import { ipcRenderer, IpcRendererEvent } from 'electron';
 
+import { QueueSong } from '/@/shared/types/domain-types';
+import { PlayerStatus } from '/@/shared/types/types';
+
 const requestFavorite = (
     cb: (
         event: IpcRendererEvent,

src/remote/app.tsx

@@ -1,8 +1,10 @@
-import { useEffect } from 'react';
 import { MantineProvider } from '@mantine/core';
+import { useEffect } from 'react';
+
 import './styles/global.scss';
-import { useIsDark, useReconnect } from '/@/remote/store';
+
 import { Shell } from '/@/remote/components/shell';
+import { useIsDark, useReconnect } from '/@/remote/store';
 
 export const App = () => {
     const isDark = useIsDark();
@@ -14,8 +16,6 @@ export const App = () => {
 
     return (
         <MantineProvider
-            withGlobalStyles
-            withNormalizeCSS
             theme={{
                 colorScheme: isDark ? 'dark' : 'light',
                 components: {
@@ -77,6 +77,8 @@ export const App = () => {
                     xs: '0rem',
                 },
             }}
+            withGlobalStyles
+            withNormalizeCSS
         >
             <Shell />
         </MantineProvider>

src/remote/components/buttons/image-button.tsx

@@ -1,4 +1,5 @@
 import { CiImageOff, CiImageOn } from 'react-icons/ci';
+
 import { RemoteButton } from '/@/remote/components/buttons/remote-button';
 import { useShowImage, useToggleShowImage } from '/@/remote/store';
 
@@ -9,10 +10,10 @@ export const ImageButton = () => {
     return (
         <RemoteButton
             mr={5}
+            onClick={() => toggleImage()}
             size="xl"
             tooltip={showImage ? 'Hide Image' : 'Show Image'}
             variant="default"
-            onClick={() => toggleImage()}
         >
             {showImage ? <CiImageOff size={30} /> : <CiImageOn size={30} />}
         </RemoteButton>

src/remote/components/buttons/reconnect-button.tsx

@@ -1,6 +1,7 @@
+import { RiRestartLine } from 'react-icons/ri';
+
 import { RemoteButton } from '/@/remote/components/buttons/remote-button';
 import { useConnected, useReconnect } from '/@/remote/store';
-import { RiRestartLine } from 'react-icons/ri';
 
 export const ReconnectButton = () => {
     const connected = useConnected();
@@ -10,10 +11,10 @@ export const ReconnectButton = () => {
         <RemoteButton
             $active={!connected}
             mr={5}
+            onClick={() => reconnect()}
             size="xl"
             tooltip={connected ? 'Reconnect' : 'Not connected. Reconnect.'}
             variant="default"
-            onClick={() => reconnect()}
         >
             <RiRestartLine size={30} />
         </RemoteButton>

src/remote/components/buttons/remote-button.tsx

@@ -1,8 +1,11 @@
-import { MouseEvent, ReactNode, Ref, forwardRef } from 'react';
-import { Button, type ButtonProps as MantineButtonProps } from '@mantine/core';
-import { Tooltip } from '/@/renderer/components/tooltip';
+import { Button, type ButtonProps as MantineButtonProps, Tooltip } from '@mantine/core';
+import { forwardRef, MouseEvent, ReactNode, Ref } from 'react';
 import styled from 'styled-components';
 
+export interface ButtonProps extends StyledButtonProps {
+    tooltip: string;
+}
+
 interface StyledButtonProps extends MantineButtonProps {
     $active?: boolean;
     children: ReactNode;
@@ -11,10 +14,6 @@ interface StyledButtonProps extends MantineButtonProps {
     ref: Ref<HTMLButtonElement>;
 }
 
-export interface ButtonProps extends StyledButtonProps {
-    tooltip: string;
-}
-
 const StyledButton = styled(Button)<StyledButtonProps>`
     svg {
         display: flex;
@@ -35,12 +34,12 @@ const StyledButton = styled(Button)<StyledButtonProps>`
     }
 `;
 
-export const RemoteButton = forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ children, tooltip, ...props }: ButtonProps, ref) => {
+export const RemoteButton = forwardRef<HTMLButtonElement, any>(
+    ({ children, tooltip, ...props }: any, ref) => {
         return (
             <Tooltip
-                withinPortal
                 label={tooltip}
+                withinPortal
             >
                 <StyledButton
                     {...props}
@@ -52,9 +51,3 @@ export const RemoteButton = forwardRef<HTMLButtonElement, ButtonProps>(
         );
     },
 );
-
-RemoteButton.defaultProps = {
-    $active: false,
-    onClick: undefined,
-    onMouseDown: undefined,
-};

src/remote/components/buttons/theme-button.tsx

@@ -1,8 +1,9 @@
-import { useIsDark, useToggleDark } from '/@/remote/store';
-import { RiMoonLine, RiSunLine } from 'react-icons/ri';
-import { RemoteButton } from '/@/remote/components/buttons/remote-button';
-import { AppTheme } from '/@/renderer/themes/types';
 import { useEffect } from 'react';
+import { RiMoonLine, RiSunLine } from 'react-icons/ri';
+
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import { useIsDark, useToggleDark } from '/@/remote/store';
+import { AppTheme } from '/@/shared/types/domain-types';
 
 export const ThemeButton = () => {
     const isDark = useIsDark();
@@ -16,10 +17,10 @@ export const ThemeButton = () => {
     return (
         <RemoteButton
             mr={5}
+            onClick={() => toggleDark()}
             size="xl"
             tooltip="Toggle Theme"
             variant="default"
-            onClick={() => toggleDark()}
         >
             {isDark ? <RiSunLine size={30} /> : <RiMoonLine size={30} />}
         </RemoteButton>

src/remote/components/remote-container.tsx

@@ -1,9 +1,7 @@
-import { useCallback } from 'react';
-import { Group, Image, Text, Title } from '@mantine/core';
-import { useInfo, useSend, useShowImage } from '/@/remote/store';
-import { RemoteButton } from '/@/remote/components/buttons/remote-button';
+import { Group, Image, Rating, Text, Title, Tooltip } from '@mantine/core';
 import formatDuration from 'format-duration';
 import debounce from 'lodash/debounce';
+import { useCallback } from 'react';
 import {
     RiHeartLine,
     RiPauseFill,
@@ -15,10 +13,11 @@ import {
     RiSkipForwardFill,
     RiVolumeUpFill,
 } from 'react-icons/ri';
-import { PlayerRepeat, PlayerStatus } from '/@/renderer/types';
+
+import { RemoteButton } from '/@/remote/components/buttons/remote-button';
 import { WrapperSlider } from '/@/remote/components/wrapped-slider';
-import { Tooltip } from '/@/renderer/components/tooltip';
-import { Rating } from '/@/renderer/components/rating';
+import { useInfo, useSend, useShowImage } from '/@/remote/store';
+import { PlayerRepeat, PlayerStatus } from '/@/shared/types/types';
 
 export const RemoteContainer = () => {
     const { position, repeat, shuffle, song, status, volume } = useInfo();
@@ -62,16 +61,14 @@ export const RemoteContainer = () => {
             >
                 <RemoteButton
                     disabled={!id}
+                    onClick={() => send({ event: 'previous' })}
                     tooltip="Previous track"
                     variant="default"
-                    onClick={() => send({ event: 'previous' })}
                 >
                     <RiSkipBackFill size={25} />
                 </RemoteButton>
                 <RemoteButton
                     disabled={!id}
-                    tooltip={id && status === PlayerStatus.PLAYING ? 'Pause' : 'Play'}
-                    variant="default"
                     onClick={() => {
                         if (status === PlayerStatus.PLAYING) {
                             send({ event: 'pause' });
@@ -79,6 +76,8 @@ export const RemoteContainer = () => {
                             send({ event: 'play' });
                         }
                     }}
+                    tooltip={id && status === PlayerStatus.PLAYING ? 'Pause' : 'Play'}
+                    variant="default"
                 >
                     {id && status === PlayerStatus.PLAYING ? (
                         <RiPauseFill size={25} />
@@ -88,9 +87,9 @@ export const RemoteContainer = () => {
                 </RemoteButton>
                 <RemoteButton
                     disabled={!id}
+                    onClick={() => send({ event: 'next' })}
                     tooltip="Next track"
                     variant="default"
-                    onClick={() => send({ event: 'next' })}
                 >
                     <RiSkipForwardFill size={25} />
                 </RemoteButton>
@@ -101,14 +100,15 @@ export const RemoteContainer = () => {
             >
                 <RemoteButton
                     $active={shuffle || false}
+                    onClick={() => send({ event: 'shuffle' })}
                     tooltip={shuffle ? 'Shuffle tracks' : 'Shuffle disabled'}
                     variant="default"
-                    onClick={() => send({ event: 'shuffle' })}
                 >
                     <RiShuffleFill size={25} />
                 </RemoteButton>
                 <RemoteButton
                     $active={repeat !== undefined && repeat !== PlayerRepeat.NONE}
+                    onClick={() => send({ event: 'repeat' })}
                     tooltip={`Repeat ${
                         repeat === PlayerRepeat.ONE
                             ? 'One'
@@ -117,7 +117,6 @@ export const RemoteContainer = () => {
                               : 'none'
                     }`}
                     variant="default"
-                    onClick={() => send({ event: 'repeat' })}
                 >
                     {repeat === undefined || repeat === PlayerRepeat.ONE ? (
                         <RiRepeatOneLine size={25} />
@@ -128,13 +127,13 @@ export const RemoteContainer = () => {
                 <RemoteButton
                     $active={song?.userFavorite}
                     disabled={!id}
-                    tooltip={song?.userFavorite ? 'Unfavorite' : 'Favorite'}
-                    variant="default"
                     onClick={() => {
                         if (!id) return;
 
                         send({ event: 'favorite', favorite: !song.userFavorite, id });
                     }}
+                    tooltip={song?.userFavorite ? 'Unfavorite' : 'Favorite'}
+                    variant="default"
                 >
                     <RiHeartLine size={25} />
                 </RemoteButton>
@@ -145,10 +144,10 @@ export const RemoteContainer = () => {
                             openDelay={1000}
                         >
                             <Rating
-                                sx={{ margin: 'auto' }}
-                                value={song.userRating ?? 0}
                                 onChange={debouncedSetRating}
                                 onDoubleClick={() => debouncedSetRating(0)}
+                                sx={{ margin: 'auto' }}
+                                value={song.userRating ?? 0}
                             />
                         </Tooltip>
                     </div>
@@ -159,14 +158,15 @@ export const RemoteContainer = () => {
                     label={(value) => formatDuration(value * 1e3)}
                     leftLabel={formatDuration(position * 1e3)}
                     max={song.duration / 1e3}
+                    onChangeEnd={(e) => send({ event: 'position', position: e })}
                     rightLabel={formatDuration(song.duration)}
                     value={position}
-                    onChangeEnd={(e) => send({ event: 'position', position: e })}
                 />
             )}
             <WrapperSlider
                 leftLabel={<RiVolumeUpFill size={20} />}
                 max={100}
+                onChangeEnd={(e) => send({ event: 'volume', volume: e })}
                 rightLabel={
                     <Text
                         size="xs"
@@ -176,12 +176,11 @@ export const RemoteContainer = () => {
                     </Text>
                 }
                 value={volume ?? 0}
-                onChangeEnd={(e) => send({ event: 'volume', volume: e })}
             />
             {showImage && (
                 <Image
-                    src={song?.imageUrl?.replaceAll(/&(size|width|height=\d+)/g, '')}
                     onError={() => send({ event: 'proxy' })}
+                    src={song?.imageUrl?.replaceAll(/&(size|width|height=\d+)/g, '')}
                 />
             )}
         </>

src/remote/components/shell.tsx

@@ -9,10 +9,11 @@ import {
     Skeleton,
     Title,
 } from '@mantine/core';
-import { ThemeButton } from '/@/remote/components/buttons/theme-button';
+
 import { ImageButton } from '/@/remote/components/buttons/image-button';
-import { RemoteContainer } from '/@/remote/components/remote-container';
 import { ReconnectButton } from '/@/remote/components/buttons/reconnect-button';
+import { ThemeButton } from '/@/remote/components/buttons/theme-button';
+import { RemoteContainer } from '/@/remote/components/remote-container';
 import { useConnected } from '/@/remote/store';
 
 export const Shell = () => {

src/remote/components/wrapped-slider.tsx

@@ -1,7 +1,6 @@
-import { useState, ReactNode } from 'react';
-import { SliderProps } from '@mantine/core';
+import { rem, Slider, SliderProps } from '@mantine/core';
+import { ReactNode, useState } from 'react';
 import styled from 'styled-components';
-import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
 const SliderContainer = styled.div`
     display: flex;
@@ -25,6 +24,54 @@ const SliderWrapper = styled.div`
     height: 100%;
 `;
 
+const PlayerbarSlider = ({ ...props }: SliderProps) => {
+    return (
+        <Slider
+            styles={{
+                bar: {
+                    backgroundColor: 'var(--playerbar-slider-track-progress-bg)',
+                    transition: 'background-color 0.2s ease',
+                },
+                label: {
+                    backgroundColor: 'var(--tooltip-bg)',
+                    color: 'var(--tooltip-fg)',
+                    fontSize: '1.1rem',
+                    fontWeight: 600,
+                    padding: '0 1rem',
+                },
+                root: {
+                    '&:hover': {
+                        '& .mantine-Slider-bar': {
+                            backgroundColor: 'var(--primary-color)',
+                        },
+                        '& .mantine-Slider-thumb': {
+                            opacity: 1,
+                        },
+                    },
+                },
+                thumb: {
+                    backgroundColor: 'var(--slider-thumb-bg)',
+                    borderColor: 'var(--primary-color)',
+                    borderWidth: rem(1),
+                    height: '1rem',
+                    opacity: 0,
+                    width: '1rem',
+                },
+                track: {
+                    '&::before': {
+                        backgroundColor: 'var(--playerbar-slider-track-bg)',
+                        right: 'calc(0.1rem * -1)',
+                    },
+                },
+            }}
+            {...props}
+            onClick={(e) => {
+                e?.stopPropagation();
+            }}
+        />
+    );
+};
+
 export interface WrappedProps extends Omit<SliderProps, 'onChangeEnd'> {
     leftLabel?: ReactNode;
     onChangeEnd: (value: number) => void;
@@ -43,9 +90,6 @@ export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
                 <PlayerbarSlider
                     {...props}
                     min={0}
-                    size={6}
-                    value={!isSeeking ? (value ?? 0) : seek}
-                    w="100%"
                     onChange={(e) => {
                         setIsSeeking(true);
                         setSeek(e);
@@ -54,6 +98,9 @@ export const WrapperSlider = ({ leftLabel, rightLabel, value, ...props }: Wrappe
                         props.onChangeEnd(e);
                         setIsSeeking(false);
                     }}
+                    size={6}
+                    value={!isSeeking ? (value ?? 0) : seek}
+                    w="100%"
                 />
             </SliderWrapper>
             {rightLabel && <SliderValueWrapper $position="right">{rightLabel}</SliderValueWrapper>}

src/remote/index.tsx

@@ -1,5 +1,6 @@
 import { Notifications } from '@mantine/notifications';
 import { createRoot } from 'react-dom/client';
+
 import { App } from '/@/remote/app';
 
 const container = document.getElementById('root')! as HTMLElement;

src/remote/service-worker.ts

@@ -1,10 +1,9 @@
 /// <reference lib="WebWorker" />
 
 export type {};
-// eslint-disable-next-line no-undef
+
 declare const self: ServiceWorkerGlobalScope;
 
-// eslint-disable-next-line no-restricted-globals
 const url = new URL(location.toString());
 const version = url.searchParams.get('version');
 const prod = url.searchParams.get('prod') === 'true';

src/remote/store/index.ts

@@ -1,13 +1,20 @@
-import { hideNotification, showNotification } from '@mantine/notifications';
 import type { NotificationProps as MantineNotificationProps } from '@mantine/notifications';
+
+import { hideNotification, showNotification } from '@mantine/notifications';
 import merge from 'lodash/merge';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
-import type { ClientEvent, ServerEvent, SongUpdateSocket } from '/@/remote/types';
 
-interface StatefulWebSocket extends WebSocket {
-    natural: boolean;
+import { ClientEvent, ServerEvent, SongUpdateSocket } from '/@/shared/types/remote-types';
+
+export interface SettingsSlice extends SettingsState {
+    actions: {
+        reconnect: () => void;
+        send: (data: ClientEvent) => void;
+        toggleIsDark: () => void;
+        toggleShowImage: () => void;
+    };
 }
 
 interface SettingsState {
@@ -18,13 +25,8 @@ interface SettingsState {
     socket?: StatefulWebSocket;
 }
 
-export interface SettingsSlice extends SettingsState {
-    actions: {
-        reconnect: () => void;
-        send: (data: ClientEvent) => void;
-        toggleIsDark: () => void;
-        toggleShowImage: () => void;
-    };
+interface StatefulWebSocket extends WebSocket {
+    natural: boolean;
 }
 
 const initialState: SettingsState = {
@@ -106,19 +108,18 @@ export const useRemoteStore = create<SettingsSlice>()(
                             const credentials = await fetch('/credentials');
                             authHeader = await credentials.text();
                         } catch (error) {
-                            console.error('Failed to get credentials');
+                            console.error('Failed to get credentials', error);
                         }
 
                         set((state) => {
                             const socket = new WebSocket(
-                                // eslint-disable-next-line no-restricted-globals
                                 location.href.replace('http', 'ws'),
                             ) as StatefulWebSocket;
 
                             socket.natural = false;
 
                             socket.addEventListener('message', (message) => {
-                                const { event, data } = JSON.parse(message.data) as ServerEvent;
+                                const { data, event } = JSON.parse(message.data) as ServerEvent;
 
                                 switch (event) {
                                     case 'error': {
@@ -207,7 +208,6 @@ export const useRemoteStore = create<SettingsSlice>()(
 
                             socket.addEventListener('close', (reason) => {
                                 if (reason.code === 4002 || reason.code === 4003) {
-                                    // eslint-disable-next-line no-restricted-globals
                                     location.reload();
                                 } else if (reason.code === 4000) {
                                     toast.warn({

src/renderer/api/controller.ts

@@ -1,11 +1,14 @@
-import type { AuthenticationResponse, ControllerEndpoint, ServerType } from '/@/renderer/api/types';
-
 import i18n from '/@/i18n/i18n';
 import { JellyfinController } from '/@/renderer/api/jellyfin/jellyfin-controller';
 import { NavidromeController } from '/@/renderer/api/navidrome/navidrome-controller';
 import { SubsonicController } from '/@/renderer/api/subsonic/subsonic-controller';
 import { toast } from '/@/renderer/components/toast/index';
 import { useAuthStore } from '/@/renderer/store';
+import {
+    AuthenticationResponse,
+    ControllerEndpoint,
+    ServerType,
+} from '/@/shared/types/domain-types';
 
 type ApiController = {
     jellyfin: ControllerEndpoint;

src/renderer/api/jellyfin/jellyfin-api.ts

@@ -7,10 +7,11 @@ import { z } from 'zod';
 import packageJson from '../../../../package.json';
 
 import i18n from '/@/i18n/i18n';
-import { jfType } from '/@/renderer/api/jellyfin/jellyfin-types';
-import { ServerListItem } from '/@/renderer/api/types';
-import { authenticationFailure, getClientType } from '/@/renderer/api/utils';
+import { authenticationFailure } from '/@/renderer/api/utils';
 import { useAuthStore } from '/@/renderer/store';
+import { jfType } from '/@/shared/api/jellyfin/jellyfin-types';
+import { getClientType } from '/@/shared/api/utils';
+import { ServerListItem } from '/@/shared/types/domain-types';
 
 const c = initContract();
 

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -1,12 +1,11 @@
 import chunk from 'lodash/chunk';
 import { z } from 'zod';
 
-import { jfNormalize } from './jellyfin-normalize';
-
-import { ServerFeature } from '/@/renderer/api/features-types';
-import { JFSongListSort, JFSortOrder } from '/@/renderer/api/jellyfin.types';
 import { jfApiClient } from '/@/renderer/api/jellyfin/jellyfin-api';
-import { jfType } from '/@/renderer/api/jellyfin/jellyfin-types';
+import { JFSongListSort, JFSortOrder } from '/@/shared/api/jellyfin.types';
+import { jfNormalize } from '/@/shared/api/jellyfin/jellyfin-normalize';
+import { jfType } from '/@/shared/api/jellyfin/jellyfin-types';
+import { getFeatures, hasFeature, VersionInfo } from '/@/shared/api/utils';
 import {
     albumArtistListSortMap,
     albumListSortMap,
@@ -18,8 +17,8 @@ import {
     Song,
     songListSortMap,
     sortOrderMap,
-} from '/@/renderer/api/types';
-import { getFeatures, hasFeature, VersionInfo } from '/@/renderer/api/utils';
+} from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';
 
 const formatCommaDelimitedString = (value: string[]) => {
     return value.join(',');
@@ -282,7 +281,7 @@ export const JellyfinController: ControllerEndpoint = {
             throw new Error('No userId found');
         }
 
-        const yearsGroup = [];
+        const yearsGroup: string[] = [];
         if (query.minYear && query.maxYear) {
             for (let i = Number(query.minYear); i <= Number(query.maxYear); i += 1) {
                 yearsGroup.push(String(i));
@@ -555,7 +554,7 @@ export const JellyfinController: ControllerEndpoint = {
             throw new Error('No userId found');
         }
 
-        const yearsGroup = [];
+        const yearsGroup: string[] = [];
         if (query.minYear && query.maxYear) {
             for (let i = Number(query.minYear); i <= Number(query.maxYear); i += 1) {
                 yearsGroup.push(String(i));
@@ -692,7 +691,7 @@ export const JellyfinController: ControllerEndpoint = {
             throw new Error('No userId found');
         }
 
-        const yearsGroup = [];
+        const yearsGroup: string[] = [];
         if (query.minYear && query.maxYear) {
             for (let i = Number(query.minYear); i <= Number(query.maxYear); i += 1) {
                 yearsGroup.push(String(i));

src/renderer/api/navidrome/navidrome-api.ts

@@ -5,13 +5,13 @@ import debounce from 'lodash/debounce';
 import omitBy from 'lodash/omitBy';
 import qs from 'qs';
 
-import { ndType } from './navidrome-types';
-
 import i18n from '/@/i18n/i18n';
-import { ServerListItem } from '/@/renderer/api/types';
-import { authenticationFailure, resultWithHeaders } from '/@/renderer/api/utils';
-import { toast } from '/@/renderer/components/toast';
+import { authenticationFailure } from '/@/renderer/api/utils';
+import { toast } from '/@/renderer/components';
 import { useAuthStore } from '/@/renderer/store';
+import { ndType } from '/@/shared/api/navidrome/navidrome-types';
+import { resultWithHeaders } from '/@/shared/api/utils';
+import { ServerListItem } from '/@/shared/types/domain-types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
@@ -274,7 +274,6 @@ axiosClient.interceptors.response.use(
             const currentServer = useAuthStore.getState().currentServer;
 
             if (localSettings && currentServer?.savePassword) {
-                // eslint-disable-next-line promise/no-promise-in-callback
                 return localSettings
                     .passwordGet(currentServer.id)
                     .then(async (password: null | string) => {

src/renderer/api/navidrome/navidrome-controller.ts

@@ -1,3 +1,12 @@
+import { ndApiClient } from '/@/renderer/api/navidrome/navidrome-api';
+import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
+import { SubsonicController } from '/@/renderer/api/subsonic/subsonic-controller';
+import { NDSongListSort } from '/@/shared/api/navidrome.types';
+import { ndNormalize } from '/@/shared/api/navidrome/navidrome-normalize';
+import { ndType } from '/@/shared/api/navidrome/navidrome-types';
+import { ssNormalize } from '/@/shared/api/subsonic/subsonic-normalize';
+import { SubsonicExtensions } from '/@/shared/api/subsonic/subsonic-types';
+import { getFeatures, hasFeature, VersionInfo } from '/@/shared/api/utils';
 import {
     albumArtistListSortMap,
     albumListSortMap,
@@ -12,18 +21,8 @@ import {
     songListSortMap,
     sortOrderMap,
     userListSortMap,
-} from '../types';
-
-import { ServerFeature, ServerFeatures } from '/@/renderer/api/features-types';
-import { NDSongListSort } from '/@/renderer/api/navidrome.types';
-import { ndApiClient } from '/@/renderer/api/navidrome/navidrome-api';
-import { ndNormalize } from '/@/renderer/api/navidrome/navidrome-normalize';
-import { ndType } from '/@/renderer/api/navidrome/navidrome-types';
-import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
-import { SubsonicController } from '/@/renderer/api/subsonic/subsonic-controller';
-import { ssNormalize } from '/@/renderer/api/subsonic/subsonic-normalize';
-import { SubsonicExtensions } from '/@/renderer/api/subsonic/subsonic-types';
-import { getFeatures, hasFeature, VersionInfo } from '/@/renderer/api/utils';
+} from '/@/shared/types/domain-types';
+import { ServerFeature, ServerFeatures } from '/@/shared/types/features-types';
 
 const VERSION_INFO: VersionInfo = [
     ['0.55.0', { [ServerFeature.BFR]: [1] }],

src/renderer/api/query-keys.ts

@@ -1,5 +1,3 @@
-import { QueryFunctionContext } from '@tanstack/react-query';
-
 import type {
     AlbumArtistDetailQuery,
     AlbumArtistListQuery,
@@ -19,9 +17,11 @@ import type {
     SongListQuery,
     TopSongListQuery,
     UserListQuery,
-} from './types';
+} from '/@/shared/types/domain-types';
 
-import { LyricSource } from './types';
+import { QueryFunctionContext } from '@tanstack/react-query';
+
+import { LyricSource } from '/@/shared/types/domain-types';
 
 export const splitPaginatedQuery = (key: any) => {
     const { limit, startIndex, ...filter } = key || {};

src/renderer/api/subsonic/subsonic-api.ts

@@ -5,9 +5,9 @@ import qs from 'qs';
 import { z } from 'zod';
 
 import i18n from '/@/i18n/i18n';
-import { ssType } from '/@/renderer/api/subsonic/subsonic-types';
-import { ServerListItem } from '/@/renderer/api/types';
 import { toast } from '/@/renderer/components/toast/index';
+import { ssType } from '/@/shared/api/subsonic/subsonic-types';
+import { ServerListItem } from '/@/shared/types/domain-types';
 
 const c = initContract();
 

src/renderer/api/subsonic/subsonic-controller.ts

@@ -3,10 +3,10 @@ import filter from 'lodash/filter';
 import orderBy from 'lodash/orderBy';
 import md5 from 'md5';
 
-import { ServerFeatures } from '/@/renderer/api/features-types';
 import { ssApiClient } from '/@/renderer/api/subsonic/subsonic-api';
-import { ssNormalize } from '/@/renderer/api/subsonic/subsonic-normalize';
-import { AlbumListSortType, SubsonicExtensions } from '/@/renderer/api/subsonic/subsonic-types';
+import { randomString } from '/@/renderer/utils';
+import { ssNormalize } from '/@/shared/api/subsonic/subsonic-normalize';
+import { AlbumListSortType, SubsonicExtensions } from '/@/shared/api/subsonic/subsonic-types';
 import {
     AlbumListSort,
     ControllerEndpoint,
@@ -18,8 +18,8 @@ import {
     sortAlbumList,
     SortOrder,
     sortSongList,
-} from '/@/renderer/api/types';
-import { randomString } from '/@/renderer/utils';
+} from '/@/shared/types/domain-types';
+import { ServerFeatures } from '/@/shared/types/features-types';
 
 const ALBUM_LIST_SORT_MAPPING: Record<AlbumListSort, AlbumListSortType | undefined> = {
     [AlbumListSort.ALBUM_ARTIST]: AlbumListSortType.ALPHABETICAL_BY_ARTIST,
@@ -287,7 +287,7 @@ export const SubsonicController: ControllerEndpoint = {
         let type = ALBUM_LIST_SORT_MAPPING[query.sortBy] ?? AlbumListSortType.ALPHABETICAL_BY_NAME;
 
         if (query.artistIds) {
-            const promises = [];
+            const promises: any[] = [];
 
             for (const artistId of query.artistIds) {
                 promises.push(
@@ -858,8 +858,8 @@ export const SubsonicController: ControllerEndpoint = {
         return ssNormalize.song(res.body.song, apiClientProps.server);
     },
     getSongList: async ({ apiClientProps, query }) => {
-        const fromAlbumPromises = [];
-        const artistDetailPromises = [];
+        const fromAlbumPromises: any[] = [];
+        const artistDetailPromises: any[] = [];
         let results: any[] = [];
 
         if (query.searchTerm) {

src/renderer/app.tsx

@@ -6,23 +6,13 @@ import isElectron from 'is-electron';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { initSimpleImg } from 'react-simple-img';
 
-import i18n from '../i18n/i18n';
-import { toast } from './components';
-import { useTheme } from './hooks';
-import { AppRouter } from './router/app-router';
 import './styles/global.scss';
 
 import '@ag-grid-community/styles/ag-grid.css';
 import 'overlayscrollbars/overlayscrollbars.css';
 
-import {
-    useCssSettings,
-    useHotkeySettings,
-    usePlaybackSettings,
-    useRemoteSettings,
-    useSettingsStore,
-} from './store/settings.store';
-
+import i18n from '/@/i18n/i18n';
+import { toast } from '/@/renderer/components';
 import { ContextMenuProvider } from '/@/renderer/features/context-menu';
 import { useDiscordRpc } from '/@/renderer/features/discord-rpc/use-discord-rpc';
 import { PlayQueueHandlerContext } from '/@/renderer/features/player';
@@ -30,12 +20,23 @@ import { WebAudioContext } from '/@/renderer/features/player/context/webaudio-co
 import { useHandlePlayQueueAdd } from '/@/renderer/features/player/hooks/use-handle-playqueue-add';
 import { updateSong } from '/@/renderer/features/player/update-remote-song';
 import { getMpvProperties } from '/@/renderer/features/settings/components/playback/mpv-settings';
+import { useTheme } from '/@/renderer/hooks';
 import { useServerVersion } from '/@/renderer/hooks/use-server-version';
 import { IsUpdatedDialog } from '/@/renderer/is-updated-dialog';
-import { PlayerState, usePlayerStore, useQueueControls } from '/@/renderer/store';
-import { FontType, PlaybackType, PlayerStatus, WebAudio } from '/@/renderer/types';
+import { AppRouter } from '/@/renderer/router/app-router';
+import {
+    PlayerState,
+    useCssSettings,
+    useHotkeySettings,
+    usePlaybackSettings,
+    usePlayerStore,
+    useQueueControls,
+    useRemoteSettings,
+    useSettingsStore,
+} from '/@/renderer/store';
 import { sanitizeCss } from '/@/renderer/utils/sanitize';
 import { setQueue } from '/@/renderer/utils/set-transcoded-queue-data';
+import { FontType, PlaybackType, PlayerStatus, WebAudio } from '/@/shared/types/types';
 
 ModuleRegistry.registerModules([ClientSideRowModelModule, InfiniteRowModelModule]);
 
@@ -58,8 +59,8 @@ export const App = () => {
     const handlePlayQueueAdd = useHandlePlayQueueAdd();
     const { clearQueue, restoreQueue } = useQueueControls();
     const remoteSettings = useRemoteSettings();
-    const textStyleRef = useRef<HTMLStyleElement>();
-    const cssRef = useRef<HTMLStyleElement>();
+    const textStyleRef = useRef<HTMLStyleElement | null>(null);
+    const cssRef = useRef<HTMLStyleElement | null>(null);
     useDiscordRpc();
     useServerVersion();
 

src/renderer/components/audio-player/index.tsx

@@ -1,17 +1,9 @@
-import type { Song } from '/@/renderer/api/types';
-import type { CrossfadeStyle } from '/@/renderer/types';
+import type { Song } from '/@/shared/types/domain-types';
+import type { CrossfadeStyle } from '/@/shared/types/types';
 import type { ReactPlayerProps } from 'react-player';
 
 import isElectron from 'is-electron';
-import {
-    forwardRef,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactPlayer from 'react-player/lazy';
 
 import { api } from '/@/renderer/api';
@@ -23,7 +15,7 @@ import { toast } from '/@/renderer/components/toast';
 import { useWebAudio } from '/@/renderer/features/player/hooks/use-webaudio';
 import { getServerById, TranscodingConfig, usePlaybackSettings, useSpeed } from '/@/renderer/store';
 import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
-import { PlaybackStyle, PlayerStatus } from '/@/renderer/types';
+import { PlaybackStyle, PlayerStatus } from '/@/shared/types/types';
 
 export type AudioPlayerProgress = {
     loaded: number;
@@ -33,9 +25,11 @@ export type AudioPlayerProgress = {
 };
 
 interface AudioPlayerProps extends ReactPlayerProps {
+    autoNext: () => void;
     crossfadeDuration: number;
     crossfadeStyle: CrossfadeStyle;
     currentPlayer: 1 | 2;
+    muted: boolean;
     playbackStyle: PlaybackStyle;
     player1?: Song;
     player2?: Song;
@@ -93,369 +87,360 @@ const useSongUrl = (transcode: TranscodingConfig, current: boolean, song?: Song)
     }, [current, song?.uniqueId, song?.serverId, song?.streamUrl, transcode]);
 };
 
-export const AudioPlayer = forwardRef(
-    (
-        {
-            autoNext,
-            crossfadeDuration,
-            crossfadeStyle,
-            currentPlayer,
-            muted,
-            playbackStyle,
-            player1,
-            player2,
-            status,
-            volume,
-        }: AudioPlayerProps,
-        ref: any,
-    ) => {
-        const player1Ref = useRef<ReactPlayer>(null);
-        const player2Ref = useRef<ReactPlayer>(null);
-        const [isTransitioning, setIsTransitioning] = useState(false);
-        const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
-        const playback = useSettingsStore((state) => state.playback.mpvProperties);
-        const shouldUseWebAudio = useSettingsStore((state) => state.playback.webAudio);
-        const { resetSampleRate } = useSettingsStoreActions();
-        const playbackSpeed = useSpeed();
-        const { transcode } = usePlaybackSettings();
+export const AudioPlayer = ({ ref, ...props }: AudioPlayerProps) => {
+    const {
+        autoNext,
+        crossfadeDuration,
+        crossfadeStyle,
+        currentPlayer,
+        muted,
+        playbackStyle,
+        player1,
+        player2,
+        status,
+        volume,
+    } = props;
 
-        const stream1 = useSongUrl(transcode, currentPlayer === 1, player1);
-        const stream2 = useSongUrl(transcode, currentPlayer === 2, player2);
+    const player1Ref = useRef<ReactPlayer>(null);
+    const player2Ref = useRef<ReactPlayer>(null);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
+    const playback = useSettingsStore((state) => state.playback.mpvProperties);
+    const shouldUseWebAudio = useSettingsStore((state) => state.playback.webAudio);
+    const { resetSampleRate } = useSettingsStoreActions();
+    const playbackSpeed = useSpeed();
+    const { transcode } = usePlaybackSettings();
 
-        const { setWebAudio, webAudio } = useWebAudio();
-        const [player1Source, setPlayer1Source] = useState<MediaElementAudioSourceNode | null>(
-            null,
-        );
-        const [player2Source, setPlayer2Source] = useState<MediaElementAudioSourceNode | null>(
-            null,
-        );
+    const stream1 = useSongUrl(transcode, currentPlayer === 1, player1);
+    const stream2 = useSongUrl(transcode, currentPlayer === 2, player2);
 
-        const calculateReplayGain = useCallback(
-            (song: Song): number => {
-                if (playback.replayGainMode === 'no') {
+    const { setWebAudio, webAudio } = useWebAudio();
+    const [player1Source, setPlayer1Source] = useState<MediaElementAudioSourceNode | null>(null);
+    const [player2Source, setPlayer2Source] = useState<MediaElementAudioSourceNode | null>(null);
+
+    const calculateReplayGain = useCallback(
+        (song: Song): number => {
+            if (playback.replayGainMode === 'no') {
+                return 1;
+            }
+
+            let gain: number | undefined;
+            let peak: number | undefined;
+
+            if (playback.replayGainMode === 'track') {
+                gain = song.gain?.track ?? song.gain?.album;
+                peak = song.peak?.track ?? song.peak?.album;
+            } else {
+                gain = song.gain?.album ?? song.gain?.track;
+                peak = song.peak?.album ?? song.peak?.track;
+            }
+
+            if (gain === undefined) {
+                gain = playback.replayGainFallbackDB;
+
+                if (!gain) {
                     return 1;
                 }
-
-                let gain: number | undefined;
-                let peak: number | undefined;
-
-                if (playback.replayGainMode === 'track') {
-                    gain = song.gain?.track ?? song.gain?.album;
-                    peak = song.peak?.track ?? song.peak?.album;
-                } else {
-                    gain = song.gain?.album ?? song.gain?.track;
-                    peak = song.peak?.album ?? song.peak?.track;
-                }
-
-                if (gain === undefined) {
-                    gain = playback.replayGainFallbackDB;
-
-                    if (!gain) {
-                        return 1;
-                    }
-                }
-
-                if (peak === undefined) {
-                    peak = 1;
-                }
-
-                const preAmp = playback.replayGainPreampDB ?? 0;
-
-                // https://wiki.hydrogenaud.io/index.php?title=ReplayGain_1.0_specification&section=19
-                // Normalized to max gain
-                const expectedGain = 10 ** ((gain + preAmp) / 20);
-
-                if (playback.replayGainClip) {
-                    return Math.min(expectedGain, 1 / peak);
-                }
-                return expectedGain;
-            },
-            [
-                playback.replayGainClip,
-                playback.replayGainFallbackDB,
-                playback.replayGainMode,
-                playback.replayGainPreampDB,
-            ],
-        );
-
-        useEffect(() => {
-            if (shouldUseWebAudio && 'AudioContext' in window) {
-                let context: AudioContext;
-
-                try {
-                    context = new AudioContext({
-                        latencyHint: 'playback',
-                        sampleRate: playback.audioSampleRateHz || undefined,
-                    });
-                } catch (error) {
-                    // In practice, this should never be hit because the UI should validate
-                    // the range. However, the actual supported range is not guaranteed
-                    toast.error({ message: (error as Error).message });
-                    context = new AudioContext({ latencyHint: 'playback' });
-                    resetSampleRate();
-                }
-
-                const gain = context.createGain();
-                gain.connect(context.destination);
-
-                setWebAudio!({ context, gain });
-
-                return () => {
-                    return context.close();
-                };
             }
-            return () => {};
-            // Intentionally ignore the sample rate dependency, as it makes things really messy
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
 
-        useImperativeHandle(ref, () => ({
-            get player1() {
-                return player1Ref?.current;
-            },
-            get player2() {
-                return player2Ref?.current;
-            },
-        }));
+            if (peak === undefined) {
+                peak = 1;
+            }
 
-        const handleOnEnded = () => {
-            autoNext();
-            setIsTransitioning(false);
-        };
+            const preAmp = playback.replayGainPreampDB ?? 0;
 
-        useEffect(() => {
-            if (status === PlayerStatus.PLAYING) {
-                if (currentPlayer === 1) {
-                    // calling play() is not necessarily a safe option (https://developer.chrome.com/blog/play-request-was-interrupted)
-                    // In practice, this failure is only likely to happen when using the 0-second wav:
-                    // play() + play() in rapid succession will cause problems as the frist one ends the track.
-                    player1Ref.current
-                        ?.getInternalPlayer()
-                        ?.play()
-                        .catch(() => {});
-                } else {
-                    player2Ref.current
-                        ?.getInternalPlayer()
-                        ?.play()
-                        .catch(() => {});
-                }
+            // https://wiki.hydrogenaud.io/index.php?title=ReplayGain_1.0_specification&section=19
+            // Normalized to max gain
+            const expectedGain = 10 ** ((gain + preAmp) / 20);
+
+            if (playback.replayGainClip) {
+                return Math.min(expectedGain, 1 / peak);
+            }
+            return expectedGain;
+        },
+        [
+            playback.replayGainClip,
+            playback.replayGainFallbackDB,
+            playback.replayGainMode,
+            playback.replayGainPreampDB,
+        ],
+    );
+
+    useEffect(() => {
+        if (shouldUseWebAudio && 'AudioContext' in window) {
+            let context: AudioContext;
+
+            try {
+                context = new AudioContext({
+                    latencyHint: 'playback',
+                    sampleRate: playback.audioSampleRateHz || undefined,
+                });
+            } catch (error) {
+                // In practice, this should never be hit because the UI should validate
+                // the range. However, the actual supported range is not guaranteed
+                toast.error({ message: (error as Error).message });
+                context = new AudioContext({ latencyHint: 'playback' });
+                resetSampleRate();
+            }
+
+            const gain = context.createGain();
+            gain.connect(context.destination);
+
+            setWebAudio!({ context, gain });
+
+            return () => {
+                return context.close();
+            };
+        }
+        return () => {};
+        // Intentionally ignore the sample rate dependency, as it makes things really messy
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+        get player1() {
+            return player1Ref?.current;
+        },
+        get player2() {
+            return player2Ref?.current;
+        },
+    }));
+
+    const handleOnEnded = () => {
+        autoNext();
+        setIsTransitioning(false);
+    };
+
+    useEffect(() => {
+        if (status === PlayerStatus.PLAYING) {
+            if (currentPlayer === 1) {
+                // calling play() is not necessarily a safe option (https://developer.chrome.com/blog/play-request-was-interrupted)
+                // In practice, this failure is only likely to happen when using the 0-second wav:
+                // play() + play() in rapid succession will cause problems as the frist one ends the track.
+                player1Ref.current
+                    ?.getInternalPlayer()
+                    ?.play()
+                    .catch(() => {});
             } else {
-                player1Ref.current?.getInternalPlayer()?.pause();
-                player2Ref.current?.getInternalPlayer()?.pause();
+                player2Ref.current
+                    ?.getInternalPlayer()
+                    ?.play()
+                    .catch(() => {});
             }
-        }, [currentPlayer, status]);
+        } else {
+            player1Ref.current?.getInternalPlayer()?.pause();
+            player2Ref.current?.getInternalPlayer()?.pause();
+        }
+    }, [currentPlayer, status]);
 
-        const handleCrossfade1 = useCallback(
-            (e: AudioPlayerProgress) => {
-                return crossfadeHandler({
-                    currentPlayer,
-                    currentPlayerRef: player1Ref,
-                    currentTime: e.playedSeconds,
-                    duration: getDuration(player1Ref),
-                    fadeDuration: crossfadeDuration,
-                    fadeType: crossfadeStyle,
-                    isTransitioning,
-                    nextPlayerRef: player2Ref,
-                    player: 1,
-                    setIsTransitioning,
-                    volume,
-                });
-            },
-            [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
-        );
+    const handleCrossfade1 = useCallback(
+        (e: AudioPlayerProgress) => {
+            return crossfadeHandler({
+                currentPlayer,
+                currentPlayerRef: player1Ref,
+                currentTime: e.playedSeconds,
+                duration: getDuration(player1Ref),
+                fadeDuration: crossfadeDuration,
+                fadeType: crossfadeStyle,
+                isTransitioning,
+                nextPlayerRef: player2Ref,
+                player: 1,
+                setIsTransitioning,
+                volume,
+            });
+        },
+        [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
+    );
 
-        const handleCrossfade2 = useCallback(
-            (e: AudioPlayerProgress) => {
-                return crossfadeHandler({
-                    currentPlayer,
-                    currentPlayerRef: player2Ref,
-                    currentTime: e.playedSeconds,
-                    duration: getDuration(player2Ref),
-                    fadeDuration: crossfadeDuration,
-                    fadeType: crossfadeStyle,
-                    isTransitioning,
-                    nextPlayerRef: player1Ref,
-                    player: 2,
-                    setIsTransitioning,
-                    volume,
-                });
-            },
-            [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
-        );
+    const handleCrossfade2 = useCallback(
+        (e: AudioPlayerProgress) => {
+            return crossfadeHandler({
+                currentPlayer,
+                currentPlayerRef: player2Ref,
+                currentTime: e.playedSeconds,
+                duration: getDuration(player2Ref),
+                fadeDuration: crossfadeDuration,
+                fadeType: crossfadeStyle,
+                isTransitioning,
+                nextPlayerRef: player1Ref,
+                player: 2,
+                setIsTransitioning,
+                volume,
+            });
+        },
+        [crossfadeDuration, crossfadeStyle, currentPlayer, isTransitioning, volume],
+    );
 
-        const handleGapless1 = useCallback(
-            (e: AudioPlayerProgress) => {
-                return gaplessHandler({
-                    currentTime: e.playedSeconds,
-                    duration: getDuration(player1Ref),
-                    isFlac: player1?.container === 'flac',
-                    isTransitioning,
-                    nextPlayerRef: player2Ref,
-                    setIsTransitioning,
-                });
-            },
-            [isTransitioning, player1?.container],
-        );
+    const handleGapless1 = useCallback(
+        (e: AudioPlayerProgress) => {
+            return gaplessHandler({
+                currentTime: e.playedSeconds,
+                duration: getDuration(player1Ref),
+                isFlac: player1?.container === 'flac',
+                isTransitioning,
+                nextPlayerRef: player2Ref,
+                setIsTransitioning,
+            });
+        },
+        [isTransitioning, player1?.container],
+    );
 
-        const handleGapless2 = useCallback(
-            (e: AudioPlayerProgress) => {
-                return gaplessHandler({
-                    currentTime: e.playedSeconds,
-                    duration: getDuration(player2Ref),
-                    isFlac: player2?.container === 'flac',
-                    isTransitioning,
-                    nextPlayerRef: player1Ref,
-                    setIsTransitioning,
-                });
-            },
-            [isTransitioning, player2?.container],
-        );
+    const handleGapless2 = useCallback(
+        (e: AudioPlayerProgress) => {
+            return gaplessHandler({
+                currentTime: e.playedSeconds,
+                duration: getDuration(player2Ref),
+                isFlac: player2?.container === 'flac',
+                isTransitioning,
+                nextPlayerRef: player1Ref,
+                setIsTransitioning,
+            });
+        },
+        [isTransitioning, player2?.container],
+    );
 
-        useEffect(() => {
-            // Not standard, just used in chromium-based browsers. See
-            // https://developer.chrome.com/blog/audiocontext-setsinkid/.
-            // If the isElectron() check is every removed, fix this.
-            if (isElectron() && webAudio && 'setSinkId' in webAudio.context && audioDeviceId) {
-                const setSink = async () => {
-                    try {
-                        if (audioDeviceId !== 'default') {
-                            // @ts-ignore
-                            await webAudio.context.setSinkId(audioDeviceId);
-                        } else {
-                            // @ts-ignore
-                            await webAudio.context.setSinkId('');
-                        }
-                    } catch (error) {
-                        toast.error({ message: `Error setting sink: ${(error as Error).message}` });
+    useEffect(() => {
+        // Not standard, just used in chromium-based browsers. See
+        // https://developer.chrome.com/blog/audiocontext-setsinkid/.
+        // If the isElectron() check is every removed, fix this.
+        if (isElectron() && webAudio && 'setSinkId' in webAudio.context && audioDeviceId) {
+            const setSink = async () => {
+                try {
+                    if (audioDeviceId !== 'default') {
+                        await (webAudio.context as any).setSinkId(audioDeviceId);
+                    } else {
+                        await (webAudio.context as any).setSinkId('');
                     }
-                };
+                } catch (error) {
+                    toast.error({ message: `Error setting sink: ${(error as Error).message}` });
+                }
+            };
 
-                setSink();
-            }
-        }, [audioDeviceId, webAudio]);
+            setSink();
+        }
+    }, [audioDeviceId, webAudio]);
 
-        useEffect(() => {
+    useEffect(() => {
+        if (!webAudio) return;
+
+        const sources = [player1Source ? player1 : null, player2Source ? player2 : null];
+        const current = sources[currentPlayer - 1];
+
+        // Set the current replaygain
+        if (current) {
+            const newVolume = calculateReplayGain(current) * volume;
+            webAudio.gain.gain.setValueAtTime(Math.max(0, newVolume), 0);
+        }
+
+        // Set the next track replaygain right before the end of this track
+        // Attempt to prevent pop-in for web audio.
+        const next = sources[3 - currentPlayer];
+        if (next && current) {
+            const newVolume = calculateReplayGain(next) * volume;
+            webAudio.gain.gain.setValueAtTime(
+                Math.max(0, newVolume),
+                Math.max(0, (current.duration - 1) / 1000),
+            );
+        }
+    }, [
+        calculateReplayGain,
+        currentPlayer,
+        player1,
+        player1Source,
+        player2,
+        player2Source,
+        volume,
+        webAudio,
+    ]);
+
+    const handlePlayer1Start = useCallback(
+        async (player: ReactPlayer) => {
             if (!webAudio) return;
-
-            const sources = [player1Source ? player1 : null, player2Source ? player2 : null];
-            const current = sources[currentPlayer - 1];
-
-            // Set the current replaygain
-            if (current) {
-                const newVolume = calculateReplayGain(current) * volume;
-                webAudio.gain.gain.setValueAtTime(Math.max(0, newVolume), 0);
+            if (player1Source) {
+                // This should fire once, only if the source is real (meaning we
+                // saw the dummy source) and the context is not ready
+                if (webAudio.context.state !== 'running') {
+                    await webAudio.context.resume();
+                }
+                return;
             }
 
-            // Set the next track replaygain right before the end of this track
-            // Attempt to prevent pop-in for web audio.
-            const next = sources[3 - currentPlayer];
-            if (next && current) {
-                const newVolume = calculateReplayGain(next) * volume;
-                webAudio.gain.gain.setValueAtTime(
-                    Math.max(0, newVolume),
-                    Math.max(0, (current.duration - 1) / 1000),
-                );
+            const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
+            if (internal) {
+                const { context, gain } = webAudio;
+                const source = context.createMediaElementSource(internal);
+                source.connect(gain);
+                setPlayer1Source(source);
             }
-        }, [
-            calculateReplayGain,
-            currentPlayer,
-            player1,
-            player1Source,
-            player2,
-            player2Source,
-            volume,
-            webAudio,
-        ]);
+        },
+        [player1Source, webAudio],
+    );
 
-        const handlePlayer1Start = useCallback(
-            async (player: ReactPlayer) => {
-                if (!webAudio) return;
-                if (player1Source) {
-                    // This should fire once, only if the source is real (meaning we
-                    // saw the dummy source) and the context is not ready
-                    if (webAudio.context.state !== 'running') {
-                        await webAudio.context.resume();
-                    }
-                    return;
+    const handlePlayer2Start = useCallback(
+        async (player: ReactPlayer) => {
+            if (!webAudio) return;
+            if (player2Source) {
+                if (webAudio.context.state !== 'running') {
+                    await webAudio.context.resume();
                 }
+                return;
+            }
 
-                const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
-                if (internal) {
-                    const { context, gain } = webAudio;
-                    const source = context.createMediaElementSource(internal);
-                    source.connect(gain);
-                    setPlayer1Source(source);
+            const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
+            if (internal) {
+                const { context, gain } = webAudio;
+                const source = context.createMediaElementSource(internal);
+                source.connect(gain);
+                setPlayer2Source(source);
+            }
+        },
+        [player2Source, webAudio],
+    );
+
+    // Bugfix for Safari: rather than use the `<audio>` volume (which doesn't work),
+    // use the GainNode to scale the volume. In this case, for compatibility with
+    // other browsers, set the `<audio>` volume to 1
+    return (
+        <>
+            <ReactPlayer
+                config={{
+                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                }}
+                height={0}
+                muted={muted}
+                // If there is no stream url, we do not need to handle when the audio finishes
+                onEnded={stream1 ? handleOnEnded : undefined}
+                onProgress={
+                    playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1
                 }
-            },
-            [player1Source, webAudio],
-        );
-
-        const handlePlayer2Start = useCallback(
-            async (player: ReactPlayer) => {
-                if (!webAudio) return;
-                if (player2Source) {
-                    if (webAudio.context.state !== 'running') {
-                        await webAudio.context.resume();
-                    }
-                    return;
+                onReady={handlePlayer1Start}
+                playbackRate={playbackSpeed}
+                playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
+                progressInterval={isTransitioning ? 10 : 250}
+                ref={player1Ref}
+                url={stream1 || EMPTY_SOURCE}
+                volume={webAudio ? 1 : volume}
+                width={0}
+            />
+            <ReactPlayer
+                config={{
+                    file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
+                }}
+                height={0}
+                muted={muted}
+                onEnded={stream2 ? handleOnEnded : undefined}
+                onProgress={
+                    playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2
                 }
-
-                const internal = player.getInternalPlayer() as HTMLMediaElement | undefined;
-                if (internal) {
-                    const { context, gain } = webAudio;
-                    const source = context.createMediaElementSource(internal);
-                    source.connect(gain);
-                    setPlayer2Source(source);
-                }
-            },
-            [player2Source, webAudio],
-        );
-
-        // Bugfix for Safari: rather than use the `<audio>` volume (which doesn't work),
-        // use the GainNode to scale the volume. In this case, for compatibility with
-        // other browsers, set the `<audio>` volume to 1
-        return (
-            <>
-                <ReactPlayer
-                    config={{
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                    }}
-                    height={0}
-                    muted={muted}
-                    // If there is no stream url, we do not need to handle when the audio finishes
-                    onEnded={stream1 ? handleOnEnded : undefined}
-                    onProgress={
-                        playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1
-                    }
-                    onReady={handlePlayer1Start}
-                    playbackRate={playbackSpeed}
-                    playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
-                    progressInterval={isTransitioning ? 10 : 250}
-                    ref={player1Ref}
-                    url={stream1 || EMPTY_SOURCE}
-                    volume={webAudio ? 1 : volume}
-                    width={0}
-                />
-                <ReactPlayer
-                    config={{
-                        file: { attributes: { crossOrigin: 'anonymous' }, forceAudio: true },
-                    }}
-                    height={0}
-                    muted={muted}
-                    onEnded={stream2 ? handleOnEnded : undefined}
-                    onProgress={
-                        playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2
-                    }
-                    onReady={handlePlayer2Start}
-                    playbackRate={playbackSpeed}
-                    playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
-                    progressInterval={isTransitioning ? 10 : 250}
-                    ref={player2Ref}
-                    url={stream2 || EMPTY_SOURCE}
-                    volume={webAudio ? 1 : volume}
-                    width={0}
-                />
-            </>
-        );
-    },
-);
+                onReady={handlePlayer2Start}
+                playbackRate={playbackSpeed}
+                playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
+                progressInterval={isTransitioning ? 10 : 250}
+                ref={player2Ref}
+                url={stream2 || EMPTY_SOURCE}
+                volume={webAudio ? 1 : volume}
+                width={0}
+            />
+        </>
+    );
+};

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

@@ -1,6 +1,6 @@
 import type { Dispatch } from 'react';
 
-import { CrossfadeStyle } from '/@/renderer/types';
+import { CrossfadeStyle } from '/@/shared/types/types';
 
 export const gaplessHandler = (args: {
     currentTime: number;

src/renderer/components/button/index.tsx

@@ -130,12 +130,6 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
 export const Button = createPolymorphicComponent<'button', ButtonProps>(_Button);
 
-_Button.defaultProps = {
-    loading: undefined,
-    onClick: undefined,
-    tooltip: undefined,
-};
-
 interface HoldButtonProps extends ButtonProps {
     timeoutProps: {
         callback: () => void;

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

@@ -1,4 +1,4 @@
-import type { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/renderer/types';
+import type { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/shared/types/types';
 
 import { Center } from '@mantine/core';
 import { useCallback } from 'react';
@@ -7,10 +7,10 @@ import { generatePath, useNavigate } from 'react-router';
 import { SimpleImg } from 'react-simple-img';
 import styled from 'styled-components';
 
-import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
 import { CardControls } from '/@/renderer/components/card/card-controls';
 import { CardRows } from '/@/renderer/components/card/card-rows';
 import { Skeleton } from '/@/renderer/components/skeleton';
+import { Album, AlbumArtist, Artist, LibraryItem } from '/@/shared/types/domain-types';
 
 const CardWrapper = styled.div<{
     link?: boolean;
@@ -130,7 +130,7 @@ export const AlbumCard = ({
     const handleNavigate = useCallback(() => {
         navigate(
             generatePath(
-                route.route,
+                route.route as string,
                 route.slugs?.reduce((acc, slug) => {
                     return {
                         ...acc,
@@ -207,6 +207,7 @@ export const AlbumCard = ({
                     {(cardRows || []).map((_row: CardRow<Album>, index: number) => (
                         <Skeleton
                             height={15}
+                            key={`skeleton-${data?.id}-${index}`}
                             my={3}
                             radius="md"
                             visible

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

@@ -1,4 +1,4 @@
-import type { PlayQueueAddOptions } from '/@/renderer/types';
+import type { PlayQueueAddOptions } from '/@/shared/types/types';
 import type { UnstyledButtonProps } from '@mantine/core';
 import type { MouseEvent } from 'react';
 
@@ -7,7 +7,6 @@ import React from 'react';
 import { RiHeartFill, RiHeartLine, RiMore2Fill, RiPlayFill } from 'react-icons/ri';
 import styled from 'styled-components';
 
-import { LibraryItem } from '/@/renderer/api/types';
 import { _Button } from '/@/renderer/components/button';
 import {
     ALBUM_CONTEXT_MENU_ITEMS,
@@ -15,7 +14,8 @@ import {
 } from '/@/renderer/features/context-menu/context-menu-items';
 import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { Play } from '/@/renderer/types';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 
 type PlayButtonType = React.ComponentPropsWithoutRef<'button'> & UnstyledButtonProps;
 

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

@@ -4,11 +4,11 @@ import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Album, AlbumArtist, Artist, Playlist, Song } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
 import { AppRoute } from '/@/renderer/router/routes';
-import { CardRow } from '/@/renderer/types';
 import { formatDateAbsolute, formatDateRelative, formatRating } from '/@/renderer/utils/format';
+import { Album, AlbumArtist, Artist, Playlist, Song } from '/@/shared/types/domain-types';
+import { CardRow } from '/@/shared/types/types';
 
 const Row = styled.div<{ $secondary?: boolean }>`
     width: 100%;

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

@@ -4,11 +4,11 @@ import { generatePath, Link } from 'react-router-dom';
 import { SimpleImg } from 'react-simple-img';
 import styled, { css } from 'styled-components';
 
-import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
 import { CardRows } from '/@/renderer/components/card';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
-import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/renderer/types';
+import { Album, AlbumArtist, Artist, LibraryItem } from '/@/shared/types/domain-types';
+import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/shared/types/types';
 
 interface BaseGridCardProps {
     controls: {
@@ -109,7 +109,7 @@ export const PosterCard = ({
 }: BaseGridCardProps & { uniqueId: string }) => {
     if (!isLoading) {
         const path = generatePath(
-            controls.route.route,
+            controls.route.route as string,
             controls.route.slugs?.reduce((acc, slug) => {
                 return {
                     ...acc,

src/renderer/components/date-picker/index.tsx

@@ -43,8 +43,3 @@ export const DatePicker = ({ maxWidth, width, ...props }: DatePickerProps) => {
         />
     );
 };
-
-DatePicker.defaultProps = {
-    maxWidth: undefined,
-    width: undefined,
-};

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

@@ -9,14 +9,14 @@ import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { generatePath, Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { Album, LibraryItem } from '/@/renderer/api/types';
 import { Badge } from '/@/renderer/components/badge';
 import { Button } from '/@/renderer/components/button';
 import { TextTitle } from '/@/renderer/components/text-title';
 import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue-add';
 import { AppRoute } from '/@/renderer/router/routes';
 import { usePlayButtonBehavior } from '/@/renderer/store';
-import { Play } from '/@/renderer/types';
+import { Album, LibraryItem } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 
 const Carousel = styled(motion.div)`
     position: relative;
@@ -64,9 +64,9 @@ const BackgroundImage = styled.img`
     width: 150%;
     height: 150%;
     user-select: none;
-    filter: blur(24px);
     object-fit: var(--image-fit);
     object-position: 0 30%;
+    filter: blur(24px);
 `;
 
 const BackgroundImageOverlay = styled.div`

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

@@ -18,14 +18,20 @@ import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Swiper as SwiperCore } from 'swiper/types';
 
-import { Album, AlbumArtist, Artist, LibraryItem, RelatedArtist } from '/@/renderer/api/types';
 import { Button } from '/@/renderer/components/button';
 import { PosterCard } from '/@/renderer/components/card/poster-card';
 import { TextTitle } from '/@/renderer/components/text-title';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { usePlayButtonBehavior } from '/@/renderer/store';
-import { CardRoute, CardRow } from '/@/renderer/types';
+import {
+    Album,
+    AlbumArtist,
+    Artist,
+    LibraryItem,
+    RelatedArtist,
+} from '/@/shared/types/domain-types';
+import { CardRoute, CardRow } from '/@/shared/types/types';
 
 const getSlidesPerView = (windowWidth: number) => {
     if (windowWidth < 400) return 2;
@@ -178,6 +184,7 @@ export const SwiperGridCarousel = ({
                 }}
                 data={el}
                 isLoading={isLoading}
+                key={`${uniqueId}-${el.id}`}
                 uniqueId={uniqueId}
             />
         ));

src/renderer/components/input/index.tsx

@@ -367,39 +367,3 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         );
     },
 );
-
-TextInput.defaultProps = {
-    children: undefined,
-    maxWidth: undefined,
-    width: undefined,
-};
-
-NumberInput.defaultProps = {
-    children: undefined,
-    maxWidth: undefined,
-    width: undefined,
-};
-
-PasswordInput.defaultProps = {
-    children: undefined,
-    maxWidth: undefined,
-    width: undefined,
-};
-
-FileInput.defaultProps = {
-    children: undefined,
-    maxWidth: undefined,
-    width: undefined,
-};
-
-JsonInput.defaultProps = {
-    children: undefined,
-    maxWidth: undefined,
-    width: undefined,
-};
-
-Textarea.defaultProps = {
-    children: undefined,
-    maxWidth: undefined,
-    width: undefined,
-};

src/renderer/components/modal/index.tsx

@@ -43,10 +43,6 @@ export const BaseContextModal = ({
     modalBody: (vars: ContextModalVars) => React.ReactNode;
 }>) => <>{innerProps.modalBody({ context, id })}</>;
 
-Modal.defaultProps = {
-    children: undefined,
-};
-
 interface ConfirmModalProps {
     children: ReactNode;
     disabled?: boolean;

src/renderer/components/page-header/index.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { useShouldPadTitlebar, useTheme } from '/@/renderer/hooks';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
-import { Platform } from '/@/renderer/types';
+import { Platform } from '/@/shared/types/types';
 
 const Container = styled(motion(Flex))<{
     $height?: string;

src/renderer/components/query-builder/index.tsx

@@ -7,7 +7,7 @@ import { Button } from '/@/renderer/components/button';
 import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
 import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-builder-option';
 import { Select } from '/@/renderer/components/select';
-import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
+import { QueryBuilderGroup, QueryBuilderRule } from '/@/shared/types/types';
 
 const FILTER_GROUP_OPTIONS_DATA = [
     {

src/renderer/components/query-builder/query-builder-option.tsx

@@ -5,7 +5,7 @@ import { RiSubtractLine } from 'react-icons/ri';
 import { Button } from '/@/renderer/components/button';
 import { NumberInput, TextInput } from '/@/renderer/components/input';
 import { Select } from '/@/renderer/components/select';
-import { QueryBuilderRule } from '/@/renderer/types';
+import { QueryBuilderRule } from '/@/shared/types/types';
 
 type DeleteArgs = {
     groupIndex: number[];

src/renderer/components/rating/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { Rating as MantineRating, RatingProps } from '@mantine/core';
 import debounce from 'lodash/debounce';
 import { useCallback } from 'react';

src/renderer/components/scroll-area/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import type { ScrollAreaProps as MantineScrollAreaProps } from '@mantine/core';
 
 import { ScrollArea as MantineScrollArea } from '@mantine/core';
@@ -10,7 +9,7 @@ import styled from 'styled-components';
 
 import { PageHeader, PageHeaderProps } from '/@/renderer/components/page-header';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
-import { Platform } from '/@/renderer/types';
+import { Platform } from '/@/shared/types/types';
 
 const DragContainer = styled.div`
     position: absolute;

src/renderer/components/select/index.tsx

@@ -136,13 +136,3 @@ export const MultiSelect = ({ maxWidth, width, ...props }: MultiSelectProps) =>
         />
     );
 };
-
-Select.defaultProps = {
-    maxWidth: undefined,
-    width: undefined,
-};
-
-MultiSelect.defaultProps = {
-    maxWidth: undefined,
-    width: undefined,
-};

src/renderer/components/separator/index.tsx

@@ -1,5 +1,5 @@
-import { SEPARATOR_STRING } from '/@/renderer/api/utils';
 import { Text } from '/@/renderer/components/text';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';
 
 export const Separator = () => {
     return (

src/renderer/components/spinner/index.tsx

@@ -1,12 +1,11 @@
-import type { IconType } from 'react-icons';
-
 import { Center } from '@mantine/core';
+import { IconBaseProps } from 'react-icons';
 import { RiLoader5Fill } from 'react-icons/ri';
 import styled from 'styled-components';
 
 import { rotating } from '/@/renderer/styles';
 
-interface SpinnerProps extends IconType {
+interface SpinnerProps extends IconBaseProps {
     color?: string;
     container?: boolean;
     size?: number;
@@ -34,8 +33,3 @@ export const Spinner = ({ ...props }: SpinnerProps) => {
 
     return <SpinnerIcon {...props} />;
 };
-
-Spinner.defaultProps = {
-    color: undefined,
-    size: 15,
-};

src/renderer/components/text-title/index.tsx

@@ -46,12 +46,3 @@ const _TextTitle = ({ $noSelect, $secondary, children, overflow, ...rest }: Text
 };
 
 export const TextTitle = createPolymorphicComponent<'div', TextTitleProps>(_TextTitle);
-
-_TextTitle.defaultProps = {
-    $link: false,
-    $noSelect: false,
-    $secondary: false,
-    overflow: 'visible',
-    to: '',
-    weight: 400,
-};

src/renderer/components/text/index.tsx

@@ -49,13 +49,3 @@ export const _Text = ({ $noSelect, $secondary, children, font, overflow, ...rest
 };
 
 export const Text = createPolymorphicComponent<'div', TextProps>(_Text);
-
-_Text.defaultProps = {
-    $link: false,
-    $noSelect: false,
-    $secondary: false,
-    font: undefined,
-    overflow: 'visible',
-    to: '',
-    weight: 400,
-};

src/renderer/components/tooltip/index.tsx

@@ -38,10 +38,3 @@ export const Tooltip = ({ children, ...rest }: TooltipProps) => {
         </StyledTooltip>
     );
 };
-
-Tooltip.defaultProps = {
-    openDelay: 0,
-    position: 'top',
-    withArrow: true,
-    withinPortal: true,
-};

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

@@ -5,11 +5,18 @@ import { SimpleImg } from 'react-simple-img';
 import { ListChildComponentProps } from 'react-window';
 import styled from 'styled-components';
 
-import { Album, AlbumArtist, Artist, LibraryItem, Playlist, Song } from '/@/renderer/api/types';
 import { CardRows } from '/@/renderer/components/card';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
-import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/renderer/types';
+import {
+    Album,
+    AlbumArtist,
+    Artist,
+    LibraryItem,
+    Playlist,
+    Song,
+} from '/@/shared/types/domain-types';
+import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/shared/types/types';
 
 interface BaseGridCardProps {
     columnIndex: number;
@@ -142,7 +149,7 @@ export const DefaultCard = ({
 
     if (data) {
         const path = generatePath(
-            controls.route.route,
+            controls.route.route as string,
             controls.route.slugs?.reduce((acc, slug) => {
                 return {
                     ...acc,

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

@@ -1,21 +1,19 @@
-import type { PlayQueueAddOptions } from '/@/renderer/types';
 import type { UnstyledButtonProps } from '@mantine/core';
 
 import React, { MouseEvent, useState } from 'react';
 import { RiHeartFill, RiHeartLine, RiMoreFill, RiPlayFill } from 'react-icons/ri';
 import styled from 'styled-components';
 
+import { _Button } from '/@/renderer/components/button';
 import {
     ALBUM_CONTEXT_MENU_ITEMS,
     ARTIST_CONTEXT_MENU_ITEMS,
     PLAYLIST_CONTEXT_MENU_ITEMS,
-} from '../../../features/context-menu/context-menu-items';
-
-import { LibraryItem } from '/@/renderer/api/types';
-import { _Button } from '/@/renderer/components/button';
+} from '/@/renderer/features/context-menu/context-menu-items';
 import { useHandleGridContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { Play } from '/@/renderer/types';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { Play, PlayQueueAddOptions } from '/@/shared/types/types';
 
 type PlayButtonType = React.ComponentPropsWithoutRef<'button'> & UnstyledButtonProps;
 

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

@@ -5,7 +5,7 @@ import { areEqual } from 'react-window';
 
 import { DefaultCard } from '/@/renderer/components/virtual-grid/grid-card/default-card';
 import { PosterCard } from '/@/renderer/components/virtual-grid/grid-card/poster-card';
-import { GridCardData, ListDisplayType } from '/@/renderer/types';
+import { CardRow, GridCardData, ListDisplayType } from '/@/shared/types/types';
 
 export const GridCard = memo(({ data, index, style }: ListChildComponentProps) => {
     const {
@@ -23,7 +23,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
         route,
     } = data as GridCardData;
 
-    const cards = [];
+    const cards: React.ReactNode[] = [];
     const startIndex = index * columnCount;
     const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
 
@@ -39,7 +39,7 @@ export const GridCard = memo(({ data, index, style }: ListChildComponentProps) =
             <View
                 columnIndex={i}
                 controls={{
-                    cardRows,
+                    cardRows: cardRows as CardRow<any>[],
                     handleFavorite,
                     handlePlayQueueAdd,
                     itemGap,

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

@@ -5,11 +5,18 @@ import { SimpleImg } from 'react-simple-img';
 import { ListChildComponentProps } from 'react-window';
 import styled from 'styled-components';
 
-import { Album, AlbumArtist, Artist, LibraryItem, Playlist, Song } from '/@/renderer/api/types';
 import { CardRows } from '/@/renderer/components/card';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/grid-card-controls';
-import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/renderer/types';
+import {
+    Album,
+    AlbumArtist,
+    Artist,
+    LibraryItem,
+    Playlist,
+    Song,
+} from '/@/shared/types/domain-types';
+import { CardRoute, CardRow, Play, PlayQueueAddOptions } from '/@/shared/types/types';
 
 interface BaseGridCardProps {
     columnIndex: number;
@@ -130,7 +137,7 @@ export const PosterCard = ({
 
     if (data) {
         const path = generatePath(
-            controls.route.route,
+            controls.route.route as string,
             controls.route.slugs?.reduce((acc, slug) => {
                 return {
                     ...acc,

src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx

@@ -1,4 +1,9 @@
-import type { CardRoute, CardRow, ListDisplayType, PlayQueueAddOptions } from '/@/renderer/types';
+import type {
+    CardRoute,
+    CardRow,
+    ListDisplayType,
+    PlayQueueAddOptions,
+} from '/@/shared/types/types';
 import type { Ref } from 'react';
 import type { FixedSizeListProps } from 'react-window';
 
@@ -7,8 +12,8 @@ import memoize from 'memoize-one';
 import { FixedSizeList } from 'react-window';
 import styled from 'styled-components';
 
-import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
 import { GridCard } from '/@/renderer/components/virtual-grid/grid-card';
+import { Album, AlbumArtist, Artist, LibraryItem } from '/@/shared/types/domain-types';
 
 const createItemData = memoize(
     (
@@ -123,10 +128,6 @@ export const VirtualGridWrapper = ({
     );
 };
 
-VirtualGridWrapper.defaultProps = {
-    route: undefined,
-};
-
 export const VirtualGridContainer = styled.div`
     display: flex;
     flex-direction: column;

src/renderer/components/virtual-grid/virtual-infinite-grid.tsx

@@ -1,4 +1,4 @@
-import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/renderer/types';
+import type { CardRoute, CardRow, PlayQueueAddOptions } from '/@/shared/types/types';
 import type { FixedSizeListProps } from 'react-window';
 
 import debounce from 'lodash/debounce';
@@ -13,9 +13,9 @@ import {
 } from 'react';
 import InfiniteLoader from 'react-window-infinite-loader';
 
-import { AnyLibraryItem, Genre, LibraryItem } from '/@/renderer/api/types';
 import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
-import { ListDisplayType } from '/@/renderer/types';
+import { AnyLibraryItem, Genre, LibraryItem } from '/@/shared/types/domain-types';
+import { ListDisplayType } from '/@/shared/types/types';
 
 export type VirtualInfiniteGridRef = {
     resetLoadMoreItemsCache: () => void;
@@ -211,9 +211,3 @@ export const VirtualInfiniteGrid = forwardRef(
         );
     },
 );
-
-VirtualInfiniteGrid.defaultProps = {
-    display: ListDisplayType.CARD,
-    minimumBatchSize: 20,
-    route: undefined,
-};

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

@@ -1,4 +1,4 @@
-import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+import type { AlbumArtist, Artist } from '/@/shared/types/domain-types';
 import type { ICellRendererParams } from '@ag-grid-community/core';
 
 import React from 'react';

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

@@ -1,4 +1,4 @@
-import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+import type { AlbumArtist, Artist } from '/@/shared/types/domain-types';
 import type { ICellRendererParams } from '@ag-grid-community/core';
 
 import React from 'react';

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

@@ -4,10 +4,10 @@ import React, { MouseEvent } from 'react';
 import { RiPlayFill } from 'react-icons/ri';
 import styled from 'styled-components';
 
-import { LibraryItem } from '/@/renderer/api/types';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { Play } from '/@/renderer/types';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 
 type PlayButtonType = React.ComponentPropsWithoutRef<'button'> & UnstyledButtonProps;
 

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

@@ -9,12 +9,12 @@ import { Link } from 'react-router-dom';
 import { SimpleImg } from 'react-simple-img';
 import styled from 'styled-components';
 
-import { AlbumArtist, Artist } from '/@/renderer/api/types';
-import { SEPARATOR_STRING } from '/@/renderer/api/utils';
 import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 import { ListCoverControls } from '/@/renderer/components/virtual-table/cells/combined-title-cell-controls';
 import { AppRoute } from '/@/renderer/router/routes';
+import { SEPARATOR_STRING } from '/@/shared/api/utils';
+import { AlbumArtist, Artist } from '/@/shared/types/domain-types';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
     display: grid;

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-cycle */
 import type { ICellRendererParams } from '@ag-grid-community/core';
 
 import { RiHeartFill, RiHeartLine } from 'react-icons/ri';

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

@@ -4,10 +4,9 @@ import { useState } from 'react';
 import { RiCheckboxBlankLine, RiCheckboxLine } from 'react-icons/ri';
 import styled from 'styled-components';
 
-import { getNodesByDiscNumber, setNodeSelection } from '../utils';
-
 import { Button } from '/@/renderer/components/button';
 import { Paper } from '/@/renderer/components/paper';
+import { getNodesByDiscNumber, setNodeSelection } from '/@/renderer/components/virtual-table/utils';
 
 const Container = styled(Paper)`
     display: flex;

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

@@ -71,7 +71,3 @@ export const GenericCell = (
         </CellContainer>
     );
 };
-
-GenericCell.defaultProps = {
-    position: undefined,
-};

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

@@ -1,4 +1,4 @@
-import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+import type { AlbumArtist, Artist } from '/@/shared/types/domain-types';
 import type { ICellRendererParams } from '@ag-grid-community/core';
 
 import React from 'react';

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

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-cycle */
 import type { ICellRendererParams } from '@ag-grid-community/core';
 
 import { Rating } from '/@/renderer/components/rating';

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

@@ -97,8 +97,3 @@ export const GenericTableHeader = (
         </HeaderWrapper>
     );
 };
-
-GenericTableHeader.defaultProps = {
-    position: 'left',
-    preset: undefined,
-};

src/renderer/components/virtual-table/hooks/use-current-song-row-styles.ts

@@ -3,10 +3,10 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { RowClassRules, RowNode } from '@ag-grid-community/core';
 import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
 
-import { Song } from '/@/renderer/api/types';
 import { useAppFocus } from '/@/renderer/hooks';
 import { useCurrentSong, usePlayerStore } from '/@/renderer/store';
-import { PlayerStatus } from '/@/renderer/types';
+import { Song } from '/@/shared/types/domain-types';
+import { PlayerStatus } from '/@/shared/types/types';
 
 interface UseCurrentSongRowStylesProps {
     tableRef: MutableRefObject<AgGridReactType | null>;

src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx

@@ -2,7 +2,7 @@ import { useInView } from 'framer-motion';
 import { useEffect, useRef } from 'react';
 
 import { useWindowSettings } from '/@/renderer/store/settings.store';
-import { Platform } from '/@/renderer/types';
+import { Platform } from '/@/shared/types/types';
 
 export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => {
     const tableHeaderRef = useRef<HTMLDivElement | null>(null);

src/renderer/components/virtual-table/hooks/use-virtual-table.ts

@@ -16,21 +16,20 @@ import { MutableRefObject, useCallback, useMemo } from 'react';
 import { generatePath, useNavigate } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
 
-import { ListKey, useListStoreByKey } from '../../../store/list.store';
-
 import { api } from '/@/renderer/api';
 import { queryKeys, QueryPagination } from '/@/renderer/api/query-keys';
+import { getColumnDefs, VirtualTableProps } from '/@/renderer/components/virtual-table';
+import { SetContextMenuItems, useHandleTableContextMenu } from '/@/renderer/features/context-menu';
+import { AppRoute } from '/@/renderer/router/routes';
+import { PersistedTableColumn, useListStoreActions } from '/@/renderer/store';
+import { ListKey, useListStoreByKey } from '/@/renderer/store/list.store';
 import {
     BasePaginatedResponse,
     BaseQuery,
     LibraryItem,
     ServerListItem,
-} from '/@/renderer/api/types';
-import { getColumnDefs, VirtualTableProps } from '/@/renderer/components/virtual-table';
-import { SetContextMenuItems, useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { AppRoute } from '/@/renderer/router/routes';
-import { useListStoreActions } from '/@/renderer/store';
-import { ListDisplayType, TablePagination } from '/@/renderer/types';
+} from '/@/shared/types/domain-types';
+import { ListDisplayType, TablePagination } from '/@/shared/types/types';
 
 export type AgGridFetchFn<TResponse, TFilter> = (
     args: { filter: TFilter; limit: number; startIndex: number },
@@ -295,7 +294,7 @@ export const useVirtualTable = <TFilter extends BaseQuery<any>>({
         if (!columnsOrder) return;
 
         const columnsInSettings = properties.table.columns;
-        const updatedColumns = [];
+        const updatedColumns: PersistedTableColumn[] = [];
         for (const column of columnsOrder) {
             const columnInSettings = columnsInSettings.find(
                 (c) => c.column === column.getColDef().colId,

src/renderer/components/virtual-table/index.tsx

@@ -39,17 +39,17 @@ import { TablePagination } from '/@/renderer/components/virtual-table/table-pagi
 import { useTableChange } from '/@/renderer/hooks/use-song-change';
 import { AppRoute } from '/@/renderer/router/routes';
 import { PersistedTableColumn } from '/@/renderer/store/settings.store';
-import {
-    PlayerStatus,
-    TableColumn,
-    TablePagination as TablePaginationType,
-} from '/@/renderer/types';
 import {
     formatDateAbsolute,
     formatDateAbsoluteUTC,
     formatDateRelative,
     formatSizeString,
 } from '/@/renderer/utils/format';
+import {
+    PlayerStatus,
+    TableColumn,
+    TablePagination as TablePaginationType,
+} from '/@/shared/types/types';
 
 export * from './hooks/use-click-outside-deselect';
 export * from './hooks/use-fixed-table-header';

src/renderer/components/virtual-table/table-config-dropdown.tsx

@@ -8,7 +8,7 @@ import { MultiSelect } from '/@/renderer/components/select';
 import { Slider } from '/@/renderer/components/slider';
 import { Switch } from '/@/renderer/components/switch';
 import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store/settings.store';
-import { TableColumn, TableType } from '/@/renderer/types';
+import { TableColumn, TableType } from '/@/shared/types/types';
 
 export const SONG_TABLE_COLUMNS = [
     {

src/renderer/components/virtual-table/table-pagination.tsx

@@ -7,16 +7,15 @@ import { MutableRefObject } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RiHashtag } from 'react-icons/ri';
 
-import { MotionFlex } from '../motion';
-
 import { Button } from '/@/renderer/components/button';
 import { NumberInput } from '/@/renderer/components/input';
+import { MotionFlex } from '/@/renderer/components/motion';
 import { Pagination } from '/@/renderer/components/pagination';
 import { Popover } from '/@/renderer/components/popover';
 import { Text } from '/@/renderer/components/text';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { ListKey } from '/@/renderer/store';
-import { TablePagination as TablePaginationType } from '/@/renderer/types';
+import { TablePagination as TablePaginationType } from '/@/shared/types/types';
 
 interface TablePaginationProps {
     pageKey: ListKey;

src/renderer/context/list-context.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
 
 import { ListKey } from '/@/renderer/store';
-import { Play } from '/@/renderer/types';
+import { Play } from '/@/shared/types/types';
 
 interface ListContextProps {
     customFilters?: Record<string, unknown>;

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

@@ -4,12 +4,12 @@ import { useTranslation } from 'react-i18next';
 
 import { Button, Checkbox, FileInput, Text } from '/@/renderer/components';
 import { usePlaybackSettings, useSettingsStoreActions } from '/@/renderer/store';
-import { PlaybackType } from '/@/renderer/types';
+import { PlaybackType } from '/@/shared/types/types';
 
 const localSettings = isElectron() ? window.api.localSettings : null;
 
 export const MpvRequired = () => {
-    const [mpvPath, setMpvPath] = useState('');
+    const [, setMpvPath] = useState('');
     const settings = usePlaybackSettings();
     const { setSettings } = useSettingsStoreActions();
     const [disabled, setDisabled] = useState(false);
@@ -50,7 +50,6 @@ export const MpvRequired = () => {
             <FileInput
                 disabled={disabled}
                 onChange={handleSetMpvPath}
-                placeholder={mpvPath}
             />
             <Text>{t('setting.disable_mpv', { context: 'description' })}</Text>
             <Checkbox

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

@@ -13,13 +13,6 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { queryKeys } from '/@/renderer/api/query-keys';
-import {
-    AlbumListQuery,
-    AlbumListSort,
-    LibraryItem,
-    QueueSong,
-    SortOrder,
-} from '/@/renderer/api/types';
 import { Button, Popover, Spoiler } from '/@/renderer/components';
 import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
 import {
@@ -47,13 +40,21 @@ import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useCurrentSong, useCurrentStatus } from '/@/renderer/store';
 import {
+    PersistedTableColumn,
     useGeneralSettings,
     usePlayButtonBehavior,
     useSettingsStoreActions,
     useTableSettings,
 } from '/@/renderer/store/settings.store';
-import { Play } from '/@/renderer/types';
 import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
+import {
+    AlbumListQuery,
+    AlbumListSort,
+    LibraryItem,
+    QueueSong,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 
 const isFullWidthRow = (node: RowNode) => {
     return node.id?.startsWith('disc-');
@@ -305,7 +306,7 @@ export const AlbumDetailContent = ({ background, tableRef }: AlbumDetailContentP
         if (!columnsOrder) return;
 
         const columnsInSettings = tableConfig.columns;
-        const updatedColumns = [];
+        const updatedColumns: PersistedTableColumn[] = [];
         for (const column of columnsOrder) {
             const columnInSettings = columnsInSettings.find(
                 (c) => c.column === column.getColDef().colId,

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

@@ -5,7 +5,6 @@ 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';
@@ -15,6 +14,7 @@ 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 { AlbumDetailResponse, LibraryItem, ServerType } from '/@/shared/types/domain-types';
 
 interface AlbumDetailHeaderProps {
     background: {

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

@@ -6,7 +6,7 @@ import { Spinner } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { useListContext } from '/@/renderer/context/list-context';
 import { useListStoreByKey } from '/@/renderer/store';
-import { ListDisplayType } from '/@/renderer/types';
+import { ListDisplayType } from '/@/shared/types/types';
 
 const AlbumListGridView = lazy(() =>
     import('/@/renderer/features/albums/components/album-list-grid-view').then((module) => ({

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

@@ -6,13 +6,6 @@ import { ListOnScrollProps } from 'react-window';
 
 import { controller } from '/@/renderer/api/controller';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import {
-    Album,
-    AlbumListQuery,
-    AlbumListResponse,
-    AlbumListSort,
-    LibraryItem,
-} from '/@/renderer/api/types';
 import { ALBUM_CARD_ROWS } from '/@/renderer/components';
 import {
     VirtualGridAutoSizerContainer,
@@ -23,7 +16,14 @@ 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 {
+    Album,
+    AlbumListQuery,
+    AlbumListResponse,
+    AlbumListSort,
+    LibraryItem,
+} from '/@/shared/types/domain-types';
+import { CardRow, ListDisplayType } from '/@/shared/types/types';
 
 export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
     const queryClient = useQueryClient();
@@ -134,7 +134,7 @@ export const AlbumListGridView = ({ gridRef, itemCount }: any) => {
             stale: false,
         });
 
-        const itemData = [];
+        const itemData: Album[] = [];
 
         for (const [, data] of queriesFromCache) {
             const { items, startIndex } = data || {};

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

@@ -18,13 +18,6 @@ import {
 
 import i18n from '/@/i18n/i18n';
 import { queryKeys } from '/@/renderer/api/query-keys';
-import {
-    AlbumListQuery,
-    AlbumListSort,
-    LibraryItem,
-    ServerType,
-    SortOrder,
-} from '/@/renderer/api/types';
 import { Button, DropdownMenu, MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ALBUM_TABLE_COLUMNS } from '/@/renderer/components/virtual-table';
@@ -41,7 +34,14 @@ import {
     useListStoreActions,
     useListStoreByKey,
 } from '/@/renderer/store';
-import { ListDisplayType, Play, TableColumn } from '/@/renderer/types';
+import {
+    AlbumListQuery,
+    AlbumListSort,
+    LibraryItem,
+    ServerType,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { ListDisplayType, Play, TableColumn } from '/@/shared/types/types';
 
 const FILTERS = {
     jellyfin: [
@@ -314,7 +314,7 @@ export const AlbumListHeaderFilters = ({
         (e: MouseEvent<HTMLButtonElement>) => {
             if (!e.currentTarget?.value) return;
 
-            let updatedFilters = null;
+            let updatedFilters: AlbumListFilter | null = null;
             if (e.currentTarget.value === String(filter.musicFolderId)) {
                 updatedFilters = setFilter({
                     customFilters,

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

@@ -5,7 +5,6 @@ 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';
@@ -14,6 +13,7 @@ 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 { AlbumListQuery, LibraryItem } from '/@/shared/types/domain-types';
 
 interface AlbumListHeaderProps {
     genreId?: string;
@@ -34,7 +34,7 @@ export const AlbumListHeader = ({
     const server = useCurrentServer();
     const cq = useContainerQuery();
     const playButtonBehavior = usePlayButtonBehavior();
-    const genreRef = useRef<string>();
+    const genreRef = useRef<string | undefined>(undefined);
     const { filter, handlePlay, refresh, search } = useDisplayRefresh<AlbumListQuery>({
         gridRef,
         itemCount,

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

@@ -1,11 +1,10 @@
-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';
+import { useVirtualTable } from '/@/renderer/components/virtual-table/hooks/use-virtual-table';
 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';
+import { LibraryItem } from '/@/shared/types/domain-types';
 
 export const AlbumListTableView = ({ itemCount, tableRef }: any) => {
     const server = useCurrentServer();

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

@@ -3,21 +3,19 @@ import debounce from 'lodash/debounce';
 import { ChangeEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useListFilterByKey } from '../../../store/list.store';
-
+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 { useTagList } from '/@/renderer/features/tag/queries/use-tag-list';
+import { AlbumListFilter, useListFilterByKey, useListStoreActions } from '/@/renderer/store';
 import {
     AlbumArtistListSort,
     AlbumListQuery,
     GenreListSort,
     LibraryItem,
     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 { useTagList } from '/@/renderer/features/tag/queries/use-tag-list';
-import { AlbumListFilter, useListStoreActions } from '/@/renderer/store';
+} from '/@/shared/types/domain-types';
 
 interface JellyfinAlbumFiltersProps {
     customFilters?: Partial<AlbumListFilter>;

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

@@ -3,19 +3,19 @@ import debounce from 'lodash/debounce';
 import { ChangeEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
-    AlbumArtistListSort,
-    AlbumListQuery,
-    GenreListSort,
-    LibraryItem,
-    SortOrder,
-} from '/@/renderer/api/types';
 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';
+import {
+    AlbumArtistListSort,
+    AlbumListQuery,
+    GenreListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
 
 interface NavidromeAlbumFiltersProps {
     customFilters?: Partial<AlbumListFilter>;

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

@@ -3,10 +3,15 @@ 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';
 import { AlbumListFilter, useListStoreActions, useListStoreByKey } from '/@/renderer/store';
+import {
+    AlbumListQuery,
+    GenreListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
 
 interface SubsonicAlbumFiltersProps {
     onFilterChange: (filters: AlbumListFilter) => void;

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

@@ -1,12 +1,11 @@
-import type { AlbumDetailQuery } from '/@/renderer/api/types';
 import type { QueryHookArgs } from '/@/renderer/lib/react-query';
+import type { AlbumDetailQuery } from '/@/shared/types/domain-types';
 
 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';
+import { getServerById } from '/@/renderer/store';
 
 export const useAlbumDetail = (args: QueryHookArgs<AlbumDetailQuery>) => {
     const { options, query, serverId } = args;

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

@@ -1,5 +1,5 @@
-import type { AlbumListQuery } from '/@/renderer/api/types';
 import type { QueryHookArgs } from '/@/renderer/lib/react-query';
+import type { AlbumListQuery } from '/@/shared/types/domain-types';
 
 import { useQuery } from '@tanstack/react-query';
 

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

@@ -1,5 +1,5 @@
-import type { AlbumListQuery, AlbumListResponse } from '/@/renderer/api/types';
 import type { QueryHookArgs } from '/@/renderer/lib/react-query';
+import type { AlbumListQuery, AlbumListResponse } from '/@/shared/types/domain-types';
 
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 

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

@@ -3,7 +3,6 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { useRef } from 'react';
 import { useParams } from 'react-router';
 
-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';
@@ -13,6 +12,7 @@ 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';
+import { LibraryItem } from '/@/shared/types/domain-types';
 
 const AlbumDetailRoute = () => {
     const tableRef = useRef<AgGridReactType | null>(null);

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

@@ -7,19 +7,24 @@ 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';
 import { VirtualInfiniteGridRef } from '/@/renderer/components/virtual-grid';
 import { ListContext } from '/@/renderer/context/list-context';
 import { AlbumListContent } from '/@/renderer/features/albums/components/album-list-content';
 import { AlbumListHeader } from '/@/renderer/features/albums/components/album-list-header';
+import { useAlbumListCount } from '/@/renderer/features/albums/queries/album-list-count-query';
+import { useGenreList } from '/@/renderer/features/genres';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { queryClient } from '/@/renderer/lib/react-query';
 import { useCurrentServer, useListFilterByKey } from '/@/renderer/store';
-import { Play } from '/@/renderer/types';
-import { useGenreList } from '/@/renderer/features/genres';
 import { sentenceCase, titleCase } from '/@/renderer/utils';
-import { useAlbumListCount } from '/@/renderer/features/albums/queries/album-list-count-query';
+import {
+    AlbumListQuery,
+    GenreListSort,
+    LibraryItem,
+    SortOrder,
+} from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 
 const AlbumListRoute = () => {
     const { t } = useTranslation();