201 lines
7.9 KiB
TypeScript
201 lines
7.9 KiB
TypeScript
import { MessageSquare, Search, SendHorizonal } from "lucide-react"
|
|
import { useLayoutEffect, useRef, useState } from "react"
|
|
|
|
import { Page } from "@/components/shared/Page"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Input } from "@/components/ui/input"
|
|
import { CONVERSATIONS } from "@/data/mockData"
|
|
import { cn } from "@/lib/utils"
|
|
import type { Conversation } from "@/data/types"
|
|
|
|
/* ===========================================================================
|
|
Messages — a real two-pane inbox. Sending is local state only.
|
|
=========================================================================== */
|
|
|
|
export function MessagesPage() {
|
|
const [threads, setThreads] = useState<Conversation[]>(() =>
|
|
CONVERSATIONS.map((c) => ({ ...c, messages: [...c.messages] }))
|
|
)
|
|
const [activeId, setActiveId] = useState(threads[0].id)
|
|
const [query, setQuery] = useState("")
|
|
const [draft, setDraft] = useState("")
|
|
const endRef = useRef<HTMLDivElement>(null)
|
|
|
|
const active = threads.find((t) => t.id === activeId) ?? threads[0]
|
|
const visible = threads.filter((t) =>
|
|
`${t.name} ${t.role}`.toLowerCase().includes(query.toLowerCase())
|
|
)
|
|
|
|
useLayoutEffect(() => {
|
|
endRef.current?.scrollIntoView({ block: "end" })
|
|
}, [active.messages.length, activeId])
|
|
|
|
/** Opening a thread marks it read. */
|
|
function openThread(id: string) {
|
|
setActiveId(id)
|
|
setThreads((prev) =>
|
|
prev.map((t) => (t.id === id && t.unread > 0 ? { ...t, unread: 0 } : t))
|
|
)
|
|
}
|
|
|
|
function send() {
|
|
const text = draft.trim()
|
|
if (!text) return
|
|
setThreads((prev) =>
|
|
prev.map((t) =>
|
|
t.id === activeId
|
|
? {
|
|
...t,
|
|
lastAt: "Now",
|
|
messages: [
|
|
...t.messages,
|
|
{ id: `local-${t.messages.length}`, from: "me" as const, text, at: "Now" },
|
|
],
|
|
}
|
|
: t
|
|
)
|
|
)
|
|
setDraft("")
|
|
}
|
|
|
|
return (
|
|
<Page className="h-full">
|
|
<div className="grid h-[calc(100dvh-8rem)] min-h-[420px] grid-cols-1 overflow-hidden rounded-[14px] border border-line bg-surface shadow-xs md:grid-cols-[280px_minmax(0,1fr)]">
|
|
{/* ------------------------------------------------- conversations */}
|
|
<aside className="flex min-h-0 flex-col border-b border-line md:border-b-0 md:border-r">
|
|
<div className="shrink-0 border-b border-line-soft p-3">
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-ink-3" />
|
|
<Input
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search conversations…"
|
|
className="pl-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="scroll-slim min-h-0 flex-1 overflow-y-auto">
|
|
{visible.map((t) => (
|
|
<button
|
|
key={t.id}
|
|
type="button"
|
|
onClick={() => openThread(t.id)}
|
|
className={cn(
|
|
"flex w-full items-start gap-2.5 border-b border-line-soft px-3 py-2.5 text-left transition-colors",
|
|
t.id === activeId ? "bg-primary-soft" : "hover:bg-surface-soft"
|
|
)}
|
|
>
|
|
<span className="grid size-9 shrink-0 place-items-center rounded-full bg-surface-sunk text-[11px] font-bold text-ink-2">
|
|
{t.initials}
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-baseline gap-2">
|
|
<span className="min-w-0 flex-1 truncate text-[13px] font-semibold text-ink">
|
|
{t.name}
|
|
</span>
|
|
<span className="shrink-0 text-[11px] text-ink-3">{t.lastAt}</span>
|
|
</div>
|
|
<div className="truncate text-[11.5px] text-ink-3">{t.role}</div>
|
|
<div className="mt-0.5 flex items-center gap-2">
|
|
<span className="min-w-0 flex-1 truncate text-[12px] text-ink-2">
|
|
{t.messages[t.messages.length - 1].text}
|
|
</span>
|
|
{t.unread > 0 && (
|
|
<span className="grid size-[17px] shrink-0 place-items-center rounded-full bg-primary text-[10px] font-bold text-white">
|
|
{t.unread}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
{visible.length === 0 && (
|
|
<p className="p-6 text-center text-[12.5px] text-ink-3">
|
|
No conversations match that search.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
|
|
{/* ------------------------------------------------- active thread */}
|
|
<section className="flex min-h-0 flex-col">
|
|
<header className="flex shrink-0 items-center gap-2.5 border-b border-line px-4 py-3">
|
|
<span className="grid size-9 shrink-0 place-items-center rounded-full bg-primary-soft text-[11px] font-bold text-primary">
|
|
{active.initials}
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-[14px] font-semibold text-ink">{active.name}</div>
|
|
<div className="truncate text-[11.5px] text-ink-3">{active.role}</div>
|
|
</div>
|
|
<Badge tone="good" size="sm">
|
|
<MessageSquare className="size-2.5" />
|
|
Active
|
|
</Badge>
|
|
</header>
|
|
|
|
<div className="scroll-slim min-h-0 flex-1 space-y-2.5 overflow-y-auto p-4">
|
|
{active.messages.map((m) => (
|
|
<div
|
|
key={m.id}
|
|
className={cn("flex", m.from === "me" ? "justify-end" : "justify-start")}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"max-w-[76%] rounded-[14px] px-3 py-2 text-[13px] leading-snug",
|
|
m.from === "me"
|
|
? "rounded-br-[5px] bg-primary text-white"
|
|
: "rounded-bl-[5px] border border-line bg-surface-soft text-ink-2"
|
|
)}
|
|
>
|
|
<p>{m.text}</p>
|
|
<p
|
|
className={cn(
|
|
"mt-1 text-[10.5px]",
|
|
m.from === "me" ? "text-white/70" : "text-ink-3"
|
|
)}
|
|
>
|
|
{m.at}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div ref={endRef} />
|
|
</div>
|
|
|
|
<div className="shrink-0 border-t border-line p-3">
|
|
<div className="flex items-end gap-2 rounded-[14px] border border-line bg-surface-soft px-3 py-2 transition-colors focus-within:border-primary focus-within:bg-surface">
|
|
<input
|
|
value={draft}
|
|
onChange={(e) => setDraft(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault()
|
|
send()
|
|
}
|
|
}}
|
|
placeholder={`Message ${active.name.split(" ")[0]}…`}
|
|
aria-label="Message"
|
|
className="min-w-0 flex-1 bg-transparent text-[13px] text-ink placeholder:text-ink-3 focus:outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={send}
|
|
disabled={!draft.trim()}
|
|
aria-label="Send message"
|
|
className={cn(
|
|
"grid size-7 shrink-0 place-items-center rounded-[9px] transition-colors",
|
|
draft.trim()
|
|
? "bg-primary text-white hover:bg-[#1a45c0]"
|
|
: "bg-surface-sunk text-ink-3"
|
|
)}
|
|
>
|
|
<SendHorizonal className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</Page>
|
|
)
|
|
}
|