From bd37c7717b3c8c35c5c27d0a56fbbf24b5e2d57e Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 12 Aug 2025 16:57:51 -0600
Subject: [PATCH] Not found page

---
 apps/web-tss/package.json                     |  1 -
 .../features/global/NotFoundCard.tsx          | 35 +++++++++++++++----
 apps/web-tss/src/routes/index.tsx             |  6 +++-
 pnpm-lock.yaml                                | 12 -------
 4 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/apps/web-tss/package.json b/apps/web-tss/package.json
index 13c636d9e..4613cd93c 100644
--- a/apps/web-tss/package.json
+++ b/apps/web-tss/package.json
@@ -63,7 +63,6 @@
     "jwt-decode": "^4.0.0",
     "ky": "^1.8.2",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.539.0",
     "monaco-editor": "^0.52.2",
     "monaco-sql-languages": "^0.15.1",
     "monaco-yaml": "^5.4.0",
diff --git a/apps/web-tss/src/components/features/global/NotFoundCard.tsx b/apps/web-tss/src/components/features/global/NotFoundCard.tsx
index 12d0e093c..1c96ddd8f 100644
--- a/apps/web-tss/src/components/features/global/NotFoundCard.tsx
+++ b/apps/web-tss/src/components/features/global/NotFoundCard.tsx
@@ -1,13 +1,34 @@
 import { Link, type NotFoundRouteComponent } from '@tanstack/react-router';
+import { Button } from '@/components/ui/buttons';
+import { Card, CardContent, CardFooter } from '@/components/ui/card/CardBase';
 
+// Displays a full-screen, visually polished 404 not found state
+// inspired by GlobalErrorCard with consistent styling and components.
 export const NotFoundCard: NotFoundRouteComponent = () => {
   return (
-    <div className="m-8 flex flex-col items-start gap-4">
-      <h1 className="text-2xl font-semibold">Page not found</h1>
-      <p className="text-gray-600">The page you are looking for does not exist.</p>
-      <Link to="/" className="text-blue-600 hover:underline">
-        Go back home
-      </Link>
-    </div>
+    <section
+      className="bg-opacity-90 flex min-h-screen w-screen flex-col items-center justify-center bg-linear-to-br from-gray-50 to-gray-200 p-8 backdrop-blur-xs backdrop-brightness-95 backdrop-filter"
+      aria-label="Page not found"
+    >
+      <Card className="-mt-10 max-w-100">
+        <CardContent>
+          <div className="flex flex-col gap-4">
+            <h1 className="text-2xl font-medium">404 - Page not found</h1>
+
+            <h5 className="m-0 text-base font-medium text-gray-600">
+              The page you are looking for doesn’t exist or may have been moved.
+            </h5>
+          </div>
+        </CardContent>
+
+        <CardFooter className="w-full pt-0">
+          <Link to="/" className="w-full">
+            <Button variant="black" block size="tall">
+              Take me home
+            </Button>
+          </Link>
+        </CardFooter>
+      </Card>
+    </section>
   );
 };
diff --git a/apps/web-tss/src/routes/index.tsx b/apps/web-tss/src/routes/index.tsx
index 4d40736c6..1b0b6f591 100644
--- a/apps/web-tss/src/routes/index.tsx
+++ b/apps/web-tss/src/routes/index.tsx
@@ -2,7 +2,11 @@ import { createFileRoute } from '@tanstack/react-router';
 import logo from '../logo.svg';
 
 export const Route = createFileRoute('/')({
-  component: App
+  component: App,
+  beforeLoad: async ({ context }) => {
+    const hasUser = context.user;
+    console.log('hasUser', hasUser);
+  },
 });
 
 function App() {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4b361b496..f71c9c6d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -982,9 +982,6 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
-      lucide-react:
-        specifier: ^0.539.0
-        version: 0.539.0(react@19.1.1)
       monaco-editor:
         specifier: ^0.52.2
         version: 0.52.2
@@ -10608,11 +10605,6 @@ packages:
     resolution: {integrity: sha512-Nv9KddBcQSlQopmBHXSsZVY5xsdlZkdH/Iey0BlcBYggMd4two7cZnKOK9vmy3nY0O5RGH99z1PCeTpPqszUYg==}
     engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
 
-  lucide-react@0.539.0:
-    resolution: {integrity: sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   luxon@3.7.1:
     resolution: {integrity: sha512-RkRWjA926cTvz5rAb1BqyWkKbbjzCGchDUIKMCUvNi17j6f6j8uHGDV82Aqcqtzd+icoYpELmG3ksgGiFNNcNg==}
     engines: {node: '>=12'}
@@ -26464,10 +26456,6 @@ snapshots:
 
   lru.min@1.1.2: {}
 
-  lucide-react@0.539.0(react@19.1.1):
-    dependencies:
-      react: 19.1.1
-
   luxon@3.7.1: {}
 
   lz-string@1.5.0: {}