523 lines
19 KiB
TypeScript
523 lines
19 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
type KeyboardEvent,
|
|
} from "react"
|
|
import { useRouter } from "next/navigation"
|
|
import {
|
|
ArrowLeft,
|
|
Search,
|
|
X,
|
|
Paperclip,
|
|
Clock,
|
|
User,
|
|
SlidersHorizontal,
|
|
} from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Checkbox } from "@/components/ui/checkbox"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { cn } from "@/lib/utils"
|
|
import { emails } from "@/lib/email-data"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { useActiveAccount } from "@/lib/stores/account-store"
|
|
import {
|
|
matchContacts,
|
|
matchEmails,
|
|
bestCompletion,
|
|
type SearchSuggestion,
|
|
} from "@/lib/mail-search/search-engine"
|
|
import {
|
|
buildSearchUrl,
|
|
EMPTY_SEARCH_PARAMS,
|
|
DATE_RANGE_OPTIONS,
|
|
SEARCH_IN_OPTIONS,
|
|
type SearchParams,
|
|
} from "@/lib/mail-search/search-params"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
|
|
interface MobileSearchOverlayProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
initialQuery?: string
|
|
}
|
|
|
|
export function MobileSearchOverlay({ open, onClose, initialQuery = "" }: MobileSearchOverlayProps) {
|
|
const router = useRouter()
|
|
const account = useActiveAccount()
|
|
const contacts = useContactsStore((s) => s.contacts)
|
|
|
|
const [inputValue, setInputValue] = useState(initialQuery)
|
|
const [selectedIndex, setSelectedIndex] = useState(-1)
|
|
const [chipAttachment, setChipAttachment] = useState(false)
|
|
const [chipLast7Days, setChipLast7Days] = useState(false)
|
|
const [chipFromMe, setChipFromMe] = useState(false)
|
|
const [advancedMode, setAdvancedMode] = useState(false)
|
|
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setInputValue(initialQuery)
|
|
setAdvancedMode(false)
|
|
setTimeout(() => inputRef.current?.focus(), 50)
|
|
} else {
|
|
setSelectedIndex(-1)
|
|
setChipAttachment(false)
|
|
setChipLast7Days(false)
|
|
setChipFromMe(false)
|
|
setAdvancedMode(false)
|
|
}
|
|
}, [open, initialQuery])
|
|
|
|
const suggestions = useMemo<SearchSuggestion[]>(() => {
|
|
if (!inputValue.trim()) return []
|
|
const contactHits = matchContacts(inputValue, contacts, 4)
|
|
const emailHits = matchEmails(inputValue, emails, 4)
|
|
const seen = new Set(contactHits.map((c) => c.email))
|
|
const unique = emailHits.filter((e) => !seen.has(e.email))
|
|
return [...contactHits, ...unique]
|
|
}, [inputValue, contacts])
|
|
|
|
const ghostText = useMemo(
|
|
() => bestCompletion(inputValue, suggestions),
|
|
[inputValue, suggestions]
|
|
)
|
|
|
|
const totalItems = suggestions.length + 1
|
|
|
|
const submitSearch = useCallback(
|
|
(overrideQuery?: string) => {
|
|
const q = overrideQuery ?? inputValue
|
|
if (!q.trim() && !chipAttachment && !chipLast7Days && !chipFromMe) return
|
|
const params: Partial<SearchParams> = { q: q.trim() }
|
|
if (chipAttachment) params.has = ["attachment"]
|
|
if (chipLast7Days) params.within = "1w"
|
|
if (chipFromMe) params.from = account.email
|
|
router.push(buildSearchUrl(params))
|
|
onClose()
|
|
},
|
|
[inputValue, chipAttachment, chipLast7Days, chipFromMe, account.email, router, onClose]
|
|
)
|
|
|
|
const selectSuggestion = useCallback(
|
|
(s: SearchSuggestion) => {
|
|
const params: Partial<SearchParams> = { q: s.email }
|
|
if (chipAttachment) params.has = ["attachment"]
|
|
if (chipLast7Days) params.within = "1w"
|
|
if (chipFromMe) params.from = account.email
|
|
router.push(buildSearchUrl(params))
|
|
onClose()
|
|
},
|
|
[chipAttachment, chipLast7Days, chipFromMe, account.email, router, onClose]
|
|
)
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent<HTMLInputElement>) => {
|
|
switch (e.key) {
|
|
case "ArrowDown":
|
|
e.preventDefault()
|
|
setSelectedIndex((i) => (i < totalItems - 1 ? i + 1 : 0))
|
|
break
|
|
case "ArrowUp":
|
|
e.preventDefault()
|
|
setSelectedIndex((i) => (i > 0 ? i - 1 : totalItems - 1))
|
|
break
|
|
case "Enter":
|
|
e.preventDefault()
|
|
if (selectedIndex >= 0 && selectedIndex < suggestions.length) {
|
|
selectSuggestion(suggestions[selectedIndex]!)
|
|
} else {
|
|
submitSearch()
|
|
}
|
|
break
|
|
case "Tab":
|
|
if (ghostText) {
|
|
e.preventDefault()
|
|
setInputValue(inputValue + ghostText)
|
|
}
|
|
break
|
|
case "Escape":
|
|
e.preventDefault()
|
|
onClose()
|
|
break
|
|
}
|
|
},
|
|
[selectedIndex, totalItems, suggestions, ghostText, inputValue, submitSearch, selectSuggestion, onClose]
|
|
)
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
|
|
<SheetContent
|
|
side="bottom"
|
|
hideClose
|
|
overlayClassName="z-[100] bg-black/40"
|
|
className={cn(
|
|
"z-[101] flex h-[100dvh] max-h-[100dvh] w-full flex-col gap-0 rounded-none border-0 bg-background p-0 shadow-xl",
|
|
"duration-300 ease-out",
|
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
"data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
|
|
"pb-[env(safe-area-inset-bottom)]"
|
|
)}
|
|
>
|
|
<SheetTitle className="sr-only">Rechercher dans les messages</SheetTitle>
|
|
{/* Header */}
|
|
<div className="flex shrink-0 items-center gap-2 border-b border-gray-200 px-2 py-2 dark:border-gray-800">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-10 shrink-0 text-gray-600"
|
|
onClick={() => { if (advancedMode) setAdvancedMode(false); else onClose() }}
|
|
aria-label="Retour"
|
|
>
|
|
<ArrowLeft className="size-5" />
|
|
</Button>
|
|
<div className="relative flex min-w-0 flex-1 items-center">
|
|
{ghostText && !advancedMode && (
|
|
<div className="pointer-events-none absolute left-0 flex items-center text-sm text-gray-400" aria-hidden>
|
|
<span className="invisible">{inputValue}</span>
|
|
<span>{ghostText}</span>
|
|
</div>
|
|
)}
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
value={inputValue}
|
|
onChange={(e) => {
|
|
setInputValue(e.target.value)
|
|
setSelectedIndex(-1)
|
|
if (advancedMode) setAdvancedMode(false)
|
|
}}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Rechercher dans les messages"
|
|
className="h-10 w-full bg-transparent text-sm outline-none placeholder:text-gray-400"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
{inputValue && !advancedMode && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-10 shrink-0 text-gray-600"
|
|
onClick={() => {
|
|
setInputValue("")
|
|
inputRef.current?.focus()
|
|
}}
|
|
aria-label="Effacer"
|
|
>
|
|
<X className="size-5" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-10 shrink-0 text-gray-600"
|
|
onClick={() => setAdvancedMode(!advancedMode)}
|
|
aria-label="Recherche avancée"
|
|
>
|
|
<SlidersHorizontal className="size-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
{advancedMode ? (
|
|
<MobileAdvancedSearch
|
|
initialQuery={inputValue}
|
|
onSubmit={(url) => { router.push(url); onClose() }}
|
|
/>
|
|
) : (
|
|
<>
|
|
{/* Filter chips */}
|
|
<div className="flex items-center gap-2 overflow-x-auto border-b border-gray-100 px-4 py-2 dark:border-gray-800">
|
|
<button
|
|
type="button"
|
|
onClick={() => setChipAttachment(!chipAttachment)}
|
|
className={cn(
|
|
"flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs transition-colors",
|
|
chipAttachment
|
|
? "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
|
|
: "border-gray-200 text-gray-600 dark:border-gray-700 dark:text-gray-400"
|
|
)}
|
|
>
|
|
<Paperclip className="size-3.5" />
|
|
Contient une pièce jointe
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setChipLast7Days(!chipLast7Days)}
|
|
className={cn(
|
|
"flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs transition-colors",
|
|
chipLast7Days
|
|
? "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
|
|
: "border-gray-200 text-gray-600 dark:border-gray-700 dark:text-gray-400"
|
|
)}
|
|
>
|
|
<Clock className="size-3.5" />
|
|
7 derniers jours
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setChipFromMe(!chipFromMe)}
|
|
className={cn(
|
|
"flex shrink-0 items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs transition-colors",
|
|
chipFromMe
|
|
? "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/30 dark:text-blue-300"
|
|
: "border-gray-200 text-gray-600 dark:border-gray-700 dark:text-gray-400"
|
|
)}
|
|
>
|
|
<User className="size-3.5" />
|
|
De moi
|
|
</button>
|
|
</div>
|
|
|
|
{/* Suggestions */}
|
|
<div className="min-h-0 flex-1 overflow-y-auto">
|
|
{inputValue.trim() && (
|
|
<>
|
|
{suggestions.map((s, i) => {
|
|
const isSelected = i === selectedIndex
|
|
if (s.kind === "contact") {
|
|
const initial = senderInitial(s.displayName)
|
|
const color = avatarColor(s.displayName)
|
|
return (
|
|
<button
|
|
key={`c-${s.contact.id}-${s.email}`}
|
|
type="button"
|
|
className={cn(
|
|
"flex w-full items-center gap-3 px-4 py-3 text-left text-sm active:bg-gray-100 dark:active:bg-gray-800",
|
|
isSelected && "bg-gray-100 dark:bg-gray-800"
|
|
)}
|
|
onClick={() => selectSuggestion(s)}
|
|
>
|
|
<div
|
|
className="flex size-9 shrink-0 items-center justify-center rounded-full text-xs font-medium text-white"
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
{initial}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate font-medium text-gray-900 dark:text-gray-100">
|
|
{s.displayName}
|
|
</div>
|
|
<div className="truncate text-xs text-gray-500">
|
|
{s.email}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
return (
|
|
<button
|
|
key={`e-${s.email}`}
|
|
type="button"
|
|
className={cn(
|
|
"flex w-full items-center gap-3 px-4 py-3 text-left text-sm active:bg-gray-100 dark:active:bg-gray-800",
|
|
isSelected && "bg-gray-100 dark:bg-gray-800"
|
|
)}
|
|
onClick={() => selectSuggestion(s)}
|
|
>
|
|
<div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-gray-200 text-gray-500 dark:bg-gray-700">
|
|
<User className="size-4" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-gray-700 dark:text-gray-300">
|
|
{s.email}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
|
|
{/* All results row */}
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"flex w-full items-center gap-3 px-4 py-3 text-left text-sm active:bg-gray-100 dark:active:bg-gray-800",
|
|
selectedIndex === suggestions.length && "bg-gray-100 dark:bg-gray-800"
|
|
)}
|
|
onClick={() => submitSearch()}
|
|
>
|
|
<div className="flex size-9 shrink-0 items-center justify-center">
|
|
<Search className="size-5 text-gray-400" />
|
|
</div>
|
|
<span className="text-gray-600 dark:text-gray-400">
|
|
Tous les résultats pour «
|
|
<span className="font-medium text-gray-900 dark:text-gray-100">
|
|
{inputValue}
|
|
</span>
|
|
»
|
|
</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|
|
|
|
// ─── Mobile Advanced Search ──────────────────────────────────────────────────
|
|
|
|
function MobileAdvancedSearch({
|
|
initialQuery,
|
|
onSubmit,
|
|
}: {
|
|
initialQuery: string
|
|
onSubmit: (url: string) => void
|
|
}) {
|
|
const [from, setFrom] = useState("")
|
|
const [to, setTo] = useState("")
|
|
const [subject, setSubject] = useState("")
|
|
const [hasWords, setHasWords] = useState(initialQuery)
|
|
const [doesNotHave, setDoesNotHave] = useState("")
|
|
const [sizeVal, setSizeVal] = useState("")
|
|
const [sizeOp, setSizeOp] = useState<"gt" | "lt">("gt")
|
|
const [sizeUnit, setSizeUnit] = useState<"Mo" | "Ko">("Mo")
|
|
const [within, setWithin] = useState("")
|
|
const [searchIn, setSearchIn] = useState("all")
|
|
const [hasAttachment, setHasAttachment] = useState(false)
|
|
const [excludeChats, setExcludeChats] = useState(false)
|
|
|
|
const handleSubmit = () => {
|
|
const params: Partial<SearchParams> = {
|
|
...EMPTY_SEARCH_PARAMS,
|
|
q: "",
|
|
from,
|
|
to,
|
|
subject,
|
|
hasWords,
|
|
doesNotHave,
|
|
size: sizeVal,
|
|
sizeOp,
|
|
sizeUnit,
|
|
within,
|
|
in: searchIn,
|
|
has: hasAttachment ? ["attachment"] : [],
|
|
excludeChats,
|
|
}
|
|
onSubmit(buildSearchUrl(params))
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
|
|
<div className="space-y-4">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">De</Label>
|
|
<Input value={from} onChange={(e) => setFrom(e.target.value)} className="h-9 text-sm" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">À</Label>
|
|
<Input value={to} onChange={(e) => setTo(e.target.value)} className="h-9 text-sm" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">Objet</Label>
|
|
<Input value={subject} onChange={(e) => setSubject(e.target.value)} className="h-9 text-sm" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">Contient les mots</Label>
|
|
<Input value={hasWords} onChange={(e) => setHasWords(e.target.value)} className="h-9 text-sm" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">Ne contient pas</Label>
|
|
<Input value={doesNotHave} onChange={(e) => setDoesNotHave(e.target.value)} className="h-9 text-sm" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">Taille</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Select value={sizeOp} onValueChange={(v) => setSizeOp(v as "gt" | "lt")}>
|
|
<SelectTrigger className="h-9 flex-1 text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="gt">supérieure à</SelectItem>
|
|
<SelectItem value="lt">inférieure à</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
type="number"
|
|
value={sizeVal}
|
|
onChange={(e) => setSizeVal(e.target.value)}
|
|
className="h-9 w-20 text-sm"
|
|
/>
|
|
<Select value={sizeUnit} onValueChange={(v) => setSizeUnit(v as "Mo" | "Ko")}>
|
|
<SelectTrigger className="h-9 w-20 text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Mo">Mo</SelectItem>
|
|
<SelectItem value="Ko">Ko</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">Plage de dates</Label>
|
|
<Select value={within} onValueChange={setWithin}>
|
|
<SelectTrigger className="h-9 text-sm">
|
|
<SelectValue placeholder="Sélectionner" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{DATE_RANGE_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs text-gray-500">Rechercher dans</Label>
|
|
<Select value={searchIn} onValueChange={setSearchIn}>
|
|
<SelectTrigger className="h-9 text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{SEARCH_IN_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-3 pt-1">
|
|
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
|
<Checkbox
|
|
checked={hasAttachment}
|
|
onCheckedChange={(v) => setHasAttachment(v === true)}
|
|
/>
|
|
Contenant une pièce jointe
|
|
</label>
|
|
<label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
|
|
<Checkbox
|
|
checked={excludeChats}
|
|
onCheckedChange={(v) => setExcludeChats(v === true)}
|
|
/>
|
|
Ne pas inclure les chats
|
|
</label>
|
|
</div>
|
|
<Button
|
|
className="w-full bg-[#1a73e8] text-sm text-white hover:bg-[#1765cc]"
|
|
onClick={handleSubmit}
|
|
>
|
|
Rechercher
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|