feat(router-with-profile): App.tsx erweitert um /profile-Route + ToastProvider + active [tsc:fail]

.phase3-state.json

@@ -5,9 +5,10 @@
     "empty-loading-states",
     "time-entries-search-filter"
   ],
-  "current_feature": "api-client-final",
+  "current_feature": "router-with-profile",
   "started_at": "2026-05-23T04:57:10.921624",
   "attempted_features": [
-    "user-profile-page"
+    "user-profile-page",
+    "api-client-final"
   ]
 }

GENERATION_LOG.md

@@ -430,3 +430,22 @@ src/routes/users.ts(41,34): error TS2339: Property 'id' does not exist on type '
 undefined
 /home/dark/Developer/EmberClone/apps/api:
  ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command failed with exit code 2: tsc --noEmit -p tsconfig.json
+- `05:00:29` **INFO**   Committed feature api-client-final
+- `05:00:29` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: router-with-profile (2026-05-23 05:00:29)
+
+- `05:00:29` **INFO** Description: App.tsx erweitert um /profile-Route + ToastProvider + active-link
+- `05:00:29` **INFO**   Generating apps/web/src/App.tsx (FINALE App.tsx. Behalte bestehende Routes (/, /login, /time-entries, /…)
+- `05:00:47` **INFO**     wrote 2074 chars in 18.1s (attempt 1)
+- `05:00:47` **INFO**   Generating apps/web/src/components/Nav.tsx (FINAL Nav-Bar. Plus Profile-Link rechts neben Logout. Verwende lucide-…)
+- `05:01:11` **INFO**     wrote 2874 chars in 23.9s (attempt 1)
+- `05:01:11` **INFO** Running tsc --noEmit on api…
+- `05:01:13` **WARN**   tsc errors:
+src/routes/users.ts(21,34): error TS2339: Property 'id' does not exist on type 'string | object | Buffer<ArrayBufferLike>'.
+  Property 'id' does not exist on type 'string'.
+src/routes/users.ts(41,34): error TS2339: Property 'id' does not exist on type 'string | object | Buffer<ArrayBufferLike>'.
+  Property 'id' does not exist on type 'string'.
+undefined
+/home/dark/Developer/EmberClone/apps/api:
+ ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command failed with exit code 2: tsc --noEmit -p tsconfig.json

apps/web/src/App.tsx

@@ -4,7 +4,9 @@ import Login from "./pages/Login"
 import TimeEntries from "./pages/TimeEntries"
 import Customers from "./pages/Customers"
 import Projects from "./pages/Projects"
+import Profile from "./pages/Profile"
 import Nav from "./components/Nav"
+import { ToastProvider } from "./components/Toast"
 import { api } from "./lib/api"
 
 const rootRoute = createRootRoute({
@@ -60,12 +62,20 @@ const projectsRoute = createRoute({
   component: Projects
 })
 
+const profileRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/profile",
+  beforeLoad: authCheck,
+  component: Profile
+})
+
 const routeTree = rootRoute.addChildren([
   indexRoute,
   loginRoute,
   timeEntriesRoute,
   customersRoute,
-  projectsRoute
+  projectsRoute,
+  profileRoute
 ])
 
 const router = createRouter({
@@ -80,5 +90,9 @@ declare module "@tanstack/react-router" {
 }
 
 export default function App() {
-  return <RouterProvider router={router} />
+  return (
+    <ToastProvider>
+      <RouterProvider router={router} />
+    </ToastProvider>
+  )
 }

apps/web/src/components/Nav.tsx

@@ -1,20 +1,32 @@
 import React from "react"
 import { Link, useLocation } from "@tanstack/react-router"
+import { 
+  Home, 
+  Clock, 
+  Users, 
+  FolderKanban, 
+  User, 
+  LogOut 
+} from "lucide-react"
 import { api } from "../lib/api"
 
 export default function Nav() {
   const location = useLocation()
 
   const navItems = [
-    { label: "Dashboard", to: "/" },
+    { label: "Dashboard", to: "/", icon: Home },
-    { label: "Time Entries", to: "/time-entries" },
+    { label: "Time Entries", to: "/time-entries", icon: Clock },
-    { label: "Customers", to: "/customers" },
+    { label: "Customers", to: "/customers", icon: Users },
-    { label: "Projects", to: "/projects" },
+    { label: "Projects", to: "/projects", icon: FolderKanban },
   ]
 
   const handleLogout = async () => {
+    try {
       await api.logout()
       window.location.href = "/login"
+    } catch (error) {
+      console.error("Logout failed", error)
+    }
   }
 
   return (
@@ -24,7 +36,7 @@ export default function Nav() {
           <div className="flex items-center gap-8">
             <Link 
               to="/" 
-              className="text-xl font-bold text-indigo-600 mr-4"
+              className="text-xl font-bold text-indigo-600 mr-4 flex items-center gap-2"
             >
               EmberClone
             </Link>
@@ -32,16 +44,18 @@ export default function Nav() {
             <div className="flex items-center gap-1">
               {navItems.map((item) => {
                 const isActive = location.pathname === item.to
+                const Icon = item.icon
                 return (
                   <Link
                     key={item.to}
                     to={item.to}
-                    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                       isActive 
                         ? "bg-indigo-50 text-indigo-700" 
                         : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
                     }`}
                   >
+                    <Icon className="w-4 h-4" />
                     {item.label}
                   </Link>
                 )
@@ -49,11 +63,24 @@ export default function Nav() {
             </div>
           </div>
 
-          <div className="flex items-center">
+          <div className="flex items-center gap-2">
+            <Link
+              to="/profile"
+              className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                location.pathname === "/profile"
+                  ? "bg-indigo-50 text-indigo-700"
+                  : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+              }`}
+            >
+              <User className="w-4 h-4" />
+              Profile
+            </Link>
+            
             <button
               onClick={handleLogout}
-              className="text-sm font-medium text-gray-500 hover:text-red-600 transition-colors px-3 py-2"
+              className="flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-red-600 transition-colors px-3 py-2"
             >
+              <LogOut className="w-4 h-4" />
               Logout
             </button>
           </div>