refactor: Move main modal to components

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/Elements/MainModal/Main.jsx

@@ -4,9 +4,9 @@ import { MdClose } from 'react-icons/md';
 
 import './scss/index.scss';
 import { Tooltip } from 'components/Elements';
-const Settings = lazy(() => import('./tabs/Settings'));
-const Addons = lazy(() => import('./tabs/Addons'));
-const Marketplace = lazy(() => import('./tabs/Marketplace'));
+const Settings = lazy(() => import('../../../features/misc/views/Settings'));
+const Addons = lazy(() => import('../../../features/misc/views/Addons'));
+const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace'));
 
 const renderLoader = () => (
   <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
@@ -60,4 +60,5 @@ function MainModal({ modalClose }) {
   );
 }
 
-export default memo(MainModal);
+const MemoizedMainModal = memo(MainModal);
+export { MemoizedMainModal as default, MemoizedMainModal as MainModal };

src/components/Elements/MainModal/backend/Tabs.jsx

@@ -9,7 +9,7 @@ import {
 } from 'react-icons/md';
 import Tab from './Tab';
 import { Button } from 'components/Elements';
-import ErrorBoundary from '../../../ErrorBoundary';
+import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary';
 
 class Tabs extends PureComponent {
   constructor(props) {

src/components/Elements/MainModal/index.jsx

@@ -0,0 +1 @@
+export * from './Main';

src/components/Elements/index.jsx

@@ -3,3 +3,4 @@ export * from './Tooltip';
 export * from './ShareModal';
 export * from './AddModal';
 export * from './ResetModal';
+export * from './MainModal';

src/features/background/scss/_photoinformation.scss

@@ -404,10 +404,6 @@
   display: none;
 }
 
-.stats {
-  display: none;
-}
-
 .buttons {
   align-items: center;
   gap: 20px;

src/features/misc/modals/Modals.jsx

@@ -2,7 +2,7 @@ import variables from 'config/variables';
 import { PureComponent } from 'react';
 import Modal from 'react-modal';
 
-import Main from './main/Main';
+import { MainModal } from 'components/Elements';
 import Navbar from '../../navbar/Navbar';
 import Preview from '../../helpers/preview/Preview';
 
@@ -90,7 +90,7 @@ export default class Modals extends PureComponent {
           overlayClassName="Overlay"
           ariaHideApp={false}
         >
-          <Main modalClose={() => this.toggleModal('mainModal', false)} />
+          <MainModal modalClose={() => this.toggleModal('mainModal', false)} />
         </Modal>
         <Modal
           closeTimeoutMS={300}

src/features/misc/views/Addons.jsx

@@ -1,9 +1,9 @@
 import variables from 'config/variables';
 import { memo } from 'react';
-import Tabs from './backend/Tabs';
+import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
 
-import Added from '../../../../marketplace/views/Added';
-import Create from '../../../../marketplace/views/Create';
+import Added from '../../marketplace/views/Added';
+import Create from '../../marketplace/views/Create';
 
 function Addons(props) {
   return (

src/features/misc/views/Marketplace.jsx

@@ -1,8 +1,8 @@
 import variables from 'config/variables';
 import { memo } from 'react';
 
-import Tabs from './backend/Tabs';
-import MarketplaceTab from '../../../../marketplace/views/Browse';
+import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
+import MarketplaceTab from '../../marketplace/views/Browse';
 
 function Marketplace(props) {
   return (

src/features/misc/views/Settings.jsx

@@ -1,9 +1,9 @@
 import variables from 'config/variables';
 import { memo } from 'react';
 
-import Tabs from './backend/Tabs';
+import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
 
-import Overview from '../settings/sections/Overview';
+import Overview from '../modals/main/settings/sections/Overview';
 import { NavbarOptions } from 'features/navbar';
 import { GreetingOptions } from 'features/greeting';
 import { TimeOptions, DateOptions } from 'features/time';
@@ -13,13 +13,13 @@ import { MessageOptions } from 'features/message';
 import { BackgroundOptions } from 'features/background';
 import { SearchOptions } from 'features/search';
 import { WeatherOptions } from 'features/weather';
-import Appearance from '../settings/sections/Appearance';
-import Language from '../settings/sections/Language';
-import Advanced from '../settings/sections/Advanced';
-import Stats from '../settings/sections/Stats';
-import Experimental from '../settings/sections/Experimental';
-import Changelog from '../settings/sections/Changelog';
-import About from '../settings/sections/About';
+import Appearance from '../modals/main/settings/sections/Appearance';
+import Language from '../modals/main/settings/sections/Language';
+import Advanced from '../modals/main/settings/sections/Advanced';
+import Stats from '../modals/main/settings/sections/Stats';
+import Experimental from '../modals/main/settings/sections/Experimental';
+import Changelog from '../modals/main/settings/sections/Changelog';
+import About from '../modals/main/settings/sections/About';
 
 const sections = [
   { label: 'modals.main.marketplace.product.overview', name: 'order', component: Overview },