Fix: pageNotFound & change Routes w/Sidebar to notAuthenticated

apps/frontend/src/components/ui/NotFoundIllustration.tsx

@@ -0,0 +1,11 @@
+export default function NotFoundIllustration() {
+  return (
+    <div>
+      <img
+        src="/illustrations/file_search.svg"
+        alt="Site not found illustration where files are searched but not found"
+        className="h-64 w-64 object-contain"
+      />
+    </div>
+  );
+}

apps/frontend/src/routeTree.gen.ts

@@ -9,10 +9,10 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root';
-import { Route as LoginRouteImport } from './routes/login';
+import { Route as LoginRouteImport } from './routes/_authenticated/login';
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated';
-import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index';
-import { Route as AuthenticatedProfileRouteImport } from './routes/_authenticated/profile';
+import { Route as AuthenticatedIndexRouteImport } from './routes/_notauthenticated/index';
+import { Route as AuthenticatedProfileRouteImport } from './routes/_notauthenticated/profile';
 
 const LoginRoute = LoginRouteImport.update({
   id: '/login',

apps/frontend/src/routes/__root.tsx

@@ -1,27 +1,34 @@
-import { createRootRoute, Outlet, Link } from '@tanstack/react-router';
+import { createRootRoute, Outlet } from '@tanstack/react-router';
+import Sidebar from '../components/sidebar/sidebar';
+import NotFoundView from '../views/NotFoundView';
 
-function NotFound() {
+export const Route = createRootRoute({
+  component: AuthenticatedLayout,
+  notFoundComponent: NotFoundWithSidebar,
+});
+
+function AuthenticatedLayout() {
   return (
-    <div className="mx-auto max-w-xl p-8 text-center">
-      <h1 className="text-2xl font-semibold">Seite nicht gefunden</h1>
-      <p className="mt-2 text-[rgb(var(--muted-foreground-rgb))]">
-        Die angeforderte Seite existiert nicht.
-      </p>
-      <Link
-        to="/"
-        className="mt-6 inline-block rounded-xl bg-[var(--primary)] px-4 py-2 font-medium text-white hover:bg-[var(--primary-hover)]"
-      >
-        Zur Startseite
-      </Link>
+    <div className="min-h-screen">
+      <Sidebar />
+      <main className="relative ml-16">
+        <div className="p-6">
+          <Outlet />
+        </div>
+      </main>
     </div>
   );
 }
 
-export const Route = createRootRoute({
-  component: () => (
-    <div className="min-h-screen bg-[var(--bg)] text-[var(--fg)]">
-      <Outlet />
+function NotFoundWithSidebar() {
+  return (
+    <div className="min-h-screen">
+      <Sidebar />
+      <main className="relative ml-16">
+        <div className="p-6">
+          <NotFoundView />
+        </div>
+      </main>
     </div>
-  ),
-  notFoundComponent: NotFound,
-});
+  );
+}

apps/frontend/src/routes/_authenticated.tsx

@@ -1,19 +1,3 @@
-import { createFileRoute, Outlet } from '@tanstack/react-router';
-import Sidebar from '../components/sidebar/sidebar';
+import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/_authenticated')({
-  component: AuthenticatedLayout,
-});
-
-function AuthenticatedLayout() {
-  return (
-    <div className="min-h-screen">
-      <Sidebar />
-      <main className="relative ml-16">
-        <div className="p-6">
-          <Outlet />
-        </div>
-      </main>
-    </div>
-  );
-}
+export const Route = createFileRoute('/_authenticated')({});

apps/frontend/src/routes/login.tsx → apps/frontend/src/routes/_authenticated/login.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
-import LoginView from '../views/LoginView';
+import LoginView from '../../views/LoginView';
 
 export const Route = createFileRoute('/login')({
   component: LoginView,

apps/frontend/src/routes/_authenticated/index.tsx → apps/frontend/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, redirect } from '@tanstack/react-router';
-import HomeView from '../../views/HomeView';
+import HomeView from '../views/HomeView';
 
 export const Route = createFileRoute('/_authenticated/')({
   beforeLoad: () => {

apps/frontend/src/routes/_authenticated/profile.tsx → apps/frontend/src/routes/profile.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router';
-import ProfileView from '../../views/ProfileView';
+import ProfileView from '../views/ProfileView';
 
 export const Route = createFileRoute('/_authenticated/profile')({
   component: ProfileView,

apps/frontend/src/views/NotFoundView.tsx

@@ -1,30 +1,18 @@
-import { useNavigate } from '@tanstack/react-router';
+import { Link } from '@tanstack/react-router';
+import NotFoundIllustration from '../components/ui/NotFoundIllustration';
 
 export default function NotFoundView() {
-  const navigate = useNavigate();
-
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen text-[var(--foreground)]">
-      {/* Illustration */}
-      <div>
-        <img
-          src="illustrations/file_search.svg"
-          alt="Site not found illustration where files are searched but not found"
-          className="h-64 w-64 object-contain"
-        />
-      </div>
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-3rem)] text-[var(--foreground)]">
+      <NotFoundIllustration />
 
-      {/* Text */}
       <div className="text-center mt-6">
-        <h1 className="font-semibold text-2xl">Page not Found...</h1>
-        <p className="font-medium mt-2">
-          Please consider heading back{' '}
-          <span
-            className="text-[var(--secondary)] underline cursor-pointer"
-            onClick={() => navigate({ to: '/' })}
-          >
-            home
-          </span>
+        <h1 className="font-semibold text-2xl">Page not found</h1>
+        <p className="font-medium mt-2 text-[rgb(var(--muted-foreground-rgb))]">
+          This page does not exist.{' '}
+          <Link to="/" className="text-[var(--secondary)] underline hover:text-[var(--primary)]">
+            Go back home
+          </Link>
         </p>
       </div>
     </div>