From 367b79bf0b88933d580045bd467d50813f434f2e Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sat, 26 Apr 2025 22:59:41 +0200
Subject: [PATCH] courrier refactor

---
 components/email/EmailHeader.tsx | 118 +++++++++++++++++--------------
 1 file changed, 64 insertions(+), 54 deletions(-)

diff --git a/components/email/EmailHeader.tsx b/components/email/EmailHeader.tsx
index 114cc2c1..05b5907a 100644
--- a/components/email/EmailHeader.tsx
+++ b/components/email/EmailHeader.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { Search, X, Settings } from 'lucide-react';
+import { Search, X, Settings, Mail } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { 
@@ -40,69 +40,79 @@ export default function EmailHeader({
   };
 
   return (
-    <div className="border-b px-4 py-2 flex items-center">
-      <div className="flex-1">
-        <form onSubmit={handleSearch} className="relative">
-          <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            type="text"
-            placeholder="Search emails..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8 pr-8 h-9"
-          />
-          {searchQuery && (
-            <button
-              type="button"
-              onClick={clearSearch}
-              className="absolute right-2 top-1/2 transform -translate-y-1/2"
-            >
-              <X className="h-4 w-4 text-muted-foreground" />
-            </button>
-          )}
-        </form>
+    <div className="border-b flex flex-col">
+      {/* Courrier Title */}
+      <div className="p-3 border-b border-gray-100">
+        <div className="flex items-center gap-2">
+          <Mail className="h-6 w-6 text-gray-600" />
+          <span className="text-xl font-semibold text-gray-900">COURRIER</span>
+        </div>
       </div>
       
-      <div className="ml-2 flex items-center gap-1">
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="submit"
-                size="icon"
-                variant="ghost"
-                className="h-8 w-8"
-                onClick={handleSearch}
+      <div className="px-4 py-2 flex items-center">
+        <div className="flex-1">
+          <form onSubmit={handleSearch} className="relative">
+            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder="Search emails..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-8 pr-8 h-9"
+            />
+            {searchQuery && (
+              <button
+                type="button"
+                onClick={clearSearch}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2"
               >
-                <Search className="h-4 w-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Search</TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+                <X className="h-4 w-4 text-muted-foreground" />
+              </button>
+            )}
+          </form>
+        </div>
         
-        <DropdownMenu>
+        <div className="ml-2 flex items-center gap-1">
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" size="icon" className="h-8 w-8">
-                    <Settings className="h-4 w-4" />
-                  </Button>
-                </DropdownMenuTrigger>
+                <Button
+                  type="submit"
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8"
+                  onClick={handleSearch}
+                >
+                  <Search className="h-4 w-4" />
+                </Button>
               </TooltipTrigger>
-              <TooltipContent>Settings</TooltipContent>
+              <TooltipContent>Search</TooltipContent>
             </Tooltip>
           </TooltipProvider>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem onClick={onSettingsClick}>
-              Email settings
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onSettingsClick}>
-              Configure IMAP
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+          
+          <DropdownMenu>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-8 w-8">
+                      <Settings className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent>Settings</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={onSettingsClick}>
+                Email settings
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={onSettingsClick}>
+                Configure IMAP
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
     </div>
   );