Add 'Recently Added Talks' section to homepage

[eferro]

Problem

Returning visitors have no way to discover what has been newly added to the collection since their last visit. The homepage always looks the same regardless of new additions, and there is no temporal entry point to discover recent content.

Proposed Solution

Add a dedicated "Recently Added" section at the top of the homepage that shows the last 6 talks added to the collection, sorted by registered_at descending.

Key principle: All content in this site is already high-quality, regardless of rating. The section shows ALL recently added talks. Talks with 5-star ratings naturally stand out thanks to the star icon (feature #58 already implemented).

UX Decisions (Finalized)

1. Number of Talks: 6

• Perfect for responsive layouts (1 col mobile, 2 cols tablet, 3 cols desktop)
• Provides variety without overwhelming
• Balanced "above the fold" presence

2. Section Title: "Recently Added"

• Clear and direct
• Consistent with web conventions
• Professional and concise

3. Behavior with Filters: Hide when filters active

• Critical UX principle: when filtering, show ONLY filtered results
• Avoids confusion about what the user is seeing
• Respects user intent - filters mean specific search

4. Position: Header → Recently Added → Filters → Main List

• Content hierarchy: featured content first
• "Above the fold" visibility
• Natural flow: "See what's new" → "Or search for something specific"

5. Additional CTA: None

• Main list is immediately below
• Avoids redundancy and visual noise
• Natural scroll takes user to full content

Visual Specification

Responsive Layout

• Mobile (< 768px): 1 column vertical
• Tablet (768px - 1024px): 2 columns, 3 rows
• Desktop (> 1024px): 3 columns, 2 rows

Visual Style

• Subtle background differentiation (e.g., bg-gray-50 vs main bg-white)
• Generous padding top/bottom for visual breathing room
• Use existing TalkCard component for consistency
• 5-star talks already have ⭐ icon (feature Highlight 5-star talks with a visual indicator #58) - no additional styling needed

Accessibility

• Semantic <section> with aria-label="Recently added talks"
• <h2> heading for "Recently Added"
• Natural tab order (top to bottom, left to right)

Technical Specification

Component Structure

Component: RecentlyAddedTalks
Location: src/components/RecentlyAddedTalks/

Props:
- talks: Talk[]
- maxTalks?: number (default: 6)

Logic:
1. Filter talks with valid registered_at
2. Sort by registered_at DESC
3. Take first 6
4. Render in responsive grid

Integration Point

// In TalksList/index.tsx
// Show only when no filters are active

{filter.isEmpty() && (
  <RecentlyAddedTalks talks={talks} />
)}

Expected User Behavior Change

• Returning visitors immediately see what is new, giving them a reason to come back regularly
• New visitors get a curated "latest" entry point instead of facing 861 talks with no guidance
• The curator's ongoing editorial work becomes visible — each new addition is surfaced automatically
• 5-star talks naturally shine with their ⭐ icon without excluding other quality content

Data Available

• registered_at → date the talk was added to the collection
• rating === 5 → naturally highlighted with star icon (feature Highlight 5-star talks with a visual indicator #58)
• Most recently added talks include both 5-star and regular rated content

Implementation Notes

• Follow TDD: write tests first
• Ensure TalksFilter.isEmpty() method exists or implement it
• Use existing TalkCard component (no new card design needed)
• Test responsive behavior at different breakpoints
• Verify accessibility with proper ARIA labels