Add Framer Motion animations to core UI components

[AdamJ]

Summary

Integrate Framer Motion animations across key app components to enhance user experience with smooth transitions and visual feedback. This includes animated task list operations, active task indicators, PWA prompts, and mobile navigation.

Type of Change

• New feature
• Update to existing feature
• Bug fix
• Documentation update
• Other (describe below)

Related Issue

Closes #

Changes Made

Dependencies

• Added motion (v12.40.0) to package.json

Component Updates

src/components/InstallPrompt.tsx

• Replaced CSS-based animate-in with Framer Motion AnimatePresence and motion.div
• Added slide-in/out animations (y: 24px, opacity transition over 0.22s)
• Conditional rendering now handled by motion component instead of early return

src/components/PwaUpdatePrompt.tsx

• Wrapped update notification in AnimatePresence with motion.div
• Added slide-up animation from bottom (y: 100%, 0.25s duration)
• Removed early null return; visibility controlled by motion component

src/components/MobileNav.tsx

• Added motion import for layout animations
• Replaced static active state styling with motion.div using layoutId="mobile-nav-active"
• Active nav indicator now animates with smooth background transition (0.2s)
• Updated link styling to support z-index layering for animated background

src/components/TaskItem.tsx

• Created MotionCard using motion.create(Card)
• Added scale animation on active state (1 → 1.005, 0.15s)
• Updated ring/shadow styling for active task state

src/pages/Index.tsx

• Wrapped task list in AnimatePresence with per-item motion.div
• Added layout animations for task add/delete (opacity + y-axis, 0.18s)
• Exit animation includes height collapse for smooth removal

Code Quality

• Converted all quote styles to double quotes for consistency
• No functional logic changes; animations are purely presentational

Checklist

Documentation

• CHANGELOG.md updated accordingly
• N/A — no README changes needed

General

• Branch is up to date with main
• No unrelated files included in this PR
• Tested locally by invoking pnpm test, pnpm lint, and pnpm build

Notes for Reviewers

All animations use consistent easing (easeOut) and durations (0.15–0.25s) for a cohesive feel. The changes are non-breaking and purely additive—existing functionality remains unchanged. Motion components gracefully degrade if animations are disabled at the OS level via prefers-reduced-motion.

https://claude.ai/code/session_013Gr6SNbo7X9KakMsNrdst8