Lint files based on updated rules

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

@@ -1,12 +1,12 @@
 import axios, { AxiosResponse } from 'axios';
 import { load } from 'cheerio';
+import { orderSearchResults } from './shared';
 import {
     LyricSource,
     InternetProviderLyricResponse,
     InternetProviderLyricSearchResponse,
     LyricSearchQuery,
 } from '../../../../renderer/api/types';
-import { orderSearchResults } from './shared';
 
 const SEARCH_URL = 'https://genius.com/api/search/song';
 

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

@@ -1,12 +1,12 @@
 // Credits to https://github.com/tranxuanthang/lrcget for API implementation
 import axios, { AxiosResponse } from 'axios';
+import { orderSearchResults } from './shared';
 import {
     InternetProviderLyricResponse,
     InternetProviderLyricSearchResponse,
     LyricSearchQuery,
     LyricSource,
 } from '../../../../renderer/api/types';
-import { orderSearchResults } from './shared';
 
 const FETCH_URL = 'https://lrclib.net/api/get';
 const SEEARCH_URL = 'https://lrclib.net/api/search';

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

@@ -1,5 +1,5 @@
-import Store from 'electron-store';
 import { ipcMain, safeStorage } from 'electron';
+import Store from 'electron-store';
 
 export const store = new Store();
 

src/main/preload/local-settings.ts

@@ -1,5 +1,5 @@
-import Store from 'electron-store';
 import { ipcRenderer, webFrame } from 'electron';
+import Store from 'electron-store';
 
 const store = new Store();
 

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

@@ -1,13 +1,13 @@
-import { Ref, forwardRef } from 'react';
+import { MouseEvent, ReactNode, Ref, forwardRef } from 'react';
 import { Button, type ButtonProps as MantineButtonProps } from '@mantine/core';
 import { Tooltip } from '/@/renderer/components/tooltip';
 import styled from 'styled-components';
 
 interface StyledButtonProps extends MantineButtonProps {
     $active?: boolean;
-    children: React.ReactNode;
+    children: ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onClick?: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseDown?: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     ref: Ref<HTMLButtonElement>;
 }
 

src/remote/components/wrapped-slider.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, ReactNode } from 'react';
 import { SliderProps } from '@mantine/core';
 import styled from 'styled-components';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
@@ -7,7 +7,7 @@ const SliderContainer = styled.div`
     display: flex;
     width: 95%;
     height: 20px;
-    margin: 10px 0px;
+    margin: 10px 0;
 `;
 
 const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
@@ -26,9 +26,9 @@ const SliderWrapper = styled.div`
 `;
 
 export interface WrappedProps extends Omit<SliderProps, 'onChangeEnd'> {
-    leftLabel?: JSX.Element;
+    leftLabel?: ReactNode;
     onChangeEnd: (value: number) => void;
-    rightLabel?: JSX.Element;
+    rightLabel?: ReactNode;
     value: number;
 }
 

src/renderer/components/button/index.tsx

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

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

@@ -14,9 +14,9 @@ const CardWrapper = styled.div<{
     link?: boolean;
 }>`
     padding: 1rem;
+    cursor: ${({ link }) => link && 'pointer'};
     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 {
@@ -61,17 +61,17 @@ const ImageSection = styled.div`
         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;
+        background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
     }
 `;
 
 const Image = styled(SimpleImg)`
     border-radius: var(--card-default-radius);
-    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 20%);
+    box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 20%);
 `;
 
 const ControlsContainer = styled.div`
@@ -95,8 +95,8 @@ const Row = styled.div<{ $secondary?: boolean }>`
     padding: 0 0.2rem;
     overflow: hidden;
     color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
     user-select: none;
 `;
 

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

@@ -23,7 +23,7 @@ const PlayButton = styled.button<PlayButtonType>`
     justify-content: center;
     width: 50px;
     height: 50px;
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255 255 255);
     border: none;
     border-radius: 50%;
     opacity: 0.8;
@@ -41,8 +41,8 @@ const PlayButton = styled.button<PlayButtonType>`
     }
 
     svg {
-        fill: rgb(0, 0, 0);
+        fill: rgb(0 0 0);
-        stroke: rgb(0, 0, 0);
+        stroke: rgb(0 0 0);
     }
 `;
 

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

@@ -14,8 +14,8 @@ const Row = styled.div<{ $secondary?: boolean }>`
     padding: 0 0.2rem;
     overflow: hidden;
     color: ${({ $secondary }) => ($secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
     user-select: none;
 `;
 

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

@@ -33,8 +33,8 @@ const PosterCardContainer = styled.div<{ $isHidden?: boolean }>`
     width: 100%;
     height: 100%;
     overflow: hidden;
-    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
     pointer-events: auto;
+    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
 
     .card-controls {
         opacity: 0;
@@ -57,11 +57,11 @@ const ImageContainerStyles = css`
         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;
+        background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
     }
 
     &:hover {

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

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode, Ref } from 'react';
+import { ComponentPropsWithoutRef, forwardRef, ReactNode, Ref } from 'react';
 import { Box, Group, UnstyledButton, UnstyledButtonProps } from '@mantine/core';
 import { motion, Variants } from 'framer-motion';
 import styled from 'styled-components';
@@ -20,7 +20,7 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
     max-width: ${({ maxWidth }) => maxWidth}px;
     background: var(--dropdown-menu-bg);
     border-radius: var(--dropdown-menu-border-radius);
-    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
+    box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
 
     button:first-child {
         border-top-left-radius: var(--dropdown-menu-border-radius);
@@ -35,13 +35,13 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
 
 export const StyledContextMenuButton = styled(UnstyledButton)`
     padding: var(--dropdown-menu-item-padding);
-    color: var(--dropdown-menu-fg);
-    font-weight: 500;
     font-family: var(--content-font-family);
+    font-weight: 500;
+    color: var(--dropdown-menu-fg);
     text-align: left;
+    cursor: default;
     background: var(--dropdown-menu-bg);
     border: none;
-    cursor: default;
 
     & .mantine-Button-inner {
         justify-content: flex-start;
@@ -65,7 +65,7 @@ export const ContextMenuButton = forwardRef(
             leftIcon,
             ...props
         }: UnstyledButtonProps &
-            React.ComponentPropsWithoutRef<'button'> & {
+            ComponentPropsWithoutRef<'button'> & {
                 leftIcon?: ReactNode;
                 rightIcon?: ReactNode;
             },

src/renderer/components/dialog/index.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 const StyledDialog = styled(MantineDialog)`
     &.mantine-Dialog-root {
         background-color: var(--modal-bg);
-        box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
+        box-shadow: 2px 2px 10px 2px rgb(0 0 0 / 40%);
     }
 `;
 

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

@@ -30,8 +30,10 @@ const StyledMenuLabel = styled(MantineMenu.Label)<MenuLabelProps>`
 const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
     position: relative;
     padding: var(--dropdown-menu-item-padding);
-    font-size: var(--dropdown-menu-item-font-size);
     font-family: var(--content-font-family);
+    font-size: var(--dropdown-menu-item-font-size);
+
+    cursor: default;
 
     &:disabled {
         opacity: 0.6;
@@ -50,17 +52,15 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
     & .mantine-Menu-itemRightSection {
         display: flex;
     }
-
-    cursor: default;
 `;
 
 const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
-    margin: 0;
     padding: 0;
+    margin: 0;
     background: var(--dropdown-menu-bg);
+    filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
     border: var(--dropdown-menu-border);
     border-radius: var(--dropdown-menu-border-radius);
-    filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
 
     /* *:first-child {
     border-top-left-radius: var(--dropdown-menu-border-radius);
@@ -74,8 +74,8 @@ const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
 `;
 
 const StyledMenuDivider = styled(MantineMenu.Divider)`
-    margin: 0;
     padding: 0;
+    margin: 0;
 `;
 
 export const DropdownMenu = ({ children, ...props }: MenuProps) => {

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

@@ -20,16 +20,16 @@ const Carousel = styled(motion.div)`
     min-height: 250px;
     padding: 2rem;
     overflow: hidden;
-    background: linear-gradient(180deg, var(--main-bg), rgba(25, 26, 28, 60%));
+    background: linear-gradient(180deg, var(--main-bg), rgb(25 26 28 / 60%));
     border-radius: 1rem;
 `;
 
 const Grid = styled.div`
     display: grid;
-    grid-auto-columns: 1fr;
     grid-template-areas: 'image info';
     grid-template-rows: 1fr;
     grid-template-columns: 200px minmax(0, 1fr);
+    grid-auto-columns: 1fr;
     width: 100%;
     max-width: 100%;
     height: 100%;
@@ -59,10 +59,10 @@ const BackgroundImage = styled.img`
     z-index: 0;
     width: 150%;
     height: 150%;
+    user-select: none;
+    filter: blur(24px);
     object-fit: cover;
     object-position: 0 30%;
-    filter: blur(24px);
-    user-select: none;
 `;
 
 const BackgroundImageOverlay = styled.div`
@@ -72,7 +72,7 @@ const BackgroundImageOverlay = styled.div`
     z-index: 10;
     width: 100%;
     height: 100%;
-    background: linear-gradient(180deg, rgba(25, 26, 28, 30%), var(--main-bg));
+    background: linear-gradient(180deg, rgb(25 26 28 / 30%), var(--main-bg));
 `;
 
 const Wrapper = styled(Link)`

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

@@ -1,6 +1,6 @@
 import { Flex, FlexProps } from '@mantine/core';
 import { AnimatePresence, motion, Variants } from 'framer-motion';
-import { useRef } from 'react';
+import { ReactNode, useRef } from 'react';
 import styled from 'styled-components';
 import { useShouldPadTitlebar, useTheme } from '/@/renderer/hooks';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
@@ -27,8 +27,8 @@ const Header = styled(motion.div)<{
     width: 100%;
     height: 100%;
     margin-right: ${(props) => (props.$padRight ? '140px' : '1rem')};
-    user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
     pointer-events: ${(props) => (props.$isHidden ? 'none' : 'auto')};
+    user-select: ${(props) => (props.$isHidden ? 'none' : 'auto')};
     -webkit-app-region: ${(props) => props.$isDraggable && 'drag'};
 
     button {
@@ -66,7 +66,7 @@ export interface PageHeaderProps
     extends Omit<FlexProps, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> {
     animated?: boolean;
     backgroundColor?: string;
-    children?: React.ReactNode;
+    children?: ReactNode;
     height?: string;
     isHidden?: boolean;
     position?: string;
@@ -131,7 +131,7 @@ export const PageHeader = ({
             {backgroundColor && (
                 <>
                     <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
-                    <BackgroundImageOverlay theme={theme} />
+                    <BackgroundImageOverlay theme={theme as 'light' | 'dark'} />
                 </>
             )}
         </Container>

src/renderer/components/paper/index.tsx

@@ -1,9 +1,10 @@
+import { ReactNode } from 'react';
 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;
+    children: ReactNode;
 }
 
 const StyledPaper = styled(MantinePaper)<PaperProps>`

src/renderer/components/popover/index.tsx

@@ -12,8 +12,8 @@ const StyledPopover = styled(MantinePopover)``;
 
 const StyledDropdown = styled(MantinePopover.Dropdown)<PopoverDropdownProps>`
     padding: 0.5rem;
-    font-size: 0.9em;
     font-family: var(--content-font-family);
+    font-size: 0.9em;
     background-color: var(--dropdown-menu-bg);
     border: var(--dropdown-menu-border);
 `;

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

@@ -7,8 +7,8 @@ type SegmentedControlProps = MantineSegmentedControlProps;
 
 const StyledSegmentedControl = styled(MantineSegmentedControl)<MantineSegmentedControlProps>`
     & .mantine-SegmentedControl-label {
-        color: var(--input-fg);
         font-family: var(--content-font-family);
+        color: var(--input-fg);
     }
 
     background-color: var(--input-bg);

src/renderer/components/slider/index.tsx

@@ -23,8 +23,8 @@ const StyledSlider = styled(MantineSlider)`
 
     & .mantine-Slider-label {
         padding: 0 1rem;
-        color: var(--tooltip-fg);
         font-size: 1em;
+        color: var(--tooltip-fg);
         background: var(--tooltip-bg);
     }
 `;

src/renderer/components/tabs/index.tsx

@@ -13,8 +13,8 @@ const StyledTabs = styled(MantineTabs)`
 
     &.mantine-Tabs-tab {
         padding: 0.5rem 1rem;
-        font-weight: 600;
         font-size: 1rem;
+        font-weight: 600;
         background-color: var(--main-bg);
     }
 

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

@@ -20,8 +20,8 @@ const StyledTextTitle = styled(MantineHeader)<TextTitleProps>`
     overflow: ${(props) => props.overflow};
     color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
     cursor: ${(props) => props.$link && 'cursor'};
-    transition: color 0.2s ease-in-out;
     user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
+    transition: color 0.2s ease-in-out;
     ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}
 
     &:hover {
@@ -49,7 +49,6 @@ _TextTitle.defaultProps = {
     $link: false,
     $noSelect: false,
     $secondary: false,
-    font: undefined,
     overflow: 'visible',
     to: '',
     weight: 400,

src/renderer/components/text/index.tsx

@@ -20,8 +20,8 @@ interface TextProps extends MantineTextDivProps {
 
 const StyledText = styled(MantineText)<TextProps>`
     overflow: ${(props) => props.overflow};
-    color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
     font-family: ${(props) => props.font};
+    color: ${(props) => (props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)')};
     cursor: ${(props) => props.$link && 'cursor'};
     user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
     ${(props) => props.overflow === 'hidden' && !props.lineClamp && textEllipsis}

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

@@ -38,11 +38,11 @@ const DefaultCardContainer = styled.div<{ $isHidden?: boolean; $itemGap: number
     height: calc(100% - 2rem);
     margin: ${({ $itemGap }) => $itemGap}px;
     overflow: hidden;
+    pointer-events: auto;
+    cursor: pointer;
     background: var(--card-default-bg);
     border-radius: var(--card-default-radius);
-    cursor: pointer;
     opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
-    pointer-events: auto;
 
     &:hover {
         background: var(--card-default-bg-hover);
@@ -89,11 +89,11 @@ const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
         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;
+        background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
     }
     ${(props) =>
         props.$isFavorite &&

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

@@ -23,7 +23,7 @@ const PlayButton = styled.button<PlayButtonType>`
     justify-content: center;
     width: 50px;
     height: 50px;
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255 255 255);
     border: none;
     border-radius: 50%;
     opacity: 0.8;
@@ -41,8 +41,8 @@ const PlayButton = styled.button<PlayButtonType>`
     }
 
     svg {
-        fill: rgb(0, 0, 0);
+        fill: rgb(0 0 0);
-        stroke: rgb(0, 0, 0);
+        stroke: rgb(0 0 0);
     }
 `;
 
@@ -79,11 +79,11 @@ const FavoriteBanner = styled.div`
     left: -50px;
     width: 80px;
     height: 80px;
-    background-color: var(--primary-color);
-    box-shadow: 0 0 10px 8px rgba(0, 0, 0, 80%);
-    transform: rotate(-45deg);
-    content: '';
     pointer-events: none;
+    content: '';
+    background-color: var(--primary-color);
+    box-shadow: 0 0 10px 8px rgb(0 0 0 / 80%);
+    transform: rotate(-45deg);
 `;
 
 const ControlsRow = styled.div`

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

@@ -38,8 +38,8 @@ const PosterCardContainer = styled.div<{ $isHidden?: boolean; $itemGap: number }
     height: 100%;
     margin: ${({ $itemGap }) => $itemGap}px;
     overflow: hidden;
-    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
     pointer-events: auto;
+    opacity: ${({ $isHidden }) => ($isHidden ? 0 : 1)};
 
     .card-controls {
         opacity: 0;
@@ -66,11 +66,11 @@ const ImageContainer = styled.div<{ $isFavorite?: boolean }>`
         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;
+        background: linear-gradient(0deg, rgb(0 0 0 / 100%) 35%, rgb(0 0 0 / 0%) 100%);
+        opacity: 0;
+        transition: all 0.2s ease-in-out;
     }
 
     ${(props) =>

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

@@ -15,10 +15,10 @@ import { Skeleton } from '/@/renderer/components/skeleton';
 
 const CellContainer = styled(motion.div)<{ height: number }>`
     display: grid;
-    grid-auto-columns: 1fr;
     grid-template-areas: 'image info';
     grid-template-rows: 1fr;
     grid-template-columns: ${(props) => props.height}px minmax(0, 1fr);
+    grid-auto-columns: 1fr;
     gap: 0.5rem;
     width: 100%;
     max-width: 100%;

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

@@ -30,9 +30,9 @@ export const HeaderWrapper = styled.div<{ position: Options['position'] }>`
 const HeaderText = styled(_Text)<{ position: Options['position'] }>`
     width: 100%;
     height: 100%;
-    color: var(--ag-header-foreground-color);
     font-weight: 500;
     line-height: inherit;
+    color: var(--ag-header-foreground-color);
     text-align: ${(props) =>
         props.position === 'right'
             ? 'flex-end'

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

@@ -53,7 +53,7 @@ const TableWrapper = styled.div`
 
 const DummyHeader = styled.div<{ height?: number }>`
     position: absolute;
-    height: ${({ height }) => height || 36}px};
+    height: ${({ height }) => height || 36}px;
 `;
 
 dayjs.extend(relativeTime);

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

@@ -1,9 +1,10 @@
 import { Stack, Group } from '@mantine/core';
 import { RiAlertFill } from 'react-icons/ri';
 import { Text } from '/@/renderer/components';
+import { ReactNode } from 'react';
 
 interface ActionRequiredContainerProps {
-    children: React.ReactNode;
+    children: ReactNode;
     title: string;
 }
 

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

@@ -50,7 +50,7 @@ const DetailContainer = styled.div`
     overflow: hidden;
 
     .ag-theme-alpine-dark {
-        --ag-header-background-color: rgba(0, 0, 0, 0%) !important;
+        --ag-header-background-color: rgb(0 0 0 / 0%) !important;
     }
 `;
 

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

@@ -17,8 +17,8 @@ const SearchItem = styled.button`
     all: unset;
     box-sizing: border-box !important;
     padding: 0.5rem;
-    border-radius: 5px;
     cursor: pointer;
+    border-radius: 5px;
 
     &:hover,
     &:focus-visible {

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

@@ -10,12 +10,14 @@ interface LyricLineProps extends ComponentPropsWithoutRef<'div'> {
 }
 
 const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSize: number }>`
-    color: var(--main-fg);
-    font-weight: 600;
-    text-align: ${(props) => props.$alignment};
-    font-size: ${(props) => props.$fontSize}px;
-    opacity: 0.5;
     padding: 0 1rem;
+    font-size: ${(props) => props.$fontSize}px;
+    font-weight: 600;
+    color: var(--main-fg);
+    text-align: ${(props) => props.$alignment};
+    opacity: 0.5;
+
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 
     &.active {
         opacity: 1;
@@ -24,8 +26,6 @@ const StyledText = styled(TextTitle)<TitleProps & { $alignment: string; $fontSiz
     &.unsynchronized {
         opacity: 1;
     }
-
-    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
 `;
 
 export const LyricLine = ({ text, alignment, fontSize, ...props }: LyricLineProps) => {

src/renderer/features/lyrics/lyrics.tsx

@@ -65,8 +65,8 @@ const ScrollContainer = styled(motion.div)`
     mask-image: linear-gradient(
         180deg,
         transparent 5%,
-        rgba(0, 0, 0, 100%) 20%,
+        rgb(0 0 0 / 100%) 20%,
-        rgba(0, 0, 0, 100%) 85%,
+        rgb(0 0 0 / 100%) 85%,
         transparent 95%
     );
 

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

@@ -28,12 +28,12 @@ const SynchronizedLyricsContainer = styled.div<{ $gap: number }>`
     mask-image: linear-gradient(
         180deg,
         transparent 5%,
-        rgba(0, 0, 0, 100%) 20%,
+        rgb(0 0 0 / 100%) 20%,
-        rgba(0, 0, 0, 100%) 85%,
+        rgb(0 0 0 / 100%) 85%,
         transparent 95%
     );
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
         padding: 5vh 0;
     }
 `;

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

@@ -21,12 +21,12 @@ const UnsynchronizedLyricsContainer = styled.div<{ $gap: number }>`
     mask-image: linear-gradient(
         180deg,
         transparent 5%,
-        rgba(0, 0, 0, 100%) 20%,
+        rgb(0 0 0 / 100%) 20%,
-        rgba(0, 0, 0, 100%) 85%,
+        rgb(0 0 0 / 100%) 85%,
         transparent 95%
     );
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
         padding: 5vh 0;
     }
 `;

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

@@ -62,7 +62,7 @@ const SliderValueWrapper = styled.div<{ position: 'left' | 'right' }>`
     justify-content: center;
     max-width: 50px;
 
-    @media (max-width: 768px) {
+    @media (width <= 768px) {
         display: none;
     }
 `;
@@ -80,7 +80,7 @@ const ControlsContainer = styled.div`
     justify-content: center;
     height: 35px;
 
-    @media (max-width: 768px) {
+    @media (width <= 768px) {
         ${ButtonsContainer} {
             gap: 0;
         }

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

@@ -19,12 +19,11 @@ import {
 
 const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
     position: absolute;
-  width: 100%;
     height: 100%;
-  object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')}};
+    object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')};
     object-position: 50% 100%;
+    filter: drop-shadow(0 0 5px rgb(0 0 0 / 40%)) drop-shadow(0 0 5px rgb(0 0 0 / 40%));
     border-radius: 5px;
-  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 40%)) drop-shadow(0 0 5px rgba(0, 0, 0, 40%));
 `;
 
 const ImageContainer = styled(motion.div)`
@@ -32,8 +31,8 @@ const ImageContainer = styled(motion.div)`
     display: flex;
     align-items: flex-end;
     max-width: 100%;
-    aspect-ratio: 1/1;
     height: 65%;
+    aspect-ratio: 1/1;
     margin-bottom: 1rem;
 `;
 
@@ -42,8 +41,8 @@ interface TransparentMetadataContainer {
 }
 
 const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
-    background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
     padding: 1rem;
+    background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
     border-radius: 5px;
 
     h1 {
@@ -52,7 +51,7 @@ const MetadataContainer = styled(Stack)<TransparentMetadataContainer>`
 `;
 
 const PlayerContainer = styled(Flex)`
-    @media screen and (max-height: 640px) {
+    @media screen and (height <= 640px) {
         .full-screen-player-image-metadata {
             display: none;
             height: 100%;

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

@@ -17,9 +17,9 @@ const QueueContainer = styled.div`
     height: 100%;
 
     .ag-theme-alpine-dark {
-        --ag-header-background-color: rgba(0, 0, 0, 0%) !important;
+        --ag-header-background-color: rgb(0 0 0 / 0%) !important;
-        --ag-background-color: rgba(0, 0, 0, 0%) !important;
+        --ag-background-color: rgb(0 0 0 / 0%) !important;
-        --ag-odd-row-background-color: rgba(0, 0, 0, 0%) !important;
+        --ag-odd-row-background-color: rgb(0 0 0 / 0%) !important;
     }
 
     .ag-header {
@@ -46,11 +46,11 @@ interface TransparendGridContainerProps {
 }
 
 const GridContainer = styled.div<TransparendGridContainerProps>`
-    padding: 1rem;
-    background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-columns: 1fr;
+    padding: 1rem;
+    background: rgb(var(--main-bg-transparent) ${({ opacity }) => opacity}%);
     border-radius: 5px;
 `;
 

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

@@ -38,7 +38,7 @@ const Container = styled(motion.div)`
     justify-content: center;
     padding: 2rem;
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
         padding: 2rem 2rem 1rem;
     }
 `;
@@ -52,7 +52,7 @@ const ResponsiveContainer = styled.div`
     max-width: 2560px;
     margin-top: 5rem;
 
-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
         grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
         grid-template-columns: minmax(0, 1fr);
         margin-top: 0;

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

@@ -41,9 +41,9 @@ const Image = styled(motion.div)`
     position: relative;
     width: 60px;
     height: 60px;
-    background-color: var(--placeholder-bg);
     cursor: pointer;
-    filter: drop-shadow(0 5px 6px rgb(0, 0, 0, 50%));
+    background-color: var(--placeholder-bg);
+    filter: drop-shadow(0 5px 6px rgb(0 0 0 / 50%));
 
     ${fadeIn};
     animation: fadein 0.2s ease-in-out;
@@ -68,10 +68,10 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
     width: 95%;
     max-width: 20vw;
     overflow: hidden;
-    color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
     line-height: 1.3;
-    white-space: nowrap;
+    color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
     text-overflow: ellipsis;
+    white-space: nowrap;
 
     a {
         color: ${(props) => props.$secondary && 'var(--text-secondary)'};
@@ -84,7 +84,7 @@ const LeftControlsContainer = styled.div`
     height: 100%;
     padding-left: 1rem;
 
-    @media (max-width: 640px) {
+    @media (width <= 640px) {
         ${ImageWrapper} {
             display: none;
         }

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

@@ -73,14 +73,14 @@ const ButtonTertiaryVariant = css`
 type StyledPlayerButtonProps = Omit<PlayerButtonProps, 'icon'>;
 
 const StyledPlayerButton = styled(UnstyledButton)<StyledPlayerButtonProps>`
+    all: unset;
     display: flex;
     align-items: center;
     width: 100%;
     padding: 0.5rem;
     overflow: visible;
-    background: var(--playerbar-btn-bg-hover);
-    all: unset;
     cursor: default;
+    background: var(--playerbar-btn-bg-hover);
 
     button {
         display: flex;

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

@@ -30,7 +30,7 @@ const PlayerbarControlsGrid = styled.div`
     gap: 1rem;
     height: 100%;
 
-    @media (max-width: 768px) {
+    @media (width <= 768px) {
         grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 0.5fr);
     }
 `;

src/renderer/features/playlists/components/playlist-detail-content.tsx

@@ -36,7 +36,7 @@ const ContentContainer = styled.div`
     overflow: hidden;
 
     .ag-theme-alpine-dark {
-        --ag-header-background-color: rgba(0, 0, 0, 0%) !important;
+        --ag-header-background-color: rgb(0 0 0 / 0%) !important;
     }
 `;
 

src/renderer/features/playlists/components/playlist-list-table-view.tsx

@@ -1,3 +1,4 @@
+import { MutableRefObject } from 'react';
 import { RowDoubleClickedEvent } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import { generatePath, useNavigate } from 'react-router';
@@ -11,7 +12,7 @@ import { useCurrentServer, useGeneralSettings } from '/@/renderer/store';
 
 interface PlaylistListTableViewProps {
     itemCount?: number;
-    tableRef: React.MutableRefObject<AgGridReactType | null>;
+    tableRef: MutableRefObject<AgGridReactType | null>;
 }
 
 export const PlaylistListTableView = ({ tableRef, itemCount }: PlaylistListTableViewProps) => {

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

@@ -15,10 +15,10 @@ export const Command = styled(Cmdk)`
     input[cmdk-input] {
         width: 100%;
         height: 1.5rem;
-        margin-bottom: 1rem;
         padding: 1.3rem 0.5rem;
-        color: var(--input-fg);
+        margin-bottom: 1rem;
         font-family: var(--content-font-family);
+        color: var(--input-fg);
         background: var(--input-bg);
         border: none;
         border-radius: 5px;
@@ -45,11 +45,11 @@ export const Command = styled(Cmdk)`
         gap: 0.5rem;
         align-items: center;
         padding: 0.5rem;
-        color: var(--btn-default-fg);
         font-family: var(--content-font-family);
+        color: var(--btn-default-fg);
+        cursor: pointer;
         background: var(--btn-default-bg);
         border-radius: 5px;
-        cursor: pointer;
 
         svg {
             width: 1.2rem;

src/renderer/features/search/components/library-command-item.tsx

@@ -17,10 +17,10 @@ const Item = styled(Flex)``;
 
 const ItemGrid = styled.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);
+    grid-auto-columns: 1fr;
     gap: 0.5rem;
     width: 100%;
     max-width: 100%;

src/renderer/features/servers/components/server-list.tsx

@@ -18,6 +18,7 @@ export const ServerList = () => {
     const handleAddServerModal = () => {
         openContextModal({
             innerProps: {
+                // eslint-disable-next-line react/no-unstable-nested-components
                 modalBody: (vars: ContextModalVars) => (
                     <AddServerForm onCancel={() => vars.context.closeModal(vars.id)} />
                 ),

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, KeyboardEvent, ChangeEvent } from 'react';
 import { Group } from '@mantine/core';
 import isElectron from 'is-electron';
 import debounce from 'lodash/debounce';
@@ -50,7 +50,7 @@ export const HotkeyManagerSettings = () => {
     const [selected, setSelected] = useState<BindingActions | null>(null);
 
     const debouncedSetHotkey = debounce(
-        (binding: BindingActions, e: React.KeyboardEvent<HTMLInputElement>) => {
+        (binding: BindingActions, e: KeyboardEvent<HTMLInputElement>) => {
             e.preventDefault();
             const IGNORED_KEYS = ['Control', 'Alt', 'Shift', 'Meta', ' ', 'Escape'];
             const keys = [];
@@ -101,7 +101,7 @@ export const HotkeyManagerSettings = () => {
     ]);
 
     const handleSetGlobalHotkey = useCallback(
-        (binding: BindingActions, e: React.ChangeEvent<HTMLInputElement>) => {
+        (binding: BindingActions, e: ChangeEvent<HTMLInputElement>) => {
             const updatedBindings = {
                 ...bindings,
                 [binding]: { ...bindings[binding], isGlobal: e.currentTarget.checked },

src/renderer/features/settings/components/settings-section.tsx

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 import { SettingsOptions } from '/@/renderer/features/settings/components/settings-option';
 
 export type SettingOption = {
-    control: JSX.Element;
+    control: ReactNode;
-    description: string | JSX.Element;
+    description: string | ReactNode;
     isHidden?: boolean;
     note?: string;
     title: string;

src/renderer/features/shared/components/filter-bar.tsx

@@ -5,7 +5,7 @@ import { Paper } from '/@/renderer/components';
 const StyledFilterBar = styled(Paper)`
     z-index: 1;
     padding: 1rem;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 65%);
+    box-shadow: 0 5px 15px rgb(0 0 0 / 65%);
 `;
 
 export const FilterBar = ({ children, ...props }: PaperProps) => {

src/renderer/features/shared/components/library-background-overlay.tsx

@@ -6,9 +6,9 @@ export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>
     width: 100%;
     height: 20vh;
     min-height: 200px;
+    pointer-events: none;
+    user-select: none;
     background: ${(props) => props.backgroundColor};
     background-image: var(--bg-subheader-overlay);
     opacity: 0.3;
-    user-select: none;
-    pointer-events: none;
 `;

src/renderer/features/shared/components/resize-handle.tsx

@@ -27,7 +27,7 @@ export const ResizeHandle = styled.div<{
         left: ${(props) => props.placement === 'left' && 0};
         width: 1px;
         height: 100%;
-        background-color: var(--sidebar-handle-bg);
         content: '';
+        background-color: var(--sidebar-handle-bg);
     }
 `;

src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx

@@ -1,6 +1,6 @@
 import { createPolymorphicComponent, Flex } from '@mantine/core';
 import { motion } from 'framer-motion';
-import { forwardRef } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { useMatch } from 'react-router';
 import styled from 'styled-components';
 import { Text } from '/@/renderer/components';
@@ -9,11 +9,11 @@ const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
     position: relative;
     width: 100%;
     padding: 0.9rem 0.3rem;
-    border-right: var(--sidebar-border);
-    cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
-    opacity: ${(props) => props.$disabled && 0.6};
-    user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
     pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
+    cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
+    user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
+    border-right: var(--sidebar-border);
+    opacity: ${(props) => props.$disabled && 0.6};
 
     svg {
         fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
@@ -44,9 +44,9 @@ const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
 const TextWrapper = styled.div`
     width: 100%;
     overflow: hidden;
-    white-space: nowrap;
     text-align: center;
     text-overflow: ellipsis;
+    white-space: nowrap;
 `;
 
 const ActiveTabIndicator = styled(motion.div)`
@@ -63,9 +63,9 @@ const ActiveTabIndicator = styled(motion.div)`
 `;
 
 interface CollapsedSidebarItemProps {
-    activeIcon: React.ReactNode;
+    activeIcon: ReactNode;
     disabled?: boolean;
-    icon: React.ReactNode;
+    icon: ReactNode;
     label: string;
     route?: string;
 }

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -42,7 +42,7 @@ const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
     max-height: ${(props) =>
         props.windowBarStyle === Platform.WEB || props.windowBarStyle === Platform.LINUX
             ? 'calc(100vh - 149px)'
-            : 'calc(100vh - 119px)'}; // Playerbar (90px), titlebar (65px), windowbar (30px)
+            : 'calc(100vh - 119px)'};
     user-select: none;
 `;
 

src/renderer/features/sidebar/components/sidebar-item.tsx

@@ -12,8 +12,8 @@ interface ListItemProps extends FlexProps {
 
 const StyledItem = styled(Flex)`
     width: 100%;
-    font-weight: 600;
     font-family: var(--content-font-family);
+    font-weight: 600;
 
     &:focus-visible {
         border: 1px solid var(--primary-color);
@@ -34,8 +34,8 @@ const ItemStyle = css`
 `;
 
 const _ItemLink = styled(StyledItem)<LinkProps & { disabled?: boolean }>`
-    opacity: ${(props) => props.disabled && 0.6};
     pointer-events: ${(props) => props.disabled && 'none'};
+    opacity: ${(props) => props.disabled && 0.6};
 
     &:focus-visible {
         border: 1px solid var(--primary-color);

src/renderer/layouts/window-bar.tsx

@@ -5,13 +5,13 @@ import styled from 'styled-components';
 import { useCurrentStatus, useQueueStatus } from '/@/renderer/store';
 import { useWindowSettings } from '/@/renderer/store/settings.store';
 import { Platform, PlayerStatus } from '/@/renderer/types';
-import appIcon from '../../../assets/icons/32x32.png';
 import macCloseHover from './assets/close-mac-hover.png';
 import macClose from './assets/close-mac.png';
 import macMaxHover from './assets/max-mac-hover.png';
 import macMax from './assets/max-mac.png';
 import macMinHover from './assets/min-mac-hover.png';
 import macMin from './assets/min-mac.png';
+import appIcon from '../../../assets/icons/32x32.png';
 
 const WindowsContainer = styled.div`
     display: flex;
@@ -55,8 +55,8 @@ const PlayerStatusContainer = styled.div`
     max-width: 45vw;
     padding-left: 1rem;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
 `;
 
 const browser = isElectron() ? window.electron.browser : null;