Commit Graph
28 Commits
Author SHA1 Message Date
Matthieu MALVACHE 3ba5cf16c3 fix(sidebar): fix context menu viewport clipping and delete dialog overflow (#44)
Render context menu and delete confirmation dialog via portal to escape
sidebar overflow-hidden. Clamp context menu position to viewport bounds.
2026-03-23 14:39:20 +01:00
Matthieu MALVACHE be6907f863 feat(sidebar): add folder drag-and-drop reparenting (#44) 2026-03-23 14:29:16 +01:00
Matthieu MALVACHE 01cb0f173f feat(sidebar): add folder management UI with context menu, inline editing, and move-to (#44) 2026-03-23 14:26:22 +01:00
Matthieu MALVACHE 961b3edc3a fix: consistent tablet navigation across all pages and nav bar polish
Show bottom nav on tablet breakpoint (768-1023px) for calendar and
contacts pages, matching the mail page. Add z-index to prevent content
bleeding through. Remove redundant active indicator bar since color
already signals active state.
2026-03-16 22:18:59 +01:00
Matthieu MALVACHE 27911dfe76 feat: add UX & robustness improvements (iframe rendering, retry, mobile, polish)
P0 Core:
- Sandboxed iframe rendering for rich HTML emails (CSS isolation)
- API retry with exponential backoff for transient JMAP failures
- Mobile bottom action bar with touch-friendly email actions
- Long-press context menu + tap-to-expand submenus on touch devices

P1 Polish:
- Tag counts sidebar section with JMAP batch queries
- Empty folder option for Junk/Trash with batch delete
- Extra-compact density option (28px rows, 44px on touch)
- SPF/DKIM/DMARC security tooltips with plain-language explanations
- Resizable sidebars with drag, touch, and keyboard support
- Expandable sender info panel in email viewer

All 8 locales updated (en/fr/ja/es/it/de/nl/pt).
2026-03-16 15:40:24 +01:00
Matthieu MALVACHE 40c7fa3649 feat: add UI/UX polish, templates settings, confirm dialog, welcome banner, and navigation rail
- Add ConfirmDialog component with promise-based useConfirmDialog hook
- Add WelcomeBanner onboarding component with localStorage persistence
- Add NavigationRail (desktop icon rail + mobile bottom tab bar)
- Polish login form (shake on error, TOTP slide, password visibility, session expired banner)
- Add inline form validation with shake animation in email composer and contacts
- Add empty state patterns for contacts (no data vs no search results)
- Improve toast system with undo action support and typed durations
- Add template settings tab to settings page
- Refactor sidebar (cleaner code, remove unused imports)
- Add WCAG AA reduced-motion, safe area insets, sr-only live region
- Add shake/slide animations in globals.css
- Update i18n for all 8 locales
2026-02-17 02:30:09 +01:00
Matthieu MALVACHE a27196bdeb feat(calendar): add JMAP Calendar integration with full review fixes
Calendar phase 1 with comprehensive review-driven hardening:
- JMAP CalendarEvent CRUD (RFC 8984 types, capability detection)
- Month/week/day/agenda views with multi-day event spanning
- Column-based overlap layout for concurrent events
- Event modal with create/edit/delete, recurrence, reminders
- Mini-calendar sidebar with calendar visibility toggles
- Settings: firstDayOfWeek and timeFormat wired to all views
- Locale-aware date formatting via next-intl useFormatter (8 locales)
- Push notification handling for Calendar/CalendarEvent state changes
- ARIA grid roles, event card labels, focus trap, 44px touch targets
- Input validation, color sanitization, timezone auto-detection
- Error handling with toast feedback, capability page guard
- ICU pluralization for alert translations, debug logger integration
2026-02-16 20:32:06 +01:00
Matthieu MALVACHE 83e01ae551 feat: add contacts phase 2, advanced search, vacation responder, Docker & TOTP 2FA
Contacts:
- Contact groups/lists with JMAP members map and composer expansion
- vCard import/export with RFC 6350 parser and duplicate detection
- Bulk operations (multi-select, delete, group add, export)

Search:
- Advanced search panel with JMAP filter fields
- Search chips for active filters visualization
- Debounced inputs with AbortController deduplication

Vacation:
- JMAP VacationResponse singleton management
- Settings tab with date range and message configuration
- Sidebar indicator when vacation responder is active

Auth:
- TOTP 2FA support with Stalwart-compatible password$totp format

Infrastructure:
- Docker multi-stage build with standalone Next.js output
- Structured server-side logger with text/JSON format
- CSP Report-Only and security headers via proxy middleware
- Layout refactoring (HTML structure in root layout)
- Playwright E2E framework setup

Testing: 450+ tests (identity, contacts, vCard, threads, headers, components)
i18n: All new strings added to all 8 locales
2026-02-16 18:46:33 +01:00
Matthieu MALVACHE 17abe7ff56 feat(contacts): add address book with JMAP sync and local fallback
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
2026-02-16 17:07:45 +01:00
Matthieu MALVACHE f62f5adf29 refactor(identity): enhance i18n and improve sub-address detection
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.
2026-01-08 17:20:13 +01:00
Matthieu MALVACHE 91b8a42fdd feat(i18n): Complete internationalization coverage
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.
2026-01-08 04:24:58 +01:00
Matthieu MALVACHEandClaude Sonnet 4.5 a4e2fcf81b feat(i18n): Enable instant client-side language switching
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>
2026-01-08 03:59:29 +01:00
Matthieu MALVACHE 4032692700 feat(ui): Improve tablet and mobile email viewing experience
- 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
2026-01-08 03:10:23 +01:00
Matthieu MALVACHE 7d77415801 feat: Add search pagination and UX improvements
- 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
2025-12-17 18:32:47 +01:00
Matthieu MALVACHE f344725e2c feat: Add keyboard shortcuts, drag-drop, context menus, and mobile responsive design
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
2025-12-10 16:58:01 +01:00
Matthieu MALVACHE 81ec4cb471 feat: Add error boundaries and real-time push notifications
- 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)
2025-12-10 00:43:46 +01:00
Matthieu MALVACHEandClaude 2f454cd673 fix: Improve UI/UX with dark mode selection visibility and auto-select inbox on login
- 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>
2025-10-02 16:39:10 +02:00
Matthieu MALVACHEandClaude 1e563a8973 fix: Fix sidebar footer overflow causing page height extension
- 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>
2025-10-02 14:48:45 +02:00
Matthieu MALVACHE 5f45cbe993 feat: Add comprehensive shared folders support with multi-account access
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
2025-10-02 13:57:19 +02:00
Matthieu MALVACHE 7a3dc98c6e fix: Remove full-screen fade when switching mailboxes
- 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
2025-10-02 12:02:49 +02:00
Matthieu MALVACHE 25c00da9db fix: Fix sliding menu visibility issue
- 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
2025-10-02 02:08:10 +02:00
Matthieu MALVACHE ad0f671deb fix: Constrain sliding menu to sidebar width
- 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
2025-10-02 02:07:12 +02:00
Matthieu MALVACHE 1ea2765ab0 feat: Implement minimalistic sliding menu with submenu navigation
- 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
2025-10-02 02:02:15 +02:00
Matthieu MALVACHE ba0751eb19 fix: Replace hardcoded colors with CSS variables for proper light/dark mode switching
- 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
2025-10-02 01:58:38 +02:00
Matthieu MALVACHE 1c3e3a6f99 fix: Resolve UI/UX and localization issues
- Fixed light mode not applying correctly by ensuring proper class handling
- Fixed French language switching with updated middleware configuration
- Improved dark mode color contrast on language selector
- Redesigned sidebar footer with sliding settings panel for better UX
- Added visual storage quota indicator with progress bar
- Updated theme switcher with grid layout and better visual feedback
- Separated logout button from other settings for clarity
- Added proper translations for all UI elements
- Fixed theme persistence across page refreshes
2025-10-02 01:51:30 +02:00
Matthieu MALVACHE 04ab18d4e5 feat: Implement comprehensive i18n support with English and French
- Add next-intl for internationalization
- Create English and French translation files
- Implement language switcher component in sidebar
- Configure automatic browser language detection
- Update all components to use translation keys
- Set up locale-aware routing with [locale] directory structure
- Add i18n guidelines to CLAUDE.md for future development
- Store user language preference in localStorage

The app now supports:
- English (en) and French (fr) languages
- Automatic browser language detection on first visit
- User language preference persistence
- Real-time language switching without page reload
- Complete translation coverage for all UI elements
2025-10-02 01:40:37 +02:00
Matthieu MALVACHE c9769264e2 Fix Tailwind CSS v4 compatibility issues
- Updated globals.css to use standard CSS variables instead of HSL
- Replaced custom color utilities with standard Tailwind classes
- Fixed all component styles to use gray color scale
- Simplified Tailwind configuration
2025-10-01 23:47:50 +02:00
Matthieu MALVACHE 23847f5812 Initial commit: Minimalist JMAP webmail client
- Set up Next.js 15.5 with TypeScript and Turbopack
- Configured Tailwind CSS v4 with minimalist design system
- Created core email components: list, viewer, composer
- Implemented sidebar navigation with mailbox folders
- Added JMAP client wrapper using jmap-jam library
- Set up Zustand for state management
- Created responsive layout with three-pane view
- Added mock data for development
2025-10-01 23:44:03 +02:00