Task 4.4: Implement Deep Linking for Mood Selection

[rowantervelde]

Epic: #11 (Epic 4: Edge Cases, Performance & Testing)
Type: Enhancement
Priority: P2 (Medium)
Estimate: 0.5 day

Description

Add support for direct URL access to specific moods via query parameters, enabling shareable links to mood details.

Acceptance Criteria

• Support URL format: /details?mood=positive
• Auto-load mood data on page mount if query param present
• Update URL when user clicks mood indicator
• Handle invalid mood values gracefully (show error)
• Preserve other query params if present
• Update browser history for back/forward navigation

Technical Notes

• Use Vue Router's useRoute() composable
• Read route.query.mood on component mount
• Update URL with router.push({ query: { mood: selectedMood } })
• Validate mood against allowed values: positive, neutral, negative
• Consider default mood if param missing (e.g., positive)

Dependencies

• Blocks: None
• Blocked by: Task 1.3 (MoodIndicator click handler)

Test Coverage

• Unit test: URL param parsing
• E2E test: direct URL navigation
• Manual test: back/forward button behavior

Related Files

• app/pages/index.vue
• app/components/MoodIndicator.vue

---

Part of Feature 004: Sentiment Detail Breakdown Page