Refactor routing to use react-router-dom v7

Migrates the app to use react-router-dom v7 for routing, replacing manual path management. Adds MainLayout and WorkspaceLayout components for structured layouts, introduces route-based object and app dashboards, and implements hooks for object schema fetching. Updates Dashboard to delegate app selection to DashboardHome and object views to dedicated routes, improving code organization and navigation.

Author: hotlong

apps/web/package.json

@@ -20,6 +20,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
+    "react-router-dom": "^7.12.0",
     "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {

apps/web/src/App.tsx

@@ -1,70 +1,18 @@
-import { useState, useEffect, useRef } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import AppList from './pages/AppList';
 import Login from './pages/Login';
-import Dashboard from './pages/Dashboard';
+import AppDashboard from './pages/AppDashboard'; // New App Home
 import Settings from './pages/Settings';
 import Organization from './pages/Organization';
 import { AuthProvider, useAuth } from './context/AuthContext';
-import { AppSidebar } from './components/app-sidebar';
-import { SidebarProvider, SidebarInset, SidebarTrigger, Separator, Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, Avatar, AvatarFallback, AvatarImage, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from '@objectos/ui';
-import { LogOut, Settings as SettingsIcon, Building, Bell } from 'lucide-react';
+import { MainLayout } from './layouts/MainLayout';
+import { WorkspaceLayout } from './layouts/WorkspaceLayout';
+import { ObjectListRoute } from './pages/objects/ObjectListRoute';
+import { ObjectDetailRoute } from './pages/objects/ObjectDetailRoute';
+import * as paths from './routes';
 
 function AppContent() {
-  const { user, loading, signOut } = useAuth();
-  const [currentPath, setCurrentPath] = useState(window.location.pathname);
-  
-  const [currentAppMetadata, setCurrentAppMetadata] = useState<any>(null);
-  const lastFetchedApp = useRef<string | null>(null);
-
-  // Fetch App Metadata when entering an app
-  useEffect(() => {
-    const parts = currentPath.split('/');
-    if (parts[1] === 'app' && parts[2]) {
-        const appName = parts[2];
-        
-        // Avoid re-fetching if we already have this app loaded
-        if (lastFetchedApp.current === appName) {
-            return;
-        }
-        
-        lastFetchedApp.current = appName;
-        
-        fetch(`/api/metadata/app/${appName}`)
-            .then(res => {
-                if (!res.ok) throw new Error('App not found');
-                return res.json();
-            })
-            .then(data => {
-                setCurrentAppMetadata(data);
-                // Ensure ref matches confirmed loaded data ID/Name if needed, but keeping it simple
-            })
-            .catch(err => {
-                console.error(err);
-                setCurrentAppMetadata(null);
-                // Reset ref on error so we can try again if user refreshes or navs away and back
-                lastFetchedApp.current = null;
-            });
-    } else {
-        if (lastFetchedApp.current) {
-            setCurrentAppMetadata(null);
-            lastFetchedApp.current = null;
-        }
-    }
-  }, [currentPath]); // Remove currentAppMetadata from dependency
-
-  useEffect(() => {
-    const handlePopState = () => setCurrentPath(window.location.pathname);
-    window.addEventListener('popstate', handlePopState);
-    
-    // Custom event for navigation
-    const handlePushState = () => setCurrentPath(window.location.pathname);
-    window.addEventListener('pushstate', handlePushState);
-    
-    return () => {
-        window.removeEventListener('popstate', handlePopState);
-        window.removeEventListener('pushstate', handlePushState);
-    };
-  }, []);
+  const { user, loading } = useAuth();
 
   if (loading) {
      return (
@@ -76,116 +24,43 @@ function AppContent() {
 
   // Auth Routing
   if (!user) {
-      if (currentPath !== '/login') {
-          window.history.pushState({}, '', '/login');
-          return <Login />;
-      }
-      return <Login />;
-  }
-
-  if (currentPath === '/login') {
-      window.history.pushState({}, '', '/');
-      setCurrentPath('/');
-  }
-
-  // Main Layout
-  if (currentPath === '/' || currentPath === '/apps') {
       return (
-        <div className="flex flex-col min-h-screen w-full bg-background">
-            <header className="flex h-16 shrink-0 items-center gap-4 border-b px-6 bg-card sticky top-0 z-50">
-                <div className="flex items-center gap-2 font-bold text-lg">
-                    <span>ObjectOS</span>
-                </div>
-                <div className="ml-auto flex items-center gap-2">
-                    {/* User Menu */}
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <button className="flex items-center gap-2 outline-none">
-                                <Avatar className="h-8 w-8 rounded-lg cursor-pointer hover:opacity-80 transition-opacity">
-                                    <AvatarImage src={user?.image} alt={user?.name} />
-                                    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                                </Avatar>
-                            </button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg" side="bottom" align="end" sideOffset={4}>
-                            <DropdownMenuLabel className="p-0 font-normal">
-                            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                                <Avatar className="h-8 w-8 rounded-lg">
-                                <AvatarImage src={user?.image} alt={user?.name} />
-                                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                                </Avatar>
-                                <div className="grid flex-1 text-left text-sm leading-tight">
-                                <span className="truncate font-semibold">{user?.name}</span>
-                                <span className="truncate text-xs">{user?.email}</span>
-                                </div>
-                            </div>
-                            </DropdownMenuLabel>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuGroup>
-                                <DropdownMenuItem>
-                                    <Building className="mr-2 h-4 w-4" />
-                                    Organization
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                    <SettingsIcon className="mr-2 h-4 w-4" />
-                                    Settings
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                    <Bell className="mr-2 h-4 w-4" />
-                                    Notifications
-                                </DropdownMenuItem>
-                            </DropdownMenuGroup>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem onClick={signOut}>
-                                <LogOut className="mr-2 h-4 w-4" />
-                                Log out
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-8 overflow-y-auto">
-                <div className="max-w-7xl mx-auto w-full">
-                     <h1 className="text-2xl font-bold mb-6">Apps</h1>
-                     <AppList />
-                </div>
-            </div>
-        </div>
+        <Routes>
+            <Route path={paths.LOGIN} element={<Login />} />
+            <Route path="*" element={<Navigate to={paths.LOGIN} replace />} />
+        </Routes>
       );
   }
 
   return (
-      <SidebarProvider>
-          <AppSidebar objects={{}} appMetadata={currentAppMetadata} />
-          <SidebarInset>
-            <header className="flex h-12 shrink-0 items-center gap-2 border-b px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-                <SidebarTrigger className="-ml-1" />
-                <Separator orientation="vertical" className="mr-2 h-4" />
-                <Breadcrumb>
-                    <BreadcrumbList>
-                        <BreadcrumbItem>
-                            <BreadcrumbPage>
-                                {(() => {
-                                    if (currentPath === '/settings') return 'Settings';
-                                    if (currentPath === '/organization') return 'Organization';
-                                    
-                                    const parts = currentPath.split('/');
-                                    if (parts[1] === 'app') {
-                                        return `App: ${parts[2]}`;
-                                    }
-                                    return 'Dashboard';
-                                })()}
-                            </BreadcrumbPage>
-                        </BreadcrumbItem>
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </header>
-            <div className="flex flex-1 flex-col gap-4 p-4">
-                {currentPath === '/settings' ? <Settings /> : 
-                 currentPath === '/organization' ? <Organization /> : <Dashboard />}
-            </div>
-          </SidebarInset>
-      </SidebarProvider>
+    <Routes>
+        <Route path={paths.LOGIN} element={<Navigate to="/" replace />} />
+        
+        {/* Main App Selection Layout */}
+        <Route element={<MainLayout />}>
+            <Route path={paths.ROOT} element={<AppList />} />
+            <Route path={paths.APPS} element={<AppList />} />
+        </Route>
+
+        {/* Workspace/Dashboard Layout */}
+        <Route element={<WorkspaceLayout />}>
+            {/* The App Home Dashboard showing menu shortcuts */}
+            <Route path={paths.APP_ROOT} element={<AppDashboard />} />
+            
+            {/* Object Routes */}
+            <Route path={paths.APP_OBJECT_LIST} element={<ObjectListRoute />} />
+            <Route path={paths.APP_OBJECT_DETAIL} element={<ObjectDetailRoute />} />
+            {/* Legacy/Compat routes support */}
+            <Route path="/app/:appName/object/:objectName/:recordId" element={<ObjectDetailRoute />} />
+            
+            {/* Global/Standard Routes */}
+            <Route path={paths.SETTINGS} element={<Settings />} />
+            <Route path={paths.ORGANIZATION} element={<Organization />} />
+        </Route>
+        
+        {/* Fallback */}
+        <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
   );
 }
 

apps/web/src/components/dashboard/ObjectNotFound.tsx

@@ -0,0 +1,27 @@
+import { useRouter } from '../../hooks/useRouter';
+
+interface ObjectNotFoundProps {
+    objectName: string;
+}
+
+export function ObjectNotFound({ objectName }: ObjectNotFoundProps) {
+    const { navigate } = useRouter();
+
+    return (
+        <div className="flex flex-col items-center justify-center h-[calc(100vh-200px)]">
+            <div className="p-6 bg-red-50 rounded-full mb-4">
+                <i className="ri-error-warning-line text-4xl text-red-500"></i>
+            </div>
+            <h2 className="text-2xl font-bold text-gray-900">Object Not Found</h2>
+            <p className="text-muted-foreground mt-2 max-w-md text-center">
+                The object "{objectName}" does not exist or you do not have permission to view it.
+            </p>
+            <button 
+                onClick={() => navigate('/')}
+                className="mt-6 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+            >
+                Return to Dashboard
+            </button>
+        </div>
+    );
+}

apps/web/src/hooks/useObjectSchema.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+import { getHeaders } from '../lib/api';
+
+const schemaCache: Record<string, any> = {};
+
+export function useObjectSchema(objectName: string) {
+    const [schema, setSchema] = useState<any>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    useEffect(() => {
+        if (!objectName) return;
+
+        if (schemaCache[objectName]) {
+            setSchema(schemaCache[objectName]);
+            setLoading(false);
+            return;
+        }
+
+        setLoading(true);
+        // We could fetch single object too: /api/metadata/object/:name
+        // But current API might be bulk. Let's try single if available or filter from bulk (inefficient but works for now)
+        // Optimization: Create /api/metadata/object/:name endpoint in backend or assume bulk cache in context.
+        // For now, let's fetch list and find. (Or just assume the API supports name, which standard ObjectQL usually does)
+        
+        fetch(`/api/metadata/object/${objectName}`, { headers: getHeaders() })
+            .then(async res => {
+                if (res.status === 404) return null; // Not found
+                if (!res.ok) {
+                    // Fallback to bulk if single endpoint fails?
+                    // Let's try bulk list as fallback or primay if we know backend
+                    throw new Error('Failed to load schema');
+                }
+                return res.json();
+            })
+            .then(data => {
+                if (data) {
+                    schemaCache[objectName] = data;
+                    setSchema(data);
+                } else {
+                    // Try bulk fetch fallback if 404/error on single? 
+                    // Assuming 404 meant endponit doesn't exist, not object.
+                    // But actually, if object doesn't exist, we want null.
+                     setError(new Error('Object not found'));
+                }
+                setLoading(false);
+            })
+            .catch(() => {
+                // Fallback: Fetch all
+                fetch('/api/metadata/object', { headers: getHeaders() })
+                    .then(res => res.json())
+                    .then(result => {
+                        const list = Array.isArray(result) ? result : (result.object || result.data || []);
+                        const found = list.find((o: any) => o.name === objectName);
+                        if (found) {
+                            schemaCache[objectName] = found;
+                            setSchema(found);
+                             setError(null);
+                        } else {
+                            setError(new Error('Object not found'));
+                        }
+                    })
+                    .catch(e => setError(e))
+                    .finally(() => setLoading(false));
+            });
+
+    }, [objectName]);
+
+    return { schema, loading, error };
+}

apps/web/src/hooks/useRouter.ts

@@ -1,20 +1,12 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 export function useRouter() {
-    const [path, setPath] = useState(window.location.pathname);
+    const navigate = useNavigate();
+    const location = useLocation();
 
-    useEffect(() => {
-        const onPopState = () => setPath(window.location.pathname);
-        window.addEventListener('popstate', onPopState);
-        return () => window.removeEventListener('popstate', onPopState);
-    }, []);
-    
-    const navigate = useCallback((newPath: string) => {
-        window.history.pushState({}, '', newPath);
-        setPath(newPath);
-        // Dispatch popstate event to notify other listeners (like App.tsx if it listens)
-        window.dispatchEvent(new Event('popstate')); 
-    }, []);
-    
-    return { path, navigate };
+    return {
+        path: location.pathname,
+        navigate: (path: string) => navigate(path),
+        search: location.search
+    };
 }