Reverse order thread

apps/mail/app/globals.css

@@ -201,10 +201,9 @@
   }
 }
 
-.compose-gradient {
-  background: linear-gradient(90deg, rgba(255, 213, 208, 1), rgba(219, 255, 228, 1), rgba(226, 214, 255, 1), rgba(255, 213, 208, 1));
-  background-size: 400% 400%;
-  animation: gradient-flow 3s ease infinite;
+.compose-loading {
+  background: #016FFE;
+  animation: none;
 }
 
 .compose-gradient-animated {

apps/mail/components/draft/drafts.tsx

@@ -55,7 +55,7 @@ export function DraftsLayout() {
         <div className="bg-offsetLight dark:bg-offsetDark flex-1 flex-col overflow-y-auto shadow-inner md:flex md:rounded-2xl md:border md:shadow-sm">
           <div
             className={cn(
-              'compose-gradient h-0.5 w-full transition-opacity',
+              'compose-loading h-0.5 w-full transition-opacity',
               isValidating ? 'opacity-50' : 'opacity-0',
             )}
           />

apps/mail/components/mail/mail-display.tsx

@@ -87,10 +87,11 @@ type Props = {
   isMuted: boolean;
   isLoading: boolean;
   index: number;
+  totalEmails?: number;
   demo?: boolean;
 };
 
-const MailDisplay = ({ emailData, isMuted, index, demo }: Props) => {
+const MailDisplay = ({ emailData, isMuted, index, totalEmails, demo }: Props) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
   const [unsubscribed, setUnsubscribed] = useState(false);
   const [isUnsubscribing, setIsUnsubscribing] = useState(false);
@@ -113,10 +114,16 @@ const MailDisplay = ({ emailData, isMuted, index, demo }: Props) => {
     : useSummary(emailData.id);
 
   useEffect(() => {
-    if (index === 0) {
+    if (totalEmails && index === totalEmails - 1) {
       setIsCollapsed(false);
+      if (totalEmails > 5) {
+        setTimeout(() => {
+          const element = document.getElementById(`mail-${emailData.id}`);
+          element?.scrollIntoView({ behavior: 'smooth' });
+        }, 100);
+      }
     }
-  }, [index]);
+  }, [index, emailData.id, totalEmails]);
 
   const listUnsubscribeAction = useMemo(
     () =>
@@ -144,7 +151,7 @@ const MailDisplay = ({ emailData, isMuted, index, demo }: Props) => {
   };
 
   return (
-    <div className={cn('relative flex-1 overflow-hidden')}>
+    <div className={cn('relative flex-1 overflow-hidden')} id={`mail-${emailData.id}`}>
       <div className="relative h-full overflow-y-auto">
         <div className="flex flex-col gap-4 p-4 pb-2 transition-all duration-200">
           <div className="flex items-start justify-between gap-4">

apps/mail/components/mail/mail.tsx

@@ -123,7 +123,7 @@ export function DemoMailLayout() {
             <div className="bg-offsetLight dark:bg-offsetDark flex-1 flex-col overflow-y-auto shadow-inner md:flex md:rounded-2xl md:border md:shadow-sm">
               <div
                 className={cn(
-                  'compose-gradient h-0.5 w-full transition-opacity',
+                  'compose-loading h-0.5 w-full transition-opacity',
                   isValidating ? 'opacity-50' : 'opacity-0',
                 )}
               />
@@ -304,7 +304,7 @@ export function MailLayout() {
             <div className="bg-offsetLight dark:bg-offsetDark flex-1 flex-col overflow-y-auto shadow-inner md:flex md:rounded-2xl md:border md:shadow-sm">
               <div
                 className={cn(
-                  'compose-gradient h-0.5 w-full transition-opacity',
+                  'compose-loading h-0.5 w-full transition-opacity',
                   isValidating ? 'opacity-50' : 'opacity-0',
                 )}
               />

apps/mail/components/mail/search-bar.tsx

@@ -634,7 +634,7 @@ export function SearchBar() {
           <Input
             placeholder={isFocused ? "" : "Search..."}
             ref={inputRef}
-            className="bg-muted/50 text-muted-foreground ring-muted placeholder:text-muted-foreground/70 h-8 w-full rounded-md border-none pl-9 pr-14 shadow-none transition-all duration-300"
+            className="bg-muted-foreground/20 dark:bg-muted/50 text-muted-foreground ring-muted placeholder:text-muted-foreground/70 h-8 w-full rounded-md border-none pl-9 pr-14 shadow-none transition-all duration-300"
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             onFocus={() => setIsFocused(true)}

apps/mail/components/mail/thread-display.tsx

@@ -464,7 +464,7 @@ export function ThreadDisplay({ mail, onClose, isMobile, id }: ThreadDisplayProp
         <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
           <ScrollArea className="h-full flex-1" type="auto">
             <div className="pb-4">
-              {[...(emailData || [])].reverse().map((message, index) => (
+              {(emailData || []).map((message, index) => (
                 <div
                   key={message.id}
                   className={cn(
@@ -478,6 +478,7 @@ export function ThreadDisplay({ mail, onClose, isMobile, id }: ThreadDisplayProp
                     isMuted={isMuted}
                     isLoading={false}
                     index={index}
+                    totalEmails={emailData.length}
                   />
                 </div>
               ))}