courrier multi account restore compose

components/email/EmailList.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React, { useState } from 'react';
 import { Loader2, Mail, Search, X } from 'lucide-react';
 import { Email } from '@/hooks/use-courrier';
-import EmailListItem from '@/components/email/EmailListItem';
-import EmailListHeader from '@/components/email/EmailListHeader';
-import BulkActionsToolbar from '@/components/email/BulkActionsToolbar';
+import EmailListItem from './EmailListItem';
+import EmailListHeader from './EmailListHeader';
+import BulkActionsToolbar from './BulkActionsToolbar';
 import { Input } from '@/components/ui/input';
 
 interface EmailListProps {
@@ -43,92 +43,24 @@ export default function EmailList({
 }: EmailListProps) {
   const [scrollPosition, setScrollPosition] = useState(0);
   const [searchQuery, setSearchQuery] = useState('');
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const prevEmailsLengthRef = useRef(emails.length);
 
-  // Debounced scroll handler for better performance
-  const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
+  // Handle scroll to detect when user reaches the bottom
+  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
     const target = event.target as HTMLDivElement;
     const { scrollTop, scrollHeight, clientHeight } = target;
     
-    // Save scroll position for restoration
     setScrollPosition(scrollTop);
     
-    // Clear any existing timeout to prevent rapid firing
-    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) {
+      onLoadMore();
     }
-    
-    // If near bottom (within 200px) and more emails are available, load more
-    // Added additional checks to prevent loading loop
-    const isNearBottom = scrollHeight - scrollTop - clientHeight < 200;
-    if (isNearBottom && hasMoreEmails && !isLoading && !isLoadingMore) {
-      setIsLoadingMore(true);
-      
-      // Use timeout to debounce load requests
-      scrollTimeoutRef.current = setTimeout(() => {
-        // Clear the timeout reference before loading
-        scrollTimeoutRef.current = null;
-        onLoadMore();
-        
-        // Reset loading state after a delay
-        setTimeout(() => {
-          setIsLoadingMore(false);
-        }, 1500); // Increased from 1000ms to 1500ms to prevent quick re-triggering
-      }, 200); // Increased from 100ms to 200ms for better debouncing
-    }
-  }, [hasMoreEmails, isLoading, isLoadingMore, onLoadMore]);
-
-  // Restore scroll position when emails are loaded
-  useEffect(() => {
-    // Only attempt to restore position if:
-    // 1. We have more emails than before
-    // 2. We have a scroll reference
-    // 3. We have a saved scroll position
-    // 4. We're not in the middle of a loading operation
-    if (emails.length > prevEmailsLengthRef.current && 
-        scrollRef.current && 
-        scrollPosition > 0 && 
-        !isLoading) {
-      // Use requestAnimationFrame to ensure the DOM has updated
-      requestAnimationFrame(() => {
-        if (scrollRef.current) {
-          scrollRef.current.scrollTop = scrollPosition;
-          console.log(`Restored scroll position to ${scrollPosition}`);
-        }
-      });
-    }
-    
-    // Always update the reference for next comparison
-    prevEmailsLengthRef.current = emails.length;
-  }, [emails.length, scrollPosition, isLoading]);
-
-  // Add listener for custom reset scroll event
-  useEffect(() => {
-    const handleResetScroll = () => {
-      if (scrollRef.current) {
-        scrollRef.current.scrollTop = 0;
-        setScrollPosition(0);
-      }
-    };
-    
-    window.addEventListener('reset-email-scroll', handleResetScroll);
-    
-    return () => {
-      window.removeEventListener('reset-email-scroll', handleResetScroll);
-    };
-  }, []);
+  };
 
+  // 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 = () => {
@@ -136,21 +68,11 @@ 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">
-        <Loader2 className="h-8 w-8 text-blue-500 animate-spin" />
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
       </div>
     );
   }
@@ -221,22 +143,10 @@ export default function EmailList({
       )}
       
       <div 
-        ref={scrollRef}
         className="flex-1 overflow-y-auto"
         onScroll={handleScroll}
       >
         <div className="divide-y divide-gray-100">
-          {/* Back to top button */}
-          {scrollPosition > 300 && (
-            <button
-              onClick={scrollToTop}
-              className="sticky top-0 w-full py-1 text-xs text-blue-600 bg-blue-50 hover:bg-blue-100 z-10"
-            >
-              ↑ Back to newest emails
-            </button>
-          )}
-          
-          {/* Email list */}
           {emails.map((email) => (
             <EmailListItem
               key={email.id}
@@ -255,22 +165,11 @@ export default function EmailList({
             />
           ))}
           
-          {/* Loading indicator */}
-          {(isLoading || isLoadingMore) && (
+          {isLoading && emails.length > 0 && (
             <div className="flex items-center justify-center p-4">
-              <Loader2 className="h-4 w-4 text-blue-500 animate-spin" />
+              <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
             </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>