Add files

src/renderer/components/accordion/index.tsx

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

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

@@ -0,0 +1,191 @@
+import { useImperativeHandle, forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import isElectron from 'is-electron';
+import type { ReactPlayerProps } from 'react-player';
+import ReactPlayer from 'react-player';
+import type { Song } from '/@/renderer/api/types';
+import {
+  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;
+}
+
+export type AudioPlayerProgress = {
+  loaded: number;
+  loadedSeconds: number;
+  played: number;
+  playedSeconds: number;
+};
+
+const getDuration = (ref: any) => {
+  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.player.audioDeviceId);
+
+    useImperativeHandle(ref, () => ({
+      get player1() {
+        return player1Ref?.current;
+      },
+      get player2() {
+        return player2Ref?.current;
+      },
+    }));
+
+    const handleOnEnded = () => {
+      autoNext();
+      setIsTransitioning(false);
+    };
+
+    useEffect(() => {
+      if (status === PlayerStatus.PLAYING) {
+        if (currentPlayer === 1) {
+          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 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 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]);
+
+    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

@@ -0,0 +1,131 @@
+/* eslint-disable no-nested-ternary */
+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>;
+}) => {
+  const { nextPlayerRef, currentTime, duration, isTransitioning, setIsTransitioning, isFlac } =
+    args;
+
+  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;
+};
+
+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;
+}) => {
+  const {
+    currentTime,
+    player,
+    currentPlayer,
+    currentPlayerRef,
+    nextPlayerRef,
+    fadeDuration,
+    fadeType,
+    duration,
+    volume,
+    isTransitioning,
+    setIsTransitioning,
+  } = args;
+
+  if (!isTransitioning || currentPlayer !== player) {
+    const shouldBeginTransition = currentTime >= duration - fadeDuration;
+
+    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;
+};

src/renderer/components/badge/index.tsx

@@ -0,0 +1,34 @@
+import type { BadgeProps as MantineBadgeProps } from '@mantine/core';
+import { createPolymorphicComponent } from '@mantine/core';
+import { Badge as MantineBadge } from '@mantine/core';
+import styled from 'styled-components';
+
+export type BadgeProps = MantineBadgeProps;
+
+const StyledBadge = styled(MantineBadge)<BadgeProps>`
+  .mantine-Badge-root {
+    color: var(--badge-fg);
+  }
+
+  .mantine-Badge-inner {
+    padding: 0 0.5rem;
+    color: var(--badge-fg);
+  }
+`;
+
+const _Badge = ({ children, ...props }: BadgeProps) => {
+  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

@@ -0,0 +1,290 @@
+import type { Ref } from 'react';
+import React, { useRef, useCallback, useState, forwardRef } from 'react';
+import type { ButtonProps as MantineButtonProps, TooltipProps } from '@mantine/core';
+import { Button as MantineButton, createPolymorphicComponent } from '@mantine/core';
+import { useTimeout } from '@mantine/hooks';
+import styled from 'styled-components';
+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'>;
+}
+
+interface StyledButtonProps extends ButtonProps {
+  ref: Ref<HTMLButtonElement>;
+}
+
+const StyledButton = styled(MantineButton)<StyledButtonProps>`
+  color: ${(props) => {
+    switch (props.variant) {
+      case 'default':
+        return 'var(--btn-default-fg)';
+      case 'filled':
+        return 'var(--btn-primary-fg)';
+      case 'subtle':
+        return 'var(--btn-subtle-fg)';
+      default:
+        return '';
+    }
+  }};
+  background: ${(props) => {
+    switch (props.variant) {
+      case 'default':
+        return 'var(--btn-default-bg)';
+      case 'filled':
+        return 'var(--btn-primary-bg)';
+      case 'subtle':
+        return 'var(--btn-subtle-bg)';
+      default:
+        return '';
+    }
+  }};
+  border: none;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+
+  svg {
+    transition: fill 0.2s ease-in-out;
+    fill: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg)';
+        case 'filled':
+          return 'var(--btn-primary-fg)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg)';
+        default:
+          return '';
+      }
+    }};
+  }
+
+  &:disabled {
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg)';
+        case 'filled':
+          return 'var(--btn-primary-fg)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg)';
+        default:
+          return '';
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg)';
+        case 'filled':
+          return 'var(--btn-primary-bg)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg)';
+        default:
+          return '';
+      }
+    }};
+
+    opacity: 0.6;
+  }
+
+  &:hover {
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-fg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg-hover)';
+        default:
+          return '';
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-bg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg-hover)';
+        default:
+          return '';
+      }
+    }};
+
+    svg {
+      fill: ${(props) => {
+        switch (props.variant) {
+          case 'default':
+            return 'var(--btn-default-fg-hover)';
+          case 'filled':
+            return 'var(--btn-primary-fg-hover)';
+          case 'subtle':
+            return 'var(--btn-subtle-fg-hover)';
+          default:
+            return '';
+        }
+      }};
+    }
+  }
+
+  &:focus-visible {
+    color: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-fg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-fg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-fg-hover)';
+        default:
+          return '';
+      }
+    }};
+    background: ${(props) => {
+      switch (props.variant) {
+        case 'default':
+          return 'var(--btn-default-bg-hover)';
+        case 'filled':
+          return 'var(--btn-primary-bg-hover)';
+        case 'subtle':
+          return 'var(--btn-subtle-bg-hover)';
+        default:
+          return '';
+      }
+    }};
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  & .mantine-Button-centerLoader {
+    display: none;
+  }
+
+  & .mantine-Button-leftIcon {
+    display: flex;
+    margin-right: 0.5rem;
+  }
+
+  .mantine-Button-rightIcon {
+    display: flex;
+    margin-left: 0.5rem;
+  }
+`;
+
+const ButtonChildWrapper = styled.span<{ $loading?: boolean }>`
+  color: ${(props) => props.$loading && 'transparent !important'};
+`;
+
+const SpinnerWrapper = styled.div`
+  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>
+      );
+    }
+
+    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,
+};
+
+interface HoldButtonProps extends ButtonProps {
+  timeoutProps: {
+    callback: () => void;
+    duration: number;
+  };
+}
+
+export const TimeoutButton = ({ timeoutProps, ...props }: HoldButtonProps) => {
+  const [_timeoutRemaining, 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 { start, clear } = useTimeout(callback, timeoutProps.duration);
+
+  const startTimeout = useCallback(() => {
+    if (isRunning) {
+      clearInterval(intervalRef.current);
+      setIsRunning(false);
+      clear();
+    } else {
+      setIsRunning(true);
+      start();
+
+      const intervalId = window.setInterval(() => {
+        setTimeoutRemaining((prev) => prev - 100);
+      }, 100);
+
+      intervalRef.current = intervalId;
+    }
+  }, [clear, isRunning, start]);
+
+  return (
+    <_Button
+      sx={{ color: 'var(--danger-color)' }}
+      onClick={startTimeout}
+      {...props}
+    >
+      {isRunning ? 'Cancel' : props.children}
+    </_Button>
+  );
+};

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

@@ -0,0 +1,304 @@
+import React, { useCallback } from 'react';
+import { Center } from '@mantine/core';
+import { RiAlbumFill } from 'react-icons/ri';
+import { generatePath, useNavigate } from 'react-router';
+import { Link } from 'react-router-dom';
+import { SimpleImg } from 'react-simple-img';
+import styled from 'styled-components';
+import { Text } from '/@/renderer/components/text';
+import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import CardControls from '/@/renderer/components/card/card-controls';
+
+const CardWrapper = styled.div<{
+  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;
+
+  &:hover {
+    background: var(--card-default-bg-hover);
+  }
+
+  &: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);
+`;
+
+const ImageSection = styled.div`
+  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;
+  }
+`;
+
+const Image = styled(SimpleImg)`
+  border-radius: var(--card-default-radius);
+  box-shadow: 2px 2px 10px 10px 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;
+`;
+
+const DetailSection = styled.div`
+  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;
+`;
+
+interface BaseGridCardProps {
+  controls: {
+    cardRows: CardRow[];
+    itemType: LibraryItem;
+    playButtonBehavior: Play;
+    route: CardRoute;
+  };
+  data: any;
+  loading?: boolean;
+  size: number;
+}
+
+export const AlbumCard = ({ loading, size, data, controls }: BaseGridCardProps) => {
+  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]);
+
+  if (!loading) {
+    return (
+      <CardWrapper
+        link
+        onClick={handleNavigate}
+      >
+        <StyledCard>
+          <ImageSection>
+            {data?.imageUrl ? (
+              <Image
+                animationDuration={0.3}
+                height={size}
+                imgStyle={{ objectFit: 'cover' }}
+                placeholder="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
+                itemData={data}
+                itemType={itemType}
+              />
+            </ControlsContainer>
+          </ImageSection>
+          <DetailSection>
+            {cardRows.map((row: CardRow, 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
+                            sx={{
+                              display: 'inline-block',
+                              padding: '0 2px 0 1px',
+                            }}
+                          >
+                            ,
+                          </Text>
+                        )}{' '}
+                        <Text
+                          $link
+                          $noSelect
+                          $secondary={index > 0}
+                          component={Link}
+                          overflow="hidden"
+                          size={index > 0 ? 'xs' : 'md'}
+                          to={generatePath(
+                            row.route!.route,
+                            row.route!.slugs?.reduce((acc, slug) => {
+                              return {
+                                ...acc,
+                                [slug.slugProperty]: data[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 ? 'xs' : '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 ? 'xs' : 'md'}
+                    >
+                      {data && data[row.property]}
+                    </Text>
+                  )}
+                </Row>
+              );
+            })}
+          </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, 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

@@ -0,0 +1,196 @@
+import type { MouseEvent } from 'react';
+import React from 'react';
+import type { UnstyledButtonProps } from '@mantine/core';
+import { Group } from '@mantine/core';
+import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/ri';
+import styled from 'styled-components';
+import { _Button } from '/@/renderer/components/button';
+import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
+import type { LibraryItem } from '/@/renderer/types';
+import { Play } from '/@/renderer/types';
+import { useSettingsStore } from '/@/renderer/store/settings.store';
+
+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;
+
+  &:hover {
+    opacity: 1;
+    scale: 1.1;
+  }
+
+  &:active {
+    opacity: 1;
+    scale: 1;
+  }
+
+  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;
+
+  &:hover {
+    opacity: 1;
+    scale: 1.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%;
+`;
+
+const ControlsRow = styled.div`
+  width: 100%;
+  height: calc(100% / 3);
+`;
+
+// const TopControls = styled(ControlsRow)`
+//   display: flex;
+//   align-items: flex-start;
+//   justify-content: space-between;
+//   padding: 0.5rem;
+// `;
+
+// const CenterControls = styled(ControlsRow)`
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   padding: 0.5rem;
+// `;
+
+const BottomControls = styled(ControlsRow)`
+  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)'};
+  }
+`;
+
+const PLAY_TYPES = [
+  {
+    label: 'Play',
+    play: Play.NOW,
+  },
+  {
+    label: 'Play last',
+    play: Play.LAST,
+  },
+  {
+    label: 'Play next',
+    play: Play.NEXT,
+  },
+];
+
+export const CardControls = ({ itemData, itemType }: { itemData: any; itemType: LibraryItem }) => {
+  const playButtonBehavior = useSettingsStore((state) => state.player.playButtonBehavior);
+
+  const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
+    e.preventDefault();
+    e.stopPropagation();
+    import('/@/renderer/features/player/utils/handle-playqueue-add').then((fn) => {
+      fn.handlePlayQueueAdd({
+        byItemType: {
+          id: itemData.id,
+          type: itemType,
+        },
+        play: playType || playButtonBehavior,
+      });
+    });
+  };
+
+  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>
+          <DropdownMenu
+            withinPortal
+            position="bottom-start"
+          >
+            <DropdownMenu.Target>
+              <SecondaryButton
+                p={5}
+                sx={{ svg: { fill: 'white !important' } }}
+                variant="subtle"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              >
+                <RiMore2Fill
+                  color="white"
+                  size={20}
+                />
+              </SecondaryButton>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
+                <DropdownMenu.Item
+                  key={`playtype-${type.play}`}
+                  onClick={(e: MouseEvent<HTMLButtonElement>) => handlePlay(e, type.play)}
+                >
+                  {type.label}
+                </DropdownMenu.Item>
+              ))}
+              <DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Refresh metadata</DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Group>
+      </BottomControls>
+    </GridCardControlsContainer>
+  );
+};
+
+export default CardControls;

src/renderer/components/card/index.tsx

@@ -0,0 +1 @@
+export * from './album-card';

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

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

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

@@ -0,0 +1,116 @@
+import type {
+  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 { RiArrowLeftLine } from 'react-icons/ri';
+import styled from 'styled-components';
+
+type MenuProps = MantineMenuProps;
+type MenuLabelProps = MantineMenuLabelProps;
+interface MenuItemProps extends MantineMenuItemProps {
+  $isActive?: boolean;
+  children: React.ReactNode;
+}
+type MenuDividerProps = MantineMenuDividerProps;
+type MenuDropdownProps = MantineMenuDropdownProps;
+
+const StyledMenu = styled(MantineMenu)<MenuProps>``;
+
+const StyledMenuLabel = styled(MantineMenu.Label)<MenuLabelProps>`
+  font-family: var(--content-font-family);
+`;
+
+const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
+  padding: 0.8rem;
+  font-size: 0.9em;
+  font-family: var(--content-font-family);
+
+  &:disabled {
+    opacity: 0.6;
+  }
+
+  &:hover {
+    background-color: var(--dropdown-menu-bg-hover);
+  }
+
+  & .mantine-Menu-itemIcon {
+    margin-right: 0.5rem;
+  }
+
+  & .mantine-Menu-itemLabel {
+    color: ${({ $isActive }) => ($isActive ? 'var(--primary-color)' : 'var(--dropdown-menu-fg)')};
+    font-weight: 500;
+    font-size: 1em;
+  }
+
+  & .mantine-Menu-itemRightSection {
+    display: flex;
+    margin-left: 2rem !important;
+    color: ${({ $isActive }) => ($isActive ? 'var(--primary-color)' : 'var(--dropdown-menu-fg)')};
+  }
+`;
+
+const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
+  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%));
+`;
+
+const StyledMenuDivider = styled(MantineMenu.Divider)`
+  margin: 0.3rem 0;
+`;
+
+export const DropdownMenu = ({ children, ...props }: MenuProps) => {
+  return (
+    <StyledMenu
+      withinPortal
+      radius="sm"
+      styles={{
+        dropdown: {
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
+        },
+      }}
+      transition="scale"
+      {...props}
+    >
+      {children}
+    </StyledMenu>
+  );
+};
+
+const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
+  return <StyledMenuLabel {...props}>{children}</StyledMenuLabel>;
+};
+
+const pMenuItem = ({ $isActive, children, ...props }: MenuItemProps) => {
+  return (
+    <StyledMenuItem
+      $isActive={$isActive}
+      rightSection={$isActive && <RiArrowLeftLine />}
+      {...props}
+    >
+      {children}
+    </StyledMenuItem>
+  );
+};
+
+const MenuDropdown = ({ children, ...props }: MenuDropdownProps) => {
+  return <StyledMenuDropdown {...props}>{children}</StyledMenuDropdown>;
+};
+
+const MenuItem = createPolymorphicComponent<'button', MenuItemProps>(pMenuItem);
+
+const MenuDivider = ({ ...props }: MenuDividerProps) => {
+  return <StyledMenuDivider {...props} />;
+};
+
+DropdownMenu.Label = MenuLabel;
+DropdownMenu.Item = MenuItem;
+DropdownMenu.Target = MantineMenu.Target;
+DropdownMenu.Dropdown = MenuDropdown;
+DropdownMenu.Divider = MenuDivider;

src/renderer/components/dropzone/index.tsx

@@ -0,0 +1,33 @@
+import type { DropzoneProps as MantineDropzoneProps } from '@mantine/dropzone';
+import { Dropzone as MantineDropzone } from '@mantine/dropzone';
+import styled from 'styled-components';
+
+export type DropzoneProps = MantineDropzoneProps;
+
+const StyledDropzone = styled(MantineDropzone)`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--input-bg);
+  border-radius: 5px;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    background: var(--input-bg);
+    opacity: 1;
+  }
+
+  & .mantine-Dropzone-inner {
+    display: flex;
+  }
+`;
+
+export const Dropzone = ({ children, ...props }: DropzoneProps) => {
+  return <StyledDropzone {...props}>{children}</StyledDropzone>;
+};
+
+Dropzone.Accept = StyledDropzone.Accept;
+Dropzone.Idle = StyledDropzone.Idle;
+Dropzone.Reject = StyledDropzone.Reject;

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

@@ -0,0 +1,206 @@
+import type { MouseEvent } from 'react';
+import { useState } from 'react';
+import { Group, Image, Stack } from '@mantine/core';
+import type { Variants } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import { Link, generatePath } from 'react-router-dom';
+import styled from 'styled-components';
+import type { Album } from '/@/renderer/api/types';
+import { Button } from '/@/renderer/components/button';
+import { TextTitle } from '/@/renderer/components/text-title';
+import { Badge } from '/@/renderer/components/badge';
+import { AppRoute } from '/@/renderer/router/routes';
+
+const Carousel = styled(motion.div)`
+  position: relative;
+  padding: 2rem;
+  overflow: hidden;
+  background: linear-gradient(180deg, var(--main-bg), rgba(25, 26, 28, 60%));
+`;
+
+const Grid = styled.div`
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-template-areas: 'image info';
+  grid-template-rows: 1fr;
+  grid-template-columns: 150px 1fr;
+  gap: 0.5rem;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+`;
+
+const ImageColumn = styled.div`
+  z-index: 15;
+  display: flex;
+  grid-area: image;
+`;
+
+const InfoColumn = styled.div`
+  z-index: 15;
+  display: flex;
+  grid-area: info;
+  width: 100%;
+`;
+
+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;
+`;
+
+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));
+`;
+
+const Wrapper = styled(Link)`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const TitleWrapper = styled.div`
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -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,
+  },
+};
+
+interface FeatureCarouselProps {
+  data: Album[] | undefined;
+  loading?: boolean;
+}
+
+export const FeatureCarousel = ({ data }: FeatureCarouselProps) => {
+  const [itemIndex, setItemIndex] = useState(0);
+  const [direction, setDirection] = useState(0);
+
+  const currentItem = data?.[itemIndex];
+
+  const handleNext = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setDirection(1);
+    setItemIndex((prev) => prev + 1);
+  };
+
+  const handlePrevious = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    setDirection(-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={150}
+                  placeholder="var(--card-default-bg)"
+                  radius="sm"
+                  src={data[itemIndex]?.imageUrl}
+                  sx={{ objectFit: 'cover' }}
+                  width={150}
+                />
+              </ImageColumn>
+              <InfoColumn>
+                <Stack sx={{ width: '100%' }}>
+                  <TitleWrapper>
+                    <TextTitle fw="bold">{currentItem?.name}</TextTitle>
+                  </TitleWrapper>
+                  <TitleWrapper>
+                    {currentItem?.albumArtists.map((artist) => (
+                      <TextTitle
+                        fw="600"
+                        order={3}
+                      >
+                        {artist.name}
+                      </TextTitle>
+                    ))}
+                  </TitleWrapper>
+                  <Group>
+                    {currentItem?.genres?.map((genre) => (
+                      <Badge key={`carousel-genre-${genre.id}`}>{genre.name}</Badge>
+                    ))}
+                    <Badge>{currentItem?.releaseYear}</Badge>
+                    <Badge>{currentItem?.songCount} tracks</Badge>
+                  </Group>
+                </Stack>
+              </InfoColumn>
+            </Grid>
+            <BackgroundImage
+              draggable="false"
+              src={currentItem?.imageUrl || undefined}
+            />
+            <BackgroundImageOverlay />
+          </Carousel>
+        )}
+      </AnimatePresence>
+      <Group
+        spacing="xs"
+        sx={{ bottom: 0, position: 'absolute', right: 0, zIndex: 20 }}
+      >
+        <Button
+          disabled={itemIndex === 0}
+          px="lg"
+          radius={100}
+          variant="subtle"
+          onClick={handlePrevious}
+        >
+          <RiArrowLeftSLine size={15} />
+        </Button>
+        <Button
+          disabled={itemIndex === (data?.length || 1) - 1}
+          px="lg"
+          radius={100}
+          variant="subtle"
+          onClick={handleNext}
+        >
+          <RiArrowRightSLine size={15} />
+        </Button>
+      </Group>
+    </Wrapper>
+  );
+};

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

@@ -0,0 +1,210 @@
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { Group, Stack } from '@mantine/core';
+import type { Variants } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
+import { AlbumCard, Button } from '/@/renderer/components';
+import { AppRoute } from '/@/renderer/router/routes';
+import type { CardRow } from '/@/renderer/types';
+import { LibraryItem, Play } from '/@/renderer/types';
+import styled from 'styled-components';
+
+interface GridCarouselProps {
+  cardRows: CardRow[];
+  children: React.ReactElement;
+  containerWidth: number;
+  data: any[] | undefined;
+  loading?: boolean;
+  pagination?: {
+    handleNextPage?: () => void;
+    handlePreviousPage?: () => void;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+    itemsPerPage?: number;
+  };
+  uniqueId: string;
+}
+
+const GridCarouselContext = createContext<any>(null);
+
+export const GridCarousel = ({
+  data,
+  loading,
+  cardRows,
+  pagination,
+  children,
+  containerWidth,
+  uniqueId,
+}: GridCarouselProps) => {
+  const [direction, setDirection] = useState(0);
+
+  const gridHeight = useMemo(
+    () => (containerWidth * 1.2 - 36) / (pagination?.itemsPerPage || 4),
+    [containerWidth, pagination?.itemsPerPage],
+  );
+
+  const imageSize = useMemo(() => gridHeight * 0.66, [gridHeight]);
+
+  const providerValue = useMemo(
+    () => ({
+      cardRows,
+      data,
+      direction,
+      gridHeight,
+      imageSize,
+      loading,
+      pagination,
+      setDirection,
+      uniqueId,
+    }),
+    [cardRows, data, direction, gridHeight, imageSize, loading, pagination, uniqueId],
+  );
+
+  return (
+    <GridCarouselContext.Provider value={providerValue}>
+      <Stack>
+        {children}
+        {data && (
+          <Carousel
+            cardRows={cardRows}
+            data={data}
+          />
+        )}
+      </Stack>
+    </GridCarouselContext.Provider>
+  );
+};
+
+const variants: Variants = {
+  animate: (custom: { direction: number; loading: boolean }) => {
+    return {
+      opacity: custom.loading ? 0.5 : 1,
+      scale: custom.loading ? 0.95 : 1,
+      transition: {
+        opacity: { duration: 0.2 },
+        x: { damping: 30, stiffness: 300, type: 'spring' },
+      },
+      x: 0,
+    };
+  },
+  exit: (custom: { direction: number; loading: boolean }) => {
+    return {
+      opacity: 0,
+      transition: {
+        opacity: { duration: 0.2 },
+        x: { damping: 30, stiffness: 300, type: 'spring' },
+      },
+      x: custom.direction > 0 ? -1000 : 1000,
+    };
+  },
+  initial: (custom: { direction: number; loading: boolean }) => {
+    return {
+      opacity: 0,
+      x: custom.direction > 0 ? 1000 : -1000,
+    };
+  },
+};
+
+const GridContainer = styled(motion.div)<{ height: number; itemsPerPage: number }>`
+  display: grid;
+  grid-auto-rows: 0;
+  grid-gap: 18px;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(${(props) => props.itemsPerPage || 4}, minmax(0, 1fr));
+  height: ${(props) => props.height}px;
+  overflow: hidden;
+`;
+
+const Wrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const Carousel = ({ data, cardRows }: any) => {
+  const { loading, pagination, gridHeight, imageSize, direction, uniqueId } =
+    useContext(GridCarouselContext);
+
+  return (
+    <Wrapper>
+      <AnimatePresence
+        custom={{ direction, loading }}
+        initial={false}
+        mode="popLayout"
+      >
+        <GridContainer
+          key={`carousel-${uniqueId}-${data[0].id}`}
+          animate="animate"
+          custom={{ direction, loading }}
+          exit="exit"
+          height={gridHeight}
+          initial="initial"
+          itemsPerPage={pagination.itemsPerPage}
+          variants={variants}
+        >
+          {data?.map((item: any, index: number) => (
+            <AlbumCard
+              key={`card-${uniqueId}-${index}`}
+              controls={{
+                cardRows,
+                itemType: LibraryItem.ALBUM,
+                playButtonBehavior: Play.NOW,
+                route: {
+                  route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+                  slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
+                },
+              }}
+              data={item}
+              size={imageSize}
+            />
+          ))}
+        </GridContainer>
+      </AnimatePresence>
+    </Wrapper>
+  );
+};
+
+interface TitleProps {
+  children?: React.ReactNode;
+}
+
+const Title = ({ children }: TitleProps) => {
+  const { pagination, setDirection } = useContext(GridCarouselContext);
+
+  const handleNextPage = useCallback(() => {
+    setDirection(1);
+    pagination?.handleNextPage?.();
+  }, [pagination, setDirection]);
+
+  const handlePreviousPage = useCallback(() => {
+    setDirection(-1);
+    pagination?.handlePreviousPage?.();
+  }, [pagination, setDirection]);
+
+  return (
+    <Group position="apart">
+      {children}
+      <Group>
+        <Button
+          compact
+          disabled={!pagination?.hasPreviousPage}
+          variant="default"
+          onClick={handlePreviousPage}
+        >
+          <RiArrowLeftSLine size={15} />
+        </Button>
+        <Button
+          compact
+          variant="default"
+          onClick={handleNextPage}
+        >
+          <RiArrowRightSLine size={15} />
+        </Button>
+      </Group>
+    </Group>
+  );
+};
+
+GridCarousel.Title = Title;
+GridCarousel.Carousel = Carousel;

src/renderer/components/index.ts

@@ -0,0 +1,29 @@
+export * from './tooltip';
+export * from './audio-player';
+export * from './text';
+export * from './button';
+export * from './virtual-grid';
+export * from './modal';
+export * from './input';
+export * from './segmented-control';
+export * from './dropdown-menu';
+export * from './toast';
+export * from './switch';
+export * from './popover';
+export * from './select';
+export * from './date-picker';
+export * from './scroll-area';
+export * from './paper';
+export * from './tabs';
+export * from './slider';
+export * from './accordion';
+export * from './dropzone';
+export * from './spinner';
+export * from './virtual-table';
+export * from './skeleton';
+export * from './page-header';
+export * from './text-title';
+export * from './grid-carousel';
+export * from './card';
+export * from './feature-carousel';
+export * from './badge';

src/renderer/components/input/index.tsx

@@ -0,0 +1,364 @@
+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,
+} from '@mantine/core';
+import {
+  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;
+}
+
+interface NumberInputProps extends MantineNumberInputProps {
+  children?: React.ReactNode;
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+interface PasswordInputProps extends MantinePasswordInputProps {
+  children?: React.ReactNode;
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+interface FileInputProps extends MantineFileInputProps {
+  children?: React.ReactNode;
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+interface JsonInputProps extends MantineJsonInputProps {
+  children?: React.ReactNode;
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+interface TextareaProps extends MantineTextareaProps {
+  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-Input-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-TextInput-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-TextInput-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-TextInput-disabled {
+    opacity: 0.6;
+  }
+`;
+
+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-rightSection {
+    color: var(--input-placeholder-fg);
+    background: var(--input-bg);
+  } */
+
+  & .mantine-NumberInput-controlUp {
+    svg {
+      color: white;
+      fill: white;
+    }
+  }
+
+  & .mantine-Input-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-NumberInput-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-NumberInput-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-NumberInput-disabled {
+    opacity: 0.6;
+  }
+`;
+
+const StyledPasswordInput = styled(MantinePasswordInput)<PasswordInputProps>`
+  & .mantine-PasswordInput-input {
+    color: var(--input-fg);
+    background: var(--input-bg);
+
+    &::placeholder {
+      color: var(--input-placeholder-fg);
+    }
+  }
+
+  & .mantine-PasswordInput-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-PasswordInput-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-PasswordInput-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-PasswordInput-disabled {
+    opacity: 0.6;
+  }
+`;
+
+const StyledFileInput = styled(MantineFileInput)<FileInputProps>`
+  & .mantine-FileInput-input {
+    color: var(--input-fg);
+    background: var(--input-bg);
+
+    &::placeholder {
+      color: var(--input-placeholder-fg);
+    }
+  }
+
+  & .mantine-FileInput-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-FileInput-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-FileInput-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-FileInput-disabled {
+    opacity: 0.6;
+  }
+`;
+
+const StyledJsonInput = styled(MantineJsonInput)<JsonInputProps>`
+  & .mantine-JsonInput-input {
+    color: var(--input-fg);
+    background: var(--input-bg);
+
+    &::placeholder {
+      color: var(--input-placeholder-fg);
+    }
+  }
+
+  & .mantine-JsonInput-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-JsonInput-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-JsonInput-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-JsonInput-disabled {
+    opacity: 0.6;
+  }
+`;
+
+const StyledTextarea = styled(MantineTextarea)<TextareaProps>`
+  & .mantine-Textarea-input {
+    color: var(--input-fg);
+    background: var(--input-bg);
+
+    &::placeholder {
+      color: var(--input-placeholder-fg);
+    }
+  }
+
+  & .mantine-Textarea-icon {
+    color: var(--input-placeholder-fg);
+  }
+
+  & .mantine-Textarea-required {
+    color: var(--secondary-color);
+  }
+
+  & .mantine-Textarea-label {
+    font-family: var(--label-font-faimly);
+  }
+
+  & .mantine-Textarea-disabled {
+    opacity: 0.6;
+  }
+`;
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ 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>
+    );
+  },
+);
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ 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>
+    );
+  },
+);
+
+export const JsonInput = forwardRef<HTMLTextAreaElement, JsonInputProps>(
+  ({ 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>
+    );
+  },
+);
+
+TextInput.defaultProps = {
+  children: undefined,
+  maxWidth: undefined,
+  width: undefined,
+};
+
+NumberInput.defaultProps = {
+  children: undefined,
+  maxWidth: undefined,
+  width: undefined,
+};
+
+PasswordInput.defaultProps = {
+  children: undefined,
+  maxWidth: undefined,
+  width: undefined,
+};
+
+FileInput.defaultProps = {
+  children: undefined,
+  maxWidth: undefined,
+  width: undefined,
+};
+
+JsonInput.defaultProps = {
+  children: undefined,
+  maxWidth: undefined,
+  width: undefined,
+};
+
+Textarea.defaultProps = {
+  children: undefined,
+  maxWidth: undefined,
+  width: undefined,
+};

src/renderer/components/modal/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { ModalProps as MantineModalProps } from '@mantine/core';
+import { Modal as MantineModal } from '@mantine/core';
+import type { ContextModalProps } from '@mantine/modals';
+
+export interface ModalProps extends Omit<MantineModalProps, 'onClose'> {
+  children?: React.ReactNode;
+  handlers: {
+    close: () => void;
+    open: () => void;
+    toggle: () => void;
+  };
+}
+
+export const Modal = ({ children, handlers, ...rest }: ModalProps) => {
+  return (
+    <MantineModal
+      overlayBlur={2}
+      overlayOpacity={0.2}
+      {...rest}
+      onClose={handlers.close}
+    >
+      {children}
+    </MantineModal>
+  );
+};
+
+export type ContextModalVars = {
+  context: ContextModalProps['context'];
+  id: ContextModalProps['id'];
+};
+
+export const BaseContextModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<{
+  modalBody: (vars: ContextModalVars) => React.ReactNode;
+}>) => <>{innerProps.modalBody({ context, id })}</>;
+
+Modal.defaultProps = {
+  children: undefined,
+};

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

@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion';
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { useShouldPadTitlebar } from '/@/renderer/hooks';
+
+const Container = styled(motion.div)<{ $useOpacity?: boolean; height?: string }>`
+  z-index: 100;
+  width: 100%;
+  height: ${(props) => props.height || '55px'};
+  opacity: ${(props) => props.$useOpacity && 'var(--header-opacity)'};
+  transition: opacity 0.3s ease-in-out;
+`;
+
+const Header = styled(motion.div)<{ $padRight?: boolean }>`
+  height: 100%;
+  margin-right: ${(props) => props.$padRight && '170px'};
+  padding: 1rem;
+  -webkit-app-region: drag;
+
+  button {
+    -webkit-app-region: no-drag;
+  }
+`;
+
+interface PageHeaderProps {
+  backgroundColor?: string;
+  children?: React.ReactNode;
+  height?: string;
+  useOpacity?: boolean;
+}
+
+export const PageHeader = ({ height, backgroundColor, useOpacity, children }: PageHeaderProps) => {
+  const ref = useRef(null);
+  const padRight = useShouldPadTitlebar();
+
+  useEffect(() => {
+    const rootElement = document.querySelector(':root') as HTMLElement;
+    rootElement?.style?.setProperty('--header-opacity', '0');
+  }, []);
+
+  return (
+    <Container
+      ref={ref}
+      $useOpacity={useOpacity}
+      animate={{
+        backgroundColor,
+        transition: { duration: 1.5 },
+      }}
+      height={height}
+    >
+      <Header $padRight={padRight}>{children}</Header>
+    </Container>
+  );
+};

src/renderer/components/paper/index.tsx

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

src/renderer/components/popover/index.tsx

@@ -0,0 +1,38 @@
+import type {
+  PopoverProps as MantinePopoverProps,
+  PopoverDropdownProps as MantinePopoverDropdownProps,
+} from '@mantine/core';
+import { Popover as MantinePopover } from '@mantine/core';
+import styled from 'styled-components';
+
+type PopoverProps = MantinePopoverProps;
+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);
+`;
+
+export const Popover = ({ children, ...props }: PopoverProps) => {
+  return (
+    <StyledPopover
+      withArrow
+      withinPortal
+      styles={{
+        dropdown: {
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
+        },
+      }}
+      {...props}
+    >
+      {children}
+    </StyledPopover>
+  );
+};
+
+Popover.Target = MantinePopover.Target;
+Popover.Dropdown = StyledDropdown;

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

@@ -0,0 +1,31 @@
+import type { ScrollAreaProps as MantineScrollAreaProps } from '@mantine/core';
+import { ScrollArea as MantineScrollArea } from '@mantine/core';
+import styled from 'styled-components';
+
+interface ScrollAreaProps extends MantineScrollAreaProps {
+  children: React.ReactNode;
+}
+
+const StyledScrollArea = styled(MantineScrollArea)`
+  & .mantine-ScrollArea-thumb {
+    background: var(--scrollbar-thumb-bg);
+    border-radius: 0;
+  }
+
+  & .mantine-ScrollArea-scrollbar {
+    width: 12px;
+    padding: 0;
+    background: var(--scrollbar-track-bg);
+  }
+`;
+
+export const ScrollArea = ({ children, ...props }: ScrollAreaProps) => {
+  return (
+    <StyledScrollArea
+      offsetScrollbars
+      {...props}
+    >
+      {children}
+    </StyledScrollArea>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import type { SegmentedControlProps as MantineSegmentedControlProps } from '@mantine/core';
+import { SegmentedControl as MantineSegmentedControl } from '@mantine/core';
+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);
+  }
+
+  background-color: var(--input-bg);
+
+  & .mantine-SegmentedControl-disabled {
+    opacity: 0.6;
+  }
+
+  & .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}
+      />
+    );
+  },
+);

src/renderer/components/select/index.tsx

@@ -0,0 +1,144 @@
+import type {
+  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;
+}
+
+interface MultiSelectProps extends MantineMultiSelectProps {
+  maxWidth?: number | string;
+  width?: number | string;
+}
+
+const StyledSelect = styled(MantineSelect)`
+  & [data-selected='true'] {
+    background: var(--input-bg);
+  }
+
+  & .mantine-Select-disabled {
+    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 }}
+      transition="pop"
+      transitionDuration={100}
+      {...props}
+    />
+  );
+};
+
+const StyledMultiSelect = styled(MantineMultiSelect)`
+  & [data-selected='true'] {
+    background: var(--input-select-bg);
+  }
+
+  & .mantine-MultiSelect-disabled {
+    background: var(--input-select-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 }}
+      transition="pop"
+      transitionDuration={100}
+      {...props}
+    />
+  );
+};
+
+Select.defaultProps = {
+  maxWidth: undefined,
+  width: undefined,
+};
+
+MultiSelect.defaultProps = {
+  maxWidth: undefined,
+  width: undefined,
+};

src/renderer/components/skeleton/index.tsx

@@ -0,0 +1,39 @@
+import type { SkeletonProps as MantineSkeletonProps } from '@mantine/core';
+import { Skeleton as MantineSkeleton } from '@mantine/core';
+import styled from 'styled-components';
+
+const StyledSkeleton = styled(MantineSkeleton)`
+  @keyframes run {
+    0% {
+      left: 0;
+      transform: translateX(-100%);
+    }
+
+    80% {
+      transform: translateX(100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  &::before {
+    background: var(--skeleton-bg);
+  }
+
+  &::after {
+    position: absolute;
+    background: linear-gradient(90deg, transparent, var(--skeleton-bg), transparent);
+    transform: translateX(-100%);
+    animation-name: run;
+    animation-duration: 1.5s;
+    animation-timing-function: linear;
+    content: '';
+    inset: 0;
+  }
+`;
+
+export const Skeleton = ({ ...props }: MantineSkeletonProps) => {
+  return <StyledSkeleton {...props} />;
+};

src/renderer/components/slider/index.tsx

@@ -0,0 +1,30 @@
+import type { SliderProps as MantineSliderProps } from '@mantine/core';
+import { Slider as MantineSlider } from '@mantine/core';
+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-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);
+  }
+`;
+
+export const Slider = ({ ...props }: SliderProps) => {
+  return <StyledSlider {...props} />;
+};

src/renderer/components/spinner/index.tsx

@@ -0,0 +1,23 @@
+import type { IconType } from 'react-icons';
+import { RiLoader5Fill } from 'react-icons/ri';
+import styled from 'styled-components';
+import { rotating } from '/@/renderer/styles';
+
+interface SpinnerProps extends IconType {
+  color?: string;
+  size?: number;
+}
+
+export const SpinnerIcon = styled(RiLoader5Fill)`
+  ${rotating}
+  animation: rotating 1s ease-in-out infinite;
+`;
+
+export const Spinner = ({ ...props }: SpinnerProps) => {
+  return <SpinnerIcon {...props} />;
+};
+
+Spinner.defaultProps = {
+  color: undefined,
+  size: 15,
+};

src/renderer/components/switch/index.tsx

@@ -0,0 +1,27 @@
+import type { SwitchProps as MantineSwitchProps } from '@mantine/core';
+import { Switch as MantineSwitch } from '@mantine/core';
+import styled from 'styled-components';
+
+type SwitchProps = MantineSwitchProps;
+
+const StyledSwitch = styled(MantineSwitch)`
+  display: flex;
+
+  & .mantine-Switch-track {
+    background-color: var(--switch-track-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} />;
+};

src/renderer/components/tabs/index.tsx

@@ -0,0 +1,52 @@
+import type { TabsProps as MantineTabsProps } from '@mantine/core';
+import { Tabs as MantineTabs } from '@mantine/core';
+import styled from 'styled-components';
+
+type TabsProps = MantineTabsProps;
+
+const StyledTabs = styled(MantineTabs)`
+  height: 100%;
+
+  & .mantine-Tabs-tabsList {
+    padding-right: 1rem;
+  }
+
+  &.mantine-Tabs-tab {
+    background-color: var(--main-bg);
+  }
+
+  & .mantine-Tabs-panel {
+    padding: 0 1rem;
+  }
+
+  button {
+    padding: 1rem;
+    color: var(--btn-subtle-fg);
+
+    &: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-primary-fg);
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+
+    &:hover {
+      background: var(--btn-primary-bg-hover);
+      border-color: var(--primary-color);
+    }
+  }
+`;
+
+export const Tabs = ({ children, ...props }: TabsProps) => {
+  return <StyledTabs {...props}>{children}</StyledTabs>;
+};
+
+Tabs.List = StyledTabs.List;
+Tabs.Panel = StyledTabs.Panel;
+Tabs.Tab = StyledTabs.Tab;

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

@@ -0,0 +1,55 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { TitleProps as MantineTitleProps } from '@mantine/core';
+import { createPolymorphicComponent, Title as MantineHeader } from '@mantine/core';
+import styled from 'styled-components';
+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;
+}
+
+const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
+  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' && textEllipsis}
+
+  &: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>
+  );
+};
+
+export const TextTitle = createPolymorphicComponent<'div', TextTitleProps>(_TextTitle);
+
+_TextTitle.defaultProps = {
+  $link: false,
+  $noSelect: false,
+  $secondary: false,
+  font: undefined,
+  overflow: 'visible',
+  to: '',
+  weight: 400,
+};

src/renderer/components/text/index.tsx

@@ -0,0 +1,59 @@
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { TextProps as MantineTextProps } from '@mantine/core';
+import { createPolymorphicComponent, Text as MantineText } from '@mantine/core';
+import styled from 'styled-components';
+import type { Font } from '/@/renderer/styles';
+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;
+}
+
+const StyledText = styled(MantineText)<TextProps>`
+  color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
+  font-family: ${(props) => props.font};
+  cursor: ${(props) => props.$link && 'cursor'};
+  transition: color 0.2s ease-in-out;
+  user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
+  ${(props) => props.overflow === 'hidden' && textEllipsis}
+
+  &:hover {
+    color: ${(props) => props.$link && 'var(--main-fg)'};
+    text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
+  }
+`;
+
+const _Text = ({ children, $secondary, overflow, font, $noSelect, ...rest }: TextProps) => {
+  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,
+};

src/renderer/components/toast/index.tsx

@@ -0,0 +1,71 @@
+import type { NotificationProps as MantineNotificationProps } from '@mantine/notifications';
+import {
+  showNotification,
+  updateNotification,
+  hideNotification,
+  cleanNotifications,
+  cleanNotificationsQueue,
+} from '@mantine/notifications';
+
+interface NotificationProps extends MantineNotificationProps {
+  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 defaultTitle =
+    type === 'success'
+      ? 'Success'
+      : type === 'warning'
+      ? 'Warning'
+      : type === 'error'
+      ? 'Error'
+      : 'Info';
+
+  const defaultDuration = type === 'error' ? 3500 : 2000;
+
+  return showNotification({
+    autoClose: defaultDuration,
+    disallowClose: true,
+    styles: () => ({
+      closeButton: {},
+      description: {
+        color: 'var(--toast-description-fg)',
+        fontSize: '.9em',
+      },
+      loader: {
+        margin: '1rem',
+      },
+      root: {
+        '&::before': { backgroundColor: color },
+        background: 'var(--toast-bg)',
+      },
+      title: {
+        color: 'var(--toast-title-fg)',
+        fontSize: '1em',
+      },
+    }),
+    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 }),
+};

src/renderer/components/tooltip/index.tsx

@@ -0,0 +1,44 @@
+import type { TooltipProps } from '@mantine/core';
+import { Tooltip as MantineTooltip } from '@mantine/core';
+import styled from 'styled-components';
+
+const StyledTooltip = styled(MantineTooltip)`
+  & .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',
+        },
+      }}
+      {...rest}
+    >
+      {children}
+    </StyledTooltip>
+  );
+};
+
+Tooltip.defaultProps = {
+  openDelay: 0,
+  position: 'top',
+  transition: 'fade',
+  transitionDuration: 250,
+  withArrow: true,
+  withinPortal: true,
+};

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

@@ -0,0 +1,335 @@
+import React from 'react';
+import { Center } from '@mantine/core';
+import { RiAlbumFill } from 'react-icons/ri';
+import { generatePath, useNavigate } from 'react-router';
+import { Link } from 'react-router-dom';
+import { SimpleImg } from 'react-simple-img';
+import type { ListChildComponentProps } from 'react-window';
+import styled from 'styled-components';
+import { Text } from '/@/renderer/components/text';
+import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
+import GridCardControls from './grid-card-controls';
+import { Skeleton } from '/@/renderer/components/skeleton';
+
+const CardWrapper = styled.div<{
+  itemGap: number;
+  itemHeight: number;
+  itemWidth: number;
+  link?: boolean;
+}>`
+  flex: ${({ itemWidth }) => `0 0 ${itemWidth - 12}px`};
+  width: ${({ itemWidth }) => `${itemWidth}px`};
+  height: ${({ itemHeight, itemGap }) => `${itemHeight - 12 - itemGap}px`};
+  margin: ${({ itemGap }) => `0 ${itemGap / 2}px`};
+  padding: 12px 12px 0;
+  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;
+  user-select: none;
+  pointer-events: auto; // https://github.com/bvaughn/react-window/issues/128#issuecomment-460166682
+
+  &:hover {
+    background: var(--card-default-bg-hover);
+  }
+
+  &: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);
+`;
+
+const ImageSection = styled.div<{ size?: number }>`
+  position: relative;
+  width: ${({ size }) => size && `${size - 24}px`};
+  height: ${({ size }) => size && `${size - 24}px`};
+  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;
+  }
+`;
+
+const Image = styled(SimpleImg)`
+  border-radius: var(--card-default-radius);
+  box-shadow: 2px 2px 10px 10px 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;
+`;
+
+const DetailSection = styled.div`
+  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;
+`;
+
+interface BaseGridCardProps {
+  columnIndex: number;
+  controls: {
+    cardRows: CardRow[];
+    itemType: LibraryItem;
+    playButtonBehavior: Play;
+    route: CardRoute;
+  };
+  data: any;
+  listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
+  sizes: {
+    itemGap: number;
+    itemHeight: number;
+    itemWidth: number;
+  };
+}
+
+export const DefaultCard = ({
+  listChildProps,
+  data,
+  columnIndex,
+  controls,
+  sizes,
+}: BaseGridCardProps) => {
+  const navigate = useNavigate();
+  const { index } = listChildProps;
+  const { itemGap, itemHeight, itemWidth } = sizes;
+  const { itemType, cardRows, route } = controls;
+
+  const cardSize = itemWidth - 24;
+
+  if (data) {
+    return (
+      <CardWrapper
+        key={`card-${columnIndex}-${index}`}
+        link
+        itemGap={itemGap}
+        itemHeight={itemHeight}
+        itemWidth={itemWidth}
+        onClick={() =>
+          navigate(
+            generatePath(
+              route.route,
+              route.slugs?.reduce((acc, slug) => {
+                return {
+                  ...acc,
+                  [slug.slugProperty]: data[slug.idProperty],
+                };
+              }, {}),
+            ),
+          )
+        }
+      >
+        <StyledCard>
+          <ImageSection size={itemWidth}>
+            {data?.imageUrl ? (
+              <Image
+                animationDuration={0.3}
+                height={cardSize}
+                imgStyle={{ objectFit: 'cover' }}
+                placeholder="var(--card-default-bg)"
+                src={data?.imageUrl}
+                width={cardSize}
+              />
+            ) : (
+              <Center
+                sx={{
+                  background: 'var(--placeholder-bg)',
+                  borderRadius: 'var(--card-default-radius)',
+                  height: '100%',
+                  width: '100%',
+                }}
+              >
+                <RiAlbumFill
+                  color="var(--placeholder-fg)"
+                  size={35}
+                />
+              </Center>
+            )}
+            <ControlsContainer>
+              <GridCardControls
+                itemData={data}
+                itemType={itemType}
+              />
+            </ControlsContainer>
+          </ImageSection>
+          <DetailSection>
+            {cardRows.map((row: CardRow, index: number) => {
+              if (row.arrayProperty && row.route) {
+                return (
+                  <Row
+                    key={`row-${row.property}-${columnIndex}`}
+                    $secondary={index > 0}
+                  >
+                    {data[row.property].map((item: any, itemIndex: number) => (
+                      <React.Fragment key={`${data.id}-${item.id}`}>
+                        {itemIndex > 0 && (
+                          <Text
+                            $noSelect
+                            sx={{
+                              display: 'inline-block',
+                              padding: '0 2px 0 1px',
+                            }}
+                          >
+                            ,
+                          </Text>
+                        )}{' '}
+                        <Text
+                          $link
+                          $noSelect
+                          $secondary={index > 0}
+                          component={Link}
+                          overflow="hidden"
+                          size={index > 0 ? 'xs' : 'md'}
+                          to={generatePath(
+                            row.route!.route,
+                            row.route!.slugs?.reduce((acc, slug) => {
+                              return {
+                                ...acc,
+                                [slug.slugProperty]: data[slug.idProperty],
+                              };
+                            }, {}),
+                          )}
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {row.arrayProperty && item[row.arrayProperty]}
+                        </Text>
+                      </React.Fragment>
+                    ))}
+                  </Row>
+                );
+              }
+
+              if (row.arrayProperty) {
+                return (
+                  <Row key={`row-${row.property}-${columnIndex}`}>
+                    {data[row.property].map((item: any) => (
+                      <Text
+                        key={`${data.id}-${item.id}`}
+                        $noSelect
+                        $secondary={index > 0}
+                        overflow="hidden"
+                        size={index > 0 ? 'xs' : 'md'}
+                      >
+                        {row.arrayProperty && item[row.arrayProperty]}
+                      </Text>
+                    ))}
+                  </Row>
+                );
+              }
+
+              return (
+                <Row key={`row-${row.property}-${columnIndex}`}>
+                  {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 ? 'xs' : 'md'}
+                    >
+                      {data && data[row.property]}
+                    </Text>
+                  )}
+                </Row>
+              );
+            })}
+          </DetailSection>
+        </StyledCard>
+      </CardWrapper>
+    );
+  }
+
+  return (
+    <CardWrapper
+      key={`card-${columnIndex}-${index}`}
+      itemGap={itemGap}
+      itemHeight={itemHeight}
+      itemWidth={itemWidth + 12}
+    >
+      <StyledCard>
+        <Skeleton
+          visible
+          radius="sm"
+        >
+          <ImageSection size={itemWidth} />
+        </Skeleton>
+        <DetailSection>
+          {cardRows.map((row: CardRow, index: number) => (
+            <Skeleton
+              key={`row-${row.property}-${columnIndex}`}
+              height={20}
+              my={2}
+              radius="md"
+              visible={!data}
+              width={!data ? (index > 0 ? '50%' : '90%') : '100%'}
+            >
+              <Row />
+            </Skeleton>
+          ))}
+        </DetailSection>
+      </StyledCard>
+    </CardWrapper>
+  );
+};

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

@@ -0,0 +1,204 @@
+import type { MouseEvent } from 'react';
+import React from 'react';
+import type { UnstyledButtonProps } from '@mantine/core';
+import { Group } from '@mantine/core';
+import { RiPlayFill, RiMore2Fill, RiHeartFill, RiHeartLine } from 'react-icons/ri';
+import styled from 'styled-components';
+import { _Button } from '/@/renderer/components/button';
+import { DropdownMenu } from '/@/renderer/components/dropdown-menu';
+import type { LibraryItem } from '/@/renderer/types';
+import { Play } from '/@/renderer/types';
+import { useSettingsStore } from '/@/renderer/store/settings.store';
+
+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;
+
+  &:hover {
+    opacity: 1;
+    scale: 1.1;
+  }
+
+  &:active {
+    opacity: 1;
+    scale: 1;
+  }
+
+  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;
+
+  &:hover {
+    opacity: 1;
+    scale: 1.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%;
+`;
+
+const ControlsRow = styled.div`
+  width: 100%;
+  height: calc(100% / 3);
+`;
+
+// const TopControls = styled(ControlsRow)`
+//   display: flex;
+//   align-items: flex-start;
+//   justify-content: space-between;
+//   padding: 0.5rem;
+// `;
+
+// const CenterControls = styled(ControlsRow)`
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   padding: 0.5rem;
+// `;
+
+const BottomControls = styled(ControlsRow)`
+  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)'};
+  }
+`;
+
+const PLAY_TYPES = [
+  {
+    label: 'Play',
+    play: Play.NOW,
+  },
+  {
+    label: 'Play last',
+    play: Play.LAST,
+  },
+  {
+    label: 'Play next',
+    play: Play.NEXT,
+  },
+];
+
+export const GridCardControls = ({
+  itemData,
+  itemType,
+}: {
+  itemData: any;
+  itemType: LibraryItem;
+}) => {
+  const playButtonBehavior = useSettingsStore((state) => state.player.playButtonBehavior);
+
+  const handlePlay = (e: MouseEvent<HTMLButtonElement>, playType?: Play) => {
+    e.preventDefault();
+    e.stopPropagation();
+    import('/@/renderer/features/player/utils/handle-playqueue-add').then((fn) => {
+      fn.handlePlayQueueAdd({
+        byItemType: {
+          id: itemData.id,
+          type: itemType,
+        },
+        play: playType || playButtonBehavior,
+      });
+    });
+  };
+
+  return (
+    <GridCardControlsContainer>
+      {/* <TopControls /> */}
+      {/* <CenterControls /> */}
+      <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>
+          <DropdownMenu
+            withinPortal
+            position="bottom-start"
+          >
+            <DropdownMenu.Target>
+              <SecondaryButton
+                p={5}
+                sx={{ svg: { fill: 'white !important' } }}
+                variant="subtle"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
+              >
+                <RiMore2Fill
+                  color="white"
+                  size={20}
+                />
+              </SecondaryButton>
+            </DropdownMenu.Target>
+            <DropdownMenu.Dropdown>
+              {PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
+                <DropdownMenu.Item
+                  key={`playtype-${type.play}`}
+                  onClick={(e: MouseEvent<HTMLButtonElement>) => handlePlay(e, type.play)}
+                >
+                  {type.label}
+                </DropdownMenu.Item>
+              ))}
+              <DropdownMenu.Item disabled>Add to playlist</DropdownMenu.Item>
+              <DropdownMenu.Item disabled>Refresh metadata</DropdownMenu.Item>
+            </DropdownMenu.Dropdown>
+          </DropdownMenu>
+        </Group>
+      </BottomControls>
+    </GridCardControlsContainer>
+  );
+};
+
+export default GridCardControls;

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

@@ -0,0 +1,61 @@
+import { memo } from 'react';
+import type { ListChildComponentProps } from 'react-window';
+import { areEqual } from 'react-window';
+import { DefaultCard } from '/@/renderer/components/virtual-grid/grid-card/default-card';
+import { PosterCard } from '/@/renderer/components/virtual-grid/grid-card/poster-card';
+import type { GridCardData } from '/@/renderer/types';
+import { CardDisplayType } from '/@/renderer/types';
+
+export const GridCard = memo(({ data, index, style }: ListChildComponentProps) => {
+  const {
+    itemHeight,
+    itemWidth,
+    columnCount,
+    itemGap,
+    itemCount,
+    cardRows,
+    itemData,
+    itemType,
+    playButtonBehavior,
+    route,
+    display,
+  } = data as GridCardData;
+  const cards = [];
+  const startIndex = index * columnCount;
+  const stopIndex = Math.min(itemCount - 1, startIndex + columnCount - 1);
+
+  const View = display === CardDisplayType.CARD ? DefaultCard : PosterCard;
+
+  for (let i = startIndex; i <= stopIndex; i += 1) {
+    cards.push(
+      <View
+        key={`card-${i}-${index}`}
+        columnIndex={i}
+        controls={{
+          cardRows,
+          itemType,
+          playButtonBehavior,
+          route,
+        }}
+        data={itemData[i]}
+        listChildProps={{ index }}
+        sizes={{ itemGap, itemHeight, itemWidth }}
+      />,
+    );
+  }
+
+  return (
+    <>
+      <div
+        style={{
+          ...style,
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'start',
+        }}
+      >
+        {cards}
+      </div>
+    </>
+  );
+}, areEqual);

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

@@ -0,0 +1,329 @@
+import React from 'react';
+import { Center } from '@mantine/core';
+import { RiAlbumFill } from 'react-icons/ri';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+import { SimpleImg } from 'react-simple-img';
+import type { ListChildComponentProps } from 'react-window';
+import styled from 'styled-components';
+import { Skeleton } from '/@/renderer/components/skeleton';
+import { Text } from '/@/renderer/components/text';
+import type { LibraryItem, CardRow, CardRoute, Play } from '/@/renderer/types';
+import GridCardControls from './grid-card-controls';
+
+const CardWrapper = styled.div<{
+  itemGap: number;
+  itemHeight: number;
+  itemWidth: number;
+}>`
+  flex: ${({ itemWidth }) => `0 0 ${itemWidth}px`};
+  width: ${({ itemWidth }) => `${itemWidth}px`};
+  height: ${({ itemHeight, itemGap }) => `${itemHeight - itemGap}px`};
+  margin: ${({ itemGap }) => `0 ${itemGap / 2}px`};
+  user-select: none;
+  pointer-events: auto; // https://github.com/bvaughn/react-window/issues/128#issuecomment-460166682
+
+  &: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;
+  background: var(--card-poster-bg);
+  border-radius: var(--card-poster-radius);
+
+  &:hover {
+    background: var(--card-poster-bg-hover);
+  }
+`;
+
+const ImageSection = styled.div`
+  position: relative;
+  width: 100%;
+  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;
+  }
+`;
+
+interface ImageProps {
+  height: number;
+  isLoading?: boolean;
+}
+
+const Image = styled(SimpleImg)<ImageProps>`
+  border: 0;
+  border-radius: var(--card-poster-radius);
+
+  img {
+    object-fit: cover;
+  }
+`;
+
+const ControlsContainer = styled.div`
+  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;
+`;
+
+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;
+`;
+
+interface BaseGridCardProps {
+  columnIndex: number;
+  controls: {
+    cardRows: CardRow[];
+    itemType: LibraryItem;
+    playButtonBehavior: Play;
+    route: CardRoute;
+  };
+  data: any;
+  listChildProps: Omit<ListChildComponentProps, 'data' | 'style'>;
+  sizes: {
+    itemGap: number;
+    itemHeight: number;
+    itemWidth: number;
+  };
+}
+
+export const PosterCard = ({
+  listChildProps,
+  data,
+  columnIndex,
+  controls,
+  sizes,
+}: BaseGridCardProps) => {
+  if (data) {
+    return (
+      <CardWrapper
+        key={`card-${columnIndex}-${listChildProps.index}`}
+        itemGap={sizes.itemGap}
+        itemHeight={sizes.itemHeight}
+        itemWidth={sizes.itemWidth}
+      >
+        <StyledCard>
+          <Link
+            tabIndex={0}
+            to={generatePath(
+              controls.route.route,
+              controls.route.slugs?.reduce((acc, slug) => {
+                return {
+                  ...acc,
+                  [slug.slugProperty]: data[slug.idProperty],
+                };
+              }, {}),
+            )}
+          >
+            <ImageSection style={{ height: `${sizes.itemWidth}px` }}>
+              {data?.imageUrl ? (
+                <Image
+                  animationDuration={0.3}
+                  height={sizes.itemWidth}
+                  importance="auto"
+                  placeholder="var(--card-default-bg)"
+                  src={data?.imageUrl}
+                  width={sizes.itemWidth}
+                />
+              ) : (
+                <Center
+                  sx={{
+                    background: 'var(--placeholder-bg)',
+                    borderRadius: 'var(--card-poster-radius)',
+                    height: '100%',
+                  }}
+                >
+                  <RiAlbumFill
+                    color="var(--placeholder-fg)"
+                    size={35}
+                  />
+                </Center>
+              )}
+              <ControlsContainer>
+                <GridCardControls
+                  itemData={data}
+                  itemType={controls.itemType}
+                />
+              </ControlsContainer>
+            </ImageSection>
+          </Link>
+          <DetailSection>
+            {controls.cardRows.map((row: CardRow, index: number) => {
+              if (row.arrayProperty && row.route) {
+                return (
+                  <Row
+                    key={`row-${row.property}-${columnIndex}`}
+                    $secondary={index > 0}
+                  >
+                    {data[row.property].map((item: any, itemIndex: number) => (
+                      <React.Fragment key={`${data.id}-${item.id}`}>
+                        {itemIndex > 0 && (
+                          <Text
+                            $noSelect
+                            size={index > 0 ? 'xs' : 'md'}
+                            sx={{
+                              display: 'inline-block',
+                              padding: '0 2px 0 1px',
+                            }}
+                          >
+                            ,
+                          </Text>
+                        )}{' '}
+                        <Text
+                          $link
+                          $noSelect
+                          $secondary={index > 0}
+                          component={Link}
+                          overflow="hidden"
+                          size={index > 0 ? 'xs' : 'md'}
+                          to={generatePath(
+                            row.route!.route,
+                            row.route!.slugs?.reduce((acc, slug) => {
+                              return {
+                                ...acc,
+                                [slug.slugProperty]: data[slug.idProperty],
+                              };
+                            }, {}),
+                          )}
+                        >
+                          {row.arrayProperty && item[row.arrayProperty]}
+                        </Text>
+                      </React.Fragment>
+                    ))}
+                  </Row>
+                );
+              }
+
+              if (row.arrayProperty) {
+                return (
+                  <Row key={`row-${row.property}-${columnIndex}`}>
+                    {data[row.property].map((item: any) => (
+                      <Text
+                        key={`${data.id}-${item.id}`}
+                        $noSelect
+                        $secondary={index > 0}
+                        overflow="hidden"
+                        size={index > 0 ? 'xs' : 'md'}
+                      >
+                        {row.arrayProperty && item[row.arrayProperty]}
+                      </Text>
+                    ))}
+                  </Row>
+                );
+              }
+
+              return (
+                <Row key={`row-${row.property}-${columnIndex}`}>
+                  {row.route ? (
+                    <Text
+                      $link
+                      $noSelect
+                      component={Link}
+                      overflow="hidden"
+                      size={index > 0 ? 'xs' : 'md'}
+                      to={generatePath(
+                        row.route.route,
+                        row.route.slugs?.reduce((acc, slug) => {
+                          return {
+                            ...acc,
+                            [slug.slugProperty]: data[slug.idProperty],
+                          };
+                        }, {}),
+                      )}
+                    >
+                      {data && data[row.property]}
+                    </Text>
+                  ) : (
+                    <Text
+                      $noSelect
+                      $secondary={index > 0}
+                      overflow="hidden"
+                      size={index > 0 ? 'xs' : 'md'}
+                    >
+                      {data && data[row.property]}
+                    </Text>
+                  )}
+                </Row>
+              );
+            })}
+          </DetailSection>
+        </StyledCard>
+      </CardWrapper>
+    );
+  }
+
+  return (
+    <CardWrapper
+      key={`card-${columnIndex}-${listChildProps.index}`}
+      itemGap={sizes.itemGap}
+      itemHeight={sizes.itemHeight}
+      itemWidth={sizes.itemWidth}
+    >
+      <StyledCard>
+        <Skeleton
+          visible
+          radius="sm"
+        >
+          <ImageSection style={{ height: `${sizes.itemWidth}px` }} />
+        </Skeleton>
+        <DetailSection>
+          {controls.cardRows.map((row: CardRow, index: number) => (
+            <Skeleton
+              key={`row-${row.property}-${columnIndex}`}
+              height={20}
+              my={2}
+              radius="md"
+              visible={!data}
+              width={!data ? (index > 0 ? '50%' : '90%') : '100%'}
+            >
+              <Row />
+            </Skeleton>
+          ))}
+        </DetailSection>
+      </StyledCard>
+    </CardWrapper>
+  );
+};

src/renderer/components/virtual-grid/index.ts

@@ -0,0 +1,2 @@
+export * from './virtual-grid-wrapper';
+export * from './virtual-infinite-grid';

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

@@ -0,0 +1,110 @@
+import type { Ref } from 'react';
+import debounce from 'lodash/debounce';
+import memoize from 'memoize-one';
+import type { FixedSizeListProps } from 'react-window';
+import { FixedSizeList } from 'react-window';
+import styled from 'styled-components';
+import { GridCard } from '/@/renderer/components/virtual-grid/grid-card';
+import type { CardRow, LibraryItem, CardDisplayType, CardRoute } from '/@/renderer/types';
+
+const createItemData = memoize(
+  (
+    cardRows,
+    columnCount,
+    display,
+    itemCount,
+    itemData,
+    itemGap,
+    itemHeight,
+    itemType,
+    itemWidth,
+    route,
+  ) => ({
+    cardRows,
+    columnCount,
+    display,
+    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,
+  itemData,
+  route,
+  onScroll,
+  ...rest
+}: Omit<FixedSizeListProps, 'ref' | 'itemSize' | 'children'> & {
+  cardRows: CardRow[];
+  columnCount: number;
+  display: CardDisplayType;
+  itemData: any[];
+  itemGap: number;
+  itemHeight: number;
+  itemType: LibraryItem;
+  itemWidth: number;
+  refInstance: Ref<any>;
+  route?: CardRoute;
+  rowCount: number;
+}) => {
+  const memoizedItemData = createItemData(
+    cardRows,
+    columnCount,
+    display,
+    itemCount,
+    itemData,
+    itemGap,
+    itemHeight,
+    itemType,
+    itemWidth,
+    route,
+  );
+
+  const memoizedOnScroll = createScrollHandler(onScroll);
+
+  return (
+    <FixedSizeList
+      ref={refInstance}
+      {...rest}
+      initialScrollOffset={initialScrollOffset}
+      itemCount={rowCount}
+      itemData={memoizedItemData}
+      itemSize={itemHeight}
+      overscanCount={5}
+      onScroll={memoizedOnScroll}
+    >
+      {GridCard}
+    </FixedSizeList>
+  );
+};
+
+VirtualGridWrapper.defaultProps = {
+  route: undefined,
+};
+
+export const VirtualGridContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const VirtualGridAutoSizerContainer = styled.div`
+  flex: 1;
+`;

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

@@ -0,0 +1,154 @@
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import debounce from 'lodash/debounce';
+import type { FixedSizeListProps } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { VirtualGridWrapper } from '/@/renderer/components/virtual-grid/virtual-grid-wrapper';
+import type { CardRoute, CardRow, LibraryItem } from '/@/renderer/types';
+import { CardDisplayType } from '/@/renderer/types';
+
+interface VirtualGridProps extends Omit<FixedSizeListProps, 'children' | 'itemSize'> {
+  cardRows: CardRow[];
+  display?: CardDisplayType;
+  fetchFn: (options: { columnCount: number; skip: number; take: number }) => Promise<any>;
+  itemGap: number;
+  itemSize: number;
+  itemType: LibraryItem;
+  minimumBatchSize?: number;
+  refresh?: any; // Pass in any value to refresh the grid when changed
+  route?: CardRoute;
+}
+
+const constrainWidth = (width: number) => {
+  if (width < 1920) {
+    return width;
+  }
+
+  return 1920;
+};
+
+export const VirtualInfiniteGrid = ({
+  itemCount,
+  itemGap,
+  itemSize,
+  itemType,
+  cardRows,
+  route,
+  onScroll,
+  display,
+  minimumBatchSize,
+  fetchFn,
+  initialScrollOffset,
+  height,
+  width,
+  refresh,
+}: VirtualGridProps) => {
+  const [itemData, setItemData] = useState<any[]>([]);
+  const listRef = useRef<any>(null);
+  const loader = useRef<InfiniteLoader>(null);
+
+  const { itemHeight, rowCount, columnCount } = useMemo(() => {
+    const itemsPerRow = Math.floor(
+      (constrainWidth(Number(width)) - itemGap + 3) / (itemSize! + itemGap + 2),
+    );
+
+    return {
+      columnCount: itemsPerRow,
+      itemHeight: itemSize! + cardRows.length * 22 + itemGap,
+      itemWidth: itemSize! + itemGap,
+      rowCount: Math.ceil(itemCount / itemsPerRow),
+    };
+  }, [cardRows.length, itemCount, itemGap, itemSize, width]);
+
+  const isItemLoaded = useCallback(
+    (index: number) => {
+      const itemIndex = index * columnCount;
+
+      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;
+
+      // 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 newData: any[] = [...itemData];
+
+      let itemIndex = 0;
+      for (let rowIndex = start; rowIndex < end; rowIndex += 1) {
+        newData[rowIndex] = data.items[itemIndex];
+        itemIndex += 1;
+      }
+
+      setItemData(newData);
+    },
+    [columnCount, fetchFn, itemData],
+  );
+
+  const debouncedLoadMoreItems = debounce(loadMoreItems, 500);
+
+  useEffect(() => {
+    if (loader.current) {
+      listRef.current.scrollTo(0);
+      loader.current.resetloadMoreItemsCache(false);
+      setItemData(() => []);
+
+      loadMoreItems(0, minimumBatchSize! * 2);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [minimumBatchSize, fetchFn, refresh]);
+
+  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 || CardDisplayType.CARD}
+          height={height}
+          initialScrollOffset={initialScrollOffset}
+          itemCount={itemCount || 0}
+          itemData={itemData}
+          itemGap={itemGap}
+          itemHeight={itemHeight + itemGap / 2}
+          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: CardDisplayType.CARD,
+  minimumBatchSize: 20,
+  refresh: undefined,
+  route: undefined,
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+import { Text } from '/@/renderer/components/text';
+import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+import { AppRoute } from '/@/renderer/router/routes';
+
+export const AlbumArtistCell = ({ value, data }: ICellRendererParams) => {
+  return (
+    <CellContainer position="left">
+      <Text
+        $secondary
+        overflow="hidden"
+        size="sm"
+      >
+        {value?.map((item: Artist | AlbumArtist, index: number) => (
+          <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
+            {index > 0 && (
+              <Text
+                $link
+                $secondary
+                size="sm"
+                style={{ display: 'inline-block' }}
+              >
+                ,
+              </Text>
+            )}{' '}
+            <Text
+              $link
+              $secondary
+              component={Link}
+              overflow="hidden"
+              size="sm"
+              to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+                albumArtistId: item.id,
+              })}
+            >
+              {item.name || '—'}
+            </Text>
+          </React.Fragment>
+        ))}
+      </Text>
+    </CellContainer>
+  );
+};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+import { Text } from '/@/renderer/components/text';
+import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
+import { AppRoute } from '/@/renderer/router/routes';
+
+export const ArtistCell = ({ value, data }: ICellRendererParams) => {
+  return (
+    <CellContainer position="left">
+      <Text
+        $secondary
+        overflow="hidden"
+        size="sm"
+      >
+        {value?.map((item: Artist | AlbumArtist, index: number) => (
+          <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
+            {index > 0 && (
+              <Text
+                $link
+                $secondary
+                size="sm"
+                style={{ display: 'inline-block' }}
+              >
+                ,
+              </Text>
+            )}{' '}
+            <Text
+              $link
+              $secondary
+              component={Link}
+              overflow="hidden"
+              size="sm"
+              to={generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, {
+                artistId: item.id,
+              })}
+            >
+              {item.name || '—'}
+            </Text>
+          </React.Fragment>
+        ))}
+      </Text>
+    </CellContainer>
+  );
+};

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

@@ -0,0 +1,99 @@
+import React, { useMemo } from 'react';
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { motion } from 'framer-motion';
+import { generatePath } from 'react-router';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+import { Text } from '/@/renderer/components/text';
+import { AppRoute } from '/@/renderer/router/routes';
+import { ServerType } from '/@/renderer/types';
+
+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%;
+`;
+
+const ImageWrapper = styled.div`
+  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%;
+`;
+
+const StyledImage = styled.img`
+  object-fit: cover;
+`;
+
+export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
+  const artists = useMemo(() => {
+    return value.type === ServerType.JELLYFIN ? value.artists : value.albumArtists;
+  }, [value]);
+
+  return (
+    <CellContainer height={node.rowHeight || 40}>
+      <ImageWrapper>
+        <StyledImage
+          alt="song-cover"
+          height={(node.rowHeight || 40) - 10}
+          loading="lazy"
+          src={value.imageUrl}
+          style={{}}
+          width={(node.rowHeight || 40) - 10}
+        />
+      </ImageWrapper>
+      <MetadataWrapper>
+        <Text
+          overflow="hidden"
+          size="sm"
+        >
+          {value.name}
+        </Text>
+        <Text
+          $secondary
+          overflow="hidden"
+          size="sm"
+        >
+          {artists?.length ? (
+            artists.map((artist: Artist | AlbumArtist, index: number) => (
+              <React.Fragment key={`queue-${rowIndex}-artist-${artist.id}`}>
+                {index > 0 ? ', ' : null}
+                <Text
+                  $link
+                  $secondary
+                  component={Link}
+                  overflow="hidden"
+                  size="sm"
+                  sx={{ width: 'fit-content' }}
+                  to={generatePath(AppRoute.LIBRARY_ALBUMARTISTS_DETAIL, {
+                    albumArtistId: artist.id,
+                  })}
+                >
+                  {artist.name}
+                </Text>
+              </React.Fragment>
+            ))
+          ) : (
+            <Text $secondary>—</Text>
+          )}
+        </Text>
+      </MetadataWrapper>
+    </CellContainer>
+  );
+};

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

@@ -0,0 +1,63 @@
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { Text } from '/@/renderer/components/text';
+
+export const CellContainer = styled.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%;
+`;
+
+type Options = {
+  array?: boolean;
+  isArray?: boolean;
+  isLink?: boolean;
+  position?: 'left' | 'center' | 'right';
+  primary?: boolean;
+};
+
+export const GenericCell = (
+  { value, valueFormatted }: ICellRendererParams,
+  { position, primary, isLink }: Options,
+) => {
+  const displayedValue = valueFormatted || value;
+
+  return (
+    <CellContainer position={position || 'left'}>
+      {isLink ? (
+        <Text
+          $link={isLink}
+          $secondary={!primary}
+          component={Link}
+          overflow="hidden"
+          size="sm"
+          to={displayedValue.link}
+        >
+          {isLink ? displayedValue.value : displayedValue}
+        </Text>
+      ) : (
+        <Text
+          $secondary={!primary}
+          overflow="hidden"
+          size="sm"
+        >
+          {displayedValue}
+        </Text>
+      )}
+    </CellContainer>
+  );
+};
+
+GenericCell.defaultProps = {
+  position: undefined,
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { ICellRendererParams } from '@ag-grid-community/core';
+import { Link } from 'react-router-dom';
+import type { AlbumArtist, Artist } from '/@/renderer/api/types';
+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="sm"
+      >
+        {value?.map((item: Artist | AlbumArtist, index: number) => (
+          <React.Fragment key={`row-${item.id}-${data.uniqueId}`}>
+            {index > 0 && (
+              <Text
+                $link
+                $secondary
+                size="sm"
+                style={{ display: 'inline-block' }}
+              >
+                ,
+              </Text>
+            )}{' '}
+            <Text
+              $link
+              $secondary
+              component={Link}
+              overflow="hidden"
+              size="sm"
+              to="/"
+            >
+              {item.name || '—'}
+            </Text>
+          </React.Fragment>
+        ))}
+      </Text>
+    </CellContainer>
+  );
+};

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

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

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

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import type { IHeaderParams } from '@ag-grid-community/core';
+import { AiOutlineNumber } from 'react-icons/ai';
+import { FiClock } from 'react-icons/fi';
+import styled from 'styled-components';
+
+type Presets = 'duration' | 'rowIndex';
+
+type Options = {
+  children?: ReactNode;
+  position?: 'left' | 'center' | 'right';
+  preset?: Presets;
+};
+
+const HeaderWrapper = styled.div<{ position: 'left' | 'center' | 'right' }>`
+  display: flex;
+  justify-content: ${(props) =>
+    props.position === 'right'
+      ? 'flex-end'
+      : props.position === 'center'
+      ? 'center'
+      : 'flex-start'};
+  width: 100%;
+  font-family: var(--header-font-family);
+  text-transform: uppercase;
+`;
+
+const headerPresets = { duration: <FiClock size={15} />, rowIndex: <AiOutlineNumber size={15} /> };
+
+export const GenericTableHeader = (
+  { displayName }: IHeaderParams,
+  { preset, children, position }: Options,
+) => {
+  if (preset) {
+    return <HeaderWrapper position={position || 'left'}>{headerPresets[preset]}</HeaderWrapper>;
+  }
+
+  return <HeaderWrapper position={position || 'left'}>{children || displayName}</HeaderWrapper>;
+};
+
+GenericTableHeader.defaultProps = {
+  position: 'left',
+  preset: undefined,
+};

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

@@ -0,0 +1,190 @@
+import type { Ref } from 'react';
+import { forwardRef, useRef } from 'react';
+import type {
+  ICellRendererParams,
+  ValueGetterParams,
+  IHeaderParams,
+  ValueFormatterParams,
+  ColDef,
+} from '@ag-grid-community/core';
+import type { AgGridReactProps } from '@ag-grid-community/react';
+import { AgGridReact } from '@ag-grid-community/react';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { useMergedRef } from '@mantine/hooks';
+import formatDuration from 'format-duration';
+import { generatePath } from 'react-router';
+import styled from 'styled-components';
+import { AlbumArtistCell } from '/@/renderer/components/virtual-table/cells/album-artist-cell';
+import { ArtistCell } from '/@/renderer/components/virtual-table/cells/artist-cell';
+import { CombinedTitleCell } from '/@/renderer/components/virtual-table/cells/combined-title-cell';
+import { GenericCell } from '/@/renderer/components/virtual-table/cells/generic-cell';
+import { GenreCell } from '/@/renderer/components/virtual-table/cells/genre-cell';
+import { GenericTableHeader } from '/@/renderer/components/virtual-table/headers/generic-table-header';
+import { AppRoute } from '/@/renderer/router/routes';
+import { PersistedTableColumn } from '/@/renderer/store/settings.store';
+import { TableColumn } from '/@/renderer/types';
+
+export * from './table-config-dropdown';
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const tableColumns: { [key: string]: ColDef } = {
+  album: {
+    cellRenderer: (params: ICellRendererParams) =>
+      GenericCell(params, { isLink: true, position: 'left' }),
+    colId: TableColumn.ALBUM,
+    headerName: 'Album',
+    valueGetter: (params: ValueGetterParams) => ({
+      link: generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
+        albumId: params.data?.albumId || '',
+      }),
+      value: params.data?.album,
+    }),
+  },
+  albumArtist: {
+    cellRenderer: AlbumArtistCell,
+    colId: TableColumn.ALBUM_ARTIST,
+    headerName: 'Album Artist',
+    valueGetter: (params: ValueGetterParams) => params.data?.albumArtists,
+  },
+  artist: {
+    cellRenderer: ArtistCell,
+    colId: TableColumn.ARTIST,
+    headerName: 'Artist',
+    valueGetter: (params: ValueGetterParams) => params.data?.artists,
+  },
+  bitRate: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }),
+    colId: TableColumn.BIT_RATE,
+    field: 'bitRate',
+    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'left' }),
+    valueFormatter: (params: ValueFormatterParams) => `${params.value} kbps`,
+  },
+  dateAdded: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }),
+    colId: TableColumn.DATE_ADDED,
+    field: 'createdAt',
+    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'left' }),
+    headerName: 'Date Added',
+    valueFormatter: (params: ValueFormatterParams) => params.value?.split('T')[0],
+  },
+  discNumber: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+    colId: TableColumn.DISC_NUMBER,
+    field: 'discNumber',
+    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
+    headerName: 'Disc',
+    initialWidth: 75,
+    suppressSizeToFit: true,
+  },
+  duration: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+    colId: TableColumn.DURATION,
+    field: 'duration',
+    headerComponent: (params: IHeaderParams) =>
+      GenericTableHeader(params, { position: 'center', preset: 'duration' }),
+    initialWidth: 100,
+    valueFormatter: (params: ValueFormatterParams) => formatDuration(params.value * 1000),
+  },
+  genre: {
+    cellRenderer: GenreCell,
+    colId: TableColumn.GENRE,
+    headerName: 'Genre',
+    valueGetter: (params: ValueGetterParams) => params.data.genres,
+  },
+  releaseDate: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+    colId: TableColumn.RELEASE_DATE,
+    field: 'releaseDate',
+    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
+    headerName: 'Release Date',
+    valueFormatter: (params: ValueFormatterParams) => params.value?.split('T')[0],
+  },
+  releaseYear: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+    colId: TableColumn.YEAR,
+    field: 'releaseYear',
+    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
+    headerName: 'Year',
+  },
+  rowIndex: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'left' }),
+    colId: TableColumn.ROW_INDEX,
+    headerComponent: (params: IHeaderParams) =>
+      GenericTableHeader(params, { position: 'left', preset: 'rowIndex' }),
+    initialWidth: 50,
+    suppressSizeToFit: true,
+    valueGetter: (params) => {
+      return (params.node?.rowIndex || 0) + 1;
+    },
+  },
+  title: {
+    cellRenderer: (params: ICellRendererParams) =>
+      GenericCell(params, { position: 'left', primary: true }),
+    colId: TableColumn.TITLE,
+    field: 'name',
+    headerName: 'Title',
+  },
+  titleCombined: {
+    cellRenderer: CombinedTitleCell,
+    colId: TableColumn.TITLE_COMBINED,
+    headerName: 'Title',
+    initialWidth: 500,
+    valueGetter: (params: ValueGetterParams) => ({
+      albumArtists: params.data?.albumArtists,
+      artists: params.data?.artists,
+      imageUrl: params.data?.imageUrl,
+      name: params.data?.name,
+      rowHeight: params.node?.rowHeight,
+      type: params.data?.type,
+    }),
+  },
+  trackNumber: {
+    cellRenderer: (params: ICellRendererParams) => GenericCell(params, { position: 'center' }),
+    colId: TableColumn.TRACK_NUMBER,
+    field: 'trackNumber',
+    headerComponent: (params: IHeaderParams) => GenericTableHeader(params, { position: 'center' }),
+    headerName: 'Track',
+    initialWidth: 75,
+    suppressSizeToFit: true,
+  },
+};
+
+export const getColumnDef = (column: TableColumn) => {
+  return tableColumns[column as keyof typeof tableColumns];
+};
+
+export const getColumnDefs = (columns: PersistedTableColumn[]) => {
+  const columnDefs: any[] = [];
+  for (const column of columns) {
+    const columnExists = tableColumns[column.column as keyof typeof tableColumns];
+    if (columnExists) columnDefs.push(columnExists);
+  }
+
+  return columnDefs;
+};
+
+export const VirtualTable = forwardRef(
+  ({ ...rest }: AgGridReactProps, ref: Ref<AgGridReactType | null>) => {
+    const tableRef = useRef<AgGridReactType | null>(null);
+
+    const mergedRef = useMergedRef(ref, tableRef);
+
+    return (
+      <TableWrapper className="ag-theme-alpine-dark">
+        <AgGridReact
+          ref={mergedRef}
+          suppressMoveWhenRowDragging
+          suppressScrollOnNewData
+          rowBuffer={30}
+          {...rest}
+        />
+      </TableWrapper>
+    );
+  },
+);

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

@@ -0,0 +1,163 @@
+import type { ChangeEvent } from 'react';
+import { Stack } from '@mantine/core';
+import { MultiSelect, Slider, Switch, Text } from '/@/renderer/components';
+import { useSettingsStoreActions, useSettingsStore } from '/@/renderer/store/settings.store';
+import { TableColumn, TableType } from '/@/renderer/types';
+
+export const tableColumns = [
+  { 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: 'Size', value: TableColumn.SIZE },
+  // { label: 'Skip', value: TableColumn.SKIP },
+  // { label: 'Path', value: TableColumn.PATH },
+  // { label: 'Play Count', value: TableColumn.PLAY_COUNT },
+  // { label: 'Favorite', value: TableColumn.FAVORITE },
+  // { label: 'Rating', value: TableColumn.RATING },
+  { label: 'Date Added', value: TableColumn.DATE_ADDED },
+];
+
+interface TableConfigDropdownProps {
+  type: TableType;
+}
+
+export const TableConfigDropdown = ({ type }: TableConfigDropdownProps) => {
+  const { setSettings } = useSettingsStoreActions();
+  const tableConfig = useSettingsStore((state) => state.tables);
+
+  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 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));
+
+      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 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,
+        },
+      },
+    });
+  };
+
+  return (
+    <Stack
+      p="1rem"
+      spacing="xl"
+    >
+      <Stack spacing="xs">
+        <Text>Table Columns</Text>
+        <MultiSelect
+          clearable
+          data={tableColumns}
+          defaultValue={tableConfig[type]?.columns.map((column) => column.column)}
+          dropdownPosition="top"
+          width={300}
+          onChange={handleAddOrRemoveColumns}
+        />
+      </Stack>
+      <Stack spacing="xs">
+        <Text>Row Height</Text>
+        <Slider
+          defaultValue={tableConfig[type]?.rowHeight}
+          max={100}
+          min={25}
+          sx={{ width: 150 }}
+          onChangeEnd={handleUpdateRowHeight}
+        />
+      </Stack>
+      <Stack spacing="xs">
+        <Text>Auto Fit Columns</Text>
+        <Switch
+          defaultChecked={tableConfig[type]?.autoFit}
+          onChange={handleUpdateAutoFit}
+        />
+      </Stack>
+      <Stack spacing="xs">
+        <Text>Follow Current Song</Text>
+        <Switch
+          defaultChecked={tableConfig[type]?.followCurrentSong}
+          onChange={handleUpdateFollow}
+        />
+      </Stack>
+    </Stack>
+  );
+};