carnet panel contact

components/carnet/contacts-view.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Search, User, Mail, Phone, Building, MapPin, ChevronRight } from 'lucide-react';
+import { Search, User, Mail, Phone, Building, MapPin, ChevronRight, Plus } from 'lucide-react';
 
 interface Contact {
   id: string;
@@ -40,8 +40,27 @@ export const ContactsView: React.FC<ContactsViewProps> = ({
 
   return (
     <div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border">
-      {/* Search Bar */}
+      {/* Header with Add Contact Button */}
       <div className="p-4 border-b border-carnet-border">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold text-carnet-text-primary">Contacts</h2>
+          <button
+            onClick={() => onContactSelect({
+              id: Math.random().toString(36).substr(2, 9),
+              fullName: '',
+              email: '',
+              phone: '',
+              organization: '',
+              address: '',
+              notes: '',
+              group: ''
+            })}
+            className="p-2 text-carnet-text-primary hover:bg-carnet-hover rounded-md"
+          >
+            <Plus className="h-5 w-5" />
+          </button>
+        </div>
+        {/* Search Bar */}
         <div className="relative">
           <input
             type="text"