mirror of
https://github.com/root-fr/jmap-webmail.git
synced 2026-09-26 16:01:18 +00:00
Matthieu MALVACHEandClaude
f66f7eaaa5
Enhanced the batch operations UI with polished animations and transitions: **Toolbar Animations:** - Smooth slide-down transition for batch actions toolbar (300ms ease-in-out) - Animated slide-in effects for selection count and action buttons - Collapsible toolbar with max-height and opacity transitions **Checkbox Animations:** - Zoom-in animation when checkboxes are checked (200ms) - Scale effects on hover (110%) and active (95%) states - Smooth opacity transitions for unchecked states - Color transitions for checked state (blue theme) **Selection Feedback:** - Blue ring highlight on selected email items - Subtle background tint for selected emails - Animated "select all" button with scale and zoom effects - Visual separator between action buttons **Loading States:** - Spinning loader icons during batch operations - Disabled state with reduced opacity during processing - 500ms delay after operations for smooth visual feedback - Prevents multiple simultaneous batch operations **Visual Polish:** - Hover effects with background color transitions - Active state feedback on all interactive elements - Proper pluralization (email/emails) in selection count - Consistent transition timing across all animations All animations use Tailwind's built-in utilities and follow smooth easing curves for a premium feel. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.