Misc. optimizations

src/renderer/features/action-required/components/error-fallback.tsx

@@ -1,10 +1,9 @@
-import { Box, Center, Divider, Group, Stack } from '@mantine/core';
+import { Box, Center, Group, Stack } from '@mantine/core';
 import type { FallbackProps } from 'react-error-boundary';
-import { RiErrorWarningLine, RiHomeFill, RiArrowLeftSLine } from 'react-icons/ri';
-import { useNavigate, useRouteError } from 'react-router';
+import { RiErrorWarningLine } from 'react-icons/ri';
+import { useRouteError } from 'react-router';
 import styled from 'styled-components';
 import { Button, Text } from '/@/renderer/components';
-import { AppRoute } from '/@/renderer/router/routes';
 
 const Container = styled(Box)`
   background: var(--main-bg);
@@ -36,62 +35,3 @@ export const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
     </Container>
   );
 };
-
-export const RouteErrorBoundary = () => {
-  const navigate = useNavigate();
-  const error = useRouteError() as any;
-  console.log('error', error);
-
-  const handleReload = () => {
-    navigate(0);
-  };
-
-  const handleReturn = () => {
-    navigate(-1);
-  };
-
-  const handleHome = () => {
-    navigate(AppRoute.HOME);
-  };
-
-  return (
-    <Container>
-      <Center sx={{ height: '100vh' }}>
-        <Stack sx={{ maxWidth: '50%' }}>
-          <Group>
-            <Button
-              px={10}
-              variant="subtle"
-              onClick={handleReturn}
-            >
-              <RiArrowLeftSLine size={20} />
-            </Button>
-            <RiErrorWarningLine
-              color="var(--danger-color)"
-              size={30}
-            />
-            <Text size="lg">Something went wrong</Text>
-          </Group>
-          <Divider my={5} />
-          <Text size="sm">{error?.message}</Text>
-          <Group grow>
-            <Button
-              leftIcon={<RiHomeFill />}
-              sx={{ flex: 0.5 }}
-              variant="default"
-              onClick={handleHome}
-            >
-              Go home
-            </Button>
-            <Button
-              variant="filled"
-              onClick={handleReload}
-            >
-              Reload
-            </Button>
-          </Group>
-        </Stack>
-      </Center>
-    </Container>
-  );
-};

src/renderer/features/action-required/components/route-error-boundary.tsx

@@ -0,0 +1,66 @@
+import { Container, Center, Stack, Group, Button, Divider } from '@mantine/core';
+import { RiArrowLeftSLine, RiErrorWarningLine, RiHomeFill } from 'react-icons/ri';
+import { useNavigate, useRouteError } from 'react-router';
+import { Text } from '/@/renderer/components';
+import { AppRoute } from '/@/renderer/router/routes';
+
+const RouteErrorBoundary = () => {
+  const navigate = useNavigate();
+  const error = useRouteError() as any;
+  console.log('error', error);
+
+  const handleReload = () => {
+    navigate(0);
+  };
+
+  const handleReturn = () => {
+    navigate(-1);
+  };
+
+  const handleHome = () => {
+    navigate(AppRoute.HOME);
+  };
+
+  return (
+    <Container>
+      <Center sx={{ height: '100vh' }}>
+        <Stack sx={{ maxWidth: '50%' }}>
+          <Group>
+            <Button
+              px={10}
+              variant="subtle"
+              onClick={handleReturn}
+            >
+              <RiArrowLeftSLine size={20} />
+            </Button>
+            <RiErrorWarningLine
+              color="var(--danger-color)"
+              size={30}
+            />
+            <Text size="lg">Something went wrong</Text>
+          </Group>
+          <Divider my={5} />
+          <Text size="sm">{error?.message}</Text>
+          <Group grow>
+            <Button
+              leftIcon={<RiHomeFill />}
+              sx={{ flex: 0.5 }}
+              variant="default"
+              onClick={handleHome}
+            >
+              Go home
+            </Button>
+            <Button
+              variant="filled"
+              onClick={handleReload}
+            >
+              Reload
+            </Button>
+          </Group>
+        </Stack>
+      </Center>
+    </Container>
+  );
+};
+
+export default RouteErrorBoundary;

src/renderer/index.ejs

@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="Content-Security-Policy" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Feishin</title>
 </head>
 

src/renderer/router/app-router.tsx

@@ -6,10 +6,6 @@ import {
   createHashRouter,
 } from 'react-router-dom';
 import { AppRoute } from './routes';
-import { RouteErrorBoundary } from '/@/renderer/features/action-required';
-import AlbumDetailRoute from '/@/renderer/features/albums/routes/album-detail-route';
-import AlbumArtistListRoute from '/@/renderer/features/artists/routes/album-artist-list-route';
-import HomeRoute from '/@/renderer/features/home/routes/home-route';
 import { DefaultLayout } from '/@/renderer/layouts';
 import { AppOutlet } from '/@/renderer/router/app-outlet';
 import { TitlebarOutlet } from '/@/renderer/router/titlebar-outlet';
@@ -42,6 +38,20 @@ const InvalidRoute = lazy(
   () => import('/@/renderer/features/action-required/routes/invalid-route'),
 );
 
+const HomeRoute = lazy(() => import('/@/renderer/features/home/routes/home-route'));
+
+const AlbumArtistListRoute = lazy(
+  () => import('/@/renderer/features/artists/routes/album-artist-list-route'),
+);
+
+const AlbumDetailRoute = lazy(
+  () => import('/@/renderer/features/albums/routes/album-detail-route'),
+);
+
+const RouteErrorBoundary = lazy(
+  () => import('/@/renderer/features/action-required/components/route-error-boundary'),
+);
+
 export const AppRouter = () => {
   const router = createHashRouter(
     createRoutesFromElements(