Update lint rules

src/UtilTypes.d.ts

@@ -44,7 +44,7 @@ type ExtractValueWithDefaultFlag<T extends ValueWithDefaultFlag<any>> = T extend
 
 type MergeObjectsArray<T extends object[]> = T extends [infer F, ...infer R]
     ? F & MergeObjectsArray<R extends object[] ? R : []>
-    : {};
+    : Record<string, never>;
 
 type OmitNotMatching<T, K extends keyof T> = {
     [P in K]: T[K];

src/assets/SuwayomiLogo.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import type { SvgIconProps } from '@mui/material/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 export const SuwayomiLogo = ({
     circleRingColor = '#35d4d5',

src/base/AppRoute.constants.ts

@@ -6,11 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { SourceType } from '@/lib/graphql/generated/graphql.ts';
-import { MangaIdInfo } from '@/features/manga/Manga.types.ts';
+import type { SourceType } from '@/lib/graphql/generated/graphql.ts';
+import type { MangaIdInfo } from '@/features/manga/Manga.types.ts';
 
-import { ChapterSourceOrderInfo } from '@/features/chapter/Chapter.types.ts';
-import { BrowseTab } from '@/features/browse/Browse.types.ts';
+import type { ChapterSourceOrderInfo } from '@/features/chapter/Chapter.types.ts';
+import type { BrowseTab } from '@/features/browse/Browse.types.ts';
 import { SearchParam } from '@/base/Base.types.ts';
 import { UrlUtil } from '@/lib/UrlUtil.ts';
 

src/base/Base.types.ts

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
-import { ReactNode } from 'react';
+import type { MessageDescriptor } from '@lingui/core';
+import type { ReactNode } from 'react';
 
 export enum GridLayout {
     Compact = 0,

src/base/IsoLanguages.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { I18nResourceCode } from '@/i18n';
+import type { I18nResourceCode } from '@/i18n';
 
 export type ISOLanguage = {
     name: string;

src/base/components/AppbarSearch.tsx

@@ -74,7 +74,9 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
         updateSearchOpenState(false);
     };
     const handleBlur = () => {
-        if (!searchString) updateSearchOpenState(false);
+        if (!searchString) {
+            updateSearchOpenState(false);
+        }
     };
 
     useHotkeys(

src/base/components/AvatarSpinner.tsx

@@ -6,8 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Avatar, { AvatarProps } from '@mui/material/Avatar';
-import { SpinnerImage, SpinnerImageProps } from '@/base/components/SpinnerImage.tsx';
+import type { AvatarProps } from '@mui/material/Avatar';
+import Avatar from '@mui/material/Avatar';
+import type { SpinnerImageProps } from '@/base/components/SpinnerImage.tsx';
+import { SpinnerImage } from '@/base/components/SpinnerImage.tsx';
 
 export const AvatarSpinner = ({
     iconUrl,

src/base/components/CustomTooltip.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
+import type { TooltipProps } from '@mui/material/Tooltip';
+import Tooltip from '@mui/material/Tooltip';
 
 export const CustomTooltip = ({
     children,

src/base/components/SpinnerImage.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { useState, useEffect, useCallback, useRef, Ref } from 'react';
+import type { Ref } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -14,11 +15,12 @@ import Button from '@mui/material/Button';
 import BrokenImageIcon from '@mui/icons-material/BrokenImage';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import ImageIcon from '@mui/icons-material/Image';
-import { SxProps, Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import { useLingui } from '@lingui/react/macro';
 import { usePrevious } from '@mantine/hooks';
-import { ImageRequest, requestManager } from '@/lib/requests/RequestManager.ts';
-import { Priority } from '@/lib/Queue.ts';
+import type { ImageRequest } from '@/lib/requests/RequestManager.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import type { Priority } from '@/lib/Queue.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx';
 import { noOp } from '@/lib/HelperFunctions.ts';

src/base/components/buttons/ButtonSelect.tsx

@@ -10,7 +10,7 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import { MultiValueButtonProps } from '@/base/Base.types.ts';
+import type { MultiValueButtonProps } from '@/base/Base.types.ts';
 import { Superscript } from '@/base/components/texts/Superscript.tsx';
 
 export const ButtonSelect = <Value extends string | number>({

src/base/components/buttons/CustomButton.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Button, { ButtonProps } from '@mui/material/Button';
+import type { ButtonProps } from '@mui/material/Button';
+import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 
 export const CustomButton = <C extends React.ElementType>({

src/base/components/buttons/CustomButtonIcon.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Button, { ButtonProps } from '@mui/material/Button';
+import type { ButtonProps } from '@mui/material/Button';
+import Button from '@mui/material/Button';
 
 export const CustomButtonIcon = <C extends React.ElementType>({
     children,

src/base/components/buttons/ResetButton.tsx

@@ -6,9 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Button, { ButtonProps } from '@mui/material/Button';
+import type { ButtonProps } from '@mui/material/Button';
+import Button from '@mui/material/Button';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import type { IconButtonProps } from '@mui/material/IconButton';
+import IconButton from '@mui/material/IconButton';
 import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 

src/base/components/buttons/ValueRotationButton.tsx

@@ -6,11 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ReactNode, useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
 import Button from '@mui/material/Button';
 import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import { MultiValueButtonProps } from '@/base/Base.types.ts';
+import type { MultiValueButtonProps } from '@/base/Base.types.ts';
 import { getNextRotationValue } from '@/base/utils/ValueRotationButton.utils.ts';
 import { Superscript } from '@/base/components/texts/Superscript.tsx';
 

src/base/components/downloads/DownloadStateIndicator.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -14,7 +14,7 @@ import { useLingui } from '@lingui/react/macro';
 import { msg } from '@lingui/core/macro';
 import { DownloadState } from '@/lib/graphql/generated/graphql.ts';
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
-import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import type { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 
 const DOWNLOAD_STATE_TO_TRANSLATION_MAP: { [state in DownloadState]: MessageDescriptor } = {
     DOWNLOADING: msg`Downloading`,

src/base/components/feedback/EmptyView.tsx

@@ -10,7 +10,7 @@
 
 import { type JSX, useMemo, useState } from 'react';
 import Typography from '@mui/material/Typography';
-import { SxProps, Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Collapse from '@mui/material/Collapse';

src/base/components/feedback/EmptyViewAbsoluteCentered.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { EmptyView, EmptyViewProps } from '@/base/components/feedback/EmptyView.tsx';
+import type { EmptyViewProps } from '@/base/components/feedback/EmptyView.tsx';
+import { EmptyView } from '@/base/components/feedback/EmptyView.tsx';
 
 export function EmptyViewAbsoluteCentered({ sx, ...emptyViewProps }: EmptyViewProps) {
     return (

src/base/components/feedback/ErrorBoundary.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Component, ErrorInfo, ReactNode, useEffect, useRef, useState } from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
+import { Component, useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { t } from '@lingui/core/macro';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';

src/base/components/feedback/Progress.tsx

@@ -7,7 +7,8 @@
  */
 
 import Box from '@mui/material/Box';
-import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
+import type { CircularProgressProps } from '@mui/material/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 
 export const Progress = ({

src/base/components/feedback/SnackbarWithDescription.tsx

@@ -6,9 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
-import { closeSnackbar, CustomContentProps, SnackbarContent, VariantType } from 'notistack';
-import { ForwardedRef, Fragment, memo } from 'react';
+import type { MessageDescriptor } from '@lingui/core';
+import type { CustomContentProps, VariantType } from 'notistack';
+import { closeSnackbar, SnackbarContent } from 'notistack';
+import type { ForwardedRef } from 'react';
+import { Fragment, memo } from 'react';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Button from '@mui/material/Button';

src/base/components/inputs/ButtonSelectInput.tsx

@@ -8,7 +8,7 @@
 
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 import { ButtonSelect } from '@/base/components/buttons/ButtonSelect.tsx';
 

src/base/components/inputs/CheckboxInput.tsx

@@ -6,8 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
-import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import type { CheckboxProps } from '@mui/material/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
+import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import React from 'react';
 
 interface IProps extends CheckboxProps {

src/base/components/inputs/PasswordTextField.tsx

@@ -7,7 +7,8 @@
  */
 
 import InputAdornment from '@mui/material/InputAdornment';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import type { TextFieldProps } from '@mui/material/TextField';
+import TextField from '@mui/material/TextField';
 import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Visibility from '@mui/icons-material/Visibility';

src/base/components/inputs/RadioInput.tsx

@@ -7,7 +7,8 @@
  */
 
 import FormControlLabel from '@mui/material/FormControlLabel';
-import Radio, { RadioProps } from '@mui/material/Radio';
+import type { RadioProps } from '@mui/material/Radio';
+import Radio from '@mui/material/Radio';
 import React from 'react';
 
 export interface RadioInputProps extends RadioProps {

src/base/components/inputs/SearchTextField.tsx

@@ -6,8 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import type { TextFieldProps } from '@mui/material/TextField';
+import TextField from '@mui/material/TextField';
+import type { IconButtonProps } from '@mui/material/IconButton';
+import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
 import CancelIcon from '@mui/icons-material/Cancel';
 

src/base/components/inputs/SliderInput.tsx

@@ -6,8 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Slider, { SliderProps } from '@mui/material/Slider';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import type { SliderProps } from '@mui/material/Slider';
+import Slider from '@mui/material/Slider';
+import type { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import { ResetButton } from '@/base/components/buttons/ResetButton.tsx';
 

src/base/components/inputs/SortRadioInput.tsx

@@ -9,7 +9,8 @@
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import { memo } from 'react';
-import { RadioInput, RadioInputProps } from '@/base/components/inputs/RadioInput.tsx';
+import type { RadioInputProps } from '@/base/components/inputs/RadioInput.tsx';
+import { RadioInput } from '@/base/components/inputs/RadioInput.tsx';
 
 interface IProps extends RadioInputProps {
     sortDescending?: boolean | null | undefined;

src/base/components/inputs/ThreeStateCheckbox.tsx

@@ -7,14 +7,19 @@
  */
 
 import DisabledByDefaultRounded from '@mui/icons-material/DisabledByDefaultRounded';
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+import type { CheckboxProps } from '@mui/material/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
 import React, { useCallback } from 'react';
 
 type CheckState = boolean | undefined | null;
 
 function nextState(state: CheckState): CheckState {
-    if (state === true) return false;
-    if (state === false) return undefined;
+    if (state === true) {
+        return false;
+    }
+    if (state === false) {
+        return undefined;
+    }
     return true;
 }
 

src/base/components/inputs/ThreeStateCheckboxInput.tsx

@@ -8,7 +8,8 @@
 
 import FormControlLabel from '@mui/material/FormControlLabel';
 import React from 'react';
-import { ThreeStateCheckbox, ThreeStateCheckboxProps } from '@/base/components/inputs/ThreeStateCheckbox.tsx';
+import type { ThreeStateCheckboxProps } from '@/base/components/inputs/ThreeStateCheckbox.tsx';
+import { ThreeStateCheckbox } from '@/base/components/inputs/ThreeStateCheckbox.tsx';
 
 interface IProps extends ThreeStateCheckboxProps {
     label?: string;

src/base/components/lists/ListItemLink.tsx

@@ -7,7 +7,8 @@
  */
 
 import { Link } from 'react-router-dom';
-import ListItemButton, { ListItemButtonProps } from '@mui/material/ListItemButton';
+import type { ListItemButtonProps } from '@mui/material/ListItemButton';
+import ListItemButton from '@mui/material/ListItemButton';
 
 export function ListItemLink(props: ListItemButtonProps<typeof Link>) {
     return <ListItemButton component={Link} {...props} />;

src/base/components/lists/cards/ListCardAvatar.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 import { AvatarSpinner } from '@/base/components/AvatarSpinner.tsx';
 
 export const ListCardAvatar = (props: ComponentProps<typeof AvatarSpinner>) => {

src/base/components/lists/cards/ListCardContent.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import CardContent, { CardContentProps } from '@mui/material/CardContent';
+import type { CardContentProps } from '@mui/material/CardContent';
+import CardContent from '@mui/material/CardContent';
 
 export const ListCardContent = ({ children, ...props }: CardContentProps) => (
     <CardContent

src/base/components/lists/cards/OptionalCardActionAreaLink.tsx

@@ -8,7 +8,7 @@
 
 import { Link } from 'react-router-dom';
 import CardActionArea from '@mui/material/CardActionArea';
-import { ComponentProps } from 'react';
+import type { ComponentProps } from 'react';
 
 export const OptionalCardActionAreaLink = ({
     disabled,

src/base/components/menu/IconMenuItem.tsx

@@ -11,12 +11,14 @@
  */
 
 import ListItemIcon from '@mui/material/ListItemIcon';
-import MenuItem, { MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';
-import { SxProps, Theme } from '@mui/material/styles';
-import React, { Ref } from 'react';
+import type { MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';
+import MenuItem from '@mui/material/MenuItem';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { Ref } from 'react';
+import React from 'react';
 
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
+import type { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import ListItemText from '@mui/material/ListItemText';
 
 type IconMenuItemProps = {

src/base/components/menu/Menu.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import MuiMenu, { MenuProps } from '@mui/material/Menu';
+import type { MenuProps } from '@mui/material/Menu';
+import MuiMenu from '@mui/material/Menu';
 import { useState, type JSX } from 'react';
 
 export const Menu = ({

src/base/components/menu/Menu.utils.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import { i18n } from '@/i18n';
 
 export const createGetMenuItemTitle =

src/base/components/menu/MenuItem.tsx

@@ -8,9 +8,10 @@
 
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import MuiMenuItem, { MenuItemProps } from '@mui/material/MenuItem';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import type { MenuItemProps } from '@mui/material/MenuItem';
+import MuiMenuItem from '@mui/material/MenuItem';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
+import type { SvgIconTypeMap } from '@mui/material/SvgIcon';
 
 interface IProps extends MenuItemProps {
     title: string;

src/base/components/menu/NestedMenuItem.tsx

@@ -12,9 +12,10 @@
  * with a few changes to fix a bug on mobile devices where opening the sub menu immediately triggered the on click of the underlying menu item
  */
 
-import Menu, { MenuProps as MuiMenuProps } from '@mui/material/Menu';
-import { MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';
-import {
+import type { MenuProps as MuiMenuProps } from '@mui/material/Menu';
+import Menu from '@mui/material/Menu';
+import type { MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';
+import type {
     ElementType,
     HTMLAttributes,
     KeyboardEvent,
@@ -22,16 +23,15 @@ import {
     MouseEvent,
     ReactNode,
     RefAttributes,
-    useRef,
-    useState,
     Ref,
 } from 'react';
+import { useRef, useState } from 'react';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import Box from '@mui/material/Box';
 
-import { OverridableComponent } from '@mui/material/OverridableComponent';
-import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import type { OverridableComponent } from '@mui/material/OverridableComponent';
+import type { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import { useMergedRef } from '@mantine/hooks';
 import { IconMenuItem } from '@/base/components/menu/IconMenuItem.tsx';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';

src/base/components/modals/ConfirmDialog.tsx

@@ -12,7 +12,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
-import { AwaitableComponentProps } from 'awaitable-component';
+import type { AwaitableComponentProps } from 'awaitable-component';
 import { Link as RouterLink } from 'react-router-dom';
 import { useLingui } from '@lingui/react/macro';
 

src/base/components/modals/LoginDialog.tsx

@@ -7,7 +7,8 @@
  */
 
 import Dialog from '@mui/material/Dialog';
-import { AwaitableComponent, AwaitableComponentProps } from 'awaitable-component';
+import type { AwaitableComponentProps } from 'awaitable-component';
+import { AwaitableComponent } from 'awaitable-component';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import TextField from '@mui/material/TextField';

src/base/components/settings/CheckboxListSetting.tsx

@@ -14,7 +14,7 @@ import Dialog from '@mui/material/Dialog';
 import FormGroup from '@mui/material/FormGroup';
 import Stack from '@mui/material/Stack';
 import { useCallback, useMemo } from 'react';
-import { CheckboxProps } from '@mui/material/Checkbox';
+import type { CheckboxProps } from '@mui/material/Checkbox';
 import { useLingui } from '@lingui/react/macro';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { useSelectableCollection } from '@/base/collection/hooks/useSelectableCollection.ts';

src/base/components/settings/DateSetting.tsx

@@ -92,7 +92,9 @@ export const DateSetting = ({
                         <DatePicker
                             value={dialogValue ? dayjs(Number(dialogValue)) : null}
                             onChange={(date) => {
-                                if (!date) return;
+                                if (!date) {
+                                    return;
+                                }
                                 setDialogValue(date.valueOf().toString());
                             }}
                         />

src/base/components/settings/MutableListSetting.tsx

@@ -24,7 +24,8 @@ import DialogContentText from '@mui/material/DialogContentText';
 import InfoIcon from '@mui/icons-material/Info';
 import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import { TextSetting, TextSettingProps } from '@/base/components/settings/text/TextSetting.tsx';
+import type { TextSettingProps } from '@/base/components/settings/text/TextSetting.tsx';
+import { TextSetting } from '@/base/components/settings/text/TextSetting.tsx';
 import { TextSettingDialog } from '@/base/components/settings/text/TextSettingDialog.tsx';
 import { makeToast } from '@/base/utils/Toast.ts';
 

src/base/components/settings/NumberSetting.tsx

@@ -23,7 +23,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Slider from '@mui/material/Slider';
 import DialogContentText from '@mui/material/DialogContentText';
 import InfoIcon from '@mui/icons-material/Info';
-import { SxProps, Theme } from '@mui/material/styles';
+import type { SxProps, Theme } from '@mui/material/styles';
 import { useLingui } from '@lingui/react/macro';
 
 type BaseProps = {

src/base/components/settings/SelectSetting.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';

src/base/components/settings/text/TextSetting.tsx

@@ -9,7 +9,8 @@
 import ListItemText from '@mui/material/ListItemText';
 import ListItemButton from '@mui/material/ListItemButton';
 import { useState } from 'react';
-import { TextSettingDialog, TextSettingDialogProps } from '@/base/components/settings/text/TextSettingDialog.tsx';
+import type { TextSettingDialogProps } from '@/base/components/settings/text/TextSettingDialog.tsx';
+import { TextSettingDialog } from '@/base/components/settings/text/TextSettingDialog.tsx';
 
 export type TextSettingProps = Omit<TextSettingDialogProps, 'isDialogOpen' | 'setIsDialogOpen' | 'value'> &
     Required<Pick<TextSettingDialogProps, 'value'>> & {
@@ -27,7 +28,7 @@ export const TextSetting = (props: TextSettingProps) => {
             <ListItemButton disabled={disabled} onClick={() => setIsDialogOpen(true)}>
                 <ListItemText
                     primary={settingName}
-                    secondary={settingDescription ?? (isPassword ? value.replace(/./g, '*') : value)}
+                    secondary={settingDescription ?? (isPassword ? value.replaceAll(/./g, '*') : value)}
                     secondaryTypographyProps={{
                         sx: { display: 'flex', flexDirection: 'column', wordWrap: 'break-word' },
                     }}

src/base/components/tabs/TabPanel.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Box, { BoxProps } from '@mui/material/Box';
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
 import React from 'react';
 
 interface IProps extends BoxProps {

src/base/components/tabs/TabsMenu.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Tabs, { TabsProps } from '@mui/material/Tabs';
+import type { TabsProps } from '@mui/material/Tabs';
+import Tabs from '@mui/material/Tabs';
 import { styled } from '@mui/material/styles';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 

src/base/components/tabs/TabsWrapper.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Box, { BoxProps } from '@mui/material/Box';
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
 
 export const TabsWrapper = ({ children, ...props }: BoxProps) => (
     <Box {...props} sx={{ ...props.sx, position: 'relative', height: `100%` }}>

src/base/components/texts/Metadata.tsx

@@ -6,9 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Stack, { StackProps } from '@mui/material/Stack';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import { ReactNode } from 'react';
+import type { StackProps } from '@mui/material/Stack';
+import Stack from '@mui/material/Stack';
+import type { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
+import type { ReactNode } from 'react';
 
 export const Metadata = ({
     title,

src/base/components/texts/TypographyMaxLines.tsx

@@ -6,8 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { styled, Theme, TypographyVariant } from '@mui/material/styles';
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import type { Theme, TypographyVariant } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
+import type { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
 import { shouldForwardProp } from '@/base/utils/ShouldForwardProp.ts';
 
 const DEFAULT_LINE_HEIGHT = '1.5';

src/base/components/virtuoso/StyledGroupHeader.tsx

@@ -7,7 +7,7 @@
  */
 
 import { styled } from '@mui/material/styles';
-import { TypographyProps } from '@mui/material/Typography';
+import type { TypographyProps } from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import { shouldForwardProp } from '@/base/utils/ShouldForwardProp.ts';
 

src/base/components/virtuoso/StyledGroupedVirtuoso.tsx

@@ -6,8 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ContextProp, TopItemListProps } from 'react-virtuoso';
-import { ComponentProps, useMemo } from 'react';
+import type { ContextProp, TopItemListProps } from 'react-virtuoso';
+import type { ComponentProps } from 'react';
+import { useMemo } from 'react';
 import Box from '@mui/material/Box';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { GroupedVirtuosoPersisted } from '@/lib/virtuoso/Component/GroupedVirtuosoPersisted.tsx';

src/base/hoc/withPropsFrom.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ComponentType, memo, Ref } from 'react';
+import type { ComponentType, Ref } from 'react';
+import { memo } from 'react';
 
 type PropsSourceCreator<T, Props extends Record<string, any>> = (props: Props) => T;
 

src/base/hooks/useAutomaticScrolling.ts

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { MutableRefObject } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ScrollDirection } from '@/base/Base.types.ts';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 

src/base/hooks/useIntersectionObserver.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { RefObject, useLayoutEffect, useState } from 'react';
+import type { RefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 export const useIntersectionObserver = (
     ref: RefObject<HTMLElement | null> | HTMLElement | undefined | null,

src/base/hooks/useMouseDragScroll.tsx

@@ -12,7 +12,8 @@
  *  https://github.com/utsb-fmm/MobileLikeScroller/blob/main/mobilelikescroller.js
  */
 
-import { MutableRefObject, useEffect, useRef, useState } from 'react';
+import type { MutableRefObject } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ScrollDirection } from '@/base/Base.types.ts';
 import { coerceIn } from '@/lib/HelperFunctions.ts';
 

src/base/hooks/useResizeObserver.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { RefObject, useLayoutEffect, useState } from 'react';
+import type { RefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
 
 export const useResizeObserver = (
     ref: RefObject<HTMLElement | null> | HTMLElement | undefined | null,

src/base/hooks/useStorage.tsx

@@ -6,8 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Dispatch, Reducer, SetStateAction, useCallback, useMemo, useReducer, useSyncExternalStore } from 'react';
-import { AppStorage, Storage } from '@/lib/storage/AppStorage.ts';
+import type { Dispatch, Reducer, SetStateAction } from 'react';
+import { useCallback, useMemo, useReducer, useSyncExternalStore } from 'react';
+import type { Storage } from '@/lib/storage/AppStorage.ts';
+import { AppStorage } from '@/lib/storage/AppStorage.ts';
 import { jsonSaveParse } from '@/lib/HelperFunctions.ts';
 
 const subscribeToStorageUpdates = (callback: () => void) => {

src/base/utils/ApplyStyles.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Theme } from '@mui/material/styles';
+import type { Theme } from '@mui/material/styles';
 
 // use CSSObject instead of SxProps<Theme> because this completely fucks over typescript by causing an out of memory error during compilation
 type CSSObject = ReturnType<Theme['applyStyles']>;

src/base/utils/DateHelper.ts

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import dayjs, { Dayjs } from 'dayjs';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import { t } from '@lingui/core/macro';
 
 export const timeFormatter = new Intl.DateTimeFormat(navigator.language, { hour: '2-digit', minute: '2-digit' });

src/base/utils/Languages.ts

@@ -6,10 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import { msg, t } from '@lingui/core/macro';
 
-import { getISOLanguage, getPreferredISOLanguageCodes, LanguageObject } from '@/lib/ISOLanguageUtil.ts';
+import type { LanguageObject } from '@/lib/ISOLanguageUtil.ts';
+import { getISOLanguage, getPreferredISOLanguageCodes } from '@/lib/ISOLanguageUtil.ts';
 
 import { i18n } from '@/i18n';
 

src/base/utils/MediaQuery.tsx

@@ -7,7 +7,7 @@
  */
 
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Breakpoint, SxProps, Theme } from '@mui/material/styles';
+import type { Breakpoint, SxProps, Theme } from '@mui/material/styles';
 import { useCallback, useState } from 'react';
 import { getCurrentTheme } from '@/features/theme/services/ThemeCreator.ts';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';

src/base/utils/Strings.ts

@@ -11,7 +11,7 @@ export const baseCleanup = (str: string) => str.toLowerCase().trim();
 export const enhancedCleanup = (str: string): string =>
     baseCleanup(str)
         .normalize('NFKC')
-        .replace(/[^\p{L}\p{N}]+/gu, ' ')
+        .replaceAll(/[^\p{L}\p{N}]+/gu, ' ')
         .trim();
 
 export const reverseString = (str: string, separator: string = ''): string =>

src/base/utils/Toast.ts

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { enqueueSnackbar, OptionsObject, SnackbarKey } from 'notistack';
+import type { OptionsObject, SnackbarKey } from 'notistack';
+import { enqueueSnackbar } from 'notistack';
 
 export function makeToast(message: string, severity?: OptionsObject['variant'], description?: string): SnackbarKey;
 export function makeToast(message: string, options?: OptionsObject, description?: string): SnackbarKey;

src/base/utils/cloneObject.tsx

@@ -7,5 +7,5 @@
  */
 
 export function cloneObject<T extends object>(obj: T) {
-    return JSON.parse(JSON.stringify(obj)) as T;
+    return structuredClone(obj);
 }

src/features/app-updates/components/WebUIUpdateChecker.tsx

@@ -15,7 +15,8 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { useLingui } from '@lingui/react/macro';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { UpdateState, WebUiChannel, WebUiUpdateStatus } from '@/lib/graphql/generated/graphql.ts';
+import type { WebUiUpdateStatus } from '@/lib/graphql/generated/graphql.ts';
+import { UpdateState, WebUiChannel } from '@/lib/graphql/generated/graphql.ts';
 import { useLocalStorage, useSessionStorage } from '@/base/hooks/useStorage.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';

src/features/authentication/components/AuthGuard.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ReactNode, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useEffect } from 'react';
 import { SplashScreen } from '@/features/authentication/components/SplashScreen.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { AuthManager } from '@/features/authentication/AuthManager.ts';

src/features/authentication/components/SplashScreen.tsx

@@ -7,8 +7,9 @@
  */
 
 import { useTheme } from '@mui/material/styles';
-import Stack, { StackProps } from '@mui/material/Stack';
-import { ComponentProps } from 'react';
+import type { StackProps } from '@mui/material/Stack';
+import Stack from '@mui/material/Stack';
+import type { ComponentProps } from 'react';
 import { SuwayomiLogo } from '@/assets/SuwayomiLogo.tsx';
 import { ServerAddressSetting } from '@/features/settings/components/ServerAddressSetting.tsx';
 

src/features/backup/Backup.constants.ts

@@ -6,9 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
-import { BackupFlag, BackupFlagGroup } from '@/features/backup/Backup.types.ts';
+import type { BackupFlag } from '@/features/backup/Backup.types.ts';
+import { BackupFlagGroup } from '@/features/backup/Backup.types.ts';
 
 export const BACKUP_FLAGS_TO_TRANSLATION: Record<BackupFlag, MessageDescriptor> = {
     includeManga: msg`Library entries`,

src/features/backup/Backup.types.ts

@@ -6,8 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { PartialBackupFlagsInput } from '@/lib/graphql/generated/graphql.ts';
-import { ServerSettings } from '@/features/settings/Settings.types.ts';
+import type { PartialBackupFlagsInput } from '@/lib/graphql/generated/graphql.ts';
+import type { ServerSettings } from '@/features/settings/Settings.types.ts';
 
 export enum BackupFlagGroup {
     LIBRARY = 'library',

src/features/backup/Backup.utils.ts

@@ -7,7 +7,11 @@
  */
 
 import { plural, t } from '@lingui/core/macro';
-import { AutoBackupFlagInclusionState, BackupFlag, BackupFlagInclusionState } from '@/features/backup/Backup.types.ts';
+import type {
+    AutoBackupFlagInclusionState,
+    BackupFlag,
+    BackupFlagInclusionState,
+} from '@/features/backup/Backup.types.ts';
 import { BACKUP_FLAGS_TO_TRANSLATION } from '@/features/backup/Backup.constants.ts';
 
 export const convertToAutoBackupFlags = (flags: BackupFlagInclusionState): AutoBackupFlagInclusionState => ({

src/features/backup/component/BackupFlagInclusionDialog.tsx

@@ -15,7 +15,7 @@ import { useState } from 'react';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
-import { AwaitableComponentProps } from 'awaitable-component';
+import type { AwaitableComponentProps } from 'awaitable-component';
 import { useLingui } from '@lingui/react/macro';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import {
@@ -24,7 +24,7 @@ import {
     BACKUP_FLAGS_BY_GROUP,
     BACKUP_FLAGS_TO_TRANSLATION,
 } from '@/features/backup/Backup.constants.ts';
-import { BackupFlagGroup, BackupFlagInclusionState } from '@/features/backup/Backup.types.ts';
+import type { BackupFlagGroup, BackupFlagInclusionState } from '@/features/backup/Backup.types.ts';
 
 export const BackupFlagInclusionDialog = ({
     onDismiss,

src/features/backup/component/BackupValidationDialog.tsx

@@ -15,11 +15,11 @@ import Button from '@mui/material/Button';
 import ListItem from '@mui/material/ListItem';
 import { Link } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
-import { AwaitableComponentProps } from 'awaitable-component';
+import type { AwaitableComponentProps } from 'awaitable-component';
 import { useLingui } from '@lingui/react/macro';
 import { BrowseTab } from '@/features/browse/Browse.types.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
-import { ValidateBackupResult } from '@/lib/graphql/generated/graphql.ts';
+import type { ValidateBackupResult } from '@/lib/graphql/generated/graphql.ts';
 
 export const BackupValidationDialog = ({
     validationResult,

src/features/backup/screens/Backup.tsx

@@ -37,10 +37,17 @@ import {
     getAutoBackupFlagsInfo,
     getBackupCleanupDisplayValue,
 } from '@/features/backup/Backup.utils.ts';
-import { BackupSettingsType } from '@/features/backup/Backup.types.ts';
+import type { BackupSettingsType } from '@/features/backup/Backup.types.ts';
 
 let backupRestoreId: string | undefined;
 
+const resetBackupState = () => {
+    const input = document.getElementById('backup-file') as HTMLInputElement;
+    if (input) {
+        input.value = '';
+    }
+};
+
 export function Backup() {
     const { t } = useLingui();
 
@@ -113,13 +120,6 @@ export function Backup() {
         }
     }, [data?.restoreStatus?.state]);
 
-    const resetBackupState = () => {
-        const input = document.getElementById('backup-file') as HTMLInputElement;
-        if (input) {
-            input.value = '';
-        }
-    };
-
     const createBackup = async () => {
         const flags = await AwaitableComponent.show(BackupFlagInclusionDialog, {
             title: t`Create backup`,

src/features/browse/Browse.types.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { SourceIdInfo } from '@/features/source/Source.types.ts';
+import type { SourceIdInfo } from '@/features/source/Source.types.ts';
 
 export type MetadataBrowseSettings = {
     hideLibraryEntries: boolean;

src/features/browse/extensions/Extensions.tsx

@@ -36,12 +36,8 @@ import {
     translateExtensionLanguage,
     filterExtensions,
 } from '@/features/extension/Extensions.utils.ts';
-import {
-    ExtensionAction,
-    ExtensionGroupState,
-    ExtensionState,
-    TExtension,
-} from '@/features/extension/Extensions.types.ts';
+import type { TExtension } from '@/features/extension/Extensions.types.ts';
+import { ExtensionAction, ExtensionGroupState, ExtensionState } from '@/features/extension/Extensions.types.ts';
 import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_MAP } from '@/features/extension/Extensions.constants.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
@@ -49,7 +45,7 @@ import {
     createUpdateMetadataServerSettings,
     useMetadataServerSettings,
 } from '@/features/settings/services/ServerSettingsMetadata.ts';
-import { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
+import type { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
 import { useAppAction } from '@/features/navigation-bar/hooks/useAppAction.ts';
 import { SearchParam } from '@/base/Base.types.ts';
 import { i18n } from '@/i18n';
@@ -159,7 +155,7 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
         [groupedExtensions],
     );
     const visibleExtensions = useMemo(
-        () => groupedExtensions.map(([, extensions]) => extensions).flat(1),
+        () => groupedExtensions.flatMap(([, extensions]) => extensions),
         [groupedExtensions],
     );
 

src/features/browse/extensions/components/ExtensionCard.tsx

@@ -16,13 +16,8 @@ import Stack from '@mui/material/Stack';
 import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import {
-    ExtensionAction,
-    ExtensionState,
-    InstalledState,
-    InstalledStates,
-    TExtension,
-} from '@/features/extension/Extensions.types.ts';
+import type { InstalledStates, TExtension } from '@/features/extension/Extensions.types.ts';
+import { ExtensionAction, ExtensionState, InstalledState } from '@/features/extension/Extensions.types.ts';
 import {
     EXTENSION_ACTION_TO_NEXT_ACTION_MAP,
     EXTENSION_ACTION_TO_STATE_MAP,

src/features/browse/screens/BrowseSettings.tsx

@@ -24,8 +24,8 @@ import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholde
 import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
-import { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
-import { ServerSettings as GqlServerSettings } from '@/features/settings/Settings.types.ts';
+import type { MetadataBrowseSettings } from '@/features/browse/Browse.types.ts';
+import type { ServerSettings as GqlServerSettings } from '@/features/settings/Settings.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 

src/features/browse/sources/Sources.tsx

@@ -89,7 +89,7 @@ export function Sources({ tabsMenuHeight }: { tabsMenuHeight: number }) {
         [filteredSources],
     );
     const visibleSources = useMemo(
-        () => sourcesByLanguage.map(([, sourcesOfLanguage]) => sourcesOfLanguage).flat(1),
+        () => sourcesByLanguage.flatMap(([, sourcesOfLanguage]) => sourcesOfLanguage),
         [sourcesByLanguage],
     );
 
@@ -125,7 +125,9 @@ export function Sources({ tabsMenuHeight }: { tabsMenuHeight: number }) {
         [t, shownLangs, sourceLanguages, sourcesForLanguageFilter],
     );
 
-    if (isLoading) return <LoadingPlaceholder />;
+    if (isLoading) {
+        return <LoadingPlaceholder />;
+    }
 
     if (error) {
         return (

src/features/browse/sources/components/SourceCard.tsx

@@ -19,7 +19,7 @@ import IconButton from '@mui/material/IconButton';
 import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { SourceContentType } from '@/features/source/browse/screens/SourceMangas.tsx';
-import { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
+import type { GetSourcesListQuery } from '@/lib/graphql/generated/graphql.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 import { Sources } from '@/features/source/services/Sources.ts';

src/features/category/Category.types.ts

@@ -6,10 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { LibraryOptions } from '@/features/library/Library.types.ts';
-import { CategoryMetaType, CategoryType } from '@/lib/graphql/generated/graphql.ts';
+import type { LibraryOptions } from '@/features/library/Library.types.ts';
+import type { CategoryMetaType, CategoryType } from '@/lib/graphql/generated/graphql.ts';
 
-export interface ICategoryMetadata extends LibraryOptions {}
+export type ICategoryMetadata = LibraryOptions;
 
 export type CategoryMetadataKeys = keyof ICategoryMetadata;
 

src/features/category/components/CategoriesInclusionSetting.tsx

@@ -22,7 +22,7 @@ import { makeToast } from '@/base/utils/Toast.ts';
 import { IncludeOrExclude } from '@/lib/graphql/generated/graphql.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { CheckboxContainer } from '@/base/components/inputs/CheckboxContainer.ts';
-import {
+import type {
     CategoryDownloadInclusionInfo,
     CategoryIdInfo,
     CategoryNameInfo,

src/features/category/components/CategorySelect.tsx

@@ -15,7 +15,7 @@ import Dialog from '@mui/material/Dialog';
 import FormGroup from '@mui/material/FormGroup';
 import { Link } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
-import { AwaitableComponentProps } from 'awaitable-component';
+import type { AwaitableComponentProps } from 'awaitable-component';
 import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Mangas } from '@/features/manga/services/Mangas.ts';
@@ -26,7 +26,7 @@ import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { updateMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
-import {
+import type {
     GetCategoriesBaseQuery,
     GetCategoriesBaseQueryVariables,
     GetMangaCategoriesQuery,

src/features/category/components/CategorySettingsCard.tsx

@@ -17,7 +17,7 @@ import Typography from '@mui/material/Typography';
 import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { CategoryType } from '@/lib/graphql/generated/graphql.ts';
+import type { CategoryType } from '@/lib/graphql/generated/graphql.ts';
 import { ListCardContent } from '@/base/components/lists/cards/ListCardContent.tsx';
 
 export const CategorySettingsCard = ({

src/features/category/components/CreateOrEditCategoryDialog.tsx

@@ -17,7 +17,7 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { CategoryDefaultInfo, CategoryIdInfo, CategoryNameInfo } from '@/features/category/Category.types.ts';
+import type { CategoryDefaultInfo, CategoryIdInfo, CategoryNameInfo } from '@/features/category/Category.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { assertIsDefined } from '@/base/Asserts.ts';

src/features/category/screens/CategorySettings.tsx

@@ -6,11 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { ComponentProps, useMemo, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useMemo, useState } from 'react';
 import Fab from '@mui/material/Fab';
 import AddIcon from '@mui/icons-material/Add';
 import Box from '@mui/material/Box';
-import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core';
+import type { DragEndEvent } from '@dnd-kit/core';
+import { closestCenter, DndContext } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { useLingui } from '@lingui/react/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -18,10 +20,13 @@ import { DEFAULT_FULL_FAB_HEIGHT } from '@/base/components/buttons/StyledFab.tsx
 import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
 import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables } from '@/lib/graphql/generated/graphql.ts';
+import type {
+    GetCategoriesSettingsQuery,
+    GetCategoriesSettingsQueryVariables,
+} from '@/lib/graphql/generated/graphql.ts';
 import { GET_CATEGORIES_SETTINGS } from '@/lib/graphql/category/CategoryQuery.ts';
 import { CategorySettingsCard } from '@/features/category/components/CategorySettingsCard.tsx';
-import { CategoryIdInfo } from '@/features/category/Category.types.ts';
+import type { CategoryIdInfo } from '@/features/category/Category.types.ts';
 import { getErrorMessage, noOp } from '@/lib/HelperFunctions.ts';
 import { DndSortableItem } from '@/lib/dnd-kit/DndSortableItem.tsx';
 import { DndKitUtil } from '@/lib/dnd-kit/DndKitUtil.ts';

src/features/category/services/Categories.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CategoryDefaultInfo, CategoryIdInfo } from '@/features/category/Category.types.ts';
+import type { CategoryDefaultInfo, CategoryIdInfo } from '@/features/category/Category.types.ts';
 
 export const DEFAULT_CATEGORY_ID = 0;
 

src/features/category/services/CategoryMetadata.ts

@@ -12,11 +12,11 @@ import {
     requestBatchCategoryMetadataUpdate,
 } from '@/features/metadata/services/MetadataUpdater.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { LibraryOptions } from '@/features/library/Library.types.ts';
-import { CategoryIdInfo, CategoryMetadataKeys, ICategoryMetadata } from '@/features/category/Category.types.ts';
+import type { LibraryOptions } from '@/features/library/Library.types.ts';
+import type { CategoryIdInfo, CategoryMetadataKeys, ICategoryMetadata } from '@/features/category/Category.types.ts';
 import { convertFromGqlMeta } from '@/features/metadata/services/MetadataConverter.ts';
 import { getMetadataFrom } from '@/features/metadata/services/MetadataReader.ts';
-import {
+import type {
     AllowedMetadataValueTypes,
     GqlMetaHolder,
     Metadata,

src/features/chapter/Chapter.constants.ts

@@ -6,9 +6,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
-import { ChapterAction, ChapterListOptions, ChapterSortMode } from '@/features/chapter/Chapter.types.ts';
+import type { ChapterAction, ChapterListOptions, ChapterSortMode } from '@/features/chapter/Chapter.types.ts';
 
 export const FALLBACK_CHAPTER = { id: -1, name: '', realUrl: '', isDownloaded: false, isBookmarked: false };
 

src/features/chapter/Chapter.types.ts

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import {
+import type {
     ChapterReaderFieldsFragment,
     ChapterType,
     DownloadStatusFieldsFragment,

src/features/chapter/components/ChapterExcludeSanlatorsFilter.tsx

@@ -11,7 +11,7 @@ import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
 import DisabledByDefaultRounded from '@mui/icons-material/DisabledByDefaultRounded';
 import { useLingui } from '@lingui/react/macro';
 import { CheckboxListSetting } from '@/base/components/settings/CheckboxListSetting.tsx';
-import { updateChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
+import type { updateChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 
 export const ChapterExcludeSanlatorsFilter = ({

src/features/chapter/components/ChapterList.tsx

@@ -10,7 +10,8 @@ import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
-import { ComponentProps, useCallback, useMemo, useState } from 'react';
+import type { ComponentProps } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { plural } from '@lingui/core/macro';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -24,7 +25,7 @@ import { EmptyViewAbsoluteCentered } from '@/base/components/feedback/EmptyViewA
 import { ChaptersToolbarMenu } from '@/features/chapter/components/ChaptersToolbarMenu.tsx';
 import { SelectionFAB } from '@/base/collection/components/SelectionFAB.tsx';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/base/components/buttons/StyledFab.tsx';
-import {
+import type {
     ChapterListFieldsFragment,
     GetChaptersMangaQuery,
     GetChaptersMangaQueryVariables,

src/features/chapter/components/ChapterOptions.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import RadioGroup from '@mui/material/RadioGroup';
 import React from 'react';
 import { useLingui } from '@lingui/react/macro';
@@ -16,8 +16,8 @@ import { SortRadioInput } from '@/base/components/inputs/SortRadioInput.tsx';
 import { ThreeStateCheckboxInput } from '@/base/components/inputs/ThreeStateCheckboxInput.tsx';
 import { OptionsTabs } from '@/base/components/modals/OptionsTabs.tsx';
 import { CHAPTER_SORT_OPTIONS_TO_TRANSLATION } from '@/features/chapter/Chapter.constants.ts';
-import { ChapterListOptions } from '@/features/chapter/Chapter.types.ts';
-import { updateChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
+import type { ChapterListOptions } from '@/features/chapter/Chapter.types.ts';
+import type { updateChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
 import { ChapterExcludeSanlatorsFilter } from '@/features/chapter/components/ChapterExcludeSanlatorsFilter.tsx';
 
 interface IProps {

src/features/chapter/components/ChaptersToolbarMenu.tsx

@@ -17,8 +17,9 @@ import { useMemo } from 'react';
 import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { ChapterOptions } from '@/features/chapter/components/ChapterOptions.tsx';
-import { isFilterActive, updateChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
-import {
+import type { updateChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
+import { isFilterActive } from '@/features/chapter/utils/ChapterList.util.tsx';
+import type {
     ChapterBookmarkInfo,
     ChapterDownloadInfo,
     ChapterIdInfo,

src/features/chapter/components/actions/ChapterActionMenuItems.tsx

@@ -14,9 +14,10 @@ import Done from '@mui/icons-material/Done';
 import BookmarkRemove from '@mui/icons-material/BookmarkRemove';
 import BookmarkAdd from '@mui/icons-material/BookmarkAdd';
 import DoneAll from '@mui/icons-material/DoneAll';
-import { ComponentProps, useMemo } from 'react';
+import type { ComponentProps } from 'react';
+import { useMemo } from 'react';
 import { useLingui } from '@lingui/react/macro';
-import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
+import type { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
 import { MenuItem } from '@/base/components/menu/MenuItem.tsx';
 import {
@@ -26,12 +27,12 @@ import {
 } from '@/base/components/menu/Menu.utils.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
-import { ChapterCard } from '@/features/chapter/components/cards/ChapterCard.tsx';
+import type { ChapterCard } from '@/features/chapter/components/cards/ChapterCard.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { GetChaptersMangaQuery } from '@/lib/graphql/generated/graphql.ts';
+import type { GetChaptersMangaQuery } from '@/lib/graphql/generated/graphql.ts';
 import { GET_CHAPTERS_MANGA } from '@/lib/graphql/chapter/ChapterQuery.ts';
 import { CHAPTER_ACTION_TO_TRANSLATION } from '@/features/chapter/Chapter.constants.ts';
-import {
+import type {
     ChapterAction,
     ChapterBookmarkInfo,
     ChapterDownloadInfo,

src/features/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx

@@ -6,20 +6,19 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { MessageDescriptor } from '@lingui/core';
+import type { MessageDescriptor } from '@lingui/core';
 import MenuItem from '@mui/material/MenuItem';
 import gql from 'graphql-tag';
 import { msg } from '@lingui/core/macro';
 import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
 import { Mangas } from '@/features/manga/services/Mangas.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import {
-    ChapterOrderBy,
+import type {
     GetChaptersMangaQuery,
     GetChaptersMangaQueryVariables,
     MangaType,
-    SortOrder,
 } from '@/lib/graphql/generated/graphql.ts';
+import { ChapterOrderBy, SortOrder } from '@/lib/graphql/generated/graphql.ts';
 import { MANGA_META_FIELDS } from '@/lib/graphql/manga/MangaFragments.ts';
 import { getMangaMetadata } from '@/features/manga/services/MangaMetadata.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';

src/features/chapter/components/buttons/ChapterDownloadButton.tsx

@@ -15,7 +15,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { MUIUtil } from '@/lib/mui/MUI.util.ts';
-import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import type { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 
 export const ChapterDownloadButton = ({
     chapterId,

src/features/chapter/components/buttons/ChapterDownloadRetryButton.tsx

@@ -16,7 +16,7 @@ import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { MUIUtil } from '@/lib/mui/MUI.util.ts';
-import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import type { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 
 export const ChapterDownloadRetryButton = ({ chapterId }: { chapterId: ChapterIdInfo['id'] }) => {
     const { t } = useLingui();

src/features/chapter/components/cards/ChapterCard.tsx

@@ -14,7 +14,8 @@ import Stack from '@mui/material/Stack';
 import Card from '@mui/material/Card';
 import IconButton from '@mui/material/IconButton';
 import { useTheme } from '@mui/material/styles';
-import React, { memo, MouseEvent, TouchEvent, useRef } from 'react';
+import type { MouseEvent, TouchEvent } from 'react';
+import React, { memo, useRef } from 'react';
 import { Link } from 'react-router-dom';
 import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useLongPress } from 'use-long-press';
@@ -22,7 +23,7 @@ import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { getDateString } from '@/base/utils/DateHelper.ts';
 import { DownloadStateIndicator } from '@/base/components/downloads/DownloadStateIndicator.tsx';
-import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
+import type { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterActionMenuItems } from '@/features/chapter/components/actions/ChapterActionMenuItems.tsx';
 import { Menu } from '@/base/components/menu/Menu.tsx';
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
@@ -30,7 +31,7 @@ import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { ChapterCardMetadata } from '@/features/chapter/components/cards/ChapterCardMetadata.tsx';
 import { MUIUtil } from '@/lib/mui/MUI.util.ts';
 import { ListCardContent } from '@/base/components/lists/cards/ListCardContent.tsx';
-import {
+import type {
     ChapterBookmarkInfo,
     ChapterDownloadInfo,
     ChapterIdInfo,
@@ -60,6 +61,15 @@ interface IProps {
     isActiveChapter?: boolean; // reader
 }
 
+const handleClickOpenMenu = (
+    event: React.MouseEvent | React.TouchEvent,
+    openMenu?: (e: React.SyntheticEvent) => void,
+) => {
+    event.stopPropagation();
+    event.preventDefault();
+    openMenu?.(event);
+};
+
 export const ChapterCard = memo((props: IProps) => {
     const { t } = useLingui();
     const theme = useTheme();
@@ -81,22 +91,15 @@ export const ChapterCard = memo((props: IProps) => {
     const { isDownloaded } = chapter;
 
     const handleClick = (event: MouseEvent | TouchEvent) => {
-        if (!isSelecting) return;
+        if (!isSelecting) {
+            return;
+        }
 
         event.preventDefault();
         event.stopPropagation();
         onSelect(chapter.id, !selected, event.shiftKey);
     };
 
-    const handleClickOpenMenu = (
-        event: React.MouseEvent | React.TouchEvent,
-        openMenu?: (e: React.SyntheticEvent) => void,
-    ) => {
-        event.stopPropagation();
-        event.preventDefault();
-        openMenu?.(event);
-    };
-
     const longPressBind = useLongPress((event, { context: openMenu }) => {
         if (!isSelecting && !!menuButtonRef.current) {
             handleClickOpenMenu(event, () => (openMenu as (event: Element) => void)?.(menuButtonRef.current!));