Use esm mui imports for Vite compatibility

See: https://github.com/mui/material-ui/issues/31835#issuecomment-1153393901

web/src/components/Account.jsx

@@ -21,28 +21,28 @@ import {
   TableHead,
   TableRow,
   useMediaQuery,
+  Tooltip,
+  Typography,
+  Container,
+  Card,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  IconButton,
+  MenuItem,
+  DialogContentText,
 } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
 import EditIcon from "@mui/icons-material/Edit";
-import Container from "@mui/material/Container";
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
 import { Trans, useTranslation } from "react-i18next";
 import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import TextField from "@mui/material/TextField";
-import IconButton from "@mui/material/IconButton";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import i18n from "i18next";
 import humanizeDuration from "humanize-duration";
 import CelebrationIcon from "@mui/icons-material/Celebration";
 import CloseIcon from "@mui/icons-material/Close";
 import { ContentCopy, Public } from "@mui/icons-material";
-import MenuItem from "@mui/material/MenuItem";
-import DialogContentText from "@mui/material/DialogContentText";
 import AddIcon from "@mui/icons-material/Add";
 import routes from "./routes";
 import { formatBytes, formatShortDate, formatShortDateTime, openUrl } from "../app/utils";

web/src/components/ActionBar.jsx

@@ -1,22 +1,14 @@
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
+import { AppBar, Toolbar, IconButton, Typography, Box, MenuItem, Button, Divider, ListItemIcon } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import Typography from "@mui/material/Typography";
 import * as React from "react";
 import { useState } from "react";
-import Box from "@mui/material/Box";
 import { useLocation, useNavigate } from "react-router-dom";
-import MenuItem from "@mui/material/MenuItem";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import NotificationsIcon from "@mui/icons-material/Notifications";
 import NotificationsOffIcon from "@mui/icons-material/NotificationsOff";
 import { useTranslation } from "react-i18next";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import Button from "@mui/material/Button";
-import Divider from "@mui/material/Divider";
 import { Logout, Person, Settings } from "@mui/icons-material";
-import ListItemIcon from "@mui/material/ListItemIcon";
 import session from "../app/Session";
 import logo from "../img/ntfy.svg";
 import subscriptionManager from "../app/SubscriptionManager";

web/src/components/App.jsx

@@ -1,12 +1,9 @@
 import * as React from "react";
 import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react";
-import Box from "@mui/material/Box";
+import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
-import CssBaseline from "@mui/material/CssBaseline";
-import Toolbar from "@mui/material/Toolbar";
 import { useLiveQuery } from "dexie-react-hooks";
 import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
-import { Backdrop, CircularProgress } from "@mui/material";
 import { AllSubscriptions, SingleSubscription } from "./Notifications";
 import theme from "./theme";
 import Navigation from "./Navigation";

web/src/components/AttachmentIcon.jsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import fileDocument from "../img/file-document.svg";
 import fileImage from "../img/file-image.svg";

web/src/components/AvatarBox.jsx

@@ -1,6 +1,5 @@
 import * as React from "react";
-import { Avatar } from "@mui/material";
-import Box from "@mui/material/Box";
+import { Avatar, Box } from "@mui/material";
 import logo from "../img/ntfy-filled.svg";
 
 const AvatarBox = (props) => (

web/src/components/DialogFooter.jsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-import Box from "@mui/material/Box";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
+import { Box, DialogContentText, DialogActions } from "@mui/material";
 
 const DialogFooter = (props) => (
   <Box

web/src/components/EmojiPicker.jsx

@@ -1,12 +1,7 @@
 import * as React from "react";
 import { useRef, useState } from "react";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import TextField from "@mui/material/TextField";
-import { ClickAwayListener, Fade, InputAdornment, styled } from "@mui/material";
-import IconButton from "@mui/material/IconButton";
+import { Typography, Box, TextField, ClickAwayListener, Fade, InputAdornment, styled, IconButton, Popper } from "@mui/material";
 import { Close } from "@mui/icons-material";
-import Popper from "@mui/material/Popper";
 import { useTranslation } from "react-i18next";
 import { splitNoEmpty } from "../app/utils";
 import { rawEmojis } from "../app/emojis";

web/src/components/ErrorBoundary.jsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import StackTrace from "stacktrace-js";
-import { CircularProgress, Link } from "@mui/material";
-import Button from "@mui/material/Button";
+import { CircularProgress, Link, Button } from "@mui/material";
 import { Trans, withTranslation } from "react-i18next";
 
 class ErrorBoundaryImpl extends React.Component {

web/src/components/Login.jsx

@@ -1,14 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
-import Typography from "@mui/material/Typography";
+import { Typography, TextField, Button, Box, IconButton, InputAdornment } from "@mui/material";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import IconButton from "@mui/material/IconButton";
-import { InputAdornment } from "@mui/material";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import accountApi from "../app/AccountApi";
 import AvatarBox from "./AvatarBox";

web/src/components/Messaging.jsx

@@ -1,11 +1,8 @@
 import * as React from "react";
 import { useState } from "react";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import TextField from "@mui/material/TextField";
+import { Paper, IconButton, TextField, Portal, Snackbar } from "@mui/material";
 import SendIcon from "@mui/icons-material/Send";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import { Portal, Snackbar } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import PublishDialog from "./PublishDialog";
 import api from "../app/Api";

web/src/components/Navigation.jsx

@@ -1,26 +1,35 @@
-import Drawer from "@mui/material/Drawer";
+import {
+  Drawer,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+  Divider,
+  List,
+  Alert,
+  AlertTitle,
+  Badge,
+  CircularProgress,
+  Link,
+  ListSubheader,
+  Portal,
+  Tooltip,
+  Button,
+  Typography,
+  Box,
+  IconButton,
+} from "@mui/material";
 import * as React from "react";
 import { useContext, useState } from "react";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
 import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
 import Person from "@mui/icons-material/Person";
-import ListItemText from "@mui/material/ListItemText";
-import Toolbar from "@mui/material/Toolbar";
-import Divider from "@mui/material/Divider";
-import List from "@mui/material/List";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
-import { Alert, AlertTitle, Badge, CircularProgress, Link, ListSubheader, Portal, Tooltip } from "@mui/material";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
 import { useLocation, useNavigate } from "react-router-dom";
 import { ChatBubble, MoreVert, NotificationsOffOutlined, Send } from "@mui/icons-material";
-import Box from "@mui/material/Box";
 import ArticleIcon from "@mui/icons-material/Article";
 import { Trans, useTranslation } from "react-i18next";
 import CelebrationIcon from "@mui/icons-material/Celebration";
-import IconButton from "@mui/material/IconButton";
 import SubscribeDialog from "./SubscribeDialog";
 import { openUrl, topicDisplayName, topicUrl } from "../app/utils";
 import routes from "./routes";

web/src/components/Notifications.jsx

@@ -1,15 +1,26 @@
-import Container from "@mui/material/Container";
-import { ButtonBase, CardActions, CardContent, CircularProgress, Fade, Link, Modal, Snackbar, Stack, Tooltip } from "@mui/material";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
+import {
+  Container,
+  ButtonBase,
+  CardActions,
+  CardContent,
+  CircularProgress,
+  Fade,
+  Link,
+  Modal,
+  Snackbar,
+  Stack,
+  Tooltip,
+  Card,
+  Typography,
+  IconButton,
+  Box,
+  Button,
+} from "@mui/material";
 import * as React from "react";
 import { useEffect, useState } from "react";
-import IconButton from "@mui/material/IconButton";
 import CheckIcon from "@mui/icons-material/Check";
 import CloseIcon from "@mui/icons-material/Close";
 import { useLiveQuery } from "dexie-react-hooks";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { Trans, useTranslation } from "react-i18next";
 import { useOutletContext } from "react-router-dom";

web/src/components/Preferences.jsx

@@ -15,22 +15,22 @@ import {
   TableRow,
   Tooltip,
   useMediaQuery,
+  Typography,
+  IconButton,
+  Container,
+  TextField,
+  MenuItem,
+  Card,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
 } from "@mui/material";
-import Typography from "@mui/material/Typography";
 import EditIcon from "@mui/icons-material/Edit";
 import CloseIcon from "@mui/icons-material/Close";
-import IconButton from "@mui/material/IconButton";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
-import Container from "@mui/material/Container";
-import TextField from "@mui/material/TextField";
-import MenuItem from "@mui/material/MenuItem";
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
 import { useLiveQuery } from "dexie-react-hooks";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import DialogActions from "@mui/material/DialogActions";
 import { useTranslation } from "react-i18next";
 import { Info } from "@mui/icons-material";
 import { useOutletContext } from "react-router-dom";

web/src/components/PublishDialog.jsx

@@ -1,17 +1,27 @@
 import * as React from "react";
 import { useContext, useEffect, useRef, useState } from "react";
-import { Checkbox, Chip, FormControl, FormControlLabel, InputLabel, Link, Select, Tooltip, useMediaQuery } from "@mui/material";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
+import {
+  Checkbox,
+  Chip,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  Link,
+  Select,
+  Tooltip,
+  useMediaQuery,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Button,
+  Typography,
+  IconButton,
+  MenuItem,
+  Box,
+} from "@mui/material";
 import InsertEmoticonIcon from "@mui/icons-material/InsertEmoticon";
 import { Close } from "@mui/icons-material";
-import MenuItem from "@mui/material/MenuItem";
-import Box from "@mui/material/Box";
 import { Trans, useTranslation } from "react-i18next";
 import priority1 from "../img/priority-1.svg";
 import priority2 from "../img/priority-2.svg";

web/src/components/ReserveDialogs.jsx

@@ -1,16 +1,21 @@
 import * as React from "react";
 import { useState } from "react";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Alert, FormControl, Select, useMediaQuery } from "@mui/material";
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Alert,
+  FormControl,
+  Select,
+  useMediaQuery,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
 import { useTranslation } from "react-i18next";
-import MenuItem from "@mui/material/MenuItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
 import { Check, DeleteForever } from "@mui/icons-material";
 import theme from "./theme";
 import { validTopic } from "../app/utils";

web/src/components/ReserveIcons.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Lock, Public } from "@mui/icons-material";
-import Box from "@mui/material/Box";
+import { Box } from "@mui/material";
 
 export const PermissionReadWrite = React.forwardRef((props, ref) => <PermissionInternal icon={Public} ref={ref} {...props} />);
 

web/src/components/ReserveTopicSelect.jsx

@@ -1,9 +1,6 @@
 import * as React from "react";
-import { FormControl, Select } from "@mui/material";
+import { FormControl, Select, MenuItem, ListItemIcon, ListItemText } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import MenuItem from "@mui/material/MenuItem";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
 import { PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite } from "./ReserveIcons";
 import { Permission } from "../app/AccountApi";
 

web/src/components/Signup.jsx

@@ -1,14 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
-import TextField from "@mui/material/TextField";
-import Button from "@mui/material/Button";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
+import { TextField, Button, Box, Typography, InputAdornment, IconButton } from "@mui/material";
 import { NavLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { InputAdornment } from "@mui/material";
-import IconButton from "@mui/material/IconButton";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import accountApi from "../app/AccountApi";
 import AvatarBox from "./AvatarBox";

web/src/components/SubscribeDialog.jsx

@@ -1,12 +1,18 @@
 import * as React from "react";
 import { useContext, useState } from "react";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Autocomplete, Checkbox, FormControlLabel, FormGroup, useMediaQuery } from "@mui/material";
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Autocomplete,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  useMediaQuery,
+} from "@mui/material";
 import { useTranslation } from "react-i18next";
 import theme from "./theme";
 import api from "../app/Api";

web/src/components/SubscriptionPopup.jsx

@@ -1,16 +1,22 @@
 import * as React from "react";
 import { useContext, useState } from "react";
-import Button from "@mui/material/Button";
-import TextField from "@mui/material/TextField";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Chip, InputAdornment, Portal, Snackbar, useMediaQuery } from "@mui/material";
+import {
+  Button,
+  TextField,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Chip,
+  InputAdornment,
+  Portal,
+  Snackbar,
+  useMediaQuery,
+  MenuItem,
+  IconButton,
+} from "@mui/material";
 import { useTranslation } from "react-i18next";
-import MenuItem from "@mui/material/MenuItem";
 import { useNavigate } from "react-router-dom";
-import IconButton from "@mui/material/IconButton";
 import { Clear } from "@mui/icons-material";
 import theme from "./theme";
 import subscriptionManager from "../app/SubscriptionManager";

web/src/components/UpgradeDialog.jsx

@@ -1,21 +1,30 @@
 import * as React from "react";
 import { useContext, useEffect, useState } from "react";
-import Dialog from "@mui/material/Dialog";
-import DialogContent from "@mui/material/DialogContent";
-import DialogTitle from "@mui/material/DialogTitle";
-import { Alert, CardActionArea, CardContent, Chip, Link, ListItem, Switch, useMediaQuery } from "@mui/material";
-import Button from "@mui/material/Button";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Alert,
+  CardActionArea,
+  CardContent,
+  Chip,
+  Link,
+  ListItem,
+  Switch,
+  useMediaQuery,
+  Button,
+  Card,
+  Typography,
+  List,
+  ListItemIcon,
+  ListItemText,
+  Box,
+  DialogContentText,
+  DialogActions,
+} from "@mui/material";
 import { Trans, useTranslation } from "react-i18next";
-import List from "@mui/material/List";
 import { Check, Close } from "@mui/icons-material";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import Box from "@mui/material/Box";
 import { NavLink } from "react-router-dom";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogActions from "@mui/material/DialogActions";
 import { UnauthorizedError } from "../app/errors";
 import { formatBytes, formatNumber, formatPrice, formatShortDate } from "../app/utils";
 import { AccountContext } from "./App";

web/src/components/styles.js

@@ -1,6 +1,4 @@
-import Typography from "@mui/material/Typography";
-import Container from "@mui/material/Container";
-import { Backdrop, styled } from "@mui/material";
+import { Typography, Container, Backdrop, styled } from "@mui/material";
 import theme from "./theme";
 
 export const Paragraph = styled(Typography)({