Remove width: max-content and display: inline-block from email content
CSS that caused horizontal scroll and left-side text clipping. Collapse
empty table cells/containers when external images are blocked to prevent
large blank areas in newsletter emails.
Implement Phase 1 of contacts support — the biggest missing feature
on the roadmap. Uses RFC 9553 (JSContact) data model and RFC 9610
(JMAP for Contacts) when the server advertises the capability,
falling back to localStorage for servers without contact support.
- JMAP types for ContactCard, AddressBook, NameComponent, etc.
- JMAP client methods: CRUD, search, address book listing
- Refactored request() to accept dynamic `using` capabilities
- Zustand contact store with dual-mode persistence
- Full contacts page with two-column layout (list + detail/edit)
- Contact form with multi-email/phone, context labels, validation
- Composer autocomplete on To/Cc/Bcc with keyboard nav and ARIA
- Sidebar navigation link to contacts
- Auth integration: fetch on login, clear on logout
- i18n: contacts.* namespace across all 8 languages
Add support for Spanish, Italian, German, Dutch, and Portuguese with complete translations for all features including identity management, newsletter unsubscribe, and accessibility improvements.
Changes:
- Add 5 new locale directories with full translations
- Update IntlProvider to load all 8 language message files
- Redesign language switcher from button group to dropdown for better scalability
- Update routing and request configuration to handle new locales
- Improve Select component with dir="auto" for RTL support
- Reorganize notification keys in translation files for consistency
- Update all documentation to reflect expanded language support
Add Japanese (ja) as the third supported language alongside English and French. Includes 650+ translation keys covering all UI sections: login, sidebar, email operations, settings (all 8 tabs), context menus, keyboard shortcuts, threads, identity management, and error messages.
Uses formal Japanese (敬語 keigo) appropriate for business email communication. All client and server-side i18n infrastructure updated to load Japanese translations.
Emails containing <style> tags were injecting global CSS rules that
affected the entire application UI. For example, button:hover rules
from emails would override all button hover states app-wide.
Changes:
- Block <style> tags in email sanitization config (security fix)
- Keep inline style attributes for element-specific formatting
- Add explicit bg-transparent to banner buttons (defense in depth)
- Add CSS isolation to banner container
- Fix theme dependency in email content memoization
This prevents malicious or poorly-formatted emails from breaking the
UI or being used for phishing via CSS injection attacks.
- Replace hardcoded hex colors (#666, #999) with CSS variables in email preview
- Strengthen blockquote text color from #6b7280 to #4b5563 (5.3:1 → 7.8:1 contrast)
- Strengthen quoted email text color to match blockquote improvement
- Add comprehensive accessibility guidelines to CLAUDE.md
- Document color contrast standards, testing requirements, and best practices
- All changes maintain dark mode compatibility
Achieves WCAG 2.0 Level AA compliance for all text elements.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement RFC 2369 List-Unsubscribe support with security validation (protocol whitelist, XSS prevention), two-step confirmation UI, and localStorage persistence. Add intelligent color transformation for dark mode to fix unreadable inline email styles using WCAG 2.0 luminance calculation. Complete batch spam undo operations for context menu multi-select. Update documentation with new features and comprehensive test coverage (97 tests).
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement comprehensive spam management allowing users to report spam emails and restore false positives. Emails are moved to/from the Junk folder with toast notifications and undo support.
Key features:
- Mark as spam: moves email to Junk folder with 5-second undo
- Mark as not spam: restores email from Junk to inbox
- Batch spam operations via context menu
- Smart toggle based on current folder (Junk vs other folders)
- Keyboard shortcut (Shift+!) for quick spam reporting
- Full i18n support (EN/FR)
- Shared mailbox compatibility
UX improvements:
- Toast notifications with undo action using sonner library
- Auto-deselect email after spam action
- Visual distinction with red destructive styling
- Desktop button + context menu + keyboard shortcuts
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete internationalization coverage for all identity-related UI elements,
including mobile navigation, batch actions, and recipient formatting. Improve
sub-address badge to detect and display tags for emails received at
user+tag@domain.com addresses, not just sent emails. Add contextual recipient
display showing "me" for current user and "Name and X others" for multiple
recipients. Update documentation to reflect completed identity management
implementation.
- Add reusable focus trap hook (use-focus-trap.ts)
- Traps Tab/Shift+Tab within modal
- Restores focus on close
- Handles disabled elements gracefully
- Enhance identity modal with WCAG 2.1 compliance
- Add role="dialog" and aria-modal="true"
- Add aria-labelledby linking to modal title
- Implement focus trap on open
- Add ARIA live regions to identity form
- Error messages announced to screen readers
- aria-describedby links inputs to errors
- aria-invalid state on validation failure
Accessibility: Improves keyboard navigation and screen reader UX
Standards: WCAG 2.1 AA compliant for modal interactions
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add useMemo for expensive tag suggestions computation
- Add useCallback for identity CRUD handlers
- Extract magic numbers to constants (MAX_RECENT_TAGS, MAX_TAG_LENGTH)
- Improve JMAP error messages with context
Performance: Reduces unnecessary re-renders in identity modal
Maintainability: Makes limits configurable and self-documenting
UX: Users get clearer error messages when operations fail
No functional changes. All tests passing.
Enable users to manage multiple sending identities and organize incoming mail with sub-addressing (user+tag@domain.com format). Provides better email organization, privacy through disposable addresses, and flexibility for users with multiple roles or accounts.
Replaces all remaining hardcoded strings with translation keys to ensure full localization support across the application. This allows users to experience the entire interface in their preferred language without any English fallbacks.
Fixes ENVIRONMENT_FALLBACK warning by detecting user's browser timezone
and passing it to NextIntlClientProvider. This ensures users worldwide
see email timestamps in their local timezone (USA, Europe, Asia, etc.)
without manual configuration.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Refactored i18n implementation to support seamless language switching
without page reload by pre-loading all translations and using
locale-aware navigation helpers.
Changes:
- Created centralized routing config (i18n/routing.ts) with localePrefix: 'never'
- Added type-safe navigation helpers (i18n/navigation.ts)
- Implemented custom IntlProvider with pre-loaded EN/FR translations
- Updated all pages to use new useRouter from i18n/navigation
- Added language switcher to appearance settings
- Removed URL-based locale routing (no more /en/ or /fr/ prefixes)
- Language preference persisted via Zustand localStorage
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add tablet list auto-hide: email list collapses when selecting an email
on tablet (768-1024px), with back button to return to two-pane view
- Make sender info scrollable on mobile/tablet while keeping subject bar
with action buttons sticky at top for quick access
- Extend overlay sidebar behavior to tablet viewport (768-1024px)
- Add body scroll lock when sidebar is open on mobile/tablet
- Fix backdrop only rendering on mobile/tablet (not desktop)
- Add proper i18n keys for back_to_list, important, close
- Simplify desktop-only CSS classes by removing redundant breakpoint prefixes
Allow users to trust specific senders so their images load automatically
without clicking "Show images" each time. Addresses privacy while
improving UX for known senders.
- Add trustedSenders state to settings store with add/remove/check methods
- Show "Always trust this sender" button in email viewer (ask/block modes)
- Add TrustedSendersModal for managing trusted senders in settings
- Include search, manual add, and avatar display in modal
- Full i18n support (en/fr)
Closes#3
- Add getIdentities() method to JMAP client
- Fetch and store identities in auth store on login
- Add From selector in composer (dropdown for multiple identities)
- Pass identity email/ID through send flow instead of using username
- Add translations for From field (en/fr)
This allows proper sender address handling for LDAP and other auth
backends where username differs from email address.
Closes#5
- Fix textarea colors for proper theme support (light/dark mode)
- Fix modal height to prevent composer from collapsing
- Add explicit "Discard" button in footer for better UX
- Fix hardcoded colors in attachments section for theme support
- Use translations for all user-facing text
Closes#6
- Add pagination support to searchEmails (was limited to 50 results)
- Search now scoped to current mailbox/folder
- Support shared mailbox folders in search
- Display total results count (e.g., "50 of 1400 conversations")
- Add clear (X) button to search input
- Re-run search when changing folders during active search
- Remove unused sidebar screenshot
- Implement thread grouping by threadId in email list
- Add ThreadListItem with collapsed/expanded states for desktop
- Create ThreadConversationView for full-screen mobile experience
- Add thread utility functions for grouping and sorting
- Extend JMAP client with getThread() and getThreadEmails() methods
- Add keyboard shortcut 'x' to expand/collapse threads
- Add thread expansion state management in email store
- Fix React hooks order in login page
- Add .env.example for environment configuration
- Add husky for git hooks
New features:
- Keyboard shortcuts (j/k navigation, r/R/f for reply/forward, s star, e archive, # delete)
- Drag-and-drop emails to mailbox folders with multi-select support
- Right-click context menus on email list items with all actions
- Mobile-responsive adaptive layout with hamburger menu navigation
New files:
- hooks/use-keyboard-shortcuts.ts - Global keyboard shortcut handling
- hooks/use-email-drag.ts, hooks/use-mailbox-drop.ts - Native HTML5 DnD API
- hooks/use-context-menu.ts, components/ui/context-menu.tsx - Context menu system
- hooks/use-media-query.ts, stores/ui-store.ts - Responsive breakpoint handling
- components/layout/mobile-header.tsx - Mobile navigation header
- contexts/drag-drop-context.tsx - Drag-drop state management
- components/keyboard-shortcuts-modal.tsx - Help modal (? key)
- components/email/email-context-menu.tsx - Email-specific context menu
Updated TODO.md with completed tasks and code audit summary
- Implement error boundaries with graceful fallbacks for all major components
(sidebar, email list, email viewer, composer)
- Add push notifications via EventSource for real-time email updates
- Show connection status indicator in sidebar footer
- Play notification sound and show toast for new emails
- Add global error handler and error reporting utilities
- Configure ESLint with modern flat config
- Various fixes: unused variable warnings, proper cleanup on disconnect
- Update translations for error messages (EN/FR)
- showPreview: Conditionally render email preview in list based on setting
- externalContentPolicy: Control external content (ask/block/allow modes)
- deleteAction: Move to trash or permanently delete based on preference
- debugMode: Add conditional logging via new lib/debug.ts utility
Also includes:
- Add moveToTrash method to JMAP client for trash-based deletion
- Update TODO.md with verified implementation status
- Migrate middleware.ts to proxy.ts (Next.js deprecation)
- Fix dark mode folder selection not visible by improving accent color contrast (#1e3a8a)
- Fix inbox not selected by default on login (auto-select primary account inbox)
- Fix email store not cleared on logout (proper state reset between sessions)
- Add settings page with appearance, email behavior, and advanced options
- Integrate mark-as-read delay setting with proper useEffect implementation
- Reset dataLoaded flag on logout to ensure fresh data load on next login
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add overflow-hidden to sidebar container to prevent absolute positioned menu from extending page height
- Improve theme consistency in email viewer security indicators
- Add AI spam analysis display (X-Spam-LLM header support)
- Enhance dark mode support with better color variables
- Update CLAUDE.md with commit/push guidelines
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix pagination to work with Stalwart JMAP server which doesn't return
the total count. Instead of relying on total:
- If we get exactly limit emails (50), assume there might be more
- If we get fewer than limit, we've reached the end
Also fixed observer target rendering - it now always renders instead of
being conditional, ensuring the intersection observer can work properly.
Add pagination support to load emails progressively as user scrolls:
- Update JMAP client getEmails() to accept position parameter
- Return pagination metadata (hasMore, total) from getEmails()
- Add loadMoreEmails() method to email store for loading next page
- Implement intersection observer in EmailList for automatic loading
- Display loading indicator while fetching more emails
- Show "no more emails" message at end of list
Users can now seamlessly scroll through all emails, loading 50 at a time.
Implemented full support for JMAP shared folders (delegated mailboxes):
Core Features:
- Multi-account mailbox fetching from all available JMAP accounts
- Virtual "Shared Folders" parent with account grouping in sidebar
- ID namespacing to prevent collisions across accounts (e.g., "b0:a" for shared Inbox)
- Account-aware email operations (fetch, view, mark as read)
Technical Implementation:
- Store all accounts from JMAP session (primary + shared)
- Transform mailbox IDs: primary uses original, shared use "accountId:mailboxId" format
- Store originalId for JMAP queries while using namespaced IDs in UI
- Transform email mailboxIds to match namespaced mailbox IDs for proper counter updates
- Pass accountId parameter through entire operation chain (fetch, view, mark read)
UI/UX Enhancements:
- Blue Users/User icons for shared folders in sidebar
- Hierarchical display with account grouping
- Proper unread counters that update when marking emails read
- Auto-mark emails as read when opened in shared folders
Bug Fixes:
- Fixed email content fetching showing wrong message in shared folders
- Fixed unread counters not updating for shared mailboxes
- Fixed mark-as-read not working on server for shared accounts
- Cleaned up debug logging
The send validation was requiring body text, which prevented sending
emails that only have attachments. Changed validation to allow sending
when there's either body text OR uploaded attachments.
When sending an email with attachments, saveDraft() would destroy+create
the draft (generating a new ID), but handleSend() was using the old ID
from React state which hadn't updated yet. This caused "notFound" errors.
Fixed by making saveDraft() return the draft ID and using it directly
in handleSend() instead of relying on async state updates.
Email Sending:
- Fix identity lookup for email submission (now properly fetches identities from server)
- Add Sent mailbox requirement for sending emails
- Add proper error handling and validation for email submission
Quick Reply Form:
- Replace dummy input with fully functional quick reply system
- Add state management for reply text with auto-expand on focus
- Implement direct send functionality without modal
- Add loading states and error handling
- Show character counter and action buttons (Cancel, More options, Send)
- Use real user avatar and email from auth store
- Auto-refresh email list after sending
Draft Auto-Save Integration:
- Fix critical issue where auto-saved drafts were ignored when sending
- Pass draftId through entire send chain (composer → store → client)
- Wait for pending auto-save before sending to prevent race conditions
- Add draft cleanup with discard confirmation when closing composer
- Delete orphaned drafts when user confirms discard
- Add i18n support for discard confirmation (EN/FR)
Benefits:
- No more orphaned drafts in Drafts folder
- Better performance (updates existing draft vs creating new email)
- Cleaner UX with proper draft lifecycle management
- Quick replies are truly quick (no modal needed)
- All user-facing messages properly translated
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Improved email loading UX with a polished cross-fade approach:
**Visual Continuity:**
- Removed jarring selectEmail(null) call that caused blank screen
- Current email stays visible while new one loads
- Smooth transition instead of abrupt pop-in
**Loading Feedback:**
- Semi-transparent overlay with subtle backdrop blur (2px)
- Centered loading card with spinner and message
- Small loading indicator in email header
- Both overlays fade in smoothly (200ms)
**React Optimization:**
- Added key prop based on email.id to email viewer
- Triggers proper React animations on email change
- Combined with 300ms fade-in creates smooth cross-fade effect
**Result:**
When clicking an email, the current email remains visible with a subtle
dimming effect while the new email loads, then smoothly transitions to
the new content. No more visual glitches or jarring blank screens.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removed the jarring "Loading full email content..." banner that appeared
while email content was loading, which caused a visual flash/glitch.
Added smooth fade-in animation (300ms) to email viewer for better UX.
The loading state is now properly handled by the skeleton loader that
was added in the previous commit, so this intermediate loading banner
is no longer needed and was causing the visual glitch reported by the user.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
- Add justSelectedSuggestion ref to track when a suggestion is selected
- Skip showing suggestions in useEffect when selection just occurred
- Fixes issue where menu would reopen immediately after Enter key selection
- Added server capability detection to check supported features
- Implemented keep-alive mechanism with periodic ping (every 30s)
- Added automatic session reconnection on connection failure
- Implemented draft auto-save with 2-second debounce
- Added visual indicators for draft save status
- Implemented attachment upload support with progress indication
- Added file attachment UI in email composer
- Updated JMAP client with blob upload functionality
- Enhanced disconnect handling to properly cleanup resources
- Updated TODO.md to reflect completed tasks
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed sender name from text-gray-900 to text-foreground
- Fixed To and CC field text colors from text-gray-700 to text-foreground
- Removed duplicate hover state on More actions button
- Changed More actions icon to use text-muted-foreground
All sender information now properly adapts to light/dark themes.
- Replaced all hardcoded colors with theme-aware CSS variables
- Fixed duplicate hover states (removed hover:bg-gray-100)
- Changed dividers from bg-gray-200 to bg-border
- Updated dropdown menus to use bg-background instead of bg-white
- Fixed text colors to use text-foreground and text-muted-foreground
- Improved no-email-selected gradient background
- Removed prose-gray class for better theme compatibility
All UI elements now properly adapt to light/dark mode using CSS variables.
- Removed isLoading from main loading condition
- Now only shows full-screen loader for auth/initial load
- Email list handles its own loading state when switching folders
- Eliminates jarring fade in/fade out effect when navigating between mailboxes
- Changed positioning from bottom-12 to bottom-0
- Menu now slides up from bottom when opened (-translate-y-12)
- Removed opacity transition to keep menu always visible during animation
- Menu properly appears above the toggle button when activated
- Added relative positioning to sidebar container
- Menu now properly contained within sidebar's 256px width
- Added z-index and shadow for better visual layering
- Positioned menu above toggle button with rounded top corners
- Added opacity transition for smoother animation
- Created sliding menu panel that slides up from bottom
- Added two-level navigation: main menu and settings submenu
- Replaced emoji flags with text-based language selection (EN/FR)
- Simplified theme selector with compact button design
- Added smooth transitions between menu states
- Organized menu items: Storage, Settings, Sign Out
- Implemented back navigation in settings submenu
- Clean, minimalistic design with subtle borders and hover states
- Updated all components to use theme CSS variables instead of hardcoded gray colors
- Fixed issue where light mode only changed borders but not backgrounds
- Components now properly respect theme switching with consistent colors
- Replaced bg-gray-*, text-gray-*, border-gray-* with theme variables (bg-background, text-foreground, etc.)
Affected components:
- Main page layout
- Login page
- Sidebar navigation
- All UI components (Button, Input, Toast, Language Switcher)
- Email viewer, list, and list items
