solve mail backend 9

app/mail/page.tsx

@@ -527,8 +527,8 @@ export default function MailPage() {
         if (!response.ok) {
           // No credentials found, redirect to login
           router.push("/mail/login");
-            return;
-          }
+          return;
+        }
         // We have credentials, fetch mails
         fetchMails();
       } catch (err) {
@@ -540,18 +540,54 @@ export default function MailPage() {
     checkCredentials();
   }, [router, fetchMails]);
 
+  const handleRefresh = () => {
+    fetchMails();
+  };
+
+  const handleCompose = () => {
+    // TODO: Implement compose functionality
+    console.log('Compose clicked');
+  };
+
+  const handleSearch = (query: string) => {
+    // TODO: Implement search functionality
+    console.log('Search:', query);
+  };
+
+  const handleMailClick = (mail: any) => {
+    // TODO: Implement mail view functionality
+    console.log('Mail clicked:', mail);
+  };
+
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p>Loading emails...</p>
+      </div>
+    );
   }
 
   if (error) {
-    return <div>Error: {error}</div>;
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-red-500">Error: {error}</p>
+      </div>
+    );
   }
 
   return (
-    <div className="flex flex-col h-full">
-      <MailToolbar />
-      <MailList mails={mails} />
-            </div>
+    <div className="flex flex-col h-screen">
+      <MailToolbar 
+        onRefresh={handleRefresh}
+        onCompose={handleCompose}
+        onSearch={handleSearch}
+      />
+      <div className="flex-1 overflow-hidden">
+        <MailList 
+          mails={mails} 
+          onMailClick={handleMailClick}
+        />
+      </div>
+    </div>
   );
 }

components/mail/mail-toolbar.tsx

@@ -1,34 +1,34 @@
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Search, RefreshCw, Plus } from 'lucide-react';
+import { Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 interface MailToolbarProps {
-  onCompose?: () => void;
-  onRefresh?: () => void;
-  onSearch?: (query: string) => void;
+  onRefresh: () => void;
+  onCompose: () => void;
+  onSearch: (query: string) => void;
 }
 
-export const MailToolbar = ({ onCompose, onRefresh, onSearch }: MailToolbarProps) => {
+export function MailToolbar({ onRefresh, onCompose, onSearch }: MailToolbarProps) {
   return (
     <div className="flex items-center justify-between p-4 border-b">
-      <div className="flex items-center space-x-2">
-        <Button variant="ghost" size="icon" onClick={onRefresh}>
-          <RefreshCw className="h-4 w-4" />
+      <div className="flex items-center space-x-4">
+        <Button variant="outline" onClick={onRefresh}>
+          Refresh
         </Button>
-        <Button variant="ghost" size="icon" onClick={onCompose}>
-          <Plus className="h-4 w-4" />
+        <Button variant="outline" onClick={onCompose}>
+          Compose
         </Button>
       </div>
-      <div className="flex-1 max-w-md mx-4">
+      <div className="flex-1 max-w-md">
         <div className="relative">
-          <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
           <Input
             placeholder="Search emails..."
             className="pl-8"
-            onChange={(e) => onSearch?.(e.target.value)}
+            onChange={(e) => onSearch(e.target.value)}
           />
         </div>
       </div>
     </div>
   );
-}; 
+}