efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useCallback } from "react"
|
|
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
|
|
import { ULTICARDS_APP_NAME } from "@/lib/suite/page-metadata"
|
|
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">{ULTICARDS_APP_NAME}</SheetTitle>
|
|
{view === "list" && <ContactsListView />}
|
|
{view === "view" && <ContactDetailView contactId={activeContactId} />}
|
|
{view === "create" && <ContactFormView mode="create" />}
|
|
{view === "edit" && <ContactFormView mode="edit" contactId={activeContactId} />}
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|