feat: Create ProjectTitle component (Closes #4)

[echelonnought]

Summary

Implements Issue #4 - Create a reusable ProjectTitle React component.
Parent Epic: Issue #3 - Land Project Detail View

What This PR Does

Creates a reusable ProjectTitle component that appears when a user clicks on a map marker. Displays project title with a bookmark/save icon.

Props

• title (string, required) - Project name from clicked map marker
• onSave (function, optional) - Callback when bookmark icon is clicked

Behavior

• Title updates dynamically based on clicked marker label
• Bookmark icon toggles between saved/unsaved states
• Component returns null when no title provided
• Save functionality stubbed for future backend integration

Figma Specs Implemented

• Max Width: 1188px, Height: 73px, Gap: 12px
• Padding: 20px top/bottom, 24px left/right
• Border Bottom: 2px solid #E8E8E8
• Background: #FFFFFF
• Display: Flex row, space-between

Dependencies Added

• @mui/material v9, @emotion/react v11, @emotion/styled v11, @mui/icons-material v9

MUI Components Used

• Box, Typography, IconButton, BookmarkIcon/BookmarkBorderIcon

Verification

• TypeScript compiles cleanly
• Component renders with correct layout
• Bookmark icon present and clickable
• Reusable with clean props API
• Returns null when no title

[coderabbitai]

Warning

Rate limit exceeded

@echelonnought has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 43 minutes and 59 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: 83823ac0-2f6e-4a31-8235-6578bb7f1461

📥 Commits

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

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (2)

• package.json
• src/components/Project/ProjectTitle.tsx

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/4-project-title-component

---

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 43 minutes and 59 seconds.}

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

[echelonnought]

Detailed Implementation Notes

Architecture Decisions

1. MUI over vanilla CSS
The issue explicitly requests MUI components. Used Box for layout (Figma dimensions via sx props), Typography for title text, and IconButton for the bookmark toggle.

2. Conditional rendering
Component returns null when no title is provided, per acceptance criteria -- only renders when a project is selected.

3. Local bookmark state
Saved/unsaved toggle uses local useState. The onSave callback fires on each toggle so parent components can integrate with backend persistence later.

4. Figma-exact styling
All dimensions match the spec exactly: 1188px max-width, 73px height, 12px gap, 20/24px padding, 2px #E8E8E8 border-bottom.

Files Changed

• src/components/Project/ProjectTitle.tsx (New) -- The ProjectTitle component
• package.json (Modified) -- Added MUI + Emotion dependencies
• pnpm-lock.yaml (Modified) -- Lockfile update

How to test

Import the component: import { ProjectTitle } from '@/components/Project/ProjectTitle'
Then render: <ProjectTitle title='Tez Naz Iah / Chinle Creek' onSave={() => console.log('saved')} />