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/tracker/SettingsTrackerCard.tsx

@@ -10,7 +10,9 @@ import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
 import PopupState, { bindDialog, bindTrigger } from 'material-ui-popup-state';
 import ListItemButton from '@mui/material/ListItemButton';
-import { Chip, ListItemAvatar, ListItemSecondaryAction } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Avatar from '@mui/material/Avatar';
 import ListItemText from '@mui/material/ListItemText';
 import Dialog from '@mui/material/Dialog';

src/components/tracker/TrackManga.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useNavigate } from 'react-router-dom';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { useEffect, useMemo, useState } from 'react';
 import DialogContent from '@mui/material/DialogContent';
 import { useTranslation } from 'react-i18next';

src/components/tracker/TrackerActiveCard.tsx

@@ -10,23 +10,21 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Avatar from '@mui/material/Avatar';
 import { useTranslation } from 'react-i18next';
-import {
-    Box,
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    Divider,
-    FormGroup,
-    IconButton,
-    Link,
-    ListItemButton,
-    MenuItem,
-    Stack,
-    Tooltip,
-    Typography,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Divider from '@mui/material/Divider';
+import FormGroup from '@mui/material/FormGroup';
+import IconButton from '@mui/material/IconButton';
+import Link from '@mui/material/Link';
+import ListItemButton from '@mui/material/ListItemButton';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PopupState, { bindDialog, bindMenu, bindTrigger } from 'material-ui-popup-state';
 import { useMemo, useState } from 'react';

src/components/tracker/TrackerMangaCard.tsx

@@ -10,21 +10,19 @@ import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import {
-    Box,
-    CardActionArea,
-    CardMedia,
-    Collapse,
-    Link,
-    Stack,
-    Tooltip,
-    Typography,
-    useMediaQuery,
-    useTheme,
-} from '@mui/material';
+import Box from '@mui/material/Box';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardMedia from '@mui/material/CardMedia';
+import Collapse from '@mui/material/Collapse';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import { useLayoutEffect, useRef, useState } from 'react';
 import parseHtml from 'html-react-parser';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
 import { TrackerManga } from '@/lib/data/Trackers.ts';
 import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';

src/components/tracker/TrackerSearch.tsx

@@ -8,7 +8,8 @@
 
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { List, Stack } from '@mui/material';
+import List from '@mui/material/List';
+import Stack from '@mui/material/Stack';
 import { useEffect, useMemo, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import ArrowBack from '@mui/icons-material/ArrowBack';

src/components/tracker/TrackerUntrackedCard.tsx

@@ -11,7 +11,7 @@ import CardContent from '@mui/material/CardContent';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
-import { Stack } from '@mui/material';
+import Stack from '@mui/material/Stack';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { TBaseTracker } from '@/lib/data/Trackers.ts';
 import { CARD_STYLING } from '@/components/tracker/constants.ts';

src/components/tracker/constants.ts

@@ -6,17 +6,17 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { SxProps } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
 
 export const DIALOG_PADDING: number = 2;
 
-export const CARD_BACKGROUND: SxProps = {
+export const CARD_BACKGROUND: SxProps<Theme> = {
     backgroundColor: 'transparent',
     boxShadow: 'unset',
     backgroundImage: 'unset',
 };
 
-export const CARD_STYLING: SxProps = {
+export const CARD_STYLING: SxProps<Theme> = {
     padding: DIALOG_PADDING,
     ...CARD_BACKGROUND,
 };