Lint all files

src/renderer/components/accordion/index.tsx

@@ -5,17 +5,17 @@ import styled from 'styled-components';
 type AccordionProps = MantineAccordionProps;
 
 const StyledAccordion = styled(MantineAccordion)`
-  & .mantine-Accordion-panel {
-    background: var(--paper-bg);
-  }
+    & .mantine-Accordion-panel {
+        background: var(--paper-bg);
+    }
 
-  .mantine-Accordion-control {
-    background: var(--paper-bg);
-  }
+    .mantine-Accordion-control {
+        background: var(--paper-bg);
+    }
 `;
 
 export const Accordion = ({ children, ...props }: AccordionProps) => {
-  return <StyledAccordion {...props}>{children}</StyledAccordion>;
+    return <StyledAccordion {...props}>{children}</StyledAccordion>;
 };
 
 Accordion.Control = StyledAccordion.Control;

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

@@ -4,188 +4,192 @@ import type { ReactPlayerProps } from 'react-player';
 import ReactPlayer from 'react-player';
 import type { Song } from '/@/renderer/api/types';
 import {
-  crossfadeHandler,
-  gaplessHandler,
+    crossfadeHandler,
+    gaplessHandler,
 } from '/@/renderer/components/audio-player/utils/list-handlers';
 import { useSettingsStore } from '/@/renderer/store/settings.store';
 import type { CrossfadeStyle } from '/@/renderer/types';
 import { PlaybackStyle, PlayerStatus } from '/@/renderer/types';
 
 interface AudioPlayerProps extends ReactPlayerProps {
-  crossfadeDuration: number;
-  crossfadeStyle: CrossfadeStyle;
-  currentPlayer: 1 | 2;
-  playbackStyle: PlaybackStyle;
-  player1: Song;
-  player2: Song;
-  status: PlayerStatus;
-  volume: number;
+    crossfadeDuration: number;
+    crossfadeStyle: CrossfadeStyle;
+    currentPlayer: 1 | 2;
+    playbackStyle: PlaybackStyle;
+    player1: Song;
+    player2: Song;
+    status: PlayerStatus;
+    volume: number;
 }
 
 export type AudioPlayerProgress = {
-  loaded: number;
-  loadedSeconds: number;
-  played: number;
-  playedSeconds: number;
+    loaded: number;
+    loadedSeconds: number;
+    played: number;
+    playedSeconds: number;
 };
 
 const getDuration = (ref: any) => {
-  return ref.current?.player?.player?.player?.duration;
+    return ref.current?.player?.player?.player?.duration;
 };
 
 export const AudioPlayer = forwardRef(
-  (
-    {
-      status,
-      playbackStyle,
-      crossfadeStyle,
-      crossfadeDuration,
-      currentPlayer,
-      autoNext,
-      player1,
-      player2,
-      muted,
-      volume,
-    }: AudioPlayerProps,
-    ref: any,
-  ) => {
-    const player1Ref = useRef<any>(null);
-    const player2Ref = useRef<any>(null);
-    const [isTransitioning, setIsTransitioning] = useState(false);
-    const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
+    (
+        {
+            status,
+            playbackStyle,
+            crossfadeStyle,
+            crossfadeDuration,
+            currentPlayer,
+            autoNext,
+            player1,
+            player2,
+            muted,
+            volume,
+        }: AudioPlayerProps,
+        ref: any,
+    ) => {
+        const player1Ref = useRef<any>(null);
+        const player2Ref = useRef<any>(null);
+        const [isTransitioning, setIsTransitioning] = useState(false);
+        const audioDeviceId = useSettingsStore((state) => state.playback.audioDeviceId);
 
-    useImperativeHandle(ref, () => ({
-      get player1() {
-        return player1Ref?.current;
-      },
-      get player2() {
-        return player2Ref?.current;
-      },
-    }));
+        useImperativeHandle(ref, () => ({
+            get player1() {
+                return player1Ref?.current;
+            },
+            get player2() {
+                return player2Ref?.current;
+            },
+        }));
 
-    const handleOnEnded = () => {
-      autoNext();
-      setIsTransitioning(false);
-    };
+        const handleOnEnded = () => {
+            autoNext();
+            setIsTransitioning(false);
+        };
 
-    useEffect(() => {
-      if (status === PlayerStatus.PLAYING) {
-        if (currentPlayer === 1) {
-          player1Ref.current?.getInternalPlayer()?.play();
-        } else {
-          player2Ref.current?.getInternalPlayer()?.play();
-        }
-      } else {
-        player1Ref.current?.getInternalPlayer()?.pause();
-        player2Ref.current?.getInternalPlayer()?.pause();
-      }
-    }, [currentPlayer, status]);
+        useEffect(() => {
+            if (status === PlayerStatus.PLAYING) {
+                if (currentPlayer === 1) {
+                    player1Ref.current?.getInternalPlayer()?.play();
+                } else {
+                    player2Ref.current?.getInternalPlayer()?.play();
+                }
+            } 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(() => {
-      if (isElectron()) {
-        if (audioDeviceId) {
-          player1Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
-          player2Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
-        } else {
-          player1Ref.current?.getInternalPlayer()?.setSinkId('');
-          player2Ref.current?.getInternalPlayer()?.setSinkId('');
-        }
-      }
-    }, [audioDeviceId]);
+        useEffect(() => {
+            if (isElectron()) {
+                if (audioDeviceId) {
+                    player1Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
+                    player2Ref.current?.getInternalPlayer()?.setSinkId(audioDeviceId);
+                } else {
+                    player1Ref.current?.getInternalPlayer()?.setSinkId('');
+                    player2Ref.current?.getInternalPlayer()?.setSinkId('');
+                }
+            }
+        }, [audioDeviceId]);
 
-    return (
-      <>
-        <ReactPlayer
-          ref={player1Ref}
-          height={0}
-          muted={muted}
-          playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
-          progressInterval={isTransitioning ? 10 : 250}
-          url={player1?.streamUrl}
-          volume={volume}
-          width={0}
-          onEnded={handleOnEnded}
-          onProgress={playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1}
-        />
-        <ReactPlayer
-          ref={player2Ref}
-          height={0}
-          muted={muted}
-          playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
-          progressInterval={isTransitioning ? 10 : 250}
-          url={player2?.streamUrl}
-          volume={volume}
-          width={0}
-          onEnded={handleOnEnded}
-          onProgress={playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2}
-        />
-      </>
-    );
-  },
+        return (
+            <>
+                <ReactPlayer
+                    ref={player1Ref}
+                    height={0}
+                    muted={muted}
+                    playing={currentPlayer === 1 && status === PlayerStatus.PLAYING}
+                    progressInterval={isTransitioning ? 10 : 250}
+                    url={player1?.streamUrl}
+                    volume={volume}
+                    width={0}
+                    onEnded={handleOnEnded}
+                    onProgress={
+                        playbackStyle === PlaybackStyle.GAPLESS ? handleGapless1 : handleCrossfade1
+                    }
+                />
+                <ReactPlayer
+                    ref={player2Ref}
+                    height={0}
+                    muted={muted}
+                    playing={currentPlayer === 2 && status === PlayerStatus.PLAYING}
+                    progressInterval={isTransitioning ? 10 : 250}
+                    url={player2?.streamUrl}
+                    volume={volume}
+                    width={0}
+                    onEnded={handleOnEnded}
+                    onProgress={
+                        playbackStyle === PlaybackStyle.GAPLESS ? handleGapless2 : handleCrossfade2
+                    }
+                />
+            </>
+        );
+    },
 );

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

@@ -3,129 +3,131 @@ import type { Dispatch } from 'react';
 import { CrossfadeStyle } from '/@/renderer/types';
 
 export const gaplessHandler = (args: {
-  currentTime: number;
-  duration: number;
-  isFlac: boolean;
-  isTransitioning: boolean;
-  nextPlayerRef: any;
-  setIsTransitioning: Dispatch<boolean>;
+    currentTime: number;
+    duration: number;
+    isFlac: boolean;
+    isTransitioning: boolean;
+    nextPlayerRef: any;
+    setIsTransitioning: Dispatch<boolean>;
 }) => {
-  const { nextPlayerRef, currentTime, duration, isTransitioning, setIsTransitioning, isFlac } =
-    args;
+    const { nextPlayerRef, currentTime, duration, isTransitioning, setIsTransitioning, isFlac } =
+        args;
 
-  if (!isTransitioning) {
-    if (currentTime > duration - 2) {
-      return setIsTransitioning(true);
+    if (!isTransitioning) {
+        if (currentTime > duration - 2) {
+            return setIsTransitioning(true);
+        }
+
+        return null;
+    }
+
+    const durationPadding = isFlac ? 0.065 : 0.116;
+    if (currentTime + durationPadding >= duration) {
+        return nextPlayerRef.current.getInternalPlayer().play();
     }
 
     return null;
-  }
-
-  const durationPadding = isFlac ? 0.065 : 0.116;
-  if (currentTime + durationPadding >= duration) {
-    return nextPlayerRef.current.getInternalPlayer().play();
-  }
-
-  return null;
 };
 
 export const crossfadeHandler = (args: {
-  currentPlayer: 1 | 2;
-  currentPlayerRef: any;
-  currentTime: number;
-  duration: number;
-  fadeDuration: number;
-  fadeType: CrossfadeStyle;
-  isTransitioning: boolean;
-  nextPlayerRef: any;
-  player: 1 | 2;
-  setIsTransitioning: Dispatch<boolean>;
-  volume: number;
+    currentPlayer: 1 | 2;
+    currentPlayerRef: any;
+    currentTime: number;
+    duration: number;
+    fadeDuration: number;
+    fadeType: CrossfadeStyle;
+    isTransitioning: boolean;
+    nextPlayerRef: any;
+    player: 1 | 2;
+    setIsTransitioning: Dispatch<boolean>;
+    volume: number;
 }) => {
-  const {
-    currentTime,
-    player,
-    currentPlayer,
-    currentPlayerRef,
-    nextPlayerRef,
-    fadeDuration,
-    fadeType,
-    duration,
-    volume,
-    isTransitioning,
-    setIsTransitioning,
-  } = args;
+    const {
+        currentTime,
+        player,
+        currentPlayer,
+        currentPlayerRef,
+        nextPlayerRef,
+        fadeDuration,
+        fadeType,
+        duration,
+        volume,
+        isTransitioning,
+        setIsTransitioning,
+    } = args;
 
-  if (!isTransitioning || currentPlayer !== player) {
-    const shouldBeginTransition = currentTime >= duration - fadeDuration;
+    if (!isTransitioning || currentPlayer !== player) {
+        const shouldBeginTransition = currentTime >= duration - fadeDuration;
 
-    if (shouldBeginTransition) {
-      setIsTransitioning(true);
-      return nextPlayerRef.current.getInternalPlayer().play();
+        if (shouldBeginTransition) {
+            setIsTransitioning(true);
+            return nextPlayerRef.current.getInternalPlayer().play();
+        }
+        return null;
     }
+
+    const timeLeft = duration - currentTime;
+    let currentPlayerVolumeCalculation;
+    let nextPlayerVolumeCalculation;
+    let percentageOfFadeLeft;
+    let n;
+    switch (fadeType) {
+        case 'equalPower':
+            // https://dsp.stackexchange.com/a/14755
+            percentageOfFadeLeft = (timeLeft / fadeDuration) * 2;
+            currentPlayerVolumeCalculation = Math.sqrt(0.5 * percentageOfFadeLeft) * volume;
+            nextPlayerVolumeCalculation = Math.sqrt(0.5 * (2 - percentageOfFadeLeft)) * volume;
+            break;
+        case 'linear':
+            currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
+            nextPlayerVolumeCalculation = ((fadeDuration - timeLeft) / fadeDuration) * volume;
+            break;
+        case 'dipped':
+            // https://math.stackexchange.com/a/4622
+            percentageOfFadeLeft = timeLeft / fadeDuration;
+            currentPlayerVolumeCalculation = percentageOfFadeLeft ** 2 * volume;
+            nextPlayerVolumeCalculation = (percentageOfFadeLeft - 1) ** 2 * volume;
+            break;
+        case fadeType.match(/constantPower.*/)?.input:
+            // https://math.stackexchange.com/a/26159
+            n =
+                fadeType === 'constantPower'
+                    ? 0
+                    : fadeType === 'constantPowerSlowFade'
+                    ? 1
+                    : fadeType === 'constantPowerSlowCut'
+                    ? 3
+                    : 10;
+
+            percentageOfFadeLeft = timeLeft / fadeDuration;
+            currentPlayerVolumeCalculation =
+                Math.cos((Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) - 1)) *
+                volume;
+            nextPlayerVolumeCalculation =
+                Math.cos((Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) + 1)) *
+                volume;
+            break;
+
+        default:
+            currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
+            nextPlayerVolumeCalculation = ((fadeDuration - timeLeft) / fadeDuration) * volume;
+            break;
+    }
+
+    const currentPlayerVolume =
+        currentPlayerVolumeCalculation >= 0 ? currentPlayerVolumeCalculation : 0;
+
+    const nextPlayerVolume =
+        nextPlayerVolumeCalculation <= volume ? nextPlayerVolumeCalculation : volume;
+
+    if (currentPlayer === 1) {
+        currentPlayerRef.current.getInternalPlayer().volume = currentPlayerVolume;
+        nextPlayerRef.current.getInternalPlayer().volume = nextPlayerVolume;
+    } else {
+        currentPlayerRef.current.getInternalPlayer().volume = currentPlayerVolume;
+        nextPlayerRef.current.getInternalPlayer().volume = nextPlayerVolume;
+    }
+    // }
+
     return null;
-  }
-
-  const timeLeft = duration - currentTime;
-  let currentPlayerVolumeCalculation;
-  let nextPlayerVolumeCalculation;
-  let percentageOfFadeLeft;
-  let n;
-  switch (fadeType) {
-    case 'equalPower':
-      // https://dsp.stackexchange.com/a/14755
-      percentageOfFadeLeft = (timeLeft / fadeDuration) * 2;
-      currentPlayerVolumeCalculation = Math.sqrt(0.5 * percentageOfFadeLeft) * volume;
-      nextPlayerVolumeCalculation = Math.sqrt(0.5 * (2 - percentageOfFadeLeft)) * volume;
-      break;
-    case 'linear':
-      currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
-      nextPlayerVolumeCalculation = ((fadeDuration - timeLeft) / fadeDuration) * volume;
-      break;
-    case 'dipped':
-      // https://math.stackexchange.com/a/4622
-      percentageOfFadeLeft = timeLeft / fadeDuration;
-      currentPlayerVolumeCalculation = percentageOfFadeLeft ** 2 * volume;
-      nextPlayerVolumeCalculation = (percentageOfFadeLeft - 1) ** 2 * volume;
-      break;
-    case fadeType.match(/constantPower.*/)?.input:
-      // https://math.stackexchange.com/a/26159
-      n =
-        fadeType === 'constantPower'
-          ? 0
-          : fadeType === 'constantPowerSlowFade'
-          ? 1
-          : fadeType === 'constantPowerSlowCut'
-          ? 3
-          : 10;
-
-      percentageOfFadeLeft = timeLeft / fadeDuration;
-      currentPlayerVolumeCalculation =
-        Math.cos((Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) - 1)) * volume;
-      nextPlayerVolumeCalculation =
-        Math.cos((Math.PI / 4) * ((2 * percentageOfFadeLeft - 1) ** (2 * n + 1) + 1)) * volume;
-      break;
-
-    default:
-      currentPlayerVolumeCalculation = (timeLeft / fadeDuration) * volume;
-      nextPlayerVolumeCalculation = ((fadeDuration - timeLeft) / fadeDuration) * volume;
-      break;
-  }
-
-  const currentPlayerVolume =
-    currentPlayerVolumeCalculation >= 0 ? currentPlayerVolumeCalculation : 0;
-
-  const nextPlayerVolume =
-    nextPlayerVolumeCalculation <= volume ? nextPlayerVolumeCalculation : volume;
-
-  if (currentPlayer === 1) {
-    currentPlayerRef.current.getInternalPlayer().volume = currentPlayerVolume;
-    nextPlayerRef.current.getInternalPlayer().volume = nextPlayerVolume;
-  } else {
-    currentPlayerRef.current.getInternalPlayer().volume = currentPlayerVolume;
-    nextPlayerRef.current.getInternalPlayer().volume = nextPlayerVolume;
-  }
-  // }
-
-  return null;
 };

src/renderer/components/badge/index.tsx

@@ -5,30 +5,30 @@ import styled from 'styled-components';
 export type BadgeProps = MantineBadgeProps;
 
 const StyledBadge = styled(MantineBadge)<BadgeProps>`
-  border-radius: var(--badge-radius);
+    border-radius: var(--badge-radius);
 
-  .mantine-Badge-root {
-    color: var(--badge-fg);
-  }
+    .mantine-Badge-root {
+        color: var(--badge-fg);
+    }
 
-  .mantine-Badge-inner {
-    color: var(--badge-fg);
-  }
+    .mantine-Badge-inner {
+        color: var(--badge-fg);
+    }
 `;
 
 const _Badge = ({ children, ...props }: BadgeProps) => {
-  return (
-    <StyledBadge
-      radius="md"
-      size="sm"
-      styles={{
-        root: { background: 'var(--badge-bg)' },
-      }}
-      {...props}
-    >
-      {children}
-    </StyledBadge>
-  );
+    return (
+        <StyledBadge
+            radius="md"
+            size="sm"
+            styles={{
+                root: { background: 'var(--badge-bg)' },
+            }}
+            {...props}
+        >
+            {children}
+        </StyledBadge>
+    );
 };
 
 export const Badge = createPolymorphicComponent<'button', BadgeProps>(_Badge);

src/renderer/components/button/index.tsx

@@ -8,177 +8,177 @@ import { Spinner } from '/@/renderer/components/spinner';
 import { Tooltip } from '/@/renderer/components/tooltip';
 
 export interface ButtonProps extends MantineButtonProps {
-  children: React.ReactNode;
-  loading?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  tooltip?: Omit<TooltipProps, 'children'>;
+    children: React.ReactNode;
+    loading?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    tooltip?: Omit<TooltipProps, 'children'>;
 }
 
 interface StyledButtonProps extends ButtonProps {
-  ref: Ref<HTMLButtonElement>;
+    ref: Ref<HTMLButtonElement>;
 }
 
 const StyledButton = styled(MantineButton)<StyledButtonProps>`
-  color: ${(props) => `var(--btn-${props.variant}-fg)`};
-  background: ${(props) => `var(--btn-${props.variant}-bg)`};
-  border: ${(props) => `var(--btn-${props.variant}-border)`};
-  border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
-  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
-
-  svg {
-    transition: fill 0.2s ease-in-out;
-    fill: ${(props) => `var(--btn-${props.variant}-fg)`};
-  }
-
-  &:disabled {
     color: ${(props) => `var(--btn-${props.variant}-fg)`};
     background: ${(props) => `var(--btn-${props.variant}-bg)`};
-
-    opacity: 0.6;
-  }
-
-  &:not([data-disabled])&:hover {
-    color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
-    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
-    border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
+    border: ${(props) => `var(--btn-${props.variant}-border)`};
+    border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
+    transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
 
     svg {
-      fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+        transition: fill 0.2s ease-in-out;
+        fill: ${(props) => `var(--btn-${props.variant}-fg)`};
     }
-  }
 
-  &:not([data-disabled])&:focus-visible {
-    color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
-    background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
-  }
+    &:disabled {
+        color: ${(props) => `var(--btn-${props.variant}-fg)`};
+        background: ${(props) => `var(--btn-${props.variant}-bg)`};
 
-  &:active {
-    transform: none;
-  }
+        opacity: 0.6;
+    }
 
-  & .mantine-Button-centerLoader {
-    display: none;
-  }
+    &:not([data-disabled])&:hover {
+        color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
+        background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+        border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
 
-  & .mantine-Button-leftIcon {
-    display: flex;
-    height: 100%;
-    margin-right: 0.5rem;
-    transform: translateY(-0.1rem);
-  }
+        svg {
+            fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+        }
+    }
 
-  .mantine-Button-rightIcon {
-    display: flex;
-    margin-left: 0.5rem;
-  }
+    &:not([data-disabled])&:focus-visible {
+        color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
+        background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
+    }
+
+    &:active {
+        transform: none;
+    }
+
+    & .mantine-Button-centerLoader {
+        display: none;
+    }
+
+    & .mantine-Button-leftIcon {
+        display: flex;
+        height: 100%;
+        margin-right: 0.5rem;
+        transform: translateY(-0.1rem);
+    }
+
+    .mantine-Button-rightIcon {
+        display: flex;
+        margin-left: 0.5rem;
+    }
 `;
 
 const ButtonChildWrapper = styled.span<{ $loading?: boolean }>`
-  color: ${(props) => props.$loading && 'transparent !important'};
+    color: ${(props) => props.$loading && 'transparent !important'};
 `;
 
 const SpinnerWrapper = styled.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
 `;
 
 export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, tooltip, ...props }: ButtonProps, ref) => {
-    if (tooltip) {
-      return (
-        <Tooltip
-          withinPortal
-          {...tooltip}
-        >
-          <StyledButton
-            ref={ref}
-            loaderPosition="center"
-            {...props}
-          >
-            <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
-            {props.loading && (
-              <SpinnerWrapper>
-                <Spinner />
-              </SpinnerWrapper>
-            )}
-          </StyledButton>
-        </Tooltip>
-      );
-    }
+    ({ children, tooltip, ...props }: ButtonProps, ref) => {
+        if (tooltip) {
+            return (
+                <Tooltip
+                    withinPortal
+                    {...tooltip}
+                >
+                    <StyledButton
+                        ref={ref}
+                        loaderPosition="center"
+                        {...props}
+                    >
+                        <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
+                        {props.loading && (
+                            <SpinnerWrapper>
+                                <Spinner />
+                            </SpinnerWrapper>
+                        )}
+                    </StyledButton>
+                </Tooltip>
+            );
+        }
 
-    return (
-      <StyledButton
-        ref={ref}
-        loaderPosition="center"
-        {...props}
-      >
-        <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
-        {props.loading && (
-          <SpinnerWrapper>
-            <Spinner />
-          </SpinnerWrapper>
-        )}
-      </StyledButton>
-    );
-  },
+        return (
+            <StyledButton
+                ref={ref}
+                loaderPosition="center"
+                {...props}
+            >
+                <ButtonChildWrapper $loading={props.loading}>{children}</ButtonChildWrapper>
+                {props.loading && (
+                    <SpinnerWrapper>
+                        <Spinner />
+                    </SpinnerWrapper>
+                )}
+            </StyledButton>
+        );
+    },
 );
 
 export const Button = createPolymorphicComponent<'button', ButtonProps>(_Button);
 
 _Button.defaultProps = {
-  loading: undefined,
-  onClick: undefined,
-  tooltip: undefined,
+    loading: undefined,
+    onClick: undefined,
+    tooltip: undefined,
 };
 
 interface HoldButtonProps extends ButtonProps {
-  timeoutProps: {
-    callback: () => void;
-    duration: number;
-  };
+    timeoutProps: {
+        callback: () => void;
+        duration: number;
+    };
 }
 
 export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
-  const [, setTimeoutRemaining] = useState(timeoutProps.duration);
-  const [isRunning, setIsRunning] = useState(false);
-  const intervalRef = useRef(0);
+    const [, setTimeoutRemaining] = useState(timeoutProps.duration);
+    const [isRunning, setIsRunning] = useState(false);
+    const intervalRef = useRef(0);
 
-  const callback = () => {
-    timeoutProps.callback();
-    setTimeoutRemaining(timeoutProps.duration);
-    clearInterval(intervalRef.current);
-    setIsRunning(false);
-  };
+    const callback = () => {
+        timeoutProps.callback();
+        setTimeoutRemaining(timeoutProps.duration);
+        clearInterval(intervalRef.current);
+        setIsRunning(false);
+    };
 
-  const { start, clear } = useTimeout(callback, timeoutProps.duration);
+    const { start, clear } = useTimeout(callback, timeoutProps.duration);
 
-  const startTimeout = useCallback(() => {
-    if (isRunning) {
-      clearInterval(intervalRef.current);
-      setIsRunning(false);
-      clear();
-    } else {
-      setIsRunning(true);
-      start();
+    const startTimeout = useCallback(() => {
+        if (isRunning) {
+            clearInterval(intervalRef.current);
+            setIsRunning(false);
+            clear();
+        } else {
+            setIsRunning(true);
+            start();
 
-      const intervalId = window.setInterval(() => {
-        setTimeoutRemaining((prev) => prev - 100);
-      }, 100);
+            const intervalId = window.setInterval(() => {
+                setTimeoutRemaining((prev) => prev - 100);
+            }, 100);
 
-      intervalRef.current = intervalId;
-    }
-  }, [clear, isRunning, start]);
+            intervalRef.current = intervalId;
+        }
+    }, [clear, isRunning, start]);
 
-  return (
-    <Button
-      sx={{ color: 'var(--danger-color)' }}
-      onClick={startTimeout}
-      {...props}
-    >
-      {isRunning ? 'Cancel' : props.children}
-    </Button>
-  );
+    return (
+        <Button
+            sx={{ color: 'var(--danger-color)' }}
+            onClick={startTimeout}
+            {...props}
+        >
+            {isRunning ? 'Cancel' : props.children}
+        </Button>
+    );
 };

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

@@ -11,208 +11,208 @@ import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
 import { CardRows } from '/@/renderer/components/card/card-rows';
 
 const CardWrapper = styled.div<{
-  link?: boolean;
+    link?: boolean;
 }>`
-  padding: 1rem;
-  background: var(--card-default-bg);
-  border-radius: var(--card-default-radius);
-  cursor: ${({ link }) => link && 'pointer'};
-  transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
+    padding: 1rem;
+    background: var(--card-default-bg);
+    border-radius: var(--card-default-radius);
+    cursor: ${({ link }) => link && 'pointer'};
+    transition: border 0.2s ease-in-out, background 0.2s ease-in-out;
 
-  &:hover {
-    background: var(--card-default-bg-hover);
-  }
-
-  &:hover div {
-    opacity: 1;
-  }
-
-  &:hover * {
-    &::before {
-      opacity: 0.5;
+    &:hover {
+        background: var(--card-default-bg-hover);
     }
-  }
 
-  &:focus-visible {
-    outline: 1px solid #fff;
-  }
+    &:hover div {
+        opacity: 1;
+    }
+
+    &:hover * {
+        &::before {
+            opacity: 0.5;
+        }
+    }
+
+    &:focus-visible {
+        outline: 1px solid #fff;
+    }
 `;
 
 const StyledCard = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border-radius: var(--card-default-radius);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border-radius: var(--card-default-radius);
 `;
 
 const ImageSection = styled.div`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  border-radius: var(--card-default-radius);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    border-radius: var(--card-default-radius);
 
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
-    opacity: 0;
-    transition: all 0.2s ease-in-out;
-    content: '';
-    user-select: none;
-  }
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
+        content: '';
+        user-select: none;
+    }
 `;
 
 const Image = styled(SimpleImg)`
-  border-radius: var(--card-default-radius);
-  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 20%);
+    border-radius: var(--card-default-radius);
+    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 20%);
 `;
 
 const ControlsContainer = styled.div`
-  position: absolute;
-  bottom: 0;
-  z-index: 50;
-  width: 100%;
-  opacity: 0;
-  transition: all 0.2s ease-in-out;
+    position: absolute;
+    bottom: 0;
+    z-index: 50;
+    width: 100%;
+    opacity: 0;
+    transition: all 0.2s ease-in-out;
 `;
 
 const DetailSection = styled.div`
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 `;
 
 const Row = styled.div<{ $secondary?: boolean }>`
-  width: 100%;
-  max-width: 100%;
-  height: 22px;
-  padding: 0 0.2rem;
-  overflow: hidden;
-  color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  user-select: none;
+    width: 100%;
+    max-width: 100%;
+    height: 22px;
+    padding: 0 0.2rem;
+    overflow: hidden;
+    color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    user-select: none;
 `;
 
 interface BaseGridCardProps {
-  controls: {
-    cardRows: CardRow<Album | Artist | AlbumArtist>[];
-    itemType: LibraryItem;
-    playButtonBehavior: Play;
-    route: CardRoute;
-  };
-  data: any;
-  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
-  loading?: boolean;
-  size: number;
+    controls: {
+        cardRows: CardRow<Album | Artist | AlbumArtist>[];
+        itemType: LibraryItem;
+        playButtonBehavior: Play;
+        route: CardRoute;
+    };
+    data: any;
+    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
+    loading?: boolean;
+    size: number;
 }
 
 export const AlbumCard = ({
-  loading,
-  size,
-  handlePlayQueueAdd,
-  data,
-  controls,
+    loading,
+    size,
+    handlePlayQueueAdd,
+    data,
+    controls,
 }: BaseGridCardProps) => {
-  const navigate = useNavigate();
-  const { itemType, cardRows, route } = controls;
+    const navigate = useNavigate();
+    const { itemType, cardRows, route } = controls;
 
-  const handleNavigate = useCallback(() => {
-    navigate(
-      generatePath(
-        route.route,
-        route.slugs?.reduce((acc, slug) => {
-          return {
-            ...acc,
-            [slug.slugProperty]: data[slug.idProperty],
-          };
-        }, {}),
-      ),
-    );
-  }, [data, navigate, route.route, route.slugs]);
+    const handleNavigate = useCallback(() => {
+        navigate(
+            generatePath(
+                route.route,
+                route.slugs?.reduce((acc, slug) => {
+                    return {
+                        ...acc,
+                        [slug.slugProperty]: data[slug.idProperty],
+                    };
+                }, {}),
+            ),
+        );
+    }, [data, navigate, route.route, route.slugs]);
 
-  if (!loading) {
-    return (
-      <CardWrapper
-        link
-        onClick={handleNavigate}
-      >
-        <StyledCard>
-          <ImageSection>
-            {data?.imageUrl ? (
-              <Image
-                animationDuration={0.3}
-                height={size}
-                imgStyle={{ objectFit: 'cover' }}
-                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
-                src={data?.imageUrl}
-                width={size}
-              />
-            ) : (
-              <Center
-                sx={{
-                  background: 'var(--placeholder-bg)',
-                  borderRadius: 'var(--card-default-radius)',
-                  height: `${size}px`,
-                  width: `${size}px`,
-                }}
-              >
-                <RiAlbumFill
-                  color="var(--placeholder-fg)"
-                  size={35}
-                />
-              </Center>
-            )}
-            <ControlsContainer>
-              <CardControls
-                handlePlayQueueAdd={handlePlayQueueAdd}
-                itemData={data}
-                itemType={itemType}
-              />
-            </ControlsContainer>
-          </ImageSection>
-          <DetailSection>
-            <CardRows
-              data={data}
-              rows={cardRows}
-            />
-          </DetailSection>
-        </StyledCard>
-      </CardWrapper>
-    );
-  }
-
-  return (
-    <CardWrapper>
-      <StyledCard style={{ alignItems: 'center', display: 'flex' }}>
-        <Skeleton
-          visible
-          height={size}
-          radius="sm"
-          width={size}
-        >
-          <ImageSection />
-        </Skeleton>
-        <DetailSection style={{ width: '100%' }}>
-          {cardRows.map((_row: CardRow<Album>, index: number) => (
-            <Skeleton
-              visible
-              height={15}
-              my={3}
-              radius="md"
-              width={!data ? (index > 0 ? '50%' : '90%') : '100%'}
+    if (!loading) {
+        return (
+            <CardWrapper
+                link
+                onClick={handleNavigate}
             >
-              <Row />
-            </Skeleton>
-          ))}
-        </DetailSection>
-      </StyledCard>
-    </CardWrapper>
-  );
+                <StyledCard>
+                    <ImageSection>
+                        {data?.imageUrl ? (
+                            <Image
+                                animationDuration={0.3}
+                                height={size}
+                                imgStyle={{ objectFit: 'cover' }}
+                                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
+                                src={data?.imageUrl}
+                                width={size}
+                            />
+                        ) : (
+                            <Center
+                                sx={{
+                                    background: 'var(--placeholder-bg)',
+                                    borderRadius: 'var(--card-default-radius)',
+                                    height: `${size}px`,
+                                    width: `${size}px`,
+                                }}
+                            >
+                                <RiAlbumFill
+                                    color="var(--placeholder-fg)"
+                                    size={35}
+                                />
+                            </Center>
+                        )}
+                        <ControlsContainer>
+                            <CardControls
+                                handlePlayQueueAdd={handlePlayQueueAdd}
+                                itemData={data}
+                                itemType={itemType}
+                            />
+                        </ControlsContainer>
+                    </ImageSection>
+                    <DetailSection>
+                        <CardRows
+                            data={data}
+                            rows={cardRows}
+                        />
+                    </DetailSection>
+                </StyledCard>
+            </CardWrapper>
+        );
+    }
+
+    return (
+        <CardWrapper>
+            <StyledCard style={{ alignItems: 'center', display: 'flex' }}>
+                <Skeleton
+                    visible
+                    height={size}
+                    radius="sm"
+                    width={size}
+                >
+                    <ImageSection />
+                </Skeleton>
+                <DetailSection style={{ width: '100%' }}>
+                    {cardRows.map((_row: CardRow<Album>, index: number) => (
+                        <Skeleton
+                            visible
+                            height={15}
+                            my={3}
+                            radius="md"
+                            width={!data ? (index > 0 ? '50%' : '90%') : '100%'}
+                        >
+                            <Row />
+                        </Skeleton>
+                    ))}
+                </DetailSection>
+            </StyledCard>
+        </CardWrapper>
+    );
 };

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

@@ -11,69 +11,69 @@ import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/renderer/api/types';
 import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
 import {
-  ALBUM_CONTEXT_MENU_ITEMS,
-  ARTIST_CONTEXT_MENU_ITEMS,
+    ALBUM_CONTEXT_MENU_ITEMS,
+    ARTIST_CONTEXT_MENU_ITEMS,
 } from '/@/renderer/features/context-menu/context-menu-items';
 
 type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;
 
 const PlayButton = styled.button<PlayButtonType>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  height: 50px;
-  background-color: rgb(255, 255, 255);
-  border: none;
-  border-radius: 50%;
-  opacity: 0.8;
-  transition: opacity 0.2s ease-in-out;
-  transition: scale 0.2s linear;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: rgb(255, 255, 255);
+    border: none;
+    border-radius: 50%;
+    opacity: 0.8;
+    transition: opacity 0.2s ease-in-out;
+    transition: scale 0.2s linear;
 
-  &:hover {
-    opacity: 1;
-    scale: 1.1;
-  }
+    &:hover {
+        opacity: 1;
+        scale: 1.1;
+    }
 
-  &:active {
-    opacity: 1;
-    scale: 1;
-  }
+    &:active {
+        opacity: 1;
+        scale: 1;
+    }
 
-  svg {
-    fill: rgb(0, 0, 0);
-    stroke: rgb(0, 0, 0);
-  }
+    svg {
+        fill: rgb(0, 0, 0);
+        stroke: rgb(0, 0, 0);
+    }
 `;
 
 const SecondaryButton = styled(_Button)`
-  opacity: 0.8;
-  transition: opacity 0.2s ease-in-out;
-  transition: scale 0.2s linear;
+    opacity: 0.8;
+    transition: opacity 0.2s ease-in-out;
+    transition: scale 0.2s linear;
 
-  &:hover {
-    opacity: 1;
-    scale: 1.1;
-  }
+    &:hover {
+        opacity: 1;
+        scale: 1.1;
+    }
 
-  &:active {
-    opacity: 1;
-    scale: 1;
-  }
+    &:active {
+        opacity: 1;
+        scale: 1;
+    }
 `;
 
 const GridCardControlsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
 `;
 
 const ControlsRow = styled.div`
-  width: 100%;
-  height: calc(100% / 3);
+    width: 100%;
+    height: calc(100% / 3);
 `;
 
 // const TopControls = styled(ControlsRow)`
@@ -91,87 +91,87 @@ const ControlsRow = styled.div`
 // `;
 
 const BottomControls = styled(ControlsRow)`
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  padding: 1rem 0.5rem;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 1rem 0.5rem;
 `;
 
 const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
-  svg {
-    fill: ${(props) => props.isFavorite && 'var(--primary-color)'};
-  }
+    svg {
+        fill: ${(props) => props.isFavorite && 'var(--primary-color)'};
+    }
 `;
 
 export const CardControls = ({
-  itemData,
-  itemType,
-  handlePlayQueueAdd,
-}: {
-  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
-  itemData: any;
-  itemType: LibraryItem;
-}) => {
-  const playButtonBehavior = usePlayButtonBehavior();
-
-  const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
-    e.preventDefault();
-    e.stopPropagation();
-    handlePlayQueueAdd?.({
-      byItemType: {
-        id: [itemData.id],
-        type: itemType,
-      },
-      playType: playType || playButtonBehavior,
-    });
-  };
-
-  const handleContextMenu = useHandleGeneralContextMenu(
+    itemData,
     itemType,
-    itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
-  );
+    handlePlayQueueAdd,
+}: {
+    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
+    itemData: any;
+    itemType: LibraryItem;
+}) => {
+    const playButtonBehavior = usePlayButtonBehavior();
 
-  return (
-    <GridCardControlsContainer>
-      <BottomControls>
-        <PlayButton onClick={handlePlay}>
-          <RiPlayFill size={25} />
-        </PlayButton>
-        <Group spacing="xs">
-          <SecondaryButton
-            disabled
-            p={5}
-            sx={{ svg: { fill: 'white !important' } }}
-            variant="subtle"
-          >
-            <FavoriteWrapper isFavorite={itemData?.isFavorite}>
-              {itemData?.isFavorite ? (
-                <RiHeartFill size={20} />
-              ) : (
-                <RiHeartLine
-                  color="white"
-                  size={20}
-                />
-              )}
-            </FavoriteWrapper>
-          </SecondaryButton>
-          <SecondaryButton
-            p={5}
-            sx={{ svg: { fill: 'white !important' } }}
-            variant="subtle"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleContextMenu(e, [itemData]);
-            }}
-          >
-            <RiMore2Fill
-              color="white"
-              size={20}
-            />
-          </SecondaryButton>
-        </Group>
-      </BottomControls>
-    </GridCardControlsContainer>
-  );
+    const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handlePlayQueueAdd?.({
+            byItemType: {
+                id: [itemData.id],
+                type: itemType,
+            },
+            playType: playType || playButtonBehavior,
+        });
+    };
+
+    const handleContextMenu = useHandleGeneralContextMenu(
+        itemType,
+        itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
+    );
+
+    return (
+        <GridCardControlsContainer>
+            <BottomControls>
+                <PlayButton onClick={handlePlay}>
+                    <RiPlayFill size={25} />
+                </PlayButton>
+                <Group spacing="xs">
+                    <SecondaryButton
+                        disabled
+                        p={5}
+                        sx={{ svg: { fill: 'white !important' } }}
+                        variant="subtle"
+                    >
+                        <FavoriteWrapper isFavorite={itemData?.isFavorite}>
+                            {itemData?.isFavorite ? (
+                                <RiHeartFill size={20} />
+                            ) : (
+                                <RiHeartLine
+                                    color="white"
+                                    size={20}
+                                />
+                            )}
+                        </FavoriteWrapper>
+                    </SecondaryButton>
+                    <SecondaryButton
+                        p={5}
+                        sx={{ svg: { fill: 'white !important' } }}
+                        variant="subtle"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleContextMenu(e, [itemData]);
+                        }}
+                    >
+                        <RiMore2Fill
+                            color="white"
+                            size={20}
+                        />
+                    </SecondaryButton>
+                </Group>
+            </BottomControls>
+        </GridCardControlsContainer>
+    );
 };

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

@@ -8,205 +8,208 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { CardRow } from '/@/renderer/types';
 
 const Row = styled.div<{ $secondary?: boolean }>`
-  width: 100%;
-  max-width: 100%;
-  height: 22px;
-  padding: 0 0.2rem;
-  overflow: hidden;
-  color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  user-select: none;
+    width: 100%;
+    max-width: 100%;
+    height: 22px;
+    padding: 0 0.2rem;
+    overflow: hidden;
+    color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    user-select: none;
 `;
 
 interface CardRowsProps {
-  data: any;
-  rows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+    data: any;
+    rows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
 }
 
 export const CardRows = ({ data, rows }: CardRowsProps) => {
-  return (
-    <>
-      {rows.map((row, index: number) => {
-        if (row.arrayProperty && row.route) {
-          return (
-            <Row
-              key={`row-${row.property}-${index}`}
-              $secondary={index > 0}
-            >
-              {data[row.property].map((item: any, itemIndex: number) => (
-                <React.Fragment key={`${data.id}-${item.id}`}>
-                  {itemIndex > 0 && (
-                    <Text
-                      $noSelect
-                      $secondary
-                      sx={{
-                        display: 'inline-block',
-                        padding: '0 2px 0 1px',
-                      }}
-                    >
-                      ,
-                    </Text>
-                  )}{' '}
-                  <Text
-                    $link
-                    $noSelect
-                    $secondary={index > 0}
-                    component={Link}
-                    overflow="hidden"
-                    size={index > 0 ? 'sm' : 'md'}
-                    to={generatePath(
-                      row.route!.route,
-                      row.route!.slugs?.reduce((acc, slug) => {
-                        return {
-                          ...acc,
-                          [slug.slugProperty]: data[row.property][itemIndex][slug.idProperty],
-                        };
-                      }, {}),
-                    )}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {row.arrayProperty && item[row.arrayProperty]}
-                  </Text>
-                </React.Fragment>
-              ))}
-            </Row>
-          );
-        }
+    return (
+        <>
+            {rows.map((row, index: number) => {
+                if (row.arrayProperty && row.route) {
+                    return (
+                        <Row
+                            key={`row-${row.property}-${index}`}
+                            $secondary={index > 0}
+                        >
+                            {data[row.property].map((item: any, itemIndex: number) => (
+                                <React.Fragment key={`${data.id}-${item.id}`}>
+                                    {itemIndex > 0 && (
+                                        <Text
+                                            $noSelect
+                                            $secondary
+                                            sx={{
+                                                display: 'inline-block',
+                                                padding: '0 2px 0 1px',
+                                            }}
+                                        >
+                                            ,
+                                        </Text>
+                                    )}{' '}
+                                    <Text
+                                        $link
+                                        $noSelect
+                                        $secondary={index > 0}
+                                        component={Link}
+                                        overflow="hidden"
+                                        size={index > 0 ? 'sm' : 'md'}
+                                        to={generatePath(
+                                            row.route!.route,
+                                            row.route!.slugs?.reduce((acc, slug) => {
+                                                return {
+                                                    ...acc,
+                                                    [slug.slugProperty]:
+                                                        data[row.property][itemIndex][
+                                                            slug.idProperty
+                                                        ],
+                                                };
+                                            }, {}),
+                                        )}
+                                        onClick={(e) => e.stopPropagation()}
+                                    >
+                                        {row.arrayProperty && item[row.arrayProperty]}
+                                    </Text>
+                                </React.Fragment>
+                            ))}
+                        </Row>
+                    );
+                }
 
-        if (row.arrayProperty) {
-          return (
-            <Row key={`row-${row.property}`}>
-              {data[row.property].map((item: any) => (
-                <Text
-                  key={`${data.id}-${item.id}`}
-                  $noSelect
-                  $secondary={index > 0}
-                  overflow="hidden"
-                  size={index > 0 ? 'sm' : 'md'}
-                >
-                  {row.arrayProperty && item[row.arrayProperty]}
-                </Text>
-              ))}
-            </Row>
-          );
-        }
+                if (row.arrayProperty) {
+                    return (
+                        <Row key={`row-${row.property}`}>
+                            {data[row.property].map((item: any) => (
+                                <Text
+                                    key={`${data.id}-${item.id}`}
+                                    $noSelect
+                                    $secondary={index > 0}
+                                    overflow="hidden"
+                                    size={index > 0 ? 'sm' : 'md'}
+                                >
+                                    {row.arrayProperty && item[row.arrayProperty]}
+                                </Text>
+                            ))}
+                        </Row>
+                    );
+                }
 
-        return (
-          <Row key={`row-${row.property}`}>
-            {row.route ? (
-              <Text
-                $link
-                $noSelect
-                component={Link}
-                overflow="hidden"
-                to={generatePath(
-                  row.route.route,
-                  row.route.slugs?.reduce((acc, slug) => {
-                    return {
-                      ...acc,
-                      [slug.slugProperty]: data[slug.idProperty],
-                    };
-                  }, {}),
-                )}
-                onClick={(e) => e.stopPropagation()}
-              >
-                {data && data[row.property]}
-              </Text>
-            ) : (
-              <Text
-                $noSelect
-                $secondary={index > 0}
-                overflow="hidden"
-                size={index > 0 ? 'sm' : 'md'}
-              >
-                {data && data[row.property]}
-              </Text>
-            )}
-          </Row>
-        );
-      })}
-    </>
-  );
+                return (
+                    <Row key={`row-${row.property}`}>
+                        {row.route ? (
+                            <Text
+                                $link
+                                $noSelect
+                                component={Link}
+                                overflow="hidden"
+                                to={generatePath(
+                                    row.route.route,
+                                    row.route.slugs?.reduce((acc, slug) => {
+                                        return {
+                                            ...acc,
+                                            [slug.slugProperty]: data[slug.idProperty],
+                                        };
+                                    }, {}),
+                                )}
+                                onClick={(e) => e.stopPropagation()}
+                            >
+                                {data && data[row.property]}
+                            </Text>
+                        ) : (
+                            <Text
+                                $noSelect
+                                $secondary={index > 0}
+                                overflow="hidden"
+                                size={index > 0 ? 'sm' : 'md'}
+                            >
+                                {data && data[row.property]}
+                            </Text>
+                        )}
+                    </Row>
+                );
+            })}
+        </>
+    );
 };
 
 export const ALBUM_CARD_ROWS: { [key: string]: CardRow<Album> } = {
-  albumArtists: {
-    arrayProperty: 'name',
-    property: 'albumArtists',
-    route: {
-      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
-      slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+    albumArtists: {
+        arrayProperty: 'name',
+        property: 'albumArtists',
+        route: {
+            route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+            slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+        },
     },
-  },
-  artists: {
-    arrayProperty: 'name',
-    property: 'artists',
-    route: {
-      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
-      slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+    artists: {
+        arrayProperty: 'name',
+        property: 'artists',
+        route: {
+            route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+            slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+        },
     },
-  },
-  createdAt: {
-    property: 'createdAt',
-  },
-  duration: {
-    property: 'duration',
-  },
-  lastPlayedAt: {
-    property: 'lastPlayedAt',
-  },
-  name: {
-    property: 'name',
-    route: {
-      route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-      slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
+    createdAt: {
+        property: 'createdAt',
+    },
+    duration: {
+        property: 'duration',
+    },
+    lastPlayedAt: {
+        property: 'lastPlayedAt',
+    },
+    name: {
+        property: 'name',
+        route: {
+            route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+            slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
+        },
+    },
+    playCount: {
+        property: 'playCount',
+    },
+    rating: {
+        property: 'userRating',
+    },
+    releaseDate: {
+        property: 'releaseDate',
+    },
+    releaseYear: {
+        property: 'releaseYear',
+    },
+    songCount: {
+        property: 'songCount',
     },
-  },
-  playCount: {
-    property: 'playCount',
-  },
-  rating: {
-    property: 'userRating',
-  },
-  releaseDate: {
-    property: 'releaseDate',
-  },
-  releaseYear: {
-    property: 'releaseYear',
-  },
-  songCount: {
-    property: 'songCount',
-  },
 };
 
 export const ALBUMARTIST_CARD_ROWS: { [key: string]: CardRow<AlbumArtist> } = {
-  albumCount: {
-    property: 'albumCount',
-  },
-  duration: {
-    property: 'duration',
-  },
-  genres: {
-    property: 'genres',
-  },
-  lastPlayedAt: {
-    property: 'lastPlayedAt',
-  },
-  name: {
-    property: 'name',
-    route: {
-      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
-      slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+    albumCount: {
+        property: 'albumCount',
+    },
+    duration: {
+        property: 'duration',
+    },
+    genres: {
+        property: 'genres',
+    },
+    lastPlayedAt: {
+        property: 'lastPlayedAt',
+    },
+    name: {
+        property: 'name',
+        route: {
+            route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+            slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+        },
+    },
+    playCount: {
+        property: 'playCount',
+    },
+    rating: {
+        property: 'userRating',
+    },
+    songCount: {
+        property: 'songCount',
     },
-  },
-  playCount: {
-    property: 'playCount',
-  },
-  rating: {
-    property: 'userRating',
-  },
-  songCount: {
-    property: 'songCount',
-  },
 };

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

@@ -10,197 +10,197 @@ import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/
 import { CardRow, PlayQueueAddOptions, Play, CardRoute } from '/@/renderer/types';
 
 interface BaseGridCardProps {
-  controls: {
-    cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
-    handleFavorite: (options: {
-      id: string[];
-      isFavorite: boolean;
-      itemType: LibraryItem;
-      serverId: string;
-    }) => void;
-    handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
-    itemType: LibraryItem;
-    playButtonBehavior: Play;
-    route: CardRoute;
-  };
-  data: any;
-  isLoading?: boolean;
+    controls: {
+        cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+        handleFavorite: (options: {
+            id: string[];
+            isFavorite: boolean;
+            itemType: LibraryItem;
+            serverId: string;
+        }) => void;
+        handlePlayQueueAdd: ((options: PlayQueueAddOptions) => void) | undefined;
+        itemType: LibraryItem;
+        playButtonBehavior: Play;
+        route: CardRoute;
+    };
+    data: any;
+    isLoading?: boolean;
 }
 
 const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
-  pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
+    pointer-events: auto;
 
-  .card-controls {
-    opacity: 0;
-  }
+    .card-controls {
+        opacity: 0;
+    }
 `;
 
 const ImageContainerStyles = css`
-  position: relative;
-  display: flex;
-  align-items: center;
-  aspect-ratio: 1/1;
-  overflow: hidden;
-  background: var(--card-default-bg);
-  border-radius: var(--card-poster-radius);
+    position: relative;
+    display: flex;
+    align-items: center;
+    aspect-ratio: 1/1;
+    overflow: hidden;
+    background: var(--card-default-bg);
+    border-radius: var(--card-poster-radius);
 
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
-    opacity: 0;
-    transition: all 0.2s ease-in-out;
-    content: '';
-    user-select: none;
-  }
-
-  &:hover {
     &::before {
-      opacity: 0.5;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
+        content: '';
+        user-select: none;
     }
-  }
 
-  &:hover .card-controls {
-    opacity: 1;
-  }
+    &:hover {
+        &::before {
+            opacity: 0.5;
+        }
+    }
+
+    &:hover .card-controls {
+        opacity: 1;
+    }
 `;
 
 const ImageContainer = styled(Link)<{ $isFavorite?: boolean }>`
-  ${ImageContainerStyles}
+    ${ImageContainerStyles}
 `;
 
 const ImageContainerSkeleton = styled.div`
-  ${ImageContainerStyles}
+    ${ImageContainerStyles}
 `;
 
 const Image = styled(SimpleImg)`
-  width: 100%;
-  max-width: 100%;
-  height: 100% !important;
-  max-height: 100%;
-  border: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
+    border: 0;
 
-  img {
-    height: 100%;
-    object-fit: cover;
-  }
+    img {
+        height: 100%;
+        object-fit: cover;
+    }
 `;
 
 const DetailContainer = styled.div`
-  margin-top: 0.5rem;
+    margin-top: 0.5rem;
 `;
 
 export const PosterCard = ({
-  data,
-  controls,
-  isLoading,
-  uniqueId,
+    data,
+    controls,
+    isLoading,
+    uniqueId,
 }: BaseGridCardProps & { uniqueId: string }) => {
-  if (!isLoading) {
-    const path = generatePath(
-      controls.route.route,
-      controls.route.slugs?.reduce((acc, slug) => {
-        return {
-          ...acc,
-          [slug.slugProperty]: data[slug.idProperty],
-        };
-      }, {}),
-    );
+    if (!isLoading) {
+        const path = generatePath(
+            controls.route.route,
+            controls.route.slugs?.reduce((acc, slug) => {
+                return {
+                    ...acc,
+                    [slug.slugProperty]: data[slug.idProperty],
+                };
+            }, {}),
+        );
 
-    let Placeholder = RiAlbumFill;
+        let Placeholder = RiAlbumFill;
 
-    switch (controls.itemType) {
-      case LibraryItem.ALBUM:
-        Placeholder = RiAlbumFill;
-        break;
-      case LibraryItem.ARTIST:
-        Placeholder = RiUserVoiceFill;
-        break;
-      case LibraryItem.ALBUM_ARTIST:
-        Placeholder = RiUserVoiceFill;
-        break;
-      case LibraryItem.PLAYLIST:
-        Placeholder = RiPlayListFill;
-        break;
-      default:
-        Placeholder = RiAlbumFill;
-        break;
+        switch (controls.itemType) {
+            case LibraryItem.ALBUM:
+                Placeholder = RiAlbumFill;
+                break;
+            case LibraryItem.ARTIST:
+                Placeholder = RiUserVoiceFill;
+                break;
+            case LibraryItem.ALBUM_ARTIST:
+                Placeholder = RiUserVoiceFill;
+                break;
+            case LibraryItem.PLAYLIST:
+                Placeholder = RiPlayListFill;
+                break;
+            default:
+                Placeholder = RiAlbumFill;
+                break;
+        }
+
+        return (
+            <PosterCardContainer key={`${uniqueId}-${data.id}`}>
+                <ImageContainer
+                    $isFavorite={data?.userFavorite}
+                    to={path}
+                >
+                    {data?.imageUrl ? (
+                        <Image
+                            importance="auto"
+                            placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
+                            src={data?.imageUrl}
+                        />
+                    ) : (
+                        <Center
+                            sx={{
+                                background: 'var(--placeholder-bg)',
+                                borderRadius: 'var(--card-default-radius)',
+                                height: '100%',
+                                width: '100%',
+                            }}
+                        >
+                            <Placeholder
+                                color="var(--placeholder-fg)"
+                                size={35}
+                            />
+                        </Center>
+                    )}
+                    <GridCardControls
+                        handleFavorite={controls.handleFavorite}
+                        handlePlayQueueAdd={controls.handlePlayQueueAdd}
+                        itemData={data}
+                        itemType={controls.itemType}
+                    />
+                </ImageContainer>
+                <DetailContainer>
+                    <CardRows
+                        data={data}
+                        rows={controls.cardRows}
+                    />
+                </DetailContainer>
+            </PosterCardContainer>
+        );
     }
 
     return (
-      <PosterCardContainer key={`${uniqueId}-${data.id}`}>
-        <ImageContainer
-          $isFavorite={data?.userFavorite}
-          to={path}
-        >
-          {data?.imageUrl ? (
-            <Image
-              importance="auto"
-              placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
-              src={data?.imageUrl}
-            />
-          ) : (
-            <Center
-              sx={{
-                background: 'var(--placeholder-bg)',
-                borderRadius: 'var(--card-default-radius)',
-                height: '100%',
-                width: '100%',
-              }}
-            >
-              <Placeholder
-                color="var(--placeholder-fg)"
-                size={35}
-              />
-            </Center>
-          )}
-          <GridCardControls
-            handleFavorite={controls.handleFavorite}
-            handlePlayQueueAdd={controls.handlePlayQueueAdd}
-            itemData={data}
-            itemType={controls.itemType}
-          />
-        </ImageContainer>
-        <DetailContainer>
-          <CardRows
-            data={data}
-            rows={controls.cardRows}
-          />
-        </DetailContainer>
-      </PosterCardContainer>
-    );
-  }
-
-  return (
-    <PosterCardContainer key={`placeholder-${uniqueId}-${data.id}`}>
-      <Skeleton
-        visible
-        radius="sm"
-      >
-        <ImageContainerSkeleton />
-      </Skeleton>
-      <DetailContainer>
-        <Stack spacing="sm">
-          {controls.cardRows.map((row, index) => (
+        <PosterCardContainer key={`placeholder-${uniqueId}-${data.id}`}>
             <Skeleton
-              key={`${index}-${row.arrayProperty}`}
-              visible
-              height={14}
-              radius="sm"
-            />
-          ))}
-        </Stack>
-      </DetailContainer>
-    </PosterCardContainer>
-  );
+                visible
+                radius="sm"
+            >
+                <ImageContainerSkeleton />
+            </Skeleton>
+            <DetailContainer>
+                <Stack spacing="sm">
+                    {controls.cardRows.map((row, index) => (
+                        <Skeleton
+                            key={`${index}-${row.arrayProperty}`}
+                            visible
+                            height={14}
+                            radius="sm"
+                        />
+                    ))}
+                </Stack>
+            </DetailContainer>
+        </PosterCardContainer>
+    );
 };

src/renderer/components/checkbox/index.tsx

@@ -3,30 +3,30 @@ import { Checkbox as MantineCheckbox, CheckboxProps } from '@mantine/core';
 import styled from 'styled-components';
 
 const StyledCheckbox = styled(MantineCheckbox)`
-  & .mantine-Checkbox-input {
-    background-color: var(--input-bg);
+    & .mantine-Checkbox-input {
+        background-color: var(--input-bg);
 
-    &:checked {
-      background-color: var(--primary-color);
-      border-color: var(--primary-color);
+        &:checked {
+            background-color: var(--primary-color);
+            border-color: var(--primary-color);
+        }
+
+        &:hover:not(:checked) {
+            background-color: var(--primary-color);
+            opacity: 0.5;
+        }
+
+        transition: none;
     }
-
-    &:hover:not(:checked) {
-      background-color: var(--primary-color);
-      opacity: 0.5;
-    }
-
-    transition: none;
-  }
 `;
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ ...props }: CheckboxProps, ref) => {
-    return (
-      <StyledCheckbox
-        ref={ref}
-        {...props}
-      />
-    );
-  },
+    ({ ...props }: CheckboxProps, ref) => {
+        return (
+            <StyledCheckbox
+                ref={ref}
+                {...props}
+            />
+        );
+    },
 );

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

@@ -4,124 +4,124 @@ import { motion, Variants } from 'framer-motion';
 import styled from 'styled-components';
 
 interface ContextMenuProps {
-  children: ReactNode;
-  maxWidth?: number;
-  minWidth?: number;
-  xPos: number;
-  yPos: number;
+    children: ReactNode;
+    maxWidth?: number;
+    minWidth?: number;
+    xPos: number;
+    yPos: number;
 }
 
 const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children'>>`
-  position: absolute;
-  top: ${({ yPos }) => yPos}px !important;
-  left: ${({ xPos }) => xPos}px !important;
-  z-index: 1000;
-  min-width: ${({ minWidth }) => minWidth}px;
-  max-width: ${({ maxWidth }) => maxWidth}px;
-  background: var(--dropdown-menu-bg);
-  border-radius: var(--dropdown-menu-border-radius);
-  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
+    position: absolute;
+    top: ${({ yPos }) => yPos}px !important;
+    left: ${({ xPos }) => xPos}px !important;
+    z-index: 1000;
+    min-width: ${({ minWidth }) => minWidth}px;
+    max-width: ${({ maxWidth }) => maxWidth}px;
+    background: var(--dropdown-menu-bg);
+    border-radius: var(--dropdown-menu-border-radius);
+    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
 
-  button:first-child {
-    border-top-left-radius: var(--dropdown-menu-border-radius);
-    border-top-right-radius: var(--dropdown-menu-border-radius);
-  }
+    button:first-child {
+        border-top-left-radius: var(--dropdown-menu-border-radius);
+        border-top-right-radius: var(--dropdown-menu-border-radius);
+    }
 
-  button:last-child {
-    border-bottom-right-radius: var(--dropdown-menu-border-radius);
-    border-bottom-left-radius: var(--dropdown-menu-border-radius);
-  }
+    button:last-child {
+        border-bottom-right-radius: var(--dropdown-menu-border-radius);
+        border-bottom-left-radius: var(--dropdown-menu-border-radius);
+    }
 `;
 
 export const StyledContextMenuButton = styled(UnstyledButton)`
-  padding: var(--dropdown-menu-item-padding);
-  color: var(--dropdown-menu-fg);
-  font-weight: 500;
-  font-family: var(--content-font-family);
-  text-align: left;
-  background: var(--dropdown-menu-bg);
-  border: none;
-  cursor: default;
+    padding: var(--dropdown-menu-item-padding);
+    color: var(--dropdown-menu-fg);
+    font-weight: 500;
+    font-family: var(--content-font-family);
+    text-align: left;
+    background: var(--dropdown-menu-bg);
+    border: none;
+    cursor: default;
 
-  & .mantine-Button-inner {
-    justify-content: flex-start;
-  }
+    & .mantine-Button-inner {
+        justify-content: flex-start;
+    }
 
-  &:hover {
-    background: var(--dropdown-menu-bg-hover);
-  }
+    &:hover {
+        background: var(--dropdown-menu-bg-hover);
+    }
 
-  &:disabled {
-    background: transparent;
-    opacity: 0.6;
-  }
+    &:disabled {
+        background: transparent;
+        opacity: 0.6;
+    }
 `;
 
 export const ContextMenuButton = forwardRef(
-  (
-    {
-      children,
-      rightIcon,
-      leftIcon,
-      ...props
-    }: UnstyledButtonProps &
-      React.ComponentPropsWithoutRef<'button'> & {
-        leftIcon?: ReactNode;
-        rightIcon?: ReactNode;
-      },
-    ref: any,
-  ) => {
-    return (
-      <StyledContextMenuButton
-        {...props}
-        key={props.key}
-        ref={ref}
-        as="button"
-        disabled={props.disabled}
-        onClick={props.onClick}
-      >
-        <Group position="apart">
-          <Group spacing="md">
-            <Box>{leftIcon}</Box>
-            <Box mr="2rem">{children}</Box>
-          </Group>
-          <Box>{rightIcon}</Box>
-        </Group>
-      </StyledContextMenuButton>
-    );
-  },
+    (
+        {
+            children,
+            rightIcon,
+            leftIcon,
+            ...props
+        }: UnstyledButtonProps &
+            React.ComponentPropsWithoutRef<'button'> & {
+                leftIcon?: ReactNode;
+                rightIcon?: ReactNode;
+            },
+        ref: any,
+    ) => {
+        return (
+            <StyledContextMenuButton
+                {...props}
+                key={props.key}
+                ref={ref}
+                as="button"
+                disabled={props.disabled}
+                onClick={props.onClick}
+            >
+                <Group position="apart">
+                    <Group spacing="md">
+                        <Box>{leftIcon}</Box>
+                        <Box mr="2rem">{children}</Box>
+                    </Group>
+                    <Box>{rightIcon}</Box>
+                </Group>
+            </StyledContextMenuButton>
+        );
+    },
 );
 
 const variants: Variants = {
-  closed: {
-    opacity: 0,
-    transition: {
-      duration: 0.1,
+    closed: {
+        opacity: 0,
+        transition: {
+            duration: 0.1,
+        },
     },
-  },
-  open: {
-    opacity: 1,
-    transition: {
-      duration: 0.1,
+    open: {
+        opacity: 1,
+        transition: {
+            duration: 0.1,
+        },
     },
-  },
 };
 
 export const ContextMenu = forwardRef(
-  ({ yPos, xPos, minWidth, maxWidth, children }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
-    return (
-      <ContextMenuContainer
-        ref={ref}
-        animate="open"
-        initial="closed"
-        maxWidth={maxWidth}
-        minWidth={minWidth}
-        variants={variants}
-        xPos={xPos}
-        yPos={yPos}
-      >
-        {children}
-      </ContextMenuContainer>
-    );
-  },
+    ({ yPos, xPos, minWidth, maxWidth, children }: ContextMenuProps, ref: Ref<HTMLDivElement>) => {
+        return (
+            <ContextMenuContainer
+                ref={ref}
+                animate="open"
+                initial="closed"
+                maxWidth={maxWidth}
+                minWidth={minWidth}
+                variants={variants}
+                xPos={xPos}
+                yPos={yPos}
+            >
+                {children}
+            </ContextMenuContainer>
+        );
+    },
 );

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

@@ -3,47 +3,47 @@ import { DatePicker as MantineDatePicker } from '@mantine/dates';
 import styled from 'styled-components';
 
 interface DatePickerProps extends MantineDatePickerProps {
-  maxWidth?: number | string;
-  width?: number | string;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 const StyledDatePicker = styled(MantineDatePicker)<DatePickerProps>`
-  & .mantine-DatePicker-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
+    & .mantine-DatePicker-input {
+        color: var(--input-fg);
+        background: var(--input-bg);
 
-    &::placeholder {
-      color: var(--input-placeholder-fg);
+        &::placeholder {
+            color: var(--input-placeholder-fg);
+        }
     }
-  }
 
-  & .mantine-DatePicker-icon {
-    color: var(--input-placeholder-fg);
-  }
+    & .mantine-DatePicker-icon {
+        color: var(--input-placeholder-fg);
+    }
 
-  & .mantine-DatePicker-required {
-    color: var(--secondary-color);
-  }
+    & .mantine-DatePicker-required {
+        color: var(--secondary-color);
+    }
 
-  & .mantine-DatePicker-label {
-    font-family: var(--label-font-family);
-  }
+    & .mantine-DatePicker-label {
+        font-family: var(--label-font-family);
+    }
 
-  & .mantine-DateRangePicker-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-DateRangePicker-disabled {
+        opacity: 0.6;
+    }
 `;
 
 export const DatePicker = ({ width, maxWidth, ...props }: DatePickerProps) => {
-  return (
-    <StyledDatePicker
-      {...props}
-      sx={{ maxWidth, width }}
-    />
-  );
+    return (
+        <StyledDatePicker
+            {...props}
+            sx={{ maxWidth, width }}
+        />
+    );
 };
 
 DatePicker.defaultProps = {
-  maxWidth: undefined,
-  width: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };

src/renderer/components/dropdown-menu/index.tsx

@@ -1,9 +1,9 @@
 import type {
-  MenuProps as MantineMenuProps,
-  MenuItemProps as MantineMenuItemProps,
-  MenuLabelProps as MantineMenuLabelProps,
-  MenuDividerProps as MantineMenuDividerProps,
-  MenuDropdownProps as MantineMenuDropdownProps,
+    MenuProps as MantineMenuProps,
+    MenuItemProps as MantineMenuItemProps,
+    MenuLabelProps as MantineMenuLabelProps,
+    MenuDividerProps as MantineMenuDividerProps,
+    MenuDropdownProps as MantineMenuDropdownProps,
 } from '@mantine/core';
 import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core';
 import { RiArrowLeftSFill } from 'react-icons/ri';
@@ -12,9 +12,9 @@ import styled from 'styled-components';
 type MenuProps = MantineMenuProps;
 type MenuLabelProps = MantineMenuLabelProps;
 interface MenuItemProps extends MantineMenuItemProps {
-  $danger?: boolean;
-  $isActive?: boolean;
-  children: React.ReactNode;
+    $danger?: boolean;
+    $isActive?: boolean;
+    children: React.ReactNode;
 }
 type MenuDividerProps = MantineMenuDividerProps;
 type MenuDropdownProps = MantineMenuDropdownProps;
@@ -22,46 +22,46 @@ type MenuDropdownProps = MantineMenuDropdownProps;
 const StyledMenu = styled(MantineMenu)<MenuProps>``;
 
 const StyledMenuLabel = styled(MantineMenu.Label)<MenuLabelProps>`
-  padding: 0.5rem;
-  font-family: var(--content-font-family);
+    padding: 0.5rem;
+    font-family: var(--content-font-family);
 `;
 
 const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
-  position: relative;
-  padding: var(--dropdown-menu-item-padding);
-  font-size: var(--dropdown-menu-item-font-size);
-  font-family: var(--content-font-family);
+    position: relative;
+    padding: var(--dropdown-menu-item-padding);
+    font-size: var(--dropdown-menu-item-font-size);
+    font-family: var(--content-font-family);
 
-  &:disabled {
-    opacity: 0.6;
-  }
+    &:disabled {
+        opacity: 0.6;
+    }
 
-  &:hover {
-    background-color: var(--dropdown-menu-bg-hover);
-  }
+    &:hover {
+        background-color: var(--dropdown-menu-bg-hover);
+    }
 
-  & .mantine-Menu-itemLabel {
-    margin-right: 2rem;
-    margin-left: 1rem;
-    color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
-  }
+    & .mantine-Menu-itemLabel {
+        margin-right: 2rem;
+        margin-left: 1rem;
+        color: ${(props) => (props.$danger ? 'var(--danger-color)' : 'var(--dropdown-menu-fg)')};
+    }
 
-  & .mantine-Menu-itemRightSection {
-    display: flex;
-  }
+    & .mantine-Menu-itemRightSection {
+        display: flex;
+    }
 
-  cursor: default;
+    cursor: default;
 `;
 
 const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
-  margin: 0;
-  padding: 0;
-  background: var(--dropdown-menu-bg);
-  border: var(--dropdown-menu-border);
-  border-radius: var(--dropdown-menu-border-radius);
-  filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
+    margin: 0;
+    padding: 0;
+    background: var(--dropdown-menu-bg);
+    border: var(--dropdown-menu-border);
+    border-radius: var(--dropdown-menu-border-radius);
+    filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
 
-  /* *:first-child {
+    /* *:first-child {
     border-top-left-radius: var(--dropdown-menu-border-radius);
     border-top-right-radius: var(--dropdown-menu-border-radius);
   }
@@ -73,51 +73,51 @@ const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
 `;
 
 const StyledMenuDivider = styled(MantineMenu.Divider)`
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 `;
 
 export const DropdownMenu = ({ children, ...props }: MenuProps) => {
-  return (
-    <StyledMenu
-      withinPortal
-      styles={{
-        dropdown: {
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
-        },
-      }}
-      {...props}
-    >
-      {children}
-    </StyledMenu>
-  );
+    return (
+        <StyledMenu
+            withinPortal
+            styles={{
+                dropdown: {
+                    filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
+                },
+            }}
+            {...props}
+        >
+            {children}
+        </StyledMenu>
+    );
 };
 
 const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
-  return <StyledMenuLabel {...props}>{children}</StyledMenuLabel>;
+    return <StyledMenuLabel {...props}>{children}</StyledMenuLabel>;
 };
 
 const pMenuItem = ({ $isActive, $danger, children, ...props }: MenuItemProps) => {
-  return (
-    <StyledMenuItem
-      $danger={$danger}
-      $isActive={$isActive}
-      rightSection={$isActive && <RiArrowLeftSFill size={15} />}
-      {...props}
-    >
-      {children}
-    </StyledMenuItem>
-  );
+    return (
+        <StyledMenuItem
+            $danger={$danger}
+            $isActive={$isActive}
+            rightSection={$isActive && <RiArrowLeftSFill size={15} />}
+            {...props}
+        >
+            {children}
+        </StyledMenuItem>
+    );
 };
 
 const MenuDropdown = ({ children, ...props }: MenuDropdownProps) => {
-  return <StyledMenuDropdown {...props}>{children}</StyledMenuDropdown>;
+    return <StyledMenuDropdown {...props}>{children}</StyledMenuDropdown>;
 };
 
 const MenuItem = createPolymorphicComponent<'button', MenuItemProps>(pMenuItem);
 
 const MenuDivider = ({ ...props }: MenuDividerProps) => {
-  return <StyledMenuDivider {...props} />;
+    return <StyledMenuDivider {...props} />;
 };
 
 DropdownMenu.Label = MenuLabel;

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

@@ -15,245 +15,247 @@ import { usePlayQueueAdd } from '/@/renderer/features/player/hooks/use-playqueue
 import { Play } from '/@/renderer/types';
 
 const Carousel = styled(motion.div)`
-  position: relative;
-  height: 35vh;
-  min-height: 250px;
-  padding: 2rem;
-  overflow: hidden;
-  background: linear-gradient(180deg, var(--main-bg), rgba(25, 26, 28, 60%));
-  border-radius: 1rem;
+    position: relative;
+    height: 35vh;
+    min-height: 250px;
+    padding: 2rem;
+    overflow: hidden;
+    background: linear-gradient(180deg, var(--main-bg), rgba(25, 26, 28, 60%));
+    border-radius: 1rem;
 `;
 
 const Grid = styled.div`
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-template-areas: 'image info';
-  grid-template-rows: 1fr;
-  grid-template-columns: 200px minmax(0, 1fr);
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-areas: 'image info';
+    grid-template-rows: 1fr;
+    grid-template-columns: 200px minmax(0, 1fr);
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
 `;
 
 const ImageColumn = styled.div`
-  z-index: 15;
-  display: flex;
-  grid-area: image;
-  align-items: flex-end;
+    z-index: 15;
+    display: flex;
+    grid-area: image;
+    align-items: flex-end;
 `;
 
 const InfoColumn = styled.div`
-  z-index: 15;
-  display: flex;
-  grid-area: info;
-  align-items: flex-end;
-  width: 100%;
-  max-width: 100%;
-  padding-left: 1rem;
+    z-index: 15;
+    display: flex;
+    grid-area: info;
+    align-items: flex-end;
+    width: 100%;
+    max-width: 100%;
+    padding-left: 1rem;
 `;
 
 const BackgroundImage = styled.img`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 150%;
-  height: 150%;
-  object-fit: cover;
-  object-position: 0 30%;
-  filter: blur(24px);
-  user-select: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 150%;
+    height: 150%;
+    object-fit: cover;
+    object-position: 0 30%;
+    filter: blur(24px);
+    user-select: none;
 `;
 
 const BackgroundImageOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, rgba(25, 26, 28, 30%), var(--main-bg));
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, rgba(25, 26, 28, 30%), var(--main-bg));
 `;
 
 const Wrapper = styled(Link)`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 `;
 
 const TitleWrapper = styled.div`
-  /* stylelint-disable-next-line value-no-vendor-prefix */
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 `;
 
 const variants: Variants = {
-  animate: {
-    opacity: 1,
-    transition: { opacity: { duration: 0.5 } },
-  },
-  exit: {
-    opacity: 0,
-    transition: { opacity: { duration: 0.5 } },
-  },
-  initial: {
-    opacity: 0,
-  },
+    animate: {
+        opacity: 1,
+        transition: { opacity: { duration: 0.5 } },
+    },
+    exit: {
+        opacity: 0,
+        transition: { opacity: { duration: 0.5 } },
+    },
+    initial: {
+        opacity: 0,
+    },
 };
 
 interface FeatureCarouselProps {
-  data: Album[] | undefined;
+    data: Album[] | undefined;
 }
 
 export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
-  const handlePlayQueueAdd = usePlayQueueAdd();
-  const [itemIndex, setItemIndex] = useState(0);
-  const [direction, setDirection] = useState(0);
+    const handlePlayQueueAdd = usePlayQueueAdd();
+    const [itemIndex, setItemIndex] = useState(0);
+    const [direction, setDirection] = useState(0);
 
-  const currentItem = data?.[itemIndex];
+    const currentItem = data?.[itemIndex];
 
-  const handleNext = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setDirection(1);
-    if (itemIndex === (data?.length || 0) - 1 || 0) {
-      setItemIndex(0);
-      return;
-    }
+    const handleNext = (e: MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        setDirection(1);
+        if (itemIndex === (data?.length || 0) - 1 || 0) {
+            setItemIndex(0);
+            return;
+        }
 
-    setItemIndex((prev) => prev + 1);
-  };
+        setItemIndex((prev) => prev + 1);
+    };
 
-  const handlePrevious = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setDirection(-1);
-    if (itemIndex === 0) {
-      setItemIndex((data?.length || 0) - 1);
-      return;
-    }
+    const handlePrevious = (e: MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        setDirection(-1);
+        if (itemIndex === 0) {
+            setItemIndex((data?.length || 0) - 1);
+            return;
+        }
 
-    setItemIndex((prev) => prev - 1);
-  };
+        setItemIndex((prev) => prev - 1);
+    };
 
-  return (
-    <Wrapper to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: currentItem?.id || '' })}>
-      <AnimatePresence
-        custom={direction}
-        initial={false}
-        mode="popLayout"
-      >
-        {data && (
-          <Carousel
-            key={`image-${itemIndex}`}
-            animate="animate"
-            custom={direction}
-            exit="exit"
-            initial="initial"
-            variants={variants}
-          >
-            <Grid>
-              <ImageColumn>
-                <Image
-                  height={225}
-                  placeholder="var(--card-default-bg)"
-                  radius="md"
-                  src={data[itemIndex]?.imageUrl}
-                  sx={{ objectFit: 'cover' }}
-                  width={225}
-                />
-              </ImageColumn>
-              <InfoColumn>
-                <Stack
-                  spacing="md"
-                  sx={{ width: '100%' }}
-                >
-                  <TitleWrapper>
-                    <TextTitle
-                      lh="3.5rem"
-                      order={1}
-                      overflow="hidden"
-                      sx={{ fontSize: '3.5rem' }}
-                      weight={900}
+    return (
+        <Wrapper
+            to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId: currentItem?.id || '' })}
+        >
+            <AnimatePresence
+                custom={direction}
+                initial={false}
+                mode="popLayout"
+            >
+                {data && (
+                    <Carousel
+                        key={`image-${itemIndex}`}
+                        animate="animate"
+                        custom={direction}
+                        exit="exit"
+                        initial="initial"
+                        variants={variants}
                     >
-                      {currentItem?.name}
-                    </TextTitle>
-                  </TitleWrapper>
-                  <TitleWrapper>
-                    {currentItem?.albumArtists.slice(0, 1).map((artist) => (
-                      <TextTitle
-                        key={`carousel-artist-${artist.id}`}
-                        order={2}
-                        weight={600}
-                      >
-                        {artist.name}
-                      </TextTitle>
-                    ))}
-                  </TitleWrapper>
-                  <Group>
-                    {currentItem?.genres?.slice(0, 1).map((genre) => (
-                      <Badge
-                        key={`carousel-genre-${genre.id}`}
-                        size="lg"
-                      >
-                        {genre.name}
-                      </Badge>
-                    ))}
-                    <Badge size="lg">{currentItem?.releaseYear}</Badge>
-                    <Badge size="lg">{currentItem?.songCount} tracks</Badge>
-                  </Group>
-                  <Group position="apart">
-                    <Button
-                      size="lg"
-                      style={{ borderRadius: '5rem' }}
-                      variant="outline"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        if (!currentItem) return;
+                        <Grid>
+                            <ImageColumn>
+                                <Image
+                                    height={225}
+                                    placeholder="var(--card-default-bg)"
+                                    radius="md"
+                                    src={data[itemIndex]?.imageUrl}
+                                    sx={{ objectFit: 'cover' }}
+                                    width={225}
+                                />
+                            </ImageColumn>
+                            <InfoColumn>
+                                <Stack
+                                    spacing="md"
+                                    sx={{ width: '100%' }}
+                                >
+                                    <TitleWrapper>
+                                        <TextTitle
+                                            lh="3.5rem"
+                                            order={1}
+                                            overflow="hidden"
+                                            sx={{ fontSize: '3.5rem' }}
+                                            weight={900}
+                                        >
+                                            {currentItem?.name}
+                                        </TextTitle>
+                                    </TitleWrapper>
+                                    <TitleWrapper>
+                                        {currentItem?.albumArtists.slice(0, 1).map((artist) => (
+                                            <TextTitle
+                                                key={`carousel-artist-${artist.id}`}
+                                                order={2}
+                                                weight={600}
+                                            >
+                                                {artist.name}
+                                            </TextTitle>
+                                        ))}
+                                    </TitleWrapper>
+                                    <Group>
+                                        {currentItem?.genres?.slice(0, 1).map((genre) => (
+                                            <Badge
+                                                key={`carousel-genre-${genre.id}`}
+                                                size="lg"
+                                            >
+                                                {genre.name}
+                                            </Badge>
+                                        ))}
+                                        <Badge size="lg">{currentItem?.releaseYear}</Badge>
+                                        <Badge size="lg">{currentItem?.songCount} tracks</Badge>
+                                    </Group>
+                                    <Group position="apart">
+                                        <Button
+                                            size="lg"
+                                            style={{ borderRadius: '5rem' }}
+                                            variant="outline"
+                                            onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                if (!currentItem) return;
 
-                        handlePlayQueueAdd?.({
-                          byItemType: {
-                            id: [currentItem.id],
-                            type: LibraryItem.ALBUM,
-                          },
-                          playType: Play.NOW,
-                        });
-                      }}
-                    >
-                      Play
-                    </Button>
-                    <Group spacing="sm">
-                      <Button
-                        radius="lg"
-                        size="sm"
-                        variant="outline"
-                        onClick={handlePrevious}
-                      >
-                        <RiArrowLeftSLine size="2rem" />
-                      </Button>
-                      <Button
-                        radius="lg"
-                        size="sm"
-                        variant="outline"
-                        onClick={handleNext}
-                      >
-                        <RiArrowRightSLine size="2rem" />
-                      </Button>
-                    </Group>
-                  </Group>
-                </Stack>
-              </InfoColumn>
-            </Grid>
-            <BackgroundImage
-              draggable="false"
-              src={currentItem?.imageUrl || undefined}
-            />
-            <BackgroundImageOverlay />
-          </Carousel>
-        )}
-      </AnimatePresence>
-    </Wrapper>
-  );
+                                                handlePlayQueueAdd?.({
+                                                    byItemType: {
+                                                        id: [currentItem.id],
+                                                        type: LibraryItem.ALBUM,
+                                                    },
+                                                    playType: Play.NOW,
+                                                });
+                                            }}
+                                        >
+                                            Play
+                                        </Button>
+                                        <Group spacing="sm">
+                                            <Button
+                                                radius="lg"
+                                                size="sm"
+                                                variant="outline"
+                                                onClick={handlePrevious}
+                                            >
+                                                <RiArrowLeftSLine size="2rem" />
+                                            </Button>
+                                            <Button
+                                                radius="lg"
+                                                size="sm"
+                                                variant="outline"
+                                                onClick={handleNext}
+                                            >
+                                                <RiArrowRightSLine size="2rem" />
+                                            </Button>
+                                        </Group>
+                                    </Group>
+                                </Stack>
+                            </InfoColumn>
+                        </Grid>
+                        <BackgroundImage
+                            draggable="false"
+                            src={currentItem?.imageUrl || undefined}
+                        />
+                        <BackgroundImageOverlay />
+                    </Carousel>
+                )}
+            </AnimatePresence>
+        </Wrapper>
+    );
 };

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

@@ -17,262 +17,267 @@ import { usePlayButtonBehavior } from '/@/renderer/store';
 import { CardRoute, CardRow } from '/@/renderer/types';
 
 const getSlidesPerView = (windowWidth: number) => {
-  if (windowWidth < 400) return 2;
-  if (windowWidth < 700) return 3;
-  if (windowWidth < 900) return 4;
-  if (windowWidth < 1100) return 5;
-  if (windowWidth < 1300) return 6;
-  if (windowWidth < 1500) return 7;
-  if (windowWidth < 1920) return 8;
-  return 10;
+    if (windowWidth < 400) return 2;
+    if (windowWidth < 700) return 3;
+    if (windowWidth < 900) return 4;
+    if (windowWidth < 1100) return 5;
+    if (windowWidth < 1300) return 6;
+    if (windowWidth < 1500) return 7;
+    if (windowWidth < 1920) return 8;
+    return 10;
 };
 
 const CarouselContainer = styled(Stack)`
-  container-type: inline-size;
+    container-type: inline-size;
 `;
 
 interface TitleProps {
-  handleNext?: () => void;
-  handlePrev?: () => void;
-  label?: string | ReactNode;
-  pagination: {
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-  };
+    handleNext?: () => void;
+    handlePrev?: () => void;
+    label?: string | ReactNode;
+    pagination: {
+        hasNextPage: boolean;
+        hasPreviousPage: boolean;
+    };
 }
 
 const Title = ({ label, handleNext, handlePrev, pagination }: TitleProps) => {
-  return (
-    <Group position="apart">
-      {isValidElement(label) ? (
-        label
-      ) : (
-        <TextTitle
-          order={2}
-          weight={700}
-        >
-          {label}
-        </TextTitle>
-      )}
+    return (
+        <Group position="apart">
+            {isValidElement(label) ? (
+                label
+            ) : (
+                <TextTitle
+                    order={2}
+                    weight={700}
+                >
+                    {label}
+                </TextTitle>
+            )}
 
-      <Group spacing="sm">
-        <Button
-          compact
-          disabled={!pagination.hasPreviousPage}
-          size="lg"
-          variant="default"
-          onClick={handlePrev}
-        >
-          <RiArrowLeftSLine />
-        </Button>
-        <Button
-          compact
-          disabled={!pagination.hasNextPage}
-          size="lg"
-          variant="default"
-          onClick={handleNext}
-        >
-          <RiArrowRightSLine />
-        </Button>
-      </Group>
-    </Group>
-  );
+            <Group spacing="sm">
+                <Button
+                    compact
+                    disabled={!pagination.hasPreviousPage}
+                    size="lg"
+                    variant="default"
+                    onClick={handlePrev}
+                >
+                    <RiArrowLeftSLine />
+                </Button>
+                <Button
+                    compact
+                    disabled={!pagination.hasNextPage}
+                    size="lg"
+                    variant="default"
+                    onClick={handleNext}
+                >
+                    <RiArrowRightSLine />
+                </Button>
+            </Group>
+        </Group>
+    );
 };
 
 interface SwiperGridCarouselProps {
-  cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
-  data: Album[] | AlbumArtist[] | Artist[] | RelatedArtist[] | undefined;
-  isLoading?: boolean;
-  itemType: LibraryItem;
-  route: CardRoute;
-  swiperProps?: SwiperOptions;
-  title?: {
-    children?: ReactNode;
-    hasPagination?: boolean;
-    icon?: ReactNode;
-    label: string | ReactNode;
-  };
-  uniqueId: string;
+    cardRows: CardRow<Album>[] | CardRow<Artist>[] | CardRow<AlbumArtist>[];
+    data: Album[] | AlbumArtist[] | Artist[] | RelatedArtist[] | undefined;
+    isLoading?: boolean;
+    itemType: LibraryItem;
+    route: CardRoute;
+    swiperProps?: SwiperOptions;
+    title?: {
+        children?: ReactNode;
+        hasPagination?: boolean;
+        icon?: ReactNode;
+        label: string | ReactNode;
+    };
+    uniqueId: string;
 }
 
 export const SwiperGridCarousel = ({
-  cardRows,
-  data,
-  itemType,
-  route,
-  swiperProps,
-  title,
-  isLoading,
-  uniqueId,
-}: SwiperGridCarouselProps) => {
-  const swiperRef = useRef<SwiperCore | any>(null);
-  const playButtonBehavior = usePlayButtonBehavior();
-  const handlePlayQueueAdd = usePlayQueueAdd();
-
-  const [pagination, setPagination] = useState({
-    hasNextPage: (data?.length || 0) > Math.round(3),
-    hasPreviousPage: false,
-  });
-
-  const createFavoriteMutation = useCreateFavorite({});
-  const deleteFavoriteMutation = useDeleteFavorite({});
-
-  const handleFavorite = useCallback(
-    (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem; serverId: string }) => {
-      const { id, itemType, isFavorite, serverId } = options;
-      if (isFavorite) {
-        deleteFavoriteMutation.mutate({
-          query: {
-            id,
-            type: itemType,
-          },
-          serverId,
-        });
-      } else {
-        createFavoriteMutation.mutate({
-          query: {
-            id,
-            type: itemType,
-          },
-          serverId,
-        });
-      }
-    },
-    [createFavoriteMutation, deleteFavoriteMutation],
-  );
-
-  const slides = useMemo(() => {
-    if (!data) return [];
-
-    return data.map((el) => (
-      <PosterCard
-        controls={{
-          cardRows,
-          handleFavorite,
-          handlePlayQueueAdd,
-          itemType,
-          playButtonBehavior,
-          route,
-        }}
-        data={el}
-        isLoading={isLoading}
-        uniqueId={uniqueId}
-      />
-    ));
-  }, [
     cardRows,
     data,
-    handleFavorite,
-    handlePlayQueueAdd,
-    isLoading,
     itemType,
-    playButtonBehavior,
     route,
+    swiperProps,
+    title,
+    isLoading,
     uniqueId,
-  ]);
+}: SwiperGridCarouselProps) => {
+    const swiperRef = useRef<SwiperCore | any>(null);
+    const playButtonBehavior = usePlayButtonBehavior();
+    const handlePlayQueueAdd = usePlayQueueAdd();
 
-  const handleNext = useCallback(() => {
-    const activeIndex = swiperRef?.current?.activeIndex || 0;
-    const slidesPerView = Math.round(Number(swiperProps?.slidesPerView || 4));
-    swiperRef?.current?.slideTo(activeIndex + slidesPerView);
-  }, [swiperProps?.slidesPerView]);
-
-  const handlePrev = useCallback(() => {
-    const activeIndex = swiperRef?.current?.activeIndex || 0;
-    const slidesPerView = Math.round(Number(swiperProps?.slidesPerView || 4));
-    swiperRef?.current?.slideTo(activeIndex - slidesPerView);
-  }, [swiperProps?.slidesPerView]);
-
-  const handleOnSlideChange = useCallback((e: SwiperCore) => {
-    const { slides, isEnd, isBeginning, params } = e;
-    if (isEnd || isBeginning) return;
-
-    setPagination({
-      hasNextPage: (params?.slidesPerView || 4) < slides.length,
-      hasPreviousPage: (params?.slidesPerView || 4) < slides.length,
+    const [pagination, setPagination] = useState({
+        hasNextPage: (data?.length || 0) > Math.round(3),
+        hasPreviousPage: false,
     });
-  }, []);
 
-  const handleOnZoomChange = useCallback((e: SwiperCore) => {
-    const { slides, isEnd, isBeginning, params } = e;
-    if (isEnd || isBeginning) return;
+    const createFavoriteMutation = useCreateFavorite({});
+    const deleteFavoriteMutation = useDeleteFavorite({});
 
-    setPagination({
-      hasNextPage: (params.slidesPerView || 4) < slides.length,
-      hasPreviousPage: (params.slidesPerView || 4) < slides.length,
-    });
-  }, []);
+    const handleFavorite = useCallback(
+        (options: {
+            id: string[];
+            isFavorite: boolean;
+            itemType: LibraryItem;
+            serverId: string;
+        }) => {
+            const { id, itemType, isFavorite, serverId } = options;
+            if (isFavorite) {
+                deleteFavoriteMutation.mutate({
+                    query: {
+                        id,
+                        type: itemType,
+                    },
+                    serverId,
+                });
+            } else {
+                createFavoriteMutation.mutate({
+                    query: {
+                        id,
+                        type: itemType,
+                    },
+                    serverId,
+                });
+            }
+        },
+        [createFavoriteMutation, deleteFavoriteMutation],
+    );
 
-  const handleOnReachEnd = useCallback((e: SwiperCore) => {
-    const { slides, params } = e;
+    const slides = useMemo(() => {
+        if (!data) return [];
 
-    setPagination({
-      hasNextPage: false,
-      hasPreviousPage: (params.slidesPerView || 4) < slides.length,
-    });
-  }, []);
+        return data.map((el) => (
+            <PosterCard
+                controls={{
+                    cardRows,
+                    handleFavorite,
+                    handlePlayQueueAdd,
+                    itemType,
+                    playButtonBehavior,
+                    route,
+                }}
+                data={el}
+                isLoading={isLoading}
+                uniqueId={uniqueId}
+            />
+        ));
+    }, [
+        cardRows,
+        data,
+        handleFavorite,
+        handlePlayQueueAdd,
+        isLoading,
+        itemType,
+        playButtonBehavior,
+        route,
+        uniqueId,
+    ]);
 
-  const handleOnReachBeginning = useCallback((e: SwiperCore) => {
-    const { slides, params } = e;
+    const handleNext = useCallback(() => {
+        const activeIndex = swiperRef?.current?.activeIndex || 0;
+        const slidesPerView = Math.round(Number(swiperProps?.slidesPerView || 4));
+        swiperRef?.current?.slideTo(activeIndex + slidesPerView);
+    }, [swiperProps?.slidesPerView]);
 
-    setPagination({
-      hasNextPage: (params.slidesPerView || 4) < slides.length,
-      hasPreviousPage: false,
-    });
-  }, []);
+    const handlePrev = useCallback(() => {
+        const activeIndex = swiperRef?.current?.activeIndex || 0;
+        const slidesPerView = Math.round(Number(swiperProps?.slidesPerView || 4));
+        swiperRef?.current?.slideTo(activeIndex - slidesPerView);
+    }, [swiperProps?.slidesPerView]);
 
-  const handleOnResize = useCallback((e: SwiperCore) => {
-    if (!e) return;
-    const { width } = e;
-    const slidesPerView = getSlidesPerView(width);
-    if (!e.params) return;
-    e.params.slidesPerView = slidesPerView;
-  }, []);
+    const handleOnSlideChange = useCallback((e: SwiperCore) => {
+        const { slides, isEnd, isBeginning, params } = e;
+        if (isEnd || isBeginning) return;
 
-  const throttledOnResize = throttle(handleOnResize, 200);
+        setPagination({
+            hasNextPage: (params?.slidesPerView || 4) < slides.length,
+            hasPreviousPage: (params?.slidesPerView || 4) < slides.length,
+        });
+    }, []);
 
-  return (
-    <CarouselContainer
-      className="grid-carousel"
-      spacing="md"
-    >
-      {title ? (
-        <Title
-          {...title}
-          handleNext={handleNext}
-          handlePrev={handlePrev}
-          pagination={pagination}
-        />
-      ) : null}
-      <Swiper
-        ref={swiperRef}
-        resizeObserver
-        modules={[Virtual]}
-        slidesPerView={4}
-        spaceBetween={20}
-        style={{ height: '100%', width: '100%' }}
-        onBeforeInit={(swiper) => {
-          swiperRef.current = swiper;
-        }}
-        onBeforeResize={handleOnResize}
-        onReachBeginning={handleOnReachBeginning}
-        onReachEnd={handleOnReachEnd}
-        onResize={throttledOnResize}
-        onSlideChange={handleOnSlideChange}
-        onZoomChange={handleOnZoomChange}
-        {...swiperProps}
-      >
-        {slides.map((slideContent, index) => {
-          return (
-            <SwiperSlide
-              key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`}
-              virtualIndex={index}
+    const handleOnZoomChange = useCallback((e: SwiperCore) => {
+        const { slides, isEnd, isBeginning, params } = e;
+        if (isEnd || isBeginning) return;
+
+        setPagination({
+            hasNextPage: (params.slidesPerView || 4) < slides.length,
+            hasPreviousPage: (params.slidesPerView || 4) < slides.length,
+        });
+    }, []);
+
+    const handleOnReachEnd = useCallback((e: SwiperCore) => {
+        const { slides, params } = e;
+
+        setPagination({
+            hasNextPage: false,
+            hasPreviousPage: (params.slidesPerView || 4) < slides.length,
+        });
+    }, []);
+
+    const handleOnReachBeginning = useCallback((e: SwiperCore) => {
+        const { slides, params } = e;
+
+        setPagination({
+            hasNextPage: (params.slidesPerView || 4) < slides.length,
+            hasPreviousPage: false,
+        });
+    }, []);
+
+    const handleOnResize = useCallback((e: SwiperCore) => {
+        if (!e) return;
+        const { width } = e;
+        const slidesPerView = getSlidesPerView(width);
+        if (!e.params) return;
+        e.params.slidesPerView = slidesPerView;
+    }, []);
+
+    const throttledOnResize = throttle(handleOnResize, 200);
+
+    return (
+        <CarouselContainer
+            className="grid-carousel"
+            spacing="md"
+        >
+            {title ? (
+                <Title
+                    {...title}
+                    handleNext={handleNext}
+                    handlePrev={handlePrev}
+                    pagination={pagination}
+                />
+            ) : null}
+            <Swiper
+                ref={swiperRef}
+                resizeObserver
+                modules={[Virtual]}
+                slidesPerView={4}
+                spaceBetween={20}
+                style={{ height: '100%', width: '100%' }}
+                onBeforeInit={(swiper) => {
+                    swiperRef.current = swiper;
+                }}
+                onBeforeResize={handleOnResize}
+                onReachBeginning={handleOnReachBeginning}
+                onReachEnd={handleOnReachEnd}
+                onResize={throttledOnResize}
+                onSlideChange={handleOnSlideChange}
+                onZoomChange={handleOnZoomChange}
+                {...swiperProps}
             >
-              {slideContent}
-            </SwiperSlide>
-          );
-        })}
-      </Swiper>
-    </CarouselContainer>
-  );
+                {slides.map((slideContent, index) => {
+                    return (
+                        <SwiperSlide
+                            key={`${uniqueId}-${slideContent?.props?.data?.id}-${index}`}
+                            virtualIndex={index}
+                        >
+                            {slideContent}
+                        </SwiperSlide>
+                    );
+                })}
+            </Swiper>
+        </CarouselContainer>
+    );
 };

src/renderer/components/hover-card/index.tsx

@@ -1,23 +1,23 @@
 import { HoverCard as MantineHoverCard, HoverCardProps } from '@mantine/core';
 
 export const HoverCard = ({ children, ...props }: HoverCardProps) => {
-  return (
-    <MantineHoverCard
-      styles={{
-        dropdown: {
-          background: 'var(--dropdown-menu-bg)',
-          border: 'none',
-          borderRadius: 'var(--dropdown-menu-border-radius)',
-          boxShadow: '2px 2px 10px 2px rgba(0, 0, 0, 40%)',
-          margin: 0,
-          padding: 0,
-        },
-      }}
-      {...props}
-    >
-      {children}
-    </MantineHoverCard>
-  );
+    return (
+        <MantineHoverCard
+            styles={{
+                dropdown: {
+                    background: 'var(--dropdown-menu-bg)',
+                    border: 'none',
+                    borderRadius: 'var(--dropdown-menu-border-radius)',
+                    boxShadow: '2px 2px 10px 2px rgba(0, 0, 0, 40%)',
+                    margin: 0,
+                    padding: 0,
+                },
+            }}
+            {...props}
+        >
+            {children}
+        </MantineHoverCard>
+    );
 };
 
 HoverCard.Target = MantineHoverCard.Target;

src/renderer/components/input/index.tsx

@@ -1,404 +1,404 @@
 import React, { forwardRef } from 'react';
 import type {
-  TextInputProps as MantineTextInputProps,
-  NumberInputProps as MantineNumberInputProps,
-  PasswordInputProps as MantinePasswordInputProps,
-  FileInputProps as MantineFileInputProps,
-  JsonInputProps as MantineJsonInputProps,
-  TextareaProps as MantineTextareaProps,
+    TextInputProps as MantineTextInputProps,
+    NumberInputProps as MantineNumberInputProps,
+    PasswordInputProps as MantinePasswordInputProps,
+    FileInputProps as MantineFileInputProps,
+    JsonInputProps as MantineJsonInputProps,
+    TextareaProps as MantineTextareaProps,
 } from '@mantine/core';
 import {
-  TextInput as MantineTextInput,
-  NumberInput as MantineNumberInput,
-  PasswordInput as MantinePasswordInput,
-  FileInput as MantineFileInput,
-  JsonInput as MantineJsonInput,
-  Textarea as MantineTextarea,
+    TextInput as MantineTextInput,
+    NumberInput as MantineNumberInput,
+    PasswordInput as MantinePasswordInput,
+    FileInput as MantineFileInput,
+    JsonInput as MantineJsonInput,
+    Textarea as MantineTextarea,
 } from '@mantine/core';
 import styled from 'styled-components';
 
 interface TextInputProps extends MantineTextInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
+    children?: React.ReactNode;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 interface NumberInputProps extends MantineNumberInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
+    children?: React.ReactNode;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 interface PasswordInputProps extends MantinePasswordInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
+    children?: React.ReactNode;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 interface FileInputProps extends MantineFileInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
+    children?: React.ReactNode;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 interface JsonInputProps extends MantineJsonInputProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
+    children?: React.ReactNode;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 interface TextareaProps extends MantineTextareaProps {
-  children?: React.ReactNode;
-  maxWidth?: number | string;
-  width?: number | string;
+    children?: React.ReactNode;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 const StyledTextInput = styled(MantineTextInput)<TextInputProps>`
-  & .mantine-TextInput-wrapper {
-    border-color: var(--primary-color);
-  }
-
-  & .mantine-TextInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
+    & .mantine-TextInput-wrapper {
+        border-color: var(--primary-color);
     }
-  }
 
-  & .mantine-Input-icon {
-    color: var(--input-placeholder-fg);
-  }
+    & .mantine-TextInput-input {
+        color: var(--input-fg);
+        background: var(--input-bg);
 
-  & .mantine-TextInput-required {
-    color: var(--secondary-color);
-  }
+        &::placeholder {
+            color: var(--input-placeholder-fg);
+        }
+    }
 
-  & .mantine-TextInput-label {
-    margin-bottom: 0.5rem;
-    font-family: var(--label-font-family);
-  }
+    & .mantine-Input-icon {
+        color: var(--input-placeholder-fg);
+    }
 
-  & .mantine-TextInput-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-TextInput-required {
+        color: var(--secondary-color);
+    }
 
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
+    & .mantine-TextInput-label {
+        margin-bottom: 0.5rem;
+        font-family: var(--label-font-family);
+    }
 
-  transition: width 0.3s ease-in-out;
+    & .mantine-TextInput-disabled {
+        opacity: 0.6;
+    }
+
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
+
+    transition: width 0.3s ease-in-out;
 `;
 
 const StyledNumberInput = styled(MantineNumberInput)<NumberInputProps>`
-  & .mantine-NumberInput-wrapper {
-    border-color: var(--primary-color);
-  }
-
-  & .mantine-NumberInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-
-    &::placeholder {
-      color: var(--input-placeholder-fg);
+    & .mantine-NumberInput-wrapper {
+        border-color: var(--primary-color);
     }
-  }
 
-  & .mantine-NumberInput-controlUp {
-    svg {
-      color: var(--btn-default-fg);
-      fill: var(--btn-default-fg);
+    & .mantine-NumberInput-input {
+        color: var(--input-fg);
+        background: var(--input-bg);
+
+        &::placeholder {
+            color: var(--input-placeholder-fg);
+        }
     }
-  }
 
-  & .mantine-NumberInput-controlDown {
-    svg {
-      color: var(--btn-default-fg);
-      fill: var(--btn-default-fg);
+    & .mantine-NumberInput-controlUp {
+        svg {
+            color: var(--btn-default-fg);
+            fill: var(--btn-default-fg);
+        }
     }
-  }
 
-  & .mantine-Input-icon {
-    color: var(--input-placeholder-fg);
-  }
+    & .mantine-NumberInput-controlDown {
+        svg {
+            color: var(--btn-default-fg);
+            fill: var(--btn-default-fg);
+        }
+    }
 
-  & .mantine-NumberInput-required {
-    color: var(--secondary-color);
-  }
+    & .mantine-Input-icon {
+        color: var(--input-placeholder-fg);
+    }
 
-  & .mantine-NumberInput-label {
-    margin-bottom: 0.5rem;
-    font-family: var(--label-font-family);
-  }
+    & .mantine-NumberInput-required {
+        color: var(--secondary-color);
+    }
 
-  & .mantine-NumberInput-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-NumberInput-label {
+        margin-bottom: 0.5rem;
+        font-family: var(--label-font-family);
+    }
 
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
+    & .mantine-NumberInput-disabled {
+        opacity: 0.6;
+    }
 
-  transition: width 0.3s ease-in-out;
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
+
+    transition: width 0.3s ease-in-out;
 `;
 
 const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
-  & .mantine-PasswordInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
+    & .mantine-PasswordInput-input {
+        color: var(--input-fg);
+        background: var(--input-bg);
 
-    &::placeholder {
-      color: var(--input-placeholder-fg);
+        &::placeholder {
+            color: var(--input-placeholder-fg);
+        }
     }
-  }
 
-  & .mantine-PasswordInput-icon {
-    color: var(--input-placeholder-fg);
-  }
+    & .mantine-PasswordInput-icon {
+        color: var(--input-placeholder-fg);
+    }
 
-  & .mantine-PasswordInput-required {
-    color: var(--secondary-color);
-  }
+    & .mantine-PasswordInput-required {
+        color: var(--secondary-color);
+    }
 
-  & .mantine-PasswordInput-label {
-    margin-bottom: 0.5rem;
-    font-family: var(--label-font-family);
-  }
+    & .mantine-PasswordInput-label {
+        margin-bottom: 0.5rem;
+        font-family: var(--label-font-family);
+    }
 
-  & .mantine-PasswordInput-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-PasswordInput-disabled {
+        opacity: 0.6;
+    }
 
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
 
-  transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out;
 `;
 
 const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
-  & .mantine-FileInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
+    & .mantine-FileInput-input {
+        color: var(--input-fg);
+        background: var(--input-bg);
 
-    &::placeholder {
-      color: var(--input-placeholder-fg);
+        &::placeholder {
+            color: var(--input-placeholder-fg);
+        }
     }
-  }
 
-  & .mantine-FileInput-icon {
-    color: var(--input-placeholder-fg);
-  }
+    & .mantine-FileInput-icon {
+        color: var(--input-placeholder-fg);
+    }
 
-  & .mantine-FileInput-required {
-    color: var(--secondary-color);
-  }
+    & .mantine-FileInput-required {
+        color: var(--secondary-color);
+    }
 
-  & .mantine-FileInput-label {
-    margin-bottom: 0.5rem;
-    font-family: var(--label-font-family);
-  }
+    & .mantine-FileInput-label {
+        margin-bottom: 0.5rem;
+        font-family: var(--label-font-family);
+    }
 
-  & .mantine-FileInput-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-FileInput-disabled {
+        opacity: 0.6;
+    }
 
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
 
-  transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out;
 `;
 
 const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
-  & .mantine-JsonInput-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
+    & .mantine-JsonInput-input {
+        color: var(--input-fg);
+        background: var(--input-bg);
 
-    &::placeholder {
-      color: var(--input-placeholder-fg);
+        &::placeholder {
+            color: var(--input-placeholder-fg);
+        }
     }
-  }
 
-  & .mantine-JsonInput-icon {
-    color: var(--input-placeholder-fg);
-  }
+    & .mantine-JsonInput-icon {
+        color: var(--input-placeholder-fg);
+    }
 
-  & .mantine-JsonInput-required {
-    color: var(--secondary-color);
-  }
+    & .mantine-JsonInput-required {
+        color: var(--secondary-color);
+    }
 
-  & .mantine-JsonInput-label {
-    margin-bottom: 0.5rem;
-    font-family: var(--label-font-family);
-  }
+    & .mantine-JsonInput-label {
+        margin-bottom: 0.5rem;
+        font-family: var(--label-font-family);
+    }
 
-  & .mantine-JsonInput-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-JsonInput-disabled {
+        opacity: 0.6;
+    }
 
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
 
-  transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out;
 `;
 
 const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
-  & .mantine-Textarea-input {
-    color: var(--input-fg);
-    background: var(--input-bg);
-  }
+    & .mantine-Textarea-input {
+        color: var(--input-fg);
+        background: var(--input-bg);
+    }
 
-  & .mantine-Textarea-icon {
-    color: var(--input-placeholder-fg);
-  }
+    & .mantine-Textarea-icon {
+        color: var(--input-placeholder-fg);
+    }
 
-  & .mantine-Textarea-required {
-    color: var(--secondary-color);
-  }
+    & .mantine-Textarea-required {
+        color: var(--secondary-color);
+    }
 
-  & .mantine-Textarea-label {
-    margin-bottom: 0.5rem;
-    font-family: var(--label-font-family);
-  }
+    & .mantine-Textarea-label {
+        margin-bottom: 0.5rem;
+        font-family: var(--label-font-family);
+    }
 
-  & .mantine-Textarea-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-Textarea-disabled {
+        opacity: 0.6;
+    }
 
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
 
-  transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out;
 `;
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  ({ children, width, maxWidth, ...props }: TextInputProps, ref) => {
-    return (
-      <StyledTextInput
-        ref={ref}
-        spellCheck={false}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledTextInput>
-    );
-  },
+    ({ children, width, maxWidth, ...props }: TextInputProps, ref) => {
+        return (
+            <StyledTextInput
+                ref={ref}
+                spellCheck={false}
+                {...props}
+                sx={{ maxWidth, width }}
+            >
+                {children}
+            </StyledTextInput>
+        );
+    },
 );
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
-  ({ children, width, maxWidth, ...props }: NumberInputProps, ref) => {
-    return (
-      <StyledNumberInput
-        ref={ref}
-        hideControls
-        spellCheck={false}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledNumberInput>
-    );
-  },
+    ({ children, width, maxWidth, ...props }: NumberInputProps, ref) => {
+        return (
+            <StyledNumberInput
+                ref={ref}
+                hideControls
+                spellCheck={false}
+                {...props}
+                sx={{ maxWidth, width }}
+            >
+                {children}
+            </StyledNumberInput>
+        );
+    },
 );
 
 export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
-  ({ children, width, maxWidth, ...props }: PasswordInputProps, ref) => {
-    return (
-      <StyledPasswordInput
-        ref={ref}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledPasswordInput>
-    );
-  },
+    ({ children, width, maxWidth, ...props }: PasswordInputProps, ref) => {
+        return (
+            <StyledPasswordInput
+                ref={ref}
+                {...props}
+                sx={{ maxWidth, width }}
+            >
+                {children}
+            </StyledPasswordInput>
+        );
+    },
 );
 
 export const FileInput = forwardRef<HTMLButtonElement, FileInputProps>(
-  ({ children, width, maxWidth, ...props }: FileInputProps, ref) => {
-    return (
-      <StyledFileInput
-        ref={ref}
-        {...props}
-        styles={{
-          placeholder: {
-            color: 'var(--input-placeholder-fg)',
-          },
-        }}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledFileInput>
-    );
-  },
+    ({ children, width, maxWidth, ...props }: FileInputProps, ref) => {
+        return (
+            <StyledFileInput
+                ref={ref}
+                {...props}
+                styles={{
+                    placeholder: {
+                        color: 'var(--input-placeholder-fg)',
+                    },
+                }}
+                sx={{ maxWidth, width }}
+            >
+                {children}
+            </StyledFileInput>
+        );
+    },
 );
 
 export const JsonInput = forwardRef<HTMLTextAreaElement, JsonInputProps>(
-  ({ children, width, maxWidth, ...props }: JsonInputProps, ref) => {
-    return (
-      <StyledJsonInput
-        ref={ref}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledJsonInput>
-    );
-  },
+    ({ children, width, maxWidth, ...props }: JsonInputProps, ref) => {
+        return (
+            <StyledJsonInput
+                ref={ref}
+                {...props}
+                sx={{ maxWidth, width }}
+            >
+                {children}
+            </StyledJsonInput>
+        );
+    },
 );
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ children, width, maxWidth, ...props }: TextareaProps, ref) => {
-    return (
-      <StyledTextarea
-        ref={ref}
-        {...props}
-        sx={{ maxWidth, width }}
-      >
-        {children}
-      </StyledTextarea>
-    );
-  },
+    ({ children, width, maxWidth, ...props }: TextareaProps, ref) => {
+        return (
+            <StyledTextarea
+                ref={ref}
+                {...props}
+                sx={{ maxWidth, width }}
+            >
+                {children}
+            </StyledTextarea>
+        );
+    },
 );
 
 TextInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
+    children: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };
 
 NumberInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
+    children: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };
 
 PasswordInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
+    children: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };
 
 FileInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
+    children: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };
 
 JsonInput.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
+    children: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };
 
 Textarea.defaultProps = {
-  children: undefined,
-  maxWidth: undefined,
-  width: undefined,
+    children: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };

src/renderer/components/modal/index.tsx

@@ -1,99 +1,99 @@
 import React, { ReactNode } from 'react';
 import {
-  ModalProps as MantineModalProps,
-  Stack,
-  Modal as MantineModal,
-  Flex,
-  Group,
+    ModalProps as MantineModalProps,
+    Stack,
+    Modal as MantineModal,
+    Flex,
+    Group,
 } from '@mantine/core';
 import { closeAllModals, ContextModalProps } from '@mantine/modals';
 import { Button } from '/@/renderer/components/button';
 
 export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
-  children?: ReactNode;
-  handlers: {
-    close: () => void;
-    open: () => void;
-    toggle: () => void;
-  };
+    children?: ReactNode;
+    handlers: {
+        close: () => void;
+        open: () => void;
+        toggle: () => void;
+    };
 }
 
 export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
-  return (
-    <MantineModal
-      {...rest}
-      onClose={handlers.close}
-    >
-      {children}
-    </MantineModal>
-  );
+    return (
+        <MantineModal
+            {...rest}
+            onClose={handlers.close}
+        >
+            {children}
+        </MantineModal>
+    );
 };
 
 export type ContextModalVars = {
-  context: ContextModalProps['context'];
-  id: ContextModalProps['id'];
+    context: ContextModalProps['context'];
+    id: ContextModalProps['id'];
 };
 
 export const BaseContextModal = ({
-  context,
-  id,
-  innerProps,
+    context,
+    id,
+    innerProps,
 }: ContextModalProps<{
-  modalBody: (vars: ContextModalVars) => React.ReactNode;
+    modalBody: (vars: ContextModalVars) => React.ReactNode;
 }>) => <>{innerProps.modalBody({ context, id })}</>;
 
 Modal.defaultProps = {
-  children: undefined,
+    children: undefined,
 };
 
 interface ConfirmModalProps {
-  children: ReactNode;
-  disabled?: boolean;
-  labels?: {
-    cancel?: string;
-    confirm?: string;
-  };
-  loading?: boolean;
-  onCancel?: () => void;
-  onConfirm: () => void;
+    children: ReactNode;
+    disabled?: boolean;
+    labels?: {
+        cancel?: string;
+        confirm?: string;
+    };
+    loading?: boolean;
+    onCancel?: () => void;
+    onConfirm: () => void;
 }
 
 export const ConfirmModal = ({
-  loading,
-  disabled,
-  labels,
-  onCancel,
-  onConfirm,
-  children,
+    loading,
+    disabled,
+    labels,
+    onCancel,
+    onConfirm,
+    children,
 }: ConfirmModalProps) => {
-  const handleCancel = () => {
-    if (onCancel) {
-      onCancel();
-    } else {
-      closeAllModals();
-    }
-  };
+    const handleCancel = () => {
+        if (onCancel) {
+            onCancel();
+        } else {
+            closeAllModals();
+        }
+    };
 
-  return (
-    <Stack>
-      <Flex>{children}</Flex>
-      <Group position="right">
-        <Button
-          data-focus
-          variant="default"
-          onClick={handleCancel}
-        >
-          {labels?.cancel ? labels.cancel : 'Cancel'}
-        </Button>
-        <Button
-          disabled={disabled}
-          loading={loading}
-          variant="filled"
-          onClick={onConfirm}
-        >
-          {labels?.confirm ? labels.confirm : 'Confirm'}
-        </Button>
-      </Group>
-    </Stack>
-  );
+    return (
+        <Stack>
+            <Flex>{children}</Flex>
+            <Group position="right">
+                <Button
+                    data-focus
+                    variant="default"
+                    onClick={handleCancel}
+                >
+                    {labels?.cancel ? labels.cancel : 'Cancel'}
+                </Button>
+                <Button
+                    disabled={disabled}
+                    loading={loading}
+                    variant="filled"
+                    onClick={onConfirm}
+                >
+                    {labels?.confirm ? labels.confirm : 'Confirm'}
+                </Button>
+            </Group>
+        </Stack>
+    );
 };

src/renderer/components/option/index.tsx

@@ -2,30 +2,30 @@ import { ReactNode } from 'react';
 import { Flex, Group } from '@mantine/core';
 
 export const Option = ({ children }: any) => {
-  return (
-    <Group
-      grow
-      p="0.5rem"
-    >
-      {children}
-    </Group>
-  );
+    return (
+        <Group
+            grow
+            p="0.5rem"
+        >
+            {children}
+        </Group>
+    );
 };
 
 interface LabelProps {
-  children: ReactNode;
+    children: ReactNode;
 }
 
 const Label = ({ children }: LabelProps) => {
-  return <Flex align="flex-start">{children}</Flex>;
+    return <Flex align="flex-start">{children}</Flex>;
 };
 
 interface ControlProps {
-  children: ReactNode;
+    children: ReactNode;
 }
 
 const Control = ({ children }: ControlProps) => {
-  return <Flex justify="flex-end">{children}</Flex>;
+    return <Flex justify="flex-end">{children}</Flex>;
 };
 
 Option.Label = Label;

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

@@ -7,127 +7,127 @@ import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
 
 const Container = styled(motion(Flex))<{
-  height?: string;
-  position?: string;
+    height?: string;
+    position?: string;
 }>`
-  position: ${(props) => props.position || 'relative'};
-  z-index: 2000;
-  width: 100%;
-  height: ${(props) => props.height || '65px'};
-  background: var(--titlebar-bg);
+    position: ${(props) => props.position || 'relative'};
+    z-index: 2000;
+    width: 100%;
+    height: ${(props) => props.height || '65px'};
+    background: var(--titlebar-bg);
 `;
 
 const Header = styled(motion.div)<{
-  $isDraggable?: boolean;
-  $isHidden?: boolean;
-  $padRight?: boolean;
+    $isDraggable?: boolean;
+    $isHidden?: boolean;
+    $padRight?: boolean;
 }>`
-  position: relative;
-  z-index: 15;
-  width: 100%;
-  height: 100%;
-  margin-right: ${(props) => (props.$padRight ? '140px' : '1rem')};
-  user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
-  pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
-  -webkit-app-region: ${(props) => props.$isDraggable && 'drag'};
+    position: relative;
+    z-index: 15;
+    width: 100%;
+    height: 100%;
+    margin-right: ${(props) => (props.$padRight ? '140px' : '1rem')};
+    user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
+    pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
+    -webkit-app-region: ${(props) => props.$isDraggable && 'drag'};
 
-  button {
-    -webkit-app-region: no-drag;
-  }
+    button {
+        -webkit-app-region: no-drag;
+    }
 
-  input {
-    -webkit-app-region: no-drag;
-  }
+    input {
+        -webkit-app-region: no-drag;
+    }
 `;
 
 const BackgroundImage = styled.div<{ background: string }>`
-  position: absolute;
-  top: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  background: ${(props) => props.background || 'var(--titlebar-bg)'};
+    position: absolute;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: ${(props) => props.background || 'var(--titlebar-bg)'};
 `;
 
 const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background: ${(props) =>
-    props.theme === 'light'
-      ? 'linear-gradient(rgba(255, 255, 255, 25%), rgba(255, 255, 255, 25%))'
-      : 'linear-gradient(rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%))'};
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    background: ${(props) =>
+        props.theme === 'light'
+            ? 'linear-gradient(rgba(255, 255, 255, 25%), rgba(255, 255, 255, 25%))'
+            : 'linear-gradient(rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%))'};
 `;
 
 export interface PageHeaderProps
-  extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
-  backgroundColor?: string;
-  children?: React.ReactNode;
-  height?: string;
-  isHidden?: boolean;
-  position?: string;
+    extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
+    backgroundColor?: string;
+    children?: React.ReactNode;
+    height?: string;
+    isHidden?: boolean;
+    position?: string;
 }
 
 const TitleWrapper = styled(motion.div)`
-  position: absolute;
-  display: flex;
-  width: 100%;
-  height: 100%;
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100%;
 `;
 
 const variants: Variants = {
-  animate: { opacity: 1 },
-  exit: { opacity: 0 },
-  initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    initial: { opacity: 0 },
 };
 
 export const PageHeader = ({
-  position,
-  height,
-  backgroundColor,
-  isHidden,
-  children,
-  ...props
+    position,
+    height,
+    backgroundColor,
+    isHidden,
+    children,
+    ...props
 }: PageHeaderProps) => {
-  const ref = useRef(null);
-  const padRight = useShouldPadTitlebar();
-  const { windowBarStyle } = useWindowSettings();
-  const theme = useTheme();
+    const ref = useRef(null);
+    const padRight = useShouldPadTitlebar();
+    const { windowBarStyle } = useWindowSettings();
+    const theme = useTheme();
 
-  return (
-    <Container
-      ref={ref}
-      height={height}
-      position={position}
-      {...props}
-    >
-      <Header
-        $isDraggable={windowBarStyle === Platform.WEB}
-        $isHidden={isHidden}
-        $padRight={padRight}
-      >
-        <AnimatePresence initial={false}>
-          {!isHidden && (
-            <TitleWrapper
-              animate="animate"
-              exit="exit"
-              initial="initial"
-              variants={variants}
+    return (
+        <Container
+            ref={ref}
+            height={height}
+            position={position}
+            {...props}
+        >
+            <Header
+                $isDraggable={windowBarStyle === Platform.WEB}
+                $isHidden={isHidden}
+                $padRight={padRight}
             >
-              {children}
-            </TitleWrapper>
-          )}
-        </AnimatePresence>
-      </Header>
-      {backgroundColor && (
-        <>
-          <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
-          <BackgroundImageOverlay theme={theme} />
-        </>
-      )}
-    </Container>
-  );
+                <AnimatePresence initial={false}>
+                    {!isHidden && (
+                        <TitleWrapper
+                            animate="animate"
+                            exit="exit"
+                            initial="initial"
+                            variants={variants}
+                        >
+                            {children}
+                        </TitleWrapper>
+                    )}
+                </AnimatePresence>
+            </Header>
+            {backgroundColor && (
+                <>
+                    <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
+                    <BackgroundImageOverlay theme={theme} />
+                </>
+            )}
+        </Container>
+    );
 };

src/renderer/components/pagination/index.tsx

@@ -1,52 +1,52 @@
 import {
-  Pagination as MantinePagination,
-  PaginationProps as MantinePaginationProps,
+    Pagination as MantinePagination,
+    PaginationProps as MantinePaginationProps,
 } from '@mantine/core';
 import styled from 'styled-components';
 
 const StyledPagination = styled(MantinePagination)<PaginationProps>`
-  & .mantine-Pagination-item {
-    color: var(--btn-default-fg);
-    background-color: var(--btn-default-bg);
-    border: none;
-    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+    & .mantine-Pagination-item {
+        color: var(--btn-default-fg);
+        background-color: var(--btn-default-bg);
+        border: none;
+        transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 
-    &[data-active] {
-      color: var(--btn-primary-fg);
-      background-color: var(--btn-primary-bg);
+        &[data-active] {
+            color: var(--btn-primary-fg);
+            background-color: var(--btn-primary-bg);
+        }
+
+        &[data-dots] {
+            display: ${({ $hideDividers }) => ($hideDividers ? 'none' : 'block')};
+            background-color: transparent;
+        }
+
+        &:hover {
+            color: var(--btn-default-fg-hover);
+            background-color: var(--btn-default-bg-hover);
+
+            &[data-active] {
+                color: var(--btn-primary-fg-hover);
+                background-color: var(--btn-primary-bg-hover);
+            }
+
+            &[data-dots] {
+                background-color: transparent;
+            }
+        }
     }
-
-    &[data-dots] {
-      display: ${({ $hideDividers }) => ($hideDividers ? 'none' : 'block')};
-      background-color: transparent;
-    }
-
-    &:hover {
-      color: var(--btn-default-fg-hover);
-      background-color: var(--btn-default-bg-hover);
-
-      &[data-active] {
-        color: var(--btn-primary-fg-hover);
-        background-color: var(--btn-primary-bg-hover);
-      }
-
-      &[data-dots] {
-        background-color: transparent;
-      }
-    }
-  }
 `;
 
 interface PaginationProps extends MantinePaginationProps {
-  $hideDividers?: boolean;
+    $hideDividers?: boolean;
 }
 
 export const Pagination = ({ $hideDividers, ...props }: PaginationProps) => {
-  return (
-    <StyledPagination
-      $hideDividers={$hideDividers}
-      radius="xl"
-      {...props}
-    />
-  );
+    return (
+        <StyledPagination
+            $hideDividers={$hideDividers}
+            radius="xl"
+            {...props}
+        />
+    );
 };

src/renderer/components/paper/index.tsx

@@ -3,13 +3,13 @@ import { Paper as MantinePaper } from '@mantine/core';
 import styled from 'styled-components';
 
 export interface PaperProps extends MantinePaperProps {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
 const StyledPaper = styled(MantinePaper)<PaperProps>`
-  background: var(--paper-bg);
+    background: var(--paper-bg);
 `;
 
 export const Paper = ({ children, ...props }: PaperProps) => {
-  return <StyledPaper {...props}>{children}</StyledPaper>;
+    return <StyledPaper {...props}>{children}</StyledPaper>;
 };

src/renderer/components/popover/index.tsx

@@ -1,6 +1,6 @@
 import type {
-  PopoverProps as MantinePopoverProps,
-  PopoverDropdownProps as MantinePopoverDropdownProps,
+    PopoverProps as MantinePopoverProps,
+    PopoverDropdownProps as MantinePopoverDropdownProps,
 } from '@mantine/core';
 import { Popover as MantinePopover } from '@mantine/core';
 import styled from 'styled-components';
@@ -11,28 +11,28 @@ type PopoverDropdownProps = MantinePopoverDropdownProps;
 const StyledPopover = styled(MantinePopover)``;
 
 const StyledDropdown = styled(MantinePopover.Dropdown)<PopoverDropdownProps>`
-  padding: 0.5rem;
-  font-size: 0.9em;
-  font-family: var(--content-font-family);
-  background-color: var(--dropdown-menu-bg);
-  border: var(--dropdown-menu-border);
+    padding: 0.5rem;
+    font-size: 0.9em;
+    font-family: var(--content-font-family);
+    background-color: var(--dropdown-menu-bg);
+    border: var(--dropdown-menu-border);
 `;
 
 export const Popover = ({ children, ...props }: PopoverProps) => {
-  return (
-    <StyledPopover
-      withinPortal
-      styles={{
-        dropdown: {
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
-        },
-      }}
-      transitionProps={{ transition: 'fade' }}
-      {...props}
-    >
-      {children}
-    </StyledPopover>
-  );
+    return (
+        <StyledPopover
+            withinPortal
+            styles={{
+                dropdown: {
+                    filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
+                },
+            }}
+            transitionProps={{ transition: 'fade' }}
+            {...props}
+        >
+            {children}
+        </StyledPopover>
+    );
 };
 
 Popover.Target = MantinePopover.Target;

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

@@ -8,211 +8,211 @@ import { QueryBuilderOption } from '/@/renderer/components/query-builder/query-b
 import { QueryBuilderGroup, QueryBuilderRule } from '/@/renderer/types';
 
 const FILTER_GROUP_OPTIONS_DATA = [
-  {
-    label: 'Match all',
-    value: 'all',
-  },
-  {
-    label: 'Match any',
-    value: 'any',
-  },
+    {
+        label: 'Match all',
+        value: 'all',
+    },
+    {
+        label: 'Match any',
+        value: 'any',
+    },
 ];
 
 type AddArgs = {
-  groupIndex: number[];
-  level: number;
+    groupIndex: number[];
+    level: number;
 };
 
 type DeleteArgs = {
-  groupIndex: number[];
-  level: number;
-  uniqueId: string;
+    groupIndex: number[];
+    level: number;
+    uniqueId: string;
 };
 interface QueryBuilderProps {
-  data: Record<string, any>;
-  filters: { label: string; type: string; value: string }[];
-  groupIndex: number[];
-  level: number;
-  onAddRule: (args: AddArgs) => void;
-  onAddRuleGroup: (args: AddArgs) => void;
-  onChangeField: (args: any) => void;
-  onChangeOperator: (args: any) => void;
-  onChangeType: (args: any) => void;
-  onChangeValue: (args: any) => void;
-  onClearFilters: () => void;
-  onDeleteRule: (args: DeleteArgs) => void;
-  onDeleteRuleGroup: (args: DeleteArgs) => void;
-  onResetFilters: () => void;
-  operators: {
-    boolean: { label: string; value: string }[];
-    date: { label: string; value: string }[];
-    number: { label: string; value: string }[];
-    string: { label: string; value: string }[];
-  };
-  uniqueId: string;
+    data: Record<string, any>;
+    filters: { label: string; type: string; value: string }[];
+    groupIndex: number[];
+    level: number;
+    onAddRule: (args: AddArgs) => void;
+    onAddRuleGroup: (args: AddArgs) => void;
+    onChangeField: (args: any) => void;
+    onChangeOperator: (args: any) => void;
+    onChangeType: (args: any) => void;
+    onChangeValue: (args: any) => void;
+    onClearFilters: () => void;
+    onDeleteRule: (args: DeleteArgs) => void;
+    onDeleteRuleGroup: (args: DeleteArgs) => void;
+    onResetFilters: () => void;
+    operators: {
+        boolean: { label: string; value: string }[];
+        date: { label: string; value: string }[];
+        number: { label: string; value: string }[];
+        string: { label: string; value: string }[];
+    };
+    uniqueId: string;
 }
 
 export const QueryBuilder = ({
-  data,
-  level,
-  onAddRule,
-  onDeleteRuleGroup,
-  onDeleteRule,
-  onAddRuleGroup,
-  onChangeType,
-  onChangeField,
-  operators,
-  onChangeOperator,
-  onChangeValue,
-  onClearFilters,
-  onResetFilters,
-  groupIndex,
-  uniqueId,
-  filters,
+    data,
+    level,
+    onAddRule,
+    onDeleteRuleGroup,
+    onDeleteRule,
+    onAddRuleGroup,
+    onChangeType,
+    onChangeField,
+    operators,
+    onChangeOperator,
+    onChangeValue,
+    onClearFilters,
+    onResetFilters,
+    groupIndex,
+    uniqueId,
+    filters,
 }: QueryBuilderProps) => {
-  const handleAddRule = () => {
-    onAddRule({ groupIndex, level });
-  };
+    const handleAddRule = () => {
+        onAddRule({ groupIndex, level });
+    };
 
-  const handleAddRuleGroup = () => {
-    onAddRuleGroup({ groupIndex, level });
-  };
+    const handleAddRuleGroup = () => {
+        onAddRuleGroup({ groupIndex, level });
+    };
 
-  const handleDeleteRuleGroup = () => {
-    onDeleteRuleGroup({ groupIndex, level, uniqueId });
-  };
+    const handleDeleteRuleGroup = () => {
+        onDeleteRuleGroup({ groupIndex, level, uniqueId });
+    };
 
-  const handleChangeType = (value: string | null) => {
-    onChangeType({ groupIndex, level, value });
-  };
+    const handleChangeType = (value: string | null) => {
+        onChangeType({ groupIndex, level, value });
+    };
 
-  return (
-    <Stack
-      ml={`${level * 10}px`}
-      spacing="sm"
-    >
-      <Group spacing="sm">
-        <Select
-          data={FILTER_GROUP_OPTIONS_DATA}
-          maxWidth={175}
-          size="sm"
-          value={data.type}
-          width="20%"
-          onChange={handleChangeType}
-        />
-        <Button
-          px={5}
-          size="sm"
-          tooltip={{ label: 'Add rule' }}
-          variant="default"
-          onClick={handleAddRule}
+    return (
+        <Stack
+            ml={`${level * 10}px`}
+            spacing="sm"
         >
-          <RiAddLine size={20} />
-        </Button>
-        <DropdownMenu position="bottom-start">
-          <DropdownMenu.Target>
-            <Button
-              p={0}
-              size="sm"
-              variant="subtle"
-            >
-              <RiMore2Line size={20} />
-            </Button>
-          </DropdownMenu.Target>
-          <DropdownMenu.Dropdown>
-            <DropdownMenu.Item
-              icon={<RiAddFill />}
-              onClick={handleAddRuleGroup}
-            >
-              Add rule group
-            </DropdownMenu.Item>
+            <Group spacing="sm">
+                <Select
+                    data={FILTER_GROUP_OPTIONS_DATA}
+                    maxWidth={175}
+                    size="sm"
+                    value={data.type}
+                    width="20%"
+                    onChange={handleChangeType}
+                />
+                <Button
+                    px={5}
+                    size="sm"
+                    tooltip={{ label: 'Add rule' }}
+                    variant="default"
+                    onClick={handleAddRule}
+                >
+                    <RiAddLine size={20} />
+                </Button>
+                <DropdownMenu position="bottom-start">
+                    <DropdownMenu.Target>
+                        <Button
+                            p={0}
+                            size="sm"
+                            variant="subtle"
+                        >
+                            <RiMore2Line size={20} />
+                        </Button>
+                    </DropdownMenu.Target>
+                    <DropdownMenu.Dropdown>
+                        <DropdownMenu.Item
+                            icon={<RiAddFill />}
+                            onClick={handleAddRuleGroup}
+                        >
+                            Add rule group
+                        </DropdownMenu.Item>
 
-            {level > 0 && (
-              <DropdownMenu.Item
-                icon={<RiDeleteBinFill />}
-                onClick={handleDeleteRuleGroup}
-              >
-                Remove rule group
-              </DropdownMenu.Item>
+                        {level > 0 && (
+                            <DropdownMenu.Item
+                                icon={<RiDeleteBinFill />}
+                                onClick={handleDeleteRuleGroup}
+                            >
+                                Remove rule group
+                            </DropdownMenu.Item>
+                        )}
+                        {level === 0 && (
+                            <>
+                                <DropdownMenu.Divider />
+                                <DropdownMenu.Item
+                                    $danger
+                                    icon={<RiRestartLine color="var(--danger-color)" />}
+                                    onClick={onResetFilters}
+                                >
+                                    Reset to default
+                                </DropdownMenu.Item>
+                                <DropdownMenu.Item
+                                    $danger
+                                    icon={<RiDeleteBinFill color="var(--danger-color)" />}
+                                    onClick={onClearFilters}
+                                >
+                                    Clear filters
+                                </DropdownMenu.Item>
+                            </>
+                        )}
+                    </DropdownMenu.Dropdown>
+                </DropdownMenu>
+            </Group>
+            <AnimatePresence initial={false}>
+                {data?.rules?.map((rule: QueryBuilderRule) => (
+                    <motion.div
+                        key={rule.uniqueId}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: -25 }}
+                        initial={{ opacity: 0, x: -25 }}
+                        transition={{ duration: 0.2, ease: 'easeInOut' }}
+                    >
+                        <QueryBuilderOption
+                            data={rule}
+                            filters={filters}
+                            groupIndex={groupIndex || []}
+                            level={level}
+                            noRemove={data?.rules?.length === 1}
+                            operators={operators}
+                            onChangeField={onChangeField}
+                            onChangeOperator={onChangeOperator}
+                            onChangeValue={onChangeValue}
+                            onDeleteRule={onDeleteRule}
+                        />
+                    </motion.div>
+                ))}
+            </AnimatePresence>
+            {data?.group && (
+                <AnimatePresence initial={false}>
+                    {data.group?.map((group: QueryBuilderGroup, index: number) => (
+                        <motion.div
+                            key={group.uniqueId}
+                            animate={{ opacity: 1, x: 0 }}
+                            exit={{ opacity: 0, x: -25 }}
+                            initial={{ opacity: 0, x: -25 }}
+                            transition={{ duration: 0.2, ease: 'easeInOut' }}
+                        >
+                            <QueryBuilder
+                                data={group}
+                                filters={filters}
+                                groupIndex={[...(groupIndex || []), index]}
+                                level={level + 1}
+                                operators={operators}
+                                uniqueId={group.uniqueId}
+                                onAddRule={onAddRule}
+                                onAddRuleGroup={onAddRuleGroup}
+                                onChangeField={onChangeField}
+                                onChangeOperator={onChangeOperator}
+                                onChangeType={onChangeType}
+                                onChangeValue={onChangeValue}
+                                onClearFilters={onClearFilters}
+                                onDeleteRule={onDeleteRule}
+                                onDeleteRuleGroup={onDeleteRuleGroup}
+                                onResetFilters={onResetFilters}
+                            />
+                        </motion.div>
+                    ))}
+                </AnimatePresence>
             )}
-            {level === 0 && (
-              <>
-                <DropdownMenu.Divider />
-                <DropdownMenu.Item
-                  $danger
-                  icon={<RiRestartLine color="var(--danger-color)" />}
-                  onClick={onResetFilters}
-                >
-                  Reset to default
-                </DropdownMenu.Item>
-                <DropdownMenu.Item
-                  $danger
-                  icon={<RiDeleteBinFill color="var(--danger-color)" />}
-                  onClick={onClearFilters}
-                >
-                  Clear filters
-                </DropdownMenu.Item>
-              </>
-            )}
-          </DropdownMenu.Dropdown>
-        </DropdownMenu>
-      </Group>
-      <AnimatePresence initial={false}>
-        {data?.rules?.map((rule: QueryBuilderRule) => (
-          <motion.div
-            key={rule.uniqueId}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: -25 }}
-            initial={{ opacity: 0, x: -25 }}
-            transition={{ duration: 0.2, ease: 'easeInOut' }}
-          >
-            <QueryBuilderOption
-              data={rule}
-              filters={filters}
-              groupIndex={groupIndex || []}
-              level={level}
-              noRemove={data?.rules?.length === 1}
-              operators={operators}
-              onChangeField={onChangeField}
-              onChangeOperator={onChangeOperator}
-              onChangeValue={onChangeValue}
-              onDeleteRule={onDeleteRule}
-            />
-          </motion.div>
-        ))}
-      </AnimatePresence>
-      {data?.group && (
-        <AnimatePresence initial={false}>
-          {data.group?.map((group: QueryBuilderGroup, index: number) => (
-            <motion.div
-              key={group.uniqueId}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -25 }}
-              initial={{ opacity: 0, x: -25 }}
-              transition={{ duration: 0.2, ease: 'easeInOut' }}
-            >
-              <QueryBuilder
-                data={group}
-                filters={filters}
-                groupIndex={[...(groupIndex || []), index]}
-                level={level + 1}
-                operators={operators}
-                uniqueId={group.uniqueId}
-                onAddRule={onAddRule}
-                onAddRuleGroup={onAddRuleGroup}
-                onChangeField={onChangeField}
-                onChangeOperator={onChangeOperator}
-                onChangeType={onChangeType}
-                onChangeValue={onChangeValue}
-                onClearFilters={onClearFilters}
-                onDeleteRule={onDeleteRule}
-                onDeleteRuleGroup={onDeleteRuleGroup}
-                onResetFilters={onResetFilters}
-              />
-            </motion.div>
-          ))}
-        </AnimatePresence>
-      )}
-    </Stack>
-  );
+        </Stack>
+    );
 };

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

@@ -7,233 +7,233 @@ import { Select } from '/@/renderer/components/select';
 import { QueryBuilderRule } from '/@/renderer/types';
 
 type DeleteArgs = {
-  groupIndex: number[];
-  level: number;
-  uniqueId: string;
+    groupIndex: number[];
+    level: number;
+    uniqueId: string;
 };
 
 interface QueryOptionProps {
-  data: QueryBuilderRule;
-  filters: { label: string; type: string; value: string }[];
-  groupIndex: number[];
-  level: number;
-  noRemove: boolean;
-  onChangeField: (args: any) => void;
-  onChangeOperator: (args: any) => void;
-  onChangeValue: (args: any) => void;
-  onDeleteRule: (args: DeleteArgs) => void;
-  operators: {
-    boolean: { label: string; value: string }[];
-    date: { label: string; value: string }[];
-    number: { label: string; value: string }[];
-    string: { label: string; value: string }[];
-  };
+    data: QueryBuilderRule;
+    filters: { label: string; type: string; value: string }[];
+    groupIndex: number[];
+    level: number;
+    noRemove: boolean;
+    onChangeField: (args: any) => void;
+    onChangeOperator: (args: any) => void;
+    onChangeValue: (args: any) => void;
+    onDeleteRule: (args: DeleteArgs) => void;
+    operators: {
+        boolean: { label: string; value: string }[];
+        date: { label: string; value: string }[];
+        number: { label: string; value: string }[];
+        string: { label: string; value: string }[];
+    };
 }
 
 const QueryValueInput = ({ onChange, type, ...props }: any) => {
-  const [numberRange, setNumberRange] = useState([0, 0]);
+    const [numberRange, setNumberRange] = useState([0, 0]);
 
-  switch (type) {
-    case 'string':
-      return (
-        <TextInput
-          size="sm"
-          onChange={onChange}
-          {...props}
-        />
-      );
-    case 'number':
-      return (
-        <NumberInput
-          size="sm"
-          onChange={onChange}
-          {...props}
-          defaultValue={props.defaultValue && Number(props.defaultValue)}
-        />
-      );
-    case 'date':
-      return (
-        <TextInput
-          size="sm"
-          onChange={onChange}
-          {...props}
-        />
-      );
+    switch (type) {
+        case 'string':
+            return (
+                <TextInput
+                    size="sm"
+                    onChange={onChange}
+                    {...props}
+                />
+            );
+        case 'number':
+            return (
+                <NumberInput
+                    size="sm"
+                    onChange={onChange}
+                    {...props}
+                    defaultValue={props.defaultValue && Number(props.defaultValue)}
+                />
+            );
+        case 'date':
+            return (
+                <TextInput
+                    size="sm"
+                    onChange={onChange}
+                    {...props}
+                />
+            );
 
-    case 'dateRange':
-      return (
-        <>
-          <NumberInput
-            {...props}
-            defaultValue={props.defaultValue && Number(props.defaultValue?.[0])}
-            maxWidth={81}
-            width="10%"
-            onChange={(e) => {
-              const newRange = [e || 0, numberRange[1]];
-              setNumberRange(newRange);
-              onChange(newRange);
-            }}
-          />
-          <NumberInput
-            {...props}
-            defaultValue={props.defaultValue && Number(props.defaultValue?.[1])}
-            maxWidth={81}
-            width="10%"
-            onChange={(e) => {
-              const newRange = [numberRange[0], e || 0];
-              setNumberRange(newRange);
-              onChange(newRange);
-            }}
-          />
-        </>
-      );
+        case 'dateRange':
+            return (
+                <>
+                    <NumberInput
+                        {...props}
+                        defaultValue={props.defaultValue && Number(props.defaultValue?.[0])}
+                        maxWidth={81}
+                        width="10%"
+                        onChange={(e) => {
+                            const newRange = [e || 0, numberRange[1]];
+                            setNumberRange(newRange);
+                            onChange(newRange);
+                        }}
+                    />
+                    <NumberInput
+                        {...props}
+                        defaultValue={props.defaultValue && Number(props.defaultValue?.[1])}
+                        maxWidth={81}
+                        width="10%"
+                        onChange={(e) => {
+                            const newRange = [numberRange[0], e || 0];
+                            setNumberRange(newRange);
+                            onChange(newRange);
+                        }}
+                    />
+                </>
+            );
 
-    case 'boolean':
-      return (
-        <Select
-          data={[
-            { label: 'true', value: 'true' },
-            { label: 'false', value: 'false' },
-          ]}
-          onChange={onChange}
-          {...props}
-        />
-      );
+        case 'boolean':
+            return (
+                <Select
+                    data={[
+                        { label: 'true', value: 'true' },
+                        { label: 'false', value: 'false' },
+                    ]}
+                    onChange={onChange}
+                    {...props}
+                />
+            );
 
-    default:
-      return <></>;
-  }
+        default:
+            return <></>;
+    }
 };
 
 export const QueryBuilderOption = ({
-  data,
-  filters,
-  level,
-  onDeleteRule,
-  operators,
-  groupIndex,
-  noRemove,
-  onChangeField,
-  onChangeOperator,
-  onChangeValue,
+    data,
+    filters,
+    level,
+    onDeleteRule,
+    operators,
+    groupIndex,
+    noRemove,
+    onChangeField,
+    onChangeOperator,
+    onChangeValue,
 }: QueryOptionProps) => {
-  const { field, operator, uniqueId, value } = data;
+    const { field, operator, uniqueId, value } = data;
 
-  const handleDeleteRule = () => {
-    onDeleteRule({ groupIndex, level, uniqueId });
-  };
+    const handleDeleteRule = () => {
+        onDeleteRule({ groupIndex, level, uniqueId });
+    };
 
-  const handleChangeField = (e: any) => {
-    onChangeField({ groupIndex, level, uniqueId, value: e });
-  };
+    const handleChangeField = (e: any) => {
+        onChangeField({ groupIndex, level, uniqueId, value: e });
+    };
 
-  const handleChangeOperator = (e: any) => {
-    onChangeOperator({ groupIndex, level, uniqueId, value: e });
-  };
+    const handleChangeOperator = (e: any) => {
+        onChangeOperator({ groupIndex, level, uniqueId, value: e });
+    };
 
-  const handleChangeValue = (e: any) => {
-    const isDirectValue =
-      typeof e === 'string' ||
-      typeof e === 'number' ||
-      typeof e === 'undefined' ||
-      typeof e === null;
+    const handleChangeValue = (e: any) => {
+        const isDirectValue =
+            typeof e === 'string' ||
+            typeof e === 'number' ||
+            typeof e === 'undefined' ||
+            typeof e === null;
 
-    if (isDirectValue) {
-      return onChangeValue({
-        groupIndex,
-        level,
-        uniqueId,
-        value: e,
-      });
-    }
+        if (isDirectValue) {
+            return onChangeValue({
+                groupIndex,
+                level,
+                uniqueId,
+                value: e,
+            });
+        }
 
-    // const isDate = e instanceof Date;
+        // const isDate = e instanceof Date;
 
-    // if (isDate) {
-    //   return onChangeValue({
-    //     groupIndex,
-    //     level,
-    //     uniqueId,
-    //     value: dayjs(e).format('YYYY-MM-DD'),
-    //   });
-    // }
+        // if (isDate) {
+        //   return onChangeValue({
+        //     groupIndex,
+        //     level,
+        //     uniqueId,
+        //     value: dayjs(e).format('YYYY-MM-DD'),
+        //   });
+        // }
 
-    const isArray = Array.isArray(e);
+        const isArray = Array.isArray(e);
 
-    if (isArray) {
-      return onChangeValue({
-        groupIndex,
-        level,
-        uniqueId,
-        value: e,
-      });
-    }
+        if (isArray) {
+            return onChangeValue({
+                groupIndex,
+                level,
+                uniqueId,
+                value: e,
+            });
+        }
 
-    return onChangeValue({
-      groupIndex,
-      level,
-      uniqueId,
-      value: e.currentTarget.value,
-    });
-  };
+        return onChangeValue({
+            groupIndex,
+            level,
+            uniqueId,
+            value: e.currentTarget.value,
+        });
+    };
 
-  const fieldType = filters.find((f) => f.value === field)?.type;
-  const operatorsByFieldType = operators[fieldType as keyof typeof operators];
-  const ml = (level + 1) * 10;
+    const fieldType = filters.find((f) => f.value === field)?.type;
+    const operatorsByFieldType = operators[fieldType as keyof typeof operators];
+    const ml = (level + 1) * 10;
 
-  return (
-    <Group
-      ml={ml}
-      spacing="sm"
-    >
-      <Select
-        searchable
-        data={filters}
-        maxWidth={170}
-        size="sm"
-        value={field}
-        width="25%"
-        onChange={handleChangeField}
-      />
-      <Select
-        searchable
-        data={operatorsByFieldType || []}
-        disabled={!field}
-        maxWidth={170}
-        size="sm"
-        value={operator}
-        width="25%"
-        onChange={handleChangeOperator}
-      />
-      {field ? (
-        <QueryValueInput
-          defaultValue={value}
-          maxWidth={170}
-          size="sm"
-          type={operator === 'inTheRange' ? 'dateRange' : fieldType}
-          width="25%"
-          onChange={handleChangeValue}
-        />
-      ) : (
-        <TextInput
-          disabled
-          defaultValue={value}
-          maxWidth={170}
-          size="sm"
-          width="25%"
-          onChange={handleChangeValue}
-        />
-      )}
-      <Button
-        disabled={noRemove}
-        px={5}
-        size="sm"
-        tooltip={{ label: 'Remove rule' }}
-        variant="default"
-        onClick={handleDeleteRule}
-      >
-        <RiSubtractLine size={20} />
-      </Button>
-    </Group>
-  );
+    return (
+        <Group
+            ml={ml}
+            spacing="sm"
+        >
+            <Select
+                searchable
+                data={filters}
+                maxWidth={170}
+                size="sm"
+                value={field}
+                width="25%"
+                onChange={handleChangeField}
+            />
+            <Select
+                searchable
+                data={operatorsByFieldType || []}
+                disabled={!field}
+                maxWidth={170}
+                size="sm"
+                value={operator}
+                width="25%"
+                onChange={handleChangeOperator}
+            />
+            {field ? (
+                <QueryValueInput
+                    defaultValue={value}
+                    maxWidth={170}
+                    size="sm"
+                    type={operator === 'inTheRange' ? 'dateRange' : fieldType}
+                    width="25%"
+                    onChange={handleChangeValue}
+                />
+            ) : (
+                <TextInput
+                    disabled
+                    defaultValue={value}
+                    maxWidth={170}
+                    size="sm"
+                    width="25%"
+                    onChange={handleChangeValue}
+                />
+            )}
+            <Button
+                disabled={noRemove}
+                px={5}
+                size="sm"
+                tooltip={{ label: 'Remove rule' }}
+                variant="default"
+                onClick={handleDeleteRule}
+            >
+                <RiSubtractLine size={20} />
+            </Button>
+        </Group>
+    );
 };

src/renderer/components/rating/index.tsx

@@ -5,29 +5,29 @@ import styled from 'styled-components';
 import { Tooltip } from '/@/renderer/components/tooltip';
 
 interface RatingProps extends Omit<MantineRatingProps, 'onClick'> {
-  onClick: (e: MouseEvent<HTMLDivElement>, value: number | undefined) => void;
+    onClick: (e: MouseEvent<HTMLDivElement>, value: number | undefined) => void;
 }
 
 const StyledRating = styled(MantineRating)`
-  & .mantine-Rating-symbolBody {
-    svg {
-      stroke: var(--main-fg-secondary);
+    & .mantine-Rating-symbolBody {
+        svg {
+            stroke: var(--main-fg-secondary);
+        }
     }
-  }
 `;
 
 export const Rating = ({ onClick, ...props }: RatingProps) => {
-  // const debouncedOnClick = debounce(onClick, 100);
+    // const debouncedOnClick = debounce(onClick, 100);
 
-  return (
-    <Tooltip
-      label="Double click to clear"
-      openDelay={1000}
-    >
-      <StyledRating
-        {...props}
-        onDoubleClick={(e) => onClick(e, props.value)}
-      />
-    </Tooltip>
-  );
+    return (
+        <Tooltip
+            label="Double click to clear"
+            openDelay={1000}
+        >
+            <StyledRating
+                {...props}
+                onDoubleClick={(e) => onClick(e, props.value)}
+            />
+        </Tooltip>
+    );
 };

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

@@ -9,169 +9,169 @@ import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
 
 interface ScrollAreaProps extends MantineScrollAreaProps {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
 const StyledScrollArea = styled(MantineScrollArea)`
-  & .mantine-ScrollArea-thumb {
-    background: var(--scrollbar-thumb-bg);
-    border-radius: 0;
-  }
+    & .mantine-ScrollArea-thumb {
+        background: var(--scrollbar-thumb-bg);
+        border-radius: 0;
+    }
 
-  & .mantine-ScrollArea-scrollbar {
-    padding: 0;
-    background: var(--scrollbar-track-bg);
-  }
+    & .mantine-ScrollArea-scrollbar {
+        padding: 0;
+        background: var(--scrollbar-track-bg);
+    }
 
-  & .mantine-ScrollArea-viewport > div {
-    display: block !important;
-  }
+    & .mantine-ScrollArea-viewport > div {
+        display: block !important;
+    }
 `;
 
 const StyledNativeScrollArea = styled.div<{ scrollBarOffset?: string; windowBarStyle?: Platform }>`
-  height: 100%;
-  overflow-y: overlay !important;
+    height: 100%;
+    overflow-y: overlay !important;
 
-  &::-webkit-scrollbar-track {
-    margin-top: ${(props) =>
-      props.windowBarStyle === Platform.WINDOWS ||
-      props.windowBarStyle === Platform.MACOS ||
-      props.windowBarStyle === Platform.LINUX
-        ? '0px'
-        : props.scrollBarOffset || '65px'};
-  }
+    &::-webkit-scrollbar-track {
+        margin-top: ${(props) =>
+            props.windowBarStyle === Platform.WINDOWS ||
+            props.windowBarStyle === Platform.MACOS ||
+            props.windowBarStyle === Platform.LINUX
+                ? '0px'
+                : props.scrollBarOffset || '65px'};
+    }
 
-  &::-webkit-scrollbar-thumb {
-    margin-top: ${(props) =>
-      props.windowBarStyle === Platform.WINDOWS ||
-      props.windowBarStyle === Platform.MACOS ||
-      props.windowBarStyle === Platform.LINUX
-        ? '0px'
-        : props.scrollBarOffset || '65px'};
-  }
+    &::-webkit-scrollbar-thumb {
+        margin-top: ${(props) =>
+            props.windowBarStyle === Platform.WINDOWS ||
+            props.windowBarStyle === Platform.MACOS ||
+            props.windowBarStyle === Platform.LINUX
+                ? '0px'
+                : props.scrollBarOffset || '65px'};
+    }
 `;
 
 export const ScrollArea = forwardRef(({ children, ...props }: ScrollAreaProps, ref: Ref<any>) => {
-  return (
-    <StyledScrollArea
-      ref={ref}
-      scrollbarSize={12}
-      {...props}
-    >
-      {children}
-    </StyledScrollArea>
-  );
+    return (
+        <StyledScrollArea
+            ref={ref}
+            scrollbarSize={12}
+            {...props}
+        >
+            {children}
+        </StyledScrollArea>
+    );
 });
 
 interface NativeScrollAreaProps {
-  children: React.ReactNode;
-  debugScrollPosition?: boolean;
-  noHeader?: boolean;
-  pageHeaderProps?: PageHeaderProps & { offset?: any; target?: any };
-  scrollBarOffset?: string;
-  scrollHideDelay?: number;
-  style?: React.CSSProperties;
+    children: React.ReactNode;
+    debugScrollPosition?: boolean;
+    noHeader?: boolean;
+    pageHeaderProps?: PageHeaderProps & { offset?: any; target?: any };
+    scrollBarOffset?: string;
+    scrollHideDelay?: number;
+    style?: React.CSSProperties;
 }
 
 export const NativeScrollArea = forwardRef(
-  (
-    {
-      children,
-      pageHeaderProps,
-      debugScrollPosition,
-      scrollBarOffset,
-      scrollHideDelay,
-      noHeader,
-      ...props
-    }: NativeScrollAreaProps,
-    ref: Ref<HTMLDivElement>,
-  ) => {
-    const { windowBarStyle } = useWindowSettings();
-    const [hideScrollbar, setHideScrollbar] = useState(false);
-    const [hideHeader, setHideHeader] = useState(true);
-    const { start, clear } = useTimeout(
-      () => setHideScrollbar(true),
-      scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 0,
-    );
+    (
+        {
+            children,
+            pageHeaderProps,
+            debugScrollPosition,
+            scrollBarOffset,
+            scrollHideDelay,
+            noHeader,
+            ...props
+        }: NativeScrollAreaProps,
+        ref: Ref<HTMLDivElement>,
+    ) => {
+        const { windowBarStyle } = useWindowSettings();
+        const [hideScrollbar, setHideScrollbar] = useState(false);
+        const [hideHeader, setHideHeader] = useState(true);
+        const { start, clear } = useTimeout(
+            () => setHideScrollbar(true),
+            scrollHideDelay !== undefined ? scrollHideDelay * 1000 : 0,
+        );
 
-    const containerRef = useRef(null);
-    const mergedRef = useMergedRef(ref, containerRef);
+        const containerRef = useRef(null);
+        const mergedRef = useMergedRef(ref, containerRef);
 
-    const { scrollYProgress } = useScroll({
-      container: containerRef,
-      offset: pageHeaderProps?.offset || ['center start', 'end start'],
-      target: pageHeaderProps?.target,
-    });
+        const { scrollYProgress } = useScroll({
+            container: containerRef,
+            offset: pageHeaderProps?.offset || ['center start', 'end start'],
+            target: pageHeaderProps?.target,
+        });
 
-    // Automatically hide the scrollbar after the timeout duration
-    useEffect(() => {
-      start();
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-      const setHeaderVisibility = (v: number) => {
-        if (v === 1) {
-          return setHideHeader(false);
-        }
-
-        if (hideHeader === false) {
-          return setHideHeader(true);
-        }
-
-        return undefined;
-      };
-
-      const unsubscribe = scrollYProgress.on('change', setHeaderVisibility);
-
-      return () => {
-        unsubscribe();
-      };
-    }, [hideHeader, scrollYProgress]);
-
-    return (
-      <>
-        {!noHeader && (
-          <PageHeader
-            isHidden={hideHeader}
-            position="absolute"
-            style={{ opacity: scrollYProgress as any }}
-            {...pageHeaderProps}
-          />
-        )}
-        <StyledNativeScrollArea
-          ref={mergedRef}
-          className={hideScrollbar ? 'hide-scrollbar' : undefined}
-          scrollBarOffset={scrollBarOffset}
-          windowBarStyle={windowBarStyle}
-          onMouseEnter={() => {
-            setHideScrollbar(false);
-            clear();
-          }}
-          onMouseLeave={() => {
+        // Automatically hide the scrollbar after the timeout duration
+        useEffect(() => {
             start();
-          }}
-          {...props}
-        >
-          {children}
-        </StyledNativeScrollArea>
-        {debugScrollPosition && (
-          <motion.div
-            style={{
-              background: 'red',
-              height: '10px',
-              left: 0,
-              position: 'fixed',
-              right: 0,
-              scaleX: scrollYProgress,
-              top: 0,
-              transformOrigin: '0%',
-              width: '100%',
-              zIndex: 5000,
-            }}
-          />
-        )}
-      </>
-    );
-  },
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+
+        useEffect(() => {
+            const setHeaderVisibility = (v: number) => {
+                if (v === 1) {
+                    return setHideHeader(false);
+                }
+
+                if (hideHeader === false) {
+                    return setHideHeader(true);
+                }
+
+                return undefined;
+            };
+
+            const unsubscribe = scrollYProgress.on('change', setHeaderVisibility);
+
+            return () => {
+                unsubscribe();
+            };
+        }, [hideHeader, scrollYProgress]);
+
+        return (
+            <>
+                {!noHeader && (
+                    <PageHeader
+                        isHidden={hideHeader}
+                        position="absolute"
+                        style={{ opacity: scrollYProgress as any }}
+                        {...pageHeaderProps}
+                    />
+                )}
+                <StyledNativeScrollArea
+                    ref={mergedRef}
+                    className={hideScrollbar ? 'hide-scrollbar' : undefined}
+                    scrollBarOffset={scrollBarOffset}
+                    windowBarStyle={windowBarStyle}
+                    onMouseEnter={() => {
+                        setHideScrollbar(false);
+                        clear();
+                    }}
+                    onMouseLeave={() => {
+                        start();
+                    }}
+                    {...props}
+                >
+                    {children}
+                </StyledNativeScrollArea>
+                {debugScrollPosition && (
+                    <motion.div
+                        style={{
+                            background: 'red',
+                            height: '10px',
+                            left: 0,
+                            position: 'fixed',
+                            right: 0,
+                            scaleX: scrollYProgress,
+                            top: 0,
+                            transformOrigin: '0%',
+                            width: '100%',
+                            zIndex: 5000,
+                        }}
+                    />
+                )}
+            </>
+        );
+    },
 );

src/renderer/components/search-input/index.tsx

@@ -7,64 +7,64 @@ import { useSettingsStore } from '/@/renderer/store';
 import { shallow } from 'zustand/shallow';
 
 interface SearchInputProps extends TextInputProps {
-  initialWidth?: number;
-  openedWidth?: number;
-  value?: string;
+    initialWidth?: number;
+    openedWidth?: number;
+    value?: string;
 }
 
 export const SearchInput = ({
-  initialWidth,
-  onChange,
-  openedWidth,
-  ...props
+    initialWidth,
+    onChange,
+    openedWidth,
+    ...props
 }: SearchInputProps) => {
-  const { ref, focused } = useFocusWithin();
-  const mergedRef = useMergedRef<HTMLInputElement>(ref);
-  const binding = useSettingsStore((state) => state.hotkeys.bindings.localSearch, shallow);
+    const { ref, focused } = useFocusWithin();
+    const mergedRef = useMergedRef<HTMLInputElement>(ref);
+    const binding = useSettingsStore((state) => state.hotkeys.bindings.localSearch, shallow);
 
-  const isOpened = focused || ref.current?.value;
-  const showIcon = !isOpened || (openedWidth || 100) > 100;
+    const isOpened = focused || ref.current?.value;
+    const showIcon = !isOpened || (openedWidth || 100) > 100;
 
-  useHotkeys([[binding.hotkey, () => ref.current.select()]]);
+    useHotkeys([[binding.hotkey, () => ref.current.select()]]);
 
-  const handleEscape = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.code === 'Escape') {
-      onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>);
-      ref.current.value = '';
-      ref.current.blur();
-    }
-  };
+    const handleEscape = (e: KeyboardEvent<HTMLInputElement>) => {
+        if (e.code === 'Escape') {
+            onChange?.({ target: { value: '' } } as ChangeEvent<HTMLInputElement>);
+            ref.current.value = '';
+            ref.current.blur();
+        }
+    };
 
-  return (
-    <TextInput
-      ref={mergedRef}
-      {...props}
-      icon={showIcon && <RiSearchLine />}
-      rightSection={
-        isOpened ? (
-          <ActionIcon
-            onClick={() => {
-              ref.current.value = '';
-              ref.current.focus();
+    return (
+        <TextInput
+            ref={mergedRef}
+            {...props}
+            icon={showIcon && <RiSearchLine />}
+            rightSection={
+                isOpened ? (
+                    <ActionIcon
+                        onClick={() => {
+                            ref.current.value = '';
+                            ref.current.focus();
+                        }}
+                    >
+                        <RiCloseFill />
+                    </ActionIcon>
+                ) : null
+            }
+            size="md"
+            styles={{
+                icon: { svg: { fill: 'var(--titlebar-fg)' } },
+                input: {
+                    backgroundColor: isOpened ? 'inherit' : 'transparent !important',
+                    border: 'none !important',
+                    cursor: isOpened ? 'text' : 'pointer',
+                    padding: isOpened ? '10px' : 0,
+                },
             }}
-          >
-            <RiCloseFill />
-          </ActionIcon>
-        ) : null
-      }
-      size="md"
-      styles={{
-        icon: { svg: { fill: 'var(--titlebar-fg)' } },
-        input: {
-          backgroundColor: isOpened ? 'inherit' : 'transparent !important',
-          border: 'none !important',
-          cursor: isOpened ? 'text' : 'pointer',
-          padding: isOpened ? '10px' : 0,
-        },
-      }}
-      width={isOpened ? openedWidth || 150 : initialWidth || 35}
-      onChange={onChange}
-      onKeyDown={handleEscape}
-    />
-  );
+            width={isOpened ? openedWidth || 150 : initialWidth || 35}
+            onChange={onChange}
+            onKeyDown={handleEscape}
+        />
+    );
 };

src/renderer/components/segmented-control/index.tsx

@@ -6,37 +6,37 @@ import styled from 'styled-components';
 type SegmentedControlProps = MantineSegmentedControlProps;
 
 const StyledSegmentedControl = styled(MantineSegmentedControl)<MantineSegmentedControlProps>`
-  & .mantine-SegmentedControl-label {
-    color: var(--input-fg);
-    font-family: var(--content-font-family);
-  }
+    & .mantine-SegmentedControl-label {
+        color: var(--input-fg);
+        font-family: var(--content-font-family);
+    }
 
-  background-color: var(--input-bg);
+    background-color: var(--input-bg);
 
-  & .mantine-SegmentedControl-disabled {
-    opacity: 0.6;
-  }
+    & .mantine-SegmentedControl-disabled {
+        opacity: 0.6;
+    }
 
-  & [data-disabled='true'] {
-    opacity: 0.6;
-  }
+    & [data-disabled='true'] {
+        opacity: 0.6;
+    }
 
-  & .mantine-SegmentedControl-active {
-    color: var(--input-active-fg);
-    background-color: var(--input-active-bg);
-  }
+    & .mantine-SegmentedControl-active {
+        color: var(--input-active-fg);
+        background-color: var(--input-active-bg);
+    }
 `;
 
 export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
-  ({ ...props }: SegmentedControlProps, ref) => {
-    return (
-      <StyledSegmentedControl
-        ref={ref}
-        styles={{}}
-        transitionDuration={250}
-        transitionTimingFunction="linear"
-        {...props}
-      />
-    );
-  },
+    ({ ...props }: SegmentedControlProps, ref) => {
+        return (
+            <StyledSegmentedControl
+                ref={ref}
+                styles={{}}
+                transitionDuration={250}
+                transitionTimingFunction="linear"
+                {...props}
+            />
+        );
+    },
 );

src/renderer/components/select/index.tsx

@@ -1,142 +1,142 @@
 import type {
-  SelectProps as MantineSelectProps,
-  MultiSelectProps as MantineMultiSelectProps,
+    SelectProps as MantineSelectProps,
+    MultiSelectProps as MantineMultiSelectProps,
 } from '@mantine/core';
 import { Select as MantineSelect, MultiSelect as MantineMultiSelect } from '@mantine/core';
 import styled from 'styled-components';
 
 interface SelectProps extends MantineSelectProps {
-  maxWidth?: number | string;
-  width?: number | string;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 export interface MultiSelectProps extends MantineMultiSelectProps {
-  maxWidth?: number | string;
-  width?: number | string;
+    maxWidth?: number | string;
+    width?: number | string;
 }
 
 const StyledSelect = styled(MantineSelect)`
-  & [data-selected='true'] {
-    background: var(--input-bg);
-  }
-
-  & [data-disabled='true'] {
-    background: var(--input-bg);
-    opacity: 0.6;
-  }
-
-  & .mantine-Select-itemsWrapper {
-    & .mantine-Select-item {
-      padding: 40px;
+    & [data-selected='true'] {
+        background: var(--input-bg);
+    }
+
+    & [data-disabled='true'] {
+        background: var(--input-bg);
+        opacity: 0.6;
+    }
+
+    & .mantine-Select-itemsWrapper {
+        & .mantine-Select-item {
+            padding: 40px;
+        }
     }
-  }
 `;
 
 export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
-  return (
-    <StyledSelect
-      withinPortal
-      styles={{
-        dropdown: {
-          background: 'var(--dropdown-menu-bg)',
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
-        },
-        input: {
-          background: 'var(--input-bg)',
-          color: 'var(--input-fg)',
-        },
-        item: {
-          '&:hover': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-hovered]': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-selected="true"]': {
-            '&:hover': {
-              background: 'var(--dropdown-menu-bg-hover)',
-            },
-            background: 'none',
-            color: 'var(--primary-color)',
-          },
-          color: 'var(--dropdown-menu-fg)',
-          padding: '.3rem',
-        },
-      }}
-      sx={{ maxWidth, width }}
-      transitionProps={{ duration: 100, transition: 'fade' }}
-      {...props}
-    />
-  );
+    return (
+        <StyledSelect
+            withinPortal
+            styles={{
+                dropdown: {
+                    background: 'var(--dropdown-menu-bg)',
+                    filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
+                },
+                input: {
+                    background: 'var(--input-bg)',
+                    color: 'var(--input-fg)',
+                },
+                item: {
+                    '&:hover': {
+                        background: 'var(--dropdown-menu-bg-hover)',
+                    },
+                    '&[data-hovered]': {
+                        background: 'var(--dropdown-menu-bg-hover)',
+                    },
+                    '&[data-selected="true"]': {
+                        '&:hover': {
+                            background: 'var(--dropdown-menu-bg-hover)',
+                        },
+                        background: 'none',
+                        color: 'var(--primary-color)',
+                    },
+                    color: 'var(--dropdown-menu-fg)',
+                    padding: '.3rem',
+                },
+            }}
+            sx={{ maxWidth, width }}
+            transitionProps={{ duration: 100, transition: 'fade' }}
+            {...props}
+        />
+    );
 };
 
 const StyledMultiSelect = styled(MantineMultiSelect)`
-  & [data-selected='true'] {
-    background: var(--input-select-bg);
-  }
-
-  & [data-disabled='true'] {
-    background: var(--input-bg);
-    opacity: 0.6;
-  }
-
-  & .mantine-MultiSelect-itemsWrapper {
-    & .mantine-Select-item {
-      padding: 40px;
+    & [data-selected='true'] {
+        background: var(--input-select-bg);
+    }
+
+    & [data-disabled='true'] {
+        background: var(--input-bg);
+        opacity: 0.6;
+    }
+
+    & .mantine-MultiSelect-itemsWrapper {
+        & .mantine-Select-item {
+            padding: 40px;
+        }
     }
-  }
 `;
 
 export const MultiSelect = ({ width, maxWidth, ...props }: MultiSelectProps) => {
-  return (
-    <StyledMultiSelect
-      withinPortal
-      styles={{
-        dropdown: {
-          background: 'var(--dropdown-menu-bg)',
-          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
-        },
-        input: {
-          background: 'var(--input-bg)',
-          color: 'var(--input-fg)',
-        },
-        item: {
-          '&:hover': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-hovered]': {
-            background: 'var(--dropdown-menu-bg-hover)',
-          },
-          '&[data-selected="true"]': {
-            '&:hover': {
-              background: 'var(--dropdown-menu-bg-hover)',
-            },
-            background: 'none',
-            color: 'var(--primary-color)',
-          },
-          color: 'var(--dropdown-menu-fg)',
-          padding: '.5rem .1rem',
-        },
-        value: {
-          margin: '.2rem',
-          paddingBottom: '1rem',
-          paddingLeft: '1rem',
-          paddingTop: '1rem',
-        },
-      }}
-      sx={{ maxWidth, width }}
-      transitionProps={{ duration: 100, transition: 'fade' }}
-      {...props}
-    />
-  );
+    return (
+        <StyledMultiSelect
+            withinPortal
+            styles={{
+                dropdown: {
+                    background: 'var(--dropdown-menu-bg)',
+                    filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
+                },
+                input: {
+                    background: 'var(--input-bg)',
+                    color: 'var(--input-fg)',
+                },
+                item: {
+                    '&:hover': {
+                        background: 'var(--dropdown-menu-bg-hover)',
+                    },
+                    '&[data-hovered]': {
+                        background: 'var(--dropdown-menu-bg-hover)',
+                    },
+                    '&[data-selected="true"]': {
+                        '&:hover': {
+                            background: 'var(--dropdown-menu-bg-hover)',
+                        },
+                        background: 'none',
+                        color: 'var(--primary-color)',
+                    },
+                    color: 'var(--dropdown-menu-fg)',
+                    padding: '.5rem .1rem',
+                },
+                value: {
+                    margin: '.2rem',
+                    paddingBottom: '1rem',
+                    paddingLeft: '1rem',
+                    paddingTop: '1rem',
+                },
+            }}
+            sx={{ maxWidth, width }}
+            transitionProps={{ duration: 100, transition: 'fade' }}
+            {...props}
+        />
+    );
 };
 
 Select.defaultProps = {
-  maxWidth: undefined,
-  width: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };
 
 MultiSelect.defaultProps = {
-  maxWidth: undefined,
-  width: undefined,
+    maxWidth: undefined,
+    width: undefined,
 };

src/renderer/components/skeleton/index.tsx

@@ -3,16 +3,16 @@ import { Skeleton as MantineSkeleton } from '@mantine/core';
 import styled from 'styled-components';
 
 const StyledSkeleton = styled(MantineSkeleton)`
-  &::after {
-    background: var(--placeholder-bg);
-  }
+    &::after {
+        background: var(--placeholder-bg);
+    }
 `;
 
 export const Skeleton = ({ ...props }: MantineSkeletonProps) => {
-  return (
-    <StyledSkeleton
-      animate={false}
-      {...props}
-    />
-  );
+    return (
+        <StyledSkeleton
+            animate={false}
+            {...props}
+        />
+    );
 };

src/renderer/components/slider/index.tsx

@@ -5,30 +5,30 @@ import styled from 'styled-components';
 type SliderProps = MantineSliderProps;
 
 const StyledSlider = styled(MantineSlider)`
-  & .mantine-Slider-track {
-    height: 0.5rem;
-    background-color: var(--slider-track-bg);
-  }
+    & .mantine-Slider-track {
+        height: 0.5rem;
+        background-color: var(--slider-track-bg);
+    }
 
-  & .mantine-Slider-bar {
-    background-color: var(--primary-color);
-  }
+    & .mantine-Slider-bar {
+        background-color: var(--primary-color);
+    }
 
-  & .mantine-Slider-thumb {
-    width: 1rem;
-    height: 1rem;
-    background: var(--slider-thumb-bg);
-    border: none;
-  }
+    & .mantine-Slider-thumb {
+        width: 1rem;
+        height: 1rem;
+        background: var(--slider-thumb-bg);
+        border: none;
+    }
 
-  & .mantine-Slider-label {
-    padding: 0 1rem;
-    color: var(--tooltip-fg);
-    font-size: 1em;
-    background: var(--tooltip-bg);
-  }
+    & .mantine-Slider-label {
+        padding: 0 1rem;
+        color: var(--tooltip-fg);
+        font-size: 1em;
+        background: var(--tooltip-bg);
+    }
 `;
 
 export const Slider = ({ ...props }: SliderProps) => {
-  return <StyledSlider {...props} />;
+    return <StyledSlider {...props} />;
 };

src/renderer/components/spinner/index.tsx

@@ -5,35 +5,35 @@ import styled from 'styled-components';
 import { rotating } from '/@/renderer/styles';
 
 interface SpinnerProps extends IconType {
-  color?: string;
-  container?: boolean;
-  size?: number;
+    color?: string;
+    container?: boolean;
+    size?: number;
 }
 
 export const SpinnerIcon = styled(RiLoader5Fill)`
-  ${rotating}
-  animation: rotating 1s ease-in-out infinite;
+    ${rotating}
+    animation: rotating 1s ease-in-out infinite;
 `;
 
 export const Spinner = ({ ...props }: SpinnerProps) => {
-  if (props.container) {
-    return (
-      <Center
-        h="100%"
-        w="100%"
-      >
-        <SpinnerIcon
-          color={props.color}
-          size={props.size}
-        />
-      </Center>
-    );
-  }
+    if (props.container) {
+        return (
+            <Center
+                h="100%"
+                w="100%"
+            >
+                <SpinnerIcon
+                    color={props.color}
+                    size={props.size}
+                />
+            </Center>
+        );
+    }
 
-  return <SpinnerIcon {...props} />;
+    return <SpinnerIcon {...props} />;
 };
 
 Spinner.defaultProps = {
-  color: undefined,
-  size: 15,
+    color: undefined,
+    size: 15,
 };

src/renderer/components/switch/index.tsx

@@ -5,24 +5,24 @@ import styled from 'styled-components';
 type SwitchProps = MantineSwitchProps;
 
 const StyledSwitch = styled(MantineSwitch)`
-  display: flex;
+    display: flex;
 
-  & .mantine-Switch-track {
-    background-color: var(--switch-track-bg);
-    border: none;
-  }
-
-  & .mantine-Switch-input {
-    &:checked + .mantine-Switch-track {
-      background-color: var(--switch-track-enabled-bg);
+    & .mantine-Switch-track {
+        background-color: var(--switch-track-bg);
+        border: none;
     }
-  }
 
-  & .mantine-Switch-thumb {
-    background-color: var(--switch-thumb-bg);
-  }
+    & .mantine-Switch-input {
+        &:checked + .mantine-Switch-track {
+            background-color: var(--switch-track-enabled-bg);
+        }
+    }
+
+    & .mantine-Switch-thumb {
+        background-color: var(--switch-thumb-bg);
+    }
 `;
 
 export const Switch = ({ ...props }: SwitchProps) => {
-  return <StyledSwitch {...props} />;
+    return <StyledSwitch {...props} />;
 };

src/renderer/components/tabs/index.tsx

@@ -5,57 +5,57 @@ import styled from 'styled-components';
 type TabsProps = MantineTabsProps;
 
 const StyledTabs = styled(MantineTabs)`
-  height: 100%;
+    height: 100%;
 
-  & .mantine-Tabs-tabsList {
-    padding-right: 1rem;
-  }
-
-  &.mantine-Tabs-tab {
-    padding: 0.5rem 1rem;
-    font-weight: 600;
-    font-size: 1rem;
-    background-color: var(--main-bg);
-  }
-
-  & .mantine-Tabs-panel {
-    padding: 1.5rem 0.5rem;
-  }
-
-  & .mantine-Tabs-tab {
-    padding: 1rem;
-    color: var(--btn-subtle-fg);
-    border-radius: 0;
-
-    &:hover {
-      color: var(--btn-subtle-fg-hover);
-      background: var(--btn-subtle-bg-hover);
+    & .mantine-Tabs-tabsList {
+        padding-right: 1rem;
     }
 
-    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-  }
-
-  button[data-active] {
-    color: var(--btn-subtle-fg);
-    background: none;
-    border-color: var(--primary-color);
-
-    &:hover {
-      background: none;
+    &.mantine-Tabs-tab {
+        padding: 0.5rem 1rem;
+        font-weight: 600;
+        font-size: 1rem;
+        background-color: var(--main-bg);
+    }
+
+    & .mantine-Tabs-panel {
+        padding: 1.5rem 0.5rem;
+    }
+
+    & .mantine-Tabs-tab {
+        padding: 1rem;
+        color: var(--btn-subtle-fg);
+        border-radius: 0;
+
+        &:hover {
+            color: var(--btn-subtle-fg-hover);
+            background: var(--btn-subtle-bg-hover);
+        }
+
+        transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+    }
+
+    button[data-active] {
+        color: var(--btn-subtle-fg);
+        background: none;
+        border-color: var(--primary-color);
+
+        &:hover {
+            background: none;
+        }
     }
-  }
 `;
 
 export const Tabs = ({ children, ...props }: TabsProps) => {
-  return <StyledTabs {...props}>{children}</StyledTabs>;
+    return <StyledTabs {...props}>{children}</StyledTabs>;
 };
 
 const Panel = ({ children, ...props }: TabsPanelProps) => {
-  return (
-    <StyledTabs.Panel {...props}>
-      <Suspense fallback={<></>}>{children}</Suspense>
-    </StyledTabs.Panel>
-  );
+    return (
+        <StyledTabs.Panel {...props}>
+            <Suspense fallback={<></>}>{children}</Suspense>
+        </StyledTabs.Panel>
+    );
 };
 
 Tabs.List = StyledTabs.List;

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

@@ -7,50 +7,50 @@ import { textEllipsis } from '/@/renderer/styles';
 type MantineTextTitleDivProps = MantineTitleProps & ComponentPropsWithoutRef<'div'>;
 
 interface TextTitleProps extends MantineTextTitleDivProps {
-  $link?: boolean;
-  $noSelect?: boolean;
-  $secondary?: boolean;
-  children?: ReactNode;
-  overflow?: 'hidden' | 'visible';
-  to?: string;
-  weight?: number;
+    $link?: boolean;
+    $noSelect?: boolean;
+    $secondary?: boolean;
+    children?: ReactNode;
+    overflow?: 'hidden' | 'visible';
+    to?: string;
+    weight?: number;
 }
 
 const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
-  overflow: ${(props) => props.overflow};
-  color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
-  cursor: ${(props) => props.$link && 'cursor'};
-  transition: color 0.2s ease-in-out;
-  user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
-  ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
+    overflow: ${(props) => props.overflow};
+    color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
+    cursor: ${(props) => props.$link && 'cursor'};
+    transition: color 0.2s ease-in-out;
+    user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
+    ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
 
-  &:hover {
-    color: ${(props) => props.$link && 'var(--main-fg)'};
-    text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
-  }
+    &:hover {
+        color: ${(props) => props.$link && 'var(--main-fg)'};
+        text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
+    }
 `;
 
 const _TextTitle = ({ children, $secondary, overflow, $noSelect, ...rest }: TextTitleProps) => {
-  return (
-    <StyledTextTitle
-      $noSelect={$noSelect}
-      $secondary={$secondary}
-      overflow={overflow}
-      {...rest}
-    >
-      {children}
-    </StyledTextTitle>
-  );
+    return (
+        <StyledTextTitle
+            $noSelect={$noSelect}
+            $secondary={$secondary}
+            overflow={overflow}
+            {...rest}
+        >
+            {children}
+        </StyledTextTitle>
+    );
 };
 
 export const TextTitle = createPolymorphicComponent<'div', TextTitleProps>(_TextTitle);
 
 _TextTitle.defaultProps = {
-  $link: false,
-  $noSelect: false,
-  $secondary: false,
-  font: undefined,
-  overflow: 'visible',
-  to: '',
-  weight: 400,
+    $link: false,
+    $noSelect: false,
+    $secondary: false,
+    font: undefined,
+    overflow: 'visible',
+    to: '',
+    weight: 400,
 };

src/renderer/components/text/index.tsx

@@ -8,52 +8,52 @@ import { textEllipsis } from '/@/renderer/styles';
 type MantineTextDivProps = MantineTextProps & ComponentPropsWithoutRef<'div'>;
 
 interface TextProps extends MantineTextDivProps {
-  $link?: boolean;
-  $noSelect?: boolean;
-  $secondary?: boolean;
-  children?: ReactNode;
-  font?: Font;
-  overflow?: 'hidden' | 'visible';
-  to?: string;
-  weight?: number;
+    $link?: boolean;
+    $noSelect?: boolean;
+    $secondary?: boolean;
+    children?: ReactNode;
+    font?: Font;
+    overflow?: 'hidden' | 'visible';
+    to?: string;
+    weight?: number;
 }
 
 const StyledText = styled(MantineText)<TextProps>`
-  overflow: ${(props) => props.overflow};
-  color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
-  font-family: ${(props) => props.font};
-  cursor: ${(props) => props.$link && 'cursor'};
-  user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
-  ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
+    overflow: ${(props) => props.overflow};
+    color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
+    font-family: ${(props) => props.font};
+    cursor: ${(props) => props.$link && 'cursor'};
+    user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
+    ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
 
-  &:hover {
-    color: ${(props) => props.$link && 'var(--main-fg)'};
-    text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
-  }
+    &:hover {
+        color: ${(props) => props.$link && 'var(--main-fg)'};
+        text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
+    }
 `;
 
 export const _Text = ({ children, $secondary, overflow, font, $noSelect, ...rest }: TextProps) => {
-  return (
-    <StyledText
-      $noSelect={$noSelect}
-      $secondary={$secondary}
-      font={font}
-      overflow={overflow}
-      {...rest}
-    >
-      {children}
-    </StyledText>
-  );
+    return (
+        <StyledText
+            $noSelect={$noSelect}
+            $secondary={$secondary}
+            font={font}
+            overflow={overflow}
+            {...rest}
+        >
+            {children}
+        </StyledText>
+    );
 };
 
 export const Text = createPolymorphicComponent<'div', TextProps>(_Text);
 
 _Text.defaultProps = {
-  $link: false,
-  $noSelect: false,
-  $secondary: false,
-  font: undefined,
-  overflow: 'visible',
-  to: '',
-  weight: 400,
+    $link: false,
+    $noSelect: false,
+    $secondary: false,
+    font: undefined,
+    overflow: 'visible',
+    to: '',
+    weight: 400,
 };

src/renderer/components/toast/index.tsx

@@ -1,76 +1,76 @@
 import type { NotificationProps as MantineNotificationProps } from '@mantine/notifications';
 import {
-  showNotification,
-  updateNotification,
-  hideNotification,
-  cleanNotifications,
-  cleanNotificationsQueue,
+    showNotification,
+    updateNotification,
+    hideNotification,
+    cleanNotifications,
+    cleanNotificationsQueue,
 } from '@mantine/notifications';
 
 interface NotificationProps extends MantineNotificationProps {
-  type?: 'success' | 'error' | 'warning' | 'info';
+    type?: 'success' | 'error' | 'warning' | 'info';
 }
 
 const showToast = ({ type, ...props }: NotificationProps) => {
-  const color =
-    type === 'success'
-      ? 'var(--success-color)'
-      : type === 'warning'
-      ? 'var(--warning-color)'
-      : type === 'error'
-      ? 'var(--danger-color)'
-      : 'var(--primary-color)';
+    const color =
+        type === 'success'
+            ? 'var(--success-color)'
+            : type === 'warning'
+            ? 'var(--warning-color)'
+            : type === 'error'
+            ? 'var(--danger-color)'
+            : 'var(--primary-color)';
 
-  const defaultTitle =
-    type === 'success'
-      ? 'Success'
-      : type === 'warning'
-      ? 'Warning'
-      : type === 'error'
-      ? 'Error'
-      : 'Info';
+    const defaultTitle =
+        type === 'success'
+            ? 'Success'
+            : type === 'warning'
+            ? 'Warning'
+            : type === 'error'
+            ? 'Error'
+            : 'Info';
 
-  const defaultDuration = type === 'error' ? 2000 : 1000;
+    const defaultDuration = type === 'error' ? 2000 : 1000;
 
-  return showNotification({
-    autoClose: defaultDuration,
-    styles: () => ({
-      closeButton: {
-        '&:hover': {
-          background: 'transparent',
-        },
-      },
-      description: {
-        color: 'var(--toast-description-fg)',
-        fontSize: '1rem',
-      },
-      loader: {
-        margin: '1rem',
-      },
-      root: {
-        '&::before': { backgroundColor: color },
-        background: 'var(--toast-bg)',
-        border: '2px solid var(--generic-border-color)',
-        bottom: '90px',
-      },
-      title: {
-        color: 'var(--toast-title-fg)',
-        fontSize: '1.3rem',
-      },
-    }),
-    title: defaultTitle,
-    ...props,
-  });
+    return showNotification({
+        autoClose: defaultDuration,
+        styles: () => ({
+            closeButton: {
+                '&:hover': {
+                    background: 'transparent',
+                },
+            },
+            description: {
+                color: 'var(--toast-description-fg)',
+                fontSize: '1rem',
+            },
+            loader: {
+                margin: '1rem',
+            },
+            root: {
+                '&::before': { backgroundColor: color },
+                background: 'var(--toast-bg)',
+                border: '2px solid var(--generic-border-color)',
+                bottom: '90px',
+            },
+            title: {
+                color: 'var(--toast-title-fg)',
+                fontSize: '1.3rem',
+            },
+        }),
+        title: defaultTitle,
+        ...props,
+    });
 };
 
 export const toast = {
-  clean: cleanNotifications,
-  cleanQueue: cleanNotificationsQueue,
-  error: (props: NotificationProps) => showToast({ type: 'error', ...props }),
-  hide: hideNotification,
-  info: (props: NotificationProps) => showToast({ type: 'info', ...props }),
-  show: showToast,
-  success: (props: NotificationProps) => showToast({ type: 'success', ...props }),
-  update: updateNotification,
-  warn: (props: NotificationProps) => showToast({ type: 'warning', ...props }),
+    clean: cleanNotifications,
+    cleanQueue: cleanNotificationsQueue,
+    error: (props: NotificationProps) => showToast({ type: 'error', ...props }),
+    hide: hideNotification,
+    info: (props: NotificationProps) => showToast({ type: 'info', ...props }),
+    show: showToast,
+    success: (props: NotificationProps) => showToast({ type: 'success', ...props }),
+    update: updateNotification,
+    warn: (props: NotificationProps) => showToast({ type: 'warning', ...props }),
 };

src/renderer/components/tooltip/index.tsx

@@ -3,44 +3,44 @@ import { Tooltip as MantineTooltip } from '@mantine/core';
 import styled from 'styled-components';
 
 const StyledTooltip = styled(MantineTooltip)`
-  & .mantine-Tooltip-tooltip {
-    margin: 20px;
-  }
+    & .mantine-Tooltip-tooltip {
+        margin: 20px;
+    }
 `;
 
 export const Tooltip = ({ children, ...rest }: TooltipProps) => {
-  return (
-    <StyledTooltip
-      multiline
-      withinPortal
-      pl={10}
-      pr={10}
-      py={5}
-      radius="xs"
-      styles={{
-        tooltip: {
-          background: 'var(--tooltip-bg)',
-          boxShadow: '4px 4px 10px 0px rgba(0,0,0,0.2)',
-          color: 'var(--tooltip-fg)',
-          fontSize: '1.1rem',
-          fontWeight: 550,
-          maxWidth: '250px',
-        },
-      }}
-      transitionProps={{
-        duration: 250,
-        transition: 'fade',
-      }}
-      {...rest}
-    >
-      {children}
-    </StyledTooltip>
-  );
+    return (
+        <StyledTooltip
+            multiline
+            withinPortal
+            pl={10}
+            pr={10}
+            py={5}
+            radius="xs"
+            styles={{
+                tooltip: {
+                    background: 'var(--tooltip-bg)',
+                    boxShadow: '4px 4px 10px 0px rgba(0,0,0,0.2)',
+                    color: 'var(--tooltip-fg)',
+                    fontSize: '1.1rem',
+                    fontWeight: 550,
+                    maxWidth: '250px',
+                },
+            }}
+            transitionProps={{
+                duration: 250,
+                transition: 'fade',
+            }}
+            {...rest}
+        >
+            {children}
+        </StyledTooltip>
+    );
 };
 
 Tooltip.defaultProps = {
-  openDelay: 0,
-  position: 'top',
-  withArrow: true,
-  withinPortal: true,
+    openDelay: 0,
+    position: 'top',
+    withArrow: true,
+    withinPortal: true,
 };

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

@@ -11,87 +11,91 @@ import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/
 import { CardRow, PlayQueueAddOptions, Play, CardRoute } from '/@/renderer/types';
 
 interface BaseGridCardProps {
-  columnIndex: number;
-  controls: {
-    cardRows: CardRow<Album | AlbumArtist | Artist>[];
-    handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
-    handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
-    itemType: LibraryItem;
-    playButtonBehavior: Play;
-    route: CardRoute;
-  };
-  data: any;
-  isHidden?: boolean;
-  listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
+    columnIndex: number;
+    controls: {
+        cardRows: CardRow<Album | AlbumArtist | Artist>[];
+        handleFavorite: (options: {
+            id: string[];
+            isFavorite: boolean;
+            itemType: LibraryItem;
+        }) => void;
+        handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
+        itemType: LibraryItem;
+        playButtonBehavior: Play;
+        route: CardRoute;
+    };
+    data: any;
+    isHidden?: boolean;
+    listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
 }
 
 const DefaultCardContainer = styled.div<{ $isHidden?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100% - 2rem);
-  margin: 0.5rem;
-  overflow: hidden;
-  background: var(--card-default-bg);
-  border-radius: var(--card-default-radius);
-  cursor: pointer;
-  opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
-  pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: calc(100% - 2rem);
+    margin: 0.5rem;
+    overflow: hidden;
+    background: var(--card-default-bg);
+    border-radius: var(--card-default-radius);
+    cursor: pointer;
+    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
+    pointer-events: auto;
 
-  &:hover {
-    background: var(--card-default-bg-hover);
-  }
+    &:hover {
+        background: var(--card-default-bg-hover);
+    }
 `;
 
 const InnerCardContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  padding: 1rem;
-  overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    overflow: hidden;
 
-  .card-controls {
-    opacity: 0;
-  }
-
-  &:hover .card-controls {
-    opacity: 1;
-  }
-
-  &:hover * {
-    &::before {
-      opacity: 0.5;
+    .card-controls {
+        opacity: 0;
+    }
+
+    &:hover .card-controls {
+        opacity: 1;
+    }
+
+    &:hover * {
+        &::before {
+            opacity: 0.5;
+        }
     }
-  }
 `;
 
 const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 100%;
-  aspect-ratio: 1/1;
-  overflow: hidden;
-  background: var(--placeholder-bg);
-  border-radius: var(--card-default-radius);
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
     height: 100%;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
-    opacity: 0;
-    transition: all 0.2s ease-in-out;
-    content: '';
-    user-select: none;
-  }
-  ${(props) =>
-    props.$isFavorite &&
-    `
+    aspect-ratio: 1/1;
+    overflow: hidden;
+    background: var(--placeholder-bg);
+    border-radius: var(--card-default-radius);
+
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
+        content: '';
+        user-select: none;
+    }
+    ${(props) =>
+        props.$isFavorite &&
+        `
     &::after {
     position: absolute;
     top: -50px;
@@ -108,134 +112,134 @@ const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
 `;
 
 const Image = styled(SimpleImg)`
-  width: 100%;
-  max-width: 100%;
-  height: 100% !important;
-  max-height: 100%;
-  border: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
+    border: 0;
 
-  img {
-    height: 100%;
-    object-fit: cover;
-  }
+    img {
+        height: 100%;
+        object-fit: cover;
+    }
 `;
 
 const DetailContainer = styled.div`
-  margin-top: 0.5rem;
+    margin-top: 0.5rem;
 `;
 
 export const DefaultCard = ({
-  listChildProps,
-  data,
-  columnIndex,
-  controls,
-  isHidden,
+    listChildProps,
+    data,
+    columnIndex,
+    controls,
+    isHidden,
 }: BaseGridCardProps) => {
-  const navigate = useNavigate();
+    const navigate = useNavigate();
 
-  if (data) {
-    const path = generatePath(
-      controls.route.route,
-      controls.route.slugs?.reduce((acc, slug) => {
-        return {
-          ...acc,
-          [slug.slugProperty]: data[slug.idProperty],
-        };
-      }, {}),
-    );
+    if (data) {
+        const path = generatePath(
+            controls.route.route,
+            controls.route.slugs?.reduce((acc, slug) => {
+                return {
+                    ...acc,
+                    [slug.slugProperty]: data[slug.idProperty],
+                };
+            }, {}),
+        );
 
-    let Placeholder = RiAlbumFill;
+        let Placeholder = RiAlbumFill;
 
-    switch (controls.itemType) {
-      case LibraryItem.ALBUM:
-        Placeholder = RiAlbumFill;
-        break;
-      case LibraryItem.ARTIST:
-        Placeholder = RiUserVoiceFill;
-        break;
-      case LibraryItem.ALBUM_ARTIST:
-        Placeholder = RiUserVoiceFill;
-        break;
-      case LibraryItem.PLAYLIST:
-        Placeholder = RiPlayListFill;
-        break;
-      default:
-        Placeholder = RiAlbumFill;
-        break;
+        switch (controls.itemType) {
+            case LibraryItem.ALBUM:
+                Placeholder = RiAlbumFill;
+                break;
+            case LibraryItem.ARTIST:
+                Placeholder = RiUserVoiceFill;
+                break;
+            case LibraryItem.ALBUM_ARTIST:
+                Placeholder = RiUserVoiceFill;
+                break;
+            case LibraryItem.PLAYLIST:
+                Placeholder = RiPlayListFill;
+                break;
+            default:
+                Placeholder = RiAlbumFill;
+                break;
+        }
+
+        return (
+            <DefaultCardContainer
+                key={`card-${columnIndex}-${listChildProps.index}`}
+                onClick={() => navigate(path)}
+            >
+                <InnerCardContainer>
+                    <ImageContainer $isFavorite={data?.userFavorite}>
+                        {data?.imageUrl ? (
+                            <Image
+                                importance="auto"
+                                placeholder={data?.imagePlaceholderUrl || 'var(--placeholder-bg)'}
+                                src={data?.imageUrl}
+                            />
+                        ) : (
+                            <Center
+                                sx={{
+                                    background: 'var(--placeholder-bg)',
+                                    borderRadius: 'var(--card-default-radius)',
+                                    height: '100%',
+                                    width: '100%',
+                                }}
+                            >
+                                <Placeholder
+                                    color="var(--placeholder-fg)"
+                                    size={35}
+                                />
+                            </Center>
+                        )}
+
+                        <GridCardControls
+                            handleFavorite={controls.handleFavorite}
+                            handlePlayQueueAdd={controls.handlePlayQueueAdd}
+                            itemData={data}
+                            itemType={controls.itemType}
+                        />
+                    </ImageContainer>
+                    <DetailContainer>
+                        <CardRows
+                            data={data}
+                            rows={controls.cardRows}
+                        />
+                    </DetailContainer>
+                </InnerCardContainer>
+            </DefaultCardContainer>
+        );
     }
 
     return (
-      <DefaultCardContainer
-        key={`card-${columnIndex}-${listChildProps.index}`}
-        onClick={() => navigate(path)}
-      >
-        <InnerCardContainer>
-          <ImageContainer $isFavorite={data?.userFavorite}>
-            {data?.imageUrl ? (
-              <Image
-                importance="auto"
-                placeholder={data?.imagePlaceholderUrl || 'var(--placeholder-bg)'}
-                src={data?.imageUrl}
-              />
-            ) : (
-              <Center
-                sx={{
-                  background: 'var(--placeholder-bg)',
-                  borderRadius: 'var(--card-default-radius)',
-                  height: '100%',
-                  width: '100%',
-                }}
-              >
-                <Placeholder
-                  color="var(--placeholder-fg)"
-                  size={35}
-                />
-              </Center>
-            )}
-
-            <GridCardControls
-              handleFavorite={controls.handleFavorite}
-              handlePlayQueueAdd={controls.handlePlayQueueAdd}
-              itemData={data}
-              itemType={controls.itemType}
-            />
-          </ImageContainer>
-          <DetailContainer>
-            <CardRows
-              data={data}
-              rows={controls.cardRows}
-            />
-          </DetailContainer>
-        </InnerCardContainer>
-      </DefaultCardContainer>
+        <DefaultCardContainer
+            key={`card-${columnIndex}-${listChildProps.index}`}
+            $isHidden={isHidden}
+        >
+            <InnerCardContainer>
+                <ImageContainer>
+                    <Skeleton
+                        visible
+                        radius="sm"
+                    />
+                </ImageContainer>
+                <DetailContainer>
+                    <Stack spacing="sm">
+                        {controls.cardRows.map((row, index) => (
+                            <Skeleton
+                                key={`${index}-${columnIndex}-${row.arrayProperty}`}
+                                visible
+                                height={14}
+                                radius="sm"
+                            />
+                        ))}
+                    </Stack>
+                </DetailContainer>
+            </InnerCardContainer>
+        </DefaultCardContainer>
     );
-  }
-
-  return (
-    <DefaultCardContainer
-      key={`card-${columnIndex}-${listChildProps.index}`}
-      $isHidden={isHidden}
-    >
-      <InnerCardContainer>
-        <ImageContainer>
-          <Skeleton
-            visible
-            radius="sm"
-          />
-        </ImageContainer>
-        <DetailContainer>
-          <Stack spacing="sm">
-            {controls.cardRows.map((row, index) => (
-              <Skeleton
-                key={`${index}-${columnIndex}-${row.arrayProperty}`}
-                visible
-                height={14}
-                radius="sm"
-              />
-            ))}
-          </Stack>
-        </DetailContainer>
-      </InnerCardContainer>
-    </DefaultCardContainer>
-  );
 };

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

@@ -9,197 +9,197 @@ import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { LibraryItem } from '/@/renderer/api/types';
 import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu/hooks/use-handle-context-menu';
 import {
-  ALBUM_CONTEXT_MENU_ITEMS,
-  ARTIST_CONTEXT_MENU_ITEMS,
+    ALBUM_CONTEXT_MENU_ITEMS,
+    ARTIST_CONTEXT_MENU_ITEMS,
 } from '/@/renderer/features/context-menu/context-menu-items';
 
 type PlayButtonType = UnstyledButtonProps & React.ComponentPropsWithoutRef<'button'>;
 
 const PlayButton = styled.button<PlayButtonType>`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 50px;
-  height: 50px;
-  background-color: rgb(255, 255, 255);
-  border: none;
-  border-radius: 50%;
-  opacity: 0.8;
-  transition: opacity 0.2s ease-in-out;
-  transition: scale 0.1s ease-in-out;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    background-color: rgb(255, 255, 255);
+    border: none;
+    border-radius: 50%;
+    opacity: 0.8;
+    transition: opacity 0.2s ease-in-out;
+    transition: scale 0.1s ease-in-out;
 
-  &:hover {
-    opacity: 1;
-    scale: 1.1;
-  }
+    &:hover {
+        opacity: 1;
+        scale: 1.1;
+    }
 
-  &:active {
-    opacity: 1;
-    scale: 1;
-  }
+    &:active {
+        opacity: 1;
+        scale: 1;
+    }
 
-  svg {
-    fill: rgb(0, 0, 0);
-    stroke: rgb(0, 0, 0);
-  }
+    svg {
+        fill: rgb(0, 0, 0);
+        stroke: rgb(0, 0, 0);
+    }
 `;
 
 const SecondaryButton = styled(_Button)`
-  opacity: 0.8;
-  transition: opacity 0.2s ease-in-out;
-  transition: scale 0.2s linear;
+    opacity: 0.8;
+    transition: opacity 0.2s ease-in-out;
+    transition: scale 0.2s linear;
 
-  &:hover {
-    opacity: 1;
-    scale: 1.1;
-  }
+    &:hover {
+        opacity: 1;
+        scale: 1.1;
+    }
 
-  &:active {
-    opacity: 1;
-    scale: 1;
-  }
+    &:active {
+        opacity: 1;
+        scale: 1;
+    }
 `;
 
 const GridCardControlsContainer = styled.div<{ $isFavorite?: boolean }>`
-  position: absolute;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+    position: absolute;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
 `;
 
 const FavoriteBanner = styled.div`
-  position: absolute;
-  top: -50px;
-  left: -50px;
-  width: 80px;
-  height: 80px;
-  background-color: var(--primary-color);
-  box-shadow: 0 0 10px 8px rgba(0, 0, 0, 80%);
-  transform: rotate(-45deg);
-  content: '';
-  pointer-events: none;
+    position: absolute;
+    top: -50px;
+    left: -50px;
+    width: 80px;
+    height: 80px;
+    background-color: var(--primary-color);
+    box-shadow: 0 0 10px 8px rgba(0, 0, 0, 80%);
+    transform: rotate(-45deg);
+    content: '';
+    pointer-events: none;
 `;
 
 const ControlsRow = styled.div`
-  width: 100%;
-  height: calc(100% / 3);
+    width: 100%;
+    height: calc(100% / 3);
 `;
 
 const BottomControls = styled(ControlsRow)`
-  position: absolute;
-  bottom: 0;
-  display: flex;
-  gap: 0.5rem;
-  align-items: flex-end;
-  justify-content: flex-end;
-  padding: 1rem 0.5rem;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    gap: 0.5rem;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: 1rem 0.5rem;
 `;
 
 const FavoriteWrapper = styled.span<{ isFavorite: boolean }>`
-  svg {
-    fill: ${(props) => props.isFavorite && 'var(--primary-color)'};
-  }
+    svg {
+        fill: ${(props) => props.isFavorite && 'var(--primary-color)'};
+    }
 `;
 
 export const GridCardControls = ({
-  itemData,
-  itemType,
-  handlePlayQueueAdd,
-  handleFavorite,
-}: {
-  handleFavorite: (options: {
-    id: string[];
-    isFavorite: boolean;
-    itemType: LibraryItem;
-    serverId: string;
-  }) => void;
-  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
-  itemData: any;
-  itemType: LibraryItem;
-}) => {
-  const [isFavorite, setIsFavorite] = useState(itemData?.userFavorite);
-  const playButtonBehavior = usePlayButtonBehavior();
-
-  const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    handlePlayQueueAdd?.({
-      byItemType: {
-        id: [itemData.id],
-        type: itemType,
-      },
-      playType: playType || playButtonBehavior,
-    });
-  };
-
-  const handleFavorites = async (e: MouseEvent<HTMLButtonElement>, serverId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    handleFavorite?.({
-      id: [itemData.id],
-      isFavorite: itemData.userFavorite,
-      itemType,
-      serverId,
-    });
-
-    setIsFavorite(!isFavorite);
-  };
-
-  const handleContextMenu = useHandleGeneralContextMenu(
+    itemData,
     itemType,
-    itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
-  );
+    handlePlayQueueAdd,
+    handleFavorite,
+}: {
+    handleFavorite: (options: {
+        id: string[];
+        isFavorite: boolean;
+        itemType: LibraryItem;
+        serverId: string;
+    }) => void;
+    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
+    itemData: any;
+    itemType: LibraryItem;
+}) => {
+    const [isFavorite, setIsFavorite] = useState(itemData?.userFavorite);
+    const playButtonBehavior = usePlayButtonBehavior();
 
-  return (
-    <>
-      {isFavorite ? <FavoriteBanner /> : null}
-      <GridCardControlsContainer
-        $isFavorite
-        className="card-controls"
-      >
-        <PlayButton onClick={handlePlay}>
-          <RiPlayFill size={25} />
-        </PlayButton>
-        <BottomControls>
-          <SecondaryButton
-            p={5}
-            variant="subtle"
-            onClick={(e) => handleFavorites(e, itemData?.serverId)}
-          >
-            <FavoriteWrapper isFavorite={itemData?.isFavorite}>
-              {isFavorite ? (
-                <RiHeartFill size={20} />
-              ) : (
-                <RiHeartLine
-                  color="white"
-                  size={20}
-                />
-              )}
-            </FavoriteWrapper>
-          </SecondaryButton>
-          <SecondaryButton
-            p={5}
-            variant="subtle"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleContextMenu(e, [itemData]);
-            }}
-          >
-            <RiMoreFill
-              color="white"
-              size={20}
-            />
-          </SecondaryButton>
-        </BottomControls>
-      </GridCardControlsContainer>
-    </>
-  );
+    const handlePlay = async (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        handlePlayQueueAdd?.({
+            byItemType: {
+                id: [itemData.id],
+                type: itemType,
+            },
+            playType: playType || playButtonBehavior,
+        });
+    };
+
+    const handleFavorites = async (e: MouseEvent<HTMLButtonElement>, serverId: string) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        handleFavorite?.({
+            id: [itemData.id],
+            isFavorite: itemData.userFavorite,
+            itemType,
+            serverId,
+        });
+
+        setIsFavorite(!isFavorite);
+    };
+
+    const handleContextMenu = useHandleGeneralContextMenu(
+        itemType,
+        itemType === LibraryItem.ALBUM ? ALBUM_CONTEXT_MENU_ITEMS : ARTIST_CONTEXT_MENU_ITEMS,
+    );
+
+    return (
+        <>
+            {isFavorite ? <FavoriteBanner /> : null}
+            <GridCardControlsContainer
+                $isFavorite
+                className="card-controls"
+            >
+                <PlayButton onClick={handlePlay}>
+                    <RiPlayFill size={25} />
+                </PlayButton>
+                <BottomControls>
+                    <SecondaryButton
+                        p={5}
+                        variant="subtle"
+                        onClick={(e) => handleFavorites(e, itemData?.serverId)}
+                    >
+                        <FavoriteWrapper isFavorite={itemData?.isFavorite}>
+                            {isFavorite ? (
+                                <RiHeartFill size={20} />
+                            ) : (
+                                <RiHeartLine
+                                    color="white"
+                                    size={20}
+                                />
+                            )}
+                        </FavoriteWrapper>
+                    </SecondaryButton>
+                    <SecondaryButton
+                        p={5}
+                        variant="subtle"
+                        onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleContextMenu(e, [itemData]);
+                        }}
+                    >
+                        <RiMoreFill
+                            color="white"
+                            size={20}
+                        />
+                    </SecondaryButton>
+                </BottomControls>
+            </GridCardControlsContainer>
+        </>
+    );
 };

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

@@ -6,58 +6,58 @@ import { PosterCard } from '/@/renderer/components/virtual-grid/grid-card/poster
 import { GridCardData, ListDisplayType } from '/@/renderer/types';
 
 export const GridCard = memo(({ data, index, style }: ListChildComponentProps) => {
-  const {
-    columnCount,
-    itemCount,
-    cardRows,
-    itemData,
-    itemType,
-    playButtonBehavior,
-    handlePlayQueueAdd,
-    handleFavorite,
-    route,
-    display,
-  } = data as GridCardData;
+    const {
+        columnCount,
+        itemCount,
+        cardRows,
+        itemData,
+        itemType,
+        playButtonBehavior,
+        handlePlayQueueAdd,
+        handleFavorite,
+        route,
+        display,
+    } = data as GridCardData;
 
-  const cards = [];
-  const startIndex = index * columnCount;
-  const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
+    const cards = [];
+    const startIndex = index * columnCount;
+    const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
 
-  const columnCountInRow = stopIndex - startIndex + 1;
-  let columnCountToAdd = 0;
-  if (columnCountInRow !== columnCount) {
-    columnCountToAdd = columnCount - columnCountInRow;
-  }
-  const View = display === ListDisplayType.CARD ? DefaultCard : PosterCard;
+    const columnCountInRow = stopIndex - startIndex + 1;
+    let columnCountToAdd = 0;
+    if (columnCountInRow !== columnCount) {
+        columnCountToAdd = columnCount - columnCountInRow;
+    }
+    const View = display === ListDisplayType.CARD ? DefaultCard : PosterCard;
 
-  for (let i = startIndex; i <= stopIndex + columnCountToAdd; i += 1) {
-    cards.push(
-      <View
-        key={`card-${i}-${index}`}
-        columnIndex={i}
-        controls={{
-          cardRows,
-          handleFavorite,
-          handlePlayQueueAdd,
-          itemType,
-          playButtonBehavior,
-          route,
-        }}
-        data={itemData[i]}
-        isHidden={i > stopIndex}
-        listChildProps={{ index }}
-      />,
+    for (let i = startIndex; i <= stopIndex + columnCountToAdd; i += 1) {
+        cards.push(
+            <View
+                key={`card-${i}-${index}`}
+                columnIndex={i}
+                controls={{
+                    cardRows,
+                    handleFavorite,
+                    handlePlayQueueAdd,
+                    itemType,
+                    playButtonBehavior,
+                    route,
+                }}
+                data={itemData[i]}
+                isHidden={i > stopIndex}
+                listChildProps={{ index }}
+            />,
+        );
+    }
+
+    return (
+        <div
+            style={{
+                ...style,
+                display: 'flex',
+            }}
+        >
+            {cards}
+        </div>
     );
-  }
-
-  return (
-    <div
-      style={{
-        ...style,
-        display: 'flex',
-      }}
-    >
-      {cards}
-    </div>
-  );
 }, areEqual);

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

@@ -11,65 +11,69 @@ import { GridCardControls } from '/@/renderer/components/virtual-grid/grid-card/
 import { CardRow, PlayQueueAddOptions, Play, CardRoute } from '/@/renderer/types';
 
 interface BaseGridCardProps {
-  columnIndex: number;
-  controls: {
-    cardRows: CardRow<Album | AlbumArtist | Artist>[];
-    handleFavorite: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
-    handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
-    itemType: LibraryItem;
-    playButtonBehavior: Play;
-    route: CardRoute;
-  };
-  data: any;
-  isHidden?: boolean;
-  listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
+    columnIndex: number;
+    controls: {
+        cardRows: CardRow<Album | AlbumArtist | Artist>[];
+        handleFavorite: (options: {
+            id: string[];
+            isFavorite: boolean;
+            itemType: LibraryItem;
+        }) => void;
+        handlePlayQueueAdd: (options: PlayQueueAddOptions) => void;
+        itemType: LibraryItem;
+        playButtonBehavior: Play;
+        route: CardRoute;
+    };
+    data: any;
+    isHidden?: boolean;
+    listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
 }
 
 const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  margin: 1rem;
-  overflow: hidden;
-  opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
-  pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    margin: 1rem;
+    overflow: hidden;
+    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
+    pointer-events: auto;
 
-  .card-controls {
-    opacity: 0;
-  }
+    .card-controls {
+        opacity: 0;
+    }
 `;
 
 const LinkContainer = styled.div`
-  cursor: pointer;
+    cursor: pointer;
 `;
 
 const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  aspect-ratio: 1/1;
-  overflow: hidden;
-  background: var(--card-default-bg);
-  border-radius: var(--card-poster-radius);
+    position: relative;
+    display: flex;
+    align-items: center;
+    aspect-ratio: 1/1;
+    overflow: hidden;
+    background: var(--card-default-bg);
+    border-radius: var(--card-poster-radius);
 
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
-    opacity: 0;
-    transition: all 0.2s ease-in-out;
-    content: '';
-    user-select: none;
-  }
+    &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 100%) 35%, rgba(0, 0, 0, 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
+        content: '';
+        user-select: none;
+    }
 
-  ${(props) =>
-    props.$isFavorite &&
-    `
+    ${(props) =>
+        props.$isFavorite &&
+        `
     &::after {
     position: absolute;
     top: -50px;
@@ -84,140 +88,140 @@ const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
   }
   `}
 
-  &:hover {
-    &::before {
-      opacity: 0.5;
+    &:hover {
+        &::before {
+            opacity: 0.5;
+        }
     }
-  }
 
-  &:hover .card-controls {
-    opacity: 1;
-  }
+    &:hover .card-controls {
+        opacity: 1;
+    }
 `;
 
 const Image = styled(SimpleImg)`
-  width: 100%;
-  max-width: 100%;
-  height: 100% !important;
-  max-height: 100%;
-  border: 0;
+    width: 100%;
+    max-width: 100%;
+    height: 100% !important;
+    max-height: 100%;
+    border: 0;
 
-  img {
-    height: 100%;
-    object-fit: cover;
-  }
+    img {
+        height: 100%;
+        object-fit: cover;
+    }
 `;
 
 const DetailContainer = styled.div`
-  margin-top: 0.5rem;
+    margin-top: 0.5rem;
 `;
 
 export const PosterCard = ({
-  listChildProps,
-  data,
-  columnIndex,
-  controls,
-  isHidden,
+    listChildProps,
+    data,
+    columnIndex,
+    controls,
+    isHidden,
 }: BaseGridCardProps) => {
-  const navigate = useNavigate();
+    const navigate = useNavigate();
 
-  if (data) {
-    const path = generatePath(
-      controls.route.route,
-      controls.route.slugs?.reduce((acc, slug) => {
-        return {
-          ...acc,
-          [slug.slugProperty]: data[slug.idProperty],
-        };
-      }, {}),
-    );
+    if (data) {
+        const path = generatePath(
+            controls.route.route,
+            controls.route.slugs?.reduce((acc, slug) => {
+                return {
+                    ...acc,
+                    [slug.slugProperty]: data[slug.idProperty],
+                };
+            }, {}),
+        );
 
-    let Placeholder = RiAlbumFill;
+        let Placeholder = RiAlbumFill;
 
-    switch (controls.itemType) {
-      case LibraryItem.ALBUM:
-        Placeholder = RiAlbumFill;
-        break;
-      case LibraryItem.ARTIST:
-        Placeholder = RiUserVoiceFill;
-        break;
-      case LibraryItem.ALBUM_ARTIST:
-        Placeholder = RiUserVoiceFill;
-        break;
-      case LibraryItem.PLAYLIST:
-        Placeholder = RiPlayListFill;
-        break;
-      default:
-        Placeholder = RiAlbumFill;
-        break;
+        switch (controls.itemType) {
+            case LibraryItem.ALBUM:
+                Placeholder = RiAlbumFill;
+                break;
+            case LibraryItem.ARTIST:
+                Placeholder = RiUserVoiceFill;
+                break;
+            case LibraryItem.ALBUM_ARTIST:
+                Placeholder = RiUserVoiceFill;
+                break;
+            case LibraryItem.PLAYLIST:
+                Placeholder = RiPlayListFill;
+                break;
+            default:
+                Placeholder = RiAlbumFill;
+                break;
+        }
+
+        return (
+            <PosterCardContainer key={`card-${columnIndex}-${listChildProps.index}`}>
+                <LinkContainer onClick={() => navigate(path)}>
+                    <ImageContainer $isFavorite={data?.userFavorite}>
+                        {data?.imageUrl ? (
+                            <Image
+                                importance="auto"
+                                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
+                                src={data?.imageUrl}
+                            />
+                        ) : (
+                            <Center
+                                sx={{
+                                    background: 'var(--placeholder-bg)',
+                                    borderRadius: 'var(--card-default-radius)',
+                                    height: '100%',
+                                    width: '100%',
+                                }}
+                            >
+                                <Placeholder
+                                    color="var(--placeholder-fg)"
+                                    size={35}
+                                />
+                            </Center>
+                        )}
+                        <GridCardControls
+                            handleFavorite={controls.handleFavorite}
+                            handlePlayQueueAdd={controls.handlePlayQueueAdd}
+                            itemData={data}
+                            itemType={controls.itemType}
+                        />
+                    </ImageContainer>
+                </LinkContainer>
+                <DetailContainer>
+                    <CardRows
+                        data={data}
+                        rows={controls.cardRows}
+                    />
+                </DetailContainer>
+            </PosterCardContainer>
+        );
     }
 
     return (
-      <PosterCardContainer key={`card-${columnIndex}-${listChildProps.index}`}>
-        <LinkContainer onClick={() => navigate(path)}>
-          <ImageContainer $isFavorite={data?.userFavorite}>
-            {data?.imageUrl ? (
-              <Image
-                importance="auto"
-                placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
-                src={data?.imageUrl}
-              />
-            ) : (
-              <Center
-                sx={{
-                  background: 'var(--placeholder-bg)',
-                  borderRadius: 'var(--card-default-radius)',
-                  height: '100%',
-                  width: '100%',
-                }}
-              >
-                <Placeholder
-                  color="var(--placeholder-fg)"
-                  size={35}
-                />
-              </Center>
-            )}
-            <GridCardControls
-              handleFavorite={controls.handleFavorite}
-              handlePlayQueueAdd={controls.handlePlayQueueAdd}
-              itemData={data}
-              itemType={controls.itemType}
-            />
-          </ImageContainer>
-        </LinkContainer>
-        <DetailContainer>
-          <CardRows
-            data={data}
-            rows={controls.cardRows}
-          />
-        </DetailContainer>
-      </PosterCardContainer>
-    );
-  }
-
-  return (
-    <PosterCardContainer
-      key={`card-${columnIndex}-${listChildProps.index}`}
-      $isHidden={isHidden}
-    >
-      <Skeleton
-        visible
-        radius="sm"
-      >
-        <ImageContainer />
-      </Skeleton>
-      <DetailContainer>
-        <Stack spacing="sm">
-          {controls.cardRows.map((row, index) => (
+        <PosterCardContainer
+            key={`card-${columnIndex}-${listChildProps.index}`}
+            $isHidden={isHidden}
+        >
             <Skeleton
-              key={`${index}-${columnIndex}-${row.arrayProperty}`}
-              visible
-              height={14}
-              radius="sm"
-            />
-          ))}
-        </Stack>
-      </DetailContainer>
-    </PosterCardContainer>
-  );
+                visible
+                radius="sm"
+            >
+                <ImageContainer />
+            </Skeleton>
+            <DetailContainer>
+                <Stack spacing="sm">
+                    {controls.cardRows.map((row, index) => (
+                        <Skeleton
+                            key={`${index}-${columnIndex}-${row.arrayProperty}`}
+                            visible
+                            height={14}
+                            radius="sm"
+                        />
+                    ))}
+                </Stack>
+            </DetailContainer>
+        </PosterCardContainer>
+    );
 };

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

@@ -9,119 +9,123 @@ import type { CardRow, ListDisplayType, CardRoute, PlayQueueAddOptions } from '/
 import { Album, AlbumArtist, Artist, LibraryItem } from '/@/renderer/api/types';
 
 const createItemData = memoize(
-  (
-    cardRows,
-    columnCount,
-    display,
-    itemCount,
-    itemData,
-    itemGap,
-    itemHeight,
-    itemType,
-    itemWidth,
-    route,
-    handlePlayQueueAdd,
-    handleFavorite,
-  ) => ({
-    cardRows,
-    columnCount,
-    display,
-    handleFavorite,
-    handlePlayQueueAdd,
-    itemCount,
-    itemData,
-    itemGap,
-    itemHeight,
-    itemType,
-    itemWidth,
-    route,
-  }),
+    (
+        cardRows,
+        columnCount,
+        display,
+        itemCount,
+        itemData,
+        itemGap,
+        itemHeight,
+        itemType,
+        itemWidth,
+        route,
+        handlePlayQueueAdd,
+        handleFavorite,
+    ) => ({
+        cardRows,
+        columnCount,
+        display,
+        handleFavorite,
+        handlePlayQueueAdd,
+        itemCount,
+        itemData,
+        itemGap,
+        itemHeight,
+        itemType,
+        itemWidth,
+        route,
+    }),
 );
 
 const createScrollHandler = memoize((onScroll) => debounce(onScroll, 250));
 
 export const VirtualGridWrapper = ({
-  refInstance,
-  cardRows,
-  itemGap,
-  itemType,
-  itemWidth,
-  display,
-  itemHeight,
-  itemCount,
-  columnCount,
-  rowCount,
-  initialScrollOffset,
-  handleFavorite,
-  handlePlayQueueAdd,
-  itemData,
-  route,
-  onScroll,
-  height,
-  width,
-  ...rest
-}: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children' | 'height' | 'width'> & {
-  cardRows: CardRow<Album | AlbumArtist | Artist>[];
-  columnCount: number;
-  display: ListDisplayType;
-  handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
-  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
-  height?: number;
-  itemData: any[];
-  itemGap: number;
-  itemHeight: number;
-  itemType: LibraryItem;
-  itemWidth: number;
-  refInstance: Ref<any>;
-  route?: CardRoute;
-  rowCount: number;
-  width?: number;
-}) => {
-  const memoizedItemData = createItemData(
+    refInstance,
     cardRows,
-    columnCount,
-    display,
-    itemCount,
-    itemData,
     itemGap,
-    itemHeight,
     itemType,
     itemWidth,
-    route,
-    handlePlayQueueAdd,
+    display,
+    itemHeight,
+    itemCount,
+    columnCount,
+    rowCount,
+    initialScrollOffset,
     handleFavorite,
-  );
+    handlePlayQueueAdd,
+    itemData,
+    route,
+    onScroll,
+    height,
+    width,
+    ...rest
+}: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children' | 'height' | 'width'> & {
+    cardRows: CardRow<Album | AlbumArtist | Artist>[];
+    columnCount: number;
+    display: ListDisplayType;
+    handleFavorite?: (options: {
+        id: string[];
+        isFavorite: boolean;
+        itemType: LibraryItem;
+    }) => void;
+    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
+    height?: number;
+    itemData: any[];
+    itemGap: number;
+    itemHeight: number;
+    itemType: LibraryItem;
+    itemWidth: number;
+    refInstance: Ref<any>;
+    route?: CardRoute;
+    rowCount: number;
+    width?: number;
+}) => {
+    const memoizedItemData = createItemData(
+        cardRows,
+        columnCount,
+        display,
+        itemCount,
+        itemData,
+        itemGap,
+        itemHeight,
+        itemType,
+        itemWidth,
+        route,
+        handlePlayQueueAdd,
+        handleFavorite,
+    );
 
-  const memoizedOnScroll = createScrollHandler(onScroll);
+    const memoizedOnScroll = createScrollHandler(onScroll);
 
-  return (
-    <FixedSizeList
-      ref={refInstance}
-      {...rest}
-      height={(height && Number(height)) || 0}
-      initialScrollOffset={initialScrollOffset}
-      itemCount={rowCount}
-      itemData={memoizedItemData}
-      itemSize={itemHeight}
-      overscanCount={5}
-      width={(width && Number(width)) || 0}
-      onScroll={memoizedOnScroll}
-    >
-      {GridCard}
-    </FixedSizeList>
-  );
+    return (
+        <FixedSizeList
+            ref={refInstance}
+            {...rest}
+            height={(height && Number(height)) || 0}
+            initialScrollOffset={initialScrollOffset}
+            itemCount={rowCount}
+            itemData={memoizedItemData}
+            itemSize={itemHeight}
+            overscanCount={5}
+            width={(width && Number(width)) || 0}
+            onScroll={memoizedOnScroll}
+        >
+            {GridCard}
+        </FixedSizeList>
+    );
 };
 
 VirtualGridWrapper.defaultProps = {
-  route: undefined,
+    route: undefined,
 };
 
 export const VirtualGridContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 `;
 
 export const VirtualGridAutoSizerContainer = styled.div`
-  flex: 1;
+    flex: 1;
 `;

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

@@ -1,11 +1,11 @@
 import {
-  useState,
-  useRef,
-  useMemo,
-  useCallback,
-  forwardRef,
-  Ref,
-  useImperativeHandle,
+    useState,
+    useRef,
+    useMemo,
+    useCallback,
+    forwardRef,
+    Ref,
+    useImperativeHandle,
 } from 'react';
 import debounce from 'lodash/debounce';
 import type { FixedSizeListProps } from 'react-window';
@@ -16,167 +16,171 @@ import { ListDisplayType } from '/@/renderer/types';
 import { LibraryItem } from '/@/renderer/api/types';
 
 export type VirtualInfiniteGridRef = {
-  resetLoadMoreItemsCache: () => void;
-  scrollTo: (index: number) => void;
-  setItemData: (data: any[]) => void;
+    resetLoadMoreItemsCache: () => void;
+    scrollTo: (index: number) => void;
+    setItemData: (data: any[]) => void;
 };
 
 interface VirtualGridProps
-  extends Omit<FixedSizeListProps, 'children' | 'itemSize' | 'height' | 'width'> {
-  cardRows: CardRow<any>[];
-  display?: ListDisplayType;
-  fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
-  handleFavorite?: (options: { id: string[]; isFavorite: boolean; itemType: LibraryItem }) => void;
-  handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
-  height?: number;
-  itemGap: number;
-  itemSize: number;
-  itemType: LibraryItem;
-  loading?: boolean;
-  minimumBatchSize?: number;
-  route?: CardRoute;
-  width?: number;
+    extends Omit<FixedSizeListProps, 'children' | 'itemSize' | 'height' | 'width'> {
+    cardRows: CardRow<any>[];
+    display?: ListDisplayType;
+    fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
+    handleFavorite?: (options: {
+        id: string[];
+        isFavorite: boolean;
+        itemType: LibraryItem;
+    }) => void;
+    handlePlayQueueAdd?: (options: PlayQueueAddOptions) => void;
+    height?: number;
+    itemGap: number;
+    itemSize: number;
+    itemType: LibraryItem;
+    loading?: boolean;
+    minimumBatchSize?: number;
+    route?: CardRoute;
+    width?: number;
 }
 
 export const VirtualInfiniteGrid = forwardRef(
-  (
-    {
-      itemCount,
-      itemGap,
-      itemSize,
-      itemType,
-      cardRows,
-      route,
-      onScroll,
-      display,
-      handlePlayQueueAdd,
-      minimumBatchSize,
-      fetchFn,
-      loading,
-      initialScrollOffset,
-      handleFavorite,
-      height,
-      width,
-    }: VirtualGridProps,
-    ref: Ref<VirtualInfiniteGridRef>,
-  ) => {
-    const listRef = useRef<any>(null);
-    const loader = useRef<InfiniteLoader>(null);
+    (
+        {
+            itemCount,
+            itemGap,
+            itemSize,
+            itemType,
+            cardRows,
+            route,
+            onScroll,
+            display,
+            handlePlayQueueAdd,
+            minimumBatchSize,
+            fetchFn,
+            loading,
+            initialScrollOffset,
+            handleFavorite,
+            height,
+            width,
+        }: VirtualGridProps,
+        ref: Ref<VirtualInfiniteGridRef>,
+    ) => {
+        const listRef = useRef<any>(null);
+        const loader = useRef<InfiniteLoader>(null);
 
-    const [itemData, setItemData] = useState<any[]>([]);
+        const [itemData, setItemData] = useState<any[]>([]);
 
-    const { itemHeight, rowCount, columnCount } = useMemo(() => {
-      const itemsPerRow = itemSize;
-      const widthPerItem = Number(width) / itemsPerRow;
-      const itemHeight = widthPerItem + cardRows.length * 26;
+        const { itemHeight, rowCount, columnCount } = useMemo(() => {
+            const itemsPerRow = itemSize;
+            const widthPerItem = Number(width) / itemsPerRow;
+            const itemHeight = widthPerItem + cardRows.length * 26;
 
-      return {
-        columnCount: itemsPerRow,
-        itemHeight,
-        rowCount: Math.ceil(itemCount / itemsPerRow),
-      };
-    }, [cardRows.length, itemCount, itemSize, width]);
+            return {
+                columnCount: itemsPerRow,
+                itemHeight,
+                rowCount: Math.ceil(itemCount / itemsPerRow),
+            };
+        }, [cardRows.length, itemCount, itemSize, width]);
 
-    const isItemLoaded = useCallback(
-      (index: number) => {
-        const itemIndex = index * columnCount;
+        const isItemLoaded = useCallback(
+            (index: number) => {
+                const itemIndex = index * columnCount;
 
-        return itemData[itemIndex] !== undefined;
-      },
-      [columnCount, itemData],
-    );
+                return itemData[itemIndex] !== undefined;
+            },
+            [columnCount, itemData],
+        );
 
-    const loadMoreItems = useCallback(
-      async (startIndex: number, stopIndex: number) => {
-        // Fixes a caching bug(?) when switching between filters and the itemCount increases
-        if (startIndex === 1) return;
+        const loadMoreItems = useCallback(
+            async (startIndex: number, stopIndex: number) => {
+                // Fixes a caching bug(?) when switching between filters and the itemCount increases
+                if (startIndex === 1) return;
 
-        // Need to multiply by columnCount due to the grid layout
-        const start = startIndex * columnCount;
-        const end = stopIndex * columnCount + columnCount;
+                // Need to multiply by columnCount due to the grid layout
+                const start = startIndex * columnCount;
+                const end = stopIndex * columnCount + columnCount;
 
-        const data = await fetchFn({
-          columnCount,
-          skip: start,
-          take: end - start,
-        });
+                const data = await fetchFn({
+                    columnCount,
+                    skip: start,
+                    take: end - start,
+                });
 
-        const newData: any[] = [...itemData];
+                const newData: any[] = [...itemData];
 
-        let itemIndex = 0;
-        for (let rowIndex = start; rowIndex < end; rowIndex += 1) {
-          newData[rowIndex] = data.items[itemIndex];
-          itemIndex += 1;
-        }
+                let itemIndex = 0;
+                for (let rowIndex = start; rowIndex < end; rowIndex += 1) {
+                    newData[rowIndex] = data.items[itemIndex];
+                    itemIndex += 1;
+                }
 
-        setItemData(newData);
-      },
-      [columnCount, fetchFn, itemData, setItemData],
-    );
+                setItemData(newData);
+            },
+            [columnCount, fetchFn, itemData, setItemData],
+        );
 
-    const debouncedLoadMoreItems = debounce(loadMoreItems, 500);
+        const debouncedLoadMoreItems = debounce(loadMoreItems, 500);
 
-    useImperativeHandle(ref, () => ({
-      resetLoadMoreItemsCache: () => {
-        if (loader.current) {
-          loader.current.resetloadMoreItemsCache(false);
-          setItemData([]);
-        }
-      },
-      scrollTo: (index: number) => {
-        listRef?.current?.scrollToItem(index);
-      },
-      setItemData: (data: any[]) => {
-        setItemData(data);
-      },
-    }));
+        useImperativeHandle(ref, () => ({
+            resetLoadMoreItemsCache: () => {
+                if (loader.current) {
+                    loader.current.resetloadMoreItemsCache(false);
+                    setItemData([]);
+                }
+            },
+            scrollTo: (index: number) => {
+                listRef?.current?.scrollToItem(index);
+            },
+            setItemData: (data: any[]) => {
+                setItemData(data);
+            },
+        }));
 
-    if (loading) return null;
+        if (loading) return null;
 
-    return (
-      <>
-        <InfiniteLoader
-          ref={loader}
-          isItemLoaded={(index) => isItemLoaded(index)}
-          itemCount={itemCount || 0}
-          loadMoreItems={debouncedLoadMoreItems}
-          minimumBatchSize={minimumBatchSize}
-          threshold={30}
-        >
-          {({ onItemsRendered, ref: infiniteLoaderRef }) => (
-            <VirtualGridWrapper
-              cardRows={cardRows}
-              columnCount={columnCount}
-              display={display || ListDisplayType.CARD}
-              handleFavorite={handleFavorite}
-              handlePlayQueueAdd={handlePlayQueueAdd}
-              height={height}
-              initialScrollOffset={initialScrollOffset}
-              itemCount={itemCount || 0}
-              itemData={itemData}
-              itemGap={itemGap}
-              itemHeight={itemHeight}
-              itemType={itemType}
-              itemWidth={itemSize}
-              refInstance={(list) => {
-                infiniteLoaderRef(list);
-                listRef.current = list;
-              }}
-              route={route}
-              rowCount={rowCount}
-              width={width}
-              onItemsRendered={onItemsRendered}
-              onScroll={onScroll}
-            />
-          )}
-        </InfiniteLoader>
-      </>
-    );
-  },
+        return (
+            <>
+                <InfiniteLoader
+                    ref={loader}
+                    isItemLoaded={(index) => isItemLoaded(index)}
+                    itemCount={itemCount || 0}
+                    loadMoreItems={debouncedLoadMoreItems}
+                    minimumBatchSize={minimumBatchSize}
+                    threshold={30}
+                >
+                    {({ onItemsRendered, ref: infiniteLoaderRef }) => (
+                        <VirtualGridWrapper
+                            cardRows={cardRows}
+                            columnCount={columnCount}
+                            display={display || ListDisplayType.CARD}
+                            handleFavorite={handleFavorite}
+                            handlePlayQueueAdd={handlePlayQueueAdd}
+                            height={height}
+                            initialScrollOffset={initialScrollOffset}
+                            itemCount={itemCount || 0}
+                            itemData={itemData}
+                            itemGap={itemGap}
+                            itemHeight={itemHeight}
+                            itemType={itemType}
+                            itemWidth={itemSize}
+                            refInstance={(list) => {
+                                infiniteLoaderRef(list);
+                                listRef.current = list;
+                            }}
+                            route={route}
+                            rowCount={rowCount}
+                            width={width}
+                            onItemsRendered={onItemsRendered}
+                            onScroll={onScroll}
+                        />
+                    )}
+                </InfiniteLoader>
+            </>
+        );
+    },
 );
 
 VirtualInfiniteGrid.defaultProps = {
-  display: ListDisplayType.CARD,
-  minimumBatchSize: 20,
-  route: undefined,
+    display: ListDisplayType.CARD,
+    minimumBatchSize: 20,
+    route: undefined,
 };

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

@@ -9,60 +9,60 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { Skeleton } from '/@/renderer/components/skeleton';
 
 export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
-  if (value === undefined) {
-    return (
-      <CellContainer position="left">
-        <Skeleton
-          height="1rem"
-          width="80%"
-        />
-      </CellContainer>
-    );
-  }
+    if (value === undefined) {
+        return (
+            <CellContainer position="left">
+                <Skeleton
+                    height="1rem"
+                    width="80%"
+                />
+            </CellContainer>
+        );
+    }
 
-  return (
-    <CellContainer position="left">
-      <Text
-        $secondary
-        overflow="hidden"
-        size="md"
-      >
-        {value?.map((item: Artist | AlbumArtist, index: number) => (
-          <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-            {index > 0 && (
-              <Text
-                $secondary
-                size="md"
-                style={{ display: 'inline-block' }}
-              >
-                ,
-              </Text>
-            )}{' '}
-            {item.id ? (
-              <Text
-                $link
-                $secondary
-                component={Link}
-                overflow="hidden"
-                size="md"
-                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                  albumArtistId: item.id,
-                })}
-              >
-                {item.name || '—'}
-              </Text>
-            ) : (
-              <Text
+    return (
+        <CellContainer position="left">
+            <Text
                 $secondary
                 overflow="hidden"
                 size="md"
-              >
-                {item.name || '—'}
-              </Text>
-            )}
-          </React.Fragment>
-        ))}
-      </Text>
-    </CellContainer>
-  );
+            >
+                {value?.map((item: Artist | AlbumArtist, index: number) => (
+                    <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
+                        {index > 0 && (
+                            <Text
+                                $secondary
+                                size="md"
+                                style={{ display: 'inline-block' }}
+                            >
+                                ,
+                            </Text>
+                        )}{' '}
+                        {item.id ? (
+                            <Text
+                                $link
+                                $secondary
+                                component={Link}
+                                overflow="hidden"
+                                size="md"
+                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                    albumArtistId: item.id,
+                                })}
+                            >
+                                {item.name || '—'}
+                            </Text>
+                        ) : (
+                            <Text
+                                $secondary
+                                overflow="hidden"
+                                size="md"
+                            >
+                                {item.name || '—'}
+                            </Text>
+                        )}
+                    </React.Fragment>
+                ))}
+            </Text>
+        </CellContainer>
+    );
 };

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

@@ -9,60 +9,60 @@ import { AppRoute } from '/@/renderer/router/routes';
 import { Skeleton } from '/@/renderer/components/skeleton';
 
 export const ArtistCell = ({ value, data }: ICellRendererParams) => {
-  if (value === undefined) {
-    return (
-      <CellContainer position="left">
-        <Skeleton
-          height="1rem"
-          width="80%"
-        />
-      </CellContainer>
-    );
-  }
+    if (value === undefined) {
+        return (
+            <CellContainer position="left">
+                <Skeleton
+                    height="1rem"
+                    width="80%"
+                />
+            </CellContainer>
+        );
+    }
 
-  return (
-    <CellContainer position="left">
-      <Text
-        $secondary
-        overflow="hidden"
-        size="md"
-      >
-        {value?.map((item: Artist | AlbumArtist, index: number) => (
-          <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-            {index > 0 && (
-              <Text
-                $secondary
-                size="md"
-                style={{ display: 'inline-block' }}
-              >
-                ,
-              </Text>
-            )}{' '}
-            {item.id ? (
-              <Text
-                $link
-                $secondary
-                component={Link}
-                overflow="hidden"
-                size="md"
-                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                  albumArtistId: item.id,
-                })}
-              >
-                {item.name || '—'}
-              </Text>
-            ) : (
-              <Text
+    return (
+        <CellContainer position="left">
+            <Text
                 $secondary
                 overflow="hidden"
                 size="md"
-              >
-                {item.name || '—'}
-              </Text>
-            )}
-          </React.Fragment>
-        ))}
-      </Text>
-    </CellContainer>
-  );
+            >
+                {value?.map((item: Artist | AlbumArtist, index: number) => (
+                    <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
+                        {index > 0 && (
+                            <Text
+                                $secondary
+                                size="md"
+                                style={{ display: 'inline-block' }}
+                            >
+                                ,
+                            </Text>
+                        )}{' '}
+                        {item.id ? (
+                            <Text
+                                $link
+                                $secondary
+                                component={Link}
+                                overflow="hidden"
+                                size="md"
+                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                    albumArtistId: item.id,
+                                })}
+                            >
+                                {item.name || '—'}
+                            </Text>
+                        ) : (
+                            <Text
+                                $secondary
+                                overflow="hidden"
+                                size="md"
+                            >
+                                {item.name || '—'}
+                            </Text>
+                        )}
+                    </React.Fragment>
+                ))}
+            </Text>
+        </CellContainer>
+    );
 };

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

@@ -13,140 +13,140 @@ import { ServerType } from '/@/renderer/types';
 import { Skeleton } from '/@/renderer/components/skeleton';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-template-areas: 'image info';
-  grid-template-rows: 1fr;
-  grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
-  gap: 0.5rem;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  letter-spacing: 0.5px;
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-areas: 'image info';
+    grid-template-rows: 1fr;
+    grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    letter-spacing: 0.5px;
 `;
 
 const ImageWrapper = styled.div`
-  display: flex;
-  grid-area: image;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
+    display: flex;
+    grid-area: image;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 `;
 
 const MetadataWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  grid-area: info;
-  justify-content: center;
-  width: 100%;
+    display: flex;
+    flex-direction: column;
+    grid-area: info;
+    justify-content: center;
+    width: 100%;
 `;
 
 const StyledImage = styled.img`
-  object-fit: cover;
+    object-fit: cover;
 `;
 
 export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
-  const artists = useMemo(() => {
-    if (!value) return null;
-    return value?.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
-  }, [value]);
+    const artists = useMemo(() => {
+        if (!value) return null;
+        return value?.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
+    }, [value]);
+
+    if (value === undefined) {
+        return (
+            <CellContainer height={node.rowHeight || 40}>
+                <Skeleton>
+                    <ImageWrapper />
+                </Skeleton>
+                <MetadataWrapper>
+                    <Skeleton
+                        height="1rem"
+                        width="80%"
+                    />
+                    <Skeleton
+                        height="1rem"
+                        mt="0.5rem"
+                        width="60%"
+                    />
+                </MetadataWrapper>
+            </CellContainer>
+        );
+    }
 
-  if (value === undefined) {
     return (
-      <CellContainer height={node.rowHeight || 40}>
-        <Skeleton>
-          <ImageWrapper />
-        </Skeleton>
-        <MetadataWrapper>
-          <Skeleton
-            height="1rem"
-            width="80%"
-          />
-          <Skeleton
-            height="1rem"
-            mt="0.5rem"
-            width="60%"
-          />
-        </MetadataWrapper>
-      </CellContainer>
-    );
-  }
-
-  return (
-    <CellContainer height={node.rowHeight || 40}>
-      <ImageWrapper>
-        {value.imageUrl ? (
-          <StyledImage
-            alt="cover"
-            height={(node.rowHeight || 40) - 10}
-            placeholder={value.imagePlaceholderUrl || 'var(--placeholder-bg)'}
-            src={value.imageUrl}
-            style={{}}
-            width={(node.rowHeight || 40) - 10}
-          />
-        ) : (
-          <Center
-            sx={{
-              background: 'var(--placeholder-bg)',
-              borderRadius: 'var(--card-default-radius)',
-              height: `${(node.rowHeight || 40) - 10}px`,
-              width: `${(node.rowHeight || 40) - 10}px`,
-            }}
-          >
-            <RiAlbumFill
-              color="var(--placeholder-fg)"
-              size={35}
-            />
-          </Center>
-        )}
-      </ImageWrapper>
-      <MetadataWrapper>
-        <Text
-          overflow="hidden"
-          size="md"
-        >
-          {value.name}
-        </Text>
-        <Text
-          $secondary
-          overflow="hidden"
-          size="md"
-        >
-          {artists?.length ? (
-            artists.map((artist: Artist | AlbumArtist, index: number) => (
-              <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
-                {index > 0 ? ', ' : null}
-                {artist.id ? (
-                  <Text
-                    $link
-                    $secondary
-                    component={Link}
-                    overflow="hidden"
-                    size="md"
-                    sx={{ width: 'fit-content' }}
-                    to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                      albumArtistId: artist.id,
-                    })}
-                  >
-                    {artist.name}
-                  </Text>
+        <CellContainer height={node.rowHeight || 40}>
+            <ImageWrapper>
+                {value.imageUrl ? (
+                    <StyledImage
+                        alt="cover"
+                        height={(node.rowHeight || 40) - 10}
+                        placeholder={value.imagePlaceholderUrl || 'var(--placeholder-bg)'}
+                        src={value.imageUrl}
+                        style={{}}
+                        width={(node.rowHeight || 40) - 10}
+                    />
                 ) : (
-                  <Text
+                    <Center
+                        sx={{
+                            background: 'var(--placeholder-bg)',
+                            borderRadius: 'var(--card-default-radius)',
+                            height: `${(node.rowHeight || 40) - 10}px`,
+                            width: `${(node.rowHeight || 40) - 10}px`,
+                        }}
+                    >
+                        <RiAlbumFill
+                            color="var(--placeholder-fg)"
+                            size={35}
+                        />
+                    </Center>
+                )}
+            </ImageWrapper>
+            <MetadataWrapper>
+                <Text
+                    overflow="hidden"
+                    size="md"
+                >
+                    {value.name}
+                </Text>
+                <Text
                     $secondary
                     overflow="hidden"
                     size="md"
-                    sx={{ width: 'fit-content' }}
-                  >
-                    {artist.name}
-                  </Text>
-                )}
-              </React.Fragment>
-            ))
-          ) : (
-            <Text $secondary>—</Text>
-          )}
-        </Text>
-      </MetadataWrapper>
-    </CellContainer>
-  );
+                >
+                    {artists?.length ? (
+                        artists.map((artist: Artist | AlbumArtist, index: number) => (
+                            <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
+                                {index > 0 ? ', ' : null}
+                                {artist.id ? (
+                                    <Text
+                                        $link
+                                        $secondary
+                                        component={Link}
+                                        overflow="hidden"
+                                        size="md"
+                                        sx={{ width: 'fit-content' }}
+                                        to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                                            albumArtistId: artist.id,
+                                        })}
+                                    >
+                                        {artist.name}
+                                    </Text>
+                                ) : (
+                                    <Text
+                                        $secondary
+                                        overflow="hidden"
+                                        size="md"
+                                        sx={{ width: 'fit-content' }}
+                                    >
+                                        {artist.name}
+                                    </Text>
+                                )}
+                            </React.Fragment>
+                        ))
+                    ) : (
+                        <Text $secondary>—</Text>
+                    )}
+                </Text>
+            </MetadataWrapper>
+        </CellContainer>
+    );
 };

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

@@ -6,61 +6,61 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
 import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 
 export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
-  const createMutation = useCreateFavorite({});
-  const deleteMutation = useDeleteFavorite({});
+    const createMutation = useCreateFavorite({});
+    const deleteMutation = useDeleteFavorite({});
 
-  const handleToggleFavorite = () => {
-    const newFavoriteValue = !value;
+    const handleToggleFavorite = () => {
+        const newFavoriteValue = !value;
 
-    if (newFavoriteValue) {
-      createMutation.mutate(
-        {
-          query: {
-            id: [data.id],
-            type: data.itemType,
-          },
-          serverId: data.serverId,
-        },
-        {
-          onSuccess: () => {
-            node.setData({ ...data, userFavorite: newFavoriteValue });
-          },
-        },
-      );
-    } else {
-      deleteMutation.mutate(
-        {
-          query: {
-            id: [data.id],
-            type: data.itemType,
-          },
-          serverId: data.serverId,
-        },
-        {
-          onSuccess: () => {
-            node.setData({ ...data, userFavorite: newFavoriteValue });
-          },
-        },
-      );
-    }
-  };
+        if (newFavoriteValue) {
+            createMutation.mutate(
+                {
+                    query: {
+                        id: [data.id],
+                        type: data.itemType,
+                    },
+                    serverId: data.serverId,
+                },
+                {
+                    onSuccess: () => {
+                        node.setData({ ...data, userFavorite: newFavoriteValue });
+                    },
+                },
+            );
+        } else {
+            deleteMutation.mutate(
+                {
+                    query: {
+                        id: [data.id],
+                        type: data.itemType,
+                    },
+                    serverId: data.serverId,
+                },
+                {
+                    onSuccess: () => {
+                        node.setData({ ...data, userFavorite: newFavoriteValue });
+                    },
+                },
+            );
+        }
+    };
 
-  return (
-    <CellContainer position="center">
-      <Button
-        compact
-        sx={{
-          svg: {
-            fill: !value
-              ? 'var(--main-fg-secondary) !important'
-              : 'var(--primary-color) !important',
-          },
-        }}
-        variant="subtle"
-        onClick={handleToggleFavorite}
-      >
-        {!value ? <RiHeartLine size="1.3em" /> : <RiHeartFill size="1.3em" />}
-      </Button>
-    </CellContainer>
-  );
+    return (
+        <CellContainer position="center">
+            <Button
+                compact
+                sx={{
+                    svg: {
+                        fill: !value
+                            ? 'var(--main-fg-secondary) !important'
+                            : 'var(--primary-color) !important',
+                    },
+                }}
+                variant="subtle"
+                onClick={handleToggleFavorite}
+            >
+                {!value ? <RiHeartLine size="1.3em" /> : <RiHeartFill size="1.3em" />}
+            </Button>
+        </CellContainer>
+    );
 };

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

@@ -8,38 +8,38 @@ import { Paper } from '/@/renderer/components/paper';
 import { getNodesByDiscNumber, setNodeSelection } from '../utils';
 
 const Container = styled(Paper)`
-  padding: 0.5rem 1rem;
-  border: 1px solid transparent;
+    padding: 0.5rem 1rem;
+    border: 1px solid transparent;
 `;
 
 export const FullWidthDiscCell = ({ node, data, api }: ICellRendererParams) => {
-  const [isSelected, setIsSelected] = useState(false);
+    const [isSelected, setIsSelected] = useState(false);
 
-  const handleToggleDiscNodes = () => {
-    if (!data) return;
-    const discNumber = Number(node.data.id.split('-')[1]);
-    const nodes = getNodesByDiscNumber({ api, discNumber });
+    const handleToggleDiscNodes = () => {
+        if (!data) return;
+        const discNumber = Number(node.data.id.split('-')[1]);
+        const nodes = getNodesByDiscNumber({ api, discNumber });
 
-    setNodeSelection({ isSelected: !isSelected, nodes });
-    setIsSelected((prev) => !prev);
-  };
+        setNodeSelection({ isSelected: !isSelected, nodes });
+        setIsSelected((prev) => !prev);
+    };
 
-  return (
-    <Container>
-      <Group
-        position="apart"
-        w="100%"
-      >
-        <Button
-          compact
-          leftIcon={isSelected ? <RiCheckboxLine /> : <RiCheckboxBlankLine />}
-          size="md"
-          variant="subtle"
-          onClick={handleToggleDiscNodes}
-        >
-          {data.name}
-        </Button>
-      </Group>
-    </Container>
-  );
+    return (
+        <Container>
+            <Group
+                position="apart"
+                w="100%"
+            >
+                <Button
+                    compact
+                    leftIcon={isSelected ? <RiCheckboxLine /> : <RiCheckboxBlankLine />}
+                    size="md"
+                    variant="subtle"
+                    onClick={handleToggleDiscNodes}
+                >
+                    {data.name}
+                </Button>
+            </Group>
+        </Container>
+    );
 };

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

@@ -6,79 +6,79 @@ import { Skeleton } from '/@/renderer/components/skeleton';
 import { Text } from '/@/renderer/components/text';
 
 export const CELL_VARIANTS: Variants = {
-  animate: {
-    opacity: 1,
-  },
-  initial: {
-    opacity: 0,
-  },
+    animate: {
+        opacity: 1,
+    },
+    initial: {
+        opacity: 0,
+    },
 };
 
 export const CellContainer = styled(motion.div)<{ position?: 'left' | 'center' | 'right' }>`
-  display: flex;
-  align-items: center;
-  justify-content: ${(props) =>
-    props.position === 'right'
-      ? 'flex-end'
-      : props.position === 'center'
-      ? 'center'
-      : 'flex-start'};
-  width: 100%;
-  height: 100%;
-  letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+    justify-content: ${(props) =>
+        props.position === 'right'
+            ? 'flex-end'
+            : props.position === 'center'
+            ? 'center'
+            : 'flex-start'};
+    width: 100%;
+    height: 100%;
+    letter-spacing: 0.5px;
 `;
 
 type Options = {
-  array?: boolean;
-  isArray?: boolean;
-  isLink?: boolean;
-  position?: 'left' | 'center' | 'right';
-  primary?: boolean;
+    array?: boolean;
+    isArray?: boolean;
+    isLink?: boolean;
+    position?: 'left' | 'center' | 'right';
+    primary?: boolean;
 };
 
 export const GenericCell = (
-  { value, valueFormatted }: ICellRendererParams,
-  { position, primary, isLink }: Options,
+    { value, valueFormatted }: ICellRendererParams,
+    { position, primary, isLink }: Options,
 ) => {
-  const displayedValue = valueFormatted || value;
+    const displayedValue = valueFormatted || value;
+
+    if (value === undefined) {
+        return (
+            <CellContainer position={position || 'left'}>
+                <Skeleton
+                    height="1rem"
+                    width="80%"
+                />
+            </CellContainer>
+        );
+    }
 
-  if (value === undefined) {
     return (
-      <CellContainer position={position || 'left'}>
-        <Skeleton
-          height="1rem"
-          width="80%"
-        />
-      </CellContainer>
+        <CellContainer position={position || 'left'}>
+            {isLink ? (
+                <Text
+                    $link={isLink}
+                    $secondary={!primary}
+                    component={Link}
+                    overflow="hidden"
+                    size="md"
+                    to={displayedValue.link}
+                >
+                    {isLink ? displayedValue.value : displayedValue}
+                </Text>
+            ) : (
+                <Text
+                    $secondary={!primary}
+                    overflow="hidden"
+                    size="md"
+                >
+                    {displayedValue}
+                </Text>
+            )}
+        </CellContainer>
     );
-  }
-
-  return (
-    <CellContainer position={position || 'left'}>
-      {isLink ? (
-        <Text
-          $link={isLink}
-          $secondary={!primary}
-          component={Link}
-          overflow="hidden"
-          size="md"
-          to={displayedValue.link}
-        >
-          {isLink ? displayedValue.value : displayedValue}
-        </Text>
-      ) : (
-        <Text
-          $secondary={!primary}
-          overflow="hidden"
-          size="md"
-        >
-          {displayedValue}
-        </Text>
-      )}
-    </CellContainer>
-  );
 };
 
 GenericCell.defaultProps = {
-  position: undefined,
+    position: undefined,
 };

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

@@ -6,37 +6,37 @@ import { Text } from '/@/renderer/components/text';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 
 export const GenreCell = ({ value, data }: ICellRendererParams) => {
-  return (
-    <CellContainer position="left">
-      <Text
-        $secondary
-        overflow="hidden"
-        size="md"
-      >
-        {value?.map((item: Artist | AlbumArtist, index: number) => (
-          <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
-            {index > 0 && (
-              <Text
-                $secondary
-                size="md"
-                style={{ display: 'inline-block' }}
-              >
-                ,
-              </Text>
-            )}{' '}
+    return (
+        <CellContainer position="left">
             <Text
-              $link
-              $secondary
-              component={Link}
-              overflow="hidden"
-              size="md"
-              to="/"
+                $secondary
+                overflow="hidden"
+                size="md"
             >
-              {item.name || '—'}
+                {value?.map((item: Artist | AlbumArtist, index: number) => (
+                    <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
+                        {index > 0 && (
+                            <Text
+                                $secondary
+                                size="md"
+                                style={{ display: 'inline-block' }}
+                            >
+                                ,
+                            </Text>
+                        )}{' '}
+                        <Text
+                            $link
+                            $secondary
+                            component={Link}
+                            overflow="hidden"
+                            size="md"
+                            to="/"
+                        >
+                            {item.name || '—'}
+                        </Text>
+                    </React.Fragment>
+                ))}
             </Text>
-          </React.Fragment>
-        ))}
-      </Text>
-    </CellContainer>
-  );
+        </CellContainer>
+    );
 };

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

@@ -6,54 +6,54 @@ import { CellContainer } from '/@/renderer/components/virtual-table/cells/generi
 import { useSetRating } from '/@/renderer/features/shared';
 
 export const RatingCell = ({ value, node }: ICellRendererParams) => {
-  const updateRatingMutation = useSetRating({});
+    const updateRatingMutation = useSetRating({});
 
-  const handleUpdateRating = (rating: number) => {
-    if (!value) return;
+    const handleUpdateRating = (rating: number) => {
+        if (!value) return;
 
-    updateRatingMutation.mutate(
-      {
-        query: {
-          item: [value],
-          rating,
-        },
-        serverId: value?.serverId,
-      },
-      {
-        onSuccess: () => {
-          node.setData({ ...node.data, userRating: rating });
-        },
-      },
+        updateRatingMutation.mutate(
+            {
+                query: {
+                    item: [value],
+                    rating,
+                },
+                serverId: value?.serverId,
+            },
+            {
+                onSuccess: () => {
+                    node.setData({ ...node.data, userRating: rating });
+                },
+            },
+        );
+    };
+
+    const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        updateRatingMutation.mutate(
+            {
+                query: {
+                    item: [value],
+                    rating: 0,
+                },
+                serverId: value?.serverId,
+            },
+            {
+                onSuccess: () => {
+                    node.setData({ ...node.data, userRating: 0 });
+                },
+            },
+        );
+    };
+
+    return (
+        <CellContainer position="center">
+            <Rating
+                size="xs"
+                value={value?.userRating}
+                onChange={handleUpdateRating}
+                onClick={handleClearRating}
+            />
+        </CellContainer>
     );
-  };
-
-  const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    updateRatingMutation.mutate(
-      {
-        query: {
-          item: [value],
-          rating: 0,
-        },
-        serverId: value?.serverId,
-      },
-      {
-        onSuccess: () => {
-          node.setData({ ...node.data, userRating: 0 });
-        },
-      },
-    );
-  };
-
-  return (
-    <CellContainer position="center">
-      <Rating
-        size="xs"
-        value={value?.userRating}
-        onChange={handleUpdateRating}
-        onClick={handleClearRating}
-      />
-    </CellContainer>
-  );
 };

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

@@ -2,9 +2,9 @@ import type { IHeaderParams } from '@ag-grid-community/core';
 import { FiClock } from 'react-icons/fi';
 
 export interface ICustomHeaderParams extends IHeaderParams {
-  menuIcon: string;
+    menuIcon: string;
 }
 
 export const DurationHeader = () => {
-  return <FiClock size={15} />;
+    return <FiClock size={15} />;
 };

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

@@ -9,84 +9,84 @@ import { _Text } from '/@/renderer/components/text';
 type Presets = 'duration' | 'rowIndex' | 'userFavorite' | 'userRating';
 
 type Options = {
-  children?: ReactNode;
-  position?: 'left' | 'center' | 'right';
-  preset?: Presets;
+    children?: ReactNode;
+    position?: 'left' | 'center' | 'right';
+    preset?: Presets;
 };
 
 const HeaderWrapper = styled.div<{ position: Options['position'] }>`
-  display: flex;
-  justify-content: ${(props) =>
-    props.position === 'right'
-      ? 'flex-end'
-      : props.position === 'center'
-      ? 'center'
-      : 'flex-start'};
-  width: 100%;
-  font-family: var(--content-font-family);
-  text-transform: uppercase;
+    display: flex;
+    justify-content: ${(props) =>
+        props.position === 'right'
+            ? 'flex-end'
+            : props.position === 'center'
+            ? 'center'
+            : 'flex-start'};
+    width: 100%;
+    font-family: var(--content-font-family);
+    text-transform: uppercase;
 `;
 
 const TextHeaderWrapper = styled(_Text)<{ position: Options['position'] }>`
-  width: 100%;
-  color: var(--ag-header-foreground-color);
-  font-weight: 500;
-  text-align: ${(props) =>
-    props.position === 'right'
-      ? 'flex-end'
-      : props.position === 'center'
-      ? 'center'
-      : 'flex-start'};
-  text-transform: uppercase;
+    width: 100%;
+    color: var(--ag-header-foreground-color);
+    font-weight: 500;
+    text-align: ${(props) =>
+        props.position === 'right'
+            ? 'flex-end'
+            : props.position === 'center'
+            ? 'center'
+            : 'flex-start'};
+    text-transform: uppercase;
 `;
 
 const headerPresets = {
-  duration: (
-    <FiClock
-      color="var(--ag-header-foreground-color)"
-      size="1em"
-    />
-  ),
-  rowIndex: (
-    <AiOutlineNumber
-      color="var(--ag-header-foreground-color)"
-      size="1em"
-    />
-  ),
-  userFavorite: (
-    <RiHeartLine
-      color="var(--ag-header-foreground-color)"
-      size="1em"
-    />
-  ),
-  userRating: (
-    <RiStarLine
-      color="var(--ag-header-foreground-color)"
-      size="1em"
-    />
-  ),
+    duration: (
+        <FiClock
+            color="var(--ag-header-foreground-color)"
+            size="1em"
+        />
+    ),
+    rowIndex: (
+        <AiOutlineNumber
+            color="var(--ag-header-foreground-color)"
+            size="1em"
+        />
+    ),
+    userFavorite: (
+        <RiHeartLine
+            color="var(--ag-header-foreground-color)"
+            size="1em"
+        />
+    ),
+    userRating: (
+        <RiStarLine
+            color="var(--ag-header-foreground-color)"
+            size="1em"
+        />
+    ),
 };
 
 export const GenericTableHeader = (
-  { displayName }: IHeaderParams,
-  { preset, children, position }: Options,
+    { displayName }: IHeaderParams,
+    { preset, children, position }: Options,
 ) => {
-  if (preset) {
-    return <HeaderWrapper position={position}>{headerPresets[preset]}</HeaderWrapper>;
-  }
+    if (preset) {
+        return <HeaderWrapper position={position}>{headerPresets[preset]}</HeaderWrapper>;
+    }
 
-  return (
-    <TextHeaderWrapper
-      overflow="hidden"
-      position={position}
-      weight={500}
-    >
-      {children || displayName}
-    </TextHeaderWrapper>
-  );
+    return (
+        <TextHeaderWrapper
+            overflow="hidden"
+            position={position}
+            weight={500}
+        >
+            {children || displayName}
+        </TextHeaderWrapper>
+    );
 };
 
 GenericTableHeader.defaultProps = {
-  position: 'left',
-  preset: undefined,
+    position: 'left',
+    preset: undefined,
 };

src/renderer/components/virtual-table/hooks/use-click-outside-deselect.tsx

@@ -3,13 +3,13 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
 import { useClickOutside } from '@mantine/hooks';
 
 export const useClickOutsideDeselect = (tableRef: MutableRefObject<AgGridReactType | null>) => {
-  const handleDeselect = () => {
-    if (tableRef.current) {
-      tableRef.current.api.deselectAll();
-    }
-  };
+    const handleDeselect = () => {
+        if (tableRef.current) {
+            tableRef.current.api.deselectAll();
+        }
+    };
 
-  const ref = useClickOutside(handleDeselect);
+    const ref = useClickOutside(handleDeselect);
 
-  return ref;
+    return ref;
 };

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

@@ -4,39 +4,39 @@ import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform } from '/@/renderer/types';
 
 export const useFixedTableHeader = () => {
-  const intersectRef = useRef<HTMLDivElement | null>(null);
-  const tableContainerRef = useRef<HTMLDivElement | null>(null);
-  const { windowBarStyle } = useWindowSettings();
+    const intersectRef = useRef<HTMLDivElement | null>(null);
+    const tableContainerRef = useRef<HTMLDivElement | null>(null);
+    const { windowBarStyle } = useWindowSettings();
 
-  const isNotPastTableIntersection = useInView(intersectRef, {
-    margin:
-      windowBarStyle === Platform.WEB || windowBarStyle === Platform.LINUX
-        ? '-68px 0px 0px 0px'
-        : '-98px 0px 0px 0px',
-  });
+    const isNotPastTableIntersection = useInView(intersectRef, {
+        margin:
+            windowBarStyle === Platform.WEB || windowBarStyle === Platform.LINUX
+                ? '-68px 0px 0px 0px'
+                : '-98px 0px 0px 0px',
+    });
 
-  const tableInView = useInView(tableContainerRef, {
-    margin: '-128px 0px 0px 0px',
-  });
+    const tableInView = useInView(tableContainerRef, {
+        margin: '-128px 0px 0px 0px',
+    });
 
-  useEffect(() => {
-    const header = document.querySelector('main .ag-header');
-    const root = document.querySelector('main .ag-root');
+    useEffect(() => {
+        const header = document.querySelector('main .ag-header');
+        const root = document.querySelector('main .ag-root');
 
-    if (isNotPastTableIntersection || !tableInView) {
-      if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
-        header?.classList.remove('window-frame');
-      }
-      header?.classList.remove('ag-header-fixed');
-      root?.classList.remove('ag-header-fixed-margin');
-    } else {
-      if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
-        header?.classList.add('window-frame');
-      }
-      header?.classList.add('ag-header-fixed');
-      root?.classList.add('ag-header-fixed-margin');
-    }
-  }, [isNotPastTableIntersection, tableInView, windowBarStyle]);
+        if (isNotPastTableIntersection || !tableInView) {
+            if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
+                header?.classList.remove('window-frame');
+            }
+            header?.classList.remove('ag-header-fixed');
+            root?.classList.remove('ag-header-fixed-margin');
+        } else {
+            if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
+                header?.classList.add('window-frame');
+            }
+            header?.classList.add('ag-header-fixed');
+            root?.classList.add('ag-header-fixed-margin');
+        }
+    }, [isNotPastTableIntersection, tableInView, windowBarStyle]);
 
-  return { intersectRef, tableContainerRef };
+    return { intersectRef, tableContainerRef };
 };

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

@@ -5,121 +5,126 @@ import { NDAlbumDetail, NDAlbumArtistDetail } from '/@/renderer/api/navidrome.ty
 import { queryKeys } from '/@/renderer/api/query-keys';
 import { SSAlbumDetail, SSAlbumArtistDetail } from '/@/renderer/api/subsonic.types';
 import {
-  SetRatingArgs,
-  Album,
-  AlbumArtist,
-  LibraryItem,
-  AnyLibraryItems,
-  RatingResponse,
+    SetRatingArgs,
+    Album,
+    AlbumArtist,
+    LibraryItem,
+    AnyLibraryItems,
+    RatingResponse,
 } from '/@/renderer/api/types';
 import { useSetAlbumListItemDataById, useSetQueueRating, getServerById } from '/@/renderer/store';
 import { ServerType } from '/@/renderer/types';
 
 export const useUpdateRating = () => {
-  const queryClient = useQueryClient();
-  const setAlbumListData = useSetAlbumListItemDataById();
-  const setQueueRating = useSetQueueRating();
+    const queryClient = useQueryClient();
+    const setAlbumListData = useSetAlbumListItemDataById();
+    const setQueueRating = useSetQueueRating();
 
-  return useMutation<
-    RatingResponse,
-    AxiosError,
-    Omit<SetRatingArgs, 'server' | 'apiClientProps'>,
-    { previous: { items: AnyLibraryItems } | undefined }
-  >({
-    mutationFn: (args) => {
-      const server = getServerById(args.serverId);
-      if (!server) throw new Error('Server not found');
-      return api.controller.updateRating({ ...args, apiClientProps: { server } });
-    },
-    onError: (_error, _variables, context) => {
-      for (const item of context?.previous?.items || []) {
-        switch (item.itemType) {
-          case LibraryItem.ALBUM:
-            setAlbumListData(item.id, { userRating: item.userRating });
-            break;
-          case LibraryItem.SONG:
-            setQueueRating([item.id], item.userRating);
-            break;
-        }
-      }
-    },
-    onMutate: (variables) => {
-      for (const item of variables.query.item) {
-        switch (item.itemType) {
-          case LibraryItem.ALBUM:
-            setAlbumListData(item.id, { userRating: variables.query.rating });
-            break;
-          case LibraryItem.SONG:
-            setQueueRating([item.id], variables.query.rating);
-            break;
-        }
-      }
+    return useMutation<
+        RatingResponse,
+        AxiosError,
+        Omit<SetRatingArgs, 'server' | 'apiClientProps'>,
+        { previous: { items: AnyLibraryItems } | undefined }
+    >({
+        mutationFn: (args) => {
+            const server = getServerById(args.serverId);
+            if (!server) throw new Error('Server not found');
+            return api.controller.updateRating({ ...args, apiClientProps: { server } });
+        },
+        onError: (_error, _variables, context) => {
+            for (const item of context?.previous?.items || []) {
+                switch (item.itemType) {
+                    case LibraryItem.ALBUM:
+                        setAlbumListData(item.id, { userRating: item.userRating });
+                        break;
+                    case LibraryItem.SONG:
+                        setQueueRating([item.id], item.userRating);
+                        break;
+                }
+            }
+        },
+        onMutate: (variables) => {
+            for (const item of variables.query.item) {
+                switch (item.itemType) {
+                    case LibraryItem.ALBUM:
+                        setAlbumListData(item.id, { userRating: variables.query.rating });
+                        break;
+                    case LibraryItem.SONG:
+                        setQueueRating([item.id], variables.query.rating);
+                        break;
+                }
+            }
 
-      return { previous: { items: variables.query.item } };
-    },
-    onSuccess: (_data, variables) => {
-      // We only need to set if we're already on the album detail page
-      const isAlbumDetailPage =
-        variables.query.item.length === 1 && variables.query.item[0].itemType === LibraryItem.ALBUM;
+            return { previous: { items: variables.query.item } };
+        },
+        onSuccess: (_data, variables) => {
+            // We only need to set if we're already on the album detail page
+            const isAlbumDetailPage =
+                variables.query.item.length === 1 &&
+                variables.query.item[0].itemType === LibraryItem.ALBUM;
 
-      if (isAlbumDetailPage) {
-        const { serverType, id: albumId, serverId } = variables.query.item[0] as Album;
+            if (isAlbumDetailPage) {
+                const { serverType, id: albumId, serverId } = variables.query.item[0] as Album;
 
-        const queryKey = queryKeys.albums.detail(serverId || '', { id: albumId });
-        const previous = queryClient.getQueryData<any>(queryKey);
-        if (previous) {
-          switch (serverType) {
-            case ServerType.NAVIDROME:
-              queryClient.setQueryData<NDAlbumDetail>(queryKey, {
-                ...previous,
-                userRating: variables.query.rating,
-              });
-              break;
-            case ServerType.SUBSONIC:
-              queryClient.setQueryData<SSAlbumDetail>(queryKey, {
-                ...previous,
-                userRating: variables.query.rating,
-              });
-              break;
-            case ServerType.JELLYFIN:
-              // Jellyfin does not support ratings
-              break;
-          }
-        }
-      }
+                const queryKey = queryKeys.albums.detail(serverId || '', { id: albumId });
+                const previous = queryClient.getQueryData<any>(queryKey);
+                if (previous) {
+                    switch (serverType) {
+                        case ServerType.NAVIDROME:
+                            queryClient.setQueryData<NDAlbumDetail>(queryKey, {
+                                ...previous,
+                                userRating: variables.query.rating,
+                            });
+                            break;
+                        case ServerType.SUBSONIC:
+                            queryClient.setQueryData<SSAlbumDetail>(queryKey, {
+                                ...previous,
+                                userRating: variables.query.rating,
+                            });
+                            break;
+                        case ServerType.JELLYFIN:
+                            // Jellyfin does not support ratings
+                            break;
+                    }
+                }
+            }
 
-      // We only need to set if we're already on the album detail page
-      const isAlbumArtistDetailPage =
-        variables.query.item.length === 1 &&
-        variables.query.item[0].itemType === LibraryItem.ALBUM_ARTIST;
+            // We only need to set if we're already on the album detail page
+            const isAlbumArtistDetailPage =
+                variables.query.item.length === 1 &&
+                variables.query.item[0].itemType === LibraryItem.ALBUM_ARTIST;
 
-      if (isAlbumArtistDetailPage) {
-        const { serverType, id: albumArtistId, serverId } = variables.query.item[0] as AlbumArtist;
+            if (isAlbumArtistDetailPage) {
+                const {
+                    serverType,
+                    id: albumArtistId,
+                    serverId,
+                } = variables.query.item[0] as AlbumArtist;
 
-        const queryKey = queryKeys.albumArtists.detail(serverId || '', {
-          id: albumArtistId,
-        });
-        const previous = queryClient.getQueryData<any>(queryKey);
-        if (previous) {
-          switch (serverType) {
-            case ServerType.NAVIDROME:
-              queryClient.setQueryData<NDAlbumArtistDetail>(queryKey, {
-                ...previous,
-                userRating: variables.query.rating,
-              });
-              break;
-            case ServerType.SUBSONIC:
-              queryClient.setQueryData<SSAlbumArtistDetail>(queryKey, {
-                ...previous,
-                userRating: variables.query.rating,
-              });
-              break;
-            case ServerType.JELLYFIN:
-              // Jellyfin does not support ratings
-              break;
-          }
-        }
-      }
-    },
-  });
+                const queryKey = queryKeys.albumArtists.detail(serverId || '', {
+                    id: albumArtistId,
+                });
+                const previous = queryClient.getQueryData<any>(queryKey);
+                if (previous) {
+                    switch (serverType) {
+                        case ServerType.NAVIDROME:
+                            queryClient.setQueryData<NDAlbumArtistDetail>(queryKey, {
+                                ...previous,
+                                userRating: variables.query.rating,
+                            });
+                            break;
+                        case ServerType.SUBSONIC:
+                            queryClient.setQueryData<SSAlbumArtistDetail>(queryKey, {
+                                ...previous,
+                                userRating: variables.query.rating,
+                            });
+                            break;
+                        case ServerType.JELLYFIN:
+                            // Jellyfin does not support ratings
+                            break;
+                    }
+                }
+            }
+        },
+    });
 };

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

@@ -1,16 +1,16 @@
 /* eslint-disable import/no-cycle */
 import { Ref, forwardRef, useRef, useEffect, useCallback, useMemo } from 'react';
 import type {
-  ICellRendererParams,
-  ValueGetterParams,
-  IHeaderParams,
-  ValueFormatterParams,
-  ColDef,
-  ColumnMovedEvent,
-  NewColumnsLoadedEvent,
-  GridReadyEvent,
-  GridSizeChangedEvent,
-  ModelUpdatedEvent,
+    ICellRendererParams,
+    ValueGetterParams,
+    IHeaderParams,
+    ValueFormatterParams,
+    ColDef,
+    ColumnMovedEvent,
+    NewColumnsLoadedEvent,
+    GridReadyEvent,
+    GridSizeChangedEvent,
+    ModelUpdatedEvent,
 } from '@ag-grid-community/core';
 import type { AgGridReactProps } from '@ag-grid-community/react';
 import { AgGridReact } from '@ag-grid-community/react';
@@ -40,428 +40,453 @@ export * from './hooks/use-click-outside-deselect';
 export * from './utils';
 
 const TableWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
 `;
 
 dayjs.extend(relativeTime);
 
 const tableColumns: { [key: string]: ColDef } = {
-  album: {
-    cellRenderer: (params: ICellRendererParams) =>
-      GenericCell(params, { isLink: true, position: 'left' }),
-    colId: TableColumn.ALBUM,
-    headerName: 'Album',
-    valueGetter: (params: ValueGetterParams) =>
-      params.data
-        ? {
-            link: generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
-              albumId: params.data?.albumId || '',
-            }),
-            value: params.data?.album,
-          }
-        : undefined,
-    width: 200,
-  },
-  albumArtist: {
-    cellRenderer: AlbumArtistCell,
-    colId: TableColumn.ALBUM_ARTIST,
-    headerName: 'Album Artist',
-    valueGetter: (params: ValueGetterParams) =>
-      params.data ? params.data.albumArtists : undefined,
-    width: 150,
-  },
-  albumCount: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.ALBUM_COUNT,
-    field: 'albumCount',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Albums',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.albumCount : undefined),
-    width: 80,
-  },
-  artist: {
-    cellRenderer: ArtistCell,
-    colId: TableColumn.ARTIST,
-    headerName: 'Artist',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.artists : undefined),
-    width: 150,
-  },
-  biography: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }),
-    colId: TableColumn.BIOGRAPHY,
-    field: 'biography',
-    headerName: 'Biography',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.biography : ''),
-    width: 200,
-  },
-  bitRate: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.BIT_RATE,
-    field: 'bitRate',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    suppressSizeToFit: true,
-    valueFormatter: (params: ValueFormatterParams) => `${params.value} kbps`,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.bitRate : undefined),
-    width: 90,
-  },
-  bpm: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.BPM,
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'BPM',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.bpm : undefined),
-    width: 60,
-  },
-  channels: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.CHANNELS,
-    field: 'channels',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.channels : undefined),
-    width: 100,
-  },
-  comment: {
-    cellRenderer: GenericCell,
-    colId: TableColumn.COMMENT,
-    headerName: 'Note',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.comment : undefined),
-    width: 150,
-  },
-  dateAdded: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.DATE_ADDED,
-    field: 'createdAt',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Date Added',
-    suppressSizeToFit: true,
-    valueFormatter: (params: ValueFormatterParams) =>
-      params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.createdAt : undefined),
-    width: 130,
-  },
-  discNumber: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.DISC_NUMBER,
-    field: 'discNumber',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Disc',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.discNumber : undefined),
-    width: 60,
-  },
-  duration: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.DURATION,
-    field: 'duration',
-    headerComponent: (params: IHeaderParams) =>
-      GenericTableHeader(params, { position: 'center', preset: 'duration' }),
-    suppressSizeToFit: true,
-    valueFormatter: (params: ValueFormatterParams) => formatDuration(params.value * 1000),
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.duration : undefined),
-    width: 70,
-  },
-  genre: {
-    cellRenderer: GenreCell,
-    colId: TableColumn.GENRE,
-    headerName: 'Genre',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.genres : undefined),
-    width: 100,
-  },
-  lastPlayedAt: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.LAST_PLAYED,
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Last Played',
-    valueFormatter: (params: ValueFormatterParams) =>
-      params.value ? dayjs(params.value).fromNow() : '',
-    valueGetter: (params: ValueGetterParams) =>
-      params.data ? params.data.lastPlayedAt : undefined,
-    width: 130,
-  },
-  path: {
-    cellRenderer: GenericCell,
-    colId: TableColumn.PATH,
-    headerName: 'Path',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.path : undefined),
-    width: 200,
-  },
-  playCount: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.PLAY_COUNT,
-    field: 'playCount',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Plays',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.playCount : undefined),
-    width: 90,
-  },
-  releaseDate: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.RELEASE_DATE,
-    field: 'releaseDate',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Release Date',
-    suppressSizeToFit: true,
-    valueFormatter: (params: ValueFormatterParams) =>
-      params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.releaseDate : undefined),
-    width: 130,
-  },
-  releaseYear: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.YEAR,
-    field: 'releaseYear',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Year',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.releaseYear : undefined),
-    width: 80,
-  },
-  rowIndex: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'right' }),
-    colId: TableColumn.ROW_INDEX,
-    headerComponent: (params: IHeaderParams) =>
-      GenericTableHeader(params, { position: 'right', preset: 'rowIndex' }),
-    suppressSizeToFit: true,
-    valueGetter: (params) => {
-      return (params.node?.rowIndex || 0) + 1;
+    album: {
+        cellRenderer: (params: ICellRendererParams) =>
+            GenericCell(params, { isLink: true, position: 'left' }),
+        colId: TableColumn.ALBUM,
+        headerName: 'Album',
+        valueGetter: (params: ValueGetterParams) =>
+            params.data
+                ? {
+                      link: generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
+                          albumId: params.data?.albumId || '',
+                      }),
+                      value: params.data?.album,
+                  }
+                : undefined,
+        width: 200,
+    },
+    albumArtist: {
+        cellRenderer: AlbumArtistCell,
+        colId: TableColumn.ALBUM_ARTIST,
+        headerName: 'Album Artist',
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.albumArtists : undefined,
+        width: 150,
+    },
+    albumCount: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.ALBUM_COUNT,
+        field: 'albumCount',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Albums',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.albumCount : undefined,
+        width: 80,
+    },
+    artist: {
+        cellRenderer: ArtistCell,
+        colId: TableColumn.ARTIST,
+        headerName: 'Artist',
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.artists : undefined),
+        width: 150,
+    },
+    biography: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }),
+        colId: TableColumn.BIOGRAPHY,
+        field: 'biography',
+        headerName: 'Biography',
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.biography : ''),
+        width: 200,
+    },
+    bitRate: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.BIT_RATE,
+        field: 'bitRate',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        suppressSizeToFit: true,
+        valueFormatter: (params: ValueFormatterParams) => `${params.value} kbps`,
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.bitRate : undefined),
+        width: 90,
+    },
+    bpm: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.BPM,
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'BPM',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.bpm : undefined),
+        width: 60,
+    },
+    channels: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.CHANNELS,
+        field: 'channels',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.channels : undefined,
+        width: 100,
+    },
+    comment: {
+        cellRenderer: GenericCell,
+        colId: TableColumn.COMMENT,
+        headerName: 'Note',
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.comment : undefined),
+        width: 150,
+    },
+    dateAdded: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.DATE_ADDED,
+        field: 'createdAt',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Date Added',
+        suppressSizeToFit: true,
+        valueFormatter: (params: ValueFormatterParams) =>
+            params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.createdAt : undefined,
+        width: 130,
+    },
+    discNumber: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.DISC_NUMBER,
+        field: 'discNumber',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Disc',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.discNumber : undefined,
+        width: 60,
+    },
+    duration: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.DURATION,
+        field: 'duration',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center', preset: 'duration' }),
+        suppressSizeToFit: true,
+        valueFormatter: (params: ValueFormatterParams) => formatDuration(params.value * 1000),
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.duration : undefined,
+        width: 70,
+    },
+    genre: {
+        cellRenderer: GenreCell,
+        colId: TableColumn.GENRE,
+        headerName: 'Genre',
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.genres : undefined),
+        width: 100,
+    },
+    lastPlayedAt: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.LAST_PLAYED,
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Last Played',
+        valueFormatter: (params: ValueFormatterParams) =>
+            params.value ? dayjs(params.value).fromNow() : '',
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.lastPlayedAt : undefined,
+        width: 130,
+    },
+    path: {
+        cellRenderer: GenericCell,
+        colId: TableColumn.PATH,
+        headerName: 'Path',
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.path : undefined),
+        width: 200,
+    },
+    playCount: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.PLAY_COUNT,
+        field: 'playCount',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Plays',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.playCount : undefined,
+        width: 90,
+    },
+    releaseDate: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.RELEASE_DATE,
+        field: 'releaseDate',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Release Date',
+        suppressSizeToFit: true,
+        valueFormatter: (params: ValueFormatterParams) =>
+            params.value ? dayjs(params.value).format('MMM D, YYYY') : '',
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.releaseDate : undefined,
+        width: 130,
+    },
+    releaseYear: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.YEAR,
+        field: 'releaseYear',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Year',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.releaseYear : undefined,
+        width: 80,
+    },
+    rowIndex: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'right' }),
+        colId: TableColumn.ROW_INDEX,
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'right', preset: 'rowIndex' }),
+        suppressSizeToFit: true,
+        valueGetter: (params) => {
+            return (params.node?.rowIndex || 0) + 1;
+        },
+        width: 65,
+    },
+    songCount: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.SONG_COUNT,
+        field: 'songCount',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Songs',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.songCount : undefined,
+        width: 80,
+    },
+    title: {
+        cellRenderer: (params: ICellRendererParams) =>
+            GenericCell(params, { position: 'left', primary: true }),
+        colId: TableColumn.TITLE,
+        field: 'name',
+        headerName: 'Title',
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data.name : undefined),
+        width: 250,
+    },
+    titleCombined: {
+        cellRenderer: CombinedTitleCell,
+        colId: TableColumn.TITLE_COMBINED,
+        headerName: 'Title',
+        initialWidth: 500,
+        minWidth: 150,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data
+                ? {
+                      albumArtists: params.data?.albumArtists,
+                      artists: params.data?.artists,
+                      imagePlaceholderUrl: params.data?.imagePlaceholderUrl,
+                      imageUrl: params.data?.imageUrl,
+                      name: params.data?.name,
+                      rowHeight: params.node?.rowHeight,
+                      type: params.data?.serverType,
+                  }
+                : undefined,
+        width: 250,
+    },
+    trackNumber: {
+        cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+        colId: TableColumn.TRACK_NUMBER,
+        field: 'trackNumber',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center' }),
+        headerName: 'Track',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.trackNumber : undefined,
+        width: 80,
+    },
+    userFavorite: {
+        cellClass: (params) => (params.value ? 'visible ag-cell-favorite' : 'ag-cell-favorite'),
+        cellRenderer: FavoriteCell,
+        colId: TableColumn.USER_FAVORITE,
+        field: 'userFavorite',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center', preset: 'userFavorite' }),
+        headerName: 'Favorite',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) =>
+            params.data ? params.data.userFavorite : undefined,
+        width: 50,
+    },
+    userRating: {
+        cellClass: (params) =>
+            params.value?.userRating ? 'visible ag-cell-rating' : 'ag-cell-rating',
+        cellRenderer: RatingCell,
+        colId: TableColumn.USER_RATING,
+        field: 'userRating',
+        headerComponent: (params: IHeaderParams) =>
+            GenericTableHeader(params, { position: 'center', preset: 'userRating' }),
+        headerName: 'Rating',
+        suppressSizeToFit: true,
+        valueGetter: (params: ValueGetterParams) => (params.data ? params.data : undefined),
+        width: 95,
     },
-    width: 65,
-  },
-  songCount: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.SONG_COUNT,
-    field: 'songCount',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Songs',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.songCount : undefined),
-    width: 80,
-  },
-  title: {
-    cellRenderer: (params: ICellRendererParams) =>
-      GenericCell(params, { position: 'left', primary: true }),
-    colId: TableColumn.TITLE,
-    field: 'name',
-    headerName: 'Title',
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.name : undefined),
-    width: 250,
-  },
-  titleCombined: {
-    cellRenderer: CombinedTitleCell,
-    colId: TableColumn.TITLE_COMBINED,
-    headerName: 'Title',
-    initialWidth: 500,
-    minWidth: 150,
-    valueGetter: (params: ValueGetterParams) =>
-      params.data
-        ? {
-            albumArtists: params.data?.albumArtists,
-            artists: params.data?.artists,
-            imagePlaceholderUrl: params.data?.imagePlaceholderUrl,
-            imageUrl: params.data?.imageUrl,
-            name: params.data?.name,
-            rowHeight: params.node?.rowHeight,
-            type: params.data?.serverType,
-          }
-        : undefined,
-    width: 250,
-  },
-  trackNumber: {
-    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
-    colId: TableColumn.TRACK_NUMBER,
-    field: 'trackNumber',
-    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
-    headerName: 'Track',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data.trackNumber : undefined),
-    width: 80,
-  },
-  userFavorite: {
-    cellClass: (params) => (params.value ? 'visible ag-cell-favorite' : 'ag-cell-favorite'),
-    cellRenderer: FavoriteCell,
-    colId: TableColumn.USER_FAVORITE,
-    field: 'userFavorite',
-    headerComponent: (params: IHeaderParams) =>
-      GenericTableHeader(params, { position: 'center', preset: 'userFavorite' }),
-    headerName: 'Favorite',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) =>
-      params.data ? params.data.userFavorite : undefined,
-    width: 50,
-  },
-  userRating: {
-    cellClass: (params) => (params.value?.userRating ? 'visible ag-cell-rating' : 'ag-cell-rating'),
-    cellRenderer: RatingCell,
-    colId: TableColumn.USER_RATING,
-    field: 'userRating',
-    headerComponent: (params: IHeaderParams) =>
-      GenericTableHeader(params, { position: 'center', preset: 'userRating' }),
-    headerName: 'Rating',
-    suppressSizeToFit: true,
-    valueGetter: (params: ValueGetterParams) => (params.data ? params.data : undefined),
-    width: 95,
-  },
 };
 
 export const getColumnDef = (column: TableColumn) => {
-  return tableColumns[column as keyof typeof tableColumns];
+    return tableColumns[column as keyof typeof tableColumns];
 };
 
 export const getColumnDefs = (columns: PersistedTableColumn[]) => {
-  const columnDefs: ColDef[] = [];
-  for (const column of columns) {
-    const presetColumn = tableColumns[column.column as keyof typeof tableColumns];
-    if (presetColumn) {
-      columnDefs.push({
-        ...presetColumn,
-        initialWidth: column.width,
-        ...column.extraProps,
-      });
+    const columnDefs: ColDef[] = [];
+    for (const column of columns) {
+        const presetColumn = tableColumns[column.column as keyof typeof tableColumns];
+        if (presetColumn) {
+            columnDefs.push({
+                ...presetColumn,
+                initialWidth: column.width,
+                ...column.extraProps,
+            });
+        }
     }
-  }
 
-  return columnDefs;
+    return columnDefs;
 };
 
 interface VirtualTableProps extends AgGridReactProps {
-  autoFitColumns?: boolean;
-  autoHeight?: boolean;
-  deselectOnClickOutside?: boolean;
-  transparentHeader?: boolean;
+    autoFitColumns?: boolean;
+    autoHeight?: boolean;
+    deselectOnClickOutside?: boolean;
+    transparentHeader?: boolean;
 }
 
 export const VirtualTable = forwardRef(
-  (
-    {
-      autoFitColumns,
-      deselectOnClickOutside,
-      autoHeight,
-      transparentHeader,
-      onColumnMoved,
-      onNewColumnsLoaded,
-      onGridReady,
-      onGridSizeChanged,
-      ...rest
-    }: VirtualTableProps,
-    ref: Ref<AgGridReactType | null>,
-  ) => {
-    const tableRef = useRef<AgGridReactType | null>(null);
+    (
+        {
+            autoFitColumns,
+            deselectOnClickOutside,
+            autoHeight,
+            transparentHeader,
+            onColumnMoved,
+            onNewColumnsLoaded,
+            onGridReady,
+            onGridSizeChanged,
+            ...rest
+        }: VirtualTableProps,
+        ref: Ref<AgGridReactType | null>,
+    ) => {
+        const tableRef = useRef<AgGridReactType | null>(null);
 
-    const mergedRef = useMergedRef(ref, tableRef);
+        const mergedRef = useMergedRef(ref, tableRef);
 
-    const deselectRef = useClickOutside(() => {
-      if (tableRef?.current?.api && deselectOnClickOutside) {
-        tableRef?.current?.api?.deselectAll();
-      }
-    });
+        const deselectRef = useClickOutside(() => {
+            if (tableRef?.current?.api && deselectOnClickOutside) {
+                tableRef?.current?.api?.deselectAll();
+            }
+        });
 
-    const defaultColumnDefs: ColDef = useMemo(() => {
-      return {
-        lockPinned: true,
-        lockVisible: true,
-        resizable: true,
-      };
-    }, []);
+        const defaultColumnDefs: ColDef = useMemo(() => {
+            return {
+                lockPinned: true,
+                lockVisible: true,
+                resizable: true,
+            };
+        }, []);
 
-    // Auto fit columns on column change
-    useEffect(() => {
-      if (!tableRef?.current?.api) return;
-      if (autoFitColumns && tableRef?.current?.api) {
-        tableRef?.current?.api?.sizeColumnsToFit?.();
-      }
-    }, [autoFitColumns]);
+        // Auto fit columns on column change
+        useEffect(() => {
+            if (!tableRef?.current?.api) return;
+            if (autoFitColumns && tableRef?.current?.api) {
+                tableRef?.current?.api?.sizeColumnsToFit?.();
+            }
+        }, [autoFitColumns]);
 
-    // Reset row heights on row height change
-    useEffect(() => {
-      if (!tableRef?.current?.api) return;
-      tableRef?.current?.api?.resetRowHeights();
-      tableRef?.current?.api?.redrawRows();
-    }, [rest.rowHeight]);
+        // Reset row heights on row height change
+        useEffect(() => {
+            if (!tableRef?.current?.api) return;
+            tableRef?.current?.api?.resetRowHeights();
+            tableRef?.current?.api?.redrawRows();
+        }, [rest.rowHeight]);
 
-    const handleColumnMoved = useCallback(
-      (e: ColumnMovedEvent) => {
-        if (!e?.api) return;
-        onColumnMoved?.(e);
-        if (autoFitColumns) e.api?.sizeColumnsToFit?.();
-      },
-      [autoFitColumns, onColumnMoved],
-    );
+        const handleColumnMoved = useCallback(
+            (e: ColumnMovedEvent) => {
+                if (!e?.api) return;
+                onColumnMoved?.(e);
+                if (autoFitColumns) e.api?.sizeColumnsToFit?.();
+            },
+            [autoFitColumns, onColumnMoved],
+        );
 
-    const handleNewColumnsLoaded = useCallback(
-      (e: NewColumnsLoadedEvent) => {
-        if (!e?.api) return;
-        onNewColumnsLoaded?.(e);
-        if (autoFitColumns) e.api?.sizeColumnsToFit?.();
-      },
-      [autoFitColumns, onNewColumnsLoaded],
-    );
+        const handleNewColumnsLoaded = useCallback(
+            (e: NewColumnsLoadedEvent) => {
+                if (!e?.api) return;
+                onNewColumnsLoaded?.(e);
+                if (autoFitColumns) e.api?.sizeColumnsToFit?.();
+            },
+            [autoFitColumns, onNewColumnsLoaded],
+        );
 
-    const handleGridReady = useCallback(
-      (e: GridReadyEvent) => {
-        if (!e?.api) return;
-        onGridReady?.(e);
-        if (autoHeight) e.api.setDomLayout('autoHeight');
-        if (autoFitColumns) e.api?.sizeColumnsToFit?.();
-      },
-      [autoHeight, autoFitColumns, onGridReady],
-    );
+        const handleGridReady = useCallback(
+            (e: GridReadyEvent) => {
+                if (!e?.api) return;
+                onGridReady?.(e);
+                if (autoHeight) e.api.setDomLayout('autoHeight');
+                if (autoFitColumns) e.api?.sizeColumnsToFit?.();
+            },
+            [autoHeight, autoFitColumns, onGridReady],
+        );
 
-    const handleGridSizeChanged = useCallback(
-      (e: GridSizeChangedEvent) => {
-        if (!e?.api) return;
-        onGridSizeChanged?.(e);
-        if (autoFitColumns) e.api?.sizeColumnsToFit?.();
-      },
-      [autoFitColumns, onGridSizeChanged],
-    );
+        const handleGridSizeChanged = useCallback(
+            (e: GridSizeChangedEvent) => {
+                if (!e?.api) return;
+                onGridSizeChanged?.(e);
+                if (autoFitColumns) e.api?.sizeColumnsToFit?.();
+            },
+            [autoFitColumns, onGridSizeChanged],
+        );
 
-    const handleModelUpdated = useCallback(
-      (e: ModelUpdatedEvent) => {
-        if (!e?.api) return;
-        if (autoFitColumns) e.api?.sizeColumnsToFit?.();
-      },
-      [autoFitColumns],
-    );
+        const handleModelUpdated = useCallback(
+            (e: ModelUpdatedEvent) => {
+                if (!e?.api) return;
+                if (autoFitColumns) e.api?.sizeColumnsToFit?.();
+            },
+            [autoFitColumns],
+        );
 
-    return (
-      <TableWrapper
-        ref={deselectRef}
-        className={
-          transparentHeader ? 'ag-header-transparent ag-theme-alpine-dark' : 'ag-theme-alpine-dark'
-        }
-      >
-        <AgGridReact
-          ref={mergedRef}
-          animateRows
-          maintainColumnOrder
-          suppressAsyncEvents
-          suppressContextMenu
-          suppressCopyRowsToClipboard
-          suppressMoveWhenRowDragging
-          suppressPaginationPanel
-          suppressScrollOnNewData
-          blockLoadDebounceMillis={200}
-          cacheBlockSize={300}
-          cacheOverflowSize={1}
-          defaultColDef={defaultColumnDefs}
-          enableCellChangeFlash={false}
-          headerHeight={36}
-          rowBuffer={30}
-          rowSelection="multiple"
-          {...rest}
-          onColumnMoved={handleColumnMoved}
-          onGridReady={handleGridReady}
-          onGridSizeChanged={handleGridSizeChanged}
-          onModelUpdated={handleModelUpdated}
-          onNewColumnsLoaded={handleNewColumnsLoaded}
-        />
-      </TableWrapper>
-    );
-  },
+        return (
+            <TableWrapper
+                ref={deselectRef}
+                className={
+                    transparentHeader
+                        ? 'ag-header-transparent ag-theme-alpine-dark'
+                        : 'ag-theme-alpine-dark'
+                }
+            >
+                <AgGridReact
+                    ref={mergedRef}
+                    animateRows
+                    maintainColumnOrder
+                    suppressAsyncEvents
+                    suppressContextMenu
+                    suppressCopyRowsToClipboard
+                    suppressMoveWhenRowDragging
+                    suppressPaginationPanel
+                    suppressScrollOnNewData
+                    blockLoadDebounceMillis={200}
+                    cacheBlockSize={300}
+                    cacheOverflowSize={1}
+                    defaultColDef={defaultColumnDefs}
+                    enableCellChangeFlash={false}
+                    headerHeight={36}
+                    rowBuffer={30}
+                    rowSelection="multiple"
+                    {...rest}
+                    onColumnMoved={handleColumnMoved}
+                    onGridReady={handleGridReady}
+                    onGridSizeChanged={handleGridSizeChanged}
+                    onModelUpdated={handleModelUpdated}
+                    onNewColumnsLoaded={handleNewColumnsLoaded}
+                />
+            </TableWrapper>
+        );
+    },
 );

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

@@ -3,256 +3,256 @@ import { MultiSelect } from '/@/renderer/components/select';
 import { Slider } from '/@/renderer/components/slider';
 import { Switch } from '/@/renderer/components/switch';
 import {
-  useSettingsStoreActions,
-  useSettingsStore,
-  useLyricsSettings,
+    useSettingsStoreActions,
+    useSettingsStore,
+    useLyricsSettings,
 } from '/@/renderer/store/settings.store';
 import { TableColumn, TableType } from '/@/renderer/types';
 import { Option } from '/@/renderer/components/option';
 import { NumberInput } from '/@/renderer/components/input';
 
 export const SONG_TABLE_COLUMNS = [
-  { label: 'Row Index', value: TableColumn.ROW_INDEX },
-  { label: 'Title', value: TableColumn.TITLE },
-  { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
-  { label: 'Duration', value: TableColumn.DURATION },
-  { label: 'Album', value: TableColumn.ALBUM },
-  { label: 'Album Artist', value: TableColumn.ALBUM_ARTIST },
-  { label: 'Artist', value: TableColumn.ARTIST },
-  { label: 'Genre', value: TableColumn.GENRE },
-  { label: 'Year', value: TableColumn.YEAR },
-  { label: 'Release Date', value: TableColumn.RELEASE_DATE },
-  { label: 'Disc Number', value: TableColumn.DISC_NUMBER },
-  { label: 'Track Number', value: TableColumn.TRACK_NUMBER },
-  { label: 'Bitrate', value: TableColumn.BIT_RATE },
-  { label: 'Last Played', value: TableColumn.LAST_PLAYED },
-  { label: 'Note', value: TableColumn.COMMENT },
-  { label: 'Channels', value: TableColumn.CHANNELS },
-  { label: 'BPM', value: TableColumn.BPM },
-  { label: 'Date Added', value: TableColumn.DATE_ADDED },
-  { label: 'Path', value: TableColumn.PATH },
-  { label: 'Plays', value: TableColumn.PLAY_COUNT },
-  { label: 'Size', value: TableColumn.SIZE },
-  { label: 'Favorite', value: TableColumn.USER_FAVORITE },
-  { label: 'Rating', value: TableColumn.USER_RATING },
-  // { label: 'Skip', value: TableColumn.SKIP },
+    { label: 'Row Index', value: TableColumn.ROW_INDEX },
+    { label: 'Title', value: TableColumn.TITLE },
+    { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
+    { label: 'Duration', value: TableColumn.DURATION },
+    { label: 'Album', value: TableColumn.ALBUM },
+    { label: 'Album Artist', value: TableColumn.ALBUM_ARTIST },
+    { label: 'Artist', value: TableColumn.ARTIST },
+    { label: 'Genre', value: TableColumn.GENRE },
+    { label: 'Year', value: TableColumn.YEAR },
+    { label: 'Release Date', value: TableColumn.RELEASE_DATE },
+    { label: 'Disc Number', value: TableColumn.DISC_NUMBER },
+    { label: 'Track Number', value: TableColumn.TRACK_NUMBER },
+    { label: 'Bitrate', value: TableColumn.BIT_RATE },
+    { label: 'Last Played', value: TableColumn.LAST_PLAYED },
+    { label: 'Note', value: TableColumn.COMMENT },
+    { label: 'Channels', value: TableColumn.CHANNELS },
+    { label: 'BPM', value: TableColumn.BPM },
+    { label: 'Date Added', value: TableColumn.DATE_ADDED },
+    { label: 'Path', value: TableColumn.PATH },
+    { label: 'Plays', value: TableColumn.PLAY_COUNT },
+    { label: 'Size', value: TableColumn.SIZE },
+    { label: 'Favorite', value: TableColumn.USER_FAVORITE },
+    { label: 'Rating', value: TableColumn.USER_RATING },
+    // { label: 'Skip', value: TableColumn.SKIP },
 ];
 
 export const ALBUM_TABLE_COLUMNS = [
-  { label: 'Row Index', value: TableColumn.ROW_INDEX },
-  { label: 'Title', value: TableColumn.TITLE },
-  { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
-  { label: 'Duration', value: TableColumn.DURATION },
-  { label: 'Album Artist', value: TableColumn.ALBUM_ARTIST },
-  { label: 'Artist', value: TableColumn.ARTIST },
-  { label: 'Genre', value: TableColumn.GENRE },
-  { label: 'Year', value: TableColumn.YEAR },
-  { label: 'Release Date', value: TableColumn.RELEASE_DATE },
-  { label: 'Last Played', value: TableColumn.LAST_PLAYED },
-  { label: 'Date Added', value: TableColumn.DATE_ADDED },
-  { label: 'Plays', value: TableColumn.PLAY_COUNT },
-  { label: 'Favorite', value: TableColumn.USER_FAVORITE },
-  { label: 'Rating', value: TableColumn.USER_RATING },
+    { label: 'Row Index', value: TableColumn.ROW_INDEX },
+    { label: 'Title', value: TableColumn.TITLE },
+    { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
+    { label: 'Duration', value: TableColumn.DURATION },
+    { label: 'Album Artist', value: TableColumn.ALBUM_ARTIST },
+    { label: 'Artist', value: TableColumn.ARTIST },
+    { label: 'Genre', value: TableColumn.GENRE },
+    { label: 'Year', value: TableColumn.YEAR },
+    { label: 'Release Date', value: TableColumn.RELEASE_DATE },
+    { label: 'Last Played', value: TableColumn.LAST_PLAYED },
+    { label: 'Date Added', value: TableColumn.DATE_ADDED },
+    { label: 'Plays', value: TableColumn.PLAY_COUNT },
+    { label: 'Favorite', value: TableColumn.USER_FAVORITE },
+    { label: 'Rating', value: TableColumn.USER_RATING },
 ];
 
 export const ALBUMARTIST_TABLE_COLUMNS = [
-  { label: 'Row Index', value: TableColumn.ROW_INDEX },
-  { label: 'Title', value: TableColumn.TITLE },
-  { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
-  { label: 'Duration', value: TableColumn.DURATION },
-  { label: 'Biography', value: TableColumn.BIOGRAPHY },
-  { label: 'Genre', value: TableColumn.GENRE },
-  { label: 'Last Played', value: TableColumn.LAST_PLAYED },
-  { label: 'Plays', value: TableColumn.PLAY_COUNT },
-  { label: 'Album Count', value: TableColumn.ALBUM_COUNT },
-  { label: 'Song Count', value: TableColumn.SONG_COUNT },
-  { label: 'Favorite', value: TableColumn.USER_FAVORITE },
-  { label: 'Rating', value: TableColumn.USER_RATING },
+    { label: 'Row Index', value: TableColumn.ROW_INDEX },
+    { label: 'Title', value: TableColumn.TITLE },
+    { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
+    { label: 'Duration', value: TableColumn.DURATION },
+    { label: 'Biography', value: TableColumn.BIOGRAPHY },
+    { label: 'Genre', value: TableColumn.GENRE },
+    { label: 'Last Played', value: TableColumn.LAST_PLAYED },
+    { label: 'Plays', value: TableColumn.PLAY_COUNT },
+    { label: 'Album Count', value: TableColumn.ALBUM_COUNT },
+    { label: 'Song Count', value: TableColumn.SONG_COUNT },
+    { label: 'Favorite', value: TableColumn.USER_FAVORITE },
+    { label: 'Rating', value: TableColumn.USER_RATING },
 ];
 
 export const PLAYLIST_TABLE_COLUMNS = [
-  { label: 'Row Index', value: TableColumn.ROW_INDEX },
-  { label: 'Title', value: TableColumn.TITLE },
-  { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
-  { label: 'Duration', value: TableColumn.DURATION },
-  { label: 'Owner', value: TableColumn.OWNER },
-  // { label: 'Genre', value: TableColumn.GENRE },
-  { label: 'Song Count', value: TableColumn.SONG_COUNT },
+    { label: 'Row Index', value: TableColumn.ROW_INDEX },
+    { label: 'Title', value: TableColumn.TITLE },
+    { label: 'Title (Combined)', value: TableColumn.TITLE_COMBINED },
+    { label: 'Duration', value: TableColumn.DURATION },
+    { label: 'Owner', value: TableColumn.OWNER },
+    // { label: 'Genre', value: TableColumn.GENRE },
+    { label: 'Song Count', value: TableColumn.SONG_COUNT },
 ];
 
 interface TableConfigDropdownProps {
-  type: TableType;
+    type: TableType;
 }
 
 export const TableConfigDropdown = ({ type }: TableConfigDropdownProps) => {
-  const { setSettings } = useSettingsStoreActions();
-  const tableConfig = useSettingsStore((state) => state.tables);
-  const lyricConfig = useLyricsSettings();
+    const { setSettings } = useSettingsStoreActions();
+    const tableConfig = useSettingsStore((state) => state.tables);
+    const lyricConfig = useLyricsSettings();
 
-  const handleAddOrRemoveColumns = (values: TableColumn[]) => {
-    const existingColumns = tableConfig[type].columns;
+    const handleAddOrRemoveColumns = (values: TableColumn[]) => {
+        const existingColumns = tableConfig[type].columns;
 
-    if (values.length === 0) {
-      setSettings({
-        tables: {
-          ...useSettingsStore.getState().tables,
-          [type]: {
-            ...useSettingsStore.getState().tables[type],
-            columns: [],
-          },
-        },
-      });
-      return;
-    }
+        if (values.length === 0) {
+            setSettings({
+                tables: {
+                    ...useSettingsStore.getState().tables,
+                    [type]: {
+                        ...useSettingsStore.getState().tables[type],
+                        columns: [],
+                    },
+                },
+            });
+            return;
+        }
 
-    // If adding a column
-    if (values.length > existingColumns.length) {
-      const newColumn = { column: values[values.length - 1] };
-      setSettings({
-        tables: {
-          ...useSettingsStore.getState().tables,
-          [type]: {
-            ...useSettingsStore.getState().tables[type],
-            columns: [...existingColumns, newColumn],
-          },
-        },
-      });
-    }
-    // If removing a column
-    else {
-      const removed = existingColumns.filter((column) => !values.includes(column.column));
+        // If adding a column
+        if (values.length > existingColumns.length) {
+            const newColumn = { column: values[values.length - 1] };
+            setSettings({
+                tables: {
+                    ...useSettingsStore.getState().tables,
+                    [type]: {
+                        ...useSettingsStore.getState().tables[type],
+                        columns: [...existingColumns, newColumn],
+                    },
+                },
+            });
+        }
+        // If removing a column
+        else {
+            const removed = existingColumns.filter((column) => !values.includes(column.column));
 
-      const newColumns = existingColumns.filter((column) => !removed.includes(column));
+            const newColumns = existingColumns.filter((column) => !removed.includes(column));
 
-      setSettings({
-        tables: {
-          ...useSettingsStore.getState().tables,
-          [type]: {
-            ...useSettingsStore.getState().tables[type],
-            columns: newColumns,
-          },
-        },
-      });
-    }
-  };
+            setSettings({
+                tables: {
+                    ...useSettingsStore.getState().tables,
+                    [type]: {
+                        ...useSettingsStore.getState().tables[type],
+                        columns: newColumns,
+                    },
+                },
+            });
+        }
+    };
 
-  const handleUpdateRowHeight = (value: number) => {
-    setSettings({
-      tables: {
-        ...useSettingsStore.getState().tables,
-        [type]: {
-          ...useSettingsStore.getState().tables[type],
-          rowHeight: value,
-        },
-      },
-    });
-  };
+    const handleUpdateRowHeight = (value: number) => {
+        setSettings({
+            tables: {
+                ...useSettingsStore.getState().tables,
+                [type]: {
+                    ...useSettingsStore.getState().tables[type],
+                    rowHeight: value,
+                },
+            },
+        });
+    };
 
-  const handleUpdateAutoFit = (e: ChangeEvent<HTMLInputElement>) => {
-    setSettings({
-      tables: {
-        ...useSettingsStore.getState().tables,
-        [type]: {
-          ...useSettingsStore.getState().tables[type],
-          autoFit: e.currentTarget.checked,
-        },
-      },
-    });
-  };
+    const handleUpdateAutoFit = (e: ChangeEvent<HTMLInputElement>) => {
+        setSettings({
+            tables: {
+                ...useSettingsStore.getState().tables,
+                [type]: {
+                    ...useSettingsStore.getState().tables[type],
+                    autoFit: e.currentTarget.checked,
+                },
+            },
+        });
+    };
 
-  const handleUpdateFollow = (e: ChangeEvent<HTMLInputElement>) => {
-    setSettings({
-      tables: {
-        ...useSettingsStore.getState().tables,
-        [type]: {
-          ...useSettingsStore.getState().tables[type],
-          followCurrentSong: e.currentTarget.checked,
-        },
-      },
-    });
-  };
+    const handleUpdateFollow = (e: ChangeEvent<HTMLInputElement>) => {
+        setSettings({
+            tables: {
+                ...useSettingsStore.getState().tables,
+                [type]: {
+                    ...useSettingsStore.getState().tables[type],
+                    followCurrentSong: e.currentTarget.checked,
+                },
+            },
+        });
+    };
 
-  const handleLyricFollow = (e: ChangeEvent<HTMLInputElement>) => {
-    setSettings({
-      lyrics: {
-        ...useSettingsStore.getState().lyrics,
-        follow: e.currentTarget.checked,
-      },
-    });
-  };
+    const handleLyricFollow = (e: ChangeEvent<HTMLInputElement>) => {
+        setSettings({
+            lyrics: {
+                ...useSettingsStore.getState().lyrics,
+                follow: e.currentTarget.checked,
+            },
+        });
+    };
 
-  const handleLyricOffset = (e: ChangeEvent<HTMLInputElement>) => {
-    setSettings({
-      lyrics: {
-        ...useSettingsStore.getState().lyrics,
-        delayMs: Number(e.currentTarget.value),
-      },
-    });
-  };
+    const handleLyricOffset = (e: ChangeEvent<HTMLInputElement>) => {
+        setSettings({
+            lyrics: {
+                ...useSettingsStore.getState().lyrics,
+                delayMs: Number(e.currentTarget.value),
+            },
+        });
+    };
 
-  return (
-    <>
-      <Option>
-        <Option.Label>Auto-fit Columns</Option.Label>
-        <Option.Control>
-          <Switch
-            defaultChecked={tableConfig[type]?.autoFit}
-            onChange={handleUpdateAutoFit}
-          />
-        </Option.Control>
-      </Option>
-      <Option>
-        <Option.Label>Follow current song</Option.Label>
-        <Option.Control>
-          <Switch
-            defaultChecked={tableConfig[type]?.followCurrentSong}
-            onChange={handleUpdateFollow}
-          />
-        </Option.Control>
-      </Option>
-      <Option>
-        <Option.Label>Follow current lyrics</Option.Label>
-        <Option.Control>
-          <Switch
-            defaultChecked={lyricConfig.follow}
-            onChange={handleLyricFollow}
-          />
-        </Option.Control>
-      </Option>
-      <Option>
-        <Option.Label>Lyric offset (ms)</Option.Label>
-        <Option.Control>
-          <NumberInput
-            defaultValue={lyricConfig.delayMs}
-            step={10}
-            onBlur={handleLyricOffset}
-          />
-        </Option.Control>
-      </Option>
-      <Option>
-        <Option.Control>
-          <Slider
-            defaultValue={tableConfig[type]?.rowHeight}
-            label={(value) => `Item size: ${value}`}
-            max={100}
-            min={25}
-            w="100%"
-            onChangeEnd={handleUpdateRowHeight}
-          />
-        </Option.Control>
-      </Option>
-      <Option>
-        <Option.Control>
-          <MultiSelect
-            clearable
-            data={SONG_TABLE_COLUMNS}
-            defaultValue={tableConfig[type]?.columns.map((column) => column.column)}
-            dropdownPosition="bottom"
-            width={300}
-            onChange={handleAddOrRemoveColumns}
-          />
-        </Option.Control>
-      </Option>
-    </>
-  );
+    return (
+        <>
+            <Option>
+                <Option.Label>Auto-fit Columns</Option.Label>
+                <Option.Control>
+                    <Switch
+                        defaultChecked={tableConfig[type]?.autoFit}
+                        onChange={handleUpdateAutoFit}
+                    />
+                </Option.Control>
+            </Option>
+            <Option>
+                <Option.Label>Follow current song</Option.Label>
+                <Option.Control>
+                    <Switch
+                        defaultChecked={tableConfig[type]?.followCurrentSong}
+                        onChange={handleUpdateFollow}
+                    />
+                </Option.Control>
+            </Option>
+            <Option>
+                <Option.Label>Follow current lyrics</Option.Label>
+                <Option.Control>
+                    <Switch
+                        defaultChecked={lyricConfig.follow}
+                        onChange={handleLyricFollow}
+                    />
+                </Option.Control>
+            </Option>
+            <Option>
+                <Option.Label>Lyric offset (ms)</Option.Label>
+                <Option.Control>
+                    <NumberInput
+                        defaultValue={lyricConfig.delayMs}
+                        step={10}
+                        onBlur={handleLyricOffset}
+                    />
+                </Option.Control>
+            </Option>
+            <Option>
+                <Option.Control>
+                    <Slider
+                        defaultValue={tableConfig[type]?.rowHeight}
+                        label={(value) => `Item size: ${value}`}
+                        max={100}
+                        min={25}
+                        w="100%"
+                        onChangeEnd={handleUpdateRowHeight}
+                    />
+                </Option.Control>
+            </Option>
+            <Option>
+                <Option.Control>
+                    <MultiSelect
+                        clearable
+                        data={SONG_TABLE_COLUMNS}
+                        defaultValue={tableConfig[type]?.columns.map((column) => column.column)}
+                        dropdownPosition="bottom"
+                        width={300}
+                        onChange={handleAddOrRemoveColumns}
+                    />
+                </Option.Control>
+            </Option>
+        </>
+    );
 };

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

@@ -15,140 +15,144 @@ import { TablePagination as TablePaginationType } from '/@/renderer/types';
 import { ListKey } from '/@/renderer/store';
 
 interface TablePaginationProps {
-  pageKey: ListKey;
-  pagination: TablePaginationType;
-  setIdPagination?: (id: string, pagination: Partial<TablePaginationType>) => void;
-  setPagination?: (args: { data: Partial<TablePaginationType>; key: ListKey }) => void;
-  tableRef: MutableRefObject<AgGridReactType | null>;
+    pageKey: ListKey;
+    pagination: TablePaginationType;
+    setIdPagination?: (id: string, pagination: Partial<TablePaginationType>) => void;
+    setPagination?: (args: { data: Partial<TablePaginationType>; key: ListKey }) => void;
+    tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
 export const TablePagination = ({
-  pageKey,
-  tableRef,
-  pagination,
-  setPagination,
-  setIdPagination,
+    pageKey,
+    tableRef,
+    pagination,
+    setPagination,
+    setIdPagination,
 }: TablePaginationProps) => {
-  const [isGoToPageOpen, handlers] = useDisclosure(false);
-  const containerQuery = useContainerQuery();
+    const [isGoToPageOpen, handlers] = useDisclosure(false);
+    const containerQuery = useContainerQuery();
 
-  const goToForm = useForm({
-    initialValues: {
-      pageNumber: undefined,
-    },
-  });
+    const goToForm = useForm({
+        initialValues: {
+            pageNumber: undefined,
+        },
+    });
 
-  const handlePagination = (index: number) => {
-    const newPage = index - 1;
-    tableRef.current?.api.paginationGoToPage(newPage);
-    setPagination?.({ data: { currentPage: newPage }, key: pageKey });
-    setIdPagination?.(pageKey || '', { currentPage: newPage });
-  };
+    const handlePagination = (index: number) => {
+        const newPage = index - 1;
+        tableRef.current?.api.paginationGoToPage(newPage);
+        setPagination?.({ data: { currentPage: newPage }, key: pageKey });
+        setIdPagination?.(pageKey || '', { currentPage: newPage });
+    };
 
-  const handleGoSubmit = goToForm.onSubmit((values) => {
-    handlers.close();
-    if (!values.pageNumber || values.pageNumber < 1 || values.pageNumber > pagination.totalPages) {
-      return;
-    }
+    const handleGoSubmit = goToForm.onSubmit((values) => {
+        handlers.close();
+        if (
+            !values.pageNumber ||
+            values.pageNumber < 1 ||
+            values.pageNumber > pagination.totalPages
+        ) {
+            return;
+        }
 
-    const newPage = values.pageNumber - 1;
-    tableRef.current?.api.paginationGoToPage(newPage);
-    setPagination?.({ data: { currentPage: newPage }, key: pageKey });
-    setIdPagination?.(pageKey || '', { currentPage: newPage });
-  });
+        const newPage = values.pageNumber - 1;
+        tableRef.current?.api.paginationGoToPage(newPage);
+        setPagination?.({ data: { currentPage: newPage }, key: pageKey });
+        setIdPagination?.(pageKey || '', { currentPage: newPage });
+    });
 
-  const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage + 1;
-  const currentPageMaxIndex = (pagination.currentPage + 1) * pagination.itemsPerPage;
-  const currentPageStopIndex =
-    currentPageMaxIndex > pagination.totalItems ? pagination.totalItems : currentPageMaxIndex;
+    const currentPageStartIndex = pagination.currentPage * pagination.itemsPerPage + 1;
+    const currentPageMaxIndex = (pagination.currentPage + 1) * pagination.itemsPerPage;
+    const currentPageStopIndex =
+        currentPageMaxIndex > pagination.totalItems ? pagination.totalItems : currentPageMaxIndex;
 
-  return (
-    <MotionFlex
-      ref={containerQuery.ref}
-      layout
-      align="center"
-      animate={{ y: 0 }}
-      exit={{ y: 50 }}
-      initial={{ y: 50 }}
-      justify="space-between"
-      p="1rem"
-      sx={{ borderTop: '1px solid var(--generic-border-color)' }}
-    >
-      <Text
-        $secondary
-        size="md"
-      >
-        {containerQuery.isMd ? (
-          <>
-            Showing <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
-            <b>{pagination.totalItems}</b> items
-          </>
-        ) : containerQuery.isSm ? (
-          <>
-            <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
-            <b>{pagination.totalItems}</b> items
-          </>
-        ) : (
-          <>
-            <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
-            <b>{pagination.totalItems}</b>
-          </>
-        )}
-      </Text>
-      <Group
-        ref={containerQuery.ref}
-        noWrap
-        spacing="sm"
-      >
-        <Popover
-          trapFocus
-          opened={isGoToPageOpen}
-          position="bottom-start"
-          onClose={() => handlers.close()}
+    return (
+        <MotionFlex
+            ref={containerQuery.ref}
+            layout
+            align="center"
+            animate={{ y: 0 }}
+            exit={{ y: 50 }}
+            initial={{ y: 50 }}
+            justify="space-between"
+            p="1rem"
+            sx={{ borderTop: '1px solid var(--generic-border-color)' }}
         >
-          <Popover.Target>
-            <Button
-              radius="sm"
-              size="sm"
-              sx={{ height: '26px', padding: '0', width: '26px' }}
-              tooltip={{ label: 'Go to page' }}
-              variant="default"
-              onClick={() => handlers.toggle()}
+            <Text
+                $secondary
+                size="md"
             >
-              <RiHashtag size={15} />
-            </Button>
-          </Popover.Target>
-          <Popover.Dropdown>
-            <form onSubmit={handleGoSubmit}>
-              <Group>
-                <NumberInput
-                  {...goToForm.getInputProps('pageNumber')}
-                  hideControls={false}
-                  max={pagination.totalPages}
-                  min={1}
-                  width={70}
-                />
-                <Button
-                  type="submit"
-                  variant="filled"
+                {containerQuery.isMd ? (
+                    <>
+                        Showing <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
+                        <b>{pagination.totalItems}</b> items
+                    </>
+                ) : containerQuery.isSm ? (
+                    <>
+                        <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
+                        <b>{pagination.totalItems}</b> items
+                    </>
+                ) : (
+                    <>
+                        <b>{currentPageStartIndex}</b> - <b>{currentPageStopIndex}</b> of{' '}
+                        <b>{pagination.totalItems}</b>
+                    </>
+                )}
+            </Text>
+            <Group
+                ref={containerQuery.ref}
+                noWrap
+                spacing="sm"
+            >
+                <Popover
+                    trapFocus
+                    opened={isGoToPageOpen}
+                    position="bottom-start"
+                    onClose={() => handlers.close()}
                 >
-                  Go
-                </Button>
-              </Group>
-            </form>
-          </Popover.Dropdown>
-        </Popover>
-        <Pagination
-          noWrap
-          $hideDividers={!containerQuery.isSm}
-          boundaries={1}
-          radius="sm"
-          siblings={containerQuery.isMd ? 2 : containerQuery.isSm ? 1 : 0}
-          total={pagination.totalPages - 1}
-          value={pagination.currentPage + 1}
-          onChange={handlePagination}
-        />
-      </Group>
-    </MotionFlex>
-  );
+                    <Popover.Target>
+                        <Button
+                            radius="sm"
+                            size="sm"
+                            sx={{ height: '26px', padding: '0', width: '26px' }}
+                            tooltip={{ label: 'Go to page' }}
+                            variant="default"
+                            onClick={() => handlers.toggle()}
+                        >
+                            <RiHashtag size={15} />
+                        </Button>
+                    </Popover.Target>
+                    <Popover.Dropdown>
+                        <form onSubmit={handleGoSubmit}>
+                            <Group>
+                                <NumberInput
+                                    {...goToForm.getInputProps('pageNumber')}
+                                    hideControls={false}
+                                    max={pagination.totalPages}
+                                    min={1}
+                                    width={70}
+                                />
+                                <Button
+                                    type="submit"
+                                    variant="filled"
+                                >
+                                    Go
+                                </Button>
+                            </Group>
+                        </form>
+                    </Popover.Dropdown>
+                </Popover>
+                <Pagination
+                    noWrap
+                    $hideDividers={!containerQuery.isSm}
+                    boundaries={1}
+                    radius="sm"
+                    siblings={containerQuery.isMd ? 2 : containerQuery.isSm ? 1 : 0}
+                    total={pagination.totalPages - 1}
+                    value={pagination.currentPage + 1}
+                    onChange={handlePagination}
+                />
+            </Group>
+        </MotionFlex>
+    );
 };

src/renderer/components/virtual-table/utils.ts

@@ -1,36 +1,36 @@
 import { GridApi, RowNode } from '@ag-grid-community/core';
 
 export const getNodesByDiscNumber = (args: { api: GridApi; discNumber: number }) => {
-  const { api, discNumber } = args;
+    const { api, discNumber } = args;
 
-  const nodes: RowNode<any>[] = [];
-  api.forEachNode((node) => {
-    if (node.data.discNumber === discNumber) nodes.push(node);
-  });
+    const nodes: RowNode<any>[] = [];
+    api.forEachNode((node) => {
+        if (node.data.discNumber === discNumber) nodes.push(node);
+    });
 
-  return nodes;
+    return nodes;
 };
 
 export const setNodeSelection = (args: {
-  deselectAll?: boolean;
-  isSelected: boolean;
-  nodes: RowNode<any>[];
+    deselectAll?: boolean;
+    isSelected: boolean;
+    nodes: RowNode<any>[];
 }) => {
-  const { nodes, isSelected } = args;
+    const { nodes, isSelected } = args;
 
-  nodes.forEach((node) => {
-    node.setSelected(isSelected);
-  });
+    nodes.forEach((node) => {
+        node.setSelected(isSelected);
+    });
 };
 
 export const toggleNodeSelection = (args: { nodes: RowNode<any>[] }) => {
-  const { nodes } = args;
+    const { nodes } = args;
 
-  nodes.forEach((node) => {
-    if (node.isSelected()) {
-      node.setSelected(false);
-    } else {
-      node.setSelected(true);
-    }
-  });
+    nodes.forEach((node) => {
+        if (node.isSelected()) {
+            node.setSelected(false);
+        } else {
+            node.setSelected(true);
+        }
+    });
 };