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
-    const { clientEmail, interestId, sessionId, limit = 50 } = body;
+    // Limit emails to improve performance
+    const { clientEmail, interestId, sessionId, limit = 20 } = body;
 
     if (!clientEmail || !sessionId) {
       throw createError({ 
@@ -84,8 +84,13 @@ export default defineEventHandler(async (event) => {
         
         console.log('Found cached email files:', files.length);
         
-        for (const file of files) {
-          if (file.name.endsWith('.json') && !file.isFolder) {
+        // Limit cached emails to most recent ones
+        const sortedFiles = files
+          .filter(f => f.name.endsWith('.json'))
+          .sort((a, b) => b.name.localeCompare(a.name)) // Sort by filename (newer files have higher timestamps)
+          .slice(0, limit); // Only load up to the limit
+        
+        for (const file of sortedFiles) {
           try {
             // Read file directly on server using MinIO client (works with private buckets)
             const client = getMinioClient();
@@ -115,7 +120,6 @@ export default defineEventHandler(async (event) => {
             console.error('Failed to read cached email:', file.name, err);
           }
         }
-        }
       } catch (err) {
         console.error('Failed to list cached emails:', 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 };