Add 404 route

src/renderer/features/action-required/index.ts

@@ -1 +1,2 @@
 export * from './routes/action-required-route';
+export * from './routes/invalid-route';

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -67,7 +67,7 @@ export const ActionRequiredRoute = () => {
               <>
                 <Group noWrap position="center">
                   <RiCheckFill color="var(--success-color)" size={30} />
-                  <Text size="xl">No issues found.</Text>
+                  <Text size="xl">No issues found</Text>
                 </Group>
                 <Button
                   component={Link}
@@ -75,7 +75,7 @@ export const ActionRequiredRoute = () => {
                   to={AppRoute.HOME}
                   variant="filled"
                 >
-                  Return home
+                  Go back
                 </Button>
               </>
             )}

src/renderer/features/action-required/routes/invalid-route.tsx

@@ -0,0 +1,24 @@
+import { Center, Group, Stack } from '@mantine/core';
+import { RiQuestionLine } from 'react-icons/ri';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Button, Text } from '@/renderer/components';
+
+export const InvalidRoute = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (
+    <Center sx={{ width: '100%' }}>
+      <Stack>
+        <Group noWrap position="center">
+          <RiQuestionLine color="var(--warning-color)" size={30} />
+          <Text size="xl">Page not found</Text>
+        </Group>
+        <Text>{location.pathname}</Text>
+        <Button variant="filled" onClick={() => navigate(-1)}>
+          Go back
+        </Button>
+      </Stack>
+    </Center>
+  );
+};

src/renderer/router/app-router.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix */
-import { Routes, Route, Link } from 'react-router-dom';
-import { ActionRequiredRoute } from '@/renderer/features/action-required';
+import { Routes, Route } from 'react-router-dom';
+import {
+  ActionRequiredRoute,
+  InvalidRoute,
+} from '@/renderer/features/action-required';
 import { AlbumListRoute } from '@/renderer/features/albums';
 import { LoginRoute } from '@/renderer/features/auth';
 import { DashboardRoute } from '@/renderer/features/dashboard';
@@ -25,7 +28,7 @@ export const AppRouter = () => {
           <Route element={<NowPlayingRoute />} path={AppRoute.NOW_PLAYING} />
           <Route element={<AlbumListRoute />} path={AppRoute.LIBRARY_ALBUMS} />
           <Route element={<></>} path={AppRoute.LIBRARY_ARTISTS} />
-          <Route element={<Link to={AppRoute.HOME}>Go home</Link>} path="*" />
+          <Route element={<InvalidRoute />} path="*" />
         </Route>
         <Route element={<></>} path={AppRoute.PLAYING} />
       </Route>