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

This commit is contained in:
Dennis (via Claude+Gemma) 2026-05-23 05:01:13 +02:00
parent dac8bfafda
commit 0303704c02
4 changed files with 75 additions and 14 deletions

View File

@ -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"
]
}

View File

@ -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

View File

@ -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>
)
}

View File

@ -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: "Time Entries", to: "/time-entries" },
{ label: "Customers", to: "/customers" },
{ label: "Projects", to: "/projects" },
{ label: "Dashboard", to: "/", icon: Home },
{ label: "Time Entries", to: "/time-entries", icon: Clock },
{ label: "Customers", to: "/customers", icon: Users },
{ 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>