feat: add framer-motion for animations + minor fixes #184

mayur1377 · 2025-12-21T18:30:22Z

made a few ui fixes
-> fixed incorrect text color on home page
-> fixed toggle animation for dark mode
-> added framer motion for sidebar

Summary by CodeRabbit

New Features
- Smooth animations on the theme toggle with fluid icon transitions
- Animated collapsible navigation sections that expand/collapse smoothly
Improvements
- Refined hover and transition states across links and footer for better visual feedback
- Polished loading/placeholder behavior on the theme control for a cleaner mount experience

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2025-12-21T18:30:44Z

Walkthrough

Adds the framer-motion dependency and integrates animations into UI components: an animated theme toggle (icon and knob animations), animated collapsible sections in the sidebar, and small hover/transition styling updates in the footer and sign-in page.

Changes

Cohort / File(s)	Summary
Dependency `package.json`	Added runtime dependency `framer-motion` (`^12.23.26`).
Sign‑in / Footer Styling `src/app/(auth)/signin/page.tsx`, `src/components/footer.tsx`	Minor styling updates: added dark-mode hover color classes and `transition-colors` to links.
Theme Toggle (framer-motion) `src/components/mode-toggle.tsx`	Reworked toggle: replaced static loading placeholder with a disabled ghost button; added `framer-motion` imports (`AnimatePresence`, `motion`) to animate knob translation and icon enter/exit (Moon/Sun); adjusted styling, accessibility text, and imports (`Button`, `cn`).
Sidebar Collapsibles (framer-motion) `src/components/navigation/sidebar.tsx`	Replaced static chevrons and nested blocks with `AnimatePresence`/`motion` wrappers for expandable sections (billing, ecommerce, subscriptions, payouts); animated height/opacity and chevron rotation while preserving expansion state and link structure.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Review animation timing/props in mode-toggle.tsx for potential hydration/SSR mismatches.
Verify expansion state logic and AnimatePresence keys in navigation/sidebar.tsx to avoid layout jank or unmounted-state bugs.
Check import changes in mode-toggle.tsx (Button, cn) for compatibility with local UI primitives.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: adding framer-motion for animations (sidebar, mode toggle) and minor UI fixes (text color, styling).

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 87e414f and 80230d7.

📒 Files selected for processing (1)

src/components/mode-toggle.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*

⚙️ CodeRabbit configuration file

**/*: - Only comment on issues that would block merging — ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Limit review comments to 3–5 items maximum, unless additional blockers exist.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition — if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions; focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities — focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge — otherwise, remain silent.

When in doubt, err on the side of fewer comments — brevity and blocking issues only.

Avoid posting any refactoring issues

Files:

src/components/mode-toggle.tsx

🧬 Code graph analysis (1)

src/components/mode-toggle.tsx (1)

src/lib/utils.ts (1)

cn (4-6)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: Build

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

greptile-apps · 2025-12-21T18:33:06Z

Greptile Summary

This PR enhances UI polish by adding framer-motion animations and fixing text color issues in dark mode.

Key Changes:

Added smooth collapse/expand animations to sidebar navigation sections using AnimatePresence and height/opacity transitions
Refactored dark mode toggle with animated icon crossfade and spring-based knob sliding
Fixed link hover states in footer and signin page to support dark mode with proper contrast (dark:hover:text-zinc-100)

Issues Found:

Invalid Tailwind CSS classes text-white-400 and text-white-500 in mode-toggle.tsx (lines 64, 75) will cause icons to render without color

Confidence Score: 3/5

This PR has one critical CSS syntax error that will affect visual appearance but is otherwise safe
The invalid Tailwind classes (text-white-400, text-white-500) in the mode toggle will cause the Sun/Moon icons to render without proper coloring, affecting the user experience. Once these two lines are fixed, the PR implements standard animation patterns correctly.
src/components/mode-toggle.tsx requires fixing the invalid Tailwind CSS classes before merge

Important Files Changed

Filename	Overview
src/components/mode-toggle.tsx	Refactored dark mode toggle with framer-motion animations - contains invalid Tailwind classes (text-white-400, text-white-500)
src/components/navigation/sidebar.tsx	Added smooth framer-motion animations for collapsible sidebar sections with height/opacity transitions
src/components/footer.tsx	Improved link hover states with dark mode support and transitions
src/app/(auth)/signin/page.tsx	Added dark mode support to Terms link hover state

Sequence Diagram

sequenceDiagram
    participant User
    participant Component
    participant FramerMotion
    participant DOM
    
    Note over User,DOM: Sidebar Collapse/Expand Animation
    User->>Component: Click section toggle
    Component->>Component: Update expandedSections state
    Component->>FramerMotion: AnimatePresence detects change
    FramerMotion->>DOM: Animate height 0→auto, opacity 0→1
    FramerMotion->>DOM: Rotate ChevronRight 0°→90°
    DOM->>User: Smooth expand animation (200ms)
    
    Note over User,DOM: Dark Mode Toggle Animation
    User->>Component: Click mode toggle button
    Component->>Component: Toggle theme (dark ↔ light)
    Component->>FramerMotion: AnimatePresence mode="wait"
    FramerMotion->>DOM: Exit animation (rotate, scale, opacity)
    FramerMotion->>DOM: Enter animation (rotate, scale, opacity)
    FramerMotion->>DOM: Slide toggle knob (spring animation)
    DOM->>User: Icon crossfade + knob slide (200ms)

greptile-apps

Additional Comments (2)

src/components/mode-toggle.tsx, line 64 (link)

syntax: text-white-400 is not a valid Tailwind CSS class - should be text-muted-foreground or another valid color
src/components/mode-toggle.tsx, line 75 (link)

syntax: text-white-500 is not a valid Tailwind CSS class - should be text-muted-foreground or another valid color

_{5 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4d82506 and 87e414f.

⛔ Files ignored due to path filters (1)

package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (5)

package.json (1 hunks)
src/app/(auth)/signin/page.tsx (1 hunks)
src/components/footer.tsx (1 hunks)
src/components/mode-toggle.tsx (3 hunks)
src/components/navigation/sidebar.tsx (5 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*

⚙️ CodeRabbit configuration file

**/*: - Only comment on issues that would block merging — ignore minor or stylistic concerns.

Restrict feedback to errors, security risks, or functionality-breaking problems.

Do not post comments on code style, formatting, or non-critical improvements.

Keep reviews short: flag only issues that make the PR unsafe to merge.

Limit review comments to 3–5 items maximum, unless additional blockers exist.

Group similar issues into a single comment instead of posting multiple notes.

Skip repetition — if a pattern repeats, mention it once at a summary level only.

Do not add general suggestions; focus strictly on merge-blocking concerns.

If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.

Avoid line-by-line commentary unless it highlights a critical bug or security hole.

Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.

Ignore minor optimization opportunities — focus solely on correctness and safety.

Provide a top-level summary of critical blockers rather than detailed per-line notes.

Comment only when the issue must be resolved before merge — otherwise, remain silent.

When in doubt, err on the side of fewer comments — brevity and blocking issues only.

Avoid posting any refactoring issues

Files:

src/components/footer.tsx
package.json
src/app/(auth)/signin/page.tsx
src/components/mode-toggle.tsx
src/components/navigation/sidebar.tsx

🧠 Learnings (2)

📚 Learning: 2025-10-28T12:17:14.899Z

Learnt from: bassgeta
Repo: RequestNetwork/easy-invoice PR: 168
File: src/components/payment-widget/README.md:29-31
Timestamp: 2025-10-28T12:17:14.899Z
Learning: The payment-widget component in src/components/payment-widget/ is an external component installed via ShadCN from the Request Network registry (https://ui.request.network). Its README and documentation should not be modified as it's maintained externally.

Applied to files:

src/components/footer.tsx

📚 Learning: 2025-08-08T09:52:43.700Z

Learnt from: bassgeta
Repo: RequestNetwork/easy-invoice PR: 117
File: src/app/not-found.tsx:29-67
Timestamp: 2025-08-08T09:52:43.700Z
Learning: Repository: RequestNetwork/easy-invoice
Context: src/app/not-found.tsx (Next.js, TypeScript/React)
Learning: It is acceptable (by current product decision) for the NotFound page to display links to /invoices/create and /subscription-plans even though these routes are auth-gated. Rationale: prevent the 404 from feeling empty; most users are authenticated. No lock icons or conditional rendering required for now; can be revisited later as an enhancement.

Applied to files:

src/components/footer.tsx

🧬 Code graph analysis (1)

src/components/mode-toggle.tsx (1)

src/lib/utils.ts (1)

cn (4-6)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Build
GitHub Check: Greptile Review

🔇 Additional comments (3)

src/components/footer.tsx (1)

10-13: LGTM!

Styling changes for hover effects and transitions look good.

src/app/(auth)/signin/page.tsx (1)

58-65: LGTM!

Consistent hover styling with dark mode support.

src/components/navigation/sidebar.tsx (1)

3-3: LGTM!

The framer-motion animation implementation for collapsible sections is correctly structured with proper AnimatePresence usage and animation states.

Also applies to: 96-146

src/components/mode-toggle.tsx

feat: add framer-motion for animations + minor fixes

87e414f

greptile-apps bot reviewed Dec 21, 2025

View reviewed changes

coderabbitai bot reviewed Dec 21, 2025

View reviewed changes

src/components/mode-toggle.tsx Outdated Show resolved Hide resolved

feat: add framer-motion for animations + minor fixes

80230d7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add framer-motion for animations + minor fixes #184

feat: add framer-motion for animations + minor fixes #184

mayur1377 commented Dec 21, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Dec 21, 2025 •

edited

Loading

Uh oh!

greptile-apps bot commented Dec 21, 2025

Uh oh!

greptile-apps bot left a comment •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

feat: add framer-motion for animations + minor fixes #184

Are you sure you want to change the base?

feat: add framer-motion for animations + minor fixes #184

Conversation

mayur1377 commented Dec 21, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Dec 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

greptile-apps bot commented Dec 21, 2025

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Additional Comments (2)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

mayur1377 commented Dec 21, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Dec 21, 2025 •

edited

Loading

greptile-apps bot left a comment •

edited

Loading