feat(projects): add Projects page and component modals + translations

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route, Navigate, Outlet } from "react-router-dom"
+import { createBrowserRouter, RouterProvider, Navigate, Outlet } from "react-router-dom"
 import { ThemeProvider } from "./components/ThemeProvider"
 import { LanguageProvider } from "./components/LanguageProvider"
 import { Toaster } from "./components/ui/toaster"
@@ -13,16 +13,17 @@ import CreateWorkspace from "./pages/WorkspaceCreate"
 import WorkspaceDetail from "./pages/WorkspaceDetail"
 import EditWorkspace from "./pages/WorkspaceEdit"
 import Clients from "./pages/Clients"
+import { Projects } from "./pages/Projects"
 
 const MainLayout = () => {
   return (
     <div className="flex h-screen bg-slate-50 dark:bg-slate-950 overflow-hidden text-slate-900 dark:text-slate-100">
       <Sidebar />
 
-      <div className="flex-1 flex flex-col h-screen overflow-hidden">
+      <div className="flex-1 flex flex-col h-screen overflow-y-auto relative">
         <Navbar />
 
-        <main className="flex-1 overflow-y-auto relative">
+        <main className="flex-1 relative">
           <Outlet />
         </main>
       </div>
@@ -35,28 +36,38 @@ const RootRedirect = () => {
   return isAuthenticated ? <Navigate to="/workspaces" replace /> : <Navigate to="/auth" replace />
 }
 
+const router = createBrowserRouter([
+  {
+    element: (
+      <WorkspaceProvider>
+        <Outlet />
+      </WorkspaceProvider>
+    ),
+    children: [
+      { path: "/", element: <RootRedirect /> },
+      { path: "/auth", element: <Auth /> },
+      { path: "/terms", element: <Terms /> },
+      {
+        element: <MainLayout />,
+        children: [
+          { path: "/profile", element: <Profile /> },
+          { path: "/workspaces", element: <Workspaces /> },
+          { path: "/workspaces/create", element: <CreateWorkspace /> },
+          { path: "/workspaces/:id", element: <WorkspaceDetail /> },
+          { path: "/workspaces/:id/edit", element: <EditWorkspace /> },
+          { path: "/clients", element: <Clients /> },
+          { path: "/projects", element: <Projects /> },
+        ],
+      },
+    ],
+  },
+]);
+
 function App() {
   return (
     <ThemeProvider>
       <LanguageProvider>
-        <Router>
-          <WorkspaceProvider>
-            <Routes>
-              <Route path="/" element={<RootRedirect />} />
-              <Route path="/auth" element={<Auth />} />
-              <Route path="/terms" element={<Terms />} />
-              
-              <Route element={<MainLayout />}>
-                <Route path="/profile" element={<Profile />} />
-                <Route path="/workspaces" element={<Workspaces />} />
-                <Route path="/workspaces/create" element={<CreateWorkspace />} />
-                <Route path="/workspaces/:id" element={<WorkspaceDetail />} />
-                <Route path="/workspaces/:id/edit" element={<EditWorkspace />} />
-                <Route path="/clients" element={<Clients />} />
-              </Route>
-            </Routes>
-          </WorkspaceProvider>
-        </Router>
+        <RouterProvider router={router} />
         <Toaster />
       </LanguageProvider>
     </ThemeProvider>