create-crm-tmp 1.1.2 → 2.0.0

package/template/src/components/global-search.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import useSWR from 'swr';
+import { Search, Users, Building2, FileText, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { NAV_PAGES } from '@/config/nav-pages';
+import { useUserRole } from '@/hooks/use-user-role';
+
+interface ContactResult {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  email: string | null;
+  phone: string | null;
+}
+
+interface CompanyResult {
+  id: string;
+  name: string;
+  email: string | null;
+  phone: string | null;
+}
+
+interface SearchResults {
+  contacts: ContactResult[];
+  companies: CompanyResult[];
+}
+
+const fetcher = async (url: string): Promise<SearchResults> => {
+  const params = new URL(url, globalThis.location?.origin);
+  const q = params.searchParams.get('q') || '';
+  const searchParam = encodeURIComponent(q);
+
+  const [contactsRes, companiesRes] = await Promise.all([
+    fetch(`/api/contacts?search=${searchParam}&limit=5`),
+    fetch(`/api/companies?search=${searchParam}&limit=5`),
+  ]);
+
+  const [contactsData, companiesData] = await Promise.all([
+    contactsRes.ok ? contactsRes.json() : { contacts: [] },
+    companiesRes.ok ? companiesRes.json() : { companies: [] },
+  ]);
+
+  return {
+    contacts: contactsData.contacts ?? [],
+    companies: companiesData.companies ?? companiesData ?? [],
+  };
+};
+
+function useDebounce(value: string, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export function GlobalSearch() {
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+  const { hasPermission } = useUserRole();
+
+  const debouncedQuery = useDebounce(query.trim(), 300);
+  const shouldFetchCRM = debouncedQuery.length >= 2;
+
+  const { data: crmResults, isLoading: crmLoading } = useSWR(
+    shouldFetchCRM ? `/api/_search?q=${debouncedQuery}` : null,
+    fetcher,
+    { keepPreviousData: true, revalidateOnFocus: false },
+  );
+
+  const filteredPages = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q.length === 0) return [];
+    return NAV_PAGES.filter(
+      (page) =>
+        page.permissions.some((p) => hasPermission(p)) &&
+        `${page.parentLabel ?? ''} ${page.name}`.toLowerCase().includes(q),
+    );
+  }, [query, hasPermission]);
+
+  const flatOptions = useMemo(() => {
+    const opts: { href: string }[] = [];
+    filteredPages.forEach((p) => opts.push({ href: p.href }));
+    if (crmResults) {
+      crmResults.contacts.forEach((c) => opts.push({ href: `/contacts/${c.id}` }));
+      crmResults.companies.forEach((c) => opts.push({ href: `/contacts/companies/${c.id}` }));
+    }
+    return opts;
+  }, [filteredPages, crmResults]);
+
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const showDropdown = isOpen && query.trim().length > 0;
+
+  useEffect(() => {
+    setFocusedIndex(0);
+  }, [flatOptions.length]);
+
+  useEffect(() => {
+    if (!showDropdown || focusedIndex < 0 || focusedIndex >= flatOptions.length) return;
+    optionRefs.current[focusedIndex]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, [showDropdown, focusedIndex, flatOptions.length]);
+
+  const hasResults =
+    filteredPages.length > 0 ||
+    (crmResults &&
+      (crmResults.contacts.length > 0 ||
+        crmResults.companies.length > 0));
+
+  const navigate = useCallback(
+    (href: string) => {
+      setIsOpen(false);
+      setQuery('');
+      router.push(href);
+    },
+    [router],
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!showDropdown || flatOptions.length === 0) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setFocusedIndex((i) => Math.min(i + 1, flatOptions.length - 1));
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setFocusedIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        navigate(flatOptions[focusedIndex].href);
+      }
+    },
+    [showDropdown, flatOptions, focusedIndex, navigate],
+  );
+
+  let optionIndex = 0;
+
+  return (
+    <div ref={containerRef} className="relative hidden w-full max-w-xl sm:block">
+      <div className="relative">
+        <Search className="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            if (!isOpen) setIsOpen(true);
+          }}
+          onFocus={() => {
+            if (query.trim().length > 0) setIsOpen(true);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Rechercher Gold Blessing"
+          className="w-full rounded-lg border border-border bg-muted py-2 pr-4 pl-9 text-sm text-foreground transition-colors outline-none placeholder:text-muted-foreground focus:border-primary/40 focus:bg-background focus:ring-1 focus:ring-primary/40"
+          role="combobox"
+          aria-expanded={showDropdown}
+          aria-controls="global-search-results"
+          aria-activedescendant={
+            showDropdown && flatOptions.length > 0
+              ? `global-search-option-${focusedIndex}`
+              : undefined
+          }
+          autoComplete="off"
+        />
+      </div>
+
+      {showDropdown && (
+        <div
+          id="global-search-results"
+          role="listbox"
+          className="absolute top-full left-0 z-50 mt-1 max-h-112 w-full overflow-y-auto rounded-xl border border-border bg-popover shadow-(--shadow-dropdown)"
+        >
+          {/* Pages */}
+          {filteredPages.length > 0 && (
+            <div>
+              <div className="px-3 pt-3 pb-1">
+                <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+                  Pages
+                </span>
+              </div>
+              {filteredPages.map((page) => {
+                const Icon = page.icon;
+                const idx = optionIndex++;
+                return (
+                  <button
+                    key={page.href}
+                    ref={(el) => {
+                      optionRefs.current[idx] = el;
+                    }}
+                    id={`global-search-option-${idx}`}
+                    onClick={() => navigate(page.href)}
+                    className={cn(
+                      'flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm text-popover-foreground transition-colors duration-200 hover:bg-accent',
+                      focusedIndex === idx && 'bg-accent',
+                    )}
+                    role="option"
+                    aria-selected={focusedIndex === idx}
+                  >
+                    <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <div className="min-w-0 flex-1">
+                      <span className="block truncate font-medium text-popover-foreground">{page.name}</span>
+                      {page.parentLabel && (
+                        <span className="block truncate text-xs text-muted-foreground">
+                          {page.parentLabel} {'>'} {page.name}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* CRM loading */}
+          {shouldFetchCRM && crmLoading && !crmResults && (
+            <div className="flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Recherche...
+            </div>
+          )}
+
+          {/* Contacts */}
+          {crmResults && crmResults.contacts.length > 0 && (
+            <div>
+              <div
+                className={cn(
+                  'px-3 pt-3 pb-1',
+                  filteredPages.length > 0 && 'border-t border-border',
+                )}
+              >
+                <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+                  Contacts
+                </span>
+              </div>
+              {crmResults.contacts.map((contact) => {
+                const name =
+                  [contact.firstName, contact.lastName].filter(Boolean).join(' ') ||
+                  'Contact sans nom';
+                const idx = optionIndex++;
+                return (
+                  <button
+                    key={contact.id}
+                    ref={(el) => {
+                      optionRefs.current[idx] = el;
+                    }}
+                    id={`global-search-option-${idx}`}
+                    onClick={() => navigate(`/contacts/${contact.id}`)}
+                    className={cn(
+                      'flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200 hover:bg-accent',
+                      focusedIndex === idx && 'bg-accent',
+                    )}
+                    role="option"
+                    aria-selected={focusedIndex === idx}
+                  >
+                    <Users className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <div className="min-w-0 flex-1">
+                      <span className="font-medium text-popover-foreground">{name}</span>
+                      {(contact.email || contact.phone) && (
+                        <span className="ml-2 truncate text-xs text-muted-foreground">
+                          {contact.email || contact.phone}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Entreprises */}
+          {crmResults && crmResults.companies.length > 0 && (
+            <div>
+              <div className="border-t border-border px-3 pt-3 pb-1">
+                <span className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+                  Entreprises
+                </span>
+              </div>
+              {crmResults.companies.map((company) => {
+                const idx = optionIndex++;
+                return (
+                  <button
+                    key={company.id}
+                    ref={(el) => {
+                      optionRefs.current[idx] = el;
+                    }}
+                    id={`global-search-option-${idx}`}
+                    onClick={() => navigate(`/contacts/companies/${company.id}`)}
+                    className={cn(
+                      'flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200 hover:bg-accent',
+                      focusedIndex === idx && 'bg-accent',
+                    )}
+                    role="option"
+                    aria-selected={focusedIndex === idx}
+                  >
+                    <Building2 className="h-4 w-4 shrink-0 text-muted-foreground" />
+                    <div className="min-w-0 flex-1">
+                      <span className="font-medium text-popover-foreground">{company.name}</span>
+                      {company.email && (
+                        <span className="ml-2 truncate text-xs text-muted-foreground">{company.email}</span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Aucun résultat */}
+          {!crmLoading && !hasResults && query.trim().length > 0 && (
+            <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+              Aucun résultat pour &quot;{query.trim()}&quot;
+            </div>
+          )}
+
+          {/* Recherche trop courte pour le CRM */}
+          {query.trim().length === 1 && filteredPages.length === 0 && (
+            <div className="px-3 py-6 text-center text-sm text-muted-foreground">
+              <FileText className="mx-auto mb-1 h-5 w-5 text-muted-foreground/70" />
+              Tapez au moins 2 caractères pour rechercher dans le CRM
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/src/components/header.tsx

@@ -7,7 +7,8 @@ import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
 import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
-import { useViewAs } from '@/contexts/view-as-context';
+import { GlobalSearch } from '@/components/global-search';
+import { safeLocalStorageGet, safeLocalStorageSet } from '@/lib/local-storage';
 
 interface Reminder {
   id: string;
@@ -35,7 +36,7 @@ const TASK_TYPE_LABELS: Record<string, string> = {
 };
 
 const PRIORITY_COLORS: Record<string, string> = {
-  LOW: 'bg-gray-100 text-gray-700',
+  LOW: 'bg-muted text-muted-foreground',
   MEDIUM: 'bg-yellow-100 text-yellow-700',
   HIGH: 'bg-orange-100 text-orange-700',
   URGENT: 'bg-red-100 text-red-700',
@@ -59,7 +60,6 @@ export function Header() {
   const { data: session } = useSession();
   const router = useRouter();
   const { toggle: toggleMobileMenu } = useMobileMenuContext();
-  const { viewAsUser, isViewingAsOther } = useViewAs();
   const [showRemindersDropdown, setShowRemindersDropdown] = useState(false);
   const [showUserDropdown, setShowUserDropdown] = useState(false);
   const [reminders, setReminders] = useState<Reminder[]>([]);
@@ -68,29 +68,20 @@ export function Header() {
   const remindersRef = useRef<HTMLDivElement>(null);
   const userRef = useRef<HTMLDivElement>(null);
 
-  const realUserName = session?.user?.name || 'Utilisateur';
-  const userName = isViewingAsOther ? viewAsUser?.name || 'Utilisateur' : realUserName;
+  const userName = session?.user?.name || 'Utilisateur';
   const userEmail = session?.user?.email || '';
   const userInitial = userName?.[0]?.toUpperCase() || 'U';
 
   // Charger les rappels lus depuis localStorage
   useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem('readReminders');
-      if (stored) {
-        try {
-          setReadReminders(new Set(JSON.parse(stored)));
-        } catch (e) {
-          console.error('Erreur lors du chargement des rappels lus:', e);
-        }
-      }
-    }
+    const stored = safeLocalStorageGet<string[]>('read-reminders', []);
+    setReadReminders(new Set(stored));
   }, []);
 
   // Sauvegarder les rappels lus dans localStorage
   useEffect(() => {
-    if (typeof window !== 'undefined' && readReminders.size > 0) {
-      localStorage.setItem('readReminders', JSON.stringify(Array.from(readReminders)));
+    if (readReminders.size > 0) {
+      safeLocalStorageSet('read-reminders', Array.from(readReminders));
     }
   }, [readReminders]);
 
@@ -150,37 +141,40 @@ export function Header() {
   };
 
   return (
-    <header className="sticky top-0 z-30 border-b border-gray-200 bg-white px-4 py-3 sm:px-6 lg:px-8">
-      <div className="flex items-center justify-between gap-2 sm:gap-4">
-        {/* Left: Burger + Logo + Greeting */}
-        <div className="flex items-center gap-2 sm:gap-3">
-          {/* Bouton burger - visible uniquement sur mobile/tablette */}
-          <button
-            onClick={toggleMobileMenu}
-            className="cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 lg:hidden"
-            aria-label="Ouvrir le menu"
-          >
-            <Menu className="h-5 w-5" />
-          </button>
+    <header className="sticky top-0 z-40 border-b border-border bg-background/95 px-4 py-3 backdrop-blur-sm sm:px-6 lg:px-8">
+      <div className="flex items-center gap-2 sm:gap-4">
+        {/* Left: Logo + Greeting */}
+        <div className="flex shrink-0 items-center gap-2 sm:gap-3">
           <div className="flex items-center gap-1.5 sm:gap-2">
-            {/* <Rocket className="h-5 w-5 text-indigo-600 sm:h-6 sm:w-6" /> */}
-            <span className="text-base font-bold text-gray-900 sm:text-lg">CRM Template</span>
+            {/* Bouton burger pour mobile */}
+            <button
+              onClick={toggleMobileMenu}
+              className="cursor-pointer rounded-lg p-2 text-foreground/80 transition-colors duration-200 hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none lg:hidden"
+              aria-label="Ouvrir ou fermer le menu"
+            >
+              <Menu className="h-5 w-5" />
+            </button>
+            <span className="text-base font-bold text-foreground sm:text-lg">Gold Blessing</span>
           </div>
-          <span className="hidden text-sm text-gray-600 sm:inline">👋 Salut {userName} !</span>
+        </div>
+
+        {/* Center: Global Search */}
+        <div className="flex min-w-0 flex-1 justify-center">
+          <GlobalSearch />
         </div>
 
         {/* Right: Notifications + User Avatar */}
-        <div className="flex items-center gap-2 sm:gap-3">
+        <div className="flex shrink-0 items-center gap-2 sm:gap-3">
           {/* Notifications Dropdown */}
           <div className="relative" ref={remindersRef}>
             <button
               onClick={() => setShowRemindersDropdown(!showRemindersDropdown)}
-              className="relative cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100"
+              className="relative cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors duration-200 hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
               aria-label="Notifications"
             >
               <Bell className="h-5 w-5" />
               {unreadCount > 0 && (
-                <span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-blue-600 text-[10px] font-semibold text-white">
+                <span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-semibold text-primary-foreground">
                   {unreadCount > 9 ? '9+' : unreadCount}
                 </span>
               )}
@@ -188,14 +182,14 @@ export function Header() {
 
             {/* Dropdown des rappels */}
             {showRemindersDropdown && (
-              <div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-lg border border-gray-200 bg-white shadow-xl">
-                <div className="border-b border-gray-200 px-4 py-3">
+              <div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-popover shadow-(--shadow-dropdown)">
+                <div className="border-b border-border px-4 py-3">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-gray-900">Rappels</h3>
+                    <h3 className="text-sm font-semibold text-popover-foreground">Rappels</h3>
                     {unreadCount > 0 && (
                       <button
                         onClick={handleMarkAllAsRead}
-                        className="cursor-pointer text-xs text-indigo-600 hover:text-indigo-700"
+                        className="cursor-pointer text-xs text-primary hover:text-primary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
                       >
                         Tout marquer comme lu
                       </button>
@@ -204,11 +198,11 @@ export function Header() {
                 </div>
                 <div className="max-h-96 overflow-y-auto">
                   {loading ? (
-                    <div className="px-4 py-8 text-center text-sm text-gray-500">Chargement...</div>
+                    <div className="px-4 py-8 text-center text-sm text-muted-foreground">Chargement...</div>
                   ) : reminders.length === 0 ? (
-                    <div className="px-4 py-8 text-center text-sm text-gray-500">Aucun rappel</div>
+                    <div className="px-4 py-8 text-center text-sm text-muted-foreground">Aucun rappel</div>
                   ) : (
-                    <div className="divide-y divide-gray-100">
+                    <div className="divide-y divide-border">
                       {reminders.map((reminder) => {
                         const isRead = readReminders.has(reminder.id);
                         const { date, time } = formatDateTime(reminder.scheduledAt);
@@ -218,17 +212,18 @@ export function Header() {
                           : null;
 
                         return (
-                          <div
+                          <button
+                            type="button"
                             key={reminder.id}
                             className={cn(
-                              'px-4 py-3 transition-colors hover:bg-gray-50',
-                              !isRead && 'bg-blue-50/50',
+                              'w-full px-4 py-3 text-left transition-colors duration-200 hover:bg-accent',
+                              !isRead && 'bg-accent/70',
                             )}
                             onClick={() => handleMarkAsRead(reminder.id)}
                           >
                             <div className="flex items-start gap-3">
                               <div className="mt-0.5 shrink-0">
-                                <Calendar className="h-4 w-4 text-indigo-600" />
+                                <Calendar className="h-4 w-4 text-primary" />
                               </div>
                               <div className="min-w-0 flex-1">
                                 <div className="flex items-start justify-between gap-2">
@@ -236,18 +231,18 @@ export function Header() {
                                     <p
                                       className={cn(
                                         'text-sm font-medium',
-                                        !isRead ? 'text-gray-900' : 'text-gray-700',
+                                        !isRead ? 'text-foreground' : 'text-muted-foreground',
                                       )}
                                     >
                                       {reminder.title || TASK_TYPE_LABELS[reminder.type] || 'Tâche'}
                                     </p>
                                     {contactName && (
-                                      <p className="mt-0.5 text-xs text-gray-500">{contactName}</p>
+                                      <p className="mt-0.5 text-xs text-muted-foreground">{contactName}</p>
                                     )}
                                     <div className="mt-1 flex items-center gap-2">
-                                      <span className="text-xs text-gray-500">{date}</span>
-                                      <span className="text-xs text-gray-400">•</span>
-                                      <span className="text-xs text-gray-500">{time}</span>
+                                      <span className="text-xs text-muted-foreground">{date}</span>
+                                      <span className="text-xs text-muted-foreground/70">•</span>
+                                      <span className="text-xs text-muted-foreground">{time}</span>
                                       <span
                                         className={cn(
                                           'rounded-full px-1.5 py-0.5 text-[10px] font-medium',
@@ -266,21 +261,21 @@ export function Header() {
                                     </div>
                                   </div>
                                   {!isRead && (
-                                    <div className="h-2 w-2 shrink-0 rounded-full bg-blue-600" />
+                                    <div className="h-2 w-2 shrink-0 rounded-full bg-primary" />
                                   )}
                                 </div>
                                 {reminder.contact && (
                                   <Link
                                     href={`/contacts/${reminder.contact.id}`}
                                     onClick={(e) => e.stopPropagation()}
-                                    className="mt-2 inline-block text-xs font-medium text-indigo-600 hover:text-indigo-700"
+                                    className="mt-2 inline-block text-xs font-medium text-primary hover:text-primary/80"
                                   >
                                     Voir le contact
                                   </Link>
                                 )}
                               </div>
                             </div>
-                          </div>
+                          </button>
                         );
                       })}
                     </div>
@@ -294,26 +289,26 @@ export function Header() {
           <div className="relative" ref={userRef}>
             <button
               onClick={() => setShowUserDropdown(!showUserDropdown)}
-              className="flex cursor-pointer items-center gap-1.5 sm:gap-2"
+              className="flex cursor-pointer items-center gap-1.5 rounded-md transition-colors duration-200 hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none sm:gap-2"
               aria-label="Menu utilisateur"
             >
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-600 sm:h-9 sm:w-9 sm:text-sm">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/15 text-xs font-semibold text-primary sm:h-9 sm:w-9 sm:text-sm">
                 {userInitial}
               </div>
-              <ChevronDown className="hidden h-4 w-4 text-gray-400 transition-colors hover:text-gray-600 sm:block" />
+              <ChevronDown className="hidden h-4 w-4 text-muted-foreground transition-colors hover:text-foreground sm:block" />
             </button>
 
             {/* Dropdown utilisateur */}
             {showUserDropdown && (
-              <div className="absolute right-0 mt-2 w-56 rounded-lg border border-gray-200 bg-white shadow-xl">
-                <div className="border-b border-gray-200 px-4 py-3">
-                  <p className="text-sm font-medium text-gray-900">{realUserName}</p>
-                  <p className="mt-0.5 text-xs text-gray-500">{userEmail}</p>
+              <div className="absolute right-0 mt-2 w-56 rounded-xl border border-border bg-popover shadow-(--shadow-dropdown)">
+                <div className="border-b border-border px-4 py-3">
+                  <p className="text-sm font-medium text-popover-foreground">{userName}</p>
+                  <p className="mt-0.5 text-xs text-muted-foreground">{userEmail}</p>
                 </div>
                 <div className="py-1">
                   <button
                     onClick={handleSignOut}
-                    className="flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50"
+                    className="flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm text-popover-foreground transition-colors duration-200 hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
                   >
                     <LogOut className="h-4 w-4" />
                     <span>Déconnexion</span>

package/template/src/components/invitation-email-template.tsx

@@ -1,3 +1,5 @@
+import DOMPurify from 'isomorphic-dompurify';
+
 interface InvitationEmailProps {
   name: string;
   invitationUrl: string;
@@ -8,7 +10,7 @@ export function InvitationEmailTemplate({ name, invitationUrl, signature }: Invi
   return (
     <div
       style={{
-        fontFamily: 'Arial, sans-serif',
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
         padding: '20px',
         maxWidth: '600px',
         margin: '0 auto',
@@ -71,7 +73,7 @@ export function InvitationEmailTemplate({ name, invitationUrl, signature }: Invi
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: signature }}
+          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
         />
       )}
     </div>

package/template/src/components/lazy-editor.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { Skeleton } from '@/components/skeleton';
+
+export type { DefaultTemplateRef } from '@/components/editor';
+
+export const LazyEditor = dynamic(() => import('@/components/editor').then((m) => m.Editor), {
+  ssr: false,
+  loading: () => <Skeleton className="h-64 rounded-lg" />,
+});