Feature/use second level mui imports (#743)

* Require "Theme" to be passed to "SxProps"

Decreases typescript performance otherwise

* Disallow "top" and "third-level" MUI imports

* Exclude "node_modules" in tsconfig

src/components/manga/ContinueReadingButton.tsx

@@ -7,7 +7,8 @@
  */
 
 import { useTranslation } from 'react-i18next';
-import { Button, Tooltip } from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 
 import { Link } from 'react-router-dom';

src/components/manga/MangaActionMenuItems.tsx

@@ -18,7 +18,7 @@ import { useMemo, useState } from 'react';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { Link } from 'react-router-dom';
 import SyncIcon from '@mui/icons-material/Sync';
-import { Dialog } from '@mui/material';
+import Dialog from '@mui/material/Dialog';
 import { TManga } from '@/typings.ts';
 import { actionToTranslationKey, MangaAction, MangaDownloadInfo, Mangas, MangaUnreadInfo } from '@/lib/data/Mangas.ts';
 import { SelectableCollectionReturnType } from '@/components/collection/useSelectableCollection.ts';

src/components/manga/MangaBadges.tsx

@@ -6,10 +6,10 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import styled from '@mui/material/styles/styled';
+import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import Button from '@mui/material/Button/Button';
-import Typography from '@mui/material/Typography/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext.tsx';
 import { MangaCardMode } from '@/components/manga/MangaCard.types.tsx';
 

src/components/manga/MangaDetails.tsx

@@ -13,7 +13,7 @@ import { styled } from '@mui/material/styles';
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
-import { Link } from '@mui/material';
+import Link from '@mui/material/Link';
 import { ISource, TManga } from '@/typings';
 import { makeToast } from '@/components/util/Toast';
 import { Mangas } from '@/lib/data/Mangas.ts';

src/components/manga/MangaGridCard.tsx

@@ -6,14 +6,14 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Link from '@mui/material/Link/Link';
+import Link from '@mui/material/Link';
 import { Link as RouterLink } from 'react-router-dom';
-import Box from '@mui/material/Box/Box';
-import Card from '@mui/material/Card/Card';
-import CardActionArea from '@mui/material/CardActionArea/CardActionArea';
-import Stack from '@mui/material/Stack/Stack';
-import Tooltip from '@mui/material/Tooltip/Tooltip';
-import styled from '@mui/material/styles/styled';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardActionArea from '@mui/material/CardActionArea';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
 import { isMobile } from 'react-device-detect';
 import { useRef } from 'react';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';

src/components/manga/MangaListCard.tsx

@@ -6,13 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import Card from '@mui/material/Card/Card';
-import CardContent from '@mui/material/CardContent/CardContent';
-import CardActionArea from '@mui/material/CardActionArea/CardActionArea';
-import Avatar from '@mui/material/Avatar/Avatar';
-import Box from '@mui/material/Box/Box';
-import Stack from '@mui/material/Stack/Stack';
-import Tooltip from '@mui/material/Tooltip/Tooltip';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActionArea from '@mui/material/CardActionArea';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
 import { isMobile } from 'react-device-detect';
 import { Link as RouterLink } from 'react-router-dom';
 import { useRef } from 'react';

src/components/manga/MangaOptionButton.tsx

@@ -8,7 +8,8 @@
 
 import { useTranslation } from 'react-i18next';
 import { BaseSyntheticEvent, MouseEvent, TouchEvent, ChangeEvent, useMemo, forwardRef, ForwardedRef } from 'react';
-import { Button, Tooltip } from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
 import MoreVertIcon from '@mui/icons-material/MoreVert';

src/components/manga/MangaToolbarMenu.tsx

@@ -9,20 +9,18 @@
 import Label from '@mui/icons-material/Label';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
 import Refresh from '@mui/icons-material/Refresh';
-import {
-    IconButton,
-    ListItemIcon,
-    ListItemText,
-    Menu,
-    MenuItem,
-    Tooltip,
-    useMediaQuery,
-    useTheme,
-} from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { TManga } from '@/typings.ts';
 import { useCategorySelect } from '@/components/navbar/action/useCategorySelect.tsx';
 

src/components/manga/ResumeFAB.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Link } from 'react-router-dom';
-import { PlayArrow } from '@mui/icons-material';
+import PlayArrow from '@mui/icons-material/PlayArrow';
 import { useTranslation } from 'react-i18next';
 import { StyledFab } from '@/components/util/StyledFab';