Lint files based on updated rules

2023-09-15 20:42:38 -07:00 · 2023-09-15 20:42:38 -07:00 · ec457d5125
commit ec457d5125
parent d45b01625b
57 changed files with 153 additions and 150 deletions
--- a/src/main/features/core/lyrics/genius.ts
+++ b/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';

--- a/src/main/features/core/lyrics/lrclib.ts
+++ b/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';
--- a/src/main/features/core/settings/index.ts
+++ b/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();

--- a/src/main/preload/local-settings.ts
+++ b/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();

--- a/src/remote/components/buttons/remote-button.tsx
+++ b/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;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    children: ReactNode;
+    onClick?: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseDown?: (e: MouseEvent<HTMLButtonElement, MouseEvent>) => void;
    ref: Ref<HTMLButtonElement>;
 }

--- a/src/remote/components/wrapped-slider.tsx
+++ b/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;
 }

--- a/src/renderer/components/button/index.tsx
+++ b/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 {
--- a/src/renderer/components/card/album-card.tsx
+++ b/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;
 `;

--- a/src/renderer/components/card/card-controls.tsx
+++ b/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);
-        stroke: rgb(0, 0, 0);
+        fill: rgb(0 0 0);
+        stroke: rgb(0 0 0);
    }
 `;

--- a/src/renderer/components/card/card-rows.tsx
+++ b/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;
 `;

--- a/src/renderer/components/card/poster-card.tsx
+++ b/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 {
--- a/src/renderer/components/context-menu/index.tsx
+++ b/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;
            },
--- a/src/renderer/components/dialog/index.tsx
+++ b/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%);
    }
 `;

--- a/src/renderer/components/dropdown-menu/index.tsx
+++ b/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) => {
--- a/src/renderer/components/feature-carousel/index.tsx
+++ b/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)`
--- a/src/renderer/components/page-header/index.tsx
+++ b/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>
--- a/src/renderer/components/paper/index.tsx
+++ b/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>`
--- a/src/renderer/components/popover/index.tsx
+++ b/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);
 `;
--- a/src/renderer/components/segmented-control/index.tsx
+++ b/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);
--- a/src/renderer/components/slider/index.tsx
+++ b/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);
    }
 `;
--- a/src/renderer/components/tabs/index.tsx
+++ b/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);
    }

--- a/src/renderer/components/text-title/index.tsx
+++ b/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,
--- a/src/renderer/components/text/index.tsx
+++ b/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}
--- a/src/renderer/components/virtual-grid/grid-card/default-card.tsx
+++ b/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 &&
--- a/src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
+++ b/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);
-        stroke: rgb(0, 0, 0);
+        fill: 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`
--- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx
+++ b/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) =>
--- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx
+++ b/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%;
--- a/src/renderer/components/virtual-table/headers/generic-table-header.tsx
+++ b/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'
--- a/src/renderer/components/virtual-table/index.tsx
+++ b/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);
--- a/src/renderer/features/action-required/components/action-required-container.tsx
+++ b/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;
 }

--- a/src/renderer/features/artists/components/album-artist-detail-content.tsx
+++ b/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;
    }
 `;

--- a/src/renderer/features/lyrics/components/lyrics-search-form.tsx
+++ b/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 {
--- a/src/renderer/features/lyrics/lyric-line.tsx
+++ b/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) => {
--- a/src/renderer/features/lyrics/lyrics.tsx
+++ b/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%,
-        rgba(0, 0, 0, 100%) 85%,
+        rgb(0 0 0 / 100%) 20%,
+        rgb(0 0 0 / 100%) 85%,
        transparent 95%
    );

--- a/src/renderer/features/lyrics/synchronized-lyrics.tsx
+++ b/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%,
-        rgba(0, 0, 0, 100%) 85%,
+        rgb(0 0 0 / 100%) 20%,
+        rgb(0 0 0 / 100%) 85%,
        transparent 95%
    );

-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
        padding: 5vh 0;
    }
 `;
--- a/src/renderer/features/lyrics/unsynchronized-lyrics.tsx
+++ b/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%,
-        rgba(0, 0, 0, 100%) 85%,
+        rgb(0 0 0 / 100%) 20%,
+        rgb(0 0 0 / 100%) 85%,
        transparent 95%
    );

-    @media screen and (max-width: 768px) {
+    @media screen and (width <= 768px) {
        padding: 5vh 0;
    }
 `;
--- a/src/renderer/features/player/components/center-controls.tsx
+++ b/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;
        }
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@ -18,13 +18,12 @@ import {
 } from '/@/renderer/store';

 const Image = styled(motion.img)<{ $useAspectRatio: boolean }>`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  object-fit: ${({ $useAspectRatio }) => ($useAspectRatio ? 'contain' : 'cover')}};
-  object-position: 50% 100%;
-  border-radius: 5px;
-  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 40%)) drop-shadow(0 0 5px rgba(0, 0, 0, 40%));
+    position: absolute;
+    height: 100%;
+    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;
 `;

 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%;
--- a/src/renderer/features/player/components/full-screen-player-queue.tsx
+++ b/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-background-color: rgba(0, 0, 0, 0%) !important;
-        --ag-odd-row-background-color: rgba(0, 0, 0, 0%) !important;
+        --ag-header-background-color: rgb(0 0 0 / 0%) !important;
+        --ag-background-color: rgb(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;
 `;

--- a/src/renderer/features/player/components/full-screen-player.tsx
+++ b/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;
--- a/src/renderer/features/player/components/left-controls.tsx
+++ b/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;
        }
--- a/src/renderer/features/player/components/player-button.tsx
+++ b/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;
--- a/src/renderer/features/player/components/playerbar.tsx
+++ b/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);
    }
 `;
--- a/src/renderer/features/playlists/components/playlist-detail-content.tsx
+++ b/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;
    }
 `;

--- a/src/renderer/features/playlists/components/playlist-list-table-view.tsx
+++ b/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) => {
--- a/src/renderer/features/search/components/command.tsx
+++ b/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;
--- a/src/renderer/features/search/components/library-command-item.tsx
+++ b/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%;
--- a/src/renderer/features/servers/components/server-list.tsx
+++ b/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)} />
                ),
--- a/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx
+++ b/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 },
--- a/src/renderer/features/settings/components/settings-section.tsx
+++ b/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;
-    description: string | JSX.Element;
+    control: ReactNode;
+    description: string | ReactNode;
    isHidden?: boolean;
    note?: string;
    title: string;
--- a/src/renderer/features/shared/components/filter-bar.tsx
+++ b/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) => {
--- a/src/renderer/features/shared/components/library-background-overlay.tsx
+++ b/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;
 `;
--- a/src/renderer/features/shared/components/resize-handle.tsx
+++ b/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);
    }
 `;
--- a/src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
+++ b/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;
 }
--- a/src/renderer/features/sidebar/components/collapsed-sidebar.tsx
+++ b/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;
 `;

--- a/src/renderer/features/sidebar/components/sidebar-item.tsx
+++ b/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);
--- a/src/renderer/layouts/window-bar.tsx
+++ b/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;