courrier formatting

components/email/EmailList.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Loader2, Mail, Search, X } from 'lucide-react';
 import { Email } from '@/hooks/use-courrier';
 import EmailListItem from './EmailListItem';
@@ -43,6 +43,15 @@ export default function EmailList({
 }: EmailListProps) {
   const [scrollPosition, setScrollPosition] = useState(0);
   const [searchQuery, setSearchQuery] = useState('');
+  const listRef = useRef<HTMLDivElement>(null);
+  const isLoadingMoreRef = useRef(false);
+  
+  // Reset loading state when isLoading changes
+  useEffect(() => {
+    if (!isLoading) {
+      isLoadingMoreRef.current = false;
+    }
+  }, [isLoading]);
 
   // Handle scroll to detect when user reaches the bottom
   const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
@@ -54,13 +63,37 @@ export default function EmailList({
     // Calculate how close to the bottom we are (in pixels)
     const distanceToBottom = scrollHeight - scrollTop - clientHeight;
     
-    // More aggressive threshold - load more when within 300px of bottom
-    // Only trigger if we have more emails and aren't already loading
-    if (distanceToBottom < 300 && hasMoreEmails && !isLoading) {
-      console.log(`[EMAIL_LIST] Near bottom (${distanceToBottom}px), loading more emails`);
+    // Debug logging to help diagnose scrolling issues
+    console.log(`[EMAIL_LIST] Scroll metrics - scrollHeight: ${scrollHeight}, scrollTop: ${scrollTop}, clientHeight: ${clientHeight}, distanceToBottom: ${distanceToBottom}`);
+    
+    // Only trigger if we have more emails, aren't already loading, and we're near the bottom
+    const LOAD_MORE_THRESHOLD = 400; // Increased threshold for more reliable loading
+    
+    if (distanceToBottom < LOAD_MORE_THRESHOLD && hasMoreEmails && !isLoading && !isLoadingMoreRef.current) {
+      console.log(`[EMAIL_LIST] Near bottom (${distanceToBottom}px), loading more emails. hasMoreEmails: ${hasMoreEmails}, isLoading: ${isLoading}`);
+      isLoadingMoreRef.current = true; // Prevent multiple load more triggers
       onLoadMore();
     }
   };
+  
+  // Also check on component mount and email changes if we need to load more
+  useEffect(() => {
+    if (!listRef.current) return;
+    
+    const checkScroll = () => {
+      const { scrollHeight, clientHeight } = listRef.current as HTMLDivElement;
+      
+      // If the content doesn't fill the container, and we have more to load
+      if (scrollHeight <= clientHeight && hasMoreEmails && !isLoading && !isLoadingMoreRef.current) {
+        console.log("[EMAIL_LIST] Content doesn't fill container, loading more emails");
+        isLoadingMoreRef.current = true;
+        onLoadMore();
+      }
+    };
+    
+    // Check after render and when emails change
+    requestAnimationFrame(checkScroll);
+  }, [emails, hasMoreEmails, isLoading, onLoadMore]);
 
   // Handle search
   const handleSearch = (e: React.FormEvent) => {
@@ -149,7 +182,8 @@ export default function EmailList({
       )}
       
       <div 
-        className="flex-1 overflow-y-auto"
+        ref={listRef}
+        className="flex-1 overflow-y-auto scroll-smooth"
         onScroll={handleScroll}
       >
         <div className="divide-y divide-gray-100">
@@ -171,9 +205,18 @@ export default function EmailList({
             />
           ))}
           
-          {isLoading && emails.length > 0 && (
-            <div className="flex items-center justify-center p-4">
-              <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
+          {/* Make loading indicator more visible */}
+          {isLoading && (
+            <div className="flex items-center justify-center p-4 bg-gray-50">
+              <Loader2 className="h-5 w-5 text-blue-500 animate-spin mr-2" />
+              <span className="text-sm text-gray-600">Loading more emails...</span>
+            </div>
+          )}
+          
+          {/* Visual indicator when all emails are loaded */}
+          {!hasMoreEmails && emails.length > 0 && (
+            <div className="p-3 text-center text-xs text-gray-500 bg-gray-50">
+              End of emails in this folder
             </div>
           )}
         </div>

lib/reducers/emailReducer.ts

@@ -227,6 +227,9 @@ export function emailReducer(state: EmailState, action: EmailAction): EmailState
       // Filter out any duplicates before appending
       const newEmails = action.payload.filter(email => !existingIds.has(email.id));
       
+      // Log appending for debugging
+      console.log(`[EMAIL_REDUCER] Appending ${newEmails.length} new emails to existing ${state.emails.length} emails`);
+      
       // Combine and sort emails by date (newest first)
       const combinedEmails = [...state.emails, ...newEmails].sort(
         (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()