Fix not found route

apps/main/src/App.tsx

@@ -2,20 +2,29 @@ import { SessionProvider } from "@xtablo/shared/contexts/SessionContext";
 import { ThemeProvider } from "@xtablo/shared/contexts/ThemeContext";
 import { Toaster } from "@xtablo/ui/components/sonner";
 import { BrowserRouter as Router, useRoutes } from "react-router-dom";
+import { NotFoundPage } from "./pages/NotFoundPage";
 import { publicRoutes } from "./lib/publicRoutes";
 import { routes } from "./lib/routes";
 import { supabase } from "./lib/supabase";
 import { DatadogRumProvider } from "./providers/DatadogRumProvider";
 import { UserStoreProvider } from "./providers/UserStoreProvider";
 
-const AppRoutes = () => {
-  const element = useRoutes(routes);
-  return element;
-};
+const Routes = () => {
+  const publicElement = useRoutes(publicRoutes);
+  const appElement = useRoutes(routes);
 
-const PublicRoutes = () => {
-  const element = useRoutes(publicRoutes);
-  return element;
+  // If public route matched, render it (outside UserStoreProvider)
+  if (publicElement) {
+    return publicElement;
+  }
+
+  // If app route matched, render it inside UserStoreProvider
+  if (appElement) {
+    return <UserStoreProvider>{appElement}</UserStoreProvider>;
+  }
+
+  // Neither matched, show 404
+  return <NotFoundPage />;
 };
 
 export const App = () => {
@@ -26,10 +35,7 @@ export const App = () => {
         <Router>
           <DatadogRumProvider>
             <div className="min-h-screen bg-background">
-              <PublicRoutes />
-              <UserStoreProvider>
-                <AppRoutes />
-              </UserStoreProvider>
+              <Routes />
               <style>
                 {`
                   @keyframes slide {

apps/main/src/lib/routes.tsx

@@ -142,9 +142,4 @@ export const routes: RouteObject[] = [
       },
     ],
   },
-  // Catch-all route for 404
-  {
-    path: "*",
-    element: <NotFoundPage />,
-  },
 ];