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/util/AppbarSearch.tsx

@@ -8,7 +8,8 @@
 
 import React, { useState, useEffect } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';

src/components/util/CustomExtensionOutlinedIcon.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import createSvgIcon from '@mui/material/utils/createSvgIcon';
+import { createSvgIcon } from '@mui/material/utils';
 
 const d =
     'M 11 1 C 9.3550302 1 8 2.3550302 8 4 L 4 4 C 2.9069372 4 2 4.9069372 2 6 L 2 12 L 4 12 C 4.5650302 12 5 12.43497 5 13 C 5 13.56503 4.5650302 14 4 14 L 2 14 L 2 20 C 2 21.093063 2.9069372 22 4 22 L 10 22 L 10 20 C 10 19.43497 10.43497 19 11 19 C 11.56503 19 12 19.43497 12 20 L 12 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 16 C 21.64497 16 23 14.64497 23 13 C 23 11.35503 21.64497 10 20 10 L 20 6 C 20 4.9069372 19.093063 4 18 4 L 14 4 C 14 2.3550302 12.64497 1 11 1 z M 11 3 C 11.56503 3 12 3.4349698 12 4 L 12 6 L 18 6 L 18 12 L 20 12 C 20.56503 12 21 12.43497 21 13 C 21 13.56503 20.56503 14 20 14 L 18 14 L 18 20 L 14 20 C 14 18.35503 12.64497 17 11 17 C 9.3550302 17 8 18.35503 8 20 L 4 20 L 4 16 C 5.6449698 16 7 14.64497 7 13 C 7 11.35503 5.6449698 10 4 10 L 4 6 L 10 6 L 10 4 C 10 3.4349698 10.43497 3 11 3 z';

src/components/util/EmptyView.tsx

@@ -11,7 +11,8 @@
 import { useMemo } from 'react';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import { Box, useMediaQuery } from '@mui/material';
+import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 const ERROR_FACES = ['(･o･;)', 'Σ(ಠ_ಠ)', 'ಥ_ಥ', '(˘･_･˘)', '(；￣Д￣)', '(･Д･。'];
 

src/components/util/ListItemLink.tsx

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

src/components/util/LoadingPlaceholder.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 interface IProps {
     shouldRender?: boolean | (() => boolean);

src/components/util/Progress.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 

src/components/util/SpinnerImage.tsx

@@ -9,12 +9,13 @@
 import { useState, CSSProperties, useEffect, forwardRef, ForwardedRef } from 'react';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
-import { Theme, SxProps, Stack, Button } from '@mui/material';
-
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
 import BrokenImageIcon from '@mui/icons-material/BrokenImage';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
 import ImageIcon from '@mui/icons-material/Image';
+import { SxProps, Theme } from '@mui/material/styles';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { Priority } from '@/lib/Queue.ts';

src/components/util/StyledFab.tsx

@@ -6,7 +6,8 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Fab, styled } from '@mui/material';
+import Fab from '@mui/material/Fab';
+import { styled } from '@mui/material/styles';
 
 export const DEFAULT_FAB_STYLE = {
     position: 'fixed',