Feature/fe implement framer motion animations for transaction filter sidebar

[Thosine-01]

feat(frontend): Implement framer-motion animations for Transaction Filter Sidebar

Closes #789

---

Summary

This PR implements comprehensive framer-motion animations across the Transaction Filter Sidebar, making every interaction feel polished and intentional. All animations respect the user's prefers-reduced-motion accessibility setting via useReducedMotion().

---

Animations added

Desktop sidebar entrance

• The sidebar now slides in from the right with a soft spring fade on page mount (x: 24 → 0, spring stiffness 260)
• Previously the panel appeared with no entrance animation

Staggered filter section reveal

• All filter sections (Search, Status, Asset, Date Range, footer) animate in sequentially on mount
• Each section fades up 60ms after the previous (staggerChildren: 0.06, y: 10 → 0)
• Creates a natural cascading reveal rather than everything appearing at once

Collapsible Date Range section

• Date Range is now a collapsible accordion with an animated chevron (rotates 180° on expand/collapse)
• Section height animates smoothly 0 → auto via spring — no layout jump
• Defaults to expanded when dateFrom or dateTo is pre-filled (e.g. from URL params)
• aria-expanded attribute kept in sync for screen readers

Asset button selection bounce

• Clicking an asset button triggers a scale keyframe [1, 0.94, 1.03, 1] — satisfying confirmation of selection
• Inactive buttons lift slightly on hover (scale: 1.04, y: -1)
• layout prop ensures smooth repositioning when active state changes

Clear-search button spin entrance

• The × button appears with rotate: -45 → 0 and exits with rotate: 0 → 45
• Spring physics (stiffness: 400, damping: 25) makes it feel snappy
• Hover scales to 1.2×, tap scales to 0.85×

Clear All success flash

• After clicking Clear All, the button briefly flashes green (#0A0A0A → #16a34a → #0A0A0A) with a scale pulse
• Gives clear confirmation that all filters were reset

Close button rotation (mobile)

• The mobile drawer close × button rotates 90° on hover

Mobile drawer refinements

• Added opacity: 0.5 → 1 to the drawer entrance alongside the existing spring slide
• Backdrop fade duration made explicit for consistency

useReducedMotion support

• All animation durations set to 0 when the user's OS has reduced motion enabled
• Collapsible section uses duration: 0 transition
• Drawer uses duration: 0 transition
• Asset button keyframe skipped entirely

---

Files changed

• frontend/src/components/TransactionFilterSidebar.tsx — full animation overhaul
• frontend/src/components/TransactionFilterSidebar.test.tsx — updated tests covering all new animation states and collapsible behaviour

---

Testing

cd frontend
pnpm vitest run src/components/TransactionFilterSidebar.test.tsx
pnpm tsc --noEmit

---

Checklist

• Desktop sidebar entrance animation (slide + fade on mount)
• Staggered filter section reveal on mount
• Collapsible Date Range with animated chevron and spring height
• Asset button bounce on selection, lift on hover
• Clear-search button spin entrance/exit
• Clear All success flash animation
• Mobile close button rotation on hover
• useReducedMotion() respected — all animations disabled when user prefers reduced motion
• All ARIA attributes maintained (aria-expanded, aria-pressed, aria-busy, aria-live)
• No new dependencies — framer-motion already in project
• No breaking changes to component API

[vercel]

@Thosine-01 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Thosine-01 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits