52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useCallback } from "react"
|
|
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { ContactsListView } from "./contacts-list-view"
|
|
import { ContactFormView } from "./contact-form-view"
|
|
import { ContactDetailView } from "./contact-detail-view"
|
|
|
|
export function ContactsPanel() {
|
|
const { panelOpen, view, activeContactId, closePanel, setSearchMode, setSearchQuery, searchMode } =
|
|
useContactsStore()
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (!panelOpen || view !== "list" || searchMode) return
|
|
if (e.metaKey || e.ctrlKey || e.altKey) return
|
|
const target = e.target as HTMLElement
|
|
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) return
|
|
if (e.key.length === 1 && /\S/.test(e.key)) {
|
|
e.preventDefault()
|
|
setSearchMode(true)
|
|
setSearchQuery(e.key)
|
|
}
|
|
},
|
|
[panelOpen, view, searchMode, setSearchMode, setSearchQuery],
|
|
)
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("keydown", handleKeyDown)
|
|
return () => document.removeEventListener("keydown", handleKeyDown)
|
|
}, [handleKeyDown])
|
|
|
|
return (
|
|
<Sheet open={panelOpen} onOpenChange={(open) => !open && closePanel()}>
|
|
<SheetContent
|
|
side="right"
|
|
hideClose
|
|
overlayClassName="bg-transparent"
|
|
data-contacts-panel
|
|
className="w-[360px] sm:max-w-[360px] gap-0 border-border bg-mail-surface p-0 text-foreground"
|
|
>
|
|
<SheetTitle className="sr-only">Contacts</SheetTitle>
|
|
{view === "list" && <ContactsListView />}
|
|
{view === "view" && <ContactDetailView contactId={activeContactId} />}
|
|
{view === "create" && <ContactFormView mode="create" />}
|
|
{view === "edit" && <ContactFormView mode="edit" contactId={activeContactId} />}
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|