[PUI] Move UI rendering out of App.tsx (#6130)

* move UI rendering out of App.tsx
this makes bundles that just use API components (eg. to render out PUI settings controls for inclusion CUI) much easier

* fixes pre-commit warning

* Revert "fixes pre-commit warning"

This reverts commit 712f27bb1ce4ac8ce6d47a81ab1de93c5cea6b63.

src/frontend/src/App.tsx

@@ -1,9 +1,6 @@
-import { useViewportSize } from '@mantine/hooks';
 import { QueryClient } from '@tanstack/react-query';
 import axios from 'axios';
-import { lazy } from 'react';
 
-import { Loadable } from './functions/loading';
 import { useLocalState } from './states/LocalState';
 import { useSessionState } from './states/SessionState';
 
@@ -18,23 +15,3 @@ export function setApiDefaults() {
   api.defaults.headers.common['Authorization'] = `Token ${token}`;
 }
 export const queryClient = new QueryClient();
-
-function checkMobile() {
-  const { height, width } = useViewportSize();
-  if (width < 425 || height < 425) return true;
-  return false;
-}
-
-const MobileAppView = Loadable(lazy(() => import('./views/MobileAppView')));
-const DesktopAppView = Loadable(lazy(() => import('./views/DesktopAppView')));
-
-// Main App
-export default function App() {
-  // Check if mobile
-  if (checkMobile()) {
-    return <MobileAppView />;
-  }
-
-  // Main App component
-  return <DesktopAppView />;
-}

src/frontend/src/main.tsx

@@ -4,8 +4,8 @@ import ReactDOM from 'react-dom/client';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
-import App from './App';
 import { HostList } from './states/states';
+import MainView from './views/MainView';
 
 // define settings
 declare global {
@@ -71,7 +71,7 @@ export const base_url = window.INVENTREE_SETTINGS.base_url || 'platform';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <MainView />
   </React.StrictMode>
 );
 

src/frontend/src/views/MainView.tsx

@@ -0,0 +1,24 @@
+import { useViewportSize } from '@mantine/hooks';
+import { lazy } from 'react';
+
+import { Loadable } from '../functions/loading';
+
+function checkMobile() {
+  const { height, width } = useViewportSize();
+  if (width < 425 || height < 425) return true;
+  return false;
+}
+
+const MobileAppView = Loadable(lazy(() => import('./MobileAppView')));
+const DesktopAppView = Loadable(lazy(() => import('./DesktopAppView')));
+
+// Main App
+export default function MainView() {
+  // Check if mobile
+  if (checkMobile()) {
+    return <MobileAppView />;
+  }
+
+  // Main App component
+  return <DesktopAppView />;
+}