courrier correct panel 2 scroll up

components/email/EmailList.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Loader2, Mail, Search, X } from 'lucide-react';
 import { Email } from '@/hooks/use-courrier';
-import EmailListItem from './EmailListItem';
+import EmailListItem from '@/components/email/EmailListItem';
-import EmailListHeader from './EmailListHeader';
+import EmailListHeader from '@/components/email/EmailListHeader';
-import BulkActionsToolbar from './BulkActionsToolbar';
+import BulkActionsToolbar from '@/components/email/BulkActionsToolbar';
 import { Input } from '@/components/ui/input';
 
 interface EmailListProps {
@@ -43,95 +43,67 @@ export default function EmailList({
 }: EmailListProps) {
   const [scrollPosition, setScrollPosition] = useState(0);
   const [searchQuery, setSearchQuery] = useState('');
-  const scrollRef = React.useRef<HTMLDivElement>(null);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const [emailsLength, setEmailsLength] = useState(emails.length);
+  const scrollRef = useRef<HTMLDivElement>(null);
-  const [isScrollingToTop, setIsScrollingToTop] = useState(false);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const prevEmailsLengthRef = useRef(emails.length);
 
-  // Track changes in emails array to manage scrolling
+  // Debounced scroll handler for better performance
-  React.useEffect(() => {
+  const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
-    // If email count increased, we loaded more emails
-    if (emails.length > emailsLength) {
-      // If not loading more at the bottom, let's maintain scroll position
-      if (!isLoading && scrollRef.current && !isScrollingToTop) {
-        // This ensures the visible emails stay the same after loading more
-        setTimeout(() => {
-          if (scrollRef.current) {
-            scrollRef.current.scrollTop = scrollPosition;
-          }
-        }, 50);
-      }
-    }
-    // Update the emails length tracker
-    setEmailsLength(emails.length);
-  }, [emails, emailsLength, isLoading, scrollPosition]);
-  
-  // Add event listener for scroll reset from parent component
-  React.useEffect(() => {
-    const handleResetScroll = () => {
-      console.log("Resetting scroll position to top");
-      if (scrollRef.current) {
-        setTimeout(() => {
-          if (scrollRef.current) {
-            // Force scroll to top
-            scrollRef.current.scrollTop = 0;
-          }
-        }, 100);
-      }
-    };
-    
-    // Listen for the custom event
-    window.addEventListener('reset-email-scroll', handleResetScroll);
-    
-    // Also reset scroll when folder changes
-    handleResetScroll();
-    
-    return () => {
-      window.removeEventListener('reset-email-scroll', handleResetScroll);
-    };
-  }, [currentFolder]); // Reset scroll when folder changes
-
-  // Handle scroll to detect when user reaches the bottom or scrolls up
-  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
     const target = event.target as HTMLDivElement;
     const { scrollTop, scrollHeight, clientHeight } = target;
     
-    // Save scroll position for restoration when needed
+    // Save scroll position for restoration
     setScrollPosition(scrollTop);
     
-    // Detect scrolling direction
+    // Clear any existing timeout to prevent rapid firing
-    setIsScrollingToTop(scrollTop < scrollPosition);
+    if (scrollTimeoutRef.current) {
-    
+      clearTimeout(scrollTimeoutRef.current);
-    // If user scrolls near the bottom and we have more emails, load more
-    if (scrollHeight - scrollTop - clientHeight < 200 && hasMoreEmails && !isLoading) {
-      // Store current scroll data before loading more
-      const currentScrollTop = scrollTop;
-      const currentScrollHeight = scrollHeight;
-      
-      // Request more emails
-      onLoadMore();
     }
-  };
     
-  // Add a function to scroll to top
+    // If near bottom (within 200px) and more emails are available, load more
-  const scrollToTop = () => {
+    if (scrollHeight - scrollTop - clientHeight < 200 && hasMoreEmails && !isLoading && !isLoadingMore) {
-    if (scrollRef.current) {
+      setIsLoadingMore(true);
-      scrollRef.current.scrollTop = 0;
-    }
-  };
       
-  // Update title to show date sort order
+      // Use timeout to debounce load requests
-  React.useEffect(() => {
+      scrollTimeoutRef.current = setTimeout(() => {
-    // Add a small indicator in the header to show emails are sorted by date
+        onLoadMore();
-    const headerElement = document.querySelector('.email-header-title');
+        
-    if (headerElement) {
+        // Reset loading state after a delay
-      headerElement.setAttribute('title', 'Emails are sorted by date (newest first)');
+        setTimeout(() => {
+          setIsLoadingMore(false);
+        }, 1000);
+      }, 100);
     }
+  }, [hasMoreEmails, isLoading, isLoadingMore, onLoadMore]);
+
+  // Restore scroll position when emails are loaded
+  useEffect(() => {
+    if (emails.length > prevEmailsLengthRef.current && scrollRef.current && scrollPosition > 0) {
+      // Maintain scroll position when new emails are added
+      scrollRef.current.scrollTop = scrollPosition;
+    }
+    
+    prevEmailsLengthRef.current = emails.length;
+  }, [emails.length, scrollPosition]);
+
+  // Clean up timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
   }, []);
 
-  // Handle search
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
     onSearch?.(searchQuery);
+    
+    // Reset scroll to top when searching
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
   };
 
   const clearSearch = () => {
@@ -139,11 +111,21 @@ export default function EmailList({
     onSearch?.('');
   };
 
+  const scrollToTop = () => {
+    if (scrollRef.current) {
+      // Use smooth scrolling for better UX
+      scrollRef.current.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    }
+  };
+
   // Render loading state
   if (isLoading && emails.length === 0) {
     return (
       <div className="flex justify-center items-center h-full p-8 bg-white/95 backdrop-blur-sm">
-        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
+        <Loader2 className="h-8 w-8 text-blue-500 animate-spin" />
       </div>
     );
   }
@@ -219,17 +201,17 @@ export default function EmailList({
         onScroll={handleScroll}
       >
         <div className="divide-y divide-gray-100">
-          {/* Add a small note to show emails are sorted by date */}
+          {/* Back to top button */}
-          <div className="text-xs text-gray-400 py-1 px-2 bg-gray-50 flex justify-between">
+          {scrollPosition > 300 && (
-            <span>Sorted by date (newest first)</span>
             <button
               onClick={scrollToTop}
-              className="text-blue-500 hover:text-blue-700"
+              className="sticky top-0 w-full py-1 text-xs text-blue-600 bg-blue-50 hover:bg-blue-100 z-10"
             >
-              Back to top
+              ↑ Back to newest emails
             </button>
-          </div>
+          )}
           
+          {/* Email list */}
           {emails.map((email) => (
             <EmailListItem
               key={email.id}
@@ -248,11 +230,22 @@ export default function EmailList({
             />
           ))}
           
-          {isLoading && emails.length > 0 && (
+          {/* Loading indicator */}
+          {(isLoading || isLoadingMore) && (
             <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>
+              <Loader2 className="h-4 w-4 text-blue-500 animate-spin" />
             </div>
           )}
+          
+          {/* Load more button - only show when near bottom but not auto-loading */}
+          {hasMoreEmails && !isLoading && !isLoadingMore && (
+            <button 
+              onClick={onLoadMore}
+              className="w-full py-2 text-gray-500 hover:bg-gray-100 text-sm"
+            >
+              Load more emails
+            </button>
+          )}
         </div>
       </div>
     </div>