From 927f6ff56ecd2e294eda315b3ba4455243fe1752 Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Thu, 10 Sep 2026 21:09:43 +0200
Subject: [PATCH] Add a NotFound page and remove the TanStack devtools panel

Configures a notFoundComponent on the root route so unmatched paths get a
branded empty state instead of TanStack Router's generic "Not Found" text,
and drops the always-on devtools panel from the root layout.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/components/ui/NotFound.module.scss | 37 ++++++++++++++++++++++++++
 src/components/ui/NotFound.tsx         | 15 +++++++++++
 src/routes/__root.tsx                  | 15 ++---------
 3 files changed, 54 insertions(+), 13 deletions(-)
 create mode 100644 src/components/ui/NotFound.module.scss
 create mode 100644 src/components/ui/NotFound.tsx

diff --git a/src/components/ui/NotFound.module.scss b/src/components/ui/NotFound.module.scss
new file mode 100644
index 0000000..e3609ab
--- /dev/null
+++ b/src/components/ui/NotFound.module.scss
@@ -0,0 +1,37 @@
+@use '../../styles/variables' as *;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $space-1;
+  max-width: 640px;
+  margin: 0 auto;
+  padding: $space-5 $space-3;
+  text-align: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.text {
+  margin: 0 0 $space-3;
+  color: $color-text-muted;
+}
+
+.cta {
+  padding: $space-2 $space-4;
+  border-radius: $radius;
+  background: $color-primary;
+  color: $color-primary-contrast;
+  font-weight: 600;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+
+  &:hover {
+    opacity: 0.9;
+  }
+}
diff --git a/src/components/ui/NotFound.tsx b/src/components/ui/NotFound.tsx
new file mode 100644
index 0000000..4ba9f26
--- /dev/null
+++ b/src/components/ui/NotFound.tsx
@@ -0,0 +1,15 @@
+import { Link } from '@tanstack/react-router'
+
+import styles from './NotFound.module.scss'
+
+export const NotFound = () => (
+  <div className={styles.wrapper}>
+    <p className={styles.title}>Page not found</p>
+    <p className={styles.text}>
+      The page you're looking for doesn't exist or may have moved.
+    </p>
+    <Link to="/" className={styles.cta}>
+      Browse the menu
+    </Link>
+  </div>
+)
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 869bd20..abf04eb 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -4,11 +4,10 @@ import {
   Scripts,
   createRootRoute,
 } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
 
 import { BasketLink } from '#/components/basket/BasketLink.tsx'
 import { Logo } from '#/components/ui/Logo.tsx'
+import { NotFound } from '#/components/ui/NotFound.tsx'
 import BetterAuthHeader from '#/integrations/better-auth/header-user.tsx'
 import { BasketProvider } from '#/lib/basket.tsx'
 import { getBrand } from '#/server/brand.ts'
@@ -40,17 +39,6 @@ const RootDocument = ({ children }: { children: React.ReactNode }) => {
           </div>
           {children}
         </BasketProvider>
-        <TanStackDevtools
-          config={{
-            position: 'bottom-right',
-          }}
-          plugins={[
-            {
-              name: 'Tanstack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-          ]}
-        />
         <Scripts />
       </body>
     </html>
@@ -59,6 +47,7 @@ const RootDocument = ({ children }: { children: React.ReactNode }) => {
 
 export const Route = createRootRoute({
   loader: async () => ({ brand: await getBrand() }),
+  notFoundComponent: NotFound,
   head: () => ({
     meta: [
       {