44 lines
2.5 KiB
TypeScript
44 lines
2.5 KiB
TypeScript
import Link from "next/link";
|
|
import { PenLine } from "lucide-react";
|
|
|
|
import { PanelShell } from "@/components/panel-shell";
|
|
import { getCaregiverMessages } from "@/lib/caregiver-panel";
|
|
import { formatDateTime, getDeviceName, getMessageHref, getMessageStatusLabel, truncateText } from "@/lib/panel-format";
|
|
import { requireCaregiverSession } from "@/lib/page-auth";
|
|
import { getCaregiverDisplayName } from "@/lib/session";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function MessagesPage({ searchParams }: PageProps<"/messages">) {
|
|
const caregiver = await requireCaregiverSession("/messages");
|
|
const { messages, unreadIncomingCount } = await getCaregiverMessages(caregiver.id);
|
|
const filter = (await searchParams).filter === "out" ? "out" : "in";
|
|
const items = messages.filter((m) => filter === "in" ? m.direction === "ELDER_TO_FAMILY" : m.direction === "FAMILY_TO_ELDER");
|
|
|
|
return (
|
|
<PanelShell currentPath="/messages" title="留言板" caregiverLabel={getCaregiverDisplayName(caregiver)} unreadCount={unreadIncomingCount}
|
|
actions={<Link href="/devices" className="btn primary small"><PenLine size={14}/>写留言</Link>}>
|
|
<div className="segment">
|
|
<Link href="/messages?filter=in" className={filter === "in" ? "active" : ""}>收到 · {unreadIncomingCount} 未读</Link>
|
|
<Link href="/messages?filter=out" className={filter === "out" ? "active" : ""}>发出</Link>
|
|
</div>
|
|
<section className="card">
|
|
{items.length ? items.map((message) => (
|
|
<Link key={message.id} href={getMessageHref(message.publicId)} className="list-row">
|
|
<span className="dot" style={{ background: message.readAt ? "transparent" : "var(--accent)" }} />
|
|
<span className="row-main">
|
|
<span className="row-meta" style={{ marginTop: 0 }}>
|
|
<strong style={{ color: "var(--ink-soft)" }}>{getDeviceName(message.elderDevice.displayName)}</strong>
|
|
{message.importance !== "NORMAL" ? <span className="tag">重要</span> : null}
|
|
<span style={{ marginLeft: "auto", color: "var(--muted-light)" }}>{formatDateTime(message.createdAt)}</span>
|
|
</span>
|
|
<span className="row-title" style={{ marginTop: 4, fontWeight: message.readAt ? 400 : 600 }}>{truncateText(message.content, 82)}</span>
|
|
<span className="row-meta">#{message.publicId} · {getMessageStatusLabel(message)}</span>
|
|
</span>
|
|
</Link>
|
|
)) : <div className="empty">这一侧暂时还没有留言。</div>}
|
|
</section>
|
|
</PanelShell>
|
|
);
|
|
}
|