07d57f13a8
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced new ContactAvatar and ContactAvatarPicker components for enhanced avatar management in contact views. - Updated ContactDetailView and ContactFormView to utilize the new avatar components, improving user experience when adding or editing contacts. - Enhanced ContactHoverCard and ContactRow components to display avatars, providing a more visually appealing interface. - Added loading and error states in ContactsListView for better user feedback during data fetching. - Implemented a new ContactsLoadState component to handle loading and error scenarios in the contacts list. - Updated package.json to include @formkit/auto-animate for improved UI animations.
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { Menu, Search, X } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { HeaderAccountActions } from "@/components/gmail/header-account-actions"
|
|
import {
|
|
CONTACTS_ICON_BTN_CLASS,
|
|
CONTACTS_SEARCH_BAR_CLASS,
|
|
CONTACTS_SEARCH_INPUT_CLASS,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface ContactsHeaderProps {
|
|
searchQuery: string
|
|
onSearchChange: (q: string) => void
|
|
sidebarOpen: boolean
|
|
onOpenSidebar: () => void
|
|
}
|
|
|
|
export function ContactsHeader({
|
|
searchQuery,
|
|
onSearchChange,
|
|
sidebarOpen,
|
|
onOpenSidebar,
|
|
}: ContactsHeaderProps) {
|
|
return (
|
|
<header className="flex h-16 shrink-0 items-center gap-2 border-b border-border bg-mail-surface px-3 sm:gap-4 sm:px-6">
|
|
{!sidebarOpen && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("h-10 w-10 shrink-0 rounded-full", CONTACTS_ICON_BTN_CLASS)}
|
|
onClick={onOpenSidebar}
|
|
aria-label="Ouvrir le menu"
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
)}
|
|
|
|
<div className="flex min-w-0 flex-1 items-center">
|
|
<div className={CONTACTS_SEARCH_BAR_CLASS}>
|
|
<Search className="h-5 w-5 shrink-0 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
placeholder="Rechercher"
|
|
className={CONTACTS_SEARCH_INPUT_CLASS}
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onSearchChange("")}
|
|
className="rounded-full p-1 hover:bg-accent"
|
|
aria-label="Effacer la recherche"
|
|
>
|
|
<X className="h-4 w-4 text-muted-foreground" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<HeaderAccountActions
|
|
className="shrink-0 pl-1 sm:pl-4"
|
|
settingsHref="/mail/settings/accounts"
|
|
/>
|
|
</header>
|
|
)
|
|
}
|