Improve email loading performance and fix UI issues

- Fixed refresh button icon not displaying (changed from icon prop to v-icon element)
- Reduced default email limit from 50 to 20 to improve loading speed
- Optimized cached email loading to only load most recent emails (up to limit)
- Fixed CommonJS require error in email-utils.ts (changed to ES module import)
- Added sorting to cached files to ensure newest emails are loaded first

This should significantly improve email loading performance from 578 cached files down to max 20

components/ClientEmailSection.vue

@@ -29,12 +29,12 @@
           <v-btn
             @click="loadEmailThread"
             variant="tonal"
-            icon="mdi-refresh"
             :loading="isRefreshing"
             size="small"
             color="grey-darken-4"
           >
-            <v-tooltip activator="parent">Refresh Emails</v-tooltip>
+            <v-icon>mdi-refresh</v-icon>
+            <v-tooltip activator="parent" location="bottom">Refresh Emails</v-tooltip>
           </v-btn>
           <v-spacer />
           <v-btn-group v-if="!mobile" variant="text" density="compact">

server/api/email/fetch-thread.ts

@@ -24,8 +24,8 @@ export default defineEventHandler(async (event) => {
 
   try {
     const body = await readBody(event);
-    // Increase limit to get more complete threads
+    // Limit emails to improve performance
-    const { clientEmail, interestId, sessionId, limit = 50 } = body;
+    const { clientEmail, interestId, sessionId, limit = 20 } = body;
 
     if (!clientEmail || !sessionId) {
       throw createError({ 
@@ -84,36 +84,40 @@ export default defineEventHandler(async (event) => {
         
         console.log('Found cached email files:', files.length);
         
-        for (const file of files) {
+        // Limit cached emails to most recent ones
-          if (file.name.endsWith('.json') && !file.isFolder) {
+        const sortedFiles = files
-            try {
+          .filter(f => f.name.endsWith('.json'))
-              // Read file directly on server using MinIO client (works with private buckets)
+          .sort((a, b) => b.name.localeCompare(a.name)) // Sort by filename (newer files have higher timestamps)
-              const client = getMinioClient();
+          .slice(0, limit); // Only load up to the limit
-              // Use the client-emails bucket directly
+        
-              const bucketName = 'client-emails';
+        for (const file of sortedFiles) {
-              
+          try {
-              // The file.name is already the correct path within the bucket
+            // Read file directly on server using MinIO client (works with private buckets)
-              const fileName = file.name;
+            const client = getMinioClient();
-              
+            // Use the client-emails bucket directly
-              // Get object as stream
+            const bucketName = 'client-emails';
-              const stream = await client.getObject(bucketName, fileName);
+            
-              
+            // The file.name is already the correct path within the bucket
-              // Convert stream to string
+            const fileName = file.name;
-              let data = '';
+            
-              stream.on('data', (chunk) => {
+            // Get object as stream
-                data += chunk;
+            const stream = await client.getObject(bucketName, fileName);
-              });
+            
-              
+            // Convert stream to string
-              await new Promise((resolve, reject) => {
+            let data = '';
-                stream.on('end', () => resolve(data));
+            stream.on('data', (chunk) => {
-                stream.on('error', reject);
+              data += chunk;
-              });
+            });
-              
+            
-              const emailData = JSON.parse(data);
+            await new Promise((resolve, reject) => {
-              cachedEmails.push(emailData);
+              stream.on('end', () => resolve(data));
-            } catch (err) {
+              stream.on('error', reject);
-              console.error('Failed to read cached email:', file.name, err);
+            });
-            }
+            
+            const emailData = JSON.parse(data);
+            cachedEmails.push(emailData);
+          } catch (err) {
+            console.error('Failed to read cached email:', file.name, err);
           }
         }
       } catch (err) {

server/utils/email-utils.ts

@@ -1,6 +1,6 @@
 import { simpleParser } from 'mailparser';
 import type { ParsedMail } from 'mailparser';
-const Imap = require('imap');
+import Imap from 'imap';
 
 export type { ParsedMail };