Add visual affordance for required photo upload on `/setup` page

[samholmes]

Users are getting stumped on the /setup page because the profile photo is required for form validation/submission, but there's no clear visual indication that it's required.

Current State

• Profile photo upload is required (validated in app/setup/page.tsx line 192 and button disabled state line 351)
• Photo upload is handled via the Nametag component's PhotoFrame
• Photo frame shows a camera icon placeholder when empty
• Photo frame has a hover overlay with camera icon (lines 620-635 in Nametag.tsx)
• No visual indication that the photo is required (unlike title/affiliation fields which have help icons with tooltips)
• Users only discover the requirement when they try to submit and the button is disabled

User Feedback

"Looks cool... got a bit stumped on the photo being required for form validation / submission. Might be good to have some affordance there on hover / click to call attention to that."

Requirements

1. Visual Indicators

Add clear visual affordances to indicate the photo is required:

Option A: Help Icon with Tooltip (Recommended)

• Add a help icon (similar to title/affiliation fields) next to or near the photo frame
• Tooltip text: "Profile photo is required" or "Click to upload a profile photo (required)"
• Position: Below the photo frame or as an overlay icon

Option B: Required Indicator

• Add an asterisk (*) or "Required" label near the photo section
• Could be added to the section title "Get your nametag" → "Get your nametag *"

Option C: Enhanced Empty State

• Make the empty photo placeholder more prominent with text like "Click to upload photo (required)"
• Add a subtle border/glow effect when photo is missing
• Show a visual indicator (e.g., red border or warning icon) when form is attempted to be submitted without photo

2. Hover/Click Feedback

Enhance the existing hover state to better communicate the requirement:

• Add text overlay on hover: "Click to upload photo (required)"
• Make the hover overlay more prominent when photo is missing
• Consider adding a subtle animation/pulse to draw attention when photo is empty

3. Form Validation Feedback

• Show an error message or visual indicator if user attempts to submit without photo
• Could display below the photo frame or near the submit button
• Message: "Profile photo is required to complete setup"

Implementation Considerations

1. Consistency: Match the existing help icon pattern used for title/affiliation fields
2. Accessibility: Ensure tooltips/indicators are keyboard accessible
3. Mobile: Ensure indicators work well on touch devices
4. Visual Design: Keep indicators subtle but clear, matching the existing design language

Files to Modify

• app/components/Nametag.tsx - Add help icon/tooltip for photo upload
• app/setup/page.tsx - Potentially add validation error message display

Acceptance Criteria

• Clear visual indication that photo upload is required
• Help icon/tooltip or other affordance is visible and accessible
• Hover/click feedback clearly communicates the requirement
• Visual feedback is consistent with existing help icon pattern
• Works well on both desktop and mobile devices
• Users can easily understand that photo is required before attempting to submit

Related Components

• Nametag component already has tooltip infrastructure (see HelpIconWrapper and Tooltip styled components)
• Can reuse existing QuestionIcon component for consistency

Notes

• The photo upload area already has hover effects (camera icon overlay), but doesn't communicate that it's required
• Consider adding the indicator both in the Nametag component and potentially in the setup page wrapper for maximum visibility