fix(apps): add 404 page and redirect

.changeset/warm-moles-care.md

@@ -0,0 +1,7 @@
+---
+'hostd': minor
+'renterd': minor
+'walletd': minor
+---
+
+Invalid and not found routes now redirect to the home page.

apps/hostd/components/Redirect/Layout.tsx

@@ -0,0 +1,18 @@
+import {
+  HostdAuthedLayout,
+  HostdAuthedPageLayoutProps,
+} from '../HostdAuthedLayout'
+import { HostdSidenav } from '../HostdSidenav'
+import { routes } from '../../config/routes'
+import { useDialog } from '../../contexts/dialog'
+
+export const Layout = HostdAuthedLayout
+export function useLayoutProps(): HostdAuthedPageLayoutProps {
+  const { openDialog } = useDialog()
+  return {
+    title: 'Home',
+    routes,
+    sidenav: <HostdSidenav />,
+    openSettings: () => openDialog('settings'),
+  }
+}

apps/renterd/components/Home/index.tsx → apps/hostd/components/Redirect/index.tsx

@@ -1,13 +1,12 @@
-import { routes } from '../../config/routes'
 import { useEffect } from 'react'
 import { useRouter } from 'next/router'
 
-export function Home() {
+export function Redirect({ route }: { route: string }) {
   const router = useRouter()
 
   useEffect(() => {
-    router.replace(routes.buckets.index)
-  }, [router])
+    router.replace(route)
+  }, [router, route])
 
   return <div />
 }

apps/hostd/pages/404.tsx

@@ -0,0 +1,10 @@
+import { Redirect } from '../components/Redirect'
+import { Layout, useLayoutProps } from '../components/Redirect/Layout'
+import { routes } from '../config/routes'
+
+export default function Page() {
+  return <Redirect route={routes.home} />
+}
+
+Page.Layout = Layout
+Page.useLayoutProps = useLayoutProps

apps/renterd/components/Home/Layout.tsx → apps/renterd/components/Redirect/Layout.tsx

@@ -10,7 +10,7 @@ export const Layout = RenterdAuthedLayout
 export function useLayoutProps(): RenterdAuthedPageLayoutProps {
   const { openDialog } = useDialog()
   return {
-    title: 'Dashboard',
+    title: 'Home',
     routes,
     sidenav: <RenterdSidenav />,
     openSettings: () => openDialog('settings'),

apps/renterd/components/Redirect/index.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export function Redirect({ route }: { route: string }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.replace(route)
+  }, [router, route])
+
+  return <div />
+}

apps/renterd/pages/404.tsx

@@ -0,0 +1,10 @@
+import { Redirect } from '../components/Redirect'
+import { Layout, useLayoutProps } from '../components/Redirect/Layout'
+import { routes } from '../config/routes'
+
+export default function Page() {
+  return <Redirect route={routes.buckets.index} />
+}
+
+Page.Layout = Layout
+Page.useLayoutProps = useLayoutProps

apps/renterd/pages/index.tsx

@@ -1,8 +1,9 @@
-import { Home } from '../components/Home'
-import { Layout, useLayoutProps } from '../components/Home/Layout'
+import { Redirect } from '../components/Redirect'
+import { Layout, useLayoutProps } from '../components/Redirect/Layout'
+import { routes } from '../config/routes'
 
 export default function Page() {
-  return <Home />
+  return <Redirect route={routes.buckets.index} />
 }
 
 Page.Layout = Layout

apps/walletd/components/Redirect/Layout.tsx

@@ -0,0 +1,18 @@
+import {
+  WalletdAuthedLayout,
+  WalletdAuthedPageLayoutProps,
+} from '../WalletdAuthedLayout'
+import { WalletdSidenav } from '../WalletdSidenav'
+import { routes } from '../../config/routes'
+import { useDialog } from '../../contexts/dialog'
+
+export const Layout = WalletdAuthedLayout
+export function useLayoutProps(): WalletdAuthedPageLayoutProps {
+  const { openDialog } = useDialog()
+  return {
+    title: 'Home',
+    routes,
+    sidenav: <WalletdSidenav />,
+    openSettings: () => openDialog('settings'),
+  }
+}

apps/walletd/components/Redirect/index.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+
+export function Redirect({ route }: { route: string }) {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.replace(route)
+  }, [router, route])
+
+  return <div />
+}

apps/walletd/pages/404.tsx

@@ -0,0 +1,10 @@
+import { Redirect } from '../components/Redirect'
+import { Layout, useLayoutProps } from '../components/Redirect/Layout'
+import { routes } from '../config/routes'
+
+export default function Page() {
+  return <Redirect route={routes.home} />
+}
+
+Page.Layout = Layout
+Page.useLayoutProps = useLayoutProps