chore(angular-react): Migrate ContactDetailComponent to React

[devin-ai-integration]

Summary

Adds a React functional component (ContactDetailComponent.tsx) as a 1:1 port of the existing Angular ContactDetailComponent. The original Angular component is not removed. This is an additive-only change — no existing files are modified.

Migration mapping:

Angular	React
ActivatedRoute.params['id']	contactId prop
ContactService.getContact()	getContact callback prop
MatDialog.open()	onOpenFeedDialog callback prop
router.navigate back	onNavigateBack callback prop
ngOnInit + loadContact()	useEffect with cancellation flag
mat-card / Material layout	Plain HTML with inline styles
phoneNumber pipe	Stub formatPhoneNumber (TODO)

Updates since last revision

• Fixed navigation buttons visibility in "not found" state. The back and feed buttons are now rendered unconditionally when !isLoading, matching the Angular template's *ngIf="!isLoading" which wraps the buttons independently of whether a contact was found. Previously the buttons were only rendered inside the contact-found branch, making them disappear when the contact was null.

Review & Testing Checklist for Human

• React is not a project dependency. This repo has no react / react-dom in its package.json and no TSX support in tsconfig.json. The file will not compile as-is. Decide whether to add React as a dependency or treat this as a reference artifact.
• formatPhoneNumber is a no-op stub (line 27-29) — it returns the raw string unchanged. The Angular version used a phoneNumber pipe. Verify this placeholder is acceptable or add a real formatter.
• getContact in useEffect deps (line 76) — if the parent doesn't wrap getContact in useCallback, the effect will re-fire on every render, causing infinite fetch loops.
• 500ms setTimeout before opening dialog (line 84-86) — this was carried over from the Angular source. Confirm this delay is intentional and not an Angular-specific workaround that can be dropped in React.
• Inline styles replace Angular Material components — visual fidelity with the original is approximate at best. Verify the styling approach is acceptable for this migration phase.

Suggested test plan: Add react and react-dom as dev dependencies, then render <ContactDetailComponent> in a test harness with a mock getContact that resolves, rejects, and returns null. Verify the three states (loading → contact card, loading → not found, loading → error) render correctly, and confirm the back/feed buttons are visible in both the found and not-found states.

Notes

• Part of a batch Angular-to-React migration across multiple repos.
• The component is not wired into routing — it is standalone dead code until integrated.
• The cancelled flag in useEffect prevents stale state updates on unmount (replacing Angular's subscription cleanup).

Link to Devin session: https://app.devin.ai/sessions/885a7571c31c498d8aeb31891081a88e
Requested by: @lburgers

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring