feat: Implement Land Project Detail View - Epic #3

[echelonnought]

Summary

Implements Issue #3 -- Epic Feature: Land Project Detail View (Map Interaction + Title and Info Panels).

This is the full epic implementation: clicking a map feature opens a project detail view with title bar and info panels, while the map smoothly resizes to accommodate the detail panels.

New Components

ProjectTitle (src/components/Project/ProjectTitle.tsx)

• Displays project name from clicked map feature
• Bookmark/save icon with toggle state
• Close button to dismiss the detail view
• Figma specs: 1188px max-width, 73px height, 20/24px padding

ProjectInfo (src/components/Project/ProjectInfo.tsx)

• Left panel (300px): Project filters -- watershed, acreage, project type
• Right panel (flex): Project metadata -- status chip, partner, location, dates, funding
• Uses MUI Chip for color-coded status (Active/Planning/Completed/On Hold)
• 2-column grid layout in the right panel

ProjectDetailView (src/components/Project/ProjectDetailView.tsx)

• Orchestrator combining ProjectTitle + ProjectInfo
• Slide-up animation on open
• Renders below the map area

Modified Files

• App.tsx: Added selectedProject state, click/close handlers, conditional detail view rendering, CSS class toggle
• MapContainer.tsx: Added onFeatureClick prop, onEachFeature handler with click events and popup binding
• globals.css: Added .main-content--detail-open with flex transition for smooth map resize

New Data Layer

• types/project.ts: ProjectData interface + 5 mock projects + getProjectData helper

MUI Components Used

Box, Typography, Chip, Divider, IconButton, and icons: Bookmark, Close, LocationOn, WaterDrop, Landscape, CalendarMonth, Group, AccountBalance, Category

Verification

• Clicking a map feature opens project detail view
• Map resizes smoothly (flex transition)
• ProjectTitle renders with Figma styling
• ProjectInfo displays left/right layout
• Close button dismisses detail view and restores full map
• TypeScript compiles cleanly (tsc --noEmit exit 0)

[coderabbitai]

Warning

Rate limit exceeded

@echelonnought has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 18 minutes and 37 seconds before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cbd60b02-fee2-4022-bb35-5aa72c10d845

📥 Commits

Reviewing files that changed from the base of the PR and between c4ded60 and a610e07.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (8)

• package.json
• src/App.tsx
• src/components/Map/MapContainer.tsx
• src/components/Project/ProjectDetailView.tsx
• src/components/Project/ProjectInfo.tsx
• src/components/Project/ProjectTitle.tsx
• src/styles/globals.css
• src/types/project.ts

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/3-project-detail-view

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 0/1 reviews remaining, refill in 18 minutes and 37 seconds.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[echelonnought]

Detailed Implementation Notes

Architecture

1. Click flow
User clicks GeoJSON feature on map -> onEachFeature handler fires -> onFeatureClick callback passes feature name to App -> App calls getProjectData() to look up metadata -> selectedProject state set -> ProjectDetailView renders with slide-up animation.

2. Map resize
When selectedProject is non-null, the main-content div gets the CSS class 'main-content--detail-open' which changes flex from 1 to 0.55. The transition: flex 0.3s ease makes the resize smooth. The map's Leaflet container auto-adjusts to the new size.

3. Data strategy
Used static mock data (types/project.ts) with a lookup map keyed by feature name. The getProjectData() helper returns a default ProjectData object for unknown features so the UI never breaks. This can be swapped for API calls when Issue #206 (Fetch Campaigns) is implemented.

4. Component hierarchy
App -> ProjectDetailView -> ProjectTitle + ProjectInfo. The detail view sits outside main-content so it appears below the map in the flex column layout of app-container.

Files Changed (9 files, +1040 / -58 lines)

• 4 new component/type files in src/components/Project/ and src/types/
• 3 modified files (App.tsx, MapContainer.tsx, globals.css)
• 2 dependency files (package.json, pnpm-lock.yaml)

Sub-issues covered

• Create ProjectTitle component (Issue Create ProjectTitle component #4)
• Create ProjectInfo component (left/right layout)
• Implement map click interaction + layout state
• Integrate project data into UI (static)
• Apply Figma-based styling
• Ensure no full page reload on interaction