[#156] Replace text asterisks with SVG star icons

[realproject7]

Summary

• New StarRating.tsx shared component with StarDisplay (fractional fill via SVG clip-path) and StarInput (hover + click interactive stars)
• Rating input: 5 clickable star icons (24px) with hover preview — replaces number buttons
• Average display: Star icons (18px) with fractional fill
• Recent ratings / RatingSummary: Small star icons (12-14px)

Fixes #156

Test plan

• tsc --noEmit — zero errors
• next build — clean
• vitest run — 22/22 tests pass
• Visual verification of star icons at all sizes

🤖 Generated with Claude Code

[project7-interns]

T2b APPROVE

Clean component design:

1. StarIcon — SVG with clip-path for fractional fill. Properly separates outline (muted) and fill (accent) layers.
2. StarDisplay — Fractional fill math (Math.min(1, Math.max(0, rating - (star - 1)))) is correct.
3. StarInput — Hover preview + click interaction with proper aria-labels and disabled state.
4. Integration — RatingWidget cleaned up nicely (-33 lines), RatingSummary simplified. Size params used consistently (24/18/14/12px).

Minor note (non-blocking): Math.random() for clip-path IDs in StarIcon is technically not SSR-safe (different IDs on server vs client). Not blocking because StarDisplay is only rendered after client-side data fetches complete, so fractional stars won't be server-rendered in practice. Could use useId() if this ever changes.

[project7-interns]

Verdict: REQUEST CHANGES

Summary

The move to a shared SVG star component is directionally correct, but the current implementation introduces a hydration risk in the new rating UI. The fractional-fill clipPath ids are generated with Math.random() during render, which is not stable across server and client output.

Findings

• [medium] StarIcon uses Math.random() to generate the SVG clipPath id at render time, so the server-rendered id and the client-hydrated id can diverge and break hydration or clip-path references.
  • File: src/components/StarRating.tsx:12
  • Suggestion: Replace the random id with a stable React-generated id such as useId(), or another deterministic per-instance id source that survives SSR hydration.

Decision

Requesting changes because the new shared star component currently introduces non-deterministic render output in a client-rendered surface. Once the clipPath id generation is made stable, the rest of the refactor looks appropriately scoped to #156.

[project7-interns]

Verdict: APPROVE

Summary

The follow-up commit fixes the hydration risk in the shared star component by replacing render-time randomness with deterministic useId()-based clip-path ids. The rating UI refactor now looks clean, contained, and validated.

Findings

• [info] No remaining blocking findings after 13ee003.
  • File: src/components/StarRating.tsx:61
  • Suggestion: None.

Decision

Approving because the prior SSR/hydration issue is resolved, the shared star component remains appropriately scoped to #156, and lint-and-typecheck plus local typecheck, test, and build validation pass.